@kouji-ui/components 0.2.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kouji-ui/components",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Opinionated styled Angular components built on @kouji-ui/core directives. Themed at runtime via @kouji-ui/themes.",
   "license": "MIT",
   "repository": {

package/types/kouji-ui-components.d.ts

@@ -5,7 +5,7 @@ import * as _angular_core from '@angular/core';
 import { TemplateRef, ModelSignal, AfterViewInit, OnDestroy, EventEmitter, EnvironmentProviders, ElementRef, OnInit, ResourceRef, Type, InjectionToken } from '@angular/core';
 import { ControlValueAccessor, FormControl } from '@angular/forms';
 import * as _tanstack_angular_table from '@tanstack/angular-table';
-import { RowData, Row, Cell, Header, Column, Table } from '@tanstack/angular-table';
+import { RowData, Cell, Row, Header, Column, Table } from '@tanstack/angular-table';
 import { VirtualItem } from '@tanstack/virtual-core';
 
 /**
@@ -5987,8 +5987,19 @@ declare class KjTableComponent<TData extends RowData = unknown> {
     readonly kjEnableResize: _angular_core.InputSignal<boolean>;
     readonly kjEnableRowPinning: _angular_core.InputSignal<boolean>;
     readonly kjEditOnDoubleClick: _angular_core.InputSignal<boolean>;
+    /**
+     * Rows per page. `'all'` disables paging so every row renders and the
+     * body scrolls (pair with a fixed-height host). `null` keeps the default
+     * page size (25) — project `<kj-table-pagination>` to expose the controls;
+     * without it the rows beyond the page are silently cut off.
+     */
+    readonly kjPageSize: _angular_core.InputSignal<number | "all" | null>;
     /** Template for master-detail row expansion. Receives `$implicit = row`. */
     readonly kjRowExpansionTpl: _angular_core.Signal<TemplateRef<unknown> | undefined>;
+    /** Custom cell templates declared as `ng-template[kjCellTemplate]` content. */
+    private readonly cellTemplates;
+    /** Resolve the registered template for a cell's column, if any. */
+    protected cellTpl(cell: Cell<TData, unknown>): TemplateRef<unknown> | null;
     readonly cellEdit: _angular_core.OutputEmitterRef<KjCellEditEvent<TData>>;
     readonly stateChange: _angular_core.OutputEmitterRef<KjTableState>;
     readonly rowClick: _angular_core.OutputEmitterRef<KjRowClickEvent<TData>>;
@@ -6115,7 +6126,7 @@ declare class KjTableComponent<TData extends RowData = unknown> {
     /** Editor `(cancel)` from `KjCellEditorOutlet`: just close the editor. */
     protected onEditorCancel(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KjTableComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KjTableComponent<any>, "kj-table", never, { "kjResource": { "alias": "kjResource"; "required": false; "isSignal": true; }; "kjDensity": { "alias": "kjDensity"; "required": false; "isSignal": true; }; "kjVariant": { "alias": "kjVariant"; "required": false; "isSignal": true; }; "kjLoading": { "alias": "kjLoading"; "required": false; "isSignal": true; }; "kjSelection": { "alias": "kjSelection"; "required": false; "isSignal": true; }; "kjSelectionMode": { "alias": "kjSelectionMode"; "required": false; "isSignal": true; }; "kjShowSelectionColumn": { "alias": "kjShowSelectionColumn"; "required": false; "isSignal": true; }; "kjStorageKey": { "alias": "kjStorageKey"; "required": false; "isSignal": true; }; "kjStorageAdapter": { "alias": "kjStorageAdapter"; "required": false; "isSignal": true; }; "kjVirtual": { "alias": "kjVirtual"; "required": false; "isSignal": true; }; "kjEstimatedRowSize": { "alias": "kjEstimatedRowSize"; "required": false; "isSignal": true; }; "kjEnableFilters": { "alias": "kjEnableFilters"; "required": false; "isSignal": true; }; "kjEnableResize": { "alias": "kjEnableResize"; "required": false; "isSignal": true; }; "kjEnableRowPinning": { "alias": "kjEnableRowPinning"; "required": false; "isSignal": true; }; "kjEditOnDoubleClick": { "alias": "kjEditOnDoubleClick"; "required": false; "isSignal": true; }; }, { "kjSelection": "kjSelectionChange"; "cellEdit": "cellEdit"; "stateChange": "stateChange"; "rowClick": "rowClick"; "rowDoubleClick": "rowDoubleClick"; }, ["kjRowExpansionTpl"], ["kj-table-toolbar, [kjToolbar]", "[kjSidePanel]", "[kjEmpty]", "[kjError]", "[kjLoading]", "*"], true, [{ directive: typeof i1.KjTable; inputs: { "kjTable": "kjColumns"; "kjTableData": "kjData"; "kjGetRowId": "kjGetRowId"; }; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KjTableComponent<any>, "kj-table", never, { "kjResource": { "alias": "kjResource"; "required": false; "isSignal": true; }; "kjDensity": { "alias": "kjDensity"; "required": false; "isSignal": true; }; "kjVariant": { "alias": "kjVariant"; "required": false; "isSignal": true; }; "kjLoading": { "alias": "kjLoading"; "required": false; "isSignal": true; }; "kjSelection": { "alias": "kjSelection"; "required": false; "isSignal": true; }; "kjSelectionMode": { "alias": "kjSelectionMode"; "required": false; "isSignal": true; }; "kjShowSelectionColumn": { "alias": "kjShowSelectionColumn"; "required": false; "isSignal": true; }; "kjStorageKey": { "alias": "kjStorageKey"; "required": false; "isSignal": true; }; "kjStorageAdapter": { "alias": "kjStorageAdapter"; "required": false; "isSignal": true; }; "kjVirtual": { "alias": "kjVirtual"; "required": false; "isSignal": true; }; "kjEstimatedRowSize": { "alias": "kjEstimatedRowSize"; "required": false; "isSignal": true; }; "kjEnableFilters": { "alias": "kjEnableFilters"; "required": false; "isSignal": true; }; "kjEnableResize": { "alias": "kjEnableResize"; "required": false; "isSignal": true; }; "kjEnableRowPinning": { "alias": "kjEnableRowPinning"; "required": false; "isSignal": true; }; "kjEditOnDoubleClick": { "alias": "kjEditOnDoubleClick"; "required": false; "isSignal": true; }; "kjPageSize": { "alias": "kjPageSize"; "required": false; "isSignal": true; }; }, { "kjSelection": "kjSelectionChange"; "cellEdit": "cellEdit"; "stateChange": "stateChange"; "rowClick": "rowClick"; "rowDoubleClick": "rowDoubleClick"; }, ["kjRowExpansionTpl", "cellTemplates"], ["kj-table-toolbar, [kjToolbar]", "[kjSidePanel]", "[kjEmpty]", "[kjError]", "[kjLoading]", "*"], true, [{ directive: typeof i1.KjTable; inputs: { "kjTable": "kjColumns"; "kjTableData": "kjData"; "kjGetRowId": "kjGetRowId"; }; outputs: {}; }]>;
 }
 
 /** Density value emitted by the density toggle group. */
@@ -6856,6 +6867,47 @@ declare class KjFilterCellOutlet<TData = unknown> {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KjFilterCellOutlet<any>, "[kjFilterCell]", never, { "kjColumn": { "alias": "kjColumn"; "required": true; "isSignal": true; }; "kjFilter": { "alias": "kjFilter"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * Registers a custom cell template for one column of a `<kj-table>`.
+ *
+ * Declare inside the table's content with the column id, and use the template
+ * context to render arbitrary markup (badges, buttons, avatars…) instead of
+ * the default `getValue()` text:
+ *
+ * ```html
+ * <kj-table [kjData]="rows()" [kjColumns]="cols">
+ *   <ng-template kjCellTemplate="role" let-row let-value="value">
+ *     <kj-badge [bg]="roleBg(row.role)">{{ value }}</kj-badge>
+ *   </ng-template>
+ * </kj-table>
+ * ```
+ *
+ * Context: `$implicit` / `row` — the row data; `value` — `cell.getValue()`;
+ * `cell` — the TanStack cell instance.
+ *
+ * Editing, grouping, and aggregation cells keep their built-in rendering;
+ * the template applies to plain data cells only.
+ *
+ * @doc-category Library/Data display
+ * @doc
+ * @doc-name table
+ */
+declare class KjCellTemplateDirective {
+    /** Column id this template renders. */
+    readonly kjCellTemplate: _angular_core.InputSignal<string>;
+    /** @internal */
+    readonly template: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KjCellTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KjCellTemplateDirective, "ng-template[kjCellTemplate]", never, { "kjCellTemplate": { "alias": "kjCellTemplate"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/** Template context passed to `kjCellTemplate` templates. */
+interface KjCellTemplateContext<TData> {
+    $implicit: TData;
+    row: TData;
+    value: unknown;
+    cell: unknown;
+}
+
 /**
  * Styled wrapper around the headless `KjTabs` directive — root of the tabs
  * compound. Re-maps the `kjValue`/`kjOrientation`/`kjActivationMode` inputs to
@@ -8107,5 +8159,5 @@ declare class KjTreeSelectComponent {
 
 declare const KJ_COMPONENTS_VERSION = "0.0.1";
 
-export { KJ_COMPONENTS_VERSION, KJ_EDITOR_CONTRACT, KJ_FILTER_CONTEXT, KjAccordionComponent, KjAccordionContentComponent, KjAccordionItemComponent, KjAccordionTriggerComponent, KjAlertActionsComponent, KjAlertComponent, KjAlertDescriptionComponent, KjAlertDismissComponent, KjAlertIconComponent, KjAlertTitleComponent, KjAvatarComponent, KjAvatarGroupComponent, KjBadgeComponent, KjBooleanEditor, KjBreadcrumbComponent, KjBreadcrumbCurrentComponent, KjBreadcrumbEllipsisComponent, KjBreadcrumbItemComponent, KjBreadcrumbLinkComponent, KjBreadcrumbListComponent, KjBreadcrumbSeparatorComponent, KjBulkAction, KjButtonComponent, KjButtonGroupComponent, KjCalendarComponent, KjCardComponent, KjCardContentComponent, KjCardCoverComponent, KjCardFooterComponent, KjCardHeaderComponent, KjCardSubtitleComponent, KjCardTitleComponent, KjCarouselAutoplayComponent, KjCarouselComponent, KjCarouselIndicatorsComponent, KjCarouselNextComponent, KjCarouselPauseComponent, KjCarouselPreviousComponent, KjCarouselSlideComponent, KjCarouselViewportComponent, KjCascadeOptionComponent, KjCascadeSelectComponent, KjCascadeSubPanelComponent, KjCellEditorOutlet, KjChatAvatarComponent, KjChatBubbleComponent, KjChatComponent, KjChatFooterComponent, KjChatHeaderComponent, KjChatLogComponent, KjCheckboxComponent, KjColorPickerComponent, KjComboboxComponent, KjComboboxEmptyComponent, KjComboboxLoadingComponent, KjComboboxOptionComponent, KjCommandEmptyComponent, KjCommandGroupComponent, KjCommandInputComponent, KjCommandItemComponent, KjCommandPaletteComponent, KjCommandPaletteFooter, KjCommandPaletteItemTemplate, KjCommandSeparatorComponent, KjConfirmPopupActionComponent, KjConfirmPopupActionsComponent, KjConfirmPopupCancelComponent, KjConfirmPopupComponent, KjConfirmPopupContentComponent, KjConfirmPopupMessageComponent, KjConfirmPopupTriggerComponent, KjDateEditor, KjDateFilter, KjDatePickerComponent, KjDatetimePickerComponent, KjDialogComponent, KjDividerComponent, KjDrawerComponent, KjDropdownMenuComponent, KjEmptyStateActionsComponent, KjEmptyStateComponent, KjEmptyStateDescriptionComponent, KjEmptyStateIconComponent, KjEmptyStateTitleComponent, KjFieldComponent, KjFieldErrorComponent, KjFieldGroupComponent, KjFieldHelpComponent, KjFieldLabelComponent, KjFileUploadComponent, KjFilterCellOutlet, KjFormActionsComponent, KjFormComponent, KjFormSummaryComponent, KjIconGalleryExample, KjIconUsageExample, KjInputComponent, KjInputGroupAddonComponent, KjInputGroupComponent, KjInputMaskComponent, KjInputMaskCreditCardExample, KjInputMaskCustomTokensExample, KjInputMaskDateExample, KjInputMaskExample, KjInputMaskUsageExample, KjInputMaskValidationExample, KjInputOtpComponent, KjKbdComponent, KjLinkComponent, KjListComponent, KjListItemComponent, KjMenubarComponent, KjMenubarItemComponent, KjNumberEditor, KjNumberFilter, KjNumberInputComponent, KjOptionComponent, KjOverlayBadgeComponent, KjOverlayBadgeContentComponent, KjPaginationComponent, KjPaginationDefaultComponent, KjPaginationEllipsisComponent, KjPaginationFirstComponent, KjPaginationInfoComponent, KjPaginationItemComponent, KjPaginationLastComponent, KjPaginationNextComponent, KjPaginationPreviousComponent, KjPasswordInputComponent, KjPopoverComponent, KjProgressBarComponent, KjRadioComponent, KjRadioGroupComponent, KjSelectComponent, KjSelectEditor, KjSelectFilter, KjSkeletonComponent, KjSliderComponent, KjSpeedDialActionComponent, KjSpeedDialActionsComponent, KjSpeedDialComponent, KjSpeedDialTriggerComponent, KjSpinnerComponent, KjStepComponent, KjStepContentComponent, KjStepLabelComponent, KjStepperComponent, KjStepperNextComponent, KjStepperPreviousComponent, KjStepperResetComponent, KjTabComponent, KjTabListComponent, KjTabPanelComponent, KjTableComponent, KjTablePaginationComponent, KjTableSidePanelComponent, KjTableSidePanelContent, KjTableStatusBarComponent, KjTableToolbarComponent, KjTableVirtual, KjTabsComponent, KjTagComponent, KjTagListComponent, KjTagRemoveComponent, KjTextEditor, KjTextFilter, KjTextareaComponent, KjTimePickerComponent, KjToastCloseComponent, KjToastComponent, KjToastViewportComponent, KjToastWrapperComponent, KjToggleComponent, KjTooltipComponent, KjTreeSelectComponent, KjTreeSelectNodeComponent, LUCIDE_ICON_NAMES, copyToClipboard, downloadString, exportCsv, exportJson, provideLucideIcons, toTsv };
-export type { ExportOptions, KjCellEditEvent, KjChatBubbleSize, KjChatBubbleVariant, KjDateRange, KjEditorContract, KjEmptyStateLevel, KjEmptyStateLive, KjEmptyStateVariant, KjFilterContext, KjInputSize, KjInputType, KjInputVariant, KjNumberRange, KjRowClickEvent, KjSelectEditorOption, KjSelectFilterOption, KjSpeedDialPosition, KjTableDensity, KjTableExportFormat };
+export { KJ_COMPONENTS_VERSION, KJ_EDITOR_CONTRACT, KJ_FILTER_CONTEXT, KjAccordionComponent, KjAccordionContentComponent, KjAccordionItemComponent, KjAccordionTriggerComponent, KjAlertActionsComponent, KjAlertComponent, KjAlertDescriptionComponent, KjAlertDismissComponent, KjAlertIconComponent, KjAlertTitleComponent, KjAvatarComponent, KjAvatarGroupComponent, KjBadgeComponent, KjBooleanEditor, KjBreadcrumbComponent, KjBreadcrumbCurrentComponent, KjBreadcrumbEllipsisComponent, KjBreadcrumbItemComponent, KjBreadcrumbLinkComponent, KjBreadcrumbListComponent, KjBreadcrumbSeparatorComponent, KjBulkAction, KjButtonComponent, KjButtonGroupComponent, KjCalendarComponent, KjCardComponent, KjCardContentComponent, KjCardCoverComponent, KjCardFooterComponent, KjCardHeaderComponent, KjCardSubtitleComponent, KjCardTitleComponent, KjCarouselAutoplayComponent, KjCarouselComponent, KjCarouselIndicatorsComponent, KjCarouselNextComponent, KjCarouselPauseComponent, KjCarouselPreviousComponent, KjCarouselSlideComponent, KjCarouselViewportComponent, KjCascadeOptionComponent, KjCascadeSelectComponent, KjCascadeSubPanelComponent, KjCellEditorOutlet, KjCellTemplateDirective, KjChatAvatarComponent, KjChatBubbleComponent, KjChatComponent, KjChatFooterComponent, KjChatHeaderComponent, KjChatLogComponent, KjCheckboxComponent, KjColorPickerComponent, KjComboboxComponent, KjComboboxEmptyComponent, KjComboboxLoadingComponent, KjComboboxOptionComponent, KjCommandEmptyComponent, KjCommandGroupComponent, KjCommandInputComponent, KjCommandItemComponent, KjCommandPaletteComponent, KjCommandPaletteFooter, KjCommandPaletteItemTemplate, KjCommandSeparatorComponent, KjConfirmPopupActionComponent, KjConfirmPopupActionsComponent, KjConfirmPopupCancelComponent, KjConfirmPopupComponent, KjConfirmPopupContentComponent, KjConfirmPopupMessageComponent, KjConfirmPopupTriggerComponent, KjDateEditor, KjDateFilter, KjDatePickerComponent, KjDatetimePickerComponent, KjDialogComponent, KjDividerComponent, KjDrawerComponent, KjDropdownMenuComponent, KjEmptyStateActionsComponent, KjEmptyStateComponent, KjEmptyStateDescriptionComponent, KjEmptyStateIconComponent, KjEmptyStateTitleComponent, KjFieldComponent, KjFieldErrorComponent, KjFieldGroupComponent, KjFieldHelpComponent, KjFieldLabelComponent, KjFileUploadComponent, KjFilterCellOutlet, KjFormActionsComponent, KjFormComponent, KjFormSummaryComponent, KjIconGalleryExample, KjIconUsageExample, KjInputComponent, KjInputGroupAddonComponent, KjInputGroupComponent, KjInputMaskComponent, KjInputMaskCreditCardExample, KjInputMaskCustomTokensExample, KjInputMaskDateExample, KjInputMaskExample, KjInputMaskUsageExample, KjInputMaskValidationExample, KjInputOtpComponent, KjKbdComponent, KjLinkComponent, KjListComponent, KjListItemComponent, KjMenubarComponent, KjMenubarItemComponent, KjNumberEditor, KjNumberFilter, KjNumberInputComponent, KjOptionComponent, KjOverlayBadgeComponent, KjOverlayBadgeContentComponent, KjPaginationComponent, KjPaginationDefaultComponent, KjPaginationEllipsisComponent, KjPaginationFirstComponent, KjPaginationInfoComponent, KjPaginationItemComponent, KjPaginationLastComponent, KjPaginationNextComponent, KjPaginationPreviousComponent, KjPasswordInputComponent, KjPopoverComponent, KjProgressBarComponent, KjRadioComponent, KjRadioGroupComponent, KjSelectComponent, KjSelectEditor, KjSelectFilter, KjSkeletonComponent, KjSliderComponent, KjSpeedDialActionComponent, KjSpeedDialActionsComponent, KjSpeedDialComponent, KjSpeedDialTriggerComponent, KjSpinnerComponent, KjStepComponent, KjStepContentComponent, KjStepLabelComponent, KjStepperComponent, KjStepperNextComponent, KjStepperPreviousComponent, KjStepperResetComponent, KjTabComponent, KjTabListComponent, KjTabPanelComponent, KjTableComponent, KjTablePaginationComponent, KjTableSidePanelComponent, KjTableSidePanelContent, KjTableStatusBarComponent, KjTableToolbarComponent, KjTableVirtual, KjTabsComponent, KjTagComponent, KjTagListComponent, KjTagRemoveComponent, KjTextEditor, KjTextFilter, KjTextareaComponent, KjTimePickerComponent, KjToastCloseComponent, KjToastComponent, KjToastViewportComponent, KjToastWrapperComponent, KjToggleComponent, KjTooltipComponent, KjTreeSelectComponent, KjTreeSelectNodeComponent, LUCIDE_ICON_NAMES, copyToClipboard, downloadString, exportCsv, exportJson, provideLucideIcons, toTsv };
+export type { ExportOptions, KjCellEditEvent, KjCellTemplateContext, KjChatBubbleSize, KjChatBubbleVariant, KjDateRange, KjEditorContract, KjEmptyStateLevel, KjEmptyStateLive, KjEmptyStateVariant, KjFilterContext, KjInputSize, KjInputType, KjInputVariant, KjNumberRange, KjRowClickEvent, KjSelectEditorOption, KjSelectFilterOption, KjSpeedDialPosition, KjTableDensity, KjTableExportFormat };