@brickclay-org/ui 0.0.67 → 0.0.69

package/index.d.ts

@@ -621,6 +621,8 @@ interface TableColumn<T = any> {
     headerClass?: string;
     cellClass?: string;
     formatter?: (row: T) => string;
+    badges?: TableBadge[];
+    icons?: TableIcon[];
     /** show / hide both th + td */
     visible?: boolean;
 }
@@ -630,6 +632,19 @@ interface TableAction {
     tooltip: string;
     hasPermission: boolean;
 }
+interface TableBadge {
+    label: string;
+    variant: BadgeVariant;
+    color: BadgeColor;
+    size: BadgeSize;
+    dot: 'left' | 'right' | 'none';
+    customClass: string;
+}
+interface TableIcon {
+    toolTipLabel?: string | string[];
+    tooltipPosition?: 'left' | 'right' | 'top' | 'bottom';
+    url: string;
+}
 
 type SortDirection = 'asc' | 'desc';
 declare class BkGrid<T = any> {
@@ -658,6 +673,7 @@ declare class BkGrid<T = any> {
     dropList(event: CdkDragDrop<T[]>): void;
     onDragMoved(event: CdkDragMove<any>): void;
     onDragStart(event: CdkDragStart<any>): void;
+    getBadge(row: T, column: TableColumn<T>): TableBadge | undefined;
     static ɵfac: i0.ɵɵFactoryDeclaration<BkGrid<any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BkGrid<any>, "bk-grid", never, { "draggable": { "alias": "draggable"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "result": { "alias": "result"; "required": false; }; "actions": { "alias": "actions"; "required": false; }; }, { "actionClick": "actionClick"; "sortChange": "sortChange"; "dragDropChange": "dragDropChange"; }, never, never, true, never>;
 }
@@ -1991,5 +2007,39 @@ declare class BkFileCard implements OnInit {
     static ɵcmp: i0.ɵɵComponentDeclaration<BkFileCard, "bk-file-card", never, { "id": { "alias": "id"; "required": false; }; "state": { "alias": "state"; "required": false; }; "fileName": { "alias": "fileName"; "required": false; }; "fileSize": { "alias": "fileSize"; "required": false; }; "progress": { "alias": "progress"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; }, { "remove": "remove"; }, never, never, true, never>;
 }
 
-export { BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, BkAvatar, BkAvatarUploader, BkBadge, BkButton, BkButtonGroup, BkCheckbox, BkColumnFilterService, BkColumnSelect, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogRef, BkDialogService, BkDialogTitle, BkFileCard, BkFilePicker, BkGrid, BkHierarchicalSelect, BkIconButton, BkInput, BkInputChips, BkPill, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTabs, BkTextarea, BkTimePicker, BkToastr, BkToastrService, BkToggle, BkValidator, BrickclayIcons, BrickclayLib, CalendarManagerService, CalendarModule, CalendarSelection, ColumnFilterOption, getDialogBackdropAnimation, getDialogPanelAnimation };
-export type { AvatarFallback, AvatarSize, AvatarVariant, BadgeColor, BadgeSize, BadgeVariant, BkAnimationKeyframes, BkAvatarFallback, BkAvatarSize, BkDialogAnimation, BkDialogConfig, BkDialogPosition, BkInputAutoCapitalize, BkInputAutoComplete, BkInputMode, BkInputType, BkTextAreaAutoCapitalize, BkTextAreaAutoComplete, BkTextAreaInputMode, ButtonSize, ButtonVariant, CalendarRange, CountryOption, DotPosition, DotStatus, FileState, GroupItem, GroupMode, HierarchicalNode, IconButtonSize, IconButtonVariant, IconOrientation, PillColor, PillSize, PillVariant, ScheduledDateSelection, SortDirection, SpinnerSize, TabItem, TableAction, TableColumn, TimeConfiguration, ToastConfig, ToastMessage, ToastMethodOptions, ToastPosition, ToastSeverity };
+interface BkPageSize {
+    key: number;
+    value: number;
+}
+declare class BkPagination implements OnChanges {
+    pageSize?: number;
+    total?: number;
+    changePageSize: EventEmitter<number>;
+    pageChanged: EventEmitter<number>;
+    pages: number[];
+    activePage: number;
+    activePageChange: EventEmitter<number>;
+    pager: number;
+    isMenuHovered: boolean;
+    startingPage: number;
+    endingPage: number;
+    pageSizesList: BkPageSize[];
+    constructor();
+    ngOnChanges(): any;
+    getTotalPagesValue(): number;
+    private updateStartEndPages;
+    private getPageCount;
+    private getArrayOfPage;
+    paginate(): number[];
+    onClickPage(pageNumber: number): void;
+    changeSize(event: any): void;
+    get startIndex(): number;
+    get endIndex(): number;
+    get totalItems(): number;
+    getTotalPages(): number;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BkPagination, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BkPagination, "bk-pagination", never, { "pageSize": { "alias": "pageSize"; "required": false; }; "total": { "alias": "total"; "required": false; }; "activePage": { "alias": "activePage"; "required": false; }; }, { "changePageSize": "changePageSize"; "pageChanged": "pageChanged"; "activePageChange": "activePageChange"; }, never, never, true, never>;
+}
+
+export { BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, BkAvatar, BkAvatarUploader, BkBadge, BkButton, BkButtonGroup, BkCheckbox, BkColumnFilterService, BkColumnSelect, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogRef, BkDialogService, BkDialogTitle, BkFileCard, BkFilePicker, BkGrid, BkHierarchicalSelect, BkIconButton, BkInput, BkInputChips, BkPagination, BkPill, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTabs, BkTextarea, BkTimePicker, BkToastr, BkToastrService, BkToggle, BkValidator, BrickclayIcons, BrickclayLib, CalendarManagerService, CalendarModule, CalendarSelection, ColumnFilterOption, getDialogBackdropAnimation, getDialogPanelAnimation };
+export type { AvatarFallback, AvatarSize, AvatarVariant, BadgeColor, BadgeSize, BadgeVariant, BkAnimationKeyframes, BkAvatarFallback, BkAvatarSize, BkDialogAnimation, BkDialogConfig, BkDialogPosition, BkInputAutoCapitalize, BkInputAutoComplete, BkInputMode, BkInputType, BkPageSize, BkTextAreaAutoCapitalize, BkTextAreaAutoComplete, BkTextAreaInputMode, ButtonSize, ButtonVariant, CalendarRange, CountryOption, DotPosition, DotStatus, FileState, GroupItem, GroupMode, HierarchicalNode, IconButtonSize, IconButtonVariant, IconOrientation, PillColor, PillSize, PillVariant, ScheduledDateSelection, SortDirection, SpinnerSize, TabItem, TableAction, TableBadge, TableColumn, TableIcon, TimeConfiguration, ToastConfig, ToastMessage, ToastMethodOptions, ToastPosition, ToastSeverity };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brickclay-org/ui",
-  "version": "0.0.67",
+  "version": "0.0.69",
   "schematics": "./schematics/collection.json",
   "ng-add": {
     "save": "dependencies"
@@ -31,6 +31,5 @@
       "types": "./index.d.ts",
       "default": "./fesm2022/brickclay-org-ui.mjs"
     }
-  },
-  "description": "A comprehensive Angular UI component library with calendar, checkbox, radio, and toggle components"
+  }
 }

