@vendure/admin-ui 1.4.7 → 2.0.0-next.0

package/fesm2020/vendure-admin-ui-login.mjs

@@ -0,0 +1,122 @@
+import * as i0 from '@angular/core';
+import { Component, Injectable, NgModule } from '@angular/core';
+import * as i1 from '@vendure/admin-ui/core';
+import { ADMIN_UI_VERSION, getAppConfig, AUTH_REDIRECT_PARAM, SharedModule } from '@vendure/admin-ui/core';
+import * as i1$1 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import * as i3 from '@clr/angular';
+import * as i4 from '@angular/forms';
+import * as i5 from '@angular/common';
+import * as i6 from '@ngx-translate/core';
+import { map } from 'rxjs/operators';
+
+class LoginComponent {
+    constructor(authService, router) {
+        this.authService = authService;
+        this.router = router;
+        this.username = '';
+        this.password = '';
+        this.rememberMe = false;
+        this.version = ADMIN_UI_VERSION;
+        this.brand = getAppConfig().brand;
+        this.hideVendureBranding = getAppConfig().hideVendureBranding;
+        this.hideVersion = getAppConfig().hideVersion;
+    }
+    logIn() {
+        this.errorMessage = undefined;
+        this.authService.logIn(this.username, this.password, this.rememberMe).subscribe(result => {
+            switch (result.__typename) {
+                case 'CurrentUser':
+                    const redirect = this.getRedirectRoute();
+                    this.router.navigateByUrl(redirect ? redirect : '/');
+                    break;
+                case 'InvalidCredentialsError':
+                case 'NativeAuthStrategyError':
+                    this.errorMessage = result.message;
+                    break;
+            }
+        });
+    }
+    /**
+     * Attempts to read a redirect param from the current url and parse it into a
+     * route from which the user was redirected after a 401 error.
+     */
+    getRedirectRoute() {
+        let redirectTo;
+        const re = new RegExp(`${AUTH_REDIRECT_PARAM}=(.*)`);
+        try {
+            const redirectToParam = window.location.search.match(re);
+            if (redirectToParam && 1 < redirectToParam.length) {
+                redirectTo = atob(decodeURIComponent(redirectToParam[1]));
+            }
+        }
+        catch (e) {
+            // ignore
+        }
+        return redirectTo;
+    }
+}
+LoginComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LoginComponent, deps: [{ token: i1.AuthService }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
+LoginComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: LoginComponent, selector: "vdr-login", ngImport: i0, template: "<div class=\"login-wrapper\">\r\n    <form class=\"login\">\r\n        <label class=\"title\"><img src=\"assets/logo-300px.png\" /></label>\r\n        <div class=\"login-group\">\r\n            <input\r\n                class=\"username\"\r\n                type=\"text\"\r\n                name=\"username\"\r\n                id=\"login_username\"\r\n                [(ngModel)]=\"username\"\r\n                [placeholder]=\"'common.username' | translate\"\r\n            />\r\n            <input\r\n                class=\"password\"\r\n                name=\"password\"\r\n                type=\"password\"\r\n                id=\"login_password\"\r\n                [(ngModel)]=\"password\"\r\n                [placeholder]=\"'common.password' | translate\"\r\n            />\r\n            <clr-alert [clrAlertType]=\"'danger'\"  [clrAlertClosable]=\"false\" [class.visible]=\"errorMessage\" class=\"login-error\">\r\n                <clr-alert-item>\r\n                    <span class=\"alert-text\">\r\n                        {{ errorMessage }}\r\n                    </span>\r\n                </clr-alert-item>\r\n            </clr-alert>\r\n            <clr-checkbox-wrapper>\r\n                <input\r\n                    type=\"checkbox\"\r\n                    clrCheckbox\r\n                    id=\"rememberme\"\r\n                    name=\"rememberme\"\r\n                    [(ngModel)]=\"rememberMe\"\r\n                />\r\n                <label>{{ 'common.remember-me' | translate }}</label>\r\n            </clr-checkbox-wrapper>\r\n            <button\r\n                type=\"submit\"\r\n                class=\"btn btn-primary\"\r\n                (click)=\"logIn()\"\r\n                [disabled]=\"!username || !password\"\r\n            >\r\n                {{ 'common.login' | translate }}\r\n            </button>\r\n        </div>\r\n        <div class=\"version\">\r\n            <span *ngIf=\"brand\">{{ brand }} <span *ngIf=\"!hideVendureBranding || !hideVersion\">-</span></span>\r\n            <span *ngIf=\"!hideVendureBranding\">vendure</span>\r\n            <span *ngIf=\"!hideVersion\">v{{ version }}</span>\r\n        </div>\r\n    </form>\r\n</div>\r\n", styles: [".login-wrapper{background:var(--login-page-bg);background-size:auto;justify-content:center}.title{text-align:center}.version{flex:1;display:flex;align-items:flex-end;justify-content:center;color:var(--color-grey-300)}.version span+span{margin-left:5px}.login-error{max-height:0;overflow:hidden}.login-error.visible{max-height:46px;transition:max-height .2s;animation:shake .82s cubic-bezier(.36,.07,.19,.97) both;animation-delay:.2s;transform:translate(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;perspective:1000px}@keyframes shake{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(2px)}30%,50%,70%{transform:translate(-4px)}40%,60%{transform:translate(4px)}}\n"], components: [{ type: i3.ClrAlert, selector: "clr-alert", inputs: ["clrAlertSizeSmall", "clrAlertClosable", "clrAlertAppLevel", "clrCloseButtonAriaLabel", "clrAlertClosed", "clrAlertType", "clrAlertIcon"], outputs: ["clrAlertClosedChange"] }, { type: i3.ClrAlertItem, selector: "clr-alert-item" }, { type: i3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }], directives: [{ type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3.ClrLabel, selector: "label", inputs: ["for"] }, { type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.ClrAlertText, selector: ".alert-text" }, { type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i6.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LoginComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-login', template: "<div class=\"login-wrapper\">\r\n    <form class=\"login\">\r\n        <label class=\"title\"><img src=\"assets/logo-300px.png\" /></label>\r\n        <div class=\"login-group\">\r\n            <input\r\n                class=\"username\"\r\n                type=\"text\"\r\n                name=\"username\"\r\n                id=\"login_username\"\r\n                [(ngModel)]=\"username\"\r\n                [placeholder]=\"'common.username' | translate\"\r\n            />\r\n            <input\r\n                class=\"password\"\r\n                name=\"password\"\r\n                type=\"password\"\r\n                id=\"login_password\"\r\n                [(ngModel)]=\"password\"\r\n                [placeholder]=\"'common.password' | translate\"\r\n            />\r\n            <clr-alert [clrAlertType]=\"'danger'\"  [clrAlertClosable]=\"false\" [class.visible]=\"errorMessage\" class=\"login-error\">\r\n                <clr-alert-item>\r\n                    <span class=\"alert-text\">\r\n                        {{ errorMessage }}\r\n                    </span>\r\n                </clr-alert-item>\r\n            </clr-alert>\r\n            <clr-checkbox-wrapper>\r\n                <input\r\n                    type=\"checkbox\"\r\n                    clrCheckbox\r\n                    id=\"rememberme\"\r\n                    name=\"rememberme\"\r\n                    [(ngModel)]=\"rememberMe\"\r\n                />\r\n                <label>{{ 'common.remember-me' | translate }}</label>\r\n            </clr-checkbox-wrapper>\r\n            <button\r\n                type=\"submit\"\r\n                class=\"btn btn-primary\"\r\n                (click)=\"logIn()\"\r\n                [disabled]=\"!username || !password\"\r\n            >\r\n                {{ 'common.login' | translate }}\r\n            </button>\r\n        </div>\r\n        <div class=\"version\">\r\n            <span *ngIf=\"brand\">{{ brand }} <span *ngIf=\"!hideVendureBranding || !hideVersion\">-</span></span>\r\n            <span *ngIf=\"!hideVendureBranding\">vendure</span>\r\n            <span *ngIf=\"!hideVersion\">v{{ version }}</span>\r\n        </div>\r\n    </form>\r\n</div>\r\n", styles: [".login-wrapper{background:var(--login-page-bg);background-size:auto;justify-content:center}.title{text-align:center}.version{flex:1;display:flex;align-items:flex-end;justify-content:center;color:var(--color-grey-300)}.version span+span{margin-left:5px}.login-error{max-height:0;overflow:hidden}.login-error.visible{max-height:46px;transition:max-height .2s;animation:shake .82s cubic-bezier(.36,.07,.19,.97) both;animation-delay:.2s;transform:translate(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;perspective:1000px}@keyframes shake{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(2px)}30%,50%,70%{transform:translate(-4px)}40%,60%{transform:translate(4px)}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.AuthService }, { type: i1$1.Router }]; } });
+
+/**
+ * This guard prevents loggen-in users from navigating to the login screen.
+ */
+class LoginGuard {
+    constructor(router, authService) {
+        this.router = router;
+        this.authService = authService;
+    }
+    canActivate(route) {
+        return this.authService.checkAuthenticatedStatus().pipe(map(authenticated => {
+            if (authenticated) {
+                this.router.navigate(['/']);
+            }
+            return !authenticated;
+        }));
+    }
+}
+LoginGuard.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LoginGuard, deps: [{ token: i1$1.Router }, { token: i1.AuthService }], target: i0.ɵɵFactoryTarget.Injectable });
+LoginGuard.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LoginGuard, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LoginGuard, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.Router }, { type: i1.AuthService }]; } });
+
+const loginRoutes = [
+    {
+        path: '',
+        component: LoginComponent,
+        pathMatch: 'full',
+        canActivate: [LoginGuard],
+    },
+];
+
+class LoginModule {
+}
+LoginModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LoginModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LoginModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LoginModule, declarations: [LoginComponent], imports: [SharedModule, i1$1.RouterModule] });
+LoginModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LoginModule, imports: [[SharedModule, RouterModule.forChild(loginRoutes)]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LoginModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [SharedModule, RouterModule.forChild(loginRoutes)],
+                    exports: [],
+                    declarations: [LoginComponent],
+                }]
+        }] });
+
+// This file was generated by the build-public-api.ts script
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LoginComponent, LoginGuard, LoginModule, loginRoutes };
+//# sourceMappingURL=vendure-admin-ui-login.mjs.map

