@provoly/dashboard 1.4.2 → 1.4.4

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

@@ -161,10 +161,10 @@ export class WidgetAnalyticComponent extends DataWidgetComponent {
             manifest: { ...this.manifest, options: this.optionsCopy }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", 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: "17.1.3", 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"] }, { 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"], 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"], 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", 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.6", 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"] }, { 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: "17.1.3", ngImport: i0, type: WidgetAnalyticComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WidgetAnalyticComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pry-widget-analytic', 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" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i0.ElementRef }] });

package/esm2022/widgets/widget-analytic/style/css.component.mjs

@@ -1,10 +1,10 @@
 import { Component, ViewEncapsulation } from '@angular/core';
 import * as i0 from "@angular/core";
 export class PryWidgetAnalyticCssComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: PryWidgetAnalyticCssComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: PryWidgetAnalyticCssComponent, selector: "pry-widget-analytic-css", ngImport: i0, template: '', isInline: true, styles: [".o-widget__analytic{font-size:.75rem}.o-widget__analytic__table,.o-widget__analytic__table table{width:100%}.o-widget__analytic__table table th,.o-widget__analytic__table table td{text-align:center}.o-widget__analytic__table table th:first-child,.o-widget__analytic__table table td:first-child{text-align:left}.o-widget__analytic__table table .primary-header th:not(:first-child){background-color:#d7e7f7}.o-widget__analytic__table table .secondary-header th:not(:first-child){background-color:#f3f8fc}.o-widget__analytic__table table .partial-total th,.o-widget__analytic__table table .partial-total td{background-color:#f0f0f0}.o-widget__analytic__table table .grand-total th,.o-widget__analytic__table table .grand-total td{background-color:#bdb9da}.o-widget__analytic__color-picker-container{margin-top:.625rem;gap:.9375rem;flex-wrap:wrap}.o-widget__analytic__color-picker{position:relative}.o-widget__analytic__color-picker-remove{position:absolute;right:-20px;top:-10px;z-index:2;color:#263340;padding:0}.o-widget__analytic__color-picker-add{padding:.75rem;border:1px solid #263340;border-radius:50%;width:20px}.cdk-drop-list-dragging .cdk-drag,.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .o-widget__analytic__color-picker:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{box-sizing:border-box;border-radius:50%;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: PryWidgetAnalyticCssComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: PryWidgetAnalyticCssComponent, selector: "pry-widget-analytic-css", ngImport: i0, template: '', isInline: true, styles: [".o-widget__analytic{font-size:.75rem}.o-widget__analytic__table,.o-widget__analytic__table table{width:100%}.o-widget__analytic__table table th,.o-widget__analytic__table table td{text-align:center}.o-widget__analytic__table table th:first-child,.o-widget__analytic__table table td:first-child{text-align:left}.o-widget__analytic__table table .primary-header th:not(:first-child){background-color:#d7e7f7}.o-widget__analytic__table table .secondary-header th:not(:first-child){background-color:#f3f8fc}.o-widget__analytic__table table .partial-total th,.o-widget__analytic__table table .partial-total td{background-color:#f0f0f0}.o-widget__analytic__table table .grand-total th,.o-widget__analytic__table table .grand-total td{background-color:#bdb9da}.o-widget__analytic__color-picker-container{margin-top:.625rem;gap:.9375rem;flex-wrap:wrap}.o-widget__analytic__color-picker{position:relative}.o-widget__analytic__color-picker-remove{position:absolute;right:-20px;top:-10px;z-index:2;color:#263340;padding:0}.o-widget__analytic__color-picker-add{padding:.75rem;border:1px solid #263340;border-radius:50%;width:20px}.cdk-drop-list-dragging .cdk-drag,.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .o-widget__analytic__color-picker:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{box-sizing:border-box;border-radius:50%;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: PryWidgetAnalyticCssComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: PryWidgetAnalyticCssComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pry-widget-analytic-css', template: '', encapsulation: ViewEncapsulation.None, styles: [".o-widget__analytic{font-size:.75rem}.o-widget__analytic__table,.o-widget__analytic__table table{width:100%}.o-widget__analytic__table table th,.o-widget__analytic__table table td{text-align:center}.o-widget__analytic__table table th:first-child,.o-widget__analytic__table table td:first-child{text-align:left}.o-widget__analytic__table table .primary-header th:not(:first-child){background-color:#d7e7f7}.o-widget__analytic__table table .secondary-header th:not(:first-child){background-color:#f3f8fc}.o-widget__analytic__table table .partial-total th,.o-widget__analytic__table table .partial-total td{background-color:#f0f0f0}.o-widget__analytic__table table .grand-total th,.o-widget__analytic__table table .grand-total td{background-color:#bdb9da}.o-widget__analytic__color-picker-container{margin-top:.625rem;gap:.9375rem;flex-wrap:wrap}.o-widget__analytic__color-picker{position:relative}.o-widget__analytic__color-picker-remove{position:absolute;right:-20px;top:-10px;z-index:2;color:#263340;padding:0}.o-widget__analytic__color-picker-add{padding:.75rem;border:1px solid #263340;border-radius:50%;width:20px}.cdk-drop-list-dragging .cdk-drag,.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .o-widget__analytic__color-picker:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{box-sizing:border-box;border-radius:50%;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}\n"] }]
         }] });

package/esm2022/widgets/widget-analytic/widget-analytic.module.mjs

