@quadrel-enterprise-ui/framework 19.8.1 → 19.9.0
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.
- package/fesm2022/quadrel-enterprise-ui-framework.mjs +23 -8
- package/fesm2022/quadrel-enterprise-ui-framework.mjs.map +1 -1
- package/lib/contact-card/contact-card.component.d.ts +2 -0
- package/lib/contact-card/contact-card.component.d.ts.map +1 -1
- package/lib/contact-card/model/contact-data.interface.d.ts +7 -0
- package/lib/contact-card/model/contact-data.interface.d.ts.map +1 -1
- package/lib/forms/multi-input/multi-input.component.d.ts.map +1 -1
- package/package.json +2 -2
|
@@ -13437,6 +13437,7 @@ class QdMultiInputComponent {
|
|
|
13437
13437
|
this.id = v4();
|
|
13438
13438
|
this.multiInputService.optionsListForView$.pipe(takeUntilDestroyed()).subscribe(list => {
|
|
13439
13439
|
this.optionsListForView = list;
|
|
13440
|
+
this.changeDetectorRef.markForCheck();
|
|
13440
13441
|
});
|
|
13441
13442
|
}
|
|
13442
13443
|
ngOnInit() {
|
|
@@ -13451,10 +13452,18 @@ class QdMultiInputComponent {
|
|
|
13451
13452
|
return;
|
|
13452
13453
|
if (this.formArrayName) {
|
|
13453
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
|
+
}
|
|
13454
13459
|
// Updating form array programmatically from outside
|
|
13455
|
-
this._subs.add(formArray.valueChanges.subscribe(
|
|
13456
|
-
this.multiInputService.setSelectedItems(
|
|
13457
|
-
this.valuesChange.emit(
|
|
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();
|
|
13458
13467
|
}));
|
|
13459
13468
|
if (formArray instanceof QdFormArray) {
|
|
13460
13469
|
this.formArray = formArray;
|
|
@@ -18140,6 +18149,9 @@ class QdContactCardComponent {
|
|
|
18140
18149
|
}
|
|
18141
18150
|
return this.contactData.phoneNumber;
|
|
18142
18151
|
}
|
|
18152
|
+
get phoneUrl() {
|
|
18153
|
+
return this.hasPhoneUrl() ? this.contactData.phoneUrl : '';
|
|
18154
|
+
}
|
|
18143
18155
|
get emailAddress() {
|
|
18144
18156
|
if (!this.hasEmailAddress()) {
|
|
18145
18157
|
if (!this.hasPlaceholders)
|
|
@@ -18166,6 +18178,9 @@ class QdContactCardComponent {
|
|
|
18166
18178
|
hasPhoneNumber() {
|
|
18167
18179
|
return !!this.contactData.phoneNumber;
|
|
18168
18180
|
}
|
|
18181
|
+
hasPhoneUrl() {
|
|
18182
|
+
return !!this.contactData.phoneUrl;
|
|
18183
|
+
}
|
|
18169
18184
|
hasAddress() {
|
|
18170
18185
|
return !!this.contactData.address;
|
|
18171
18186
|
}
|
|
@@ -18179,11 +18194,11 @@ class QdContactCardComponent {
|
|
|
18179
18194
|
return !!this.contactData.emailAddress;
|
|
18180
18195
|
}
|
|
18181
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 });
|
|
18182
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
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 });
|
|
18183
18198
|
}
|
|
18184
18199
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdContactCardComponent, decorators: [{
|
|
18185
18200
|
type: Component,
|
|
18186
|
-
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"] }]
|
|
18187
18202
|
}], ctorParameters: () => [{ type: i1$3.TranslateService }], propDecorators: { contactData: [{
|
|
18188
18203
|
type: Input
|
|
18189
18204
|
}], actions: [{
|
|
@@ -30852,7 +30867,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
30852
30867
|
type: Injectable
|
|
30853
30868
|
}], ctorParameters: () => [{ type: i1$3.TranslateService }, { type: QdShellEportalLanguageService }] });
|
|
30854
30869
|
|
|
30855
|
-
const DEFAULT_JAVASCRIPT_ASSET_PATH$1 = 'assets/service-navigation-web-component.js?version=
|
|
30870
|
+
const DEFAULT_JAVASCRIPT_ASSET_PATH$1 = 'assets/service-navigation-web-component.js?version=15.0.3';
|
|
30856
30871
|
class QdShellServiceNavigationComponent {
|
|
30857
30872
|
serviceNavigationService;
|
|
30858
30873
|
translateService;
|
|
@@ -30976,11 +30991,11 @@ class QdShellServiceNavigationComponent {
|
|
|
30976
30991
|
updateHtmlLang(language);
|
|
30977
30992
|
}
|
|
30978
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 });
|
|
30979
|
-
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"] }] });
|
|
30980
30995
|
}
|
|
30981
30996
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: QdShellServiceNavigationComponent, decorators: [{
|
|
30982
30997
|
type: Component,
|
|
30983
|
-
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"] }]
|
|
30984
30999
|
}], ctorParameters: () => [{ type: QdShellServiceNavigationService }, { type: i1$3.TranslateService }, { type: QdLanguageFromUrlService }, { type: QdShellPamsEnvironmentService }, { type: undefined, decorators: [{
|
|
30985
31000
|
type: Optional
|
|
30986
31001
|
}, {
|