@vendure/admin-ui 3.2.0 → 3.2.1

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

@@ -31,11 +31,11 @@ class DashboardWidgetComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DashboardWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: DashboardWidgetComponent, isStandalone: false, selector: "vdr-dashboard-widget", inputs: { widgetConfig: "widgetConfig" }, viewQueries: [{ propertyName: "portal", first: true, predicate: ["portal"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<vdr-card [title]=\"widgetConfig.title ?? '' | translate\">\r\n    <ng-template vdrCardControls>\r\n        <ng-content></ng-content>\r\n    </ng-template>\r\n    <ng-template #portal></ng-template>\r\n</vdr-card>\r\n", styles: [":host{display:block}.card{margin-top:0;min-height:200px}.card-header{display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "directive", type: i1.CardControlsDirective, selector: "[vdrCardControls]" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: DashboardWidgetComponent, isStandalone: false, selector: "vdr-dashboard-widget", inputs: { widgetConfig: "widgetConfig" }, viewQueries: [{ propertyName: "portal", first: true, predicate: ["portal"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<vdr-card [title]=\"widgetConfig.title ?? '' | translate\">\n    <ng-template vdrCardControls>\n        <ng-content></ng-content>\n    </ng-template>\n    <ng-template #portal></ng-template>\n</vdr-card>\n", styles: [":host{display:block}.card{margin-top:0;min-height:200px}.card-header{display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "directive", type: i1.CardControlsDirective, selector: "[vdrCardControls]" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DashboardWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-dashboard-widget', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-card [title]=\"widgetConfig.title ?? '' | translate\">\r\n    <ng-template vdrCardControls>\r\n        <ng-content></ng-content>\r\n    </ng-template>\r\n    <ng-template #portal></ng-template>\r\n</vdr-card>\r\n", styles: [":host{display:block}.card{margin-top:0;min-height:200px}.card-header{display:flex;justify-content:space-between}\n"] }]
+            args: [{ selector: 'vdr-dashboard-widget', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-card [title]=\"widgetConfig.title ?? '' | translate\">\n    <ng-template vdrCardControls>\n        <ng-content></ng-content>\n    </ng-template>\n    <ng-template #portal></ng-template>\n</vdr-card>\n", styles: [":host{display:block}.card{margin-top:0;min-height:200px}.card-header{display:flex;justify-content:space-between}\n"] }]
         }], propDecorators: { widgetConfig: [{
                 type: Input
             }], portal: [{
@@ -149,11 +149,11 @@ class DashboardComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DashboardComponent, deps: [{ token: i1.DashboardWidgetService }, { token: i1.LocalStorageService }, { token: i0.ChangeDetectorRef }, { token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: DashboardComponent, isStandalone: false, selector: "vdr-dashboard", ngImport: i0, template: "<vdr-page-block>\r\n    <div class=\"widget-header mb-1\">\r\n        <vdr-dropdown>\r\n            <button class=\"btn btn-secondary btn-sm\" vdrDropdownTrigger>\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'dashboard.add-widget' | translate }}\r\n                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n            </button>\r\n            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                <button\r\n                    vdrDropdownItem\r\n                    *ngFor=\"let widget of availableWidgets$ | async\"\r\n                    (click)=\"addWidget(widget.id)\"\r\n                >\r\n                    {{ (widget.config.title ?? widget.id) | translate }}\r\n                </button>\r\n            </vdr-dropdown-menu>\r\n        </vdr-dropdown>\r\n    </div>\r\n    <div cdkDropListGroup>\r\n        <div\r\n            class=\"clr-row dashboard-row\"\r\n            *ngFor=\"let row of widgetLayout; index as rowIndex; trackBy: trackRow\"\r\n            cdkDropList\r\n            (cdkDropListDropped)=\"drop($event)\"\r\n            cdkDropListOrientation=\"horizontal\"\r\n            [cdkDropListData]=\"{ index: rowIndex }\"\r\n        >\r\n            <div\r\n                *ngFor=\"let widget of row; trackBy: trackRowItem\"\r\n                class=\"dashboard-item\"\r\n                [ngClass]=\"getClassForWidth(widget.width)\"\r\n                cdkDrag\r\n                [cdkDragData]=\"widget\"\r\n            >\r\n                <vdr-dashboard-widget\r\n                    *vdrIfPermissions=\"widget.config.requiresPermissions || null\"\r\n                    [widgetConfig]=\"widget.config\"\r\n                >\r\n                    <div class=\"flex\">\r\n                        <div class=\"drag-handle\" cdkDragHandle>\r\n                            <clr-icon shape=\"drag-handle\" size=\"24\"></clr-icon>\r\n                        </div>\r\n                        <vdr-dropdown>\r\n                            <button class=\"icon-button\" vdrDropdownTrigger>\r\n                                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                            </button>\r\n                            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                                <h4 class=\"dropdown-header\">{{ 'dashboard.widget-resize' | translate }}</h4>\r\n                                <button\r\n                                    vdrDropdownItem\r\n                                    [disabled]=\"width === widget.width\"\r\n                                    *ngFor=\"let width of getSupportedWidths(widget.config)\"\r\n                                    (click)=\"setWidgetWidth(widget, width)\"\r\n                                >\r\n                                    {{ 'dashboard.widget-width' | translate : { width: width } }}\r\n                                </button>\r\n                                <div class=\"dropdown-divider\" role=\"separator\"></div>\r\n                                <button vdrDropdownItem (click)=\"removeWidget(widget)\">\r\n                                    <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                                    {{ 'dashboard.remove-widget' | translate }}\r\n                                </button>\r\n                            </vdr-dropdown-menu>\r\n                        </vdr-dropdown>\r\n                    </div>\r\n                </vdr-dashboard-widget>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</vdr-page-block>\r\n", styles: [".widget-header{display:flex;justify-content:flex-end}.placeholder{color:var(--color-grey-300);text-align:center}.placeholder .version{font-size:3em;margin:24px;line-height:1em}.placeholder ::ng-deep .clr-i-outline{fill:var(--color-grey-200)}vdr-dashboard-widget{margin-bottom:24px}.drag-handle{cursor:move}.cdk-drag-preview{box-sizing:border-box;border-radius:4px}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.dashboard-row{padding:0;border-width:1;margin-bottom:6px;transition:padding .2s,margin .2s}.dashboard-row.cdk-drop-list-dragging,.dashboard-row.cdk-drop-list-receiving{border:2px dashed var(--color-component-border-200);border-radius:var(--border-radius);padding:6px}.dashboard-row.cdk-drop-list-dragging .dashboard-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i2$1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: DashboardWidgetComponent, selector: "vdr-dashboard-widget", inputs: ["widgetConfig"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: DashboardComponent, isStandalone: false, selector: "vdr-dashboard", ngImport: i0, template: "<vdr-page-block>\n    <div class=\"widget-header mb-1\">\n        <vdr-dropdown>\n            <button class=\"btn btn-secondary btn-sm\" vdrDropdownTrigger>\n                <clr-icon shape=\"plus\"></clr-icon>\n                {{ 'dashboard.add-widget' | translate }}\n                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\n            </button>\n            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\n                <button\n                    vdrDropdownItem\n                    *ngFor=\"let widget of availableWidgets$ | async\"\n                    (click)=\"addWidget(widget.id)\"\n                >\n                    {{ (widget.config.title ?? widget.id) | translate }}\n                </button>\n            </vdr-dropdown-menu>\n        </vdr-dropdown>\n    </div>\n    <div cdkDropListGroup>\n        <div\n            class=\"clr-row dashboard-row\"\n            *ngFor=\"let row of widgetLayout; index as rowIndex; trackBy: trackRow\"\n            cdkDropList\n            (cdkDropListDropped)=\"drop($event)\"\n            cdkDropListOrientation=\"horizontal\"\n            [cdkDropListData]=\"{ index: rowIndex }\"\n        >\n            <div\n                *ngFor=\"let widget of row; trackBy: trackRowItem\"\n                class=\"dashboard-item\"\n                [ngClass]=\"getClassForWidth(widget.width)\"\n                cdkDrag\n                [cdkDragData]=\"widget\"\n            >\n                <vdr-dashboard-widget\n                    *vdrIfPermissions=\"widget.config.requiresPermissions || null\"\n                    [widgetConfig]=\"widget.config\"\n                >\n                    <div class=\"flex\">\n                        <div class=\"drag-handle\" cdkDragHandle>\n                            <clr-icon shape=\"drag-handle\" size=\"24\"></clr-icon>\n                        </div>\n                        <vdr-dropdown>\n                            <button class=\"icon-button\" vdrDropdownTrigger>\n                                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\n                            </button>\n                            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\n                                <h4 class=\"dropdown-header\">{{ 'dashboard.widget-resize' | translate }}</h4>\n                                <button\n                                    vdrDropdownItem\n                                    [disabled]=\"width === widget.width\"\n                                    *ngFor=\"let width of getSupportedWidths(widget.config)\"\n                                    (click)=\"setWidgetWidth(widget, width)\"\n                                >\n                                    {{ 'dashboard.widget-width' | translate : { width: width } }}\n                                </button>\n                                <div class=\"dropdown-divider\" role=\"separator\"></div>\n                                <button vdrDropdownItem (click)=\"removeWidget(widget)\">\n                                    <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\n                                    {{ 'dashboard.remove-widget' | translate }}\n                                </button>\n                            </vdr-dropdown-menu>\n                        </vdr-dropdown>\n                    </div>\n                </vdr-dashboard-widget>\n            </div>\n        </div>\n    </div>\n</vdr-page-block>\n", styles: [".widget-header{display:flex;justify-content:flex-end}.placeholder{color:var(--color-grey-300);text-align:center}.placeholder .version{font-size:3em;margin:24px;line-height:1em}.placeholder ::ng-deep .clr-i-outline{fill:var(--color-grey-200)}vdr-dashboard-widget{margin-bottom:24px}.drag-handle{cursor:move}.cdk-drag-preview{box-sizing:border-box;border-radius:4px}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.dashboard-row{padding:0;border-width:1;margin-bottom:6px;transition:padding .2s,margin .2s}.dashboard-row.cdk-drop-list-dragging,.dashboard-row.cdk-drop-list-receiving{border:2px dashed var(--color-component-border-200);border-radius:var(--border-radius);padding:6px}.dashboard-row.cdk-drop-list-dragging .dashboard-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i2$1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: DashboardWidgetComponent, selector: "vdr-dashboard-widget", inputs: ["widgetConfig"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DashboardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-dashboard', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-page-block>\r\n    <div class=\"widget-header mb-1\">\r\n        <vdr-dropdown>\r\n            <button class=\"btn btn-secondary btn-sm\" vdrDropdownTrigger>\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'dashboard.add-widget' | translate }}\r\n                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n            </button>\r\n            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                <button\r\n                    vdrDropdownItem\r\n                    *ngFor=\"let widget of availableWidgets$ | async\"\r\n                    (click)=\"addWidget(widget.id)\"\r\n                >\r\n                    {{ (widget.config.title ?? widget.id) | translate }}\r\n                </button>\r\n            </vdr-dropdown-menu>\r\n        </vdr-dropdown>\r\n    </div>\r\n    <div cdkDropListGroup>\r\n        <div\r\n            class=\"clr-row dashboard-row\"\r\n            *ngFor=\"let row of widgetLayout; index as rowIndex; trackBy: trackRow\"\r\n            cdkDropList\r\n            (cdkDropListDropped)=\"drop($event)\"\r\n            cdkDropListOrientation=\"horizontal\"\r\n            [cdkDropListData]=\"{ index: rowIndex }\"\r\n        >\r\n            <div\r\n                *ngFor=\"let widget of row; trackBy: trackRowItem\"\r\n                class=\"dashboard-item\"\r\n                [ngClass]=\"getClassForWidth(widget.width)\"\r\n                cdkDrag\r\n                [cdkDragData]=\"widget\"\r\n            >\r\n                <vdr-dashboard-widget\r\n                    *vdrIfPermissions=\"widget.config.requiresPermissions || null\"\r\n                    [widgetConfig]=\"widget.config\"\r\n                >\r\n                    <div class=\"flex\">\r\n                        <div class=\"drag-handle\" cdkDragHandle>\r\n                            <clr-icon shape=\"drag-handle\" size=\"24\"></clr-icon>\r\n                        </div>\r\n                        <vdr-dropdown>\r\n                            <button class=\"icon-button\" vdrDropdownTrigger>\r\n                                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                            </button>\r\n                            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                                <h4 class=\"dropdown-header\">{{ 'dashboard.widget-resize' | translate }}</h4>\r\n                                <button\r\n                                    vdrDropdownItem\r\n                                    [disabled]=\"width === widget.width\"\r\n                                    *ngFor=\"let width of getSupportedWidths(widget.config)\"\r\n                                    (click)=\"setWidgetWidth(widget, width)\"\r\n                                >\r\n                                    {{ 'dashboard.widget-width' | translate : { width: width } }}\r\n                                </button>\r\n                                <div class=\"dropdown-divider\" role=\"separator\"></div>\r\n                                <button vdrDropdownItem (click)=\"removeWidget(widget)\">\r\n                                    <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                                    {{ 'dashboard.remove-widget' | translate }}\r\n                                </button>\r\n                            </vdr-dropdown-menu>\r\n                        </vdr-dropdown>\r\n                    </div>\r\n                </vdr-dashboard-widget>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</vdr-page-block>\r\n", styles: [".widget-header{display:flex;justify-content:flex-end}.placeholder{color:var(--color-grey-300);text-align:center}.placeholder .version{font-size:3em;margin:24px;line-height:1em}.placeholder ::ng-deep .clr-i-outline{fill:var(--color-grey-200)}vdr-dashboard-widget{margin-bottom:24px}.drag-handle{cursor:move}.cdk-drag-preview{box-sizing:border-box;border-radius:4px}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.dashboard-row{padding:0;border-width:1;margin-bottom:6px;transition:padding .2s,margin .2s}.dashboard-row.cdk-drop-list-dragging,.dashboard-row.cdk-drop-list-receiving{border:2px dashed var(--color-component-border-200);border-radius:var(--border-radius);padding:6px}.dashboard-row.cdk-drop-list-dragging .dashboard-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+            args: [{ selector: 'vdr-dashboard', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-page-block>\n    <div class=\"widget-header mb-1\">\n        <vdr-dropdown>\n            <button class=\"btn btn-secondary btn-sm\" vdrDropdownTrigger>\n                <clr-icon shape=\"plus\"></clr-icon>\n                {{ 'dashboard.add-widget' | translate }}\n                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\n            </button>\n            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\n                <button\n                    vdrDropdownItem\n                    *ngFor=\"let widget of availableWidgets$ | async\"\n                    (click)=\"addWidget(widget.id)\"\n                >\n                    {{ (widget.config.title ?? widget.id) | translate }}\n                </button>\n            </vdr-dropdown-menu>\n        </vdr-dropdown>\n    </div>\n    <div cdkDropListGroup>\n        <div\n            class=\"clr-row dashboard-row\"\n            *ngFor=\"let row of widgetLayout; index as rowIndex; trackBy: trackRow\"\n            cdkDropList\n            (cdkDropListDropped)=\"drop($event)\"\n            cdkDropListOrientation=\"horizontal\"\n            [cdkDropListData]=\"{ index: rowIndex }\"\n        >\n            <div\n                *ngFor=\"let widget of row; trackBy: trackRowItem\"\n                class=\"dashboard-item\"\n                [ngClass]=\"getClassForWidth(widget.width)\"\n                cdkDrag\n                [cdkDragData]=\"widget\"\n            >\n                <vdr-dashboard-widget\n                    *vdrIfPermissions=\"widget.config.requiresPermissions || null\"\n                    [widgetConfig]=\"widget.config\"\n                >\n                    <div class=\"flex\">\n                        <div class=\"drag-handle\" cdkDragHandle>\n                            <clr-icon shape=\"drag-handle\" size=\"24\"></clr-icon>\n                        </div>\n                        <vdr-dropdown>\n                            <button class=\"icon-button\" vdrDropdownTrigger>\n                                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\n                            </button>\n                            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\n                                <h4 class=\"dropdown-header\">{{ 'dashboard.widget-resize' | translate }}</h4>\n                                <button\n                                    vdrDropdownItem\n                                    [disabled]=\"width === widget.width\"\n                                    *ngFor=\"let width of getSupportedWidths(widget.config)\"\n                                    (click)=\"setWidgetWidth(widget, width)\"\n                                >\n                                    {{ 'dashboard.widget-width' | translate : { width: width } }}\n                                </button>\n                                <div class=\"dropdown-divider\" role=\"separator\"></div>\n                                <button vdrDropdownItem (click)=\"removeWidget(widget)\">\n                                    <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\n                                    {{ 'dashboard.remove-widget' | translate }}\n                                </button>\n                            </vdr-dropdown-menu>\n                        </vdr-dropdown>\n                    </div>\n                </vdr-dashboard-widget>\n            </div>\n        </div>\n    </div>\n</vdr-page-block>\n", styles: [".widget-header{display:flex;justify-content:flex-end}.placeholder{color:var(--color-grey-300);text-align:center}.placeholder .version{font-size:3em;margin:24px;line-height:1em}.placeholder ::ng-deep .clr-i-outline{fill:var(--color-grey-200)}vdr-dashboard-widget{margin-bottom:24px}.drag-handle{cursor:move}.cdk-drag-preview{box-sizing:border-box;border-radius:4px}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.dashboard-row{padding:0;border-width:1;margin-bottom:6px;transition:padding .2s,margin .2s}.dashboard-row.cdk-drop-list-dragging,.dashboard-row.cdk-drop-list-receiving{border:2px dashed var(--color-component-border-200);border-radius:var(--border-radius);padding:6px}.dashboard-row.cdk-drop-list-dragging .dashboard-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
         }], ctorParameters: () => [{ type: i1.DashboardWidgetService }, { type: i1.LocalStorageService }, { type: i0.ChangeDetectorRef }, { type: i1.DataService }] });
 
 const dashboardRoutes = [
@@ -164,28 +164,28 @@ const dashboardRoutes = [
     },
 ];
 
-const GET_LATEST_ORDERS = gql `
-    query GetLatestOrders($options: OrderListOptions) {
-        orders(options: $options) {
-            items {
-                id
-                createdAt
-                updatedAt
-                type
-                orderPlacedAt
-                code
-                state
-                total
-                totalWithTax
-                currencyCode
-                customer {
-                    id
-                    firstName
-                    lastName
-                }
-            }
-        }
-    }
+const GET_LATEST_ORDERS = gql `
+    query GetLatestOrders($options: OrderListOptions) {
+        orders(options: $options) {
+            items {
+                id
+                createdAt
+                updatedAt
+                type
+                orderPlacedAt
+                code
+                state
+                total
+                totalWithTax
+                currencyCode
+                customer {
+                    id
+                    firstName
+                    lastName
+                }
+            }
+        }
+    }
 `;
 class LatestOrdersWidgetComponent {
     constructor(dataService) {
@@ -209,11 +209,11 @@ class LatestOrdersWidgetComponent {
             .mapStream(data => data.orders.items);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: LatestOrdersWidgetComponent, deps: [{ token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: LatestOrdersWidgetComponent, isStandalone: false, selector: "vdr-latest-orders-widget", ngImport: i0, template: "<vdr-data-table-2 [items]=\"latestOrders$ | async\" id=\"latest-orders-widget-list\">\r\n    <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\">\r\n        <ng-template let-order=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['/orders/', order.id]\"\r\n                ><span>{{ order.code }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'order.state' | translate\" id=\"state\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-order=\"item\">\r\n            <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'customer.customer' | translate\" id=\"customer\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-order=\"item\">\r\n            <vdr-customer-label [customer]=\"order.customer\"></vdr-customer-label>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'order.total' | translate\" id=\"total\">\r\n        <ng-template let-order=\"item\">\r\n            {{ order.totalWithTax | localeCurrency : order.currencyCode }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'order.placed-at' | translate\" id=\"placed-at\">\r\n        <ng-template let-order=\"item\">\r\n            {{ order.orderPlacedAt | timeAgo }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n</vdr-data-table-2>\r\n", styles: ["vdr-data-table ::ng-deep table{margin-top:0}vdr-order-state-label{display:inline-block;margin-top:2px}\n"], dependencies: [{ kind: "directive", type: i2$1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.CustomerLabelComponent, selector: "vdr-customer-label", inputs: ["customer"] }, { kind: "component", type: i1.OrderStateLabelComponent, selector: "vdr-order-state-label", inputs: ["state"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex", "trackByPath"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.TimeAgoPipe, name: "timeAgo" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: LatestOrdersWidgetComponent, isStandalone: false, selector: "vdr-latest-orders-widget", ngImport: i0, template: "<vdr-data-table-2 [items]=\"latestOrders$ | async\" id=\"latest-orders-widget-list\">\n    <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\">\n        <ng-template let-order=\"item\">\n            <a class=\"button-ghost\" [routerLink]=\"['/orders/', order.id]\"\n                ><span>{{ order.code }}</span>\n                <clr-icon shape=\"arrow right\"></clr-icon>\n            </a>\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'order.state' | translate\" id=\"state\" [hiddenByDefault]=\"true\">\n        <ng-template let-order=\"item\">\n            <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'customer.customer' | translate\" id=\"customer\" [hiddenByDefault]=\"true\">\n        <ng-template let-order=\"item\">\n            <vdr-customer-label [customer]=\"order.customer\"></vdr-customer-label>\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'order.total' | translate\" id=\"total\">\n        <ng-template let-order=\"item\">\n            {{ order.totalWithTax | localeCurrency : order.currencyCode }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'order.placed-at' | translate\" id=\"placed-at\">\n        <ng-template let-order=\"item\">\n            {{ order.orderPlacedAt | timeAgo }}\n        </ng-template>\n    </vdr-dt2-column>\n</vdr-data-table-2>\n", styles: ["vdr-data-table ::ng-deep table{margin-top:0}vdr-order-state-label{display:inline-block;margin-top:2px}\n"], dependencies: [{ kind: "directive", type: i2$1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.CustomerLabelComponent, selector: "vdr-customer-label", inputs: ["customer"] }, { kind: "component", type: i1.OrderStateLabelComponent, selector: "vdr-order-state-label", inputs: ["state"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex", "trackByPath"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.TimeAgoPipe, name: "timeAgo" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: LatestOrdersWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-latest-orders-widget', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-data-table-2 [items]=\"latestOrders$ | async\" id=\"latest-orders-widget-list\">\r\n    <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\">\r\n        <ng-template let-order=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['/orders/', order.id]\"\r\n                ><span>{{ order.code }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'order.state' | translate\" id=\"state\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-order=\"item\">\r\n            <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'customer.customer' | translate\" id=\"customer\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-order=\"item\">\r\n            <vdr-customer-label [customer]=\"order.customer\"></vdr-customer-label>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'order.total' | translate\" id=\"total\">\r\n        <ng-template let-order=\"item\">\r\n            {{ order.totalWithTax | localeCurrency : order.currencyCode }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'order.placed-at' | translate\" id=\"placed-at\">\r\n        <ng-template let-order=\"item\">\r\n            {{ order.orderPlacedAt | timeAgo }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n</vdr-data-table-2>\r\n", styles: ["vdr-data-table ::ng-deep table{margin-top:0}vdr-order-state-label{display:inline-block;margin-top:2px}\n"] }]
+            args: [{ selector: 'vdr-latest-orders-widget', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-data-table-2 [items]=\"latestOrders$ | async\" id=\"latest-orders-widget-list\">\n    <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\">\n        <ng-template let-order=\"item\">\n            <a class=\"button-ghost\" [routerLink]=\"['/orders/', order.id]\"\n                ><span>{{ order.code }}</span>\n                <clr-icon shape=\"arrow right\"></clr-icon>\n            </a>\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'order.state' | translate\" id=\"state\" [hiddenByDefault]=\"true\">\n        <ng-template let-order=\"item\">\n            <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'customer.customer' | translate\" id=\"customer\" [hiddenByDefault]=\"true\">\n        <ng-template let-order=\"item\">\n            <vdr-customer-label [customer]=\"order.customer\"></vdr-customer-label>\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'order.total' | translate\" id=\"total\">\n        <ng-template let-order=\"item\">\n            {{ order.totalWithTax | localeCurrency : order.currencyCode }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'order.placed-at' | translate\" id=\"placed-at\">\n        <ng-template let-order=\"item\">\n            {{ order.orderPlacedAt | timeAgo }}\n        </ng-template>\n    </vdr-dt2-column>\n</vdr-data-table-2>\n", styles: ["vdr-data-table ::ng-deep table{margin-top:0}vdr-order-state-label{display:inline-block;margin-top:2px}\n"] }]
         }], ctorParameters: () => [{ type: i1.DataService }] });
 class LatestOrdersWidgetModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: LatestOrdersWidgetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -228,17 +228,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                 }]
         }] });
 
-const GET_ORDER_CHART_DATA = gql `
-    query GetOrderChartData($refresh: Boolean, $types: [MetricType!]!) {
-        metricSummary(input: { interval: Daily, types: $types, refresh: $refresh }) {
-            interval
-            type
-            entries {
-                label
-                value
-            }
-        }
-    }
+const GET_ORDER_CHART_DATA = gql `
+    query GetOrderChartData($refresh: Boolean, $types: [MetricType!]!) {
+        metricSummary(input: { interval: Daily, types: $types, refresh: $refresh }) {
+            interval
+            type
+            entries {
+                label
+                value
+            }
+        }
+    }
 `;
 class OrderChartWidgetComponent {
     constructor(dataService) {
@@ -277,24 +277,24 @@ class OrderChartWidgetComponent {
         this.refresh$.next(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: OrderChartWidgetComponent, deps: [{ token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: OrderChartWidgetComponent, isStandalone: false, selector: "vdr-order-chart-widget", ngImport: i0, template: "<vdr-chart [entries]=\"metrics$ | async\" />\r\n<div class=\"flex\" *ngIf=\"metricType$ | async as activeMetricType\">\r\n    <button\r\n        class=\"button-small\"\r\n        (click)=\"metricType$.next(MetricType.OrderTotal)\"\r\n        [class.active]=\"activeMetricType === MetricType.OrderTotal\"\r\n    >\r\n        {{ 'dashboard.metric-order-total-value' | translate }}\r\n    </button>\r\n    <button\r\n        class=\"ml-1 button-small\"\r\n        (click)=\"metricType$.next(MetricType.OrderCount)\"\r\n        [class.active]=\"activeMetricType === MetricType.OrderCount\"\r\n    >\r\n        {{ 'dashboard.metric-number-of-orders' | translate }}\r\n    </button>\r\n    <button\r\n        class=\"ml-1 button-small\"\r\n        (click)=\"metricType$.next(MetricType.AverageOrderValue)\"\r\n        [class.active]=\"activeMetricType === MetricType.AverageOrderValue\"\r\n    >\r\n        {{ 'dashboard.metric-average-order-value' | translate }}\r\n    </button>\r\n    <div class=\"flex-spacer\"></div>\r\n    <button class=\"button-small\" (click)=\"refresh()\">\r\n        <clr-icon shape=\"refresh\"></clr-icon>\r\n    </button>\r\n</div>\r\n", styles: [".button-small.active{background-color:var(--color-primary-200);color:var(--color-primary-900)}\n"], dependencies: [{ kind: "directive", type: i2$1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.ChartComponent, selector: "vdr-chart", inputs: ["entries", "options"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: OrderChartWidgetComponent, isStandalone: false, selector: "vdr-order-chart-widget", ngImport: i0, template: "<vdr-chart [entries]=\"metrics$ | async\" />\n<div class=\"flex\" *ngIf=\"metricType$ | async as activeMetricType\">\n    <button\n        class=\"button-small\"\n        (click)=\"metricType$.next(MetricType.OrderTotal)\"\n        [class.active]=\"activeMetricType === MetricType.OrderTotal\"\n    >\n        {{ 'dashboard.metric-order-total-value' | translate }}\n    </button>\n    <button\n        class=\"ml-1 button-small\"\n        (click)=\"metricType$.next(MetricType.OrderCount)\"\n        [class.active]=\"activeMetricType === MetricType.OrderCount\"\n    >\n        {{ 'dashboard.metric-number-of-orders' | translate }}\n    </button>\n    <button\n        class=\"ml-1 button-small\"\n        (click)=\"metricType$.next(MetricType.AverageOrderValue)\"\n        [class.active]=\"activeMetricType === MetricType.AverageOrderValue\"\n    >\n        {{ 'dashboard.metric-average-order-value' | translate }}\n    </button>\n    <div class=\"flex-spacer\"></div>\n    <button class=\"button-small\" (click)=\"refresh()\">\n        <clr-icon shape=\"refresh\"></clr-icon>\n    </button>\n</div>\n", styles: [".button-small.active{background-color:var(--color-primary-200);color:var(--color-primary-900)}\n"], dependencies: [{ kind: "directive", type: i2$1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.ChartComponent, selector: "vdr-chart", inputs: ["entries", "options"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: OrderChartWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-order-chart-widget', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-chart [entries]=\"metrics$ | async\" />\r\n<div class=\"flex\" *ngIf=\"metricType$ | async as activeMetricType\">\r\n    <button\r\n        class=\"button-small\"\r\n        (click)=\"metricType$.next(MetricType.OrderTotal)\"\r\n        [class.active]=\"activeMetricType === MetricType.OrderTotal\"\r\n    >\r\n        {{ 'dashboard.metric-order-total-value' | translate }}\r\n    </button>\r\n    <button\r\n        class=\"ml-1 button-small\"\r\n        (click)=\"metricType$.next(MetricType.OrderCount)\"\r\n        [class.active]=\"activeMetricType === MetricType.OrderCount\"\r\n    >\r\n        {{ 'dashboard.metric-number-of-orders' | translate }}\r\n    </button>\r\n    <button\r\n        class=\"ml-1 button-small\"\r\n        (click)=\"metricType$.next(MetricType.AverageOrderValue)\"\r\n        [class.active]=\"activeMetricType === MetricType.AverageOrderValue\"\r\n    >\r\n        {{ 'dashboard.metric-average-order-value' | translate }}\r\n    </button>\r\n    <div class=\"flex-spacer\"></div>\r\n    <button class=\"button-small\" (click)=\"refresh()\">\r\n        <clr-icon shape=\"refresh\"></clr-icon>\r\n    </button>\r\n</div>\r\n", styles: [".button-small.active{background-color:var(--color-primary-200);color:var(--color-primary-900)}\n"] }]
+            args: [{ selector: 'vdr-order-chart-widget', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-chart [entries]=\"metrics$ | async\" />\n<div class=\"flex\" *ngIf=\"metricType$ | async as activeMetricType\">\n    <button\n        class=\"button-small\"\n        (click)=\"metricType$.next(MetricType.OrderTotal)\"\n        [class.active]=\"activeMetricType === MetricType.OrderTotal\"\n    >\n        {{ 'dashboard.metric-order-total-value' | translate }}\n    </button>\n    <button\n        class=\"ml-1 button-small\"\n        (click)=\"metricType$.next(MetricType.OrderCount)\"\n        [class.active]=\"activeMetricType === MetricType.OrderCount\"\n    >\n        {{ 'dashboard.metric-number-of-orders' | translate }}\n    </button>\n    <button\n        class=\"ml-1 button-small\"\n        (click)=\"metricType$.next(MetricType.AverageOrderValue)\"\n        [class.active]=\"activeMetricType === MetricType.AverageOrderValue\"\n    >\n        {{ 'dashboard.metric-average-order-value' | translate }}\n    </button>\n    <div class=\"flex-spacer\"></div>\n    <button class=\"button-small\" (click)=\"refresh()\">\n        <clr-icon shape=\"refresh\"></clr-icon>\n    </button>\n</div>\n", styles: [".button-small.active{background-color:var(--color-primary-200);color:var(--color-primary-900)}\n"] }]
         }], ctorParameters: () => [{ type: i1.DataService }] });
 
-const GET_ORDER_SUMMARY = gql `
-    query GetOrderSummary($start: DateTime!, $end: DateTime!) {
-        orders(options: { filter: { orderPlacedAt: { between: { start: $start, end: $end } } } }) {
-            totalItems
-            items {
-                id
-                totalWithTax
-                currencyCode
-            }
-        }
-    }
+const GET_ORDER_SUMMARY = gql `
+    query GetOrderSummary($start: DateTime!, $end: DateTime!) {
+        orders(options: { filter: { orderPlacedAt: { between: { start: $start, end: $end } } } }) {
+            totalItems
+            items {
+                id
+                totalWithTax
+                currencyCode
+            }
+        }
+    }
 `;
 class OrderSummaryWidgetComponent {
     constructor(dataService) {
@@ -323,11 +323,11 @@ class OrderSummaryWidgetComponent {
             .mapStream(data => data.activeChannel.defaultCurrencyCode || undefined);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: OrderSummaryWidgetComponent, deps: [{ token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: OrderSummaryWidgetComponent, isStandalone: false, selector: "vdr-order-summary-widget", ngImport: i0, template: "<div class=\"stats\">\r\n    <div class=\"stat\">\r\n        <div class=\"stat-figure\">{{ totalOrderCount$ | async }}</div>\r\n        <div class=\"stat-label\">{{ 'dashboard.total-orders' | translate }}</div>\r\n    </div>\r\n    <div class=\"stat\">\r\n        <div class=\"stat-figure\">\r\n            {{ totalOrderValue$ | async | localeCurrency: (currencyCode$ | async) || undefined }}\r\n        </div>\r\n        <div class=\"stat-label\">{{ 'dashboard.total-order-value' | translate }}</div>\r\n    </div>\r\n</div>\r\n<div class=\"footer\">\r\n    <div class=\"flex\" *ngIf=\"selection$ | async as selection\">\r\n        <button class=\"button-small\" [class.active]=\"selection.date === today\" (click)=\"selection$.next({timeframe: 'day', date: today})\">\r\n            {{ 'dashboard.today' | translate }}\r\n        </button>\r\n        <button class=\"ml-1 button-small\" [class.active]=\"selection.date === yesterday\" (click)=\"selection$.next({timeframe: 'day', date: yesterday})\">\r\n            {{ 'dashboard.yesterday' | translate }}\r\n        </button>\r\n        <button class=\"ml-1 button-small\" [class.active]=\"selection.timeframe === 'week'\" (click)=\"selection$.next({timeframe: 'week'})\">\r\n            {{ 'dashboard.thisWeek' | translate }}\r\n        </button>\r\n        <button class=\"ml-1 button-small\" [class.active]=\"selection.timeframe === 'month'\" (click)=\"selection$.next({timeframe: 'month'})\">\r\n            {{ 'dashboard.thisMonth' | translate }}\r\n        </button>\r\n    </div>\r\n\r\n    <div class=\"date-range\" *ngIf=\"dateRange$ | async as range\">\r\n        {{ range.start | localeDate }} - {{ range.end | localeDate }}\r\n    </div>\r\n</div>\r\n", styles: [".stats{display:flex;justify-content:space-evenly}.stat{text-align:center}.stat-figure{font-size:2rem;line-height:3rem}.stat-label{text-transform:uppercase}.date-range{margin-top:calc(var(--space-unit) * 3);font-size:var(--font-size-xs)}.footer{margin-top:24px;display:flex;flex-direction:column;justify-content:space-between}.button-small.active{background-color:var(--color-primary-200);color:var(--color-primary-900)}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: OrderSummaryWidgetComponent, isStandalone: false, selector: "vdr-order-summary-widget", ngImport: i0, template: "<div class=\"stats\">\n    <div class=\"stat\">\n        <div class=\"stat-figure\">{{ totalOrderCount$ | async }}</div>\n        <div class=\"stat-label\">{{ 'dashboard.total-orders' | translate }}</div>\n    </div>\n    <div class=\"stat\">\n        <div class=\"stat-figure\">\n            {{ totalOrderValue$ | async | localeCurrency: (currencyCode$ | async) || undefined }}\n        </div>\n        <div class=\"stat-label\">{{ 'dashboard.total-order-value' | translate }}</div>\n    </div>\n</div>\n<div class=\"footer\">\n    <div class=\"flex\" *ngIf=\"selection$ | async as selection\">\n        <button class=\"button-small\" [class.active]=\"selection.date === today\" (click)=\"selection$.next({timeframe: 'day', date: today})\">\n            {{ 'dashboard.today' | translate }}\n        </button>\n        <button class=\"ml-1 button-small\" [class.active]=\"selection.date === yesterday\" (click)=\"selection$.next({timeframe: 'day', date: yesterday})\">\n            {{ 'dashboard.yesterday' | translate }}\n        </button>\n        <button class=\"ml-1 button-small\" [class.active]=\"selection.timeframe === 'week'\" (click)=\"selection$.next({timeframe: 'week'})\">\n            {{ 'dashboard.thisWeek' | translate }}\n        </button>\n        <button class=\"ml-1 button-small\" [class.active]=\"selection.timeframe === 'month'\" (click)=\"selection$.next({timeframe: 'month'})\">\n            {{ 'dashboard.thisMonth' | translate }}\n        </button>\n    </div>\n\n    <div class=\"date-range\" *ngIf=\"dateRange$ | async as range\">\n        {{ range.start | localeDate }} - {{ range.end | localeDate }}\n    </div>\n</div>\n", styles: [".stats{display:flex;justify-content:space-evenly}.stat{text-align:center}.stat-figure{font-size:2rem;line-height:3rem}.stat-label{text-transform:uppercase}.date-range{margin-top:calc(var(--space-unit) * 3);font-size:var(--font-size-xs)}.footer{margin-top:24px;display:flex;flex-direction:column;justify-content:space-between}.button-small.active{background-color:var(--color-primary-200);color:var(--color-primary-900)}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: OrderSummaryWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-order-summary-widget', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"stats\">\r\n    <div class=\"stat\">\r\n        <div class=\"stat-figure\">{{ totalOrderCount$ | async }}</div>\r\n        <div class=\"stat-label\">{{ 'dashboard.total-orders' | translate }}</div>\r\n    </div>\r\n    <div class=\"stat\">\r\n        <div class=\"stat-figure\">\r\n            {{ totalOrderValue$ | async | localeCurrency: (currencyCode$ | async) || undefined }}\r\n        </div>\r\n        <div class=\"stat-label\">{{ 'dashboard.total-order-value' | translate }}</div>\r\n    </div>\r\n</div>\r\n<div class=\"footer\">\r\n    <div class=\"flex\" *ngIf=\"selection$ | async as selection\">\r\n        <button class=\"button-small\" [class.active]=\"selection.date === today\" (click)=\"selection$.next({timeframe: 'day', date: today})\">\r\n            {{ 'dashboard.today' | translate }}\r\n        </button>\r\n        <button class=\"ml-1 button-small\" [class.active]=\"selection.date === yesterday\" (click)=\"selection$.next({timeframe: 'day', date: yesterday})\">\r\n            {{ 'dashboard.yesterday' | translate }}\r\n        </button>\r\n        <button class=\"ml-1 button-small\" [class.active]=\"selection.timeframe === 'week'\" (click)=\"selection$.next({timeframe: 'week'})\">\r\n            {{ 'dashboard.thisWeek' | translate }}\r\n        </button>\r\n        <button class=\"ml-1 button-small\" [class.active]=\"selection.timeframe === 'month'\" (click)=\"selection$.next({timeframe: 'month'})\">\r\n            {{ 'dashboard.thisMonth' | translate }}\r\n        </button>\r\n    </div>\r\n\r\n    <div class=\"date-range\" *ngIf=\"dateRange$ | async as range\">\r\n        {{ range.start | localeDate }} - {{ range.end | localeDate }}\r\n    </div>\r\n</div>\r\n", styles: [".stats{display:flex;justify-content:space-evenly}.stat{text-align:center}.stat-figure{font-size:2rem;line-height:3rem}.stat-label{text-transform:uppercase}.date-range{margin-top:calc(var(--space-unit) * 3);font-size:var(--font-size-xs)}.footer{margin-top:24px;display:flex;flex-direction:column;justify-content:space-between}.button-small.active{background-color:var(--color-primary-200);color:var(--color-primary-900)}\n"] }]
+            args: [{ selector: 'vdr-order-summary-widget', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"stats\">\n    <div class=\"stat\">\n        <div class=\"stat-figure\">{{ totalOrderCount$ | async }}</div>\n        <div class=\"stat-label\">{{ 'dashboard.total-orders' | translate }}</div>\n    </div>\n    <div class=\"stat\">\n        <div class=\"stat-figure\">\n            {{ totalOrderValue$ | async | localeCurrency: (currencyCode$ | async) || undefined }}\n        </div>\n        <div class=\"stat-label\">{{ 'dashboard.total-order-value' | translate }}</div>\n    </div>\n</div>\n<div class=\"footer\">\n    <div class=\"flex\" *ngIf=\"selection$ | async as selection\">\n        <button class=\"button-small\" [class.active]=\"selection.date === today\" (click)=\"selection$.next({timeframe: 'day', date: today})\">\n            {{ 'dashboard.today' | translate }}\n        </button>\n        <button class=\"ml-1 button-small\" [class.active]=\"selection.date === yesterday\" (click)=\"selection$.next({timeframe: 'day', date: yesterday})\">\n            {{ 'dashboard.yesterday' | translate }}\n        </button>\n        <button class=\"ml-1 button-small\" [class.active]=\"selection.timeframe === 'week'\" (click)=\"selection$.next({timeframe: 'week'})\">\n            {{ 'dashboard.thisWeek' | translate }}\n        </button>\n        <button class=\"ml-1 button-small\" [class.active]=\"selection.timeframe === 'month'\" (click)=\"selection$.next({timeframe: 'month'})\">\n            {{ 'dashboard.thisMonth' | translate }}\n        </button>\n    </div>\n\n    <div class=\"date-range\" *ngIf=\"dateRange$ | async as range\">\n        {{ range.start | localeDate }} - {{ range.end | localeDate }}\n    </div>\n</div>\n", styles: [".stats{display:flex;justify-content:space-evenly}.stat{text-align:center}.stat-figure{font-size:2rem;line-height:3rem}.stat-label{text-transform:uppercase}.date-range{margin-top:calc(var(--space-unit) * 3);font-size:var(--font-size-xs)}.footer{margin-top:24px;display:flex;flex-direction:column;justify-content:space-between}.button-small.active{background-color:var(--color-primary-200);color:var(--color-primary-900)}\n"] }]
         }], ctorParameters: () => [{ type: i1.DataService }] });
 class OrderSummaryWidgetModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: OrderSummaryWidgetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -393,11 +393,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
 
 class TestWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: TestWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: TestWidgetComponent, isStandalone: false, selector: "vdr-test-widget", ngImport: i0, template: "<p>This is a test widget!</p>\r\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: TestWidgetComponent, isStandalone: false, selector: "vdr-test-widget", ngImport: i0, template: "<p>This is a test widget!</p>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: TestWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-test-widget', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<p>This is a test widget!</p>\r\n" }]
+            args: [{ selector: 'vdr-test-widget', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<p>This is a test widget!</p>\n" }]
         }] });
 class TestWidgetModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: TestWidgetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -425,11 +425,11 @@ class WelcomeWidgetComponent {
             .mapStream(data => data.activeAdministrator || null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: WelcomeWidgetComponent, deps: [{ token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: WelcomeWidgetComponent, isStandalone: false, selector: "vdr-welcome-widget", ngImport: i0, template: "<div *ngIf=\"administrator$ | async as administrator\">\r\n    <h4 class=\"\">\r\n        Welcome, {{ administrator.firstName }} {{ administrator.lastName }}<br />\r\n        <small class=\"p5\">Last login: {{ administrator.user.lastLogin | timeAgo }}</small>\r\n    </h4>\r\n\r\n    <p class=\"p5\" *ngIf=\"!hideVendureBranding || !hideVersion\">\r\n        {{ hideVendureBranding ? '' : 'Vendure' }} {{ hideVersion ? '' : ('Admin UI v' + version) }}\r\n    </p>\r\n</div>\r\n<div class=\"placeholder\">\r\n    <clr-icon shape=\"line-chart\" size=\"128\"></clr-icon>\r\n</div>\r\n", styles: [":host{display:flex;justify-content:space-between}.placeholder{color:var(--color-grey-200)}\n"], dependencies: [{ kind: "directive", type: i2$1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TimeAgoPipe, name: "timeAgo" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: WelcomeWidgetComponent, isStandalone: false, selector: "vdr-welcome-widget", ngImport: i0, template: "<div *ngIf=\"administrator$ | async as administrator\">\n    <h4 class=\"\">\n        Welcome, {{ administrator.firstName }} {{ administrator.lastName }}<br />\n        <small class=\"p5\">Last login: {{ administrator.user.lastLogin | timeAgo }}</small>\n    </h4>\n\n    <p class=\"p5\" *ngIf=\"!hideVendureBranding || !hideVersion\">\n        {{ hideVendureBranding ? '' : 'Vendure' }} {{ hideVersion ? '' : ('Admin UI v' + version) }}\n    </p>\n</div>\n<div class=\"placeholder\">\n    <clr-icon shape=\"line-chart\" size=\"128\"></clr-icon>\n</div>\n", styles: [":host{display:flex;justify-content:space-between}.placeholder{color:var(--color-grey-200)}\n"], dependencies: [{ kind: "directive", type: i2$1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TimeAgoPipe, name: "timeAgo" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: WelcomeWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-welcome-widget', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div *ngIf=\"administrator$ | async as administrator\">\r\n    <h4 class=\"\">\r\n        Welcome, {{ administrator.firstName }} {{ administrator.lastName }}<br />\r\n        <small class=\"p5\">Last login: {{ administrator.user.lastLogin | timeAgo }}</small>\r\n    </h4>\r\n\r\n    <p class=\"p5\" *ngIf=\"!hideVendureBranding || !hideVersion\">\r\n        {{ hideVendureBranding ? '' : 'Vendure' }} {{ hideVersion ? '' : ('Admin UI v' + version) }}\r\n    </p>\r\n</div>\r\n<div class=\"placeholder\">\r\n    <clr-icon shape=\"line-chart\" size=\"128\"></clr-icon>\r\n</div>\r\n", styles: [":host{display:flex;justify-content:space-between}.placeholder{color:var(--color-grey-200)}\n"] }]
+            args: [{ selector: 'vdr-welcome-widget', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div *ngIf=\"administrator$ | async as administrator\">\n    <h4 class=\"\">\n        Welcome, {{ administrator.firstName }} {{ administrator.lastName }}<br />\n        <small class=\"p5\">Last login: {{ administrator.user.lastLogin | timeAgo }}</small>\n    </h4>\n\n    <p class=\"p5\" *ngIf=\"!hideVendureBranding || !hideVersion\">\n        {{ hideVendureBranding ? '' : 'Vendure' }} {{ hideVersion ? '' : ('Admin UI v' + version) }}\n    </p>\n</div>\n<div class=\"placeholder\">\n    <clr-icon shape=\"line-chart\" size=\"128\"></clr-icon>\n</div>\n", styles: [":host{display:flex;justify-content:space-between}.placeholder{color:var(--color-grey-200)}\n"] }]
         }], ctorParameters: () => [{ type: i1.DataService }] });
 class WelcomeWidgetModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: WelcomeWidgetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }