@seniorsistemas/angular-components 17.1.4 → 17.1.6

package/fesm2015/seniorsistemas-angular-components.js

@@ -2959,16 +2959,6 @@ class LookupField extends Field {
     constructor(config) {
         super(Object.assign(Object.assign({}, config), { type: FieldType.Lookup }));
         this.multiple = false;
-        this.searchTitle = "Pesquisa avançada";
-        this.searchEmptyTitle = "Nenhum registro encontrado";
-        this.filterLabel = "Filtrar";
-        this.filterTitle = "Filtros";
-        this.clearLabel = "Limpar";
-        this.cancelLabel = "Cancelar";
-        this.selectLabel = "Selecionar";
-        this.recordLabel = " registro";
-        this.recordsLabel = " registros";
-        this.emptyFieldLabel = "Não informado";
         this.autocompleteForceSelection = true;
         this.onSelect = (event) => { };
         this.onUnselect = (event) => { };
@@ -3154,24 +3144,15 @@ class Option {
 
 var LookupComponent_1;
 let LookupComponent = LookupComponent_1 = class LookupComponent {
-    constructor(hotkeysService) {
+    constructor(hotkeysService, translateService) {
         this.hotkeysService = hotkeysService;
+        this.translateService = translateService;
         this.id = `s-lookup-${LookupComponent_1.nextId++}`;
         this.autocompleteForceSelection = true;
         this.disabled = false;
         this.showSearch = true;
         this.lookupAppendTo = "body";
-        this.searchTitle = "Pesquisa avançada";
-        this.searchEmptyTitle = "Nenhum registro encontrado";
         this.searchFields = [];
-        this.filterTitle = "Filtros";
-        this.filterLabel = "Filtrar";
-        this.clearLabel = "Limpar";
-        this.cancelLabel = "Cancelar";
-        this.selectLabel = "Selecionar";
-        this.emptyFieldLabel = "Não informado";
-        this.recordLabel = " registro";
-        this.recordsLabel = " registros";
         this.onLookupRequest = new EventEmitter();
         this.onSearchRequest = new EventEmitter();
         this.onFocus = new EventEmitter();
@@ -3237,10 +3218,8 @@ let LookupComponent = LookupComponent_1 = class LookupComponent {
         });
     }
     printRecordTotalizer() {
-        const label = this.searchTotalRecords === 1
-            ? this.recordsLabel.trim()
-            : this.recordsLabel.trim();
-        return this.searchTotalRecordsLabel ? this.searchTotalRecordsLabel : `${this.searchTotalRecords} ${label}`;
+        var _a, _b, _c;
+        return ((_a = this.searchTotalRecordsLabel) !== null && _a !== void 0 ? _a : this.searchTotalRecords === 1) ? (_b = this.recordLabel) !== null && _b !== void 0 ? _b : this.translateService.instant("platform.angular_components.record", { count: this.searchTotalRecords }) : (_c = this.recordsLabel) !== null && _c !== void 0 ? _c : this.translateService.instant("platform.angular_components.records", { count: this.searchTotalRecords });
     }
     _convertToMomentHourFormat(hourFormat, format) {
         if (format === "dd/mm/yy") { // valor padrão para o format.
@@ -3506,7 +3485,8 @@ let LookupComponent = LookupComponent_1 = class LookupComponent {
 };
 LookupComponent.nextId = 0;
 LookupComponent.ctorParameters = () => [
-    { type: HotkeysService }
+    { type: HotkeysService },
+    { type: TranslateService }
 ];
 __decorate([
     Input()
@@ -3547,12 +3527,6 @@ __decorate([
 __decorate([
     Input()
 ], LookupComponent.prototype, "lookupAppendTo", void 0);
-__decorate([
-    Input()
-], LookupComponent.prototype, "searchTitle", void 0);
-__decorate([
-    Input()
-], LookupComponent.prototype, "searchEmptyTitle", void 0);
 __decorate([
     Input()
 ], LookupComponent.prototype, "searchEmptyDescription", void 0);
@@ -3571,36 +3545,9 @@ __decorate([
 __decorate([
     Input()
 ], LookupComponent.prototype, "multiSortMeta", void 0);
-__decorate([
-    Input()
-], LookupComponent.prototype, "filterTitle", void 0);
-__decorate([
-    Input()
-], LookupComponent.prototype, "filterLabel", void 0);
-__decorate([
-    Input()
-], LookupComponent.prototype, "clearLabel", void 0);
-__decorate([
-    Input()
-], LookupComponent.prototype, "cancelLabel", void 0);
-__decorate([
-    Input()
-], LookupComponent.prototype, "selectLabel", void 0);
-__decorate([
-    Input()
-], LookupComponent.prototype, "emptyFieldLabel", void 0);
-__decorate([
-    Input()
-], LookupComponent.prototype, "recordLabel", void 0);
-__decorate([
-    Input()
-], LookupComponent.prototype, "recordsLabel", void 0);
 __decorate([
     Input()
 ], LookupComponent.prototype, "placeholder", void 0);
-__decorate([
-    Input()
-], LookupComponent.prototype, "searchTotalRecordsLabel", void 0);
 __decorate([
     Input()
 ], LookupComponent.prototype, "sortableColumnsDisabled", void 0);
@@ -3643,10 +3590,43 @@ __decorate([
 __decorate([
     ViewChild(AutoComplete, { static: false })
 ], LookupComponent.prototype, "autocomplete", void 0);
+__decorate([
+    Input()
+], LookupComponent.prototype, "searchTitle", void 0);
+__decorate([
+    Input()
+], LookupComponent.prototype, "searchEmptyTitle", void 0);
+__decorate([
+    Input()
+], LookupComponent.prototype, "searchTotalRecordsLabel", void 0);
+__decorate([
+    Input()
+], LookupComponent.prototype, "filterTitle", void 0);
+__decorate([
+    Input()
+], LookupComponent.prototype, "filterLabel", void 0);
+__decorate([
+    Input()
+], LookupComponent.prototype, "clearLabel", void 0);
+__decorate([
+    Input()
+], LookupComponent.prototype, "cancelLabel", void 0);
+__decorate([
+    Input()
+], LookupComponent.prototype, "selectLabel", void 0);
+__decorate([
+    Input()
+], LookupComponent.prototype, "emptyFieldLabel", void 0);
+__decorate([
+    Input()
+], LookupComponent.prototype, "recordLabel", void 0);
+__decorate([
+    Input()
+], LookupComponent.prototype, "recordsLabel", void 0);
 LookupComponent = LookupComponent_1 = __decorate([
     Component({
         selector: "s-lookup",
-        template: "<div [ngClass]=\"{ inputgroup: showSearch }\">\n    <p-autoComplete\n        #autocomplete\n        [(ngModel)]=\"value\"\n        [disabled]=\"disabled\"\n        [dataKey]=\"dataKey\"\n        [multiple]=\"multiple\"\n        [inputId]=\"id + '-autocomplete'\"\n        [forceSelection]=\"autocompleteForceSelection\"\n        [suggestions]=\"getLookupSuggestions()\"\n        (completeMethod)=\"lazyLoadLookup($event)\"\n        (onSelect)=\"onSelect.next($event)\"\n        (onBlur)=\"onBlur.next($event)\"\n        (onFocus)=\"onFocus.next($event)\"\n        (onUnselect)=\"onUnselect.next($event)\"\n        (onClear)=\"onClear.next($event)\"\n        (onKeyUp)=\"onKeyUp.next($event)\"\n        [field]=\"lookupDisplayField\"\n        [emptyMessage]=\"lookupEmptyMessage\"\n        [dropdown]=\"!showSearch\"\n        [appendTo]=\"lookupAppendTo\"\n        [placeholder]=\"placeholder || ' '\"\n        [autoHighlight]=\"true\"\n        inputStyleClass=\"mousetrap\">\n        <ng-template let-item pTemplate=\"selectedItem\">\n            <span\n                class=\"ui-autocomplete-token-label ng-tns-c65-43 ng-star-inserted\"\n                [sTooltip]=\"lookupDisplayFieldTooltip ? item[lookupDisplayField] : null\"\n                tooltipPosition=\"top\">\n                {{item[lookupDisplayField]}}\n            </span>\n        </ng-template>\n    </p-autoComplete>\n    <button\n        *ngIf=\"showSearch\"\n        pButton\n        type=\"button\"\n        icon=\"fa fa-search\"\n        class=\"button-addon\"\n        [disabled]=\"disabled\"\n        (click)=\"showDialog()\">\n    </button>\n</div>\n<p-dialog\n    appendTo=\"body\"\n    styleClass=\"s-lookup-modal\"\n    [header]=\"searchTitle\"\n    [(visible)]=\"dialogVisible\"\n    [modal]=\"true\"\n    (onHide)=\"hideDialog()\"\n    [blockScroll]=\"true\"\n    [focusOnShow]=\"true\"\n    [draggable]=\"false\"\n    [resizable]=\"false\"\n    #dialog>\n    <div\n        *ngIf=\"dialogVisible\"\n        class=\"s-lookup-modal-container\">\n        <div\n            *ngIf=\"searchFields && searchFields.length\"\n            class=\"filter\"\n            [@collapseContent]=\"collapsed \n                ? { value: 'hidden', params: { transitionParams: transitionOptions } }\n                : { value: 'visible', params: { transitionParams: transitionOptions } }\"\n            (@collapseContent.done)=\"onToggleDone()\">\n            <form\n                [formGroup]=\"formGroupDialog\"\n                novalidate\n                autocomplete=\"off\">\n                <div\n                    *ngIf=\"!collapsed\"\n                    class=\"form-content\"\n                    [@childCollapseContent]=\"collapsed\n                        ? { value: ':leave', params: { transitionParams: transitionOptions } }\n                        : { value: ':enter', params: { transitionParams: transitionOptions } }\">\n                    <div class=\"filter-title sds-section-title\">{{ filterTitle }}</div>\n                    <div class=\"form-fields\">\n                        <s-dynamic-form\n                            [fields]=\"searchFields\"\n                            [form]=\"formGroupDialog\">\n                        </s-dynamic-form>\n                    </div>\n                    <div class=\"ui-g\">\n                        <div class=\"ui-g-12\">\n                            <s-button\n                                [id]=\"id + '-filter-button'\"\n                                type=\"submit\"\n                                [label]=\"filterLabel\"\n                                (onClick)=\"search()\"\n                                sTooltip=\"(ALT + SHIFT + F)\"\n                                tooltipPosition=\"top\"\n                                showDelay=\"500\">\n                            </s-button>\n                            <s-button\n                                [id]=\"id + '-clear-button'\"\n                                type=\"button\"\n                                [label]=\"clearLabel\"\n                                (onClick)=\"clear()\"\n                                priority=\"link\"\n                                sTooltip=\"(ALT + SHIFT + L)\"\n                                tooltipPosition=\"top\"\n                                showDelay=\"500\">\n                            </s-button>\n                        </div>\n                    </div>\n                </div>\n            </form>\n        </div>\n        <div\n            *ngIf=\"searchFields && searchFields.length\"\n            class=\"filter-toggle\">\n            <div class=\"filter-toggle--start-border-mask\"></div>\n            <button\n                [id]=\"id + '-filter-toggle-button'\"\n                type=\"button\"\n                (click)=\"filterToggle()\">\n                <span\n                    class=\"fa\"\n                    [ngClass]=\"{'fa-chevron-left': !collapsed, 'fa-chevron-right': collapsed}\"\n                    aria-hidden=\"true\">\n                </span>\n            </button>\n            <div class=\"filter-toggle--end-border-mask\"></div>\n        </div>\n        <div\n            class=\"content\"\n            [ngClass]=\"{'empty-content': !searchTotalRecords && !loading}\">\n            <s-empty-state\n                [id]=\"id + '-empty-state'\"\n                *ngIf=\"!searchTotalRecords && !loading\"\n                [title]=\"searchEmptyTitle\"\n                [description]=\"searchEmptyDescription\"\n                iconClass=\"fa fa-search\">\n            </s-empty-state>\n            <p-table\n                [dataKey]=\"dataKey\"\n                [value]=\"getGridData()\"\n                [columns]=\"searchGridFields\"\n                [lazy]=\"true\"\n                [scrollable]=\"true\"\n                [paginator]=\"true\"\n                sortMode=\"multiple\"\n                [totalRecords]=\"searchTotalRecords\"\n                [rows]=\"10\"\n                [selection]=\"selected\"\n                (onLazyLoad)=\"lazyLoadGrid($event)\"\n                *sLoadingState=\"loading\"\n                [multiSortMeta]=\"multiSortMeta\"\n                [attr.data-hidden]=\"!searchTotalRecords && !loading\"\n                [selectionMode]=\"multiple ? 'multiple' : 'single'\"\n                (selectionChange)=\"onSelectionChange($event)\">\n                <ng-template pTemplate=\"colgroup\" let-columns>\n                    <colgroup>\n                        <col\n                            *ngIf=\"multiple\"\n                            style=\"width: 50px\" />\n                        <col\n                            *ngFor=\"let col of columns\"\n                            [style.width]=\"col.width\" />\n                    </colgroup>\n                </ng-template>\n                <ng-template pTemplate=\"header\" let-columns>\n                    <tr>\n                        <th\n                            *ngIf=\"multiple\"\n                            style=\"width: 50px\">\n                            <s-table-header-checkbox\n                                [useAllObject]=\"lookupRowProps ? false : true\"\n                                [rowProps]=\"lookupRowProps\">\n                            </s-table-header-checkbox>\n                        </th>\n                        <th\n                            [style.width]=\"col.width\"\n                            *ngFor=\"let col of columns\"\n                            [pSortableColumn]=\"col.name\"\n                            [pSortableColumnDisabled]=\"sortableColumnsDisabled?.includes(col.name)\">\n                            <div class=\"senior-header\">\n                                <span class=\"senior-header-title\">{{ col.label }}</span>\n                                <p-sortIcon\n                                    [field]=\"col.name\"\n                                    *ngIf=\"!sortableColumnsDisabled?.includes(col.name)\">\n                                </p-sortIcon>\n                            </div>\n                        </th>\n                    </tr>\n                </ng-template>\n                <ng-template\n                    pTemplate=\"body\"\n                    let-rowData\n                    let-columns\n                    let-rowIndex=\"rowIndex\">\n                    <tr\n                        sNavigation\n                        [pSelectableRow]=\"rowData\"\n                        [pSelectableRowIndex]=\"rowIndex\"\n                        sDoubleClick (onDoubleClick)=\"onTableRowDoubleClick(rowData)\">\n                        <td\n                            *ngIf=\"multiple\"\n                            style=\"width: 50px\"\n                            tabindex=\"0\">\n                            <p-tableCheckbox\n                                [value]=\"rowData\"\n                                [pSelectableRow]=\"rowData\">\n                            </p-tableCheckbox>\n                        </td>\n                        <td\n                            [style.width]=\"col['width']\"\n                            *ngFor=\"let col of searchGridFields\"\n                            [ngSwitch]=\"col.type\"\n                            tabindex=\"0\">\n                            <ng-container *ngSwitchCase=\"'Boolean'\">\n                                <ng-container *ngIf=\"isBooleanValue(rowData, col.name); else emptyTemplate\">\n                                    <span>{{ getBooleanLabel(rowData, col.name, col.optionsLabel) }}</span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'Date'\">\n                                <ng-container *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\">\n                                    <span>{{ getFieldValue(rowData, col.name) | localizedDate: col.calendarLocaleOptions?.dateFormat || \"L\" | async }}</span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'DateTime'\">\n                                <ng-container *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\">\n                                    <span>{{ getFieldValue(rowData, col.name) | localizedDate | async }}</span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'LocalDateTime'\">\n                                <ng-container *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\">\n                                    <span>{{ getFieldValue(rowData, col.name) | localizedDate | async }}</span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'Time'\">\n                                <ng-container *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\">\n                                    <span>{{ getFieldValue(rowData, col.name) | localizedTime: col.calendarLocaleOptions?.dateFormat || \"LTS\" | async }}</span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'Integer'\">\n                                <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                    <span> {{ getFieldValue(rowData, col.name) | localizedBignumber: getIntegerMaskConfig(col) | async }} </span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'Double'\">\n                                <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                    <span> {{ getFieldValue(rowData, col.name) | localizedBignumber: getDoubleMaskConfig(col) | async }} </span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'Money'\">\n                                <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                    <span> {{ getFieldValue(rowData, col.name) | localizedBignumber: getMoneyMaskConfig(col) | async }} </span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'Number'\">\n                                <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                    <span> {{ getFieldValue(rowData, col.name) | localizedBignumber: getNumberMaskConfig(col) | async }} </span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'Enum'\">\n                                <ng-container\n                                    *ngIf=\"getLabelForValue(getFieldValue(rowData, col.name), col.options); else emptyTemplate\"\n                                >\n                                    <span> {{ getLabelForValue(getFieldValue(rowData, col.name), col.options) }} </span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchDefault>\n                                <ng-container *ngIf=\"col.mask && col.mask()\">\n                                    <ng-container *ngIf=\"(isNumber(rowData, col.name) || getFieldValue(rowData, col.name))\">\n                                        <span>{{ getFieldValue(rowData, col.name) | sMaskFormatter: col.mask() }}</span>\n                                    </ng-container>\n                                </ng-container>\n                                <ng-container *ngIf=\"!(col.mask && col.mask())\">\n                                    <ng-container *ngIf=\"(isNumber(rowData, col.name) || getFieldValue(rowData, col.name)); else emptyTemplate\">\n                                        <span>{{ getFieldValue(rowData, col.name) }}</span>\n                                    </ng-container>\n                                </ng-container>\n                            </ng-container>\n                        </td>\n                    </tr>\n                </ng-template>\n                <ng-template pTemplate=\"paginatorright\">\n                    <span [attr.data-hidden]=\"loading\">\n                        {{ printRecordTotalizer() }}\n                    </span>\n                </ng-template>\n            </p-table>\n        </div>\n    </div>\n    <p-footer>\n        <s-button\n            [id]=\"id + '-select-button'\"\n            type=\"button\"\n            [label]=\"selectLabel\"\n            (onClick)=\"select()\"\n            sTooltip=\"(ALT + SHIFT + S)\"\n            tooltipPosition=\"top\"\n            showDelay=\"500\"\n            [disabled]=\"!selected?.length\">\n        </s-button>\n        <s-button\n            [id]=\"id + '-cancel-button'\"\n            type=\"button\"\n            priority=\"link\"\n            [label]=\"cancelLabel\"\n            (onClick)=\"hideDialog()\"\n            sTooltip=\"(ALT + SHIFT + C)\"\n            tooltipPosition=\"top\"\n            showDelay=\"500\">\n        </s-button>\n    </p-footer>\n</p-dialog>\n<ng-template #emptyTemplate>\n    <span [ngClass]=\"'sds-empty-value'\">{{ emptyFieldLabel }}</span>\n</ng-template>\n",
+        template: "<div [ngClass]=\"{ inputgroup: showSearch }\">\n    <p-autoComplete\n        #autocomplete\n        [(ngModel)]=\"value\"\n        [disabled]=\"disabled\"\n        [dataKey]=\"dataKey\"\n        [multiple]=\"multiple\"\n        [inputId]=\"id + '-autocomplete'\"\n        [forceSelection]=\"autocompleteForceSelection\"\n        [suggestions]=\"getLookupSuggestions()\"\n        (completeMethod)=\"lazyLoadLookup($event)\"\n        (onSelect)=\"onSelect.next($event)\"\n        (onBlur)=\"onBlur.next($event)\"\n        (onFocus)=\"onFocus.next($event)\"\n        (onUnselect)=\"onUnselect.next($event)\"\n        (onClear)=\"onClear.next($event)\"\n        (onKeyUp)=\"onKeyUp.next($event)\"\n        [field]=\"lookupDisplayField\"\n        [emptyMessage]=\"lookupEmptyMessage\"\n        [dropdown]=\"!showSearch\"\n        [appendTo]=\"lookupAppendTo\"\n        [placeholder]=\"placeholder || ' '\"\n        [autoHighlight]=\"true\"\n        inputStyleClass=\"mousetrap\">\n        <ng-template let-item pTemplate=\"selectedItem\">\n            <span\n                class=\"ui-autocomplete-token-label ng-tns-c65-43 ng-star-inserted\"\n                [sTooltip]=\"lookupDisplayFieldTooltip ? item[lookupDisplayField] : null\"\n                tooltipPosition=\"top\">\n                {{item[lookupDisplayField]}}\n            </span>\n        </ng-template>\n    </p-autoComplete>\n    <button\n        *ngIf=\"showSearch\"\n        pButton\n        type=\"button\"\n        icon=\"fa fa-search\"\n        class=\"button-addon\"\n        [disabled]=\"disabled\"\n        (click)=\"showDialog()\">\n    </button>\n</div>\n<p-dialog\n    appendTo=\"body\"\n    styleClass=\"s-lookup-modal\"\n    [header]=\"searchTitle || 'platform.angular_components.advanced_search' | translate\"\n    [(visible)]=\"dialogVisible\"\n    [modal]=\"true\"\n    (onHide)=\"hideDialog()\"\n    [blockScroll]=\"true\"\n    [focusOnShow]=\"true\"\n    [draggable]=\"false\"\n    [resizable]=\"false\"\n    #dialog>\n    <div\n        *ngIf=\"dialogVisible\"\n        class=\"s-lookup-modal-container\">\n        <div\n            *ngIf=\"searchFields && searchFields.length\"\n            class=\"filter\"\n            [@collapseContent]=\"collapsed \n                ? { value: 'hidden', params: { transitionParams: transitionOptions } }\n                : { value: 'visible', params: { transitionParams: transitionOptions } }\"\n            (@collapseContent.done)=\"onToggleDone()\">\n            <form\n                [formGroup]=\"formGroupDialog\"\n                novalidate\n                autocomplete=\"off\">\n                <div\n                    *ngIf=\"!collapsed\"\n                    class=\"form-content\"\n                    [@childCollapseContent]=\"collapsed\n                        ? { value: ':leave', params: { transitionParams: transitionOptions } }\n                        : { value: ':enter', params: { transitionParams: transitionOptions } }\">\n                    <div class=\"filter-title sds-section-title\">\n                        {{ filterTitle || \"platform.angular_components.filters\" | translate }}\n                    </div>\n                    <div class=\"form-fields\">\n                        <s-dynamic-form\n                            [fields]=\"searchFields\"\n                            [form]=\"formGroupDialog\">\n                        </s-dynamic-form>\n                    </div>\n                    <div class=\"ui-g\">\n                        <div class=\"ui-g-12\">\n                            <s-button\n                                [id]=\"id + '-filter-button'\"\n                                type=\"submit\"\n                                [label]=\"filterLabel || 'platform.angular_components.filter' | translate\"\n                                (onClick)=\"search()\"\n                                sTooltip=\"(ALT + SHIFT + F)\"\n                                tooltipPosition=\"top\"\n                                showDelay=\"500\">\n                            </s-button>\n                            <s-button\n                                [id]=\"id + '-clear-button'\"\n                                type=\"button\"\n                                [label]=\"clearLabel || 'platform.angular_components.clear' | translate\"\n                                (onClick)=\"clear()\"\n                                priority=\"link\"\n                                sTooltip=\"(ALT + SHIFT + L)\"\n                                tooltipPosition=\"top\"\n                                showDelay=\"500\">\n                            </s-button>\n                        </div>\n                    </div>\n                </div>\n            </form>\n        </div>\n        <div\n            *ngIf=\"searchFields && searchFields.length\"\n            class=\"filter-toggle\">\n            <div class=\"filter-toggle--start-border-mask\"></div>\n            <button\n                [id]=\"id + '-filter-toggle-button'\"\n                type=\"button\"\n                (click)=\"filterToggle()\">\n                <span\n                    class=\"fa\"\n                    [ngClass]=\"{'fa-chevron-left': !collapsed, 'fa-chevron-right': collapsed}\"\n                    aria-hidden=\"true\">\n                </span>\n            </button>\n            <div class=\"filter-toggle--end-border-mask\"></div>\n        </div>\n        <div\n            class=\"content\"\n            [ngClass]=\"{'empty-content': !searchTotalRecords && !loading}\">\n            <s-empty-state\n                [id]=\"id + '-empty-state'\"\n                *ngIf=\"!searchTotalRecords && !loading\"\n                [title]=\"searchEmptyTitle || 'platform.angular_components.no_records_found' | translate\"\n                [description]=\"searchEmptyDescription\"\n                iconClass=\"fa fa-search\">\n            </s-empty-state>\n            <p-table\n                [dataKey]=\"dataKey\"\n                [value]=\"getGridData()\"\n                [columns]=\"searchGridFields\"\n                [lazy]=\"true\"\n                [scrollable]=\"true\"\n                [paginator]=\"true\"\n                sortMode=\"multiple\"\n                [totalRecords]=\"searchTotalRecords\"\n                [rows]=\"10\"\n                [selection]=\"selected\"\n                (onLazyLoad)=\"lazyLoadGrid($event)\"\n                *sLoadingState=\"loading\"\n                [multiSortMeta]=\"multiSortMeta\"\n                [attr.data-hidden]=\"!searchTotalRecords && !loading\"\n                [selectionMode]=\"multiple ? 'multiple' : 'single'\"\n                (selectionChange)=\"onSelectionChange($event)\">\n                <ng-template pTemplate=\"colgroup\" let-columns>\n                    <colgroup>\n                        <col\n                            *ngIf=\"multiple\"\n                            style=\"width: 50px\" />\n                        <col\n                            *ngFor=\"let col of columns\"\n                            [style.width]=\"col.width\" />\n                    </colgroup>\n                </ng-template>\n                <ng-template pTemplate=\"header\" let-columns>\n                    <tr>\n                        <th\n                            *ngIf=\"multiple\"\n                            style=\"width: 50px\">\n                            <s-table-header-checkbox\n                                [useAllObject]=\"lookupRowProps ? false : true\"\n                                [rowProps]=\"lookupRowProps\">\n                            </s-table-header-checkbox>\n                        </th>\n                        <th\n                            [style.width]=\"col.width\"\n                            *ngFor=\"let col of columns\"\n                            [pSortableColumn]=\"col.name\"\n                            [pSortableColumnDisabled]=\"sortableColumnsDisabled?.includes(col.name)\">\n                            <div class=\"senior-header\">\n                                <span class=\"senior-header-title\">{{ col.label }}</span>\n                                <p-sortIcon\n                                    [field]=\"col.name\"\n                                    *ngIf=\"!sortableColumnsDisabled?.includes(col.name)\">\n                                </p-sortIcon>\n                            </div>\n                        </th>\n                    </tr>\n                </ng-template>\n                <ng-template\n                    pTemplate=\"body\"\n                    let-rowData\n                    let-columns\n                    let-rowIndex=\"rowIndex\">\n                    <tr\n                        sNavigation\n                        [pSelectableRow]=\"rowData\"\n                        [pSelectableRowIndex]=\"rowIndex\"\n                        sDoubleClick (onDoubleClick)=\"onTableRowDoubleClick(rowData)\">\n                        <td\n                            *ngIf=\"multiple\"\n                            style=\"width: 50px\"\n                            tabindex=\"0\">\n                            <p-tableCheckbox\n                                [value]=\"rowData\"\n                                [pSelectableRow]=\"rowData\">\n                            </p-tableCheckbox>\n                        </td>\n                        <td\n                            [style.width]=\"col['width']\"\n                            *ngFor=\"let col of searchGridFields\"\n                            [ngSwitch]=\"col.type\"\n                            tabindex=\"0\">\n                            <ng-container *ngSwitchCase=\"'Boolean'\">\n                                <ng-container *ngIf=\"isBooleanValue(rowData, col.name); else emptyTemplate\">\n                                    <span>{{ getBooleanLabel(rowData, col.name, col.optionsLabel) }}</span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'Date'\">\n                                <ng-container *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\">\n                                    <span>{{ getFieldValue(rowData, col.name) | localizedDate: col.calendarLocaleOptions?.dateFormat || \"L\" | async }}</span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'DateTime'\">\n                                <ng-container *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\">\n                                    <span>{{ getFieldValue(rowData, col.name) | localizedDate | async }}</span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'LocalDateTime'\">\n                                <ng-container *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\">\n                                    <span>{{ getFieldValue(rowData, col.name) | localizedDate | async }}</span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'Time'\">\n                                <ng-container *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\">\n                                    <span>{{ getFieldValue(rowData, col.name) | localizedTime: col.calendarLocaleOptions?.dateFormat || \"LTS\" | async }}</span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'Integer'\">\n                                <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                    <span> {{ getFieldValue(rowData, col.name) | localizedBignumber: getIntegerMaskConfig(col) | async }} </span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'Double'\">\n                                <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                    <span> {{ getFieldValue(rowData, col.name) | localizedBignumber: getDoubleMaskConfig(col) | async }} </span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'Money'\">\n                                <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                    <span> {{ getFieldValue(rowData, col.name) | localizedBignumber: getMoneyMaskConfig(col) | async }} </span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'Number'\">\n                                <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n                                    <span> {{ getFieldValue(rowData, col.name) | localizedBignumber: getNumberMaskConfig(col) | async }} </span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"'Enum'\">\n                                <ng-container\n                                    *ngIf=\"getLabelForValue(getFieldValue(rowData, col.name), col.options); else emptyTemplate\"\n                                >\n                                    <span> {{ getLabelForValue(getFieldValue(rowData, col.name), col.options) }} </span>\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngSwitchDefault>\n                                <ng-container *ngIf=\"col.mask && col.mask()\">\n                                    <ng-container *ngIf=\"(isNumber(rowData, col.name) || getFieldValue(rowData, col.name))\">\n                                        <span>{{ getFieldValue(rowData, col.name) | sMaskFormatter: col.mask() }}</span>\n                                    </ng-container>\n                                </ng-container>\n                                <ng-container *ngIf=\"!(col.mask && col.mask())\">\n                                    <ng-container *ngIf=\"(isNumber(rowData, col.name) || getFieldValue(rowData, col.name)); else emptyTemplate\">\n                                        <span>{{ getFieldValue(rowData, col.name) }}</span>\n                                    </ng-container>\n                                </ng-container>\n                            </ng-container>\n                        </td>\n                    </tr>\n                </ng-template>\n                <ng-template pTemplate=\"paginatorright\">\n                    <span [attr.data-hidden]=\"loading\">\n                        {{ printRecordTotalizer() }}\n                    </span>\n                </ng-template>\n            </p-table>\n        </div>\n    </div>\n    <p-footer>\n        <s-button\n            [id]=\"id + '-select-button'\"\n            type=\"button\"\n            [label]=\"selectLabel || 'platform.angular_components.select' | translate\"\n            (onClick)=\"select()\"\n            sTooltip=\"(ALT + SHIFT + S)\"\n            tooltipPosition=\"top\"\n            showDelay=\"500\"\n            [disabled]=\"!selected?.length\">\n        </s-button>\n        <s-button\n            [id]=\"id + '-cancel-button'\"\n            type=\"button\"\n            priority=\"link\"\n            [label]=\"cancelLabel || 'platform.angular_components.cancel' | translate\"\n            (onClick)=\"hideDialog()\"\n            sTooltip=\"(ALT + SHIFT + C)\"\n            tooltipPosition=\"top\"\n            showDelay=\"500\">\n        </s-button>\n    </p-footer>\n</p-dialog>\n<ng-template #emptyTemplate>\n    <span [ngClass]=\"'sds-empty-value'\">\n        {{ emptyFieldLabel || 'platform.angular_components.not_informed' | translate }}\n    </span>\n</ng-template>\n",
         providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -7345,6 +7325,7 @@ DynamicFormModule = __decorate([
             SwitchModule,
             PasswordStrengthModule,
             SliderModule,
+            TranslateModule,
         ],
         declarations: [
             AutocompleteFieldComponent,
@@ -8096,11 +8077,12 @@ class DateUtils {
             .startOf("month")
             .format("MMMM");
         const monthNameCapitalized = monthName.charAt(0).toUpperCase() + monthName.slice(1);
-        const dateToFormat = moment$7(date);
+        const dateToFormat = moment$7(date).locale(lang);
         const format_map = {
             YYYY: dateToFormat.format("YYYY"),
             MM: dateToFormat.format("MM"),
             DD: dateToFormat.format("DD"),
+            ddd: dateToFormat.format("ddd").toUpperCase().replace(".", ""),
             HH: dateToFormat.format("HH"),
             mm: dateToFormat.format("mm"),
             ss: dateToFormat.format("ss"),
@@ -8319,6 +8301,7 @@ $.attr = (element, attr, value) => {
 
 var ViewMode;
 (function (ViewMode) {
+    ViewMode["QuarterHour"] = "quarterHour";
     ViewMode["Hour"] = "hour";
     ViewMode["QuarterDay"] = "quarterDay";
     ViewMode["HalfDay"] = "halfDay";
@@ -8548,7 +8531,7 @@ class Bar {
     _computeX() {
         const { step, columnWidth } = this._gantt.options;
         let x;
-        if (this._gantt.view_is([ViewMode.Hour, ViewMode.QuarterDay, ViewMode.HalfDay, ViewMode.Day])) {
+        if (this._gantt.view_is([ViewMode.QuarterHour, ViewMode.Hour, ViewMode.QuarterDay, ViewMode.HalfDay, ViewMode.Day])) {
             const diff = DateUtils.diff(this.task.start, this._gantt.minDate, "minutes");
             x = (diff / step) * (columnWidth / 60);
         }
@@ -8932,7 +8915,11 @@ class Gantt {
     update_view_scale(view_mode) {
         this.options.viewMode = view_mode;
         // this.isHourView = false;
-        if (view_mode === ViewMode.Hour) {
+        if (view_mode === ViewMode.QuarterHour) {
+            this.options.step = 24 / 24 / 4;
+            this.options.columnWidth = 50;
+        }
+        else if (view_mode === ViewMode.Hour) {
             this.options.step = 24 / 24;
             this.options.columnWidth = 50;
         }
@@ -8965,7 +8952,7 @@ class Gantt {
         this.setup_date_values();
     }
     setup_gantt_dates() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
         this._minDate = null;
         this._maxDate = null;
         for (let task of this.tasks) {
@@ -8977,36 +8964,37 @@ class Gantt {
                 this._maxDate = task.end;
             }
         }
-        this._realMinDate = this.minDate;
-        this._realMaxDate = this.maxDate;
         switch (this.options.viewMode) {
+            case ViewMode.QuarterHour:
+                this._minDate = DateUtils.add(this.minDate, -((_a = this.options.marginBeforeStart) !== null && _a !== void 0 ? _a : 15), "minutes");
+                this._maxDate = DateUtils.add(this.maxDate, (_b = this.options.marginAfterEnd) !== null && _b !== void 0 ? _b : 15, "minutes");
             case ViewMode.Hour:
-                this._minDate = DateUtils.add(this.minDate, -((_a = this.options.marginBeforeStart) !== null && _a !== void 0 ? _a : 1), "hour");
-                this._maxDate = DateUtils.add(this.maxDate, (_b = this.options.marginAfterEnd) !== null && _b !== void 0 ? _b : 1, "hour");
+                this._minDate = DateUtils.add(this.minDate, -((_c = this.options.marginBeforeStart) !== null && _c !== void 0 ? _c : 1), "hour");
+                this._maxDate = DateUtils.add(this.maxDate, (_d = this.options.marginAfterEnd) !== null && _d !== void 0 ? _d : 1, "hour");
                 break;
             case ViewMode.QuarterDay:
-                this._minDate = DateUtils.add(this.minDate, -((_c = this.options.marginBeforeStart) !== null && _c !== void 0 ? _c : 6), "hour");
-                this._maxDate = DateUtils.add(this.maxDate, (_d = this.options.marginAfterEnd) !== null && _d !== void 0 ? _d : 6, "hour");
+                this._minDate = DateUtils.add(this.minDate, -((_e = this.options.marginBeforeStart) !== null && _e !== void 0 ? _e : 6), "hour");
+                this._maxDate = DateUtils.add(this.maxDate, (_f = this.options.marginAfterEnd) !== null && _f !== void 0 ? _f : 6, "hour");
                 break;
             case ViewMode.HalfDay:
-                this._minDate = DateUtils.add(this.minDate, -((_e = this.options.marginBeforeStart) !== null && _e !== void 0 ? _e : 12), "hour");
-                this._maxDate = DateUtils.add(this.maxDate, (_f = this.options.marginAfterEnd) !== null && _f !== void 0 ? _f : 12, "hour");
+                this._minDate = DateUtils.add(this.minDate, -((_g = this.options.marginBeforeStart) !== null && _g !== void 0 ? _g : 12), "hour");
+                this._maxDate = DateUtils.add(this.maxDate, (_h = this.options.marginAfterEnd) !== null && _h !== void 0 ? _h : 12, "hour");
                 break;
             case ViewMode.Day:
-                this._minDate = DateUtils.add(this.minDate, -((_g = this.options.marginBeforeStart) !== null && _g !== void 0 ? _g : 1), "day");
-                this._maxDate = DateUtils.add(this.maxDate, (_h = this.options.marginAfterEnd) !== null && _h !== void 0 ? _h : 1, "day");
+                this._minDate = DateUtils.add(this.minDate, -((_j = this.options.marginBeforeStart) !== null && _j !== void 0 ? _j : 1), "day");
+                this._maxDate = DateUtils.add(this.maxDate, (_k = this.options.marginAfterEnd) !== null && _k !== void 0 ? _k : 1, "day");
                 break;
             case ViewMode.Week:
-                this._minDate = DateUtils.add(this.minDate, -((_j = this.options.marginBeforeStart) !== null && _j !== void 0 ? _j : 1), "week");
-                this._maxDate = DateUtils.add(this.maxDate, (_k = this.options.marginAfterEnd) !== null && _k !== void 0 ? _k : 1, "week");
+                this._minDate = DateUtils.add(this.minDate, -((_l = this.options.marginBeforeStart) !== null && _l !== void 0 ? _l : 1), "week");
+                this._maxDate = DateUtils.add(this.maxDate, (_m = this.options.marginAfterEnd) !== null && _m !== void 0 ? _m : 1, "week");
                 break;
             case ViewMode.Month:
-                this._minDate = DateUtils.add(this.minDate, -((_l = this.options.marginBeforeStart) !== null && _l !== void 0 ? _l : 1), "month");
-                this._maxDate = DateUtils.add(this.maxDate, (_m = this.options.marginAfterEnd) !== null && _m !== void 0 ? _m : 1, "month");
+                this._minDate = DateUtils.add(this.minDate, -((_o = this.options.marginBeforeStart) !== null && _o !== void 0 ? _o : 1), "month");
+                this._maxDate = DateUtils.add(this.maxDate, (_p = this.options.marginAfterEnd) !== null && _p !== void 0 ? _p : 1, "month");
                 break;
             case ViewMode.Year:
-                this._minDate = DateUtils.add(this.minDate, -((_o = this.options.marginBeforeStart) !== null && _o !== void 0 ? _o : 1), "year");
-                this._maxDate = DateUtils.add(this.maxDate, (_p = this.options.marginAfterEnd) !== null && _p !== void 0 ? _p : 1, "year");
+                this._minDate = DateUtils.add(this.minDate, -((_q = this.options.marginBeforeStart) !== null && _q !== void 0 ? _q : 1), "year");
+                this._maxDate = DateUtils.add(this.maxDate, (_r = this.options.marginAfterEnd) !== null && _r !== void 0 ? _r : 1, "year");
                 break;
         }
     }
@@ -9034,8 +9022,6 @@ class Gantt {
             const columnWidth = (this.options.containerWidth - 1) / this.dates.length;
             this.options.columnWidth = columnWidth < 45 ? 45 : columnWidth;
         }
-        console.log("cur_date", cur_date);
-        console.log("dates", this.dates);
     }
     bind_events() {
         this.bind_grid_click();
@@ -9140,23 +9126,24 @@ class Gantt {
             this.tasks.length;
         for (let date of this.dates) {
             let tick_class = "tick";
-            // thick tick for monday
-            if (this.view_is(ViewMode.Day) && date.getDate() === 1) {
+            if (this.view_is(ViewMode.QuarterHour) && date.getHours() === 0 && date.getMinutes() === 0) {
+                // thick tick for first hour of day.
+                tick_class += " thick";
+            }
+            else if (this.view_is([ViewMode.Hour, ViewMode.QuarterDay, ViewMode.HalfDay]) && date.getHours() === 0) {
+                // thick tick for first hour of day.
                 tick_class += " thick";
             }
-            // thick tick for first week
-            if (this.view_is(ViewMode.Week) &&
-                date.getDate() >= 1 &&
-                date.getDate() < 8) {
+            else if (this.view_is(ViewMode.Day) && date.getDate() === 1) {
+                // thick tick for monday
                 tick_class += " thick";
             }
-            // thick ticks for quarters
-            if (this.view_is(ViewMode.Month) && date.getMonth() % 3 === 0) {
+            else if (this.view_is(ViewMode.Week) && date.getDate() >= 1 && date.getDate() < 8) {
+                // thick tick for first week
                 tick_class += " thick";
             }
-            // Thick ticks for hours
-            if (this.view_is(ViewMode.Hour) &&
-                date.getHours() == 0) {
+            else if (this.view_is(ViewMode.Month) && date.getMonth() % 3 === 0) {
+                // thick ticks for quarters
                 tick_class += " thick";
             }
             createSVG("path", {
@@ -9185,7 +9172,7 @@ class Gantt {
             let x = 0;
             for (let date of this.dates) {
                 let y = (this.options.headerHeight + this.options.padding) / 2;
-                let isToday = date.toString() == DateUtils.today();
+                let isToday = date == DateUtils.today();
                 let isWeekend = (date.getDay() == 0 || date.getDay() == 6);
                 let className;
                 if (isToday) {
@@ -9215,19 +9202,8 @@ class Gantt {
     }
     make_dates() {
         const dates = this.get_dates_to_draw();
-        const isHourView = this.view_is([ViewMode.Hour, ViewMode.QuarterDay, ViewMode.HalfDay]);
-        let counter = 0;
         for (let i = 0; i < dates.length; i++) {
             const date = dates[i];
-            if (isHourView && date.date >= this._realMinDate && date.date <= this._realMaxDate) {
-                createSVG("text", {
-                    x: date.lower_x,
-                    y: date.lower_y,
-                    innerHTML: `H${counter++ * this.options.step}`,
-                    class: "title-1",
-                    append_to: this.layers.date,
-                });
-            }
             createSVG("text", {
                 x: date.lower_x,
                 y: date.lower_y + 20,
@@ -9235,6 +9211,15 @@ class Gantt {
                 class: "title-2",
                 append_to: this.layers.date,
             });
+            if (date.middle_text) {
+                createSVG("text", {
+                    x: date.middle_x,
+                    y: date.middle_y,
+                    innerHTML: date.middle_text,
+                    class: "middle-text",
+                    append_to: this.layers.date,
+                });
+            }
             if (date.upper_text) {
                 const $upper_text = createSVG("text", {
                     x: date.upper_x,
@@ -9264,67 +9249,93 @@ class Gantt {
             last_date = DateUtils.add(date, 1, "year");
         }
         const date_text = {
-            hourLower: DateUtils.format(date, "HH:mm", this.options.language),
-            quarterDayLower: DateUtils.format(date, "HH:mm", this.options.language),
-            halfDayLower: DateUtils.format(date, "HH:mm", this.options.language),
-            dayLower: DateUtils.format(date, "D", this.options.language),
-            weekLower: date.getMonth() !== last_date.getMonth()
+            // quarter hour
+            quarterHourUpper: date.getDate() !== last_date.getDate()
                 ? DateUtils.format(date, "D MMM", this.options.language)
-                : DateUtils.format(date, "D", this.options.language),
-            monthLower: DateUtils.format(date, "MMMM", this.options.language),
-            yearLower: DateUtils.format(date, "YYYY", this.options.language),
+                : "",
+            quarterHourLower: DateUtils.format(date, "HH:mm", this.options.language),
+            // hour
+            hourUpper: date.getDate() !== last_date.getDate()
+                ? DateUtils.format(date, "D MMM", this.options.language)
+                : "",
+            hourLower: DateUtils.format(date, "HH:mm", this.options.language),
+            // quarter day
             quarterDayUpper: date.getDate() !== last_date.getDate()
                 ? DateUtils.format(date, "D MMM", this.options.language)
                 : "",
+            quarterDayLower: DateUtils.format(date, "HH:mm", this.options.language),
+            // half day
             halfDayUpper: (date.getDate() !== last_date.getDate())
                 ? (((date.getMonth() !== last_date.getMonth()) || i < 2)
                     ? DateUtils.format(date, "D MMM", this.options.language)
                     : DateUtils.format(date, "D", this.options.language))
                 : "",
+            halfDayLower: DateUtils.format(date, "HH:mm", this.options.language),
+            // day
             dayUpper: ((date.getMonth() !== last_date.getMonth()) || i === 0)
                 ? DateUtils.format(date, "MMMM", this.options.language)
                 : "",
+            dayMiddle: DateUtils.format(date, "ddd", this.options.language),
+            dayLower: DateUtils.format(date, "D", this.options.language),
+            // week
             weekUpper: date.getMonth() !== last_date.getMonth()
                 ? DateUtils.format(date, "MMMM", this.options.language)
                 : "",
+            weekLower: date.getMonth() !== last_date.getMonth()
+                ? DateUtils.format(date, "D MMM", this.options.language)
+                : DateUtils.format(date, "D", this.options.language),
+            // month
             monthUpper: date.getFullYear() !== last_date.getFullYear()
                 ? DateUtils.format(date, "YYYY", this.options.language)
                 : "",
+            monthLower: DateUtils.format(date, "MMMM", this.options.language),
+            // year
             yearUpper: date.getFullYear() !== last_date.getFullYear()
                 ? DateUtils.format(date, "YYYY", this.options.language)
                 : "",
-            hourUpper: date.getDate() !== last_date.getDate()
-                ? DateUtils.format(date, "D MMM", this.options.language)
-                : "",
+            yearLower: DateUtils.format(date, "YYYY", this.options.language),
         };
         // Descontando 20 para adcionar uma segunda linha de informação no cabeçalho
         const base_pos = {
             x: i * this.options.columnWidth,
-            lower_y: this.options.headerHeight - 20,
             upper_y: this.options.headerHeight - 20 - 25,
+            middle_y: this.options.headerHeight - 20,
+            lower_y: this.options.headerHeight - 20,
         };
-        debugger;
         const x_pos = {
-            hourLower: this.options.columnWidth / 2,
+            quarterHourUpper: (this.dates.length < 14) ? (this.options.columnWidth) : (this.options.columnWidth * 24 / 2),
+            quarterHourMiddle: this.options.columnWidth / 2,
+            quarterHourLower: this.options.columnWidth / 2,
             hourUpper: (this.dates.length < 14) ? (this.options.columnWidth) : (this.options.columnWidth * 24 / 2),
-            quarterDayLower: this.options.columnWidth / 2,
+            hourMiddle: this.options.columnWidth / 2,
+            hourLower: this.options.columnWidth / 2,
             quarterDayUpper: this.options.columnWidth * 4 / 2,
-            halfDayLower: this.options.columnWidth / 2,
+            quarterDayMiddle: this.options.columnWidth / 2,
+            quarterDayLower: this.options.columnWidth / 2,
             halfDayUpper: this.options.columnWidth * 2 / 2,
-            dayLower: this.options.columnWidth / 2,
+            halfDayMiddle: this.options.columnWidth / 2,
+            halfDayLower: this.options.columnWidth / 2,
             dayUpper: (this.dates.length < 15) ? (this.options.columnWidth) : ((this.options.columnWidth * 30) / 2),
-            weekLower: 0,
+            dayMiddle: this.options.columnWidth / 2 - 12,
+            dayLower: this.options.columnWidth / 2,
             weekUpper: (this.options.columnWidth * 4) / 2,
+            weekMiddle: 0,
+            weekLower: 0,
+            monthUpper: (this.dates.length < 15) ? (this.options.columnWidth) : ((this.options.columnWidth * 12) / 2),
+            monthMiddle: 0,
             monthLower: this.options.columnWidth / 2,
-            monthUpper: (this.options.columnWidth * 12) / 2,
-            yearLower: this.options.columnWidth / 2,
             yearUpper: (this.options.columnWidth * 30) / 2,
+            yearMiddle: this.options.columnWidth / 2,
+            yearLower: this.options.columnWidth / 2,
         };
         return {
             upper_text: date_text[`${this.options.viewMode}Upper`],
+            middle_text: date_text[`${this.options.viewMode}Middle`],
             lower_text: date_text[`${this.options.viewMode}Lower`],
             upper_x: base_pos.x + x_pos[`${this.options.viewMode}Upper`],
             upper_y: base_pos.upper_y,
+            middle_x: base_pos.x + x_pos[`${this.options.viewMode}Middle`],
+            middle_y: base_pos.middle_y,
             lower_x: base_pos.x + x_pos[`${this.options.viewMode}Lower`],
             lower_y: base_pos.lower_y,
             date,
@@ -9578,6 +9589,7 @@ let GanttComponent = class GanttComponent {
     }
     ngOnInit() {
         this._validateViewMode();
+        this._validateTasks();
     }
     ngAfterViewInit() {
         if (this.fullWidth) {
@@ -9587,7 +9599,7 @@ let GanttComponent = class GanttComponent {
             viewMode: this.viewMode,
             marginBeforeStart: this.marginBeforeStart,
             marginAfterEnd: this.marginAfterEnd,
-            language: "pt-BR",
+            language: "pt-br",
             allowMovement: this.allowMovement,
             hasPopup: this.hasPopup,
             containerWidth: this.containerWidth,
@@ -9631,6 +9643,7 @@ let GanttComponent = class GanttComponent {
     }
     _validateViewMode() {
         if (![
+            ViewMode.QuarterHour,
             ViewMode.Hour,
             ViewMode.QuarterDay,
             ViewMode.HalfDay,
@@ -9642,6 +9655,15 @@ let GanttComponent = class GanttComponent {
             throw new Error("Invalid gantt view mode");
         }
     }
+    _validateTasks() {
+        this.tasks.forEach(group => {
+            group.tasks.forEach(task => {
+                if (task.start > task.end) {
+                    throw new Error("invalid task. The start date must be less than the end date.");
+                }
+            });
+        });
+    }
 };
 __decorate([
     Input()
@@ -9702,7 +9724,7 @@ GanttComponent = __decorate([
         selector: "s-gantt",
         template: "<div class=\"outer\" #outer>\n    <div #side>\n        <gantt-side-table\n            *ngIf=\"showSideTable\"\n            [tasks]=\"tasks\"\n            [columnTitle]=\"columnTitle\"\n            [multipleTaskPerLine]=\"multipleTaskPerLine\">\n        </gantt-side-table>\n    </div>\n    <svg id=\"gantt\"></svg>\n</div>\n",
         encapsulation: ViewEncapsulation.None,
-        styles: [".outer{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:start;align-items:flex-start;-ms-flex-line-pack:center;align-content:center;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-direction:row;flex-direction:row}", ".gantt{border:1px solid #e0e0e0}.gantt .weekend-highlight{fill:#b8c2cc;opacity:.5;stroke:#ebeff2;stroke-width:1}.gantt .grid-background{fill:none}.gantt .grid-header,.gantt .grid-row{fill:#fff}.gantt .grid-row:nth-child(even){fill:#f5f5f5}.gantt .row-line{stroke:#ebeff2}.gantt .tick{stroke:#e0e0e0;stroke-width:.4}.gantt .tick.thick{stroke:#533a3a8c;stroke-width:.4}.gantt .today-highlight{fill:#ffe979;opacity:.5}.gantt .arrow{fill:none;stroke:#666;stroke-width:1.4}.gantt .bar{opacity:.8;stroke:#8d99a6;stroke-width:0;transition:stroke-width .3s;-webkit-user-select:none;-ms-user-select:none;user-select:none}.gantt .bar-invalid{fill:transparent;stroke:#8d99a6;stroke-dasharray:5;stroke-width:1}.gantt .bar-invalid~.bar-label{fill:#555}.gantt .bar-label{fill:#fff;text-anchor:middle;font-size:12px;font-weight:lighter}.gantt .bar-label.big{fill:#555;text-anchor:start}.gantt .bar-wrapper{cursor:pointer;outline:0}.gantt .bar-wrapper.active .bar,.gantt .bar-wrapper:hover .bar{opacity:1}.gantt .bar-wrapper.active .bar{stroke:#212533;stroke-width:2}.gantt .lower-text,.gantt .upper-text{font-size:12px;text-anchor:middle}.gantt .upper-text{fill:#555}.gantt .lower-text{fill:#333}.gantt .hide{display:none}.gantt-container{border-left:1px solid #e0e0e0;font-size:12px;overflow:auto;position:relative}.gantt-container .title-1{fill:#999;font-size:12px;font-weight:400;line-height:150%;text-anchor:middle}.gantt-container .title-2{fill:#333;font-size:14px;font-weight:400;line-height:150%;text-anchor:middle}.gantt-container .popup-wrapper{left:0;position:absolute;top:0}.gantt-container .popup-wrapper .popup{background:#0e1119;border-radius:2px;color:#fff;padding:8px;font-family:\"Open Sans\" sans-serif;line-height:150%;font-weight:400}.gantt-container .popup-wrapper .popup .wrp-title{border-bottom:1px solid #525966;padding-bottom:10px}.gantt-container .popup-wrapper .popup .wrp-title .title{font-size:14px}.gantt-container .popup-wrapper .popup .wrp-subtitle{color:#dfe2e5;padding-top:10px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.gantt-container .popup-wrapper .popup .wrp-subtitle .icon{margin-right:10px}.gantt-container .popup-wrapper .popup .wrp-subtitle .subtitle{font-size:12px}.gantt-container .popup-wrapper .popup .pointer{border:6px solid transparent;border-top-color:#0e1119;height:6px;margin-left:-4px;position:absolute}"]
+        styles: [".outer{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:start;align-items:flex-start;-ms-flex-line-pack:center;align-content:center;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-direction:row;flex-direction:row}", ".gantt{border:1px solid #e0e0e0}.gantt .weekend-highlight{fill:#b8c2cc;opacity:.5;stroke:#ebeff2;stroke-width:1}.gantt .grid-background{fill:none}.gantt .grid-header,.gantt .grid-row{fill:#fff}.gantt .grid-row:nth-child(even){fill:#f5f5f5}.gantt .row-line{stroke:#ebeff2}.gantt .tick{stroke:#e0e0e0;stroke-width:.4}.gantt .tick.thick{stroke:#428bca;stroke-width:2}.gantt .today-highlight{fill:#ffe979;opacity:.5}.gantt .arrow{fill:none;stroke:#666;stroke-width:1.4}.gantt .bar{opacity:.8;stroke:#8d99a6;stroke-width:0;transition:stroke-width .3s;-webkit-user-select:none;-ms-user-select:none;user-select:none}.gantt .bar-invalid{fill:transparent;stroke:#8d99a6;stroke-dasharray:5;stroke-width:1}.gantt .bar-invalid~.bar-label{fill:#555}.gantt .bar-label{fill:#fff;text-anchor:middle;font-size:12px;font-weight:lighter}.gantt .bar-label.big{fill:#555;text-anchor:start}.gantt .bar-wrapper{cursor:pointer;outline:0}.gantt .bar-wrapper.active .bar,.gantt .bar-wrapper:hover .bar{opacity:1}.gantt .bar-wrapper.active .bar{stroke:#212533;stroke-width:2}.gantt .lower-text,.gantt .upper-text{font-size:12px;text-anchor:middle}.gantt .upper-text{fill:#555}.gantt .lower-text{fill:#333}.gantt .hide{display:none}.gantt-container{border-left:1px solid #e0e0e0;font-size:12px;overflow:auto;position:relative}.gantt-container .title-1{fill:#999;font-size:12px;font-weight:400;line-height:150%;text-anchor:middle}.gantt-container .title-2{fill:#333;font-size:14px;font-weight:400;line-height:150%;text-anchor:middle}.gantt-container .popup-wrapper{left:0;position:absolute;top:0}.gantt-container .popup-wrapper .popup{background:#0e1119;border-radius:2px;color:#fff;padding:8px;font-family:\"Open Sans\" sans-serif;line-height:150%;font-weight:400}.gantt-container .popup-wrapper .popup .wrp-title{border-bottom:1px solid #525966;padding-bottom:10px}.gantt-container .popup-wrapper .popup .wrp-title .title{font-size:14px}.gantt-container .popup-wrapper .popup .wrp-subtitle{color:#dfe2e5;padding-top:10px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.gantt-container .popup-wrapper .popup .wrp-subtitle .icon{margin-right:10px}.gantt-container .popup-wrapper .popup .wrp-subtitle .subtitle{font-size:12px}.gantt-container .popup-wrapper .popup .pointer{border:6px solid transparent;border-top-color:#0e1119;height:6px;margin-left:-4px;position:absolute}"]
     })
 ], GanttComponent);
 
@@ -9711,6 +9733,12 @@ let SideTableComponent = class SideTableComponent {
         this.ROW_HEIGHT = 44;
         this.multipleTaskPerLine = false;
     }
+    ngOnInit() {
+        this._removeEmptyTasks();
+    }
+    _removeEmptyTasks() {
+        this.tasks = this.tasks.filter(task => task.tasks.length);
+    }
 };
 __decorate([
     Input()
@@ -13534,6 +13562,16 @@ PanelModule = __decorate([
 ], PanelModule);
 
 const fallback = {
+    "platform.angular_components.filters": "Filtros",
+    "platform.angular_components.filter": "Filtrar",
+    "platform.angular_components.clear": "Limpar",
+    "platform.angular_components.cancel": "Cancelar",
+    "platform.angular_components.select": "Selecionar",
+    "platform.angular_components.not_informed": "Não informado",
+    "platform.angular_components.advanced_search": "Pesquisa avançada",
+    "platform.angular_components.no_records_found": "Nenhum registro encontrado",
+    "platform.angular_components.total_record": "{{ count }} registros encontrados",
+    "platform.angular_components.total_records": "{{ count }} registros encontrados",
     "platform.angular_components.country_name_br": "Brasil",
     "platform.angular_components.country_name_us": "Estados Unidos",
     "platform.angular_components.country_name_co": "Colômbia",