ng-tailwind 5.1.24 → 5.2.0
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/ngt-datatable/ngt-datatable.component.d.ts +2 -0
- package/components/ngt-datatable/ngt-datatable.module.d.ts +2 -1
- package/components/ngt-datatable/ngt-th/ngt-th.component.d.ts +4 -1
- package/components/ngt-modal/ngt-modal-body/ngt-modal-body.component.d.ts +9 -4
- package/components/ngt-modal/ngt-modal-header/ngt-modal-header.component.d.ts +1 -1
- package/esm2020/components/ngt-datatable/ngt-datatable.component.mjs +13 -3
- package/esm2020/components/ngt-datatable/ngt-datatable.module.mjs +8 -4
- package/esm2020/components/ngt-datatable/ngt-th/ngt-th.component.mjs +16 -3
- package/esm2020/components/ngt-modal/ngt-modal-body/ngt-modal-body.component.mjs +29 -9
- package/esm2020/components/ngt-modal/ngt-modal-header/ngt-modal-header.component.mjs +6 -4
- package/esm2020/components/ngt-modal/ngt-modal.component.mjs +3 -3
- package/esm2020/components/ngt-section/ngt-section.component.mjs +4 -3
- package/fesm2015/ng-tailwind.mjs +65 -20
- package/fesm2015/ng-tailwind.mjs.map +1 -1
- package/fesm2020/ng-tailwind.mjs +65 -20
- package/fesm2020/ng-tailwind.mjs.map +1 -1
- package/package.json +1 -1
package/fesm2020/ng-tailwind.mjs
CHANGED
|
@@ -1242,6 +1242,7 @@ class NgtSectionComponent {
|
|
|
1242
1242
|
h: 'h-12',
|
|
1243
1243
|
w: 'w-12',
|
|
1244
1244
|
my: 'my-1',
|
|
1245
|
+
mb: 'mb-6',
|
|
1245
1246
|
pr: 'pr-1',
|
|
1246
1247
|
px: 'md:px-5',
|
|
1247
1248
|
border: 'border-b-4 md:border-b-0 border-dashed md:border-solid md:border-l',
|
|
@@ -1306,7 +1307,7 @@ class NgtSectionComponent {
|
|
|
1306
1307
|
}
|
|
1307
1308
|
}
|
|
1308
1309
|
NgtSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtSectionComponent, deps: [{ token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: NgtStylizableDirective, optional: true, self: true }, { token: NgtAbilityValidationService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
1309
|
-
NgtSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtSectionComponent, selector: "ngt-section", inputs: { name: "name", icon: "icon", caption: "caption", subtitle: "subtitle", accordion: "accordion", showSection: "showSection", removable: "removable", helpTitle: "helpTitle", helpText: "helpText", helpIconColor: "helpIconColor", isDisabled: "isDisabled" }, outputs: { onRemove: "onRemove", onToggleSection: "onToggleSection" }, viewQueries: [{ propertyName: "elementRef", first: true, predicate: ["elementRef"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"canDisplay\" class=\"flex mb
|
|
1310
|
+
NgtSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtSectionComponent, selector: "ngt-section", inputs: { name: "name", icon: "icon", caption: "caption", subtitle: "subtitle", accordion: "accordion", showSection: "showSection", removable: "removable", helpTitle: "helpTitle", helpText: "helpText", helpIconColor: "helpIconColor", isDisabled: "isDisabled" }, outputs: { onRemove: "onRemove", onToggleSection: "onToggleSection" }, viewQueries: [{ propertyName: "elementRef", first: true, predicate: ["elementRef"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"canDisplay\" class=\"flex {{ ngtSectionStyle.compile(['mb']) }}\" #elementRef>\n <ngt-svg *ngIf=\"icon\" [src]='icon'\n class=\"hidden md:block {{ ngtSectionStyle.compile(['color.text', 'h', 'w', 'my', 'pr']) }}\">\n </ngt-svg>\n\n <div\n class=\"w-full pb-4 md:pb-0 {{ accordion && !showSection ? 'flex' : '' }} {{ ngtSectionStyle.compile(['border']) }}\">\n <div *ngIf=\"!accordion && caption\" class=\"flex\">\n <span class=\"pl-5 {{ ngtCaptionStyle.compile(['color.text', 'color.border', 'text', 'border', 'font']) }}\">\n {{ caption }}\n </span>\n\n <span *ngIf=\"subtitle\"\n class=\"self-center {{ ngtSubtitleStyle.compile(['color.text', 'color.border', 'text', 'border', 'font', 'ml']) }}\">\n {{ subtitle }}\n </span>\n\n <ngt-helper *ngIf=\"helpText\" [helpTitle]=\"helpTitle\" class=\"ml-1 hover:opacity-100 opacity-100\"\n [iconColor]=\"helpIconColor\">\n {{ helpText }}\n </ngt-helper>\n </div>\n\n <ng-container *ngIf=\"accordion\">\n <div class=\"flex flex-wrap items-center cursor-pointer {{ helpText ? '' : 'hover:opacity-75' }} {{ accordion && showSection ? ngtCaptionStyle.compile(['pb', 'px']) : ngtCaptionStyle.compile(['py', 'px']) }}\"\n (click)='toggle()' style=\"max-width: fit-content;\">\n <div *ngIf=\"!showSection\"\n class=\"flex {{ ngtCaptionStyle.compile(['color.text', 'color.border', 'text', 'border', 'font']) }}\">\n <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M2.82 4.59l9.18 9.16 9.18 -9.16 2.82 2.82 -12 12 -12 -12 2.82 -2.82z\" />\n </svg>\n </div>\n\n <div *ngIf=\"showSection\"\n class=\"flex {{ ngtCaptionStyle.compile(['color.text', 'color.border', 'text', 'border', 'font']) }}\">\n <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M2.82 19.41l9.18 -9.16 9.18 9.16 2.82 -2.82 -12 -12 -12 12 2.82 2.82z\" />\n </svg>\n </div>\n\n <span [class]=\"ngtCaptionStyle.compile(['color.text', 'color.border', 'text', 'border', 'font', 'ml'])\">\n {{ caption }}\n </span>\n\n <span *ngIf=\"subtitle\"\n [class]=\"ngtSubtitleStyle.compile(['color.text', 'color.border', 'text', 'border', 'font', 'ml'])\">\n {{ subtitle }}\n </span>\n\n <ngt-helper *ngIf=\"helpText\" [helpTitle]=\"helpTitle\" class=\"ml-1\" [iconColor]=\"helpIconColor\"\n class=\"ml-1 hover:opacity-100 opacity-100\">\n {{ helpText }}\n </ngt-helper>\n\n <div *ngIf=\"removable\"\n class=\"flex items-center justify-center h-6 w-6 ml-2 rounded-full hover:bg-red-500 hover:text-white text-gray-600 text-sm\"\n (click)='remove($event)'>\n <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M4 21.33c0,1.47 1.2,2.67 2.67,2.67l10.66 0c1.47,0 2.67,-1.2 2.67,-2.67l0 -16 -16 0 0 16zm17.33 -20l-4.66 0 -1.34 -1.33 -6.66 0 -1.34 1.33 -4.66 0 0 2.67 18.66 0 0 -2.67z\" />\n </svg>\n </div>\n </div>\n </ng-container>\n\n <div *ngIf='showSection' class=\"{{ ngtSectionStyle.compile(['px', 'pl']) }}\" [@enterAnimation]='!showSection'>\n <fieldset [disabled]=\"isDisabled\" style=\"min-inline-size: 100% !important\">\n <ng-content></ng-content>\n </fieldset>\n </div>\n </div>\n</div>", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgtSvgComponent, selector: "ngt-svg", inputs: ["src", "class"] }, { kind: "component", type: NgtHelperComponent, selector: "ngt-helper", inputs: ["helpTextColor", "helpText", "helpTitle", "icon", "iconSize", "iconColor", "iconTitle", "tooltipSize", "autoXReverse", "helperReverseYPosition"] }], animations: [
|
|
1310
1311
|
trigger('enterAnimation', [
|
|
1311
1312
|
state('void', style({ transform: 'translateY(-20px)', opacity: 0 })),
|
|
1312
1313
|
transition(':enter', [
|
|
@@ -1323,7 +1324,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
|
|
|
1323
1324
|
animate(400)
|
|
1324
1325
|
])
|
|
1325
1326
|
]),
|
|
1326
|
-
], template: "<div *ngIf=\"canDisplay\" class=\"flex mb
|
|
1327
|
+
], template: "<div *ngIf=\"canDisplay\" class=\"flex {{ ngtSectionStyle.compile(['mb']) }}\" #elementRef>\n <ngt-svg *ngIf=\"icon\" [src]='icon'\n class=\"hidden md:block {{ ngtSectionStyle.compile(['color.text', 'h', 'w', 'my', 'pr']) }}\">\n </ngt-svg>\n\n <div\n class=\"w-full pb-4 md:pb-0 {{ accordion && !showSection ? 'flex' : '' }} {{ ngtSectionStyle.compile(['border']) }}\">\n <div *ngIf=\"!accordion && caption\" class=\"flex\">\n <span class=\"pl-5 {{ ngtCaptionStyle.compile(['color.text', 'color.border', 'text', 'border', 'font']) }}\">\n {{ caption }}\n </span>\n\n <span *ngIf=\"subtitle\"\n class=\"self-center {{ ngtSubtitleStyle.compile(['color.text', 'color.border', 'text', 'border', 'font', 'ml']) }}\">\n {{ subtitle }}\n </span>\n\n <ngt-helper *ngIf=\"helpText\" [helpTitle]=\"helpTitle\" class=\"ml-1 hover:opacity-100 opacity-100\"\n [iconColor]=\"helpIconColor\">\n {{ helpText }}\n </ngt-helper>\n </div>\n\n <ng-container *ngIf=\"accordion\">\n <div class=\"flex flex-wrap items-center cursor-pointer {{ helpText ? '' : 'hover:opacity-75' }} {{ accordion && showSection ? ngtCaptionStyle.compile(['pb', 'px']) : ngtCaptionStyle.compile(['py', 'px']) }}\"\n (click)='toggle()' style=\"max-width: fit-content;\">\n <div *ngIf=\"!showSection\"\n class=\"flex {{ ngtCaptionStyle.compile(['color.text', 'color.border', 'text', 'border', 'font']) }}\">\n <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M2.82 4.59l9.18 9.16 9.18 -9.16 2.82 2.82 -12 12 -12 -12 2.82 -2.82z\" />\n </svg>\n </div>\n\n <div *ngIf=\"showSection\"\n class=\"flex {{ ngtCaptionStyle.compile(['color.text', 'color.border', 'text', 'border', 'font']) }}\">\n <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M2.82 19.41l9.18 -9.16 9.18 9.16 2.82 -2.82 -12 -12 -12 12 2.82 2.82z\" />\n </svg>\n </div>\n\n <span [class]=\"ngtCaptionStyle.compile(['color.text', 'color.border', 'text', 'border', 'font', 'ml'])\">\n {{ caption }}\n </span>\n\n <span *ngIf=\"subtitle\"\n [class]=\"ngtSubtitleStyle.compile(['color.text', 'color.border', 'text', 'border', 'font', 'ml'])\">\n {{ subtitle }}\n </span>\n\n <ngt-helper *ngIf=\"helpText\" [helpTitle]=\"helpTitle\" class=\"ml-1\" [iconColor]=\"helpIconColor\"\n class=\"ml-1 hover:opacity-100 opacity-100\">\n {{ helpText }}\n </ngt-helper>\n\n <div *ngIf=\"removable\"\n class=\"flex items-center justify-center h-6 w-6 ml-2 rounded-full hover:bg-red-500 hover:text-white text-gray-600 text-sm\"\n (click)='remove($event)'>\n <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M4 21.33c0,1.47 1.2,2.67 2.67,2.67l10.66 0c1.47,0 2.67,-1.2 2.67,-2.67l0 -16 -16 0 0 16zm17.33 -20l-4.66 0 -1.34 -1.33 -6.66 0 -1.34 1.33 -4.66 0 0 2.67 18.66 0 0 -2.67z\" />\n </svg>\n </div>\n </div>\n </ng-container>\n\n <div *ngIf='showSection' class=\"{{ ngtSectionStyle.compile(['px', 'pl']) }}\" [@enterAnimation]='!showSection'>\n <fieldset [disabled]=\"isDisabled\" style=\"min-inline-size: 100% !important\">\n <ng-content></ng-content>\n </fieldset>\n </div>\n </div>\n</div>" }]
|
|
1327
1328
|
}], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: NgtStylizableDirective, decorators: [{
|
|
1328
1329
|
type: Self
|
|
1329
1330
|
}, {
|
|
@@ -1368,7 +1369,7 @@ class NgtModalHeaderComponent {
|
|
|
1368
1369
|
if (this.tailStylizableDirective) {
|
|
1369
1370
|
this.ngtStyle = this.tailStylizableDirective.getNgtStylizableService();
|
|
1370
1371
|
}
|
|
1371
|
-
else {
|
|
1372
|
+
else if (!this.ngtStyle) {
|
|
1372
1373
|
this.ngtStyle = new NgtStylizableService();
|
|
1373
1374
|
}
|
|
1374
1375
|
this.ngtStyle.load(this.injector, 'NgtModalHeader', {
|
|
@@ -1382,22 +1383,36 @@ class NgtModalHeaderComponent {
|
|
|
1382
1383
|
}
|
|
1383
1384
|
NgtModalHeaderComponent.onCloseModalByHeader = new EventEmitter();
|
|
1384
1385
|
NgtModalHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtModalHeaderComponent, deps: [{ token: i0.Injector }, { token: NgtStylizableDirective, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
1385
|
-
NgtModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtModalHeaderComponent, selector: "ngt-modal-header", inputs: { disableDefaultCloses: "disableDefaultCloses" }, ngImport: i0, template: "<div\n class=\"flex w-full items-center {{ ngtStyle.compile(['px', 'py', 'pb', 'pt', 'pl', 'pr', 'mx', 'my', 'mb', 'mt', 'ml', 'mr']) }}\">\n <ng-content></ng-content>\n
|
|
1386
|
+
NgtModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtModalHeaderComponent, selector: "ngt-modal-header", inputs: { disableDefaultCloses: "disableDefaultCloses", ngtStyle: "ngtStyle" }, ngImport: i0, template: "<div\n class=\"flex w-full items-center {{ ngtStyle.compile(['px', 'py', 'pb', 'pt', 'pl', 'pr', 'mx', 'my', 'mb', 'mt', 'ml', 'mr', 'color.bg', 'color.text']) }}\">\n <ng-content></ng-content>\n\n <ng-container *ngIf=\"!disableDefaultCloses\">\n <div class=\"cursor-pointer z-50 absolute right-0 mr-3\" (click)='emitOnCloseEvent()'>\n <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\">\n <path\n d=\"M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z\">\n </path>\n </svg>\n </div>\n </ng-container>\n</div>", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
1386
1387
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtModalHeaderComponent, decorators: [{
|
|
1387
1388
|
type: Component,
|
|
1388
|
-
args: [{ selector: 'ngt-modal-header', template: "<div\n class=\"flex w-full items-center {{ ngtStyle.compile(['px', 'py', 'pb', 'pt', 'pl', 'pr', 'mx', 'my', 'mb', 'mt', 'ml', 'mr']) }}\">\n <ng-content></ng-content>\n
|
|
1389
|
+
args: [{ selector: 'ngt-modal-header', template: "<div\n class=\"flex w-full items-center {{ ngtStyle.compile(['px', 'py', 'pb', 'pt', 'pl', 'pr', 'mx', 'my', 'mb', 'mt', 'ml', 'mr', 'color.bg', 'color.text']) }}\">\n <ng-content></ng-content>\n\n <ng-container *ngIf=\"!disableDefaultCloses\">\n <div class=\"cursor-pointer z-50 absolute right-0 mr-3\" (click)='emitOnCloseEvent()'>\n <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\">\n <path\n d=\"M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z\">\n </path>\n </svg>\n </div>\n </ng-container>\n</div>" }]
|
|
1389
1390
|
}], ctorParameters: function () { return [{ type: i0.Injector }, { type: NgtStylizableDirective, decorators: [{
|
|
1390
1391
|
type: Self
|
|
1391
1392
|
}, {
|
|
1392
1393
|
type: Optional
|
|
1393
1394
|
}] }]; }, propDecorators: { disableDefaultCloses: [{
|
|
1394
1395
|
type: Input
|
|
1396
|
+
}], ngtStyle: [{
|
|
1397
|
+
type: Input
|
|
1395
1398
|
}] } });
|
|
1396
1399
|
|
|
1397
1400
|
class NgtModalBodyComponent {
|
|
1398
|
-
constructor(changeDetector, ngtAbilityValidationService) {
|
|
1401
|
+
constructor(injector, changeDetector, tailStylizableDirective, ngtAbilityValidationService) {
|
|
1402
|
+
this.injector = injector;
|
|
1399
1403
|
this.changeDetector = changeDetector;
|
|
1404
|
+
this.tailStylizableDirective = tailStylizableDirective;
|
|
1400
1405
|
this.ngtAbilityValidationService = ngtAbilityValidationService;
|
|
1406
|
+
if (this.tailStylizableDirective) {
|
|
1407
|
+
this.ngtStyle = this.tailStylizableDirective.getNgtStylizableService();
|
|
1408
|
+
}
|
|
1409
|
+
else if (!this.ngtStyle) {
|
|
1410
|
+
this.ngtStyle = new NgtStylizableService();
|
|
1411
|
+
}
|
|
1412
|
+
this.ngtStyle.load(this.injector, 'NgtModalBody', {
|
|
1413
|
+
px: 'px-0',
|
|
1414
|
+
py: 'py-0'
|
|
1415
|
+
});
|
|
1401
1416
|
}
|
|
1402
1417
|
async ngAfterViewInit() {
|
|
1403
1418
|
if (this.isDisabled === undefined && this.ngtAbilityValidationService) {
|
|
@@ -1406,14 +1421,20 @@ class NgtModalBodyComponent {
|
|
|
1406
1421
|
}
|
|
1407
1422
|
}
|
|
1408
1423
|
}
|
|
1409
|
-
NgtModalBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtModalBodyComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: NgtAbilityValidationService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
1410
|
-
NgtModalBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtModalBodyComponent, selector: "ngt-modal-body", inputs: { isDisabled: "isDisabled" }, ngImport: i0, template: "<fieldset [disabled]=\"isDisabled\" style=\"min-inline-size: 100% !important\">\n
|
|
1424
|
+
NgtModalBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtModalBodyComponent, deps: [{ token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: NgtStylizableDirective, optional: true, self: true }, { token: NgtAbilityValidationService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
1425
|
+
NgtModalBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtModalBodyComponent, selector: "ngt-modal-body", inputs: { ngtStyle: "ngtStyle", isDisabled: "isDisabled" }, ngImport: i0, template: "<div class=\"flex flex-col w-full {{ ngtStyle.compile(['px', 'py']) }}\">\n <fieldset [disabled]=\"isDisabled\" style=\"min-inline-size: 100% !important\">\n <ng-content></ng-content>\n </fieldset>\n</div>" });
|
|
1411
1426
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtModalBodyComponent, decorators: [{
|
|
1412
1427
|
type: Component,
|
|
1413
|
-
args: [{ selector: 'ngt-modal-body', template: "<fieldset [disabled]=\"isDisabled\" style=\"min-inline-size: 100% !important\">\n
|
|
1414
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type:
|
|
1428
|
+
args: [{ selector: 'ngt-modal-body', template: "<div class=\"flex flex-col w-full {{ ngtStyle.compile(['px', 'py']) }}\">\n <fieldset [disabled]=\"isDisabled\" style=\"min-inline-size: 100% !important\">\n <ng-content></ng-content>\n </fieldset>\n</div>" }]
|
|
1429
|
+
}], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: NgtStylizableDirective, decorators: [{
|
|
1430
|
+
type: Self
|
|
1431
|
+
}, {
|
|
1432
|
+
type: Optional
|
|
1433
|
+
}] }, { type: NgtAbilityValidationService, decorators: [{
|
|
1415
1434
|
type: Optional
|
|
1416
|
-
}] }]; }, propDecorators: {
|
|
1435
|
+
}] }]; }, propDecorators: { ngtStyle: [{
|
|
1436
|
+
type: Input
|
|
1437
|
+
}], isDisabled: [{
|
|
1417
1438
|
type: Input
|
|
1418
1439
|
}] } });
|
|
1419
1440
|
|
|
@@ -1443,7 +1464,7 @@ class NgtModalComponent {
|
|
|
1443
1464
|
if (this.tailStylizableDirective) {
|
|
1444
1465
|
this.ngtStyle = this.tailStylizableDirective.getNgtStylizableService();
|
|
1445
1466
|
}
|
|
1446
|
-
else {
|
|
1467
|
+
else if (!this.ngtStyle) {
|
|
1447
1468
|
this.ngtStyle = new NgtStylizableService();
|
|
1448
1469
|
}
|
|
1449
1470
|
this.ngtStyle.load(this.injector, 'NgtModal', {
|
|
@@ -1499,7 +1520,7 @@ class NgtModalComponent {
|
|
|
1499
1520
|
}
|
|
1500
1521
|
}
|
|
1501
1522
|
NgtModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtModalComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: NgtStylizableDirective, optional: true, self: true }, { token: NgtAbilityValidationService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
1502
|
-
NgtModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtModalComponent, selector: "ngt-modal", inputs: { customLayout: "customLayout", disableDefaultCloses: "disableDefaultCloses", isDisabled: "isDisabled", ngtStyle: "ngtStyle" }, outputs: { onCloseModal: "onCloseModal", onOpenModal: "onOpenModal" }, ngImport: i0, template: "<div class=\"flex min-w-full relative justify-center text-gray-700\">\n <div *ngIf=\"isOpen\" class=\"flex fixed min-w-full h-full inset-0 px-6 py-6 md:py-0 md:px-0 justify-center\"\n style=\"background: rgba(0,0,0,.7); z-index: 1100 !important;\" @fade>\n <ng-container *ngIf=\"!disableDefaultCloses\">\n <button class=\"fixed inset-0 h-full w-full bg-black opacity-0 cursor-default z-0\" tabindex=\"-1\"\n type=\"button\" (click)='close()'>\n </button>\n </ng-container>\n\n <div class=\"{{ ngtStyle.compile(['w', 'overflow', 'border']) }} relative bg-white w-full self-center rounded shadow-lg z-10\"\n style=\"max-height: 85%;\">\n <div class=\"cursor-default text-left {{ ngtStyle.compile(['py', 'px']) }}\">\n <div *ngIf=\"!customLayout\">\n <ngt-modal-header class=\"w-full\" [disableDefaultCloses]=\"disableDefaultCloses\">\n <ng-content select='[header]'></ng-content>\n </ngt-modal-header>\n </div>\n\n <ng-container *ngIf=\"!customLayout\">\n <fieldset [disabled]=\"isDisabled\" style=\"min-inline-size: 100% !important\">\n <ngt-modal-body [isDisabled]=\"isDisabled\">\n <ng-content select='[body]'></ng-content>\n </ngt-modal-body>\n </fieldset>\n </ng-container>\n\n <!--Footer-->\n <ng-container *ngIf=\"!customLayout\">\n <ngt-modal-footer>\n <ng-content select='[footer]'></ng-content>\n </ngt-modal-footer>\n </ng-container>\n\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n</div>", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgtModalHeaderComponent, selector: "ngt-modal-header", inputs: ["disableDefaultCloses"] }, { kind: "component", type: NgtModalBodyComponent, selector: "ngt-modal-body", inputs: ["isDisabled"] }, { kind: "component", type: NgtModalFooterComponent, selector: "ngt-modal-footer" }], animations: [
|
|
1523
|
+
NgtModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtModalComponent, selector: "ngt-modal", inputs: { customLayout: "customLayout", disableDefaultCloses: "disableDefaultCloses", isDisabled: "isDisabled", ngtStyle: "ngtStyle" }, outputs: { onCloseModal: "onCloseModal", onOpenModal: "onOpenModal" }, ngImport: i0, template: "<div class=\"flex min-w-full relative justify-center text-gray-700\">\n <div *ngIf=\"isOpen\" class=\"flex fixed min-w-full h-full inset-0 px-6 py-6 md:py-0 md:px-0 justify-center\"\n style=\"background: rgba(0,0,0,.7); z-index: 1100 !important;\" @fade>\n <ng-container *ngIf=\"!disableDefaultCloses\">\n <button class=\"fixed inset-0 h-full w-full bg-black opacity-0 cursor-default z-0\" tabindex=\"-1\"\n type=\"button\" (click)='close()'>\n </button>\n </ng-container>\n\n <div class=\"{{ ngtStyle.compile(['w', 'overflow', 'border']) }} relative bg-white w-full self-center rounded shadow-lg z-10\"\n style=\"max-height: 85%;\">\n <div class=\"cursor-default text-left {{ ngtStyle.compile(['py', 'px']) }}\">\n <div *ngIf=\"!customLayout\">\n <ngt-modal-header class=\"w-full\" [disableDefaultCloses]=\"disableDefaultCloses\">\n <ng-content select='[header]'></ng-content>\n </ngt-modal-header>\n </div>\n\n <ng-container *ngIf=\"!customLayout\">\n <fieldset [disabled]=\"isDisabled\" style=\"min-inline-size: 100% !important\">\n <ngt-modal-body [isDisabled]=\"isDisabled\">\n <ng-content select='[body]'></ng-content>\n </ngt-modal-body>\n </fieldset>\n </ng-container>\n\n <!--Footer-->\n <ng-container *ngIf=\"!customLayout\">\n <ngt-modal-footer>\n <ng-content select='[footer]'></ng-content>\n </ngt-modal-footer>\n </ng-container>\n\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n</div>", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgtModalHeaderComponent, selector: "ngt-modal-header", inputs: ["disableDefaultCloses", "ngtStyle"] }, { kind: "component", type: NgtModalBodyComponent, selector: "ngt-modal-body", inputs: ["ngtStyle", "isDisabled"] }, { kind: "component", type: NgtModalFooterComponent, selector: "ngt-modal-footer" }], animations: [
|
|
1503
1524
|
trigger('fade', [
|
|
1504
1525
|
state('void', style({ opacity: 0 })),
|
|
1505
1526
|
transition(':enter, :leave', [
|
|
@@ -4001,6 +4022,7 @@ class NgtDatatableComponent {
|
|
|
4001
4022
|
this.filtersTranslated = [];
|
|
4002
4023
|
this.columnCount = [];
|
|
4003
4024
|
this.selectedElements = [];
|
|
4025
|
+
this.filterModalStyle = new NgtStylizableService();
|
|
4004
4026
|
this.subscriptions = [];
|
|
4005
4027
|
this.currentState = {
|
|
4006
4028
|
filters: {
|
|
@@ -4013,6 +4035,14 @@ class NgtDatatableComponent {
|
|
|
4013
4035
|
direction: ''
|
|
4014
4036
|
}
|
|
4015
4037
|
};
|
|
4038
|
+
this.filterModalStyle.load(this.injector, 'FilterModal', {
|
|
4039
|
+
w: 'md:max-w-md',
|
|
4040
|
+
py: 'py-4',
|
|
4041
|
+
px: 'px-6',
|
|
4042
|
+
border: 'border border-teal-500',
|
|
4043
|
+
overflow: 'overflow-visible',
|
|
4044
|
+
color: {}
|
|
4045
|
+
});
|
|
4016
4046
|
}
|
|
4017
4047
|
ngOnInit() {
|
|
4018
4048
|
if (this.table && this.table.nativeElement && this.table.nativeElement.rows
|
|
@@ -4338,10 +4368,10 @@ class NgtDatatableComponent {
|
|
|
4338
4368
|
}
|
|
4339
4369
|
}
|
|
4340
4370
|
NgtDatatableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtDatatableComponent, deps: [{ token: i0.Injector }, { token: NgtHttpService }, { token: i0.ChangeDetectorRef }, { token: NgtTranslateService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
4341
|
-
NgtDatatableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtDatatableComponent, 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]
|
|
4371
|
+
NgtDatatableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtDatatableComponent, 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.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: "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", "isDisabled", "ngtStyle"], 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", "border", "shadow", "rounded", "font", "text", "breakWords", "overflow", "position", "justifyContent", "cursor", "fontCase"] }] });
|
|
4342
4372
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtDatatableComponent, decorators: [{
|
|
4343
4373
|
type: Component,
|
|
4344
|
-
args: [{ selector: 'ngt-datatable', 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]
|
|
4374
|
+
args: [{ selector: 'ngt-datatable', 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"] }]
|
|
4345
4375
|
}], ctorParameters: function () { return [{ type: i0.Injector }, { type: NgtHttpService }, { type: i0.ChangeDetectorRef }, { type: NgtTranslateService, decorators: [{
|
|
4346
4376
|
type: Optional
|
|
4347
4377
|
}] }]; }, propDecorators: { table: [{
|
|
@@ -4768,6 +4798,8 @@ class NgtThComponent {
|
|
|
4768
4798
|
this.inputFocused = false;
|
|
4769
4799
|
this.isCurrentSort = false;
|
|
4770
4800
|
this.sortDirection = '';
|
|
4801
|
+
this.filterModalHeaderStyle = new NgtStylizableService();
|
|
4802
|
+
this.filterModalBodyStyle = new NgtStylizableService();
|
|
4771
4803
|
this.subscriptions = [];
|
|
4772
4804
|
if (this.checkDataTable()) {
|
|
4773
4805
|
this.subscriptions.push(this.ngtDataTable.onDataChange.subscribe(() => {
|
|
@@ -4907,6 +4939,14 @@ class NgtThComponent {
|
|
|
4907
4939
|
'text',
|
|
4908
4940
|
'font',
|
|
4909
4941
|
]);
|
|
4942
|
+
this.filterModalHeaderStyle.load(this.injector, 'FilterModalHeader', {
|
|
4943
|
+
pb: 'pb-3',
|
|
4944
|
+
color: {}
|
|
4945
|
+
});
|
|
4946
|
+
this.filterModalBodyStyle.load(this.injector, 'FilterModalBody', {
|
|
4947
|
+
px: 'px-0',
|
|
4948
|
+
py: 'py-0'
|
|
4949
|
+
});
|
|
4910
4950
|
}
|
|
4911
4951
|
destroySubscriptions() {
|
|
4912
4952
|
this.subscriptions.forEach(subscription => subscription.unsubscribe());
|
|
@@ -4914,10 +4954,10 @@ class NgtThComponent {
|
|
|
4914
4954
|
}
|
|
4915
4955
|
}
|
|
4916
4956
|
NgtThComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtThComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: NgtStylizableDirective, optional: true, self: true }, { token: NgtDatatableComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
4917
|
-
NgtThComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtThComponent, selector: "[ngt-th]", inputs: { reference: "reference", sortReference: "sortReference", modalWidth: "modalWidth", searchModalOverflow: "searchModalOverflow", sortable: "sortable", searchable: "searchable", hasCustomSearch: "hasCustomSearch", searchLabel: "searchLabel", sortableTooltip: "sortableTooltip" }, outputs: { onEnableSearch: "onEnableSearch" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "modal", first: true, predicate: ["modal"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex items-center w-full {{ ngtStyle.compile(['justifyContent']) }}\" [title]=\"getTooltip()\" (click)='sort()'\n [class.cursor-pointer]='sortable'>\n <ng-content></ng-content>\n <ng-container *ngIf='sortable && isCurrentSort'>\n <svg *ngIf=\"sortDirection == 'asc'\" class=\"fill-current self-center cursor-pointer ml-1\"\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path d=\"M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z\" />\n </svg>\n\n <svg *ngIf=\"sortDirection == 'desc'\" class=\"fill-current self-center cursor-pointer ml-1\"\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path d=\"M10.707 7.05L10 6.343 4.343 12l1.414 1.414L10 9.172l4.243 4.242L15.657 12z\" />\n </svg>\n </ng-container>\n\n <ng-container *ngIf='searchable'>\n <div (click)='enableSearch($event)' class=\"float-right ml-2\" title=\"Filtrar\">\n <ngt-action class=\"text-lg\" h='h-6' w='w-6' [forceEnable]=\"true\" ngt-stylizable>\n <svg class=\"fill-current self-center\" viewBox=\"0 0 1792 1792\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M1595 295q17 41-14 70l-493 493v742q0 42-39 59-13 5-25 5-27 0-45-19l-256-256q-19-19-19-45V858L211 365q-31-29-14-70 17-39 59-39h1280q42 0 59 39z\" />\n </svg>\n </ngt-action>\n </div>\n </ng-container>\n</div>\n\n<ng-template #modal>\n <ngt-modal-header [disableDefaultCloses]=\"ngtDataTable.searchModal.disableDefaultCloses\"\n (onClose)=\"ngtDataTable.searchModal.close()\">\n <span *ngIf=\"searchLabel\" class=\"font-semibold text-
|
|
4957
|
+
NgtThComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtThComponent, selector: "[ngt-th]", inputs: { reference: "reference", sortReference: "sortReference", modalWidth: "modalWidth", searchModalOverflow: "searchModalOverflow", sortable: "sortable", searchable: "searchable", hasCustomSearch: "hasCustomSearch", searchLabel: "searchLabel", searchIcon: "searchIcon", sortableTooltip: "sortableTooltip" }, outputs: { onEnableSearch: "onEnableSearch" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "modal", first: true, predicate: ["modal"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex items-center w-full {{ ngtStyle.compile(['justifyContent']) }}\" [title]=\"getTooltip()\" (click)='sort()'\n [class.cursor-pointer]='sortable'>\n <ng-content></ng-content>\n <ng-container *ngIf='sortable && isCurrentSort'>\n <svg *ngIf=\"sortDirection == 'asc'\" class=\"fill-current self-center cursor-pointer ml-1\"\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path d=\"M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z\" />\n </svg>\n\n <svg *ngIf=\"sortDirection == 'desc'\" class=\"fill-current self-center cursor-pointer ml-1\"\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path d=\"M10.707 7.05L10 6.343 4.343 12l1.414 1.414L10 9.172l4.243 4.242L15.657 12z\" />\n </svg>\n </ng-container>\n\n <ng-container *ngIf='searchable'>\n <div (click)='enableSearch($event)' class=\"float-right ml-2\" title=\"Filtrar\">\n <ngt-action class=\"text-lg\" h='h-6' w='w-6' [forceEnable]=\"true\" ngt-stylizable>\n <svg class=\"fill-current self-center\" viewBox=\"0 0 1792 1792\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M1595 295q17 41-14 70l-493 493v742q0 42-39 59-13 5-25 5-27 0-45-19l-256-256q-19-19-19-45V858L211 365q-31-29-14-70 17-39 59-39h1280q42 0 59 39z\" />\n </svg>\n </ngt-action>\n </div>\n </ng-container>\n</div>\n\n<ng-template #modal>\n <ngt-modal-header [disableDefaultCloses]=\"ngtDataTable.searchModal.disableDefaultCloses\"\n [ngtStyle]=\"filterModalHeaderStyle\" (onClose)=\"ngtDataTable.searchModal.close()\">\n <ngt-svg *ngIf=\"searchIcon\" [src]=\"searchIcon\" class=\"text-sm\">\n </ngt-svg>\n\n <svg *ngIf=\"!searchIcon\" class=\"fill-current self-center text-sm\" viewBox=\"0 0 12 12\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.0042 6.84417L11.8042 2.04417V-0.355835H-0.195801V2.04417L4.6042 6.84417V11.6442L7.0042 9.24417V6.84417Z\" />\n </svg>\n\n <span *ngIf=\"searchLabel\" class=\"font-semibold text-sm ml-2\">\n {{ searchLabel }}\n </span>\n\n <ng-content select='[customSearchHeader]'></ng-content>\n </ngt-modal-header>\n\n <ngt-modal-body [isDisabled]=\"false\" [ngtStyle]=\"filterModalBodyStyle\">\n <ngt-input *ngIf=\"!hasCustomSearch\" jit='true' [(ngModel)]='searchTerm' (ngModelChange)='search($event)'\n placeholder='Pesquisar...' name='{{ reference }}_filter' #searchInput>\n </ngt-input>\n\n <div [hidden]='!hasCustomSearch'>\n <ng-content select='[customSearch]'></ng-content>\n </div>\n </ngt-modal-body>\n</ng-template>", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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"] }, { kind: "component", type: NgtModalHeaderComponent, selector: "ngt-modal-header", inputs: ["disableDefaultCloses", "ngtStyle"] }, { kind: "component", type: NgtModalBodyComponent, selector: "ngt-modal-body", inputs: ["ngtStyle", "isDisabled"] }, { kind: "component", type: NgtActionComponent, selector: "ngt-action", inputs: ["href", "icon", "ngtStyle", "isDisabled", "forceEnable"] }, { 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", "border", "shadow", "rounded", "font", "text", "breakWords", "overflow", "position", "justifyContent", "cursor", "fontCase"] }, { kind: "component", type: NgtSvgComponent, selector: "ngt-svg", inputs: ["src", "class"] }] });
|
|
4918
4958
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtThComponent, decorators: [{
|
|
4919
4959
|
type: Component,
|
|
4920
|
-
args: [{ selector: '[ngt-th]', template: "<div class=\"flex items-center w-full {{ ngtStyle.compile(['justifyContent']) }}\" [title]=\"getTooltip()\" (click)='sort()'\n [class.cursor-pointer]='sortable'>\n <ng-content></ng-content>\n <ng-container *ngIf='sortable && isCurrentSort'>\n <svg *ngIf=\"sortDirection == 'asc'\" class=\"fill-current self-center cursor-pointer ml-1\"\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path d=\"M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z\" />\n </svg>\n\n <svg *ngIf=\"sortDirection == 'desc'\" class=\"fill-current self-center cursor-pointer ml-1\"\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path d=\"M10.707 7.05L10 6.343 4.343 12l1.414 1.414L10 9.172l4.243 4.242L15.657 12z\" />\n </svg>\n </ng-container>\n\n <ng-container *ngIf='searchable'>\n <div (click)='enableSearch($event)' class=\"float-right ml-2\" title=\"Filtrar\">\n <ngt-action class=\"text-lg\" h='h-6' w='w-6' [forceEnable]=\"true\" ngt-stylizable>\n <svg class=\"fill-current self-center\" viewBox=\"0 0 1792 1792\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M1595 295q17 41-14 70l-493 493v742q0 42-39 59-13 5-25 5-27 0-45-19l-256-256q-19-19-19-45V858L211 365q-31-29-14-70 17-39 59-39h1280q42 0 59 39z\" />\n </svg>\n </ngt-action>\n </div>\n </ng-container>\n</div>\n\n<ng-template #modal>\n <ngt-modal-header [disableDefaultCloses]=\"ngtDataTable.searchModal.disableDefaultCloses\"\n (onClose)=\"ngtDataTable.searchModal.close()\">\n <span *ngIf=\"searchLabel\" class=\"font-semibold text-
|
|
4960
|
+
args: [{ selector: '[ngt-th]', template: "<div class=\"flex items-center w-full {{ ngtStyle.compile(['justifyContent']) }}\" [title]=\"getTooltip()\" (click)='sort()'\n [class.cursor-pointer]='sortable'>\n <ng-content></ng-content>\n <ng-container *ngIf='sortable && isCurrentSort'>\n <svg *ngIf=\"sortDirection == 'asc'\" class=\"fill-current self-center cursor-pointer ml-1\"\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path d=\"M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z\" />\n </svg>\n\n <svg *ngIf=\"sortDirection == 'desc'\" class=\"fill-current self-center cursor-pointer ml-1\"\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path d=\"M10.707 7.05L10 6.343 4.343 12l1.414 1.414L10 9.172l4.243 4.242L15.657 12z\" />\n </svg>\n </ng-container>\n\n <ng-container *ngIf='searchable'>\n <div (click)='enableSearch($event)' class=\"float-right ml-2\" title=\"Filtrar\">\n <ngt-action class=\"text-lg\" h='h-6' w='w-6' [forceEnable]=\"true\" ngt-stylizable>\n <svg class=\"fill-current self-center\" viewBox=\"0 0 1792 1792\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M1595 295q17 41-14 70l-493 493v742q0 42-39 59-13 5-25 5-27 0-45-19l-256-256q-19-19-19-45V858L211 365q-31-29-14-70 17-39 59-39h1280q42 0 59 39z\" />\n </svg>\n </ngt-action>\n </div>\n </ng-container>\n</div>\n\n<ng-template #modal>\n <ngt-modal-header [disableDefaultCloses]=\"ngtDataTable.searchModal.disableDefaultCloses\"\n [ngtStyle]=\"filterModalHeaderStyle\" (onClose)=\"ngtDataTable.searchModal.close()\">\n <ngt-svg *ngIf=\"searchIcon\" [src]=\"searchIcon\" class=\"text-sm\">\n </ngt-svg>\n\n <svg *ngIf=\"!searchIcon\" class=\"fill-current self-center text-sm\" viewBox=\"0 0 12 12\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.0042 6.84417L11.8042 2.04417V-0.355835H-0.195801V2.04417L4.6042 6.84417V11.6442L7.0042 9.24417V6.84417Z\" />\n </svg>\n\n <span *ngIf=\"searchLabel\" class=\"font-semibold text-sm ml-2\">\n {{ searchLabel }}\n </span>\n\n <ng-content select='[customSearchHeader]'></ng-content>\n </ngt-modal-header>\n\n <ngt-modal-body [isDisabled]=\"false\" [ngtStyle]=\"filterModalBodyStyle\">\n <ngt-input *ngIf=\"!hasCustomSearch\" jit='true' [(ngModel)]='searchTerm' (ngModelChange)='search($event)'\n placeholder='Pesquisar...' name='{{ reference }}_filter' #searchInput>\n </ngt-input>\n\n <div [hidden]='!hasCustomSearch'>\n <ng-content select='[customSearch]'></ng-content>\n </div>\n </ngt-modal-body>\n</ng-template>" }]
|
|
4921
4961
|
}], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }, { type: NgtStylizableDirective, decorators: [{
|
|
4922
4962
|
type: Self
|
|
4923
4963
|
}, {
|
|
@@ -4948,6 +4988,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
|
|
|
4948
4988
|
type: Input
|
|
4949
4989
|
}], searchLabel: [{
|
|
4950
4990
|
type: Input
|
|
4991
|
+
}], searchIcon: [{
|
|
4992
|
+
type: Input
|
|
4951
4993
|
}], sortableTooltip: [{
|
|
4952
4994
|
type: Input
|
|
4953
4995
|
}], onEnableSearch: [{
|
|
@@ -5104,7 +5146,8 @@ NgtDatatableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
|
|
|
5104
5146
|
NgtModalModule,
|
|
5105
5147
|
NgtTagModule,
|
|
5106
5148
|
NgtActionModule,
|
|
5107
|
-
NgtStylizableModule
|
|
5149
|
+
NgtStylizableModule,
|
|
5150
|
+
NgtSvgModule], exports: [NgtDatatableComponent,
|
|
5108
5151
|
NgtTbodyComponent,
|
|
5109
5152
|
NgtTdComponent,
|
|
5110
5153
|
NgtTdCheckComponent,
|
|
@@ -5121,7 +5164,8 @@ NgtDatatableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", vers
|
|
|
5121
5164
|
NgtModalModule,
|
|
5122
5165
|
NgtTagModule,
|
|
5123
5166
|
NgtActionModule,
|
|
5124
|
-
NgtStylizableModule
|
|
5167
|
+
NgtStylizableModule,
|
|
5168
|
+
NgtSvgModule] });
|
|
5125
5169
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtDatatableModule, decorators: [{
|
|
5126
5170
|
type: NgModule,
|
|
5127
5171
|
args: [{
|
|
@@ -5155,7 +5199,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
|
|
|
5155
5199
|
NgtModalModule,
|
|
5156
5200
|
NgtTagModule,
|
|
5157
5201
|
NgtActionModule,
|
|
5158
|
-
NgtStylizableModule
|
|
5202
|
+
NgtStylizableModule,
|
|
5203
|
+
NgtSvgModule
|
|
5159
5204
|
]
|
|
5160
5205
|
}]
|
|
5161
5206
|
}] });
|