ngx-hana-nameserver-history-viewer 1.1.9-8.beta → 1.1.9-9.3.beta

package/fesm2020/ngx-hana-nameserver-history-viewer.mjs

@@ -6,7 +6,8 @@ import * as i2$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i1$1 from '@danielmoncada/angular-datetime-picker';
 import { OwlDateTimeModule, OwlNativeDateTimeModule } from '@danielmoncada/angular-datetime-picker';
-import * as moment$2 from 'moment-timezone';
+import * as moment from 'moment-timezone';
+import moment__default from 'moment-timezone';
 import * as i2 from 'ngx-dropdown-list';
 import { DropdownListModule } from 'ngx-dropdown-list';
 import { SelectionModel } from '@angular/cdk/collections';
@@ -14,7 +15,7 @@ import * as chartjs from 'chart.js';
 import { Chart as Chart$2 } from 'chart.js';
 import { parse } from 'papaparse';
 import * as hammerjs from 'hammerjs';
-import * as moment_module from 'moment';
+import moment$1 from 'moment';
 import * as i8 from 'ngx-selection-table';
 import { SelectionTableModule } from 'ngx-selection-table';
 
@@ -548,7 +549,7 @@ function _getTimeRange(time) {
  * get default local time zone
  */
 function getDefaultTimezone() {
-    return moment$2.tz.guess();
+    return moment__default.tz.guess();
 }
 /**
  * Get time from provided timezone, using this only because chart.js doesn't support timezone.
@@ -561,8 +562,8 @@ function getTimeFromTimeZone(time, timezone) {
         timezone = getDefaultTimezone();
         console.warn(`getTimeFromTimeZone - Input timezone is null, returning the local (${timezone}) time. `);
     }
-    const utcOffset = moment$2.tz.zone(timezone).utcOffset(time * 1000);
-    const currentOffset = moment$2.tz.zone(getDefaultTimezone()).utcOffset(time * 1000);
+    const utcOffset = moment__default.tz.zone(timezone).utcOffset(time * 1000);
+    const currentOffset = moment__default.tz.zone(getDefaultTimezone()).utcOffset(time * 1000);
     // convert to utc and then to selected timezone
     return time + currentOffset * 60 - utcOffset * 60;
 }
@@ -570,16 +571,7 @@ function getTimeFromTimeZone(time, timezone) {
  * Get time formatted with the provided timezone
  */
 function getTimeString(time) {
-    console.log('3333312', time, '4444434', moment$2(time));
-    const dateTime = new Date(time);
-    const year = dateTime.getFullYear();
-    const month = ('0' + (dateTime.getMonth() + 1)).slice(-2);
-    const date = ('0' + dateTime.getDate()).slice(-2);
-    const hour = ('0' + dateTime.getHours()).slice(-2);
-    const minute = ('0' + dateTime.getMinutes()).slice(-2);
-    const second = ('0' + dateTime.getSeconds()).slice(-2);
-    return `${year}-${month}-${date} ${hour}:${minute}:${second}}`;
-    // return moment(time).format('YYYY-MM-DD HH:mm:ss');
+    return moment__default(time).format('YYYY-MM-DD HH:mm:ss');
 }
 /**
  * Get the time range string by time array, eg: 2018-10-25 10:10:00 ~ 2018-10-25 12:12:00
@@ -781,7 +773,7 @@ class TimezoneSelectorService {
      */
     getZones() {
         const timezones = [];
-        const zones = moment$2.tz.names();
+        const zones = moment.tz.names();
         zones.forEach(zone => {
             // get region
             let region;
@@ -838,7 +830,7 @@ class TimezoneSelectorComponent {
         return tz[tz.length - 1].replace('_', ' ');
     }
     _getOffset(zone) {
-        let offset = moment$2.tz(zone).utcOffset();
+        let offset = moment__default.tz(zone).utcOffset();
         const neg = offset < 0;
         if (neg) {
             offset = -1 * offset;
@@ -957,7 +949,7 @@ class PortSelectorComponent {
 }
 PortSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PortSelectorComponent, deps: [{ token: PortSelectorService }], target: i0.ɵɵFactoryTarget.Component });
 PortSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PortSelectorComponent, selector: "port-selector", inputs: { disabled: "disabled", port: "port", ports: "ports" }, outputs: { portChange: "portChange" }, providers: [PortSelectorService], ngImport: i0, template: `
-    <label>
+    <label style="width: 100%">
       <ngx-dropdown-list (selectionChange)="onChange($event)"
                          [items]="displayPorts"
                          [multiSelection]="false"
@@ -973,7 +965,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             args: [{
                     selector: 'port-selector',
                     template: `
-    <label>
+    <label style="width: 100%">
       <ngx-dropdown-list (selectionChange)="onChange($event)"
                          [items]="displayPorts"
                          [multiSelection]="false"
@@ -2713,7 +2705,6 @@ class LTTBDataMipmap extends DataMipmap {
     }
 }
 
-const moment$1 = (window && window.moment) ? window.moment : moment_module;
 function getCompareValue(value) {
     if (typeof value === 'number') {
         return value;
@@ -2792,7 +2783,6 @@ function cullData(data, range) {
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-const moment = (window && window.moment) ? window.moment : moment_module;
 // Using dynamic flag to fix the issue of ng-packagr #696: Lambda not supported
 // @dynamic
 /**
@@ -2849,8 +2839,8 @@ class ResponsiveDownsamplePlugin {
         if (isNil(xScale)) {
             return null;
         }
-        const start = moment(xScale.getValueForPixel(xScale.left));
-        const end = moment(xScale.getValueForPixel(xScale.left + 1));
+        const start = moment$1(xScale.getValueForPixel(xScale.left));
+        const end = moment$1(xScale.getValueForPixel(xScale.left + 1));
         const targetResolution = end.diff(start);
         return targetResolution * options.desiredDataPointDistance;
     }
@@ -3548,12 +3538,13 @@ class NameServerHistoryComponent {
             { id: HtmlElement.resetChartButton, status: false }
         ]);
     }
-    ngOnChanges(changes) {
+    async ngOnChanges(changes) {
         const fbc = changes.fileBuffer;
         if (fbc && fbc.currentValue && fbc.currentValue !== fbc.previousValue) {
             // simulate selecting file
             const simulatedEvent = { target: { files: [blobToFile(this.fileBuffer, this.streamModeFileName)] } };
-            this.fileSelected(simulatedEvent);
+            await this.fileSelected(simulatedEvent);
+            this.showChart();
         }
     }
     /**
@@ -3610,12 +3601,12 @@ class NameServerHistoryComponent {
     /**
      * select name server history file, currently only supports 1 file.
      */
-    fileSelected(event) {
+    async fileSelected(event) {
         const selectedFile = getFileFromInput(event.target);
         if (selectedFile) {
             if (!isSameFile(this.file, selectedFile)) {
                 // init port selector
-                this._initPortSelector().catch(e => this._showMessage(Alert.error, e));
+                await this._initPortSelector().catch(e => this._showMessage(Alert.error, e));
                 this.file = selectedFile;
                 this.abbreviatedFileName = getAbbreviatedFileName(this.file.name);
                 // after file has been selected, the show chart button needs to be enabled
@@ -3995,7 +3986,7 @@ class NameServerHistoryComponent {
     }
 }
 NameServerHistoryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NameServerHistoryComponent, deps: [{ token: FileService }, { token: ChartService }, { token: UIService }], target: i0.ɵɵFactoryTarget.Component });
-NameServerHistoryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NameServerHistoryComponent, selector: "ngx-hana-nameserver-history-viewer", inputs: { defaultSelectedItems: "defaultSelectedItems", hideMeasureColumns: "hideMeasureColumns", maxRowsLimitation: "maxRowsLimitation", showInstruction: "showInstruction", timezone: "timezone", fileBuffer: "fileBuffer", streamModeFileName: "streamModeFileName" }, providers: [FileService, ChartService, UIService], viewQueries: [{ propertyName: "nameserverHistoryAllRef", first: true, predicate: ["nameserverHistoryAll"], descendants: true, read: ElementRef }, { propertyName: "nameserverHistoryContentRef", first: true, predicate: ["nameserverHistoryContent"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div #nameserverHistoryAll class=\"nameserver-history-all\" (window:resize)=\"onResize()\">\r\n  <div class=\"toolbar-chart\">\r\n    <div class=\"upload-box-content\">\r\n      <div *ngIf=\"!showReadFileProgress\">\r\n        <file-drop-input (fileDrop)=\"fileDropped($event)\" (fileInput)=\"fileSelected($event)\"\r\n                         [dropAreaText]= \"abbreviatedFileName\"\r\n                         [inputAreaText]=\"'Browse'\"\r\n                         [title]=\"file?.name? file.name:'Select a name server history file from your local disk.'\"\r\n                         *ngIf=\"!fileBuffer\">\r\n        </file-drop-input>\r\n        <p *ngIf=\"fileBuffer\">{{streamModeFileName || 'nameserver_history.trc (stream mode)'}}</p>\r\n      </div>\r\n      <div *ngIf=\"showReadFileProgress\">\r\n        <progress-bar [progress]=\"readProgress\"></progress-bar>\r\n      </div>\r\n    </div>\r\n    <div class=\"input-time\">\r\n     <div class=\"input-time-range\">\r\n       <time-range-selector [disabled]=\"showReadFileProgress\" [(dateTimeRange)]=\"dateTimeRange\"></time-range-selector>\r\n     </div>\r\n      <div class=\"timezone-selector\">\r\n        <timezone-selector [(timezone)]=\"timezone\" [disabled]=\"showReadFileProgress\"></timezone-selector>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"port-selection\">\r\n      <div class=\"port-selector\">\r\n        <port-selector (portChange)=\"switchPortForChart($event)\" [(port)]=\"port\" [ports]=\"ports\" [disabled]=\"showReadFileProgress\"></port-selector>\r\n      </div>\r\n      <div class=\"port-load-button\">\r\n        <button (click)=\"loadPorts()\" title=\"Load all ports from name server history trace file.\" [disabled]=\"!enableShowChartButton || port || !enableLoadPortsButton\">{{showReadFileProgress? \"Loading...\" : \"Load\"}}</button>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"chart-operation\">\r\n      <div class=\"left\">\r\n        <button (click)=\"showChart()\" title=\"Load and display all data from name server history trace file.\" [disabled]=\"!enableShowChartButton\">{{showReadFileProgress? \"Loading...\" : \"Show\"}}</button>\r\n      </div>\r\n      <div class=\"right\">\r\n        <button (click)=\"resetChart()\" title=\"Reset zoom of chart.\" [disabled]=\"showReadFileProgress || !enableResetChartButton\">Reset Chart</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div #nameserverHistoryContent class=\"nameserver-history-content\">\r\n    <div class=\"nameserver-history-content-chart\">\r\n      <instruction [(show)]=\"showInstruction\" *ngIf=\"!showChartFlag && showInstruction\"\r\n                   [step1Finished]=\"!!file\"\r\n                   [step2Finished]=\"dateTimeRange && (!!dateTimeRange[0] || !!dateTimeRange[1]) || timezone != defaultTimezone\"\r\n                   [step3Finished]=\"!!port\"\r\n                   [step4Finished]=\"stepShowChart && !enableShowChartButton\"\r\n                   [step5Finished]=\"false\">\r\n      </instruction>\r\n      <canvas id=\"chartNameServerHistory\" ></canvas>\r\n    </div>\r\n    <div class=\"nameserver-history-content-controller\" >\r\n      <ngx-selection-table (change)=\"selectItem($event)\" *ngIf=\"showChartFlag\"\r\n                           [filter]=\"true\"\r\n                           [checkbox]=\"true\"\r\n                           [tableSource]=\"tableSource\"\r\n                           [keyColumn]=\"kpiColumn\"\r\n                           [hiddenColumns]=\"hiddenColumns\"\r\n                           [tooltipColumn]=\"descColumn\"\r\n                           [searchStyle]=\"searchType\"\r\n                           [searchColumn]=\"kpiColumn\"\r\n                           [multiSelection]=\"true\">\r\n      </ngx-selection-table>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"message-container\" *ngIf=\"alertMessage\">\r\n  <alert [(alertMessage)]=\"alertMessage\" [alertType]=\"alertType\" [alertTimeout]=\"30000\"></alert>\r\n</div>\r\n", styles: [":host *,:host *:before,:host *:after{box-sizing:inherit;display:inherit;font-size:inherit;font-weight:inherit;font-family:inherit}:host .hover-box,:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button:hover{outline:0;box-shadow:0 0 6px #23adff}:host .dashed-box,:host .nameserver-history-all .toolbar-chart .chart-operation button,:host .nameserver-history-all .toolbar-chart .port-selection,:host .nameserver-history-all .toolbar-chart .input-time,:host .nameserver-history-all .toolbar-chart .upload-box-content{background:#f8f8f8;box-shadow:inset 0 20px 20px -20px #0009;border:1px dashed #0782d0}:host .solid-box,:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button{background:#fff none;border:1px solid #ccc;border-radius:4px;line-height:1.42857143}:host .nameserver-history-all{width:98%;min-width:1314px;height:auto;border:1px none #0782d0;border-bottom-style:dashed;margin:3px 1%;box-sizing:border-box;display:inline-block;font-size:14px;font-weight:400;font-family:Helvetica,Arial,sans-serif}:host .nameserver-history-all .toolbar-chart{width:100%;height:48px}:host .nameserver-history-all .toolbar-chart button{text-align:center;white-space:nowrap;vertical-align:middle}:host .nameserver-history-all .toolbar-chart button:hover{text-shadow:1px 1px 3px royalblue;cursor:pointer;font-weight:600}:host .nameserver-history-all .toolbar-chart button:disabled{text-shadow:none;opacity:.65;cursor:default;color:#a9a9a9;font-weight:400}:host .nameserver-history-all .toolbar-chart .upload-box-content{width:20%;height:100%;float:left;text-align:center;color:#00008b}:host .nameserver-history-all .toolbar-chart .input-time{margin-left:1%;margin-right:1%;width:43%;height:100%}:host .nameserver-history-all .toolbar-chart .input-time .input-time-range{height:100%;width:57%;float:left}:host .nameserver-history-all .toolbar-chart .input-time .timezone-selector{margin-top:6px;height:100%;width:42.5%;margin-right:.5%;float:right}:host .nameserver-history-all .toolbar-chart .port-selection{width:14%;margin-right:1%;height:48px}:host .nameserver-history-all .toolbar-chart .port-selection .port-selector{margin-top:6px;margin-left:2%;margin-right:1%;width:47%;float:left}:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button{margin-top:6px;margin-left:1%;margin-right:2%;width:47%;float:right}:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button{color:#333;width:100%;padding:6px 12px;margin-bottom:0}:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button:hover{text-shadow:None;font-weight:400}:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button:disabled{box-shadow:none}:host .nameserver-history-all .toolbar-chart .chart-operation{width:20%;height:48px;float:right}:host .nameserver-history-all .toolbar-chart .chart-operation .left{margin-right:1%;width:49%;height:100%;float:left}:host .nameserver-history-all .toolbar-chart .chart-operation .right{width:50%;height:100%;float:right}:host .nameserver-history-all .toolbar-chart .chart-operation button{width:100%;height:100%;color:#00008b}:host .nameserver-history-all .nameserver-history-content{width:100%;height:730px;margin:5px 5px 5px 0}:host .nameserver-history-all .nameserver-history-content .nameserver-history-content-chart{width:75%;height:100%;position:relative;float:left}:host .nameserver-history-all .nameserver-history-content .nameserver-history-content-controller{width:25%;height:100%;float:right;overflow:auto}:host .message-container{width:98%;margin:0 1%;box-sizing:border-box;display:inline-block}\n"], components: [{ type: FileDropInputComponent, selector: "file-drop-input", inputs: ["dropAreaText", "inputAreaText"], outputs: ["fileDrop", "fileInput"] }, { type: ProgressBarComponent, selector: "progress-bar", inputs: ["progress"] }, { type: TimeRangeSelectorComponent, selector: "time-range-selector", inputs: ["disabled", "dateTimeRange"], outputs: ["dateTimeRangeChange"] }, { type: TimezoneSelectorComponent, selector: "timezone-selector", inputs: ["disabled", "timezone"], outputs: ["timezoneChange"] }, { type: PortSelectorComponent, selector: "port-selector", inputs: ["disabled", "port", "ports"], outputs: ["portChange"] }, { type: InstructionComponent, selector: "instruction", inputs: ["step1Finished", "step2Finished", "step3Finished", "step4Finished", "step5Finished", "show"], outputs: ["showChange"] }, { type: i8.SelectionTableComponent, selector: "ngx-selection-table", inputs: ["filter", "keyColumn", "tableSource", "checkbox", "multiSelection", "clickToSelect", "hiddenColumns", "tooltipColumn", "searchStyle", "searchColumn"], outputs: ["change"] }, { type: AlertComponent, selector: "alert", inputs: ["alertMessage", "alertType", "alertTimeout"], outputs: ["alertMessageChange"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+NameServerHistoryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NameServerHistoryComponent, selector: "ngx-hana-nameserver-history-viewer", inputs: { defaultSelectedItems: "defaultSelectedItems", hideMeasureColumns: "hideMeasureColumns", maxRowsLimitation: "maxRowsLimitation", showInstruction: "showInstruction", timezone: "timezone", fileBuffer: "fileBuffer", streamModeFileName: "streamModeFileName", autoDisplay: "autoDisplay" }, providers: [FileService, ChartService, UIService], viewQueries: [{ propertyName: "nameserverHistoryAllRef", first: true, predicate: ["nameserverHistoryAll"], descendants: true, read: ElementRef }, { propertyName: "nameserverHistoryContentRef", first: true, predicate: ["nameserverHistoryContent"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div #nameserverHistoryAll class=\"nameserver-history-all\" (window:resize)=\"onResize()\">\r\n  <div class=\"toolbar-chart\">\r\n    <div class=\"upload-box-content\">\r\n      <div *ngIf=\"!showReadFileProgress\">\r\n        <file-drop-input (fileDrop)=\"fileDropped($event)\" (fileInput)=\"fileSelected($event)\"\r\n                         [dropAreaText]= \"abbreviatedFileName\"\r\n                         [inputAreaText]=\"'Browse'\"\r\n                         [title]=\"file?.name? file.name:'Select a name server history file from your local disk.'\"\r\n                         *ngIf=\"!fileBuffer\">\r\n        </file-drop-input>\r\n        <p *ngIf=\"fileBuffer\">{{streamModeFileName || 'nameserver_history.trc (stream mode)'}}</p>\r\n      </div>\r\n      <div *ngIf=\"showReadFileProgress\">\r\n        <progress-bar [progress]=\"readProgress\"></progress-bar>\r\n      </div>\r\n    </div>\r\n    <div class=\"input-time\">\r\n     <div class=\"input-time-range\">\r\n       <time-range-selector [disabled]=\"showReadFileProgress\" [(dateTimeRange)]=\"dateTimeRange\"></time-range-selector>\r\n     </div>\r\n      <div class=\"timezone-selector\">\r\n        <timezone-selector [(timezone)]=\"timezone\" [disabled]=\"showReadFileProgress\"></timezone-selector>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"port-selection\">\r\n      <div class=\"port-selector\">\r\n        <port-selector (portChange)=\"switchPortForChart($event)\" [(port)]=\"port\" [ports]=\"ports\" [disabled]=\"showReadFileProgress\"></port-selector>\r\n      </div>\r\n      <div class=\"port-load-button\">\r\n        <button (click)=\"loadPorts()\" title=\"Load all ports from name server history trace file.\" [disabled]=\"!enableShowChartButton || port || !enableLoadPortsButton\">{{showReadFileProgress? \"Loading...\" : \"Load\"}}</button>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"chart-operation\">\r\n      <div class=\"left\">\r\n        <button (click)=\"showChart()\" title=\"Load and display all data from name server history trace file.\" [disabled]=\"!enableShowChartButton\">{{showReadFileProgress? \"Loading...\" : \"Show\"}}</button>\r\n      </div>\r\n      <div class=\"right\">\r\n        <button (click)=\"resetChart()\" title=\"Reset zoom of chart.\" [disabled]=\"showReadFileProgress || !enableResetChartButton\">Reset Chart</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div #nameserverHistoryContent class=\"nameserver-history-content\">\r\n    <div class=\"nameserver-history-content-chart\">\r\n      <instruction [(show)]=\"showInstruction\" *ngIf=\"!showChartFlag && showInstruction\"\r\n                   [step1Finished]=\"!!file\"\r\n                   [step2Finished]=\"dateTimeRange && (!!dateTimeRange[0] || !!dateTimeRange[1]) || timezone != defaultTimezone\"\r\n                   [step3Finished]=\"!!port\"\r\n                   [step4Finished]=\"stepShowChart && !enableShowChartButton\"\r\n                   [step5Finished]=\"false\">\r\n      </instruction>\r\n      <canvas id=\"chartNameServerHistory\" ></canvas>\r\n    </div>\r\n    <div class=\"nameserver-history-content-controller\" >\r\n      <ngx-selection-table (change)=\"selectItem($event)\" *ngIf=\"showChartFlag\"\r\n                           [filter]=\"true\"\r\n                           [checkbox]=\"true\"\r\n                           [tableSource]=\"tableSource\"\r\n                           [keyColumn]=\"kpiColumn\"\r\n                           [hiddenColumns]=\"hiddenColumns\"\r\n                           [tooltipColumn]=\"descColumn\"\r\n                           [searchStyle]=\"searchType\"\r\n                           [searchColumn]=\"kpiColumn\"\r\n                           [multiSelection]=\"true\">\r\n      </ngx-selection-table>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"message-container\" *ngIf=\"alertMessage\">\r\n  <alert [(alertMessage)]=\"alertMessage\" [alertType]=\"alertType\" [alertTimeout]=\"30000\"></alert>\r\n</div>\r\n", styles: [":host *,:host *:before,:host *:after{box-sizing:inherit;display:inherit;font-size:inherit;font-weight:inherit;font-family:inherit}:host .hover-box,:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button:hover{outline:0;box-shadow:0 0 6px #23adff}:host .dashed-box,:host .nameserver-history-all .toolbar-chart .chart-operation button,:host .nameserver-history-all .toolbar-chart .port-selection,:host .nameserver-history-all .toolbar-chart .input-time,:host .nameserver-history-all .toolbar-chart .upload-box-content{background:#f8f8f8;box-shadow:inset 0 20px 20px -20px #0009;border:1px dashed #0782d0}:host .solid-box,:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button{background:#fff none;border:1px solid #ccc;border-radius:4px;line-height:1.42857143}:host .nameserver-history-all{width:98%;min-width:1314px;height:auto;border:1px none #0782d0;border-bottom-style:dashed;margin:3px 1%;box-sizing:border-box;display:inline-block;font-size:14px;font-weight:400;font-family:Helvetica,Arial,sans-serif}:host .nameserver-history-all .toolbar-chart{width:100%;height:48px}:host .nameserver-history-all .toolbar-chart button{text-align:center;white-space:nowrap;vertical-align:middle}:host .nameserver-history-all .toolbar-chart button:hover{text-shadow:1px 1px 3px royalblue;cursor:pointer;font-weight:600}:host .nameserver-history-all .toolbar-chart button:disabled{text-shadow:none;opacity:.65;cursor:default;color:#a9a9a9;font-weight:400}:host .nameserver-history-all .toolbar-chart .upload-box-content{width:20%;height:100%;float:left;text-align:center;color:#00008b}:host .nameserver-history-all .toolbar-chart .input-time{margin-left:1%;margin-right:1%;width:43%;height:100%}:host .nameserver-history-all .toolbar-chart .input-time .input-time-range{height:100%;width:57%;float:left}:host .nameserver-history-all .toolbar-chart .input-time .timezone-selector{margin-top:6px;height:100%;width:42.5%;margin-right:.5%;float:right}:host .nameserver-history-all .toolbar-chart .port-selection{width:14%;margin-right:1%;height:48px}:host .nameserver-history-all .toolbar-chart .port-selection .port-selector{margin-top:6px;margin-left:2%;margin-right:1%;width:47%;float:left}:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button{margin-top:6px;margin-left:1%;margin-right:2%;width:47%;float:right}:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button{color:#333;width:100%;padding:6px 12px;margin-bottom:0}:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button:hover{text-shadow:None;font-weight:400}:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button:disabled{box-shadow:none}:host .nameserver-history-all .toolbar-chart .chart-operation{width:20%;height:48px;float:right}:host .nameserver-history-all .toolbar-chart .chart-operation .left{margin-right:1%;width:49%;height:100%;float:left}:host .nameserver-history-all .toolbar-chart .chart-operation .right{width:50%;height:100%;float:right}:host .nameserver-history-all .toolbar-chart .chart-operation button{width:100%;height:100%;color:#00008b}:host .nameserver-history-all .nameserver-history-content{width:100%;height:730px;margin:5px 5px 5px 0}:host .nameserver-history-all .nameserver-history-content .nameserver-history-content-chart{width:75%;height:100%;position:relative;float:left}:host .nameserver-history-all .nameserver-history-content .nameserver-history-content-controller{width:25%;height:100%;float:right;overflow:auto}:host .message-container{width:98%;margin:0 1%;box-sizing:border-box;display:inline-block}\n"], components: [{ type: FileDropInputComponent, selector: "file-drop-input", inputs: ["dropAreaText", "inputAreaText"], outputs: ["fileDrop", "fileInput"] }, { type: ProgressBarComponent, selector: "progress-bar", inputs: ["progress"] }, { type: TimeRangeSelectorComponent, selector: "time-range-selector", inputs: ["disabled", "dateTimeRange"], outputs: ["dateTimeRangeChange"] }, { type: TimezoneSelectorComponent, selector: "timezone-selector", inputs: ["disabled", "timezone"], outputs: ["timezoneChange"] }, { type: PortSelectorComponent, selector: "port-selector", inputs: ["disabled", "port", "ports"], outputs: ["portChange"] }, { type: InstructionComponent, selector: "instruction", inputs: ["step1Finished", "step2Finished", "step3Finished", "step4Finished", "step5Finished", "show"], outputs: ["showChange"] }, { type: i8.SelectionTableComponent, selector: "ngx-selection-table", inputs: ["filter", "keyColumn", "tableSource", "checkbox", "multiSelection", "clickToSelect", "hiddenColumns", "tooltipColumn", "searchStyle", "searchColumn"], outputs: ["change"] }, { type: AlertComponent, selector: "alert", inputs: ["alertMessage", "alertType", "alertTimeout"], outputs: ["alertMessageChange"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NameServerHistoryComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-hana-nameserver-history-viewer', providers: [FileService, ChartService, UIService], template: "<div #nameserverHistoryAll class=\"nameserver-history-all\" (window:resize)=\"onResize()\">\r\n  <div class=\"toolbar-chart\">\r\n    <div class=\"upload-box-content\">\r\n      <div *ngIf=\"!showReadFileProgress\">\r\n        <file-drop-input (fileDrop)=\"fileDropped($event)\" (fileInput)=\"fileSelected($event)\"\r\n                         [dropAreaText]= \"abbreviatedFileName\"\r\n                         [inputAreaText]=\"'Browse'\"\r\n                         [title]=\"file?.name? file.name:'Select a name server history file from your local disk.'\"\r\n                         *ngIf=\"!fileBuffer\">\r\n        </file-drop-input>\r\n        <p *ngIf=\"fileBuffer\">{{streamModeFileName || 'nameserver_history.trc (stream mode)'}}</p>\r\n      </div>\r\n      <div *ngIf=\"showReadFileProgress\">\r\n        <progress-bar [progress]=\"readProgress\"></progress-bar>\r\n      </div>\r\n    </div>\r\n    <div class=\"input-time\">\r\n     <div class=\"input-time-range\">\r\n       <time-range-selector [disabled]=\"showReadFileProgress\" [(dateTimeRange)]=\"dateTimeRange\"></time-range-selector>\r\n     </div>\r\n      <div class=\"timezone-selector\">\r\n        <timezone-selector [(timezone)]=\"timezone\" [disabled]=\"showReadFileProgress\"></timezone-selector>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"port-selection\">\r\n      <div class=\"port-selector\">\r\n        <port-selector (portChange)=\"switchPortForChart($event)\" [(port)]=\"port\" [ports]=\"ports\" [disabled]=\"showReadFileProgress\"></port-selector>\r\n      </div>\r\n      <div class=\"port-load-button\">\r\n        <button (click)=\"loadPorts()\" title=\"Load all ports from name server history trace file.\" [disabled]=\"!enableShowChartButton || port || !enableLoadPortsButton\">{{showReadFileProgress? \"Loading...\" : \"Load\"}}</button>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"chart-operation\">\r\n      <div class=\"left\">\r\n        <button (click)=\"showChart()\" title=\"Load and display all data from name server history trace file.\" [disabled]=\"!enableShowChartButton\">{{showReadFileProgress? \"Loading...\" : \"Show\"}}</button>\r\n      </div>\r\n      <div class=\"right\">\r\n        <button (click)=\"resetChart()\" title=\"Reset zoom of chart.\" [disabled]=\"showReadFileProgress || !enableResetChartButton\">Reset Chart</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div #nameserverHistoryContent class=\"nameserver-history-content\">\r\n    <div class=\"nameserver-history-content-chart\">\r\n      <instruction [(show)]=\"showInstruction\" *ngIf=\"!showChartFlag && showInstruction\"\r\n                   [step1Finished]=\"!!file\"\r\n                   [step2Finished]=\"dateTimeRange && (!!dateTimeRange[0] || !!dateTimeRange[1]) || timezone != defaultTimezone\"\r\n                   [step3Finished]=\"!!port\"\r\n                   [step4Finished]=\"stepShowChart && !enableShowChartButton\"\r\n                   [step5Finished]=\"false\">\r\n      </instruction>\r\n      <canvas id=\"chartNameServerHistory\" ></canvas>\r\n    </div>\r\n    <div class=\"nameserver-history-content-controller\" >\r\n      <ngx-selection-table (change)=\"selectItem($event)\" *ngIf=\"showChartFlag\"\r\n                           [filter]=\"true\"\r\n                           [checkbox]=\"true\"\r\n                           [tableSource]=\"tableSource\"\r\n                           [keyColumn]=\"kpiColumn\"\r\n                           [hiddenColumns]=\"hiddenColumns\"\r\n                           [tooltipColumn]=\"descColumn\"\r\n                           [searchStyle]=\"searchType\"\r\n                           [searchColumn]=\"kpiColumn\"\r\n                           [multiSelection]=\"true\">\r\n      </ngx-selection-table>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"message-container\" *ngIf=\"alertMessage\">\r\n  <alert [(alertMessage)]=\"alertMessage\" [alertType]=\"alertType\" [alertTimeout]=\"30000\"></alert>\r\n</div>\r\n", styles: [":host *,:host *:before,:host *:after{box-sizing:inherit;display:inherit;font-size:inherit;font-weight:inherit;font-family:inherit}:host .hover-box,:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button:hover{outline:0;box-shadow:0 0 6px #23adff}:host .dashed-box,:host .nameserver-history-all .toolbar-chart .chart-operation button,:host .nameserver-history-all .toolbar-chart .port-selection,:host .nameserver-history-all .toolbar-chart .input-time,:host .nameserver-history-all .toolbar-chart .upload-box-content{background:#f8f8f8;box-shadow:inset 0 20px 20px -20px #0009;border:1px dashed #0782d0}:host .solid-box,:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button{background:#fff none;border:1px solid #ccc;border-radius:4px;line-height:1.42857143}:host .nameserver-history-all{width:98%;min-width:1314px;height:auto;border:1px none #0782d0;border-bottom-style:dashed;margin:3px 1%;box-sizing:border-box;display:inline-block;font-size:14px;font-weight:400;font-family:Helvetica,Arial,sans-serif}:host .nameserver-history-all .toolbar-chart{width:100%;height:48px}:host .nameserver-history-all .toolbar-chart button{text-align:center;white-space:nowrap;vertical-align:middle}:host .nameserver-history-all .toolbar-chart button:hover{text-shadow:1px 1px 3px royalblue;cursor:pointer;font-weight:600}:host .nameserver-history-all .toolbar-chart button:disabled{text-shadow:none;opacity:.65;cursor:default;color:#a9a9a9;font-weight:400}:host .nameserver-history-all .toolbar-chart .upload-box-content{width:20%;height:100%;float:left;text-align:center;color:#00008b}:host .nameserver-history-all .toolbar-chart .input-time{margin-left:1%;margin-right:1%;width:43%;height:100%}:host .nameserver-history-all .toolbar-chart .input-time .input-time-range{height:100%;width:57%;float:left}:host .nameserver-history-all .toolbar-chart .input-time .timezone-selector{margin-top:6px;height:100%;width:42.5%;margin-right:.5%;float:right}:host .nameserver-history-all .toolbar-chart .port-selection{width:14%;margin-right:1%;height:48px}:host .nameserver-history-all .toolbar-chart .port-selection .port-selector{margin-top:6px;margin-left:2%;margin-right:1%;width:47%;float:left}:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button{margin-top:6px;margin-left:1%;margin-right:2%;width:47%;float:right}:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button{color:#333;width:100%;padding:6px 12px;margin-bottom:0}:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button:hover{text-shadow:None;font-weight:400}:host .nameserver-history-all .toolbar-chart .port-selection .port-load-button button:disabled{box-shadow:none}:host .nameserver-history-all .toolbar-chart .chart-operation{width:20%;height:48px;float:right}:host .nameserver-history-all .toolbar-chart .chart-operation .left{margin-right:1%;width:49%;height:100%;float:left}:host .nameserver-history-all .toolbar-chart .chart-operation .right{width:50%;height:100%;float:right}:host .nameserver-history-all .toolbar-chart .chart-operation button{width:100%;height:100%;color:#00008b}:host .nameserver-history-all .nameserver-history-content{width:100%;height:730px;margin:5px 5px 5px 0}:host .nameserver-history-all .nameserver-history-content .nameserver-history-content-chart{width:75%;height:100%;position:relative;float:left}:host .nameserver-history-all .nameserver-history-content .nameserver-history-content-controller{width:25%;height:100%;float:right;overflow:auto}:host .message-container{width:98%;margin:0 1%;box-sizing:border-box;display:inline-block}\n"] }]
@@ -4019,6 +4010,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], streamModeFileName: [{
                 type: Input
+            }], autoDisplay: [{
+                type: Input
             }] } });
 
 class NameserverHistoryModule {