@kanso-protocol/header 0.1.0 → 0.1.1
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.
|
@@ -113,7 +113,7 @@ class KpHeaderComponent {
|
|
|
113
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
114
|
@if (notificationsCount != null && notificationsCount !== '') {
|
|
115
115
|
<span class="kp-header__notif-badge" aria-live="polite">
|
|
116
|
-
<kp-badge size="xs" color="danger" appearance="filled" [
|
|
116
|
+
<kp-badge size="xs" color="danger" appearance="filled" [count]="true">{{ notificationsCount }}</kp-badge>
|
|
117
117
|
</span>
|
|
118
118
|
}
|
|
119
119
|
</button>
|
|
@@ -137,7 +137,7 @@ class KpHeaderComponent {
|
|
|
137
137
|
</button>
|
|
138
138
|
}
|
|
139
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 });
|
|
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", "count", "showLeadingDot", "closable"], outputs: ["close"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
141
141
|
}
|
|
142
142
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KpHeaderComponent, decorators: [{
|
|
143
143
|
type: Component,
|
|
@@ -197,7 +197,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
|
|
|
197
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
198
|
@if (notificationsCount != null && notificationsCount !== '') {
|
|
199
199
|
<span class="kp-header__notif-badge" aria-live="polite">
|
|
200
|
-
<kp-badge size="xs" color="danger" appearance="filled" [
|
|
200
|
+
<kp-badge size="xs" color="danger" appearance="filled" [count]="true">{{ notificationsCount }}</kp-badge>
|
|
201
201
|
</span>
|
|
202
202
|
}
|
|
203
203
|
</button>
|
|
@@ -1 +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":"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"}
|
|
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\" [count]=\"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":"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"}
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kanso-protocol/header",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"peerDependencies": {
|
|
6
6
|
"@angular/core": "^18.0.0",
|
|
7
7
|
"@angular/common": "^18.0.0",
|
|
8
8
|
"@kanso-protocol/core": "^0.0.1",
|
|
9
9
|
"@kanso-protocol/avatar": ">=0.1.0",
|
|
10
|
-
"@kanso-protocol/badge": ">=0.1.
|
|
10
|
+
"@kanso-protocol/badge": ">=0.1.3"
|
|
11
11
|
},
|
|
12
12
|
"description": "Kanso Protocol — header (pattern).",
|
|
13
13
|
"author": "GregNBlack",
|