ng-tailwind 4.4.36 → 4.4.38

package/fesm2020/ng-tailwind.mjs

@@ -883,10 +883,10 @@ class NgtFormComponent {
 }
 NgtFormComponent.onSubmitInvalidForm = new EventEmitter;
 NgtFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtFormComponent, deps: [{ token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: i2$1.ControlContainer, host: true, optional: true }, { token: i2$1.NgForm, host: true, optional: true }, { token: i0.ChangeDetectorRef }, { token: NgtHttpFormService }, { token: NgtAbilityValidationService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-NgtFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtFormComponent, selector: "ngt-form", inputs: { guessFormState: "guessFormState", message: "message", routeIdentifier: "routeIdentifier", resource: "resource", customLayout: "customLayout", isDisabled: "isDisabled" }, outputs: { onCreating: "onCreating", onEditing: "onEditing", onLoadingChange: "onLoadingChange", onShiningChange: "onShiningChange", setupComponent: "setupComponent", onResourceLoadingError: "onResourceLoadingError" }, ngImport: i0, template: "<ngt-form-validation-message *ngIf='!customLayout' [canShowValidationMessage]=\"canShowValidationMessage()\"\n    [message]=\"message\">\n</ngt-form-validation-message>\n\n<fieldset class=\"w-full\" [disabled]=\"isDisabled\">\n    <ng-content></ng-content>\n</fieldset>", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgtFormValidationMessageComponent, selector: "ngt-form-validation-message", inputs: ["canShowValidationMessage", "message"] }] });
+NgtFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtFormComponent, selector: "ngt-form", inputs: { guessFormState: "guessFormState", message: "message", routeIdentifier: "routeIdentifier", resource: "resource", customLayout: "customLayout", isDisabled: "isDisabled" }, outputs: { onCreating: "onCreating", onEditing: "onEditing", onLoadingChange: "onLoadingChange", onShiningChange: "onShiningChange", setupComponent: "setupComponent", onResourceLoadingError: "onResourceLoadingError" }, ngImport: i0, template: "<ngt-form-validation-message *ngIf='!customLayout' [canShowValidationMessage]=\"canShowValidationMessage()\"\n    [message]=\"message\">\n</ngt-form-validation-message>\n\n<fieldset [disabled]=\"isDisabled\" style=\"min-inline-size: 100% !important\">\n    <ng-content></ng-content>\n</fieldset>", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgtFormValidationMessageComponent, selector: "ngt-form-validation-message", inputs: ["canShowValidationMessage", "message"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngt-form', template: "<ngt-form-validation-message *ngIf='!customLayout' [canShowValidationMessage]=\"canShowValidationMessage()\"\n    [message]=\"message\">\n</ngt-form-validation-message>\n\n<fieldset class=\"w-full\" [disabled]=\"isDisabled\">\n    <ng-content></ng-content>\n</fieldset>" }]
+            args: [{ selector: 'ngt-form', template: "<ngt-form-validation-message *ngIf='!customLayout' [canShowValidationMessage]=\"canShowValidationMessage()\"\n    [message]=\"message\">\n</ngt-form-validation-message>\n\n<fieldset [disabled]=\"isDisabled\" style=\"min-inline-size: 100% !important\">\n    <ng-content></ng-content>\n</fieldset>" }]
         }], ctorParameters: function () { return [{ type: i1$1.Router }, { type: i1$1.ActivatedRoute }, { type: i2$1.ControlContainer, decorators: [{
                     type: Optional
                 }, {
@@ -1301,7 +1301,7 @@ class NgtSectionComponent {
     }
 }
 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 });
-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']) }}\" [@enterAnimation]='!showSection'>\n            <fieldset class=\"w-full\" [disabled]=\"isDisabled\">\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: [
+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']) }}\" [@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: [
         trigger('enterAnimation', [
             state('void', style({ transform: 'translateY(-20px)', opacity: 0 })),
             transition(':enter', [
@@ -1318,7 +1318,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
                                 animate(400)
                             ])
                         ]),
-                    ], 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']) }}\" [@enterAnimation]='!showSection'>\n            <fieldset class=\"w-full\" [disabled]=\"isDisabled\">\n                <ng-content></ng-content>\n            </fieldset>\n        </div>\n    </div>\n</div>" }]
+                    ], 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']) }}\" [@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>" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: NgtStylizableDirective, decorators: [{
                     type: Self
                 }, {
@@ -1399,10 +1399,10 @@ class NgtModalBodyComponent {
     }
 }
 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 });
