@kanso-protocol/table-toolbar 0.1.0 → 0.5.3
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.
|
@@ -75,9 +75,9 @@ class KpTableToolbarComponent {
|
|
|
75
75
|
@if (showFilter) {
|
|
76
76
|
<kp-button variant="outline" size="sm" (click)="filterClick.emit()">
|
|
77
77
|
<kp-icon kpButtonIconLeft name="filter" />
|
|
78
|
-
|
|
78
|
+
Filters
|
|
79
79
|
@if (activeFilterCount > 0) {
|
|
80
|
-
<kp-badge size="xs" color="primary" appearance="subtle">{{ activeFilterCount }}</kp-badge>
|
|
80
|
+
<kp-badge kpButtonIconRight size="xs" color="primary" appearance="subtle">{{ activeFilterCount }}</kp-badge>
|
|
81
81
|
}
|
|
82
82
|
</kp-button>
|
|
83
83
|
}
|
|
@@ -175,7 +175,7 @@ class KpTableToolbarComponent {
|
|
|
175
175
|
</kp-button>
|
|
176
176
|
</div>
|
|
177
177
|
}
|
|
178
|
-
`, isInline: true, styles: [":host{box-sizing:border-box;display:flex;width:100%;max-width:100%;min-width:0;overflow:hidden;align-items:center;flex-wrap:wrap;gap:12px;row-gap:8px;padding:12px 16px;background:var(--kp-color-
|
|
178
|
+
`, isInline: true, styles: [":host{box-sizing:border-box;display:flex;width:100%;max-width:100%;min-width:0;overflow:hidden;align-items:center;flex-wrap:wrap;gap:12px;row-gap:8px;padding:12px 16px;background:var(--kp-color-surface-base);border-bottom:1px solid var(--kp-color-border-default);font-family:var(--kp-font-family-sans, \"Onest\", system-ui, sans-serif)}.kp-tt__left{display:flex;align-items:center;flex-wrap:wrap;gap:12px;row-gap:8px;flex:1 1 auto;min-width:0}.kp-tt__right{display:flex;align-items:center;flex-wrap:wrap;gap:8px;row-gap:8px;flex:0 1 auto;justify-content:flex-end;margin-inline-start:auto}:host kp-search-bar{display:flex!important;flex:1 1 240px;min-width:0;max-width:320px}:host kp-search-bar ::ng-deep .kp-search-bar__wrap{width:100%!important;min-width:0}.kp-tt__divider{width:1px;height:24px;background:var(--kp-color-surface-strong);margin:0 4px}.kp-tt__selected{font-size:13px;color:var(--kp-color-text-default)}.kp-tt__selected strong{color:var(--kp-color-text-strong);font-weight:600}.kp-tt__density{display:inline-flex;padding:2px;border:1px solid var(--kp-color-border-default);border-radius:6px;background:var(--kp-color-surface-subtle)}.kp-tt__density-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:24px;padding:0;border:none;background:transparent;border-radius:4px;color:var(--kp-color-text-muted);cursor:pointer;font:inherit}.kp-tt__density-btn:hover{color:var(--kp-color-text-strong)}.kp-tt__density-btn--active{background:var(--kp-color-surface-base);color:var(--kp-color-text-strong);box-shadow:var(--kp-elevation-raised)}.kp-tt__density-btn .ti{font-size:14px;line-height:1}: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"] }, { kind: "component", type: KpSearchBarComponent, selector: "kp-search-bar", inputs: ["variant", "size", "placeholder", "value", "showShortcutHint", "shortcutHint", "groups"], outputs: ["valueChange", "search", "itemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
179
179
|
}
|
|
180
180
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KpTableToolbarComponent, decorators: [{
|
|
181
181
|
type: Component,
|
|
@@ -195,9 +195,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
|
|
|
195
195
|
@if (showFilter) {
|
|
196
196
|
<kp-button variant="outline" size="sm" (click)="filterClick.emit()">
|
|
197
197
|
<kp-icon kpButtonIconLeft name="filter" />
|
|
198
|
-
|
|
198
|
+
Filters
|
|
199
199
|
@if (activeFilterCount > 0) {
|
|
200
|
-
<kp-badge size="xs" color="primary" appearance="subtle">{{ activeFilterCount }}</kp-badge>
|
|
200
|
+
<kp-badge kpButtonIconRight size="xs" color="primary" appearance="subtle">{{ activeFilterCount }}</kp-badge>
|
|
201
201
|
}
|
|
202
202
|
</kp-button>
|
|
203
203
|
}
|
|
@@ -295,7 +295,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
|
|
|
295
295
|
</kp-button>
|
|
296
296
|
</div>
|
|
297
297
|
}
|
|
298
|
-
`, styles: [":host{box-sizing:border-box;display:flex;width:100%;max-width:100%;min-width:0;overflow:hidden;align-items:center;flex-wrap:wrap;gap:12px;row-gap:8px;padding:12px 16px;background:var(--kp-color-
|
|
298
|
+
`, styles: [":host{box-sizing:border-box;display:flex;width:100%;max-width:100%;min-width:0;overflow:hidden;align-items:center;flex-wrap:wrap;gap:12px;row-gap:8px;padding:12px 16px;background:var(--kp-color-surface-base);border-bottom:1px solid var(--kp-color-border-default);font-family:var(--kp-font-family-sans, \"Onest\", system-ui, sans-serif)}.kp-tt__left{display:flex;align-items:center;flex-wrap:wrap;gap:12px;row-gap:8px;flex:1 1 auto;min-width:0}.kp-tt__right{display:flex;align-items:center;flex-wrap:wrap;gap:8px;row-gap:8px;flex:0 1 auto;justify-content:flex-end;margin-inline-start:auto}:host kp-search-bar{display:flex!important;flex:1 1 240px;min-width:0;max-width:320px}:host kp-search-bar ::ng-deep .kp-search-bar__wrap{width:100%!important;min-width:0}.kp-tt__divider{width:1px;height:24px;background:var(--kp-color-surface-strong);margin:0 4px}.kp-tt__selected{font-size:13px;color:var(--kp-color-text-default)}.kp-tt__selected strong{color:var(--kp-color-text-strong);font-weight:600}.kp-tt__density{display:inline-flex;padding:2px;border:1px solid var(--kp-color-border-default);border-radius:6px;background:var(--kp-color-surface-subtle)}.kp-tt__density-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:24px;padding:0;border:none;background:transparent;border-radius:4px;color:var(--kp-color-text-muted);cursor:pointer;font:inherit}.kp-tt__density-btn:hover{color:var(--kp-color-text-strong)}.kp-tt__density-btn--active{background:var(--kp-color-surface-base);color:var(--kp-color-text-strong);box-shadow:var(--kp-elevation-raised)}.kp-tt__density-btn .ti{font-size:14px;line-height:1}:host .ti{font-size:14px;line-height:1}\n"] }]
|
|
299
299
|
}], propDecorators: { mode: [{
|
|
300
300
|
type: Input
|
|
301
301
|
}], showSearch: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kanso-protocol-table-toolbar.mjs","sources":["../../../../../packages/patterns/table-toolbar/src/table-toolbar.component.ts","../../../../../packages/patterns/table-toolbar/src/kanso-protocol-table-toolbar.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 } from '@kanso-protocol/badge';\nimport { KpIconComponent } from '@kanso-protocol/icon';\nimport { KpSearchBarComponent } from '@kanso-protocol/search-bar';\n\nexport type KpTableToolbarMode = 'default' | 'bulk-select';\nexport type KpTableToolbarDensity = 'compact' | 'comfortable' | 'spacious';\n\n/**\n * Kanso Protocol — TableToolbar\n *\n * Panel that sits above a data table. Two modes:\n * - `default` — search + filter/sort + right-side actions (density, columns,\n * export, create).\n * - `bulk-select` — swaps to a selection summary with bulk actions\n * (export / tag / move / delete).\n *\n * Composes SearchBar, Button, Badge. Action slots are boolean toggles so\n * you can dial the toolbar from minimal (\"search + create\") up to a full\n * admin bar without touching templates.\n *\n * @example\n * <kp-table-toolbar\n * [showFilter]=\"true\"\n * [activeFilterCount]=\"2\"\n * (createClick)=\"openCreate()\">\n * </kp-table-toolbar>\n */\n@Component({\n selector: 'kp-table-toolbar',\n imports: [KpButtonComponent, KpBadgeComponent, KpIconComponent, KpSearchBarComponent],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { '[class]': 'hostClasses' },\n template: `\n @if (mode === 'default') {\n <div class=\"kp-tt__left\">\n @if (showSearch) {\n <kp-search-bar\n variant=\"inline\"\n size=\"sm\"\n [placeholder]=\"searchPlaceholder\"\n [value]=\"searchValue\"\n (valueChange)=\"searchChange.emit($event)\"\n />\n }\n\n @if (showFilter) {\n <kp-button variant=\"outline\" size=\"sm\" (click)=\"filterClick.emit()\">\n <kp-icon kpButtonIconLeft name=\"filter\" />\n <span>Filters</span>\n @if (activeFilterCount > 0) {\n <kp-badge size=\"xs\" color=\"primary\" appearance=\"subtle\">{{ activeFilterCount }}</kp-badge>\n }\n </kp-button>\n }\n\n @if (showSort) {\n <kp-button variant=\"outline\" size=\"sm\" (click)=\"sortClick.emit()\">\n <kp-icon kpButtonIconLeft name=\"arrows-up-down\" />\n <span>Sort</span>\n </kp-button>\n }\n </div>\n\n <div class=\"kp-tt__right\">\n @if (showDensity) {\n <div class=\"kp-tt__density\" role=\"group\" aria-label=\"Row density\">\n <button\n type=\"button\"\n class=\"kp-tt__density-btn\"\n [class.kp-tt__density-btn--active]=\"density === 'compact'\"\n (click)=\"densityChange.emit('compact')\"\n aria-label=\"Compact\">\n <kp-icon name=\"layout-list\" />\n </button>\n <button\n type=\"button\"\n class=\"kp-tt__density-btn\"\n [class.kp-tt__density-btn--active]=\"density === 'comfortable'\"\n (click)=\"densityChange.emit('comfortable')\"\n aria-label=\"Comfortable\">\n <kp-icon name=\"layout-rows\" />\n </button>\n <button\n type=\"button\"\n class=\"kp-tt__density-btn\"\n [class.kp-tt__density-btn--active]=\"density === 'spacious'\"\n (click)=\"densityChange.emit('spacious')\"\n aria-label=\"Spacious\">\n <kp-icon name=\"layout-grid\" />\n </button>\n </div>\n }\n\n @if (showColumnPicker) {\n <kp-button variant=\"outline\" size=\"sm\" [iconOnly]=\"true\" aria-label=\"Columns\" (click)=\"columnsClick.emit()\">\n <kp-icon kpButtonIconLeft name=\"layout-columns\" />\n </kp-button>\n }\n\n @if (showExport) {\n <kp-button variant=\"ghost\" size=\"sm\" (click)=\"exportClick.emit()\">\n <kp-icon kpButtonIconLeft name=\"download\" />\n <span>Export</span>\n </kp-button>\n }\n\n @if (hasRightActions && showCreate) {\n <span class=\"kp-tt__divider\" aria-hidden=\"true\"></span>\n }\n\n @if (showCreate) {\n <kp-button variant=\"default\" color=\"primary\" size=\"sm\" (click)=\"createClick.emit()\">\n <kp-icon kpButtonIconLeft name=\"plus\" />\n <span>{{ createLabel }}</span>\n </kp-button>\n }\n </div>\n } @else {\n <div class=\"kp-tt__left\">\n <span class=\"kp-tt__selected\">\n <strong>{{ selectedCount }}</strong> {{ selectedCount === 1 ? 'item' : 'items' }} selected\n </span>\n <kp-button variant=\"ghost\" size=\"sm\" (click)=\"clearSelection.emit()\">\n <kp-icon kpButtonIconLeft name=\"x\" />\n <span>Clear selection</span>\n </kp-button>\n </div>\n\n <div class=\"kp-tt__right\">\n <kp-button variant=\"outline\" size=\"sm\" (click)=\"bulkExport.emit()\">\n <kp-icon kpButtonIconLeft name=\"download\" />\n <span>Export selected</span>\n </kp-button>\n <kp-button variant=\"outline\" size=\"sm\" (click)=\"bulkTag.emit()\">\n <kp-icon kpButtonIconLeft name=\"tag\" />\n <span>Tag</span>\n </kp-button>\n <kp-button variant=\"outline\" size=\"sm\" (click)=\"bulkMove.emit()\">\n <kp-icon kpButtonIconLeft name=\"folder\" />\n <span>Move to…</span>\n </kp-button>\n <span class=\"kp-tt__divider\" aria-hidden=\"true\"></span>\n <kp-button variant=\"outline\" color=\"danger\" size=\"sm\" (click)=\"bulkDelete.emit()\">\n <kp-icon kpButtonIconLeft name=\"trash\" />\n <span>Delete</span>\n </kp-button>\n </div>\n }\n `,\n styles: [`\n :host {\n box-sizing: border-box;\n display: flex;\n width: 100%;\n max-width: 100%;\n min-width: 0;\n overflow: hidden;\n align-items: center;\n flex-wrap: wrap;\n gap: 12px;\n row-gap: 8px;\n padding: 12px 16px;\n background: var(--kp-color-white, var(--kp-color-white));\n border-bottom: 1px solid var(--kp-color-gray-200, var(--kp-color-gray-200));\n font-family: var(--kp-font-family-sans, 'Onest', system-ui, sans-serif);\n }\n\n .kp-tt__left {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 12px;\n row-gap: 8px;\n flex: 1 1 auto;\n min-width: 0;\n }\n\n .kp-tt__right {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 8px;\n row-gap: 8px;\n flex: 0 1 auto;\n justify-content: flex-end;\n margin-inline-start: auto;\n }\n\n /* Let SearchBar shrink inside the toolbar when the viewport is narrow.\n Need !important — SearchBar's own :host { display: inline-block }\n wins on specificity otherwise. */\n :host kp-search-bar {\n display: flex !important;\n flex: 1 1 240px;\n min-width: 0;\n max-width: 320px;\n }\n :host kp-search-bar ::ng-deep .kp-search-bar__wrap {\n width: 100% !important;\n min-width: 0;\n }\n\n .kp-tt__divider {\n width: 1px;\n height: 24px;\n background: var(--kp-color-gray-200, var(--kp-color-gray-200));\n margin: 0 4px;\n }\n\n .kp-tt__selected {\n font-size: 13px;\n color: var(--kp-color-gray-700, var(--kp-color-gray-700));\n }\n .kp-tt__selected strong {\n color: var(--kp-color-gray-900, var(--kp-color-gray-900));\n font-weight: 600;\n }\n\n /* Density toggle — compact segmented look */\n .kp-tt__density {\n display: inline-flex;\n padding: 2px;\n border: 1px solid var(--kp-color-gray-200, var(--kp-color-gray-200));\n border-radius: 6px;\n background: var(--kp-color-gray-50, var(--kp-color-gray-50));\n }\n .kp-tt__density-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 24px;\n padding: 0;\n border: none;\n background: transparent;\n border-radius: 4px;\n color: var(--kp-color-gray-600, var(--kp-color-gray-600));\n cursor: pointer;\n font: inherit;\n }\n .kp-tt__density-btn:hover { color: var(--kp-color-gray-900, var(--kp-color-gray-900)); }\n .kp-tt__density-btn--active {\n background: var(--kp-color-white, var(--kp-color-white));\n color: var(--kp-color-gray-900, var(--kp-color-gray-900));\n box-shadow: var(--kp-elevation-raised);\n }\n .kp-tt__density-btn .ti { font-size: 14px; line-height: 1; }\n\n /* Inline icons inside buttons */\n :host .ti { font-size: 14px; line-height: 1; }\n `],\n})\nexport class KpTableToolbarComponent {\n @Input() mode: KpTableToolbarMode = 'default';\n\n @Input() showSearch = true;\n @Input() searchPlaceholder = 'Search…';\n @Input() searchValue = '';\n\n @Input() showFilter = true;\n @Input() activeFilterCount = 0;\n\n @Input() showSort = false;\n @Input() showDensity = false;\n @Input() density: KpTableToolbarDensity = 'comfortable';\n\n @Input() showColumnPicker = false;\n @Input() showExport = false;\n @Input() showCreate = true;\n @Input() createLabel = 'Create new';\n\n @Input() selectedCount = 0;\n\n @Output() searchChange = new EventEmitter<string>();\n @Output() filterClick = new EventEmitter<void>();\n @Output() sortClick = new EventEmitter<void>();\n @Output() densityChange = new EventEmitter<KpTableToolbarDensity>();\n @Output() columnsClick = new EventEmitter<void>();\n @Output() exportClick = new EventEmitter<void>();\n @Output() createClick = new EventEmitter<void>();\n\n @Output() clearSelection = new EventEmitter<void>();\n @Output() bulkExport = new EventEmitter<void>();\n @Output() bulkTag = new EventEmitter<void>();\n @Output() bulkMove = new EventEmitter<void>();\n @Output() bulkDelete = new EventEmitter<void>();\n\n get hasRightActions(): boolean {\n return this.showDensity || this.showColumnPicker || this.showExport;\n }\n\n get hostClasses(): string {\n return `kp-tt kp-tt--${this.mode}`;\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"kanso-protocol-table-toolbar.mjs","sources":["../../../../../packages/patterns/table-toolbar/src/table-toolbar.component.ts","../../../../../packages/patterns/table-toolbar/src/kanso-protocol-table-toolbar.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 } from '@kanso-protocol/badge';\nimport { KpIconComponent } from '@kanso-protocol/icon';\nimport { KpSearchBarComponent } from '@kanso-protocol/search-bar';\n\nexport type KpTableToolbarMode = 'default' | 'bulk-select';\nexport type KpTableToolbarDensity = 'compact' | 'comfortable' | 'spacious';\n\n/**\n * Kanso Protocol — TableToolbar\n *\n * Panel that sits above a data table. Two modes:\n * - `default` — search + filter/sort + right-side actions (density, columns,\n * export, create).\n * - `bulk-select` — swaps to a selection summary with bulk actions\n * (export / tag / move / delete).\n *\n * Composes SearchBar, Button, Badge. Action slots are boolean toggles so\n * you can dial the toolbar from minimal (\"search + create\") up to a full\n * admin bar without touching templates.\n *\n * @example\n * <kp-table-toolbar\n * [showFilter]=\"true\"\n * [activeFilterCount]=\"2\"\n * (createClick)=\"openCreate()\">\n * </kp-table-toolbar>\n */\n@Component({\n selector: 'kp-table-toolbar',\n imports: [KpButtonComponent, KpBadgeComponent, KpIconComponent, KpSearchBarComponent],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { '[class]': 'hostClasses' },\n template: `\n @if (mode === 'default') {\n <div class=\"kp-tt__left\">\n @if (showSearch) {\n <kp-search-bar\n variant=\"inline\"\n size=\"sm\"\n [placeholder]=\"searchPlaceholder\"\n [value]=\"searchValue\"\n (valueChange)=\"searchChange.emit($event)\"\n />\n }\n\n @if (showFilter) {\n <kp-button variant=\"outline\" size=\"sm\" (click)=\"filterClick.emit()\">\n <kp-icon kpButtonIconLeft name=\"filter\" />\n Filters\n @if (activeFilterCount > 0) {\n <kp-badge kpButtonIconRight size=\"xs\" color=\"primary\" appearance=\"subtle\">{{ activeFilterCount }}</kp-badge>\n }\n </kp-button>\n }\n\n @if (showSort) {\n <kp-button variant=\"outline\" size=\"sm\" (click)=\"sortClick.emit()\">\n <kp-icon kpButtonIconLeft name=\"arrows-up-down\" />\n <span>Sort</span>\n </kp-button>\n }\n </div>\n\n <div class=\"kp-tt__right\">\n @if (showDensity) {\n <div class=\"kp-tt__density\" role=\"group\" aria-label=\"Row density\">\n <button\n type=\"button\"\n class=\"kp-tt__density-btn\"\n [class.kp-tt__density-btn--active]=\"density === 'compact'\"\n (click)=\"densityChange.emit('compact')\"\n aria-label=\"Compact\">\n <kp-icon name=\"layout-list\" />\n </button>\n <button\n type=\"button\"\n class=\"kp-tt__density-btn\"\n [class.kp-tt__density-btn--active]=\"density === 'comfortable'\"\n (click)=\"densityChange.emit('comfortable')\"\n aria-label=\"Comfortable\">\n <kp-icon name=\"layout-rows\" />\n </button>\n <button\n type=\"button\"\n class=\"kp-tt__density-btn\"\n [class.kp-tt__density-btn--active]=\"density === 'spacious'\"\n (click)=\"densityChange.emit('spacious')\"\n aria-label=\"Spacious\">\n <kp-icon name=\"layout-grid\" />\n </button>\n </div>\n }\n\n @if (showColumnPicker) {\n <kp-button variant=\"outline\" size=\"sm\" [iconOnly]=\"true\" aria-label=\"Columns\" (click)=\"columnsClick.emit()\">\n <kp-icon kpButtonIconLeft name=\"layout-columns\" />\n </kp-button>\n }\n\n @if (showExport) {\n <kp-button variant=\"ghost\" size=\"sm\" (click)=\"exportClick.emit()\">\n <kp-icon kpButtonIconLeft name=\"download\" />\n <span>Export</span>\n </kp-button>\n }\n\n @if (hasRightActions && showCreate) {\n <span class=\"kp-tt__divider\" aria-hidden=\"true\"></span>\n }\n\n @if (showCreate) {\n <kp-button variant=\"default\" color=\"primary\" size=\"sm\" (click)=\"createClick.emit()\">\n <kp-icon kpButtonIconLeft name=\"plus\" />\n <span>{{ createLabel }}</span>\n </kp-button>\n }\n </div>\n } @else {\n <div class=\"kp-tt__left\">\n <span class=\"kp-tt__selected\">\n <strong>{{ selectedCount }}</strong> {{ selectedCount === 1 ? 'item' : 'items' }} selected\n </span>\n <kp-button variant=\"ghost\" size=\"sm\" (click)=\"clearSelection.emit()\">\n <kp-icon kpButtonIconLeft name=\"x\" />\n <span>Clear selection</span>\n </kp-button>\n </div>\n\n <div class=\"kp-tt__right\">\n <kp-button variant=\"outline\" size=\"sm\" (click)=\"bulkExport.emit()\">\n <kp-icon kpButtonIconLeft name=\"download\" />\n <span>Export selected</span>\n </kp-button>\n <kp-button variant=\"outline\" size=\"sm\" (click)=\"bulkTag.emit()\">\n <kp-icon kpButtonIconLeft name=\"tag\" />\n <span>Tag</span>\n </kp-button>\n <kp-button variant=\"outline\" size=\"sm\" (click)=\"bulkMove.emit()\">\n <kp-icon kpButtonIconLeft name=\"folder\" />\n <span>Move to…</span>\n </kp-button>\n <span class=\"kp-tt__divider\" aria-hidden=\"true\"></span>\n <kp-button variant=\"outline\" color=\"danger\" size=\"sm\" (click)=\"bulkDelete.emit()\">\n <kp-icon kpButtonIconLeft name=\"trash\" />\n <span>Delete</span>\n </kp-button>\n </div>\n }\n `,\n styles: [`\n :host {\n box-sizing: border-box;\n display: flex;\n width: 100%;\n max-width: 100%;\n min-width: 0;\n overflow: hidden;\n align-items: center;\n flex-wrap: wrap;\n gap: 12px;\n row-gap: 8px;\n padding: 12px 16px;\n background: var(--kp-color-surface-base);\n border-bottom: 1px solid var(--kp-color-border-default);\n font-family: var(--kp-font-family-sans, 'Onest', system-ui, sans-serif);\n }\n\n .kp-tt__left {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 12px;\n row-gap: 8px;\n flex: 1 1 auto;\n min-width: 0;\n }\n\n .kp-tt__right {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 8px;\n row-gap: 8px;\n flex: 0 1 auto;\n justify-content: flex-end;\n margin-inline-start: auto;\n }\n\n /* Let SearchBar shrink inside the toolbar when the viewport is narrow.\n Need !important — SearchBar's own :host { display: inline-block }\n wins on specificity otherwise. */\n :host kp-search-bar {\n display: flex !important;\n flex: 1 1 240px;\n min-width: 0;\n max-width: 320px;\n }\n :host kp-search-bar ::ng-deep .kp-search-bar__wrap {\n width: 100% !important;\n min-width: 0;\n }\n\n .kp-tt__divider {\n width: 1px;\n height: 24px;\n background: var(--kp-color-surface-strong);\n margin: 0 4px;\n }\n\n .kp-tt__selected {\n font-size: 13px;\n color: var(--kp-color-text-default);\n }\n .kp-tt__selected strong {\n color: var(--kp-color-text-strong);\n font-weight: 600;\n }\n\n /* Density toggle — compact segmented look */\n .kp-tt__density {\n display: inline-flex;\n padding: 2px;\n border: 1px solid var(--kp-color-border-default);\n border-radius: 6px;\n background: var(--kp-color-surface-subtle);\n }\n .kp-tt__density-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 24px;\n padding: 0;\n border: none;\n background: transparent;\n border-radius: 4px;\n color: var(--kp-color-text-muted);\n cursor: pointer;\n font: inherit;\n }\n .kp-tt__density-btn:hover { color: var(--kp-color-text-strong); }\n .kp-tt__density-btn--active {\n background: var(--kp-color-surface-base);\n color: var(--kp-color-text-strong);\n box-shadow: var(--kp-elevation-raised);\n }\n .kp-tt__density-btn .ti { font-size: 14px; line-height: 1; }\n\n /* Inline icons inside buttons */\n :host .ti { font-size: 14px; line-height: 1; }\n `],\n})\nexport class KpTableToolbarComponent {\n @Input() mode: KpTableToolbarMode = 'default';\n\n @Input() showSearch = true;\n @Input() searchPlaceholder = 'Search…';\n @Input() searchValue = '';\n\n @Input() showFilter = true;\n @Input() activeFilterCount = 0;\n\n @Input() showSort = false;\n @Input() showDensity = false;\n @Input() density: KpTableToolbarDensity = 'comfortable';\n\n @Input() showColumnPicker = false;\n @Input() showExport = false;\n @Input() showCreate = true;\n @Input() createLabel = 'Create new';\n\n @Input() selectedCount = 0;\n\n @Output() searchChange = new EventEmitter<string>();\n @Output() filterClick = new EventEmitter<void>();\n @Output() sortClick = new EventEmitter<void>();\n @Output() densityChange = new EventEmitter<KpTableToolbarDensity>();\n @Output() columnsClick = new EventEmitter<void>();\n @Output() exportClick = new EventEmitter<void>();\n @Output() createClick = new EventEmitter<void>();\n\n @Output() clearSelection = new EventEmitter<void>();\n @Output() bulkExport = new EventEmitter<void>();\n @Output() bulkTag = new EventEmitter<void>();\n @Output() bulkMove = new EventEmitter<void>();\n @Output() bulkDelete = new EventEmitter<void>();\n\n get hasRightActions(): boolean {\n return this.showDensity || this.showColumnPicker || this.showExport;\n }\n\n get hostClasses(): string {\n return `kp-tt kp-tt--${this.mode}`;\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kanso-protocol/table-toolbar",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.5.3",
|
|
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.
|
|
11
|
-
"@kanso-protocol/search-bar": ">=0.
|
|
8
|
+
"@kanso-protocol/core": ">=0.5.3",
|
|
9
|
+
"@kanso-protocol/button": ">=0.5.3",
|
|
10
|
+
"@kanso-protocol/badge": ">=0.5.3",
|
|
11
|
+
"@kanso-protocol/search-bar": ">=0.5.3"
|
|
12
12
|
},
|
|
13
13
|
"description": "Kanso Protocol — table-toolbar (pattern).",
|
|
14
14
|
"author": "GregNBlack",
|