@zambon-dev/library 1.1.0 → 1.2.0
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/CHANGELOG.md
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
All notable changes to `@zambon-dev/library` are documented in this file.
|
|
4
|
+
|
|
5
|
+
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
|
|
6
|
+
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
|
+
|
|
8
|
+
> **Upgrading?** Each release lists what changed and, under
|
|
9
|
+
> **⚠ Breaking Changes / Migration**, the concrete steps required to move to that version.
|
|
10
|
+
> When no migration is needed, that subsection is omitted.
|
|
11
|
+
|
|
12
|
+
## [Unreleased]
|
|
13
|
+
|
|
14
|
+
### Added
|
|
15
|
+
|
|
16
|
+
### Changed
|
|
17
|
+
|
|
18
|
+
### Deprecated
|
|
19
|
+
|
|
20
|
+
### Removed
|
|
21
|
+
|
|
22
|
+
### Fixed
|
|
23
|
+
|
|
24
|
+
### ⚠ Breaking Changes / Migration
|
|
25
|
+
|
|
26
|
+
## [1.2.0] - 2026-07-24
|
|
27
|
+
|
|
28
|
+
### Added
|
|
29
|
+
|
|
30
|
+
- `SidebarComponent` now renders its own collapse/expand toggle: a light circular chevron "handle"
|
|
31
|
+
that straddles the sidebar's right edge (`angle-left` to collapse when expanded, `angle-right` to
|
|
32
|
+
expand when collapsed), matching the conventional rail-collapse affordance.
|
|
33
|
+
- `SidebarComponent` now has a content-projection slot (`<ng-content>`) rendered as a footer at the
|
|
34
|
+
bottom of the sidebar — for extra elements after the menu (e.g. an app version). It is hidden when
|
|
35
|
+
the rail is collapsed and collapses entirely when nothing is projected.
|
|
36
|
+
|
|
37
|
+
### Changed
|
|
38
|
+
|
|
39
|
+
- `SidebarComponent` no longer renders the logo or the user-profile header — it now shows only the
|
|
40
|
+
navigation toggle and menu. Application branding and user identity are expected to live in the top
|
|
41
|
+
bar (`shared-top-bar` in `@shared`).
|
|
42
|
+
- Sidebar menu items now use an on-palette hover surface (a subtle light overlay) instead of the
|
|
43
|
+
previous off-palette `slate-700`.
|
|
44
|
+
|
|
45
|
+
### ⚠ Breaking Changes / Migration
|
|
46
|
+
|
|
47
|
+
If you relied on the sidebar's logo (`SidebarConfigs.logoCollapsedPath` / `logoExpandedPath`) or its
|
|
48
|
+
user profile (`SidebarService.getUserProfile()`), move that presentation to the top bar. Those
|
|
49
|
+
config options and the `getUserProfile()` method still exist but are no longer consumed by
|
|
50
|
+
`SidebarComponent`.
|
|
51
|
+
|
|
52
|
+
## [1.3.0] - 2026-05-01
|
|
53
|
+
|
|
54
|
+
- Baseline release: the changelog starts being tracked from this version. Earlier history is
|
|
55
|
+
available via [GitHub Releases](https://github.com/RicardoZambon/ZLibraries/releases) and the
|
|
56
|
+
`library-v*` tags.
|
|
57
|
+
|
|
58
|
+
[Unreleased]: https://github.com/RicardoZambon/ZLibraries/compare/library-v1.2.0...HEAD
|
|
59
|
+
[1.2.0]: https://github.com/RicardoZambon/ZLibraries/releases/tag/library-v1.2.0
|
|
60
|
+
[1.3.0]: https://github.com/RicardoZambon/ZLibraries/releases/tag/library-v1.3.0
|
|
@@ -3191,7 +3191,7 @@ class SidebarItemComponent extends BaseComponent {
|
|
|
3191
3191
|
this._childHeight = this.getChildHeight(this.menu);
|
|
3192
3192
|
}
|
|
3193
3193
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SidebarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3194
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: SidebarItemComponent, isStandalone: true, selector: "lib-sidebar-item", inputs: { menu: "menu", level: "level" }, host: { properties: { "class.active": "isActive", "class.expanded": "!isCollapsed", "class.first-level": "level === 0", "class.selected": "isSelected" } }, viewQueries: [{ propertyName: "menuContainer", first: true, predicate: ["menuContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<li>\n <div #menuContainer\n [class.failed]=\"hasFailed\"\n [class.loading]=\"isLoading\"\n [class.parent]=\"isParent\"\n [class.selected]=\"isSelected\"\n (click)=\"onSelectItem()\">\n <a>\n <i *ngIf=\"hasIcon\" class=\"fa-solid fa-fw {{ menu.icon }}\"></i>\n <span>{{ menu.label | translate }}</span>\n </a>\n\n <div class=\"loading\" *ngIf=\"isParent\">\n <svg class=\"animate-spin text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n </svg>\n </div>\n </div>\n\n <ul *ngIf=\"isParent\"\n [class.open]=\"isSelected\"\n [ngStyle]=\"{\n 'height.px': childHeight,\n 'max-height.px': childHeight\n }\">\n <lib-sidebar-item *ngFor=\"let child of menu.children; trackBy: trackByFn\"\n [menu]=\"child\"\n [level]=\"level+1\">\n </lib-sidebar-item>\n </ul>\n</li>", styles: ["@charset \"UTF-8\";:host{position:relative;display:block}@media (max-width: 767px){:host:not(.active) li>ul{height:0px!important}}@media (min-width: 768px){:host:not(.expanded):not(.active) li>ul{height:0px!important}:host.expanded li>div.parent:not(.loading):after{opacity:1}:host.expanded li>div.parent a{padding-right:2rem}:host.expanded li>div.parent.loading .loading{opacity:1!important}:host.expanded li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.expanded li>div a span{opacity:1}}:host.active li>div.parent:not(.loading):after{opacity:1}:host.active li>div.parent a{padding-right:2rem}:host.active li>div.parent.loading .loading{opacity:1!important}:host.active li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.active li>div a span{opacity:1}:host.expanded li .selected:not(.loading).parent:after,:host.active li .selected:not(.loading).parent:after{--tw-rotate: -90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host.first-level:before{position:absolute;top:0;left:0;bottom:0;z-index:10;width:0px;--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1));--tw-content: \"\";content:var(--tw-content);transition-property:width;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:width}:host.first-level.selected:before{width:4px}li{position:relative;height:100%}li>div{position:relative;overflow:hidden;height:var(--sidebar-item-height);line-height:var(--sidebar-item-height)}li>div:hover{
|
|
3194
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: SidebarItemComponent, isStandalone: true, selector: "lib-sidebar-item", inputs: { menu: "menu", level: "level" }, host: { properties: { "class.active": "isActive", "class.expanded": "!isCollapsed", "class.first-level": "level === 0", "class.selected": "isSelected" } }, viewQueries: [{ propertyName: "menuContainer", first: true, predicate: ["menuContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<li>\n <div #menuContainer\n [class.failed]=\"hasFailed\"\n [class.loading]=\"isLoading\"\n [class.parent]=\"isParent\"\n [class.selected]=\"isSelected\"\n (click)=\"onSelectItem()\">\n <a>\n <i *ngIf=\"hasIcon\" class=\"fa-solid fa-fw {{ menu.icon }}\"></i>\n <span>{{ menu.label | translate }}</span>\n </a>\n\n <div class=\"loading\" *ngIf=\"isParent\">\n <svg class=\"animate-spin text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n </svg>\n </div>\n </div>\n\n <ul *ngIf=\"isParent\"\n [class.open]=\"isSelected\"\n [ngStyle]=\"{\n 'height.px': childHeight,\n 'max-height.px': childHeight\n }\">\n <lib-sidebar-item *ngFor=\"let child of menu.children; trackBy: trackByFn\"\n [menu]=\"child\"\n [level]=\"level+1\">\n </lib-sidebar-item>\n </ul>\n</li>", styles: ["@charset \"UTF-8\";:host{position:relative;display:block}@media (max-width: 767px){:host:not(.active) li>ul{height:0px!important}}@media (min-width: 768px){:host:not(.expanded):not(.active) li>ul{height:0px!important}:host.expanded li>div.parent:not(.loading):after{opacity:1}:host.expanded li>div.parent a{padding-right:2rem}:host.expanded li>div.parent.loading .loading{opacity:1!important}:host.expanded li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.expanded li>div a span{opacity:1}}:host.active li>div.parent:not(.loading):after{opacity:1}:host.active li>div.parent a{padding-right:2rem}:host.active li>div.parent.loading .loading{opacity:1!important}:host.active li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.active li>div a span{opacity:1}:host.expanded li .selected:not(.loading).parent:after,:host.active li .selected:not(.loading).parent:after{--tw-rotate: -90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host.first-level:before{position:absolute;top:0;left:0;bottom:0;z-index:10;width:0px;--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1));--tw-content: \"\";content:var(--tw-content);transition-property:width;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:width}:host.first-level.selected:before{width:4px}li{position:relative;height:100%}li>div{position:relative;overflow:hidden;height:var(--sidebar-item-height);line-height:var(--sidebar-item-height)}li>div:hover{background-color:#ffffff1a}li>div.parent:after{position:absolute;top:0;right:.75rem;width:10px;font-weight:800;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;font-family:\"Font Awesome 6 Free\";transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div.parent:not(.failed):after{--tw-content: \"\\f104\";content:var(--tw-content)}li>div.parent.failed:after{right:1rem;--tw-content: \"\\f071\";content:var(--tw-content)}li>div a{display:block;height:100%;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.75rem;padding-right:.75rem;text-align:left;width:var(--sidebar-expanded-width)}li>div a i{margin-right:.5rem;font-size:1.25rem;line-height:1.75rem;transition-property:font-size,line-height,margin-left;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:var(--sidebar-icon-collapsed-margin);transition-duration:var(--sidebar-animation-duration);will-change:font-size,line-height,margin-left}li>div a span{text-overflow:ellipsis;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div .loading{position:absolute;top:0;right:.55rem;height:100%;width:1rem;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div .loading svg{height:100%;width:100%}li>ul{overflow:hidden;transition-property:height,max-height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:height,max-height}li>ul a{padding-left:1.25rem}\n"], dependencies: [{ kind: "component", type: SidebarItemComponent, selector: "lib-sidebar-item", inputs: ["menu", "level"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
3195
3195
|
}
|
|
3196
3196
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SidebarItemComponent, decorators: [{
|
|
3197
3197
|
type: Component,
|
|
@@ -3205,7 +3205,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
|
|
|
3205
3205
|
'[class.expanded]': '!isCollapsed',
|
|
3206
3206
|
'[class.first-level]': 'level === 0',
|
|
3207
3207
|
'[class.selected]': 'isSelected',
|
|
3208
|
-
}, template: "<li>\n <div #menuContainer\n [class.failed]=\"hasFailed\"\n [class.loading]=\"isLoading\"\n [class.parent]=\"isParent\"\n [class.selected]=\"isSelected\"\n (click)=\"onSelectItem()\">\n <a>\n <i *ngIf=\"hasIcon\" class=\"fa-solid fa-fw {{ menu.icon }}\"></i>\n <span>{{ menu.label | translate }}</span>\n </a>\n\n <div class=\"loading\" *ngIf=\"isParent\">\n <svg class=\"animate-spin text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n </svg>\n </div>\n </div>\n\n <ul *ngIf=\"isParent\"\n [class.open]=\"isSelected\"\n [ngStyle]=\"{\n 'height.px': childHeight,\n 'max-height.px': childHeight\n }\">\n <lib-sidebar-item *ngFor=\"let child of menu.children; trackBy: trackByFn\"\n [menu]=\"child\"\n [level]=\"level+1\">\n </lib-sidebar-item>\n </ul>\n</li>", styles: ["@charset \"UTF-8\";:host{position:relative;display:block}@media (max-width: 767px){:host:not(.active) li>ul{height:0px!important}}@media (min-width: 768px){:host:not(.expanded):not(.active) li>ul{height:0px!important}:host.expanded li>div.parent:not(.loading):after{opacity:1}:host.expanded li>div.parent a{padding-right:2rem}:host.expanded li>div.parent.loading .loading{opacity:1!important}:host.expanded li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.expanded li>div a span{opacity:1}}:host.active li>div.parent:not(.loading):after{opacity:1}:host.active li>div.parent a{padding-right:2rem}:host.active li>div.parent.loading .loading{opacity:1!important}:host.active li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.active li>div a span{opacity:1}:host.expanded li .selected:not(.loading).parent:after,:host.active li .selected:not(.loading).parent:after{--tw-rotate: -90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host.first-level:before{position:absolute;top:0;left:0;bottom:0;z-index:10;width:0px;--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1));--tw-content: \"\";content:var(--tw-content);transition-property:width;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:width}:host.first-level.selected:before{width:4px}li{position:relative;height:100%}li>div{position:relative;overflow:hidden;height:var(--sidebar-item-height);line-height:var(--sidebar-item-height)}li>div:hover{
|
|
3208
|
+
}, template: "<li>\n <div #menuContainer\n [class.failed]=\"hasFailed\"\n [class.loading]=\"isLoading\"\n [class.parent]=\"isParent\"\n [class.selected]=\"isSelected\"\n (click)=\"onSelectItem()\">\n <a>\n <i *ngIf=\"hasIcon\" class=\"fa-solid fa-fw {{ menu.icon }}\"></i>\n <span>{{ menu.label | translate }}</span>\n </a>\n\n <div class=\"loading\" *ngIf=\"isParent\">\n <svg class=\"animate-spin text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n </svg>\n </div>\n </div>\n\n <ul *ngIf=\"isParent\"\n [class.open]=\"isSelected\"\n [ngStyle]=\"{\n 'height.px': childHeight,\n 'max-height.px': childHeight\n }\">\n <lib-sidebar-item *ngFor=\"let child of menu.children; trackBy: trackByFn\"\n [menu]=\"child\"\n [level]=\"level+1\">\n </lib-sidebar-item>\n </ul>\n</li>", styles: ["@charset \"UTF-8\";:host{position:relative;display:block}@media (max-width: 767px){:host:not(.active) li>ul{height:0px!important}}@media (min-width: 768px){:host:not(.expanded):not(.active) li>ul{height:0px!important}:host.expanded li>div.parent:not(.loading):after{opacity:1}:host.expanded li>div.parent a{padding-right:2rem}:host.expanded li>div.parent.loading .loading{opacity:1!important}:host.expanded li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.expanded li>div a span{opacity:1}}:host.active li>div.parent:not(.loading):after{opacity:1}:host.active li>div.parent a{padding-right:2rem}:host.active li>div.parent.loading .loading{opacity:1!important}:host.active li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.active li>div a span{opacity:1}:host.expanded li .selected:not(.loading).parent:after,:host.active li .selected:not(.loading).parent:after{--tw-rotate: -90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host.first-level:before{position:absolute;top:0;left:0;bottom:0;z-index:10;width:0px;--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1));--tw-content: \"\";content:var(--tw-content);transition-property:width;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:width}:host.first-level.selected:before{width:4px}li{position:relative;height:100%}li>div{position:relative;overflow:hidden;height:var(--sidebar-item-height);line-height:var(--sidebar-item-height)}li>div:hover{background-color:#ffffff1a}li>div.parent:after{position:absolute;top:0;right:.75rem;width:10px;font-weight:800;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;font-family:\"Font Awesome 6 Free\";transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div.parent:not(.failed):after{--tw-content: \"\\f104\";content:var(--tw-content)}li>div.parent.failed:after{right:1rem;--tw-content: \"\\f071\";content:var(--tw-content)}li>div a{display:block;height:100%;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.75rem;padding-right:.75rem;text-align:left;width:var(--sidebar-expanded-width)}li>div a i{margin-right:.5rem;font-size:1.25rem;line-height:1.75rem;transition-property:font-size,line-height,margin-left;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:var(--sidebar-icon-collapsed-margin);transition-duration:var(--sidebar-animation-duration);will-change:font-size,line-height,margin-left}li>div a span{text-overflow:ellipsis;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div .loading{position:absolute;top:0;right:.55rem;height:100%;width:1rem;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div .loading svg{height:100%;width:100%}li>ul{overflow:hidden;transition-property:height,max-height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:height,max-height}li>ul a{padding-left:1.25rem}\n"] }]
|
|
3209
3209
|
}], ctorParameters: () => [], propDecorators: { menuContainer: [{
|
|
3210
3210
|
type: ViewChild,
|
|
3211
3211
|
args: ['menuContainer']
|
|
@@ -3252,18 +3252,12 @@ class SidebarComponent extends BaseComponent {
|
|
|
3252
3252
|
sidebarConfigs = inject(SIDEBAR_CONFIGS);
|
|
3253
3253
|
configErrorText = this.sidebarConfigs.errorText;
|
|
3254
3254
|
configLoadingText = this.sidebarConfigs.loadingText;
|
|
3255
|
-
configLogoCollapsedPath = this.sidebarConfigs.logoCollapsedPath;
|
|
3256
|
-
configLogoExpandedPath = this.sidebarConfigs.logoExpandedPath;
|
|
3257
3255
|
hasFailed = false;
|
|
3258
3256
|
menus = [];
|
|
3259
|
-
profile;
|
|
3260
3257
|
sidebarService = inject(SidebarService);
|
|
3261
3258
|
wasClickedOutside = false;
|
|
3262
3259
|
//#endregion
|
|
3263
3260
|
//#region Properties
|
|
3264
|
-
get hasProfileImage() {
|
|
3265
|
-
return this.isProfileLoaded && (this.profile.image?.length ?? 0) > 0;
|
|
3266
|
-
}
|
|
3267
3261
|
get isActive() {
|
|
3268
3262
|
return this.sidebarService.isActive;
|
|
3269
3263
|
}
|
|
@@ -3273,9 +3267,6 @@ class SidebarComponent extends BaseComponent {
|
|
|
3273
3267
|
get isLoading() {
|
|
3274
3268
|
return this.menus.length === 0;
|
|
3275
3269
|
}
|
|
3276
|
-
get isProfileLoaded() {
|
|
3277
|
-
return !!this.profile;
|
|
3278
|
-
}
|
|
3279
3270
|
//#endregion
|
|
3280
3271
|
//#region Constructor and Angular life cycle methods
|
|
3281
3272
|
constructor() {
|
|
@@ -3294,7 +3285,6 @@ class SidebarComponent extends BaseComponent {
|
|
|
3294
3285
|
next: (menus) => this.menus = menus,
|
|
3295
3286
|
error: () => this.hasFailed = true
|
|
3296
3287
|
});
|
|
3297
|
-
this.profile = this.sidebarService.getUserProfile();
|
|
3298
3288
|
}
|
|
3299
3289
|
//#endregion
|
|
3300
3290
|
//#region Event handlers
|
|
@@ -3325,7 +3315,7 @@ class SidebarComponent extends BaseComponent {
|
|
|
3325
3315
|
|| this.sidebarService.isCollapsed;
|
|
3326
3316
|
}
|
|
3327
3317
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3328
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: SidebarComponent, isStandalone: true, selector: "lib-sidebar", host: { listeners: { "body:mousedown": "onBodyMouseDown($event)", "body:mouseup": "onBodyMouseUp($event)", "document:keydown.escape": "onDocumentKeyDown($event)", "window:resize": "onResize($event)" }, properties: { "class.active": "isActive", "class.expanded": "!isCollapsed" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"
|
|
3318
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: SidebarComponent, isStandalone: true, selector: "lib-sidebar", host: { listeners: { "body:mousedown": "onBodyMouseDown($event)", "body:mouseup": "onBodyMouseUp($event)", "document:keydown.escape": "onDocumentKeyDown($event)", "window:resize": "onResize($event)" }, properties: { "class.active": "isActive", "class.expanded": "!isCollapsed" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"sidebar-toolbar\">\n <button type=\"button\" class=\"sidebar-toggle\" (click)=\"collapse()\" aria-label=\"Toggle navigation\">\n <i class=\"fa-solid\"\n [class.fa-angle-left]=\"!isCollapsed\"\n [class.fa-angle-right]=\"isCollapsed\"></i>\n </button>\n</div>\n\n<nav>\n <ul *ngIf=\"!isLoading; else loading\">\n <lib-sidebar-item *ngFor=\"let menu of menus; trackBy: trackByFn\"\n [menu]=\"menu\">\n </lib-sidebar-item>\n\n <div class=\"error\" *ngIf=\"hasFailed\">\n <div>\n <i class=\"fa-solid fa-fw fa-triangle-exclamation\"></i>\n <span>{{ configErrorText }}</span>\n </div>\n </div>\n </ul>\n</nav>\n\n<div class=\"sidebar-footer\"><ng-content></ng-content></div>\n\n<ng-template #loading>\n <div class=\"loading\">\n <div>\n <svg class=\"animate-spin text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n </svg>\n <span>{{ configLoadingText }}</span>\n </div>\n </div>\n</ng-template>", styles: [":host{position:relative;z-index:20;display:grid;height:100%;-webkit-user-select:none;user-select:none;--tw-bg-opacity: 1;background-color:rgb(0 67 114 / var(--tw-bg-opacity, 1));transition-property:margin-left,width;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:calc(var(--sidebar-collapsed-width) * -1);transition-duration:var(--sidebar-animation-duration);width:var(--sidebar-collapsed-width);will-change:margin-left,width;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:\"toolbar\" \"nav\" \"footer\"}@media (min-width: 768px){:host{margin-left:0}:host.expanded{width:var(--sidebar-expanded-width)}:host.expanded .loading i,:host.expanded .error i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.expanded .loading svg,:host.expanded .error svg{margin-top:-4px;margin-left:1px;height:1.25rem;width:1.25rem}:host.expanded .loading span,:host.expanded .error span{opacity:1}}:host.active{width:var(--sidebar-expanded-width)}:host.active .loading i,:host.active .error i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.active .loading svg,:host.active .error svg{margin-top:-4px;margin-left:1px;height:1.25rem;width:1.25rem}:host.active .loading span,:host.active .error span{opacity:1}:host.expanded,:host.active{margin-left:0}.sidebar-toolbar{display:flex;justify-content:flex-end;padding-top:.5rem;padding-bottom:.5rem;grid-area:toolbar}.sidebar-toolbar .sidebar-toggle{z-index:20;display:flex;height:1.75rem;width:1.75rem;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(0 67 114 / var(--tw-text-opacity, 1));--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: rgb(0 0 0 / .05);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.sidebar-toolbar .sidebar-toggle:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(0 47 80 / var(--tw-text-opacity, 1))}.sidebar-toolbar .sidebar-toggle{transform:translate(40%)}.sidebar-toolbar .sidebar-toggle i{font-size:.875rem;line-height:1.25rem}.sidebar-footer{overflow:hidden;white-space:nowrap;padding:.5rem 1rem;text-align:center;font-size:.75rem;line-height:1rem;color:#d1d5db99;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);grid-area:footer}.sidebar-footer:empty{display:none}:host(.expanded) .sidebar-footer,:host(.active) .sidebar-footer{opacity:1}nav{overflow-y:auto;overflow-x:hidden;grid-area:nav;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}nav::-webkit-scrollbar{height:0px;width:7px}nav::-webkit-scrollbar-track{background-color:transparent}nav::-webkit-scrollbar-thumb{background-color:#0003;border-radius:10px;transition:background .2s ease}nav::-webkit-scrollbar-thumb:hover{background-color:#0000008c}nav:hover::-webkit-scrollbar-thumb{background-color:#00000073}@media screen and (max-width: 480px){nav{scrollbar-width:thin}nav::-webkit-scrollbar{width:5px}}ul,.loading{position:relative;background-color:#002f50cc}ul lib-sidebar-item,.loading,.error{font-weight:500;--tw-text-opacity: 1;color:rgb(229 231 235 / var(--tw-text-opacity, 1))}.loading,.error{overflow:hidden;height:var(--sidebar-item-height);line-height:var(--sidebar-item-height)}.loading>div,.error>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.75rem;padding-right:.75rem;text-align:left;width:var(--sidebar-expanded-width)}.loading i,.error i{margin-right:.5rem;font-size:1.25rem;line-height:1.75rem;transition-property:font-size,line-height,margin-left;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:var(--sidebar-icon-collapsed-margin);transition-duration:var(--sidebar-animation-duration);will-change:font-size,line-height,margin-left}.loading svg,.error svg{margin-top:-4px;margin-left:.5rem;display:inline;height:1.5rem;width:1.5rem;transition-property:height,margin-left,width;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:height,margin-left,width}.loading svg+span,.error svg+span{margin-left:.6rem}.loading span,.error span{transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;transition-duration:var(--sidebar-animation-duration)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SidebarItemComponent, selector: "lib-sidebar-item", inputs: ["menu", "level"] }] });
|
|
3329
3319
|
}
|
|
3330
3320
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SidebarComponent, decorators: [{
|
|
3331
3321
|
type: Component,
|
|
@@ -3337,7 +3327,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
|
|
|
3337
3327
|
], host: {
|
|
3338
3328
|
'[class.active]': 'isActive',
|
|
3339
3329
|
'[class.expanded]': '!isCollapsed',
|
|
3340
|
-
}, template: "<div class=\"
|
|
3330
|
+
}, template: "<div class=\"sidebar-toolbar\">\n <button type=\"button\" class=\"sidebar-toggle\" (click)=\"collapse()\" aria-label=\"Toggle navigation\">\n <i class=\"fa-solid\"\n [class.fa-angle-left]=\"!isCollapsed\"\n [class.fa-angle-right]=\"isCollapsed\"></i>\n </button>\n</div>\n\n<nav>\n <ul *ngIf=\"!isLoading; else loading\">\n <lib-sidebar-item *ngFor=\"let menu of menus; trackBy: trackByFn\"\n [menu]=\"menu\">\n </lib-sidebar-item>\n\n <div class=\"error\" *ngIf=\"hasFailed\">\n <div>\n <i class=\"fa-solid fa-fw fa-triangle-exclamation\"></i>\n <span>{{ configErrorText }}</span>\n </div>\n </div>\n </ul>\n</nav>\n\n<div class=\"sidebar-footer\"><ng-content></ng-content></div>\n\n<ng-template #loading>\n <div class=\"loading\">\n <div>\n <svg class=\"animate-spin text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n </svg>\n <span>{{ configLoadingText }}</span>\n </div>\n </div>\n</ng-template>", styles: [":host{position:relative;z-index:20;display:grid;height:100%;-webkit-user-select:none;user-select:none;--tw-bg-opacity: 1;background-color:rgb(0 67 114 / var(--tw-bg-opacity, 1));transition-property:margin-left,width;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:calc(var(--sidebar-collapsed-width) * -1);transition-duration:var(--sidebar-animation-duration);width:var(--sidebar-collapsed-width);will-change:margin-left,width;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:\"toolbar\" \"nav\" \"footer\"}@media (min-width: 768px){:host{margin-left:0}:host.expanded{width:var(--sidebar-expanded-width)}:host.expanded .loading i,:host.expanded .error i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.expanded .loading svg,:host.expanded .error svg{margin-top:-4px;margin-left:1px;height:1.25rem;width:1.25rem}:host.expanded .loading span,:host.expanded .error span{opacity:1}}:host.active{width:var(--sidebar-expanded-width)}:host.active .loading i,:host.active .error i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.active .loading svg,:host.active .error svg{margin-top:-4px;margin-left:1px;height:1.25rem;width:1.25rem}:host.active .loading span,:host.active .error span{opacity:1}:host.expanded,:host.active{margin-left:0}.sidebar-toolbar{display:flex;justify-content:flex-end;padding-top:.5rem;padding-bottom:.5rem;grid-area:toolbar}.sidebar-toolbar .sidebar-toggle{z-index:20;display:flex;height:1.75rem;width:1.75rem;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(0 67 114 / var(--tw-text-opacity, 1));--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: rgb(0 0 0 / .05);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.sidebar-toolbar .sidebar-toggle:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(0 47 80 / var(--tw-text-opacity, 1))}.sidebar-toolbar .sidebar-toggle{transform:translate(40%)}.sidebar-toolbar .sidebar-toggle i{font-size:.875rem;line-height:1.25rem}.sidebar-footer{overflow:hidden;white-space:nowrap;padding:.5rem 1rem;text-align:center;font-size:.75rem;line-height:1rem;color:#d1d5db99;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);grid-area:footer}.sidebar-footer:empty{display:none}:host(.expanded) .sidebar-footer,:host(.active) .sidebar-footer{opacity:1}nav{overflow-y:auto;overflow-x:hidden;grid-area:nav;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}nav::-webkit-scrollbar{height:0px;width:7px}nav::-webkit-scrollbar-track{background-color:transparent}nav::-webkit-scrollbar-thumb{background-color:#0003;border-radius:10px;transition:background .2s ease}nav::-webkit-scrollbar-thumb:hover{background-color:#0000008c}nav:hover::-webkit-scrollbar-thumb{background-color:#00000073}@media screen and (max-width: 480px){nav{scrollbar-width:thin}nav::-webkit-scrollbar{width:5px}}ul,.loading{position:relative;background-color:#002f50cc}ul lib-sidebar-item,.loading,.error{font-weight:500;--tw-text-opacity: 1;color:rgb(229 231 235 / var(--tw-text-opacity, 1))}.loading,.error{overflow:hidden;height:var(--sidebar-item-height);line-height:var(--sidebar-item-height)}.loading>div,.error>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.75rem;padding-right:.75rem;text-align:left;width:var(--sidebar-expanded-width)}.loading i,.error i{margin-right:.5rem;font-size:1.25rem;line-height:1.75rem;transition-property:font-size,line-height,margin-left;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:var(--sidebar-icon-collapsed-margin);transition-duration:var(--sidebar-animation-duration);will-change:font-size,line-height,margin-left}.loading svg,.error svg{margin-top:-4px;margin-left:.5rem;display:inline;height:1.5rem;width:1.5rem;transition-property:height,margin-left,width;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:height,margin-left,width}.loading svg+span,.error svg+span{margin-left:.6rem}.loading span,.error span{transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;transition-duration:var(--sidebar-animation-duration)}\n"] }]
|
|
3341
3331
|
}], ctorParameters: () => [], propDecorators: { onBodyMouseDown: [{
|
|
3342
3332
|
type: HostListener,
|
|
3343
3333
|
args: ['body:mousedown', ['$event']]
|