ontimize-web-ngx 15.8.0 → 15.8.2

package/fesm2020/ontimize-web-ngx.mjs

@@ -11151,7 +11151,7 @@ class OFormDataComponent extends OBaseComponent {
     }
     get floatLabel() {
         if (!this.labelVisible) {
-            this.floatLabel = 'always';
+            this._floatLabel = 'always';
         }
         return this._floatLabel;
     }
@@ -22405,7 +22405,7 @@ DaterangepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => DaterangepickerComponent),
             multi: true
-        }], viewQueries: [{ propertyName: "pickerContainer", first: true, predicate: ["pickerContainer"], descendants: true }], ngImport: i0, template: "<div class=\"md-drppicker\" #pickerContainer [ngClass]=\"{\n    ltr: locale.direction === 'ltr',\n    rtl: this.locale.direction === 'rtl',\n    'shown': isShown || inline,\n    'hidden': !isShown && !inline,\n    'inline': inline,\n    'double':  !singleDatePicker && showCalInRanges,\n    'show-ranges': rangesArray.length\n}\" [class]=\"'drops-' + drops + '-' + opens\">\n  <div class=\"ranges\">\n    <ul>\n      <li *ngFor=\"let range of rangesArray\">\n        <button type=\"button\" (click)=\"clickRange($event, range)\" [disabled]=\"disableRange(range)\"\n          [ngClass]=\"{'active': range === chosenRange}\">{{range | oTranslate}}</button>\n      </li>\n    </ul>\n  </div>\n  <div class=\"calendar\" [ngClass]=\"{right: singleDatePicker, left: !singleDatePicker}\" *ngIf=\"showCalInRanges\">\n    <div class=\"calendar-table\">\n      <table class=\"table-condensed\" *ngIf=\"calendarVariables\" aria-describedby=\"calendar days table\">\n        <thead>\n          <tr>\n            <th scope=\"col\" *ngIf=\"showWeekNumbers || showISOWeekNumbers\"></th>\n            <ng-container\n              *ngIf=\"!calendarVariables.left.minDate || calendarVariables.left.minDate.isBefore(calendarVariables.left.calendar.firstDay) && (!this.linkedCalendars || true)\">\n              <th (click)=\"clickPrev(sideEnum.left)\" class=\"prev available\">\n              </th>\n            </ng-container>\n            <ng-container\n              *ngIf=\"!(!calendarVariables.left.minDate || calendarVariables.left.minDate.isBefore(calendarVariables.left.calendar.firstDay) && (!this.linkedCalendars || true))\">\n              <th scope=\"col\"></th>\n            </ng-container>\n            <th scope=\"col\" colspan=\"5\" class=\"month drp-animate\">\n              <ng-container *ngIf=\"showDropdowns && calendarVariables.left.dropdowns\">\n                <div class=\"dropdowns\">\n                  {{this.locale.monthNames[calendarVariables?.left?.calendar[1][1].month()]}}\n                  <select class=\"monthselect\" (change)=\"monthChanged($event, sideEnum.left)\">\n                    <option\n                      [disabled]=\"(calendarVariables.left.dropdowns.inMinYear && m < calendarVariables.left.minDate.month()) || (calendarVariables.left.dropdowns.inMaxYear && m > calendarVariables.left.maxDate.month())\"\n                      *ngFor=\"let m of calendarVariables.left.dropdowns.monthArrays\" [value]=\"m\"\n                      [selected]=\"calendarVariables.left.dropdowns.currentMonth == m\">\n                      {{locale.monthNames[m]}}\n                    </option>\n                  </select>\n                </div>\n                <div class=\"dropdowns\">\n                  {{ calendarVariables?.left?.calendar[1][1].format(\" YYYY\")}}\n                  <select class=\"yearselect\" (change)=\"yearChanged($event, sideEnum.left)\">\n                    <option *ngFor=\"let y of calendarVariables.left.dropdowns.yearArrays\"\n                      [selected]=\"y === calendarVariables.left.dropdowns.currentYear\">\n                      {{y}}\n                    </option>\n                  </select>\n                </div>\n              </ng-container>\n              <ng-container *ngIf=\"!showDropdowns || !calendarVariables.left.dropdowns\">\n                {{this.locale.monthNames[calendarVariables?.left?.calendar[1][1].month()]}} {{ calendarVariables?.left?.calendar[1][1].format(\"\n                YYYY\")}}\n              </ng-container>\n            </th>\n            <ng-container\n              *ngIf=\"(!calendarVariables.left.maxDate || calendarVariables.left.maxDate.isAfter(calendarVariables.left.calendar.lastDay)) && (!linkedCalendars || singleDatePicker )\">\n              <th scope=\"col\" class=\"next available\" (click)=\"clickNext(sideEnum.left)\">\n              </th>\n            </ng-container>\n            <ng-container\n              *ngIf=\"!((!calendarVariables.left.maxDate || calendarVariables.left.maxDate.isAfter(calendarVariables.left.calendar.lastDay)) && (!linkedCalendars || singleDatePicker ))\">\n              <th scope=\"col\"></th>\n            </ng-container>\n          </tr>\n          <tr class='week-days'>\n            <th scope=\"col\" *ngIf=\"showWeekNumbers || showISOWeekNumbers\" class=\"week\"><span>{{this.locale.weekLabel}}</span></th>\n            <th scope=\"col\" *ngFor=\"let dayofweek of adjustedDaysOfWeek\"><span>{{dayofweek}}</span></th>\n          </tr>\n        </thead>\n        <tbody class=\"drp-animate\">\n          <tr *ngFor=\"let row of calendarVariables.left.calRows\" [class]=\"calendarVariables.left.classes[row].classList\">\n            <!-- add week number -->\n            <td class=\"week\" *ngIf=\"showWeekNumbers\">\n              <span>{{calendarVariables.left.calendar[row][0].week()}}</span>\n            </td>\n            <td class=\"week\" *ngIf=\"showISOWeekNumbers\">\n              <span>{{calendarVariables.left.calendar[row][0].isoWeek()}}</span>\n            </td>\n            <!-- cal -->\n            <td *ngFor=\"let col of calendarVariables.left.calCols\" [class]=\"calendarVariables.left.classes[row][col]\"\n              (click)=\"clickDate($event, sideEnum.left, row, col)\">\n              <span>{{calendarVariables.left.calendar[row][col].date()}}</span>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n    <div class=\"calendar-time\" *ngIf=\"timePicker\">\n      <div class=\"select\">\n        <select class=\"hourselect select-item\" [disabled]=\"!endDate\" [(ngModel)]=\"timepickerVariables.left.selectedHour\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.left)\">\n          <option *ngFor=\"let i of timepickerVariables.left.hours\" [value]=\"i\" [disabled]=\"timepickerVariables.left.disabledHours.indexOf(i) > -1\">\n            {{i}}</option>\n        </select>\n      </div>\n      <div class=\"select\">\n        <select class=\"select-item minuteselect\" [disabled]=\"!endDate\" [(ngModel)]=\"timepickerVariables.left.selectedMinute\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.left)\">\n          <option *ngFor=\"let i of timepickerVariables.left.minutes; let index = index;\" [value]=\"i\"\n            [disabled]=\"timepickerVariables.left.disabledMinutes.indexOf(i) > -1\">{{timepickerVariables.left.minutesLabel[index]}}</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n      <div class=\"select\">\n        <select class=\"select-item secondselect\" *ngIf=\"timePickerSeconds\" [disabled]=\"!endDate\" [(ngModel)]=\"timepickerVariables.left.selectedSecond\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.left)\">\n          <option *ngFor=\"let i of timepickerVariables.left.seconds; let index = index;\" [value]=\"i\"\n            [disabled]=\"timepickerVariables.left.disabledSeconds.indexOf(i) > -1\">{{timepickerVariables.left.secondsLabel[index]}}</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n      <div class=\"select\">\n        <select class=\"select-item ampmselect\" *ngIf=\"!timePicker24Hour\" [(ngModel)]=\"timepickerVariables.left.ampmModel\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.left)\">\n          <option value=\"AM\" [disabled]=\"timepickerVariables.left.amDisabled\">AM</option>\n          <option value=\"PM\" [disabled]=\"timepickerVariables.left.pmDisabled\">PM</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n    </div>\n  </div>\n  <div class=\"calendar right\" *ngIf=\"showCalInRanges && !singleDatePicker\">\n    <div class=\"calendar-table\">\n      <table class=\"table-condensed\" *ngIf=\"calendarVariables\" aria-describedby=\"calendar days table\">\n        <thead>\n          <tr>\n            <th scope=\"col\" *ngIf=\"showWeekNumbers || showISOWeekNumbers\"></th>\n            <ng-container\n              *ngIf=\"(!calendarVariables.right.minDate || calendarVariables.right.minDate.isBefore(calendarVariables.right.calendar.firstDay)) && (!this.linkedCalendars)\">\n              <th (click)=\"clickPrev(sideEnum.right)\" class=\"prev available\">\n              </th>\n            </ng-container>\n            <ng-container\n              *ngIf=\"!((!calendarVariables.right.minDate || calendarVariables.right.minDate.isBefore(calendarVariables.right.calendar.firstDay)) && (!this.linkedCalendars))\">\n              <th scope=\"col\"></th>\n            </ng-container>\n            <th scope=\"col\" colspan=\"5\" class=\"month\">\n              <ng-container *ngIf=\"showDropdowns && calendarVariables.right.dropdowns\">\n                <div class=\"dropdowns\">\n                  {{this.locale.monthNames[calendarVariables?.right?.calendar[1][1].month()]}}\n                  <select class=\"monthselect\" (change)=\"monthChanged($event, sideEnum.right)\">\n                    <option\n                      [disabled]=\"(calendarVariables.right.dropdowns.inMinYear && m < calendarVariables.right.minDate.month()) || (calendarVariables.right.dropdowns.inMaxYear && m > calendarVariables.right.maxDate.month())\"\n                      *ngFor=\"let m of calendarVariables.right.dropdowns.monthArrays\" [value]=\"m\"\n                      [selected]=\"calendarVariables.right.dropdowns.currentMonth == m\">\n                      {{locale.monthNames[m]}}\n                    </option>\n                  </select>\n                </div>\n                <div class=\"dropdowns\">\n                  {{ calendarVariables?.right?.calendar[1][1].format(\" YYYY\")}}\n                  <select class=\"yearselect\" (change)=\"yearChanged($event, sideEnum.right)\">\n                    <option *ngFor=\"let y of calendarVariables.right.dropdowns.yearArrays\"\n                      [selected]=\"y === calendarVariables.right.dropdowns.currentYear\">\n                      {{y}}\n                    </option>\n                  </select>\n                </div>\n              </ng-container>\n              <ng-container *ngIf=\"!showDropdowns || !calendarVariables.right.dropdowns\">\n                {{this.locale.monthNames[calendarVariables?.right?.calendar[1][1].month()]}} {{ calendarVariables?.right?.calendar[1][1].format(\"\n                YYYY\")}}\n              </ng-container>\n            </th>\n            <ng-container\n              *ngIf=\"!calendarVariables.right.maxDate || calendarVariables.right.maxDate.isAfter(calendarVariables.right.calendar.lastDay) && (!linkedCalendars || singleDatePicker || true)\">\n              <th scope=\"col\" class=\"next available\" (click)=\"clickNext(sideEnum.right)\">\n              </th>\n            </ng-container>\n            <ng-container\n              *ngIf=\"!(!calendarVariables.right.maxDate || calendarVariables.right.maxDate.isAfter(calendarVariables.right.calendar.lastDay) && (!linkedCalendars || singleDatePicker || true))\">\n              <th scope=\"col\"></th>\n            </ng-container>\n          </tr>\n\n          <tr>\n            <th scope=\"col\" *ngIf=\"showWeekNumbers || showISOWeekNumbers\" class=\"week\"><span>{{this.locale.weekLabel}}</span></th>\n            <th scope=\"col\" *ngFor=\"let dayofweek of locale.daysOfWeek\"><span>{{dayofweek}}</span></th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let row of calendarVariables.right.calRows\" [class]=\"calendarVariables.right.classes[row].classList\">\n            <td class=\"week\" *ngIf=\"showWeekNumbers\">\n              <span>{{calendarVariables.right.calendar[row][0].week()}}</span>\n            </td>\n            <td class=\"week\" *ngIf=\"showISOWeekNumbers\">\n              <span>{{calendarVariables.right.calendar[row][0].isoWeek()}}</span>\n            </td>\n            <td *ngFor=\"let col of calendarVariables.right.calCols\" [class]=\"calendarVariables.right.classes[row][col]\"\n              (click)=\"clickDate($event, sideEnum.right, row, col)\">\n              <span>{{calendarVariables.right.calendar[row][col].date()}}</span>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n    <div class=\"calendar-time\" *ngIf=\"timePicker\">\n      <div class=\"select\">\n        <select class=\"select-item hourselect\" [disabled]=\"!endDate\" [(ngModel)]=\"timepickerVariables.right.selectedHour\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.right)\">\n          <option *ngFor=\"let i of timepickerVariables.right.hours\" [value]=\"i\" [disabled]=\"timepickerVariables.right.disabledHours.indexOf(i) > -1\">\n            {{i}}</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n      <div class=\"select\">\n        <select class=\"select-item minuteselect\" [disabled]=\"!endDate\" [(ngModel)]=\"timepickerVariables.right.selectedMinute\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.right)\">\n          <option *ngFor=\"let i of timepickerVariables.right.minutes; let index = index;\" [value]=\"i\"\n            [disabled]=\"timepickerVariables.right.disabledMinutes.indexOf(i) > -1\">{{timepickerVariables.right.minutesLabel[index]}}</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n      <div class=\"select\">\n        <select *ngIf=\"timePickerSeconds\" class=\"select-item secondselect\" [disabled]=\"!endDate\"\n          [(ngModel)]=\"timepickerVariables.right.selectedSecond\" (ngModelChange)=\"timeChanged($event, sideEnum.right)\">\n          <option *ngFor=\"let i of timepickerVariables.right.seconds; let index = index;\" [value]=\"i\"\n            [disabled]=\"timepickerVariables.right.disabledSeconds.indexOf(i) > -1\">{{timepickerVariables.right.secondsLabel[index]}}</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n      <div class=\"select\">\n        <select *ngIf=\"!timePicker24Hour\" class=\"select-item ampmselect\" [(ngModel)]=\"timepickerVariables.right.ampmModel\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.right)\">\n          <option value=\"AM\" [disabled]=\"timepickerVariables.right.amDisabled\">AM</option>\n          <option value=\"PM\" [disabled]=\"timepickerVariables.right.pmDisabled\">PM</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n    </div>\n  </div>\n  <div class=\"buttons\" *ngIf=\"!autoApply && ( !rangesArray.length || (showCalInRanges && !singleDatePicker))\">\n    <div class=\"buttons_input\">\n      <button *ngIf=\"showClearButton\" class=\"mat-primary mat-stroked-button clear\" type=\"button\" (click)=\"clear()\" title=\"clear the date\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 -5 24 24\">\n          <path d=\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\" />\n        </svg>\n      </button>\n      <button class=\"mat-primary mat-stroked-button\" *ngIf=\"showCancel\" type=\"button\" (click)=\"clickCancel($event)\">{{locale.cancelLabel}}</button>\n      <button class=\"mat-primary mat-stroked-button\" [disabled]=\"applyBtn.disabled\" type=\"button\"\n        (click)=\"clickApply($event)\">{{locale.applyLabel}}</button>\n    </div>\n  </div>\n</div>\n", styles: [".md-drppicker{position:absolute;border-radius:4px;width:278px;padding:4px;margin-top:-10px;overflow:hidden;z-index:1000;font-size:13px;box-shadow:0 2px 4px #00000029,0 2px 8px #0000001f}.md-drppicker.double{width:auto}.md-drppicker.inline{position:relative;display:inline-block}.md-drppicker:after,.md-drppicker:before{position:absolute;display:inline-block;content:\"\"}.md-drppicker.openscenter:before{left:0;right:0;width:0;margin-left:auto;margin-right:auto}.md-drppicker.openscenter:after{left:0;right:0;width:0;margin-left:auto;margin-right:auto}.md-drppicker.single .calendar,.md-drppicker.single .ranges{float:none}.md-drppicker.shown{transform:scale(1);transition:all .1s ease-in-out;transform-origin:0 0;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.md-drppicker.shown.drops-up-left{transform-origin:100% 100%}.md-drppicker.shown.drops-up-right{transform-origin:0 100%}.md-drppicker.shown.drops-down-left{transform-origin:100% 0}.md-drppicker.shown.drops-down-right{transform-origin:0 0}.md-drppicker.shown.drops-down-center{transform-origin:50% 0}.md-drppicker.shown.drops-up-center{transform-origin:50% 100%}.md-drppicker.shown .calendar{display:block}.md-drppicker.hidden{transition:all .1s ease;transform:scale(0);transform-origin:0 0;cursor:default;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.md-drppicker.hidden.drops-up-left{transform-origin:100% 100%}.md-drppicker.hidden.drops-up-right{transform-origin:0 100%}.md-drppicker.hidden.drops-down-left{transform-origin:100% 0}.md-drppicker.hidden.drops-down-right{transform-origin:0 0}.md-drppicker.hidden.drops-down-center{transform-origin:50% 0}.md-drppicker.hidden.drops-up-center{transform-origin:50% 100%}.md-drppicker.hidden .calendar{display:none}.md-drppicker .calendar{max-width:270px;margin:4px}.md-drppicker .calendar.single .calendar-table{border:none}.md-drppicker .calendar td,.md-drppicker .calendar th{padding:0;white-space:nowrap;text-align:center;height:36px;width:36px}.md-drppicker .calendar td span,.md-drppicker .calendar th span{pointer-events:none}.md-drppicker .calendar-table{border-style:1px solid;padding:4px;border-radius:4px}.md-drppicker table{width:100%;margin:0}.md-drppicker td,.md-drppicker th{text-align:center;width:20px;height:20px;border-radius:4px;border-style:1px solid;white-space:nowrap;cursor:pointer}.md-drppicker td.available.prev,.md-drppicker th.available.prev{display:block;background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K);background-repeat:no-repeat;background-size:.5em;background-position:center;opacity:.8;transition:background-color .2s ease;border-radius:2em}.md-drppicker td.available.prev:hover,.md-drppicker th.available.prev:hover{margin:0}.md-drppicker td.available.next,.md-drppicker th.available.next{transform:rotate(180deg);display:block;background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K);background-repeat:no-repeat;background-size:.5em;background-position:center;opacity:.8;transition:background-color .2s ease;border-radius:2em}.md-drppicker td.available.next:hover,.md-drppicker th.available.next:hover{margin:0;transform:rotate(180deg)}.md-drppicker td.available:hover,.md-drppicker th.available:hover{background-repeat:no-repeat;background-size:.5em;background-position:center;margin:.25em 0;opacity:.8;border-radius:2em;transform:scale(1);transition:all .45s cubic-bezier(.23,1,.32,1) 0}.md-drppicker td.week,.md-drppicker th.week{font-size:80%}.md-drppicker td{margin:.25em 0;opacity:.8;border-radius:2em;transform:scale(1);transition:all .45s cubic-bezier(.23,1,.32,1) 0}.md-drppicker td.in-range{border-radius:0}.md-drppicker td.start-date{border-radius:2em 0 0 2em}.md-drppicker td.end-date{border-radius:0 2em 2em 0}.md-drppicker td.start-date.end-date{border-radius:4px}.md-drppicker th.month{width:auto}.md-drppicker option.disabled,.md-drppicker td.disabled{cursor:not-allowed;text-decoration:line-through}.md-drppicker .dropdowns{background-repeat:no-repeat;background-size:10px;background-position-y:center;background-position-x:right;width:50px;background-image:url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDI1NSAyNTUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI1NSAyNTU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0iYXJyb3ctZHJvcC1kb3duIj4KCQk8cG9seWdvbiBwb2ludHM9IjAsNjMuNzUgMTI3LjUsMTkxLjI1IDI1NSw2My43NSAgICIgZmlsbD0iIzk4OGM4YyIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=)}.md-drppicker .dropdowns select{display:inline-block;width:100%;padding:5px;border:1px solid;border-radius:2px;height:3rem}.md-drppicker .dropdowns select.monthselect,.md-drppicker .dropdowns select.yearselect{font-size:12px;padding:1px;height:auto;margin:0;cursor:default}.md-drppicker .dropdowns select.ampmselect,.md-drppicker .dropdowns select.hourselect,.md-drppicker .dropdowns select.minuteselect,.md-drppicker .dropdowns select.secondselect{width:50px;margin:0 auto;border-style:1px solid;padding:2px;outline:0;font-size:12px}.md-drppicker .dropdowns select.monthselect,.md-drppicker .dropdowns select.yearselect{cursor:pointer;opacity:0;position:absolute;top:0;left:0;margin:0;padding:0}.md-drppicker th.month>div{position:relative;display:inline-block}.md-drppicker .calendar-time{text-align:center;margin:4px auto 0;line-height:30px;position:relative}.md-drppicker .calendar-time .select{display:inline}.md-drppicker .calendar-time .select .select-item{display:inline-block;width:auto;position:relative;font-family:inherit;background-color:transparent;padding:10px 10px 10px 0;font-size:18px;border-radius:0;border:none;border-bottom-style:1px solid}.md-drppicker .calendar-time .select .select-item:after{position:absolute;top:18px;right:10px;width:0;height:0;padding:0;content:\"\";border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid rgba(0,0,0,.12);pointer-events:none}.md-drppicker .calendar-time .select .select-item:focus{outline:none}.md-drppicker .calendar-time .select .select-item .select-label{font-size:16px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.md-drppicker .calendar-time select.disabled{cursor:not-allowed}.md-drppicker .label-input{border-style:1px solid;border-radius:4px;height:30px;line-height:30px;display:block;vertical-align:middle;margin:0 auto 5px;padding:0 0 0 28px;width:100%}.md-drppicker .label-input.active{border-style:1px solid;border-radius:4px}.md-drppicker .md-drppicker_input{position:relative;padding:0 30px 0 0}.md-drppicker .md-drppicker_input i,.md-drppicker .md-drppicker_input svg{position:absolute;left:8px;top:8px}.md-drppicker.rtl .label-input{padding-right:28px;padding-left:6px}.md-drppicker.rtl .md-drppicker_input i,.md-drppicker.rtl .md-drppicker_input svg{left:auto;right:8px}.md-drppicker .show-ranges .drp-calendar.left{border-left-style:1px solid}.md-drppicker .ranges{float:none;text-align:left;margin:0}.md-drppicker .ranges ul{list-style:none;margin:0 auto;padding:0;width:100%}.md-drppicker .ranges ul li{font-size:12px}.md-drppicker .ranges ul li button{padding:8px 12px;width:100%;background:none;border:none;text-align:left;cursor:pointer}.md-drppicker .ranges ul li button[disabled]{opacity:.3}.md-drppicker .ranges ul li button:active{background:transparent}.md-drppicker .show-calendar .ranges{margin-top:8px}.md-drppicker [hidden]{display:none}.md-drppicker .buttons{text-align:right;margin:0 5px 5px 0}.md-drppicker .btn{position:relative;overflow:hidden;border-width:0;outline:none;padding:0 6px;cursor:pointer;border-radius:2px;box-shadow:0 1px 4px #0009;color:#ecf0f1;transition:background-color .4s;height:auto;text-transform:uppercase;line-height:36px;border:none}.md-drppicker .btn>*{position:relative}.md-drppicker .btn span{display:block;padding:12px 24px}.md-drppicker .btn:before{content:\"\";position:absolute;top:50%;left:50%;display:block;width:0;padding-top:0;border-radius:100%;transform:translate(-50%,-50%)}.md-drppicker .btn:active:before{width:120%;padding-top:120%;transition:width .2s ease-out,padding-top .2s ease-out}.md-drppicker .btn:disabled{opacity:.5}.md-drppicker .clear{box-shadow:none}.md-drppicker .clear svg{fill:currentColor}@media (min-width: 564px){.md-drppicker{width:auto}.md-drppicker.single .calendar.left{clear:none}.md-drppicker.ltr{direction:ltr;text-align:left}.md-drppicker.ltr .calendar.left{clear:left}.md-drppicker.ltr .calendar.left .calendar-table{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.md-drppicker.ltr .calendar.right{margin-left:0}.md-drppicker.ltr .calendar.right .calendar-table{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}.md-drppicker.ltr .left .md-drppicker_input,.md-drppicker.ltr .right .md-drppicker_input{padding-right:35px}.md-drppicker.ltr .calendar.left .calendar-table{padding-right:12px}.md-drppicker.ltr .calendar,.md-drppicker.ltr .ranges{float:left}.md-drppicker.rtl{direction:rtl;text-align:right}.md-drppicker.rtl .calendar.left{clear:right;margin-left:0}.md-drppicker.rtl .calendar.left .calendar-table{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}.md-drppicker.rtl .calendar.right{margin-right:0}.md-drppicker.rtl .calendar.right .calendar-table{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.md-drppicker.rtl .left .md-drppicker_input,.md-drppicker.rtl .calendar.left .calendar-table{padding-left:12px}.md-drppicker.rtl .calendar,.md-drppicker.rtl .ranges{text-align:right;float:right}.drp-animate{transform:translate(0);transition:transform .2s ease,opacity .2s ease}.drp-animate.drp-picker-site-this{transition-timing-function:linear}.drp-animate.drp-animate-right{transform:translate(10%);opacity:0}.drp-animate.drp-animate-left{transform:translate(-10%);opacity:0}}@media (min-width: 730px){.md-drppicker .ranges{width:auto}.md-drppicker.ltr .ranges{float:left}.md-drppicker.rtl .ranges{float:right}.md-drppicker .calendar.left{clear:none!important}}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i3$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], encapsulation: i0.ViewEncapsulation.None });
+        }], viewQueries: [{ propertyName: "pickerContainer", first: true, predicate: ["pickerContainer"], descendants: true }], ngImport: i0, template: "<div class=\"md-drppicker\" #pickerContainer [ngClass]=\"{\n    ltr: locale.direction === 'ltr',\n    rtl: this.locale.direction === 'rtl',\n    'shown': isShown || inline,\n    'hidden': !isShown && !inline,\n    'inline': inline,\n    'double':  !singleDatePicker && showCalInRanges,\n    'show-ranges': rangesArray.length\n}\" [class]=\"'drops-' + drops + '-' + opens\">\n  <div class=\"ranges\">\n    <ul>\n      <li *ngFor=\"let range of rangesArray\">\n        <button type=\"button\" (click)=\"clickRange($event, range)\" [disabled]=\"disableRange(range)\"\n          [ngClass]=\"{'active': range === chosenRange}\">{{range | oTranslate}}</button>\n      </li>\n    </ul>\n  </div>\n  <div class=\"calendar\" [ngClass]=\"{right: singleDatePicker, left: !singleDatePicker}\" *ngIf=\"showCalInRanges\">\n    <div class=\"calendar-table\">\n      <table class=\"table-condensed\" *ngIf=\"calendarVariables\" aria-describedby=\"calendar days table\">\n        <thead>\n          <tr>\n            <th scope=\"col\" *ngIf=\"showWeekNumbers || showISOWeekNumbers\"></th>\n            <ng-container\n              *ngIf=\"!calendarVariables.left.minDate || calendarVariables.left.minDate.isBefore(calendarVariables.left.calendar.firstDay) && (!this.linkedCalendars || true)\">\n              <th (click)=\"clickPrev(sideEnum.left)\" class=\"prev available\">\n              </th>\n            </ng-container>\n            <ng-container\n              *ngIf=\"!(!calendarVariables.left.minDate || calendarVariables.left.minDate.isBefore(calendarVariables.left.calendar.firstDay) && (!this.linkedCalendars || true))\">\n              <th scope=\"col\"></th>\n            </ng-container>\n            <th scope=\"col\" colspan=\"5\" class=\"month drp-animate\">\n              <ng-container *ngIf=\"showDropdowns && calendarVariables.left.dropdowns\">\n                <div class=\"dropdowns\">\n                  {{this.locale.monthNames[calendarVariables?.left?.calendar[1][1].month()]}}\n                  <select class=\"monthselect\" (change)=\"monthChanged($event, sideEnum.left)\">\n                    <option\n                      [disabled]=\"(calendarVariables.left.dropdowns.inMinYear && m < calendarVariables.left.minDate.month()) || (calendarVariables.left.dropdowns.inMaxYear && m > calendarVariables.left.maxDate.month())\"\n                      *ngFor=\"let m of calendarVariables.left.dropdowns.monthArrays\" [value]=\"m\"\n                      [selected]=\"calendarVariables.left.dropdowns.currentMonth == m\">\n                      {{locale.monthNames[m]}}\n                    </option>\n                  </select>\n                </div>\n                <div class=\"dropdowns\">\n                  {{ calendarVariables?.left?.calendar[1][1].format(\" YYYY\")}}\n                  <select class=\"yearselect\" (change)=\"yearChanged($event, sideEnum.left)\">\n                    <option *ngFor=\"let y of calendarVariables.left.dropdowns.yearArrays\"\n                      [selected]=\"y === calendarVariables.left.dropdowns.currentYear\">\n                      {{y}}\n                    </option>\n                  </select>\n                </div>\n              </ng-container>\n              <ng-container *ngIf=\"!showDropdowns || !calendarVariables.left.dropdowns\">\n                {{this.locale.monthNames[calendarVariables?.left?.calendar[1][1].month()]}} {{ calendarVariables?.left?.calendar[1][1].format(\"\n                YYYY\")}}\n              </ng-container>\n            </th>\n            <ng-container\n              *ngIf=\"(!calendarVariables.left.maxDate || calendarVariables.left.maxDate.isAfter(calendarVariables.left.calendar.lastDay)) && (!linkedCalendars || singleDatePicker )\">\n              <th scope=\"col\" class=\"next available\" (click)=\"clickNext(sideEnum.left)\">\n              </th>\n            </ng-container>\n            <ng-container\n              *ngIf=\"!((!calendarVariables.left.maxDate || calendarVariables.left.maxDate.isAfter(calendarVariables.left.calendar.lastDay)) && (!linkedCalendars || singleDatePicker ))\">\n              <th scope=\"col\"></th>\n            </ng-container>\n          </tr>\n          <tr class='week-days'>\n            <th scope=\"col\" *ngIf=\"showWeekNumbers || showISOWeekNumbers\" class=\"week\"><span>{{this.locale.weekLabel}}</span></th>\n            <th scope=\"col\" *ngFor=\"let dayofweek of adjustedDaysOfWeek\"><span>{{dayofweek}}</span></th>\n          </tr>\n        </thead>\n        <tbody class=\"drp-animate\">\n          <tr *ngFor=\"let row of calendarVariables.left.calRows\" [class]=\"calendarVariables.left.classes[row].classList\">\n            <!-- add week number -->\n            <td class=\"week\" *ngIf=\"showWeekNumbers\">\n              <span>{{calendarVariables.left.calendar[row][0].week()}}</span>\n            </td>\n            <td class=\"week\" *ngIf=\"showISOWeekNumbers\">\n              <span>{{calendarVariables.left.calendar[row][0].isoWeek()}}</span>\n            </td>\n            <!-- cal -->\n            <td *ngFor=\"let col of calendarVariables.left.calCols\" [class]=\"calendarVariables.left.classes[row][col]\"\n              (click)=\"clickDate($event, sideEnum.left, row, col)\">\n              <span>{{calendarVariables.left.calendar[row][col].date()}}</span>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n    <div class=\"calendar-time\" *ngIf=\"timePicker\">\n      <div class=\"select\">\n        <select class=\"hourselect select-item\" [disabled]=\"!endDate\" [(ngModel)]=\"timepickerVariables.left.selectedHour\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.left)\">\n          <option *ngFor=\"let i of timepickerVariables.left.hours\" [value]=\"i\" [disabled]=\"timepickerVariables.left.disabledHours.indexOf(i) > -1\">\n            {{i}}</option>\n        </select>\n      </div>\n      <div class=\"select\">\n        <select class=\"select-item minuteselect\" [disabled]=\"!endDate\" [(ngModel)]=\"timepickerVariables.left.selectedMinute\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.left)\">\n          <option *ngFor=\"let i of timepickerVariables.left.minutes; let index = index;\" [value]=\"i\"\n            [disabled]=\"timepickerVariables.left.disabledMinutes.indexOf(i) > -1\">{{timepickerVariables.left.minutesLabel[index]}}</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n      <div class=\"select\">\n        <select class=\"select-item secondselect\" *ngIf=\"timePickerSeconds\" [disabled]=\"!endDate\" [(ngModel)]=\"timepickerVariables.left.selectedSecond\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.left)\">\n          <option *ngFor=\"let i of timepickerVariables.left.seconds; let index = index;\" [value]=\"i\"\n            [disabled]=\"timepickerVariables.left.disabledSeconds.indexOf(i) > -1\">{{timepickerVariables.left.secondsLabel[index]}}</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n      <div class=\"select\">\n        <select class=\"select-item ampmselect\" *ngIf=\"!timePicker24Hour\" [(ngModel)]=\"timepickerVariables.left.ampmModel\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.left)\">\n          <option value=\"AM\" [disabled]=\"timepickerVariables.left.amDisabled\">AM</option>\n          <option value=\"PM\" [disabled]=\"timepickerVariables.left.pmDisabled\">PM</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n    </div>\n  </div>\n  <div class=\"calendar right\" *ngIf=\"showCalInRanges && !singleDatePicker\">\n    <div class=\"calendar-table\">\n      <table class=\"table-condensed\" *ngIf=\"calendarVariables\" aria-describedby=\"calendar days table\">\n        <thead>\n          <tr>\n            <th scope=\"col\" *ngIf=\"showWeekNumbers || showISOWeekNumbers\"></th>\n            <ng-container\n              *ngIf=\"(!calendarVariables.right.minDate || calendarVariables.right.minDate.isBefore(calendarVariables.right.calendar.firstDay)) && (!this.linkedCalendars)\">\n              <th (click)=\"clickPrev(sideEnum.right)\" class=\"prev available\">\n              </th>\n            </ng-container>\n            <ng-container\n              *ngIf=\"!((!calendarVariables.right.minDate || calendarVariables.right.minDate.isBefore(calendarVariables.right.calendar.firstDay)) && (!this.linkedCalendars))\">\n              <th scope=\"col\"></th>\n            </ng-container>\n            <th scope=\"col\" colspan=\"5\" class=\"month\">\n              <ng-container *ngIf=\"showDropdowns && calendarVariables.right.dropdowns\">\n                <div class=\"dropdowns\">\n                  {{this.locale.monthNames[calendarVariables?.right?.calendar[1][1].month()]}}\n                  <select class=\"monthselect\" (change)=\"monthChanged($event, sideEnum.right)\">\n                    <option\n                      [disabled]=\"(calendarVariables.right.dropdowns.inMinYear && m < calendarVariables.right.minDate.month()) || (calendarVariables.right.dropdowns.inMaxYear && m > calendarVariables.right.maxDate.month())\"\n                      *ngFor=\"let m of calendarVariables.right.dropdowns.monthArrays\" [value]=\"m\"\n                      [selected]=\"calendarVariables.right.dropdowns.currentMonth == m\">\n                      {{locale.monthNames[m]}}\n                    </option>\n                  </select>\n                </div>\n                <div class=\"dropdowns\">\n                  {{ calendarVariables?.right?.calendar[1][1].format(\" YYYY\")}}\n                  <select class=\"yearselect\" (change)=\"yearChanged($event, sideEnum.right)\">\n                    <option *ngFor=\"let y of calendarVariables.right.dropdowns.yearArrays\"\n                      [selected]=\"y === calendarVariables.right.dropdowns.currentYear\">\n                      {{y}}\n                    </option>\n                  </select>\n                </div>\n              </ng-container>\n              <ng-container *ngIf=\"!showDropdowns || !calendarVariables.right.dropdowns\">\n                {{this.locale.monthNames[calendarVariables?.right?.calendar[1][1].month()]}} {{ calendarVariables?.right?.calendar[1][1].format(\"\n                YYYY\")}}\n              </ng-container>\n            </th>\n            <ng-container\n              *ngIf=\"!calendarVariables.right.maxDate || calendarVariables.right.maxDate.isAfter(calendarVariables.right.calendar.lastDay) && (!linkedCalendars || singleDatePicker || true)\">\n              <th scope=\"col\" class=\"next available\" (click)=\"clickNext(sideEnum.right)\">\n              </th>\n            </ng-container>\n            <ng-container\n              *ngIf=\"!(!calendarVariables.right.maxDate || calendarVariables.right.maxDate.isAfter(calendarVariables.right.calendar.lastDay) && (!linkedCalendars || singleDatePicker || true))\">\n              <th scope=\"col\"></th>\n            </ng-container>\n          </tr>\n\n          <tr>\n            <th scope=\"col\" *ngIf=\"showWeekNumbers || showISOWeekNumbers\" class=\"week\"><span>{{this.locale.weekLabel}}</span></th>\n            <th scope=\"col\" *ngFor=\"let dayofweek of locale.daysOfWeek\"><span>{{dayofweek}}</span></th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let row of calendarVariables.right.calRows\" [class]=\"calendarVariables.right.classes[row].classList\">\n            <td class=\"week\" *ngIf=\"showWeekNumbers\">\n              <span>{{calendarVariables.right.calendar[row][0].week()}}</span>\n            </td>\n            <td class=\"week\" *ngIf=\"showISOWeekNumbers\">\n              <span>{{calendarVariables.right.calendar[row][0].isoWeek()}}</span>\n            </td>\n            <td *ngFor=\"let col of calendarVariables.right.calCols\" [class]=\"calendarVariables.right.classes[row][col]\"\n              (click)=\"clickDate($event, sideEnum.right, row, col)\">\n              <span>{{calendarVariables.right.calendar[row][col].date()}}</span>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n    <div class=\"calendar-time\" *ngIf=\"timePicker\">\n      <div class=\"select\">\n        <select class=\"select-item hourselect\" [disabled]=\"!endDate\" [(ngModel)]=\"timepickerVariables.right.selectedHour\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.right)\">\n          <option *ngFor=\"let i of timepickerVariables.right.hours\" [value]=\"i\" [disabled]=\"timepickerVariables.right.disabledHours.indexOf(i) > -1\">\n            {{i}}</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n      <div class=\"select\">\n        <select class=\"select-item minuteselect\" [disabled]=\"!endDate\" [(ngModel)]=\"timepickerVariables.right.selectedMinute\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.right)\">\n          <option *ngFor=\"let i of timepickerVariables.right.minutes; let index = index;\" [value]=\"i\"\n            [disabled]=\"timepickerVariables.right.disabledMinutes.indexOf(i) > -1\">{{timepickerVariables.right.minutesLabel[index]}}</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n      <div class=\"select\">\n        <select *ngIf=\"timePickerSeconds\" class=\"select-item secondselect\" [disabled]=\"!endDate\"\n          [(ngModel)]=\"timepickerVariables.right.selectedSecond\" (ngModelChange)=\"timeChanged($event, sideEnum.right)\">\n          <option *ngFor=\"let i of timepickerVariables.right.seconds; let index = index;\" [value]=\"i\"\n            [disabled]=\"timepickerVariables.right.disabledSeconds.indexOf(i) > -1\">{{timepickerVariables.right.secondsLabel[index]}}</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n      <div class=\"select\">\n        <select *ngIf=\"!timePicker24Hour\" class=\"select-item ampmselect\" [(ngModel)]=\"timepickerVariables.right.ampmModel\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.right)\">\n          <option value=\"AM\" [disabled]=\"timepickerVariables.right.amDisabled\">AM</option>\n          <option value=\"PM\" [disabled]=\"timepickerVariables.right.pmDisabled\">PM</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n    </div>\n  </div>\n  <div class=\"buttons\" *ngIf=\"!autoApply && ( !rangesArray.length || (showCalInRanges && !singleDatePicker))\">\n    <div class=\"buttons_input\">\n      <button *ngIf=\"showClearButton\" class=\"mat-primary mat-stroked-button clear\" type=\"button\" (click)=\"clear()\" title=\"clear the date\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 -5 24 24\">\n          <path d=\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\" />\n        </svg>\n      </button>\n      <button class=\"mat-primary mat-stroked-button\" *ngIf=\"showCancel\" type=\"button\" (click)=\"clickCancel($event)\">{{locale.cancelLabel}}</button>\n      <button class=\"mat-primary mat-stroked-button\" [disabled]=\"applyBtn.disabled\" type=\"button\"\n        (click)=\"clickApply($event)\">{{locale.applyLabel}}</button>\n    </div>\n  </div>\n</div>\n", styles: [".md-drppicker{position:absolute;border-radius:4px;width:278px;padding:4px;margin-top:-10px;overflow:hidden;z-index:1000;font-size:13px;box-shadow:0 2px 4px #00000029,0 2px 8px #0000001f}.md-drppicker.double{width:auto}.md-drppicker.inline{position:relative;display:inline-block}.md-drppicker:after,.md-drppicker:before{position:absolute;display:inline-block;content:\"\"}.md-drppicker.openscenter:before{left:0;right:0;width:0;margin-left:auto;margin-right:auto}.md-drppicker.openscenter:after{left:0;right:0;width:0;margin-left:auto;margin-right:auto}.md-drppicker.single .calendar,.md-drppicker.single .ranges{float:none}.md-drppicker.shown{transform:scale(1);transition:all .1s ease-in-out;transform-origin:0 0;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.md-drppicker.shown.drops-up-left{transform-origin:100% 100%}.md-drppicker.shown.drops-up-right{transform-origin:0 100%}.md-drppicker.shown.drops-down-left{transform-origin:100% 0}.md-drppicker.shown.drops-down-right{transform-origin:0 0}.md-drppicker.shown.drops-down-center{transform-origin:50% 0}.md-drppicker.shown.drops-up-center{transform-origin:50% 100%}.md-drppicker.shown .calendar{display:block}.md-drppicker.hidden{transition:all .1s ease;transform:scale(0);transform-origin:0 0;cursor:default;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.md-drppicker.hidden.drops-up-left{transform-origin:100% 100%}.md-drppicker.hidden.drops-up-right{transform-origin:0 100%}.md-drppicker.hidden.drops-down-left{transform-origin:100% 0}.md-drppicker.hidden.drops-down-right{transform-origin:0 0}.md-drppicker.hidden.drops-down-center{transform-origin:50% 0}.md-drppicker.hidden.drops-up-center{transform-origin:50% 100%}.md-drppicker.hidden .calendar{display:none}.md-drppicker .calendar{max-width:270px;margin:4px}.md-drppicker .calendar.single .calendar-table{border:none}.md-drppicker .calendar td,.md-drppicker .calendar th{padding:0;white-space:nowrap;text-align:center;height:36px;width:36px}.md-drppicker .calendar td span,.md-drppicker .calendar th span{pointer-events:none}.md-drppicker .calendar-table{border-style:1px solid;padding:4px;border-radius:4px}.md-drppicker table{width:100%;margin:0}.md-drppicker td,.md-drppicker th{text-align:center;width:20px;height:20px;border-radius:4px;border-style:1px solid;white-space:nowrap;cursor:pointer}.md-drppicker td.available.prev,.md-drppicker th.available.prev{display:block;background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K);background-repeat:no-repeat;background-size:.5em;background-position:center;opacity:.8;transition:background-color .2s ease;border-radius:2em}.md-drppicker td.available.prev:hover,.md-drppicker th.available.prev:hover{margin:0}.md-drppicker td.available.next,.md-drppicker th.available.next{transform:rotate(180deg);display:block;background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K);background-repeat:no-repeat;background-size:.5em;background-position:center;opacity:.8;transition:background-color .2s ease;border-radius:2em}.md-drppicker td.available.next:hover,.md-drppicker th.available.next:hover{margin:0;transform:rotate(180deg)}.md-drppicker td.available:hover,.md-drppicker th.available:hover{background-repeat:no-repeat;background-size:.5em;background-position:center;margin:.25em 0;opacity:.8;border-radius:2em;transform:scale(1);transition:all .45s cubic-bezier(.23,1,.32,1) 0}.md-drppicker td.week,.md-drppicker th.week{font-size:80%}.md-drppicker td{margin:.25em 0;opacity:.8;border-radius:2em;transform:scale(1);transition:all .45s cubic-bezier(.23,1,.32,1) 0}.md-drppicker td.in-range{border-radius:0}.md-drppicker td.start-date{border-radius:2em 0 0 2em}.md-drppicker td.end-date{border-radius:0 2em 2em 0}.md-drppicker td.start-date.end-date{border-radius:4px}.md-drppicker th.month{width:auto}.md-drppicker option.disabled,.md-drppicker td.disabled{cursor:not-allowed;text-decoration:line-through}.md-drppicker .dropdowns{background-repeat:no-repeat;background-size:10px;background-position-y:center;background-position-x:right;width:50px;background-image:url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDI1NSAyNTUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI1NSAyNTU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0iYXJyb3ctZHJvcC1kb3duIj4KCQk8cG9seWdvbiBwb2ludHM9IjAsNjMuNzUgMTI3LjUsMTkxLjI1IDI1NSw2My43NSAgICIgZmlsbD0iIzk4OGM4YyIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=)}.md-drppicker .dropdowns select{display:inline-block;width:100%;padding:5px;border:1px solid;border-radius:2px;height:3rem}.md-drppicker .dropdowns select.monthselect,.md-drppicker .dropdowns select.yearselect{font-size:12px;padding:1px;height:auto;margin:0;cursor:default}.md-drppicker .dropdowns select.ampmselect,.md-drppicker .dropdowns select.hourselect,.md-drppicker .dropdowns select.minuteselect,.md-drppicker .dropdowns select.secondselect{width:50px;margin:0 auto;border-style:1px solid;padding:2px;outline:0;font-size:12px}.md-drppicker .dropdowns select.monthselect,.md-drppicker .dropdowns select.yearselect{cursor:pointer;opacity:0;position:absolute;top:0;left:0;margin:0;padding:0}.md-drppicker th.month>div{position:relative;display:inline-block}.md-drppicker .calendar-time{text-align:center;margin:4px auto 0;line-height:30px;position:relative}.md-drppicker .calendar-time .select{display:inline}.md-drppicker .calendar-time .select .select-item{display:inline-block;width:auto;position:relative;font-family:inherit;background-color:transparent;padding:10px 10px 10px 0;font-size:18px;border-radius:0;border:none;border-bottom-style:1px solid}.md-drppicker .calendar-time .select .select-item:after{position:absolute;top:18px;right:10px;width:0;height:0;padding:0;content:\"\";border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid rgba(0,0,0,.12);pointer-events:none}.md-drppicker .calendar-time .select .select-item:focus{outline:none}.md-drppicker .calendar-time .select .select-item .select-label{font-size:16px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.md-drppicker .calendar-time select.disabled{cursor:not-allowed}.md-drppicker .label-input{border-style:1px solid;border-radius:4px;height:30px;line-height:30px;display:block;vertical-align:middle;margin:0 auto 5px;padding:0 0 0 28px;width:100%}.md-drppicker .label-input.active{border-style:1px solid;border-radius:4px}.md-drppicker .md-drppicker_input{position:relative;padding:0 30px 0 0}.md-drppicker .md-drppicker_input i,.md-drppicker .md-drppicker_input svg{position:absolute;left:8px;top:8px}.md-drppicker.rtl .label-input{padding-right:28px;padding-left:6px}.md-drppicker.rtl .md-drppicker_input i,.md-drppicker.rtl .md-drppicker_input svg{left:auto;right:8px}.md-drppicker .show-ranges .drp-calendar.left{border-left-style:1px solid}.md-drppicker .ranges{float:none;text-align:left;margin:0}.md-drppicker .ranges ul{list-style:none;margin:0 auto;padding:0;width:100%}.md-drppicker .ranges ul li{font-size:12px}.md-drppicker .ranges ul li button{padding:8px 12px;width:100%;background:none;border:none;text-align:left;cursor:pointer}.md-drppicker .ranges ul li button[disabled]{opacity:.3}.md-drppicker .ranges ul li button:active{background:transparent}.md-drppicker .show-calendar .ranges{margin-top:8px}.md-drppicker [hidden]{display:none}.md-drppicker .buttons{text-align:right;margin:0 5px 5px 0}.md-drppicker .btn{position:relative;overflow:hidden;outline:none;padding:0 6px;cursor:pointer;border-radius:2px;box-shadow:0 1px 4px #0009;color:#ecf0f1;transition:background-color .4s;height:auto;text-transform:uppercase;line-height:36px;border:none}.md-drppicker .btn>*{position:relative}.md-drppicker .btn span{display:block;padding:12px 24px}.md-drppicker .btn:before{content:\"\";position:absolute;top:50%;left:50%;display:block;width:0;padding-top:0;border-radius:100%;transform:translate(-50%,-50%)}.md-drppicker .btn:active:before{width:120%;padding-top:120%;transition:width .2s ease-out,padding-top .2s ease-out}.md-drppicker .btn:disabled{opacity:.5}.md-drppicker .clear{box-shadow:none}.md-drppicker .clear svg{fill:currentColor}@media (min-width: 564px){.md-drppicker{width:auto}.md-drppicker.single .calendar.left{clear:none}.md-drppicker.ltr{direction:ltr;text-align:left}.md-drppicker.ltr .calendar.left{clear:left}.md-drppicker.ltr .calendar.left .calendar-table{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.md-drppicker.ltr .calendar.right{margin-left:0}.md-drppicker.ltr .calendar.right .calendar-table{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}.md-drppicker.ltr .left .md-drppicker_input,.md-drppicker.ltr .right .md-drppicker_input{padding-right:35px}.md-drppicker.ltr .calendar.left .calendar-table{padding-right:12px}.md-drppicker.ltr .calendar,.md-drppicker.ltr .ranges{float:left}.md-drppicker.rtl{direction:rtl;text-align:right}.md-drppicker.rtl .calendar.left{clear:right;margin-left:0}.md-drppicker.rtl .calendar.left .calendar-table{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}.md-drppicker.rtl .calendar.right{margin-right:0}.md-drppicker.rtl .calendar.right .calendar-table{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.md-drppicker.rtl .left .md-drppicker_input,.md-drppicker.rtl .calendar.left .calendar-table{padding-left:12px}.md-drppicker.rtl .calendar,.md-drppicker.rtl .ranges{text-align:right;float:right}.drp-animate{transform:translate(0);transition:transform .2s ease,opacity .2s ease}.drp-animate.drp-picker-site-this{transition-timing-function:linear}.drp-animate.drp-animate-right{transform:translate(10%);opacity:0}.drp-animate.drp-animate-left{transform:translate(-10%);opacity:0}}@media (min-width: 730px){.md-drppicker .ranges{width:auto}.md-drppicker.ltr .ranges{float:left}.md-drppicker.rtl .ranges{float:right}.md-drppicker .calendar.left{clear:none!important}}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i3$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     BooleanInputConverter(),
     __metadata("design:type", Boolean)
@@ -22418,7 +22418,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => DaterangepickerComponent),
                             multi: true
