@kanso-protocol/filter-bar 0.1.0 → 0.5.2
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.
|
@@ -73,7 +73,7 @@ class KpFilterBarComponent {
|
|
|
73
73
|
</kp-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-
|
|
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: "kp-button", inputs: ["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,
|
|
@@ -114,7 +114,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
|
|
|
114
114
|
</kp-button>
|
|
115
115
|
}
|
|
116
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-
|
|
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"] }]
|
|
118
118
|
}], propDecorators: { filters: [{
|
|
119
119
|
type: Input
|
|
120
120
|
}], showAddFilter: [{
|
|
@@ -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 <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-
|
|
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-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,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,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": "0.
|
|
3
|
+
"version": "0.5.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"peerDependencies": {
|
|
6
6
|
"@angular/core": "^18.0.0",
|
|
7
7
|
"@angular/common": "^18.0.0",
|
|
8
|
-
"@kanso-protocol/core": "
|
|
9
|
-
"@kanso-protocol/button": ">=0.
|
|
10
|
-
"@kanso-protocol/badge": ">=0.
|
|
8
|
+
"@kanso-protocol/core": ">=0.5.2",
|
|
9
|
+
"@kanso-protocol/button": ">=0.5.2",
|
|
10
|
+
"@kanso-protocol/badge": ">=0.5.2"
|
|
11
11
|
},
|
|
12
12
|
"description": "Kanso Protocol — filter-bar (pattern).",
|
|
13
13
|
"author": "GregNBlack",
|