suis 3.0.1 → 3.0.2
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/esm2022/lib/components/suis-accordion/suis-accordion.component.mjs +3 -4
- package/esm2022/lib/components/suis-alert/suis-alert.component.mjs +4 -4
- package/esm2022/lib/components/suis-breadcrumbs/suis-breadcrumbs.component.mjs +3 -4
- package/esm2022/lib/components/suis-chart/suis-chart.component.mjs +4 -11
- package/esm2022/lib/components/suis-chip/suis-chip.component.mjs +4 -4
- package/esm2022/lib/components/suis-dialog/suis-dialog.component.mjs +4 -10
- package/esm2022/lib/components/suis-dialog-container/suis-dialog-container.component.mjs +4 -4
- package/esm2022/lib/components/suis-form-field/suis-form-field.component.mjs +4 -4
- package/esm2022/lib/components/suis-input-checkbox/suis-input-checkbox.component.mjs +5 -6
- package/esm2022/lib/components/suis-input-chips/suis-input-chips.component.mjs +5 -12
- package/esm2022/lib/components/suis-input-image/suis-input-image.component.mjs +5 -6
- package/esm2022/lib/components/suis-label/suis-label.component.mjs +3 -4
- package/esm2022/lib/components/suis-notification/suis-notification.component.mjs +4 -4
- package/esm2022/lib/components/suis-notifications/suis-notifications.component.mjs +3 -4
- package/esm2022/lib/components/suis-table/suis-table.component.mjs +4 -10
- package/esm2022/lib/components/suis-tabs/suis-tabs.component.mjs +4 -4
- package/esm2022/lib/components/suis-title/suis-title.component.mjs +4 -4
- package/esm2022/lib/modules/suis-button/components/suis-button/suis-button.component.mjs +4 -4
- package/esm2022/lib/modules/suis-button/components/suis-button-link/suis-button-link.component.mjs +4 -4
- package/esm2022/lib/modules/suis-button/components/suis-button-outlined/suis-button-outlined.component.mjs +4 -4
- package/esm2022/lib/modules/suis-navigation/components/suis-navigation/suis-navigation.component.mjs +3 -4
- package/esm2022/lib/modules/suis-navigation/components/suis-navigation-group/suis-navigation-group.component.mjs +3 -6
- package/esm2022/lib/modules/suis-navigation/components/suis-navigation-group-item/suis-navigation-group-item.component.mjs +4 -4
- package/esm2022/lib/modules/suis-navigation/components/suis-navigation-item/suis-navigation-item.component.mjs +4 -4
- package/esm2022/lib/modules/suis-select/components/suis-select/suis-select.component.mjs +4 -7
- package/esm2022/lib/modules/suis-select/components/suis-select-button/suis-select-button.component.mjs +3 -5
- package/esm2022/lib/modules/suis-select/components/suis-select-button-multi/suis-select-button-multi.component.mjs +3 -6
- package/esm2022/lib/modules/suis-select/components/suis-select-group/suis-select-group.component.mjs +5 -8
- package/esm2022/lib/modules/suis-select/components/suis-select-group-option/suis-select-group-option.component.mjs +3 -3
- package/esm2022/lib/modules/suis-select/components/suis-select-multi/suis-select-multi.component.mjs +4 -7
- package/esm2022/lib/modules/suis-select/components/suis-select-multi-group/suis-select-multi-group.component.mjs +5 -8
- package/esm2022/lib/modules/suis-select/components/suis-select-option/suis-select-option.component.mjs +4 -4
- package/fesm2022/suis.mjs +75 -108
- package/fesm2022/suis.mjs.map +1 -1
- package/package.json +1 -1
package/fesm2022/suis.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { Pipe, Component, ChangeDetectionStrategy, Input, EventEmitter, Output, Directive, signal, Injectable, inject, ChangeDetectorRef, ElementRef, forwardRef, ViewChild, HostListener, TemplateRef, ContentChild, NgModule, DestroyRef, ContentChildren } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@angular/common';
|
|
4
|
-
import { NgClass,
|
|
4
|
+
import { NgClass, NgComponentOutlet, CommonModule, NgTemplateOutlet } from '@angular/common';
|
|
5
5
|
import * as i1 from '@angular/router';
|
|
6
6
|
import { RouterModule } from '@angular/router';
|
|
7
7
|
import * as i1$2 from '@angular/forms';
|
|
@@ -136,11 +136,11 @@ class SuisAccordionComponent {
|
|
|
136
136
|
this.expandedChange.emit(this.expanded);
|
|
137
137
|
}
|
|
138
138
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
139
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
139
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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]=\"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
140
|
}
|
|
141
141
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisAccordionComponent, decorators: [{
|
|
142
142
|
type: Component,
|
|
143
|
-
args: [{ selector: 'suis-accordion', standalone: true, imports: [
|
|
143
|
+
args: [{ selector: 'suis-accordion', standalone: true, 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"] }]
|
|
144
144
|
}], propDecorators: { expanded: [{
|
|
145
145
|
type: Input
|
|
146
146
|
}], expandedChange: [{
|
|
@@ -167,11 +167,11 @@ class SuisAlertComponent {
|
|
|
167
167
|
this.hiddenChange.emit(true);
|
|
168
168
|
}
|
|
169
169
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
170
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
170
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SuisAlertComponent, isStandalone: true, selector: "suis-alert", inputs: { hidden: "hidden", color: "color" }, 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
171
|
}
|
|
172
172
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisAlertComponent, decorators: [{
|
|
173
173
|
type: Component,
|
|
174
|
-
args: [{ selector: 'suis-alert', standalone: true, imports: [
|
|
174
|
+
args: [{ selector: 'suis-alert', standalone: true, 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"] }]
|
|
175
175
|
}], propDecorators: { hidden: [{
|
|
176
176
|
type: Input
|
|
177
177
|
}], hiddenChange: [{
|
|
@@ -215,11 +215,11 @@ class SuisBreadcrumbsComponent {
|
|
|
215
215
|
return `${item.label}-${index}`;
|
|
216
216
|
}
|
|
217
217
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisBreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
218
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
218
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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 }); }
|
|
219
219
|
}
|
|
220
220
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisBreadcrumbsComponent, decorators: [{
|
|
221
221
|
type: Component,
|
|
222
|
-
args: [{ selector: 'suis-breadcrumbs', standalone: true, imports: [
|
|
222
|
+
args: [{ selector: 'suis-breadcrumbs', standalone: true, 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
223
|
}], propDecorators: { items: [{
|
|
224
224
|
type: Input
|
|
225
225
|
}] } });
|
|
@@ -320,18 +320,11 @@ class SuisChartComponent {
|
|
|
320
320
|
this._maxValue = value;
|
|
321
321
|
}
|
|
322
322
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
323
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
323
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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 ? item.color || compareColor : item.color || color)\n : (item.compare ? 'compare' : 'single')\n \"\n [style.height]=\"item.value | suisChartHeight : maxValue\"\n >\n <div class=\"suis-chart__content__item__value\">\n {{ item.value }}\n </div>\n </div>\n }\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
324
|
}
|
|
325
325
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisChartComponent, decorators: [{
|
|
326
326
|
type: Component,
|
|
327
|
-
args: [{ selector: 'suis-chart', standalone: true, imports: [
|
|
328
|
-
NgForOf,
|
|
329
|
-
NgIf,
|
|
330
|
-
NgClass,
|
|
331
|
-
SuisChartHeightPipe,
|
|
332
|
-
SuisChartDataPipe,
|
|
333
|
-
SuisNgClassPipe,
|
|
334
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-chart\">\n <div\n class=\"suis-chart__content\"\n [ngClass]=\"'suis-chart__content' | suisNgClass : size\"\n >\n <div\n *ngFor=\"let item of data | suisChartData : compareData\"\n class=\"suis-chart__content__item\"\n [ngClass]=\"\n 'suis-chart__content__item'\n | suisNgClass\n : (item.compare ? item.color || compareColor : item.color || color)\n : (item.compare ? 'compare' : 'single')\n \"\n [style.height]=\"item.value | suisChartHeight : maxValue\"\n >\n <div class=\"suis-chart__content__item__value\">\n {{ item.value }}\n </div>\n </div>\n </div>\n <div\n class=\"suis-chart__labels\"\n [ngClass]=\"'suis-chart__labels' | suisNgClass : size\"\n >\n <div\n *ngFor=\"let label of labels\"\n class=\"suis-chart__labels__item\"\n [class.suis-chart__labels__item--double]=\"compareData.length\"\n >\n {{ label }}\n </div>\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block;height:100%}.suis-chart{height:100%}.suis-chart__content,.suis-chart__labels{display:flex;align-items:flex-end;justify-content:center}.suis-chart__content--xs .suis-chart__content__item,.suis-chart__content--xs .suis-chart__labels__item,.suis-chart__labels--xs .suis-chart__content__item,.suis-chart__labels--xs .suis-chart__labels__item{width:1rem}.suis-chart__content--xs .suis-chart__content__item:not(:last-child),.suis-chart__content--xs .suis-chart__labels__item:not(:last-child),.suis-chart__labels--xs .suis-chart__content__item:not(:last-child),.suis-chart__labels--xs .suis-chart__labels__item:not(:last-child){margin-right:.5rem}.suis-chart__content--xs .suis-chart__content__item--compare,.suis-chart__content--xs .suis-chart__labels__item--compare,.suis-chart__labels--xs .suis-chart__content__item--compare,.suis-chart__labels--xs .suis-chart__labels__item--compare{margin-left:-.5rem}.suis-chart__content--xs .suis-chart__content__item--double,.suis-chart__content--xs .suis-chart__labels__item--double,.suis-chart__labels--xs .suis-chart__content__item--double,.suis-chart__labels--xs .suis-chart__labels__item--double{width:2rem}.suis-chart__content--sm .suis-chart__content__item,.suis-chart__content--sm .suis-chart__labels__item,.suis-chart__labels--sm .suis-chart__content__item,.suis-chart__labels--sm .suis-chart__labels__item{width:1.25rem}.suis-chart__content--sm .suis-chart__content__item:not(:last-child),.suis-chart__content--sm .suis-chart__labels__item:not(:last-child),.suis-chart__labels--sm .suis-chart__content__item:not(:last-child),.suis-chart__labels--sm .suis-chart__labels__item:not(:last-child){margin-right:.625rem}.suis-chart__content--sm .suis-chart__content__item--compare,.suis-chart__content--sm .suis-chart__labels__item--compare,.suis-chart__labels--sm .suis-chart__content__item--compare,.suis-chart__labels--sm .suis-chart__labels__item--compare{margin-left:-.625rem}.suis-chart__content--sm .suis-chart__content__item--double,.suis-chart__content--sm .suis-chart__labels__item--double,.suis-chart__labels--sm .suis-chart__content__item--double,.suis-chart__labels--sm .suis-chart__labels__item--double{width:2.5rem}.suis-chart__content--md .suis-chart__content__item,.suis-chart__content--md .suis-chart__labels__item,.suis-chart__labels--md .suis-chart__content__item,.suis-chart__labels--md .suis-chart__labels__item{width:1.5rem}.suis-chart__content--md .suis-chart__content__item:not(:last-child),.suis-chart__content--md .suis-chart__labels__item:not(:last-child),.suis-chart__labels--md .suis-chart__content__item:not(:last-child),.suis-chart__labels--md .suis-chart__labels__item:not(:last-child){margin-right:.75rem}.suis-chart__content--md .suis-chart__content__item--compare,.suis-chart__content--md .suis-chart__labels__item--compare,.suis-chart__labels--md .suis-chart__content__item--compare,.suis-chart__labels--md .suis-chart__labels__item--compare{margin-left:-.75rem}.suis-chart__content--md .suis-chart__content__item--double,.suis-chart__content--md .suis-chart__labels__item--double,.suis-chart__labels--md .suis-chart__content__item--double,.suis-chart__labels--md .suis-chart__labels__item--double{width:3rem}.suis-chart__content--lg .suis-chart__content__item,.suis-chart__content--lg .suis-chart__labels__item,.suis-chart__labels--lg .suis-chart__content__item,.suis-chart__labels--lg .suis-chart__labels__item{width:1.75rem}.suis-chart__content--lg .suis-chart__content__item:not(:last-child),.suis-chart__content--lg .suis-chart__labels__item:not(:last-child),.suis-chart__labels--lg .suis-chart__content__item:not(:last-child),.suis-chart__labels--lg .suis-chart__labels__item:not(:last-child){margin-right:.875rem}.suis-chart__content--lg .suis-chart__content__item--compare,.suis-chart__content--lg .suis-chart__labels__item--compare,.suis-chart__labels--lg .suis-chart__content__item--compare,.suis-chart__labels--lg .suis-chart__labels__item--compare{margin-left:-1rem}.suis-chart__content--lg .suis-chart__content__item--double,.suis-chart__content--lg .suis-chart__labels__item--double,.suis-chart__labels--lg .suis-chart__content__item--double,.suis-chart__labels--lg .suis-chart__labels__item--double{width:3.5rem}.suis-chart__content--xl .suis-chart__content__item,.suis-chart__content--xl .suis-chart__labels__item,.suis-chart__labels--xl .suis-chart__content__item,.suis-chart__labels--xl .suis-chart__labels__item{width:2rem}.suis-chart__content--xl .suis-chart__content__item:not(:last-child),.suis-chart__content--xl .suis-chart__labels__item:not(:last-child),.suis-chart__labels--xl .suis-chart__content__item:not(:last-child),.suis-chart__labels--xl .suis-chart__labels__item:not(:last-child){margin-right:1rem}.suis-chart__content--xl .suis-chart__content__item--compare,.suis-chart__content--xl .suis-chart__labels__item--compare,.suis-chart__labels--xl .suis-chart__content__item--compare,.suis-chart__labels--xl .suis-chart__labels__item--compare{margin-left:-1rem}.suis-chart__content--xl .suis-chart__content__item--double,.suis-chart__content--xl .suis-chart__labels__item--double,.suis-chart__labels--xl .suis-chart__content__item--double,.suis-chart__labels--xl .suis-chart__labels__item--double{width:4rem}.suis-chart__content{height:calc(100% - 1.25rem)}.suis-chart__content__item{background-color:#192a56;min-height:.0625rem;position:relative}.suis-chart__content__item--primary{background-color:#192a56}.suis-chart__content__item--secondary{background-color:#273c75}.suis-chart__content__item--tertiary{background-color:#dcdde1}.suis-chart__content__item--complementary{background-color:#f5f6fa}.suis-chart__content__item--success{background-color:#2ed573}.suis-chart__content__item--warning{background-color:#ffa502}.suis-chart__content__item--danger{background-color:#ff4757}.suis-chart__content__item--white{background-color:#fff}.suis-chart__content__item--gray{background-color:#bcbcbc}.suis-chart__content__item--dark{background-color:#000}.suis-chart__content__item__value{position:absolute;top:-1rem;text-align:center;width:100%;font-size:.75rem;color:#a4a7b0}.suis-chart__labels__item{margin-top:.25rem;font-size:.75rem;color:#a4a7b0;text-align:center}\n"] }]
|
|
327
|
+
args: [{ selector: 'suis-chart', standalone: true, 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 ? item.color || compareColor : item.color || color)\n : (item.compare ? 'compare' : 'single')\n \"\n [style.height]=\"item.value | suisChartHeight : maxValue\"\n >\n <div class=\"suis-chart__content__item__value\">\n {{ item.value }}\n </div>\n </div>\n }\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"] }]
|
|
335
328
|
}], propDecorators: { maxValue: [{
|
|
336
329
|
type: Input
|
|
337
330
|
}], labels: [{
|
|
@@ -374,11 +367,11 @@ class SuisChipComponent {
|
|
|
374
367
|
this.remove.emit();
|
|
375
368
|
}
|
|
376
369
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
377
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
370
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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 }); }
|
|
378
371
|
}
|
|
379
372
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisChipComponent, decorators: [{
|
|
380
373
|
type: Component,
|
|
381
|
-
args: [{ selector: 'suis-chip', standalone: true, imports: [
|
|
374
|
+
args: [{ selector: 'suis-chip', standalone: true, 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"] }]
|
|
382
375
|
}], propDecorators: { color: [{
|
|
383
376
|
type: Input
|
|
384
377
|
}], iconColor: [{
|
|
@@ -481,11 +474,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
481
474
|
|
|
482
475
|
class SuisButtonComponent extends SuisButtonBase {
|
|
483
476
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
484
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
477
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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 }); }
|
|
485
478
|
}
|
|
486
479
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisButtonComponent, decorators: [{
|
|
487
480
|
type: Component,
|
|
488
|
-
args: [{ selector: 'suis-button', standalone: true, imports: [
|
|
481
|
+
args: [{ selector: 'suis-button', standalone: true, 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"] }]
|
|
489
482
|
}] });
|
|
490
483
|
|
|
491
484
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
@@ -554,17 +547,11 @@ class SuisDialogComponent {
|
|
|
554
547
|
this.suisDialogService.close();
|
|
555
548
|
}
|
|
556
549
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
557
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
550
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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 }); }
|
|
558
551
|
}
|
|
559
552
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisDialogComponent, decorators: [{
|
|
560
553
|
type: Component,
|
|
561
|
-
args: [{ selector: 'suis-dialog', standalone: true, imports: [
|
|
562
|
-
NgIf,
|
|
563
|
-
NgClass,
|
|
564
|
-
SuisIconComponent,
|
|
565
|
-
SuisButtonComponent,
|
|
566
|
-
SuisNgClassPipe,
|
|
567
|
-
], 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 <suis-button *ngIf=\"cancelButton\" color=\"danger\" (click)=\"onCancel()\">\n Cancel\n </suis-button>\n <suis-button *ngIf=\"confirmButton\" color=\"success\" (click)=\"onConfirm()\">\n Confirm\n </suis-button>\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"] }]
|
|
554
|
+
args: [{ selector: 'suis-dialog', standalone: true, 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"] }]
|
|
568
555
|
}], propDecorators: { size: [{
|
|
569
556
|
type: Input
|
|
570
557
|
}], cancelButton: [{
|
|
@@ -663,11 +650,11 @@ class SuisDialogContainerComponent {
|
|
|
663
650
|
this.dialog = this.suisDialogService.getDialog();
|
|
664
651
|
}
|
|
665
652
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisDialogContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
666
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
653
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SuisDialogContainerComponent, isStandalone: true, selector: "suis-dialog-container", ngImport: i0, template: "@if (dialog()) {\n<div class=\"suis-dialog-container\">\n <ng-container\n *ngComponentOutlet=\"dialog()!.component; inputs: dialog()!.inputs\"\n ></ng-container>\n</div>\n}\n", styles: [".suis-dialog-container{position:absolute;inset:0;z-index:20}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
667
654
|
}
|
|
668
655
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisDialogContainerComponent, decorators: [{
|
|
669
656
|
type: Component,
|
|
670
|
-
args: [{ selector: 'suis-dialog-container', standalone: true, imports: [
|
|
657
|
+
args: [{ selector: 'suis-dialog-container', standalone: true, imports: [NgComponentOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (dialog()) {\n<div class=\"suis-dialog-container\">\n <ng-container\n *ngComponentOutlet=\"dialog()!.component; inputs: dialog()!.inputs\"\n ></ng-container>\n</div>\n}\n", styles: [".suis-dialog-container{position:absolute;inset:0;z-index:20}\n"] }]
|
|
671
658
|
}] });
|
|
672
659
|
|
|
673
660
|
class SuisDividerComponent {
|
|
@@ -689,11 +676,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
689
676
|
|
|
690
677
|
class SuisFormFieldComponent {
|
|
691
678
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
692
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
679
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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\"></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 }); }
|
|
693
680
|
}
|
|
694
681
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisFormFieldComponent, decorators: [{
|
|
695
682
|
type: Component,
|
|
696
|
-
args: [{ selector: 'suis-form-field', standalone: true, imports: [
|
|
683
|
+
args: [{ selector: 'suis-form-field', standalone: true, 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"] }]
|
|
697
684
|
}], propDecorators: { errorTemplate: [{
|
|
698
685
|
type: Input
|
|
699
686
|
}] } });
|
|
@@ -835,11 +822,11 @@ class SuisLabelComponent {
|
|
|
835
822
|
this.readonly = false;
|
|
836
823
|
}
|
|
837
824
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
838
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
825
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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 }); }
|
|
839
826
|
}
|
|
840
827
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisLabelComponent, decorators: [{
|
|
841
828
|
type: Component,
|
|
842
|
-
args: [{ selector: 'suis-label', standalone: true,
|
|
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"] }]
|
|
843
830
|
}], propDecorators: { for: [{
|
|
844
831
|
type: Input
|
|
845
832
|
}], required: [{
|
|
@@ -883,23 +870,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
883
870
|
|
|
884
871
|
class SuisInputCheckboxComponent extends SuisCheckboxBase {
|
|
885
872
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisInputCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
886
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
873
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SuisInputCheckboxComponent, isStandalone: true, selector: "suis-input-checkbox", providers: [
|
|
887
874
|
{
|
|
888
875
|
provide: NG_VALUE_ACCESSOR,
|
|
889
876
|
multi: true,
|
|
890
877
|
useExisting: forwardRef(() => SuisInputCheckboxComponent),
|
|
891
878
|
},
|
|
892
|
-
], 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 <suis-icon\n
|
|
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 }); }
|
|
893
880
|
}
|
|
894
881
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisInputCheckboxComponent, decorators: [{
|
|
895
882
|
type: Component,
|
|
896
|
-
args: [{ selector: 'suis-input-checkbox', standalone: true, imports: [
|
|
883
|
+
args: [{ selector: 'suis-input-checkbox', standalone: true, imports: [SuisLabelComponent, SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
897
884
|
{
|
|
898
885
|
provide: NG_VALUE_ACCESSOR,
|
|
899
886
|
multi: true,
|
|
900
887
|
useExisting: forwardRef(() => SuisInputCheckboxComponent),
|
|
901
888
|
},
|
|
902
|
-
], 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 <suis-icon\n
|
|
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"] }]
|
|
903
890
|
}] });
|
|
904
891
|
|
|
905
892
|
class SuisInputChipsComponent extends SuisInputBase {
|
|
@@ -948,29 +935,23 @@ class SuisInputChipsComponent extends SuisInputBase {
|
|
|
948
935
|
this.submitValue();
|
|
949
936
|
}
|
|
950
937
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisInputChipsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
951
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
938
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SuisInputChipsComponent, isStandalone: true, selector: "suis-input-chips", inputs: { placeholder: "placeholder", chipColor: "chipColor", chipIconColor: "chipIconColor" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
|
|
952
939
|
{
|
|
953
940
|
provide: NG_VALUE_ACCESSOR,
|
|
954
941
|
multi: true,
|
|
955
942
|
useExisting: forwardRef(() => SuisInputChipsComponent),
|
|
956
943
|
},
|
|
957
|
-
], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-input-chips\">\n
|
|
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 }); }
|
|
958
945
|
}
|
|
959
946
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisInputChipsComponent, decorators: [{
|
|
960
947
|
type: Component,
|
|
961
|
-
args: [{ selector: 'suis-input-chips', standalone: true, imports: [
|
|
962
|
-
NgIf,
|
|
963
|
-
NgFor,
|
|
964
|
-
ReactiveFormsModule,
|
|
965
|
-
SuisChipComponent,
|
|
966
|
-
SuisInputComponent,
|
|
967
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
948
|
+
args: [{ selector: 'suis-input-chips', standalone: true, imports: [ReactiveFormsModule, SuisChipComponent, SuisInputComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
968
949
|
{
|
|
969
950
|
provide: NG_VALUE_ACCESSOR,
|
|
970
951
|
multi: true,
|
|
971
952
|
useExisting: forwardRef(() => SuisInputChipsComponent),
|
|
972
953
|
},
|
|
973
|
-
], template: "<div class=\"suis-input-chips\">\n
|
|
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"] }]
|
|
974
955
|
}], propDecorators: { inputEl: [{
|
|
975
956
|
type: ViewChild,
|
|
976
957
|
args: ['input']
|
|
@@ -1017,23 +998,23 @@ class SuisInputImageComponent extends SuisInputBase {
|
|
|
1017
998
|
this.cdRef.markForCheck();
|
|
1018
999
|
}
|
|
1019
1000
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisInputImageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1020
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1001
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SuisInputImageComponent, isStandalone: true, selector: "suis-input-image", outputs: { uploaded: "uploaded" }, providers: [
|
|
1021
1002
|
{
|
|
1022
1003
|
provide: NG_VALUE_ACCESSOR,
|
|
1023
1004
|
multi: true,
|
|
1024
1005
|
useExisting: forwardRef(() => SuisInputImageComponent),
|
|
1025
1006
|
},
|
|
1026
|
-
], 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
|
|
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 }); }
|
|
1027
1008
|
}
|
|
1028
1009
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisInputImageComponent, decorators: [{
|
|
1029
1010
|
type: Component,
|
|
1030
|
-
args: [{ selector: 'suis-input-image', standalone: true, imports: [
|
|
1011
|
+
args: [{ selector: 'suis-input-image', standalone: true, imports: [SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
1031
1012
|
{
|
|
1032
1013
|
provide: NG_VALUE_ACCESSOR,
|
|
1033
1014
|
multi: true,
|
|
1034
1015
|
useExisting: forwardRef(() => SuisInputImageComponent),
|
|
1035
1016
|
},
|
|
1036
|
-
], template: "<div\n class=\"suis-input-image\"\n [class.suis-input-image--invalid]=\"invalid\"\n [class.suis-input-image--readonly]=\"readonly\"\n>\n
|
|
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"] }]
|
|
1037
1018
|
}], propDecorators: { fileInput: [{
|
|
1038
1019
|
type: ViewChild,
|
|
1039
1020
|
args: ['input']
|
|
@@ -1183,11 +1164,11 @@ class SuisNotificationComponent {
|
|
|
1183
1164
|
this.closed.emit();
|
|
1184
1165
|
}
|
|
1185
1166
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1186
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1167
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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.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 }); }
|
|
1187
1168
|
}
|
|
1188
1169
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisNotificationComponent, decorators: [{
|
|
1189
1170
|
type: Component,
|
|
1190
|
-
args: [{ selector: 'suis-notification', standalone: true, imports: [
|
|
1171
|
+
args: [{ selector: 'suis-notification', standalone: true, 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"] }]
|
|
1191
1172
|
}], propDecorators: { notification: [{
|
|
1192
1173
|
type: Input,
|
|
1193
1174
|
args: [{ required: true }]
|
|
@@ -1208,11 +1189,11 @@ class SuisNotificationsComponent {
|
|
|
1208
1189
|
return notification.id;
|
|
1209
1190
|
}
|
|
1210
1191
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisNotificationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1211
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1192
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SuisNotificationsComponent, isStandalone: true, selector: "suis-notifications", ngImport: i0, template: "@for (notification of notifications(); track notificationTrackBy($index,\nnotification)) {\n<suis-notification\n [notification]=\"notification\"\n (closed)=\"remove(notification.id)\"\n></suis-notification>\n}\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{position:fixed;bottom:0;right:0;padding:1rem}:host suis-notification{display:block;margin-top:.75rem}\n"], dependencies: [{ kind: "component", type: SuisNotificationComponent, selector: "suis-notification", inputs: ["notification"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1212
1193
|
}
|
|
1213
1194
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisNotificationsComponent, decorators: [{
|
|
1214
1195
|
type: Component,
|
|
1215
|
-
args: [{ selector: 'suis-notifications', standalone: true, imports: [
|
|
1196
|
+
args: [{ selector: 'suis-notifications', standalone: true, imports: [SuisNotificationComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (notification of notifications(); track notificationTrackBy($index,\nnotification)) {\n<suis-notification\n [notification]=\"notification\"\n (closed)=\"remove(notification.id)\"\n></suis-notification>\n}\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{position:fixed;bottom:0;right:0;padding:1rem}:host suis-notification{display:block;margin-top:.75rem}\n"] }]
|
|
1216
1197
|
}] });
|
|
1217
1198
|
|
|
1218
1199
|
class SuisPaginationPagePipe {
|
|
@@ -1317,11 +1298,11 @@ class SuisSelectOptionComponent {
|
|
|
1317
1298
|
this.clicked.emit();
|
|
1318
1299
|
}
|
|
1319
1300
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisSelectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1320
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1301
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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; 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 }); }
|
|
1321
1302
|
}
|
|
1322
1303
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisSelectOptionComponent, decorators: [{
|
|
1323
1304
|
type: Component,
|
|
1324
|
-
args: [{ selector: 'suis-select-option', standalone: true, imports: [
|
|
1305
|
+
args: [{ selector: 'suis-select-option', standalone: true, 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"] }]
|
|
1325
1306
|
}], propDecorators: { option: [{
|
|
1326
1307
|
type: Input,
|
|
1327
1308
|
args: [{ required: true }]
|
|
@@ -1436,11 +1417,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1436
1417
|
|
|
1437
1418
|
class SuisSelectButtonComponent extends SuisSelectButtonBase {
|
|
1438
1419
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisSelectButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1439
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1420
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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 }); }
|
|
1440
1421
|
}
|
|
1441
1422
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisSelectButtonComponent, decorators: [{
|
|
1442
1423
|
type: Component,
|
|
1443
|
-
args: [{ selector: 'suis-select-button', standalone: true, imports: [
|
|
1424
|
+
args: [{ selector: 'suis-select-button', standalone: true, 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"] }]
|
|
1444
1425
|
}] });
|
|
1445
1426
|
|
|
1446
1427
|
class SuisSelectOptionDirective {
|
|
@@ -1607,19 +1588,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1607
1588
|
|
|
1608
1589
|
class SuisSelectComponent extends SuisSelectSingleBase {
|
|
1609
1590
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1610
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1591
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SuisSelectComponent, isStandalone: true, selector: "suis-select", providers: [
|
|
1611
1592
|
{
|
|
1612
1593
|
provide: NG_VALUE_ACCESSOR,
|
|
1613
1594
|
multi: true,
|
|
1614
1595
|
useExisting: forwardRef(() => SuisSelectComponent),
|
|
1615
1596
|
},
|
|
1616
|
-
], 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 : options : placeholder : optionValue : optionLabel\n }}\n </suis-select-button>\n
|
|
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 : options : placeholder : optionValue : 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; track\n 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 }); }
|
|
1617
1598
|
}
|
|
1618
1599
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisSelectComponent, decorators: [{
|
|
1619
1600
|
type: Component,
|
|
1620
1601
|
args: [{ selector: 'suis-select', standalone: true, imports: [
|
|
1621
|
-
NgIf,
|
|
1622
|
-
NgFor,
|
|
1623
1602
|
FormsModule,
|
|
1624
1603
|
SuisSelectOptionComponent,
|
|
1625
1604
|
SuisSelectButtonComponent,
|
|
@@ -1633,16 +1612,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1633
1612
|
multi: true,
|
|
1634
1613
|
useExisting: forwardRef(() => SuisSelectComponent),
|
|
1635
1614
|
},
|
|
1636
|
-
], 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 : options : placeholder : optionValue : optionLabel\n }}\n </suis-select-button>\n
|
|
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 : options : placeholder : optionValue : 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; track\n 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"] }]
|
|
1637
1616
|
}] });
|
|
1638
1617
|
|
|
1639
1618
|
class SuisSelectGroupOptionComponent {
|
|
1640
1619
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisSelectGroupOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1641
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1620
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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; 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 }); }
|
|
1642
1621
|
}
|
|
1643
1622
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisSelectGroupOptionComponent, decorators: [{
|
|
1644
1623
|
type: Component,
|
|
1645
|
-
args: [{ selector: 'suis-select-group-option', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-select-group-option\">\n
|
|
1624
|
+
args: [{ selector: 'suis-select-group-option', standalone: true, 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"] }]
|
|
1646
1625
|
}], propDecorators: { option: [{
|
|
1647
1626
|
type: Input,
|
|
1648
1627
|
args: [{ required: true }]
|
|
@@ -1741,18 +1720,17 @@ class SuisSelectGroupComponent extends SuisSelectSingleBase {
|
|
|
1741
1720
|
this.groupOptions = [];
|
|
1742
1721
|
}
|
|
1743
1722
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisSelectGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1744
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1723
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SuisSelectGroupComponent, isStandalone: true, selector: "suis-select-group", inputs: { groupOptions: "groupOptions" }, providers: [
|
|
1745
1724
|
{
|
|
1746
1725
|
provide: NG_VALUE_ACCESSOR,
|
|
1747
1726
|
multi: true,
|
|
1748
1727
|
useExisting: forwardRef(() => SuisSelectGroupComponent),
|
|
1749
1728
|
},
|
|
1750
|
-
], 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
|
|
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 : sortOptions |\n suisSelectFilterGroupOptions : searchPhrase : optionLabel ; 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; track\n 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 }); }
|
|
1751
1730
|
}
|
|
1752
1731
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisSelectGroupComponent, decorators: [{
|
|
1753
1732
|
type: Component,
|
|
1754
1733
|
args: [{ selector: 'suis-select-group', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
1755
|
-
CommonModule,
|
|
1756
1734
|
FormsModule,
|
|
1757
1735
|
SuisSelectOptionComponent,
|
|
1758
1736
|
SuisSelectGroupOptionComponent,
|
|
@@ -1769,7 +1747,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1769
1747
|
multi: true,
|
|
1770
1748
|
useExisting: forwardRef(() => SuisSelectGroupComponent),
|
|
1771
1749
|
},
|
|
1772
|
-
], 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
|
|
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 : sortOptions |\n suisSelectFilterGroupOptions : searchPhrase : optionLabel ; 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; track\n 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"] }]
|
|
1773
1751
|
}], propDecorators: { suisSelectGroupOption: [{
|
|
1774
1752
|
type: ContentChild,
|
|
1775
1753
|
args: [SuisSelectGroupOptionDirective]
|
|
@@ -1816,11 +1794,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1816
1794
|
|
|
1817
1795
|
class SuisSelectButtonMultiComponent extends SuisSelectButtonBase {
|
|
1818
1796
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisSelectButtonMultiComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1819
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1797
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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 }); }
|
|
1820
1798
|
}
|
|
1821
1799
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisSelectButtonMultiComponent, decorators: [{
|
|
1822
1800
|
type: Component,
|
|
1823
|
-
args: [{ selector: 'suis-select-button-multi', standalone: true, imports: [
|
|
1801
|
+
args: [{ selector: 'suis-select-button-multi', standalone: true, 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"] }]
|
|
1824
1802
|
}] });
|
|
1825
1803
|
|
|
1826
1804
|
class SuisSelectMultiBase extends SuisSelectBase {
|
|
@@ -1888,19 +1866,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1888
1866
|
|
|
1889
1867
|
class SuisSelectMultiComponent extends SuisSelectMultiBase {
|
|
1890
1868
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisSelectMultiComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1891
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1869
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SuisSelectMultiComponent, isStandalone: true, selector: "suis-select-multi", providers: [
|
|
1892
1870
|
{
|
|
1893
1871
|
provide: NG_VALUE_ACCESSOR,
|
|
1894
1872
|
multi: true,
|
|
1895
1873
|
useExisting: forwardRef(() => SuisSelectMultiComponent),
|
|
1896
1874
|
},
|
|
1897
|
-
], 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
|
|
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) {\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; track\n 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 }); }
|
|
1898
1876
|
}
|
|
1899
1877
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisSelectMultiComponent, decorators: [{
|
|
1900
1878
|
type: Component,
|
|
1901
1879
|
args: [{ selector: 'suis-select-multi', standalone: true, imports: [
|
|
1902
|
-
NgFor,
|
|
1903
|
-
NgIf,
|
|
1904
1880
|
FormsModule,
|
|
1905
1881
|
SuisChipComponent,
|
|
1906
1882
|
SuisSelectOptionComponent,
|
|
@@ -1915,7 +1891,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1915
1891
|
multi: true,
|
|
1916
1892
|
useExisting: forwardRef(() => SuisSelectMultiComponent),
|
|
1917
1893
|
},
|
|
1918
|
-
], 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
|
|
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) {\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; track\n 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"] }]
|
|
1919
1895
|
}] });
|
|
1920
1896
|
|
|
1921
1897
|
class SuisSelectMultiGroupChipsPipe {
|
|
@@ -1950,18 +1926,17 @@ class SuisSelectMultiGroupComponent extends SuisSelectMultiBase {
|
|
|
1950
1926
|
this.groupOptions = [];
|
|
1951
1927
|
}
|
|
1952
1928
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisSelectMultiGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1953
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1929
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SuisSelectMultiGroupComponent, isStandalone: true, selector: "suis-select-multi-group", inputs: { groupOptions: "groupOptions" }, providers: [
|
|
1954
1930
|
{
|
|
1955
1931
|
provide: NG_VALUE_ACCESSOR,
|
|
1956
1932
|
multi: true,
|
|
1957
1933
|
useExisting: forwardRef(() => SuisSelectMultiGroupComponent),
|
|
1958
1934
|
},
|
|
1959
|
-
], 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
|
|
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 = $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-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 : sortOptions |\n suisSelectFilterGroupOptions : searchPhrase : optionLabel ; 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; track\n 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 }); }
|
|
1960
1936
|
}
|
|
1961
1937
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisSelectMultiGroupComponent, decorators: [{
|
|
1962
1938
|
type: Component,
|
|
1963
1939
|
args: [{ selector: 'suis-select-multi-group', standalone: true, imports: [
|
|
1964
|
-
CommonModule,
|
|
1965
1940
|
FormsModule,
|
|
1966
1941
|
SuisChipComponent,
|
|
1967
1942
|
SuisSelectButtonMultiComponent,
|
|
@@ -1979,7 +1954,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1979
1954
|
multi: true,
|
|
1980
1955
|
useExisting: forwardRef(() => SuisSelectMultiGroupComponent),
|
|
1981
1956
|
},
|
|
1982
|
-
], 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
|
|
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 = $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-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 : sortOptions |\n suisSelectFilterGroupOptions : searchPhrase : optionLabel ; 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; track\n 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"] }]
|
|
1983
1958
|
}], propDecorators: { suisSelectGroupOption: [{
|
|
1984
1959
|
type: ContentChild,
|
|
1985
1960
|
args: [SuisSelectGroupOptionDirective]
|
|
@@ -2344,17 +2319,11 @@ class SuisTableComponent {
|
|
|
2344
2319
|
}
|
|
2345
2320
|
}
|
|
2346
2321
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2347
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2322
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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 === 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 }); }
|
|
2348
2323
|
}
|
|
2349
2324
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisTableComponent, decorators: [{
|
|
2350
2325
|
type: Component,
|
|
2351
|
-
args: [{ selector: 'suis-table', standalone: true, imports: [
|
|
2352
|
-
NgIf,
|
|
2353
|
-
NgFor,
|
|
2354
|
-
NgTemplateOutlet,
|
|
2355
|
-
SuisIconComponent,
|
|
2356
|
-
SuisSpinnerContainerComponent,
|
|
2357
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<table *ngIf=\"columns\" class=\"suis-table\">\n <thead>\n <tr>\n <th\n *ngFor=\"let column of columns\"\n [class.pointer]=\"column.orderProperty\"\n (click)=\"\n column.orderProperty ? onColumnClick(column.orderProperty) : undefined\n \"\n >\n <div class=\"suis-table__header\">\n <span>\n {{ column.name }}\n </span>\n <suis-icon\n *ngIf=\"column.orderProperty && column.orderProperty === orderBy\"\n [type]=\"sortBy === 'asc' ? 'chevron-down' : 'chevron-up'\"\n size=\"lg\"\n color=\"white\"\n ></suis-icon>\n </div>\n </th>\n <th *ngIf=\"!columns?.length\"></th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let item of data || []\">\n <td *ngFor=\"let column of columns\">\n <ng-container\n *ngTemplateOutlet=\"\n column.cell!.templateRef;\n context: { $implicit: item }\n \"\n ></ng-container>\n </td>\n </tr>\n <tr *ngIf=\"!data?.length\">\n <td class=\"empty\" [attr.colspan]=\"columns ? columns.length : 1\">\n {{ loading ? '' : emptyMessage }}\n </td>\n </tr>\n <suis-spinner-container\n *ngIf=\"loading\"\n [absolute]=\"true\"\n [blur]=\"true\"\n [color]=\"'secondary'\"\n ></suis-spinner-container>\n </tbody>\n</table>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-table{width:100%;border-collapse:collapse}.suis-table thead tr th{font-weight:500;padding:.75rem 1rem;background-color:#273c75;color:#fff}.suis-table thead tr th:first-child{border-top-left-radius:.25rem}.suis-table thead tr th:last-child{border-top-right-radius:.25rem}.suis-table thead tr th.pointer{cursor:pointer}.suis-table thead tr th.pointer:hover{background-color:#273c75d9}.suis-table thead tr th>.suis-table__header{display:flex;align-items:center}.suis-table thead tr th>.suis-table__header suis-icon{display:block;margin-left:.125rem}.suis-table tbody{position:relative;background-color:#f5f6fa}.suis-table tbody tr{border-bottom:.0625rem solid #dcdde1}.suis-table tbody tr td{padding:.375rem 1rem}.suis-table tbody tr td.empty{text-align:center;padding:1.5rem 1rem}\n"] }]
|
|
2326
|
+
args: [{ selector: 'suis-table', standalone: true, 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"] }]
|
|
2358
2327
|
}], propDecorators: { columns: [{
|
|
2359
2328
|
type: ContentChildren,
|
|
2360
2329
|
args: [SuisTableColumnDirective]
|
|
@@ -2477,11 +2446,11 @@ class SuisTabsComponent {
|
|
|
2477
2446
|
this.tabClicked.emit(name);
|
|
2478
2447
|
}
|
|
2479
2448
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2480
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2449
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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 === 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 }); }
|
|
2481
2450
|
}
|
|
2482
2451
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisTabsComponent, decorators: [{
|
|
2483
2452
|
type: Component,
|
|
2484
|
-
args: [{ selector: 'suis-tabs', standalone: true, imports: [
|
|
2453
|
+
args: [{ selector: 'suis-tabs', standalone: true, 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"] }]
|
|
2485
2454
|
}], propDecorators: { tabs: [{
|
|
2486
2455
|
type: ContentChildren,
|
|
2487
2456
|
args: [SuisTabDirective]
|
|
@@ -2566,11 +2535,11 @@ class SuisTitleComponent {
|
|
|
2566
2535
|
this.level = SuisTitle.H1;
|
|
2567
2536
|
}
|
|
2568
2537
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2569
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2538
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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 }); }
|
|
2570
2539
|
}
|
|
2571
2540
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisTitleComponent, decorators: [{
|
|
2572
2541
|
type: Component,
|
|
2573
|
-
args: [{ selector: 'suis-title', standalone: true, imports: [
|
|
2542
|
+
args: [{ selector: 'suis-title', standalone: true, 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"] }]
|
|
2574
2543
|
}], propDecorators: { level: [{
|
|
2575
2544
|
type: Input
|
|
2576
2545
|
}] } });
|
|
@@ -2624,11 +2593,11 @@ class SuisButtonLinkComponent extends SuisButtonBase {
|
|
|
2624
2593
|
}
|
|
2625
2594
|
}
|
|
2626
2595
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisButtonLinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2627
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2596
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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 }); }
|
|
2628
2597
|
}
|
|
2629
2598
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisButtonLinkComponent, decorators: [{
|
|
2630
2599
|
type: Component,
|
|
2631
|
-
args: [{ selector: 'suis-button-link', standalone: true, imports: [
|
|
2600
|
+
args: [{ selector: 'suis-button-link', standalone: true, 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"] }]
|
|
2632
2601
|
}], propDecorators: { routerLink: [{
|
|
2633
2602
|
type: Input,
|
|
2634
2603
|
args: [{ required: true }]
|
|
@@ -2644,11 +2613,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2644
2613
|
|
|
2645
2614
|
class SuisButtonOutlinedComponent extends SuisButtonBase {
|
|
2646
2615
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisButtonOutlinedComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2647
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2616
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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 }); }
|
|
2648
2617
|
}
|
|
2649
2618
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisButtonOutlinedComponent, decorators: [{
|
|
2650
2619
|
type: Component,
|
|
2651
|
-
args: [{ selector: 'suis-button-outlined', standalone: true, imports: [
|
|
2620
|
+
args: [{ selector: 'suis-button-outlined', standalone: true, 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"] }]
|
|
2652
2621
|
}] });
|
|
2653
2622
|
|
|
2654
2623
|
class SuisButtonModule {
|
|
@@ -2702,11 +2671,11 @@ class SuisNavigationItemComponent {
|
|
|
2702
2671
|
this.darkMode = true;
|
|
2703
2672
|
}
|
|
2704
2673
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2705
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2674
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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.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 }); }
|
|
2706
2675
|
}
|
|
2707
2676
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisNavigationItemComponent, decorators: [{
|
|
2708
2677
|
type: Component,
|
|
2709
|
-
args: [{ selector: 'suis-navigation-item', standalone: true, imports: [
|
|
2678
|
+
args: [{ selector: 'suis-navigation-item', standalone: true, 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"] }]
|
|
2710
2679
|
}], propDecorators: { item: [{
|
|
2711
2680
|
type: Input
|
|
2712
2681
|
}], templateRef: [{
|
|
@@ -2741,11 +2710,11 @@ class SuisNavigationGroupItemComponent {
|
|
|
2741
2710
|
this.expandedChange.emit(this.expanded);
|
|
2742
2711
|
}
|
|
2743
2712
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisNavigationGroupItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2744
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2713
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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.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 }); }
|
|
2745
2714
|
}
|
|
2746
2715
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisNavigationGroupItemComponent, decorators: [{
|
|
2747
2716
|
type: Component,
|
|
2748
|
-
args: [{ selector: 'suis-navigation-group-item', standalone: true, imports: [
|
|
2717
|
+
args: [{ selector: 'suis-navigation-group-item', standalone: true, 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"] }]
|
|
2749
2718
|
}], propDecorators: { item: [{
|
|
2750
2719
|
type: Input
|
|
2751
2720
|
}], templateRef: [{
|
|
@@ -2780,17 +2749,15 @@ class SuisNavigationGroupComponent {
|
|
|
2780
2749
|
return `${item.label}-${index}`;
|
|
2781
2750
|
}
|
|
2782
2751
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisNavigationGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2783
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2752
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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.children\"\n [(expanded)]=\"expanded\"\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 }); }
|
|
2784
2753
|
}
|
|
2785
2754
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisNavigationGroupComponent, decorators: [{
|
|
2786
2755
|
type: Component,
|
|
2787
2756
|
args: [{ selector: 'suis-navigation-group', standalone: true, imports: [
|
|
2788
|
-
NgIf,
|
|
2789
|
-
NgFor,
|
|
2790
2757
|
RouterModule,
|
|
2791
2758
|
SuisNavigationItemComponent,
|
|
2792
2759
|
SuisNavigationGroupItemComponent,
|
|
2793
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "
|
|
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.children\"\n [(expanded)]=\"expanded\"\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"] }]
|
|
2794
2761
|
}], propDecorators: { item: [{
|
|
2795
2762
|
type: Input
|
|
2796
2763
|
}], templateRef: [{
|
|
@@ -2843,11 +2810,11 @@ class SuisNavigationComponent {
|
|
|
2843
2810
|
return `${groupItem.label}-${index}`;
|
|
2844
2811
|
}
|
|
2845
2812
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2846
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2813
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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 && 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 groupItemTrackBy($index,\n 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 }); }
|
|
2847
2814
|
}
|
|
2848
2815
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuisNavigationComponent, decorators: [{
|
|
2849
2816
|
type: Component,
|
|
2850
|
-
args: [{ selector: 'suis-navigation', standalone: true, imports: [
|
|
2817
|
+
args: [{ selector: 'suis-navigation', standalone: true, 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 groupItemTrackBy($index,\n 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"] }]
|
|
2851
2818
|
}], propDecorators: { suisNavigationItem: [{
|
|
2852
2819
|
type: ContentChild,
|
|
2853
2820
|
args: [SuisNavigationItemDirective]
|