@kanso-protocol/banner 1.0.1 → 2.0.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.
|
@@ -11,11 +11,11 @@ import { KpIconComponent } from '@kanso-protocol/icon';
|
|
|
11
11
|
* Reuses alert semantic tokens (subtle appearance) so color roles
|
|
12
12
|
* match Alert / Toast.
|
|
13
13
|
*
|
|
14
|
-
* Slot: `[kpBannerAction]` for a trailing CTA (typically `<
|
|
14
|
+
* Slot: `[kpBannerAction]` for a trailing CTA (typically `<button kpButton size="sm">`).
|
|
15
15
|
*
|
|
16
16
|
* @example
|
|
17
17
|
* <kp-banner color="warning" title="Your trial ends in 3 days">
|
|
18
|
-
* <
|
|
18
|
+
* <button kpButton kpBannerAction size="sm">Upgrade</button>
|
|
19
19
|
* </kp-banner>
|
|
20
20
|
*/
|
|
21
21
|
class KpBannerComponent {
|
|
@@ -54,7 +54,7 @@ class KpBannerComponent {
|
|
|
54
54
|
<div class="kp-banner__right">
|
|
55
55
|
<ng-content select="[kpBannerAction]"/>
|
|
56
56
|
@if (showClose) {
|
|
57
|
-
<
|
|
57
|
+
<button kpButton
|
|
58
58
|
size="xs"
|
|
59
59
|
variant="ghost"
|
|
60
60
|
color="neutral"
|
|
@@ -63,10 +63,10 @@ class KpBannerComponent {
|
|
|
63
63
|
(click)="close.emit()"
|
|
64
64
|
>
|
|
65
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
|
-
</
|
|
66
|
+
</button>
|
|
67
67
|
}
|
|
68
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);--kp-banner-border: var(--kp-color-alert-primary-subtle-border);--kp-banner-fg: var(--kp-color-alert-primary-subtle-fg-title);--kp-banner-fg-desc: var(--kp-color-alert-primary-subtle-fg-desc);--kp-banner-icon-color: var(--kp-color-alert-primary-subtle-icon)}:host(.kp-banner--success){--kp-banner-bg: var(--kp-color-alert-success-subtle-bg);--kp-banner-border: var(--kp-color-alert-success-subtle-border);--kp-banner-fg: var(--kp-color-alert-success-subtle-fg-title);--kp-banner-fg-desc: var(--kp-color-alert-success-subtle-fg-desc);--kp-banner-icon-color: var(--kp-color-alert-success-subtle-icon)}:host(.kp-banner--warning){--kp-banner-bg: var(--kp-color-alert-warning-subtle-bg);--kp-banner-border: var(--kp-color-alert-warning-subtle-border);--kp-banner-fg: var(--kp-color-alert-warning-subtle-fg-title);--kp-banner-fg-desc: var(--kp-color-alert-warning-subtle-fg-desc);--kp-banner-icon-color: var(--kp-color-alert-warning-subtle-icon)}:host(.kp-banner--danger){--kp-banner-bg: var(--kp-color-alert-danger-subtle-bg);--kp-banner-border: var(--kp-color-alert-danger-subtle-border);--kp-banner-fg: var(--kp-color-alert-danger-subtle-fg-title);--kp-banner-fg-desc: var(--kp-color-alert-danger-subtle-fg-desc);--kp-banner-icon-color: var(--kp-color-alert-danger-subtle-icon)}:host(.kp-banner--info){--kp-banner-bg: var(--kp-color-alert-info-subtle-bg);--kp-banner-border: var(--kp-color-alert-info-subtle-border);--kp-banner-fg: var(--kp-color-alert-info-subtle-fg-title);--kp-banner-fg-desc: var(--kp-color-alert-info-subtle-fg-desc);--kp-banner-icon-color: var(--kp-color-alert-info-subtle-icon)}:host(.kp-banner--neutral){--kp-banner-bg: var(--kp-color-alert-neutral-subtle-bg);--kp-banner-border: var(--kp-color-alert-neutral-subtle-border);--kp-banner-fg: var(--kp-color-alert-neutral-subtle-fg-title);--kp-banner-fg-desc: var(--kp-color-alert-neutral-subtle-fg-desc);--kp-banner-icon-color: var(--kp-color-alert-neutral-subtle-icon)}\n"], dependencies: [{ kind: "component", type: KpButtonComponent, selector: "
|
|
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);--kp-banner-border: var(--kp-color-alert-primary-subtle-border);--kp-banner-fg: var(--kp-color-alert-primary-subtle-fg-title);--kp-banner-fg-desc: var(--kp-color-alert-primary-subtle-fg-desc);--kp-banner-icon-color: var(--kp-color-alert-primary-subtle-icon)}:host(.kp-banner--success){--kp-banner-bg: var(--kp-color-alert-success-subtle-bg);--kp-banner-border: var(--kp-color-alert-success-subtle-border);--kp-banner-fg: var(--kp-color-alert-success-subtle-fg-title);--kp-banner-fg-desc: var(--kp-color-alert-success-subtle-fg-desc);--kp-banner-icon-color: var(--kp-color-alert-success-subtle-icon)}:host(.kp-banner--warning){--kp-banner-bg: var(--kp-color-alert-warning-subtle-bg);--kp-banner-border: var(--kp-color-alert-warning-subtle-border);--kp-banner-fg: var(--kp-color-alert-warning-subtle-fg-title);--kp-banner-fg-desc: var(--kp-color-alert-warning-subtle-fg-desc);--kp-banner-icon-color: var(--kp-color-alert-warning-subtle-icon)}:host(.kp-banner--danger){--kp-banner-bg: var(--kp-color-alert-danger-subtle-bg);--kp-banner-border: var(--kp-color-alert-danger-subtle-border);--kp-banner-fg: var(--kp-color-alert-danger-subtle-fg-title);--kp-banner-fg-desc: var(--kp-color-alert-danger-subtle-fg-desc);--kp-banner-icon-color: var(--kp-color-alert-danger-subtle-icon)}:host(.kp-banner--info){--kp-banner-bg: var(--kp-color-alert-info-subtle-bg);--kp-banner-border: var(--kp-color-alert-info-subtle-border);--kp-banner-fg: var(--kp-color-alert-info-subtle-fg-title);--kp-banner-fg-desc: var(--kp-color-alert-info-subtle-fg-desc);--kp-banner-icon-color: var(--kp-color-alert-info-subtle-icon)}:host(.kp-banner--neutral){--kp-banner-bg: var(--kp-color-alert-neutral-subtle-bg);--kp-banner-border: var(--kp-color-alert-neutral-subtle-border);--kp-banner-fg: var(--kp-color-alert-neutral-subtle-fg-title);--kp-banner-fg-desc: var(--kp-color-alert-neutral-subtle-fg-desc);--kp-banner-icon-color: var(--kp-color-alert-neutral-subtle-icon)}\n"], dependencies: [{ kind: "component", type: KpButtonComponent, selector: "button[kpButton]", inputs: ["type", "size", "variant", "color", "disabled", "loading", "iconOnly", "forceState"] }, { kind: "component", type: KpIconComponent, selector: "kp-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
70
70
|
}
|
|
71
71
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KpBannerComponent, decorators: [{
|
|
72
72
|
type: Component,
|
|
@@ -83,7 +83,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
|
|
|
83
83
|
<div class="kp-banner__right">
|
|
84
84
|
<ng-content select="[kpBannerAction]"/>
|
|
85
85
|
@if (showClose) {
|
|
86
|
-
<
|
|
86
|
+
<button kpButton
|
|
87
87
|
size="xs"
|
|
88
88
|
variant="ghost"
|
|
89
89
|
color="neutral"
|
|
@@ -92,7 +92,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
|
|
|
92
92
|
(click)="close.emit()"
|
|
93
93
|
>
|
|
94
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
|
-
</
|
|
95
|
+
</button>
|
|
96
96
|
}
|
|
97
97
|
</div>
|
|
98
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);--kp-banner-border: var(--kp-color-alert-primary-subtle-border);--kp-banner-fg: var(--kp-color-alert-primary-subtle-fg-title);--kp-banner-fg-desc: var(--kp-color-alert-primary-subtle-fg-desc);--kp-banner-icon-color: var(--kp-color-alert-primary-subtle-icon)}:host(.kp-banner--success){--kp-banner-bg: var(--kp-color-alert-success-subtle-bg);--kp-banner-border: var(--kp-color-alert-success-subtle-border);--kp-banner-fg: var(--kp-color-alert-success-subtle-fg-title);--kp-banner-fg-desc: var(--kp-color-alert-success-subtle-fg-desc);--kp-banner-icon-color: var(--kp-color-alert-success-subtle-icon)}:host(.kp-banner--warning){--kp-banner-bg: var(--kp-color-alert-warning-subtle-bg);--kp-banner-border: var(--kp-color-alert-warning-subtle-border);--kp-banner-fg: var(--kp-color-alert-warning-subtle-fg-title);--kp-banner-fg-desc: var(--kp-color-alert-warning-subtle-fg-desc);--kp-banner-icon-color: var(--kp-color-alert-warning-subtle-icon)}:host(.kp-banner--danger){--kp-banner-bg: var(--kp-color-alert-danger-subtle-bg);--kp-banner-border: var(--kp-color-alert-danger-subtle-border);--kp-banner-fg: var(--kp-color-alert-danger-subtle-fg-title);--kp-banner-fg-desc: var(--kp-color-alert-danger-subtle-fg-desc);--kp-banner-icon-color: var(--kp-color-alert-danger-subtle-icon)}:host(.kp-banner--info){--kp-banner-bg: var(--kp-color-alert-info-subtle-bg);--kp-banner-border: var(--kp-color-alert-info-subtle-border);--kp-banner-fg: var(--kp-color-alert-info-subtle-fg-title);--kp-banner-fg-desc: var(--kp-color-alert-info-subtle-fg-desc);--kp-banner-icon-color: var(--kp-color-alert-info-subtle-icon)}:host(.kp-banner--neutral){--kp-banner-bg: var(--kp-color-alert-neutral-subtle-bg);--kp-banner-border: var(--kp-color-alert-neutral-subtle-border);--kp-banner-fg: var(--kp-color-alert-neutral-subtle-fg-title);--kp-banner-fg-desc: var(--kp-color-alert-neutral-subtle-fg-desc);--kp-banner-icon-color: var(--kp-color-alert-neutral-subtle-icon)}\n"] }]
|
|
@@ -1 +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 `<
|
|
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 `<button kpButton size=\"sm\">`).\n *\n * @example\n * <kp-banner color=\"warning\" title=\"Your trial ends in 3 days\">\n * <button kpButton kpBannerAction size=\"sm\">Upgrade</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 <button kpButton\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 </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);\n --kp-banner-border: var(--kp-color-alert-primary-subtle-border);\n --kp-banner-fg: var(--kp-color-alert-primary-subtle-fg-title);\n --kp-banner-fg-desc: var(--kp-color-alert-primary-subtle-fg-desc);\n --kp-banner-icon-color: var(--kp-color-alert-primary-subtle-icon);\n }\n :host(.kp-banner--success) {\n --kp-banner-bg: var(--kp-color-alert-success-subtle-bg);\n --kp-banner-border: var(--kp-color-alert-success-subtle-border);\n --kp-banner-fg: var(--kp-color-alert-success-subtle-fg-title);\n --kp-banner-fg-desc: var(--kp-color-alert-success-subtle-fg-desc);\n --kp-banner-icon-color: var(--kp-color-alert-success-subtle-icon);\n }\n :host(.kp-banner--warning) {\n --kp-banner-bg: var(--kp-color-alert-warning-subtle-bg);\n --kp-banner-border: var(--kp-color-alert-warning-subtle-border);\n --kp-banner-fg: var(--kp-color-alert-warning-subtle-fg-title);\n --kp-banner-fg-desc: var(--kp-color-alert-warning-subtle-fg-desc);\n --kp-banner-icon-color: var(--kp-color-alert-warning-subtle-icon);\n }\n :host(.kp-banner--danger) {\n --kp-banner-bg: var(--kp-color-alert-danger-subtle-bg);\n --kp-banner-border: var(--kp-color-alert-danger-subtle-border);\n --kp-banner-fg: var(--kp-color-alert-danger-subtle-fg-title);\n --kp-banner-fg-desc: var(--kp-color-alert-danger-subtle-fg-desc);\n --kp-banner-icon-color: var(--kp-color-alert-danger-subtle-icon);\n }\n :host(.kp-banner--info) {\n --kp-banner-bg: var(--kp-color-alert-info-subtle-bg);\n --kp-banner-border: var(--kp-color-alert-info-subtle-border);\n --kp-banner-fg: var(--kp-color-alert-info-subtle-fg-title);\n --kp-banner-fg-desc: var(--kp-color-alert-info-subtle-fg-desc);\n --kp-banner-icon-color: var(--kp-color-alert-info-subtle-icon);\n }\n :host(.kp-banner--neutral) {\n --kp-banner-bg: var(--kp-color-alert-neutral-subtle-bg);\n --kp-banner-border: var(--kp-color-alert-neutral-subtle-border);\n --kp-banner-fg: var(--kp-color-alert-neutral-subtle-fg-title);\n --kp-banner-fg-desc: var(--kp-color-alert-neutral-subtle-fg-desc);\n --kp-banner-icon-color: var(--kp-color-alert-neutral-subtle-icon);\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,45FAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EA5BS,iBAAiB,4JAAE,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,45FAAA,CAAA,EAAA;;sBAsGA;;sBACA;;sBACA;;sBACA;;sBACA;;sBACA;;sBAEA;;;AC7KH;;AAEG;;;;"}
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kanso-protocol/banner",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"peerDependencies": {
|
|
6
6
|
"@angular/core": ">=21.0.0",
|
|
7
7
|
"@angular/common": ">=21.0.0",
|
|
8
|
-
"@kanso-protocol/core": ">=
|
|
9
|
-
"@kanso-protocol/button": ">=
|
|
8
|
+
"@kanso-protocol/core": ">=2.0.0",
|
|
9
|
+
"@kanso-protocol/button": ">=2.0.0"
|
|
10
10
|
},
|
|
11
11
|
"description": "Kanso Protocol — banner (pattern).",
|
|
12
12
|
"author": "GregNBlack",
|
|
@@ -11,11 +11,11 @@ type KpBannerColor = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'ne
|
|
|
11
11
|
* Reuses alert semantic tokens (subtle appearance) so color roles
|
|
12
12
|
* match Alert / Toast.
|
|
13
13
|
*
|
|
14
|
-
* Slot: `[kpBannerAction]` for a trailing CTA (typically `<
|
|
14
|
+
* Slot: `[kpBannerAction]` for a trailing CTA (typically `<button kpButton size="sm">`).
|
|
15
15
|
*
|
|
16
16
|
* @example
|
|
17
17
|
* <kp-banner color="warning" title="Your trial ends in 3 days">
|
|
18
|
-
* <
|
|
18
|
+
* <button kpButton kpBannerAction size="sm">Upgrade</button>
|
|
19
19
|
* </kp-banner>
|
|
20
20
|
*/
|
|
21
21
|
declare class KpBannerComponent {
|