@provoly/dashboard 0.20.7 → 0.20.9

package/fesm2022/provoly-dashboard.mjs

@@ -181,7 +181,8 @@ function deepMerge(target, source) {
 const enTranslations$1 = {
     '@pry': {
         select: {
-            label: 'Options list'
+            label: 'Options list',
+            loading: 'Loading'
         },
         about: {
             front: 'Version Front Library : {{value}} ',
@@ -536,7 +537,8 @@ const enTranslations$1 = {
 const frTranslations$1 = {
     '@pry': {
         select: {
-            label: 'Liste des choix'
+            label: 'Liste des choix',
+            loading: 'Chargement en cours'
         },
         about: {
             front: 'Librairie front',
@@ -6538,6 +6540,15 @@ class PrySelectComponent extends SubscriptionnerDirective {
     set items(items) {
         this._items$.next(items ?? []);
     }
+    set loading(loading) {
+        this._loading = loading;
+        if (this._loading) {
+            this.hasLoaded = true;
+        }
+    }
+    get loading() {
+        return this._loading;
+    }
     get disabled() {
         return this._disabled;
     }
@@ -6566,18 +6577,20 @@ class PrySelectComponent extends SubscriptionnerDirective {
         this.searched = new EventEmitter();
         this.cleared = new EventEmitter();
         this.search$ = new BehaviorSubject('');
+        this._loading = false;
+        this.hasLoaded = false;
         this._onChange = (_) => { };
         this._onTouched = () => { };
         this._disabled = false;
         this.focused = false;
         this.modalWidth = 200;
-        this.matchingItems$ = combineLatest([this._items$, this.search$, this.searchSelected$]).pipe(map$1(([items, term, alreadySelected]) => this.autocomplete && term && term.length > 0 && !alreadySelected
+        this.matchingItems$ = combineLatest([this._items$, this.search$, this.searchSelected$]).pipe(map(([items, term, alreadySelected]) => this.autocomplete && term && term.length > 0 && !alreadySelected
             ? items.filter((i) => {
                 const itemValue = this.bindLabel ? i?.[this.bindLabel] : i;
-                return itemValue.indexOf(term) > -1;
+                return itemValue.toLowerCase().indexOf(term.toLowerCase()) > -1;
             })
-            : items));
-        this.valueItems$ = combineLatest([this.value$, this._items$]).pipe(map$1(([value, items]) => (this.multiple ? value ?? [] : !!value ? [value] : []).map((value) => {
+            : items), tap(() => this._cd.detectChanges()));
+        this.valueItems$ = combineLatest([this.value$, this._items$]).pipe(map(([value, items]) => (this.multiple ? value ?? [] : !!value ? [value] : []).map((value) => {
             const keyProp = this.bindValue ?? this.bindLabel ?? 'id';
             return items.find((item) => {
                 return typeof item === 'object'
@@ -6727,13 +6740,13 @@ class PrySelectComponent extends SubscriptionnerDirective {
         return this.elementRef ?? this.selectElement.nativeElement;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PrySelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PrySelectComponent, selector: "pry-select", inputs: { items: "items", clearable: "clearable", multiple: "multiple", closeOnSelect: "closeOnSelect", placeholder: "placeholder", isForm: "isForm", required: "required", name: "name", readonly: "readonly", autocomplete: "autocomplete", bindValue: "bindValue", bindLabel: "bindLabel", iconSize: "iconSize", bindIcon: "bindIcon", template: "template", i18nPrefix: "i18nPrefix", elementRef: "elementRef" }, outputs: { searched: "searched", cleared: "cleared" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PrySelectComponent, selector: "pry-select", inputs: { items: "items", clearable: "clearable", multiple: "multiple", closeOnSelect: "closeOnSelect", placeholder: "placeholder", isForm: "isForm", required: "required", name: "name", readonly: "readonly", autocomplete: "autocomplete", bindValue: "bindValue", bindLabel: "bindLabel", iconSize: "iconSize", bindIcon: "bindIcon", template: "template", i18nPrefix: "i18nPrefix", loading: "loading", elementRef: "elementRef" }, outputs: { searched: "searched", cleared: "cleared" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => PrySelectComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "optionsModal", first: true, predicate: ["optionsModal"], descendants: true, read: TemplateRef }, { propertyName: "selectElement", first: true, predicate: ["selectElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"a-pry-select\"\n  [attr.aria-disabled]=\"disabled\"\n  #selectElement\n  [class.-focused]=\"focused\"\n  (click)=\"toggle()\"\n  role=\"combobox\"\n  [attr.aria-expanded]=\"open\"\n  [attr.aria-owns]=\"open ? modalId : null\"\n  aria-haspopup=\"listbox\"\n>\n  <ng-container *ngIf=\"autocomplete; else noAutocomplete\">\n    <input\n      type=\"text\"\n      class=\"a-pry-select__search\"\n      [ngModel]=\"search$.getValue()\"\n      (ngModelChange)=\"search($event)\"\n      (focus)=\"toggle(true)\"\n      aria-autocomplete=\"list\"\n      [attr.aria-controls]=\"open ? modalId : null\"\n      [attr.aria-disabled]=\"disabled\"\n      [disabled]=\"disabled\"\n    />\n  </ng-container>\n  <ng-template #noAutocomplete>\n    <ng-container *ngIf=\"(valueItems$ | async).length === 0; else selectedValues\">\n      <span class=\"a-pry-select__placeholder\">{{ placeholder }}</span>\n    </ng-container>\n    <ng-template #selectedValues>\n      <ng-container *ngFor=\"let item of valueItems$ | async\">\n        <div class=\"a-pry-select__value\" [class.pry-select-form]=\"isForm\" [class.-multiple]=\"multiple\">\n          <ng-container *ngIf=\"template; else noTemplateLabel\">\n            <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item, clear }\"></ng-container>\n          </ng-container>\n          <ng-template #noTemplateLabel>\n            <pry-icon\n              *ngIf=\"bindIcon\"\n              [iconSvg]=\"item[bindIcon]\"\n              [width]=\"iconSize[0]\"\n              [height]=\"iconSize[1]\"\n            ></pry-icon>\n            <ng-container *ngIf=\"bindLabel ? item?.[bindLabel] : item as value\">\n              {{ (i18nPrefix ?? '') + value | i18n : { warn: false } }}\n              <span\n                *ngIf=\"multiple && clearable\"\n                class=\"a-pry-select__clear\"\n                (click)=\"clear($event, item)\"\n                aria-hidden=\"true\"\n                >\u00D7</span\n              >\n            </ng-container>\n          </ng-template>\n        </div>\n      </ng-container>\n    </ng-template>\n    <div class=\"a-pry-select__filler\"></div>\n  </ng-template>\n  <span *ngIf=\"clearable\" class=\"a-pry-select__clear\" (click)=\"clearAll($event)\" aria-hidden=\"true\">\u00D7</span>\n  <pry-icon\n    class=\"a-pry-select__toggle\"\n    [iconSvg]=\"open ? 'chevron_top' : 'chevron_bottom'\"\n    [width]=\"iconSize[0]\"\n    [height]=\"iconSize[1]\"\n  ></pry-icon>\n</div>\n<ng-template #optionsModal>\n  <div\n    role=\"listbox\"\n    [attr.aria-label]=\"'@pry.select.label' | i18n\"\n    [id]=\"modalId\"\n    [attr.aria-activedescendant]=\"'select-option-' + activeDescendant\"\n    [attr.aria-multiselectable]=\"multiple\"\n    [attr.required]=\"required\"\n    [attr.aria-readonly]=\"readonly\"\n  >\n    <ng-container *ngFor=\"let item of matchingItems$ | async; let index = index\">\n      <div\n        class=\"a-pry-select__options__option\"\n        [attr.aria-selected]=\"(valueItems$ | async).includes(item)\"\n        [attr.aria-checked]=\"(valueItems$ | async).includes(item)\"\n        [attr.aria-disabled]=\"disabled\"\n        (click)=\"select($event, item, index)\"\n        [style.width.px]=\"modalWidth\"\n        role=\"option\"\n        [id]=\"'select-option-' + index\"\n      >\n        <ng-container *ngIf=\"template; else noTemplate\">\n          <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item, clear }\"></ng-container>\n        </ng-container>\n        <ng-template #noTemplate>\n          <pry-icon *ngIf=\"bindIcon\" [iconSvg]=\"item[bindIcon]\" [width]=\"iconSize[0]\" [height]=\"iconSize[1]\"></pry-icon>\n          <ng-container *ngIf=\"bindLabel ? item?.[bindLabel] : item as value\">\n            {{ (i18nPrefix ? i18nPrefix : '') + value | i18n : { warn: false } }}\n          </ng-container>\n        </ng-template>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
+        ], viewQueries: [{ propertyName: "optionsModal", first: true, predicate: ["optionsModal"], descendants: true, read: TemplateRef }, { propertyName: "selectElement", first: true, predicate: ["selectElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"a-pry-select\"\n  [attr.aria-disabled]=\"disabled\"\n  #selectElement\n  [class.-focused]=\"focused\"\n  (click)=\"toggle()\"\n  role=\"combobox\"\n  [attr.aria-expanded]=\"open\"\n  [attr.aria-owns]=\"open ? modalId : null\"\n  aria-haspopup=\"listbox\"\n>\n  <ng-container *ngIf=\"autocomplete; else noAutocomplete\">\n    <input\n      type=\"text\"\n      class=\"a-pry-select__search\"\n      [ngModel]=\"search$.getValue()\"\n      (ngModelChange)=\"search($event)\"\n      (focus)=\"toggle(true)\"\n      aria-autocomplete=\"list\"\n      [attr.aria-controls]=\"open ? modalId : null\"\n      [attr.aria-disabled]=\"disabled\"\n      [disabled]=\"disabled\"\n    />\n  </ng-container>\n  <ng-template #noAutocomplete>\n    <ng-container *ngIf=\"(valueItems$ | async).length === 0; else selectedValues\">\n      <span class=\"a-pry-select__placeholder\">{{ placeholder }}</span>\n    </ng-container>\n    <ng-template #selectedValues>\n      <ng-container *ngFor=\"let item of valueItems$ | async\">\n        <div class=\"a-pry-select__value\" [class.pry-select-form]=\"isForm\" [class.-multiple]=\"multiple\">\n          <ng-container *ngIf=\"template; else noTemplateLabel\">\n            <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item, clear }\"></ng-container>\n          </ng-container>\n          <ng-template #noTemplateLabel>\n            <pry-icon\n              *ngIf=\"bindIcon\"\n              [iconSvg]=\"item[bindIcon]\"\n              [width]=\"iconSize[0]\"\n              [height]=\"iconSize[1]\"\n            ></pry-icon>\n            <ng-container *ngIf=\"bindLabel ? item?.[bindLabel] : item as value\">\n              {{ (i18nPrefix ?? '') + value | i18n : { warn: false } }}\n              <span\n                *ngIf=\"multiple && clearable\"\n                class=\"a-pry-select__clear\"\n                (click)=\"clear($event, item)\"\n                aria-hidden=\"true\"\n                >\u00D7</span\n              >\n            </ng-container>\n          </ng-template>\n        </div>\n      </ng-container>\n    </ng-template>\n    <div class=\"a-pry-select__filler\"></div>\n  </ng-template>\n  <span *ngIf=\"clearable\" class=\"a-pry-select__clear\" (click)=\"clearAll($event)\" aria-hidden=\"true\">\u00D7</span>\n  <pry-icon\n    class=\"a-pry-select__toggle\"\n    [iconSvg]=\"open ? 'chevron_top' : 'chevron_bottom'\"\n    [width]=\"iconSize[0]\"\n    [height]=\"iconSize[1]\"\n  ></pry-icon>\n</div>\n<ng-template #optionsModal>\n  <div\n    role=\"listbox\"\n    [attr.aria-label]=\"'@pry.select.label' | i18n\"\n    [id]=\"modalId\"\n    [attr.aria-activedescendant]=\"'select-option-' + activeDescendant\"\n    [attr.aria-multiselectable]=\"multiple\"\n    [attr.required]=\"required\"\n    [attr.aria-readonly]=\"readonly\"\n  >\n    <div class=\"a-pry-select__options__option -hint\" *ngIf=\"loading\" [style.width.px]=\"modalWidth\">\n      <div class=\"no-widget no-widget__loader\">\n        <pry-icon\n          iconSvg=\"loader\"\n          class=\"no-widget__loading\"\n          [alt]=\"'@pry.widget.target.loading' | i18n\"\n          [width]=\"30\"\n          [height]=\"30\"\n          *ngIf=\"loading\"\n        />\n      </div>\n      <p>{{ '@pry.select.loading' | i18n }}...</p>\n    </div>\n    <ng-container *ngIf=\"!loading\">\n      <ng-container *ngFor=\"let item of matchingItems$ | async; let index = index\">\n        <div\n          class=\"a-pry-select__options__option\"\n          [attr.aria-selected]=\"(valueItems$ | async).includes(item)\"\n          [attr.aria-checked]=\"(valueItems$ | async).includes(item)\"\n          [attr.aria-disabled]=\"disabled\"\n          (click)=\"select($event, item, index)\"\n          [style.width.px]=\"modalWidth\"\n          role=\"option\"\n          [id]=\"'select-option-' + index\"\n        >\n          <ng-container *ngIf=\"template; else noTemplate\">\n            <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item, clear }\"></ng-container>\n          </ng-container>\n          <ng-template #noTemplate>\n            <pry-icon\n              *ngIf=\"bindIcon\"\n              [iconSvg]=\"item[bindIcon]\"\n              [width]=\"iconSize[0]\"\n              [height]=\"iconSize[1]\"\n            ></pry-icon>\n            <ng-container *ngIf=\"bindLabel ? item?.[bindLabel] : item as value\">\n              {{ (i18nPrefix ? i18nPrefix : '') + value | i18n : { warn: false } }}\n            </ng-container>\n          </ng-template>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PrySelectComponent, decorators: [{
             type: Component,
@@ -6743,7 +6756,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: forwardRef(() => PrySelectComponent),
                             multi: true
                         }
-                    ], template: "<div\n  class=\"a-pry-select\"\n  [attr.aria-disabled]=\"disabled\"\n  #selectElement\n  [class.-focused]=\"focused\"\n  (click)=\"toggle()\"\n  role=\"combobox\"\n  [attr.aria-expanded]=\"open\"\n  [attr.aria-owns]=\"open ? modalId : null\"\n  aria-haspopup=\"listbox\"\n>\n  <ng-container *ngIf=\"autocomplete; else noAutocomplete\">\n    <input\n      type=\"text\"\n      class=\"a-pry-select__search\"\n      [ngModel]=\"search$.getValue()\"\n      (ngModelChange)=\"search($event)\"\n      (focus)=\"toggle(true)\"\n      aria-autocomplete=\"list\"\n      [attr.aria-controls]=\"open ? modalId : null\"\n      [attr.aria-disabled]=\"disabled\"\n      [disabled]=\"disabled\"\n    />\n  </ng-container>\n  <ng-template #noAutocomplete>\n    <ng-container *ngIf=\"(valueItems$ | async).length === 0; else selectedValues\">\n      <span class=\"a-pry-select__placeholder\">{{ placeholder }}</span>\n    </ng-container>\n    <ng-template #selectedValues>\n      <ng-container *ngFor=\"let item of valueItems$ | async\">\n        <div class=\"a-pry-select__value\" [class.pry-select-form]=\"isForm\" [class.-multiple]=\"multiple\">\n          <ng-container *ngIf=\"template; else noTemplateLabel\">\n            <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item, clear }\"></ng-container>\n          </ng-container>\n          <ng-template #noTemplateLabel>\n            <pry-icon\n              *ngIf=\"bindIcon\"\n              [iconSvg]=\"item[bindIcon]\"\n              [width]=\"iconSize[0]\"\n              [height]=\"iconSize[1]\"\n            ></pry-icon>\n            <ng-container *ngIf=\"bindLabel ? item?.[bindLabel] : item as value\">\n              {{ (i18nPrefix ?? '') + value | i18n : { warn: false } }}\n              <span\n                *ngIf=\"multiple && clearable\"\n                class=\"a-pry-select__clear\"\n                (click)=\"clear($event, item)\"\n                aria-hidden=\"true\"\n                >\u00D7</span\n              >\n            </ng-container>\n          </ng-template>\n        </div>\n      </ng-container>\n    </ng-template>\n    <div class=\"a-pry-select__filler\"></div>\n  </ng-template>\n  <span *ngIf=\"clearable\" class=\"a-pry-select__clear\" (click)=\"clearAll($event)\" aria-hidden=\"true\">\u00D7</span>\n  <pry-icon\n    class=\"a-pry-select__toggle\"\n    [iconSvg]=\"open ? 'chevron_top' : 'chevron_bottom'\"\n    [width]=\"iconSize[0]\"\n    [height]=\"iconSize[1]\"\n  ></pry-icon>\n</div>\n<ng-template #optionsModal>\n  <div\n    role=\"listbox\"\n    [attr.aria-label]=\"'@pry.select.label' | i18n\"\n    [id]=\"modalId\"\n    [attr.aria-activedescendant]=\"'select-option-' + activeDescendant\"\n    [attr.aria-multiselectable]=\"multiple\"\n    [attr.required]=\"required\"\n    [attr.aria-readonly]=\"readonly\"\n  >\n    <ng-container *ngFor=\"let item of matchingItems$ | async; let index = index\">\n      <div\n        class=\"a-pry-select__options__option\"\n        [attr.aria-selected]=\"(valueItems$ | async).includes(item)\"\n        [attr.aria-checked]=\"(valueItems$ | async).includes(item)\"\n        [attr.aria-disabled]=\"disabled\"\n        (click)=\"select($event, item, index)\"\n        [style.width.px]=\"modalWidth\"\n        role=\"option\"\n        [id]=\"'select-option-' + index\"\n      >\n        <ng-container *ngIf=\"template; else noTemplate\">\n          <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item, clear }\"></ng-container>\n        </ng-container>\n        <ng-template #noTemplate>\n          <pry-icon *ngIf=\"bindIcon\" [iconSvg]=\"item[bindIcon]\" [width]=\"iconSize[0]\" [height]=\"iconSize[1]\"></pry-icon>\n          <ng-container *ngIf=\"bindLabel ? item?.[bindLabel] : item as value\">\n            {{ (i18nPrefix ? i18nPrefix : '') + value | i18n : { warn: false } }}\n          </ng-container>\n        </ng-template>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n" }]
+                    ], template: "<div\n  class=\"a-pry-select\"\n  [attr.aria-disabled]=\"disabled\"\n  #selectElement\n  [class.-focused]=\"focused\"\n  (click)=\"toggle()\"\n  role=\"combobox\"\n  [attr.aria-expanded]=\"open\"\n  [attr.aria-owns]=\"open ? modalId : null\"\n  aria-haspopup=\"listbox\"\n>\n  <ng-container *ngIf=\"autocomplete; else noAutocomplete\">\n    <input\n      type=\"text\"\n      class=\"a-pry-select__search\"\n      [ngModel]=\"search$.getValue()\"\n      (ngModelChange)=\"search($event)\"\n      (focus)=\"toggle(true)\"\n      aria-autocomplete=\"list\"\n      [attr.aria-controls]=\"open ? modalId : null\"\n      [attr.aria-disabled]=\"disabled\"\n      [disabled]=\"disabled\"\n    />\n  </ng-container>\n  <ng-template #noAutocomplete>\n    <ng-container *ngIf=\"(valueItems$ | async).length === 0; else selectedValues\">\n      <span class=\"a-pry-select__placeholder\">{{ placeholder }}</span>\n    </ng-container>\n    <ng-template #selectedValues>\n      <ng-container *ngFor=\"let item of valueItems$ | async\">\n        <div class=\"a-pry-select__value\" [class.pry-select-form]=\"isForm\" [class.-multiple]=\"multiple\">\n          <ng-container *ngIf=\"template; else noTemplateLabel\">\n            <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item, clear }\"></ng-container>\n          </ng-container>\n          <ng-template #noTemplateLabel>\n            <pry-icon\n              *ngIf=\"bindIcon\"\n              [iconSvg]=\"item[bindIcon]\"\n              [width]=\"iconSize[0]\"\n              [height]=\"iconSize[1]\"\n            ></pry-icon>\n            <ng-container *ngIf=\"bindLabel ? item?.[bindLabel] : item as value\">\n              {{ (i18nPrefix ?? '') + value | i18n : { warn: false } }}\n              <span\n                *ngIf=\"multiple && clearable\"\n                class=\"a-pry-select__clear\"\n                (click)=\"clear($event, item)\"\n                aria-hidden=\"true\"\n                >\u00D7</span\n              >\n            </ng-container>\n          </ng-template>\n        </div>\n      </ng-container>\n    </ng-template>\n    <div class=\"a-pry-select__filler\"></div>\n  </ng-template>\n  <span *ngIf=\"clearable\" class=\"a-pry-select__clear\" (click)=\"clearAll($event)\" aria-hidden=\"true\">\u00D7</span>\n  <pry-icon\n    class=\"a-pry-select__toggle\"\n    [iconSvg]=\"open ? 'chevron_top' : 'chevron_bottom'\"\n    [width]=\"iconSize[0]\"\n    [height]=\"iconSize[1]\"\n  ></pry-icon>\n</div>\n<ng-template #optionsModal>\n  <div\n    role=\"listbox\"\n    [attr.aria-label]=\"'@pry.select.label' | i18n\"\n    [id]=\"modalId\"\n    [attr.aria-activedescendant]=\"'select-option-' + activeDescendant\"\n    [attr.aria-multiselectable]=\"multiple\"\n    [attr.required]=\"required\"\n    [attr.aria-readonly]=\"readonly\"\n  >\n    <div class=\"a-pry-select__options__option -hint\" *ngIf=\"loading\" [style.width.px]=\"modalWidth\">\n      <div class=\"no-widget no-widget__loader\">\n        <pry-icon\n          iconSvg=\"loader\"\n          class=\"no-widget__loading\"\n          [alt]=\"'@pry.widget.target.loading' | i18n\"\n          [width]=\"30\"\n          [height]=\"30\"\n          *ngIf=\"loading\"\n        />\n      </div>\n      <p>{{ '@pry.select.loading' | i18n }}...</p>\n    </div>\n    <ng-container *ngIf=\"!loading\">\n      <ng-container *ngFor=\"let item of matchingItems$ | async; let index = index\">\n        <div\n          class=\"a-pry-select__options__option\"\n          [attr.aria-selected]=\"(valueItems$ | async).includes(item)\"\n          [attr.aria-checked]=\"(valueItems$ | async).includes(item)\"\n          [attr.aria-disabled]=\"disabled\"\n          (click)=\"select($event, item, index)\"\n          [style.width.px]=\"modalWidth\"\n          role=\"option\"\n          [id]=\"'select-option-' + index\"\n        >\n          <ng-container *ngIf=\"template; else noTemplate\">\n            <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item, clear }\"></ng-container>\n          </ng-container>\n          <ng-template #noTemplate>\n            <pry-icon\n              *ngIf=\"bindIcon\"\n              [iconSvg]=\"item[bindIcon]\"\n              [width]=\"iconSize[0]\"\n              [height]=\"iconSize[1]\"\n            ></pry-icon>\n            <ng-container *ngIf=\"bindLabel ? item?.[bindLabel] : item as value\">\n              {{ (i18nPrefix ? i18nPrefix : '') + value | i18n : { warn: false } }}\n            </ng-container>\n          </ng-template>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i2.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { items: [{
                 type: Input
             }], clearable: [{
@@ -6780,6 +6793,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }], cleared: [{
                 type: Output
+            }], loading: [{
+                type: Input
             }], optionsModal: [{
                 type: ViewChild,
                 args: ['optionsModal', { read: TemplateRef }]
@@ -6979,7 +6994,7 @@ class PryShareComponent {
                 useExisting: forwardRef(() => PryShareComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<div class=\"m-form-label-field\">\n  <label class=\"a-label\" for=\"share_type\">{{ '@pry.share.type' | i18n }}</label>\n  <pry-select\n    (ngModelChange)=\"writeValueType($event)\"\n    [items]=\"visibilityTypes\"\n    [ngModel]=\"value?.type\"\n    [disabled]=\"_disabled\"\n    i18nPrefix=\"@pry.share.\"\n    bindValue=\"value\"\n    bindLabel=\"label\"\n    id=\"share_type\"\n    bindIcon=\"icon\"\n    [iconSize]=\"[21, 18]\"\n  ></pry-select>\n</div>\n\n<ng-container *ngIf=\"value?.type === PryVisibilityType.RESTRICTED\">\n  <div class=\"m-form-label-field\">\n    <label class=\"a-label\" for=\"users\">{{ '@pry.share.users' | i18n }}</label>\n    <pry-select\n      (ngModelChange)=\"writeValueUsers($event)\"\n      [items]=\"users$ | async\"\n      [multiple]=\"true\"\n      [closeOnSelect]=\"false\"\n      [ngModel]=\"value?.users\"\n      [disabled]=\"_disabled\"\n      [bindLabel]=\"labelProperty\"\n      [bindValue]=\"valueProperty\"\n      [autocomplete]=\"true\"\n      id=\"users\"\n    ></pry-select>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "autocomplete", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "elementRef"], outputs: ["searched", "cleared"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<div class=\"m-form-label-field\">\n  <label class=\"a-label\" for=\"share_type\">{{ '@pry.share.type' | i18n }}</label>\n  <pry-select\n    (ngModelChange)=\"writeValueType($event)\"\n    [items]=\"visibilityTypes\"\n    [ngModel]=\"value?.type\"\n    [disabled]=\"_disabled\"\n    i18nPrefix=\"@pry.share.\"\n    bindValue=\"value\"\n    bindLabel=\"label\"\n    id=\"share_type\"\n    bindIcon=\"icon\"\n    [iconSize]=\"[21, 18]\"\n  ></pry-select>\n</div>\n\n<ng-container *ngIf=\"value?.type === PryVisibilityType.RESTRICTED\">\n  <div class=\"m-form-label-field\">\n    <label class=\"a-label\" for=\"users\">{{ '@pry.share.users' | i18n }}</label>\n    <pry-select\n      (ngModelChange)=\"writeValueUsers($event)\"\n      [items]=\"users$ | async\"\n      [multiple]=\"true\"\n      [closeOnSelect]=\"false\"\n      [ngModel]=\"value?.users\"\n      [disabled]=\"_disabled\"\n      [bindLabel]=\"labelProperty\"\n      [bindValue]=\"valueProperty\"\n      [autocomplete]=\"true\"\n      id=\"users\"\n    ></pry-select>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "autocomplete", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "loading", "elementRef"], outputs: ["searched", "cleared"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PryShareComponent, decorators: [{
             type: Component,
@@ -7943,7 +7958,7 @@ class PryObjectEditionComponent extends SubscriptionnerDirective {
         this.inversion = !this.inversion;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PryObjectEditionComponent, deps: [{ token: i2.Overlay }, { token: i0.ViewContainerRef }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PryObjectEditionComponent, selector: "pry-object-creation", inputs: { link: "link", object: "object", menu: "menu" }, outputs: { closed: "closed" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<button type=\"button\" class=\"a-btn -link-like\" (click)=\"openCreateObjectPanel($event)\" *ngIf=\"menu\">\n  {{ '@pry.context.createObject.title.' + (link && object ? 'linkedObject' : link ? 'link' : 'object') | i18n }}\n</button>\n<button\n  id=\"object_creator_link\"\n  type=\"button\"\n  (click)=\"openCreateObjectPanel($event)\"\n  *ngIf=\"!menu\"\n  class=\"a-btn a-btn--ghost -circle u-floating u-floating--bottom-right\"\n  [title]=\"'@pry.context.createObject.title.object' | i18n\"\n>\n  <span class=\"u-visually-hidden\">{{ '@pry.context.createObject.title.object' | i18n }}</span>\n  <pry-icon iconSvg=\"add_column\" [width]=\"24\" [height]=\"24\" aria-hidden=\"true\"></pry-icon>\n</button>\n\n<ng-template #template>\n  <div class=\"o-settings__popup\">\n    <div class=\"o-settings__popup__content\">\n      <ng-container *ngIf=\"link\">\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label\" for=\"createobject_link\">{{ '@pry.context.createObject.title.link' | i18n }}</label>\n          <pry-select\n            [(ngModel)]=\"relation.typeId\"\n            [items]=\"relations$ | async\"\n            bindLabel=\"label\"\n            bindValue=\"id\"\n            id=\"createobject_link\"\n          ></pry-select>\n        </div>\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label\" for=\"createobject_inversion\">{{\n            '@pry.context.createObject.title.inversion' | i18n\n          }}</label>\n          <pry-checkbox\n            id=\"createobject_inversion\"\n            [ngModel]=\"inversion\"\n            (ngModelChange)=\"toggleInversion()\"\n          ></pry-checkbox>\n        </div>\n      </ng-container>\n\n      <div class=\"o-object-panel\" *ngIf=\"object\">\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label\" for=\"createobject_class\">{{ '@pry.context.createObject.class' | i18n }}</label>\n          <pry-select\n            [ngModel]=\"tmpObject.oClass\"\n            (ngModelChange)=\"changeClass($event)\"\n            [items]=\"classes\"\n            bindValue=\"id\"\n            bindLabel=\"name\"\n            id=\"createobject_class\"\n          ></pry-select>\n        </div>\n\n        <ng-container *ngFor=\"let attribute of attributes\" [class.multi-value]=\"attribute.multiValued\">\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\">{{ attribute.name }}</label>\n            <ng-container *ngIf=\"!attribute.multiValued\">\n              <ng-container [ngSwitch]=\"fieldType(attribute)\">\n                <ng-container *ngSwitchCase=\"FieldType.INSTANT\">\n                  <div class=\"a-date-input\" tabindex=\"-1\" (blur)=\"closeDatePicker($event)\">\n                    <input\n                      type=\"datetime-local\"\n                      class=\"a-form-field\"\n                      [ngModel]=\"value(attribute)\"\n                      (ngModelChange)=\"assignValue(attribute, $event)\"\n                    />\n                    <div class=\"a-open-date-picker\" (mousedown)=\"toggleDatePicker($event, attribute.id)\"></div>\n                    <div class=\"date-picker-container\" *ngIf=\"selectedDatePicker === attribute.id\">\n                      <pry-date-picker\n                        [ngModel]=\"value(attribute)\"\n                        (ngModelChange)=\"assignValue(attribute, $event)\"\n                        [roundSelection]=\"true\"\n                        [timePicker]=\"true\"\n                      ></pry-date-picker>\n                    </div>\n                  </div>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"FieldType.DECIMAL\">\n                  <input\n                    type=\"number\"\n                    step=\"any\"\n                    class=\"a-form-field\"\n                    [ngModel]=\"value(attribute)\"\n                    (ngModelChange)=\"assignValue(attribute, $event)\"\n                  />\n                </ng-container>\n                <ng-container *ngSwitchCase=\"FieldType.INTEGER\">\n                  <input\n                    type=\"number\"\n                    class=\"a-form-field\"\n                    [ngModel]=\"value(attribute)\"\n                    (ngModelChange)=\"assignValue(attribute, $event)\"\n                  />\n                </ng-container>\n                <ng-container *ngSwitchDefault>\n                  <input\n                    type=\"text\"\n                    class=\"a-form-field\"\n                    [ngModel]=\"value(attribute)\"\n                    (ngModelChange)=\"assignValue(attribute, $event)\"\n                  />\n                </ng-container>\n                <ng-container *ngSwitchCase=\"FieldType.RAW\">\n                  <pry-select\n                    [ngModel]=\"method\"\n                    (ngModelChange)=\"setRawMethod(attribute, $event)\"\n                    [items]=\"rawMethods\"\n                    bindValue=\"id\"\n                    bindLabel=\"name\"\n                  ></pry-select>\n                  <input\n                    type=\"text\"\n                    class=\"a-form-field\"\n                    *ngIf=\"method === HTTP_ORIGIN_METHOD\"\n                    [ngModel]=\"valueMetadata(attribute, HTTP_ORIGIN_METADATA)\"\n                    (ngModelChange)=\"assignMetadata(attribute, $event, HTTP_ORIGIN_METADATA)\"\n                  />\n                  <ng-container *ngIf=\"method === UPLOAD_METHOD\">\n                    <pry-upload\n                      mode=\"doc\"\n                      accept=\"image/*,video/*\"\n                      (uploaded)=\"assignValue(attribute, $event)\"\n                    ></pry-upload>\n                  </ng-container>\n                </ng-container>\n              </ng-container>\n            </ng-container>\n          </div>\n\n          <div class=\"multi-value-container\" *ngIf=\"attribute.multiValued\">\n            <button\n              class=\"button-add a-btn a-btn--secondary a-btn--icon-text -size-sm\"\n              (click)=\"addMultiValued(attribute)\"\n            >\n              <pry-icon iconSvg=\"add\"></pry-icon>\n              <span>{{ '@pry.context.createObject.addMultiField' | i18n : { name: attribute.name } }}</span>\n            </button>\n            <div class=\"multi-value\" *ngFor=\"let multiValue of multiValues(attribute); let i = index\">\n              <ng-container [ngSwitch]=\"fieldType(attribute)\">\n                <ng-container *ngSwitchCase=\"FieldType.INSTANT\">\n                  <input\n                    type=\"datetime-local\"\n                    [ngModel]=\"valueMulti(attribute, i)\"\n                    (focusout)=\"assignValueMulti(attribute, $event, i)\"\n                  />\n                </ng-container>\n                <ng-container *ngSwitchCase=\"FieldType.DECIMAL\">\n                  <input\n                    type=\"number\"\n                    step=\"any\"\n                    [ngModel]=\"valueMulti(attribute, i)\"\n                    (ngModelChange)=\"assignValueMulti(attribute, $event, i)\"\n                  />\n                </ng-container>\n                <ng-container *ngSwitchCase=\"FieldType.INTEGER\">\n                  <input\n                    type=\"number\"\n                    [ngModel]=\"valueMulti(attribute, i)\"\n                    (ngModelChange)=\"assignValueMulti(attribute, $event, i)\"\n                  />\n                </ng-container>\n                <ng-container *ngSwitchDefault>\n                  <input\n                    type=\"text\"\n                    [ngModel]=\"valueMulti(attribute, i)\"\n                    (ngModelChange)=\"assignValueMulti(attribute, $event, i)\"\n                  />\n                </ng-container>\n                <button (click)=\"removeMultiValued(attribute, i)\">\n                  <pry-icon iconSvg=\"delete\"></pry-icon>\n                </button>\n              </ng-container>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n    <div class=\"m-btn-group\">\n      <button type=\"button\" class=\"a-btn a-btn--secondary\" (click)=\"hide()\">\n        {{ '@pry.context.cancel' | i18n }}\n      </button>\n      <button type=\"button\" class=\"a-btn a-btn--primary\" (click)=\"createObjects()\" [disabled]=\"!valid\">\n        {{ '@pry.context.create' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "autocomplete", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "elementRef"], outputs: ["searched", "cleared"] }, { kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: PryUploadComponent, selector: "pry-upload", inputs: ["mode", "accept", "labelTranslate"], outputs: ["uploaded", "uploadedFile"] }, { kind: "component", type: i8.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle"] }, { kind: "component", type: PryDatePickerComponent, selector: "pry-date-picker", inputs: ["rangePicker", "timePicker", "maxYear", "minYear", "roundSelection"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PryObjectEditionComponent, selector: "pry-object-creation", inputs: { link: "link", object: "object", menu: "menu" }, outputs: { closed: "closed" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<button type=\"button\" class=\"a-btn -link-like\" (click)=\"openCreateObjectPanel($event)\" *ngIf=\"menu\">\n  {{ '@pry.context.createObject.title.' + (link && object ? 'linkedObject' : link ? 'link' : 'object') | i18n }}\n</button>\n<button\n  id=\"object_creator_link\"\n  type=\"button\"\n  (click)=\"openCreateObjectPanel($event)\"\n  *ngIf=\"!menu\"\n  class=\"a-btn a-btn--ghost -circle u-floating u-floating--bottom-right\"\n  [title]=\"'@pry.context.createObject.title.object' | i18n\"\n>\n  <span class=\"u-visually-hidden\">{{ '@pry.context.createObject.title.object' | i18n }}</span>\n  <pry-icon iconSvg=\"add_column\" [width]=\"24\" [height]=\"24\" aria-hidden=\"true\"></pry-icon>\n</button>\n\n<ng-template #template>\n  <div class=\"o-settings__popup\">\n    <div class=\"o-settings__popup__content\">\n      <ng-container *ngIf=\"link\">\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label\" for=\"createobject_link\">{{ '@pry.context.createObject.title.link' | i18n }}</label>\n          <pry-select\n            [(ngModel)]=\"relation.typeId\"\n            [items]=\"relations$ | async\"\n            bindLabel=\"label\"\n            bindValue=\"id\"\n            id=\"createobject_link\"\n          ></pry-select>\n        </div>\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label\" for=\"createobject_inversion\">{{\n            '@pry.context.createObject.title.inversion' | i18n\n          }}</label>\n          <pry-checkbox\n            id=\"createobject_inversion\"\n            [ngModel]=\"inversion\"\n            (ngModelChange)=\"toggleInversion()\"\n          ></pry-checkbox>\n        </div>\n      </ng-container>\n\n      <div class=\"o-object-panel\" *ngIf=\"object\">\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label\" for=\"createobject_class\">{{ '@pry.context.createObject.class' | i18n }}</label>\n          <pry-select\n            [ngModel]=\"tmpObject.oClass\"\n            (ngModelChange)=\"changeClass($event)\"\n            [items]=\"classes\"\n            bindValue=\"id\"\n            bindLabel=\"name\"\n            id=\"createobject_class\"\n          ></pry-select>\n        </div>\n\n        <ng-container *ngFor=\"let attribute of attributes\" [class.multi-value]=\"attribute.multiValued\">\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\">{{ attribute.name }}</label>\n            <ng-container *ngIf=\"!attribute.multiValued\">\n              <ng-container [ngSwitch]=\"fieldType(attribute)\">\n                <ng-container *ngSwitchCase=\"FieldType.INSTANT\">\n                  <div class=\"a-date-input\" tabindex=\"-1\" (blur)=\"closeDatePicker($event)\">\n                    <input\n                      type=\"datetime-local\"\n                      class=\"a-form-field\"\n                      [ngModel]=\"value(attribute)\"\n                      (ngModelChange)=\"assignValue(attribute, $event)\"\n                    />\n                    <div class=\"a-open-date-picker\" (mousedown)=\"toggleDatePicker($event, attribute.id)\"></div>\n                    <div class=\"date-picker-container\" *ngIf=\"selectedDatePicker === attribute.id\">\n                      <pry-date-picker\n                        [ngModel]=\"value(attribute)\"\n                        (ngModelChange)=\"assignValue(attribute, $event)\"\n                        [roundSelection]=\"true\"\n                        [timePicker]=\"true\"\n                      ></pry-date-picker>\n                    </div>\n                  </div>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"FieldType.DECIMAL\">\n                  <input\n                    type=\"number\"\n                    step=\"any\"\n                    class=\"a-form-field\"\n                    [ngModel]=\"value(attribute)\"\n                    (ngModelChange)=\"assignValue(attribute, $event)\"\n                  />\n                </ng-container>\n                <ng-container *ngSwitchCase=\"FieldType.INTEGER\">\n                  <input\n                    type=\"number\"\n                    class=\"a-form-field\"\n                    [ngModel]=\"value(attribute)\"\n                    (ngModelChange)=\"assignValue(attribute, $event)\"\n                  />\n                </ng-container>\n                <ng-container *ngSwitchDefault>\n                  <input\n                    type=\"text\"\n                    class=\"a-form-field\"\n                    [ngModel]=\"value(attribute)\"\n                    (ngModelChange)=\"assignValue(attribute, $event)\"\n                  />\n                </ng-container>\n                <ng-container *ngSwitchCase=\"FieldType.RAW\">\n                  <pry-select\n                    [ngModel]=\"method\"\n                    (ngModelChange)=\"setRawMethod(attribute, $event)\"\n                    [items]=\"rawMethods\"\n                    bindValue=\"id\"\n                    bindLabel=\"name\"\n                  ></pry-select>\n                  <input\n                    type=\"text\"\n                    class=\"a-form-field\"\n                    *ngIf=\"method === HTTP_ORIGIN_METHOD\"\n                    [ngModel]=\"valueMetadata(attribute, HTTP_ORIGIN_METADATA)\"\n                    (ngModelChange)=\"assignMetadata(attribute, $event, HTTP_ORIGIN_METADATA)\"\n                  />\n                  <ng-container *ngIf=\"method === UPLOAD_METHOD\">\n                    <pry-upload\n                      mode=\"doc\"\n                      accept=\"image/*,video/*\"\n                      (uploaded)=\"assignValue(attribute, $event)\"\n                    ></pry-upload>\n                  </ng-container>\n                </ng-container>\n              </ng-container>\n            </ng-container>\n          </div>\n\n          <div class=\"multi-value-container\" *ngIf=\"attribute.multiValued\">\n            <button\n              class=\"button-add a-btn a-btn--secondary a-btn--icon-text -size-sm\"\n              (click)=\"addMultiValued(attribute)\"\n            >\n              <pry-icon iconSvg=\"add\"></pry-icon>\n              <span>{{ '@pry.context.createObject.addMultiField' | i18n : { name: attribute.name } }}</span>\n            </button>\n            <div class=\"multi-value\" *ngFor=\"let multiValue of multiValues(attribute); let i = index\">\n              <ng-container [ngSwitch]=\"fieldType(attribute)\">\n                <ng-container *ngSwitchCase=\"FieldType.INSTANT\">\n                  <input\n                    type=\"datetime-local\"\n                    [ngModel]=\"valueMulti(attribute, i)\"\n                    (focusout)=\"assignValueMulti(attribute, $event, i)\"\n                  />\n                </ng-container>\n                <ng-container *ngSwitchCase=\"FieldType.DECIMAL\">\n                  <input\n                    type=\"number\"\n                    step=\"any\"\n                    [ngModel]=\"valueMulti(attribute, i)\"\n                    (ngModelChange)=\"assignValueMulti(attribute, $event, i)\"\n                  />\n                </ng-container>\n                <ng-container *ngSwitchCase=\"FieldType.INTEGER\">\n                  <input\n                    type=\"number\"\n                    [ngModel]=\"valueMulti(attribute, i)\"\n                    (ngModelChange)=\"assignValueMulti(attribute, $event, i)\"\n                  />\n                </ng-container>\n                <ng-container *ngSwitchDefault>\n                  <input\n                    type=\"text\"\n                    [ngModel]=\"valueMulti(attribute, i)\"\n                    (ngModelChange)=\"assignValueMulti(attribute, $event, i)\"\n                  />\n                </ng-container>\n                <button (click)=\"removeMultiValued(attribute, i)\">\n                  <pry-icon iconSvg=\"delete\"></pry-icon>\n                </button>\n              </ng-container>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n    <div class=\"m-btn-group\">\n      <button type=\"button\" class=\"a-btn a-btn--secondary\" (click)=\"hide()\">\n        {{ '@pry.context.cancel' | i18n }}\n      </button>\n      <button type=\"button\" class=\"a-btn a-btn--primary\" (click)=\"createObjects()\" [disabled]=\"!valid\">\n        {{ '@pry.context.create' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "autocomplete", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "loading", "elementRef"], outputs: ["searched", "cleared"] }, { kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: PryUploadComponent, selector: "pry-upload", inputs: ["mode", "accept", "labelTranslate"], outputs: ["uploaded", "uploadedFile"] }, { kind: "component", type: i8.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle"] }, { kind: "component", type: PryDatePickerComponent, selector: "pry-date-picker", inputs: ["rangePicker", "timePicker", "maxYear", "minYear", "roundSelection"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PryObjectEditionComponent, decorators: [{
             type: Component,