@devjuliovilla/jv-ui 1.6.1 → 1.6.2
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.
|
@@ -19735,6 +19735,7 @@ class JvSidebarComponent {
|
|
|
19735
19735
|
mobileOpen = input(false, ...(ngDevMode ? [{ debugName: "mobileOpen" }] : /* istanbul ignore next */ []));
|
|
19736
19736
|
ariaLabel = input('Sidebar navigation', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
19737
19737
|
collapseToggle = output();
|
|
19738
|
+
mobileClose = output();
|
|
19738
19739
|
activeChildParentIds = computed(() => {
|
|
19739
19740
|
const url = this.router.url;
|
|
19740
19741
|
const ids = new Set();
|
|
@@ -19777,248 +19778,266 @@ class JvSidebarComponent {
|
|
|
19777
19778
|
target?.scrollIntoView({ block: 'start', behavior: 'smooth' });
|
|
19778
19779
|
}
|
|
19779
19780
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
19780
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvSidebarComponent, isStandalone: true, selector: "jv-sidebar", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, brandIcon: { classPropertyName: "brandIcon", publicName: "brandIcon", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, mobileOpen: { classPropertyName: "mobileOpen", publicName: "mobileOpen", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapseToggle: "collapseToggle" }, ngImport: i0, template: `
|
|
19781
|
-
|
|
19782
|
-
<div class="jv-sidebar-
|
|
19783
|
-
|
|
19784
|
-
|
|
19785
|
-
|
|
19786
|
-
|
|
19787
|
-
|
|
19788
|
-
|
|
19789
|
-
|
|
19790
|
-
|
|
19791
|
-
|
|
19792
|
-
|
|
19793
|
-
|
|
19794
|
-
|
|
19795
|
-
|
|
19796
|
-
|
|
19797
|
-
|
|
19798
|
-
|
|
19799
|
-
|
|
19800
|
-
|
|
19801
|
-
|
|
19802
|
-
|
|
19803
|
-
|
|
19804
|
-
|
|
19805
|
-
|
|
19806
|
-
|
|
19807
|
-
|
|
19808
|
-
|
|
19809
|
-
|
|
19810
|
-
|
|
19811
|
-
|
|
19812
|
-
|
|
19813
|
-
|
|
19814
|
-
|
|
19815
|
-
|
|
19816
|
-
|
|
19817
|
-
|
|
19818
|
-
|
|
19819
|
-
|
|
19820
|
-
|
|
19821
|
-
|
|
19822
|
-
|
|
19823
|
-
|
|
19824
|
-
|
|
19825
|
-
|
|
19826
|
-
|
|
19827
|
-
|
|
19828
|
-
|
|
19829
|
-
|
|
19830
|
-
|
|
19831
|
-
[
|
|
19832
|
-
|
|
19833
|
-
|
|
19834
|
-
|
|
19835
|
-
|
|
19836
|
-
|
|
19837
|
-
|
|
19838
|
-
|
|
19839
|
-
|
|
19840
|
-
|
|
19841
|
-
|
|
19842
|
-
|
|
19843
|
-
|
|
19844
|
-
|
|
19845
|
-
|
|
19846
|
-
|
|
19847
|
-
|
|
19848
|
-
|
|
19849
|
-
|
|
19850
|
-
|
|
19851
|
-
|
|
19852
|
-
|
|
19853
|
-
|
|
19854
|
-
|
|
19855
|
-
|
|
19856
|
-
|
|
19857
|
-
|
|
19858
|
-
|
|
19859
|
-
|
|
19860
|
-
|
|
19861
|
-
|
|
19862
|
-
|
|
19863
|
-
|
|
19864
|
-
|
|
19865
|
-
|
|
19866
|
-
|
|
19867
|
-
|
|
19868
|
-
|
|
19869
|
-
|
|
19870
|
-
|
|
19871
|
-
|
|
19872
|
-
|
|
19873
|
-
|
|
19874
|
-
|
|
19875
|
-
|
|
19876
|
-
|
|
19877
|
-
|
|
19878
|
-
|
|
19879
|
-
|
|
19880
|
-
|
|
19881
|
-
|
|
19882
|
-
|
|
19883
|
-
|
|
19884
|
-
|
|
19885
|
-
|
|
19886
|
-
|
|
19887
|
-
|
|
19888
|
-
|
|
19889
|
-
|
|
19890
|
-
|
|
19891
|
-
|
|
19892
|
-
|
|
19893
|
-
|
|
19894
|
-
|
|
19895
|
-
</
|
|
19896
|
-
</
|
|
19897
|
-
|
|
19898
|
-
|
|
19781
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvSidebarComponent, isStandalone: true, selector: "jv-sidebar", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, brandIcon: { classPropertyName: "brandIcon", publicName: "brandIcon", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, mobileOpen: { classPropertyName: "mobileOpen", publicName: "mobileOpen", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapseToggle: "collapseToggle", mobileClose: "mobileClose" }, ngImport: i0, template: `
|
|
19782
|
+
@if (mobileOpen()) {
|
|
19783
|
+
<div class="jv-sidebar-backdrop" (click)="mobileClose.emit()"></div>
|
|
19784
|
+
}
|
|
19785
|
+
|
|
19786
|
+
<aside
|
|
19787
|
+
class="jv-sidebar"
|
|
19788
|
+
[class.is-collapsed]="collapsed()"
|
|
19789
|
+
[class.is-mobile-open]="mobileOpen()"
|
|
19790
|
+
>
|
|
19791
|
+
<div class="jv-sidebar-brand">
|
|
19792
|
+
<div class="brand-mark">
|
|
19793
|
+
<jv-icon [name]="brandIcon()" [size]="18" />
|
|
19794
|
+
</div>
|
|
19795
|
+
|
|
19796
|
+
@if (!collapsed()) {
|
|
19797
|
+
<div class="brand-copy">
|
|
19798
|
+
<strong>{{ title() }}</strong>
|
|
19799
|
+
@if (subtitle()) {
|
|
19800
|
+
<span>{{ subtitle() }}</span>
|
|
19801
|
+
}
|
|
19802
|
+
</div>
|
|
19803
|
+
}
|
|
19804
|
+
</div>
|
|
19805
|
+
|
|
19806
|
+
<nav class="jv-sidebar-nav" [attr.aria-label]="ariaLabel()">
|
|
19807
|
+
<ul class="jv-sidebar-list">
|
|
19808
|
+
@for (item of normalizedItems(); track item.id) {
|
|
19809
|
+
<li class="jv-sidebar-item">
|
|
19810
|
+
@if (item.children.length > 0) {
|
|
19811
|
+
<button
|
|
19812
|
+
type="button"
|
|
19813
|
+
class="jv-sidebar-link"
|
|
19814
|
+
[class.is-active]="item.active"
|
|
19815
|
+
[attr.aria-label]="item.label"
|
|
19816
|
+
[attr.aria-expanded]="isExpanded(item.id) ? 'true' : 'false'"
|
|
19817
|
+
[attr.aria-controls]="'jv-sidebar-section-' + item.id"
|
|
19818
|
+
[attr.title]="item.label"
|
|
19819
|
+
(click)="toggleSection(item.id)"
|
|
19820
|
+
>
|
|
19821
|
+
<span class="jv-sidebar-link-main">
|
|
19822
|
+
@if (item.icon) {
|
|
19823
|
+
<jv-icon [name]="item.icon" [size]="18" />
|
|
19824
|
+
}
|
|
19825
|
+
|
|
19826
|
+
@if (!collapsed()) {
|
|
19827
|
+
<span>{{ item.label }}</span>
|
|
19828
|
+
}
|
|
19829
|
+
</span>
|
|
19830
|
+
|
|
19831
|
+
@if (!collapsed()) {
|
|
19832
|
+
<jv-icon [name]="isExpanded(item.id) ? 'chevron-up' : 'chevron-down'" [size]="16" />
|
|
19833
|
+
}
|
|
19834
|
+
</button>
|
|
19835
|
+
} @else {
|
|
19836
|
+
@if (isHashLink(item.href)) {
|
|
19837
|
+
<button
|
|
19838
|
+
type="button"
|
|
19839
|
+
class="jv-sidebar-link"
|
|
19840
|
+
[class.is-active]="item.active"
|
|
19841
|
+
[attr.aria-label]="item.label"
|
|
19842
|
+
[attr.aria-current]="item.active ? 'page' : null"
|
|
19843
|
+
[attr.title]="item.label"
|
|
19844
|
+
(click)="navigateTo(item.href); mobileClose.emit()"
|
|
19845
|
+
>
|
|
19846
|
+
<span class="jv-sidebar-link-main">
|
|
19847
|
+
@if (item.icon) {
|
|
19848
|
+
<jv-icon [name]="item.icon" [size]="18" />
|
|
19849
|
+
}
|
|
19850
|
+
|
|
19851
|
+
@if (!collapsed()) {
|
|
19852
|
+
<span>{{ item.label }}</span>
|
|
19853
|
+
}
|
|
19854
|
+
</span>
|
|
19855
|
+
</button>
|
|
19856
|
+
} @else {
|
|
19857
|
+
<a
|
|
19858
|
+
class="jv-sidebar-link"
|
|
19859
|
+
[class.is-active]="item.active"
|
|
19860
|
+
[attr.aria-label]="item.label"
|
|
19861
|
+
[attr.aria-current]="item.active ? 'page' : null"
|
|
19862
|
+
[routerLink]="item.href"
|
|
19863
|
+
[attr.title]="item.label"
|
|
19864
|
+
(click)="mobileClose.emit()"
|
|
19865
|
+
>
|
|
19866
|
+
<span class="jv-sidebar-link-main">
|
|
19867
|
+
@if (item.icon) {
|
|
19868
|
+
<jv-icon [name]="item.icon" [size]="18" />
|
|
19869
|
+
}
|
|
19870
|
+
|
|
19871
|
+
@if (!collapsed()) {
|
|
19872
|
+
<span>{{ item.label }}</span>
|
|
19873
|
+
}
|
|
19874
|
+
</span>
|
|
19875
|
+
</a>
|
|
19876
|
+
}
|
|
19877
|
+
}
|
|
19878
|
+
|
|
19879
|
+
@if (!collapsed() && item.children.length > 0 && isExpanded(item.id)) {
|
|
19880
|
+
<div class="jv-sidebar-children" [id]="'jv-sidebar-section-' + item.id">
|
|
19881
|
+
@for (child of item.children; track child.id) {
|
|
19882
|
+
@if (isHashLink(child.href)) {
|
|
19883
|
+
<button type="button" class="jv-sidebar-child-link" [class.is-active]="child.active" [attr.aria-label]="child.label" [attr.aria-current]="child.active ? 'page' : null" [attr.title]="child.label" (click)="navigateTo(child.href)">
|
|
19884
|
+
{{ child.label }}
|
|
19885
|
+
</button>
|
|
19886
|
+
} @else {
|
|
19887
|
+
<a class="jv-sidebar-child-link" [class.is-active]="child.active" [attr.aria-label]="child.label" [attr.aria-current]="child.active ? 'page' : null" [routerLink]="child.href" [attr.title]="child.label" (click)="mobileClose.emit()">
|
|
19888
|
+
{{ child.label }}
|
|
19889
|
+
</a>
|
|
19890
|
+
}
|
|
19891
|
+
}
|
|
19892
|
+
</div>
|
|
19893
|
+
}
|
|
19894
|
+
</li>
|
|
19895
|
+
}
|
|
19896
|
+
</ul>
|
|
19897
|
+
</nav>
|
|
19898
|
+
|
|
19899
|
+
<div class="jv-sidebar-footer">
|
|
19900
|
+
<button type="button" class="jv-sidebar-toggle" (click)="collapseToggle.emit()">
|
|
19901
|
+
<jv-icon [name]="collapsed() ? 'menu' : 'panel-left-close'" [size]="18" />
|
|
19902
|
+
@if (!collapsed()) {
|
|
19903
|
+
<span>Collapse</span>
|
|
19904
|
+
}
|
|
19905
|
+
</button>
|
|
19906
|
+
</div>
|
|
19907
|
+
</aside>
|
|
19908
|
+
`, isInline: true, styles: [".jv-sidebar-backdrop{display:none}.jv-sidebar{display:grid;grid-template-rows:auto 1fr auto;gap:var(--jv-spacing-lg);width:280px;min-width:280px;height:100vh;padding:var(--jv-spacing-lg);overflow-y:auto;border-right:1px solid var(--jv-color-border);background:var(--jv-color-surface);scrollbar-width:none;-ms-overflow-style:none}.jv-sidebar::-webkit-scrollbar{width:0;height:0;display:none}.jv-sidebar.is-collapsed{width:96px;min-width:96px;padding-inline:var(--jv-spacing-md)}.jv-sidebar-brand,.jv-sidebar-link,.jv-sidebar-toggle{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.brand-mark{display:inline-grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:var(--jv-radius-md);background:color-mix(in srgb,var(--jv-color-primary) 16%,var(--jv-color-surface));color:var(--jv-color-primary)}.brand-copy{display:grid;gap:.1rem}.brand-copy span{color:var(--jv-color-foreground-muted);font-size:.875rem}.jv-sidebar-item{display:grid;gap:var(--jv-spacing-xs);list-style:none}.jv-sidebar-list{display:grid;gap:var(--jv-spacing-xs);margin:0;padding:0}.jv-sidebar-nav{display:grid;gap:var(--jv-spacing-xs);align-content:start}.jv-sidebar-link,.jv-sidebar-child-link,.jv-sidebar-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border:1px solid transparent;border-radius:var(--jv-radius-md);background:transparent;color:var(--jv-color-foreground-muted);text-decoration:none;cursor:pointer}.jv-sidebar-link-main{display:inline-flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-sidebar-link:hover,.jv-sidebar-child-link:hover,.jv-sidebar-toggle:hover{background:var(--jv-color-surface-muted);color:var(--jv-color-foreground)}.jv-sidebar-link.is-active,.jv-sidebar-child-link.is-active{border-color:color-mix(in srgb,var(--jv-color-primary) 25%,var(--jv-color-border));background:color-mix(in srgb,var(--jv-color-primary) 12%,var(--jv-color-surface));color:var(--jv-color-foreground)}.jv-sidebar-children{display:grid;gap:var(--jv-spacing-xs);margin-left:var(--jv-spacing-xl);padding-left:var(--jv-spacing-sm);border-left:1px solid var(--jv-color-border)}.jv-sidebar-child-link{display:flex;align-items:center;min-height:2.25rem;font-size:.9rem}.jv-sidebar-toggle{width:100%;background:var(--jv-color-surface-muted);cursor:pointer}@media(max-width:900px){.jv-sidebar-backdrop{display:block;position:fixed;inset:0;z-index:99;background:#0006}.jv-sidebar{position:fixed;top:0;left:0;z-index:100;width:280px;min-width:280px;height:100vh;border-right:1px solid var(--jv-color-border);border-bottom:none;box-shadow:var(--jv-shadow-lg);transform:translate(-100%);visibility:hidden;transition:transform .24s cubic-bezier(.4,0,.2,1),visibility .24s}.jv-sidebar.is-mobile-open{transform:translate(0);visibility:visible}.jv-sidebar.is-collapsed{width:280px;min-width:280px}}\n"], dependencies: [{ kind: "component", type: JvIconComponent, selector: "jv-icon", inputs: ["name", "size", "strokeWidth", "decorative", "ariaLabel"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
|
|
19899
19909
|
}
|
|
19900
19910
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvSidebarComponent, decorators: [{
|
|
19901
19911
|
type: Component,
|
|
19902
|
-
args: [{ selector: 'jv-sidebar', standalone: true, imports: [JvIconComponent, RouterLink], template: `
|
|
19903
|
-
|
|
19904
|
-
<div class="jv-sidebar-
|
|
19905
|
-
|
|
19906
|
-
|
|
19907
|
-
|
|
19908
|
-
|
|
19909
|
-
|
|
19910
|
-
|
|
19911
|
-
|
|
19912
|
-
|
|
19913
|
-
|
|
19914
|
-
|
|
19915
|
-
|
|
19916
|
-
|
|
19917
|
-
|
|
19918
|
-
|
|
19919
|
-
|
|
19920
|
-
|
|
19921
|
-
|
|
19922
|
-
|
|
19923
|
-
|
|
19924
|
-
|
|
19925
|
-
|
|
19926
|
-
|
|
19927
|
-
|
|
19928
|
-
|
|
19929
|
-
|
|
19930
|
-
|
|
19931
|
-
|
|
19932
|
-
|
|
19933
|
-
|
|
19934
|
-
|
|
19935
|
-
|
|
19936
|
-
|
|
19937
|
-
|
|
19938
|
-
|
|
19939
|
-
|
|
19940
|
-
|
|
19941
|
-
|
|
19942
|
-
|
|
19943
|
-
|
|
19944
|
-
|
|
19945
|
-
|
|
19946
|
-
|
|
19947
|
-
|
|
19948
|
-
|
|
19949
|
-
|
|
19950
|
-
|
|
19951
|
-
|
|
19952
|
-
|
|
19953
|
-
[
|
|
19954
|
-
|
|
19955
|
-
|
|
19956
|
-
|
|
19957
|
-
|
|
19958
|
-
|
|
19959
|
-
|
|
19960
|
-
|
|
19961
|
-
|
|
19962
|
-
|
|
19963
|
-
|
|
19964
|
-
|
|
19965
|
-
|
|
19966
|
-
|
|
19967
|
-
|
|
19968
|
-
|
|
19969
|
-
|
|
19970
|
-
|
|
19971
|
-
|
|
19972
|
-
|
|
19973
|
-
|
|
19974
|
-
|
|
19975
|
-
|
|
19976
|
-
|
|
19977
|
-
|
|
19978
|
-
|
|
19979
|
-
|
|
19980
|
-
|
|
19981
|
-
|
|
19982
|
-
|
|
19983
|
-
|
|
19984
|
-
|
|
19985
|
-
|
|
19986
|
-
|
|
19987
|
-
|
|
19988
|
-
|
|
19989
|
-
|
|
19990
|
-
|
|
19991
|
-
|
|
19992
|
-
|
|
19993
|
-
|
|
19994
|
-
|
|
19995
|
-
|
|
19996
|
-
|
|
19997
|
-
|
|
19998
|
-
|
|
19999
|
-
|
|
20000
|
-
|
|
20001
|
-
|
|
20002
|
-
|
|
20003
|
-
|
|
20004
|
-
|
|
20005
|
-
|
|
20006
|
-
|
|
20007
|
-
|
|
20008
|
-
|
|
20009
|
-
|
|
20010
|
-
|
|
20011
|
-
|
|
20012
|
-
|
|
20013
|
-
|
|
20014
|
-
|
|
20015
|
-
|
|
20016
|
-
|
|
20017
|
-
</
|
|
20018
|
-
</
|
|
20019
|
-
|
|
20020
|
-
|
|
20021
|
-
|
|
19912
|
+
args: [{ selector: 'jv-sidebar', standalone: true, imports: [JvIconComponent, RouterLink], template: `
|
|
19913
|
+
@if (mobileOpen()) {
|
|
19914
|
+
<div class="jv-sidebar-backdrop" (click)="mobileClose.emit()"></div>
|
|
19915
|
+
}
|
|
19916
|
+
|
|
19917
|
+
<aside
|
|
19918
|
+
class="jv-sidebar"
|
|
19919
|
+
[class.is-collapsed]="collapsed()"
|
|
19920
|
+
[class.is-mobile-open]="mobileOpen()"
|
|
19921
|
+
>
|
|
19922
|
+
<div class="jv-sidebar-brand">
|
|
19923
|
+
<div class="brand-mark">
|
|
19924
|
+
<jv-icon [name]="brandIcon()" [size]="18" />
|
|
19925
|
+
</div>
|
|
19926
|
+
|
|
19927
|
+
@if (!collapsed()) {
|
|
19928
|
+
<div class="brand-copy">
|
|
19929
|
+
<strong>{{ title() }}</strong>
|
|
19930
|
+
@if (subtitle()) {
|
|
19931
|
+
<span>{{ subtitle() }}</span>
|
|
19932
|
+
}
|
|
19933
|
+
</div>
|
|
19934
|
+
}
|
|
19935
|
+
</div>
|
|
19936
|
+
|
|
19937
|
+
<nav class="jv-sidebar-nav" [attr.aria-label]="ariaLabel()">
|
|
19938
|
+
<ul class="jv-sidebar-list">
|
|
19939
|
+
@for (item of normalizedItems(); track item.id) {
|
|
19940
|
+
<li class="jv-sidebar-item">
|
|
19941
|
+
@if (item.children.length > 0) {
|
|
19942
|
+
<button
|
|
19943
|
+
type="button"
|
|
19944
|
+
class="jv-sidebar-link"
|
|
19945
|
+
[class.is-active]="item.active"
|
|
19946
|
+
[attr.aria-label]="item.label"
|
|
19947
|
+
[attr.aria-expanded]="isExpanded(item.id) ? 'true' : 'false'"
|
|
19948
|
+
[attr.aria-controls]="'jv-sidebar-section-' + item.id"
|
|
19949
|
+
[attr.title]="item.label"
|
|
19950
|
+
(click)="toggleSection(item.id)"
|
|
19951
|
+
>
|
|
19952
|
+
<span class="jv-sidebar-link-main">
|
|
19953
|
+
@if (item.icon) {
|
|
19954
|
+
<jv-icon [name]="item.icon" [size]="18" />
|
|
19955
|
+
}
|
|
19956
|
+
|
|
19957
|
+
@if (!collapsed()) {
|
|
19958
|
+
<span>{{ item.label }}</span>
|
|
19959
|
+
}
|
|
19960
|
+
</span>
|
|
19961
|
+
|
|
19962
|
+
@if (!collapsed()) {
|
|
19963
|
+
<jv-icon [name]="isExpanded(item.id) ? 'chevron-up' : 'chevron-down'" [size]="16" />
|
|
19964
|
+
}
|
|
19965
|
+
</button>
|
|
19966
|
+
} @else {
|
|
19967
|
+
@if (isHashLink(item.href)) {
|
|
19968
|
+
<button
|
|
19969
|
+
type="button"
|
|
19970
|
+
class="jv-sidebar-link"
|
|
19971
|
+
[class.is-active]="item.active"
|
|
19972
|
+
[attr.aria-label]="item.label"
|
|
19973
|
+
[attr.aria-current]="item.active ? 'page' : null"
|
|
19974
|
+
[attr.title]="item.label"
|
|
19975
|
+
(click)="navigateTo(item.href); mobileClose.emit()"
|
|
19976
|
+
>
|
|
19977
|
+
<span class="jv-sidebar-link-main">
|
|
19978
|
+
@if (item.icon) {
|
|
19979
|
+
<jv-icon [name]="item.icon" [size]="18" />
|
|
19980
|
+
}
|
|
19981
|
+
|
|
19982
|
+
@if (!collapsed()) {
|
|
19983
|
+
<span>{{ item.label }}</span>
|
|
19984
|
+
}
|
|
19985
|
+
</span>
|
|
19986
|
+
</button>
|
|
19987
|
+
} @else {
|
|
19988
|
+
<a
|
|
19989
|
+
class="jv-sidebar-link"
|
|
19990
|
+
[class.is-active]="item.active"
|
|
19991
|
+
[attr.aria-label]="item.label"
|
|
19992
|
+
[attr.aria-current]="item.active ? 'page' : null"
|
|
19993
|
+
[routerLink]="item.href"
|
|
19994
|
+
[attr.title]="item.label"
|
|
19995
|
+
(click)="mobileClose.emit()"
|
|
19996
|
+
>
|
|
19997
|
+
<span class="jv-sidebar-link-main">
|
|
19998
|
+
@if (item.icon) {
|
|
19999
|
+
<jv-icon [name]="item.icon" [size]="18" />
|
|
20000
|
+
}
|
|
20001
|
+
|
|
20002
|
+
@if (!collapsed()) {
|
|
20003
|
+
<span>{{ item.label }}</span>
|
|
20004
|
+
}
|
|
20005
|
+
</span>
|
|
20006
|
+
</a>
|
|
20007
|
+
}
|
|
20008
|
+
}
|
|
20009
|
+
|
|
20010
|
+
@if (!collapsed() && item.children.length > 0 && isExpanded(item.id)) {
|
|
20011
|
+
<div class="jv-sidebar-children" [id]="'jv-sidebar-section-' + item.id">
|
|
20012
|
+
@for (child of item.children; track child.id) {
|
|
20013
|
+
@if (isHashLink(child.href)) {
|
|
20014
|
+
<button type="button" class="jv-sidebar-child-link" [class.is-active]="child.active" [attr.aria-label]="child.label" [attr.aria-current]="child.active ? 'page' : null" [attr.title]="child.label" (click)="navigateTo(child.href)">
|
|
20015
|
+
{{ child.label }}
|
|
20016
|
+
</button>
|
|
20017
|
+
} @else {
|
|
20018
|
+
<a class="jv-sidebar-child-link" [class.is-active]="child.active" [attr.aria-label]="child.label" [attr.aria-current]="child.active ? 'page' : null" [routerLink]="child.href" [attr.title]="child.label" (click)="mobileClose.emit()">
|
|
20019
|
+
{{ child.label }}
|
|
20020
|
+
</a>
|
|
20021
|
+
}
|
|
20022
|
+
}
|
|
20023
|
+
</div>
|
|
20024
|
+
}
|
|
20025
|
+
</li>
|
|
20026
|
+
}
|
|
20027
|
+
</ul>
|
|
20028
|
+
</nav>
|
|
20029
|
+
|
|
20030
|
+
<div class="jv-sidebar-footer">
|
|
20031
|
+
<button type="button" class="jv-sidebar-toggle" (click)="collapseToggle.emit()">
|
|
20032
|
+
<jv-icon [name]="collapsed() ? 'menu' : 'panel-left-close'" [size]="18" />
|
|
20033
|
+
@if (!collapsed()) {
|
|
20034
|
+
<span>Collapse</span>
|
|
20035
|
+
}
|
|
20036
|
+
</button>
|
|
20037
|
+
</div>
|
|
20038
|
+
</aside>
|
|
20039
|
+
`, styles: [".jv-sidebar-backdrop{display:none}.jv-sidebar{display:grid;grid-template-rows:auto 1fr auto;gap:var(--jv-spacing-lg);width:280px;min-width:280px;height:100vh;padding:var(--jv-spacing-lg);overflow-y:auto;border-right:1px solid var(--jv-color-border);background:var(--jv-color-surface);scrollbar-width:none;-ms-overflow-style:none}.jv-sidebar::-webkit-scrollbar{width:0;height:0;display:none}.jv-sidebar.is-collapsed{width:96px;min-width:96px;padding-inline:var(--jv-spacing-md)}.jv-sidebar-brand,.jv-sidebar-link,.jv-sidebar-toggle{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.brand-mark{display:inline-grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:var(--jv-radius-md);background:color-mix(in srgb,var(--jv-color-primary) 16%,var(--jv-color-surface));color:var(--jv-color-primary)}.brand-copy{display:grid;gap:.1rem}.brand-copy span{color:var(--jv-color-foreground-muted);font-size:.875rem}.jv-sidebar-item{display:grid;gap:var(--jv-spacing-xs);list-style:none}.jv-sidebar-list{display:grid;gap:var(--jv-spacing-xs);margin:0;padding:0}.jv-sidebar-nav{display:grid;gap:var(--jv-spacing-xs);align-content:start}.jv-sidebar-link,.jv-sidebar-child-link,.jv-sidebar-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border:1px solid transparent;border-radius:var(--jv-radius-md);background:transparent;color:var(--jv-color-foreground-muted);text-decoration:none;cursor:pointer}.jv-sidebar-link-main{display:inline-flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-sidebar-link:hover,.jv-sidebar-child-link:hover,.jv-sidebar-toggle:hover{background:var(--jv-color-surface-muted);color:var(--jv-color-foreground)}.jv-sidebar-link.is-active,.jv-sidebar-child-link.is-active{border-color:color-mix(in srgb,var(--jv-color-primary) 25%,var(--jv-color-border));background:color-mix(in srgb,var(--jv-color-primary) 12%,var(--jv-color-surface));color:var(--jv-color-foreground)}.jv-sidebar-children{display:grid;gap:var(--jv-spacing-xs);margin-left:var(--jv-spacing-xl);padding-left:var(--jv-spacing-sm);border-left:1px solid var(--jv-color-border)}.jv-sidebar-child-link{display:flex;align-items:center;min-height:2.25rem;font-size:.9rem}.jv-sidebar-toggle{width:100%;background:var(--jv-color-surface-muted);cursor:pointer}@media(max-width:900px){.jv-sidebar-backdrop{display:block;position:fixed;inset:0;z-index:99;background:#0006}.jv-sidebar{position:fixed;top:0;left:0;z-index:100;width:280px;min-width:280px;height:100vh;border-right:1px solid var(--jv-color-border);border-bottom:none;box-shadow:var(--jv-shadow-lg);transform:translate(-100%);visibility:hidden;transition:transform .24s cubic-bezier(.4,0,.2,1),visibility .24s}.jv-sidebar.is-mobile-open{transform:translate(0);visibility:visible}.jv-sidebar.is-collapsed{width:280px;min-width:280px}}\n"] }]
|
|
20040
|
+
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], brandIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandIcon", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], mobileOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileOpen", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], collapseToggle: [{ type: i0.Output, args: ["collapseToggle"] }], mobileClose: [{ type: i0.Output, args: ["mobileClose"] }] } });
|
|
20022
20041
|
|
|
20023
20042
|
class JvTopbarComponent {
|
|
20024
20043
|
title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
@@ -20143,11 +20162,12 @@ class JvDashboardShellComponent {
|
|
|
20143
20162
|
topbarActions = input([], ...(ngDevMode ? [{ debugName: "topbarActions" }] : /* istanbul ignore next */ []));
|
|
20144
20163
|
showThemeSelector = input(true, ...(ngDevMode ? [{ debugName: "showThemeSelector" }] : /* istanbul ignore next */ []));
|
|
20145
20164
|
menuClick = output();
|
|
20165
|
+
mobileClose = output();
|
|
20146
20166
|
sidebarCollapseToggle = output();
|
|
20147
20167
|
themeChange = output();
|
|
20148
20168
|
topbarActionClick = output();
|
|
20149
20169
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvDashboardShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
20150
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: JvDashboardShellComponent, isStandalone: true, selector: "jv-dashboard-shell", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, sidebarSubtitle: { classPropertyName: "sidebarSubtitle", publicName: "sidebarSubtitle", isSignal: true, isRequired: false, transformFunction: null }, brandIcon: { classPropertyName: "brandIcon", publicName: "brandIcon", isSignal: true, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, sidebarCollapsed: { classPropertyName: "sidebarCollapsed", publicName: "sidebarCollapsed", isSignal: true, isRequired: false, transformFunction: null }, mobileSidebarOpen: { classPropertyName: "mobileSidebarOpen", publicName: "mobileSidebarOpen", isSignal: true, isRequired: false, transformFunction: null }, topbarTitle: { classPropertyName: "topbarTitle", publicName: "topbarTitle", isSignal: true, isRequired: false, transformFunction: null }, topbarSubtitle: { classPropertyName: "topbarSubtitle", publicName: "topbarSubtitle", isSignal: true, isRequired: false, transformFunction: null }, currentTheme: { classPropertyName: "currentTheme", publicName: "currentTheme", isSignal: true, isRequired: false, transformFunction: null }, themeOptions: { classPropertyName: "themeOptions", publicName: "themeOptions", isSignal: true, isRequired: false, transformFunction: null }, topbarActions: { classPropertyName: "topbarActions", publicName: "topbarActions", isSignal: true, isRequired: false, transformFunction: null }, showThemeSelector: { classPropertyName: "showThemeSelector", publicName: "showThemeSelector", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuClick: "menuClick", sidebarCollapseToggle: "sidebarCollapseToggle", themeChange: "themeChange", topbarActionClick: "topbarActionClick" }, ngImport: i0, template: `
|
|
20170
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: JvDashboardShellComponent, isStandalone: true, selector: "jv-dashboard-shell", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, sidebarSubtitle: { classPropertyName: "sidebarSubtitle", publicName: "sidebarSubtitle", isSignal: true, isRequired: false, transformFunction: null }, brandIcon: { classPropertyName: "brandIcon", publicName: "brandIcon", isSignal: true, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, sidebarCollapsed: { classPropertyName: "sidebarCollapsed", publicName: "sidebarCollapsed", isSignal: true, isRequired: false, transformFunction: null }, mobileSidebarOpen: { classPropertyName: "mobileSidebarOpen", publicName: "mobileSidebarOpen", isSignal: true, isRequired: false, transformFunction: null }, topbarTitle: { classPropertyName: "topbarTitle", publicName: "topbarTitle", isSignal: true, isRequired: false, transformFunction: null }, topbarSubtitle: { classPropertyName: "topbarSubtitle", publicName: "topbarSubtitle", isSignal: true, isRequired: false, transformFunction: null }, currentTheme: { classPropertyName: "currentTheme", publicName: "currentTheme", isSignal: true, isRequired: false, transformFunction: null }, themeOptions: { classPropertyName: "themeOptions", publicName: "themeOptions", isSignal: true, isRequired: false, transformFunction: null }, topbarActions: { classPropertyName: "topbarActions", publicName: "topbarActions", isSignal: true, isRequired: false, transformFunction: null }, showThemeSelector: { classPropertyName: "showThemeSelector", publicName: "showThemeSelector", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuClick: "menuClick", mobileClose: "mobileClose", sidebarCollapseToggle: "sidebarCollapseToggle", themeChange: "themeChange", topbarActionClick: "topbarActionClick" }, ngImport: i0, template: `
|
|
20151
20171
|
<div class="jv-dashboard-shell" [class.is-sidebar-collapsed]="sidebarCollapsed()">
|
|
20152
20172
|
<jv-sidebar
|
|
20153
20173
|
[title]="title()"
|
|
@@ -20157,6 +20177,7 @@ class JvDashboardShellComponent {
|
|
|
20157
20177
|
[collapsed]="sidebarCollapsed()"
|
|
20158
20178
|
[mobileOpen]="mobileSidebarOpen()"
|
|
20159
20179
|
(collapseToggle)="sidebarCollapseToggle.emit()"
|
|
20180
|
+
(mobileClose)="mobileClose.emit()"
|
|
20160
20181
|
/>
|
|
20161
20182
|
|
|
20162
20183
|
<div class="jv-dashboard-main">
|
|
@@ -20179,7 +20200,7 @@ class JvDashboardShellComponent {
|
|
|
20179
20200
|
</main>
|
|
20180
20201
|
</div>
|
|
20181
20202
|
</div>
|
|
20182
|
-
`, isInline: true, styles: [":host{display:block;height:100dvh;overflow:hidden}.jv-dashboard-shell{display:grid;height:100%;grid-template-columns:auto 1fr;background:var(--jv-color-background);overflow:hidden}.jv-dashboard-main{display:grid;grid-template-rows:auto 1fr;min-width:0;min-height:0;overflow:hidden}.jv-dashboard-content{overflow:auto;min-width:0;min-height:0;padding:var(--jv-spacing-xl);scrollbar-width:none;-ms-overflow-style:none}.jv-dashboard-content::-webkit-scrollbar{width:0;height:0;display:none}@media(max-width:900px){.jv-dashboard-shell{grid-template-columns:1fr}.jv-dashboard-content{padding:var(--jv-spacing-lg)}}\n"], dependencies: [{ kind: "component", type: JvSidebarComponent, selector: "jv-sidebar", inputs: ["title", "subtitle", "brandIcon", "items", "collapsed", "mobileOpen", "ariaLabel"], outputs: ["collapseToggle"] }, { kind: "component", type: JvTopbarComponent, selector: "jv-topbar", inputs: ["title", "subtitle", "currentTheme", "themeOptions", "actions", "showThemeSelector"], outputs: ["menuClick", "themeChange", "actionClick"] }] });
|
|
20203
|
+
`, isInline: true, styles: [":host{display:block;height:100dvh;overflow:hidden}.jv-dashboard-shell{display:grid;height:100%;grid-template-columns:auto 1fr;background:var(--jv-color-background);overflow:hidden}.jv-dashboard-main{display:grid;grid-template-rows:auto 1fr;min-width:0;min-height:0;overflow:hidden}.jv-dashboard-content{overflow:auto;min-width:0;min-height:0;padding:var(--jv-spacing-xl);scrollbar-width:none;-ms-overflow-style:none}.jv-dashboard-content::-webkit-scrollbar{width:0;height:0;display:none}@media(max-width:900px){.jv-dashboard-shell{grid-template-columns:1fr}.jv-dashboard-content{padding:var(--jv-spacing-lg)}}\n"], dependencies: [{ kind: "component", type: JvSidebarComponent, selector: "jv-sidebar", inputs: ["title", "subtitle", "brandIcon", "items", "collapsed", "mobileOpen", "ariaLabel"], outputs: ["collapseToggle", "mobileClose"] }, { kind: "component", type: JvTopbarComponent, selector: "jv-topbar", inputs: ["title", "subtitle", "currentTheme", "themeOptions", "actions", "showThemeSelector"], outputs: ["menuClick", "themeChange", "actionClick"] }] });
|
|
20183
20204
|
}
|
|
20184
20205
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvDashboardShellComponent, decorators: [{
|
|
20185
20206
|
type: Component,
|
|
@@ -20193,6 +20214,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
20193
20214
|
[collapsed]="sidebarCollapsed()"
|
|
20194
20215
|
[mobileOpen]="mobileSidebarOpen()"
|
|
20195
20216
|
(collapseToggle)="sidebarCollapseToggle.emit()"
|
|
20217
|
+
(mobileClose)="mobileClose.emit()"
|
|
20196
20218
|
/>
|
|
20197
20219
|
|
|
20198
20220
|
<div class="jv-dashboard-main">
|
|
@@ -20216,7 +20238,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
20216
20238
|
</div>
|
|
20217
20239
|
</div>
|
|
20218
20240
|
`, styles: [":host{display:block;height:100dvh;overflow:hidden}.jv-dashboard-shell{display:grid;height:100%;grid-template-columns:auto 1fr;background:var(--jv-color-background);overflow:hidden}.jv-dashboard-main{display:grid;grid-template-rows:auto 1fr;min-width:0;min-height:0;overflow:hidden}.jv-dashboard-content{overflow:auto;min-width:0;min-height:0;padding:var(--jv-spacing-xl);scrollbar-width:none;-ms-overflow-style:none}.jv-dashboard-content::-webkit-scrollbar{width:0;height:0;display:none}@media(max-width:900px){.jv-dashboard-shell{grid-template-columns:1fr}.jv-dashboard-content{padding:var(--jv-spacing-lg)}}\n"] }]
|
|
20219
|
-
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], sidebarSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarSubtitle", required: false }] }], brandIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandIcon", required: false }] }], navItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "navItems", required: false }] }], sidebarCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarCollapsed", required: false }] }], mobileSidebarOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileSidebarOpen", required: false }] }], topbarTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "topbarTitle", required: false }] }], topbarSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "topbarSubtitle", required: false }] }], currentTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentTheme", required: false }] }], themeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "themeOptions", required: false }] }], topbarActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "topbarActions", required: false }] }], showThemeSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThemeSelector", required: false }] }], menuClick: [{ type: i0.Output, args: ["menuClick"] }], sidebarCollapseToggle: [{ type: i0.Output, args: ["sidebarCollapseToggle"] }], themeChange: [{ type: i0.Output, args: ["themeChange"] }], topbarActionClick: [{ type: i0.Output, args: ["topbarActionClick"] }] } });
|
|
20241
|
+
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], sidebarSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarSubtitle", required: false }] }], brandIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandIcon", required: false }] }], navItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "navItems", required: false }] }], sidebarCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarCollapsed", required: false }] }], mobileSidebarOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileSidebarOpen", required: false }] }], topbarTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "topbarTitle", required: false }] }], topbarSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "topbarSubtitle", required: false }] }], currentTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentTheme", required: false }] }], themeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "themeOptions", required: false }] }], topbarActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "topbarActions", required: false }] }], showThemeSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThemeSelector", required: false }] }], menuClick: [{ type: i0.Output, args: ["menuClick"] }], mobileClose: [{ type: i0.Output, args: ["mobileClose"] }], sidebarCollapseToggle: [{ type: i0.Output, args: ["sidebarCollapseToggle"] }], themeChange: [{ type: i0.Output, args: ["themeChange"] }], topbarActionClick: [{ type: i0.Output, args: ["topbarActionClick"] }] } });
|
|
20220
20242
|
|
|
20221
20243
|
class JvPageComponent {
|
|
20222
20244
|
eyebrow = input('', ...(ngDevMode ? [{ debugName: "eyebrow" }] : /* istanbul ignore next */ []));
|