ng-tailwind 4.5.46 → 4.5.48
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-section/ngt-section.component.d.ts +3 -1
- package/esm2020/components/ngt-input/ngt-input.component.mjs +3 -3
- package/esm2020/components/ngt-section/ngt-section.component.mjs +11 -5
- package/fesm2015/ng-tailwind.mjs +11 -5
- package/fesm2015/ng-tailwind.mjs.map +1 -1
- package/fesm2020/ng-tailwind.mjs +11 -5
- package/fesm2020/ng-tailwind.mjs.map +1 -1
- package/package.json +1 -1
package/fesm2015/ng-tailwind.mjs
CHANGED
|
@@ -1311,13 +1311,16 @@ class NgtSectionComponent {
|
|
|
1311
1311
|
this.showSection = !this.showSection;
|
|
1312
1312
|
this.onToggleSection.emit(this.showSection);
|
|
1313
1313
|
}
|
|
1314
|
+
scrollTo() {
|
|
1315
|
+
this.elementRef.nativeElement.scrollIntoView({ behavior: "smooth" });
|
|
1316
|
+
}
|
|
1314
1317
|
remove(event) {
|
|
1315
1318
|
event.stopImmediatePropagation();
|
|
1316
1319
|
this.onRemove.emit();
|
|
1317
1320
|
}
|
|
1318
1321
|
}
|
|
1319
1322
|
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 });
|
|
1320
|
-
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" }, ngImport: i0, template: "<div *ngIf=\"canDisplay\" class=\"flex mb-6\">\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 border-b-4 md:border-b-0 border-dashed md:border-solid md:border-l {{ accordion && !showSection ? 'flex' : '' }}\">\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 px-5 cursor-pointer {{ helpText ? '' : 'hover:opacity-75' }} {{ accordion && showSection ? ngtCaptionStyle.compile(['pb']) : ngtCaptionStyle.compile(['py']) }}\"\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-8 w-8 ml-2 rounded-full hover:bg-red-500 hover:text-white text-gray-600 text-xl\"\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: [
|
|
1323
|
+
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-6\" #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 border-b-4 md:border-b-0 border-dashed md:border-solid md:border-l {{ accordion && !showSection ? 'flex' : '' }}\">\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 px-5 cursor-pointer {{ helpText ? '' : 'hover:opacity-75' }} {{ accordion && showSection ? ngtCaptionStyle.compile(['pb']) : ngtCaptionStyle.compile(['py']) }}\"\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-8 w-8 ml-2 rounded-full hover:bg-red-500 hover:text-white text-gray-600 text-xl\"\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: [
|
|
1321
1324
|
trigger('enterAnimation', [
|
|
1322
1325
|
state('void', style({ transform: 'translateY(-20px)', opacity: 0 })),
|
|
1323
1326
|
transition(':enter', [
|
|
@@ -1334,7 +1337,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
|
|
|
1334
1337
|
animate(400)
|
|
1335
1338
|
])
|
|
1336
1339
|
]),
|
|
1337
|
-
], template: "<div *ngIf=\"canDisplay\" class=\"flex mb-6\">\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 border-b-4 md:border-b-0 border-dashed md:border-solid md:border-l {{ accordion && !showSection ? 'flex' : '' }}\">\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 px-5 cursor-pointer {{ helpText ? '' : 'hover:opacity-75' }} {{ accordion && showSection ? ngtCaptionStyle.compile(['pb']) : ngtCaptionStyle.compile(['py']) }}\"\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-8 w-8 ml-2 rounded-full hover:bg-red-500 hover:text-white text-gray-600 text-xl\"\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>" }]
|
|
1340
|
+
], template: "<div *ngIf=\"canDisplay\" class=\"flex mb-6\" #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 border-b-4 md:border-b-0 border-dashed md:border-solid md:border-l {{ accordion && !showSection ? 'flex' : '' }}\">\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 px-5 cursor-pointer {{ helpText ? '' : 'hover:opacity-75' }} {{ accordion && showSection ? ngtCaptionStyle.compile(['pb']) : ngtCaptionStyle.compile(['py']) }}\"\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-8 w-8 ml-2 rounded-full hover:bg-red-500 hover:text-white text-gray-600 text-xl\"\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>" }]
|
|
1338
1341
|
}], ctorParameters: function () {
|
|
1339
1342
|
return [{ type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: NgtStylizableDirective, decorators: [{
|
|
1340
1343
|
type: Self
|
|
@@ -1343,7 +1346,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
|
|
|
1343
1346
|
}] }, { type: NgtAbilityValidationService, decorators: [{
|
|
1344
1347
|
type: Optional
|
|
1345
1348
|
}] }];
|
|
1346
|
-
}, propDecorators: {
|
|
1349
|
+
}, propDecorators: { elementRef: [{
|
|
1350
|
+
type: ViewChild,
|
|
1351
|
+
args: ['elementRef']
|
|
1352
|
+
}], name: [{
|
|
1347
1353
|
type: Input
|
|
1348
1354
|
}], icon: [{
|
|
1349
1355
|
type: Input
|
|
@@ -2221,7 +2227,7 @@ class NgtInputComponent extends NgtBaseNgModel {
|
|
|
2221
2227
|
}
|
|
2222
2228
|
onNativeChange() {
|
|
2223
2229
|
if (this.hasChangesBetweenModels()) {
|
|
2224
|
-
this.value = this.getNativeValue();
|
|
2230
|
+
this.value = this.removeMasks(this.getNativeValue());
|
|
2225
2231
|
}
|
|
2226
2232
|
}
|
|
2227
2233
|
change(value) {
|
|
@@ -2816,7 +2822,7 @@ class NgtInputComponent extends NgtBaseNgModel {
|
|
|
2816
2822
|
|| ((_c = this.ngtModal) === null || _c === void 0 ? void 0 : _c.isDisabled);
|
|
2817
2823
|
}
|
|
2818
2824
|
hasChangesBetweenModels() {
|
|
2819
|
-
return this.getNativeValue() !== this.value;
|
|
2825
|
+
return this.removeMasks(this.getNativeValue()) !== this.value;
|
|
2820
2826
|
}
|
|
2821
2827
|
destroySubscriptions() {
|
|
2822
2828
|
this.subscriptions.forEach(subscription => subscription.unsubscribe());
|