ng-tailwind 7.0.11 → 7.0.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/forms/reactive/ngt-reactive-textarea/ngt-reactive-textarea.component.d.ts +8 -4
- package/components/ngt-datatable/ngt-datatable.component.d.ts +2 -1
- package/components/ngt-datatable/ngt-th/ngt-th.component.d.ts +4 -2
- package/components/ngt-datatable/ngt-thead/ngt-thead.component.d.ts +8 -4
- package/fesm2022/ng-tailwind.mjs +106 -21
- package/fesm2022/ng-tailwind.mjs.map +1 -1
- package/package.json +1 -1
package/components/forms/reactive/ngt-reactive-textarea/ngt-reactive-textarea.component.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { AfterViewInit, ElementRef, Injector,
|
|
1
|
+
import { AfterViewInit, ChangeDetectorRef, ElementRef, Injector, NgZone, OnDestroy, Signal } from '@angular/core';
|
|
2
2
|
import { AsyncValidatorFn, ValidatorFn } from '@angular/forms';
|
|
3
3
|
import { NgtControlValueAccessor } from '../../../../base/ngt-control-value-accessor';
|
|
4
4
|
import { NgtStylizableDirective } from '../../../../directives/ngt-stylizable/ngt-stylizable.directive';
|
|
@@ -16,7 +16,8 @@ export declare class NgtReactiveTextareaComponent extends NgtControlValueAccesso
|
|
|
16
16
|
private ngtModal;
|
|
17
17
|
private translateService;
|
|
18
18
|
private validationService;
|
|
19
|
-
private
|
|
19
|
+
private changeDetector;
|
|
20
|
+
private ngZone;
|
|
20
21
|
protected injector: Injector;
|
|
21
22
|
textareaElement: ElementRef;
|
|
22
23
|
/** Visual Inputs */
|
|
@@ -51,9 +52,11 @@ export declare class NgtReactiveTextareaComponent extends NgtControlValueAccesso
|
|
|
51
52
|
ngtStyle: NgtStylizableService;
|
|
52
53
|
private readonly formControlHasErrors;
|
|
53
54
|
private readonly formControlIsDirty;
|
|
55
|
+
private inputSubject$;
|
|
56
|
+
private isUserTyping;
|
|
54
57
|
private subscriptions;
|
|
55
58
|
private listeners;
|
|
56
|
-
constructor(ngtStylizableDirective: NgtStylizableDirective, ngtReactiveForm: NgtReactiveFormComponent, ngtSection: NgtSectionComponent, ngtModal: NgtModalComponent, translateService: NgtTranslateService, validationService: NgtReactiveTextareaValidationService,
|
|
59
|
+
constructor(ngtStylizableDirective: NgtStylizableDirective, ngtReactiveForm: NgtReactiveFormComponent, ngtSection: NgtSectionComponent, ngtModal: NgtModalComponent, translateService: NgtTranslateService, validationService: NgtReactiveTextareaValidationService, changeDetector: ChangeDetectorRef, ngZone: NgZone, injector: Injector);
|
|
57
60
|
ngAfterViewInit(): void;
|
|
58
61
|
ngOnDestroy(): void;
|
|
59
62
|
onNativeChange(): void;
|
|
@@ -63,6 +66,7 @@ export declare class NgtReactiveTextareaComponent extends NgtControlValueAccesso
|
|
|
63
66
|
getTranslation(key: string): string;
|
|
64
67
|
private setupComponent;
|
|
65
68
|
private setupSubscriptions;
|
|
69
|
+
private setupListeners;
|
|
66
70
|
private registerEffects;
|
|
67
71
|
private setupValidators;
|
|
68
72
|
private setupNgtStylizable;
|
|
@@ -73,6 +77,6 @@ export declare class NgtReactiveTextareaComponent extends NgtControlValueAccesso
|
|
|
73
77
|
private getTextareaClasses;
|
|
74
78
|
private destroySubscriptions;
|
|
75
79
|
private destroyListeners;
|
|
76
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<NgtReactiveTextareaComponent, [{ optional: true; self: true; }, { optional: true; skipSelf: true; }, { optional: true; skipSelf: true; }, { optional: true; skipSelf: true; }, { optional: true; }, null, null, null]>;
|
|
80
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<NgtReactiveTextareaComponent, [{ optional: true; self: true; }, { optional: true; skipSelf: true; }, { optional: true; skipSelf: true; }, { optional: true; skipSelf: true; }, { optional: true; }, null, null, null, null]>;
|
|
77
81
|
static ɵcmp: i0.ɵɵComponentDeclaration<NgtReactiveTextareaComponent, "ngt-reactive-textarea", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "helpTitle": { "alias": "helpTitle"; "required": false; "isSignal": true; }; "helpText": { "alias": "helpText"; "required": false; "isSignal": true; }; "helpTextColor": { "alias": "helpTextColor"; "required": false; "isSignal": true; }; "showCharactersLength": { "alias": "showCharactersLength"; "required": false; "isSignal": true; }; "shining": { "alias": "shining"; "required": false; "isSignal": true; }; "isDisabled": { "alias": "isDisabled"; "required": false; "isSignal": true; }; "isReadonly": { "alias": "isReadonly"; "required": false; "isSignal": true; }; "focus": { "alias": "focus"; "required": false; "isSignal": true; }; "isRequired": { "alias": "isRequired"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; "customSyncValidators": { "alias": "customSyncValidators"; "required": false; "isSignal": true; }; "customAsyncValidators": { "alias": "customAsyncValidators"; "required": false; "isSignal": true; }; }, { "onValueChange": "onValueChange"; }, never, ["*"], true, never>;
|
|
78
82
|
}
|
|
@@ -50,6 +50,7 @@ export declare class NgtDatatableComponent implements OnInit, OnDestroy {
|
|
|
50
50
|
defaultFilters: any;
|
|
51
51
|
filtersDescription: {};
|
|
52
52
|
canSelectAllRegisters: boolean;
|
|
53
|
+
headBgColor: string;
|
|
53
54
|
onDataChange: EventEmitter<any>;
|
|
54
55
|
onClearFilter: EventEmitter<any>;
|
|
55
56
|
onClearSelectedElements: EventEmitter<any>;
|
|
@@ -121,5 +122,5 @@ export declare class NgtDatatableComponent implements OnInit, OnDestroy {
|
|
|
121
122
|
private isValidFilter;
|
|
122
123
|
private destroySubscriptions;
|
|
123
124
|
static ɵfac: i0.ɵɵFactoryDeclaration<NgtDatatableComponent, [null, null, null, { optional: true; }]>;
|
|
124
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<NgtDatatableComponent, "ngt-datatable", never, { "remoteResource": { "alias": "remoteResource"; "required": false; }; "type": { "alias": "type"; "required": false; }; "filterTagBgColor": { "alias": "filterTagBgColor"; "required": false; }; "filterTagMargin": { "alias": "filterTagMargin"; "required": false; }; "paginationMargin": { "alias": "paginationMargin"; "required": false; }; "inputSearch": { "alias": "inputSearch"; "required": false; }; "searchDelay": { "alias": "searchDelay"; "required": false; }; "searchTermMinLength": { "alias": "searchTermMinLength"; "required": false; }; "searchTermOnEnter": { "alias": "searchTermOnEnter"; "required": false; }; "defaultFilters": { "alias": "defaultFilters"; "required": false; }; "filtersDescription": { "alias": "filtersDescription"; "required": false; }; "canSelectAllRegisters": { "alias": "canSelectAllRegisters"; "required": false; }; }, { "onDataChange": "onDataChange"; "onClearFilter": "onClearFilter"; "onClearSelectedElements": "onClearSelectedElements"; "onSelectedElementsChange": "onSelectedElementsChange"; "onToogleAllCheckboxes": "onToogleAllCheckboxes"; "onToogleCheckbox": "onToogleCheckbox"; "onSelectAllRegisters": "onSelectAllRegisters"; "onOpenSearchModal": "onOpenSearchModal"; "onSearch": "onSearch"; }, never, ["*"], false, never>;
|
|
125
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<NgtDatatableComponent, "ngt-datatable", never, { "remoteResource": { "alias": "remoteResource"; "required": false; }; "type": { "alias": "type"; "required": false; }; "filterTagBgColor": { "alias": "filterTagBgColor"; "required": false; }; "filterTagMargin": { "alias": "filterTagMargin"; "required": false; }; "paginationMargin": { "alias": "paginationMargin"; "required": false; }; "inputSearch": { "alias": "inputSearch"; "required": false; }; "searchDelay": { "alias": "searchDelay"; "required": false; }; "searchTermMinLength": { "alias": "searchTermMinLength"; "required": false; }; "searchTermOnEnter": { "alias": "searchTermOnEnter"; "required": false; }; "defaultFilters": { "alias": "defaultFilters"; "required": false; }; "filtersDescription": { "alias": "filtersDescription"; "required": false; }; "canSelectAllRegisters": { "alias": "canSelectAllRegisters"; "required": false; }; "headBgColor": { "alias": "headBgColor"; "required": false; }; }, { "onDataChange": "onDataChange"; "onClearFilter": "onClearFilter"; "onClearSelectedElements": "onClearSelectedElements"; "onSelectedElementsChange": "onSelectedElementsChange"; "onToogleAllCheckboxes": "onToogleAllCheckboxes"; "onToogleCheckbox": "onToogleCheckbox"; "onSelectAllRegisters": "onSelectAllRegisters"; "onOpenSearchModal": "onOpenSearchModal"; "onSearch": "onSearch"; }, never, ["*"], false, never>;
|
|
125
126
|
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { ElementRef, EventEmitter, Injector, OnChanges, OnDestroy, SimpleChanges, TemplateRef } from '@angular/core';
|
|
1
|
+
import { AfterViewInit, ElementRef, EventEmitter, Injector, OnChanges, OnDestroy, SimpleChanges, TemplateRef } from '@angular/core';
|
|
2
2
|
import { NgtStylizableDirective } from '../../../directives/ngt-stylizable/ngt-stylizable.directive';
|
|
3
3
|
import { NgtStylizableService } from '../../../services/ngt-stylizable/ngt-stylizable.service';
|
|
4
4
|
import { NgtInputComponent } from '../../forms/template-driven/ngt-input/ngt-input.component';
|
|
5
5
|
import { NgtDatatableComponent } from '../ngt-datatable.component';
|
|
6
6
|
import * as i0 from "@angular/core";
|
|
7
|
-
export declare class NgtThComponent implements OnChanges, OnDestroy {
|
|
7
|
+
export declare class NgtThComponent implements OnChanges, OnDestroy, AfterViewInit {
|
|
8
8
|
private injector;
|
|
9
9
|
private hostElement;
|
|
10
10
|
private ngtStylizableDirective;
|
|
@@ -33,6 +33,7 @@ export declare class NgtThComponent implements OnChanges, OnDestroy {
|
|
|
33
33
|
private subscriptions;
|
|
34
34
|
constructor(injector: Injector, hostElement: ElementRef, ngtStylizableDirective: NgtStylizableDirective, ngtDataTable: NgtDatatableComponent);
|
|
35
35
|
ngOnChanges(changes: SimpleChanges): void;
|
|
36
|
+
ngAfterViewInit(): void;
|
|
36
37
|
ngOnDestroy(): void;
|
|
37
38
|
sort(): Promise<void>;
|
|
38
39
|
enableSearch(event: any): void;
|
|
@@ -44,6 +45,7 @@ export declare class NgtThComponent implements OnChanges, OnDestroy {
|
|
|
44
45
|
private checkReference;
|
|
45
46
|
private getNextSortDirection;
|
|
46
47
|
private bindNgtStyle;
|
|
48
|
+
private applyHeadBgColor;
|
|
47
49
|
private destroySubscriptions;
|
|
48
50
|
static ɵfac: i0.ɵɵFactoryDeclaration<NgtThComponent, [null, null, { optional: true; self: true; }, { optional: true; skipSelf: true; }]>;
|
|
49
51
|
static ɵcmp: i0.ɵɵComponentDeclaration<NgtThComponent, "[ngt-th]", never, { "reference": { "alias": "reference"; "required": false; }; "sortReference": { "alias": "sortReference"; "required": false; }; "modalWidth": { "alias": "modalWidth"; "required": false; }; "searchModalOverflow": { "alias": "searchModalOverflow"; "required": false; }; "sortable": { "alias": "sortable"; "required": false; }; "searchable": { "alias": "searchable"; "required": false; }; "hasCustomSearch": { "alias": "hasCustomSearch"; "required": false; }; "searchLabel": { "alias": "searchLabel"; "required": false; }; "searchIcon": { "alias": "searchIcon"; "required": false; }; "sortableTooltip": { "alias": "sortableTooltip"; "required": false; }; }, { "onEnableSearch": "onEnableSearch"; }, never, ["*", "[customSearchHeader]", "[customSearch]"], false, never>;
|
|
@@ -1,13 +1,17 @@
|
|
|
1
|
-
import { ElementRef, Injector } from '@angular/core';
|
|
1
|
+
import { AfterViewInit, ElementRef, Injector } from '@angular/core';
|
|
2
2
|
import { NgtStylizableDirective } from '../../../directives/ngt-stylizable/ngt-stylizable.directive';
|
|
3
3
|
import { NgtStylizableService } from '../../../services/ngt-stylizable/ngt-stylizable.service';
|
|
4
|
+
import { NgtDatatableComponent } from '../ngt-datatable.component';
|
|
4
5
|
import * as i0 from "@angular/core";
|
|
5
|
-
export declare class NgtTheadComponent {
|
|
6
|
+
export declare class NgtTheadComponent implements AfterViewInit {
|
|
6
7
|
private injector;
|
|
7
8
|
private hostElement;
|
|
8
9
|
private ngtStylizableDirective;
|
|
10
|
+
private ngtDatatable;
|
|
9
11
|
ngtStyle: NgtStylizableService;
|
|
10
|
-
constructor(injector: Injector, hostElement: ElementRef, ngtStylizableDirective: NgtStylizableDirective);
|
|
11
|
-
|
|
12
|
+
constructor(injector: Injector, hostElement: ElementRef, ngtStylizableDirective: NgtStylizableDirective, ngtDatatable: NgtDatatableComponent);
|
|
13
|
+
ngAfterViewInit(): void;
|
|
14
|
+
private applyHeadBgColor;
|
|
15
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<NgtTheadComponent, [null, null, { optional: true; self: true; }, { optional: true; skipSelf: true; }]>;
|
|
12
16
|
static ɵcmp: i0.ɵɵComponentDeclaration<NgtTheadComponent, "[ngt-thead]", never, {}, {}, never, ["*"], false, never>;
|
|
13
17
|
}
|
package/fesm2022/ng-tailwind.mjs
CHANGED
|
@@ -24,7 +24,7 @@ import { NgxDropzonePreviewComponent, NgxDropzoneModule, NgxDropzoneComponent }
|
|
|
24
24
|
import * as i1$2 from '@angular/platform-browser';
|
|
25
25
|
import * as i2$2 from 'eloverde-doc-viewer';
|
|
26
26
|
import { EloverdeDocViewerModule, EloverdeDocViewerComponent } from 'eloverde-doc-viewer';
|
|
27
|
-
import { map } from 'rxjs/operators';
|
|
27
|
+
import { map, debounceTime, distinctUntilChanged } from 'rxjs/operators';
|
|
28
28
|
import Viewer from 'viewerjs';
|
|
29
29
|
|
|
30
30
|
class NgtTranslateService {
|
|
@@ -4610,7 +4610,7 @@ class NgtDatatableComponent {
|
|
|
4610
4610
|
this.subscriptions = [];
|
|
4611
4611
|
}
|
|
4612
4612
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgtDatatableComponent, deps: [{ token: i0.Injector }, { token: NgtHttpService }, { token: i0.ChangeDetectorRef }, { token: NgtTranslateService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4613
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NgtDatatableComponent, isStandalone: false, selector: "ngt-datatable", inputs: { remoteResource: "remoteResource", type: "type", filterTagBgColor: "filterTagBgColor", filterTagMargin: "filterTagMargin", paginationMargin: "paginationMargin", inputSearch: "inputSearch", searchDelay: "searchDelay", searchTermMinLength: "searchTermMinLength", searchTermOnEnter: "searchTermOnEnter", defaultFilters: "defaultFilters", filtersDescription: "filtersDescription", canSelectAllRegisters: "canSelectAllRegisters" }, outputs: { onDataChange: "onDataChange", onClearFilter: "onClearFilter", onClearSelectedElements: "onClearSelectedElements", onSelectedElementsChange: "onSelectedElementsChange", onToogleAllCheckboxes: "onToogleAllCheckboxes", onToogleCheckbox: "onToogleCheckbox", onSelectAllRegisters: "onSelectAllRegisters", onOpenSearchModal: "onOpenSearchModal", onSearch: "onSearch" }, viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true, static: true }, { propertyName: "ngtPagination", first: true, predicate: ["ngtPagination"], descendants: true, static: true }, { propertyName: "searchModal", first: true, predicate: ["searchModal"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"w-full\">\n <div class=\"flex flex-wrap w-full\">\n <ngt-tag *ngIf=\"hasAppliedFilters()\" class=\"w-full sm:w-auto {{ filterTagMargin }}\"\n [class.sm:mr-4]=\"filterTagMargin == 'mb-4'\" color.bg=\"bg-red-500\" (click)=\"removeFilter()\" ngt-stylizable>\n Limpar Filtros\n </ngt-tag>\n\n <ng-container *ngIf=\"hasAppliedFilters()\">\n <ng-container *ngFor=\"let filter of filtersTranslated\">\n <ngt-tag class=\"w-full sm:w-auto {{ filterTagMargin }}\" [class.sm:mr-4]=\"filterTagMargin == 'mb-4'\"\n [color.bg]=\"filterTagBgColor\" (click)=\"removeFilter(filter.reference)\" ngt-stylizable\n [title]=\"getTitle(filter)\">\n {{ filter.translation + ': ' + getTagFilterValue(filter) }}\n </ngt-tag>\n </ng-container>\n </ng-container>\n </div>\n\n <table style=\"display: table;\" class=\"text-left w-full border-collapse table-responsive\" #table>\n <ng-content></ng-content>\n </table>\n\n <p *ngIf=\"emptyStateVisible\" class=\"mt-8 mx-auto self-center text-center text-xl\">\n {{ ngtTranslateService.ngtDatatableNoDataFound }}\n </p>\n\n <div *ngIf=\"loading\">\n <div *ngFor=\"let i of [1, 2, 3, 4]\" class=\"flex w-full mt-3\">\n <ng-container *ngIf=\"columnCount.length >= 2\">\n <ng-container *ngFor=\"let j of columnCount; let last = last\">\n <ng-container *ngIf=\"last\">\n <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n </ng-container>\n\n <ng-container *ngIf=\"!last\">\n <ngt-shining class=\"h-10 w-full mr-10\"></ngt-shining>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"columnCount.length < 2\">\n <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n <ngt-shining class=\"h-10 w-full mr-10 ml-10\"></ngt-shining>\n <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n </ng-container>\n </div>\n </div>\n</div>\n\n<div class=\"clearfix {{ paginationMargin }}\" [hidden]='!data || data.length == 0'>\n <ngt-pagination [pagesInterval]='4' (onPageChange)='apply($event, false)' (onPerPageChange)='apply(1, false)'\n #ngtPagination>\n </ngt-pagination>\n</div>\n\n<ngt-modal [customLayout]=\"true\" [isDisabled]=\"false\" [ngtStyle]=\"filterModalStyle\" #searchModal>\n <ng-container *ngTemplateOutlet=\"searchModalTemplate\"></ng-container>\n</ngt-modal>", styles: ["@media (max-width: 767px){.table-responsive{display:block;position:relative;width:100%}.table-responsive thead,.table-responsive tbody,.table-responsive th,.table-responsive td,.table-responsive tr{display:block}.table-responsive td,.table-responsive th{height:50px}.table-responsive thead{float:left;margin-bottom:15px}.table-responsive tbody{width:auto;position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}.table-responsive tbody tr{display:inline-block;min-width:100%}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgtShiningComponent, selector: "ngt-shining", inputs: ["shiningWidth"] }, { kind: "component", type: NgtPaginationComponent, selector: "ngt-pagination", inputs: ["pagesInterval"], outputs: ["onPageChange", "onPerPageChange"] }, { kind: "component", type: NgtModalComponent, selector: "ngt-modal", inputs: ["customLayout", "disableDefaultCloses", "ngtStyle", "isDisabled"], outputs: ["onCloseModal", "onOpenModal"] }, { kind: "component", type: NgtTagComponent, selector: "ngt-tag", inputs: ["icon"] }, { kind: "directive", type: NgtStylizableDirective, selector: "[ngt-stylizable]", inputs: ["color", "color.text", "color.bg", "color.border", "h", "w", "p", "px", "py", "pt", "pr", "pb", "pl", "m", "mx", "my", "mt", "mr", "mb", "ml", "gap", "border", "shadow", "rounded", "font", "text", "breakWords", "overflow", "position", "justifyContent", "cursor", "fontCase"] }] }); }
|
|
4613
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NgtDatatableComponent, isStandalone: false, selector: "ngt-datatable", inputs: { remoteResource: "remoteResource", type: "type", filterTagBgColor: "filterTagBgColor", filterTagMargin: "filterTagMargin", paginationMargin: "paginationMargin", inputSearch: "inputSearch", searchDelay: "searchDelay", searchTermMinLength: "searchTermMinLength", searchTermOnEnter: "searchTermOnEnter", defaultFilters: "defaultFilters", filtersDescription: "filtersDescription", canSelectAllRegisters: "canSelectAllRegisters", headBgColor: "headBgColor" }, outputs: { onDataChange: "onDataChange", onClearFilter: "onClearFilter", onClearSelectedElements: "onClearSelectedElements", onSelectedElementsChange: "onSelectedElementsChange", onToogleAllCheckboxes: "onToogleAllCheckboxes", onToogleCheckbox: "onToogleCheckbox", onSelectAllRegisters: "onSelectAllRegisters", onOpenSearchModal: "onOpenSearchModal", onSearch: "onSearch" }, viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true, static: true }, { propertyName: "ngtPagination", first: true, predicate: ["ngtPagination"], descendants: true, static: true }, { propertyName: "searchModal", first: true, predicate: ["searchModal"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"w-full\">\n <div class=\"flex flex-wrap w-full\">\n <ngt-tag *ngIf=\"hasAppliedFilters()\" class=\"w-full sm:w-auto {{ filterTagMargin }}\"\n [class.sm:mr-4]=\"filterTagMargin == 'mb-4'\" color.bg=\"bg-red-500\" (click)=\"removeFilter()\" ngt-stylizable>\n Limpar Filtros\n </ngt-tag>\n\n <ng-container *ngIf=\"hasAppliedFilters()\">\n <ng-container *ngFor=\"let filter of filtersTranslated\">\n <ngt-tag class=\"w-full sm:w-auto {{ filterTagMargin }}\" [class.sm:mr-4]=\"filterTagMargin == 'mb-4'\"\n [color.bg]=\"filterTagBgColor\" (click)=\"removeFilter(filter.reference)\" ngt-stylizable\n [title]=\"getTitle(filter)\">\n {{ filter.translation + ': ' + getTagFilterValue(filter) }}\n </ngt-tag>\n </ng-container>\n </ng-container>\n </div>\n\n <table style=\"display: table;\" class=\"text-left w-full border-collapse table-responsive\" #table>\n <ng-content></ng-content>\n </table>\n\n <p *ngIf=\"emptyStateVisible\" class=\"mt-8 mx-auto self-center text-center text-xl\">\n {{ ngtTranslateService.ngtDatatableNoDataFound }}\n </p>\n\n <div *ngIf=\"loading\">\n <div *ngFor=\"let i of [1, 2, 3, 4]\" class=\"flex w-full mt-3\">\n <ng-container *ngIf=\"columnCount.length >= 2\">\n <ng-container *ngFor=\"let j of columnCount; let last = last\">\n <ng-container *ngIf=\"last\">\n <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n </ng-container>\n\n <ng-container *ngIf=\"!last\">\n <ngt-shining class=\"h-10 w-full mr-10\"></ngt-shining>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"columnCount.length < 2\">\n <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n <ngt-shining class=\"h-10 w-full mr-10 ml-10\"></ngt-shining>\n <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n </ng-container>\n </div>\n </div>\n</div>\n\n<div class=\"clearfix {{ paginationMargin }}\" [hidden]='!data || data.length == 0'>\n <ngt-pagination [pagesInterval]='4' (onPageChange)='apply($event, false)' (onPerPageChange)='apply(1, false)'\n #ngtPagination>\n </ngt-pagination>\n</div>\n\n<ngt-modal [customLayout]=\"true\" [isDisabled]=\"false\" [ngtStyle]=\"filterModalStyle\" #searchModal>\n <ng-container *ngTemplateOutlet=\"searchModalTemplate\"></ng-container>\n</ngt-modal>", styles: ["@media (max-width: 767px){.table-responsive{display:block;position:relative;width:100%}.table-responsive thead,.table-responsive tbody,.table-responsive th,.table-responsive td,.table-responsive tr{display:block}.table-responsive td,.table-responsive th{height:50px}.table-responsive thead{float:left;margin-bottom:15px}.table-responsive tbody{width:auto;position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}.table-responsive tbody tr{display:inline-block;min-width:100%}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgtShiningComponent, selector: "ngt-shining", inputs: ["shiningWidth"] }, { kind: "component", type: NgtPaginationComponent, selector: "ngt-pagination", inputs: ["pagesInterval"], outputs: ["onPageChange", "onPerPageChange"] }, { kind: "component", type: NgtModalComponent, selector: "ngt-modal", inputs: ["customLayout", "disableDefaultCloses", "ngtStyle", "isDisabled"], outputs: ["onCloseModal", "onOpenModal"] }, { kind: "component", type: NgtTagComponent, selector: "ngt-tag", inputs: ["icon"] }, { kind: "directive", type: NgtStylizableDirective, selector: "[ngt-stylizable]", inputs: ["color", "color.text", "color.bg", "color.border", "h", "w", "p", "px", "py", "pt", "pr", "pb", "pl", "m", "mx", "my", "mt", "mr", "mb", "ml", "gap", "border", "shadow", "rounded", "font", "text", "breakWords", "overflow", "position", "justifyContent", "cursor", "fontCase"] }] }); }
|
|
4614
4614
|
}
|
|
4615
4615
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgtDatatableComponent, decorators: [{
|
|
4616
4616
|
type: Component,
|
|
@@ -4650,6 +4650,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
4650
4650
|
type: Input
|
|
4651
4651
|
}], canSelectAllRegisters: [{
|
|
4652
4652
|
type: Input
|
|
4653
|
+
}], headBgColor: [{
|
|
4654
|
+
type: Input
|
|
4653
4655
|
}], onDataChange: [{
|
|
4654
4656
|
type: Output
|
|
4655
4657
|
}], onClearFilter: [{
|
|
@@ -5044,6 +5046,9 @@ class NgtThComponent {
|
|
|
5044
5046
|
this.ngtDataTable.setFilterDescription(this.reference, this.searchLabel);
|
|
5045
5047
|
}
|
|
5046
5048
|
}
|
|
5049
|
+
ngAfterViewInit() {
|
|
5050
|
+
this.applyHeadBgColor();
|
|
5051
|
+
}
|
|
5047
5052
|
ngOnDestroy() {
|
|
5048
5053
|
this.destroySubscriptions();
|
|
5049
5054
|
}
|
|
@@ -5170,6 +5175,18 @@ class NgtThComponent {
|
|
|
5170
5175
|
py: 'py-0'
|
|
5171
5176
|
});
|
|
5172
5177
|
}
|
|
5178
|
+
applyHeadBgColor() {
|
|
5179
|
+
const headBgColor = (this.ngtDataTable && this.ngtDataTable.headBgColor);
|
|
5180
|
+
if (headBgColor) {
|
|
5181
|
+
const element = this.hostElement.nativeElement;
|
|
5182
|
+
Array.from(element.classList).forEach((cls) => {
|
|
5183
|
+
if (cls.startsWith('bg-')) {
|
|
5184
|
+
element.classList.remove(cls);
|
|
5185
|
+
}
|
|
5186
|
+
});
|
|
5187
|
+
element.classList.add(headBgColor);
|
|
5188
|
+
}
|
|
5189
|
+
}
|
|
5173
5190
|
destroySubscriptions() {
|
|
5174
5191
|
this.subscriptions.forEach(subscription => subscription.unsubscribe());
|
|
5175
5192
|
this.subscriptions = [];
|
|
@@ -5219,10 +5236,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
5219
5236
|
}] } });
|
|
5220
5237
|
|
|
5221
5238
|
class NgtTheadComponent {
|
|
5222
|
-
constructor(injector, hostElement, ngtStylizableDirective) {
|
|
5239
|
+
constructor(injector, hostElement, ngtStylizableDirective, ngtDatatable) {
|
|
5223
5240
|
this.injector = injector;
|
|
5224
5241
|
this.hostElement = hostElement;
|
|
5225
5242
|
this.ngtStylizableDirective = ngtStylizableDirective;
|
|
5243
|
+
this.ngtDatatable = ngtDatatable;
|
|
5226
5244
|
if (this.ngtStylizableDirective) {
|
|
5227
5245
|
this.ngtStyle = this.ngtStylizableDirective.getNgtStylizableService();
|
|
5228
5246
|
}
|
|
@@ -5257,7 +5275,20 @@ class NgtTheadComponent {
|
|
|
5257
5275
|
'rounded'
|
|
5258
5276
|
]);
|
|
5259
5277
|
}
|
|
5260
|
-
|
|
5278
|
+
ngAfterViewInit() {
|
|
5279
|
+
this.applyHeadBgColor();
|
|
5280
|
+
}
|
|
5281
|
+
applyHeadBgColor() {
|
|
5282
|
+
const headBgColor = (this.ngtDatatable && this.ngtDatatable.headBgColor) || 'bg-gray-200';
|
|
5283
|
+
const element = this.hostElement.nativeElement;
|
|
5284
|
+
Array.from(element.classList).forEach((cls) => {
|
|
5285
|
+
if (cls.startsWith('bg-')) {
|
|
5286
|
+
element.classList.remove(cls);
|
|
5287
|
+
}
|
|
5288
|
+
});
|
|
5289
|
+
element.classList.add(headBgColor);
|
|
5290
|
+
}
|
|
5291
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgtTheadComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: NgtStylizableDirective, optional: true, self: true }, { token: NgtDatatableComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5261
5292
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NgtTheadComponent, isStandalone: false, selector: "[ngt-thead]", ngImport: i0, template: "<ng-content></ng-content>" }); }
|
|
5262
5293
|
}
|
|
5263
5294
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgtTheadComponent, decorators: [{
|
|
@@ -5267,6 +5298,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
5267
5298
|
type: Self
|
|
5268
5299
|
}, {
|
|
5269
5300
|
type: Optional
|
|
5301
|
+
}] }, { type: NgtDatatableComponent, decorators: [{
|
|
5302
|
+
type: SkipSelf
|
|
5303
|
+
}, {
|
|
5304
|
+
type: Optional
|
|
5270
5305
|
}] }] });
|
|
5271
5306
|
|
|
5272
5307
|
class NgtTrComponent {
|
|
@@ -8062,7 +8097,7 @@ class NgtMultiSelectComponent extends NgtControlValueAccessor {
|
|
|
8062
8097
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgtMultiSelectComponent, deps: [{ token: NgtHttpService }, { token: i0.ChangeDetectorRef }, { token: NgtFormComponent, optional: true, skipSelf: true }, { token: NgtSectionComponent, optional: true, skipSelf: true }, { token: NgtModalComponent, optional: true, skipSelf: true }, { token: NgtStylizableDirective, optional: true, self: true }, { token: i0.Injector }, { token: i2.ControlContainer, host: true, optional: true }, { token: NgtTranslateService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8063
8098
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NgtMultiSelectComponent, isStandalone: false, selector: "ngt-multi-select", inputs: { customOptionTemplate: "customOptionTemplate", customHeaderTemplate: "customHeaderTemplate", label: "label", helpTitle: "helpTitle", helpText: "helpText", helpTextColor: "helpTextColor", helperReverseYPosition: "helperReverseYPosition", helperAutoXReverse: "helperAutoXReverse", shining: "shining", loading: "loading", bindLabel: "bindLabel", bindSearch: "bindSearch", itemsPerPage: "itemsPerPage", name: "name", remoteResource: "remoteResource", items: "items", searchable: "searchable", allowOriginalItemsUnselect: "allowOriginalItemsUnselect", allowSelectAll: "allowSelectAll", allowDisplayOnlySelected: "allowDisplayOnlySelected", autoSelectUniqueOption: "autoSelectUniqueOption", isRequired: "isRequired", isDisabled: "isDisabled" }, outputs: { onDataChange: "onDataChange" }, host: { listeners: { "scroll": "onScroll($event)" } }, providers: [
|
|
8064
8099
|
NgtValueAccessorProvider(NgtMultiSelectComponent)
|
|
8065
|
-
], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true }, { propertyName: "inputSearch", first: true, predicate: ["inputSearch"], descendants: true }, { propertyName: "elementCheckboxTemplate", first: true, predicate: ["elementCheckboxTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<label *ngIf=\"label && !shining\" class=\"flex text-xs\" [class.mb-2]='!hasValidationErrors()'>\n <span class=\"truncate\" [title]=\"label\">\n {{ label }}:\n </span>\n\n <span *ngIf=\"isRequired\" class=\"text-red-500 font-bold text-xs ml-1\">*</span>\n\n <ngt-helper *ngIf=\"helpText\" [helpTitle]=\"helpTitle\" [iconColor]=\"helpTextColor\"\n [helperReverseYPosition]=\"helperReverseYPosition\" [autoXReverse]=\"helperAutoXReverse\" class=\"ml-1\">\n {{ helpText }}\n </ngt-helper>\n</label>\n\n<ngt-validation [hidden]='shining' class=\"block mb-1\" [control]='formControl' [container]='formContainer'>\n</ngt-validation>\n\n<div class=\"{{ shining ? 'hidden' : 'flex flex-col' }} border w-full rounded {{ ngtStyle.compile(['h']) }}\"\n style=\"min-height: 13rem;\" [class.border-red-500]='hasValidationErrors()' [class.disabled-background]='disabled()'>\n <div class=\"flex items-center w-full p-2 border-b\">\n <ngt-checkbox *ngIf=\"allowSelectAll\" class=\"flex\" title=\"Selecionar todos\" [isDisabled]='loading || disabled()'\n [label]=\"!searchable ? 'Selecionar todos' : ''\" [(ngModel)]=\"selectAllCheckbox\"\n [name]=\"selectAllCheckboxName\" [isClickDisabled]='true' h='h-4' w='w-4' (click)='selectAll()'\n ngt-stylizable>\n </ngt-checkbox>\n\n <ngt-input *ngIf=\"searchable\" class=\"block w-full\" [class.pl-2]=\"allowSelectAll\" [name]='searchInputName'\n [(ngModel)]='searchTerm' placeholder='Buscar...' [allowClear]='true' [jit]='true' h='h-10'\n (ngModelChange)='search($event)' [loading]='loading' [isDisabled]='disabled()' ngt-stylizable #inputSearch>\n </ngt-input>\n </div>\n\n <div *ngIf=\"loading\" class=\"flex flex-col gap-3 px-3 h-full w-full cursor-wait\">\n <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n </div>\n\n <div class=\"w-full overflow-y-auto text-xs {{ loading ? 'hidden' : 'flex flex-col' }}\" (scroll)='onScroll($event)'\n #containerRef>\n <ng-container *ngIf=\"customHeaderTemplate\" [ngTemplateOutlet]=\"customHeaderTemplate\">\n </ng-container>\n\n <ng-container *ngFor=\"let element of getSelectableElements(); let i = index\">\n <div class=\"flex w-full items-center hover:bg-gray-200 {{ disabled() ? 'cursor-not-allowed' : 'cursor-pointer' }}\"\n [class.p-2]='!customOptionTemplate' (click)='toggleItem(element, $event)'>\n <ng-template let-element #elementCheckboxTemplate>\n <ngt-checkbox class=\"flex pr-2\" [name]='element.uuid' [(ngModel)]=\"element.isSelected\"\n (ngModelChange)='onNativeChange(element)' [isClickDisabled]='true'\n [isDisabled]='!canSelectItem(element)' h='h-5' w='w-5' (click)='toggleItem(element, $event)'\n ngt-stylizable>\n </ngt-checkbox>\n </ng-template>\n\n <ng-template let-element #defaultOptionTemplate>\n {{ getSelectableElementValue(element) }}\n </ng-template>\n\n <ng-container *ngIf=\"!customOptionTemplate\" [ngTemplateOutlet]=\"elementCheckboxTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: element }\">\n </ng-container>\n\n <ng-container [ngTemplateOutlet]=\"customOptionTemplate || defaultOptionTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: element, index: i }\">\n </ng-container>\n </div>\n </ng-container>\n\n <p *ngIf=\"!getSelectableElements()?.length\" class=\"text-center mt-4\">\n {{ ngtTranslateService.ngtMultiSelectNoDataFound }}\n </p>\n </div>\n</div>\n\n<div *ngIf=\"allowDisplayOnlySelected\" class=\"{{ shining ? 'hidden' : 'flex' }} w-full items-center mt-2\">\n <span class=\"text-xs mr-4\">\n {{ selectedElements?.length || 0 }} / {{ itemsTotal || 0 }}\n </span>\n\n <ngt-checkbox class=\"flex\" label=\"Visualizar selecionados\" [name]='displayOnlySelectedName'\n [(ngModel)]=\"displayOnlySelected\" [isDisabled]='loading || disabled()' h='h-5' w='w-5' ngt-stylizable>\n </ngt-checkbox>\n</div>\n\n<ngt-shining *ngIf='shining' class=\"block w-full {{ ngtStyle.compile(['h']) }}\" style=\"min-height: 16rem;\"\n rounded='rounded' ngt-stylizable>\n</ngt-shining>\n\n<input *ngIf='componentReady' type='hidden' [ngModel]='value' [name]='name' [value]='value'>\n", styles: [".disabled-background{border:solid #cbd5e0 1px!important;background-color:#fafafa!important;border-radius:.25rem!important;padding:1px!important}.div-loader{width:4rem;height:4rem;border:3px solid #a0aec038;border-top-color:#a0aec0;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgtValidationComponent, selector: "ngt-validation", inputs: ["control", "container", "minValue", "minLength", "minItems"] }, { kind: "component", type: NgtShiningComponent, selector: "ngt-shining", inputs: ["shiningWidth"] }, { kind: "component", type: NgtHelperComponent, selector: "ngt-helper", inputs: ["helpTextColor", "helpText", "helpTitle", "icon", "iconSize", "iconColor", "iconTitle", "tooltipSize", "autoXReverse", "helperReverseYPosition"] }, { kind: "component", type: NgtInputComponent, selector: "ngt-input", inputs: ["label", "placeholder", "shining", "loading", "helpTitle", "helpTextColor", "helpText", "innerLeftIcon", "innerLeftIconColor", "innerRightIcon", "innerRightIconColor", "decimalMaskPrecision", "showCharactersLength", "uppercase", "customInnerContentTemplate", "helperReverseYPosition", "helperAutoXReverse", "isDisabled", "isReadonly", "showRoundedIcon", "type", "name", "mask", "focus", "allowClear", "jit", "useInputEvent", "findExistingResource", "allowPhoneValidation", "validatePassword", "passwordableId", "passwordPolicyId", "isRequired", "uniqueResource", "minValue", "maxValue", "maxLength", "minLength", "match", "multipleOf", "validateMinValueOnMask", "externalServerDependency", "customValidator"], outputs: ["onClickLeftIcon", "onClickRightIcon", "validatePhoneResult", "onValueChange"] }, { kind: "component", type: NgtCheckboxComponent, selector: "ngt-checkbox", inputs: ["label", "shining", "isDisabled", "isClickDisabled", "name", "mode", "helpTitle", "helpTextColor", "helpText", "helperAutoXReverse"] }, { kind: "directive", type: NgtStylizableDirective, selector: "[ngt-stylizable]", inputs: ["color", "color.text", "color.bg", "color.border", "h", "w", "p", "px", "py", "pt", "pr", "pb", "pl", "m", "mx", "my", "mt", "mr", "mb", "ml", "gap", "border", "shadow", "rounded", "font", "text", "breakWords", "overflow", "position", "justifyContent", "cursor", "fontCase"] }], viewProviders: [
|
|
8100
|
+
], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true }, { propertyName: "inputSearch", first: true, predicate: ["inputSearch"], descendants: true }, { propertyName: "elementCheckboxTemplate", first: true, predicate: ["elementCheckboxTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<label *ngIf=\"label && !shining\" class=\"flex text-xs\" [class.mb-2]='!hasValidationErrors()'>\n <span class=\"truncate\" [title]=\"label\">\n {{ label }}:\n </span>\n\n <span *ngIf=\"isRequired\" class=\"text-red-500 font-bold text-xs ml-1\">*</span>\n\n <ngt-helper *ngIf=\"helpText\" [helpTitle]=\"helpTitle\" [iconColor]=\"helpTextColor\"\n [helperReverseYPosition]=\"helperReverseYPosition\" [autoXReverse]=\"helperAutoXReverse\" class=\"ml-1\">\n {{ helpText }}\n </ngt-helper>\n</label>\n\n<ngt-validation [hidden]='shining' class=\"block mb-1\" [control]='formControl' [container]='formContainer'>\n</ngt-validation>\n\n<div class=\"{{ shining ? 'hidden' : 'flex flex-col' }} border w-full rounded {{ ngtStyle.compile(['h']) }}\"\n style=\"min-height: 13rem;\" [class.border-red-500]='hasValidationErrors()' [class.disabled-background]='disabled()'>\n <div *ngIf=\"allowSelectAll || searchable\" class=\"flex items-center w-full p-2 border-b\">\n <ngt-checkbox *ngIf=\"allowSelectAll\" class=\"flex\" title=\"Selecionar todos\" [isDisabled]='loading || disabled()'\n [label]=\"!searchable ? 'Selecionar todos' : ''\" [(ngModel)]=\"selectAllCheckbox\"\n [name]=\"selectAllCheckboxName\" [isClickDisabled]='true' h='h-4' w='w-4' (click)='selectAll()'\n ngt-stylizable>\n </ngt-checkbox>\n\n <ngt-input *ngIf=\"searchable\" class=\"block w-full\" [class.pl-2]=\"allowSelectAll\" [name]='searchInputName'\n [(ngModel)]='searchTerm' placeholder='Buscar...' [allowClear]='true' [jit]='true' h='h-10'\n (ngModelChange)='search($event)' [loading]='loading' [isDisabled]='disabled()' ngt-stylizable #inputSearch>\n </ngt-input>\n </div>\n\n <div *ngIf=\"loading\" class=\"flex flex-col gap-3 px-3 h-full w-full cursor-wait\">\n <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n </div>\n\n <div class=\"w-full overflow-y-auto text-xs {{ loading ? 'hidden' : 'flex flex-col' }}\" (scroll)='onScroll($event)'\n #containerRef>\n <ng-container *ngIf=\"customHeaderTemplate\" [ngTemplateOutlet]=\"customHeaderTemplate\">\n </ng-container>\n\n <ng-container *ngFor=\"let element of getSelectableElements(); let i = index\">\n <div class=\"flex w-full items-center hover:bg-gray-200 {{ disabled() ? 'cursor-not-allowed' : 'cursor-pointer' }}\"\n [class.p-2]='!customOptionTemplate' (click)='toggleItem(element, $event)'>\n <ng-template let-element #elementCheckboxTemplate>\n <ngt-checkbox class=\"flex pr-2\" [name]='element.uuid' [(ngModel)]=\"element.isSelected\"\n (ngModelChange)='onNativeChange(element)' [isClickDisabled]='true'\n [isDisabled]='!canSelectItem(element)' h='h-5' w='w-5' (click)='toggleItem(element, $event)'\n ngt-stylizable>\n </ngt-checkbox>\n </ng-template>\n\n <ng-template let-element #defaultOptionTemplate>\n {{ getSelectableElementValue(element) }}\n </ng-template>\n\n <ng-container *ngIf=\"!customOptionTemplate\" [ngTemplateOutlet]=\"elementCheckboxTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: element }\">\n </ng-container>\n\n <ng-container [ngTemplateOutlet]=\"customOptionTemplate || defaultOptionTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: element, index: i }\">\n </ng-container>\n </div>\n </ng-container>\n\n <p *ngIf=\"!getSelectableElements()?.length\" class=\"text-center mt-4\">\n {{ ngtTranslateService.ngtMultiSelectNoDataFound }}\n </p>\n </div>\n</div>\n\n<div *ngIf=\"allowDisplayOnlySelected\" class=\"{{ shining ? 'hidden' : 'flex' }} w-full items-center mt-2\">\n <span class=\"text-xs mr-4\">\n {{ selectedElements?.length || 0 }} / {{ itemsTotal || 0 }}\n </span>\n\n <ngt-checkbox class=\"flex\" label=\"Visualizar selecionados\" [name]='displayOnlySelectedName'\n [(ngModel)]=\"displayOnlySelected\" [isDisabled]='loading || disabled()' h='h-5' w='w-5' ngt-stylizable>\n </ngt-checkbox>\n</div>\n\n<ngt-shining *ngIf='shining' class=\"block w-full {{ ngtStyle.compile(['h']) }}\" style=\"min-height: 16rem;\"\n rounded='rounded' ngt-stylizable>\n</ngt-shining>\n\n<input *ngIf='componentReady' type='hidden' [ngModel]='value' [name]='name' [value]='value'>\n", styles: [".disabled-background{border:solid #cbd5e0 1px!important;background-color:#fafafa!important;border-radius:.25rem!important;padding:1px!important}.div-loader{width:4rem;height:4rem;border:3px solid #a0aec038;border-top-color:#a0aec0;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgtValidationComponent, selector: "ngt-validation", inputs: ["control", "container", "minValue", "minLength", "minItems"] }, { kind: "component", type: NgtShiningComponent, selector: "ngt-shining", inputs: ["shiningWidth"] }, { kind: "component", type: NgtHelperComponent, selector: "ngt-helper", inputs: ["helpTextColor", "helpText", "helpTitle", "icon", "iconSize", "iconColor", "iconTitle", "tooltipSize", "autoXReverse", "helperReverseYPosition"] }, { kind: "component", type: NgtInputComponent, selector: "ngt-input", inputs: ["label", "placeholder", "shining", "loading", "helpTitle", "helpTextColor", "helpText", "innerLeftIcon", "innerLeftIconColor", "innerRightIcon", "innerRightIconColor", "decimalMaskPrecision", "showCharactersLength", "uppercase", "customInnerContentTemplate", "helperReverseYPosition", "helperAutoXReverse", "isDisabled", "isReadonly", "showRoundedIcon", "type", "name", "mask", "focus", "allowClear", "jit", "useInputEvent", "findExistingResource", "allowPhoneValidation", "validatePassword", "passwordableId", "passwordPolicyId", "isRequired", "uniqueResource", "minValue", "maxValue", "maxLength", "minLength", "match", "multipleOf", "validateMinValueOnMask", "externalServerDependency", "customValidator"], outputs: ["onClickLeftIcon", "onClickRightIcon", "validatePhoneResult", "onValueChange"] }, { kind: "component", type: NgtCheckboxComponent, selector: "ngt-checkbox", inputs: ["label", "shining", "isDisabled", "isClickDisabled", "name", "mode", "helpTitle", "helpTextColor", "helpText", "helperAutoXReverse"] }, { kind: "directive", type: NgtStylizableDirective, selector: "[ngt-stylizable]", inputs: ["color", "color.text", "color.bg", "color.border", "h", "w", "p", "px", "py", "pt", "pr", "pb", "pl", "m", "mx", "my", "mt", "mr", "mb", "ml", "gap", "border", "shadow", "rounded", "font", "text", "breakWords", "overflow", "position", "justifyContent", "cursor", "fontCase"] }], viewProviders: [
|
|
8066
8101
|
{ provide: ControlContainer, useExisting: NgForm }
|
|
8067
8102
|
], encapsulation: i0.ViewEncapsulation.None }); }
|
|
8068
8103
|
}
|
|
@@ -8072,7 +8107,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
8072
8107
|
NgtValueAccessorProvider(NgtMultiSelectComponent)
|
|
8073
8108
|
], viewProviders: [
|
|
8074
8109
|
{ provide: ControlContainer, useExisting: NgForm }
|
|
8075
|
-
], standalone: false, template: "<label *ngIf=\"label && !shining\" class=\"flex text-xs\" [class.mb-2]='!hasValidationErrors()'>\n <span class=\"truncate\" [title]=\"label\">\n {{ label }}:\n </span>\n\n <span *ngIf=\"isRequired\" class=\"text-red-500 font-bold text-xs ml-1\">*</span>\n\n <ngt-helper *ngIf=\"helpText\" [helpTitle]=\"helpTitle\" [iconColor]=\"helpTextColor\"\n [helperReverseYPosition]=\"helperReverseYPosition\" [autoXReverse]=\"helperAutoXReverse\" class=\"ml-1\">\n {{ helpText }}\n </ngt-helper>\n</label>\n\n<ngt-validation [hidden]='shining' class=\"block mb-1\" [control]='formControl' [container]='formContainer'>\n</ngt-validation>\n\n<div class=\"{{ shining ? 'hidden' : 'flex flex-col' }} border w-full rounded {{ ngtStyle.compile(['h']) }}\"\n style=\"min-height: 13rem;\" [class.border-red-500]='hasValidationErrors()' [class.disabled-background]='disabled()'>\n <div class=\"flex items-center w-full p-2 border-b\">\n <ngt-checkbox *ngIf=\"allowSelectAll\" class=\"flex\" title=\"Selecionar todos\" [isDisabled]='loading || disabled()'\n [label]=\"!searchable ? 'Selecionar todos' : ''\" [(ngModel)]=\"selectAllCheckbox\"\n [name]=\"selectAllCheckboxName\" [isClickDisabled]='true' h='h-4' w='w-4' (click)='selectAll()'\n ngt-stylizable>\n </ngt-checkbox>\n\n <ngt-input *ngIf=\"searchable\" class=\"block w-full\" [class.pl-2]=\"allowSelectAll\" [name]='searchInputName'\n [(ngModel)]='searchTerm' placeholder='Buscar...' [allowClear]='true' [jit]='true' h='h-10'\n (ngModelChange)='search($event)' [loading]='loading' [isDisabled]='disabled()' ngt-stylizable #inputSearch>\n </ngt-input>\n </div>\n\n <div *ngIf=\"loading\" class=\"flex flex-col gap-3 px-3 h-full w-full cursor-wait\">\n <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n </div>\n\n <div class=\"w-full overflow-y-auto text-xs {{ loading ? 'hidden' : 'flex flex-col' }}\" (scroll)='onScroll($event)'\n #containerRef>\n <ng-container *ngIf=\"customHeaderTemplate\" [ngTemplateOutlet]=\"customHeaderTemplate\">\n </ng-container>\n\n <ng-container *ngFor=\"let element of getSelectableElements(); let i = index\">\n <div class=\"flex w-full items-center hover:bg-gray-200 {{ disabled() ? 'cursor-not-allowed' : 'cursor-pointer' }}\"\n [class.p-2]='!customOptionTemplate' (click)='toggleItem(element, $event)'>\n <ng-template let-element #elementCheckboxTemplate>\n <ngt-checkbox class=\"flex pr-2\" [name]='element.uuid' [(ngModel)]=\"element.isSelected\"\n (ngModelChange)='onNativeChange(element)' [isClickDisabled]='true'\n [isDisabled]='!canSelectItem(element)' h='h-5' w='w-5' (click)='toggleItem(element, $event)'\n ngt-stylizable>\n </ngt-checkbox>\n </ng-template>\n\n <ng-template let-element #defaultOptionTemplate>\n {{ getSelectableElementValue(element) }}\n </ng-template>\n\n <ng-container *ngIf=\"!customOptionTemplate\" [ngTemplateOutlet]=\"elementCheckboxTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: element }\">\n </ng-container>\n\n <ng-container [ngTemplateOutlet]=\"customOptionTemplate || defaultOptionTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: element, index: i }\">\n </ng-container>\n </div>\n </ng-container>\n\n <p *ngIf=\"!getSelectableElements()?.length\" class=\"text-center mt-4\">\n {{ ngtTranslateService.ngtMultiSelectNoDataFound }}\n </p>\n </div>\n</div>\n\n<div *ngIf=\"allowDisplayOnlySelected\" class=\"{{ shining ? 'hidden' : 'flex' }} w-full items-center mt-2\">\n <span class=\"text-xs mr-4\">\n {{ selectedElements?.length || 0 }} / {{ itemsTotal || 0 }}\n </span>\n\n <ngt-checkbox class=\"flex\" label=\"Visualizar selecionados\" [name]='displayOnlySelectedName'\n [(ngModel)]=\"displayOnlySelected\" [isDisabled]='loading || disabled()' h='h-5' w='w-5' ngt-stylizable>\n </ngt-checkbox>\n</div>\n\n<ngt-shining *ngIf='shining' class=\"block w-full {{ ngtStyle.compile(['h']) }}\" style=\"min-height: 16rem;\"\n rounded='rounded' ngt-stylizable>\n</ngt-shining>\n\n<input *ngIf='componentReady' type='hidden' [ngModel]='value' [name]='name' [value]='value'>\n", styles: [".disabled-background{border:solid #cbd5e0 1px!important;background-color:#fafafa!important;border-radius:.25rem!important;padding:1px!important}.div-loader{width:4rem;height:4rem;border:3px solid #a0aec038;border-top-color:#a0aec0;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
|
|
8110
|
+
], standalone: false, template: "<label *ngIf=\"label && !shining\" class=\"flex text-xs\" [class.mb-2]='!hasValidationErrors()'>\n <span class=\"truncate\" [title]=\"label\">\n {{ label }}:\n </span>\n\n <span *ngIf=\"isRequired\" class=\"text-red-500 font-bold text-xs ml-1\">*</span>\n\n <ngt-helper *ngIf=\"helpText\" [helpTitle]=\"helpTitle\" [iconColor]=\"helpTextColor\"\n [helperReverseYPosition]=\"helperReverseYPosition\" [autoXReverse]=\"helperAutoXReverse\" class=\"ml-1\">\n {{ helpText }}\n </ngt-helper>\n</label>\n\n<ngt-validation [hidden]='shining' class=\"block mb-1\" [control]='formControl' [container]='formContainer'>\n</ngt-validation>\n\n<div class=\"{{ shining ? 'hidden' : 'flex flex-col' }} border w-full rounded {{ ngtStyle.compile(['h']) }}\"\n style=\"min-height: 13rem;\" [class.border-red-500]='hasValidationErrors()' [class.disabled-background]='disabled()'>\n <div *ngIf=\"allowSelectAll || searchable\" class=\"flex items-center w-full p-2 border-b\">\n <ngt-checkbox *ngIf=\"allowSelectAll\" class=\"flex\" title=\"Selecionar todos\" [isDisabled]='loading || disabled()'\n [label]=\"!searchable ? 'Selecionar todos' : ''\" [(ngModel)]=\"selectAllCheckbox\"\n [name]=\"selectAllCheckboxName\" [isClickDisabled]='true' h='h-4' w='w-4' (click)='selectAll()'\n ngt-stylizable>\n </ngt-checkbox>\n\n <ngt-input *ngIf=\"searchable\" class=\"block w-full\" [class.pl-2]=\"allowSelectAll\" [name]='searchInputName'\n [(ngModel)]='searchTerm' placeholder='Buscar...' [allowClear]='true' [jit]='true' h='h-10'\n (ngModelChange)='search($event)' [loading]='loading' [isDisabled]='disabled()' ngt-stylizable #inputSearch>\n </ngt-input>\n </div>\n\n <div *ngIf=\"loading\" class=\"flex flex-col gap-3 px-3 h-full w-full cursor-wait\">\n <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n </div>\n\n <div class=\"w-full overflow-y-auto text-xs {{ loading ? 'hidden' : 'flex flex-col' }}\" (scroll)='onScroll($event)'\n #containerRef>\n <ng-container *ngIf=\"customHeaderTemplate\" [ngTemplateOutlet]=\"customHeaderTemplate\">\n </ng-container>\n\n <ng-container *ngFor=\"let element of getSelectableElements(); let i = index\">\n <div class=\"flex w-full items-center hover:bg-gray-200 {{ disabled() ? 'cursor-not-allowed' : 'cursor-pointer' }}\"\n [class.p-2]='!customOptionTemplate' (click)='toggleItem(element, $event)'>\n <ng-template let-element #elementCheckboxTemplate>\n <ngt-checkbox class=\"flex pr-2\" [name]='element.uuid' [(ngModel)]=\"element.isSelected\"\n (ngModelChange)='onNativeChange(element)' [isClickDisabled]='true'\n [isDisabled]='!canSelectItem(element)' h='h-5' w='w-5' (click)='toggleItem(element, $event)'\n ngt-stylizable>\n </ngt-checkbox>\n </ng-template>\n\n <ng-template let-element #defaultOptionTemplate>\n {{ getSelectableElementValue(element) }}\n </ng-template>\n\n <ng-container *ngIf=\"!customOptionTemplate\" [ngTemplateOutlet]=\"elementCheckboxTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: element }\">\n </ng-container>\n\n <ng-container [ngTemplateOutlet]=\"customOptionTemplate || defaultOptionTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: element, index: i }\">\n </ng-container>\n </div>\n </ng-container>\n\n <p *ngIf=\"!getSelectableElements()?.length\" class=\"text-center mt-4\">\n {{ ngtTranslateService.ngtMultiSelectNoDataFound }}\n </p>\n </div>\n</div>\n\n<div *ngIf=\"allowDisplayOnlySelected\" class=\"{{ shining ? 'hidden' : 'flex' }} w-full items-center mt-2\">\n <span class=\"text-xs mr-4\">\n {{ selectedElements?.length || 0 }} / {{ itemsTotal || 0 }}\n </span>\n\n <ngt-checkbox class=\"flex\" label=\"Visualizar selecionados\" [name]='displayOnlySelectedName'\n [(ngModel)]=\"displayOnlySelected\" [isDisabled]='loading || disabled()' h='h-5' w='w-5' ngt-stylizable>\n </ngt-checkbox>\n</div>\n\n<ngt-shining *ngIf='shining' class=\"block w-full {{ ngtStyle.compile(['h']) }}\" style=\"min-height: 16rem;\"\n rounded='rounded' ngt-stylizable>\n</ngt-shining>\n\n<input *ngIf='componentReady' type='hidden' [ngModel]='value' [name]='name' [value]='value'>\n", styles: [".disabled-background{border:solid #cbd5e0 1px!important;background-color:#fafafa!important;border-radius:.25rem!important;padding:1px!important}.div-loader{width:4rem;height:4rem;border:3px solid #a0aec038;border-top-color:#a0aec0;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
|
|
8076
8111
|
}], ctorParameters: () => [{ type: NgtHttpService }, { type: i0.ChangeDetectorRef }, { type: NgtFormComponent, decorators: [{
|
|
8077
8112
|
type: Optional
|
|
8078
8113
|
}, {
|
|
@@ -9793,7 +9828,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
9793
9828
|
}], ctorParameters: () => [{ type: NgtReactiveFormValidationService }] });
|
|
9794
9829
|
|
|
9795
9830
|
class NgtReactiveTextareaComponent extends NgtControlValueAccessor {
|
|
9796
|
-
constructor(ngtStylizableDirective, ngtReactiveForm, ngtSection, ngtModal, translateService, validationService,
|
|
9831
|
+
constructor(ngtStylizableDirective, ngtReactiveForm, ngtSection, ngtModal, translateService, validationService, changeDetector, ngZone, injector) {
|
|
9797
9832
|
super();
|
|
9798
9833
|
this.ngtStylizableDirective = ngtStylizableDirective;
|
|
9799
9834
|
this.ngtReactiveForm = ngtReactiveForm;
|
|
@@ -9801,7 +9836,8 @@ class NgtReactiveTextareaComponent extends NgtControlValueAccessor {
|
|
|
9801
9836
|
this.ngtModal = ngtModal;
|
|
9802
9837
|
this.translateService = translateService;
|
|
9803
9838
|
this.validationService = validationService;
|
|
9804
|
-
this.
|
|
9839
|
+
this.changeDetector = changeDetector;
|
|
9840
|
+
this.ngZone = ngZone;
|
|
9805
9841
|
this.injector = injector;
|
|
9806
9842
|
/** Visual Inputs */
|
|
9807
9843
|
this.label = input();
|
|
@@ -9833,6 +9869,8 @@ class NgtReactiveTextareaComponent extends NgtControlValueAccessor {
|
|
|
9833
9869
|
this.textareaClasses = computed(() => this.getTextareaClasses());
|
|
9834
9870
|
this.formControlHasErrors = signal(false);
|
|
9835
9871
|
this.formControlIsDirty = signal(false);
|
|
9872
|
+
this.inputSubject$ = new Subject();
|
|
9873
|
+
this.isUserTyping = false;
|
|
9836
9874
|
this.subscriptions = [];
|
|
9837
9875
|
this.listeners = [];
|
|
9838
9876
|
this.setupNgtStylizable();
|
|
@@ -9841,10 +9879,13 @@ class NgtReactiveTextareaComponent extends NgtControlValueAccessor {
|
|
|
9841
9879
|
ngAfterViewInit() {
|
|
9842
9880
|
this.formControl = this.getControl();
|
|
9843
9881
|
this.setupComponent();
|
|
9882
|
+
this.changeDetector.detach();
|
|
9844
9883
|
}
|
|
9845
9884
|
ngOnDestroy() {
|
|
9846
9885
|
this.destroySubscriptions();
|
|
9847
9886
|
this.destroyListeners();
|
|
9887
|
+
this.inputSubject$.complete();
|
|
9888
|
+
this.changeDetector.reattach();
|
|
9848
9889
|
}
|
|
9849
9890
|
onNativeChange() {
|
|
9850
9891
|
if (this.hasChangesBetweenValues()) {
|
|
@@ -9869,10 +9910,14 @@ class NgtReactiveTextareaComponent extends NgtControlValueAccessor {
|
|
|
9869
9910
|
setupComponent() {
|
|
9870
9911
|
this.setupValidators();
|
|
9871
9912
|
this.setupSubscriptions();
|
|
9913
|
+
this.setupListeners();
|
|
9872
9914
|
}
|
|
9873
9915
|
setupSubscriptions() {
|
|
9874
9916
|
if (this.formControl) {
|
|
9875
9917
|
this.subscriptions.push(this.formControl.events.subscribe((event) => {
|
|
9918
|
+
if (this.isUserTyping) {
|
|
9919
|
+
return;
|
|
9920
|
+
}
|
|
9876
9921
|
if (event instanceof TouchedChangeEvent) {
|
|
9877
9922
|
this.touched.set(event.touched);
|
|
9878
9923
|
}
|
|
@@ -9881,18 +9926,55 @@ class NgtReactiveTextareaComponent extends NgtControlValueAccessor {
|
|
|
9881
9926
|
}
|
|
9882
9927
|
this.formControlHasErrors.set(!!this.formControl?.errors);
|
|
9883
9928
|
this.formControlIsDirty.set(this.formControl?.dirty);
|
|
9929
|
+
if (event instanceof TouchedChangeEvent) {
|
|
9930
|
+
this.changeDetector.detectChanges();
|
|
9931
|
+
}
|
|
9884
9932
|
}));
|
|
9885
9933
|
}
|
|
9886
|
-
|
|
9887
|
-
|
|
9888
|
-
|
|
9889
|
-
|
|
9890
|
-
|
|
9891
|
-
|
|
9892
|
-
}
|
|
9934
|
+
this.subscriptions.push(this.inputSubject$
|
|
9935
|
+
.pipe(debounceTime(100), distinctUntilChanged())
|
|
9936
|
+
.subscribe(value => {
|
|
9937
|
+
this.isUserTyping = false;
|
|
9938
|
+
if (this.hasChangesBetweenValues()) {
|
|
9939
|
+
this.value = value;
|
|
9893
9940
|
}
|
|
9941
|
+
this.changeDetector.detectChanges();
|
|
9942
|
+
}));
|
|
9943
|
+
}
|
|
9944
|
+
setupListeners() {
|
|
9945
|
+
const textarea = this.textareaElement.nativeElement;
|
|
9946
|
+
this.ngZone.runOutsideAngular(() => {
|
|
9947
|
+
const inputHandler = (event) => {
|
|
9948
|
+
this.isUserTyping = true;
|
|
9949
|
+
const value = event.target.value;
|
|
9950
|
+
this.inputSubject$.next(value);
|
|
9951
|
+
};
|
|
9952
|
+
const keydownHandler = (event) => {
|
|
9953
|
+
const currentLength = event.target.value?.length || 0;
|
|
9954
|
+
if (currentLength >= this.maxLength()) {
|
|
9955
|
+
if (event.key !== 'Backspace' && event.key !== 'Delete') {
|
|
9956
|
+
event.preventDefault();
|
|
9957
|
+
return false;
|
|
9958
|
+
}
|
|
9959
|
+
}
|
|
9960
|
+
};
|
|
9961
|
+
const blurHandler = () => {
|
|
9962
|
+
this.isUserTyping = false;
|
|
9963
|
+
this.ngZone.run(() => {
|
|
9964
|
+
this.onTouched();
|
|
9965
|
+
this.changeDetector.detectChanges();
|
|
9966
|
+
});
|
|
9967
|
+
};
|
|
9968
|
+
const focusHandler = () => {
|
|
9969
|
+
// Prevent default CD
|
|
9970
|
+
};
|
|
9971
|
+
textarea.addEventListener('input', inputHandler, { passive: true });
|
|
9972
|
+
textarea.addEventListener('keydown', keydownHandler);
|
|
9973
|
+
textarea.addEventListener('blur', blurHandler);
|
|
9974
|
+
textarea.addEventListener('focus', focusHandler, { passive: true });
|
|
9975
|
+
this.listeners.push(() => textarea.removeEventListener('input', inputHandler), () => textarea.removeEventListener('keydown', keydownHandler), () => textarea.removeEventListener('blur', blurHandler), () => textarea.removeEventListener('focus', focusHandler));
|
|
9894
9976
|
});
|
|
9895
|
-
this.
|
|
9977
|
+
this.changeDetector.detectChanges();
|
|
9896
9978
|
}
|
|
9897
9979
|
registerEffects() {
|
|
9898
9980
|
effect(() => {
|
|
@@ -9900,7 +9982,10 @@ class NgtReactiveTextareaComponent extends NgtControlValueAccessor {
|
|
|
9900
9982
|
setTimeout(() => this.setFocus());
|
|
9901
9983
|
}
|
|
9902
9984
|
});
|
|
9903
|
-
effect(() =>
|
|
9985
|
+
effect(() => {
|
|
9986
|
+
this.setupValidators();
|
|
9987
|
+
this.changeDetector.detectChanges();
|
|
9988
|
+
});
|
|
9904
9989
|
}
|
|
9905
9990
|
setupValidators() {
|
|
9906
9991
|
if (!this.formControl) {
|
|
@@ -9974,11 +10059,11 @@ class NgtReactiveTextareaComponent extends NgtControlValueAccessor {
|
|
|
9974
10059
|
this.listeners.forEach(unlisten => unlisten());
|
|
9975
10060
|
this.listeners = [];
|
|
9976
10061
|
}
|
|
9977
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgtReactiveTextareaComponent, deps: [{ token: NgtStylizableDirective, optional: true, self: true }, { token: NgtReactiveFormComponent, optional: true, skipSelf: true }, { token: NgtSectionComponent, optional: true, skipSelf: true }, { token: NgtModalComponent, optional: true, skipSelf: true }, { token: NgtTranslateService, optional: true }, { token: NgtReactiveTextareaValidationService }, { token: i0.
|
|
10062
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgtReactiveTextareaComponent, deps: [{ token: NgtStylizableDirective, optional: true, self: true }, { token: NgtReactiveFormComponent, optional: true, skipSelf: true }, { token: NgtSectionComponent, optional: true, skipSelf: true }, { token: NgtModalComponent, optional: true, skipSelf: true }, { token: NgtTranslateService, optional: true }, { token: NgtReactiveTextareaValidationService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9978
10063
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: NgtReactiveTextareaComponent, isStandalone: true, selector: "ngt-reactive-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, helpTitle: { classPropertyName: "helpTitle", publicName: "helpTitle", isSignal: true, isRequired: false, transformFunction: null }, helpText: { classPropertyName: "helpText", publicName: "helpText", isSignal: true, isRequired: false, transformFunction: null }, helpTextColor: { classPropertyName: "helpTextColor", publicName: "helpTextColor", isSignal: true, isRequired: false, transformFunction: null }, showCharactersLength: { classPropertyName: "showCharactersLength", publicName: "showCharactersLength", isSignal: true, isRequired: false, transformFunction: null }, shining: { classPropertyName: "shining", publicName: "shining", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, focus: { classPropertyName: "focus", publicName: "focus", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "isRequired", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, customSyncValidators: { classPropertyName: "customSyncValidators", publicName: "customSyncValidators", isSignal: true, isRequired: false, transformFunction: null }, customAsyncValidators: { classPropertyName: "customAsyncValidators", publicName: "customAsyncValidators", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onValueChange: "onValueChange" }, providers: [
|
|
9979
10064
|
NgtValueAccessorProvider(NgtReactiveTextareaComponent),
|
|
9980
10065
|
NgtReactiveTextareaValidationService,
|
|
9981
|
-
], viewQueries: [{ propertyName: "textareaElement", first: true, predicate: ["textareaElement"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "@if (label() && !isShining()) {\n <label class=\"flex mb-2 {{ ngtStyle.compile(['text', 'font', 'color.text']) }}\">\n <span class=\"truncate\" [title]=\"label()\">\n {{ label() }}:\n </span>\n\n @if (isRequired()) {\n <span class=\"text-red-500 font-bold text-md ml-1\">*</span>\n }\n\n @if (helpText()) {\n <ngt-helper [helpTitle]=\"helpTitle()\" [iconColor]=\"helpTextColor()\" class=\"ml-1\">\n {{ helpText() }}\n </ngt-helper>\n }\n </label>\n}\n\n<div [class]=\"isShining() ? 'hidden' : 'flex flex-col'\">\n <textarea [class]=\"textareaClasses()\" autocomplete=\"new-password\" [rows]=\"rows()\" [disabled]=\"isDisabledState()\"\n [readonly]=\"isReadonly()\" [placeholder]=\"placeholder()\"
|
|
10066
|
+
], viewQueries: [{ propertyName: "textareaElement", first: true, predicate: ["textareaElement"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "@if (label() && !isShining()) {\n <label class=\"flex mb-2 {{ ngtStyle.compile(['text', 'font', 'color.text']) }}\">\n <span class=\"truncate\" [title]=\"label()\">\n {{ label() }}:\n </span>\n\n @if (isRequired()) {\n <span class=\"text-red-500 font-bold text-md ml-1\">*</span>\n }\n\n @if (helpText()) {\n <ngt-helper [helpTitle]=\"helpTitle()\" [iconColor]=\"helpTextColor()\" class=\"ml-1\">\n {{ helpText() }}\n </ngt-helper>\n }\n </label>\n}\n\n<div [class]=\"isShining() ? 'hidden' : 'flex flex-col'\">\n <textarea [class]=\"textareaClasses()\" autocomplete=\"new-password\" [rows]=\"rows()\" [disabled]=\"isDisabledState()\"\n [readonly]=\"isReadonly()\" [placeholder]=\"placeholder()\" #textareaElement></textarea>\n\n @if (showCharactersLength() && remainingCharacters() !== null) {\n <p class=\"text-xxs mt-1\">\n {{ getTranslation('ngtTextAreaRemainingCharacters') }}:\n <span class=\"font-semibold\">{{ remainingCharacters() }}</span>\n </p>\n }\n</div>\n\n@if (isShining()) {\n <div class=\"flex\">\n <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n </div>\n}\n\n<ng-content></ng-content>\n\n<ngt-validation [control]=\"formControl\" [minLength]=\"minLength()\"></ngt-validation>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NgtShiningModule }, { kind: "component", type: NgtShiningComponent, selector: "ngt-shining", inputs: ["shiningWidth"] }, { kind: "ngmodule", type: NgtValidationModule }, { kind: "component", type: NgtValidationComponent, selector: "ngt-validation", inputs: ["control", "container", "minValue", "minLength", "minItems"] }, { kind: "component", type: NgtHelperComponent, selector: "ngt-helper", inputs: ["helpTextColor", "helpText", "helpTitle", "icon", "iconSize", "iconColor", "iconTitle", "tooltipSize", "autoXReverse", "helperReverseYPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9982
10067
|
}
|
|
9983
10068
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgtReactiveTextareaComponent, decorators: [{
|
|
9984
10069
|
type: Component,
|
|
@@ -9991,7 +10076,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
9991
10076
|
NgtShiningModule,
|
|
9992
10077
|
NgtValidationModule,
|
|
9993
10078
|
NgtHelperComponent,
|
|
9994
|
-
], template: "@if (label() && !isShining()) {\n <label class=\"flex mb-2 {{ ngtStyle.compile(['text', 'font', 'color.text']) }}\">\n <span class=\"truncate\" [title]=\"label()\">\n {{ label() }}:\n </span>\n\n @if (isRequired()) {\n <span class=\"text-red-500 font-bold text-md ml-1\">*</span>\n }\n\n @if (helpText()) {\n <ngt-helper [helpTitle]=\"helpTitle()\" [iconColor]=\"helpTextColor()\" class=\"ml-1\">\n {{ helpText() }}\n </ngt-helper>\n }\n </label>\n}\n\n<div [class]=\"isShining() ? 'hidden' : 'flex flex-col'\">\n <textarea [class]=\"textareaClasses()\" autocomplete=\"new-password\" [rows]=\"rows()\" [disabled]=\"isDisabledState()\"\n [readonly]=\"isReadonly()\" [placeholder]=\"placeholder()\"
|
|
10079
|
+
], template: "@if (label() && !isShining()) {\n <label class=\"flex mb-2 {{ ngtStyle.compile(['text', 'font', 'color.text']) }}\">\n <span class=\"truncate\" [title]=\"label()\">\n {{ label() }}:\n </span>\n\n @if (isRequired()) {\n <span class=\"text-red-500 font-bold text-md ml-1\">*</span>\n }\n\n @if (helpText()) {\n <ngt-helper [helpTitle]=\"helpTitle()\" [iconColor]=\"helpTextColor()\" class=\"ml-1\">\n {{ helpText() }}\n </ngt-helper>\n }\n </label>\n}\n\n<div [class]=\"isShining() ? 'hidden' : 'flex flex-col'\">\n <textarea [class]=\"textareaClasses()\" autocomplete=\"new-password\" [rows]=\"rows()\" [disabled]=\"isDisabledState()\"\n [readonly]=\"isReadonly()\" [placeholder]=\"placeholder()\" #textareaElement></textarea>\n\n @if (showCharactersLength() && remainingCharacters() !== null) {\n <p class=\"text-xxs mt-1\">\n {{ getTranslation('ngtTextAreaRemainingCharacters') }}:\n <span class=\"font-semibold\">{{ remainingCharacters() }}</span>\n </p>\n }\n</div>\n\n@if (isShining()) {\n <div class=\"flex\">\n <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n </div>\n}\n\n<ng-content></ng-content>\n\n<ngt-validation [control]=\"formControl\" [minLength]=\"minLength()\"></ngt-validation>" }]
|
|
9995
10080
|
}], ctorParameters: () => [{ type: NgtStylizableDirective, decorators: [{
|
|
9996
10081
|
type: Optional
|
|
9997
10082
|
}, {
|
|
@@ -10010,7 +10095,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
10010
10095
|
type: SkipSelf
|
|
10011
10096
|
}] }, { type: NgtTranslateService, decorators: [{
|
|
10012
10097
|
type: Optional
|
|
10013
|
-
}] }, { type: NgtReactiveTextareaValidationService }, { type: i0.
|
|
10098
|
+
}] }, { type: NgtReactiveTextareaValidationService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Injector }], propDecorators: { textareaElement: [{
|
|
10014
10099
|
type: ViewChild,
|
|
10015
10100
|
args: ['textareaElement', { static: true }]
|
|
10016
10101
|
}] } });
|