@quadrel-enterprise-ui/framework 19.8.0 → 19.9.0-beta.104.1

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.
@@ -11258,6 +11258,10 @@ class QdInputComponent {
11258
11258
  this.clearable = getClearable(this.config) && !this.disabled;
11259
11259
  }
11260
11260
  handleInput(event) {
11261
+ const { target } = event;
11262
+ const input = target;
11263
+ if (input?.validity?.badInput)
11264
+ return;
11261
11265
  const value = event.target.value;
11262
11266
  this._value = { ...this._value, value };
11263
11267
  this.emitValue();
@@ -13433,6 +13437,7 @@ class QdMultiInputComponent {
13433
13437
  this.id = v4();
13434
13438
  this.multiInputService.optionsListForView$.pipe(takeUntilDestroyed()).subscribe(list => {
13435
13439
  this.optionsListForView = list;
13440
+ this.changeDetectorRef.markForCheck();
13436
13441
  });
13437
13442
  }
13438
13443
  ngOnInit() {
@@ -13447,10 +13452,18 @@ class QdMultiInputComponent {
13447
13452
  return;
13448
13453
  if (this.formArrayName) {
13449
13454
  const formArray = this.controlContainer.control.get(this.formArrayName);
13455
+ if (!formArray) {
13456
+ console.warn('QD-UI | QdMultiInputComponent - No form control found for the provided [formArrayName]', this.formArrayName);
13457
+ return;
13458
+ }
13450
13459
  // Updating form array programmatically from outside
13451
- this._subs.add(formArray.valueChanges.subscribe(() => {
13452
- this.multiInputService.setSelectedItems(this.formArray.value);
13453
- this.valuesChange.emit(this.formArray.value);
13460
+ this._subs.add(formArray.valueChanges.subscribe(value => {
13461
+ this.multiInputService.setSelectedItems(value);
13462
+ this.valuesChange.emit(value);
13463
+ this.changeDetectorRef.markForCheck();
13464
+ }));
13465
+ this._subs.add(formArray.statusChanges.subscribe(() => {
13466
+ this.changeDetectorRef.markForCheck();
13454
13467
  }));
13455
13468
  if (formArray instanceof QdFormArray) {
13456
13469
  this.formArray = formArray;
@@ -18136,6 +18149,9 @@ class QdContactCardComponent {
18136
18149
  }
18137
18150
  return this.contactData.phoneNumber;
18138
18151
  }
18152
+ get phoneUrl() {
18153
+ return this.hasPhoneUrl() ? this.contactData.phoneUrl : '';
18154
+ }
18139
18155
  get emailAddress() {
18140
18156
  if (!this.hasEmailAddress()) {
18141
18157
  if (!this.hasPlaceholders)
@@ -18162,6 +18178,9 @@ class QdContactCardComponent {
18162
18178
  hasPhoneNumber() {
18163
18179
  return !!this.contactData.phoneNumber;
18164
18180
  }
18181
+ hasPhoneUrl() {
18182
+ return !!this.contactData.phoneUrl;
18183
+ }
18165
18184
  hasAddress() {
18166
18185
  return !!this.contactData.address;
18167
18186
  }
@@ -18175,11 +18194,11 @@ class QdContactCardComponent {
18175
18194
  return !!this.contactData.emailAddress;
18176
18195
  }
18177
18196
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdContactCardComponent, deps: [{ token: i1$3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
18178
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: QdContactCardComponent, isStandalone: false, selector: "qd-contact-card", inputs: { contactData: "contactData", actions: "actions", hasPlaceholders: "hasPlaceholders", testId: ["data-test-id", "testId"] }, outputs: { emailAddressClicked: "emailAddressClicked" }, ngImport: i0, template: "<qd-contact-card-menu\n *ngIf=\"actions && actions.length > 0\"\n [contactData]=\"contactData\"\n [actions]=\"actions\"\n [data-test-id]=\"testId + '-menu'\"\n></qd-contact-card-menu>\n<p class=\"contact-function\">\n {{ contactFunction | translate }} <span *ngIf=\"hasTag()\" class=\"tag\">{{ contactTag | translate }}</span>\n</p>\n<p>\n <span class=\"title\" [class.placeholder]=\"!hasCompanyName()\">{{ companyName }}</span>\n <span class=\"subtitle\" [class.placeholder]=\"!hasBusinessPartnerId()\">{{ businessPartnerId }}</span>\n</p>\n<p>\n <span [class.placeholder]=\"!hasContactPerson()\">{{ firstName }} {{ lastName }}</span>\n <span [class.placeholder]=\"!hasCareOf()\">{{ careOf }}</span>\n <span [class.placeholder]=\"!hasStreet()\">{{ street }}</span>\n <span [class.placeholder]=\"!hasAddress()\">{{ countryCode }}{{ postalCode }} {{ city }}</span>\n</p>\n<p>\n <span [class.placeholder]=\"!hasPhoneNumber()\">{{ phoneNumber }}</span>\n <a\n [class.placeholder]=\"!hasEmailAddress()\"\n [attr.href]=\"hasEmailAddress() ? 'mailto:' + emailAddress : null\"\n (click)=\"hasEmailAddress() ? emailAddressClicked.emit($event) : null\"\n >\n {{ emailAddress }}\n </a>\n</p>\n<p *ngIf=\"customFields && customFields.length > 0\">\n <span *ngFor=\"let customField of customFields\">\n <label *ngIf=\"customField.label\">\n <ng-container\n [ngTemplateOutlet]=\"translate\"\n [ngTemplateOutletContext]=\"{ translatableOrText: customField.label }\"\n ></ng-container>\n </label>\n\n <ng-container\n [ngTemplateOutlet]=\"translate\"\n [ngTemplateOutletContext]=\"{ translatableOrText: customField.value }\"\n ></ng-container>\n </span>\n</p>\n\n<ng-template #translate let-translatableOrText=\"translatableOrText\">\n <ng-container *ngIf=\"translatableOrText.i18n; else plainText\">{{ translatableOrText.i18n | translate }}</ng-container>\n <ng-template #plainText>{{ translatableOrText }}</ng-template>\n</ng-template>\n", styles: [":host{position:relative;display:inline-block;width:23rem;min-height:15.5625rem;padding:.5625rem 1.4375rem;border:solid .0625rem rgb(213,213,213);margin:0 1.0625rem 1.0625rem 0;background-color:#fff;color:#171717;font-size:.875rem;line-height:1.3125rem;vertical-align:top}:host p{margin:.75rem 0}:host span,:host a{display:block;height:auto}:host span>label{margin-right:.21875rem;color:#757575}:host .contact-function{display:flex;align-items:center;margin:.8125rem 0 .875rem;font-weight:500;line-height:1.125rem}:host .tag{display:inline;padding:.125rem .375rem;border-radius:.625rem;margin-left:.5rem;background-color:#454545;color:#fff;font-size:.625rem;line-height:.8125rem}:host .title{font-size:1.0625rem;font-weight:600}:host .subtitle{font-size:1rem}:host .placeholder{color:#979797;cursor:default;font-style:italic;text-decoration:none}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: QdContactCardMenuComponent, selector: "qd-contact-card-menu", inputs: ["contactData", "actions", "data-test-id"] }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
18197
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: QdContactCardComponent, isStandalone: false, selector: "qd-contact-card", inputs: { contactData: "contactData", actions: "actions", hasPlaceholders: "hasPlaceholders", testId: ["data-test-id", "testId"] }, outputs: { emailAddressClicked: "emailAddressClicked" }, ngImport: i0, template: "<qd-contact-card-menu\n *ngIf=\"actions && actions.length > 0\"\n [contactData]=\"contactData\"\n [actions]=\"actions\"\n [data-test-id]=\"testId + '-menu'\"\n></qd-contact-card-menu>\n<p class=\"contact-function\">\n {{ contactFunction | translate }} <span *ngIf=\"hasTag()\" class=\"tag\">{{ contactTag | translate }}</span>\n</p>\n<p>\n <span class=\"title\" [class.placeholder]=\"!hasCompanyName()\">{{ companyName }}</span>\n <span class=\"subtitle\" [class.placeholder]=\"!hasBusinessPartnerId()\">{{ businessPartnerId }}</span>\n</p>\n<p>\n <span [class.placeholder]=\"!hasContactPerson()\">{{ firstName }} {{ lastName }}</span>\n <span [class.placeholder]=\"!hasCareOf()\">{{ careOf }}</span>\n <span [class.placeholder]=\"!hasStreet()\">{{ street }}</span>\n <span [class.placeholder]=\"!hasAddress()\">{{ countryCode }}{{ postalCode }} {{ city }}</span>\n</p>\n<p>\n <span [class.placeholder]=\"!hasPhoneNumber()\">\n @if (hasPhoneNumber() && hasPhoneUrl()) {\n <a [attr.href]=\"phoneUrl\">{{ phoneNumber }}</a>\n } @else if (hasPhoneNumber()) {\n <a [attr.href]=\"'tel:' + phoneNumber\">{{ phoneNumber }}</a>\n } @else {\n {{ phoneNumber }}\n }\n </span>\n <a\n [class.placeholder]=\"!hasEmailAddress()\"\n [attr.href]=\"hasEmailAddress() ? 'mailto:' + emailAddress : null\"\n (click)=\"hasEmailAddress() ? emailAddressClicked.emit($event) : null\"\n >\n {{ emailAddress }}\n </a>\n</p>\n<p *ngIf=\"customFields && customFields.length > 0\">\n <span *ngFor=\"let customField of customFields\">\n <label *ngIf=\"customField.label\">\n <ng-container\n [ngTemplateOutlet]=\"translate\"\n [ngTemplateOutletContext]=\"{ translatableOrText: customField.label }\"\n ></ng-container>\n </label>\n\n <ng-container\n [ngTemplateOutlet]=\"translate\"\n [ngTemplateOutletContext]=\"{ translatableOrText: customField.value }\"\n ></ng-container>\n </span>\n</p>\n\n<ng-template #translate let-translatableOrText=\"translatableOrText\">\n <ng-container *ngIf=\"translatableOrText.i18n; else plainText\">{{ translatableOrText.i18n | translate }}</ng-container>\n <ng-template #plainText>{{ translatableOrText }}</ng-template>\n</ng-template>\n", styles: [":host{position:relative;display:inline-block;width:23rem;min-height:15.5625rem;padding:.5625rem 1.4375rem;border:solid .0625rem rgb(213,213,213);margin:0 1.0625rem 1.0625rem 0;background-color:#fff;color:#171717;font-size:.875rem;line-height:1.3125rem;vertical-align:top}:host p{margin:.75rem 0}:host span,:host a{display:block;height:auto}:host span>label{margin-right:.21875rem;color:#757575}:host .contact-function{display:flex;align-items:center;margin:.8125rem 0 .875rem;font-weight:500;line-height:1.125rem}:host .tag{display:inline;padding:.125rem .375rem;border-radius:.625rem;margin-left:.5rem;background-color:#454545;color:#fff;font-size:.625rem;line-height:.8125rem}:host .title{font-size:1.0625rem;font-weight:600}:host .subtitle{font-size:1rem}:host .placeholder{color:#979797;cursor:default;font-style:italic;text-decoration:none}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: QdContactCardMenuComponent, selector: "qd-contact-card-menu", inputs: ["contactData", "actions", "data-test-id"] }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
18179
18198
  }
18180
18199
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdContactCardComponent, decorators: [{
18181
18200
  type: Component,
18182
- args: [{ selector: 'qd-contact-card', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<qd-contact-card-menu\n *ngIf=\"actions && actions.length > 0\"\n [contactData]=\"contactData\"\n [actions]=\"actions\"\n [data-test-id]=\"testId + '-menu'\"\n></qd-contact-card-menu>\n<p class=\"contact-function\">\n {{ contactFunction | translate }} <span *ngIf=\"hasTag()\" class=\"tag\">{{ contactTag | translate }}</span>\n</p>\n<p>\n <span class=\"title\" [class.placeholder]=\"!hasCompanyName()\">{{ companyName }}</span>\n <span class=\"subtitle\" [class.placeholder]=\"!hasBusinessPartnerId()\">{{ businessPartnerId }}</span>\n</p>\n<p>\n <span [class.placeholder]=\"!hasContactPerson()\">{{ firstName }} {{ lastName }}</span>\n <span [class.placeholder]=\"!hasCareOf()\">{{ careOf }}</span>\n <span [class.placeholder]=\"!hasStreet()\">{{ street }}</span>\n <span [class.placeholder]=\"!hasAddress()\">{{ countryCode }}{{ postalCode }} {{ city }}</span>\n</p>\n<p>\n <span [class.placeholder]=\"!hasPhoneNumber()\">{{ phoneNumber }}</span>\n <a\n [class.placeholder]=\"!hasEmailAddress()\"\n [attr.href]=\"hasEmailAddress() ? 'mailto:' + emailAddress : null\"\n (click)=\"hasEmailAddress() ? emailAddressClicked.emit($event) : null\"\n >\n {{ emailAddress }}\n </a>\n</p>\n<p *ngIf=\"customFields && customFields.length > 0\">\n <span *ngFor=\"let customField of customFields\">\n <label *ngIf=\"customField.label\">\n <ng-container\n [ngTemplateOutlet]=\"translate\"\n [ngTemplateOutletContext]=\"{ translatableOrText: customField.label }\"\n ></ng-container>\n </label>\n\n <ng-container\n [ngTemplateOutlet]=\"translate\"\n [ngTemplateOutletContext]=\"{ translatableOrText: customField.value }\"\n ></ng-container>\n </span>\n</p>\n\n<ng-template #translate let-translatableOrText=\"translatableOrText\">\n <ng-container *ngIf=\"translatableOrText.i18n; else plainText\">{{ translatableOrText.i18n | translate }}</ng-container>\n <ng-template #plainText>{{ translatableOrText }}</ng-template>\n</ng-template>\n", styles: [":host{position:relative;display:inline-block;width:23rem;min-height:15.5625rem;padding:.5625rem 1.4375rem;border:solid .0625rem rgb(213,213,213);margin:0 1.0625rem 1.0625rem 0;background-color:#fff;color:#171717;font-size:.875rem;line-height:1.3125rem;vertical-align:top}:host p{margin:.75rem 0}:host span,:host a{display:block;height:auto}:host span>label{margin-right:.21875rem;color:#757575}:host .contact-function{display:flex;align-items:center;margin:.8125rem 0 .875rem;font-weight:500;line-height:1.125rem}:host .tag{display:inline;padding:.125rem .375rem;border-radius:.625rem;margin-left:.5rem;background-color:#454545;color:#fff;font-size:.625rem;line-height:.8125rem}:host .title{font-size:1.0625rem;font-weight:600}:host .subtitle{font-size:1rem}:host .placeholder{color:#979797;cursor:default;font-style:italic;text-decoration:none}\n"] }]
18201
+ args: [{ selector: 'qd-contact-card', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<qd-contact-card-menu\n *ngIf=\"actions && actions.length > 0\"\n [contactData]=\"contactData\"\n [actions]=\"actions\"\n [data-test-id]=\"testId + '-menu'\"\n></qd-contact-card-menu>\n<p class=\"contact-function\">\n {{ contactFunction | translate }} <span *ngIf=\"hasTag()\" class=\"tag\">{{ contactTag | translate }}</span>\n</p>\n<p>\n <span class=\"title\" [class.placeholder]=\"!hasCompanyName()\">{{ companyName }}</span>\n <span class=\"subtitle\" [class.placeholder]=\"!hasBusinessPartnerId()\">{{ businessPartnerId }}</span>\n</p>\n<p>\n <span [class.placeholder]=\"!hasContactPerson()\">{{ firstName }} {{ lastName }}</span>\n <span [class.placeholder]=\"!hasCareOf()\">{{ careOf }}</span>\n <span [class.placeholder]=\"!hasStreet()\">{{ street }}</span>\n <span [class.placeholder]=\"!hasAddress()\">{{ countryCode }}{{ postalCode }} {{ city }}</span>\n</p>\n<p>\n <span [class.placeholder]=\"!hasPhoneNumber()\">\n @if (hasPhoneNumber() && hasPhoneUrl()) {\n <a [attr.href]=\"phoneUrl\">{{ phoneNumber }}</a>\n } @else if (hasPhoneNumber()) {\n <a [attr.href]=\"'tel:' + phoneNumber\">{{ phoneNumber }}</a>\n } @else {\n {{ phoneNumber }}\n }\n </span>\n <a\n [class.placeholder]=\"!hasEmailAddress()\"\n [attr.href]=\"hasEmailAddress() ? 'mailto:' + emailAddress : null\"\n (click)=\"hasEmailAddress() ? emailAddressClicked.emit($event) : null\"\n >\n {{ emailAddress }}\n </a>\n</p>\n<p *ngIf=\"customFields && customFields.length > 0\">\n <span *ngFor=\"let customField of customFields\">\n <label *ngIf=\"customField.label\">\n <ng-container\n [ngTemplateOutlet]=\"translate\"\n [ngTemplateOutletContext]=\"{ translatableOrText: customField.label }\"\n ></ng-container>\n </label>\n\n <ng-container\n [ngTemplateOutlet]=\"translate\"\n [ngTemplateOutletContext]=\"{ translatableOrText: customField.value }\"\n ></ng-container>\n </span>\n</p>\n\n<ng-template #translate let-translatableOrText=\"translatableOrText\">\n <ng-container *ngIf=\"translatableOrText.i18n; else plainText\">{{ translatableOrText.i18n | translate }}</ng-container>\n <ng-template #plainText>{{ translatableOrText }}</ng-template>\n</ng-template>\n", styles: [":host{position:relative;display:inline-block;width:23rem;min-height:15.5625rem;padding:.5625rem 1.4375rem;border:solid .0625rem rgb(213,213,213);margin:0 1.0625rem 1.0625rem 0;background-color:#fff;color:#171717;font-size:.875rem;line-height:1.3125rem;vertical-align:top}:host p{margin:.75rem 0}:host span,:host a{display:block;height:auto}:host span>label{margin-right:.21875rem;color:#757575}:host .contact-function{display:flex;align-items:center;margin:.8125rem 0 .875rem;font-weight:500;line-height:1.125rem}:host .tag{display:inline;padding:.125rem .375rem;border-radius:.625rem;margin-left:.5rem;background-color:#454545;color:#fff;font-size:.625rem;line-height:.8125rem}:host .title{font-size:1.0625rem;font-weight:600}:host .subtitle{font-size:1rem}:host .placeholder{color:#979797;cursor:default;font-style:italic;text-decoration:none}\n"] }]
18183
18202
  }], ctorParameters: () => [{ type: i1$3.TranslateService }], propDecorators: { contactData: [{
18184
18203
  type: Input
18185
18204
  }], actions: [{
@@ -27864,7 +27883,7 @@ class QdPageObjectHeaderComponent {
27864
27883
  return !!this.dialogComponent;
27865
27884
  }
27866
27885
  toggleFacets() {
27867
- if (!this.adaptiveMode || (this.headerFacets?.length ?? 0) >= 2)
27886
+ if (!this.adaptiveMode || (this.headerFacets?.length ?? 0) + this._availableContexts <= 2)
27868
27887
  return;
27869
27888
  this.facetsCollapsed = !this.facetsCollapsed;
27870
27889
  }
@@ -27875,6 +27894,7 @@ class QdPageObjectHeaderComponent {
27875
27894
  _isLoadingSubject = new BehaviorSubject(false);
27876
27895
  _customActionsSubject = new BehaviorSubject({ actions: [] });
27877
27896
  _destroyed$ = new Subject();
27897
+ _availableContexts = 0;
27878
27898
  pageObjectData$ = this._pageObjectDataSubject.asObservable();
27879
27899
  isLoading$ = this._isLoadingSubject.asObservable().pipe(debounceTime(400));
27880
27900
  customActions$ = this._customActionsSubject.asObservable();
@@ -27971,13 +27991,13 @@ class QdPageObjectHeaderComponent {
27971
27991
  };
27972
27992
  this.setupResolverTrigger();
27973
27993
  }
27974
- this.initContexts();
27975
27994
  }
27976
27995
  ngOnInit() {
27977
27996
  if (this.pageObjectResolver)
27978
27997
  this.setupResolverTrigger();
27979
27998
  this.updateCustomActions();
27980
27999
  this.formGroupManagerService.takeFormGroupsSnapshot();
28000
+ this.initContexts();
27981
28001
  }
27982
28002
  ngOnChanges(changes) {
27983
28003
  if (changes['config'] && !changes['config'].firstChange)
@@ -28059,6 +28079,9 @@ class QdPageObjectHeaderComponent {
28059
28079
  context,
28060
28080
  selection: selection?.value ?? []
28061
28081
  }))));
28082
+ this.contexts$
28083
+ .pipe(takeUntil(this._destroyed$), tap(contexts => (this._availableContexts = contexts?.length ?? 0)))
28084
+ .subscribe();
28062
28085
  }
28063
28086
  updateCustomActions() {
28064
28087
  if (this.config.pageType === 'inspect') {
@@ -28099,11 +28122,11 @@ class QdPageObjectHeaderComponent {
28099
28122
  });
28100
28123
  }
28101
28124
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdPageObjectHeaderComponent, deps: [{ token: QD_PAGE_OBJECT_RESOLVER_TOKEN, optional: true }, { token: QdFormGroupManagerService, optional: true }, { token: QdDialogComponent, optional: true }, { token: QdDialogService }, { token: QdContextService }, { token: QdResolverTriggerService }, { token: QdPageStoreService }], target: i0.ɵɵFactoryTarget.Component });
28102
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: QdPageObjectHeaderComponent, isStandalone: false, selector: "qd-page-object-header", inputs: { config: "config", hasNavigation: "hasNavigation", testId: ["data-test-id", "testId"] }, host: { listeners: { "click": "toggleFacets()" }, properties: { "style.borderBottom": "borderBottomStyle", "class.in-dialog": "this.isInDialog" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"loading-overlay\" *ngIf=\"isLoading$ | async\"><qd-spinner></qd-spinner></div>\n\n<div class=\"object-header-top\">\n <header class=\"object-header-title\">{{ config.title.i18n | translate }}</header>\n <div class=\"object-header-toolbar\">\n <button class=\"button-icon\" data-test-id=\"archive-button\">\n <qd-icon\n *ngIf=\"showArchive$ | async\"\n (click)=\"archiveButton?.handler()\"\n class=\"header-action-icon\"\n [icon]=\"'resultNew'\"\n ></qd-icon>\n </button>\n\n <button class=\"button-icon\" data-test-id=\"delete-button\">\n <qd-icon\n class=\"header-action-icon\"\n *ngIf=\"showDelete$ | async\"\n (click)=\"deleteButton?.handler()\"\n [icon]=\"'trash'\"\n ></qd-icon>\n </button>\n\n <button *ngIf=\"showEdit$ | async\" qdButton (click)=\"edit()\" data-test-id=\"edit-button\">\n {{ editButton?.label?.i18n || \"i18n.qd.page.header.edit\" | translate }}\n </button>\n\n <button *ngIf=\"showCancel$ | async\" qdButton qdButtonGhost (click)=\"cancel()\" data-test-id=\"cancel-button\">\n {{ cancelButton.label?.i18n || \"i18n.qd.page.header.cancel\" | translate }}\n </button>\n\n <button\n *ngIf=\"showSave$ | async\"\n qdButton\n (click)=\"save()\"\n data-test-id=\"save-button\"\n [disabled]=\"($canSave | async) === false\"\n >\n {{ saveButton.label?.i18n || \"i18n.qd.page.header.save\" | translate }}\n </button>\n\n <ng-container *ngIf=\"customActions$ | async as customActions\">\n <ng-container *ngIf=\"!adaptiveMode; else adaptive\">\n <button\n [qdMenuButton]=\"customActions\"\n [autoSize]=\"false\"\n [data-test-id]=\"'page-'\"\n *ngIf=\"customActions.actions.length > 1; else singleButton\"\n data-test-id=\"custom-button\"\n >\n {{ config?.customActionsLabel?.i18n || \"i18n.qd.page.header.actions\" | translate }}\n </button>\n\n <ng-template #singleButton>\n <ng-container *ngIf=\"(customActions$ | async).actions[0] as singleAction\">\n <button\n qdButton\n *ngIf=\"singleAction.handler && !singleAction.isHidden\"\n [disabled]=\"singleAction.isDisabled\"\n (click)=\"singleAction.handler()\"\n data-test-id=\"custom-button\"\n >\n {{ singleAction.label?.i18n | translate }}\n </button>\n </ng-container>\n </ng-template>\n </ng-container>\n\n <ng-template #adaptive>\n <button\n *ngIf=\"(customActions$ | async)?.actions.length >= 1\"\n type=\"button\"\n class=\"adaptive-menu-button\"\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n [qdPopoverStopPropagation]=\"true\"\n [qdPopoverMinWidth]=\"160\"\n >\n <qd-icon icon=\"overflowMenuVertical\"></qd-icon>\n </button>\n\n <ng-template #menu>\n <button\n *ngFor=\"let action of customActions.actions; let i = index\"\n class=\"adaptive-menu-entry\"\n type=\"button\"\n [disabled]=\"action.isDisabled\"\n (click)=\"action.handler()\"\n >\n {{ action.label.i18n | translate }}\n </button>\n </ng-template>\n </ng-template>\n </ng-container>\n </div>\n</div>\n\n<div class=\"object-header-facets\" [ngClass]=\"{ amongThemselves: adaptiveMode && !facetsCollapsed }\">\n <ng-container *ngIf=\"pageObjectData$ | async as data\">\n <div\n class=\"object-header-facet\"\n *ngFor=\"let facet of headerFacets | slice : 0 : (adaptiveMode && facetsCollapsed ? 2 : headerFacets?.length ?? 0)\"\n [attr.data-test-id]=\"testId + '-facet-' + facet.name\"\n >\n <div class=\"facet-label\">{{ facet.label.i18n | translate }}</div>\n <qd-dynamic-facet class=\"dynamic-facet\" [facet]=\"facet\" [data]=\"data\"></qd-dynamic-facet>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!config.hideContexts && contexts$ | async as contexts\">\n <div\n class=\"object-header-facet\"\n *ngFor=\"\n let context of contexts\n | slice : 0 : (adaptiveMode && facetsCollapsed ? 2 - (headerFacets?.length ?? 0) : contexts.length);\n let index = index;\n let first = first\n \"\n [ngClass]=\"{ hasDivider: headerFacets && first }\"\n >\n <div class=\"facet-label\">{{ context.label | translate }}</div>\n\n <span *ngIf=\"context.value.length === 0\" class=\"no-selected-context\">{{\n \"i18n.qd.page.context.noSelectionPlaceholder\" | translate\n }}</span>\n\n <span *ngIf=\"context.value.length !== 0\">\n <qd-chip state=\"none\" [close]=\"isContextSelectable\" (closeClickEmitter)=\"clearContext(context.context)\">\n <ng-container *ngFor=\"let val of context.value; let last = last\">\n {{ val.label.i18n | translate }}<span *ngIf=\"!last\">, </span>\n </ng-container>\n </qd-chip>\n </span>\n\n <span *ngIf=\"isContextSelectable && (!facetsCollapsed || !adaptiveMode)\" class=\"select-button\">\n <button\n qdButton\n qdButtonLink\n type=\"button\"\n (click)=\"changeContext(context.context, context.selection, $event)\"\n [data-test-id]=\"'object-header-select-context-' + context.context.id\"\n >\n {{\n context.value.length !== 0\n ? (\"i18n.qd.page.context.button.change\" | translate)\n : (\"i18n.qd.page.context.button.select\" | translate)\n }}\n </button>\n </span>\n </div>\n </ng-container>\n\n <span class=\"facets-toggler\" *ngIf=\"adaptiveMode && headerFacets.length + (contexts$ | async).length > 2\">\n <span *ngIf=\"facetsCollapsed\">+{{ headerFacets.length + (contexts$ | async).length - 2 }}</span>\n <button qdIconButton>\n <qd-icon [icon]=\"facetsCollapsed ? 'ctrlDown' : 'ctrlTop'\"></qd-icon>\n </button>\n </span>\n</div>\n", styles: [":host{display:flex;flex-direction:column;justify-content:space-between;padding:1.25rem;border-bottom:.125rem solid rgb(213,213,213);background:#fff;gap:1.25rem}@media (max-width: 599.98px){:host{padding:1.25rem .9375rem}}:host .object-header-top{display:flex;align-items:flex-start;justify-content:space-between}:host .object-header-top .object-header-title{padding:2px;color:#171717;font-size:1.3125rem;font-weight:500}:host .object-header-top .object-header-toolbar{display:flex;align-items:center;column-gap:.5rem}:host .object-header-top .object-header-toolbar .button-icon{background:none}:host .object-header-top .object-header-toolbar .button-icon+.button-icon{margin-left:-.5rem}:host .object-header-top .object-header-toolbar .header-action-icon{color:#14516f;cursor:pointer;font-size:1.5rem}:host.in-dialog .object-header-toolbar{padding-right:2.5rem}:host .object-header-facets{position:relative;display:flex;flex-wrap:wrap;font-size:1.125rem;gap:1.25rem}:host .object-header-facets .object-header-facet{display:flex;min-width:3.75rem;flex-direction:column}:host .object-header-facets .object-header-facet.hasDivider{padding-left:1.25rem;border-left:.0625rem solid rgb(117,117,117)}:host .object-header-facets .object-header-facet .facet-label{display:block;margin-bottom:0;color:#757575;font-size:.875rem;padding-bottom:.375rem;font-weight:500}:host .object-header-facets .facets-toggler{position:absolute;top:0;right:0;display:flex;align-items:center;padding-right:.3125rem;font-size:.625rem;line-height:.625rem}:host .object-header-facets.amongThemselves{display:grid}:host .object-header-facets.amongThemselves .object-header-facet.hasDivider{padding-left:0;border-top:.0625rem solid rgb(117,117,117);border-left:none}.loading-overlay{position:absolute;z-index:10000;inset:0;display:flex;align-items:center;justify-content:center;background-color:#0003}.no-selected-context{height:1.625rem;color:#979797;font-size:.875rem;line-height:1.625rem}.select-button{margin-top:.25rem}.adaptive-menu-button{display:flex;background:unset;color:#454545;font-size:2rem}.adaptive-menu-button:hover,.adaptive-menu-button:focus{color:#000}.adaptive-menu-entry{display:block;overflow:hidden;width:100%;min-height:2.25rem;padding:0 1rem;background:#fff0;text-align:left;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "directive", type: QdButtonLinkDirective, selector: "button[qdButtonLink], a[qdButtonLink], button[qd-button-link]" }, { kind: "component", type: QdIconButtonComponent, selector: "button[qdIconButton], a[qdIconButton], button[qd-icon-button]", inputs: ["color", "data-test-id"] }, { kind: "component", type: QdMenuButtonComponent, selector: "button[qdMenuButton], a[qdMenuButton]", inputs: ["qdMenuButton", "data-test-id", "autoSize"] }, { kind: "component", type: QdChipComponent, selector: "qd-chip", inputs: ["state", "close", "data", "data-test-id"], outputs: ["closeClickEmitter"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "component", type: QdSpinnerComponent, selector: "qd-spinner" }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: QdDynamicFacetComponent, selector: "qd-dynamic-facet", inputs: ["facet", "data"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
28125
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: QdPageObjectHeaderComponent, isStandalone: false, selector: "qd-page-object-header", inputs: { config: "config", hasNavigation: "hasNavigation", testId: ["data-test-id", "testId"] }, host: { listeners: { "click": "toggleFacets()" }, properties: { "style.borderBottom": "borderBottomStyle", "class.in-dialog": "this.isInDialog" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"loading-overlay\" *ngIf=\"isLoading$ | async\"><qd-spinner></qd-spinner></div>\n\n<div class=\"object-header-top\">\n <header class=\"object-header-title\">{{ config.title.i18n | translate }}</header>\n <div class=\"object-header-toolbar\">\n <button class=\"button-icon\" data-test-id=\"archive-button\">\n <qd-icon\n *ngIf=\"showArchive$ | async\"\n (click)=\"archiveButton?.handler()\"\n class=\"header-action-icon\"\n [icon]=\"'resultNew'\"\n ></qd-icon>\n </button>\n\n <button class=\"button-icon\" data-test-id=\"delete-button\">\n <qd-icon\n class=\"header-action-icon\"\n *ngIf=\"showDelete$ | async\"\n (click)=\"deleteButton?.handler()\"\n [icon]=\"'trash'\"\n ></qd-icon>\n </button>\n\n <button *ngIf=\"showEdit$ | async\" qdButton (click)=\"edit()\" data-test-id=\"edit-button\">\n {{ editButton?.label?.i18n || \"i18n.qd.page.header.edit\" | translate }}\n </button>\n\n <button *ngIf=\"showCancel$ | async\" qdButton qdButtonGhost (click)=\"cancel()\" data-test-id=\"cancel-button\">\n {{ cancelButton.label?.i18n || \"i18n.qd.page.header.cancel\" | translate }}\n </button>\n\n <button\n *ngIf=\"showSave$ | async\"\n qdButton\n (click)=\"save()\"\n data-test-id=\"save-button\"\n [disabled]=\"($canSave | async) === false\"\n >\n {{ saveButton.label?.i18n || \"i18n.qd.page.header.save\" | translate }}\n </button>\n\n <ng-container *ngIf=\"customActions$ | async as customActions\">\n <ng-container *ngIf=\"!adaptiveMode; else adaptive\">\n <button\n [qdMenuButton]=\"customActions\"\n [autoSize]=\"false\"\n [data-test-id]=\"'page-'\"\n *ngIf=\"customActions.actions.length > 1; else singleButton\"\n data-test-id=\"custom-button\"\n >\n {{ config?.customActionsLabel?.i18n || \"i18n.qd.page.header.actions\" | translate }}\n </button>\n\n <ng-template #singleButton>\n <ng-container *ngIf=\"(customActions$ | async).actions[0] as singleAction\">\n <button\n qdButton\n *ngIf=\"singleAction.handler && !singleAction.isHidden\"\n [disabled]=\"singleAction.isDisabled\"\n (click)=\"singleAction.handler()\"\n data-test-id=\"custom-button\"\n >\n {{ singleAction.label?.i18n | translate }}\n </button>\n </ng-container>\n </ng-template>\n </ng-container>\n\n <ng-template #adaptive>\n <button\n *ngIf=\"(customActions$ | async)?.actions.length >= 1\"\n type=\"button\"\n class=\"adaptive-menu-button\"\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n [qdPopoverStopPropagation]=\"true\"\n [qdPopoverMinWidth]=\"160\"\n >\n <qd-icon icon=\"overflowMenuVertical\"></qd-icon>\n </button>\n\n <ng-template #menu>\n <button\n *ngFor=\"let action of customActions.actions; let i = index\"\n class=\"adaptive-menu-entry\"\n type=\"button\"\n [disabled]=\"action.isDisabled\"\n (click)=\"action.handler()\"\n >\n {{ action.label.i18n | translate }}\n </button>\n </ng-template>\n </ng-template>\n </ng-container>\n </div>\n</div>\n\n<div class=\"object-header-facets\" [ngClass]=\"{ amongThemselves: adaptiveMode && !facetsCollapsed }\">\n <ng-container *ngIf=\"pageObjectData$ | async as data\">\n <div\n class=\"object-header-facet\"\n *ngFor=\"let facet of headerFacets | slice : 0 : (adaptiveMode && facetsCollapsed ? 2 : headerFacets?.length ?? 0)\"\n [attr.data-test-id]=\"testId + '-facet-' + facet.name\"\n >\n <div class=\"facet-label\">{{ facet.label.i18n | translate }}</div>\n <qd-dynamic-facet class=\"dynamic-facet\" [facet]=\"facet\" [data]=\"data\"></qd-dynamic-facet>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!config.hideContexts && contexts$ | async as contexts\">\n <div\n class=\"object-header-facet\"\n *ngFor=\"\n let context of contexts\n | slice : 0 : (adaptiveMode && facetsCollapsed ? 2 - (headerFacets?.length ?? 0) : contexts?.length);\n let index = index;\n let first = first\n \"\n [ngClass]=\"{ hasDivider: headerFacets && first, adaptiveFirst: headerFacets && adaptiveMode && first }\"\n >\n <div class=\"facet-label\">{{ context.label | translate }}</div>\n\n <span *ngIf=\"context.value.length === 0\" class=\"no-selected-context\">{{\n \"i18n.qd.page.context.noSelectionPlaceholder\" | translate\n }}</span>\n\n <span *ngIf=\"context.value.length !== 0\">\n <qd-chip state=\"none\" [close]=\"isContextSelectable\" (closeClickEmitter)=\"clearContext(context.context)\">\n <ng-container *ngFor=\"let val of context.value; let last = last\">\n {{ val.label.i18n | translate }}<span *ngIf=\"!last\">, </span>\n </ng-container>\n </qd-chip>\n </span>\n\n <span *ngIf=\"isContextSelectable && (!facetsCollapsed || !adaptiveMode)\" class=\"select-button\">\n <button\n qdButton\n qdButtonLink\n type=\"button\"\n (click)=\"changeContext(context.context, context.selection, $event)\"\n [data-test-id]=\"'object-header-select-context-' + context.context.id\"\n >\n {{\n context.value.length !== 0\n ? (\"i18n.qd.page.context.button.change\" | translate)\n : (\"i18n.qd.page.context.button.select\" | translate)\n }}\n </button>\n </span>\n </div>\n </ng-container>\n\n <span class=\"facets-toggler\" *ngIf=\"adaptiveMode && headerFacets?.length + (contexts$ | async).length > 2\">\n <span *ngIf=\"facetsCollapsed\">+{{ headerFacets.length + (contexts$ | async).length - 2 }}</span>\n <button qdIconButton [data-test-id]=\"'toggle-button'\">\n <qd-icon [icon]=\"facetsCollapsed ? 'ctrlDown' : 'ctrlTop'\"></qd-icon>\n </button>\n </span>\n</div>\n", styles: [":host{display:flex;flex-direction:column;justify-content:space-between;padding:1.25rem;border-bottom:.125rem solid rgb(213,213,213);background:#fff;gap:1.25rem}@media (max-width: 599.98px){:host{padding:1.25rem .9375rem}}:host .object-header-top{display:flex;align-items:flex-start;justify-content:space-between}:host .object-header-top .object-header-title{padding:2px;color:#171717;font-size:1.3125rem;font-weight:500}:host .object-header-top .object-header-toolbar{display:flex;align-items:center;column-gap:.5rem}:host .object-header-top .object-header-toolbar .button-icon{background:none}:host .object-header-top .object-header-toolbar .button-icon+.button-icon{margin-left:-.5rem}:host .object-header-top .object-header-toolbar .header-action-icon{color:#14516f;cursor:pointer;font-size:1.5rem}:host.in-dialog .object-header-toolbar{padding-right:2.5rem}:host .object-header-facets{position:relative;display:flex;flex-wrap:wrap;font-size:1.125rem;gap:1.25rem}:host .object-header-facets .object-header-facet{display:flex;min-width:3.75rem;flex-direction:column}:host .object-header-facets .object-header-facet.hasDivider{padding-left:1.25rem;border-left:.0625rem solid rgb(117,117,117)}:host .object-header-facets .object-header-facet.adaptiveFirst{padding-top:1.25rem}:host .object-header-facets .object-header-facet .facet-label{display:block;margin-bottom:0;color:#757575;font-size:.875rem;padding-bottom:.375rem;font-weight:500}:host .object-header-facets .facets-toggler{position:absolute;top:0;right:0;display:flex;align-items:center;padding-right:.3125rem;font-size:.625rem;line-height:.625rem}:host .object-header-facets.amongThemselves{display:grid}:host .object-header-facets.amongThemselves .object-header-facet.hasDivider{padding-left:0;border-top:.0625rem solid rgb(117,117,117);border-left:none}.loading-overlay{position:absolute;z-index:10000;inset:0;display:flex;align-items:center;justify-content:center;background-color:#0003}.no-selected-context{height:1.625rem;color:#979797;font-size:.875rem;line-height:1.625rem}.select-button{margin-top:.25rem}.adaptive-menu-button{display:flex;background:unset;color:#454545;font-size:2rem}.adaptive-menu-button:hover,.adaptive-menu-button:focus{color:#000}.adaptive-menu-entry{display:block;overflow:hidden;width:100%;min-height:2.25rem;padding:0 1rem;background:#fff0;text-align:left;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "directive", type: QdButtonLinkDirective, selector: "button[qdButtonLink], a[qdButtonLink], button[qd-button-link]" }, { kind: "component", type: QdIconButtonComponent, selector: "button[qdIconButton], a[qdIconButton], button[qd-icon-button]", inputs: ["color", "data-test-id"] }, { kind: "component", type: QdMenuButtonComponent, selector: "button[qdMenuButton], a[qdMenuButton]", inputs: ["qdMenuButton", "data-test-id", "autoSize"] }, { kind: "component", type: QdChipComponent, selector: "qd-chip", inputs: ["state", "close", "data", "data-test-id"], outputs: ["closeClickEmitter"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "component", type: QdSpinnerComponent, selector: "qd-spinner" }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: QdDynamicFacetComponent, selector: "qd-dynamic-facet", inputs: ["facet", "data"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
28103
28126
  }
28104
28127
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdPageObjectHeaderComponent, decorators: [{
28105
28128
  type: Component,
28106
- args: [{ selector: 'qd-page-object-header', changeDetection: ChangeDetectionStrategy.OnPush, host: { '[style.borderBottom]': 'borderBottomStyle' }, standalone: false, template: "<div class=\"loading-overlay\" *ngIf=\"isLoading$ | async\"><qd-spinner></qd-spinner></div>\n\n<div class=\"object-header-top\">\n <header class=\"object-header-title\">{{ config.title.i18n | translate }}</header>\n <div class=\"object-header-toolbar\">\n <button class=\"button-icon\" data-test-id=\"archive-button\">\n <qd-icon\n *ngIf=\"showArchive$ | async\"\n (click)=\"archiveButton?.handler()\"\n class=\"header-action-icon\"\n [icon]=\"'resultNew'\"\n ></qd-icon>\n </button>\n\n <button class=\"button-icon\" data-test-id=\"delete-button\">\n <qd-icon\n class=\"header-action-icon\"\n *ngIf=\"showDelete$ | async\"\n (click)=\"deleteButton?.handler()\"\n [icon]=\"'trash'\"\n ></qd-icon>\n </button>\n\n <button *ngIf=\"showEdit$ | async\" qdButton (click)=\"edit()\" data-test-id=\"edit-button\">\n {{ editButton?.label?.i18n || \"i18n.qd.page.header.edit\" | translate }}\n </button>\n\n <button *ngIf=\"showCancel$ | async\" qdButton qdButtonGhost (click)=\"cancel()\" data-test-id=\"cancel-button\">\n {{ cancelButton.label?.i18n || \"i18n.qd.page.header.cancel\" | translate }}\n </button>\n\n <button\n *ngIf=\"showSave$ | async\"\n qdButton\n (click)=\"save()\"\n data-test-id=\"save-button\"\n [disabled]=\"($canSave | async) === false\"\n >\n {{ saveButton.label?.i18n || \"i18n.qd.page.header.save\" | translate }}\n </button>\n\n <ng-container *ngIf=\"customActions$ | async as customActions\">\n <ng-container *ngIf=\"!adaptiveMode; else adaptive\">\n <button\n [qdMenuButton]=\"customActions\"\n [autoSize]=\"false\"\n [data-test-id]=\"'page-'\"\n *ngIf=\"customActions.actions.length > 1; else singleButton\"\n data-test-id=\"custom-button\"\n >\n {{ config?.customActionsLabel?.i18n || \"i18n.qd.page.header.actions\" | translate }}\n </button>\n\n <ng-template #singleButton>\n <ng-container *ngIf=\"(customActions$ | async).actions[0] as singleAction\">\n <button\n qdButton\n *ngIf=\"singleAction.handler && !singleAction.isHidden\"\n [disabled]=\"singleAction.isDisabled\"\n (click)=\"singleAction.handler()\"\n data-test-id=\"custom-button\"\n >\n {{ singleAction.label?.i18n | translate }}\n </button>\n </ng-container>\n </ng-template>\n </ng-container>\n\n <ng-template #adaptive>\n <button\n *ngIf=\"(customActions$ | async)?.actions.length >= 1\"\n type=\"button\"\n class=\"adaptive-menu-button\"\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n [qdPopoverStopPropagation]=\"true\"\n [qdPopoverMinWidth]=\"160\"\n >\n <qd-icon icon=\"overflowMenuVertical\"></qd-icon>\n </button>\n\n <ng-template #menu>\n <button\n *ngFor=\"let action of customActions.actions; let i = index\"\n class=\"adaptive-menu-entry\"\n type=\"button\"\n [disabled]=\"action.isDisabled\"\n (click)=\"action.handler()\"\n >\n {{ action.label.i18n | translate }}\n </button>\n </ng-template>\n </ng-template>\n </ng-container>\n </div>\n</div>\n\n<div class=\"object-header-facets\" [ngClass]=\"{ amongThemselves: adaptiveMode && !facetsCollapsed }\">\n <ng-container *ngIf=\"pageObjectData$ | async as data\">\n <div\n class=\"object-header-facet\"\n *ngFor=\"let facet of headerFacets | slice : 0 : (adaptiveMode && facetsCollapsed ? 2 : headerFacets?.length ?? 0)\"\n [attr.data-test-id]=\"testId + '-facet-' + facet.name\"\n >\n <div class=\"facet-label\">{{ facet.label.i18n | translate }}</div>\n <qd-dynamic-facet class=\"dynamic-facet\" [facet]=\"facet\" [data]=\"data\"></qd-dynamic-facet>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!config.hideContexts && contexts$ | async as contexts\">\n <div\n class=\"object-header-facet\"\n *ngFor=\"\n let context of contexts\n | slice : 0 : (adaptiveMode && facetsCollapsed ? 2 - (headerFacets?.length ?? 0) : contexts.length);\n let index = index;\n let first = first\n \"\n [ngClass]=\"{ hasDivider: headerFacets && first }\"\n >\n <div class=\"facet-label\">{{ context.label | translate }}</div>\n\n <span *ngIf=\"context.value.length === 0\" class=\"no-selected-context\">{{\n \"i18n.qd.page.context.noSelectionPlaceholder\" | translate\n }}</span>\n\n <span *ngIf=\"context.value.length !== 0\">\n <qd-chip state=\"none\" [close]=\"isContextSelectable\" (closeClickEmitter)=\"clearContext(context.context)\">\n <ng-container *ngFor=\"let val of context.value; let last = last\">\n {{ val.label.i18n | translate }}<span *ngIf=\"!last\">, </span>\n </ng-container>\n </qd-chip>\n </span>\n\n <span *ngIf=\"isContextSelectable && (!facetsCollapsed || !adaptiveMode)\" class=\"select-button\">\n <button\n qdButton\n qdButtonLink\n type=\"button\"\n (click)=\"changeContext(context.context, context.selection, $event)\"\n [data-test-id]=\"'object-header-select-context-' + context.context.id\"\n >\n {{\n context.value.length !== 0\n ? (\"i18n.qd.page.context.button.change\" | translate)\n : (\"i18n.qd.page.context.button.select\" | translate)\n }}\n </button>\n </span>\n </div>\n </ng-container>\n\n <span class=\"facets-toggler\" *ngIf=\"adaptiveMode && headerFacets.length + (contexts$ | async).length > 2\">\n <span *ngIf=\"facetsCollapsed\">+{{ headerFacets.length + (contexts$ | async).length - 2 }}</span>\n <button qdIconButton>\n <qd-icon [icon]=\"facetsCollapsed ? 'ctrlDown' : 'ctrlTop'\"></qd-icon>\n </button>\n </span>\n</div>\n", styles: [":host{display:flex;flex-direction:column;justify-content:space-between;padding:1.25rem;border-bottom:.125rem solid rgb(213,213,213);background:#fff;gap:1.25rem}@media (max-width: 599.98px){:host{padding:1.25rem .9375rem}}:host .object-header-top{display:flex;align-items:flex-start;justify-content:space-between}:host .object-header-top .object-header-title{padding:2px;color:#171717;font-size:1.3125rem;font-weight:500}:host .object-header-top .object-header-toolbar{display:flex;align-items:center;column-gap:.5rem}:host .object-header-top .object-header-toolbar .button-icon{background:none}:host .object-header-top .object-header-toolbar .button-icon+.button-icon{margin-left:-.5rem}:host .object-header-top .object-header-toolbar .header-action-icon{color:#14516f;cursor:pointer;font-size:1.5rem}:host.in-dialog .object-header-toolbar{padding-right:2.5rem}:host .object-header-facets{position:relative;display:flex;flex-wrap:wrap;font-size:1.125rem;gap:1.25rem}:host .object-header-facets .object-header-facet{display:flex;min-width:3.75rem;flex-direction:column}:host .object-header-facets .object-header-facet.hasDivider{padding-left:1.25rem;border-left:.0625rem solid rgb(117,117,117)}:host .object-header-facets .object-header-facet .facet-label{display:block;margin-bottom:0;color:#757575;font-size:.875rem;padding-bottom:.375rem;font-weight:500}:host .object-header-facets .facets-toggler{position:absolute;top:0;right:0;display:flex;align-items:center;padding-right:.3125rem;font-size:.625rem;line-height:.625rem}:host .object-header-facets.amongThemselves{display:grid}:host .object-header-facets.amongThemselves .object-header-facet.hasDivider{padding-left:0;border-top:.0625rem solid rgb(117,117,117);border-left:none}.loading-overlay{position:absolute;z-index:10000;inset:0;display:flex;align-items:center;justify-content:center;background-color:#0003}.no-selected-context{height:1.625rem;color:#979797;font-size:.875rem;line-height:1.625rem}.select-button{margin-top:.25rem}.adaptive-menu-button{display:flex;background:unset;color:#454545;font-size:2rem}.adaptive-menu-button:hover,.adaptive-menu-button:focus{color:#000}.adaptive-menu-entry{display:block;overflow:hidden;width:100%;min-height:2.25rem;padding:0 1rem;background:#fff0;text-align:left;text-overflow:ellipsis;white-space:nowrap}\n"] }]
28129
+ args: [{ selector: 'qd-page-object-header', changeDetection: ChangeDetectionStrategy.OnPush, host: { '[style.borderBottom]': 'borderBottomStyle' }, standalone: false, template: "<div class=\"loading-overlay\" *ngIf=\"isLoading$ | async\"><qd-spinner></qd-spinner></div>\n\n<div class=\"object-header-top\">\n <header class=\"object-header-title\">{{ config.title.i18n | translate }}</header>\n <div class=\"object-header-toolbar\">\n <button class=\"button-icon\" data-test-id=\"archive-button\">\n <qd-icon\n *ngIf=\"showArchive$ | async\"\n (click)=\"archiveButton?.handler()\"\n class=\"header-action-icon\"\n [icon]=\"'resultNew'\"\n ></qd-icon>\n </button>\n\n <button class=\"button-icon\" data-test-id=\"delete-button\">\n <qd-icon\n class=\"header-action-icon\"\n *ngIf=\"showDelete$ | async\"\n (click)=\"deleteButton?.handler()\"\n [icon]=\"'trash'\"\n ></qd-icon>\n </button>\n\n <button *ngIf=\"showEdit$ | async\" qdButton (click)=\"edit()\" data-test-id=\"edit-button\">\n {{ editButton?.label?.i18n || \"i18n.qd.page.header.edit\" | translate }}\n </button>\n\n <button *ngIf=\"showCancel$ | async\" qdButton qdButtonGhost (click)=\"cancel()\" data-test-id=\"cancel-button\">\n {{ cancelButton.label?.i18n || \"i18n.qd.page.header.cancel\" | translate }}\n </button>\n\n <button\n *ngIf=\"showSave$ | async\"\n qdButton\n (click)=\"save()\"\n data-test-id=\"save-button\"\n [disabled]=\"($canSave | async) === false\"\n >\n {{ saveButton.label?.i18n || \"i18n.qd.page.header.save\" | translate }}\n </button>\n\n <ng-container *ngIf=\"customActions$ | async as customActions\">\n <ng-container *ngIf=\"!adaptiveMode; else adaptive\">\n <button\n [qdMenuButton]=\"customActions\"\n [autoSize]=\"false\"\n [data-test-id]=\"'page-'\"\n *ngIf=\"customActions.actions.length > 1; else singleButton\"\n data-test-id=\"custom-button\"\n >\n {{ config?.customActionsLabel?.i18n || \"i18n.qd.page.header.actions\" | translate }}\n </button>\n\n <ng-template #singleButton>\n <ng-container *ngIf=\"(customActions$ | async).actions[0] as singleAction\">\n <button\n qdButton\n *ngIf=\"singleAction.handler && !singleAction.isHidden\"\n [disabled]=\"singleAction.isDisabled\"\n (click)=\"singleAction.handler()\"\n data-test-id=\"custom-button\"\n >\n {{ singleAction.label?.i18n | translate }}\n </button>\n </ng-container>\n </ng-template>\n </ng-container>\n\n <ng-template #adaptive>\n <button\n *ngIf=\"(customActions$ | async)?.actions.length >= 1\"\n type=\"button\"\n class=\"adaptive-menu-button\"\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n [qdPopoverStopPropagation]=\"true\"\n [qdPopoverMinWidth]=\"160\"\n >\n <qd-icon icon=\"overflowMenuVertical\"></qd-icon>\n </button>\n\n <ng-template #menu>\n <button\n *ngFor=\"let action of customActions.actions; let i = index\"\n class=\"adaptive-menu-entry\"\n type=\"button\"\n [disabled]=\"action.isDisabled\"\n (click)=\"action.handler()\"\n >\n {{ action.label.i18n | translate }}\n </button>\n </ng-template>\n </ng-template>\n </ng-container>\n </div>\n</div>\n\n<div class=\"object-header-facets\" [ngClass]=\"{ amongThemselves: adaptiveMode && !facetsCollapsed }\">\n <ng-container *ngIf=\"pageObjectData$ | async as data\">\n <div\n class=\"object-header-facet\"\n *ngFor=\"let facet of headerFacets | slice : 0 : (adaptiveMode && facetsCollapsed ? 2 : headerFacets?.length ?? 0)\"\n [attr.data-test-id]=\"testId + '-facet-' + facet.name\"\n >\n <div class=\"facet-label\">{{ facet.label.i18n | translate }}</div>\n <qd-dynamic-facet class=\"dynamic-facet\" [facet]=\"facet\" [data]=\"data\"></qd-dynamic-facet>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!config.hideContexts && contexts$ | async as contexts\">\n <div\n class=\"object-header-facet\"\n *ngFor=\"\n let context of contexts\n | slice : 0 : (adaptiveMode && facetsCollapsed ? 2 - (headerFacets?.length ?? 0) : contexts?.length);\n let index = index;\n let first = first\n \"\n [ngClass]=\"{ hasDivider: headerFacets && first, adaptiveFirst: headerFacets && adaptiveMode && first }\"\n >\n <div class=\"facet-label\">{{ context.label | translate }}</div>\n\n <span *ngIf=\"context.value.length === 0\" class=\"no-selected-context\">{{\n \"i18n.qd.page.context.noSelectionPlaceholder\" | translate\n }}</span>\n\n <span *ngIf=\"context.value.length !== 0\">\n <qd-chip state=\"none\" [close]=\"isContextSelectable\" (closeClickEmitter)=\"clearContext(context.context)\">\n <ng-container *ngFor=\"let val of context.value; let last = last\">\n {{ val.label.i18n | translate }}<span *ngIf=\"!last\">, </span>\n </ng-container>\n </qd-chip>\n </span>\n\n <span *ngIf=\"isContextSelectable && (!facetsCollapsed || !adaptiveMode)\" class=\"select-button\">\n <button\n qdButton\n qdButtonLink\n type=\"button\"\n (click)=\"changeContext(context.context, context.selection, $event)\"\n [data-test-id]=\"'object-header-select-context-' + context.context.id\"\n >\n {{\n context.value.length !== 0\n ? (\"i18n.qd.page.context.button.change\" | translate)\n : (\"i18n.qd.page.context.button.select\" | translate)\n }}\n </button>\n </span>\n </div>\n </ng-container>\n\n <span class=\"facets-toggler\" *ngIf=\"adaptiveMode && headerFacets?.length + (contexts$ | async).length > 2\">\n <span *ngIf=\"facetsCollapsed\">+{{ headerFacets.length + (contexts$ | async).length - 2 }}</span>\n <button qdIconButton [data-test-id]=\"'toggle-button'\">\n <qd-icon [icon]=\"facetsCollapsed ? 'ctrlDown' : 'ctrlTop'\"></qd-icon>\n </button>\n </span>\n</div>\n", styles: [":host{display:flex;flex-direction:column;justify-content:space-between;padding:1.25rem;border-bottom:.125rem solid rgb(213,213,213);background:#fff;gap:1.25rem}@media (max-width: 599.98px){:host{padding:1.25rem .9375rem}}:host .object-header-top{display:flex;align-items:flex-start;justify-content:space-between}:host .object-header-top .object-header-title{padding:2px;color:#171717;font-size:1.3125rem;font-weight:500}:host .object-header-top .object-header-toolbar{display:flex;align-items:center;column-gap:.5rem}:host .object-header-top .object-header-toolbar .button-icon{background:none}:host .object-header-top .object-header-toolbar .button-icon+.button-icon{margin-left:-.5rem}:host .object-header-top .object-header-toolbar .header-action-icon{color:#14516f;cursor:pointer;font-size:1.5rem}:host.in-dialog .object-header-toolbar{padding-right:2.5rem}:host .object-header-facets{position:relative;display:flex;flex-wrap:wrap;font-size:1.125rem;gap:1.25rem}:host .object-header-facets .object-header-facet{display:flex;min-width:3.75rem;flex-direction:column}:host .object-header-facets .object-header-facet.hasDivider{padding-left:1.25rem;border-left:.0625rem solid rgb(117,117,117)}:host .object-header-facets .object-header-facet.adaptiveFirst{padding-top:1.25rem}:host .object-header-facets .object-header-facet .facet-label{display:block;margin-bottom:0;color:#757575;font-size:.875rem;padding-bottom:.375rem;font-weight:500}:host .object-header-facets .facets-toggler{position:absolute;top:0;right:0;display:flex;align-items:center;padding-right:.3125rem;font-size:.625rem;line-height:.625rem}:host .object-header-facets.amongThemselves{display:grid}:host .object-header-facets.amongThemselves .object-header-facet.hasDivider{padding-left:0;border-top:.0625rem solid rgb(117,117,117);border-left:none}.loading-overlay{position:absolute;z-index:10000;inset:0;display:flex;align-items:center;justify-content:center;background-color:#0003}.no-selected-context{height:1.625rem;color:#979797;font-size:.875rem;line-height:1.625rem}.select-button{margin-top:.25rem}.adaptive-menu-button{display:flex;background:unset;color:#454545;font-size:2rem}.adaptive-menu-button:hover,.adaptive-menu-button:focus{color:#000}.adaptive-menu-entry{display:block;overflow:hidden;width:100%;min-height:2.25rem;padding:0 1rem;background:#fff0;text-align:left;text-overflow:ellipsis;white-space:nowrap}\n"] }]
28107
28130
  }], ctorParameters: () => [{ type: undefined, decorators: [{
28108
28131
  type: Optional
28109
28132
  }, {
@@ -30844,7 +30867,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
30844
30867
  type: Injectable
30845
30868
  }], ctorParameters: () => [{ type: i1$3.TranslateService }, { type: QdShellEportalLanguageService }] });
30846
30869
 
30847
- const DEFAULT_JAVASCRIPT_ASSET_PATH$1 = 'assets/service-navigation-web-component.js?version=14.2.0';
30870
+ const DEFAULT_JAVASCRIPT_ASSET_PATH$1 = 'assets/service-navigation-web-component.js?version=15.0.3';
30848
30871
  class QdShellServiceNavigationComponent {
30849
30872
  serviceNavigationService;
30850
30873
  translateService;
@@ -30968,11 +30991,11 @@ class QdShellServiceNavigationComponent {
30968
30991
  updateHtmlLang(language);
30969
30992
  }
30970
30993
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdShellServiceNavigationComponent, deps: [{ token: QdShellServiceNavigationService }, { token: i1$3.TranslateService }, { token: QdLanguageFromUrlService }, { token: QdShellPamsEnvironmentService }, { token: 'QdAuthenticationService', optional: true }], target: i0.ɵɵFactoryTarget.Component });
30971
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: QdShellServiceNavigationComponent, isStandalone: false, selector: "qd-shell-service-navigation", inputs: { config: "config" }, providers: [QdShellServiceNavigationService], viewQueries: [{ propertyName: "serviceNavigation", first: true, predicate: ["serviceNavigation"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ob-service-navigation-web-component\n *ngIf=\"pamsEnvironment\"\n #serviceNavigation\n [languageList]=\"languageListStringified\"\n [pamsAppId]=\"pamsAppId\"\n [environment]=\"pamsEnvironment\"\n (languageChange)=\"handleLanguageChange($event)\"\n (loginState)=\"handleLoginStatusChange($event)\"\n (logoutTriggered)=\"handleLogoutTriggered($event)\"\n></ob-service-navigation-web-component>\n", styles: [":host{display:flex;justify-content:end}:host.expanded{visibility:visible}@media (max-width: 599.98px){:host.expanded{visibility:collapse}}@media (max-width: 599.98px){:host{flex-basis:100%;margin-top:1rem}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
30994
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: QdShellServiceNavigationComponent, isStandalone: false, selector: "qd-shell-service-navigation", inputs: { config: "config" }, providers: [QdShellServiceNavigationService], viewQueries: [{ propertyName: "serviceNavigation", first: true, predicate: ["serviceNavigation"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ob-service-navigation-web-component\n *ngIf=\"pamsEnvironment\"\n #serviceNavigation\n [languageList]=\"languageListStringified\"\n [pamsAppId]=\"pamsAppId\"\n [environment]=\"pamsEnvironment\"\n (languageChange)=\"handleLanguageChange($event)\"\n (loginState)=\"handleLoginStatusChange($event)\"\n (logoutTriggered)=\"handleLogoutTriggered($event)\"\n [eportalLanguageSynchronization]=\"true\"\n></ob-service-navigation-web-component>\n", styles: [":host{display:flex;justify-content:end}:host.expanded{visibility:visible}@media (max-width: 599.98px){:host.expanded{visibility:collapse}}@media (max-width: 599.98px){:host{flex-basis:100%;margin-top:1rem}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
30972
30995
  }
30973
30996
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdShellServiceNavigationComponent, decorators: [{
30974
30997
  type: Component,
30975
- args: [{ selector: 'qd-shell-service-navigation', providers: [QdShellServiceNavigationService], standalone: false, template: "<ob-service-navigation-web-component\n *ngIf=\"pamsEnvironment\"\n #serviceNavigation\n [languageList]=\"languageListStringified\"\n [pamsAppId]=\"pamsAppId\"\n [environment]=\"pamsEnvironment\"\n (languageChange)=\"handleLanguageChange($event)\"\n (loginState)=\"handleLoginStatusChange($event)\"\n (logoutTriggered)=\"handleLogoutTriggered($event)\"\n></ob-service-navigation-web-component>\n", styles: [":host{display:flex;justify-content:end}:host.expanded{visibility:visible}@media (max-width: 599.98px){:host.expanded{visibility:collapse}}@media (max-width: 599.98px){:host{flex-basis:100%;margin-top:1rem}}\n"] }]
30998
+ args: [{ selector: 'qd-shell-service-navigation', providers: [QdShellServiceNavigationService], standalone: false, template: "<ob-service-navigation-web-component\n *ngIf=\"pamsEnvironment\"\n #serviceNavigation\n [languageList]=\"languageListStringified\"\n [pamsAppId]=\"pamsAppId\"\n [environment]=\"pamsEnvironment\"\n (languageChange)=\"handleLanguageChange($event)\"\n (loginState)=\"handleLoginStatusChange($event)\"\n (logoutTriggered)=\"handleLogoutTriggered($event)\"\n [eportalLanguageSynchronization]=\"true\"\n></ob-service-navigation-web-component>\n", styles: [":host{display:flex;justify-content:end}:host.expanded{visibility:visible}@media (max-width: 599.98px){:host.expanded{visibility:collapse}}@media (max-width: 599.98px){:host{flex-basis:100%;margin-top:1rem}}\n"] }]
30976
30999
  }], ctorParameters: () => [{ type: QdShellServiceNavigationService }, { type: i1$3.TranslateService }, { type: QdLanguageFromUrlService }, { type: QdShellPamsEnvironmentService }, { type: undefined, decorators: [{
30977
31000
  type: Optional
30978
31001
  }, {
@@ -33115,9 +33138,7 @@ class QdQuickEditComponent {
33115
33138
  initManualChangeDetectionForControlReset() {
33116
33139
  if (!this.isFormControl)
33117
33140
  return;
33118
- this.controlContainer.control.valueChanges
33119
- .pipe(startWith(this.controlContainer.control.value.length), map(() => this.controlContainer.control.value.length), distinctUntilChanged(), tap(() => this.changeDetectorRef.detectChanges()))
33120
- .subscribe();
33141
+ this.controlContainer.control.valueChanges.pipe(tap(() => this.changeDetectorRef.detectChanges())).subscribe();
33121
33142
  }
33122
33143
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdQuickEditComponent, deps: [{ token: i1$4.FormBuilder }, { token: QdPageFooterService, optional: true }, { token: QdPageStoreService, optional: true }, { token: QdSectionToolbarActionService, optional: true }, { token: QdEventBrokerService, optional: true }, { token: i0.ChangeDetectorRef }, { token: i1$4.ControlContainer, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
33123
33144
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: QdQuickEditComponent, isStandalone: false, selector: "qd-quick-edit", inputs: { config: "config", data: "data", testId: ["data-test-id", "testId"] }, outputs: { formGroupChange: "formGroupChange", addNewClicked: "addNewClicked" }, viewQueries: [{ propertyName: "customForDirective", first: true, predicate: QdCustomForDirective, descendants: true }, { propertyName: "focusables", predicate: QdFocusableDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"editable-actions\" *ngIf=\"showStandaloneCreate\">\n <button\n qdButton\n qdButtonGhost\n icon=\"plus\"\n (click)=\"createRow()\"\n [data-test-id]=\"testId + '-button-add-new'\"\n class=\"create-button-standalone\"\n >\n {{ config.standaloneCreateLabel?.i18n ?? \"i18n.qd.quick.edit.createButtonLabel\" | translate }}\n </button>\n</div>\n\n<div class=\"table\" [formGroup]=\"control\">\n <div class=\"table-header\" *ngIf=\"!config.canAdd || templateData.length > 0 || config.emptyStateView\">\n <div class=\"table-row\">\n <div class=\"table-cell\" *ngFor=\"let header of visibleColumns\">\n {{ header?.i18n | translate }}\n <qd-icon\n *ngIf=\"hasTooltip(header?.tooltip)\"\n icon=\"circleInfo\"\n class=\"additional-info\"\n qdTooltipOnClick\n [qdTooltipContent]=\"header?.tooltip?.content\"\n ></qd-icon>\n </div>\n <div class=\"table-cell actions-column\" *ngIf=\"hasVisibleActions$ | async\">\n <button class=\"menu-button\">\n <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n </button>\n </div>\n </div>\n </div>\n <div class=\"table-body\">\n <div\n class=\"table-row\"\n *qdCustomFor=\"let row of templateData; let rowIndex = index; toggler: togglerDrawing\"\n [formGroupName]=\"rowIndex\"\n >\n <ng-container *ngFor=\"let column of visibleColumns\">\n <div class=\"table-cell\">\n <qd-dropdown\n [config]=\"{\n filter: column.filter,\n options: column.options,\n placeholder: column.placeholder,\n placeholderPrefix: column.placeholderPrefix,\n viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n }\"\n [data-test-id]=\"column.name + rowIndex\"\n *ngIf=\"column.type === 'enum'; else otherTypes\"\n [dense]=\"true\"\n [formControl]=\"$any(control.controls[rowIndex])?.controls[column.name]\"\n qdFocusable\n class=\"dropdown\"\n >\n </qd-dropdown>\n\n <ng-template #otherTypes>\n <qd-input\n [data-test-id]=\"column.name + rowIndex\"\n [formControlName]=\"column.name\"\n *ngIf=\"column.type !== 'enum' && $any(control.controls[rowIndex])?.controls[column.name]\"\n [config]=\"{\n inputType: column.type === 'integer' ? 'number' : 'text',\n viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n }\"\n qdFocusable\n ></qd-input>\n </ng-template>\n </div>\n </ng-container>\n <td\n *ngIf=\"hasVisibleActions$ | async\"\n class=\"table-cell actions\"\n [attr.data-test-id]=\"testId + '-cell-inline-actions'\"\n >\n <button\n type=\"button\"\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n [qdPopoverStopPropagation]=\"true\"\n class=\"menu-button\"\n data-test=\"secondary-actions-toggler\"\n >\n <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n </button>\n\n <ng-template #menu>\n <button\n *ngFor=\"let secondaryAction of actions$ | async\"\n class=\"secondary-actions\"\n [ngClass]=\"{ disabled: secondaryAction.isDisabled }\"\n (click)=\"handleSecondaryAction(secondaryAction, rowIndex)\"\n >\n {{ secondaryAction.label.i18n | translate }}\n </button>\n <button\n *ngIf=\"canAdd && (viewonly$ | async) === false\"\n class=\"secondary-actions\"\n (click)=\"removeRow(rowIndex)\"\n >\n {{ \"i18n.qd.quick.edit.removeButtonLabel\" | translate }}\n </button>\n </ng-template>\n </td>\n </div>\n </div>\n <div class=\"empty-body\" *ngIf=\"config.emptyStateView && !config.emptyStateView.disabled && templateData.length === 0\">\n <p>{{ config.emptyStateView.i18n | translate }}</p>\n </div>\n</div>\n", styles: [".table{display:flex;width:100%;flex-direction:column;margin:1.25rem auto;background-color:#fff;font-size:.875rem}.table ::ng-deep .qd-input-input{margin-bottom:0!important}.table-header .table-row{padding-top:.125rem;padding-bottom:.125rem;background-color:#e5e5e5;font-weight:700}.table-header .table-row .actions-column{flex:0;border-right:none;visibility:hidden}.table-header,.table-body{display:flex;flex-direction:column}.table-row{display:flex;flex-direction:row;padding:.25rem 1rem;border-bottom:.0625rem solid rgb(213,213,213);gap:1rem}.table-row ::ng-deep qd-form-label{display:none!important}.table-row ::ng-deep qd-form-hint .qd-form-hint{display:none}.table-row ::ng-deep qd-input{margin-bottom:0!important}.table-cell{display:flex;height:37px;flex:1;align-items:center;text-align:left}.table-cell:has(.qd-input-error),.table-cell:has(.qd-dropdown-error){height:auto;align-items:flex-start}.table-cell.actions{flex:0}.table-row:last-child{border-bottom:none}.table-cell:last-child{border-right:none}.editable-actions{display:flex;justify-content:flex-end;margin-right:.625rem;gap:.625rem}.menu-button{display:flex;padding:0 .625rem 0 .375rem;background:unset;color:#454545;font-size:2rem;vertical-align:middle}.menu-button:hover,.menu-button:focus{color:#000;outline:0!important}.secondary-actions{display:block;width:100%;min-height:2rem;padding:0 1rem;background:#fff0;font-size:.75rem;text-align:left}.secondary-actions:hover{background-color:#f2f7fa}.secondary-actions.disabled{color:#b4b4b4;cursor:not-allowed}.secondary-actions.disabled:hover{background-color:#fff0}.dropdown{min-width:160px}.empty-body{padding:1.5rem;background:#fff}.empty-body p{margin:0 0 .5rem}.additional-info{align-self:center;margin-left:.25rem;color:#069;cursor:pointer;font-size:1rem;font-weight:400;transform:translateY(.0625rem)}.additional-info:hover,.additional-info:focus,.additional-info:active{color:#14516f}\n"], dependencies: [{ kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdDropdownComponent, selector: "qd-dropdown", inputs: ["value", "id", "formControlName", "config", "data-test-id", "qdPopoverMaxHeight", "dense"], outputs: ["valueChange", "enterClick", "clickHint", "clickReadonly", "clickViewonly"] }, { kind: "component", type: QdInputComponent, selector: "qd-input", inputs: ["formControlName", "value", "config", "isError", "data-test-id"], outputs: ["valueChange", "enterClick", "clickClear", "clickHint", "clickReadonly", "clickViewonly"] }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$4.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "directive", type: QdFocusableDirective, selector: "[qdFocusable]" }, { kind: "directive", type: QdTooltipOnClickDirective, selector: "[qdTooltipOnClick]", inputs: ["qdTooltipContent"] }, { kind: "directive", type: QdCustomForDirective, selector: "[qdCustomFor]", inputs: ["qdCustomForOf", "qdCustomForToggler"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });