ng-tailwind 4.5.50 → 4.5.52

package/fesm2015/ng-tailwind.mjs

@@ -3989,12 +3989,14 @@ class NgtDatatableComponent {
         this.searchTermOnEnter = true;
         this.defaultFilters = {};
         this.filtersDescription = {};
+        this.canSelectAllRegisters = false;
         this.onDataChange = new EventEmitter();
         this.onClearFilter = new EventEmitter();
         this.onClearSelectedElements = new EventEmitter();
         this.onSelectedElementsChange = new EventEmitter();
         this.onToogleAllCheckboxes = new EventEmitter();
         this.onToogleCheckbox = new EventEmitter();
+        this.onSelectAllRegisters = new EventEmitter();
         this.onOpenSearchModal = new EventEmitter();
         this.onSearch = new EventEmitter();
         this.data = [];
@@ -4308,6 +4310,7 @@ class NgtDatatableComponent {
             }
             this.onSelectedElementsChange.emit(this.selectedElements);
         }));
+        this.subscriptions.push(this.onSelectAllRegisters.subscribe(() => this.hasSelectedAllElements = !this.hasSelectedAllElements));
     }
     canApplyFilters(filters) {
         if (!this.searching) {
@@ -4330,10 +4333,10 @@ class NgtDatatableComponent {
     }
 }
 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 });
-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" }, outputs: { onDataChange: "onDataChange", onClearFilter: "onClearFilter", onClearSelectedElements: "onClearSelectedElements", onSelectedElementsChange: "onSelectedElementsChange", onToogleAllCheckboxes: "onToogleAllCheckboxes", onToogleCheckbox: "onToogleCheckbox", 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                    {{ filter.translation + ': ' + (filter?.value?.tagValue ? filter.value.tagValue : filter.value)}}\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\" overflow=\"overflow-auto\" ngt-stylizable #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"] }] });
+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                    {{ filter.translation + ': ' + (filter?.value?.tagValue ? filter.value.tagValue : filter.value)}}\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\" overflow=\"overflow-auto\" ngt-stylizable #searchModal>\n    <ng-container *ngTemplateOutlet=\"searchModalTemplate\"></ng-container>\n</ngt-modal>\n", 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtDatatableComponent, decorators: [{
             type: Component,
-            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                    {{ filter.translation + ': ' + (filter?.value?.tagValue ? filter.value.tagValue : filter.value)}}\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\" overflow=\"overflow-auto\" ngt-stylizable #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"] }]
+            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                    {{ filter.translation + ': ' + (filter?.value?.tagValue ? filter.value.tagValue : filter.value)}}\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\" overflow=\"overflow-auto\" ngt-stylizable #searchModal>\n    <ng-container *ngTemplateOutlet=\"searchModalTemplate\"></ng-container>\n</ngt-modal>\n", 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"] }]
         }], ctorParameters: function () {
         return [{ type: i0.Injector }, { type: NgtHttpService }, { type: i0.ChangeDetectorRef }, { type: NgtTranslateService, decorators: [{
                         type: Optional
@@ -4369,6 +4372,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
                 type: Input
             }], filtersDescription: [{
                 type: Input
+            }], canSelectAllRegisters: [{
+                type: Input
             }], onDataChange: [{
                 type: Output
             }], onClearFilter: [{
@@ -4381,6 +4386,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
                 type: Output
             }], onToogleCheckbox: [{
                 type: Output
+            }], onSelectAllRegisters: [{
+                type: Output
             }], onOpenSearchModal: [{
                 type: Output
             }], onSearch: [{
@@ -4630,14 +4637,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
     } });
 
 class NgtThCheckComponent {
-    constructor(injector, hostElement, ngtStylizableDirective, ngtDataTable) {
+    constructor(injector, hostElement, ngtStylizableDirective, ngtDataTable, ngtTranslateService) {
         this.injector = injector;
         this.hostElement = hostElement;
         this.ngtStylizableDirective = ngtStylizableDirective;
         this.ngtDataTable = ngtDataTable;
+        this.ngtTranslateService = ngtTranslateService;
         this.checked = false;
         this.subscriptions = [];
         this.bindNgtStyle();
+        if (this.hasSelectedAllElements()) {
+            this.checked = true;
+            this.hasSelectedAllCheckboxes = true;
+        }
+    }
+    getSelectAllElementsCheckboxStyle() {
+        var _a, _b;
+        return this.hasSelectedAllElements()
+            ? `${(_a = this.ngtCheckbox) === null || _a === void 0 ? void 0 : _a.ngtStyle.compile(['color.bg'])} text-white`
+            : `hover:${(_b = this.ngtCheckbox) === null || _b === void 0 ? void 0 : _b.ngtStyle.compile(['color.bg'])} hover:text-white bg-white`;
+    }
+    hasSelectedAllElements() {
+        var _a;
+        return (_a = this.ngtDataTable) === null || _a === void 0 ? void 0 : _a.hasSelectedAllElements;
+    }
+    canSelectAllFilter() {
+        var _a;
+        return (_a = this.ngtDataTable) === null || _a === void 0 ? void 0 : _a.canSelectAllRegisters;
+    }
+    getPaginationTotal() {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = this.ngtDataTable) === null || _a === void 0 ? void 0 : _a.ngtPagination) === null || _b === void 0 ? void 0 : _b.getPagination()) === null || _c === void 0 ? void 0 : _c.total;
+    }
+    onToggleSelectAllElements() {
+        var _a;
+        (_a = this.ngtDataTable) === null || _a === void 0 ? void 0 : _a.onSelectAllRegisters.emit();
     }
     ngAfterContentInit() {
         if (this.ngtDataTable) {
@@ -4653,8 +4687,13 @@ class NgtThCheckComponent {
         this.destroySubscriptions();
     }
     onCheckboxChange(checked) {
+        var _a;
         if (this.ngtDataTable) {
             this.ngtDataTable.onToogleAllCheckboxes.emit(checked);
+            this.hasSelectedAllCheckboxes = checked;
+            if (!checked && this.hasSelectedAllElements()) {
+                (_a = this.ngtDataTable) === null || _a === void 0 ? void 0 : _a.onSelectAllRegisters.emit();
+            }
         }
     }
     bindNgtStyle() {
@@ -4698,11 +4737,11 @@ class NgtThCheckComponent {
         this.subscriptions = [];
     }
 }
-NgtThCheckComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtThCheckComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: NgtStylizableDirective, optional: true, self: true }, { token: NgtDatatableComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
-NgtThCheckComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtThCheckComponent, selector: "[ngt-th-check]", ngImport: i0, template: "<ngt-checkbox [(ngModel)]='checked' (ngModelChange)='onCheckboxChange($event)'></ngt-checkbox>\n<ng-content></ng-content>", dependencies: [{ 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: NgtCheckboxComponent, selector: "ngt-checkbox", inputs: ["label", "shining", "isDisabled", "isClickDisabled", "name", "mode", "helpTitle", "helpTextColor", "helpText", "helperAutoXReverse"] }] });
+NgtThCheckComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtThCheckComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: NgtStylizableDirective, optional: true, self: true }, { token: NgtDatatableComponent, optional: true, skipSelf: true }, { token: NgtTranslateService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+NgtThCheckComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtThCheckComponent, selector: "[ngt-th-check]", viewQueries: [{ propertyName: "ngtCheckbox", first: true, predicate: NgtCheckboxComponent, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"canSelectAllFilter(); else default\">\n    <div class=\"flex items-center content-center relative w-10\">\n        <ngt-checkbox [(ngModel)]='checked' (ngModelChange)='onCheckboxChange($event)'\n            (click)=\"$event.stopPropagation()\">\n        </ngt-checkbox>\n\n        <div *ngIf=\"hasSelectedAllCheckboxes\" class=\"rounded-md border border-gray-400 p-1 ml-1 cursor-pointer relative\"\n            [ngClass]=\"getSelectAllElementsCheckboxStyle()\"\n            [title]=\"hasSelectedAllElements() ? ngtTranslateService.ngtDatatableClearSelection : ngtTranslateService.ngtDatatableSelectAllRegisters\"\n            (click)=\"onToggleSelectAllElements()\">\n            <svg class=\"fill-current self-center h-4\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\">\n                <path\n                    d=\"M342.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 178.7l-57.4-57.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l80 80c12.5 12.5 32.8 12.5 45.3 0l160-160zm96 128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 402.7 54.6 297.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l256-256z\" />\n            </svg>\n\n            <div *ngIf=\"hasSelectedAllElements()\"\n                class=\"rounded-xl absolute top-0 text-xs right-0 -mt-5 -mr-2 py-1 px-2 text-center text-white bg-blue-500\">\n                {{ getPaginationTotal() }}\n            </div>\n        </div>\n    </div>\n</ng-container>\n\n<ng-template #default>\n    <ngt-checkbox [(ngModel)]='checked' (ngModelChange)='onCheckboxChange($event)' (click)=\"$event.stopPropagation()\">\n    </ngt-checkbox>\n</ng-template>\n\n<ng-content></ng-content>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: NgtCheckboxComponent, selector: "ngt-checkbox", inputs: ["label", "shining", "isDisabled", "isClickDisabled", "name", "mode", "helpTitle", "helpTextColor", "helpText", "helperAutoXReverse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtThCheckComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[ngt-th-check]', template: "<ngt-checkbox [(ngModel)]='checked' (ngModelChange)='onCheckboxChange($event)'></ngt-checkbox>\n<ng-content></ng-content>" }]
+            args: [{ selector: '[ngt-th-check]', template: "<ng-container *ngIf=\"canSelectAllFilter(); else default\">\n    <div class=\"flex items-center content-center relative w-10\">\n        <ngt-checkbox [(ngModel)]='checked' (ngModelChange)='onCheckboxChange($event)'\n            (click)=\"$event.stopPropagation()\">\n        </ngt-checkbox>\n\n        <div *ngIf=\"hasSelectedAllCheckboxes\" class=\"rounded-md border border-gray-400 p-1 ml-1 cursor-pointer relative\"\n            [ngClass]=\"getSelectAllElementsCheckboxStyle()\"\n            [title]=\"hasSelectedAllElements() ? ngtTranslateService.ngtDatatableClearSelection : ngtTranslateService.ngtDatatableSelectAllRegisters\"\n            (click)=\"onToggleSelectAllElements()\">\n            <svg class=\"fill-current self-center h-4\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\">\n                <path\n                    d=\"M342.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 178.7l-57.4-57.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l80 80c12.5 12.5 32.8 12.5 45.3 0l160-160zm96 128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 402.7 54.6 297.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l256-256z\" />\n            </svg>\n\n            <div *ngIf=\"hasSelectedAllElements()\"\n                class=\"rounded-xl absolute top-0 text-xs right-0 -mt-5 -mr-2 py-1 px-2 text-center text-white bg-blue-500\">\n                {{ getPaginationTotal() }}\n            </div>\n        </div>\n    </div>\n</ng-container>\n\n<ng-template #default>\n    <ngt-checkbox [(ngModel)]='checked' (ngModelChange)='onCheckboxChange($event)' (click)=\"$event.stopPropagation()\">\n    </ngt-checkbox>\n</ng-template>\n\n<ng-content></ng-content>\n" }]
         }], ctorParameters: function () {
         return [{ type: i0.Injector }, { type: i0.ElementRef }, { type: NgtStylizableDirective, decorators: [{
                         type: Self
@@ -4712,8 +4751,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
                         type: Optional
                     }, {
                         type: SkipSelf
+                    }] }, { type: NgtTranslateService, decorators: [{
+                        type: Optional
                     }] }];
-    } });
+    }, propDecorators: { ngtCheckbox: [{
+                type: ViewChild,
+                args: [NgtCheckboxComponent]
+            }] } });
 
 class NgtThComponent {
     constructor(injector, hostElement, ngtStylizableDirective, ngtDataTable) {
@@ -7029,6 +7073,10 @@ class NgtMultiSelectComponent extends NgtBaseNgModel {
             this.becameVisible = true;
             this.loadData().then(() => {
                 this.initComponentValidation();
+                if (this.canAutoSelectUniqueOption()) {
+                    this.selectableElements[0].isSelected = true;
+                    this.onNativeChange(this.selectableElements[0]);
+                }
                 this.originalItems = [...this.selectedElements];
             });
         }
@@ -7043,9 +7091,19 @@ class NgtMultiSelectComponent extends NgtBaseNgModel {
         if (changes.items) {
             this.bindSelectableElements(changes.items.currentValue);
             this.componentReady = true;
+            if (this.canAutoSelectUniqueOption()) {
+                this.selectableElements[0].isSelected = true;
+                this.onNativeChange(this.selectableElements[0]);
+            }
         }
         if (changes.remoteResource && this.becameVisible) {
-            this.loadData().then(() => this.initComponentValidation());
+            this.loadData().then(() => {
+                this.initComponentValidation();
+                if (this.canAutoSelectUniqueOption()) {
+                    this.selectableElements[0].isSelected = true;
+                    this.onNativeChange(this.selectableElements[0]);
+                }
+            });
         }
         if (changes.itemsPerPage) {
             this.pagination.per_page = changes.itemsPerPage.currentValue;
@@ -7317,6 +7375,12 @@ class NgtMultiSelectComponent extends NgtBaseNgModel {
     isSelectedElement(selectableElement) {
         return !!this.selectedElements.find(selectedElement => selectedElement.uuid === selectableElement.uuid);
     }
+    canAutoSelectUniqueOption() {
+        var _a, _b;
+        return this.autoSelectUniqueOption
+            && (!this.value || !((_a = this.value) === null || _a === void 0 ? void 0 : _a.length))
+            && ((_b = this.selectableElements) === null || _b === void 0 ? void 0 : _b.length) == 1;
+    }
     isHidden() {
         var _a;
         return !((_a = this.containerRef) === null || _a === void 0 ? void 0 : _a.nativeElement.offsetParent);
@@ -7337,7 +7401,7 @@ class NgtMultiSelectComponent extends NgtBaseNgModel {
     }
 }
 NgtMultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtMultiSelectComponent, deps: [{ token: NgtHttpService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: NgtFormComponent, optional: true, skipSelf: true }, { token: NgtSectionComponent, optional: true, skipSelf: true }, { token: NgtModalComponent, optional: true, skipSelf: true }, { token: NgtStylizableDirective, optional: true, self: true }, { token: i2$1.ControlContainer, host: true, optional: true }, { token: NgtTranslateService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-NgtMultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtMultiSelectComponent, selector: "ngt-multi-select", inputs: { customOptionTemplate: "customOptionTemplate", customHeaderTemplate: "customHeaderTemplate", label: "label", helpTitle: "helpTitle", helpText: "helpText", helpTextColor: "helpTextColor", helperReverseYPosition: "helperReverseYPosition", helperAutoXReverse: "helperAutoXReverse", shining: "shining", loading: "loading", bindLabel: "bindLabel", bindSearch: "bindSearch", itemsPerPage: "itemsPerPage", name: "name", remoteResource: "remoteResource", items: "items", searchable: "searchable", allowOriginalItemsUnselect: "allowOriginalItemsUnselect", isRequired: "isRequired", isDisabled: "isDisabled" }, outputs: { onDataChange: "onDataChange" }, host: { listeners: { "scroll": "onScroll($event)" } }, providers: [
+NgtMultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtMultiSelectComponent, selector: "ngt-multi-select", inputs: { customOptionTemplate: "customOptionTemplate", customHeaderTemplate: "customHeaderTemplate", label: "label", helpTitle: "helpTitle", helpText: "helpText", helpTextColor: "helpTextColor", helperReverseYPosition: "helperReverseYPosition", helperAutoXReverse: "helperAutoXReverse", shining: "shining", loading: "loading", bindLabel: "bindLabel", bindSearch: "bindSearch", itemsPerPage: "itemsPerPage", name: "name", remoteResource: "remoteResource", items: "items", searchable: "searchable", allowOriginalItemsUnselect: "allowOriginalItemsUnselect", autoSelectUniqueOption: "autoSelectUniqueOption", isRequired: "isRequired", isDisabled: "isDisabled" }, outputs: { onDataChange: "onDataChange" }, host: { listeners: { "scroll": "onScroll($event)" } }, providers: [
         NgtMakeProvider(NgtMultiSelectComponent)
     ], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true }, { propertyName: "inputSearch", first: true, predicate: ["inputSearch"], descendants: true }, { propertyName: "elementCheckboxTemplate", first: true, predicate: ["elementCheckboxTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<label *ngIf=\"label && !shining\" class=\"flex text-sm\" [class.mb-2]='!hasValidationErrors()'>\n    {{ label }}:\n\n    <span *ngIf=\"isRequired\" class=\"text-red-500 font-bold text-md ml-1\">*</span>\n\n    <ngt-helper *ngIf=\"helpText\" [helpTitle]=\"helpTitle\" [iconColor]=\"helpTextColor\"\n        [helperReverseYPosition]=\"helperReverseYPosition\" [autoXReverse]=\"helperAutoXReverse\" class=\"ml-1\">\n        {{ helpText }}\n    </ngt-helper>\n</label>\n\n<ngt-validation [hidden]='shining' class=\"block mb-1\" [control]='formControl' [container]='formContainer'>\n</ngt-validation>\n\n<div class=\"{{ shining ? 'hidden' : 'flex flex-col' }} border w-full rounded {{ ngtStyle.compile(['h']) }}\"\n    style=\"min-height: 16rem;\" [class.border-red-500]='hasValidationErrors()' [class.disabled-background]='disabled()'>\n    <div class=\"flex items-center w-full p-2 border-b\">\n        <ngt-checkbox class=\"flex\" title=\"Selecionar todos\" [label]=\"!searchable ? 'Selecionar todos' : ''\"\n            [(ngModel)]=\"selectAllCheckbox\" [name]=\"selectAllCheckboxName\" [isClickDisabled]='true'\n            [isDisabled]='loading || disabled()' h='h-5' w='w-5' (click)='selectAll()' ngt-stylizable>\n        </ngt-checkbox>\n\n        <ngt-input *ngIf=\"searchable\" class=\"block w-full pl-2\" [name]='searchInputName' [(ngModel)]='searchTerm'\n            placeholder='Buscar...' [allowClear]='true' [jit]='true' h='h-10' (ngModelChange)='search($event)'\n            [loading]='loading' [isDisabled]='disabled()' ngt-stylizable #inputSearch>\n        </ngt-input>\n    </div>\n\n    <div *ngIf=\"loading\" class=\"flex flex-col gap-3 px-3 h-full w-full cursor-wait\">\n        <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n        <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n        <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n        <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n    </div>\n\n    <div class=\"w-full overflow-y-auto text-sm {{ loading ? 'hidden' : 'flex flex-col' }}\" (scroll)='onScroll($event)'\n        #containerRef>\n        <ng-container *ngIf=\"customHeaderTemplate\" [ngTemplateOutlet]=\"customHeaderTemplate\">\n        </ng-container>\n\n        <ng-container *ngFor=\"let element of getSelectableElements(); let i = index\">\n            <div class=\"flex w-full items-center hover:bg-gray-200 {{ disabled() ? 'cursor-not-allowed' : 'cursor-pointer' }}\"\n                [class.p-2]='!customOptionTemplate' (click)='toggleItem(element, $event)'>\n                <ng-template let-element #elementCheckboxTemplate>\n                    <ngt-checkbox class=\"flex pr-2\" [name]='element.uuid' [(ngModel)]=\"element.isSelected\"\n                        (ngModelChange)='onNativeChange(element)' [isClickDisabled]='true'\n                        [isDisabled]='!canSelectItem(element)' h='h-5' w='w-5' (click)='toggleItem(element, $event)'\n                        ngt-stylizable>\n                    </ngt-checkbox>\n                </ng-template>\n\n                <ng-template let-element #defaultOptionTemplate>\n                    {{ getSelectableElementValue(element) }}\n                </ng-template>\n\n                <ng-container *ngIf=\"!customOptionTemplate\" [ngTemplateOutlet]=\"elementCheckboxTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: element }\">\n                </ng-container>\n\n                <ng-container [ngTemplateOutlet]=\"customOptionTemplate || defaultOptionTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: element, index: i }\">\n                </ng-container>\n            </div>\n        </ng-container>\n\n        <p *ngIf=\"!getSelectableElements()?.length\" class=\"text-center mt-4\">\n            {{ ngtTranslateService.ngtMultiSelectNoDataFound }}\n        </p>\n    </div>\n</div>\n\n<div class=\"{{ shining ? 'hidden' : 'flex' }} w-full items-center mt-2\">\n    <span class=\"text-sm mr-4\">\n        {{ selectedElements?.length || 0 }} / {{ itemsTotal || 0 }}\n    </span>\n\n    <ngt-checkbox class=\"flex\" label=\"Visualizar selecionados\" [name]='displayOnlySelectedName'\n        [(ngModel)]=\"displayOnlySelected\" [isDisabled]='loading || disabled()' h='h-5' w='w-5' ngt-stylizable>\n    </ngt-checkbox>\n</div>\n\n<ngt-shining *ngIf='shining' class=\"block w-full {{ ngtStyle.compile(['h']) }}\" style=\"min-height: 16rem;\"\n    rounded='rounded' ngt-stylizable>\n</ngt-shining>\n\n<input *ngIf='componentReady' type='hidden' [ngModel]='value' [name]='name' [value]='value'>", styles: [".disabled-background{border:solid #cbd5e0 1px!important;background-color:#fafafa!important;border-radius:.25rem!important;padding:1px!important}.div-loader{width:4rem;height:4rem;border:3px solid #a0aec038;border-top-color:#a0aec0;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$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: NgtValidationComponent, selector: "ngt-validation", inputs: ["control", "container", "minValue", "minLength"] }, { kind: "component", type: NgtShiningComponent, selector: "ngt-shining", inputs: ["shiningWidth"] }, { kind: "component", type: NgtHelperComponent, selector: "ngt-helper", inputs: ["helpTextColor", "helpText", "helpTitle", "icon", "iconSize", "iconColor", "iconTitle", "tooltipSize", "autoXReverse", "helperReverseYPosition"] }, { kind: "component", type: NgtInputComponent, selector: "ngt-input", inputs: ["label", "placeholder", "shining", "loading", "helpTitle", "helpTextColor", "helpText", "innerLeftIcon", "innerLeftIconColor", "innerRightIcon", "innerRightIconColor", "decimalMaskPrecision", "showCharactersLength", "uppercase", "customInnerContentTemplate", "isDisabled", "isReadonly", "showRoundedIcon", "type", "name", "mask", "focus", "allowClear", "jit", "findExistingResource", "allowPhoneValidation", "validatePassword", "passwordableId", "passwordPolicyId", "isRequired", "uniqueResource", "minValue", "maxValue", "maxLength", "minLength", "match", "multipleOf", "validateMinValueOnMask", "externalServerDependency", "helperReverseYPosition", "helperAutoXReverse"], outputs: ["onClickLeftIcon", "onClickRightIcon", "validatePhoneResult"] }, { kind: "component", type: NgtCheckboxComponent, selector: "ngt-checkbox", inputs: ["label", "shining", "isDisabled", "isClickDisabled", "name", "mode", "helpTitle", "helpTextColor", "helpText", "helperAutoXReverse"] }, { kind: "directive", type: NgtStylizableDirective, selector: "[ngt-stylizable]", inputs: ["color", "color.text", "color.bg", "color.border", "h", "w", "p", "px", "py", "pt", "pr", "pb", "pl", "m", "mx", "my", "mt", "mr", "mb", "ml", "border", "shadow", "rounded", "font", "text", "breakWords", "overflow", "position", "justifyContent", "cursor", "fontCase"] }], viewProviders: [
         { provide: ControlContainer, useExisting: NgForm }
@@ -7418,6 +7482,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
                 type: Input
             }], allowOriginalItemsUnselect: [{
                 type: Input
+            }], autoSelectUniqueOption: [{
+                type: Input
             }], isRequired: [{
                 type: Input
             }], isDisabled: [{