@updevs/components 1.0.0-alpha.42 → 1.0.0-alpha.43
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -2
- package/assets/styles/_updevs.scss +12 -0
- package/esm2022/form/components/dynamic-field/dynamic-field.component.mjs +6 -3
- package/esm2022/form/models/enums/dynamic-field.type.mjs +2 -1
- package/esm2022/form/models/masked-input-field.model.mjs +2 -0
- package/esm2022/form/models/public-api.mjs +2 -1
- package/esm2022/layout/partials/header/header.component.mjs +7 -3
- package/esm2022/layout/partials/sidebar/sidebar.component.mjs +8 -4
- package/fesm2022/updevs-components-form.mjs +6 -2
- package/fesm2022/updevs-components-form.mjs.map +1 -1
- package/fesm2022/updevs-components-layout.mjs +12 -4
- package/fesm2022/updevs-components-layout.mjs.map +1 -1
- package/form/components/dynamic-field/dynamic-field.component.d.ts +2 -0
- package/form/models/enums/dynamic-field.type.d.ts +2 -1
- package/form/models/masked-input-field.model.d.ts +6 -0
- package/form/models/public-api.d.ts +1 -0
- package/layout/partials/header/header.component.d.ts +2 -0
- package/layout/partials/sidebar/sidebar.component.d.ts +2 -0
- package/package.json +13 -13
|
@@ -174,6 +174,7 @@ class HeaderComponent extends BaseComponent {
|
|
|
174
174
|
].slice(0, this.coreLayoutConfigService.config.numberOfLastNotificationsDisplayed);
|
|
175
175
|
});
|
|
176
176
|
this.textService = inject(TextService);
|
|
177
|
+
this.isSidebarMobileOpen = signal(false);
|
|
177
178
|
this.securityStorage = inject(SecurityStorage);
|
|
178
179
|
this.coreLayoutConfigService = inject(UpdCoreLayoutConfigService);
|
|
179
180
|
this.layoutService = inject(LayoutService);
|
|
@@ -225,12 +226,15 @@ class HeaderComponent extends BaseComponent {
|
|
|
225
226
|
removeNotification(notification) {
|
|
226
227
|
this.notificationsService.removeNotifications(notification.id);
|
|
227
228
|
}
|
|
229
|
+
toggleSidebarOnMobile() {
|
|
230
|
+
this.isSidebarMobileOpen.set(!this.isSidebarMobileOpen());
|
|
231
|
+
}
|
|
228
232
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: HeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
229
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: HeaderComponent, selector: "upd-header", inputs: { style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.classes" } }, viewQueries: [{ propertyName: "languageSwitcherRef", first: true, predicate: ["languageSwitcherBtn"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "notificationsRef", first: true, predicate: ["notificationsBtn"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "loggedUserRef", first: true, predicate: ["loggedUserBtn"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"container-xl\">\n <button class=\"navbar-toggler\" type=\"button\">\n <span class=\"navbar-toggler-icon\"></span>\n </button>\n <div class=\"navbar-nav flex-row order-md-last\">\n <div class=\"d-none d-md-flex me-3\">\n @if (!!config().showThemeSwitcher) {\n <div class=\"nav-item\">\n <upd-link [isNavigation]=\"true\" [customClasses]=\"['px-0']\" (clicked)=\"switchTheme()\">\n <upd-icon [tablerIcon]=\"nextThemeIcon()\"></upd-icon>\n </upd-link>\n </div>\n }\n @if (!!config().showLanguageSwitcher && languagesOptions().length > 0) {\n <div class=\"nav-item\">\n <upd-link [isNavigation]=\"true\" [customClasses]=\"['px-0']\" (clicked)=\"isLanguageSwitcherDropdownOpen=true\"\n #languageSwitcherBtn>\n <upd-icon tablerIcon=\"language\"></upd-icon>\n </upd-link>\n <upd-dropdown wrapperClasses=\"mt-1\" [isOpen]=\"isLanguageSwitcherDropdownOpen\"\n [dropdownReference]=\"languageSwitcherRef()\" [items]=\"languagesOptions()\" [shouldCloseOnOutsideClick]=\"true\"\n (isOpenChange)=\"isLanguageSwitcherDropdownOpen = $event\" (selectedItem)=\"switchLanguage($event)\">\n </upd-dropdown>\n </div>\n }\n @if (!!config().showNotifications && !!userInfo()) {\n <div class=\"nav-item dropdown d-none d-md-flex\">\n <upd-link [isNavigation]=\"true\" [customClasses]=\"['px-0']\" (clicked)=\"isNotificationsDropdownOpen = true\"\n #notificationsBtn>\n <upd-icon [tablerIcon]=\"currentNotificationsIcon()\"></upd-icon>\n @if (hasNewNotifications()) {\n <span class=\"badge bg-red\" [class.badge-blink]=\"shouldBlinkIfNewNotifications()\"></span>\n }\n </upd-link>\n <upd-dropdown wrapperClasses=\"mt-1 dropdown-menu-card\" [isOpen]=\"isNotificationsDropdownOpen\"\n [dropdownReference]=\"notificationsRef()\" [shouldCloseOnOutsideClick]=\"true\"\n (isOpenChange)=\"isNotificationsDropdownOpen = $event\" [minWidth]=\"400\" arrowType=\"right\">\n <div class=\"card\">\n <div class=\"card-header\">\n <h3 class=\"card-title\">{{ 'UpDevs.NotificationCenter.Title' | transloco }}</h3>\n </div>\n @for (notification of latestNotifications(); track notification) {\n <div class=\"list-group list-group-flush list-group-hoverable\" (click)=\"readNotification(notification)\">\n <div class=\"list-group-item\">\n <div class=\"row align-items-center\">\n <div class=\"col-auto\">\n @if (!!notification.dateRead) {\n <span class=\"status-dot d-block\"></span>\n } @else {\n <span class=\"status-dot status-dot-animated bg-primary d-block\"></span>\n }\n </div>\n <div class=\"col text-truncate\">\n <a href=\"javascript:void(0)\" class=\"text-body d-block\"\n [class.fw-bold]=\"!notification.dateRead\">\n {{ textService.getText(notification.title) }}\n </a>\n @if (!!notification.description) {\n <div class=\"d-block text-secondary text-truncate mt-n1\">\n {{ textService.getText(notification.description) }}\n </div>\n }\n </div>\n <div class=\"col-auto\">\n <upd-link [customClasses]=\"['list-group-item-actions']\"\n (clicked)=\"removeNotification(notification)\">\n <upd-icon tablerIcon=\"x\"></upd-icon>\n </upd-link>\n </div>\n </div>\n </div>\n </div>\n } @empty {\n <div class=\"empty\">\n <h1 class=\"text-body-tertiary\">{{ 'UpDevs.NotificationCenter.NoNotifications' | transloco }}</h1>\n </div>\n }\n </div>\n </upd-dropdown>\n </div>\n }\n </div>\n @if (!!config().showUserMenu && !!userInfo()) {\n <div class=\"nav-item dropdown\">\n <upd-link [isNavigation]=\"true\" [customClasses]=\"['px-0']\" (clicked)=\"isLoggedUserDropdownOpen = true\" #loggedUserBtn>\n @if (!!userInfo()!.avatar) {\n <span class=\"avatar avatar-sm\" style=\"background-image: url({{userInfo()?.avatar}})\"></span>\n }\n\n <div class=\"d-none d-xl-block
|
|
233
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: HeaderComponent, selector: "upd-header", inputs: { style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.classes" } }, viewQueries: [{ propertyName: "languageSwitcherRef", first: true, predicate: ["languageSwitcherBtn"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "notificationsRef", first: true, predicate: ["notificationsBtn"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "loggedUserRef", first: true, predicate: ["loggedUserBtn"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"container-xl\">\n <button class=\"navbar-toggler\" type=\"button\" (click)=\"toggleSidebarOnMobile()\" [attr.aria-expanded]=\"isSidebarMobileOpen()\">\n <span class=\"navbar-toggler-icon\"></span>\n </button>\n <div class=\"navbar-nav flex-row order-md-last\">\n <div class=\"d-none d-md-flex me-3\">\n @if (!!config().showThemeSwitcher) {\n <div class=\"nav-item\">\n <upd-link [isNavigation]=\"true\" [customClasses]=\"['px-0']\" (clicked)=\"switchTheme()\">\n <upd-icon [tablerIcon]=\"nextThemeIcon()\"></upd-icon>\n </upd-link>\n </div>\n }\n @if (!!config().showLanguageSwitcher && languagesOptions().length > 0) {\n <div class=\"nav-item\">\n <upd-link [isNavigation]=\"true\" [customClasses]=\"['px-0']\" (clicked)=\"isLanguageSwitcherDropdownOpen=true\"\n #languageSwitcherBtn>\n <upd-icon tablerIcon=\"language\"></upd-icon>\n </upd-link>\n <upd-dropdown wrapperClasses=\"mt-1\" [isOpen]=\"isLanguageSwitcherDropdownOpen\"\n [dropdownReference]=\"languageSwitcherRef()\" [items]=\"languagesOptions()\" [shouldCloseOnOutsideClick]=\"true\"\n (isOpenChange)=\"isLanguageSwitcherDropdownOpen = $event\" (selectedItem)=\"switchLanguage($event)\">\n </upd-dropdown>\n </div>\n }\n @if (!!config().showNotifications && !!userInfo()) {\n <div class=\"nav-item dropdown d-none d-md-flex\">\n <upd-link [isNavigation]=\"true\" [customClasses]=\"['px-0']\" (clicked)=\"isNotificationsDropdownOpen = true\"\n #notificationsBtn>\n <upd-icon [tablerIcon]=\"currentNotificationsIcon()\"></upd-icon>\n @if (hasNewNotifications()) {\n <span class=\"badge bg-red\" [class.badge-blink]=\"shouldBlinkIfNewNotifications()\"></span>\n }\n </upd-link>\n <upd-dropdown wrapperClasses=\"mt-1 dropdown-menu-card\" [isOpen]=\"isNotificationsDropdownOpen\"\n [dropdownReference]=\"notificationsRef()\" [shouldCloseOnOutsideClick]=\"true\"\n (isOpenChange)=\"isNotificationsDropdownOpen = $event\" [minWidth]=\"400\" arrowType=\"right\">\n <div class=\"card\">\n <div class=\"card-header\">\n <h3 class=\"card-title\">{{ 'UpDevs.NotificationCenter.Title' | transloco }}</h3>\n </div>\n @for (notification of latestNotifications(); track notification) {\n <div class=\"list-group list-group-flush list-group-hoverable\" (click)=\"readNotification(notification)\">\n <div class=\"list-group-item\">\n <div class=\"row align-items-center\">\n <div class=\"col-auto\">\n @if (!!notification.dateRead) {\n <span class=\"status-dot d-block\"></span>\n } @else {\n <span class=\"status-dot status-dot-animated bg-primary d-block\"></span>\n }\n </div>\n <div class=\"col text-truncate\">\n <a href=\"javascript:void(0)\" class=\"text-body d-block\"\n [class.fw-bold]=\"!notification.dateRead\">\n {{ textService.getText(notification.title) }}\n </a>\n @if (!!notification.description) {\n <div class=\"d-block text-secondary text-truncate mt-n1\">\n {{ textService.getText(notification.description) }}\n </div>\n }\n </div>\n <div class=\"col-auto\">\n <upd-link [customClasses]=\"['list-group-item-actions']\"\n (clicked)=\"removeNotification(notification)\">\n <upd-icon tablerIcon=\"x\"></upd-icon>\n </upd-link>\n </div>\n </div>\n </div>\n </div>\n } @empty {\n <div class=\"empty\">\n <h1 class=\"text-body-tertiary\">{{ 'UpDevs.NotificationCenter.NoNotifications' | transloco }}</h1>\n </div>\n }\n </div>\n </upd-dropdown>\n </div>\n }\n </div>\n @if (!!config().showUserMenu && !!userInfo()) {\n <div class=\"nav-item dropdown\">\n <upd-link [isNavigation]=\"true\" [customClasses]=\"['px-0']\" (clicked)=\"isLoggedUserDropdownOpen = true\" #loggedUserBtn>\n @if (!!userInfo()!.avatar) {\n <span class=\"avatar avatar-sm\" style=\"background-image: url({{userInfo()?.avatar}})\"></span>\n }\n\n <div class=\"d-none d-xl-block px-2\">\n <div>{{ userIdentification() }}</div>\n @if (!!userDescription()) {\n <div class=\"mt-1 small text-muted\">{{ userDescription() }}</div>\n }\n </div>\n </upd-link>\n @if (loggedUserOptions().length > 0) {\n <upd-dropdown wrapperClasses=\"mt-1\" [isOpen]=\"isLoggedUserDropdownOpen\" [dropdownReference]=\"loggedUserRef()\"\n [items]=\"loggedUserOptions()\" [shouldCloseOnOutsideClick]=\"true\" (selectedItem)=\"selectLoggedUserMenuItem($event)\"\n (isOpenChange)=\"isLoggedUserDropdownOpen = $event\" arrowType=\"right\">\n </upd-dropdown>\n }\n </div>\n }\n </div>\n @if (!!config().showSearchBar && !!userInfo()) {\n <div class=\"collapse navbar-collapse\" [class.show]=\"isSidebarMobileOpen()\">\n <div class=\"me-2\" [class.w-100]=\"config().shouldUseFullSearchBar\">\n <form autocomplete=\"off\" novalidate>\n <div class=\"input-icon\">\n <span class=\"input-icon-addon\">\n <upd-icon tablerIcon=\"search\"></upd-icon>\n </span>\n <input type=\"text\" value=\"\" class=\"form-control\" placeholder=\"{{'UpDevs.Header.Search' | transloco}}...\">\n </div>\n </form>\n </div>\n </div>\n } @else {\n <div></div>\n }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: i1$2.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "component", type: i2.DropdownComponent, selector: "upd-dropdown", inputs: ["items", "header", "isOpen", "shouldCloseOnOutsideClick", "arrowType", "wrapperClasses", "elementsExcludedFromOutsideClick", "minHeight", "maxHeight", "minWidth", "maxWidth", "dropdownReference", "dropdownReferencePosition", "textOverflowStrategy"], outputs: ["isOpenChange", "selectedItem", "checkboxChanged"] }, { kind: "component", type: i3.LinkComponent, selector: "upd-link", inputs: ["href", "target", "customClasses", "isNavigation"], outputs: ["clicked"] }, { kind: "pipe", type: i1$1.TranslocoPipe, name: "transloco" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
230
234
|
}
|
|
231
235
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: HeaderComponent, decorators: [{
|
|
232
236
|
type: Component,
|
|
233
|
-
args: [{ selector: 'upd-header', encapsulation: ViewEncapsulation.None, template: "<div class=\"container-xl\">\n <button class=\"navbar-toggler\" type=\"button\">\n <span class=\"navbar-toggler-icon\"></span>\n </button>\n <div class=\"navbar-nav flex-row order-md-last\">\n <div class=\"d-none d-md-flex me-3\">\n @if (!!config().showThemeSwitcher) {\n <div class=\"nav-item\">\n <upd-link [isNavigation]=\"true\" [customClasses]=\"['px-0']\" (clicked)=\"switchTheme()\">\n <upd-icon [tablerIcon]=\"nextThemeIcon()\"></upd-icon>\n </upd-link>\n </div>\n }\n @if (!!config().showLanguageSwitcher && languagesOptions().length > 0) {\n <div class=\"nav-item\">\n <upd-link [isNavigation]=\"true\" [customClasses]=\"['px-0']\" (clicked)=\"isLanguageSwitcherDropdownOpen=true\"\n #languageSwitcherBtn>\n <upd-icon tablerIcon=\"language\"></upd-icon>\n </upd-link>\n <upd-dropdown wrapperClasses=\"mt-1\" [isOpen]=\"isLanguageSwitcherDropdownOpen\"\n [dropdownReference]=\"languageSwitcherRef()\" [items]=\"languagesOptions()\" [shouldCloseOnOutsideClick]=\"true\"\n (isOpenChange)=\"isLanguageSwitcherDropdownOpen = $event\" (selectedItem)=\"switchLanguage($event)\">\n </upd-dropdown>\n </div>\n }\n @if (!!config().showNotifications && !!userInfo()) {\n <div class=\"nav-item dropdown d-none d-md-flex\">\n <upd-link [isNavigation]=\"true\" [customClasses]=\"['px-0']\" (clicked)=\"isNotificationsDropdownOpen = true\"\n #notificationsBtn>\n <upd-icon [tablerIcon]=\"currentNotificationsIcon()\"></upd-icon>\n @if (hasNewNotifications()) {\n <span class=\"badge bg-red\" [class.badge-blink]=\"shouldBlinkIfNewNotifications()\"></span>\n }\n </upd-link>\n <upd-dropdown wrapperClasses=\"mt-1 dropdown-menu-card\" [isOpen]=\"isNotificationsDropdownOpen\"\n [dropdownReference]=\"notificationsRef()\" [shouldCloseOnOutsideClick]=\"true\"\n (isOpenChange)=\"isNotificationsDropdownOpen = $event\" [minWidth]=\"400\" arrowType=\"right\">\n <div class=\"card\">\n <div class=\"card-header\">\n <h3 class=\"card-title\">{{ 'UpDevs.NotificationCenter.Title' | transloco }}</h3>\n </div>\n @for (notification of latestNotifications(); track notification) {\n <div class=\"list-group list-group-flush list-group-hoverable\" (click)=\"readNotification(notification)\">\n <div class=\"list-group-item\">\n <div class=\"row align-items-center\">\n <div class=\"col-auto\">\n @if (!!notification.dateRead) {\n <span class=\"status-dot d-block\"></span>\n } @else {\n <span class=\"status-dot status-dot-animated bg-primary d-block\"></span>\n }\n </div>\n <div class=\"col text-truncate\">\n <a href=\"javascript:void(0)\" class=\"text-body d-block\"\n [class.fw-bold]=\"!notification.dateRead\">\n {{ textService.getText(notification.title) }}\n </a>\n @if (!!notification.description) {\n <div class=\"d-block text-secondary text-truncate mt-n1\">\n {{ textService.getText(notification.description) }}\n </div>\n }\n </div>\n <div class=\"col-auto\">\n <upd-link [customClasses]=\"['list-group-item-actions']\"\n (clicked)=\"removeNotification(notification)\">\n <upd-icon tablerIcon=\"x\"></upd-icon>\n </upd-link>\n </div>\n </div>\n </div>\n </div>\n } @empty {\n <div class=\"empty\">\n <h1 class=\"text-body-tertiary\">{{ 'UpDevs.NotificationCenter.NoNotifications' | transloco }}</h1>\n </div>\n }\n </div>\n </upd-dropdown>\n </div>\n }\n </div>\n @if (!!config().showUserMenu && !!userInfo()) {\n <div class=\"nav-item dropdown\">\n <upd-link [isNavigation]=\"true\" [customClasses]=\"['px-0']\" (clicked)=\"isLoggedUserDropdownOpen = true\" #loggedUserBtn>\n @if (!!userInfo()!.avatar) {\n <span class=\"avatar avatar-sm\" style=\"background-image: url({{userInfo()?.avatar}})\"></span>\n }\n\n <div class=\"d-none d-xl-block
|
|
237
|
+
args: [{ selector: 'upd-header', encapsulation: ViewEncapsulation.None, template: "<div class=\"container-xl\">\n <button class=\"navbar-toggler\" type=\"button\" (click)=\"toggleSidebarOnMobile()\" [attr.aria-expanded]=\"isSidebarMobileOpen()\">\n <span class=\"navbar-toggler-icon\"></span>\n </button>\n <div class=\"navbar-nav flex-row order-md-last\">\n <div class=\"d-none d-md-flex me-3\">\n @if (!!config().showThemeSwitcher) {\n <div class=\"nav-item\">\n <upd-link [isNavigation]=\"true\" [customClasses]=\"['px-0']\" (clicked)=\"switchTheme()\">\n <upd-icon [tablerIcon]=\"nextThemeIcon()\"></upd-icon>\n </upd-link>\n </div>\n }\n @if (!!config().showLanguageSwitcher && languagesOptions().length > 0) {\n <div class=\"nav-item\">\n <upd-link [isNavigation]=\"true\" [customClasses]=\"['px-0']\" (clicked)=\"isLanguageSwitcherDropdownOpen=true\"\n #languageSwitcherBtn>\n <upd-icon tablerIcon=\"language\"></upd-icon>\n </upd-link>\n <upd-dropdown wrapperClasses=\"mt-1\" [isOpen]=\"isLanguageSwitcherDropdownOpen\"\n [dropdownReference]=\"languageSwitcherRef()\" [items]=\"languagesOptions()\" [shouldCloseOnOutsideClick]=\"true\"\n (isOpenChange)=\"isLanguageSwitcherDropdownOpen = $event\" (selectedItem)=\"switchLanguage($event)\">\n </upd-dropdown>\n </div>\n }\n @if (!!config().showNotifications && !!userInfo()) {\n <div class=\"nav-item dropdown d-none d-md-flex\">\n <upd-link [isNavigation]=\"true\" [customClasses]=\"['px-0']\" (clicked)=\"isNotificationsDropdownOpen = true\"\n #notificationsBtn>\n <upd-icon [tablerIcon]=\"currentNotificationsIcon()\"></upd-icon>\n @if (hasNewNotifications()) {\n <span class=\"badge bg-red\" [class.badge-blink]=\"shouldBlinkIfNewNotifications()\"></span>\n }\n </upd-link>\n <upd-dropdown wrapperClasses=\"mt-1 dropdown-menu-card\" [isOpen]=\"isNotificationsDropdownOpen\"\n [dropdownReference]=\"notificationsRef()\" [shouldCloseOnOutsideClick]=\"true\"\n (isOpenChange)=\"isNotificationsDropdownOpen = $event\" [minWidth]=\"400\" arrowType=\"right\">\n <div class=\"card\">\n <div class=\"card-header\">\n <h3 class=\"card-title\">{{ 'UpDevs.NotificationCenter.Title' | transloco }}</h3>\n </div>\n @for (notification of latestNotifications(); track notification) {\n <div class=\"list-group list-group-flush list-group-hoverable\" (click)=\"readNotification(notification)\">\n <div class=\"list-group-item\">\n <div class=\"row align-items-center\">\n <div class=\"col-auto\">\n @if (!!notification.dateRead) {\n <span class=\"status-dot d-block\"></span>\n } @else {\n <span class=\"status-dot status-dot-animated bg-primary d-block\"></span>\n }\n </div>\n <div class=\"col text-truncate\">\n <a href=\"javascript:void(0)\" class=\"text-body d-block\"\n [class.fw-bold]=\"!notification.dateRead\">\n {{ textService.getText(notification.title) }}\n </a>\n @if (!!notification.description) {\n <div class=\"d-block text-secondary text-truncate mt-n1\">\n {{ textService.getText(notification.description) }}\n </div>\n }\n </div>\n <div class=\"col-auto\">\n <upd-link [customClasses]=\"['list-group-item-actions']\"\n (clicked)=\"removeNotification(notification)\">\n <upd-icon tablerIcon=\"x\"></upd-icon>\n </upd-link>\n </div>\n </div>\n </div>\n </div>\n } @empty {\n <div class=\"empty\">\n <h1 class=\"text-body-tertiary\">{{ 'UpDevs.NotificationCenter.NoNotifications' | transloco }}</h1>\n </div>\n }\n </div>\n </upd-dropdown>\n </div>\n }\n </div>\n @if (!!config().showUserMenu && !!userInfo()) {\n <div class=\"nav-item dropdown\">\n <upd-link [isNavigation]=\"true\" [customClasses]=\"['px-0']\" (clicked)=\"isLoggedUserDropdownOpen = true\" #loggedUserBtn>\n @if (!!userInfo()!.avatar) {\n <span class=\"avatar avatar-sm\" style=\"background-image: url({{userInfo()?.avatar}})\"></span>\n }\n\n <div class=\"d-none d-xl-block px-2\">\n <div>{{ userIdentification() }}</div>\n @if (!!userDescription()) {\n <div class=\"mt-1 small text-muted\">{{ userDescription() }}</div>\n }\n </div>\n </upd-link>\n @if (loggedUserOptions().length > 0) {\n <upd-dropdown wrapperClasses=\"mt-1\" [isOpen]=\"isLoggedUserDropdownOpen\" [dropdownReference]=\"loggedUserRef()\"\n [items]=\"loggedUserOptions()\" [shouldCloseOnOutsideClick]=\"true\" (selectedItem)=\"selectLoggedUserMenuItem($event)\"\n (isOpenChange)=\"isLoggedUserDropdownOpen = $event\" arrowType=\"right\">\n </upd-dropdown>\n }\n </div>\n }\n </div>\n @if (!!config().showSearchBar && !!userInfo()) {\n <div class=\"collapse navbar-collapse\" [class.show]=\"isSidebarMobileOpen()\">\n <div class=\"me-2\" [class.w-100]=\"config().shouldUseFullSearchBar\">\n <form autocomplete=\"off\" novalidate>\n <div class=\"input-icon\">\n <span class=\"input-icon-addon\">\n <upd-icon tablerIcon=\"search\"></upd-icon>\n </span>\n <input type=\"text\" value=\"\" class=\"form-control\" placeholder=\"{{'UpDevs.Header.Search' | transloco}}...\">\n </div>\n </form>\n </div>\n </div>\n } @else {\n <div></div>\n }\n</div>\n" }]
|
|
234
238
|
}], propDecorators: { classes: [{
|
|
235
239
|
type: HostBinding,
|
|
236
240
|
args: ['class']
|
|
@@ -510,6 +514,7 @@ class SidebarComponent extends BaseComponent {
|
|
|
510
514
|
this.theme = 'dark';
|
|
511
515
|
this.menuItems = [];
|
|
512
516
|
this.textService = inject(TextService);
|
|
517
|
+
this.isSidebarMobileOpen = signal(false);
|
|
513
518
|
this.currentRoute = '';
|
|
514
519
|
this.menuItemsBackup = [];
|
|
515
520
|
this.router = inject(Router);
|
|
@@ -565,6 +570,9 @@ class SidebarComponent extends BaseComponent {
|
|
|
565
570
|
item.isLocked ? 'disabled' : ''
|
|
566
571
|
];
|
|
567
572
|
}
|
|
573
|
+
toggleSidebarOnMobile() {
|
|
574
|
+
this.isSidebarMobileOpen.set(!this.isSidebarMobileOpen());
|
|
575
|
+
}
|
|
568
576
|
findActiveNode(item, fullPath) {
|
|
569
577
|
if (item.fullPath === fullPath) {
|
|
570
578
|
return item;
|
|
@@ -675,11 +683,11 @@ class SidebarComponent extends BaseComponent {
|
|
|
675
683
|
return undefined;
|
|
676
684
|
}
|
|
677
685
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SidebarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
678
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: SidebarComponent, selector: "upd-sidebar", host: { properties: { "class": "this.wrapperClasses", "attr.data-bs-theme": "this.theme" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid\">\n <button class=\"navbar-toggler\" type=\"button\">\n <span class=\"navbar-toggler-icon\"></span>\n </button>\n <h1 class=\"navbar-brand navbar-brand-autodark\">\n <a href=\".\">\n <img width=\"110\" height=\"32\" class=\"navbar-brand-image upd-brand-logo\" />\n </a>\n </h1>\n <div class=\"collapse navbar-collapse\">\n <ul class=\"navbar-nav pt-lg-3\">\n @for (item of menuItems; track item.id) {\n <li class=\"nav-item\" [class.dropdown]=\"hasChildren(item)\" [class.active]=\"item.isActive\">\n <ng-container [ngTemplateOutlet]=\"itemTpl\" [ngTemplateOutletContext]=\"{menuItem: item}\"></ng-container>\n </li>\n }\n </ul>\n </div>\n</div>\n\n<ng-template #itemTpl let-item=\"menuItem\">\n <upd-link [isNavigation]=\"true\" (clicked)=\"onMenuItemClick(item)\"\n [customClasses]=\"getItemClasses(item, 'show', hasChildren(item) ? 'dropdown-toggle':'')\">\n <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: item}\"></ng-container>\n </upd-link>\n @if (hasChildren(item)) {\n <ng-container [ngTemplateOutlet]=\"childrenTpl\" [ngTemplateOutletContext]=\"{menuItem: item}\"></ng-container>\n }\n</ng-template>\n\n<ng-template #linkContent let-item=\"menuItem\">\n @if (!!item.icon) {\n <span class=\"nav-link-icon d-md-none d-lg-inline-block\">\n <upd-icon [model]=\"item.icon\"></upd-icon>\n </span>\n }\n <span class=\"nav-link-title\">{{ textService.getText(item.title) }}</span>\n @if (item.isLocked) {\n <upd-icon class=\"ms-auto\" [model]=\"{tablerIcon: 'lock'}\"></upd-icon>\n }\n</ng-template>\n\n<ng-template #childrenTpl let-item=\"menuItem\">\n <div class=\"dropdown-menu\" [class.show]=\"item.isActive\">\n <div class=\"dropdown-menu-columns\">\n <div class=\"dropdown-menu-column\">\n @for (child of asMenuItem(item).children; track child.id) {\n @if (!hasChildren(child)) {\n <upd-link (clicked)=\"onMenuItemClick(child)\" [customClasses]=\"getItemClasses(child, 'active', 'dropdown-item')\">\n <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: child}\"></ng-container>\n </upd-link>\n } @else {\n <div class=\"dropend\">\n <upd-link (clicked)=\"onMenuItemClick(child)\" [customClasses]=\"getItemClasses(child, 'active', 'dropdown-item')\">\n <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: child}\"></ng-container>\n </upd-link>\n <div class=\"dropdown-menu\" [class.show]=\"child.isActive\">\n @for (grandchild of child.children; track grandchild) {\n <upd-link (clicked)=\"onMenuItemClick(grandchild)\"\n [customClasses]=\"getItemClasses(grandchild, 'active', 'dropdown-item')\">\n <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: grandchild}\">\n </ng-container>\n </upd-link>\n }\n </div>\n </div>\n }\n }\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$2.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "component", type: i3.LinkComponent, selector: "upd-link", inputs: ["href", "target", "customClasses", "isNavigation"], outputs: ["clicked"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
686
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: SidebarComponent, selector: "upd-sidebar", host: { properties: { "class": "this.wrapperClasses", "attr.data-bs-theme": "this.theme" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid\">\n <button class=\"navbar-toggler\" type=\"button\" (click)=\"toggleSidebarOnMobile()\" [attr.aria-expanded]=\"isSidebarMobileOpen()\">\n <span class=\"navbar-toggler-icon\"></span>\n </button>\n <h1 class=\"navbar-brand navbar-brand-autodark\">\n <a href=\".\">\n <img width=\"110\" height=\"32\" class=\"navbar-brand-image upd-brand-logo\" />\n </a>\n </h1>\n <div class=\"collapse navbar-collapse\" [class.show]=\"isSidebarMobileOpen()\">\n <ul class=\"navbar-nav pt-lg-3\">\n @for (item of menuItems; track item.id) {\n <li class=\"nav-item\" [class.dropdown]=\"hasChildren(item)\" [class.active]=\"item.isActive\">\n <ng-container [ngTemplateOutlet]=\"itemTpl\" [ngTemplateOutletContext]=\"{menuItem: item}\"></ng-container>\n </li>\n }\n </ul>\n </div>\n</div>\n\n<ng-template #itemTpl let-item=\"menuItem\">\n <upd-link [isNavigation]=\"true\" (clicked)=\"onMenuItemClick(item)\"\n [customClasses]=\"getItemClasses(item, 'show', hasChildren(item) ? 'dropdown-toggle':'')\">\n <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: item}\"></ng-container>\n </upd-link>\n @if (hasChildren(item)) {\n <ng-container [ngTemplateOutlet]=\"childrenTpl\" [ngTemplateOutletContext]=\"{menuItem: item}\"></ng-container>\n }\n</ng-template>\n\n<ng-template #linkContent let-item=\"menuItem\">\n @if (!!item.icon) {\n <span class=\"nav-link-icon d-md-none d-lg-inline-block\">\n <upd-icon [model]=\"item.icon\"></upd-icon>\n </span>\n }\n <span class=\"nav-link-title\">{{ textService.getText(item.title) }}</span>\n @if (item.isLocked) {\n <upd-icon class=\"ms-auto\" [model]=\"{tablerIcon: 'lock'}\"></upd-icon>\n }\n</ng-template>\n\n<ng-template #childrenTpl let-item=\"menuItem\">\n <div class=\"dropdown-menu\" [class.show]=\"item.isActive\">\n <div class=\"dropdown-menu-columns\">\n <div class=\"dropdown-menu-column\">\n @for (child of asMenuItem(item).children; track child.id) {\n @if (!hasChildren(child)) {\n <upd-link (clicked)=\"onMenuItemClick(child)\" [customClasses]=\"getItemClasses(child, 'active', 'dropdown-item')\">\n <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: child}\"></ng-container>\n </upd-link>\n } @else {\n <div class=\"dropend\">\n <upd-link (clicked)=\"onMenuItemClick(child)\" [customClasses]=\"getItemClasses(child, 'active', 'dropdown-item')\">\n <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: child}\"></ng-container>\n </upd-link>\n <div class=\"dropdown-menu\" [class.show]=\"child.isActive\">\n @for (grandchild of child.children; track grandchild) {\n <upd-link (clicked)=\"onMenuItemClick(grandchild)\"\n [customClasses]=\"getItemClasses(grandchild, 'active', 'dropdown-item')\">\n <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: grandchild}\">\n </ng-container>\n </upd-link>\n }\n </div>\n </div>\n }\n }\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$2.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "component", type: i3.LinkComponent, selector: "upd-link", inputs: ["href", "target", "customClasses", "isNavigation"], outputs: ["clicked"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
679
687
|
}
|
|
680
688
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SidebarComponent, decorators: [{
|
|
681
689
|
type: Component,
|
|
682
|
-
args: [{ selector: 'upd-sidebar', encapsulation: ViewEncapsulation.None, template: "<div class=\"container-fluid\">\n <button class=\"navbar-toggler\" type=\"button\">\n <span class=\"navbar-toggler-icon\"></span>\n </button>\n <h1 class=\"navbar-brand navbar-brand-autodark\">\n <a href=\".\">\n <img width=\"110\" height=\"32\" class=\"navbar-brand-image upd-brand-logo\" />\n </a>\n </h1>\n <div class=\"collapse navbar-collapse\">\n <ul class=\"navbar-nav pt-lg-3\">\n @for (item of menuItems; track item.id) {\n <li class=\"nav-item\" [class.dropdown]=\"hasChildren(item)\" [class.active]=\"item.isActive\">\n <ng-container [ngTemplateOutlet]=\"itemTpl\" [ngTemplateOutletContext]=\"{menuItem: item}\"></ng-container>\n </li>\n }\n </ul>\n </div>\n</div>\n\n<ng-template #itemTpl let-item=\"menuItem\">\n <upd-link [isNavigation]=\"true\" (clicked)=\"onMenuItemClick(item)\"\n [customClasses]=\"getItemClasses(item, 'show', hasChildren(item) ? 'dropdown-toggle':'')\">\n <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: item}\"></ng-container>\n </upd-link>\n @if (hasChildren(item)) {\n <ng-container [ngTemplateOutlet]=\"childrenTpl\" [ngTemplateOutletContext]=\"{menuItem: item}\"></ng-container>\n }\n</ng-template>\n\n<ng-template #linkContent let-item=\"menuItem\">\n @if (!!item.icon) {\n <span class=\"nav-link-icon d-md-none d-lg-inline-block\">\n <upd-icon [model]=\"item.icon\"></upd-icon>\n </span>\n }\n <span class=\"nav-link-title\">{{ textService.getText(item.title) }}</span>\n @if (item.isLocked) {\n <upd-icon class=\"ms-auto\" [model]=\"{tablerIcon: 'lock'}\"></upd-icon>\n }\n</ng-template>\n\n<ng-template #childrenTpl let-item=\"menuItem\">\n <div class=\"dropdown-menu\" [class.show]=\"item.isActive\">\n <div class=\"dropdown-menu-columns\">\n <div class=\"dropdown-menu-column\">\n @for (child of asMenuItem(item).children; track child.id) {\n @if (!hasChildren(child)) {\n <upd-link (clicked)=\"onMenuItemClick(child)\" [customClasses]=\"getItemClasses(child, 'active', 'dropdown-item')\">\n <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: child}\"></ng-container>\n </upd-link>\n } @else {\n <div class=\"dropend\">\n <upd-link (clicked)=\"onMenuItemClick(child)\" [customClasses]=\"getItemClasses(child, 'active', 'dropdown-item')\">\n <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: child}\"></ng-container>\n </upd-link>\n <div class=\"dropdown-menu\" [class.show]=\"child.isActive\">\n @for (grandchild of child.children; track grandchild) {\n <upd-link (clicked)=\"onMenuItemClick(grandchild)\"\n [customClasses]=\"getItemClasses(grandchild, 'active', 'dropdown-item')\">\n <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: grandchild}\">\n </ng-container>\n </upd-link>\n }\n </div>\n </div>\n }\n }\n </div>\n </div>\n </div>\n</ng-template>\n" }]
|
|
690
|
+
args: [{ selector: 'upd-sidebar', encapsulation: ViewEncapsulation.None, template: "<div class=\"container-fluid\">\n <button class=\"navbar-toggler\" type=\"button\" (click)=\"toggleSidebarOnMobile()\" [attr.aria-expanded]=\"isSidebarMobileOpen()\">\n <span class=\"navbar-toggler-icon\"></span>\n </button>\n <h1 class=\"navbar-brand navbar-brand-autodark\">\n <a href=\".\">\n <img width=\"110\" height=\"32\" class=\"navbar-brand-image upd-brand-logo\" />\n </a>\n </h1>\n <div class=\"collapse navbar-collapse\" [class.show]=\"isSidebarMobileOpen()\">\n <ul class=\"navbar-nav pt-lg-3\">\n @for (item of menuItems; track item.id) {\n <li class=\"nav-item\" [class.dropdown]=\"hasChildren(item)\" [class.active]=\"item.isActive\">\n <ng-container [ngTemplateOutlet]=\"itemTpl\" [ngTemplateOutletContext]=\"{menuItem: item}\"></ng-container>\n </li>\n }\n </ul>\n </div>\n</div>\n\n<ng-template #itemTpl let-item=\"menuItem\">\n <upd-link [isNavigation]=\"true\" (clicked)=\"onMenuItemClick(item)\"\n [customClasses]=\"getItemClasses(item, 'show', hasChildren(item) ? 'dropdown-toggle':'')\">\n <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: item}\"></ng-container>\n </upd-link>\n @if (hasChildren(item)) {\n <ng-container [ngTemplateOutlet]=\"childrenTpl\" [ngTemplateOutletContext]=\"{menuItem: item}\"></ng-container>\n }\n</ng-template>\n\n<ng-template #linkContent let-item=\"menuItem\">\n @if (!!item.icon) {\n <span class=\"nav-link-icon d-md-none d-lg-inline-block\">\n <upd-icon [model]=\"item.icon\"></upd-icon>\n </span>\n }\n <span class=\"nav-link-title\">{{ textService.getText(item.title) }}</span>\n @if (item.isLocked) {\n <upd-icon class=\"ms-auto\" [model]=\"{tablerIcon: 'lock'}\"></upd-icon>\n }\n</ng-template>\n\n<ng-template #childrenTpl let-item=\"menuItem\">\n <div class=\"dropdown-menu\" [class.show]=\"item.isActive\">\n <div class=\"dropdown-menu-columns\">\n <div class=\"dropdown-menu-column\">\n @for (child of asMenuItem(item).children; track child.id) {\n @if (!hasChildren(child)) {\n <upd-link (clicked)=\"onMenuItemClick(child)\" [customClasses]=\"getItemClasses(child, 'active', 'dropdown-item')\">\n <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: child}\"></ng-container>\n </upd-link>\n } @else {\n <div class=\"dropend\">\n <upd-link (clicked)=\"onMenuItemClick(child)\" [customClasses]=\"getItemClasses(child, 'active', 'dropdown-item')\">\n <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: child}\"></ng-container>\n </upd-link>\n <div class=\"dropdown-menu\" [class.show]=\"child.isActive\">\n @for (grandchild of child.children; track grandchild) {\n <upd-link (clicked)=\"onMenuItemClick(grandchild)\"\n [customClasses]=\"getItemClasses(grandchild, 'active', 'dropdown-item')\">\n <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: grandchild}\">\n </ng-container>\n </upd-link>\n }\n </div>\n </div>\n }\n }\n </div>\n </div>\n </div>\n</ng-template>\n" }]
|
|
683
691
|
}], propDecorators: { wrapperClasses: [{
|
|
684
692
|
type: HostBinding,
|
|
685
693
|
args: ['class']
|