@kanso-protocol/filter-bar 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.
|
@@ -52,28 +52,28 @@ class KpFilterBarComponent {
|
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
@if (showAddFilter) {
|
|
55
|
-
<
|
|
55
|
+
<button kpButton variant="ghost" size="sm" (click)="addFilter.emit()">
|
|
56
56
|
<kp-icon name="plus" />
|
|
57
57
|
<span>Add filter</span>
|
|
58
|
-
</
|
|
58
|
+
</button>
|
|
59
59
|
}
|
|
60
60
|
</div>
|
|
61
61
|
|
|
62
62
|
<div class="kp-fb__actions">
|
|
63
63
|
@if (showSaveFilter) {
|
|
64
|
-
<
|
|
64
|
+
<button kpButton variant="ghost" size="sm" (click)="saveFilter.emit()">
|
|
65
65
|
<kp-icon name="bookmark" />
|
|
66
66
|
<span>Save filter</span>
|
|
67
|
-
</
|
|
67
|
+
</button>
|
|
68
68
|
}
|
|
69
69
|
|
|
70
70
|
@if (showClearAll && filters.length > 0) {
|
|
71
|
-
<
|
|
71
|
+
<button kpButton variant="ghost" size="sm" (click)="clearAll.emit()">
|
|
72
72
|
<span>Clear all</span>
|
|
73
|
-
</
|
|
73
|
+
</button>
|
|
74
74
|
}
|
|
75
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-surface-base);border-bottom:1px solid var(--kp-color-border-subtle);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: "
|
|
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-surface-base);border-bottom:1px solid var(--kp-color-border-subtle);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: "button[kpButton]", inputs: ["type", "size", "variant", "color", "disabled", "loading", "iconOnly", "forceState"] }, { kind: "component", type: KpBadgeComponent, selector: "kp-badge", inputs: ["size", "appearance", "color", "pill", "count", "showLeadingDot", "closable"], outputs: ["close"] }, { kind: "component", type: KpIconComponent, selector: "kp-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
77
77
|
}
|
|
78
78
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KpFilterBarComponent, decorators: [{
|
|
79
79
|
type: Component,
|
|
@@ -93,25 +93,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
|
|
|
93
93
|
}
|
|
94
94
|
|
|
95
95
|
@if (showAddFilter) {
|
|
96
|
-
<
|
|
96
|
+
<button kpButton variant="ghost" size="sm" (click)="addFilter.emit()">
|
|
97
97
|
<kp-icon name="plus" />
|
|
98
98
|
<span>Add filter</span>
|
|
99
|
-
</
|
|
99
|
+
</button>
|
|
100
100
|
}
|
|
101
101
|
</div>
|
|
102
102
|
|
|
103
103
|
<div class="kp-fb__actions">
|
|
104
104
|
@if (showSaveFilter) {
|
|
105
|
-
<
|
|
105
|
+
<button kpButton variant="ghost" size="sm" (click)="saveFilter.emit()">
|
|
106
106
|
<kp-icon name="bookmark" />
|
|
107
107
|
<span>Save filter</span>
|
|
108
|
-
</
|
|
108
|
+
</button>
|
|
109
109
|
}
|
|
110
110
|
|
|
111
111
|
@if (showClearAll && filters.length > 0) {
|
|
112
|
-
<
|
|
112
|
+
<button kpButton variant="ghost" size="sm" (click)="clearAll.emit()">
|
|
113
113
|
<span>Clear all</span>
|
|
114
|
-
</
|
|
114
|
+
</button>
|
|
115
115
|
}
|
|
116
116
|
</div>
|
|
117
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-surface-base);border-bottom:1px solid var(--kp-color-border-subtle);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"] }]
|
|
@@ -1 +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 <
|
|
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 <button kpButton variant=\"ghost\" size=\"sm\" (click)=\"addFilter.emit()\">\n <kp-icon name=\"plus\" />\n <span>Add filter</span>\n </button>\n }\n </div>\n\n <div class=\"kp-fb__actions\">\n @if (showSaveFilter) {\n <button kpButton variant=\"ghost\" size=\"sm\" (click)=\"saveFilter.emit()\">\n <kp-icon name=\"bookmark\" />\n <span>Save filter</span>\n </button>\n }\n\n @if (showClearAll && filters.length > 0) {\n <button kpButton variant=\"ghost\" size=\"sm\" (click)=\"clearAll.emit()\">\n <span>Clear all</span>\n </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-surface-base);\n border-bottom: 1px solid var(--kp-color-border-subtle);\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,whBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAxCS,iBAAiB,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,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,OAAA,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,whBAAA,CAAA,EAAA;;sBAsCA;;sBACA;;sBACA;;sBACA;;sBAEA;;sBACA;;sBACA;;sBACA;;;AChIH;;AAEG;;;;"}
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kanso-protocol/filter-bar",
|
|
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": ">=
|
|
10
|
-
"@kanso-protocol/badge": ">=
|
|
8
|
+
"@kanso-protocol/core": ">=2.0.0",
|
|
9
|
+
"@kanso-protocol/button": ">=2.0.0",
|
|
10
|
+
"@kanso-protocol/badge": ">=2.0.0"
|
|
11
11
|
},
|
|
12
12
|
"description": "Kanso Protocol — filter-bar (pattern).",
|
|
13
13
|
"author": "GregNBlack",
|