npm - @provoly/dashboard - Versions diffs - 1.4.58 → 1.4.59 - Mend

@provoly/dashboard 1.4.58 → 1.4.59

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

Files changed (95) hide show

package/esm2022/widgets/widget-aggregated-chart/component/widget-aggregated-chart.component.mjs CHANGED Viewed

@@ -887,7 +887,7 @@ export class WidgetAggregatedChartComponent extends DataWidgetComponent {
             options?.graph.sort?.direction === 'desc');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: WidgetAggregatedChartComponent, deps: [{ token: i1.Store }, { token: i2.PryI18nService }, { token: i0.ElementRef }, { token: i2.PryAggregationService }, { token: i3.PrySchemeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: WidgetAggregatedChartComponent, selector: "pry-widget-aggregated-chart", viewQueries: [{ propertyName: "vega", first: true, predicate: ["vega"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<pry-widget-aggregated-chart-css></pry-widget-aggregated-chart-css>\n@if (optionsCopy$ | async; as optionsCopy) {\n  <div class=\"o-widget o-widget--chart\" [class.-has-header]=\"displayHeader$ | async\">\n    @if (displayHeader$ | async) {\n      <pry-widget-header\n        [datasourceIds]=\"(datasourceIds$ | async) ?? []\"\n        [widgetIndex]=\"widgetIndex\"\n        [manifest]=\"manifest\"\n        (manifestModified)=\"manifestModified.emit($event)\"\n        #header\n        [headerOptions]=\"(displayHeader$ | async) ?? {}\"\n        [displayCount]=\"false\"\n        [openData$]=\"openData$\"\n      >\n        <pry-settings\n          (saveTriggered)=\"emitManifest()\"\n          (changeTitle)=\"changeWidgetTitle($event)\"\n          [headerPresent]=\"displayHeader$ | async\"\n          [widgetIndex]=\"widgetIndex\"\n          [open$]=\"open$\"\n          [header]=\"header\"\n          class=\"o-settings\"\n        >\n          <div class=\"o-settings__popup__content__fields -condensed\">\n            <div class=\"m-form-label-field\">\n              <pry-edit-input\n                label=\"@pry.widget.chart.title\"\n                (ngModelChange)=\"changeChartTitle($event)\"\n                [ngModel]=\"optionsCopy.graph.title\"\n              ></pry-edit-input>\n            </div>\n\n            @if (optionsCopy) {\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"chart_type\">{{ '@pry.widget.chart.type' | i18n }}</label>\n                <pry-select\n                  (ngModelChange)=\"changeType($event)\"\n                  [items]=\"typeOptions\"\n                  [ngModel]=\"optionsCopy.graph.type\"\n                  bindLabel=\"label\"\n                  bindValue=\"id\"\n                  id=\"chart_type\"\n                ></pry-select>\n              </div>\n            }\n\n            @if (optionsCopy.graph.type === GraphType.DONUT) {\n              <pry-range\n                [ngModel]=\"optionsCopy.graph.donutSize\"\n                (ngModelChange)=\"changeDonutSize($event)\"\n                labelTranslate=\"@pry.widget.chart.donutSize\"\n                min=\"1\"\n                max=\"500\"\n              ></pry-range>\n            }\n\n            <div class=\"m-form-label-field\">\n              <pry-checkbox (ngModelChange)=\"toggleLegend($event)\" [ngModel]=\"!!optionsCopy.graph.legend\">\n                {{ '@pry.widget.chart.legend' | i18n }}\n              </pry-checkbox>\n            </div>\n          </div>\n\n          @if (!!optionsCopy.graph.type) {\n            <div class=\"o-settings__popup__content__fields -condensed\">\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"abscissa\">{{ '@pry.widget.chart.abscissa' | i18n }}</label>\n                <pry-select\n                  (ngModelChange)=\"changeAbscissa($event)\"\n                  [items]=\"abscissaAttributes$ | async | prySortData: sortActive : sortDirection\"\n                  [ngModel]=\"optionsCopy.abscissa.attribute\"\n                  bindLabel=\"name\"\n                  bindValue=\"id\"\n                  id=\"abscissa\"\n                ></pry-select>\n              </div>\n\n              <div class=\"m-form-label-field\">\n                <pry-edit-input\n                  label=\"@pry.widget.chart.dataLabel\"\n                  (ngModelChange)=\"changeAbscissaLabel($event)\"\n                  [ngModel]=\"optionsCopy.abscissa.label\"\n                ></pry-edit-input>\n              </div>\n\n              @if (\n                ['quantitative', 'temporal'].includes(\n                  (attributeTypes$ | async)?.abscissa?.vegaType?.toString() ?? '--'\n                ) &&\n                optionsCopy.graph.type !== GraphType.DONUT &&\n                optionsCopy.graph.type !== GraphType.CIRCULAR\n              ) {\n                <div class=\"m-form-label-field\">\n                  <pry-checkbox (ngModelChange)=\"changeKeep0Abscissa($event)\" [ngModel]=\"optionsCopy.abscissa.keep0\"\n                    >{{ '@pry.widget.chart.origin' | i18n }}\n                  </pry-checkbox>\n\n                  @if (optionsCopy.graph.type === GraphType.HISTOGRAM) {\n                    <pry-checkbox\n                      (ngModelChange)=\"enableIntervals($event)\"\n                      [ngModel]=\"!!optionsCopy.abscissa.interval\"\n                      [disabled]=\"optionsCopy.graph.type === GraphType.HISTOGRAM\"\n                      >{{ '@pry.widget.chart.interval' | i18n }}\n                    </pry-checkbox>\n\n                    @if (!!optionsCopy.abscissa.interval) {\n                      @if (!isTimeInterval(optionsCopy.abscissa.interval)) {\n                        <pry-range\n                          [ngModel]=\"optionsCopy.abscissa.interval\"\n                          (ngModelChange)=\"changeInterval($event)\"\n                          labelTranslate=\"@pry.widget.chart.specifyInterval\"\n                          min=\"1\"\n                          max=\"10\"\n                        ></pry-range>\n                      } @else {\n                        <label class=\"a-label\" for=\"time_interval\">{{ '@pry.widget.chart.timeInterval' | i18n }}</label>\n                        <pry-select\n                          (ngModelChange)=\"changeTimeInterval($event)\"\n                          [items]=\"['second', 'minute', 'hour', 'day', 'week', 'month', 'quarter', 'year']\"\n                          [ngModel]=\"optionsCopy.abscissa.interval\"\n                          i18nPrefix=\"@pry.widget.chart.time.\"\n                          id=\"time_interval\"\n                        ></pry-select>\n                      }\n                    }\n                  }\n                </div>\n              }\n            </div>\n\n            <div class=\"o-settings__popup__content__fields -condensed\">\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"operations\">{{ '@pry.widget.chart.operation.title' | i18n }}</label>\n                <pry-select\n                  (ngModelChange)=\"changeOperation($event)\"\n                  [items]=\"operations$ | async\"\n                  [ngModel]=\"optionsCopy.ordinate.operation\"\n                  bindLabel=\"label\"\n                  bindValue=\"id\"\n                  id=\"operations\"\n                ></pry-select>\n              </div>\n\n              @if (optionsCopy.ordinate.operation !== Operation.COUNT) {\n                <div class=\"m-form-label-field\">\n                  <label class=\"a-label\" for=\"ordinate\">{{ '@pry.widget.chart.ordinate' | i18n }}</label>\n                  <pry-select\n                    (ngModelChange)=\"changeOrdinate($event)\"\n                    [items]=\"ordinateAttributes$ | async | prySortData: sortActive : sortDirection\"\n                    [ngModel]=\"optionsCopy.ordinate.attribute\"\n                    bindLabel=\"name\"\n                    bindValue=\"id\"\n                    id=\"ordinate\"\n                  ></pry-select>\n                </div>\n              }\n\n              <div class=\"m-form-label-field\">\n                <pry-edit-input\n                  label=\"@pry.widget.chart.dataLabel\"\n                  (ngModelChange)=\"changeOrdinateLabel($event)\"\n                  [ngModel]=\"optionsCopy.ordinate.label\"\n                ></pry-edit-input>\n              </div>\n\n              @if (translateToVegaType(copyOrdinateField?.type) === 'quantitative') {\n                <div class=\"m-form-label-field\">\n                  <pry-checkbox (ngModelChange)=\"changeKeep0Ordinate($event)\" [ngModel]=\"optionsCopy.ordinate.keep0\"\n                    >{{ '@pry.widget.chart.origin' | i18n }}\n                  </pry-checkbox>\n                </div>\n              }\n            </div>\n\n            @if (optionsCopy.graph.type !== GraphType.DONUT && optionsCopy.graph.type !== GraphType.CIRCULAR) {\n              <div class=\"o-settings__popup__content__fields -condensed\">\n                <div class=\"m-form-label-field\">\n                  <pry-checkbox (ngModelChange)=\"toggleGroupBy($event)\" [ngModel]=\"!!optionsCopy.groupBy\"\n                    >{{ '@pry.widget.chart.groupBy' | i18n }}\n                  </pry-checkbox>\n                </div>\n\n                @if (!!optionsCopy.groupBy) {\n                  <div class=\"m-form-label-field\">\n                    <label class=\"a-label\" for=\"chart_seriesAttr\">{{ '@pry.widget.chart.groupAttr' | i18n }}</label>\n                    <pry-select\n                      (ngModelChange)=\"changeGroupBy($event)\"\n                      [ngModel]=\"optionsCopy.groupBy.attribute\"\n                      [items]=\"abscissaAttributes$ | async | prySortData: sortActive : sortDirection\"\n                      bindLabel=\"name\"\n                      bindValue=\"id\"\n                      id=\"chart_seriesAttr\"\n                    ></pry-select>\n                  </div>\n\n                  <div class=\"m-form-label-field\">\n                    <pry-scheme-picker\n                      (ngModelChange)=\"changeColorScheme($event)\"\n                      [ngModel]=\"optionsCopy.groupBy.color\"\n                    ></pry-scheme-picker>\n                  </div>\n\n                  <div class=\"m-form-label-field\">\n                    <pry-checkbox [ngModel]=\"optionsCopy.graph.stacked\" (ngModelChange)=\"toggleStacked($event)\">\n                      {{ '@pry.widget.chart.stacked' | i18n }}\n                    </pry-checkbox>\n                  </div>\n                }\n              </div>\n              <div class=\"o-settings__popup__content__fields -condensed\">\n                <div class=\"m-form-label-field\">\n                  <pry-checkbox\n                    (ngModelChange)=\"toggleLimitItems($event)\"\n                    [ngModel]=\"optionsCopy.abscissa.limit !== undefined && optionsCopy.abscissa.limit !== null\"\n                  >\n                    {{ '@pry.widget.chart.limit' | i18n }}\n                  </pry-checkbox>\n                </div>\n                @if (optionsCopy.abscissa.limit !== undefined && optionsCopy.abscissa.limit !== null) {\n                  <div class=\"m-form-label-field\">\n                    <label class=\"a-label\" for=\"chart_limitItemsValue\">{{\n                      '@pry.widget.chart.limitMaxNb' | i18n\n                    }}</label>\n                    <input\n                      type=\"number\"\n                      id=\"chart_limitItemsValue\"\n                      class=\"a-form-field\"\n                      [ngModel]=\"optionsCopy.abscissa.limit\"\n                      (ngModelChange)=\"changeLimitValue($event)\"\n                      min=\"1\"\n                      step=\"1\"\n                      [attr.aria-invalid]=\"optionsCopy.abscissa.limit < 1\"\n                    />\n                  </div>\n                }\n              </div>\n              <div class=\"o-settings__popup__content__fields -condensed\">\n                <div class=\"m-form-label-field\">\n                  <pry-checkbox (ngModelChange)=\"toggleSort($event)\" [ngModel]=\"!!optionsCopy.graph.sort\"\n                    >{{ '@pry.widget.chart.sort.title' | i18n }}\n                  </pry-checkbox>\n                </div>\n                @if (!!optionsCopy.graph.sort) {\n                  <div class=\"m-form-label-field\">\n                    <label class=\"a-label\" for=\"chart_sortValue\">{{ '@pry.widget.chart.sort.attribute' | i18n }}</label>\n                    <pry-select\n                      (ngModelChange)=\"changeSortValue($event)\"\n                      [ngModel]=\"optionsCopy.graph.sort.value\"\n                      [items]=\"sortValues$ | async\"\n                      bindValue=\"value\"\n                      bindLabel=\"label\"\n                      id=\"chart_sortValue\"\n                      [disabled]=\"optionsCopy.graph.type === GraphType.HISTOGRAM\"\n                    ></pry-select>\n                  </div>\n                  <div class=\"m-form-label-field\">\n                    <label class=\"a-label\" for=\"chart_sortDirection\">{{\n                      '@pry.widget.chart.sort.direction' | i18n\n                    }}</label>\n                    <pry-select\n                      (ngModelChange)=\"changeSortDirection($event)\"\n                      [ngModel]=\"optionsCopy.graph.sort.direction\"\n                      [items]=\"sortDirections\"\n                      bindValue=\"value\"\n                      bindLabel=\"label\"\n                      id=\"chart_sortDirection\"\n                    ></pry-select>\n                  </div>\n                }\n              </div>\n            }\n\n            @if (optionsCopy.graph.type === GraphType.DONUT || optionsCopy.graph.type === GraphType.CIRCULAR) {\n              <pry-scheme-picker\n                (ngModelChange)=\"changeCircleColorScheme($event)\"\n                [ngModel]=\"optionsCopy.circleColorScheme\"\n              ></pry-scheme-picker>\n            }\n\n            @if (\n              optionsCopy.graph.type !== GraphType.DONUT &&\n              optionsCopy.graph.type !== GraphType.CIRCULAR &&\n              !optionsCopy.groupBy\n            ) {\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"chart_baseColor\">{{ '@pry.widget.chart.color' | i18n }}</label>\n                <pry-color-picker\n                  (ngModelChange)=\"changeBaseColor($event)\"\n                  [ngModel]=\"optionsCopy.baseColor\"\n                  id=\"chart_baseColor\"\n                ></pry-color-picker>\n                <ng-template #templateOption let-item=\"item\">\n                  <div class=\"aligned-option\">\n                    <div class=\"a-chip -md\" [style.background-color]=\"item\">{{ item }}</div>\n                  </div>\n                </ng-template>\n              </div>\n            }\n          }\n        </pry-settings>\n      </pry-widget-header>\n    }\n\n    @if ((isChartValid$ | async) && !(noData$ | async) && !(noAggregationData$ | async)) {\n      <div #vega></div>\n    }\n\n    @if (noData$ | async) {\n      <div class=\"o-widget__choose-parameters\">\n        <img\n          class=\"no-result__search\"\n          src=\"../../../assets/svgs/pry_recherche_pas_de_resultat.svg\"\n          alt=\"{{ '@pry.widget.chart.noData' | i18n }}\"\n          aria-hidden=\"true\"\n        />\n        <span class=\"no-result__text\">{{ '@pry.widget.chart.noData' | i18n }}</span>\n        <button type=\"button\" (click)=\"openData()\" class=\"a-btn a-btn--primary\">\n          <pry-icon [height]=\"20\" [width]=\"20\" iconSvg=\"control\"></pry-icon>\n          <span>{{ '@pry.widget.tooltip.readSearch' | i18n }}</span>\n        </button>\n      </div>\n    }\n\n    @if (!(noData$ | async) && (noAggregationData$ | async)) {\n      <div class=\"o-widget__choose-parameters\">\n        <img\n          class=\"no-result__search\"\n          src=\"../../../assets/svgs/pry_recherche_pas_de_resultat.svg\"\n          alt=\"{{ '@pry.widget.chart.aggNoResult' | i18n }}\"\n          aria-hidden=\"true\"\n        />\n        <span class=\"no-result__text\">{{ '@pry.widget.chart.aggNoResult' | i18n }}</span>\n        <button type=\"button\" (click)=\"openSettings()\" class=\"a-btn a-btn--primary\">\n          <pry-icon [height]=\"20\" [width]=\"20\" iconSvg=\"control\"></pry-icon>\n          <span>{{ '@pry.widget.settings.title' | i18n }}</span>\n        </button>\n      </div>\n    }\n\n    @if (!(noData$ | async) && !(noAggregationData$ | async) && !(isChartValid$ | async)) {\n      <div class=\"o-widget__choose-parameters\">\n        <img\n          class=\"no-result__search\"\n          src=\"../../../assets/svgs/pry_recherche_pas_de_resultat.svg\"\n          alt=\"{{ '@pry.widget.chart.chooseParameters' | i18n }}\"\n          aria-hidden=\"true\"\n        />\n        <span class=\"no-result__text\">{{ '@pry.widget.chart.chooseParameters' | i18n }}</span>\n        <button type=\"button\" (click)=\"openSettings()\" class=\"a-btn a-btn--primary\">\n          <pry-icon [height]=\"20\" [width]=\"20\" iconSvg=\"control\"></pry-icon>\n          <span>{{ '@pry.widget.settings.title' | i18n }}</span>\n        </button>\n      </div>\n    }\n  </div>\n}\n", dependencies: [{ kind: "directive", type: i4.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: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.SettingsComponent, selector: "pry-settings", inputs: ["widgetIndex", "isDisable", "headerPresent", "open$", "header"], outputs: ["triggerClick", "saveTriggered", "changeTitle"] }, { kind: "component", type: i2.PryWidgetHeaderComponent, selector: "pry-widget-header", inputs: ["manifest", "openData$", "additionalOptions", "headerOptions", "displayCount", "datasourceIds", "widgetIndex"], outputs: ["manifestModified"] }, { kind: "component", type: i2.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "component", type: i2.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i5.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle", "name", "inputId", "inhibit"] }, { kind: "component", type: i2.PryEditInputComponent, selector: "pry-edit-input", inputs: ["label", "editButtonTooltip", "confirmButtonTooltip"], outputs: ["validated"] }, { kind: "component", type: i2.PryRangeComponent, selector: "pry-range", inputs: ["min", "max", "step", "disabled", "labelTranslate"] }, { kind: "component", type: i6.PryColorPickerComponent, selector: "pry-color-picker" }, { kind: "component", type: i3.PrySchemePickerComponent, selector: "pry-scheme-picker" }, { kind: "component", type: i7.PryWidgetAggregatedChartCssComponent, selector: "pry-widget-aggregated-chart-css" }, { kind: "pipe", type: i8.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.I18nPipe, name: "i18n" }, { kind: "pipe", type: i2.PrySortDataPipe, name: "prySortData" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: WidgetAggregatedChartComponent, selector: "pry-widget-aggregated-chart", viewQueries: [{ propertyName: "vega", first: true, predicate: ["vega"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<pry-widget-aggregated-chart-css></pry-widget-aggregated-chart-css>\n@if (optionsCopy$ | async; as optionsCopy) {\n  <div class=\"o-widget o-widget--chart\" [class.-has-header]=\"displayHeader$ | async\">\n    @if (displayHeader$ | async) {\n      <pry-widget-header\n        [datasourceIds]=\"(datasourceIds$ | async) ?? []\"\n        [widgetIndex]=\"widgetIndex\"\n        [manifest]=\"manifest\"\n        (manifestModified)=\"manifestModified.emit($event)\"\n        #header\n        [headerOptions]=\"(displayHeader$ | async) ?? {}\"\n        [displayCount]=\"false\"\n        [openData$]=\"openData$\"\n      >\n        <pry-settings\n          (saveTriggered)=\"emitManifest()\"\n          (changeTitle)=\"changeWidgetTitle($event)\"\n          [headerPresent]=\"displayHeader$ | async\"\n          [widgetIndex]=\"widgetIndex\"\n          [open$]=\"open$\"\n          [header]=\"header\"\n          class=\"o-settings\"\n        >\n          <div class=\"o-settings__popup__content__fields -condensed\">\n            <div class=\"m-form-label-field\">\n              <pry-edit-input\n                label=\"@pry.widget.chart.title\"\n                (ngModelChange)=\"changeChartTitle($event)\"\n                [ngModel]=\"optionsCopy.graph.title\"\n              ></pry-edit-input>\n            </div>\n\n            @if (optionsCopy) {\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"chart_type\">{{ '@pry.widget.chart.type' | i18n }}</label>\n                <pry-select\n                  (ngModelChange)=\"changeType($event)\"\n                  [items]=\"typeOptions\"\n                  [ngModel]=\"optionsCopy.graph.type\"\n                  bindLabel=\"label\"\n                  bindValue=\"id\"\n                  id=\"chart_type\"\n                ></pry-select>\n              </div>\n            }\n\n            @if (optionsCopy.graph.type === GraphType.DONUT) {\n              <pry-range\n                [ngModel]=\"optionsCopy.graph.donutSize\"\n                (ngModelChange)=\"changeDonutSize($event)\"\n                labelTranslate=\"@pry.widget.chart.donutSize\"\n                min=\"1\"\n                max=\"500\"\n              ></pry-range>\n            }\n\n            <div class=\"m-form-label-field\">\n              <pry-checkbox (ngModelChange)=\"toggleLegend($event)\" [ngModel]=\"!!optionsCopy.graph.legend\">\n                {{ '@pry.widget.chart.legend' | i18n }}\n              </pry-checkbox>\n            </div>\n          </div>\n\n          @if (!!optionsCopy.graph.type) {\n            <div class=\"o-settings__popup__content__fields -condensed\">\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"abscissa\">{{ '@pry.widget.chart.abscissa' | i18n }}</label>\n                <pry-select\n                  (ngModelChange)=\"changeAbscissa($event)\"\n                  [items]=\"abscissaAttributes$ | async | prySortData: sortActive : sortDirection\"\n                  [ngModel]=\"optionsCopy.abscissa.attribute\"\n                  bindLabel=\"name\"\n                  bindValue=\"id\"\n                  id=\"abscissa\"\n                ></pry-select>\n              </div>\n\n              <div class=\"m-form-label-field\">\n                <pry-edit-input\n                  label=\"@pry.widget.chart.dataLabel\"\n                  (ngModelChange)=\"changeAbscissaLabel($event)\"\n                  [ngModel]=\"optionsCopy.abscissa.label\"\n                ></pry-edit-input>\n              </div>\n\n              @if (\n                ['quantitative', 'temporal'].includes(\n                  (attributeTypes$ | async)?.abscissa?.vegaType?.toString() ?? '--'\n                ) &&\n                optionsCopy.graph.type !== GraphType.DONUT &&\n                optionsCopy.graph.type !== GraphType.CIRCULAR\n              ) {\n                <div class=\"m-form-label-field\">\n                  <pry-checkbox (ngModelChange)=\"changeKeep0Abscissa($event)\" [ngModel]=\"optionsCopy.abscissa.keep0\"\n                    >{{ '@pry.widget.chart.origin' | i18n }}\n                  </pry-checkbox>\n\n                  @if (optionsCopy.graph.type === GraphType.HISTOGRAM) {\n                    <pry-checkbox\n                      (ngModelChange)=\"enableIntervals($event)\"\n                      [ngModel]=\"!!optionsCopy.abscissa.interval\"\n                      [disabled]=\"optionsCopy.graph.type === GraphType.HISTOGRAM\"\n                      >{{ '@pry.widget.chart.interval' | i18n }}\n                    </pry-checkbox>\n\n                    @if (!!optionsCopy.abscissa.interval) {\n                      @if (!isTimeInterval(optionsCopy.abscissa.interval)) {\n                        <pry-range\n                          [ngModel]=\"optionsCopy.abscissa.interval\"\n                          (ngModelChange)=\"changeInterval($event)\"\n                          labelTranslate=\"@pry.widget.chart.specifyInterval\"\n                          min=\"1\"\n                          max=\"10\"\n                        ></pry-range>\n                      } @else {\n                        <label class=\"a-label\" for=\"time_interval\">{{ '@pry.widget.chart.timeInterval' | i18n }}</label>\n                        <pry-select\n                          (ngModelChange)=\"changeTimeInterval($event)\"\n                          [items]=\"['second', 'minute', 'hour', 'day', 'week', 'month', 'quarter', 'year']\"\n                          [ngModel]=\"optionsCopy.abscissa.interval\"\n                          i18nPrefix=\"@pry.widget.chart.time.\"\n                          id=\"time_interval\"\n                        ></pry-select>\n                      }\n                    }\n                  }\n                </div>\n              }\n            </div>\n\n            <div class=\"o-settings__popup__content__fields -condensed\">\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"operations\">{{ '@pry.widget.chart.operation.title' | i18n }}</label>\n                <pry-select\n                  (ngModelChange)=\"changeOperation($event)\"\n                  [items]=\"operations$ | async\"\n                  [ngModel]=\"optionsCopy.ordinate.operation\"\n                  bindLabel=\"label\"\n                  bindValue=\"id\"\n                  id=\"operations\"\n                ></pry-select>\n              </div>\n\n              @if (optionsCopy.ordinate.operation !== Operation.COUNT) {\n                <div class=\"m-form-label-field\">\n                  <label class=\"a-label\" for=\"ordinate\">{{ '@pry.widget.chart.ordinate' | i18n }}</label>\n                  <pry-select\n                    (ngModelChange)=\"changeOrdinate($event)\"\n                    [items]=\"ordinateAttributes$ | async | prySortData: sortActive : sortDirection\"\n                    [ngModel]=\"optionsCopy.ordinate.attribute\"\n                    bindLabel=\"name\"\n                    bindValue=\"id\"\n                    id=\"ordinate\"\n                  ></pry-select>\n                </div>\n              }\n\n              <div class=\"m-form-label-field\">\n                <pry-edit-input\n                  label=\"@pry.widget.chart.dataLabel\"\n                  (ngModelChange)=\"changeOrdinateLabel($event)\"\n                  [ngModel]=\"optionsCopy.ordinate.label\"\n                ></pry-edit-input>\n              </div>\n\n              @if (translateToVegaType(copyOrdinateField?.type) === 'quantitative') {\n                <div class=\"m-form-label-field\">\n                  <pry-checkbox (ngModelChange)=\"changeKeep0Ordinate($event)\" [ngModel]=\"optionsCopy.ordinate.keep0\"\n                    >{{ '@pry.widget.chart.origin' | i18n }}\n                  </pry-checkbox>\n                </div>\n              }\n            </div>\n\n            @if (optionsCopy.graph.type !== GraphType.DONUT && optionsCopy.graph.type !== GraphType.CIRCULAR) {\n              <div class=\"o-settings__popup__content__fields -condensed\">\n                <div class=\"m-form-label-field\">\n                  <pry-checkbox (ngModelChange)=\"toggleGroupBy($event)\" [ngModel]=\"!!optionsCopy.groupBy\"\n                    >{{ '@pry.widget.chart.groupBy' | i18n }}\n                  </pry-checkbox>\n                </div>\n\n                @if (!!optionsCopy.groupBy) {\n                  <div class=\"m-form-label-field\">\n                    <label class=\"a-label\" for=\"chart_seriesAttr\">{{ '@pry.widget.chart.groupAttr' | i18n }}</label>\n                    <pry-select\n                      (ngModelChange)=\"changeGroupBy($event)\"\n                      [ngModel]=\"optionsCopy.groupBy.attribute\"\n                      [items]=\"abscissaAttributes$ | async | prySortData: sortActive : sortDirection\"\n                      bindLabel=\"name\"\n                      bindValue=\"id\"\n                      id=\"chart_seriesAttr\"\n                    ></pry-select>\n                  </div>\n\n                  <div class=\"m-form-label-field\">\n                    <pry-scheme-picker\n                      (ngModelChange)=\"changeColorScheme($event)\"\n                      [ngModel]=\"optionsCopy.groupBy.color\"\n                    ></pry-scheme-picker>\n                  </div>\n\n                  <div class=\"m-form-label-field\">\n                    <pry-checkbox [ngModel]=\"optionsCopy.graph.stacked\" (ngModelChange)=\"toggleStacked($event)\">\n                      {{ '@pry.widget.chart.stacked' | i18n }}\n                    </pry-checkbox>\n                  </div>\n                }\n              </div>\n              <div class=\"o-settings__popup__content__fields -condensed\">\n                <div class=\"m-form-label-field\">\n                  <pry-checkbox\n                    (ngModelChange)=\"toggleLimitItems($event)\"\n                    [ngModel]=\"optionsCopy.abscissa.limit !== undefined && optionsCopy.abscissa.limit !== null\"\n                  >\n                    {{ '@pry.widget.chart.limit' | i18n }}\n                  </pry-checkbox>\n                </div>\n                @if (optionsCopy.abscissa.limit !== undefined && optionsCopy.abscissa.limit !== null) {\n                  <div class=\"m-form-label-field\">\n                    <label class=\"a-label\" for=\"chart_limitItemsValue\">{{\n                      '@pry.widget.chart.limitMaxNb' | i18n\n                    }}</label>\n                    <input\n                      type=\"number\"\n                      id=\"chart_limitItemsValue\"\n                      class=\"a-form-field\"\n                      [ngModel]=\"optionsCopy.abscissa.limit\"\n                      (ngModelChange)=\"changeLimitValue($event)\"\n                      min=\"1\"\n                      step=\"1\"\n                      [attr.aria-invalid]=\"optionsCopy.abscissa.limit < 1\"\n                    />\n                  </div>\n                }\n              </div>\n              <div class=\"o-settings__popup__content__fields -condensed\">\n                <div class=\"m-form-label-field\">\n                  <pry-checkbox (ngModelChange)=\"toggleSort($event)\" [ngModel]=\"!!optionsCopy.graph.sort\"\n                    >{{ '@pry.widget.chart.sort.title' | i18n }}\n                  </pry-checkbox>\n                </div>\n                @if (!!optionsCopy.graph.sort) {\n                  <div class=\"m-form-label-field\">\n                    <label class=\"a-label\" for=\"chart_sortValue\">{{ '@pry.widget.chart.sort.attribute' | i18n }}</label>\n                    <pry-select\n                      (ngModelChange)=\"changeSortValue($event)\"\n                      [ngModel]=\"optionsCopy.graph.sort.value\"\n                      [items]=\"sortValues$ | async\"\n                      bindValue=\"value\"\n                      bindLabel=\"label\"\n                      id=\"chart_sortValue\"\n                      [disabled]=\"optionsCopy.graph.type === GraphType.HISTOGRAM\"\n                    ></pry-select>\n                  </div>\n                  <div class=\"m-form-label-field\">\n                    <label class=\"a-label\" for=\"chart_sortDirection\">{{\n                      '@pry.widget.chart.sort.direction' | i18n\n                    }}</label>\n                    <pry-select\n                      (ngModelChange)=\"changeSortDirection($event)\"\n                      [ngModel]=\"optionsCopy.graph.sort.direction\"\n                      [items]=\"sortDirections\"\n                      bindValue=\"value\"\n                      bindLabel=\"label\"\n                      id=\"chart_sortDirection\"\n                    ></pry-select>\n                  </div>\n                }\n              </div>\n            }\n\n            @if (optionsCopy.graph.type === GraphType.DONUT || optionsCopy.graph.type === GraphType.CIRCULAR) {\n              <pry-scheme-picker\n                (ngModelChange)=\"changeCircleColorScheme($event)\"\n                [ngModel]=\"optionsCopy.circleColorScheme\"\n              ></pry-scheme-picker>\n            }\n\n            @if (\n              optionsCopy.graph.type !== GraphType.DONUT &&\n              optionsCopy.graph.type !== GraphType.CIRCULAR &&\n              !optionsCopy.groupBy\n            ) {\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"chart_baseColor\">{{ '@pry.widget.chart.color' | i18n }}</label>\n                <pry-color-picker\n                  (ngModelChange)=\"changeBaseColor($event)\"\n                  [ngModel]=\"optionsCopy.baseColor\"\n                  id=\"chart_baseColor\"\n                ></pry-color-picker>\n                <ng-template #templateOption let-item=\"item\">\n                  <div class=\"aligned-option\">\n                    <div class=\"a-chip -md\" [style.background-color]=\"item\">{{ item }}</div>\n                  </div>\n                </ng-template>\n              </div>\n            }\n          }\n        </pry-settings>\n      </pry-widget-header>\n    }\n\n    @if ((isChartValid$ | async) && !(noData$ | async) && !(noAggregationData$ | async)) {\n      <div #vega></div>\n    }\n\n    @if (noData$ | async) {\n      <div class=\"o-widget__choose-parameters\">\n        <img\n          class=\"no-result__search\"\n          src=\"../../../assets/svgs/pry_recherche_pas_de_resultat.svg\"\n          alt=\"{{ '@pry.widget.chart.noData' | i18n }}\"\n          aria-hidden=\"true\"\n        />\n        <span class=\"no-result__text\">{{ '@pry.widget.chart.noData' | i18n }}</span>\n        <button type=\"button\" (click)=\"openData()\" class=\"a-btn a-btn--primary\">\n          <pry-icon [height]=\"20\" [width]=\"20\" iconSvg=\"control\"></pry-icon>\n          <span>{{ '@pry.widget.tooltip.readSearch' | i18n }}</span>\n        </button>\n      </div>\n    }\n\n    @if (!(noData$ | async) && (noAggregationData$ | async)) {\n      <div class=\"o-widget__choose-parameters\">\n        <img\n          class=\"no-result__search\"\n          src=\"../../../assets/svgs/pry_recherche_pas_de_resultat.svg\"\n          alt=\"{{ '@pry.widget.chart.aggNoResult' | i18n }}\"\n          aria-hidden=\"true\"\n        />\n        <span class=\"no-result__text\">{{ '@pry.widget.chart.aggNoResult' | i18n }}</span>\n        <button type=\"button\" (click)=\"openSettings()\" class=\"a-btn a-btn--primary\">\n          <pry-icon [height]=\"20\" [width]=\"20\" iconSvg=\"control\"></pry-icon>\n          <span>{{ '@pry.widget.settings.title' | i18n }}</span>\n        </button>\n      </div>\n    }\n\n    @if (!(noData$ | async) && !(noAggregationData$ | async) && !(isChartValid$ | async)) {\n      <div class=\"o-widget__choose-parameters\">\n        <img\n          class=\"no-result__search\"\n          src=\"../../../assets/svgs/pry_recherche_pas_de_resultat.svg\"\n          alt=\"{{ '@pry.widget.chart.chooseParameters' | i18n }}\"\n          aria-hidden=\"true\"\n        />\n        <span class=\"no-result__text\">{{ '@pry.widget.chart.chooseParameters' | i18n }}</span>\n        <button type=\"button\" (click)=\"openSettings()\" class=\"a-btn a-btn--primary\">\n          <pry-icon [height]=\"20\" [width]=\"20\" iconSvg=\"control\"></pry-icon>\n          <span>{{ '@pry.widget.settings.title' | i18n }}</span>\n        </button>\n      </div>\n    }\n  </div>\n}\n", dependencies: [{ kind: "directive", type: i4.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: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.SettingsComponent, selector: "pry-settings", inputs: ["widgetIndex", "isDisable", "headerPresent", "open$", "header"], outputs: ["triggerClick", "saveTriggered", "changeTitle"] }, { kind: "component", type: i2.PryWidgetHeaderComponent, selector: "pry-widget-header", inputs: ["manifest", "openData$", "additionalOptions", "headerOptions", "displayCount", "datasourceIds", "widgetIndex"], outputs: ["manifestModified"] }, { kind: "component", type: i2.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "forcePlaceHolder", "isForm", "required", "name", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "component", type: i2.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i5.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle", "name", "inputId", "inhibit"] }, { kind: "component", type: i2.PryEditInputComponent, selector: "pry-edit-input", inputs: ["label", "editButtonTooltip", "confirmButtonTooltip"], outputs: ["validated"] }, { kind: "component", type: i2.PryRangeComponent, selector: "pry-range", inputs: ["min", "max", "step", "disabled", "labelTranslate"] }, { kind: "component", type: i6.PryColorPickerComponent, selector: "pry-color-picker" }, { kind: "component", type: i3.PrySchemePickerComponent, selector: "pry-scheme-picker" }, { kind: "component", type: i7.PryWidgetAggregatedChartCssComponent, selector: "pry-widget-aggregated-chart-css" }, { kind: "pipe", type: i8.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.I18nPipe, name: "i18n" }, { kind: "pipe", type: i2.PrySortDataPipe, name: "prySortData" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: WidgetAggregatedChartComponent, decorators: [{
             type: Component,

package/esm2022/widgets/widget-analytic/component/widget-analytic.component.mjs CHANGED Viewed

@@ -165,7 +165,7 @@ export class WidgetAnalyticComponent extends DataWidgetComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: WidgetAnalyticComponent, deps: [{ token: i1.Store }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: WidgetAnalyticComponent, selector: "pry-widget-analytic", usesInheritance: true, ngImport: i0, template: "<pry-widget-analytic-css></pry-widget-analytic-css>\n<div class=\"o-widget o-widget__analytic\">\n  @if (displayHeader$ | async) {\n    <pry-widget-header\n      [widgetIndex]=\"widgetIndex\"\n      [manifest]=\"manifest\"\n      (manifestModified)=\"manifestModified.emit($event)\"\n      #header\n      [headerOptions]=\"(displayHeader$ | async) ?? {}\"\n      [datasourceIds]=\"(datasourceIds$ | async) ?? []\"\n    >\n      <pry-settings\n        (saveTriggered)=\"emitManifest()\"\n        (changeTitle)=\"changeWidgetTitle($event)\"\n        [headerPresent]=\"displayHeader$ | async\"\n        [widgetIndex]=\"widgetIndex\"\n        [header]=\"header\"\n        [open$]=\"open$\"\n        class=\"o-settings\"\n      >\n        <div class=\"o-settings__fields\">\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\" for=\"primaryProp\">{{ '@pry.widget.analytic.primaryProp' | i18n }}</label>\n            <pry-select\n              (ngModelChange)=\"change($event, 'primaryProp')\"\n              [items]=\"availableProperties$ | async\"\n              [ngModel]=\"optionsCopy.primaryProp\"\n              bindLabel=\"name\"\n              bindValue=\"name\"\n              id=\"primaryProp\"\n            ></pry-select>\n          </div>\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\" for=\"secondaryProp\">{{ '@pry.widget.analytic.secondaryProp' | i18n }}</label>\n            <pry-select\n              (ngModelChange)=\"change($event, 'secondaryProp')\"\n              [items]=\"availableProperties$ | async\"\n              [ngModel]=\"optionsCopy.secondaryProp\"\n              bindLabel=\"name\"\n              bindValue=\"name\"\n              id=\"secondaryProp\"\n              [clearable]=\"true\"\n            ></pry-select>\n          </div>\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\" for=\"verticalProp\">{{ '@pry.widget.analytic.verticalProp' | i18n }}</label>\n            <pry-select\n              (ngModelChange)=\"change($event, 'verticalProp')\"\n              [items]=\"availableProperties$ | async\"\n              [ngModel]=\"optionsCopy.verticalProp\"\n              bindLabel=\"name\"\n              bindValue=\"name\"\n              id=\"verticalProp\"\n            ></pry-select>\n          </div>\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\" for=\"valueProp\">{{ '@pry.widget.analytic.valueProp' | i18n }}</label>\n            <pry-select\n              (ngModelChange)=\"change($event, 'valueProp')\"\n              [items]=\"availableProperties$ | async\"\n              [ngModel]=\"optionsCopy.valueProp\"\n              bindLabel=\"name\"\n              bindValue=\"name\"\n              id=\"valueProp\"\n            ></pry-select>\n          </div>\n          <div class=\"m-form-label-field\">\n            <pry-checkbox (ngModelChange)=\"toggleColorConfig($event)\" [ngModel]=\"!!optionsCopy.colorConfig\">\n              {{ '@pry.widget.analytic.colorConfig' | i18n }}\n            </pry-checkbox>\n            @if (optionsCopy.colorConfig) {\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"colorProp\">{{ '@pry.widget.analytic.colorProp' | i18n }}</label>\n                <pry-select\n                  (ngModelChange)=\"changeColorConfig($event, 'prop')\"\n                  [items]=\"availableProperties$ | async\"\n                  [ngModel]=\"optionsCopy.colorConfig.prop\"\n                  bindLabel=\"name\"\n                  bindValue=\"name\"\n                  id=\"colorProp\"\n                ></pry-select>\n              </div>\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"colorProp\">{{ '@pry.widget.analytic.colors' | i18n }}</label>\n                <div\n                  class=\"o-widget__analytic__color-picker-container u-display-flex -align-center\"\n                  cdkDropList\n                  (cdkDropListDropped)=\"drop($event)\"\n                  cdkDropListOrientation=\"horizontal\"\n                >\n                  @for (color of optionsCopy.colorConfig.colors; track color; let i = $index) {\n                    <div class=\"o-widget__analytic__color-picker\" cdkDrag>\n                      <pry-color-picker\n                        [ngModel]=\"color\"\n                        (ngModelChange)=\"modifyColorScheme($event, i)\"\n                      ></pry-color-picker>\n                      <button (click)=\"removeColor(i)\" class=\"o-widget__analytic__color-picker-remove\">\n                        <pry-icon iconSvg=\"close\" [height]=\"15\" [width]=\"15\"></pry-icon>\n                      </button>\n                      <div *cdkDragPreview>\n                        <pry-color-picker [ngModel]=\"color\"></pry-color-picker>\n                      </div>\n                    </div>\n                  }\n                  <button\n                    type=\"button\"\n                    class=\"a-btn a-btn--icon-only o-widget__analytic__color-picker-add\"\n                    (click)=\"modifyColorScheme()\"\n                  >\n                    <pry-icon iconSvg=\"add\" [height]=\"20\" [width]=\"20\"></pry-icon>\n                  </button>\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      </pry-settings>\n    </pry-widget-header>\n  }\n  <div class=\"o-widget__analytic__table\">\n    <table [style.height.px]=\"height$ | async\">\n      <thead>\n        <tr class=\"primary-header\">\n          <th></th>\n          @for (primary of primaryProperty$ | async; track primary) {\n            <th [colSpan]=\"(secondaryProperty$ | async)?.length ?? 1\">\n              {{ primary }}\n            </th>\n          }\n        </tr>\n        @if (optionsCopy.secondaryProp) {\n          <tr class=\"secondary-header\">\n            <th></th>\n            @for (primary of primaryProperty$ | async; track primary) {\n              @for (secondary of secondaryProperty$ | async; track secondary) {\n                <th>{{ secondary }}</th>\n              }\n            }\n          </tr>\n        }\n      </thead>\n      @if (this.valuePropField$ | async; as field) {\n        <tbody>\n          @for (line of lines$ | async; track line.name) {\n            <tr>\n              <th>{{ line.name }}</th>\n              @for (primary of primaryProperty$ | async; track primary) {\n                @if (optionsCopy.secondaryProp) {\n                  @for (secondary of secondaryProperty$ | async; track secondary) {\n                    <td\n                      [ngStyle]=\"\n                        optionsCopy.colorConfig\n                          ? { 'background-color': (colorMap$ | async)?.[line.name]?.[primary] }\n                          : {}\n                      \"\n                    >\n                      {{ line.value[primary][secondary] | dataFormat: field }}\n                    </td>\n                  }\n                } @else {\n                  <td\n                    [ngStyle]=\"\n                      optionsCopy.colorConfig ? { 'background-color': (colorMap$ | async)?.[line.name]?.[primary] } : {}\n                    \"\n                  >\n                    {{ line.value[primary] | dataFormat: field }}\n                  </td>\n                }\n              }\n            </tr>\n          }\n        </tbody>\n        <tfoot>\n          @for (line of totals$ | async; track line.name) {\n            <tr class=\"partial-total\">\n              <th>{{ line.name }}</th>\n              @for (primary of primaryProperty$ | async; track primary) {\n                @for (secondary of secondaryProperty$ | async; track secondary) {\n                  <td>\n                    {{ line.value[primary][secondary] | dataFormat: field }}\n                  </td>\n                }\n              }\n            </tr>\n          }\n          @for (line of grandTotals$ | async; track line.name) {\n            <tr class=\"grand-total\">\n              <th>{{ line.name }}</th>\n              @for (primary of primaryProperty$ | async; track primary) {\n                <td [colSpan]=\"(secondaryProperty$ | async)?.length ?? 1\">\n                  {{ line.value[primary] | dataFormat: field }}\n                </td>\n              }\n            </tr>\n          }\n        </tfoot>\n      }\n    </table>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.SettingsComponent, selector: "pry-settings", inputs: ["widgetIndex", "isDisable", "headerPresent", "open$", "header"], outputs: ["triggerClick", "saveTriggered", "changeTitle"] }, { kind: "component", type: i4.PryWidgetHeaderComponent, selector: "pry-widget-header", inputs: ["manifest", "openData$", "additionalOptions", "headerOptions", "displayCount", "datasourceIds", "widgetIndex"], outputs: ["manifestModified"] }, { kind: "component", type: i4.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i5.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle", "name", "inputId", "inhibit"] }, { kind: "component", type: i6.PryColorPickerComponent, selector: "pry-color-picker" }, { kind: "directive", type: i7.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i7.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "component", type: i8.PryWidgetAnalyticCssComponent, selector: "pry-widget-analytic-css" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }, { kind: "pipe", type: i9.DataFormatPipe, name: "dataFormat" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: WidgetAnalyticComponent, selector: "pry-widget-analytic", usesInheritance: true, ngImport: i0, template: "<pry-widget-analytic-css></pry-widget-analytic-css>\n<div class=\"o-widget o-widget__analytic\">\n  @if (displayHeader$ | async) {\n    <pry-widget-header\n      [widgetIndex]=\"widgetIndex\"\n      [manifest]=\"manifest\"\n      (manifestModified)=\"manifestModified.emit($event)\"\n      #header\n      [headerOptions]=\"(displayHeader$ | async) ?? {}\"\n      [datasourceIds]=\"(datasourceIds$ | async) ?? []\"\n    >\n      <pry-settings\n        (saveTriggered)=\"emitManifest()\"\n        (changeTitle)=\"changeWidgetTitle($event)\"\n        [headerPresent]=\"displayHeader$ | async\"\n        [widgetIndex]=\"widgetIndex\"\n        [header]=\"header\"\n        [open$]=\"open$\"\n        class=\"o-settings\"\n      >\n        <div class=\"o-settings__fields\">\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\" for=\"primaryProp\">{{ '@pry.widget.analytic.primaryProp' | i18n }}</label>\n            <pry-select\n              (ngModelChange)=\"change($event, 'primaryProp')\"\n              [items]=\"availableProperties$ | async\"\n              [ngModel]=\"optionsCopy.primaryProp\"\n              bindLabel=\"name\"\n              bindValue=\"name\"\n              id=\"primaryProp\"\n            ></pry-select>\n          </div>\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\" for=\"secondaryProp\">{{ '@pry.widget.analytic.secondaryProp' | i18n }}</label>\n            <pry-select\n              (ngModelChange)=\"change($event, 'secondaryProp')\"\n              [items]=\"availableProperties$ | async\"\n              [ngModel]=\"optionsCopy.secondaryProp\"\n              bindLabel=\"name\"\n              bindValue=\"name\"\n              id=\"secondaryProp\"\n              [clearable]=\"true\"\n            ></pry-select>\n          </div>\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\" for=\"verticalProp\">{{ '@pry.widget.analytic.verticalProp' | i18n }}</label>\n            <pry-select\n              (ngModelChange)=\"change($event, 'verticalProp')\"\n              [items]=\"availableProperties$ | async\"\n              [ngModel]=\"optionsCopy.verticalProp\"\n              bindLabel=\"name\"\n              bindValue=\"name\"\n              id=\"verticalProp\"\n            ></pry-select>\n          </div>\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\" for=\"valueProp\">{{ '@pry.widget.analytic.valueProp' | i18n }}</label>\n            <pry-select\n              (ngModelChange)=\"change($event, 'valueProp')\"\n              [items]=\"availableProperties$ | async\"\n              [ngModel]=\"optionsCopy.valueProp\"\n              bindLabel=\"name\"\n              bindValue=\"name\"\n              id=\"valueProp\"\n            ></pry-select>\n          </div>\n          <div class=\"m-form-label-field\">\n            <pry-checkbox (ngModelChange)=\"toggleColorConfig($event)\" [ngModel]=\"!!optionsCopy.colorConfig\">\n              {{ '@pry.widget.analytic.colorConfig' | i18n }}\n            </pry-checkbox>\n            @if (optionsCopy.colorConfig) {\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"colorProp\">{{ '@pry.widget.analytic.colorProp' | i18n }}</label>\n                <pry-select\n                  (ngModelChange)=\"changeColorConfig($event, 'prop')\"\n                  [items]=\"availableProperties$ | async\"\n                  [ngModel]=\"optionsCopy.colorConfig.prop\"\n                  bindLabel=\"name\"\n                  bindValue=\"name\"\n                  id=\"colorProp\"\n                ></pry-select>\n              </div>\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"colorProp\">{{ '@pry.widget.analytic.colors' | i18n }}</label>\n                <div\n                  class=\"o-widget__analytic__color-picker-container u-display-flex -align-center\"\n                  cdkDropList\n                  (cdkDropListDropped)=\"drop($event)\"\n                  cdkDropListOrientation=\"horizontal\"\n                >\n                  @for (color of optionsCopy.colorConfig.colors; track color; let i = $index) {\n                    <div class=\"o-widget__analytic__color-picker\" cdkDrag>\n                      <pry-color-picker\n                        [ngModel]=\"color\"\n                        (ngModelChange)=\"modifyColorScheme($event, i)\"\n                      ></pry-color-picker>\n                      <button (click)=\"removeColor(i)\" class=\"o-widget__analytic__color-picker-remove\">\n                        <pry-icon iconSvg=\"close\" [height]=\"15\" [width]=\"15\"></pry-icon>\n                      </button>\n                      <div *cdkDragPreview>\n                        <pry-color-picker [ngModel]=\"color\"></pry-color-picker>\n                      </div>\n                    </div>\n                  }\n                  <button\n                    type=\"button\"\n                    class=\"a-btn a-btn--icon-only o-widget__analytic__color-picker-add\"\n                    (click)=\"modifyColorScheme()\"\n                  >\n                    <pry-icon iconSvg=\"add\" [height]=\"20\" [width]=\"20\"></pry-icon>\n                  </button>\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      </pry-settings>\n    </pry-widget-header>\n  }\n  <div class=\"o-widget__analytic__table\">\n    <table [style.height.px]=\"height$ | async\">\n      <thead>\n        <tr class=\"primary-header\">\n          <th></th>\n          @for (primary of primaryProperty$ | async; track primary) {\n            <th [colSpan]=\"(secondaryProperty$ | async)?.length ?? 1\">\n              {{ primary }}\n            </th>\n          }\n        </tr>\n        @if (optionsCopy.secondaryProp) {\n          <tr class=\"secondary-header\">\n            <th></th>\n            @for (primary of primaryProperty$ | async; track primary) {\n              @for (secondary of secondaryProperty$ | async; track secondary) {\n                <th>{{ secondary }}</th>\n              }\n            }\n          </tr>\n        }\n      </thead>\n      @if (this.valuePropField$ | async; as field) {\n        <tbody>\n          @for (line of lines$ | async; track line.name) {\n            <tr>\n              <th>{{ line.name }}</th>\n              @for (primary of primaryProperty$ | async; track primary) {\n                @if (optionsCopy.secondaryProp) {\n                  @for (secondary of secondaryProperty$ | async; track secondary) {\n                    <td\n                      [ngStyle]=\"\n                        optionsCopy.colorConfig\n                          ? { 'background-color': (colorMap$ | async)?.[line.name]?.[primary] }\n                          : {}\n                      \"\n                    >\n                      {{ line.value[primary][secondary] | dataFormat: field }}\n                    </td>\n                  }\n                } @else {\n                  <td\n                    [ngStyle]=\"\n                      optionsCopy.colorConfig ? { 'background-color': (colorMap$ | async)?.[line.name]?.[primary] } : {}\n                    \"\n                  >\n                    {{ line.value[primary] | dataFormat: field }}\n                  </td>\n                }\n              }\n            </tr>\n          }\n        </tbody>\n        <tfoot>\n          @for (line of totals$ | async; track line.name) {\n            <tr class=\"partial-total\">\n              <th>{{ line.name }}</th>\n              @for (primary of primaryProperty$ | async; track primary) {\n                @for (secondary of secondaryProperty$ | async; track secondary) {\n                  <td>\n                    {{ line.value[primary][secondary] | dataFormat: field }}\n                  </td>\n                }\n              }\n            </tr>\n          }\n          @for (line of grandTotals$ | async; track line.name) {\n            <tr class=\"grand-total\">\n              <th>{{ line.name }}</th>\n              @for (primary of primaryProperty$ | async; track primary) {\n                <td [colSpan]=\"(secondaryProperty$ | async)?.length ?? 1\">\n                  {{ line.value[primary] | dataFormat: field }}\n                </td>\n              }\n            </tr>\n          }\n        </tfoot>\n      }\n    </table>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.SettingsComponent, selector: "pry-settings", inputs: ["widgetIndex", "isDisable", "headerPresent", "open$", "header"], outputs: ["triggerClick", "saveTriggered", "changeTitle"] }, { kind: "component", type: i4.PryWidgetHeaderComponent, selector: "pry-widget-header", inputs: ["manifest", "openData$", "additionalOptions", "headerOptions", "displayCount", "datasourceIds", "widgetIndex"], outputs: ["manifestModified"] }, { kind: "component", type: i4.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "forcePlaceHolder", "isForm", "required", "name", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i5.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle", "name", "inputId", "inhibit"] }, { kind: "component", type: i6.PryColorPickerComponent, selector: "pry-color-picker" }, { kind: "directive", type: i7.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i7.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "component", type: i8.PryWidgetAnalyticCssComponent, selector: "pry-widget-analytic-css" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }, { kind: "pipe", type: i9.DataFormatPipe, name: "dataFormat" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: WidgetAnalyticComponent, decorators: [{
             type: Component,

package/esm2022/widgets/widget-chart/component/widget-chart.component.mjs CHANGED Viewed

@@ -639,7 +639,7 @@ export class WidgetChartComponent extends DataWidgetComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: WidgetChartComponent, deps: [{ token: i1.Store }, { token: i2.PryI18nService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: WidgetChartComponent, selector: "pry-widget-chart", viewQueries: [{ propertyName: "vega", first: true, predicate: ["vega"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<pry-widget-chart-css></pry-widget-chart-css>\n<div class=\"o-widget o-widget--chart\">\n  @if (displayHeader$ | async) {\n    <pry-widget-header\n      [datasourceIds]=\"(datasourceIds$ | async) ?? []\"\n      [widgetIndex]=\"widgetIndex\"\n      [manifest]=\"manifest\"\n      (manifestModified)=\"manifestModified.emit($event)\"\n      #header\n      [headerOptions]=\"(displayHeader$ | async) ?? {}\"\n      >\n      <pry-settings\n        (saveTriggered)=\"emitManifest()\"\n        (changeTitle)=\"changeWidgetTitle($event)\"\n        [headerPresent]=\"displayHeader$ | async\"\n        [isDisable]=\"(filterDataForOptionsCopy$ | async)?.length === 0 || hasNoType(optionsCopy)\"\n        [widgetIndex]=\"widgetIndex\"\n        [open$]=\"open$\"\n        [header]=\"header\"\n        class=\"o-settings\"\n        >\n        <div class=\"o-settings__popup__content__fields -condensed\">\n          <pry-edit-input\n            label=\"@pry.widget.chart.title\"\n            (ngModelChange)=\"changeChartTitle($event)\"\n            [ngModel]=\"optionsCopy.customTitle ?? optionsCopy.title\"\n          ></pry-edit-input>\n          <div class=\"m-form-label-field\">\n            @if ((filterDataForOptionsCopy$ | async)?.length === 0) {\n              <p class=\"a-label a-label--help -error\">{{ '@pry.widget.chart.params.noParams' | i18n }}</p>\n            } @else {\n              @if (optionsCopy?.type !== MarkType.RADAR) {\n                <div>\n                  {{ '@pry.widget.chart.params.multipleParams' | i18n }}{{ (filterDataForOptionsCopy$ | async)?.length }}\n                </div>\n              }\n            }\n          </div>\n          @if (optionsCopy) {\n            <div class=\"m-form-label-field\">\n              <label class=\"a-label\" for=\"chart_type\">{{ '@pry.widget.chart.type' | i18n }}</label>\n              <pry-select\n                (ngModelChange)=\"changeType($event)\"\n                [items]=\"typeOptions\"\n                [ngModel]=\"optionsCopy.type + '-' + optionsCopy.subType\"\n                i18nPrefix=\"@pry.widget.chart.markType.\"\n                bindLabel=\"label\"\n                bindValue=\"id\"\n                id=\"chart_type\"\n              ></pry-select>\n            </div>\n          }\n        </div>\n        @if (optionsCopy?.type !== MarkType.RADAR && optionsCopy?.type !== MarkType.CIRCLE_PACK) {\n          @if (optionsCopy?.subType === MarkSubType.DONUT) {\n            <pry-range\n              [ngModel]=\"optionsCopy.innerRadius\"\n              (ngModelChange)=\"changeInnerRadius($event)\"\n              labelTranslate=\"@pry.widget.chart.innerRadius\"\n              min=\"1\"\n              max=\"500\"\n            ></pry-range>\n          }\n          @for (variableDef of optionsCopy?.selectedVariables; track variableDef; let i = $index) {\n            <div\n              class=\"o-settings__popup__content__fields -condensed\"\n              >\n              @if (i === 1) {\n                <div class=\"m-form-label-field\">\n                  <label class=\"a-label\" for=\"aggregations\">{{ '@pry.widget.chart.encoding.group' | i18n }}</label>\n                  @if (i === 1) {\n                    <pry-select\n                      (ngModelChange)=\"changeAggregation($event)\"\n                      [items]=\"aggregations\"\n                      [ngModel]=\"optionsCopy.aggregation\"\n                      id=\"aggregations\"\n                      i18nPrefix=\"@pry.widget.chart.aggregation.\"\n                    ></pry-select>\n                  }\n                </div>\n              }\n              @if (i !== 1 || optionsCopy.aggregation !== 'count') {\n                <div class=\"m-form-label-field\">\n                  <label class=\"a-label\" for=\"aggregation_property\">\n                    {{ axeLabel(i, optionsCopy) | i18n }}\n                  </label>\n                  <pry-select\n                    (ngModelChange)=\"changeProperty($event, i)\"\n                    [items]=\"(i !== 1 ? variableAttributes$ : possibleSecondaryAttributes$) | async\"\n                    [ngModel]=\"variableDef.name\"\n                    bindLabel=\"name\"\n                    bindValue=\"technicalName\"\n                    id=\"aggregation_property\"\n                  ></pry-select>\n                </div>\n              }\n              <pry-edit-input\n                label=\"@pry.widget.chart.dataLabel\"\n                (ngModelChange)=\"changeLabel($event, i)\"\n                [ngModel]=\"variableDef.label\"\n              ></pry-edit-input>\n              @if (variableDef.type === 'temporal') {\n                <div class=\"m-form-label-field\">\n                  <label class=\"a-label\" for=\"chart_timeUnit\">{{ '@pry.widget.chart.timeUnit' | i18n }}</label>\n                  <pry-select\n                    (ngModelChange)=\"changeTimeUnit($event, variableDef)\"\n                    [items]=\"timeUnits\"\n                    [ngModel]=\"variableDef.timeUnit\"\n                    i18nPrefix=\"@pry.widget.chart.timeUnitList.\"\n                    id=\"chart_timeUnit\"\n                  ></pry-select>\n                </div>\n              }\n              @if (variableDef.type === 'quantitative' && optionsCopy?.type !== 'arc') {\n                <div class=\"m-form-label-field\">\n                  <pry-checkbox (ngModelChange)=\"toggleOriginAtZero(variableDef, $event)\" [ngModel]=\"variableDef.origin0\"\n                    >{{ '@pry.widget.chart.origin' | i18n }}\n                  </pry-checkbox>\n                </div>\n              }\n            </div>\n          }\n          <div class=\"o-settings__popup__content__fields -condensed\">\n            <div class=\"m-form-label-field\">\n              @if (optionsCopy?.type !== MarkType.ARC && optionsCopy?.type !== MarkType.RADAR) {\n                <pry-checkbox\n                  (ngModelChange)=\"toggleSeries($event)\"\n                  [ngModel]=\"!!optionsCopy.series\"\n              [disabled]=\"\n                this.optionsCopy.subType === MarkSubType.AREASTACKED ||\n                this.optionsCopy.subType === MarkSubType.HISTOSTACKED\n              \"\n                  >{{ '@pry.widget.chart.series' | i18n }}\n                </pry-checkbox>\n              }\n            </div>\n            @if (optionsCopy?.type !== MarkType.ARC && optionsCopy?.type !== MarkType.RADAR && !!optionsCopy.series) {\n              <div\n                class=\"m-form-label-field\"\n                >\n                <label class=\"a-label\" for=\"chart_seriesAttr\">{{ '@pry.widget.chart.seriesAttr' | i18n }}</label>\n                <pry-select\n                  (ngModelChange)=\"changeSeries($event)\"\n                  [ngModel]=\"optionsCopy.series.groupBy!\"\n                  [items]=\"variableAttributes$ | async\"\n                  bindLabel=\"name\"\n                  bindValue=\"name\"\n                  id=\"chart_seriesAttr\"\n                ></pry-select>\n              </div>\n            }\n            @if (\n              (optionsCopy?.type === MarkType.ARC || optionsCopy?.type === MarkType.RADAR || !!optionsCopy.series) &&\n              schemes\n              ) {\n              <div\n                class=\"m-form-label-field\"\n                >\n                <label class=\"a-label\" for=\"chart_seriesScheme\" [title]=\"'@pry.widget.chart.seriesSchemeAlt' | i18n\">{{\n                  '@pry.widget.chart.seriesScheme' | i18n\n                }}</label>\n                <pry-select\n                  (ngModelChange)=\"changeSeriesScheme($event)\"\n                  [ngModel]=\"optionsCopy.series?.scheme!\"\n                  [items]=\"schemes\"\n                  id=\"chart_seriesScheme\"\n                  i18nPrefix=\"@pry.widget.chart.scheme.\"\n                  bindValue=\"id\"\n                  bindLabel=\"id\"\n                ></pry-select>\n              </div>\n            }\n            <div class=\"o-widget--chart-color-thumb\">\n              @for (schemeColor of scheme(); track schemeColor) {\n                <div\n                  class=\"o-widget--chart-color-thumb-item\"\n                  [title]=\"schemeColor\"\n                  [style.background-color]=\"schemeColor\"\n                ></div>\n              }\n            </div>\n            <div class=\"m-form-label-field\">\n              @if (optionsCopy?.type !== MarkType.RADAR || !!optionsCopy.series) {\n                <pry-checkbox\n                  (ngModelChange)=\"toggleSeriesLegend($event)\"\n                  [ngModel]=\"!!optionsCopy.legend!\"\n                  >{{ '@pry.widget.chart.seriesLegend' | i18n }}\n                </pry-checkbox>\n              }\n            </div>\n            <div class=\"m-form-label-field\">\n              <pry-checkbox (ngModelChange)=\"toggleTooltip($event)\" [ngModel]=\"!!optionsCopy.tooltip!\"\n                >{{ '@pry.widget.chart.tooltip' | i18n }}\n              </pry-checkbox>\n            </div>\n          </div>\n        }\n        @if (optionsCopy?.type === MarkType.RADAR && optionsCopy.radar !== undefined) {\n          <div class=\"o-settings__popup__content__fields -condensed\">\n            <div class=\"m-form-label-field\">\n              <pry-select\n                (ngModelChange)=\"trigger(); proposeTitle()\"\n                [(ngModel)]=\"optionsCopy.radar.compare\"\n                [items]=\"comparisons\"\n                bindLabel=\"name\"\n                bindValue=\"id\"\n              ></pry-select>\n            </div>\n            @if (optionsCopy.radar.compare === 'item') {\n              <div class=\"m-form-label-field\">\n                <pry-select\n                  (ngModelChange)=\"trigger(); proposeTitle()\"\n                  [(ngModel)]=\"optionsCopy.radar.props\"\n                  [items]=\"numericProperties$ | async\"\n                  [multiple]=\"true\"\n                  [closeOnSelect]=\"false\"\n                  bindLabel=\"name\"\n                  bindValue=\"name\"\n                ></pry-select>\n              </div>\n            }\n            @if (optionsCopy.radar.compare === 'value') {\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"comparison_key\">{{ '@pry.widget.chart.comparison.key' | i18n }}</label>\n                <pry-select\n                  (ngModelChange)=\"trigger(); proposeTitle()\"\n                  [(ngModel)]=\"optionsCopy.radar.keyProp\"\n                  [items]=\"textProperties$ | async\"\n                  bindLabel=\"name\"\n                  bindValue=\"name\"\n                  id=\"comparison_key\"\n                ></pry-select>\n              </div>\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"comparison_values\">{{ '@pry.widget.chart.comparison.values' | i18n }}</label>\n                <pry-select\n                  (ngModelChange)=\"trigger(); proposeTitle()\"\n                  [(ngModel)]=\"optionsCopy.radar.valueProp\"\n                  [items]=\"numericProperties$ | async\"\n                  bindLabel=\"name\"\n                  bindValue=\"name\"\n                  id=\"comparison_values\"\n                ></pry-select>\n              </div>\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"comparison_category\">{{\n                  '@pry.widget.chart.comparison.category' | i18n\n                }}</label>\n                <pry-select\n                  (ngModelChange)=\"trigger(); proposeTitle()\"\n                  [(ngModel)]=\"optionsCopy.radar.categoryProp\"\n                  [items]=\"textProperties$ | async\"\n                  bindLabel=\"name\"\n                  bindValue=\"name\"\n                  id=\"comparison_category\"\n                ></pry-select>\n              </div>\n            }\n            @if (schemes) {\n              <label\n                class=\"a-label\"\n                for=\"chart_seriesScheme_radar\"\n                [title]=\"'@pry.widget.chart.seriesSchemeAlt' | i18n\"\n                >{{ '@pry.widget.chart.seriesScheme' | i18n }}</label\n                >\n                <pry-select\n                  (ngModelChange)=\"changeSeriesScheme($event)\"\n                  [ngModel]=\"optionsCopy.series?.scheme!\"\n                  [items]=\"schemes\"\n                  id=\"chart_seriesScheme_radar\"\n                ></pry-select>\n              }\n            </div>\n          }\n          @if (optionsCopy?.type === MarkType.CIRCLE_PACK && optionsCopy.packing !== undefined) {\n            <div class=\"o-settings__popup__content__fields -condensed\">\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"chart_circle_id\">{{ '@pry.widget.chart.circle.id' | i18n }}</label>\n                <pry-select\n                  (ngModelChange)=\"trigger(); proposeTitle()\"\n                  [(ngModel)]=\"optionsCopy.packing.id\"\n                  [items]=\"variableAttributes$ | async\"\n                  bindLabel=\"name\"\n                  bindValue=\"name\"\n                  id=\"chart_circle_id\"\n                ></pry-select>\n              </div>\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"chart_circle_pid\">{{ '@pry.widget.chart.circle.pid' | i18n }}</label>\n                <pry-select\n                  (ngModelChange)=\"trigger(); proposeTitle()\"\n                  [(ngModel)]=\"optionsCopy.packing.parentId\"\n                  [items]=\"variableAttributes$ | async\"\n                  bindLabel=\"name\"\n                  bindValue=\"name\"\n                  id=\"chart_circle_pid\"\n                ></pry-select>\n              </div>\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"chart_circle_field\">{{ '@pry.widget.chart.circle.field' | i18n }}</label>\n                <pry-select\n                  (ngModelChange)=\"trigger(); proposeTitle()\"\n                  [(ngModel)]=\"optionsCopy.packing.packField\"\n                  [items]=\"numericProperties$ | async\"\n                  bindLabel=\"name\"\n                  bindValue=\"name\"\n                  id=\"chart_circle_field\"\n                ></pry-select>\n              </div>\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"chart_circle_tooltip\">{{ '@pry.widget.chart.circle.tooltip' | i18n }}</label>\n                <pry-select\n                  (ngModelChange)=\"trigger(); proposeTitle()\"\n                  [(ngModel)]=\"optionsCopy.packing.tooltip\"\n                  [items]=\"variableAttributes$ | async\"\n                  bindLabel=\"name\"\n                  bindValue=\"name\"\n                  id=\"chart_circle_tooltip\"\n                ></pry-select>\n              </div>\n            </div>\n          }\n          <div class=\"o-settings__popup__content__fields -condensed\">\n            <pry-checkbox (ngModelChange)=\"toggleSpecToMerge($event)\" [ngModel]=\"!!optionsCopy.specToMerge\"\n              >{{ '@pry.widget.chart.moreOptions' | i18n }}\n            </pry-checkbox>\n            @if (!!optionsCopy.specToMerge) {\n              <textarea\n                [ngModel]=\"advancedEdit\"\n                (focusout)=\"updateAdvancedEdit($event)\"\n                class=\"o-settings__popup__content__area\"\n                [class.-invalid]=\"invalidJson\"\n              ></textarea>\n            }\n          </div>\n        </pry-settings>\n      </pry-widget-header>\n    }\n    @if (isChartValid$ | async) {\n      <div\n        #vega\n      [style.height.px]=\"\n        ((widgetSize$ | async)?.height ?? 0) - ((displayHeader$ | async) ? 1 : 0) * WIDGET_HEADER_HEIGHT\n      \"\n        [style.width.px]=\"(widgetSize$ | async)?.width\"\n      ></div>\n    }\n\n    @if (!(isChartValid$ | async)) {\n      <div class=\"o-widget__choose-parameters\">\n        <p class=\"a-p\">\n          {{ '@pry.widget.chart.chooseParameters' | i18n }}\n        </p>\n        <button type=\"button\" (click)=\"openSettings()\" class=\"a-btn a-btn--primary\">\n          <pry-icon [height]=\"20\" [width]=\"20\" iconSvg=\"control\"></pry-icon>\n          <span>{{ '@pry.widget.settings.title' | i18n }}</span>\n        </button>\n      </div>\n    }\n  </div>\n", dependencies: [{ kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.SettingsComponent, selector: "pry-settings", inputs: ["widgetIndex", "isDisable", "headerPresent", "open$", "header"], outputs: ["triggerClick", "saveTriggered", "changeTitle"] }, { kind: "component", type: i2.PryWidgetHeaderComponent, selector: "pry-widget-header", inputs: ["manifest", "openData$", "additionalOptions", "headerOptions", "displayCount", "datasourceIds", "widgetIndex"], outputs: ["manifestModified"] }, { kind: "component", type: i2.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "component", type: i2.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i4.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle", "name", "inputId", "inhibit"] }, { kind: "component", type: i2.PryEditInputComponent, selector: "pry-edit-input", inputs: ["label", "editButtonTooltip", "confirmButtonTooltip"], outputs: ["validated"] }, { kind: "component", type: i2.PryRangeComponent, selector: "pry-range", inputs: ["min", "max", "step", "disabled", "labelTranslate"] }, { kind: "component", type: i5.PryWidgetChartCssComponent, selector: "pry-widget-chart-css" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: WidgetChartComponent, selector: "pry-widget-chart", viewQueries: [{ propertyName: "vega", first: true, predicate: ["vega"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<pry-widget-chart-css></pry-widget-chart-css>\n<div class=\"o-widget o-widget--chart\">\n  @if (displayHeader$ | async) {\n    <pry-widget-header\n      [datasourceIds]=\"(datasourceIds$ | async) ?? []\"\n      [widgetIndex]=\"widgetIndex\"\n      [manifest]=\"manifest\"\n      (manifestModified)=\"manifestModified.emit($event)\"\n      #header\n      [headerOptions]=\"(displayHeader$ | async) ?? {}\"\n      >\n      <pry-settings\n        (saveTriggered)=\"emitManifest()\"\n        (changeTitle)=\"changeWidgetTitle($event)\"\n        [headerPresent]=\"displayHeader$ | async\"\n        [isDisable]=\"(filterDataForOptionsCopy$ | async)?.length === 0 || hasNoType(optionsCopy)\"\n        [widgetIndex]=\"widgetIndex\"\n        [open$]=\"open$\"\n        [header]=\"header\"\n        class=\"o-settings\"\n        >\n        <div class=\"o-settings__popup__content__fields -condensed\">\n          <pry-edit-input\n            label=\"@pry.widget.chart.title\"\n            (ngModelChange)=\"changeChartTitle($event)\"\n            [ngModel]=\"optionsCopy.customTitle ?? optionsCopy.title\"\n          ></pry-edit-input>\n          <div class=\"m-form-label-field\">\n            @if ((filterDataForOptionsCopy$ | async)?.length === 0) {\n              <p class=\"a-label a-label--help -error\">{{ '@pry.widget.chart.params.noParams' | i18n }}</p>\n            } @else {\n              @if (optionsCopy?.type !== MarkType.RADAR) {\n                <div>\n                  {{ '@pry.widget.chart.params.multipleParams' | i18n }}{{ (filterDataForOptionsCopy$ | async)?.length }}\n                </div>\n              }\n            }\n          </div>\n          @if (optionsCopy) {\n            <div class=\"m-form-label-field\">\n              <label class=\"a-label\" for=\"chart_type\">{{ '@pry.widget.chart.type' | i18n }}</label>\n              <pry-select\n                (ngModelChange)=\"changeType($event)\"\n                [items]=\"typeOptions\"\n                [ngModel]=\"optionsCopy.type + '-' + optionsCopy.subType\"\n                i18nPrefix=\"@pry.widget.chart.markType.\"\n                bindLabel=\"label\"\n                bindValue=\"id\"\n                id=\"chart_type\"\n              ></pry-select>\n            </div>\n          }\n        </div>\n        @if (optionsCopy?.type !== MarkType.RADAR && optionsCopy?.type !== MarkType.CIRCLE_PACK) {\n          @if (optionsCopy?.subType === MarkSubType.DONUT) {\n            <pry-range\n              [ngModel]=\"optionsCopy.innerRadius\"\n              (ngModelChange)=\"changeInnerRadius($event)\"\n              labelTranslate=\"@pry.widget.chart.innerRadius\"\n              min=\"1\"\n              max=\"500\"\n            ></pry-range>\n          }\n          @for (variableDef of optionsCopy?.selectedVariables; track variableDef; let i = $index) {\n            <div\n              class=\"o-settings__popup__content__fields -condensed\"\n              >\n              @if (i === 1) {\n                <div class=\"m-form-label-field\">\n                  <label class=\"a-label\" for=\"aggregations\">{{ '@pry.widget.chart.encoding.group' | i18n }}</label>\n                  @if (i === 1) {\n                    <pry-select\n                      (ngModelChange)=\"changeAggregation($event)\"\n                      [items]=\"aggregations\"\n                      [ngModel]=\"optionsCopy.aggregation\"\n                      id=\"aggregations\"\n                      i18nPrefix=\"@pry.widget.chart.aggregation.\"\n                    ></pry-select>\n                  }\n                </div>\n              }\n              @if (i !== 1 || optionsCopy.aggregation !== 'count') {\n                <div class=\"m-form-label-field\">\n                  <label class=\"a-label\" for=\"aggregation_property\">\n                    {{ axeLabel(i, optionsCopy) | i18n }}\n                  </label>\n                  <pry-select\n                    (ngModelChange)=\"changeProperty($event, i)\"\n                    [items]=\"(i !== 1 ? variableAttributes$ : possibleSecondaryAttributes$) | async\"\n                    [ngModel]=\"variableDef.name\"\n                    bindLabel=\"name\"\n                    bindValue=\"technicalName\"\n                    id=\"aggregation_property\"\n                  ></pry-select>\n                </div>\n              }\n              <pry-edit-input\n                label=\"@pry.widget.chart.dataLabel\"\n                (ngModelChange)=\"changeLabel($event, i)\"\n                [ngModel]=\"variableDef.label\"\n              ></pry-edit-input>\n              @if (variableDef.type === 'temporal') {\n                <div class=\"m-form-label-field\">\n                  <label class=\"a-label\" for=\"chart_timeUnit\">{{ '@pry.widget.chart.timeUnit' | i18n }}</label>\n                  <pry-select\n                    (ngModelChange)=\"changeTimeUnit($event, variableDef)\"\n                    [items]=\"timeUnits\"\n                    [ngModel]=\"variableDef.timeUnit\"\n                    i18nPrefix=\"@pry.widget.chart.timeUnitList.\"\n                    id=\"chart_timeUnit\"\n                  ></pry-select>\n                </div>\n              }\n              @if (variableDef.type === 'quantitative' && optionsCopy?.type !== 'arc') {\n                <div class=\"m-form-label-field\">\n                  <pry-checkbox (ngModelChange)=\"toggleOriginAtZero(variableDef, $event)\" [ngModel]=\"variableDef.origin0\"\n                    >{{ '@pry.widget.chart.origin' | i18n }}\n                  </pry-checkbox>\n                </div>\n              }\n            </div>\n          }\n          <div class=\"o-settings__popup__content__fields -condensed\">\n            <div class=\"m-form-label-field\">\n              @if (optionsCopy?.type !== MarkType.ARC && optionsCopy?.type !== MarkType.RADAR) {\n                <pry-checkbox\n                  (ngModelChange)=\"toggleSeries($event)\"\n                  [ngModel]=\"!!optionsCopy.series\"\n              [disabled]=\"\n                this.optionsCopy.subType === MarkSubType.AREASTACKED ||\n                this.optionsCopy.subType === MarkSubType.HISTOSTACKED\n              \"\n                  >{{ '@pry.widget.chart.series' | i18n }}\n                </pry-checkbox>\n              }\n            </div>\n            @if (optionsCopy?.type !== MarkType.ARC && optionsCopy?.type !== MarkType.RADAR && !!optionsCopy.series) {\n              <div\n                class=\"m-form-label-field\"\n                >\n                <label class=\"a-label\" for=\"chart_seriesAttr\">{{ '@pry.widget.chart.seriesAttr' | i18n }}</label>\n                <pry-select\n                  (ngModelChange)=\"changeSeries($event)\"\n                  [ngModel]=\"optionsCopy.series.groupBy!\"\n                  [items]=\"variableAttributes$ | async\"\n                  bindLabel=\"name\"\n                  bindValue=\"name\"\n                  id=\"chart_seriesAttr\"\n                ></pry-select>\n              </div>\n            }\n            @if (\n              (optionsCopy?.type === MarkType.ARC || optionsCopy?.type === MarkType.RADAR || !!optionsCopy.series) &&\n              schemes\n              ) {\n              <div\n                class=\"m-form-label-field\"\n                >\n                <label class=\"a-label\" for=\"chart_seriesScheme\" [title]=\"'@pry.widget.chart.seriesSchemeAlt' | i18n\">{{\n                  '@pry.widget.chart.seriesScheme' | i18n\n                }}</label>\n                <pry-select\n                  (ngModelChange)=\"changeSeriesScheme($event)\"\n                  [ngModel]=\"optionsCopy.series?.scheme!\"\n                  [items]=\"schemes\"\n                  id=\"chart_seriesScheme\"\n                  i18nPrefix=\"@pry.widget.chart.scheme.\"\n                  bindValue=\"id\"\n                  bindLabel=\"id\"\n                ></pry-select>\n              </div>\n            }\n            <div class=\"o-widget--chart-color-thumb\">\n              @for (schemeColor of scheme(); track schemeColor) {\n                <div\n                  class=\"o-widget--chart-color-thumb-item\"\n                  [title]=\"schemeColor\"\n                  [style.background-color]=\"schemeColor\"\n                ></div>\n              }\n            </div>\n            <div class=\"m-form-label-field\">\n              @if (optionsCopy?.type !== MarkType.RADAR || !!optionsCopy.series) {\n                <pry-checkbox\n                  (ngModelChange)=\"toggleSeriesLegend($event)\"\n                  [ngModel]=\"!!optionsCopy.legend!\"\n                  >{{ '@pry.widget.chart.seriesLegend' | i18n }}\n                </pry-checkbox>\n              }\n            </div>\n            <div class=\"m-form-label-field\">\n              <pry-checkbox (ngModelChange)=\"toggleTooltip($event)\" [ngModel]=\"!!optionsCopy.tooltip!\"\n                >{{ '@pry.widget.chart.tooltip' | i18n }}\n              </pry-checkbox>\n            </div>\n          </div>\n        }\n        @if (optionsCopy?.type === MarkType.RADAR && optionsCopy.radar !== undefined) {\n          <div class=\"o-settings__popup__content__fields -condensed\">\n            <div class=\"m-form-label-field\">\n              <pry-select\n                (ngModelChange)=\"trigger(); proposeTitle()\"\n                [(ngModel)]=\"optionsCopy.radar.compare\"\n                [items]=\"comparisons\"\n                bindLabel=\"name\"\n                bindValue=\"id\"\n              ></pry-select>\n            </div>\n            @if (optionsCopy.radar.compare === 'item') {\n              <div class=\"m-form-label-field\">\n                <pry-select\n                  (ngModelChange)=\"trigger(); proposeTitle()\"\n                  [(ngModel)]=\"optionsCopy.radar.props\"\n                  [items]=\"numericProperties$ | async\"\n                  [multiple]=\"true\"\n                  [closeOnSelect]=\"false\"\n                  bindLabel=\"name\"\n                  bindValue=\"name\"\n                ></pry-select>\n              </div>\n            }\n            @if (optionsCopy.radar.compare === 'value') {\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"comparison_key\">{{ '@pry.widget.chart.comparison.key' | i18n }}</label>\n                <pry-select\n                  (ngModelChange)=\"trigger(); proposeTitle()\"\n                  [(ngModel)]=\"optionsCopy.radar.keyProp\"\n                  [items]=\"textProperties$ | async\"\n                  bindLabel=\"name\"\n                  bindValue=\"name\"\n                  id=\"comparison_key\"\n                ></pry-select>\n              </div>\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"comparison_values\">{{ '@pry.widget.chart.comparison.values' | i18n }}</label>\n                <pry-select\n                  (ngModelChange)=\"trigger(); proposeTitle()\"\n                  [(ngModel)]=\"optionsCopy.radar.valueProp\"\n                  [items]=\"numericProperties$ | async\"\n                  bindLabel=\"name\"\n                  bindValue=\"name\"\n                  id=\"comparison_values\"\n                ></pry-select>\n              </div>\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"comparison_category\">{{\n                  '@pry.widget.chart.comparison.category' | i18n\n                }}</label>\n                <pry-select\n                  (ngModelChange)=\"trigger(); proposeTitle()\"\n                  [(ngModel)]=\"optionsCopy.radar.categoryProp\"\n                  [items]=\"textProperties$ | async\"\n                  bindLabel=\"name\"\n                  bindValue=\"name\"\n                  id=\"comparison_category\"\n                ></pry-select>\n              </div>\n            }\n            @if (schemes) {\n              <label\n                class=\"a-label\"\n                for=\"chart_seriesScheme_radar\"\n                [title]=\"'@pry.widget.chart.seriesSchemeAlt' | i18n\"\n                >{{ '@pry.widget.chart.seriesScheme' | i18n }}</label\n                >\n                <pry-select\n                  (ngModelChange)=\"changeSeriesScheme($event)\"\n                  [ngModel]=\"optionsCopy.series?.scheme!\"\n                  [items]=\"schemes\"\n                  id=\"chart_seriesScheme_radar\"\n                ></pry-select>\n              }\n            </div>\n          }\n          @if (optionsCopy?.type === MarkType.CIRCLE_PACK && optionsCopy.packing !== undefined) {\n            <div class=\"o-settings__popup__content__fields -condensed\">\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"chart_circle_id\">{{ '@pry.widget.chart.circle.id' | i18n }}</label>\n                <pry-select\n                  (ngModelChange)=\"trigger(); proposeTitle()\"\n                  [(ngModel)]=\"optionsCopy.packing.id\"\n                  [items]=\"variableAttributes$ | async\"\n                  bindLabel=\"name\"\n                  bindValue=\"name\"\n                  id=\"chart_circle_id\"\n                ></pry-select>\n              </div>\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"chart_circle_pid\">{{ '@pry.widget.chart.circle.pid' | i18n }}</label>\n                <pry-select\n                  (ngModelChange)=\"trigger(); proposeTitle()\"\n                  [(ngModel)]=\"optionsCopy.packing.parentId\"\n                  [items]=\"variableAttributes$ | async\"\n                  bindLabel=\"name\"\n                  bindValue=\"name\"\n                  id=\"chart_circle_pid\"\n                ></pry-select>\n              </div>\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"chart_circle_field\">{{ '@pry.widget.chart.circle.field' | i18n }}</label>\n                <pry-select\n                  (ngModelChange)=\"trigger(); proposeTitle()\"\n                  [(ngModel)]=\"optionsCopy.packing.packField\"\n                  [items]=\"numericProperties$ | async\"\n                  bindLabel=\"name\"\n                  bindValue=\"name\"\n                  id=\"chart_circle_field\"\n                ></pry-select>\n              </div>\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"chart_circle_tooltip\">{{ '@pry.widget.chart.circle.tooltip' | i18n }}</label>\n                <pry-select\n                  (ngModelChange)=\"trigger(); proposeTitle()\"\n                  [(ngModel)]=\"optionsCopy.packing.tooltip\"\n                  [items]=\"variableAttributes$ | async\"\n                  bindLabel=\"name\"\n                  bindValue=\"name\"\n                  id=\"chart_circle_tooltip\"\n                ></pry-select>\n              </div>\n            </div>\n          }\n          <div class=\"o-settings__popup__content__fields -condensed\">\n            <pry-checkbox (ngModelChange)=\"toggleSpecToMerge($event)\" [ngModel]=\"!!optionsCopy.specToMerge\"\n              >{{ '@pry.widget.chart.moreOptions' | i18n }}\n            </pry-checkbox>\n            @if (!!optionsCopy.specToMerge) {\n              <textarea\n                [ngModel]=\"advancedEdit\"\n                (focusout)=\"updateAdvancedEdit($event)\"\n                class=\"o-settings__popup__content__area\"\n                [class.-invalid]=\"invalidJson\"\n              ></textarea>\n            }\n          </div>\n        </pry-settings>\n      </pry-widget-header>\n    }\n    @if (isChartValid$ | async) {\n      <div\n        #vega\n      [style.height.px]=\"\n        ((widgetSize$ | async)?.height ?? 0) - ((displayHeader$ | async) ? 1 : 0) * WIDGET_HEADER_HEIGHT\n      \"\n        [style.width.px]=\"(widgetSize$ | async)?.width\"\n      ></div>\n    }\n\n    @if (!(isChartValid$ | async)) {\n      <div class=\"o-widget__choose-parameters\">\n        <p class=\"a-p\">\n          {{ '@pry.widget.chart.chooseParameters' | i18n }}\n        </p>\n        <button type=\"button\" (click)=\"openSettings()\" class=\"a-btn a-btn--primary\">\n          <pry-icon [height]=\"20\" [width]=\"20\" iconSvg=\"control\"></pry-icon>\n          <span>{{ '@pry.widget.settings.title' | i18n }}</span>\n        </button>\n      </div>\n    }\n  </div>\n", dependencies: [{ kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.SettingsComponent, selector: "pry-settings", inputs: ["widgetIndex", "isDisable", "headerPresent", "open$", "header"], outputs: ["triggerClick", "saveTriggered", "changeTitle"] }, { kind: "component", type: i2.PryWidgetHeaderComponent, selector: "pry-widget-header", inputs: ["manifest", "openData$", "additionalOptions", "headerOptions", "displayCount", "datasourceIds", "widgetIndex"], outputs: ["manifestModified"] }, { kind: "component", type: i2.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "forcePlaceHolder", "isForm", "required", "name", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "component", type: i2.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i4.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle", "name", "inputId", "inhibit"] }, { kind: "component", type: i2.PryEditInputComponent, selector: "pry-edit-input", inputs: ["label", "editButtonTooltip", "confirmButtonTooltip"], outputs: ["validated"] }, { kind: "component", type: i2.PryRangeComponent, selector: "pry-range", inputs: ["min", "max", "step", "disabled", "labelTranslate"] }, { kind: "component", type: i5.PryWidgetChartCssComponent, selector: "pry-widget-chart-css" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: WidgetChartComponent, decorators: [{
             type: Component,

package/esm2022/widgets/widget-graph/component/widget-graph.component.mjs CHANGED Viewed

@@ -430,7 +430,7 @@ export class WidgetGraphComponent extends DataWidgetComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: WidgetGraphComponent, deps: [{ token: i1.Store }, { token: i2.TooltipFactoryService }, { token: i2.SymbolService }, { token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: WidgetGraphComponent, selector: "pry-widget-graph", viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true }, { propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true, read: ViewContainerRef }], usesInheritance: true, ngImport: i0, template: "<pry-widget-force-graph-css></pry-widget-force-graph-css>\n<div class=\"o-widget o-widget--graph\" [class.-has-header]=\"displayHeader$ | async\">\n  @if (displayHeader$ | async) {\n    <pry-widget-header\n      [datasourceIds]=\"(datasourceIds$ | async) ?? []\"\n      [widgetIndex]=\"widgetIndex\"\n      [manifest]=\"manifest\"\n      (manifestModified)=\"manifestModified.emit($event)\"\n      [headerOptions]=\"(displayHeader$ | async) ?? {}\"\n      #header\n      >\n      <pry-settings\n        (saveTriggered)=\"emitManifest()\"\n        (changeTitle)=\"changeWidgetTitle($event)\"\n        [headerPresent]=\"displayHeader$ | async\"\n        [widgetIndex]=\"widgetIndex\"\n        [header]=\"header\"\n        [open$]=\"open$\"\n        class=\"o-settings\"\n        >\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label\" for=\"graph_layout\">{{ '@pry.widget.graph.layout' | i18n }}</label>\n          <pry-select\n            (ngModelChange)=\"changeLayout($event)\"\n            [items]=\"layouts\"\n            [ngModel]=\"optionsCopy!.layout\"\n            bindLabel=\"key\"\n            bindValue=\"key\"\n            id=\"graph_layout\"\n          ></pry-select>\n        </div>\n        <div class=\"m-form-label-field\">\n          <pry-range\n            [ngModel]=\"optionsCopy!.nodeRadius\"\n            (ngModelChange)=\"changeNodeRadius($event)\"\n            labelTranslate=\"@pry.widget.graph.nodeRadius\"\n            min=\"10\"\n            max=\"200\"\n          ></pry-range>\n        </div>\n      </pry-settings>\n    </pry-widget-header>\n  }\n  @if ((allItemsWithImages$ | async)?.length === 0) {\n    <div class=\"no-result\">\n      <img\n        class=\"no-result__search\"\n        src=\"../../../assets/svgs/pry_recherche_pas_de_resultat.svg\"\n        alt=\"{{ '@pry.widget.table.empty' | i18n }}\"\n        aria-hidden=\"true\"\n        />\n      <span class=\"no-result__text\">{{ '@pry.widget.graph.empty' | i18n }}</span>\n    </div>\n  }\n  <div class=\"m-btn-group -selection-choice\">\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--icon-only a-tooltip a-tooltip--move\"\n      (click)=\"changeMode('move')\"\n      [class.-selected]=\"mode === 'move'\"\n      [attr.data-tooltip]=\"'@pry.widget.graph.move' | i18n\"\n      >\n      <pry-icon iconSvg=\"move\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.graph.move' | i18n }}</span>\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--icon-only a-tooltip a-tooltip--rectangle\"\n      (click)=\"changeMode('rectangle')\"\n      [class.-selected]=\"mode === 'rectangle'\"\n      [attr.data-tooltip]=\"'@pry.widget.graph.rectangle' | i18n\"\n      >\n      <pry-icon iconSvg=\"rectangle\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.graph.rectangle' | i18n }}</span>\n    </button>\n  </div>\n\n  <canvas\n    #canvas\n    class=\"o-widget--graph__canvas\"\n    (mousemove)=\"onMouseMove($event)\"\n    (mousedown)=\"onMouseDown($event)\"\n    (mouseup)=\"onMouseUp($event)\"\n    (mouseleave)=\"onMouseUp($event, true)\"\n    (contextmenu)=\"contextMenu($event)\"\n  ></canvas>\n\n  <div class=\"selection-rectangle\" #selectionRectangle></div>\n\n  <div\n    class=\"m-tooltip m-tooltip--popup noevent\"\n    [style.display]=\"(tooltip$ | async)?.display ? 'block' : 'none'\"\n    [style.left.px]=\"((tooltip$ | async)?.x ?? 0) + 50\"\n    [style.top.px]=\"((tooltip$ | async)?.y ?? 0) + 50\"\n    >\n    <div #tooltip></div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.SettingsComponent, selector: "pry-settings", inputs: ["widgetIndex", "isDisable", "headerPresent", "open$", "header"], outputs: ["triggerClick", "saveTriggered", "changeTitle"] }, { kind: "component", type: i2.PryWidgetHeaderComponent, selector: "pry-widget-header", inputs: ["manifest", "openData$", "additionalOptions", "headerOptions", "displayCount", "datasourceIds", "widgetIndex"], outputs: ["manifestModified"] }, { kind: "component", type: i2.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "component", type: i2.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i2.PryRangeComponent, selector: "pry-range", inputs: ["min", "max", "step", "disabled", "labelTranslate"] }, { kind: "component", type: i4.PryWidgetForceGraphCssComponent, selector: "pry-widget-force-graph-css" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.I18nPipe, name: "i18n" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: WidgetGraphComponent, selector: "pry-widget-graph", viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true }, { propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true, read: ViewContainerRef }], usesInheritance: true, ngImport: i0, template: "<pry-widget-force-graph-css></pry-widget-force-graph-css>\n<div class=\"o-widget o-widget--graph\" [class.-has-header]=\"displayHeader$ | async\">\n  @if (displayHeader$ | async) {\n    <pry-widget-header\n      [datasourceIds]=\"(datasourceIds$ | async) ?? []\"\n      [widgetIndex]=\"widgetIndex\"\n      [manifest]=\"manifest\"\n      (manifestModified)=\"manifestModified.emit($event)\"\n      [headerOptions]=\"(displayHeader$ | async) ?? {}\"\n      #header\n      >\n      <pry-settings\n        (saveTriggered)=\"emitManifest()\"\n        (changeTitle)=\"changeWidgetTitle($event)\"\n        [headerPresent]=\"displayHeader$ | async\"\n        [widgetIndex]=\"widgetIndex\"\n        [header]=\"header\"\n        [open$]=\"open$\"\n        class=\"o-settings\"\n        >\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label\" for=\"graph_layout\">{{ '@pry.widget.graph.layout' | i18n }}</label>\n          <pry-select\n            (ngModelChange)=\"changeLayout($event)\"\n            [items]=\"layouts\"\n            [ngModel]=\"optionsCopy!.layout\"\n            bindLabel=\"key\"\n            bindValue=\"key\"\n            id=\"graph_layout\"\n          ></pry-select>\n        </div>\n        <div class=\"m-form-label-field\">\n          <pry-range\n            [ngModel]=\"optionsCopy!.nodeRadius\"\n            (ngModelChange)=\"changeNodeRadius($event)\"\n            labelTranslate=\"@pry.widget.graph.nodeRadius\"\n            min=\"10\"\n            max=\"200\"\n          ></pry-range>\n        </div>\n      </pry-settings>\n    </pry-widget-header>\n  }\n  @if ((allItemsWithImages$ | async)?.length === 0) {\n    <div class=\"no-result\">\n      <img\n        class=\"no-result__search\"\n        src=\"../../../assets/svgs/pry_recherche_pas_de_resultat.svg\"\n        alt=\"{{ '@pry.widget.table.empty' | i18n }}\"\n        aria-hidden=\"true\"\n        />\n      <span class=\"no-result__text\">{{ '@pry.widget.graph.empty' | i18n }}</span>\n    </div>\n  }\n  <div class=\"m-btn-group -selection-choice\">\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--icon-only a-tooltip a-tooltip--move\"\n      (click)=\"changeMode('move')\"\n      [class.-selected]=\"mode === 'move'\"\n      [attr.data-tooltip]=\"'@pry.widget.graph.move' | i18n\"\n      >\n      <pry-icon iconSvg=\"move\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.graph.move' | i18n }}</span>\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--icon-only a-tooltip a-tooltip--rectangle\"\n      (click)=\"changeMode('rectangle')\"\n      [class.-selected]=\"mode === 'rectangle'\"\n      [attr.data-tooltip]=\"'@pry.widget.graph.rectangle' | i18n\"\n      >\n      <pry-icon iconSvg=\"rectangle\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.graph.rectangle' | i18n }}</span>\n    </button>\n  </div>\n\n  <canvas\n    #canvas\n    class=\"o-widget--graph__canvas\"\n    (mousemove)=\"onMouseMove($event)\"\n    (mousedown)=\"onMouseDown($event)\"\n    (mouseup)=\"onMouseUp($event)\"\n    (mouseleave)=\"onMouseUp($event, true)\"\n    (contextmenu)=\"contextMenu($event)\"\n  ></canvas>\n\n  <div class=\"selection-rectangle\" #selectionRectangle></div>\n\n  <div\n    class=\"m-tooltip m-tooltip--popup noevent\"\n    [style.display]=\"(tooltip$ | async)?.display ? 'block' : 'none'\"\n    [style.left.px]=\"((tooltip$ | async)?.x ?? 0) + 50\"\n    [style.top.px]=\"((tooltip$ | async)?.y ?? 0) + 50\"\n    >\n    <div #tooltip></div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.SettingsComponent, selector: "pry-settings", inputs: ["widgetIndex", "isDisable", "headerPresent", "open$", "header"], outputs: ["triggerClick", "saveTriggered", "changeTitle"] }, { kind: "component", type: i2.PryWidgetHeaderComponent, selector: "pry-widget-header", inputs: ["manifest", "openData$", "additionalOptions", "headerOptions", "displayCount", "datasourceIds", "widgetIndex"], outputs: ["manifestModified"] }, { kind: "component", type: i2.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "forcePlaceHolder", "isForm", "required", "name", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "component", type: i2.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i2.PryRangeComponent, selector: "pry-range", inputs: ["min", "max", "step", "disabled", "labelTranslate"] }, { kind: "component", type: i4.PryWidgetForceGraphCssComponent, selector: "pry-widget-force-graph-css" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.I18nPipe, name: "i18n" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: WidgetGraphComponent, decorators: [{
             type: Component,