@vendure/admin-ui 2.0.0 → 2.0.1

package/fesm2022/vendure-admin-ui-core.mjs

@@ -6362,9 +6362,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImpor
  */
 const ADMIN_SPECIFIC_KEYS = [
     'activeTheme',
-    'uiLanguageCode',
-    'uiLocale',
-    'contentLanguageCode',
     'dashboardWidgetLayout',
     'activeTheme',
     'livePreviewCollectionContents',
@@ -10213,21 +10210,25 @@ class DefaultInterceptor {
         else {
             // GraphQL errors still return 200 OK responses, but have the actual error message
             // inside the body of the response.
-            const graqhQLErrors = response.body.errors;
-            if (graqhQLErrors && Array.isArray(graqhQLErrors)) {
-                const firstCode = graqhQLErrors[0]?.extensions?.code;
+            const graphQLErrors = response.body.errors;
+            if (graphQLErrors && Array.isArray(graphQLErrors)) {
+                const firstCode = graphQLErrors[0]?.extensions?.code;
                 if (firstCode === 'FORBIDDEN') {
                     this.authService.logOut().subscribe(() => {
                         const { loginUrl } = getAppConfig();
-                        if (loginUrl) {
+                        // If there is a `loginUrl` which is external to the AdminUI, redirect to it (with no query parameters)
+                        if (loginUrl && !this.areUrlsOnSameOrigin(loginUrl, window.location.origin)) {
                             window.location.href = loginUrl;
                             return;
                         }
-                        if (!window.location.pathname.includes('login')) {
-                            const path = graqhQLErrors[0].path.join(' > ');
+                        // Else, we build the login path from the login url if one is provided or fallback to `/login`
+                        const loginPath = loginUrl ? this.getPathFromLoginUrl(loginUrl) : '/login';
+                        if (!window.location.pathname.includes(loginPath)) {
+                            const path = graphQLErrors[0].path.join(' > ');
                             this.displayErrorNotification(marker(`error.403-forbidden`), { path });
                         }
-                        this.router.navigate(['/login'], {
+                        // Navigate to the `loginPath` route by ensuring the query param in charge of the redirection is provided
+                        this.router.navigate([loginPath], {
                             queryParams: {
                                 [AUTH_REDIRECT_PARAM]: btoa(this.router.url),
                             },
@@ -10235,12 +10236,12 @@ class DefaultInterceptor {
                     });
                 }
                 else if (firstCode === 'CHANNEL_NOT_FOUND') {
-                    const message = graqhQLErrors.map(err => err.message).join('\n');
+                    const message = graphQLErrors.map(err => err.message).join('\n');
                     this.displayErrorNotification(message);
                     this.localStorageService.remove('activeChannelToken');
                 }
                 else {
-                    const message = graqhQLErrors.map(err => err.message).join('\n');
+                    const message = graphQLErrors.map(err => err.message).join('\n');
                     this.displayErrorNotification(message);
                 }
             }
@@ -10276,6 +10277,23 @@ class DefaultInterceptor {
             }
         }
     }
+    /**
+     * Determine if two urls are on the same origin.
+     */
+    areUrlsOnSameOrigin(urlA, urlB) {
+        return new URL(urlA).origin === new URL(urlB).origin;
+    }
+    /**
+     * If the provided `loginUrl` is on the same origin than the AdminUI, return the path
+     * after the `/admin`.
+     * Else, return the whole login url.
+     */
+    getPathFromLoginUrl(loginUrl) {
+        if (!this.areUrlsOnSameOrigin(loginUrl, window.location.origin)) {
+            return loginUrl;
+        }
+        return loginUrl.split('/admin')[1];
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: DefaultInterceptor, deps: [{ token: DataService }, { token: i0.Injector }, { token: AuthService }, { token: i1$2.Router }, { token: LocalStorageService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: DefaultInterceptor }); }
 }
@@ -12441,11 +12459,11 @@ class SelectToggleComponent {
         this.selectedChange = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: SelectToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: SelectToggleComponent, selector: "vdr-select-toggle", inputs: { size: "size", selected: "selected", hiddenWhenOff: "hiddenWhenOff", disabled: "disabled", label: "label" }, outputs: { selectedChange: "selectedChange" }, ngImport: i0, template: "<div\r\n    class=\"toggle\"\r\n    [class.hide-when-off]=\"hiddenWhenOff\"\r\n    [class.disabled]=\"disabled\"\r\n    [class.small]=\"size === 'small'\"\r\n    [attr.tabindex]=\"disabled ? null : 0\"\r\n    [class.selected]=\"selected\"\r\n    (keydown.enter)=\"selectedChange.emit(!selected)\"\r\n    (keydown.space)=\"$event.preventDefault(); selectedChange.emit(!selected)\"\r\n    (click)=\"selectedChange.emit(!selected)\"\r\n>\r\n    <clr-icon shape=\"check-circle\" [attr.size]=\"size === 'small' ? 24 : 32\"></clr-icon>\r\n</div>\r\n<div class=\"toggle-label\" [class.disabled]=\"disabled\" *ngIf=\"label\" (click)=\"selectedChange.emit(!selected)\">\r\n    {{ label }}\r\n</div>\r\n", styles: [":host{display:flex;align-items:center;justify-content:center}.toggle{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;cursor:pointer;color:var(--color-grey-300);background-color:var(--color-component-bg-100);border-radius:50%;top:-12px;left:-12px;transition:opacity .2s,color .2s}.toggle.hide-when-off{opacity:0}.toggle.small{width:24px;height:24px}.toggle:not(.disabled):hover{color:var(--color-success-400);opacity:.9}.toggle.selected{opacity:1;color:var(--color-success-500)}.toggle.selected:not(.disabled):hover{color:var(--color-success-400);opacity:.9}.toggle:focus{outline:none;box-shadow:0 0 2px 2px var(--color-primary-500)}.toggle.disabled{cursor:default}.toggle-label{flex:1;margin-left:6px;text-align:left;font-size:12px}.toggle-label:not(.disabled){cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: SelectToggleComponent, selector: "vdr-select-toggle", inputs: { size: "size", selected: "selected", hiddenWhenOff: "hiddenWhenOff", disabled: "disabled", label: "label" }, outputs: { selectedChange: "selectedChange" }, ngImport: i0, template: "<div\r\n    class=\"toggle\"\r\n    [class.hide-when-off]=\"hiddenWhenOff\"\r\n    [class.disabled]=\"disabled\"\r\n    [class.small]=\"size === 'small'\"\r\n    [attr.tabindex]=\"disabled ? null : 0\"\r\n    [class.selected]=\"selected\"\r\n    (keydown.enter)=\"selectedChange.emit(!selected)\"\r\n    (keydown.space)=\"$event.preventDefault(); selectedChange.emit(!selected)\"\r\n    (click)=\"selectedChange.emit(!selected)\"\r\n>\r\n    <clr-icon\r\n        shape=\"check-circle\"\r\n        [class.is-solid]=\"selected\"\r\n        [attr.size]=\"size === 'small' ? 24 : 32\"\r\n    ></clr-icon>\r\n</div>\r\n<div\r\n    class=\"toggle-label\"\r\n    [class.selected]=\"selected\"\r\n    [class.disabled]=\"disabled\"\r\n    *ngIf=\"label\"\r\n    (click)=\"selectedChange.emit(!selected)\"\r\n>\r\n    {{ label }}\r\n</div>\r\n", styles: [":host{display:flex;align-items:center;justify-content:center}.toggle{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;cursor:pointer;color:var(--color-grey-300);background-color:var(--color-component-bg-100);border-radius:50%;top:-12px;left:-12px;transition:opacity .1s,color .1s}.toggle.hide-when-off{opacity:0}.toggle.small{width:24px;height:24px}.toggle:not(.disabled):hover{color:var(--color-success-600);opacity:.9}.toggle.selected{opacity:1;color:var(--color-success-700)}.toggle.selected:not(.disabled):hover{color:var(--color-success-600);opacity:.9}.toggle:focus{outline:none;box-shadow:0 0 2px 2px var(--color-primary-700)}.toggle.disabled{cursor:default}.toggle-label{flex:1;margin-left:6px;text-align:left;font-size:12px}.toggle-label:not(.disabled){cursor:pointer}.toggle-label.selected{color:var(--color-success-800)}\n"], dependencies: [{ kind: "directive", type: i1$4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: SelectToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-select-toggle', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n    class=\"toggle\"\r\n    [class.hide-when-off]=\"hiddenWhenOff\"\r\n    [class.disabled]=\"disabled\"\r\n    [class.small]=\"size === 'small'\"\r\n    [attr.tabindex]=\"disabled ? null : 0\"\r\n    [class.selected]=\"selected\"\r\n    (keydown.enter)=\"selectedChange.emit(!selected)\"\r\n    (keydown.space)=\"$event.preventDefault(); selectedChange.emit(!selected)\"\r\n    (click)=\"selectedChange.emit(!selected)\"\r\n>\r\n    <clr-icon shape=\"check-circle\" [attr.size]=\"size === 'small' ? 24 : 32\"></clr-icon>\r\n</div>\r\n<div class=\"toggle-label\" [class.disabled]=\"disabled\" *ngIf=\"label\" (click)=\"selectedChange.emit(!selected)\">\r\n    {{ label }}\r\n</div>\r\n", styles: [":host{display:flex;align-items:center;justify-content:center}.toggle{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;cursor:pointer;color:var(--color-grey-300);background-color:var(--color-component-bg-100);border-radius:50%;top:-12px;left:-12px;transition:opacity .2s,color .2s}.toggle.hide-when-off{opacity:0}.toggle.small{width:24px;height:24px}.toggle:not(.disabled):hover{color:var(--color-success-400);opacity:.9}.toggle.selected{opacity:1;color:var(--color-success-500)}.toggle.selected:not(.disabled):hover{color:var(--color-success-400);opacity:.9}.toggle:focus{outline:none;box-shadow:0 0 2px 2px var(--color-primary-500)}.toggle.disabled{cursor:default}.toggle-label{flex:1;margin-left:6px;text-align:left;font-size:12px}.toggle-label:not(.disabled){cursor:pointer}\n"] }]
+            args: [{ selector: 'vdr-select-toggle', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n    class=\"toggle\"\r\n    [class.hide-when-off]=\"hiddenWhenOff\"\r\n    [class.disabled]=\"disabled\"\r\n    [class.small]=\"size === 'small'\"\r\n    [attr.tabindex]=\"disabled ? null : 0\"\r\n    [class.selected]=\"selected\"\r\n    (keydown.enter)=\"selectedChange.emit(!selected)\"\r\n    (keydown.space)=\"$event.preventDefault(); selectedChange.emit(!selected)\"\r\n    (click)=\"selectedChange.emit(!selected)\"\r\n>\r\n    <clr-icon\r\n        shape=\"check-circle\"\r\n        [class.is-solid]=\"selected\"\r\n        [attr.size]=\"size === 'small' ? 24 : 32\"\r\n    ></clr-icon>\r\n</div>\r\n<div\r\n    class=\"toggle-label\"\r\n    [class.selected]=\"selected\"\r\n    [class.disabled]=\"disabled\"\r\n    *ngIf=\"label\"\r\n    (click)=\"selectedChange.emit(!selected)\"\r\n>\r\n    {{ label }}\r\n</div>\r\n", styles: [":host{display:flex;align-items:center;justify-content:center}.toggle{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;cursor:pointer;color:var(--color-grey-300);background-color:var(--color-component-bg-100);border-radius:50%;top:-12px;left:-12px;transition:opacity .1s,color .1s}.toggle.hide-when-off{opacity:0}.toggle.small{width:24px;height:24px}.toggle:not(.disabled):hover{color:var(--color-success-600);opacity:.9}.toggle.selected{opacity:1;color:var(--color-success-700)}.toggle.selected:not(.disabled):hover{color:var(--color-success-600);opacity:.9}.toggle:focus{outline:none;box-shadow:0 0 2px 2px var(--color-primary-700)}.toggle.disabled{cursor:default}.toggle-label{flex:1;margin-left:6px;text-align:left;font-size:12px}.toggle-label:not(.disabled){cursor:pointer}.toggle-label.selected{color:var(--color-success-800)}\n"] }]
         }], propDecorators: { size: [{
                 type: Input
             }], selected: [{
@@ -18209,7 +18227,7 @@ class PageService {
             if (isComponentWithResolver(config.component)) {
                 const { component: cmp, breadcrumbFn, resolveFn } = config.component;
                 component = cmp;
-                route.resolve = { detail: config.component.resolveFn };
+                route.resolve = { detail: resolveFn };
                 route.data = {
                     breadcrumb: data => data.detail.entity.pipe(map(entity => breadcrumbFn(entity))),
                 };
@@ -18220,6 +18238,9 @@ class PageService {
             const guards = typeof component.prototype.canDeactivate === 'function' ? [CanDeactivateDetailGuard] : [];
             route.component = component;
             route.canDeactivate = guards;
+            if (config.routeConfig) {
+                Object.assign(route, config.routeConfig);
+            }
             return route;
         });
     }
@@ -19884,6 +19905,34 @@ class TypedBaseDetailComponent extends BaseDetailComponent {
         this.setUpStreams();
     }
 }
+/**
+ * @description
+ * A helper function for creating tabs that point to a {@link TypedBaseDetailComponent}. This takes
+ * care of the route resolver parts so that the detail component automatically has access to the
+ * correct resolved detail data.
+ *
+ * @example
+ * ```TypeScript
+ * \@NgModule({
+ *   imports: [ReviewsSharedModule],
+ *   declarations: [/* ... *\/],
+ *   providers: [
+ *     registerPageTab({
+ *       location: 'product-detail',
+ *       tab: 'Specs',
+ *       route: 'specs',
+ *       component: detailComponentWithResolver({
+ *         component: ProductSpecDetailComponent,
+ *         query: GetProductSpecsDocument,
+ *         entityKey: 'spec',
+ *       }),
+ *     }),
+ *   ],
+ * })
+ * export class ProductSpecsUiExtensionModule {}
+ * ```
+ * @docsCategory list-detail-views
+ */
 function detailComponentWithResolver(config) {
     const resolveFn = (route, state) => {
         const router = inject(Router);
@@ -20972,7 +21021,7 @@ function patchObject(obj, patch) {
 }
 
 // Auto-generated by the set-version.js script.
-const ADMIN_UI_VERSION = '2.0.0';
+const ADMIN_UI_VERSION = '2.0.1';
 
 /**
  * @description