@kanso-protocol/banner 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,120 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { EventEmitter, Output, Input, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import { KpButtonComponent } from '@kanso-protocol/button';
|
|
4
|
+
import { KpIconComponent } from '@kanso-protocol/icon';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Kanso Protocol — Banner
|
|
8
|
+
*
|
|
9
|
+
* Global top strip under the app Header. Used for system messages:
|
|
10
|
+
* trial status, maintenance, payment alerts, feature launches.
|
|
11
|
+
* Reuses alert semantic tokens (subtle appearance) so color roles
|
|
12
|
+
* match Alert / Toast.
|
|
13
|
+
*
|
|
14
|
+
* Slot: `[kpBannerAction]` for a trailing CTA (typically `<kp-button size="sm">`).
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* <kp-banner color="warning" title="Your trial ends in 3 days">
|
|
18
|
+
* <kp-button kpBannerAction size="sm">Upgrade</kp-button>
|
|
19
|
+
* </kp-banner>
|
|
20
|
+
*/
|
|
21
|
+
class KpBannerComponent {
|
|
22
|
+
color = 'primary';
|
|
23
|
+
size = 'md';
|
|
24
|
+
title = 'Global notification message';
|
|
25
|
+
description = null;
|
|
26
|
+
showIcon = true;
|
|
27
|
+
showClose = true;
|
|
28
|
+
close = new EventEmitter();
|
|
29
|
+
get iconName() {
|
|
30
|
+
const map = {
|
|
31
|
+
primary: 'info-circle',
|
|
32
|
+
success: 'circle-check',
|
|
33
|
+
warning: 'alert-triangle',
|
|
34
|
+
danger: 'alert-circle',
|
|
35
|
+
info: 'info-circle',
|
|
36
|
+
neutral: 'info-circle',
|
|
37
|
+
};
|
|
38
|
+
return map[this.color];
|
|
39
|
+
}
|
|
40
|
+
get hostClasses() {
|
|
41
|
+
return `kp-banner kp-banner--${this.color} kp-banner--${this.size}`;
|
|
42
|
+
}
|
|
43
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KpBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
44
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: KpBannerComponent, isStandalone: true, selector: "kp-banner", inputs: { color: "color", size: "size", title: "title", description: "description", showIcon: "showIcon", showClose: "showClose" }, outputs: { close: "close" }, host: { attributes: { "role": "status" }, properties: { "class": "hostClasses" } }, ngImport: i0, template: `
|
|
45
|
+
<div class="kp-banner__content">
|
|
46
|
+
@if (showIcon) {
|
|
47
|
+
<kp-icon class="kp-banner__icon" [name]="iconName" />
|
|
48
|
+
}
|
|
49
|
+
<span class="kp-banner__title">{{ title }}</span>
|
|
50
|
+
@if (description) {
|
|
51
|
+
<span class="kp-banner__desc">{{ description }}</span>
|
|
52
|
+
}
|
|
53
|
+
</div>
|
|
54
|
+
<div class="kp-banner__right">
|
|
55
|
+
<ng-content select="[kpBannerAction]"/>
|
|
56
|
+
@if (showClose) {
|
|
57
|
+
<kp-button
|
|
58
|
+
size="xs"
|
|
59
|
+
variant="ghost"
|
|
60
|
+
color="neutral"
|
|
61
|
+
[iconOnly]="true"
|
|
62
|
+
aria-label="Dismiss"
|
|
63
|
+
(click)="close.emit()"
|
|
64
|
+
>
|
|
65
|
+
<svg kpButtonIconLeft viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg>
|
|
66
|
+
</kp-button>
|
|
67
|
+
}
|
|
68
|
+
</div>
|
|
69
|
+
`, isInline: true, styles: [":host{box-sizing:border-box;display:flex;align-items:center;gap:16px;width:100%;padding:var(--kp-banner-pad, 12px 32px);background:var(--kp-banner-bg);border-bottom:1px solid var(--kp-banner-border);color:var(--kp-banner-fg);font-family:var(--kp-font-family-sans, \"Onest\", system-ui, sans-serif);font-size:var(--kp-banner-fs, 14px)}:host(.kp-banner--sm){--kp-banner-pad: 8px 24px;--kp-banner-fs: 13px}:host(.kp-banner--md){--kp-banner-pad: 12px 32px;--kp-banner-fs: 14px}.kp-banner__content{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0}.kp-banner__icon{flex:0 0 auto;font-size:var(--kp-banner-icon, 18px);line-height:1;color:var(--kp-banner-icon-color)}:host(.kp-banner--sm){--kp-banner-icon: 16px}:host(.kp-banner--md){--kp-banner-icon: 18px}.kp-banner__title{font-weight:500;color:var(--kp-banner-fg)}.kp-banner__desc{color:var(--kp-banner-fg-desc)}.kp-banner__right{display:flex;align-items:center;gap:8px;flex:0 0 auto}:host(.kp-banner--primary){--kp-banner-bg: var(--kp-color-alert-primary-subtle-bg, var(--kp-color-blue-50));--kp-banner-border: var(--kp-color-alert-primary-subtle-border, var(--kp-color-blue-200));--kp-banner-fg: var(--kp-color-alert-primary-subtle-fg-title, var(--kp-color-blue-900));--kp-banner-fg-desc: var(--kp-color-alert-primary-subtle-fg-desc, var(--kp-color-blue-800));--kp-banner-icon-color: var(--kp-color-alert-primary-subtle-icon, var(--kp-color-blue-600))}:host(.kp-banner--success){--kp-banner-bg: var(--kp-color-alert-success-subtle-bg, var(--kp-color-green-50));--kp-banner-border: var(--kp-color-alert-success-subtle-border, var(--kp-color-green-200));--kp-banner-fg: var(--kp-color-alert-success-subtle-fg-title, var(--kp-color-green-900));--kp-banner-fg-desc: var(--kp-color-alert-success-subtle-fg-desc, var(--kp-color-green-800));--kp-banner-icon-color: var(--kp-color-alert-success-subtle-icon, var(--kp-color-green-600))}:host(.kp-banner--warning){--kp-banner-bg: var(--kp-color-alert-warning-subtle-bg, var(--kp-color-amber-50));--kp-banner-border: var(--kp-color-alert-warning-subtle-border, var(--kp-color-amber-300));--kp-banner-fg: var(--kp-color-alert-warning-subtle-fg-title, var(--kp-color-amber-900));--kp-banner-fg-desc: var(--kp-color-alert-warning-subtle-fg-desc, var(--kp-color-amber-800));--kp-banner-icon-color: var(--kp-color-alert-warning-subtle-icon, var(--kp-color-amber-600))}:host(.kp-banner--danger){--kp-banner-bg: var(--kp-color-alert-danger-subtle-bg, var(--kp-color-red-50));--kp-banner-border: var(--kp-color-alert-danger-subtle-border, var(--kp-color-red-200));--kp-banner-fg: var(--kp-color-alert-danger-subtle-fg-title, var(--kp-color-red-900));--kp-banner-fg-desc: var(--kp-color-alert-danger-subtle-fg-desc, var(--kp-color-red-800));--kp-banner-icon-color: var(--kp-color-alert-danger-subtle-icon, var(--kp-color-red-600))}:host(.kp-banner--info){--kp-banner-bg: var(--kp-color-alert-info-subtle-bg, var(--kp-color-cyan-50));--kp-banner-border: var(--kp-color-alert-info-subtle-border, var(--kp-color-cyan-200));--kp-banner-fg: var(--kp-color-alert-info-subtle-fg-title, var(--kp-color-cyan-900));--kp-banner-fg-desc: var(--kp-color-alert-info-subtle-fg-desc, var(--kp-color-cyan-800));--kp-banner-icon-color: var(--kp-color-alert-info-subtle-icon, var(--kp-color-cyan-600))}:host(.kp-banner--neutral){--kp-banner-bg: var(--kp-color-alert-neutral-subtle-bg, var(--kp-color-gray-50));--kp-banner-border: var(--kp-color-alert-neutral-subtle-border, var(--kp-color-gray-200));--kp-banner-fg: var(--kp-color-alert-neutral-subtle-fg-title, var(--kp-color-gray-900));--kp-banner-fg-desc: var(--kp-color-alert-neutral-subtle-fg-desc, var(--kp-color-gray-700));--kp-banner-icon-color: var(--kp-color-alert-neutral-subtle-icon, var(--kp-color-gray-600))}\n"], dependencies: [{ kind: "component", type: KpButtonComponent, selector: "kp-button", inputs: ["size", "variant", "color", "disabled", "loading", "iconOnly", "forceState"] }, { kind: "component", type: KpIconComponent, selector: "kp-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
70
|
+
}
|
|
71
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KpBannerComponent, decorators: [{
|
|
72
|
+
type: Component,
|
|
73
|
+
args: [{ selector: 'kp-banner', imports: [KpButtonComponent, KpIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class]': 'hostClasses', role: 'status' }, template: `
|
|
74
|
+
<div class="kp-banner__content">
|
|
75
|
+
@if (showIcon) {
|
|
76
|
+
<kp-icon class="kp-banner__icon" [name]="iconName" />
|
|
77
|
+
}
|
|
78
|
+
<span class="kp-banner__title">{{ title }}</span>
|
|
79
|
+
@if (description) {
|
|
80
|
+
<span class="kp-banner__desc">{{ description }}</span>
|
|
81
|
+
}
|
|
82
|
+
</div>
|
|
83
|
+
<div class="kp-banner__right">
|
|
84
|
+
<ng-content select="[kpBannerAction]"/>
|
|
85
|
+
@if (showClose) {
|
|
86
|
+
<kp-button
|
|
87
|
+
size="xs"
|
|
88
|
+
variant="ghost"
|
|
89
|
+
color="neutral"
|
|
90
|
+
[iconOnly]="true"
|
|
91
|
+
aria-label="Dismiss"
|
|
92
|
+
(click)="close.emit()"
|
|
93
|
+
>
|
|
94
|
+
<svg kpButtonIconLeft viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg>
|
|
95
|
+
</kp-button>
|
|
96
|
+
}
|
|
97
|
+
</div>
|
|
98
|
+
`, styles: [":host{box-sizing:border-box;display:flex;align-items:center;gap:16px;width:100%;padding:var(--kp-banner-pad, 12px 32px);background:var(--kp-banner-bg);border-bottom:1px solid var(--kp-banner-border);color:var(--kp-banner-fg);font-family:var(--kp-font-family-sans, \"Onest\", system-ui, sans-serif);font-size:var(--kp-banner-fs, 14px)}:host(.kp-banner--sm){--kp-banner-pad: 8px 24px;--kp-banner-fs: 13px}:host(.kp-banner--md){--kp-banner-pad: 12px 32px;--kp-banner-fs: 14px}.kp-banner__content{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0}.kp-banner__icon{flex:0 0 auto;font-size:var(--kp-banner-icon, 18px);line-height:1;color:var(--kp-banner-icon-color)}:host(.kp-banner--sm){--kp-banner-icon: 16px}:host(.kp-banner--md){--kp-banner-icon: 18px}.kp-banner__title{font-weight:500;color:var(--kp-banner-fg)}.kp-banner__desc{color:var(--kp-banner-fg-desc)}.kp-banner__right{display:flex;align-items:center;gap:8px;flex:0 0 auto}:host(.kp-banner--primary){--kp-banner-bg: var(--kp-color-alert-primary-subtle-bg, var(--kp-color-blue-50));--kp-banner-border: var(--kp-color-alert-primary-subtle-border, var(--kp-color-blue-200));--kp-banner-fg: var(--kp-color-alert-primary-subtle-fg-title, var(--kp-color-blue-900));--kp-banner-fg-desc: var(--kp-color-alert-primary-subtle-fg-desc, var(--kp-color-blue-800));--kp-banner-icon-color: var(--kp-color-alert-primary-subtle-icon, var(--kp-color-blue-600))}:host(.kp-banner--success){--kp-banner-bg: var(--kp-color-alert-success-subtle-bg, var(--kp-color-green-50));--kp-banner-border: var(--kp-color-alert-success-subtle-border, var(--kp-color-green-200));--kp-banner-fg: var(--kp-color-alert-success-subtle-fg-title, var(--kp-color-green-900));--kp-banner-fg-desc: var(--kp-color-alert-success-subtle-fg-desc, var(--kp-color-green-800));--kp-banner-icon-color: var(--kp-color-alert-success-subtle-icon, var(--kp-color-green-600))}:host(.kp-banner--warning){--kp-banner-bg: var(--kp-color-alert-warning-subtle-bg, var(--kp-color-amber-50));--kp-banner-border: var(--kp-color-alert-warning-subtle-border, var(--kp-color-amber-300));--kp-banner-fg: var(--kp-color-alert-warning-subtle-fg-title, var(--kp-color-amber-900));--kp-banner-fg-desc: var(--kp-color-alert-warning-subtle-fg-desc, var(--kp-color-amber-800));--kp-banner-icon-color: var(--kp-color-alert-warning-subtle-icon, var(--kp-color-amber-600))}:host(.kp-banner--danger){--kp-banner-bg: var(--kp-color-alert-danger-subtle-bg, var(--kp-color-red-50));--kp-banner-border: var(--kp-color-alert-danger-subtle-border, var(--kp-color-red-200));--kp-banner-fg: var(--kp-color-alert-danger-subtle-fg-title, var(--kp-color-red-900));--kp-banner-fg-desc: var(--kp-color-alert-danger-subtle-fg-desc, var(--kp-color-red-800));--kp-banner-icon-color: var(--kp-color-alert-danger-subtle-icon, var(--kp-color-red-600))}:host(.kp-banner--info){--kp-banner-bg: var(--kp-color-alert-info-subtle-bg, var(--kp-color-cyan-50));--kp-banner-border: var(--kp-color-alert-info-subtle-border, var(--kp-color-cyan-200));--kp-banner-fg: var(--kp-color-alert-info-subtle-fg-title, var(--kp-color-cyan-900));--kp-banner-fg-desc: var(--kp-color-alert-info-subtle-fg-desc, var(--kp-color-cyan-800));--kp-banner-icon-color: var(--kp-color-alert-info-subtle-icon, var(--kp-color-cyan-600))}:host(.kp-banner--neutral){--kp-banner-bg: var(--kp-color-alert-neutral-subtle-bg, var(--kp-color-gray-50));--kp-banner-border: var(--kp-color-alert-neutral-subtle-border, var(--kp-color-gray-200));--kp-banner-fg: var(--kp-color-alert-neutral-subtle-fg-title, var(--kp-color-gray-900));--kp-banner-fg-desc: var(--kp-color-alert-neutral-subtle-fg-desc, var(--kp-color-gray-700));--kp-banner-icon-color: var(--kp-color-alert-neutral-subtle-icon, var(--kp-color-gray-600))}\n"] }]
|
|
99
|
+
}], propDecorators: { color: [{
|
|
100
|
+
type: Input
|
|
101
|
+
}], size: [{
|
|
102
|
+
type: Input
|
|
103
|
+
}], title: [{
|
|
104
|
+
type: Input
|
|
105
|
+
}], description: [{
|
|
106
|
+
type: Input
|
|
107
|
+
}], showIcon: [{
|
|
108
|
+
type: Input
|
|
109
|
+
}], showClose: [{
|
|
110
|
+
type: Input
|
|
111
|
+
}], close: [{
|
|
112
|
+
type: Output
|
|
113
|
+
}] } });
|
|
114
|
+
|
|
115
|
+
/**
|
|
116
|
+
* Generated bundle index. Do not edit.
|
|
117
|
+
*/
|
|
118
|
+
|
|
119
|
+
export { KpBannerComponent };
|
|
120
|
+
//# sourceMappingURL=kanso-protocol-banner.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"kanso-protocol-banner.mjs","sources":["../../../../../packages/patterns/banner/src/banner.component.ts","../../../../../packages/patterns/banner/src/kanso-protocol-banner.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n Output,\n} from '@angular/core';\nimport { KpButtonComponent } from '@kanso-protocol/button';\nimport { KpIconComponent } from '@kanso-protocol/icon';\n\nexport type KpBannerSize = 'sm' | 'md';\nexport type KpBannerColor =\n | 'primary'\n | 'success'\n | 'warning'\n | 'danger'\n | 'info'\n | 'neutral';\n\n/**\n * Kanso Protocol — Banner\n *\n * Global top strip under the app Header. Used for system messages:\n * trial status, maintenance, payment alerts, feature launches.\n * Reuses alert semantic tokens (subtle appearance) so color roles\n * match Alert / Toast.\n *\n * Slot: `[kpBannerAction]` for a trailing CTA (typically `<kp-button size=\"sm\">`).\n *\n * @example\n * <kp-banner color=\"warning\" title=\"Your trial ends in 3 days\">\n * <kp-button kpBannerAction size=\"sm\">Upgrade</kp-button>\n * </kp-banner>\n */\n@Component({\n selector: 'kp-banner',\n imports: [KpButtonComponent, KpIconComponent],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { '[class]': 'hostClasses', role: 'status' },\n template: `\n <div class=\"kp-banner__content\">\n @if (showIcon) {\n <kp-icon class=\"kp-banner__icon\" [name]=\"iconName\" />\n }\n <span class=\"kp-banner__title\">{{ title }}</span>\n @if (description) {\n <span class=\"kp-banner__desc\">{{ description }}</span>\n }\n </div>\n <div class=\"kp-banner__right\">\n <ng-content select=\"[kpBannerAction]\"/>\n @if (showClose) {\n <kp-button\n size=\"xs\"\n variant=\"ghost\"\n color=\"neutral\"\n [iconOnly]=\"true\"\n aria-label=\"Dismiss\"\n (click)=\"close.emit()\"\n >\n <svg kpButtonIconLeft viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M18 6 6 18M6 6l12 12\"/></svg>\n </kp-button>\n }\n </div>\n `,\n styles: [`\n :host {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n gap: 16px;\n width: 100%;\n padding: var(--kp-banner-pad, 12px 32px);\n background: var(--kp-banner-bg);\n border-bottom: 1px solid var(--kp-banner-border);\n color: var(--kp-banner-fg);\n font-family: var(--kp-font-family-sans, 'Onest', system-ui, sans-serif);\n font-size: var(--kp-banner-fs, 14px);\n }\n\n :host(.kp-banner--sm) {\n --kp-banner-pad: 8px 24px;\n --kp-banner-fs: 13px;\n }\n :host(.kp-banner--md) {\n --kp-banner-pad: 12px 32px;\n --kp-banner-fs: 14px;\n }\n\n .kp-banner__content {\n display: flex;\n align-items: center;\n gap: 8px;\n flex: 1 1 auto;\n min-width: 0;\n }\n .kp-banner__icon {\n flex: 0 0 auto;\n font-size: var(--kp-banner-icon, 18px);\n line-height: 1;\n color: var(--kp-banner-icon-color);\n }\n :host(.kp-banner--sm) { --kp-banner-icon: 16px; }\n :host(.kp-banner--md) { --kp-banner-icon: 18px; }\n\n .kp-banner__title {\n font-weight: 500;\n color: var(--kp-banner-fg);\n }\n .kp-banner__desc {\n color: var(--kp-banner-fg-desc);\n }\n\n .kp-banner__right {\n display: flex;\n align-items: center;\n gap: 8px;\n flex: 0 0 auto;\n }\n\n /* Colors — reuse alert-*-subtle tokens */\n :host(.kp-banner--primary) {\n --kp-banner-bg: var(--kp-color-alert-primary-subtle-bg, var(--kp-color-blue-50));\n --kp-banner-border: var(--kp-color-alert-primary-subtle-border, var(--kp-color-blue-200));\n --kp-banner-fg: var(--kp-color-alert-primary-subtle-fg-title, var(--kp-color-blue-900));\n --kp-banner-fg-desc: var(--kp-color-alert-primary-subtle-fg-desc, var(--kp-color-blue-800));\n --kp-banner-icon-color: var(--kp-color-alert-primary-subtle-icon, var(--kp-color-blue-600));\n }\n :host(.kp-banner--success) {\n --kp-banner-bg: var(--kp-color-alert-success-subtle-bg, var(--kp-color-green-50));\n --kp-banner-border: var(--kp-color-alert-success-subtle-border, var(--kp-color-green-200));\n --kp-banner-fg: var(--kp-color-alert-success-subtle-fg-title, var(--kp-color-green-900));\n --kp-banner-fg-desc: var(--kp-color-alert-success-subtle-fg-desc, var(--kp-color-green-800));\n --kp-banner-icon-color: var(--kp-color-alert-success-subtle-icon, var(--kp-color-green-600));\n }\n :host(.kp-banner--warning) {\n --kp-banner-bg: var(--kp-color-alert-warning-subtle-bg, var(--kp-color-amber-50));\n --kp-banner-border: var(--kp-color-alert-warning-subtle-border, var(--kp-color-amber-300));\n --kp-banner-fg: var(--kp-color-alert-warning-subtle-fg-title, var(--kp-color-amber-900));\n --kp-banner-fg-desc: var(--kp-color-alert-warning-subtle-fg-desc, var(--kp-color-amber-800));\n --kp-banner-icon-color: var(--kp-color-alert-warning-subtle-icon, var(--kp-color-amber-600));\n }\n :host(.kp-banner--danger) {\n --kp-banner-bg: var(--kp-color-alert-danger-subtle-bg, var(--kp-color-red-50));\n --kp-banner-border: var(--kp-color-alert-danger-subtle-border, var(--kp-color-red-200));\n --kp-banner-fg: var(--kp-color-alert-danger-subtle-fg-title, var(--kp-color-red-900));\n --kp-banner-fg-desc: var(--kp-color-alert-danger-subtle-fg-desc, var(--kp-color-red-800));\n --kp-banner-icon-color: var(--kp-color-alert-danger-subtle-icon, var(--kp-color-red-600));\n }\n :host(.kp-banner--info) {\n --kp-banner-bg: var(--kp-color-alert-info-subtle-bg, var(--kp-color-cyan-50));\n --kp-banner-border: var(--kp-color-alert-info-subtle-border, var(--kp-color-cyan-200));\n --kp-banner-fg: var(--kp-color-alert-info-subtle-fg-title, var(--kp-color-cyan-900));\n --kp-banner-fg-desc: var(--kp-color-alert-info-subtle-fg-desc, var(--kp-color-cyan-800));\n --kp-banner-icon-color: var(--kp-color-alert-info-subtle-icon, var(--kp-color-cyan-600));\n }\n :host(.kp-banner--neutral) {\n --kp-banner-bg: var(--kp-color-alert-neutral-subtle-bg, var(--kp-color-gray-50));\n --kp-banner-border: var(--kp-color-alert-neutral-subtle-border, var(--kp-color-gray-200));\n --kp-banner-fg: var(--kp-color-alert-neutral-subtle-fg-title, var(--kp-color-gray-900));\n --kp-banner-fg-desc: var(--kp-color-alert-neutral-subtle-fg-desc, var(--kp-color-gray-700));\n --kp-banner-icon-color: var(--kp-color-alert-neutral-subtle-icon, var(--kp-color-gray-600));\n }\n `],\n})\nexport class KpBannerComponent {\n @Input() color: KpBannerColor = 'primary';\n @Input() size: KpBannerSize = 'md';\n @Input() title = 'Global notification message';\n @Input() description: string | null = null;\n @Input() showIcon = true;\n @Input() showClose = true;\n\n @Output() close = new EventEmitter<void>();\n\n get iconName(): string {\n const map: Record<KpBannerColor, string> = {\n primary: 'info-circle',\n success: 'circle-check',\n warning: 'alert-triangle',\n danger: 'alert-circle',\n info: 'info-circle',\n neutral: 'info-circle',\n };\n return map[this.color];\n }\n\n get hostClasses(): string {\n return `kp-banner kp-banner--${this.color} kp-banner--${this.size}`;\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAmBA;;;;;;;;;;;;;;AAcG;MAoIU,iBAAiB,CAAA;IACnB,KAAK,GAAkB,SAAS;IAChC,IAAI,GAAiB,IAAI;IACzB,KAAK,GAAG,6BAA6B;IACrC,WAAW,GAAkB,IAAI;IACjC,QAAQ,GAAG,IAAI;IACf,SAAS,GAAG,IAAI;AAEf,IAAA,KAAK,GAAG,IAAI,YAAY,EAAQ;AAE1C,IAAA,IAAI,QAAQ,GAAA;AACV,QAAA,MAAM,GAAG,GAAkC;AACzC,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,OAAO,EAAE,cAAc;AACvB,YAAA,OAAO,EAAE,gBAAgB;AACzB,YAAA,MAAM,EAAE,cAAc;AACtB,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,aAAa;SACvB;AACD,QAAA,OAAO,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;IACxB;AAEA,IAAA,IAAI,WAAW,GAAA;QACb,OAAO,CAAA,qBAAA,EAAwB,IAAI,CAAC,KAAK,eAAe,IAAI,CAAC,IAAI,CAAA,CAAE;IACrE;uGAxBW,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,KAAA,EAAA,OAAA,EAAA,IAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,WAAA,EAAA,aAAA,EAAA,QAAA,EAAA,UAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,OAAA,EAAA,EAAA,KAAA,EAAA,OAAA,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,EA9HlB;;;;;;;;;;;;;;;;;;;;;;;;;GAyBT,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,uqHAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EA5BS,iBAAiB,6IAAE,eAAe,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAiIjC,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAnI7B,SAAS;+BACE,WAAW,EAAA,OAAA,EACZ,CAAC,iBAAiB,EAAE,eAAe,CAAC,EAAA,eAAA,EAC5B,uBAAuB,CAAC,MAAM,QACzC,EAAE,SAAS,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAA,QAAA,EACxC;;;;;;;;;;;;;;;;;;;;;;;;;AAyBT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,uqHAAA,CAAA,EAAA;;sBAsGA;;sBACA;;sBACA;;sBACA;;sBACA;;sBACA;;sBAEA;;;AC7KH;;AAEG;;;;"}
|
package/package.json
ADDED
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@kanso-protocol/banner",
|
|
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/button": ">=0.1.0"
|
|
10
|
+
},
|
|
11
|
+
"description": "Kanso Protocol — banner (pattern).",
|
|
12
|
+
"author": "GregNBlack",
|
|
13
|
+
"repository": {
|
|
14
|
+
"type": "git",
|
|
15
|
+
"url": "https://github.com/GregNBlack/kanso-protocol.git",
|
|
16
|
+
"directory": "packages/patterns/banner"
|
|
17
|
+
},
|
|
18
|
+
"homepage": "https://gregnblack.github.io/kanso-protocol/?path=/docs/patterns-banner--docs",
|
|
19
|
+
"bugs": "https://github.com/GregNBlack/kanso-protocol/issues",
|
|
20
|
+
"keywords": [
|
|
21
|
+
"design-system",
|
|
22
|
+
"angular",
|
|
23
|
+
"kanso",
|
|
24
|
+
"banner"
|
|
25
|
+
],
|
|
26
|
+
"sideEffects": false,
|
|
27
|
+
"module": "fesm2022/kanso-protocol-banner.mjs",
|
|
28
|
+
"typings": "types/kanso-protocol-banner.d.ts",
|
|
29
|
+
"exports": {
|
|
30
|
+
"./package.json": {
|
|
31
|
+
"default": "./package.json"
|
|
32
|
+
},
|
|
33
|
+
".": {
|
|
34
|
+
"types": "./types/kanso-protocol-banner.d.ts",
|
|
35
|
+
"default": "./fesm2022/kanso-protocol-banner.mjs"
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
"type": "module",
|
|
39
|
+
"dependencies": {
|
|
40
|
+
"tslib": "^2.3.0"
|
|
41
|
+
}
|
|
42
|
+
}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { EventEmitter } from '@angular/core';
|
|
3
|
+
|
|
4
|
+
type KpBannerSize = 'sm' | 'md';
|
|
5
|
+
type KpBannerColor = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
|
|
6
|
+
/**
|
|
7
|
+
* Kanso Protocol — Banner
|
|
8
|
+
*
|
|
9
|
+
* Global top strip under the app Header. Used for system messages:
|
|
10
|
+
* trial status, maintenance, payment alerts, feature launches.
|
|
11
|
+
* Reuses alert semantic tokens (subtle appearance) so color roles
|
|
12
|
+
* match Alert / Toast.
|
|
13
|
+
*
|
|
14
|
+
* Slot: `[kpBannerAction]` for a trailing CTA (typically `<kp-button size="sm">`).
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* <kp-banner color="warning" title="Your trial ends in 3 days">
|
|
18
|
+
* <kp-button kpBannerAction size="sm">Upgrade</kp-button>
|
|
19
|
+
* </kp-banner>
|
|
20
|
+
*/
|
|
21
|
+
declare class KpBannerComponent {
|
|
22
|
+
color: KpBannerColor;
|
|
23
|
+
size: KpBannerSize;
|
|
24
|
+
title: string;
|
|
25
|
+
description: string | null;
|
|
26
|
+
showIcon: boolean;
|
|
27
|
+
showClose: boolean;
|
|
28
|
+
close: EventEmitter<void>;
|
|
29
|
+
get iconName(): string;
|
|
30
|
+
get hostClasses(): string;
|
|
31
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<KpBannerComponent, never>;
|
|
32
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<KpBannerComponent, "kp-banner", never, { "color": { "alias": "color"; "required": false; }; "size": { "alias": "size"; "required": false; }; "title": { "alias": "title"; "required": false; }; "description": { "alias": "description"; "required": false; }; "showIcon": { "alias": "showIcon"; "required": false; }; "showClose": { "alias": "showClose"; "required": false; }; }, { "close": "close"; }, never, ["[kpBannerAction]"], true, never>;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
export { KpBannerComponent };
|
|
36
|
+
export type { KpBannerColor, KpBannerSize };
|