@kanso-protocol/page-header 0.1.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.
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { EventEmitter, Output, Input, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Kanso Protocol — PageHeader
|
|
6
|
+
*
|
|
7
|
+
* Content-area header. Three sizes, optional breadcrumbs, back button,
|
|
8
|
+
* description, actions slot, tabs slot, and bottom divider.
|
|
9
|
+
*
|
|
10
|
+
* Slots (all optional):
|
|
11
|
+
* - `[kpPageHeaderBreadcrumbs]` — Breadcrumbs instance
|
|
12
|
+
* - `[kpPageHeaderTitle]` — custom title (e.g. title + inline Badge)
|
|
13
|
+
* - `[kpPageHeaderActions]` — action buttons on the right
|
|
14
|
+
* - `[kpPageHeaderTabs]` — Tabs instance under the header
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* <kp-page-header
|
|
18
|
+
* size="md"
|
|
19
|
+
* title="All projects"
|
|
20
|
+
* description="12 active projects"
|
|
21
|
+
* [showActions]="true"
|
|
22
|
+
* >
|
|
23
|
+
* <kp-breadcrumbs kpPageHeaderBreadcrumbs [items]="crumbs"/>
|
|
24
|
+
* <div kpPageHeaderActions>
|
|
25
|
+
* <kp-button appearance="ghost">Import</kp-button>
|
|
26
|
+
* <kp-button>Create</kp-button>
|
|
27
|
+
* </div>
|
|
28
|
+
* </kp-page-header>
|
|
29
|
+
*/
|
|
30
|
+
class KpPageHeaderComponent {
|
|
31
|
+
size = 'md';
|
|
32
|
+
title = 'Page title';
|
|
33
|
+
description = null;
|
|
34
|
+
showBreadcrumbs = false;
|
|
35
|
+
showBackButton = false;
|
|
36
|
+
showDescription = false;
|
|
37
|
+
showActions = false;
|
|
38
|
+
showTabs = false;
|
|
39
|
+
showBottomDivider = true;
|
|
40
|
+
backClick = new EventEmitter();
|
|
41
|
+
get hostClasses() {
|
|
42
|
+
return `kp-page-header kp-page-header--${this.size}`;
|
|
43
|
+
}
|
|
44
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KpPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
45
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: KpPageHeaderComponent, isStandalone: true, selector: "kp-page-header", inputs: { size: "size", title: "title", description: "description", showBreadcrumbs: "showBreadcrumbs", showBackButton: "showBackButton", showDescription: "showDescription", showActions: "showActions", showTabs: "showTabs", showBottomDivider: "showBottomDivider" }, outputs: { backClick: "backClick" }, host: { properties: { "class": "hostClasses" } }, ngImport: i0, template: `
|
|
46
|
+
@if (showBreadcrumbs) {
|
|
47
|
+
<div class="kp-page-header__crumbs">
|
|
48
|
+
<ng-content select="[kpPageHeaderBreadcrumbs]"/>
|
|
49
|
+
</div>
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
<div class="kp-page-header__row">
|
|
53
|
+
<div class="kp-page-header__left">
|
|
54
|
+
@if (showBackButton) {
|
|
55
|
+
<button type="button" class="kp-page-header__back" aria-label="Back" (click)="backClick.emit()">
|
|
56
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M5 12l6-6M5 12l6 6"/></svg>
|
|
57
|
+
</button>
|
|
58
|
+
}
|
|
59
|
+
<div class="kp-page-header__text">
|
|
60
|
+
<ng-content select="[kpPageHeaderTitle]">
|
|
61
|
+
<h1 class="kp-page-header__title">{{ title }}</h1>
|
|
62
|
+
</ng-content>
|
|
63
|
+
@if (showDescription && description) {
|
|
64
|
+
<p class="kp-page-header__desc">{{ description }}</p>
|
|
65
|
+
}
|
|
66
|
+
</div>
|
|
67
|
+
</div>
|
|
68
|
+
@if (showActions) {
|
|
69
|
+
<div class="kp-page-header__actions">
|
|
70
|
+
<ng-content select="[kpPageHeaderActions]"/>
|
|
71
|
+
</div>
|
|
72
|
+
}
|
|
73
|
+
</div>
|
|
74
|
+
|
|
75
|
+
@if (showTabs) {
|
|
76
|
+
<div class="kp-page-header__tabs">
|
|
77
|
+
<ng-content select="[kpPageHeaderTabs]"/>
|
|
78
|
+
</div>
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
@if (showBottomDivider) {
|
|
82
|
+
<div class="kp-page-header__divider" aria-hidden="true"></div>
|
|
83
|
+
}
|
|
84
|
+
`, isInline: true, styles: [":host{box-sizing:border-box;display:flex;flex-direction:column;width:100%;font-family:var(--kp-font-family-sans, \"Onest\", system-ui, sans-serif)}.kp-page-header__crumbs{margin-bottom:var(--kp-ph-gap-crumbs, 16px)}.kp-page-header__row{display:flex;align-items:flex-start;gap:16px;justify-content:space-between}.kp-page-header__left{display:flex;align-items:flex-start;gap:12px;flex:1 1 auto;min-width:0}.kp-page-header__back{all:unset;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin-top:2px;border-radius:8px;color:var(--kp-color-gray-600, var(--kp-color-gray-600));cursor:pointer;transition:background var(--kp-motion-duration-fast) ease}.kp-page-header__back:hover{background:var(--kp-color-gray-100, var(--kp-color-gray-100));color:var(--kp-color-gray-900, var(--kp-color-gray-900))}.kp-page-header__back svg{width:20px;height:20px}.kp-page-header__text{display:flex;flex-direction:column;gap:var(--kp-ph-gap-text, 6px);min-width:0;flex:1 1 auto}.kp-page-header__title{margin:0;font-size:var(--kp-ph-title-fs, 24px);font-weight:var(--kp-ph-title-weight, 500);color:var(--kp-color-gray-900, var(--kp-color-gray-900));line-height:1.2}.kp-page-header__desc{margin:0;font-size:var(--kp-ph-desc-fs, 14px);color:var(--kp-color-gray-600, var(--kp-color-gray-600));line-height:1.5}.kp-page-header__actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}.kp-page-header__tabs{margin-top:var(--kp-ph-gap-tabs, 24px)}.kp-page-header__divider{margin-top:var(--kp-ph-pad-bottom, 24px);height:1px;background:var(--kp-color-gray-200, var(--kp-color-gray-200))}:host(.kp-page-header--sm){--kp-ph-title-fs: 18px;--kp-ph-title-weight: 500;--kp-ph-desc-fs: 13px;--kp-ph-gap-text: 4px;--kp-ph-gap-crumbs: 12px;--kp-ph-gap-tabs: 16px;--kp-ph-pad-bottom: 16px}:host(.kp-page-header--md){--kp-ph-title-fs: 24px;--kp-ph-title-weight: 500;--kp-ph-desc-fs: 14px;--kp-ph-gap-text: 6px;--kp-ph-gap-crumbs: 16px;--kp-ph-gap-tabs: 24px;--kp-ph-pad-bottom: 24px}:host(.kp-page-header--lg){--kp-ph-title-fs: 30px;--kp-ph-title-weight: 600;--kp-ph-desc-fs: 16px;--kp-ph-gap-text: 8px;--kp-ph-gap-crumbs: 16px;--kp-ph-gap-tabs: 32px;--kp-ph-pad-bottom: 32px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
85
|
+
}
|
|
86
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KpPageHeaderComponent, decorators: [{
|
|
87
|
+
type: Component,
|
|
88
|
+
args: [{ selector: 'kp-page-header', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class]': 'hostClasses' }, template: `
|
|
89
|
+
@if (showBreadcrumbs) {
|
|
90
|
+
<div class="kp-page-header__crumbs">
|
|
91
|
+
<ng-content select="[kpPageHeaderBreadcrumbs]"/>
|
|
92
|
+
</div>
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
<div class="kp-page-header__row">
|
|
96
|
+
<div class="kp-page-header__left">
|
|
97
|
+
@if (showBackButton) {
|
|
98
|
+
<button type="button" class="kp-page-header__back" aria-label="Back" (click)="backClick.emit()">
|
|
99
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M5 12l6-6M5 12l6 6"/></svg>
|
|
100
|
+
</button>
|
|
101
|
+
}
|
|
102
|
+
<div class="kp-page-header__text">
|
|
103
|
+
<ng-content select="[kpPageHeaderTitle]">
|
|
104
|
+
<h1 class="kp-page-header__title">{{ title }}</h1>
|
|
105
|
+
</ng-content>
|
|
106
|
+
@if (showDescription && description) {
|
|
107
|
+
<p class="kp-page-header__desc">{{ description }}</p>
|
|
108
|
+
}
|
|
109
|
+
</div>
|
|
110
|
+
</div>
|
|
111
|
+
@if (showActions) {
|
|
112
|
+
<div class="kp-page-header__actions">
|
|
113
|
+
<ng-content select="[kpPageHeaderActions]"/>
|
|
114
|
+
</div>
|
|
115
|
+
}
|
|
116
|
+
</div>
|
|
117
|
+
|
|
118
|
+
@if (showTabs) {
|
|
119
|
+
<div class="kp-page-header__tabs">
|
|
120
|
+
<ng-content select="[kpPageHeaderTabs]"/>
|
|
121
|
+
</div>
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
@if (showBottomDivider) {
|
|
125
|
+
<div class="kp-page-header__divider" aria-hidden="true"></div>
|
|
126
|
+
}
|
|
127
|
+
`, styles: [":host{box-sizing:border-box;display:flex;flex-direction:column;width:100%;font-family:var(--kp-font-family-sans, \"Onest\", system-ui, sans-serif)}.kp-page-header__crumbs{margin-bottom:var(--kp-ph-gap-crumbs, 16px)}.kp-page-header__row{display:flex;align-items:flex-start;gap:16px;justify-content:space-between}.kp-page-header__left{display:flex;align-items:flex-start;gap:12px;flex:1 1 auto;min-width:0}.kp-page-header__back{all:unset;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin-top:2px;border-radius:8px;color:var(--kp-color-gray-600, var(--kp-color-gray-600));cursor:pointer;transition:background var(--kp-motion-duration-fast) ease}.kp-page-header__back:hover{background:var(--kp-color-gray-100, var(--kp-color-gray-100));color:var(--kp-color-gray-900, var(--kp-color-gray-900))}.kp-page-header__back svg{width:20px;height:20px}.kp-page-header__text{display:flex;flex-direction:column;gap:var(--kp-ph-gap-text, 6px);min-width:0;flex:1 1 auto}.kp-page-header__title{margin:0;font-size:var(--kp-ph-title-fs, 24px);font-weight:var(--kp-ph-title-weight, 500);color:var(--kp-color-gray-900, var(--kp-color-gray-900));line-height:1.2}.kp-page-header__desc{margin:0;font-size:var(--kp-ph-desc-fs, 14px);color:var(--kp-color-gray-600, var(--kp-color-gray-600));line-height:1.5}.kp-page-header__actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}.kp-page-header__tabs{margin-top:var(--kp-ph-gap-tabs, 24px)}.kp-page-header__divider{margin-top:var(--kp-ph-pad-bottom, 24px);height:1px;background:var(--kp-color-gray-200, var(--kp-color-gray-200))}:host(.kp-page-header--sm){--kp-ph-title-fs: 18px;--kp-ph-title-weight: 500;--kp-ph-desc-fs: 13px;--kp-ph-gap-text: 4px;--kp-ph-gap-crumbs: 12px;--kp-ph-gap-tabs: 16px;--kp-ph-pad-bottom: 16px}:host(.kp-page-header--md){--kp-ph-title-fs: 24px;--kp-ph-title-weight: 500;--kp-ph-desc-fs: 14px;--kp-ph-gap-text: 6px;--kp-ph-gap-crumbs: 16px;--kp-ph-gap-tabs: 24px;--kp-ph-pad-bottom: 24px}:host(.kp-page-header--lg){--kp-ph-title-fs: 30px;--kp-ph-title-weight: 600;--kp-ph-desc-fs: 16px;--kp-ph-gap-text: 8px;--kp-ph-gap-crumbs: 16px;--kp-ph-gap-tabs: 32px;--kp-ph-pad-bottom: 32px}\n"] }]
|
|
128
|
+
}], propDecorators: { size: [{
|
|
129
|
+
type: Input
|
|
130
|
+
}], title: [{
|
|
131
|
+
type: Input
|
|
132
|
+
}], description: [{
|
|
133
|
+
type: Input
|
|
134
|
+
}], showBreadcrumbs: [{
|
|
135
|
+
type: Input
|
|
136
|
+
}], showBackButton: [{
|
|
137
|
+
type: Input
|
|
138
|
+
}], showDescription: [{
|
|
139
|
+
type: Input
|
|
140
|
+
}], showActions: [{
|
|
141
|
+
type: Input
|
|
142
|
+
}], showTabs: [{
|
|
143
|
+
type: Input
|
|
144
|
+
}], showBottomDivider: [{
|
|
145
|
+
type: Input
|
|
146
|
+
}], backClick: [{
|
|
147
|
+
type: Output
|
|
148
|
+
}] } });
|
|
149
|
+
|
|
150
|
+
/**
|
|
151
|
+
* Generated bundle index. Do not edit.
|
|
152
|
+
*/
|
|
153
|
+
|
|
154
|
+
export { KpPageHeaderComponent };
|
|
155
|
+
//# sourceMappingURL=kanso-protocol-page-header.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"kanso-protocol-page-header.mjs","sources":["../../../../../packages/patterns/page-header/src/page-header.component.ts","../../../../../packages/patterns/page-header/src/kanso-protocol-page-header.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n Output,\n} from '@angular/core';\n\nexport type KpPageHeaderSize = 'sm' | 'md' | 'lg';\n\n/**\n * Kanso Protocol — PageHeader\n *\n * Content-area header. Three sizes, optional breadcrumbs, back button,\n * description, actions slot, tabs slot, and bottom divider.\n *\n * Slots (all optional):\n * - `[kpPageHeaderBreadcrumbs]` — Breadcrumbs instance\n * - `[kpPageHeaderTitle]` — custom title (e.g. title + inline Badge)\n * - `[kpPageHeaderActions]` — action buttons on the right\n * - `[kpPageHeaderTabs]` — Tabs instance under the header\n *\n * @example\n * <kp-page-header\n * size=\"md\"\n * title=\"All projects\"\n * description=\"12 active projects\"\n * [showActions]=\"true\"\n * >\n * <kp-breadcrumbs kpPageHeaderBreadcrumbs [items]=\"crumbs\"/>\n * <div kpPageHeaderActions>\n * <kp-button appearance=\"ghost\">Import</kp-button>\n * <kp-button>Create</kp-button>\n * </div>\n * </kp-page-header>\n */\n@Component({\n selector: 'kp-page-header',\n imports: [],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { '[class]': 'hostClasses' },\n template: `\n @if (showBreadcrumbs) {\n <div class=\"kp-page-header__crumbs\">\n <ng-content select=\"[kpPageHeaderBreadcrumbs]\"/>\n </div>\n }\n\n <div class=\"kp-page-header__row\">\n <div class=\"kp-page-header__left\">\n @if (showBackButton) {\n <button type=\"button\" class=\"kp-page-header__back\" aria-label=\"Back\" (click)=\"backClick.emit()\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M5 12l6-6M5 12l6 6\"/></svg>\n </button>\n }\n <div class=\"kp-page-header__text\">\n <ng-content select=\"[kpPageHeaderTitle]\">\n <h1 class=\"kp-page-header__title\">{{ title }}</h1>\n </ng-content>\n @if (showDescription && description) {\n <p class=\"kp-page-header__desc\">{{ description }}</p>\n }\n </div>\n </div>\n @if (showActions) {\n <div class=\"kp-page-header__actions\">\n <ng-content select=\"[kpPageHeaderActions]\"/>\n </div>\n }\n </div>\n\n @if (showTabs) {\n <div class=\"kp-page-header__tabs\">\n <ng-content select=\"[kpPageHeaderTabs]\"/>\n </div>\n }\n\n @if (showBottomDivider) {\n <div class=\"kp-page-header__divider\" aria-hidden=\"true\"></div>\n }\n `,\n styles: [`\n :host {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n width: 100%;\n font-family: var(--kp-font-family-sans, 'Onest', system-ui, sans-serif);\n }\n\n .kp-page-header__crumbs {\n margin-bottom: var(--kp-ph-gap-crumbs, 16px);\n }\n\n .kp-page-header__row {\n display: flex;\n align-items: flex-start;\n gap: 16px;\n justify-content: space-between;\n }\n\n .kp-page-header__left {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n flex: 1 1 auto;\n min-width: 0;\n }\n\n .kp-page-header__back {\n all: unset;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n margin-top: 2px;\n border-radius: 8px;\n color: var(--kp-color-gray-600, var(--kp-color-gray-600));\n cursor: pointer;\n transition: background var(--kp-motion-duration-fast) ease;\n }\n .kp-page-header__back:hover { background: var(--kp-color-gray-100, var(--kp-color-gray-100)); color: var(--kp-color-gray-900, var(--kp-color-gray-900)); }\n .kp-page-header__back svg { width: 20px; height: 20px; }\n\n .kp-page-header__text {\n display: flex;\n flex-direction: column;\n gap: var(--kp-ph-gap-text, 6px);\n min-width: 0;\n flex: 1 1 auto;\n }\n\n .kp-page-header__title {\n margin: 0;\n font-size: var(--kp-ph-title-fs, 24px);\n font-weight: var(--kp-ph-title-weight, 500);\n color: var(--kp-color-gray-900, var(--kp-color-gray-900));\n line-height: 1.2;\n }\n\n .kp-page-header__desc {\n margin: 0;\n font-size: var(--kp-ph-desc-fs, 14px);\n color: var(--kp-color-gray-600, var(--kp-color-gray-600));\n line-height: 1.5;\n }\n\n .kp-page-header__actions {\n display: flex;\n align-items: center;\n gap: 8px;\n flex: 0 0 auto;\n }\n\n .kp-page-header__tabs {\n margin-top: var(--kp-ph-gap-tabs, 24px);\n }\n\n .kp-page-header__divider {\n margin-top: var(--kp-ph-pad-bottom, 24px);\n height: 1px;\n background: var(--kp-color-gray-200, var(--kp-color-gray-200));\n }\n\n :host(.kp-page-header--sm) {\n --kp-ph-title-fs: 18px;\n --kp-ph-title-weight: 500;\n --kp-ph-desc-fs: 13px;\n --kp-ph-gap-text: 4px;\n --kp-ph-gap-crumbs: 12px;\n --kp-ph-gap-tabs: 16px;\n --kp-ph-pad-bottom: 16px;\n }\n :host(.kp-page-header--md) {\n --kp-ph-title-fs: 24px;\n --kp-ph-title-weight: 500;\n --kp-ph-desc-fs: 14px;\n --kp-ph-gap-text: 6px;\n --kp-ph-gap-crumbs: 16px;\n --kp-ph-gap-tabs: 24px;\n --kp-ph-pad-bottom: 24px;\n }\n :host(.kp-page-header--lg) {\n --kp-ph-title-fs: 30px;\n --kp-ph-title-weight: 600;\n --kp-ph-desc-fs: 16px;\n --kp-ph-gap-text: 8px;\n --kp-ph-gap-crumbs: 16px;\n --kp-ph-gap-tabs: 32px;\n --kp-ph-pad-bottom: 32px;\n }\n `],\n})\nexport class KpPageHeaderComponent {\n @Input() size: KpPageHeaderSize = 'md';\n\n @Input() title = 'Page title';\n @Input() description: string | null = null;\n\n @Input() showBreadcrumbs = false;\n @Input() showBackButton = false;\n @Input() showDescription = false;\n @Input() showActions = false;\n @Input() showTabs = false;\n @Input() showBottomDivider = true;\n\n @Output() backClick = new EventEmitter<void>();\n\n get hostClasses(): string {\n return `kp-page-header kp-page-header--${this.size}`;\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAUA;;;;;;;;;;;;;;;;;;;;;;;;;AAyBG;MA+JU,qBAAqB,CAAA;IACvB,IAAI,GAAqB,IAAI;IAE7B,KAAK,GAAG,YAAY;IACpB,WAAW,GAAkB,IAAI;IAEjC,eAAe,GAAG,KAAK;IACvB,cAAc,GAAG,KAAK;IACtB,eAAe,GAAG,KAAK;IACvB,WAAW,GAAG,KAAK;IACnB,QAAQ,GAAG,KAAK;IAChB,iBAAiB,GAAG,IAAI;AAEvB,IAAA,SAAS,GAAG,IAAI,YAAY,EAAQ;AAE9C,IAAA,IAAI,WAAW,GAAA;AACb,QAAA,OAAO,CAAA,+BAAA,EAAkC,IAAI,CAAC,IAAI,EAAE;IACtD;uGAjBW,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAArB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,WAAA,EAAA,aAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,QAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,EAAA,OAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,aAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAzJtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,uoEAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAkHU,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBA9JjC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,EAAA,OAAA,EACjB,EAAE,EAAA,eAAA,EACM,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC,EAAE,SAAS,EAAE,aAAa,EAAE,EAAA,QAAA,EACxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,uoEAAA,CAAA,EAAA;;sBAmHA;;sBAEA;;sBACA;;sBAEA;;sBACA;;sBACA;;sBACA;;sBACA;;sBACA;;sBAEA;;;AC/MH;;AAEG;;;;"}
|
package/package.json
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@kanso-protocol/page-header",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"license": "MIT",
|
|
5
|
+
"peerDependencies": {
|
|
6
|
+
"@angular/core": "^18.0.0",
|
|
7
|
+
"@angular/common": "^18.0.0",
|
|
8
|
+
"@kanso-protocol/core": "^0.0.1"
|
|
9
|
+
},
|
|
10
|
+
"description": "Kanso Protocol — page-header (pattern).",
|
|
11
|
+
"author": "GregNBlack",
|
|
12
|
+
"repository": {
|
|
13
|
+
"type": "git",
|
|
14
|
+
"url": "https://github.com/GregNBlack/kanso-protocol.git",
|
|
15
|
+
"directory": "packages/patterns/page-header"
|
|
16
|
+
},
|
|
17
|
+
"homepage": "https://gregnblack.github.io/kanso-protocol/?path=/docs/patterns-pageheader--docs",
|
|
18
|
+
"bugs": "https://github.com/GregNBlack/kanso-protocol/issues",
|
|
19
|
+
"keywords": [
|
|
20
|
+
"design-system",
|
|
21
|
+
"angular",
|
|
22
|
+
"kanso",
|
|
23
|
+
"page-header"
|
|
24
|
+
],
|
|
25
|
+
"sideEffects": false,
|
|
26
|
+
"module": "fesm2022/kanso-protocol-page-header.mjs",
|
|
27
|
+
"typings": "types/kanso-protocol-page-header.d.ts",
|
|
28
|
+
"exports": {
|
|
29
|
+
"./package.json": {
|
|
30
|
+
"default": "./package.json"
|
|
31
|
+
},
|
|
32
|
+
".": {
|
|
33
|
+
"types": "./types/kanso-protocol-page-header.d.ts",
|
|
34
|
+
"default": "./fesm2022/kanso-protocol-page-header.mjs"
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
"type": "module",
|
|
38
|
+
"dependencies": {
|
|
39
|
+
"tslib": "^2.3.0"
|
|
40
|
+
}
|
|
41
|
+
}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { EventEmitter } from '@angular/core';
|
|
3
|
+
|
|
4
|
+
type KpPageHeaderSize = 'sm' | 'md' | 'lg';
|
|
5
|
+
/**
|
|
6
|
+
* Kanso Protocol — PageHeader
|
|
7
|
+
*
|
|
8
|
+
* Content-area header. Three sizes, optional breadcrumbs, back button,
|
|
9
|
+
* description, actions slot, tabs slot, and bottom divider.
|
|
10
|
+
*
|
|
11
|
+
* Slots (all optional):
|
|
12
|
+
* - `[kpPageHeaderBreadcrumbs]` — Breadcrumbs instance
|
|
13
|
+
* - `[kpPageHeaderTitle]` — custom title (e.g. title + inline Badge)
|
|
14
|
+
* - `[kpPageHeaderActions]` — action buttons on the right
|
|
15
|
+
* - `[kpPageHeaderTabs]` — Tabs instance under the header
|
|
16
|
+
*
|
|
17
|
+
* @example
|
|
18
|
+
* <kp-page-header
|
|
19
|
+
* size="md"
|
|
20
|
+
* title="All projects"
|
|
21
|
+
* description="12 active projects"
|
|
22
|
+
* [showActions]="true"
|
|
23
|
+
* >
|
|
24
|
+
* <kp-breadcrumbs kpPageHeaderBreadcrumbs [items]="crumbs"/>
|
|
25
|
+
* <div kpPageHeaderActions>
|
|
26
|
+
* <kp-button appearance="ghost">Import</kp-button>
|
|
27
|
+
* <kp-button>Create</kp-button>
|
|
28
|
+
* </div>
|
|
29
|
+
* </kp-page-header>
|
|
30
|
+
*/
|
|
31
|
+
declare class KpPageHeaderComponent {
|
|
32
|
+
size: KpPageHeaderSize;
|
|
33
|
+
title: string;
|
|
34
|
+
description: string | null;
|
|
35
|
+
showBreadcrumbs: boolean;
|
|
36
|
+
showBackButton: boolean;
|
|
37
|
+
showDescription: boolean;
|
|
38
|
+
showActions: boolean;
|
|
39
|
+
showTabs: boolean;
|
|
40
|
+
showBottomDivider: boolean;
|
|
41
|
+
backClick: EventEmitter<void>;
|
|
42
|
+
get hostClasses(): string;
|
|
43
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<KpPageHeaderComponent, never>;
|
|
44
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<KpPageHeaderComponent, "kp-page-header", never, { "size": { "alias": "size"; "required": false; }; "title": { "alias": "title"; "required": false; }; "description": { "alias": "description"; "required": false; }; "showBreadcrumbs": { "alias": "showBreadcrumbs"; "required": false; }; "showBackButton": { "alias": "showBackButton"; "required": false; }; "showDescription": { "alias": "showDescription"; "required": false; }; "showActions": { "alias": "showActions"; "required": false; }; "showTabs": { "alias": "showTabs"; "required": false; }; "showBottomDivider": { "alias": "showBottomDivider"; "required": false; }; }, { "backClick": "backClick"; }, never, ["[kpPageHeaderBreadcrumbs]", "[kpPageHeaderTitle]", "[kpPageHeaderActions]", "[kpPageHeaderTabs]"], true, never>;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
export { KpPageHeaderComponent };
|
|
48
|
+
export type { KpPageHeaderSize };
|