-                        }], template: "<div class=\"md-drppicker\" #pickerContainer [ngClass]=\"{\n    ltr: locale.direction === 'ltr',\n    rtl: this.locale.direction === 'rtl',\n    'shown': isShown || inline,\n    'hidden': !isShown && !inline,\n    'inline': inline,\n    'double':  !singleDatePicker && showCalInRanges,\n    'show-ranges': rangesArray.length\n}\" [class]=\"'drops-' + drops + '-' + opens\">\n  <div class=\"ranges\">\n    <ul>\n      <li *ngFor=\"let range of rangesArray\">\n        <button type=\"button\" (click)=\"clickRange($event, range)\" [disabled]=\"disableRange(range)\"\n          [ngClass]=\"{'active': range === chosenRange}\">{{range | oTranslate}}</button>\n      </li>\n    </ul>\n  </div>\n  <div class=\"calendar\" [ngClass]=\"{right: singleDatePicker, left: !singleDatePicker}\" *ngIf=\"showCalInRanges\">\n    <div class=\"calendar-table\">\n      <table class=\"table-condensed\" *ngIf=\"calendarVariables\" aria-describedby=\"calendar days table\">\n        <thead>\n          <tr>\n            <th scope=\"col\" *ngIf=\"showWeekNumbers || showISOWeekNumbers\"></th>\n            <ng-container\n              *ngIf=\"!calendarVariables.left.minDate || calendarVariables.left.minDate.isBefore(calendarVariables.left.calendar.firstDay) && (!this.linkedCalendars || true)\">\n              <th (click)=\"clickPrev(sideEnum.left)\" class=\"prev available\">\n              </th>\n            </ng-container>\n            <ng-container\n              *ngIf=\"!(!calendarVariables.left.minDate || calendarVariables.left.minDate.isBefore(calendarVariables.left.calendar.firstDay) && (!this.linkedCalendars || true))\">\n              <th scope=\"col\"></th>\n            </ng-container>\n            <th scope=\"col\" colspan=\"5\" class=\"month drp-animate\">\n              <ng-container *ngIf=\"showDropdowns && calendarVariables.left.dropdowns\">\n                <div class=\"dropdowns\">\n                  {{this.locale.monthNames[calendarVariables?.left?.calendar[1][1].month()]}}\n                  <select class=\"monthselect\" (change)=\"monthChanged($event, sideEnum.left)\">\n                    <option\n                      [disabled]=\"(calendarVariables.left.dropdowns.inMinYear && m < calendarVariables.left.minDate.month()) || (calendarVariables.left.dropdowns.inMaxYear && m > calendarVariables.left.maxDate.month())\"\n                      *ngFor=\"let m of calendarVariables.left.dropdowns.monthArrays\" [value]=\"m\"\n                      [selected]=\"calendarVariables.left.dropdowns.currentMonth == m\">\n                      {{locale.monthNames[m]}}\n                    </option>\n                  </select>\n                </div>\n                <div class=\"dropdowns\">\n                  {{ calendarVariables?.left?.calendar[1][1].format(\" YYYY\")}}\n                  <select class=\"yearselect\" (change)=\"yearChanged($event, sideEnum.left)\">\n                    <option *ngFor=\"let y of calendarVariables.left.dropdowns.yearArrays\"\n                      [selected]=\"y === calendarVariables.left.dropdowns.currentYear\">\n                      {{y}}\n                    </option>\n                  </select>\n                </div>\n              </ng-container>\n              <ng-container *ngIf=\"!showDropdowns || !calendarVariables.left.dropdowns\">\n                {{this.locale.monthNames[calendarVariables?.left?.calendar[1][1].month()]}} {{ calendarVariables?.left?.calendar[1][1].format(\"\n                YYYY\")}}\n              </ng-container>\n            </th>\n            <ng-container\n              *ngIf=\"(!calendarVariables.left.maxDate || calendarVariables.left.maxDate.isAfter(calendarVariables.left.calendar.lastDay)) && (!linkedCalendars || singleDatePicker )\">\n              <th scope=\"col\" class=\"next available\" (click)=\"clickNext(sideEnum.left)\">\n              </th>\n            </ng-container>\n            <ng-container\n              *ngIf=\"!((!calendarVariables.left.maxDate || calendarVariables.left.maxDate.isAfter(calendarVariables.left.calendar.lastDay)) && (!linkedCalendars || singleDatePicker ))\">\n              <th scope=\"col\"></th>\n            </ng-container>\n          </tr>\n          <tr class='week-days'>\n            <th scope=\"col\" *ngIf=\"showWeekNumbers || showISOWeekNumbers\" class=\"week\"><span>{{this.locale.weekLabel}}</span></th>\n            <th scope=\"col\" *ngFor=\"let dayofweek of adjustedDaysOfWeek\"><span>{{dayofweek}}</span></th>\n          </tr>\n        </thead>\n        <tbody class=\"drp-animate\">\n          <tr *ngFor=\"let row of calendarVariables.left.calRows\" [class]=\"calendarVariables.left.classes[row].classList\">\n            <!-- add week number -->\n            <td class=\"week\" *ngIf=\"showWeekNumbers\">\n              <span>{{calendarVariables.left.calendar[row][0].week()}}</span>\n            </td>\n            <td class=\"week\" *ngIf=\"showISOWeekNumbers\">\n              <span>{{calendarVariables.left.calendar[row][0].isoWeek()}}</span>\n            </td>\n            <!-- cal -->\n            <td *ngFor=\"let col of calendarVariables.left.calCols\" [class]=\"calendarVariables.left.classes[row][col]\"\n              (click)=\"clickDate($event, sideEnum.left, row, col)\">\n              <span>{{calendarVariables.left.calendar[row][col].date()}}</span>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n    <div class=\"calendar-time\" *ngIf=\"timePicker\">\n      <div class=\"select\">\n        <select class=\"hourselect select-item\" [disabled]=\"!endDate\" [(ngModel)]=\"timepickerVariables.left.selectedHour\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.left)\">\n          <option *ngFor=\"let i of timepickerVariables.left.hours\" [value]=\"i\" [disabled]=\"timepickerVariables.left.disabledHours.indexOf(i) > -1\">\n            {{i}}</option>\n        </select>\n      </div>\n      <div class=\"select\">\n        <select class=\"select-item minuteselect\" [disabled]=\"!endDate\" [(ngModel)]=\"timepickerVariables.left.selectedMinute\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.left)\">\n          <option *ngFor=\"let i of timepickerVariables.left.minutes; let index = index;\" [value]=\"i\"\n            [disabled]=\"timepickerVariables.left.disabledMinutes.indexOf(i) > -1\">{{timepickerVariables.left.minutesLabel[index]}}</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n      <div class=\"select\">\n        <select class=\"select-item secondselect\" *ngIf=\"timePickerSeconds\" [disabled]=\"!endDate\" [(ngModel)]=\"timepickerVariables.left.selectedSecond\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.left)\">\n          <option *ngFor=\"let i of timepickerVariables.left.seconds; let index = index;\" [value]=\"i\"\n            [disabled]=\"timepickerVariables.left.disabledSeconds.indexOf(i) > -1\">{{timepickerVariables.left.secondsLabel[index]}}</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n      <div class=\"select\">\n        <select class=\"select-item ampmselect\" *ngIf=\"!timePicker24Hour\" [(ngModel)]=\"timepickerVariables.left.ampmModel\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.left)\">\n          <option value=\"AM\" [disabled]=\"timepickerVariables.left.amDisabled\">AM</option>\n          <option value=\"PM\" [disabled]=\"timepickerVariables.left.pmDisabled\">PM</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n    </div>\n  </div>\n  <div class=\"calendar right\" *ngIf=\"showCalInRanges && !singleDatePicker\">\n    <div class=\"calendar-table\">\n      <table class=\"table-condensed\" *ngIf=\"calendarVariables\" aria-describedby=\"calendar days table\">\n        <thead>\n          <tr>\n            <th scope=\"col\" *ngIf=\"showWeekNumbers || showISOWeekNumbers\"></th>\n            <ng-container\n              *ngIf=\"(!calendarVariables.right.minDate || calendarVariables.right.minDate.isBefore(calendarVariables.right.calendar.firstDay)) && (!this.linkedCalendars)\">\n              <th (click)=\"clickPrev(sideEnum.right)\" class=\"prev available\">\n              </th>\n            </ng-container>\n            <ng-container\n              *ngIf=\"!((!calendarVariables.right.minDate || calendarVariables.right.minDate.isBefore(calendarVariables.right.calendar.firstDay)) && (!this.linkedCalendars))\">\n              <th scope=\"col\"></th>\n            </ng-container>\n            <th scope=\"col\" colspan=\"5\" class=\"month\">\n              <ng-container *ngIf=\"showDropdowns && calendarVariables.right.dropdowns\">\n                <div class=\"dropdowns\">\n                  {{this.locale.monthNames[calendarVariables?.right?.calendar[1][1].month()]}}\n                  <select class=\"monthselect\" (change)=\"monthChanged($event, sideEnum.right)\">\n                    <option\n                      [disabled]=\"(calendarVariables.right.dropdowns.inMinYear && m < calendarVariables.right.minDate.month()) || (calendarVariables.right.dropdowns.inMaxYear && m > calendarVariables.right.maxDate.month())\"\n                      *ngFor=\"let m of calendarVariables.right.dropdowns.monthArrays\" [value]=\"m\"\n                      [selected]=\"calendarVariables.right.dropdowns.currentMonth == m\">\n                      {{locale.monthNames[m]}}\n                    </option>\n                  </select>\n                </div>\n                <div class=\"dropdowns\">\n                  {{ calendarVariables?.right?.calendar[1][1].format(\" YYYY\")}}\n                  <select class=\"yearselect\" (change)=\"yearChanged($event, sideEnum.right)\">\n                    <option *ngFor=\"let y of calendarVariables.right.dropdowns.yearArrays\"\n                      [selected]=\"y === calendarVariables.right.dropdowns.currentYear\">\n                      {{y}}\n                    </option>\n                  </select>\n                </div>\n              </ng-container>\n              <ng-container *ngIf=\"!showDropdowns || !calendarVariables.right.dropdowns\">\n                {{this.locale.monthNames[calendarVariables?.right?.calendar[1][1].month()]}} {{ calendarVariables?.right?.calendar[1][1].format(\"\n                YYYY\")}}\n              </ng-container>\n            </th>\n            <ng-container\n              *ngIf=\"!calendarVariables.right.maxDate || calendarVariables.right.maxDate.isAfter(calendarVariables.right.calendar.lastDay) && (!linkedCalendars || singleDatePicker || true)\">\n              <th scope=\"col\" class=\"next available\" (click)=\"clickNext(sideEnum.right)\">\n              </th>\n            </ng-container>\n            <ng-container\n              *ngIf=\"!(!calendarVariables.right.maxDate || calendarVariables.right.maxDate.isAfter(calendarVariables.right.calendar.lastDay) && (!linkedCalendars || singleDatePicker || true))\">\n              <th scope=\"col\"></th>\n            </ng-container>\n          </tr>\n\n          <tr>\n            <th scope=\"col\" *ngIf=\"showWeekNumbers || showISOWeekNumbers\" class=\"week\"><span>{{this.locale.weekLabel}}</span></th>\n            <th scope=\"col\" *ngFor=\"let dayofweek of locale.daysOfWeek\"><span>{{dayofweek}}</span></th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let row of calendarVariables.right.calRows\" [class]=\"calendarVariables.right.classes[row].classList\">\n            <td class=\"week\" *ngIf=\"showWeekNumbers\">\n              <span>{{calendarVariables.right.calendar[row][0].week()}}</span>\n            </td>\n            <td class=\"week\" *ngIf=\"showISOWeekNumbers\">\n              <span>{{calendarVariables.right.calendar[row][0].isoWeek()}}</span>\n            </td>\n            <td *ngFor=\"let col of calendarVariables.right.calCols\" [class]=\"calendarVariables.right.classes[row][col]\"\n              (click)=\"clickDate($event, sideEnum.right, row, col)\">\n              <span>{{calendarVariables.right.calendar[row][col].date()}}</span>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n    <div class=\"calendar-time\" *ngIf=\"timePicker\">\n      <div class=\"select\">\n        <select class=\"select-item hourselect\" [disabled]=\"!endDate\" [(ngModel)]=\"timepickerVariables.right.selectedHour\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.right)\">\n          <option *ngFor=\"let i of timepickerVariables.right.hours\" [value]=\"i\" [disabled]=\"timepickerVariables.right.disabledHours.indexOf(i) > -1\">\n            {{i}}</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n      <div class=\"select\">\n        <select class=\"select-item minuteselect\" [disabled]=\"!endDate\" [(ngModel)]=\"timepickerVariables.right.selectedMinute\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.right)\">\n          <option *ngFor=\"let i of timepickerVariables.right.minutes; let index = index;\" [value]=\"i\"\n            [disabled]=\"timepickerVariables.right.disabledMinutes.indexOf(i) > -1\">{{timepickerVariables.right.minutesLabel[index]}}</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n      <div class=\"select\">\n        <select *ngIf=\"timePickerSeconds\" class=\"select-item secondselect\" [disabled]=\"!endDate\"\n          [(ngModel)]=\"timepickerVariables.right.selectedSecond\" (ngModelChange)=\"timeChanged($event, sideEnum.right)\">\n          <option *ngFor=\"let i of timepickerVariables.right.seconds; let index = index;\" [value]=\"i\"\n            [disabled]=\"timepickerVariables.right.disabledSeconds.indexOf(i) > -1\">{{timepickerVariables.right.secondsLabel[index]}}</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n      <div class=\"select\">\n        <select *ngIf=\"!timePicker24Hour\" class=\"select-item ampmselect\" [(ngModel)]=\"timepickerVariables.right.ampmModel\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.right)\">\n          <option value=\"AM\" [disabled]=\"timepickerVariables.right.amDisabled\">AM</option>\n          <option value=\"PM\" [disabled]=\"timepickerVariables.right.pmDisabled\">PM</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n    </div>\n  </div>\n  <div class=\"buttons\" *ngIf=\"!autoApply && ( !rangesArray.length || (showCalInRanges && !singleDatePicker))\">\n    <div class=\"buttons_input\">\n      <button *ngIf=\"showClearButton\" class=\"mat-primary mat-stroked-button clear\" type=\"button\" (click)=\"clear()\" title=\"clear the date\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 -5 24 24\">\n          <path d=\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\" />\n        </svg>\n      </button>\n      <button class=\"mat-primary mat-stroked-button\" *ngIf=\"showCancel\" type=\"button\" (click)=\"clickCancel($event)\">{{locale.cancelLabel}}</button>\n      <button class=\"mat-primary mat-stroked-button\" [disabled]=\"applyBtn.disabled\" type=\"button\"\n        (click)=\"clickApply($event)\">{{locale.applyLabel}}</button>\n    </div>\n  </div>\n</div>\n", styles: [".md-drppicker{position:absolute;border-radius:4px;width:278px;padding:4px;margin-top:-10px;overflow:hidden;z-index:1000;font-size:13px;box-shadow:0 2px 4px #00000029,0 2px 8px #0000001f}.md-drppicker.double{width:auto}.md-drppicker.inline{position:relative;display:inline-block}.md-drppicker:after,.md-drppicker:before{position:absolute;display:inline-block;content:\"\"}.md-drppicker.openscenter:before{left:0;right:0;width:0;margin-left:auto;margin-right:auto}.md-drppicker.openscenter:after{left:0;right:0;width:0;margin-left:auto;margin-right:auto}.md-drppicker.single .calendar,.md-drppicker.single .ranges{float:none}.md-drppicker.shown{transform:scale(1);transition:all .1s ease-in-out;transform-origin:0 0;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.md-drppicker.shown.drops-up-left{transform-origin:100% 100%}.md-drppicker.shown.drops-up-right{transform-origin:0 100%}.md-drppicker.shown.drops-down-left{transform-origin:100% 0}.md-drppicker.shown.drops-down-right{transform-origin:0 0}.md-drppicker.shown.drops-down-center{transform-origin:50% 0}.md-drppicker.shown.drops-up-center{transform-origin:50% 100%}.md-drppicker.shown .calendar{display:block}.md-drppicker.hidden{transition:all .1s ease;transform:scale(0);transform-origin:0 0;cursor:default;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.md-drppicker.hidden.drops-up-left{transform-origin:100% 100%}.md-drppicker.hidden.drops-up-right{transform-origin:0 100%}.md-drppicker.hidden.drops-down-left{transform-origin:100% 0}.md-drppicker.hidden.drops-down-right{transform-origin:0 0}.md-drppicker.hidden.drops-down-center{transform-origin:50% 0}.md-drppicker.hidden.drops-up-center{transform-origin:50% 100%}.md-drppicker.hidden .calendar{display:none}.md-drppicker .calendar{max-width:270px;margin:4px}.md-drppicker .calendar.single .calendar-table{border:none}.md-drppicker .calendar td,.md-drppicker .calendar th{padding:0;white-space:nowrap;text-align:center;height:36px;width:36px}.md-drppicker .calendar td span,.md-drppicker .calendar th span{pointer-events:none}.md-drppicker .calendar-table{border-style:1px solid;padding:4px;border-radius:4px}.md-drppicker table{width:100%;margin:0}.md-drppicker td,.md-drppicker th{text-align:center;width:20px;height:20px;border-radius:4px;border-style:1px solid;white-space:nowrap;cursor:pointer}.md-drppicker td.available.prev,.md-drppicker th.available.prev{display:block;background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K);background-repeat:no-repeat;background-size:.5em;background-position:center;opacity:.8;transition:background-color .2s ease;border-radius:2em}.md-drppicker td.available.prev:hover,.md-drppicker th.available.prev:hover{margin:0}.md-drppicker td.available.next,.md-drppicker th.available.next{transform:rotate(180deg);display:block;background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K);background-repeat:no-repeat;background-size:.5em;background-position:center;opacity:.8;transition:background-color .2s ease;border-radius:2em}.md-drppicker td.available.next:hover,.md-drppicker th.available.next:hover{margin:0;transform:rotate(180deg)}.md-drppicker td.available:hover,.md-drppicker th.available:hover{background-repeat:no-repeat;background-size:.5em;background-position:center;margin:.25em 0;opacity:.8;border-radius:2em;transform:scale(1);transition:all .45s cubic-bezier(.23,1,.32,1) 0}.md-drppicker td.week,.md-drppicker th.week{font-size:80%}.md-drppicker td{margin:.25em 0;opacity:.8;border-radius:2em;transform:scale(1);transition:all .45s cubic-bezier(.23,1,.32,1) 0}.md-drppicker td.in-range{border-radius:0}.md-drppicker td.start-date{border-radius:2em 0 0 2em}.md-drppicker td.end-date{border-radius:0 2em 2em 0}.md-drppicker td.start-date.end-date{border-radius:4px}.md-drppicker th.month{width:auto}.md-drppicker option.disabled,.md-drppicker td.disabled{cursor:not-allowed;text-decoration:line-through}.md-drppicker .dropdowns{background-repeat:no-repeat;background-size:10px;background-position-y:center;background-position-x:right;width:50px;background-image:url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDI1NSAyNTUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI1NSAyNTU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0iYXJyb3ctZHJvcC1kb3duIj4KCQk8cG9seWdvbiBwb2ludHM9IjAsNjMuNzUgMTI3LjUsMTkxLjI1IDI1NSw2My43NSAgICIgZmlsbD0iIzk4OGM4YyIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=)}.md-drppicker .dropdowns select{display:inline-block;width:100%;padding:5px;border:1px solid;border-radius:2px;height:3rem}.md-drppicker .dropdowns select.monthselect,.md-drppicker .dropdowns select.yearselect{font-size:12px;padding:1px;height:auto;margin:0;cursor:default}.md-drppicker .dropdowns select.ampmselect,.md-drppicker .dropdowns select.hourselect,.md-drppicker .dropdowns select.minuteselect,.md-drppicker .dropdowns select.secondselect{width:50px;margin:0 auto;border-style:1px solid;padding:2px;outline:0;font-size:12px}.md-drppicker .dropdowns select.monthselect,.md-drppicker .dropdowns select.yearselect{cursor:pointer;opacity:0;position:absolute;top:0;left:0;margin:0;padding:0}.md-drppicker th.month>div{position:relative;display:inline-block}.md-drppicker .calendar-time{text-align:center;margin:4px auto 0;line-height:30px;position:relative}.md-drppicker .calendar-time .select{display:inline}.md-drppicker .calendar-time .select .select-item{display:inline-block;width:auto;position:relative;font-family:inherit;background-color:transparent;padding:10px 10px 10px 0;font-size:18px;border-radius:0;border:none;border-bottom-style:1px solid}.md-drppicker .calendar-time .select .select-item:after{position:absolute;top:18px;right:10px;width:0;height:0;padding:0;content:\"\";border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid rgba(0,0,0,.12);pointer-events:none}.md-drppicker .calendar-time .select .select-item:focus{outline:none}.md-drppicker .calendar-time .select .select-item .select-label{font-size:16px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.md-drppicker .calendar-time select.disabled{cursor:not-allowed}.md-drppicker .label-input{border-style:1px solid;border-radius:4px;height:30px;line-height:30px;display:block;vertical-align:middle;margin:0 auto 5px;padding:0 0 0 28px;width:100%}.md-drppicker .label-input.active{border-style:1px solid;border-radius:4px}.md-drppicker .md-drppicker_input{position:relative;padding:0 30px 0 0}.md-drppicker .md-drppicker_input i,.md-drppicker .md-drppicker_input svg{position:absolute;left:8px;top:8px}.md-drppicker.rtl .label-input{padding-right:28px;padding-left:6px}.md-drppicker.rtl .md-drppicker_input i,.md-drppicker.rtl .md-drppicker_input svg{left:auto;right:8px}.md-drppicker .show-ranges .drp-calendar.left{border-left-style:1px solid}.md-drppicker .ranges{float:none;text-align:left;margin:0}.md-drppicker .ranges ul{list-style:none;margin:0 auto;padding:0;width:100%}.md-drppicker .ranges ul li{font-size:12px}.md-drppicker .ranges ul li button{padding:8px 12px;width:100%;background:none;border:none;text-align:left;cursor:pointer}.md-drppicker .ranges ul li button[disabled]{opacity:.3}.md-drppicker .ranges ul li button:active{background:transparent}.md-drppicker .show-calendar .ranges{margin-top:8px}.md-drppicker [hidden]{display:none}.md-drppicker .buttons{text-align:right;margin:0 5px 5px 0}.md-drppicker .btn{position:relative;overflow:hidden;border-width:0;outline:none;padding:0 6px;cursor:pointer;border-radius:2px;box-shadow:0 1px 4px #0009;color:#ecf0f1;transition:background-color .4s;height:auto;text-transform:uppercase;line-height:36px;border:none}.md-drppicker .btn>*{position:relative}.md-drppicker .btn span{display:block;padding:12px 24px}.md-drppicker .btn:before{content:\"\";position:absolute;top:50%;left:50%;display:block;width:0;padding-top:0;border-radius:100%;transform:translate(-50%,-50%)}.md-drppicker .btn:active:before{width:120%;padding-top:120%;transition:width .2s ease-out,padding-top .2s ease-out}.md-drppicker .btn:disabled{opacity:.5}.md-drppicker .clear{box-shadow:none}.md-drppicker .clear svg{fill:currentColor}@media (min-width: 564px){.md-drppicker{width:auto}.md-drppicker.single .calendar.left{clear:none}.md-drppicker.ltr{direction:ltr;text-align:left}.md-drppicker.ltr .calendar.left{clear:left}.md-drppicker.ltr .calendar.left .calendar-table{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.md-drppicker.ltr .calendar.right{margin-left:0}.md-drppicker.ltr .calendar.right .calendar-table{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}.md-drppicker.ltr .left .md-drppicker_input,.md-drppicker.ltr .right .md-drppicker_input{padding-right:35px}.md-drppicker.ltr .calendar.left .calendar-table{padding-right:12px}.md-drppicker.ltr .calendar,.md-drppicker.ltr .ranges{float:left}.md-drppicker.rtl{direction:rtl;text-align:right}.md-drppicker.rtl .calendar.left{clear:right;margin-left:0}.md-drppicker.rtl .calendar.left .calendar-table{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}.md-drppicker.rtl .calendar.right{margin-right:0}.md-drppicker.rtl .calendar.right .calendar-table{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.md-drppicker.rtl .left .md-drppicker_input,.md-drppicker.rtl .calendar.left .calendar-table{padding-left:12px}.md-drppicker.rtl .calendar,.md-drppicker.rtl .ranges{text-align:right;float:right}.drp-animate{transform:translate(0);transition:transform .2s ease,opacity .2s ease}.drp-animate.drp-picker-site-this{transition-timing-function:linear}.drp-animate.drp-animate-right{transform:translate(10%);opacity:0}.drp-animate.drp-animate-left{transform:translate(-10%);opacity:0}}@media (min-width: 730px){.md-drppicker .ranges{width:auto}.md-drppicker.ltr .ranges{float:left}.md-drppicker.rtl .ranges{float:right}.md-drppicker .calendar.left{clear:none!important}}\n"] }]
+                        }], template: "<div class=\"md-drppicker\" #pickerContainer [ngClass]=\"{\n    ltr: locale.direction === 'ltr',\n    rtl: this.locale.direction === 'rtl',\n    'shown': isShown || inline,\n    'hidden': !isShown && !inline,\n    'inline': inline,\n    'double':  !singleDatePicker && showCalInRanges,\n    'show-ranges': rangesArray.length\n}\" [class]=\"'drops-' + drops + '-' + opens\">\n  <div class=\"ranges\">\n    <ul>\n      <li *ngFor=\"let range of rangesArray\">\n        <button type=\"button\" (click)=\"clickRange($event, range)\" [disabled]=\"disableRange(range)\"\n          [ngClass]=\"{'active': range === chosenRange}\">{{range | oTranslate}}</button>\n      </li>\n    </ul>\n  </div>\n  <div class=\"calendar\" [ngClass]=\"{right: singleDatePicker, left: !singleDatePicker}\" *ngIf=\"showCalInRanges\">\n    <div class=\"calendar-table\">\n      <table class=\"table-condensed\" *ngIf=\"calendarVariables\" aria-describedby=\"calendar days table\">\n        <thead>\n          <tr>\n            <th scope=\"col\" *ngIf=\"showWeekNumbers || showISOWeekNumbers\"></th>\n            <ng-container\n              *ngIf=\"!calendarVariables.left.minDate || calendarVariables.left.minDate.isBefore(calendarVariables.left.calendar.firstDay) && (!this.linkedCalendars || true)\">\n              <th (click)=\"clickPrev(sideEnum.left)\" class=\"prev available\">\n              </th>\n            </ng-container>\n            <ng-container\n              *ngIf=\"!(!calendarVariables.left.minDate || calendarVariables.left.minDate.isBefore(calendarVariables.left.calendar.firstDay) && (!this.linkedCalendars || true))\">\n              <th scope=\"col\"></th>\n            </ng-container>\n            <th scope=\"col\" colspan=\"5\" class=\"month drp-animate\">\n              <ng-container *ngIf=\"showDropdowns && calendarVariables.left.dropdowns\">\n                <div class=\"dropdowns\">\n                  {{this.locale.monthNames[calendarVariables?.left?.calendar[1][1].month()]}}\n                  <select class=\"monthselect\" (change)=\"monthChanged($event, sideEnum.left)\">\n                    <option\n                      [disabled]=\"(calendarVariables.left.dropdowns.inMinYear && m < calendarVariables.left.minDate.month()) || (calendarVariables.left.dropdowns.inMaxYear && m > calendarVariables.left.maxDate.month())\"\n                      *ngFor=\"let m of calendarVariables.left.dropdowns.monthArrays\" [value]=\"m\"\n                      [selected]=\"calendarVariables.left.dropdowns.currentMonth == m\">\n                      {{locale.monthNames[m]}}\n                    </option>\n                  </select>\n                </div>\n                <div class=\"dropdowns\">\n                  {{ calendarVariables?.left?.calendar[1][1].format(\" YYYY\")}}\n                  <select class=\"yearselect\" (change)=\"yearChanged($event, sideEnum.left)\">\n                    <option *ngFor=\"let y of calendarVariables.left.dropdowns.yearArrays\"\n                      [selected]=\"y === calendarVariables.left.dropdowns.currentYear\">\n                      {{y}}\n                    </option>\n                  </select>\n                </div>\n              </ng-container>\n              <ng-container *ngIf=\"!showDropdowns || !calendarVariables.left.dropdowns\">\n                {{this.locale.monthNames[calendarVariables?.left?.calendar[1][1].month()]}} {{ calendarVariables?.left?.calendar[1][1].format(\"\n                YYYY\")}}\n              </ng-container>\n            </th>\n            <ng-container\n              *ngIf=\"(!calendarVariables.left.maxDate || calendarVariables.left.maxDate.isAfter(calendarVariables.left.calendar.lastDay)) && (!linkedCalendars || singleDatePicker )\">\n              <th scope=\"col\" class=\"next available\" (click)=\"clickNext(sideEnum.left)\">\n              </th>\n            </ng-container>\n            <ng-container\n              *ngIf=\"!((!calendarVariables.left.maxDate || calendarVariables.left.maxDate.isAfter(calendarVariables.left.calendar.lastDay)) && (!linkedCalendars || singleDatePicker ))\">\n              <th scope=\"col\"></th>\n            </ng-container>\n          </tr>\n          <tr class='week-days'>\n            <th scope=\"col\" *ngIf=\"showWeekNumbers || showISOWeekNumbers\" class=\"week\"><span>{{this.locale.weekLabel}}</span></th>\n            <th scope=\"col\" *ngFor=\"let dayofweek of adjustedDaysOfWeek\"><span>{{dayofweek}}</span></th>\n          </tr>\n        </thead>\n        <tbody class=\"drp-animate\">\n          <tr *ngFor=\"let row of calendarVariables.left.calRows\" [class]=\"calendarVariables.left.classes[row].classList\">\n            <!-- add week number -->\n            <td class=\"week\" *ngIf=\"showWeekNumbers\">\n              <span>{{calendarVariables.left.calendar[row][0].week()}}</span>\n            </td>\n            <td class=\"week\" *ngIf=\"showISOWeekNumbers\">\n              <span>{{calendarVariables.left.calendar[row][0].isoWeek()}}</span>\n            </td>\n            <!-- cal -->\n            <td *ngFor=\"let col of calendarVariables.left.calCols\" [class]=\"calendarVariables.left.classes[row][col]\"\n              (click)=\"clickDate($event, sideEnum.left, row, col)\">\n              <span>{{calendarVariables.left.calendar[row][col].date()}}</span>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n    <div class=\"calendar-time\" *ngIf=\"timePicker\">\n      <div class=\"select\">\n        <select class=\"hourselect select-item\" [disabled]=\"!endDate\" [(ngModel)]=\"timepickerVariables.left.selectedHour\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.left)\">\n          <option *ngFor=\"let i of timepickerVariables.left.hours\" [value]=\"i\" [disabled]=\"timepickerVariables.left.disabledHours.indexOf(i) > -1\">\n            {{i}}</option>\n        </select>\n      </div>\n      <div class=\"select\">\n        <select class=\"select-item minuteselect\" [disabled]=\"!endDate\" [(ngModel)]=\"timepickerVariables.left.selectedMinute\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.left)\">\n          <option *ngFor=\"let i of timepickerVariables.left.minutes; let index = index;\" [value]=\"i\"\n            [disabled]=\"timepickerVariables.left.disabledMinutes.indexOf(i) > -1\">{{timepickerVariables.left.minutesLabel[index]}}</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n      <div class=\"select\">\n        <select class=\"select-item secondselect\" *ngIf=\"timePickerSeconds\" [disabled]=\"!endDate\" [(ngModel)]=\"timepickerVariables.left.selectedSecond\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.left)\">\n          <option *ngFor=\"let i of timepickerVariables.left.seconds; let index = index;\" [value]=\"i\"\n            [disabled]=\"timepickerVariables.left.disabledSeconds.indexOf(i) > -1\">{{timepickerVariables.left.secondsLabel[index]}}</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n      <div class=\"select\">\n        <select class=\"select-item ampmselect\" *ngIf=\"!timePicker24Hour\" [(ngModel)]=\"timepickerVariables.left.ampmModel\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.left)\">\n          <option value=\"AM\" [disabled]=\"timepickerVariables.left.amDisabled\">AM</option>\n          <option value=\"PM\" [disabled]=\"timepickerVariables.left.pmDisabled\">PM</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n    </div>\n  </div>\n  <div class=\"calendar right\" *ngIf=\"showCalInRanges && !singleDatePicker\">\n    <div class=\"calendar-table\">\n      <table class=\"table-condensed\" *ngIf=\"calendarVariables\" aria-describedby=\"calendar days table\">\n        <thead>\n          <tr>\n            <th scope=\"col\" *ngIf=\"showWeekNumbers || showISOWeekNumbers\"></th>\n            <ng-container\n              *ngIf=\"(!calendarVariables.right.minDate || calendarVariables.right.minDate.isBefore(calendarVariables.right.calendar.firstDay)) && (!this.linkedCalendars)\">\n              <th (click)=\"clickPrev(sideEnum.right)\" class=\"prev available\">\n              </th>\n            </ng-container>\n            <ng-container\n              *ngIf=\"!((!calendarVariables.right.minDate || calendarVariables.right.minDate.isBefore(calendarVariables.right.calendar.firstDay)) && (!this.linkedCalendars))\">\n              <th scope=\"col\"></th>\n            </ng-container>\n            <th scope=\"col\" colspan=\"5\" class=\"month\">\n              <ng-container *ngIf=\"showDropdowns && calendarVariables.right.dropdowns\">\n                <div class=\"dropdowns\">\n                  {{this.locale.monthNames[calendarVariables?.right?.calendar[1][1].month()]}}\n                  <select class=\"monthselect\" (change)=\"monthChanged($event, sideEnum.right)\">\n                    <option\n                      [disabled]=\"(calendarVariables.right.dropdowns.inMinYear && m < calendarVariables.right.minDate.month()) || (calendarVariables.right.dropdowns.inMaxYear && m > calendarVariables.right.maxDate.month())\"\n                      *ngFor=\"let m of calendarVariables.right.dropdowns.monthArrays\" [value]=\"m\"\n                      [selected]=\"calendarVariables.right.dropdowns.currentMonth == m\">\n                      {{locale.monthNames[m]}}\n                    </option>\n                  </select>\n                </div>\n                <div class=\"dropdowns\">\n                  {{ calendarVariables?.right?.calendar[1][1].format(\" YYYY\")}}\n                  <select class=\"yearselect\" (change)=\"yearChanged($event, sideEnum.right)\">\n                    <option *ngFor=\"let y of calendarVariables.right.dropdowns.yearArrays\"\n                      [selected]=\"y === calendarVariables.right.dropdowns.currentYear\">\n                      {{y}}\n                    </option>\n                  </select>\n                </div>\n              </ng-container>\n              <ng-container *ngIf=\"!showDropdowns || !calendarVariables.right.dropdowns\">\n                {{this.locale.monthNames[calendarVariables?.right?.calendar[1][1].month()]}} {{ calendarVariables?.right?.calendar[1][1].format(\"\n                YYYY\")}}\n              </ng-container>\n            </th>\n            <ng-container\n              *ngIf=\"!calendarVariables.right.maxDate || calendarVariables.right.maxDate.isAfter(calendarVariables.right.calendar.lastDay) && (!linkedCalendars || singleDatePicker || true)\">\n              <th scope=\"col\" class=\"next available\" (click)=\"clickNext(sideEnum.right)\">\n              </th>\n            </ng-container>\n            <ng-container\n              *ngIf=\"!(!calendarVariables.right.maxDate || calendarVariables.right.maxDate.isAfter(calendarVariables.right.calendar.lastDay) && (!linkedCalendars || singleDatePicker || true))\">\n              <th scope=\"col\"></th>\n            </ng-container>\n          </tr>\n\n          <tr>\n            <th scope=\"col\" *ngIf=\"showWeekNumbers || showISOWeekNumbers\" class=\"week\"><span>{{this.locale.weekLabel}}</span></th>\n            <th scope=\"col\" *ngFor=\"let dayofweek of locale.daysOfWeek\"><span>{{dayofweek}}</span></th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let row of calendarVariables.right.calRows\" [class]=\"calendarVariables.right.classes[row].classList\">\n            <td class=\"week\" *ngIf=\"showWeekNumbers\">\n              <span>{{calendarVariables.right.calendar[row][0].week()}}</span>\n            </td>\n            <td class=\"week\" *ngIf=\"showISOWeekNumbers\">\n              <span>{{calendarVariables.right.calendar[row][0].isoWeek()}}</span>\n            </td>\n            <td *ngFor=\"let col of calendarVariables.right.calCols\" [class]=\"calendarVariables.right.classes[row][col]\"\n              (click)=\"clickDate($event, sideEnum.right, row, col)\">\n              <span>{{calendarVariables.right.calendar[row][col].date()}}</span>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n    <div class=\"calendar-time\" *ngIf=\"timePicker\">\n      <div class=\"select\">\n        <select class=\"select-item hourselect\" [disabled]=\"!endDate\" [(ngModel)]=\"timepickerVariables.right.selectedHour\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.right)\">\n          <option *ngFor=\"let i of timepickerVariables.right.hours\" [value]=\"i\" [disabled]=\"timepickerVariables.right.disabledHours.indexOf(i) > -1\">\n            {{i}}</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n      <div class=\"select\">\n        <select class=\"select-item minuteselect\" [disabled]=\"!endDate\" [(ngModel)]=\"timepickerVariables.right.selectedMinute\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.right)\">\n          <option *ngFor=\"let i of timepickerVariables.right.minutes; let index = index;\" [value]=\"i\"\n            [disabled]=\"timepickerVariables.right.disabledMinutes.indexOf(i) > -1\">{{timepickerVariables.right.minutesLabel[index]}}</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n      <div class=\"select\">\n        <select *ngIf=\"timePickerSeconds\" class=\"select-item secondselect\" [disabled]=\"!endDate\"\n          [(ngModel)]=\"timepickerVariables.right.selectedSecond\" (ngModelChange)=\"timeChanged($event, sideEnum.right)\">\n          <option *ngFor=\"let i of timepickerVariables.right.seconds; let index = index;\" [value]=\"i\"\n            [disabled]=\"timepickerVariables.right.disabledSeconds.indexOf(i) > -1\">{{timepickerVariables.right.secondsLabel[index]}}</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n      <div class=\"select\">\n        <select *ngIf=\"!timePicker24Hour\" class=\"select-item ampmselect\" [(ngModel)]=\"timepickerVariables.right.ampmModel\"\n          (ngModelChange)=\"timeChanged($event, sideEnum.right)\">\n          <option value=\"AM\" [disabled]=\"timepickerVariables.right.amDisabled\">AM</option>\n          <option value=\"PM\" [disabled]=\"timepickerVariables.right.pmDisabled\">PM</option>\n        </select>\n        <span class=\"select-highlight\"></span>\n        <span class=\"select-bar\"></span>\n      </div>\n    </div>\n  </div>\n  <div class=\"buttons\" *ngIf=\"!autoApply && ( !rangesArray.length || (showCalInRanges && !singleDatePicker))\">\n    <div class=\"buttons_input\">\n      <button *ngIf=\"showClearButton\" class=\"mat-primary mat-stroked-button clear\" type=\"button\" (click)=\"clear()\" title=\"clear the date\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 -5 24 24\">\n          <path d=\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\" />\n        </svg>\n      </button>\n      <button class=\"mat-primary mat-stroked-button\" *ngIf=\"showCancel\" type=\"button\" (click)=\"clickCancel($event)\">{{locale.cancelLabel}}</button>\n      <button class=\"mat-primary mat-stroked-button\" [disabled]=\"applyBtn.disabled\" type=\"button\"\n        (click)=\"clickApply($event)\">{{locale.applyLabel}}</button>\n    </div>\n  </div>\n</div>\n", styles: [".md-drppicker{position:absolute;border-radius:4px;width:278px;padding:4px;margin-top:-10px;overflow:hidden;z-index:1000;font-size:13px;box-shadow:0 2px 4px #00000029,0 2px 8px #0000001f}.md-drppicker.double{width:auto}.md-drppicker.inline{position:relative;display:inline-block}.md-drppicker:after,.md-drppicker:before{position:absolute;display:inline-block;content:\"\"}.md-drppicker.openscenter:before{left:0;right:0;width:0;margin-left:auto;margin-right:auto}.md-drppicker.openscenter:after{left:0;right:0;width:0;margin-left:auto;margin-right:auto}.md-drppicker.single .calendar,.md-drppicker.single .ranges{float:none}.md-drppicker.shown{transform:scale(1);transition:all .1s ease-in-out;transform-origin:0 0;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.md-drppicker.shown.drops-up-left{transform-origin:100% 100%}.md-drppicker.shown.drops-up-right{transform-origin:0 100%}.md-drppicker.shown.drops-down-left{transform-origin:100% 0}.md-drppicker.shown.drops-down-right{transform-origin:0 0}.md-drppicker.shown.drops-down-center{transform-origin:50% 0}.md-drppicker.shown.drops-up-center{transform-origin:50% 100%}.md-drppicker.shown .calendar{display:block}.md-drppicker.hidden{transition:all .1s ease;transform:scale(0);transform-origin:0 0;cursor:default;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.md-drppicker.hidden.drops-up-left{transform-origin:100% 100%}.md-drppicker.hidden.drops-up-right{transform-origin:0 100%}.md-drppicker.hidden.drops-down-left{transform-origin:100% 0}.md-drppicker.hidden.drops-down-right{transform-origin:0 0}.md-drppicker.hidden.drops-down-center{transform-origin:50% 0}.md-drppicker.hidden.drops-up-center{transform-origin:50% 100%}.md-drppicker.hidden .calendar{display:none}.md-drppicker .calendar{max-width:270px;margin:4px}.md-drppicker .calendar.single .calendar-table{border:none}.md-drppicker .calendar td,.md-drppicker .calendar th{padding:0;white-space:nowrap;text-align:center;height:36px;width:36px}.md-drppicker .calendar td span,.md-drppicker .calendar th span{pointer-events:none}.md-drppicker .calendar-table{border-style:1px solid;padding:4px;border-radius:4px}.md-drppicker table{width:100%;margin:0}.md-drppicker td,.md-drppicker th{text-align:center;width:20px;height:20px;border-radius:4px;border-style:1px solid;white-space:nowrap;cursor:pointer}.md-drppicker td.available.prev,.md-drppicker th.available.prev{display:block;background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K);background-repeat:no-repeat;background-size:.5em;background-position:center;opacity:.8;transition:background-color .2s ease;border-radius:2em}.md-drppicker td.available.prev:hover,.md-drppicker th.available.prev:hover{margin:0}.md-drppicker td.available.next,.md-drppicker th.available.next{transform:rotate(180deg);display:block;background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K);background-repeat:no-repeat;background-size:.5em;background-position:center;opacity:.8;transition:background-color .2s ease;border-radius:2em}.md-drppicker td.available.next:hover,.md-drppicker th.available.next:hover{margin:0;transform:rotate(180deg)}.md-drppicker td.available:hover,.md-drppicker th.available:hover{background-repeat:no-repeat;background-size:.5em;background-position:center;margin:.25em 0;opacity:.8;border-radius:2em;transform:scale(1);transition:all .45s cubic-bezier(.23,1,.32,1) 0}.md-drppicker td.week,.md-drppicker th.week{font-size:80%}.md-drppicker td{margin:.25em 0;opacity:.8;border-radius:2em;transform:scale(1);transition:all .45s cubic-bezier(.23,1,.32,1) 0}.md-drppicker td.in-range{border-radius:0}.md-drppicker td.start-date{border-radius:2em 0 0 2em}.md-drppicker td.end-date{border-radius:0 2em 2em 0}.md-drppicker td.start-date.end-date{border-radius:4px}.md-drppicker th.month{width:auto}.md-drppicker option.disabled,.md-drppicker td.disabled{cursor:not-allowed;text-decoration:line-through}.md-drppicker .dropdowns{background-repeat:no-repeat;background-size:10px;background-position-y:center;background-position-x:right;width:50px;background-image:url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDI1NSAyNTUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI1NSAyNTU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0iYXJyb3ctZHJvcC1kb3duIj4KCQk8cG9seWdvbiBwb2ludHM9IjAsNjMuNzUgMTI3LjUsMTkxLjI1IDI1NSw2My43NSAgICIgZmlsbD0iIzk4OGM4YyIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=)}.md-drppicker .dropdowns select{display:inline-block;width:100%;padding:5px;border:1px solid;border-radius:2px;height:3rem}.md-drppicker .dropdowns select.monthselect,.md-drppicker .dropdowns select.yearselect{font-size:12px;padding:1px;height:auto;margin:0;cursor:default}.md-drppicker .dropdowns select.ampmselect,.md-drppicker .dropdowns select.hourselect,.md-drppicker .dropdowns select.minuteselect,.md-drppicker .dropdowns select.secondselect{width:50px;margin:0 auto;border-style:1px solid;padding:2px;outline:0;font-size:12px}.md-drppicker .dropdowns select.monthselect,.md-drppicker .dropdowns select.yearselect{cursor:pointer;opacity:0;position:absolute;top:0;left:0;margin:0;padding:0}.md-drppicker th.month>div{position:relative;display:inline-block}.md-drppicker .calendar-time{text-align:center;margin:4px auto 0;line-height:30px;position:relative}.md-drppicker .calendar-time .select{display:inline}.md-drppicker .calendar-time .select .select-item{display:inline-block;width:auto;position:relative;font-family:inherit;background-color:transparent;padding:10px 10px 10px 0;font-size:18px;border-radius:0;border:none;border-bottom-style:1px solid}.md-drppicker .calendar-time .select .select-item:after{position:absolute;top:18px;right:10px;width:0;height:0;padding:0;content:\"\";border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid rgba(0,0,0,.12);pointer-events:none}.md-drppicker .calendar-time .select .select-item:focus{outline:none}.md-drppicker .calendar-time .select .select-item .select-label{font-size:16px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.md-drppicker .calendar-time select.disabled{cursor:not-allowed}.md-drppicker .label-input{border-style:1px solid;border-radius:4px;height:30px;line-height:30px;display:block;vertical-align:middle;margin:0 auto 5px;padding:0 0 0 28px;width:100%}.md-drppicker .label-input.active{border-style:1px solid;border-radius:4px}.md-drppicker .md-drppicker_input{position:relative;padding:0 30px 0 0}.md-drppicker .md-drppicker_input i,.md-drppicker .md-drppicker_input svg{position:absolute;left:8px;top:8px}.md-drppicker.rtl .label-input{padding-right:28px;padding-left:6px}.md-drppicker.rtl .md-drppicker_input i,.md-drppicker.rtl .md-drppicker_input svg{left:auto;right:8px}.md-drppicker .show-ranges .drp-calendar.left{border-left-style:1px solid}.md-drppicker .ranges{float:none;text-align:left;margin:0}.md-drppicker .ranges ul{list-style:none;margin:0 auto;padding:0;width:100%}.md-drppicker .ranges ul li{font-size:12px}.md-drppicker .ranges ul li button{padding:8px 12px;width:100%;background:none;border:none;text-align:left;cursor:pointer}.md-drppicker .ranges ul li button[disabled]{opacity:.3}.md-drppicker .ranges ul li button:active{background:transparent}.md-drppicker .show-calendar .ranges{margin-top:8px}.md-drppicker [hidden]{display:none}.md-drppicker .buttons{text-align:right;margin:0 5px 5px 0}.md-drppicker .btn{position:relative;overflow:hidden;outline:none;padding:0 6px;cursor:pointer;border-radius:2px;box-shadow:0 1px 4px #0009;color:#ecf0f1;transition:background-color .4s;height:auto;text-transform:uppercase;line-height:36px;border:none}.md-drppicker .btn>*{position:relative}.md-drppicker .btn span{display:block;padding:12px 24px}.md-drppicker .btn:before{content:\"\";position:absolute;top:50%;left:50%;display:block;width:0;padding-top:0;border-radius:100%;transform:translate(-50%,-50%)}.md-drppicker .btn:active:before{width:120%;padding-top:120%;transition:width .2s ease-out,padding-top .2s ease-out}.md-drppicker .btn:disabled{opacity:.5}.md-drppicker .clear{box-shadow:none}.md-drppicker .clear svg{fill:currentColor}@media (min-width: 564px){.md-drppicker{width:auto}.md-drppicker.single .calendar.left{clear:none}.md-drppicker.ltr{direction:ltr;text-align:left}.md-drppicker.ltr .calendar.left{clear:left}.md-drppicker.ltr .calendar.left .calendar-table{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.md-drppicker.ltr .calendar.right{margin-left:0}.md-drppicker.ltr .calendar.right .calendar-table{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}.md-drppicker.ltr .left .md-drppicker_input,.md-drppicker.ltr .right .md-drppicker_input{padding-right:35px}.md-drppicker.ltr .calendar.left .calendar-table{padding-right:12px}.md-drppicker.ltr .calendar,.md-drppicker.ltr .ranges{float:left}.md-drppicker.rtl{direction:rtl;text-align:right}.md-drppicker.rtl .calendar.left{clear:right;margin-left:0}.md-drppicker.rtl .calendar.left .calendar-table{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}.md-drppicker.rtl .calendar.right{margin-right:0}.md-drppicker.rtl .calendar.right .calendar-table{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.md-drppicker.rtl .left .md-drppicker_input,.md-drppicker.rtl .calendar.left .calendar-table{padding-left:12px}.md-drppicker.rtl .calendar,.md-drppicker.rtl .ranges{text-align:right;float:right}.drp-animate{transform:translate(0);transition:transform .2s ease,opacity .2s ease}.drp-animate.drp-picker-site-this{transition-timing-function:linear}.drp-animate.drp-animate-right{transform:translate(10%);opacity:0}.drp-animate.drp-animate-left{transform:translate(-10%);opacity:0}}@media (min-width: 730px){.md-drppicker .ranges{width:auto}.md-drppicker.ltr .ranges{float:left}.md-drppicker.rtl .ranges{float:right}.md-drppicker .calendar.left{clear:none!important}}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { dateLimit: [{
                 type: Input
             }], minDate: [{
@@ -27314,6 +27314,7 @@ class ORadioComponent extends OFormServiceComponent {
         this.layout = 'column';
         this.labelPosition = 'after';
         this.labelGap = '8px';
+        this.groupId = crypto.randomUUID();
     }
     ngAfterViewInit() {
         super.ngAfterViewInit();
@@ -27375,14 +27376,14 @@ class ORadioComponent extends OFormServiceComponent {
 ORadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ORadioComponent, deps: [{ token: forwardRef(() => OFormComponent), optional: true }, { token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
 ORadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ORadioComponent, selector: "o-radio", inputs: { layout: "layout", labelPosition: ["label-position", "labelPosition"], labelGap: ["label-gap", "labelGap"] }, host: { properties: { "class.o-radio": "true" } }, providers: [
         OntimizeServiceProvider
-    ], viewQueries: [{ propertyName: "mrg", first: true, predicate: MatRadioGroup, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"getFormGroup()\" [matTooltip]=\"tooltip\" [matTooltipClass]=\"tooltipClass\"\n  [matTooltipPosition]=\"tooltipPosition\" [matTooltipShowDelay]=\"tooltipShowDelay\"\n  [matTooltipHideDelay]=\"tooltipHideDelay\" class=\"relative\" [oContextMenu]=\"oContextMenu\">\n  <!-- mat-form-field and hidden input are used only for displaying component label and errors as mat-radio is not supported inside form-field -->\n  <!-- https://github.com/angular/material2/issues/7891 -->\n  <mat-form-field [appearance]=\"appearance\" [hideRequiredMarker]=\"hideRequiredMarker\"\n    [class.read-only]=\"isReadOnly\" [class.custom-width]=\"hasCustomWidth\" [class.o-radio-from-field-row]=\"layout==='row'\"\n    floatLabel=\"always\" class=\"mat-form-field--no-underline\" fxFill [subscriptSizing]=\"subscriptSizing\">\n    <mat-label *ngIf=\"labelVisible\">{{ olabel | oTranslate }}</mat-label>\n    <input matInput [id]=\"getAttribute()\" [formControlName]=\"getAttribute()\" [placeholder]=\"placeHolder\"\n      [required]=\"isRequired\" style=\"display: none\" />\n    <mat-radio-group [id]=\"getAttribute()\" [formControlName]=\"getAttribute()\" [name]=\"getAttribute()\"\n      [value]=\"getValue()\" [required]=\"isRequired\" [labelPosition]=\"labelPosition\"\n      (change)=\"onMatRadioGroupChange($event)\" [fxLayout]=\"layout\" [fxLayoutGap]=\"labelGap\">\n      <mat-radio-button [id]=\"'o-radio-button-'+i\" *ngFor=\"let item of dataArray;let i = index\" [value]=\"getValueColumn(item)\"\n       [disabled]=\"!enabled\">\n        {{ getOptionDescriptionValue(item) }}\n      </mat-radio-button>\n    </mat-radio-group>\n    <mat-error *oMatError=\"hasError('required')\">\n      {{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}\n    </mat-error>\n    <mat-error *ngFor=\"let oError of getActiveOErrors()\">\n      {{ oError.text | oTranslate }}\n    </mat-error>\n  </mat-form-field>\n  <div *ngIf=\"isReadOnly\" (click)=\"$event.stopPropagation()\" class=\"read-only-blocker\" fxFill></div>\n\n  <o-context-menu *ngIf=\"!this.isReadOnly && this.enabled\">\n    <o-context-menu-item attr=\"refresh\" label=\"FORM_SERVICE_COMPONENT.REFRESH\" svg-icon=\"ontimize:autorenew\" (execute)=\"refresh()\">\n    </o-context-menu-item>\n  </o-context-menu>\n</div>\n", styles: [".o-radio .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple:before{border:none}.o-radio .mat-mdc-form-field:not(.custom-width).o-radio-from-field-row .mat-mdc-form-field-infix{width:auto}.o-radio .read-only-blocker{z-index:2;position:absolute;top:0;left:0;right:0}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i3$3.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: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: OMatErrorDirective, selector: "[oMatError]", inputs: ["oMatError"] }, { kind: "directive", type: i7$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i7$5.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i7$5.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: OContextMenuDirective, selector: "[oContextMenu]", inputs: ["oContextMenu", "oContextMenuData"] }, { kind: "component", type: OContextMenuComponent, selector: "o-context-menu", outputs: ["onShow", "onClose"] }, { kind: "component", type: OContextMenuItemComponent, selector: "o-context-menu-item", outputs: ["execute"] }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], encapsulation: i0.ViewEncapsulation.None });
+    ], viewQueries: [{ propertyName: "mrg", first: true, predicate: MatRadioGroup, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"getFormGroup()\" [matTooltip]=\"tooltip\" [matTooltipClass]=\"tooltipClass\"\n  [matTooltipPosition]=\"tooltipPosition\" [matTooltipShowDelay]=\"tooltipShowDelay\"\n  [matTooltipHideDelay]=\"tooltipHideDelay\" class=\"relative\" [oContextMenu]=\"oContextMenu\">\n  <!-- mat-form-field and hidden input are used only for displaying component label and errors as mat-radio is not supported inside form-field -->\n  <!-- https://github.com/angular/material2/issues/7891 -->\n  <mat-form-field [appearance]=\"appearance\" [hideRequiredMarker]=\"hideRequiredMarker\"\n    [class.read-only]=\"isReadOnly\" [class.custom-width]=\"hasCustomWidth\" [class.o-radio-from-field-row]=\"layout==='row'\"\n    floatLabel=\"always\" class=\"mat-form-field--no-underline\" fxFill [subscriptSizing]=\"subscriptSizing\">\n    <mat-label *ngIf=\"labelVisible\">{{ olabel | oTranslate }}</mat-label>\n    <input matInput [id]=\"getAttribute()\" [formControlName]=\"getAttribute()\" [placeholder]=\"placeHolder\"\n      [required]=\"isRequired\" style=\"display: none\" />\n    <mat-radio-group [id]=\"getAttribute()\" [formControlName]=\"getAttribute()\" [name]=\"getAttribute()\"\n      [value]=\"getValue()\" [required]=\"isRequired\" [labelPosition]=\"labelPosition\"\n      (change)=\"onMatRadioGroupChange($event)\" [fxLayout]=\"layout\" [fxLayoutGap]=\"labelGap\">\n      <mat-radio-button [id]=\"'o-radio-button-'+groupId+'-'+i\" *ngFor=\"let item of dataArray;let i = index\" [value]=\"getValueColumn(item)\"\n       [disabled]=\"!enabled\">\n        {{ getOptionDescriptionValue(item) }}\n      </mat-radio-button>\n    </mat-radio-group>\n    <mat-error *oMatError=\"hasError('required')\">\n      {{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}\n    </mat-error>\n    <mat-error *ngFor=\"let oError of getActiveOErrors()\">\n      {{ oError.text | oTranslate }}\n    </mat-error>\n  </mat-form-field>\n  <div *ngIf=\"isReadOnly\" (click)=\"$event.stopPropagation()\" class=\"read-only-blocker\" fxFill></div>\n\n  <o-context-menu *ngIf=\"!this.isReadOnly && this.enabled\">\n    <o-context-menu-item attr=\"refresh\" label=\"FORM_SERVICE_COMPONENT.REFRESH\" svg-icon=\"ontimize:autorenew\" (execute)=\"refresh()\">\n    </o-context-menu-item>\n  </o-context-menu>\n</div>\n", styles: [".o-radio .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple:before{border:none}.o-radio .mat-mdc-form-field:not(.custom-width).o-radio-from-field-row .mat-mdc-form-field-infix{width:auto}.o-radio .read-only-blocker{z-index:2;position:absolute;top:0;left:0;right:0}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i3$3.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: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: OMatErrorDirective, selector: "[oMatError]", inputs: ["oMatError"] }, { kind: "directive", type: i7$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i7$5.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i7$5.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: OContextMenuDirective, selector: "[oContextMenu]", inputs: ["oContextMenu", "oContextMenuData"] }, { kind: "component", type: OContextMenuComponent, selector: "o-context-menu", outputs: ["onShow", "onClose"] }, { kind: "component", type: OContextMenuItemComponent, selector: "o-context-menu-item", outputs: ["execute"] }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ORadioComponent, decorators: [{
             type: Component,
             args: [{ selector: 'o-radio', inputs: DEFAULT_INPUTS_O_RADIO, providers: [
                         OntimizeServiceProvider
                     ], encapsulation: ViewEncapsulation.None, host: {
                         '[class.o-radio]': 'true'
-                    }, template: "<div [formGroup]=\"getFormGroup()\" [matTooltip]=\"tooltip\" [matTooltipClass]=\"tooltipClass\"\n  [matTooltipPosition]=\"tooltipPosition\" [matTooltipShowDelay]=\"tooltipShowDelay\"\n  [matTooltipHideDelay]=\"tooltipHideDelay\" class=\"relative\" [oContextMenu]=\"oContextMenu\">\n  <!-- mat-form-field and hidden input are used only for displaying component label and errors as mat-radio is not supported inside form-field -->\n  <!-- https://github.com/angular/material2/issues/7891 -->\n  <mat-form-field [appearance]=\"appearance\" [hideRequiredMarker]=\"hideRequiredMarker\"\n    [class.read-only]=\"isReadOnly\" [class.custom-width]=\"hasCustomWidth\" [class.o-radio-from-field-row]=\"layout==='row'\"\n    floatLabel=\"always\" class=\"mat-form-field--no-underline\" fxFill [subscriptSizing]=\"subscriptSizing\">\n    <mat-label *ngIf=\"labelVisible\">{{ olabel | oTranslate }}</mat-label>\n    <input matInput [id]=\"getAttribute()\" [formControlName]=\"getAttribute()\" [placeholder]=\"placeHolder\"\n      [required]=\"isRequired\" style=\"display: none\" />\n    <mat-radio-group [id]=\"getAttribute()\" [formControlName]=\"getAttribute()\" [name]=\"getAttribute()\"\n      [value]=\"getValue()\" [required]=\"isRequired\" [labelPosition]=\"labelPosition\"\n      (change)=\"onMatRadioGroupChange($event)\" [fxLayout]=\"layout\" [fxLayoutGap]=\"labelGap\">\n      <mat-radio-button [id]=\"'o-radio-button-'+i\" *ngFor=\"let item of dataArray;let i = index\" [value]=\"getValueColumn(item)\"\n       [disabled]=\"!enabled\">\n        {{ getOptionDescriptionValue(item) }}\n      </mat-radio-button>\n    </mat-radio-group>\n    <mat-error *oMatError=\"hasError('required')\">\n      {{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}\n    </mat-error>\n    <mat-error *ngFor=\"let oError of getActiveOErrors()\">\n      {{ oError.text | oTranslate }}\n    </mat-error>\n  </mat-form-field>\n  <div *ngIf=\"isReadOnly\" (click)=\"$event.stopPropagation()\" class=\"read-only-blocker\" fxFill></div>\n\n  <o-context-menu *ngIf=\"!this.isReadOnly && this.enabled\">\n    <o-context-menu-item attr=\"refresh\" label=\"FORM_SERVICE_COMPONENT.REFRESH\" svg-icon=\"ontimize:autorenew\" (execute)=\"refresh()\">\n    </o-context-menu-item>\n  </o-context-menu>\n</div>\n", styles: [".o-radio .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple:before{border:none}.o-radio .mat-mdc-form-field:not(.custom-width).o-radio-from-field-row .mat-mdc-form-field-infix{width:auto}.o-radio .read-only-blocker{z-index:2;position:absolute;top:0;left:0;right:0}\n"] }]
+                    }, template: "<div [formGroup]=\"getFormGroup()\" [matTooltip]=\"tooltip\" [matTooltipClass]=\"tooltipClass\"\n  [matTooltipPosition]=\"tooltipPosition\" [matTooltipShowDelay]=\"tooltipShowDelay\"\n  [matTooltipHideDelay]=\"tooltipHideDelay\" class=\"relative\" [oContextMenu]=\"oContextMenu\">\n  <!-- mat-form-field and hidden input are used only for displaying component label and errors as mat-radio is not supported inside form-field -->\n  <!-- https://github.com/angular/material2/issues/7891 -->\n  <mat-form-field [appearance]=\"appearance\" [hideRequiredMarker]=\"hideRequiredMarker\"\n    [class.read-only]=\"isReadOnly\" [class.custom-width]=\"hasCustomWidth\" [class.o-radio-from-field-row]=\"layout==='row'\"\n    floatLabel=\"always\" class=\"mat-form-field--no-underline\" fxFill [subscriptSizing]=\"subscriptSizing\">\n    <mat-label *ngIf=\"labelVisible\">{{ olabel | oTranslate }}</mat-label>\n    <input matInput [id]=\"getAttribute()\" [formControlName]=\"getAttribute()\" [placeholder]=\"placeHolder\"\n      [required]=\"isRequired\" style=\"display: none\" />\n    <mat-radio-group [id]=\"getAttribute()\" [formControlName]=\"getAttribute()\" [name]=\"getAttribute()\"\n      [value]=\"getValue()\" [required]=\"isRequired\" [labelPosition]=\"labelPosition\"\n      (change)=\"onMatRadioGroupChange($event)\" [fxLayout]=\"layout\" [fxLayoutGap]=\"labelGap\">\n      <mat-radio-button [id]=\"'o-radio-button-'+groupId+'-'+i\" *ngFor=\"let item of dataArray;let i = index\" [value]=\"getValueColumn(item)\"\n       [disabled]=\"!enabled\">\n        {{ getOptionDescriptionValue(item) }}\n      </mat-radio-button>\n    </mat-radio-group>\n    <mat-error *oMatError=\"hasError('required')\">\n      {{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}\n    </mat-error>\n    <mat-error *ngFor=\"let oError of getActiveOErrors()\">\n      {{ oError.text | oTranslate }}\n    </mat-error>\n  </mat-form-field>\n  <div *ngIf=\"isReadOnly\" (click)=\"$event.stopPropagation()\" class=\"read-only-blocker\" fxFill></div>\n\n  <o-context-menu *ngIf=\"!this.isReadOnly && this.enabled\">\n    <o-context-menu-item attr=\"refresh\" label=\"FORM_SERVICE_COMPONENT.REFRESH\" svg-icon=\"ontimize:autorenew\" (execute)=\"refresh()\">\n    </o-context-menu-item>\n  </o-context-menu>\n</div>\n", styles: [".o-radio .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple:before{border:none}.o-radio .mat-mdc-form-field:not(.custom-width).o-radio-from-field-row .mat-mdc-form-field-infix{width:auto}.o-radio .read-only-blocker{z-index:2;position:absolute;top:0;left:0;right:0}\n"] }]
         }], ctorParameters: function () { return [{ type: OFormComponent, decorators: [{
                     type: Optional
                 }, {
@@ -29650,7 +29651,9 @@ class DefaultOTableDataSource extends DataSource {
             }
             const renderedData = data;
             if (this.table.virtualScrollViewport && !this._paginator) {
-                data = this.getVirtualScrollData(data, new OnRangeChangeVirtualScroll({ start: 0, end: Codes.LIMIT_SCROLLVIRTUAL }));
+                if (this.table.savedScrollPosition === 0) {
+                    data = this.getVirtualScrollData(data, new OnRangeChangeVirtualScroll({ start: 0, end: Codes.LIMIT_SCROLLVIRTUAL }));
+                }
             }
             const aggregateData = this.getAggregatesData(renderedData);
             this.ngZone.run(() => {
@@ -30968,19 +30971,47 @@ class OTableVisibleColumnsDialogComponent {
         const newGroupColumns = columnGroupingToRemove.length > 0 ?
             this.table.groupedColumnsArray.filter(col => !columnGroupingToRemove.includes(col)) :
             undefined;
+        const columnsOrder = this.getColumnsOrder();
         this.dialogRef.close({
-            visibleColArray: this.getVisibleColumns(),
-            columnsOrder: this.getColumnsOrder(),
+            visibleColArray: this.getVisibleColumns().sort((a, b) => columnsOrder.indexOf(a) - columnsOrder.indexOf(b)),
+            columnsOrder: columnsOrder,
             sortColumns: newSortColumns,
             columnValueFiltersToRemove: this.getColumnValueFiltersToRemove(),
             groupColumns: newGroupColumns
         });
     }
     getVisibleColumns() {
-        return this.columns.filter(col => col.visible).map(col => col.attr);
+        const nonHidableColumns = Util.parseArray(this.table.nonHidableColumns, true);
+        const visibleFromDialog = this.columns
+            .filter(col => col.visible)
+            .map(col => col.attr);
+        const allVisibleAttrs = new Set([...visibleFromDialog, ...nonHidableColumns]);
+        return this.table.oTableOptions.columns
+            .filter(oCol => allVisibleAttrs.has(oCol.attr))
+            .map(oCol => oCol.attr);
     }
     getColumnsOrder() {
-        return this.columns.map(col => col.attr);
+        const originalOrder = this.table.oTableOptions.columns.map(col => col.attr);
+        const dialogColumnsOrder = this.columns.map(col => col.attr);
+        const columnsNotInDialog = originalOrder.filter(attr => !dialogColumnsOrder.includes(attr));
+        const newOrder = [];
+        for (const dialogAttr of dialogColumnsOrder) {
+            const dialogOriginalPos = originalOrder.indexOf(dialogAttr);
+            for (const notInDialogAttr of columnsNotInDialog) {
+                const notInDialogOriginalPos = originalOrder.indexOf(notInDialogAttr);
+                if (notInDialogOriginalPos < dialogOriginalPos &&
+                    !newOrder.includes(notInDialogAttr)) {
+                    newOrder.push(notInDialogAttr);
+                }
+            }
+            newOrder.push(dialogAttr);
+        }
+        for (const notInDialogAttr of columnsNotInDialog) {
+            if (!newOrder.includes(notInDialogAttr)) {
+                newOrder.push(notInDialogAttr);
+            }
+        }
+        return newOrder;
     }
     getColumnValueFiltersToRemove() {
         return this.columns.filter(col => col.deleteValueFilter).map(col => col.attr);
@@ -33154,22 +33185,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }] }, { type: i3$7.FocusMonitor }, { type: i0.ElementRef }, { type: i0.Injector }]; } });
 
 const DEFAULT_INPUTS_O_TABLE_COLUMN_FILTER_ICON = [
-    'column'
+    'column',
+    'columnFilters: column-filters'
 ];
 class OTableHeaderColumnFilterIconComponent {
-    constructor(table, dialog, dialogService, translateService) {
+    set columnFilters(filters) {
+        this._columnFilters = filters?.filter(value => value.values) || [];
+        this.updateStateColumnFilter();
+    }
+    get columnFilters() {
+        return this._columnFilters;
+    }
+    constructor(table, dialog, dialogService, translateService, cd) {
         this.table = table;
         this.dialog = dialog;
         this.dialogService = dialogService;
         this.translateService = translateService;
+        this.cd = cd;
+        this._columnFilters = [];
         this.isColumnFilterActive = new BehaviorSubject(false);
         this.filterIconHintVisible = new BehaviorSubject(false);
         this.indicatorNumber = new BehaviorSubject('');
         this.subscription = new Subscription();
         this.filterIconStateView = new BehaviorSubject('INACTIVE');
-        this.subscription.add(this.table.onFilterByColumnChange.subscribe(() => {
-            this.updateStateColumnFilter();
-        }));
         this.subscription.add(this.filterIconHintVisible.subscribe((value) => {
             this.setFilterIconHintVisible(value);
         }));
@@ -33178,13 +33216,17 @@ class OTableHeaderColumnFilterIconComponent {
         this.updateStateColumnFilter();
     }
     updateStateColumnFilter() {
+        this.updateFilterIndicatorNumber();
+        const isActive = Util.isDefined(this.getColumnValueFilterByAttr()?.values);
+        this.isColumnFilterActive.next(isActive);
+        this.filterIconStateView.next(isActive ? 'ACTIVE' : 'INACTIVE');
+        this.cd.markForCheck();
+    }
+    updateFilterIndicatorNumber() {
         this.indicatorNumber.next(this.getFilterIndicatorNumbered());
-        this.isColumnFilterActive.next(Util.isDefined(this.getColumnValueFilterByAttr()));
-        this.filterIconStateView.next(this.isColumnFilterActive.getValue() ? 'ACTIVE' : 'INACTIVE');
     }
     getColumnValueFilterByAttr() {
-        const columnValueFilters = this.table.dataSource.getColumnValueFilters();
-        return columnValueFilters.find(item => item.attr === this.column.attr);
+        return this._columnFilters?.find(item => item.attr === this.column.attr);
     }
     openColumnFilterDialog(event) {
         const filterByColumnComponent = this.table.oTableColumnsFilterComponent?.getFilterColumnByAttr(this.column.attr);
@@ -33196,16 +33238,11 @@ class OTableHeaderColumnFilterIconComponent {
         }
     }
     getFilterIndicatorNumbered() {
-        let result = '';
-        const columnValueFilters = this.table.dataSource.getColumnValueFilters();
-        if (columnValueFilters.length < 2) {
-            return result;
-        }
-        const index = columnValueFilters.findIndex(x => x.attr === this.column.attr);
-        if (index > -1) {
-            result += index + 1;
-        }
-        return result;
+        const filters = this._columnFilters ?? [];
+        const index = filters.length > 1
+            ? filters.findIndex(f => f.attr === this.column.attr)
+            : -1;
+        return index >= 0 ? `${index + 1}` : '';
     }
     setFilterIconHintVisible(visible) {
         if (this.filterIconStateView.getValue() === 'ACTIVE') {
@@ -33217,8 +33254,8 @@ class OTableHeaderColumnFilterIconComponent {
         this.subscription.unsubscribe();
     }
 }
-OTableHeaderColumnFilterIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OTableHeaderColumnFilterIconComponent, deps: [{ token: forwardRef(() => OTableBase) }, { token: i1$1.MatDialog }, { token: DialogService }, { token: OTranslateService }], target: i0.ɵɵFactoryTarget.Component });
-OTableHeaderColumnFilterIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OTableHeaderColumnFilterIconComponent, selector: "o-table-header-column-filter-icon", inputs: { column: "column" }, host: { properties: { "class.o-table-column-filter-icon": "true" } }, ngImport: i0, template: "<mat-icon class=\"column-filter-icon\" [ngClass]=\"{'column-filter-icon-active':isColumnFilterActive | async}\"\n  (click)=\"openColumnFilterDialog($event)\" [@iconState]=\"filterIconStateView | async\">\n  filter_alt\n</mat-icon>\n<span class=\"o-table-header-indicator-numbered\">\n  {{ indicatorNumber | async }}\n</span>", styles: [".o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell:has(.o-table-column-filter-icon){padding-left:0}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .o-table-column-filter-icon{position:relative;display:flex;margin-right:6px}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .o-table-column-filter-icon .mat-icon{align-self:center}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .o-table-column-filter-icon .o-table-header-indicator-numbered{right:-5px;bottom:-6px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }], animations: [
+OTableHeaderColumnFilterIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OTableHeaderColumnFilterIconComponent, deps: [{ token: forwardRef(() => OTableBase) }, { token: i1$1.MatDialog }, { token: DialogService }, { token: OTranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+OTableHeaderColumnFilterIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OTableHeaderColumnFilterIconComponent, selector: "o-table-header-column-filter-icon", inputs: { column: "column", columnFilters: ["column-filters", "columnFilters"] }, host: { properties: { "class.o-table-column-filter-icon": "true" } }, ngImport: i0, template: "<mat-icon class=\"column-filter-icon\" [ngClass]=\"{'column-filter-icon-active':isColumnFilterActive | async}\"\n  (click)=\"openColumnFilterDialog($event)\" [@iconState]=\"filterIconStateView | async\">\n  filter_alt\n</mat-icon>\n<span class=\"o-table-header-indicator-numbered\">\n  {{ indicatorNumber | async }}\n</span>", styles: [".o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell:has(.o-table-column-filter-icon){padding-left:0}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .o-table-column-filter-icon{position:relative;display:flex;margin-right:6px}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .o-table-column-filter-icon .mat-icon{align-self:center}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .o-table-column-filter-icon .o-table-header-indicator-numbered{right:-5px;bottom:-6px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }], animations: [
         trigger('iconState', [
             state('ACTIVE, HINT', style({ opacity: 1 })),
             state('INACTIVE', style({ opacity: 0 })),
@@ -33239,10 +33276,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         }], ctorParameters: function () { return [{ type: OTableBase, decorators: [{
                     type: Inject,
                     args: [forwardRef(() => OTableBase)]
-                }] }, { type: i1$1.MatDialog }, { type: DialogService }, { type: OTranslateService }]; } });
+                }] }, { type: i1$1.MatDialog }, { type: DialogService }, { type: OTranslateService }, { type: i0.ChangeDetectorRef }]; } });
 
 const DEFAULT_INPUTS_O_TABLE_HEADER = [
-    'column'
+    'column',
+    'columnFilters: column-filters'
 ];
 class OTableHeaderComponent {
     set columnFilterIcon(value) {
@@ -33250,6 +33288,7 @@ class OTableHeaderComponent {
     }
     constructor(table) {
         this.table = table;
+        this.columnFilters = [];
         this.resizable = this.table.resizable;
     }
     isModeColumnFilterable(column) {
@@ -33265,14 +33304,14 @@ class OTableHeaderComponent {
     }
 }
 OTableHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OTableHeaderComponent, deps: [{ token: forwardRef(() => OTableBase) }], target: i0.ɵɵFactoryTarget.Component });
-OTableHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OTableHeaderComponent, selector: "o-table-header", inputs: { column: "column" }, host: { listeners: { "mouseenter": "setFilterIconHintVisible(true)", "mouseleave": "setFilterIconHintVisible(false)" }, properties: { "class.o-table-header": "true" } }, viewQueries: [{ propertyName: "columnFilterIcon", first: true, predicate: ["columnFilterIcon"], descendants: true }, { propertyName: "matSortHeader", first: true, predicate: OMatSortHeader, descendants: true }], ngImport: i0, template: "<o-table-header-column-filter-icon #columnFilterIcon *ngIf=\"isModeColumnFilterable(column)\" [column]=\"column\">\n</o-table-header-column-filter-icon>\n\n<ng-container *ngIf=\"column.orderable\">\n  <span o-mat-sort-header>{{ column.title | oTranslate }}</span>\n</ng-container>\n<ng-container *ngIf=\"!column.orderable\">\n  <span class=\"header-title-container\" fxFlex>{{ column.title | oTranslate }}</span>\n</ng-container>\n\n<o-table-column-resizer *ngIf=\"resizable\" [column]=\"column\"></o-table-column-resizer>\n", styles: [".o-table-header{display:flex;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.o-table-header span[o-mat-sort-header]{flex:1;min-width:0}.o-table-header span[o-mat-sort-header]:not(:has(+ .o-table-column-resizer)){padding-right:6px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: OMatSortHeader, selector: "[o-mat-sort-header]", inputs: ["disabled"], exportAs: ["oMatSortHeader"] }, { kind: "component", type: OTableColumnResizerComponent, selector: "o-table-column-resizer", inputs: ["column"] }, { kind: "component", type: OTableHeaderColumnFilterIconComponent, selector: "o-table-header-column-filter-icon", inputs: ["column"] }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+OTableHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OTableHeaderComponent, selector: "o-table-header", inputs: { column: "column", columnFilters: ["column-filters", "columnFilters"] }, host: { listeners: { "mouseenter": "setFilterIconHintVisible(true)", "mouseleave": "setFilterIconHintVisible(false)" }, properties: { "class.o-table-header": "true" } }, viewQueries: [{ propertyName: "columnFilterIcon", first: true, predicate: ["columnFilterIcon"], descendants: true }, { propertyName: "matSortHeader", first: true, predicate: OMatSortHeader, descendants: true }], ngImport: i0, template: "<o-table-header-column-filter-icon #columnFilterIcon *ngIf=\"isModeColumnFilterable(column)\" [column]=\"column\" [column-filters]=\"columnFilters\">\n</o-table-header-column-filter-icon>\n\n<ng-container *ngIf=\"column.orderable\">\n  <span o-mat-sort-header>{{ column.title | oTranslate }}</span>\n</ng-container>\n<ng-container *ngIf=\"!column.orderable\">\n  <span class=\"header-title-container\" fxFlex>{{ column.title | oTranslate }}</span>\n</ng-container>\n\n<o-table-column-resizer *ngIf=\"resizable\" [column]=\"column\"></o-table-column-resizer>\n", styles: [".o-table-header{display:flex;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.o-table-header span[o-mat-sort-header]{flex:1;min-width:0}.o-table-header span[o-mat-sort-header]:not(:has(+ .o-table-column-resizer)){padding-right:6px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: OMatSortHeader, selector: "[o-mat-sort-header]", inputs: ["disabled"], exportAs: ["oMatSortHeader"] }, { kind: "component", type: OTableColumnResizerComponent, selector: "o-table-column-resizer", inputs: ["column"] }, { kind: "component", type: OTableHeaderColumnFilterIconComponent, selector: "o-table-header-column-filter-icon", inputs: ["column", "column-filters"] }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OTableHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'o-table-header', inputs: DEFAULT_INPUTS_O_TABLE_HEADER, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.o-table-header]': 'true',
                         '(mouseenter)': 'setFilterIconHintVisible(true)',
                         '(mouseleave)': 'setFilterIconHintVisible(false)'
-                    }, template: "<o-table-header-column-filter-icon #columnFilterIcon *ngIf=\"isModeColumnFilterable(column)\" [column]=\"column\">\n</o-table-header-column-filter-icon>\n\n<ng-container *ngIf=\"column.orderable\">\n  <span o-mat-sort-header>{{ column.title | oTranslate }}</span>\n</ng-container>\n<ng-container *ngIf=\"!column.orderable\">\n  <span class=\"header-title-container\" fxFlex>{{ column.title | oTranslate }}</span>\n</ng-container>\n\n<o-table-column-resizer *ngIf=\"resizable\" [column]=\"column\"></o-table-column-resizer>\n", styles: [".o-table-header{display:flex;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.o-table-header span[o-mat-sort-header]{flex:1;min-width:0}.o-table-header span[o-mat-sort-header]:not(:has(+ .o-table-column-resizer)){padding-right:6px}\n"] }]
+                    }, template: "<o-table-header-column-filter-icon #columnFilterIcon *ngIf=\"isModeColumnFilterable(column)\" [column]=\"column\" [column-filters]=\"columnFilters\">\n</o-table-header-column-filter-icon>\n\n<ng-container *ngIf=\"column.orderable\">\n  <span o-mat-sort-header>{{ column.title | oTranslate }}</span>\n</ng-container>\n<ng-container *ngIf=\"!column.orderable\">\n  <span class=\"header-title-container\" fxFlex>{{ column.title | oTranslate }}</span>\n</ng-container>\n\n<o-table-column-resizer *ngIf=\"resizable\" [column]=\"column\"></o-table-column-resizer>\n", styles: [".o-table-header{display:flex;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.o-table-header span[o-mat-sort-header]{flex:1;min-width:0}.o-table-header span[o-mat-sort-header]:not(:has(+ .o-table-column-resizer)){padding-right:6px}\n"] }]
         }], ctorParameters: function () { return [{ type: OTableBase, decorators: [{
                     type: Inject,
                     args: [forwardRef(() => OTableBase)]
@@ -33449,7 +33488,7 @@ class OTableHeaderSelectAllComponent extends OTableHeaderComponent {
     }
 }
 OTableHeaderSelectAllComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OTableHeaderSelectAllComponent, deps: [{ token: forwardRef(() => OTableBase) }], target: i0.ɵɵFactoryTarget.Component });
-OTableHeaderSelectAllComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OTableHeaderSelectAllComponent, selector: "o-table-header-select-all", inputs: { column: "column" }, host: { properties: { "class.o-table-header-select-all": "true" } }, usesInheritance: true, ngImport: i0, template: "<mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"table.masterToggle($event)\" [checked]=\"isAllSelected | async\" [indeterminate]=\"isIndeterminate | async\">\n  <ng-container *ngIf=\"table.tableColumnSelectAllContentChild?.title\">\n    {{table.tableColumnSelectAllContentChild?.title | oTranslate}}\n  </ng-container>\n</mat-checkbox>\n\n<o-table-column-resizer *ngIf=\"resizable && table.tableColumnSelectAllContentChild?.title\" [column]=\"column\"></o-table-column-resizer>\n", dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: OTableColumnResizerComponent, selector: "o-table-column-resizer", inputs: ["column"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+OTableHeaderSelectAllComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OTableHeaderSelectAllComponent, selector: "o-table-header-select-all", inputs: { column: "column", columnFilters: ["column-filters", "columnFilters"] }, host: { properties: { "class.o-table-header-select-all": "true" } }, usesInheritance: true, ngImport: i0, template: "<mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"table.masterToggle($event)\" [checked]=\"isAllSelected | async\" [indeterminate]=\"isIndeterminate | async\">\n  <ng-container *ngIf=\"table.tableColumnSelectAllContentChild?.title\">\n    {{table.tableColumnSelectAllContentChild?.title | oTranslate}}\n  </ng-container>\n</mat-checkbox>\n\n<o-table-column-resizer *ngIf=\"resizable && table.tableColumnSelectAllContentChild?.title\" [column]=\"column\"></o-table-column-resizer>\n", dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: OTableColumnResizerComponent, selector: "o-table-column-resizer", inputs: ["column"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OTableHeaderSelectAllComponent, decorators: [{
             type: Component,
             args: [{ selector: 'o-table-header-select-all', inputs: DEFAULT_INPUTS_O_TABLE_HEADER, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
@@ -33707,6 +33746,7 @@ class OTableVirtualScrollStrategy {
         this.stickyChange = new Subject();
         this.bufferMultiplier = 1;
         this.lastRenderedRange = { start: 0, end: 0 };
+        this.savedScrollPosition = 0;
         this._dataLength = 0;
     }
     get dataLength() {
@@ -33714,7 +33754,10 @@ class OTableVirtualScrollStrategy {
     }
     set dataLength(value) {
         this._dataLength = value;
-        this.onDataLengthChanged();
+        if (this.savedScrollPosition === 0) {
+            this.onDataLengthChanged();
+        }
+        this.savedScrollPosition = 0;
     }
     attach(viewport) {
         this.viewport = viewport;
@@ -33736,6 +33779,9 @@ class OTableVirtualScrollStrategy {
     onContentScrolled() {
         this.updateContent();
     }
+    setSavedScrollPosition(value) {
+        this.savedScrollPosition = value;
+    }
     setConfig(rowHeight, headerHeight, footerHeight) {
         if (this.rowHeight === rowHeight
             && this.headerHeight === headerHeight
@@ -34107,6 +34153,9 @@ class OTableComponent extends AbstractOServiceComponent {
         this.storePaginationState = false;
         this.pageScrollVirtual = 1;
         this.savedScrollPosition = 0;
+        this.columnFiltersSubject = new BehaviorSubject([]);
+        this.columnFilters$ = this.columnFiltersSubject.asObservable();
+        this.originalRegisteredColumns = [];
         this.groupedColumnsArray = [];
         this._isColumnFiltersActive = false;
         this.groupingHeadersRows = [];
@@ -34125,6 +34174,17 @@ class OTableComponent extends AbstractOServiceComponent {
         }
         this.snackBarService = this.injector.get(SnackBarService);
         this.getInjectionTokenConfig();
+        this.subscribeToFilterChanges();
+    }
+    subscribeToFilterChanges() {
+        this.subscriptionOnFilterChanges = this.onFilterByColumnChange.subscribe(event => {
+            this.updateColumnFiltersSubject(event);
+        });
+    }
+    updateColumnFiltersSubject(event) {
+        const newFilters = [...this.dataSource.getColumnValueFilters()];
+        this.columnFiltersSubject.next(newFilters);
+        this.cd.detectChanges();
     }
     getInjectionTokenConfig() {
         try {
@@ -34256,6 +34316,7 @@ class OTableComponent extends AbstractOServiceComponent {
             this.portalHost.forEach(x => x.detach());
         }
         this.destroy();
+        this.columnFiltersSubject.complete();
     }
     getSuffixColumnInsertable() {
         return Codes.SUFFIX_COLUMN_INSERTABLE;
@@ -34295,6 +34356,7 @@ class OTableComponent extends AbstractOServiceComponent {
     }
     initialize() {
         super.initialize();
+        this.originalNonHidableColumns = this.nonHidableColumns;
         this._oTableOptions = new DefaultOTableOptions();
         if (this.tabGroupContainer && this.tabContainer) {
             this.registerTabListener();
@@ -34506,6 +34568,7 @@ class OTableComponent extends AbstractOServiceComponent {
         if (this.loadingService) {
             this.loadingService.ngOnDestroy?.();
         }
+        this.subscriptionOnFilterChanges?.unsubscribe();
     }
     getDataToStore() {
         return this.componentStateService.getDataToStore();
@@ -34570,7 +34633,7 @@ class OTableComponent extends AbstractOServiceComponent {
         this.pushOColumnDefinition(colDef);
     }
     pushOColumnDefinition(colDef) {
-        colDef.visible = (this._visibleColArray.indexOf(colDef.attr) !== -1);
+        colDef.visible = this.visibleColArray.includes(colDef.attr);
         const alreadyExisting = this.getOColumn(colDef.attr);
         if (alreadyExisting !== undefined) {
             const replacingIndex = this._oTableOptions.columns.indexOf(alreadyExisting);
@@ -34578,6 +34641,7 @@ class OTableComponent extends AbstractOServiceComponent {
         }
         else {
             this._oTableOptions.columns.push(colDef);
+            this.originalRegisteredColumns.push(colDef);
         }
         this.ensureColumnsOrder();
         this.refreshEditionModeWarn();
@@ -34609,6 +34673,13 @@ class OTableComponent extends AbstractOServiceComponent {
         }
     }
     parseVisibleColumns(defaultConfiguration = false) {
+        if (defaultConfiguration) {
+            this.state.columnsDisplay = undefined;
+            const originalColumns = this.originalRegisteredColumns.map(col => col.attr);
+            this.visibleColArray = this.originalRegisteredColumns.filter(item => item.visible).map(item => item.attr);
+            this._oTableOptions.columns.sort((a, b) => originalColumns.indexOf(a.attr) - originalColumns.indexOf(b.attr));
+            return;
+        }
         if (this.state.columnsDisplay) {
             let stateCols = [];
             this.state.columnsDisplay.forEach((oCol, index) => {
@@ -34620,12 +34691,7 @@ class OTableComponent extends AbstractOServiceComponent {
                     console.warn('Unable to load the column ' + oCol.attr + ' from the localstorage');
                 }
             });
-            if (defaultConfiguration) {
-                stateCols = this.state.initialConfiguration.columnsDisplay;
-            }
-            else {
-                stateCols = this.checkChangesVisibleColummnsInInitialConfiguration(stateCols);
-            }
+            stateCols = this.checkChangesVisibleColummnsInInitialConfiguration(stateCols);
             this._oTableOptions.columns.sort((a, b) => {
                 const indexA = stateCols.findIndex(col => col.attr === a.attr);
                 const indexB = stateCols.findIndex(col => col.attr === b.attr);
@@ -34635,7 +34701,6 @@ class OTableComponent extends AbstractOServiceComponent {
         }
         else {
             this.visibleColArray = Util.parseArray(this.defaultVisibleColumns ? this.defaultVisibleColumns : this.visibleColumns, true);
-            this._oTableOptions.columns.sort((a, b) => this.visibleColArray.indexOf(a.attr) - this.visibleColArray.indexOf(b.attr));
         }
     }
     checkChangesVisibleColummnsInInitialConfiguration(stateCols) {
@@ -34708,13 +34773,10 @@ class OTableComponent extends AbstractOServiceComponent {
     }
     ensureColumnsOrder() {
         let columnsOrder = [];
-        if (this.state.columnsDisplay) {
-            columnsOrder = this.state.columnsDisplay.map(item => item.attr);
-        }
-        else {
-            columnsOrder = this.colArray.filter(attr => this.visibleColArray.indexOf(attr) === -1);
-            columnsOrder.push(...this.visibleColArray);
+        if (!this.state.columnsDisplay) {
+            return;
         }
+        columnsOrder = this.state.columnsDisplay.map(item => item.attr);
         this._oTableOptions.columns.sort((a, b) => {
             if (columnsOrder.indexOf(a.attr) === -1) {
                 return 0;
@@ -34728,6 +34790,7 @@ class OTableComponent extends AbstractOServiceComponent {
         if (!this.visibleColumns) {
             this.visibleColumns = this.columns;
         }
+        this.visibleColArray = Util.parseArray(this.visibleColumns, true);
         if (this.colArray.length) {
             this.colArray.forEach((x) => this.registerColumn(x));
             this.ensureColumnsOrder();
@@ -34809,6 +34872,9 @@ class OTableComponent extends AbstractOServiceComponent {
             this.sort.setMultipleSort(this.multipleSort);
         }
     }
+    get currentColumnFilters() {
+        return this.dataSource?.getColumnValueFilters() || [];
+    }
     handleSortChange(sortArray) {
         this.sortColArray = [];
         sortArray.forEach((sort) => {
@@ -35037,6 +35103,11 @@ class OTableComponent extends AbstractOServiceComponent {
             ObservableWrapper.callEmit(this.onPaginatedDataLoaded, data);
         }
         ObservableWrapper.callEmit(this.onDataLoaded, this.daoTable.data);
+        if (this.virtualScrollViewport && data.length > 0) {
+            setTimeout(() => {
+                this.initViewPort(data);
+            }, 0);
+        }
     }
     canSetStaticData(staticData) {
         return super.canSetStaticData(staticData) && Util.isDefined(this.daoTable);
@@ -35050,8 +35121,8 @@ class OTableComponent extends AbstractOServiceComponent {
         }
     }
     projectContentChanged() {
-        this.initViewPort(this.dataSource.renderedData);
-        if (this.previousRendererData !== this.dataSource.renderedData) {
+        const dataChanged = this.previousRendererData !== this.dataSource.renderedData;
+        if (dataChanged) {
             this.previousRendererData = this.dataSource.renderedData;
             ObservableWrapper.callEmit(this.onContentChange, this.dataSource.renderedData);
         }
@@ -35381,7 +35452,6 @@ class OTableComponent extends AbstractOServiceComponent {
         }
         this.stopEdition();
         if (saveChanges && column.editor.updateRecordOnEdit) {
-            this.saveScrollPosition();
             const toUpdate = {};
             toUpdate[column.attr] = data[column.attr];
             const kv = this.extractKeysFromRecord(data);
@@ -35389,11 +35459,10 @@ class OTableComponent extends AbstractOServiceComponent {
             if (updateObservable) {
                 updateObservable.subscribe({
                     next: (response) => {
-                        this.restoreScrollPosition();
+                        this.saveScrollPosition();
                     },
                     error: (error) => {
                         console.error('Error updating cell:', error);
-                        this.restoreScrollPosition();
                     }
                 });
             }
@@ -35734,9 +35803,6 @@ class OTableComponent extends AbstractOServiceComponent {
     isSearcheableColumn(column) {
         return this.searcheableColumns.includes(column.attr);
     }
-    isColumnFilterActive(column) {
-        return this.isColumnFiltersActive && Util.isDefined(this.dataSource.getColumnValueFilterByAttr(column.attr));
-    }
     openColumnFilterDialog(column, event) {
         event.stopPropagation();
         event.preventDefault();
@@ -36071,8 +36137,10 @@ class OTableComponent extends AbstractOServiceComponent {
         }
     }
     applyDefaultConfiguration() {
-        this.initializeParams();
+        this.state.reset(this.pageable);
         this.parseVisibleColumns(true);
+        this.initializeParams();
+        this.addDefaultRowButtons();
         this.refreshColumnsWidthFromOriginalDefinition();
         this.reinitializateQuickFilterColumns();
         this.resetQueryRows();
@@ -36180,8 +36248,17 @@ class OTableComponent extends AbstractOServiceComponent {
         colDef.groupable = false;
         colDef.title = undefined;
         colDef.width = '48px';
+        this.visibleColArray.push(name);
         this.pushOColumnDefinition(colDef);
-        this._oTableOptions.visibleColumns.push(name);
+        this.addNonHidableColumn(name);
+    }
+    addNonHidableColumn(columnAttr) {
+        if (!this.nonHidableColumns) {
+            this.nonHidableColumns = columnAttr;
+        }
+        else if (!this.nonHidableColumns.split(',').map(c => c.trim()).includes(columnAttr)) {
+            this.nonHidableColumns += Codes.ARRAY_INPUT_SEPARATOR + columnAttr;
+        }
     }
     get headerHeight() {
         let height = 0;
@@ -36664,21 +36741,8 @@ class OTableComponent extends AbstractOServiceComponent {
     saveScrollPosition() {
         if (this.virtualScrollViewport) {
             this.savedScrollPosition = this.virtualScrollViewport.measureScrollOffset();
+            this.scrollStrategy.setSavedScrollPosition(this.savedScrollPosition);
         }
-        else if (this.tableBodyEl?.nativeElement) {
-            this.savedScrollPosition = this.tableBodyEl.nativeElement.scrollTop;
-        }
-    }
-    restoreScrollPosition() {
-        setTimeout(() => {
-            if (this.virtualScrollViewport && this.savedScrollPosition > 0) {
-                this.virtualScrollViewport.scrollToOffset(this.savedScrollPosition);
-            }
-            else if (this.tableBodyEl?.nativeElement && this.savedScrollPosition > 0) {
-                this.tableBodyEl.nativeElement.scrollTop = this.savedScrollPosition;
-            }
-            this.savedScrollPosition = 0;
-        }, 0);
     }
 }
 OTableComponent.DEFAULT_BASE_SIZE_SPINNER = 100;
@@ -36696,7 +36760,7 @@ OTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
         { provide: VIRTUAL_SCROLL_STRATEGY, useClass: OTableVirtualScrollStrategy },
         { provide: OTableBase, useExisting: forwardRef(() => OTableComponent) },
         OTableLoadingService
-    ], queries: [{ propertyName: "tableRowExpandable", first: true, predicate: OTableRowExpandableComponent, descendants: true }, { propertyName: "quickfilterContentChild", first: true, predicate: ["o-table-quickfilter"], descendants: true, static: true }, { propertyName: "tableColumnSelectAllContentChild", first: true, predicate: OTableColumnSelectAllDirective, descendants: true }, { propertyName: "contextMenuContentChild", first: true, predicate: OTableContextMenuComponent, descendants: true, static: true }, { propertyName: "tableOptions", predicate: OTableOptionComponent }, { propertyName: "tableButtons", predicate: OTableButtonComponent }, { propertyName: "exportOptsTemplate", predicate: OTableExportButtonComponent }], viewQueries: [{ propertyName: "oMatSort", first: true, predicate: OMatSort, descendants: true }, { propertyName: "cdkVirtualScrollViewport", first: true, predicate: ["virtualScrollViewPort"], descendants: true }, { propertyName: "spinnerContainer", first: true, predicate: ["spinnerContainer"], descendants: true, read: ElementRef }, { propertyName: "tableBodyEl", first: true, predicate: ["tableBody"], descendants: true }, { propertyName: "tableHeaderEl", first: true, predicate: ["tableHeader"], descendants: true, read: ElementRef }, { propertyName: "tableToolbarEl", first: true, predicate: ["tableToolbar"], descendants: true, read: ElementRef }, { propertyName: "matTable", first: true, predicate: MatTable, descendants: true }, { propertyName: "oTableMenu", first: true, predicate: ["tableMenu"], descendants: true }, { propertyName: "rows", predicate: MatRow, descendants: true }, { propertyName: "tooltip", predicate: MatTooltip, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"o-table-container\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\" [style.display]=\"isVisible()? '' : 'none'\"\n  [class.block-events]=\"loadingService.isProcessing$ | async\">\n  <o-data-toolbar #tableToolbar *ngIf=\"hasControls()\" [title]=\"title\" [show-title]=\"showTitle\" class=\"o-table-toolbar\">\n    <ng-container o-data-toolbar-projection-start>\n      <o-table-buttons #tableButtons [insert-button]=\"insertButton\" [refresh-button]=\"refreshButton\" [delete-button]=\"showDeleteButton\">\n        <ng-content select=\"o-table-button\"></ng-content>\n      </o-table-buttons>\n    </ng-container>\n    <ng-content select=\"[o-table-toolbar][position=start]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-content select=\"[o-table-toolbar][position=end]\" ngProjectAs=\"[o-data-toolbar-custom-projection-end]\">\n    </ng-content>\n    <ng-content select=\"[o-table-toolbar]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-container o-data-toolbar-projection-end>\n      <ng-container *ngIf=\"quickfilterContentChild; else defaultQuickFilter\">\n        <ng-content select=\"o-table-quickfilter\"></ng-content>\n      </ng-container>\n      <ng-template #defaultQuickFilter>\n        <ng-container *ngIf=\"quickFilter\">\n          <o-table-quickfilter (onChange)=\"tableQuickFilterChanged($event)\">\n          </o-table-quickfilter>\n        </ng-container>\n      </ng-template>\n      <button type=\"button\" *ngIf=\"showTableMenuButton\" mat-icon-button class=\"o-table-menu-button\" [matMenuTriggerFor]=\"tableMenu.matMenu\"\n        (click)=\"$event.stopPropagation()\">\n        <mat-icon svgIcon=\"ontimize:more_vert\"></mat-icon>\n      </button>\n      <o-table-menu #tableMenu [select-all-checkbox]=\"selectAllCheckbox\" [export-button]=\"exportButton\"\n        [columns-visibility-button]=\"columnsVisibilityButton\" [show-configuration-option]=\"showConfigurationOption\"\n        [show-filter-option]=\"showFilterOption\" [show-report-on-demand-option]=\"showReportOnDemandOption\"\n        [show-charts-on-demand-option]=\"showChartsOnDemandOption\" [show-reset-width-option]=\"showResetWidthOption\" [show-group-by-option]=\"groupable\">\n        <ng-content select=\"o-table-option\"></ng-content>\n      </o-table-menu>\n    </ng-container>\n  </o-data-toolbar>\n\n  <div #tableBody class=\"o-table-body o-scroll\" [class.horizontal-scroll]=\"horizontalScroll\" [class.scrolled]=\"horizontalScrolled\"\n    [ngStyle]=\"{'visibility': spinnerContainer ? 'hidden' : 'visible'}\">\n    <ng-container *ngIf=\"!enabledVirtualScroll; else tableWithVirtualScroll\">\n      <div class=\"o-table-overflow o-scroll\">\n        <ng-template *ngTemplateOutlet=\"table\"></ng-template>\n      </div>\n    </ng-container>\n    <ng-template #tableWithVirtualScroll>\n      <cdk-virtual-scroll-viewport #virtualScrollViewPort fxFlex>\n        <ng-template *ngTemplateOutlet=\"table\"></ng-template>\n      </cdk-virtual-scroll-viewport>\n    </ng-template>\n  </div>\n  <!--TABLE PAGINATOR-->\n  <mat-paginator *ngIf=\"paginator\" #matpaginator [length]=\"dataSource?.resultsLength\" [pageIndex]=\"paginator.pageIndex\" [pageSize]=\"queryRows\"\n    [pageSizeOptions]=\"paginator.pageSizeOptions\" (page)=\"onChangePage($event)\" [showFirstLastButtons]=\"paginator.showFirstLastButtons\"\n    [ngStyle]=\"{'visibility': spinnerContainer ? 'hidden' : 'visible'}\">\n  </mat-paginator>\n\n  <!--LOADING-->\n  <div #spinnerContainer *ngIf=\"showLoading | async\" fxLayout=\"column\" fxLayoutAlign=\"center center\" [ngStyle]=\"{'top.px': toolBarHeight}\"\n    class=\"spinner-container\" [class.spinner-container-scrollable]=\"loadingScroll | async\">\n    <o-table-skeleton></o-table-skeleton>\n  </div>\n\n  <!-- Disable blocker -->\n  <div *ngIf=\"!enabled\" class=\"o-table-disabled-blocker\"></div>\n</div>\n\n<ng-template #table>\n  <table mat-table #table [class.autoadjusted]=\"autoAdjust\" [trackBy]=\"getTrackByFunction()\" [dataSource]=\"dataSource\" oMatSort\n    [oMatSortColumns]=\"sortColArray\" [ngClass]=\"rowHeightObservable | async\" (cdkObserveContent)=\"projectContentChanged()\"\n    oTableExpandedFooter [oTableExpandedFooterColspan]=\"visibleColArray.length\"\n    [multiTemplateDataRows]=\"showExpandableRow()\" aria-describedby=\"ontimize-web table\">\n\n    <!--Checkbox Column -->\n    <ng-container [matColumnDef]=\"oTableOptions.selectColumn.name\" *ngIf=\"oTableOptions.selectColumn.visible\">\n      <ng-container *ngIf=\"!tableColumnSelectAllContentChild; else customHeaderSelectAllTemplate\">\n        <th mat-header-cell *matHeaderCellDef>\n          <div class=\"content\" *ngIf=\"isSelectionModeMultiple()\">\n            <o-table-header-select-all [column]=\"oTableOptions.selectColumn\"></o-table-header-select-all>\n          </div>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-checkbox name=\"id[]\" (click)=\"$event.stopPropagation()\" [disabled]=\"isDisableCheckbox(row)\"\n            (change)=\"selectionCheckboxToggle($event, row)\" [checked]=\"isRowSelected(row)\">\n          </mat-checkbox>\n        </td>\n      </ng-container>\n      <ng-template #customHeaderSelectAllTemplate>\n        <th mat-header-cell *matHeaderCellDef [class.resizable]=\"resizable\" class=\"mat-header-select-all-with-title o-center\"\n          [style.width]=\"oTableOptions.selectColumn.width\" [style.min-width]=\"getMinWidthColumn(oTableOptions.selectColumn)\"\n          [style.max-width]=\"oTableOptions.selectColumn.maxWidth\">\n          <div class=\"content\">\n            <o-table-header-select-all [column]=\"oTableOptions.selectColumn\"></o-table-header-select-all>\n          </div>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"o-center\" [style.width]=\"oTableOptions.selectColumn.width\"\n          [style.min-width]=\"getMinWidthColumn(oTableOptions.selectColumn)\" [style.max-width]=\"oTableOptions.selectColumn.maxWidth\">\n          <mat-checkbox name=\"id[]\" (click)=\"$event.stopPropagation()\" [disabled]=\"isDisableCheckbox(row)\"\n            (change)=\"selectionCheckboxToggle($event, row)\" [checked]=\"isRowSelected(row)\">\n          </mat-checkbox>\n        </td>\n      </ng-template>\n\n\n      <td mat-footer-cell *matFooterCellDef></td>\n    </ng-container>\n\n    <!--Expandable Column -->\n    <ng-container [matColumnDef]=\"oTableOptions.expandableColumn.name\" *ngIf=\"isColumnExpandable()\">\n      <th mat-header-cell *matHeaderCellDef>\n        {{ oTableOptions.expandableColumn.title }}\n      </th>\n      <td mat-cell *matCellDef=\"let row;let rowIndex = dataIndex\">\n        <mat-icon *ngIf=\"showExpandableIcon(row, rowIndex) | async\" (click)=\"toggleRowExpandable(row, $event)\"\n          (keydown)=\"toggleRowExpandable(row, $event)\">\n          <ng-container *ngIf=\"isExpanded(row)\">{{ tableRowExpandable.iconCollapse }}</ng-container>\n          <ng-container *ngIf=\"!isExpanded(row)\">{{ tableRowExpandable.iconExpand }}</ng-container>\n        </mat-icon>\n      </td>\n    </ng-container>\n\n    <!-- Generic column definition -->\n    <ng-container *ngFor=\"let column of oTableOptions.columns\" [matColumnDef]=\"column.name\">\n      <!--Define header-cell-->\n\n      <th mat-header-cell *matHeaderCellDef [ngClass]=\"getTitleAlignClass(column)\" [class.resizable]=\"resizable\" [style.width]=\"column.width\"\n        [style.min-width]=\"getMinWidthColumn(column)\" [style.max-width]=\"column.maxWidth\">\n\n        <div class=\"content\">\n          <o-table-header [column]=\"column\"></o-table-header>\n        </div>\n      </th>\n\n\n      <!--Define mat-cell-->\n      <ng-container *ngIf=\"!table.multiTemplateDataRows; else cellTemplateMultiTemplateDataRows\">\n        <td #cell mat-cell *matCellDef=\"let row;let rowIndex = index \" [ngClass]=\"[column.className, getCellAlignClass(column)]\"\n          (click)=\"handleClick(row, column, rowIndex, cell, $event)\" (dblclick)=\"handleDoubleClick(row, column, rowIndex, cell, $event)\"\n          [class.empty-cell]=\"isEmpty(row[column.name])\" [matTooltipDisabled]=\"!column.hasTooltip()\" [matTooltip]=\"column.getTooltip(row)\"\n          matTooltipPosition=\"below\" matTooltipShowDelay=\"750\" matTooltipClass=\"o-table-cell-tooltip\"\n          [class.o-mat-cell-multiline]=\"(column.isMultiline | async)\" [oContextMenu]=\"tableContextMenu\"\n          [oContextMenuData]=\"{ cellName:column.name, rowValue:row, rowIndex:rowIndex}\" [style.width]=\"column.width\"\n          [style.min-width]=\"getMinWidthColumn(column)\" [style.max-width]=\"column.maxWidth\"\n          [class.o-table-editing-cell]=\"isRowSelected(row) && column.editing\">\n          <ng-container *ngTemplateOutlet=\"cellRenderer;context:{column:column,row:row}\"></ng-container>\n        </td>\n      </ng-container>\n      <ng-template #cellTemplateMultiTemplateDataRows>\n        <td #cell mat-cell *matCellDef=\"let row;let rowIndex = dataIndex \" [ngClass]=\"[column.className, getCellAlignClass(column)]\"\n          (click)=\"handleClick(row, column, rowIndex, cell, $event)\" (dblclick)=\"handleDoubleClick(row, column, rowIndex, cell, $event)\"\n          [class.empty-cell]=\"isEmpty(row[column.name])\" [matTooltipDisabled]=\"!column.hasTooltip()\" [matTooltip]=\"column.getTooltip(row)\"\n          matTooltipPosition=\"below\" matTooltipShowDelay=\"750\" matTooltipClass=\"o-table-cell-tooltip\"\n          [class.o-mat-cell-multiline]=\"(column.isMultiline | async)\" [oContextMenu]=\"tableContextMenu\"\n          [oContextMenuData]=\"{ cellName:column.name, rowValue:row, rowIndex:rowIndex}\" [style.width]=\"column.width\"\n          [style.min-width]=\"getMinWidthColumn(column)\" [style.max-width]=\"column.maxWidth\"\n          [class.o-table-editing-cell]=\"isRowSelected(row) && column.editing\">\n          <ng-container *ngTemplateOutlet=\"cellRenderer;context:{column:column,row:row}\"></ng-container>\n\n        </td>\n      </ng-template>\n      <!--Define mat-footer-cell-->\n      <ng-container *ngIf=\"showTotals | async\">\n        <td mat-footer-cell *matFooterCellDef [ngClass]=\"column.className\">\n          <div class=\"title\" *ngIf=\"column.aggregate && column.aggregate.title\">\n            {{ column.aggregate.title | oTranslate }}\n          </div>\n          <ng-container *ngIf=\"!column.renderer || column.aggregate?.operator === 'count'; else rendererTemplate\">\n            {{ dataSource.getAggregateData(column) }}\n          </ng-container>\n          <ng-template #rendererTemplate>\n            <ng-template *ngIf=\"column.renderer && column.aggregate\" [ngTemplateOutlet]=\"column.renderer.templateref\"\n              [ngTemplateOutletContext]=\"{cellvalue: dataSource.getAggregateData(column)}\">\n            </ng-template>\n          </ng-template>\n        </td>\n      </ng-container>\n\n    </ng-container>\n\n    <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n    <ng-container *ngIf=\"hasExpandedRow\">\n      <ng-container matColumnDef=\"expandedDetail\">\n        <td mat-cell *matCellDef=\"let row;let rowIndex= dataIndex\" [attr.colspan]=\"oTableOptions.visibleColumns.length\">\n          <div [ngClass]=\"getExpandedRowContainerClass(rowIndex)\" [@detailExpand]=\"getStateExpand(row)\">\n          </div>\n        </td>\n      </ng-container>\n    </ng-container>\n\n    <!--FOOTER-INSERTABLE-->\n    <ng-container *ngIf=\"showLastInsertableRow && oTableInsertableRowComponent\">\n      <ng-container [matColumnDef]=\"oTableOptions.selectColumn.name + getSuffixColumnInsertable()\" *ngIf=\"oTableOptions.selectColumn.visible\">\n        <td mat-footer-cell *matFooterCellDef>\n        </td>\n      </ng-container>\n      <ng-container *ngFor=\"let column of oTableOptions.columns\" [matColumnDef]=\"column.name+ getSuffixColumnInsertable()\">\n\n        <td mat-footer-cell *matFooterCellDef [ngClass]=\"[column.className, getCellAlignClass(column)]\">\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && !oTableInsertableRowComponent.useCellEditor(column)\">\n            <mat-form-field class=\"insertable-form-field o-table-cell-editor-text o-table-cell-editor\" [hideRequiredMarker]=\"false\">\n              <input matInput type=\"text\" [placeholder]=\"oTableInsertableRowComponent.getPlaceholder(column)\" [id]=\"column.attr\"\n                [formControl]=\"oTableInsertableRowComponent.getControl(column)\" [required]=\"oTableInsertableRowComponent.isColumnRequired(column)\">\n              <mat-error *oMatError=\"oTableInsertableRowComponent.columnHasError(column, 'required')\">\n                {{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}\n              </mat-error>\n            </mat-form-field>\n          </ng-container>\n\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && oTableInsertableRowComponent.useCellEditor(column)\">\n            <ng-template [ngTemplateOutlet]=\"oTableInsertableRowComponent.columnEditors[column.attr].templateref\"\n              [ngTemplateOutletContext]=\"{ rowvalue: oTableInsertableRowComponent.rowData }\">\n            </ng-template>\n          </ng-container>\n        </td>\n      </ng-container>\n\n    </ng-container>\n\n    <ng-container *ngIf=\"showFirstInsertableRow && oTableInsertableRowComponent\">\n      <ng-container [matColumnDef]=\"getColumnInsertable(oTableOptions.selectColumn.name)\" *ngIf=\"oTableOptions.selectColumn.visible\">\n        <td mat-header-cell *matHeaderCellDef>\n        </td>\n      </ng-container>\n      <ng-container *ngFor=\"let column of oTableOptions.columns\" [matColumnDef]=\"getColumnInsertable(column.name)\">\n\n        <td mat-header-cell *matHeaderCellDef [ngClass]=\"[column.className, getCellAlignClass(column)]\">\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && !oTableInsertableRowComponent.useCellEditor(column)\">\n            <mat-form-field class=\"insertable-form-field\" [hideRequiredMarker]=\"false\">\n              <input matInput type=\"text\" [placeholder]=\"oTableInsertableRowComponent.getPlaceholder(column)\" [id]=\"column.attr\"\n                [formControl]=\"oTableInsertableRowComponent.getControl(column)\" [required]=\"oTableInsertableRowComponent.isColumnRequired(column)\">\n              <mat-error *oMatError=\"oTableInsertableRowComponent.columnHasError(column, 'required')\">\n                {{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}\n              </mat-error>\n            </mat-form-field>\n          </ng-container>\n\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && oTableInsertableRowComponent.useCellEditor(column)\">\n            <ng-template [ngTemplateOutlet]=\"oTableInsertableRowComponent.columnEditors[column.attr].templateref\"\n              [ngTemplateOutletContext]=\"{ rowvalue: oTableInsertableRowComponent.rowData }\">\n            </ng-template>\n          </ng-container>\n        </td>\n      </ng-container>\n\n    </ng-container>\n\n    <!-- Definition column group header -->\n    <ng-container *ngFor=\"let column of groupingHeadersRows; let i = index\" [matColumnDef]=\"column\">\n      <td mat-cell *matCellDef=\"let group\" class=\"grouping-row\" [oContextMenu]=\"tableContextMenu\"\n        [oContextMenuData]=\"{ cellName:column, rowValue:group, rowIndex:i}\" [ngClass]=\"getGroupHeaderCellAlignClass(column)\">\n        <div *ngIf=\"i===0\" class=\"grouping-title-wrapper\" [ngStyle]=\"{'padding-left': 20*(group.level-1)+'px'}\">\n          <mat-icon>{{ group.expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\n          {{ group.title }}\n        </div>\n        <div class=\"grouping-aggregate\" *ngIf=\"group.hasActiveAggregate(visibleColArray[i])\">\n          {{ group.getColumnActiveAggregateTitle(visibleColArray[i]) | oTranslate }} :\n          <ng-container *ngIf=\"!getOColumnFromGroupHeaderColumn(column).renderer\">\n            {{ group.getColumnAggregateValue(visibleColArray[i])}}\n          </ng-container>\n          <ng-container *ngIf=\"getOColumnFromGroupHeaderColumn(column).renderer\">\n            <ng-template\n              *ngTemplateOutlet=\"getOColumnFromGroupHeaderColumn(column).renderer?.templateref; context:{ cellvalue:  group.getColumnAggregateValue(visibleColArray[i]) }\">\n            </ng-template>\n          </ng-container>\n        </div>\n      </td>\n    </ng-container>\n\n    <ng-container matColumnDef=\"position\">\n      <td mat-cell *matCellDef=\"let row\"> {{row}} </td>\n    </ng-container>\n\n    <tr #tableHeader mat-header-row *matHeaderRowDef=\"oTableOptions.visibleColumns; sticky: fixedHeader\"></tr>\n\n    <ng-container *ngIf=\"!table.multiTemplateDataRows; else rowTemplateMultiTemplateDataRows\">\n      <tr mat-row oTableRow *matRowDef=\"let row; columns: oTableOptions.visibleColumns; when:isNotGroup; let rowIndex = index\"\n        [class.selected]=\"isRowSelected(row)\" [ngClass]=\"row | oTableRowClass: rowIndex: rowClass\">\n      </tr>\n    </ng-container>\n    <ng-template #rowTemplateMultiTemplateDataRows>\n      <tr mat-row oTableRow *matRowDef=\"let row; columns: oTableOptions.visibleColumns; when:isNotGroup; let rowIndex = dataIndex\"\n        [class.selected]=\"isRowSelected(row)\" [ngClass]=\"row | oTableRowClass: rowIndex: rowClass\">\n      </tr>\n    </ng-template>\n\n    <!-- Row Group header -->\n    <tr mat-row *matRowDef=\"let row; columns: groupingHeadersRows; when:isGroup\" (click)=\"groupHeaderClick(row)\"\n      [ngClass]=\"getClassNameGroupHeader(row)\">\n    </tr>\n\n    <!-- Expanded detail row-->\n    <ng-container *ngIf=\"hasExpandedRow\">\n      <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"o-table-row-expanded\"></tr>\n    </ng-container>\n\n    <ng-container *ngIf=\"showLastInsertableRow\">\n      <tr mat-footer-row *matFooterRowDef=\"oTableOptions.columnsInsertables; sticky: true\"\n        (keyup)=\"oTableInsertableRowComponent.handleKeyboardEvent($event)\" class=\"o-table-insertable\"></tr>\n    </ng-container>\n    <ng-container *ngIf=\"showFirstInsertableRow\">\n      <tr mat-header-row *matHeaderRowDef=\"oTableOptions.columnsInsertables; sticky: true\"\n        (keyup)=\"oTableInsertableRowComponent.handleKeyboardEvent($event)\" class=\"o-table-insertable\"> </tr>\n    </ng-container>\n    <ng-container *ngIf=\"showTotals | async\">\n      <tr mat-footer-row *matFooterRowDef=\"oTableOptions.visibleColumns; sticky: true\" class=\"o-table-aggregate\">\n      </tr>\n    </ng-container>\n  </table>\n\n</ng-template>\n\n<ng-container *ngIf=\"!contextMenuContentChild && contextMenu\">\n  <o-table-context-menu [insert]=\"insertButton\" [edit]=\"editionMode !== EDIT_MODE_NONE\" [view-detail]=\"detailMode !== DETAIL_MODE_NONE\"\n    [refresh]=\"refreshButton\" [delete]=\"deleteButton\" [filter]=\"showFilterOption\" [group-by-row]=\"groupable\">\n  </o-table-context-menu>\n</ng-container>\n\n<ng-template #cellRenderer let-row=\"row\" let-column=\"column\">\n  <div class=\"content\">\n\n    <ng-container [ngSwitch]=\"true\">\n      <ng-container *ngSwitchCase=\"column.renderer != null && (!column.editing || column.editing && !isRowSelected(row))\">\n        <ng-template *ngTemplateOutlet=\"column.renderer?.templateref; context:{ cellvalue: row[column.name], rowvalue:row }\">\n        </ng-template>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"isRowSelected(row) && column.editing\">\n        <ng-template *ngTemplateOutlet=\"column.editor?.templateref; context:{ cellvalue: row[column.name], rowvalue:row }\">\n        </ng-template>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"column.type === 'editButtonInRow' || column.type === 'detailButtonInRow'\">\n        <div fxLayoutAlign=\"center center\" class=\"o-action-cell-renderer\" (click)=\"onDetailButtonClick(column, row, $event)\">\n          <mat-icon>{{ getDetailButtonIcon(column) }}</mat-icon>\n        </div>\n      </ng-container>\n      <ng-container *ngSwitchDefault>{{ row[column.name] }}</ng-container>\n    </ng-container>\n\n  </div>\n</ng-template>\n", styles: [".o-table{height:100%;max-height:100%;width:100%}.o-table.o-table-disabled{opacity:.4}.o-table .o-table-container{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:flex-start;align-content:stretch;min-width:100%;min-height:400px;position:relative;padding:0 .5%}.o-table .o-table-container .o-table-body{display:flex;flex:1 1 auto}.o-table .o-table-container .o-table-body .o-table-overflow{overflow-y:auto;overflow-x:hidden;min-width:100%}.o-table .o-table-container .o-table-body .cdk-virtual-scrollable{overflow:hidden}.o-table .o-table-container .o-table-body.horizontal-scroll .cdk-virtual-scrollable{overflow:visible;contain:none}.o-table .o-table-container .o-table-body.horizontal-scroll .o-table-overflow{overflow-x:auto}.o-table .o-table-container .o-table-body thead .mat-mdc-header-row th:last-child .o-table-column-resizer{display:none}.o-table .o-table-container.block-events{pointer-events:none}.o-table .o-table-container .o-table-toolbar{height:40px}.o-table .o-table-container .o-table-toolbar>div{max-height:100%}.o-table .o-table-container .o-table-toolbar .buttons{margin:0 10px 0 4px}.o-table .o-table-container .o-table-body{max-width:100%;height:100%;overflow:hidden;position:relative}.o-table .o-table-container .o-table-body .spinner-container{position:absolute;top:0;left:0;right:0;bottom:0;z-index:500;visibility:visible;opacity:1;transition:opacity .25s linear}.o-table .o-table-container .o-table-body.horizontal-scroll{overflow-x:auto;padding-bottom:16px}.o-table .o-table-container .o-table-body.horizontal-scroll .mat-mdc-header-cell{width:150px}.o-table .o-table-container .o-table-body .o-table-no-results{cursor:default;text-align:center}.o-table .o-table-container .o-table-body .o-table-no-results td{text-align:center}.o-table .o-table-container .mat-mdc-table{table-layout:fixed;width:100%}.o-table .o-table-container .mat-mdc-table.autoadjusted{table-layout:auto}.o-table .o-table-container .mat-mdc-table td .content,.o-table .o-table-container .mat-mdc-table th .content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table.small .mat-mdc-header-row .mat-mdc-cell .image-avatar,.o-table .o-table-container .mat-mdc-table.small .mat-mdc-header-row .mat-mdc-header-cell .image-avatar,.o-table .o-table-container .mat-mdc-table.small .mat-mdc-row .mat-mdc-cell .image-avatar,.o-table .o-table-container .mat-mdc-table.small .mat-mdc-row .mat-mdc-header-cell .image-avatar{width:24px;height:24px}.o-table .o-table-container .mat-mdc-table.large .column-filter-icon{margin-top:4px}.o-table .o-table-container .mat-mdc-table.large .mat-sort-header-arrow{margin-top:7px}.o-table .o-table-container .mat-mdc-table tr.mat-mdc-row.o-table-row-expanded{height:0}.o-table .o-table-container .mat-mdc-table tr.o-table-insertable td{height:1px}.o-table .o-table-container .mat-mdc-table .mat-mdc-footer-cell{padding:0 12px}.o-table .o-table-container .mat-mdc-table .mat-mdc-footer-cell.o-start{text-align:start}.o-table .o-table-container .mat-mdc-table .mat-mdc-footer-cell.o-center{text-align:center}.o-table .o-table-container .mat-mdc-table .mat-mdc-footer-cell.o-end{text-align:end}.o-table .o-table-container .mat-mdc-table .mat-mdc-row{box-sizing:border-box;transition:background-color .2s;position:relative;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell{padding:0 12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.grouping-row,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.grouping-row{padding-top:30px;cursor:pointer}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.grouping-row .grouping-title-wrapper,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.grouping-row .grouping-title-wrapper{position:absolute;width:100%;left:0;top:0;text-align:left}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.grouping-row .grouping-aggregate,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.grouping-row .grouping-aggregate{font-weight:700;font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-bottom:8px}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.empty-cell,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.empty-cell{min-height:16px}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell .action-cell-renderer,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell .action-cell-renderer{cursor:pointer}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-start,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-start{text-align:start}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-center,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-center{text-align:center}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-end,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-end{text-align:end}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell *,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell *{vertical-align:middle}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-mat-cell-multiline:not(.mat-mdc-header-cell),.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-mat-cell-multiline:not(.mat-mdc-header-cell){padding:6px 12px}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-mat-cell-multiline .content,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-mat-cell-multiline .content{overflow:initial;white-space:normal;text-overflow:unset}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell .image-avatar,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell .image-avatar{width:32px;height:32px;margin:1px auto;overflow:hidden;border-radius:50%;position:relative;z-index:1}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell .image-avatar img,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell .image-avatar img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;max-width:inherit;max-height:inherit}.o-table .o-table-container .mat-mdc-table .o-action-cell-renderer{display:inline-block;cursor:pointer}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell{overflow:hidden;position:relative;box-sizing:border-box;padding:0 12px;vertical-align:middle}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select.mat-header-select-all-with-title{padding-right:12px}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell:first-of-type{padding-left:0}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell:not(.o-column-image){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell:has(.o-table-column-resizer){padding-right:0}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .o-table-header-indicator-numbered{font-size:8px;position:absolute;text-align:center;display:inline-block;width:18px;height:18px;line-height:18px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;bottom:-10px;right:-9px}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .column-filter-icon{cursor:pointer;font-size:18px;width:18px;height:18px;line-height:1}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .mat-sort-header-button{flex:1;display:block;place-content:center}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .header-title-container{cursor:default;min-height:20px}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .header-title-container,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .mat-sort-header-button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.start,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.start .mat-sort-header-button{text-align:left}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.center,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.center .mat-sort-header-button{text-align:center}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.end,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.end .mat-sort-header-button{text-align:right}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-select,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select{box-sizing:content-box;overflow:initial}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-select:not(.mat-header-select-all-with-title),.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select:not(.mat-header-select-all-with-title){width:30px}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-select .mat-checkbox-layout,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select .mat-checkbox-layout{text-overflow:ellipsis;overflow:hidden;display:inline}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-expandable,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-expandable{width:40px;box-sizing:content-box;padding:0 0 0 24px;overflow:initial}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell .row-container-expanded{overflow:hidden;display:flex}.o-table .o-table-container .o-table-disabled-blocker{bottom:0;left:0;position:absolute;right:0;top:0;z-index:100}.o-table .spinner-container{position:absolute;top:0;left:0;right:0;bottom:0;z-index:500;visibility:visible;opacity:1;transition:opacity .25s linear}.o-table .spinner-container-scrollable{position:relative}.o-table.o-table-fixed{display:flex}.o-table.o-table-fixed .o-table-container{display:flex;flex-direction:column}.o-table.o-table-fixed .o-table-body{display:flex;flex:1}.o-table.o-table-fixed .o-table-body .o-table-overflow{flex:1;overflow-y:auto}.mat-mdc-tooltip.o-table-cell-tooltip{word-wrap:break-word;overflow:hidden;min-width:140px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i4$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i4$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "directive", type: i3$3.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: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: OMatErrorDirective, selector: "[oMatError]", inputs: ["oMatError"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i14.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i14.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i14.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i14.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i14.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i14.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i14.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i14.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i14.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i14.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i14.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i14.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i14.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i14.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i11$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i7$4.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: OContextMenuDirective, selector: "[oContextMenu]", inputs: ["oContextMenu", "oContextMenuData"] }, { kind: "directive", type: i18.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }, { kind: "directive", type: OMatSort, selector: "[oMatSort]", inputs: ["oMatSortDisabled", "oMatSortColumns"], outputs: ["matSortChange"], exportAs: ["oMatSort"] }, { kind: "component", type: ODataToolbarComponent, selector: "o-data-toolbar", inputs: ["show-title", "title"] }, { kind: "component", type: OTableContextMenuComponent, selector: "o-table-context-menu", inputs: ["context-menu", "insert", "edit", "view-detail", "copy", "select-all", "refresh", "delete", "filter", "group-by-row"] }, { kind: "directive", type: OTableRowDirective, selector: "[oTableRow]" }, { kind: "directive", type: OTableExpandedFooterDirective, selector: "[oTableExpandedFooter]", inputs: ["oTableExpandedFooterColspan"] }, { kind: "component", type: OTableButtonsComponent, selector: "o-table-buttons", inputs: ["insert-button", "refresh-button", "delete-button"] }, { kind: "component", type: OTableMenuComponent, selector: "o-table-menu", inputs: ["select-all-checkbox", "export-button", "columns-visibility-button", "show-configuration-option", "show-filter-option", "show-group-by-option", "show-reset-width-option", "show-report-on-demand-option", "show-charts-on-demand-option"] }, { kind: "component", type: OTableQuickfilterComponent, selector: "o-table-quickfilter", inputs: ["placeholder"], outputs: ["onChange"] }, { kind: "component", type: OTableHeaderComponent, selector: "o-table-header", inputs: ["column"] }, { kind: "component", type: OTableHeaderSelectAllComponent, selector: "o-table-header-select-all", inputs: ["column"] }, { kind: "component", type: OTableSkeletonComponent, selector: "o-table-skeleton" }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }, { kind: "pipe", type: OTableRowClassPipe, name: "oTableRowClass" }], animations: [
+    ], queries: [{ propertyName: "tableRowExpandable", first: true, predicate: OTableRowExpandableComponent, descendants: true }, { propertyName: "quickfilterContentChild", first: true, predicate: ["o-table-quickfilter"], descendants: true, static: true }, { propertyName: "tableColumnSelectAllContentChild", first: true, predicate: OTableColumnSelectAllDirective, descendants: true }, { propertyName: "contextMenuContentChild", first: true, predicate: OTableContextMenuComponent, descendants: true, static: true }, { propertyName: "tableOptions", predicate: OTableOptionComponent }, { propertyName: "tableButtons", predicate: OTableButtonComponent }, { propertyName: "exportOptsTemplate", predicate: OTableExportButtonComponent }], viewQueries: [{ propertyName: "oMatSort", first: true, predicate: OMatSort, descendants: true }, { propertyName: "cdkVirtualScrollViewport", first: true, predicate: ["virtualScrollViewPort"], descendants: true }, { propertyName: "spinnerContainer", first: true, predicate: ["spinnerContainer"], descendants: true, read: ElementRef }, { propertyName: "tableBodyEl", first: true, predicate: ["tableBody"], descendants: true }, { propertyName: "tableHeaderEl", first: true, predicate: ["tableHeader"], descendants: true, read: ElementRef }, { propertyName: "tableToolbarEl", first: true, predicate: ["tableToolbar"], descendants: true, read: ElementRef }, { propertyName: "matTable", first: true, predicate: MatTable, descendants: true }, { propertyName: "oTableMenu", first: true, predicate: ["tableMenu"], descendants: true }, { propertyName: "rows", predicate: MatRow, descendants: true }, { propertyName: "tooltip", predicate: MatTooltip, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"o-table-container\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\" [style.display]=\"isVisible()? '' : 'none'\"\n  [class.block-events]=\"loadingService.isProcessing$ | async\">\n  <o-data-toolbar #tableToolbar *ngIf=\"hasControls()\" [title]=\"title\" [show-title]=\"showTitle\" class=\"o-table-toolbar\">\n    <ng-container o-data-toolbar-projection-start>\n      <o-table-buttons #tableButtons [insert-button]=\"insertButton\" [refresh-button]=\"refreshButton\" [delete-button]=\"showDeleteButton\">\n        <ng-content select=\"o-table-button\"></ng-content>\n      </o-table-buttons>\n    </ng-container>\n    <ng-content select=\"[o-table-toolbar][position=start]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-content select=\"[o-table-toolbar][position=end]\" ngProjectAs=\"[o-data-toolbar-custom-projection-end]\">\n    </ng-content>\n    <ng-content select=\"[o-table-toolbar]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-container o-data-toolbar-projection-end>\n      <ng-container *ngIf=\"quickfilterContentChild; else defaultQuickFilter\">\n        <ng-content select=\"o-table-quickfilter\"></ng-content>\n      </ng-container>\n      <ng-template #defaultQuickFilter>\n        <ng-container *ngIf=\"quickFilter\">\n          <o-table-quickfilter [placeholder]=\"quickFilterPlaceholder\" (onChange)=\"tableQuickFilterChanged($event)\">\n          </o-table-quickfilter>\n        </ng-container>\n      </ng-template>\n      <button type=\"button\" *ngIf=\"showTableMenuButton\" mat-icon-button class=\"o-table-menu-button\" [matMenuTriggerFor]=\"tableMenu.matMenu\"\n        (click)=\"$event.stopPropagation()\">\n        <mat-icon svgIcon=\"ontimize:more_vert\"></mat-icon>\n      </button>\n      <o-table-menu #tableMenu [select-all-checkbox]=\"selectAllCheckbox\" [export-button]=\"exportButton\"\n        [columns-visibility-button]=\"columnsVisibilityButton\" [show-configuration-option]=\"showConfigurationOption\"\n        [show-filter-option]=\"showFilterOption\" [show-report-on-demand-option]=\"showReportOnDemandOption\"\n        [show-charts-on-demand-option]=\"showChartsOnDemandOption\" [show-reset-width-option]=\"showResetWidthOption\" [show-group-by-option]=\"groupable\">\n        <ng-content select=\"o-table-option\"></ng-content>\n      </o-table-menu>\n    </ng-container>\n  </o-data-toolbar>\n\n  <div #tableBody class=\"o-table-body o-scroll\" [class.horizontal-scroll]=\"horizontalScroll\" [class.scrolled]=\"horizontalScrolled\"\n    [ngStyle]=\"{'visibility': spinnerContainer ? 'hidden' : 'visible'}\">\n    <ng-container *ngIf=\"!enabledVirtualScroll; else tableWithVirtualScroll\">\n      <div class=\"o-table-overflow o-scroll\">\n        <ng-template *ngTemplateOutlet=\"table\"></ng-template>\n      </div>\n    </ng-container>\n    <ng-template #tableWithVirtualScroll>\n      <cdk-virtual-scroll-viewport #virtualScrollViewPort fxFlex>\n        <ng-template *ngTemplateOutlet=\"table\"></ng-template>\n      </cdk-virtual-scroll-viewport>\n    </ng-template>\n  </div>\n  <!--TABLE PAGINATOR-->\n  <mat-paginator *ngIf=\"paginator\" #matpaginator [length]=\"dataSource?.resultsLength\" [pageIndex]=\"paginator.pageIndex\" [pageSize]=\"queryRows\"\n    [pageSizeOptions]=\"paginator.pageSizeOptions\" (page)=\"onChangePage($event)\" [showFirstLastButtons]=\"paginator.showFirstLastButtons\"\n    [ngStyle]=\"{'visibility': spinnerContainer ? 'hidden' : 'visible'}\">\n  </mat-paginator>\n\n  <!--LOADING-->\n  <div #spinnerContainer *ngIf=\"showLoading | async\" fxLayout=\"column\" fxLayoutAlign=\"center center\" [ngStyle]=\"{'top.px': toolBarHeight}\"\n    class=\"spinner-container\" [class.spinner-container-scrollable]=\"loadingScroll | async\">\n    <o-table-skeleton></o-table-skeleton>\n  </div>\n\n  <!-- Disable blocker -->\n  <div *ngIf=\"!enabled\" class=\"o-table-disabled-blocker\"></div>\n</div>\n\n<ng-template #table>\n  <table mat-table #table [class.autoadjusted]=\"autoAdjust\" [trackBy]=\"getTrackByFunction()\" [dataSource]=\"dataSource\" oMatSort\n    [oMatSortColumns]=\"sortColArray\" [ngClass]=\"rowHeightObservable | async\" (cdkObserveContent)=\"projectContentChanged()\"\n    oTableExpandedFooter [oTableExpandedFooterColspan]=\"visibleColArray.length\"\n    [multiTemplateDataRows]=\"showExpandableRow()\" aria-describedby=\"ontimize-web table\">\n\n    <!--Checkbox Column -->\n    <ng-container [matColumnDef]=\"oTableOptions.selectColumn.name\" *ngIf=\"oTableOptions.selectColumn.visible\">\n      <ng-container *ngIf=\"!tableColumnSelectAllContentChild; else customHeaderSelectAllTemplate\">\n        <th mat-header-cell *matHeaderCellDef>\n          <div class=\"content\" *ngIf=\"isSelectionModeMultiple()\">\n            <o-table-header-select-all [column]=\"oTableOptions.selectColumn\"></o-table-header-select-all>\n          </div>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-checkbox name=\"id[]\" (click)=\"$event.stopPropagation()\" [disabled]=\"isDisableCheckbox(row)\"\n            (change)=\"selectionCheckboxToggle($event, row)\" [checked]=\"isRowSelected(row)\">\n          </mat-checkbox>\n        </td>\n      </ng-container>\n      <ng-template #customHeaderSelectAllTemplate>\n        <th mat-header-cell *matHeaderCellDef [class.resizable]=\"resizable\" class=\"mat-header-select-all-with-title o-center\"\n          [style.width]=\"oTableOptions.selectColumn.width\" [style.min-width]=\"getMinWidthColumn(oTableOptions.selectColumn)\"\n          [style.max-width]=\"oTableOptions.selectColumn.maxWidth\">\n          <div class=\"content\">\n            <o-table-header-select-all [column]=\"oTableOptions.selectColumn\"></o-table-header-select-all>\n          </div>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"o-center\" [style.width]=\"oTableOptions.selectColumn.width\"\n          [style.min-width]=\"getMinWidthColumn(oTableOptions.selectColumn)\" [style.max-width]=\"oTableOptions.selectColumn.maxWidth\">\n          <mat-checkbox name=\"id[]\" (click)=\"$event.stopPropagation()\" [disabled]=\"isDisableCheckbox(row)\"\n            (change)=\"selectionCheckboxToggle($event, row)\" [checked]=\"isRowSelected(row)\">\n          </mat-checkbox>\n        </td>\n      </ng-template>\n\n\n      <td mat-footer-cell *matFooterCellDef></td>\n    </ng-container>\n\n    <!--Expandable Column -->\n    <ng-container [matColumnDef]=\"oTableOptions.expandableColumn.name\" *ngIf=\"isColumnExpandable()\">\n      <th mat-header-cell *matHeaderCellDef>\n        {{ oTableOptions.expandableColumn.title }}\n      </th>\n      <td mat-cell *matCellDef=\"let row;let rowIndex = dataIndex\">\n        <mat-icon *ngIf=\"showExpandableIcon(row, rowIndex) | async\" (click)=\"toggleRowExpandable(row, $event)\"\n          (keydown)=\"toggleRowExpandable(row, $event)\">\n          <ng-container *ngIf=\"isExpanded(row)\">{{ tableRowExpandable.iconCollapse }}</ng-container>\n          <ng-container *ngIf=\"!isExpanded(row)\">{{ tableRowExpandable.iconExpand }}</ng-container>\n        </mat-icon>\n      </td>\n    </ng-container>\n\n    <!-- Generic column definition -->\n    <ng-container *ngFor=\"let column of oTableOptions.columns\" [matColumnDef]=\"column.name\">\n      <!--Define header-cell-->\n\n      <th mat-header-cell *matHeaderCellDef [ngClass]=\"getTitleAlignClass(column)\" [class.resizable]=\"resizable\" [style.width]=\"column.width\"\n        [style.min-width]=\"getMinWidthColumn(column)\" [style.max-width]=\"column.maxWidth\">\n\n        <div class=\"content\">\n          <o-table-header [column]=\"column\" [column-filters]=\"columnFilters$ | async\" ></o-table-header>\n        </div>\n      </th>\n\n\n      <!--Define mat-cell-->\n      <ng-container *ngIf=\"!table.multiTemplateDataRows; else cellTemplateMultiTemplateDataRows\">\n        <td #cell mat-cell *matCellDef=\"let row;let rowIndex = index \" [ngClass]=\"[column.className, getCellAlignClass(column)]\"\n          (click)=\"handleClick(row, column, rowIndex, cell, $event)\" (dblclick)=\"handleDoubleClick(row, column, rowIndex, cell, $event)\"\n          [class.empty-cell]=\"isEmpty(row[column.name])\" [matTooltipDisabled]=\"!column.hasTooltip()\" [matTooltip]=\"column.getTooltip(row)\"\n          matTooltipPosition=\"below\" matTooltipShowDelay=\"750\" matTooltipClass=\"o-table-cell-tooltip\"\n          [class.o-mat-cell-multiline]=\"(column.isMultiline | async)\" [oContextMenu]=\"tableContextMenu\"\n          [oContextMenuData]=\"{ cellName:column.name, rowValue:row, rowIndex:rowIndex}\" [style.width]=\"column.width\"\n          [style.min-width]=\"getMinWidthColumn(column)\" [style.max-width]=\"column.maxWidth\"\n          [class.o-table-editing-cell]=\"isRowSelected(row) && column.editing\">\n          <ng-container *ngTemplateOutlet=\"cellRenderer;context:{column:column,row:row}\"></ng-container>\n        </td>\n      </ng-container>\n      <ng-template #cellTemplateMultiTemplateDataRows>\n        <td #cell mat-cell *matCellDef=\"let row;let rowIndex = dataIndex \" [ngClass]=\"[column.className, getCellAlignClass(column)]\"\n          (click)=\"handleClick(row, column, rowIndex, cell, $event)\" (dblclick)=\"handleDoubleClick(row, column, rowIndex, cell, $event)\"\n          [class.empty-cell]=\"isEmpty(row[column.name])\" [matTooltipDisabled]=\"!column.hasTooltip()\" [matTooltip]=\"column.getTooltip(row)\"\n          matTooltipPosition=\"below\" matTooltipShowDelay=\"750\" matTooltipClass=\"o-table-cell-tooltip\"\n          [class.o-mat-cell-multiline]=\"(column.isMultiline | async)\" [oContextMenu]=\"tableContextMenu\"\n          [oContextMenuData]=\"{ cellName:column.name, rowValue:row, rowIndex:rowIndex}\" [style.width]=\"column.width\"\n          [style.min-width]=\"getMinWidthColumn(column)\" [style.max-width]=\"column.maxWidth\"\n          [class.o-table-editing-cell]=\"isRowSelected(row) && column.editing\">\n          <ng-container *ngTemplateOutlet=\"cellRenderer;context:{column:column,row:row}\"></ng-container>\n\n        </td>\n      </ng-template>\n      <!--Define mat-footer-cell-->\n      <ng-container *ngIf=\"showTotals | async\">\n        <td mat-footer-cell *matFooterCellDef [ngClass]=\"column.className\">\n          <div class=\"title\" *ngIf=\"column.aggregate && column.aggregate.title\">\n            {{ column.aggregate.title | oTranslate }}\n          </div>\n          <ng-container *ngIf=\"!column.renderer || column.aggregate?.operator === 'count'; else rendererTemplate\">\n            {{ dataSource.getAggregateData(column) }}\n          </ng-container>\n          <ng-template #rendererTemplate>\n            <ng-template *ngIf=\"column.renderer && column.aggregate\" [ngTemplateOutlet]=\"column.renderer.templateref\"\n              [ngTemplateOutletContext]=\"{cellvalue: dataSource.getAggregateData(column)}\">\n            </ng-template>\n          </ng-template>\n        </td>\n      </ng-container>\n\n    </ng-container>\n\n    <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n    <ng-container *ngIf=\"hasExpandedRow\">\n      <ng-container matColumnDef=\"expandedDetail\">\n        <td mat-cell *matCellDef=\"let row;let rowIndex= dataIndex\" [attr.colspan]=\"oTableOptions.visibleColumns.length\">\n          <div [ngClass]=\"getExpandedRowContainerClass(rowIndex)\" [@detailExpand]=\"getStateExpand(row)\">\n          </div>\n        </td>\n      </ng-container>\n    </ng-container>\n\n    <!--FOOTER-INSERTABLE-->\n    <ng-container *ngIf=\"showLastInsertableRow && oTableInsertableRowComponent\">\n      <ng-container [matColumnDef]=\"oTableOptions.selectColumn.name + getSuffixColumnInsertable()\" *ngIf=\"oTableOptions.selectColumn.visible\">\n        <td mat-footer-cell *matFooterCellDef>\n        </td>\n      </ng-container>\n      <ng-container *ngFor=\"let column of oTableOptions.columns\" [matColumnDef]=\"column.name+ getSuffixColumnInsertable()\">\n\n        <td mat-footer-cell *matFooterCellDef [ngClass]=\"[column.className, getCellAlignClass(column)]\">\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && !oTableInsertableRowComponent.useCellEditor(column)\">\n            <mat-form-field class=\"insertable-form-field o-table-cell-editor-text o-table-cell-editor\" [hideRequiredMarker]=\"false\">\n              <input matInput type=\"text\" [placeholder]=\"oTableInsertableRowComponent.getPlaceholder(column)\" [id]=\"column.attr\"\n                [formControl]=\"oTableInsertableRowComponent.getControl(column)\" [required]=\"oTableInsertableRowComponent.isColumnRequired(column)\">\n              <mat-error *oMatError=\"oTableInsertableRowComponent.columnHasError(column, 'required')\">\n                {{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}\n              </mat-error>\n            </mat-form-field>\n          </ng-container>\n\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && oTableInsertableRowComponent.useCellEditor(column)\">\n            <ng-template [ngTemplateOutlet]=\"oTableInsertableRowComponent.columnEditors[column.attr].templateref\"\n              [ngTemplateOutletContext]=\"{ rowvalue: oTableInsertableRowComponent.rowData }\">\n            </ng-template>\n          </ng-container>\n        </td>\n      </ng-container>\n\n    </ng-container>\n\n    <ng-container *ngIf=\"showFirstInsertableRow && oTableInsertableRowComponent\">\n      <ng-container [matColumnDef]=\"getColumnInsertable(oTableOptions.selectColumn.name)\" *ngIf=\"oTableOptions.selectColumn.visible\">\n        <td mat-header-cell *matHeaderCellDef>\n        </td>\n      </ng-container>\n      <ng-container *ngFor=\"let column of oTableOptions.columns\" [matColumnDef]=\"getColumnInsertable(column.name)\">\n\n        <td mat-header-cell *matHeaderCellDef [ngClass]=\"[column.className, getCellAlignClass(column)]\">\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && !oTableInsertableRowComponent.useCellEditor(column)\">\n            <mat-form-field class=\"insertable-form-field\" [hideRequiredMarker]=\"false\">\n              <input matInput type=\"text\" [placeholder]=\"oTableInsertableRowComponent.getPlaceholder(column)\" [id]=\"column.attr\"\n                [formControl]=\"oTableInsertableRowComponent.getControl(column)\" [required]=\"oTableInsertableRowComponent.isColumnRequired(column)\">\n              <mat-error *oMatError=\"oTableInsertableRowComponent.columnHasError(column, 'required')\">\n                {{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}\n              </mat-error>\n            </mat-form-field>\n          </ng-container>\n\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && oTableInsertableRowComponent.useCellEditor(column)\">\n            <ng-template [ngTemplateOutlet]=\"oTableInsertableRowComponent.columnEditors[column.attr].templateref\"\n              [ngTemplateOutletContext]=\"{ rowvalue: oTableInsertableRowComponent.rowData }\">\n            </ng-template>\n          </ng-container>\n        </td>\n      </ng-container>\n\n    </ng-container>\n\n    <!-- Definition column group header -->\n    <ng-container *ngFor=\"let column of groupingHeadersRows; let i = index\" [matColumnDef]=\"column\">\n      <td mat-cell *matCellDef=\"let group\" class=\"grouping-row\" [oContextMenu]=\"tableContextMenu\"\n        [oContextMenuData]=\"{ cellName:column, rowValue:group, rowIndex:i}\" [ngClass]=\"getGroupHeaderCellAlignClass(column)\">\n        <div *ngIf=\"i===0\" class=\"grouping-title-wrapper\" [ngStyle]=\"{'padding-left': 20*(group.level-1)+'px'}\">\n          <mat-icon>{{ group.expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\n          {{ group.title }}\n        </div>\n        <div class=\"grouping-aggregate\" *ngIf=\"group.hasActiveAggregate(visibleColArray[i])\">\n          {{ group.getColumnActiveAggregateTitle(visibleColArray[i]) | oTranslate }} :\n          <ng-container *ngIf=\"!getOColumnFromGroupHeaderColumn(column).renderer\">\n            {{ group.getColumnAggregateValue(visibleColArray[i])}}\n          </ng-container>\n          <ng-container *ngIf=\"getOColumnFromGroupHeaderColumn(column).renderer\">\n            <ng-template\n              *ngTemplateOutlet=\"getOColumnFromGroupHeaderColumn(column).renderer?.templateref; context:{ cellvalue:  group.getColumnAggregateValue(visibleColArray[i]) }\">\n            </ng-template>\n          </ng-container>\n        </div>\n      </td>\n    </ng-container>\n\n    <ng-container matColumnDef=\"position\">\n      <td mat-cell *matCellDef=\"let row\"> {{row}} </td>\n    </ng-container>\n\n    <tr #tableHeader mat-header-row *matHeaderRowDef=\"oTableOptions.visibleColumns; sticky: fixedHeader\"></tr>\n\n    <ng-container *ngIf=\"!table.multiTemplateDataRows; else rowTemplateMultiTemplateDataRows\">\n      <tr mat-row oTableRow *matRowDef=\"let row; columns: oTableOptions.visibleColumns; when:isNotGroup; let rowIndex = index\"\n        [class.selected]=\"isRowSelected(row)\" [ngClass]=\"row | oTableRowClass: rowIndex: rowClass\">\n      </tr>\n    </ng-container>\n    <ng-template #rowTemplateMultiTemplateDataRows>\n      <tr mat-row oTableRow *matRowDef=\"let row; columns: oTableOptions.visibleColumns; when:isNotGroup; let rowIndex = dataIndex\"\n        [class.selected]=\"isRowSelected(row)\" [ngClass]=\"row | oTableRowClass: rowIndex: rowClass\">\n      </tr>\n    </ng-template>\n\n    <!-- Row Group header -->\n    <tr mat-row *matRowDef=\"let row; columns: groupingHeadersRows; when:isGroup\" (click)=\"groupHeaderClick(row)\"\n      [ngClass]=\"getClassNameGroupHeader(row)\">\n    </tr>\n\n    <!-- Expanded detail row-->\n    <ng-container *ngIf=\"hasExpandedRow\">\n      <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"o-table-row-expanded\"></tr>\n    </ng-container>\n\n    <ng-container *ngIf=\"showLastInsertableRow\">\n      <tr mat-footer-row *matFooterRowDef=\"oTableOptions.columnsInsertables; sticky: true\"\n        (keyup)=\"oTableInsertableRowComponent.handleKeyboardEvent($event)\" class=\"o-table-insertable\"></tr>\n    </ng-container>\n    <ng-container *ngIf=\"showFirstInsertableRow\">\n      <tr mat-header-row *matHeaderRowDef=\"oTableOptions.columnsInsertables; sticky: true\"\n        (keyup)=\"oTableInsertableRowComponent.handleKeyboardEvent($event)\" class=\"o-table-insertable\"> </tr>\n    </ng-container>\n    <ng-container *ngIf=\"showTotals | async\">\n      <tr mat-footer-row *matFooterRowDef=\"oTableOptions.visibleColumns; sticky: true\" class=\"o-table-aggregate\">\n      </tr>\n    </ng-container>\n  </table>\n\n</ng-template>\n\n<ng-container *ngIf=\"!contextMenuContentChild && contextMenu\">\n  <o-table-context-menu [insert]=\"insertButton\" [edit]=\"editionMode !== EDIT_MODE_NONE\" [view-detail]=\"detailMode !== DETAIL_MODE_NONE\"\n    [refresh]=\"refreshButton\" [delete]=\"deleteButton\" [filter]=\"showFilterOption\" [group-by-row]=\"groupable\">\n  </o-table-context-menu>\n</ng-container>\n\n<ng-template #cellRenderer let-row=\"row\" let-column=\"column\">\n  <div class=\"content\">\n\n    <ng-container [ngSwitch]=\"true\">\n      <ng-container *ngSwitchCase=\"column.renderer != null && (!column.editing || column.editing && !isRowSelected(row))\">\n        <ng-template *ngTemplateOutlet=\"column.renderer?.templateref; context:{ cellvalue: row[column.name], rowvalue:row }\">\n        </ng-template>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"isRowSelected(row) && column.editing\">\n        <ng-template *ngTemplateOutlet=\"column.editor?.templateref; context:{ cellvalue: row[column.name], rowvalue:row }\">\n        </ng-template>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"column.type === 'editButtonInRow' || column.type === 'detailButtonInRow'\">\n        <div fxLayoutAlign=\"center center\" class=\"o-action-cell-renderer\" (click)=\"onDetailButtonClick(column, row, $event)\">\n          <mat-icon>{{ getDetailButtonIcon(column) }}</mat-icon>\n        </div>\n      </ng-container>\n      <ng-container *ngSwitchDefault>{{ row[column.name] }}</ng-container>\n    </ng-container>\n\n  </div>\n</ng-template>\n", styles: [".o-table{height:100%;max-height:100%;width:100%}.o-table.o-table-disabled{opacity:.4}.o-table .o-table-container{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:flex-start;align-content:stretch;min-width:100%;min-height:400px;position:relative;padding:0 .5%}.o-table .o-table-container .o-table-body{display:flex;flex:1 1 auto}.o-table .o-table-container .o-table-body .o-table-overflow{overflow-y:auto;overflow-x:hidden;min-width:100%}.o-table .o-table-container .o-table-body .cdk-virtual-scrollable{overflow-x:hidden}.o-table .o-table-container .o-table-body.horizontal-scroll .cdk-virtual-scrollable{overflow-x:visible;contain:none}.o-table .o-table-container .o-table-body.horizontal-scroll .o-table-overflow{overflow-x:auto}.o-table .o-table-container .o-table-body thead .mat-mdc-header-row th:last-child .o-table-column-resizer{display:none}.o-table .o-table-container.block-events{pointer-events:none}.o-table .o-table-container .o-table-toolbar{height:40px}.o-table .o-table-container .o-table-toolbar>div{max-height:100%}.o-table .o-table-container .o-table-toolbar .buttons{margin:0 10px 0 4px}.o-table .o-table-container .o-table-body{max-width:100%;height:100%;overflow:hidden;position:relative}.o-table .o-table-container .o-table-body .spinner-container{position:absolute;top:0;left:0;right:0;bottom:0;z-index:500;visibility:visible;opacity:1;transition:opacity .25s linear}.o-table .o-table-container .o-table-body.horizontal-scroll{overflow-x:auto;padding-bottom:16px}.o-table .o-table-container .o-table-body.horizontal-scroll .mat-mdc-header-cell{width:150px}.o-table .o-table-container .o-table-body .o-table-no-results{cursor:default;text-align:center}.o-table .o-table-container .o-table-body .o-table-no-results td{text-align:center}.o-table .o-table-container .mat-mdc-table{table-layout:fixed;width:100%}.o-table .o-table-container .mat-mdc-table.autoadjusted{table-layout:auto}.o-table .o-table-container .mat-mdc-table td .content,.o-table .o-table-container .mat-mdc-table th .content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table.small .mat-mdc-header-row .mat-mdc-cell .image-avatar,.o-table .o-table-container .mat-mdc-table.small .mat-mdc-header-row .mat-mdc-header-cell .image-avatar,.o-table .o-table-container .mat-mdc-table.small .mat-mdc-row .mat-mdc-cell .image-avatar,.o-table .o-table-container .mat-mdc-table.small .mat-mdc-row .mat-mdc-header-cell .image-avatar{width:24px;height:24px}.o-table .o-table-container .mat-mdc-table.large .column-filter-icon{margin-top:4px}.o-table .o-table-container .mat-mdc-table.large .mat-sort-header-arrow{margin-top:7px}.o-table .o-table-container .mat-mdc-table tr.mat-mdc-row.o-table-row-expanded{height:0}.o-table .o-table-container .mat-mdc-table tr.o-table-insertable td{height:1px}.o-table .o-table-container .mat-mdc-table .mat-mdc-footer-cell{padding:0 12px}.o-table .o-table-container .mat-mdc-table .mat-mdc-footer-cell.o-start{text-align:start}.o-table .o-table-container .mat-mdc-table .mat-mdc-footer-cell.o-center{text-align:center}.o-table .o-table-container .mat-mdc-table .mat-mdc-footer-cell.o-end{text-align:end}.o-table .o-table-container .mat-mdc-table .mat-mdc-row{box-sizing:border-box;transition:background-color .2s;position:relative;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell{padding:0 12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.grouping-row,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.grouping-row{padding-top:30px;cursor:pointer}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.grouping-row .grouping-title-wrapper,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.grouping-row .grouping-title-wrapper{position:absolute;width:100%;left:0;top:0;text-align:left}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.grouping-row .grouping-aggregate,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.grouping-row .grouping-aggregate{font-weight:700;font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-bottom:8px}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.empty-cell,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.empty-cell{min-height:16px}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell .action-cell-renderer,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell .action-cell-renderer{cursor:pointer}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-start,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-start{text-align:start}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-center,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-center{text-align:center}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-end,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-end{text-align:end}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell *,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell *{vertical-align:middle}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-mat-cell-multiline:not(.mat-mdc-header-cell),.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-mat-cell-multiline:not(.mat-mdc-header-cell){padding:6px 12px}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-mat-cell-multiline .content,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-mat-cell-multiline .content{overflow:initial;white-space:normal;text-overflow:unset}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell .image-avatar,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell .image-avatar{width:32px;height:32px;margin:1px auto;overflow:hidden;border-radius:50%;position:relative;z-index:1}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell .image-avatar img,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell .image-avatar img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;max-width:inherit;max-height:inherit}.o-table .o-table-container .mat-mdc-table .o-action-cell-renderer{display:inline-block;cursor:pointer}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell{overflow:hidden;position:relative;box-sizing:border-box;padding:0 12px;vertical-align:middle}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select.mat-header-select-all-with-title{padding-right:12px}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell:first-of-type{padding-left:0}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell:not(.o-column-image){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell:has(.o-table-column-resizer){padding-right:0}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .o-table-header-indicator-numbered{font-size:8px;position:absolute;text-align:center;display:inline-block;width:18px;height:18px;line-height:18px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;bottom:-10px;right:-9px}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .column-filter-icon{cursor:pointer;font-size:18px;width:18px;height:18px;line-height:1}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .mat-sort-header-button{flex:1;display:block;place-content:center}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .header-title-container{cursor:default;min-height:20px}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .header-title-container,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .mat-sort-header-button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.start,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.start .mat-sort-header-button{text-align:left}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.center,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.center .mat-sort-header-button{text-align:center}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.end,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.end .mat-sort-header-button{text-align:right}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-select,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select{box-sizing:content-box;overflow:initial}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-select:not(.mat-header-select-all-with-title),.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select:not(.mat-header-select-all-with-title){width:30px}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-select .mat-checkbox-layout,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select .mat-checkbox-layout{text-overflow:ellipsis;overflow:hidden;display:inline}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-expandable,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-expandable{width:40px;box-sizing:content-box;padding:0 0 0 24px;overflow:initial}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell .row-container-expanded{overflow:hidden;display:flex}.o-table .o-table-container .o-table-disabled-blocker{bottom:0;left:0;position:absolute;right:0;top:0;z-index:100}.o-table .spinner-container{position:absolute;top:0;left:0;right:0;bottom:0;z-index:500;visibility:visible;opacity:1;transition:opacity .25s linear}.o-table .spinner-container-scrollable{position:relative}.o-table.o-table-fixed{display:flex}.o-table.o-table-fixed .o-table-container{display:flex;flex-direction:column}.o-table.o-table-fixed .o-table-body{display:flex;flex:1}.o-table.o-table-fixed .o-table-body .o-table-overflow{flex:1;overflow-y:auto}.mat-mdc-tooltip.o-table-cell-tooltip{word-wrap:break-word;overflow:hidden;min-width:140px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i4$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i4$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "directive", type: i3$3.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: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: OMatErrorDirective, selector: "[oMatError]", inputs: ["oMatError"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i14.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i14.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i14.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i14.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i14.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i14.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i14.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i14.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i14.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i14.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i14.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i14.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i14.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i14.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i11$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i7$4.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: OContextMenuDirective, selector: "[oContextMenu]", inputs: ["oContextMenu", "oContextMenuData"] }, { kind: "directive", type: i18.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }, { kind: "directive", type: OMatSort, selector: "[oMatSort]", inputs: ["oMatSortDisabled", "oMatSortColumns"], outputs: ["matSortChange"], exportAs: ["oMatSort"] }, { kind: "component", type: ODataToolbarComponent, selector: "o-data-toolbar", inputs: ["show-title", "title"] }, { kind: "component", type: OTableContextMenuComponent, selector: "o-table-context-menu", inputs: ["context-menu", "insert", "edit", "view-detail", "copy", "select-all", "refresh", "delete", "filter", "group-by-row"] }, { kind: "directive", type: OTableRowDirective, selector: "[oTableRow]" }, { kind: "directive", type: OTableExpandedFooterDirective, selector: "[oTableExpandedFooter]", inputs: ["oTableExpandedFooterColspan"] }, { kind: "component", type: OTableButtonsComponent, selector: "o-table-buttons", inputs: ["insert-button", "refresh-button", "delete-button"] }, { kind: "component", type: OTableMenuComponent, selector: "o-table-menu", inputs: ["select-all-checkbox", "export-button", "columns-visibility-button", "show-configuration-option", "show-filter-option", "show-group-by-option", "show-reset-width-option", "show-report-on-demand-option", "show-charts-on-demand-option"] }, { kind: "component", type: OTableQuickfilterComponent, selector: "o-table-quickfilter", inputs: ["placeholder"], outputs: ["onChange"] }, { kind: "component", type: OTableHeaderComponent, selector: "o-table-header", inputs: ["column", "column-filters"] }, { kind: "component", type: OTableHeaderSelectAllComponent, selector: "o-table-header-select-all", inputs: ["column", "column-filters"] }, { kind: "component", type: OTableSkeletonComponent, selector: "o-table-skeleton" }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }, { kind: "pipe", type: OTableRowClassPipe, name: "oTableRowClass" }], animations: [
         trigger('detailExpand', [
             state('collapsed', style({ height: '0px', minHeight: '0' })),
             state('expanded', style({ height: '*' })),
@@ -36851,7 +36915,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         '[class.o-table-fixed]': 'fixedHeader',
                         '[class.o-table-disabled]': '!enabled',
                         '(document:click)': 'handleDOMClick($event)'
-                    }, template: "<div class=\"o-table-container\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\" [style.display]=\"isVisible()? '' : 'none'\"\n  [class.block-events]=\"loadingService.isProcessing$ | async\">\n  <o-data-toolbar #tableToolbar *ngIf=\"hasControls()\" [title]=\"title\" [show-title]=\"showTitle\" class=\"o-table-toolbar\">\n    <ng-container o-data-toolbar-projection-start>\n      <o-table-buttons #tableButtons [insert-button]=\"insertButton\" [refresh-button]=\"refreshButton\" [delete-button]=\"showDeleteButton\">\n        <ng-content select=\"o-table-button\"></ng-content>\n      </o-table-buttons>\n    </ng-container>\n    <ng-content select=\"[o-table-toolbar][position=start]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-content select=\"[o-table-toolbar][position=end]\" ngProjectAs=\"[o-data-toolbar-custom-projection-end]\">\n    </ng-content>\n    <ng-content select=\"[o-table-toolbar]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-container o-data-toolbar-projection-end>\n      <ng-container *ngIf=\"quickfilterContentChild; else defaultQuickFilter\">\n        <ng-content select=\"o-table-quickfilter\"></ng-content>\n      </ng-container>\n      <ng-template #defaultQuickFilter>\n        <ng-container *ngIf=\"quickFilter\">\n          <o-table-quickfilter (onChange)=\"tableQuickFilterChanged($event)\">\n          </o-table-quickfilter>\n        </ng-container>\n      </ng-template>\n      <button type=\"button\" *ngIf=\"showTableMenuButton\" mat-icon-button class=\"o-table-menu-button\" [matMenuTriggerFor]=\"tableMenu.matMenu\"\n        (click)=\"$event.stopPropagation()\">\n        <mat-icon svgIcon=\"ontimize:more_vert\"></mat-icon>\n      </button>\n      <o-table-menu #tableMenu [select-all-checkbox]=\"selectAllCheckbox\" [export-button]=\"exportButton\"\n        [columns-visibility-button]=\"columnsVisibilityButton\" [show-configuration-option]=\"showConfigurationOption\"\n        [show-filter-option]=\"showFilterOption\" [show-report-on-demand-option]=\"showReportOnDemandOption\"\n        [show-charts-on-demand-option]=\"showChartsOnDemandOption\" [show-reset-width-option]=\"showResetWidthOption\" [show-group-by-option]=\"groupable\">\n        <ng-content select=\"o-table-option\"></ng-content>\n      </o-table-menu>\n    </ng-container>\n  </o-data-toolbar>\n\n  <div #tableBody class=\"o-table-body o-scroll\" [class.horizontal-scroll]=\"horizontalScroll\" [class.scrolled]=\"horizontalScrolled\"\n    [ngStyle]=\"{'visibility': spinnerContainer ? 'hidden' : 'visible'}\">\n    <ng-container *ngIf=\"!enabledVirtualScroll; else tableWithVirtualScroll\">\n      <div class=\"o-table-overflow o-scroll\">\n        <ng-template *ngTemplateOutlet=\"table\"></ng-template>\n      </div>\n    </ng-container>\n    <ng-template #tableWithVirtualScroll>\n      <cdk-virtual-scroll-viewport #virtualScrollViewPort fxFlex>\n        <ng-template *ngTemplateOutlet=\"table\"></ng-template>\n      </cdk-virtual-scroll-viewport>\n    </ng-template>\n  </div>\n  <!--TABLE PAGINATOR-->\n  <mat-paginator *ngIf=\"paginator\" #matpaginator [length]=\"dataSource?.resultsLength\" [pageIndex]=\"paginator.pageIndex\" [pageSize]=\"queryRows\"\n    [pageSizeOptions]=\"paginator.pageSizeOptions\" (page)=\"onChangePage($event)\" [showFirstLastButtons]=\"paginator.showFirstLastButtons\"\n    [ngStyle]=\"{'visibility': spinnerContainer ? 'hidden' : 'visible'}\">\n  </mat-paginator>\n\n  <!--LOADING-->\n  <div #spinnerContainer *ngIf=\"showLoading | async\" fxLayout=\"column\" fxLayoutAlign=\"center center\" [ngStyle]=\"{'top.px': toolBarHeight}\"\n    class=\"spinner-container\" [class.spinner-container-scrollable]=\"loadingScroll | async\">\n    <o-table-skeleton></o-table-skeleton>\n  </div>\n\n  <!-- Disable blocker -->\n  <div *ngIf=\"!enabled\" class=\"o-table-disabled-blocker\"></div>\n</div>\n\n<ng-template #table>\n  <table mat-table #table [class.autoadjusted]=\"autoAdjust\" [trackBy]=\"getTrackByFunction()\" [dataSource]=\"dataSource\" oMatSort\n    [oMatSortColumns]=\"sortColArray\" [ngClass]=\"rowHeightObservable | async\" (cdkObserveContent)=\"projectContentChanged()\"\n    oTableExpandedFooter [oTableExpandedFooterColspan]=\"visibleColArray.length\"\n    [multiTemplateDataRows]=\"showExpandableRow()\" aria-describedby=\"ontimize-web table\">\n\n    <!--Checkbox Column -->\n    <ng-container [matColumnDef]=\"oTableOptions.selectColumn.name\" *ngIf=\"oTableOptions.selectColumn.visible\">\n      <ng-container *ngIf=\"!tableColumnSelectAllContentChild; else customHeaderSelectAllTemplate\">\n        <th mat-header-cell *matHeaderCellDef>\n          <div class=\"content\" *ngIf=\"isSelectionModeMultiple()\">\n            <o-table-header-select-all [column]=\"oTableOptions.selectColumn\"></o-table-header-select-all>\n          </div>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-checkbox name=\"id[]\" (click)=\"$event.stopPropagation()\" [disabled]=\"isDisableCheckbox(row)\"\n            (change)=\"selectionCheckboxToggle($event, row)\" [checked]=\"isRowSelected(row)\">\n          </mat-checkbox>\n        </td>\n      </ng-container>\n      <ng-template #customHeaderSelectAllTemplate>\n        <th mat-header-cell *matHeaderCellDef [class.resizable]=\"resizable\" class=\"mat-header-select-all-with-title o-center\"\n          [style.width]=\"oTableOptions.selectColumn.width\" [style.min-width]=\"getMinWidthColumn(oTableOptions.selectColumn)\"\n          [style.max-width]=\"oTableOptions.selectColumn.maxWidth\">\n          <div class=\"content\">\n            <o-table-header-select-all [column]=\"oTableOptions.selectColumn\"></o-table-header-select-all>\n          </div>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"o-center\" [style.width]=\"oTableOptions.selectColumn.width\"\n          [style.min-width]=\"getMinWidthColumn(oTableOptions.selectColumn)\" [style.max-width]=\"oTableOptions.selectColumn.maxWidth\">\n          <mat-checkbox name=\"id[]\" (click)=\"$event.stopPropagation()\" [disabled]=\"isDisableCheckbox(row)\"\n            (change)=\"selectionCheckboxToggle($event, row)\" [checked]=\"isRowSelected(row)\">\n          </mat-checkbox>\n        </td>\n      </ng-template>\n\n\n      <td mat-footer-cell *matFooterCellDef></td>\n    </ng-container>\n\n    <!--Expandable Column -->\n    <ng-container [matColumnDef]=\"oTableOptions.expandableColumn.name\" *ngIf=\"isColumnExpandable()\">\n      <th mat-header-cell *matHeaderCellDef>\n        {{ oTableOptions.expandableColumn.title }}\n      </th>\n      <td mat-cell *matCellDef=\"let row;let rowIndex = dataIndex\">\n        <mat-icon *ngIf=\"showExpandableIcon(row, rowIndex) | async\" (click)=\"toggleRowExpandable(row, $event)\"\n          (keydown)=\"toggleRowExpandable(row, $event)\">\n          <ng-container *ngIf=\"isExpanded(row)\">{{ tableRowExpandable.iconCollapse }}</ng-container>\n          <ng-container *ngIf=\"!isExpanded(row)\">{{ tableRowExpandable.iconExpand }}</ng-container>\n        </mat-icon>\n      </td>\n    </ng-container>\n\n    <!-- Generic column definition -->\n    <ng-container *ngFor=\"let column of oTableOptions.columns\" [matColumnDef]=\"column.name\">\n      <!--Define header-cell-->\n\n      <th mat-header-cell *matHeaderCellDef [ngClass]=\"getTitleAlignClass(column)\" [class.resizable]=\"resizable\" [style.width]=\"column.width\"\n        [style.min-width]=\"getMinWidthColumn(column)\" [style.max-width]=\"column.maxWidth\">\n\n        <div class=\"content\">\n          <o-table-header [column]=\"column\"></o-table-header>\n        </div>\n      </th>\n\n\n      <!--Define mat-cell-->\n      <ng-container *ngIf=\"!table.multiTemplateDataRows; else cellTemplateMultiTemplateDataRows\">\n        <td #cell mat-cell *matCellDef=\"let row;let rowIndex = index \" [ngClass]=\"[column.className, getCellAlignClass(column)]\"\n          (click)=\"handleClick(row, column, rowIndex, cell, $event)\" (dblclick)=\"handleDoubleClick(row, column, rowIndex, cell, $event)\"\n          [class.empty-cell]=\"isEmpty(row[column.name])\" [matTooltipDisabled]=\"!column.hasTooltip()\" [matTooltip]=\"column.getTooltip(row)\"\n          matTooltipPosition=\"below\" matTooltipShowDelay=\"750\" matTooltipClass=\"o-table-cell-tooltip\"\n          [class.o-mat-cell-multiline]=\"(column.isMultiline | async)\" [oContextMenu]=\"tableContextMenu\"\n          [oContextMenuData]=\"{ cellName:column.name, rowValue:row, rowIndex:rowIndex}\" [style.width]=\"column.width\"\n          [style.min-width]=\"getMinWidthColumn(column)\" [style.max-width]=\"column.maxWidth\"\n          [class.o-table-editing-cell]=\"isRowSelected(row) && column.editing\">\n          <ng-container *ngTemplateOutlet=\"cellRenderer;context:{column:column,row:row}\"></ng-container>\n        </td>\n      </ng-container>\n      <ng-template #cellTemplateMultiTemplateDataRows>\n        <td #cell mat-cell *matCellDef=\"let row;let rowIndex = dataIndex \" [ngClass]=\"[column.className, getCellAlignClass(column)]\"\n          (click)=\"handleClick(row, column, rowIndex, cell, $event)\" (dblclick)=\"handleDoubleClick(row, column, rowIndex, cell, $event)\"\n          [class.empty-cell]=\"isEmpty(row[column.name])\" [matTooltipDisabled]=\"!column.hasTooltip()\" [matTooltip]=\"column.getTooltip(row)\"\n          matTooltipPosition=\"below\" matTooltipShowDelay=\"750\" matTooltipClass=\"o-table-cell-tooltip\"\n          [class.o-mat-cell-multiline]=\"(column.isMultiline | async)\" [oContextMenu]=\"tableContextMenu\"\n          [oContextMenuData]=\"{ cellName:column.name, rowValue:row, rowIndex:rowIndex}\" [style.width]=\"column.width\"\n          [style.min-width]=\"getMinWidthColumn(column)\" [style.max-width]=\"column.maxWidth\"\n          [class.o-table-editing-cell]=\"isRowSelected(row) && column.editing\">\n          <ng-container *ngTemplateOutlet=\"cellRenderer;context:{column:column,row:row}\"></ng-container>\n\n        </td>\n      </ng-template>\n      <!--Define mat-footer-cell-->\n      <ng-container *ngIf=\"showTotals | async\">\n        <td mat-footer-cell *matFooterCellDef [ngClass]=\"column.className\">\n          <div class=\"title\" *ngIf=\"column.aggregate && column.aggregate.title\">\n            {{ column.aggregate.title | oTranslate }}\n          </div>\n          <ng-container *ngIf=\"!column.renderer || column.aggregate?.operator === 'count'; else rendererTemplate\">\n            {{ dataSource.getAggregateData(column) }}\n          </ng-container>\n          <ng-template #rendererTemplate>\n            <ng-template *ngIf=\"column.renderer && column.aggregate\" [ngTemplateOutlet]=\"column.renderer.templateref\"\n              [ngTemplateOutletContext]=\"{cellvalue: dataSource.getAggregateData(column)}\">\n            </ng-template>\n          </ng-template>\n        </td>\n      </ng-container>\n\n    </ng-container>\n\n    <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n    <ng-container *ngIf=\"hasExpandedRow\">\n      <ng-container matColumnDef=\"expandedDetail\">\n        <td mat-cell *matCellDef=\"let row;let rowIndex= dataIndex\" [attr.colspan]=\"oTableOptions.visibleColumns.length\">\n          <div [ngClass]=\"getExpandedRowContainerClass(rowIndex)\" [@detailExpand]=\"getStateExpand(row)\">\n          </div>\n        </td>\n      </ng-container>\n    </ng-container>\n\n    <!--FOOTER-INSERTABLE-->\n    <ng-container *ngIf=\"showLastInsertableRow && oTableInsertableRowComponent\">\n      <ng-container [matColumnDef]=\"oTableOptions.selectColumn.name + getSuffixColumnInsertable()\" *ngIf=\"oTableOptions.selectColumn.visible\">\n        <td mat-footer-cell *matFooterCellDef>\n        </td>\n      </ng-container>\n      <ng-container *ngFor=\"let column of oTableOptions.columns\" [matColumnDef]=\"column.name+ getSuffixColumnInsertable()\">\n\n        <td mat-footer-cell *matFooterCellDef [ngClass]=\"[column.className, getCellAlignClass(column)]\">\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && !oTableInsertableRowComponent.useCellEditor(column)\">\n            <mat-form-field class=\"insertable-form-field o-table-cell-editor-text o-table-cell-editor\" [hideRequiredMarker]=\"false\">\n              <input matInput type=\"text\" [placeholder]=\"oTableInsertableRowComponent.getPlaceholder(column)\" [id]=\"column.attr\"\n                [formControl]=\"oTableInsertableRowComponent.getControl(column)\" [required]=\"oTableInsertableRowComponent.isColumnRequired(column)\">\n              <mat-error *oMatError=\"oTableInsertableRowComponent.columnHasError(column, 'required')\">\n                {{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}\n              </mat-error>\n            </mat-form-field>\n          </ng-container>\n\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && oTableInsertableRowComponent.useCellEditor(column)\">\n            <ng-template [ngTemplateOutlet]=\"oTableInsertableRowComponent.columnEditors[column.attr].templateref\"\n              [ngTemplateOutletContext]=\"{ rowvalue: oTableInsertableRowComponent.rowData }\">\n            </ng-template>\n          </ng-container>\n        </td>\n      </ng-container>\n\n    </ng-container>\n\n    <ng-container *ngIf=\"showFirstInsertableRow && oTableInsertableRowComponent\">\n      <ng-container [matColumnDef]=\"getColumnInsertable(oTableOptions.selectColumn.name)\" *ngIf=\"oTableOptions.selectColumn.visible\">\n        <td mat-header-cell *matHeaderCellDef>\n        </td>\n      </ng-container>\n      <ng-container *ngFor=\"let column of oTableOptions.columns\" [matColumnDef]=\"getColumnInsertable(column.name)\">\n\n        <td mat-header-cell *matHeaderCellDef [ngClass]=\"[column.className, getCellAlignClass(column)]\">\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && !oTableInsertableRowComponent.useCellEditor(column)\">\n            <mat-form-field class=\"insertable-form-field\" [hideRequiredMarker]=\"false\">\n              <input matInput type=\"text\" [placeholder]=\"oTableInsertableRowComponent.getPlaceholder(column)\" [id]=\"column.attr\"\n                [formControl]=\"oTableInsertableRowComponent.getControl(column)\" [required]=\"oTableInsertableRowComponent.isColumnRequired(column)\">\n              <mat-error *oMatError=\"oTableInsertableRowComponent.columnHasError(column, 'required')\">\n                {{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}\n              </mat-error>\n            </mat-form-field>\n          </ng-container>\n\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && oTableInsertableRowComponent.useCellEditor(column)\">\n            <ng-template [ngTemplateOutlet]=\"oTableInsertableRowComponent.columnEditors[column.attr].templateref\"\n              [ngTemplateOutletContext]=\"{ rowvalue: oTableInsertableRowComponent.rowData }\">\n            </ng-template>\n          </ng-container>\n        </td>\n      </ng-container>\n\n    </ng-container>\n\n    <!-- Definition column group header -->\n    <ng-container *ngFor=\"let column of groupingHeadersRows; let i = index\" [matColumnDef]=\"column\">\n      <td mat-cell *matCellDef=\"let group\" class=\"grouping-row\" [oContextMenu]=\"tableContextMenu\"\n        [oContextMenuData]=\"{ cellName:column, rowValue:group, rowIndex:i}\" [ngClass]=\"getGroupHeaderCellAlignClass(column)\">\n        <div *ngIf=\"i===0\" class=\"grouping-title-wrapper\" [ngStyle]=\"{'padding-left': 20*(group.level-1)+'px'}\">\n          <mat-icon>{{ group.expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\n          {{ group.title }}\n        </div>\n        <div class=\"grouping-aggregate\" *ngIf=\"group.hasActiveAggregate(visibleColArray[i])\">\n          {{ group.getColumnActiveAggregateTitle(visibleColArray[i]) | oTranslate }} :\n          <ng-container *ngIf=\"!getOColumnFromGroupHeaderColumn(column).renderer\">\n            {{ group.getColumnAggregateValue(visibleColArray[i])}}\n          </ng-container>\n          <ng-container *ngIf=\"getOColumnFromGroupHeaderColumn(column).renderer\">\n            <ng-template\n              *ngTemplateOutlet=\"getOColumnFromGroupHeaderColumn(column).renderer?.templateref; context:{ cellvalue:  group.getColumnAggregateValue(visibleColArray[i]) }\">\n            </ng-template>\n          </ng-container>\n        </div>\n      </td>\n    </ng-container>\n\n    <ng-container matColumnDef=\"position\">\n      <td mat-cell *matCellDef=\"let row\"> {{row}} </td>\n    </ng-container>\n\n    <tr #tableHeader mat-header-row *matHeaderRowDef=\"oTableOptions.visibleColumns; sticky: fixedHeader\"></tr>\n\n    <ng-container *ngIf=\"!table.multiTemplateDataRows; else rowTemplateMultiTemplateDataRows\">\n      <tr mat-row oTableRow *matRowDef=\"let row; columns: oTableOptions.visibleColumns; when:isNotGroup; let rowIndex = index\"\n        [class.selected]=\"isRowSelected(row)\" [ngClass]=\"row | oTableRowClass: rowIndex: rowClass\">\n      </tr>\n    </ng-container>\n    <ng-template #rowTemplateMultiTemplateDataRows>\n      <tr mat-row oTableRow *matRowDef=\"let row; columns: oTableOptions.visibleColumns; when:isNotGroup; let rowIndex = dataIndex\"\n        [class.selected]=\"isRowSelected(row)\" [ngClass]=\"row | oTableRowClass: rowIndex: rowClass\">\n      </tr>\n    </ng-template>\n\n    <!-- Row Group header -->\n    <tr mat-row *matRowDef=\"let row; columns: groupingHeadersRows; when:isGroup\" (click)=\"groupHeaderClick(row)\"\n      [ngClass]=\"getClassNameGroupHeader(row)\">\n    </tr>\n\n    <!-- Expanded detail row-->\n    <ng-container *ngIf=\"hasExpandedRow\">\n      <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"o-table-row-expanded\"></tr>\n    </ng-container>\n\n    <ng-container *ngIf=\"showLastInsertableRow\">\n      <tr mat-footer-row *matFooterRowDef=\"oTableOptions.columnsInsertables; sticky: true\"\n        (keyup)=\"oTableInsertableRowComponent.handleKeyboardEvent($event)\" class=\"o-table-insertable\"></tr>\n    </ng-container>\n    <ng-container *ngIf=\"showFirstInsertableRow\">\n      <tr mat-header-row *matHeaderRowDef=\"oTableOptions.columnsInsertables; sticky: true\"\n        (keyup)=\"oTableInsertableRowComponent.handleKeyboardEvent($event)\" class=\"o-table-insertable\"> </tr>\n    </ng-container>\n    <ng-container *ngIf=\"showTotals | async\">\n      <tr mat-footer-row *matFooterRowDef=\"oTableOptions.visibleColumns; sticky: true\" class=\"o-table-aggregate\">\n      </tr>\n    </ng-container>\n  </table>\n\n</ng-template>\n\n<ng-container *ngIf=\"!contextMenuContentChild && contextMenu\">\n  <o-table-context-menu [insert]=\"insertButton\" [edit]=\"editionMode !== EDIT_MODE_NONE\" [view-detail]=\"detailMode !== DETAIL_MODE_NONE\"\n    [refresh]=\"refreshButton\" [delete]=\"deleteButton\" [filter]=\"showFilterOption\" [group-by-row]=\"groupable\">\n  </o-table-context-menu>\n</ng-container>\n\n<ng-template #cellRenderer let-row=\"row\" let-column=\"column\">\n  <div class=\"content\">\n\n    <ng-container [ngSwitch]=\"true\">\n      <ng-container *ngSwitchCase=\"column.renderer != null && (!column.editing || column.editing && !isRowSelected(row))\">\n        <ng-template *ngTemplateOutlet=\"column.renderer?.templateref; context:{ cellvalue: row[column.name], rowvalue:row }\">\n        </ng-template>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"isRowSelected(row) && column.editing\">\n        <ng-template *ngTemplateOutlet=\"column.editor?.templateref; context:{ cellvalue: row[column.name], rowvalue:row }\">\n        </ng-template>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"column.type === 'editButtonInRow' || column.type === 'detailButtonInRow'\">\n        <div fxLayoutAlign=\"center center\" class=\"o-action-cell-renderer\" (click)=\"onDetailButtonClick(column, row, $event)\">\n          <mat-icon>{{ getDetailButtonIcon(column) }}</mat-icon>\n        </div>\n      </ng-container>\n      <ng-container *ngSwitchDefault>{{ row[column.name] }}</ng-container>\n    </ng-container>\n\n  </div>\n</ng-template>\n", styles: [".o-table{height:100%;max-height:100%;width:100%}.o-table.o-table-disabled{opacity:.4}.o-table .o-table-container{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:flex-start;align-content:stretch;min-width:100%;min-height:400px;position:relative;padding:0 .5%}.o-table .o-table-container .o-table-body{display:flex;flex:1 1 auto}.o-table .o-table-container .o-table-body .o-table-overflow{overflow-y:auto;overflow-x:hidden;min-width:100%}.o-table .o-table-container .o-table-body .cdk-virtual-scrollable{overflow:hidden}.o-table .o-table-container .o-table-body.horizontal-scroll .cdk-virtual-scrollable{overflow:visible;contain:none}.o-table .o-table-container .o-table-body.horizontal-scroll .o-table-overflow{overflow-x:auto}.o-table .o-table-container .o-table-body thead .mat-mdc-header-row th:last-child .o-table-column-resizer{display:none}.o-table .o-table-container.block-events{pointer-events:none}.o-table .o-table-container .o-table-toolbar{height:40px}.o-table .o-table-container .o-table-toolbar>div{max-height:100%}.o-table .o-table-container .o-table-toolbar .buttons{margin:0 10px 0 4px}.o-table .o-table-container .o-table-body{max-width:100%;height:100%;overflow:hidden;position:relative}.o-table .o-table-container .o-table-body .spinner-container{position:absolute;top:0;left:0;right:0;bottom:0;z-index:500;visibility:visible;opacity:1;transition:opacity .25s linear}.o-table .o-table-container .o-table-body.horizontal-scroll{overflow-x:auto;padding-bottom:16px}.o-table .o-table-container .o-table-body.horizontal-scroll .mat-mdc-header-cell{width:150px}.o-table .o-table-container .o-table-body .o-table-no-results{cursor:default;text-align:center}.o-table .o-table-container .o-table-body .o-table-no-results td{text-align:center}.o-table .o-table-container .mat-mdc-table{table-layout:fixed;width:100%}.o-table .o-table-container .mat-mdc-table.autoadjusted{table-layout:auto}.o-table .o-table-container .mat-mdc-table td .content,.o-table .o-table-container .mat-mdc-table th .content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table.small .mat-mdc-header-row .mat-mdc-cell .image-avatar,.o-table .o-table-container .mat-mdc-table.small .mat-mdc-header-row .mat-mdc-header-cell .image-avatar,.o-table .o-table-container .mat-mdc-table.small .mat-mdc-row .mat-mdc-cell .image-avatar,.o-table .o-table-container .mat-mdc-table.small .mat-mdc-row .mat-mdc-header-cell .image-avatar{width:24px;height:24px}.o-table .o-table-container .mat-mdc-table.large .column-filter-icon{margin-top:4px}.o-table .o-table-container .mat-mdc-table.large .mat-sort-header-arrow{margin-top:7px}.o-table .o-table-container .mat-mdc-table tr.mat-mdc-row.o-table-row-expanded{height:0}.o-table .o-table-container .mat-mdc-table tr.o-table-insertable td{height:1px}.o-table .o-table-container .mat-mdc-table .mat-mdc-footer-cell{padding:0 12px}.o-table .o-table-container .mat-mdc-table .mat-mdc-footer-cell.o-start{text-align:start}.o-table .o-table-container .mat-mdc-table .mat-mdc-footer-cell.o-center{text-align:center}.o-table .o-table-container .mat-mdc-table .mat-mdc-footer-cell.o-end{text-align:end}.o-table .o-table-container .mat-mdc-table .mat-mdc-row{box-sizing:border-box;transition:background-color .2s;position:relative;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell{padding:0 12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.grouping-row,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.grouping-row{padding-top:30px;cursor:pointer}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.grouping-row .grouping-title-wrapper,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.grouping-row .grouping-title-wrapper{position:absolute;width:100%;left:0;top:0;text-align:left}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.grouping-row .grouping-aggregate,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.grouping-row .grouping-aggregate{font-weight:700;font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-bottom:8px}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.empty-cell,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.empty-cell{min-height:16px}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell .action-cell-renderer,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell .action-cell-renderer{cursor:pointer}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-start,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-start{text-align:start}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-center,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-center{text-align:center}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-end,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-end{text-align:end}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell *,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell *{vertical-align:middle}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-mat-cell-multiline:not(.mat-mdc-header-cell),.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-mat-cell-multiline:not(.mat-mdc-header-cell){padding:6px 12px}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-mat-cell-multiline .content,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-mat-cell-multiline .content{overflow:initial;white-space:normal;text-overflow:unset}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell .image-avatar,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell .image-avatar{width:32px;height:32px;margin:1px auto;overflow:hidden;border-radius:50%;position:relative;z-index:1}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell .image-avatar img,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell .image-avatar img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;max-width:inherit;max-height:inherit}.o-table .o-table-container .mat-mdc-table .o-action-cell-renderer{display:inline-block;cursor:pointer}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell{overflow:hidden;position:relative;box-sizing:border-box;padding:0 12px;vertical-align:middle}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select.mat-header-select-all-with-title{padding-right:12px}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell:first-of-type{padding-left:0}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell:not(.o-column-image){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell:has(.o-table-column-resizer){padding-right:0}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .o-table-header-indicator-numbered{font-size:8px;position:absolute;text-align:center;display:inline-block;width:18px;height:18px;line-height:18px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;bottom:-10px;right:-9px}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .column-filter-icon{cursor:pointer;font-size:18px;width:18px;height:18px;line-height:1}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .mat-sort-header-button{flex:1;display:block;place-content:center}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .header-title-container{cursor:default;min-height:20px}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .header-title-container,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .mat-sort-header-button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.start,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.start .mat-sort-header-button{text-align:left}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.center,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.center .mat-sort-header-button{text-align:center}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.end,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.end .mat-sort-header-button{text-align:right}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-select,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select{box-sizing:content-box;overflow:initial}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-select:not(.mat-header-select-all-with-title),.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select:not(.mat-header-select-all-with-title){width:30px}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-select .mat-checkbox-layout,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select .mat-checkbox-layout{text-overflow:ellipsis;overflow:hidden;display:inline}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-expandable,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-expandable{width:40px;box-sizing:content-box;padding:0 0 0 24px;overflow:initial}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell .row-container-expanded{overflow:hidden;display:flex}.o-table .o-table-container .o-table-disabled-blocker{bottom:0;left:0;position:absolute;right:0;top:0;z-index:100}.o-table .spinner-container{position:absolute;top:0;left:0;right:0;bottom:0;z-index:500;visibility:visible;opacity:1;transition:opacity .25s linear}.o-table .spinner-container-scrollable{position:relative}.o-table.o-table-fixed{display:flex}.o-table.o-table-fixed .o-table-container{display:flex;flex-direction:column}.o-table.o-table-fixed .o-table-body{display:flex;flex:1}.o-table.o-table-fixed .o-table-body .o-table-overflow{flex:1;overflow-y:auto}.mat-mdc-tooltip.o-table-cell-tooltip{word-wrap:break-word;overflow:hidden;min-width:140px}\n"] }]
+                    }, template: "<div class=\"o-table-container\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\" [style.display]=\"isVisible()? '' : 'none'\"\n  [class.block-events]=\"loadingService.isProcessing$ | async\">\n  <o-data-toolbar #tableToolbar *ngIf=\"hasControls()\" [title]=\"title\" [show-title]=\"showTitle\" class=\"o-table-toolbar\">\n    <ng-container o-data-toolbar-projection-start>\n      <o-table-buttons #tableButtons [insert-button]=\"insertButton\" [refresh-button]=\"refreshButton\" [delete-button]=\"showDeleteButton\">\n        <ng-content select=\"o-table-button\"></ng-content>\n      </o-table-buttons>\n    </ng-container>\n    <ng-content select=\"[o-table-toolbar][position=start]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-content select=\"[o-table-toolbar][position=end]\" ngProjectAs=\"[o-data-toolbar-custom-projection-end]\">\n    </ng-content>\n    <ng-content select=\"[o-table-toolbar]\" ngProjectAs=\"[o-data-toolbar-custom-projection-start]\">\n    </ng-content>\n    <ng-container o-data-toolbar-projection-end>\n      <ng-container *ngIf=\"quickfilterContentChild; else defaultQuickFilter\">\n        <ng-content select=\"o-table-quickfilter\"></ng-content>\n      </ng-container>\n      <ng-template #defaultQuickFilter>\n        <ng-container *ngIf=\"quickFilter\">\n          <o-table-quickfilter [placeholder]=\"quickFilterPlaceholder\" (onChange)=\"tableQuickFilterChanged($event)\">\n          </o-table-quickfilter>\n        </ng-container>\n      </ng-template>\n      <button type=\"button\" *ngIf=\"showTableMenuButton\" mat-icon-button class=\"o-table-menu-button\" [matMenuTriggerFor]=\"tableMenu.matMenu\"\n        (click)=\"$event.stopPropagation()\">\n        <mat-icon svgIcon=\"ontimize:more_vert\"></mat-icon>\n      </button>\n      <o-table-menu #tableMenu [select-all-checkbox]=\"selectAllCheckbox\" [export-button]=\"exportButton\"\n        [columns-visibility-button]=\"columnsVisibilityButton\" [show-configuration-option]=\"showConfigurationOption\"\n        [show-filter-option]=\"showFilterOption\" [show-report-on-demand-option]=\"showReportOnDemandOption\"\n        [show-charts-on-demand-option]=\"showChartsOnDemandOption\" [show-reset-width-option]=\"showResetWidthOption\" [show-group-by-option]=\"groupable\">\n        <ng-content select=\"o-table-option\"></ng-content>\n      </o-table-menu>\n    </ng-container>\n  </o-data-toolbar>\n\n  <div #tableBody class=\"o-table-body o-scroll\" [class.horizontal-scroll]=\"horizontalScroll\" [class.scrolled]=\"horizontalScrolled\"\n    [ngStyle]=\"{'visibility': spinnerContainer ? 'hidden' : 'visible'}\">\n    <ng-container *ngIf=\"!enabledVirtualScroll; else tableWithVirtualScroll\">\n      <div class=\"o-table-overflow o-scroll\">\n        <ng-template *ngTemplateOutlet=\"table\"></ng-template>\n      </div>\n    </ng-container>\n    <ng-template #tableWithVirtualScroll>\n      <cdk-virtual-scroll-viewport #virtualScrollViewPort fxFlex>\n        <ng-template *ngTemplateOutlet=\"table\"></ng-template>\n      </cdk-virtual-scroll-viewport>\n    </ng-template>\n  </div>\n  <!--TABLE PAGINATOR-->\n  <mat-paginator *ngIf=\"paginator\" #matpaginator [length]=\"dataSource?.resultsLength\" [pageIndex]=\"paginator.pageIndex\" [pageSize]=\"queryRows\"\n    [pageSizeOptions]=\"paginator.pageSizeOptions\" (page)=\"onChangePage($event)\" [showFirstLastButtons]=\"paginator.showFirstLastButtons\"\n    [ngStyle]=\"{'visibility': spinnerContainer ? 'hidden' : 'visible'}\">\n  </mat-paginator>\n\n  <!--LOADING-->\n  <div #spinnerContainer *ngIf=\"showLoading | async\" fxLayout=\"column\" fxLayoutAlign=\"center center\" [ngStyle]=\"{'top.px': toolBarHeight}\"\n    class=\"spinner-container\" [class.spinner-container-scrollable]=\"loadingScroll | async\">\n    <o-table-skeleton></o-table-skeleton>\n  </div>\n\n  <!-- Disable blocker -->\n  <div *ngIf=\"!enabled\" class=\"o-table-disabled-blocker\"></div>\n</div>\n\n<ng-template #table>\n  <table mat-table #table [class.autoadjusted]=\"autoAdjust\" [trackBy]=\"getTrackByFunction()\" [dataSource]=\"dataSource\" oMatSort\n    [oMatSortColumns]=\"sortColArray\" [ngClass]=\"rowHeightObservable | async\" (cdkObserveContent)=\"projectContentChanged()\"\n    oTableExpandedFooter [oTableExpandedFooterColspan]=\"visibleColArray.length\"\n    [multiTemplateDataRows]=\"showExpandableRow()\" aria-describedby=\"ontimize-web table\">\n\n    <!--Checkbox Column -->\n    <ng-container [matColumnDef]=\"oTableOptions.selectColumn.name\" *ngIf=\"oTableOptions.selectColumn.visible\">\n      <ng-container *ngIf=\"!tableColumnSelectAllContentChild; else customHeaderSelectAllTemplate\">\n        <th mat-header-cell *matHeaderCellDef>\n          <div class=\"content\" *ngIf=\"isSelectionModeMultiple()\">\n            <o-table-header-select-all [column]=\"oTableOptions.selectColumn\"></o-table-header-select-all>\n          </div>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-checkbox name=\"id[]\" (click)=\"$event.stopPropagation()\" [disabled]=\"isDisableCheckbox(row)\"\n            (change)=\"selectionCheckboxToggle($event, row)\" [checked]=\"isRowSelected(row)\">\n          </mat-checkbox>\n        </td>\n      </ng-container>\n      <ng-template #customHeaderSelectAllTemplate>\n        <th mat-header-cell *matHeaderCellDef [class.resizable]=\"resizable\" class=\"mat-header-select-all-with-title o-center\"\n          [style.width]=\"oTableOptions.selectColumn.width\" [style.min-width]=\"getMinWidthColumn(oTableOptions.selectColumn)\"\n          [style.max-width]=\"oTableOptions.selectColumn.maxWidth\">\n          <div class=\"content\">\n            <o-table-header-select-all [column]=\"oTableOptions.selectColumn\"></o-table-header-select-all>\n          </div>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"o-center\" [style.width]=\"oTableOptions.selectColumn.width\"\n          [style.min-width]=\"getMinWidthColumn(oTableOptions.selectColumn)\" [style.max-width]=\"oTableOptions.selectColumn.maxWidth\">\n          <mat-checkbox name=\"id[]\" (click)=\"$event.stopPropagation()\" [disabled]=\"isDisableCheckbox(row)\"\n            (change)=\"selectionCheckboxToggle($event, row)\" [checked]=\"isRowSelected(row)\">\n          </mat-checkbox>\n        </td>\n      </ng-template>\n\n\n      <td mat-footer-cell *matFooterCellDef></td>\n    </ng-container>\n\n    <!--Expandable Column -->\n    <ng-container [matColumnDef]=\"oTableOptions.expandableColumn.name\" *ngIf=\"isColumnExpandable()\">\n      <th mat-header-cell *matHeaderCellDef>\n        {{ oTableOptions.expandableColumn.title }}\n      </th>\n      <td mat-cell *matCellDef=\"let row;let rowIndex = dataIndex\">\n        <mat-icon *ngIf=\"showExpandableIcon(row, rowIndex) | async\" (click)=\"toggleRowExpandable(row, $event)\"\n          (keydown)=\"toggleRowExpandable(row, $event)\">\n          <ng-container *ngIf=\"isExpanded(row)\">{{ tableRowExpandable.iconCollapse }}</ng-container>\n          <ng-container *ngIf=\"!isExpanded(row)\">{{ tableRowExpandable.iconExpand }}</ng-container>\n        </mat-icon>\n      </td>\n    </ng-container>\n\n    <!-- Generic column definition -->\n    <ng-container *ngFor=\"let column of oTableOptions.columns\" [matColumnDef]=\"column.name\">\n      <!--Define header-cell-->\n\n      <th mat-header-cell *matHeaderCellDef [ngClass]=\"getTitleAlignClass(column)\" [class.resizable]=\"resizable\" [style.width]=\"column.width\"\n        [style.min-width]=\"getMinWidthColumn(column)\" [style.max-width]=\"column.maxWidth\">\n\n        <div class=\"content\">\n          <o-table-header [column]=\"column\" [column-filters]=\"columnFilters$ | async\" ></o-table-header>\n        </div>\n      </th>\n\n\n      <!--Define mat-cell-->\n      <ng-container *ngIf=\"!table.multiTemplateDataRows; else cellTemplateMultiTemplateDataRows\">\n        <td #cell mat-cell *matCellDef=\"let row;let rowIndex = index \" [ngClass]=\"[column.className, getCellAlignClass(column)]\"\n          (click)=\"handleClick(row, column, rowIndex, cell, $event)\" (dblclick)=\"handleDoubleClick(row, column, rowIndex, cell, $event)\"\n          [class.empty-cell]=\"isEmpty(row[column.name])\" [matTooltipDisabled]=\"!column.hasTooltip()\" [matTooltip]=\"column.getTooltip(row)\"\n          matTooltipPosition=\"below\" matTooltipShowDelay=\"750\" matTooltipClass=\"o-table-cell-tooltip\"\n          [class.o-mat-cell-multiline]=\"(column.isMultiline | async)\" [oContextMenu]=\"tableContextMenu\"\n          [oContextMenuData]=\"{ cellName:column.name, rowValue:row, rowIndex:rowIndex}\" [style.width]=\"column.width\"\n          [style.min-width]=\"getMinWidthColumn(column)\" [style.max-width]=\"column.maxWidth\"\n          [class.o-table-editing-cell]=\"isRowSelected(row) && column.editing\">\n          <ng-container *ngTemplateOutlet=\"cellRenderer;context:{column:column,row:row}\"></ng-container>\n        </td>\n      </ng-container>\n      <ng-template #cellTemplateMultiTemplateDataRows>\n        <td #cell mat-cell *matCellDef=\"let row;let rowIndex = dataIndex \" [ngClass]=\"[column.className, getCellAlignClass(column)]\"\n          (click)=\"handleClick(row, column, rowIndex, cell, $event)\" (dblclick)=\"handleDoubleClick(row, column, rowIndex, cell, $event)\"\n          [class.empty-cell]=\"isEmpty(row[column.name])\" [matTooltipDisabled]=\"!column.hasTooltip()\" [matTooltip]=\"column.getTooltip(row)\"\n          matTooltipPosition=\"below\" matTooltipShowDelay=\"750\" matTooltipClass=\"o-table-cell-tooltip\"\n          [class.o-mat-cell-multiline]=\"(column.isMultiline | async)\" [oContextMenu]=\"tableContextMenu\"\n          [oContextMenuData]=\"{ cellName:column.name, rowValue:row, rowIndex:rowIndex}\" [style.width]=\"column.width\"\n          [style.min-width]=\"getMinWidthColumn(column)\" [style.max-width]=\"column.maxWidth\"\n          [class.o-table-editing-cell]=\"isRowSelected(row) && column.editing\">\n          <ng-container *ngTemplateOutlet=\"cellRenderer;context:{column:column,row:row}\"></ng-container>\n\n        </td>\n      </ng-template>\n      <!--Define mat-footer-cell-->\n      <ng-container *ngIf=\"showTotals | async\">\n        <td mat-footer-cell *matFooterCellDef [ngClass]=\"column.className\">\n          <div class=\"title\" *ngIf=\"column.aggregate && column.aggregate.title\">\n            {{ column.aggregate.title | oTranslate }}\n          </div>\n          <ng-container *ngIf=\"!column.renderer || column.aggregate?.operator === 'count'; else rendererTemplate\">\n            {{ dataSource.getAggregateData(column) }}\n          </ng-container>\n          <ng-template #rendererTemplate>\n            <ng-template *ngIf=\"column.renderer && column.aggregate\" [ngTemplateOutlet]=\"column.renderer.templateref\"\n              [ngTemplateOutletContext]=\"{cellvalue: dataSource.getAggregateData(column)}\">\n            </ng-template>\n          </ng-template>\n        </td>\n      </ng-container>\n\n    </ng-container>\n\n    <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n    <ng-container *ngIf=\"hasExpandedRow\">\n      <ng-container matColumnDef=\"expandedDetail\">\n        <td mat-cell *matCellDef=\"let row;let rowIndex= dataIndex\" [attr.colspan]=\"oTableOptions.visibleColumns.length\">\n          <div [ngClass]=\"getExpandedRowContainerClass(rowIndex)\" [@detailExpand]=\"getStateExpand(row)\">\n          </div>\n        </td>\n      </ng-container>\n    </ng-container>\n\n    <!--FOOTER-INSERTABLE-->\n    <ng-container *ngIf=\"showLastInsertableRow && oTableInsertableRowComponent\">\n      <ng-container [matColumnDef]=\"oTableOptions.selectColumn.name + getSuffixColumnInsertable()\" *ngIf=\"oTableOptions.selectColumn.visible\">\n        <td mat-footer-cell *matFooterCellDef>\n        </td>\n      </ng-container>\n      <ng-container *ngFor=\"let column of oTableOptions.columns\" [matColumnDef]=\"column.name+ getSuffixColumnInsertable()\">\n\n        <td mat-footer-cell *matFooterCellDef [ngClass]=\"[column.className, getCellAlignClass(column)]\">\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && !oTableInsertableRowComponent.useCellEditor(column)\">\n            <mat-form-field class=\"insertable-form-field o-table-cell-editor-text o-table-cell-editor\" [hideRequiredMarker]=\"false\">\n              <input matInput type=\"text\" [placeholder]=\"oTableInsertableRowComponent.getPlaceholder(column)\" [id]=\"column.attr\"\n                [formControl]=\"oTableInsertableRowComponent.getControl(column)\" [required]=\"oTableInsertableRowComponent.isColumnRequired(column)\">\n              <mat-error *oMatError=\"oTableInsertableRowComponent.columnHasError(column, 'required')\">\n                {{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}\n              </mat-error>\n            </mat-form-field>\n          </ng-container>\n\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && oTableInsertableRowComponent.useCellEditor(column)\">\n            <ng-template [ngTemplateOutlet]=\"oTableInsertableRowComponent.columnEditors[column.attr].templateref\"\n              [ngTemplateOutletContext]=\"{ rowvalue: oTableInsertableRowComponent.rowData }\">\n            </ng-template>\n          </ng-container>\n        </td>\n      </ng-container>\n\n    </ng-container>\n\n    <ng-container *ngIf=\"showFirstInsertableRow && oTableInsertableRowComponent\">\n      <ng-container [matColumnDef]=\"getColumnInsertable(oTableOptions.selectColumn.name)\" *ngIf=\"oTableOptions.selectColumn.visible\">\n        <td mat-header-cell *matHeaderCellDef>\n        </td>\n      </ng-container>\n      <ng-container *ngFor=\"let column of oTableOptions.columns\" [matColumnDef]=\"getColumnInsertable(column.name)\">\n\n        <td mat-header-cell *matHeaderCellDef [ngClass]=\"[column.className, getCellAlignClass(column)]\">\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && !oTableInsertableRowComponent.useCellEditor(column)\">\n            <mat-form-field class=\"insertable-form-field\" [hideRequiredMarker]=\"false\">\n              <input matInput type=\"text\" [placeholder]=\"oTableInsertableRowComponent.getPlaceholder(column)\" [id]=\"column.attr\"\n                [formControl]=\"oTableInsertableRowComponent.getControl(column)\" [required]=\"oTableInsertableRowComponent.isColumnRequired(column)\">\n              <mat-error *oMatError=\"oTableInsertableRowComponent.columnHasError(column, 'required')\">\n                {{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}\n              </mat-error>\n            </mat-form-field>\n          </ng-container>\n\n          <ng-container *ngIf=\"oTableInsertableRowComponent.isColumnInsertable(column) && oTableInsertableRowComponent.useCellEditor(column)\">\n            <ng-template [ngTemplateOutlet]=\"oTableInsertableRowComponent.columnEditors[column.attr].templateref\"\n              [ngTemplateOutletContext]=\"{ rowvalue: oTableInsertableRowComponent.rowData }\">\n            </ng-template>\n          </ng-container>\n        </td>\n      </ng-container>\n\n    </ng-container>\n\n    <!-- Definition column group header -->\n    <ng-container *ngFor=\"let column of groupingHeadersRows; let i = index\" [matColumnDef]=\"column\">\n      <td mat-cell *matCellDef=\"let group\" class=\"grouping-row\" [oContextMenu]=\"tableContextMenu\"\n        [oContextMenuData]=\"{ cellName:column, rowValue:group, rowIndex:i}\" [ngClass]=\"getGroupHeaderCellAlignClass(column)\">\n        <div *ngIf=\"i===0\" class=\"grouping-title-wrapper\" [ngStyle]=\"{'padding-left': 20*(group.level-1)+'px'}\">\n          <mat-icon>{{ group.expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\n          {{ group.title }}\n        </div>\n        <div class=\"grouping-aggregate\" *ngIf=\"group.hasActiveAggregate(visibleColArray[i])\">\n          {{ group.getColumnActiveAggregateTitle(visibleColArray[i]) | oTranslate }} :\n          <ng-container *ngIf=\"!getOColumnFromGroupHeaderColumn(column).renderer\">\n            {{ group.getColumnAggregateValue(visibleColArray[i])}}\n          </ng-container>\n          <ng-container *ngIf=\"getOColumnFromGroupHeaderColumn(column).renderer\">\n            <ng-template\n              *ngTemplateOutlet=\"getOColumnFromGroupHeaderColumn(column).renderer?.templateref; context:{ cellvalue:  group.getColumnAggregateValue(visibleColArray[i]) }\">\n            </ng-template>\n          </ng-container>\n        </div>\n      </td>\n    </ng-container>\n\n    <ng-container matColumnDef=\"position\">\n      <td mat-cell *matCellDef=\"let row\"> {{row}} </td>\n    </ng-container>\n\n    <tr #tableHeader mat-header-row *matHeaderRowDef=\"oTableOptions.visibleColumns; sticky: fixedHeader\"></tr>\n\n    <ng-container *ngIf=\"!table.multiTemplateDataRows; else rowTemplateMultiTemplateDataRows\">\n      <tr mat-row oTableRow *matRowDef=\"let row; columns: oTableOptions.visibleColumns; when:isNotGroup; let rowIndex = index\"\n        [class.selected]=\"isRowSelected(row)\" [ngClass]=\"row | oTableRowClass: rowIndex: rowClass\">\n      </tr>\n    </ng-container>\n    <ng-template #rowTemplateMultiTemplateDataRows>\n      <tr mat-row oTableRow *matRowDef=\"let row; columns: oTableOptions.visibleColumns; when:isNotGroup; let rowIndex = dataIndex\"\n        [class.selected]=\"isRowSelected(row)\" [ngClass]=\"row | oTableRowClass: rowIndex: rowClass\">\n      </tr>\n    </ng-template>\n\n    <!-- Row Group header -->\n    <tr mat-row *matRowDef=\"let row; columns: groupingHeadersRows; when:isGroup\" (click)=\"groupHeaderClick(row)\"\n      [ngClass]=\"getClassNameGroupHeader(row)\">\n    </tr>\n\n    <!-- Expanded detail row-->\n    <ng-container *ngIf=\"hasExpandedRow\">\n      <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"o-table-row-expanded\"></tr>\n    </ng-container>\n\n    <ng-container *ngIf=\"showLastInsertableRow\">\n      <tr mat-footer-row *matFooterRowDef=\"oTableOptions.columnsInsertables; sticky: true\"\n        (keyup)=\"oTableInsertableRowComponent.handleKeyboardEvent($event)\" class=\"o-table-insertable\"></tr>\n    </ng-container>\n    <ng-container *ngIf=\"showFirstInsertableRow\">\n      <tr mat-header-row *matHeaderRowDef=\"oTableOptions.columnsInsertables; sticky: true\"\n        (keyup)=\"oTableInsertableRowComponent.handleKeyboardEvent($event)\" class=\"o-table-insertable\"> </tr>\n    </ng-container>\n    <ng-container *ngIf=\"showTotals | async\">\n      <tr mat-footer-row *matFooterRowDef=\"oTableOptions.visibleColumns; sticky: true\" class=\"o-table-aggregate\">\n      </tr>\n    </ng-container>\n  </table>\n\n</ng-template>\n\n<ng-container *ngIf=\"!contextMenuContentChild && contextMenu\">\n  <o-table-context-menu [insert]=\"insertButton\" [edit]=\"editionMode !== EDIT_MODE_NONE\" [view-detail]=\"detailMode !== DETAIL_MODE_NONE\"\n    [refresh]=\"refreshButton\" [delete]=\"deleteButton\" [filter]=\"showFilterOption\" [group-by-row]=\"groupable\">\n  </o-table-context-menu>\n</ng-container>\n\n<ng-template #cellRenderer let-row=\"row\" let-column=\"column\">\n  <div class=\"content\">\n\n    <ng-container [ngSwitch]=\"true\">\n      <ng-container *ngSwitchCase=\"column.renderer != null && (!column.editing || column.editing && !isRowSelected(row))\">\n        <ng-template *ngTemplateOutlet=\"column.renderer?.templateref; context:{ cellvalue: row[column.name], rowvalue:row }\">\n        </ng-template>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"isRowSelected(row) && column.editing\">\n        <ng-template *ngTemplateOutlet=\"column.editor?.templateref; context:{ cellvalue: row[column.name], rowvalue:row }\">\n        </ng-template>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"column.type === 'editButtonInRow' || column.type === 'detailButtonInRow'\">\n        <div fxLayoutAlign=\"center center\" class=\"o-action-cell-renderer\" (click)=\"onDetailButtonClick(column, row, $event)\">\n          <mat-icon>{{ getDetailButtonIcon(column) }}</mat-icon>\n        </div>\n      </ng-container>\n      <ng-container *ngSwitchDefault>{{ row[column.name] }}</ng-container>\n    </ng-container>\n\n  </div>\n</ng-template>\n", styles: [".o-table{height:100%;max-height:100%;width:100%}.o-table.o-table-disabled{opacity:.4}.o-table .o-table-container{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:flex-start;align-content:stretch;min-width:100%;min-height:400px;position:relative;padding:0 .5%}.o-table .o-table-container .o-table-body{display:flex;flex:1 1 auto}.o-table .o-table-container .o-table-body .o-table-overflow{overflow-y:auto;overflow-x:hidden;min-width:100%}.o-table .o-table-container .o-table-body .cdk-virtual-scrollable{overflow-x:hidden}.o-table .o-table-container .o-table-body.horizontal-scroll .cdk-virtual-scrollable{overflow-x:visible;contain:none}.o-table .o-table-container .o-table-body.horizontal-scroll .o-table-overflow{overflow-x:auto}.o-table .o-table-container .o-table-body thead .mat-mdc-header-row th:last-child .o-table-column-resizer{display:none}.o-table .o-table-container.block-events{pointer-events:none}.o-table .o-table-container .o-table-toolbar{height:40px}.o-table .o-table-container .o-table-toolbar>div{max-height:100%}.o-table .o-table-container .o-table-toolbar .buttons{margin:0 10px 0 4px}.o-table .o-table-container .o-table-body{max-width:100%;height:100%;overflow:hidden;position:relative}.o-table .o-table-container .o-table-body .spinner-container{position:absolute;top:0;left:0;right:0;bottom:0;z-index:500;visibility:visible;opacity:1;transition:opacity .25s linear}.o-table .o-table-container .o-table-body.horizontal-scroll{overflow-x:auto;padding-bottom:16px}.o-table .o-table-container .o-table-body.horizontal-scroll .mat-mdc-header-cell{width:150px}.o-table .o-table-container .o-table-body .o-table-no-results{cursor:default;text-align:center}.o-table .o-table-container .o-table-body .o-table-no-results td{text-align:center}.o-table .o-table-container .mat-mdc-table{table-layout:fixed;width:100%}.o-table .o-table-container .mat-mdc-table.autoadjusted{table-layout:auto}.o-table .o-table-container .mat-mdc-table td .content,.o-table .o-table-container .mat-mdc-table th .content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table.small .mat-mdc-header-row .mat-mdc-cell .image-avatar,.o-table .o-table-container .mat-mdc-table.small .mat-mdc-header-row .mat-mdc-header-cell .image-avatar,.o-table .o-table-container .mat-mdc-table.small .mat-mdc-row .mat-mdc-cell .image-avatar,.o-table .o-table-container .mat-mdc-table.small .mat-mdc-row .mat-mdc-header-cell .image-avatar{width:24px;height:24px}.o-table .o-table-container .mat-mdc-table.large .column-filter-icon{margin-top:4px}.o-table .o-table-container .mat-mdc-table.large .mat-sort-header-arrow{margin-top:7px}.o-table .o-table-container .mat-mdc-table tr.mat-mdc-row.o-table-row-expanded{height:0}.o-table .o-table-container .mat-mdc-table tr.o-table-insertable td{height:1px}.o-table .o-table-container .mat-mdc-table .mat-mdc-footer-cell{padding:0 12px}.o-table .o-table-container .mat-mdc-table .mat-mdc-footer-cell.o-start{text-align:start}.o-table .o-table-container .mat-mdc-table .mat-mdc-footer-cell.o-center{text-align:center}.o-table .o-table-container .mat-mdc-table .mat-mdc-footer-cell.o-end{text-align:end}.o-table .o-table-container .mat-mdc-table .mat-mdc-row{box-sizing:border-box;transition:background-color .2s;position:relative;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell{padding:0 12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.grouping-row,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.grouping-row{padding-top:30px;cursor:pointer}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.grouping-row .grouping-title-wrapper,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.grouping-row .grouping-title-wrapper{position:absolute;width:100%;left:0;top:0;text-align:left}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.grouping-row .grouping-aggregate,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.grouping-row .grouping-aggregate{font-weight:700;font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-bottom:8px}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.empty-cell,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.empty-cell{min-height:16px}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell .action-cell-renderer,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell .action-cell-renderer{cursor:pointer}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-start,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-start{text-align:start}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-center,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-center{text-align:center}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-end,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-end{text-align:end}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell *,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell *{vertical-align:middle}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-mat-cell-multiline:not(.mat-mdc-header-cell),.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-mat-cell-multiline:not(.mat-mdc-header-cell){padding:6px 12px}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell.o-mat-cell-multiline .content,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell.o-mat-cell-multiline .content{overflow:initial;white-space:normal;text-overflow:unset}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell .image-avatar,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell .image-avatar{width:32px;height:32px;margin:1px auto;overflow:hidden;border-radius:50%;position:relative;z-index:1}.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-cell .image-avatar img,.o-table .o-table-container .mat-mdc-table .mat-mdc-row .mat-mdc-header-cell .image-avatar img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;max-width:inherit;max-height:inherit}.o-table .o-table-container .mat-mdc-table .o-action-cell-renderer{display:inline-block;cursor:pointer}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell{overflow:hidden;position:relative;box-sizing:border-box;padding:0 12px;vertical-align:middle}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select.mat-header-select-all-with-title{padding-right:12px}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell:first-of-type{padding-left:0}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell:not(.o-column-image){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell:has(.o-table-column-resizer){padding-right:0}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .o-table-header-indicator-numbered{font-size:8px;position:absolute;text-align:center;display:inline-block;width:18px;height:18px;line-height:18px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;bottom:-10px;right:-9px}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .column-filter-icon{cursor:pointer;font-size:18px;width:18px;height:18px;line-height:1}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .mat-sort-header-button{flex:1;display:block;place-content:center}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .header-title-container{cursor:default;min-height:20px}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .header-title-container,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell .mat-sort-header-button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.start,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.start .mat-sort-header-button{text-align:left}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.center,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.center .mat-sort-header-button{text-align:center}.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.end,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.end .mat-sort-header-button{text-align:right}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-select,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select{box-sizing:content-box;overflow:initial}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-select:not(.mat-header-select-all-with-title),.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select:not(.mat-header-select-all-with-title){width:30px}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-select .mat-checkbox-layout,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-select .mat-checkbox-layout{text-overflow:ellipsis;overflow:hidden;display:inline}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell.mat-column-expandable,.o-table .o-table-container .mat-mdc-table .mat-mdc-header-cell.mat-column-expandable{width:40px;box-sizing:content-box;padding:0 0 0 24px;overflow:initial}.o-table .o-table-container .mat-mdc-table .mat-mdc-cell .row-container-expanded{overflow:hidden;display:flex}.o-table .o-table-container .o-table-disabled-blocker{bottom:0;left:0;position:absolute;right:0;top:0;z-index:100}.o-table .spinner-container{position:absolute;top:0;left:0;right:0;bottom:0;z-index:500;visibility:visible;opacity:1;transition:opacity .25s linear}.o-table .spinner-container-scrollable{position:relative}.o-table.o-table-fixed{display:flex}.o-table.o-table-fixed .o-table-container{display:flex;flex-direction:column}.o-table.o-table-fixed .o-table-body{display:flex;flex:1}.o-table.o-table-fixed .o-table-body .o-table-overflow{flex:1;overflow-y:auto}.mat-mdc-tooltip.o-table-cell-tooltip{word-wrap:break-word;overflow:hidden;min-width:140px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i1$1.MatDialog }, { type: i0.ViewContainerRef }, { type: i0.ApplicationRef }, { type: OFormComponent, decorators: [{
                     type: Optional
                 }, {