-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 class=\"w-full\" [disabled]=\"isDisabled\">\n    <ng-content></ng-content>\n</fieldset>" });
+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    <ng-content></ng-content>\n</fieldset>" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtModalBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngt-modal-body', template: "<fieldset class=\"w-full\" [disabled]=\"isDisabled\">\n    <ng-content></ng-content>\n</fieldset>" }]
+            args: [{ selector: 'ngt-modal-body', template: "<fieldset [disabled]=\"isDisabled\" style=\"min-inline-size: 100% !important\">\n    <ng-content></ng-content>\n</fieldset>" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: NgtAbilityValidationService, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { isDisabled: [{
@@ -1490,7 +1490,7 @@ class NgtModalComponent {
     }
 }
 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 });
-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']) }} relative border border-teal-500 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 class=\"w-full\" [disabled]=\"isDisabled\">\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: [
+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']) }} relative border border-teal-500 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: [
         trigger('fade', [
             state('void', style({ opacity: 0 })),
             transition(':enter, :leave', [
@@ -1507,7 +1507,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
                                 animate(300)
                             ])
                         ])
-                    ], 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']) }} relative border border-teal-500 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 class=\"w-full\" [disabled]=\"isDisabled\">\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>" }]
+                    ], 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']) }} relative border border-teal-500 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>" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.Injector }, { type: NgtStylizableDirective, decorators: [{
                     type: Self
                 }, {
@@ -5332,7 +5332,7 @@ class NgtRadioButtonComponent extends NgtBaseNgModel {
 NgtRadioButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtRadioButtonComponent, deps: [{ token: i0.Injector }, { token: i0.Renderer2 }, { token: NgtStylizableDirective, optional: true, self: true }, { token: NgtFormComponent, optional: true, skipSelf: true }, { token: NgtSectionComponent, optional: true, skipSelf: true }, { token: NgtModalComponent, optional: true, skipSelf: true }, { token: NgtRadioButtonContainerComponent, optional: true, skipSelf: true }, { token: i2$1.ControlContainer, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 NgtRadioButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtRadioButtonComponent, selector: "ngt-radio-button", inputs: { label: "label", name: "name", shining: "shining", isSelectable: "isSelectable", isDisabled: "isDisabled", helpTitle: "helpTitle", helpTextColor: "helpTextColor", helpText: "helpText" }, providers: [
         NgtMakeProvider(NgtRadioButtonComponent),
-    ], viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<label\n    class=\"inline-flex items-center {{ disabled() || !isSelectable ? 'cursor-not-allowed opacity-50' : 'cursor-pointer' }}\">\n    <input type=\"checkbox\" [name]='name' class=\"hidden\" ([ngModel])='value' [disabled]='disabled() || !isSelectable'\n        #element>\n\n    <div class=\"{{ value ? ngtStyle.compile(['color.border', 'color.text']) : 'border-gray-500' }}\n                    shadow rounded-full border border-gray-400 {{ !shining ? 'flex justify-center items-center' : 'hidden' }}\"\n        style=\"width: 19px; height: 19px;\">\n        <svg *ngIf=\"value\" class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 29.107 29.107\"\n            style=\"width: 13px; height: 13px;\">\n            <path\n                d=\"M14.554 0C6.561 0 0 6.562 0 14.552c0 7.996 6.561 14.555 14.554 14.555 7.996 0 14.553-6.559 14.553-14.555C29.106 6.562 22.55 0 14.554 0z\" />\n        </svg>\n    </div>\n\n    <span *ngIf='label && !shining' class=\"text-sm ml-2\" [class.line-through]='!isSelectable'>\n        {{ label }}\n    </span>\n\n    <ngt-helper *ngIf=\"helpText\" [helpTitle]=\"helpTitle\" [iconColor]=\"helpTextColor\" class=\"ml-1\">\n        {{ helpText }}\n    </ngt-helper>\n</label>\n\n<ng-container *ngIf='shining'>\n    <div class=\"flex\">\n        <ngt-shining class=\"w-16 h-12\"></ngt-shining>\n    </div>\n</ng-container>", styles: ["label{margin-bottom:unset!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }], viewProviders: [
+    ], viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<label\n    class=\"inline-flex items-center {{ disabled() || !isSelectable ? 'cursor-not-allowed opacity-50' : 'cursor-pointer' }}\">\n    <input type=\"checkbox\" [name]='name' class=\"hidden\" ([ngModel])='value' [disabled]='disabled() || !isSelectable'\n        #element>\n\n    <div class=\"{{ value ? ngtStyle.compile(['color.border', 'color.text']) : 'border-gray-500' }}\n                    shadow rounded-full border border-gray-400 {{ !shining ? 'flex justify-center items-center' : 'hidden' }}\"\n        style=\"width: 19px; height: 19px;\">\n\n        <div style=\"width: 13px; height: 13px;\">\n            <svg *ngIf=\"value\" class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 29.107 29.107\">\n\n                <path\n                    d=\"M14.554 0C6.561 0 0 6.562 0 14.552c0 7.996 6.561 14.555 14.554 14.555 7.996 0 14.553-6.559 14.553-14.555C29.106 6.562 22.55 0 14.554 0z\"/>\n            </svg>\n        </div>\n    </div>\n\n    <span *ngIf='label && !shining' class=\"text-sm ml-2\" [class.line-through]='!isSelectable'>\n        {{ label }}\n    </span>\n\n    <ngt-helper *ngIf=\"helpText\" [helpTitle]=\"helpTitle\" [iconColor]=\"helpTextColor\" class=\"ml-1\">\n        {{ helpText }}\n    </ngt-helper>\n</label>\n\n<ng-container *ngIf='shining'>\n    <div class=\"flex\">\n        <ngt-shining class=\"w-16 h-12\"></ngt-shining>\n    </div>\n</ng-container>", styles: ["label{margin-bottom:unset!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }], viewProviders: [
         { provide: ControlContainer, useExisting: NgForm }
     ] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtRadioButtonComponent, decorators: [{
@@ -5341,7 +5341,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
                         NgtMakeProvider(NgtRadioButtonComponent),
                     ], viewProviders: [
                         { provide: ControlContainer, useExisting: NgForm }
-                    ], template: "<label\n    class=\"inline-flex items-center {{ disabled() || !isSelectable ? 'cursor-not-allowed opacity-50' : 'cursor-pointer' }}\">\n    <input type=\"checkbox\" [name]='name' class=\"hidden\" ([ngModel])='value' [disabled]='disabled() || !isSelectable'\n        #element>\n\n    <div class=\"{{ value ? ngtStyle.compile(['color.border', 'color.text']) : 'border-gray-500' }}\n                    shadow rounded-full border border-gray-400 {{ !shining ? 'flex justify-center items-center' : 'hidden' }}\"\n        style=\"width: 19px; height: 19px;\">\n        <svg *ngIf=\"value\" class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 29.107 29.107\"\n            style=\"width: 13px; height: 13px;\">\n            <path\n                d=\"M14.554 0C6.561 0 0 6.562 0 14.552c0 7.996 6.561 14.555 14.554 14.555 7.996 0 14.553-6.559 14.553-14.555C29.106 6.562 22.55 0 14.554 0z\" />\n        </svg>\n    </div>\n\n    <span *ngIf='label && !shining' class=\"text-sm ml-2\" [class.line-through]='!isSelectable'>\n        {{ label }}\n    </span>\n\n    <ngt-helper *ngIf=\"helpText\" [helpTitle]=\"helpTitle\" [iconColor]=\"helpTextColor\" class=\"ml-1\">\n        {{ helpText }}\n    </ngt-helper>\n</label>\n\n<ng-container *ngIf='shining'>\n    <div class=\"flex\">\n        <ngt-shining class=\"w-16 h-12\"></ngt-shining>\n    </div>\n</ng-container>", styles: ["label{margin-bottom:unset!important}\n"] }]
+                    ], template: "<label\n    class=\"inline-flex items-center {{ disabled() || !isSelectable ? 'cursor-not-allowed opacity-50' : 'cursor-pointer' }}\">\n    <input type=\"checkbox\" [name]='name' class=\"hidden\" ([ngModel])='value' [disabled]='disabled() || !isSelectable'\n        #element>\n\n    <div class=\"{{ value ? ngtStyle.compile(['color.border', 'color.text']) : 'border-gray-500' }}\n                    shadow rounded-full border border-gray-400 {{ !shining ? 'flex justify-center items-center' : 'hidden' }}\"\n        style=\"width: 19px; height: 19px;\">\n\n        <div style=\"width: 13px; height: 13px;\">\n            <svg *ngIf=\"value\" class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 29.107 29.107\">\n\n                <path\n                    d=\"M14.554 0C6.561 0 0 6.562 0 14.552c0 7.996 6.561 14.555 14.554 14.555 7.996 0 14.553-6.559 14.553-14.555C29.106 6.562 22.55 0 14.554 0z\"/>\n            </svg>\n        </div>\n    </div>\n\n    <span *ngIf='label && !shining' class=\"text-sm ml-2\" [class.line-through]='!isSelectable'>\n        {{ label }}\n    </span>\n\n    <ngt-helper *ngIf=\"helpText\" [helpTitle]=\"helpTitle\" [iconColor]=\"helpTextColor\" class=\"ml-1\">\n        {{ helpText }}\n    </ngt-helper>\n</label>\n\n<ng-container *ngIf='shining'>\n    <div class=\"flex\">\n        <ngt-shining class=\"w-16 h-12\"></ngt-shining>\n    </div>\n</ng-container>", styles: ["label{margin-bottom:unset!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.Renderer2 }, { type: NgtStylizableDirective, decorators: [{
                     type: Self
                 }, {