package/src/assets/icons/arrow-left-double-black.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 11.3333L8.66667 8L12 4.66667M7.33333 11.3333L4 8L7.33333 4.66667" stroke="#141414" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/arrow-left-double-gray.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 11.3333L8.66667 7.99996L12 4.66663M7.33333 11.3333L4 7.99996L7.33333 4.66663" stroke="#BBBDC5" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/arrow-right-double-black.svg

@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 17.3333L13.3333 14L10 10.6666M14.6667 17.3333L18 14L14.6667 10.6666" stroke="#141414" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/arrow-right-double-gray.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 11.3333L7.33333 8L4 4.66667M8.66667 11.3333L12 8L8.66667 4.66667" stroke="#BBBDC5" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/pagination-left-black.svg

@@ -0,0 +1,10 @@
+<svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_268_7)">
+<path d="M5 9L1 5L5 1" stroke="#15191E" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_268_7">
+<rect width="6" height="10" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/assets/icons/pagination-right-black.svg

@@ -0,0 +1,3 @@
+<svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 9L5 5L1 1" stroke="#15191E" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/styles.css

@@ -23,4 +23,5 @@
 @import './lib/column-select/components/column-select/column-select.css';
 @import './lib/file-picker/file-picker.css';
 @import './lib/file-card/file-card.css';
