npm - axidio-styleguide-library1-v2 - Versions diffs - 0.6.84 → 0.6.85 - Mend

axidio-styleguide-library1-v2 0.6.84 → 0.6.85

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/esm2022/lib/chart-header-v3/chart-header-v3.component.mjs CHANGED Viewed

@@ -36,11 +36,11 @@ export class ChartHeaderV3Component {
         this.zoomInZoomOutClick.emit({ isZoomOut: this.isZoomedOut, event: event });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChartHeaderV3Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ChartHeaderV3Component, selector: "lib-chart-header-v3", inputs: { chartData: "chartData", chartConfiguration: "chartConfiguration" }, outputs: { compareByFilterSelection: "compareByFilterSelection", zoomInZoomOutClick: "zoomInZoomOutClick" }, ngImport: i0, template: "<div class=\"lib-display-flex header-title-styles\" [ngClass]=\"\r\n    !chartData.dropdownData2 &&\r\n    !chartData.dropdownData1 &&\r\n    chartData.data.length <= 8\r\n      ? 'lib-justify-content-start'\r\n      : 'lib-justify-content-space-between'\r\n  \">\r\n  <span class=\"legend-latest-holder\" *ngIf=\"\r\n      chartData.data &&\r\n      chartData.metaData.default_dept &&\r\n      (chartConfiguration.isToggleVisible || chartData.metaData.isToggleVisible)\r\n    \">\r\n    <span *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"><span class=\"legends-latest\"\r\n        *ngIf=\"chartData.metaData.default_dept == item.key\" [style.background-color]=\"item.value\"></span></span>\r\n    <span class=\"marginRight-30 legend-style font-size-2\" *ngIf=\"chartData.metaData.default_dept\">\r\n      Default Dept: {{ chartData.metaData.default_dept }}\r\n    </span>\r\n    <span *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"><span *ngIf=\"\r\n          item.key != chartData.metaData.default_dept &&\r\n          chartData.metaData.default_dept\r\n        \" class=\"legends-latest\" [style.background-color]=\"item.value\"></span></span>\r\n    <span class=\"legend-style font-size-2\" *ngIf=\"isLegendVisible() && chartData.metaData.default_dept\">Cross Train\r\n      Dept</span>\r\n  </span>\r\n  <span class=\"legend-latest-holder legend-width\"\r\n    [ngClass]=\"chartData.metaData.colorLegendVisibleOnTopLeft ? '' : 'invisible'\"\r\n    *ngIf=\"chartData.data && !chartData.metaData.default_dept\">\r\n    <span class=\"lib-display-flex lib-align-items-center\"\r\n      *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"><span class=\"legends-latest\"\r\n        [style.background-color]=\"item.value\"></span>\r\n      <span class=\"marginRight-20 legend-style font-size-1 lib-white-space-nowrap\">\r\n        {{ item.key }}\r\n      </span>\r\n    </span>\r\n  </span>\r\n  <!-- <span class=\"display-flex\"> -->\r\n    <!-- <span *ngIf=\"\r\n        chartData.dropdownData1 &&\r\n        chartData.metaData.breadcrumbLength &&\r\n        chartData.metaData.breadcrumbLength == 1\r\n      \">\r\n      <lib-dropdown [dropdownData]=\"chartData.dropdownData1\" [isDropdownOpen]=\"this.isDD1Open\"\r\n        (ddClicked)=\"handleDD1Click()\" (selectedFromDropdown)=\"handleCompareByFilterSelection($event)\"></lib-dropdown>\r\n    </span>\r\n    <span *ngIf=\"\r\n        chartData.dropdownData2 &&\r\n        chartData.metaData.breadcrumbLength &&\r\n        chartData.metaData.breadcrumbLength == 1\r\n      \">\r\n      <lib-dropdown [dropdownData]=\"chartData.dropdownData2\" [isDropdownOpen]=\"this.isDD2Open\"\r\n        (ddClicked)=\"handleDD2Click()\" (selectedFromDropdown)=\"handleCompareByFilterSelection($event)\"\r\n        [isCheckboxVisible]=\"chartData.metaData.isCheckboxVisible\"\r\n        [dropdownHeaderName]=\"chartData.metaData.dropdownHeaderName\"></lib-dropdown>\r\n    </span> -->\r\n    <!-- <span class=\"zoomIcons-holder\" *ngIf=\"chartData.data && chartData.data.length > 8\">\r\n      <span class=\"zoomIcons\" title=\"Zoom In\" [ngClass]=\"!isZoomedOut ? 'zoom-active' : 'zoom-inactive'\"\r\n        (click)=\"isZoomOutSelected(false, $event)\">\r\n        <i class=\"fa fa-search-plus\"></i>\r\n      </span>\r\n      <span class=\"zoomIcons\" title=\"Zoom Out\" [ngClass]=\"isZoomedOut ? 'zoom-active' : 'zoom-inactive'\"\r\n        (click)=\"isZoomOutSelected(true, $event)\">\r\n        <i class=\"fa fa-search-minus\"></i>\r\n      </span>\r\n    </span>\r\n  </span> -->\r\n</div>", styles: [".invisible{visibility:hidden}.hidden{visibility:hidden!important}.content-hidden{visibility:hidden}.opacity-hidden{opacity:0;pointer-events:none}@media (min-height: 500px){.legend-width{max-width:550px;overflow:auto}}@media screen and (min-width: 1920px) and (min-height: 1080px){.header-title-styles{margin-left:14px;margin-top:20px;margin-bottom:25px}.legend-width{max-width:700px;overflow:auto}}@media screen and (max-height: 768px){.header-title-styles{margin-left:14px;margin-top:12px;margin-bottom:20px}.legend-width{max-width:500px;overflow:auto}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ChartHeaderV3Component, selector: "lib-chart-header-v3", inputs: { chartData: "chartData", chartConfiguration: "chartConfiguration" }, outputs: { compareByFilterSelection: "compareByFilterSelection", zoomInZoomOutClick: "zoomInZoomOutClick" }, ngImport: i0, template: "<div class=\"lib-display-flex header-title-styles\" [ngClass]=\"\r\n    !chartData.dropdownData2 &&\r\n    !chartData.dropdownData1 &&\r\n    chartData.data.length <= 8\r\n      ? 'lib-justify-content-start'\r\n      : 'lib-justify-content-space-between'\r\n  \">\r\n  <span class=\"legend-latest-holder\" *ngIf=\"\r\n      chartData.data &&\r\n      chartData.metaData.default_dept &&\r\n      (chartConfiguration.isToggleVisible || chartData.metaData.isToggleVisible)\r\n    \">\r\n    <span *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"><span class=\"legends-latest\"\r\n        *ngIf=\"chartData.metaData.default_dept == item.key\" [style.background-color]=\"item.value\"></span></span>\r\n    <span class=\"marginRight-30 legend-style font-size-2\" *ngIf=\"chartData.metaData.default_dept\">\r\n      Default Dept: {{ chartData.metaData.default_dept }}\r\n    </span>\r\n    <span *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"><span *ngIf=\"\r\n          item.key != chartData.metaData.default_dept &&\r\n          chartData.metaData.default_dept\r\n        \" class=\"legends-latest\" [style.background-color]=\"item.value\"></span></span>\r\n    <span class=\"legend-style font-size-2\" *ngIf=\"isLegendVisible() && chartData.metaData.default_dept\">Cross Train\r\n      Dept</span>\r\n  </span>\r\n  <span class=\"legend-latest-holder legend-width\"\r\n    [ngClass]=\"chartData.metaData.colorLegendVisibleOnTopLeft ? '' : 'invisible'\"\r\n    *ngIf=\"chartData.data && !chartData.metaData.default_dept\">\r\n    <span class=\"lib-display-flex lib-align-items-center\"\r\n      *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"><span class=\"legends-latest\"\r\n        [style.background-color]=\"item.value\"></span>\r\n      <span class=\"marginRight-20 legend-style font-size-1 lib-white-space-nowrap\">\r\n        {{ item.key }}\r\n      </span>\r\n    </span>\r\n  </span>\r\n  <!-- <span class=\"display-flex\"> -->\r\n    <!-- <span *ngIf=\"\r\n        chartData.dropdownData1 &&\r\n        chartData.metaData.breadcrumbLength &&\r\n        chartData.metaData.breadcrumbLength == 1\r\n      \">\r\n      <lib-dropdown [dropdownData]=\"chartData.dropdownData1\" [isDropdownOpen]=\"this.isDD1Open\"\r\n        (ddClicked)=\"handleDD1Click()\" (selectedFromDropdown)=\"handleCompareByFilterSelection($event)\"></lib-dropdown>\r\n    </span>\r\n    <span *ngIf=\"\r\n        chartData.dropdownData2 &&\r\n        chartData.metaData.breadcrumbLength &&\r\n        chartData.metaData.breadcrumbLength == 1\r\n      \">\r\n      <lib-dropdown [dropdownData]=\"chartData.dropdownData2\" [isDropdownOpen]=\"this.isDD2Open\"\r\n        (ddClicked)=\"handleDD2Click()\" (selectedFromDropdown)=\"handleCompareByFilterSelection($event)\"\r\n        [isCheckboxVisible]=\"chartData.metaData.isCheckboxVisible\"\r\n        [dropdownHeaderName]=\"chartData.metaData.dropdownHeaderName\"></lib-dropdown>\r\n    </span> -->\r\n    <!-- <span class=\"zoomIcons-holder\" *ngIf=\"chartData.data && chartData.data.length > 8\">\r\n      <span class=\"zoomIcons\" title=\"Zoom In\" [ngClass]=\"!isZoomedOut ? 'zoom-active' : 'zoom-inactive'\"\r\n        (click)=\"isZoomOutSelected(false, $event)\">\r\n        <i class=\"fa fa-search-plus\"></i>\r\n      </span>\r\n      <span class=\"zoomIcons\" title=\"Zoom Out\" [ngClass]=\"isZoomedOut ? 'zoom-active' : 'zoom-inactive'\"\r\n        (click)=\"isZoomOutSelected(true, $event)\">\r\n        <i class=\"fa fa-search-minus\"></i>\r\n      </span>\r\n    </span>\r\n  </span> -->\r\n</div>", styles: [".invisible{visibility:hidden}.hidden{visibility:hidden!important}.content-hidden{visibility:hidden}.opacity-hidden{opacity:0;pointer-events:none}@media screen and (max-height: 768px){.header-title-styles{margin-left:14px;margin-top:12px;margin-bottom:20px}.legend-width{max-width:500px;overflow:auto}}@media (min-height: 500px){.legend-width{max-width:550px;overflow:auto}}@media screen and (min-width: 1920px) and (min-height: 1080px){.header-title-styles{margin-left:14px;margin-top:20px;margin-bottom:25px}.legend-width{max-width:700px;overflow:auto}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChartHeaderV3Component, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-chart-header-v3', template: "<div class=\"lib-display-flex header-title-styles\" [ngClass]=\"\r\n    !chartData.dropdownData2 &&\r\n    !chartData.dropdownData1 &&\r\n    chartData.data.length <= 8\r\n      ? 'lib-justify-content-start'\r\n      : 'lib-justify-content-space-between'\r\n  \">\r\n  <span class=\"legend-latest-holder\" *ngIf=\"\r\n      chartData.data &&\r\n      chartData.metaData.default_dept &&\r\n      (chartConfiguration.isToggleVisible || chartData.metaData.isToggleVisible)\r\n    \">\r\n    <span *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"><span class=\"legends-latest\"\r\n        *ngIf=\"chartData.metaData.default_dept == item.key\" [style.background-color]=\"item.value\"></span></span>\r\n    <span class=\"marginRight-30 legend-style font-size-2\" *ngIf=\"chartData.metaData.default_dept\">\r\n      Default Dept: {{ chartData.metaData.default_dept }}\r\n    </span>\r\n    <span *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"><span *ngIf=\"\r\n          item.key != chartData.metaData.default_dept &&\r\n          chartData.metaData.default_dept\r\n        \" class=\"legends-latest\" [style.background-color]=\"item.value\"></span></span>\r\n    <span class=\"legend-style font-size-2\" *ngIf=\"isLegendVisible() && chartData.metaData.default_dept\">Cross Train\r\n      Dept</span>\r\n  </span>\r\n  <span class=\"legend-latest-holder legend-width\"\r\n    [ngClass]=\"chartData.metaData.colorLegendVisibleOnTopLeft ? '' : 'invisible'\"\r\n    *ngIf=\"chartData.data && !chartData.metaData.default_dept\">\r\n    <span class=\"lib-display-flex lib-align-items-center\"\r\n      *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"><span class=\"legends-latest\"\r\n        [style.background-color]=\"item.value\"></span>\r\n      <span class=\"marginRight-20 legend-style font-size-1 lib-white-space-nowrap\">\r\n        {{ item.key }}\r\n      </span>\r\n    </span>\r\n  </span>\r\n  <!-- <span class=\"display-flex\"> -->\r\n    <!-- <span *ngIf=\"\r\n        chartData.dropdownData1 &&\r\n        chartData.metaData.breadcrumbLength &&\r\n        chartData.metaData.breadcrumbLength == 1\r\n      \">\r\n      <lib-dropdown [dropdownData]=\"chartData.dropdownData1\" [isDropdownOpen]=\"this.isDD1Open\"\r\n        (ddClicked)=\"handleDD1Click()\" (selectedFromDropdown)=\"handleCompareByFilterSelection($event)\"></lib-dropdown>\r\n    </span>\r\n    <span *ngIf=\"\r\n        chartData.dropdownData2 &&\r\n        chartData.metaData.breadcrumbLength &&\r\n        chartData.metaData.breadcrumbLength == 1\r\n      \">\r\n      <lib-dropdown [dropdownData]=\"chartData.dropdownData2\" [isDropdownOpen]=\"this.isDD2Open\"\r\n        (ddClicked)=\"handleDD2Click()\" (selectedFromDropdown)=\"handleCompareByFilterSelection($event)\"\r\n        [isCheckboxVisible]=\"chartData.metaData.isCheckboxVisible\"\r\n        [dropdownHeaderName]=\"chartData.metaData.dropdownHeaderName\"></lib-dropdown>\r\n    </span> -->\r\n    <!-- <span class=\"zoomIcons-holder\" *ngIf=\"chartData.data && chartData.data.length > 8\">\r\n      <span class=\"zoomIcons\" title=\"Zoom In\" [ngClass]=\"!isZoomedOut ? 'zoom-active' : 'zoom-inactive'\"\r\n        (click)=\"isZoomOutSelected(false, $event)\">\r\n        <i class=\"fa fa-search-plus\"></i>\r\n      </span>\r\n      <span class=\"zoomIcons\" title=\"Zoom Out\" [ngClass]=\"isZoomedOut ? 'zoom-active' : 'zoom-inactive'\"\r\n        (click)=\"isZoomOutSelected(true, $event)\">\r\n        <i class=\"fa fa-search-minus\"></i>\r\n      </span>\r\n    </span>\r\n  </span> -->\r\n</div>", styles: [".invisible{visibility:hidden}.hidden{visibility:hidden!important}.content-hidden{visibility:hidden}.opacity-hidden{opacity:0;pointer-events:none}@media (min-height: 500px){.legend-width{max-width:550px;overflow:auto}}@media screen and (min-width: 1920px) and (min-height: 1080px){.header-title-styles{margin-left:14px;margin-top:20px;margin-bottom:25px}.legend-width{max-width:700px;overflow:auto}}@media screen and (max-height: 768px){.header-title-styles{margin-left:14px;margin-top:12px;margin-bottom:20px}.legend-width{max-width:500px;overflow:auto}}\n"] }]
+            args: [{ selector: 'lib-chart-header-v3', template: "<div class=\"lib-display-flex header-title-styles\" [ngClass]=\"\r\n    !chartData.dropdownData2 &&\r\n    !chartData.dropdownData1 &&\r\n    chartData.data.length <= 8\r\n      ? 'lib-justify-content-start'\r\n      : 'lib-justify-content-space-between'\r\n  \">\r\n  <span class=\"legend-latest-holder\" *ngIf=\"\r\n      chartData.data &&\r\n      chartData.metaData.default_dept &&\r\n      (chartConfiguration.isToggleVisible || chartData.metaData.isToggleVisible)\r\n    \">\r\n    <span *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"><span class=\"legends-latest\"\r\n        *ngIf=\"chartData.metaData.default_dept == item.key\" [style.background-color]=\"item.value\"></span></span>\r\n    <span class=\"marginRight-30 legend-style font-size-2\" *ngIf=\"chartData.metaData.default_dept\">\r\n      Default Dept: {{ chartData.metaData.default_dept }}\r\n    </span>\r\n    <span *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"><span *ngIf=\"\r\n          item.key != chartData.metaData.default_dept &&\r\n          chartData.metaData.default_dept\r\n        \" class=\"legends-latest\" [style.background-color]=\"item.value\"></span></span>\r\n    <span class=\"legend-style font-size-2\" *ngIf=\"isLegendVisible() && chartData.metaData.default_dept\">Cross Train\r\n      Dept</span>\r\n  </span>\r\n  <span class=\"legend-latest-holder legend-width\"\r\n    [ngClass]=\"chartData.metaData.colorLegendVisibleOnTopLeft ? '' : 'invisible'\"\r\n    *ngIf=\"chartData.data && !chartData.metaData.default_dept\">\r\n    <span class=\"lib-display-flex lib-align-items-center\"\r\n      *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"><span class=\"legends-latest\"\r\n        [style.background-color]=\"item.value\"></span>\r\n      <span class=\"marginRight-20 legend-style font-size-1 lib-white-space-nowrap\">\r\n        {{ item.key }}\r\n      </span>\r\n    </span>\r\n  </span>\r\n  <!-- <span class=\"display-flex\"> -->\r\n    <!-- <span *ngIf=\"\r\n        chartData.dropdownData1 &&\r\n        chartData.metaData.breadcrumbLength &&\r\n        chartData.metaData.breadcrumbLength == 1\r\n      \">\r\n      <lib-dropdown [dropdownData]=\"chartData.dropdownData1\" [isDropdownOpen]=\"this.isDD1Open\"\r\n        (ddClicked)=\"handleDD1Click()\" (selectedFromDropdown)=\"handleCompareByFilterSelection($event)\"></lib-dropdown>\r\n    </span>\r\n    <span *ngIf=\"\r\n        chartData.dropdownData2 &&\r\n        chartData.metaData.breadcrumbLength &&\r\n        chartData.metaData.breadcrumbLength == 1\r\n      \">\r\n      <lib-dropdown [dropdownData]=\"chartData.dropdownData2\" [isDropdownOpen]=\"this.isDD2Open\"\r\n        (ddClicked)=\"handleDD2Click()\" (selectedFromDropdown)=\"handleCompareByFilterSelection($event)\"\r\n        [isCheckboxVisible]=\"chartData.metaData.isCheckboxVisible\"\r\n        [dropdownHeaderName]=\"chartData.metaData.dropdownHeaderName\"></lib-dropdown>\r\n    </span> -->\r\n    <!-- <span class=\"zoomIcons-holder\" *ngIf=\"chartData.data && chartData.data.length > 8\">\r\n      <span class=\"zoomIcons\" title=\"Zoom In\" [ngClass]=\"!isZoomedOut ? 'zoom-active' : 'zoom-inactive'\"\r\n        (click)=\"isZoomOutSelected(false, $event)\">\r\n        <i class=\"fa fa-search-plus\"></i>\r\n      </span>\r\n      <span class=\"zoomIcons\" title=\"Zoom Out\" [ngClass]=\"isZoomedOut ? 'zoom-active' : 'zoom-inactive'\"\r\n        (click)=\"isZoomOutSelected(true, $event)\">\r\n        <i class=\"fa fa-search-minus\"></i>\r\n      </span>\r\n    </span>\r\n  </span> -->\r\n</div>", styles: [".invisible{visibility:hidden}.hidden{visibility:hidden!important}.content-hidden{visibility:hidden}.opacity-hidden{opacity:0;pointer-events:none}@media screen and (max-height: 768px){.header-title-styles{margin-left:14px;margin-top:12px;margin-bottom:20px}.legend-width{max-width:500px;overflow:auto}}@media (min-height: 500px){.legend-width{max-width:550px;overflow:auto}}@media screen and (min-width: 1920px) and (min-height: 1080px){.header-title-styles{margin-left:14px;margin-top:20px;margin-bottom:25px}.legend-width{max-width:700px;overflow:auto}}\n"] }]
         }], propDecorators: { chartData: [{
                 type: Input
             }], chartConfiguration: [{

package/fesm2022/axidio-styleguide-library1-v2.mjs CHANGED Viewed

@@ -3387,11 +3387,11 @@ class ChartHeaderV3Component {
         this.zoomInZoomOutClick.emit({ isZoomOut: this.isZoomedOut, event: event });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChartHeaderV3Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ChartHeaderV3Component, selector: "lib-chart-header-v3", inputs: { chartData: "chartData", chartConfiguration: "chartConfiguration" }, outputs: { compareByFilterSelection: "compareByFilterSelection", zoomInZoomOutClick: "zoomInZoomOutClick" }, ngImport: i0, template: "<div class=\"lib-display-flex header-title-styles\" [ngClass]=\"\r\n    !chartData.dropdownData2 &&\r\n    !chartData.dropdownData1 &&\r\n    chartData.data.length <= 8\r\n      ? 'lib-justify-content-start'\r\n      : 'lib-justify-content-space-between'\r\n  \">\r\n  <span class=\"legend-latest-holder\" *ngIf=\"\r\n      chartData.data &&\r\n      chartData.metaData.default_dept &&\r\n      (chartConfiguration.isToggleVisible || chartData.metaData.isToggleVisible)\r\n    \">\r\n    <span *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"><span class=\"legends-latest\"\r\n        *ngIf=\"chartData.metaData.default_dept == item.key\" [style.background-color]=\"item.value\"></span></span>\r\n    <span class=\"marginRight-30 legend-style font-size-2\" *ngIf=\"chartData.metaData.default_dept\">\r\n      Default Dept: {{ chartData.metaData.default_dept }}\r\n    </span>\r\n    <span *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"><span *ngIf=\"\r\n          item.key != chartData.metaData.default_dept &&\r\n          chartData.metaData.default_dept\r\n        \" class=\"legends-latest\" [style.background-color]=\"item.value\"></span></span>\r\n    <span class=\"legend-style font-size-2\" *ngIf=\"isLegendVisible() && chartData.metaData.default_dept\">Cross Train\r\n      Dept</span>\r\n  </span>\r\n  <span class=\"legend-latest-holder legend-width\"\r\n    [ngClass]=\"chartData.metaData.colorLegendVisibleOnTopLeft ? '' : 'invisible'\"\r\n    *ngIf=\"chartData.data && !chartData.metaData.default_dept\">\r\n    <span class=\"lib-display-flex lib-align-items-center\"\r\n      *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"><span class=\"legends-latest\"\r\n        [style.background-color]=\"item.value\"></span>\r\n      <span class=\"marginRight-20 legend-style font-size-1 lib-white-space-nowrap\">\r\n        {{ item.key }}\r\n      </span>\r\n    </span>\r\n  </span>\r\n  <!-- <span class=\"display-flex\"> -->\r\n    <!-- <span *ngIf=\"\r\n        chartData.dropdownData1 &&\r\n        chartData.metaData.breadcrumbLength &&\r\n        chartData.metaData.breadcrumbLength == 1\r\n      \">\r\n      <lib-dropdown [dropdownData]=\"chartData.dropdownData1\" [isDropdownOpen]=\"this.isDD1Open\"\r\n        (ddClicked)=\"handleDD1Click()\" (selectedFromDropdown)=\"handleCompareByFilterSelection($event)\"></lib-dropdown>\r\n    </span>\r\n    <span *ngIf=\"\r\n        chartData.dropdownData2 &&\r\n        chartData.metaData.breadcrumbLength &&\r\n        chartData.metaData.breadcrumbLength == 1\r\n      \">\r\n      <lib-dropdown [dropdownData]=\"chartData.dropdownData2\" [isDropdownOpen]=\"this.isDD2Open\"\r\n        (ddClicked)=\"handleDD2Click()\" (selectedFromDropdown)=\"handleCompareByFilterSelection($event)\"\r\n        [isCheckboxVisible]=\"chartData.metaData.isCheckboxVisible\"\r\n        [dropdownHeaderName]=\"chartData.metaData.dropdownHeaderName\"></lib-dropdown>\r\n    </span> -->\r\n    <!-- <span class=\"zoomIcons-holder\" *ngIf=\"chartData.data && chartData.data.length > 8\">\r\n      <span class=\"zoomIcons\" title=\"Zoom In\" [ngClass]=\"!isZoomedOut ? 'zoom-active' : 'zoom-inactive'\"\r\n        (click)=\"isZoomOutSelected(false, $event)\">\r\n        <i class=\"fa fa-search-plus\"></i>\r\n      </span>\r\n      <span class=\"zoomIcons\" title=\"Zoom Out\" [ngClass]=\"isZoomedOut ? 'zoom-active' : 'zoom-inactive'\"\r\n        (click)=\"isZoomOutSelected(true, $event)\">\r\n        <i class=\"fa fa-search-minus\"></i>\r\n      </span>\r\n    </span>\r\n  </span> -->\r\n</div>", styles: [".invisible{visibility:hidden}.hidden{visibility:hidden!important}.content-hidden{visibility:hidden}.opacity-hidden{opacity:0;pointer-events:none}@media (min-height: 500px){.legend-width{max-width:550px;overflow:auto}}@media screen and (min-width: 1920px) and (min-height: 1080px){.header-title-styles{margin-left:14px;margin-top:20px;margin-bottom:25px}.legend-width{max-width:700px;overflow:auto}}@media screen and (max-height: 768px){.header-title-styles{margin-left:14px;margin-top:12px;margin-bottom:20px}.legend-width{max-width:500px;overflow:auto}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ChartHeaderV3Component, selector: "lib-chart-header-v3", inputs: { chartData: "chartData", chartConfiguration: "chartConfiguration" }, outputs: { compareByFilterSelection: "compareByFilterSelection", zoomInZoomOutClick: "zoomInZoomOutClick" }, ngImport: i0, template: "<div class=\"lib-display-flex header-title-styles\" [ngClass]=\"\r\n    !chartData.dropdownData2 &&\r\n    !chartData.dropdownData1 &&\r\n    chartData.data.length <= 8\r\n      ? 'lib-justify-content-start'\r\n      : 'lib-justify-content-space-between'\r\n  \">\r\n  <span class=\"legend-latest-holder\" *ngIf=\"\r\n      chartData.data &&\r\n      chartData.metaData.default_dept &&\r\n      (chartConfiguration.isToggleVisible || chartData.metaData.isToggleVisible)\r\n    \">\r\n    <span *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"><span class=\"legends-latest\"\r\n        *ngIf=\"chartData.metaData.default_dept == item.key\" [style.background-color]=\"item.value\"></span></span>\r\n    <span class=\"marginRight-30 legend-style font-size-2\" *ngIf=\"chartData.metaData.default_dept\">\r\n      Default Dept: {{ chartData.metaData.default_dept }}\r\n    </span>\r\n    <span *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"><span *ngIf=\"\r\n          item.key != chartData.metaData.default_dept &&\r\n          chartData.metaData.default_dept\r\n        \" class=\"legends-latest\" [style.background-color]=\"item.value\"></span></span>\r\n    <span class=\"legend-style font-size-2\" *ngIf=\"isLegendVisible() && chartData.metaData.default_dept\">Cross Train\r\n      Dept</span>\r\n  </span>\r\n  <span class=\"legend-latest-holder legend-width\"\r\n    [ngClass]=\"chartData.metaData.colorLegendVisibleOnTopLeft ? '' : 'invisible'\"\r\n    *ngIf=\"chartData.data && !chartData.metaData.default_dept\">\r\n    <span class=\"lib-display-flex lib-align-items-center\"\r\n      *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"><span class=\"legends-latest\"\r\n        [style.background-color]=\"item.value\"></span>\r\n      <span class=\"marginRight-20 legend-style font-size-1 lib-white-space-nowrap\">\r\n        {{ item.key }}\r\n      </span>\r\n    </span>\r\n  </span>\r\n  <!-- <span class=\"display-flex\"> -->\r\n    <!-- <span *ngIf=\"\r\n        chartData.dropdownData1 &&\r\n        chartData.metaData.breadcrumbLength &&\r\n        chartData.metaData.breadcrumbLength == 1\r\n      \">\r\n      <lib-dropdown [dropdownData]=\"chartData.dropdownData1\" [isDropdownOpen]=\"this.isDD1Open\"\r\n        (ddClicked)=\"handleDD1Click()\" (selectedFromDropdown)=\"handleCompareByFilterSelection($event)\"></lib-dropdown>\r\n    </span>\r\n    <span *ngIf=\"\r\n        chartData.dropdownData2 &&\r\n        chartData.metaData.breadcrumbLength &&\r\n        chartData.metaData.breadcrumbLength == 1\r\n      \">\r\n      <lib-dropdown [dropdownData]=\"chartData.dropdownData2\" [isDropdownOpen]=\"this.isDD2Open\"\r\n        (ddClicked)=\"handleDD2Click()\" (selectedFromDropdown)=\"handleCompareByFilterSelection($event)\"\r\n        [isCheckboxVisible]=\"chartData.metaData.isCheckboxVisible\"\r\n        [dropdownHeaderName]=\"chartData.metaData.dropdownHeaderName\"></lib-dropdown>\r\n    </span> -->\r\n    <!-- <span class=\"zoomIcons-holder\" *ngIf=\"chartData.data && chartData.data.length > 8\">\r\n      <span class=\"zoomIcons\" title=\"Zoom In\" [ngClass]=\"!isZoomedOut ? 'zoom-active' : 'zoom-inactive'\"\r\n        (click)=\"isZoomOutSelected(false, $event)\">\r\n        <i class=\"fa fa-search-plus\"></i>\r\n      </span>\r\n      <span class=\"zoomIcons\" title=\"Zoom Out\" [ngClass]=\"isZoomedOut ? 'zoom-active' : 'zoom-inactive'\"\r\n        (click)=\"isZoomOutSelected(true, $event)\">\r\n        <i class=\"fa fa-search-minus\"></i>\r\n      </span>\r\n    </span>\r\n  </span> -->\r\n</div>", styles: [".invisible{visibility:hidden}.hidden{visibility:hidden!important}.content-hidden{visibility:hidden}.opacity-hidden{opacity:0;pointer-events:none}@media screen and (max-height: 768px){.header-title-styles{margin-left:14px;margin-top:12px;margin-bottom:20px}.legend-width{max-width:500px;overflow:auto}}@media (min-height: 500px){.legend-width{max-width:550px;overflow:auto}}@media screen and (min-width: 1920px) and (min-height: 1080px){.header-title-styles{margin-left:14px;margin-top:20px;margin-bottom:25px}.legend-width{max-width:700px;overflow:auto}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChartHeaderV3Component, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-chart-header-v3', template: "<div class=\"lib-display-flex header-title-styles\" [ngClass]=\"\r\n    !chartData.dropdownData2 &&\r\n    !chartData.dropdownData1 &&\r\n    chartData.data.length <= 8\r\n      ? 'lib-justify-content-start'\r\n      : 'lib-justify-content-space-between'\r\n  \">\r\n  <span class=\"legend-latest-holder\" *ngIf=\"\r\n      chartData.data &&\r\n      chartData.metaData.default_dept &&\r\n      (chartConfiguration.isToggleVisible || chartData.metaData.isToggleVisible)\r\n    \">\r\n    <span *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"><span class=\"legends-latest\"\r\n        *ngIf=\"chartData.metaData.default_dept == item.key\" [style.background-color]=\"item.value\"></span></span>\r\n    <span class=\"marginRight-30 legend-style font-size-2\" *ngIf=\"chartData.metaData.default_dept\">\r\n      Default Dept: {{ chartData.metaData.default_dept }}\r\n    </span>\r\n    <span *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"><span *ngIf=\"\r\n          item.key != chartData.metaData.default_dept &&\r\n          chartData.metaData.default_dept\r\n        \" class=\"legends-latest\" [style.background-color]=\"item.value\"></span></span>\r\n    <span class=\"legend-style font-size-2\" *ngIf=\"isLegendVisible() && chartData.metaData.default_dept\">Cross Train\r\n      Dept</span>\r\n  </span>\r\n  <span class=\"legend-latest-holder legend-width\"\r\n    [ngClass]=\"chartData.metaData.colorLegendVisibleOnTopLeft ? '' : 'invisible'\"\r\n    *ngIf=\"chartData.data && !chartData.metaData.default_dept\">\r\n    <span class=\"lib-display-flex lib-align-items-center\"\r\n      *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"><span class=\"legends-latest\"\r\n        [style.background-color]=\"item.value\"></span>\r\n      <span class=\"marginRight-20 legend-style font-size-1 lib-white-space-nowrap\">\r\n        {{ item.key }}\r\n      </span>\r\n    </span>\r\n  </span>\r\n  <!-- <span class=\"display-flex\"> -->\r\n    <!-- <span *ngIf=\"\r\n        chartData.dropdownData1 &&\r\n        chartData.metaData.breadcrumbLength &&\r\n        chartData.metaData.breadcrumbLength == 1\r\n      \">\r\n      <lib-dropdown [dropdownData]=\"chartData.dropdownData1\" [isDropdownOpen]=\"this.isDD1Open\"\r\n        (ddClicked)=\"handleDD1Click()\" (selectedFromDropdown)=\"handleCompareByFilterSelection($event)\"></lib-dropdown>\r\n    </span>\r\n    <span *ngIf=\"\r\n        chartData.dropdownData2 &&\r\n        chartData.metaData.breadcrumbLength &&\r\n        chartData.metaData.breadcrumbLength == 1\r\n      \">\r\n      <lib-dropdown [dropdownData]=\"chartData.dropdownData2\" [isDropdownOpen]=\"this.isDD2Open\"\r\n        (ddClicked)=\"handleDD2Click()\" (selectedFromDropdown)=\"handleCompareByFilterSelection($event)\"\r\n        [isCheckboxVisible]=\"chartData.metaData.isCheckboxVisible\"\r\n        [dropdownHeaderName]=\"chartData.metaData.dropdownHeaderName\"></lib-dropdown>\r\n    </span> -->\r\n    <!-- <span class=\"zoomIcons-holder\" *ngIf=\"chartData.data && chartData.data.length > 8\">\r\n      <span class=\"zoomIcons\" title=\"Zoom In\" [ngClass]=\"!isZoomedOut ? 'zoom-active' : 'zoom-inactive'\"\r\n        (click)=\"isZoomOutSelected(false, $event)\">\r\n        <i class=\"fa fa-search-plus\"></i>\r\n      </span>\r\n      <span class=\"zoomIcons\" title=\"Zoom Out\" [ngClass]=\"isZoomedOut ? 'zoom-active' : 'zoom-inactive'\"\r\n        (click)=\"isZoomOutSelected(true, $event)\">\r\n        <i class=\"fa fa-search-minus\"></i>\r\n      </span>\r\n    </span>\r\n  </span> -->\r\n</div>", styles: [".invisible{visibility:hidden}.hidden{visibility:hidden!important}.content-hidden{visibility:hidden}.opacity-hidden{opacity:0;pointer-events:none}@media (min-height: 500px){.legend-width{max-width:550px;overflow:auto}}@media screen and (min-width: 1920px) and (min-height: 1080px){.header-title-styles{margin-left:14px;margin-top:20px;margin-bottom:25px}.legend-width{max-width:700px;overflow:auto}}@media screen and (max-height: 768px){.header-title-styles{margin-left:14px;margin-top:12px;margin-bottom:20px}.legend-width{max-width:500px;overflow:auto}}\n"] }]
+            args: [{ selector: 'lib-chart-header-v3', template: "<div class=\"lib-display-flex header-title-styles\" [ngClass]=\"\r\n    !chartData.dropdownData2 &&\r\n    !chartData.dropdownData1 &&\r\n    chartData.data.length <= 8\r\n      ? 'lib-justify-content-start'\r\n      : 'lib-justify-content-space-between'\r\n  \">\r\n  <span class=\"legend-latest-holder\" *ngIf=\"\r\n      chartData.data &&\r\n      chartData.metaData.default_dept &&\r\n      (chartConfiguration.isToggleVisible || chartData.metaData.isToggleVisible)\r\n    \">\r\n    <span *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"><span class=\"legends-latest\"\r\n        *ngIf=\"chartData.metaData.default_dept == item.key\" [style.background-color]=\"item.value\"></span></span>\r\n    <span class=\"marginRight-30 legend-style font-size-2\" *ngIf=\"chartData.metaData.default_dept\">\r\n      Default Dept: {{ chartData.metaData.default_dept }}\r\n    </span>\r\n    <span *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"><span *ngIf=\"\r\n          item.key != chartData.metaData.default_dept &&\r\n          chartData.metaData.default_dept\r\n        \" class=\"legends-latest\" [style.background-color]=\"item.value\"></span></span>\r\n    <span class=\"legend-style font-size-2\" *ngIf=\"isLegendVisible() && chartData.metaData.default_dept\">Cross Train\r\n      Dept</span>\r\n  </span>\r\n  <span class=\"legend-latest-holder legend-width\"\r\n    [ngClass]=\"chartData.metaData.colorLegendVisibleOnTopLeft ? '' : 'invisible'\"\r\n    *ngIf=\"chartData.data && !chartData.metaData.default_dept\">\r\n    <span class=\"lib-display-flex lib-align-items-center\"\r\n      *ngFor=\"let item of chartData.metaData.colors | keyvalue : keepOrder\"><span class=\"legends-latest\"\r\n        [style.background-color]=\"item.value\"></span>\r\n      <span class=\"marginRight-20 legend-style font-size-1 lib-white-space-nowrap\">\r\n        {{ item.key }}\r\n      </span>\r\n    </span>\r\n  </span>\r\n  <!-- <span class=\"display-flex\"> -->\r\n    <!-- <span *ngIf=\"\r\n        chartData.dropdownData1 &&\r\n        chartData.metaData.breadcrumbLength &&\r\n        chartData.metaData.breadcrumbLength == 1\r\n      \">\r\n      <lib-dropdown [dropdownData]=\"chartData.dropdownData1\" [isDropdownOpen]=\"this.isDD1Open\"\r\n        (ddClicked)=\"handleDD1Click()\" (selectedFromDropdown)=\"handleCompareByFilterSelection($event)\"></lib-dropdown>\r\n    </span>\r\n    <span *ngIf=\"\r\n        chartData.dropdownData2 &&\r\n        chartData.metaData.breadcrumbLength &&\r\n        chartData.metaData.breadcrumbLength == 1\r\n      \">\r\n      <lib-dropdown [dropdownData]=\"chartData.dropdownData2\" [isDropdownOpen]=\"this.isDD2Open\"\r\n        (ddClicked)=\"handleDD2Click()\" (selectedFromDropdown)=\"handleCompareByFilterSelection($event)\"\r\n        [isCheckboxVisible]=\"chartData.metaData.isCheckboxVisible\"\r\n        [dropdownHeaderName]=\"chartData.metaData.dropdownHeaderName\"></lib-dropdown>\r\n    </span> -->\r\n    <!-- <span class=\"zoomIcons-holder\" *ngIf=\"chartData.data && chartData.data.length > 8\">\r\n      <span class=\"zoomIcons\" title=\"Zoom In\" [ngClass]=\"!isZoomedOut ? 'zoom-active' : 'zoom-inactive'\"\r\n        (click)=\"isZoomOutSelected(false, $event)\">\r\n        <i class=\"fa fa-search-plus\"></i>\r\n      </span>\r\n      <span class=\"zoomIcons\" title=\"Zoom Out\" [ngClass]=\"isZoomedOut ? 'zoom-active' : 'zoom-inactive'\"\r\n        (click)=\"isZoomOutSelected(true, $event)\">\r\n        <i class=\"fa fa-search-minus\"></i>\r\n      </span>\r\n    </span>\r\n  </span> -->\r\n</div>", styles: [".invisible{visibility:hidden}.hidden{visibility:hidden!important}.content-hidden{visibility:hidden}.opacity-hidden{opacity:0;pointer-events:none}@media screen and (max-height: 768px){.header-title-styles{margin-left:14px;margin-top:12px;margin-bottom:20px}.legend-width{max-width:500px;overflow:auto}}@media (min-height: 500px){.legend-width{max-width:550px;overflow:auto}}@media screen and (min-width: 1920px) and (min-height: 1080px){.header-title-styles{margin-left:14px;margin-top:20px;margin-bottom:25px}.legend-width{max-width:700px;overflow:auto}}\n"] }]
         }], propDecorators: { chartData: [{
                 type: Input
             }], chartConfiguration: [{

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "axidio-styleguide-library1-v2",
-  "version": "0.6.84",
+  "version": "0.6.85",
   "peerDependencies": {
     "@angular/common": "^17.3.1",
     "@angular/core": "^17.3.1",