@kanso-protocol/filter-bar 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,141 @@
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 { KpBadgeComponent } from '@kanso-protocol/badge';
5
+ import { KpIconComponent } from '@kanso-protocol/icon';
6
+
7
+ /**
8
+ * Kanso Protocol — FilterBar
9
+ *
10
+ * Horizontal strip of active filter chips (closable Badges in pill
11
+ * style) with an "Add filter" affordance on the left and optional
12
+ * "Save filter" / "Clear all" actions on the right. Sits under a
13
+ * TableToolbar or any filterable view.
14
+ *
15
+ * Chips come from `[filters]`. Emit `removeFilter(id)` / `addFilter`
16
+ * / `saveFilter` / `clearAll` — state management lives outside.
17
+ *
18
+ * @example
19
+ * <kp-filter-bar
20
+ * [filters]="[{ id:'s', label:'Status: Active', color:'primary' }]"
21
+ * (removeFilter)="drop($event)"
22
+ * (addFilter)="openPicker()"
23
+ * (clearAll)="reset()">
24
+ * </kp-filter-bar>
25
+ */
26
+ class KpFilterBarComponent {
27
+ filters = [];
28
+ showAddFilter = true;
29
+ showSaveFilter = false;
30
+ showClearAll = true;
31
+ removeFilter = new EventEmitter();
32
+ addFilter = new EventEmitter();
33
+ saveFilter = new EventEmitter();
34
+ clearAll = new EventEmitter();
35
+ get hostClasses() {
36
+ return 'kp-fb';
37
+ }
38
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KpFilterBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
39
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: KpFilterBarComponent, isStandalone: true, selector: "kp-filter-bar", inputs: { filters: "filters", showAddFilter: "showAddFilter", showSaveFilter: "showSaveFilter", showClearAll: "showClearAll" }, outputs: { removeFilter: "removeFilter", addFilter: "addFilter", saveFilter: "saveFilter", clearAll: "clearAll" }, host: { properties: { "class": "hostClasses" } }, ngImport: i0, template: `
40
+ <div class="kp-fb__chips">
41
+ @for (chip of filters; track chip.id) {
42
+ <kp-badge
43
+ [pill]="true"
44
+ size="sm"
45
+ appearance="subtle"
46
+ [color]="chip.color || 'neutral'"
47
+ [closable]="true"
48
+ (close)="removeFilter.emit(chip.id)"
49
+ >
50
+ {{ chip.label }}
51
+ </kp-badge>
52
+ }
53
+
54
+ @if (showAddFilter) {
55
+ <kp-button variant="ghost" size="sm" (click)="addFilter.emit()">
56
+ <kp-icon name="plus" />
57
+ <span>Add filter</span>
58
+ </kp-button>
59
+ }
60
+ </div>
61
+
62
+ <div class="kp-fb__actions">
63
+ @if (showSaveFilter) {
64
+ <kp-button variant="ghost" size="sm" (click)="saveFilter.emit()">
65
+ <kp-icon name="bookmark" />
66
+ <span>Save filter</span>
67
+ </kp-button>
68
+ }
69
+
70
+ @if (showClearAll && filters.length > 0) {
71
+ <kp-button variant="ghost" size="sm" (click)="clearAll.emit()">
72
+ <span>Clear all</span>
73
+ </kp-button>
74
+ }
75
+ </div>
76
+ `, isInline: true, styles: [":host{box-sizing:border-box;display:flex;width:100%;align-items:center;flex-wrap:wrap;gap:12px;row-gap:8px;padding:8px 16px;background:var(--kp-color-white, var(--kp-color-white));border-bottom:1px solid var(--kp-color-gray-100, var(--kp-color-gray-100));font-family:var(--kp-font-family-sans, \"Onest\", system-ui, sans-serif)}.kp-fb__chips{display:flex;align-items:center;flex-wrap:wrap;gap:6px;row-gap:6px;flex:1 1 auto;min-width:0}.kp-fb__actions{display:flex;align-items:center;gap:4px;flex:0 0 auto;margin-inline-start:auto}:host .ti{font-size:14px;line-height:1}\n"], dependencies: [{ kind: "component", type: KpButtonComponent, selector: "kp-button", inputs: ["size", "variant", "color", "disabled", "loading", "iconOnly", "forceState"] }, { kind: "component", type: KpBadgeComponent, selector: "kp-badge", inputs: ["size", "appearance", "color", "pill", "showLeadingDot", "closable"], outputs: ["close"] }, { kind: "component", type: KpIconComponent, selector: "kp-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
77
+ }
78
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KpFilterBarComponent, decorators: [{
79
+ type: Component,
80
+ args: [{ selector: 'kp-filter-bar', imports: [KpButtonComponent, KpBadgeComponent, KpIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class]': 'hostClasses' }, template: `
81
+ <div class="kp-fb__chips">
82
+ @for (chip of filters; track chip.id) {
83
+ <kp-badge
84
+ [pill]="true"
85
+ size="sm"
86
+ appearance="subtle"
87
+ [color]="chip.color || 'neutral'"
88
+ [closable]="true"
89
+ (close)="removeFilter.emit(chip.id)"
90
+ >
91
+ {{ chip.label }}
92
+ </kp-badge>
93
+ }
94
+
95
+ @if (showAddFilter) {
96
+ <kp-button variant="ghost" size="sm" (click)="addFilter.emit()">
97
+ <kp-icon name="plus" />
98
+ <span>Add filter</span>
99
+ </kp-button>
100
+ }
101
+ </div>
102
+
103
+ <div class="kp-fb__actions">
104
+ @if (showSaveFilter) {
105
+ <kp-button variant="ghost" size="sm" (click)="saveFilter.emit()">
106
+ <kp-icon name="bookmark" />
107
+ <span>Save filter</span>
108
+ </kp-button>
109
+ }
110
+
111
+ @if (showClearAll && filters.length > 0) {
112
+ <kp-button variant="ghost" size="sm" (click)="clearAll.emit()">
113
+ <span>Clear all</span>
114
+ </kp-button>
115
+ }
116
+ </div>
117
+ `, styles: [":host{box-sizing:border-box;display:flex;width:100%;align-items:center;flex-wrap:wrap;gap:12px;row-gap:8px;padding:8px 16px;background:var(--kp-color-white, var(--kp-color-white));border-bottom:1px solid var(--kp-color-gray-100, var(--kp-color-gray-100));font-family:var(--kp-font-family-sans, \"Onest\", system-ui, sans-serif)}.kp-fb__chips{display:flex;align-items:center;flex-wrap:wrap;gap:6px;row-gap:6px;flex:1 1 auto;min-width:0}.kp-fb__actions{display:flex;align-items:center;gap:4px;flex:0 0 auto;margin-inline-start:auto}:host .ti{font-size:14px;line-height:1}\n"] }]
118
+ }], propDecorators: { filters: [{
119
+ type: Input
120
+ }], showAddFilter: [{
121
+ type: Input
122
+ }], showSaveFilter: [{
123
+ type: Input
124
+ }], showClearAll: [{
125
+ type: Input
126
+ }], removeFilter: [{
127
+ type: Output
128
+ }], addFilter: [{
129
+ type: Output
130
+ }], saveFilter: [{
131
+ type: Output
132
+ }], clearAll: [{
133
+ type: Output
134
+ }] } });
135
+
136
+ /**
137
+ * Generated bundle index. Do not edit.
138
+ */
139
+
140
+ export { KpFilterBarComponent };
141
+ //# sourceMappingURL=kanso-protocol-filter-bar.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"kanso-protocol-filter-bar.mjs","sources":["../../../../../packages/patterns/filter-bar/src/filter-bar.component.ts","../../../../../packages/patterns/filter-bar/src/kanso-protocol-filter-bar.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n Output,\n} from '@angular/core';\nimport { KpButtonComponent } from '@kanso-protocol/button';\nimport { KpBadgeComponent, KpBadgeColor } from '@kanso-protocol/badge';\nimport { KpIconComponent } from '@kanso-protocol/icon';\n\nexport type KpFilterChipColor = KpBadgeColor;\n\nexport interface KpFilterChip {\n id: string;\n /** `Status: Active` or `Category: 3 selected` — include both key and value */\n label: string;\n /** Visual emphasis — `primary` for a \"feature\" filter, `neutral` for secondary */\n color?: KpFilterChipColor;\n}\n\n/**\n * Kanso Protocol — FilterBar\n *\n * Horizontal strip of active filter chips (closable Badges in pill\n * style) with an \"Add filter\" affordance on the left and optional\n * \"Save filter\" / \"Clear all\" actions on the right. Sits under a\n * TableToolbar or any filterable view.\n *\n * Chips come from `[filters]`. Emit `removeFilter(id)` / `addFilter`\n * / `saveFilter` / `clearAll` — state management lives outside.\n *\n * @example\n * <kp-filter-bar\n * [filters]=\"[{ id:'s', label:'Status: Active', color:'primary' }]\"\n * (removeFilter)=\"drop($event)\"\n * (addFilter)=\"openPicker()\"\n * (clearAll)=\"reset()\">\n * </kp-filter-bar>\n */\n@Component({\n selector: 'kp-filter-bar',\n imports: [KpButtonComponent, KpBadgeComponent, KpIconComponent],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { '[class]': 'hostClasses' },\n template: `\n <div class=\"kp-fb__chips\">\n @for (chip of filters; track chip.id) {\n <kp-badge\n [pill]=\"true\"\n size=\"sm\"\n appearance=\"subtle\"\n [color]=\"chip.color || 'neutral'\"\n [closable]=\"true\"\n (close)=\"removeFilter.emit(chip.id)\"\n >\n {{ chip.label }}\n </kp-badge>\n }\n\n @if (showAddFilter) {\n <kp-button variant=\"ghost\" size=\"sm\" (click)=\"addFilter.emit()\">\n <kp-icon name=\"plus\" />\n <span>Add filter</span>\n </kp-button>\n }\n </div>\n\n <div class=\"kp-fb__actions\">\n @if (showSaveFilter) {\n <kp-button variant=\"ghost\" size=\"sm\" (click)=\"saveFilter.emit()\">\n <kp-icon name=\"bookmark\" />\n <span>Save filter</span>\n </kp-button>\n }\n\n @if (showClearAll && filters.length > 0) {\n <kp-button variant=\"ghost\" size=\"sm\" (click)=\"clearAll.emit()\">\n <span>Clear all</span>\n </kp-button>\n }\n </div>\n `,\n styles: [`\n :host {\n box-sizing: border-box;\n display: flex;\n width: 100%;\n align-items: center;\n flex-wrap: wrap;\n gap: 12px;\n row-gap: 8px;\n padding: 8px 16px;\n background: var(--kp-color-white, var(--kp-color-white));\n border-bottom: 1px solid var(--kp-color-gray-100, var(--kp-color-gray-100));\n font-family: var(--kp-font-family-sans, 'Onest', system-ui, sans-serif);\n }\n\n .kp-fb__chips {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 6px;\n row-gap: 6px;\n flex: 1 1 auto;\n min-width: 0;\n }\n\n .kp-fb__actions {\n display: flex;\n align-items: center;\n gap: 4px;\n flex: 0 0 auto;\n margin-inline-start: auto;\n }\n\n :host .ti { font-size: 14px; line-height: 1; }\n `],\n})\nexport class KpFilterBarComponent {\n @Input() filters: KpFilterChip[] = [];\n @Input() showAddFilter = true;\n @Input() showSaveFilter = false;\n @Input() showClearAll = true;\n\n @Output() removeFilter = new EventEmitter<string>();\n @Output() addFilter = new EventEmitter<void>();\n @Output() saveFilter = new EventEmitter<void>();\n @Output() clearAll = new EventEmitter<void>();\n\n get hostClasses(): string {\n return 'kp-fb';\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAqBA;;;;;;;;;;;;;;;;;;AAkBG;MAgFU,oBAAoB,CAAA;IACtB,OAAO,GAAmB,EAAE;IAC5B,aAAa,GAAG,IAAI;IACpB,cAAc,GAAG,KAAK;IACtB,YAAY,GAAG,IAAI;AAElB,IAAA,YAAY,GAAG,IAAI,YAAY,EAAU;AACzC,IAAA,SAAS,GAAG,IAAI,YAAY,EAAQ;AACpC,IAAA,UAAU,GAAG,IAAI,YAAY,EAAQ;AACrC,IAAA,QAAQ,GAAG,IAAI,YAAY,EAAQ;AAE7C,IAAA,IAAI,WAAW,GAAA;AACb,QAAA,OAAO,OAAO;IAChB;uGAbW,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAApB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,aAAA,EAAA,eAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,YAAA,EAAA,cAAA,EAAA,EAAA,OAAA,EAAA,EAAA,YAAA,EAAA,cAAA,EAAA,SAAA,EAAA,WAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,aAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EA1ErB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,6jBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAxCS,iBAAiB,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,SAAA,EAAA,OAAA,EAAA,UAAA,EAAA,SAAA,EAAA,UAAA,EAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,gBAAgB,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,YAAA,EAAA,OAAA,EAAA,MAAA,EAAA,gBAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,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;;2FA6EnD,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBA/EhC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,eAAe,WAChB,CAAC,iBAAiB,EAAE,gBAAgB,EAAE,eAAe,CAAC,EAAA,eAAA,EAC9C,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC,EAAE,SAAS,EAAE,aAAa,EAAE,EAAA,QAAA,EACxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,6jBAAA,CAAA,EAAA;;sBAsCA;;sBACA;;sBACA;;sBACA;;sBAEA;;sBACA;;sBACA;;sBACA;;;AChIH;;AAEG;;;;"}
package/package.json ADDED
@@ -0,0 +1,43 @@
1
+ {
2
+ "name": "@kanso-protocol/filter-bar",
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
+ "@kanso-protocol/badge": ">=0.1.0"
11
+ },
12
+ "description": "Kanso Protocol — filter-bar (pattern).",
13
+ "author": "GregNBlack",
14
+ "repository": {
15
+ "type": "git",
16
+ "url": "https://github.com/GregNBlack/kanso-protocol.git",
17
+ "directory": "packages/patterns/filter-bar"
18
+ },
19
+ "homepage": "https://gregnblack.github.io/kanso-protocol/?path=/docs/patterns-filterbar--docs",
20
+ "bugs": "https://github.com/GregNBlack/kanso-protocol/issues",
21
+ "keywords": [
22
+ "design-system",
23
+ "angular",
24
+ "kanso",
25
+ "filter-bar"
26
+ ],
27
+ "sideEffects": false,
28
+ "module": "fesm2022/kanso-protocol-filter-bar.mjs",
29
+ "typings": "types/kanso-protocol-filter-bar.d.ts",
30
+ "exports": {
31
+ "./package.json": {
32
+ "default": "./package.json"
33
+ },
34
+ ".": {
35
+ "types": "./types/kanso-protocol-filter-bar.d.ts",
36
+ "default": "./fesm2022/kanso-protocol-filter-bar.mjs"
37
+ }
38
+ },
39
+ "type": "module",
40
+ "dependencies": {
41
+ "tslib": "^2.3.0"
42
+ }
43
+ }
@@ -0,0 +1,47 @@
1
+ import * as i0 from '@angular/core';
2
+ import { EventEmitter } from '@angular/core';
3
+ import { KpBadgeColor } from '@kanso-protocol/badge';
4
+
5
+ type KpFilterChipColor = KpBadgeColor;
6
+ interface KpFilterChip {
7
+ id: string;
8
+ /** `Status: Active` or `Category: 3 selected` — include both key and value */
9
+ label: string;
10
+ /** Visual emphasis — `primary` for a "feature" filter, `neutral` for secondary */
11
+ color?: KpFilterChipColor;
12
+ }
13
+ /**
14
+ * Kanso Protocol — FilterBar
15
+ *
16
+ * Horizontal strip of active filter chips (closable Badges in pill
17
+ * style) with an "Add filter" affordance on the left and optional
18
+ * "Save filter" / "Clear all" actions on the right. Sits under a
19
+ * TableToolbar or any filterable view.
20
+ *
21
+ * Chips come from `[filters]`. Emit `removeFilter(id)` / `addFilter`
22
+ * / `saveFilter` / `clearAll` — state management lives outside.
23
+ *
24
+ * @example
25
+ * <kp-filter-bar
26
+ * [filters]="[{ id:'s', label:'Status: Active', color:'primary' }]"
27
+ * (removeFilter)="drop($event)"
28
+ * (addFilter)="openPicker()"
29
+ * (clearAll)="reset()">
30
+ * </kp-filter-bar>
31
+ */
32
+ declare class KpFilterBarComponent {
33
+ filters: KpFilterChip[];
34
+ showAddFilter: boolean;
35
+ showSaveFilter: boolean;
36
+ showClearAll: boolean;
37
+ removeFilter: EventEmitter<string>;
38
+ addFilter: EventEmitter<void>;
39
+ saveFilter: EventEmitter<void>;
40
+ clearAll: EventEmitter<void>;
41
+ get hostClasses(): string;
42
+ static ɵfac: i0.ɵɵFactoryDeclaration<KpFilterBarComponent, never>;
43
+ static ɵcmp: i0.ɵɵComponentDeclaration<KpFilterBarComponent, "kp-filter-bar", never, { "filters": { "alias": "filters"; "required": false; }; "showAddFilter": { "alias": "showAddFilter"; "required": false; }; "showSaveFilter": { "alias": "showSaveFilter"; "required": false; }; "showClearAll": { "alias": "showClearAll"; "required": false; }; }, { "removeFilter": "removeFilter"; "addFilter": "addFilter"; "saveFilter": "saveFilter"; "clearAll": "clearAll"; }, never, never, true, never>;
44
+ }
45
+
46
+ export { KpFilterBarComponent };
47
+ export type { KpFilterChip, KpFilterChipColor };