@kanso-protocol/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,276 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { EventEmitter, Output, Input, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import { NgTemplateOutlet } from '@angular/common';
|
|
4
|
+
import { KpAvatarComponent } from '@kanso-protocol/avatar';
|
|
5
|
+
import { KpBadgeComponent } from '@kanso-protocol/badge';
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Kanso Protocol — Header (Topbar)
|
|
9
|
+
*
|
|
10
|
+
* App topbar pattern. Three-section layout (left / center / right)
|
|
11
|
+
* with optional logo, inline nav, search slot, notifications,
|
|
12
|
+
* theme toggle, CTA, and user menu. Data-driven; projection slots
|
|
13
|
+
* for logo, search, and extra actions.
|
|
14
|
+
*
|
|
15
|
+
* Slots:
|
|
16
|
+
* - `[kpHeaderLogo]` — replace the default logo mark + title
|
|
17
|
+
* - `[kpHeaderSearch]` — render custom search UI in the center slot
|
|
18
|
+
* (takes precedence over `[showSearch]` placeholder)
|
|
19
|
+
* - `[kpHeaderActions]` — extra action buttons before the user menu
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* <kp-header
|
|
23
|
+
* size="md"
|
|
24
|
+
* [navItems]="nav"
|
|
25
|
+
* [userName]="me.name"
|
|
26
|
+
* [userInitials]="me.initials"
|
|
27
|
+
* userRole="Admin"
|
|
28
|
+
* [showSearch]="true"
|
|
29
|
+
* [showNotifications]="true"
|
|
30
|
+
* notificationsCount="3"
|
|
31
|
+
* />
|
|
32
|
+
*/
|
|
33
|
+
class KpHeaderComponent {
|
|
34
|
+
size = 'md';
|
|
35
|
+
appearance = 'light';
|
|
36
|
+
showLogo = true;
|
|
37
|
+
logoText = 'Kanso Protocol';
|
|
38
|
+
showMainNav = true;
|
|
39
|
+
navItems = [];
|
|
40
|
+
showSearch = false;
|
|
41
|
+
searchPlaceholder = 'Search anything...';
|
|
42
|
+
showThemeToggle = false;
|
|
43
|
+
showNotifications = true;
|
|
44
|
+
notificationsCount = null;
|
|
45
|
+
showCta = false;
|
|
46
|
+
ctaLabel = 'Get started';
|
|
47
|
+
showUserMenu = true;
|
|
48
|
+
userName = null;
|
|
49
|
+
userRole = null;
|
|
50
|
+
userInitials = null;
|
|
51
|
+
showUserStatus = false;
|
|
52
|
+
themeToggle = new EventEmitter();
|
|
53
|
+
notificationsClick = new EventEmitter();
|
|
54
|
+
ctaClick = new EventEmitter();
|
|
55
|
+
userMenuClick = new EventEmitter();
|
|
56
|
+
get hostClasses() {
|
|
57
|
+
return `kp-header kp-header--${this.size} kp-header--${this.appearance}`;
|
|
58
|
+
}
|
|
59
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KpHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
60
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: KpHeaderComponent, isStandalone: true, selector: "kp-header", inputs: { size: "size", appearance: "appearance", showLogo: "showLogo", logoText: "logoText", showMainNav: "showMainNav", navItems: "navItems", showSearch: "showSearch", searchPlaceholder: "searchPlaceholder", showThemeToggle: "showThemeToggle", showNotifications: "showNotifications", notificationsCount: "notificationsCount", showCta: "showCta", ctaLabel: "ctaLabel", showUserMenu: "showUserMenu", userName: "userName", userRole: "userRole", userInitials: "userInitials", showUserStatus: "showUserStatus" }, outputs: { themeToggle: "themeToggle", notificationsClick: "notificationsClick", ctaClick: "ctaClick", userMenuClick: "userMenuClick" }, host: { attributes: { "role": "banner" }, properties: { "class": "hostClasses" } }, ngImport: i0, template: `
|
|
61
|
+
<div class="kp-header__left">
|
|
62
|
+
@if (showLogo) {
|
|
63
|
+
<div class="kp-header__logo">
|
|
64
|
+
<ng-content select="[kpHeaderLogo]">
|
|
65
|
+
<span class="kp-header__logo-mark" aria-hidden="true">
|
|
66
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
|
|
67
|
+
<path d="M3 7l9-4 9 4v10l-9 4-9-4V7zM3 7l9 4 9-4M12 11v10"/>
|
|
68
|
+
</svg>
|
|
69
|
+
</span>
|
|
70
|
+
<span class="kp-header__logo-text">{{ logoText }}</span>
|
|
71
|
+
</ng-content>
|
|
72
|
+
</div>
|
|
73
|
+
}
|
|
74
|
+
@if (showMainNav && navItems?.length) {
|
|
75
|
+
<nav class="kp-header__nav" aria-label="Primary">
|
|
76
|
+
@for (item of navItems; track item.label) {
|
|
77
|
+
<a class="kp-header__nav-item"
|
|
78
|
+
[class.kp-header__nav-item--active]="item.active"
|
|
79
|
+
[attr.href]="item.href || null"
|
|
80
|
+
[attr.aria-current]="item.active ? 'page' : null">
|
|
81
|
+
{{ item.label }}
|
|
82
|
+
</a>
|
|
83
|
+
}
|
|
84
|
+
</nav>
|
|
85
|
+
}
|
|
86
|
+
</div>
|
|
87
|
+
|
|
88
|
+
<div class="kp-header__center">
|
|
89
|
+
<ng-content select="[kpHeaderSearch]">
|
|
90
|
+
@if (showSearch) {
|
|
91
|
+
<div class="kp-header__search-placeholder" role="search">
|
|
92
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
93
|
+
<circle cx="11" cy="11" r="7"/><path d="m20 20-3-3"/>
|
|
94
|
+
</svg>
|
|
95
|
+
<span>{{ searchPlaceholder }}</span>
|
|
96
|
+
<kbd>⌘K</kbd>
|
|
97
|
+
</div>
|
|
98
|
+
}
|
|
99
|
+
</ng-content>
|
|
100
|
+
</div>
|
|
101
|
+
|
|
102
|
+
<div class="kp-header__right">
|
|
103
|
+
<ng-content select="[kpHeaderActions]"/>
|
|
104
|
+
|
|
105
|
+
@if (showThemeToggle) {
|
|
106
|
+
<button type="button" class="kp-header__icon-btn" aria-label="Toggle theme" (click)="themeToggle.emit()">
|
|
107
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>
|
|
108
|
+
</button>
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
@if (showNotifications) {
|
|
112
|
+
<button type="button" class="kp-header__icon-btn kp-header__icon-btn--notif" aria-label="Notifications" (click)="notificationsClick.emit()">
|
|
113
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 1 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10 21a2 2 0 0 0 4 0"/></svg>
|
|
114
|
+
@if (notificationsCount != null && notificationsCount !== '') {
|
|
115
|
+
<span class="kp-header__notif-badge" aria-live="polite">
|
|
116
|
+
<kp-badge size="xs" color="danger" appearance="filled" [pill]="true">{{ notificationsCount }}</kp-badge>
|
|
117
|
+
</span>
|
|
118
|
+
}
|
|
119
|
+
</button>
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
@if (showCta) {
|
|
123
|
+
<button type="button" class="kp-header__cta" (click)="ctaClick.emit()">{{ ctaLabel }}</button>
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
@if (showUserMenu) {
|
|
127
|
+
<div class="kp-header__divider" aria-hidden="true"></div>
|
|
128
|
+
<button type="button" class="kp-header__user" (click)="userMenuClick.emit()" [attr.aria-label]="userName || 'User menu'">
|
|
129
|
+
<kp-avatar size="sm" [initials]="userInitials || null" [showStatus]="showUserStatus"/>
|
|
130
|
+
@if (size !== 'sm' && (userName || userRole)) {
|
|
131
|
+
<span class="kp-header__user-text">
|
|
132
|
+
@if (userName) { <span class="kp-header__user-name">{{ userName }}</span> }
|
|
133
|
+
@if (userRole) { <span class="kp-header__user-role">{{ userRole }}</span> }
|
|
134
|
+
</span>
|
|
135
|
+
}
|
|
136
|
+
<svg class="kp-header__user-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
|
|
137
|
+
</button>
|
|
138
|
+
}
|
|
139
|
+
</div>
|
|
140
|
+
`, isInline: true, styles: [":host{box-sizing:border-box;display:flex;align-items:center;gap:var(--kp-header-gap, 24px);width:100%;height:var(--kp-header-h, 64px);padding-inline:var(--kp-header-pad, 24px);background:var(--kp-header-bg, var(--kp-color-header-bg, var(--kp-color-white)));color:var(--kp-header-fg, var(--kp-color-header-fg, var(--kp-color-gray-900)));border-bottom:1px solid var(--kp-color-header-border, var(--kp-color-gray-200));font-family:var(--kp-font-family-sans, \"Onest\", system-ui, sans-serif)}:host(.kp-header--sm){--kp-header-h: 48px;--kp-header-pad: 16px;--kp-header-gap: 16px;--kp-header-logo: 24px}:host(.kp-header--md){--kp-header-h: 64px;--kp-header-pad: 24px;--kp-header-gap: 24px;--kp-header-logo: 32px}:host(.kp-header--lg){--kp-header-h: 80px;--kp-header-pad: 32px;--kp-header-gap: 32px;--kp-header-logo: 40px}:host(.kp-header--dark){--kp-header-bg: var(--kp-color-header-bg-dark, var(--kp-color-gray-900));--kp-header-fg: var(--kp-color-header-fg-dark, var(--kp-color-white));color:var(--kp-header-fg);border-bottom-color:var(--kp-color-gray-800)}.kp-header__left,.kp-header__right{display:flex;align-items:center;gap:var(--kp-header-gap);flex:0 0 auto}.kp-header__right{gap:8px}:host(.kp-header--md) .kp-header__right,:host(.kp-header--lg) .kp-header__right{gap:12px}.kp-header__center{flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-width:0;overflow:hidden}.kp-header__logo{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:16px;color:var(--kp-header-fg)}.kp-header__logo-mark{display:inline-flex;align-items:center;justify-content:center;width:var(--kp-header-logo, 32px);height:var(--kp-header-logo, 32px);border-radius:8px;background:var(--kp-color-blue-600, var(--kp-color-blue-600));color:var(--kp-color-white)}.kp-header__logo-mark svg{width:60%;height:60%}.kp-header__nav{display:inline-flex;align-items:center;gap:4px;margin-inline-start:16px}:host(.kp-header--md) .kp-header__nav,:host(.kp-header--lg) .kp-header__nav{gap:8px}.kp-header__nav-item{display:inline-flex;align-items:center;padding:6px 12px;border-radius:6px;font-size:14px;font-weight:500;color:var(--kp-color-header-nav-item-fg-rest, var(--kp-color-gray-700));text-decoration:none;transition:background var(--kp-motion-duration-fast) ease,color .12s ease}.kp-header__nav-item:hover{color:var(--kp-color-header-nav-item-fg-hover, var(--kp-color-gray-900));background:var(--kp-color-header-nav-item-bg-hover, var(--kp-color-gray-50))}.kp-header__nav-item--active{color:var(--kp-color-header-nav-item-fg-active, var(--kp-color-blue-600))}:host(.kp-header--dark) .kp-header__nav-item{color:var(--kp-color-fg-on-dark-default)}:host(.kp-header--dark) .kp-header__nav-item:hover{background:var(--kp-color-gray-800);color:var(--kp-color-white)}:host(.kp-header--dark) .kp-header__nav-item--active{color:var(--kp-color-blue-400)}.kp-header__search-placeholder{box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;width:100%;max-width:420px;min-width:0;padding:8px 12px;border:1px solid var(--kp-color-gray-200, var(--kp-color-gray-200));border-radius:8px;font-size:13px;color:var(--kp-color-gray-500, var(--kp-color-gray-500));background:var(--kp-color-gray-50, var(--kp-color-gray-50))}.kp-header__search-placeholder svg{width:16px;height:16px;flex:0 0 auto}.kp-header__search-placeholder span{flex:1 1 auto;min-width:0;text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kp-header__search-placeholder kbd{flex:0 0 auto}.kp-header__search-placeholder kbd{font-family:inherit;font-size:11px;padding:2px 6px;background:var(--kp-color-white);border:1px solid var(--kp-color-gray-200, var(--kp-color-gray-200));border-radius:4px;color:var(--kp-color-gray-600, var(--kp-color-gray-600))}.kp-header__icon-btn{all:unset;position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;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-header__icon-btn svg{width:20px;height:20px}.kp-header__icon-btn:hover{background:var(--kp-color-gray-100, var(--kp-color-gray-100));color:var(--kp-color-gray-900, var(--kp-color-gray-900))}:host(.kp-header--dark) .kp-header__icon-btn{color:var(--kp-color-fg-on-dark-default)}:host(.kp-header--dark) .kp-header__icon-btn:hover{background:var(--kp-color-gray-800);color:var(--kp-color-white)}.kp-header__notif-badge{position:absolute;top:-2px;right:-2px;display:inline-flex}.kp-header__cta{all:unset;display:inline-flex;align-items:center;padding:8px 16px;background:var(--kp-color-blue-600, var(--kp-color-blue-600));color:var(--kp-color-white);border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:background var(--kp-motion-duration-fast) ease}.kp-header__cta:hover{background:var(--kp-color-blue-700, var(--kp-color-blue-700))}.kp-header__divider{width:1px;height:24px;margin-inline:4px;background:var(--kp-color-header-divider, var(--kp-color-gray-200))}:host(.kp-header--dark) .kp-header__divider{background:var(--kp-color-gray-700)}.kp-header__user{all:unset;display:inline-flex;align-items:center;gap:8px;padding:4px;border-radius:8px;cursor:pointer;transition:background var(--kp-motion-duration-fast) ease}.kp-header__user:hover{background:var(--kp-color-gray-100, var(--kp-color-gray-100))}:host(.kp-header--dark) .kp-header__user:hover{background:var(--kp-color-gray-800)}.kp-header__user-text{display:inline-flex;flex-direction:column;line-height:1.2}.kp-header__user-name{font-size:13px;font-weight:500;color:var(--kp-header-fg)}.kp-header__user-role{font-size:11px;color:var(--kp-color-gray-500, var(--kp-color-gray-500))}:host(.kp-header--dark) .kp-header__user-role{color:var(--kp-color-fg-on-dark-subtle)}.kp-header__user-chevron{width:14px;height:14px;color:var(--kp-color-gray-500, var(--kp-color-gray-500))}:host(.kp-header--dark) .kp-header__user-chevron{color:var(--kp-color-fg-on-dark-subtle)}\n"], dependencies: [{ kind: "component", type: KpAvatarComponent, selector: "kp-avatar", inputs: ["size", "shape", "appearance", "initials", "src", "alt", "showStatus", "status", "showRing", "ariaLabelOverride"] }, { kind: "component", type: KpBadgeComponent, selector: "kp-badge", inputs: ["size", "appearance", "color", "pill", "showLeadingDot", "closable"], outputs: ["close"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
141
|
+
}
|
|
142
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KpHeaderComponent, decorators: [{
|
|
143
|
+
type: Component,
|
|
144
|
+
args: [{ selector: 'kp-header', imports: [NgTemplateOutlet, KpAvatarComponent, KpBadgeComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class]': 'hostClasses', role: 'banner' }, template: `
|
|
145
|
+
<div class="kp-header__left">
|
|
146
|
+
@if (showLogo) {
|
|
147
|
+
<div class="kp-header__logo">
|
|
148
|
+
<ng-content select="[kpHeaderLogo]">
|
|
149
|
+
<span class="kp-header__logo-mark" aria-hidden="true">
|
|
150
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
|
|
151
|
+
<path d="M3 7l9-4 9 4v10l-9 4-9-4V7zM3 7l9 4 9-4M12 11v10"/>
|
|
152
|
+
</svg>
|
|
153
|
+
</span>
|
|
154
|
+
<span class="kp-header__logo-text">{{ logoText }}</span>
|
|
155
|
+
</ng-content>
|
|
156
|
+
</div>
|
|
157
|
+
}
|
|
158
|
+
@if (showMainNav && navItems?.length) {
|
|
159
|
+
<nav class="kp-header__nav" aria-label="Primary">
|
|
160
|
+
@for (item of navItems; track item.label) {
|
|
161
|
+
<a class="kp-header__nav-item"
|
|
162
|
+
[class.kp-header__nav-item--active]="item.active"
|
|
163
|
+
[attr.href]="item.href || null"
|
|
164
|
+
[attr.aria-current]="item.active ? 'page' : null">
|
|
165
|
+
{{ item.label }}
|
|
166
|
+
</a>
|
|
167
|
+
}
|
|
168
|
+
</nav>
|
|
169
|
+
}
|
|
170
|
+
</div>
|
|
171
|
+
|
|
172
|
+
<div class="kp-header__center">
|
|
173
|
+
<ng-content select="[kpHeaderSearch]">
|
|
174
|
+
@if (showSearch) {
|
|
175
|
+
<div class="kp-header__search-placeholder" role="search">
|
|
176
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
177
|
+
<circle cx="11" cy="11" r="7"/><path d="m20 20-3-3"/>
|
|
178
|
+
</svg>
|
|
179
|
+
<span>{{ searchPlaceholder }}</span>
|
|
180
|
+
<kbd>⌘K</kbd>
|
|
181
|
+
</div>
|
|
182
|
+
}
|
|
183
|
+
</ng-content>
|
|
184
|
+
</div>
|
|
185
|
+
|
|
186
|
+
<div class="kp-header__right">
|
|
187
|
+
<ng-content select="[kpHeaderActions]"/>
|
|
188
|
+
|
|
189
|
+
@if (showThemeToggle) {
|
|
190
|
+
<button type="button" class="kp-header__icon-btn" aria-label="Toggle theme" (click)="themeToggle.emit()">
|
|
191
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>
|
|
192
|
+
</button>
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
@if (showNotifications) {
|
|
196
|
+
<button type="button" class="kp-header__icon-btn kp-header__icon-btn--notif" aria-label="Notifications" (click)="notificationsClick.emit()">
|
|
197
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 1 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10 21a2 2 0 0 0 4 0"/></svg>
|
|
198
|
+
@if (notificationsCount != null && notificationsCount !== '') {
|
|
199
|
+
<span class="kp-header__notif-badge" aria-live="polite">
|
|
200
|
+
<kp-badge size="xs" color="danger" appearance="filled" [pill]="true">{{ notificationsCount }}</kp-badge>
|
|
201
|
+
</span>
|
|
202
|
+
}
|
|
203
|
+
</button>
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
@if (showCta) {
|
|
207
|
+
<button type="button" class="kp-header__cta" (click)="ctaClick.emit()">{{ ctaLabel }}</button>
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
@if (showUserMenu) {
|
|
211
|
+
<div class="kp-header__divider" aria-hidden="true"></div>
|
|
212
|
+
<button type="button" class="kp-header__user" (click)="userMenuClick.emit()" [attr.aria-label]="userName || 'User menu'">
|
|
213
|
+
<kp-avatar size="sm" [initials]="userInitials || null" [showStatus]="showUserStatus"/>
|
|
214
|
+
@if (size !== 'sm' && (userName || userRole)) {
|
|
215
|
+
<span class="kp-header__user-text">
|
|
216
|
+
@if (userName) { <span class="kp-header__user-name">{{ userName }}</span> }
|
|
217
|
+
@if (userRole) { <span class="kp-header__user-role">{{ userRole }}</span> }
|
|
218
|
+
</span>
|
|
219
|
+
}
|
|
220
|
+
<svg class="kp-header__user-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
|
|
221
|
+
</button>
|
|
222
|
+
}
|
|
223
|
+
</div>
|
|
224
|
+
`, styles: [":host{box-sizing:border-box;display:flex;align-items:center;gap:var(--kp-header-gap, 24px);width:100%;height:var(--kp-header-h, 64px);padding-inline:var(--kp-header-pad, 24px);background:var(--kp-header-bg, var(--kp-color-header-bg, var(--kp-color-white)));color:var(--kp-header-fg, var(--kp-color-header-fg, var(--kp-color-gray-900)));border-bottom:1px solid var(--kp-color-header-border, var(--kp-color-gray-200));font-family:var(--kp-font-family-sans, \"Onest\", system-ui, sans-serif)}:host(.kp-header--sm){--kp-header-h: 48px;--kp-header-pad: 16px;--kp-header-gap: 16px;--kp-header-logo: 24px}:host(.kp-header--md){--kp-header-h: 64px;--kp-header-pad: 24px;--kp-header-gap: 24px;--kp-header-logo: 32px}:host(.kp-header--lg){--kp-header-h: 80px;--kp-header-pad: 32px;--kp-header-gap: 32px;--kp-header-logo: 40px}:host(.kp-header--dark){--kp-header-bg: var(--kp-color-header-bg-dark, var(--kp-color-gray-900));--kp-header-fg: var(--kp-color-header-fg-dark, var(--kp-color-white));color:var(--kp-header-fg);border-bottom-color:var(--kp-color-gray-800)}.kp-header__left,.kp-header__right{display:flex;align-items:center;gap:var(--kp-header-gap);flex:0 0 auto}.kp-header__right{gap:8px}:host(.kp-header--md) .kp-header__right,:host(.kp-header--lg) .kp-header__right{gap:12px}.kp-header__center{flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-width:0;overflow:hidden}.kp-header__logo{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:16px;color:var(--kp-header-fg)}.kp-header__logo-mark{display:inline-flex;align-items:center;justify-content:center;width:var(--kp-header-logo, 32px);height:var(--kp-header-logo, 32px);border-radius:8px;background:var(--kp-color-blue-600, var(--kp-color-blue-600));color:var(--kp-color-white)}.kp-header__logo-mark svg{width:60%;height:60%}.kp-header__nav{display:inline-flex;align-items:center;gap:4px;margin-inline-start:16px}:host(.kp-header--md) .kp-header__nav,:host(.kp-header--lg) .kp-header__nav{gap:8px}.kp-header__nav-item{display:inline-flex;align-items:center;padding:6px 12px;border-radius:6px;font-size:14px;font-weight:500;color:var(--kp-color-header-nav-item-fg-rest, var(--kp-color-gray-700));text-decoration:none;transition:background var(--kp-motion-duration-fast) ease,color .12s ease}.kp-header__nav-item:hover{color:var(--kp-color-header-nav-item-fg-hover, var(--kp-color-gray-900));background:var(--kp-color-header-nav-item-bg-hover, var(--kp-color-gray-50))}.kp-header__nav-item--active{color:var(--kp-color-header-nav-item-fg-active, var(--kp-color-blue-600))}:host(.kp-header--dark) .kp-header__nav-item{color:var(--kp-color-fg-on-dark-default)}:host(.kp-header--dark) .kp-header__nav-item:hover{background:var(--kp-color-gray-800);color:var(--kp-color-white)}:host(.kp-header--dark) .kp-header__nav-item--active{color:var(--kp-color-blue-400)}.kp-header__search-placeholder{box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;width:100%;max-width:420px;min-width:0;padding:8px 12px;border:1px solid var(--kp-color-gray-200, var(--kp-color-gray-200));border-radius:8px;font-size:13px;color:var(--kp-color-gray-500, var(--kp-color-gray-500));background:var(--kp-color-gray-50, var(--kp-color-gray-50))}.kp-header__search-placeholder svg{width:16px;height:16px;flex:0 0 auto}.kp-header__search-placeholder span{flex:1 1 auto;min-width:0;text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kp-header__search-placeholder kbd{flex:0 0 auto}.kp-header__search-placeholder kbd{font-family:inherit;font-size:11px;padding:2px 6px;background:var(--kp-color-white);border:1px solid var(--kp-color-gray-200, var(--kp-color-gray-200));border-radius:4px;color:var(--kp-color-gray-600, var(--kp-color-gray-600))}.kp-header__icon-btn{all:unset;position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;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-header__icon-btn svg{width:20px;height:20px}.kp-header__icon-btn:hover{background:var(--kp-color-gray-100, var(--kp-color-gray-100));color:var(--kp-color-gray-900, var(--kp-color-gray-900))}:host(.kp-header--dark) .kp-header__icon-btn{color:var(--kp-color-fg-on-dark-default)}:host(.kp-header--dark) .kp-header__icon-btn:hover{background:var(--kp-color-gray-800);color:var(--kp-color-white)}.kp-header__notif-badge{position:absolute;top:-2px;right:-2px;display:inline-flex}.kp-header__cta{all:unset;display:inline-flex;align-items:center;padding:8px 16px;background:var(--kp-color-blue-600, var(--kp-color-blue-600));color:var(--kp-color-white);border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:background var(--kp-motion-duration-fast) ease}.kp-header__cta:hover{background:var(--kp-color-blue-700, var(--kp-color-blue-700))}.kp-header__divider{width:1px;height:24px;margin-inline:4px;background:var(--kp-color-header-divider, var(--kp-color-gray-200))}:host(.kp-header--dark) .kp-header__divider{background:var(--kp-color-gray-700)}.kp-header__user{all:unset;display:inline-flex;align-items:center;gap:8px;padding:4px;border-radius:8px;cursor:pointer;transition:background var(--kp-motion-duration-fast) ease}.kp-header__user:hover{background:var(--kp-color-gray-100, var(--kp-color-gray-100))}:host(.kp-header--dark) .kp-header__user:hover{background:var(--kp-color-gray-800)}.kp-header__user-text{display:inline-flex;flex-direction:column;line-height:1.2}.kp-header__user-name{font-size:13px;font-weight:500;color:var(--kp-header-fg)}.kp-header__user-role{font-size:11px;color:var(--kp-color-gray-500, var(--kp-color-gray-500))}:host(.kp-header--dark) .kp-header__user-role{color:var(--kp-color-fg-on-dark-subtle)}.kp-header__user-chevron{width:14px;height:14px;color:var(--kp-color-gray-500, var(--kp-color-gray-500))}:host(.kp-header--dark) .kp-header__user-chevron{color:var(--kp-color-fg-on-dark-subtle)}\n"] }]
|
|
225
|
+
}], propDecorators: { size: [{
|
|
226
|
+
type: Input
|
|
227
|
+
}], appearance: [{
|
|
228
|
+
type: Input
|
|
229
|
+
}], showLogo: [{
|
|
230
|
+
type: Input
|
|
231
|
+
}], logoText: [{
|
|
232
|
+
type: Input
|
|
233
|
+
}], showMainNav: [{
|
|
234
|
+
type: Input
|
|
235
|
+
}], navItems: [{
|
|
236
|
+
type: Input
|
|
237
|
+
}], showSearch: [{
|
|
238
|
+
type: Input
|
|
239
|
+
}], searchPlaceholder: [{
|
|
240
|
+
type: Input
|
|
241
|
+
}], showThemeToggle: [{
|
|
242
|
+
type: Input
|
|
243
|
+
}], showNotifications: [{
|
|
244
|
+
type: Input
|
|
245
|
+
}], notificationsCount: [{
|
|
246
|
+
type: Input
|
|
247
|
+
}], showCta: [{
|
|
248
|
+
type: Input
|
|
249
|
+
}], ctaLabel: [{
|
|
250
|
+
type: Input
|
|
251
|
+
}], showUserMenu: [{
|
|
252
|
+
type: Input
|
|
253
|
+
}], userName: [{
|
|
254
|
+
type: Input
|
|
255
|
+
}], userRole: [{
|
|
256
|
+
type: Input
|
|
257
|
+
}], userInitials: [{
|
|
258
|
+
type: Input
|
|
259
|
+
}], showUserStatus: [{
|
|
260
|
+
type: Input
|
|
261
|
+
}], themeToggle: [{
|
|
262
|
+
type: Output
|
|
263
|
+
}], notificationsClick: [{
|
|
264
|
+
type: Output
|
|
265
|
+
}], ctaClick: [{
|
|
266
|
+
type: Output
|
|
267
|
+
}], userMenuClick: [{
|
|
268
|
+
type: Output
|
|
269
|
+
}] } });
|
|
270
|
+
|
|
271
|
+
/**
|
|
272
|
+
* Generated bundle index. Do not edit.
|
|
273
|
+
*/
|
|
274
|
+
|
|
275
|
+
export { KpHeaderComponent };
|
|
276
|
+
//# sourceMappingURL=kanso-protocol-header.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"kanso-protocol-header.mjs","sources":["../../../../../packages/patterns/header/src/header.component.ts","../../../../../packages/patterns/header/src/kanso-protocol-header.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n Output,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { KpAvatarComponent } from '@kanso-protocol/avatar';\nimport { KpBadgeComponent } from '@kanso-protocol/badge';\n\nexport type KpHeaderSize = 'sm' | 'md' | 'lg';\nexport type KpHeaderAppearance = 'light' | 'dark';\n\nexport interface KpHeaderNavItem {\n label: string;\n href?: string;\n active?: boolean;\n}\n\n/**\n * Kanso Protocol — Header (Topbar)\n *\n * App topbar pattern. Three-section layout (left / center / right)\n * with optional logo, inline nav, search slot, notifications,\n * theme toggle, CTA, and user menu. Data-driven; projection slots\n * for logo, search, and extra actions.\n *\n * Slots:\n * - `[kpHeaderLogo]` — replace the default logo mark + title\n * - `[kpHeaderSearch]` — render custom search UI in the center slot\n * (takes precedence over `[showSearch]` placeholder)\n * - `[kpHeaderActions]` — extra action buttons before the user menu\n *\n * @example\n * <kp-header\n * size=\"md\"\n * [navItems]=\"nav\"\n * [userName]=\"me.name\"\n * [userInitials]=\"me.initials\"\n * userRole=\"Admin\"\n * [showSearch]=\"true\"\n * [showNotifications]=\"true\"\n * notificationsCount=\"3\"\n * />\n */\n@Component({\n selector: 'kp-header',\n imports: [NgTemplateOutlet, KpAvatarComponent, KpBadgeComponent],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { '[class]': 'hostClasses', role: 'banner' },\n template: `\n <div class=\"kp-header__left\">\n @if (showLogo) {\n <div class=\"kp-header__logo\">\n <ng-content select=\"[kpHeaderLogo]\">\n <span class=\"kp-header__logo-mark\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M3 7l9-4 9 4v10l-9 4-9-4V7zM3 7l9 4 9-4M12 11v10\"/>\n </svg>\n </span>\n <span class=\"kp-header__logo-text\">{{ logoText }}</span>\n </ng-content>\n </div>\n }\n @if (showMainNav && navItems?.length) {\n <nav class=\"kp-header__nav\" aria-label=\"Primary\">\n @for (item of navItems; track item.label) {\n <a class=\"kp-header__nav-item\"\n [class.kp-header__nav-item--active]=\"item.active\"\n [attr.href]=\"item.href || null\"\n [attr.aria-current]=\"item.active ? 'page' : null\">\n {{ item.label }}\n </a>\n }\n </nav>\n }\n </div>\n\n <div class=\"kp-header__center\">\n <ng-content select=\"[kpHeaderSearch]\">\n @if (showSearch) {\n <div class=\"kp-header__search-placeholder\" role=\"search\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <circle cx=\"11\" cy=\"11\" r=\"7\"/><path d=\"m20 20-3-3\"/>\n </svg>\n <span>{{ searchPlaceholder }}</span>\n <kbd>⌘K</kbd>\n </div>\n }\n </ng-content>\n </div>\n\n <div class=\"kp-header__right\">\n <ng-content select=\"[kpHeaderActions]\"/>\n\n @if (showThemeToggle) {\n <button type=\"button\" class=\"kp-header__icon-btn\" aria-label=\"Toggle theme\" (click)=\"themeToggle.emit()\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"4\"/><path d=\"M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41\"/></svg>\n </button>\n }\n\n @if (showNotifications) {\n <button type=\"button\" class=\"kp-header__icon-btn kp-header__icon-btn--notif\" aria-label=\"Notifications\" (click)=\"notificationsClick.emit()\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 8a6 6 0 1 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10 21a2 2 0 0 0 4 0\"/></svg>\n @if (notificationsCount != null && notificationsCount !== '') {\n <span class=\"kp-header__notif-badge\" aria-live=\"polite\">\n <kp-badge size=\"xs\" color=\"danger\" appearance=\"filled\" [pill]=\"true\">{{ notificationsCount }}</kp-badge>\n </span>\n }\n </button>\n }\n\n @if (showCta) {\n <button type=\"button\" class=\"kp-header__cta\" (click)=\"ctaClick.emit()\">{{ ctaLabel }}</button>\n }\n\n @if (showUserMenu) {\n <div class=\"kp-header__divider\" aria-hidden=\"true\"></div>\n <button type=\"button\" class=\"kp-header__user\" (click)=\"userMenuClick.emit()\" [attr.aria-label]=\"userName || 'User menu'\">\n <kp-avatar size=\"sm\" [initials]=\"userInitials || null\" [showStatus]=\"showUserStatus\"/>\n @if (size !== 'sm' && (userName || userRole)) {\n <span class=\"kp-header__user-text\">\n @if (userName) { <span class=\"kp-header__user-name\">{{ userName }}</span> }\n @if (userRole) { <span class=\"kp-header__user-role\">{{ userRole }}</span> }\n </span>\n }\n <svg class=\"kp-header__user-chevron\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 9 6 6 6-6\"/></svg>\n </button>\n }\n </div>\n `,\n styles: [`\n :host {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n gap: var(--kp-header-gap, 24px);\n width: 100%;\n height: var(--kp-header-h, 64px);\n padding-inline: var(--kp-header-pad, 24px);\n background: var(--kp-header-bg, var(--kp-color-header-bg, var(--kp-color-white)));\n color: var(--kp-header-fg, var(--kp-color-header-fg, var(--kp-color-gray-900)));\n border-bottom: 1px solid var(--kp-color-header-border, var(--kp-color-gray-200));\n font-family: var(--kp-font-family-sans, 'Onest', system-ui, sans-serif);\n }\n\n :host(.kp-header--sm) { --kp-header-h: 48px; --kp-header-pad: 16px; --kp-header-gap: 16px; --kp-header-logo: 24px; }\n :host(.kp-header--md) { --kp-header-h: 64px; --kp-header-pad: 24px; --kp-header-gap: 24px; --kp-header-logo: 32px; }\n :host(.kp-header--lg) { --kp-header-h: 80px; --kp-header-pad: 32px; --kp-header-gap: 32px; --kp-header-logo: 40px; }\n\n :host(.kp-header--dark) {\n --kp-header-bg: var(--kp-color-header-bg-dark, var(--kp-color-gray-900));\n --kp-header-fg: var(--kp-color-header-fg-dark, var(--kp-color-white));\n color: var(--kp-header-fg);\n border-bottom-color: var(--kp-color-gray-800);\n }\n\n .kp-header__left,\n .kp-header__right {\n display: flex;\n align-items: center;\n gap: var(--kp-header-gap);\n flex: 0 0 auto;\n }\n .kp-header__right { gap: 8px; }\n :host(.kp-header--md) .kp-header__right,\n :host(.kp-header--lg) .kp-header__right { gap: 12px; }\n\n .kp-header__center {\n flex: 1 1 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 0;\n overflow: hidden;\n }\n\n .kp-header__logo {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n font-weight: 600;\n font-size: 16px;\n color: var(--kp-header-fg);\n }\n .kp-header__logo-mark {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--kp-header-logo, 32px);\n height: var(--kp-header-logo, 32px);\n border-radius: 8px;\n background: var(--kp-color-blue-600, var(--kp-color-blue-600));\n color: var(--kp-color-white);\n }\n .kp-header__logo-mark svg { width: 60%; height: 60%; }\n\n .kp-header__nav {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n margin-inline-start: 16px;\n }\n :host(.kp-header--md) .kp-header__nav,\n :host(.kp-header--lg) .kp-header__nav { gap: 8px; }\n\n .kp-header__nav-item {\n display: inline-flex;\n align-items: center;\n padding: 6px 12px;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n color: var(--kp-color-header-nav-item-fg-rest, var(--kp-color-gray-700));\n text-decoration: none;\n transition: background var(--kp-motion-duration-fast) ease, color 120ms ease;\n }\n .kp-header__nav-item:hover {\n color: var(--kp-color-header-nav-item-fg-hover, var(--kp-color-gray-900));\n background: var(--kp-color-header-nav-item-bg-hover, var(--kp-color-gray-50));\n }\n .kp-header__nav-item--active {\n color: var(--kp-color-header-nav-item-fg-active, var(--kp-color-blue-600));\n }\n :host(.kp-header--dark) .kp-header__nav-item { color: var(--kp-color-fg-on-dark-default); }\n :host(.kp-header--dark) .kp-header__nav-item:hover { background: var(--kp-color-gray-800); color: var(--kp-color-white); }\n :host(.kp-header--dark) .kp-header__nav-item--active { color: var(--kp-color-blue-400); }\n\n .kp-header__search-placeholder {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n width: 100%;\n max-width: 420px;\n min-width: 0;\n padding: 8px 12px;\n border: 1px solid var(--kp-color-gray-200, var(--kp-color-gray-200));\n border-radius: 8px;\n font-size: 13px;\n color: var(--kp-color-gray-500, var(--kp-color-gray-500));\n background: var(--kp-color-gray-50, var(--kp-color-gray-50));\n }\n .kp-header__search-placeholder svg { width: 16px; height: 16px; flex: 0 0 auto; }\n .kp-header__search-placeholder span {\n flex: 1 1 auto;\n min-width: 0;\n text-align: start;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n .kp-header__search-placeholder kbd { flex: 0 0 auto; }\n .kp-header__search-placeholder kbd {\n font-family: inherit;\n font-size: 11px;\n padding: 2px 6px;\n background: var(--kp-color-white);\n border: 1px solid var(--kp-color-gray-200, var(--kp-color-gray-200));\n border-radius: 4px;\n color: var(--kp-color-gray-600, var(--kp-color-gray-600));\n }\n\n .kp-header__icon-btn {\n all: unset;\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\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-header__icon-btn svg { width: 20px; height: 20px; }\n .kp-header__icon-btn:hover { background: var(--kp-color-gray-100, var(--kp-color-gray-100)); color: var(--kp-color-gray-900, var(--kp-color-gray-900)); }\n :host(.kp-header--dark) .kp-header__icon-btn { color: var(--kp-color-fg-on-dark-default); }\n :host(.kp-header--dark) .kp-header__icon-btn:hover { background: var(--kp-color-gray-800); color: var(--kp-color-white); }\n\n .kp-header__notif-badge {\n position: absolute;\n top: -2px;\n right: -2px;\n display: inline-flex;\n }\n\n .kp-header__cta {\n all: unset;\n display: inline-flex;\n align-items: center;\n padding: 8px 16px;\n background: var(--kp-color-blue-600, var(--kp-color-blue-600));\n color: var(--kp-color-white);\n border-radius: 8px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: background var(--kp-motion-duration-fast) ease;\n }\n .kp-header__cta:hover { background: var(--kp-color-blue-700, var(--kp-color-blue-700)); }\n\n .kp-header__divider {\n width: 1px;\n height: 24px;\n margin-inline: 4px;\n background: var(--kp-color-header-divider, var(--kp-color-gray-200));\n }\n :host(.kp-header--dark) .kp-header__divider { background: var(--kp-color-gray-700); }\n\n .kp-header__user {\n all: unset;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 4px;\n border-radius: 8px;\n cursor: pointer;\n transition: background var(--kp-motion-duration-fast) ease;\n }\n .kp-header__user:hover { background: var(--kp-color-gray-100, var(--kp-color-gray-100)); }\n :host(.kp-header--dark) .kp-header__user:hover { background: var(--kp-color-gray-800); }\n\n .kp-header__user-text {\n display: inline-flex;\n flex-direction: column;\n line-height: 1.2;\n }\n .kp-header__user-name { font-size: 13px; font-weight: 500; color: var(--kp-header-fg); }\n .kp-header__user-role { font-size: 11px; color: var(--kp-color-gray-500, var(--kp-color-gray-500)); }\n :host(.kp-header--dark) .kp-header__user-role { color: var(--kp-color-fg-on-dark-subtle); }\n\n .kp-header__user-chevron { width: 14px; height: 14px; color: var(--kp-color-gray-500, var(--kp-color-gray-500)); }\n :host(.kp-header--dark) .kp-header__user-chevron { color: var(--kp-color-fg-on-dark-subtle); }\n `],\n})\nexport class KpHeaderComponent {\n @Input() size: KpHeaderSize = 'md';\n @Input() appearance: KpHeaderAppearance = 'light';\n\n @Input() showLogo = true;\n @Input() logoText = 'Kanso Protocol';\n\n @Input() showMainNav = true;\n @Input() navItems: KpHeaderNavItem[] = [];\n\n @Input() showSearch = false;\n @Input() searchPlaceholder = 'Search anything...';\n\n @Input() showThemeToggle = false;\n\n @Input() showNotifications = true;\n @Input() notificationsCount: string | number | null = null;\n\n @Input() showCta = false;\n @Input() ctaLabel = 'Get started';\n\n @Input() showUserMenu = true;\n @Input() userName: string | null = null;\n @Input() userRole: string | null = null;\n @Input() userInitials: string | null = null;\n @Input() showUserStatus = false;\n\n @Output() themeToggle = new EventEmitter<void>();\n @Output() notificationsClick = new EventEmitter<void>();\n @Output() ctaClick = new EventEmitter<void>();\n @Output() userMenuClick = new EventEmitter<void>();\n\n get hostClasses(): string {\n return `kp-header kp-header--${this.size} kp-header--${this.appearance}`;\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAoBA;;;;;;;;;;;;;;;;;;;;;;;;;AAyBG;MAqSU,iBAAiB,CAAA;IACnB,IAAI,GAAiB,IAAI;IACzB,UAAU,GAAuB,OAAO;IAExC,QAAQ,GAAG,IAAI;IACf,QAAQ,GAAG,gBAAgB;IAE3B,WAAW,GAAG,IAAI;IAClB,QAAQ,GAAsB,EAAE;IAEhC,UAAU,GAAG,KAAK;IAClB,iBAAiB,GAAG,oBAAoB;IAExC,eAAe,GAAG,KAAK;IAEvB,iBAAiB,GAAG,IAAI;IACxB,kBAAkB,GAA2B,IAAI;IAEjD,OAAO,GAAG,KAAK;IACf,QAAQ,GAAG,aAAa;IAExB,YAAY,GAAG,IAAI;IACnB,QAAQ,GAAkB,IAAI;IAC9B,QAAQ,GAAkB,IAAI;IAC9B,YAAY,GAAkB,IAAI;IAClC,cAAc,GAAG,KAAK;AAErB,IAAA,WAAW,GAAG,IAAI,YAAY,EAAQ;AACtC,IAAA,kBAAkB,GAAG,IAAI,YAAY,EAAQ;AAC7C,IAAA,QAAQ,GAAG,IAAI,YAAY,EAAQ;AACnC,IAAA,aAAa,GAAG,IAAI,YAAY,EAAQ;AAElD,IAAA,IAAI,WAAW,GAAA;QACb,OAAO,CAAA,qBAAA,EAAwB,IAAI,CAAC,IAAI,eAAe,IAAI,CAAC,UAAU,CAAA,CAAE;IAC1E;uGAlCW,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,UAAA,EAAA,WAAA,EAAA,aAAA,EAAA,QAAA,EAAA,UAAA,EAAA,UAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,UAAA,EAAA,YAAA,EAAA,cAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,UAAA,EAAA,YAAA,EAAA,cAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,aAAA,EAAA,eAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,aAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EA/RlB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgFT,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,m1LAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAnF2B,iBAAiB,kLAAE,gBAAgB,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,YAAA,EAAA,OAAA,EAAA,MAAA,EAAA,gBAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,OAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAkSpD,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBApS7B,SAAS;+BACE,WAAW,EAAA,OAAA,EACZ,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC,EAAA,eAAA,EAC/C,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC,EAAE,SAAS,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAA,QAAA,EACxC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,m1LAAA,CAAA,EAAA;;sBAgNA;;sBACA;;sBAEA;;sBACA;;sBAEA;;sBACA;;sBAEA;;sBACA;;sBAEA;;sBAEA;;sBACA;;sBAEA;;sBACA;;sBAEA;;sBACA;;sBACA;;sBACA;;sBACA;;sBAEA;;sBACA;;sBACA;;sBACA;;;AChXH;;AAEG;;;;"}
|
package/package.json
ADDED
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@kanso-protocol/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
|
+
"@kanso-protocol/avatar": ">=0.1.0",
|
|
10
|
+
"@kanso-protocol/badge": ">=0.1.0"
|
|
11
|
+
},
|
|
12
|
+
"description": "Kanso Protocol — header (pattern).",
|
|
13
|
+
"author": "GregNBlack",
|
|
14
|
+
"repository": {
|
|
15
|
+
"type": "git",
|
|
16
|
+
"url": "https://github.com/GregNBlack/kanso-protocol.git",
|
|
17
|
+
"directory": "packages/patterns/header"
|
|
18
|
+
},
|
|
19
|
+
"homepage": "https://gregnblack.github.io/kanso-protocol/?path=/docs/patterns-header--docs",
|
|
20
|
+
"bugs": "https://github.com/GregNBlack/kanso-protocol/issues",
|
|
21
|
+
"keywords": [
|
|
22
|
+
"design-system",
|
|
23
|
+
"angular",
|
|
24
|
+
"kanso",
|
|
25
|
+
"header"
|
|
26
|
+
],
|
|
27
|
+
"sideEffects": false,
|
|
28
|
+
"module": "fesm2022/kanso-protocol-header.mjs",
|
|
29
|
+
"typings": "types/kanso-protocol-header.d.ts",
|
|
30
|
+
"exports": {
|
|
31
|
+
"./package.json": {
|
|
32
|
+
"default": "./package.json"
|
|
33
|
+
},
|
|
34
|
+
".": {
|
|
35
|
+
"types": "./types/kanso-protocol-header.d.ts",
|
|
36
|
+
"default": "./fesm2022/kanso-protocol-header.mjs"
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
"type": "module",
|
|
40
|
+
"dependencies": {
|
|
41
|
+
"tslib": "^2.3.0"
|
|
42
|
+
}
|
|
43
|
+
}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { EventEmitter } from '@angular/core';
|
|
3
|
+
|
|
4
|
+
type KpHeaderSize = 'sm' | 'md' | 'lg';
|
|
5
|
+
type KpHeaderAppearance = 'light' | 'dark';
|
|
6
|
+
interface KpHeaderNavItem {
|
|
7
|
+
label: string;
|
|
8
|
+
href?: string;
|
|
9
|
+
active?: boolean;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* Kanso Protocol — Header (Topbar)
|
|
13
|
+
*
|
|
14
|
+
* App topbar pattern. Three-section layout (left / center / right)
|
|
15
|
+
* with optional logo, inline nav, search slot, notifications,
|
|
16
|
+
* theme toggle, CTA, and user menu. Data-driven; projection slots
|
|
17
|
+
* for logo, search, and extra actions.
|
|
18
|
+
*
|
|
19
|
+
* Slots:
|
|
20
|
+
* - `[kpHeaderLogo]` — replace the default logo mark + title
|
|
21
|
+
* - `[kpHeaderSearch]` — render custom search UI in the center slot
|
|
22
|
+
* (takes precedence over `[showSearch]` placeholder)
|
|
23
|
+
* - `[kpHeaderActions]` — extra action buttons before the user menu
|
|
24
|
+
*
|
|
25
|
+
* @example
|
|
26
|
+
* <kp-header
|
|
27
|
+
* size="md"
|
|
28
|
+
* [navItems]="nav"
|
|
29
|
+
* [userName]="me.name"
|
|
30
|
+
* [userInitials]="me.initials"
|
|
31
|
+
* userRole="Admin"
|
|
32
|
+
* [showSearch]="true"
|
|
33
|
+
* [showNotifications]="true"
|
|
34
|
+
* notificationsCount="3"
|
|
35
|
+
* />
|
|
36
|
+
*/
|
|
37
|
+
declare class KpHeaderComponent {
|
|
38
|
+
size: KpHeaderSize;
|
|
39
|
+
appearance: KpHeaderAppearance;
|
|
40
|
+
showLogo: boolean;
|
|
41
|
+
logoText: string;
|
|
42
|
+
showMainNav: boolean;
|
|
43
|
+
navItems: KpHeaderNavItem[];
|
|
44
|
+
showSearch: boolean;
|
|
45
|
+
searchPlaceholder: string;
|
|
46
|
+
showThemeToggle: boolean;
|
|
47
|
+
showNotifications: boolean;
|
|
48
|
+
notificationsCount: string | number | null;
|
|
49
|
+
showCta: boolean;
|
|
50
|
+
ctaLabel: string;
|
|
51
|
+
showUserMenu: boolean;
|
|
52
|
+
userName: string | null;
|
|
53
|
+
userRole: string | null;
|
|
54
|
+
userInitials: string | null;
|
|
55
|
+
showUserStatus: boolean;
|
|
56
|
+
themeToggle: EventEmitter<void>;
|
|
57
|
+
notificationsClick: EventEmitter<void>;
|
|
58
|
+
ctaClick: EventEmitter<void>;
|
|
59
|
+
userMenuClick: EventEmitter<void>;
|
|
60
|
+
get hostClasses(): string;
|
|
61
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<KpHeaderComponent, never>;
|
|
62
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<KpHeaderComponent, "kp-header", never, { "size": { "alias": "size"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "showLogo": { "alias": "showLogo"; "required": false; }; "logoText": { "alias": "logoText"; "required": false; }; "showMainNav": { "alias": "showMainNav"; "required": false; }; "navItems": { "alias": "navItems"; "required": false; }; "showSearch": { "alias": "showSearch"; "required": false; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; }; "showThemeToggle": { "alias": "showThemeToggle"; "required": false; }; "showNotifications": { "alias": "showNotifications"; "required": false; }; "notificationsCount": { "alias": "notificationsCount"; "required": false; }; "showCta": { "alias": "showCta"; "required": false; }; "ctaLabel": { "alias": "ctaLabel"; "required": false; }; "showUserMenu": { "alias": "showUserMenu"; "required": false; }; "userName": { "alias": "userName"; "required": false; }; "userRole": { "alias": "userRole"; "required": false; }; "userInitials": { "alias": "userInitials"; "required": false; }; "showUserStatus": { "alias": "showUserStatus"; "required": false; }; }, { "themeToggle": "themeToggle"; "notificationsClick": "notificationsClick"; "ctaClick": "ctaClick"; "userMenuClick": "userMenuClick"; }, never, ["[kpHeaderLogo]", "[kpHeaderSearch]", "[kpHeaderActions]"], true, never>;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
export { KpHeaderComponent };
|
|
66
|
+
export type { KpHeaderAppearance, KpHeaderNavItem, KpHeaderSize };
|