@biit-solutions/wizardry-theme 1.22.13 → 1.22.15
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.
- package/assets/i18n/login-welcome/de.json +1 -0
- package/assets/i18n/login-welcome/fr.json +1 -0
- package/assets/i18n/login-welcome/it.json +1 -0
- package/assets/i18n/utils/de.json +1 -0
- package/assets/i18n/utils/fr.json +1 -0
- package/assets/i18n/utils/it.json +1 -0
- package/esm2020/button/biit-action-button/biit-action-button.component.mjs +2 -2
- package/esm2020/button/biit-icon-button/biit-icon-button.component.mjs +2 -2
- package/esm2020/charts/bar-chart/bar-chart.component.mjs +2 -2
- package/esm2020/charts/line-chart/line-chart.component.mjs +2 -2
- package/esm2020/charts/meta-view-chart/components/date-filter-selector/date-filter-selector.component.mjs +1 -1
- package/esm2020/charts/meta-view-chart/meta-view-chart.component.mjs +2 -2
- package/esm2020/charts/pie-chart/pie-chart.component.mjs +2 -2
- package/esm2020/charts/radar-chart/radar-chart.component.mjs +2 -2
- package/esm2020/charts/radial-chart/radial-chart.component.mjs +2 -2
- package/esm2020/charts/timeline-viewer-chart/timeline-viewer-chart.component.mjs +2 -2
- package/esm2020/inputs/biit-checkbox/biit-checkbox.component.mjs +11 -5
- package/esm2020/inputs/biit-multiselect/biit-multiselect.component.mjs +1 -1
- package/esm2020/navigation/biit-nav-menu/biit-nav-menu.component.mjs +1 -4
- package/esm2020/popup/biit-popup/biit-popup.component.mjs +2 -2
- package/esm2020/table/biit-datatable/biit-datatable.component.mjs +2 -2
- package/esm2020/table/biit-paginator/biit-paginator.component.mjs +2 -2
- package/esm2020/table/biit-table/biit-table.component.mjs +3 -3
- package/fesm2015/biit-solutions-wizardry-theme-button.mjs +4 -4
- package/fesm2015/biit-solutions-wizardry-theme-button.mjs.map +1 -1
- package/fesm2015/biit-solutions-wizardry-theme-charts.mjs +15 -15
- package/fesm2015/biit-solutions-wizardry-theme-charts.mjs.map +1 -1
- package/fesm2015/biit-solutions-wizardry-theme-inputs.mjs +10 -4
- package/fesm2015/biit-solutions-wizardry-theme-inputs.mjs.map +1 -1
- package/fesm2015/biit-solutions-wizardry-theme-navigation.mjs +0 -3
- package/fesm2015/biit-solutions-wizardry-theme-navigation.mjs.map +1 -1
- package/fesm2015/biit-solutions-wizardry-theme-popup.mjs +2 -2
- package/fesm2015/biit-solutions-wizardry-theme-popup.mjs.map +1 -1
- package/fesm2015/biit-solutions-wizardry-theme-table.mjs +6 -6
- package/fesm2015/biit-solutions-wizardry-theme-table.mjs.map +1 -1
- package/fesm2020/biit-solutions-wizardry-theme-button.mjs +4 -4
- package/fesm2020/biit-solutions-wizardry-theme-button.mjs.map +1 -1
- package/fesm2020/biit-solutions-wizardry-theme-charts.mjs +15 -15
- package/fesm2020/biit-solutions-wizardry-theme-charts.mjs.map +1 -1
- package/fesm2020/biit-solutions-wizardry-theme-inputs.mjs +10 -4
- package/fesm2020/biit-solutions-wizardry-theme-inputs.mjs.map +1 -1
- package/fesm2020/biit-solutions-wizardry-theme-navigation.mjs +0 -3
- package/fesm2020/biit-solutions-wizardry-theme-navigation.mjs.map +1 -1
- package/fesm2020/biit-solutions-wizardry-theme-popup.mjs +2 -2
- package/fesm2020/biit-solutions-wizardry-theme-popup.mjs.map +1 -1
- package/fesm2020/biit-solutions-wizardry-theme-table.mjs +6 -6
- package/fesm2020/biit-solutions-wizardry-theme-table.mjs.map +1 -1
- package/inputs/biit-checkbox/biit-checkbox.component.d.ts +3 -1
- package/navigation/biit-nav-menu/biit-nav-menu.component.d.ts +0 -1
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{}
|
|
@@ -51,10 +51,10 @@ export class BiitActionButtonComponent {
|
|
|
51
51
|
}
|
|
52
52
|
}
|
|
53
53
|
BiitActionButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitActionButtonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
54
|
-
BiitActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitActionButtonComponent, selector: "biit-action-button", inputs: { position: "position", additionalX: "additionalX", additionalY: "additionalY" }, queries: [{ propertyName: "inputButtons", predicate: BiitIconButtonComponent }], ngImport: i0, template: "<div id=\"fab\" class=\"floating-action-button\" [ngStyle]=\"positionStyle()\" (pointerover)=\"hover = true;\" (pointerleave)=\"hover = false\">\n <ng-content></ng-content>\n</div>\n", styles: [":root{--main-color: #F20D5E;--main-background: #D9D9D9;--body-background: #EDEDED;--light-background: #D7D7D7;--error-color: #A1093F;--warning-color: var(--main-color);--floating-background: white;--main-font-color: white;--secondary-color: #808080;--secondary-text-color: #EDEDED;--secondary-background-color: #808080;--disabled-primary-color: #808080;--disabled-menu-color: #D9D9D9;--disabled-secondary-color: var(--main-color);--component-color: #262626;--active-color: var(--component-color);--hover-color: #EDEDED;--hover-primary-color: var(--main-color);--secondary-button-color: var(--component-color);--secondary-button-background-color: var(--main-font-color);--secondary-button-hover-background: var(--main-background);--secondary-button-active-background: var(--main-background);--quaternary-button-color: var(--main-font-color);--quaternary-button-background-color: var(--error-color);--quaternary-button-hover-background: var(--main-color);--quaternary-button-active-background: var(--main-color);--text-hover-color: #5A6473;--selected-color: #FBAEC9;--
|
|
54
|
+
BiitActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitActionButtonComponent, selector: "biit-action-button", inputs: { position: "position", additionalX: "additionalX", additionalY: "additionalY" }, queries: [{ propertyName: "inputButtons", predicate: BiitIconButtonComponent }], ngImport: i0, template: "<div id=\"fab\" class=\"floating-action-button\" [ngStyle]=\"positionStyle()\" (pointerover)=\"hover = true;\" (pointerleave)=\"hover = false\">\n <ng-content></ng-content>\n</div>\n", styles: [":root{--main-color: #F20D5E;--popup-background-color: rgba(0, 0, 0, .15);--main-background: #D9D9D9;--body-background: #EDEDED;--light-background: #D7D7D7;--error-color: #A1093F;--warning-color: var(--main-color);--floating-background: white;--main-font-color: white;--secondary-color: #808080;--secondary-text-color: #EDEDED;--secondary-background-color: #808080;--disabled-primary-color: #808080;--disabled-menu-color: #D9D9D9;--disabled-menu-color-hover: #FFFFFF;--disabled-secondary-color: var(--main-color);--component-color: #262626;--active-color: var(--component-color);--hover-color: #EDEDED;--hover-primary-color: var(--main-color);--secondary-button-color: var(--component-color);--secondary-button-background-color: var(--main-font-color);--secondary-button-hover-background: var(--main-background);--secondary-button-active-background: var(--main-background);--quaternary-button-color: var(--main-font-color);--quaternary-button-background-color: var(--error-color);--quaternary-button-hover-background: var(--main-color);--quaternary-button-active-background: var(--main-color);--text-hover-color: #5A6473;--selected-color: #FBAEC9;--chart-background: #FFFFFF;--icon-color: var(--main-color);--table-header-color: var(--component-color);--table-border-color: var(--table-header-color);--scrollbar-color: var(--main-color)}.floating-action-button{box-sizing:border-box;position:fixed;z-index:999;opacity:50%;background:white;border:3px solid var(--component-color);display:flex;flex-direction:column;justify-content:flex-end}.floating-action-button:hover{opacity:100%}.floating-action-button:hover ::ng-deep button:not(:first-child){display:flex}.floating-action-button ::ng-deep button:not(:first-child){display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
55
55
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitActionButtonComponent, decorators: [{
|
|
56
56
|
type: Component,
|
|
57
|
-
args: [{ selector: 'biit-action-button', template: "<div id=\"fab\" class=\"floating-action-button\" [ngStyle]=\"positionStyle()\" (pointerover)=\"hover = true;\" (pointerleave)=\"hover = false\">\n <ng-content></ng-content>\n</div>\n", styles: [":root{--main-color: #F20D5E;--main-background: #D9D9D9;--body-background: #EDEDED;--light-background: #D7D7D7;--error-color: #A1093F;--warning-color: var(--main-color);--floating-background: white;--main-font-color: white;--secondary-color: #808080;--secondary-text-color: #EDEDED;--secondary-background-color: #808080;--disabled-primary-color: #808080;--disabled-menu-color: #D9D9D9;--disabled-secondary-color: var(--main-color);--component-color: #262626;--active-color: var(--component-color);--hover-color: #EDEDED;--hover-primary-color: var(--main-color);--secondary-button-color: var(--component-color);--secondary-button-background-color: var(--main-font-color);--secondary-button-hover-background: var(--main-background);--secondary-button-active-background: var(--main-background);--quaternary-button-color: var(--main-font-color);--quaternary-button-background-color: var(--error-color);--quaternary-button-hover-background: var(--main-color);--quaternary-button-active-background: var(--main-color);--text-hover-color: #5A6473;--selected-color: #FBAEC9;--
|
|
57
|
+
args: [{ selector: 'biit-action-button', template: "<div id=\"fab\" class=\"floating-action-button\" [ngStyle]=\"positionStyle()\" (pointerover)=\"hover = true;\" (pointerleave)=\"hover = false\">\n <ng-content></ng-content>\n</div>\n", styles: [":root{--main-color: #F20D5E;--popup-background-color: rgba(0, 0, 0, .15);--main-background: #D9D9D9;--body-background: #EDEDED;--light-background: #D7D7D7;--error-color: #A1093F;--warning-color: var(--main-color);--floating-background: white;--main-font-color: white;--secondary-color: #808080;--secondary-text-color: #EDEDED;--secondary-background-color: #808080;--disabled-primary-color: #808080;--disabled-menu-color: #D9D9D9;--disabled-menu-color-hover: #FFFFFF;--disabled-secondary-color: var(--main-color);--component-color: #262626;--active-color: var(--component-color);--hover-color: #EDEDED;--hover-primary-color: var(--main-color);--secondary-button-color: var(--component-color);--secondary-button-background-color: var(--main-font-color);--secondary-button-hover-background: var(--main-background);--secondary-button-active-background: var(--main-background);--quaternary-button-color: var(--main-font-color);--quaternary-button-background-color: var(--error-color);--quaternary-button-hover-background: var(--main-color);--quaternary-button-active-background: var(--main-color);--text-hover-color: #5A6473;--selected-color: #FBAEC9;--chart-background: #FFFFFF;--icon-color: var(--main-color);--table-header-color: var(--component-color);--table-border-color: var(--table-header-color);--scrollbar-color: var(--main-color)}.floating-action-button{box-sizing:border-box;position:fixed;z-index:999;opacity:50%;background:white;border:3px solid var(--component-color);display:flex;flex-direction:column;justify-content:flex-end}.floating-action-button:hover{opacity:100%}.floating-action-button:hover ::ng-deep button:not(:first-child){display:flex}.floating-action-button ::ng-deep button:not(:first-child){display:none}\n"] }]
|
|
58
58
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { position: [{
|
|
59
59
|
type: Input
|
|
60
60
|
}], additionalX: [{
|
|
@@ -7,10 +7,10 @@ export class BiitIconButtonComponent {
|
|
|
7
7
|
}
|
|
8
8
|
}
|
|
9
9
|
BiitIconButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10
|
-
BiitIconButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitIconButtonComponent, selector: "button[biit-icon]", inputs: { icon: "icon", checked: "checked" }, ngImport: i0, template: "<div [class.checked]=\"checked\" style=\"display: flex;\">\n <biit-icon [name]=\"icon\"\n [pathStyle]=\"{fill: '#262626'}\"\n class=\"icon-button-svg\"\n ></biit-icon>\n <ng-content></ng-content>\n</div>\n", styles: [":host{background:none;color:inherit;border:none;padding:0;font:inherit;outline:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;height:2.125em;width:2.125em}:host:hover,:host:focus-visible,:host:has(.checked){background-color:var(--main-background)}:host:active ::ng-deep biit-icon path{fill:var(--main-color)!important}:host:disabled{pointer-events:none}:host:disabled:hover,:host:disabled:focus-visible{background-color:var(--
|
|
10
|
+
BiitIconButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitIconButtonComponent, selector: "button[biit-icon]", inputs: { icon: "icon", checked: "checked" }, ngImport: i0, template: "<div [class.checked]=\"checked\" style=\"display: flex;\">\n <biit-icon [name]=\"icon\"\n [pathStyle]=\"{fill: '#262626'}\"\n class=\"icon-button-svg\"\n ></biit-icon>\n <ng-content></ng-content>\n</div>\n", styles: [":host{background:none;color:inherit;border:none;padding:0;font:inherit;outline:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;height:2.125em;width:2.125em}:host:hover,:host:focus-visible,:host:has(.checked){background-color:var(--main-background)}:host:active ::ng-deep biit-icon path{fill:var(--main-color)!important}:host:disabled{pointer-events:none}:host:disabled:hover,:host:disabled:focus-visible{background-color:var(--disabled-menu-color-hover)}:host:disabled ::ng-deep biit-icon path{fill:var(--disabled-menu-color)!important}:host:has(.checked) ::ng-deep biit-icon path{fill:var(--main-color)!important}.icon-button-svg{display:inline-flex;pointer-events:none;width:1em;height:1em}\n"], dependencies: [{ kind: "component", type: i1.BiitIconComponent, selector: "biit-icon", inputs: ["name", "svgStyle", "pathStyle"] }] });
|
|
11
11
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitIconButtonComponent, decorators: [{
|
|
12
12
|
type: Component,
|
|
13
|
-
args: [{ selector: 'button[biit-icon]', template: "<div [class.checked]=\"checked\" style=\"display: flex;\">\n <biit-icon [name]=\"icon\"\n [pathStyle]=\"{fill: '#262626'}\"\n class=\"icon-button-svg\"\n ></biit-icon>\n <ng-content></ng-content>\n</div>\n", styles: [":host{background:none;color:inherit;border:none;padding:0;font:inherit;outline:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;height:2.125em;width:2.125em}:host:hover,:host:focus-visible,:host:has(.checked){background-color:var(--main-background)}:host:active ::ng-deep biit-icon path{fill:var(--main-color)!important}:host:disabled{pointer-events:none}:host:disabled:hover,:host:disabled:focus-visible{background-color:var(--
|
|
13
|
+
args: [{ selector: 'button[biit-icon]', template: "<div [class.checked]=\"checked\" style=\"display: flex;\">\n <biit-icon [name]=\"icon\"\n [pathStyle]=\"{fill: '#262626'}\"\n class=\"icon-button-svg\"\n ></biit-icon>\n <ng-content></ng-content>\n</div>\n", styles: [":host{background:none;color:inherit;border:none;padding:0;font:inherit;outline:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;height:2.125em;width:2.125em}:host:hover,:host:focus-visible,:host:has(.checked){background-color:var(--main-background)}:host:active ::ng-deep biit-icon path{fill:var(--main-color)!important}:host:disabled{pointer-events:none}:host:disabled:hover,:host:disabled:focus-visible{background-color:var(--disabled-menu-color-hover)}:host:disabled ::ng-deep biit-icon path{fill:var(--disabled-menu-color)!important}:host:has(.checked) ::ng-deep biit-icon path{fill:var(--main-color)!important}.icon-button-svg{display:inline-flex;pointer-events:none;width:1em;height:1em}\n"] }]
|
|
14
14
|
}], propDecorators: { icon: [{
|
|
15
15
|
type: Input
|
|
16
16
|
}], checked: [{
|
|
@@ -165,12 +165,12 @@ export class BarChartComponent {
|
|
|
165
165
|
}
|
|
166
166
|
}
|
|
167
167
|
BarChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BarChartComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
168
|
-
BarChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BarChartComponent, selector: "biit-bar-chart", inputs: { data: "data", title: "title", width: "width", min: "min", max: "max", compact: "compact" }, host: { listeners: { "document:scroll": "handleScroll($event)" } }, viewQueries: [{ propertyName: "apexChart", first: true, predicate: ["apexChart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"bar-chart\"\n [style.opacity]=\"chartOptions ? '1' : '0'\">\n <apx-chart *ngIf=\"chartOptions\"\n [series]=\"chartOptions.series\"\n [chart]=\"chartOptions.chart\"\n [dataLabels]=\"chartOptions.dataLabels\"\n [colors]=\"chartOptions.colors\"\n [plotOptions]=\"chartOptions.plotOptions\"\n [xaxis]=\"chartOptions.xaxis\"\n [yaxis]=\"chartOptions.yaxis\"\n [legend]=\"chartOptions.legend\"\n [title]=\"chartOptions.title\"\n [tooltip]=\"chartOptions.tooltip\"\n [grid]=\"chartOptions.grid\"\n [fill]=\"chartOptions.fill\"\n style=\"display: block; height: 100%;\"\n #apexChart\n ></apx-chart>\n</div>\n", styles: ["#bar-chart{display:block;height:inherit;width:inherit;overflow:hidden;overflow-x:auto;transition:1s ease-in-out}#bar-chart ::ng-deep .apexcharts-tooltip{border:1px solid var(--component-color);border-radius:0;box-shadow:none;font-family:Montserrat;font-size:.7rem;background:var(--
|
|
168
|
+
BarChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BarChartComponent, selector: "biit-bar-chart", inputs: { data: "data", title: "title", width: "width", min: "min", max: "max", compact: "compact" }, host: { listeners: { "document:scroll": "handleScroll($event)" } }, viewQueries: [{ propertyName: "apexChart", first: true, predicate: ["apexChart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"bar-chart\"\n [style.opacity]=\"chartOptions ? '1' : '0'\">\n <apx-chart *ngIf=\"chartOptions\"\n [series]=\"chartOptions.series\"\n [chart]=\"chartOptions.chart\"\n [dataLabels]=\"chartOptions.dataLabels\"\n [colors]=\"chartOptions.colors\"\n [plotOptions]=\"chartOptions.plotOptions\"\n [xaxis]=\"chartOptions.xaxis\"\n [yaxis]=\"chartOptions.yaxis\"\n [legend]=\"chartOptions.legend\"\n [title]=\"chartOptions.title\"\n [tooltip]=\"chartOptions.tooltip\"\n [grid]=\"chartOptions.grid\"\n [fill]=\"chartOptions.fill\"\n style=\"display: block; height: 100%;\"\n #apexChart\n ></apx-chart>\n</div>\n", styles: ["#bar-chart{display:block;height:inherit;width:inherit;overflow:hidden;overflow-x:auto;transition:1s ease-in-out}#bar-chart ::ng-deep .apexcharts-tooltip{border:1px solid var(--component-color);border-radius:0;box-shadow:none;font-family:Montserrat;font-size:.7rem;background:var(--chart-background)}#bar-chart ::ng-deep .apexcharts-tooltip *{box-sizing:border-box}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-header{background:var(--component-color);color:var(--chart-background);padding:.45rem .7rem}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content{display:flex;flex-direction:column;row-gap:.2rem;padding:.45rem .7rem}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data{display:flex;align-items:center}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-square{height:.5rem;width:.5rem;margin-right:.45rem}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-line{height:.1rem;width:.5rem;margin-right:.45rem}#bar-chart ::ng-deep .apexcharts-series path:hover{box-sizing:border-box;border:.15rem solid var(--component-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ChartComponent, selector: "apx-chart", inputs: ["chart", "annotations", "colors", "dataLabels", "series", "stroke", "labels", "legend", "markers", "noData", "fill", "tooltip", "plotOptions", "responsive", "xaxis", "yaxis", "forecastDataPoints", "grid", "states", "title", "subtitle", "theme", "autoUpdateSeries"] }] });
|
|
169
169
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BarChartComponent, decorators: [{
|
|
170
170
|
type: Component,
|
|
171
171
|
args: [{ selector: 'biit-bar-chart', host: {
|
|
172
172
|
'(document:scroll)': 'handleScroll($event)'
|
|
173
|
-
}, template: "<div id=\"bar-chart\"\n [style.opacity]=\"chartOptions ? '1' : '0'\">\n <apx-chart *ngIf=\"chartOptions\"\n [series]=\"chartOptions.series\"\n [chart]=\"chartOptions.chart\"\n [dataLabels]=\"chartOptions.dataLabels\"\n [colors]=\"chartOptions.colors\"\n [plotOptions]=\"chartOptions.plotOptions\"\n [xaxis]=\"chartOptions.xaxis\"\n [yaxis]=\"chartOptions.yaxis\"\n [legend]=\"chartOptions.legend\"\n [title]=\"chartOptions.title\"\n [tooltip]=\"chartOptions.tooltip\"\n [grid]=\"chartOptions.grid\"\n [fill]=\"chartOptions.fill\"\n style=\"display: block; height: 100%;\"\n #apexChart\n ></apx-chart>\n</div>\n", styles: ["#bar-chart{display:block;height:inherit;width:inherit;overflow:hidden;overflow-x:auto;transition:1s ease-in-out}#bar-chart ::ng-deep .apexcharts-tooltip{border:1px solid var(--component-color);border-radius:0;box-shadow:none;font-family:Montserrat;font-size:.7rem;background:var(--
|
|
173
|
+
}, template: "<div id=\"bar-chart\"\n [style.opacity]=\"chartOptions ? '1' : '0'\">\n <apx-chart *ngIf=\"chartOptions\"\n [series]=\"chartOptions.series\"\n [chart]=\"chartOptions.chart\"\n [dataLabels]=\"chartOptions.dataLabels\"\n [colors]=\"chartOptions.colors\"\n [plotOptions]=\"chartOptions.plotOptions\"\n [xaxis]=\"chartOptions.xaxis\"\n [yaxis]=\"chartOptions.yaxis\"\n [legend]=\"chartOptions.legend\"\n [title]=\"chartOptions.title\"\n [tooltip]=\"chartOptions.tooltip\"\n [grid]=\"chartOptions.grid\"\n [fill]=\"chartOptions.fill\"\n style=\"display: block; height: 100%;\"\n #apexChart\n ></apx-chart>\n</div>\n", styles: ["#bar-chart{display:block;height:inherit;width:inherit;overflow:hidden;overflow-x:auto;transition:1s ease-in-out}#bar-chart ::ng-deep .apexcharts-tooltip{border:1px solid var(--component-color);border-radius:0;box-shadow:none;font-family:Montserrat;font-size:.7rem;background:var(--chart-background)}#bar-chart ::ng-deep .apexcharts-tooltip *{box-sizing:border-box}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-header{background:var(--component-color);color:var(--chart-background);padding:.45rem .7rem}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content{display:flex;flex-direction:column;row-gap:.2rem;padding:.45rem .7rem}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data{display:flex;align-items:center}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-square{height:.5rem;width:.5rem;margin-right:.45rem}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-line{height:.1rem;width:.5rem;margin-right:.45rem}#bar-chart ::ng-deep .apexcharts-series path:hover{box-sizing:border-box;border:.15rem solid var(--component-color)}\n"] }]
|
|
174
174
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { apexChart: [{
|
|
175
175
|
type: ViewChild,
|
|
176
176
|
args: ['apexChart']
|
|
@@ -166,10 +166,10 @@ export class LineChartComponent {
|
|
|
166
166
|
}
|
|
167
167
|
}
|
|
168
168
|
LineChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LineChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
169
|
-
LineChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: LineChartComponent, selector: "biit-line-chart", inputs: { data: "data", title: "title", xTitle: "xTitle", yTitle: "yTitle", min: "min", max: "max", enabledLabelsOnSeries: "enabledLabelsOnSeries" }, viewQueries: [{ propertyName: "apexChart", first: true, predicate: ["apexChart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"line-chart\"\n [style.opacity]=\"chartOptions ? '1' : '0'\">\n <apx-chart *ngIf=\"chartOptions\"\n [chart]=\"chartOptions.chart\"\n [series]=\"chartOptions.series\"\n [dataLabels]=\"chartOptions.dataLabels\"\n [colors]=\"chartOptions.colors\"\n [stroke]=\"chartOptions.stroke\"\n [title]=\"chartOptions.title\"\n [grid]=\"chartOptions.grid\"\n [xaxis]=\"chartOptions.xaxis\"\n [yaxis]=\"chartOptions.yaxis\"\n [markers]=\"chartOptions.markers\"\n [legend]=\"chartOptions.legend\"\n [fill]=\"chartOptions.fill\"\n [tooltip]=\"chartOptions.tooltip\"\n style=\"display: block; height: 100%;\"\n #apexChart\n ></apx-chart>\n</div>\n", styles: ["#line-chart{display:block;height:inherit;width:inherit;transition:1s ease-in-out}#line-chart ::ng-deep apx-chart .apexcharts-tooltip{border:1px solid var(--component-color);border-radius:0;box-shadow:none;font-family:Montserrat;font-size:.7rem;background:var(--
|
|
169
|
+
LineChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: LineChartComponent, selector: "biit-line-chart", inputs: { data: "data", title: "title", xTitle: "xTitle", yTitle: "yTitle", min: "min", max: "max", enabledLabelsOnSeries: "enabledLabelsOnSeries" }, viewQueries: [{ propertyName: "apexChart", first: true, predicate: ["apexChart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"line-chart\"\n [style.opacity]=\"chartOptions ? '1' : '0'\">\n <apx-chart *ngIf=\"chartOptions\"\n [chart]=\"chartOptions.chart\"\n [series]=\"chartOptions.series\"\n [dataLabels]=\"chartOptions.dataLabels\"\n [colors]=\"chartOptions.colors\"\n [stroke]=\"chartOptions.stroke\"\n [title]=\"chartOptions.title\"\n [grid]=\"chartOptions.grid\"\n [xaxis]=\"chartOptions.xaxis\"\n [yaxis]=\"chartOptions.yaxis\"\n [markers]=\"chartOptions.markers\"\n [legend]=\"chartOptions.legend\"\n [fill]=\"chartOptions.fill\"\n [tooltip]=\"chartOptions.tooltip\"\n style=\"display: block; height: 100%;\"\n #apexChart\n ></apx-chart>\n</div>\n", styles: ["#line-chart{display:block;height:inherit;width:inherit;transition:1s ease-in-out}#line-chart ::ng-deep apx-chart .apexcharts-tooltip{border:1px solid var(--component-color);border-radius:0;box-shadow:none;font-family:Montserrat;font-size:.7rem;background:var(--chart-background)}#line-chart ::ng-deep apx-chart .apexcharts-tooltip *{box-sizing:border-box}#line-chart ::ng-deep apx-chart .apexcharts-tooltip .tooltip-header{background:var(--component-color);color:var(--chart-background);padding:.45rem .7rem}#line-chart ::ng-deep apx-chart .apexcharts-tooltip .tooltip-content{display:flex;flex-direction:column;row-gap:.2rem;padding:.45rem .7rem}#line-chart ::ng-deep apx-chart .apexcharts-tooltip .tooltip-content .tooltip-data{display:flex;align-items:center}#line-chart ::ng-deep apx-chart .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-square{height:.5rem;width:.5rem;margin-right:.45rem}#line-chart ::ng-deep apx-chart .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-line{height:.1rem;width:.5rem;margin-right:.45rem}#line-chart ::ng-deep apx-chart .apexcharts-legend-series{display:flex}#line-chart ::ng-deep apx-chart .apexcharts-legend-series .apexcharts-legend-marker{border-radius:0!important;margin-right:7px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ChartComponent, selector: "apx-chart", inputs: ["chart", "annotations", "colors", "dataLabels", "series", "stroke", "labels", "legend", "markers", "noData", "fill", "tooltip", "plotOptions", "responsive", "xaxis", "yaxis", "forecastDataPoints", "grid", "states", "title", "subtitle", "theme", "autoUpdateSeries"] }] });
|
|
170
170
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LineChartComponent, decorators: [{
|
|
171
171
|
type: Component,
|
|
172
|
-
args: [{ selector: 'biit-line-chart', template: "<div id=\"line-chart\"\n [style.opacity]=\"chartOptions ? '1' : '0'\">\n <apx-chart *ngIf=\"chartOptions\"\n [chart]=\"chartOptions.chart\"\n [series]=\"chartOptions.series\"\n [dataLabels]=\"chartOptions.dataLabels\"\n [colors]=\"chartOptions.colors\"\n [stroke]=\"chartOptions.stroke\"\n [title]=\"chartOptions.title\"\n [grid]=\"chartOptions.grid\"\n [xaxis]=\"chartOptions.xaxis\"\n [yaxis]=\"chartOptions.yaxis\"\n [markers]=\"chartOptions.markers\"\n [legend]=\"chartOptions.legend\"\n [fill]=\"chartOptions.fill\"\n [tooltip]=\"chartOptions.tooltip\"\n style=\"display: block; height: 100%;\"\n #apexChart\n ></apx-chart>\n</div>\n", styles: ["#line-chart{display:block;height:inherit;width:inherit;transition:1s ease-in-out}#line-chart ::ng-deep apx-chart .apexcharts-tooltip{border:1px solid var(--component-color);border-radius:0;box-shadow:none;font-family:Montserrat;font-size:.7rem;background:var(--
|
|
172
|
+
args: [{ selector: 'biit-line-chart', template: "<div id=\"line-chart\"\n [style.opacity]=\"chartOptions ? '1' : '0'\">\n <apx-chart *ngIf=\"chartOptions\"\n [chart]=\"chartOptions.chart\"\n [series]=\"chartOptions.series\"\n [dataLabels]=\"chartOptions.dataLabels\"\n [colors]=\"chartOptions.colors\"\n [stroke]=\"chartOptions.stroke\"\n [title]=\"chartOptions.title\"\n [grid]=\"chartOptions.grid\"\n [xaxis]=\"chartOptions.xaxis\"\n [yaxis]=\"chartOptions.yaxis\"\n [markers]=\"chartOptions.markers\"\n [legend]=\"chartOptions.legend\"\n [fill]=\"chartOptions.fill\"\n [tooltip]=\"chartOptions.tooltip\"\n style=\"display: block; height: 100%;\"\n #apexChart\n ></apx-chart>\n</div>\n", styles: ["#line-chart{display:block;height:inherit;width:inherit;transition:1s ease-in-out}#line-chart ::ng-deep apx-chart .apexcharts-tooltip{border:1px solid var(--component-color);border-radius:0;box-shadow:none;font-family:Montserrat;font-size:.7rem;background:var(--chart-background)}#line-chart ::ng-deep apx-chart .apexcharts-tooltip *{box-sizing:border-box}#line-chart ::ng-deep apx-chart .apexcharts-tooltip .tooltip-header{background:var(--component-color);color:var(--chart-background);padding:.45rem .7rem}#line-chart ::ng-deep apx-chart .apexcharts-tooltip .tooltip-content{display:flex;flex-direction:column;row-gap:.2rem;padding:.45rem .7rem}#line-chart ::ng-deep apx-chart .apexcharts-tooltip .tooltip-content .tooltip-data{display:flex;align-items:center}#line-chart ::ng-deep apx-chart .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-square{height:.5rem;width:.5rem;margin-right:.45rem}#line-chart ::ng-deep apx-chart .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-line{height:.1rem;width:.5rem;margin-right:.45rem}#line-chart ::ng-deep apx-chart .apexcharts-legend-series{display:flex}#line-chart ::ng-deep apx-chart .apexcharts-legend-series .apexcharts-legend-marker{border-radius:0!important;margin-right:7px}\n"] }]
|
|
173
173
|
}], ctorParameters: function () { return []; }, propDecorators: { apexChart: [{
|
|
174
174
|
type: ViewChild,
|
|
175
175
|
args: ['apexChart']
|
|
@@ -137,7 +137,7 @@ export class DateFilterSelectorComponent {
|
|
|
137
137
|
}
|
|
138
138
|
}
|
|
139
139
|
DateFilterSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateFilterSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
140
|
-
DateFilterSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DateFilterSelectorComponent, selector: "biit-date-filter-selector", inputs: { _items: ["items", "_items"], _field: ["field", "_field"], _range: ["range", "_range"] }, outputs: { rangeChange: "rangeChange" }, ngImport: i0, template: "<div>\n <div *ngFor=\"let year of sortByYear.keys()\" class=\"date-filter-row\">\n <biit-checkbox [(ngModel)]=\"selectedRanges[year + '']\" (ngModelChange)=\"onYearSelected(year, $event)\" >\n <div class=\"year-title\">\n <div class=\"title-counter\">\n <div> {{year}} </div>\n <div> ({{sortByYear.get(year).length}})</div>\n </div>\n <biit-icon\n name=\"right_arrow\" class=\"year-arrow\" [class.arrow-rotate]=\"selectedYear === year\"\n (click)=\"$event.preventDefault(); onDisplayYear(year)\" />\n </div>\n <div class=\"month-body\" *ngIf=\"selectedYear === year\">\n <div *ngFor=\"let month of sortByMonth.keys()\">\n <biit-checkbox\n class=\"month-checkbox\"\n [(ngModel)]=\"selectedRanges[year + '-' + month]\"\n (ngModelChange)=\"onMonthSelected(year, month, $event)\" >\n <div class=\"title-counter\">\n <div>\n {{month | monthName}}\n </div>\n <div>\n ({{sortByMonth.get(month).length}})\n </div>\n </div>\n </biit-checkbox>\n </div>\n </div>\n </biit-checkbox>\n </div>\n</div>\n", styles: [".year-arrow{cursor:pointer;width:1em;height:1em;display:block;transition:transform .3s ease-in-out}.arrow-rotate{transform:rotate(90deg)}biit-checkbox{display:block;width:100%;&>label{width:100%;&>div{width:100%;&>div>a{width:100%}}}}.year-title{display:flex;align-items:center;&>div:first-child{flex-grow:1}}.month-body{display:flex;flex-direction:column;gap:.25em;font-size:.75em}.date-filter-row{margin:.5em 0;align-content:center}.title-counter{display:flex;&>div:first-child{flex-grow:1}&>div:last-child{color:gray;margin-right:.5em;font-size:.75em}}.month-body .title-counter>div:last-child{margin-right:1.2em}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.BiitCheckboxComponent, selector: "biit-checkbox", inputs: ["disabled", "description", "showAlwaysDescription"] }, { kind: "component", type: i3.BiitIconComponent, selector: "biit-icon", inputs: ["name", "svgStyle", "pathStyle"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i5.MonthNamePipe, name: "monthName" }] });
|
|
140
|
+
DateFilterSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DateFilterSelectorComponent, selector: "biit-date-filter-selector", inputs: { _items: ["items", "_items"], _field: ["field", "_field"], _range: ["range", "_range"] }, outputs: { rangeChange: "rangeChange" }, ngImport: i0, template: "<div>\n <div *ngFor=\"let year of sortByYear.keys()\" class=\"date-filter-row\">\n <biit-checkbox [(ngModel)]=\"selectedRanges[year + '']\" (ngModelChange)=\"onYearSelected(year, $event)\" >\n <div class=\"year-title\">\n <div class=\"title-counter\">\n <div> {{year}} </div>\n <div> ({{sortByYear.get(year).length}})</div>\n </div>\n <biit-icon\n name=\"right_arrow\" class=\"year-arrow\" [class.arrow-rotate]=\"selectedYear === year\"\n (click)=\"$event.preventDefault(); onDisplayYear(year)\" />\n </div>\n <div class=\"month-body\" *ngIf=\"selectedYear === year\">\n <div *ngFor=\"let month of sortByMonth.keys()\">\n <biit-checkbox\n class=\"month-checkbox\"\n [(ngModel)]=\"selectedRanges[year + '-' + month]\"\n (ngModelChange)=\"onMonthSelected(year, month, $event)\" >\n <div class=\"title-counter\">\n <div>\n {{month | monthName}}\n </div>\n <div>\n ({{sortByMonth.get(month).length}})\n </div>\n </div>\n </biit-checkbox>\n </div>\n </div>\n </biit-checkbox>\n </div>\n</div>\n", styles: [".year-arrow{cursor:pointer;width:1em;height:1em;display:block;transition:transform .3s ease-in-out}.arrow-rotate{transform:rotate(90deg)}biit-checkbox{display:block;width:100%;&>label{width:100%;&>div{width:100%;&>div>a{width:100%}}}}.year-title{display:flex;align-items:center;&>div:first-child{flex-grow:1}}.month-body{display:flex;flex-direction:column;gap:.25em;font-size:.75em}.date-filter-row{margin:.5em 0;align-content:center}.title-counter{display:flex;&>div:first-child{flex-grow:1}&>div:last-child{color:gray;margin-right:.5em;font-size:.75em}}.month-body .title-counter>div:last-child{margin-right:1.2em}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.BiitCheckboxComponent, selector: "biit-checkbox", inputs: ["disabled", "description", "showAlwaysDescription"], outputs: ["onValueChange"] }, { kind: "component", type: i3.BiitIconComponent, selector: "biit-icon", inputs: ["name", "svgStyle", "pathStyle"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i5.MonthNamePipe, name: "monthName" }] });
|
|
141
141
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateFilterSelectorComponent, decorators: [{
|
|
142
142
|
type: Component,
|
|
143
143
|
args: [{ selector: 'biit-date-filter-selector', template: "<div>\n <div *ngFor=\"let year of sortByYear.keys()\" class=\"date-filter-row\">\n <biit-checkbox [(ngModel)]=\"selectedRanges[year + '']\" (ngModelChange)=\"onYearSelected(year, $event)\" >\n <div class=\"year-title\">\n <div class=\"title-counter\">\n <div> {{year}} </div>\n <div> ({{sortByYear.get(year).length}})</div>\n </div>\n <biit-icon\n name=\"right_arrow\" class=\"year-arrow\" [class.arrow-rotate]=\"selectedYear === year\"\n (click)=\"$event.preventDefault(); onDisplayYear(year)\" />\n </div>\n <div class=\"month-body\" *ngIf=\"selectedYear === year\">\n <div *ngFor=\"let month of sortByMonth.keys()\">\n <biit-checkbox\n class=\"month-checkbox\"\n [(ngModel)]=\"selectedRanges[year + '-' + month]\"\n (ngModelChange)=\"onMonthSelected(year, month, $event)\" >\n <div class=\"title-counter\">\n <div>\n {{month | monthName}}\n </div>\n <div>\n ({{sortByMonth.get(month).length}})\n </div>\n </div>\n </biit-checkbox>\n </div>\n </div>\n </biit-checkbox>\n </div>\n</div>\n", styles: [".year-arrow{cursor:pointer;width:1em;height:1em;display:block;transition:transform .3s ease-in-out}.arrow-rotate{transform:rotate(90deg)}biit-checkbox{display:block;width:100%;&>label{width:100%;&>div{width:100%;&>div>a{width:100%}}}}.year-title{display:flex;align-items:center;&>div:first-child{flex-grow:1}}.month-body{display:flex;flex-direction:column;gap:.25em;font-size:.75em}.date-filter-row{margin:.5em 0;align-content:center}.title-counter{display:flex;&>div:first-child{flex-grow:1}&>div:last-child{color:gray;margin-right:.5em;font-size:.75em}}.month-body .title-counter>div:last-child{margin-right:1.2em}\n"] }]
|
|
@@ -105,7 +105,7 @@ MetaViewChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", v
|
|
|
105
105
|
MetaViewChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MetaViewChartComponent, selector: "biit-meta-view-chart", inputs: { _data: ["data", "_data"], view: "view" }, outputs: { selected: "selected", unselected: "unselected" }, providers: [{
|
|
106
106
|
provide: TRANSLOCO_SCOPE,
|
|
107
107
|
useValue: { scope: 'wizardry-theme/chart', alias: "charts" }
|
|
108
|
-
}], ngImport: i0, template: "<div class=\"meta-view-chart-board\" id=\"metaviewer-chart\" *transloco=\"let t\">\n <button biit-icon icon=\"hamburger\" *ngIf=\"!showMenu\" (click)=\"showMenu=true\"></button>\n <div class=\"meta-view-column\" *ngIf=\"showMenu\">\n <button biit-icon icon=\"hamburger\" (click)=\"showMenu=false\" style=\"position:absolute;\"></button>\n <biit-meta-filter [metadata]=\"data\" (filterChange)=\"onFilter($event)\"/>\n </div>\n <biit-meta-board id=\"metaviewer-board\" *ngIf=\"view === View.GRID\"\n [data]=\"elements\"\n [selected]=\"selectedElement\"\n (elementClick)=\"onElementClick($event)\"\n />\n <biit-timeline-viewer-chart id=\"metaviewer-timeline\" *ngIf=\"view === View.TIMELINE && timelineOptions && timelineOptions.date\"\n [data]=\"elements | extractData\"\n [options]=\"timelineOptions\"\n (onItemClick)=\"onTimeLineElementClick($event)\"\n style=\"overflow: hidden\"\n />\n <div class=\"error-view\" id=\"metaviewer-error\" *ngIf=\"view === View.TIMELINE && !timelineOptions?.date\">\n <div>\n <biit-icon name=\"exclamation\" style=\"display:block; width: 1rem;\" />\n </div>\n <div>{{ t('charts.configuration-not-meets-requirements') }}</div>\n </div>\n <div class=\"meta-view-column rtl\" id=\"metadata-viewer\" *ngIf=\"selectedElement\" @fadeInOut>\n <biit-metadata-viewer class=\"ltr\"\n [data]=\"selectedElement\"\n [fields]=\"data.fields\"\n [titleField]=\"data.titleField\"\n (onClose)=\"unselectElement()\"/>\n </div>\n</div>\n", styles: ["biit-meta-board{display:block;width:100%;height:100%}.meta-view-chart-board{display:flex;flex-direction:row;gap:1em;height:100%;transition:transform .3s ease-in-out}.meta-view-chart-board>:not(:nth-child(2)){flex:0 1 auto}.meta-view-chart-board>:nth-child(2){flex:1}.meta-view-column{min-width:14em;max-width:23em;width:18em;flex:0 1 auto;resize:horizontal;overflow:auto;border:3px solid var(--component-color)}.rtl{direction:rtl}.ltr{direction:ltr}.padding-1{padding:.1em}.error-view{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1rem}@media screen and (max-width: 800px){.meta-view-column{position:absolute;background:var(--
|
|
108
|
+
}], ngImport: i0, template: "<div class=\"meta-view-chart-board\" id=\"metaviewer-chart\" *transloco=\"let t\">\n <button biit-icon icon=\"hamburger\" *ngIf=\"!showMenu\" (click)=\"showMenu=true\"></button>\n <div class=\"meta-view-column\" *ngIf=\"showMenu\">\n <button biit-icon icon=\"hamburger\" (click)=\"showMenu=false\" style=\"position:absolute;\"></button>\n <biit-meta-filter [metadata]=\"data\" (filterChange)=\"onFilter($event)\"/>\n </div>\n <biit-meta-board id=\"metaviewer-board\" *ngIf=\"view === View.GRID\"\n [data]=\"elements\"\n [selected]=\"selectedElement\"\n (elementClick)=\"onElementClick($event)\"\n />\n <biit-timeline-viewer-chart id=\"metaviewer-timeline\" *ngIf=\"view === View.TIMELINE && timelineOptions && timelineOptions.date\"\n [data]=\"elements | extractData\"\n [options]=\"timelineOptions\"\n (onItemClick)=\"onTimeLineElementClick($event)\"\n style=\"overflow: hidden\"\n />\n <div class=\"error-view\" id=\"metaviewer-error\" *ngIf=\"view === View.TIMELINE && !timelineOptions?.date\">\n <div>\n <biit-icon name=\"exclamation\" style=\"display:block; width: 1rem;\" />\n </div>\n <div>{{ t('charts.configuration-not-meets-requirements') }}</div>\n </div>\n <div class=\"meta-view-column rtl\" id=\"metadata-viewer\" *ngIf=\"selectedElement\" @fadeInOut>\n <biit-metadata-viewer class=\"ltr\"\n [data]=\"selectedElement\"\n [fields]=\"data.fields\"\n [titleField]=\"data.titleField\"\n (onClose)=\"unselectElement()\"/>\n </div>\n</div>\n", styles: ["biit-meta-board{display:block;width:100%;height:100%}.meta-view-chart-board{display:flex;flex-direction:row;gap:1em;height:100%;transition:transform .3s ease-in-out}.meta-view-chart-board>:not(:nth-child(2)){flex:0 1 auto}.meta-view-chart-board>:nth-child(2){flex:1}.meta-view-column{min-width:14em;max-width:23em;width:18em;flex:0 1 auto;resize:horizontal;overflow:auto;border:3px solid var(--component-color)}.rtl{direction:rtl}.ltr{direction:ltr}.padding-1{padding:.1em}.error-view{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1rem}@media screen and (max-width: 800px){.meta-view-column{position:absolute;background:var(--chart-background);z-index:1}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MetaBoardComponent, selector: "biit-meta-board", inputs: ["data", "selected"], outputs: ["elementClick"] }, { kind: "component", type: i3.MetaFilterComponent, selector: "biit-meta-filter", inputs: ["metadata"], outputs: ["filterChange"] }, { kind: "component", type: i4.MetadataViewerComponent, selector: "biit-metadata-viewer", inputs: ["data", "fields", "titleField"], outputs: ["onClose"] }, { kind: "component", type: i5.TimelineViewerChartComponent, selector: "biit-timeline-viewer-chart", inputs: ["data", "options"], outputs: ["onItemClick"] }, { kind: "component", type: i6.BiitIconComponent, selector: "biit-icon", inputs: ["name", "svgStyle", "pathStyle"] }, { kind: "directive", type: i7.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: i8.BiitIconButtonComponent, selector: "button[biit-icon]", inputs: ["icon", "checked"] }, { kind: "pipe", type: i9.ExtractDataPipe, name: "extractData" }], animations: [
|
|
109
109
|
trigger('fadeInOut', [
|
|
110
110
|
transition(':enter', [
|
|
111
111
|
style({ opacity: 0 }),
|
|
@@ -133,7 +133,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
133
133
|
animate('300ms ease-out', style({ opacity: 0 }))
|
|
134
134
|
])
|
|
135
135
|
])
|
|
136
|
-
], template: "<div class=\"meta-view-chart-board\" id=\"metaviewer-chart\" *transloco=\"let t\">\n <button biit-icon icon=\"hamburger\" *ngIf=\"!showMenu\" (click)=\"showMenu=true\"></button>\n <div class=\"meta-view-column\" *ngIf=\"showMenu\">\n <button biit-icon icon=\"hamburger\" (click)=\"showMenu=false\" style=\"position:absolute;\"></button>\n <biit-meta-filter [metadata]=\"data\" (filterChange)=\"onFilter($event)\"/>\n </div>\n <biit-meta-board id=\"metaviewer-board\" *ngIf=\"view === View.GRID\"\n [data]=\"elements\"\n [selected]=\"selectedElement\"\n (elementClick)=\"onElementClick($event)\"\n />\n <biit-timeline-viewer-chart id=\"metaviewer-timeline\" *ngIf=\"view === View.TIMELINE && timelineOptions && timelineOptions.date\"\n [data]=\"elements | extractData\"\n [options]=\"timelineOptions\"\n (onItemClick)=\"onTimeLineElementClick($event)\"\n style=\"overflow: hidden\"\n />\n <div class=\"error-view\" id=\"metaviewer-error\" *ngIf=\"view === View.TIMELINE && !timelineOptions?.date\">\n <div>\n <biit-icon name=\"exclamation\" style=\"display:block; width: 1rem;\" />\n </div>\n <div>{{ t('charts.configuration-not-meets-requirements') }}</div>\n </div>\n <div class=\"meta-view-column rtl\" id=\"metadata-viewer\" *ngIf=\"selectedElement\" @fadeInOut>\n <biit-metadata-viewer class=\"ltr\"\n [data]=\"selectedElement\"\n [fields]=\"data.fields\"\n [titleField]=\"data.titleField\"\n (onClose)=\"unselectElement()\"/>\n </div>\n</div>\n", styles: ["biit-meta-board{display:block;width:100%;height:100%}.meta-view-chart-board{display:flex;flex-direction:row;gap:1em;height:100%;transition:transform .3s ease-in-out}.meta-view-chart-board>:not(:nth-child(2)){flex:0 1 auto}.meta-view-chart-board>:nth-child(2){flex:1}.meta-view-column{min-width:14em;max-width:23em;width:18em;flex:0 1 auto;resize:horizontal;overflow:auto;border:3px solid var(--component-color)}.rtl{direction:rtl}.ltr{direction:ltr}.padding-1{padding:.1em}.error-view{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1rem}@media screen and (max-width: 800px){.meta-view-column{position:absolute;background:var(--
|
|
136
|
+
], template: "<div class=\"meta-view-chart-board\" id=\"metaviewer-chart\" *transloco=\"let t\">\n <button biit-icon icon=\"hamburger\" *ngIf=\"!showMenu\" (click)=\"showMenu=true\"></button>\n <div class=\"meta-view-column\" *ngIf=\"showMenu\">\n <button biit-icon icon=\"hamburger\" (click)=\"showMenu=false\" style=\"position:absolute;\"></button>\n <biit-meta-filter [metadata]=\"data\" (filterChange)=\"onFilter($event)\"/>\n </div>\n <biit-meta-board id=\"metaviewer-board\" *ngIf=\"view === View.GRID\"\n [data]=\"elements\"\n [selected]=\"selectedElement\"\n (elementClick)=\"onElementClick($event)\"\n />\n <biit-timeline-viewer-chart id=\"metaviewer-timeline\" *ngIf=\"view === View.TIMELINE && timelineOptions && timelineOptions.date\"\n [data]=\"elements | extractData\"\n [options]=\"timelineOptions\"\n (onItemClick)=\"onTimeLineElementClick($event)\"\n style=\"overflow: hidden\"\n />\n <div class=\"error-view\" id=\"metaviewer-error\" *ngIf=\"view === View.TIMELINE && !timelineOptions?.date\">\n <div>\n <biit-icon name=\"exclamation\" style=\"display:block; width: 1rem;\" />\n </div>\n <div>{{ t('charts.configuration-not-meets-requirements') }}</div>\n </div>\n <div class=\"meta-view-column rtl\" id=\"metadata-viewer\" *ngIf=\"selectedElement\" @fadeInOut>\n <biit-metadata-viewer class=\"ltr\"\n [data]=\"selectedElement\"\n [fields]=\"data.fields\"\n [titleField]=\"data.titleField\"\n (onClose)=\"unselectElement()\"/>\n </div>\n</div>\n", styles: ["biit-meta-board{display:block;width:100%;height:100%}.meta-view-chart-board{display:flex;flex-direction:row;gap:1em;height:100%;transition:transform .3s ease-in-out}.meta-view-chart-board>:not(:nth-child(2)){flex:0 1 auto}.meta-view-chart-board>:nth-child(2){flex:1}.meta-view-column{min-width:14em;max-width:23em;width:18em;flex:0 1 auto;resize:horizontal;overflow:auto;border:3px solid var(--component-color)}.rtl{direction:rtl}.ltr{direction:ltr}.padding-1{padding:.1em}.error-view{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1rem}@media screen and (max-width: 800px){.meta-view-column{position:absolute;background:var(--chart-background);z-index:1}}\n"] }]
|
|
137
137
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { _data: [{
|
|
138
138
|
type: Input,
|
|
139
139
|
args: ['data']
|
|
@@ -111,10 +111,10 @@ export class PieChartComponent {
|
|
|
111
111
|
}
|
|
112
112
|
}
|
|
113
113
|
PieChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PieChartComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
114
|
-
PieChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PieChartComponent, selector: "biit-pie-chart", inputs: { data: "data", title: "title", width: "width", min: "min", max: "max" }, viewQueries: [{ propertyName: "apexChart", first: true, predicate: ["apexChart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"bar-chart\"\n [style.opacity]=\"chartOptions ? '1' : '0'\">\n <apx-chart *ngIf=\"chartOptions\"\n [series]=\"chartOptions.series\"\n [chart]=\"chartOptions.chart\"\n [labels]=\"chartOptions.labels\"\n [dataLabels]=\"chartOptions.dataLabels\"\n [colors]=\"chartOptions.colors\"\n [plotOptions]=\"chartOptions.plotOptions\"\n [xaxis]=\"chartOptions.xaxis\"\n [yaxis]=\"chartOptions.yaxis\"\n [legend]=\"chartOptions.legend\"\n [title]=\"chartOptions.title\"\n [tooltip]=\"chartOptions.tooltip\"\n [grid]=\"chartOptions.grid\"\n [fill]=\"chartOptions.fill\"\n [states]=\"chartOptions.states\"\n style=\"display: block; height: 100%;\"\n #apexChart\n ></apx-chart>\n</div>\n", styles: ["#bar-chart{display:block;height:inherit;width:inherit;overflow:hidden;overflow-x:auto;transition:1s ease-in-out}#bar-chart ::ng-deep .apexcharts-tooltip{border:1px solid var(--component-color);border-radius:0;box-shadow:none;font-family:Montserrat;font-size:.7rem;background:var(--
|
|
114
|
+
PieChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PieChartComponent, selector: "biit-pie-chart", inputs: { data: "data", title: "title", width: "width", min: "min", max: "max" }, viewQueries: [{ propertyName: "apexChart", first: true, predicate: ["apexChart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"bar-chart\"\n [style.opacity]=\"chartOptions ? '1' : '0'\">\n <apx-chart *ngIf=\"chartOptions\"\n [series]=\"chartOptions.series\"\n [chart]=\"chartOptions.chart\"\n [labels]=\"chartOptions.labels\"\n [dataLabels]=\"chartOptions.dataLabels\"\n [colors]=\"chartOptions.colors\"\n [plotOptions]=\"chartOptions.plotOptions\"\n [xaxis]=\"chartOptions.xaxis\"\n [yaxis]=\"chartOptions.yaxis\"\n [legend]=\"chartOptions.legend\"\n [title]=\"chartOptions.title\"\n [tooltip]=\"chartOptions.tooltip\"\n [grid]=\"chartOptions.grid\"\n [fill]=\"chartOptions.fill\"\n [states]=\"chartOptions.states\"\n style=\"display: block; height: 100%;\"\n #apexChart\n ></apx-chart>\n</div>\n", styles: ["#bar-chart{display:block;height:inherit;width:inherit;overflow:hidden;overflow-x:auto;transition:1s ease-in-out}#bar-chart ::ng-deep .apexcharts-tooltip{border:1px solid var(--component-color);border-radius:0;box-shadow:none;font-family:Montserrat;font-size:.7rem;background:var(--chart-background)}#bar-chart ::ng-deep .apexcharts-tooltip *{box-sizing:border-box}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content{display:flex;flex-direction:column;row-gap:.2rem;padding:.45rem .7rem;color:var(--component-color)}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data{display:flex;align-items:center}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-square{height:.5rem;width:.5rem;margin-right:.45rem}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-line{height:.1rem;width:.5rem;margin-right:.45rem}#bar-chart ::ng-deep .apexcharts-series path:hover{box-sizing:border-box;border:.15rem solid var(--component-color)}#bar-chart ::ng-deep .apexcharts-legend-series .apexcharts-legend-marker{margin-right:7px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ChartComponent, selector: "apx-chart", inputs: ["chart", "annotations", "colors", "dataLabels", "series", "stroke", "labels", "legend", "markers", "noData", "fill", "tooltip", "plotOptions", "responsive", "xaxis", "yaxis", "forecastDataPoints", "grid", "states", "title", "subtitle", "theme", "autoUpdateSeries"] }] });
|
|
115
115
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PieChartComponent, decorators: [{
|
|
116
116
|
type: Component,
|
|
117
|
-
args: [{ selector: 'biit-pie-chart', template: "<div id=\"bar-chart\"\n [style.opacity]=\"chartOptions ? '1' : '0'\">\n <apx-chart *ngIf=\"chartOptions\"\n [series]=\"chartOptions.series\"\n [chart]=\"chartOptions.chart\"\n [labels]=\"chartOptions.labels\"\n [dataLabels]=\"chartOptions.dataLabels\"\n [colors]=\"chartOptions.colors\"\n [plotOptions]=\"chartOptions.plotOptions\"\n [xaxis]=\"chartOptions.xaxis\"\n [yaxis]=\"chartOptions.yaxis\"\n [legend]=\"chartOptions.legend\"\n [title]=\"chartOptions.title\"\n [tooltip]=\"chartOptions.tooltip\"\n [grid]=\"chartOptions.grid\"\n [fill]=\"chartOptions.fill\"\n [states]=\"chartOptions.states\"\n style=\"display: block; height: 100%;\"\n #apexChart\n ></apx-chart>\n</div>\n", styles: ["#bar-chart{display:block;height:inherit;width:inherit;overflow:hidden;overflow-x:auto;transition:1s ease-in-out}#bar-chart ::ng-deep .apexcharts-tooltip{border:1px solid var(--component-color);border-radius:0;box-shadow:none;font-family:Montserrat;font-size:.7rem;background:var(--
|
|
117
|
+
args: [{ selector: 'biit-pie-chart', template: "<div id=\"bar-chart\"\n [style.opacity]=\"chartOptions ? '1' : '0'\">\n <apx-chart *ngIf=\"chartOptions\"\n [series]=\"chartOptions.series\"\n [chart]=\"chartOptions.chart\"\n [labels]=\"chartOptions.labels\"\n [dataLabels]=\"chartOptions.dataLabels\"\n [colors]=\"chartOptions.colors\"\n [plotOptions]=\"chartOptions.plotOptions\"\n [xaxis]=\"chartOptions.xaxis\"\n [yaxis]=\"chartOptions.yaxis\"\n [legend]=\"chartOptions.legend\"\n [title]=\"chartOptions.title\"\n [tooltip]=\"chartOptions.tooltip\"\n [grid]=\"chartOptions.grid\"\n [fill]=\"chartOptions.fill\"\n [states]=\"chartOptions.states\"\n style=\"display: block; height: 100%;\"\n #apexChart\n ></apx-chart>\n</div>\n", styles: ["#bar-chart{display:block;height:inherit;width:inherit;overflow:hidden;overflow-x:auto;transition:1s ease-in-out}#bar-chart ::ng-deep .apexcharts-tooltip{border:1px solid var(--component-color);border-radius:0;box-shadow:none;font-family:Montserrat;font-size:.7rem;background:var(--chart-background)}#bar-chart ::ng-deep .apexcharts-tooltip *{box-sizing:border-box}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content{display:flex;flex-direction:column;row-gap:.2rem;padding:.45rem .7rem;color:var(--component-color)}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data{display:flex;align-items:center}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-square{height:.5rem;width:.5rem;margin-right:.45rem}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-line{height:.1rem;width:.5rem;margin-right:.45rem}#bar-chart ::ng-deep .apexcharts-series path:hover{box-sizing:border-box;border:.15rem solid var(--component-color)}#bar-chart ::ng-deep .apexcharts-legend-series .apexcharts-legend-marker{margin-right:7px}\n"] }]
|
|
118
118
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { apexChart: [{
|
|
119
119
|
type: ViewChild,
|
|
120
120
|
args: ['apexChart']
|
|
@@ -119,10 +119,10 @@ export class RadarChartComponent {
|
|
|
119
119
|
}
|
|
120
120
|
}
|
|
121
121
|
RadarChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RadarChartComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
122
|
-
RadarChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: RadarChartComponent, selector: "biit-radar-chart", inputs: { data: "data", title: "title", width: "width", min: "min", max: "max" }, viewQueries: [{ propertyName: "apexChart", first: true, predicate: ["apexChart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"bar-chart\"\n [style.opacity]=\"chartOptions ? '1' : '0'\">\n <apx-chart *ngIf=\"chartOptions\"\n [series]=\"chartOptions.series\"\n [chart]=\"chartOptions.chart\"\n [dataLabels]=\"chartOptions.dataLabels\"\n [plotOptions]=\"chartOptions.plotOptions\"\n [xaxis]=\"chartOptions.xaxis\"\n [yaxis]=\"chartOptions.yaxis\"\n [legend]=\"chartOptions.legend\"\n [title]=\"chartOptions.title\"\n [tooltip]=\"chartOptions.tooltip\"\n [fill]=\"chartOptions.fill\"\n [states]=\"chartOptions.states\"\n [markers]=\"chartOptions.markers\"\n [stroke]=\"chartOptions.stroke\"\n style=\"display: block; height: 100%;\"\n #apexChart\n ></apx-chart>\n</div>\n", styles: ["#bar-chart{display:block;height:inherit;width:inherit;overflow:hidden;overflow-x:auto;transition:1s ease-in-out}#bar-chart ::ng-deep .apexcharts-tooltip{border:1px solid var(--component-color);border-radius:0;box-shadow:none;font-family:Montserrat;font-size:.7rem;background:var(--
|
|
122
|
+
RadarChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: RadarChartComponent, selector: "biit-radar-chart", inputs: { data: "data", title: "title", width: "width", min: "min", max: "max" }, viewQueries: [{ propertyName: "apexChart", first: true, predicate: ["apexChart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"bar-chart\"\n [style.opacity]=\"chartOptions ? '1' : '0'\">\n <apx-chart *ngIf=\"chartOptions\"\n [series]=\"chartOptions.series\"\n [chart]=\"chartOptions.chart\"\n [dataLabels]=\"chartOptions.dataLabels\"\n [plotOptions]=\"chartOptions.plotOptions\"\n [xaxis]=\"chartOptions.xaxis\"\n [yaxis]=\"chartOptions.yaxis\"\n [legend]=\"chartOptions.legend\"\n [title]=\"chartOptions.title\"\n [tooltip]=\"chartOptions.tooltip\"\n [fill]=\"chartOptions.fill\"\n [states]=\"chartOptions.states\"\n [markers]=\"chartOptions.markers\"\n [stroke]=\"chartOptions.stroke\"\n style=\"display: block; height: 100%;\"\n #apexChart\n ></apx-chart>\n</div>\n", styles: ["#bar-chart{display:block;height:inherit;width:inherit;overflow:hidden;overflow-x:auto;transition:1s ease-in-out}#bar-chart ::ng-deep .apexcharts-tooltip{border:1px solid var(--component-color);border-radius:0;box-shadow:none;font-family:Montserrat;font-size:.7rem;background:var(--chart-background)}#bar-chart ::ng-deep .apexcharts-tooltip *{box-sizing:border-box}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-header{background:var(--component-color);color:var(--chart-background);padding:.45rem .7rem}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content{display:flex;flex-direction:column;row-gap:.2rem;padding:.45rem .7rem}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data{display:flex;align-items:center}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-square{height:.5rem;width:.5rem;margin-right:.45rem}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-line{height:.1rem;width:.5rem;margin-right:.45rem}#bar-chart ::ng-deep .apexcharts-series path:hover{box-sizing:border-box;border:.15rem solid var(--component-color)}#bar-chart ::ng-deep .apexcharts-legend-series .apexcharts-legend-marker{margin-right:7px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ChartComponent, selector: "apx-chart", inputs: ["chart", "annotations", "colors", "dataLabels", "series", "stroke", "labels", "legend", "markers", "noData", "fill", "tooltip", "plotOptions", "responsive", "xaxis", "yaxis", "forecastDataPoints", "grid", "states", "title", "subtitle", "theme", "autoUpdateSeries"] }] });
|
|
123
123
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RadarChartComponent, decorators: [{
|
|
124
124
|
type: Component,
|
|
125
|
-
args: [{ selector: 'biit-radar-chart', template: "<div id=\"bar-chart\"\n [style.opacity]=\"chartOptions ? '1' : '0'\">\n <apx-chart *ngIf=\"chartOptions\"\n [series]=\"chartOptions.series\"\n [chart]=\"chartOptions.chart\"\n [dataLabels]=\"chartOptions.dataLabels\"\n [plotOptions]=\"chartOptions.plotOptions\"\n [xaxis]=\"chartOptions.xaxis\"\n [yaxis]=\"chartOptions.yaxis\"\n [legend]=\"chartOptions.legend\"\n [title]=\"chartOptions.title\"\n [tooltip]=\"chartOptions.tooltip\"\n [fill]=\"chartOptions.fill\"\n [states]=\"chartOptions.states\"\n [markers]=\"chartOptions.markers\"\n [stroke]=\"chartOptions.stroke\"\n style=\"display: block; height: 100%;\"\n #apexChart\n ></apx-chart>\n</div>\n", styles: ["#bar-chart{display:block;height:inherit;width:inherit;overflow:hidden;overflow-x:auto;transition:1s ease-in-out}#bar-chart ::ng-deep .apexcharts-tooltip{border:1px solid var(--component-color);border-radius:0;box-shadow:none;font-family:Montserrat;font-size:.7rem;background:var(--
|
|
125
|
+
args: [{ selector: 'biit-radar-chart', template: "<div id=\"bar-chart\"\n [style.opacity]=\"chartOptions ? '1' : '0'\">\n <apx-chart *ngIf=\"chartOptions\"\n [series]=\"chartOptions.series\"\n [chart]=\"chartOptions.chart\"\n [dataLabels]=\"chartOptions.dataLabels\"\n [plotOptions]=\"chartOptions.plotOptions\"\n [xaxis]=\"chartOptions.xaxis\"\n [yaxis]=\"chartOptions.yaxis\"\n [legend]=\"chartOptions.legend\"\n [title]=\"chartOptions.title\"\n [tooltip]=\"chartOptions.tooltip\"\n [fill]=\"chartOptions.fill\"\n [states]=\"chartOptions.states\"\n [markers]=\"chartOptions.markers\"\n [stroke]=\"chartOptions.stroke\"\n style=\"display: block; height: 100%;\"\n #apexChart\n ></apx-chart>\n</div>\n", styles: ["#bar-chart{display:block;height:inherit;width:inherit;overflow:hidden;overflow-x:auto;transition:1s ease-in-out}#bar-chart ::ng-deep .apexcharts-tooltip{border:1px solid var(--component-color);border-radius:0;box-shadow:none;font-family:Montserrat;font-size:.7rem;background:var(--chart-background)}#bar-chart ::ng-deep .apexcharts-tooltip *{box-sizing:border-box}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-header{background:var(--component-color);color:var(--chart-background);padding:.45rem .7rem}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content{display:flex;flex-direction:column;row-gap:.2rem;padding:.45rem .7rem}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data{display:flex;align-items:center}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-square{height:.5rem;width:.5rem;margin-right:.45rem}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-line{height:.1rem;width:.5rem;margin-right:.45rem}#bar-chart ::ng-deep .apexcharts-series path:hover{box-sizing:border-box;border:.15rem solid var(--component-color)}#bar-chart ::ng-deep .apexcharts-legend-series .apexcharts-legend-marker{margin-right:7px}\n"] }]
|
|
126
126
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { apexChart: [{
|
|
127
127
|
type: ViewChild,
|
|
128
128
|
args: ['apexChart']
|
|
@@ -122,10 +122,10 @@ export class RadialChartComponent {
|
|
|
122
122
|
}
|
|
123
123
|
}
|
|
124
124
|
RadialChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RadialChartComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
125
|
-
RadialChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: RadialChartComponent, selector: "biit-radial-chart", inputs: { data: "data", title: "title", width: "width", min: "min", max: "max", gauge: "gauge" }, viewQueries: [{ propertyName: "apexChart", first: true, predicate: ["apexChart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"bar-chart\"\n [style.opacity]=\"chartOptions ? '1' : '0'\">\n <apx-chart *ngIf=\"chartOptions\"\n [series]=\"chartOptions.series\"\n [chart]=\"chartOptions.chart\"\n [labels]=\"chartOptions.labels\"\n [dataLabels]=\"chartOptions.dataLabels\"\n [colors]=\"chartOptions.colors\"\n [plotOptions]=\"chartOptions.plotOptions\"\n [xaxis]=\"chartOptions.xaxis\"\n [yaxis]=\"chartOptions.yaxis\"\n [legend]=\"chartOptions.legend\"\n [title]=\"chartOptions.title\"\n [tooltip]=\"chartOptions.tooltip\"\n [grid]=\"chartOptions.grid\"\n [fill]=\"chartOptions.fill\"\n [states]=\"chartOptions.states\"\n style=\"display: block; height: 100%;\"\n #apexChart\n ></apx-chart>\n</div>\n", styles: ["#bar-chart{display:block;height:inherit;width:inherit;overflow:hidden;overflow-x:auto;transition:1s ease-in-out}#bar-chart ::ng-deep .apexcharts-tooltip{border:1px solid #262626;border-radius:0;box-shadow:none;font-family:Montserrat;font-size:.7rem;background:var(--
|
|
125
|
+
RadialChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: RadialChartComponent, selector: "biit-radial-chart", inputs: { data: "data", title: "title", width: "width", min: "min", max: "max", gauge: "gauge" }, viewQueries: [{ propertyName: "apexChart", first: true, predicate: ["apexChart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"bar-chart\"\n [style.opacity]=\"chartOptions ? '1' : '0'\">\n <apx-chart *ngIf=\"chartOptions\"\n [series]=\"chartOptions.series\"\n [chart]=\"chartOptions.chart\"\n [labels]=\"chartOptions.labels\"\n [dataLabels]=\"chartOptions.dataLabels\"\n [colors]=\"chartOptions.colors\"\n [plotOptions]=\"chartOptions.plotOptions\"\n [xaxis]=\"chartOptions.xaxis\"\n [yaxis]=\"chartOptions.yaxis\"\n [legend]=\"chartOptions.legend\"\n [title]=\"chartOptions.title\"\n [tooltip]=\"chartOptions.tooltip\"\n [grid]=\"chartOptions.grid\"\n [fill]=\"chartOptions.fill\"\n [states]=\"chartOptions.states\"\n style=\"display: block; height: 100%;\"\n #apexChart\n ></apx-chart>\n</div>\n", styles: ["#bar-chart{display:block;height:inherit;width:inherit;overflow:hidden;overflow-x:auto;transition:1s ease-in-out}#bar-chart ::ng-deep .apexcharts-tooltip{border:1px solid #262626;border-radius:0;box-shadow:none;font-family:Montserrat;font-size:.7rem;background:var(--chart-background)}#bar-chart ::ng-deep .apexcharts-tooltip *{box-sizing:border-box}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content{display:flex;flex-direction:column;row-gap:.2rem;padding:.45rem .7rem;color:var(--component-color)}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data{display:flex;align-items:center}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-square{height:.5rem;width:.5rem;margin-right:.45rem}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-line{height:.1rem;width:.5rem;margin-right:.45rem}#bar-chart ::ng-deep .apexcharts-series path:hover{box-sizing:border-box;border:.15rem solid var(--component-color)}#bar-chart ::ng-deep .apexcharts-legend-series .apexcharts-legend-marker{margin-right:7px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ChartComponent, selector: "apx-chart", inputs: ["chart", "annotations", "colors", "dataLabels", "series", "stroke", "labels", "legend", "markers", "noData", "fill", "tooltip", "plotOptions", "responsive", "xaxis", "yaxis", "forecastDataPoints", "grid", "states", "title", "subtitle", "theme", "autoUpdateSeries"] }] });
|
|
126
126
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RadialChartComponent, decorators: [{
|
|
127
127
|
type: Component,
|
|
128
|
-
args: [{ selector: 'biit-radial-chart', template: "<div id=\"bar-chart\"\n [style.opacity]=\"chartOptions ? '1' : '0'\">\n <apx-chart *ngIf=\"chartOptions\"\n [series]=\"chartOptions.series\"\n [chart]=\"chartOptions.chart\"\n [labels]=\"chartOptions.labels\"\n [dataLabels]=\"chartOptions.dataLabels\"\n [colors]=\"chartOptions.colors\"\n [plotOptions]=\"chartOptions.plotOptions\"\n [xaxis]=\"chartOptions.xaxis\"\n [yaxis]=\"chartOptions.yaxis\"\n [legend]=\"chartOptions.legend\"\n [title]=\"chartOptions.title\"\n [tooltip]=\"chartOptions.tooltip\"\n [grid]=\"chartOptions.grid\"\n [fill]=\"chartOptions.fill\"\n [states]=\"chartOptions.states\"\n style=\"display: block; height: 100%;\"\n #apexChart\n ></apx-chart>\n</div>\n", styles: ["#bar-chart{display:block;height:inherit;width:inherit;overflow:hidden;overflow-x:auto;transition:1s ease-in-out}#bar-chart ::ng-deep .apexcharts-tooltip{border:1px solid #262626;border-radius:0;box-shadow:none;font-family:Montserrat;font-size:.7rem;background:var(--
|
|
128
|
+
args: [{ selector: 'biit-radial-chart', template: "<div id=\"bar-chart\"\n [style.opacity]=\"chartOptions ? '1' : '0'\">\n <apx-chart *ngIf=\"chartOptions\"\n [series]=\"chartOptions.series\"\n [chart]=\"chartOptions.chart\"\n [labels]=\"chartOptions.labels\"\n [dataLabels]=\"chartOptions.dataLabels\"\n [colors]=\"chartOptions.colors\"\n [plotOptions]=\"chartOptions.plotOptions\"\n [xaxis]=\"chartOptions.xaxis\"\n [yaxis]=\"chartOptions.yaxis\"\n [legend]=\"chartOptions.legend\"\n [title]=\"chartOptions.title\"\n [tooltip]=\"chartOptions.tooltip\"\n [grid]=\"chartOptions.grid\"\n [fill]=\"chartOptions.fill\"\n [states]=\"chartOptions.states\"\n style=\"display: block; height: 100%;\"\n #apexChart\n ></apx-chart>\n</div>\n", styles: ["#bar-chart{display:block;height:inherit;width:inherit;overflow:hidden;overflow-x:auto;transition:1s ease-in-out}#bar-chart ::ng-deep .apexcharts-tooltip{border:1px solid #262626;border-radius:0;box-shadow:none;font-family:Montserrat;font-size:.7rem;background:var(--chart-background)}#bar-chart ::ng-deep .apexcharts-tooltip *{box-sizing:border-box}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content{display:flex;flex-direction:column;row-gap:.2rem;padding:.45rem .7rem;color:var(--component-color)}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data{display:flex;align-items:center}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-square{height:.5rem;width:.5rem;margin-right:.45rem}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-line{height:.1rem;width:.5rem;margin-right:.45rem}#bar-chart ::ng-deep .apexcharts-series path:hover{box-sizing:border-box;border:.15rem solid var(--component-color)}#bar-chart ::ng-deep .apexcharts-legend-series .apexcharts-legend-marker{margin-right:7px}\n"] }]
|
|
129
129
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { apexChart: [{
|
|
130
130
|
type: ViewChild,
|
|
131
131
|
args: ['apexChart']
|
|
@@ -189,10 +189,10 @@ export class TimelineViewerChartComponent {
|
|
|
189
189
|
}
|
|
190
190
|
}
|
|
191
191
|
TimelineViewerChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineViewerChartComponent, deps: [{ token: i1.DatePipe }], target: i0.ɵɵFactoryTarget.Component });
|
|
192
|
-
TimelineViewerChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TimelineViewerChartComponent, selector: "biit-timeline-viewer-chart", inputs: { data: "data", options: "options" }, outputs: { onItemClick: "onItemClick" }, viewQueries: [{ propertyName: "apexChart", first: true, predicate: ["apexChart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"bar-chart\"\n>\n <apx-chart *ngIf=\"scatterChartOptions\"\n [dataLabels]=\"scatterChartOptions.dataLabels\"\n [fill]=\"scatterChartOptions.fill\"\n [xaxis]=\"scatterChartOptions.xaxis\"\n [yaxis]=\"scatterChartOptions.yaxis\"\n [stroke]=\"scatterChartOptions.stroke\"\n [series]=\"scatterChartOptions.series\"\n [chart]=\"scatterChartOptions.chart\"\n [colors]=\"scatterChartOptions.colors\"\n [legend]=\"scatterChartOptions.legend\"\n [markers]=\"scatterChartOptions.markers\"\n [tooltip]=\"scatterChartOptions.tooltip\"\n style=\"display: block; width: 100%; height: 100%\"\n #apexChart\n ></apx-chart>\n <apx-chart *ngIf=\"areaChartOptions\"\n [dataLabels]=\"areaChartOptions.dataLabels\"\n [fill]=\"areaChartOptions.fill\"\n [xaxis]=\"areaChartOptions.xaxis\"\n [stroke]=\"areaChartOptions.stroke\"\n [series]=\"areaChartOptions.series\"\n [chart]=\"areaChartOptions.chart\"\n [colors]=\"areaChartOptions.colors\"\n [yaxis]=\"areaChartOptions.yaxis\"\n style=\"display: block; width: 100%\"\n ></apx-chart>\n</div>\n", styles: ["#bar-chart{display:flex;flex-direction:column;height:100%;width:100%;transition:1s ease-in-out}#bar-chart ::ng-deep .apexcharts-tooltip{border:1px solid var(--
|
|
192
|
+
TimelineViewerChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TimelineViewerChartComponent, selector: "biit-timeline-viewer-chart", inputs: { data: "data", options: "options" }, outputs: { onItemClick: "onItemClick" }, viewQueries: [{ propertyName: "apexChart", first: true, predicate: ["apexChart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"bar-chart\"\n>\n <apx-chart *ngIf=\"scatterChartOptions\"\n [dataLabels]=\"scatterChartOptions.dataLabels\"\n [fill]=\"scatterChartOptions.fill\"\n [xaxis]=\"scatterChartOptions.xaxis\"\n [yaxis]=\"scatterChartOptions.yaxis\"\n [stroke]=\"scatterChartOptions.stroke\"\n [series]=\"scatterChartOptions.series\"\n [chart]=\"scatterChartOptions.chart\"\n [colors]=\"scatterChartOptions.colors\"\n [legend]=\"scatterChartOptions.legend\"\n [markers]=\"scatterChartOptions.markers\"\n [tooltip]=\"scatterChartOptions.tooltip\"\n style=\"display: block; width: 100%; height: 100%\"\n #apexChart\n ></apx-chart>\n <apx-chart *ngIf=\"areaChartOptions\"\n [dataLabels]=\"areaChartOptions.dataLabels\"\n [fill]=\"areaChartOptions.fill\"\n [xaxis]=\"areaChartOptions.xaxis\"\n [stroke]=\"areaChartOptions.stroke\"\n [series]=\"areaChartOptions.series\"\n [chart]=\"areaChartOptions.chart\"\n [colors]=\"areaChartOptions.colors\"\n [yaxis]=\"areaChartOptions.yaxis\"\n style=\"display: block; width: 100%\"\n ></apx-chart>\n</div>\n", styles: ["#bar-chart{display:flex;flex-direction:column;height:100%;width:100%;transition:1s ease-in-out}#bar-chart ::ng-deep .apexcharts-tooltip{border:1px solid var(--chart-background);border-radius:0;box-shadow:none;font-family:Montserrat;font-size:.7rem;background:var(--chart-background)}#bar-chart ::ng-deep .apexcharts-tooltip *{box-sizing:border-box}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-header{background:var(--chart-background);color:var(--chart-background);padding:.45rem .7rem}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content{display:flex;flex-direction:column;row-gap:.2rem;padding:.45rem .7rem}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data{display:flex;align-items:center}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-square{height:.5rem;width:.5rem;margin-right:.45rem}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-line{height:.1rem;width:.5rem;margin-right:.45rem}#bar-chart ::ng-deep .apexcharts-series path:hover{box-sizing:border-box;border:.15rem solid var(--chart-background)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ChartComponent, selector: "apx-chart", inputs: ["chart", "annotations", "colors", "dataLabels", "series", "stroke", "labels", "legend", "markers", "noData", "fill", "tooltip", "plotOptions", "responsive", "xaxis", "yaxis", "forecastDataPoints", "grid", "states", "title", "subtitle", "theme", "autoUpdateSeries"] }] });
|
|
193
193
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineViewerChartComponent, decorators: [{
|
|
194
194
|
type: Component,
|
|
195
|
-
args: [{ selector: 'biit-timeline-viewer-chart', template: "<div id=\"bar-chart\"\n>\n <apx-chart *ngIf=\"scatterChartOptions\"\n [dataLabels]=\"scatterChartOptions.dataLabels\"\n [fill]=\"scatterChartOptions.fill\"\n [xaxis]=\"scatterChartOptions.xaxis\"\n [yaxis]=\"scatterChartOptions.yaxis\"\n [stroke]=\"scatterChartOptions.stroke\"\n [series]=\"scatterChartOptions.series\"\n [chart]=\"scatterChartOptions.chart\"\n [colors]=\"scatterChartOptions.colors\"\n [legend]=\"scatterChartOptions.legend\"\n [markers]=\"scatterChartOptions.markers\"\n [tooltip]=\"scatterChartOptions.tooltip\"\n style=\"display: block; width: 100%; height: 100%\"\n #apexChart\n ></apx-chart>\n <apx-chart *ngIf=\"areaChartOptions\"\n [dataLabels]=\"areaChartOptions.dataLabels\"\n [fill]=\"areaChartOptions.fill\"\n [xaxis]=\"areaChartOptions.xaxis\"\n [stroke]=\"areaChartOptions.stroke\"\n [series]=\"areaChartOptions.series\"\n [chart]=\"areaChartOptions.chart\"\n [colors]=\"areaChartOptions.colors\"\n [yaxis]=\"areaChartOptions.yaxis\"\n style=\"display: block; width: 100%\"\n ></apx-chart>\n</div>\n", styles: ["#bar-chart{display:flex;flex-direction:column;height:100%;width:100%;transition:1s ease-in-out}#bar-chart ::ng-deep .apexcharts-tooltip{border:1px solid var(--
|
|
195
|
+
args: [{ selector: 'biit-timeline-viewer-chart', template: "<div id=\"bar-chart\"\n>\n <apx-chart *ngIf=\"scatterChartOptions\"\n [dataLabels]=\"scatterChartOptions.dataLabels\"\n [fill]=\"scatterChartOptions.fill\"\n [xaxis]=\"scatterChartOptions.xaxis\"\n [yaxis]=\"scatterChartOptions.yaxis\"\n [stroke]=\"scatterChartOptions.stroke\"\n [series]=\"scatterChartOptions.series\"\n [chart]=\"scatterChartOptions.chart\"\n [colors]=\"scatterChartOptions.colors\"\n [legend]=\"scatterChartOptions.legend\"\n [markers]=\"scatterChartOptions.markers\"\n [tooltip]=\"scatterChartOptions.tooltip\"\n style=\"display: block; width: 100%; height: 100%\"\n #apexChart\n ></apx-chart>\n <apx-chart *ngIf=\"areaChartOptions\"\n [dataLabels]=\"areaChartOptions.dataLabels\"\n [fill]=\"areaChartOptions.fill\"\n [xaxis]=\"areaChartOptions.xaxis\"\n [stroke]=\"areaChartOptions.stroke\"\n [series]=\"areaChartOptions.series\"\n [chart]=\"areaChartOptions.chart\"\n [colors]=\"areaChartOptions.colors\"\n [yaxis]=\"areaChartOptions.yaxis\"\n style=\"display: block; width: 100%\"\n ></apx-chart>\n</div>\n", styles: ["#bar-chart{display:flex;flex-direction:column;height:100%;width:100%;transition:1s ease-in-out}#bar-chart ::ng-deep .apexcharts-tooltip{border:1px solid var(--chart-background);border-radius:0;box-shadow:none;font-family:Montserrat;font-size:.7rem;background:var(--chart-background)}#bar-chart ::ng-deep .apexcharts-tooltip *{box-sizing:border-box}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-header{background:var(--chart-background);color:var(--chart-background);padding:.45rem .7rem}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content{display:flex;flex-direction:column;row-gap:.2rem;padding:.45rem .7rem}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data{display:flex;align-items:center}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-square{height:.5rem;width:.5rem;margin-right:.45rem}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-line{height:.1rem;width:.5rem;margin-right:.45rem}#bar-chart ::ng-deep .apexcharts-series path:hover{box-sizing:border-box;border:.15rem solid var(--chart-background)}\n"] }]
|
|
196
196
|
}], ctorParameters: function () { return [{ type: i1.DatePipe }]; }, propDecorators: { apexChart: [{
|
|
197
197
|
type: ViewChild,
|
|
198
198
|
args: ['apexChart']
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Component,
|
|
1
|
+
import { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';
|
|
2
2
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
import * as i1 from "@angular/common";
|
|
@@ -8,8 +8,11 @@ export class BiitCheckboxComponent {
|
|
|
8
8
|
constructor() {
|
|
9
9
|
this.disabled = false;
|
|
10
10
|
this.showAlwaysDescription = false;
|
|
11
|
-
this.
|
|
12
|
-
this.
|
|
11
|
+
this.onValueChange = new EventEmitter();
|
|
12
|
+
this.onChange = (value) => {
|
|
13
|
+
};
|
|
14
|
+
this.onTouched = () => {
|
|
15
|
+
};
|
|
13
16
|
}
|
|
14
17
|
registerOnChange(fn) {
|
|
15
18
|
this.onChange = fn;
|
|
@@ -23,10 +26,11 @@ export class BiitCheckboxComponent {
|
|
|
23
26
|
onModelChange(event) {
|
|
24
27
|
this.checked = event;
|
|
25
28
|
this.onChange(event);
|
|
29
|
+
this.onValueChange.emit(this.checked);
|
|
26
30
|
}
|
|
27
31
|
}
|
|
28
32
|
BiitCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
29
|
-
BiitCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitCheckboxComponent, selector: "biit-checkbox", inputs: { disabled: "disabled", description: "description", showAlwaysDescription: "showAlwaysDescription" }, providers: [
|
|
33
|
+
BiitCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitCheckboxComponent, selector: "biit-checkbox", inputs: { disabled: "disabled", description: "description", showAlwaysDescription: "showAlwaysDescription" }, outputs: { onValueChange: "onValueChange" }, providers: [
|
|
30
34
|
{
|
|
31
35
|
provide: NG_VALUE_ACCESSOR,
|
|
32
36
|
useExisting: forwardRef(() => BiitCheckboxComponent),
|
|
@@ -48,5 +52,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
48
52
|
type: Input
|
|
49
53
|
}], showAlwaysDescription: [{
|
|
50
54
|
type: Input
|
|
55
|
+
}], onValueChange: [{
|
|
56
|
+
type: Output
|
|
51
57
|
}] } });
|
|
52
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
58
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmlpdC1jaGVja2JveC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy93aXphcmRyeS10aGVtZS9pbnB1dHMvc3JjL2JpaXQtY2hlY2tib3gvYmlpdC1jaGVja2JveC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy93aXphcmRyeS10aGVtZS9pbnB1dHMvc3JjL2JpaXQtY2hlY2tib3gvYmlpdC1jaGVja2JveC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFFLFlBQVksRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUNqRixPQUFPLEVBQXVCLGlCQUFpQixFQUFDLE1BQU0sZ0JBQWdCLENBQUM7Ozs7O0FBY3ZFLE1BQU0sT0FBTyxxQkFBcUI7SUFabEM7UUFhVyxhQUFRLEdBQUcsS0FBSyxDQUFDO1FBRWpCLDBCQUFxQixHQUFHLEtBQUssQ0FBQztRQUM3QixrQkFBYSxHQUEwQixJQUFJLFlBQVksRUFBVyxDQUFDO1FBRzdFLGFBQVEsR0FBRyxDQUFDLEtBQVUsRUFBRSxFQUFFO1FBQzFCLENBQUMsQ0FBQztRQUNGLGNBQVMsR0FBRyxHQUFHLEVBQUU7UUFDakIsQ0FBQyxDQUFDO0tBbUJIO0lBakJDLGdCQUFnQixDQUFDLEVBQU87UUFDdEIsSUFBSSxDQUFDLFFBQVEsR0FBRyxFQUFFLENBQUM7SUFDckIsQ0FBQztJQUVELGlCQUFpQixDQUFDLEVBQU87UUFDdkIsSUFBSSxDQUFDLFNBQVMsR0FBRyxFQUFFLENBQUM7SUFDdEIsQ0FBQztJQUVELFVBQVUsQ0FBQyxPQUFnQjtRQUN6QixJQUFJLENBQUMsT0FBTyxHQUFHLE9BQU8sQ0FBQztJQUN6QixDQUFDO0lBRUQsYUFBYSxDQUFDLEtBQWM7UUFDMUIsSUFBSSxDQUFDLE9BQU8sR0FBRyxLQUFLLENBQUM7UUFDckIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUNyQixJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUM7SUFDeEMsQ0FBQzs7bUhBNUJVLHFCQUFxQjt1R0FBckIscUJBQXFCLG1NQVJyQjtRQUNUO1lBQ0UsT0FBTyxFQUFFLGlCQUFpQjtZQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLHFCQUFxQixDQUFDO1lBQ3BELEtBQUssRUFBRSxJQUFJO1NBQ1o7S0FDRiwwQkNiSCxrb0JBaUJBOzRGREZhLHFCQUFxQjtrQkFaakMsU0FBUzsrQkFDRSxlQUFlLGFBR2Q7d0JBQ1Q7NEJBQ0UsT0FBTyxFQUFFLGlCQUFpQjs0QkFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsc0JBQXNCLENBQUM7NEJBQ3BELEtBQUssRUFBRSxJQUFJO3lCQUNaO3FCQUNGOzhCQUdRLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxxQkFBcUI7c0JBQTdCLEtBQUs7Z0JBQ0ksYUFBYTtzQkFBdEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIGZvcndhcmRSZWYsIElucHV0LCBPdXRwdXR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtDb250cm9sVmFsdWVBY2Nlc3NvciwgTkdfVkFMVUVfQUNDRVNTT1J9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYmlpdC1jaGVja2JveCcsXG4gIHRlbXBsYXRlVXJsOiAnYmlpdC1jaGVja2JveC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWydiaWl0LWNoZWNrYm94LmNvbXBvbmVudC5zY3NzJ10sXG4gIHByb3ZpZGVyczogW1xuICAgIHtcbiAgICAgIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gQmlpdENoZWNrYm94Q29tcG9uZW50KSxcbiAgICAgIG11bHRpOiB0cnVlXG4gICAgfVxuICBdXG59KVxuZXhwb3J0IGNsYXNzIEJpaXRDaGVja2JveENvbXBvbmVudCBpbXBsZW1lbnRzIENvbnRyb2xWYWx1ZUFjY2Vzc29yIHtcbiAgQElucHV0KCkgZGlzYWJsZWQgPSBmYWxzZTtcbiAgQElucHV0KCkgZGVzY3JpcHRpb246IHN0cmluZztcbiAgQElucHV0KCkgc2hvd0Fsd2F5c0Rlc2NyaXB0aW9uID0gZmFsc2U7XG4gIEBPdXRwdXQoKSBvblZhbHVlQ2hhbmdlOiBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4gPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XG4gIGNoZWNrZWQ6IGFueTtcblxuICBvbkNoYW5nZSA9ICh2YWx1ZTogYW55KSA9PiB7XG4gIH07XG4gIG9uVG91Y2hlZCA9ICgpID0+IHtcbiAgfTtcblxuICByZWdpc3Rlck9uQ2hhbmdlKGZuOiBhbnkpOiB2b2lkIHtcbiAgICB0aGlzLm9uQ2hhbmdlID0gZm47XG4gIH1cblxuICByZWdpc3Rlck9uVG91Y2hlZChmbjogYW55KTogdm9pZCB7XG4gICAgdGhpcy5vblRvdWNoZWQgPSBmbjtcbiAgfVxuXG4gIHdyaXRlVmFsdWUoY2hlY2tlZDogYm9vbGVhbik6IHZvaWQge1xuICAgIHRoaXMuY2hlY2tlZCA9IGNoZWNrZWQ7XG4gIH1cblxuICBvbk1vZGVsQ2hhbmdlKGV2ZW50OiBib29sZWFuKSB7XG4gICAgdGhpcy5jaGVja2VkID0gZXZlbnQ7XG4gICAgdGhpcy5vbkNoYW5nZShldmVudCk7XG4gICAgdGhpcy5vblZhbHVlQ2hhbmdlLmVtaXQodGhpcy5jaGVja2VkKTtcbiAgfVxufVxuIiwiPGxhYmVsIFtjbGFzcy5kaXNhYmxlZF09XCJkaXNhYmxlZFwiIGlkPVwiYmlpdC1jaGVja2JveFwiIGNsYXNzPVwiYmlpdC1jaGVja2JveFwiPlxuICA8aW5wdXQgW2F0dHIuaWRdPVwiY2hlY2tlZD8nY2hlY2tlZCc6J3VuY2hlY2tlZCdcIlxuICAgICAgICAgdHlwZT1cImNoZWNrYm94XCJcbiAgICAgICAgIGNsYXNzPVwiY2hlY2tib3gtYm94XCJcbiAgICAgICAgIFtuZ01vZGVsXT1cImNoZWNrZWRcIlxuICAgICAgICAgKG5nTW9kZWxDaGFuZ2UpPVwib25Nb2RlbENoYW5nZSgkZXZlbnQpXCJcbiAgICAgICAgIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiLz5cbiAgPGRpdj5cbiAgICA8ZGl2PlxuICAgICAgPGE+XG4gICAgICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgICAgIDwvYT5cbiAgICAgIDxiaWl0LXRvb2x0aXAtaWNvbiAqbmdJZj1cImRlc2NyaXB0aW9uICYmICFzaG93QWx3YXlzRGVzY3JpcHRpb25cIiBpbmxpbmUgW3RleHRdPVwiZGVzY3JpcHRpb25cIi8+XG4gICAgPC9kaXY+XG4gICAgPHNwYW4gY2xhc3M9XCJkZXNjcmlwdGlvblwiICpuZ0lmPVwiZGVzY3JpcHRpb24gJiYgc2hvd0Fsd2F5c0Rlc2NyaXB0aW9uXCI+e3sgZGVzY3JpcHRpb24gfX08L3NwYW4+XG4gIDwvZGl2PlxuPC9sYWJlbD5cbiJdfQ==
|
|
@@ -273,7 +273,7 @@ BiitMultiselectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0
|
|
|
273
273
|
useExisting: forwardRef(() => BiitMultiselectComponent),
|
|
274
274
|
multi: true
|
|
275
275
|
}
|
|
276
|
-
], ngImport: i0, template: "<!-- DEFAULT MODE -->\n<div *ngIf=\"type != 'icon'\"\n class=\"biit-input\" aria-haspopup=\"listbox\"\n [class.compact]=\"isCompact\"\n [class.disabled]=\"isDisabled\"\n (keydown)=\"!isDisabled && handleKeyboardEvents($event)\"\n (keydown.enter)=\"!dropdownOpen && !isDisabled && openDropdown()\"\n (keydown.space)=\"!dropdownOpen && !isDisabled && openDropdown()\"\n>\n <div class=\"input-container\" #input>\n <input [ngModel]=\"dropdownOpen ? filterText :\n currentValues && currentValues.length ? currentValues.length + ' selected' : ''\"\n (ngModelChange)=\"filterText = $event; handleFilter()\"\n (click)=\"!dropdownOpen && !isDisabled && openDropdown()\"\n (keydown.enter)=\"filterText.length ? onCreate.emit(filterText) : false; clearFilter();\"\n [placeholder]=\"dropdownOpen && currentValues && currentValues.length ? currentValues.length + ' selected' : ''\"\n tabindex=\"0\"\n class=\"input-object\"\n [class.grey-bg]=\"dropdownOpen\"\n [class.default-cursor]=\"dropdownOpen\"\n [disabled]=\"isDisabled\"\n [readonly]=\"!dropdownOpen\"/>\n <div class=\"input-show-icon-container\" id=\"arrow\"\n [class.passthrough]=\"!dropdownOpen\"\n [class.rotate-90]=\"dropdownOpen\"\n (click)=\"dropdownOpen && closeDropdown()\">\n <biit-icon [name]=\"'right_arrow'\"\n class=\"input-show-icon\"\n [pathStyle]=\"{fill: isDisabled ? '#D9D9D9' : dropdownOpen ? '#F20D5E' : '#262626'}\"\n ></biit-icon>\n </div>\n <div id=\"dropdown-label\"\n class=\"input-placeholder\"\n [class.disabled]=\"isDisabled\"\n [class.compact]=\"dropdownOpen || (currentValues?.length)\">\n {{ title }}\n <a *ngIf=\"isRequired\"\n [style.color]=\"currentValues.length ? null : 'red'\">*</a>\n </div>\n <div class=\"bottom-line\"\n [class.disabled]=\"isDisabled\"\n ></div>\n <span class=\"description\">{{ description }}</span>\n </div>\n</div>\n\n<!-- ICON MODE -->\n<button biit-icon *ngIf=\"type == 'icon'\"\n [icon]=\"icon\"\n (click)=\"!dropdownOpen ? openDropdown() : closeDropdown()\"\n [checked]=\"dropdownOpen\"\n [disabled]=\"isDisabled\"\n></button>\n\n<!-- DROPDOWN -->\n<div style=\"position: relative; height: 0; width: 100%\">\n <div #dropdown id=\"options\"\n [class.disabled]=\"isDisabled\"\n class=\"dropdown-list\"\n role=\"listbox\"\n aria-expanded=\"false\"\n aria-labelledby=\"dropdown-label\"\n [class.dropdown-open]=\"dropdownOpen\"\n [class.compact]=\"isCompact\"\n (keydown)=\"dropdownOpen && handleKeyboardEvents($event)\"\n >\n <biit-checkbox *ngFor=\"let item of filteredData; index as i\"\n [attr.id]=\"'option-' + (isPrimitive ? item : item[label])\"\n class=\"dropdown-item\"\n [class.selected]=\"currentValues && currentValues.includes(item)\"\n [ngModel]=\"currentValues && currentValues.includes(item)\"\n [description]=\"descriptionField && item[descriptionField]\"\n (click)=\"onModelChange(item); $event.stopPropagation(); $event.preventDefault();\"\n (keydown.enter)=\"onModelChange(item)\"\n (keydown.space)=\"onModelChange(item)\"\n [tabindex]=\"!dropdownOpen || isDisabled ? -1 : 0\"\n role=\"option\"\n aria-selected=\"false\"\n [disabled]=\"false\">\n {{ isPrimitive ? item : item[label] }}\n </biit-checkbox>\n <button *ngIf=\"!filteredData?.length\"\n class=\"dropdown-item no-results\"\n disabled\n >\n <a>No results found</a>\n </button>\n </div>\n</div>\n\n<div *ngIf=\"type == 'chips'\"\n class=\"chips\">\n <span\n *ngFor=\"let item of currentValues\"\n (click)=\"onModelChange(item)\"\n class=\"chips-item\"\n >\n {{ item[label] }}\n <biit-icon\n [name]=\"'cross_wide'\"\n [pathStyle]=\"{fill: '#ffffff'}\"\n ></biit-icon>\n </span>\n</div>\n", styles: ["*{box-sizing:border-box}input::selection{background-color:transparent}.biit-input{display:flex;min-width:12.8rem}.biit-input.compact{width:12.8rem}.input-container{position:relative;width:100%}.input-object{background-color:#fff;font-size:1rem;display:block;border:none;color:var(--component-color);padding:.7rem;height:2.1rem;width:100%;min-width:2.1rem;font-weight:400;cursor:pointer}.input-object:focus,.input-object:active,.input-object:hover{outline:none;background:var(--main-background)}.input-object:disabled{pointer-events:none;background-color:transparent;color:var(--main-background)}.default-cursor{cursor:auto}.input-placeholder{color:var(--component-color);font-size:1rem;font-weight:bolder;text-transform:uppercase;position:absolute;pointer-events:none;left:.7rem;top:.42rem;height:.7rem;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.input-placeholder.compact{top:-.95rem;font-size:.7rem;font-weight:400;color:var(--secondary-color)}.input-placeholder.disabled{color:var(--main-background)}.input-show-icon{width:1rem;height:1rem}.input-show-icon-container{top:0;right:0;position:absolute;width:2.1rem;height:2.1rem;align-content:center;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transform:rotate(90deg);transition:transform .5s ease}.input-show-icon-container:hover,.input-show-icon-container:focus,.input-show-icon-container:focus-visible{border:none;outline:none}.input-show-icon-container:hover~.input-object{background:var(--main-background)}.input-show-icon-container.rotate-90{transform:rotate(-90deg)}.bottom-line{position:relative;top:-3px;margin-bottom:-3px;width:auto;height:3px;background:#262626}.bottom-line.disabled{background:var(--main-background)}.dropdown-list{background:white;position:absolute;z-index:2;box-sizing:border-box;border:3px solid black;margin-top:-3px;min-width:100%;width:100%;cursor:pointer;transform-origin:top;opacity:0;display:none;pointer-events:none;transform:translateY(var(--origin));transition:opacity .5s ease,transform .5s ease;max-height:20rem;overflow-y:auto;overflow-x:hidden}.dropdown-list.dropdown-open{opacity:1;pointer-events:auto;transform:translate(0)}.dropdown-list.compact{width:12.8rem}.dropdown-list.disabled{visibility:hidden}.dropdown-item{background:none;color:inherit;border:none;font:inherit;width:100%;cursor:pointer;line-height:1rem;min-height:1.4rem;display:flex;align-items:center;padding:.2rem .7rem}.dropdown-item:not(.no-results):hover,.dropdown-item:not(.no-results):focus-visible{outline:none;background:var(--hover-color);width:calc(100% + 6px);margin-left:-3px;padding-left:calc(.7rem + 3px)}.dropdown-item.no-results{justify-content:center;padding:1rem;color:#d9d9d9}.dropdown-item ::ng-deep label{width:100%;height:100%;cursor:pointer}.dropdown-item ::ng-deep label input[type=checkbox]{cursor:pointer;pointer-events:none}.passthrough{pointer-events:none}.grey-bg{background:var(--main-background)}.onwards{--origin: 1rem}.downwards{--origin: -1rem}.description{position:absolute;display:flex;align-items:center;font-size:.75em;color:gray;padding-top:.2em;min-height:1.05em;line-height:120%;font-style:italic}.chips{display:flex;flex-wrap:wrap;gap:2px;margin-top:2px}.chips .chips-item{font-size:.75rem;color:#fff;background:#f20D5e;padding:.25rem .75rem;position:relative;cursor:pointer}.chips .chips-item biit-icon{display:none}.chips .chips-item:hover biit-icon{display:block;height:100%;width:5px;position:absolute;top:0;right:4px}\n"], dependencies: [{ kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.BiitIconComponent, selector: "biit-icon", inputs: ["name", "svgStyle", "pathStyle"] }, { kind: "component", type: i4.BiitCheckboxComponent, selector: "biit-checkbox", inputs: ["disabled", "description", "showAlwaysDescription"] }, { kind: "component", type: i5.BiitIconButtonComponent, selector: "button[biit-icon]", inputs: ["icon", "checked"] }] });
|
|
276
|
+
], ngImport: i0, template: "<!-- DEFAULT MODE -->\n<div *ngIf=\"type != 'icon'\"\n class=\"biit-input\" aria-haspopup=\"listbox\"\n [class.compact]=\"isCompact\"\n [class.disabled]=\"isDisabled\"\n (keydown)=\"!isDisabled && handleKeyboardEvents($event)\"\n (keydown.enter)=\"!dropdownOpen && !isDisabled && openDropdown()\"\n (keydown.space)=\"!dropdownOpen && !isDisabled && openDropdown()\"\n>\n <div class=\"input-container\" #input>\n <input [ngModel]=\"dropdownOpen ? filterText :\n currentValues && currentValues.length ? currentValues.length + ' selected' : ''\"\n (ngModelChange)=\"filterText = $event; handleFilter()\"\n (click)=\"!dropdownOpen && !isDisabled && openDropdown()\"\n (keydown.enter)=\"filterText.length ? onCreate.emit(filterText) : false; clearFilter();\"\n [placeholder]=\"dropdownOpen && currentValues && currentValues.length ? currentValues.length + ' selected' : ''\"\n tabindex=\"0\"\n class=\"input-object\"\n [class.grey-bg]=\"dropdownOpen\"\n [class.default-cursor]=\"dropdownOpen\"\n [disabled]=\"isDisabled\"\n [readonly]=\"!dropdownOpen\"/>\n <div class=\"input-show-icon-container\" id=\"arrow\"\n [class.passthrough]=\"!dropdownOpen\"\n [class.rotate-90]=\"dropdownOpen\"\n (click)=\"dropdownOpen && closeDropdown()\">\n <biit-icon [name]=\"'right_arrow'\"\n class=\"input-show-icon\"\n [pathStyle]=\"{fill: isDisabled ? '#D9D9D9' : dropdownOpen ? '#F20D5E' : '#262626'}\"\n ></biit-icon>\n </div>\n <div id=\"dropdown-label\"\n class=\"input-placeholder\"\n [class.disabled]=\"isDisabled\"\n [class.compact]=\"dropdownOpen || (currentValues?.length)\">\n {{ title }}\n <a *ngIf=\"isRequired\"\n [style.color]=\"currentValues.length ? null : 'red'\">*</a>\n </div>\n <div class=\"bottom-line\"\n [class.disabled]=\"isDisabled\"\n ></div>\n <span class=\"description\">{{ description }}</span>\n </div>\n</div>\n\n<!-- ICON MODE -->\n<button biit-icon *ngIf=\"type == 'icon'\"\n [icon]=\"icon\"\n (click)=\"!dropdownOpen ? openDropdown() : closeDropdown()\"\n [checked]=\"dropdownOpen\"\n [disabled]=\"isDisabled\"\n></button>\n\n<!-- DROPDOWN -->\n<div style=\"position: relative; height: 0; width: 100%\">\n <div #dropdown id=\"options\"\n [class.disabled]=\"isDisabled\"\n class=\"dropdown-list\"\n role=\"listbox\"\n aria-expanded=\"false\"\n aria-labelledby=\"dropdown-label\"\n [class.dropdown-open]=\"dropdownOpen\"\n [class.compact]=\"isCompact\"\n (keydown)=\"dropdownOpen && handleKeyboardEvents($event)\"\n >\n <biit-checkbox *ngFor=\"let item of filteredData; index as i\"\n [attr.id]=\"'option-' + (isPrimitive ? item : item[label])\"\n class=\"dropdown-item\"\n [class.selected]=\"currentValues && currentValues.includes(item)\"\n [ngModel]=\"currentValues && currentValues.includes(item)\"\n [description]=\"descriptionField && item[descriptionField]\"\n (click)=\"onModelChange(item); $event.stopPropagation(); $event.preventDefault();\"\n (keydown.enter)=\"onModelChange(item)\"\n (keydown.space)=\"onModelChange(item)\"\n [tabindex]=\"!dropdownOpen || isDisabled ? -1 : 0\"\n role=\"option\"\n aria-selected=\"false\"\n [disabled]=\"false\">\n {{ isPrimitive ? item : item[label] }}\n </biit-checkbox>\n <button *ngIf=\"!filteredData?.length\"\n class=\"dropdown-item no-results\"\n disabled\n >\n <a>No results found</a>\n </button>\n </div>\n</div>\n\n<div *ngIf=\"type == 'chips'\"\n class=\"chips\">\n <span\n *ngFor=\"let item of currentValues\"\n (click)=\"onModelChange(item)\"\n class=\"chips-item\"\n >\n {{ item[label] }}\n <biit-icon\n [name]=\"'cross_wide'\"\n [pathStyle]=\"{fill: '#ffffff'}\"\n ></biit-icon>\n </span>\n</div>\n", styles: ["*{box-sizing:border-box}input::selection{background-color:transparent}.biit-input{display:flex;min-width:12.8rem}.biit-input.compact{width:12.8rem}.input-container{position:relative;width:100%}.input-object{background-color:#fff;font-size:1rem;display:block;border:none;color:var(--component-color);padding:.7rem;height:2.1rem;width:100%;min-width:2.1rem;font-weight:400;cursor:pointer}.input-object:focus,.input-object:active,.input-object:hover{outline:none;background:var(--main-background)}.input-object:disabled{pointer-events:none;background-color:transparent;color:var(--main-background)}.default-cursor{cursor:auto}.input-placeholder{color:var(--component-color);font-size:1rem;font-weight:bolder;text-transform:uppercase;position:absolute;pointer-events:none;left:.7rem;top:.42rem;height:.7rem;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.input-placeholder.compact{top:-.95rem;font-size:.7rem;font-weight:400;color:var(--secondary-color)}.input-placeholder.disabled{color:var(--main-background)}.input-show-icon{width:1rem;height:1rem}.input-show-icon-container{top:0;right:0;position:absolute;width:2.1rem;height:2.1rem;align-content:center;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transform:rotate(90deg);transition:transform .5s ease}.input-show-icon-container:hover,.input-show-icon-container:focus,.input-show-icon-container:focus-visible{border:none;outline:none}.input-show-icon-container:hover~.input-object{background:var(--main-background)}.input-show-icon-container.rotate-90{transform:rotate(-90deg)}.bottom-line{position:relative;top:-3px;margin-bottom:-3px;width:auto;height:3px;background:#262626}.bottom-line.disabled{background:var(--main-background)}.dropdown-list{background:white;position:absolute;z-index:2;box-sizing:border-box;border:3px solid black;margin-top:-3px;min-width:100%;width:100%;cursor:pointer;transform-origin:top;opacity:0;display:none;pointer-events:none;transform:translateY(var(--origin));transition:opacity .5s ease,transform .5s ease;max-height:20rem;overflow-y:auto;overflow-x:hidden}.dropdown-list.dropdown-open{opacity:1;pointer-events:auto;transform:translate(0)}.dropdown-list.compact{width:12.8rem}.dropdown-list.disabled{visibility:hidden}.dropdown-item{background:none;color:inherit;border:none;font:inherit;width:100%;cursor:pointer;line-height:1rem;min-height:1.4rem;display:flex;align-items:center;padding:.2rem .7rem}.dropdown-item:not(.no-results):hover,.dropdown-item:not(.no-results):focus-visible{outline:none;background:var(--hover-color);width:calc(100% + 6px);margin-left:-3px;padding-left:calc(.7rem + 3px)}.dropdown-item.no-results{justify-content:center;padding:1rem;color:#d9d9d9}.dropdown-item ::ng-deep label{width:100%;height:100%;cursor:pointer}.dropdown-item ::ng-deep label input[type=checkbox]{cursor:pointer;pointer-events:none}.passthrough{pointer-events:none}.grey-bg{background:var(--main-background)}.onwards{--origin: 1rem}.downwards{--origin: -1rem}.description{position:absolute;display:flex;align-items:center;font-size:.75em;color:gray;padding-top:.2em;min-height:1.05em;line-height:120%;font-style:italic}.chips{display:flex;flex-wrap:wrap;gap:2px;margin-top:2px}.chips .chips-item{font-size:.75rem;color:#fff;background:#f20D5e;padding:.25rem .75rem;position:relative;cursor:pointer}.chips .chips-item biit-icon{display:none}.chips .chips-item:hover biit-icon{display:block;height:100%;width:5px;position:absolute;top:0;right:4px}\n"], dependencies: [{ kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.BiitIconComponent, selector: "biit-icon", inputs: ["name", "svgStyle", "pathStyle"] }, { kind: "component", type: i4.BiitCheckboxComponent, selector: "biit-checkbox", inputs: ["disabled", "description", "showAlwaysDescription"], outputs: ["onValueChange"] }, { kind: "component", type: i5.BiitIconButtonComponent, selector: "button[biit-icon]", inputs: ["icon", "checked"] }] });
|
|
277
277
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitMultiselectComponent, decorators: [{
|
|
278
278
|
type: Component,
|
|
279
279
|
args: [{ selector: 'biit-multiselect', providers: [
|