lightning-tec-br-angular-components 0.1.0 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/lightning-tec-br-angular-components.mjs +223 -54
- package/fesm2022/lightning-tec-br-angular-components.mjs.map +1 -1
- package/lib/alert/alert.component.d.ts +28 -0
- package/lib/alert/alert.enum.d.ts +18 -0
- package/lib/alert/alert.model.d.ts +5 -3
- package/lib/alert/alert.service.d.ts +2 -5
- package/lib/button/button.component.d.ts +18 -10
- package/lib/button/button.enum.d.ts +11 -0
- package/lib/button/button.model.d.ts +1 -0
- package/lib/button/button.service.d.ts +2 -0
- package/lib/list-item/list-item.component.d.ts +5 -2
- package/lib/list-item/list-item.enum.d.ts +11 -0
- package/lib/txt-box/txt-box.component.d.ts +14 -5
- package/lib/txt-box/txt-box.enum.d.ts +11 -0
- package/lib/txt-box/txt-box.service.d.ts +2 -0
- package/package.json +1 -1
- package/public-api.d.ts +4 -0
- package/esm2022/lib/txt-box/txt-box.component.mjs +0 -64
- package/esm2022/lib/txt-box/txt-box.enum.mjs +0 -25
- package/esm2022/lib/txt-box/txt-box.model.mjs +0 -7
- package/esm2022/lib/txt-box/txt-box.service.mjs +0 -15
- package/esm2022/lightning-tec-br-angular-components.mjs +0 -5
- package/esm2022/public-api.mjs +0 -16
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, input, inject, Component
|
|
2
|
+
import { Injectable, input, inject, Component } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/forms';
|
|
4
4
|
import { FormsModule } from '@angular/forms';
|
|
5
5
|
import { Subject } from 'rxjs';
|
|
@@ -30,10 +30,23 @@ var TxtBoxIconsEnum;
|
|
|
30
30
|
TxtBoxIconsEnum["Alert"] = "fi fi-sr-exclamation";
|
|
31
31
|
TxtBoxIconsEnum["Close"] = "fi fi-br-cross";
|
|
32
32
|
})(TxtBoxIconsEnum || (TxtBoxIconsEnum = {}));
|
|
33
|
+
var TxtBoxFontWeights;
|
|
34
|
+
(function (TxtBoxFontWeights) {
|
|
35
|
+
TxtBoxFontWeights[TxtBoxFontWeights["Thin"] = 100] = "Thin";
|
|
36
|
+
TxtBoxFontWeights[TxtBoxFontWeights["ExtraLight"] = 200] = "ExtraLight";
|
|
37
|
+
TxtBoxFontWeights[TxtBoxFontWeights["Light"] = 300] = "Light";
|
|
38
|
+
TxtBoxFontWeights[TxtBoxFontWeights["Regular"] = 400] = "Regular";
|
|
39
|
+
TxtBoxFontWeights[TxtBoxFontWeights["Medium"] = 500] = "Medium";
|
|
40
|
+
TxtBoxFontWeights[TxtBoxFontWeights["SemiBold"] = 600] = "SemiBold";
|
|
41
|
+
TxtBoxFontWeights[TxtBoxFontWeights["Bold"] = 700] = "Bold";
|
|
42
|
+
TxtBoxFontWeights[TxtBoxFontWeights["Extrabold"] = 800] = "Extrabold";
|
|
43
|
+
TxtBoxFontWeights[TxtBoxFontWeights["Black"] = 900] = "Black";
|
|
44
|
+
})(TxtBoxFontWeights || (TxtBoxFontWeights = {}));
|
|
33
45
|
|
|
34
46
|
class TxtBoxService {
|
|
35
47
|
constructor() {
|
|
36
48
|
this.value = new Subject();
|
|
49
|
+
this.alertState = new Subject();
|
|
37
50
|
}
|
|
38
51
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: TxtBoxService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
39
52
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: TxtBoxService, providedIn: 'root' }); }
|
|
@@ -50,8 +63,108 @@ class TxtBoxModel {
|
|
|
50
63
|
}
|
|
51
64
|
}
|
|
52
65
|
|
|
53
|
-
|
|
66
|
+
var AlertIconsEnum;
|
|
67
|
+
(function (AlertIconsEnum) {
|
|
68
|
+
AlertIconsEnum["User"] = "fi fi-sr-user";
|
|
69
|
+
AlertIconsEnum["Lock"] = "fi fi-sr-lock";
|
|
70
|
+
AlertIconsEnum["EyeOpen"] = "fi fi-ss-eye";
|
|
71
|
+
AlertIconsEnum["EyeClose"] = "fi fi-ss-eye-crossed";
|
|
72
|
+
AlertIconsEnum["ItemClosed"] = "fi fi-tr-caret-down";
|
|
73
|
+
AlertIconsEnum["ItemOpenned"] = "fi fi-rr-caret-down";
|
|
74
|
+
AlertIconsEnum["Done"] = "fi fi-sr-octagon-check";
|
|
75
|
+
AlertIconsEnum["Doing"] = "fi fi-br-duration-alt";
|
|
76
|
+
AlertIconsEnum["NotDone"] = "fi fi-sr-cross-circle";
|
|
77
|
+
AlertIconsEnum["Alert"] = "fi fi-sr-exclamation";
|
|
78
|
+
AlertIconsEnum["Close"] = "fi fi-br-cross";
|
|
79
|
+
})(AlertIconsEnum || (AlertIconsEnum = {}));
|
|
80
|
+
var AlertTypesEnum;
|
|
81
|
+
(function (AlertTypesEnum) {
|
|
82
|
+
AlertTypesEnum[AlertTypesEnum["Done"] = 0] = "Done";
|
|
83
|
+
AlertTypesEnum[AlertTypesEnum["Alert"] = 1] = "Alert";
|
|
84
|
+
AlertTypesEnum[AlertTypesEnum["NotDone"] = 2] = "NotDone";
|
|
85
|
+
})(AlertTypesEnum || (AlertTypesEnum = {}));
|
|
86
|
+
|
|
87
|
+
class AlertService {
|
|
54
88
|
constructor() {
|
|
89
|
+
this.wasOpenned = new Subject();
|
|
90
|
+
}
|
|
91
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: AlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
92
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: AlertService, providedIn: 'root' }); }
|
|
93
|
+
}
|
|
94
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: AlertService, decorators: [{
|
|
95
|
+
type: Injectable,
|
|
96
|
+
args: [{ providedIn: 'root' }]
|
|
97
|
+
}] });
|
|
98
|
+
|
|
99
|
+
class AlertComponent {
|
|
100
|
+
constructor(cd) {
|
|
101
|
+
this.cd = cd;
|
|
102
|
+
this.Name = input.required();
|
|
103
|
+
this._FontSize = input.required();
|
|
104
|
+
this._FontFamily = input.required();
|
|
105
|
+
this._FontWeight = input.required();
|
|
106
|
+
this._FontColor = 'white';
|
|
107
|
+
this._Text = '';
|
|
108
|
+
this._PositionY = 0;
|
|
109
|
+
this._PositionX = 0;
|
|
110
|
+
this._Icon = '';
|
|
111
|
+
this.BackgroundColor = '';
|
|
112
|
+
this._IconClose = '';
|
|
113
|
+
this.isVisible = false;
|
|
114
|
+
this._AlertService = inject(AlertService);
|
|
115
|
+
}
|
|
116
|
+
ngOnInit() {
|
|
117
|
+
this._PositionX = 0;
|
|
118
|
+
this._PositionY = 0;
|
|
119
|
+
this._FontColor = 'white';
|
|
120
|
+
this._Icon = '';
|
|
121
|
+
this.BackgroundColor = '';
|
|
122
|
+
this._IconClose = '';
|
|
123
|
+
this._IconClose = AlertIconsEnum.Close;
|
|
124
|
+
this.startListenToAlertShowed();
|
|
125
|
+
}
|
|
126
|
+
OnClose() {
|
|
127
|
+
this.isVisible = false;
|
|
128
|
+
}
|
|
129
|
+
startListenToAlertShowed() {
|
|
130
|
+
this._AlertService.wasOpenned.subscribe((AlertModel) => {
|
|
131
|
+
if (this.Name() == AlertModel.alertsName) {
|
|
132
|
+
this._Text = AlertModel.text;
|
|
133
|
+
this.AlertType = AlertModel.type;
|
|
134
|
+
this._PositionY = AlertModel.top;
|
|
135
|
+
this._PositionX = AlertModel.left;
|
|
136
|
+
this.isVisible = true;
|
|
137
|
+
switch (this.AlertType) {
|
|
138
|
+
case (AlertTypesEnum.Done):
|
|
139
|
+
this._Icon = AlertIconsEnum.Done;
|
|
140
|
+
this.BackgroundColor = '#008B10';
|
|
141
|
+
this._FontColor = 'white';
|
|
142
|
+
break;
|
|
143
|
+
case (AlertTypesEnum.Alert):
|
|
144
|
+
this._Icon = AlertIconsEnum.Alert;
|
|
145
|
+
this.BackgroundColor = '#DFCD00';
|
|
146
|
+
this._FontColor = 'black';
|
|
147
|
+
break;
|
|
148
|
+
case (AlertTypesEnum.NotDone):
|
|
149
|
+
this._Icon = AlertIconsEnum.NotDone;
|
|
150
|
+
this.BackgroundColor = '#D40000';
|
|
151
|
+
this._FontColor = 'white';
|
|
152
|
+
break;
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
});
|
|
156
|
+
}
|
|
157
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: AlertComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
158
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.0", type: AlertComponent, isStandalone: true, selector: "app-alert", inputs: { Name: { classPropertyName: "Name", publicName: "Name", isSignal: true, isRequired: true, transformFunction: null }, _FontSize: { classPropertyName: "_FontSize", publicName: "_FontSize", isSignal: true, isRequired: true, transformFunction: null }, _FontFamily: { classPropertyName: "_FontFamily", publicName: "_FontFamily", isSignal: true, isRequired: true, transformFunction: null }, _FontWeight: { classPropertyName: "_FontWeight", publicName: "_FontWeight", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"container\"\r\n[style.background-color]=\"BackgroundColor\"\r\n[style.border-radius]=\"(_FontSize()*0.5) + 'px'\"\r\n[style.color]=\"_FontColor\"\r\n[style.display]=\"isVisible ? '' : 'none'\"\r\n[style.top]=\"_PositionY + 'px'\"\r\n[style.left]=\"_PositionX + 'px'\"\r\n>\r\n\r\n <i class=\"{{_IconClose}}\"\r\n [style.font-size]=\"(_FontSize()*1) + 'px'\"\r\n [style.padding-top]=\"(_FontSize()*0.6) + 'px'\"\r\n [style.padding-right]=\"(_FontSize()*0.6) + 'px'\"\r\n (click)=\"OnClose()\"\r\n >\r\n\r\n </i>\r\n\r\n <div class=\"container-text\"\r\n [style.margin-right]=\"_FontSize() + 'px'\"\r\n [style.padding-top]=\"(_FontSize()*0.4) + 'px'\"\r\n [style.padding-bottom]=\"(_FontSize()*1) + 'px'\"\r\n [style.padding-right]=\"(_FontSize()*1) + 'px'\"\r\n [style.padding-left]=\"(_FontSize()*1) + 'px'\"\r\n >\r\n <i class=\"{{_Icon}}\"\r\n [style.font-size]=\"(_FontSize()*1.2) + 'px'\"\r\n [style.margin-right]=\"(_FontSize()*0.5) + 'px'\"\r\n >\r\n \r\n </i>\r\n <h1\r\n [style.font-family]=\"_FontFamily()\"\r\n [style.font-weight]=\"_FontWeight()\"\r\n [style.font-size]=\"_FontSize() + 'px'\"\r\n >\r\n {{_Text}}\r\n </h1>\r\n </div>\r\n\r\n\r\n\r\n\r\n</div>\r\n", styles: [".container{width:fit-content;height:fit-content;max-width:70vw;position:absolute}.container>i{display:block;line-height:0px;text-align:end}.container>i:hover{cursor:pointer}.container>.container-text{display:flex;align-items:center;justify-content:center}.container>.container-text>i{line-height:0px;text-align:center}.container>.container-text>h1{margin:0;word-break:break-word}\n"] }); }
|
|
159
|
+
}
|
|
160
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: AlertComponent, decorators: [{
|
|
161
|
+
type: Component,
|
|
162
|
+
args: [{ selector: 'app-alert', standalone: true, imports: [], template: "<div class=\"container\"\r\n[style.background-color]=\"BackgroundColor\"\r\n[style.border-radius]=\"(_FontSize()*0.5) + 'px'\"\r\n[style.color]=\"_FontColor\"\r\n[style.display]=\"isVisible ? '' : 'none'\"\r\n[style.top]=\"_PositionY + 'px'\"\r\n[style.left]=\"_PositionX + 'px'\"\r\n>\r\n\r\n <i class=\"{{_IconClose}}\"\r\n [style.font-size]=\"(_FontSize()*1) + 'px'\"\r\n [style.padding-top]=\"(_FontSize()*0.6) + 'px'\"\r\n [style.padding-right]=\"(_FontSize()*0.6) + 'px'\"\r\n (click)=\"OnClose()\"\r\n >\r\n\r\n </i>\r\n\r\n <div class=\"container-text\"\r\n [style.margin-right]=\"_FontSize() + 'px'\"\r\n [style.padding-top]=\"(_FontSize()*0.4) + 'px'\"\r\n [style.padding-bottom]=\"(_FontSize()*1) + 'px'\"\r\n [style.padding-right]=\"(_FontSize()*1) + 'px'\"\r\n [style.padding-left]=\"(_FontSize()*1) + 'px'\"\r\n >\r\n <i class=\"{{_Icon}}\"\r\n [style.font-size]=\"(_FontSize()*1.2) + 'px'\"\r\n [style.margin-right]=\"(_FontSize()*0.5) + 'px'\"\r\n >\r\n \r\n </i>\r\n <h1\r\n [style.font-family]=\"_FontFamily()\"\r\n [style.font-weight]=\"_FontWeight()\"\r\n [style.font-size]=\"_FontSize() + 'px'\"\r\n >\r\n {{_Text}}\r\n </h1>\r\n </div>\r\n\r\n\r\n\r\n\r\n</div>\r\n", styles: [".container{width:fit-content;height:fit-content;max-width:70vw;position:absolute}.container>i{display:block;line-height:0px;text-align:end}.container>i:hover{cursor:pointer}.container>.container-text{display:flex;align-items:center;justify-content:center}.container>.container-text>i{line-height:0px;text-align:center}.container>.container-text>h1{margin:0;word-break:break-word}\n"] }]
|
|
163
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
|
|
164
|
+
|
|
165
|
+
class TxtBoxComponent {
|
|
166
|
+
constructor(element) {
|
|
167
|
+
this.element = element;
|
|
55
168
|
//Template Properties
|
|
56
169
|
this._iconInput = input.required();
|
|
57
170
|
this._nameInput = input.required();
|
|
@@ -64,20 +177,28 @@ class TxtBoxComponent {
|
|
|
64
177
|
this._FontSize = input.required();
|
|
65
178
|
this._IconEnabled = '';
|
|
66
179
|
this._FontFamily = input.required();
|
|
180
|
+
this._FontWeight = input.required();
|
|
67
181
|
//Internal Properties
|
|
68
182
|
this.typeInput = input.required();
|
|
69
183
|
this.IconEnabled = input.required();
|
|
70
184
|
this.text = '';
|
|
71
|
-
this.
|
|
185
|
+
this.TxtBoxModel = new TxtBoxModel();
|
|
186
|
+
this._AlertState = false;
|
|
187
|
+
this.AlertTypesEnum = AlertTypesEnum;
|
|
72
188
|
//Services
|
|
73
|
-
this.
|
|
189
|
+
this.TxtBoxService = inject(TxtBoxService);
|
|
190
|
+
this.AlertService = inject(AlertService);
|
|
74
191
|
}
|
|
75
192
|
ngOnInit() {
|
|
76
193
|
//Limpa as Memórias de Estado
|
|
77
194
|
this._IconEnabled = '';
|
|
78
195
|
this._placeHolderType = '';
|
|
79
196
|
this._placeHolderValue = '';
|
|
197
|
+
this._AlertState = false;
|
|
198
|
+
this.TxtBoxModel.name = '';
|
|
199
|
+
this.TxtBoxModel.name = this._nameInput();
|
|
80
200
|
this._IconEnabled = this.IconEnabled() ? '' : 'none';
|
|
201
|
+
this.startListenToAlertState();
|
|
81
202
|
switch (this.typeInput()) {
|
|
82
203
|
case (TxtBoxTypesEnum.Email):
|
|
83
204
|
{
|
|
@@ -94,16 +215,26 @@ class TxtBoxComponent {
|
|
|
94
215
|
}
|
|
95
216
|
}
|
|
96
217
|
onValueChanged() {
|
|
97
|
-
this.
|
|
98
|
-
this.
|
|
218
|
+
this.TxtBoxModel.name = this._nameInput();
|
|
219
|
+
this.TxtBoxService.value.next(this.TxtBoxModel);
|
|
99
220
|
}
|
|
100
|
-
|
|
101
|
-
|
|
221
|
+
startListenToAlertState() {
|
|
222
|
+
this.TxtBoxService.alertState.subscribe((callerData) => {
|
|
223
|
+
if (this._nameInput() == callerData.alertsFatherName) {
|
|
224
|
+
callerData.top = this.element.nativeElement.getBoundingClientRect().top - this.element.nativeElement.offsetHeight;
|
|
225
|
+
callerData.left = this.element.nativeElement.getBoundingClientRect().left + this.element.nativeElement.offsetWidth;
|
|
226
|
+
callerData.alertsName = this.TxtBoxModel.name + '-alert';
|
|
227
|
+
this.AlertService.wasOpenned.next(callerData);
|
|
228
|
+
}
|
|
229
|
+
});
|
|
230
|
+
}
|
|
231
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: TxtBoxComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
232
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.0", type: TxtBoxComponent, isStandalone: true, selector: "app-txt-box", inputs: { _iconInput: { classPropertyName: "_iconInput", publicName: "_iconInput", isSignal: true, isRequired: true, transformFunction: null }, _nameInput: { classPropertyName: "_nameInput", publicName: "_nameInput", isSignal: true, isRequired: true, transformFunction: null }, _idInput: { classPropertyName: "_idInput", publicName: "_idInput", isSignal: true, isRequired: false, transformFunction: null }, _CorIcone: { classPropertyName: "_CorIcone", publicName: "_CorIcone", isSignal: true, isRequired: true, transformFunction: null }, _CorFont: { classPropertyName: "_CorFont", publicName: "_CorFont", isSignal: true, isRequired: true, transformFunction: null }, _FontSize: { classPropertyName: "_FontSize", publicName: "_FontSize", isSignal: true, isRequired: true, transformFunction: null }, _FontFamily: { classPropertyName: "_FontFamily", publicName: "_FontFamily", isSignal: true, isRequired: true, transformFunction: null }, _FontWeight: { classPropertyName: "_FontWeight", publicName: "_FontWeight", isSignal: true, isRequired: true, transformFunction: null }, typeInput: { classPropertyName: "typeInput", publicName: "typeInput", isSignal: true, isRequired: true, transformFunction: null }, IconEnabled: { classPropertyName: "IconEnabled", publicName: "IconEnabled", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"container\" \r\n[style.width]=\"(_FontSize()*19.375) +'px'\"\r\n[style.height]=\"(_FontSize()*2.5) +'px'\"\r\n[style.border-radius]=\"(_FontSize()*0.3125) +'px'\"\r\n[ngStyle]=\"\r\n{'box-shadow':'\r\nrgb(204, 219, 232)'+ (_FontSize()*0.1875) + 'px '+ (_FontSize()*0.1875) + 'px '+ (_FontSize()*0.375) + 'px 0px inset' + ',' + \r\n'rgba(255, 255, 255, 0.5)'+ (_FontSize()*-0.1875) + 'px '+ (_FontSize()*-0.1875) + 'px '+ (_FontSize()*0.375) + 'px '+ (_FontSize()*0.0625) + 'px inset'\r\n}\r\n\"\r\n>\r\n\r\n <i class=\"{{_iconInput()}} icon\"\r\n [style.color]=\"_CorIcone()\"\r\n [style.font-size]=\"(_FontSize()*1.25) +'px'\"\r\n [style.margin-left]=\"(_FontSize()*0.5625) +'px'\"\r\n [style.display]=\"_IconEnabled\"\r\n ></i>\r\n\r\n <input\r\n type=\"{{_placeHolderType}}\"\r\n name=\"{{_nameInput()}}\"\r\n id=\"{{_idInput()}}\"\r\n placeholder=\"{{_placeHolderValue}}\"\r\n [(ngModel)]=\"TxtBoxModel.value\"\r\n (ngModelChange)=\"onValueChanged()\"\r\n\r\n [style.color]=\"_CorFont()\"\r\n [style.font-family]=\"_FontFamily()\"\r\n [style.font-size]=\"_FontSize()+'px'\"\r\n [style.font-weight]=\"_FontWeight()\"\r\n [style.width]=\"(_FontSize()*15.3125) +'px'\"\r\n [style.margin-left]=\"(_FontSize()*0.375) +'px'\"\r\n >\r\n \r\n\r\n</div>\r\n\r\n<app-alert\r\n[Name]=\"_nameInput()+'-alert'\"\r\n[_FontSize]=\"_FontSize()\"\r\n[_FontFamily]=\"_FontFamily()\"\r\n[_FontWeight]=\"_FontWeight()\"\r\n/>\r\n\r\n\r\n\r\n\r\n", styles: [":host{display:inline-block}.container{display:flex;align-items:center}i{line-height:0px}input{background-color:transparent;border:none;padding:0}input:focus{outline:none;box-sizing:content-box}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AlertComponent, selector: "app-alert", inputs: ["Name", "_FontSize", "_FontFamily", "_FontWeight"] }] }); }
|
|
102
233
|
}
|
|
103
234
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: TxtBoxComponent, decorators: [{
|
|
104
235
|
type: Component,
|
|
105
|
-
args: [{ selector: 'app-txt-box', standalone: true, imports: [FormsModule, CommonModule], template: "<div class=\"container\" \r\n[style.width]=\"(_FontSize()*19.375) +'px'\"\r\n[style.height]=\"(_FontSize()*2.5) +'px'\"\r\n[style.border-radius]=\"(_FontSize()*0.3125) +'px'\"\r\n[ngStyle]=\"\r\n{'box-shadow':'\r\nrgb(204, 219, 232)'+ (_FontSize()*0.1875) + 'px '+ (_FontSize()*0.1875) + 'px '+ (_FontSize()*0.375) + 'px 0px inset' + ',' + \r\n'rgba(255, 255, 255, 0.5)'+ (_FontSize()*-0.1875) + 'px '+ (_FontSize()*-0.1875) + 'px '+ (_FontSize()*0.375) + 'px '+ (_FontSize()*0.0625) + 'px inset'\r\n}\r\n\"\r\n>\r\n\r\n <i class=\"{{_iconInput()}} icon\"\r\n [style.color]=\"_CorIcone()\"\r\n [style.font-size]=\"(_FontSize()*1.25) +'px'\"\r\n [style.margin-left]=\"(_FontSize()*0.5625) +'px'\"\r\n [style.display]=\"_IconEnabled\"\r\n ></i>\r\n\r\n <input\r\n type=\"{{_placeHolderType}}\"\r\n name=\"{{_nameInput()}}\"\r\n id=\"{{_idInput()}}\"\r\n placeholder=\"{{_placeHolderValue}}\"\r\n [(ngModel)]=\"
|
|
106
|
-
}] });
|
|
236
|
+
args: [{ selector: 'app-txt-box', standalone: true, imports: [FormsModule, CommonModule, AlertComponent], template: "<div class=\"container\" \r\n[style.width]=\"(_FontSize()*19.375) +'px'\"\r\n[style.height]=\"(_FontSize()*2.5) +'px'\"\r\n[style.border-radius]=\"(_FontSize()*0.3125) +'px'\"\r\n[ngStyle]=\"\r\n{'box-shadow':'\r\nrgb(204, 219, 232)'+ (_FontSize()*0.1875) + 'px '+ (_FontSize()*0.1875) + 'px '+ (_FontSize()*0.375) + 'px 0px inset' + ',' + \r\n'rgba(255, 255, 255, 0.5)'+ (_FontSize()*-0.1875) + 'px '+ (_FontSize()*-0.1875) + 'px '+ (_FontSize()*0.375) + 'px '+ (_FontSize()*0.0625) + 'px inset'\r\n}\r\n\"\r\n>\r\n\r\n <i class=\"{{_iconInput()}} icon\"\r\n [style.color]=\"_CorIcone()\"\r\n [style.font-size]=\"(_FontSize()*1.25) +'px'\"\r\n [style.margin-left]=\"(_FontSize()*0.5625) +'px'\"\r\n [style.display]=\"_IconEnabled\"\r\n ></i>\r\n\r\n <input\r\n type=\"{{_placeHolderType}}\"\r\n name=\"{{_nameInput()}}\"\r\n id=\"{{_idInput()}}\"\r\n placeholder=\"{{_placeHolderValue}}\"\r\n [(ngModel)]=\"TxtBoxModel.value\"\r\n (ngModelChange)=\"onValueChanged()\"\r\n\r\n [style.color]=\"_CorFont()\"\r\n [style.font-family]=\"_FontFamily()\"\r\n [style.font-size]=\"_FontSize()+'px'\"\r\n [style.font-weight]=\"_FontWeight()\"\r\n [style.width]=\"(_FontSize()*15.3125) +'px'\"\r\n [style.margin-left]=\"(_FontSize()*0.375) +'px'\"\r\n >\r\n \r\n\r\n</div>\r\n\r\n<app-alert\r\n[Name]=\"_nameInput()+'-alert'\"\r\n[_FontSize]=\"_FontSize()\"\r\n[_FontFamily]=\"_FontFamily()\"\r\n[_FontWeight]=\"_FontWeight()\"\r\n/>\r\n\r\n\r\n\r\n\r\n", styles: [":host{display:inline-block}.container{display:flex;align-items:center}i{line-height:0px}input{background-color:transparent;border:none;padding:0}input:focus{outline:none;box-sizing:content-box}\n"] }]
|
|
237
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }] });
|
|
107
238
|
|
|
108
239
|
var ButtonTypeEnum;
|
|
109
240
|
(function (ButtonTypeEnum) {
|
|
@@ -133,10 +264,24 @@ var ButtonIconEnum;
|
|
|
133
264
|
ButtonIconEnum["Alert"] = "fi fi-sr-exclamation";
|
|
134
265
|
ButtonIconEnum["Close"] = "fi fi-br-cross";
|
|
135
266
|
})(ButtonIconEnum || (ButtonIconEnum = {}));
|
|
267
|
+
var ButtonFontWeights;
|
|
268
|
+
(function (ButtonFontWeights) {
|
|
269
|
+
ButtonFontWeights[ButtonFontWeights["Thin"] = 100] = "Thin";
|
|
270
|
+
ButtonFontWeights[ButtonFontWeights["ExtraLight"] = 200] = "ExtraLight";
|
|
271
|
+
ButtonFontWeights[ButtonFontWeights["Light"] = 300] = "Light";
|
|
272
|
+
ButtonFontWeights[ButtonFontWeights["Regular"] = 400] = "Regular";
|
|
273
|
+
ButtonFontWeights[ButtonFontWeights["Medium"] = 500] = "Medium";
|
|
274
|
+
ButtonFontWeights[ButtonFontWeights["SemiBold"] = 600] = "SemiBold";
|
|
275
|
+
ButtonFontWeights[ButtonFontWeights["Bold"] = 700] = "Bold";
|
|
276
|
+
ButtonFontWeights[ButtonFontWeights["Extrabold"] = 800] = "Extrabold";
|
|
277
|
+
ButtonFontWeights[ButtonFontWeights["Black"] = 900] = "Black";
|
|
278
|
+
})(ButtonFontWeights || (ButtonFontWeights = {}));
|
|
136
279
|
|
|
137
280
|
class ButtonService {
|
|
138
281
|
constructor() {
|
|
139
282
|
this.click = new Subject();
|
|
283
|
+
this.loadingState = new Subject();
|
|
284
|
+
this.alertState = new Subject();
|
|
140
285
|
}
|
|
141
286
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ButtonService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
142
287
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ButtonService, providedIn: 'root' }); }
|
|
@@ -149,31 +294,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
|
|
|
149
294
|
class ButtonModel {
|
|
150
295
|
constructor() {
|
|
151
296
|
this.name = '';
|
|
297
|
+
this.state = false;
|
|
152
298
|
}
|
|
153
299
|
}
|
|
154
300
|
|
|
155
|
-
class
|
|
301
|
+
class AlertModel {
|
|
156
302
|
constructor() {
|
|
157
|
-
this.
|
|
158
|
-
this.
|
|
303
|
+
this.alertsName = '';
|
|
304
|
+
this.alertsFatherName = '';
|
|
305
|
+
this.top = 0;
|
|
306
|
+
this.left = 0;
|
|
307
|
+
this.text = '';
|
|
159
308
|
}
|
|
160
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: AlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
161
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: AlertService, providedIn: 'root' }); }
|
|
162
309
|
}
|
|
163
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: AlertService, decorators: [{
|
|
164
|
-
type: Injectable,
|
|
165
|
-
args: [{ providedIn: 'root' }]
|
|
166
|
-
}] });
|
|
167
|
-
const WINDOW = new InjectionToken('WindowToken', {
|
|
168
|
-
factory: () => {
|
|
169
|
-
if (typeof window !== 'undefined') {
|
|
170
|
-
return window;
|
|
171
|
-
}
|
|
172
|
-
return new Window(); // does this work?
|
|
173
|
-
}
|
|
174
|
-
});
|
|
175
310
|
|
|
176
311
|
class ButtonComponent {
|
|
312
|
+
;
|
|
177
313
|
constructor(element) {
|
|
178
314
|
this.element = element;
|
|
179
315
|
this._BackGroundColor = '';
|
|
@@ -188,12 +324,13 @@ class ButtonComponent {
|
|
|
188
324
|
this._IconDistanceFromTextObject = {};
|
|
189
325
|
this._IconColor = '';
|
|
190
326
|
this._IconDistanceFromText = input.required();
|
|
191
|
-
this._IconEnabled =
|
|
327
|
+
this._IconEnabled = input.required();
|
|
192
328
|
this._TextColor = '';
|
|
193
329
|
this._Text = input.required();
|
|
194
330
|
this._FontSize = input.required();
|
|
331
|
+
this._FontWeight = input.required();
|
|
195
332
|
this._TextFontFamily = input.required();
|
|
196
|
-
this.
|
|
333
|
+
this._TextEnabled = input.required();
|
|
197
334
|
this.name = input.required();
|
|
198
335
|
this.BackGroundColorNormal = input.required();
|
|
199
336
|
this.BackGroundColorHover = input.required();
|
|
@@ -202,12 +339,14 @@ class ButtonComponent {
|
|
|
202
339
|
this.TextColorNormal = input.required();
|
|
203
340
|
this.TextColorHover = input.required();
|
|
204
341
|
this.IconOrientation = input.required();
|
|
205
|
-
this.
|
|
206
|
-
this.
|
|
207
|
-
this.
|
|
208
|
-
this.
|
|
209
|
-
this.
|
|
210
|
-
this.
|
|
342
|
+
this._LoadingState = false;
|
|
343
|
+
this._AlertState = false;
|
|
344
|
+
this.ButtonModel = new ButtonModel();
|
|
345
|
+
this.ButtonService = inject(ButtonService);
|
|
346
|
+
this.AlertService = inject(AlertService);
|
|
347
|
+
this.TxtBoxService = inject(TxtBoxService);
|
|
348
|
+
this.AlertModel = new AlertModel();
|
|
349
|
+
this.AlertTypesEnum = AlertTypesEnum;
|
|
211
350
|
}
|
|
212
351
|
ngOnInit() {
|
|
213
352
|
//Limpa as Memórias de Estado
|
|
@@ -215,33 +354,32 @@ class ButtonComponent {
|
|
|
215
354
|
this._IconColor = '';
|
|
216
355
|
this._TextColor = '';
|
|
217
356
|
this._IconDistanceFromTextObject = {};
|
|
218
|
-
this._IconEnabled = '';
|
|
219
357
|
this._IconFontSize = 0;
|
|
220
358
|
this._IconOrientation = '';
|
|
221
|
-
this.
|
|
222
|
-
this.
|
|
223
|
-
this.
|
|
224
|
-
this._TextEnabled = this.TextEnabled() ? '' : 'none';
|
|
359
|
+
this.ButtonModel = new ButtonModel();
|
|
360
|
+
this._LoadingState = false;
|
|
361
|
+
this._AlertState = false;
|
|
225
362
|
this._BackGroundColor = this.BackGroundColorNormal();
|
|
226
363
|
this._IconColor = this.IconColorNormal();
|
|
227
364
|
this._TextColor = this.TextColorNormal();
|
|
228
|
-
this._IconEnabled = this.IconEnabled() ? '' : 'none';
|
|
229
365
|
this._IconFontSize = this._FontSize() * 1.25;
|
|
366
|
+
this.startListenToLoadingState();
|
|
367
|
+
this.startListenToAlertState();
|
|
230
368
|
switch (this.IconOrientation()) {
|
|
231
369
|
case (ButtonIconPositionEnum.Top):
|
|
232
370
|
this._IconOrientation = 'column';
|
|
233
|
-
this._IconDistanceFromTextObject = this.
|
|
371
|
+
this._IconDistanceFromTextObject = this._TextEnabled() ? { 'margin-bottom': this._IconDistanceFromText().toString() + 'px' } : {};
|
|
234
372
|
break;
|
|
235
373
|
case (ButtonIconPositionEnum.Right):
|
|
236
374
|
this._IconOrientation = 'row-reverse';
|
|
237
|
-
this._IconDistanceFromTextObject = this.
|
|
375
|
+
this._IconDistanceFromTextObject = this._TextEnabled() ? { 'margin-left': this._IconDistanceFromText().toString() + 'px' } : {};
|
|
238
376
|
break;
|
|
239
377
|
case (ButtonIconPositionEnum.Bottom):
|
|
240
378
|
this._IconOrientation = 'column-reverse';
|
|
241
|
-
this._IconDistanceFromTextObject = this.
|
|
379
|
+
this._IconDistanceFromTextObject = this._TextEnabled() ? { 'margin-top': this._IconDistanceFromText().toString() + 'px' } : {};
|
|
242
380
|
break;
|
|
243
381
|
case (ButtonIconPositionEnum.Left):
|
|
244
|
-
this._IconDistanceFromTextObject = this.
|
|
382
|
+
this._IconDistanceFromTextObject = this._TextEnabled() ? { 'margin-right': this._IconDistanceFromText().toString() + 'px' } : {};
|
|
245
383
|
break;
|
|
246
384
|
}
|
|
247
385
|
}
|
|
@@ -256,18 +394,34 @@ class ButtonComponent {
|
|
|
256
394
|
this._TextColor = this.TextColorNormal();
|
|
257
395
|
}
|
|
258
396
|
OnClick() {
|
|
259
|
-
this.
|
|
260
|
-
|
|
261
|
-
|
|
397
|
+
this.ButtonModel.name = this.name();
|
|
398
|
+
this.ButtonModel.state = true;
|
|
399
|
+
this.ButtonService.click.next(this.ButtonModel);
|
|
400
|
+
this.ButtonService.loadingState.next(this.ButtonModel);
|
|
401
|
+
}
|
|
402
|
+
startListenToLoadingState() {
|
|
403
|
+
this.ButtonService.loadingState.subscribe((callerData) => {
|
|
404
|
+
if (this.name() == callerData.name) {
|
|
405
|
+
this._LoadingState = callerData.state;
|
|
406
|
+
}
|
|
407
|
+
});
|
|
408
|
+
}
|
|
409
|
+
startListenToAlertState() {
|
|
410
|
+
this.TxtBoxService.alertState.subscribe((callerData) => {
|
|
411
|
+
if (this.name() == callerData.alertsFatherName) {
|
|
412
|
+
callerData.top = this.element.nativeElement.getBoundingClientRect().top - this.element.nativeElement.offsetHeight;
|
|
413
|
+
callerData.left = this.element.nativeElement.getBoundingClientRect().left + this.element.nativeElement.offsetWidth;
|
|
414
|
+
callerData.alertsName = this.ButtonModel.name + '-alert';
|
|
415
|
+
this.AlertService.wasOpenned.next(callerData);
|
|
416
|
+
}
|
|
262
417
|
});
|
|
263
|
-
this.service.click.next(this.model);
|
|
264
418
|
}
|
|
265
419
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
266
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.0", type: ButtonComponent, isStandalone: true, selector: "app-button", inputs: { _ButtonType: { classPropertyName: "_ButtonType", publicName: "_ButtonType", isSignal: true, isRequired: true, transformFunction: null }, _BorderRadius: { classPropertyName: "_BorderRadius", publicName: "_BorderRadius", isSignal: true, isRequired: true, transformFunction: null }, _Width: { classPropertyName: "_Width", publicName: "_Width", isSignal: true, isRequired: true, transformFunction: null }, _Height: { classPropertyName: "_Height", publicName: "_Height", isSignal: true, isRequired: true, transformFunction: null }, _Icon: { classPropertyName: "_Icon", publicName: "_Icon", isSignal: true, isRequired: true, transformFunction: null }, _IconDistanceFromText: { classPropertyName: "_IconDistanceFromText", publicName: "_IconDistanceFromText", isSignal: true, isRequired: true, transformFunction: null },
|
|
420
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.0", type: ButtonComponent, isStandalone: true, selector: "app-button", inputs: { _ButtonType: { classPropertyName: "_ButtonType", publicName: "_ButtonType", isSignal: true, isRequired: true, transformFunction: null }, _BorderRadius: { classPropertyName: "_BorderRadius", publicName: "_BorderRadius", isSignal: true, isRequired: true, transformFunction: null }, _Width: { classPropertyName: "_Width", publicName: "_Width", isSignal: true, isRequired: true, transformFunction: null }, _Height: { classPropertyName: "_Height", publicName: "_Height", isSignal: true, isRequired: true, transformFunction: null }, _Icon: { classPropertyName: "_Icon", publicName: "_Icon", isSignal: true, isRequired: true, transformFunction: null }, _IconDistanceFromText: { classPropertyName: "_IconDistanceFromText", publicName: "_IconDistanceFromText", isSignal: true, isRequired: true, transformFunction: null }, _IconEnabled: { classPropertyName: "_IconEnabled", publicName: "_IconEnabled", isSignal: true, isRequired: true, transformFunction: null }, _Text: { classPropertyName: "_Text", publicName: "_Text", isSignal: true, isRequired: true, transformFunction: null }, _FontSize: { classPropertyName: "_FontSize", publicName: "_FontSize", isSignal: true, isRequired: true, transformFunction: null }, _FontWeight: { classPropertyName: "_FontWeight", publicName: "_FontWeight", isSignal: true, isRequired: true, transformFunction: null }, _TextFontFamily: { classPropertyName: "_TextFontFamily", publicName: "_TextFontFamily", isSignal: true, isRequired: true, transformFunction: null }, _TextEnabled: { classPropertyName: "_TextEnabled", publicName: "_TextEnabled", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, BackGroundColorNormal: { classPropertyName: "BackGroundColorNormal", publicName: "BackGroundColorNormal", isSignal: true, isRequired: true, transformFunction: null }, BackGroundColorHover: { classPropertyName: "BackGroundColorHover", publicName: "BackGroundColorHover", isSignal: true, isRequired: true, transformFunction: null }, IconColorNormal: { classPropertyName: "IconColorNormal", publicName: "IconColorNormal", isSignal: true, isRequired: true, transformFunction: null }, IconColorHover: { classPropertyName: "IconColorHover", publicName: "IconColorHover", isSignal: true, isRequired: true, transformFunction: null }, TextColorNormal: { classPropertyName: "TextColorNormal", publicName: "TextColorNormal", isSignal: true, isRequired: true, transformFunction: null }, TextColorHover: { classPropertyName: "TextColorHover", publicName: "TextColorHover", isSignal: true, isRequired: true, transformFunction: null }, IconOrientation: { classPropertyName: "IconOrientation", publicName: "IconOrientation", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<button\r\ntype=\"{{_ButtonType()}}\"\r\n[style.background-color]=\"_BackGroundColor\"\r\n[style.border-radius]=\"_BorderRadius().toString()+'px'\"\r\n[style.width]=\"_Width()+ 'px'\"\r\n[style.height]=\"_Height()+ 'px'\"\r\n[ngStyle]=\"{'flex-direction':_IconOrientation}\"\r\n(mouseover)=\"OnMouseOver()\"\r\n(mouseout)=\"OnMouseOut()\"\r\n(click)=\"OnClick()\"\r\n\r\n>\r\n <i\r\n class=\"{{_Icon()}}\"\r\n [style.color]=\"_IconColor\"\r\n [style.font-size]=\"_IconFontSize +'px'\"\r\n [style.display]=\"_IconEnabled() && !_LoadingState ? '' : 'none'\"\r\n\r\n >\r\n </i>\r\n\r\n <i\r\n class=\"loader\"\r\n [style.width]=\"_FontSize()+'px'\"\r\n [style.height]=\"_FontSize()+'px'\"\r\n [style.display]=\"_LoadingState ? 'inline-block' : 'none'\"\r\n [style.--loaderColor]=\"_TextColor\"\r\n [style.--loaderBorderSize]=\"(_FontSize()*0.15)+'px'\"\r\n >\r\n </i>\r\n\r\n <p\r\n [style.font-size]=\"_FontSize() +'px'\"\r\n [style.font-family]=\"_TextFontFamily()\"\r\n [style.font-weight]=\"_FontWeight()\"\r\n [style.color]=\"_TextColor\"\r\n [style.display]=\"_TextEnabled() && !_LoadingState ? '' : 'none'\"\r\n >{{_Text()}}\r\n </p>\r\n\r\n</button>\r\n\r\n<app-alert\r\n[Name]=\"name()+'-alert'\"\r\n[_FontSize]=\"_FontSize()\"\r\n[_FontFamily]=\"_TextFontFamily()\"\r\n[_FontWeight]=\"_FontWeight()\"\r\n/>\r\n \r\n", styles: [":host{display:inline-block}button{display:flex;align-items:center;justify-content:center;border:none;padding:0}button:hover{cursor:pointer}button:active{transform:scale(.95)}button>i{line-height:0px}button>p{margin:0}.loader{border:var(--loaderBorderSize) solid var(--loaderColor);border-bottom-color:transparent;border-radius:50%;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AlertComponent, selector: "app-alert", inputs: ["Name", "_FontSize", "_FontFamily", "_FontWeight"] }] }); }
|
|
267
421
|
}
|
|
268
422
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
269
423
|
type: Component,
|
|
270
|
-
args: [{ selector: 'app-button', standalone: true, imports: [CommonModule], template: "
|
|
424
|
+
args: [{ selector: 'app-button', standalone: true, imports: [CommonModule, AlertComponent], template: "<button\r\ntype=\"{{_ButtonType()}}\"\r\n[style.background-color]=\"_BackGroundColor\"\r\n[style.border-radius]=\"_BorderRadius().toString()+'px'\"\r\n[style.width]=\"_Width()+ 'px'\"\r\n[style.height]=\"_Height()+ 'px'\"\r\n[ngStyle]=\"{'flex-direction':_IconOrientation}\"\r\n(mouseover)=\"OnMouseOver()\"\r\n(mouseout)=\"OnMouseOut()\"\r\n(click)=\"OnClick()\"\r\n\r\n>\r\n <i\r\n class=\"{{_Icon()}}\"\r\n [style.color]=\"_IconColor\"\r\n [style.font-size]=\"_IconFontSize +'px'\"\r\n [style.display]=\"_IconEnabled() && !_LoadingState ? '' : 'none'\"\r\n\r\n >\r\n </i>\r\n\r\n <i\r\n class=\"loader\"\r\n [style.width]=\"_FontSize()+'px'\"\r\n [style.height]=\"_FontSize()+'px'\"\r\n [style.display]=\"_LoadingState ? 'inline-block' : 'none'\"\r\n [style.--loaderColor]=\"_TextColor\"\r\n [style.--loaderBorderSize]=\"(_FontSize()*0.15)+'px'\"\r\n >\r\n </i>\r\n\r\n <p\r\n [style.font-size]=\"_FontSize() +'px'\"\r\n [style.font-family]=\"_TextFontFamily()\"\r\n [style.font-weight]=\"_FontWeight()\"\r\n [style.color]=\"_TextColor\"\r\n [style.display]=\"_TextEnabled() && !_LoadingState ? '' : 'none'\"\r\n >{{_Text()}}\r\n </p>\r\n\r\n</button>\r\n\r\n<app-alert\r\n[Name]=\"name()+'-alert'\"\r\n[_FontSize]=\"_FontSize()\"\r\n[_FontFamily]=\"_TextFontFamily()\"\r\n[_FontWeight]=\"_FontWeight()\"\r\n/>\r\n \r\n", styles: [":host{display:inline-block}button{display:flex;align-items:center;justify-content:center;border:none;padding:0}button:hover{cursor:pointer}button:active{transform:scale(.95)}button>i{line-height:0px}button>p{margin:0}.loader{border:var(--loaderBorderSize) solid var(--loaderColor);border-bottom-color:transparent;border-radius:50%;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
271
425
|
}], ctorParameters: () => [{ type: i0.ElementRef }] });
|
|
272
426
|
|
|
273
427
|
var ListItemIcons;
|
|
@@ -287,6 +441,18 @@ var ListItemPositions;
|
|
|
287
441
|
ListItemPositions[ListItemPositions["Top"] = 0] = "Top";
|
|
288
442
|
ListItemPositions[ListItemPositions["Center"] = 1] = "Center";
|
|
289
443
|
})(ListItemPositions || (ListItemPositions = {}));
|
|
444
|
+
var ListItemFontWeights;
|
|
445
|
+
(function (ListItemFontWeights) {
|
|
446
|
+
ListItemFontWeights[ListItemFontWeights["Thin"] = 100] = "Thin";
|
|
447
|
+
ListItemFontWeights[ListItemFontWeights["ExtraLight"] = 200] = "ExtraLight";
|
|
448
|
+
ListItemFontWeights[ListItemFontWeights["Light"] = 300] = "Light";
|
|
449
|
+
ListItemFontWeights[ListItemFontWeights["Regular"] = 400] = "Regular";
|
|
450
|
+
ListItemFontWeights[ListItemFontWeights["Medium"] = 500] = "Medium";
|
|
451
|
+
ListItemFontWeights[ListItemFontWeights["SemiBold"] = 600] = "SemiBold";
|
|
452
|
+
ListItemFontWeights[ListItemFontWeights["Bold"] = 700] = "Bold";
|
|
453
|
+
ListItemFontWeights[ListItemFontWeights["Extrabold"] = 800] = "Extrabold";
|
|
454
|
+
ListItemFontWeights[ListItemFontWeights["Black"] = 900] = "Black";
|
|
455
|
+
})(ListItemFontWeights || (ListItemFontWeights = {}));
|
|
290
456
|
|
|
291
457
|
class ListItemComponent {
|
|
292
458
|
constructor() {
|
|
@@ -298,6 +464,7 @@ class ListItemComponent {
|
|
|
298
464
|
this._ItemNumberEnabled = input.required();
|
|
299
465
|
this._ItemNumberText = input.required();
|
|
300
466
|
this._ItemNumberFontFamily = input.required();
|
|
467
|
+
this._ItemNumberFontWeight = input.required();
|
|
301
468
|
this._ItemNumberFontColor = input.required();
|
|
302
469
|
this._ItemNumberPosition = input.required();
|
|
303
470
|
this._ItemNumberMarginTop = 0;
|
|
@@ -316,11 +483,13 @@ class ListItemComponent {
|
|
|
316
483
|
this._TitleText = input.required();
|
|
317
484
|
this._TitleFontFamily = input.required();
|
|
318
485
|
this._TitleFontColor = input.required();
|
|
486
|
+
this._TitleFontWeight = input.required();
|
|
319
487
|
//SubTitle
|
|
320
488
|
this._SubTitleEnabled = input.required();
|
|
321
489
|
this._SubTitleText = input.required();
|
|
322
490
|
this._SubTitleFontFamily = input.required();
|
|
323
491
|
this._SubTitleFontColor = input.required();
|
|
492
|
+
this._SubTitleFontWeight = input.required();
|
|
324
493
|
//iconOpenItem
|
|
325
494
|
this._IconOpenItemColor = input.required();
|
|
326
495
|
this._FontSize = input.required();
|
|
@@ -360,11 +529,11 @@ class ListItemComponent {
|
|
|
360
529
|
this.ItemStateOpen = this.ItemStateOpen ? false : true;
|
|
361
530
|
}
|
|
362
531
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
363
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.0", type: ListItemComponent, isStandalone: true, selector: "app-list-item", inputs: { Name: { classPropertyName: "Name", publicName: "Name", isSignal: true, isRequired: true, transformFunction: null }, _ItemBackGroundColorNormal: { classPropertyName: "_ItemBackGroundColorNormal", publicName: "_ItemBackGroundColorNormal", isSignal: true, isRequired: true, transformFunction: null }, _ItemBackGroundColorHover: { classPropertyName: "_ItemBackGroundColorHover", publicName: "_ItemBackGroundColorHover", isSignal: true, isRequired: true, transformFunction: null }, _ItemNumberEnabled: { classPropertyName: "_ItemNumberEnabled", publicName: "_ItemNumberEnabled", isSignal: true, isRequired: true, transformFunction: null }, _ItemNumberText: { classPropertyName: "_ItemNumberText", publicName: "_ItemNumberText", isSignal: true, isRequired: true, transformFunction: null }, _ItemNumberFontFamily: { classPropertyName: "_ItemNumberFontFamily", publicName: "_ItemNumberFontFamily", isSignal: true, isRequired: true, transformFunction: null }, _ItemNumberFontColor: { classPropertyName: "_ItemNumberFontColor", publicName: "_ItemNumberFontColor", isSignal: true, isRequired: true, transformFunction: null }, _ItemNumberPosition: { classPropertyName: "_ItemNumberPosition", publicName: "_ItemNumberPosition", isSignal: true, isRequired: true, transformFunction: null }, _IconEnabled: { classPropertyName: "_IconEnabled", publicName: "_IconEnabled", isSignal: true, isRequired: true, transformFunction: null }, _Icon: { classPropertyName: "_Icon", publicName: "_Icon", isSignal: true, isRequired: true, transformFunction: null }, _IconColor: { classPropertyName: "_IconColor", publicName: "_IconColor", isSignal: true, isRequired: true, transformFunction: null }, _TitleText: { classPropertyName: "_TitleText", publicName: "_TitleText", isSignal: true, isRequired: true, transformFunction: null }, _TitleFontFamily: { classPropertyName: "_TitleFontFamily", publicName: "_TitleFontFamily", isSignal: true, isRequired: true, transformFunction: null }, _TitleFontColor: { classPropertyName: "_TitleFontColor", publicName: "_TitleFontColor", isSignal: true, isRequired: true, transformFunction: null }, _SubTitleEnabled: { classPropertyName: "_SubTitleEnabled", publicName: "_SubTitleEnabled", isSignal: true, isRequired: true, transformFunction: null }, _SubTitleText: { classPropertyName: "_SubTitleText", publicName: "_SubTitleText", isSignal: true, isRequired: true, transformFunction: null }, _SubTitleFontFamily: { classPropertyName: "_SubTitleFontFamily", publicName: "_SubTitleFontFamily", isSignal: true, isRequired: true, transformFunction: null }, _SubTitleFontColor: { classPropertyName: "_SubTitleFontColor", publicName: "_SubTitleFontColor", isSignal: true, isRequired: true, transformFunction: null }, _IconOpenItemColor: { classPropertyName: "_IconOpenItemColor", publicName: "_IconOpenItemColor", isSignal: true, isRequired: true, transformFunction: null }, _FontSize: { classPropertyName: "_FontSize", publicName: "_FontSize", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "\r\n<div class=\"wrapper\"\r\n[style.width]=\"(_FontSize()*18.611)+'px'\"\r\n[style.height]=\"ItemStateOpen? 'auto' : (_FontSize()*3.777)+'px'\"\r\n>\r\n <div class=\"container\"\r\n (click)=\"OnClick()\"\r\n [style.width]=\"(_FontSize()*18.611)+'px'\"\r\n [style.height]=\"(_FontSize()*3.777)+'px'\"\r\n >\r\n\r\n <p class=\"ItemNumber\"\r\n [style.display]=\"_ItemNumberEnabled() ? '' : 'none'\"\r\n [style.font-family]=\"_ItemNumberFontFamily()\"\r\n [style.color]=\"_ItemNumberFontColor()\"\r\n [style.font-size]=\"_ItemNumberPosition() == ListItePositions.Top ? (_FontSize()*0.833)+'px' : (_FontSize())+'px' \"\r\n [style.margin-top]=\"_ItemNumberMarginTop +'px'\"\r\n [style.margin-left]=\"_ItemNumberMarginLeft+'px'\"\r\n [style.margin-right]=\"_ItemNumberMarginRight+'px'\"\r\n >\r\n {{_ItemNumberText()}}\r\n </p>\r\n\r\n <i class=\"{{_Icon()}}\"\r\n [style.display]=\"_IconEnabled() ? '' : 'none'\"\r\n [style.color]=\"_IconColor()\"\r\n [style.font-size]=\"(_FontSize()*1.111)+'px'\"\r\n [style.margin-left]=\"_IconMarginLeft+'px'\"\r\n [style.margin-right]=\"_IconMarginRight+'px'\"\r\n ></i>\r\n\r\n <div class=\"TextContainer\"\r\n [style.margin-left]=\"_TextContainerMarginLeft +'px'\"\r\n >\r\n\r\n <h1 class=\"title\"\r\n [style.font-family]=\"_TitleFontFamily()\"\r\n [style.color]=\"_TitleFontColor()\"\r\n [style.font-size]=\"_FontSize()+'px'\"\r\n >\r\n {{_TitleText()}}\r\n </h1>\r\n\r\n <h2 class=\"sub-title\"\r\n [style.display]=\"_SubTitleEnabled() ? '' : 'none'\"\r\n [style.font-family]=\"_SubTitleFontFamily()\"\r\n [style.color]=\"_SubTitleFontColor()\"\r\n [style.font-size]=\"(_FontSize()*0.833)+'px'\"\r\n >\r\n {{_SubTitleText()}}\r\n </h2>\r\n\r\n </div>\r\n\r\n <div class=\"IconOpenItemContainer\">\r\n <i class=\"{{ItemStateOpen? _ListItemIcons.ItemOpenned : _ListItemIcons.ItemClosed}} ItemOpenState\"\r\n [class.ItemOpenState]=\"ItemStateOpen\"\r\n [class.ItemCloseState]=\"!ItemStateOpen\"\r\n [style.color]=\"_IconOpenItemColor()\"\r\n [style.font-size]=\"(_FontSize()*1.666)+'px'\"\r\n ></i>\r\n </div>\r\n\r\n\r\n </div>\r\n <div class=\"containerWrapped\"\r\n [style.display]=\"ItemStateOpen ? '' : 'none'\"\r\n >\r\n <ng-content/>\r\n </div>\r\n\r\n\r\n</div>\r\n\r\n", styles: [".wrapper{background-color:transparent}.wrapper>.container{display:flex;cursor:pointer}.wrapper>.container>p{margin:0}.wrapper>.container>i{line-height:0px;display:flex;align-items:center;justify-content:center}.wrapper>.container>.TextContainer{display:flex;flex-direction:column;align-items:center;justify-content:center}.wrapper>.container>.TextContainer>h1,h2{margin:0;text-align:center}.wrapper>.container>.IconOpenItemContainer{flex-grow:1;display:flex;align-items:center;justify-content:center}.wrapper>.container>.IconOpenItemContainer>.ItemOpenState{transition:.3s}.wrapper>.container>.IconOpenItemContainer>.ItemCloseState{transform:rotate(90deg);transition:.3s}\n"] }); }
|
|
532
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.0", type: ListItemComponent, isStandalone: true, selector: "app-list-item", inputs: { Name: { classPropertyName: "Name", publicName: "Name", isSignal: true, isRequired: true, transformFunction: null }, _ItemBackGroundColorNormal: { classPropertyName: "_ItemBackGroundColorNormal", publicName: "_ItemBackGroundColorNormal", isSignal: true, isRequired: true, transformFunction: null }, _ItemBackGroundColorHover: { classPropertyName: "_ItemBackGroundColorHover", publicName: "_ItemBackGroundColorHover", isSignal: true, isRequired: true, transformFunction: null }, _ItemNumberEnabled: { classPropertyName: "_ItemNumberEnabled", publicName: "_ItemNumberEnabled", isSignal: true, isRequired: true, transformFunction: null }, _ItemNumberText: { classPropertyName: "_ItemNumberText", publicName: "_ItemNumberText", isSignal: true, isRequired: true, transformFunction: null }, _ItemNumberFontFamily: { classPropertyName: "_ItemNumberFontFamily", publicName: "_ItemNumberFontFamily", isSignal: true, isRequired: true, transformFunction: null }, _ItemNumberFontWeight: { classPropertyName: "_ItemNumberFontWeight", publicName: "_ItemNumberFontWeight", isSignal: true, isRequired: true, transformFunction: null }, _ItemNumberFontColor: { classPropertyName: "_ItemNumberFontColor", publicName: "_ItemNumberFontColor", isSignal: true, isRequired: true, transformFunction: null }, _ItemNumberPosition: { classPropertyName: "_ItemNumberPosition", publicName: "_ItemNumberPosition", isSignal: true, isRequired: true, transformFunction: null }, _IconEnabled: { classPropertyName: "_IconEnabled", publicName: "_IconEnabled", isSignal: true, isRequired: true, transformFunction: null }, _Icon: { classPropertyName: "_Icon", publicName: "_Icon", isSignal: true, isRequired: true, transformFunction: null }, _IconColor: { classPropertyName: "_IconColor", publicName: "_IconColor", isSignal: true, isRequired: true, transformFunction: null }, _TitleText: { classPropertyName: "_TitleText", publicName: "_TitleText", isSignal: true, isRequired: true, transformFunction: null }, _TitleFontFamily: { classPropertyName: "_TitleFontFamily", publicName: "_TitleFontFamily", isSignal: true, isRequired: true, transformFunction: null }, _TitleFontColor: { classPropertyName: "_TitleFontColor", publicName: "_TitleFontColor", isSignal: true, isRequired: true, transformFunction: null }, _TitleFontWeight: { classPropertyName: "_TitleFontWeight", publicName: "_TitleFontWeight", isSignal: true, isRequired: true, transformFunction: null }, _SubTitleEnabled: { classPropertyName: "_SubTitleEnabled", publicName: "_SubTitleEnabled", isSignal: true, isRequired: true, transformFunction: null }, _SubTitleText: { classPropertyName: "_SubTitleText", publicName: "_SubTitleText", isSignal: true, isRequired: true, transformFunction: null }, _SubTitleFontFamily: { classPropertyName: "_SubTitleFontFamily", publicName: "_SubTitleFontFamily", isSignal: true, isRequired: true, transformFunction: null }, _SubTitleFontColor: { classPropertyName: "_SubTitleFontColor", publicName: "_SubTitleFontColor", isSignal: true, isRequired: true, transformFunction: null }, _SubTitleFontWeight: { classPropertyName: "_SubTitleFontWeight", publicName: "_SubTitleFontWeight", isSignal: true, isRequired: true, transformFunction: null }, _IconOpenItemColor: { classPropertyName: "_IconOpenItemColor", publicName: "_IconOpenItemColor", isSignal: true, isRequired: true, transformFunction: null }, _FontSize: { classPropertyName: "_FontSize", publicName: "_FontSize", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "\r\n<div class=\"wrapper\"\r\n[style.width]=\"(_FontSize()*18.611)+'px'\"\r\n[style.height]=\"ItemStateOpen? 'auto' : (_FontSize()*3.777)+'px'\"\r\n>\r\n <div class=\"container\"\r\n (click)=\"OnClick()\"\r\n [style.width]=\"(_FontSize()*18.611)+'px'\"\r\n [style.height]=\"(_FontSize()*3.777)+'px'\"\r\n >\r\n\r\n <p class=\"ItemNumber\"\r\n [style.display]=\"_ItemNumberEnabled() ? '' : 'none'\"\r\n [style.font-family]=\"_ItemNumberFontFamily()\"\r\n [style.font-weight]=\"_ItemNumberFontWeight()\"\r\n [style.color]=\"_ItemNumberFontColor()\"\r\n [style.font-size]=\"_ItemNumberPosition() == ListItePositions.Top ? (_FontSize()*0.833)+'px' : (_FontSize())+'px' \"\r\n [style.margin-top]=\"_ItemNumberMarginTop +'px'\"\r\n [style.margin-left]=\"_ItemNumberMarginLeft+'px'\"\r\n [style.margin-right]=\"_ItemNumberMarginRight+'px'\"\r\n >\r\n {{_ItemNumberText()}}\r\n </p>\r\n\r\n <i class=\"{{_Icon()}}\"\r\n [style.display]=\"_IconEnabled() ? '' : 'none'\"\r\n [style.color]=\"_IconColor()\"\r\n [style.font-size]=\"(_FontSize()*1.111)+'px'\"\r\n [style.margin-left]=\"_IconMarginLeft+'px'\"\r\n [style.margin-right]=\"_IconMarginRight+'px'\"\r\n ></i>\r\n\r\n <div class=\"TextContainer\"\r\n [style.margin-left]=\"_TextContainerMarginLeft +'px'\"\r\n >\r\n\r\n <h1 class=\"title\"\r\n [style.font-family]=\"_TitleFontFamily()\"\r\n [style.color]=\"_TitleFontColor()\"\r\n [style.font-size]=\"_FontSize()+'px'\"\r\n [style.font-weight]=\"_TitleFontWeight()\"\r\n >\r\n {{_TitleText()}}\r\n </h1>\r\n\r\n <h2 class=\"sub-title\"\r\n [style.display]=\"_SubTitleEnabled() ? '' : 'none'\"\r\n [style.font-family]=\"_SubTitleFontFamily()\"\r\n [style.color]=\"_SubTitleFontColor()\"\r\n [style.font-size]=\"(_FontSize()*0.833)+'px'\"\r\n [style.font-weight]=\"_SubTitleFontWeight()\"\r\n >\r\n {{_SubTitleText()}}\r\n </h2>\r\n\r\n </div>\r\n\r\n <div class=\"IconOpenItemContainer\">\r\n <i class=\"{{ItemStateOpen? _ListItemIcons.ItemOpenned : _ListItemIcons.ItemClosed}} ItemOpenState\"\r\n [class.ItemOpenState]=\"ItemStateOpen\"\r\n [class.ItemCloseState]=\"!ItemStateOpen\"\r\n [style.color]=\"_IconOpenItemColor()\"\r\n [style.font-size]=\"(_FontSize()*1.666)+'px'\"\r\n ></i>\r\n </div>\r\n\r\n\r\n </div>\r\n <div class=\"containerWrapped\"\r\n [style.display]=\"ItemStateOpen ? '' : 'none'\"\r\n >\r\n <ng-content/>\r\n </div>\r\n\r\n\r\n</div>\r\n\r\n", styles: [".wrapper{background-color:transparent}.wrapper>.container{display:flex;cursor:pointer}.wrapper>.container>p{margin:0}.wrapper>.container>i{line-height:0px;display:flex;align-items:center;justify-content:center}.wrapper>.container>.TextContainer{display:flex;flex-direction:column;align-items:center;justify-content:center}.wrapper>.container>.TextContainer>h1,h2{margin:0;text-align:center}.wrapper>.container>.IconOpenItemContainer{flex-grow:1;display:flex;align-items:center;justify-content:center}.wrapper>.container>.IconOpenItemContainer>.ItemOpenState{transition:.3s}.wrapper>.container>.IconOpenItemContainer>.ItemCloseState{transform:rotate(90deg);transition:.3s}\n"] }); }
|
|
364
533
|
}
|
|
365
534
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ListItemComponent, decorators: [{
|
|
366
535
|
type: Component,
|
|
367
|
-
args: [{ selector: 'app-list-item', standalone: true, imports: [], template: "\r\n<div class=\"wrapper\"\r\n[style.width]=\"(_FontSize()*18.611)+'px'\"\r\n[style.height]=\"ItemStateOpen? 'auto' : (_FontSize()*3.777)+'px'\"\r\n>\r\n <div class=\"container\"\r\n (click)=\"OnClick()\"\r\n [style.width]=\"(_FontSize()*18.611)+'px'\"\r\n [style.height]=\"(_FontSize()*3.777)+'px'\"\r\n >\r\n\r\n <p class=\"ItemNumber\"\r\n [style.display]=\"_ItemNumberEnabled() ? '' : 'none'\"\r\n [style.font-family]=\"_ItemNumberFontFamily()\"\r\n [style.color]=\"_ItemNumberFontColor()\"\r\n [style.font-size]=\"_ItemNumberPosition() == ListItePositions.Top ? (_FontSize()*0.833)+'px' : (_FontSize())+'px' \"\r\n [style.margin-top]=\"_ItemNumberMarginTop +'px'\"\r\n [style.margin-left]=\"_ItemNumberMarginLeft+'px'\"\r\n [style.margin-right]=\"_ItemNumberMarginRight+'px'\"\r\n >\r\n {{_ItemNumberText()}}\r\n </p>\r\n\r\n <i class=\"{{_Icon()}}\"\r\n [style.display]=\"_IconEnabled() ? '' : 'none'\"\r\n [style.color]=\"_IconColor()\"\r\n [style.font-size]=\"(_FontSize()*1.111)+'px'\"\r\n [style.margin-left]=\"_IconMarginLeft+'px'\"\r\n [style.margin-right]=\"_IconMarginRight+'px'\"\r\n ></i>\r\n\r\n <div class=\"TextContainer\"\r\n [style.margin-left]=\"_TextContainerMarginLeft +'px'\"\r\n >\r\n\r\n <h1 class=\"title\"\r\n [style.font-family]=\"_TitleFontFamily()\"\r\n [style.color]=\"_TitleFontColor()\"\r\n [style.font-size]=\"_FontSize()+'px'\"\r\n >\r\n {{_TitleText()}}\r\n </h1>\r\n\r\n <h2 class=\"sub-title\"\r\n [style.display]=\"_SubTitleEnabled() ? '' : 'none'\"\r\n [style.font-family]=\"_SubTitleFontFamily()\"\r\n [style.color]=\"_SubTitleFontColor()\"\r\n [style.font-size]=\"(_FontSize()*0.833)+'px'\"\r\n >\r\n {{_SubTitleText()}}\r\n </h2>\r\n\r\n </div>\r\n\r\n <div class=\"IconOpenItemContainer\">\r\n <i class=\"{{ItemStateOpen? _ListItemIcons.ItemOpenned : _ListItemIcons.ItemClosed}} ItemOpenState\"\r\n [class.ItemOpenState]=\"ItemStateOpen\"\r\n [class.ItemCloseState]=\"!ItemStateOpen\"\r\n [style.color]=\"_IconOpenItemColor()\"\r\n [style.font-size]=\"(_FontSize()*1.666)+'px'\"\r\n ></i>\r\n </div>\r\n\r\n\r\n </div>\r\n <div class=\"containerWrapped\"\r\n [style.display]=\"ItemStateOpen ? '' : 'none'\"\r\n >\r\n <ng-content/>\r\n </div>\r\n\r\n\r\n</div>\r\n\r\n", styles: [".wrapper{background-color:transparent}.wrapper>.container{display:flex;cursor:pointer}.wrapper>.container>p{margin:0}.wrapper>.container>i{line-height:0px;display:flex;align-items:center;justify-content:center}.wrapper>.container>.TextContainer{display:flex;flex-direction:column;align-items:center;justify-content:center}.wrapper>.container>.TextContainer>h1,h2{margin:0;text-align:center}.wrapper>.container>.IconOpenItemContainer{flex-grow:1;display:flex;align-items:center;justify-content:center}.wrapper>.container>.IconOpenItemContainer>.ItemOpenState{transition:.3s}.wrapper>.container>.IconOpenItemContainer>.ItemCloseState{transform:rotate(90deg);transition:.3s}\n"] }]
|
|
536
|
+
args: [{ selector: 'app-list-item', standalone: true, imports: [], template: "\r\n<div class=\"wrapper\"\r\n[style.width]=\"(_FontSize()*18.611)+'px'\"\r\n[style.height]=\"ItemStateOpen? 'auto' : (_FontSize()*3.777)+'px'\"\r\n>\r\n <div class=\"container\"\r\n (click)=\"OnClick()\"\r\n [style.width]=\"(_FontSize()*18.611)+'px'\"\r\n [style.height]=\"(_FontSize()*3.777)+'px'\"\r\n >\r\n\r\n <p class=\"ItemNumber\"\r\n [style.display]=\"_ItemNumberEnabled() ? '' : 'none'\"\r\n [style.font-family]=\"_ItemNumberFontFamily()\"\r\n [style.font-weight]=\"_ItemNumberFontWeight()\"\r\n [style.color]=\"_ItemNumberFontColor()\"\r\n [style.font-size]=\"_ItemNumberPosition() == ListItePositions.Top ? (_FontSize()*0.833)+'px' : (_FontSize())+'px' \"\r\n [style.margin-top]=\"_ItemNumberMarginTop +'px'\"\r\n [style.margin-left]=\"_ItemNumberMarginLeft+'px'\"\r\n [style.margin-right]=\"_ItemNumberMarginRight+'px'\"\r\n >\r\n {{_ItemNumberText()}}\r\n </p>\r\n\r\n <i class=\"{{_Icon()}}\"\r\n [style.display]=\"_IconEnabled() ? '' : 'none'\"\r\n [style.color]=\"_IconColor()\"\r\n [style.font-size]=\"(_FontSize()*1.111)+'px'\"\r\n [style.margin-left]=\"_IconMarginLeft+'px'\"\r\n [style.margin-right]=\"_IconMarginRight+'px'\"\r\n ></i>\r\n\r\n <div class=\"TextContainer\"\r\n [style.margin-left]=\"_TextContainerMarginLeft +'px'\"\r\n >\r\n\r\n <h1 class=\"title\"\r\n [style.font-family]=\"_TitleFontFamily()\"\r\n [style.color]=\"_TitleFontColor()\"\r\n [style.font-size]=\"_FontSize()+'px'\"\r\n [style.font-weight]=\"_TitleFontWeight()\"\r\n >\r\n {{_TitleText()}}\r\n </h1>\r\n\r\n <h2 class=\"sub-title\"\r\n [style.display]=\"_SubTitleEnabled() ? '' : 'none'\"\r\n [style.font-family]=\"_SubTitleFontFamily()\"\r\n [style.color]=\"_SubTitleFontColor()\"\r\n [style.font-size]=\"(_FontSize()*0.833)+'px'\"\r\n [style.font-weight]=\"_SubTitleFontWeight()\"\r\n >\r\n {{_SubTitleText()}}\r\n </h2>\r\n\r\n </div>\r\n\r\n <div class=\"IconOpenItemContainer\">\r\n <i class=\"{{ItemStateOpen? _ListItemIcons.ItemOpenned : _ListItemIcons.ItemClosed}} ItemOpenState\"\r\n [class.ItemOpenState]=\"ItemStateOpen\"\r\n [class.ItemCloseState]=\"!ItemStateOpen\"\r\n [style.color]=\"_IconOpenItemColor()\"\r\n [style.font-size]=\"(_FontSize()*1.666)+'px'\"\r\n ></i>\r\n </div>\r\n\r\n\r\n </div>\r\n <div class=\"containerWrapped\"\r\n [style.display]=\"ItemStateOpen ? '' : 'none'\"\r\n >\r\n <ng-content/>\r\n </div>\r\n\r\n\r\n</div>\r\n\r\n", styles: [".wrapper{background-color:transparent}.wrapper>.container{display:flex;cursor:pointer}.wrapper>.container>p{margin:0}.wrapper>.container>i{line-height:0px;display:flex;align-items:center;justify-content:center}.wrapper>.container>.TextContainer{display:flex;flex-direction:column;align-items:center;justify-content:center}.wrapper>.container>.TextContainer>h1,h2{margin:0;text-align:center}.wrapper>.container>.IconOpenItemContainer{flex-grow:1;display:flex;align-items:center;justify-content:center}.wrapper>.container>.IconOpenItemContainer>.ItemOpenState{transition:.3s}.wrapper>.container>.IconOpenItemContainer>.ItemCloseState{transform:rotate(90deg);transition:.3s}\n"] }]
|
|
368
537
|
}] });
|
|
369
538
|
|
|
370
539
|
class ListItemModel {
|
|
@@ -393,5 +562,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
|
|
|
393
562
|
* Generated bundle index. Do not edit.
|
|
394
563
|
*/
|
|
395
564
|
|
|
396
|
-
export { ButtonComponent, ButtonIconEnum, ButtonIconPositionEnum, ButtonModel, ButtonService, ButtonTypeEnum, ListItemComponent, ListItemIcons, ListItemModel, ListItemPositions, ListItemService, TxtBoxComponent, TxtBoxIconsEnum, TxtBoxInputTypesEnum, TxtBoxModel, TxtBoxService, TxtBoxTypesEnum };
|
|
565
|
+
export { AlertComponent, AlertIconsEnum, AlertModel, AlertService, AlertTypesEnum, ButtonComponent, ButtonFontWeights, ButtonIconEnum, ButtonIconPositionEnum, ButtonModel, ButtonService, ButtonTypeEnum, ListItemComponent, ListItemFontWeights, ListItemIcons, ListItemModel, ListItemPositions, ListItemService, TxtBoxComponent, TxtBoxFontWeights, TxtBoxIconsEnum, TxtBoxInputTypesEnum, TxtBoxModel, TxtBoxService, TxtBoxTypesEnum };
|
|
397
566
|
//# sourceMappingURL=lightning-tec-br-angular-components.mjs.map
|