npm - @provoly/dashboard - Versions diffs - 0.24.5 → 0.24.6 - Mend

@provoly/dashboard 0.24.5 → 0.24.6

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

Files changed (80) hide show

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

@@ -842,7 +842,7 @@ export class WidgetAggregatedChartComponent extends DataWidgetComponent {
         return hasSort ? VegaType.ORDINAL : abscissaVegaType;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: WidgetAggregatedChartComponent, deps: [{ token: i1.Store }, { token: i2.PryI18nService }, { token: i0.ElementRef }, { token: i2.PryAggregationService }, { token: i3.PrySchemeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: WidgetAggregatedChartComponent, selector: "pry-widget-aggregated-chart", viewQueries: [{ propertyName: "vega", first: true, predicate: ["vega"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<pry-widget-aggregated-chart-css></pry-widget-aggregated-chart-css>\n<div class=\"o-widget o-widget--chart\" *ngIf=\"optionsCopy$ | async as optionsCopy\" [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    #header\n    [headerOptions]=\"(displayHeader$ | async) ?? {}\"\n    [displayCount]=\"false\"\n    [openData$]=\"openData$\"\n  >\n    <pry-settings\n      (saveTriggered)=\"emitManifest()\"\n      (changeTitle)=\"changeWidgetTitle($event)\"\n      [headerPresent]=\"displayHeader$ | async\"\n      [widgetIndex]=\"widgetIndex\"\n      [open$]=\"open$\"\n      [header]=\"header\"\n      class=\"o-settings\"\n    >\n      <div class=\"o-settings__popup__content__fields -condensed\">\n        <pry-edit-input\n          label=\"@pry.widget.chart.title\"\n          (ngModelChange)=\"changeChartTitle($event)\"\n          [ngModel]=\"optionsCopy.graph.title\"\n        ></pry-edit-input>\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.graph.type\"\n            bindLabel=\"label\"\n            bindValue=\"id\"\n            id=\"chart_type\"\n          ></pry-select>\n        </div>\n\n        <ng-container *ngIf=\"optionsCopy.graph.type === GraphType.DONUT\">\n          <pry-range\n            [ngModel]=\"optionsCopy.graph.donutSize\"\n            (ngModelChange)=\"changeDonutSize($event)\"\n            labelTranslate=\"@pry.widget.chart.donutSize\"\n            min=\"1\"\n            max=\"500\"\n          ></pry-range>\n        </ng-container>\n\n        <div class=\"m-form-label-field\">\n          <pry-checkbox (ngModelChange)=\"toggleLegend($event)\" [ngModel]=\"!!optionsCopy.graph.legend\">\n            {{ '@pry.widget.chart.legend' | i18n }}\n          </pry-checkbox>\n        </div>\n      </div>\n\n      <ng-container *ngIf=\"!!optionsCopy.graph.type\">\n        <div class=\"o-settings__popup__content__fields -condensed\">\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\" for=\"abscissa\">{{ '@pry.widget.chart.abscissa' | i18n }}</label>\n            <pry-select\n              (ngModelChange)=\"changeAbscissa($event)\"\n              [items]=\"abscissaAttributes$ | async | prySortData : sortActive : sortDirection\"\n              [ngModel]=\"optionsCopy.abscissa.attribute\"\n              bindLabel=\"name\"\n              bindValue=\"id\"\n              id=\"abscissa\"\n            ></pry-select>\n          </div>\n\n          <pry-edit-input\n            label=\"@pry.widget.chart.dataLabel\"\n            (ngModelChange)=\"changeAbscissaLabel($event)\"\n            [ngModel]=\"optionsCopy.abscissa.label\"\n          ></pry-edit-input>\n\n          <div\n            *ngIf=\"\n              ['quantitative', 'temporal'].includes(translateToVegaType(copyAbscissaField?.type)) &&\n              optionsCopy.graph.type !== GraphType.DONUT &&\n              optionsCopy.graph.type !== GraphType.CIRCULAR\n            \"\n            class=\"m-form-label-field\"\n          >\n            <pry-checkbox (ngModelChange)=\"changeKeep0Abscissa($event)\" [ngModel]=\"optionsCopy.abscissa.keep0\"\n              >{{ '@pry.widget.chart.origin' | i18n }}\n            </pry-checkbox>\n\n            <pry-checkbox\n              (ngModelChange)=\"limitElements($event)\"\n              [ngModel]=\"!!optionsCopy.abscissa.limit\"\n              [disabled]=\"optionsCopy.graph.type === GraphType.HISTOGRAM\"\n              >{{ '@pry.widget.chart.limit' | i18n }}\n            </pry-checkbox>\n\n            <ng-container *ngIf=\"!!optionsCopy.abscissa.limit\">\n              <ng-container *ngIf=\"optionsCopy.abscissa.limit.isTimeLimit === false\">\n                <pry-range\n                  [ngModel]=\"optionsCopy.abscissa.limit.at\"\n                  (ngModelChange)=\"changeLimit($event)\"\n                  labelTranslate=\"@pry.widget.chart.limit\"\n                  min=\"1\"\n                  max=\"10\"\n                ></pry-range>\n\n                <ng-container *ngIf=\"optionsCopy.graph.type !== GraphType.HISTOGRAM\">\n                  <pry-checkbox\n                    (ngModelChange)=\"changeLimitOthers($event)\"\n                    [ngModel]=\"optionsCopy.abscissa.limit.others\"\n                    >{{ '@pry.widget.chart.others' | i18n }}\n                  </pry-checkbox>\n\n                  <label class=\"a-label\" for=\"date_limit\">{{ '@pry.widget.chart.order' | i18n }}</label>\n                  <pry-select\n                    (ngModelChange)=\"changeLimitOrder($event)\"\n                    [items]=\"[{ id: 'asc' }, { id: 'desc' }]\"\n                    [ngModel]=\"optionsCopy.abscissa.limit.order\"\n                    [i18nPrefix]=\"'@pry.widget.chart.'\"\n                    bindLabel=\"id\"\n                    bindValue=\"id\"\n                    id=\"other_limit\"\n                  ></pry-select>\n                </ng-container>\n              </ng-container>\n\n              <ng-container *ngIf=\"!!optionsCopy.abscissa.limit.isTimeLimit\">\n                <label class=\"a-label\" for=\"date_limit\">{{ '@pry.widget.chart.timeInterval' | i18n }}</label>\n                <pry-select\n                  (ngModelChange)=\"changeTimeLimit($event)\"\n                  [items]=\"[\n                    { id: 'second' },\n                    { id: 'minute' },\n                    { id: 'hour' },\n                    { id: 'day' },\n                    { id: 'week' },\n                    { id: 'month' },\n                    { id: 'quarter' },\n                    { id: 'year' }\n                  ]\"\n                  [ngModel]=\"optionsCopy.abscissa.limit.interval\"\n                  i18nPrefix=\"@pry.widget.chart.time.\"\n                  bindLabel=\"id\"\n                  bindValue=\"id\"\n                  id=\"date_limit\"\n                ></pry-select>\n              </ng-container>\n            </ng-container>\n          </div>\n        </div>\n\n        <div class=\"o-settings__popup__content__fields -condensed\">\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\" for=\"operations\">{{ '@pry.widget.chart.operation.title' | i18n }}</label>\n            <pry-select\n              (ngModelChange)=\"changeOperation($event)\"\n              [items]=\"operations$ | async\"\n              [ngModel]=\"optionsCopy.ordinate.operation\"\n              bindLabel=\"label\"\n              bindValue=\"id\"\n              id=\"operations\"\n            ></pry-select>\n          </div>\n\n          <ng-container *ngIf=\"optionsCopy.ordinate.operation !== Operation.COUNT\">\n            <div class=\"m-form-label-field\">\n              <label class=\"a-label\" for=\"ordinate\">{{ '@pry.widget.chart.ordinate' | i18n }}</label>\n              <pry-select\n                (ngModelChange)=\"changeOrdinate($event)\"\n                [items]=\"ordinateAttributes$ | async | prySortData : sortActive : sortDirection\"\n                [ngModel]=\"optionsCopy.ordinate.attribute\"\n                bindLabel=\"name\"\n                bindValue=\"id\"\n                id=\"ordinate\"\n              ></pry-select>\n            </div>\n          </ng-container>\n\n          <pry-edit-input\n            label=\"@pry.widget.chart.dataLabel\"\n            (ngModelChange)=\"changeOrdinateLabel($event)\"\n            [ngModel]=\"optionsCopy.ordinate.label\"\n          ></pry-edit-input>\n\n          <div *ngIf=\"translateToVegaType(copyOrdinateField?.type) === 'quantitative'\" class=\"m-form-label-field\">\n            <pry-checkbox (ngModelChange)=\"changeKeep0Ordinate($event)\" [ngModel]=\"optionsCopy.ordinate.keep0\"\n              >{{ '@pry.widget.chart.origin' | i18n }}\n            </pry-checkbox>\n          </div>\n        </div>\n\n        <ng-container\n          *ngIf=\"optionsCopy.graph.type !== GraphType.DONUT && optionsCopy.graph.type !== GraphType.CIRCULAR\"\n        >\n          <div class=\"o-settings__popup__content__fields -condensed\">\n            <div class=\"m-form-label-field\">\n              <pry-checkbox (ngModelChange)=\"toggleGroupBy($event)\" [ngModel]=\"!!optionsCopy.groupBy\"\n                >{{ '@pry.widget.chart.groupBy' | i18n }}\n              </pry-checkbox>\n            </div>\n\n            <ng-container *ngIf=\"!!optionsCopy.groupBy\">\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"chart_seriesAttr\">{{ '@pry.widget.chart.groupAttr' | i18n }}</label>\n                <pry-select\n                  (ngModelChange)=\"changeGroupBy($event)\"\n                  [ngModel]=\"optionsCopy.groupBy.attribute\"\n                  [items]=\"abscissaAttributes$ | async | prySortData : sortActive : sortDirection\"\n                  bindLabel=\"name\"\n                  bindValue=\"id\"\n                  id=\"chart_seriesAttr\"\n                ></pry-select>\n              </div>\n\n              <div class=\"m-form-label-field\">\n                <pry-scheme-picker\n                  (ngModelChange)=\"changeColorScheme($event)\"\n                  [ngModel]=\"optionsCopy.groupBy.color\"\n                ></pry-scheme-picker>\n              </div>\n\n              <div class=\"m-form-label-field\">\n                <pry-checkbox [ngModel]=\"optionsCopy.graph.stacked\" (ngModelChange)=\"toggleStacked($event)\">\n                  {{ '@pry.widget.chart.stacked' | i18n }}\n                </pry-checkbox>\n              </div>\n            </ng-container>\n          </div>\n          <div class=\"o-settings__popup__content__fields -condensed\">\n            <div class=\"m-form-label-field\">\n              <pry-checkbox (ngModelChange)=\"toggleLimitItems()\" [ngModel]=\"!!optionsCopy.graph.limitItems\">\n                {{ '@pry.widget.chart.limit' | i18n }}\n              </pry-checkbox>\n            </div>\n            <ng-container *ngIf=\"!!optionsCopy.graph.limitItems\">\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"chart_limitItemsValue\">{{ '@pry.widget.chart.limitMaxNb' | i18n }}</label>\n                <input\n                  type=\"number\"\n                  id=\"chart_limitItemsValue\"\n                  class=\"a-form-field\"\n                  [(ngModel)]=\"optionsCopy.graph.limitItems\"\n                />\n              </div>\n            </ng-container>\n          </div>\n          <div class=\"o-settings__popup__content__fields -condensed\">\n            <div class=\"m-form-label-field\">\n              <pry-checkbox (ngModelChange)=\"toggleSort($event)\" [ngModel]=\"!!optionsCopy.graph.sort\"\n                >{{ '@pry.widget.chart.sort.title' | i18n }}\n              </pry-checkbox>\n            </div>\n            <ng-container *ngIf=\"!!optionsCopy.graph.sort\">\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"chart_sortValue\">{{ '@pry.widget.chart.sort.attribute' | i18n }}</label>\n                <pry-select\n                  (ngModelChange)=\"changeSortValue($event)\"\n                  [ngModel]=\"optionsCopy.graph.sort.value\"\n                  [items]=\"sortValues$ | async\"\n                  bindValue=\"value\"\n                  bindLabel=\"label\"\n                  id=\"chart_sortValue\"\n                ></pry-select>\n              </div>\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"chart_sortDirection\">{{ '@pry.widget.chart.sort.direction' | i18n }}</label>\n                <pry-select\n                  (ngModelChange)=\"changeSortDirection($event)\"\n                  [ngModel]=\"optionsCopy.graph.sort.direction\"\n                  [items]=\"sortDirections\"\n                  bindValue=\"value\"\n                  bindLabel=\"label\"\n                  id=\"chart_sortDirection\"\n                ></pry-select>\n              </div>\n            </ng-container>\n          </div>\n        </ng-container>\n\n        <ng-container\n          *ngIf=\"optionsCopy.graph.type === GraphType.DONUT || optionsCopy.graph.type === GraphType.CIRCULAR\"\n        >\n          <pry-scheme-picker\n            (ngModelChange)=\"changeCircleColorScheme($event)\"\n            [ngModel]=\"optionsCopy.circleColorScheme\"\n          ></pry-scheme-picker>\n        </ng-container>\n\n        <ng-container\n          *ngIf=\"\n            optionsCopy.graph.type !== GraphType.DONUT &&\n            optionsCopy.graph.type !== GraphType.CIRCULAR &&\n            !optionsCopy.groupBy\n          \"\n        >\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\" for=\"chart_baseColor\">{{ '@pry.widget.chart.color' | i18n }}</label>\n            <pry-color-picker\n              (ngModelChange)=\"changeBaseColor($event)\"\n              [ngModel]=\"optionsCopy.baseColor\"\n              id=\"chart_baseColor\"\n            ></pry-color-picker>\n            <ng-template #templateOption let-item=\"item\">\n              <div class=\"aligned-option\">\n                <div class=\"a-chip -md\" [style.background-color]=\"item\">{{ item }}</div>\n              </div>\n            </ng-template>\n          </div>\n        </ng-container>\n      </ng-container>\n    </pry-settings>\n  </pry-widget-header>\n\n  <ng-container *ngIf=\"(isChartValid$ | async) && !(noData$ | async) && !(noAggregationData$ | async)\">\n    <div #vega></div>\n  </ng-container>\n\n  <ng-container *ngIf=\"noData$ | async\">\n    <div class=\"o-widget__choose-parameters\">\n      <img\n        class=\"no-result__search\"\n        src=\"../../../assets/svgs/pry_recherche_pas_de_resultat.svg\"\n        alt=\"{{ '@pry.widget.chart.noData' | i18n }}\"\n        aria-hidden=\"true\"\n      />\n      <span class=\"no-result__text\">{{ '@pry.widget.chart.noData' | i18n }}</span>\n      <button type=\"button\" (click)=\"openData()\" class=\"a-btn a-btn--primary\">\n        <pry-icon [height]=\"20\" [width]=\"20\" iconSvg=\"control\"></pry-icon>\n        <span>{{ '@pry.widget.tooltip.readSearch' | i18n }}</span>\n      </button>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!(noData$ | async) && (noAggregationData$ | async)\">\n    <div class=\"o-widget__choose-parameters\">\n      <img\n        class=\"no-result__search\"\n        src=\"../../../assets/svgs/pry_recherche_pas_de_resultat.svg\"\n        alt=\"{{ '@pry.widget.chart.aggNoResult' | i18n }}\"\n        aria-hidden=\"true\"\n      />\n      <span class=\"no-result__text\">{{ '@pry.widget.chart.aggNoResult' | i18n }}</span>\n      <button type=\"button\" (click)=\"openSettings()\" class=\"a-btn a-btn--primary\">\n        <pry-icon [height]=\"20\" [width]=\"20\" iconSvg=\"control\"></pry-icon>\n        <span>{{ '@pry.widget.settings.title' | i18n }}</span>\n      </button>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!(noData$ | async) && !(noAggregationData$ | async) && !(isChartValid$ | async)\">\n    <div class=\"o-widget__choose-parameters\">\n      <img\n        class=\"no-result__search\"\n        src=\"../../../assets/svgs/pry_recherche_pas_de_resultat.svg\"\n        alt=\"{{ '@pry.widget.chart.chooseParameters' | i18n }}\"\n        aria-hidden=\"true\"\n      />\n      <span class=\"no-result__text\">{{ '@pry.widget.chart.chooseParameters' | i18n }}</span>\n      <button type=\"button\" (click)=\"openSettings()\" class=\"a-btn a-btn--primary\">\n        <pry-icon [height]=\"20\" [width]=\"20\" iconSvg=\"control\"></pry-icon>\n        <span>{{ '@pry.widget.settings.title' | i18n }}</span>\n      </button>\n    </div>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.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: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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", "readonly", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared"] }, { kind: "component", type: i2.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i6.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle"] }, { kind: "component", type: i2.PryEditInputComponent, selector: "pry-edit-input", inputs: ["label"] }, { kind: "component", type: i2.PryRangeComponent, selector: "pry-range", inputs: ["min", "max", "step", "disabled", "labelTranslate"] }, { kind: "component", type: i7.PryColorPickerComponent, selector: "pry-color-picker" }, { kind: "component", type: i3.PrySchemePickerComponent, selector: "pry-scheme-picker" }, { kind: "component", type: i8.PryWidgetAggregatedChartCssComponent, selector: "pry-widget-aggregated-chart-css" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.I18nPipe, name: "i18n" }, { kind: "pipe", type: i2.PrySortDataPipe, name: "prySortData" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: WidgetAggregatedChartComponent, selector: "pry-widget-aggregated-chart", viewQueries: [{ propertyName: "vega", first: true, predicate: ["vega"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<pry-widget-aggregated-chart-css></pry-widget-aggregated-chart-css>\n<div class=\"o-widget o-widget--chart\" *ngIf=\"optionsCopy$ | async as optionsCopy\" [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    #header\n    [headerOptions]=\"(displayHeader$ | async) ?? {}\"\n    [displayCount]=\"false\"\n    [openData$]=\"openData$\"\n  >\n    <pry-settings\n      (saveTriggered)=\"emitManifest()\"\n      (changeTitle)=\"changeWidgetTitle($event)\"\n      [headerPresent]=\"displayHeader$ | async\"\n      [widgetIndex]=\"widgetIndex\"\n      [open$]=\"open$\"\n      [header]=\"header\"\n      class=\"o-settings\"\n    >\n      <div class=\"o-settings__popup__content__fields -condensed\">\n        <pry-edit-input\n          label=\"@pry.widget.chart.title\"\n          (ngModelChange)=\"changeChartTitle($event)\"\n          [ngModel]=\"optionsCopy.graph.title\"\n        ></pry-edit-input>\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.graph.type\"\n            bindLabel=\"label\"\n            bindValue=\"id\"\n            id=\"chart_type\"\n          ></pry-select>\n        </div>\n\n        <ng-container *ngIf=\"optionsCopy.graph.type === GraphType.DONUT\">\n          <pry-range\n            [ngModel]=\"optionsCopy.graph.donutSize\"\n            (ngModelChange)=\"changeDonutSize($event)\"\n            labelTranslate=\"@pry.widget.chart.donutSize\"\n            min=\"1\"\n            max=\"500\"\n          ></pry-range>\n        </ng-container>\n\n        <div class=\"m-form-label-field\">\n          <pry-checkbox (ngModelChange)=\"toggleLegend($event)\" [ngModel]=\"!!optionsCopy.graph.legend\">\n            {{ '@pry.widget.chart.legend' | i18n }}\n          </pry-checkbox>\n        </div>\n      </div>\n\n      <ng-container *ngIf=\"!!optionsCopy.graph.type\">\n        <div class=\"o-settings__popup__content__fields -condensed\">\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\" for=\"abscissa\">{{ '@pry.widget.chart.abscissa' | i18n }}</label>\n            <pry-select\n              (ngModelChange)=\"changeAbscissa($event)\"\n              [items]=\"abscissaAttributes$ | async | prySortData : sortActive : sortDirection\"\n              [ngModel]=\"optionsCopy.abscissa.attribute\"\n              bindLabel=\"name\"\n              bindValue=\"id\"\n              id=\"abscissa\"\n            ></pry-select>\n          </div>\n\n          <pry-edit-input\n            label=\"@pry.widget.chart.dataLabel\"\n            (ngModelChange)=\"changeAbscissaLabel($event)\"\n            [ngModel]=\"optionsCopy.abscissa.label\"\n          ></pry-edit-input>\n\n          <div\n            *ngIf=\"\n              ['quantitative', 'temporal'].includes(translateToVegaType(copyAbscissaField?.type)) &&\n              optionsCopy.graph.type !== GraphType.DONUT &&\n              optionsCopy.graph.type !== GraphType.CIRCULAR\n            \"\n            class=\"m-form-label-field\"\n          >\n            <pry-checkbox (ngModelChange)=\"changeKeep0Abscissa($event)\" [ngModel]=\"optionsCopy.abscissa.keep0\"\n              >{{ '@pry.widget.chart.origin' | i18n }}\n            </pry-checkbox>\n\n            <pry-checkbox\n              (ngModelChange)=\"limitElements($event)\"\n              [ngModel]=\"!!optionsCopy.abscissa.limit\"\n              [disabled]=\"optionsCopy.graph.type === GraphType.HISTOGRAM\"\n              >{{ '@pry.widget.chart.limit' | i18n }}\n            </pry-checkbox>\n\n            <ng-container *ngIf=\"!!optionsCopy.abscissa.limit\">\n              <ng-container *ngIf=\"optionsCopy.abscissa.limit.isTimeLimit === false\">\n                <pry-range\n                  [ngModel]=\"optionsCopy.abscissa.limit.at\"\n                  (ngModelChange)=\"changeLimit($event)\"\n                  labelTranslate=\"@pry.widget.chart.limit\"\n                  min=\"1\"\n                  max=\"10\"\n                ></pry-range>\n\n                <ng-container *ngIf=\"optionsCopy.graph.type !== GraphType.HISTOGRAM\">\n                  <pry-checkbox\n                    (ngModelChange)=\"changeLimitOthers($event)\"\n                    [ngModel]=\"optionsCopy.abscissa.limit.others\"\n                    >{{ '@pry.widget.chart.others' | i18n }}\n                  </pry-checkbox>\n\n                  <label class=\"a-label\" for=\"date_limit\">{{ '@pry.widget.chart.order' | i18n }}</label>\n                  <pry-select\n                    (ngModelChange)=\"changeLimitOrder($event)\"\n                    [items]=\"[{ id: 'asc' }, { id: 'desc' }]\"\n                    [ngModel]=\"optionsCopy.abscissa.limit.order\"\n                    [i18nPrefix]=\"'@pry.widget.chart.'\"\n                    bindLabel=\"id\"\n                    bindValue=\"id\"\n                    id=\"other_limit\"\n                  ></pry-select>\n                </ng-container>\n              </ng-container>\n\n              <ng-container *ngIf=\"!!optionsCopy.abscissa.limit.isTimeLimit\">\n                <label class=\"a-label\" for=\"date_limit\">{{ '@pry.widget.chart.timeInterval' | i18n }}</label>\n                <pry-select\n                  (ngModelChange)=\"changeTimeLimit($event)\"\n                  [items]=\"[\n                    { id: 'second' },\n                    { id: 'minute' },\n                    { id: 'hour' },\n                    { id: 'day' },\n                    { id: 'week' },\n                    { id: 'month' },\n                    { id: 'quarter' },\n                    { id: 'year' }\n                  ]\"\n                  [ngModel]=\"optionsCopy.abscissa.limit.interval\"\n                  i18nPrefix=\"@pry.widget.chart.time.\"\n                  bindLabel=\"id\"\n                  bindValue=\"id\"\n                  id=\"date_limit\"\n                ></pry-select>\n              </ng-container>\n            </ng-container>\n          </div>\n        </div>\n\n        <div class=\"o-settings__popup__content__fields -condensed\">\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\" for=\"operations\">{{ '@pry.widget.chart.operation.title' | i18n }}</label>\n            <pry-select\n              (ngModelChange)=\"changeOperation($event)\"\n              [items]=\"operations$ | async\"\n              [ngModel]=\"optionsCopy.ordinate.operation\"\n              bindLabel=\"label\"\n              bindValue=\"id\"\n              id=\"operations\"\n            ></pry-select>\n          </div>\n\n          <ng-container *ngIf=\"optionsCopy.ordinate.operation !== Operation.COUNT\">\n            <div class=\"m-form-label-field\">\n              <label class=\"a-label\" for=\"ordinate\">{{ '@pry.widget.chart.ordinate' | i18n }}</label>\n              <pry-select\n                (ngModelChange)=\"changeOrdinate($event)\"\n                [items]=\"ordinateAttributes$ | async | prySortData : sortActive : sortDirection\"\n                [ngModel]=\"optionsCopy.ordinate.attribute\"\n                bindLabel=\"name\"\n                bindValue=\"id\"\n                id=\"ordinate\"\n              ></pry-select>\n            </div>\n          </ng-container>\n\n          <pry-edit-input\n            label=\"@pry.widget.chart.dataLabel\"\n            (ngModelChange)=\"changeOrdinateLabel($event)\"\n            [ngModel]=\"optionsCopy.ordinate.label\"\n          ></pry-edit-input>\n\n          <div *ngIf=\"translateToVegaType(copyOrdinateField?.type) === 'quantitative'\" class=\"m-form-label-field\">\n            <pry-checkbox (ngModelChange)=\"changeKeep0Ordinate($event)\" [ngModel]=\"optionsCopy.ordinate.keep0\"\n              >{{ '@pry.widget.chart.origin' | i18n }}\n            </pry-checkbox>\n          </div>\n        </div>\n\n        <ng-container\n          *ngIf=\"optionsCopy.graph.type !== GraphType.DONUT && optionsCopy.graph.type !== GraphType.CIRCULAR\"\n        >\n          <div class=\"o-settings__popup__content__fields -condensed\">\n            <div class=\"m-form-label-field\">\n              <pry-checkbox (ngModelChange)=\"toggleGroupBy($event)\" [ngModel]=\"!!optionsCopy.groupBy\"\n                >{{ '@pry.widget.chart.groupBy' | i18n }}\n              </pry-checkbox>\n            </div>\n\n            <ng-container *ngIf=\"!!optionsCopy.groupBy\">\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"chart_seriesAttr\">{{ '@pry.widget.chart.groupAttr' | i18n }}</label>\n                <pry-select\n                  (ngModelChange)=\"changeGroupBy($event)\"\n                  [ngModel]=\"optionsCopy.groupBy.attribute\"\n                  [items]=\"abscissaAttributes$ | async | prySortData : sortActive : sortDirection\"\n                  bindLabel=\"name\"\n                  bindValue=\"id\"\n                  id=\"chart_seriesAttr\"\n                ></pry-select>\n              </div>\n\n              <div class=\"m-form-label-field\">\n                <pry-scheme-picker\n                  (ngModelChange)=\"changeColorScheme($event)\"\n                  [ngModel]=\"optionsCopy.groupBy.color\"\n                ></pry-scheme-picker>\n              </div>\n\n              <div class=\"m-form-label-field\">\n                <pry-checkbox [ngModel]=\"optionsCopy.graph.stacked\" (ngModelChange)=\"toggleStacked($event)\">\n                  {{ '@pry.widget.chart.stacked' | i18n }}\n                </pry-checkbox>\n              </div>\n            </ng-container>\n          </div>\n          <div class=\"o-settings__popup__content__fields -condensed\">\n            <div class=\"m-form-label-field\">\n              <pry-checkbox (ngModelChange)=\"toggleLimitItems()\" [ngModel]=\"!!optionsCopy.graph.limitItems\">\n                {{ '@pry.widget.chart.limit' | i18n }}\n              </pry-checkbox>\n            </div>\n            <ng-container *ngIf=\"!!optionsCopy.graph.limitItems\">\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"chart_limitItemsValue\">{{ '@pry.widget.chart.limitMaxNb' | i18n }}</label>\n                <input\n                  type=\"number\"\n                  id=\"chart_limitItemsValue\"\n                  class=\"a-form-field\"\n                  [(ngModel)]=\"optionsCopy.graph.limitItems\"\n                />\n              </div>\n            </ng-container>\n          </div>\n          <div class=\"o-settings__popup__content__fields -condensed\">\n            <div class=\"m-form-label-field\">\n              <pry-checkbox (ngModelChange)=\"toggleSort($event)\" [ngModel]=\"!!optionsCopy.graph.sort\"\n                >{{ '@pry.widget.chart.sort.title' | i18n }}\n              </pry-checkbox>\n            </div>\n            <ng-container *ngIf=\"!!optionsCopy.graph.sort\">\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"chart_sortValue\">{{ '@pry.widget.chart.sort.attribute' | i18n }}</label>\n                <pry-select\n                  (ngModelChange)=\"changeSortValue($event)\"\n                  [ngModel]=\"optionsCopy.graph.sort.value\"\n                  [items]=\"sortValues$ | async\"\n                  bindValue=\"value\"\n                  bindLabel=\"label\"\n                  id=\"chart_sortValue\"\n                ></pry-select>\n              </div>\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"chart_sortDirection\">{{ '@pry.widget.chart.sort.direction' | i18n }}</label>\n                <pry-select\n                  (ngModelChange)=\"changeSortDirection($event)\"\n                  [ngModel]=\"optionsCopy.graph.sort.direction\"\n                  [items]=\"sortDirections\"\n                  bindValue=\"value\"\n                  bindLabel=\"label\"\n                  id=\"chart_sortDirection\"\n                ></pry-select>\n              </div>\n            </ng-container>\n          </div>\n        </ng-container>\n\n        <ng-container\n          *ngIf=\"optionsCopy.graph.type === GraphType.DONUT || optionsCopy.graph.type === GraphType.CIRCULAR\"\n        >\n          <pry-scheme-picker\n            (ngModelChange)=\"changeCircleColorScheme($event)\"\n            [ngModel]=\"optionsCopy.circleColorScheme\"\n          ></pry-scheme-picker>\n        </ng-container>\n\n        <ng-container\n          *ngIf=\"\n            optionsCopy.graph.type !== GraphType.DONUT &&\n            optionsCopy.graph.type !== GraphType.CIRCULAR &&\n            !optionsCopy.groupBy\n          \"\n        >\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\" for=\"chart_baseColor\">{{ '@pry.widget.chart.color' | i18n }}</label>\n            <pry-color-picker\n              (ngModelChange)=\"changeBaseColor($event)\"\n              [ngModel]=\"optionsCopy.baseColor\"\n              id=\"chart_baseColor\"\n            ></pry-color-picker>\n            <ng-template #templateOption let-item=\"item\">\n              <div class=\"aligned-option\">\n                <div class=\"a-chip -md\" [style.background-color]=\"item\">{{ item }}</div>\n              </div>\n            </ng-template>\n          </div>\n        </ng-container>\n      </ng-container>\n    </pry-settings>\n  </pry-widget-header>\n\n  <ng-container *ngIf=\"(isChartValid$ | async) && !(noData$ | async) && !(noAggregationData$ | async)\">\n    <div #vega></div>\n  </ng-container>\n\n  <ng-container *ngIf=\"noData$ | async\">\n    <div class=\"o-widget__choose-parameters\">\n      <img\n        class=\"no-result__search\"\n        src=\"../../../assets/svgs/pry_recherche_pas_de_resultat.svg\"\n        alt=\"{{ '@pry.widget.chart.noData' | i18n }}\"\n        aria-hidden=\"true\"\n      />\n      <span class=\"no-result__text\">{{ '@pry.widget.chart.noData' | i18n }}</span>\n      <button type=\"button\" (click)=\"openData()\" class=\"a-btn a-btn--primary\">\n        <pry-icon [height]=\"20\" [width]=\"20\" iconSvg=\"control\"></pry-icon>\n        <span>{{ '@pry.widget.tooltip.readSearch' | i18n }}</span>\n      </button>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!(noData$ | async) && (noAggregationData$ | async)\">\n    <div class=\"o-widget__choose-parameters\">\n      <img\n        class=\"no-result__search\"\n        src=\"../../../assets/svgs/pry_recherche_pas_de_resultat.svg\"\n        alt=\"{{ '@pry.widget.chart.aggNoResult' | i18n }}\"\n        aria-hidden=\"true\"\n      />\n      <span class=\"no-result__text\">{{ '@pry.widget.chart.aggNoResult' | i18n }}</span>\n      <button type=\"button\" (click)=\"openSettings()\" class=\"a-btn a-btn--primary\">\n        <pry-icon [height]=\"20\" [width]=\"20\" iconSvg=\"control\"></pry-icon>\n        <span>{{ '@pry.widget.settings.title' | i18n }}</span>\n      </button>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!(noData$ | async) && !(noAggregationData$ | async) && !(isChartValid$ | async)\">\n    <div class=\"o-widget__choose-parameters\">\n      <img\n        class=\"no-result__search\"\n        src=\"../../../assets/svgs/pry_recherche_pas_de_resultat.svg\"\n        alt=\"{{ '@pry.widget.chart.chooseParameters' | i18n }}\"\n        aria-hidden=\"true\"\n      />\n      <span class=\"no-result__text\">{{ '@pry.widget.chart.chooseParameters' | i18n }}</span>\n      <button type=\"button\" (click)=\"openSettings()\" class=\"a-btn a-btn--primary\">\n        <pry-icon [height]=\"20\" [width]=\"20\" iconSvg=\"control\"></pry-icon>\n        <span>{{ '@pry.widget.settings.title' | i18n }}</span>\n      </button>\n    </div>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.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: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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", "readonly", "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: i6.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle"] }, { kind: "component", type: i2.PryEditInputComponent, selector: "pry-edit-input", inputs: ["label"] }, { kind: "component", type: i2.PryRangeComponent, selector: "pry-range", inputs: ["min", "max", "step", "disabled", "labelTranslate"] }, { kind: "component", type: i7.PryColorPickerComponent, selector: "pry-color-picker" }, { kind: "component", type: i3.PrySchemePickerComponent, selector: "pry-scheme-picker" }, { kind: "component", type: i8.PryWidgetAggregatedChartCssComponent, selector: "pry-widget-aggregated-chart-css" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.I18nPipe, name: "i18n" }, { kind: "pipe", type: i2.PrySortDataPipe, name: "prySortData" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: WidgetAggregatedChartComponent, decorators: [{
             type: Component,

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

@@ -639,7 +639,7 @@ export class WidgetChartComponent extends DataWidgetComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "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", "readonly", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared"] }, { 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"] }, { kind: "component", type: i2.PryEditInputComponent, selector: "pry-edit-input", inputs: ["label"] }, { 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.ɵ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", "readonly", "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"] }, { kind: "component", type: i2.PryEditInputComponent, selector: "pry-edit-input", inputs: ["label"] }, { 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: [{
             type: Component,

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

@@ -433,7 +433,7 @@ export class WidgetGraphComponent extends DataWidgetComponent {
         });
     }
     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", "readonly", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared"] }, { 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.ɵ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", "readonly", "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: [{
             type: Component,

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

@@ -1091,7 +1091,7 @@ export class WidgetMapComponent extends DataWidgetComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: WidgetMapComponent, deps: [{ token: i1.Store }, { token: i2.PryI18nService }, { token: i2.TooltipFactoryService }, { token: i2.SymbolService }, { token: i0.Injector }, { token: i3.WidgetMapLayerService }, { token: i2.PryAggregationService }, { token: i0.ElementRef }, { token: PRY_GEOAUTH_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: WidgetMapComponent, selector: "pry-widget-map", viewQueries: [{ propertyName: "mapRef", first: true, predicate: ["mapRef"], descendants: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true }, { propertyName: "popupContent", first: true, predicate: ["popupContent"], descendants: true, read: ViewContainerRef }, { propertyName: "exportTypeTemplate", first: true, predicate: ["exportTypeTemplate"], descendants: true, read: TemplateRef }, { propertyName: "sliderElement", first: true, predicate: ["sliderElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<pry-widget-map-css></pry-widget-map-css>\n<div class=\"o-widget o-widget--map\">\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=\"map_style\">{{ '@pry.widget.map.style' | i18n }}</label>\n        <pry-select\n          (ngModelChange)=\"changeStyle($event)\"\n          [items]=\"styles$ | async\"\n          [ngModel]=\"optionsCopy.style\"\n          bindLabel=\"label\"\n          bindValue=\"identifier\"\n          id=\"map_style\"\n        ></pry-select>\n      </div>\n\n      <div class=\"m-form-label-field\" *ngIf=\"optionsCopy.style === STYLE_FROM_URL\">\n        <label class=\"a-label\" for=\"style_URL\">{{ '@pry.widget.map.styleUrl' | i18n }}</label>\n        <input\n          id=\"style_URL\"\n          class=\"a-form-field\"\n          type=\"text\"\n          (input)=\"changeStyleURL($event)\"\n          [value]=\"optionsCopy.styleURL ?? ''\"\n        />\n      </div>\n\n      <pry-checkbox (ngModelChange)=\"changeSingleLayer($event)\" [ngModel]=\"optionsCopy.singleLayer ?? false\">\n        {{ '@pry.widget.map.singleLayer' | i18n }}\n      </pry-checkbox>\n\n      <pry-checkbox (ngModelChange)=\"changeAutoLayer($event)\" [ngModel]=\"optionsCopy.automaticLayers ?? false\">\n        {{ '@pry.widget.map.autoLayer' | i18n }}\n      </pry-checkbox>\n\n      <pry-checkbox (ngModelChange)=\"changeAttributions($event)\" [ngModel]=\"optionsCopy.attributions ?? false\">\n        {{ '@pry.widget.map.attributions' | i18n }}\n      </pry-checkbox>\n\n      <pry-checkbox (ngModelChange)=\"changeSlideOption($event)\" [ngModel]=\"hasSlideLayer$ | async\">\n        {{ '@pry.widget.map.slide.global' | i18n }}\n      </pry-checkbox>\n\n      <div class=\"o-settings__popup__content__actions -has-separator\">\n        <button type=\"button\" (click)=\"addLayer()\" class=\"a-btn a-btn--icon-text -link-like\">\n          <pry-icon iconSvg=\"library_add\"></pry-icon>\n          {{ '@pry.widget.map.addLayer' | i18n }}\n        </button>\n      </div>\n\n      <div *ngFor=\"let layer of optionsCopy?.layers; let i = index\" class=\"o-settings__popup__content__fields\">\n        <div class=\"o-settings__popup__content__fields__head\">\n          <h3 class=\"a-h3 settings-layer-title__title\">{{ '@pry.widget.map.layer' | i18n : { index: i + 1 } }}</h3>\n          <div class=\"m-btn-group\">\n            <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"invertLayers(i, i - 1)\" *ngIf=\"i > 0\">\n              <pry-icon iconSvg=\"fleche_haut\"></pry-icon>\n              <span class=\"u-visually-hidden\">{{ '@pry.action.moveUp' | i18n }}</span>\n            </button>\n            <button\n              type=\"button\"\n              class=\"a-btn a-btn--icon-only\"\n              (click)=\"invertLayers(i, i + 1)\"\n              *ngIf=\"i < (optionsCopy?.layers?.length ?? 0) - 1\"\n            >\n              <pry-icon iconSvg=\"fleche_bas\"></pry-icon>\n              <span class=\"u-visually-hidden\">{{ '@pry.action.moveDown' | i18n }}</span>\n            </button>\n          </div>\n        </div>\n\n        <div class=\"o-settings__popup__content__fields__content\">\n          <pry-range\n            [ngModel]=\"(layer?.opacity ?? 100) + ''\"\n            (ngModelChange)=\"changeOpacity(layer, $event)\"\n            labelTranslate=\"@pry.widget.map.opacity\"\n            min=\"0\"\n            max=\"100\"\n          ></pry-range>\n\n          <fieldset>\n            <legend class=\"u-visually-hidden\">{{ '@pry.widget.map.layerOptions' | i18n : { index: i + 1 } }}</legend>\n            <div class=\"m-form-label-field\">\n              <label class=\"a-label\" for=\"map_layerTitle\">{{ '@pry.widget.map.layerTitle' | i18n }}</label>\n              <input\n                id=\"map_layerTitle\"\n                class=\"a-form-field\"\n                type=\"text\"\n                (input)=\"changeTitle($event, layer)\"\n                [value]=\"layer.title ?? ''\"\n              />\n            </div>\n\n            <div class=\"m-form-label-field\" *ngIf=\"!['geoserver', 'auto'].includes(layer.type)\">\n              <label class=\"a-label\" for=\"map_layerType\">{{ '@pry.widget.map.layerType.title' | i18n }}</label>\n              <pry-select\n                (ngModelChange)=\"changeLayerType($event, i)\"\n                [items]=\"layerTypes\"\n                [ngModel]=\"layer.type\"\n                i18nPrefix=\"@pry.widget.map.layerType.\"\n                id=\"map_layerType\"\n              ></pry-select>\n            </div>\n\n            <div class=\"m-form-label-field\" *ngIf=\"['geoserver', 'wms'].includes(layer.type)\">\n              <ng-container *ngIf=\"getAsWmsType(layer) as wmslayer\">\n                <label class=\"a-label\" for=\"map_layerStyle\">{{ '@pry.widget.map.layerStyle' | i18n }}</label>\n                <pry-select\n                  (ngModelChange)=\"changeLayerStyle($event, layer)\"\n                  [items]=\"layerStyleOptions(layer)\"\n                  [ngModel]=\"getStyle(layer)\"\n                  bindLabel=\"label\"\n                  bindValue=\"id\"\n                  id=\"map_layerStyle\"\n                ></pry-select>\n              </ng-container>\n            </div>\n\n            <pry-checkbox (ngModelChange)=\"changeFit($event, layer)\" [ngModel]=\"layer.fit\">\n              {{ '@pry.widget.map.fit' | i18n }}\n            </pry-checkbox>\n\n            <div\n              *ngIf=\"\n                layer.type !== 'relation' &&\n                layer.type !== 'wms' &&\n                layer.type !== 'wmts' &&\n                layer.type !== 'geoserver' &&\n                layer.type !== 'featurelayer' &&\n                layer.type !== 'vectortile' &&\n                layer.type !== 'rastertile' &&\n                layer.type !== 'auto'\n              \"\n              class=\"m-form-label-field\"\n            >\n              <label class=\"a-label\" for=\"map_classes\">{{ '@pry.widget.map.classes' | i18n }}</label>\n              <pry-select\n                (ngModelChange)=\"changeClasses($event, layer)\"\n                [items]=\"usedClasses$ | async\"\n                [multiple]=\"true\"\n                [ngModel]=\"layer.classes\"\n                bindLabel=\"name\"\n                bindValue=\"id\"\n                id=\"map_classes\"\n              ></pry-select>\n            </div>\n          </fieldset>\n        </div>\n\n        <fieldset\n          *ngIf=\"\n            layer.type !== 'relation' &&\n            layer.type !== 'wms' &&\n            layer.type !== 'wmts' &&\n            layer.type !== 'geoserver' &&\n            layer.type !== 'featurelayer' &&\n            layer.type !== 'vectortile' &&\n            layer.type !== 'rastertile'\n          \"\n        >\n          <legend class=\"u-visually-hidden\">{{ '@pry.widget.map.locationAttr' | i18n }}</legend>\n          <ng-container\n            *ngIf=\"\n              layer\n                | geometryFieldsFor : { resultSet: resultSet$, classes: layer.classes, type: layer.type }\n                | async as fields\n            \"\n          >\n            <div\n              *ngIf=\"\n                ['heatmap', 'bubble', 'marker', 'point', 'line', 'polygon', 'multi-line', 'multi-polygon'].indexOf(\n                  layer.type\n                ) >= 0\n              \"\n            >\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"map_locationAttribute_both\">{{\n                  '@pry.widget.map.locationAttribute.both' | i18n\n                }}</label>\n                <pry-select\n                  (ngModelChange)=\"changeLocationAttributes($event, layer)\"\n                  [items]=\"fields\"\n                  [ngModel]=\"layer.attribute\"\n                  bindLabel=\"name\"\n                  bindValue=\"name\"\n                  id=\"map_locationAttribute_both\"\n                ></pry-select>\n              </div>\n            </div>\n\n            <div *ngIf=\"['heatmap', 'bubble'].indexOf(layer.type) >= 0\">\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"map_intensityAttribute\">{{\n                  '@pry.widget.map.intensityAttribute' | i18n\n                }}</label>\n                <pry-select\n                  (ngModelChange)=\"changeIntensityAttributes($event, layer)\"\n                  [items]=\"fields\"\n                  [ngModel]=\"layerHasIntensity(layer).intensityAttribute\"\n                  bindLabel=\"name\"\n                  bindValue=\"name\"\n                  id=\"map_intensityAttribute\"\n                ></pry-select>\n              </div>\n            </div>\n          </ng-container>\n        </fieldset>\n\n        <fieldset\n          *ngIf=\"\n            layer.type === 'wms' ||\n            layer.type === 'geoserver' ||\n            layer.type === 'wmts' ||\n            layer.type === 'featurelayer' ||\n            layer.type === 'vectortile' ||\n            layer.type === 'rastertile'\n          \"\n        >\n          <ng-container *ngIf=\"layer.type !== 'geoserver'\">\n            <div class=\"m-form-label-field\">\n              <label class=\"a-label\" for=\"map_wms_url\">{{ '@pry.widget.map.wms.url' | i18n }}</label>\n              <input\n                id=\"map_wms_url\"\n                class=\"a-form-field\"\n                type=\"text\"\n                (input)=\"changeUrl($event, layer)\"\n                [value]=\"layer.url\"\n              />\n            </div>\n          </ng-container>\n\n          <div class=\"m-form-label-field\" *ngIf=\"layer.type === 'wms' || layer.type === 'wmts'\">\n            <label class=\"a-label\" for=\"map_wms_paramLayer\">{{ '@pry.widget.map.wms.paramLayer' | i18n }}</label>\n            <input\n              id=\"map_wms_paramLayer\"\n              class=\"a-form-field\"\n              type=\"text\"\n              (input)=\"changeParamLayer($event, layer)\"\n              [value]=\"layer.paramLayer\"\n            />\n          </div>\n\n          <div class=\"m-form-label-field\" *ngIf=\"layer.type === 'wmts'\">\n            <label class=\"a-label\" for=\"map_wms_matrixSet\">{{ '@pry.widget.map.wms.matrixSet' | i18n }}</label>\n            <input\n              id=\"map_wms_matrixSet\"\n              class=\"a-form-field\"\n              type=\"text\"\n              (input)=\"changeMatrixSet($event, layer)\"\n              [value]=\"layer.matrixSet\"\n            />\n          </div>\n\n          <div class=\"m-form-label-field\" *ngIf=\"layer.type === 'wmts'\">\n            <label class=\"a-label\" for=\"map_wms_style\">{{ '@pry.widget.map.wms.style' | i18n }}</label>\n            <input\n              id=\"map_wms_style\"\n              class=\"a-form-field\"\n              type=\"text\"\n              (input)=\"changeParamStyle($event, layer)\"\n              [value]=\"layer.style\"\n            />\n          </div>\n\n          <div class=\"m-form-label-field\" *ngIf=\"layer.type === 'wms' || layer.type === 'geoserver'\">\n            <legend class=\"u-visually-hidden\">{{ '@pry.widget.map.tile' | i18n }}</legend>\n            <pry-checkbox (ngModelChange)=\"changeParamTiled($event, layer)\" [ngModel]=\"layer?.paramTiled ?? false\">\n              {{ '@pry.widget.map.wms.paramTiled' | i18n }}\n            </pry-checkbox>\n          </div>\n        </fieldset>\n\n        <fieldset *ngIf=\"layer.type === 'marker'\">\n          <legend class=\"u-visually-hidden\">{{ '@pry.widget.map.clustering' | i18n }}</legend>\n          <div class=\"m-form-label-field\">\n            <pry-checkbox (ngModelChange)=\"changeClustered(layer, $event)\" [ngModel]=\"layer.clustered\">\n              {{ '@pry.widget.map.clustered' | i18n }}\n            </pry-checkbox>\n          </div>\n          <div *ngIf=\"layer.clustered\">\n            <pry-range\n              [ngModel]=\"layer.clustered\"\n              (ngModelChange)=\"changeClusterDistance(layer, $event)\"\n              labelTranslate=\"@pry.widget.map.clusterDistance\"\n              min=\"1\"\n              max=\"500\"\n            ></pry-range>\n          </div>\n        </fieldset>\n\n        <div class=\"m-form-label-field\" *ngIf=\"optionsCopy.slide ?? false\">\n          <label class=\"a-label\" for=\"slide_select\">{{ '@pry.widget.map.slide.title' | i18n }}</label>\n          <pry-select\n            (ngModelChange)=\"changeSlide($event, layer)\"\n            [items]=\"slides\"\n            [ngModel]=\"layer.slide ?? 'all'\"\n            bindLabel=\"label\"\n            bindValue=\"id\"\n            id=\"slide_select\"\n          ></pry-select>\n        </div>\n\n        <div class=\"m-form-label-field\" *ngIf=\"optionsCopy.attributions\">\n          <label class=\"a-label\" for=\"attribution\">{{ '@pry.widget.map.attribution' | i18n }}</label>\n          <input\n            id=\"attribution\"\n            class=\"a-form-field\"\n            type=\"text\"\n            (input)=\"changeAttribution($event, layer)\"\n            [value]=\"layer.attribution ? layer.attribution : ''\"\n          />\n        </div>\n\n        <button\n          type=\"button\"\n          (click)=\"deleteLayer(i, layer)\"\n          class=\"a-btn a-btn--icon-text -link-like\"\n          *ngIf=\"layer.type !== 'geoserver'\"\n          data-func=\"delete\"\n        >\n          <pry-icon iconSvg=\"delete\" [width]=\"19\" [height]=\"19\"></pry-icon>\n          <span>{{ '@pry.widget.map.deleteLayer' | i18n }}</span>\n        </button>\n      </div>\n    </pry-settings>\n  </pry-widget-header>\n\n  <div\n    class=\"m-btn-group -map-selection-choice -vertical\"\n    [class.-with-header]=\"displayHeader$ | async\"\n    [class.-closed]=\"!(actionMenuOpen$ | async)\"\n  >\n    <div class=\"-vertical\">\n      <ng-container *ngFor=\"let action of basicActions$ | async\">\n        <button\n          type=\"button\"\n          class=\"a-btn a-btn--icon-only a-tooltip a-tooltip--{{ action }}\"\n          (click)=\"changeSelection(action)\"\n          [attr.data-tooltip]=\"'@pry.widget.map.' + action | i18n\"\n          data-tooltip-position=\"right\"\n        >\n          <pry-icon [iconSvg]=\"action\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.widget.map.' + action | i18n }}</span>\n        </button>\n      </ng-container>\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--icon-only a-tooltip -map-toggle\"\n      id=\"open_menu\"\n      [attr.aria-expanded]=\"actionMenuOpen$ | async\"\n      aria-controls=\"export_type\"\n      aria-haspopup=\"menu\"\n      (click)=\"toggleMenu()\"\n    >\n      <pry-icon\n        [iconSvg]=\"(actionMenuOpen$ | async) ? 'chevron_top' : 'chevron_bottom'\"\n        [width]=\"12\"\n        [height]=\"24\"\n      ></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.map.open' | i18n }}</span>\n    </button>\n  </div>\n\n  <div class=\"m-btn-group -map-selection-choice -map-export\" [class.-with-header]=\"displayHeader$ | async\">\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--icon-only a-tooltip\"\n      id=\"export_card\"\n      aria-expanded=\"false\"\n      aria-controls=\"export_type\"\n      aria-haspopup=\"menu\"\n      [attr.data-tooltip]=\"'@pry.widget.map.export' | i18n\"\n      data-tooltip-position=\"right\"\n      (click)=\"export()\"\n    >\n      <pry-icon iconSvg=\"file_download\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.map.export' | i18n }}</span>\n    </button>\n  </div>\n\n  <div\n    class=\"ol-control m-layer-switcher m-map-layer-action\"\n    *ngIf=\"((layers$ | async)?.length ?? 0) > 0\"\n    [style.top.px]=\"layersTop$ | async\"\n  >\n    <button\n      class=\"m-map-layer-action__toggle\"\n      [class.a-tooltip]=\"!this.layersTabOpen\"\n      [class.-tooltip-no-wrap]=\"!this.layersTabOpen\"\n      (click)=\"toggleLayersWindow()\"\n      [attr.data-tooltip]=\"'@pry.widget.map.selectLayers' | i18n\"\n      data-tooltip-position=\"left\"\n    >\n      <pry-icon iconSvg=\"layers\" [width]=\"18\" [height]=\"18\"></pry-icon>\n    </button>\n    <div class=\"m-map-layer-action__container\" [class.-hidden]=\"!layersTabOpen\">\n      <span class=\"a-h4\">{{ '@pry.widget.map.layersTitle' | i18n }}</span>\n      <ng-container *ngFor=\"let layer of mapLayers; let index = index\">\n        <div class=\"m-map-layer-action__title m-layer-switcher__title\" [class.-hidden]=\"!layersTabOpen\">\n          <pry-checkbox\n            *ngIf=\"!(options$ | async)?.singleLayer; else singleLayer\"\n            [ngModel]=\"layer.getVisible()\"\n            (change)=\"changeVisibility(layer)\"\n          ></pry-checkbox>\n          <ng-template #singleLayer>\n            <input\n              type=\"radio\"\n              name=\"layer\"\n              [id]=\"'radio-layer-' + layer.get('title').split(' ')[0]\"\n              [ngModel]=\"layerVisibleIdx\"\n              [value]=\"index\"\n              (change)=\"changeVisibility(layer)\"\n            />\n          </ng-template>\n          {{ layer.get('title') }}\n        </div>\n      </ng-container>\n    </div>\n  </div>\n\n  <div\n    class=\"ol-control m-map-layer-action m-layer-legend\"\n    *ngIf=\"((legendLayers$ | async)?.length ?? 0) > 0\"\n    [style.top.px]=\"legendTop$ | async\"\n  >\n    <button\n      class=\"m-map-layer-action__toggle\"\n      [class.a-tooltip]=\"!this.legendTabOpen\"\n      [class.-tooltip-no-wrap]=\"!this.legendTabOpen\"\n      (click)=\"toggleLegendWindow()\"\n      [attr.data-tooltip]=\"'@pry.widget.map.legends' | i18n\"\n      data-tooltip-position=\"left\"\n    >\n      <pry-icon iconSvg=\"legend\" [width]=\"18\" [height]=\"15\"></pry-icon>\n    </button>\n    <div class=\"m-map-layer-action__container\" [class.-hidden]=\"!legendTabOpen\">\n      <span class=\"a-h4\">{{ '@pry.widget.map.legendsTitle' | i18n }}</span>\n      <ng-container *ngFor=\"let geoLayer of legendLayers$ | async; let index = index\">\n        <div class=\"m-map-layer-action__title m-layer-legend__title\" (click)=\"toggleLegend(index)\">\n          <pry-icon\n            *ngIf=\"isLayerRendered(geoLayer) && !!geoLayer.title\"\n            class=\"m-layer-legend__dropdown-icon\"\n            [iconSvg]=\"legendTab === index ? 'chevron_top' : 'chevron_bottom'\"\n            [width]=\"12\"\n            [height]=\"12\"\n          ></pry-icon>\n          {{ geoLayer.title }}\n          <pry-icon\n            *ngIf=\"!isLayerRendered(geoLayer)\"\n            class=\"a-tooltip\"\n            [attr.data-tooltip]=\"'@pry.widget.map.layerLoadError' | i18n\"\n            [iconSvg]=\"'close'\"\n            [width]=\"22\"\n            [height]=\"22\"\n          ></pry-icon>\n        </div>\n        <div\n          class=\"m-map-layer-action__image\"\n          [class.-hidden]=\"!legendTabOpen || legendTab !== index || !isLayerRendered(geoLayer)\"\n          [style.max-height.px]=\"legendHeight$ | async\"\n        >\n          <ng-container *ngIf=\"geoLayer | legendUrl : { capabilities: (wmsCapabilities$ | async) } as url\">\n            <img\n              [src]=\"url | getSecuredImage | async\"\n              [alt]=\"'@pry.widget.map.legend' | i18n : { layer: geoLayer.title }\"\n              (error)=\"imageNotProvided[index] = true\"\n            />\n          </ng-container>\n          <ng-container *ngIf=\"!(geoLayer | legendUrl : { capabilities: (wmsCapabilities$ | async) })\">\n            <p class=\"m-map-layer-action__error\">{{ '@pry.widget.map.legendNotProvided' | i18n }}</p>\n          </ng-container>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n\n  <div class=\"m-map-slide-legend -left\" *ngIf=\"leftSlideLayers.length > 0\" [style.top.px]=\"legendTop$ | async\">\n    <span class=\"m-map-slide-legend__title\">{{ '@pry.widget.map.slideTitle' | i18n }}:</span>\n    <div *ngFor=\"let layer of leftSlideLayers\">\n      {{ layer.get('title') }}\n    </div>\n  </div>\n\n  <div class=\"m-map-slide-legend -right\" *ngIf=\"rightSlideLayers.length > 0\" [style.top.px]=\"legendTop$ | async\">\n    <span class=\"m-map-slide-legend__title\">{{ '@pry.widget.map.slideTitle' | i18n }}:</span>\n    <div *ngFor=\"let layer of rightSlideLayers\">\n      {{ layer.get('title') }}\n    </div>\n  </div>\n\n  <div [style.height.px]=\"height$ | async\" class=\"o-map-wrapper\">\n    <div class=\"o-map\">\n      <div #mapRef id=\"map\"></div>\n      <input\n        type=\"range\"\n        min=\"0\"\n        max=\"100\"\n        step=\"0.01\"\n        value=\"50\"\n        #sliderElement\n        class=\"o-map-slider\"\n        [class.-hidden]=\"!(hasSlideLayer$ | async)\"\n        (input)=\"triggerLayerRender()\"\n      />\n    </div>\n  </div>\n\n  <div #popup class=\"m-tooltip m-tooltip--popup\" [hidden]=\"true\" role=\"tooltip\">\n    <div class=\"m-tooltip--popup__header\">\n      <p>{{ this.tooltipIndex + 1 }} / {{ this.tooltipNumber }}</p>\n      <button class=\"a-btn a-btn--primary a-btn--icon-only\" (click)=\"tooltipMove(-1)\" [disabled]=\"!tooltipCanMove(-1)\">\n        <pry-icon iconSvg=\"arrow_back\"></pry-icon>\n      </button>\n      <button class=\"a-btn a-btn--primary a-btn--icon-only\" (click)=\"tooltipMove(1)\" [disabled]=\"!tooltipCanMove(1)\">\n        <pry-icon iconSvg=\"arrow_right\"></pry-icon>\n      </button>\n    </div>\n    <div class=\"m-tooltip--popup__container\">\n      <ng-container #popupContent></ng-container>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.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: i5.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { 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", "readonly", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared"] }, { kind: "component", type: i2.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i6.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle"] }, { kind: "component", type: i2.PryRangeComponent, selector: "pry-range", inputs: ["min", "max", "step", "disabled", "labelTranslate"] }, { kind: "component", type: i7.PryWidgetMapCssComponent, selector: "pry-widget-map-css" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.GetSecuredImagePipe, name: "getSecuredImage" }, { kind: "pipe", type: i2.I18nPipe, name: "i18n" }, { kind: "pipe", type: i8.GeometryFieldsForPipe, name: "geometryFieldsFor" }, { kind: "pipe", type: i9.WidgetMapLegendUrlPipe, name: "legendUrl" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: WidgetMapComponent, selector: "pry-widget-map", viewQueries: [{ propertyName: "mapRef", first: true, predicate: ["mapRef"], descendants: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true }, { propertyName: "popupContent", first: true, predicate: ["popupContent"], descendants: true, read: ViewContainerRef }, { propertyName: "exportTypeTemplate", first: true, predicate: ["exportTypeTemplate"], descendants: true, read: TemplateRef }, { propertyName: "sliderElement", first: true, predicate: ["sliderElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<pry-widget-map-css></pry-widget-map-css>\n<div class=\"o-widget o-widget--map\">\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=\"map_style\">{{ '@pry.widget.map.style' | i18n }}</label>\n        <pry-select\n          (ngModelChange)=\"changeStyle($event)\"\n          [items]=\"styles$ | async\"\n          [ngModel]=\"optionsCopy.style\"\n          bindLabel=\"label\"\n          bindValue=\"identifier\"\n          id=\"map_style\"\n        ></pry-select>\n      </div>\n\n      <div class=\"m-form-label-field\" *ngIf=\"optionsCopy.style === STYLE_FROM_URL\">\n        <label class=\"a-label\" for=\"style_URL\">{{ '@pry.widget.map.styleUrl' | i18n }}</label>\n        <input\n          id=\"style_URL\"\n          class=\"a-form-field\"\n          type=\"text\"\n          (input)=\"changeStyleURL($event)\"\n          [value]=\"optionsCopy.styleURL ?? ''\"\n        />\n      </div>\n\n      <pry-checkbox (ngModelChange)=\"changeSingleLayer($event)\" [ngModel]=\"optionsCopy.singleLayer ?? false\">\n        {{ '@pry.widget.map.singleLayer' | i18n }}\n      </pry-checkbox>\n\n      <pry-checkbox (ngModelChange)=\"changeAutoLayer($event)\" [ngModel]=\"optionsCopy.automaticLayers ?? false\">\n        {{ '@pry.widget.map.autoLayer' | i18n }}\n      </pry-checkbox>\n\n      <pry-checkbox (ngModelChange)=\"changeAttributions($event)\" [ngModel]=\"optionsCopy.attributions ?? false\">\n        {{ '@pry.widget.map.attributions' | i18n }}\n      </pry-checkbox>\n\n      <pry-checkbox (ngModelChange)=\"changeSlideOption($event)\" [ngModel]=\"hasSlideLayer$ | async\">\n        {{ '@pry.widget.map.slide.global' | i18n }}\n      </pry-checkbox>\n\n      <div class=\"o-settings__popup__content__actions -has-separator\">\n        <button type=\"button\" (click)=\"addLayer()\" class=\"a-btn a-btn--icon-text -link-like\">\n          <pry-icon iconSvg=\"library_add\"></pry-icon>\n          {{ '@pry.widget.map.addLayer' | i18n }}\n        </button>\n      </div>\n\n      <div *ngFor=\"let layer of optionsCopy?.layers; let i = index\" class=\"o-settings__popup__content__fields\">\n        <div class=\"o-settings__popup__content__fields__head\">\n          <h3 class=\"a-h3 settings-layer-title__title\">{{ '@pry.widget.map.layer' | i18n : { index: i + 1 } }}</h3>\n          <div class=\"m-btn-group\">\n            <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"invertLayers(i, i - 1)\" *ngIf=\"i > 0\">\n              <pry-icon iconSvg=\"fleche_haut\"></pry-icon>\n              <span class=\"u-visually-hidden\">{{ '@pry.action.moveUp' | i18n }}</span>\n            </button>\n            <button\n              type=\"button\"\n              class=\"a-btn a-btn--icon-only\"\n              (click)=\"invertLayers(i, i + 1)\"\n              *ngIf=\"i < (optionsCopy?.layers?.length ?? 0) - 1\"\n            >\n              <pry-icon iconSvg=\"fleche_bas\"></pry-icon>\n              <span class=\"u-visually-hidden\">{{ '@pry.action.moveDown' | i18n }}</span>\n            </button>\n          </div>\n        </div>\n\n        <div class=\"o-settings__popup__content__fields__content\">\n          <pry-range\n            [ngModel]=\"(layer?.opacity ?? 100) + ''\"\n            (ngModelChange)=\"changeOpacity(layer, $event)\"\n            labelTranslate=\"@pry.widget.map.opacity\"\n            min=\"0\"\n            max=\"100\"\n          ></pry-range>\n\n          <fieldset>\n            <legend class=\"u-visually-hidden\">{{ '@pry.widget.map.layerOptions' | i18n : { index: i + 1 } }}</legend>\n            <div class=\"m-form-label-field\">\n              <label class=\"a-label\" for=\"map_layerTitle\">{{ '@pry.widget.map.layerTitle' | i18n }}</label>\n              <input\n                id=\"map_layerTitle\"\n                class=\"a-form-field\"\n                type=\"text\"\n                (input)=\"changeTitle($event, layer)\"\n                [value]=\"layer.title ?? ''\"\n              />\n            </div>\n\n            <div class=\"m-form-label-field\" *ngIf=\"!['geoserver', 'auto'].includes(layer.type)\">\n              <label class=\"a-label\" for=\"map_layerType\">{{ '@pry.widget.map.layerType.title' | i18n }}</label>\n              <pry-select\n                (ngModelChange)=\"changeLayerType($event, i)\"\n                [items]=\"layerTypes\"\n                [ngModel]=\"layer.type\"\n                i18nPrefix=\"@pry.widget.map.layerType.\"\n                id=\"map_layerType\"\n              ></pry-select>\n            </div>\n\n            <div class=\"m-form-label-field\" *ngIf=\"['geoserver', 'wms'].includes(layer.type)\">\n              <ng-container *ngIf=\"getAsWmsType(layer) as wmslayer\">\n                <label class=\"a-label\" for=\"map_layerStyle\">{{ '@pry.widget.map.layerStyle' | i18n }}</label>\n                <pry-select\n                  (ngModelChange)=\"changeLayerStyle($event, layer)\"\n                  [items]=\"layerStyleOptions(layer)\"\n                  [ngModel]=\"getStyle(layer)\"\n                  bindLabel=\"label\"\n                  bindValue=\"id\"\n                  id=\"map_layerStyle\"\n                ></pry-select>\n              </ng-container>\n            </div>\n\n            <pry-checkbox (ngModelChange)=\"changeFit($event, layer)\" [ngModel]=\"layer.fit\">\n              {{ '@pry.widget.map.fit' | i18n }}\n            </pry-checkbox>\n\n            <div\n              *ngIf=\"\n                layer.type !== 'relation' &&\n                layer.type !== 'wms' &&\n                layer.type !== 'wmts' &&\n                layer.type !== 'geoserver' &&\n                layer.type !== 'featurelayer' &&\n                layer.type !== 'vectortile' &&\n                layer.type !== 'rastertile' &&\n                layer.type !== 'auto'\n              \"\n              class=\"m-form-label-field\"\n            >\n              <label class=\"a-label\" for=\"map_classes\">{{ '@pry.widget.map.classes' | i18n }}</label>\n              <pry-select\n                (ngModelChange)=\"changeClasses($event, layer)\"\n                [items]=\"usedClasses$ | async\"\n                [multiple]=\"true\"\n                [ngModel]=\"layer.classes\"\n                bindLabel=\"name\"\n                bindValue=\"id\"\n                id=\"map_classes\"\n              ></pry-select>\n            </div>\n          </fieldset>\n        </div>\n\n        <fieldset\n          *ngIf=\"\n            layer.type !== 'relation' &&\n            layer.type !== 'wms' &&\n            layer.type !== 'wmts' &&\n            layer.type !== 'geoserver' &&\n            layer.type !== 'featurelayer' &&\n            layer.type !== 'vectortile' &&\n            layer.type !== 'rastertile'\n          \"\n        >\n          <legend class=\"u-visually-hidden\">{{ '@pry.widget.map.locationAttr' | i18n }}</legend>\n          <ng-container\n            *ngIf=\"\n              layer\n                | geometryFieldsFor : { resultSet: resultSet$, classes: layer.classes, type: layer.type }\n                | async as fields\n            \"\n          >\n            <div\n              *ngIf=\"\n                ['heatmap', 'bubble', 'marker', 'point', 'line', 'polygon', 'multi-line', 'multi-polygon'].indexOf(\n                  layer.type\n                ) >= 0\n              \"\n            >\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"map_locationAttribute_both\">{{\n                  '@pry.widget.map.locationAttribute.both' | i18n\n                }}</label>\n                <pry-select\n                  (ngModelChange)=\"changeLocationAttributes($event, layer)\"\n                  [items]=\"fields\"\n                  [ngModel]=\"layer.attribute\"\n                  bindLabel=\"name\"\n                  bindValue=\"name\"\n                  id=\"map_locationAttribute_both\"\n                ></pry-select>\n              </div>\n            </div>\n\n            <div *ngIf=\"['heatmap', 'bubble'].indexOf(layer.type) >= 0\">\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"map_intensityAttribute\">{{\n                  '@pry.widget.map.intensityAttribute' | i18n\n                }}</label>\n                <pry-select\n                  (ngModelChange)=\"changeIntensityAttributes($event, layer)\"\n                  [items]=\"fields\"\n                  [ngModel]=\"layerHasIntensity(layer).intensityAttribute\"\n                  bindLabel=\"name\"\n                  bindValue=\"name\"\n                  id=\"map_intensityAttribute\"\n                ></pry-select>\n              </div>\n            </div>\n          </ng-container>\n        </fieldset>\n\n        <fieldset\n          *ngIf=\"\n            layer.type === 'wms' ||\n            layer.type === 'geoserver' ||\n            layer.type === 'wmts' ||\n            layer.type === 'featurelayer' ||\n            layer.type === 'vectortile' ||\n            layer.type === 'rastertile'\n          \"\n        >\n          <ng-container *ngIf=\"layer.type !== 'geoserver'\">\n            <div class=\"m-form-label-field\">\n              <label class=\"a-label\" for=\"map_wms_url\">{{ '@pry.widget.map.wms.url' | i18n }}</label>\n              <input\n                id=\"map_wms_url\"\n                class=\"a-form-field\"\n                type=\"text\"\n                (input)=\"changeUrl($event, layer)\"\n                [value]=\"layer.url\"\n              />\n            </div>\n          </ng-container>\n\n          <div class=\"m-form-label-field\" *ngIf=\"layer.type === 'wms' || layer.type === 'wmts'\">\n            <label class=\"a-label\" for=\"map_wms_paramLayer\">{{ '@pry.widget.map.wms.paramLayer' | i18n }}</label>\n            <input\n              id=\"map_wms_paramLayer\"\n              class=\"a-form-field\"\n              type=\"text\"\n              (input)=\"changeParamLayer($event, layer)\"\n              [value]=\"layer.paramLayer\"\n            />\n          </div>\n\n          <div class=\"m-form-label-field\" *ngIf=\"layer.type === 'wmts'\">\n            <label class=\"a-label\" for=\"map_wms_matrixSet\">{{ '@pry.widget.map.wms.matrixSet' | i18n }}</label>\n            <input\n              id=\"map_wms_matrixSet\"\n              class=\"a-form-field\"\n              type=\"text\"\n              (input)=\"changeMatrixSet($event, layer)\"\n              [value]=\"layer.matrixSet\"\n            />\n          </div>\n\n          <div class=\"m-form-label-field\" *ngIf=\"layer.type === 'wmts'\">\n            <label class=\"a-label\" for=\"map_wms_style\">{{ '@pry.widget.map.wms.style' | i18n }}</label>\n            <input\n              id=\"map_wms_style\"\n              class=\"a-form-field\"\n              type=\"text\"\n              (input)=\"changeParamStyle($event, layer)\"\n              [value]=\"layer.style\"\n            />\n          </div>\n\n          <div class=\"m-form-label-field\" *ngIf=\"layer.type === 'wms' || layer.type === 'geoserver'\">\n            <legend class=\"u-visually-hidden\">{{ '@pry.widget.map.tile' | i18n }}</legend>\n            <pry-checkbox (ngModelChange)=\"changeParamTiled($event, layer)\" [ngModel]=\"layer?.paramTiled ?? false\">\n              {{ '@pry.widget.map.wms.paramTiled' | i18n }}\n            </pry-checkbox>\n          </div>\n        </fieldset>\n\n        <fieldset *ngIf=\"layer.type === 'marker'\">\n          <legend class=\"u-visually-hidden\">{{ '@pry.widget.map.clustering' | i18n }}</legend>\n          <div class=\"m-form-label-field\">\n            <pry-checkbox (ngModelChange)=\"changeClustered(layer, $event)\" [ngModel]=\"layer.clustered\">\n              {{ '@pry.widget.map.clustered' | i18n }}\n            </pry-checkbox>\n          </div>\n          <div *ngIf=\"layer.clustered\">\n            <pry-range\n              [ngModel]=\"layer.clustered\"\n              (ngModelChange)=\"changeClusterDistance(layer, $event)\"\n              labelTranslate=\"@pry.widget.map.clusterDistance\"\n              min=\"1\"\n              max=\"500\"\n            ></pry-range>\n          </div>\n        </fieldset>\n\n        <div class=\"m-form-label-field\" *ngIf=\"optionsCopy.slide ?? false\">\n          <label class=\"a-label\" for=\"slide_select\">{{ '@pry.widget.map.slide.title' | i18n }}</label>\n          <pry-select\n            (ngModelChange)=\"changeSlide($event, layer)\"\n            [items]=\"slides\"\n            [ngModel]=\"layer.slide ?? 'all'\"\n            bindLabel=\"label\"\n            bindValue=\"id\"\n            id=\"slide_select\"\n          ></pry-select>\n        </div>\n\n        <div class=\"m-form-label-field\" *ngIf=\"optionsCopy.attributions\">\n          <label class=\"a-label\" for=\"attribution\">{{ '@pry.widget.map.attribution' | i18n }}</label>\n          <input\n            id=\"attribution\"\n            class=\"a-form-field\"\n            type=\"text\"\n            (input)=\"changeAttribution($event, layer)\"\n            [value]=\"layer.attribution ? layer.attribution : ''\"\n          />\n        </div>\n\n        <button\n          type=\"button\"\n          (click)=\"deleteLayer(i, layer)\"\n          class=\"a-btn a-btn--icon-text -link-like\"\n          *ngIf=\"layer.type !== 'geoserver'\"\n          data-func=\"delete\"\n        >\n          <pry-icon iconSvg=\"delete\" [width]=\"19\" [height]=\"19\"></pry-icon>\n          <span>{{ '@pry.widget.map.deleteLayer' | i18n }}</span>\n        </button>\n      </div>\n    </pry-settings>\n  </pry-widget-header>\n\n  <div\n    class=\"m-btn-group -map-selection-choice -vertical\"\n    [class.-with-header]=\"displayHeader$ | async\"\n    [class.-closed]=\"!(actionMenuOpen$ | async)\"\n  >\n    <div class=\"-vertical\">\n      <ng-container *ngFor=\"let action of basicActions$ | async\">\n        <button\n          type=\"button\"\n          class=\"a-btn a-btn--icon-only a-tooltip a-tooltip--{{ action }}\"\n          (click)=\"changeSelection(action)\"\n          [attr.data-tooltip]=\"'@pry.widget.map.' + action | i18n\"\n          data-tooltip-position=\"right\"\n        >\n          <pry-icon [iconSvg]=\"action\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.widget.map.' + action | i18n }}</span>\n        </button>\n      </ng-container>\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--icon-only a-tooltip -map-toggle\"\n      id=\"open_menu\"\n      [attr.aria-expanded]=\"actionMenuOpen$ | async\"\n      aria-controls=\"export_type\"\n      aria-haspopup=\"menu\"\n      (click)=\"toggleMenu()\"\n    >\n      <pry-icon\n        [iconSvg]=\"(actionMenuOpen$ | async) ? 'chevron_top' : 'chevron_bottom'\"\n        [width]=\"12\"\n        [height]=\"24\"\n      ></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.map.open' | i18n }}</span>\n    </button>\n  </div>\n\n  <div class=\"m-btn-group -map-selection-choice -map-export\" [class.-with-header]=\"displayHeader$ | async\">\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--icon-only a-tooltip\"\n      id=\"export_card\"\n      aria-expanded=\"false\"\n      aria-controls=\"export_type\"\n      aria-haspopup=\"menu\"\n      [attr.data-tooltip]=\"'@pry.widget.map.export' | i18n\"\n      data-tooltip-position=\"right\"\n      (click)=\"export()\"\n    >\n      <pry-icon iconSvg=\"file_download\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.map.export' | i18n }}</span>\n    </button>\n  </div>\n\n  <div\n    class=\"ol-control m-layer-switcher m-map-layer-action\"\n    *ngIf=\"((layers$ | async)?.length ?? 0) > 0\"\n    [style.top.px]=\"layersTop$ | async\"\n  >\n    <button\n      class=\"m-map-layer-action__toggle\"\n      [class.a-tooltip]=\"!this.layersTabOpen\"\n      [class.-tooltip-no-wrap]=\"!this.layersTabOpen\"\n      (click)=\"toggleLayersWindow()\"\n      [attr.data-tooltip]=\"'@pry.widget.map.selectLayers' | i18n\"\n      data-tooltip-position=\"left\"\n    >\n      <pry-icon iconSvg=\"layers\" [width]=\"18\" [height]=\"18\"></pry-icon>\n    </button>\n    <div class=\"m-map-layer-action__container\" [class.-hidden]=\"!layersTabOpen\">\n      <span class=\"a-h4\">{{ '@pry.widget.map.layersTitle' | i18n }}</span>\n      <ng-container *ngFor=\"let layer of mapLayers; let index = index\">\n        <div class=\"m-map-layer-action__title m-layer-switcher__title\" [class.-hidden]=\"!layersTabOpen\">\n          <pry-checkbox\n            *ngIf=\"!(options$ | async)?.singleLayer; else singleLayer\"\n            [ngModel]=\"layer.getVisible()\"\n            (change)=\"changeVisibility(layer)\"\n          ></pry-checkbox>\n          <ng-template #singleLayer>\n            <input\n              type=\"radio\"\n              name=\"layer\"\n              [id]=\"'radio-layer-' + layer.get('title').split(' ')[0]\"\n              [ngModel]=\"layerVisibleIdx\"\n              [value]=\"index\"\n              (change)=\"changeVisibility(layer)\"\n            />\n          </ng-template>\n          {{ layer.get('title') }}\n        </div>\n      </ng-container>\n    </div>\n  </div>\n\n  <div\n    class=\"ol-control m-map-layer-action m-layer-legend\"\n    *ngIf=\"((legendLayers$ | async)?.length ?? 0) > 0\"\n    [style.top.px]=\"legendTop$ | async\"\n  >\n    <button\n      class=\"m-map-layer-action__toggle\"\n      [class.a-tooltip]=\"!this.legendTabOpen\"\n      [class.-tooltip-no-wrap]=\"!this.legendTabOpen\"\n      (click)=\"toggleLegendWindow()\"\n      [attr.data-tooltip]=\"'@pry.widget.map.legends' | i18n\"\n      data-tooltip-position=\"left\"\n    >\n      <pry-icon iconSvg=\"legend\" [width]=\"18\" [height]=\"15\"></pry-icon>\n    </button>\n    <div class=\"m-map-layer-action__container\" [class.-hidden]=\"!legendTabOpen\">\n      <span class=\"a-h4\">{{ '@pry.widget.map.legendsTitle' | i18n }}</span>\n      <ng-container *ngFor=\"let geoLayer of legendLayers$ | async; let index = index\">\n        <div class=\"m-map-layer-action__title m-layer-legend__title\" (click)=\"toggleLegend(index)\">\n          <pry-icon\n            *ngIf=\"isLayerRendered(geoLayer) && !!geoLayer.title\"\n            class=\"m-layer-legend__dropdown-icon\"\n            [iconSvg]=\"legendTab === index ? 'chevron_top' : 'chevron_bottom'\"\n            [width]=\"12\"\n            [height]=\"12\"\n          ></pry-icon>\n          {{ geoLayer.title }}\n          <pry-icon\n            *ngIf=\"!isLayerRendered(geoLayer)\"\n            class=\"a-tooltip\"\n            [attr.data-tooltip]=\"'@pry.widget.map.layerLoadError' | i18n\"\n            [iconSvg]=\"'close'\"\n            [width]=\"22\"\n            [height]=\"22\"\n          ></pry-icon>\n        </div>\n        <div\n          class=\"m-map-layer-action__image\"\n          [class.-hidden]=\"!legendTabOpen || legendTab !== index || !isLayerRendered(geoLayer)\"\n          [style.max-height.px]=\"legendHeight$ | async\"\n        >\n          <ng-container *ngIf=\"geoLayer | legendUrl : { capabilities: (wmsCapabilities$ | async) } as url\">\n            <img\n              [src]=\"url | getSecuredImage | async\"\n              [alt]=\"'@pry.widget.map.legend' | i18n : { layer: geoLayer.title }\"\n              (error)=\"imageNotProvided[index] = true\"\n            />\n          </ng-container>\n          <ng-container *ngIf=\"!(geoLayer | legendUrl : { capabilities: (wmsCapabilities$ | async) })\">\n            <p class=\"m-map-layer-action__error\">{{ '@pry.widget.map.legendNotProvided' | i18n }}</p>\n          </ng-container>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n\n  <div class=\"m-map-slide-legend -left\" *ngIf=\"leftSlideLayers.length > 0\" [style.top.px]=\"legendTop$ | async\">\n    <span class=\"m-map-slide-legend__title\">{{ '@pry.widget.map.slideTitle' | i18n }}:</span>\n    <div *ngFor=\"let layer of leftSlideLayers\">\n      {{ layer.get('title') }}\n    </div>\n  </div>\n\n  <div class=\"m-map-slide-legend -right\" *ngIf=\"rightSlideLayers.length > 0\" [style.top.px]=\"legendTop$ | async\">\n    <span class=\"m-map-slide-legend__title\">{{ '@pry.widget.map.slideTitle' | i18n }}:</span>\n    <div *ngFor=\"let layer of rightSlideLayers\">\n      {{ layer.get('title') }}\n    </div>\n  </div>\n\n  <div [style.height.px]=\"height$ | async\" class=\"o-map-wrapper\">\n    <div class=\"o-map\">\n      <div #mapRef id=\"map\"></div>\n      <input\n        type=\"range\"\n        min=\"0\"\n        max=\"100\"\n        step=\"0.01\"\n        value=\"50\"\n        #sliderElement\n        class=\"o-map-slider\"\n        [class.-hidden]=\"!(hasSlideLayer$ | async)\"\n        (input)=\"triggerLayerRender()\"\n      />\n    </div>\n  </div>\n\n  <div #popup class=\"m-tooltip m-tooltip--popup\" [hidden]=\"true\" role=\"tooltip\">\n    <div class=\"m-tooltip--popup__header\">\n      <p>{{ this.tooltipIndex + 1 }} / {{ this.tooltipNumber }}</p>\n      <button class=\"a-btn a-btn--primary a-btn--icon-only\" (click)=\"tooltipMove(-1)\" [disabled]=\"!tooltipCanMove(-1)\">\n        <pry-icon iconSvg=\"arrow_back\"></pry-icon>\n      </button>\n      <button class=\"a-btn a-btn--primary a-btn--icon-only\" (click)=\"tooltipMove(1)\" [disabled]=\"!tooltipCanMove(1)\">\n        <pry-icon iconSvg=\"arrow_right\"></pry-icon>\n      </button>\n    </div>\n    <div class=\"m-tooltip--popup__container\">\n      <ng-container #popupContent></ng-container>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.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: i5.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { 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", "readonly", "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: i6.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle"] }, { kind: "component", type: i2.PryRangeComponent, selector: "pry-range", inputs: ["min", "max", "step", "disabled", "labelTranslate"] }, { kind: "component", type: i7.PryWidgetMapCssComponent, selector: "pry-widget-map-css" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.GetSecuredImagePipe, name: "getSecuredImage" }, { kind: "pipe", type: i2.I18nPipe, name: "i18n" }, { kind: "pipe", type: i8.GeometryFieldsForPipe, name: "geometryFieldsFor" }, { kind: "pipe", type: i9.WidgetMapLegendUrlPipe, name: "legendUrl" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: WidgetMapComponent, decorators: [{
             type: Component,

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

@@ -216,7 +216,7 @@ export class WidgetTableComponent extends DataWidgetComponent {
         this.actualPage$.next(number);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: WidgetTableComponent, deps: [{ token: i1.Store }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: WidgetTableComponent, selector: "pry-widget-table", usesInheritance: true, ngImport: i0, template: "<pry-widget-table-css></pry-widget-table-css>\n<div class=\"o-widget o-widget--table\">\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    (click)=\"refresh()\"\n  >\n    <pry-settings\n      (click)=\"refresh()\"\n      (saveTriggered)=\"emitManifest()\"\n      (changeTitle)=\"changeWidgetTitle($event)\"\n      [headerPresent]=\"displayHeader$ | async\"\n      [widgetIndex]=\"widgetIndex\"\n      [header]=\"header\"\n      [open$]=\"open$\"\n      (triggerClick)=\"this.refresh()\"\n      class=\"o-settings\"\n    >\n      <div class=\"o-settings__popup__content__actions\">\n        <button type=\"button\" class=\"a-btn a-btn--icon-text -link-like\" (click)=\"addColumn()\">\n          <pry-icon iconSvg=\"post_add\"></pry-icon>\n          {{ '@pry.widget.table.addColumn' | i18n }}\n        </button>\n      </div>\n\n      <div\n        *ngFor=\"let columnDef of optionsCopy?.columns ?? []; let i = index\"\n        class=\"o-settings__popup__content__fields\"\n        (click)=\"refresh()\"\n      >\n        <div class=\"o-settings__popup__content__fields__head\">\n          <div class=\"m-btn-group\">\n            <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"invertLayers(i, i - 1)\" *ngIf=\"i > 0\">\n              <pry-icon iconSvg=\"fleche_haut\"></pry-icon>\n              <span class=\"u-visually-hidden\">{{ '@pry.action.moveUp' | i18n }}</span>\n            </button>\n            <button\n              type=\"button\"\n              class=\"a-btn a-btn--icon-only\"\n              (click)=\"invertLayers(i, i + 1)\"\n              *ngIf=\"i < (optionsCopy?.columns?.length ?? 0) - 1\"\n            >\n              <pry-icon iconSvg=\"fleche_bas\"></pry-icon>\n              <span class=\"u-visually-hidden\">{{ '@pry.action.moveDown' | i18n }}</span>\n            </button>\n          </div>\n        </div>\n\n        <div class=\"o-settings__popup__content__fields__content\">\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\" for=\"table_property\">{{ '@pry.widget.table.property' | i18n }}</label>\n            <pry-select\n              (click)=\"refresh()\"\n              (ngModelChange)=\"changePropertyName($event, columnDef)\"\n              [items]=\"properties$ | async\"\n              [ngModel]=\"columnDef.property\"\n              bindLabel=\"label\"\n              bindValue=\"property\"\n              id=\"table_property\"\n            ></pry-select>\n          </div>\n\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\" for=\"table_label\">{{ '@pry.widget.table.label' | i18n }}</label>\n            <input\n              id=\"table_label\"\n              class=\"a-form-field\"\n              type=\"text\"\n              (input)=\"changeLabel($event, columnDef)\"\n              [value]=\"columnDef.label\"\n            />\n          </div>\n        </div>\n        <button\n          (click)=\"deleteColumn(i)\"\n          aria-label=\"delete\"\n          type=\"button\"\n          class=\"a-btn a-btn--icon-text -link-like\"\n          data-func=\"delete\"\n        >\n          <pry-icon iconSvg=\"delete\" [width]=\"19\" [height]=\"19\"></pry-icon>\n          <span>{{ '@pry.widget.table.deleteColumn' | i18n }}</span>\n        </button>\n      </div>\n    </pry-settings>\n  </pry-widget-header>\n\n  <div class=\"a-table-wrapper\">\n    <ng-container *ngIf=\"pagination$ | async as pagination\">\n      <ng-container *ngIf=\"pagination?.items ?? [] as allObjects\">\n        <div\n          class=\"no-result\"\n          *ngIf=\"pagination.noFillersItems === 0\"\n          [style.height.%]=\"pagination.totalPages > 0 ? 80 : 100\"\n        >\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.table.empty' | i18n }}</span>\n        </div>\n\n        <ng-container *ngIf=\"pagination.noFillersItems > 0\">\n          <ng-container *ngIf=\"(selectedIds$ | async) ?? [] as selectedIds\">\n            <ng-container *ngIf=\"(columns$ | async) ?? [] as columns\">\n              <table class=\"a-table\" [attr.aria-label]=\"'@pry.widget.table.description' | i18n\">\n                <thead>\n                  <tr>\n                    <th *ngIf=\"allObjects?.length ?? 0 > 0\">\n                      <pry-checkbox [ngModel]=\"areAllSelected\" (ngModelChange)=\"selectAll($event)\"></pry-checkbox>\n                    </th>\n                    <th *ngFor=\"let column of columns; let i = index\" resizable (click)=\"setOrder(column)\">\n                      <span>{{ column.label }}</span>\n                      <ng-container *ngIf=\"quickOrder$ | async as quickOrder\">\n                        <ng-container *ngIf=\"quickOrder.attribute === column.attributeId\">\n                          <pry-icon\n                            [iconSvg]=\"quickOrder.asc ? 'chevron_top' : 'chevron_bottom'\"\n                            [height]=\"12\"\n                            [width]=\"12\"\n                          ></pry-icon>\n                        </ng-container>\n                      </ng-container>\n                    </th>\n                  </tr>\n                </thead>\n                <tbody>\n                  <tr\n                    *ngFor=\"let item of allObjects\"\n                    [class.is-selected]=\"selectedIds.includes(item.id)\"\n                    [class.context-menu-selected]=\"contextMenuClickedId === item.id && (isContextMenuOpened$ | async)\"\n                    (contextmenu)=\"contextMenu($event, item)\"\n                    detachRow\n                    (selectedValue)=\"selection($event, item)\"\n                    [class.filler]=\"item.metadata!['__widget-table-filler']\"\n                  >\n                    <td class=\"checkbox-wrapper\">\n                      <pry-checkbox [ngModel]=\"selectedIds.includes(item.id)\"></pry-checkbox>\n                    </td>\n                    <td *ngFor=\"let column of columns\" class=\"u-ellipsis\">\n                      <ng-container *ngIf=\"column.property === 'metadata'\">\n                        <pry-metadata [item]=\"item\"></pry-metadata>\n                      </ng-container>\n                      <ng-container *ngIf=\"column.property === 'oClass'\">\n                        <p class=\"content-img\">\n                          <img\n                            [height]=\"25\"\n                            [width]=\"25\"\n                            [src]=\"item | translateItemToSymbol | async\"\n                            [alt]=\"item.oClass | translateId : { type: 'class', output: 'name' } | async\"\n                          />\n                        </p>\n                      </ng-container>\n                      <ng-container *ngIf=\"!['metadata', 'oClass'].includes(column.property)\">\n                        <pry-expand-value [value]=\"item | getValue : column.property | async\"></pry-expand-value>\n                      </ng-container>\n                    </td>\n                  </tr>\n                </tbody>\n              </table>\n            </ng-container>\n          </ng-container>\n        </ng-container>\n\n        <div class=\"a-table-pagination\" *ngIf=\"pagination.totalPages > 0\">\n          <div class=\"a-table-pagination__spacing\">\n            <div>\n              <button (click)=\"goToPage(0)\" [disabled]=\"pagination.page <= 0\">\n                <pry-icon iconSvg=\"skip-left-fill\"></pry-icon>\n              </button>\n            </div>\n            <div>\n              <button (click)=\"goToPage(pagination.page - 1)\" [disabled]=\"pagination.page <= 0\">\n                <pry-icon iconSvg=\"arrow-left-s-fill\"></pry-icon>\n              </button>\n            </div>\n            <div class=\"a-table-pagination__spacing__label\">\n              <p>{{ pagination.page + 1 }} / {{ pagination.loadedPages }}</p>\n            </div>\n            <div>\n              <button\n                (click)=\"goToPage(pagination.page + 1)\"\n                [disabled]=\"pagination.page + 1 >= pagination.loadedPages\"\n              >\n                <pry-icon iconSvg=\"arrow-right-s-fill\"></pry-icon>\n              </button>\n            </div>\n            <div>\n              <button\n                (click)=\"goToPage(pagination.loadedPages - 1)\"\n                [disabled]=\"pagination.page + 1 >= pagination.loadedPages\"\n              >\n                <pry-icon iconSvg=\"skip-right-fill\"></pry-icon>\n              </button>\n            </div>\n            <div class=\"a-table-pagination__spacing__label\">\n              ({{\n                '@pry.widget.table.remaining' | i18n : { remaining: pagination.totalPages - pagination.loadedPages }\n              }})\n            </div>\n          </div>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.MetadataComponent, selector: "pry-metadata", inputs: ["item"] }, { 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", "readonly", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared"] }, { 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"] }, { kind: "component", type: i6.ResizableComponent, selector: "th[resizable]" }, { kind: "directive", type: i7.ResizableDirective, selector: "[resizable]", outputs: ["resizable"] }, { kind: "component", type: i8.PryWidgetTableCssComponent, selector: "pry-widget-table-css" }, { kind: "component", type: i9.ExpandValueComponent, selector: "pry-expand-value", inputs: ["value"] }, { kind: "directive", type: i10.DetachRowDirective, selector: "[detachRow]", outputs: ["selectedValue"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslateIdPipe, name: "translateId" }, { kind: "pipe", type: i4.TranslateItemToSymbolPipe, name: "translateItemToSymbol" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }, { kind: "pipe", type: i11.GetValuePipe, name: "getValue" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: WidgetTableComponent, selector: "pry-widget-table", usesInheritance: true, ngImport: i0, template: "<pry-widget-table-css></pry-widget-table-css>\n<div class=\"o-widget o-widget--table\">\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    (click)=\"refresh()\"\n  >\n    <pry-settings\n      (click)=\"refresh()\"\n      (saveTriggered)=\"emitManifest()\"\n      (changeTitle)=\"changeWidgetTitle($event)\"\n      [headerPresent]=\"displayHeader$ | async\"\n      [widgetIndex]=\"widgetIndex\"\n      [header]=\"header\"\n      [open$]=\"open$\"\n      (triggerClick)=\"this.refresh()\"\n      class=\"o-settings\"\n    >\n      <div class=\"o-settings__popup__content__actions\">\n        <button type=\"button\" class=\"a-btn a-btn--icon-text -link-like\" (click)=\"addColumn()\">\n          <pry-icon iconSvg=\"post_add\"></pry-icon>\n          {{ '@pry.widget.table.addColumn' | i18n }}\n        </button>\n      </div>\n\n      <div\n        *ngFor=\"let columnDef of optionsCopy?.columns ?? []; let i = index\"\n        class=\"o-settings__popup__content__fields\"\n        (click)=\"refresh()\"\n      >\n        <div class=\"o-settings__popup__content__fields__head\">\n          <div class=\"m-btn-group\">\n            <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"invertLayers(i, i - 1)\" *ngIf=\"i > 0\">\n              <pry-icon iconSvg=\"fleche_haut\"></pry-icon>\n              <span class=\"u-visually-hidden\">{{ '@pry.action.moveUp' | i18n }}</span>\n            </button>\n            <button\n              type=\"button\"\n              class=\"a-btn a-btn--icon-only\"\n              (click)=\"invertLayers(i, i + 1)\"\n              *ngIf=\"i < (optionsCopy?.columns?.length ?? 0) - 1\"\n            >\n              <pry-icon iconSvg=\"fleche_bas\"></pry-icon>\n              <span class=\"u-visually-hidden\">{{ '@pry.action.moveDown' | i18n }}</span>\n            </button>\n          </div>\n        </div>\n\n        <div class=\"o-settings__popup__content__fields__content\">\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\" for=\"table_property\">{{ '@pry.widget.table.property' | i18n }}</label>\n            <pry-select\n              (click)=\"refresh()\"\n              (ngModelChange)=\"changePropertyName($event, columnDef)\"\n              [items]=\"properties$ | async\"\n              [ngModel]=\"columnDef.property\"\n              bindLabel=\"label\"\n              bindValue=\"property\"\n              id=\"table_property\"\n            ></pry-select>\n          </div>\n\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\" for=\"table_label\">{{ '@pry.widget.table.label' | i18n }}</label>\n            <input\n              id=\"table_label\"\n              class=\"a-form-field\"\n              type=\"text\"\n              (input)=\"changeLabel($event, columnDef)\"\n              [value]=\"columnDef.label\"\n            />\n          </div>\n        </div>\n        <button\n          (click)=\"deleteColumn(i)\"\n          aria-label=\"delete\"\n          type=\"button\"\n          class=\"a-btn a-btn--icon-text -link-like\"\n          data-func=\"delete\"\n        >\n          <pry-icon iconSvg=\"delete\" [width]=\"19\" [height]=\"19\"></pry-icon>\n          <span>{{ '@pry.widget.table.deleteColumn' | i18n }}</span>\n        </button>\n      </div>\n    </pry-settings>\n  </pry-widget-header>\n\n  <div class=\"a-table-wrapper\">\n    <ng-container *ngIf=\"pagination$ | async as pagination\">\n      <ng-container *ngIf=\"pagination?.items ?? [] as allObjects\">\n        <div\n          class=\"no-result\"\n          *ngIf=\"pagination.noFillersItems === 0\"\n          [style.height.%]=\"pagination.totalPages > 0 ? 80 : 100\"\n        >\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.table.empty' | i18n }}</span>\n        </div>\n\n        <ng-container *ngIf=\"pagination.noFillersItems > 0\">\n          <ng-container *ngIf=\"(selectedIds$ | async) ?? [] as selectedIds\">\n            <ng-container *ngIf=\"(columns$ | async) ?? [] as columns\">\n              <table class=\"a-table\" [attr.aria-label]=\"'@pry.widget.table.description' | i18n\">\n                <thead>\n                  <tr>\n                    <th *ngIf=\"allObjects?.length ?? 0 > 0\">\n                      <pry-checkbox [ngModel]=\"areAllSelected\" (ngModelChange)=\"selectAll($event)\"></pry-checkbox>\n                    </th>\n                    <th *ngFor=\"let column of columns; let i = index\" resizable (click)=\"setOrder(column)\">\n                      <span>{{ column.label }}</span>\n                      <ng-container *ngIf=\"quickOrder$ | async as quickOrder\">\n                        <ng-container *ngIf=\"quickOrder.attribute === column.attributeId\">\n                          <pry-icon\n                            [iconSvg]=\"quickOrder.asc ? 'chevron_top' : 'chevron_bottom'\"\n                            [height]=\"12\"\n                            [width]=\"12\"\n                          ></pry-icon>\n                        </ng-container>\n                      </ng-container>\n                    </th>\n                  </tr>\n                </thead>\n                <tbody>\n                  <tr\n                    *ngFor=\"let item of allObjects\"\n                    [class.is-selected]=\"selectedIds.includes(item.id)\"\n                    [class.context-menu-selected]=\"contextMenuClickedId === item.id && (isContextMenuOpened$ | async)\"\n                    (contextmenu)=\"contextMenu($event, item)\"\n                    detachRow\n                    (selectedValue)=\"selection($event, item)\"\n                    [class.filler]=\"item.metadata!['__widget-table-filler']\"\n                  >\n                    <td class=\"checkbox-wrapper\">\n                      <pry-checkbox [ngModel]=\"selectedIds.includes(item.id)\"></pry-checkbox>\n                    </td>\n                    <td *ngFor=\"let column of columns\" class=\"u-ellipsis\">\n                      <ng-container *ngIf=\"column.property === 'metadata'\">\n                        <pry-metadata [item]=\"item\"></pry-metadata>\n                      </ng-container>\n                      <ng-container *ngIf=\"column.property === 'oClass'\">\n                        <p class=\"content-img\">\n                          <img\n                            [height]=\"25\"\n                            [width]=\"25\"\n                            [src]=\"item | translateItemToSymbol | async\"\n                            [alt]=\"item.oClass | translateId : { type: 'class', output: 'name' } | async\"\n                          />\n                        </p>\n                      </ng-container>\n                      <ng-container *ngIf=\"!['metadata', 'oClass'].includes(column.property)\">\n                        <pry-expand-value [value]=\"item | getValue : column.property | async\"></pry-expand-value>\n                      </ng-container>\n                    </td>\n                  </tr>\n                </tbody>\n              </table>\n            </ng-container>\n          </ng-container>\n        </ng-container>\n\n        <div class=\"a-table-pagination\" *ngIf=\"pagination.totalPages > 0\">\n          <div class=\"a-table-pagination__spacing\">\n            <div>\n              <button (click)=\"goToPage(0)\" [disabled]=\"pagination.page <= 0\">\n                <pry-icon iconSvg=\"skip-left-fill\"></pry-icon>\n              </button>\n            </div>\n            <div>\n              <button (click)=\"goToPage(pagination.page - 1)\" [disabled]=\"pagination.page <= 0\">\n                <pry-icon iconSvg=\"arrow-left-s-fill\"></pry-icon>\n              </button>\n            </div>\n            <div class=\"a-table-pagination__spacing__label\">\n              <p>{{ pagination.page + 1 }} / {{ pagination.loadedPages }}</p>\n            </div>\n            <div>\n              <button\n                (click)=\"goToPage(pagination.page + 1)\"\n                [disabled]=\"pagination.page + 1 >= pagination.loadedPages\"\n              >\n                <pry-icon iconSvg=\"arrow-right-s-fill\"></pry-icon>\n              </button>\n            </div>\n            <div>\n              <button\n                (click)=\"goToPage(pagination.loadedPages - 1)\"\n                [disabled]=\"pagination.page + 1 >= pagination.loadedPages\"\n              >\n                <pry-icon iconSvg=\"skip-right-fill\"></pry-icon>\n              </button>\n            </div>\n            <div class=\"a-table-pagination__spacing__label\">\n              ({{\n                '@pry.widget.table.remaining' | i18n : { remaining: pagination.totalPages - pagination.loadedPages }\n              }})\n            </div>\n          </div>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.MetadataComponent, selector: "pry-metadata", inputs: ["item"] }, { 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", "readonly", "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"] }, { kind: "component", type: i6.ResizableComponent, selector: "th[resizable]" }, { kind: "directive", type: i7.ResizableDirective, selector: "[resizable]", outputs: ["resizable"] }, { kind: "component", type: i8.PryWidgetTableCssComponent, selector: "pry-widget-table-css" }, { kind: "component", type: i9.ExpandValueComponent, selector: "pry-expand-value", inputs: ["value"] }, { kind: "directive", type: i10.DetachRowDirective, selector: "[detachRow]", outputs: ["selectedValue"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslateIdPipe, name: "translateId" }, { kind: "pipe", type: i4.TranslateItemToSymbolPipe, name: "translateItemToSymbol" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }, { kind: "pipe", type: i11.GetValuePipe, name: "getValue" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: WidgetTableComponent, decorators: [{
             type: Component,

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

@@ -106,7 +106,7 @@ export class WidgetTileComponent extends DataWidgetComponent {
         return Object.keys(value?.metadata ?? {}).length > 0;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: WidgetTileComponent, deps: [{ token: i1.Store }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: WidgetTileComponent, selector: "pry-widget-tile", usesInheritance: true, ngImport: i0, template: "<pry-widget-tile-css></pry-widget-tile-css>\n<div class=\"o-widget o-widget--tile\">\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=\"tile_classes\">{{ '@pry.widget.tile.classes' | i18n }}</label>\n        <pry-select\n          (ngModelChange)=\"changeClasses($event)\"\n          [items]=\"classes$ | async\"\n          [multiple]=\"true\"\n          [closeOnSelect]=\"false\"\n          [ngModel]=\"optionsCopy.classes\"\n          bindLabel=\"name\"\n          bindValue=\"id\"\n          id=\"tile_classes\"\n        ></pry-select>\n      </div>\n    </pry-settings>\n  </pry-widget-header>\n  <div class=\"o-widget--tile-wrapper\" [style.top]=\"(displayHeader$ | async) ? WIDGET_HEADER_HEIGHT + 'px' : 0\">\n    <div class=\"no-result\" *ngIf=\"(items$ | async)?.length === 0\">\n      <img\n        class=\"no-result__search\"\n        src=\"../../../assets/svgs/pry_recherche_pas_de_resultat.svg\"\n        alt=\"{{ '@pry.widget.tile.empty' | i18n }}\"\n        aria-hidden=\"true\"\n      />\n      <span class=\"no-result__text\">{{ '@pry.widget.tile.empty' | i18n }}</span>\n    </div>\n    <ul class=\"o-widget--tile__list\">\n      <li\n        class=\"o-widget--tile__list__item\"\n        *ngFor=\"let item of items$ | async; let index = index\"\n        (contextmenu)=\"contextMenu($event, item)\"\n      >\n        <div class=\"o-widget--tile__list__item__header\">\n          <img\n            [height]=\"25\"\n            [width]=\"25\"\n            [src]=\"item | translateItemToSymbol | async\"\n            [alt]=\"item.oClass | translateId : { type: 'class', output: 'name' } | async\"\n          />\n          <h3 class=\"o-widget--tile__list__item__header__title\">\n            {{\n              item.oClass\n                | translateId\n                  : {\n                      type: 'class',\n                      output: 'name'\n                    }\n                | async\n            }}\n          </h3>\n          <pry-checkbox\n            [ngModel]=\"(selectedIds$ | async).includes(item.id)\"\n            (click)=\"select($event, item)\"\n          ></pry-checkbox>\n        </div>\n        <div class=\"o-properties\">\n          <ul class=\"o-properties__list\">\n            <ng-container *ngFor=\"let property of (propertiesToDisplay$ | async)![item.oClass]\">\n              <li\n                *ngFor=\"let value of getValue(item, property); 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 }}:</p>\n                <p class=\"o-properties__list__item__value\" *ngIf=\"!isRaw(property, item.oClass)\">{{ value?.value }}</p>\n                <p class=\"o-properties__list__item__raw\" *ngIf=\"isRaw(property, item.oClass)\">\n                  <pry-vizualize-raw [item]=\"item\" [propertyName]=\"property\"></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          </ul>\n        </div>\n        <div (click)=\"toggleMap(index)\" class=\"o-widget--tile__list__item__footer\">\n          <button\n            type=\"button\"\n            class=\"a-btn a-btn--icon-text -link-like\"\n            aria-controls=\"tile-map-xxx\"\n            aria-expanded=\"false\"\n          >\n            {{ '@pry.widget.tile.map' | i18n }}\n          </button>\n        </div>\n        <div class=\"o-widget--tile__list__item__map\" *ngIf=\"maps[index]\" id=\"tile-map-xxx\">\n          <pry-widget-map [staticManifest]=\"mapManifest\" [staticResultSet]=\"resultSetWithItem(item)\"></pry-widget-map>\n        </div>\n      </li>\n    </ul>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.MetadataComponent, selector: "pry-metadata", inputs: ["item"] }, { kind: "component", type: i4.PryWidgetHeaderComponent, selector: "pry-widget-header", inputs: ["manifest", "openData$", "additionalOptions", "headerOptions", "displayCount", "datasourceIds", "widgetIndex"], outputs: ["manifestModified"] }, { kind: "component", type: i4.VizualizeRawComponent, selector: "pry-vizualize-raw", inputs: ["item", "propertyName", "alt"] }, { kind: "component", type: i4.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared"] }, { kind: "component", type: i5.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle"] }, { kind: "component", type: i6.WidgetMapComponent, selector: "pry-widget-map" }, { kind: "component", type: i7.PryWidgetTileCssComponent, selector: "pry-widget-tile-css" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslateIdPipe, name: "translateId" }, { kind: "pipe", type: i4.TranslateItemToSymbolPipe, name: "translateItemToSymbol" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: WidgetTileComponent, selector: "pry-widget-tile", usesInheritance: true, ngImport: i0, template: "<pry-widget-tile-css></pry-widget-tile-css>\n<div class=\"o-widget o-widget--tile\">\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=\"tile_classes\">{{ '@pry.widget.tile.classes' | i18n }}</label>\n        <pry-select\n          (ngModelChange)=\"changeClasses($event)\"\n          [items]=\"classes$ | async\"\n          [multiple]=\"true\"\n          [closeOnSelect]=\"false\"\n          [ngModel]=\"optionsCopy.classes\"\n          bindLabel=\"name\"\n          bindValue=\"id\"\n          id=\"tile_classes\"\n        ></pry-select>\n      </div>\n    </pry-settings>\n  </pry-widget-header>\n  <div class=\"o-widget--tile-wrapper\" [style.top]=\"(displayHeader$ | async) ? WIDGET_HEADER_HEIGHT + 'px' : 0\">\n    <div class=\"no-result\" *ngIf=\"(items$ | async)?.length === 0\">\n      <img\n        class=\"no-result__search\"\n        src=\"../../../assets/svgs/pry_recherche_pas_de_resultat.svg\"\n        alt=\"{{ '@pry.widget.tile.empty' | i18n }}\"\n        aria-hidden=\"true\"\n      />\n      <span class=\"no-result__text\">{{ '@pry.widget.tile.empty' | i18n }}</span>\n    </div>\n    <ul class=\"o-widget--tile__list\">\n      <li\n        class=\"o-widget--tile__list__item\"\n        *ngFor=\"let item of items$ | async; let index = index\"\n        (contextmenu)=\"contextMenu($event, item)\"\n      >\n        <div class=\"o-widget--tile__list__item__header\">\n          <img\n            [height]=\"25\"\n            [width]=\"25\"\n            [src]=\"item | translateItemToSymbol | async\"\n            [alt]=\"item.oClass | translateId : { type: 'class', output: 'name' } | async\"\n          />\n          <h3 class=\"o-widget--tile__list__item__header__title\">\n            {{\n              item.oClass\n                | translateId\n                  : {\n                      type: 'class',\n                      output: 'name'\n                    }\n                | async\n            }}\n          </h3>\n          <pry-checkbox\n            [ngModel]=\"(selectedIds$ | async).includes(item.id)\"\n            (click)=\"select($event, item)\"\n          ></pry-checkbox>\n        </div>\n        <div class=\"o-properties\">\n          <ul class=\"o-properties__list\">\n            <ng-container *ngFor=\"let property of (propertiesToDisplay$ | async)![item.oClass]\">\n              <li\n                *ngFor=\"let value of getValue(item, property); 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 }}:</p>\n                <p class=\"o-properties__list__item__value\" *ngIf=\"!isRaw(property, item.oClass)\">{{ value?.value }}</p>\n                <p class=\"o-properties__list__item__raw\" *ngIf=\"isRaw(property, item.oClass)\">\n                  <pry-vizualize-raw [item]=\"item\" [propertyName]=\"property\"></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          </ul>\n        </div>\n        <div (click)=\"toggleMap(index)\" class=\"o-widget--tile__list__item__footer\">\n          <button\n            type=\"button\"\n            class=\"a-btn a-btn--icon-text -link-like\"\n            aria-controls=\"tile-map-xxx\"\n            aria-expanded=\"false\"\n          >\n            {{ '@pry.widget.tile.map' | i18n }}\n          </button>\n        </div>\n        <div class=\"o-widget--tile__list__item__map\" *ngIf=\"maps[index]\" id=\"tile-map-xxx\">\n          <pry-widget-map [staticManifest]=\"mapManifest\" [staticResultSet]=\"resultSetWithItem(item)\"></pry-widget-map>\n        </div>\n      </li>\n    </ul>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.MetadataComponent, selector: "pry-metadata", inputs: ["item"] }, { kind: "component", type: i4.PryWidgetHeaderComponent, selector: "pry-widget-header", inputs: ["manifest", "openData$", "additionalOptions", "headerOptions", "displayCount", "datasourceIds", "widgetIndex"], outputs: ["manifestModified"] }, { kind: "component", type: i4.VizualizeRawComponent, selector: "pry-vizualize-raw", inputs: ["item", "propertyName", "alt"] }, { kind: "component", type: i4.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked"] }, { kind: "component", type: i5.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle"] }, { kind: "component", type: i6.WidgetMapComponent, selector: "pry-widget-map" }, { kind: "component", type: i7.PryWidgetTileCssComponent, selector: "pry-widget-tile-css" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslateIdPipe, name: "translateId" }, { kind: "pipe", type: i4.TranslateItemToSymbolPipe, name: "translateItemToSymbol" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: WidgetTileComponent, decorators: [{
             type: Component,