npm - @vendure/admin-ui - Versions diffs - 2.1.0-next.0 → 2.1.0-next.1 - Mend

@vendure/admin-ui 2.1.0-next.0 → 2.1.0-next.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (402) hide show

package/esm2022/core/common/version.mjs CHANGED Viewed

@@ -1,3 +1,3 @@
 // Auto-generated by the set-version.js script.
-export const ADMIN_UI_VERSION = '2.1.0-next.0';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmVyc2lvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9saWIvY29yZS9zcmMvY29tbW9uL3ZlcnNpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsK0NBQStDO0FBQy9DLE1BQU0sQ0FBQyxNQUFNLGdCQUFnQixHQUFHLGNBQWMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8vIEF1dG8tZ2VuZXJhdGVkIGJ5IHRoZSBzZXQtdmVyc2lvbi5qcyBzY3JpcHQuXG5leHBvcnQgY29uc3QgQURNSU5fVUlfVkVSU0lPTiA9ICcyLjEuMC1uZXh0LjAnO1xuIl19
+export const ADMIN_UI_VERSION = '2.1.0-next.1';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmVyc2lvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9saWIvY29yZS9zcmMvY29tbW9uL3ZlcnNpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsK0NBQStDO0FBQy9DLE1BQU0sQ0FBQyxNQUFNLGdCQUFnQixHQUFHLGNBQWMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8vIEF1dG8tZ2VuZXJhdGVkIGJ5IHRoZSBzZXQtdmVyc2lvbi5qcyBzY3JpcHQuXG5leHBvcnQgY29uc3QgQURNSU5fVUlfVkVSU0lPTiA9ICcyLjEuMC1uZXh0LjEnO1xuIl19

package/esm2022/core/components/alerts/alerts.component.mjs CHANGED Viewed

