@ngstarter-ui/components 1.0.37 → 1.0.39
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/ai/component-registry.json +20 -8
- package/fesm2022/ngstarter-ui-components-core.mjs +21 -7
- package/fesm2022/ngstarter-ui-components-core.mjs.map +1 -1
- package/fesm2022/ngstarter-ui-components-image-designer.mjs +2 -2
- package/fesm2022/ngstarter-ui-components-image-designer.mjs.map +1 -1
- package/fesm2022/ngstarter-ui-components-kanban-board.mjs +1 -1
- package/fesm2022/ngstarter-ui-components-kanban-board.mjs.map +1 -1
- package/fesm2022/ngstarter-ui-components-panel.mjs +12 -8
- package/fesm2022/ngstarter-ui-components-panel.mjs.map +1 -1
- package/fesm2022/ngstarter-ui-components-sidebar.mjs +22 -16
- package/fesm2022/ngstarter-ui-components-sidebar.mjs.map +1 -1
- package/fesm2022/ngstarter-ui-components-sidenav.mjs +2 -2
- package/fesm2022/ngstarter-ui-components-sidenav.mjs.map +1 -1
- package/package.json +1 -1
- package/types/ngstarter-ui-components-core.d.ts +2 -0
- package/types/ngstarter-ui-components-panel.d.ts +4 -2
- package/types/ngstarter-ui-components-sidebar.d.ts +6 -3
|
@@ -6315,7 +6315,9 @@
|
|
|
6315
6315
|
],
|
|
6316
6316
|
"inputs": [
|
|
6317
6317
|
"absolute",
|
|
6318
|
-
"autoHeight"
|
|
6318
|
+
"autoHeight",
|
|
6319
|
+
"block",
|
|
6320
|
+
"flex"
|
|
6319
6321
|
],
|
|
6320
6322
|
"outputs": [],
|
|
6321
6323
|
"cssTokens": [
|
|
@@ -7394,21 +7396,29 @@
|
|
|
7394
7396
|
"useWhen": "Use ngs-sidebar as the content inside a shell sidebar region, usually inside Sidenav or LayoutSidebar, when an admin app or workspace needs persistent sidebar navigation and supporting sidebar content. Compose it with ngs-sidebar-header, ngs-sidebar-body, ngs-sidebar-footer, ngs-sidebar-nav, ngs-sidebar-nav-item, ngs-sidebar-nav-group, ngs-sidebar-nav-group-toggle, ngs-sidebar-nav-group-menu, ngs-sidebar-nav-heading, ngs-sidebar-divider, ngsSidebarNavItemIcon, ngsSidebarNavItemBadge, and ngsSidebarNavGroupToggleIcon. Good for brand or workspace header, main app navigation, grouped routes, badges, active item state through activeKey, autoScrollToActiveItem, and data-driven nav templates. Sidebar owns navigation; when ngs-sidebar is not used and persistent navigation is needed, use Navigation. Do not use Sidebar as a generic left column, card, drawer content, inspector, page section, tabs, menu, or compact icon rail. Use Sidenav for responsive open, collapse, or overlay shell behavior, RailNav for compact icon navigation, SidePanel for secondary tabbed tools, Drawer for temporary overlay side content, and Panel or Card for content grouping.",
|
|
7395
7397
|
"exampleTopics": [
|
|
7396
7398
|
"Basic sidebar",
|
|
7399
|
+
"Dynamic compact sidebar",
|
|
7400
|
+
"Only compact sidebar",
|
|
7397
7401
|
"Sidebar with custom icons"
|
|
7398
7402
|
],
|
|
7399
|
-
"minimalExample": "<div class=\"h-[600px] w-[300px] relative\">\n <ngs-sidebar class=\"border border-muted rounded-2xl\">\n <ngs-sidebar-header class=\"
|
|
7403
|
+
"minimalExample": "<div class=\"h-[600px] w-[300px] relative\">\n <ngs-sidebar class=\"border border-muted rounded-2xl\">\n <ngs-sidebar-header class=\"h-14 px-4 font-bold text-primary border-b border-b-muted\">\n NGSTARTER\n </ngs-sidebar-header>\n <ngs-sidebar-body>\n <ngs-sidebar-nav activeKey=\"home\" class=\"p-4\">\n @for (navItem of navItems; track navItem) {\n @switch (navItem.type) {\n @case ('group') {\n <ngs-sidebar-nav-group>\n <ngs-sidebar-nav-group-toggle>\n <ng-container ngsSidebarNavItemIcon>\n @if (navItem.icon) {\n <ngs-icon name=\"fluent:{{ navItem.icon }}\"/>\n }\n </ng-container>\n {{ navItem.label }}\n <ngs-icon name=\"fluent:chevron-down-24-regular\" class=\"size-4\" ngsSidebarNavGroupToggleIcon/>\n </ngs-sidebar-nav-group-toggle>\n <ngs-sidebar-nav-group-menu>\n @for (childNavItem of navItem.children; track childNavItem) {\n <ngs-sidebar-nav-item [key]=\"childNavItem.key\">\n <ng-container ngsSidebarNavItemIcon>\n @if (childNavItem.icon) {\n <ngs-icon name=\"fluent:{{ childNavItem.icon }}\"/>\n }\n </ng-container>\n {{ childNavItem.label }}\n </ngs-sidebar-nav-item>\n }\n </ngs-sidebar-nav-group-menu>\n </ngs-sidebar-nav-group>\n }\n @case ('he\n...",
|
|
7400
7404
|
"exampleFiles": [
|
|
7401
7405
|
{
|
|
7402
7406
|
"name": "basic-sidebar-example",
|
|
7403
7407
|
"title": "Basic sidebar",
|
|
7404
7408
|
"file": "projects/docs/src/app/navigation/sidebar/_examples/basic-sidebar-example/basic-sidebar-example.html",
|
|
7405
|
-
"source": "<div class=\"h-[600px] w-[300px] relative\">\n <ngs-sidebar class=\"border border-muted rounded-2xl\">\n <ngs-sidebar-header class=\"
|
|
7409
|
+
"source": "<div class=\"h-[600px] w-[300px] relative\">\n <ngs-sidebar class=\"border border-muted rounded-2xl\">\n <ngs-sidebar-header class=\"h-14 px-4 font-bold text-primary border-b border-b-muted\">\n NGSTARTER\n </ngs-sidebar-header>\n <ngs-sidebar-body>\n <ngs-sidebar-nav activeKey=\"home\" class=\"p-4\">\n @for (navItem of navItems; track navItem) {\n @switch (navItem.type) {\n @case ('group') {\n <ngs-sidebar-nav-group>\n <ngs-sidebar-nav-group-toggle>\n <ng-container ngsSidebarNavItemIcon>\n @if (navItem.icon) {\n <ngs-icon name=\"fluent:{{ navItem.icon }}\"/>\n }\n </ng-container>\n {{ navItem.label }}\n <ngs-icon name=\"fluent:chevron-down-24-regular\" class=\"size-4\" ngsSidebarNavGroupToggleIcon/>\n </ngs-sidebar-nav-group-toggle>\n <ngs-sidebar-nav-group-menu>\n @for (childNavItem of navItem.children; track childNavItem) {\n <ngs-sidebar-nav-item [key]=\"childNavItem.key\">\n <ng-container ngsSidebarNavItemIcon>\n @if (childNavItem.icon) {\n <ngs-icon name=\"fluent:{{ childNavItem.icon }}\"/>\n }\n </ng-container>\n {{ childNavItem.label }}\n </ngs-sidebar-nav-item>\n }\n </ngs-sidebar-nav-group-menu>\n </ngs-sidebar-nav-group>\n }\n @case ('he\n..."
|
|
7410
|
+
},
|
|
7411
|
+
{
|
|
7412
|
+
"name": "dynamic-compact-sidebar-example",
|
|
7413
|
+
"title": "Dynamic compact sidebar",
|
|
7414
|
+
"file": "projects/docs/src/app/navigation/sidebar/_examples/dynamic-compact-sidebar-example/dynamic-compact-sidebar-example.html",
|
|
7415
|
+
"source": "<div class=\"flex flex-col gap-4\">\n <button ngsButton=\"tonal\" type=\"button\" class=\"w-fit\" (click)=\"toggleCompact()\">\n <ngs-icon [name]=\"compact() ? 'fluent:panel-left-expand-24-regular' : 'fluent:panel-left-contract-24-regular'\"/>\n {{ compact() ? 'Expand sidebar' : 'Compact sidebar' }}\n </button>\n <div class=\"h-[420px] w-full relative border border-muted rounded-2xl overflow-hidden\">\n <ngs-sidenav-container autosize hasBackdrop=\"false\">\n <ngs-sidenav [opened]=\"true\" mode=\"side\" [collapsed]=\"compact()\" disableClose>\n <ngs-sidebar class=\"border-r border-r-muted\">\n <ngs-sidebar-header class=\"h-14 px-4 border-b border-b-muted text-primary font-bold\">\n <div *ngsSidenavCollapsed class=\"text-center w-full\">NG</div>\n <span *ngsSidenavExpanded>NgStarter</span>\n </ngs-sidebar-header>\n <ngs-sidebar-body>\n <ngs-sidebar-nav activeKey=\"home\" class=\"p-4\">\n @for (navItem of navItems; track navItem.key) {\n <ngs-sidebar-nav-item [key]=\"navItem.key\" [attr.aria-label]=\"navItem.label\">\n <ngs-icon [name]=\"navItem.icon\" ngsSidebarNavItemIcon/>\n {{ navItem.label }}\n </ngs-sidebar-nav-item>\n }\n </ngs-sidebar-nav>\n </ngs-sidebar-body>\n <ngs-sidebar-footer class=\"h-14 px-4 border-t border-t-muted text-sm\">\n <div *ngsSidenavCollapsed class=\"text-center w-full\">WS</div>\n <span *ngsSidenavExpanded>Workspace</span>\n </ngs-sidebar-footer>\n </ngs-sidebar>\n </ngs-sid\n..."
|
|
7406
7416
|
},
|
|
7407
7417
|
{
|
|
7408
|
-
"name": "
|
|
7409
|
-
"title": "
|
|
7410
|
-
"file": "projects/docs/src/app/navigation/sidebar/_examples/
|
|
7411
|
-
"source": "<div class=\"h-[
|
|
7418
|
+
"name": "only-compact-sidebar-example",
|
|
7419
|
+
"title": "Only compact sidebar",
|
|
7420
|
+
"file": "projects/docs/src/app/navigation/sidebar/_examples/only-compact-sidebar-example/only-compact-sidebar-example.html",
|
|
7421
|
+
"source": "<div class=\"h-[420px] w-24 relative\">\n <ngs-sidebar onlyCompact class=\"border border-muted rounded-2xl\">\n <ngs-sidebar-header class=\"h-14 px-4 border-b border-b-muted text-primary font-bold justify-center\">\n NG\n </ngs-sidebar-header>\n <ngs-sidebar-body>\n <ngs-sidebar-nav activeKey=\"dashboard\" class=\"p-3\">\n @for (navItem of navItems; track navItem.key) {\n <ngs-sidebar-nav-item [key]=\"navItem.key\" [attr.aria-label]=\"navItem.label\">\n <ngs-icon [name]=\"navItem.icon\" ngsSidebarNavItemIcon/>\n {{ navItem.label }}\n </ngs-sidebar-nav-item>\n }\n </ngs-sidebar-nav>\n </ngs-sidebar-body>\n <ngs-sidebar-footer class=\"h-14 px-4 border-t border-t-muted justify-center\">\n <ngs-icon name=\"fluent:person-circle-24-regular\"/>\n </ngs-sidebar-footer>\n </ngs-sidebar>\n</div>"
|
|
7412
7422
|
}
|
|
7413
7423
|
],
|
|
7414
7424
|
"previewAsset": "projects/components/sidebar/preview.svg",
|
|
@@ -7456,10 +7466,12 @@
|
|
|
7456
7466
|
"inputs": [
|
|
7457
7467
|
"activeKey",
|
|
7458
7468
|
"autoScrollToActiveItem",
|
|
7469
|
+
"block",
|
|
7459
7470
|
"dataSource",
|
|
7460
7471
|
"forceActive",
|
|
7461
7472
|
"itemTypeProperty",
|
|
7462
|
-
"key"
|
|
7473
|
+
"key",
|
|
7474
|
+
"onlyCompact"
|
|
7463
7475
|
],
|
|
7464
7476
|
"outputs": [
|
|
7465
7477
|
"itemClicked"
|
|
@@ -995,14 +995,28 @@ const GlobalStore = signalStore({ providedIn: 'root' }, withState(initialGlobalS
|
|
|
995
995
|
class PageTitleStrategyService extends TitleStrategy {
|
|
996
996
|
_title = inject(Title);
|
|
997
997
|
_globalStore = inject(GlobalStore);
|
|
998
|
+
_environmentService = inject(EnvironmentService);
|
|
998
999
|
updateTitle(routerState) {
|
|
999
|
-
const title = this.buildTitle(routerState);
|
|
1000
|
-
|
|
1001
|
-
this.
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
|
|
1000
|
+
const title = this.cleanTitle(this.buildTitle(routerState));
|
|
1001
|
+
const pageTitle = this.cleanTitle(this._globalStore.pageTitle())
|
|
1002
|
+
|| this.cleanTitle(this._environmentService.getValue('pageTitle'));
|
|
1003
|
+
const currentTitle = this.cleanTitle(this._title.getTitle());
|
|
1004
|
+
const nextTitle = title && pageTitle ? `${title} | ${pageTitle}` : title || pageTitle || currentTitle;
|
|
1005
|
+
if (nextTitle) {
|
|
1006
|
+
this._title.setTitle(nextTitle);
|
|
1007
|
+
}
|
|
1008
|
+
}
|
|
1009
|
+
cleanTitle(title) {
|
|
1010
|
+
if (!title) {
|
|
1011
|
+
return null;
|
|
1012
|
+
}
|
|
1013
|
+
const clean = title
|
|
1014
|
+
.split('/')
|
|
1015
|
+
.map((part) => part.trim())
|
|
1016
|
+
.filter((part) => part && part.toLowerCase() !== 'undefined')
|
|
1017
|
+
.join(' - ')
|
|
1018
|
+
.trim();
|
|
1019
|
+
return clean || null;
|
|
1006
1020
|
}
|
|
1007
1021
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PageTitleStrategyService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
|
|
1008
1022
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PageTitleStrategyService, providedIn: 'root' });
|