suis 4.0.0 → 4.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/fesm2022/suis.mjs +482 -686
- package/fesm2022/suis.mjs.map +1 -1
- package/lib/components/suis-accordion/suis-accordion.component.d.ts +5 -4
- package/lib/components/suis-alert/suis-alert.component.d.ts +6 -5
- package/lib/components/suis-box/suis-box.component.d.ts +3 -3
- package/lib/components/suis-breadcrumbs/suis-breadcrumbs.component.d.ts +2 -2
- package/lib/components/suis-chart/suis-chart.component.d.ts +8 -8
- package/lib/components/suis-chip/suis-chip.component.d.ts +5 -6
- package/lib/components/suis-container/suis-container.component.d.ts +2 -2
- package/lib/components/suis-dialog/suis-dialog.component.d.ts +6 -7
- package/lib/components/suis-divider/suis-divider.component.d.ts +2 -2
- package/lib/components/suis-form-field/suis-form-field.component.d.ts +2 -2
- package/lib/components/suis-icon/suis-icon.component.d.ts +8 -8
- package/lib/components/suis-input/suis-input.component.d.ts +4 -5
- package/lib/components/suis-input-chips/suis-input-chips.component.d.ts +5 -5
- package/lib/components/suis-input-image/suis-input-image.component.d.ts +3 -3
- package/lib/components/suis-input-number/suis-input-number.component.d.ts +2 -2
- package/lib/components/suis-input-radio/suis-input-radio.component.d.ts +6 -6
- package/lib/components/suis-item/suis-item.component.d.ts +4 -4
- package/lib/components/suis-label/suis-label.component.d.ts +5 -5
- package/lib/components/suis-notification/suis-notification.component.d.ts +3 -4
- package/lib/components/suis-pagination/suis-pagination.component.d.ts +15 -13
- package/lib/components/suis-progress-bar/suis-progress-bar.component.d.ts +6 -6
- package/lib/components/suis-spinner/suis-spinner.component.d.ts +3 -3
- package/lib/components/suis-spinner-container/suis-spinner-container.component.d.ts +5 -5
- package/lib/components/suis-table/suis-table-column.directive.d.ts +1 -1
- package/lib/components/suis-table/suis-table.component.d.ts +12 -10
- package/lib/components/suis-tabs/suis-tab-actions.pipe.d.ts +2 -2
- package/lib/components/suis-tabs/suis-tab-template.pipe.d.ts +2 -2
- package/lib/components/suis-tabs/suis-tab.directive.d.ts +2 -2
- package/lib/components/suis-tabs/suis-tabs.component.d.ts +6 -5
- package/lib/components/suis-text-area/suis-text-area.component.d.ts +2 -2
- package/lib/components/suis-title/suis-title.component.d.ts +2 -2
- package/lib/components/suis-toolbar/suis-toolbar.component.d.ts +2 -2
- package/lib/modules/suis-button/components/suis-button-link/suis-button-link.component.d.ts +6 -6
- package/lib/modules/suis-navigation/components/suis-navigation/suis-navigation.component.d.ts +11 -9
- package/lib/modules/suis-navigation/components/suis-navigation-group/suis-navigation-group.component.d.ts +10 -7
- package/lib/modules/suis-navigation/components/suis-navigation-group-item/suis-navigation-group-item.component.d.ts +11 -9
- package/lib/modules/suis-navigation/components/suis-navigation-item/suis-navigation-item.component.d.ts +5 -5
- package/lib/modules/suis-select/classes/suis-select-button.base.d.ts +7 -8
- package/lib/modules/suis-select/classes/suis-select-multi.base.d.ts +4 -4
- package/lib/modules/suis-select/classes/suis-select-single.base.d.ts +2 -2
- package/lib/modules/suis-select/classes/suis-select.base.d.ts +12 -12
- package/lib/modules/suis-select/components/suis-select-group/suis-select-group.component.d.ts +3 -3
- package/lib/modules/suis-select/components/suis-select-group-option/suis-select-group-option.component.d.ts +4 -4
- package/lib/modules/suis-select/components/suis-select-multi-group/suis-select-multi-group.component.d.ts +3 -3
- package/lib/modules/suis-select/components/suis-select-option/suis-select-option.component.d.ts +10 -10
- package/lib/shared/classes/suis-button.base.d.ts +7 -8
- package/lib/shared/classes/suis-checkbox.base.d.ts +2 -2
- package/lib/shared/classes/suis-input.base.d.ts +8 -8
- package/package.json +1 -1
package/fesm2022/suis.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Pipe, Component, ChangeDetectionStrategy,
|
|
2
|
+
import { Pipe, input, Component, ChangeDetectionStrategy, signal, output, effect, Input, Directive, Injectable, inject, ChangeDetectorRef, ElementRef, forwardRef, viewChild, HostListener, TemplateRef, contentChild, NgModule, DestroyRef, computed, contentChildren, EventEmitter } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@angular/common';
|
|
4
4
|
import { NgClass, NgComponentOutlet, CommonModule, NgTemplateOutlet } from '@angular/common';
|
|
5
5
|
import * as i1 from '@angular/router';
|
|
@@ -72,157 +72,135 @@ class SuisIconComponent {
|
|
|
72
72
|
/**
|
|
73
73
|
* Sets the font size of the HTML Entity itself. Type of SuisSize. By default set to 'md'.
|
|
74
74
|
*/
|
|
75
|
-
this.size = 'md';
|
|
75
|
+
this.size = input('md');
|
|
76
76
|
/**
|
|
77
77
|
* Sets the color pallette of the icon and surroundings. Type of SuisColor. By default set to 'dark'.
|
|
78
78
|
*/
|
|
79
|
-
this.color = 'dark';
|
|
79
|
+
this.color = input('dark');
|
|
80
80
|
/**
|
|
81
81
|
* Sets the HTML Entity displayed in content. Type of SuisIconType. By default set to 'question'.
|
|
82
82
|
*/
|
|
83
|
-
this.type = 'question';
|
|
83
|
+
this.type = input('question');
|
|
84
84
|
/**
|
|
85
85
|
* Shows the circled border around the icon. By default set to false. Can not be combined with filled (will be overriden then).
|
|
86
86
|
*/
|
|
87
|
-
this.outlined = false;
|
|
87
|
+
this.outlined = input(false);
|
|
88
88
|
/**
|
|
89
89
|
* Shows the circled background behind the icon. By default set to false. Overrides outlined behavior if used at the sime time.
|
|
90
90
|
*/
|
|
91
|
-
this.filled = false;
|
|
91
|
+
this.filled = input(false);
|
|
92
92
|
/**
|
|
93
93
|
* Shows the pointer cursor when hovered. By default set to false.
|
|
94
94
|
*/
|
|
95
|
-
this.pointer = false;
|
|
95
|
+
this.pointer = input(false);
|
|
96
96
|
/**
|
|
97
97
|
* Sets HTML Entity font weight to bold. By default set to false.
|
|
98
98
|
*/
|
|
99
|
-
this.bold = false;
|
|
99
|
+
this.bold = input(false);
|
|
100
100
|
}
|
|
101
101
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
102
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
102
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: SuisIconComponent, isStandalone: true, selector: "suis-icon", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, filled: { classPropertyName: "filled", publicName: "filled", isSignal: true, isRequired: false, transformFunction: null }, pointer: { classPropertyName: "pointer", publicName: "pointer", isSignal: true, isRequired: false, transformFunction: null }, bold: { classPropertyName: "bold", publicName: "bold", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"suis-icon\"\n [class.suis-icon--outlined]=\"outlined()\"\n [class.suis-icon--filled]=\"filled()\"\n [class.suis-icon--pointer]=\"pointer()\"\n [class.suis-icon--bold]=\"bold()\"\n [class.suis-icon--rotate]=\"\n type() === 'chevron-up' || type() === 'chevron-down'\n \"\n [ngClass]=\"'suis-icon' | suisNgClass : color() : size()\"\n>\n <span\n [innerHTML]=\"type() | suisIconType\"\n [ngClass]=\"'suis-icon' | suisNgClass : type()\"\n ></span>\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-icon{display:flex;justify-content:center;align-items:center;width:1rem;height:1rem;border-radius:100%;line-height:1rem;background-color:transparent;border:none}.suis-icon--rotate{transform:rotate(90deg)}.suis-icon--outlined{border-width:.0625rem;border-style:solid}.suis-icon--bold{font-weight:700}.suis-icon--pointer{cursor:pointer}.suis-icon--xs{font-size:.75rem}.suis-icon--sm{font-size:.875rem}.suis-icon--md{font-size:1rem;width:1.125rem;height:1.125rem}.suis-icon--lg{font-size:1.25rem;width:1.5rem;height:1.5rem}.suis-icon--xl{font-size:1.5rem;width:2rem;height:2rem}.suis-icon--primary{color:#192a56;border-color:#192a56}.suis-icon--secondary{color:#273c75;border-color:#273c75}.suis-icon--tertiary{color:#dcdde1;border-color:#dcdde1}.suis-icon--complementary{color:#f5f6fa;border-color:#f5f6fa}.suis-icon--success{color:#2ed573;border-color:#2ed573}.suis-icon--warning{color:#ffa502;border-color:#ffa502}.suis-icon--danger{color:#ff4757;border-color:#ff4757}.suis-icon--white{color:#fff;border-color:#fff}.suis-icon--gray{color:#bcbcbc;border-color:#bcbcbc}.suis-icon--dark{color:#000;border-color:#000}.suis-icon--filled{border:none;background-color:#000;color:#fff}.suis-icon--filled.suis-icon--primary{background-color:#192a56}.suis-icon--filled.suis-icon--secondary{background-color:#273c75}.suis-icon--filled.suis-icon--tertiary{background-color:#dcdde1;color:#2f3640}.suis-icon--filled.suis-icon--complementary{background-color:#f5f6fa;color:#2f3640}.suis-icon--filled.suis-icon--success{background-color:#2ed573}.suis-icon--filled.suis-icon--warning{background-color:#ffa502}.suis-icon--filled.suis-icon--danger{background-color:#ff4757}.suis-icon--filled.suis-icon--white{background-color:#fff;color:#2f3640}.suis-icon--filled.suis-icon--gray{background-color:#bcbcbc}.suis-icon--filled.suis-icon--dark{background-color:#000}.suis-icon span.suis-icon--arrow-down,.suis-icon span.suis-icon--arrow-up,.suis-icon span.suis-icon--arrow-left,.suis-icon span.suis-icon--arrow-right,.suis-icon span.suis-icon--check{font-size:.625em}.suis-icon span.suis-icon--question,.suis-icon span.suis-icon--exclamation{font-size:.875em}.suis-icon--xs span.suis-icon--arrow-down,.suis-icon--xs span.suis-icon--arrow-up,.suis-icon--sm span.suis-icon--arrow-down,.suis-icon--sm span.suis-icon--arrow-up,.suis-icon--md span.suis-icon--arrow-down,.suis-icon--md span.suis-icon--arrow-up,.suis-icon--xs span.suis-icon--chevron-up,.suis-icon--xs span.suis-icon--chevron-down,.suis-icon--xs span.suis-icon--chevron-left,.suis-icon--xs span.suis-icon--chevron-right,.suis-icon--sm span.suis-icon--chevron-up,.suis-icon--sm span.suis-icon--chevron-down,.suis-icon--sm span.suis-icon--chevron-left,.suis-icon--sm span.suis-icon--chevron-right,.suis-icon--md span.suis-icon--chevron-up,.suis-icon--md span.suis-icon--chevron-down,.suis-icon--md span.suis-icon--chevron-left,.suis-icon--md span.suis-icon--chevron-right{margin-bottom:.125rem}.suis-icon--lg span.suis-icon--arrow-down,.suis-icon--lg span.suis-icon--arrow-up,.suis-icon--xl span.suis-icon--arrow-down,.suis-icon--xl span.suis-icon--arrow-up{margin-bottom:.1875rem}.suis-icon--lg span.suis-icon--chevron-up,.suis-icon--lg span.suis-icon--chevron-down,.suis-icon--lg span.suis-icon--chevron-left,.suis-icon--lg span.suis-icon--chevron-right,.suis-icon--xl span.suis-icon--chevron-up,.suis-icon--xl span.suis-icon--chevron-down,.suis-icon--xl span.suis-icon--chevron-left,.suis-icon--xl span.suis-icon--chevron-right{margin-bottom:.25rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SuisIconTypePipe, name: "suisIconType" }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
103
103
|
}
|
|
104
104
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisIconComponent, decorators: [{
|
|
105
105
|
type: Component,
|
|
106
|
-
args: [{ selector: 'suis-icon', imports: [NgClass, SuisIconTypePipe, SuisNgClassPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"suis-icon\"\n [class.suis-icon--outlined]=\"outlined\"\n [class.suis-icon--filled]=\"filled\"\n [class.suis-icon--pointer]=\"pointer\"\n [class.suis-icon--bold]=\"bold\"\n [class.suis-icon--rotate]=\"type === 'chevron-up' || type === 'chevron-down'\"\n [ngClass]=\"'suis-icon' | suisNgClass : color : size\"\n>\n <span\n [innerHTML]=\"type | suisIconType\"\n [ngClass]=\"'suis-icon' | suisNgClass : type\"\n ></span>\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-icon{display:flex;justify-content:center;align-items:center;width:1rem;height:1rem;border-radius:100%;line-height:1rem;background-color:transparent;border:none}.suis-icon--rotate{transform:rotate(90deg)}.suis-icon--outlined{border-width:.0625rem;border-style:solid}.suis-icon--bold{font-weight:700}.suis-icon--pointer{cursor:pointer}.suis-icon--xs{font-size:.75rem}.suis-icon--sm{font-size:.875rem}.suis-icon--md{font-size:1rem;width:1.125rem;height:1.125rem}.suis-icon--lg{font-size:1.25rem;width:1.5rem;height:1.5rem}.suis-icon--xl{font-size:1.5rem;width:2rem;height:2rem}.suis-icon--primary{color:#192a56;border-color:#192a56}.suis-icon--secondary{color:#273c75;border-color:#273c75}.suis-icon--tertiary{color:#dcdde1;border-color:#dcdde1}.suis-icon--complementary{color:#f5f6fa;border-color:#f5f6fa}.suis-icon--success{color:#2ed573;border-color:#2ed573}.suis-icon--warning{color:#ffa502;border-color:#ffa502}.suis-icon--danger{color:#ff4757;border-color:#ff4757}.suis-icon--white{color:#fff;border-color:#fff}.suis-icon--gray{color:#bcbcbc;border-color:#bcbcbc}.suis-icon--dark{color:#000;border-color:#000}.suis-icon--filled{border:none;background-color:#000;color:#fff}.suis-icon--filled.suis-icon--primary{background-color:#192a56}.suis-icon--filled.suis-icon--secondary{background-color:#273c75}.suis-icon--filled.suis-icon--tertiary{background-color:#dcdde1;color:#2f3640}.suis-icon--filled.suis-icon--complementary{background-color:#f5f6fa;color:#2f3640}.suis-icon--filled.suis-icon--success{background-color:#2ed573}.suis-icon--filled.suis-icon--warning{background-color:#ffa502}.suis-icon--filled.suis-icon--danger{background-color:#ff4757}.suis-icon--filled.suis-icon--white{background-color:#fff;color:#2f3640}.suis-icon--filled.suis-icon--gray{background-color:#bcbcbc}.suis-icon--filled.suis-icon--dark{background-color:#000}.suis-icon span.suis-icon--arrow-down,.suis-icon span.suis-icon--arrow-up,.suis-icon span.suis-icon--arrow-left,.suis-icon span.suis-icon--arrow-right,.suis-icon span.suis-icon--check{font-size:.625em}.suis-icon span.suis-icon--question,.suis-icon span.suis-icon--exclamation{font-size:.875em}.suis-icon--xs span.suis-icon--arrow-down,.suis-icon--xs span.suis-icon--arrow-up,.suis-icon--sm span.suis-icon--arrow-down,.suis-icon--sm span.suis-icon--arrow-up,.suis-icon--md span.suis-icon--arrow-down,.suis-icon--md span.suis-icon--arrow-up,.suis-icon--xs span.suis-icon--chevron-up,.suis-icon--xs span.suis-icon--chevron-down,.suis-icon--xs span.suis-icon--chevron-left,.suis-icon--xs span.suis-icon--chevron-right,.suis-icon--sm span.suis-icon--chevron-up,.suis-icon--sm span.suis-icon--chevron-down,.suis-icon--sm span.suis-icon--chevron-left,.suis-icon--sm span.suis-icon--chevron-right,.suis-icon--md span.suis-icon--chevron-up,.suis-icon--md span.suis-icon--chevron-down,.suis-icon--md span.suis-icon--chevron-left,.suis-icon--md span.suis-icon--chevron-right{margin-bottom:.125rem}.suis-icon--lg span.suis-icon--arrow-down,.suis-icon--lg span.suis-icon--arrow-up,.suis-icon--xl span.suis-icon--arrow-down,.suis-icon--xl span.suis-icon--arrow-up{margin-bottom:.1875rem}.suis-icon--lg span.suis-icon--chevron-up,.suis-icon--lg span.suis-icon--chevron-down,.suis-icon--lg span.suis-icon--chevron-left,.suis-icon--lg span.suis-icon--chevron-right,.suis-icon--xl span.suis-icon--chevron-up,.suis-icon--xl span.suis-icon--chevron-down,.suis-icon--xl span.suis-icon--chevron-left,.suis-icon--xl span.suis-icon--chevron-right{margin-bottom:.25rem}\n"] }]
|
|
107
|
-
}]
|
|
108
|
-
type: Input
|
|
109
|
-
}], color: [{
|
|
110
|
-
type: Input
|
|
111
|
-
}], type: [{
|
|
112
|
-
type: Input
|
|
113
|
-
}], outlined: [{
|
|
114
|
-
type: Input
|
|
115
|
-
}], filled: [{
|
|
116
|
-
type: Input
|
|
117
|
-
}], pointer: [{
|
|
118
|
-
type: Input
|
|
119
|
-
}], bold: [{
|
|
120
|
-
type: Input
|
|
121
|
-
}] } });
|
|
106
|
+
args: [{ selector: 'suis-icon', imports: [NgClass, SuisIconTypePipe, SuisNgClassPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"suis-icon\"\n [class.suis-icon--outlined]=\"outlined()\"\n [class.suis-icon--filled]=\"filled()\"\n [class.suis-icon--pointer]=\"pointer()\"\n [class.suis-icon--bold]=\"bold()\"\n [class.suis-icon--rotate]=\"\n type() === 'chevron-up' || type() === 'chevron-down'\n \"\n [ngClass]=\"'suis-icon' | suisNgClass : color() : size()\"\n>\n <span\n [innerHTML]=\"type() | suisIconType\"\n [ngClass]=\"'suis-icon' | suisNgClass : type()\"\n ></span>\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-icon{display:flex;justify-content:center;align-items:center;width:1rem;height:1rem;border-radius:100%;line-height:1rem;background-color:transparent;border:none}.suis-icon--rotate{transform:rotate(90deg)}.suis-icon--outlined{border-width:.0625rem;border-style:solid}.suis-icon--bold{font-weight:700}.suis-icon--pointer{cursor:pointer}.suis-icon--xs{font-size:.75rem}.suis-icon--sm{font-size:.875rem}.suis-icon--md{font-size:1rem;width:1.125rem;height:1.125rem}.suis-icon--lg{font-size:1.25rem;width:1.5rem;height:1.5rem}.suis-icon--xl{font-size:1.5rem;width:2rem;height:2rem}.suis-icon--primary{color:#192a56;border-color:#192a56}.suis-icon--secondary{color:#273c75;border-color:#273c75}.suis-icon--tertiary{color:#dcdde1;border-color:#dcdde1}.suis-icon--complementary{color:#f5f6fa;border-color:#f5f6fa}.suis-icon--success{color:#2ed573;border-color:#2ed573}.suis-icon--warning{color:#ffa502;border-color:#ffa502}.suis-icon--danger{color:#ff4757;border-color:#ff4757}.suis-icon--white{color:#fff;border-color:#fff}.suis-icon--gray{color:#bcbcbc;border-color:#bcbcbc}.suis-icon--dark{color:#000;border-color:#000}.suis-icon--filled{border:none;background-color:#000;color:#fff}.suis-icon--filled.suis-icon--primary{background-color:#192a56}.suis-icon--filled.suis-icon--secondary{background-color:#273c75}.suis-icon--filled.suis-icon--tertiary{background-color:#dcdde1;color:#2f3640}.suis-icon--filled.suis-icon--complementary{background-color:#f5f6fa;color:#2f3640}.suis-icon--filled.suis-icon--success{background-color:#2ed573}.suis-icon--filled.suis-icon--warning{background-color:#ffa502}.suis-icon--filled.suis-icon--danger{background-color:#ff4757}.suis-icon--filled.suis-icon--white{background-color:#fff;color:#2f3640}.suis-icon--filled.suis-icon--gray{background-color:#bcbcbc}.suis-icon--filled.suis-icon--dark{background-color:#000}.suis-icon span.suis-icon--arrow-down,.suis-icon span.suis-icon--arrow-up,.suis-icon span.suis-icon--arrow-left,.suis-icon span.suis-icon--arrow-right,.suis-icon span.suis-icon--check{font-size:.625em}.suis-icon span.suis-icon--question,.suis-icon span.suis-icon--exclamation{font-size:.875em}.suis-icon--xs span.suis-icon--arrow-down,.suis-icon--xs span.suis-icon--arrow-up,.suis-icon--sm span.suis-icon--arrow-down,.suis-icon--sm span.suis-icon--arrow-up,.suis-icon--md span.suis-icon--arrow-down,.suis-icon--md span.suis-icon--arrow-up,.suis-icon--xs span.suis-icon--chevron-up,.suis-icon--xs span.suis-icon--chevron-down,.suis-icon--xs span.suis-icon--chevron-left,.suis-icon--xs span.suis-icon--chevron-right,.suis-icon--sm span.suis-icon--chevron-up,.suis-icon--sm span.suis-icon--chevron-down,.suis-icon--sm span.suis-icon--chevron-left,.suis-icon--sm span.suis-icon--chevron-right,.suis-icon--md span.suis-icon--chevron-up,.suis-icon--md span.suis-icon--chevron-down,.suis-icon--md span.suis-icon--chevron-left,.suis-icon--md span.suis-icon--chevron-right{margin-bottom:.125rem}.suis-icon--lg span.suis-icon--arrow-down,.suis-icon--lg span.suis-icon--arrow-up,.suis-icon--xl span.suis-icon--arrow-down,.suis-icon--xl span.suis-icon--arrow-up{margin-bottom:.1875rem}.suis-icon--lg span.suis-icon--chevron-up,.suis-icon--lg span.suis-icon--chevron-down,.suis-icon--lg span.suis-icon--chevron-left,.suis-icon--lg span.suis-icon--chevron-right,.suis-icon--xl span.suis-icon--chevron-up,.suis-icon--xl span.suis-icon--chevron-down,.suis-icon--xl span.suis-icon--chevron-left,.suis-icon--xl span.suis-icon--chevron-right{margin-bottom:.25rem}\n"] }]
|
|
107
|
+
}] });
|
|
122
108
|
|
|
123
109
|
class SuisAccordionComponent {
|
|
124
110
|
constructor() {
|
|
125
111
|
/**
|
|
126
112
|
* Controlls styling of the accordion based on expanded state of group. By default set to false.
|
|
127
113
|
*/
|
|
128
|
-
this.expanded = false;
|
|
114
|
+
this.expanded = input(false);
|
|
115
|
+
this._expanded = signal(false);
|
|
129
116
|
/**
|
|
130
117
|
* Emits when expanded value of the accordion has been changed.
|
|
131
118
|
*/
|
|
132
|
-
this.expandedChange =
|
|
119
|
+
this.expandedChange = output();
|
|
120
|
+
effect(() => {
|
|
121
|
+
this._expanded.set(this.expanded());
|
|
122
|
+
});
|
|
133
123
|
}
|
|
134
124
|
onToggle() {
|
|
135
|
-
this.
|
|
136
|
-
this.expandedChange.emit(this.
|
|
125
|
+
this._expanded.set(!this._expanded());
|
|
126
|
+
this.expandedChange.emit(this._expanded());
|
|
137
127
|
}
|
|
138
128
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
139
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisAccordionComponent, isStandalone: true, selector: "suis-accordion", inputs: { expanded: "expanded" }, outputs: { expandedChange: "expandedChange" }, ngImport: i0, template: "<div class=\"suis-accordion\">\n <button (click)=\"onToggle()\" class=\"suis-accordion__header\">\n <ng-content select=\"[suisAccordionHeader]\"></ng-content>\n <suis-icon\n [type]=\"
|
|
129
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisAccordionComponent, isStandalone: true, selector: "suis-accordion", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandedChange: "expandedChange" }, ngImport: i0, template: "<div class=\"suis-accordion\">\n <button (click)=\"onToggle()\" class=\"suis-accordion__header\">\n <ng-content select=\"[suisAccordionHeader]\"></ng-content>\n <suis-icon\n [type]=\"_expanded() ? 'chevron-up' : 'chevron-down'\"\n size=\"lg\"\n color=\"primary\"\n ></suis-icon>\n </button>\n @if (_expanded()) {\n <div class=\"suis-accordion__content\">\n <ng-content select=\"[suisAccordionContent]\"></ng-content>\n </div>\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-accordion__header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background-color:#fff;border:.0625rem solid #dcdde1;border-radius:.25rem;font-size:1rem;font-weight:500;color:#192a56}.suis-accordion__header:hover{cursor:pointer}.suis-accordion__content{padding:.75rem 1rem;border:.0625rem solid #dcdde1;border-top:0;font-size:.875rem}\n"], dependencies: [{ kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
140
130
|
}
|
|
141
131
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisAccordionComponent, decorators: [{
|
|
142
132
|
type: Component,
|
|
143
|
-
args: [{ selector: 'suis-accordion', imports: [SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-accordion\">\n <button (click)=\"onToggle()\" class=\"suis-accordion__header\">\n <ng-content select=\"[suisAccordionHeader]\"></ng-content>\n <suis-icon\n [type]=\"
|
|
144
|
-
}],
|
|
145
|
-
type: Input
|
|
146
|
-
}], expandedChange: [{
|
|
147
|
-
type: Output
|
|
148
|
-
}] } });
|
|
133
|
+
args: [{ selector: 'suis-accordion', imports: [SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-accordion\">\n <button (click)=\"onToggle()\" class=\"suis-accordion__header\">\n <ng-content select=\"[suisAccordionHeader]\"></ng-content>\n <suis-icon\n [type]=\"_expanded() ? 'chevron-up' : 'chevron-down'\"\n size=\"lg\"\n color=\"primary\"\n ></suis-icon>\n </button>\n @if (_expanded()) {\n <div class=\"suis-accordion__content\">\n <ng-content select=\"[suisAccordionContent]\"></ng-content>\n </div>\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-accordion__header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background-color:#fff;border:.0625rem solid #dcdde1;border-radius:.25rem;font-size:1rem;font-weight:500;color:#192a56}.suis-accordion__header:hover{cursor:pointer}.suis-accordion__content{padding:.75rem 1rem;border:.0625rem solid #dcdde1;border-top:0;font-size:.875rem}\n"] }]
|
|
134
|
+
}], ctorParameters: () => [] });
|
|
149
135
|
|
|
150
136
|
class SuisAlertComponent {
|
|
151
137
|
constructor() {
|
|
152
138
|
/**
|
|
153
139
|
* Controls visibilty of the alert. By default set to false.
|
|
154
140
|
*/
|
|
155
|
-
this.hidden = false;
|
|
141
|
+
this.hidden = input(false);
|
|
142
|
+
this._hidden = signal(false);
|
|
156
143
|
/**
|
|
157
144
|
* Emits change of hidden state.
|
|
158
145
|
*/
|
|
159
|
-
this.hiddenChange =
|
|
146
|
+
this.hiddenChange = output();
|
|
160
147
|
/**
|
|
161
148
|
* Sets the color pallette of the alert. Type of SuisInfoColor. By default set to 'danger'.
|
|
162
149
|
*/
|
|
163
|
-
this.color = 'danger';
|
|
150
|
+
this.color = input('danger');
|
|
151
|
+
effect(() => {
|
|
152
|
+
this._hidden.set(this.hidden());
|
|
153
|
+
});
|
|
164
154
|
}
|
|
165
155
|
onCancel() {
|
|
166
|
-
this.
|
|
156
|
+
this._hidden.set(true);
|
|
167
157
|
this.hiddenChange.emit(true);
|
|
168
158
|
}
|
|
169
159
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
170
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisAlertComponent, isStandalone: true, selector: "suis-alert", inputs: { hidden: "hidden", color: "color" }, outputs: { hiddenChange: "hiddenChange" }, ngImport: i0, template: "@if (!
|
|
160
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisAlertComponent, isStandalone: true, selector: "suis-alert", inputs: { hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hiddenChange: "hiddenChange" }, ngImport: i0, template: "@if (!_hidden()) {\n<div class=\"suis-alert\" [ngClass]=\"'suis-alert' | suisNgClass : color()\">\n <ng-content></ng-content>\n <button class=\"suis-alert__cancel\" type=\"button\" (click)=\"onCancel()\">\n <suis-icon type=\"times\" [color]=\"'white'\" [size]=\"'lg'\"></suis-icon>\n </button>\n</div>\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-alert{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.75rem 1.25rem;border-radius:.25rem;color:#fff;font-weight:500}.suis-alert--success{background-color:#2ed573}.suis-alert--warning{background-color:#ffa502}.suis-alert--danger{background-color:#ff4757}.suis-alert__cancel{background-color:transparent;border:none;cursor:pointer}\n"], dependencies: [{ 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 }); }
|
|
171
161
|
}
|
|
172
162
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisAlertComponent, decorators: [{
|
|
173
163
|
type: Component,
|
|
174
|
-
args: [{ selector: 'suis-alert', imports: [NgClass, SuisNgClassPipe, SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!
|
|
175
|
-
}],
|
|
176
|
-
type: Input
|
|
177
|
-
}], hiddenChange: [{
|
|
178
|
-
type: Output
|
|
179
|
-
}], color: [{
|
|
180
|
-
type: Input
|
|
181
|
-
}] } });
|
|
164
|
+
args: [{ selector: 'suis-alert', imports: [NgClass, SuisNgClassPipe, SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!_hidden()) {\n<div class=\"suis-alert\" [ngClass]=\"'suis-alert' | suisNgClass : color()\">\n <ng-content></ng-content>\n <button class=\"suis-alert__cancel\" type=\"button\" (click)=\"onCancel()\">\n <suis-icon type=\"times\" [color]=\"'white'\" [size]=\"'lg'\"></suis-icon>\n </button>\n</div>\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-alert{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.75rem 1.25rem;border-radius:.25rem;color:#fff;font-weight:500}.suis-alert--success{background-color:#2ed573}.suis-alert--warning{background-color:#ffa502}.suis-alert--danger{background-color:#ff4757}.suis-alert__cancel{background-color:transparent;border:none;cursor:pointer}\n"] }]
|
|
165
|
+
}], ctorParameters: () => [] });
|
|
182
166
|
|
|
183
167
|
class SuisBoxComponent {
|
|
184
168
|
constructor() {
|
|
185
169
|
/**
|
|
186
170
|
* Adds a padding around the content. By default set to false.
|
|
187
171
|
*/
|
|
188
|
-
this.spacing = false;
|
|
172
|
+
this.spacing = input(false);
|
|
189
173
|
/**
|
|
190
174
|
* Sets box height to 100%. By default set to false.
|
|
191
175
|
*/
|
|
192
|
-
this.fullHeight = false;
|
|
176
|
+
this.fullHeight = input(false);
|
|
193
177
|
}
|
|
194
178
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
195
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
179
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: SuisBoxComponent, isStandalone: true, selector: "suis-box", inputs: { spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, fullHeight: { classPropertyName: "fullHeight", publicName: "fullHeight", isSignal: true, isRequired: false, transformFunction: null } }, 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 }); }
|
|
196
180
|
}
|
|
197
181
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisBoxComponent, decorators: [{
|
|
198
182
|
type: Component,
|
|
199
|
-
args: [{ selector: 'suis-box', 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"] }]
|
|
200
|
-
}]
|
|
201
|
-
type: Input
|
|
202
|
-
}], fullHeight: [{
|
|
203
|
-
type: Input
|
|
204
|
-
}] } });
|
|
183
|
+
args: [{ selector: 'suis-box', 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"] }]
|
|
184
|
+
}] });
|
|
205
185
|
|
|
206
186
|
class SuisBreadcrumbsComponent {
|
|
207
187
|
constructor() {
|
|
208
188
|
/**
|
|
209
189
|
* List of breadcrumbs items. Type of SuisBreadcrumbItem[]. By default set to empty array.
|
|
210
190
|
*/
|
|
211
|
-
this.items = [];
|
|
191
|
+
this.items = input([]);
|
|
212
192
|
}
|
|
213
193
|
/** @internal */
|
|
214
194
|
itemTrackBy(index, item) {
|
|
215
195
|
return `${item.label}-${index}`;
|
|
216
196
|
}
|
|
217
197
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisBreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
218
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisBreadcrumbsComponent, isStandalone: true, selector: "suis-breadcrumbs", inputs: { items: "items" }, ngImport: i0, template: "<div class=\"suis-breadcrumbs\">\n @for (item of items; track itemTrackBy($index, item); let last = $last) {\n <a [routerLink]=\"last ? undefined : item.link\">\n {{ item.label }}\n </a>\n @if (!last) {\n <span>/</span>\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-breadcrumbs a{text-decoration:none;color:#2f3640;font-weight:400}.suis-breadcrumbs a:not(:last-of-type){font-weight:600;color:#40739e}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
198
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisBreadcrumbsComponent, isStandalone: true, selector: "suis-breadcrumbs", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"suis-breadcrumbs\">\n @for (item of items(); track itemTrackBy($index, item); let last = $last) {\n <a [routerLink]=\"last ? undefined : item.link\">\n {{ item.label }}\n </a>\n @if (!last) {\n <span>/</span>\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-breadcrumbs a{text-decoration:none;color:#2f3640;font-weight:400}.suis-breadcrumbs a:not(:last-of-type){font-weight:600;color:#40739e}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
219
199
|
}
|
|
220
200
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisBreadcrumbsComponent, decorators: [{
|
|
221
201
|
type: Component,
|
|
222
|
-
args: [{ selector: 'suis-breadcrumbs', imports: [RouterModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-breadcrumbs\">\n @for (item of items; track itemTrackBy($index, item); let last = $last) {\n <a [routerLink]=\"last ? undefined : item.link\">\n {{ item.label }}\n </a>\n @if (!last) {\n <span>/</span>\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-breadcrumbs a{text-decoration:none;color:#2f3640;font-weight:400}.suis-breadcrumbs a:not(:last-of-type){font-weight:600;color:#40739e}\n"] }]
|
|
223
|
-
}]
|
|
224
|
-
type: Input
|
|
225
|
-
}] } });
|
|
202
|
+
args: [{ selector: 'suis-breadcrumbs', imports: [RouterModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-breadcrumbs\">\n @for (item of items(); track itemTrackBy($index, item); let last = $last) {\n <a [routerLink]=\"last ? undefined : item.link\">\n {{ item.label }}\n </a>\n @if (!last) {\n <span>/</span>\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-breadcrumbs a{text-decoration:none;color:#2f3640;font-weight:400}.suis-breadcrumbs a:not(:last-of-type){font-weight:600;color:#40739e}\n"] }]
|
|
203
|
+
}] });
|
|
226
204
|
|
|
227
205
|
class SuisChartHeightPipe {
|
|
228
206
|
transform(value, maxValue) {
|
|
@@ -281,37 +259,37 @@ class SuisChartComponent {
|
|
|
281
259
|
/**
|
|
282
260
|
* Array of the chart bars labels. By default set to empty array.
|
|
283
261
|
*/
|
|
284
|
-
this.labels = [];
|
|
262
|
+
this.labels = input([]);
|
|
285
263
|
/**
|
|
286
264
|
* Array of data values and optionally colors. Type of SuisChartDataItem[]. By default set to empty array.
|
|
287
265
|
*/
|
|
288
|
-
this.data = [];
|
|
266
|
+
this.data = input([]);
|
|
289
267
|
/**
|
|
290
268
|
* Sets the default color of the chart bars. Type of SuisColor. By default set to 'primary'.
|
|
291
269
|
*/
|
|
292
|
-
this.color = 'primary';
|
|
270
|
+
this.color = input('primary');
|
|
293
271
|
/**
|
|
294
272
|
* Adjusts the width of the chart bars. Type of SuisSize. By default set to 'md'.
|
|
295
273
|
*/
|
|
296
|
-
this.size = 'md';
|
|
274
|
+
this.size = input('md');
|
|
297
275
|
/**
|
|
298
276
|
* Sets the maximum value automatically based on data values. By default set to false.
|
|
299
277
|
*/
|
|
300
|
-
this.autoMax = false;
|
|
278
|
+
this.autoMax = input(false);
|
|
301
279
|
/**
|
|
302
280
|
* Array of comparision data values and optionally colors. Type of SuisChartDataItem[]. By default set to empty array.
|
|
303
281
|
*/
|
|
304
|
-
this.compareData = [];
|
|
282
|
+
this.compareData = input([]);
|
|
305
283
|
/**
|
|
306
284
|
* Sets the default color of the comparision chart bars. Type of SuisColor. By default set to 'warning'.
|
|
307
285
|
*/
|
|
308
|
-
this.compareColor = 'warning';
|
|
286
|
+
this.compareColor = input('warning');
|
|
309
287
|
}
|
|
310
288
|
/** @internal */
|
|
311
289
|
get maxValue() {
|
|
312
|
-
if (!this.autoMax)
|
|
290
|
+
if (!this.autoMax())
|
|
313
291
|
return this._maxValue;
|
|
314
|
-
return Math.max(...[...this.data, ...this.compareData].map((item) => item.value));
|
|
292
|
+
return Math.max(...[...this.data(), ...this.compareData()].map((item) => item.value));
|
|
315
293
|
}
|
|
316
294
|
/**
|
|
317
295
|
* Set the maximum value of the chart bars. By default set to 100.
|
|
@@ -320,27 +298,13 @@ class SuisChartComponent {
|
|
|
320
298
|
this._maxValue = value;
|
|
321
299
|
}
|
|
322
300
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
323
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", 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 @for (item of data | suisChartData : compareData; track item) {\n <div\n class=\"suis-chart__content__item\"\n [ngClass]=\"\n 'suis-chart__content__item'\n | suisNgClass\n : (item.compare
|
|
301
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisChartComponent, isStandalone: true, selector: "suis-chart", inputs: { maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: false, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, autoMax: { classPropertyName: "autoMax", publicName: "autoMax", isSignal: true, isRequired: false, transformFunction: null }, compareData: { classPropertyName: "compareData", publicName: "compareData", isSignal: true, isRequired: false, transformFunction: null }, compareColor: { classPropertyName: "compareColor", publicName: "compareColor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"suis-chart\">\n <div\n class=\"suis-chart__content\"\n [ngClass]=\"'suis-chart__content' | suisNgClass : size()\"\n >\n @for (item of data() | suisChartData : compareData(); track item) {\n <div\n class=\"suis-chart__content__item\"\n [ngClass]=\"\n 'suis-chart__content__item'\n | suisNgClass\n : (item.compare\n ? item.color || compareColor()\n : 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 }\n </div>\n <div\n class=\"suis-chart__labels\"\n [ngClass]=\"'suis-chart__labels' | suisNgClass : size()\"\n >\n @for (label of labels(); track label) {\n <div\n class=\"suis-chart__labels__item\"\n [class.suis-chart__labels__item--double]=\"compareData().length\"\n >\n {{ label }}\n </div>\n }\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block;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: 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 }); }
|
|
324
302
|
}
|
|
325
303
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisChartComponent, decorators: [{
|
|
326
304
|
type: Component,
|
|
327
|
-
args: [{ selector: 'suis-chart', imports: [NgClass, SuisChartHeightPipe, SuisChartDataPipe, SuisNgClassPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-chart\">\n <div\n class=\"suis-chart__content\"\n [ngClass]=\"'suis-chart__content' | suisNgClass : size\"\n >\n @for (item of data | suisChartData : compareData; track item) {\n <div\n class=\"suis-chart__content__item\"\n [ngClass]=\"\n 'suis-chart__content__item'\n | suisNgClass\n : (item.compare
|
|
305
|
+
args: [{ selector: 'suis-chart', imports: [NgClass, SuisChartHeightPipe, SuisChartDataPipe, SuisNgClassPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-chart\">\n <div\n class=\"suis-chart__content\"\n [ngClass]=\"'suis-chart__content' | suisNgClass : size()\"\n >\n @for (item of data() | suisChartData : compareData(); track item) {\n <div\n class=\"suis-chart__content__item\"\n [ngClass]=\"\n 'suis-chart__content__item'\n | suisNgClass\n : (item.compare\n ? item.color || compareColor()\n : 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 }\n </div>\n <div\n class=\"suis-chart__labels\"\n [ngClass]=\"'suis-chart__labels' | suisNgClass : size()\"\n >\n @for (label of labels(); track label) {\n <div\n class=\"suis-chart__labels__item\"\n [class.suis-chart__labels__item--double]=\"compareData().length\"\n >\n {{ label }}\n </div>\n }\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block;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"] }]
|
|
328
306
|
}], propDecorators: { maxValue: [{
|
|
329
307
|
type: Input
|
|
330
|
-
}], labels: [{
|
|
331
|
-
type: Input
|
|
332
|
-
}], data: [{
|
|
333
|
-
type: Input
|
|
334
|
-
}], color: [{
|
|
335
|
-
type: Input
|
|
336
|
-
}], size: [{
|
|
337
|
-
type: Input
|
|
338
|
-
}], autoMax: [{
|
|
339
|
-
type: Input
|
|
340
|
-
}], compareData: [{
|
|
341
|
-
type: Input
|
|
342
|
-
}], compareColor: [{
|
|
343
|
-
type: Input
|
|
344
308
|
}] } });
|
|
345
309
|
|
|
346
310
|
class SuisChipComponent {
|
|
@@ -348,137 +312,111 @@ class SuisChipComponent {
|
|
|
348
312
|
/**
|
|
349
313
|
* Sets the color pallette of the chip. Type of SuisColor. By default set to 'primary'.
|
|
350
314
|
*/
|
|
351
|
-
this.color = 'primary';
|
|
315
|
+
this.color = input('primary');
|
|
352
316
|
/**
|
|
353
317
|
* Sets the color of the cross icon. Visible only if removable set to true. Type of SuisColor. By default set to 'white'.
|
|
354
318
|
*/
|
|
355
|
-
this.iconColor = 'white';
|
|
319
|
+
this.iconColor = input('white');
|
|
356
320
|
/**
|
|
357
321
|
* Shows cross icon with remove action. By default set to false.
|
|
358
322
|
*/
|
|
359
|
-
this.removable = false;
|
|
323
|
+
this.removable = input(false);
|
|
360
324
|
/**
|
|
361
325
|
* Emits on cross icon click.
|
|
362
326
|
*/
|
|
363
|
-
this.remove =
|
|
327
|
+
this.remove = output();
|
|
364
328
|
}
|
|
365
329
|
/** @internal */
|
|
366
330
|
onRemove() {
|
|
367
331
|
this.remove.emit();
|
|
368
332
|
}
|
|
369
333
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
370
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisChipComponent, isStandalone: true, selector: "suis-chip", inputs: { color: "color", iconColor: "iconColor", removable: "removable" }, outputs: { remove: "remove" }, ngImport: i0, template: "<div class=\"suis-chip\" [ngClass]=\"'suis-chip' | suisNgClass : color\">\n <ng-content></ng-content>\n @if (removable) {\n <button class=\"suis-chip__remove\" type=\"button\" (click)=\"onRemove()\">\n <suis-icon\n type=\"times\"\n [color]=\"iconColor\"\n [pointer]=\"true\"\n [size]=\"'md'\"\n ></suis-icon>\n </button>\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-chip{display:flex;align-items:center;justify-content:center;width:fit-content;border-radius:1rem;font-size:.875rem;padding:.25rem .5rem;color:#fff}.suis-chip--primary{background-color:#192a56}.suis-chip--secondary{background-color:#273c75}.suis-chip--tertiary{background-color:#dcdde1}.suis-chip--complementary{background-color:#f5f6fa}.suis-chip--success{background-color:#2ed573}.suis-chip--warning{background-color:#ffa502}.suis-chip--danger{background-color:#ff4757}.suis-chip--white{background-color:#fff}.suis-chip--gray{background-color:#bcbcbc}.suis-chip--dark{background-color:#000}.suis-chip__remove{border:none;background-color:transparent}.suis-chip--tertiary,.suis-chip--complementary,.suis-chip--white{color:#2f3640}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
334
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisChipComponent, isStandalone: true, selector: "suis-chip", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { remove: "remove" }, ngImport: i0, template: "<div class=\"suis-chip\" [ngClass]=\"'suis-chip' | suisNgClass : color()\">\n <ng-content></ng-content>\n @if (removable()) {\n <button class=\"suis-chip__remove\" type=\"button\" (click)=\"onRemove()\">\n <suis-icon\n type=\"times\"\n [color]=\"iconColor()\"\n [pointer]=\"true\"\n [size]=\"'md'\"\n ></suis-icon>\n </button>\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-chip{display:flex;align-items:center;justify-content:center;width:fit-content;border-radius:1rem;font-size:.875rem;padding:.25rem .5rem;color:#fff}.suis-chip--primary{background-color:#192a56}.suis-chip--secondary{background-color:#273c75}.suis-chip--tertiary{background-color:#dcdde1}.suis-chip--complementary{background-color:#f5f6fa}.suis-chip--success{background-color:#2ed573}.suis-chip--warning{background-color:#ffa502}.suis-chip--danger{background-color:#ff4757}.suis-chip--white{background-color:#fff}.suis-chip--gray{background-color:#bcbcbc}.suis-chip--dark{background-color:#000}.suis-chip__remove{border:none;background-color:transparent}.suis-chip--tertiary,.suis-chip--complementary,.suis-chip--white{color:#2f3640}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
371
335
|
}
|
|
372
336
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisChipComponent, decorators: [{
|
|
373
337
|
type: Component,
|
|
374
|
-
args: [{ selector: 'suis-chip', imports: [NgClass, SuisIconComponent, SuisNgClassPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-chip\" [ngClass]=\"'suis-chip' | suisNgClass : color\">\n <ng-content></ng-content>\n @if (removable) {\n <button class=\"suis-chip__remove\" type=\"button\" (click)=\"onRemove()\">\n <suis-icon\n type=\"times\"\n [color]=\"iconColor\"\n [pointer]=\"true\"\n [size]=\"'md'\"\n ></suis-icon>\n </button>\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-chip{display:flex;align-items:center;justify-content:center;width:fit-content;border-radius:1rem;font-size:.875rem;padding:.25rem .5rem;color:#fff}.suis-chip--primary{background-color:#192a56}.suis-chip--secondary{background-color:#273c75}.suis-chip--tertiary{background-color:#dcdde1}.suis-chip--complementary{background-color:#f5f6fa}.suis-chip--success{background-color:#2ed573}.suis-chip--warning{background-color:#ffa502}.suis-chip--danger{background-color:#ff4757}.suis-chip--white{background-color:#fff}.suis-chip--gray{background-color:#bcbcbc}.suis-chip--dark{background-color:#000}.suis-chip__remove{border:none;background-color:transparent}.suis-chip--tertiary,.suis-chip--complementary,.suis-chip--white{color:#2f3640}\n"] }]
|
|
375
|
-
}]
|
|
376
|
-
type: Input
|
|
377
|
-
}], iconColor: [{
|
|
378
|
-
type: Input
|
|
379
|
-
}], removable: [{
|
|
380
|
-
type: Input
|
|
381
|
-
}], remove: [{
|
|
382
|
-
type: Output
|
|
383
|
-
}] } });
|
|
338
|
+
args: [{ selector: 'suis-chip', imports: [NgClass, SuisIconComponent, SuisNgClassPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-chip\" [ngClass]=\"'suis-chip' | suisNgClass : color()\">\n <ng-content></ng-content>\n @if (removable()) {\n <button class=\"suis-chip__remove\" type=\"button\" (click)=\"onRemove()\">\n <suis-icon\n type=\"times\"\n [color]=\"iconColor()\"\n [pointer]=\"true\"\n [size]=\"'md'\"\n ></suis-icon>\n </button>\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-chip{display:flex;align-items:center;justify-content:center;width:fit-content;border-radius:1rem;font-size:.875rem;padding:.25rem .5rem;color:#fff}.suis-chip--primary{background-color:#192a56}.suis-chip--secondary{background-color:#273c75}.suis-chip--tertiary{background-color:#dcdde1}.suis-chip--complementary{background-color:#f5f6fa}.suis-chip--success{background-color:#2ed573}.suis-chip--warning{background-color:#ffa502}.suis-chip--danger{background-color:#ff4757}.suis-chip--white{background-color:#fff}.suis-chip--gray{background-color:#bcbcbc}.suis-chip--dark{background-color:#000}.suis-chip__remove{border:none;background-color:transparent}.suis-chip--tertiary,.suis-chip--complementary,.suis-chip--white{color:#2f3640}\n"] }]
|
|
339
|
+
}] });
|
|
384
340
|
|
|
385
341
|
class SuisContainerComponent {
|
|
386
342
|
constructor() {
|
|
387
343
|
/**
|
|
388
344
|
* Adds a padding around the content. By default set to false.
|
|
389
345
|
*/
|
|
390
|
-
this.spacing = false;
|
|
346
|
+
this.spacing = input(false);
|
|
391
347
|
}
|
|
392
348
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
393
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
349
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: SuisContainerComponent, isStandalone: true, selector: "suis-container", inputs: { spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null } }, 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 }); }
|
|
394
350
|
}
|
|
395
351
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisContainerComponent, decorators: [{
|
|
396
352
|
type: Component,
|
|
397
|
-
args: [{ selector: 'suis-container', 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"] }]
|
|
398
|
-
}]
|
|
399
|
-
type: Input
|
|
400
|
-
}] } });
|
|
353
|
+
args: [{ selector: 'suis-container', 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"] }]
|
|
354
|
+
}] });
|
|
401
355
|
|
|
402
356
|
class SuisSpinnerComponent {
|
|
403
357
|
constructor() {
|
|
404
358
|
/**
|
|
405
359
|
* Sets the size of the spinner. Type of SuisSize. By default set to 'sm'.
|
|
406
360
|
*/
|
|
407
|
-
this.size = 'sm';
|
|
361
|
+
this.size = input('sm');
|
|
408
362
|
/**
|
|
409
363
|
* Sets the color of the spinner. Type of SuisColor. By default set to 'primary'.
|
|
410
364
|
*/
|
|
411
|
-
this.color = 'primary';
|
|
365
|
+
this.color = input('primary');
|
|
412
366
|
}
|
|
413
367
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
414
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
368
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: SuisSpinnerComponent, isStandalone: true, selector: "suis-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"suis-spinner\"\n [ngClass]=\"'suis-spinner' | suisNgClass : size() : color()\"\n></div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-spinner{animation:spin .5s infinite linear;border-style:solid;border-radius:50%;border-left-color:transparent!important}.suis-spinner--primary{border-color:#192a56}.suis-spinner--secondary{border-color:#273c75}.suis-spinner--tertiary{border-color:#dcdde1}.suis-spinner--complementary{border-color:#f5f6fa}.suis-spinner--success{border-color:#2ed573}.suis-spinner--warning{border-color:#ffa502}.suis-spinner--danger{border-color:#ff4757}.suis-spinner--dark{border-color:#000}.suis-spinner--gray{border-color:#bcbcbc}.suis-spinner--white{border-color:#fff}.suis-spinner--xs{width:1rem;height:1rem;border-width:.1875rem}.suis-spinner--sm{width:1.5rem;height:1.5rem;border-width:.25rem}.suis-spinner--md{width:2rem;height:2rem;border-width:.375rem}.suis-spinner--lg{width:3rem;height:3rem;border-width:.5rem}.suis-spinner--xl{width:4rem;height:4rem;border-width:.625rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
415
369
|
}
|
|
416
370
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisSpinnerComponent, decorators: [{
|
|
417
371
|
type: Component,
|
|
418
|
-
args: [{ selector: 'suis-spinner', imports: [NgClass, SuisNgClassPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"suis-spinner\"\n [ngClass]=\"'suis-spinner' | suisNgClass : size : color\"\n></div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-spinner{animation:spin .5s infinite linear;border-style:solid;border-radius:50%;border-left-color:transparent!important}.suis-spinner--primary{border-color:#192a56}.suis-spinner--secondary{border-color:#273c75}.suis-spinner--tertiary{border-color:#dcdde1}.suis-spinner--complementary{border-color:#f5f6fa}.suis-spinner--success{border-color:#2ed573}.suis-spinner--warning{border-color:#ffa502}.suis-spinner--danger{border-color:#ff4757}.suis-spinner--dark{border-color:#000}.suis-spinner--gray{border-color:#bcbcbc}.suis-spinner--white{border-color:#fff}.suis-spinner--xs{width:1rem;height:1rem;border-width:.1875rem}.suis-spinner--sm{width:1.5rem;height:1.5rem;border-width:.25rem}.suis-spinner--md{width:2rem;height:2rem;border-width:.375rem}.suis-spinner--lg{width:3rem;height:3rem;border-width:.5rem}.suis-spinner--xl{width:4rem;height:4rem;border-width:.625rem}\n"] }]
|
|
419
|
-
}]
|
|
420
|
-
type: Input
|
|
421
|
-
}], color: [{
|
|
422
|
-
type: Input
|
|
423
|
-
}] } });
|
|
372
|
+
args: [{ selector: 'suis-spinner', imports: [NgClass, SuisNgClassPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"suis-spinner\"\n [ngClass]=\"'suis-spinner' | suisNgClass : size() : color()\"\n></div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-spinner{animation:spin .5s infinite linear;border-style:solid;border-radius:50%;border-left-color:transparent!important}.suis-spinner--primary{border-color:#192a56}.suis-spinner--secondary{border-color:#273c75}.suis-spinner--tertiary{border-color:#dcdde1}.suis-spinner--complementary{border-color:#f5f6fa}.suis-spinner--success{border-color:#2ed573}.suis-spinner--warning{border-color:#ffa502}.suis-spinner--danger{border-color:#ff4757}.suis-spinner--dark{border-color:#000}.suis-spinner--gray{border-color:#bcbcbc}.suis-spinner--white{border-color:#fff}.suis-spinner--xs{width:1rem;height:1rem;border-width:.1875rem}.suis-spinner--sm{width:1.5rem;height:1.5rem;border-width:.25rem}.suis-spinner--md{width:2rem;height:2rem;border-width:.375rem}.suis-spinner--lg{width:3rem;height:3rem;border-width:.5rem}.suis-spinner--xl{width:4rem;height:4rem;border-width:.625rem}\n"] }]
|
|
373
|
+
}] });
|
|
424
374
|
|
|
425
375
|
class SuisButtonBase {
|
|
426
376
|
constructor() {
|
|
427
377
|
/**
|
|
428
378
|
* Sets button's color theme. Type of SuisPalleteColor | SuisInfoColor. By default set to 'primary'.
|
|
429
379
|
*/
|
|
430
|
-
this.color = 'primary';
|
|
380
|
+
this.color = input('primary');
|
|
431
381
|
/**
|
|
432
382
|
* Sets button's disabled attribute. By default set to false.
|
|
433
383
|
*/
|
|
434
|
-
this.disabled = false;
|
|
384
|
+
this.disabled = input(false);
|
|
435
385
|
/**
|
|
436
386
|
* Sets button's type attribute. By default set to 'button'.
|
|
437
387
|
*/
|
|
438
|
-
this.type = 'button';
|
|
388
|
+
this.type = input('button');
|
|
439
389
|
/**
|
|
440
390
|
* Shows loading spinner instead of content projection. By default set to false.
|
|
441
391
|
*/
|
|
442
|
-
this.loading = false;
|
|
392
|
+
this.loading = input(false);
|
|
443
393
|
/**
|
|
444
394
|
* Sets width to 100% instead of fit-content. By default set to false.
|
|
445
395
|
*/
|
|
446
|
-
this.fullWidth = false;
|
|
396
|
+
this.fullWidth = input(false);
|
|
447
397
|
/**
|
|
448
398
|
* Emits on button click event.
|
|
449
399
|
*/
|
|
450
|
-
this.clicked =
|
|
400
|
+
this.clicked = output();
|
|
451
401
|
}
|
|
452
402
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
453
403
|
onClick(event) {
|
|
454
404
|
this.clicked.emit();
|
|
455
405
|
}
|
|
456
406
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisButtonBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
457
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
407
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.7", type: SuisButtonBase, isStandalone: true, inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0 }); }
|
|
458
408
|
}
|
|
459
409
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisButtonBase, decorators: [{
|
|
460
410
|
type: Directive
|
|
461
|
-
}]
|
|
462
|
-
type: Input
|
|
463
|
-
}], disabled: [{
|
|
464
|
-
type: Input
|
|
465
|
-
}], type: [{
|
|
466
|
-
type: Input
|
|
467
|
-
}], loading: [{
|
|
468
|
-
type: Input
|
|
469
|
-
}], fullWidth: [{
|
|
470
|
-
type: Input
|
|
471
|
-
}], clicked: [{
|
|
472
|
-
type: Output
|
|
473
|
-
}] } });
|
|
411
|
+
}] });
|
|
474
412
|
|
|
475
413
|
class SuisButtonComponent extends SuisButtonBase {
|
|
476
414
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
477
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisButtonComponent, isStandalone: true, selector: "suis-button", usesInheritance: true, ngImport: i0, template: "<button\n class=\"suis-button\"\n [class.suis-button--full-width]=\"fullWidth\"\n [ngClass]=\"'suis-button' | suisNgClass : color\"\n [attr.disabled]=\"disabled || loading ? true : undefined\"\n [attr.tabindex]=\"disabled || loading ? -1 : 0\"\n [attr.type]=\"type\"\n (click)=\"onClick()\"\n>\n <span\n class=\"suis-button__content\"\n [class.suis-button__content--loading]=\"loading\"\n >\n <ng-content></ng-content>\n </span>\n @if (loading) {\n <suis-spinner size=\"xs\" color=\"white\"></suis-spinner>\n }\n</button>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-button{width:fit-content;display:flex;align-items:center;justify-content:center;padding:.375rem 1rem;border-radius:.25rem;text-align:center;text-decoration:none;transition:background-color .25s ease-in-out;border-width:.125rem;border-style:solid;font-size:.875rem}.suis-button--full-width{width:100%}.suis-button--disabled{opacity:.5}.suis-button__content{display:flex;align-items:center;justify-content:center}.suis-button__content--loading{visibility:hidden}.suis-button suis-spinner{position:absolute}.suis-button:disabled{opacity:.5}.suis-button:hover:not(:disabled){cursor:pointer}.suis-button:hover:disabled{cursor:not-allowed}.suis-button:focus,.suis-button:focus-within{outline:none}.suis-button--primary{background-color:#192a56;border-color:#192a56;color:#fff}.suis-button--primary:hover:not(:disabled){background-color:#192a56d9}.suis-button--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button--secondary{background-color:#273c75;border-color:#273c75;color:#fff}.suis-button--secondary:hover:not(:disabled){background-color:#273c75d9}.suis-button--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button--tertiary{background-color:#dcdde1;border-color:#dcdde1;color:#2f3640}.suis-button--tertiary:hover:not(:disabled){background-color:#dcdde1d9}.suis-button--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button--complementary{background-color:#f5f6fa;border-color:#f5f6fa;color:#2f3640}.suis-button--complementary:hover:not(:disabled){background-color:#f5f6fad9}.suis-button--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button--success{background-color:#2ed573;border-color:#2ed573;color:#fff}.suis-button--success:hover:not(:disabled){background-color:#2ed573d9}.suis-button--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button--warning{background-color:#ffa502;border-color:#ffa502;color:#fff}.suis-button--warning:hover:not(:disabled){background-color:#ffa502d9}.suis-button--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button--danger{background-color:#ff4757;border-color:#ff4757;color:#fff}.suis-button--danger:hover:not(:disabled){background-color:#ff4757d9}.suis-button--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }, { kind: "component", type: SuisSpinnerComponent, selector: "suis-spinner", inputs: ["size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
415
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisButtonComponent, isStandalone: true, selector: "suis-button", usesInheritance: true, ngImport: i0, template: "<button\n class=\"suis-button\"\n [class.suis-button--full-width]=\"fullWidth()\"\n [ngClass]=\"'suis-button' | suisNgClass : color()\"\n [attr.disabled]=\"disabled() || loading() ? true : undefined\"\n [attr.tabindex]=\"disabled() || loading() ? -1 : 0\"\n [attr.type]=\"type()\"\n (click)=\"onClick()\"\n>\n <span\n class=\"suis-button__content\"\n [class.suis-button__content--loading]=\"loading()\"\n >\n <ng-content></ng-content>\n </span>\n @if (loading()) {\n <suis-spinner size=\"xs\" color=\"white\"></suis-spinner>\n }\n</button>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-button{width:fit-content;display:flex;align-items:center;justify-content:center;padding:.375rem 1rem;border-radius:.25rem;text-align:center;text-decoration:none;transition:background-color .25s ease-in-out;border-width:.125rem;border-style:solid;font-size:.875rem}.suis-button--full-width{width:100%}.suis-button--disabled{opacity:.5}.suis-button__content{display:flex;align-items:center;justify-content:center}.suis-button__content--loading{visibility:hidden}.suis-button suis-spinner{position:absolute}.suis-button:disabled{opacity:.5}.suis-button:hover:not(:disabled){cursor:pointer}.suis-button:hover:disabled{cursor:not-allowed}.suis-button:focus,.suis-button:focus-within{outline:none}.suis-button--primary{background-color:#192a56;border-color:#192a56;color:#fff}.suis-button--primary:hover:not(:disabled){background-color:#192a56d9}.suis-button--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button--secondary{background-color:#273c75;border-color:#273c75;color:#fff}.suis-button--secondary:hover:not(:disabled){background-color:#273c75d9}.suis-button--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button--tertiary{background-color:#dcdde1;border-color:#dcdde1;color:#2f3640}.suis-button--tertiary:hover:not(:disabled){background-color:#dcdde1d9}.suis-button--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button--complementary{background-color:#f5f6fa;border-color:#f5f6fa;color:#2f3640}.suis-button--complementary:hover:not(:disabled){background-color:#f5f6fad9}.suis-button--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button--success{background-color:#2ed573;border-color:#2ed573;color:#fff}.suis-button--success:hover:not(:disabled){background-color:#2ed573d9}.suis-button--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button--warning{background-color:#ffa502;border-color:#ffa502;color:#fff}.suis-button--warning:hover:not(:disabled){background-color:#ffa502d9}.suis-button--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button--danger{background-color:#ff4757;border-color:#ff4757;color:#fff}.suis-button--danger:hover:not(:disabled){background-color:#ff4757d9}.suis-button--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }, { kind: "component", type: SuisSpinnerComponent, selector: "suis-spinner", inputs: ["size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
478
416
|
}
|
|
479
417
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisButtonComponent, decorators: [{
|
|
480
418
|
type: Component,
|
|
481
|
-
args: [{ selector: 'suis-button', imports: [NgClass, SuisNgClassPipe, SuisSpinnerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n class=\"suis-button\"\n [class.suis-button--full-width]=\"fullWidth\"\n [ngClass]=\"'suis-button' | suisNgClass : color\"\n [attr.disabled]=\"disabled || loading ? true : undefined\"\n [attr.tabindex]=\"disabled || loading ? -1 : 0\"\n [attr.type]=\"type\"\n (click)=\"onClick()\"\n>\n <span\n class=\"suis-button__content\"\n [class.suis-button__content--loading]=\"loading\"\n >\n <ng-content></ng-content>\n </span>\n @if (loading) {\n <suis-spinner size=\"xs\" color=\"white\"></suis-spinner>\n }\n</button>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-button{width:fit-content;display:flex;align-items:center;justify-content:center;padding:.375rem 1rem;border-radius:.25rem;text-align:center;text-decoration:none;transition:background-color .25s ease-in-out;border-width:.125rem;border-style:solid;font-size:.875rem}.suis-button--full-width{width:100%}.suis-button--disabled{opacity:.5}.suis-button__content{display:flex;align-items:center;justify-content:center}.suis-button__content--loading{visibility:hidden}.suis-button suis-spinner{position:absolute}.suis-button:disabled{opacity:.5}.suis-button:hover:not(:disabled){cursor:pointer}.suis-button:hover:disabled{cursor:not-allowed}.suis-button:focus,.suis-button:focus-within{outline:none}.suis-button--primary{background-color:#192a56;border-color:#192a56;color:#fff}.suis-button--primary:hover:not(:disabled){background-color:#192a56d9}.suis-button--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button--secondary{background-color:#273c75;border-color:#273c75;color:#fff}.suis-button--secondary:hover:not(:disabled){background-color:#273c75d9}.suis-button--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button--tertiary{background-color:#dcdde1;border-color:#dcdde1;color:#2f3640}.suis-button--tertiary:hover:not(:disabled){background-color:#dcdde1d9}.suis-button--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button--complementary{background-color:#f5f6fa;border-color:#f5f6fa;color:#2f3640}.suis-button--complementary:hover:not(:disabled){background-color:#f5f6fad9}.suis-button--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button--success{background-color:#2ed573;border-color:#2ed573;color:#fff}.suis-button--success:hover:not(:disabled){background-color:#2ed573d9}.suis-button--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button--warning{background-color:#ffa502;border-color:#ffa502;color:#fff}.suis-button--warning:hover:not(:disabled){background-color:#ffa502d9}.suis-button--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button--danger{background-color:#ff4757;border-color:#ff4757;color:#fff}.suis-button--danger:hover:not(:disabled){background-color:#ff4757d9}.suis-button--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"] }]
|
|
419
|
+
args: [{ selector: 'suis-button', imports: [NgClass, SuisNgClassPipe, SuisSpinnerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n class=\"suis-button\"\n [class.suis-button--full-width]=\"fullWidth()\"\n [ngClass]=\"'suis-button' | suisNgClass : color()\"\n [attr.disabled]=\"disabled() || loading() ? true : undefined\"\n [attr.tabindex]=\"disabled() || loading() ? -1 : 0\"\n [attr.type]=\"type()\"\n (click)=\"onClick()\"\n>\n <span\n class=\"suis-button__content\"\n [class.suis-button__content--loading]=\"loading()\"\n >\n <ng-content></ng-content>\n </span>\n @if (loading()) {\n <suis-spinner size=\"xs\" color=\"white\"></suis-spinner>\n }\n</button>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-button{width:fit-content;display:flex;align-items:center;justify-content:center;padding:.375rem 1rem;border-radius:.25rem;text-align:center;text-decoration:none;transition:background-color .25s ease-in-out;border-width:.125rem;border-style:solid;font-size:.875rem}.suis-button--full-width{width:100%}.suis-button--disabled{opacity:.5}.suis-button__content{display:flex;align-items:center;justify-content:center}.suis-button__content--loading{visibility:hidden}.suis-button suis-spinner{position:absolute}.suis-button:disabled{opacity:.5}.suis-button:hover:not(:disabled){cursor:pointer}.suis-button:hover:disabled{cursor:not-allowed}.suis-button:focus,.suis-button:focus-within{outline:none}.suis-button--primary{background-color:#192a56;border-color:#192a56;color:#fff}.suis-button--primary:hover:not(:disabled){background-color:#192a56d9}.suis-button--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button--secondary{background-color:#273c75;border-color:#273c75;color:#fff}.suis-button--secondary:hover:not(:disabled){background-color:#273c75d9}.suis-button--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button--tertiary{background-color:#dcdde1;border-color:#dcdde1;color:#2f3640}.suis-button--tertiary:hover:not(:disabled){background-color:#dcdde1d9}.suis-button--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button--complementary{background-color:#f5f6fa;border-color:#f5f6fa;color:#2f3640}.suis-button--complementary:hover:not(:disabled){background-color:#f5f6fad9}.suis-button--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button--success{background-color:#2ed573;border-color:#2ed573;color:#fff}.suis-button--success:hover:not(:disabled){background-color:#2ed573d9}.suis-button--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button--warning{background-color:#ffa502;border-color:#ffa502;color:#fff}.suis-button--warning:hover:not(:disabled){background-color:#ffa502d9}.suis-button--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button--danger{background-color:#ff4757;border-color:#ff4757;color:#fff}.suis-button--danger:hover:not(:disabled){background-color:#ff4757d9}.suis-button--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"] }]
|
|
482
420
|
}] });
|
|
483
421
|
|
|
484
422
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
@@ -521,23 +459,23 @@ class SuisDialogComponent {
|
|
|
521
459
|
/**
|
|
522
460
|
* Sets width size of the dialog. Type of SuisSize. By default set to 'md'.
|
|
523
461
|
*/
|
|
524
|
-
this.size = 'md';
|
|
462
|
+
this.size = input('md');
|
|
525
463
|
/**
|
|
526
464
|
* Displays the cancel button in the actions footer of the dialog. By default set to true.
|
|
527
465
|
*/
|
|
528
|
-
this.cancelButton = true;
|
|
466
|
+
this.cancelButton = input(true);
|
|
529
467
|
/**
|
|
530
468
|
* Displays the confirm button in the actions footer of the dialog. By default set to true.
|
|
531
469
|
*/
|
|
532
|
-
this.confirmButton = true;
|
|
470
|
+
this.confirmButton = input(true);
|
|
533
471
|
/**
|
|
534
472
|
* Emits on confirm button clicked.
|
|
535
473
|
*/
|
|
536
|
-
this.confirmed =
|
|
474
|
+
this.confirmed = output();
|
|
537
475
|
/**
|
|
538
476
|
* Emits on cancel button or cross icon clicked.
|
|
539
477
|
*/
|
|
540
|
-
this.cancelled =
|
|
478
|
+
this.cancelled = output();
|
|
541
479
|
}
|
|
542
480
|
onConfirm() {
|
|
543
481
|
this.confirmed.emit();
|
|
@@ -547,22 +485,12 @@ class SuisDialogComponent {
|
|
|
547
485
|
this.suisDialogService.close();
|
|
548
486
|
}
|
|
549
487
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
550
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisDialogComponent, isStandalone: true, selector: "suis-dialog", inputs: { size: "size", cancelButton: "cancelButton", confirmButton: "confirmButton" }, outputs: { confirmed: "confirmed", cancelled: "cancelled" }, ngImport: i0, template: "<div class=\"suis-dialog\" [ngClass]=\"'suis-dialog' | suisNgClass : size\">\n <header class=\"suis-dialog__header\">\n <ng-content select=\"[suisDialogHeader]\"></ng-content>\n <button type=\"button\" (click)=\"onCancel()\">\n <suis-icon type=\"times\" color=\"dark\" size=\"lg\"></suis-icon>\n </button>\n </header>\n <section class=\"suis-dialog__content\">\n <ng-content select=\"[suisDialogContent]\"></ng-content>\n </section>\n <footer class=\"suis-dialog__actions\">\n @if (cancelButton) {\n <suis-button color=\"danger\" (click)=\"onCancel()\"> Cancel </suis-button>\n } @if (confirmButton) {\n <suis-button color=\"success\" (click)=\"onConfirm()\"> Confirm </suis-button>\n }\n </footer>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{z-index:30;position:absolute;inset:0;display:flex;justify-content:center;align-items:center;background-color:#f5f6fad9;-webkit-backdrop-filter:blur(.125rem);backdrop-filter:blur(.125rem)}.suis-dialog{background-color:#fff;border:.0625rem solid #dcdde1;border-radius:.25rem;width:100%;margin:1rem}.suis-dialog__header{padding:1rem;border-bottom:.0625rem solid #dcdde1;display:flex;align-items:center;justify-content:space-between;font-weight:500}.suis-dialog__header button{background-color:transparent;border-radius:.25rem;border:0;margin-left:auto}.suis-dialog__header button:hover{cursor:pointer}.suis-dialog__header button:hover{background-color:#dcdde1}.suis-dialog__content{padding:1rem;border-bottom:.0625rem solid #dcdde1;max-height:calc(100vh - 12rem);overflow-y:auto}.suis-dialog__content::-webkit-scrollbar{width:.5rem}.suis-dialog__content::-webkit-scrollbar-track{background:#f5f6fa}.suis-dialog__content::-webkit-scrollbar-thumb{background:#dcdde1}.suis-dialog__content::-webkit-scrollbar-thumb:hover{background:#bcbcbc}.suis-dialog__actions{padding:1rem;display:flex;justify-content:space-between}.suis-dialog--xs{max-width:20rem}.suis-dialog--sm{max-width:25rem}.suis-dialog--md{max-width:30rem}.suis-dialog--lg{max-width:40rem}.suis-dialog--xl{max-width:50rem}@media (min-width: 992px){.suis-dialog--sm{max-width:30rem}.suis-dialog--md{max-width:40rem}.suis-dialog--lg{max-width:50rem}.suis-dialog--xl{max-width:60rem}}@media (min-width: 1200px){.suis-dialog--lg{max-width:60rem}.suis-dialog--xl{max-width:70rem}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }, { kind: "component", type: SuisButtonComponent, selector: "suis-button" }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
488
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisDialogComponent, isStandalone: true, selector: "suis-dialog", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, cancelButton: { classPropertyName: "cancelButton", publicName: "cancelButton", isSignal: true, isRequired: false, transformFunction: null }, confirmButton: { classPropertyName: "confirmButton", publicName: "confirmButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmed: "confirmed", cancelled: "cancelled" }, ngImport: i0, template: "<div class=\"suis-dialog\" [ngClass]=\"'suis-dialog' | suisNgClass : size()\">\n <header class=\"suis-dialog__header\">\n <ng-content select=\"[suisDialogHeader]\"></ng-content>\n <button type=\"button\" (click)=\"onCancel()\">\n <suis-icon type=\"times\" color=\"dark\" size=\"lg\"></suis-icon>\n </button>\n </header>\n <section class=\"suis-dialog__content\">\n <ng-content select=\"[suisDialogContent]\"></ng-content>\n </section>\n <footer class=\"suis-dialog__actions\">\n @if (cancelButton()) {\n <suis-button color=\"danger\" (click)=\"onCancel()\"> Cancel </suis-button>\n } @if (confirmButton()) {\n <suis-button color=\"success\" (click)=\"onConfirm()\"> Confirm </suis-button>\n }\n </footer>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{z-index:30;position:absolute;inset:0;display:flex;justify-content:center;align-items:center;background-color:#f5f6fad9;-webkit-backdrop-filter:blur(.125rem);backdrop-filter:blur(.125rem)}.suis-dialog{background-color:#fff;border:.0625rem solid #dcdde1;border-radius:.25rem;width:100%;margin:1rem}.suis-dialog__header{padding:1rem;border-bottom:.0625rem solid #dcdde1;display:flex;align-items:center;justify-content:space-between;font-weight:500}.suis-dialog__header button{background-color:transparent;border-radius:.25rem;border:0;margin-left:auto}.suis-dialog__header button:hover{cursor:pointer}.suis-dialog__header button:hover{background-color:#dcdde1}.suis-dialog__content{padding:1rem;border-bottom:.0625rem solid #dcdde1;max-height:calc(100vh - 12rem);overflow-y:auto}.suis-dialog__content::-webkit-scrollbar{width:.5rem}.suis-dialog__content::-webkit-scrollbar-track{background:#f5f6fa}.suis-dialog__content::-webkit-scrollbar-thumb{background:#dcdde1}.suis-dialog__content::-webkit-scrollbar-thumb:hover{background:#bcbcbc}.suis-dialog__actions{padding:1rem;display:flex;justify-content:space-between}.suis-dialog--xs{max-width:20rem}.suis-dialog--sm{max-width:25rem}.suis-dialog--md{max-width:30rem}.suis-dialog--lg{max-width:40rem}.suis-dialog--xl{max-width:50rem}@media (min-width: 992px){.suis-dialog--sm{max-width:30rem}.suis-dialog--md{max-width:40rem}.suis-dialog--lg{max-width:50rem}.suis-dialog--xl{max-width:60rem}}@media (min-width: 1200px){.suis-dialog--lg{max-width:60rem}.suis-dialog--xl{max-width:70rem}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }, { kind: "component", type: SuisButtonComponent, selector: "suis-button" }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
551
489
|
}
|
|
552
490
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisDialogComponent, decorators: [{
|
|
553
491
|
type: Component,
|
|
554
|
-
args: [{ selector: 'suis-dialog', imports: [NgClass, SuisIconComponent, SuisButtonComponent, SuisNgClassPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-dialog\" [ngClass]=\"'suis-dialog' | suisNgClass : size\">\n <header class=\"suis-dialog__header\">\n <ng-content select=\"[suisDialogHeader]\"></ng-content>\n <button type=\"button\" (click)=\"onCancel()\">\n <suis-icon type=\"times\" color=\"dark\" size=\"lg\"></suis-icon>\n </button>\n </header>\n <section class=\"suis-dialog__content\">\n <ng-content select=\"[suisDialogContent]\"></ng-content>\n </section>\n <footer class=\"suis-dialog__actions\">\n @if (cancelButton) {\n <suis-button color=\"danger\" (click)=\"onCancel()\"> Cancel </suis-button>\n } @if (confirmButton) {\n <suis-button color=\"success\" (click)=\"onConfirm()\"> Confirm </suis-button>\n }\n </footer>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{z-index:30;position:absolute;inset:0;display:flex;justify-content:center;align-items:center;background-color:#f5f6fad9;-webkit-backdrop-filter:blur(.125rem);backdrop-filter:blur(.125rem)}.suis-dialog{background-color:#fff;border:.0625rem solid #dcdde1;border-radius:.25rem;width:100%;margin:1rem}.suis-dialog__header{padding:1rem;border-bottom:.0625rem solid #dcdde1;display:flex;align-items:center;justify-content:space-between;font-weight:500}.suis-dialog__header button{background-color:transparent;border-radius:.25rem;border:0;margin-left:auto}.suis-dialog__header button:hover{cursor:pointer}.suis-dialog__header button:hover{background-color:#dcdde1}.suis-dialog__content{padding:1rem;border-bottom:.0625rem solid #dcdde1;max-height:calc(100vh - 12rem);overflow-y:auto}.suis-dialog__content::-webkit-scrollbar{width:.5rem}.suis-dialog__content::-webkit-scrollbar-track{background:#f5f6fa}.suis-dialog__content::-webkit-scrollbar-thumb{background:#dcdde1}.suis-dialog__content::-webkit-scrollbar-thumb:hover{background:#bcbcbc}.suis-dialog__actions{padding:1rem;display:flex;justify-content:space-between}.suis-dialog--xs{max-width:20rem}.suis-dialog--sm{max-width:25rem}.suis-dialog--md{max-width:30rem}.suis-dialog--lg{max-width:40rem}.suis-dialog--xl{max-width:50rem}@media (min-width: 992px){.suis-dialog--sm{max-width:30rem}.suis-dialog--md{max-width:40rem}.suis-dialog--lg{max-width:50rem}.suis-dialog--xl{max-width:60rem}}@media (min-width: 1200px){.suis-dialog--lg{max-width:60rem}.suis-dialog--xl{max-width:70rem}}\n"] }]
|
|
555
|
-
}]
|
|
556
|
-
type: Input
|
|
557
|
-
}], cancelButton: [{
|
|
558
|
-
type: Input
|
|
559
|
-
}], confirmButton: [{
|
|
560
|
-
type: Input
|
|
561
|
-
}], confirmed: [{
|
|
562
|
-
type: Output
|
|
563
|
-
}], cancelled: [{
|
|
564
|
-
type: Output
|
|
565
|
-
}] } });
|
|
492
|
+
args: [{ selector: 'suis-dialog', imports: [NgClass, SuisIconComponent, SuisButtonComponent, SuisNgClassPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-dialog\" [ngClass]=\"'suis-dialog' | suisNgClass : size()\">\n <header class=\"suis-dialog__header\">\n <ng-content select=\"[suisDialogHeader]\"></ng-content>\n <button type=\"button\" (click)=\"onCancel()\">\n <suis-icon type=\"times\" color=\"dark\" size=\"lg\"></suis-icon>\n </button>\n </header>\n <section class=\"suis-dialog__content\">\n <ng-content select=\"[suisDialogContent]\"></ng-content>\n </section>\n <footer class=\"suis-dialog__actions\">\n @if (cancelButton()) {\n <suis-button color=\"danger\" (click)=\"onCancel()\"> Cancel </suis-button>\n } @if (confirmButton()) {\n <suis-button color=\"success\" (click)=\"onConfirm()\"> Confirm </suis-button>\n }\n </footer>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{z-index:30;position:absolute;inset:0;display:flex;justify-content:center;align-items:center;background-color:#f5f6fad9;-webkit-backdrop-filter:blur(.125rem);backdrop-filter:blur(.125rem)}.suis-dialog{background-color:#fff;border:.0625rem solid #dcdde1;border-radius:.25rem;width:100%;margin:1rem}.suis-dialog__header{padding:1rem;border-bottom:.0625rem solid #dcdde1;display:flex;align-items:center;justify-content:space-between;font-weight:500}.suis-dialog__header button{background-color:transparent;border-radius:.25rem;border:0;margin-left:auto}.suis-dialog__header button:hover{cursor:pointer}.suis-dialog__header button:hover{background-color:#dcdde1}.suis-dialog__content{padding:1rem;border-bottom:.0625rem solid #dcdde1;max-height:calc(100vh - 12rem);overflow-y:auto}.suis-dialog__content::-webkit-scrollbar{width:.5rem}.suis-dialog__content::-webkit-scrollbar-track{background:#f5f6fa}.suis-dialog__content::-webkit-scrollbar-thumb{background:#dcdde1}.suis-dialog__content::-webkit-scrollbar-thumb:hover{background:#bcbcbc}.suis-dialog__actions{padding:1rem;display:flex;justify-content:space-between}.suis-dialog--xs{max-width:20rem}.suis-dialog--sm{max-width:25rem}.suis-dialog--md{max-width:30rem}.suis-dialog--lg{max-width:40rem}.suis-dialog--xl{max-width:50rem}@media (min-width: 992px){.suis-dialog--sm{max-width:30rem}.suis-dialog--md{max-width:40rem}.suis-dialog--lg{max-width:50rem}.suis-dialog--xl{max-width:60rem}}@media (min-width: 1200px){.suis-dialog--lg{max-width:60rem}.suis-dialog--xl{max-width:70rem}}\n"] }]
|
|
493
|
+
}] });
|
|
566
494
|
|
|
567
495
|
let UNIQUE_ID = 1;
|
|
568
496
|
class SuisNotificationService {
|
|
@@ -662,28 +590,30 @@ class SuisDividerComponent {
|
|
|
662
590
|
/**
|
|
663
591
|
* Sets the color of the divider. Type of SuisColor. By default set to 'tertiary'.
|
|
664
592
|
*/
|
|
665
|
-
this.color = 'tertiary';
|
|
593
|
+
this.color = input('tertiary');
|
|
666
594
|
}
|
|
667
595
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
668
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
596
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: SuisDividerComponent, isStandalone: true, selector: "suis-divider", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"suis-divider\"\n [ngClass]=\"'suis-divider' | suisNgClass : color()\"\n></div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-divider{border:0;border-bottom-width:.0625rem;border-style:solid}.suis-divider--primary{border-color:#192a56}.suis-divider--secondary{border-color:#273c75}.suis-divider--tertiary{border-color:#dcdde1}.suis-divider--complementary{border-color:#f5f6fa}.suis-divider--success{border-color:#2ed573}.suis-divider--warning{border-color:#ffa502}.suis-divider--danger{border-color:#ff4757}.suis-divider--white{border-color:#fff}.suis-divider--gray{border-color:#bcbcbc}.suis-divider--dark{border-color:#000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
669
597
|
}
|
|
670
598
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisDividerComponent, decorators: [{
|
|
671
599
|
type: Component,
|
|
672
|
-
args: [{ selector: 'suis-divider', imports: [CommonModule, SuisNgClassPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"suis-divider\"\n [ngClass]=\"'suis-divider' | suisNgClass : color\"\n></div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-divider{border:0;border-bottom-width:.0625rem;border-style:solid}.suis-divider--primary{border-color:#192a56}.suis-divider--secondary{border-color:#273c75}.suis-divider--tertiary{border-color:#dcdde1}.suis-divider--complementary{border-color:#f5f6fa}.suis-divider--success{border-color:#2ed573}.suis-divider--warning{border-color:#ffa502}.suis-divider--danger{border-color:#ff4757}.suis-divider--white{border-color:#fff}.suis-divider--gray{border-color:#bcbcbc}.suis-divider--dark{border-color:#000}\n"] }]
|
|
673
|
-
}]
|
|
674
|
-
type: Input
|
|
675
|
-
}] } });
|
|
600
|
+
args: [{ selector: 'suis-divider', imports: [CommonModule, SuisNgClassPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"suis-divider\"\n [ngClass]=\"'suis-divider' | suisNgClass : color()\"\n></div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-divider{border:0;border-bottom-width:.0625rem;border-style:solid}.suis-divider--primary{border-color:#192a56}.suis-divider--secondary{border-color:#273c75}.suis-divider--tertiary{border-color:#dcdde1}.suis-divider--complementary{border-color:#f5f6fa}.suis-divider--success{border-color:#2ed573}.suis-divider--warning{border-color:#ffa502}.suis-divider--danger{border-color:#ff4757}.suis-divider--white{border-color:#fff}.suis-divider--gray{border-color:#bcbcbc}.suis-divider--dark{border-color:#000}\n"] }]
|
|
601
|
+
}] });
|
|
676
602
|
|
|
677
603
|
class SuisFormFieldComponent {
|
|
604
|
+
constructor() {
|
|
605
|
+
/**
|
|
606
|
+
* Template to be added below the field with error message.
|
|
607
|
+
*/
|
|
608
|
+
this.errorTemplate = input();
|
|
609
|
+
}
|
|
678
610
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
679
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", 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 @if (errorTemplate) {\n <div class=\"suis-form-field__error\">\n <ng-container [ngTemplateOutlet]=\"errorTemplate
|
|
611
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisFormFieldComponent, isStandalone: true, selector: "suis-form-field", inputs: { errorTemplate: { classPropertyName: "errorTemplate", publicName: "errorTemplate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"suis-form-field\">\n <ng-content></ng-content>\n @if (errorTemplate()) {\n <div class=\"suis-form-field__error\">\n <ng-container [ngTemplateOutlet]=\"errorTemplate()!\"></ng-container>\n </div>\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-form-field{width:100%}.suis-form-field__error{color:#ff4757;margin-top:.125rem;font-size:.75rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
680
612
|
}
|
|
681
613
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisFormFieldComponent, decorators: [{
|
|
682
614
|
type: Component,
|
|
683
|
-
args: [{ selector: 'suis-form-field', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-form-field\">\n <ng-content></ng-content>\n @if (errorTemplate) {\n <div class=\"suis-form-field__error\">\n <ng-container [ngTemplateOutlet]=\"errorTemplate
|
|
684
|
-
}]
|
|
685
|
-
type: Input
|
|
686
|
-
}] } });
|
|
615
|
+
args: [{ selector: 'suis-form-field', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-form-field\">\n <ng-content></ng-content>\n @if (errorTemplate()) {\n <div class=\"suis-form-field__error\">\n <ng-container [ngTemplateOutlet]=\"errorTemplate()!\"></ng-container>\n </div>\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-form-field{width:100%}.suis-form-field__error{color:#ff4757;margin-top:.125rem;font-size:.75rem}\n"] }]
|
|
616
|
+
}] });
|
|
687
617
|
|
|
688
618
|
class SuisInputBase {
|
|
689
619
|
constructor() {
|
|
@@ -691,23 +621,31 @@ class SuisInputBase {
|
|
|
691
621
|
this.cdRef = inject(ChangeDetectorRef);
|
|
692
622
|
/** @internal */
|
|
693
623
|
this.elRef = inject(ElementRef);
|
|
624
|
+
/**
|
|
625
|
+
* Sets HTML id attribute of the input. By default is undefined.
|
|
626
|
+
*/
|
|
627
|
+
this.id = input();
|
|
628
|
+
/**
|
|
629
|
+
* Sets HTML name attribute of the input. By default is undefined.
|
|
630
|
+
*/
|
|
631
|
+
this.name = input();
|
|
694
632
|
/**
|
|
695
633
|
* Sets input disabled state. By default set to false.
|
|
696
634
|
*/
|
|
697
|
-
this.readonly = false;
|
|
635
|
+
this.readonly = input(false);
|
|
698
636
|
/**
|
|
699
637
|
* Adds invalid styling to the input. By default set to false.
|
|
700
638
|
*/
|
|
701
|
-
this.invalid = false;
|
|
639
|
+
this.invalid = input(false);
|
|
702
640
|
/**
|
|
703
641
|
* Emits on value changed.
|
|
704
642
|
*/
|
|
705
643
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
706
|
-
this.changed =
|
|
644
|
+
this.changed = output();
|
|
707
645
|
/**
|
|
708
646
|
* Emits on input touched.
|
|
709
647
|
*/
|
|
710
|
-
this.touched =
|
|
648
|
+
this.touched = output();
|
|
711
649
|
// eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
|
|
712
650
|
this._onChange = (value) => { };
|
|
713
651
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
@@ -728,23 +666,11 @@ class SuisInputBase {
|
|
|
728
666
|
this.cdRef.markForCheck();
|
|
729
667
|
}
|
|
730
668
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisInputBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
731
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
669
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.7", type: SuisInputBase, isStandalone: true, inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed", touched: "touched" }, ngImport: i0 }); }
|
|
732
670
|
}
|
|
733
671
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisInputBase, decorators: [{
|
|
734
672
|
type: Directive
|
|
735
|
-
}]
|
|
736
|
-
type: Input
|
|
737
|
-
}], name: [{
|
|
738
|
-
type: Input
|
|
739
|
-
}], readonly: [{
|
|
740
|
-
type: Input
|
|
741
|
-
}], invalid: [{
|
|
742
|
-
type: Input
|
|
743
|
-
}], changed: [{
|
|
744
|
-
type: Output
|
|
745
|
-
}], touched: [{
|
|
746
|
-
type: Output
|
|
747
|
-
}] } });
|
|
673
|
+
}] });
|
|
748
674
|
|
|
749
675
|
class SuisInputComponent extends SuisInputBase {
|
|
750
676
|
constructor() {
|
|
@@ -752,15 +678,15 @@ class SuisInputComponent extends SuisInputBase {
|
|
|
752
678
|
/**
|
|
753
679
|
* Sets input's type to one of the accepted values - type of SuisInputType. By default set to 'text'.
|
|
754
680
|
*/
|
|
755
|
-
this.type = 'text';
|
|
681
|
+
this.type = input('text');
|
|
756
682
|
/**
|
|
757
683
|
* Placeholder text displayed in input. By default set to empty string.
|
|
758
684
|
*/
|
|
759
|
-
this.placeholder = '';
|
|
685
|
+
this.placeholder = input('');
|
|
760
686
|
/**
|
|
761
687
|
* Emits on keydown enter input event.
|
|
762
688
|
*/
|
|
763
|
-
this.enterPressed =
|
|
689
|
+
this.enterPressed = output();
|
|
764
690
|
/** @internal */
|
|
765
691
|
this.value = '';
|
|
766
692
|
}
|
|
@@ -781,13 +707,13 @@ class SuisInputComponent extends SuisInputBase {
|
|
|
781
707
|
this.enterPressed.emit();
|
|
782
708
|
}
|
|
783
709
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
784
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
710
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: SuisInputComponent, isStandalone: true, selector: "suis-input", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { enterPressed: "enterPressed" }, providers: [
|
|
785
711
|
{
|
|
786
712
|
provide: NG_VALUE_ACCESSOR,
|
|
787
713
|
multi: true,
|
|
788
714
|
useExisting: forwardRef(() => SuisInputComponent),
|
|
789
715
|
},
|
|
790
|
-
], 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 }); }
|
|
716
|
+
], 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 }); }
|
|
791
717
|
}
|
|
792
718
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisInputComponent, decorators: [{
|
|
793
719
|
type: Component,
|
|
@@ -797,45 +723,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
797
723
|
multi: true,
|
|
798
724
|
useExisting: forwardRef(() => SuisInputComponent),
|
|
799
725
|
},
|
|
800
|
-
], 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"] }]
|
|
801
|
-
}]
|
|
802
|
-
type: Input
|
|
803
|
-
}], placeholder: [{
|
|
804
|
-
type: Input
|
|
805
|
-
}], enterPressed: [{
|
|
806
|
-
type: Output
|
|
807
|
-
}] } });
|
|
726
|
+
], 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"] }]
|
|
727
|
+
}] });
|
|
808
728
|
|
|
809
729
|
class SuisLabelComponent {
|
|
810
730
|
constructor() {
|
|
731
|
+
/**
|
|
732
|
+
* Sets the HTML for attribute of the label. By default is undefined.
|
|
733
|
+
*/
|
|
734
|
+
this.for = input();
|
|
811
735
|
/**
|
|
812
736
|
* Adds a red colored asterisk after the label. By default set to false.
|
|
813
737
|
*/
|
|
814
|
-
this.required = false;
|
|
738
|
+
this.required = input(false);
|
|
815
739
|
/**
|
|
816
740
|
* Shows the pointer cursor when hovered. By default set to false.
|
|
817
741
|
*/
|
|
818
|
-
this.pointer = false;
|
|
742
|
+
this.pointer = input(false);
|
|
819
743
|
/**
|
|
820
744
|
* Grays out the label content and removes cursor pointer behavior. By default set to false.
|
|
821
745
|
*/
|
|
822
|
-
this.readonly = false;
|
|
746
|
+
this.readonly = input(false);
|
|
823
747
|
}
|
|
824
748
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
825
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisLabelComponent, isStandalone: true, selector: "suis-label", inputs: { for: "for", required: "required", pointer: "pointer", readonly: "readonly" }, ngImport: i0, template: "<label\n class=\"suis-label\"\n [class.suis-label--pointer]=\"!readonly && pointer\"\n [class.suis-label--readonly]=\"readonly\"\n [htmlFor]=\"for ? for : undefined\"\n>\n <ng-content></ng-content>\n @if (required) {\n <span class=\"suis-label__asterisk\">*</span>\n }\n <ng-content select=\"[suisLabelAside]\"></ng-content>\n</label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-label{font-size:.875rem;display:flex;align-items:center}.suis-label__asterisk{color:#ff4757;margin-left:.0625rem}.suis-label--pointer{cursor:pointer}.suis-label--readonly{color:#dcdde1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
749
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisLabelComponent, isStandalone: true, selector: "suis-label", inputs: { for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, pointer: { classPropertyName: "pointer", publicName: "pointer", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<label\n class=\"suis-label\"\n [class.suis-label--pointer]=\"!readonly() && pointer()\"\n [class.suis-label--readonly]=\"readonly()\"\n [htmlFor]=\"for() ? for() : undefined\"\n>\n <ng-content></ng-content>\n @if (required()) {\n <span class=\"suis-label__asterisk\">*</span>\n }\n <ng-content select=\"[suisLabelAside]\"></ng-content>\n</label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-label{font-size:.875rem;display:flex;align-items:center}.suis-label__asterisk{color:#ff4757;margin-left:.0625rem}.suis-label--pointer{cursor:pointer}.suis-label--readonly{color:#dcdde1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
826
750
|
}
|
|
827
751
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisLabelComponent, decorators: [{
|
|
828
752
|
type: Component,
|
|
829
|
-
args: [{ selector: 'suis-label', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label\n class=\"suis-label\"\n [class.suis-label--pointer]=\"!readonly && pointer\"\n [class.suis-label--readonly]=\"readonly\"\n [htmlFor]=\"for ? for : undefined\"\n>\n <ng-content></ng-content>\n @if (required) {\n <span class=\"suis-label__asterisk\">*</span>\n }\n <ng-content select=\"[suisLabelAside]\"></ng-content>\n</label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-label{font-size:.875rem;display:flex;align-items:center}.suis-label__asterisk{color:#ff4757;margin-left:.0625rem}.suis-label--pointer{cursor:pointer}.suis-label--readonly{color:#dcdde1}\n"] }]
|
|
830
|
-
}]
|
|
831
|
-
type: Input
|
|
832
|
-
}], required: [{
|
|
833
|
-
type: Input
|
|
834
|
-
}], pointer: [{
|
|
835
|
-
type: Input
|
|
836
|
-
}], readonly: [{
|
|
837
|
-
type: Input
|
|
838
|
-
}] } });
|
|
753
|
+
args: [{ selector: 'suis-label', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label\n class=\"suis-label\"\n [class.suis-label--pointer]=\"!readonly() && pointer()\"\n [class.suis-label--readonly]=\"readonly()\"\n [htmlFor]=\"for() ? for() : undefined\"\n>\n <ng-content></ng-content>\n @if (required()) {\n <span class=\"suis-label__asterisk\">*</span>\n }\n <ng-content select=\"[suisLabelAside]\"></ng-content>\n</label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-label{font-size:.875rem;display:flex;align-items:center}.suis-label__asterisk{color:#ff4757;margin-left:.0625rem}.suis-label--pointer{cursor:pointer}.suis-label--readonly{color:#dcdde1}\n"] }]
|
|
754
|
+
}] });
|
|
839
755
|
|
|
840
756
|
class SuisCheckboxBase extends SuisInputBase {
|
|
841
757
|
constructor() {
|
|
@@ -845,7 +761,7 @@ class SuisCheckboxBase extends SuisInputBase {
|
|
|
845
761
|
/**
|
|
846
762
|
* Adds a red colored asterisk after the label. By default set to false.
|
|
847
763
|
*/
|
|
848
|
-
this.required = false;
|
|
764
|
+
this.required = input(false);
|
|
849
765
|
}
|
|
850
766
|
writeValue(obj) {
|
|
851
767
|
this.value = obj;
|
|
@@ -860,13 +776,11 @@ class SuisCheckboxBase extends SuisInputBase {
|
|
|
860
776
|
this.cdRef.markForCheck();
|
|
861
777
|
}
|
|
862
778
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisCheckboxBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
863
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
779
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.7", type: SuisCheckboxBase, isStandalone: true, inputs: { required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
|
|
864
780
|
}
|
|
865
781
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisCheckboxBase, decorators: [{
|
|
866
782
|
type: Directive
|
|
867
|
-
}]
|
|
868
|
-
type: Input
|
|
869
|
-
}] } });
|
|
783
|
+
}] });
|
|
870
784
|
|
|
871
785
|
class SuisInputCheckboxComponent extends SuisCheckboxBase {
|
|
872
786
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisInputCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
@@ -876,7 +790,7 @@ class SuisInputCheckboxComponent extends SuisCheckboxBase {
|
|
|
876
790
|
multi: true,
|
|
877
791
|
useExisting: forwardRef(() => SuisInputCheckboxComponent),
|
|
878
792
|
},
|
|
879
|
-
], usesInheritance: true, ngImport: i0, template: "<input\n type=\"checkbox\"\n class=\"suis-input-checkbox\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [disabled]=\"readonly\"\n/>\n\n<suis-label\n class=\"suis-input-checkbox__label\"\n [class.suis-input-checkbox__label--invalid]=\"invalid\"\n [class.suis-input-checkbox__label--readonly]=\"readonly\"\n [for]=\"id\"\n [required]=\"required\"\n [pointer]=\"true\"\n [readonly]=\"readonly\"\n (click)=\"onChange($event)\"\n>\n <div\n [tabindex]=\"readonly ? -1 : 0\"\n class=\"suis-input-checkbox__check\"\n [class.suis-input-checkbox__check--invalid]=\"invalid\"\n [class.suis-input-checkbox__check--readonly]=\"readonly\"\n >\n @if (value) {\n <suis-icon\n type=\"check\"\n size=\"lg\"\n [color]=\"readonly ? 'tertiary' : 'primary'\"\n ></suis-icon>\n }\n </div>\n <ng-content></ng-content>\n</suis-label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:flex}.suis-input-checkbox{display:none}.suis-input-checkbox__label--invalid{color:#ff4757}.suis-input-checkbox__label--readonly{cursor:not-allowed}.suis-input-checkbox__check{width:1.25rem;height:1.25rem;border:.0625rem solid #dcdde1;display:flex;justify-content:center;align-items:center;margin-right:.5rem;background-color:#fff;border-radius:.25rem}.suis-input-checkbox__check:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-checkbox__check--readonly{border:.0625rem solid #dcdde1;cursor:not-allowed}.suis-input-checkbox__check--readonly:focus{box-shadow:none}.suis-input-checkbox__check--invalid{border:.0625rem solid #ff4757;color:#ff4757}.suis-input-checkbox__check--invalid:focus{box-shadow:0 2px 5px #ff4757bf}\n"], dependencies: [{ kind: "component", type: SuisLabelComponent, selector: "suis-label", inputs: ["for", "required", "pointer", "readonly"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
793
|
+
], usesInheritance: true, ngImport: i0, template: "<input\n type=\"checkbox\"\n class=\"suis-input-checkbox\"\n [attr.id]=\"id()\"\n [attr.name]=\"name()\"\n [value]=\"value\"\n [disabled]=\"readonly()\"\n/>\n\n<suis-label\n class=\"suis-input-checkbox__label\"\n [class.suis-input-checkbox__label--invalid]=\"invalid()\"\n [class.suis-input-checkbox__label--readonly]=\"readonly()\"\n [for]=\"id()\"\n [required]=\"required()\"\n [pointer]=\"true\"\n [readonly]=\"readonly()\"\n (click)=\"onChange($event)\"\n>\n <div\n [tabindex]=\"readonly() ? -1 : 0\"\n class=\"suis-input-checkbox__check\"\n [class.suis-input-checkbox__check--invalid]=\"invalid()\"\n [class.suis-input-checkbox__check--readonly]=\"readonly()\"\n >\n @if (value) {\n <suis-icon\n type=\"check\"\n size=\"lg\"\n [color]=\"readonly() ? 'tertiary' : 'primary'\"\n ></suis-icon>\n }\n </div>\n <ng-content></ng-content>\n</suis-label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:flex}.suis-input-checkbox{display:none}.suis-input-checkbox__label--invalid{color:#ff4757}.suis-input-checkbox__label--readonly{cursor:not-allowed}.suis-input-checkbox__check{width:1.25rem;height:1.25rem;border:.0625rem solid #dcdde1;display:flex;justify-content:center;align-items:center;margin-right:.5rem;background-color:#fff;border-radius:.25rem}.suis-input-checkbox__check:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-checkbox__check--readonly{border:.0625rem solid #dcdde1;cursor:not-allowed}.suis-input-checkbox__check--readonly:focus{box-shadow:none}.suis-input-checkbox__check--invalid{border:.0625rem solid #ff4757;color:#ff4757}.suis-input-checkbox__check--invalid:focus{box-shadow:0 2px 5px #ff4757bf}\n"], dependencies: [{ kind: "component", type: SuisLabelComponent, selector: "suis-label", inputs: ["for", "required", "pointer", "readonly"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
880
794
|
}
|
|
881
795
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisInputCheckboxComponent, decorators: [{
|
|
882
796
|
type: Component,
|
|
@@ -886,24 +800,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
886
800
|
multi: true,
|
|
887
801
|
useExisting: forwardRef(() => SuisInputCheckboxComponent),
|
|
888
802
|
},
|
|
889
|
-
], template: "<input\n type=\"checkbox\"\n class=\"suis-input-checkbox\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [disabled]=\"readonly\"\n/>\n\n<suis-label\n class=\"suis-input-checkbox__label\"\n [class.suis-input-checkbox__label--invalid]=\"invalid\"\n [class.suis-input-checkbox__label--readonly]=\"readonly\"\n [for]=\"id\"\n [required]=\"required\"\n [pointer]=\"true\"\n [readonly]=\"readonly\"\n (click)=\"onChange($event)\"\n>\n <div\n [tabindex]=\"readonly ? -1 : 0\"\n class=\"suis-input-checkbox__check\"\n [class.suis-input-checkbox__check--invalid]=\"invalid\"\n [class.suis-input-checkbox__check--readonly]=\"readonly\"\n >\n @if (value) {\n <suis-icon\n type=\"check\"\n size=\"lg\"\n [color]=\"readonly ? 'tertiary' : 'primary'\"\n ></suis-icon>\n }\n </div>\n <ng-content></ng-content>\n</suis-label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:flex}.suis-input-checkbox{display:none}.suis-input-checkbox__label--invalid{color:#ff4757}.suis-input-checkbox__label--readonly{cursor:not-allowed}.suis-input-checkbox__check{width:1.25rem;height:1.25rem;border:.0625rem solid #dcdde1;display:flex;justify-content:center;align-items:center;margin-right:.5rem;background-color:#fff;border-radius:.25rem}.suis-input-checkbox__check:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-checkbox__check--readonly{border:.0625rem solid #dcdde1;cursor:not-allowed}.suis-input-checkbox__check--readonly:focus{box-shadow:none}.suis-input-checkbox__check--invalid{border:.0625rem solid #ff4757;color:#ff4757}.suis-input-checkbox__check--invalid:focus{box-shadow:0 2px 5px #ff4757bf}\n"] }]
|
|
803
|
+
], template: "<input\n type=\"checkbox\"\n class=\"suis-input-checkbox\"\n [attr.id]=\"id()\"\n [attr.name]=\"name()\"\n [value]=\"value\"\n [disabled]=\"readonly()\"\n/>\n\n<suis-label\n class=\"suis-input-checkbox__label\"\n [class.suis-input-checkbox__label--invalid]=\"invalid()\"\n [class.suis-input-checkbox__label--readonly]=\"readonly()\"\n [for]=\"id()\"\n [required]=\"required()\"\n [pointer]=\"true\"\n [readonly]=\"readonly()\"\n (click)=\"onChange($event)\"\n>\n <div\n [tabindex]=\"readonly() ? -1 : 0\"\n class=\"suis-input-checkbox__check\"\n [class.suis-input-checkbox__check--invalid]=\"invalid()\"\n [class.suis-input-checkbox__check--readonly]=\"readonly()\"\n >\n @if (value) {\n <suis-icon\n type=\"check\"\n size=\"lg\"\n [color]=\"readonly() ? 'tertiary' : 'primary'\"\n ></suis-icon>\n }\n </div>\n <ng-content></ng-content>\n</suis-label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:flex}.suis-input-checkbox{display:none}.suis-input-checkbox__label--invalid{color:#ff4757}.suis-input-checkbox__label--readonly{cursor:not-allowed}.suis-input-checkbox__check{width:1.25rem;height:1.25rem;border:.0625rem solid #dcdde1;display:flex;justify-content:center;align-items:center;margin-right:.5rem;background-color:#fff;border-radius:.25rem}.suis-input-checkbox__check:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-checkbox__check--readonly{border:.0625rem solid #dcdde1;cursor:not-allowed}.suis-input-checkbox__check--readonly:focus{box-shadow:none}.suis-input-checkbox__check--invalid{border:.0625rem solid #ff4757;color:#ff4757}.suis-input-checkbox__check--invalid:focus{box-shadow:0 2px 5px #ff4757bf}\n"] }]
|
|
890
804
|
}] });
|
|
891
805
|
|
|
892
806
|
class SuisInputChipsComponent extends SuisInputBase {
|
|
893
807
|
constructor() {
|
|
894
808
|
super(...arguments);
|
|
809
|
+
/** @internal */
|
|
810
|
+
this.inputEl = viewChild('input');
|
|
895
811
|
/**
|
|
896
812
|
* Placeholder text displayed in input. By default set to empty string.
|
|
897
813
|
*/
|
|
898
|
-
this.placeholder = '';
|
|
814
|
+
this.placeholder = input('');
|
|
899
815
|
/**
|
|
900
816
|
* Sets the color pallette of the chips. Type of SuisColor. By default set to 'primary'.
|
|
901
817
|
*/
|
|
902
|
-
this.chipColor = 'primary';
|
|
818
|
+
this.chipColor = input('primary');
|
|
903
819
|
/**
|
|
904
820
|
* Sets the color of the chips' cross icon. Type of SuisColor. By default set to 'white'.
|
|
905
821
|
*/
|
|
906
|
-
this.chipIconColor = 'white';
|
|
822
|
+
this.chipIconColor = input('white');
|
|
907
823
|
/** @internal */
|
|
908
824
|
this.value = [];
|
|
909
825
|
/** @internal */
|
|
@@ -931,17 +847,17 @@ class SuisInputChipsComponent extends SuisInputBase {
|
|
|
931
847
|
this.addItem(inputValue);
|
|
932
848
|
}
|
|
933
849
|
onDocumentClick(event) {
|
|
934
|
-
if (!this.inputEl?.nativeElement.contains(event.target))
|
|
850
|
+
if (!this.inputEl()?.nativeElement.contains(event.target))
|
|
935
851
|
this.submitValue();
|
|
936
852
|
}
|
|
937
853
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisInputChipsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
938
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisInputChipsComponent, isStandalone: true, selector: "suis-input-chips", inputs: { placeholder: "placeholder", chipColor: "chipColor", chipIconColor: "chipIconColor" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
|
|
854
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisInputChipsComponent, isStandalone: true, selector: "suis-input-chips", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, chipColor: { classPropertyName: "chipColor", publicName: "chipColor", isSignal: true, isRequired: false, transformFunction: null }, chipIconColor: { classPropertyName: "chipIconColor", publicName: "chipIconColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
|
|
939
855
|
{
|
|
940
856
|
provide: NG_VALUE_ACCESSOR,
|
|
941
857
|
multi: true,
|
|
942
858
|
useExisting: forwardRef(() => SuisInputChipsComponent),
|
|
943
859
|
},
|
|
944
|
-
], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-input-chips\">\n @if (!readonly) {\n <div #input class=\"suis-input-chips__input\">\n <suis-input\n [id]=\"id\"\n [name]=\"name\"\n [formControl]=\"inputControl\"\n [readonly]=\"readonly\"\n [invalid]=\"invalid\"\n [placeholder]=\"placeholder\"\n (touched)=\"onTouch()\"\n (enterPressed)=\"submitValue()\"\n ></suis-input>\n </div>\n } @if (value.length) {\n <div class=\"suis-input-chips__chips\">\n @for (item of value; track item) {\n <suis-chip\n [removable]=\"readonly ? false : true\"\n [color]=\"chipColor\"\n [iconColor]=\"chipIconColor\"\n (remove)=\"removeItem(item)\"\n >\n {{ item }}\n </suis-chip>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.suis-input-chips__chips{margin-top:.375rem;display:flex;flex-wrap:wrap}.suis-input-chips__chips suis-chip:not(:last-child){margin-right:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SuisChipComponent, selector: "suis-chip", inputs: ["color", "iconColor", "removable"], outputs: ["remove"] }, { kind: "component", type: SuisInputComponent, selector: "suis-input", inputs: ["type", "placeholder"], outputs: ["enterPressed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
860
|
+
], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["input"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-input-chips\">\n @if (!readonly()) {\n <div #input class=\"suis-input-chips__input\">\n <suis-input\n [id]=\"id()\"\n [name]=\"name()\"\n [formControl]=\"inputControl\"\n [readonly]=\"readonly()\"\n [invalid]=\"invalid()\"\n [placeholder]=\"placeholder()\"\n (touched)=\"onTouch()\"\n (enterPressed)=\"submitValue()\"\n ></suis-input>\n </div>\n } @if (value.length) {\n <div class=\"suis-input-chips__chips\">\n @for (item of value; track item) {\n <suis-chip\n [removable]=\"readonly() ? false : true\"\n [color]=\"chipColor()\"\n [iconColor]=\"chipIconColor()\"\n (remove)=\"removeItem(item)\"\n >\n {{ item }}\n </suis-chip>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.suis-input-chips__chips{margin-top:.375rem;display:flex;flex-wrap:wrap}.suis-input-chips__chips suis-chip:not(:last-child){margin-right:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SuisChipComponent, selector: "suis-chip", inputs: ["color", "iconColor", "removable"], outputs: ["remove"] }, { kind: "component", type: SuisInputComponent, selector: "suis-input", inputs: ["type", "placeholder"], outputs: ["enterPressed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
945
861
|
}
|
|
946
862
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisInputChipsComponent, decorators: [{
|
|
947
863
|
type: Component,
|
|
@@ -951,17 +867,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
951
867
|
multi: true,
|
|
952
868
|
useExisting: forwardRef(() => SuisInputChipsComponent),
|
|
953
869
|
},
|
|
954
|
-
], template: "<div class=\"suis-input-chips\">\n @if (!readonly) {\n <div #input class=\"suis-input-chips__input\">\n <suis-input\n [id]=\"id\"\n [name]=\"name\"\n [formControl]=\"inputControl\"\n [readonly]=\"readonly\"\n [invalid]=\"invalid\"\n [placeholder]=\"placeholder\"\n (touched)=\"onTouch()\"\n (enterPressed)=\"submitValue()\"\n ></suis-input>\n </div>\n } @if (value.length) {\n <div class=\"suis-input-chips__chips\">\n @for (item of value; track item) {\n <suis-chip\n [removable]=\"readonly ? false : true\"\n [color]=\"chipColor\"\n [iconColor]=\"chipIconColor\"\n (remove)=\"removeItem(item)\"\n >\n {{ item }}\n </suis-chip>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.suis-input-chips__chips{margin-top:.375rem;display:flex;flex-wrap:wrap}.suis-input-chips__chips suis-chip:not(:last-child){margin-right:.25rem}\n"] }]
|
|
955
|
-
}], propDecorators: {
|
|
956
|
-
type: ViewChild,
|
|
957
|
-
args: ['input']
|
|
958
|
-
}], placeholder: [{
|
|
959
|
-
type: Input
|
|
960
|
-
}], chipColor: [{
|
|
961
|
-
type: Input
|
|
962
|
-
}], chipIconColor: [{
|
|
963
|
-
type: Input
|
|
964
|
-
}], onDocumentClick: [{
|
|
870
|
+
], template: "<div class=\"suis-input-chips\">\n @if (!readonly()) {\n <div #input class=\"suis-input-chips__input\">\n <suis-input\n [id]=\"id()\"\n [name]=\"name()\"\n [formControl]=\"inputControl\"\n [readonly]=\"readonly()\"\n [invalid]=\"invalid()\"\n [placeholder]=\"placeholder()\"\n (touched)=\"onTouch()\"\n (enterPressed)=\"submitValue()\"\n ></suis-input>\n </div>\n } @if (value.length) {\n <div class=\"suis-input-chips__chips\">\n @for (item of value; track item) {\n <suis-chip\n [removable]=\"readonly() ? false : true\"\n [color]=\"chipColor()\"\n [iconColor]=\"chipIconColor()\"\n (remove)=\"removeItem(item)\"\n >\n {{ item }}\n </suis-chip>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.suis-input-chips__chips{margin-top:.375rem;display:flex;flex-wrap:wrap}.suis-input-chips__chips suis-chip:not(:last-child){margin-right:.25rem}\n"] }]
|
|
871
|
+
}], propDecorators: { onDocumentClick: [{
|
|
965
872
|
type: HostListener,
|
|
966
873
|
args: ['document:click', ['$event']]
|
|
967
874
|
}] } });
|
|
@@ -969,10 +876,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
969
876
|
class SuisInputImageComponent extends SuisInputBase {
|
|
970
877
|
constructor() {
|
|
971
878
|
super(...arguments);
|
|
879
|
+
/** @internal */
|
|
880
|
+
this.fileInput = viewChild('input');
|
|
972
881
|
/**
|
|
973
882
|
* Emits value on FileList upload.
|
|
974
883
|
*/
|
|
975
|
-
this.uploaded =
|
|
884
|
+
this.uploaded = output();
|
|
976
885
|
/** @internal */
|
|
977
886
|
this.value = null;
|
|
978
887
|
/** @internal */
|
|
@@ -992,7 +901,7 @@ class SuisInputImageComponent extends SuisInputBase {
|
|
|
992
901
|
onRemove() {
|
|
993
902
|
this.imageUrl = null;
|
|
994
903
|
this.value = null;
|
|
995
|
-
(this.fileInput?.nativeElement).value = '';
|
|
904
|
+
(this.fileInput()?.nativeElement).value = '';
|
|
996
905
|
this._onChange(this.value);
|
|
997
906
|
this.changed.emit(this.value);
|
|
998
907
|
this.cdRef.markForCheck();
|
|
@@ -1004,7 +913,7 @@ class SuisInputImageComponent extends SuisInputBase {
|
|
|
1004
913
|
multi: true,
|
|
1005
914
|
useExisting: forwardRef(() => SuisInputImageComponent),
|
|
1006
915
|
},
|
|
1007
|
-
], 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 @if (imageUrl) {\n <figure 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 }\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}.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: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
916
|
+
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["input"], descendants: true, isSignal: 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 @if (imageUrl) {\n <figure 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 }\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}.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: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1008
917
|
}
|
|
1009
918
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisInputImageComponent, decorators: [{
|
|
1010
919
|
type: Component,
|
|
@@ -1014,13 +923,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
1014
923
|
multi: true,
|
|
1015
924
|
useExisting: forwardRef(() => SuisInputImageComponent),
|
|
1016
925
|
},
|
|
1017
|
-
], template: "<div\n class=\"suis-input-image\"\n [class.suis-input-image--invalid]=\"invalid\"\n [class.suis-input-image--readonly]=\"readonly\"\n>\n @if (imageUrl) {\n <figure 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 }\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}.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"] }]
|
|
1018
|
-
}]
|
|
1019
|
-
type: ViewChild,
|
|
1020
|
-
args: ['input']
|
|
1021
|
-
}], uploaded: [{
|
|
1022
|
-
type: Output
|
|
1023
|
-
}] } });
|
|
926
|
+
], template: "<div\n class=\"suis-input-image\"\n [class.suis-input-image--invalid]=\"invalid()\"\n [class.suis-input-image--readonly]=\"readonly()\"\n>\n @if (imageUrl) {\n <figure 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 }\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}.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"] }]
|
|
927
|
+
}] });
|
|
1024
928
|
|
|
1025
929
|
class SuisInputNumberComponent extends SuisInputBase {
|
|
1026
930
|
constructor() {
|
|
@@ -1028,7 +932,7 @@ class SuisInputNumberComponent extends SuisInputBase {
|
|
|
1028
932
|
/**
|
|
1029
933
|
* Placeholder text displayed in input. By default set to empty string.
|
|
1030
934
|
*/
|
|
1031
|
-
this.placeholder = '';
|
|
935
|
+
this.placeholder = input('');
|
|
1032
936
|
/** @internal */
|
|
1033
937
|
this.value = null;
|
|
1034
938
|
}
|
|
@@ -1046,13 +950,13 @@ class SuisInputNumberComponent extends SuisInputBase {
|
|
|
1046
950
|
this.cdRef.markForCheck();
|
|
1047
951
|
}
|
|
1048
952
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisInputNumberComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1049
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
953
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: SuisInputNumberComponent, isStandalone: true, selector: "suis-input-number", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
1050
954
|
{
|
|
1051
955
|
provide: NG_VALUE_ACCESSOR,
|
|
1052
956
|
multi: true,
|
|
1053
957
|
useExisting: forwardRef(() => SuisInputNumberComponent),
|
|
1054
958
|
},
|
|
1055
|
-
], 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 }); }
|
|
959
|
+
], 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 }); }
|
|
1056
960
|
}
|
|
1057
961
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisInputNumberComponent, decorators: [{
|
|
1058
962
|
type: Component,
|
|
@@ -1062,39 +966,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
1062
966
|
multi: true,
|
|
1063
967
|
useExisting: forwardRef(() => SuisInputNumberComponent),
|
|
1064
968
|
},
|
|
1065
|
-
], 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"] }]
|
|
1066
|
-
}]
|
|
1067
|
-
type: Input
|
|
1068
|
-
}] } });
|
|
969
|
+
], 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"] }]
|
|
970
|
+
}] });
|
|
1069
971
|
|
|
1070
972
|
class SuisInputRadioComponent extends RadioControlValueAccessor {
|
|
1071
973
|
constructor() {
|
|
1072
974
|
super(...arguments);
|
|
975
|
+
/** @internal */
|
|
976
|
+
this.radioInput = viewChild('input');
|
|
977
|
+
/**
|
|
978
|
+
* Sets HTML id attribute of the input. By default is undefined.
|
|
979
|
+
*/
|
|
980
|
+
this.id = input.required();
|
|
1073
981
|
/**
|
|
1074
982
|
* Sets input disabled state. By default set to false.
|
|
1075
983
|
*/
|
|
1076
|
-
this.readonly = false;
|
|
984
|
+
this.readonly = input(false);
|
|
1077
985
|
/**
|
|
1078
986
|
* Adds invalid styling to the input. By default set to false.
|
|
1079
987
|
*/
|
|
1080
|
-
this.invalid = false;
|
|
988
|
+
this.invalid = input(false);
|
|
1081
989
|
/**
|
|
1082
990
|
* Sets input checked state to true. By default set to false.
|
|
1083
991
|
*/
|
|
1084
|
-
this.default = false;
|
|
992
|
+
this.default = input(false);
|
|
1085
993
|
}
|
|
1086
994
|
ngAfterViewInit() {
|
|
1087
|
-
if (this.default)
|
|
1088
|
-
(this.radioInput?.nativeElement).checked = true;
|
|
995
|
+
if (this.default())
|
|
996
|
+
(this.radioInput()?.nativeElement).checked = true;
|
|
1089
997
|
}
|
|
1090
998
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisInputRadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1091
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
999
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.7", type: SuisInputRadioComponent, isStandalone: true, selector: "suis-input-radio", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, default: { classPropertyName: "default", publicName: "default", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
1092
1000
|
{
|
|
1093
1001
|
provide: NG_VALUE_ACCESSOR,
|
|
1094
1002
|
multi: true,
|
|
1095
1003
|
useExisting: forwardRef(() => SuisInputRadioComponent),
|
|
1096
1004
|
},
|
|
1097
|
-
], viewQueries: [{ propertyName: "radioInput", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<input\n #input\n type=\"radio\"\n class=\"suis-input-radio\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [disabled]=\"readonly\"\n/>\n\n<suis-label\n class=\"suis-input-radio__label\"\n [class.suis-input-radio__label--invalid]=\"invalid\"\n [class.suis-input-radio__label--readonly]=\"readonly\"\n [for]=\"id\"\n [pointer]=\"true\"\n [readonly]=\"readonly\"\n>\n <div\n [tabindex]=\"readonly ? -1 : 0\"\n class=\"suis-input-radio__circle\"\n [class.suis-input-radio__circle--invalid]=\"invalid\"\n [class.suis-input-radio__circle--readonly]=\"readonly\"\n >\n <div class=\"suis-input-radio__circle__fill\"></div>\n </div>\n <ng-content></ng-content>\n</suis-label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:flex}.suis-input-radio{display:none}.suis-input-radio:checked~suis-label ::ng-deep .suis-input-radio__circle{border:.0625rem solid #192a56}.suis-input-radio:checked~suis-label ::ng-deep .suis-input-radio__circle__fill{border-radius:100%;height:.75rem;width:.75rem;background-color:#273c75}.suis-input-radio:checked~suis-label ::ng-deep .suis-input-radio__circle--readonly{border:.0625rem solid #dcdde1}.suis-input-radio:checked~suis-label ::ng-deep .suis-input-radio__circle--readonly .suis-input-radio__circle__fill{background-color:#dcdde1}.suis-input-radio__label--invalid{color:#ff4757}.suis-input-radio__label--readonly{cursor:not-allowed}.suis-input-radio__circle{margin-right:.5rem;border:.0625rem solid #dcdde1;border-radius:100%;height:1.25rem;width:1.25rem;display:flex;justify-content:center;align-items:center}.suis-input-radio__circle:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-radio__circle--readonly{border:.0625rem solid #dcdde1;cursor:not-allowed}.suis-input-radio__circle--readonly:focus{box-shadow:none}.suis-input-radio__circle--invalid{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}\n"], dependencies: [{ kind: "component", type: SuisLabelComponent, selector: "suis-label", inputs: ["for", "required", "pointer", "readonly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1005
|
+
], viewQueries: [{ propertyName: "radioInput", first: true, predicate: ["input"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<input\n #input\n type=\"radio\"\n class=\"suis-input-radio\"\n [attr.id]=\"id()\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [disabled]=\"readonly()\"\n/>\n\n<suis-label\n class=\"suis-input-radio__label\"\n [class.suis-input-radio__label--invalid]=\"invalid()\"\n [class.suis-input-radio__label--readonly]=\"readonly()\"\n [for]=\"id()\"\n [pointer]=\"true\"\n [readonly]=\"readonly()\"\n>\n <div\n [tabindex]=\"readonly() ? -1 : 0\"\n class=\"suis-input-radio__circle\"\n [class.suis-input-radio__circle--invalid]=\"invalid()\"\n [class.suis-input-radio__circle--readonly]=\"readonly()\"\n >\n <div class=\"suis-input-radio__circle__fill\"></div>\n </div>\n <ng-content></ng-content>\n</suis-label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:flex}.suis-input-radio{display:none}.suis-input-radio:checked~suis-label ::ng-deep .suis-input-radio__circle{border:.0625rem solid #192a56}.suis-input-radio:checked~suis-label ::ng-deep .suis-input-radio__circle__fill{border-radius:100%;height:.75rem;width:.75rem;background-color:#273c75}.suis-input-radio:checked~suis-label ::ng-deep .suis-input-radio__circle--readonly{border:.0625rem solid #dcdde1}.suis-input-radio:checked~suis-label ::ng-deep .suis-input-radio__circle--readonly .suis-input-radio__circle__fill{background-color:#dcdde1}.suis-input-radio__label--invalid{color:#ff4757}.suis-input-radio__label--readonly{cursor:not-allowed}.suis-input-radio__circle{margin-right:.5rem;border:.0625rem solid #dcdde1;border-radius:100%;height:1.25rem;width:1.25rem;display:flex;justify-content:center;align-items:center}.suis-input-radio__circle:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-radio__circle--readonly{border:.0625rem solid #dcdde1;cursor:not-allowed}.suis-input-radio__circle--readonly:focus{box-shadow:none}.suis-input-radio__circle--invalid{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}\n"], dependencies: [{ kind: "component", type: SuisLabelComponent, selector: "suis-label", inputs: ["for", "required", "pointer", "readonly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1098
1006
|
}
|
|
1099
1007
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisInputRadioComponent, decorators: [{
|
|
1100
1008
|
type: Component,
|
|
@@ -1104,77 +1012,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
1104
1012
|
multi: true,
|
|
1105
1013
|
useExisting: forwardRef(() => SuisInputRadioComponent),
|
|
1106
1014
|
},
|
|
1107
|
-
], template: "<input\n #input\n type=\"radio\"\n class=\"suis-input-radio\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [disabled]=\"readonly\"\n/>\n\n<suis-label\n class=\"suis-input-radio__label\"\n [class.suis-input-radio__label--invalid]=\"invalid\"\n [class.suis-input-radio__label--readonly]=\"readonly\"\n [for]=\"id\"\n [pointer]=\"true\"\n [readonly]=\"readonly\"\n>\n <div\n [tabindex]=\"readonly ? -1 : 0\"\n class=\"suis-input-radio__circle\"\n [class.suis-input-radio__circle--invalid]=\"invalid\"\n [class.suis-input-radio__circle--readonly]=\"readonly\"\n >\n <div class=\"suis-input-radio__circle__fill\"></div>\n </div>\n <ng-content></ng-content>\n</suis-label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:flex}.suis-input-radio{display:none}.suis-input-radio:checked~suis-label ::ng-deep .suis-input-radio__circle{border:.0625rem solid #192a56}.suis-input-radio:checked~suis-label ::ng-deep .suis-input-radio__circle__fill{border-radius:100%;height:.75rem;width:.75rem;background-color:#273c75}.suis-input-radio:checked~suis-label ::ng-deep .suis-input-radio__circle--readonly{border:.0625rem solid #dcdde1}.suis-input-radio:checked~suis-label ::ng-deep .suis-input-radio__circle--readonly .suis-input-radio__circle__fill{background-color:#dcdde1}.suis-input-radio__label--invalid{color:#ff4757}.suis-input-radio__label--readonly{cursor:not-allowed}.suis-input-radio__circle{margin-right:.5rem;border:.0625rem solid #dcdde1;border-radius:100%;height:1.25rem;width:1.25rem;display:flex;justify-content:center;align-items:center}.suis-input-radio__circle:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-radio__circle--readonly{border:.0625rem solid #dcdde1;cursor:not-allowed}.suis-input-radio__circle--readonly:focus{box-shadow:none}.suis-input-radio__circle--invalid{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}\n"] }]
|
|
1108
|
-
}]
|
|
1109
|
-
type: ViewChild,
|
|
1110
|
-
args: ['input']
|
|
1111
|
-
}], id: [{
|
|
1112
|
-
type: Input,
|
|
1113
|
-
args: [{ required: true }]
|
|
1114
|
-
}], readonly: [{
|
|
1115
|
-
type: Input
|
|
1116
|
-
}], invalid: [{
|
|
1117
|
-
type: Input
|
|
1118
|
-
}], default: [{
|
|
1119
|
-
type: Input
|
|
1120
|
-
}] } });
|
|
1015
|
+
], template: "<input\n #input\n type=\"radio\"\n class=\"suis-input-radio\"\n [attr.id]=\"id()\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [disabled]=\"readonly()\"\n/>\n\n<suis-label\n class=\"suis-input-radio__label\"\n [class.suis-input-radio__label--invalid]=\"invalid()\"\n [class.suis-input-radio__label--readonly]=\"readonly()\"\n [for]=\"id()\"\n [pointer]=\"true\"\n [readonly]=\"readonly()\"\n>\n <div\n [tabindex]=\"readonly() ? -1 : 0\"\n class=\"suis-input-radio__circle\"\n [class.suis-input-radio__circle--invalid]=\"invalid()\"\n [class.suis-input-radio__circle--readonly]=\"readonly()\"\n >\n <div class=\"suis-input-radio__circle__fill\"></div>\n </div>\n <ng-content></ng-content>\n</suis-label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:flex}.suis-input-radio{display:none}.suis-input-radio:checked~suis-label ::ng-deep .suis-input-radio__circle{border:.0625rem solid #192a56}.suis-input-radio:checked~suis-label ::ng-deep .suis-input-radio__circle__fill{border-radius:100%;height:.75rem;width:.75rem;background-color:#273c75}.suis-input-radio:checked~suis-label ::ng-deep .suis-input-radio__circle--readonly{border:.0625rem solid #dcdde1}.suis-input-radio:checked~suis-label ::ng-deep .suis-input-radio__circle--readonly .suis-input-radio__circle__fill{background-color:#dcdde1}.suis-input-radio__label--invalid{color:#ff4757}.suis-input-radio__label--readonly{cursor:not-allowed}.suis-input-radio__circle{margin-right:.5rem;border:.0625rem solid #dcdde1;border-radius:100%;height:1.25rem;width:1.25rem;display:flex;justify-content:center;align-items:center}.suis-input-radio__circle:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-radio__circle--readonly{border:.0625rem solid #dcdde1;cursor:not-allowed}.suis-input-radio__circle--readonly:focus{box-shadow:none}.suis-input-radio__circle--invalid{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}\n"] }]
|
|
1016
|
+
}] });
|
|
1121
1017
|
|
|
1122
1018
|
class SuisItemComponent {
|
|
1123
1019
|
constructor() {
|
|
1124
1020
|
/**
|
|
1125
1021
|
* Adds a padding around the content. By default set to true.
|
|
1126
1022
|
*/
|
|
1127
|
-
this.spacing = true;
|
|
1023
|
+
this.spacing = input(true);
|
|
1128
1024
|
/**
|
|
1129
1025
|
* Styles item as a header. By default set to false.
|
|
1130
1026
|
*/
|
|
1131
|
-
this.header = false;
|
|
1027
|
+
this.header = input(false);
|
|
1132
1028
|
/**
|
|
1133
1029
|
* Displays border bottom below the item. Does not effect header item. By default set to true.
|
|
1134
1030
|
*/
|
|
1135
|
-
this.divider = true;
|
|
1031
|
+
this.divider = input(true);
|
|
1136
1032
|
}
|
|
1137
1033
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1138
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1034
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: SuisItemComponent, isStandalone: true, selector: "suis-item", inputs: { spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"suis-item\"\n [class.suis-item--spacing]=\"spacing()\"\n [class.suis-item--header]=\"header()\"\n [class.suis-item--divider]=\"divider() && !header()\"\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-item{background-color:#fff;border:0}.suis-item--spacing{padding:1rem}.suis-item--divider{border-bottom:.0625rem solid #dcdde1}.suis-item--header{font-weight:500;display:flex;color:#192a56;justify-content:center;align-items:center;border-bottom:.1875rem solid #192a56}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1139
1035
|
}
|
|
1140
1036
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisItemComponent, decorators: [{
|
|
1141
1037
|
type: Component,
|
|
1142
|
-
args: [{ selector: 'suis-item', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"suis-item\"\n [class.suis-item--spacing]=\"spacing\"\n [class.suis-item--header]=\"header\"\n [class.suis-item--divider]=\"divider && !header\"\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-item{background-color:#fff;border:0}.suis-item--spacing{padding:1rem}.suis-item--divider{border-bottom:.0625rem solid #dcdde1}.suis-item--header{font-weight:500;display:flex;color:#192a56;justify-content:center;align-items:center;border-bottom:.1875rem solid #192a56}\n"] }]
|
|
1143
|
-
}]
|
|
1144
|
-
type: Input
|
|
1145
|
-
}], header: [{
|
|
1146
|
-
type: Input
|
|
1147
|
-
}], divider: [{
|
|
1148
|
-
type: Input
|
|
1149
|
-
}] } });
|
|
1038
|
+
args: [{ selector: 'suis-item', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"suis-item\"\n [class.suis-item--spacing]=\"spacing()\"\n [class.suis-item--header]=\"header()\"\n [class.suis-item--divider]=\"divider() && !header()\"\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-item{background-color:#fff;border:0}.suis-item--spacing{padding:1rem}.suis-item--divider{border-bottom:.0625rem solid #dcdde1}.suis-item--header{font-weight:500;display:flex;color:#192a56;justify-content:center;align-items:center;border-bottom:.1875rem solid #192a56}\n"] }]
|
|
1039
|
+
}] });
|
|
1150
1040
|
|
|
1151
1041
|
class SuisNotificationComponent {
|
|
1152
1042
|
constructor() {
|
|
1153
1043
|
/**
|
|
1154
1044
|
* Notification item data. Type of SuisNotification.
|
|
1155
1045
|
*/
|
|
1156
|
-
this.notification =
|
|
1046
|
+
this.notification = input.required();
|
|
1157
1047
|
/**
|
|
1158
1048
|
* Emits on close button action.
|
|
1159
1049
|
*/
|
|
1160
|
-
this.closed =
|
|
1050
|
+
this.closed = output();
|
|
1161
1051
|
}
|
|
1162
1052
|
onClose() {
|
|
1163
|
-
this.notification = null;
|
|
1164
1053
|
this.closed.emit();
|
|
1165
1054
|
}
|
|
1166
1055
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1167
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisNotificationComponent, isStandalone: true, selector: "suis-notification", inputs: { notification: "notification" }, outputs: { closed: "closed" }, ngImport: i0, template: "@if (notification) {\n<div\n class=\"suis-notification\"\n [ngClass]=\"'suis-notification' | suisNgClass : notification
|
|
1056
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisNotificationComponent, isStandalone: true, selector: "suis-notification", inputs: { notification: { classPropertyName: "notification", publicName: "notification", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: "@if (notification()) {\n<div\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=\"times\" [color]=\"'white'\" [size]=\"'lg'\"></suis-icon>\n </button>\n </div>\n <div class=\"suis-notification__message\">\n {{ notification()!.message }}\n </div>\n</div>\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-notification{min-width:16.25rem;max-width:16.25rem;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;align-items:center;justify-content:space-between;font-size:1rem;font-weight:700;margin-bottom:.75rem}.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: 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 }); }
|
|
1168
1057
|
}
|
|
1169
1058
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisNotificationComponent, decorators: [{
|
|
1170
1059
|
type: Component,
|
|
1171
|
-
args: [{ selector: 'suis-notification', imports: [NgClass, SuisNgClassPipe, SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (notification) {\n<div\n class=\"suis-notification\"\n [ngClass]=\"'suis-notification' | suisNgClass : notification
|
|
1172
|
-
}]
|
|
1173
|
-
type: Input,
|
|
1174
|
-
args: [{ required: true }]
|
|
1175
|
-
}], closed: [{
|
|
1176
|
-
type: Output
|
|
1177
|
-
}] } });
|
|
1060
|
+
args: [{ selector: 'suis-notification', imports: [NgClass, SuisNgClassPipe, SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (notification()) {\n<div\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=\"times\" [color]=\"'white'\" [size]=\"'lg'\"></suis-icon>\n </button>\n </div>\n <div class=\"suis-notification__message\">\n {{ notification()!.message }}\n </div>\n</div>\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-notification{min-width:16.25rem;max-width:16.25rem;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;align-items:center;justify-content:space-between;font-size:1rem;font-weight:700;margin-bottom:.75rem}.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"] }]
|
|
1061
|
+
}] });
|
|
1178
1062
|
|
|
1179
1063
|
class SuisNotificationsComponent {
|
|
1180
1064
|
constructor() {
|
|
@@ -1272,53 +1156,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
1272
1156
|
|
|
1273
1157
|
class SuisSelectOptionComponent {
|
|
1274
1158
|
constructor() {
|
|
1159
|
+
/**
|
|
1160
|
+
* Option data. Type of SuisSelectOption. Required input.
|
|
1161
|
+
*/
|
|
1162
|
+
this.option = input.required();
|
|
1163
|
+
/**
|
|
1164
|
+
* Template to be displayed instead of option's label.
|
|
1165
|
+
*/
|
|
1166
|
+
this.templateRef = input();
|
|
1275
1167
|
/**
|
|
1276
1168
|
* Option value property name in options. By default set to 'value'.
|
|
1277
1169
|
*/
|
|
1278
|
-
this.optionValue = 'value';
|
|
1170
|
+
this.optionValue = input('value');
|
|
1279
1171
|
/**
|
|
1280
1172
|
* Option label property name in options. By default set to 'label'.
|
|
1281
1173
|
*/
|
|
1282
|
-
this.optionLabel = 'label';
|
|
1174
|
+
this.optionLabel = input('label');
|
|
1283
1175
|
/**
|
|
1284
1176
|
* Adds checkmark icon to checkbox (if checkbox input set to true). By default set to false.
|
|
1285
1177
|
*/
|
|
1286
|
-
this.selected = false;
|
|
1178
|
+
this.selected = input(false);
|
|
1287
1179
|
/**
|
|
1288
1180
|
* Display checkbox next to option label. By default set to true.
|
|
1289
1181
|
*/
|
|
1290
|
-
this.checkbox = true;
|
|
1182
|
+
this.checkbox = input(true);
|
|
1291
1183
|
/**
|
|
1292
1184
|
* Emits on option selected.
|
|
1293
1185
|
*/
|
|
1294
|
-
this.clicked =
|
|
1186
|
+
this.clicked = output();
|
|
1295
1187
|
}
|
|
1296
1188
|
/** @internal */
|
|
1297
1189
|
onClick() {
|
|
1298
1190
|
this.clicked.emit();
|
|
1299
1191
|
}
|
|
1300
1192
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisSelectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1301
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisSelectOptionComponent, isStandalone: true, selector: "suis-select-option", inputs: { option: "option", templateRef: "templateRef", optionValue: "optionValue", optionLabel: "optionLabel", selected: "selected", checkbox: "checkbox" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n class=\"suis-select-option\"\n type=\"button\"\n tabindex=\"-1\"\n (click)=\"onClick()\"\n>\n @if (checkbox) {\n <span\n class=\"suis-select-option__checkbox\"\n [class.suis-select-option__checkbox--selected]=\"selected\"\n >\n @if (selected) {\n <suis-icon [bold]=\"true\" color=\"primary\" type=\"check\" size=\"sm\"></suis-icon>\n }\n </span>\n }\n <span class=\"suis-select-option__label\">\n @if (templateRef) {\n <ng-container\n *ngTemplateOutlet=\"templateRef
|
|
1193
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisSelectOptionComponent, isStandalone: true, selector: "suis-select-option", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: true, transformFunction: null }, templateRef: { classPropertyName: "templateRef", publicName: "templateRef", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, checkbox: { classPropertyName: "checkbox", publicName: "checkbox", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n class=\"suis-select-option\"\n type=\"button\"\n tabindex=\"-1\"\n (click)=\"onClick()\"\n>\n @if (checkbox()) {\n <span\n class=\"suis-select-option__checkbox\"\n [class.suis-select-option__checkbox--selected]=\"selected()\"\n >\n @if (selected()) {\n <suis-icon [bold]=\"true\" color=\"primary\" type=\"check\" size=\"sm\"></suis-icon>\n }\n </span>\n }\n <span class=\"suis-select-option__label\">\n @if (templateRef()) {\n <ng-container\n *ngTemplateOutlet=\"templateRef()!; context: { $implicit: option() }\"\n ></ng-container>\n } @else {\n {{ option() ? option()![optionLabel()] : '' }}\n }\n <ng-template #label>\n {{ option() ? option()![optionLabel()] : '' }}\n </ng-template>\n </span>\n</button>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-select-option{width:100%;display:flex;align-items:center;background-color:transparent;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem;cursor:pointer}.suis-select-option:hover{background-color:#f5f6fa}.suis-select-option__checkbox{min-width:1.125rem;min-height:1.125rem;border:.0625rem solid #dcdde1;margin-right:.75rem;display:flex;justify-content:center;align-items:center}.suis-select-option__checkbox--selected{border:.0625rem solid #bcbcbc}.suis-select-option__label{display:flex;justify-content:left;align-items:center;text-align:left;font-size:.875rem}\n"], dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1302
1194
|
}
|
|
1303
1195
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisSelectOptionComponent, decorators: [{
|
|
1304
1196
|
type: Component,
|
|
1305
|
-
args: [{ selector: 'suis-select-option', imports: [NgTemplateOutlet, SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n class=\"suis-select-option\"\n type=\"button\"\n tabindex=\"-1\"\n (click)=\"onClick()\"\n>\n @if (checkbox) {\n <span\n class=\"suis-select-option__checkbox\"\n [class.suis-select-option__checkbox--selected]=\"selected\"\n >\n @if (selected) {\n <suis-icon [bold]=\"true\" color=\"primary\" type=\"check\" size=\"sm\"></suis-icon>\n }\n </span>\n }\n <span class=\"suis-select-option__label\">\n @if (templateRef) {\n <ng-container\n *ngTemplateOutlet=\"templateRef
|
|
1306
|
-
}]
|
|
1307
|
-
type: Input,
|
|
1308
|
-
args: [{ required: true }]
|
|
1309
|
-
}], templateRef: [{
|
|
1310
|
-
type: Input
|
|
1311
|
-
}], optionValue: [{
|
|
1312
|
-
type: Input
|
|
1313
|
-
}], optionLabel: [{
|
|
1314
|
-
type: Input
|
|
1315
|
-
}], selected: [{
|
|
1316
|
-
type: Input
|
|
1317
|
-
}], checkbox: [{
|
|
1318
|
-
type: Input
|
|
1319
|
-
}], clicked: [{
|
|
1320
|
-
type: Output
|
|
1321
|
-
}] } });
|
|
1197
|
+
args: [{ selector: 'suis-select-option', imports: [NgTemplateOutlet, SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n class=\"suis-select-option\"\n type=\"button\"\n tabindex=\"-1\"\n (click)=\"onClick()\"\n>\n @if (checkbox()) {\n <span\n class=\"suis-select-option__checkbox\"\n [class.suis-select-option__checkbox--selected]=\"selected()\"\n >\n @if (selected()) {\n <suis-icon [bold]=\"true\" color=\"primary\" type=\"check\" size=\"sm\"></suis-icon>\n }\n </span>\n }\n <span class=\"suis-select-option__label\">\n @if (templateRef()) {\n <ng-container\n *ngTemplateOutlet=\"templateRef()!; context: { $implicit: option() }\"\n ></ng-container>\n } @else {\n {{ option() ? option()![optionLabel()] : '' }}\n }\n <ng-template #label>\n {{ option() ? option()![optionLabel()] : '' }}\n </ng-template>\n </span>\n</button>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-select-option{width:100%;display:flex;align-items:center;background-color:transparent;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem;cursor:pointer}.suis-select-option:hover{background-color:#f5f6fa}.suis-select-option__checkbox{min-width:1.125rem;min-height:1.125rem;border:.0625rem solid #dcdde1;margin-right:.75rem;display:flex;justify-content:center;align-items:center}.suis-select-option__checkbox--selected{border:.0625rem solid #bcbcbc}.suis-select-option__label{display:flex;justify-content:left;align-items:center;text-align:left;font-size:.875rem}\n"] }]
|
|
1198
|
+
}] });
|
|
1322
1199
|
|
|
1323
1200
|
class SuisSelectSortOptionsPipe {
|
|
1324
1201
|
transform(options, optionLabel, sortOptions) {
|
|
@@ -1366,28 +1243,28 @@ class SuisSelectButtonBase {
|
|
|
1366
1243
|
/**
|
|
1367
1244
|
* Sets the readonly state of select button. By default set to false.
|
|
1368
1245
|
*/
|
|
1369
|
-
this.readonly = false;
|
|
1246
|
+
this.readonly = input(false);
|
|
1370
1247
|
/**
|
|
1371
1248
|
* Sets the invalid state of select button. By default set to false.
|
|
1372
1249
|
*/
|
|
1373
|
-
this.invalid = false;
|
|
1250
|
+
this.invalid = input(false);
|
|
1374
1251
|
/**
|
|
1375
1252
|
* Allows to clear the select value by using cross icon in button. By default set to false.
|
|
1376
1253
|
*/
|
|
1377
|
-
this.clearable = false;
|
|
1254
|
+
this.clearable = input(false);
|
|
1378
1255
|
/**
|
|
1379
1256
|
* Indicates if select content is expanded and styles chevron accordingly. By default set to false.
|
|
1380
1257
|
*/
|
|
1381
|
-
this.expanded = false;
|
|
1258
|
+
this.expanded = input(false);
|
|
1382
1259
|
/**
|
|
1383
1260
|
* Emits on button click.
|
|
1384
1261
|
*/
|
|
1385
|
-
this.expandedChange =
|
|
1262
|
+
this.expandedChange = output();
|
|
1386
1263
|
/**
|
|
1387
1264
|
* Emits on button cross icon click.
|
|
1388
1265
|
*/
|
|
1389
1266
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
1390
|
-
this.cleared =
|
|
1267
|
+
this.cleared = output();
|
|
1391
1268
|
}
|
|
1392
1269
|
onExpand() {
|
|
1393
1270
|
this.expandedChange.emit();
|
|
@@ -1397,31 +1274,19 @@ class SuisSelectButtonBase {
|
|
|
1397
1274
|
this.cleared.emit(event);
|
|
1398
1275
|
}
|
|
1399
1276
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisSelectButtonBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1400
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
1277
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.7", type: SuisSelectButtonBase, isStandalone: true, inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandedChange: "expandedChange", cleared: "cleared" }, ngImport: i0 }); }
|
|
1401
1278
|
}
|
|
1402
1279
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisSelectButtonBase, decorators: [{
|
|
1403
1280
|
type: Directive
|
|
1404
|
-
}]
|
|
1405
|
-
type: Input
|
|
1406
|
-
}], invalid: [{
|
|
1407
|
-
type: Input
|
|
1408
|
-
}], clearable: [{
|
|
1409
|
-
type: Input
|
|
1410
|
-
}], expanded: [{
|
|
1411
|
-
type: Input
|
|
1412
|
-
}], expandedChange: [{
|
|
1413
|
-
type: Output
|
|
1414
|
-
}], cleared: [{
|
|
1415
|
-
type: Output
|
|
1416
|
-
}] } });
|
|
1281
|
+
}] });
|
|
1417
1282
|
|
|
1418
1283
|
class SuisSelectButtonComponent extends SuisSelectButtonBase {
|
|
1419
1284
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisSelectButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1420
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisSelectButtonComponent, isStandalone: true, selector: "suis-select-button", usesInheritance: true, ngImport: i0, template: "<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 <ng-content></ng-content>\n </span>\n <span class=\"suis-select-button__actions\">\n @if (clearable && !readonly) {\n <suis-icon\n class=\"suis-select-button__cross\"\n type=\"times\"\n size=\"lg\"\n color=\"primary\"\n (click)=\"onClear($event)\"\n ></suis-icon>\n }\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", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.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}\n"], dependencies: [{ kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1285
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisSelectButtonComponent, isStandalone: true, selector: "suis-select-button", usesInheritance: true, ngImport: i0, template: "<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 <ng-content></ng-content>\n </span>\n <span class=\"suis-select-button__actions\">\n @if (clearable() && !readonly()) {\n <suis-icon\n class=\"suis-select-button__cross\"\n type=\"times\"\n size=\"lg\"\n color=\"primary\"\n (click)=\"onClear($event)\"\n ></suis-icon>\n }\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", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.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}\n"], dependencies: [{ kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1421
1286
|
}
|
|
1422
1287
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisSelectButtonComponent, decorators: [{
|
|
1423
1288
|
type: Component,
|
|
1424
|
-
args: [{ selector: 'suis-select-button', imports: [SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<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 <ng-content></ng-content>\n </span>\n <span class=\"suis-select-button__actions\">\n @if (clearable && !readonly) {\n <suis-icon\n class=\"suis-select-button__cross\"\n type=\"times\"\n size=\"lg\"\n color=\"primary\"\n (click)=\"onClear($event)\"\n ></suis-icon>\n }\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", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.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}\n"] }]
|
|
1289
|
+
args: [{ selector: 'suis-select-button', imports: [SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<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 <ng-content></ng-content>\n </span>\n <span class=\"suis-select-button__actions\">\n @if (clearable() && !readonly()) {\n <suis-icon\n class=\"suis-select-button__cross\"\n type=\"times\"\n size=\"lg\"\n color=\"primary\"\n (click)=\"onClear($event)\"\n ></suis-icon>\n }\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", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.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}\n"] }]
|
|
1425
1290
|
}] });
|
|
1426
1291
|
|
|
1427
1292
|
class SuisSelectOptionDirective {
|
|
@@ -1446,41 +1311,45 @@ class SuisSelectBase extends SuisInputBase {
|
|
|
1446
1311
|
constructor() {
|
|
1447
1312
|
super(...arguments);
|
|
1448
1313
|
/** @internal */
|
|
1314
|
+
this.suisSelectOption = contentChild(SuisSelectOptionDirective);
|
|
1315
|
+
/** @internal */
|
|
1316
|
+
this.searchInput = viewChild('searchInput');
|
|
1317
|
+
/** @internal */
|
|
1449
1318
|
this.searchPhrase = '';
|
|
1450
1319
|
/** @internal */
|
|
1451
1320
|
this.expanded = false; // TODO: Remove
|
|
1452
1321
|
/**
|
|
1453
1322
|
* Options displayed in dropdown list. Type of SuisSelectOption[].
|
|
1454
1323
|
*/
|
|
1455
|
-
this.options = [];
|
|
1324
|
+
this.options = input([]);
|
|
1456
1325
|
/**
|
|
1457
1326
|
* Defines way of sorting options. Type of SuisSortOptional. By default set to 'asc'.
|
|
1458
1327
|
*/
|
|
1459
|
-
this.sortOptions = 'asc';
|
|
1328
|
+
this.sortOptions = input('asc');
|
|
1460
1329
|
/**
|
|
1461
1330
|
* Displays search input above options. By default set to true.
|
|
1462
1331
|
*/
|
|
1463
|
-
this.search = true;
|
|
1332
|
+
this.search = input(true);
|
|
1464
1333
|
/**
|
|
1465
1334
|
* Placeholder text displayed in options search. By default set to 'Search...'.
|
|
1466
1335
|
*/
|
|
1467
|
-
this.searchPlaceholder = 'Search...';
|
|
1336
|
+
this.searchPlaceholder = input('Search...');
|
|
1468
1337
|
/**
|
|
1469
1338
|
* Placeholder text displayed when value is not selected. By default set to 'Select option...'.
|
|
1470
1339
|
*/
|
|
1471
|
-
this.placeholder = 'Select option...';
|
|
1340
|
+
this.placeholder = input('Select option...');
|
|
1472
1341
|
/**
|
|
1473
1342
|
* Option value property name in options. By default set to 'value'.
|
|
1474
1343
|
*/
|
|
1475
|
-
this.optionValue = 'value';
|
|
1344
|
+
this.optionValue = input('value');
|
|
1476
1345
|
/**
|
|
1477
1346
|
* Option label property name in options. By default set to 'label'.
|
|
1478
1347
|
*/
|
|
1479
|
-
this.optionLabel = 'label';
|
|
1348
|
+
this.optionLabel = input('label');
|
|
1480
1349
|
/**
|
|
1481
1350
|
* Emits on search phrase changed.
|
|
1482
1351
|
*/
|
|
1483
|
-
this.searchPhraseChanged =
|
|
1352
|
+
this.searchPhraseChanged = output();
|
|
1484
1353
|
}
|
|
1485
1354
|
onClear(event) {
|
|
1486
1355
|
this.clearValue();
|
|
@@ -1499,7 +1368,7 @@ class SuisSelectBase extends SuisInputBase {
|
|
|
1499
1368
|
this.searchPhrase = '';
|
|
1500
1369
|
if (this.expanded)
|
|
1501
1370
|
setTimeout(() => {
|
|
1502
|
-
this.searchInput?.nativeElement.focus();
|
|
1371
|
+
this.searchInput()?.nativeElement.focus();
|
|
1503
1372
|
}, 0);
|
|
1504
1373
|
}
|
|
1505
1374
|
onDocumentClick(event) {
|
|
@@ -1509,36 +1378,14 @@ class SuisSelectBase extends SuisInputBase {
|
|
|
1509
1378
|
}
|
|
1510
1379
|
/** @internal */
|
|
1511
1380
|
optionTrackBy(index, option) {
|
|
1512
|
-
return `${JSON.stringify(option[this.optionValue])}`;
|
|
1381
|
+
return `${JSON.stringify(option[this.optionValue()])}`;
|
|
1513
1382
|
}
|
|
1514
1383
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisSelectBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1515
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
1384
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.0.7", type: SuisSelectBase, isStandalone: true, inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, sortOptions: { classPropertyName: "sortOptions", publicName: "sortOptions", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchPhraseChanged: "searchPhraseChanged" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, queries: [{ propertyName: "suisSelectOption", first: true, predicate: SuisSelectOptionDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 }); }
|
|
1516
1385
|
}
|
|
1517
1386
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisSelectBase, decorators: [{
|
|
1518
1387
|
type: Directive
|
|
1519
|
-
}], propDecorators: {
|
|
1520
|
-
type: ContentChild,
|
|
1521
|
-
args: [SuisSelectOptionDirective]
|
|
1522
|
-
}], searchInput: [{
|
|
1523
|
-
type: ViewChild,
|
|
1524
|
-
args: ['searchInput', { static: false }]
|
|
1525
|
-
}], options: [{
|
|
1526
|
-
type: Input
|
|
1527
|
-
}], sortOptions: [{
|
|
1528
|
-
type: Input
|
|
1529
|
-
}], search: [{
|
|
1530
|
-
type: Input
|
|
1531
|
-
}], searchPlaceholder: [{
|
|
1532
|
-
type: Input
|
|
1533
|
-
}], placeholder: [{
|
|
1534
|
-
type: Input
|
|
1535
|
-
}], optionValue: [{
|
|
1536
|
-
type: Input
|
|
1537
|
-
}], optionLabel: [{
|
|
1538
|
-
type: Input
|
|
1539
|
-
}], searchPhraseChanged: [{
|
|
1540
|
-
type: Output
|
|
1541
|
-
}], onDocumentClick: [{
|
|
1388
|
+
}], propDecorators: { onDocumentClick: [{
|
|
1542
1389
|
type: HostListener,
|
|
1543
1390
|
args: ['document:click', ['$event']]
|
|
1544
1391
|
}] } });
|
|
@@ -1551,7 +1398,7 @@ class SuisSelectSingleBase extends SuisSelectBase {
|
|
|
1551
1398
|
/**
|
|
1552
1399
|
* Allows mechanism of clearing value. By default set to true.
|
|
1553
1400
|
*/
|
|
1554
|
-
this.nullable = true;
|
|
1401
|
+
this.nullable = input(true);
|
|
1555
1402
|
}
|
|
1556
1403
|
writeValue(obj) {
|
|
1557
1404
|
this.value = obj;
|
|
@@ -1560,7 +1407,7 @@ class SuisSelectSingleBase extends SuisSelectBase {
|
|
|
1560
1407
|
}
|
|
1561
1408
|
onSelect(value) {
|
|
1562
1409
|
if (JSON.stringify(this.value) === JSON.stringify(value)) {
|
|
1563
|
-
if (this.nullable)
|
|
1410
|
+
if (this.nullable())
|
|
1564
1411
|
this.clearValue();
|
|
1565
1412
|
}
|
|
1566
1413
|
else {
|
|
@@ -1574,17 +1421,15 @@ class SuisSelectSingleBase extends SuisSelectBase {
|
|
|
1574
1421
|
this.value = value;
|
|
1575
1422
|
this.toggle(false);
|
|
1576
1423
|
this._onChange(this.value);
|
|
1577
|
-
this.changed.emit();
|
|
1424
|
+
this.changed.emit(this.value);
|
|
1578
1425
|
this.cdRef.markForCheck();
|
|
1579
1426
|
}
|
|
1580
1427
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisSelectSingleBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1581
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
1428
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.7", type: SuisSelectSingleBase, isStandalone: true, inputs: { nullable: { classPropertyName: "nullable", publicName: "nullable", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
|
|
1582
1429
|
}
|
|
1583
1430
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisSelectSingleBase, decorators: [{
|
|
1584
1431
|
type: Directive
|
|
1585
|
-
}]
|
|
1586
|
-
type: Input
|
|
1587
|
-
}] } });
|
|
1432
|
+
}] });
|
|
1588
1433
|
|
|
1589
1434
|
class SuisSelectComponent extends SuisSelectSingleBase {
|
|
1590
1435
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
@@ -1594,7 +1439,7 @@ class SuisSelectComponent extends SuisSelectSingleBase {
|
|
|
1594
1439
|
multi: true,
|
|
1595
1440
|
useExisting: forwardRef(() => SuisSelectComponent),
|
|
1596
1441
|
},
|
|
1597
|
-
], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-select\">\n <suis-select-button\n [invalid]=\"invalid\"\n [readonly]=\"readonly\"\n [clearable]=\"!!(nullable && value)\"\n [expanded]=\"expanded\"\n (expandedChange)=\"onExpand()\"\n (cleared)=\"onClear($event)\"\n >\n {{\n value\n | suisSelectLabel
|
|
1442
|
+
], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-select\">\n <suis-select-button\n [invalid]=\"invalid()\"\n [readonly]=\"readonly()\"\n [clearable]=\"!!(nullable() && value)\"\n [expanded]=\"expanded\"\n (expandedChange)=\"onExpand()\"\n (cleared)=\"onClear($event)\"\n >\n {{\n value\n | suisSelectLabel\n : options()\n : placeholder()\n : optionValue()\n : optionLabel()\n }}\n </suis-select-button>\n @if (expanded) {\n <div class=\"suis-select__list\">\n @if (search()) {\n <input\n #searchInput\n [ngModel]=\"searchPhrase\"\n (ngModelChange)=\"onSearchPhraseChange($event)\"\n class=\"suis-select__list__search\"\n type=\"search\"\n [placeholder]=\"searchPlaceholder()\"\n />\n } @for ( option of options() | suisSelectSortOptions : optionLabel() :\n sortOptions() | suisSelectFilterOptions : searchPhrase : optionLabel();\n track optionTrackBy($index, option)) {\n <suis-select-option\n [option]=\"option\"\n [optionLabel]=\"optionLabel()\"\n [optionValue]=\"optionValue()\"\n [templateRef]=\"suisSelectOption()?.templateRef\"\n [selected]=\"option[optionValue()] | suisSelectIsSelected : value\"\n (clicked)=\"onSelect(option[optionValue()])\"\n ></suis-select-option>\n }\n </div>\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-select{position:relative}.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: "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: SuisSelectOptionComponent, selector: "suis-select-option", inputs: ["option", "templateRef", "optionValue", "optionLabel", "selected", "checkbox"], outputs: ["clicked"] }, { kind: "component", type: SuisSelectButtonComponent, selector: "suis-select-button" }, { 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 }); }
|
|
1598
1443
|
}
|
|
1599
1444
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisSelectComponent, decorators: [{
|
|
1600
1445
|
type: Component,
|
|
@@ -1612,22 +1457,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
1612
1457
|
multi: true,
|
|
1613
1458
|
useExisting: forwardRef(() => SuisSelectComponent),
|
|
1614
1459
|
},
|
|
1615
|
-
], template: "<div class=\"suis-select\">\n <suis-select-button\n [invalid]=\"invalid\"\n [readonly]=\"readonly\"\n [clearable]=\"!!(nullable && value)\"\n [expanded]=\"expanded\"\n (expandedChange)=\"onExpand()\"\n (cleared)=\"onClear($event)\"\n >\n {{\n value\n | suisSelectLabel
|
|
1460
|
+
], template: "<div class=\"suis-select\">\n <suis-select-button\n [invalid]=\"invalid()\"\n [readonly]=\"readonly()\"\n [clearable]=\"!!(nullable() && value)\"\n [expanded]=\"expanded\"\n (expandedChange)=\"onExpand()\"\n (cleared)=\"onClear($event)\"\n >\n {{\n value\n | suisSelectLabel\n : options()\n : placeholder()\n : optionValue()\n : optionLabel()\n }}\n </suis-select-button>\n @if (expanded) {\n <div class=\"suis-select__list\">\n @if (search()) {\n <input\n #searchInput\n [ngModel]=\"searchPhrase\"\n (ngModelChange)=\"onSearchPhraseChange($event)\"\n class=\"suis-select__list__search\"\n type=\"search\"\n [placeholder]=\"searchPlaceholder()\"\n />\n } @for ( option of options() | suisSelectSortOptions : optionLabel() :\n sortOptions() | suisSelectFilterOptions : searchPhrase : optionLabel();\n track optionTrackBy($index, option)) {\n <suis-select-option\n [option]=\"option\"\n [optionLabel]=\"optionLabel()\"\n [optionValue]=\"optionValue()\"\n [templateRef]=\"suisSelectOption()?.templateRef\"\n [selected]=\"option[optionValue()] | suisSelectIsSelected : value\"\n (clicked)=\"onSelect(option[optionValue()])\"\n ></suis-select-option>\n }\n </div>\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-select{position:relative}.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"] }]
|
|
1616
1461
|
}] });
|
|
1617
1462
|
|
|
1618
1463
|
class SuisSelectGroupOptionComponent {
|
|
1464
|
+
constructor() {
|
|
1465
|
+
/**
|
|
1466
|
+
* Item data. Type of SuisSelectGroupOption. Required input.
|
|
1467
|
+
*/
|
|
1468
|
+
this.option = input.required();
|
|
1469
|
+
/**
|
|
1470
|
+
* Template to be displayed instead of item's label.
|
|
1471
|
+
*/
|
|
1472
|
+
this.templateRef = input();
|
|
1473
|
+
}
|
|
1619
1474
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisSelectGroupOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1620
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisSelectGroupOptionComponent, isStandalone: true, selector: "suis-select-group-option", inputs: { option: "option", templateRef: "templateRef" }, ngImport: i0, template: "<div class=\"suis-select-group-option\">\n @if (templateRef) {\n <ng-container\n *ngTemplateOutlet=\"templateRef
|
|
1475
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisSelectGroupOptionComponent, isStandalone: true, selector: "suis-select-group-option", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: true, transformFunction: null }, templateRef: { classPropertyName: "templateRef", publicName: "templateRef", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"suis-select-group-option\">\n @if (templateRef()) {\n <ng-container\n *ngTemplateOutlet=\"templateRef()!; context: { $implicit: option() }\"\n ></ng-container>\n } @else {\n {{ option()?.label }}\n }\n <ng-template #label>\n {{ option()?.label }}\n </ng-template>\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-group-option{width:100%;display:flex;align-items:center;justify-content:left;text-align:left;background-color:#f5f6fa;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem;font-size:.875rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1621
1476
|
}
|
|
1622
1477
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisSelectGroupOptionComponent, decorators: [{
|
|
1623
1478
|
type: Component,
|
|
1624
|
-
args: [{ selector: 'suis-select-group-option', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-select-group-option\">\n @if (templateRef) {\n <ng-container\n *ngTemplateOutlet=\"templateRef
|
|
1625
|
-
}]
|
|
1626
|
-
type: Input,
|
|
1627
|
-
args: [{ required: true }]
|
|
1628
|
-
}], templateRef: [{
|
|
1629
|
-
type: Input
|
|
1630
|
-
}] } });
|
|
1479
|
+
args: [{ selector: 'suis-select-group-option', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-select-group-option\">\n @if (templateRef()) {\n <ng-container\n *ngTemplateOutlet=\"templateRef()!; context: { $implicit: option() }\"\n ></ng-container>\n } @else {\n {{ option()?.label }}\n }\n <ng-template #label>\n {{ option()?.label }}\n </ng-template>\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-group-option{width:100%;display:flex;align-items:center;justify-content:left;text-align:left;background-color:#f5f6fa;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem;font-size:.875rem}\n"] }]
|
|
1480
|
+
}] });
|
|
1631
1481
|
|
|
1632
1482
|
class SuisSelectFilterGroupOptionsPipe {
|
|
1633
1483
|
transform(groupOptions, phrase, optionLabel) {
|
|
@@ -1714,19 +1564,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
1714
1564
|
class SuisSelectGroupComponent extends SuisSelectSingleBase {
|
|
1715
1565
|
constructor() {
|
|
1716
1566
|
super(...arguments);
|
|
1567
|
+
/** @internal */
|
|
1568
|
+
this.suisSelectGroupOption = contentChild(SuisSelectGroupOptionDirective);
|
|
1717
1569
|
/**
|
|
1718
1570
|
* Group options displayed in dropdown list. Type of SuisSelectGroupOption[].
|
|
1719
1571
|
*/
|
|
1720
|
-
this.groupOptions = [];
|
|
1572
|
+
this.groupOptions = input([]);
|
|
1721
1573
|
}
|
|
1722
1574
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisSelectGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1723
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisSelectGroupComponent, isStandalone: true, selector: "suis-select-group", inputs: { groupOptions: "groupOptions" }, providers: [
|
|
1575
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisSelectGroupComponent, isStandalone: true, selector: "suis-select-group", inputs: { groupOptions: { classPropertyName: "groupOptions", publicName: "groupOptions", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
1724
1576
|
{
|
|
1725
1577
|
provide: NG_VALUE_ACCESSOR,
|
|
1726
1578
|
multi: true,
|
|
1727
1579
|
useExisting: forwardRef(() => SuisSelectGroupComponent),
|
|
1728
1580
|
},
|
|
1729
|
-
], queries: [{ propertyName: "suisSelectGroupOption", first: true, predicate: SuisSelectGroupOptionDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-select-group\">\n <suis-select-button\n [invalid]=\"invalid\"\n [readonly]=\"readonly\"\n [clearable]=\"!!(nullable && value)\"\n [expanded]=\"expanded\"\n (expandedChange)=\"onExpand()\"\n (cleared)=\"onClear($event)\"\n >\n {{\n value\n | suisSelectGroupLabel\n : groupOptions\n : placeholder\n : optionValue\n : optionLabel\n }}\n </suis-select-button>\n @if (expanded) {\n <div class=\"suis-select-group__list\">\n @if (search) {\n <input\n #searchInput\n [ngModel]=\"searchPhrase\"\n (ngModelChange)=\"onSearchPhraseChange($event)\"\n class=\"suis-select-group__list__search\"\n type=\"search\"\n [placeholder]=\"searchPlaceholder\"\n />\n } @for ( group of groupOptions | suisSelectSortGroupOptions
|
|
1581
|
+
], queries: [{ propertyName: "suisSelectGroupOption", first: true, predicate: SuisSelectGroupOptionDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-select-group\">\n <suis-select-button\n [invalid]=\"invalid()\"\n [readonly]=\"readonly()\"\n [clearable]=\"!!(nullable() && value)\"\n [expanded]=\"expanded\"\n (expandedChange)=\"onExpand()\"\n (cleared)=\"onClear($event)\"\n >\n {{\n value\n | suisSelectGroupLabel\n : groupOptions()\n : placeholder()\n : optionValue()\n : optionLabel()\n }}\n </suis-select-button>\n @if (expanded) {\n <div class=\"suis-select-group__list\">\n @if (search()) {\n <input\n #searchInput\n [ngModel]=\"searchPhrase\"\n (ngModelChange)=\"onSearchPhraseChange($event)\"\n class=\"suis-select-group__list__search\"\n type=\"search\"\n [placeholder]=\"searchPlaceholder()\"\n />\n } @for ( group of groupOptions() | suisSelectSortGroupOptions :\n sortOptions() | suisSelectFilterGroupOptions : searchPhrase : optionLabel()\n ; track group) {\n <suis-select-group-option\n [option]=\"group\"\n [templateRef]=\"suisSelectGroupOption()?.templateRef\"\n ></suis-select-group-option>\n @for ( option of group.children | suisSelectSortOptions : optionLabel() :\n sortOptions() | suisSelectFilterOptions : searchPhrase : optionLabel();\n track optionTrackBy($index, option)) {\n <suis-select-option\n [option]=\"option\"\n [optionLabel]=\"optionLabel()\"\n [optionValue]=\"optionValue()\"\n [templateRef]=\"suisSelectOption()?.templateRef\"\n [selected]=\"option[optionValue()] | suisSelectIsSelected : value\"\n (clicked)=\"onSelect(option[optionValue()])\"\n ></suis-select-option>\n } }\n </div>\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-select-group{position:relative}.suis-select-group__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;max-height:15.25rem}.suis-select-group__list::-webkit-scrollbar{width:.5rem}.suis-select-group__list::-webkit-scrollbar-track{background:#f5f6fa}.suis-select-group__list::-webkit-scrollbar-thumb{background:#dcdde1}.suis-select-group__list::-webkit-scrollbar-thumb:hover{background:#bcbcbc}.suis-select-group__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem;font-size:.875rem}.suis-select-group__list__search:focus{outline:none}\n"], dependencies: [{ 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: SuisSelectOptionComponent, selector: "suis-select-option", inputs: ["option", "templateRef", "optionValue", "optionLabel", "selected", "checkbox"], outputs: ["clicked"] }, { kind: "component", type: SuisSelectGroupOptionComponent, selector: "suis-select-group-option", inputs: ["option", "templateRef"] }, { kind: "pipe", type: SuisSelectIsSelectedPipe, name: "suisSelectIsSelected" }, { kind: "pipe", type: SuisSelectSortOptionsPipe, name: "suisSelectSortOptions" }, { kind: "pipe", type: SuisSelectFilterOptionsPipe, name: "suisSelectFilterOptions" }, { kind: "pipe", type: SuisSelectFilterGroupOptionsPipe, name: "suisSelectFilterGroupOptions" }, { kind: "pipe", type: SuisSelectGroupLabelPipe, name: "suisSelectGroupLabel" }, { kind: "component", type: SuisSelectButtonComponent, selector: "suis-select-button" }, { kind: "pipe", type: SuisSelectSortGroupOptionsPipe, name: "suisSelectSortGroupOptions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1730
1582
|
}
|
|
1731
1583
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisSelectGroupComponent, decorators: [{
|
|
1732
1584
|
type: Component,
|
|
@@ -1747,13 +1599,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
1747
1599
|
multi: true,
|
|
1748
1600
|
useExisting: forwardRef(() => SuisSelectGroupComponent),
|
|
1749
1601
|
},
|
|
1750
|
-
], template: "<div class=\"suis-select-group\">\n <suis-select-button\n [invalid]=\"invalid\"\n [readonly]=\"readonly\"\n [clearable]=\"!!(nullable && value)\"\n [expanded]=\"expanded\"\n (expandedChange)=\"onExpand()\"\n (cleared)=\"onClear($event)\"\n >\n {{\n value\n | suisSelectGroupLabel\n : groupOptions\n : placeholder\n : optionValue\n : optionLabel\n }}\n </suis-select-button>\n @if (expanded) {\n <div class=\"suis-select-group__list\">\n @if (search) {\n <input\n #searchInput\n [ngModel]=\"searchPhrase\"\n (ngModelChange)=\"onSearchPhraseChange($event)\"\n class=\"suis-select-group__list__search\"\n type=\"search\"\n [placeholder]=\"searchPlaceholder\"\n />\n } @for ( group of groupOptions | suisSelectSortGroupOptions
|
|
1751
|
-
}]
|
|
1752
|
-
type: ContentChild,
|
|
1753
|
-
args: [SuisSelectGroupOptionDirective]
|
|
1754
|
-
}], groupOptions: [{
|
|
1755
|
-
type: Input
|
|
1756
|
-
}] } });
|
|
1602
|
+
], template: "<div class=\"suis-select-group\">\n <suis-select-button\n [invalid]=\"invalid()\"\n [readonly]=\"readonly()\"\n [clearable]=\"!!(nullable() && value)\"\n [expanded]=\"expanded\"\n (expandedChange)=\"onExpand()\"\n (cleared)=\"onClear($event)\"\n >\n {{\n value\n | suisSelectGroupLabel\n : groupOptions()\n : placeholder()\n : optionValue()\n : optionLabel()\n }}\n </suis-select-button>\n @if (expanded) {\n <div class=\"suis-select-group__list\">\n @if (search()) {\n <input\n #searchInput\n [ngModel]=\"searchPhrase\"\n (ngModelChange)=\"onSearchPhraseChange($event)\"\n class=\"suis-select-group__list__search\"\n type=\"search\"\n [placeholder]=\"searchPlaceholder()\"\n />\n } @for ( group of groupOptions() | suisSelectSortGroupOptions :\n sortOptions() | suisSelectFilterGroupOptions : searchPhrase : optionLabel()\n ; track group) {\n <suis-select-group-option\n [option]=\"group\"\n [templateRef]=\"suisSelectGroupOption()?.templateRef\"\n ></suis-select-group-option>\n @for ( option of group.children | suisSelectSortOptions : optionLabel() :\n sortOptions() | suisSelectFilterOptions : searchPhrase : optionLabel();\n track optionTrackBy($index, option)) {\n <suis-select-option\n [option]=\"option\"\n [optionLabel]=\"optionLabel()\"\n [optionValue]=\"optionValue()\"\n [templateRef]=\"suisSelectOption()?.templateRef\"\n [selected]=\"option[optionValue()] | suisSelectIsSelected : value\"\n (clicked)=\"onSelect(option[optionValue()])\"\n ></suis-select-option>\n } }\n </div>\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-select-group{position:relative}.suis-select-group__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;max-height:15.25rem}.suis-select-group__list::-webkit-scrollbar{width:.5rem}.suis-select-group__list::-webkit-scrollbar-track{background:#f5f6fa}.suis-select-group__list::-webkit-scrollbar-thumb{background:#dcdde1}.suis-select-group__list::-webkit-scrollbar-thumb:hover{background:#bcbcbc}.suis-select-group__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem;font-size:.875rem}.suis-select-group__list__search:focus{outline:none}\n"] }]
|
|
1603
|
+
}] });
|
|
1757
1604
|
|
|
1758
1605
|
class SuisSelectMultiChipsPipe {
|
|
1759
1606
|
transform(values, options, optionValue, optionLabel) {
|
|
@@ -1794,11 +1641,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
1794
1641
|
|
|
1795
1642
|
class SuisSelectButtonMultiComponent extends SuisSelectButtonBase {
|
|
1796
1643
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisSelectButtonMultiComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1797
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisSelectButtonMultiComponent, isStandalone: true, selector: "suis-select-button-multi", usesInheritance: true, ngImport: i0, template: "<button\n type=\"button\"\n (click)=\"onExpand()\"\n class=\"suis-select-button-multi\"\n [class.suis-select-button-multi--invalid]=\"invalid\"\n [class.suis-select-button-multi--readonly]=\"readonly\"\n [class.suis-select-button-multi--valid]=\"clearable\"\n [disabled]=\"readonly\"\n>\n <span class=\"suis-select-button-multi__value\">\n <ng-content></ng-content>\n </span>\n <span class=\"suis-select-button-multi__actions\">\n @if (clearable && !readonly) {\n <suis-icon\n class=\"suis-select-button-multi__cross\"\n type=\"times\"\n size=\"lg\"\n color=\"primary\"\n (click)=\"onClear($event)\"\n tabindex=\"0\"\n ></suis-icon>\n }\n <suis-icon\n class=\"suis-select-button-multi__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", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-select-button-multi{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-multi:focus{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-select-button-multi--invalid{border:.0625rem solid #ff4757}.suis-select-button-multi--invalid:focus{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}.suis-select-button-multi--readonly{background-color:#f5f6fa;cursor:not-allowed}.suis-select-button-multi--readonly:focus{border:.0625rem solid #dcdde1;box-shadow:none;outline:none}.suis-select-button-multi__value{width:100%;text-align:left;text-overflow:ellipsis;text-wrap:nowrap;overflow:hidden}.suis-select-button-multi__actions{margin-left:.25rem;display:flex;justify-content:right;align-items:center}.suis-select-button-multi--valid{padding-bottom:.125rem}.suis-select-button-multi__value{display:flex;flex-wrap:wrap;gap:.25rem}\n"], dependencies: [{ kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1644
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisSelectButtonMultiComponent, isStandalone: true, selector: "suis-select-button-multi", usesInheritance: true, ngImport: i0, template: "<button\n type=\"button\"\n (click)=\"onExpand()\"\n class=\"suis-select-button-multi\"\n [class.suis-select-button-multi--invalid]=\"invalid()\"\n [class.suis-select-button-multi--readonly]=\"readonly()\"\n [class.suis-select-button-multi--valid]=\"clearable()\"\n [disabled]=\"readonly()\"\n>\n <span class=\"suis-select-button-multi__value\">\n <ng-content></ng-content>\n </span>\n <span class=\"suis-select-button-multi__actions\">\n @if (clearable() && !readonly()) {\n <suis-icon\n class=\"suis-select-button-multi__cross\"\n type=\"times\"\n size=\"lg\"\n color=\"primary\"\n (click)=\"onClear($event)\"\n tabindex=\"0\"\n ></suis-icon>\n }\n <suis-icon\n class=\"suis-select-button-multi__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", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-select-button-multi{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-multi:focus{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-select-button-multi--invalid{border:.0625rem solid #ff4757}.suis-select-button-multi--invalid:focus{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}.suis-select-button-multi--readonly{background-color:#f5f6fa;cursor:not-allowed}.suis-select-button-multi--readonly:focus{border:.0625rem solid #dcdde1;box-shadow:none;outline:none}.suis-select-button-multi__value{width:100%;text-align:left;text-overflow:ellipsis;text-wrap:nowrap;overflow:hidden}.suis-select-button-multi__actions{margin-left:.25rem;display:flex;justify-content:right;align-items:center}.suis-select-button-multi--valid{padding-bottom:.125rem}.suis-select-button-multi__value{display:flex;flex-wrap:wrap;gap:.25rem}\n"], dependencies: [{ kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1798
1645
|
}
|
|
1799
1646
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisSelectButtonMultiComponent, decorators: [{
|
|
1800
1647
|
type: Component,
|
|
1801
|
-
args: [{ selector: 'suis-select-button-multi', imports: [SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n type=\"button\"\n (click)=\"onExpand()\"\n class=\"suis-select-button-multi\"\n [class.suis-select-button-multi--invalid]=\"invalid\"\n [class.suis-select-button-multi--readonly]=\"readonly\"\n [class.suis-select-button-multi--valid]=\"clearable\"\n [disabled]=\"readonly\"\n>\n <span class=\"suis-select-button-multi__value\">\n <ng-content></ng-content>\n </span>\n <span class=\"suis-select-button-multi__actions\">\n @if (clearable && !readonly) {\n <suis-icon\n class=\"suis-select-button-multi__cross\"\n type=\"times\"\n size=\"lg\"\n color=\"primary\"\n (click)=\"onClear($event)\"\n tabindex=\"0\"\n ></suis-icon>\n }\n <suis-icon\n class=\"suis-select-button-multi__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", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-select-button-multi{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-multi:focus{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-select-button-multi--invalid{border:.0625rem solid #ff4757}.suis-select-button-multi--invalid:focus{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}.suis-select-button-multi--readonly{background-color:#f5f6fa;cursor:not-allowed}.suis-select-button-multi--readonly:focus{border:.0625rem solid #dcdde1;box-shadow:none;outline:none}.suis-select-button-multi__value{width:100%;text-align:left;text-overflow:ellipsis;text-wrap:nowrap;overflow:hidden}.suis-select-button-multi__actions{margin-left:.25rem;display:flex;justify-content:right;align-items:center}.suis-select-button-multi--valid{padding-bottom:.125rem}.suis-select-button-multi__value{display:flex;flex-wrap:wrap;gap:.25rem}\n"] }]
|
|
1648
|
+
args: [{ selector: 'suis-select-button-multi', imports: [SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n type=\"button\"\n (click)=\"onExpand()\"\n class=\"suis-select-button-multi\"\n [class.suis-select-button-multi--invalid]=\"invalid()\"\n [class.suis-select-button-multi--readonly]=\"readonly()\"\n [class.suis-select-button-multi--valid]=\"clearable()\"\n [disabled]=\"readonly()\"\n>\n <span class=\"suis-select-button-multi__value\">\n <ng-content></ng-content>\n </span>\n <span class=\"suis-select-button-multi__actions\">\n @if (clearable() && !readonly()) {\n <suis-icon\n class=\"suis-select-button-multi__cross\"\n type=\"times\"\n size=\"lg\"\n color=\"primary\"\n (click)=\"onClear($event)\"\n tabindex=\"0\"\n ></suis-icon>\n }\n <suis-icon\n class=\"suis-select-button-multi__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", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-select-button-multi{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-multi:focus{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-select-button-multi--invalid{border:.0625rem solid #ff4757}.suis-select-button-multi--invalid:focus{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}.suis-select-button-multi--readonly{background-color:#f5f6fa;cursor:not-allowed}.suis-select-button-multi--readonly:focus{border:.0625rem solid #dcdde1;box-shadow:none;outline:none}.suis-select-button-multi__value{width:100%;text-align:left;text-overflow:ellipsis;text-wrap:nowrap;overflow:hidden}.suis-select-button-multi__actions{margin-left:.25rem;display:flex;justify-content:right;align-items:center}.suis-select-button-multi--valid{padding-bottom:.125rem}.suis-select-button-multi__value{display:flex;flex-wrap:wrap;gap:.25rem}\n"] }]
|
|
1802
1649
|
}] });
|
|
1803
1650
|
|
|
1804
1651
|
class SuisSelectMultiBase extends SuisSelectBase {
|
|
@@ -1809,15 +1656,15 @@ class SuisSelectMultiBase extends SuisSelectBase {
|
|
|
1809
1656
|
/**
|
|
1810
1657
|
* Allows to select duplicated values and remove checkboxes next to options' label. By default set to false.
|
|
1811
1658
|
*/
|
|
1812
|
-
this.duplicate = false;
|
|
1659
|
+
this.duplicate = input(false);
|
|
1813
1660
|
/**
|
|
1814
1661
|
* Sets the color pallette of the chips. Type of SuisColor. By default set to 'primary'.
|
|
1815
1662
|
*/
|
|
1816
|
-
this.chipColor = 'primary';
|
|
1663
|
+
this.chipColor = input('primary');
|
|
1817
1664
|
/**
|
|
1818
1665
|
* Sets the color of the chips' cross icon. Type of SuisColor. By default set to 'white'.
|
|
1819
1666
|
*/
|
|
1820
|
-
this.chipIconColor = 'white';
|
|
1667
|
+
this.chipIconColor = input('white');
|
|
1821
1668
|
}
|
|
1822
1669
|
writeValue(obj) {
|
|
1823
1670
|
this.values = obj;
|
|
@@ -1825,7 +1672,7 @@ class SuisSelectMultiBase extends SuisSelectBase {
|
|
|
1825
1672
|
this.cdRef.markForCheck();
|
|
1826
1673
|
}
|
|
1827
1674
|
onSelect(value) {
|
|
1828
|
-
if (this.duplicate ||
|
|
1675
|
+
if (this.duplicate() ||
|
|
1829
1676
|
!this.values.some((v) => JSON.stringify(v) === JSON.stringify(value))) {
|
|
1830
1677
|
this.setValue([...this.values, value]);
|
|
1831
1678
|
}
|
|
@@ -1848,21 +1695,15 @@ class SuisSelectMultiBase extends SuisSelectBase {
|
|
|
1848
1695
|
setValue(value) {
|
|
1849
1696
|
this.values = value;
|
|
1850
1697
|
this._onChange(this.values);
|
|
1851
|
-
this.changed.emit();
|
|
1698
|
+
this.changed.emit(this.values);
|
|
1852
1699
|
this.cdRef.markForCheck();
|
|
1853
1700
|
}
|
|
1854
1701
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisSelectMultiBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1855
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
1702
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.7", type: SuisSelectMultiBase, isStandalone: true, inputs: { duplicate: { classPropertyName: "duplicate", publicName: "duplicate", isSignal: true, isRequired: false, transformFunction: null }, chipColor: { classPropertyName: "chipColor", publicName: "chipColor", isSignal: true, isRequired: false, transformFunction: null }, chipIconColor: { classPropertyName: "chipIconColor", publicName: "chipIconColor", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
|
|
1856
1703
|
}
|
|
1857
1704
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisSelectMultiBase, decorators: [{
|
|
1858
1705
|
type: Directive
|
|
1859
|
-
}]
|
|
1860
|
-
type: Input
|
|
1861
|
-
}], chipColor: [{
|
|
1862
|
-
type: Input
|
|
1863
|
-
}], chipIconColor: [{
|
|
1864
|
-
type: Input
|
|
1865
|
-
}] } });
|
|
1706
|
+
}] });
|
|
1866
1707
|
|
|
1867
1708
|
class SuisSelectMultiComponent extends SuisSelectMultiBase {
|
|
1868
1709
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisSelectMultiComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
@@ -1872,7 +1713,7 @@ class SuisSelectMultiComponent extends SuisSelectMultiBase {
|
|
|
1872
1713
|
multi: true,
|
|
1873
1714
|
useExisting: forwardRef(() => SuisSelectMultiComponent),
|
|
1874
1715
|
},
|
|
1875
|
-
], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-select-multi\">\n <suis-select-button-multi\n [invalid]=\"invalid\"\n [readonly]=\"readonly\"\n [expanded]=\"expanded\"\n [clearable]=\"values.length > 0\"\n (expandedChange)=\"onExpand()\"\n (cleared)=\"onClear($event)\"\n >\n @if (!values?.length) {\n {{ placeholder }}\n } @if (values?.length) { @for ( value of values | suisSelectMultiChips :\n options : optionValue : optionLabel; track value; let index = $index)
|
|
1716
|
+
], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-select-multi\">\n <suis-select-button-multi\n [invalid]=\"invalid()\"\n [readonly]=\"readonly()\"\n [expanded]=\"expanded\"\n [clearable]=\"values.length > 0\"\n (expandedChange)=\"onExpand()\"\n (cleared)=\"onClear($event)\"\n >\n @if (!values?.length) {\n {{ placeholder() }}\n } @if (values?.length) { @for ( value of values | suisSelectMultiChips :\n options() : optionValue() : optionLabel(); track value; let index = $index)\n {\n <suis-chip\n [removable]=\"true\"\n [color]=\"chipColor()\"\n [iconColor]=\"chipIconColor()\"\n (remove)=\"onRemove(index)\"\n >\n {{ value }}\n </suis-chip>\n } }\n </suis-select-button-multi>\n @if (expanded) {\n <div class=\"suis-select-multi__list\">\n @if (search()) {\n <input\n #searchInput\n [ngModel]=\"searchPhrase\"\n (ngModelChange)=\"onSearchPhraseChange($event)\"\n class=\"suis-select-multi__list__search\"\n type=\"search\"\n [placeholder]=\"searchPlaceholder()\"\n />\n } @for ( option of options() | suisSelectSortOptions : optionLabel() :\n sortOptions() | suisSelectFilterOptions : searchPhrase : optionLabel();\n track optionTrackBy($index, option)) {\n <suis-select-option\n [option]=\"option\"\n [optionLabel]=\"optionLabel()\"\n [optionValue]=\"optionValue()\"\n [templateRef]=\"suisSelectOption()?.templateRef\"\n [selected]=\"option[optionValue()] | suisSelectMultiIsSelected : values\"\n [checkbox]=\"!duplicate()\"\n (clicked)=\"onSelect(option[optionValue()])\"\n ></suis-select-option>\n }\n </div>\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-select-multi{position:relative}.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: "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: SuisChipComponent, selector: "suis-chip", inputs: ["color", "iconColor", "removable"], outputs: ["remove"] }, { kind: "component", type: SuisSelectOptionComponent, selector: "suis-select-option", inputs: ["option", "templateRef", "optionValue", "optionLabel", "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" }, { kind: "component", type: SuisSelectButtonMultiComponent, selector: "suis-select-button-multi" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1876
1717
|
}
|
|
1877
1718
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisSelectMultiComponent, decorators: [{
|
|
1878
1719
|
type: Component,
|
|
@@ -1891,7 +1732,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
1891
1732
|
multi: true,
|
|
1892
1733
|
useExisting: forwardRef(() => SuisSelectMultiComponent),
|
|
1893
1734
|
},
|
|
1894
|
-
], template: "<div class=\"suis-select-multi\">\n <suis-select-button-multi\n [invalid]=\"invalid\"\n [readonly]=\"readonly\"\n [expanded]=\"expanded\"\n [clearable]=\"values.length > 0\"\n (expandedChange)=\"onExpand()\"\n (cleared)=\"onClear($event)\"\n >\n @if (!values?.length) {\n {{ placeholder }}\n } @if (values?.length) { @for ( value of values | suisSelectMultiChips :\n options : optionValue : optionLabel; track value; let index = $index)
|
|
1735
|
+
], template: "<div class=\"suis-select-multi\">\n <suis-select-button-multi\n [invalid]=\"invalid()\"\n [readonly]=\"readonly()\"\n [expanded]=\"expanded\"\n [clearable]=\"values.length > 0\"\n (expandedChange)=\"onExpand()\"\n (cleared)=\"onClear($event)\"\n >\n @if (!values?.length) {\n {{ placeholder() }}\n } @if (values?.length) { @for ( value of values | suisSelectMultiChips :\n options() : optionValue() : optionLabel(); track value; let index = $index)\n {\n <suis-chip\n [removable]=\"true\"\n [color]=\"chipColor()\"\n [iconColor]=\"chipIconColor()\"\n (remove)=\"onRemove(index)\"\n >\n {{ value }}\n </suis-chip>\n } }\n </suis-select-button-multi>\n @if (expanded) {\n <div class=\"suis-select-multi__list\">\n @if (search()) {\n <input\n #searchInput\n [ngModel]=\"searchPhrase\"\n (ngModelChange)=\"onSearchPhraseChange($event)\"\n class=\"suis-select-multi__list__search\"\n type=\"search\"\n [placeholder]=\"searchPlaceholder()\"\n />\n } @for ( option of options() | suisSelectSortOptions : optionLabel() :\n sortOptions() | suisSelectFilterOptions : searchPhrase : optionLabel();\n track optionTrackBy($index, option)) {\n <suis-select-option\n [option]=\"option\"\n [optionLabel]=\"optionLabel()\"\n [optionValue]=\"optionValue()\"\n [templateRef]=\"suisSelectOption()?.templateRef\"\n [selected]=\"option[optionValue()] | suisSelectMultiIsSelected : values\"\n [checkbox]=\"!duplicate()\"\n (clicked)=\"onSelect(option[optionValue()])\"\n ></suis-select-option>\n }\n </div>\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-select-multi{position:relative}.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"] }]
|
|
1895
1736
|
}] });
|
|
1896
1737
|
|
|
1897
1738
|
class SuisSelectMultiGroupChipsPipe {
|
|
@@ -1920,19 +1761,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
1920
1761
|
class SuisSelectMultiGroupComponent extends SuisSelectMultiBase {
|
|
1921
1762
|
constructor() {
|
|
1922
1763
|
super(...arguments);
|
|
1764
|
+
/** @internal */
|
|
1765
|
+
this.suisSelectGroupOption = contentChild(SuisSelectGroupOptionDirective);
|
|
1923
1766
|
/**
|
|
1924
1767
|
* Group options displayed in dropdown list. Type of SuisSelectGroupOption[].
|
|
1925
1768
|
*/
|
|
1926
|
-
this.groupOptions = [];
|
|
1769
|
+
this.groupOptions = input([]);
|
|
1927
1770
|
}
|
|
1928
1771
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisSelectMultiGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1929
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisSelectMultiGroupComponent, isStandalone: true, selector: "suis-select-multi-group", inputs: { groupOptions: "groupOptions" }, providers: [
|
|
1772
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisSelectMultiGroupComponent, isStandalone: true, selector: "suis-select-multi-group", inputs: { groupOptions: { classPropertyName: "groupOptions", publicName: "groupOptions", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
1930
1773
|
{
|
|
1931
1774
|
provide: NG_VALUE_ACCESSOR,
|
|
1932
1775
|
multi: true,
|
|
1933
1776
|
useExisting: forwardRef(() => SuisSelectMultiGroupComponent),
|
|
1934
1777
|
},
|
|
1935
|
-
], queries: [{ propertyName: "suisSelectGroupOption", first: true, predicate: SuisSelectGroupOptionDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-select-multi-group\">\n <suis-select-button-multi\n [invalid]=\"invalid\"\n [readonly]=\"readonly\"\n [expanded]=\"expanded\"\n [clearable]=\"values.length > 0\"\n (expandedChange)=\"onExpand()\"\n (cleared)=\"onClear($event)\"\n >\n @if (!values?.length) {\n {{ placeholder }}\n } @if (values?.length) { @for ( value of values | suisSelectMultiGroupChips\n : groupOptions : optionValue : optionLabel; track value; let index
|
|
1778
|
+
], queries: [{ propertyName: "suisSelectGroupOption", first: true, predicate: SuisSelectGroupOptionDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-select-multi-group\">\n <suis-select-button-multi\n [invalid]=\"invalid()\"\n [readonly]=\"readonly()\"\n [expanded]=\"expanded\"\n [clearable]=\"values.length > 0\"\n (expandedChange)=\"onExpand()\"\n (cleared)=\"onClear($event)\"\n >\n @if (!values?.length) {\n {{ placeholder() }}\n } @if (values?.length) { @for ( value of values | suisSelectMultiGroupChips\n : groupOptions() : optionValue() : optionLabel(); track value; let index =\n $index) {\n <suis-chip\n [removable]=\"true\"\n [color]=\"chipColor()\"\n [iconColor]=\"chipIconColor()\"\n (remove)=\"onRemove(index)\"\n >\n {{ value }}\n </suis-chip>\n } }\n </suis-select-button-multi>\n @if (expanded) {\n <div class=\"suis-select-multi-group__list\">\n @if (search()) {\n <input\n #searchInput\n [ngModel]=\"searchPhrase\"\n (ngModelChange)=\"onSearchPhraseChange($event)\"\n class=\"suis-select-multi-group__list__search\"\n type=\"search\"\n [placeholder]=\"searchPlaceholder()\"\n />\n } @for ( group of groupOptions() | suisSelectSortGroupOptions :\n sortOptions() | suisSelectFilterGroupOptions : searchPhrase : optionLabel()\n ; track group) {\n <suis-select-group-option\n [option]=\"group\"\n [templateRef]=\"suisSelectGroupOption()?.templateRef\"\n ></suis-select-group-option>\n @for ( option of group.children | suisSelectSortOptions : optionLabel() :\n sortOptions() | suisSelectFilterOptions : searchPhrase : optionLabel();\n track optionTrackBy($index, option)) {\n <suis-select-option\n [option]=\"option\"\n [optionLabel]=\"optionLabel()\"\n [optionValue]=\"optionValue()\"\n [templateRef]=\"suisSelectOption()?.templateRef\"\n [selected]=\"option[optionValue()] | suisSelectMultiIsSelected : values\"\n [checkbox]=\"!duplicate()\"\n (clicked)=\"onSelect(option[optionValue()])\"\n ></suis-select-option>\n } }\n </div>\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-select-multi-group{position:relative}.suis-select-multi-group__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-group__list::-webkit-scrollbar{width:.5rem}.suis-select-multi-group__list::-webkit-scrollbar-track{background:#f5f6fa}.suis-select-multi-group__list::-webkit-scrollbar-thumb{background:#dcdde1}.suis-select-multi-group__list::-webkit-scrollbar-thumb:hover{background:#bcbcbc}.suis-select-multi-group__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem;font-size:.875rem}.suis-select-multi-group__list__search:focus{outline:none}\n"], dependencies: [{ 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: SuisChipComponent, selector: "suis-chip", inputs: ["color", "iconColor", "removable"], outputs: ["remove"] }, { kind: "component", type: SuisSelectButtonMultiComponent, selector: "suis-select-button-multi" }, { kind: "component", type: SuisSelectOptionComponent, selector: "suis-select-option", inputs: ["option", "templateRef", "optionValue", "optionLabel", "selected", "checkbox"], outputs: ["clicked"] }, { kind: "component", type: SuisSelectGroupOptionComponent, selector: "suis-select-group-option", inputs: ["option", "templateRef"] }, { kind: "pipe", type: SuisSelectSortOptionsPipe, name: "suisSelectSortOptions" }, { kind: "pipe", type: SuisSelectMultiGroupChipsPipe, name: "suisSelectMultiGroupChips" }, { kind: "pipe", type: SuisSelectFilterOptionsPipe, name: "suisSelectFilterOptions" }, { kind: "pipe", type: SuisSelectFilterGroupOptionsPipe, name: "suisSelectFilterGroupOptions" }, { kind: "pipe", type: SuisSelectMultiIsSelectedPipe, name: "suisSelectMultiIsSelected" }, { kind: "pipe", type: SuisSelectSortGroupOptionsPipe, name: "suisSelectSortGroupOptions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1936
1779
|
}
|
|
1937
1780
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisSelectMultiGroupComponent, decorators: [{
|
|
1938
1781
|
type: Component,
|
|
@@ -1954,13 +1797,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
1954
1797
|
multi: true,
|
|
1955
1798
|
useExisting: forwardRef(() => SuisSelectMultiGroupComponent),
|
|
1956
1799
|
},
|
|
1957
|
-
], template: "<div class=\"suis-select-multi-group\">\n <suis-select-button-multi\n [invalid]=\"invalid\"\n [readonly]=\"readonly\"\n [expanded]=\"expanded\"\n [clearable]=\"values.length > 0\"\n (expandedChange)=\"onExpand()\"\n (cleared)=\"onClear($event)\"\n >\n @if (!values?.length) {\n {{ placeholder }}\n } @if (values?.length) { @for ( value of values | suisSelectMultiGroupChips\n : groupOptions : optionValue : optionLabel; track value; let index
|
|
1958
|
-
}]
|
|
1959
|
-
type: ContentChild,
|
|
1960
|
-
args: [SuisSelectGroupOptionDirective]
|
|
1961
|
-
}], groupOptions: [{
|
|
1962
|
-
type: Input
|
|
1963
|
-
}] } });
|
|
1800
|
+
], template: "<div class=\"suis-select-multi-group\">\n <suis-select-button-multi\n [invalid]=\"invalid()\"\n [readonly]=\"readonly()\"\n [expanded]=\"expanded\"\n [clearable]=\"values.length > 0\"\n (expandedChange)=\"onExpand()\"\n (cleared)=\"onClear($event)\"\n >\n @if (!values?.length) {\n {{ placeholder() }}\n } @if (values?.length) { @for ( value of values | suisSelectMultiGroupChips\n : groupOptions() : optionValue() : optionLabel(); track value; let index =\n $index) {\n <suis-chip\n [removable]=\"true\"\n [color]=\"chipColor()\"\n [iconColor]=\"chipIconColor()\"\n (remove)=\"onRemove(index)\"\n >\n {{ value }}\n </suis-chip>\n } }\n </suis-select-button-multi>\n @if (expanded) {\n <div class=\"suis-select-multi-group__list\">\n @if (search()) {\n <input\n #searchInput\n [ngModel]=\"searchPhrase\"\n (ngModelChange)=\"onSearchPhraseChange($event)\"\n class=\"suis-select-multi-group__list__search\"\n type=\"search\"\n [placeholder]=\"searchPlaceholder()\"\n />\n } @for ( group of groupOptions() | suisSelectSortGroupOptions :\n sortOptions() | suisSelectFilterGroupOptions : searchPhrase : optionLabel()\n ; track group) {\n <suis-select-group-option\n [option]=\"group\"\n [templateRef]=\"suisSelectGroupOption()?.templateRef\"\n ></suis-select-group-option>\n @for ( option of group.children | suisSelectSortOptions : optionLabel() :\n sortOptions() | suisSelectFilterOptions : searchPhrase : optionLabel();\n track optionTrackBy($index, option)) {\n <suis-select-option\n [option]=\"option\"\n [optionLabel]=\"optionLabel()\"\n [optionValue]=\"optionValue()\"\n [templateRef]=\"suisSelectOption()?.templateRef\"\n [selected]=\"option[optionValue()] | suisSelectMultiIsSelected : values\"\n [checkbox]=\"!duplicate()\"\n (clicked)=\"onSelect(option[optionValue()])\"\n ></suis-select-option>\n } }\n </div>\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-select-multi-group{position:relative}.suis-select-multi-group__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-group__list::-webkit-scrollbar{width:.5rem}.suis-select-multi-group__list::-webkit-scrollbar-track{background:#f5f6fa}.suis-select-multi-group__list::-webkit-scrollbar-thumb{background:#dcdde1}.suis-select-multi-group__list::-webkit-scrollbar-thumb:hover{background:#bcbcbc}.suis-select-multi-group__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem;font-size:.875rem}.suis-select-multi-group__list__search:focus{outline:none}\n"] }]
|
|
1801
|
+
}] });
|
|
1964
1802
|
|
|
1965
1803
|
class SuisSelectModule {
|
|
1966
1804
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
@@ -2026,43 +1864,52 @@ class SuisPaginationComponent {
|
|
|
2026
1864
|
/**
|
|
2027
1865
|
* Number of the maximum page that can be reached based on totalItems and perPage values.
|
|
2028
1866
|
*/
|
|
2029
|
-
this.maxPage =
|
|
1867
|
+
this.maxPage = computed(() => Math.ceil(this.totalItems() / this.perPage()));
|
|
2030
1868
|
/**
|
|
2031
1869
|
* Number of the page presented. By default set to 1.
|
|
2032
1870
|
*/
|
|
2033
|
-
this.page = 1;
|
|
1871
|
+
this.page = input(1);
|
|
1872
|
+
this._page = signal(1);
|
|
2034
1873
|
/**
|
|
2035
1874
|
* Number of items presented per page. Value must be included in perPageOptions. By default set to 15.
|
|
2036
1875
|
*/
|
|
2037
|
-
this.perPage = 15;
|
|
1876
|
+
this.perPage = input(15);
|
|
1877
|
+
this._perPage = signal(15);
|
|
2038
1878
|
/**
|
|
2039
1879
|
* Options of perPage dropdown. Be default set to [10, 15, 20, 25].
|
|
2040
1880
|
*/
|
|
2041
|
-
this.perPageOptions = [10, 15, 20, 25];
|
|
1881
|
+
this.perPageOptions = input([10, 15, 20, 25]);
|
|
2042
1882
|
/**
|
|
2043
1883
|
* Number of total items in data source. By default set to 0.
|
|
2044
1884
|
*/
|
|
2045
|
-
this.totalItems = 0;
|
|
1885
|
+
this.totalItems = input(0);
|
|
2046
1886
|
/**
|
|
2047
1887
|
* Sets the of label in "1 'of' 25". By default set to 'of'.
|
|
2048
1888
|
*/
|
|
2049
|
-
this.ofLabel = 'of';
|
|
1889
|
+
this.ofLabel = input('of');
|
|
2050
1890
|
/**
|
|
2051
1891
|
* Sets the items label in "1-10 'of' 25 'items'". By default set to 'Page'.
|
|
2052
1892
|
*/
|
|
2053
|
-
this.itemsLabel = 'items';
|
|
1893
|
+
this.itemsLabel = input('items');
|
|
2054
1894
|
/**
|
|
2055
1895
|
* Emits on page value change.
|
|
2056
1896
|
*/
|
|
2057
|
-
this.pageChange =
|
|
1897
|
+
this.pageChange = output();
|
|
2058
1898
|
/**
|
|
2059
1899
|
* Emits on perPage value change.
|
|
2060
1900
|
*/
|
|
2061
|
-
this.perPageChange =
|
|
1901
|
+
this.perPageChange = output();
|
|
2062
1902
|
/** @internal */
|
|
2063
|
-
this.perPageControl = new FormControl(this.perPage, {
|
|
1903
|
+
this.perPageControl = new FormControl(this.perPage(), {
|
|
2064
1904
|
nonNullable: true,
|
|
2065
1905
|
});
|
|
1906
|
+
effect(() => {
|
|
1907
|
+
this._page.set(this.page());
|
|
1908
|
+
});
|
|
1909
|
+
effect(() => {
|
|
1910
|
+
this._perPage.set(this.perPage());
|
|
1911
|
+
this.perPageControl.setValue(this.perPage());
|
|
1912
|
+
});
|
|
2066
1913
|
}
|
|
2067
1914
|
ngOnInit() {
|
|
2068
1915
|
this.perPageControl.valueChanges
|
|
@@ -2071,32 +1918,26 @@ class SuisPaginationComponent {
|
|
|
2071
1918
|
this.onPerPageChange(value);
|
|
2072
1919
|
});
|
|
2073
1920
|
}
|
|
2074
|
-
ngOnChanges(changes) {
|
|
2075
|
-
if (changes['totalItems'] || changes['perPage']) {
|
|
2076
|
-
this.maxPage = Math.ceil(this.totalItems / this.perPage);
|
|
2077
|
-
this.perPageControl.setValue(this.perPage);
|
|
2078
|
-
}
|
|
2079
|
-
}
|
|
2080
1921
|
next() {
|
|
2081
|
-
if (this.
|
|
2082
|
-
this.
|
|
2083
|
-
this.pageChange.emit(this.
|
|
1922
|
+
if (this._page() < this.maxPage()) {
|
|
1923
|
+
this._page.update((value) => value + 1);
|
|
1924
|
+
this.pageChange.emit(this._page());
|
|
2084
1925
|
}
|
|
2085
1926
|
}
|
|
2086
1927
|
previous() {
|
|
2087
|
-
if (this.
|
|
2088
|
-
this.
|
|
2089
|
-
this.pageChange.emit(this.
|
|
1928
|
+
if (this._page() > 1) {
|
|
1929
|
+
this._page.update((value) => value - 1);
|
|
1930
|
+
this.pageChange.emit(this._page());
|
|
2090
1931
|
}
|
|
2091
1932
|
}
|
|
2092
1933
|
onPerPageChange(value) {
|
|
2093
|
-
this.
|
|
2094
|
-
this.
|
|
2095
|
-
this.pageChange.emit(this.
|
|
2096
|
-
this.perPageChange.emit(this.
|
|
1934
|
+
this._page.set(1);
|
|
1935
|
+
this._perPage.set(value);
|
|
1936
|
+
this.pageChange.emit(this._page());
|
|
1937
|
+
this.perPageChange.emit(this._perPage());
|
|
2097
1938
|
}
|
|
2098
1939
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2099
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1940
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: SuisPaginationComponent, isStandalone: true, selector: "suis-pagination", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, perPage: { classPropertyName: "perPage", publicName: "perPage", isSignal: true, isRequired: false, transformFunction: null }, perPageOptions: { classPropertyName: "perPageOptions", publicName: "perPageOptions", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, ofLabel: { classPropertyName: "ofLabel", publicName: "ofLabel", isSignal: true, isRequired: false, transformFunction: null }, itemsLabel: { classPropertyName: "itemsLabel", publicName: "itemsLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", perPageChange: "perPageChange" }, ngImport: i0, template: "<div class=\"suis-pagination\">\n <div>\n <suis-select\n [formControl]=\"perPageControl\"\n [options]=\"perPageOptions() | suisPaginationPerPageOptions\"\n [search]=\"false\"\n [nullable]=\"false\"\n ></suis-select>\n </div>\n <div class=\"suis-pagination__actions\">\n <suis-button\n color=\"secondary\"\n [disabled]=\"_page() === 1\"\n (click)=\"previous()\"\n >\n <suis-icon [type]=\"'chevron-left'\" color=\"white\"></suis-icon>\n </suis-button>\n <div>\n {{ ofLabel() | suisPaginationPage : _page() : _perPage() : totalItems() }}\n </div>\n <suis-button\n color=\"secondary\"\n [disabled]=\"_page() === maxPage()\"\n (click)=\"next()\"\n >\n <suis-icon [type]=\"'chevron-right'\" color=\"white\"></suis-icon>\n </suis-button>\n </div>\n <div class=\"suis-pagination__items\">\n {{\n ofLabel()\n | suisPaginationItems\n : _page()\n : _perPage()\n : totalItems()\n : itemsLabel()\n }}\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-pagination{display:flex;align-items:center;justify-content:space-between;font-size:.875rem}.suis-pagination__actions{display:flex;align-items:center;justify-content:center}.suis-pagination__items{color:#a4a7b0}.suis-pagination suis-button:first-child{margin-right:1rem}.suis-pagination suis-button:last-child{margin-left:1rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }, { kind: "component", type: SuisButtonComponent, selector: "suis-button" }, { kind: "pipe", type: SuisPaginationPagePipe, name: "suisPaginationPage" }, { kind: "pipe", type: SuisPaginationItemsPipe, name: "suisPaginationItems" }, { kind: "pipe", type: SuisPaginationPerPageOptionsPipe, name: "suisPaginationPerPageOptions" }, { kind: "ngmodule", type: SuisSelectModule }, { kind: "component", type: SuisSelectComponent, selector: "suis-select" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2100
1941
|
}
|
|
2101
1942
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisPaginationComponent, decorators: [{
|
|
2102
1943
|
type: Component,
|
|
@@ -2108,24 +1949,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
2108
1949
|
SuisPaginationItemsPipe,
|
|
2109
1950
|
SuisPaginationPerPageOptionsPipe,
|
|
2110
1951
|
SuisSelectModule,
|
|
2111
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-pagination\">\n <div>\n <suis-select\n [formControl]=\"perPageControl\"\n [options]=\"perPageOptions | suisPaginationPerPageOptions\"\n [search]=\"false\"\n [nullable]=\"false\"\n ></suis-select>\n </div>\n <div class=\"suis-pagination__actions\">\n <suis-button
|
|
2112
|
-
}],
|
|
2113
|
-
type: Input
|
|
2114
|
-
}], perPage: [{
|
|
2115
|
-
type: Input
|
|
2116
|
-
}], perPageOptions: [{
|
|
2117
|
-
type: Input
|
|
2118
|
-
}], totalItems: [{
|
|
2119
|
-
type: Input
|
|
2120
|
-
}], ofLabel: [{
|
|
2121
|
-
type: Input
|
|
2122
|
-
}], itemsLabel: [{
|
|
2123
|
-
type: Input
|
|
2124
|
-
}], pageChange: [{
|
|
2125
|
-
type: Output
|
|
2126
|
-
}], perPageChange: [{
|
|
2127
|
-
type: Output
|
|
2128
|
-
}] } });
|
|
1952
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-pagination\">\n <div>\n <suis-select\n [formControl]=\"perPageControl\"\n [options]=\"perPageOptions() | suisPaginationPerPageOptions\"\n [search]=\"false\"\n [nullable]=\"false\"\n ></suis-select>\n </div>\n <div class=\"suis-pagination__actions\">\n <suis-button\n color=\"secondary\"\n [disabled]=\"_page() === 1\"\n (click)=\"previous()\"\n >\n <suis-icon [type]=\"'chevron-left'\" color=\"white\"></suis-icon>\n </suis-button>\n <div>\n {{ ofLabel() | suisPaginationPage : _page() : _perPage() : totalItems() }}\n </div>\n <suis-button\n color=\"secondary\"\n [disabled]=\"_page() === maxPage()\"\n (click)=\"next()\"\n >\n <suis-icon [type]=\"'chevron-right'\" color=\"white\"></suis-icon>\n </suis-button>\n </div>\n <div class=\"suis-pagination__items\">\n {{\n ofLabel()\n | suisPaginationItems\n : _page()\n : _perPage()\n : totalItems()\n : itemsLabel()\n }}\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-pagination{display:flex;align-items:center;justify-content:space-between;font-size:.875rem}.suis-pagination__actions{display:flex;align-items:center;justify-content:center}.suis-pagination__items{color:#a4a7b0}.suis-pagination suis-button:first-child{margin-right:1rem}.suis-pagination suis-button:last-child{margin-left:1rem}\n"] }]
|
|
1953
|
+
}], ctorParameters: () => [] });
|
|
2129
1954
|
|
|
2130
1955
|
class SuisProgressBarPipe {
|
|
2131
1956
|
transform(value, maxValue) {
|
|
@@ -2149,76 +1974,58 @@ class SuisProgressBarComponent {
|
|
|
2149
1974
|
/**
|
|
2150
1975
|
* The value corresponding to the progress bar. By default set to 0.
|
|
2151
1976
|
*/
|
|
2152
|
-
this.value = 0;
|
|
1977
|
+
this.value = input(0);
|
|
2153
1978
|
/**
|
|
2154
1979
|
* Maximum value of the progress bar. By default set to 100.
|
|
2155
1980
|
*/
|
|
2156
|
-
this.maxValue = 100;
|
|
1981
|
+
this.maxValue = input(100);
|
|
2157
1982
|
/**
|
|
2158
1983
|
* Sets the color of the progress bar. Type of SuisColor. By default set to 'primary'.
|
|
2159
1984
|
*/
|
|
2160
|
-
this.color = 'primary';
|
|
1985
|
+
this.color = input('primary');
|
|
2161
1986
|
/**
|
|
2162
1987
|
* Sets the background color of the progress bar. Type of SuisColor. By default set to 'tertiary'.
|
|
2163
1988
|
*/
|
|
2164
|
-
this.backgroundColor = 'tertiary';
|
|
1989
|
+
this.backgroundColor = input('tertiary');
|
|
2165
1990
|
/**
|
|
2166
1991
|
* Sets the height of the progress bar. Type of SuisSize. By default set to 'md'.
|
|
2167
1992
|
*/
|
|
2168
|
-
this.size = 'md';
|
|
1993
|
+
this.size = input('md');
|
|
2169
1994
|
}
|
|
2170
1995
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2171
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1996
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: SuisProgressBarComponent, isStandalone: true, selector: "suis-progress-bar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"suis-progress-bar\"\n [ngClass]=\"'suis-progress-bar' | suisNgClass : backgroundColor() : size()\"\n>\n <div\n class=\"suis-progress-bar__progress\"\n [style]=\"{ width: value() | suisProgressBar : maxValue() }\"\n [ngClass]=\"'suis-progress-bar__progress' | suisNgClass : color() : size()\"\n ></div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-progress-bar{width:100%}.suis-progress-bar,.suis-progress-bar__progress{border-radius:1rem}.suis-progress-bar--primary,.suis-progress-bar__progress--primary{background-color:#192a56}.suis-progress-bar--secondary,.suis-progress-bar__progress--secondary{background-color:#273c75}.suis-progress-bar--tertiary,.suis-progress-bar__progress--tertiary{background-color:#dcdde1}.suis-progress-bar--complementary,.suis-progress-bar__progress--complementary{background-color:#f5f6fa}.suis-progress-bar--success,.suis-progress-bar__progress--success{background-color:#2ed573}.suis-progress-bar--warning,.suis-progress-bar__progress--warning{background-color:#ffa502}.suis-progress-bar--danger,.suis-progress-bar__progress--danger{background-color:#ff4757}.suis-progress-bar--white,.suis-progress-bar__progress--white{background-color:#fff}.suis-progress-bar--gray,.suis-progress-bar__progress--gray{background-color:#bcbcbc}.suis-progress-bar--dark,.suis-progress-bar__progress--dark{background-color:#000}.suis-progress-bar--xs,.suis-progress-bar__progress--xs{height:.375rem}.suis-progress-bar--sm,.suis-progress-bar__progress--sm{height:.5rem}.suis-progress-bar--md,.suis-progress-bar__progress--md{height:.625rem}.suis-progress-bar--lg,.suis-progress-bar__progress--lg{height:.75rem}.suis-progress-bar--xl,.suis-progress-bar__progress--xl{height:1rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }, { kind: "pipe", type: SuisProgressBarPipe, name: "suisProgressBar" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2172
1997
|
}
|
|
2173
1998
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisProgressBarComponent, decorators: [{
|
|
2174
1999
|
type: Component,
|
|
2175
|
-
args: [{ selector: 'suis-progress-bar', imports: [NgClass, SuisNgClassPipe, SuisProgressBarPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"suis-progress-bar\"\n [ngClass]=\"'suis-progress-bar' | suisNgClass : backgroundColor : size\"\n>\n <div\n class=\"suis-progress-bar__progress\"\n [style]=\"{ width: value | suisProgressBar : maxValue }\"\n [ngClass]=\"'suis-progress-bar__progress' | suisNgClass : color : size\"\n ></div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-progress-bar{width:100%}.suis-progress-bar,.suis-progress-bar__progress{border-radius:1rem}.suis-progress-bar--primary,.suis-progress-bar__progress--primary{background-color:#192a56}.suis-progress-bar--secondary,.suis-progress-bar__progress--secondary{background-color:#273c75}.suis-progress-bar--tertiary,.suis-progress-bar__progress--tertiary{background-color:#dcdde1}.suis-progress-bar--complementary,.suis-progress-bar__progress--complementary{background-color:#f5f6fa}.suis-progress-bar--success,.suis-progress-bar__progress--success{background-color:#2ed573}.suis-progress-bar--warning,.suis-progress-bar__progress--warning{background-color:#ffa502}.suis-progress-bar--danger,.suis-progress-bar__progress--danger{background-color:#ff4757}.suis-progress-bar--white,.suis-progress-bar__progress--white{background-color:#fff}.suis-progress-bar--gray,.suis-progress-bar__progress--gray{background-color:#bcbcbc}.suis-progress-bar--dark,.suis-progress-bar__progress--dark{background-color:#000}.suis-progress-bar--xs,.suis-progress-bar__progress--xs{height:.375rem}.suis-progress-bar--sm,.suis-progress-bar__progress--sm{height:.5rem}.suis-progress-bar--md,.suis-progress-bar__progress--md{height:.625rem}.suis-progress-bar--lg,.suis-progress-bar__progress--lg{height:.75rem}.suis-progress-bar--xl,.suis-progress-bar__progress--xl{height:1rem}\n"] }]
|
|
2176
|
-
}]
|
|
2177
|
-
type: Input
|
|
2178
|
-
}], maxValue: [{
|
|
2179
|
-
type: Input
|
|
2180
|
-
}], color: [{
|
|
2181
|
-
type: Input
|
|
2182
|
-
}], backgroundColor: [{
|
|
2183
|
-
type: Input
|
|
2184
|
-
}], size: [{
|
|
2185
|
-
type: Input
|
|
2186
|
-
}] } });
|
|
2000
|
+
args: [{ selector: 'suis-progress-bar', imports: [NgClass, SuisNgClassPipe, SuisProgressBarPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"suis-progress-bar\"\n [ngClass]=\"'suis-progress-bar' | suisNgClass : backgroundColor() : size()\"\n>\n <div\n class=\"suis-progress-bar__progress\"\n [style]=\"{ width: value() | suisProgressBar : maxValue() }\"\n [ngClass]=\"'suis-progress-bar__progress' | suisNgClass : color() : size()\"\n ></div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-progress-bar{width:100%}.suis-progress-bar,.suis-progress-bar__progress{border-radius:1rem}.suis-progress-bar--primary,.suis-progress-bar__progress--primary{background-color:#192a56}.suis-progress-bar--secondary,.suis-progress-bar__progress--secondary{background-color:#273c75}.suis-progress-bar--tertiary,.suis-progress-bar__progress--tertiary{background-color:#dcdde1}.suis-progress-bar--complementary,.suis-progress-bar__progress--complementary{background-color:#f5f6fa}.suis-progress-bar--success,.suis-progress-bar__progress--success{background-color:#2ed573}.suis-progress-bar--warning,.suis-progress-bar__progress--warning{background-color:#ffa502}.suis-progress-bar--danger,.suis-progress-bar__progress--danger{background-color:#ff4757}.suis-progress-bar--white,.suis-progress-bar__progress--white{background-color:#fff}.suis-progress-bar--gray,.suis-progress-bar__progress--gray{background-color:#bcbcbc}.suis-progress-bar--dark,.suis-progress-bar__progress--dark{background-color:#000}.suis-progress-bar--xs,.suis-progress-bar__progress--xs{height:.375rem}.suis-progress-bar--sm,.suis-progress-bar__progress--sm{height:.5rem}.suis-progress-bar--md,.suis-progress-bar__progress--md{height:.625rem}.suis-progress-bar--lg,.suis-progress-bar__progress--lg{height:.75rem}.suis-progress-bar--xl,.suis-progress-bar__progress--xl{height:1rem}\n"] }]
|
|
2001
|
+
}] });
|
|
2187
2002
|
|
|
2188
2003
|
class SuisSpinnerContainerComponent {
|
|
2189
2004
|
constructor() {
|
|
2190
2005
|
/**
|
|
2191
2006
|
* Sets the size of the spinner. Type of SuisSize. By default set to 'md'.
|
|
2192
2007
|
*/
|
|
2193
|
-
this.size = 'md';
|
|
2008
|
+
this.size = input('md');
|
|
2194
2009
|
/**
|
|
2195
2010
|
* Sets the color of the spinner. Type of SuisColor. By default set to 'primary'.
|
|
2196
2011
|
*/
|
|
2197
|
-
this.color = 'primary';
|
|
2012
|
+
this.color = input('primary');
|
|
2198
2013
|
/**
|
|
2199
2014
|
* Adds blur effect to the container background. By default set to false.
|
|
2200
2015
|
*/
|
|
2201
|
-
this.blur = false;
|
|
2016
|
+
this.blur = input(false);
|
|
2202
2017
|
/**
|
|
2203
2018
|
* Position absolute to the parent element (must have relative position). By default set to false.
|
|
2204
2019
|
*/
|
|
2205
|
-
this.absolute = false;
|
|
2020
|
+
this.absolute = input(false);
|
|
2206
2021
|
}
|
|
2207
2022
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisSpinnerContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2208
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2023
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: SuisSpinnerContainerComponent, isStandalone: true, selector: "suis-spinner-container", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, blur: { classPropertyName: "blur", publicName: "blur", isSignal: true, isRequired: false, transformFunction: null }, absolute: { classPropertyName: "absolute", publicName: "absolute", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"suis-spinner-container\"\n [class.suis-spinner-container--blur]=\"blur()\"\n [class.suis-spinner-container--absolute]=\"absolute()\"\n>\n <suis-spinner [size]=\"size()\" [color]=\"color()\"></suis-spinner>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block;height:100%}.suis-spinner-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.suis-spinner-container--blur{background-color:#ffffff20;-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem)}.suis-spinner-container--absolute{position:absolute;inset:0}\n"], dependencies: [{ kind: "component", type: SuisSpinnerComponent, selector: "suis-spinner", inputs: ["size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2209
2024
|
}
|
|
2210
2025
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisSpinnerContainerComponent, decorators: [{
|
|
2211
2026
|
type: Component,
|
|
2212
|
-
args: [{ selector: 'suis-spinner-container', imports: [SuisSpinnerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"suis-spinner-container\"\n [class.suis-spinner-container--blur]=\"blur\"\n [class.suis-spinner-container--absolute]=\"absolute\"\n>\n <suis-spinner [size]=\"size\" [color]=\"color\"></suis-spinner>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block;height:100%}.suis-spinner-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.suis-spinner-container--blur{background-color:#ffffff20;-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem)}.suis-spinner-container--absolute{position:absolute;inset:0}\n"] }]
|
|
2213
|
-
}]
|
|
2214
|
-
type: Input
|
|
2215
|
-
}], color: [{
|
|
2216
|
-
type: Input
|
|
2217
|
-
}], blur: [{
|
|
2218
|
-
type: Input
|
|
2219
|
-
}], absolute: [{
|
|
2220
|
-
type: Input
|
|
2221
|
-
}] } });
|
|
2027
|
+
args: [{ selector: 'suis-spinner-container', imports: [SuisSpinnerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"suis-spinner-container\"\n [class.suis-spinner-container--blur]=\"blur()\"\n [class.suis-spinner-container--absolute]=\"absolute()\"\n>\n <suis-spinner [size]=\"size()\" [color]=\"color()\"></suis-spinner>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block;height:100%}.suis-spinner-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.suis-spinner-container--blur{background-color:#ffffff20;-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem)}.suis-spinner-container--absolute{position:absolute;inset:0}\n"] }]
|
|
2028
|
+
}] });
|
|
2222
2029
|
|
|
2223
2030
|
class SuisTableCellDirective {
|
|
2224
2031
|
constructor() {
|
|
@@ -2241,6 +2048,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
2241
2048
|
|
|
2242
2049
|
class SuisTableColumnDirective {
|
|
2243
2050
|
constructor() {
|
|
2051
|
+
this.cell = contentChild(SuisTableCellDirective);
|
|
2244
2052
|
this._name = '';
|
|
2245
2053
|
this._orderProperty = '';
|
|
2246
2054
|
}
|
|
@@ -2258,7 +2066,7 @@ class SuisTableColumnDirective {
|
|
|
2258
2066
|
this._orderProperty = orderProperty;
|
|
2259
2067
|
}
|
|
2260
2068
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisTableColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2261
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
2069
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.0.7", type: SuisTableColumnDirective, isStandalone: true, selector: "[suisTableColumn]", inputs: { name: ["suisTableColumn", "name"], orderProperty: ["suisTableColumnOrderProperty", "orderProperty"] }, queries: [{ propertyName: "cell", first: true, predicate: SuisTableCellDirective, descendants: true, isSignal: true }], ngImport: i0 }); }
|
|
2262
2070
|
}
|
|
2263
2071
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisTableColumnDirective, decorators: [{
|
|
2264
2072
|
type: Directive,
|
|
@@ -2266,10 +2074,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
2266
2074
|
selector: '[suisTableColumn]',
|
|
2267
2075
|
standalone: true,
|
|
2268
2076
|
}]
|
|
2269
|
-
}], propDecorators: {
|
|
2270
|
-
type: ContentChild,
|
|
2271
|
-
args: [SuisTableCellDirective]
|
|
2272
|
-
}], name: [{
|
|
2077
|
+
}], propDecorators: { name: [{
|
|
2273
2078
|
type: Input,
|
|
2274
2079
|
args: ['suisTableColumn']
|
|
2275
2080
|
}], orderProperty: [{
|
|
@@ -2279,70 +2084,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
2279
2084
|
|
|
2280
2085
|
class SuisTableComponent {
|
|
2281
2086
|
constructor() {
|
|
2087
|
+
/** @internal */
|
|
2088
|
+
this.columns = contentChildren(SuisTableColumnDirective);
|
|
2282
2089
|
/**
|
|
2283
2090
|
* Data items collection. Type of SuisTableDataItem[]. By default set to empty array. Required input.
|
|
2284
2091
|
*/
|
|
2285
|
-
this.data =
|
|
2092
|
+
this.data = input.required();
|
|
2286
2093
|
/**
|
|
2287
2094
|
* Specifies property that data is ordered. By default set to empty string.
|
|
2288
2095
|
*/
|
|
2289
|
-
this.orderBy = '';
|
|
2096
|
+
this.orderBy = input('');
|
|
2097
|
+
this._orderBy = signal('');
|
|
2290
2098
|
/**
|
|
2291
2099
|
* Specifies sort condition. Type of SuisSort - 'asc' and 'desc'. By default set to 'asc'.
|
|
2292
2100
|
*/
|
|
2293
|
-
this.sortBy = 'asc';
|
|
2101
|
+
this.sortBy = input('asc');
|
|
2102
|
+
this._sortBy = signal('asc');
|
|
2294
2103
|
/**
|
|
2295
2104
|
* Shows loading spinner and blurs data. By default set to false.
|
|
2296
2105
|
*/
|
|
2297
|
-
this.loading = false;
|
|
2106
|
+
this.loading = input(false);
|
|
2298
2107
|
/**
|
|
2299
2108
|
* Message shown in table when there is no data to display.
|
|
2300
2109
|
*/
|
|
2301
|
-
this.emptyMessage = 'There is no data to be displayed in the table';
|
|
2110
|
+
this.emptyMessage = input('There is no data to be displayed in the table');
|
|
2302
2111
|
/**
|
|
2303
2112
|
* Emits value on sort condition change.
|
|
2304
2113
|
*/
|
|
2305
|
-
this.sortByChange =
|
|
2114
|
+
this.sortByChange = output();
|
|
2306
2115
|
/**
|
|
2307
2116
|
* Emits value on order property change.
|
|
2308
2117
|
*/
|
|
2309
|
-
this.orderByChange =
|
|
2118
|
+
this.orderByChange = output();
|
|
2119
|
+
effect(() => {
|
|
2120
|
+
this._orderBy.set(this.orderBy());
|
|
2121
|
+
});
|
|
2122
|
+
effect(() => {
|
|
2123
|
+
this._sortBy.set(this.sortBy());
|
|
2124
|
+
});
|
|
2310
2125
|
}
|
|
2311
2126
|
onColumnClick(property) {
|
|
2312
|
-
if (this.
|
|
2313
|
-
this.
|
|
2314
|
-
this.orderByChange.emit(this.
|
|
2127
|
+
if (this._orderBy() !== property) {
|
|
2128
|
+
this._orderBy.set(property);
|
|
2129
|
+
this.orderByChange.emit(this._orderBy());
|
|
2315
2130
|
}
|
|
2316
2131
|
else {
|
|
2317
|
-
this.
|
|
2318
|
-
this.sortByChange.emit(this.
|
|
2132
|
+
this._sortBy.update((value) => (value === 'asc' ? 'desc' : 'asc'));
|
|
2133
|
+
this.sortByChange.emit(this._sortBy());
|
|
2319
2134
|
}
|
|
2320
2135
|
}
|
|
2321
2136
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2322
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", 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: "@if (columns) {\n<table class=\"suis-table\">\n <thead>\n <tr>\n @for (column of columns; track column) {\n <th\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 @if (column.orderProperty && column.orderProperty ===
|
|
2137
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisTableComponent, isStandalone: true, selector: "suis-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, orderBy: { classPropertyName: "orderBy", publicName: "orderBy", isSignal: true, isRequired: false, transformFunction: null }, sortBy: { classPropertyName: "sortBy", publicName: "sortBy", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortByChange: "sortByChange", orderByChange: "orderByChange" }, queries: [{ propertyName: "columns", predicate: SuisTableColumnDirective, isSignal: true }], ngImport: i0, template: "@if (columns()) {\n<table class=\"suis-table\">\n <thead>\n <tr>\n @for (column of columns(); track column) {\n <th\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 @if (column.orderProperty && column.orderProperty === _orderBy()) {\n <suis-icon\n [type]=\"_sortBy() === 'asc' ? 'chevron-down' : 'chevron-up'\"\n size=\"lg\"\n color=\"white\"\n ></suis-icon>\n }\n </div>\n </th>\n } @if (!columns()?.length) {\n <th></th>\n }\n </tr>\n </thead>\n <tbody>\n @for (item of data() || []; track item) {\n <tr>\n @for (column of columns(); track column) {\n <td>\n <ng-container\n *ngTemplateOutlet=\"\n column.cell()!.templateRef;\n context: { $implicit: item }\n \"\n ></ng-container>\n </td>\n }\n </tr>\n } @if (!data()?.length) {\n <tr>\n <td class=\"empty\" [attr.colspan]=\"columns() ? columns().length : 1\">\n {{ loading() ? '' : emptyMessage() }}\n </td>\n </tr>\n } @if (loading()) {\n <suis-spinner-container\n [absolute]=\"true\"\n [blur]=\"true\"\n [color]=\"'secondary'\"\n ></suis-spinner-container>\n }\n </tbody>\n</table>\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-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: 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 }); }
|
|
2323
2138
|
}
|
|
2324
2139
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisTableComponent, decorators: [{
|
|
2325
2140
|
type: Component,
|
|
2326
|
-
args: [{ selector: 'suis-table', imports: [NgTemplateOutlet, SuisIconComponent, SuisSpinnerContainerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (columns) {\n<table class=\"suis-table\">\n <thead>\n <tr>\n @for (column of columns; track column) {\n <th\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 @if (column.orderProperty && column.orderProperty ===
|
|
2327
|
-
}],
|
|
2328
|
-
type: ContentChildren,
|
|
2329
|
-
args: [SuisTableColumnDirective]
|
|
2330
|
-
}], data: [{
|
|
2331
|
-
type: Input,
|
|
2332
|
-
args: [{ required: true }]
|
|
2333
|
-
}], orderBy: [{
|
|
2334
|
-
type: Input
|
|
2335
|
-
}], sortBy: [{
|
|
2336
|
-
type: Input
|
|
2337
|
-
}], loading: [{
|
|
2338
|
-
type: Input
|
|
2339
|
-
}], emptyMessage: [{
|
|
2340
|
-
type: Input
|
|
2341
|
-
}], sortByChange: [{
|
|
2342
|
-
type: Output
|
|
2343
|
-
}], orderByChange: [{
|
|
2344
|
-
type: Output
|
|
2345
|
-
}] } });
|
|
2141
|
+
args: [{ selector: 'suis-table', imports: [NgTemplateOutlet, SuisIconComponent, SuisSpinnerContainerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (columns()) {\n<table class=\"suis-table\">\n <thead>\n <tr>\n @for (column of columns(); track column) {\n <th\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 @if (column.orderProperty && column.orderProperty === _orderBy()) {\n <suis-icon\n [type]=\"_sortBy() === 'asc' ? 'chevron-down' : 'chevron-up'\"\n size=\"lg\"\n color=\"white\"\n ></suis-icon>\n }\n </div>\n </th>\n } @if (!columns()?.length) {\n <th></th>\n }\n </tr>\n </thead>\n <tbody>\n @for (item of data() || []; track item) {\n <tr>\n @for (column of columns(); track column) {\n <td>\n <ng-container\n *ngTemplateOutlet=\"\n column.cell()!.templateRef;\n context: { $implicit: item }\n \"\n ></ng-container>\n </td>\n }\n </tr>\n } @if (!data()?.length) {\n <tr>\n <td class=\"empty\" [attr.colspan]=\"columns() ? columns().length : 1\">\n {{ loading() ? '' : emptyMessage() }}\n </td>\n </tr>\n } @if (loading()) {\n <suis-spinner-container\n [absolute]=\"true\"\n [blur]=\"true\"\n [color]=\"'secondary'\"\n ></suis-spinner-container>\n }\n </tbody>\n</table>\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-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"] }]
|
|
2142
|
+
}], ctorParameters: () => [] });
|
|
2346
2143
|
|
|
2347
2144
|
class SuisTableModule {
|
|
2348
2145
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
@@ -2376,10 +2173,10 @@ class SuisTabDirective {
|
|
|
2376
2173
|
*/
|
|
2377
2174
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
2378
2175
|
this.templateRef = inject((TemplateRef));
|
|
2379
|
-
this.name = '';
|
|
2176
|
+
this.name = input.required({ alias: 'suisTab' });
|
|
2380
2177
|
}
|
|
2381
2178
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisTabDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2382
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
2179
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.7", type: SuisTabDirective, isStandalone: true, selector: "[suisTab]", inputs: { name: { classPropertyName: "name", publicName: "suisTab", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
|
|
2383
2180
|
}
|
|
2384
2181
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisTabDirective, decorators: [{
|
|
2385
2182
|
type: Directive,
|
|
@@ -2387,16 +2184,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
2387
2184
|
selector: '[suisTab]',
|
|
2388
2185
|
standalone: true,
|
|
2389
2186
|
}]
|
|
2390
|
-
}]
|
|
2391
|
-
type: Input,
|
|
2392
|
-
args: [{ required: true, alias: 'suisTab' }]
|
|
2393
|
-
}] } });
|
|
2187
|
+
}] });
|
|
2394
2188
|
|
|
2395
2189
|
class SuisTabActionsPipe {
|
|
2396
2190
|
transform(tabs) {
|
|
2397
2191
|
if (!tabs)
|
|
2398
2192
|
return [];
|
|
2399
|
-
return tabs.
|
|
2193
|
+
return tabs.map((tab) => tab.name());
|
|
2400
2194
|
}
|
|
2401
2195
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisTabActionsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
2402
2196
|
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.7", ngImport: i0, type: SuisTabActionsPipe, isStandalone: true, name: "suisTabActions" }); }
|
|
@@ -2414,7 +2208,7 @@ class SuisTabTemplatePipe {
|
|
|
2414
2208
|
transform(tabs, currentTab) {
|
|
2415
2209
|
if (!tabs)
|
|
2416
2210
|
return null;
|
|
2417
|
-
const tab = tabs.
|
|
2211
|
+
const tab = tabs.find((tab) => tab.name() === currentTab);
|
|
2418
2212
|
if (!tab)
|
|
2419
2213
|
return null;
|
|
2420
2214
|
return tab.templateRef;
|
|
@@ -2432,33 +2226,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
2432
2226
|
|
|
2433
2227
|
class SuisTabsComponent {
|
|
2434
2228
|
constructor() {
|
|
2229
|
+
/** @internal */
|
|
2230
|
+
this.tabs = contentChildren(SuisTabDirective);
|
|
2435
2231
|
/**
|
|
2436
2232
|
* Name of the current displayed tab. Must correspond with the name passed into suisTab directive. By default set to empty string.
|
|
2437
2233
|
*/
|
|
2438
|
-
this.currentTab = '';
|
|
2234
|
+
this.currentTab = input('');
|
|
2235
|
+
this._currentTab = signal('');
|
|
2439
2236
|
/**
|
|
2440
2237
|
* Emits name of the clicked tab.
|
|
2441
2238
|
*/
|
|
2442
|
-
this.tabClicked =
|
|
2239
|
+
this.tabClicked = output();
|
|
2240
|
+
effect(() => {
|
|
2241
|
+
this._currentTab.set(this.currentTab());
|
|
2242
|
+
});
|
|
2443
2243
|
}
|
|
2444
2244
|
onTabActionClick(name) {
|
|
2445
|
-
this.
|
|
2446
|
-
this.tabClicked.emit(
|
|
2245
|
+
this._currentTab.set(name);
|
|
2246
|
+
this.tabClicked.emit(this._currentTab());
|
|
2447
2247
|
}
|
|
2448
2248
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2449
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisTabsComponent, isStandalone: true, selector: "suis-tabs", inputs: { currentTab: "currentTab" }, outputs: { tabClicked: "tabClicked" }, queries: [{ propertyName: "tabs", predicate: SuisTabDirective }], ngImport: i0, template: "<div class=\"suis-tabs\">\n <div class=\"suis-tabs__actions\">\n @for (name of tabs | suisTabActions; track name) {\n <button\n [class.active]=\"name ===
|
|
2249
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisTabsComponent, isStandalone: true, selector: "suis-tabs", inputs: { currentTab: { classPropertyName: "currentTab", publicName: "currentTab", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabClicked: "tabClicked" }, queries: [{ propertyName: "tabs", predicate: SuisTabDirective, isSignal: true }], ngImport: i0, template: "<div class=\"suis-tabs\">\n <div class=\"suis-tabs__actions\">\n @for (name of tabs() | suisTabActions; track name) {\n <button\n [class.active]=\"name === _currentTab()\"\n (click)=\"onTabActionClick(name)\"\n >\n {{ name }}\n </button>\n }\n </div>\n <div class=\"suis-tabs__content\">\n <ng-container\n *ngTemplateOutlet=\"tabs() | suisTabTemplate : _currentTab()\"\n ></ng-container>\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-tabs__actions{width:100%;display:flex}.suis-tabs__actions button{flex:1;border:0;background-color:#fff;border-bottom:.1875rem solid #f5f6fa;margin:0 .5rem;padding:1rem;transition:.5s border-bottom-color ease-in-out}.suis-tabs__actions button:first-child{margin-left:0}.suis-tabs__actions button:last-child{margin-right:0}.suis-tabs__actions button.active{font-weight:500;color:#192a56;border-bottom-color:#192a56}.suis-tabs__actions button:hover{border-bottom-color:#273c75;cursor:pointer}.suis-tabs__content{margin-top:1rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: SuisTabActionsPipe, name: "suisTabActions" }, { kind: "pipe", type: SuisTabTemplatePipe, name: "suisTabTemplate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2450
2250
|
}
|
|
2451
2251
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisTabsComponent, decorators: [{
|
|
2452
2252
|
type: Component,
|
|
2453
|
-
args: [{ selector: 'suis-tabs', imports: [NgTemplateOutlet, SuisTabActionsPipe, SuisTabTemplatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-tabs\">\n <div class=\"suis-tabs__actions\">\n @for (name of tabs | suisTabActions; track name) {\n <button\n [class.active]=\"name ===
|
|
2454
|
-
}],
|
|
2455
|
-
type: ContentChildren,
|
|
2456
|
-
args: [SuisTabDirective]
|
|
2457
|
-
}], currentTab: [{
|
|
2458
|
-
type: Input
|
|
2459
|
-
}], tabClicked: [{
|
|
2460
|
-
type: Output
|
|
2461
|
-
}] } });
|
|
2253
|
+
args: [{ selector: 'suis-tabs', imports: [NgTemplateOutlet, SuisTabActionsPipe, SuisTabTemplatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-tabs\">\n <div class=\"suis-tabs__actions\">\n @for (name of tabs() | suisTabActions; track name) {\n <button\n [class.active]=\"name === _currentTab()\"\n (click)=\"onTabActionClick(name)\"\n >\n {{ name }}\n </button>\n }\n </div>\n <div class=\"suis-tabs__content\">\n <ng-container\n *ngTemplateOutlet=\"tabs() | suisTabTemplate : _currentTab()\"\n ></ng-container>\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-tabs__actions{width:100%;display:flex}.suis-tabs__actions button{flex:1;border:0;background-color:#fff;border-bottom:.1875rem solid #f5f6fa;margin:0 .5rem;padding:1rem;transition:.5s border-bottom-color ease-in-out}.suis-tabs__actions button:first-child{margin-left:0}.suis-tabs__actions button:last-child{margin-right:0}.suis-tabs__actions button.active{font-weight:500;color:#192a56;border-bottom-color:#192a56}.suis-tabs__actions button:hover{border-bottom-color:#273c75;cursor:pointer}.suis-tabs__content{margin-top:1rem}\n"] }]
|
|
2254
|
+
}], ctorParameters: () => [] });
|
|
2462
2255
|
|
|
2463
2256
|
class SuisTabsModule {
|
|
2464
2257
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
@@ -2479,7 +2272,7 @@ class SuisTextAreaComponent extends SuisInputBase {
|
|
|
2479
2272
|
/**
|
|
2480
2273
|
* Placeholder text displayed in input. By default set to empty string.
|
|
2481
2274
|
*/
|
|
2482
|
-
this.placeholder = '';
|
|
2275
|
+
this.placeholder = input('');
|
|
2483
2276
|
/** @internal */
|
|
2484
2277
|
this.value = '';
|
|
2485
2278
|
}
|
|
@@ -2497,13 +2290,13 @@ class SuisTextAreaComponent extends SuisInputBase {
|
|
|
2497
2290
|
this.cdRef.markForCheck();
|
|
2498
2291
|
}
|
|
2499
2292
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisTextAreaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2500
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2293
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: SuisTextAreaComponent, isStandalone: true, selector: "suis-text-area", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
2501
2294
|
{
|
|
2502
2295
|
provide: NG_VALUE_ACCESSOR,
|
|
2503
2296
|
multi: true,
|
|
2504
2297
|
useExisting: forwardRef(() => SuisTextAreaComponent),
|
|
2505
2298
|
},
|
|
2506
|
-
], 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 }); }
|
|
2299
|
+
], 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 }); }
|
|
2507
2300
|
}
|
|
2508
2301
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisTextAreaComponent, decorators: [{
|
|
2509
2302
|
type: Component,
|
|
@@ -2513,10 +2306,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
2513
2306
|
multi: true,
|
|
2514
2307
|
useExisting: forwardRef(() => SuisTextAreaComponent),
|
|
2515
2308
|
},
|
|
2516
|
-
], 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"] }]
|
|
2517
|
-
}]
|
|
2518
|
-
type: Input
|
|
2519
|
-
}] } });
|
|
2309
|
+
], 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"] }]
|
|
2310
|
+
}] });
|
|
2520
2311
|
|
|
2521
2312
|
var SuisTitle;
|
|
2522
2313
|
(function (SuisTitle) {
|
|
@@ -2532,17 +2323,15 @@ class SuisTitleComponent {
|
|
|
2532
2323
|
/**
|
|
2533
2324
|
* Sets level of the header tag. Type of SuisTitle. By default set to H1.
|
|
2534
2325
|
*/
|
|
2535
|
-
this.level = SuisTitle.H1;
|
|
2326
|
+
this.level = input(SuisTitle.H1);
|
|
2536
2327
|
}
|
|
2537
2328
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2538
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisTitleComponent, isStandalone: true, selector: "suis-title", inputs: { level: "level" }, ngImport: i0, template: "@switch (level) { @case (SuisTitle.H1) {\n<h1 class=\"suis-title--h1\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</h1>\n} @case (SuisTitle.H2) {\n<h2 class=\"suis-title--h2\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</h2>\n} @case (SuisTitle.H3) {\n<h3 class=\"suis-title--h3\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</h3>\n} }\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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2329
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisTitleComponent, isStandalone: true, selector: "suis-title", inputs: { level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@switch (level()) { @case (SuisTitle.H1) {\n<h1 class=\"suis-title--h1\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</h1>\n} @case (SuisTitle.H2) {\n<h2 class=\"suis-title--h2\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</h2>\n} @case (SuisTitle.H3) {\n<h3 class=\"suis-title--h3\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</h3>\n} }\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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2539
2330
|
}
|
|
2540
2331
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisTitleComponent, decorators: [{
|
|
2541
2332
|
type: Component,
|
|
2542
|
-
args: [{ selector: 'suis-title', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "@switch (level) { @case (SuisTitle.H1) {\n<h1 class=\"suis-title--h1\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</h1>\n} @case (SuisTitle.H2) {\n<h2 class=\"suis-title--h2\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</h2>\n} @case (SuisTitle.H3) {\n<h3 class=\"suis-title--h3\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</h3>\n} }\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"] }]
|
|
2543
|
-
}]
|
|
2544
|
-
type: Input
|
|
2545
|
-
}] } });
|
|
2333
|
+
args: [{ selector: 'suis-title', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "@switch (level()) { @case (SuisTitle.H1) {\n<h1 class=\"suis-title--h1\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</h1>\n} @case (SuisTitle.H2) {\n<h2 class=\"suis-title--h2\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</h2>\n} @case (SuisTitle.H3) {\n<h3 class=\"suis-title--h3\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</h3>\n} }\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"] }]
|
|
2334
|
+
}] });
|
|
2546
2335
|
|
|
2547
2336
|
class SuisToggleComponent extends SuisCheckboxBase {
|
|
2548
2337
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
@@ -2552,7 +2341,7 @@ class SuisToggleComponent extends SuisCheckboxBase {
|
|
|
2552
2341
|
multi: true,
|
|
2553
2342
|
useExisting: forwardRef(() => SuisToggleComponent),
|
|
2554
2343
|
},
|
|
2555
|
-
], usesInheritance: true, ngImport: i0, template: "<input\n type=\"checkbox\"\n class=\"suis-toggle\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [disabled]=\"readonly\"\n/>\n\n<suis-label\n class=\"suis-toggle__label\"\n [class.suis-toggle__label--invalid]=\"invalid\"\n [class.suis-toggle__label--readonly]=\"readonly\"\n [for]=\"id\"\n [required]=\"required\"\n [pointer]=\"true\"\n [readonly]=\"readonly\"\n (click)=\"onChange($event)\"\n>\n <div\n [tabindex]=\"readonly ? -1 : 0\"\n class=\"suis-toggle__container\"\n [class.suis-toggle__container--invalid]=\"invalid\"\n [class.suis-toggle__container--readonly]=\"readonly\"\n >\n <div\n class=\"suis-toggle__container__thumb\"\n [class.suis-toggle__container__thumb--active]=\"value\"\n [class.suis-toggle__container__thumb--invalid]=\"invalid\"\n [class.suis-toggle__container__thumb--readonly]=\"readonly\"\n ></div>\n </div>\n <ng-content></ng-content>\n</suis-label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:flex}.suis-toggle{display:none}.suis-toggle:checked~suis-label ::ng-deep .suis-toggle__container{border:.0625rem solid #192a56}.suis-toggle__label--invalid{color:#ff4757}.suis-toggle__label--readonly{cursor:not-allowed}.suis-toggle__container{width:2.25rem;height:1.25rem;border:.0625rem solid #dcdde1;border-radius:1rem;display:flex;align-items:center;margin-right:.5rem;background-color:#fff}.suis-toggle__container:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-toggle__container--readonly{border:.0625rem solid #dcdde1;cursor:not-allowed}.suis-toggle__container--readonly:focus{box-shadow:none}.suis-toggle__container--invalid{border:.0625rem solid #ff4757}.suis-toggle__container--invalid:focus{box-shadow:0 2px 5px #ff4757bf}.suis-toggle__container__thumb{border-radius:100%;height:.75rem;width:.75rem;background-color:#dcdde1;transform:translate(.25rem);transition:.25s ease-in-out}.suis-toggle__container__thumb--invalid{background-color:#ff4757d9}.suis-toggle__container__thumb--active{background-color:#192a56;transform:translate(1.125rem)}.suis-toggle__container__thumb--readonly{background-color:#dcdde1}\n"], dependencies: [{ kind: "component", type: SuisLabelComponent, selector: "suis-label", inputs: ["for", "required", "pointer", "readonly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2344
|
+
], usesInheritance: true, ngImport: i0, template: "<input\n type=\"checkbox\"\n class=\"suis-toggle\"\n [attr.id]=\"id()\"\n [attr.name]=\"name()\"\n [value]=\"value\"\n [disabled]=\"readonly()\"\n/>\n\n<suis-label\n class=\"suis-toggle__label\"\n [class.suis-toggle__label--invalid]=\"invalid()\"\n [class.suis-toggle__label--readonly]=\"readonly()\"\n [for]=\"id()\"\n [required]=\"required()\"\n [pointer]=\"true\"\n [readonly]=\"readonly()\"\n (click)=\"onChange($event)\"\n>\n <div\n [tabindex]=\"readonly() ? -1 : 0\"\n class=\"suis-toggle__container\"\n [class.suis-toggle__container--invalid]=\"invalid()\"\n [class.suis-toggle__container--readonly]=\"readonly()\"\n >\n <div\n class=\"suis-toggle__container__thumb\"\n [class.suis-toggle__container__thumb--active]=\"value\"\n [class.suis-toggle__container__thumb--invalid]=\"invalid()\"\n [class.suis-toggle__container__thumb--readonly]=\"readonly()\"\n ></div>\n </div>\n <ng-content></ng-content>\n</suis-label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:flex}.suis-toggle{display:none}.suis-toggle:checked~suis-label ::ng-deep .suis-toggle__container{border:.0625rem solid #192a56}.suis-toggle__label--invalid{color:#ff4757}.suis-toggle__label--readonly{cursor:not-allowed}.suis-toggle__container{width:2.25rem;height:1.25rem;border:.0625rem solid #dcdde1;border-radius:1rem;display:flex;align-items:center;margin-right:.5rem;background-color:#fff}.suis-toggle__container:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-toggle__container--readonly{border:.0625rem solid #dcdde1;cursor:not-allowed}.suis-toggle__container--readonly:focus{box-shadow:none}.suis-toggle__container--invalid{border:.0625rem solid #ff4757}.suis-toggle__container--invalid:focus{box-shadow:0 2px 5px #ff4757bf}.suis-toggle__container__thumb{border-radius:100%;height:.75rem;width:.75rem;background-color:#dcdde1;transform:translate(.25rem);transition:.25s ease-in-out}.suis-toggle__container__thumb--invalid{background-color:#ff4757d9}.suis-toggle__container__thumb--active{background-color:#192a56;transform:translate(1.125rem)}.suis-toggle__container__thumb--readonly{background-color:#dcdde1}\n"], dependencies: [{ kind: "component", type: SuisLabelComponent, selector: "suis-label", inputs: ["for", "required", "pointer", "readonly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2556
2345
|
}
|
|
2557
2346
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisToggleComponent, decorators: [{
|
|
2558
2347
|
type: Component,
|
|
@@ -2562,7 +2351,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
2562
2351
|
multi: true,
|
|
2563
2352
|
useExisting: forwardRef(() => SuisToggleComponent),
|
|
2564
2353
|
},
|
|
2565
|
-
], template: "<input\n type=\"checkbox\"\n class=\"suis-toggle\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [disabled]=\"readonly\"\n/>\n\n<suis-label\n class=\"suis-toggle__label\"\n [class.suis-toggle__label--invalid]=\"invalid\"\n [class.suis-toggle__label--readonly]=\"readonly\"\n [for]=\"id\"\n [required]=\"required\"\n [pointer]=\"true\"\n [readonly]=\"readonly\"\n (click)=\"onChange($event)\"\n>\n <div\n [tabindex]=\"readonly ? -1 : 0\"\n class=\"suis-toggle__container\"\n [class.suis-toggle__container--invalid]=\"invalid\"\n [class.suis-toggle__container--readonly]=\"readonly\"\n >\n <div\n class=\"suis-toggle__container__thumb\"\n [class.suis-toggle__container__thumb--active]=\"value\"\n [class.suis-toggle__container__thumb--invalid]=\"invalid\"\n [class.suis-toggle__container__thumb--readonly]=\"readonly\"\n ></div>\n </div>\n <ng-content></ng-content>\n</suis-label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:flex}.suis-toggle{display:none}.suis-toggle:checked~suis-label ::ng-deep .suis-toggle__container{border:.0625rem solid #192a56}.suis-toggle__label--invalid{color:#ff4757}.suis-toggle__label--readonly{cursor:not-allowed}.suis-toggle__container{width:2.25rem;height:1.25rem;border:.0625rem solid #dcdde1;border-radius:1rem;display:flex;align-items:center;margin-right:.5rem;background-color:#fff}.suis-toggle__container:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-toggle__container--readonly{border:.0625rem solid #dcdde1;cursor:not-allowed}.suis-toggle__container--readonly:focus{box-shadow:none}.suis-toggle__container--invalid{border:.0625rem solid #ff4757}.suis-toggle__container--invalid:focus{box-shadow:0 2px 5px #ff4757bf}.suis-toggle__container__thumb{border-radius:100%;height:.75rem;width:.75rem;background-color:#dcdde1;transform:translate(.25rem);transition:.25s ease-in-out}.suis-toggle__container__thumb--invalid{background-color:#ff4757d9}.suis-toggle__container__thumb--active{background-color:#192a56;transform:translate(1.125rem)}.suis-toggle__container__thumb--readonly{background-color:#dcdde1}\n"] }]
|
|
2354
|
+
], template: "<input\n type=\"checkbox\"\n class=\"suis-toggle\"\n [attr.id]=\"id()\"\n [attr.name]=\"name()\"\n [value]=\"value\"\n [disabled]=\"readonly()\"\n/>\n\n<suis-label\n class=\"suis-toggle__label\"\n [class.suis-toggle__label--invalid]=\"invalid()\"\n [class.suis-toggle__label--readonly]=\"readonly()\"\n [for]=\"id()\"\n [required]=\"required()\"\n [pointer]=\"true\"\n [readonly]=\"readonly()\"\n (click)=\"onChange($event)\"\n>\n <div\n [tabindex]=\"readonly() ? -1 : 0\"\n class=\"suis-toggle__container\"\n [class.suis-toggle__container--invalid]=\"invalid()\"\n [class.suis-toggle__container--readonly]=\"readonly()\"\n >\n <div\n class=\"suis-toggle__container__thumb\"\n [class.suis-toggle__container__thumb--active]=\"value\"\n [class.suis-toggle__container__thumb--invalid]=\"invalid()\"\n [class.suis-toggle__container__thumb--readonly]=\"readonly()\"\n ></div>\n </div>\n <ng-content></ng-content>\n</suis-label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:flex}.suis-toggle{display:none}.suis-toggle:checked~suis-label ::ng-deep .suis-toggle__container{border:.0625rem solid #192a56}.suis-toggle__label--invalid{color:#ff4757}.suis-toggle__label--readonly{cursor:not-allowed}.suis-toggle__container{width:2.25rem;height:1.25rem;border:.0625rem solid #dcdde1;border-radius:1rem;display:flex;align-items:center;margin-right:.5rem;background-color:#fff}.suis-toggle__container:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-toggle__container--readonly{border:.0625rem solid #dcdde1;cursor:not-allowed}.suis-toggle__container--readonly:focus{box-shadow:none}.suis-toggle__container--invalid{border:.0625rem solid #ff4757}.suis-toggle__container--invalid:focus{box-shadow:0 2px 5px #ff4757bf}.suis-toggle__container__thumb{border-radius:100%;height:.75rem;width:.75rem;background-color:#dcdde1;transform:translate(.25rem);transition:.25s ease-in-out}.suis-toggle__container__thumb--invalid{background-color:#ff4757d9}.suis-toggle__container__thumb--active{background-color:#192a56;transform:translate(1.125rem)}.suis-toggle__container__thumb--readonly{background-color:#dcdde1}\n"] }]
|
|
2566
2355
|
}] });
|
|
2567
2356
|
|
|
2568
2357
|
class SuisToolbarComponent {
|
|
@@ -2570,21 +2359,43 @@ class SuisToolbarComponent {
|
|
|
2570
2359
|
/**
|
|
2571
2360
|
* Adds a padding around the content. By default set to false.
|
|
2572
2361
|
*/
|
|
2573
|
-
this.spacing = false;
|
|
2362
|
+
this.spacing = input(false);
|
|
2574
2363
|
}
|
|
2575
2364
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2576
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2365
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: SuisToolbarComponent, isStandalone: true, selector: "suis-toolbar", inputs: { spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"suis-toolbar\" [class.suis-toolbar--spacing]=\"spacing()\">\n <div>\n <ng-content select=\"[suisToolbarLeft]\"></ng-content>\n </div>\n <div>\n <ng-content select=\"[suisToolbarCenter]\"></ng-content>\n </div>\n <div>\n <ng-content select=\"[suisToolbarRight]\"></ng-content>\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-toolbar{width:100%;display:flex;align-items:center;justify-content:space-between;background-color:#fff;border-bottom:.0625rem solid #dcdde1}.suis-toolbar--spacing{padding:.75rem 1rem}@media (min-width: 768px){.suis-toolbar--spacing{padding:1rem 1.25rem}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2577
2366
|
}
|
|
2578
2367
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisToolbarComponent, decorators: [{
|
|
2579
2368
|
type: Component,
|
|
2580
|
-
args: [{ selector: 'suis-toolbar', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-toolbar\" [class.suis-toolbar--spacing]=\"spacing\">\n <div>\n <ng-content select=\"[suisToolbarLeft]\"></ng-content>\n </div>\n <div>\n <ng-content select=\"[suisToolbarCenter]\"></ng-content>\n </div>\n <div>\n <ng-content select=\"[suisToolbarRight]\"></ng-content>\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-toolbar{width:100%;display:flex;align-items:center;justify-content:space-between;background-color:#fff;border-bottom:.0625rem solid #dcdde1}.suis-toolbar--spacing{padding:.75rem 1rem}@media (min-width: 768px){.suis-toolbar--spacing{padding:1rem 1.25rem}}\n"] }]
|
|
2581
|
-
}]
|
|
2582
|
-
type: Input
|
|
2583
|
-
}] } });
|
|
2369
|
+
args: [{ selector: 'suis-toolbar', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-toolbar\" [class.suis-toolbar--spacing]=\"spacing()\">\n <div>\n <ng-content select=\"[suisToolbarLeft]\"></ng-content>\n </div>\n <div>\n <ng-content select=\"[suisToolbarCenter]\"></ng-content>\n </div>\n <div>\n <ng-content select=\"[suisToolbarRight]\"></ng-content>\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-toolbar{width:100%;display:flex;align-items:center;justify-content:space-between;background-color:#fff;border-bottom:.0625rem solid #dcdde1}.suis-toolbar--spacing{padding:.75rem 1rem}@media (min-width: 768px){.suis-toolbar--spacing{padding:1rem 1.25rem}}\n"] }]
|
|
2370
|
+
}] });
|
|
2584
2371
|
|
|
2585
2372
|
class SuisButtonLinkComponent extends SuisButtonBase {
|
|
2373
|
+
constructor() {
|
|
2374
|
+
super(...arguments);
|
|
2375
|
+
/**
|
|
2376
|
+
* Sets routerLink of the anchor tag. No default value.
|
|
2377
|
+
*/
|
|
2378
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
2379
|
+
this.routerLink = input.required();
|
|
2380
|
+
/**
|
|
2381
|
+
* Sets target of the anchor tag. No default value.
|
|
2382
|
+
*/
|
|
2383
|
+
this.target = input();
|
|
2384
|
+
/**
|
|
2385
|
+
* Sets queryParams of the anchor tag. No default value.
|
|
2386
|
+
*/
|
|
2387
|
+
this.queryParams = input();
|
|
2388
|
+
/**
|
|
2389
|
+
* Sets queryParamsHandling of the anchor tag. No default value.
|
|
2390
|
+
*/
|
|
2391
|
+
this.queryParamsHandling = input();
|
|
2392
|
+
/**
|
|
2393
|
+
* Sets relativeTo of the anchor tag. No default value.
|
|
2394
|
+
*/
|
|
2395
|
+
this.relativeTo = input();
|
|
2396
|
+
}
|
|
2586
2397
|
onClick(event) {
|
|
2587
|
-
if (this.disabled) {
|
|
2398
|
+
if (this.disabled()) {
|
|
2588
2399
|
event.preventDefault();
|
|
2589
2400
|
event.stopImmediatePropagation();
|
|
2590
2401
|
}
|
|
@@ -2593,31 +2404,20 @@ class SuisButtonLinkComponent extends SuisButtonBase {
|
|
|
2593
2404
|
}
|
|
2594
2405
|
}
|
|
2595
2406
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisButtonLinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2596
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisButtonLinkComponent, isStandalone: true, selector: "suis-button-link", inputs: { routerLink: "routerLink", target: "target", queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", relativeTo: "relativeTo" }, usesInheritance: true, ngImport: i0, template: "<a\n class=\"suis-button-link\"\n [class.suis-button-link--full-width]=\"fullWidth\"\n [class.suis-button-link--disabled]=\"disabled || loading ? true : undefined\"\n [routerLink]=\"routerLink\"\n [target]=\"target\"\n [queryParams]=\"queryParams\"\n [queryParamsHandling]=\"queryParamsHandling\"\n [relativeTo]=\"relativeTo\"\n [ngClass]=\"'suis-button-link' | suisNgClass : color\"\n [attr.tabindex]=\"disabled || loading ? -1 : 0\"\n (click)=\"onClick($event)\"\n>\n <span\n class=\"suis-button-link__content\"\n [class.suis-button-link__content--loading]=\"loading\"\n >\n <ng-content></ng-content>\n </span>\n @if (loading) {\n <suis-spinner size=\"xs\" color=\"white\"></suis-spinner>\n }\n</a>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-button-link{width:fit-content;display:flex;align-items:center;justify-content:center;padding:.375rem 1rem;border-radius:.25rem;text-align:center;text-decoration:none;transition:background-color .25s ease-in-out;border-width:.125rem;border-style:solid;font-size:.875rem}.suis-button-link--full-width{width:100%}.suis-button-link--disabled{opacity:.5}.suis-button-link__content{display:flex;align-items:center;justify-content:center}.suis-button-link__content--loading{visibility:hidden}.suis-button-link suis-spinner{position:absolute}.suis-button-link:disabled{opacity:.5}.suis-button-link:hover:not(:disabled){cursor:pointer}.suis-button-link:hover:disabled{cursor:not-allowed}.suis-button-link:focus,.suis-button-link:focus-within{outline:none}.suis-button-link--primary{background-color:#192a56;border-color:#192a56;color:#fff}.suis-button-link--primary:hover:not(:disabled){background-color:#192a56d9}.suis-button-link--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button-link--secondary{background-color:#273c75;border-color:#273c75;color:#fff}.suis-button-link--secondary:hover:not(:disabled){background-color:#273c75d9}.suis-button-link--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button-link--tertiary{background-color:#dcdde1;border-color:#dcdde1;color:#2f3640}.suis-button-link--tertiary:hover:not(:disabled){background-color:#dcdde1d9}.suis-button-link--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button-link--complementary{background-color:#f5f6fa;border-color:#f5f6fa;color:#2f3640}.suis-button-link--complementary:hover:not(:disabled){background-color:#f5f6fad9}.suis-button-link--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button-link--success{background-color:#2ed573;border-color:#2ed573;color:#fff}.suis-button-link--success:hover:not(:disabled){background-color:#2ed573d9}.suis-button-link--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button-link--warning{background-color:#ffa502;border-color:#ffa502;color:#fff}.suis-button-link--warning:hover:not(:disabled){background-color:#ffa502d9}.suis-button-link--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button-link--danger{background-color:#ff4757;border-color:#ff4757;color:#fff}.suis-button-link--danger:hover:not(:disabled){background-color:#ff4757d9}.suis-button-link--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }, { kind: "component", type: SuisSpinnerComponent, selector: "suis-spinner", inputs: ["size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2407
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisButtonLinkComponent, isStandalone: true, selector: "suis-button-link", inputs: { routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: true, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null }, queryParamsHandling: { classPropertyName: "queryParamsHandling", publicName: "queryParamsHandling", isSignal: true, isRequired: false, transformFunction: null }, relativeTo: { classPropertyName: "relativeTo", publicName: "relativeTo", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<a\n class=\"suis-button-link\"\n [class.suis-button-link--full-width]=\"fullWidth()\"\n [class.suis-button-link--disabled]=\"\n disabled() || loading() ? true : undefined\n \"\n [routerLink]=\"routerLink()\"\n [target]=\"target()\"\n [queryParams]=\"queryParams()\"\n [queryParamsHandling]=\"queryParamsHandling()\"\n [relativeTo]=\"relativeTo()\"\n [ngClass]=\"'suis-button-link' | suisNgClass : color()\"\n [attr.tabindex]=\"disabled() || loading() ? -1 : 0\"\n (click)=\"onClick($event)\"\n>\n <span\n class=\"suis-button-link__content\"\n [class.suis-button-link__content--loading]=\"loading()\"\n >\n <ng-content></ng-content>\n </span>\n @if (loading()) {\n <suis-spinner size=\"xs\" color=\"white\"></suis-spinner>\n }\n</a>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-button-link{width:fit-content;display:flex;align-items:center;justify-content:center;padding:.375rem 1rem;border-radius:.25rem;text-align:center;text-decoration:none;transition:background-color .25s ease-in-out;border-width:.125rem;border-style:solid;font-size:.875rem}.suis-button-link--full-width{width:100%}.suis-button-link--disabled{opacity:.5}.suis-button-link__content{display:flex;align-items:center;justify-content:center}.suis-button-link__content--loading{visibility:hidden}.suis-button-link suis-spinner{position:absolute}.suis-button-link:disabled{opacity:.5}.suis-button-link:hover:not(:disabled){cursor:pointer}.suis-button-link:hover:disabled{cursor:not-allowed}.suis-button-link:focus,.suis-button-link:focus-within{outline:none}.suis-button-link--primary{background-color:#192a56;border-color:#192a56;color:#fff}.suis-button-link--primary:hover:not(:disabled){background-color:#192a56d9}.suis-button-link--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button-link--secondary{background-color:#273c75;border-color:#273c75;color:#fff}.suis-button-link--secondary:hover:not(:disabled){background-color:#273c75d9}.suis-button-link--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button-link--tertiary{background-color:#dcdde1;border-color:#dcdde1;color:#2f3640}.suis-button-link--tertiary:hover:not(:disabled){background-color:#dcdde1d9}.suis-button-link--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button-link--complementary{background-color:#f5f6fa;border-color:#f5f6fa;color:#2f3640}.suis-button-link--complementary:hover:not(:disabled){background-color:#f5f6fad9}.suis-button-link--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button-link--success{background-color:#2ed573;border-color:#2ed573;color:#fff}.suis-button-link--success:hover:not(:disabled){background-color:#2ed573d9}.suis-button-link--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button-link--warning{background-color:#ffa502;border-color:#ffa502;color:#fff}.suis-button-link--warning:hover:not(:disabled){background-color:#ffa502d9}.suis-button-link--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button-link--danger{background-color:#ff4757;border-color:#ff4757;color:#fff}.suis-button-link--danger:hover:not(:disabled){background-color:#ff4757d9}.suis-button-link--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }, { kind: "component", type: SuisSpinnerComponent, selector: "suis-spinner", inputs: ["size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2597
2408
|
}
|
|
2598
2409
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisButtonLinkComponent, decorators: [{
|
|
2599
2410
|
type: Component,
|
|
2600
|
-
args: [{ selector: 'suis-button-link', imports: [NgClass, RouterModule, SuisNgClassPipe, SuisSpinnerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n class=\"suis-button-link\"\n [class.suis-button-link--full-width]=\"fullWidth\"\n [class.suis-button-link--disabled]=\"disabled || loading ? true : undefined\"\n [routerLink]=\"routerLink\"\n [target]=\"target\"\n [queryParams]=\"queryParams\"\n [queryParamsHandling]=\"queryParamsHandling\"\n [relativeTo]=\"relativeTo\"\n [ngClass]=\"'suis-button-link' | suisNgClass : color\"\n [attr.tabindex]=\"disabled || loading ? -1 : 0\"\n (click)=\"onClick($event)\"\n>\n <span\n class=\"suis-button-link__content\"\n [class.suis-button-link__content--loading]=\"loading\"\n >\n <ng-content></ng-content>\n </span>\n @if (loading) {\n <suis-spinner size=\"xs\" color=\"white\"></suis-spinner>\n }\n</a>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-button-link{width:fit-content;display:flex;align-items:center;justify-content:center;padding:.375rem 1rem;border-radius:.25rem;text-align:center;text-decoration:none;transition:background-color .25s ease-in-out;border-width:.125rem;border-style:solid;font-size:.875rem}.suis-button-link--full-width{width:100%}.suis-button-link--disabled{opacity:.5}.suis-button-link__content{display:flex;align-items:center;justify-content:center}.suis-button-link__content--loading{visibility:hidden}.suis-button-link suis-spinner{position:absolute}.suis-button-link:disabled{opacity:.5}.suis-button-link:hover:not(:disabled){cursor:pointer}.suis-button-link:hover:disabled{cursor:not-allowed}.suis-button-link:focus,.suis-button-link:focus-within{outline:none}.suis-button-link--primary{background-color:#192a56;border-color:#192a56;color:#fff}.suis-button-link--primary:hover:not(:disabled){background-color:#192a56d9}.suis-button-link--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button-link--secondary{background-color:#273c75;border-color:#273c75;color:#fff}.suis-button-link--secondary:hover:not(:disabled){background-color:#273c75d9}.suis-button-link--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button-link--tertiary{background-color:#dcdde1;border-color:#dcdde1;color:#2f3640}.suis-button-link--tertiary:hover:not(:disabled){background-color:#dcdde1d9}.suis-button-link--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button-link--complementary{background-color:#f5f6fa;border-color:#f5f6fa;color:#2f3640}.suis-button-link--complementary:hover:not(:disabled){background-color:#f5f6fad9}.suis-button-link--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button-link--success{background-color:#2ed573;border-color:#2ed573;color:#fff}.suis-button-link--success:hover:not(:disabled){background-color:#2ed573d9}.suis-button-link--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button-link--warning{background-color:#ffa502;border-color:#ffa502;color:#fff}.suis-button-link--warning:hover:not(:disabled){background-color:#ffa502d9}.suis-button-link--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button-link--danger{background-color:#ff4757;border-color:#ff4757;color:#fff}.suis-button-link--danger:hover:not(:disabled){background-color:#ff4757d9}.suis-button-link--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"] }]
|
|
2601
|
-
}]
|
|
2602
|
-
type: Input,
|
|
2603
|
-
args: [{ required: true }]
|
|
2604
|
-
}], target: [{
|
|
2605
|
-
type: Input
|
|
2606
|
-
}], queryParams: [{
|
|
2607
|
-
type: Input
|
|
2608
|
-
}], queryParamsHandling: [{
|
|
2609
|
-
type: Input
|
|
2610
|
-
}], relativeTo: [{
|
|
2611
|
-
type: Input
|
|
2612
|
-
}] } });
|
|
2411
|
+
args: [{ selector: 'suis-button-link', imports: [NgClass, RouterModule, SuisNgClassPipe, SuisSpinnerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n class=\"suis-button-link\"\n [class.suis-button-link--full-width]=\"fullWidth()\"\n [class.suis-button-link--disabled]=\"\n disabled() || loading() ? true : undefined\n \"\n [routerLink]=\"routerLink()\"\n [target]=\"target()\"\n [queryParams]=\"queryParams()\"\n [queryParamsHandling]=\"queryParamsHandling()\"\n [relativeTo]=\"relativeTo()\"\n [ngClass]=\"'suis-button-link' | suisNgClass : color()\"\n [attr.tabindex]=\"disabled() || loading() ? -1 : 0\"\n (click)=\"onClick($event)\"\n>\n <span\n class=\"suis-button-link__content\"\n [class.suis-button-link__content--loading]=\"loading()\"\n >\n <ng-content></ng-content>\n </span>\n @if (loading()) {\n <suis-spinner size=\"xs\" color=\"white\"></suis-spinner>\n }\n</a>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-button-link{width:fit-content;display:flex;align-items:center;justify-content:center;padding:.375rem 1rem;border-radius:.25rem;text-align:center;text-decoration:none;transition:background-color .25s ease-in-out;border-width:.125rem;border-style:solid;font-size:.875rem}.suis-button-link--full-width{width:100%}.suis-button-link--disabled{opacity:.5}.suis-button-link__content{display:flex;align-items:center;justify-content:center}.suis-button-link__content--loading{visibility:hidden}.suis-button-link suis-spinner{position:absolute}.suis-button-link:disabled{opacity:.5}.suis-button-link:hover:not(:disabled){cursor:pointer}.suis-button-link:hover:disabled{cursor:not-allowed}.suis-button-link:focus,.suis-button-link:focus-within{outline:none}.suis-button-link--primary{background-color:#192a56;border-color:#192a56;color:#fff}.suis-button-link--primary:hover:not(:disabled){background-color:#192a56d9}.suis-button-link--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button-link--secondary{background-color:#273c75;border-color:#273c75;color:#fff}.suis-button-link--secondary:hover:not(:disabled){background-color:#273c75d9}.suis-button-link--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button-link--tertiary{background-color:#dcdde1;border-color:#dcdde1;color:#2f3640}.suis-button-link--tertiary:hover:not(:disabled){background-color:#dcdde1d9}.suis-button-link--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button-link--complementary{background-color:#f5f6fa;border-color:#f5f6fa;color:#2f3640}.suis-button-link--complementary:hover:not(:disabled){background-color:#f5f6fad9}.suis-button-link--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button-link--success{background-color:#2ed573;border-color:#2ed573;color:#fff}.suis-button-link--success:hover:not(:disabled){background-color:#2ed573d9}.suis-button-link--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button-link--warning{background-color:#ffa502;border-color:#ffa502;color:#fff}.suis-button-link--warning:hover:not(:disabled){background-color:#ffa502d9}.suis-button-link--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button-link--danger{background-color:#ff4757;border-color:#ff4757;color:#fff}.suis-button-link--danger:hover:not(:disabled){background-color:#ff4757d9}.suis-button-link--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"] }]
|
|
2412
|
+
}] });
|
|
2613
2413
|
|
|
2614
2414
|
class SuisButtonOutlinedComponent extends SuisButtonBase {
|
|
2615
2415
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisButtonOutlinedComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2616
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisButtonOutlinedComponent, isStandalone: true, selector: "suis-button-outlined", usesInheritance: true, ngImport: i0, template: "<button\n class=\"suis-button-outlined\"\n [class.suis-button-outlined--full-width]=\"fullWidth\"\n [ngClass]=\"'suis-button-outlined' | suisNgClass : color\"\n [attr.disabled]=\"disabled || loading ? true : undefined\"\n [attr.tabindex]=\"disabled || loading ? -1 : 0\"\n [attr.type]=\"type\"\n (click)=\"onClick()\"\n>\n <span\n class=\"suis-button-outlined__content\"\n [class.suis-button-outlined__content--loading]=\"loading\"\n >\n <ng-content></ng-content>\n </span>\n @if (loading) {\n <suis-spinner size=\"xs\" [color]=\"color\"></suis-spinner>\n }\n</button>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-button-outlined{width:fit-content;display:flex;align-items:center;justify-content:center;padding:.375rem 1rem;border-radius:.25rem;text-align:center;text-decoration:none;transition:background-color .25s ease-in-out;font-size:.875rem;border-width:.125rem;border-style:solid;background-color:transparent}.suis-button-outlined--full-width{width:100%}.suis-button-outlined--disabled{opacity:.5}.suis-button-outlined__content{display:flex;align-items:center;justify-content:center}.suis-button-outlined__content--loading{visibility:hidden}.suis-button-outlined suis-spinner{position:absolute}.suis-button-outlined:disabled{opacity:.5}.suis-button-outlined:hover:not(:disabled){cursor:pointer}.suis-button-outlined:hover:disabled{cursor:not-allowed}.suis-button-outlined:focus,.suis-button-outlined:focus-within{outline:none}.suis-button-outlined--primary{border-color:#192a56;color:#192a56}.suis-button-outlined--primary:hover:not(:disabled){background-color:#192a56;color:#fff}.suis-button-outlined--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button-outlined--secondary{border-color:#273c75;color:#273c75}.suis-button-outlined--secondary:hover:not(:disabled){background-color:#273c75;color:#fff}.suis-button-outlined--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button-outlined--tertiary{border-color:#dcdde1;color:#dcdde1}.suis-button-outlined--tertiary:hover:not(:disabled){background-color:#dcdde1;color:#2f3640}.suis-button-outlined--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button-outlined--complementary{border-color:#f5f6fa;color:#f5f6fa}.suis-button-outlined--complementary:hover:not(:disabled){background-color:#f5f6fa;color:#2f3640}.suis-button-outlined--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button-outlined--success{border-color:#2ed573;color:#2ed573}.suis-button-outlined--success:hover:not(:disabled){background-color:#2ed573;color:#fff}.suis-button-outlined--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button-outlined--warning{border-color:#ffa502;color:#ffa502}.suis-button-outlined--warning:hover:not(:disabled){background-color:#ffa502;color:#fff}.suis-button-outlined--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button-outlined--danger{border-color:#ff4757;color:#ff4757}.suis-button-outlined--danger:hover:not(:disabled){background-color:#ff4757;color:#fff}.suis-button-outlined--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }, { kind: "component", type: SuisSpinnerComponent, selector: "suis-spinner", inputs: ["size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2416
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisButtonOutlinedComponent, isStandalone: true, selector: "suis-button-outlined", usesInheritance: true, ngImport: i0, template: "<button\n class=\"suis-button-outlined\"\n [class.suis-button-outlined--full-width]=\"fullWidth()\"\n [ngClass]=\"'suis-button-outlined' | suisNgClass : color()\"\n [attr.disabled]=\"disabled() || loading() ? true : undefined\"\n [attr.tabindex]=\"disabled() || loading() ? -1 : 0\"\n [attr.type]=\"type()\"\n (click)=\"onClick()\"\n>\n <span\n class=\"suis-button-outlined__content\"\n [class.suis-button-outlined__content--loading]=\"loading()\"\n >\n <ng-content></ng-content>\n </span>\n @if (loading()) {\n <suis-spinner size=\"xs\" [color]=\"color()\"></suis-spinner>\n }\n</button>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-button-outlined{width:fit-content;display:flex;align-items:center;justify-content:center;padding:.375rem 1rem;border-radius:.25rem;text-align:center;text-decoration:none;transition:background-color .25s ease-in-out;font-size:.875rem;border-width:.125rem;border-style:solid;background-color:transparent}.suis-button-outlined--full-width{width:100%}.suis-button-outlined--disabled{opacity:.5}.suis-button-outlined__content{display:flex;align-items:center;justify-content:center}.suis-button-outlined__content--loading{visibility:hidden}.suis-button-outlined suis-spinner{position:absolute}.suis-button-outlined:disabled{opacity:.5}.suis-button-outlined:hover:not(:disabled){cursor:pointer}.suis-button-outlined:hover:disabled{cursor:not-allowed}.suis-button-outlined:focus,.suis-button-outlined:focus-within{outline:none}.suis-button-outlined--primary{border-color:#192a56;color:#192a56}.suis-button-outlined--primary:hover:not(:disabled){background-color:#192a56;color:#fff}.suis-button-outlined--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button-outlined--secondary{border-color:#273c75;color:#273c75}.suis-button-outlined--secondary:hover:not(:disabled){background-color:#273c75;color:#fff}.suis-button-outlined--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button-outlined--tertiary{border-color:#dcdde1;color:#dcdde1}.suis-button-outlined--tertiary:hover:not(:disabled){background-color:#dcdde1;color:#2f3640}.suis-button-outlined--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button-outlined--complementary{border-color:#f5f6fa;color:#f5f6fa}.suis-button-outlined--complementary:hover:not(:disabled){background-color:#f5f6fa;color:#2f3640}.suis-button-outlined--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button-outlined--success{border-color:#2ed573;color:#2ed573}.suis-button-outlined--success:hover:not(:disabled){background-color:#2ed573;color:#fff}.suis-button-outlined--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button-outlined--warning{border-color:#ffa502;color:#ffa502}.suis-button-outlined--warning:hover:not(:disabled){background-color:#ffa502;color:#fff}.suis-button-outlined--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button-outlined--danger{border-color:#ff4757;color:#ff4757}.suis-button-outlined--danger:hover:not(:disabled){background-color:#ff4757;color:#fff}.suis-button-outlined--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }, { kind: "component", type: SuisSpinnerComponent, selector: "suis-spinner", inputs: ["size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2617
2417
|
}
|
|
2618
2418
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisButtonOutlinedComponent, decorators: [{
|
|
2619
2419
|
type: Component,
|
|
2620
|
-
args: [{ selector: 'suis-button-outlined', imports: [NgClass, SuisNgClassPipe, SuisSpinnerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n class=\"suis-button-outlined\"\n [class.suis-button-outlined--full-width]=\"fullWidth\"\n [ngClass]=\"'suis-button-outlined' | suisNgClass : color\"\n [attr.disabled]=\"disabled || loading ? true : undefined\"\n [attr.tabindex]=\"disabled || loading ? -1 : 0\"\n [attr.type]=\"type\"\n (click)=\"onClick()\"\n>\n <span\n class=\"suis-button-outlined__content\"\n [class.suis-button-outlined__content--loading]=\"loading\"\n >\n <ng-content></ng-content>\n </span>\n @if (loading) {\n <suis-spinner size=\"xs\" [color]=\"color\"></suis-spinner>\n }\n</button>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-button-outlined{width:fit-content;display:flex;align-items:center;justify-content:center;padding:.375rem 1rem;border-radius:.25rem;text-align:center;text-decoration:none;transition:background-color .25s ease-in-out;font-size:.875rem;border-width:.125rem;border-style:solid;background-color:transparent}.suis-button-outlined--full-width{width:100%}.suis-button-outlined--disabled{opacity:.5}.suis-button-outlined__content{display:flex;align-items:center;justify-content:center}.suis-button-outlined__content--loading{visibility:hidden}.suis-button-outlined suis-spinner{position:absolute}.suis-button-outlined:disabled{opacity:.5}.suis-button-outlined:hover:not(:disabled){cursor:pointer}.suis-button-outlined:hover:disabled{cursor:not-allowed}.suis-button-outlined:focus,.suis-button-outlined:focus-within{outline:none}.suis-button-outlined--primary{border-color:#192a56;color:#192a56}.suis-button-outlined--primary:hover:not(:disabled){background-color:#192a56;color:#fff}.suis-button-outlined--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button-outlined--secondary{border-color:#273c75;color:#273c75}.suis-button-outlined--secondary:hover:not(:disabled){background-color:#273c75;color:#fff}.suis-button-outlined--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button-outlined--tertiary{border-color:#dcdde1;color:#dcdde1}.suis-button-outlined--tertiary:hover:not(:disabled){background-color:#dcdde1;color:#2f3640}.suis-button-outlined--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button-outlined--complementary{border-color:#f5f6fa;color:#f5f6fa}.suis-button-outlined--complementary:hover:not(:disabled){background-color:#f5f6fa;color:#2f3640}.suis-button-outlined--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button-outlined--success{border-color:#2ed573;color:#2ed573}.suis-button-outlined--success:hover:not(:disabled){background-color:#2ed573;color:#fff}.suis-button-outlined--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button-outlined--warning{border-color:#ffa502;color:#ffa502}.suis-button-outlined--warning:hover:not(:disabled){background-color:#ffa502;color:#fff}.suis-button-outlined--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button-outlined--danger{border-color:#ff4757;color:#ff4757}.suis-button-outlined--danger:hover:not(:disabled){background-color:#ff4757;color:#fff}.suis-button-outlined--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"] }]
|
|
2420
|
+
args: [{ selector: 'suis-button-outlined', imports: [NgClass, SuisNgClassPipe, SuisSpinnerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n class=\"suis-button-outlined\"\n [class.suis-button-outlined--full-width]=\"fullWidth()\"\n [ngClass]=\"'suis-button-outlined' | suisNgClass : color()\"\n [attr.disabled]=\"disabled() || loading() ? true : undefined\"\n [attr.tabindex]=\"disabled() || loading() ? -1 : 0\"\n [attr.type]=\"type()\"\n (click)=\"onClick()\"\n>\n <span\n class=\"suis-button-outlined__content\"\n [class.suis-button-outlined__content--loading]=\"loading()\"\n >\n <ng-content></ng-content>\n </span>\n @if (loading()) {\n <suis-spinner size=\"xs\" [color]=\"color()\"></suis-spinner>\n }\n</button>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-button-outlined{width:fit-content;display:flex;align-items:center;justify-content:center;padding:.375rem 1rem;border-radius:.25rem;text-align:center;text-decoration:none;transition:background-color .25s ease-in-out;font-size:.875rem;border-width:.125rem;border-style:solid;background-color:transparent}.suis-button-outlined--full-width{width:100%}.suis-button-outlined--disabled{opacity:.5}.suis-button-outlined__content{display:flex;align-items:center;justify-content:center}.suis-button-outlined__content--loading{visibility:hidden}.suis-button-outlined suis-spinner{position:absolute}.suis-button-outlined:disabled{opacity:.5}.suis-button-outlined:hover:not(:disabled){cursor:pointer}.suis-button-outlined:hover:disabled{cursor:not-allowed}.suis-button-outlined:focus,.suis-button-outlined:focus-within{outline:none}.suis-button-outlined--primary{border-color:#192a56;color:#192a56}.suis-button-outlined--primary:hover:not(:disabled){background-color:#192a56;color:#fff}.suis-button-outlined--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button-outlined--secondary{border-color:#273c75;color:#273c75}.suis-button-outlined--secondary:hover:not(:disabled){background-color:#273c75;color:#fff}.suis-button-outlined--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button-outlined--tertiary{border-color:#dcdde1;color:#dcdde1}.suis-button-outlined--tertiary:hover:not(:disabled){background-color:#dcdde1;color:#2f3640}.suis-button-outlined--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button-outlined--complementary{border-color:#f5f6fa;color:#f5f6fa}.suis-button-outlined--complementary:hover:not(:disabled){background-color:#f5f6fa;color:#2f3640}.suis-button-outlined--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button-outlined--success{border-color:#2ed573;color:#2ed573}.suis-button-outlined--success:hover:not(:disabled){background-color:#2ed573;color:#fff}.suis-button-outlined--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button-outlined--warning{border-color:#ffa502;color:#ffa502}.suis-button-outlined--warning:hover:not(:disabled){background-color:#ffa502;color:#fff}.suis-button-outlined--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button-outlined--danger{border-color:#ff4757;color:#ff4757}.suis-button-outlined--danger:hover:not(:disabled){background-color:#ff4757;color:#fff}.suis-button-outlined--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"] }]
|
|
2621
2421
|
}] });
|
|
2622
2422
|
|
|
2623
2423
|
class SuisButtonModule {
|
|
@@ -2665,91 +2465,108 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
2665
2465
|
|
|
2666
2466
|
class SuisNavigationItemComponent {
|
|
2667
2467
|
constructor() {
|
|
2468
|
+
/**
|
|
2469
|
+
* Navigation item data. Type of SuisNavigationItem.
|
|
2470
|
+
*/
|
|
2471
|
+
this.item = input();
|
|
2472
|
+
/**
|
|
2473
|
+
* Template to be displayed instead of item's label.
|
|
2474
|
+
*/
|
|
2475
|
+
this.templateRef = input();
|
|
2668
2476
|
/**
|
|
2669
2477
|
* Enables dark mode pallette. By default set to true.
|
|
2670
2478
|
*/
|
|
2671
|
-
this.darkMode = true;
|
|
2479
|
+
this.darkMode = input(true);
|
|
2672
2480
|
}
|
|
2673
2481
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2674
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisNavigationItemComponent, isStandalone: true, selector: "suis-navigation-item", inputs: { item: "item", templateRef: "templateRef", darkMode: "darkMode" }, ngImport: i0, template: "@if (item) {\n<a\n class=\"suis-navigation-item\"\n [routerLink]=\"item
|
|
2482
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisNavigationItemComponent, isStandalone: true, selector: "suis-navigation-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, templateRef: { classPropertyName: "templateRef", publicName: "templateRef", isSignal: true, isRequired: false, transformFunction: null }, darkMode: { classPropertyName: "darkMode", publicName: "darkMode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (item()) {\n<a\n class=\"suis-navigation-item\"\n [routerLink]=\"item()!.link\"\n routerLinkActive=\"active\"\n [class.suis-navigation-item--dark]=\"darkMode()\"\n>\n <div class=\"suis-navigation-item__content\">\n @if (templateRef()) {\n <ng-container\n *ngTemplateOutlet=\"templateRef()!; context: { $implicit: item() }\"\n ></ng-container>\n } @else {\n {{ item()!.label }}\n }\n <ng-template #label>\n {{ item()!.label }}\n </ng-template>\n </div>\n</a>\n}\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-navigation-item{display:flex;justify-content:space-between;padding:1rem;color:#192a56;border-bottom:.0625rem solid #dcdde1;font-size:.875rem;text-decoration:none;text-transform:uppercase;width:100%;position:relative;cursor:pointer;padding:.75rem 1rem .75rem 2rem}.suis-navigation-item:hover{background-color:#f5f6fad9}.suis-navigation-item.active{font-weight:600}.suis-navigation-item.active:hover{background-color:#f5f6fa}.suis-navigation-item--dark{color:#fff;border-bottom:.0625rem solid #273c75}.suis-navigation-item--dark:hover{background-color:#273c75d9}.suis-navigation-item--dark.active,.suis-navigation-item--dark.active:hover{background-color:#273c75}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2675
2483
|
}
|
|
2676
2484
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisNavigationItemComponent, decorators: [{
|
|
2677
2485
|
type: Component,
|
|
2678
|
-
args: [{ selector: 'suis-navigation-item', imports: [NgTemplateOutlet, RouterModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (item) {\n<a\n class=\"suis-navigation-item\"\n [routerLink]=\"item
|
|
2679
|
-
}]
|
|
2680
|
-
type: Input
|
|
2681
|
-
}], templateRef: [{
|
|
2682
|
-
type: Input
|
|
2683
|
-
}], darkMode: [{
|
|
2684
|
-
type: Input
|
|
2685
|
-
}] } });
|
|
2486
|
+
args: [{ selector: 'suis-navigation-item', imports: [NgTemplateOutlet, RouterModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (item()) {\n<a\n class=\"suis-navigation-item\"\n [routerLink]=\"item()!.link\"\n routerLinkActive=\"active\"\n [class.suis-navigation-item--dark]=\"darkMode()\"\n>\n <div class=\"suis-navigation-item__content\">\n @if (templateRef()) {\n <ng-container\n *ngTemplateOutlet=\"templateRef()!; context: { $implicit: item() }\"\n ></ng-container>\n } @else {\n {{ item()!.label }}\n }\n <ng-template #label>\n {{ item()!.label }}\n </ng-template>\n </div>\n</a>\n}\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-navigation-item{display:flex;justify-content:space-between;padding:1rem;color:#192a56;border-bottom:.0625rem solid #dcdde1;font-size:.875rem;text-decoration:none;text-transform:uppercase;width:100%;position:relative;cursor:pointer;padding:.75rem 1rem .75rem 2rem}.suis-navigation-item:hover{background-color:#f5f6fad9}.suis-navigation-item.active{font-weight:600}.suis-navigation-item.active:hover{background-color:#f5f6fa}.suis-navigation-item--dark{color:#fff;border-bottom:.0625rem solid #273c75}.suis-navigation-item--dark:hover{background-color:#273c75d9}.suis-navigation-item--dark.active,.suis-navigation-item--dark.active:hover{background-color:#273c75}\n"] }]
|
|
2487
|
+
}] });
|
|
2686
2488
|
|
|
2687
2489
|
class SuisNavigationGroupItemComponent {
|
|
2688
2490
|
constructor() {
|
|
2491
|
+
/**
|
|
2492
|
+
* Navigation item data. Type of SuisNavigationGroupItem.
|
|
2493
|
+
*/
|
|
2494
|
+
this.item = input();
|
|
2495
|
+
/**
|
|
2496
|
+
* Template to be displayed instead of item's label.s
|
|
2497
|
+
*/
|
|
2498
|
+
this.templateRef = input();
|
|
2689
2499
|
/**
|
|
2690
2500
|
* Controlls styling of the item based on expanded state of group. By default set to true.
|
|
2691
2501
|
*/
|
|
2692
|
-
this.expanded = true;
|
|
2502
|
+
this.expanded = input(true);
|
|
2503
|
+
this._expanded = signal(true);
|
|
2693
2504
|
/**
|
|
2694
2505
|
* Adds expand / collapse logic to item. By default set to false.
|
|
2695
2506
|
*/
|
|
2696
|
-
this.expandable = false;
|
|
2507
|
+
this.expandable = input(false);
|
|
2697
2508
|
/**
|
|
2698
2509
|
* Emits when expanded value of the item has been changed.
|
|
2699
2510
|
*/
|
|
2700
|
-
this.expandedChange =
|
|
2511
|
+
this.expandedChange = output();
|
|
2701
2512
|
/**
|
|
2702
2513
|
* Enables dark mode pallette. By default set to true.
|
|
2703
2514
|
*/
|
|
2704
|
-
this.darkMode = true;
|
|
2515
|
+
this.darkMode = input(true);
|
|
2516
|
+
effect(() => {
|
|
2517
|
+
this._expanded.set(this.expanded());
|
|
2518
|
+
});
|
|
2705
2519
|
}
|
|
2706
2520
|
onToggle() {
|
|
2707
|
-
if (!this.expandable)
|
|
2521
|
+
if (!this.expandable())
|
|
2708
2522
|
return;
|
|
2709
|
-
this.
|
|
2710
|
-
this.expandedChange.emit(this.
|
|
2523
|
+
this._expanded.update((value) => !value);
|
|
2524
|
+
this.expandedChange.emit(this._expanded());
|
|
2711
2525
|
}
|
|
2712
2526
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisNavigationGroupItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2713
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisNavigationGroupItemComponent, isStandalone: true, selector: "suis-navigation-group-item", inputs: { item: "item", templateRef: "templateRef", expanded: "expanded", expandable: "expandable", darkMode: "darkMode" }, outputs: { expandedChange: "expandedChange" }, ngImport: i0, template: "@if (item) {\n<a\n class=\"suis-navigation-group-item\"\n [class.suis-navigation-group-item--dark]=\"darkMode\"\n [routerLink]=\"expandable ? undefined : item
|
|
2527
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisNavigationGroupItemComponent, isStandalone: true, selector: "suis-navigation-group-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, templateRef: { classPropertyName: "templateRef", publicName: "templateRef", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, darkMode: { classPropertyName: "darkMode", publicName: "darkMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandedChange: "expandedChange" }, ngImport: i0, template: "@if (item()) {\n<a\n class=\"suis-navigation-group-item\"\n [class.suis-navigation-group-item--dark]=\"darkMode()\"\n [routerLink]=\"expandable() ? undefined : item()!.link ?? undefined\"\n routerLinkActive=\"active\"\n (click)=\"onToggle()\"\n>\n <div class=\"suis-navigation-group-item__content\">\n @if (templateRef()) {\n <ng-container\n *ngTemplateOutlet=\"templateRef()!; context: { $implicit: item()! }\"\n ></ng-container>\n } @else {\n {{ item()!.label }}\n }\n <ng-template #label>\n {{ item()!.label }}\n </ng-template>\n </div>\n @if (expandable()) {\n <div class=\"suis-navigation-group-item__actions\">\n <suis-icon\n [type]=\"_expanded() ? 'chevron-up' : 'chevron-down'\"\n [size]=\"'lg'\"\n [color]=\"darkMode() ? 'white' : 'primary'\"\n ></suis-icon>\n </div>\n }\n</a>\n}\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-navigation-group-item{display:flex;justify-content:space-between;padding:1rem;color:#192a56;border-bottom:.0625rem solid #dcdde1;font-size:.875rem;text-decoration:none;text-transform:uppercase;width:100%;position:relative;cursor:pointer;font-size:1rem}.suis-navigation-group-item:hover{background-color:#f5f6fad9}.suis-navigation-group-item.active{font-weight:600}.suis-navigation-group-item.active:hover{background-color:#f5f6fa}.suis-navigation-group-item--dark{color:#fff;border-bottom:.0625rem solid #273c75}.suis-navigation-group-item--dark:hover{background-color:#273c75d9}.suis-navigation-group-item--dark.active,.suis-navigation-group-item--dark.active:hover{background-color:#273c75}.suis-navigation-group-item__actions suis-icon{height:1.125rem;margin-top:-.0625rem}\n"], dependencies: [{ 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: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2714
2528
|
}
|
|
2715
2529
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisNavigationGroupItemComponent, decorators: [{
|
|
2716
2530
|
type: Component,
|
|
2717
|
-
args: [{ selector: 'suis-navigation-group-item', imports: [NgTemplateOutlet, SuisIconComponent, RouterModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (item) {\n<a\n class=\"suis-navigation-group-item\"\n [class.suis-navigation-group-item--dark]=\"darkMode\"\n [routerLink]=\"expandable ? undefined : item
|
|
2718
|
-
}],
|
|
2719
|
-
type: Input
|
|
2720
|
-
}], templateRef: [{
|
|
2721
|
-
type: Input
|
|
2722
|
-
}], expanded: [{
|
|
2723
|
-
type: Input
|
|
2724
|
-
}], expandable: [{
|
|
2725
|
-
type: Input
|
|
2726
|
-
}], expandedChange: [{
|
|
2727
|
-
type: Output
|
|
2728
|
-
}], darkMode: [{
|
|
2729
|
-
type: Input
|
|
2730
|
-
}] } });
|
|
2531
|
+
args: [{ selector: 'suis-navigation-group-item', imports: [NgTemplateOutlet, SuisIconComponent, RouterModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (item()) {\n<a\n class=\"suis-navigation-group-item\"\n [class.suis-navigation-group-item--dark]=\"darkMode()\"\n [routerLink]=\"expandable() ? undefined : item()!.link ?? undefined\"\n routerLinkActive=\"active\"\n (click)=\"onToggle()\"\n>\n <div class=\"suis-navigation-group-item__content\">\n @if (templateRef()) {\n <ng-container\n *ngTemplateOutlet=\"templateRef()!; context: { $implicit: item()! }\"\n ></ng-container>\n } @else {\n {{ item()!.label }}\n }\n <ng-template #label>\n {{ item()!.label }}\n </ng-template>\n </div>\n @if (expandable()) {\n <div class=\"suis-navigation-group-item__actions\">\n <suis-icon\n [type]=\"_expanded() ? 'chevron-up' : 'chevron-down'\"\n [size]=\"'lg'\"\n [color]=\"darkMode() ? 'white' : 'primary'\"\n ></suis-icon>\n </div>\n }\n</a>\n}\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-navigation-group-item{display:flex;justify-content:space-between;padding:1rem;color:#192a56;border-bottom:.0625rem solid #dcdde1;font-size:.875rem;text-decoration:none;text-transform:uppercase;width:100%;position:relative;cursor:pointer;font-size:1rem}.suis-navigation-group-item:hover{background-color:#f5f6fad9}.suis-navigation-group-item.active{font-weight:600}.suis-navigation-group-item.active:hover{background-color:#f5f6fa}.suis-navigation-group-item--dark{color:#fff;border-bottom:.0625rem solid #273c75}.suis-navigation-group-item--dark:hover{background-color:#273c75d9}.suis-navigation-group-item--dark.active,.suis-navigation-group-item--dark.active:hover{background-color:#273c75}.suis-navigation-group-item__actions suis-icon{height:1.125rem;margin-top:-.0625rem}\n"] }]
|
|
2532
|
+
}], ctorParameters: () => [] });
|
|
2731
2533
|
|
|
2732
2534
|
class SuisNavigationGroupComponent {
|
|
2733
2535
|
constructor() {
|
|
2536
|
+
/**
|
|
2537
|
+
* Navigation item data. Type of SuisNavigationGroupItem.
|
|
2538
|
+
*/
|
|
2539
|
+
this.item = input();
|
|
2540
|
+
/**
|
|
2541
|
+
* Template to be displayed instead of item's label.
|
|
2542
|
+
*/
|
|
2543
|
+
this.templateRef = input();
|
|
2734
2544
|
/**
|
|
2735
2545
|
* Expanded state of the navigation group. By default set to true.
|
|
2736
2546
|
*/
|
|
2737
|
-
this.expanded = true;
|
|
2547
|
+
this.expanded = input(true);
|
|
2548
|
+
this._expanded = signal(true);
|
|
2738
2549
|
/**
|
|
2739
2550
|
* Adds expand / collapse logic to group header items. By default set to false.
|
|
2740
2551
|
*/
|
|
2741
|
-
this.expandable = false;
|
|
2552
|
+
this.expandable = input(false);
|
|
2742
2553
|
/**
|
|
2743
2554
|
* Enables dark mode pallette. By default set to true.
|
|
2744
2555
|
*/
|
|
2745
|
-
this.darkMode = true;
|
|
2556
|
+
this.darkMode = input(true);
|
|
2557
|
+
effect(() => {
|
|
2558
|
+
this._expanded.set(this.expanded());
|
|
2559
|
+
});
|
|
2746
2560
|
}
|
|
2747
2561
|
/** @internal */
|
|
2748
2562
|
itemTrackBy(index, item) {
|
|
2749
2563
|
return `${item.label}-${index}`;
|
|
2750
2564
|
}
|
|
2565
|
+
onExpandedChange(value) {
|
|
2566
|
+
this._expanded.set(value);
|
|
2567
|
+
}
|
|
2751
2568
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisNavigationGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2752
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisNavigationGroupComponent, isStandalone: true, selector: "suis-navigation-group", inputs: { item: "item", templateRef: "templateRef", expanded: "expanded", expandable: "expandable", darkMode: "darkMode" }, ngImport: i0, template: "@if (item) {\n<div class=\"suis-navigation-group\">\n <div class=\"suis-navigation-group__header\">\n <suis-navigation-group-item\n [item]=\"item\"\n [templateRef]=\"templateRef\"\n [expandable]=\"expandable && !!item
|
|
2569
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisNavigationGroupComponent, isStandalone: true, selector: "suis-navigation-group", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, templateRef: { classPropertyName: "templateRef", publicName: "templateRef", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, darkMode: { classPropertyName: "darkMode", publicName: "darkMode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (item()) {\n<div class=\"suis-navigation-group\">\n <div class=\"suis-navigation-group__header\">\n <suis-navigation-group-item\n [item]=\"item()\"\n [templateRef]=\"templateRef()\"\n [expandable]=\"expandable() && !!item()!.children\"\n [expanded]=\"_expanded()\"\n (expandedChange)=\"onExpandedChange($event)\"\n [darkMode]=\"darkMode()\"\n ></suis-navigation-group-item>\n </div>\n @if (_expanded()) {\n <div class=\"suis-navigation-group__children\">\n @for (childItem of item()!.children; track itemTrackBy($index, childItem)) {\n <suis-navigation-item\n [item]=\"childItem\"\n [templateRef]=\"templateRef()\"\n [darkMode]=\"darkMode()\"\n ></suis-navigation-item>\n }\n </div>\n }\n</div>\n}\n", styles: [":host{display:block}.suis-navigation-group__header{display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "component", type: SuisNavigationItemComponent, selector: "suis-navigation-item", inputs: ["item", "templateRef", "darkMode"] }, { kind: "component", type: SuisNavigationGroupItemComponent, selector: "suis-navigation-group-item", inputs: ["item", "templateRef", "expanded", "expandable", "darkMode"], outputs: ["expandedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2753
2570
|
}
|
|
2754
2571
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisNavigationGroupComponent, decorators: [{
|
|
2755
2572
|
type: Component,
|
|
@@ -2757,82 +2574,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
|
|
|
2757
2574
|
RouterModule,
|
|
2758
2575
|
SuisNavigationItemComponent,
|
|
2759
2576
|
SuisNavigationGroupItemComponent,
|
|
2760
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (item) {\n<div class=\"suis-navigation-group\">\n <div class=\"suis-navigation-group__header\">\n <suis-navigation-group-item\n [item]=\"item\"\n [templateRef]=\"templateRef\"\n [expandable]=\"expandable && !!item
|
|
2761
|
-
}],
|
|
2762
|
-
type: Input
|
|
2763
|
-
}], templateRef: [{
|
|
2764
|
-
type: Input
|
|
2765
|
-
}], expanded: [{
|
|
2766
|
-
type: Input
|
|
2767
|
-
}], expandable: [{
|
|
2768
|
-
type: Input
|
|
2769
|
-
}], darkMode: [{
|
|
2770
|
-
type: Input
|
|
2771
|
-
}] } });
|
|
2577
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (item()) {\n<div class=\"suis-navigation-group\">\n <div class=\"suis-navigation-group__header\">\n <suis-navigation-group-item\n [item]=\"item()\"\n [templateRef]=\"templateRef()\"\n [expandable]=\"expandable() && !!item()!.children\"\n [expanded]=\"_expanded()\"\n (expandedChange)=\"onExpandedChange($event)\"\n [darkMode]=\"darkMode()\"\n ></suis-navigation-group-item>\n </div>\n @if (_expanded()) {\n <div class=\"suis-navigation-group__children\">\n @for (childItem of item()!.children; track itemTrackBy($index, childItem)) {\n <suis-navigation-item\n [item]=\"childItem\"\n [templateRef]=\"templateRef()\"\n [darkMode]=\"darkMode()\"\n ></suis-navigation-item>\n }\n </div>\n }\n</div>\n}\n", styles: [":host{display:block}.suis-navigation-group__header{display:flex;justify-content:space-between}\n"] }]
|
|
2578
|
+
}], ctorParameters: () => [] });
|
|
2772
2579
|
|
|
2773
2580
|
class SuisNavigationComponent {
|
|
2774
2581
|
constructor() {
|
|
2582
|
+
/** @internal */
|
|
2583
|
+
this.suisNavigationItem = contentChild(SuisNavigationItemDirective);
|
|
2775
2584
|
/**
|
|
2776
2585
|
* List of navigation items. Type of SuisNavigationGroupItem[]. By default set to empty array.
|
|
2777
2586
|
*/
|
|
2778
|
-
this.items = [];
|
|
2587
|
+
this.items = input([]);
|
|
2779
2588
|
/**
|
|
2780
2589
|
* Condition to expand groups at view initialization. By default set to true.
|
|
2781
2590
|
*/
|
|
2782
|
-
this.expandedGroups = true;
|
|
2591
|
+
this.expandedGroups = input(true);
|
|
2783
2592
|
/**
|
|
2784
2593
|
* Adds expand / collapse logic to group header items. By default set to false.
|
|
2785
2594
|
*/
|
|
2786
|
-
this.expandable = false;
|
|
2595
|
+
this.expandable = input(false);
|
|
2787
2596
|
/**
|
|
2788
2597
|
* Adds collapse / expand logic to navigiaton. By default set to false.
|
|
2789
2598
|
*/
|
|
2790
|
-
this.collapsable = false;
|
|
2599
|
+
this.collapsable = input(false);
|
|
2791
2600
|
/**
|
|
2792
2601
|
* Collapses the navigiation, when collapsable is enabled. By default set to false.
|
|
2793
2602
|
*/
|
|
2794
|
-
this.collapsed = false;
|
|
2603
|
+
this.collapsed = input(false);
|
|
2604
|
+
this._collapsed = signal(false);
|
|
2795
2605
|
/**
|
|
2796
2606
|
* Emits on collapsed value changed.
|
|
2797
2607
|
*/
|
|
2798
|
-
this.collaspedChange = new EventEmitter();
|
|
2608
|
+
this.collaspedChange = input(new EventEmitter());
|
|
2799
2609
|
/**
|
|
2800
2610
|
* Enables dark mode pallette. By default set to true.
|
|
2801
2611
|
*/
|
|
2802
|
-
this.darkMode = true;
|
|
2612
|
+
this.darkMode = input(true);
|
|
2613
|
+
effect(() => {
|
|
2614
|
+
this._collapsed.set(this.collapsed());
|
|
2615
|
+
});
|
|
2803
2616
|
}
|
|
2804
2617
|
onToggle() {
|
|
2805
|
-
this.
|
|
2806
|
-
this.collaspedChange.emit(this.
|
|
2618
|
+
this._collapsed.update((value) => !value);
|
|
2619
|
+
this.collaspedChange().emit(this._collapsed());
|
|
2807
2620
|
}
|
|
2808
2621
|
/** @internal */
|
|
2809
2622
|
groupItemTrackBy(index, groupItem) {
|
|
2810
2623
|
return `${groupItem.label}-${index}`;
|
|
2811
2624
|
}
|
|
2812
2625
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2813
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisNavigationComponent, isStandalone: true, selector: "suis-navigation", inputs: { items: "items", expandedGroups: "expandedGroups", expandable: "expandable", collapsable: "collapsable", collapsed: "collapsed", collaspedChange: "collaspedChange", darkMode: "darkMode" }, queries: [{ propertyName: "suisNavigationItem", first: true, predicate: SuisNavigationItemDirective, descendants: true }], ngImport: i0, template: "<div\n class=\"suis-navigation\"\n [class.suis-navigation--collapsed]=\"collapsable &&
|
|
2626
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: SuisNavigationComponent, isStandalone: true, selector: "suis-navigation", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, expandedGroups: { classPropertyName: "expandedGroups", publicName: "expandedGroups", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, collapsable: { classPropertyName: "collapsable", publicName: "collapsable", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, collaspedChange: { classPropertyName: "collaspedChange", publicName: "collaspedChange", isSignal: true, isRequired: false, transformFunction: null }, darkMode: { classPropertyName: "darkMode", publicName: "darkMode", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "suisNavigationItem", first: true, predicate: SuisNavigationItemDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"suis-navigation\"\n [class.suis-navigation--collapsed]=\"collapsable() && _collapsed()\"\n [class.suis-navigation--dark]=\"darkMode()\"\n>\n <div class=\"suis-navigation__actions\">\n @if (collapsable()) {\n <button type=\"button\" (click)=\"onToggle()\">\n <suis-icon\n [type]=\"_collapsed() ? 'arrow-right' : 'arrow-left'\"\n [color]=\"darkMode() ? 'white' : 'primary'\"\n size=\"xl\"\n ></suis-icon>\n </button>\n }\n </div>\n <div class=\"suis-navigation__groups\">\n @if (!_collapsed()) { @for (groupItem of items(); track\n groupItemTrackBy($index, groupItem)) {\n <suis-navigation-group\n [item]=\"groupItem\"\n [templateRef]=\"suisNavigationItem()?.templateRef\"\n [expanded]=\"expandedGroups()\"\n [expandable]=\"expandable()\"\n [darkMode]=\"darkMode()\"\n ></suis-navigation-group>\n } }\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block;height:100%}.suis-navigation{width:100%;min-width:16rem;max-width:16rem;background-color:#fff;border-right:.0625rem solid #dcdde1;height:100%;min-height:100vh;padding:1rem;display:flex;flex-direction:column}.suis-navigation--dark{background-color:#192a56;border-right:none}.suis-navigation--collapsed{min-width:4rem;max-width:4rem}.suis-navigation__groups{overflow-y:auto}.suis-navigation__actions{display:flex;justify-content:flex-end}.suis-navigation__actions button{margin-bottom:.75rem;background-color:transparent;border-radius:.25rem;border:0}.suis-navigation__actions button:hover{cursor:pointer}\n"], dependencies: [{ kind: "component", type: SuisNavigationGroupComponent, selector: "suis-navigation-group", inputs: ["item", "templateRef", "expanded", "expandable", "darkMode"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2814
2627
|
}
|
|
2815
2628
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisNavigationComponent, decorators: [{
|
|
2816
2629
|
type: Component,
|
|
2817
|
-
args: [{ selector: 'suis-navigation', imports: [SuisNavigationGroupComponent, SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"suis-navigation\"\n [class.suis-navigation--collapsed]=\"collapsable &&
|
|
2818
|
-
}],
|
|
2819
|
-
type: ContentChild,
|
|
2820
|
-
args: [SuisNavigationItemDirective]
|
|
2821
|
-
}], items: [{
|
|
2822
|
-
type: Input
|
|
2823
|
-
}], expandedGroups: [{
|
|
2824
|
-
type: Input
|
|
2825
|
-
}], expandable: [{
|
|
2826
|
-
type: Input
|
|
2827
|
-
}], collapsable: [{
|
|
2828
|
-
type: Input
|
|
2829
|
-
}], collapsed: [{
|
|
2830
|
-
type: Input
|
|
2831
|
-
}], collaspedChange: [{
|
|
2832
|
-
type: Input
|
|
2833
|
-
}], darkMode: [{
|
|
2834
|
-
type: Input
|
|
2835
|
-
}] } });
|
|
2630
|
+
args: [{ selector: 'suis-navigation', imports: [SuisNavigationGroupComponent, SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"suis-navigation\"\n [class.suis-navigation--collapsed]=\"collapsable() && _collapsed()\"\n [class.suis-navigation--dark]=\"darkMode()\"\n>\n <div class=\"suis-navigation__actions\">\n @if (collapsable()) {\n <button type=\"button\" (click)=\"onToggle()\">\n <suis-icon\n [type]=\"_collapsed() ? 'arrow-right' : 'arrow-left'\"\n [color]=\"darkMode() ? 'white' : 'primary'\"\n size=\"xl\"\n ></suis-icon>\n </button>\n }\n </div>\n <div class=\"suis-navigation__groups\">\n @if (!_collapsed()) { @for (groupItem of items(); track\n groupItemTrackBy($index, groupItem)) {\n <suis-navigation-group\n [item]=\"groupItem\"\n [templateRef]=\"suisNavigationItem()?.templateRef\"\n [expanded]=\"expandedGroups()\"\n [expandable]=\"expandable()\"\n [darkMode]=\"darkMode()\"\n ></suis-navigation-group>\n } }\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block;height:100%}.suis-navigation{width:100%;min-width:16rem;max-width:16rem;background-color:#fff;border-right:.0625rem solid #dcdde1;height:100%;min-height:100vh;padding:1rem;display:flex;flex-direction:column}.suis-navigation--dark{background-color:#192a56;border-right:none}.suis-navigation--collapsed{min-width:4rem;max-width:4rem}.suis-navigation__groups{overflow-y:auto}.suis-navigation__actions{display:flex;justify-content:flex-end}.suis-navigation__actions button{margin-bottom:.75rem;background-color:transparent;border-radius:.25rem;border:0}.suis-navigation__actions button:hover{cursor:pointer}\n"] }]
|
|
2631
|
+
}], ctorParameters: () => [] });
|
|
2836
2632
|
|
|
2837
2633
|
class SuisNavigationModule {
|
|
2838
2634
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: SuisNavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|