@@ -16,10 +16,10 @@ export class AlertsComponent {
         this.hasAlerts$ = alertsService.activeAlerts$.pipe(map(alerts => alerts.filter(a => !a.hasRun).length > 0));
         this.activeAlerts$ = alertsService.activeAlerts$;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: AlertsComponent, deps: [{ token: i1.AlertsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: AlertsComponent, selector: "vdr-alerts", ngImport: i0, template: "<vdr-dropdown>\r\n    <button class=\"alerts-button\" vdrDropdownTrigger>\r\n        <vdr-status-badge *ngIf=\"hasAlerts$ | async\" [type]=\"'warning'\"></vdr-status-badge>\r\n        <div class=\"user-circle\">\r\n            <clr-icon shape=\"bell\" size=\"16\"></clr-icon>\r\n        </div>\r\n    </button>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n        <ng-container *ngIf=\"activeAlerts$ | async as activeAlerts\">\r\n            <ng-container *ngIf=\"activeAlerts.length; else noAlerts\">\r\n                <button *ngFor=\"let alert of activeAlerts\" vdrDropdownItem (click)=\"alert.runAction()\" [disabled]=\"alert.hasRun\">\r\n                    <clr-icon shape=\"check is-success\" *ngIf=\"alert.hasRun\"></clr-icon>\r\n                    {{ alert.label.text | translate : alert.label.translationVars }}\r\n                </button>\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-template #noAlerts>\r\n            <div class=\"no-alerts\">\r\n                <clr-icon shape=\"check\" class=\"mr-1\" /><span>{{ 'common.no-alerts' | translate }}</span>\r\n            </div></ng-template\r\n        >\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [".alerts-button{position:relative;display:flex;align-items:center;justify-content:space-between;border:none;font-size:var(--font-size-sm);width:100%;line-height:100%;height:40px;color:var(--color-text-100);background-color:var(--color-page-header-item-bg);border-radius:var(--border-radius-lg);cursor:pointer;padding:calc(var(--space-unit) * 1.5)}.alerts-button:hover{color:var(--color-text-200)}vdr-status-badge{position:absolute;top:9px;right:9px}.no-alerts{display:flex;align-items:center;justify-content:center;height:100%;width:100%;color:var(--color-text-300);font-size:var(--font-size-sm);padding:0 calc(var(--space-unit) * 1.5)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "component", type: i4.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i5.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i6.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i7.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: i8.StatusBadgeComponent, selector: "vdr-status-badge", inputs: ["type"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AlertsComponent, deps: [{ token: i1.AlertsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: AlertsComponent, selector: "vdr-alerts", ngImport: i0, template: "<vdr-dropdown>\r\n    <button class=\"alerts-button\" vdrDropdownTrigger>\r\n        <vdr-status-badge *ngIf=\"hasAlerts$ | async\" [type]=\"'warning'\"></vdr-status-badge>\r\n        <div class=\"user-circle\">\r\n            <clr-icon shape=\"bell\" size=\"16\"></clr-icon>\r\n        </div>\r\n    </button>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n        <ng-container *ngIf=\"activeAlerts$ | async as activeAlerts\">\r\n            <ng-container *ngIf=\"activeAlerts.length; else noAlerts\">\r\n                <button *ngFor=\"let alert of activeAlerts\" vdrDropdownItem (click)=\"alert.runAction()\" [disabled]=\"alert.hasRun\">\r\n                    <clr-icon shape=\"check is-success\" *ngIf=\"alert.hasRun\"></clr-icon>\r\n                    {{ alert.label.text | translate : alert.label.translationVars }}\r\n                </button>\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-template #noAlerts>\r\n            <div class=\"no-alerts\">\r\n                <clr-icon shape=\"check\" class=\"mr-1\" /><span>{{ 'common.no-alerts' | translate }}</span>\r\n            </div></ng-template\r\n        >\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [".alerts-button{position:relative;display:flex;align-items:center;justify-content:space-between;border:none;font-size:var(--font-size-sm);width:100%;line-height:100%;height:40px;color:var(--color-text-100);background-color:var(--color-page-header-item-bg);border-radius:var(--border-radius-lg);cursor:pointer;padding:calc(var(--space-unit) * 1.5)}.alerts-button:hover{color:var(--color-text-200)}vdr-status-badge{position:absolute;top:9px;right:9px}.no-alerts{display:flex;align-items:center;justify-content:center;height:100%;width:100%;color:var(--color-text-300);font-size:var(--font-size-sm);padding:0 calc(var(--space-unit) * 1.5)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "component", type: i4.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i5.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i6.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i7.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: i8.StatusBadgeComponent, selector: "vdr-status-badge", inputs: ["type"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: AlertsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AlertsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-alerts', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-dropdown>\r\n    <button class=\"alerts-button\" vdrDropdownTrigger>\r\n        <vdr-status-badge *ngIf=\"hasAlerts$ | async\" [type]=\"'warning'\"></vdr-status-badge>\r\n        <div class=\"user-circle\">\r\n            <clr-icon shape=\"bell\" size=\"16\"></clr-icon>\r\n        </div>\r\n    </button>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n        <ng-container *ngIf=\"activeAlerts$ | async as activeAlerts\">\r\n            <ng-container *ngIf=\"activeAlerts.length; else noAlerts\">\r\n                <button *ngFor=\"let alert of activeAlerts\" vdrDropdownItem (click)=\"alert.runAction()\" [disabled]=\"alert.hasRun\">\r\n                    <clr-icon shape=\"check is-success\" *ngIf=\"alert.hasRun\"></clr-icon>\r\n                    {{ alert.label.text | translate : alert.label.translationVars }}\r\n                </button>\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-template #noAlerts>\r\n            <div class=\"no-alerts\">\r\n                <clr-icon shape=\"check\" class=\"mr-1\" /><span>{{ 'common.no-alerts' | translate }}</span>\r\n            </div></ng-template\r\n        >\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [".alerts-button{position:relative;display:flex;align-items:center;justify-content:space-between;border:none;font-size:var(--font-size-sm);width:100%;line-height:100%;height:40px;color:var(--color-text-100);background-color:var(--color-page-header-item-bg);border-radius:var(--border-radius-lg);cursor:pointer;padding:calc(var(--space-unit) * 1.5)}.alerts-button:hover{color:var(--color-text-200)}vdr-status-badge{position:absolute;top:9px;right:9px}.no-alerts{display:flex;align-items:center;justify-content:center;height:100%;width:100%;color:var(--color-text-300);font-size:var(--font-size-sm);padding:0 calc(var(--space-unit) * 1.5)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.AlertsService }]; } });

package/esm2022/core/components/app-shell/app-shell.component.mjs CHANGED Viewed

@@ -82,10 +82,10 @@ export class AppShellComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: AppShellComponent, deps: [{ token: i1.AuthService }, { token: i2.DataService }, { token: i3.Router }, { token: i4.I18nService }, { token: i5.ModalService }, { token: i6.LocalStorageService }, { token: i7.BreadcrumbService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: AppShellComponent, selector: "vdr-app-shell", ngImport: i0, template: "<div class=\"app-container\" [dir]=\"direction$ | async\">\r\n    <div class=\"left-nav\" [class.expanded]=\"mainNavExpanded$ | async\">\r\n        <div class=\"branding\">\r\n            <a [routerLink]=\"['/']\" *ngIf=\"!hideVendureBranding\"><img src=\"assets/logo-top.webp\" class=\"logo\" style=\"max-width: 100px\" /></a>\r\n            <div class=\"collapse-menu\">\r\n                <button class=\"\" (click)=\"collapseNav()\">\r\n                    <clr-icon shape=\"window-close\" size=\"24\"></clr-icon>\r\n                </button>\r\n            </div>\r\n        </div>\r\n        <div class=\"mx-4\">\r\n            <vdr-channel-switcher *vdrIfMultichannel></vdr-channel-switcher>\r\n        </div>\r\n        <div class=\"main-nav-container\">\r\n            <vdr-main-nav (itemClick)=\"collapseNav()\"></vdr-main-nav>\r\n        </div>\r\n        <div class=\"settings-nav-container\">\r\n            <hr />\r\n            <vdr-main-nav displayMode=\"settings\" (itemClick)=\"collapseNav()\"></vdr-main-nav>\r\n        </div>\r\n        <div class=\"mx-2\"></div>\r\n    </div>\r\n\r\n    <div class=\"surface\">\r\n        <div class=\"content-container\">\r\n            <div class=\"top-bar\">\r\n                <div class=\"expand-menu mr-1\">\r\n                    <button class=\"\" (click)=\"expandNav()\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"bars\">\r\n                          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5\" />\r\n                        </svg>\r\n                    </button>\r\n                </div>\r\n                <div>\r\n                    <vdr-breadcrumb></vdr-breadcrumb>\r\n                </div>\r\n                <div class=\"universal-search flex-spacer\"></div>\r\n                <div class=\"mx-1\">\r\n                    <vdr-alerts></vdr-alerts>\r\n                </div>\r\n                <div>\r\n                    <vdr-user-menu\r\n                        [userName]=\"userName$ | async\"\r\n                        [uiLanguageAndLocale]=\"uiLanguageAndLocale$ | async\"\r\n                        [availableLanguages]=\"availableLanguages\"\r\n                        (selectUiLanguage)=\"selectUiLanguage()\"\r\n                        (logOut)=\"logOut()\"\r\n                    ></vdr-user-menu>\r\n                </div>\r\n            </div>\r\n            <div class=\"content-area\"><router-outlet></router-outlet></div>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".app-container{display:flex;height:100vh;overflow:hidden}.left-nav{background-color:var(--color-left-nav-bg);color:var(--color-left-nav-text);display:flex;flex-direction:column;overflow:hidden;height:100%;border-inline-end:1px solid var(--color-weight-150);z-index:2;width:var(--left-nav-width);max-width:var(--left-nav-width)}@media screen and (max-width: 992px){.left-nav.expanded{position:fixed;inset:0;width:100%;max-width:100%;animation:fade-in .2s ease-in-out forwards}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@media screen and (min-width: 992px){.expand-menu,.collapse-menu{display:none}}.expand-menu button,.collapse-menu button{border:none;padding:calc(var(--space-unit) * 1) calc(var(--space-unit) * 2);background-color:var(--color-page-header-item-bg);border-radius:var(--border-radius-lg);color:var(--color-text-100);display:flex;align-items:center;justify-content:center}.expand-menu .bars,.collapse-menu .bars{width:24px;height:24px}.collapse-menu button{height:40px;background-color:var(--color-weight-200)}.main-nav-container{overflow:auto;flex:1}.settings-nav-container{margin:calc(var(--space-unit) * 3) 0}.settings-nav-container hr{margin:0 calc(var(--space-unit) * 4);margin-bottom:calc(var(--space-unit) * 4);border:1px solid var(--color-weight-150);box-shadow:0 1px 0 var(--color-weight-100)}.logo{max-width:100%}.wordmark{font-weight:700;margin-inline-start:12px;font-size:24px;color:var(--color-primary-500)}@media screen and (max-width: 992px){.wordmark{display:none}}.surface{display:flex;flex-direction:column;flex:1;background-color:var(--color-surface-bg)}.content-container{overflow:auto;min-height:100vh;display:flex;flex-direction:column}.branding{display:flex;align-items:center;justify-content:space-between;min-width:0;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 4);padding-inline-end:calc(var(--space-unit) * 1.5)}@media screen and (min-width: 992px){.branding{padding:calc(var(--space-unit) * 4)}}.top-bar{width:100%;display:flex;align-items:center;justify-content:space-between;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 1);background-color:var(--color-page-header)}@media screen and (min-width: 992px){.top-bar{padding:calc(var(--space-unit) * 4);padding-inline-start:var(--surface-margin-left)}}.header-actions{align-items:center}.content-area{position:relative;margin-inline-end:auto;flex:1;display:block;width:100%}\n"], dependencies: [{ kind: "directive", type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i9.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i10.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i11.IfMultichannelDirective, selector: "[vdrIfMultichannel]", inputs: ["vdrIfMultichannelElse"] }, { kind: "component", type: i12.UserMenuComponent, selector: "vdr-user-menu", inputs: ["userName", "availableLanguages", "uiLanguageAndLocale"], outputs: ["logOut", "selectUiLanguage"] }, { kind: "component", type: i13.MainNavComponent, selector: "vdr-main-nav", inputs: ["displayMode"], outputs: ["itemClick"] }, { kind: "component", type: i14.BreadcrumbComponent, selector: "vdr-breadcrumb" }, { kind: "component", type: i15.ChannelSwitcherComponent, selector: "vdr-channel-switcher" }, { kind: "component", type: i16.AlertsComponent, selector: "vdr-alerts" }, { kind: "pipe", type: i8.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AppShellComponent, deps: [{ token: i1.AuthService }, { token: i2.DataService }, { token: i3.Router }, { token: i4.I18nService }, { token: i5.ModalService }, { token: i6.LocalStorageService }, { token: i7.BreadcrumbService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: AppShellComponent, selector: "vdr-app-shell", ngImport: i0, template: "<div class=\"app-container\" [dir]=\"direction$ | async\">\r\n    <div class=\"left-nav\" [class.expanded]=\"mainNavExpanded$ | async\">\r\n        <div class=\"branding\">\r\n            <a [routerLink]=\"['/']\" *ngIf=\"!hideVendureBranding\"><img src=\"assets/logo-top.webp\" class=\"logo\" style=\"max-width: 100px\" /></a>\r\n            <div class=\"collapse-menu\">\r\n                <button class=\"\" (click)=\"collapseNav()\">\r\n                    <clr-icon shape=\"window-close\" size=\"24\"></clr-icon>\r\n                </button>\r\n            </div>\r\n        </div>\r\n        <div class=\"mx-4\">\r\n            <vdr-channel-switcher *vdrIfMultichannel></vdr-channel-switcher>\r\n        </div>\r\n        <div class=\"main-nav-container\">\r\n            <vdr-main-nav (itemClick)=\"collapseNav()\"></vdr-main-nav>\r\n        </div>\r\n        <div class=\"settings-nav-container\">\r\n            <hr />\r\n            <vdr-main-nav displayMode=\"settings\" (itemClick)=\"collapseNav()\"></vdr-main-nav>\r\n        </div>\r\n        <div class=\"mx-2\"></div>\r\n    </div>\r\n\r\n    <div class=\"surface\">\r\n        <div class=\"content-container\">\r\n            <div class=\"top-bar\">\r\n                <div class=\"expand-menu mr-1\">\r\n                    <button class=\"\" (click)=\"expandNav()\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"bars\">\r\n                          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5\" />\r\n                        </svg>\r\n                    </button>\r\n                </div>\r\n                <div>\r\n                    <vdr-breadcrumb></vdr-breadcrumb>\r\n                </div>\r\n                <div class=\"universal-search flex-spacer\"></div>\r\n                <div class=\"mx-1\">\r\n                    <vdr-alerts></vdr-alerts>\r\n                </div>\r\n                <div>\r\n                    <vdr-user-menu\r\n                        [userName]=\"userName$ | async\"\r\n                        [uiLanguageAndLocale]=\"uiLanguageAndLocale$ | async\"\r\n                        [availableLanguages]=\"availableLanguages\"\r\n                        (selectUiLanguage)=\"selectUiLanguage()\"\r\n                        (logOut)=\"logOut()\"\r\n                    ></vdr-user-menu>\r\n                </div>\r\n            </div>\r\n            <div class=\"content-area\"><router-outlet></router-outlet></div>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".app-container{display:flex;height:100vh;overflow:hidden}.left-nav{background-color:var(--color-left-nav-bg);color:var(--color-left-nav-text);display:flex;flex-direction:column;overflow:hidden;height:100%;border-inline-end:1px solid var(--color-weight-150);z-index:2;width:var(--left-nav-width);max-width:var(--left-nav-width)}@media screen and (max-width: 992px){.left-nav.expanded{position:fixed;inset:0;width:100%;max-width:100%;animation:fade-in .2s ease-in-out forwards}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@media screen and (min-width: 992px){.expand-menu,.collapse-menu{display:none}}.expand-menu button,.collapse-menu button{border:none;padding:calc(var(--space-unit) * 1) calc(var(--space-unit) * 2);background-color:var(--color-page-header-item-bg);border-radius:var(--border-radius-lg);color:var(--color-text-100);display:flex;align-items:center;justify-content:center}.expand-menu .bars,.collapse-menu .bars{width:24px;height:24px}.collapse-menu button{height:40px;background-color:var(--color-weight-200)}.main-nav-container{overflow:auto;flex:1}.settings-nav-container{margin:calc(var(--space-unit) * 3) 0}.settings-nav-container hr{margin:0 calc(var(--space-unit) * 4);margin-bottom:calc(var(--space-unit) * 4);border:1px solid var(--color-weight-150);box-shadow:0 1px 0 var(--color-weight-100)}.logo{max-width:100%}.wordmark{font-weight:700;margin-inline-start:12px;font-size:24px;color:var(--color-primary-500)}@media screen and (max-width: 992px){.wordmark{display:none}}.surface{display:flex;flex-direction:column;flex:1;background-color:var(--color-surface-bg)}.content-container{overflow:auto;min-height:100vh;display:flex;flex-direction:column}.branding{display:flex;align-items:center;justify-content:space-between;min-width:0;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 4);padding-inline-end:calc(var(--space-unit) * 1.5)}@media screen and (min-width: 992px){.branding{padding:calc(var(--space-unit) * 4)}}.top-bar{width:100%;display:flex;align-items:center;justify-content:space-between;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 1);background-color:var(--color-page-header)}@media screen and (min-width: 992px){.top-bar{padding:calc(var(--space-unit) * 4);padding-inline-start:var(--surface-margin-left)}}.header-actions{align-items:center}.content-area{position:relative;margin-inline-end:auto;flex:1;display:block;width:100%}\n"], dependencies: [{ kind: "directive", type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i9.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i10.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i11.IfMultichannelDirective, selector: "[vdrIfMultichannel]", inputs: ["vdrIfMultichannelElse"] }, { kind: "component", type: i12.UserMenuComponent, selector: "vdr-user-menu", inputs: ["userName", "availableLanguages", "uiLanguageAndLocale"], outputs: ["logOut", "selectUiLanguage"] }, { kind: "component", type: i13.MainNavComponent, selector: "vdr-main-nav", inputs: ["displayMode"], outputs: ["itemClick"] }, { kind: "component", type: i14.BreadcrumbComponent, selector: "vdr-breadcrumb" }, { kind: "component", type: i15.ChannelSwitcherComponent, selector: "vdr-channel-switcher" }, { kind: "component", type: i16.AlertsComponent, selector: "vdr-alerts" }, { kind: "pipe", type: i8.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: AppShellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AppShellComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-app-shell', template: "<div class=\"app-container\" [dir]=\"direction$ | async\">\r\n    <div class=\"left-nav\" [class.expanded]=\"mainNavExpanded$ | async\">\r\n        <div class=\"branding\">\r\n            <a [routerLink]=\"['/']\" *ngIf=\"!hideVendureBranding\"><img src=\"assets/logo-top.webp\" class=\"logo\" style=\"max-width: 100px\" /></a>\r\n            <div class=\"collapse-menu\">\r\n                <button class=\"\" (click)=\"collapseNav()\">\r\n                    <clr-icon shape=\"window-close\" size=\"24\"></clr-icon>\r\n                </button>\r\n            </div>\r\n        </div>\r\n        <div class=\"mx-4\">\r\n            <vdr-channel-switcher *vdrIfMultichannel></vdr-channel-switcher>\r\n        </div>\r\n        <div class=\"main-nav-container\">\r\n            <vdr-main-nav (itemClick)=\"collapseNav()\"></vdr-main-nav>\r\n        </div>\r\n        <div class=\"settings-nav-container\">\r\n            <hr />\r\n            <vdr-main-nav displayMode=\"settings\" (itemClick)=\"collapseNav()\"></vdr-main-nav>\r\n        </div>\r\n        <div class=\"mx-2\"></div>\r\n    </div>\r\n\r\n    <div class=\"surface\">\r\n        <div class=\"content-container\">\r\n            <div class=\"top-bar\">\r\n                <div class=\"expand-menu mr-1\">\r\n                    <button class=\"\" (click)=\"expandNav()\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"bars\">\r\n                          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5\" />\r\n                        </svg>\r\n                    </button>\r\n                </div>\r\n                <div>\r\n                    <vdr-breadcrumb></vdr-breadcrumb>\r\n                </div>\r\n                <div class=\"universal-search flex-spacer\"></div>\r\n                <div class=\"mx-1\">\r\n                    <vdr-alerts></vdr-alerts>\r\n                </div>\r\n                <div>\r\n                    <vdr-user-menu\r\n                        [userName]=\"userName$ | async\"\r\n                        [uiLanguageAndLocale]=\"uiLanguageAndLocale$ | async\"\r\n                        [availableLanguages]=\"availableLanguages\"\r\n                        (selectUiLanguage)=\"selectUiLanguage()\"\r\n                        (logOut)=\"logOut()\"\r\n                    ></vdr-user-menu>\r\n                </div>\r\n            </div>\r\n            <div class=\"content-area\"><router-outlet></router-outlet></div>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".app-container{display:flex;height:100vh;overflow:hidden}.left-nav{background-color:var(--color-left-nav-bg);color:var(--color-left-nav-text);display:flex;flex-direction:column;overflow:hidden;height:100%;border-inline-end:1px solid var(--color-weight-150);z-index:2;width:var(--left-nav-width);max-width:var(--left-nav-width)}@media screen and (max-width: 992px){.left-nav.expanded{position:fixed;inset:0;width:100%;max-width:100%;animation:fade-in .2s ease-in-out forwards}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@media screen and (min-width: 992px){.expand-menu,.collapse-menu{display:none}}.expand-menu button,.collapse-menu button{border:none;padding:calc(var(--space-unit) * 1) calc(var(--space-unit) * 2);background-color:var(--color-page-header-item-bg);border-radius:var(--border-radius-lg);color:var(--color-text-100);display:flex;align-items:center;justify-content:center}.expand-menu .bars,.collapse-menu .bars{width:24px;height:24px}.collapse-menu button{height:40px;background-color:var(--color-weight-200)}.main-nav-container{overflow:auto;flex:1}.settings-nav-container{margin:calc(var(--space-unit) * 3) 0}.settings-nav-container hr{margin:0 calc(var(--space-unit) * 4);margin-bottom:calc(var(--space-unit) * 4);border:1px solid var(--color-weight-150);box-shadow:0 1px 0 var(--color-weight-100)}.logo{max-width:100%}.wordmark{font-weight:700;margin-inline-start:12px;font-size:24px;color:var(--color-primary-500)}@media screen and (max-width: 992px){.wordmark{display:none}}.surface{display:flex;flex-direction:column;flex:1;background-color:var(--color-surface-bg)}.content-container{overflow:auto;min-height:100vh;display:flex;flex-direction:column}.branding{display:flex;align-items:center;justify-content:space-between;min-width:0;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 4);padding-inline-end:calc(var(--space-unit) * 1.5)}@media screen and (min-width: 992px){.branding{padding:calc(var(--space-unit) * 4)}}.top-bar{width:100%;display:flex;align-items:center;justify-content:space-between;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 1);background-color:var(--color-page-header)}@media screen and (min-width: 992px){.top-bar{padding:calc(var(--space-unit) * 4);padding-inline-start:var(--surface-margin-left)}}.header-actions{align-items:center}.content-area{position:relative;margin-inline-end:auto;flex:1;display:block;width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.AuthService }, { type: i2.DataService }, { type: i3.Router }, { type: i4.I18nService }, { type: i5.ModalService }, { type: i6.LocalStorageService }, { type: i7.BreadcrumbService }]; } });

package/esm2022/core/components/base-nav/base-nav.component.mjs CHANGED Viewed

@@ -266,10 +266,10 @@ export class BaseNavComponent {
             },
         ]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: BaseNavComponent, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }, { token: i2.NavBuilderService }, { token: i3.HealthCheckService }, { token: i4.JobQueueService }, { token: i5.DataService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.3", type: BaseNavComponent, selector: "[vdrBaseNav]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: BaseNavComponent, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }, { token: i2.NavBuilderService }, { token: i3.HealthCheckService }, { token: i4.JobQueueService }, { token: i5.DataService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.2", type: BaseNavComponent, selector: "[vdrBaseNav]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: BaseNavComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: BaseNavComponent, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vdrBaseNav]',

package/esm2022/core/components/breadcrumb/breadcrumb.component.mjs CHANGED Viewed

@@ -23,10 +23,10 @@ export class BreadcrumbComponent {
         this.breadcrumbs$ = this.breadcrumbService.breadcrumbs$;
         this.parentBreadcrumb$ = this.breadcrumbService.breadcrumbs$.pipe(map(breadcrumbs => (1 < breadcrumbs.length ? breadcrumbs[breadcrumbs.length - 2] : undefined)));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: i1.BreadcrumbService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: BreadcrumbComponent, selector: "vdr-breadcrumb", ngImport: i0, template: "<nav role=\"navigation\">\r\n    <ul class=\"breadcrumbs\">\r\n        <li *ngFor=\"let breadcrumb of breadcrumbs$ | async; let isLast = last\" [title]=\"breadcrumb.label\">\r\n            <a [routerLink]=\"breadcrumb.link\" *ngIf=\"!isLast\">{{ breadcrumb.label | translate }}</a>\r\n            <ng-container *ngIf=\"!isLast\"\r\n                ><clr-icon shape=\"caret right\" class=\"color-weight-400 mx-1\"></clr-icon\r\n            ></ng-container>\r\n            <ng-container *ngIf=\"isLast\">{{ breadcrumb.label | translate }}</ng-container>\r\n        </li>\r\n    </ul>\r\n    <ul class=\"breadcrumbs mobile\" *ngIf=\"parentBreadcrumb$ | async as parentBreadcrumb\">\r\n        <li>\r\n            <clr-icon shape=\"caret left\" class=\"color-weight-400 mr-1\"></clr-icon>\r\n            <a [routerLink]=\"parentBreadcrumb.link\">{{ parentBreadcrumb.label | translate }}</a>\r\n        </li>\r\n    </ul>\r\n</nav>\r\n", styles: [":host{display:block;padding:0;position:relative}.breadcrumbs{list-style-type:none;display:flex;flex-wrap:wrap;align-items:center;overflow-x:auto;max-width:100vw;line-height:100%;min-height:40px;padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2.5);font-size:var(--font-size-sm);background-color:var(--color-page-header-item-bg);border-radius:var(--border-radius-lg)}.breadcrumbs li{display:inline-block;white-space:nowrap;max-width:300px;overflow:hidden;text-overflow:ellipsis}.breadcrumbs li a:link,.breadcrumbs li a:visited{color:var(--color-weight-700)}.breadcrumbs li:last-child{font-weight:600}@media screen and (max-width: 992px){.breadcrumbs:not(.mobile){display:none}}@media screen and (min-width: 992px){.breadcrumbs.mobile{display:none}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: i1.BreadcrumbService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: BreadcrumbComponent, selector: "vdr-breadcrumb", ngImport: i0, template: "<nav role=\"navigation\">\r\n    <ul class=\"breadcrumbs\">\r\n        <li *ngFor=\"let breadcrumb of breadcrumbs$ | async; let isLast = last\" [title]=\"breadcrumb.label\">\r\n            <a [routerLink]=\"breadcrumb.link\" *ngIf=\"!isLast\">{{ breadcrumb.label | translate }}</a>\r\n            <ng-container *ngIf=\"!isLast\"\r\n                ><clr-icon shape=\"caret right\" class=\"color-weight-400 mx-1\"></clr-icon\r\n            ></ng-container>\r\n            <ng-container *ngIf=\"isLast\">{{ breadcrumb.label | translate }}</ng-container>\r\n        </li>\r\n    </ul>\r\n    <ul class=\"breadcrumbs mobile\" *ngIf=\"parentBreadcrumb$ | async as parentBreadcrumb\">\r\n        <li>\r\n            <clr-icon shape=\"caret left\" class=\"color-weight-400 mr-1\"></clr-icon>\r\n            <a [routerLink]=\"parentBreadcrumb.link\">{{ parentBreadcrumb.label | translate }}</a>\r\n        </li>\r\n    </ul>\r\n</nav>\r\n", styles: [":host{display:block;padding:0;position:relative}.breadcrumbs{list-style-type:none;display:flex;flex-wrap:wrap;align-items:center;overflow-x:auto;max-width:100vw;line-height:100%;min-height:40px;padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2.5);font-size:var(--font-size-sm);background-color:var(--color-page-header-item-bg);border-radius:var(--border-radius-lg)}.breadcrumbs li{display:inline-block;white-space:nowrap;max-width:300px;overflow:hidden;text-overflow:ellipsis}.breadcrumbs li a:link,.breadcrumbs li a:visited{color:var(--color-weight-700)}.breadcrumbs li:last-child{font-weight:600}@media screen and (max-width: 992px){.breadcrumbs:not(.mobile){display:none}}@media screen and (min-width: 992px){.breadcrumbs.mobile{display:none}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: BreadcrumbComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: BreadcrumbComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-breadcrumb', template: "<nav role=\"navigation\">\r\n    <ul class=\"breadcrumbs\">\r\n        <li *ngFor=\"let breadcrumb of breadcrumbs$ | async; let isLast = last\" [title]=\"breadcrumb.label\">\r\n            <a [routerLink]=\"breadcrumb.link\" *ngIf=\"!isLast\">{{ breadcrumb.label | translate }}</a>\r\n            <ng-container *ngIf=\"!isLast\"\r\n                ><clr-icon shape=\"caret right\" class=\"color-weight-400 mx-1\"></clr-icon\r\n            ></ng-container>\r\n            <ng-container *ngIf=\"isLast\">{{ breadcrumb.label | translate }}</ng-container>\r\n        </li>\r\n    </ul>\r\n    <ul class=\"breadcrumbs mobile\" *ngIf=\"parentBreadcrumb$ | async as parentBreadcrumb\">\r\n        <li>\r\n            <clr-icon shape=\"caret left\" class=\"color-weight-400 mr-1\"></clr-icon>\r\n            <a [routerLink]=\"parentBreadcrumb.link\">{{ parentBreadcrumb.label | translate }}</a>\r\n        </li>\r\n    </ul>\r\n</nav>\r\n", styles: [":host{display:block;padding:0;position:relative}.breadcrumbs{list-style-type:none;display:flex;flex-wrap:wrap;align-items:center;overflow-x:auto;max-width:100vw;line-height:100%;min-height:40px;padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2.5);font-size:var(--font-size-sm);background-color:var(--color-page-header-item-bg);border-radius:var(--border-radius-lg)}.breadcrumbs li{display:inline-block;white-space:nowrap;max-width:300px;overflow:hidden;text-overflow:ellipsis}.breadcrumbs li a:link,.breadcrumbs li a:visited{color:var(--color-weight-700)}.breadcrumbs li:last-child{font-weight:600}@media screen and (max-width: 992px){.breadcrumbs:not(.mobile){display:none}}@media screen and (min-width: 992px){.breadcrumbs.mobile{display:none}}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.BreadcrumbService }]; } });

package/esm2022/core/components/channel-switcher/channel-switcher.component.mjs CHANGED Viewed

@@ -40,10 +40,10 @@ export class ChannelSwitcherComponent {
     setActiveChannel(channelId) {
         this.channelService.setActiveChannel(channelId).subscribe(() => this.filterControl.patchValue(''));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: ChannelSwitcherComponent, deps: [{ token: i1.DataService }, { token: i2.ChannelService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: ChannelSwitcherComponent, selector: "vdr-channel-switcher", ngImport: i0, template: "<ng-container>\r\n    <vdr-dropdown>\r\n        <button class=\"active-channel m-auto\" vdrDropdownTrigger>\r\n            <vdr-channel-badge [channelCode]=\"activeChannelCode$ | async\"></vdr-channel-badge>\r\n            <span class=\"channel-label\">{{\r\n                activeChannelCode$ | async | channelCodeToLabel | translate\r\n            }}</span>\r\n            <span class=\"trigger\"><clr-icon shape=\"ellipsis-vertical\"></clr-icon></span>\r\n        </button>\r\n        <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n            <input\r\n                *ngIf=\"((channelCount$ | async) || 0) >= displayFilterThreshold\"\r\n                [formControl]=\"filterControl\"\r\n                type=\"text\"\r\n                class=\"ml2 mr2\"\r\n                [placeholder]=\"'common.filter' | translate\"\r\n            />\r\n            <button\r\n                *ngFor=\"let channel of channels$ | async\"\r\n                type=\"button\"\r\n                vdrDropdownItem\r\n                (click)=\"setActiveChannel(channel.id)\"\r\n            >\r\n                <vdr-channel-badge [channelCode]=\"channel.code\"></vdr-channel-badge>\r\n                {{ channel.code | channelCodeToLabel | translate }}\r\n            </button>\r\n        </vdr-dropdown-menu>\r\n    </vdr-dropdown>\r\n</ng-container>\r\n", styles: [":host{display:block;align-items:center;height:2.5rem}.active-channel{display:flex;justify-content:space-between;align-items:center;font-size:var(--font-size-xs);color:var(--color-left-nav-text);background-color:var(--color-channel-switcher-bg);border:none;cursor:pointer;width:100%;border-radius:var(--border-radius-lg);padding:var(--space-unit) calc(var(--space-unit) * 2);transition:background-color .1s,color .1s}.active-channel:hover{background-color:var(--color-channel-switcher-hover-bg);color:var(--color-left-nav-text-hover)}.active-channel clr-icon{color:var(--color-left-nav-text)}.channel-label{margin:0 3px;overflow:hidden;flex:1;white-space:nowrap;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i7.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i8.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i9.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i10.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: i11.ChannelBadgeComponent, selector: "vdr-channel-badge", inputs: ["channelCode"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i12.TranslatePipe, name: "translate" }, { kind: "pipe", type: i13.ChannelLabelPipe, name: "channelCodeToLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ChannelSwitcherComponent, deps: [{ token: i1.DataService }, { token: i2.ChannelService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ChannelSwitcherComponent, selector: "vdr-channel-switcher", ngImport: i0, template: "<ng-container>\r\n    <vdr-dropdown>\r\n        <button class=\"active-channel m-auto\" vdrDropdownTrigger>\r\n            <vdr-channel-badge [channelCode]=\"activeChannelCode$ | async\"></vdr-channel-badge>\r\n            <span class=\"channel-label\">{{\r\n                activeChannelCode$ | async | channelCodeToLabel | translate\r\n            }}</span>\r\n            <span class=\"trigger\"><clr-icon shape=\"ellipsis-vertical\"></clr-icon></span>\r\n        </button>\r\n        <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n            <input\r\n                *ngIf=\"((channelCount$ | async) || 0) >= displayFilterThreshold\"\r\n                [formControl]=\"filterControl\"\r\n                type=\"text\"\r\n                class=\"ml2 mr2\"\r\n                [placeholder]=\"'common.filter' | translate\"\r\n            />\r\n            <button\r\n                *ngFor=\"let channel of channels$ | async\"\r\n                type=\"button\"\r\n                vdrDropdownItem\r\n                (click)=\"setActiveChannel(channel.id)\"\r\n            >\r\n                <vdr-channel-badge [channelCode]=\"channel.code\"></vdr-channel-badge>\r\n                {{ channel.code | channelCodeToLabel | translate }}\r\n            </button>\r\n        </vdr-dropdown-menu>\r\n    </vdr-dropdown>\r\n</ng-container>\r\n", styles: [":host{display:block;align-items:center;height:2.5rem}.active-channel{display:flex;justify-content:space-between;align-items:center;font-size:var(--font-size-xs);color:var(--color-left-nav-text);background-color:var(--color-channel-switcher-bg);border:none;cursor:pointer;width:100%;border-radius:var(--border-radius-lg);padding:var(--space-unit) calc(var(--space-unit) * 2);transition:background-color .1s,color .1s}.active-channel:hover{background-color:var(--color-channel-switcher-hover-bg);color:var(--color-left-nav-text-hover)}.active-channel clr-icon{color:var(--color-left-nav-text)}.channel-label{margin:0 3px;overflow:hidden;flex:1;white-space:nowrap;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i7.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i8.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i9.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i10.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: i11.ChannelBadgeComponent, selector: "vdr-channel-badge", inputs: ["channelCode"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i12.TranslatePipe, name: "translate" }, { kind: "pipe", type: i13.ChannelLabelPipe, name: "channelCodeToLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: ChannelSwitcherComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ChannelSwitcherComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-channel-switcher', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\r\n    <vdr-dropdown>\r\n        <button class=\"active-channel m-auto\" vdrDropdownTrigger>\r\n            <vdr-channel-badge [channelCode]=\"activeChannelCode$ | async\"></vdr-channel-badge>\r\n            <span class=\"channel-label\">{{\r\n                activeChannelCode$ | async | channelCodeToLabel | translate\r\n            }}</span>\r\n            <span class=\"trigger\"><clr-icon shape=\"ellipsis-vertical\"></clr-icon></span>\r\n        </button>\r\n        <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n            <input\r\n                *ngIf=\"((channelCount$ | async) || 0) >= displayFilterThreshold\"\r\n                [formControl]=\"filterControl\"\r\n                type=\"text\"\r\n                class=\"ml2 mr2\"\r\n                [placeholder]=\"'common.filter' | translate\"\r\n            />\r\n            <button\r\n                *ngFor=\"let channel of channels$ | async\"\r\n                type=\"button\"\r\n                vdrDropdownItem\r\n                (click)=\"setActiveChannel(channel.id)\"\r\n            >\r\n                <vdr-channel-badge [channelCode]=\"channel.code\"></vdr-channel-badge>\r\n                {{ channel.code | channelCodeToLabel | translate }}\r\n            </button>\r\n        </vdr-dropdown-menu>\r\n    </vdr-dropdown>\r\n</ng-container>\r\n", styles: [":host{display:block;align-items:center;height:2.5rem}.active-channel{display:flex;justify-content:space-between;align-items:center;font-size:var(--font-size-xs);color:var(--color-left-nav-text);background-color:var(--color-channel-switcher-bg);border:none;cursor:pointer;width:100%;border-radius:var(--border-radius-lg);padding:var(--space-unit) calc(var(--space-unit) * 2);transition:background-color .1s,color .1s}.active-channel:hover{background-color:var(--color-channel-switcher-hover-bg);color:var(--color-left-nav-text-hover)}.active-channel clr-icon{color:var(--color-left-nav-text)}.channel-label{margin:0 3px;overflow:hidden;flex:1;white-space:nowrap;text-overflow:ellipsis}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.DataService }, { type: i2.ChannelService }]; } });

package/esm2022/core/components/main-nav/main-nav.component.mjs CHANGED Viewed

@@ -48,10 +48,10 @@ export class MainNavComponent extends BaseNavComponent {
         item.onClick?.(event);
         this.itemClick.emit(item);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: MainNavComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: MainNavComponent, selector: "vdr-main-nav", inputs: { displayMode: "displayMode" }, outputs: { itemClick: "itemClick" }, usesInheritance: true, ngImport: i0, template: "<nav class=\"main-nav\">\r\n    <section class=\"\">\r\n        <ng-container *ngFor=\"let section of mainMenuConfig$ | async\">\r\n            <section\r\n                class=\"nav-group\"\r\n                [attr.data-section-id]=\"section.id\"\r\n                [class.collapsible]=\"section.collapsible\"\r\n                [class.collapsed]=\"section.collapsible && !expandedSections.includes(section.id)\"\r\n                routerLinkActive=\"active\"\r\n                (isActiveChange)=\"setExpanded(section, $event)\"\r\n                *ngIf=\"shouldDisplayLink(section)\"\r\n            >\r\n                <vdr-ui-extension-point\r\n                    [locationId]=\"section.id\"\r\n                    api=\"navMenu\"\r\n                    [topPx]=\"-6\"\r\n                    [leftPx]=\"8\"\r\n                    display=\"block\"\r\n                >\r\n                    <div class=\"section-header\">\r\n                        <ng-container\r\n                            *ngIf=\"navBuilderService.sectionBadges[section.id] | async as sectionBadge\"\r\n                        >\r\n                            <vdr-status-badge\r\n                                *ngIf=\"sectionBadge !== 'none'\"\r\n                                [type]=\"sectionBadge\"\r\n                            ></vdr-status-badge>\r\n                        </ng-container>\r\n                        <label class=\"nav-group-header mx-4\" [for]=\"section.id\">{{\r\n                            section.label | translate\r\n                        }}</label>\r\n                        <button *ngIf=\"section.collapsible\" class=\"button-small bg-weight-150\" (click)=\"toggleExpand(section)\">\r\n                            <clr-icon\r\n                                [attr.shape]=\"expandedSections.includes(section.id) ? 'caret up' : 'caret down'\"\r\n                                size=\"12\"\r\n                                [title]=\"'common.expand-entries' | translate\"\r\n                            ></clr-icon>\r\n                        </button>\r\n                    </div>\r\n                    <div class=\"nav-list\" [ngStyle]=\"getStyleForSection(section)\">\r\n                        <ng-container *ngFor=\"let item of section.items\">\r\n                            <div\r\n                                *ngIf=\"shouldDisplayLink(item)\"\r\n                                class=\"nav-link px-4\"\r\n                                routerLinkActive=\"active\"\r\n                            >\r\n                                <a\r\n                                    [attr.data-item-id]=\"section.id\"\r\n                                    [routerLink]=\"getRouterLink(item)\"\r\n                                    (click)=\"onItemClick(item, $event)\"\r\n                                >\r\n                                    <ng-container *ngIf=\"item.statusBadge | async as itemBadge\">\r\n                                        <vdr-status-badge\r\n                                            *ngIf=\"itemBadge.type !== 'none'\"\r\n                                            [type]=\"itemBadge.type\"\r\n                                        ></vdr-status-badge>\r\n                                    </ng-container>\r\n                                    <clr-icon\r\n                                        [attr.shape]=\"item.icon || 'block'\"\r\n                                        size=\"16\"\r\n                                        [title]=\"item.label | translate\"\r\n                                    ></clr-icon>\r\n                                    <span class=\"\">{{ item.label | translate }}</span>\r\n                                </a>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </vdr-ui-extension-point>\r\n            </section>\r\n        </ng-container>\r\n    </section>\r\n</nav>\r\n", styles: [":host{background-color:var(--clr-nav-background-color)}nav.main-nav{height:100%;border-right-color:var(--clr-sidenav-border-color)}.main-nav .nav-group{margin-bottom:calc(var(--space-unit) * 2);padding:calc(var(--space-unit) * 2) 0;overflow:hidden;transition:padding .2s ease-in-out,margin-bottom .2s ease-in-out}.main-nav .nav-group.collapsible.collapsed{padding:3px 0;margin-bottom:calc(var(--space-unit) * 1)}.main-nav .nav-group.active:not(.collapsible.collapsed){background-color:var(--color-weight-125)}.main-nav .nav-group .nav-list{margin:0;transition:max-height .2s ease-in-out,opacity .2s ease-in-out}.main-nav .nav-group .section-header{display:flex;align-items:flex-start;justify-content:space-between;padding-inline-end:calc(var(--space-unit) * 4)}.main-nav .nav-group .nav-group-header{display:block;margin:0 0 var(--space-unit);font-size:var(--font-size-xs);letter-spacing:.05em;color:var(--color-weight-700);text-transform:uppercase}.main-nav .nav-group .nav-link{display:flex;align-items:center;line-height:100%;border-inline-end:2px solid transparent;font-size:var(--font-size-sm);padding:var(--space-unit) 0;transition:border .1s,color .1s}.main-nav .nav-group .nav-link a:link,.main-nav .nav-group .nav-link a:visited{color:var(--color-weight-700)}.main-nav .nav-group .nav-link:hover{color:var(--color-left-nav-text-hover);border-right-color:var(--color-weight-300)}.main-nav .nav-group .nav-link.active,.main-nav .nav-group .nav-link.active a:link,.main-nav .nav-group .nav-link.active a:visited{color:var(--color-text-active);border-right-color:var(--color-primary-500)}.main-nav .nav-group .nav-link.active clr-icon,.main-nav .nav-group .nav-link.active a:link clr-icon,.main-nav .nav-group .nav-link.active a:visited clr-icon{color:var(--color-primary-500)}.nav-list clr-icon{flex-shrink:0;margin-inline-end:var(--space-unit)}.nav-group{-webkit-hyphens:auto;hyphens:auto}.nav-group,.nav-link{position:relative}.nav-group vdr-status-badge{left:27px;top:6px}.nav-group .section-header vdr-status-badge{left:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i4.StatusBadgeComponent, selector: "vdr-status-badge", inputs: ["type"] }, { kind: "component", type: i5.UiExtensionPointComponent, selector: "vdr-ui-extension-point", inputs: ["locationId", "topPx", "leftPx", "display", "api"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: MainNavComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: MainNavComponent, selector: "vdr-main-nav", inputs: { displayMode: "displayMode" }, outputs: { itemClick: "itemClick" }, usesInheritance: true, ngImport: i0, template: "<nav class=\"main-nav\">\r\n    <section class=\"\">\r\n        <ng-container *ngFor=\"let section of mainMenuConfig$ | async\">\r\n            <section\r\n                class=\"nav-group\"\r\n                [attr.data-section-id]=\"section.id\"\r\n                [class.collapsible]=\"section.collapsible\"\r\n                [class.collapsed]=\"section.collapsible && !expandedSections.includes(section.id)\"\r\n                routerLinkActive=\"active\"\r\n                (isActiveChange)=\"setExpanded(section, $event)\"\r\n                *ngIf=\"shouldDisplayLink(section)\"\r\n            >\r\n                <vdr-ui-extension-point\r\n                    [locationId]=\"section.id\"\r\n                    api=\"navMenu\"\r\n                    [topPx]=\"-6\"\r\n                    [leftPx]=\"8\"\r\n                    display=\"block\"\r\n                >\r\n                    <div class=\"section-header\">\r\n                        <ng-container\r\n                            *ngIf=\"navBuilderService.sectionBadges[section.id] | async as sectionBadge\"\r\n                        >\r\n                            <vdr-status-badge\r\n                                *ngIf=\"sectionBadge !== 'none'\"\r\n                                [type]=\"sectionBadge\"\r\n                            ></vdr-status-badge>\r\n                        </ng-container>\r\n                        <label class=\"nav-group-header mx-4\" [for]=\"section.id\">{{\r\n                            section.label | translate\r\n                        }}</label>\r\n                        <button *ngIf=\"section.collapsible\" class=\"button-small bg-weight-150\" (click)=\"toggleExpand(section)\">\r\n                            <clr-icon\r\n                                [attr.shape]=\"expandedSections.includes(section.id) ? 'caret up' : 'caret down'\"\r\n                                size=\"12\"\r\n                                [title]=\"'common.expand-entries' | translate\"\r\n                            ></clr-icon>\r\n                        </button>\r\n                    </div>\r\n                    <div class=\"nav-list\" [ngStyle]=\"getStyleForSection(section)\">\r\n                        <ng-container *ngFor=\"let item of section.items\">\r\n                            <div\r\n                                *ngIf=\"shouldDisplayLink(item)\"\r\n                                class=\"nav-link px-4\"\r\n                                routerLinkActive=\"active\"\r\n                            >\r\n                                <a\r\n                                    [attr.data-item-id]=\"section.id\"\r\n                                    [routerLink]=\"getRouterLink(item)\"\r\n                                    (click)=\"onItemClick(item, $event)\"\r\n                                >\r\n                                    <ng-container *ngIf=\"item.statusBadge | async as itemBadge\">\r\n                                        <vdr-status-badge\r\n                                            *ngIf=\"itemBadge.type !== 'none'\"\r\n                                            [type]=\"itemBadge.type\"\r\n                                        ></vdr-status-badge>\r\n                                    </ng-container>\r\n                                    <clr-icon\r\n                                        [attr.shape]=\"item.icon || 'block'\"\r\n                                        size=\"16\"\r\n                                        [title]=\"item.label | translate\"\r\n                                    ></clr-icon>\r\n                                    <span class=\"\">{{ item.label | translate }}</span>\r\n                                </a>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </vdr-ui-extension-point>\r\n            </section>\r\n        </ng-container>\r\n    </section>\r\n</nav>\r\n", styles: [":host{background-color:var(--clr-nav-background-color)}nav.main-nav{height:100%;border-right-color:var(--clr-sidenav-border-color)}.main-nav .nav-group{margin-bottom:calc(var(--space-unit) * 2);padding:calc(var(--space-unit) * 2) 0;overflow:hidden;transition:padding .2s ease-in-out,margin-bottom .2s ease-in-out}.main-nav .nav-group.collapsible.collapsed{padding:3px 0;margin-bottom:calc(var(--space-unit) * 1)}.main-nav .nav-group.active:not(.collapsible.collapsed){background-color:var(--color-weight-125)}.main-nav .nav-group .nav-list{margin:0;transition:max-height .2s ease-in-out,opacity .2s ease-in-out}.main-nav .nav-group .section-header{display:flex;align-items:flex-start;justify-content:space-between;padding-inline-end:calc(var(--space-unit) * 4)}.main-nav .nav-group .nav-group-header{display:block;margin:0 0 var(--space-unit);font-size:var(--font-size-xs);letter-spacing:.05em;color:var(--color-weight-700);text-transform:uppercase}.main-nav .nav-group .nav-link{display:flex;align-items:center;line-height:100%;border-inline-end:2px solid transparent;font-size:var(--font-size-sm);padding:var(--space-unit) 0;transition:border .1s,color .1s}.main-nav .nav-group .nav-link a:link,.main-nav .nav-group .nav-link a:visited{color:var(--color-weight-700)}.main-nav .nav-group .nav-link:hover{color:var(--color-left-nav-text-hover);border-right-color:var(--color-weight-300)}.main-nav .nav-group .nav-link.active,.main-nav .nav-group .nav-link.active a:link,.main-nav .nav-group .nav-link.active a:visited{color:var(--color-text-active);border-right-color:var(--color-primary-500)}.main-nav .nav-group .nav-link.active clr-icon,.main-nav .nav-group .nav-link.active a:link clr-icon,.main-nav .nav-group .nav-link.active a:visited clr-icon{color:var(--color-primary-500)}.nav-list clr-icon{flex-shrink:0;margin-inline-end:var(--space-unit)}.nav-group{-webkit-hyphens:auto;hyphens:auto}.nav-group,.nav-link{position:relative}.nav-group vdr-status-badge{left:27px;top:6px}.nav-group .section-header vdr-status-badge{left:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i4.StatusBadgeComponent, selector: "vdr-status-badge", inputs: ["type"] }, { kind: "component", type: i5.UiExtensionPointComponent, selector: "vdr-ui-extension-point", inputs: ["locationId", "topPx", "leftPx", "display", "api"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: MainNavComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: MainNavComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-main-nav', template: "<nav class=\"main-nav\">\r\n    <section class=\"\">\r\n        <ng-container *ngFor=\"let section of mainMenuConfig$ | async\">\r\n            <section\r\n                class=\"nav-group\"\r\n                [attr.data-section-id]=\"section.id\"\r\n                [class.collapsible]=\"section.collapsible\"\r\n                [class.collapsed]=\"section.collapsible && !expandedSections.includes(section.id)\"\r\n                routerLinkActive=\"active\"\r\n                (isActiveChange)=\"setExpanded(section, $event)\"\r\n                *ngIf=\"shouldDisplayLink(section)\"\r\n            >\r\n                <vdr-ui-extension-point\r\n                    [locationId]=\"section.id\"\r\n                    api=\"navMenu\"\r\n                    [topPx]=\"-6\"\r\n                    [leftPx]=\"8\"\r\n                    display=\"block\"\r\n                >\r\n                    <div class=\"section-header\">\r\n                        <ng-container\r\n                            *ngIf=\"navBuilderService.sectionBadges[section.id] | async as sectionBadge\"\r\n                        >\r\n                            <vdr-status-badge\r\n                                *ngIf=\"sectionBadge !== 'none'\"\r\n                                [type]=\"sectionBadge\"\r\n                            ></vdr-status-badge>\r\n                        </ng-container>\r\n                        <label class=\"nav-group-header mx-4\" [for]=\"section.id\">{{\r\n                            section.label | translate\r\n                        }}</label>\r\n                        <button *ngIf=\"section.collapsible\" class=\"button-small bg-weight-150\" (click)=\"toggleExpand(section)\">\r\n                            <clr-icon\r\n                                [attr.shape]=\"expandedSections.includes(section.id) ? 'caret up' : 'caret down'\"\r\n                                size=\"12\"\r\n                                [title]=\"'common.expand-entries' | translate\"\r\n                            ></clr-icon>\r\n                        </button>\r\n                    </div>\r\n                    <div class=\"nav-list\" [ngStyle]=\"getStyleForSection(section)\">\r\n                        <ng-container *ngFor=\"let item of section.items\">\r\n                            <div\r\n                                *ngIf=\"shouldDisplayLink(item)\"\r\n                                class=\"nav-link px-4\"\r\n                                routerLinkActive=\"active\"\r\n                            >\r\n                                <a\r\n                                    [attr.data-item-id]=\"section.id\"\r\n                                    [routerLink]=\"getRouterLink(item)\"\r\n                                    (click)=\"onItemClick(item, $event)\"\r\n                                >\r\n                                    <ng-container *ngIf=\"item.statusBadge | async as itemBadge\">\r\n                                        <vdr-status-badge\r\n                                            *ngIf=\"itemBadge.type !== 'none'\"\r\n                                            [type]=\"itemBadge.type\"\r\n                                        ></vdr-status-badge>\r\n                                    </ng-container>\r\n                                    <clr-icon\r\n                                        [attr.shape]=\"item.icon || 'block'\"\r\n                                        size=\"16\"\r\n                                        [title]=\"item.label | translate\"\r\n                                    ></clr-icon>\r\n                                    <span class=\"\">{{ item.label | translate }}</span>\r\n                                </a>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </vdr-ui-extension-point>\r\n            </section>\r\n        </ng-container>\r\n    </section>\r\n</nav>\r\n", styles: [":host{background-color:var(--clr-nav-background-color)}nav.main-nav{height:100%;border-right-color:var(--clr-sidenav-border-color)}.main-nav .nav-group{margin-bottom:calc(var(--space-unit) * 2);padding:calc(var(--space-unit) * 2) 0;overflow:hidden;transition:padding .2s ease-in-out,margin-bottom .2s ease-in-out}.main-nav .nav-group.collapsible.collapsed{padding:3px 0;margin-bottom:calc(var(--space-unit) * 1)}.main-nav .nav-group.active:not(.collapsible.collapsed){background-color:var(--color-weight-125)}.main-nav .nav-group .nav-list{margin:0;transition:max-height .2s ease-in-out,opacity .2s ease-in-out}.main-nav .nav-group .section-header{display:flex;align-items:flex-start;justify-content:space-between;padding-inline-end:calc(var(--space-unit) * 4)}.main-nav .nav-group .nav-group-header{display:block;margin:0 0 var(--space-unit);font-size:var(--font-size-xs);letter-spacing:.05em;color:var(--color-weight-700);text-transform:uppercase}.main-nav .nav-group .nav-link{display:flex;align-items:center;line-height:100%;border-inline-end:2px solid transparent;font-size:var(--font-size-sm);padding:var(--space-unit) 0;transition:border .1s,color .1s}.main-nav .nav-group .nav-link a:link,.main-nav .nav-group .nav-link a:visited{color:var(--color-weight-700)}.main-nav .nav-group .nav-link:hover{color:var(--color-left-nav-text-hover);border-right-color:var(--color-weight-300)}.main-nav .nav-group .nav-link.active,.main-nav .nav-group .nav-link.active a:link,.main-nav .nav-group .nav-link.active a:visited{color:var(--color-text-active);border-right-color:var(--color-primary-500)}.main-nav .nav-group .nav-link.active clr-icon,.main-nav .nav-group .nav-link.active a:link clr-icon,.main-nav .nav-group .nav-link.active a:visited clr-icon{color:var(--color-primary-500)}.nav-list clr-icon{flex-shrink:0;margin-inline-end:var(--space-unit)}.nav-group{-webkit-hyphens:auto;hyphens:auto}.nav-group,.nav-link{position:relative}.nav-group vdr-status-badge{left:27px;top:6px}.nav-group .section-header vdr-status-badge{left:20px}\n"] }]
         }], propDecorators: { displayMode: [{

package/esm2022/core/components/notification/notification.component.mjs CHANGED Viewed

@@ -60,10 +60,10 @@ export class NotificationComponent {
             return JSON.stringify(message, null, 2);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: NotificationComponent, selector: "vdr-notification", host: { listeners: { "click": "onClick()" } }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, static: true }], ngImport: i0, template: "<div\r\n    class=\"notification-wrapper\"\r\n    #wrapper\r\n    [style.top.px]=\"offsetTop\"\r\n    [ngClass]=\"{\r\n        visible: isVisible,\r\n        info: type === 'info',\r\n        success: type === 'success',\r\n        error: type === 'error',\r\n        warning: type === 'warning'\r\n    }\"\r\n>\r\n    <clr-icon [attr.shape]=\"getIcon()\" size=\"24\"></clr-icon>\r\n    {{ stringifyMessage(message) | translate: translationVars }}\r\n</div>\r\n", styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:.95}}:host{position:relative;z-index:1050}:host>.notification-wrapper{display:block;position:fixed;z-index:1001;top:0;right:10px;border-radius:3px;max-width:98vw;word-wrap:break-word;padding:10px;background-color:var(--color-grey-500);color:#fff;transition:opacity 1s,top .3s;opacity:0;white-space:pre-line}:host>.notification-wrapper.success{background-color:var(--color-success-800)}:host>.notification-wrapper.error{background-color:var(--color-error-800)}:host>.notification-wrapper.warning{background-color:var(--color-warning-800)}:host>.notification-wrapper.info{background-color:var(--color-weight-500)}:host>.notification-wrapper.visible{opacity:.95;animation:fadeIn .3s .3s backwards}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: NotificationComponent, selector: "vdr-notification", host: { listeners: { "click": "onClick()" } }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, static: true }], ngImport: i0, template: "<div\r\n    class=\"notification-wrapper\"\r\n    #wrapper\r\n    [style.top.px]=\"offsetTop\"\r\n    [ngClass]=\"{\r\n        visible: isVisible,\r\n        info: type === 'info',\r\n        success: type === 'success',\r\n        error: type === 'error',\r\n        warning: type === 'warning'\r\n    }\"\r\n>\r\n    <clr-icon [attr.shape]=\"getIcon()\" size=\"24\"></clr-icon>\r\n    {{ stringifyMessage(message) | translate: translationVars }}\r\n</div>\r\n", styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:.95}}:host{position:relative;z-index:1050}:host>.notification-wrapper{display:block;position:fixed;z-index:1001;top:0;right:10px;border-radius:3px;max-width:98vw;word-wrap:break-word;padding:10px;background-color:var(--color-grey-500);color:#fff;transition:opacity 1s,top .3s;opacity:0;white-space:pre-line}:host>.notification-wrapper.success{background-color:var(--color-success-800)}:host>.notification-wrapper.error{background-color:var(--color-error-800)}:host>.notification-wrapper.warning{background-color:var(--color-warning-800)}:host>.notification-wrapper.info{background-color:var(--color-weight-500)}:host>.notification-wrapper.visible{opacity:.95;animation:fadeIn .3s .3s backwards}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NotificationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NotificationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-notification', template: "<div\r\n    class=\"notification-wrapper\"\r\n    #wrapper\r\n    [style.top.px]=\"offsetTop\"\r\n    [ngClass]=\"{\r\n        visible: isVisible,\r\n        info: type === 'info',\r\n        success: type === 'success',\r\n        error: type === 'error',\r\n        warning: type === 'warning'\r\n    }\"\r\n>\r\n    <clr-icon [attr.shape]=\"getIcon()\" size=\"24\"></clr-icon>\r\n    {{ stringifyMessage(message) | translate: translationVars }}\r\n</div>\r\n", styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:.95}}:host{position:relative;z-index:1050}:host>.notification-wrapper{display:block;position:fixed;z-index:1001;top:0;right:10px;border-radius:3px;max-width:98vw;word-wrap:break-word;padding:10px;background-color:var(--color-grey-500);color:#fff;transition:opacity 1s,top .3s;opacity:0;white-space:pre-line}:host>.notification-wrapper.success{background-color:var(--color-success-800)}:host>.notification-wrapper.error{background-color:var(--color-error-800)}:host>.notification-wrapper.warning{background-color:var(--color-warning-800)}:host>.notification-wrapper.info{background-color:var(--color-weight-500)}:host>.notification-wrapper.visible{opacity:.95;animation:fadeIn .3s .3s backwards}\n"] }]
         }], propDecorators: { wrapper: [{

package/esm2022/core/components/overlay-host/overlay-host.component.mjs CHANGED Viewed

@@ -9,10 +9,10 @@ export class OverlayHostComponent {
     constructor(viewContainerRef, overlayHostService) {
         overlayHostService.registerHostView(viewContainerRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: OverlayHostComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1.OverlayHostService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: OverlayHostComponent, selector: "vdr-overlay-host", ngImport: i0, template: '<!-- -->', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: OverlayHostComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1.OverlayHostService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: OverlayHostComponent, selector: "vdr-overlay-host", ngImport: i0, template: '<!-- -->', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: OverlayHostComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: OverlayHostComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'vdr-overlay-host',

package/esm2022/core/components/settings-nav/settings-nav.component.mjs CHANGED Viewed

@@ -17,10 +17,10 @@ export class SettingsNavComponent extends BaseNavComponent {
         super.ngOnInit();
         this.settingsMenuConfig$ = this.navBuilderService.menuConfig$.pipe(map(sections => sections.filter(s => s.displayMode === 'settings')));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: SettingsNavComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: SettingsNavComponent, selector: "vdr-settings-nav", usesInheritance: true, ngImport: i0, template: "<nav>\r\n    <section class=\"settings-nav-content\">\r\n        <ng-container *ngFor=\"let section of settingsMenuConfig$ | async\">\r\n            <vdr-ui-extension-point\r\n                [locationId]=\"section.id\"\r\n                api=\"navMenu\"\r\n                [topPx]=\"-6\"\r\n                [leftPx]=\"8\"\r\n                display=\"block\"\r\n            >\r\n                <vdr-dropdown>\r\n                    <button class=\"setting-link\" vdrDropdownTrigger>\r\n                        <div>\r\n                            <ng-container\r\n                                *ngIf=\"navBuilderService.sectionBadges[section.id] | async as sectionBadge\"\r\n                            >\r\n                                <vdr-status-badge\r\n                                    *ngIf=\"sectionBadge !== 'none'\"\r\n                                    [type]=\"sectionBadge\"\r\n                                ></vdr-status-badge>\r\n                            </ng-container>\r\n                            <clr-icon\r\n                                *ngIf=\"section.icon\"\r\n                                [attr.shape]=\"section.icon || 'block'\"\r\n                                size=\"20\"\r\n                            ></clr-icon>\r\n                            <label class=\"md:hidden\" [for]=\"section.id\">{{ section.label | translate }}</label>\r\n                        </div>\r\n                        <clr-icon class=\"md:hidden\" shape=\"caret right\"></clr-icon>\r\n                    </button>\r\n                    <vdr-dropdown-menu vdrPosition=\"top-right\">\r\n                        <ng-container *ngFor=\"let item of section.items\">\r\n                            <div *ngIf=\"shouldDisplayLink(item)\" class=\"menu-link\">\r\n                                <a\r\n                                    vdrDropdownItem\r\n                                    [attr.data-item-id]=\"section.id\"\r\n                                    [routerLink]=\"getRouterLink(item)\"\r\n                                    routerLinkActive=\"active\"\r\n                                    (click)=\"item.onClick && item.onClick($event)\"\r\n                                >\r\n                                    <ng-container *ngIf=\"item.statusBadge | async as itemBadge\">\r\n                                        <vdr-status-badge\r\n                                            *ngIf=\"itemBadge.type !== 'none'\"\r\n                                            [type]=\"itemBadge.type\"\r\n                                        ></vdr-status-badge>\r\n                                    </ng-container>\r\n                                    <clr-icon [attr.shape]=\"item.icon || 'block'\" size=\"20\"></clr-icon>\r\n                                    <div class=\"\">{{ item.label | translate }}</div>\r\n                                </a>\r\n                            </div>\r\n                        </ng-container>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </vdr-ui-extension-point>\r\n        </ng-container>\r\n    </section>\r\n</nav>\r\n", styles: [".setting-link{width:100%;border:none;display:flex;justify-content:space-between;font-size:var(--font-size-xs);align-items:center;cursor:pointer;background-color:transparent;padding:var(--space-unit);color:var(--color-left-nav-text)}.setting-link:hover{color:var(--color-left-nav-text-hover)}.setting-link clr-icon{margin-inline-end:6px}.menu-link{position:relative}.menu-link vdr-status-badge{left:20px;top:3px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i4.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i5.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i6.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i7.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: i8.StatusBadgeComponent, selector: "vdr-status-badge", inputs: ["type"] }, { kind: "component", type: i9.UiExtensionPointComponent, selector: "vdr-ui-extension-point", inputs: ["locationId", "topPx", "leftPx", "display", "api"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: SettingsNavComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: SettingsNavComponent, selector: "vdr-settings-nav", usesInheritance: true, ngImport: i0, template: "<nav>\r\n    <section class=\"settings-nav-content\">\r\n        <ng-container *ngFor=\"let section of settingsMenuConfig$ | async\">\r\n            <vdr-ui-extension-point\r\n                [locationId]=\"section.id\"\r\n                api=\"navMenu\"\r\n                [topPx]=\"-6\"\r\n                [leftPx]=\"8\"\r\n                display=\"block\"\r\n            >\r\n                <vdr-dropdown>\r\n                    <button class=\"setting-link\" vdrDropdownTrigger>\r\n                        <div>\r\n                            <ng-container\r\n                                *ngIf=\"navBuilderService.sectionBadges[section.id] | async as sectionBadge\"\r\n                            >\r\n                                <vdr-status-badge\r\n                                    *ngIf=\"sectionBadge !== 'none'\"\r\n                                    [type]=\"sectionBadge\"\r\n                                ></vdr-status-badge>\r\n                            </ng-container>\r\n                            <clr-icon\r\n                                *ngIf=\"section.icon\"\r\n                                [attr.shape]=\"section.icon || 'block'\"\r\n                                size=\"20\"\r\n                            ></clr-icon>\r\n                            <label class=\"md:hidden\" [for]=\"section.id\">{{ section.label | translate }}</label>\r\n                        </div>\r\n                        <clr-icon class=\"md:hidden\" shape=\"caret right\"></clr-icon>\r\n                    </button>\r\n                    <vdr-dropdown-menu vdrPosition=\"top-right\">\r\n                        <ng-container *ngFor=\"let item of section.items\">\r\n                            <div *ngIf=\"shouldDisplayLink(item)\" class=\"menu-link\">\r\n                                <a\r\n                                    vdrDropdownItem\r\n                                    [attr.data-item-id]=\"section.id\"\r\n                                    [routerLink]=\"getRouterLink(item)\"\r\n                                    routerLinkActive=\"active\"\r\n                                    (click)=\"item.onClick && item.onClick($event)\"\r\n                                >\r\n                                    <ng-container *ngIf=\"item.statusBadge | async as itemBadge\">\r\n                                        <vdr-status-badge\r\n                                            *ngIf=\"itemBadge.type !== 'none'\"\r\n                                            [type]=\"itemBadge.type\"\r\n                                        ></vdr-status-badge>\r\n                                    </ng-container>\r\n                                    <clr-icon [attr.shape]=\"item.icon || 'block'\" size=\"20\"></clr-icon>\r\n                                    <div class=\"\">{{ item.label | translate }}</div>\r\n                                </a>\r\n                            </div>\r\n                        </ng-container>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </vdr-ui-extension-point>\r\n        </ng-container>\r\n    </section>\r\n</nav>\r\n", styles: [".setting-link{width:100%;border:none;display:flex;justify-content:space-between;font-size:var(--font-size-xs);align-items:center;cursor:pointer;background-color:transparent;padding:var(--space-unit);color:var(--color-left-nav-text)}.setting-link:hover{color:var(--color-left-nav-text-hover)}.setting-link clr-icon{margin-inline-end:6px}.menu-link{position:relative}.menu-link vdr-status-badge{left:20px;top:3px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i4.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i5.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i6.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i7.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: i8.StatusBadgeComponent, selector: "vdr-status-badge", inputs: ["type"] }, { kind: "component", type: i9.UiExtensionPointComponent, selector: "vdr-ui-extension-point", inputs: ["locationId", "topPx", "leftPx", "display", "api"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: SettingsNavComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: SettingsNavComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-settings-nav', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav>\r\n    <section class=\"settings-nav-content\">\r\n        <ng-container *ngFor=\"let section of settingsMenuConfig$ | async\">\r\n            <vdr-ui-extension-point\r\n                [locationId]=\"section.id\"\r\n                api=\"navMenu\"\r\n                [topPx]=\"-6\"\r\n                [leftPx]=\"8\"\r\n                display=\"block\"\r\n            >\r\n                <vdr-dropdown>\r\n                    <button class=\"setting-link\" vdrDropdownTrigger>\r\n                        <div>\r\n                            <ng-container\r\n                                *ngIf=\"navBuilderService.sectionBadges[section.id] | async as sectionBadge\"\r\n                            >\r\n                                <vdr-status-badge\r\n                                    *ngIf=\"sectionBadge !== 'none'\"\r\n                                    [type]=\"sectionBadge\"\r\n                                ></vdr-status-badge>\r\n                            </ng-container>\r\n                            <clr-icon\r\n                                *ngIf=\"section.icon\"\r\n                                [attr.shape]=\"section.icon || 'block'\"\r\n                                size=\"20\"\r\n                            ></clr-icon>\r\n                            <label class=\"md:hidden\" [for]=\"section.id\">{{ section.label | translate }}</label>\r\n                        </div>\r\n                        <clr-icon class=\"md:hidden\" shape=\"caret right\"></clr-icon>\r\n                    </button>\r\n                    <vdr-dropdown-menu vdrPosition=\"top-right\">\r\n                        <ng-container *ngFor=\"let item of section.items\">\r\n                            <div *ngIf=\"shouldDisplayLink(item)\" class=\"menu-link\">\r\n                                <a\r\n                                    vdrDropdownItem\r\n                                    [attr.data-item-id]=\"section.id\"\r\n                                    [routerLink]=\"getRouterLink(item)\"\r\n                                    routerLinkActive=\"active\"\r\n                                    (click)=\"item.onClick && item.onClick($event)\"\r\n                                >\r\n                                    <ng-container *ngIf=\"item.statusBadge | async as itemBadge\">\r\n                                        <vdr-status-badge\r\n                                            *ngIf=\"itemBadge.type !== 'none'\"\r\n                                            [type]=\"itemBadge.type\"\r\n                                        ></vdr-status-badge>\r\n                                    </ng-container>\r\n                                    <clr-icon [attr.shape]=\"item.icon || 'block'\" size=\"20\"></clr-icon>\r\n                                    <div class=\"\">{{ item.label | translate }}</div>\r\n                                </a>\r\n                            </div>\r\n                        </ng-container>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </vdr-ui-extension-point>\r\n        </ng-container>\r\n    </section>\r\n</nav>\r\n", styles: [".setting-link{width:100%;border:none;display:flex;justify-content:space-between;font-size:var(--font-size-xs);align-items:center;cursor:pointer;background-color:transparent;padding:var(--space-unit);color:var(--color-left-nav-text)}.setting-link:hover{color:var(--color-left-nav-text-hover)}.setting-link clr-icon{margin-inline-end:6px}.menu-link{position:relative}.menu-link vdr-status-badge{left:20px;top:3px}\n"] }]
         }] });

package/esm2022/core/components/theme-switcher/theme-switcher.component.mjs CHANGED Viewed

@@ -23,10 +23,10 @@ export class ThemeSwitcherComponent {
             this.localStorageService.set('activeTheme', newTheme);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: ThemeSwitcherComponent, deps: [{ token: i1.DataService }, { token: i2.LocalStorageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: ThemeSwitcherComponent, selector: "vdr-theme-switcher", host: { listeners: { "click": "onHostClick($event)", "keydown.enter": "onHostClick($event)" } }, ngImport: i0, template: "<button *ngIf=\"activeTheme$ | async as activeTheme\" class=\"theme-toggle\">\r\n    <span>{{ 'common.theme' | translate }}</span>\r\n    <div class=\"theme-icon default\" [class.active]=\"activeTheme === 'default'\">\r\n        <clr-icon shape=\"sun\" class=\"is-solid\"></clr-icon>\r\n    </div>\r\n    <div class=\"theme-icon dark\" [class.active]=\"activeTheme === 'dark'\">\r\n        <clr-icon shape=\"moon\" class=\"is-solid\"></clr-icon>\r\n    </div>\r\n</button>\r\n", styles: [":host{display:flex;justify-content:start;align-items:center}button.theme-toggle{position:relative;padding-inline-start:20px;border:none;background:transparent;color:var(--clr-dropdown-item-color);cursor:pointer}.theme-icon{position:absolute;top:0;left:6px;z-index:0;opacity:.2;color:var(--color-text-300);transition:opacity .3s,left .3s}.theme-icon.active{z-index:1;left:0;opacity:1}.theme-icon.default.active{color:#d6ae3f}.theme-icon.dark.active{color:#ffdf3a}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ThemeSwitcherComponent, deps: [{ token: i1.DataService }, { token: i2.LocalStorageService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ThemeSwitcherComponent, selector: "vdr-theme-switcher", host: { listeners: { "click": "onHostClick($event)", "keydown.enter": "onHostClick($event)" } }, ngImport: i0, template: "<button *ngIf=\"activeTheme$ | async as activeTheme\" class=\"theme-toggle\">\r\n    <span>{{ 'common.theme' | translate }}</span>\r\n    <div class=\"theme-icon default\" [class.active]=\"activeTheme === 'default'\">\r\n        <clr-icon shape=\"sun\" class=\"is-solid\"></clr-icon>\r\n    </div>\r\n    <div class=\"theme-icon dark\" [class.active]=\"activeTheme === 'dark'\">\r\n        <clr-icon shape=\"moon\" class=\"is-solid\"></clr-icon>\r\n    </div>\r\n</button>\r\n", styles: [":host{display:flex;justify-content:start;align-items:center}button.theme-toggle{position:relative;padding-inline-start:20px;border:none;background:transparent;color:var(--clr-dropdown-item-color);cursor:pointer}.theme-icon{position:absolute;top:0;left:6px;z-index:0;opacity:.2;color:var(--color-text-300);transition:opacity .3s,left .3s}.theme-icon.active{z-index:1;left:0;opacity:1}.theme-icon.default.active{color:#d6ae3f}.theme-icon.dark.active{color:#ffdf3a}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: ThemeSwitcherComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ThemeSwitcherComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-theme-switcher', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button *ngIf=\"activeTheme$ | async as activeTheme\" class=\"theme-toggle\">\r\n    <span>{{ 'common.theme' | translate }}</span>\r\n    <div class=\"theme-icon default\" [class.active]=\"activeTheme === 'default'\">\r\n        <clr-icon shape=\"sun\" class=\"is-solid\"></clr-icon>\r\n    </div>\r\n    <div class=\"theme-icon dark\" [class.active]=\"activeTheme === 'dark'\">\r\n        <clr-icon shape=\"moon\" class=\"is-solid\"></clr-icon>\r\n    </div>\r\n</button>\r\n", styles: [":host{display:flex;justify-content:start;align-items:center}button.theme-toggle{position:relative;padding-inline-start:20px;border:none;background:transparent;color:var(--clr-dropdown-item-color);cursor:pointer}.theme-icon{position:absolute;top:0;left:6px;z-index:0;opacity:.2;color:var(--color-text-300);transition:opacity .3s,left .3s}.theme-icon.active{z-index:1;left:0;opacity:1}.theme-icon.default.active{color:#d6ae3f}.theme-icon.dark.active{color:#ffdf3a}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.DataService }, { type: i2.LocalStorageService }]; }, propDecorators: { onHostClick: [{

package/esm2022/core/components/ui-language-switcher-dialog/ui-language-switcher-dialog.component.mjs CHANGED Viewed

@@ -296,10 +296,10 @@ export class UiLanguageSwitcherDialogComponent {
         }
         return [languageCode, region.toUpperCase()].join('-');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: UiLanguageSwitcherDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: UiLanguageSwitcherDialogComponent, selector: "vdr-ui-language-switcher", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'common.select-display-language' | translate }}</ng-template>\r\n<div class=\"clr-row\">\r\n    <div class=\"flex pl-2 mb-2\">\r\n        <vdr-form-field [label]=\"'common.language' | translate\" class=\"mr-2\">\r\n            <select name=\"options\" [(ngModel)]=\"currentLanguage\" (ngModelChange)=\"updatePreviewLocale()\">\r\n                <option *ngFor=\"let code of availableLanguages | sort\" [value]=\"code\">\r\n                    {{ code | uppercase }} ({{ code | localeLanguageName }})\r\n                </option>\r\n            </select>\r\n        </vdr-form-field>\r\n        <vdr-form-field [label]=\"'common.locale' | translate\">\r\n            <ng-select\r\n                appendTo=\"body\"\r\n                [items]=\"availableLocales\"\r\n                [(ngModel)]=\"currentLocale\"\r\n                (ngModelChange)=\"updatePreviewLocale()\"\r\n                [placeholder]=\"'common.browser-default' | translate\"\r\n            >\r\n                <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                    {{ item }} ({{ item | localeRegionName }})\r\n                </ng-template>\r\n                <ng-template ng-option-tmp let-item=\"item\">\r\n                    {{ item }} ({{ item | localeRegionName }})\r\n                </ng-template>\r\n            </ng-select>\r\n        </vdr-form-field>\r\n    </div>\r\n</div>\r\n<div class=\"card\">\r\n    <div class=\"card-header\">\r\n        <span class=\"pr-1\">{{ 'common.sample-formatting' | translate }}:</span\r\n        ><strong>{{ previewLocale | localeLanguageName : previewLocale }}</strong>\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <div class=\"clr-row\">\r\n            <div class=\"clr-col-sm-4\">\r\n                <vdr-labeled-data [label]=\"'common.medium-date' | translate\">\r\n                    {{ now | localeDate : 'medium' : previewLocale }}\r\n                </vdr-labeled-data>\r\n                <vdr-labeled-data [label]=\"'common.short-date' | translate\">\r\n                    {{ now | localeDate : 'short' : previewLocale }}\r\n                </vdr-labeled-data>\r\n            </div>\r\n            <div class=\"clr-col-sm-4\">\r\n                <select name=\"currency\" class=\"currency\" [(ngModel)]=\"selectedCurrencyCode\">\r\n                    <option *ngFor=\"let code of availableCurrencyCodes | sort\" [value]=\"code\">\r\n                        {{ code | uppercase }} ({{ code | localeCurrencyName : 'full' : previewLocale }})\r\n                    </option>\r\n                </select>\r\n            </div>\r\n            <div class=\"clr-col-sm-4\">\r\n                <vdr-labeled-data [label]=\"'common.price' | translate\">\r\n                    {{ 12345 | localeCurrency : selectedCurrencyCode : previewLocale }}\r\n                </vdr-labeled-data>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"setLanguage()\" class=\"btn btn-primary\">\r\n        {{ 'common.set-language' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: ["select.currency{max-width:200px}input.locale{text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "component", type: i4.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: i5.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "directive", type: i6.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i7.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i8.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }, { kind: "pipe", type: i10.LocaleCurrencyNamePipe, name: "localeCurrencyName" }, { kind: "pipe", type: i11.SortPipe, name: "sort" }, { kind: "pipe", type: i12.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i13.LocaleCurrencyPipe, name: "localeCurrency" }, { kind: "pipe", type: i14.LocaleLanguageNamePipe, name: "localeLanguageName" }, { kind: "pipe", type: i15.LocaleRegionNamePipe, name: "localeRegionName" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: UiLanguageSwitcherDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: UiLanguageSwitcherDialogComponent, selector: "vdr-ui-language-switcher", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'common.select-display-language' | translate }}</ng-template>\r\n<div class=\"clr-row\">\r\n    <div class=\"flex pl-2 mb-2\">\r\n        <vdr-form-field [label]=\"'common.language' | translate\" class=\"mr-2\">\r\n            <select name=\"options\" [(ngModel)]=\"currentLanguage\" (ngModelChange)=\"updatePreviewLocale()\">\r\n                <option *ngFor=\"let code of availableLanguages | sort\" [value]=\"code\">\r\n                    {{ code | uppercase }} ({{ code | localeLanguageName }})\r\n                </option>\r\n            </select>\r\n        </vdr-form-field>\r\n        <vdr-form-field [label]=\"'common.locale' | translate\">\r\n            <ng-select\r\n                appendTo=\"body\"\r\n                [items]=\"availableLocales\"\r\n                [(ngModel)]=\"currentLocale\"\r\n                (ngModelChange)=\"updatePreviewLocale()\"\r\n                [placeholder]=\"'common.browser-default' | translate\"\r\n            >\r\n                <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                    {{ item }} ({{ item | localeRegionName }})\r\n                </ng-template>\r\n                <ng-template ng-option-tmp let-item=\"item\">\r\n                    {{ item }} ({{ item | localeRegionName }})\r\n                </ng-template>\r\n            </ng-select>\r\n        </vdr-form-field>\r\n    </div>\r\n</div>\r\n<div class=\"card\">\r\n    <div class=\"card-header\">\r\n        <span class=\"pr-1\">{{ 'common.sample-formatting' | translate }}:</span\r\n        ><strong>{{ previewLocale | localeLanguageName : previewLocale }}</strong>\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <div class=\"clr-row\">\r\n            <div class=\"clr-col-sm-4\">\r\n                <vdr-labeled-data [label]=\"'common.medium-date' | translate\">\r\n                    {{ now | localeDate : 'medium' : previewLocale }}\r\n                </vdr-labeled-data>\r\n                <vdr-labeled-data [label]=\"'common.short-date' | translate\">\r\n                    {{ now | localeDate : 'short' : previewLocale }}\r\n                </vdr-labeled-data>\r\n            </div>\r\n            <div class=\"clr-col-sm-4\">\r\n                <select name=\"currency\" class=\"currency\" [(ngModel)]=\"selectedCurrencyCode\">\r\n                    <option *ngFor=\"let code of availableCurrencyCodes | sort\" [value]=\"code\">\r\n                        {{ code | uppercase }} ({{ code | localeCurrencyName : 'full' : previewLocale }})\r\n                    </option>\r\n                </select>\r\n            </div>\r\n            <div class=\"clr-col-sm-4\">\r\n                <vdr-labeled-data [label]=\"'common.price' | translate\">\r\n                    {{ 12345 | localeCurrency : selectedCurrencyCode : previewLocale }}\r\n                </vdr-labeled-data>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"setLanguage()\" class=\"btn btn-primary\">\r\n        {{ 'common.set-language' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: ["select.currency{max-width:200px}input.locale{text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "component", type: i4.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: i5.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "directive", type: i6.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i7.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i8.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }, { kind: "pipe", type: i10.LocaleCurrencyNamePipe, name: "localeCurrencyName" }, { kind: "pipe", type: i11.SortPipe, name: "sort" }, { kind: "pipe", type: i12.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i13.LocaleCurrencyPipe, name: "localeCurrency" }, { kind: "pipe", type: i14.LocaleLanguageNamePipe, name: "localeLanguageName" }, { kind: "pipe", type: i15.LocaleRegionNamePipe, name: "localeRegionName" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: UiLanguageSwitcherDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: UiLanguageSwitcherDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-ui-language-switcher', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>{{ 'common.select-display-language' | translate }}</ng-template>\r\n<div class=\"clr-row\">\r\n    <div class=\"flex pl-2 mb-2\">\r\n        <vdr-form-field [label]=\"'common.language' | translate\" class=\"mr-2\">\r\n            <select name=\"options\" [(ngModel)]=\"currentLanguage\" (ngModelChange)=\"updatePreviewLocale()\">\r\n                <option *ngFor=\"let code of availableLanguages | sort\" [value]=\"code\">\r\n                    {{ code | uppercase }} ({{ code | localeLanguageName }})\r\n                </option>\r\n            </select>\r\n        </vdr-form-field>\r\n        <vdr-form-field [label]=\"'common.locale' | translate\">\r\n            <ng-select\r\n                appendTo=\"body\"\r\n                [items]=\"availableLocales\"\r\n                [(ngModel)]=\"currentLocale\"\r\n                (ngModelChange)=\"updatePreviewLocale()\"\r\n                [placeholder]=\"'common.browser-default' | translate\"\r\n            >\r\n                <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                    {{ item }} ({{ item | localeRegionName }})\r\n                </ng-template>\r\n                <ng-template ng-option-tmp let-item=\"item\">\r\n                    {{ item }} ({{ item | localeRegionName }})\r\n                </ng-template>\r\n            </ng-select>\r\n        </vdr-form-field>\r\n    </div>\r\n</div>\r\n<div class=\"card\">\r\n    <div class=\"card-header\">\r\n        <span class=\"pr-1\">{{ 'common.sample-formatting' | translate }}:</span\r\n        ><strong>{{ previewLocale | localeLanguageName : previewLocale }}</strong>\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <div class=\"clr-row\">\r\n            <div class=\"clr-col-sm-4\">\r\n                <vdr-labeled-data [label]=\"'common.medium-date' | translate\">\r\n                    {{ now | localeDate : 'medium' : previewLocale }}\r\n                </vdr-labeled-data>\r\n                <vdr-labeled-data [label]=\"'common.short-date' | translate\">\r\n                    {{ now | localeDate : 'short' : previewLocale }}\r\n                </vdr-labeled-data>\r\n            </div>\r\n            <div class=\"clr-col-sm-4\">\r\n                <select name=\"currency\" class=\"currency\" [(ngModel)]=\"selectedCurrencyCode\">\r\n                    <option *ngFor=\"let code of availableCurrencyCodes | sort\" [value]=\"code\">\r\n                        {{ code | uppercase }} ({{ code | localeCurrencyName : 'full' : previewLocale }})\r\n                    </option>\r\n                </select>\r\n            </div>\r\n            <div class=\"clr-col-sm-4\">\r\n                <vdr-labeled-data [label]=\"'common.price' | translate\">\r\n                    {{ 12345 | localeCurrency : selectedCurrencyCode : previewLocale }}\r\n                </vdr-labeled-data>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"setLanguage()\" class=\"btn btn-primary\">\r\n        {{ 'common.set-language' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: ["select.currency{max-width:200px}input.locale{text-transform:uppercase}\n"] }]
         }], ctorParameters: function () { return []; } });

package/esm2022/core/components/user-menu/user-menu.component.mjs CHANGED Viewed

@@ -17,10 +17,10 @@ export class UserMenuComponent {
         this.logOut = new EventEmitter();
         this.selectUiLanguage = new EventEmitter();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: UserMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: UserMenuComponent, selector: "vdr-user-menu", inputs: { userName: "userName", availableLanguages: "availableLanguages", uiLanguageAndLocale: "uiLanguageAndLocale" }, outputs: { logOut: "logOut", selectUiLanguage: "selectUiLanguage" }, ngImport: i0, template: "<vdr-dropdown>\r\n    <button class=\"trigger user-menu-btn\" vdrDropdownTrigger>\r\n        <div class=\"user-circle\">\r\n            <clr-icon shape=\"user\" size=\"16\"></clr-icon>\r\n        </div>\r\n        <span class=\"user-name\">{{ userName }}</span>\r\n        <clr-icon class=\"md:hidden\" shape=\"caret down\"></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n        <a [routerLink]=\"['/settings', 'profile']\" vdrDropdownItem tabindex=\"0\">\r\n            <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon> {{ 'settings.profile' | translate }}\r\n        </a>\r\n        <ng-container *ngIf=\"1 < availableLanguages.length\">\r\n            <button\r\n                type=\"button\"\r\n                vdrDropdownItem\r\n                (click)=\"selectUiLanguage.emit()\"\r\n                [title]=\"'common.select-display-language' | translate\"\r\n            >\r\n                <clr-icon shape=\"language\"></clr-icon> {{ uiLanguageAndLocale?.[0] | localeLanguageName }}\r\n            </button>\r\n        </ng-container>\r\n        <vdr-theme-switcher vdrDropdownItem tabindex=\"0\"></vdr-theme-switcher>\r\n        <div class=\"dropdown-divider\"></div>\r\n        <button type=\"button\" vdrDropdownItem (click)=\"logOut.emit()\">\r\n            <clr-icon shape=\"logout\"></clr-icon> {{ 'common.log-out' | translate }}\r\n        </button>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [":host{display:flex;align-items:center;height:2.5rem;width:100%;padding:var(--space-unit);padding-inline-start:0}@media screen and (max-width: 992px){:host{margin:0}}:host vdr-dropdown{width:100%}.user-menu-btn{display:flex;align-items:center;justify-content:space-between;border:none;font-size:var(--font-size-sm);width:100%;line-height:100%;height:40px;color:var(--color-text-100);background-color:var(--color-page-header-item-bg);border-radius:var(--border-radius-lg);cursor:pointer}.user-menu-btn:hover{color:var(--color-text-200)}@media screen and (min-width: 992px){.user-menu-btn{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2) calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1.5)}}.user-circle{display:inline-flex;align-items:center;justify-content:center;border-radius:100%;background-color:var(--color-primary-600);background-image:linear-gradient(135deg,var(--color-primary-500) 0%,var(--color-primary-700) 100%);width:24px;height:24px;margin-inline-end:6px}@media screen and (max-width: 992px){.user-circle{margin-inline-end:0}}.user-circle clr-icon{color:var(--color-text-inverse)}.user-name{margin-inline-end:var(--space-unit);overflow:hidden;max-width:100px;text-overflow:ellipsis}@media screen and (max-width: 992px){.user-name{display:none}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i4.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i5.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i6.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i7.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: i8.ThemeSwitcherComponent, selector: "vdr-theme-switcher" }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }, { kind: "pipe", type: i10.LocaleLanguageNamePipe, name: "localeLanguageName" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: UserMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: UserMenuComponent, selector: "vdr-user-menu", inputs: { userName: "userName", availableLanguages: "availableLanguages", uiLanguageAndLocale: "uiLanguageAndLocale" }, outputs: { logOut: "logOut", selectUiLanguage: "selectUiLanguage" }, ngImport: i0, template: "<vdr-dropdown>\r\n    <button class=\"trigger user-menu-btn\" vdrDropdownTrigger>\r\n        <div class=\"user-circle\">\r\n            <clr-icon shape=\"user\" size=\"16\"></clr-icon>\r\n        </div>\r\n        <span class=\"user-name\">{{ userName }}</span>\r\n        <clr-icon class=\"md:hidden\" shape=\"caret down\"></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n        <a [routerLink]=\"['/settings', 'profile']\" vdrDropdownItem tabindex=\"0\">\r\n            <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon> {{ 'settings.profile' | translate }}\r\n        </a>\r\n        <ng-container *ngIf=\"1 < availableLanguages.length\">\r\n            <button\r\n                type=\"button\"\r\n                vdrDropdownItem\r\n                (click)=\"selectUiLanguage.emit()\"\r\n                [title]=\"'common.select-display-language' | translate\"\r\n            >\r\n                <clr-icon shape=\"language\"></clr-icon> {{ uiLanguageAndLocale?.[0] | localeLanguageName }}\r\n            </button>\r\n        </ng-container>\r\n        <vdr-theme-switcher vdrDropdownItem tabindex=\"0\"></vdr-theme-switcher>\r\n        <div class=\"dropdown-divider\"></div>\r\n        <button type=\"button\" vdrDropdownItem (click)=\"logOut.emit()\">\r\n            <clr-icon shape=\"logout\"></clr-icon> {{ 'common.log-out' | translate }}\r\n        </button>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [":host{display:flex;align-items:center;height:2.5rem;width:100%;padding:var(--space-unit);padding-inline-start:0}@media screen and (max-width: 992px){:host{margin:0}}:host vdr-dropdown{width:100%}.user-menu-btn{display:flex;align-items:center;justify-content:space-between;border:none;font-size:var(--font-size-sm);width:100%;line-height:100%;height:40px;color:var(--color-text-100);background-color:var(--color-page-header-item-bg);border-radius:var(--border-radius-lg);cursor:pointer}.user-menu-btn:hover{color:var(--color-text-200)}@media screen and (min-width: 992px){.user-menu-btn{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2) calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1.5)}}.user-circle{display:inline-flex;align-items:center;justify-content:center;border-radius:100%;background-color:var(--color-primary-600);background-image:linear-gradient(135deg,var(--color-primary-500) 0%,var(--color-primary-700) 100%);width:24px;height:24px;margin-inline-end:6px}@media screen and (max-width: 992px){.user-circle{margin-inline-end:0}}.user-circle clr-icon{color:var(--color-text-inverse)}.user-name{margin-inline-end:var(--space-unit);overflow:hidden;max-width:100px;text-overflow:ellipsis}@media screen and (max-width: 992px){.user-name{display:none}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i4.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i5.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i6.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i7.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: i8.ThemeSwitcherComponent, selector: "vdr-theme-switcher" }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }, { kind: "pipe", type: i10.LocaleLanguageNamePipe, name: "localeLanguageName" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: UserMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: UserMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-user-menu', template: "<vdr-dropdown>\r\n    <button class=\"trigger user-menu-btn\" vdrDropdownTrigger>\r\n        <div class=\"user-circle\">\r\n            <clr-icon shape=\"user\" size=\"16\"></clr-icon>\r\n        </div>\r\n        <span class=\"user-name\">{{ userName }}</span>\r\n        <clr-icon class=\"md:hidden\" shape=\"caret down\"></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n        <a [routerLink]=\"['/settings', 'profile']\" vdrDropdownItem tabindex=\"0\">\r\n            <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon> {{ 'settings.profile' | translate }}\r\n        </a>\r\n        <ng-container *ngIf=\"1 < availableLanguages.length\">\r\n            <button\r\n                type=\"button\"\r\n                vdrDropdownItem\r\n                (click)=\"selectUiLanguage.emit()\"\r\n                [title]=\"'common.select-display-language' | translate\"\r\n            >\r\n                <clr-icon shape=\"language\"></clr-icon> {{ uiLanguageAndLocale?.[0] | localeLanguageName }}\r\n            </button>\r\n        </ng-container>\r\n        <vdr-theme-switcher vdrDropdownItem tabindex=\"0\"></vdr-theme-switcher>\r\n        <div class=\"dropdown-divider\"></div>\r\n        <button type=\"button\" vdrDropdownItem (click)=\"logOut.emit()\">\r\n            <clr-icon shape=\"logout\"></clr-icon> {{ 'common.log-out' | translate }}\r\n        </button>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [":host{display:flex;align-items:center;height:2.5rem;width:100%;padding:var(--space-unit);padding-inline-start:0}@media screen and (max-width: 992px){:host{margin:0}}:host vdr-dropdown{width:100%}.user-menu-btn{display:flex;align-items:center;justify-content:space-between;border:none;font-size:var(--font-size-sm);width:100%;line-height:100%;height:40px;color:var(--color-text-100);background-color:var(--color-page-header-item-bg);border-radius:var(--border-radius-lg);cursor:pointer}.user-menu-btn:hover{color:var(--color-text-200)}@media screen and (min-width: 992px){.user-menu-btn{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2) calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1.5)}}.user-circle{display:inline-flex;align-items:center;justify-content:center;border-radius:100%;background-color:var(--color-primary-600);background-image:linear-gradient(135deg,var(--color-primary-500) 0%,var(--color-primary-700) 100%);width:24px;height:24px;margin-inline-end:6px}@media screen and (max-width: 992px){.user-circle{margin-inline-end:0}}.user-circle clr-icon{color:var(--color-text-inverse)}.user-name{margin-inline-end:var(--space-unit);overflow:hidden;max-width:100px;text-overflow:ellipsis}@media screen and (max-width: 992px){.user-name{display:none}}\n"] }]
         }], propDecorators: { userName: [{

package/esm2022/core/core.module.mjs CHANGED Viewed

@@ -85,8 +85,8 @@ export class CoreModule {
         });
         this.alertsService.refresh();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: CoreModule, deps: [{ token: i1.I18nService }, { token: i2.LocalStorageService }, { token: i3.Title }, { token: i4.AlertsService }, { token: i5.DataService }, { token: i6.NotificationService }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.3", ngImport: i0, type: CoreModule, declarations: [AppShellComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CoreModule, deps: [{ token: i1.I18nService }, { token: i2.LocalStorageService }, { token: i3.Title }, { token: i4.AlertsService }, { token: i5.DataService }, { token: i6.NotificationService }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.2", ngImport: i0, type: CoreModule, declarations: [AppShellComponent,
             UserMenuComponent,
             BaseNavComponent,
             MainNavComponent,
@@ -101,7 +101,7 @@ export class CoreModule {
             DataModule,
             SharedModule,
             BrowserAnimationsModule, i7.TranslateModule], exports: [SharedModule, OverlayHostComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: CoreModule, providers: [registerDefaultFormInputs(), Title], imports: [BrowserModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CoreModule, providers: [registerDefaultFormInputs(), Title], imports: [BrowserModule,
             DataModule,
             SharedModule,
             BrowserAnimationsModule,
@@ -114,7 +114,7 @@ export class CoreModule {
                 compiler: { provide: TranslateCompiler, useClass: InjectableTranslateMessageFormatCompiler },
             }), SharedModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: CoreModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CoreModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [