@kanso-protocol/app-shell 0.1.0 → 0.5.3
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.
|
@@ -62,7 +62,7 @@ class KpAppShellComponent {
|
|
|
62
62
|
<ng-content select="[kpAppShellFooter]"/>
|
|
63
63
|
</footer>
|
|
64
64
|
}
|
|
65
|
-
`, isInline: true, styles: [":host{box-sizing:border-box;display:flex;flex-direction:column;width:100%;min-height:100vh;background:var(--kp-color-
|
|
65
|
+
`, isInline: true, styles: [":host{box-sizing:border-box;display:flex;flex-direction:column;width:100%;min-height:100vh;background:var(--kp-color-surface-subtle);font-family:var(--kp-font-family-sans, \"Onest\", system-ui, sans-serif)}.kp-app-shell__header,.kp-app-shell__banner,.kp-app-shell__footer{flex:0 0 auto}.kp-app-shell__body{flex:1 1 auto;display:flex;min-height:0}.kp-app-shell__sidebar{flex:0 0 auto}.kp-app-shell__main{flex:1 1 auto;min-width:0;overflow-y:auto}.kp-app-shell__footer{border-top:1px solid var(--kp-color-border-default);background:var(--kp-color-surface-base)}:host(.kp-app-shell--sidebar-right) .kp-app-shell__body{flex-direction:row-reverse}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
66
66
|
}
|
|
67
67
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KpAppShellComponent, decorators: [{
|
|
68
68
|
type: Component,
|
|
@@ -92,7 +92,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
|
|
|
92
92
|
<ng-content select="[kpAppShellFooter]"/>
|
|
93
93
|
</footer>
|
|
94
94
|
}
|
|
95
|
-
`, styles: [":host{box-sizing:border-box;display:flex;flex-direction:column;width:100%;min-height:100vh;background:var(--kp-color-
|
|
95
|
+
`, styles: [":host{box-sizing:border-box;display:flex;flex-direction:column;width:100%;min-height:100vh;background:var(--kp-color-surface-subtle);font-family:var(--kp-font-family-sans, \"Onest\", system-ui, sans-serif)}.kp-app-shell__header,.kp-app-shell__banner,.kp-app-shell__footer{flex:0 0 auto}.kp-app-shell__body{flex:1 1 auto;display:flex;min-height:0}.kp-app-shell__sidebar{flex:0 0 auto}.kp-app-shell__main{flex:1 1 auto;min-width:0;overflow-y:auto}.kp-app-shell__footer{border-top:1px solid var(--kp-color-border-default);background:var(--kp-color-surface-base)}:host(.kp-app-shell--sidebar-right) .kp-app-shell__body{flex-direction:row-reverse}\n"] }]
|
|
96
96
|
}], propDecorators: { layout: [{
|
|
97
97
|
type: Input
|
|
98
98
|
}], showHeader: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kanso-protocol-app-shell.mjs","sources":["../../../../../packages/patterns/app-shell/src/app-shell.component.ts","../../../../../packages/patterns/app-shell/src/kanso-protocol-app-shell.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n Input,\n} from '@angular/core';\n\nexport type KpAppShellLayout =\n | 'sidebar-left'\n | 'sidebar-right'\n | 'no-sidebar'\n | 'sidebar-collapsed';\n\n/**\n * Kanso Protocol — AppShell\n *\n * Root application template. Composes Header + Sidebar + Main + Footer\n * with a single layout input driving placement. All sections are\n * projection slots — drop in real `<kp-header>`, `<kp-sidebar>`,\n * `<kp-banner>`, etc. instances.\n *\n * Slots:\n * - `[kpAppShellHeader]` — topbar\n * - `[kpAppShellBanner]` — under header, spans full width\n * - `[kpAppShellSidebar]` — side nav (left / right / hidden depending on `layout`)\n * - `[kpAppShellBody]` — main content; scrolls independently\n * - `[kpAppShellFooter]` — optional footer strip\n *\n * @example\n * <kp-app-shell layout=\"sidebar-left\">\n * <kp-header kpAppShellHeader [navItems]=\"nav\"/>\n * <kp-sidebar kpAppShellSidebar [sections]=\"sections\"/>\n * <div kpAppShellBody>\n * <kp-page-header title=\"Dashboard\"/>\n * <!-- … -->\n * </div>\n * </kp-app-shell>\n */\n@Component({\n selector: 'kp-app-shell',\n imports: [],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { '[class]': 'hostClasses' },\n template: `\n @if (showHeader) {\n <div class=\"kp-app-shell__header\">\n <ng-content select=\"[kpAppShellHeader]\"/>\n </div>\n }\n @if (showBanner) {\n <div class=\"kp-app-shell__banner\">\n <ng-content select=\"[kpAppShellBanner]\"/>\n </div>\n }\n <div class=\"kp-app-shell__body\">\n @if (showSidebar && layout !== 'no-sidebar') {\n <aside class=\"kp-app-shell__sidebar\">\n <ng-content select=\"[kpAppShellSidebar]\"/>\n </aside>\n }\n <main class=\"kp-app-shell__main\">\n <ng-content select=\"[kpAppShellBody]\"/>\n </main>\n </div>\n @if (showFooter) {\n <footer class=\"kp-app-shell__footer\">\n <ng-content select=\"[kpAppShellFooter]\"/>\n </footer>\n }\n `,\n styles: [`\n :host {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n width: 100%;\n min-height: 100vh;\n background: var(--kp-color-
|
|
1
|
+
{"version":3,"file":"kanso-protocol-app-shell.mjs","sources":["../../../../../packages/patterns/app-shell/src/app-shell.component.ts","../../../../../packages/patterns/app-shell/src/kanso-protocol-app-shell.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n Input,\n} from '@angular/core';\n\nexport type KpAppShellLayout =\n | 'sidebar-left'\n | 'sidebar-right'\n | 'no-sidebar'\n | 'sidebar-collapsed';\n\n/**\n * Kanso Protocol — AppShell\n *\n * Root application template. Composes Header + Sidebar + Main + Footer\n * with a single layout input driving placement. All sections are\n * projection slots — drop in real `<kp-header>`, `<kp-sidebar>`,\n * `<kp-banner>`, etc. instances.\n *\n * Slots:\n * - `[kpAppShellHeader]` — topbar\n * - `[kpAppShellBanner]` — under header, spans full width\n * - `[kpAppShellSidebar]` — side nav (left / right / hidden depending on `layout`)\n * - `[kpAppShellBody]` — main content; scrolls independently\n * - `[kpAppShellFooter]` — optional footer strip\n *\n * @example\n * <kp-app-shell layout=\"sidebar-left\">\n * <kp-header kpAppShellHeader [navItems]=\"nav\"/>\n * <kp-sidebar kpAppShellSidebar [sections]=\"sections\"/>\n * <div kpAppShellBody>\n * <kp-page-header title=\"Dashboard\"/>\n * <!-- … -->\n * </div>\n * </kp-app-shell>\n */\n@Component({\n selector: 'kp-app-shell',\n imports: [],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { '[class]': 'hostClasses' },\n template: `\n @if (showHeader) {\n <div class=\"kp-app-shell__header\">\n <ng-content select=\"[kpAppShellHeader]\"/>\n </div>\n }\n @if (showBanner) {\n <div class=\"kp-app-shell__banner\">\n <ng-content select=\"[kpAppShellBanner]\"/>\n </div>\n }\n <div class=\"kp-app-shell__body\">\n @if (showSidebar && layout !== 'no-sidebar') {\n <aside class=\"kp-app-shell__sidebar\">\n <ng-content select=\"[kpAppShellSidebar]\"/>\n </aside>\n }\n <main class=\"kp-app-shell__main\">\n <ng-content select=\"[kpAppShellBody]\"/>\n </main>\n </div>\n @if (showFooter) {\n <footer class=\"kp-app-shell__footer\">\n <ng-content select=\"[kpAppShellFooter]\"/>\n </footer>\n }\n `,\n styles: [`\n :host {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n width: 100%;\n min-height: 100vh;\n background: var(--kp-color-surface-subtle);\n font-family: var(--kp-font-family-sans, 'Onest', system-ui, sans-serif);\n }\n\n .kp-app-shell__header,\n .kp-app-shell__banner,\n .kp-app-shell__footer {\n flex: 0 0 auto;\n }\n\n .kp-app-shell__body {\n flex: 1 1 auto;\n display: flex;\n min-height: 0;\n }\n\n .kp-app-shell__sidebar {\n flex: 0 0 auto;\n }\n\n .kp-app-shell__main {\n flex: 1 1 auto;\n min-width: 0;\n overflow-y: auto;\n }\n\n .kp-app-shell__footer {\n border-top: 1px solid var(--kp-color-border-default);\n background: var(--kp-color-surface-base);\n }\n\n /* Sidebar right: flip the body row */\n :host(.kp-app-shell--sidebar-right) .kp-app-shell__body {\n flex-direction: row-reverse;\n }\n `],\n})\nexport class KpAppShellComponent {\n @Input() layout: KpAppShellLayout = 'sidebar-left';\n @Input() showHeader = true;\n @Input() showSidebar = true;\n @Input() showFooter = false;\n @Input() showBanner = false;\n\n get hostClasses(): string {\n return `kp-app-shell kp-app-shell--${this.layout}`;\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAYA;;;;;;;;;;;;;;;;;;;;;;;;AAwBG;MA6EU,mBAAmB,CAAA;IACrB,MAAM,GAAqB,cAAc;IACzC,UAAU,GAAG,IAAI;IACjB,WAAW,GAAG,IAAI;IAClB,UAAU,GAAG,KAAK;IAClB,UAAU,GAAG,KAAK;AAE3B,IAAA,IAAI,WAAW,GAAA;AACb,QAAA,OAAO,CAAA,2BAAA,EAA8B,IAAI,CAAC,MAAM,EAAE;IACpD;uGATW,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAnB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,mBAAmB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,YAAA,EAAA,WAAA,EAAA,aAAA,EAAA,UAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,aAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAvEpB;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,soBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FA6CU,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBA5E/B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,cAAc,EAAA,OAAA,EACf,EAAE,EAAA,eAAA,EACM,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC,EAAE,SAAS,EAAE,aAAa,EAAE,EAAA,QAAA,EACxB;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,soBAAA,CAAA,EAAA;;sBA8CA;;sBACA;;sBACA;;sBACA;;sBACA;;;ACtHH;;AAEG;;;;"}
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kanso-protocol/app-shell",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.5.3",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"peerDependencies": {
|
|
6
6
|
"@angular/core": "^18.0.0",
|
|
7
7
|
"@angular/common": "^18.0.0",
|
|
8
|
-
"@kanso-protocol/core": "
|
|
8
|
+
"@kanso-protocol/core": ">=0.5.3"
|
|
9
9
|
},
|
|
10
10
|
"description": "Kanso Protocol — app-shell (pattern).",
|
|
11
11
|
"author": "GregNBlack",
|