@kanso-protocol/page-header 1.0.1 → 2.0.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.
|
@@ -22,8 +22,8 @@ import { EventEmitter, Output, Input, ChangeDetectionStrategy, Component } from
|
|
|
22
22
|
* >
|
|
23
23
|
* <kp-breadcrumbs kpPageHeaderBreadcrumbs [items]="crumbs"/>
|
|
24
24
|
* <div kpPageHeaderActions>
|
|
25
|
-
* <
|
|
26
|
-
* <
|
|
25
|
+
* <button kpButton appearance="ghost">Import</button>
|
|
26
|
+
* <button kpButton>Create</button>
|
|
27
27
|
* </div>
|
|
28
28
|
* </kp-page-header>
|
|
29
29
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kanso-protocol-page-header.mjs","sources":["../../../../../packages/patterns/page-header/src/page-header.component.ts","../../../../../packages/patterns/page-header/src/kanso-protocol-page-header.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n Output,\n} from '@angular/core';\n\nexport type KpPageHeaderSize = 'sm' | 'md' | 'lg';\n\n/**\n * Kanso Protocol — PageHeader\n *\n * Content-area header. Three sizes, optional breadcrumbs, back button,\n * description, actions slot, tabs slot, and bottom divider.\n *\n * Slots (all optional):\n * - `[kpPageHeaderBreadcrumbs]` — Breadcrumbs instance\n * - `[kpPageHeaderTitle]` — custom title (e.g. title + inline Badge)\n * - `[kpPageHeaderActions]` — action buttons on the right\n * - `[kpPageHeaderTabs]` — Tabs instance under the header\n *\n * @example\n * <kp-page-header\n * size=\"md\"\n * title=\"All projects\"\n * description=\"12 active projects\"\n * [showActions]=\"true\"\n * >\n * <kp-breadcrumbs kpPageHeaderBreadcrumbs [items]=\"crumbs\"/>\n * <div kpPageHeaderActions>\n * <
|
|
1
|
+
{"version":3,"file":"kanso-protocol-page-header.mjs","sources":["../../../../../packages/patterns/page-header/src/page-header.component.ts","../../../../../packages/patterns/page-header/src/kanso-protocol-page-header.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n Output,\n} from '@angular/core';\n\nexport type KpPageHeaderSize = 'sm' | 'md' | 'lg';\n\n/**\n * Kanso Protocol — PageHeader\n *\n * Content-area header. Three sizes, optional breadcrumbs, back button,\n * description, actions slot, tabs slot, and bottom divider.\n *\n * Slots (all optional):\n * - `[kpPageHeaderBreadcrumbs]` — Breadcrumbs instance\n * - `[kpPageHeaderTitle]` — custom title (e.g. title + inline Badge)\n * - `[kpPageHeaderActions]` — action buttons on the right\n * - `[kpPageHeaderTabs]` — Tabs instance under the header\n *\n * @example\n * <kp-page-header\n * size=\"md\"\n * title=\"All projects\"\n * description=\"12 active projects\"\n * [showActions]=\"true\"\n * >\n * <kp-breadcrumbs kpPageHeaderBreadcrumbs [items]=\"crumbs\"/>\n * <div kpPageHeaderActions>\n * <button kpButton appearance=\"ghost\">Import</button>\n * <button kpButton>Create</button>\n * </div>\n * </kp-page-header>\n */\n@Component({\n selector: 'kp-page-header',\n imports: [],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { '[class]': 'hostClasses' },\n template: `\n @if (showBreadcrumbs) {\n <div class=\"kp-page-header__crumbs\">\n <ng-content select=\"[kpPageHeaderBreadcrumbs]\"/>\n </div>\n }\n\n <div class=\"kp-page-header__row\">\n <div class=\"kp-page-header__left\">\n @if (showBackButton) {\n <button type=\"button\" class=\"kp-page-header__back\" aria-label=\"Back\" (click)=\"backClick.emit()\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M5 12l6-6M5 12l6 6\"/></svg>\n </button>\n }\n <div class=\"kp-page-header__text\">\n <ng-content select=\"[kpPageHeaderTitle]\">\n <h1 class=\"kp-page-header__title\">{{ title }}</h1>\n </ng-content>\n @if (showDescription && description) {\n <p class=\"kp-page-header__desc\">{{ description }}</p>\n }\n </div>\n </div>\n @if (showActions) {\n <div class=\"kp-page-header__actions\">\n <ng-content select=\"[kpPageHeaderActions]\"/>\n </div>\n }\n </div>\n\n @if (showTabs) {\n <div class=\"kp-page-header__tabs\">\n <ng-content select=\"[kpPageHeaderTabs]\"/>\n </div>\n }\n\n @if (showBottomDivider) {\n <div class=\"kp-page-header__divider\" aria-hidden=\"true\"></div>\n }\n `,\n styles: [`\n :host {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n width: 100%;\n font-family: var(--kp-font-family-sans, 'Onest', system-ui, sans-serif);\n }\n\n .kp-page-header__crumbs {\n margin-bottom: var(--kp-ph-gap-crumbs, 16px);\n }\n\n .kp-page-header__row {\n display: flex;\n align-items: flex-start;\n gap: 16px;\n justify-content: space-between;\n }\n\n .kp-page-header__left {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n flex: 1 1 auto;\n min-width: 0;\n }\n\n .kp-page-header__back {\n all: unset;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n margin-top: 2px;\n border-radius: 8px;\n color: var(--kp-color-text-muted);\n cursor: pointer;\n transition: background var(--kp-motion-duration-fast) ease;\n }\n .kp-page-header__back:hover { background: var(--kp-color-surface-muted); color: var(--kp-color-text-strong); }\n .kp-page-header__back svg { width: 20px; height: 20px; }\n\n .kp-page-header__text {\n display: flex;\n flex-direction: column;\n gap: var(--kp-ph-gap-text, 6px);\n min-width: 0;\n flex: 1 1 auto;\n }\n\n .kp-page-header__title {\n margin: 0;\n font-size: var(--kp-ph-title-fs, 24px);\n font-weight: var(--kp-ph-title-weight, 500);\n color: var(--kp-color-text-strong);\n line-height: 1.2;\n }\n\n .kp-page-header__desc {\n margin: 0;\n font-size: var(--kp-ph-desc-fs, 14px);\n color: var(--kp-color-text-muted);\n line-height: 1.5;\n }\n\n .kp-page-header__actions {\n display: flex;\n align-items: center;\n gap: 8px;\n flex: 0 0 auto;\n }\n\n .kp-page-header__tabs {\n margin-top: var(--kp-ph-gap-tabs, 24px);\n }\n\n .kp-page-header__divider {\n margin-top: var(--kp-ph-pad-bottom, 24px);\n height: 1px;\n background: var(--kp-color-surface-strong);\n }\n\n :host(.kp-page-header--sm) {\n --kp-ph-title-fs: 18px;\n --kp-ph-title-weight: 500;\n --kp-ph-desc-fs: 13px;\n --kp-ph-gap-text: 4px;\n --kp-ph-gap-crumbs: 12px;\n --kp-ph-gap-tabs: 16px;\n --kp-ph-pad-bottom: 16px;\n }\n :host(.kp-page-header--md) {\n --kp-ph-title-fs: 24px;\n --kp-ph-title-weight: 500;\n --kp-ph-desc-fs: 14px;\n --kp-ph-gap-text: 6px;\n --kp-ph-gap-crumbs: 16px;\n --kp-ph-gap-tabs: 24px;\n --kp-ph-pad-bottom: 24px;\n }\n :host(.kp-page-header--lg) {\n --kp-ph-title-fs: 30px;\n --kp-ph-title-weight: 600;\n --kp-ph-desc-fs: 16px;\n --kp-ph-gap-text: 8px;\n --kp-ph-gap-crumbs: 16px;\n --kp-ph-gap-tabs: 32px;\n --kp-ph-pad-bottom: 32px;\n }\n `],\n})\nexport class KpPageHeaderComponent {\n @Input() size: KpPageHeaderSize = 'md';\n\n @Input() title = 'Page title';\n @Input() description: string | null = null;\n\n @Input() showBreadcrumbs = false;\n @Input() showBackButton = false;\n @Input() showDescription = false;\n @Input() showActions = false;\n @Input() showTabs = false;\n @Input() showBottomDivider = true;\n\n @Output() backClick = new EventEmitter<void>();\n\n get hostClasses(): string {\n return `kp-page-header kp-page-header--${this.size}`;\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAUA;;;;;;;;;;;;;;;;;;;;;;;;;AAyBG;MA+JU,qBAAqB,CAAA;IACvB,IAAI,GAAqB,IAAI;IAE7B,KAAK,GAAG,YAAY;IACpB,WAAW,GAAkB,IAAI;IAEjC,eAAe,GAAG,KAAK;IACvB,cAAc,GAAG,KAAK;IACtB,eAAe,GAAG,KAAK;IACvB,WAAW,GAAG,KAAK;IACnB,QAAQ,GAAG,KAAK;IAChB,iBAAiB,GAAG,IAAI;AAEvB,IAAA,SAAS,GAAG,IAAI,YAAY,EAAQ;AAE9C,IAAA,IAAI,WAAW,GAAA;AACb,QAAA,OAAO,CAAA,+BAAA,EAAkC,IAAI,CAAC,IAAI,EAAE;IACtD;uGAjBW,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAArB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,WAAA,EAAA,aAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,QAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,EAAA,OAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,aAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAzJtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,ggEAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAkHU,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBA9JjC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,EAAA,OAAA,EACjB,EAAE,EAAA,eAAA,EACM,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC,EAAE,SAAS,EAAE,aAAa,EAAE,EAAA,QAAA,EACxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,ggEAAA,CAAA,EAAA;;sBAmHA;;sBAEA;;sBACA;;sBAEA;;sBACA;;sBACA;;sBACA;;sBACA;;sBACA;;sBAEA;;;AC/MH;;AAEG;;;;"}
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kanso-protocol/page-header",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.1",
|
|
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": ">=
|
|
8
|
+
"@kanso-protocol/core": ">=2.0.1"
|
|
9
9
|
},
|
|
10
10
|
"description": "Kanso Protocol — page-header (pattern).",
|
|
11
11
|
"author": "GregNBlack",
|
|
@@ -23,8 +23,8 @@ type KpPageHeaderSize = 'sm' | 'md' | 'lg';
|
|
|
23
23
|
* >
|
|
24
24
|
* <kp-breadcrumbs kpPageHeaderBreadcrumbs [items]="crumbs"/>
|
|
25
25
|
* <div kpPageHeaderActions>
|
|
26
|
-
* <
|
|
27
|
-
* <
|
|
26
|
+
* <button kpButton appearance="ghost">Import</button>
|
|
27
|
+
* <button kpButton>Create</button>
|
|
28
28
|
* </div>
|
|
29
29
|
* </kp-page-header>
|
|
30
30
|
*/
|