package/fesm2020/vendure-admin-ui-login.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"vendure-admin-ui-login.mjs","sources":["../../src/lib/login/src/components/login/login.component.ts","../../src/lib/login/src/components/login/login.component.html","../../src/lib/login/src/providers/login.guard.ts","../../src/lib/login/src/login.routes.ts","../../src/lib/login/src/login.module.ts","../../src/lib/login/src/public_api.ts","../../src/lib/login/src/vendure-admin-ui-login.ts"],"sourcesContent":["import { Component } from '@angular/core';\r\nimport { Router } from '@angular/router';\r\nimport { ADMIN_UI_VERSION, AuthService, AUTH_REDIRECT_PARAM, getAppConfig } from '@vendure/admin-ui/core';\r\n\r\n@Component({\r\n    selector: 'vdr-login',\r\n    templateUrl: './login.component.html',\r\n    styleUrls: ['./login.component.scss'],\r\n})\r\nexport class LoginComponent {\r\n    username = '';\r\n    password = '';\r\n    rememberMe = false;\r\n    version = ADMIN_UI_VERSION;\r\n    errorMessage: string | undefined;\r\n    brand = getAppConfig().brand;\r\n    hideVendureBranding = getAppConfig().hideVendureBranding;\r\n    hideVersion = getAppConfig().hideVersion;\r\n\r\n    constructor(private authService: AuthService, private router: Router) {}\r\n\r\n    logIn(): void {\r\n        this.errorMessage = undefined;\r\n        this.authService.logIn(this.username, this.password, this.rememberMe).subscribe(result => {\r\n            switch (result.__typename) {\r\n                case 'CurrentUser':\r\n                    const redirect = this.getRedirectRoute();\r\n                    this.router.navigateByUrl(redirect ? redirect : '/');\r\n                    break;\r\n                case 'InvalidCredentialsError':\r\n                case 'NativeAuthStrategyError':\r\n                    this.errorMessage = result.message;\r\n                    break;\r\n            }\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Attempts to read a redirect param from the current url and parse it into a\r\n     * route from which the user was redirected after a 401 error.\r\n     */\r\n    private getRedirectRoute(): string | undefined {\r\n        let redirectTo: string | undefined;\r\n        const re = new RegExp(`${AUTH_REDIRECT_PARAM}=(.*)`);\r\n        try {\r\n            const redirectToParam = window.location.search.match(re);\r\n            if (redirectToParam && 1 < redirectToParam.length) {\r\n                redirectTo = atob(decodeURIComponent(redirectToParam[1]));\r\n            }\r\n        } catch (e: any) {\r\n            // ignore\r\n        }\r\n        return redirectTo;\r\n    }\r\n}\r\n","<div class=\"login-wrapper\">\r\n    <form class=\"login\">\r\n        <label class=\"title\"><img src=\"assets/logo-300px.png\" /></label>\r\n        <div class=\"login-group\">\r\n            <input\r\n                class=\"username\"\r\n                type=\"text\"\r\n                name=\"username\"\r\n                id=\"login_username\"\r\n                [(ngModel)]=\"username\"\r\n                [placeholder]=\"'common.username' | translate\"\r\n            />\r\n            <input\r\n                class=\"password\"\r\n                name=\"password\"\r\n                type=\"password\"\r\n                id=\"login_password\"\r\n                [(ngModel)]=\"password\"\r\n                [placeholder]=\"'common.password' | translate\"\r\n            />\r\n            <clr-alert [clrAlertType]=\"'danger'\"  [clrAlertClosable]=\"false\" [class.visible]=\"errorMessage\" class=\"login-error\">\r\n                <clr-alert-item>\r\n                    <span class=\"alert-text\">\r\n                        {{ errorMessage }}\r\n                    </span>\r\n                </clr-alert-item>\r\n            </clr-alert>\r\n            <clr-checkbox-wrapper>\r\n                <input\r\n                    type=\"checkbox\"\r\n                    clrCheckbox\r\n                    id=\"rememberme\"\r\n                    name=\"rememberme\"\r\n                    [(ngModel)]=\"rememberMe\"\r\n                />\r\n                <label>{{ 'common.remember-me' | translate }}</label>\r\n            </clr-checkbox-wrapper>\r\n            <button\r\n                type=\"submit\"\r\n                class=\"btn btn-primary\"\r\n                (click)=\"logIn()\"\r\n                [disabled]=\"!username || !password\"\r\n            >\r\n                {{ 'common.login' | translate }}\r\n            </button>\r\n        </div>\r\n        <div class=\"version\">\r\n            <span *ngIf=\"brand\">{{ brand }} <span *ngIf=\"!hideVendureBranding || !hideVersion\">-</span></span>\r\n            <span *ngIf=\"!hideVendureBranding\">vendure</span>\r\n            <span *ngIf=\"!hideVersion\">v{{ version }}</span>\r\n        </div>\r\n    </form>\r\n</div>\r\n","import { Injectable } from '@angular/core';\r\nimport { ActivatedRouteSnapshot, CanActivate, Router } from '@angular/router';\r\nimport { AuthService } from '@vendure/admin-ui/core';\r\nimport { Observable } from 'rxjs';\r\nimport { map } from 'rxjs/operators';\r\n\r\n/**\r\n * This guard prevents loggen-in users from navigating to the login screen.\r\n */\r\n@Injectable({\r\n    providedIn: 'root',\r\n})\r\nexport class LoginGuard implements CanActivate {\r\n    constructor(private router: Router, private authService: AuthService) {}\r\n\r\n    canActivate(route: ActivatedRouteSnapshot): Observable<boolean> {\r\n        return this.authService.checkAuthenticatedStatus().pipe(\r\n            map(authenticated => {\r\n                if (authenticated) {\r\n                    this.router.navigate(['/']);\r\n                }\r\n                return !authenticated;\r\n            }),\r\n        );\r\n    }\r\n}\r\n","import { Routes } from '@angular/router';\r\n\r\nimport { LoginComponent } from './components/login/login.component';\r\nimport { LoginGuard } from './providers/login.guard';\r\n\r\nexport const loginRoutes: Routes = [\r\n    {\r\n        path: '',\r\n        component: LoginComponent,\r\n        pathMatch: 'full',\r\n        canActivate: [LoginGuard],\r\n    },\r\n];\r\n","import { NgModule } from '@angular/core';\r\nimport { RouterModule } from '@angular/router';\r\nimport { SharedModule } from '@vendure/admin-ui/core';\r\n\r\nimport { LoginComponent } from './components/login/login.component';\r\nimport { loginRoutes } from './login.routes';\r\n\r\n@NgModule({\r\n    imports: [SharedModule, RouterModule.forChild(loginRoutes)],\r\n    exports: [],\r\n    declarations: [LoginComponent],\r\n})\r\nexport class LoginModule {}\r\n","// This file was generated by the build-public-api.ts script\nexport * from './components/login/login.component';\nexport * from './login.module';\nexport * from './login.routes';\nexport * from './providers/login.guard';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;;;;;;;MASa,cAAc;IAUvB,YAAoB,WAAwB,EAAU,MAAc;QAAhD,gBAAW,GAAX,WAAW,CAAa;QAAU,WAAM,GAAN,MAAM,CAAQ;QATpE,aAAQ,GAAG,EAAE,CAAC;QACd,aAAQ,GAAG,EAAE,CAAC;QACd,eAAU,GAAG,KAAK,CAAC;QACnB,YAAO,GAAG,gBAAgB,CAAC;QAE3B,UAAK,GAAG,YAAY,EAAE,CAAC,KAAK,CAAC;QAC7B,wBAAmB,GAAG,YAAY,EAAE,CAAC,mBAAmB,CAAC;QACzD,gBAAW,GAAG,YAAY,EAAE,CAAC,WAAW,CAAC;KAE+B;IAExE,KAAK;QACD,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;QAC9B,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,MAAM;YAClF,QAAQ,MAAM,CAAC,UAAU;gBACrB,KAAK,aAAa;oBACd,MAAM,QAAQ,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;oBACzC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,QAAQ,GAAG,QAAQ,GAAG,GAAG,CAAC,CAAC;oBACrD,MAAM;gBACV,KAAK,yBAAyB,CAAC;gBAC/B,KAAK,yBAAyB;oBAC1B,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC;oBACnC,MAAM;aACb;SACJ,CAAC,CAAC;KACN;;;;;IAMO,gBAAgB;QACpB,IAAI,UAA8B,CAAC;QACnC,MAAM,EAAE,GAAG,IAAI,MAAM,CAAC,GAAG,mBAAmB,OAAO,CAAC,CAAC;QACrD,IAAI;YACA,MAAM,eAAe,GAAG,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;YACzD,IAAI,eAAe,IAAI,CAAC,GAAG,eAAe,CAAC,MAAM,EAAE;gBAC/C,UAAU,GAAG,IAAI,CAAC,kBAAkB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;aAC7D;SACJ;QAAC,OAAO,CAAM,EAAE;;SAEhB;QACD,OAAO,UAAU,CAAC;KACrB;;2GA5CQ,cAAc;+FAAd,cAAc,iDCT3B,6pEAqDA;2FD5Ca,cAAc;kBAL1B,SAAS;+BACI,WAAW;;;AECzB;;;MAMa,UAAU;IACnB,YAAoB,MAAc,EAAU,WAAwB;QAAhD,WAAM,GAAN,MAAM,CAAQ;QAAU,gBAAW,GAAX,WAAW,CAAa;KAAI;IAExE,WAAW,CAAC,KAA6B;QACrC,OAAO,IAAI,CAAC,WAAW,CAAC,wBAAwB,EAAE,CAAC,IAAI,CACnD,GAAG,CAAC,aAAa;YACb,IAAI,aAAa,EAAE;gBACf,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;aAC/B;YACD,OAAO,CAAC,aAAa,CAAC;SACzB,CAAC,CACL,CAAC;KACL;;uGAZQ,UAAU;2GAAV,UAAU,cAFP,MAAM;2FAET,UAAU;kBAHtB,UAAU;mBAAC;oBACR,UAAU,EAAE,MAAM;iBACrB;;;MCNY,WAAW,GAAW;IAC/B;QACI,IAAI,EAAE,EAAE;QACR,SAAS,EAAE,cAAc;QACzB,SAAS,EAAE,MAAM;QACjB,WAAW,EAAE,CAAC,UAAU,CAAC;KAC5B;;;MCCQ,WAAW;;wGAAX,WAAW;yGAAX,WAAW,iBAFL,cAAc,aAFnB,YAAY;yGAIb,WAAW,YAJX,CAAC,YAAY,EAAE,YAAY,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;2FAIlD,WAAW;kBALvB,QAAQ;mBAAC;oBACN,OAAO,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;oBAC3D,OAAO,EAAE,EAAE;oBACX,YAAY,EAAE,CAAC,cAAc,CAAC;iBACjC;;;ACXD;;ACAA;;;;;;"}

