@sarasanalytics-com/design-system 0.0.17 → 0.0.19
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 +24 -24
- package/esm2022/interfaces/avatar-interface.mjs +1 -1
- package/esm2022/interfaces/button-interface.mjs +1 -1
- package/esm2022/interfaces/chip-interface.mjs +1 -1
- package/esm2022/interfaces/grid-interface.mjs +1 -1
- package/esm2022/interfaces/select-interface.mjs +1 -1
- package/esm2022/interfaces/tab-interface.mjs +1 -1
- package/esm2022/lib/avatar/avatar.component.mjs +3 -3
- package/esm2022/lib/button/button.component.mjs +7 -3
- package/esm2022/lib/calendar-header/calendar-header.component.mjs +3 -3
- package/esm2022/lib/card/card-footer-actions/card-footer-actions.component.mjs +3 -3
- package/esm2022/lib/card/card-icon/card-icon.component.mjs +1 -1
- package/esm2022/lib/card/card-title-actions/card-title-actions.component.mjs +1 -1
- package/esm2022/lib/card/card.component.mjs +3 -3
- package/esm2022/lib/chips/chips.component.mjs +3 -3
- package/esm2022/lib/component-library.component.mjs +9 -9
- package/esm2022/lib/component-library.service.mjs +1 -1
- package/esm2022/lib/datepicker/datepicker.component.mjs +3 -3
- package/esm2022/lib/form-input/form-input.component.mjs +3 -3
- package/esm2022/lib/form-select/form-select.component.mjs +3 -3
- package/esm2022/lib/grid-cell/grid-cell.component.mjs +3 -3
- package/esm2022/lib/header/header.component.mjs +3 -3
- package/esm2022/lib/icon/icon.component.mjs +3 -3
- package/esm2022/lib/icon/icon.service.mjs +1 -1
- package/esm2022/lib/left-nav/left-nav.component.mjs +3 -3
- package/esm2022/lib/spinner/spinner.component.mjs +22 -0
- package/esm2022/lib/stepper/stepper.component.mjs +3 -3
- package/esm2022/lib/tabs/tabs.component.mjs +3 -3
- package/esm2022/lib/toast/toast.component.mjs +3 -3
- package/esm2022/lib/tool-tip/tool-tip.component.mjs +3 -3
- package/esm2022/public-api.mjs +1 -1
- package/esm2022/utils/validators.mjs +1 -1
- package/fesm2022/sarasanalytics-com-design-system.mjs +65 -44
- package/fesm2022/sarasanalytics-com-design-system.mjs.map +1 -1
- package/lib/button/button.component.d.ts +2 -1
- package/lib/spinner/spinner.component.d.ts +7 -0
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, Component,
|
|
2
|
+
import { Injectable, Component, Input, EventEmitter, Output, inject, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
|
-
import { NgStyle, NgIf,
|
|
4
|
+
import { CommonModule, NgStyle, NgIf, NgFor } from '@angular/common';
|
|
5
5
|
import * as i3$2 from '@angular/material/icon';
|
|
6
6
|
import { MatIcon, MatIconModule } from '@angular/material/icon';
|
|
7
7
|
import { HttpClient } from '@angular/common/http';
|
|
@@ -38,25 +38,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
38
38
|
|
|
39
39
|
class TestLibraryComponent {
|
|
40
40
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TestLibraryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
41
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TestLibraryComponent, isStandalone: true, selector: "lib-component-library", ngImport: i0, template: `
|
|
42
|
-
<p>
|
|
43
|
-
component-library works!
|
|
44
|
-
</p>
|
|
41
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TestLibraryComponent, isStandalone: true, selector: "lib-component-library", ngImport: i0, template: `
|
|
42
|
+
<p>
|
|
43
|
+
component-library works!
|
|
44
|
+
</p>
|
|
45
45
|
`, isInline: true, styles: [""] }); }
|
|
46
46
|
}
|
|
47
47
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TestLibraryComponent, decorators: [{
|
|
48
48
|
type: Component,
|
|
49
|
-
args: [{ selector: 'lib-component-library', standalone: true, imports: [], template: `
|
|
50
|
-
<p>
|
|
51
|
-
component-library works!
|
|
52
|
-
</p>
|
|
49
|
+
args: [{ selector: 'lib-component-library', standalone: true, imports: [], template: `
|
|
50
|
+
<p>
|
|
51
|
+
component-library works!
|
|
52
|
+
</p>
|
|
53
53
|
` }]
|
|
54
54
|
}] });
|
|
55
55
|
|
|
56
|
+
class SpinnerComponent {
|
|
57
|
+
constructor() {
|
|
58
|
+
this.default = false;
|
|
59
|
+
}
|
|
60
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
61
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SpinnerComponent, isStandalone: true, selector: "sa-spinner", inputs: { default: "default", size: "size" }, ngImport: i0, template: "<span class=\"sa-spinner\" [ngClass]=\"default ? 'default' : ''\" [ngStyle]=\"{'fontSize': size+'px'}\"></span>", styles: [".sa-spinner{width:1em;height:1em;border-radius:50%;display:inline-block;position:relative;border:2px solid var(--primary-500);box-sizing:border-box;animation:rotation 1s linear infinite}.sa-spinner:after{content:\"\";box-sizing:border-box;position:absolute;left:.1em;top:.1em;border:2px solid var(--primary-500);width:.25em;height:.25em;border-radius:50%}.sa-spinner.default,.sa-spinner.default:after{border-color:#fff}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:inherit}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
62
|
+
}
|
|
63
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SpinnerComponent, decorators: [{
|
|
64
|
+
type: Component,
|
|
65
|
+
args: [{ selector: 'sa-spinner', standalone: true, imports: [CommonModule], template: "<span class=\"sa-spinner\" [ngClass]=\"default ? 'default' : ''\" [ngStyle]=\"{'fontSize': size+'px'}\"></span>", styles: [".sa-spinner{width:1em;height:1em;border-radius:50%;display:inline-block;position:relative;border:2px solid var(--primary-500);box-sizing:border-box;animation:rotation 1s linear infinite}.sa-spinner:after{content:\"\";box-sizing:border-box;position:absolute;left:.1em;top:.1em;border:2px solid var(--primary-500);width:.25em;height:.25em;border-radius:50%}.sa-spinner.default,.sa-spinner.default:after{border-color:#fff}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:inherit}\n"] }]
|
|
66
|
+
}], propDecorators: { default: [{
|
|
67
|
+
type: Input,
|
|
68
|
+
args: ['default']
|
|
69
|
+
}], size: [{
|
|
70
|
+
type: Input,
|
|
71
|
+
args: ['size']
|
|
72
|
+
}] } });
|
|
73
|
+
|
|
56
74
|
let nextId$4 = 0; // used to give unique ids to inputs used in html
|
|
57
75
|
class ButtonComponent {
|
|
58
76
|
constructor() {
|
|
59
77
|
this.isSubmit = false;
|
|
78
|
+
this.showSpinner = false;
|
|
60
79
|
this.onClickEvent = new EventEmitter();
|
|
61
80
|
this.onMouseInEvent = new EventEmitter();
|
|
62
81
|
this.onMouseOutEvent = new EventEmitter();
|
|
@@ -101,11 +120,11 @@ class ButtonComponent {
|
|
|
101
120
|
this.onMouseOutEvent.emit();
|
|
102
121
|
}
|
|
103
122
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
104
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
123
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: ButtonComponent, isStandalone: true, selector: "sa-button", inputs: { id: "id", type: "type", state: "state", size: "size", text: "text", ImagePath: "ImagePath", iconPosition: "iconPosition", href: "href", hrefTarget: "hrefTarget", width: "width", isSubmit: "isSubmit", showSpinner: "showSpinner" }, outputs: { onClickEvent: "onClickEvent", onMouseInEvent: "onMouseInEvent", onMouseOutEvent: "onMouseOutEvent" }, usesOnChanges: true, ngImport: i0, template: "<button (click)=\"buttonClicked($event)\" id=\"sa-button-{{uuid}}\" class=\"btn-hide\"\n [type]=\"isSubmit ? 'submit' : 'button'\"></button>\n<!-- (click)=\"buttonClicked()\" on button instead of label breaks whole thing -->\n<label for=\"sa-button-{{uuid}}\" [ngStyle]=\"{'width':width}\" role=\"button\" tabindex=\"0\" (mouseenter)=\"mouseIn()\"\n (mouseleave)=\"mouseOut()\" (keydown.enter)=\"buttonClicked($event)\" for=\"sa-button\"\n class=\"sa-button {{state}} {{type}} {{size}}\">\n @if(showSpinner){\n <sa-spinner [default]=\"true\"></sa-spinner>\n }\n <div class=\"svg-icon\" [style]=\"svgStyle\"\n [style.display]=\"(iconPosition == 'left' || iconPosition == 'both') ? 'block' : 'none'\"></div>\n {{text}}\n <div class=\"svg-icon\" [style]=\"svgStyle\"\n [style.display]=\"(iconPosition == 'right' || iconPosition == 'both') ? 'block' : 'none'\"></div>\n</label>", styles: [".primary{--default-bg: var(--primary-500);--default-color: var(--text-white);--default-border: transparent;--hover-bg: var(--primary-700);--hover-color: var(--text-white);--hover-border: transparent;--disabled-bg: var(--grey-100);--disabled-color: var(--text-white);--disabled-border: transparent;--error-default-bg: var(--semantic-error-500);--error-hover-bg: var(--semantic-error-600);--error-default-color: var(--text-white);--error-hover-color: var(--text-white);--error-default-border: var(--semantic-error-500);--error-hover-border: var(--semantic-error-500);--svg-icon-color: var(--default-color)}.outline{--default-bg: none;--default-color: var(--primary-500);--default-border: var(--primary-500);--hover-bg: var(--primary-50);--hover-color: var(--primary-700);--hover-border: var(--primary-700);--disabled-bg: none;--disabled-color: var(--grey-100);--disabled-border: var(--grey-100);--error-default-bg: none;--error-hover-bg: var(--semantic-error-50);--error-default-color: var(--semantic-error-500);--error-hover-color: var(--semantic-error-600);--error-default-border: var(--semantic-error-500);--error-hover-border: var(--semantic-error-600);--svg-icon-color: var(--default-color)}.transparent{--default-bg: none;--default-color: var(--primary-500);--default-border: transparent;--hover-bg: var(--primary-50);--hover-color: var(--primary-700);--hover-border: transparent;--disabled-bg: none;--disabled-color: var(--grey-100);--disabled-border: transparent;--error-default-bg: none;--error-hover-bg: var(--semantic-error-50);--error-default-color: var(--semantic-error-500);--error-hover-color: var(--semantic-error-600);--error-default-border: transparent;--error-hover-border: transparent;--svg-icon-color: var(--default-color)}.large{--sizing-1: var(--small-8px);--sizing-2: var(--small-16px);--sizing-3: var(--small-8px);--height: var(--medium-36px);--font-size: var(--small-14px)}.medium{--sizing-1: var(--small-6px);--sizing-2: var(--small-12px);--sizing-3: var(--small-8px);--height: var(--medium-32px);--font-size: var(--small-14px)}.small{--sizing-1: var(--small-4px);--sizing-2: var(--small-8px);--sizing-3: var(--small-8px);--height: var(--medium-24px);--font-size: var(--small-12px)}.disabled{background-color:var(--disabled-bg)!important;color:var(--disabled-color)!important;border:1px solid var(--disabled-border)!important;cursor:default!important;--svg-icon-color: var(--disabled-color) !important}.error{background-color:var(--error-default-bg)!important;color:var(--error-default-color)!important;border:1px solid var(--error-default-border)!important;--svg-icon-color: var(--error-default-color) !important}.error:hover{background-color:var(--error-hover-bg)!important;color:var(--error-hover-color)!important;--svg-icon-color: var(--error-hover-color) !important}.sa-button{display:flex;width:max-content;padding:var(--sizing-1) var(--sizing-2);justify-content:center;align-items:center;gap:var(--sizing-3);box-sizing:border-box;height:var(--height);border-radius:4px;font-family:var(--font);font-size:var(--font-size);cursor:pointer;background-color:var(--default-bg);border:1px solid var(--default-border);color:var(--default-color);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none}.sa-button:hover{background-color:var(--hover-bg);border:1px solid var(--hover-border);color:var(--hover-color);--svg-icon-color: var(--hover-color)}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:16px;height:16px;background-color:var(--svg-icon-color)}.btn-hide{display:none}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SpinnerComponent, selector: "sa-spinner", inputs: ["default", "size"] }] }); }
|
|
105
124
|
}
|
|
106
125
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
107
126
|
type: Component,
|
|
108
|
-
args: [{ selector: 'sa-button', standalone: true, imports: [NgIf, NgStyle], template: "<button (click)=\"buttonClicked($event)\" id=\"sa-button-{{uuid}}\" class=\"btn-hide\"\
|
|
127
|
+
args: [{ selector: 'sa-button', standalone: true, imports: [NgIf, NgStyle, SpinnerComponent], template: "<button (click)=\"buttonClicked($event)\" id=\"sa-button-{{uuid}}\" class=\"btn-hide\"\n [type]=\"isSubmit ? 'submit' : 'button'\"></button>\n<!-- (click)=\"buttonClicked()\" on button instead of label breaks whole thing -->\n<label for=\"sa-button-{{uuid}}\" [ngStyle]=\"{'width':width}\" role=\"button\" tabindex=\"0\" (mouseenter)=\"mouseIn()\"\n (mouseleave)=\"mouseOut()\" (keydown.enter)=\"buttonClicked($event)\" for=\"sa-button\"\n class=\"sa-button {{state}} {{type}} {{size}}\">\n @if(showSpinner){\n <sa-spinner [default]=\"true\"></sa-spinner>\n }\n <div class=\"svg-icon\" [style]=\"svgStyle\"\n [style.display]=\"(iconPosition == 'left' || iconPosition == 'both') ? 'block' : 'none'\"></div>\n {{text}}\n <div class=\"svg-icon\" [style]=\"svgStyle\"\n [style.display]=\"(iconPosition == 'right' || iconPosition == 'both') ? 'block' : 'none'\"></div>\n</label>", styles: [".primary{--default-bg: var(--primary-500);--default-color: var(--text-white);--default-border: transparent;--hover-bg: var(--primary-700);--hover-color: var(--text-white);--hover-border: transparent;--disabled-bg: var(--grey-100);--disabled-color: var(--text-white);--disabled-border: transparent;--error-default-bg: var(--semantic-error-500);--error-hover-bg: var(--semantic-error-600);--error-default-color: var(--text-white);--error-hover-color: var(--text-white);--error-default-border: var(--semantic-error-500);--error-hover-border: var(--semantic-error-500);--svg-icon-color: var(--default-color)}.outline{--default-bg: none;--default-color: var(--primary-500);--default-border: var(--primary-500);--hover-bg: var(--primary-50);--hover-color: var(--primary-700);--hover-border: var(--primary-700);--disabled-bg: none;--disabled-color: var(--grey-100);--disabled-border: var(--grey-100);--error-default-bg: none;--error-hover-bg: var(--semantic-error-50);--error-default-color: var(--semantic-error-500);--error-hover-color: var(--semantic-error-600);--error-default-border: var(--semantic-error-500);--error-hover-border: var(--semantic-error-600);--svg-icon-color: var(--default-color)}.transparent{--default-bg: none;--default-color: var(--primary-500);--default-border: transparent;--hover-bg: var(--primary-50);--hover-color: var(--primary-700);--hover-border: transparent;--disabled-bg: none;--disabled-color: var(--grey-100);--disabled-border: transparent;--error-default-bg: none;--error-hover-bg: var(--semantic-error-50);--error-default-color: var(--semantic-error-500);--error-hover-color: var(--semantic-error-600);--error-default-border: transparent;--error-hover-border: transparent;--svg-icon-color: var(--default-color)}.large{--sizing-1: var(--small-8px);--sizing-2: var(--small-16px);--sizing-3: var(--small-8px);--height: var(--medium-36px);--font-size: var(--small-14px)}.medium{--sizing-1: var(--small-6px);--sizing-2: var(--small-12px);--sizing-3: var(--small-8px);--height: var(--medium-32px);--font-size: var(--small-14px)}.small{--sizing-1: var(--small-4px);--sizing-2: var(--small-8px);--sizing-3: var(--small-8px);--height: var(--medium-24px);--font-size: var(--small-12px)}.disabled{background-color:var(--disabled-bg)!important;color:var(--disabled-color)!important;border:1px solid var(--disabled-border)!important;cursor:default!important;--svg-icon-color: var(--disabled-color) !important}.error{background-color:var(--error-default-bg)!important;color:var(--error-default-color)!important;border:1px solid var(--error-default-border)!important;--svg-icon-color: var(--error-default-color) !important}.error:hover{background-color:var(--error-hover-bg)!important;color:var(--error-hover-color)!important;--svg-icon-color: var(--error-hover-color) !important}.sa-button{display:flex;width:max-content;padding:var(--sizing-1) var(--sizing-2);justify-content:center;align-items:center;gap:var(--sizing-3);box-sizing:border-box;height:var(--height);border-radius:4px;font-family:var(--font);font-size:var(--font-size);cursor:pointer;background-color:var(--default-bg);border:1px solid var(--default-border);color:var(--default-color);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none}.sa-button:hover{background-color:var(--hover-bg);border:1px solid var(--hover-border);color:var(--hover-color);--svg-icon-color: var(--hover-color)}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:16px;height:16px;background-color:var(--svg-icon-color)}.btn-hide{display:none}\n"] }]
|
|
109
128
|
}], propDecorators: { id: [{
|
|
110
129
|
type: Input
|
|
111
130
|
}], type: [{
|
|
@@ -128,6 +147,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
128
147
|
type: Input
|
|
129
148
|
}], isSubmit: [{
|
|
130
149
|
type: Input
|
|
150
|
+
}], showSpinner: [{
|
|
151
|
+
type: Input
|
|
131
152
|
}], onClickEvent: [{
|
|
132
153
|
type: Output
|
|
133
154
|
}], onMouseInEvent: [{
|
|
@@ -165,11 +186,11 @@ class ChipsComponent {
|
|
|
165
186
|
});
|
|
166
187
|
}
|
|
167
188
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
168
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ChipsComponent, isStandalone: true, selector: "sa-chip", inputs: { id: "id", iconPath: "iconPath", text: "text", type: "type", state: "state", filling: "filling", iconPosition: "iconPosition", largeStateIcon: "largeStateIcon", largeStateText: "largeStateText" }, outputs: { onClickEvent: "onClickEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"chip {{type}} {{state}} {{filling}}\">\
|
|
189
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ChipsComponent, isStandalone: true, selector: "sa-chip", inputs: { id: "id", iconPath: "iconPath", text: "text", type: "type", state: "state", filling: "filling", iconPosition: "iconPosition", largeStateIcon: "largeStateIcon", largeStateText: "largeStateText" }, outputs: { onClickEvent: "onClickEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"chip {{type}} {{state}} {{filling}}\">\n <button type=\"button\" (click)=\"buttonClicked($event)\" id=\"icon-button_{{uuid}}\" class=\"btn_hide\"></button>\n <!-- (click)=\"buttonClicked()\" on button instead of label breaks whole thing -->\n <label for=\"icon-button_{{uuid}}\" class=\"svg-icon\" [style]=\"svgStyle\"\n [style.display]=\"((iconPosition == 'left' || iconPosition == 'both') && type != 'large') ? 'block' : 'none'\">\n </label>\n\n {{text}}\n\n <div class=\"second-svg-icon\" [style]=\"secondSvgStyle\" [style.display]=\"(type == 'large') ? 'block' : 'none'\"></div>\n\n {{type == 'large' ? largeStateText : \"\"}}\n\n <label for=\"icon-button_{{uuid}}\" class=\"svg-icon\" [style]=\"svgStyle\"\n [style.display]=\"((iconPosition == 'right' || iconPosition == 'both') && type != 'large') ? 'block' : 'none'\">\n </label>\n</div>\n", styles: [".regular{--chip-height: var(--medium-24px);--chip-padding: var(--small-4px) var(--small-8px);--chip-gap: var(--small-4px);--border-radius: var(--small-16px);--font-weight: 500;--line-height: 16px;--font-size: 12px }.small{--chip-height: var(--small-18px);--chip-padding: var(--small-4px) var(--small-8px);--chip-gap: var(--small-4px);--border-radius: var(--small-4px);--font-weight: 500;--line-height: 16px;--font-size: 11px }.large{--chip-height: 40px;--chip-padding: var(--small-12px) var(--medium-24px) var(--small-12px) var(--small-16px);--chip-gap: var(--small-8px);--border-radius: var(--small-16px) 0px;--font-weight: 600;--line-height: 20px;--font-size: 14px;background-color:var(--light-color)!important;color:var(--dark-color)!important;border:1px solid transparent!important}.primary{--light-color: var(--primary-50);--dark-color: var(--primary-500)}.secondary{--light-color: var(--secondary-50);--dark-color: var(--secondary-500)}.neutral{--light-color: var(--grey-50);--dark-color: var(--text-mediumemphasis)}.success{--light-color: var(--semantic-success-50);--dark-color: var(--semantic-success-500)}.error{--light-color: var(--semantic-error-50);--dark-color: var(--semantic-error-500)}.warning{--light-color: var(--semantic-yellow-50);--dark-color: var(--semantic-yellow-500)}.filled{--background-color: var(--light-color);--color: var(--dark-color);--border: 1px solid transparent}.outline{--background-color: none;--color: var(--dark-color);--border: 1px solid var(--dark-color)}.chip{display:flex;width:max-content;height:var(--chip-height);padding:var(--chip-padding);justify-content:center;align-items:center;gap:var(--chip-gap);flex-shrink:0;letter-spacing:.5px;box-sizing:border-box;font-family:var(--font);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);background-color:var(--background-color);color:var(--color);border-radius:var(--border-radius);border:var(--border);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none}.svg-icon{width:16px;height:16px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--dark-color);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.svg-icon:hover{cursor:pointer}.second-svg-icon{width:18px;height:18px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--dark-color);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.btn_hide{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
169
190
|
}
|
|
170
191
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ChipsComponent, decorators: [{
|
|
171
192
|
type: Component,
|
|
172
|
-
args: [{ selector: 'sa-chip', standalone: true, imports: [CommonModule], template: "<div class=\"chip {{type}} {{state}} {{filling}}\">\
|
|
193
|
+
args: [{ selector: 'sa-chip', standalone: true, imports: [CommonModule], template: "<div class=\"chip {{type}} {{state}} {{filling}}\">\n <button type=\"button\" (click)=\"buttonClicked($event)\" id=\"icon-button_{{uuid}}\" class=\"btn_hide\"></button>\n <!-- (click)=\"buttonClicked()\" on button instead of label breaks whole thing -->\n <label for=\"icon-button_{{uuid}}\" class=\"svg-icon\" [style]=\"svgStyle\"\n [style.display]=\"((iconPosition == 'left' || iconPosition == 'both') && type != 'large') ? 'block' : 'none'\">\n </label>\n\n {{text}}\n\n <div class=\"second-svg-icon\" [style]=\"secondSvgStyle\" [style.display]=\"(type == 'large') ? 'block' : 'none'\"></div>\n\n {{type == 'large' ? largeStateText : \"\"}}\n\n <label for=\"icon-button_{{uuid}}\" class=\"svg-icon\" [style]=\"svgStyle\"\n [style.display]=\"((iconPosition == 'right' || iconPosition == 'both') && type != 'large') ? 'block' : 'none'\">\n </label>\n</div>\n", styles: [".regular{--chip-height: var(--medium-24px);--chip-padding: var(--small-4px) var(--small-8px);--chip-gap: var(--small-4px);--border-radius: var(--small-16px);--font-weight: 500;--line-height: 16px;--font-size: 12px }.small{--chip-height: var(--small-18px);--chip-padding: var(--small-4px) var(--small-8px);--chip-gap: var(--small-4px);--border-radius: var(--small-4px);--font-weight: 500;--line-height: 16px;--font-size: 11px }.large{--chip-height: 40px;--chip-padding: var(--small-12px) var(--medium-24px) var(--small-12px) var(--small-16px);--chip-gap: var(--small-8px);--border-radius: var(--small-16px) 0px;--font-weight: 600;--line-height: 20px;--font-size: 14px;background-color:var(--light-color)!important;color:var(--dark-color)!important;border:1px solid transparent!important}.primary{--light-color: var(--primary-50);--dark-color: var(--primary-500)}.secondary{--light-color: var(--secondary-50);--dark-color: var(--secondary-500)}.neutral{--light-color: var(--grey-50);--dark-color: var(--text-mediumemphasis)}.success{--light-color: var(--semantic-success-50);--dark-color: var(--semantic-success-500)}.error{--light-color: var(--semantic-error-50);--dark-color: var(--semantic-error-500)}.warning{--light-color: var(--semantic-yellow-50);--dark-color: var(--semantic-yellow-500)}.filled{--background-color: var(--light-color);--color: var(--dark-color);--border: 1px solid transparent}.outline{--background-color: none;--color: var(--dark-color);--border: 1px solid var(--dark-color)}.chip{display:flex;width:max-content;height:var(--chip-height);padding:var(--chip-padding);justify-content:center;align-items:center;gap:var(--chip-gap);flex-shrink:0;letter-spacing:.5px;box-sizing:border-box;font-family:var(--font);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);background-color:var(--background-color);color:var(--color);border-radius:var(--border-radius);border:var(--border);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none}.svg-icon{width:16px;height:16px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--dark-color);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.svg-icon:hover{cursor:pointer}.second-svg-icon{width:18px;height:18px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--dark-color);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.btn_hide{display:none}\n"] }]
|
|
173
194
|
}], propDecorators: { id: [{
|
|
174
195
|
type: Input
|
|
175
196
|
}], iconPath: [{
|
|
@@ -223,11 +244,11 @@ class AvatarComponent {
|
|
|
223
244
|
});
|
|
224
245
|
}
|
|
225
246
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
226
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: AvatarComponent, isStandalone: true, selector: "sa-avatar", inputs: { id: "id", imagePath: "imagePath", altText: "altText", size: "size" }, outputs: { onClickEvent: "onClickEvent", onMouseInEvent: "onMouseInEvent", onMouseOutEvent: "onMouseOutEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"avatar {{size}}\" (click)=\"avatarClicked($event)\" (mouseenter)=\"mouseEnter($event)\"\
|
|
247
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: AvatarComponent, isStandalone: true, selector: "sa-avatar", inputs: { id: "id", imagePath: "imagePath", altText: "altText", size: "size" }, outputs: { onClickEvent: "onClickEvent", onMouseInEvent: "onMouseInEvent", onMouseOutEvent: "onMouseOutEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"avatar {{size}}\" (click)=\"avatarClicked($event)\" (mouseenter)=\"mouseEnter($event)\"\n (mouseleave)=\"mouseLeave($event)\">\n <img *ngIf=\"imagePath\" class=\"avatar-img\" alt=\"{{altText}}\" src=\"{{imagePath}}\">\n <p *ngIf=\"!imagePath\" class=\"avatar-img\">{{altText}}</p>\n</div>\n", styles: [".extra-small{--width: var(--medium-24px);--height: var(--medium-24px)}.small{--width: 28px;--height: 28px}.medium{--width: 32px;--height: 32px}.large{--width: 36px;--height: 36px}.extra-large{--width: 40px;--height: 40px}.avatar{display:flex}.avatar-img{background-color:var(--primary-50);height:var(--height);width:var(--width);border-radius:var(--height);object-fit:cover;font-family:var(--font);font-size:11px;font-weight:500;line-height:var(--height);letter-spacing:.5px;text-align:center;overflow:none}.avatar:hover{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
227
248
|
}
|
|
228
249
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AvatarComponent, decorators: [{
|
|
229
250
|
type: Component,
|
|
230
|
-
args: [{ selector: 'sa-avatar', standalone: true, imports: [NgIf], template: "<div class=\"avatar {{size}}\" (click)=\"avatarClicked($event)\" (mouseenter)=\"mouseEnter($event)\"\
|
|
251
|
+
args: [{ selector: 'sa-avatar', standalone: true, imports: [NgIf], template: "<div class=\"avatar {{size}}\" (click)=\"avatarClicked($event)\" (mouseenter)=\"mouseEnter($event)\"\n (mouseleave)=\"mouseLeave($event)\">\n <img *ngIf=\"imagePath\" class=\"avatar-img\" alt=\"{{altText}}\" src=\"{{imagePath}}\">\n <p *ngIf=\"!imagePath\" class=\"avatar-img\">{{altText}}</p>\n</div>\n", styles: [".extra-small{--width: var(--medium-24px);--height: var(--medium-24px)}.small{--width: 28px;--height: 28px}.medium{--width: 32px;--height: 32px}.large{--width: 36px;--height: 36px}.extra-large{--width: 40px;--height: 40px}.avatar{display:flex}.avatar-img{background-color:var(--primary-50);height:var(--height);width:var(--width);border-radius:var(--height);object-fit:cover;font-family:var(--font);font-size:11px;font-weight:500;line-height:var(--height);letter-spacing:.5px;text-align:center;overflow:none}.avatar:hover{cursor:pointer}\n"] }]
|
|
231
252
|
}], propDecorators: { id: [{
|
|
232
253
|
type: Input
|
|
233
254
|
}], imagePath: [{
|
|
@@ -301,7 +322,7 @@ class GridCellComponent {
|
|
|
301
322
|
return false; // not sure what this return value does.
|
|
302
323
|
}
|
|
303
324
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GridCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
304
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: GridCellComponent, isStandalone: true, selector: "lib-grid-cell", outputs: { onClickButtonEvent: "onClickButtonEvent", onClickChipEvent: "onClickChipEvent", onClickLinkEvent: "onClickLinkEvent", onClickAvatarEvent: "onClickAvatarEvent" }, ngImport: i0, template: "<div class=\"grid-cell {{params.cellType}}\">\
|
|
325
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: GridCellComponent, isStandalone: true, selector: "lib-grid-cell", outputs: { onClickButtonEvent: "onClickButtonEvent", onClickChipEvent: "onClickChipEvent", onClickLinkEvent: "onClickLinkEvent", onClickAvatarEvent: "onClickAvatarEvent" }, ngImport: i0, template: "<div class=\"grid-cell {{params.cellType}}\">\n\n <img class=\"icons\" src={{params.iconPath}} [style.display]=\"(params.viewLeadingIcon) ? 'block' : 'none'\" alt=\"\">\n\n <sa-avatar [id]=\"params.avatarConfig?.id\" [altText]=\"params.avatarConfig?.altText\"\n [imagePath]=\"params.avatarConfig?.imagePath\" [size]=\"params.avatarConfig?.size\"\n [style.display]=\"(params.viewAvatar) ? 'block' : 'none'\" (onClickEvent)=\"avatarClicked($event)\">\n </sa-avatar>\n\n <div class=\"grid-text\" [style.display]=\"(params.viewText) ? 'block' : 'none'\">\n <div [style.display]=\"(params.text) ? 'block' : 'none'\" (click)=\"linkClicked()\" class=\"main-text\">{{params.text}}\n </div>\n\n <div [style.display]=\"(params.subText) ? 'block' : 'none'\" class=\"sub-text\">{{params.subText}}</div>\n </div>\n\n <img class=\"icons\" src={{params.iconPath}} [style.display]=\"(params.viewTrailingIcon) ? 'block' : 'none'\" alt=\"\">\n\n\n <sa-chip *ngFor=\"let config of params.chipConfig, let i = index\" [id]=\"config.id\" [filling]=\"config.filling\"\n id=\"chip_{{rowNum}}_{{config.id}}\" [iconPath]=\"config.iconPath\" [iconPosition]=\"config.iconPosition\"\n [largeStateIcon]=\"config.largeStateIcon\" [state]=\"config.state\" [type]=\"config.type\" [text]=\"config.text\"\n [style.display]=\"(params.viewChip) ? 'block' : 'none'\" (onClickEvent)=\"chipClicked($event)\"></sa-chip>\n\n <sa-button [iconPosition]=\"params.buttonConfig?.iconPosition\" [ImagePath]=\"params.buttonConfig?.imagePath\"\n [id]=\"params.buttonConfig?.id\" [size]=\"params.buttonConfig?.size\" [state]=\"params.buttonConfig?.state\"\n [type]=\"params.buttonConfig?.type\" [text]=\"params.buttonConfig?.text\" [href]=\"params.buttonConfig?.href\"\n [hrefTarget]=\"params.buttonConfig?.hrefTarget\" [style.display]=\"(params.viewButton) ? 'block' : 'none'\"\n (onClickEvent)=\"buttonClicked($event)\"></sa-button>\n\n</div>\n", styles: [".header{--bg: var(--primary-50);--color: var(--text-highemphasis);--border: none;--flex-direction: left}.header:hover{cursor:pointer}.row{--color: var(--text-highemphasis);--cursor: default;--border: var(--grey-50);--flex-direction: left}.numeric{--color: var(--text-highemphasis);--cursor: default;--border: var(--grey-50);--flex-direction: right}.interactive{--color: var(--primary-500);--cursor: pointer;--border: var(--grey-50);--flex-direction: left}.grid-cell{display:flex;height:48px;padding:var(--small-12px);justify-content:var(--flex-direction);align-items:center;gap:var(--small-8px);flex-shrink:0;font-family:var(--font);box-sizing:border-box;border-bottom:1px solid var(--border);width:calc(100% - 20px);background-color:var(--bg)}.grid-text{display:flex;flex-direction:column}.main-text{color:var(--color);font-size:14px;font-weight:400;height:20px;line-height:20px}.main-text:hover{cursor:var(--cursor)}.sub-text{font-size:11px;font-weight:400;height:16px;line-height:16px;color:var(--text-mediumemphasis)}.icons{width:var(--medium-20px);height:var(--medium-20px)}\n"], dependencies: [{ kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText"], outputs: ["onClickEvent"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
|
|
305
326
|
}
|
|
306
327
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GridCellComponent, decorators: [{
|
|
307
328
|
type: Component,
|
|
@@ -310,7 +331,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
310
331
|
ChipsComponent,
|
|
311
332
|
ButtonComponent,
|
|
312
333
|
NgFor
|
|
313
|
-
], template: "<div class=\"grid-cell {{params.cellType}}\">\
|
|
334
|
+
], template: "<div class=\"grid-cell {{params.cellType}}\">\n\n <img class=\"icons\" src={{params.iconPath}} [style.display]=\"(params.viewLeadingIcon) ? 'block' : 'none'\" alt=\"\">\n\n <sa-avatar [id]=\"params.avatarConfig?.id\" [altText]=\"params.avatarConfig?.altText\"\n [imagePath]=\"params.avatarConfig?.imagePath\" [size]=\"params.avatarConfig?.size\"\n [style.display]=\"(params.viewAvatar) ? 'block' : 'none'\" (onClickEvent)=\"avatarClicked($event)\">\n </sa-avatar>\n\n <div class=\"grid-text\" [style.display]=\"(params.viewText) ? 'block' : 'none'\">\n <div [style.display]=\"(params.text) ? 'block' : 'none'\" (click)=\"linkClicked()\" class=\"main-text\">{{params.text}}\n </div>\n\n <div [style.display]=\"(params.subText) ? 'block' : 'none'\" class=\"sub-text\">{{params.subText}}</div>\n </div>\n\n <img class=\"icons\" src={{params.iconPath}} [style.display]=\"(params.viewTrailingIcon) ? 'block' : 'none'\" alt=\"\">\n\n\n <sa-chip *ngFor=\"let config of params.chipConfig, let i = index\" [id]=\"config.id\" [filling]=\"config.filling\"\n id=\"chip_{{rowNum}}_{{config.id}}\" [iconPath]=\"config.iconPath\" [iconPosition]=\"config.iconPosition\"\n [largeStateIcon]=\"config.largeStateIcon\" [state]=\"config.state\" [type]=\"config.type\" [text]=\"config.text\"\n [style.display]=\"(params.viewChip) ? 'block' : 'none'\" (onClickEvent)=\"chipClicked($event)\"></sa-chip>\n\n <sa-button [iconPosition]=\"params.buttonConfig?.iconPosition\" [ImagePath]=\"params.buttonConfig?.imagePath\"\n [id]=\"params.buttonConfig?.id\" [size]=\"params.buttonConfig?.size\" [state]=\"params.buttonConfig?.state\"\n [type]=\"params.buttonConfig?.type\" [text]=\"params.buttonConfig?.text\" [href]=\"params.buttonConfig?.href\"\n [hrefTarget]=\"params.buttonConfig?.hrefTarget\" [style.display]=\"(params.viewButton) ? 'block' : 'none'\"\n (onClickEvent)=\"buttonClicked($event)\"></sa-button>\n\n</div>\n", styles: [".header{--bg: var(--primary-50);--color: var(--text-highemphasis);--border: none;--flex-direction: left}.header:hover{cursor:pointer}.row{--color: var(--text-highemphasis);--cursor: default;--border: var(--grey-50);--flex-direction: left}.numeric{--color: var(--text-highemphasis);--cursor: default;--border: var(--grey-50);--flex-direction: right}.interactive{--color: var(--primary-500);--cursor: pointer;--border: var(--grey-50);--flex-direction: left}.grid-cell{display:flex;height:48px;padding:var(--small-12px);justify-content:var(--flex-direction);align-items:center;gap:var(--small-8px);flex-shrink:0;font-family:var(--font);box-sizing:border-box;border-bottom:1px solid var(--border);width:calc(100% - 20px);background-color:var(--bg)}.grid-text{display:flex;flex-direction:column}.main-text{color:var(--color);font-size:14px;font-weight:400;height:20px;line-height:20px}.main-text:hover{cursor:var(--cursor)}.sub-text{font-size:11px;font-weight:400;height:16px;line-height:16px;color:var(--text-mediumemphasis)}.icons{width:var(--medium-20px);height:var(--medium-20px)}\n"] }]
|
|
314
335
|
}], propDecorators: { onClickButtonEvent: [{
|
|
315
336
|
type: Output
|
|
316
337
|
}], onClickChipEvent: [{
|
|
@@ -330,11 +351,11 @@ class HeaderComponent {
|
|
|
330
351
|
num ? this.mainButtonClicked.emit() : this.helperButtonClicked.emit();
|
|
331
352
|
}
|
|
332
353
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
333
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: HeaderComponent, isStandalone: true, selector: "sa-header", inputs: { info: "info", headerName: "headerName", chipConfig: "chipConfig", buttonHelper: "buttonHelper", buttonMain: "buttonMain" }, outputs: { mainButtonClicked: "mainButtonClicked", helperButtonClicked: "helperButtonClicked" }, ngImport: i0, template: "<div class=\"header\">\
|
|
354
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: HeaderComponent, isStandalone: true, selector: "sa-header", inputs: { info: "info", headerName: "headerName", chipConfig: "chipConfig", buttonHelper: "buttonHelper", buttonMain: "buttonMain" }, outputs: { mainButtonClicked: "mainButtonClicked", helperButtonClicked: "helperButtonClicked" }, ngImport: i0, template: "<div class=\"header\">\n <div class=\"header-content\">\n <div class=\"heading\">\n <div class=\"header-name\">{{headerName}}</div>\n <div *ngFor=\"let chip of chipConfig\">\n <sa-chip type=\"regular\" [state]=\"chip[1]\" filling=\"filled\" [text]=\"chip[0]\"></sa-chip>\n </div>\n </div>\n <div class=\"header-info\">\n <div class=\"info-item\" *ngFor=\"let item of info\">\n <img [src]=\"item[1]\" alt=\"\">\n {{item[0]}}\n </div>\n </div>\n </div>\n <div class=\"actions\">\n <sa-button *ngIf=\"buttonHelper\" (onClickEvent)=\"clicked(0)\" [text]=\"buttonHelper\" type=\"transparent\" size=\"medium\"\n state=\"default\">\n </sa-button>\n <sa-button *ngIf=\"buttonMain\" (onClickEvent)=\"clicked(1)\" [text]=\"buttonMain\" type=\"primary\" size=\"medium\"\n state=\"default\"></sa-button>\n </div>\n</div>\n", styles: [".header{width:100%;height:96px;font-family:var(--font);padding:var(--medium-20px, 20px) var(--medium-32px, 32px);display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--Structural-White, #FFF)}.header-content{display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.heading{display:flex;justify-content:flex-start;align-items:center;gap:var(--small-8px, 8px)}.header-name{font-size:22px;font-style:normal;font-weight:500;line-height:28px}.header-info{display:flex;gap:var(--small-12px, 12px)}.info-item{display:flex;justify-content:center;align-items:center;gap:var(--small-4px, 4px);font-size:12px;font-style:normal;font-weight:400;line-height:16px;color:var(--text-mediumemphasis)}.info-item img{width:20px;height:20px}.actions{display:flex;gap:var(--small-12px, 12px)}\n"], dependencies: [{ kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText"], outputs: ["onClickEvent"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
334
355
|
}
|
|
335
356
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: HeaderComponent, decorators: [{
|
|
336
357
|
type: Component,
|
|
337
|
-
args: [{ selector: 'sa-header', standalone: true, imports: [ChipsComponent, NgFor, ButtonComponent, NgIf], template: "<div class=\"header\">\
|
|
358
|
+
args: [{ selector: 'sa-header', standalone: true, imports: [ChipsComponent, NgFor, ButtonComponent, NgIf], template: "<div class=\"header\">\n <div class=\"header-content\">\n <div class=\"heading\">\n <div class=\"header-name\">{{headerName}}</div>\n <div *ngFor=\"let chip of chipConfig\">\n <sa-chip type=\"regular\" [state]=\"chip[1]\" filling=\"filled\" [text]=\"chip[0]\"></sa-chip>\n </div>\n </div>\n <div class=\"header-info\">\n <div class=\"info-item\" *ngFor=\"let item of info\">\n <img [src]=\"item[1]\" alt=\"\">\n {{item[0]}}\n </div>\n </div>\n </div>\n <div class=\"actions\">\n <sa-button *ngIf=\"buttonHelper\" (onClickEvent)=\"clicked(0)\" [text]=\"buttonHelper\" type=\"transparent\" size=\"medium\"\n state=\"default\">\n </sa-button>\n <sa-button *ngIf=\"buttonMain\" (onClickEvent)=\"clicked(1)\" [text]=\"buttonMain\" type=\"primary\" size=\"medium\"\n state=\"default\"></sa-button>\n </div>\n</div>\n", styles: [".header{width:100%;height:96px;font-family:var(--font);padding:var(--medium-20px, 20px) var(--medium-32px, 32px);display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--Structural-White, #FFF)}.header-content{display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.heading{display:flex;justify-content:flex-start;align-items:center;gap:var(--small-8px, 8px)}.header-name{font-size:22px;font-style:normal;font-weight:500;line-height:28px}.header-info{display:flex;gap:var(--small-12px, 12px)}.info-item{display:flex;justify-content:center;align-items:center;gap:var(--small-4px, 4px);font-size:12px;font-style:normal;font-weight:400;line-height:16px;color:var(--text-mediumemphasis)}.info-item img{width:20px;height:20px}.actions{display:flex;gap:var(--small-12px, 12px)}\n"] }]
|
|
338
359
|
}], propDecorators: { info: [{
|
|
339
360
|
type: Input
|
|
340
361
|
}], headerName: [{
|
|
@@ -414,11 +435,11 @@ class IconComponent {
|
|
|
414
435
|
}
|
|
415
436
|
}
|
|
416
437
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
417
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: IconComponent, isStandalone: true, selector: "sa-icon", inputs: { img: "img", icon: "icon", size: "size", color: "color", iconPath: "iconPath", iconUrl: "iconUrl" }, usesOnChanges: true, ngImport: i0, template: "@if(img){\
|
|
438
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: IconComponent, isStandalone: true, selector: "sa-icon", inputs: { img: "img", icon: "icon", size: "size", color: "color", iconPath: "iconPath", iconUrl: "iconUrl" }, usesOnChanges: true, ngImport: i0, template: "@if(img){\n<img [src]=\"img\" [height]=\"size\" [width]=\"size\">\n}@else{\n<span class=\"sa-icon\" [ngClass]=\"{'url-icon': iconUrl}\" [innerHTML]=\"svgIcon\" [ngStyle]=\"iconStyles\">\n\n</span>\n}\n\n<!-- <img *ngIf=\"svgIcon\" [src]=\"svgIcon\" [ngStyle]=\"iconStyles\" alt=\"icon\"> -->", styles: [".sa-icon{display:inline-flex;align-items:center;justify-content:center;color:inherit;font-size:inherit}.sa-icon>svg{width:1em;height:1em;vertical-align:middle}.sa-icon.url-icon>svg{width:fit-content;height:fit-content}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
418
439
|
}
|
|
419
440
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: IconComponent, decorators: [{
|
|
420
441
|
type: Component,
|
|
421
|
-
args: [{ selector: 'sa-icon', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "@if(img){\
|
|
442
|
+
args: [{ selector: 'sa-icon', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "@if(img){\n<img [src]=\"img\" [height]=\"size\" [width]=\"size\">\n}@else{\n<span class=\"sa-icon\" [ngClass]=\"{'url-icon': iconUrl}\" [innerHTML]=\"svgIcon\" [ngStyle]=\"iconStyles\">\n\n</span>\n}\n\n<!-- <img *ngIf=\"svgIcon\" [src]=\"svgIcon\" [ngStyle]=\"iconStyles\" alt=\"icon\"> -->", styles: [".sa-icon{display:inline-flex;align-items:center;justify-content:center;color:inherit;font-size:inherit}.sa-icon>svg{width:1em;height:1em;vertical-align:middle}.sa-icon.url-icon>svg{width:fit-content;height:fit-content}\n"] }]
|
|
422
443
|
}], ctorParameters: () => [], propDecorators: { img: [{
|
|
423
444
|
type: Input,
|
|
424
445
|
args: ['img']
|
|
@@ -477,11 +498,11 @@ class ToastComponent {
|
|
|
477
498
|
});
|
|
478
499
|
}
|
|
479
500
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
480
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: ToastComponent, isStandalone: true, selector: "sa-toast", inputs: { finishPercentage: "finishPercentage", heading: "heading", subHeading: "subHeading", statusIcon: "statusIcon", status: "status", firstButtonName: "firstButtonName", secondButtonName: "secondButtonName", closable: "closable", filled: "filled", width: "width" }, outputs: { toastEvent: "toastEvent", firstButton: "firstButton", secondButton: "secondButton", closed: "closed" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"toast\" [ngStyle]=\"toastStyles\">\
|
|
501
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: ToastComponent, isStandalone: true, selector: "sa-toast", inputs: { finishPercentage: "finishPercentage", heading: "heading", subHeading: "subHeading", statusIcon: "statusIcon", status: "status", firstButtonName: "firstButtonName", secondButtonName: "secondButtonName", closable: "closable", filled: "filled", width: "width" }, outputs: { toastEvent: "toastEvent", firstButton: "firstButton", secondButton: "secondButton", closed: "closed" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"toast\" [ngStyle]=\"toastStyles\">\n <div class=\"content\">\n <div class=\"toast-icon {{status}}\">\n <sa-icon [icon]=\"statusIcon\" size=\"24\"></sa-icon>\n <!-- <img [src]=\"statusIcon\" alt=\"\"> -->\n </div>\n <div class=\"head-subhead\">\n <p class=\"heading\">{{heading}}</p>\n <p class=\"subheading\">{{subHeading}}</p>\n </div>\n @if(closable){\n <!-- <img class=\"cross\" (click)=\"closeToast()\" [src]=\"crossmark\" alt=\"\"> -->\n <sa-icon class=\"cross\" icon=\"crossmark\" size=\"24\" (click)=\"closeToast()\"></sa-icon>\n }\n </div>\n <!-- <div class=\"controls\">\n <sa-button *ngIf=\"firstButtonName\" (onClickEvent)=\"clicked(0)\" [text]=\"firstButtonName\" type=\"transparent\"\n size=\"medium\" state=\"default\">\n </sa-button>\n <sa-button *ngIf=\"secondButtonName\" (onClickEvent)=\"clicked(1)\" [text]=\"secondButtonName\" type=\"outline\"\n size=\"medium\" state=\"default\">\n </sa-button>\n </div> -->\n\n <!-- <div *ngIf=\"finishPercentage >= 0\" class=\"progress-bar\">\n <div class=\"progress-done\" [style.width]=\"finishPercentage+'%'\"></div>\n <div class=\"progress-left\" [style.width]=\"100-finishPercentage+'%'\"></div>\n </div> -->\n</div>", styles: [".toast{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:var(--small-12px, 12px);gap:var(--small-16px, 16px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--structural-white, #FFF);box-shadow:0 0 12px #0000000d;font-family:var(--font)}.cross{cursor:pointer}.heading{font-size:16px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:.15px}.toast-icon{display:flex;justify-content:center;border-radius:50%;flex:.5}.positive{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-success-50);background-color:var(--semantic-success-50)}.negative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-error-50);background-color:var(--semantic-error-50)}.tentative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-yellow-50);background-color:var(--semantic-yellow-50)}.toast-icon img{width:24px;height:24px}.subheading{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.5px}.heading,.subheading{margin:0}.content{display:flex;justify-content:center;align-items:center;width:100%;gap:var(--small-12px, 12px)}.head-subhead{justify-content:space-between;display:flex;flex:5;flex-direction:column;gap:var(--small-4px, 4px)}.controls{width:100%;display:flex;justify-content:flex-end;align-items:center;gap:var(--small-12px, 12px)}.progress-bar{display:flex;width:100%}.progress-done{height:3px;background-color:var(--primary-500);border-radius:2px}.progress-left{height:3px;background-color:#c5c5c5;border-top-right-radius:2px;border-bottom-right-radius:2px}sa-icon{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl"] }] }); }
|
|
481
502
|
}
|
|
482
503
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ToastComponent, decorators: [{
|
|
483
504
|
type: Component,
|
|
484
|
-
args: [{ selector: 'sa-toast', standalone: true, imports: [CommonModule, ButtonComponent, IconComponent, ButtonComponent, MatIcon, NgIf], template: "<div class=\"toast\" [ngStyle]=\"toastStyles\">\
|
|
505
|
+
args: [{ selector: 'sa-toast', standalone: true, imports: [CommonModule, ButtonComponent, IconComponent, ButtonComponent, MatIcon, NgIf], template: "<div class=\"toast\" [ngStyle]=\"toastStyles\">\n <div class=\"content\">\n <div class=\"toast-icon {{status}}\">\n <sa-icon [icon]=\"statusIcon\" size=\"24\"></sa-icon>\n <!-- <img [src]=\"statusIcon\" alt=\"\"> -->\n </div>\n <div class=\"head-subhead\">\n <p class=\"heading\">{{heading}}</p>\n <p class=\"subheading\">{{subHeading}}</p>\n </div>\n @if(closable){\n <!-- <img class=\"cross\" (click)=\"closeToast()\" [src]=\"crossmark\" alt=\"\"> -->\n <sa-icon class=\"cross\" icon=\"crossmark\" size=\"24\" (click)=\"closeToast()\"></sa-icon>\n }\n </div>\n <!-- <div class=\"controls\">\n <sa-button *ngIf=\"firstButtonName\" (onClickEvent)=\"clicked(0)\" [text]=\"firstButtonName\" type=\"transparent\"\n size=\"medium\" state=\"default\">\n </sa-button>\n <sa-button *ngIf=\"secondButtonName\" (onClickEvent)=\"clicked(1)\" [text]=\"secondButtonName\" type=\"outline\"\n size=\"medium\" state=\"default\">\n </sa-button>\n </div> -->\n\n <!-- <div *ngIf=\"finishPercentage >= 0\" class=\"progress-bar\">\n <div class=\"progress-done\" [style.width]=\"finishPercentage+'%'\"></div>\n <div class=\"progress-left\" [style.width]=\"100-finishPercentage+'%'\"></div>\n </div> -->\n</div>", styles: [".toast{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:var(--small-12px, 12px);gap:var(--small-16px, 16px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--structural-white, #FFF);box-shadow:0 0 12px #0000000d;font-family:var(--font)}.cross{cursor:pointer}.heading{font-size:16px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:.15px}.toast-icon{display:flex;justify-content:center;border-radius:50%;flex:.5}.positive{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-success-50);background-color:var(--semantic-success-50)}.negative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-error-50);background-color:var(--semantic-error-50)}.tentative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-yellow-50);background-color:var(--semantic-yellow-50)}.toast-icon img{width:24px;height:24px}.subheading{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.5px}.heading,.subheading{margin:0}.content{display:flex;justify-content:center;align-items:center;width:100%;gap:var(--small-12px, 12px)}.head-subhead{justify-content:space-between;display:flex;flex:5;flex-direction:column;gap:var(--small-4px, 4px)}.controls{width:100%;display:flex;justify-content:flex-end;align-items:center;gap:var(--small-12px, 12px)}.progress-bar{display:flex;width:100%}.progress-done{height:3px;background-color:var(--primary-500);border-radius:2px}.progress-left{height:3px;background-color:#c5c5c5;border-top-right-radius:2px;border-bottom-right-radius:2px}sa-icon{display:flex}\n"] }]
|
|
485
506
|
}], propDecorators: { finishPercentage: [{
|
|
486
507
|
type: Input
|
|
487
508
|
}], heading: [{
|
|
@@ -580,7 +601,7 @@ class FormSelectComponent extends FieldType {
|
|
|
580
601
|
}
|
|
581
602
|
}
|
|
582
603
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
583
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: FormSelectComponent, isStandalone: true, selector: "lib-form-select", usesInheritance: true, ngImport: i0, template: "<div [style.visibility]=\"(openState || topLabel) ? 'visible' : 'hidden'\" class=\"clicked-label\">{{params.label}}</div>\
|
|
604
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: FormSelectComponent, isStandalone: true, selector: "lib-form-select", usesInheritance: true, ngImport: i0, template: "<div [style.visibility]=\"(openState || topLabel) ? 'visible' : 'hidden'\" class=\"clicked-label\">{{params.label}}</div>\n<div class=\"ng-select-field {{openState ? 'activated' : 'idle'}} {{field.props.disabled ? 'disabled' : ''}}\">\n\n <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"left-icon svg-icon\" [style]=\"svgStyle\"\n (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n *ngIf=\"(params.dropIconPosition == 'left' || params.dropIconPosition == 'both')\">\n </div>\n\n <ng-select (change)=\"checkForZero($event)\" (remove)=\"shiftLabel('removed')\" (clear)=\"shiftLabel('cleared')\"\n (search)=\"openClose(true)\" (focus)=\"openClose(true)\" (blur)=\" openClose(false)\" [isOpen]=\"openState\"\n [placeholder]=\"placeholderLabel\" bindLabel=\"name\" [items]=\"selectables\" [multiple]=\"params.multiple\"\n [formControl]=\"formControl\" [style] [formlyAttributes]=\"field\" [searchable]=\"field.props['searchable']\">\n <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n <div *ngFor=\"let item of (items ? items.slice(startInd,startInd+labelLimit): [])\">\n <sa-chip (onClickEvent)=\" (!field.props.disabled) ? clear(item) : null\" [id]=\"item.id\"\n [iconPath]=\"params.iconPath\" [text]=\"item.name\" [type]=\"params.type\"\n [state]=\"field.props.disabled ? 'neutral' : params.state\" [filling]=\"params.filling\"\n [iconPosition]=\"params.iconPosition\">\n </sa-chip>\n </div>\n <div (click)=\"shiftLabel('clicked')\" class=\"ng-value overflow-label\" *ngIf=\"items.length > (startInd+labelLimit)\">\n <sa-chip text=\"+{{items.length-(startInd+labelLimit)}}\" type=\"regular\" state=\"default\" filling=\"filled\">\n </sa-chip>\n </div>\n <div (click)=\"shiftLabel('cleared')\" *ngIf=\"startInd == items.length-labelLimit\" class=\"ng-value overflow-label\">\n <sa-chip text=\"...\" type=\"regular\" state=\"default\" filling=\"filled\">\n </sa-chip>\n </div>\n </ng-template>\n </ng-select>\n\n <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"right-icon svg-icon\" [style]=\"svgStyle\"\n (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\">\n </div>\n\n</div>\n<div class=\"support-label\">{{params.supportText}}</div>", styles: [".idle{--border: 1px solid var(--grey-50)}.activated{--border: 1px solid var(--primary-300)}.disabled{border:1px solid var(--grey-50)!important}.ng-select-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.ng-select-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-family:var(--font);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.ng-select{width:inherit;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0}.ng-select ::ng-deep .ng-select-container{display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;font-family:var(--font);box-sizing:border-box;border:none}.ng-select ::ng-deep .ng-dropdown-panel{margin-top:2px;border:1px solid var(--grey-50);box-shadow:none!important}.ng-select ::ng-deep .ng-select-container{box-shadow:none!important;position:relative!important;z-index:1!important}.ng-select ::ng-deep .ng-value-container{padding:0!important;flex-wrap:nowrap!important;display:flex;justify-content:flex-start;gap:5px;overflow-x:hidden}.ng-select ::ng-deep .ng-value{flex:none;margin:0!important}.overflow-label{padding:0 5px;cursor:pointer}.ng-select ::ng-deep .ng-placeholder{padding:0!important;position:inherit!important;color:var(--text-lowemphasis)}.ng-select ::ng-deep .ng-input{padding:0!important;position:inherit!important}.ng-select ::ng-deep .ng-clear-wrapper{z-index:9;display:flex;margin-left:5px}.ng-select ::ng-deep .ng-arrow{border-color:none!important;border-style:none!important;border-width:0!important}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:20px;height:20px;background-color:gray}.svg-icon:hover{cursor:pointer}.ng-select ::ng-deep .ng-arrow-wrapper,::ng-deep .ng-select-filtered .ng-select-container .ng-value-container .ng-value{display:none}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.clicked-label{position:relative;width:max-content;font-family:var(--font);font-size:11px;font-style:normal;font-weight:500;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:0 var(--small-8px);margin-left:12px;margin-bottom:-8px;z-index:99;background-color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i3$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3$1.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText"], outputs: ["onClickEvent"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
|
|
584
605
|
}
|
|
585
606
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormSelectComponent, decorators: [{
|
|
586
607
|
type: Component,
|
|
@@ -592,7 +613,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
592
613
|
ChipsComponent,
|
|
593
614
|
NgIf,
|
|
594
615
|
NgFor
|
|
595
|
-
], template: "<div [style.visibility]=\"(openState || topLabel) ? 'visible' : 'hidden'\" class=\"clicked-label\">{{params.label}}</div>\
|
|
616
|
+
], template: "<div [style.visibility]=\"(openState || topLabel) ? 'visible' : 'hidden'\" class=\"clicked-label\">{{params.label}}</div>\n<div class=\"ng-select-field {{openState ? 'activated' : 'idle'}} {{field.props.disabled ? 'disabled' : ''}}\">\n\n <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"left-icon svg-icon\" [style]=\"svgStyle\"\n (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n *ngIf=\"(params.dropIconPosition == 'left' || params.dropIconPosition == 'both')\">\n </div>\n\n <ng-select (change)=\"checkForZero($event)\" (remove)=\"shiftLabel('removed')\" (clear)=\"shiftLabel('cleared')\"\n (search)=\"openClose(true)\" (focus)=\"openClose(true)\" (blur)=\" openClose(false)\" [isOpen]=\"openState\"\n [placeholder]=\"placeholderLabel\" bindLabel=\"name\" [items]=\"selectables\" [multiple]=\"params.multiple\"\n [formControl]=\"formControl\" [style] [formlyAttributes]=\"field\" [searchable]=\"field.props['searchable']\">\n <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n <div *ngFor=\"let item of (items ? items.slice(startInd,startInd+labelLimit): [])\">\n <sa-chip (onClickEvent)=\" (!field.props.disabled) ? clear(item) : null\" [id]=\"item.id\"\n [iconPath]=\"params.iconPath\" [text]=\"item.name\" [type]=\"params.type\"\n [state]=\"field.props.disabled ? 'neutral' : params.state\" [filling]=\"params.filling\"\n [iconPosition]=\"params.iconPosition\">\n </sa-chip>\n </div>\n <div (click)=\"shiftLabel('clicked')\" class=\"ng-value overflow-label\" *ngIf=\"items.length > (startInd+labelLimit)\">\n <sa-chip text=\"+{{items.length-(startInd+labelLimit)}}\" type=\"regular\" state=\"default\" filling=\"filled\">\n </sa-chip>\n </div>\n <div (click)=\"shiftLabel('cleared')\" *ngIf=\"startInd == items.length-labelLimit\" class=\"ng-value overflow-label\">\n <sa-chip text=\"...\" type=\"regular\" state=\"default\" filling=\"filled\">\n </sa-chip>\n </div>\n </ng-template>\n </ng-select>\n\n <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"right-icon svg-icon\" [style]=\"svgStyle\"\n (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\">\n </div>\n\n</div>\n<div class=\"support-label\">{{params.supportText}}</div>", styles: [".idle{--border: 1px solid var(--grey-50)}.activated{--border: 1px solid var(--primary-300)}.disabled{border:1px solid var(--grey-50)!important}.ng-select-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.ng-select-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-family:var(--font);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.ng-select{width:inherit;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0}.ng-select ::ng-deep .ng-select-container{display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;font-family:var(--font);box-sizing:border-box;border:none}.ng-select ::ng-deep .ng-dropdown-panel{margin-top:2px;border:1px solid var(--grey-50);box-shadow:none!important}.ng-select ::ng-deep .ng-select-container{box-shadow:none!important;position:relative!important;z-index:1!important}.ng-select ::ng-deep .ng-value-container{padding:0!important;flex-wrap:nowrap!important;display:flex;justify-content:flex-start;gap:5px;overflow-x:hidden}.ng-select ::ng-deep .ng-value{flex:none;margin:0!important}.overflow-label{padding:0 5px;cursor:pointer}.ng-select ::ng-deep .ng-placeholder{padding:0!important;position:inherit!important;color:var(--text-lowemphasis)}.ng-select ::ng-deep .ng-input{padding:0!important;position:inherit!important}.ng-select ::ng-deep .ng-clear-wrapper{z-index:9;display:flex;margin-left:5px}.ng-select ::ng-deep .ng-arrow{border-color:none!important;border-style:none!important;border-width:0!important}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:20px;height:20px;background-color:gray}.svg-icon:hover{cursor:pointer}.ng-select ::ng-deep .ng-arrow-wrapper,::ng-deep .ng-select-filtered .ng-select-container .ng-value-container .ng-value{display:none}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.clicked-label{position:relative;width:max-content;font-family:var(--font);font-size:11px;font-style:normal;font-weight:500;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:0 var(--small-8px);margin-left:12px;margin-bottom:-8px;z-index:99;background-color:#fff}\n"] }]
|
|
596
617
|
}] });
|
|
597
618
|
|
|
598
619
|
let nextId$2 = 0; // used to give unique ids to inputs used in html
|
|
@@ -637,11 +658,11 @@ class StepperComponent extends FieldType {
|
|
|
637
658
|
});
|
|
638
659
|
}
|
|
639
660
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: StepperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
640
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: StepperComponent, isStandalone: true, selector: "sa-stepper", inputs: { latestStep: "latestStep", editable: "editable", stepLabels: "stepLabels", doneIcon: "doneIcon" }, outputs: { stepped: "stepped" }, usesInheritance: true, ngImport: i0, template: "<div class=\"stepper {{isDisabled ? 'disabled' : 'active'}}\">\
|
|
661
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: StepperComponent, isStandalone: true, selector: "sa-stepper", inputs: { latestStep: "latestStep", editable: "editable", stepLabels: "stepLabels", doneIcon: "doneIcon" }, outputs: { stepped: "stepped" }, usesInheritance: true, ngImport: i0, template: "<div class=\"stepper {{isDisabled ? 'disabled' : 'active'}}\">\n <div class=\"steps\" *ngFor=\"let label of stepLabels; let i = index\">\n <input id=\"stepper-{{uuid}}-{{i}}\" (change)=\"update(i)\" name=\"stepper-radio-{{uuid}}\"\n [checked]=\"i == latestStep ? true: false\" class=\"step-hide\" type=\"radio\">\n <div\n class=\"label-wrapper {{i < latestStep ? 'done' : ''}} {{i > latestStep ? 'default' : ''}} {{i == latestStep ? 'latest' : ''}}\">\n <label [style]=\"i < latestStep ? tickIcon : ''\" for=\"stepper-{{uuid}}-{{i}}\"\n class=\"step-label-icon {{i > latestStep ? 'undone' : ''}}\">\n </label>\n <label for=\"stepper-{{uuid}}-{{i}}\" class=\"step-label-text\">{{label.name}}</label>\n </div>\n <div *ngIf=\" i !=stepLabels.length-1\" class=\"line {{i < latestStep ? 'done' : 'default'}}\"></div>\n </div>\n</div>\n", styles: [".stepper{display:flex;width:max-content;justify-content:center;align-items:center;font-family:var(--font)}.active{--main-bg: var(--primary-500);--main-line: var(--primary-500)}.disabled{--main-bg: var(--grey-100);--main-line: var(--grey-50)}.done{--bg-line: var(--main-line);--bg: var(--main-bg);--border: none}.default{--bg-line: var(--grey-50);--bg: var(--grey-100);--border: 4px solid white}.latest{--bg: white;--border: 4px solid var(--main-bg)}.steps{display:flex;justify-content:center;align-items:center;position:relative}.line{width:140px;height:2px;background-color:var(--bg-line);transition:.25s}.label-wrapper{width:16px;height:16px;height:fit-content;border-radius:16px;background-color:var(--bg);display:flex;justify-content:center}.step-label-icon{display:flex;justify-content:center;width:16px;height:16px;border-radius:16px;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;background-position:center;background-color:#fff;border:var(--border);box-sizing:border-box;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;cursor:pointer}.undone{background-color:var(--grey-100)}.step-label-text{color:var(--text-mediumemphasis, #697079);position:absolute;top:20px;cursor:pointer}.step-hide{display:none}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
641
662
|
}
|
|
642
663
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: StepperComponent, decorators: [{
|
|
643
664
|
type: Component,
|
|
644
|
-
args: [{ selector: 'sa-stepper', standalone: true, imports: [NgFor, NgIf], template: "<div class=\"stepper {{isDisabled ? 'disabled' : 'active'}}\">\
|
|
665
|
+
args: [{ selector: 'sa-stepper', standalone: true, imports: [NgFor, NgIf], template: "<div class=\"stepper {{isDisabled ? 'disabled' : 'active'}}\">\n <div class=\"steps\" *ngFor=\"let label of stepLabels; let i = index\">\n <input id=\"stepper-{{uuid}}-{{i}}\" (change)=\"update(i)\" name=\"stepper-radio-{{uuid}}\"\n [checked]=\"i == latestStep ? true: false\" class=\"step-hide\" type=\"radio\">\n <div\n class=\"label-wrapper {{i < latestStep ? 'done' : ''}} {{i > latestStep ? 'default' : ''}} {{i == latestStep ? 'latest' : ''}}\">\n <label [style]=\"i < latestStep ? tickIcon : ''\" for=\"stepper-{{uuid}}-{{i}}\"\n class=\"step-label-icon {{i > latestStep ? 'undone' : ''}}\">\n </label>\n <label for=\"stepper-{{uuid}}-{{i}}\" class=\"step-label-text\">{{label.name}}</label>\n </div>\n <div *ngIf=\" i !=stepLabels.length-1\" class=\"line {{i < latestStep ? 'done' : 'default'}}\"></div>\n </div>\n</div>\n", styles: [".stepper{display:flex;width:max-content;justify-content:center;align-items:center;font-family:var(--font)}.active{--main-bg: var(--primary-500);--main-line: var(--primary-500)}.disabled{--main-bg: var(--grey-100);--main-line: var(--grey-50)}.done{--bg-line: var(--main-line);--bg: var(--main-bg);--border: none}.default{--bg-line: var(--grey-50);--bg: var(--grey-100);--border: 4px solid white}.latest{--bg: white;--border: 4px solid var(--main-bg)}.steps{display:flex;justify-content:center;align-items:center;position:relative}.line{width:140px;height:2px;background-color:var(--bg-line);transition:.25s}.label-wrapper{width:16px;height:16px;height:fit-content;border-radius:16px;background-color:var(--bg);display:flex;justify-content:center}.step-label-icon{display:flex;justify-content:center;width:16px;height:16px;border-radius:16px;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;background-position:center;background-color:#fff;border:var(--border);box-sizing:border-box;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;cursor:pointer}.undone{background-color:var(--grey-100)}.step-label-text{color:var(--text-mediumemphasis, #697079);position:absolute;top:20px;cursor:pointer}.step-hide{display:none}\n"] }]
|
|
645
666
|
}], propDecorators: { latestStep: [{
|
|
646
667
|
type: Input
|
|
647
668
|
}], editable: [{
|
|
@@ -675,11 +696,11 @@ class ToolTipComponent {
|
|
|
675
696
|
this.toolTipSkipped.emit();
|
|
676
697
|
}
|
|
677
698
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ToolTipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
678
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ToolTipComponent, isStandalone: true, selector: "sa-tool-tip", inputs: { messages: "messages", pointerPosition: "pointerPosition" }, outputs: { toolTipSkipped: "toolTipSkipped", toolTipSeen: "toolTipSeen" }, ngImport: i0, template: "<div class=\"tool-tip-vertical\">\
|
|
699
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ToolTipComponent, isStandalone: true, selector: "sa-tool-tip", inputs: { messages: "messages", pointerPosition: "pointerPosition" }, outputs: { toolTipSkipped: "toolTipSkipped", toolTipSeen: "toolTipSeen" }, ngImport: i0, template: "<div class=\"tool-tip-vertical\">\n <div class=\"tool-tip-pointer-icon pointer-top\" *ngIf=\"pointerPosition == 'top'\"></div>\n <div class=\"tool-tip-horizontal\">\n <div class=\"tool-tip-pointer-icon pointer-left\" *ngIf=\"pointerPosition == 'left'\"></div>\n <div class=\"tool-tip\">\n <div class=\"tool-tip-content\">\n <div class=\"tool-tip-heading\">Heading</div>\n <div *ngFor=\"let msg of messages, let i = index\" class=\"tool-tip-message {{msgInd != i ? 'hidden-msg': ''}}\">\n {{msg}}\n </div>\n </div>\n <div class=\"tool-tip-break\">\n </div>\n <div class=\"tool-tip-controls\">\n <div class=\"tool-tip-navigate\">\n <img class=\"left-icon tool-tip-navigate-icon\" (click)=\"updateMsgInd(-1)\" [src]=\"arrowIcon\" alt=\"\">\n {{msgInd+1}} of {{messages.length}}\n <img class=\"right-icon tool-tip-navigate-icon\" (click)=\"updateMsgInd(1)\" [src]=\"arrowIcon\" alt=\"\">\n </div>\n <div class=\"tool-tip-control-buttons\">\n <sa-button (onClickEvent)=\"skipToolTip()\" class=\"skip-button\" text=\"Skip\" type=\"transparent\" size=\"medium\"\n state=\"default\"></sa-button>\n <sa-button (onClickEvent)=\"updateMsgInd(1)\" text=\"Next\" type=\"primary\" size=\"medium\" state=\"default\">\n </sa-button>\n </div>\n </div>\n </div>\n <div class=\"tool-tip-pointer-icon pointer-right\" *ngIf=\"pointerPosition == 'right'\"></div>\n </div>\n <div class=\"tool-tip-pointer-icon pointer-bottom\" *ngIf=\"pointerPosition == 'bottom'\"></div>\n</div>\n", styles: [".tool-tip-horizontal{display:flex;width:max-content;justify-content:center;align-items:center}.tool-tip-vertical{display:flex;flex-direction:column;width:max-content;justify-content:center;align-items:center}.tool-tip{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--small-16px, 16px);width:375px;height:auto;box-sizing:border-box;padding:var(--medium-20px, 20px) var(--medium-24px, 24px);border-radius:var(--small-4px, 4px);background:var(--grey-700, #161E27);font-family:var(--font)}.tool-tip-content{display:flex;width:100%;flex-direction:column;gap:var(--small-8px, 8px)}.tool-tip-heading{font-size:16px;font-style:normal;color:var(--text-white, #FFF);font-weight:600;line-height:24px;letter-spacing:.15px}.tool-tip-message{font-size:14px;color:var(--grey-50, #E9EAEB);font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.tool-tip-controls{display:flex;width:100%;justify-content:space-between;font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px}.tool-tip-navigate{color:var(--text-lowemphasis, #989DA3);display:flex;justify-content:center;align-items:center}.skip-button ::ng-deep .sa-button{color:var(--grey-100, #BABDC1)!important}.skip-button ::ng-deep .sa-button:hover{background-color:transparent}.tool-tip-navigate-icon{cursor:pointer}.left-icon{transform:rotate(180deg)}.tool-tip-control-buttons{display:flex;gap:4px}.tool-tip-break{width:100%;height:.5px;background:var(--grey-50, #E9EAEB)}.hidden-msg{display:none}.tool-tip-pointer-icon{display:flex;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:11px solid var(--grey-700, #161E27)}.pointer-left{transform:rotate(-90deg);margin-right:-3px}.pointer-right{transform:rotate(90deg);margin-left:-3px}.pointer-top{margin-bottom:-3px}.pointer-bottom{transform:rotate(180deg);margin-top:-3px}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
679
700
|
}
|
|
680
701
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ToolTipComponent, decorators: [{
|
|
681
702
|
type: Component,
|
|
682
|
-
args: [{ selector: 'sa-tool-tip', standalone: true, imports: [ButtonComponent, NgFor, NgIf], template: "<div class=\"tool-tip-vertical\">\
|
|
703
|
+
args: [{ selector: 'sa-tool-tip', standalone: true, imports: [ButtonComponent, NgFor, NgIf], template: "<div class=\"tool-tip-vertical\">\n <div class=\"tool-tip-pointer-icon pointer-top\" *ngIf=\"pointerPosition == 'top'\"></div>\n <div class=\"tool-tip-horizontal\">\n <div class=\"tool-tip-pointer-icon pointer-left\" *ngIf=\"pointerPosition == 'left'\"></div>\n <div class=\"tool-tip\">\n <div class=\"tool-tip-content\">\n <div class=\"tool-tip-heading\">Heading</div>\n <div *ngFor=\"let msg of messages, let i = index\" class=\"tool-tip-message {{msgInd != i ? 'hidden-msg': ''}}\">\n {{msg}}\n </div>\n </div>\n <div class=\"tool-tip-break\">\n </div>\n <div class=\"tool-tip-controls\">\n <div class=\"tool-tip-navigate\">\n <img class=\"left-icon tool-tip-navigate-icon\" (click)=\"updateMsgInd(-1)\" [src]=\"arrowIcon\" alt=\"\">\n {{msgInd+1}} of {{messages.length}}\n <img class=\"right-icon tool-tip-navigate-icon\" (click)=\"updateMsgInd(1)\" [src]=\"arrowIcon\" alt=\"\">\n </div>\n <div class=\"tool-tip-control-buttons\">\n <sa-button (onClickEvent)=\"skipToolTip()\" class=\"skip-button\" text=\"Skip\" type=\"transparent\" size=\"medium\"\n state=\"default\"></sa-button>\n <sa-button (onClickEvent)=\"updateMsgInd(1)\" text=\"Next\" type=\"primary\" size=\"medium\" state=\"default\">\n </sa-button>\n </div>\n </div>\n </div>\n <div class=\"tool-tip-pointer-icon pointer-right\" *ngIf=\"pointerPosition == 'right'\"></div>\n </div>\n <div class=\"tool-tip-pointer-icon pointer-bottom\" *ngIf=\"pointerPosition == 'bottom'\"></div>\n</div>\n", styles: [".tool-tip-horizontal{display:flex;width:max-content;justify-content:center;align-items:center}.tool-tip-vertical{display:flex;flex-direction:column;width:max-content;justify-content:center;align-items:center}.tool-tip{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--small-16px, 16px);width:375px;height:auto;box-sizing:border-box;padding:var(--medium-20px, 20px) var(--medium-24px, 24px);border-radius:var(--small-4px, 4px);background:var(--grey-700, #161E27);font-family:var(--font)}.tool-tip-content{display:flex;width:100%;flex-direction:column;gap:var(--small-8px, 8px)}.tool-tip-heading{font-size:16px;font-style:normal;color:var(--text-white, #FFF);font-weight:600;line-height:24px;letter-spacing:.15px}.tool-tip-message{font-size:14px;color:var(--grey-50, #E9EAEB);font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.tool-tip-controls{display:flex;width:100%;justify-content:space-between;font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px}.tool-tip-navigate{color:var(--text-lowemphasis, #989DA3);display:flex;justify-content:center;align-items:center}.skip-button ::ng-deep .sa-button{color:var(--grey-100, #BABDC1)!important}.skip-button ::ng-deep .sa-button:hover{background-color:transparent}.tool-tip-navigate-icon{cursor:pointer}.left-icon{transform:rotate(180deg)}.tool-tip-control-buttons{display:flex;gap:4px}.tool-tip-break{width:100%;height:.5px;background:var(--grey-50, #E9EAEB)}.hidden-msg{display:none}.tool-tip-pointer-icon{display:flex;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:11px solid var(--grey-700, #161E27)}.pointer-left{transform:rotate(-90deg);margin-right:-3px}.pointer-right{transform:rotate(90deg);margin-left:-3px}.pointer-top{margin-bottom:-3px}.pointer-bottom{transform:rotate(180deg);margin-top:-3px}\n"] }]
|
|
683
704
|
}], propDecorators: { messages: [{
|
|
684
705
|
type: Input
|
|
685
706
|
}], pointerPosition: [{
|
|
@@ -833,7 +854,7 @@ class CalendarHeaderComponent {
|
|
|
833
854
|
this.destroy$.next(); // will trigger unsubscription in takeUntil
|
|
834
855
|
}
|
|
835
856
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CalendarHeaderComponent, deps: [{ token: i2$1.MatCalendar }, { token: i2$2.DateAdapter }, { token: i2$1.MatDateRangePicker }, { token: MAT_DATE_FORMATS }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
836
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CalendarHeaderComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<div class=\"range-preset\">\
|
|
857
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CalendarHeaderComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<div class=\"range-preset\">\n <div class=\"preset\" *ngFor=\"let preset of presets, let i = index\">\n <label class=\"preset-label {{preset == selectedPreset ? 'preset-selected' : ''}}\"\n for=\"preset-radio-{{i}}\">{{preset}}</label>\n <input class=\"preset-radio\" (change)=\"presetChanged($event)\" [checked]=\"preset == selectedPreset\"\n id=\"preset-radio-{{i}}\" type=\"radio\" name=\"preset-radios-{{uuid}}\" value=\"{{preset}}\">\n </div>\n</div>\n\n<div class=\"header\">\n <button mat-icon-button (click)=\"previousClicked('month')\">\n <mat-icon>keyboard_arrow_left</mat-icon>\n </button>\n\n <button mat-button class=\"header-label\" (click)=\"changeView()\">{{ periodLabel }}</button>\n\n <button mat-icon-button (click)=\"nextClicked('month')\">\n <mat-icon>keyboard_arrow_right</mat-icon>\n </button>\n</div>\n", styles: [".header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--grey-50);margin-top:-4px;margin-bottom:var(--small-8px, 8px)}.header-label{font-family:Roboto;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.range-preset{width:180px;position:absolute;padding:var(--small-12px, 12px) 0 0 var(--medium-24px, 24px);box-sizing:border-box;margin-top:-9px;margin-left:-180px;height:356px;background-color:#fff;border-top:1px solid var(--grey-50);border-left:1px solid var(--grey-50);border-bottom:1px solid var(--grey-50);border-bottom-left-radius:var(--small-8px, 8px);border-top-left-radius:var(--small-8px, 8px);gap:var(--small-8px, 8px);display:flex;flex-direction:column}.preset{padding:var(--small-8px, 8px);display:flex;gap:var(--small-4px, 4px);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;color:var(--text-mediumemphasis);margin-bottom:-5px}.preset-radio,.preset-label{cursor:pointer}.preset-selected{color:var(--primary-500)}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }] }); }
|
|
837
858
|
}
|
|
838
859
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CalendarHeaderComponent, decorators: [{
|
|
839
860
|
type: Component,
|
|
@@ -841,7 +862,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
841
862
|
NgFor,
|
|
842
863
|
MatIconModule,
|
|
843
864
|
MatButton
|
|
844
|
-
], template: "<div class=\"range-preset\">\
|
|
865
|
+
], template: "<div class=\"range-preset\">\n <div class=\"preset\" *ngFor=\"let preset of presets, let i = index\">\n <label class=\"preset-label {{preset == selectedPreset ? 'preset-selected' : ''}}\"\n for=\"preset-radio-{{i}}\">{{preset}}</label>\n <input class=\"preset-radio\" (change)=\"presetChanged($event)\" [checked]=\"preset == selectedPreset\"\n id=\"preset-radio-{{i}}\" type=\"radio\" name=\"preset-radios-{{uuid}}\" value=\"{{preset}}\">\n </div>\n</div>\n\n<div class=\"header\">\n <button mat-icon-button (click)=\"previousClicked('month')\">\n <mat-icon>keyboard_arrow_left</mat-icon>\n </button>\n\n <button mat-button class=\"header-label\" (click)=\"changeView()\">{{ periodLabel }}</button>\n\n <button mat-icon-button (click)=\"nextClicked('month')\">\n <mat-icon>keyboard_arrow_right</mat-icon>\n </button>\n</div>\n", styles: [".header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--grey-50);margin-top:-4px;margin-bottom:var(--small-8px, 8px)}.header-label{font-family:Roboto;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.range-preset{width:180px;position:absolute;padding:var(--small-12px, 12px) 0 0 var(--medium-24px, 24px);box-sizing:border-box;margin-top:-9px;margin-left:-180px;height:356px;background-color:#fff;border-top:1px solid var(--grey-50);border-left:1px solid var(--grey-50);border-bottom:1px solid var(--grey-50);border-bottom-left-radius:var(--small-8px, 8px);border-top-left-radius:var(--small-8px, 8px);gap:var(--small-8px, 8px);display:flex;flex-direction:column}.preset{padding:var(--small-8px, 8px);display:flex;gap:var(--small-4px, 4px);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;color:var(--text-mediumemphasis);margin-bottom:-5px}.preset-radio,.preset-label{cursor:pointer}.preset-selected{color:var(--primary-500)}\n"] }]
|
|
845
866
|
}], ctorParameters: () => [{ type: i2$1.MatCalendar }, { type: i2$2.DateAdapter }, { type: i2$1.MatDateRangePicker }, { type: undefined, decorators: [{
|
|
846
867
|
type: Inject,
|
|
847
868
|
args: [MAT_DATE_FORMATS]
|
|
@@ -853,7 +874,7 @@ class DatepickerComponent extends FieldType {
|
|
|
853
874
|
this.CalendarHeaderComponent = CalendarHeaderComponent;
|
|
854
875
|
}
|
|
855
876
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
856
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DatepickerComponent, isStandalone: true, selector: "sa-datepicker", inputs: { range: "range" }, providers: [], usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"date-picker\">\
|
|
877
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DatepickerComponent, isStandalone: true, selector: "sa-datepicker", inputs: { range: "range" }, providers: [], usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"date-picker\">\n <mat-label>Choose a date</mat-label>\n <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"range\">\n <input formControlName=\"start\" matStartDate placeholder=\"Start date\">\n <input formControlName=\"end\" matEndDate placeholder=\"End date\">\n </mat-date-range-input>\n <mat-hint>MM/DD/YYYY</mat-hint>\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-date-range-picker [calendarHeaderComponent]=\"CalendarHeaderComponent\" #picker>\n </mat-date-range-picker>\n</mat-form-field>\n", styles: ["::ng-deep .cdk-overlay-container{--mat-datepicker-calendar-container-elevation-shadow: none;--mat-datepicker-calendar-container-shape: 0px;--mat-datepicker-calendar-date-selected-state-background-color: var(--primary-500);--mat-datepicker-calendar-date-hover-state-background-color: var(--grey-50);--mat-datepicker-calendar-date-in-range-state-background-color: var(--grey-50);--mat-datepicker-calendar-date-focus-state-background-color: var(--grey-50)}::ng-deep .cdk-overlay-container .mat-datepicker-popup{border-top:1px solid var(--grey-50);border-right:1px solid var(--grey-50);border-bottom:1px solid var(--grey-50);border-radius:var(--small-8px, 8px);height:356px;padding:12px;margin-top:0;margin-left:180px;background-color:#fff}::ng-deep .cdk-overlay-container .mat-datepicker-content .mat-calendar{box-shadow:none;height:300px}::ng-deep .mat-calendar-content .mat-calendar-table-header-divider{display:none}.date-picker{margin:30px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2$1.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$1.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$1.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$1.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatNativeDateModule }] }); }
|
|
857
878
|
}
|
|
858
879
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DatepickerComponent, decorators: [{
|
|
859
880
|
type: Component,
|
|
@@ -867,7 +888,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
867
888
|
CalendarHeaderComponent,
|
|
868
889
|
CommonModule,
|
|
869
890
|
MatNativeDateModule
|
|
870
|
-
], template: "<mat-form-field class=\"date-picker\">\
|
|
891
|
+
], template: "<mat-form-field class=\"date-picker\">\n <mat-label>Choose a date</mat-label>\n <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"range\">\n <input formControlName=\"start\" matStartDate placeholder=\"Start date\">\n <input formControlName=\"end\" matEndDate placeholder=\"End date\">\n </mat-date-range-input>\n <mat-hint>MM/DD/YYYY</mat-hint>\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-date-range-picker [calendarHeaderComponent]=\"CalendarHeaderComponent\" #picker>\n </mat-date-range-picker>\n</mat-form-field>\n", styles: ["::ng-deep .cdk-overlay-container{--mat-datepicker-calendar-container-elevation-shadow: none;--mat-datepicker-calendar-container-shape: 0px;--mat-datepicker-calendar-date-selected-state-background-color: var(--primary-500);--mat-datepicker-calendar-date-hover-state-background-color: var(--grey-50);--mat-datepicker-calendar-date-in-range-state-background-color: var(--grey-50);--mat-datepicker-calendar-date-focus-state-background-color: var(--grey-50)}::ng-deep .cdk-overlay-container .mat-datepicker-popup{border-top:1px solid var(--grey-50);border-right:1px solid var(--grey-50);border-bottom:1px solid var(--grey-50);border-radius:var(--small-8px, 8px);height:356px;padding:12px;margin-top:0;margin-left:180px;background-color:#fff}::ng-deep .cdk-overlay-container .mat-datepicker-content .mat-calendar{box-shadow:none;height:300px}::ng-deep .mat-calendar-content .mat-calendar-table-header-divider{display:none}.date-picker{margin:30px}\n"] }]
|
|
871
892
|
}], propDecorators: { range: [{
|
|
872
893
|
type: Input
|
|
873
894
|
}] } });
|
|
@@ -891,11 +912,11 @@ class TabsComponent {
|
|
|
891
912
|
this.tabChanged.emit(evt.target.value);
|
|
892
913
|
}
|
|
893
914
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
894
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TabsComponent, isStandalone: true, selector: "sa-tabs", inputs: { tabs: "tabs", type: "type", defaultTab: "defaultTab" }, outputs: { tabChanged: "tabChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"tab-wrapper {{type}}\">\
|
|
915
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TabsComponent, isStandalone: true, selector: "sa-tabs", inputs: { tabs: "tabs", type: "type", defaultTab: "defaultTab" }, outputs: { tabChanged: "tabChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"tab-wrapper {{type}}\">\n <div class=\"tabs\">\n <div *ngFor=\"let item of tabs, let i = index\" class=\"tab-item\">\n <input [checked]=\"(defaultTab == i) ? true : false\" [value]=\"i\" (change)=\"tabChange($event)\"\n id=\"tab-check-{{i}}-{{uuid}}\" class=\"tab-checks\" type=\"radio\" name=\"tab-checkbox-{{uuid}}\">\n <label for=\"tab-check-{{i}}-{{uuid}}\" class=\"tab-label\">\n <div *ngIf=\"item.iconPosition == 'left' || item.iconPosition == 'both'\" class=\"svg-icon\" [style]=\"svgStyle[i]\">\n </div>\n {{item.tabName}}\n <div *ngIf=\"item.iconPosition == 'right' || item.iconPosition == 'both'\" class=\"svg-icon\" [style]=\"svgStyle[i]\">\n </div>\n <div class=\"badge\" *ngIf=\"item.badgeContent\">{{item.badgeContent}}</div>\n </label>\n </div>\n </div>\n</div>\n", styles: [".box{--bg: var(--grey-50);--tab-bg: white;--border: none;--tab-border: none;--tab-border-radius: 2px;--icon-color: var(--text-mediumemphasis)}.inline{--bg: white;--tab-bg: white;--border: 1px solid var(--grey-50, #E9EAEB);--tab-border: var(--primary-500, #1B77E4);--tab-border-radius: none;--icon-color: var(--text-mediumemphasis)}.tab-wrapper{width:max-content;padding:var(--small-8px, 8px);background-color:var(--bg);border-radius:var(--Small-4px, 4px)}.tabs{display:flex;height:42px;gap:var(--small-8px, 8px);font-family:var(--font);border-bottom:var(--border)}.tab-item{display:flex;justify-content:center;align-items:center;gap:var(--small-8px, 8px)}.tab-label{display:flex;justify-content:center;align-items:center;gap:var(--small-4px, 4px);padding:var(--small-8px, 8px) var(--small-12px, 12px);border-bottom:none;transition:.1s;font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px;color:var(--text-mediumemphasis);cursor:pointer}.tab-checks{display:none}.tab-checks:checked+label{background-color:var(--tab-bg);border-bottom:2px solid var(--tab-border);border-radius:var(--tab-border-radius);color:var(--primary-500);--icon-color: var(--primary-500) }.tab-checks:checked+label .badge{width:auto;height:auto;padding:var(--Small-4px, 4px) var(--Small-12px, 12px);border-radius:16px;font-size:12px;font-style:normal;font-weight:500;line-height:16px;letter-spacing:.5px}.badge{width:var(--small-8px);height:var(--small-8px);border-radius:var(--small-8px);background-color:var(--secondary-500, #FE8235);color:#fff;margin-left:var(--small-4px);overflow:hidden;transition:.25s;font-size:0}.svg-icon{height:16px;width:16px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--icon-color)}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
895
916
|
}
|
|
896
917
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TabsComponent, decorators: [{
|
|
897
918
|
type: Component,
|
|
898
|
-
args: [{ selector: 'sa-tabs', standalone: true, imports: [NgFor, NgIf], template: "<div class=\"tab-wrapper {{type}}\">\
|
|
919
|
+
args: [{ selector: 'sa-tabs', standalone: true, imports: [NgFor, NgIf], template: "<div class=\"tab-wrapper {{type}}\">\n <div class=\"tabs\">\n <div *ngFor=\"let item of tabs, let i = index\" class=\"tab-item\">\n <input [checked]=\"(defaultTab == i) ? true : false\" [value]=\"i\" (change)=\"tabChange($event)\"\n id=\"tab-check-{{i}}-{{uuid}}\" class=\"tab-checks\" type=\"radio\" name=\"tab-checkbox-{{uuid}}\">\n <label for=\"tab-check-{{i}}-{{uuid}}\" class=\"tab-label\">\n <div *ngIf=\"item.iconPosition == 'left' || item.iconPosition == 'both'\" class=\"svg-icon\" [style]=\"svgStyle[i]\">\n </div>\n {{item.tabName}}\n <div *ngIf=\"item.iconPosition == 'right' || item.iconPosition == 'both'\" class=\"svg-icon\" [style]=\"svgStyle[i]\">\n </div>\n <div class=\"badge\" *ngIf=\"item.badgeContent\">{{item.badgeContent}}</div>\n </label>\n </div>\n </div>\n</div>\n", styles: [".box{--bg: var(--grey-50);--tab-bg: white;--border: none;--tab-border: none;--tab-border-radius: 2px;--icon-color: var(--text-mediumemphasis)}.inline{--bg: white;--tab-bg: white;--border: 1px solid var(--grey-50, #E9EAEB);--tab-border: var(--primary-500, #1B77E4);--tab-border-radius: none;--icon-color: var(--text-mediumemphasis)}.tab-wrapper{width:max-content;padding:var(--small-8px, 8px);background-color:var(--bg);border-radius:var(--Small-4px, 4px)}.tabs{display:flex;height:42px;gap:var(--small-8px, 8px);font-family:var(--font);border-bottom:var(--border)}.tab-item{display:flex;justify-content:center;align-items:center;gap:var(--small-8px, 8px)}.tab-label{display:flex;justify-content:center;align-items:center;gap:var(--small-4px, 4px);padding:var(--small-8px, 8px) var(--small-12px, 12px);border-bottom:none;transition:.1s;font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px;color:var(--text-mediumemphasis);cursor:pointer}.tab-checks{display:none}.tab-checks:checked+label{background-color:var(--tab-bg);border-bottom:2px solid var(--tab-border);border-radius:var(--tab-border-radius);color:var(--primary-500);--icon-color: var(--primary-500) }.tab-checks:checked+label .badge{width:auto;height:auto;padding:var(--Small-4px, 4px) var(--Small-12px, 12px);border-radius:16px;font-size:12px;font-style:normal;font-weight:500;line-height:16px;letter-spacing:.5px}.badge{width:var(--small-8px);height:var(--small-8px);border-radius:var(--small-8px);background-color:var(--secondary-500, #FE8235);color:#fff;margin-left:var(--small-4px);overflow:hidden;transition:.25s;font-size:0}.svg-icon{height:16px;width:16px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--icon-color)}\n"] }]
|
|
899
920
|
}], propDecorators: { tabs: [{
|
|
900
921
|
type: Input
|
|
901
922
|
}], type: [{
|
|
@@ -956,7 +977,7 @@ class LeftNavComponent {
|
|
|
956
977
|
});
|
|
957
978
|
}
|
|
958
979
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LeftNavComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
959
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: LeftNavComponent, isStandalone: true, selector: "sa-left-nav", inputs: { data: "data" }, outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "<div class=\"sa-left-nav\">\
|
|
980
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: LeftNavComponent, isStandalone: true, selector: "sa-left-nav", inputs: { data: "data" }, outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "<div class=\"sa-left-nav\">\n\n <div class=\"sa-left-nav-container\">\n <div class=\"sa-left-nav-logo\">\n <!-- <span class=\"sa-logo\"></span> -->\n <sa-icon icon=\"saras_white\" size=\"40\"></sa-icon>\n </div>\n <div class=\"sa-left-nav-items\">\n @if(data && data.items && !!data.items.length){\n <div class=\"sa-left-nav-items-container\">\n <ng-container *ngFor=\"let item of data.items; let i = index\">\n <div class=\"sa-left-nav-item\" [ngClass]=\"item.active ? 'active' : '' \"\n (click)=\"onNavItemClick(item, i, $event)\">\n\n <sa-icon class=\"sa-left-nav-item-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></sa-icon>\n <!-- <span class=\"sa-left-nav-item-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url + ')' }\"></span> -->\n </div>\n </ng-container>\n </div>\n }\n </div>\n <div class=\"sa-left-nav-footer\">\n @if(data && data.footerItems && !!data.footerItems.length){\n <div class=\"sa-left-nav-footer-container\">\n <ng-container *ngFor=\"let item of data.footerItems; let i = index\">\n <div class=\"sa-left-nav-footer-item\" [ngClass]=\"item.active ? 'active' : '' \"\n (click)=\"onFooterItemClick(item, i, $event)\">\n @if(item.type === 'AVATAR'){\n <!-- <span class=\"sa-left-nav-footer-name\">ET</span> -->\n <sa-avatar altText=\"ET\" [imagePath]=\"''\" size=\"extra-small\"></sa-avatar>\n }@else{\n <sa-icon class=\"sa-left-nav-footer-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></sa-icon>\n <!-- <span class=\"sa-left-nav-footer-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url || '' + ')' }\"></span> -->\n }\n </div>\n </ng-container>\n </div>\n }\n </div>\n </div>\n\n <div class=\"sa-left-nav-content\">\n <ng-content></ng-content>\n </div>\n\n</div>", styles: [".sa-left-nav{height:calc(100vh - 32px);width:calc(100vw - 32px);padding:8px;display:flex}.sa-left-nav-logo{display:block;height:40px;width:40px;margin:auto;padding:20px 0;border-bottom:1px #fff solid;min-height:40px}.sa-logo{height:40px;width:20px;display:block;margin:auto;background-position:center;background:url('data:image/svg+xml,<svg viewBox=\"0 0 20 38\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">%0A<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15.5544 13.5489C15.5034 13.5489 15.4525 13.5489 15.4021 13.5458V13.5489C15.4021 13.5489 14.8606 13.5359 13.0068 13.5253C9.95959 13.4986 8.83176 14.762 8.47545 15.3415H8.46938C8.2094 15.8311 8.13711 16.4024 8.26664 16.9437L8.26299 16.9549C8.28242 17.0836 8.5665 18.5783 11.0255 18.5267C12.9965 18.4851 14.1753 18.3619 14.6506 18.3016C15.2478 18.1597 15.869 18.1613 16.4656 18.3063C17.0621 18.4513 17.6178 18.7357 18.0892 19.1373C18.5605 19.539 18.9347 20.0469 19.1824 20.6213C19.4302 21.1957 19.5448 21.8211 19.5173 22.4485C19.4897 23.0758 19.3208 23.6882 19.0238 24.2375C18.7267 24.7869 18.3095 25.2583 17.8049 25.615C17.3003 25.9717 16.7219 26.2039 16.1151 26.2935C15.5083 26.3831 14.8894 26.3276 14.307 26.1314C14.0163 26.063 13.6253 25.9623 13.0985 25.8162C9.93167 25.0272 8.19258 29.8974 8.19258 29.8974L8.18651 29.9017C7.9393 30.6023 7.5091 31.22 6.94278 31.6874C6.37647 32.1549 5.69576 32.4541 4.97485 32.5526C4.25393 32.6511 3.52045 32.545 2.85434 32.2459C2.18822 31.9468 1.61502 31.4662 1.1972 30.8565C0.779378 30.2467 0.532961 29.5312 0.484798 28.7878C0.436635 28.0445 0.588573 27.3019 0.924059 26.6409C1.25955 25.9799 1.76571 25.426 2.38739 25.0393C3.00908 24.6527 3.72244 24.4483 4.44974 24.4483C4.56628 24.4483 4.68101 24.4539 4.79513 24.4638C5.23461 24.4601 6.14816 24.4639 7.98498 24.4956C11.1208 24.5528 11.5409 23.0537 11.5815 22.44C11.5815 22.3822 11.5779 22.3244 11.5779 22.2666C11.5779 22.2411 11.5779 22.2162 11.5779 22.1913C11.5783 22.1889 11.5783 22.1863 11.5779 22.1839C11.5524 21.7349 11.3963 21.3039 11.1298 20.9465C10.8632 20.5891 10.4984 20.3215 10.0822 20.1781C8.53918 19.4942 4.66948 19.8007 4.66948 19.8007V19.7957C4.60392 19.799 4.53796 19.8007 4.47159 19.8007C3.91809 19.8001 3.37082 19.6811 2.86485 19.4512C2.35888 19.2214 1.90539 18.8857 1.53344 18.4659C1.1615 18.046 0.879303 17.5512 0.704954 17.0131C0.530606 16.475 0.467948 15.9056 0.521 15.3413C0.574053 14.7769 0.741643 14.2302 1.01303 13.7361C1.28441 13.2419 1.6536 12.8113 2.09693 12.4719C2.54026 12.1325 3.04794 11.8917 3.58743 11.7649C4.12692 11.6382 4.68631 11.6283 5.22975 11.7359C6.48742 11.8174 7.74991 11.7689 8.99809 11.591C11.0176 11.3367 11.4783 10.1573 11.5779 9.5125V9.47955C11.5779 8.6747 11.8109 7.88792 12.2474 7.21872C12.684 6.54951 13.3045 6.02792 14.0304 5.71992C14.7564 5.41192 15.5552 5.33133 16.3259 5.48835C17.0965 5.64537 17.8044 6.03294 18.3601 6.60205C18.9157 7.17117 19.2941 7.89627 19.4474 8.68565C19.6006 9.47503 19.522 10.2933 19.2213 11.0368C18.9206 11.7804 18.4114 12.416 17.758 12.8631C17.1047 13.3103 16.3366 13.5489 15.5508 13.5489H15.5544Z\" fill=\"white\"/>%0A<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.47607 9.04307C3.69031 9.04307 2.92219 8.80441 2.26885 8.35726C1.61551 7.91011 1.10629 7.27456 0.805595 6.53097C0.504895 5.78739 0.426219 4.96917 0.579514 4.17979C0.732809 3.3904 1.11119 2.66531 1.66681 2.09619C2.22243 1.52708 2.93033 1.13951 3.701 0.982491C4.47167 0.825473 5.27049 0.90606 5.99644 1.21406C6.72239 1.52206 7.34287 2.04365 7.77942 2.71286C8.21597 3.38206 8.44897 4.16884 8.44897 4.97369C8.44897 6.05295 8.0304 7.08802 7.28534 7.85118C6.54028 8.61434 5.52975 9.04307 4.47607 9.04307Z\" fill=\"white\"/>%0A<path d=\"M15.5314 37.0946C17.7252 37.0946 19.5037 35.2729 19.5037 33.0258C19.5037 30.7787 17.7252 28.957 15.5314 28.957C13.3375 28.957 11.5591 30.7787 11.5591 33.0258C11.5591 35.2729 13.3375 37.0946 15.5314 37.0946Z\" fill=\"white\"/>%0A</svg>%0A') no-repeat}.sa-left-nav-container{height:inherit;width:64px;background-color:var(--primary-900);border-radius:8px;padding:8px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-evenly}.sa-left-nav-items{flex:1;overflow-y:auto}.sa-left-nav-items-container{padding:40px 0;height:100%;overflow:auto;box-sizing:border-box}.sa-left-nav-item,.sa-left-nav-footer-item{height:40px;width:40px;margin:8px auto;cursor:pointer;border-radius:4px;display:flex;justify-content:center;align-items:center}::-webkit-scrollbar{display:none}.sa-left-nav-footer-item{margin:4px auto}.sa-left-nav-item:hover,.sa-left-nav-item.active,.sa-left-nav-footer-item.active,.sa-left-nav-footer-item:hover{background-color:var(--primary-500)}.sa-left-nav-item-name,.sa-left-nav-item-icon,.sa-left-nav-footer-icon,.sa-left-nav-footer-name{height:24px;width:24px;display:block}.sa-left-nav-item-name,mn.sa-left-nav-footer-name{display:flex;justify-content:center;align-items:center}.sa-left-nav-footer{min-height:fit-content;border-top:1px solid #fff}.sa-left-nav-content{width:calc(100% - 64px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl"] }] }); }
|
|
960
981
|
}
|
|
961
982
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LeftNavComponent, decorators: [{
|
|
962
983
|
type: Component,
|
|
@@ -964,7 +985,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
964
985
|
CommonModule,
|
|
965
986
|
AvatarComponent,
|
|
966
987
|
IconComponent
|
|
967
|
-
], template: "<div class=\"sa-left-nav\">\
|
|
988
|
+
], template: "<div class=\"sa-left-nav\">\n\n <div class=\"sa-left-nav-container\">\n <div class=\"sa-left-nav-logo\">\n <!-- <span class=\"sa-logo\"></span> -->\n <sa-icon icon=\"saras_white\" size=\"40\"></sa-icon>\n </div>\n <div class=\"sa-left-nav-items\">\n @if(data && data.items && !!data.items.length){\n <div class=\"sa-left-nav-items-container\">\n <ng-container *ngFor=\"let item of data.items; let i = index\">\n <div class=\"sa-left-nav-item\" [ngClass]=\"item.active ? 'active' : '' \"\n (click)=\"onNavItemClick(item, i, $event)\">\n\n <sa-icon class=\"sa-left-nav-item-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></sa-icon>\n <!-- <span class=\"sa-left-nav-item-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url + ')' }\"></span> -->\n </div>\n </ng-container>\n </div>\n }\n </div>\n <div class=\"sa-left-nav-footer\">\n @if(data && data.footerItems && !!data.footerItems.length){\n <div class=\"sa-left-nav-footer-container\">\n <ng-container *ngFor=\"let item of data.footerItems; let i = index\">\n <div class=\"sa-left-nav-footer-item\" [ngClass]=\"item.active ? 'active' : '' \"\n (click)=\"onFooterItemClick(item, i, $event)\">\n @if(item.type === 'AVATAR'){\n <!-- <span class=\"sa-left-nav-footer-name\">ET</span> -->\n <sa-avatar altText=\"ET\" [imagePath]=\"''\" size=\"extra-small\"></sa-avatar>\n }@else{\n <sa-icon class=\"sa-left-nav-footer-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></sa-icon>\n <!-- <span class=\"sa-left-nav-footer-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url || '' + ')' }\"></span> -->\n }\n </div>\n </ng-container>\n </div>\n }\n </div>\n </div>\n\n <div class=\"sa-left-nav-content\">\n <ng-content></ng-content>\n </div>\n\n</div>", styles: [".sa-left-nav{height:calc(100vh - 32px);width:calc(100vw - 32px);padding:8px;display:flex}.sa-left-nav-logo{display:block;height:40px;width:40px;margin:auto;padding:20px 0;border-bottom:1px #fff solid;min-height:40px}.sa-logo{height:40px;width:20px;display:block;margin:auto;background-position:center;background:url('data:image/svg+xml,<svg viewBox=\"0 0 20 38\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">%0A<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15.5544 13.5489C15.5034 13.5489 15.4525 13.5489 15.4021 13.5458V13.5489C15.4021 13.5489 14.8606 13.5359 13.0068 13.5253C9.95959 13.4986 8.83176 14.762 8.47545 15.3415H8.46938C8.2094 15.8311 8.13711 16.4024 8.26664 16.9437L8.26299 16.9549C8.28242 17.0836 8.5665 18.5783 11.0255 18.5267C12.9965 18.4851 14.1753 18.3619 14.6506 18.3016C15.2478 18.1597 15.869 18.1613 16.4656 18.3063C17.0621 18.4513 17.6178 18.7357 18.0892 19.1373C18.5605 19.539 18.9347 20.0469 19.1824 20.6213C19.4302 21.1957 19.5448 21.8211 19.5173 22.4485C19.4897 23.0758 19.3208 23.6882 19.0238 24.2375C18.7267 24.7869 18.3095 25.2583 17.8049 25.615C17.3003 25.9717 16.7219 26.2039 16.1151 26.2935C15.5083 26.3831 14.8894 26.3276 14.307 26.1314C14.0163 26.063 13.6253 25.9623 13.0985 25.8162C9.93167 25.0272 8.19258 29.8974 8.19258 29.8974L8.18651 29.9017C7.9393 30.6023 7.5091 31.22 6.94278 31.6874C6.37647 32.1549 5.69576 32.4541 4.97485 32.5526C4.25393 32.6511 3.52045 32.545 2.85434 32.2459C2.18822 31.9468 1.61502 31.4662 1.1972 30.8565C0.779378 30.2467 0.532961 29.5312 0.484798 28.7878C0.436635 28.0445 0.588573 27.3019 0.924059 26.6409C1.25955 25.9799 1.76571 25.426 2.38739 25.0393C3.00908 24.6527 3.72244 24.4483 4.44974 24.4483C4.56628 24.4483 4.68101 24.4539 4.79513 24.4638C5.23461 24.4601 6.14816 24.4639 7.98498 24.4956C11.1208 24.5528 11.5409 23.0537 11.5815 22.44C11.5815 22.3822 11.5779 22.3244 11.5779 22.2666C11.5779 22.2411 11.5779 22.2162 11.5779 22.1913C11.5783 22.1889 11.5783 22.1863 11.5779 22.1839C11.5524 21.7349 11.3963 21.3039 11.1298 20.9465C10.8632 20.5891 10.4984 20.3215 10.0822 20.1781C8.53918 19.4942 4.66948 19.8007 4.66948 19.8007V19.7957C4.60392 19.799 4.53796 19.8007 4.47159 19.8007C3.91809 19.8001 3.37082 19.6811 2.86485 19.4512C2.35888 19.2214 1.90539 18.8857 1.53344 18.4659C1.1615 18.046 0.879303 17.5512 0.704954 17.0131C0.530606 16.475 0.467948 15.9056 0.521 15.3413C0.574053 14.7769 0.741643 14.2302 1.01303 13.7361C1.28441 13.2419 1.6536 12.8113 2.09693 12.4719C2.54026 12.1325 3.04794 11.8917 3.58743 11.7649C4.12692 11.6382 4.68631 11.6283 5.22975 11.7359C6.48742 11.8174 7.74991 11.7689 8.99809 11.591C11.0176 11.3367 11.4783 10.1573 11.5779 9.5125V9.47955C11.5779 8.6747 11.8109 7.88792 12.2474 7.21872C12.684 6.54951 13.3045 6.02792 14.0304 5.71992C14.7564 5.41192 15.5552 5.33133 16.3259 5.48835C17.0965 5.64537 17.8044 6.03294 18.3601 6.60205C18.9157 7.17117 19.2941 7.89627 19.4474 8.68565C19.6006 9.47503 19.522 10.2933 19.2213 11.0368C18.9206 11.7804 18.4114 12.416 17.758 12.8631C17.1047 13.3103 16.3366 13.5489 15.5508 13.5489H15.5544Z\" fill=\"white\"/>%0A<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.47607 9.04307C3.69031 9.04307 2.92219 8.80441 2.26885 8.35726C1.61551 7.91011 1.10629 7.27456 0.805595 6.53097C0.504895 5.78739 0.426219 4.96917 0.579514 4.17979C0.732809 3.3904 1.11119 2.66531 1.66681 2.09619C2.22243 1.52708 2.93033 1.13951 3.701 0.982491C4.47167 0.825473 5.27049 0.90606 5.99644 1.21406C6.72239 1.52206 7.34287 2.04365 7.77942 2.71286C8.21597 3.38206 8.44897 4.16884 8.44897 4.97369C8.44897 6.05295 8.0304 7.08802 7.28534 7.85118C6.54028 8.61434 5.52975 9.04307 4.47607 9.04307Z\" fill=\"white\"/>%0A<path d=\"M15.5314 37.0946C17.7252 37.0946 19.5037 35.2729 19.5037 33.0258C19.5037 30.7787 17.7252 28.957 15.5314 28.957C13.3375 28.957 11.5591 30.7787 11.5591 33.0258C11.5591 35.2729 13.3375 37.0946 15.5314 37.0946Z\" fill=\"white\"/>%0A</svg>%0A') no-repeat}.sa-left-nav-container{height:inherit;width:64px;background-color:var(--primary-900);border-radius:8px;padding:8px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-evenly}.sa-left-nav-items{flex:1;overflow-y:auto}.sa-left-nav-items-container{padding:40px 0;height:100%;overflow:auto;box-sizing:border-box}.sa-left-nav-item,.sa-left-nav-footer-item{height:40px;width:40px;margin:8px auto;cursor:pointer;border-radius:4px;display:flex;justify-content:center;align-items:center}::-webkit-scrollbar{display:none}.sa-left-nav-footer-item{margin:4px auto}.sa-left-nav-item:hover,.sa-left-nav-item.active,.sa-left-nav-footer-item.active,.sa-left-nav-footer-item:hover{background-color:var(--primary-500)}.sa-left-nav-item-name,.sa-left-nav-item-icon,.sa-left-nav-footer-icon,.sa-left-nav-footer-name{height:24px;width:24px;display:block}.sa-left-nav-item-name,mn.sa-left-nav-footer-name{display:flex;justify-content:center;align-items:center}.sa-left-nav-footer{min-height:fit-content;border-top:1px solid #fff}.sa-left-nav-content{width:calc(100% - 64px)}\n"] }]
|
|
968
989
|
}], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i1$2.Router }], propDecorators: { data: [{
|
|
969
990
|
type: Input,
|
|
970
991
|
args: ['data']
|
|
@@ -1244,7 +1265,7 @@ class FormInputComponent extends FieldType {
|
|
|
1244
1265
|
}
|
|
1245
1266
|
}
|
|
1246
1267
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1247
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: FormInputComponent, isStandalone: true, selector: "sa-input", inputs: { icon: "icon" }, viewQueries: [{ propertyName: "formInput", first: true, predicate: ["formInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"sa-input\" [ngClass]=\"disabled ? 'disabled' : '' \">\
|
|
1268
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: FormInputComponent, isStandalone: true, selector: "sa-input", inputs: { icon: "icon" }, viewQueries: [{ propertyName: "formInput", first: true, predicate: ["formInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"sa-input\" [ngClass]=\"disabled ? 'disabled' : '' \">\n @if(pretext || (!!inputVal.length && !!params?.placeholder)){\n <span class=\"sa-input-tag\">{{params?.placeholder}}</span>\n }\n <div class=\"sa-input-field\" [ngClass]=\"formControl.invalid && formControl.touched ? 'invalid' : 'idle' \"\n (click)=\"onInputFieldClick($event)\">\n @if(pretext){\n <div class=\"sa-input-pretext\">\n {{pretext}}\n </div>\n }\n <input matInput [type]=\"type\" value=\"\" [pattern]=\"type==='tel' ? '[0-9]' : '' \"\n [disabled]=\"field.props.disabled || false\" [placeholder]=\"!pretext && params?.placeholder || '' \"\n (focus)=\"onFocus()\" (blur)=\"onBlur()\" (input)=\"onInput($event)\" [(ngModel)]=\"inputVal\" #formInput />\n\n @if(params?.type === 'password'){\n <sa-icon class=\"flex\" icon=\"eye\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\n [ngClass]=\"!icon.name || icon.name === 'eye' ? '' : 'hide'\"></sa-icon>\n <sa-icon class=\"flex\" icon=\"eye_filled\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\n [ngClass]=\"icon.name === 'eye_filled' ? '' : 'hide'\"></sa-icon>\n }@else if(params?.type === 'email' && icon.show){\n <sa-icon class=\"flex\" [icon]=\"icon.name || 'checkmark'\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\n [ngClass]=\"showEmailIcon ? '' : 'hide'\"></sa-icon>\n }\n @else if(icon.name){\n <sa-icon class=\"flex\" [icon]=\"icon.name\" [size]=\"icon.size || '24'\" [color]=\"icon.color || ''\"\n [ngClass]=\"icon.show ? '' : 'hide'\"></sa-icon>\n }\n\n\n <!-- <sa-icon [icon]=\"icon\" size=\"24\" (click)=\"inputIconClick()\"></sa-icon> -->\n </div>\n @if((!formControl.valid) || (params && params.supportText)){\n <div class=\"support-label\" [ngClass]=\"formControl.invalid && formControl.touched ? 'invalid' : 'idle'\">\n <!-- {{!formControl.valid ? inputErrorText : params.supportText}} -->\n {{getFormSupportText()}}\n </div>\n }\n</div>", styles: ["*{--error-red: #e25c61 }.idle{--border: 1px solid var(--grey-50)}.focus{--border: 1px solid var(--primary-300)}.disabled .sa-input-field,[disabled]{background-color:#efefef4d}.sa-input-field>input,.sa-input-field>input:focus-visible{--border: 1px solid var(--primary-300);border:none;outline:none}.sa-input-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.sa-input-field>input:focus-visible~sa-icon,.sa-input-field:hover sa-icon{color:var(--primary-300)}.sa-input-field.invalid>input,.sa-input-field.invalid sa-icon,.sa-input-field.invalid .sa-input-pretext{color:#e25c61!important}.sa-input-field.invalid{--border: 1px solid #e25c61}.sa-input-field.invalid sa-icon{--form-email-icon-color: #e25c61}.sa-input-field.idle sa-icon{--form-email-icon-color: #33961F}.sa-input{position:relative;padding:8px 0}.sa-input-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.sa-input-field input{width:inherit}.sa-input-tag{position:absolute;background:#fff;padding:2px 6px;top:-1px;left:12px;z-index:2;font-size:11px;font-weight:500;line-height:16px;letter-spacing:.5px;text-align:left;color:var(--text-lowemphasis)}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.support-label.invalid{color:var(--error-red)}.hide{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl"] }] }); }
|
|
1248
1269
|
}
|
|
1249
1270
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormInputComponent, decorators: [{
|
|
1250
1271
|
type: Component,
|
|
@@ -1254,7 +1275,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
1254
1275
|
ReactiveFormsModule,
|
|
1255
1276
|
FormlyModule,
|
|
1256
1277
|
IconComponent
|
|
1257
|
-
], template: "<div class=\"sa-input\" [ngClass]=\"disabled ? 'disabled' : '' \">\
|
|
1278
|
+
], template: "<div class=\"sa-input\" [ngClass]=\"disabled ? 'disabled' : '' \">\n @if(pretext || (!!inputVal.length && !!params?.placeholder)){\n <span class=\"sa-input-tag\">{{params?.placeholder}}</span>\n }\n <div class=\"sa-input-field\" [ngClass]=\"formControl.invalid && formControl.touched ? 'invalid' : 'idle' \"\n (click)=\"onInputFieldClick($event)\">\n @if(pretext){\n <div class=\"sa-input-pretext\">\n {{pretext}}\n </div>\n }\n <input matInput [type]=\"type\" value=\"\" [pattern]=\"type==='tel' ? '[0-9]' : '' \"\n [disabled]=\"field.props.disabled || false\" [placeholder]=\"!pretext && params?.placeholder || '' \"\n (focus)=\"onFocus()\" (blur)=\"onBlur()\" (input)=\"onInput($event)\" [(ngModel)]=\"inputVal\" #formInput />\n\n @if(params?.type === 'password'){\n <sa-icon class=\"flex\" icon=\"eye\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\n [ngClass]=\"!icon.name || icon.name === 'eye' ? '' : 'hide'\"></sa-icon>\n <sa-icon class=\"flex\" icon=\"eye_filled\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\n [ngClass]=\"icon.name === 'eye_filled' ? '' : 'hide'\"></sa-icon>\n }@else if(params?.type === 'email' && icon.show){\n <sa-icon class=\"flex\" [icon]=\"icon.name || 'checkmark'\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\n [ngClass]=\"showEmailIcon ? '' : 'hide'\"></sa-icon>\n }\n @else if(icon.name){\n <sa-icon class=\"flex\" [icon]=\"icon.name\" [size]=\"icon.size || '24'\" [color]=\"icon.color || ''\"\n [ngClass]=\"icon.show ? '' : 'hide'\"></sa-icon>\n }\n\n\n <!-- <sa-icon [icon]=\"icon\" size=\"24\" (click)=\"inputIconClick()\"></sa-icon> -->\n </div>\n @if((!formControl.valid) || (params && params.supportText)){\n <div class=\"support-label\" [ngClass]=\"formControl.invalid && formControl.touched ? 'invalid' : 'idle'\">\n <!-- {{!formControl.valid ? inputErrorText : params.supportText}} -->\n {{getFormSupportText()}}\n </div>\n }\n</div>", styles: ["*{--error-red: #e25c61 }.idle{--border: 1px solid var(--grey-50)}.focus{--border: 1px solid var(--primary-300)}.disabled .sa-input-field,[disabled]{background-color:#efefef4d}.sa-input-field>input,.sa-input-field>input:focus-visible{--border: 1px solid var(--primary-300);border:none;outline:none}.sa-input-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.sa-input-field>input:focus-visible~sa-icon,.sa-input-field:hover sa-icon{color:var(--primary-300)}.sa-input-field.invalid>input,.sa-input-field.invalid sa-icon,.sa-input-field.invalid .sa-input-pretext{color:#e25c61!important}.sa-input-field.invalid{--border: 1px solid #e25c61}.sa-input-field.invalid sa-icon{--form-email-icon-color: #e25c61}.sa-input-field.idle sa-icon{--form-email-icon-color: #33961F}.sa-input{position:relative;padding:8px 0}.sa-input-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.sa-input-field input{width:inherit}.sa-input-tag{position:absolute;background:#fff;padding:2px 6px;top:-1px;left:12px;z-index:2;font-size:11px;font-weight:500;line-height:16px;letter-spacing:.5px;text-align:left;color:var(--text-lowemphasis)}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.support-label.invalid{color:var(--error-red)}.hide{display:none}\n"] }]
|
|
1258
1279
|
}], ctorParameters: () => [], propDecorators: { formInput: [{
|
|
1259
1280
|
type: ViewChild,
|
|
1260
1281
|
args: ['formInput']
|
|
@@ -1285,11 +1306,11 @@ class CardComponent {
|
|
|
1285
1306
|
}
|
|
1286
1307
|
}
|
|
1287
1308
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1288
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CardComponent, isStandalone: true, selector: "sa-card", inputs: { title: "title", chip: "chip", body: "body", avatar: "avatar", icon: "icon", iconSize: "iconSize", width: "width", column: "column" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"sa-card\" [ngStyle]=\"cardStyles\">\
|
|
1309
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CardComponent, isStandalone: true, selector: "sa-card", inputs: { title: "title", chip: "chip", body: "body", avatar: "avatar", icon: "icon", iconSize: "iconSize", width: "width", column: "column" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"sa-card\" [ngStyle]=\"cardStyles\">\n <div class=\"sa-card-wrapper\" [ngClass]=\"column ? 'column' : ''\">\n <div class=\"\" [ngClass]=\"avatar ? 'sa-card-img' : 'sa-card-icon'\">\n @if(avatar){\n <img [src]=\"avatar\" />\n }@else if(icon){\n <sa-icon [icon]=\"icon\" [size]=\"iconSize\"></sa-icon>\n }@else{\n <ng-content select=\"sa-card-icon\"></ng-content>\n }\n @if(column){\n <ng-content select=\"sa-card-title-actions\"></ng-content>\n }\n </div>\n <div class=\"sa-card-container\">\n @if(title){\n <div class=\"sa-card-title-container\">\n <div class=\"sa-card-title\">{{title}}</div>\n @if(chip){\n <sa-chip [text]=\"chip.text\" [type]=\"chip.type\" [state]=\"chip.state\"></sa-chip>\n }\n <ng-content select=\"sa-card-title-actions\"></ng-content>\n\n </div>\n }\n @if(body){\n <div class=\"sa-card-body\">\n {{body}}\n </div>\n }\n <ng-content select=\"sa-card-footer-actions\"></ng-content>\n </div>\n </div>\n</div>", styles: ["*{font-family:var(--font)}.sa-card-wrapper{display:flex;border:1px solid var(--grey-50);border-radius:6px;padding:12px;background:var(--structural-white)}.sa-card-wrapper.column{flex-direction:column}.sa-card-img,.sa-card-icon{margin-right:12px}.column .sa-card-img,.column .sa-card-icon{margin:0 0 12px;display:flex;justify-content:space-between}.sa-card-img img{height:auto;width:200px}.sa-card-icon span{background-repeat:no-repeat;background-size:cover;background-position:center;display:block;height:24px;width:24px}.sa-card-container{display:flex;flex-direction:column;justify-content:space-between;width:-webkit-fill-available}.sa-card-title-container{display:flex;justify-content:space-between}.column .sa-card-title-container{flex-direction:column;margin-bottom:8px}.sa-card-title{font-size:16px;font-weight:600;line-height:24px;margin-bottom:4px}.sa-card-body{font-size:14px;font-weight:400;line-height:20px;letter-spacing:.25px;text-align:left;color:var(--grey-300);flex:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText"], outputs: ["onClickEvent"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl"] }] }); }
|
|
1289
1310
|
}
|
|
1290
1311
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardComponent, decorators: [{
|
|
1291
1312
|
type: Component,
|
|
1292
|
-
args: [{ selector: 'sa-card', standalone: true, imports: [CommonModule, ChipsComponent, IconComponent], template: "<div class=\"sa-card\" [ngStyle]=\"cardStyles\">\
|
|
1313
|
+
args: [{ selector: 'sa-card', standalone: true, imports: [CommonModule, ChipsComponent, IconComponent], template: "<div class=\"sa-card\" [ngStyle]=\"cardStyles\">\n <div class=\"sa-card-wrapper\" [ngClass]=\"column ? 'column' : ''\">\n <div class=\"\" [ngClass]=\"avatar ? 'sa-card-img' : 'sa-card-icon'\">\n @if(avatar){\n <img [src]=\"avatar\" />\n }@else if(icon){\n <sa-icon [icon]=\"icon\" [size]=\"iconSize\"></sa-icon>\n }@else{\n <ng-content select=\"sa-card-icon\"></ng-content>\n }\n @if(column){\n <ng-content select=\"sa-card-title-actions\"></ng-content>\n }\n </div>\n <div class=\"sa-card-container\">\n @if(title){\n <div class=\"sa-card-title-container\">\n <div class=\"sa-card-title\">{{title}}</div>\n @if(chip){\n <sa-chip [text]=\"chip.text\" [type]=\"chip.type\" [state]=\"chip.state\"></sa-chip>\n }\n <ng-content select=\"sa-card-title-actions\"></ng-content>\n\n </div>\n }\n @if(body){\n <div class=\"sa-card-body\">\n {{body}}\n </div>\n }\n <ng-content select=\"sa-card-footer-actions\"></ng-content>\n </div>\n </div>\n</div>", styles: ["*{font-family:var(--font)}.sa-card-wrapper{display:flex;border:1px solid var(--grey-50);border-radius:6px;padding:12px;background:var(--structural-white)}.sa-card-wrapper.column{flex-direction:column}.sa-card-img,.sa-card-icon{margin-right:12px}.column .sa-card-img,.column .sa-card-icon{margin:0 0 12px;display:flex;justify-content:space-between}.sa-card-img img{height:auto;width:200px}.sa-card-icon span{background-repeat:no-repeat;background-size:cover;background-position:center;display:block;height:24px;width:24px}.sa-card-container{display:flex;flex-direction:column;justify-content:space-between;width:-webkit-fill-available}.sa-card-title-container{display:flex;justify-content:space-between}.column .sa-card-title-container{flex-direction:column;margin-bottom:8px}.sa-card-title{font-size:16px;font-weight:600;line-height:24px;margin-bottom:4px}.sa-card-body{font-size:14px;font-weight:400;line-height:20px;letter-spacing:.25px;text-align:left;color:var(--grey-300);flex:1}\n"] }]
|
|
1293
1314
|
}], propDecorators: { title: [{
|
|
1294
1315
|
type: Input,
|
|
1295
1316
|
args: ['title']
|
|
@@ -1327,11 +1348,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
1327
1348
|
|
|
1328
1349
|
class CardFooterActionsComponent {
|
|
1329
1350
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardFooterActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1330
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CardFooterActionsComponent, isStandalone: true, selector: "sa-card-footer-actions", ngImport: i0, template: "<div class=\"sa-card-footer-actions\">\
|
|
1351
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CardFooterActionsComponent, isStandalone: true, selector: "sa-card-footer-actions", ngImport: i0, template: "<div class=\"sa-card-footer-actions\">\n <ng-content></ng-content>\n</div>", styles: [".sa-card-footer-actions{display:flex;justify-content:end}\n"] }); }
|
|
1331
1352
|
}
|
|
1332
1353
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardFooterActionsComponent, decorators: [{
|
|
1333
1354
|
type: Component,
|
|
1334
|
-
args: [{ selector: 'sa-card-footer-actions', standalone: true, imports: [], template: "<div class=\"sa-card-footer-actions\">\
|
|
1355
|
+
args: [{ selector: 'sa-card-footer-actions', standalone: true, imports: [], template: "<div class=\"sa-card-footer-actions\">\n <ng-content></ng-content>\n</div>", styles: [".sa-card-footer-actions{display:flex;justify-content:end}\n"] }]
|
|
1335
1356
|
}] });
|
|
1336
1357
|
|
|
1337
1358
|
class CardTitleActionsComponent {
|