@sgcloud-sgsistemas/angular-components 0.0.4 → 0.0.6
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.
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Input, Component, EventEmitter, Output, Directive, HostListener, inject, ElementRef, NgModule } from '@angular/core';
|
|
2
|
+
import { Input, Component, EventEmitter, Output, Directive, HostListener, inject, ElementRef, TemplateRef, ContentChild, ContentChildren, NgModule } from '@angular/core';
|
|
3
3
|
import * as i2 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
|
+
import * as i2$2 from '@angular/cdk/scrolling';
|
|
6
|
+
import { ScrollingModule } from '@angular/cdk/scrolling';
|
|
5
7
|
import * as i2$1 from '@angular/material/icon';
|
|
6
8
|
import { MatIconModule } from '@angular/material/icon';
|
|
7
9
|
import * as i1 from '@angular/forms';
|
|
@@ -51,10 +53,10 @@ class AcButton {
|
|
|
51
53
|
this.isSuccess = this.colorType === 'success';
|
|
52
54
|
this.isWarning = this.colorType === 'warning';
|
|
53
55
|
}
|
|
54
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
55
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.
|
|
56
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
57
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: AcButton, isStandalone: true, selector: "ac-button", inputs: { disabled: "disabled", title: "title", colorType: "colorType", leftIcon: "leftIcon", rightIcon: "rightIcon", onClick: "onClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ac-button\">\n <button \n class=\"ac-button-button\"\n [ngClass]=\"{\n 'white': isWhite,\n 'primary': isPrimary,\n 'secondary': isSecondary,\n 'tertiary': isTertiary,\n 'neutral': isNeutral,\n 'error': isError,\n 'success': isSuccess,\n 'warning': isWarning\n }\"\n (click)=\"actionClick()\" \n [disabled]=\"disabled\">\n\n <mat-icon *ngIf=\"leftIcon\" [fontIcon]=\"leftIcon\"></mat-icon>\n <label *ngIf=\"title\" class=\"ac-button-label\">{{title}}</label>\n <mat-icon *ngIf=\"rightIcon\" [fontIcon]=\"rightIcon\"></mat-icon>\n </button>\n</div>\n ", styles: [".ac-button{height:100%;width:100%;min-height:24px}.ac-button .ac-button-button{display:flex;align-items:center;justify-content:center;gap:8px;border:none;outline:none;border-radius:5px;min-width:50px;width:100%;height:100%;background:var(--primary-color, #0747a6)}.ac-button .ac-button-button:hover{filter:saturate(85%);cursor:pointer}.ac-button .ac-button-button:focus,.ac-button .ac-button-button:active{filter:saturate(85%);cursor:pointer}.ac-button .ac-button-button[disabled]{filter:saturate(55%);pointer-events:none}.ac-button .ac-button-button[disabled].white .ac-button-label{color:#777}.ac-button .ac-button-button .ac-button-label{line-height:normal;font-weight:700;font-size:12px;color:#fff;height:auto}.ac-button .ac-button-button .ac-button-label:focus,.ac-button .ac-button-button .ac-button-label:hover,.ac-button .ac-button-button .ac-button-label:active{cursor:pointer}.ac-button .ac-button-button.white{background:#fff;border:1px solid rgb(191.25,191.25,191.25)}.ac-button .ac-button-button.white .ac-button-label{color:#000;font-weight:500}.ac-button .ac-button-button.primary{background:var(--primary-color, #0747a6)}.ac-button .ac-button-button.secondary{background:var(--secondary-color, #ff991f)}.ac-button .ac-button-button.tertiary{background:var(--tertiary-color, #c822fa)}.ac-button .ac-button-button.neutral{background:var(--neutral-color, #cccccc)}.ac-button .ac-button-button.error{background:var(--error-color, #ff0000)}.ac-button .ac-button-button.success{background:var(--success-color, #0aaa18)}.ac-button .ac-button-button.warning{background:var(--warning-color, #e9d200)}.ac-button .ac-button-button mat-icon{width:auto;height:auto;font-size:24px;color:#fff;display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
56
58
|
}
|
|
57
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
59
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcButton, decorators: [{
|
|
58
60
|
type: Component,
|
|
59
61
|
args: [{ selector: 'ac-button', imports: [CommonModule, MatIconModule], template: "<div class=\"ac-button\">\n <button \n class=\"ac-button-button\"\n [ngClass]=\"{\n 'white': isWhite,\n 'primary': isPrimary,\n 'secondary': isSecondary,\n 'tertiary': isTertiary,\n 'neutral': isNeutral,\n 'error': isError,\n 'success': isSuccess,\n 'warning': isWarning\n }\"\n (click)=\"actionClick()\" \n [disabled]=\"disabled\">\n\n <mat-icon *ngIf=\"leftIcon\" [fontIcon]=\"leftIcon\"></mat-icon>\n <label *ngIf=\"title\" class=\"ac-button-label\">{{title}}</label>\n <mat-icon *ngIf=\"rightIcon\" [fontIcon]=\"rightIcon\"></mat-icon>\n </button>\n</div>\n ", styles: [".ac-button{height:100%;width:100%;min-height:24px}.ac-button .ac-button-button{display:flex;align-items:center;justify-content:center;gap:8px;border:none;outline:none;border-radius:5px;min-width:50px;width:100%;height:100%;background:var(--primary-color, #0747a6)}.ac-button .ac-button-button:hover{filter:saturate(85%);cursor:pointer}.ac-button .ac-button-button:focus,.ac-button .ac-button-button:active{filter:saturate(85%);cursor:pointer}.ac-button .ac-button-button[disabled]{filter:saturate(55%);pointer-events:none}.ac-button .ac-button-button[disabled].white .ac-button-label{color:#777}.ac-button .ac-button-button .ac-button-label{line-height:normal;font-weight:700;font-size:12px;color:#fff;height:auto}.ac-button .ac-button-button .ac-button-label:focus,.ac-button .ac-button-button .ac-button-label:hover,.ac-button .ac-button-button .ac-button-label:active{cursor:pointer}.ac-button .ac-button-button.white{background:#fff;border:1px solid rgb(191.25,191.25,191.25)}.ac-button .ac-button-button.white .ac-button-label{color:#000;font-weight:500}.ac-button .ac-button-button.primary{background:var(--primary-color, #0747a6)}.ac-button .ac-button-button.secondary{background:var(--secondary-color, #ff991f)}.ac-button .ac-button-button.tertiary{background:var(--tertiary-color, #c822fa)}.ac-button .ac-button-button.neutral{background:var(--neutral-color, #cccccc)}.ac-button .ac-button-button.error{background:var(--error-color, #ff0000)}.ac-button .ac-button-button.success{background:var(--success-color, #0aaa18)}.ac-button .ac-button-button.warning{background:var(--warning-color, #e9d200)}.ac-button .ac-button-button mat-icon{width:auto;height:auto;font-size:24px;color:#fff;display:flex;align-items:center;justify-content:center}\n"] }]
|
|
60
62
|
}], ctorParameters: () => [], propDecorators: { disabled: [{
|
|
@@ -91,10 +93,10 @@ class AcSwitch {
|
|
|
91
93
|
this.onToggle();
|
|
92
94
|
}
|
|
93
95
|
}
|
|
94
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
95
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.
|
|
96
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcSwitch, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
97
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: AcSwitch, isStandalone: true, selector: "ac-switch", inputs: { model: "model", disabled: "disabled", title: "title", buildTitleSpace: "buildTitleSpace", titleColor: "titleColor", backgroundColor: "backgroundColor", checkedColor: "checkedColor", focusColor: "focusColor", ballColor: "ballColor", onToggle: "onToggle" }, outputs: { modelChange: "modelChange" }, ngImport: i0, template: "<div class=\"ac-switch\" \n [ngStyle]=\"{ \n '--switch-bg-color': backgroundColor,\n '--switch-checked-bg-color': checkedColor, \n '--switch-focus-color': focusColor,\n '--switch-ball-color': ballColor,\n '--title-color': titleColor\n }\">\n <label class=\"ac-label ac-switch-label\" *ngIf=\"buildTitleSpace || title\">{{title}}</label>\n <label class=\"ac-switch-comp\">\n <input\n class=\"ac-switch-input\" \n type=\"checkbox\" \n [checked]=\"model\"\n [(ngModel)]=\"model\"\n [disabled]=\"disabled\"\n (change)=\"onChange()\"\n >\n <span class=\"slider\"></span>\n </label>\n</div>\n", styles: [".ac-label{width:100%;line-height:normal;font-weight:400;font-size:14px;padding-bottom:2px;height:auto;color:var(--font-color, black)}.ac-switch{display:flex;flex-direction:column;align-items:flex-start}.ac-switch .ac-switch-label{color:var(--title-color, var(--font-color, black))}.ac-switch .ac-switch-comp{position:relative;display:inline-block;width:30px;height:20px;-webkit-user-select:none;user-select:none}.ac-switch .ac-switch-comp input{opacity:0;width:0;height:0}.ac-switch .slider{position:absolute;cursor:pointer;inset:0;background-color:var(--switch-bg-color);transition:.4s;border-radius:20px}.ac-switch .slider:before{position:absolute;content:\"\";height:14px;width:14px;left:3px;bottom:3px;background-color:var(--switch-ball-color);transition:.15s;border-radius:50%}.ac-switch input:checked+.slider{background-color:var(--switch-checked-bg-color)}.ac-switch input:checked+.slider:before{transform:translate(10px)}.ac-switch input:focus+.slider{box-shadow:0 0 1px 1px var(--switch-focus-color)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
96
98
|
}
|
|
97
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
99
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcSwitch, decorators: [{
|
|
98
100
|
type: Component,
|
|
99
101
|
args: [{ selector: 'ac-switch', imports: [FormsModule, CommonModule], template: "<div class=\"ac-switch\" \n [ngStyle]=\"{ \n '--switch-bg-color': backgroundColor,\n '--switch-checked-bg-color': checkedColor, \n '--switch-focus-color': focusColor,\n '--switch-ball-color': ballColor,\n '--title-color': titleColor\n }\">\n <label class=\"ac-label ac-switch-label\" *ngIf=\"buildTitleSpace || title\">{{title}}</label>\n <label class=\"ac-switch-comp\">\n <input\n class=\"ac-switch-input\" \n type=\"checkbox\" \n [checked]=\"model\"\n [(ngModel)]=\"model\"\n [disabled]=\"disabled\"\n (change)=\"onChange()\"\n >\n <span class=\"slider\"></span>\n </label>\n</div>\n", styles: [".ac-label{width:100%;line-height:normal;font-weight:400;font-size:14px;padding-bottom:2px;height:auto;color:var(--font-color, black)}.ac-switch{display:flex;flex-direction:column;align-items:flex-start}.ac-switch .ac-switch-label{color:var(--title-color, var(--font-color, black))}.ac-switch .ac-switch-comp{position:relative;display:inline-block;width:30px;height:20px;-webkit-user-select:none;user-select:none}.ac-switch .ac-switch-comp input{opacity:0;width:0;height:0}.ac-switch .slider{position:absolute;cursor:pointer;inset:0;background-color:var(--switch-bg-color);transition:.4s;border-radius:20px}.ac-switch .slider:before{position:absolute;content:\"\";height:14px;width:14px;left:3px;bottom:3px;background-color:var(--switch-ball-color);transition:.15s;border-radius:50%}.ac-switch input:checked+.slider{background-color:var(--switch-checked-bg-color)}.ac-switch input:checked+.slider:before{transform:translate(10px)}.ac-switch input:focus+.slider{box-shadow:0 0 1px 1px var(--switch-focus-color)}\n"] }]
|
|
100
102
|
}], ctorParameters: () => [], propDecorators: { model: [{
|
|
@@ -129,6 +131,7 @@ class AcInput {
|
|
|
129
131
|
buildTitleSpace = false;
|
|
130
132
|
debounce = 0;
|
|
131
133
|
onChangeModel = null;
|
|
134
|
+
applyFormatText = null;
|
|
132
135
|
modelChange = new EventEmitter();
|
|
133
136
|
inputSubject = new Subject();
|
|
134
137
|
constructor() { }
|
|
@@ -141,12 +144,19 @@ class AcInput {
|
|
|
141
144
|
});
|
|
142
145
|
}
|
|
143
146
|
onChange(value) {
|
|
144
|
-
|
|
147
|
+
setTimeout(() => {
|
|
148
|
+
this.inputSubject.next(value);
|
|
149
|
+
setTimeout(() => {
|
|
150
|
+
if (this.applyFormatText) {
|
|
151
|
+
this.inputSubject.next(this.applyFormatText(value));
|
|
152
|
+
}
|
|
153
|
+
});
|
|
154
|
+
});
|
|
145
155
|
}
|
|
146
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
147
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.
|
|
156
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
157
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.2", type: AcInput, isStandalone: true, inputs: { model: "model", disabled: "disabled", placeholder: "placeholder", title: "title", buildTitleSpace: "buildTitleSpace", debounce: "debounce", onChangeModel: "onChangeModel", applyFormatText: "applyFormatText" }, outputs: { modelChange: "modelChange" }, ngImport: i0 });
|
|
148
158
|
}
|
|
149
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
159
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcInput, decorators: [{
|
|
150
160
|
type: Directive
|
|
151
161
|
}], ctorParameters: () => [], propDecorators: { model: [{
|
|
152
162
|
type: Input
|
|
@@ -162,6 +172,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
162
172
|
type: Input
|
|
163
173
|
}], onChangeModel: [{
|
|
164
174
|
type: Input
|
|
175
|
+
}], applyFormatText: [{
|
|
176
|
+
type: Input
|
|
165
177
|
}], modelChange: [{
|
|
166
178
|
type: Output
|
|
167
179
|
}] } });
|
|
@@ -174,10 +186,10 @@ class AcInputPassword extends AcInput {
|
|
|
174
186
|
togglePasswordVisibility() {
|
|
175
187
|
this.showPassword = !this.showPassword;
|
|
176
188
|
}
|
|
177
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
178
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.
|
|
189
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcInputPassword, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
190
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: AcInputPassword, isStandalone: true, selector: "ac-input-password", usesInheritance: true, ngImport: i0, template: "<div class=\"ac-input-base ac-input-password\">\n <label class=\"ac-label\" *ngIf=\"buildTitleSpace || title\">{{title}}</label>\n <div class=\"ac-input-base-comp ac-input-password-comp\" [ngClass]=\"{ 'disabled': disabled }\">\n <input\n [type]=\"showPassword ? 'text' : 'password'\" \n [(ngModel)]=\"model\"\n [disabled]=\"disabled\"\n (ngModelChange)=\"onChange($event)\"\n placeholder=\"{{placeholder}}\"\n >\n <button \n type=\"button\" \n class=\"toggle-password-visibility\"\n (click)=\"togglePasswordVisibility()\">\n <i class=\"material-icons\">{{ showPassword ? 'visibility_off' : 'visibility' }}</i>\n </button>\n </div>\n\n</div>\n", styles: [".ac-input-base{display:flex;flex-direction:column;align-items:flex-start;width:100%;margin-top:2px;margin-bottom:2px}.ac-input-base .ac-input-base-comp.disabled{pointer-events:none;opacity:.9;background-color:color-mix(in srgb,var(--font-color, black) 8%,transparent)}.ac-input-base .ac-input-base-comp{position:relative;display:flex;align-items:center;width:100%;height:21px;transition:border-bottom-color .3s ease;border-radius:5px;border:1px solid rgb(191.25,191.25,191.25);box-sizing:border-box}.ac-input-base .ac-input-base-comp:focus-within{border-bottom:2px solid var(--primary-color, #0747a6)}.ac-input-base .ac-input-base-comp>input{width:100%;padding:2px 5px;background:none;outline:none;position:relative;color:var(--font-color, black);font-size:14px;border:none}.ac-label{width:100%;line-height:normal;font-weight:400;font-size:14px;padding-bottom:2px;height:auto;color:var(--font-color, black)}.ac-input-password .ac-input-password-comp .toggle-password-visibility{position:absolute;right:5px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--font-color, black);height:14px;display:flex;align-items:center;justify-content:center}.ac-input-password .ac-input-password-comp .toggle-password-visibility .material-icons{font-size:16px}\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
179
191
|
}
|
|
180
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
192
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcInputPassword, decorators: [{
|
|
181
193
|
type: Component,
|
|
182
194
|
args: [{ selector: 'ac-input-password', imports: [FormsModule, CommonModule], template: "<div class=\"ac-input-base ac-input-password\">\n <label class=\"ac-label\" *ngIf=\"buildTitleSpace || title\">{{title}}</label>\n <div class=\"ac-input-base-comp ac-input-password-comp\" [ngClass]=\"{ 'disabled': disabled }\">\n <input\n [type]=\"showPassword ? 'text' : 'password'\" \n [(ngModel)]=\"model\"\n [disabled]=\"disabled\"\n (ngModelChange)=\"onChange($event)\"\n placeholder=\"{{placeholder}}\"\n >\n <button \n type=\"button\" \n class=\"toggle-password-visibility\"\n (click)=\"togglePasswordVisibility()\">\n <i class=\"material-icons\">{{ showPassword ? 'visibility_off' : 'visibility' }}</i>\n </button>\n </div>\n\n</div>\n", styles: [".ac-input-base{display:flex;flex-direction:column;align-items:flex-start;width:100%;margin-top:2px;margin-bottom:2px}.ac-input-base .ac-input-base-comp.disabled{pointer-events:none;opacity:.9;background-color:color-mix(in srgb,var(--font-color, black) 8%,transparent)}.ac-input-base .ac-input-base-comp{position:relative;display:flex;align-items:center;width:100%;height:21px;transition:border-bottom-color .3s ease;border-radius:5px;border:1px solid rgb(191.25,191.25,191.25);box-sizing:border-box}.ac-input-base .ac-input-base-comp:focus-within{border-bottom:2px solid var(--primary-color, #0747a6)}.ac-input-base .ac-input-base-comp>input{width:100%;padding:2px 5px;background:none;outline:none;position:relative;color:var(--font-color, black);font-size:14px;border:none}.ac-label{width:100%;line-height:normal;font-weight:400;font-size:14px;padding-bottom:2px;height:auto;color:var(--font-color, black)}.ac-input-password .ac-input-password-comp .toggle-password-visibility{position:absolute;right:5px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--font-color, black);height:14px;display:flex;align-items:center;justify-content:center}.ac-input-password .ac-input-password-comp .toggle-password-visibility .material-icons{font-size:16px}\n"] }]
|
|
183
195
|
}], ctorParameters: () => [] });
|
|
@@ -186,10 +198,10 @@ class AcInputText extends AcInput {
|
|
|
186
198
|
constructor() {
|
|
187
199
|
super();
|
|
188
200
|
}
|
|
189
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
190
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.
|
|
201
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcInputText, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
202
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: AcInputText, isStandalone: true, selector: "ac-input-text", usesInheritance: true, ngImport: i0, template: "<div class=\"ac-input-base\">\n <label class=\"ac-label\" *ngIf=\"buildTitleSpace || title\">{{title}}</label>\n <div class=\"ac-input-base-comp\" [ngClass]=\"{ 'disabled': disabled }\">\n <input\n [type]=\"'text'\" \n [(ngModel)]=\"model\"\n [disabled]=\"disabled\"\n (ngModelChange)=\"onChange($event)\"\n placeholder=\"{{placeholder}}\"\n >\n </div>\n</div>\n", styles: [".ac-input-base{display:flex;flex-direction:column;align-items:flex-start;width:100%;margin-top:2px;margin-bottom:2px}.ac-input-base .ac-input-base-comp.disabled{pointer-events:none;opacity:.9;background-color:color-mix(in srgb,var(--font-color, black) 8%,transparent)}.ac-input-base .ac-input-base-comp{position:relative;display:flex;align-items:center;width:100%;height:21px;transition:border-bottom-color .3s ease;border-radius:5px;border:1px solid rgb(191.25,191.25,191.25);box-sizing:border-box}.ac-input-base .ac-input-base-comp:focus-within{border-bottom:2px solid var(--primary-color, #0747a6)}.ac-input-base .ac-input-base-comp>input{width:100%;padding:2px 5px;background:none;outline:none;position:relative;color:var(--font-color, black);font-size:14px;border:none}.ac-label{width:100%;line-height:normal;font-weight:400;font-size:14px;padding-bottom:2px;height:auto;color:var(--font-color, black)}\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
191
203
|
}
|
|
192
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
204
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcInputText, decorators: [{
|
|
193
205
|
type: Component,
|
|
194
206
|
args: [{ selector: 'ac-input-text', imports: [FormsModule, CommonModule], template: "<div class=\"ac-input-base\">\n <label class=\"ac-label\" *ngIf=\"buildTitleSpace || title\">{{title}}</label>\n <div class=\"ac-input-base-comp\" [ngClass]=\"{ 'disabled': disabled }\">\n <input\n [type]=\"'text'\" \n [(ngModel)]=\"model\"\n [disabled]=\"disabled\"\n (ngModelChange)=\"onChange($event)\"\n placeholder=\"{{placeholder}}\"\n >\n </div>\n</div>\n", styles: [".ac-input-base{display:flex;flex-direction:column;align-items:flex-start;width:100%;margin-top:2px;margin-bottom:2px}.ac-input-base .ac-input-base-comp.disabled{pointer-events:none;opacity:.9;background-color:color-mix(in srgb,var(--font-color, black) 8%,transparent)}.ac-input-base .ac-input-base-comp{position:relative;display:flex;align-items:center;width:100%;height:21px;transition:border-bottom-color .3s ease;border-radius:5px;border:1px solid rgb(191.25,191.25,191.25);box-sizing:border-box}.ac-input-base .ac-input-base-comp:focus-within{border-bottom:2px solid var(--primary-color, #0747a6)}.ac-input-base .ac-input-base-comp>input{width:100%;padding:2px 5px;background:none;outline:none;position:relative;color:var(--font-color, black);font-size:14px;border:none}.ac-label{width:100%;line-height:normal;font-weight:400;font-size:14px;padding-bottom:2px;height:auto;color:var(--font-color, black)}\n"] }]
|
|
195
207
|
}], ctorParameters: () => [] });
|
|
@@ -207,7 +219,8 @@ class AcInputMaskNumber {
|
|
|
207
219
|
formattedValue = '';
|
|
208
220
|
constructor() { }
|
|
209
221
|
ngOnInit() {
|
|
210
|
-
this.
|
|
222
|
+
const value = typeof this.model === 'number' ? this.model.toString() : this.model;
|
|
223
|
+
this.formattedValue = this.applyMask(value, false);
|
|
211
224
|
this.inputSubject.pipe(debounceTime(this.debounce)).subscribe((value) => {
|
|
212
225
|
this.modelChange.emit(value);
|
|
213
226
|
if (this.onChangeModel) {
|
|
@@ -217,7 +230,8 @@ class AcInputMaskNumber {
|
|
|
217
230
|
}
|
|
218
231
|
ngOnChanges(changes) {
|
|
219
232
|
if (changes['model'] && changes['model'].currentValue !== changes['model'].previousValue) {
|
|
220
|
-
this.
|
|
233
|
+
const value = typeof this.model === 'number' ? this.model.toString() : this.model;
|
|
234
|
+
this.formattedValue = this.applyMask(value, false);
|
|
221
235
|
}
|
|
222
236
|
}
|
|
223
237
|
onChange(value) {
|
|
@@ -226,10 +240,10 @@ class AcInputMaskNumber {
|
|
|
226
240
|
this.inputSubject.next(this.formattedValue.replace(/\D/g, ''));
|
|
227
241
|
});
|
|
228
242
|
}
|
|
229
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
230
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.
|
|
243
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcInputMaskNumber, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
244
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.2", type: AcInputMaskNumber, isStandalone: true, inputs: { model: "model", disabled: "disabled", placeholder: "placeholder", title: "title", buildTitleSpace: "buildTitleSpace", debounce: "debounce", onChangeModel: "onChangeModel" }, outputs: { modelChange: "modelChange" }, usesOnChanges: true, ngImport: i0 });
|
|
231
245
|
}
|
|
232
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
246
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcInputMaskNumber, decorators: [{
|
|
233
247
|
type: Directive
|
|
234
248
|
}], ctorParameters: () => [], propDecorators: { model: [{
|
|
235
249
|
type: Input
|
|
@@ -270,10 +284,10 @@ class AcInputDocumentNumber extends AcInputMaskNumber {
|
|
|
270
284
|
}
|
|
271
285
|
return value;
|
|
272
286
|
}
|
|
273
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
274
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.
|
|
287
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcInputDocumentNumber, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
288
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: AcInputDocumentNumber, isStandalone: true, selector: "ac-input-document-number", inputs: { documentType: "documentType" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ac-input-base\">\n <label class=\"ac-label\" *ngIf=\"buildTitleSpace || title\">{{title}}</label>\n <div class=\"ac-input-base-comp\" [ngClass]=\"{ 'disabled': disabled }\">\n <input\n [type]=\"'text'\" \n [(ngModel)]=\"formattedValue\"\n [disabled]=\"disabled\"\n (ngModelChange)=\"onChange($event)\"\n placeholder=\"{{placeholder}}\"\n >\n </div>\n</div>\n", styles: [".ac-input-base{display:flex;flex-direction:column;align-items:flex-start;width:100%;margin-top:2px;margin-bottom:2px}.ac-input-base .ac-input-base-comp.disabled{pointer-events:none;opacity:.9;background-color:color-mix(in srgb,var(--font-color, black) 8%,transparent)}.ac-input-base .ac-input-base-comp{position:relative;display:flex;align-items:center;width:100%;height:21px;transition:border-bottom-color .3s ease;border-radius:5px;border:1px solid rgb(191.25,191.25,191.25);box-sizing:border-box}.ac-input-base .ac-input-base-comp:focus-within{border-bottom:2px solid var(--primary-color, #0747a6)}.ac-input-base .ac-input-base-comp>input{width:100%;padding:2px 5px;background:none;outline:none;position:relative;color:var(--font-color, black);font-size:14px;border:none}.ac-label{width:100%;line-height:normal;font-weight:400;font-size:14px;padding-bottom:2px;height:auto;color:var(--font-color, black)}\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
275
289
|
}
|
|
276
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
290
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcInputDocumentNumber, decorators: [{
|
|
277
291
|
type: Component,
|
|
278
292
|
args: [{ selector: 'ac-input-document-number', imports: [FormsModule, CommonModule], template: "<div class=\"ac-input-base\">\n <label class=\"ac-label\" *ngIf=\"buildTitleSpace || title\">{{title}}</label>\n <div class=\"ac-input-base-comp\" [ngClass]=\"{ 'disabled': disabled }\">\n <input\n [type]=\"'text'\" \n [(ngModel)]=\"formattedValue\"\n [disabled]=\"disabled\"\n (ngModelChange)=\"onChange($event)\"\n placeholder=\"{{placeholder}}\"\n >\n </div>\n</div>\n", styles: [".ac-input-base{display:flex;flex-direction:column;align-items:flex-start;width:100%;margin-top:2px;margin-bottom:2px}.ac-input-base .ac-input-base-comp.disabled{pointer-events:none;opacity:.9;background-color:color-mix(in srgb,var(--font-color, black) 8%,transparent)}.ac-input-base .ac-input-base-comp{position:relative;display:flex;align-items:center;width:100%;height:21px;transition:border-bottom-color .3s ease;border-radius:5px;border:1px solid rgb(191.25,191.25,191.25);box-sizing:border-box}.ac-input-base .ac-input-base-comp:focus-within{border-bottom:2px solid var(--primary-color, #0747a6)}.ac-input-base .ac-input-base-comp>input{width:100%;padding:2px 5px;background:none;outline:none;position:relative;color:var(--font-color, black);font-size:14px;border:none}.ac-label{width:100%;line-height:normal;font-weight:400;font-size:14px;padding-bottom:2px;height:auto;color:var(--font-color, black)}\n"] }]
|
|
279
293
|
}], ctorParameters: () => [], propDecorators: { documentType: [{
|
|
@@ -303,10 +317,10 @@ class AcInputPhoneNumber extends AcInputMaskNumber {
|
|
|
303
317
|
}
|
|
304
318
|
return value;
|
|
305
319
|
}
|
|
306
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
307
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.
|
|
320
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcInputPhoneNumber, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
321
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: AcInputPhoneNumber, isStandalone: true, selector: "ac-input-phone-number", usesInheritance: true, ngImport: i0, template: "<div class=\"ac-input-base\">\n <label class=\"ac-label\" *ngIf=\"buildTitleSpace || title\">{{title}}</label>\n <div class=\"ac-input-base-comp\" [ngClass]=\"{ 'disabled': disabled }\">\n <input\n [type]=\"'text'\" \n [(ngModel)]=\"formattedValue\"\n [disabled]=\"disabled\"\n (ngModelChange)=\"onChange($event)\"\n placeholder=\"{{placeholder}}\"\n >\n </div>\n</div>\n", styles: [".ac-input-base{display:flex;flex-direction:column;align-items:flex-start;width:100%;margin-top:2px;margin-bottom:2px}.ac-input-base .ac-input-base-comp.disabled{pointer-events:none;opacity:.9;background-color:color-mix(in srgb,var(--font-color, black) 8%,transparent)}.ac-input-base .ac-input-base-comp{position:relative;display:flex;align-items:center;width:100%;height:21px;transition:border-bottom-color .3s ease;border-radius:5px;border:1px solid rgb(191.25,191.25,191.25);box-sizing:border-box}.ac-input-base .ac-input-base-comp:focus-within{border-bottom:2px solid var(--primary-color, #0747a6)}.ac-input-base .ac-input-base-comp>input{width:100%;padding:2px 5px;background:none;outline:none;position:relative;color:var(--font-color, black);font-size:14px;border:none}.ac-label{width:100%;line-height:normal;font-weight:400;font-size:14px;padding-bottom:2px;height:auto;color:var(--font-color, black)}\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
308
322
|
}
|
|
309
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
323
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcInputPhoneNumber, decorators: [{
|
|
310
324
|
type: Component,
|
|
311
325
|
args: [{ selector: 'ac-input-phone-number', imports: [FormsModule, CommonModule], template: "<div class=\"ac-input-base\">\n <label class=\"ac-label\" *ngIf=\"buildTitleSpace || title\">{{title}}</label>\n <div class=\"ac-input-base-comp\" [ngClass]=\"{ 'disabled': disabled }\">\n <input\n [type]=\"'text'\" \n [(ngModel)]=\"formattedValue\"\n [disabled]=\"disabled\"\n (ngModelChange)=\"onChange($event)\"\n placeholder=\"{{placeholder}}\"\n >\n </div>\n</div>\n", styles: [".ac-input-base{display:flex;flex-direction:column;align-items:flex-start;width:100%;margin-top:2px;margin-bottom:2px}.ac-input-base .ac-input-base-comp.disabled{pointer-events:none;opacity:.9;background-color:color-mix(in srgb,var(--font-color, black) 8%,transparent)}.ac-input-base .ac-input-base-comp{position:relative;display:flex;align-items:center;width:100%;height:21px;transition:border-bottom-color .3s ease;border-radius:5px;border:1px solid rgb(191.25,191.25,191.25);box-sizing:border-box}.ac-input-base .ac-input-base-comp:focus-within{border-bottom:2px solid var(--primary-color, #0747a6)}.ac-input-base .ac-input-base-comp>input{width:100%;padding:2px 5px;background:none;outline:none;position:relative;color:var(--font-color, black);font-size:14px;border:none}.ac-label{width:100%;line-height:normal;font-weight:400;font-size:14px;padding-bottom:2px;height:auto;color:var(--font-color, black)}\n"] }]
|
|
312
326
|
}], ctorParameters: () => [] });
|
|
@@ -376,10 +390,10 @@ class AcInputDateTimeDefault {
|
|
|
376
390
|
const seconds = String(date.getSeconds()).padStart(2, '0');
|
|
377
391
|
return `${hours}:${minutes}:${seconds}`;
|
|
378
392
|
}
|
|
379
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
380
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.
|
|
393
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcInputDateTimeDefault, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
394
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.2", type: AcInputDateTimeDefault, isStandalone: true, inputs: { model: "model", disabled: "disabled", title: "title", buildTitleSpace: "buildTitleSpace", debounce: "debounce", onChangeModel: "onChangeModel" }, outputs: { modelChange: "modelChange" }, usesOnChanges: true, ngImport: i0 });
|
|
381
395
|
}
|
|
382
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
396
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcInputDateTimeDefault, decorators: [{
|
|
383
397
|
type: Directive
|
|
384
398
|
}], ctorParameters: () => [], propDecorators: { model: [{
|
|
385
399
|
type: Input
|
|
@@ -401,10 +415,10 @@ class AcInputDateTime extends AcInputDateTimeDefault {
|
|
|
401
415
|
constructor() {
|
|
402
416
|
super();
|
|
403
417
|
}
|
|
404
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
405
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.
|
|
418
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcInputDateTime, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
419
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: AcInputDateTime, isStandalone: true, selector: "ac-input-date-time", usesInheritance: true, ngImport: i0, template: "<div class=\"ac-input-base\">\n <label class=\"ac-label\" *ngIf=\"buildTitleSpace || title\">{{title}}</label>\n <div class=\"ac-input-base-comp\" [ngClass]=\"{ 'disabled': disabled }\">\n <input\n [type]=\"'date'\" \n [(ngModel)]=\"date\"\n [disabled]=\"disabled\"\n (ngModelChange)=\"onChangeDate($event)\"\n >\n <input\n [type]=\"'time'\" \n [(ngModel)]=\"time\"\n [disabled]=\"disabled\"\n (ngModelChange)=\"onChangeTime($event)\"\n >\n </div>\n</div>\n", styles: [".ac-input-base{display:flex;flex-direction:column;align-items:flex-start;width:100%;margin-top:2px;margin-bottom:2px}.ac-input-base .ac-input-base-comp.disabled{pointer-events:none;opacity:.9;background-color:color-mix(in srgb,var(--font-color, black) 8%,transparent)}.ac-input-base .ac-input-base-comp{position:relative;display:flex;align-items:center;width:100%;height:21px;transition:border-bottom-color .3s ease;border-radius:5px;border:1px solid rgb(191.25,191.25,191.25);box-sizing:border-box}.ac-input-base .ac-input-base-comp:focus-within{border-bottom:2px solid var(--primary-color, #0747a6)}.ac-input-base .ac-input-base-comp>input{width:100%;padding:2px 5px;background:none;outline:none;position:relative;color:var(--font-color, black);font-size:14px;border:none}.ac-label{width:100%;line-height:normal;font-weight:400;font-size:14px;padding-bottom:2px;height:auto;color:var(--font-color, black)}\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
406
420
|
}
|
|
407
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
421
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcInputDateTime, decorators: [{
|
|
408
422
|
type: Component,
|
|
409
423
|
args: [{ selector: 'ac-input-date-time', imports: [FormsModule, CommonModule], template: "<div class=\"ac-input-base\">\n <label class=\"ac-label\" *ngIf=\"buildTitleSpace || title\">{{title}}</label>\n <div class=\"ac-input-base-comp\" [ngClass]=\"{ 'disabled': disabled }\">\n <input\n [type]=\"'date'\" \n [(ngModel)]=\"date\"\n [disabled]=\"disabled\"\n (ngModelChange)=\"onChangeDate($event)\"\n >\n <input\n [type]=\"'time'\" \n [(ngModel)]=\"time\"\n [disabled]=\"disabled\"\n (ngModelChange)=\"onChangeTime($event)\"\n >\n </div>\n</div>\n", styles: [".ac-input-base{display:flex;flex-direction:column;align-items:flex-start;width:100%;margin-top:2px;margin-bottom:2px}.ac-input-base .ac-input-base-comp.disabled{pointer-events:none;opacity:.9;background-color:color-mix(in srgb,var(--font-color, black) 8%,transparent)}.ac-input-base .ac-input-base-comp{position:relative;display:flex;align-items:center;width:100%;height:21px;transition:border-bottom-color .3s ease;border-radius:5px;border:1px solid rgb(191.25,191.25,191.25);box-sizing:border-box}.ac-input-base .ac-input-base-comp:focus-within{border-bottom:2px solid var(--primary-color, #0747a6)}.ac-input-base .ac-input-base-comp>input{width:100%;padding:2px 5px;background:none;outline:none;position:relative;color:var(--font-color, black);font-size:14px;border:none}.ac-label{width:100%;line-height:normal;font-weight:400;font-size:14px;padding-bottom:2px;height:auto;color:var(--font-color, black)}\n"] }]
|
|
410
424
|
}], ctorParameters: () => [] });
|
|
@@ -413,10 +427,23 @@ class AcInputDate extends AcInputDateTimeDefault {
|
|
|
413
427
|
constructor() {
|
|
414
428
|
super();
|
|
415
429
|
}
|
|
416
|
-
|
|
417
|
-
|
|
430
|
+
applyMask() {
|
|
431
|
+
if (this.model) {
|
|
432
|
+
if (typeof this.model === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(this.model)) {
|
|
433
|
+
this.date = this.model;
|
|
434
|
+
this.time = '';
|
|
435
|
+
}
|
|
436
|
+
else {
|
|
437
|
+
const dateObj = new Date(this.model);
|
|
438
|
+
this.date = this.formatDate(dateObj);
|
|
439
|
+
this.time = this.formatTime(dateObj);
|
|
440
|
+
}
|
|
441
|
+
}
|
|
442
|
+
}
|
|
443
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcInputDate, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
444
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: AcInputDate, isStandalone: true, selector: "ac-input-date", usesInheritance: true, ngImport: i0, template: "<div class=\"ac-input-base\">\n <label class=\"ac-label\" *ngIf=\"buildTitleSpace || title\">{{title}}</label>\n <div class=\"ac-input-base-comp\" [ngClass]=\"{ 'disabled': disabled }\">\n <input\n [type]=\"'date'\" \n [(ngModel)]=\"date\"\n [disabled]=\"disabled\"\n (ngModelChange)=\"onChangeDate($event)\"\n >\n </div>\n</div>\n", styles: [".ac-input-base{display:flex;flex-direction:column;align-items:flex-start;width:100%;margin-top:2px;margin-bottom:2px}.ac-input-base .ac-input-base-comp.disabled{pointer-events:none;opacity:.9;background-color:color-mix(in srgb,var(--font-color, black) 8%,transparent)}.ac-input-base .ac-input-base-comp{position:relative;display:flex;align-items:center;width:100%;height:21px;transition:border-bottom-color .3s ease;border-radius:5px;border:1px solid rgb(191.25,191.25,191.25);box-sizing:border-box}.ac-input-base .ac-input-base-comp:focus-within{border-bottom:2px solid var(--primary-color, #0747a6)}.ac-input-base .ac-input-base-comp>input{width:100%;padding:2px 5px;background:none;outline:none;position:relative;color:var(--font-color, black);font-size:14px;border:none}.ac-label{width:100%;line-height:normal;font-weight:400;font-size:14px;padding-bottom:2px;height:auto;color:var(--font-color, black)}\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
418
445
|
}
|
|
419
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
446
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcInputDate, decorators: [{
|
|
420
447
|
type: Component,
|
|
421
448
|
args: [{ selector: 'ac-input-date', imports: [FormsModule, CommonModule], template: "<div class=\"ac-input-base\">\n <label class=\"ac-label\" *ngIf=\"buildTitleSpace || title\">{{title}}</label>\n <div class=\"ac-input-base-comp\" [ngClass]=\"{ 'disabled': disabled }\">\n <input\n [type]=\"'date'\" \n [(ngModel)]=\"date\"\n [disabled]=\"disabled\"\n (ngModelChange)=\"onChangeDate($event)\"\n >\n </div>\n</div>\n", styles: [".ac-input-base{display:flex;flex-direction:column;align-items:flex-start;width:100%;margin-top:2px;margin-bottom:2px}.ac-input-base .ac-input-base-comp.disabled{pointer-events:none;opacity:.9;background-color:color-mix(in srgb,var(--font-color, black) 8%,transparent)}.ac-input-base .ac-input-base-comp{position:relative;display:flex;align-items:center;width:100%;height:21px;transition:border-bottom-color .3s ease;border-radius:5px;border:1px solid rgb(191.25,191.25,191.25);box-sizing:border-box}.ac-input-base .ac-input-base-comp:focus-within{border-bottom:2px solid var(--primary-color, #0747a6)}.ac-input-base .ac-input-base-comp>input{width:100%;padding:2px 5px;background:none;outline:none;position:relative;color:var(--font-color, black);font-size:14px;border:none}.ac-label{width:100%;line-height:normal;font-weight:400;font-size:14px;padding-bottom:2px;height:auto;color:var(--font-color, black)}\n"] }]
|
|
422
449
|
}], ctorParameters: () => [] });
|
|
@@ -425,10 +452,23 @@ class AcInputTime extends AcInputDateTimeDefault {
|
|
|
425
452
|
constructor() {
|
|
426
453
|
super();
|
|
427
454
|
}
|
|
428
|
-
|
|
429
|
-
|
|
455
|
+
applyMask() {
|
|
456
|
+
if (this.model) {
|
|
457
|
+
if (typeof this.model === 'string' && /^\d{2}:\d{2}(:\d{2})?$/.test(this.model)) {
|
|
458
|
+
this.date = '';
|
|
459
|
+
this.time = this.model;
|
|
460
|
+
}
|
|
461
|
+
else {
|
|
462
|
+
const dateObj = new Date(this.model);
|
|
463
|
+
this.date = this.formatDate(dateObj);
|
|
464
|
+
this.time = this.formatTime(dateObj);
|
|
465
|
+
}
|
|
466
|
+
}
|
|
467
|
+
}
|
|
468
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcInputTime, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
469
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: AcInputTime, isStandalone: true, selector: "ac-input-time", usesInheritance: true, ngImport: i0, template: "<div class=\"ac-input-base\">\n <label class=\"ac-label\" *ngIf=\"buildTitleSpace || title\">{{title}}</label>\n <div class=\"ac-input-base-comp\" [ngClass]=\"{ 'disabled': disabled }\">\n <input\n [type]=\"'time'\" \n [(ngModel)]=\"time\"\n [disabled]=\"disabled\"\n (ngModelChange)=\"onChangeTime($event)\"\n >\n </div>\n</div>\n", styles: [".ac-input-base{display:flex;flex-direction:column;align-items:flex-start;width:100%;margin-top:2px;margin-bottom:2px}.ac-input-base .ac-input-base-comp.disabled{pointer-events:none;opacity:.9;background-color:color-mix(in srgb,var(--font-color, black) 8%,transparent)}.ac-input-base .ac-input-base-comp{position:relative;display:flex;align-items:center;width:100%;height:21px;transition:border-bottom-color .3s ease;border-radius:5px;border:1px solid rgb(191.25,191.25,191.25);box-sizing:border-box}.ac-input-base .ac-input-base-comp:focus-within{border-bottom:2px solid var(--primary-color, #0747a6)}.ac-input-base .ac-input-base-comp>input{width:100%;padding:2px 5px;background:none;outline:none;position:relative;color:var(--font-color, black);font-size:14px;border:none}.ac-label{width:100%;line-height:normal;font-weight:400;font-size:14px;padding-bottom:2px;height:auto;color:var(--font-color, black)}\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
430
470
|
}
|
|
431
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
471
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcInputTime, decorators: [{
|
|
432
472
|
type: Component,
|
|
433
473
|
args: [{ selector: 'ac-input-time', imports: [FormsModule, CommonModule], template: "<div class=\"ac-input-base\">\n <label class=\"ac-label\" *ngIf=\"buildTitleSpace || title\">{{title}}</label>\n <div class=\"ac-input-base-comp\" [ngClass]=\"{ 'disabled': disabled }\">\n <input\n [type]=\"'time'\" \n [(ngModel)]=\"time\"\n [disabled]=\"disabled\"\n (ngModelChange)=\"onChangeTime($event)\"\n >\n </div>\n</div>\n", styles: [".ac-input-base{display:flex;flex-direction:column;align-items:flex-start;width:100%;margin-top:2px;margin-bottom:2px}.ac-input-base .ac-input-base-comp.disabled{pointer-events:none;opacity:.9;background-color:color-mix(in srgb,var(--font-color, black) 8%,transparent)}.ac-input-base .ac-input-base-comp{position:relative;display:flex;align-items:center;width:100%;height:21px;transition:border-bottom-color .3s ease;border-radius:5px;border:1px solid rgb(191.25,191.25,191.25);box-sizing:border-box}.ac-input-base .ac-input-base-comp:focus-within{border-bottom:2px solid var(--primary-color, #0747a6)}.ac-input-base .ac-input-base-comp>input{width:100%;padding:2px 5px;background:none;outline:none;position:relative;color:var(--font-color, black);font-size:14px;border:none}.ac-label{width:100%;line-height:normal;font-weight:400;font-size:14px;padding-bottom:2px;height:auto;color:var(--font-color, black)}\n"] }]
|
|
434
474
|
}], ctorParameters: () => [] });
|
|
@@ -477,10 +517,10 @@ class AcInputFile {
|
|
|
477
517
|
}
|
|
478
518
|
return (s4() + s4() + s4() + s4() + s4() + s4() + s4() + s4()).toUpperCase();
|
|
479
519
|
}
|
|
480
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
481
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.
|
|
520
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcInputFile, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
521
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: AcInputFile, isStandalone: true, selector: "ac-input-file", inputs: { model: "model", disabled: "disabled", title: "title", buildTitleSpace: "buildTitleSpace", accept: "accept", index: "index" }, outputs: { onSelectFile: "onSelectFile", onUnselectFile: "onUnselectFile" }, ngImport: i0, template: "<div class=\"ac-input-base ac-input-file\">\n <label class=\"ac-label\" *ngIf=\"buildTitleSpace || title\">{{title}}</label>\n <div class=\"ac-input-base-comp ac-input-file-comp\" [ngClass]=\"{ 'disabled': disabled }\">\n <input\n type=\"file\" \n (change)=\"onFileChange($event)\" \n [accept]=\"accept\"\n class=\"{{'hidden-input' + ' ' + fileInputId}}\"\n />\n <button type=\"button\" class=\"custom-file-button\" (click)=\"triggerFileInput()\">\n <mat-icon [fontIcon]=\"'attach_file'\"></mat-icon>\n </button>\n <span class=\"file-name\">{{ selectedFileName || 'Nenhum arquivo selecionado' }}</span>\n <mat-icon *ngIf=\"selectedFileName\" class=\"unselect-icon\" [fontIcon]=\"'close'\" (click)=\"removeFile()\"></mat-icon>\n </div>\n</div>", styles: [".ac-input-base{display:flex;flex-direction:column;align-items:flex-start;width:100%;margin-top:2px;margin-bottom:2px}.ac-input-base .ac-input-base-comp.disabled{pointer-events:none;opacity:.9;background-color:color-mix(in srgb,var(--font-color, black) 8%,transparent)}.ac-input-base .ac-input-base-comp{position:relative;display:flex;align-items:center;width:100%;height:21px;transition:border-bottom-color .3s ease;border-radius:5px;border:1px solid rgb(191.25,191.25,191.25);box-sizing:border-box}.ac-input-base .ac-input-base-comp:focus-within{border-bottom:2px solid var(--primary-color, #0747a6)}.ac-input-base .ac-input-base-comp>input{width:100%;padding:2px 5px;background:none;outline:none;position:relative;color:var(--font-color, black);font-size:14px;border:none}.ac-label{width:100%;line-height:normal;font-weight:400;font-size:14px;padding-bottom:2px;height:auto;color:var(--font-color, black)}.ac-input-file-comp .hidden-input{display:none}.ac-input-file-comp .custom-file-button{margin-left:-1px;height:21px;background-color:var(--secondary-color, #ff991f);color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .3s ease;display:flex;align-items:center}.ac-input-file-comp .custom-file-button:hover{filter:saturate(85%);cursor:pointer}.ac-input-file-comp .custom-file-button mat-icon{font-size:16px;color:#fff;display:flex;align-items:center;justify-content:center}.ac-input-file-comp .file-name{padding-left:5px;color:var(--font-color, black);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ac-input-file-comp .unselect-icon{margin-left:auto;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;color:var(--font-color, black)}.ac-input-file-comp .unselect-icon:hover{filter:saturate(85%)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
482
522
|
}
|
|
483
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
523
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcInputFile, decorators: [{
|
|
484
524
|
type: Component,
|
|
485
525
|
args: [{ selector: 'ac-input-file', imports: [FormsModule, CommonModule, MatIconModule], template: "<div class=\"ac-input-base ac-input-file\">\n <label class=\"ac-label\" *ngIf=\"buildTitleSpace || title\">{{title}}</label>\n <div class=\"ac-input-base-comp ac-input-file-comp\" [ngClass]=\"{ 'disabled': disabled }\">\n <input\n type=\"file\" \n (change)=\"onFileChange($event)\" \n [accept]=\"accept\"\n class=\"{{'hidden-input' + ' ' + fileInputId}}\"\n />\n <button type=\"button\" class=\"custom-file-button\" (click)=\"triggerFileInput()\">\n <mat-icon [fontIcon]=\"'attach_file'\"></mat-icon>\n </button>\n <span class=\"file-name\">{{ selectedFileName || 'Nenhum arquivo selecionado' }}</span>\n <mat-icon *ngIf=\"selectedFileName\" class=\"unselect-icon\" [fontIcon]=\"'close'\" (click)=\"removeFile()\"></mat-icon>\n </div>\n</div>", styles: [".ac-input-base{display:flex;flex-direction:column;align-items:flex-start;width:100%;margin-top:2px;margin-bottom:2px}.ac-input-base .ac-input-base-comp.disabled{pointer-events:none;opacity:.9;background-color:color-mix(in srgb,var(--font-color, black) 8%,transparent)}.ac-input-base .ac-input-base-comp{position:relative;display:flex;align-items:center;width:100%;height:21px;transition:border-bottom-color .3s ease;border-radius:5px;border:1px solid rgb(191.25,191.25,191.25);box-sizing:border-box}.ac-input-base .ac-input-base-comp:focus-within{border-bottom:2px solid var(--primary-color, #0747a6)}.ac-input-base .ac-input-base-comp>input{width:100%;padding:2px 5px;background:none;outline:none;position:relative;color:var(--font-color, black);font-size:14px;border:none}.ac-label{width:100%;line-height:normal;font-weight:400;font-size:14px;padding-bottom:2px;height:auto;color:var(--font-color, black)}.ac-input-file-comp .hidden-input{display:none}.ac-input-file-comp .custom-file-button{margin-left:-1px;height:21px;background-color:var(--secondary-color, #ff991f);color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .3s ease;display:flex;align-items:center}.ac-input-file-comp .custom-file-button:hover{filter:saturate(85%);cursor:pointer}.ac-input-file-comp .custom-file-button mat-icon{font-size:16px;color:#fff;display:flex;align-items:center;justify-content:center}.ac-input-file-comp .file-name{padding-left:5px;color:var(--font-color, black);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ac-input-file-comp .unselect-icon{margin-left:auto;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;color:var(--font-color, black)}.ac-input-file-comp .unselect-icon:hover{filter:saturate(85%)}\n"] }]
|
|
486
526
|
}], ctorParameters: () => [], propDecorators: { model: [{
|
|
@@ -501,6 +541,214 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
501
541
|
type: Output
|
|
502
542
|
}] } });
|
|
503
543
|
|
|
544
|
+
class AcInputPercentage extends AcInputMaskNumber {
|
|
545
|
+
decimalPlaces = 2;
|
|
546
|
+
isUserTyping = false;
|
|
547
|
+
rawValue = '';
|
|
548
|
+
numberInputSubject = new Subject();
|
|
549
|
+
applyMask(value) {
|
|
550
|
+
if (value === undefined || value === null)
|
|
551
|
+
return '';
|
|
552
|
+
let strValue = typeof value === 'number' ? value.toString() : value;
|
|
553
|
+
if (this.isUserTyping) {
|
|
554
|
+
let raw = this.rawValue.replace(/^0+/, '');
|
|
555
|
+
if (this.decimalPlaces > 0 && (raw.includes('.') || raw.includes(','))) {
|
|
556
|
+
let [int, dec = ''] = raw.split(/[.,]/);
|
|
557
|
+
dec = dec.slice(0, this.decimalPlaces);
|
|
558
|
+
while (dec.length < this.decimalPlaces)
|
|
559
|
+
dec += '0';
|
|
560
|
+
return int.replace(/^0+/, '') + '.' + dec;
|
|
561
|
+
}
|
|
562
|
+
return raw;
|
|
563
|
+
}
|
|
564
|
+
let num = parseFloat(strValue);
|
|
565
|
+
if (isNaN(num))
|
|
566
|
+
return '';
|
|
567
|
+
return (num * 100).toFixed(this.decimalPlaces) + ' %';
|
|
568
|
+
}
|
|
569
|
+
onChange(value) {
|
|
570
|
+
this.isUserTyping = true;
|
|
571
|
+
setTimeout(() => {
|
|
572
|
+
let cleaned = value.replace(/[^0-9.,]/g, '').replace(',', '.');
|
|
573
|
+
cleaned = this.sanitizeDecimal(cleaned);
|
|
574
|
+
this.rawValue = cleaned;
|
|
575
|
+
this.formattedValue = cleaned;
|
|
576
|
+
if (cleaned === '') {
|
|
577
|
+
this.rawValue = '0';
|
|
578
|
+
this.formattedValue = '0';
|
|
579
|
+
this.emitValue('0');
|
|
580
|
+
return;
|
|
581
|
+
}
|
|
582
|
+
this.emitValue(cleaned);
|
|
583
|
+
});
|
|
584
|
+
}
|
|
585
|
+
emitValue(cleaned) {
|
|
586
|
+
if (!cleaned) {
|
|
587
|
+
this.numberInputSubject.next(0);
|
|
588
|
+
return;
|
|
589
|
+
}
|
|
590
|
+
cleaned = this.sanitizeDecimal(cleaned);
|
|
591
|
+
let num = parseFloat(cleaned);
|
|
592
|
+
if (isNaN(num)) {
|
|
593
|
+
this.numberInputSubject.next(0);
|
|
594
|
+
return;
|
|
595
|
+
}
|
|
596
|
+
let decimalValue;
|
|
597
|
+
if (num >= 1) {
|
|
598
|
+
decimalValue = num / 100;
|
|
599
|
+
}
|
|
600
|
+
else {
|
|
601
|
+
const decimalStr = cleaned.split('.')[1] || '';
|
|
602
|
+
decimalValue = num / Math.pow(10, decimalStr.length);
|
|
603
|
+
}
|
|
604
|
+
this.numberInputSubject.next(decimalValue);
|
|
605
|
+
}
|
|
606
|
+
onBlur() {
|
|
607
|
+
this.isUserTyping = false;
|
|
608
|
+
if (this.rawValue) {
|
|
609
|
+
const num = parseFloat(this.rawValue);
|
|
610
|
+
if (!isNaN(num)) {
|
|
611
|
+
this.formattedValue = num.toFixed(this.decimalPlaces) + ' %';
|
|
612
|
+
this.emitValue(this.rawValue);
|
|
613
|
+
}
|
|
614
|
+
}
|
|
615
|
+
}
|
|
616
|
+
onFocus() {
|
|
617
|
+
if (this.formattedValue) {
|
|
618
|
+
const valueWithoutPercent = this.formattedValue.replace('%', '');
|
|
619
|
+
this.rawValue = valueWithoutPercent;
|
|
620
|
+
this.formattedValue = valueWithoutPercent;
|
|
621
|
+
}
|
|
622
|
+
}
|
|
623
|
+
ngOnInit() {
|
|
624
|
+
if (this.model) {
|
|
625
|
+
this.formattedValue = this.applyMask(this.model);
|
|
626
|
+
}
|
|
627
|
+
this.numberInputSubject.pipe(debounceTime(this.debounce)).subscribe((value) => {
|
|
628
|
+
this.modelChange.emit(value);
|
|
629
|
+
if (this.onChangeModel) {
|
|
630
|
+
this.onChangeModel(value);
|
|
631
|
+
}
|
|
632
|
+
});
|
|
633
|
+
}
|
|
634
|
+
sanitizeDecimal(value) {
|
|
635
|
+
const firstDot = value.indexOf('.');
|
|
636
|
+
if (firstDot !== -1) {
|
|
637
|
+
return value.substring(0, firstDot + 1) + value.substring(firstDot + 1).replace(/\./g, '');
|
|
638
|
+
}
|
|
639
|
+
return value;
|
|
640
|
+
}
|
|
641
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcInputPercentage, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
642
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: AcInputPercentage, isStandalone: true, selector: "ac-input-percentage", inputs: { decimalPlaces: "decimalPlaces" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ac-input-base\">\n <label class=\"ac-label\" *ngIf=\"buildTitleSpace || title\">{{title}}</label>\n <div class=\"ac-input-base-comp\" [ngClass]=\"{ 'disabled': disabled }\">\n <input\n type=\"text\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [(ngModel)]=\"formattedValue\"\n (ngModelChange)=\"onChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n />\n </div>\n</div>\n", styles: [".ac-input-base{display:flex;flex-direction:column;align-items:flex-start;width:100%;margin-top:2px;margin-bottom:2px}.ac-input-base .ac-input-base-comp.disabled{pointer-events:none;opacity:.9;background-color:color-mix(in srgb,var(--font-color, black) 8%,transparent)}.ac-input-base .ac-input-base-comp{position:relative;display:flex;align-items:center;width:100%;height:21px;transition:border-bottom-color .3s ease;border-radius:5px;border:1px solid rgb(191.25,191.25,191.25);box-sizing:border-box}.ac-input-base .ac-input-base-comp:focus-within{border-bottom:2px solid var(--primary-color, #0747a6)}.ac-input-base .ac-input-base-comp>input{width:100%;padding:2px 5px;background:none;outline:none;position:relative;color:var(--font-color, black);font-size:14px;border:none}.ac-label{width:100%;line-height:normal;font-weight:400;font-size:14px;padding-bottom:2px;height:auto;color:var(--font-color, black)}:host input[type=text]{text-align:right}\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
643
|
+
}
|
|
644
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcInputPercentage, decorators: [{
|
|
645
|
+
type: Component,
|
|
646
|
+
args: [{ selector: 'ac-input-percentage', imports: [FormsModule, CommonModule], template: "<div class=\"ac-input-base\">\n <label class=\"ac-label\" *ngIf=\"buildTitleSpace || title\">{{title}}</label>\n <div class=\"ac-input-base-comp\" [ngClass]=\"{ 'disabled': disabled }\">\n <input\n type=\"text\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [(ngModel)]=\"formattedValue\"\n (ngModelChange)=\"onChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n />\n </div>\n</div>\n", styles: [".ac-input-base{display:flex;flex-direction:column;align-items:flex-start;width:100%;margin-top:2px;margin-bottom:2px}.ac-input-base .ac-input-base-comp.disabled{pointer-events:none;opacity:.9;background-color:color-mix(in srgb,var(--font-color, black) 8%,transparent)}.ac-input-base .ac-input-base-comp{position:relative;display:flex;align-items:center;width:100%;height:21px;transition:border-bottom-color .3s ease;border-radius:5px;border:1px solid rgb(191.25,191.25,191.25);box-sizing:border-box}.ac-input-base .ac-input-base-comp:focus-within{border-bottom:2px solid var(--primary-color, #0747a6)}.ac-input-base .ac-input-base-comp>input{width:100%;padding:2px 5px;background:none;outline:none;position:relative;color:var(--font-color, black);font-size:14px;border:none}.ac-label{width:100%;line-height:normal;font-weight:400;font-size:14px;padding-bottom:2px;height:auto;color:var(--font-color, black)}:host input[type=text]{text-align:right}\n"] }]
|
|
647
|
+
}], propDecorators: { decimalPlaces: [{
|
|
648
|
+
type: Input
|
|
649
|
+
}] } });
|
|
650
|
+
|
|
651
|
+
class AcInputNumber extends AcInputMaskNumber {
|
|
652
|
+
decimalPlaces = 0;
|
|
653
|
+
numberModelChange = new EventEmitter();
|
|
654
|
+
numberInputSubject = new Subject();
|
|
655
|
+
applyMask(value, limitLength = false) {
|
|
656
|
+
if (value === undefined || value === null)
|
|
657
|
+
return '';
|
|
658
|
+
let strValue = typeof value === 'number' ? value.toString() : value;
|
|
659
|
+
if (typeof value === 'number') {
|
|
660
|
+
strValue = strValue.replace('.', ',');
|
|
661
|
+
}
|
|
662
|
+
strValue = strValue.replace(/[^0-9.,]/g, '');
|
|
663
|
+
if (strValue === '')
|
|
664
|
+
return '0';
|
|
665
|
+
let int = strValue;
|
|
666
|
+
let dec = '';
|
|
667
|
+
let sepIndex = Math.max(strValue.indexOf(','), strValue.indexOf('.'));
|
|
668
|
+
if (sepIndex !== -1) {
|
|
669
|
+
int = strValue.substring(0, sepIndex);
|
|
670
|
+
dec = strValue.substring(sepIndex + 1).replace(/[,\.]/g, '');
|
|
671
|
+
}
|
|
672
|
+
if (this.decimalPlaces > 0) {
|
|
673
|
+
if (int === '')
|
|
674
|
+
return '';
|
|
675
|
+
dec = dec.slice(0, this.decimalPlaces);
|
|
676
|
+
let formatted = int;
|
|
677
|
+
if (sepIndex !== -1 || limitLength) {
|
|
678
|
+
formatted += ',' + dec;
|
|
679
|
+
}
|
|
680
|
+
return formatted;
|
|
681
|
+
}
|
|
682
|
+
else {
|
|
683
|
+
return int.replace(/^0+/, '') || '0';
|
|
684
|
+
}
|
|
685
|
+
}
|
|
686
|
+
onChange(value) {
|
|
687
|
+
setTimeout(() => {
|
|
688
|
+
this.formattedValue = this.applyMask(value, true);
|
|
689
|
+
this.emitValue(this.formattedValue);
|
|
690
|
+
});
|
|
691
|
+
}
|
|
692
|
+
emitValue(formattedValue) {
|
|
693
|
+
if (!formattedValue) {
|
|
694
|
+
this.numberInputSubject.next(0);
|
|
695
|
+
return;
|
|
696
|
+
}
|
|
697
|
+
const numericValue = this.convertToNumber(formattedValue);
|
|
698
|
+
this.numberInputSubject.next(numericValue);
|
|
699
|
+
}
|
|
700
|
+
formatDecimal() {
|
|
701
|
+
if (this.formattedValue === undefined || this.formattedValue === null || this.formattedValue === '') {
|
|
702
|
+
this.emitValue('0');
|
|
703
|
+
return;
|
|
704
|
+
}
|
|
705
|
+
let value = this.formattedValue.replace(/[^0-9.,]/g, '');
|
|
706
|
+
let [int, dec = ''] = value.split(/[,\.]/);
|
|
707
|
+
if (this.decimalPlaces > 0) {
|
|
708
|
+
dec = dec.slice(0, this.decimalPlaces);
|
|
709
|
+
while (dec.length < this.decimalPlaces)
|
|
710
|
+
dec += '0';
|
|
711
|
+
let formatted = int + ',' + dec;
|
|
712
|
+
if (int === '')
|
|
713
|
+
formatted = '0,00';
|
|
714
|
+
this.formattedValue = formatted;
|
|
715
|
+
}
|
|
716
|
+
else {
|
|
717
|
+
this.formattedValue = int.replace(/^0+/, '') || '0';
|
|
718
|
+
}
|
|
719
|
+
this.emitValue(this.formattedValue);
|
|
720
|
+
}
|
|
721
|
+
convertToNumber(formattedValue) {
|
|
722
|
+
if (!formattedValue)
|
|
723
|
+
return 0;
|
|
724
|
+
const cleaned = formattedValue.replace(/[^0-9,]/g, '');
|
|
725
|
+
const numericString = cleaned.replace(',', '.');
|
|
726
|
+
const num = parseFloat(numericString);
|
|
727
|
+
return isNaN(num) ? 0 : num;
|
|
728
|
+
}
|
|
729
|
+
ngOnInit() {
|
|
730
|
+
if (this.model) {
|
|
731
|
+
this.formattedValue = this.applyMask(this.model, false);
|
|
732
|
+
}
|
|
733
|
+
this.numberInputSubject.pipe(debounceTime(this.debounce)).subscribe((value) => {
|
|
734
|
+
this.modelChange.emit(value);
|
|
735
|
+
if (this.onChangeModel) {
|
|
736
|
+
this.onChangeModel(value);
|
|
737
|
+
}
|
|
738
|
+
});
|
|
739
|
+
}
|
|
740
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcInputNumber, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
741
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: AcInputNumber, isStandalone: true, selector: "ac-input-number", inputs: { decimalPlaces: "decimalPlaces" }, outputs: { numberModelChange: "numberModelChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ac-input-base\">\n <label class=\"ac-label\" *ngIf=\"buildTitleSpace || title\">{{title}}</label>\n <div class=\"ac-input-base-comp\" [ngClass]=\"{ 'disabled': disabled }\">\n <input\n type=\"text\"\n [(ngModel)]=\"formattedValue\"\n [disabled]=\"disabled\"\n (ngModelChange)=\"onChange($event)\"\n (blur)=\"formatDecimal()\"\n [placeholder]=\"placeholder\"\n class=\"ac-input-number\"\n autocomplete=\"off\"\n inputmode=\"decimal\"\n pattern=\"[0-9]*\"\n />\n </div>\n</div>\n", styles: [".ac-input-base{display:flex;flex-direction:column;align-items:flex-start;width:100%;margin-top:2px;margin-bottom:2px}.ac-input-base .ac-input-base-comp.disabled{pointer-events:none;opacity:.9;background-color:color-mix(in srgb,var(--font-color, black) 8%,transparent)}.ac-input-base .ac-input-base-comp{position:relative;display:flex;align-items:center;width:100%;height:21px;transition:border-bottom-color .3s ease;border-radius:5px;border:1px solid rgb(191.25,191.25,191.25);box-sizing:border-box}.ac-input-base .ac-input-base-comp:focus-within{border-bottom:2px solid var(--primary-color, #0747a6)}.ac-input-base .ac-input-base-comp>input{width:100%;padding:2px 5px;background:none;outline:none;position:relative;color:var(--font-color, black);font-size:14px;border:none}.ac-label{width:100%;line-height:normal;font-weight:400;font-size:14px;padding-bottom:2px;height:auto;color:var(--font-color, black)}:host input[type=text]{text-align:right}\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.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
742
|
+
}
|
|
743
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcInputNumber, decorators: [{
|
|
744
|
+
type: Component,
|
|
745
|
+
args: [{ selector: 'ac-input-number', imports: [FormsModule, CommonModule], template: "<div class=\"ac-input-base\">\n <label class=\"ac-label\" *ngIf=\"buildTitleSpace || title\">{{title}}</label>\n <div class=\"ac-input-base-comp\" [ngClass]=\"{ 'disabled': disabled }\">\n <input\n type=\"text\"\n [(ngModel)]=\"formattedValue\"\n [disabled]=\"disabled\"\n (ngModelChange)=\"onChange($event)\"\n (blur)=\"formatDecimal()\"\n [placeholder]=\"placeholder\"\n class=\"ac-input-number\"\n autocomplete=\"off\"\n inputmode=\"decimal\"\n pattern=\"[0-9]*\"\n />\n </div>\n</div>\n", styles: [".ac-input-base{display:flex;flex-direction:column;align-items:flex-start;width:100%;margin-top:2px;margin-bottom:2px}.ac-input-base .ac-input-base-comp.disabled{pointer-events:none;opacity:.9;background-color:color-mix(in srgb,var(--font-color, black) 8%,transparent)}.ac-input-base .ac-input-base-comp{position:relative;display:flex;align-items:center;width:100%;height:21px;transition:border-bottom-color .3s ease;border-radius:5px;border:1px solid rgb(191.25,191.25,191.25);box-sizing:border-box}.ac-input-base .ac-input-base-comp:focus-within{border-bottom:2px solid var(--primary-color, #0747a6)}.ac-input-base .ac-input-base-comp>input{width:100%;padding:2px 5px;background:none;outline:none;position:relative;color:var(--font-color, black);font-size:14px;border:none}.ac-label{width:100%;line-height:normal;font-weight:400;font-size:14px;padding-bottom:2px;height:auto;color:var(--font-color, black)}:host input[type=text]{text-align:right}\n"] }]
|
|
746
|
+
}], propDecorators: { decimalPlaces: [{
|
|
747
|
+
type: Input
|
|
748
|
+
}], numberModelChange: [{
|
|
749
|
+
type: Output
|
|
750
|
+
}] } });
|
|
751
|
+
|
|
504
752
|
class AcActionLink {
|
|
505
753
|
disabled = false;
|
|
506
754
|
title = '';
|
|
@@ -512,10 +760,10 @@ class AcActionLink {
|
|
|
512
760
|
this.onClick();
|
|
513
761
|
}
|
|
514
762
|
}
|
|
515
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
516
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.
|
|
763
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcActionLink, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
764
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: AcActionLink, isStandalone: true, selector: "ac-action-link", inputs: { disabled: "disabled", title: "title", onClick: "onClick" }, ngImport: i0, template: "<div class=\"ac-action-link\">\n <a class=\"ac-action-link-a\" (click)=\"actionClick()\" [class.disabled]=\"disabled\"> {{title}} </a>\n</div>", styles: [".ac-action-link .ac-action-link-a{color:#1976d2;cursor:pointer;text-decoration:underline;font-weight:500;transition:color .2s}.ac-action-link .ac-action-link-a.disabled{pointer-events:none;opacity:.8;cursor:not-allowed}.ac-action-link .ac-action-link-a:hover{color:#0d47a1}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }] });
|
|
517
765
|
}
|
|
518
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
766
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcActionLink, decorators: [{
|
|
519
767
|
type: Component,
|
|
520
768
|
args: [{ selector: 'ac-action-link', imports: [FormsModule, CommonModule], template: "<div class=\"ac-action-link\">\n <a class=\"ac-action-link-a\" (click)=\"actionClick()\" [class.disabled]=\"disabled\"> {{title}} </a>\n</div>", styles: [".ac-action-link .ac-action-link-a{color:#1976d2;cursor:pointer;text-decoration:underline;font-weight:500;transition:color .2s}.ac-action-link .ac-action-link-a.disabled{pointer-events:none;opacity:.8;cursor:not-allowed}.ac-action-link .ac-action-link-a:hover{color:#0d47a1}\n"] }]
|
|
521
769
|
}], ctorParameters: () => [], propDecorators: { disabled: [{
|
|
@@ -696,10 +944,10 @@ class AcSelect {
|
|
|
696
944
|
haveModel() {
|
|
697
945
|
return this.model !== undefined && this.model !== null;
|
|
698
946
|
}
|
|
699
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
700
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.
|
|
947
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcSelect, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
948
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: AcSelect, isStandalone: true, selector: "ac-select", inputs: { model: "model", index: "index", disabled: "disabled", title: "title", buildTitleSpace: "buildTitleSpace", debounce: "debounce", placeholder: "placeholder", labelName: "labelName", valueName: "valueName", options: "options", searchOptions: "searchOptions", onChangeModel: "onChangeModel" }, outputs: { modelChange: "modelChange" }, host: { listeners: { "focusout": "onFocusOut($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ac-select\">\n <label class=\"ac-label\" *ngIf=\"buildTitleSpace || title\" (click)=\"onBlur()\">{{title}}</label>\n <div class=\"ac-select-comp\" [ngClass]=\"{ 'disabled': disabled }\">\n <div class=\"ac-select-input\">\n <div\n class=\"ac-select-model-label\"\n (focus)=\"onFocus()\"\n [attr.tabindex]=\"disabled ? -1 : 0\">\n <label *ngIf=\"!haveModel()\" [attr.title]=\"placeholder || 'Selecione uma op\u00E7\u00E3o'\" class=\"placeholder\">{{ placeholder || 'Selecione uma op\u00E7\u00E3o' }}</label>\n <label *ngIf=\"haveModel()\" [attr.title]=\"getItemSelectedLabel()\">{{getItemSelectedLabel()}}</label>\n </div>\n\n <mat-icon *ngIf=\"haveModel()\" fontIcon=\"close\" class=\"show-hide error-color\" (click)=\"removeItem()\">\n close\n </mat-icon>\n </div>\n\n <div tabindex=\"-1\" *ngIf=\"showList\" class=\"ac-select-list\">\n <input \n id=\"input-search\" \n type=\"text\" \n [(ngModel)]=\"searchText\" \n (ngModelChange)=\"onChangeInputSearch($event)\" \n (keydown)=\"keydownList($event)\"> \n <mat-divider></mat-divider>\n <div \n *ngFor=\"let listItem of getListPreview(); let idx = index\"\n id=\"item-{{idx}}\"\n class=\"ac-select-list-item\"\n [ngClass]=\"{focused: hasFocus(idx)}\"\n (keydown)=\"keydownList($event)\"\n (click)=\"selectItem(idx)\"\n [attr.tabindex]=\"0\">\n <div>\n <label>{{listItem}}</label>\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [".ac-label{width:100%;line-height:normal;font-weight:400;font-size:14px;padding-bottom:2px;height:auto;color:var(--font-color, black)}.ac-select{display:flex;flex-direction:column;align-items:flex-start;width:100%;margin-top:2px;margin-bottom:2px}.ac-select .ac-select-comp.disabled{pointer-events:none;opacity:.9;background-color:color-mix(in srgb,var(--font-color, black) 8%,transparent)}.ac-select .ac-select-comp{position:relative;display:flex;align-items:center;width:100%;height:21px;transition:border-bottom-color .3s ease;border-radius:5px;border:1px solid rgb(191.25,191.25,191.25);box-sizing:border-box}.ac-select .ac-select-comp:focus-within{border-bottom:2px solid var(--primary-color, #0747a6)}.ac-select .ac-select-comp .ac-select-input{width:100%;height:100%;display:flex;align-items:center;justify-content:space-between;position:relative;color:var(--font-color, black);cursor:pointer;border:none}.ac-select .ac-select-comp .ac-select-input .ac-select-model-label{line-height:normal;font-weight:400;color:var(--font-color, black);cursor:pointer;border:none;display:flex;align-items:center;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:14px;padding-left:5px;box-sizing:border-box}.ac-select .ac-select-comp .ac-select-input .ac-select-model-label:focus{outline:none}.ac-select .ac-select-comp .ac-select-input .ac-select-model-label .placeholder{font-size:14px;font-weight:400;font-family:Arial,sans-serif;color:var(--placeholder-color, #75797e)}.ac-select .ac-select-comp .ac-select-list{position:absolute;top:100%;left:0;width:100%;background-color:var(--background-color, #fafafa);border:1px solid rgb(191.25,191.25,191.25);border-radius:5px;box-shadow:0 4px 6px #0000001a;z-index:10}.ac-select .ac-select-comp .ac-select-list .ac-select-list-item{border:none;outline:none;padding:2px;min-height:20px;color:var(--font-color, black)}.ac-select .ac-select-comp .ac-select-list .ac-select-list-item.focused,.ac-select .ac-select-comp .ac-select-list .ac-select-list-item:focus,.ac-select .ac-select-comp .ac-select-list .ac-select-list-item:hover{background:#0000001a}.ac-select .ac-select-comp .ac-select-list>input{width:calc(100% - 10px);padding:2px 5px;outline:none;position:relative;color:var(--font-color, black);background-color:var(--background-color, #fafafa);font-size:14px;border:none}\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] });
|
|
701
949
|
}
|
|
702
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
950
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcSelect, decorators: [{
|
|
703
951
|
type: Component,
|
|
704
952
|
args: [{ selector: 'ac-select', imports: [FormsModule, CommonModule, MatIconModule, MatDividerModule], template: "<div class=\"ac-select\">\n <label class=\"ac-label\" *ngIf=\"buildTitleSpace || title\" (click)=\"onBlur()\">{{title}}</label>\n <div class=\"ac-select-comp\" [ngClass]=\"{ 'disabled': disabled }\">\n <div class=\"ac-select-input\">\n <div\n class=\"ac-select-model-label\"\n (focus)=\"onFocus()\"\n [attr.tabindex]=\"disabled ? -1 : 0\">\n <label *ngIf=\"!haveModel()\" [attr.title]=\"placeholder || 'Selecione uma op\u00E7\u00E3o'\" class=\"placeholder\">{{ placeholder || 'Selecione uma op\u00E7\u00E3o' }}</label>\n <label *ngIf=\"haveModel()\" [attr.title]=\"getItemSelectedLabel()\">{{getItemSelectedLabel()}}</label>\n </div>\n\n <mat-icon *ngIf=\"haveModel()\" fontIcon=\"close\" class=\"show-hide error-color\" (click)=\"removeItem()\">\n close\n </mat-icon>\n </div>\n\n <div tabindex=\"-1\" *ngIf=\"showList\" class=\"ac-select-list\">\n <input \n id=\"input-search\" \n type=\"text\" \n [(ngModel)]=\"searchText\" \n (ngModelChange)=\"onChangeInputSearch($event)\" \n (keydown)=\"keydownList($event)\"> \n <mat-divider></mat-divider>\n <div \n *ngFor=\"let listItem of getListPreview(); let idx = index\"\n id=\"item-{{idx}}\"\n class=\"ac-select-list-item\"\n [ngClass]=\"{focused: hasFocus(idx)}\"\n (keydown)=\"keydownList($event)\"\n (click)=\"selectItem(idx)\"\n [attr.tabindex]=\"0\">\n <div>\n <label>{{listItem}}</label>\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [".ac-label{width:100%;line-height:normal;font-weight:400;font-size:14px;padding-bottom:2px;height:auto;color:var(--font-color, black)}.ac-select{display:flex;flex-direction:column;align-items:flex-start;width:100%;margin-top:2px;margin-bottom:2px}.ac-select .ac-select-comp.disabled{pointer-events:none;opacity:.9;background-color:color-mix(in srgb,var(--font-color, black) 8%,transparent)}.ac-select .ac-select-comp{position:relative;display:flex;align-items:center;width:100%;height:21px;transition:border-bottom-color .3s ease;border-radius:5px;border:1px solid rgb(191.25,191.25,191.25);box-sizing:border-box}.ac-select .ac-select-comp:focus-within{border-bottom:2px solid var(--primary-color, #0747a6)}.ac-select .ac-select-comp .ac-select-input{width:100%;height:100%;display:flex;align-items:center;justify-content:space-between;position:relative;color:var(--font-color, black);cursor:pointer;border:none}.ac-select .ac-select-comp .ac-select-input .ac-select-model-label{line-height:normal;font-weight:400;color:var(--font-color, black);cursor:pointer;border:none;display:flex;align-items:center;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:14px;padding-left:5px;box-sizing:border-box}.ac-select .ac-select-comp .ac-select-input .ac-select-model-label:focus{outline:none}.ac-select .ac-select-comp .ac-select-input .ac-select-model-label .placeholder{font-size:14px;font-weight:400;font-family:Arial,sans-serif;color:var(--placeholder-color, #75797e)}.ac-select .ac-select-comp .ac-select-list{position:absolute;top:100%;left:0;width:100%;background-color:var(--background-color, #fafafa);border:1px solid rgb(191.25,191.25,191.25);border-radius:5px;box-shadow:0 4px 6px #0000001a;z-index:10}.ac-select .ac-select-comp .ac-select-list .ac-select-list-item{border:none;outline:none;padding:2px;min-height:20px;color:var(--font-color, black)}.ac-select .ac-select-comp .ac-select-list .ac-select-list-item.focused,.ac-select .ac-select-comp .ac-select-list .ac-select-list-item:focus,.ac-select .ac-select-comp .ac-select-list .ac-select-list-item:hover{background:#0000001a}.ac-select .ac-select-comp .ac-select-list>input{width:calc(100% - 10px);padding:2px 5px;outline:none;position:relative;color:var(--font-color, black);background-color:var(--background-color, #fafafa);font-size:14px;border:none}\n"] }]
|
|
705
953
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { model: [{
|
|
@@ -777,10 +1025,10 @@ class AcPagination {
|
|
|
777
1025
|
this.pageChange.emit(this.currentPage);
|
|
778
1026
|
}
|
|
779
1027
|
}
|
|
780
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
781
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.
|
|
1028
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcPagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1029
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: AcPagination, isStandalone: true, selector: "ac-pagination", inputs: { totalItems: "totalItems", itemsPerPage: "itemsPerPage", currentPage: "currentPage" }, outputs: { pageChange: "pageChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ac-pagination\">\n <ac-button\n class=\"page-button-back-after\"\n [title]=\"'Anterior'\"\n [colorType]=\"'white'\"\n [disabled]=\"currentPage === 0\"\n (click)=\"goToPage(currentPage)\">\n </ac-button>\n\n <ac-button\n class=\"page-button\"\n [title]=\"'1'\"\n [colorType]=\"'white'\"\n [disabled]=\"currentPage === 0\"\n (click)=\"goToPage(1)\"\n *ngIf=\"currentPage !== 0 && !pages.includes(1)\">\n </ac-button>\n\n <ac-button\n class=\"page-button\"\n [title]=\"'...'\"\n [colorType]=\"'white'\"\n [disabled]=\"true\"\n *ngIf=\"currentPage !== 0 && !pages.includes(1)\">\n </ac-button>\n\n <ac-button\n *ngFor=\"let page of pages\"\n class=\"page-button\"\n [title]=\"page\"\n [colorType]=\"(page === currentPage + 1) ? 'secondary' : 'white'\"\n [class.active]=\"page === currentPage + 1\"\n (click)=\"goToPage(page)\">\n </ac-button>\n\n <ac-button\n class=\"page-button\"\n [title]=\"'...'\"\n [colorType]=\"'white'\"\n [disabled]=\"true\"\n *ngIf=\"currentPage + 1 !== totalPages && !pages.includes(totalPages) && totalPages !== 0\">\n </ac-button>\n\n <ac-button\n class=\"page-button\"\n [title]=\"totalPages\"\n [colorType]=\"'white'\"\n [disabled]=\"currentPage + 1 === totalPages\"\n (click)=\"goToPage(totalPages)\"\n *ngIf=\"currentPage + 1 !== totalPages && !pages.includes(totalPages) && totalPages !== 0\">\n </ac-button>\n\n <ac-button\n class=\"page-button-back-after\"\n [title]=\"'Pr\u00F3ximo'\"\n [colorType]=\"'white'\"\n [disabled]=\"totalPages === 0 || (currentPage + 1 === totalPages)\"\n (click)=\"goToPage(currentPage + 2)\">\n </ac-button>\n</div>", styles: [".ac-pagination{display:flex;justify-content:center;align-items:center;gap:5px;margin-top:20px}.ac-pagination .page-button-back-after{width:80px;height:24px}.ac-pagination .page-button{width:auto;height:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: AcButton, selector: "ac-button", inputs: ["disabled", "title", "colorType", "leftIcon", "rightIcon", "onClick"] }] });
|
|
782
1030
|
}
|
|
783
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
1031
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcPagination, decorators: [{
|
|
784
1032
|
type: Component,
|
|
785
1033
|
args: [{ selector: 'ac-pagination', imports: [CommonModule, MatIconModule, AcButton], template: "<div class=\"ac-pagination\">\n <ac-button\n class=\"page-button-back-after\"\n [title]=\"'Anterior'\"\n [colorType]=\"'white'\"\n [disabled]=\"currentPage === 0\"\n (click)=\"goToPage(currentPage)\">\n </ac-button>\n\n <ac-button\n class=\"page-button\"\n [title]=\"'1'\"\n [colorType]=\"'white'\"\n [disabled]=\"currentPage === 0\"\n (click)=\"goToPage(1)\"\n *ngIf=\"currentPage !== 0 && !pages.includes(1)\">\n </ac-button>\n\n <ac-button\n class=\"page-button\"\n [title]=\"'...'\"\n [colorType]=\"'white'\"\n [disabled]=\"true\"\n *ngIf=\"currentPage !== 0 && !pages.includes(1)\">\n </ac-button>\n\n <ac-button\n *ngFor=\"let page of pages\"\n class=\"page-button\"\n [title]=\"page\"\n [colorType]=\"(page === currentPage + 1) ? 'secondary' : 'white'\"\n [class.active]=\"page === currentPage + 1\"\n (click)=\"goToPage(page)\">\n </ac-button>\n\n <ac-button\n class=\"page-button\"\n [title]=\"'...'\"\n [colorType]=\"'white'\"\n [disabled]=\"true\"\n *ngIf=\"currentPage + 1 !== totalPages && !pages.includes(totalPages) && totalPages !== 0\">\n </ac-button>\n\n <ac-button\n class=\"page-button\"\n [title]=\"totalPages\"\n [colorType]=\"'white'\"\n [disabled]=\"currentPage + 1 === totalPages\"\n (click)=\"goToPage(totalPages)\"\n *ngIf=\"currentPage + 1 !== totalPages && !pages.includes(totalPages) && totalPages !== 0\">\n </ac-button>\n\n <ac-button\n class=\"page-button-back-after\"\n [title]=\"'Pr\u00F3ximo'\"\n [colorType]=\"'white'\"\n [disabled]=\"totalPages === 0 || (currentPage + 1 === totalPages)\"\n (click)=\"goToPage(currentPage + 2)\">\n </ac-button>\n</div>", styles: [".ac-pagination{display:flex;justify-content:center;align-items:center;gap:5px;margin-top:20px}.ac-pagination .page-button-back-after{width:80px;height:24px}.ac-pagination .page-button{width:auto;height:24px}\n"] }]
|
|
786
1034
|
}], ctorParameters: () => [], propDecorators: { totalItems: [{
|
|
@@ -853,10 +1101,10 @@ class AcProgressBar {
|
|
|
853
1101
|
return 'rgba(72, 255, 0, 0.5)';
|
|
854
1102
|
}
|
|
855
1103
|
}
|
|
856
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
857
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.
|
|
1104
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcProgressBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1105
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: AcProgressBar, isStandalone: true, selector: "ac-progress-bar", inputs: { color: "color", timer: "timer" }, ngImport: i0, template: "<div class=\"ac-progress-bar\" [ngStyle]=\"{'background-color': transparentColor}\">\n <div class=\"ac-progress-bar-progress\" [ngStyle]=\"{'width': getPercentage() + '%', 'background-color': color}\">\n </div>\n</div>", styles: [".ac-progress-bar{min-height:4px;border-radius:5px;position:relative}.ac-progress-bar .ac-progress-bar-progress{height:100%;border-radius:5px;position:absolute;top:0;left:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
858
1106
|
}
|
|
859
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
1107
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcProgressBar, decorators: [{
|
|
860
1108
|
type: Component,
|
|
861
1109
|
args: [{ selector: 'ac-progress-bar', imports: [CommonModule], template: "<div class=\"ac-progress-bar\" [ngStyle]=\"{'background-color': transparentColor}\">\n <div class=\"ac-progress-bar-progress\" [ngStyle]=\"{'width': getPercentage() + '%', 'background-color': color}\">\n </div>\n</div>", styles: [".ac-progress-bar{min-height:4px;border-radius:5px;position:relative}.ac-progress-bar .ac-progress-bar-progress{height:100%;border-radius:5px;position:absolute;top:0;left:0}\n"] }]
|
|
862
1110
|
}], propDecorators: { color: [{
|
|
@@ -904,12 +1152,12 @@ class AcNotification {
|
|
|
904
1152
|
return '';
|
|
905
1153
|
return value.charAt(0).toUpperCase() + value.slice(1);
|
|
906
1154
|
}
|
|
907
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
908
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.
|
|
1155
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcNotification, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1156
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: AcNotification, isStandalone: true, selector: "ac-notification", ngImport: i0, template: "<div class=\"ac-notification\">\n <div class=\"ac-notification-top-center\">\n <div *ngFor=\"let item of getNotifications('topCenter') | async\" \n class=\"ac-notification-notification {{item.type}} top\"\n [ngClass]=\"{'hide': !item.show}\">\n {{item.message}}\n <ac-progress-bar [timer]=\"item.timer!\"></ac-progress-bar>\n </div>\n </div>\n <div class=\"ac-notification-top-left\">\n <div *ngFor=\"let item of getNotifications('topLeft') | async\" \n class=\"ac-notification-notification {{item.type}} top\"\n [ngClass]=\"{'hide': !item.show}\">\n {{item.message}}\n <ac-progress-bar [timer]=\"item.timer!\"></ac-progress-bar>\n </div>\n </div>\n <div class=\"ac-notification-top-right\">\n <div *ngFor=\"let item of getNotifications('topRight') | async\" \n class=\"ac-notification-notification {{item.type}} top\"\n [ngClass]=\"{'hide': !item.show}\">\n {{item.message}}\n <ac-progress-bar [timer]=\"item.timer!\"></ac-progress-bar>\n </div>\n </div>\n <div class=\"ac-notification-bottom-center\">\n <div *ngFor=\"let item of getNotifications('bottomCenter') | async\" \n class=\"ac-notification-notification {{item.type}} bottom\"\n [ngClass]=\"{'hide': !item.show}\">\n {{item.message}}\n <ac-progress-bar [timer]=\"item.timer!\"></ac-progress-bar>\n </div>\n </div>\n <div class=\"ac-notification-bottom-left\">\n <div *ngFor=\"let item of getNotifications('bottomLeft') | async\" \n class=\"ac-notification-notification {{item.type}} bottom\"\n [ngClass]=\"{'hide': !item.show}\">\n {{item.message}}\n <ac-progress-bar [timer]=\"item.timer!\"></ac-progress-bar>\n </div>\n </div>\n <div class=\"ac-notification-bottom-right\">\n <div *ngFor=\"let item of getNotifications('bottomRight') | async\" \n class=\"ac-notification-notification {{item.type}} bottom\"\n [ngClass]=\"{'hide': !item.show}\">\n {{item.message}}\n <ac-progress-bar [timer]=\"item.timer!\"></ac-progress-bar>\n </div>\n </div>\n</div>", styles: [".ac-notification{pointer-events:none;position:fixed;height:calc(100% - 50px);width:calc(100% - 40px);margin-left:20px;margin-right:20px;display:flex;z-index:99999}.ac-notification .ac-notification-top-center{position:absolute;top:0;left:50%;transform:translate(-50%);width:100%;display:flex;flex-direction:column;align-items:center}.ac-notification .ac-notification-top-left{position:absolute;top:0;left:0;width:100%;display:flex;flex-direction:column;align-items:flex-start}.ac-notification .ac-notification-top-right{position:absolute;top:0;right:0;width:100%;display:flex;flex-direction:column;align-items:flex-end}.ac-notification .ac-notification-bottom-center{position:absolute;bottom:0;left:50%;transform:translate(-50%);width:100%;display:flex;flex-direction:column;align-items:center}.ac-notification .ac-notification-bottom-left{position:absolute;bottom:0;left:0;width:100%;display:flex;flex-direction:column;align-items:flex-start}.ac-notification .ac-notification-bottom-right{position:absolute;bottom:0;right:0;width:100%;display:flex;flex-direction:column;align-items:flex-end}.ac-notification .ac-notification-notification{pointer-events:all;background:#007bffd9;color:#fff;margin-top:10px;padding:7px 10px;border-radius:8px;box-shadow:0 4px 8px #0003;font-size:14px;font-weight:400;transition:transform .3s ease,opacity .3s ease}.ac-notification .ac-notification-notification.top{transform:translateY(0);opacity:1}.ac-notification .ac-notification-notification.top.hide{transform:translateY(-20px);opacity:0}.ac-notification .ac-notification-notification.bottom{transform:translateY(-20px);opacity:1}.ac-notification .ac-notification-notification.bottom.hide{transform:translateY(0);opacity:0}.ac-notification .ac-notification-notification.error{background:#ff0000d9}.ac-notification .ac-notification-notification.success{background:#009600d9}.ac-notification .ac-notification-notification.warning{background:#ff8c00d9}.ac-notification .ac-notification-notification.info{background:#007bffd9}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "component", type: AcProgressBar, selector: "ac-progress-bar", inputs: ["color", "timer"] }] });
|
|
909
1157
|
}
|
|
910
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
1158
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcNotification, decorators: [{
|
|
911
1159
|
type: Component,
|
|
912
|
-
args: [{ selector: 'ac-notification', imports: [CommonModule, AcProgressBar], template: "<div class=\"ac-notification\">\n <div class=\"ac-notification-top-center\">\n <div *ngFor=\"let item of getNotifications('topCenter') | async\" \n class=\"ac-notification-notification {{item.type}} top\"\n [ngClass]=\"{'hide': !item.show}\">\n {{item.message}}\n <ac-progress-bar [timer]=\"item.timer!\"></ac-progress-bar>\n </div>\n </div>\n <div class=\"ac-notification-top-left\">\n <div *ngFor=\"let item of getNotifications('topLeft') | async\" \n class=\"ac-notification-notification {{item.type}} top\"\n [ngClass]=\"{'hide': !item.show}\">\n {{item.message}}\n <ac-progress-bar [timer]=\"item.timer!\"></ac-progress-bar>\n </div>\n </div>\n <div class=\"ac-notification-top-right\">\n <div *ngFor=\"let item of getNotifications('topRight') | async\" \n class=\"ac-notification-notification {{item.type}} top\"\n [ngClass]=\"{'hide': !item.show}\">\n {{item.message}}\n <ac-progress-bar [timer]=\"item.timer!\"></ac-progress-bar>\n </div>\n </div>\n <div class=\"ac-notification-bottom-center\">\n <div *ngFor=\"let item of getNotifications('bottomCenter') | async\" \n class=\"ac-notification-notification {{item.type}} bottom\"\n [ngClass]=\"{'hide': !item.show}\">\n {{item.message}}\n <ac-progress-bar [timer]=\"item.timer!\"></ac-progress-bar>\n </div>\n </div>\n <div class=\"ac-notification-bottom-left\">\n <div *ngFor=\"let item of getNotifications('bottomLeft') | async\" \n class=\"ac-notification-notification {{item.type}} bottom\"\n [ngClass]=\"{'hide': !item.show}\">\n {{item.message}}\n <ac-progress-bar [timer]=\"item.timer!\"></ac-progress-bar>\n </div>\n </div>\n <div class=\"ac-notification-bottom-right\">\n <div *ngFor=\"let item of getNotifications('bottomRight') | async\" \n class=\"ac-notification-notification {{item.type}} bottom\"\n [ngClass]=\"{'hide': !item.show}\">\n {{item.message}}\n <ac-progress-bar [timer]=\"item.timer!\"></ac-progress-bar>\n </div>\n </div>\n</div>", styles: [".ac-notification{pointer-events:none;position:fixed;height:calc(100% - 50px);width:calc(100% - 40px);margin-left:20px;margin-right:20px;display:flex;z-index:
|
|
1160
|
+
args: [{ selector: 'ac-notification', imports: [CommonModule, AcProgressBar], template: "<div class=\"ac-notification\">\n <div class=\"ac-notification-top-center\">\n <div *ngFor=\"let item of getNotifications('topCenter') | async\" \n class=\"ac-notification-notification {{item.type}} top\"\n [ngClass]=\"{'hide': !item.show}\">\n {{item.message}}\n <ac-progress-bar [timer]=\"item.timer!\"></ac-progress-bar>\n </div>\n </div>\n <div class=\"ac-notification-top-left\">\n <div *ngFor=\"let item of getNotifications('topLeft') | async\" \n class=\"ac-notification-notification {{item.type}} top\"\n [ngClass]=\"{'hide': !item.show}\">\n {{item.message}}\n <ac-progress-bar [timer]=\"item.timer!\"></ac-progress-bar>\n </div>\n </div>\n <div class=\"ac-notification-top-right\">\n <div *ngFor=\"let item of getNotifications('topRight') | async\" \n class=\"ac-notification-notification {{item.type}} top\"\n [ngClass]=\"{'hide': !item.show}\">\n {{item.message}}\n <ac-progress-bar [timer]=\"item.timer!\"></ac-progress-bar>\n </div>\n </div>\n <div class=\"ac-notification-bottom-center\">\n <div *ngFor=\"let item of getNotifications('bottomCenter') | async\" \n class=\"ac-notification-notification {{item.type}} bottom\"\n [ngClass]=\"{'hide': !item.show}\">\n {{item.message}}\n <ac-progress-bar [timer]=\"item.timer!\"></ac-progress-bar>\n </div>\n </div>\n <div class=\"ac-notification-bottom-left\">\n <div *ngFor=\"let item of getNotifications('bottomLeft') | async\" \n class=\"ac-notification-notification {{item.type}} bottom\"\n [ngClass]=\"{'hide': !item.show}\">\n {{item.message}}\n <ac-progress-bar [timer]=\"item.timer!\"></ac-progress-bar>\n </div>\n </div>\n <div class=\"ac-notification-bottom-right\">\n <div *ngFor=\"let item of getNotifications('bottomRight') | async\" \n class=\"ac-notification-notification {{item.type}} bottom\"\n [ngClass]=\"{'hide': !item.show}\">\n {{item.message}}\n <ac-progress-bar [timer]=\"item.timer!\"></ac-progress-bar>\n </div>\n </div>\n</div>", styles: [".ac-notification{pointer-events:none;position:fixed;height:calc(100% - 50px);width:calc(100% - 40px);margin-left:20px;margin-right:20px;display:flex;z-index:99999}.ac-notification .ac-notification-top-center{position:absolute;top:0;left:50%;transform:translate(-50%);width:100%;display:flex;flex-direction:column;align-items:center}.ac-notification .ac-notification-top-left{position:absolute;top:0;left:0;width:100%;display:flex;flex-direction:column;align-items:flex-start}.ac-notification .ac-notification-top-right{position:absolute;top:0;right:0;width:100%;display:flex;flex-direction:column;align-items:flex-end}.ac-notification .ac-notification-bottom-center{position:absolute;bottom:0;left:50%;transform:translate(-50%);width:100%;display:flex;flex-direction:column;align-items:center}.ac-notification .ac-notification-bottom-left{position:absolute;bottom:0;left:0;width:100%;display:flex;flex-direction:column;align-items:flex-start}.ac-notification .ac-notification-bottom-right{position:absolute;bottom:0;right:0;width:100%;display:flex;flex-direction:column;align-items:flex-end}.ac-notification .ac-notification-notification{pointer-events:all;background:#007bffd9;color:#fff;margin-top:10px;padding:7px 10px;border-radius:8px;box-shadow:0 4px 8px #0003;font-size:14px;font-weight:400;transition:transform .3s ease,opacity .3s ease}.ac-notification .ac-notification-notification.top{transform:translateY(0);opacity:1}.ac-notification .ac-notification-notification.top.hide{transform:translateY(-20px);opacity:0}.ac-notification .ac-notification-notification.bottom{transform:translateY(-20px);opacity:1}.ac-notification .ac-notification-notification.bottom.hide{transform:translateY(0);opacity:0}.ac-notification .ac-notification-notification.error{background:#ff0000d9}.ac-notification .ac-notification-notification.success{background:#009600d9}.ac-notification .ac-notification-notification.warning{background:#ff8c00d9}.ac-notification .ac-notification-notification.info{background:#007bffd9}\n"] }]
|
|
913
1161
|
}] });
|
|
914
1162
|
|
|
915
1163
|
class AcCheckBox {
|
|
@@ -928,10 +1176,10 @@ class AcCheckBox {
|
|
|
928
1176
|
this.onToggle();
|
|
929
1177
|
}
|
|
930
1178
|
}
|
|
931
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
932
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.
|
|
1179
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcCheckBox, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1180
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: AcCheckBox, isStandalone: true, selector: "ac-checkbox", inputs: { model: "model", disabled: "disabled", title: "title", buildTitleSpace: "buildTitleSpace", titleColor: "titleColor", onToggle: "onToggle" }, outputs: { modelChange: "modelChange" }, ngImport: i0, template: "<div class=\"ac-checkbox\" [ngStyle]=\"{'--title-color': titleColor}\">\n <label class=\"ac-label\" *ngIf=\"buildTitleSpace || title\">{{title}}</label>\n <input\n class=\"ac-checkbox-input\" \n type=\"checkbox\" \n [checked]=\"model\"\n [(ngModel)]=\"model\"\n [disabled]=\"disabled\"\n (change)=\"onChange()\"\n >\n</div>\n", styles: [".ac-label{width:100%;line-height:normal;font-weight:400;font-size:14px;padding-bottom:2px;height:auto;color:var(--font-color, black)}.ac-checkbox{display:flex;flex-direction:column;align-items:flex-start}.ac-checkbox .ac-checkbox-input{width:15px;height:15px;background-color:var(--switch-bg-color)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
933
1181
|
}
|
|
934
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
1182
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcCheckBox, decorators: [{
|
|
935
1183
|
type: Component,
|
|
936
1184
|
args: [{ selector: 'ac-checkbox', imports: [FormsModule, CommonModule], template: "<div class=\"ac-checkbox\" [ngStyle]=\"{'--title-color': titleColor}\">\n <label class=\"ac-label\" *ngIf=\"buildTitleSpace || title\">{{title}}</label>\n <input\n class=\"ac-checkbox-input\" \n type=\"checkbox\" \n [checked]=\"model\"\n [(ngModel)]=\"model\"\n [disabled]=\"disabled\"\n (change)=\"onChange()\"\n >\n</div>\n", styles: [".ac-label{width:100%;line-height:normal;font-weight:400;font-size:14px;padding-bottom:2px;height:auto;color:var(--font-color, black)}.ac-checkbox{display:flex;flex-direction:column;align-items:flex-start}.ac-checkbox .ac-checkbox-input{width:15px;height:15px;background-color:var(--switch-bg-color)}\n"] }]
|
|
937
1185
|
}], ctorParameters: () => [], propDecorators: { model: [{
|
|
@@ -1058,10 +1306,10 @@ class AcSideMenu {
|
|
|
1058
1306
|
this.previewIdx = -1;
|
|
1059
1307
|
this.moduleClicked = 0;
|
|
1060
1308
|
}
|
|
1061
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
1062
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.
|
|
1309
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcSideMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1310
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: AcSideMenu, isStandalone: true, selector: "ac-side-menu", inputs: { routes: "routes", goTo: "goTo", forcedShowModules: "forcedShowModules" }, ngImport: i0, template: "<div class=\"ac-side-menu\">\n <div class=\"ac-side-menu-body\" [ngStyle]=\"{'position': forcedShowModules ? 'relative' : 'fixed'}\">\n <div \n *ngFor=\"let module of modules; let idx = index\"\n class=\"ac-side-menu-module\" \n [ngClass]=\"{'top-module': idx == 0, 'module-active': idx != 0 && moduleClicked == idx}\"\n [attr.gap]=\"(showModules || forcedShowModules) ? '': '0'\"\n (click)=\"onModule(idx)\"\n (mouseenter)=\"mouseInSomeModule(idx)\"> \n <mat-icon class=\"ac-side-menu-icon\" *ngIf=\"module.icon\" [fontIcon]=\"module.icon\"></mat-icon>\n <label class=\"ac-side-menu-module-label\" [attr.hide]=\"!showModules && !forcedShowModules\">{{module.title}}</label>\n\n <div\n class=\"ac-side-menu-submodules\"\n *ngIf=\"showModulesNumber && idx != 0\"\n [attr.hide]=\"idx != previewIdx\" >\n <div\n *ngFor=\"let subModule of module.modules; let subIdx = index\" \n class=\"ac-side-menu-submodule\"\n (click)=\"onSubModule(subModule);\">\n <mat-icon class=\"ac-side-menu-icon\" *ngIf=\"subModule.icon\" [fontIcon]=\"subModule.icon\"></mat-icon>\n <label class=\"ac-side-menu-submodule-label\">{{subModule.title}}</label>\n </div>\n </div>\n </div>\n </div>\n</div>", styles: [".ac-side-menu{height:100%;background:linear-gradient(to bottom,var(--primary-color, #0747a6),var(--primary-color-dark, #052658));min-width:38px}.ac-side-menu .ac-side-menu-body{height:100%;color:#fff;background:linear-gradient(to bottom,var(--primary-color, #0747a6),var(--primary-color-dark, #052658));padding:5px;z-index:2}.ac-side-menu .ac-side-menu-body .ac-side-menu-module{display:flex;align-items:center;flex-flow:row;padding-left:2px;padding-right:2px;position:relative;outline:none}.ac-side-menu .ac-side-menu-body .ac-side-menu-module.top-module{background-color:var(--secondary-color, #ff991f);border-radius:5px}.ac-side-menu .ac-side-menu-body .ac-side-menu-module.module-active{color:var(--secondary-color, #ff991f)}.ac-side-menu .ac-side-menu-body .ac-side-menu-module:hover:not(.top-module){color:var(--secondary-color, #ff991f)}.ac-side-menu .ac-side-menu-body .ac-side-menu-module .ac-side-menu-module-label{overflow:hidden;white-space:nowrap;transition:opacity .3s ease-in-out,transform .3s ease-in-out,visibility .3s ease-in-out}.ac-side-menu .ac-side-menu-body .ac-side-menu-module .ac-side-menu-module-label[hide=true]{opacity:0;transform:scale(.9);visibility:hidden;width:0}.ac-side-menu .ac-side-menu-body .ac-side-menu-module .ac-side-menu-module-label[hide=false]{opacity:1;transform:scale(1);visibility:visible}.ac-side-menu .ac-side-menu-body .ac-side-menu-module .ac-side-menu-submodules{padding:3px 5px;border-radius:0 5px 5px 0;color:#fff;background:linear-gradient(to bottom,var(--primary-color, #0747a6),var(--primary-color-dark, #052658));max-width:none;z-index:3;position:absolute;top:0;right:-4.75px;transform:translate(100%);transition:padding .3s allow-discrete,width .3s allow-discrete}.ac-side-menu .ac-side-menu-body .ac-side-menu-module .ac-side-menu-submodules[hide=true]{padding:3px 0;width:0}.ac-side-menu .ac-side-menu-body .ac-side-menu-module .ac-side-menu-submodules .ac-side-menu-submodule{display:flex;align-items:center;flex-flow:row;overflow:hidden;width:auto}.ac-side-menu .ac-side-menu-body .ac-side-menu-module .ac-side-menu-submodules .ac-side-menu-submodule .ac-side-menu-submodule-label{overflow:hidden;white-space:nowrap;display:block;width:auto}.ac-side-menu .ac-side-menu-body .ac-side-menu-module .ac-side-menu-submodules .ac-side-menu-submodule:hover{color:var(--secondary-color, #ff991f)}.ac-side-menu .ac-side-menu-body .ac-side-menu-icon{font-size:20px;display:flex;align-items:center;justify-content:center;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
1063
1311
|
}
|
|
1064
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
1312
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcSideMenu, decorators: [{
|
|
1065
1313
|
type: Component,
|
|
1066
1314
|
args: [{ selector: 'ac-side-menu', standalone: true, imports: [
|
|
1067
1315
|
CommonModule,
|
|
@@ -1099,12 +1347,12 @@ class AcList {
|
|
|
1099
1347
|
}
|
|
1100
1348
|
return 'NONE';
|
|
1101
1349
|
}
|
|
1102
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
1103
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.
|
|
1350
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcList, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1351
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: AcList, isStandalone: true, selector: "ac-list", inputs: { columns: "columns", list: "list", rowTemplate: "rowTemplate", sortColumn: "sortColumn", sortDirection: "sortDirection" }, providers: [], usesOnChanges: true, ngImport: i0, template: "<div class=\"ac-list\">\n <table class=\"ac-list-table\">\n <thead class=\"ac-list-table-thead\">\n <tr class=\"ac-list-table-thead-tr\">\n <!-- <th *ngIf=\"selectMode != ''\" [width]=\"1\">\n <ac-checkbox \n *ngIf=\"selectMode == 'CHECKBOX'\"\n [(model)]=\"globalCheckbox!\"\n [onToggle]=\"selectAll\">\n </ac-checkbox>\n </th> -->\n <th class=\"ac-list-table-thead-tr-th\" \n attr.style=\"width:{{column.size}}px;\" \n *ngFor=\"let column of columns; let idx = index\"> \n <div class=\"ac-list-column-header\" \n *ngIf=\"!column.hide\">\n <div>\n {{column.label}}\n </div>\n <div *ngIf=\"column.sortable\">\n <mat-icon [fontIcon]=\"direction[getSortDirection(idx)]!.icon\"\n (click)=\"onSortDirection(idx)\"\n class=\"sort-icon\">\n </mat-icon>\n </div>\n </div>\n </th>\n </tr>\n </thead>\n <tbody class=\"ac-list-table-tbody\">\n <tr class=\"ac-list-table-tbody-tr\"\n *ngFor=\"let row of list; let idxRow = index;\"\n tabindex=\"0\"> \n <!-- <td *ngIf=\"selectMode != ''\">\n <ac-checkbox \n *ngIf=\"selectMode == 'CHECKBOX'\"\n [disabled]=\"disabled\"\n [(model)]=\"selectedValues[getRowId(idxRow)]!\"\n [onToggle]=\"onSelectedRow\">\n </ac-checkbox>\n </td> -->\n <td class=\"ac-list-table-tbody-tr-td\" \n *ngFor=\"let column of columns; let idxCol = index\"> \n <div class=\"ac-list-column-body\" \n *ngIf=\"!column.hide\" attr.style=\"width:{{column.size}}px;\">\n <div *ngIf=\"!rowTemplate\">\n {{row[column.param]}}\n </div>\n <ng-template *ngIf=\"rowTemplate\"\n [ngTemplateOutlet]=\"rowTemplate\"\n [ngTemplateOutletContext]=\"{\n row: row, \n idxRow: idxRow, \n column: column.param, \n idxCol: idxCol\n }\">\n </ng-template>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n</div>", styles: [".ac-list{max-height:100%;overflow:auto}.ac-list .ac-list-table{max-height:100%;width:100%;border-collapse:separate;border-spacing:0;overflow:visible}.ac-list .ac-list-table .ac-list-table-thead .ac-list-table-thead-tr{background-color:var(--primary-color, #0747a6)}.ac-list .ac-list-table .ac-list-table-thead .ac-list-table-thead-tr .ac-list-table-thead-tr-th{font-weight:500;font-size:14px;color:#fff;padding-left:5px}.ac-list .ac-list-table .ac-list-table-thead .ac-list-table-thead-tr .ac-list-table-thead-tr-th:first-child{border-top-left-radius:5px;border-bottom-left-radius:5px}.ac-list .ac-list-table .ac-list-table-thead .ac-list-table-thead-tr .ac-list-table-thead-tr-th:last-child{padding-right:5px;border-top-right-radius:5px;border-bottom-right-radius:5px}.ac-list .ac-list-table .ac-list-table-thead .ac-list-table-thead-tr .ac-list-table-thead-tr-th .ac-list-column-header{display:flex;align-items:center;box-sizing:border-box;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ac-list .ac-list-table .ac-list-table-thead .ac-list-table-thead-tr .ac-list-table-thead-tr-th .ac-list-column-header .sort-icon{font-size:20px;display:flex;align-items:center}.ac-list .ac-list-table .ac-list-table-tbody .ac-list-table-tbody-tr{outline:none}.ac-list .ac-list-table .ac-list-table-tbody .ac-list-table-tbody-tr:nth-child(2n){background:var(--list-item-even-background-color, #e1e1e1)}.ac-list .ac-list-table .ac-list-table-tbody .ac-list-table-tbody-tr:hover{background:var(--list-item-hover-background-color, #cacaca)}.ac-list .ac-list-table .ac-list-table-tbody .ac-list-table-tbody-tr:focus{background:var(--list-item-focus-background-color, rgba(7, 71, 166, .3137254902))}.ac-list .ac-list-table .ac-list-table-tbody .ac-list-table-tbody-tr .ac-list-table-tbody-tr-td{color:var(--font-color, black);padding-left:5px}.ac-list .ac-list-table .ac-list-table-tbody .ac-list-table-tbody-tr .ac-list-table-tbody-tr-td:last-child{padding-right:5px}.ac-list .ac-list-table .ac-list-table-tbody .ac-list-table-tbody-tr .ac-list-table-tbody-tr-td .ac-list-column-body{box-sizing:border-box;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type:
|
|
1104
1352
|
// AcCheckBox,
|
|
1105
1353
|
MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
1106
1354
|
}
|
|
1107
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
1355
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcList, decorators: [{
|
|
1108
1356
|
type: Component,
|
|
1109
1357
|
args: [{ selector: 'ac-list', imports: [
|
|
1110
1358
|
CommonModule,
|
|
@@ -1124,9 +1372,113 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
1124
1372
|
type: Input
|
|
1125
1373
|
}] } });
|
|
1126
1374
|
|
|
1375
|
+
class AcListV2Content {
|
|
1376
|
+
template;
|
|
1377
|
+
constructor(template) {
|
|
1378
|
+
this.template = template;
|
|
1379
|
+
}
|
|
1380
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcListV2Content, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1381
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.2", type: AcListV2Content, isStandalone: true, selector: "[ac-list-v2-content]", ngImport: i0 });
|
|
1382
|
+
}
|
|
1383
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcListV2Content, decorators: [{
|
|
1384
|
+
type: Directive,
|
|
1385
|
+
args: [{
|
|
1386
|
+
selector: '[ac-list-v2-content]',
|
|
1387
|
+
standalone: true
|
|
1388
|
+
}]
|
|
1389
|
+
}], ctorParameters: () => [{ type: i0.TemplateRef }] });
|
|
1390
|
+
|
|
1391
|
+
class AcListV2Column {
|
|
1392
|
+
name;
|
|
1393
|
+
label;
|
|
1394
|
+
sortable = false;
|
|
1395
|
+
alignColumn = 'left';
|
|
1396
|
+
alignRow = 'left';
|
|
1397
|
+
contentTpl;
|
|
1398
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcListV2Column, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1399
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: AcListV2Column, isStandalone: true, selector: "ac-list-v2-column", inputs: { name: "name", label: "label", sortable: "sortable", alignColumn: "alignColumn", alignRow: "alignRow" }, queries: [{ propertyName: "contentTpl", first: true, predicate: AcListV2Content, descendants: true, read: TemplateRef }], ngImport: i0, template: '', isInline: true });
|
|
1400
|
+
}
|
|
1401
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcListV2Column, decorators: [{
|
|
1402
|
+
type: Component,
|
|
1403
|
+
args: [{
|
|
1404
|
+
selector: 'ac-list-v2-column',
|
|
1405
|
+
standalone: true,
|
|
1406
|
+
template: '',
|
|
1407
|
+
}]
|
|
1408
|
+
}], propDecorators: { name: [{
|
|
1409
|
+
type: Input
|
|
1410
|
+
}], label: [{
|
|
1411
|
+
type: Input
|
|
1412
|
+
}], sortable: [{
|
|
1413
|
+
type: Input
|
|
1414
|
+
}], alignColumn: [{
|
|
1415
|
+
type: Input
|
|
1416
|
+
}], alignRow: [{
|
|
1417
|
+
type: Input
|
|
1418
|
+
}], contentTpl: [{
|
|
1419
|
+
type: ContentChild,
|
|
1420
|
+
args: [AcListV2Content, { read: TemplateRef }]
|
|
1421
|
+
}] } });
|
|
1422
|
+
|
|
1423
|
+
class AcListV2 {
|
|
1424
|
+
list = [];
|
|
1425
|
+
itemSize = 25;
|
|
1426
|
+
columns;
|
|
1427
|
+
columnsArr = [];
|
|
1428
|
+
sortColumn = '';
|
|
1429
|
+
sortDirection = 'NONE';
|
|
1430
|
+
ngAfterContentInit() {
|
|
1431
|
+
this.columnsArr = this.columns.toArray();
|
|
1432
|
+
}
|
|
1433
|
+
onSort(column) {
|
|
1434
|
+
if (!column.sortable)
|
|
1435
|
+
return;
|
|
1436
|
+
if (this.sortColumn === column.name) {
|
|
1437
|
+
this.sortDirection = this.sortDirection === 'ASC' ? 'DESC' : (this.sortDirection === 'DESC' ? 'NONE' : 'ASC');
|
|
1438
|
+
}
|
|
1439
|
+
else {
|
|
1440
|
+
this.sortColumn = column.name;
|
|
1441
|
+
this.sortDirection = 'ASC';
|
|
1442
|
+
}
|
|
1443
|
+
}
|
|
1444
|
+
getSortedList() {
|
|
1445
|
+
if (this.sortDirection === 'NONE' || !this.sortColumn)
|
|
1446
|
+
return this.list;
|
|
1447
|
+
return [...this.list].sort((a, b) => {
|
|
1448
|
+
const valA = a[this.sortColumn];
|
|
1449
|
+
const valB = b[this.sortColumn];
|
|
1450
|
+
if (valA == null)
|
|
1451
|
+
return 1;
|
|
1452
|
+
if (valB == null)
|
|
1453
|
+
return -1;
|
|
1454
|
+
if (valA > valB)
|
|
1455
|
+
return this.sortDirection === 'ASC' ? 1 : -1;
|
|
1456
|
+
if (valA < valB)
|
|
1457
|
+
return this.sortDirection === 'ASC' ? -1 : 1;
|
|
1458
|
+
return 0;
|
|
1459
|
+
});
|
|
1460
|
+
}
|
|
1461
|
+
get shouldUseVirtualScroll() {
|
|
1462
|
+
return this.getSortedList().length > 20;
|
|
1463
|
+
}
|
|
1464
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcListV2, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1465
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: AcListV2, isStandalone: true, selector: "ac-list-v2", inputs: { list: "list", itemSize: "itemSize" }, queries: [{ propertyName: "columns", predicate: AcListV2Column }], ngImport: i0, template: "<div class=\"ac-list-v2-container\">\n <table class=\"ac-list-v2-table\">\n <thead>\n <tr>\n <th *ngFor=\"let col of columnsArr\"\n [style.text-align]=\"col.alignColumn\"\n [class.left]=\"col.alignColumn === 'left'\"\n [class.center]=\"col.alignColumn === 'center'\"\n [class.right]=\"col.alignColumn === 'right'\"\n (click)=\"onSort(col)\"\n [class.sortable]=\"col.sortable\">\n {{ col.label || col.name }}\n <span *ngIf=\"col.sortable\">\n <ng-container [ngSwitch]=\"sortColumn === col.name ? sortDirection : 'NONE'\">\n <span *ngSwitchCase=\"'ASC'\">\u25B2</span>\n <span *ngSwitchCase=\"'DESC'\">\u25BC</span>\n <span *ngSwitchDefault>\u21C5</span>\n </ng-container>\n </span>\n </th>\n </tr>\n </thead>\n </table>\n\n <ng-template #cellTemplate let-row=\"row\" let-idxRow=\"idxRow\">\n <ng-container *ngFor=\"let col of columnsArr; let idxCol = index\">\n <td [style.text-align]=\"col.alignRow\"\n [class.left]=\"col.alignRow === 'left'\"\n [class.center]=\"col.alignRow === 'center'\"\n [class.right]=\"col.alignRow === 'right'\">\n <ng-container *ngIf=\"col.contentTpl; else defaultCell\">\n <ng-container *ngTemplateOutlet=\"col.contentTpl; context: { $implicit: row, row: row, idxRow: idxRow, column: col.name, idxCol: idxCol }\"></ng-container>\n </ng-container>\n <ng-template #defaultCell>\n {{ row[col.name] }}\n </ng-template>\n </td>\n </ng-container>\n </ng-template>\n\n <div *ngIf=\"!shouldUseVirtualScroll\" class=\"ac-list-v2-body-container\">\n <table class=\"ac-list-v2-table\">\n <tbody>\n <tr *ngFor=\"let row of getSortedList(); let idxRow = index\">\n <ng-container *ngTemplateOutlet=\"cellTemplate; context: {row: row, idxRow: idxRow}\"></ng-container>\n </tr>\n </tbody>\n </table>\n </div>\n\n <div *ngIf=\"shouldUseVirtualScroll\" class=\"ac-list-v2-body-container-virtual-scroll\">\n <cdk-virtual-scroll-viewport [itemSize]=\"itemSize\" class=\"ac-list-v2-viewport\">\n <table class=\"ac-list-v2-table ac-list-v2-body\">\n <tbody>\n <tr *cdkVirtualFor=\"let row of getSortedList(); let idxRow = index\">\n <ng-container *ngTemplateOutlet=\"cellTemplate; context: {row: row, idxRow: idxRow}\"></ng-container>\n </tr>\n </tbody>\n </table>\n </cdk-virtual-scroll-viewport>\n </div>\n</div>\n", styles: [".ac-list-v2-container{border-radius:5px;overflow:hidden;width:100%}.ac-list-v2-body-container{position:relative;width:100%}.ac-list-v2-body-container-virtual-scroll{position:relative}.ac-list-v2-viewport{height:400px;width:100%}.ac-list-v2-body thead{display:none}.ac-list-v2-table{width:100%;border-collapse:collapse;border-spacing:0;font-family:inherit;table-layout:fixed}.ac-list-v2-table thead tr{background-color:var(--primary-color, #0747a6)}.ac-list-v2-table th,.ac-list-v2-table td{padding:4px 14px;border:none;font-weight:400;background:none;white-space:nowrap;vertical-align:middle;box-sizing:border-box;margin:0}.ac-list-v2-table tr{height:25px}.ac-list-v2-table th{background-color:var(--primary-color, #0747a6);color:#fff;font-weight:500;position:sticky;top:0;text-align:left;border:none;margin:0}.ac-list-v2-table th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.ac-list-v2-table th.left{text-align:left}.ac-list-v2-table th.center{text-align:center;vertical-align:middle}.ac-list-v2-table th.right{text-align:right}.ac-list-v2-table th:first-child{border-top-left-radius:5px;border-bottom-left-radius:5px}.ac-list-v2-table th:last-child{border-top-right-radius:5px;border-bottom-right-radius:5px}.ac-list-v2-table td{color:var(--font-color, black)}.ac-list-v2-table td.left{text-align:left}.ac-list-v2-table td.center{text-align:center;vertical-align:middle;display:flex;align-items:center;justify-content:center;height:28px;padding:0}.ac-list-v2-table td.right{text-align:right}.ac-list-v2-table td:first-child{border-top-left-radius:5px;border-bottom-left-radius:5px}.ac-list-v2-table td:last-child{border-top-right-radius:5px;border-bottom-right-radius:5px}.ac-list-v2-table td *{color:inherit}.ac-list-v2-table tbody tr:nth-child(2n){background-color:var(--list-item-even-background-color, #e1e1e1)}.ac-list-v2-table tbody tr:nth-child(odd){background-color:var(--background-color, #f5f5f5)}.ac-list-v2-table tbody tr:hover{background-color:var(--list-item-hover-background-color, #cacaca)}.ac-list-v2-table tbody tr:focus{background-color:var(--list-item-focus-background-color, rgba(7, 71, 166, .3137254902))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2$2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2$2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2$2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }] });
|
|
1466
|
+
}
|
|
1467
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcListV2, decorators: [{
|
|
1468
|
+
type: Component,
|
|
1469
|
+
args: [{ selector: 'ac-list-v2', standalone: true, imports: [CommonModule, ScrollingModule], template: "<div class=\"ac-list-v2-container\">\n <table class=\"ac-list-v2-table\">\n <thead>\n <tr>\n <th *ngFor=\"let col of columnsArr\"\n [style.text-align]=\"col.alignColumn\"\n [class.left]=\"col.alignColumn === 'left'\"\n [class.center]=\"col.alignColumn === 'center'\"\n [class.right]=\"col.alignColumn === 'right'\"\n (click)=\"onSort(col)\"\n [class.sortable]=\"col.sortable\">\n {{ col.label || col.name }}\n <span *ngIf=\"col.sortable\">\n <ng-container [ngSwitch]=\"sortColumn === col.name ? sortDirection : 'NONE'\">\n <span *ngSwitchCase=\"'ASC'\">\u25B2</span>\n <span *ngSwitchCase=\"'DESC'\">\u25BC</span>\n <span *ngSwitchDefault>\u21C5</span>\n </ng-container>\n </span>\n </th>\n </tr>\n </thead>\n </table>\n\n <ng-template #cellTemplate let-row=\"row\" let-idxRow=\"idxRow\">\n <ng-container *ngFor=\"let col of columnsArr; let idxCol = index\">\n <td [style.text-align]=\"col.alignRow\"\n [class.left]=\"col.alignRow === 'left'\"\n [class.center]=\"col.alignRow === 'center'\"\n [class.right]=\"col.alignRow === 'right'\">\n <ng-container *ngIf=\"col.contentTpl; else defaultCell\">\n <ng-container *ngTemplateOutlet=\"col.contentTpl; context: { $implicit: row, row: row, idxRow: idxRow, column: col.name, idxCol: idxCol }\"></ng-container>\n </ng-container>\n <ng-template #defaultCell>\n {{ row[col.name] }}\n </ng-template>\n </td>\n </ng-container>\n </ng-template>\n\n <div *ngIf=\"!shouldUseVirtualScroll\" class=\"ac-list-v2-body-container\">\n <table class=\"ac-list-v2-table\">\n <tbody>\n <tr *ngFor=\"let row of getSortedList(); let idxRow = index\">\n <ng-container *ngTemplateOutlet=\"cellTemplate; context: {row: row, idxRow: idxRow}\"></ng-container>\n </tr>\n </tbody>\n </table>\n </div>\n\n <div *ngIf=\"shouldUseVirtualScroll\" class=\"ac-list-v2-body-container-virtual-scroll\">\n <cdk-virtual-scroll-viewport [itemSize]=\"itemSize\" class=\"ac-list-v2-viewport\">\n <table class=\"ac-list-v2-table ac-list-v2-body\">\n <tbody>\n <tr *cdkVirtualFor=\"let row of getSortedList(); let idxRow = index\">\n <ng-container *ngTemplateOutlet=\"cellTemplate; context: {row: row, idxRow: idxRow}\"></ng-container>\n </tr>\n </tbody>\n </table>\n </cdk-virtual-scroll-viewport>\n </div>\n</div>\n", styles: [".ac-list-v2-container{border-radius:5px;overflow:hidden;width:100%}.ac-list-v2-body-container{position:relative;width:100%}.ac-list-v2-body-container-virtual-scroll{position:relative}.ac-list-v2-viewport{height:400px;width:100%}.ac-list-v2-body thead{display:none}.ac-list-v2-table{width:100%;border-collapse:collapse;border-spacing:0;font-family:inherit;table-layout:fixed}.ac-list-v2-table thead tr{background-color:var(--primary-color, #0747a6)}.ac-list-v2-table th,.ac-list-v2-table td{padding:4px 14px;border:none;font-weight:400;background:none;white-space:nowrap;vertical-align:middle;box-sizing:border-box;margin:0}.ac-list-v2-table tr{height:25px}.ac-list-v2-table th{background-color:var(--primary-color, #0747a6);color:#fff;font-weight:500;position:sticky;top:0;text-align:left;border:none;margin:0}.ac-list-v2-table th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.ac-list-v2-table th.left{text-align:left}.ac-list-v2-table th.center{text-align:center;vertical-align:middle}.ac-list-v2-table th.right{text-align:right}.ac-list-v2-table th:first-child{border-top-left-radius:5px;border-bottom-left-radius:5px}.ac-list-v2-table th:last-child{border-top-right-radius:5px;border-bottom-right-radius:5px}.ac-list-v2-table td{color:var(--font-color, black)}.ac-list-v2-table td.left{text-align:left}.ac-list-v2-table td.center{text-align:center;vertical-align:middle;display:flex;align-items:center;justify-content:center;height:28px;padding:0}.ac-list-v2-table td.right{text-align:right}.ac-list-v2-table td:first-child{border-top-left-radius:5px;border-bottom-left-radius:5px}.ac-list-v2-table td:last-child{border-top-right-radius:5px;border-bottom-right-radius:5px}.ac-list-v2-table td *{color:inherit}.ac-list-v2-table tbody tr:nth-child(2n){background-color:var(--list-item-even-background-color, #e1e1e1)}.ac-list-v2-table tbody tr:nth-child(odd){background-color:var(--background-color, #f5f5f5)}.ac-list-v2-table tbody tr:hover{background-color:var(--list-item-hover-background-color, #cacaca)}.ac-list-v2-table tbody tr:focus{background-color:var(--list-item-focus-background-color, rgba(7, 71, 166, .3137254902))}\n"] }]
|
|
1470
|
+
}], propDecorators: { list: [{
|
|
1471
|
+
type: Input
|
|
1472
|
+
}], itemSize: [{
|
|
1473
|
+
type: Input
|
|
1474
|
+
}], columns: [{
|
|
1475
|
+
type: ContentChildren,
|
|
1476
|
+
args: [AcListV2Column]
|
|
1477
|
+
}] } });
|
|
1478
|
+
|
|
1127
1479
|
class ComponentsModule {
|
|
1128
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
1129
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.
|
|
1480
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1481
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.2", ngImport: i0, type: ComponentsModule, imports: [CommonModule,
|
|
1130
1482
|
AcButton,
|
|
1131
1483
|
AcSwitch,
|
|
1132
1484
|
AcCheckBox,
|
|
@@ -1138,13 +1490,20 @@ class ComponentsModule {
|
|
|
1138
1490
|
AcInputDate,
|
|
1139
1491
|
AcInputTime,
|
|
1140
1492
|
AcInputFile,
|
|
1493
|
+
AcInputPercentage,
|
|
1494
|
+
AcInputNumber,
|
|
1495
|
+
AcInputMoney,
|
|
1141
1496
|
AcActionLink,
|
|
1142
1497
|
AcSelect,
|
|
1143
1498
|
AcPagination,
|
|
1144
1499
|
AcNotification,
|
|
1145
1500
|
AcProgressBar,
|
|
1146
1501
|
AcSideMenu,
|
|
1147
|
-
AcList
|
|
1502
|
+
AcList,
|
|
1503
|
+
AcListV2,
|
|
1504
|
+
AcListV2Column,
|
|
1505
|
+
AcListV2Content,
|
|
1506
|
+
ScrollingModule], exports: [AcButton,
|
|
1148
1507
|
AcSwitch,
|
|
1149
1508
|
AcCheckBox,
|
|
1150
1509
|
AcInputPassword,
|
|
@@ -1155,14 +1514,20 @@ class ComponentsModule {
|
|
|
1155
1514
|
AcInputDate,
|
|
1156
1515
|
AcInputTime,
|
|
1157
1516
|
AcInputFile,
|
|
1517
|
+
AcInputPercentage,
|
|
1518
|
+
AcInputNumber,
|
|
1519
|
+
AcInputMoney,
|
|
1158
1520
|
AcActionLink,
|
|
1159
1521
|
AcSelect,
|
|
1160
1522
|
AcPagination,
|
|
1161
1523
|
AcNotification,
|
|
1162
1524
|
AcProgressBar,
|
|
1163
1525
|
AcSideMenu,
|
|
1164
|
-
AcList
|
|
1165
|
-
|
|
1526
|
+
AcList,
|
|
1527
|
+
AcListV2,
|
|
1528
|
+
AcListV2Column,
|
|
1529
|
+
AcListV2Content] });
|
|
1530
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ComponentsModule, imports: [CommonModule,
|
|
1166
1531
|
AcButton,
|
|
1167
1532
|
AcSwitch,
|
|
1168
1533
|
AcCheckBox,
|
|
@@ -1174,15 +1539,20 @@ class ComponentsModule {
|
|
|
1174
1539
|
AcInputDate,
|
|
1175
1540
|
AcInputTime,
|
|
1176
1541
|
AcInputFile,
|
|
1542
|
+
AcInputPercentage,
|
|
1543
|
+
AcInputNumber,
|
|
1544
|
+
AcInputMoney,
|
|
1177
1545
|
AcActionLink,
|
|
1178
1546
|
AcSelect,
|
|
1179
1547
|
AcPagination,
|
|
1180
1548
|
AcNotification,
|
|
1181
1549
|
AcProgressBar,
|
|
1182
1550
|
AcSideMenu,
|
|
1183
|
-
AcList
|
|
1551
|
+
AcList,
|
|
1552
|
+
AcListV2,
|
|
1553
|
+
ScrollingModule] });
|
|
1184
1554
|
}
|
|
1185
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
1555
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ComponentsModule, decorators: [{
|
|
1186
1556
|
type: NgModule,
|
|
1187
1557
|
args: [{
|
|
1188
1558
|
declarations: [],
|
|
@@ -1199,13 +1569,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
1199
1569
|
AcInputDate,
|
|
1200
1570
|
AcInputTime,
|
|
1201
1571
|
AcInputFile,
|
|
1572
|
+
AcInputPercentage,
|
|
1573
|
+
AcInputNumber,
|
|
1574
|
+
AcInputMoney,
|
|
1202
1575
|
AcActionLink,
|
|
1203
1576
|
AcSelect,
|
|
1204
1577
|
AcPagination,
|
|
1205
1578
|
AcNotification,
|
|
1206
1579
|
AcProgressBar,
|
|
1207
1580
|
AcSideMenu,
|
|
1208
|
-
AcList
|
|
1581
|
+
AcList,
|
|
1582
|
+
AcListV2,
|
|
1583
|
+
AcListV2Column,
|
|
1584
|
+
AcListV2Content,
|
|
1585
|
+
ScrollingModule,
|
|
1209
1586
|
],
|
|
1210
1587
|
exports: [
|
|
1211
1588
|
AcButton,
|
|
@@ -1219,17 +1596,142 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
1219
1596
|
AcInputDate,
|
|
1220
1597
|
AcInputTime,
|
|
1221
1598
|
AcInputFile,
|
|
1599
|
+
AcInputPercentage,
|
|
1600
|
+
AcInputNumber,
|
|
1601
|
+
AcInputMoney,
|
|
1222
1602
|
AcActionLink,
|
|
1223
1603
|
AcSelect,
|
|
1224
1604
|
AcPagination,
|
|
1225
1605
|
AcNotification,
|
|
1226
1606
|
AcProgressBar,
|
|
1227
1607
|
AcSideMenu,
|
|
1228
|
-
AcList
|
|
1608
|
+
AcList,
|
|
1609
|
+
AcListV2,
|
|
1610
|
+
AcListV2Column,
|
|
1611
|
+
AcListV2Content
|
|
1229
1612
|
]
|
|
1230
1613
|
}]
|
|
1231
1614
|
}] });
|
|
1232
1615
|
|
|
1616
|
+
class AcInputMoney extends AcInputMaskNumber {
|
|
1617
|
+
decimalPlaces = 2;
|
|
1618
|
+
isUserTyping = false;
|
|
1619
|
+
rawValue = '';
|
|
1620
|
+
numberInputSubject = new Subject();
|
|
1621
|
+
applyMask(value) {
|
|
1622
|
+
if (value === undefined || value === null)
|
|
1623
|
+
return '';
|
|
1624
|
+
let strValue = typeof value === 'number' ? value.toString() : value;
|
|
1625
|
+
if (this.isUserTyping) {
|
|
1626
|
+
return this.rawValue;
|
|
1627
|
+
}
|
|
1628
|
+
if (typeof value === 'number') {
|
|
1629
|
+
strValue = strValue.replace('.', ',');
|
|
1630
|
+
}
|
|
1631
|
+
strValue = strValue.replace(/[^0-9.,]/g, '');
|
|
1632
|
+
if (strValue === '')
|
|
1633
|
+
return 'R$ 0,00';
|
|
1634
|
+
let int = strValue;
|
|
1635
|
+
let dec = '';
|
|
1636
|
+
let sepIndex = Math.max(strValue.indexOf(','), strValue.indexOf('.'));
|
|
1637
|
+
if (sepIndex !== -1) {
|
|
1638
|
+
int = strValue.substring(0, sepIndex);
|
|
1639
|
+
dec = strValue.substring(sepIndex + 1).replace(/[,\.]/g, '');
|
|
1640
|
+
}
|
|
1641
|
+
if (this.decimalPlaces > 0) {
|
|
1642
|
+
if (int === '')
|
|
1643
|
+
return 'R$ 0,00';
|
|
1644
|
+
dec = dec.slice(0, this.decimalPlaces);
|
|
1645
|
+
while (dec.length < this.decimalPlaces)
|
|
1646
|
+
dec += '0';
|
|
1647
|
+
const formattedInt = (int === '0' || int === '') ? '0' : int.replace(/^0+/, '') || '0';
|
|
1648
|
+
return 'R$ ' + formattedInt + ',' + dec;
|
|
1649
|
+
}
|
|
1650
|
+
else {
|
|
1651
|
+
const formattedInt = (int === '0' || int === '') ? '0' : int.replace(/^0+/, '') || '0';
|
|
1652
|
+
return 'R$ ' + formattedInt;
|
|
1653
|
+
}
|
|
1654
|
+
}
|
|
1655
|
+
onChange(value) {
|
|
1656
|
+
this.isUserTyping = true;
|
|
1657
|
+
setTimeout(() => {
|
|
1658
|
+
let cleaned = value.replace(/[^0-9.,]/g, '').replace(',', '.');
|
|
1659
|
+
cleaned = this.sanitizeDecimal(cleaned);
|
|
1660
|
+
this.rawValue = cleaned;
|
|
1661
|
+
this.formattedValue = this.applyMask(cleaned);
|
|
1662
|
+
if (cleaned === '') {
|
|
1663
|
+
this.rawValue = '0';
|
|
1664
|
+
this.formattedValue = '0';
|
|
1665
|
+
this.emitValue('0');
|
|
1666
|
+
return;
|
|
1667
|
+
}
|
|
1668
|
+
this.emitValue(cleaned);
|
|
1669
|
+
});
|
|
1670
|
+
}
|
|
1671
|
+
emitValue(cleaned) {
|
|
1672
|
+
if (!cleaned) {
|
|
1673
|
+
this.numberInputSubject.next(0);
|
|
1674
|
+
return;
|
|
1675
|
+
}
|
|
1676
|
+
cleaned = this.sanitizeDecimal(cleaned);
|
|
1677
|
+
let num = parseFloat(cleaned);
|
|
1678
|
+
if (isNaN(num)) {
|
|
1679
|
+
this.numberInputSubject.next(0);
|
|
1680
|
+
return;
|
|
1681
|
+
}
|
|
1682
|
+
if (this.decimalPlaces === 0) {
|
|
1683
|
+
num = Math.trunc(num);
|
|
1684
|
+
}
|
|
1685
|
+
this.numberInputSubject.next(num);
|
|
1686
|
+
}
|
|
1687
|
+
onBlur() {
|
|
1688
|
+
this.isUserTyping = false;
|
|
1689
|
+
if (this.rawValue) {
|
|
1690
|
+
const num = parseFloat(this.rawValue);
|
|
1691
|
+
if (!isNaN(num)) {
|
|
1692
|
+
this.formattedValue = this.applyMask(num);
|
|
1693
|
+
this.emitValue(this.rawValue);
|
|
1694
|
+
}
|
|
1695
|
+
}
|
|
1696
|
+
else {
|
|
1697
|
+
this.formattedValue = this.applyMask(0);
|
|
1698
|
+
}
|
|
1699
|
+
}
|
|
1700
|
+
onFocus() {
|
|
1701
|
+
if (this.formattedValue) {
|
|
1702
|
+
const valueWithoutMoney = this.formattedValue.replace(/[R$\s]/g, '').replace(',', '.');
|
|
1703
|
+
this.rawValue = valueWithoutMoney;
|
|
1704
|
+
this.formattedValue = valueWithoutMoney;
|
|
1705
|
+
}
|
|
1706
|
+
}
|
|
1707
|
+
sanitizeDecimal(value) {
|
|
1708
|
+
const firstDot = value.indexOf('.');
|
|
1709
|
+
if (firstDot !== -1) {
|
|
1710
|
+
return value.substring(0, firstDot + 1) + value.substring(firstDot + 1).replace(/\./g, '');
|
|
1711
|
+
}
|
|
1712
|
+
return value;
|
|
1713
|
+
}
|
|
1714
|
+
ngOnInit() {
|
|
1715
|
+
if (this.model) {
|
|
1716
|
+
this.formattedValue = this.applyMask(this.model);
|
|
1717
|
+
}
|
|
1718
|
+
this.numberInputSubject.pipe(debounceTime(this.debounce)).subscribe((value) => {
|
|
1719
|
+
this.modelChange.emit(value);
|
|
1720
|
+
if (this.onChangeModel) {
|
|
1721
|
+
this.onChangeModel(value);
|
|
1722
|
+
}
|
|
1723
|
+
});
|
|
1724
|
+
}
|
|
1725
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcInputMoney, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1726
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: AcInputMoney, isStandalone: true, selector: "ac-input-money", inputs: { decimalPlaces: "decimalPlaces" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ac-input-base\">\n <label class=\"ac-label\" *ngIf=\"buildTitleSpace || title\">{{title}}</label>\n <div class=\"ac-input-base-comp\" [ngClass]=\"{ 'disabled': disabled }\">\n <input\n type=\"text\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [(ngModel)]=\"formattedValue\"\n (ngModelChange)=\"onChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n />\n </div>\n</div>", styles: [".ac-input-base{display:flex;flex-direction:column;align-items:flex-start;width:100%;margin-top:2px;margin-bottom:2px}.ac-input-base .ac-input-base-comp.disabled{pointer-events:none;opacity:.9;background-color:color-mix(in srgb,var(--font-color, black) 8%,transparent)}.ac-input-base .ac-input-base-comp{position:relative;display:flex;align-items:center;width:100%;height:21px;transition:border-bottom-color .3s ease;border-radius:5px;border:1px solid rgb(191.25,191.25,191.25);box-sizing:border-box}.ac-input-base .ac-input-base-comp:focus-within{border-bottom:2px solid var(--primary-color, #0747a6)}.ac-input-base .ac-input-base-comp>input{width:100%;padding:2px 5px;background:none;outline:none;position:relative;color:var(--font-color, black);font-size:14px;border:none}.ac-label{width:100%;line-height:normal;font-weight:400;font-size:14px;padding-bottom:2px;height:auto;color:var(--font-color, black)}:host input[type=text]{text-align:right}\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
1727
|
+
}
|
|
1728
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcInputMoney, decorators: [{
|
|
1729
|
+
type: Component,
|
|
1730
|
+
args: [{ selector: 'ac-input-money', imports: [FormsModule, CommonModule], template: "<div class=\"ac-input-base\">\n <label class=\"ac-label\" *ngIf=\"buildTitleSpace || title\">{{title}}</label>\n <div class=\"ac-input-base-comp\" [ngClass]=\"{ 'disabled': disabled }\">\n <input\n type=\"text\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [(ngModel)]=\"formattedValue\"\n (ngModelChange)=\"onChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n />\n </div>\n</div>", styles: [".ac-input-base{display:flex;flex-direction:column;align-items:flex-start;width:100%;margin-top:2px;margin-bottom:2px}.ac-input-base .ac-input-base-comp.disabled{pointer-events:none;opacity:.9;background-color:color-mix(in srgb,var(--font-color, black) 8%,transparent)}.ac-input-base .ac-input-base-comp{position:relative;display:flex;align-items:center;width:100%;height:21px;transition:border-bottom-color .3s ease;border-radius:5px;border:1px solid rgb(191.25,191.25,191.25);box-sizing:border-box}.ac-input-base .ac-input-base-comp:focus-within{border-bottom:2px solid var(--primary-color, #0747a6)}.ac-input-base .ac-input-base-comp>input{width:100%;padding:2px 5px;background:none;outline:none;position:relative;color:var(--font-color, black);font-size:14px;border:none}.ac-label{width:100%;line-height:normal;font-weight:400;font-size:14px;padding-bottom:2px;height:auto;color:var(--font-color, black)}:host input[type=text]{text-align:right}\n"] }]
|
|
1731
|
+
}], propDecorators: { decimalPlaces: [{
|
|
1732
|
+
type: Input
|
|
1733
|
+
}] } });
|
|
1734
|
+
|
|
1233
1735
|
/*
|
|
1234
1736
|
* Public API Surface of components
|
|
1235
1737
|
*/
|
|
@@ -1238,5 +1740,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
1238
1740
|
* Generated bundle index. Do not edit.
|
|
1239
1741
|
*/
|
|
1240
1742
|
|
|
1241
|
-
export { AcActionLink, AcButton, AcCheckBox, AcInputDate, AcInputDateTime, AcInputDocumentNumber, AcInputFile, AcInputPassword, AcInputPhoneNumber, AcInputText, AcInputTime, AcList, AcNotification, AcPagination, AcProgressBar, AcSelect, AcSideMenu, AcSwitch, ComponentsModule };
|
|
1743
|
+
export { AcActionLink, AcButton, AcCheckBox, AcInputDate, AcInputDateTime, AcInputDocumentNumber, AcInputFile, AcInputMoney, AcInputNumber, AcInputPassword, AcInputPercentage, AcInputPhoneNumber, AcInputText, AcInputTime, AcList, AcListV2, AcListV2Column, AcListV2Content, AcNotification, AcPagination, AcProgressBar, AcSelect, AcSideMenu, AcSwitch, ComponentsModule };
|
|
1242
1744
|
//# sourceMappingURL=sgcloud-sgsistemas-angular-components.mjs.map
|