+@import './lib/pagination/pagination.css';
 

package/schematics/ng-add/index.js

@@ -1,60 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = default_1;
-const tasks_1 = require("@angular-devkit/schematics/tasks");
-const dependencies_1 = require("@schematics/angular/utility/dependencies");
-function default_1(options) {
-    return (tree, context) => {
-        context.logger.info('🚀 Setting up @brickclay-org/ui library...');
-        // 1. Read user's Angular version from package.json
-        const angularCore = (0, dependencies_1.getPackageJsonDependency)(tree, '@angular/core');
-        if (!angularCore) {
-            throw new Error('❌ Cannot find @angular/core in package.json. Make sure this is an Angular project.');
-        }
-        // 2. Extract major version (e.g., "^19.0.0" -> "19" or "~18.2.0" -> "18")
-        const angularVersion = angularCore.version;
-        const majorVersionMatch = angularVersion.match(/(\d+)/);
-        if (!majorVersionMatch) {
-            throw new Error(`❌ Could not determine Angular version from ${angularVersion}`);
-        }
-        const majorVersion = parseInt(majorVersionMatch[0], 10);
-        // 3. Validate Angular version is in supported range (17-21)
-        if (majorVersion < 17 || majorVersion > 21) {
-            throw new Error(`❌ @brickclay-org/ui library supports Angular versions 17-21, but found Angular ${majorVersion}.\n` +
-                `Please upgrade or downgrade your Angular version.`);
-        }
-        context.logger.info(`✅ Detected Angular version: ${majorVersion}`);
-        // 4. Check if user already has CDK installed
-        const existingCdk = (0, dependencies_1.getPackageJsonDependency)(tree, '@angular/cdk');
-        if (existingCdk) {
-            const existingCdkMajor = existingCdk.version.match(/(\d+)/)?.[0];
-            // Check if existing CDK version matches Angular version
-            if (existingCdkMajor && parseInt(existingCdkMajor) === majorVersion) {
-                context.logger.info(`✅ Using existing @angular/cdk@${existingCdk.version}`);
-            }
-            else {
-                context.logger.warn(`⚠️  Found @angular/cdk@${existingCdk.version} but you have Angular ${majorVersion}.\n` +
-                    `   Consider updating CDK to match your Angular version: npm install @angular/cdk@^${majorVersion}.0.0`);
-            }
-        }
-        else {
-            // Install matching CDK version
-            const cdkVersion = `^${majorVersion}.0.0`;
-            (0, dependencies_1.addPackageJsonDependency)(tree, {
-                type: dependencies_1.NodeDependencyType.Default,
-                name: '@angular/cdk',
-                version: cdkVersion,
-            });
-            context.logger.info(`✅ Installing @angular/cdk@${cdkVersion} to match Angular ${majorVersion}`);
-        }
-        // 5. Schedule npm install
-        context.addTask(new tasks_1.NodePackageInstallTask());
-        context.logger.info('');
-        context.logger.info('🎉 Brickclay library has been successfully configured!');
-        context.logger.info('');
-        context.logger.info('📚 Next steps:');
-        context.logger.info('  1. Import components from "@brickclay-org/ui" in your modules or standalone components');
-        context.logger.info('');
-        return tree;
-    };
-}