package/fesm2020/vendure-admin-ui-marketing.mjs

@@ -0,0 +1,388 @@
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, Injectable, NgModule } from '@angular/core';
+import * as i3 from '@angular/forms';
+import { Validators, FormGroup, FormControl } from '@angular/forms';
+import { marker } from '@biesbjerg/ngx-translate-extract-marker';
+import * as i2 from '@vendure/admin-ui/core';
+import { BaseDetailComponent, encodeConfigArgValue, getConfigArgValue, getDefaultConfigArgValue, BaseListComponent, BaseEntityResolver, createResolveData, CanDeactivateDetailGuard, detailBreadcrumb, SharedModule } from '@vendure/admin-ui/core';
+import { take, mergeMap, debounceTime, takeUntil, switchMap } from 'rxjs/operators';
+import * as i1 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import * as i4 from '@clr/angular';
+import * as i5 from '@angular/common';
+import * as i6 from '@ngx-translate/core';
+import { merge, EMPTY } from 'rxjs';
+
+class PromotionDetailComponent extends BaseDetailComponent {
+    constructor(router, route, serverConfigService, changeDetector, dataService, formBuilder, notificationService) {
+        super(route, router, serverConfigService, dataService);
+        this.changeDetector = changeDetector;
+        this.dataService = dataService;
+        this.formBuilder = formBuilder;
+        this.notificationService = notificationService;
+        this.conditions = [];
+        this.actions = [];
+        this.allConditions = [];
+        this.allActions = [];
+        this.customFields = this.getCustomFieldConfig('Promotion');
+        this.detailForm = this.formBuilder.group({
+            name: ['', Validators.required],
+            enabled: true,
+            couponCode: null,
+            perCustomerUsageLimit: null,
+            startsAt: null,
+            endsAt: null,
+            conditions: this.formBuilder.array([]),
+            actions: this.formBuilder.array([]),
+            customFields: this.formBuilder.group(this.customFields.reduce((hash, field) => ({ ...hash, [field.name]: '' }), {})),
+        });
+    }
+    ngOnInit() {
+        this.init();
+        this.promotion$ = this.entity$;
+        this.dataService.promotion.getPromotionActionsAndConditions().single$.subscribe(data => {
+            this.allActions = data.promotionActions;
+            this.allConditions = data.promotionConditions;
+            this.changeDetector.markForCheck();
+        });
+    }
+    ngOnDestroy() {
+        this.destroy();
+    }
+    getAvailableConditions() {
+        return this.allConditions.filter(o => !this.conditions.find(c => c.code === o.code));
+    }
+    getConditionDefinition(condition) {
+        return this.allConditions.find(c => c.code === condition.code);
+    }
+    getAvailableActions() {
+        return this.allActions.filter(o => !this.actions.find(a => a.code === o.code));
+    }
+    getActionDefinition(action) {
+        return this.allActions.find(c => c.code === action.code);
+    }
+    saveButtonEnabled() {
+        return (this.detailForm.dirty &&
+            this.detailForm.valid &&
+            (this.conditions.length !== 0 || this.detailForm.value.couponCode) &&
+            this.actions.length !== 0);
+    }
+    addCondition(condition) {
+        this.addOperation('conditions', condition);
+        this.detailForm.markAsDirty();
+    }
+    addAction(action) {
+        this.addOperation('actions', action);
+        this.detailForm.markAsDirty();
+    }
+    removeCondition(condition) {
+        this.removeOperation('conditions', condition);
+        this.detailForm.markAsDirty();
+    }
+    removeAction(action) {
+        this.removeOperation('actions', action);
+        this.detailForm.markAsDirty();
+    }
+    formArrayOf(key) {
+        return this.detailForm.get(key);
+    }
+    create() {
+        if (!this.detailForm.dirty) {
+            return;
+        }
+        const formValue = this.detailForm.value;
+        const input = {
+            name: formValue.name,
+            enabled: true,
+            couponCode: formValue.couponCode,
+            perCustomerUsageLimit: formValue.perCustomerUsageLimit,
+            startsAt: formValue.startsAt,
+            endsAt: formValue.endsAt,
+            conditions: this.mapOperationsToInputs(this.conditions, formValue.conditions),
+            actions: this.mapOperationsToInputs(this.actions, formValue.actions),
+            customFields: formValue.customFields,
+        };
+        this.dataService.promotion.createPromotion(input).subscribe(({ createPromotion }) => {
+            switch (createPromotion.__typename) {
+                case 'Promotion':
+                    this.notificationService.success(marker('common.notify-create-success'), {
+                        entity: 'Promotion',
+                    });
+                    this.detailForm.markAsPristine();
+                    this.changeDetector.markForCheck();
+                    this.router.navigate(['../', createPromotion.id], { relativeTo: this.route });
+                    break;
+                case 'MissingConditionsError':
+                    this.notificationService.error(createPromotion.message);
+                    break;
+            }
+        }, err => {
+            this.notificationService.error(marker('common.notify-create-error'), {
+                entity: 'Promotion',
+            });
+        });
+    }
+    save() {
+        if (!this.detailForm.dirty) {
+            return;
+        }
+        const formValue = this.detailForm.value;
+        this.promotion$
+            .pipe(take(1), mergeMap(promotion => {
+            const input = {
+                id: promotion.id,
+                name: formValue.name,
+                enabled: formValue.enabled,
+                couponCode: formValue.couponCode,
+                perCustomerUsageLimit: formValue.perCustomerUsageLimit,
+                startsAt: formValue.startsAt,
+                endsAt: formValue.endsAt,
+                conditions: this.mapOperationsToInputs(this.conditions, formValue.conditions),
+                actions: this.mapOperationsToInputs(this.actions, formValue.actions),
+                customFields: formValue.customFields,
+            };
+            return this.dataService.promotion.updatePromotion(input);
+        }))
+            .subscribe(data => {
+            this.notificationService.success(marker('common.notify-update-success'), {
+                entity: 'Promotion',
+            });
+            this.detailForm.markAsPristine();
+            this.changeDetector.markForCheck();
+        }, err => {
+            this.notificationService.error(marker('common.notify-update-error'), {
+                entity: 'Promotion',
+            });
+        });
+    }
+    /**
+     * Update the form values when the entity changes.
+     */
+    setFormValues(entity, languageCode) {
+        this.detailForm.patchValue({
+            name: entity.name,
+            enabled: entity.enabled,
+            couponCode: entity.couponCode,
+            perCustomerUsageLimit: entity.perCustomerUsageLimit,
+            startsAt: entity.startsAt,
+            endsAt: entity.endsAt,
+        });
+        entity.conditions.forEach(o => {
+            this.addOperation('conditions', o);
+        });
+        entity.actions.forEach(o => this.addOperation('actions', o));
+        if (this.customFields.length) {
+            this.setCustomFieldFormValues(this.customFields, this.detailForm.get('customFields'), entity);
+        }
+    }
+    /**
+     * Maps an array of conditions or actions to the input format expected by the GraphQL API.
+     */
+    mapOperationsToInputs(operations, formValueOperations) {
+        return operations.map((o, i) => {
+            return {
+                code: o.code,
+                arguments: Object.values(formValueOperations[i].args).map((value, j) => ({
+                    name: o.args[j].name,
+                    value: encodeConfigArgValue(value),
+                })),
+            };
+        });
+    }
+    /**
+     * Adds a new condition or action to the promotion.
+     */
+    addOperation(key, operation) {
+        const operationsArray = this.formArrayOf(key);
+        const collection = key === 'conditions' ? this.conditions : this.actions;
+        const index = operationsArray.value.findIndex(o => o.code === operation.code);
+        if (index === -1) {
+            const argsHash = operation.args.reduce((output, arg) => ({
+                ...output,
+                [arg.name]: getConfigArgValue(arg.value) ?? this.getDefaultArgValue(key, operation, arg.name),
+            }), {});
+            operationsArray.push(this.formBuilder.control({
+                code: operation.code,
+                args: argsHash,
+            }));
+            collection.push({
+                code: operation.code,
+                args: operation.args.map(a => ({ name: a.name, value: getConfigArgValue(a.value) })),
+            });
+        }
+    }
+    getDefaultArgValue(key, operation, argName) {
+        const def = key === 'conditions'
+            ? this.allConditions.find(c => c.code === operation.code)
+            : this.allActions.find(a => a.code === operation.code);
+        if (def) {
+            const argDef = def.args.find(a => a.name === argName);
+            if (argDef) {
+                return getDefaultConfigArgValue(argDef);
+            }
+        }
+        throw new Error(`Could not determine default value for "argName"`);
+    }
+    /**
+     * Removes a condition or action from the promotion.
+     */
+    removeOperation(key, operation) {
+        const operationsArray = this.formArrayOf(key);
+        const collection = key === 'conditions' ? this.conditions : this.actions;
+        const index = operationsArray.value.findIndex(o => o.code === operation.code);
+        if (index !== -1) {
+            operationsArray.removeAt(index);
+            collection.splice(index, 1);
+        }
+    }
+}
+PromotionDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PromotionDetailComponent, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }, { token: i2.ServerConfigService }, { token: i0.ChangeDetectorRef }, { token: i2.DataService }, { token: i3.FormBuilder }, { token: i2.NotificationService }], target: i0.ɵɵFactoryTarget.Component });
+PromotionDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: PromotionDetailComponent, selector: "vdr-promotion-detail", usesInheritance: true, ngImport: i0, template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <div class=\"flex clr-align-items-center\">\r\n            <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n            <clr-toggle-wrapper *vdrIfPermissions=\"'UpdatePromotion'\">\r\n                <input type=\"checkbox\" clrToggle name=\"enabled\" [formControl]=\"detailForm.get(['enabled'])\" />\r\n                <label>{{ 'common.enabled' | translate }}</label>\r\n            </clr-toggle-wrapper>\r\n        </div>\r\n    </vdr-ab-left>\r\n\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"promotion-detail\"></vdr-action-bar-items>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            *ngIf=\"isNew$ | async; else updateButton\"\r\n            (click)=\"create()\"\r\n            [disabled]=\"!saveButtonEnabled()\"\r\n        >\r\n            {{ 'common.create' | translate }}\r\n        </button>\r\n        <ng-template #updateButton>\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                (click)=\"save()\"\r\n                *vdrIfPermissions=\"'UpdatePromotion'\"\r\n                [disabled]=\"!saveButtonEnabled()\"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </ng-template>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n        <input\r\n            id=\"name\"\r\n            [readonly]=\"!('UpdatePromotion' | hasPermission)\"\r\n            type=\"text\"\r\n            formControlName=\"name\"\r\n        />\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'marketing.starts-at' | translate\" for=\"startsAt\">\r\n        <vdr-datetime-picker formControlName=\"startsAt\"></vdr-datetime-picker>\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'marketing.ends-at' | translate\" for=\"endsAt\">\r\n        <vdr-datetime-picker formControlName=\"endsAt\"></vdr-datetime-picker>\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'marketing.coupon-code' | translate\" for=\"couponCode\">\r\n        <input\r\n            id=\"couponCode\"\r\n            [readonly]=\"!('UpdatePromotion' | hasPermission)\"\r\n            type=\"text\"\r\n            formControlName=\"couponCode\"\r\n        />\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'marketing.per-customer-limit' | translate\" for=\"perCustomerUsageLimit\">\r\n        <input\r\n            id=\"perCustomerUsageLimit\"\r\n            [readonly]=\"!('UpdatePromotion' | hasPermission)\"\r\n            type=\"number\"\r\n            min=\"1\"\r\n            max=\"999\"\r\n            formControlName=\"perCustomerUsageLimit\"\r\n        />\r\n    </vdr-form-field>\r\n    <section formGroupName=\"customFields\" *ngIf=\"customFields.length\">\r\n        <label>{{ 'common.custom-fields' | translate }}</label>\r\n        <vdr-tabbed-custom-fields\r\n            entityName=\"Promotion\"\r\n            [customFields]=\"customFields\"\r\n            [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n            [readonly]=\"!('UpdatePromotion' | hasPermission)\"\r\n        ></vdr-tabbed-custom-fields>\r\n    </section>\r\n\r\n    <vdr-custom-detail-component-host\r\n        locationId=\"promotion-detail\"\r\n        [entity$]=\"entity$\"\r\n        [detailForm]=\"detailForm\"\r\n    ></vdr-custom-detail-component-host>\r\n\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col\" formArrayName=\"conditions\">\r\n            <label class=\"clr-control-label\">{{ 'marketing.conditions' | translate }}</label>\r\n            <ng-container *ngFor=\"let condition of conditions; index as i\">\r\n                <vdr-configurable-input\r\n                    (remove)=\"removeCondition($event)\"\r\n                    [readonly]=\"!('UpdatePromotion' | hasPermission)\"\r\n                    [operation]=\"condition\"\r\n                    [operationDefinition]=\"getConditionDefinition(condition)\"\r\n                    [formControlName]=\"i\"\r\n                ></vdr-configurable-input>\r\n            </ng-container>\r\n\r\n            <div>\r\n                <vdr-dropdown *vdrIfPermissions=\"'UpdatePromotion'\">\r\n                    <button class=\"btn btn-outline\" vdrDropdownTrigger>\r\n                        <clr-icon shape=\"plus\"></clr-icon>\r\n                        {{ 'marketing.add-condition' | translate }}\r\n                    </button>\r\n                    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n                        <button\r\n                            *ngFor=\"let condition of getAvailableConditions()\"\r\n                            type=\"button\"\r\n                            vdrDropdownItem\r\n                            (click)=\"addCondition(condition)\"\r\n                        >\r\n                            {{ condition.description }}\r\n                        </button>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </div>\r\n        </div>\r\n        <div class=\"clr-col\" formArrayName=\"actions\">\r\n            <label class=\"clr-control-label\">{{ 'marketing.actions' | translate }}</label>\r\n            <vdr-configurable-input\r\n                *ngFor=\"let action of actions; index as i\"\r\n                (remove)=\"removeAction($event)\"\r\n                [operation]=\"action\"\r\n                [readonly]=\"!('UpdatePromotion' | hasPermission)\"\r\n                [operationDefinition]=\"getActionDefinition(action)\"\r\n                [formControlName]=\"i\"\r\n            ></vdr-configurable-input>\r\n            <div>\r\n                <vdr-dropdown *vdrIfPermissions=\"'UpdatePromotion'\">\r\n                    <button class=\"btn btn-outline\" vdrDropdownTrigger>\r\n                        <clr-icon shape=\"plus\"></clr-icon>\r\n                        {{ 'marketing.add-action' | translate }}\r\n                    </button>\r\n                    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n                        <button\r\n                            *ngFor=\"let action of getAvailableActions()\"\r\n                            type=\"button\"\r\n                            vdrDropdownItem\r\n                            (click)=\"addAction(action)\"\r\n                        >\r\n                            {{ action.description }}\r\n                        </button>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</form>\r\n", styles: [""], components: [{ type: i2.ActionBarComponent, selector: "vdr-action-bar" }, { type: i2.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { type: i2.EntityInfoComponent, selector: "vdr-entity-info", inputs: ["small", "entity"] }, { type: i4.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { type: i2.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { type: i2.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { type: i2.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { type: i2.DatetimePickerComponent, selector: "vdr-datetime-picker", inputs: ["yearRange", "weekStartDay", "timeGranularityInterval", "min", "max", "readonly"] }, { type: i2.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { type: i2.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { type: i2.ConfigurableInputComponent, selector: "vdr-configurable-input", inputs: ["operation", "operationDefinition", "readonly", "removable"], outputs: ["remove"] }, { type: i2.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: i2.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }], directives: [{ type: i2.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { type: i2.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i4.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4.ClrLabel, selector: "label", inputs: ["for"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i4.ClrIconCustomTag, selector: "clr-icon" }, { type: i2.DropdownItemDirective, selector: "[vdrDropdownItem]" }], pipes: { "async": i5.AsyncPipe, "translate": i6.TranslatePipe, "hasPermission": i2.HasPermissionPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PromotionDetailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-promotion-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <div class=\"flex clr-align-items-center\">\r\n            <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n            <clr-toggle-wrapper *vdrIfPermissions=\"'UpdatePromotion'\">\r\n                <input type=\"checkbox\" clrToggle name=\"enabled\" [formControl]=\"detailForm.get(['enabled'])\" />\r\n                <label>{{ 'common.enabled' | translate }}</label>\r\n            </clr-toggle-wrapper>\r\n        </div>\r\n    </vdr-ab-left>\r\n\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"promotion-detail\"></vdr-action-bar-items>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            *ngIf=\"isNew$ | async; else updateButton\"\r\n            (click)=\"create()\"\r\n            [disabled]=\"!saveButtonEnabled()\"\r\n        >\r\n            {{ 'common.create' | translate }}\r\n        </button>\r\n        <ng-template #updateButton>\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                (click)=\"save()\"\r\n                *vdrIfPermissions=\"'UpdatePromotion'\"\r\n                [disabled]=\"!saveButtonEnabled()\"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </ng-template>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n        <input\r\n            id=\"name\"\r\n            [readonly]=\"!('UpdatePromotion' | hasPermission)\"\r\n            type=\"text\"\r\n            formControlName=\"name\"\r\n        />\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'marketing.starts-at' | translate\" for=\"startsAt\">\r\n        <vdr-datetime-picker formControlName=\"startsAt\"></vdr-datetime-picker>\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'marketing.ends-at' | translate\" for=\"endsAt\">\r\n        <vdr-datetime-picker formControlName=\"endsAt\"></vdr-datetime-picker>\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'marketing.coupon-code' | translate\" for=\"couponCode\">\r\n        <input\r\n            id=\"couponCode\"\r\n            [readonly]=\"!('UpdatePromotion' | hasPermission)\"\r\n            type=\"text\"\r\n            formControlName=\"couponCode\"\r\n        />\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'marketing.per-customer-limit' | translate\" for=\"perCustomerUsageLimit\">\r\n        <input\r\n            id=\"perCustomerUsageLimit\"\r\n            [readonly]=\"!('UpdatePromotion' | hasPermission)\"\r\n            type=\"number\"\r\n            min=\"1\"\r\n            max=\"999\"\r\n            formControlName=\"perCustomerUsageLimit\"\r\n        />\r\n    </vdr-form-field>\r\n    <section formGroupName=\"customFields\" *ngIf=\"customFields.length\">\r\n        <label>{{ 'common.custom-fields' | translate }}</label>\r\n        <vdr-tabbed-custom-fields\r\n            entityName=\"Promotion\"\r\n            [customFields]=\"customFields\"\r\n            [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n            [readonly]=\"!('UpdatePromotion' | hasPermission)\"\r\n        ></vdr-tabbed-custom-fields>\r\n    </section>\r\n\r\n    <vdr-custom-detail-component-host\r\n        locationId=\"promotion-detail\"\r\n        [entity$]=\"entity$\"\r\n        [detailForm]=\"detailForm\"\r\n    ></vdr-custom-detail-component-host>\r\n\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col\" formArrayName=\"conditions\">\r\n            <label class=\"clr-control-label\">{{ 'marketing.conditions' | translate }}</label>\r\n            <ng-container *ngFor=\"let condition of conditions; index as i\">\r\n                <vdr-configurable-input\r\n                    (remove)=\"removeCondition($event)\"\r\n                    [readonly]=\"!('UpdatePromotion' | hasPermission)\"\r\n                    [operation]=\"condition\"\r\n                    [operationDefinition]=\"getConditionDefinition(condition)\"\r\n                    [formControlName]=\"i\"\r\n                ></vdr-configurable-input>\r\n            </ng-container>\r\n\r\n            <div>\r\n                <vdr-dropdown *vdrIfPermissions=\"'UpdatePromotion'\">\r\n                    <button class=\"btn btn-outline\" vdrDropdownTrigger>\r\n                        <clr-icon shape=\"plus\"></clr-icon>\r\n                        {{ 'marketing.add-condition' | translate }}\r\n                    </button>\r\n                    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n                        <button\r\n                            *ngFor=\"let condition of getAvailableConditions()\"\r\n                            type=\"button\"\r\n                            vdrDropdownItem\r\n                            (click)=\"addCondition(condition)\"\r\n                        >\r\n                            {{ condition.description }}\r\n                        </button>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </div>\r\n        </div>\r\n        <div class=\"clr-col\" formArrayName=\"actions\">\r\n            <label class=\"clr-control-label\">{{ 'marketing.actions' | translate }}</label>\r\n            <vdr-configurable-input\r\n                *ngFor=\"let action of actions; index as i\"\r\n                (remove)=\"removeAction($event)\"\r\n                [operation]=\"action\"\r\n                [readonly]=\"!('UpdatePromotion' | hasPermission)\"\r\n                [operationDefinition]=\"getActionDefinition(action)\"\r\n                [formControlName]=\"i\"\r\n            ></vdr-configurable-input>\r\n            <div>\r\n                <vdr-dropdown *vdrIfPermissions=\"'UpdatePromotion'\">\r\n                    <button class=\"btn btn-outline\" vdrDropdownTrigger>\r\n                        <clr-icon shape=\"plus\"></clr-icon>\r\n                        {{ 'marketing.add-action' | translate }}\r\n                    </button>\r\n                    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n                        <button\r\n                            *ngFor=\"let action of getAvailableActions()\"\r\n                            type=\"button\"\r\n                            vdrDropdownItem\r\n                            (click)=\"addAction(action)\"\r\n                        >\r\n                            {{ action.description }}\r\n                        </button>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</form>\r\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i2.ServerConfigService }, { type: i0.ChangeDetectorRef }, { type: i2.DataService }, { type: i3.FormBuilder }, { type: i2.NotificationService }]; } });
+
+class PromotionListComponent extends BaseListComponent {
+    constructor(dataService, router, route, notificationService, modalService) {
+        super(router, route);
+        this.dataService = dataService;
+        this.notificationService = notificationService;
+        this.modalService = modalService;
+        this.searchForm = new FormGroup({
+            name: new FormControl(''),
+            couponCode: new FormControl(''),
+        });
+        super.setQueryFn((...args) => this.dataService.promotion.getPromotions(...args).refetchOnChannelChange(), data => data.promotions, (skip, take) => this.createQueryOptions(skip, take, this.searchForm.value));
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        merge(this.searchForm.valueChanges.pipe(debounceTime(250)), this.route.queryParamMap)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(val => {
+            if (!val.params) {
+                this.setPageNumber(1);
+            }
+            this.refresh();
+        });
+    }
+    deletePromotion(promotionId) {
+        this.modalService
+            .dialog({
+            title: marker('catalog.confirm-delete-promotion'),
+            buttons: [
+                { type: 'secondary', label: marker('common.cancel') },
+                { type: 'danger', label: marker('common.delete'), returnValue: true },
+            ],
+        })
+            .pipe(switchMap(response => response ? this.dataService.promotion.deletePromotion(promotionId) : EMPTY))
+            .subscribe(() => {
+            this.notificationService.success(marker('common.notify-delete-success'), {
+                entity: 'Promotion',
+            });
+            this.refresh();
+        }, err => {
+            this.notificationService.error(marker('common.notify-delete-error'), {
+                entity: 'Promotion',
+            });
+        });
+    }
+    createQueryOptions(skip, take, searchForm) {
+        const filter = {};
+        if (searchForm.couponCode) {
+            filter.couponCode = { contains: searchForm.couponCode };
+        }
+        if (searchForm.name) {
+            filter.name = { contains: searchForm.name };
+        }
+        return {
+            options: {
+                skip,
+                take,
+                filter,
+            },
+        };
+    }
+}
+PromotionListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PromotionListComponent, deps: [{ token: i2.DataService }, { token: i1.Router }, { token: i1.ActivatedRoute }, { token: i2.NotificationService }, { token: i2.ModalService }], target: i0.ɵɵFactoryTarget.Component });
+PromotionListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: PromotionListComponent, selector: "vdr-promotion-list", usesInheritance: true, ngImport: i0, template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <form class=\"search-form\" [formGroup]=\"searchForm\">\r\n            <input\r\n                type=\"text\"\r\n                formControlName=\"name\"\r\n                [placeholder]=\"'marketing.search-by-name' | translate\"\r\n                class=\"search-input\"\r\n            />\r\n            <input\r\n                type=\"text\"\r\n                formControlName=\"couponCode\"\r\n                [placeholder]=\"'marketing.search-by-coupon-code' | translate\"\r\n                class=\"search-input\"\r\n            />\r\n        </form>\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"promotion-list\"></vdr-action-bar-items>\r\n        <a class=\"btn btn-primary\"\r\n           *vdrIfPermissions=\"'CreatePromotion'\"\r\n           [routerLink]=\"['./create']\">\r\n            <clr-icon shape=\"plus\"></clr-icon>\r\n            {{ 'marketing.create-new-promotion' | translate }}\r\n        </a>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<vdr-data-table\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-dt-column>{{ 'common.name' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'marketing.coupon-code' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'marketing.starts-at' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'marketing.ends-at' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <ng-template let-promotion=\"item\">\r\n        <td class=\"left align-middle\">{{ promotion.name }}</td>\r\n        <td class=\"left align-middle\">\r\n            <vdr-chip *ngIf=\"promotion.couponCode\">\r\n                {{ promotion.couponCode }}\r\n            </vdr-chip>\r\n        </td>\r\n        <td class=\"left align-middle\">{{ promotion.startsAt | localeDate: 'longDate' }}</td>\r\n        <td class=\"left align-middle\">{{ promotion.endsAt | localeDate: 'longDate' }}</td>\r\n        <td class=\"align-middle\">\r\n            <vdr-chip *ngIf=\"!promotion.enabled\">{{ 'common.disabled' | translate }}</vdr-chip>\r\n        </td>\r\n        <td class=\"right align-middle\">\r\n            <vdr-table-row-action\r\n                iconShape=\"edit\"\r\n                [label]=\"'common.edit' | translate\"\r\n                [linkTo]=\"['./', promotion.id]\"\r\n            ></vdr-table-row-action>\r\n        </td>\r\n        <td class=\"right align-middle\">\r\n            <vdr-dropdown>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm\" vdrDropdownTrigger>\r\n                    {{ 'common.actions' | translate }}\r\n                    <clr-icon shape=\"caret down\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"delete-button\"\r\n                        (click)=\"deletePromotion(promotion.id)\"\r\n                        [disabled]=\"!('DeletePromotion' | hasPermission)\"\r\n                        vdrDropdownItem\r\n                    >\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </td>\r\n    </ng-template>\r\n</vdr-data-table>\r\n", styles: [".search-form{padding:0}.search-input{margin:6px 8px 0 0;min-width:200px}\n"], components: [{ type: i2.ActionBarComponent, selector: "vdr-action-bar" }, { type: i2.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { type: i2.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { type: i2.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { type: i2.DataTableComponent, selector: "vdr-data-table", inputs: ["items", "itemsPerPage", "currentPage", "totalItems", "allSelected", "isRowSelectedFn", "emptyStateLabel"], outputs: ["allSelectChange", "rowSelectChange", "pageChange", "itemsPerPageChange"] }, { type: i2.DataTableColumnComponent, selector: "vdr-dt-column", inputs: ["expand"] }, { type: i2.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { type: i2.TableRowActionComponent, selector: "vdr-table-row-action", inputs: ["linkTo", "label", "iconShape", "disabled"] }, { type: i2.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: i2.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }], directives: [{ type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i2.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { type: i1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i4.ClrIconCustomTag, selector: "clr-icon" }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i2.DropdownItemDirective, selector: "[vdrDropdownItem]" }], pipes: { "translate": i6.TranslatePipe, "async": i5.AsyncPipe, "localeDate": i2.LocaleDatePipe, "hasPermission": i2.HasPermissionPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PromotionListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-promotion-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <form class=\"search-form\" [formGroup]=\"searchForm\">\r\n            <input\r\n                type=\"text\"\r\n                formControlName=\"name\"\r\n                [placeholder]=\"'marketing.search-by-name' | translate\"\r\n                class=\"search-input\"\r\n            />\r\n            <input\r\n                type=\"text\"\r\n                formControlName=\"couponCode\"\r\n                [placeholder]=\"'marketing.search-by-coupon-code' | translate\"\r\n                class=\"search-input\"\r\n            />\r\n        </form>\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"promotion-list\"></vdr-action-bar-items>\r\n        <a class=\"btn btn-primary\"\r\n           *vdrIfPermissions=\"'CreatePromotion'\"\r\n           [routerLink]=\"['./create']\">\r\n            <clr-icon shape=\"plus\"></clr-icon>\r\n            {{ 'marketing.create-new-promotion' | translate }}\r\n        </a>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<vdr-data-table\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-dt-column>{{ 'common.name' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'marketing.coupon-code' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'marketing.starts-at' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'marketing.ends-at' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <ng-template let-promotion=\"item\">\r\n        <td class=\"left align-middle\">{{ promotion.name }}</td>\r\n        <td class=\"left align-middle\">\r\n            <vdr-chip *ngIf=\"promotion.couponCode\">\r\n                {{ promotion.couponCode }}\r\n            </vdr-chip>\r\n        </td>\r\n        <td class=\"left align-middle\">{{ promotion.startsAt | localeDate: 'longDate' }}</td>\r\n        <td class=\"left align-middle\">{{ promotion.endsAt | localeDate: 'longDate' }}</td>\r\n        <td class=\"align-middle\">\r\n            <vdr-chip *ngIf=\"!promotion.enabled\">{{ 'common.disabled' | translate }}</vdr-chip>\r\n        </td>\r\n        <td class=\"right align-middle\">\r\n            <vdr-table-row-action\r\n                iconShape=\"edit\"\r\n                [label]=\"'common.edit' | translate\"\r\n                [linkTo]=\"['./', promotion.id]\"\r\n            ></vdr-table-row-action>\r\n        </td>\r\n        <td class=\"right align-middle\">\r\n            <vdr-dropdown>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm\" vdrDropdownTrigger>\r\n                    {{ 'common.actions' | translate }}\r\n                    <clr-icon shape=\"caret down\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"delete-button\"\r\n                        (click)=\"deletePromotion(promotion.id)\"\r\n                        [disabled]=\"!('DeletePromotion' | hasPermission)\"\r\n                        vdrDropdownItem\r\n                    >\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </td>\r\n    </ng-template>\r\n</vdr-data-table>\r\n", styles: [".search-form{padding:0}.search-input{margin:6px 8px 0 0;min-width:200px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i2.DataService }, { type: i1.Router }, { type: i1.ActivatedRoute }, { type: i2.NotificationService }, { type: i2.ModalService }]; } });
+
+/**
+ * Resolves the id from the path into a Customer entity.
+ */
+class PromotionResolver extends BaseEntityResolver {
+    constructor(router, dataService) {
+        super(router, {
+            __typename: 'Promotion',
+            id: '',
+            createdAt: '',
+            updatedAt: '',
+            name: '',
+            enabled: false,
+            conditions: [],
+            actions: [],
+        }, id => dataService.promotion.getPromotion(id).mapStream(data => data.promotion));
+    }
+}
+PromotionResolver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PromotionResolver, deps: [{ token: i1.Router }, { token: i2.DataService }], target: i0.ɵɵFactoryTarget.Injectable });
+PromotionResolver.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PromotionResolver, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PromotionResolver, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i1.Router }, { type: i2.DataService }]; } });
+
+const marketingRoutes = [
+    {
+        path: 'promotions',
+        component: PromotionListComponent,
+        data: {
+            breadcrumb: marker('breadcrumb.promotions'),
+        },
+    },
+    {
+        path: 'promotions/:id',
+        component: PromotionDetailComponent,
+        resolve: createResolveData(PromotionResolver),
+        canDeactivate: [CanDeactivateDetailGuard],
+        data: {
+            breadcrumb: promotionBreadcrumb,
+        },
+    },
+];
+function promotionBreadcrumb(data, params) {
+    return detailBreadcrumb({
+        entity: data.entity,
+        id: params.id,
+        breadcrumbKey: 'breadcrumb.promotions',
+        getName: promotion => promotion.name,
+        route: 'promotions',
+    });
+}
+
+class MarketingModule {
+}
+MarketingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: MarketingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MarketingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: MarketingModule, declarations: [PromotionListComponent, PromotionDetailComponent], imports: [SharedModule, i1.RouterModule] });
+MarketingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: MarketingModule, imports: [[SharedModule, RouterModule.forChild(marketingRoutes)]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: MarketingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [SharedModule, RouterModule.forChild(marketingRoutes)],
+                    declarations: [PromotionListComponent, PromotionDetailComponent],
+                }]
+        }] });
+
+// This file was generated by the build-public-api.ts script
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MarketingModule, PromotionDetailComponent, PromotionListComponent, PromotionResolver, marketingRoutes, promotionBreadcrumb };
+//# sourceMappingURL=vendure-admin-ui-marketing.mjs.map