@@ -23,8 +23,8 @@ export class WidgetAnalyticModule extends BaseWidgetModule {
     getComponent() {
         return WidgetAnalyticComponent;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: WidgetAnalyticModule, deps: [{ token: i1.PryI18nService }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.3", ngImport: i0, type: WidgetAnalyticModule, declarations: [WidgetAnalyticComponent, PryWidgetAnalyticCssComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WidgetAnalyticModule, deps: [{ token: i1.PryI18nService }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.6", ngImport: i0, type: WidgetAnalyticModule, declarations: [WidgetAnalyticComponent, PryWidgetAnalyticCssComponent], imports: [CommonModule,
             FormsModule,
             OverlayModule,
             PryCoreModule,
@@ -38,7 +38,7 @@ export class WidgetAnalyticModule extends BaseWidgetModule {
             PryColorPickerModule,
             DragDropModule,
             PryDataFormatModule], exports: [WidgetAnalyticComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: WidgetAnalyticModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WidgetAnalyticModule, imports: [CommonModule,
             FormsModule,
             OverlayModule,
             PryCoreModule,
@@ -52,7 +52,7 @@ export class WidgetAnalyticModule extends BaseWidgetModule {
             DragDropModule,
             PryDataFormatModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: WidgetAnalyticModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WidgetAnalyticModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [WidgetAnalyticComponent, PryWidgetAnalyticCssComponent],

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

@@ -638,10 +638,10 @@ export class WidgetChartComponent extends DataWidgetComponent {
             resolve(this.vega.nativeElement.querySelectorAll('canvas')[0].toDataURL('image/png'));
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", 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: "14.0.0", version: "17.1.3", 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  <pry-widget-header\n    [datasourceIds]=\"(datasourceIds$ | async) ?? []\"\n    *ngIf=\"displayHeader$ | 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\n        <div class=\"m-form-label-field\">\n          <ng-container *ngIf=\"(filterDataForOptionsCopy$ | async)?.length === 0; else data\">\n            <p class=\"a-label a-label--help -error\">{{ '@pry.widget.chart.params.noParams' | i18n }}</p>\n          </ng-container>\n          <ng-template #data>\n            <div *ngIf=\"optionsCopy?.type !== MarkType.RADAR\">\n              {{ '@pry.widget.chart.params.multipleParams' | i18n }}{{ (filterDataForOptionsCopy$ | async)?.length }}\n            </div>\n          </ng-template>\n        </div>\n\n        <div *ngIf=\"optionsCopy\" 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      </div>\n\n      <ng-container *ngIf=\"optionsCopy?.type !== MarkType.RADAR && optionsCopy?.type !== MarkType.CIRCLE_PACK\">\n        <ng-container *ngIf=\"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        </ng-container>\n\n        <div\n          *ngFor=\"let variableDef of optionsCopy?.selectedVariables; let i = index\"\n          class=\"o-settings__popup__content__fields -condensed\"\n        >\n          <div class=\"m-form-label-field\" *ngIf=\"i === 1\">\n            <label class=\"a-label\" for=\"aggregations\">{{ '@pry.widget.chart.encoding.group' | i18n }}</label>\n            <pry-select\n              (ngModelChange)=\"changeAggregation($event)\"\n              *ngIf=\"i === 1\"\n              [items]=\"aggregations\"\n              [ngModel]=\"optionsCopy.aggregation\"\n              id=\"aggregations\"\n              i18nPrefix=\"@pry.widget.chart.aggregation.\"\n            ></pry-select>\n          </div>\n\n          <div class=\"m-form-label-field\" *ngIf=\"i !== 1 || optionsCopy.aggregation !== 'count'\">\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\n          <div *ngIf=\"variableDef.type === 'temporal'\" 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          <div *ngIf=\"variableDef.type === 'quantitative' && optionsCopy?.type !== 'arc'\" 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        </div>\n\n        <div class=\"o-settings__popup__content__fields -condensed\">\n          <div class=\"m-form-label-field\">\n            <pry-checkbox\n              (ngModelChange)=\"toggleSeries($event)\"\n              [ngModel]=\"!!optionsCopy.series\"\n              *ngIf=\"optionsCopy?.type !== MarkType.ARC && optionsCopy?.type !== MarkType.RADAR\"\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          </div>\n\n          <div\n            class=\"m-form-label-field\"\n            *ngIf=\"optionsCopy?.type !== MarkType.ARC && optionsCopy?.type !== MarkType.RADAR && !!optionsCopy.series\"\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          <div\n            class=\"m-form-label-field\"\n            *ngIf=\"\n              (optionsCopy?.type === MarkType.ARC || optionsCopy?.type === MarkType.RADAR || !!optionsCopy.series) &&\n              schemes\n            \"\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            <div\n              *ngFor=\"let schemeColor of scheme()\"\n              class=\"o-widget--chart-color-thumb-item\"\n              [title]=\"schemeColor\"\n              [style.background-color]=\"schemeColor\"\n            ></div>\n          </div>\n\n          <div class=\"m-form-label-field\">\n            <pry-checkbox\n              (ngModelChange)=\"toggleSeriesLegend($event)\"\n              [ngModel]=\"!!optionsCopy.legend!\"\n              *ngIf=\"optionsCopy?.type !== MarkType.RADAR || !!optionsCopy.series\"\n              >{{ '@pry.widget.chart.seriesLegend' | i18n }}\n            </pry-checkbox>\n          </div>\n\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      </ng-container>\n\n      <ng-container *ngIf=\"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\n          <ng-container *ngIf=\"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          </ng-container>\n\n          <ng-container *ngIf=\"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\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\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          </ng-container>\n          <ng-container *ngIf=\"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          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"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\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\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\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      </ng-container>\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\n        <ng-container *ngIf=\"!!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        </ng-container>\n      </div>\n    </pry-settings>\n  </pry-widget-header>\n  <ng-container *ngIf=\"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  </ng-container>\n\n  <ng-container *ngIf=\"!(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  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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"] }, { 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.PryWidgetChartCssComponent, selector: "pry-widget-chart-css" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", 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: "14.0.0", version: "18.2.6", 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  <pry-widget-header\n    [datasourceIds]=\"(datasourceIds$ | async) ?? []\"\n    *ngIf=\"displayHeader$ | 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\n        <div class=\"m-form-label-field\">\n          <ng-container *ngIf=\"(filterDataForOptionsCopy$ | async)?.length === 0; else data\">\n            <p class=\"a-label a-label--help -error\">{{ '@pry.widget.chart.params.noParams' | i18n }}</p>\n          </ng-container>\n          <ng-template #data>\n            <div *ngIf=\"optionsCopy?.type !== MarkType.RADAR\">\n              {{ '@pry.widget.chart.params.multipleParams' | i18n }}{{ (filterDataForOptionsCopy$ | async)?.length }}\n            </div>\n          </ng-template>\n        </div>\n\n        <div *ngIf=\"optionsCopy\" 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      </div>\n\n      <ng-container *ngIf=\"optionsCopy?.type !== MarkType.RADAR && optionsCopy?.type !== MarkType.CIRCLE_PACK\">\n        <ng-container *ngIf=\"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        </ng-container>\n\n        <div\n          *ngFor=\"let variableDef of optionsCopy?.selectedVariables; let i = index\"\n          class=\"o-settings__popup__content__fields -condensed\"\n        >\n          <div class=\"m-form-label-field\" *ngIf=\"i === 1\">\n            <label class=\"a-label\" for=\"aggregations\">{{ '@pry.widget.chart.encoding.group' | i18n }}</label>\n            <pry-select\n              (ngModelChange)=\"changeAggregation($event)\"\n              *ngIf=\"i === 1\"\n              [items]=\"aggregations\"\n              [ngModel]=\"optionsCopy.aggregation\"\n              id=\"aggregations\"\n              i18nPrefix=\"@pry.widget.chart.aggregation.\"\n            ></pry-select>\n          </div>\n\n          <div class=\"m-form-label-field\" *ngIf=\"i !== 1 || optionsCopy.aggregation !== 'count'\">\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\n          <div *ngIf=\"variableDef.type === 'temporal'\" 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          <div *ngIf=\"variableDef.type === 'quantitative' && optionsCopy?.type !== 'arc'\" 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        </div>\n\n        <div class=\"o-settings__popup__content__fields -condensed\">\n          <div class=\"m-form-label-field\">\n            <pry-checkbox\n              (ngModelChange)=\"toggleSeries($event)\"\n              [ngModel]=\"!!optionsCopy.series\"\n              *ngIf=\"optionsCopy?.type !== MarkType.ARC && optionsCopy?.type !== MarkType.RADAR\"\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          </div>\n\n          <div\n            class=\"m-form-label-field\"\n            *ngIf=\"optionsCopy?.type !== MarkType.ARC && optionsCopy?.type !== MarkType.RADAR && !!optionsCopy.series\"\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          <div\n            class=\"m-form-label-field\"\n            *ngIf=\"\n              (optionsCopy?.type === MarkType.ARC || optionsCopy?.type === MarkType.RADAR || !!optionsCopy.series) &&\n              schemes\n            \"\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            <div\n              *ngFor=\"let schemeColor of scheme()\"\n              class=\"o-widget--chart-color-thumb-item\"\n              [title]=\"schemeColor\"\n              [style.background-color]=\"schemeColor\"\n            ></div>\n          </div>\n\n          <div class=\"m-form-label-field\">\n            <pry-checkbox\n              (ngModelChange)=\"toggleSeriesLegend($event)\"\n              [ngModel]=\"!!optionsCopy.legend!\"\n              *ngIf=\"optionsCopy?.type !== MarkType.RADAR || !!optionsCopy.series\"\n              >{{ '@pry.widget.chart.seriesLegend' | i18n }}\n            </pry-checkbox>\n          </div>\n\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      </ng-container>\n\n      <ng-container *ngIf=\"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\n          <ng-container *ngIf=\"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          </ng-container>\n\n          <ng-container *ngIf=\"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\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\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          </ng-container>\n          <ng-container *ngIf=\"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          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"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\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\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\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      </ng-container>\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\n        <ng-container *ngIf=\"!!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        </ng-container>\n      </div>\n    </pry-settings>\n  </pry-widget-header>\n  <ng-container *ngIf=\"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  </ng-container>\n\n  <ng-container *ngIf=\"!(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  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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"] }, { 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.PryWidgetChartCssComponent, selector: "pry-widget-chart-css" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.I18nPipe, name: "i18n" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: WidgetChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WidgetChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pry-widget-chart', template: "<pry-widget-chart-css></pry-widget-chart-css>\n<div class=\"o-widget o-widget--chart\">\n  <pry-widget-header\n    [datasourceIds]=\"(datasourceIds$ | async) ?? []\"\n    *ngIf=\"displayHeader$ | 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\n        <div class=\"m-form-label-field\">\n          <ng-container *ngIf=\"(filterDataForOptionsCopy$ | async)?.length === 0; else data\">\n            <p class=\"a-label a-label--help -error\">{{ '@pry.widget.chart.params.noParams' | i18n }}</p>\n          </ng-container>\n          <ng-template #data>\n            <div *ngIf=\"optionsCopy?.type !== MarkType.RADAR\">\n              {{ '@pry.widget.chart.params.multipleParams' | i18n }}{{ (filterDataForOptionsCopy$ | async)?.length }}\n            </div>\n          </ng-template>\n        </div>\n\n        <div *ngIf=\"optionsCopy\" 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      </div>\n\n      <ng-container *ngIf=\"optionsCopy?.type !== MarkType.RADAR && optionsCopy?.type !== MarkType.CIRCLE_PACK\">\n        <ng-container *ngIf=\"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        </ng-container>\n\n        <div\n          *ngFor=\"let variableDef of optionsCopy?.selectedVariables; let i = index\"\n          class=\"o-settings__popup__content__fields -condensed\"\n        >\n          <div class=\"m-form-label-field\" *ngIf=\"i === 1\">\n            <label class=\"a-label\" for=\"aggregations\">{{ '@pry.widget.chart.encoding.group' | i18n }}</label>\n            <pry-select\n              (ngModelChange)=\"changeAggregation($event)\"\n              *ngIf=\"i === 1\"\n              [items]=\"aggregations\"\n              [ngModel]=\"optionsCopy.aggregation\"\n              id=\"aggregations\"\n              i18nPrefix=\"@pry.widget.chart.aggregation.\"\n            ></pry-select>\n          </div>\n\n          <div class=\"m-form-label-field\" *ngIf=\"i !== 1 || optionsCopy.aggregation !== 'count'\">\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\n          <div *ngIf=\"variableDef.type === 'temporal'\" 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          <div *ngIf=\"variableDef.type === 'quantitative' && optionsCopy?.type !== 'arc'\" 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        </div>\n\n        <div class=\"o-settings__popup__content__fields -condensed\">\n          <div class=\"m-form-label-field\">\n            <pry-checkbox\n              (ngModelChange)=\"toggleSeries($event)\"\n              [ngModel]=\"!!optionsCopy.series\"\n              *ngIf=\"optionsCopy?.type !== MarkType.ARC && optionsCopy?.type !== MarkType.RADAR\"\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          </div>\n\n          <div\n            class=\"m-form-label-field\"\n            *ngIf=\"optionsCopy?.type !== MarkType.ARC && optionsCopy?.type !== MarkType.RADAR && !!optionsCopy.series\"\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          <div\n            class=\"m-form-label-field\"\n            *ngIf=\"\n              (optionsCopy?.type === MarkType.ARC || optionsCopy?.type === MarkType.RADAR || !!optionsCopy.series) &&\n              schemes\n            \"\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            <div\n              *ngFor=\"let schemeColor of scheme()\"\n              class=\"o-widget--chart-color-thumb-item\"\n              [title]=\"schemeColor\"\n              [style.background-color]=\"schemeColor\"\n            ></div>\n          </div>\n\n          <div class=\"m-form-label-field\">\n            <pry-checkbox\n              (ngModelChange)=\"toggleSeriesLegend($event)\"\n              [ngModel]=\"!!optionsCopy.legend!\"\n              *ngIf=\"optionsCopy?.type !== MarkType.RADAR || !!optionsCopy.series\"\n              >{{ '@pry.widget.chart.seriesLegend' | i18n }}\n            </pry-checkbox>\n          </div>\n\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      </ng-container>\n\n      <ng-container *ngIf=\"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\n          <ng-container *ngIf=\"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          </ng-container>\n\n          <ng-container *ngIf=\"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\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\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          </ng-container>\n          <ng-container *ngIf=\"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          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"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\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\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\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      </ng-container>\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\n        <ng-container *ngIf=\"!!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        </ng-container>\n      </div>\n    </pry-settings>\n  </pry-widget-header>\n  <ng-container *ngIf=\"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  </ng-container>\n\n  <ng-container *ngIf=\"!(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  </ng-container>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i2.PryI18nService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { vega: [{

package/esm2022/widgets/widget-chart/style/css.component.mjs

@@ -1,10 +1,10 @@
 import { Component, ViewEncapsulation } from '@angular/core';
 import * as i0 from "@angular/core";
 export class PryWidgetChartCssComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: PryWidgetChartCssComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: PryWidgetChartCssComponent, selector: "pry-widget-chart-css", ngImport: i0, template: '', isInline: true, styles: [".o-widget--chart-color-thumb{display:flex;flex-direction:row;margin-bottom:20px}.o-widget--chart-color-thumb-item{flex:1 1 20px;height:20px;border-radius:4px}.o-widget--chart div.vega-embed{display:block}.o-widget--chart div.vega-embed.has-actions{display:block;height:100%;padding-right:0}.o-widget--chart div.vega-embed.has-actions>div.chart-wrapper.fit-y.fit-x{height:100%;overflow:hidden}.o-widget--chart div.vega-embed.has-actions>details>summary{right:25px}.o-widget--chart div.vega-embed.has-actions>details .vega-actions{right:16px}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: PryWidgetChartCssComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: PryWidgetChartCssComponent, selector: "pry-widget-chart-css", ngImport: i0, template: '', isInline: true, styles: [".o-widget--chart-color-thumb{display:flex;flex-direction:row;margin-bottom:20px}.o-widget--chart-color-thumb-item{flex:1 1 20px;height:20px;border-radius:4px}.o-widget--chart div.vega-embed{display:block}.o-widget--chart div.vega-embed.has-actions{display:block;height:100%;padding-right:0}.o-widget--chart div.vega-embed.has-actions>div.chart-wrapper.fit-y.fit-x{height:100%;overflow:hidden}.o-widget--chart div.vega-embed.has-actions>details>summary{right:25px}.o-widget--chart div.vega-embed.has-actions>details .vega-actions{right:16px}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: PryWidgetChartCssComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: PryWidgetChartCssComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pry-widget-chart-css', template: '', encapsulation: ViewEncapsulation.None, styles: [".o-widget--chart-color-thumb{display:flex;flex-direction:row;margin-bottom:20px}.o-widget--chart-color-thumb-item{flex:1 1 20px;height:20px;border-radius:4px}.o-widget--chart div.vega-embed{display:block}.o-widget--chart div.vega-embed.has-actions{display:block;height:100%;padding-right:0}.o-widget--chart div.vega-embed.has-actions>div.chart-wrapper.fit-y.fit-x{height:100%;overflow:hidden}.o-widget--chart div.vega-embed.has-actions>details>summary{right:25px}.o-widget--chart div.vega-embed.has-actions>details .vega-actions{right:16px}\n"] }]
         }] });

package/esm2022/widgets/widget-chart/widget-chart.module.mjs

@@ -20,8 +20,8 @@ export class WidgetChartModule extends BaseWidgetModule {
     getComponent() {
         return WidgetChartComponent;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: WidgetChartModule, deps: [{ token: i1.PryI18nService }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.3", ngImport: i0, type: WidgetChartModule, declarations: [WidgetChartComponent, PryWidgetChartCssComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WidgetChartModule, deps: [{ token: i1.PryI18nService }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.6", ngImport: i0, type: WidgetChartModule, declarations: [WidgetChartComponent, PryWidgetChartCssComponent], imports: [CommonModule,
             FormsModule,
             OverlayModule,
             PryCoreModule,
@@ -33,7 +33,7 @@ export class WidgetChartModule extends BaseWidgetModule {
             PryEditInputModule,
             PryI18nModule,
             PryRangeModule], exports: [WidgetChartComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: WidgetChartModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WidgetChartModule, imports: [CommonModule,
             FormsModule,
             OverlayModule,
             PryCoreModule,
@@ -46,7 +46,7 @@ export class WidgetChartModule extends BaseWidgetModule {
             PryI18nModule,
             PryRangeModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: WidgetChartModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WidgetChartModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [WidgetChartComponent, PryWidgetChartCssComponent],

package/esm2022/widgets/widget-detail/component/widget-detail.component.mjs

@@ -122,10 +122,10 @@ export class WidgetDetailComponent extends BaseWidgetComponent {
     isRaw(attribute) {
         return attribute.field?.type === FieldType.RAW;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: WidgetDetailComponent, deps: [{ token: i1.Store }, { token: i2.PryI18nService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: WidgetDetailComponent, selector: "pry-widget-detail", usesInheritance: true, ngImport: i0, template: "<pry-widget-detail-css></pry-widget-detail-css>\n<div class=\"o-widget o-widget--detail\">\n  <pry-widget-header\n    *ngIf=\"displayHeader$ | async\"\n    [widgetIndex]=\"widgetIndex\"\n    [manifest]=\"detailledWidgetManifest$ | async\"\n    [additionalOptions]=\"additionalOptions$ | async\"\n    [headerOptions]=\"(displayHeader$ | async) ?? {}\"\n    [displayCount]=\"false\"\n  >\n  </pry-widget-header>\n\n  <p class=\"is-empty\" *ngIf=\"!(itemAndCategories$ | async) || (itemAndCategories$ | async)?.length === 0\">\n    {{ '@pry.widget.detail.noItems' | i18n }}\n  </p>\n\n  <div class=\"o-widget--detail__content\" *ngFor=\"let couple of itemAndCategories$ | async; let itemIndex = index\">\n    <ng-container *ngIf=\"!((options$ | async)?.header === false)\">\n      <div\n        class=\"o-widget--detail__header\"\n        (contextmenu)=\"contextMenu($event, couple.item)\"\n        title=\"{{ '@pry.widget.itemId' | i18n }}: {{ couple.item.id }}\"\n      >\n        <img [height]=\"25\" [width]=\"25\" [src]=\"couple.item | translateItemToSymbol | async\" [alt]=\"couple\" />\n        <h3 class=\"o-widget--detail__header__title\">\n          {{ '@pry.widget.class' | i18n }}:\n          {{\n            couple.item.oClass\n              | translateId\n                : {\n                    type: 'class',\n                    output: 'name'\n                  }\n              | async\n          }}\n        </h3>\n        <button\n          type=\"button\"\n          class=\"a-btn a-btn--icon-only\"\n          [attr.aria-expanded]=\"!(!!panelOpened[itemIndex] && panelOpened[itemIndex].item)\"\n          [attr.aria-controls]=\"'item-' + widgetId + '-' + itemIndex\"\n          (click)=\"toggle(itemIndex)\"\n        >\n          <pry-icon *ngIf=\"!!panelOpened[itemIndex] && panelOpened[itemIndex].item\" iconSvg=\"fleche_haut\"></pry-icon>\n          <pry-icon *ngIf=\"!(!!panelOpened[itemIndex] && panelOpened[itemIndex].item)\" iconSvg=\"fleche_bas\"></pry-icon>\n        </button>\n      </div>\n      <div class=\"o-widget--detail__datas\" *ngIf=\"hasMetadata(couple.item)\">\n        <pry-metadata [item]=\"couple.item\"></pry-metadata>\n      </div>\n    </ng-container>\n\n    <div\n      *ngIf=\"!!panelOpened[itemIndex] && panelOpened[itemIndex].item\"\n      (contextmenu)=\"contextMenu($event, couple.item)\"\n      class=\"o-widget--detail__datas\"\n      [id]=\"'item-' + widgetId + '-' + itemIndex\"\n    >\n      <ng-container *ngFor=\"let category of couple.categories; let categoryIndex = index\">\n        <div class=\"o-widget--detail__category\">\n          <p>{{ '@pry.widget.detail.category' | i18n }}: {{ category.name }}</p>\n          <button\n            type=\"button\"\n            class=\"a-btn a-btn--icon-only\"\n            [attr.aria-expanded]=\"!(panelOpened[itemIndex] && panelOpened[itemIndex].categories[categoryIndex])\"\n            [attr.aria-controls]=\"'properties-' + widgetId + '-' + itemIndex + '-' + categoryIndex\"\n            (click)=\"toggle(itemIndex, categoryIndex)\"\n          >\n            <pry-icon\n              *ngIf=\"panelOpened[itemIndex] && panelOpened[itemIndex].categories[categoryIndex]\"\n              iconSvg=\"fleche_haut\"\n            >\n            </pry-icon>\n            <pry-icon\n              *ngIf=\"!(panelOpened[itemIndex] && panelOpened[itemIndex].categories[categoryIndex])\"\n              iconSvg=\"fleche_bas\"\n            >\n            </pry-icon>\n          </button>\n        </div>\n\n        <div\n          class=\"o-properties\"\n          [id]=\"'properties-' + widgetId + '-' + itemIndex + '-' + categoryIndex\"\n          *ngIf=\"panelOpened[itemIndex] && panelOpened[itemIndex].categories[categoryIndex]\"\n        >\n          <ul class=\"o-properties__list\">\n            <ng-container>\n              <ng-container *ngFor=\"let property of category.properties\">\n                <li\n                  *ngFor=\"let value of getValue(couple.item, property.attribute); let i = index; let c = count\"\n                  class=\"o-properties__list__item\"\n                >\n                  <p class=\"o-properties__list__item__label\" *ngIf=\"i === 0\">{{ property.name }}:</p>\n                  <p class=\"o-properties__list__item__value\" *ngIf=\"!isRaw(property.attribute)\">\n                    {{ value?.value | dataFormat: property.attribute.field }}\n                  </p>\n                  <p class=\"o-properties__list__item__raw\" *ngIf=\"isRaw(property.attribute)\">\n                    <pry-vizualize-raw [item]=\"couple.item\" [propertyName]=\"property.name\"></pry-vizualize-raw>\n                  </p>\n                  <ng-container *ngIf=\"hasMetadata(value)\">\n                    <pry-metadata [item]=\"value\"></pry-metadata>\n                  </ng-container>\n                </li>\n              </ng-container>\n            </ng-container>\n          </ul>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MetadataComponent, selector: "pry-metadata", inputs: ["item"] }, { kind: "component", type: i2.PryWidgetHeaderComponent, selector: "pry-widget-header", inputs: ["manifest", "openData$", "additionalOptions", "headerOptions", "displayCount", "datasourceIds", "widgetIndex"], outputs: ["manifestModified"] }, { kind: "component", type: i2.VizualizeRawComponent, selector: "pry-vizualize-raw", inputs: ["item", "propertyName", "alt"] }, { kind: "component", type: i2.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i4.PryWidgetDetailCssComponent, selector: "pry-widget-detail-css" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslateIdPipe, name: "translateId" }, { kind: "pipe", type: i2.TranslateItemToSymbolPipe, name: "translateItemToSymbol" }, { kind: "pipe", type: i2.I18nPipe, name: "i18n" }, { kind: "pipe", type: i5.DataFormatPipe, name: "dataFormat" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WidgetDetailComponent, deps: [{ token: i1.Store }, { token: i2.PryI18nService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: WidgetDetailComponent, selector: "pry-widget-detail", usesInheritance: true, ngImport: i0, template: "<pry-widget-detail-css></pry-widget-detail-css>\n<div class=\"o-widget o-widget--detail\">\n  <pry-widget-header\n    *ngIf=\"displayHeader$ | async\"\n    [widgetIndex]=\"widgetIndex\"\n    [manifest]=\"detailledWidgetManifest$ | async\"\n    [additionalOptions]=\"additionalOptions$ | async\"\n    [headerOptions]=\"(displayHeader$ | async) ?? {}\"\n    [displayCount]=\"false\"\n  >\n  </pry-widget-header>\n\n  <p class=\"is-empty\" *ngIf=\"!(itemAndCategories$ | async) || (itemAndCategories$ | async)?.length === 0\">\n    {{ '@pry.widget.detail.noItems' | i18n }}\n  </p>\n\n  <div class=\"o-widget--detail__content\" *ngFor=\"let couple of itemAndCategories$ | async; let itemIndex = index\">\n    <ng-container *ngIf=\"!((options$ | async)?.header === false)\">\n      <div\n        class=\"o-widget--detail__header\"\n        (contextmenu)=\"contextMenu($event, couple.item)\"\n        title=\"{{ '@pry.widget.itemId' | i18n }}: {{ couple.item.id }}\"\n      >\n        <img [height]=\"25\" [width]=\"25\" [src]=\"couple.item | translateItemToSymbol | async\" [alt]=\"couple\" />\n        <h3 class=\"o-widget--detail__header__title\">\n          {{ '@pry.widget.class' | i18n }}:\n          {{\n            couple.item.oClass\n              | translateId\n                : {\n                    type: 'class',\n                    output: 'name'\n                  }\n              | async\n          }}\n        </h3>\n        <button\n          type=\"button\"\n          class=\"a-btn a-btn--icon-only\"\n          [attr.aria-expanded]=\"!(!!panelOpened[itemIndex] && panelOpened[itemIndex].item)\"\n          [attr.aria-controls]=\"'item-' + widgetId + '-' + itemIndex\"\n          (click)=\"toggle(itemIndex)\"\n        >\n          <pry-icon *ngIf=\"!!panelOpened[itemIndex] && panelOpened[itemIndex].item\" iconSvg=\"fleche_haut\"></pry-icon>\n          <pry-icon *ngIf=\"!(!!panelOpened[itemIndex] && panelOpened[itemIndex].item)\" iconSvg=\"fleche_bas\"></pry-icon>\n        </button>\n      </div>\n      <div class=\"o-widget--detail__datas\" *ngIf=\"hasMetadata(couple.item)\">\n        <pry-metadata [item]=\"couple.item\"></pry-metadata>\n      </div>\n    </ng-container>\n\n    <div\n      *ngIf=\"!!panelOpened[itemIndex] && panelOpened[itemIndex].item\"\n      (contextmenu)=\"contextMenu($event, couple.item)\"\n      class=\"o-widget--detail__datas\"\n      [id]=\"'item-' + widgetId + '-' + itemIndex\"\n    >\n      <ng-container *ngFor=\"let category of couple.categories; let categoryIndex = index\">\n        <div class=\"o-widget--detail__category\">\n          <p>{{ '@pry.widget.detail.category' | i18n }}: {{ category.name }}</p>\n          <button\n            type=\"button\"\n            class=\"a-btn a-btn--icon-only\"\n            [attr.aria-expanded]=\"!(panelOpened[itemIndex] && panelOpened[itemIndex].categories[categoryIndex])\"\n            [attr.aria-controls]=\"'properties-' + widgetId + '-' + itemIndex + '-' + categoryIndex\"\n            (click)=\"toggle(itemIndex, categoryIndex)\"\n          >\n            <pry-icon\n              *ngIf=\"panelOpened[itemIndex] && panelOpened[itemIndex].categories[categoryIndex]\"\n              iconSvg=\"fleche_haut\"\n            >\n            </pry-icon>\n            <pry-icon\n              *ngIf=\"!(panelOpened[itemIndex] && panelOpened[itemIndex].categories[categoryIndex])\"\n              iconSvg=\"fleche_bas\"\n            >\n            </pry-icon>\n          </button>\n        </div>\n\n        <div\n          class=\"o-properties\"\n          [id]=\"'properties-' + widgetId + '-' + itemIndex + '-' + categoryIndex\"\n          *ngIf=\"panelOpened[itemIndex] && panelOpened[itemIndex].categories[categoryIndex]\"\n        >\n          <ul class=\"o-properties__list\">\n            <ng-container>\n              <ng-container *ngFor=\"let property of category.properties\">\n                <li\n                  *ngFor=\"let value of getValue(couple.item, property.attribute); let i = index; let c = count\"\n                  class=\"o-properties__list__item\"\n                >\n                  <p class=\"o-properties__list__item__label\" *ngIf=\"i === 0\">{{ property.name }}:</p>\n                  <p class=\"o-properties__list__item__value\" *ngIf=\"!isRaw(property.attribute)\">\n                    {{ value?.value | dataFormat: property.attribute.field }}\n                  </p>\n                  <p class=\"o-properties__list__item__raw\" *ngIf=\"isRaw(property.attribute)\">\n                    <pry-vizualize-raw [item]=\"couple.item\" [propertyName]=\"property.name\"></pry-vizualize-raw>\n                  </p>\n                  <ng-container *ngIf=\"hasMetadata(value)\">\n                    <pry-metadata [item]=\"value\"></pry-metadata>\n                  </ng-container>\n                </li>\n              </ng-container>\n            </ng-container>\n          </ul>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MetadataComponent, selector: "pry-metadata", inputs: ["item"] }, { kind: "component", type: i2.PryWidgetHeaderComponent, selector: "pry-widget-header", inputs: ["manifest", "openData$", "additionalOptions", "headerOptions", "displayCount", "datasourceIds", "widgetIndex"], outputs: ["manifestModified"] }, { kind: "component", type: i2.VizualizeRawComponent, selector: "pry-vizualize-raw", inputs: ["item", "propertyName", "alt"] }, { kind: "component", type: i2.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i4.PryWidgetDetailCssComponent, selector: "pry-widget-detail-css" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslateIdPipe, name: "translateId" }, { kind: "pipe", type: i2.TranslateItemToSymbolPipe, name: "translateItemToSymbol" }, { kind: "pipe", type: i2.I18nPipe, name: "i18n" }, { kind: "pipe", type: i5.DataFormatPipe, name: "dataFormat" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: WidgetDetailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WidgetDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pry-widget-detail', template: "<pry-widget-detail-css></pry-widget-detail-css>\n<div class=\"o-widget o-widget--detail\">\n  <pry-widget-header\n    *ngIf=\"displayHeader$ | async\"\n    [widgetIndex]=\"widgetIndex\"\n    [manifest]=\"detailledWidgetManifest$ | async\"\n    [additionalOptions]=\"additionalOptions$ | async\"\n    [headerOptions]=\"(displayHeader$ | async) ?? {}\"\n    [displayCount]=\"false\"\n  >\n  </pry-widget-header>\n\n  <p class=\"is-empty\" *ngIf=\"!(itemAndCategories$ | async) || (itemAndCategories$ | async)?.length === 0\">\n    {{ '@pry.widget.detail.noItems' | i18n }}\n  </p>\n\n  <div class=\"o-widget--detail__content\" *ngFor=\"let couple of itemAndCategories$ | async; let itemIndex = index\">\n    <ng-container *ngIf=\"!((options$ | async)?.header === false)\">\n      <div\n        class=\"o-widget--detail__header\"\n        (contextmenu)=\"contextMenu($event, couple.item)\"\n        title=\"{{ '@pry.widget.itemId' | i18n }}: {{ couple.item.id }}\"\n      >\n        <img [height]=\"25\" [width]=\"25\" [src]=\"couple.item | translateItemToSymbol | async\" [alt]=\"couple\" />\n        <h3 class=\"o-widget--detail__header__title\">\n          {{ '@pry.widget.class' | i18n }}:\n          {{\n            couple.item.oClass\n              | translateId\n                : {\n                    type: 'class',\n                    output: 'name'\n                  }\n              | async\n          }}\n        </h3>\n        <button\n          type=\"button\"\n          class=\"a-btn a-btn--icon-only\"\n          [attr.aria-expanded]=\"!(!!panelOpened[itemIndex] && panelOpened[itemIndex].item)\"\n          [attr.aria-controls]=\"'item-' + widgetId + '-' + itemIndex\"\n          (click)=\"toggle(itemIndex)\"\n        >\n          <pry-icon *ngIf=\"!!panelOpened[itemIndex] && panelOpened[itemIndex].item\" iconSvg=\"fleche_haut\"></pry-icon>\n          <pry-icon *ngIf=\"!(!!panelOpened[itemIndex] && panelOpened[itemIndex].item)\" iconSvg=\"fleche_bas\"></pry-icon>\n        </button>\n      </div>\n      <div class=\"o-widget--detail__datas\" *ngIf=\"hasMetadata(couple.item)\">\n        <pry-metadata [item]=\"couple.item\"></pry-metadata>\n      </div>\n    </ng-container>\n\n    <div\n      *ngIf=\"!!panelOpened[itemIndex] && panelOpened[itemIndex].item\"\n      (contextmenu)=\"contextMenu($event, couple.item)\"\n      class=\"o-widget--detail__datas\"\n      [id]=\"'item-' + widgetId + '-' + itemIndex\"\n    >\n      <ng-container *ngFor=\"let category of couple.categories; let categoryIndex = index\">\n        <div class=\"o-widget--detail__category\">\n          <p>{{ '@pry.widget.detail.category' | i18n }}: {{ category.name }}</p>\n          <button\n            type=\"button\"\n            class=\"a-btn a-btn--icon-only\"\n            [attr.aria-expanded]=\"!(panelOpened[itemIndex] && panelOpened[itemIndex].categories[categoryIndex])\"\n            [attr.aria-controls]=\"'properties-' + widgetId + '-' + itemIndex + '-' + categoryIndex\"\n            (click)=\"toggle(itemIndex, categoryIndex)\"\n          >\n            <pry-icon\n              *ngIf=\"panelOpened[itemIndex] && panelOpened[itemIndex].categories[categoryIndex]\"\n              iconSvg=\"fleche_haut\"\n            >\n            </pry-icon>\n            <pry-icon\n              *ngIf=\"!(panelOpened[itemIndex] && panelOpened[itemIndex].categories[categoryIndex])\"\n              iconSvg=\"fleche_bas\"\n            >\n            </pry-icon>\n          </button>\n        </div>\n\n        <div\n          class=\"o-properties\"\n          [id]=\"'properties-' + widgetId + '-' + itemIndex + '-' + categoryIndex\"\n          *ngIf=\"panelOpened[itemIndex] && panelOpened[itemIndex].categories[categoryIndex]\"\n        >\n          <ul class=\"o-properties__list\">\n            <ng-container>\n              <ng-container *ngFor=\"let property of category.properties\">\n                <li\n                  *ngFor=\"let value of getValue(couple.item, property.attribute); let i = index; let c = count\"\n                  class=\"o-properties__list__item\"\n                >\n                  <p class=\"o-properties__list__item__label\" *ngIf=\"i === 0\">{{ property.name }}:</p>\n                  <p class=\"o-properties__list__item__value\" *ngIf=\"!isRaw(property.attribute)\">\n                    {{ value?.value | dataFormat: property.attribute.field }}\n                  </p>\n                  <p class=\"o-properties__list__item__raw\" *ngIf=\"isRaw(property.attribute)\">\n                    <pry-vizualize-raw [item]=\"couple.item\" [propertyName]=\"property.name\"></pry-vizualize-raw>\n                  </p>\n                  <ng-container *ngIf=\"hasMetadata(value)\">\n                    <pry-metadata [item]=\"value\"></pry-metadata>\n                  </ng-container>\n                </li>\n              </ng-container>\n            </ng-container>\n          </ul>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i2.PryI18nService }, { type: i0.ElementRef }] });

package/esm2022/widgets/widget-detail/style/css.component.mjs

@@ -1,10 +1,10 @@
 import { Component, ViewEncapsulation } from '@angular/core';
 import * as i0 from "@angular/core";
 export class PryWidgetDetailCssComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: PryWidgetDetailCssComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: PryWidgetDetailCssComponent, selector: "pry-widget-detail-css", ngImport: i0, template: '', isInline: true, styles: [".o-widget--detail{position:relative;overflow:auto;height:100%}.o-widget--detail .is-empty,.o-widget--detail__content{padding:1.875rem}.o-widget--detail__content .o-properties__list{padding:0}.o-widget--detail__datas{padding:0 .9375rem}.o-widget--detail__header{position:relative;display:flex;align-items:center;justify-content:space-between;margin-bottom:.9375rem;padding:.625rem;border-radius:.3125rem .3125rem 0 0;cursor:pointer}.o-widget--detail__header__title{font-size:.9375rem}.o-widget--detail__category{display:flex;align-items:center;gap:.625rem;margin-top:1.25rem;padding:.625rem 0;border-bottom-width:2px;border-bottom-style:solid;font-weight:700;cursor:pointer}.o-widget--detail__header p,.o-widget--detail__category p{margin-bottom:0}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: PryWidgetDetailCssComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: PryWidgetDetailCssComponent, selector: "pry-widget-detail-css", ngImport: i0, template: '', isInline: true, styles: [".o-widget--detail{position:relative;overflow:auto;height:100%}.o-widget--detail .is-empty,.o-widget--detail__content{padding:1.875rem}.o-widget--detail__content .o-properties__list{padding:0}.o-widget--detail__datas{padding:0 .9375rem}.o-widget--detail__header{position:relative;display:flex;align-items:center;justify-content:space-between;margin-bottom:.9375rem;padding:.625rem;border-radius:.3125rem .3125rem 0 0;cursor:pointer}.o-widget--detail__header__title{font-size:.9375rem}.o-widget--detail__category{display:flex;align-items:center;gap:.625rem;margin-top:1.25rem;padding:.625rem 0;border-bottom-width:2px;border-bottom-style:solid;font-weight:700;cursor:pointer}.o-widget--detail__header p,.o-widget--detail__category p{margin-bottom:0}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: PryWidgetDetailCssComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: PryWidgetDetailCssComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pry-widget-detail-css', template: '', encapsulation: ViewEncapsulation.None, styles: [".o-widget--detail{position:relative;overflow:auto;height:100%}.o-widget--detail .is-empty,.o-widget--detail__content{padding:1.875rem}.o-widget--detail__content .o-properties__list{padding:0}.o-widget--detail__datas{padding:0 .9375rem}.o-widget--detail__header{position:relative;display:flex;align-items:center;justify-content:space-between;margin-bottom:.9375rem;padding:.625rem;border-radius:.3125rem .3125rem 0 0;cursor:pointer}.o-widget--detail__header__title{font-size:.9375rem}.o-widget--detail__category{display:flex;align-items:center;gap:.625rem;margin-top:1.25rem;padding:.625rem 0;border-bottom-width:2px;border-bottom-style:solid;font-weight:700;cursor:pointer}.o-widget--detail__header p,.o-widget--detail__category p{margin-bottom:0}\n"] }]
         }] });

package/esm2022/widgets/widget-detail/widget-detail.module.mjs

@@ -21,8 +21,8 @@ export class WidgetDetailModule extends BaseWidgetModule {
     getComponent() {
         return WidgetDetailComponent;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: WidgetDetailModule, deps: [{ token: i1.PryI18nService }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.3", ngImport: i0, type: WidgetDetailModule, declarations: [WidgetDetailComponent, PryWidgetDetailCssComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WidgetDetailModule, deps: [{ token: i1.PryI18nService }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.6", ngImport: i0, type: WidgetDetailModule, declarations: [WidgetDetailComponent, PryWidgetDetailCssComponent], imports: [CommonModule,
             FormsModule,
             OverlayModule,
             PryCoreModule,
@@ -33,7 +33,7 @@ export class WidgetDetailModule extends BaseWidgetModule {
             PryToggleModule,
             PryI18nModule,
             PryDataFormatModule], exports: [WidgetDetailComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: WidgetDetailModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WidgetDetailModule, imports: [CommonModule,
             FormsModule,
             OverlayModule,
             PryCoreModule,
@@ -45,7 +45,7 @@ export class WidgetDetailModule extends BaseWidgetModule {
             PryI18nModule,
             PryDataFormatModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: WidgetDetailModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WidgetDetailModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [WidgetDetailComponent, PryWidgetDetailCssComponent],

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

@@ -432,10 +432,10 @@ export class WidgetGraphComponent extends DataWidgetComponent {
             resolve(this.canvas.nativeElement.toDataURL('image/png'));
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: WidgetGraphComponent, deps: [{ token: i1.Store }, { token: i2.TooltipFactoryService }, { token: i2.PryI18nService }, { token: i2.SymbolService }, { token: i3.DomSanitizer }, { token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", 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  <pry-widget-header\n    [datasourceIds]=\"(datasourceIds$ | async) ?? []\"\n    *ngIf=\"displayHeader$ | 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\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  <div class=\"no-result\" *ngIf=\"(allItemsWithImages$ | async)?.length === 0\">\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  <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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.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"] }, { 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: i6.PryWidgetForceGraphCssComponent, selector: "pry-widget-force-graph-css" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.I18nPipe, name: "i18n" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WidgetGraphComponent, deps: [{ token: i1.Store }, { token: i2.TooltipFactoryService }, { token: i2.PryI18nService }, { token: i2.SymbolService }, { token: i3.DomSanitizer }, { token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", 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  <pry-widget-header\n    [datasourceIds]=\"(datasourceIds$ | async) ?? []\"\n    *ngIf=\"displayHeader$ | 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\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  <div class=\"no-result\" *ngIf=\"(allItemsWithImages$ | async)?.length === 0\">\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  <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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.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"] }, { 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: i6.PryWidgetForceGraphCssComponent, selector: "pry-widget-force-graph-css" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.I18nPipe, name: "i18n" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: WidgetGraphComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WidgetGraphComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pry-widget-graph', changeDetection: ChangeDetectionStrategy.OnPush, 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  <pry-widget-header\n    [datasourceIds]=\"(datasourceIds$ | async) ?? []\"\n    *ngIf=\"displayHeader$ | 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\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  <div class=\"no-result\" *ngIf=\"(allItemsWithImages$ | async)?.length === 0\">\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  <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" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i2.TooltipFactoryService }, { type: i2.PryI18nService }, { type: i2.SymbolService }, { type: i3.DomSanitizer }, { type: i0.ElementRef }, { type: i0.Injector }], propDecorators: { canvas: [{

package/esm2022/widgets/widget-graph/style/css.component.mjs

@@ -1,10 +1,10 @@
 import { Component, ViewEncapsulation } from '@angular/core';
 import * as i0 from "@angular/core";
 export class PryWidgetForceGraphCssComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: PryWidgetForceGraphCssComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: PryWidgetForceGraphCssComponent, selector: "pry-widget-force-graph-css", ngImport: i0, template: '', isInline: true, styles: [".o-widget--graph__canvas{position:absolute;height:100%;width:100%}.o-widget .m-btn-group.-selection-choice{transform:translate(10px,10px)}.a-tooltip--move[data-tooltip]:not([data-tooltip-position]):after{left:calc(50% + 30px)}.a-tooltip--rectangle[data-tooltip]:not([data-tooltip-position]):after{left:calc(50% + 50px)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: PryWidgetForceGraphCssComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: PryWidgetForceGraphCssComponent, selector: "pry-widget-force-graph-css", ngImport: i0, template: '', isInline: true, styles: [".o-widget--graph__canvas{position:absolute;height:100%;width:100%}.o-widget .m-btn-group.-selection-choice{transform:translate(10px,10px)}.a-tooltip--move[data-tooltip]:not([data-tooltip-position]):after{left:calc(50% + 30px)}.a-tooltip--rectangle[data-tooltip]:not([data-tooltip-position]):after{left:calc(50% + 50px)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: PryWidgetForceGraphCssComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: PryWidgetForceGraphCssComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pry-widget-force-graph-css', template: '', encapsulation: ViewEncapsulation.None, styles: [".o-widget--graph__canvas{position:absolute;height:100%;width:100%}.o-widget .m-btn-group.-selection-choice{transform:translate(10px,10px)}.a-tooltip--move[data-tooltip]:not([data-tooltip-position]):after{left:calc(50% + 30px)}.a-tooltip--rectangle[data-tooltip]:not([data-tooltip-position]):after{left:calc(50% + 50px)}\n"] }]
         }] });