cats-data-grid 2.0.81 → 2.0.83

package/README.md

@@ -1,63 +1,495 @@
-# CatsDataGrid
+# Cats Data Grid
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.3.15.
+Cats Data Grid is an Angular library for showing tabular and hierarchical data.
+It provides two standalone components:
 
-## Code scaffolding
+- `CatsDataGridComponent` for normal flat tables.
+- `CommonTreeTableComponent` for tree or parent-child tables.
 
-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+The library supports sorting, filtering, pagination, row selection, column
+settings, column pinning, grouping, editable cells, skeleton loading, and custom
+cell renderers.
+
+## Requirements
+
+- Angular `>=18 <22`
+- `@angular/core`
+- `@angular/common`
+
+## Install
 
 ```bash
-ng generate component component-name
+npm install cats-data-grid
 ```
 
-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+If you are using this library from the local workspace, build it first:
 
 ```bash
-ng generate --help
+ng build cats-data-grid
 ```
 
-## Building
+## Configure Assets And Styles
 
-To build the library, run:
+Add the library assets and styles to your application's `angular.json`.
 
-```bash
-ng build cats-data-grid
+For an installed npm package:
+
+```json
+{
+  "assets": [
+    {
+      "glob": "**/*",
+      "input": "node_modules/cats-data-grid/assets"
+    }
+  ],
+  "styles": ["node_modules/cats-data-grid/styles/_index.scss"]
+}
 ```
 
-This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+## Import In Angular
 
-### Publishing the Library
+The components are standalone, so import them in the component where you use
+them.
 
-Once the project is built, you can publish your library by following these steps:
+```ts
+import { Component } from "@angular/core";
+import { CatsDataGridComponent, CommonRendererComponent } from "cats-data-grid";
 
-1. Navigate to the `dist` directory:
-   ```bash
-   cd dist/cats-data-grid
-   ```
+@Component({
+  selector: "app-users",
+  standalone: true,
+  imports: [CatsDataGridComponent],
+  templateUrl: "./users.component.html",
+})
+export class UsersComponent {
+  // Component code shown below.
+}
+```
 
-2. Run the `npm publish` command to publish your library to the npm registry:
-   ```bash
-   npm publish
-   ```
+## Basic Data Grid
 
-## Running unit tests
+### Template
 
-To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+```html
+<cats-data-grid [rowData]="rowData" [colDefs]="colDefs" [totalRecords]="totalRecords" [paginationRequired]="true" [sortingRequired]="true" [filterRequired]="true" [checkBoxSelection]="true" [checkboxSelectionType]="'multiple'" [settingsRequired]="true" [threeDotsMenuRequired]="true" [pageSizeList]="[10, 20, 50]" [pageNumber]="pageNumber" [pageSize]="pageSize" [rowId]="'id'" (onPaginationChange)="onPaginationChange($event)" (onCheckboxSelection)="onCheckboxSelection($event)" (onRowClicked)="onRowClicked($event)" (onCellClicked)="onCellClicked($event)" (onCellEdit)="onCellEdit($event)" (onColConfigChange)="onColConfigChange($event)"></cats-data-grid>
+```
 
-```bash
-ng test
+### Component
+
+```ts
+import { Component } from "@angular/core";
+import { CatsDataGridComponent, CommonRendererComponent } from "cats-data-grid";
+
+@Component({
+  selector: "app-users",
+  standalone: true,
+  imports: [CatsDataGridComponent],
+  templateUrl: "./users.component.html",
+})
+export class UsersComponent {
+  pageNumber = 0;
+  pageSize = 20;
+  totalRecords = 3;
+
+  colDefs = [
+    {
+      headerName: "ID",
+      fieldName: "id",
+      width: 100,
+      filterType: "number",
+      headerLocked: true,
+    },
+    {
+      headerName: "Name",
+      fieldName: "name",
+      width: 200,
+      filterType: "text",
+      editable: true,
+    },
+    {
+      headerName: "Status",
+      fieldName: "status",
+      width: 160,
+      filterType: "set",
+      cellRenderer: CommonRendererComponent,
+      cellRendererParams: {
+        type: "tag",
+      },
+    },
+    {
+      headerName: "Action",
+      fieldName: "action",
+      width: 90,
+      filterable: false,
+      columnAction: false,
+      isAction: true,
+      cellRenderer: CommonRendererComponent,
+      cellRendererParams: {
+        type: "action-menu",
+        actions: [
+          { label: "View", value: "view", image: "images/eye.svg" },
+          { label: "Edit", value: "edit", image: "images/edit.svg" },
+        ],
+        onAction: (event: any) => this.onAction(event),
+      },
+    },
+  ];
+
+  rowData = [
+    { id: 1, name: "Aarav", status: ["Active"] },
+    { id: 2, name: "Diya", status: ["Pending"] },
+    { id: 3, name: "Kabir", status: ["Inactive"] },
+  ];
+
+  onPaginationChange(event: { page: number; pageSize: number }): void {
+    this.pageNumber = event.page;
+    this.pageSize = event.pageSize;
+    // Call your API here when using server-side pagination.
+  }
+
+  onCheckboxSelection(selectedRows: any[]): void {
+    console.log("Selected rows", selectedRows);
+  }
+
+  onRowClicked(event: any): void {
+    console.log("Row clicked", event.row);
+  }
+
+  onCellClicked(event: any): void {
+    console.log("Cell clicked", event.row, event.col);
+  }
+
+  onCellEdit(event: any): void {
+    console.log("Cell edited", event);
+  }
+
+  onColConfigChange(activeFields: string[]): void {
+    console.log("Visible columns", activeFields);
+  }
+
+  onAction(event: any): void {
+    console.log("Action clicked", event);
+  }
+}
 ```
 
-## Running end-to-end tests
+## Column Definition
 
-For end-to-end (e2e) testing, run:
+Use `colDefs` to configure table columns.
 
-```bash
-ng e2e
+| Property             | Type                                    | Description                                                            |
+| -------------------- | --------------------------------------- | ---------------------------------------------------------------------- |
+| `headerName`         | `string`                                | Column title shown in the header.                                      |
+| `fieldName`          | `string`                                | Field to read from row data. Dot paths like `user.name` are supported. |
+| `width`              | `number`                                | Column width in pixels.                                                |
+| `minWidth`           | `number`                                | Minimum column width in pixels.                                        |
+| `maxWidth`           | `number`                                | Maximum column width in pixels.                                        |
+| `filterType`         | `'text' \| 'number' \| 'date' \| 'set'` | Type of filter to show.                                                |
+| `sortable`           | `boolean`                               | Enables or disables sorting for this column.                           |
+| `filterable`         | `boolean`                               | Enables or disables filtering for this column.                         |
+| `active`             | `boolean`                               | Shows or hides the column initially.                                   |
+| `headerLocked`       | `boolean`                               | Keeps the column visible in column settings.                           |
+| `editable`           | `boolean`                               | Allows cell editing on double click.                                   |
+| `category`           | `string`                                | Groups columns inside the column settings panel.                       |
+| `disableGrouping`    | `boolean`                               | Prevents this column from being used in grouping.                      |
+| `cellRenderer`       | `any`                                   | Angular component or function used to render the cell.                 |
+| `cellRendererParams` | `object`                                | Extra configuration passed to the renderer.                            |
+| `isAction`           | `boolean`                               | Marks the column as a sticky action column.                            |
+| `columnAction`       | `boolean`                               | Shows or hides the column menu for this column.                        |
+
+## Data Grid Inputs
+
+| Input                      | Type             | Default             | Description                                                    |
+| -------------------------- | ---------------- | ------------------- | -------------------------------------------------------------- |
+| `rowData`                  | `any[]`          | `[]`                | Rows displayed in the grid. Required.                          |
+| `colDefs`                  | `any[]`          | `[]`                | Column definitions. Required.                                  |
+| `tableOptions`             | `any`            | -                   | Extra options, such as custom row classes or no-data template. |
+| `totalRecords`             | `number`         | `0`                 | Total record count for pagination.                             |
+| `sortingRequired`          | `boolean`        | `true`              | Enables sorting.                                               |
+| `filterRequired`           | `boolean`        | `true`              | Enables filtering.                                             |
+| `paginationRequired`       | `boolean`        | `true`              | Shows pagination.                                              |
+| `checkBoxSelection`        | `boolean`        | `false`             | Shows row checkboxes.                                          |
+| `checkboxSelectionType`    | `string`         | `'multiple'`        | Use `'single'` or `'multiple'`.                                |
+| `settingsRequired`         | `boolean`        | `true`              | Enables column settings.                                       |
+| `settingsClicked`          | `boolean`        | `false`             | Opens or closes the settings panel from parent component.      |
+| `threeDotsMenuRequired`    | `boolean`        | `true`              | Shows the column action menu.                                  |
+| `groupByRequired`          | `boolean`        | `false`             | Enables grouping UI.                                           |
+| `groupByField`             | `string`         | `''`                | Applies an initial group field.                                |
+| `dynamicGroupingFiltering` | `boolean`        | `false`             | Emits grouping/filter events for server-side handling.         |
+| `appliedFilters`           | `ColumnFilter[]` | `[]`                | Pre-applied filters.                                           |
+| `pageSizeList`             | `number[]`       | `[20, 50, 75, 100]` | Page size options.                                             |
+| `pageNumber`               | `number`         | -                   | Current page number.                                           |
+| `pageSize`                 | `number`         | -                   | Current page size.                                             |
+| `resetPage`                | `boolean`        | `true`              | Resets page when total records change.                         |
+| `rowId`                    | `string`         | `null`              | Unique row id field.                                           |
+| `rowGripFieldName`         | `string`         | -                   | Field used for row drag grip.                                  |
+| `bigRows`                  | `boolean`        | `false`             | Uses larger row height.                                        |
+| `height`                   | `number`         | `400`               | Grid height in pixels.                                         |
+| `isRowsEditable`           | `boolean`        | `false`             | Enables row edit behavior.                                     |
+| `showSkeleton`             | `boolean`        | `false`             | Shows skeleton loading rows.                                   |
+| `skeletonRowsLength`       | `number`         | `8`                 | Number of skeleton rows.                                       |
+| `skeletonColsLength`       | `number`         | `8`                 | Number of skeleton columns.                                    |
+
+## Data Grid Events
+
+| Event                 | Payload                      | Description                                 |
+| --------------------- | ---------------------------- | ------------------------------------------- |
+| `onPaginationChange`  | `{ page, pageSize }`         | Emits when page or page size changes.       |
+| `onCheckboxSelection` | `any[]`                      | Emits selected rows.                        |
+| `onRowClicked`        | `{ row }`                    | Emits when a row is clicked.                |
+| `onCellClicked`       | `{ row, col }`               | Emits when a cell is clicked.               |
+| `onCellEdit`          | `{ row, col, changedValue }` | Emits after editable cell value changes.    |
+| `onColConfigChange`   | `string[]`                   | Emits visible column field names.           |
+| `appliedFiltersEvent` | `ColumnFilter[]`             | Emits applied filters.                      |
+| `activeGroupsEvent`   | `string[]`                   | Emits active group fields.                  |
+| `onScrollEmitter`     | `void`                       | Emits when the table reaches bottom scroll. |
+| `filter`              | `any`                        | Emits filtered data/filter changes.         |
+| `onHideSettings`      | `boolean`                    | Emits when settings panel is hidden.        |
+
+## Built-In Cell Renderers
+
+Import `CommonRendererComponent` and use it in `cellRenderer`.
+
+### Tag
+
+```ts
+{
+  headerName: 'Status',
+  fieldName: 'status',
+  filterType: 'set',
+  cellRenderer: CommonRendererComponent,
+  cellRendererParams: {
+    type: 'tag',
+    tagKey: 'name',
+    class: 'active',
+  },
+}
+```
+
+### Link
+
+```ts
+{
+  headerName: 'Customer',
+  fieldName: 'customer.name',
+  cellRenderer: CommonRendererComponent,
+  cellRendererParams: {
+    type: 'link',
+    onLinkClick: (event: any) => this.onCustomerClick(event),
+  },
+}
+```
+
+### Switch
+
+```ts
+{
+  headerName: 'Enabled',
+  fieldName: 'enabled',
+  cellRenderer: CommonRendererComponent,
+  cellRendererParams: {
+    type: 'switch',
+    onToggle: (event: any) => this.onStatusToggle(event),
+  },
+}
+```
+
+### Action Menu
+
+```ts
+{
+  headerName: 'Action',
+  fieldName: 'action',
+  filterable: false,
+  columnAction: false,
+  isAction: true,
+  cellRenderer: CommonRendererComponent,
+  cellRendererParams: {
+    type: 'action-menu',
+    actions: [
+      { label: 'View', value: 'view', image: 'images/eye.svg' },
+      { label: 'Delete', value: 'delete', image: 'images/trash.svg' },
+    ],
+    onAction: (event: any) => this.onAction(event),
+  },
+}
+```
+
+## Tree Table
+
+Use `cats-tree-table` when your data has children or nested rows.
+
+### Import
+
+```ts
+import { Component } from "@angular/core";
+import { CatsTreeExpandEvent, CatsTreeSelectionChangeEvent, CatsTreeTableColumn, CommonTreeTableComponent } from "cats-data-grid";
+
+@Component({
+  selector: "app-tree-demo",
+  standalone: true,
+  imports: [CommonTreeTableComponent],
+  templateUrl: "./tree-demo.component.html",
+})
+export class TreeDemoComponent {
+  // Component code shown below.
+}
+```
+
+### Template
+
+```html
+<cats-tree-table [data]="treeData" [columns]="columns" childrenField="children" labelField="name" [showCheckbox]="true" [sortingRequired]="true" [filterRequired]="true" [paginationRequired]="true" [totalRecords]="treeData.length" [pageSizeList]="[10, 20, 50]" [expandAllNodes]="false" [isExpandable]="isExpandable" [rowOptionsResolver]="rowOptionsResolver" [nodeIconResolver]="nodeIconResolver" [linkResolver]="linkResolver" (nodeToggle)="onNodeToggle($event)" (selectionChange)="onSelectionChange($event)" (linkClick)="onLinkClick($event)" (linkDoubleClick)="onLinkDoubleClick($event)"></cats-tree-table>
+```
+
+### Component
+
+```ts
+columns: CatsTreeTableColumn[] = [
+  { fieldName: 'name', header: 'Name', width: 260, filterType: 'text' },
+  { fieldName: 'type', header: 'Type', width: 140, filterType: 'set' },
+  { fieldName: 'owner', header: 'Owner', width: 180, filterType: 'text' },
+];
+
+treeData = [
+  {
+    id: 1,
+    name: 'Network',
+    type: 'group',
+    owner: 'Admin',
+    children: [
+      { id: 11, name: 'Router Template', type: 'template', owner: 'NOC' },
+      { id: 12, name: 'Switch Template', type: 'template', owner: 'NOC' },
+    ],
+  },
+];
+
+isExpandable = (node: any): boolean => {
+  return Array.isArray(node.children) && node.children.length > 0;
+};
+
+rowOptionsResolver = (node: any) => {
+  if (node.type === 'template') {
+    return { showCheckbox: false, showLink: true, showNodeIcon: true };
+  }
+
+  return { showCheckbox: true, showNodeIcon: true };
+};
+
+nodeIconResolver = (node: any, level: number, path: any[], expanded: boolean) => {
+  if (node.type === 'group') {
+    return expanded ? 'folder-minus.svg' : 'folder-plus.svg';
+  }
+
+  return 'file-text.svg';
+};
+
+linkResolver = (node: any): string | null => {
+  return node.type === 'template' ? `/templates/${node.id}` : null;
+};
+
+onNodeToggle(event: CatsTreeExpandEvent<any>): void {
+  console.log('Node toggled', event);
+}
+
+onSelectionChange(event: CatsTreeSelectionChangeEvent<any>): void {
+  console.log('Selection changed', event.selectedNodes);
+}
+
+onLinkClick(event: any): void {
+  console.log('Link clicked', event);
+}
+
+onLinkDoubleClick(event: any): void {
+  console.log('Link double clicked', event);
+}
 ```
 
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+## Tree Table Inputs
+
+| Input                      | Type                    | Default                                   | Description                                                        |
+| -------------------------- | ----------------------- | ----------------------------------------- | ------------------------------------------------------------------ |
+| `data`                     | `any[]`                 | `[]`                                      | Root nodes for the tree.                                           |
+| `columns`                  | `CatsTreeTableColumn[]` | `[{ fieldName: 'name', header: 'Name' }]` | Tree table columns.                                                |
+| `idField`                  | `string`                | `'id'`                                    | Unique id field.                                                   |
+| `labelField`               | `string`                | `'name'`                                  | Field displayed as the tree label.                                 |
+| `childrenField`            | `string`                | `'array'`                                 | Field containing child nodes.                                      |
+| `treeColumnField`          | `string`                | -                                         | Column used as the tree column.                                    |
+| `indentPx`                 | `number`                | `24`                                      | Indentation per tree level.                                        |
+| `showHeader`               | `boolean`               | `true`                                    | Shows the header row.                                              |
+| `showCheckbox`             | `boolean`               | `false`                                   | Shows node checkboxes.                                             |
+| `showNodeIcon`             | `boolean`               | `true`                                    | Shows node icons.                                                  |
+| `expandAllNodes`           | `boolean`               | `false`                                   | Expands all nodes.                                                 |
+| `expandAllControlRequired` | `boolean`               | `true`                                    | Shows expand-all control.                                          |
+| `isExpandable`             | `function`              | checks children                           | Controls whether a node can expand.                                |
+| `rowOptionsResolver`       | `function`              | `{}`                                      | Controls checkbox, toggle, icon, link, and disabled state per row. |
+| `nodeIconResolver`         | `function`              | `null`                                    | Returns an icon path or file name for each node.                   |
+| `linkResolver`             | `function`              | `null`                                    | Returns the URL used for link rows.                                |
+| `iconBasePath`             | `string`                | `'images'`                                | Base folder for icon file names.                                   |
+| `sortingRequired`          | `boolean`               | `true`                                    | Enables sorting.                                                   |
+| `filterRequired`           | `boolean`               | `false`                                   | Enables filtering.                                                 |
+| `paginationRequired`       | `boolean`               | `true`                                    | Shows pagination.                                                  |
+| `settingsRequired`         | `boolean`               | `true`                                    | Enables column settings.                                           |
+| `threeDotsMenuRequired`    | `boolean`               | `true`                                    | Shows column action menu.                                          |
+| `pageSizeList`             | `number[]`              | `[20, 50, 75, 100]`                       | Page size options.                                                 |
+| `totalRecords`             | `number`                | `0`                                       | Total records for pagination.                                      |
+| `showSkeleton`             | `boolean`               | `false`                                   | Shows loading skeleton.                                            |
+
+## Tree Table Events
+
+| Event                | Payload                                         | Description                             |
+| -------------------- | ----------------------------------------------- | --------------------------------------- |
+| `nodeToggle`         | `{ node, level, path, expanded }`               | Emits when a node expands or collapses. |
+| `selectionChange`    | `{ node, level, path, checked, selectedNodes }` | Emits when tree selection changes.      |
+| `linkClick`          | `{ node, level, path, url, col }`               | Emits on link click.                    |
+| `linkDoubleClick`    | `{ node, level, path, url, col }`               | Emits on link double click.             |
+| `onPaginationChange` | `{ page, pageSize }`                            | Emits when page changes.                |
+| `onColConfigChange`  | `string[]`                                      | Emits visible column field names.       |
+| `onHideSettings`     | `boolean`                                       | Emits when settings panel is hidden.    |
+
+## Custom No Data Template
+
+Pass a template from the parent component through `tableOptions`.
+
+```html
+<cats-data-grid [rowData]="[]" [colDefs]="colDefs" [tableOptions]="tableOptions"></cats-data-grid>
+
+<ng-template #noDataTemplate>
+  <div class="no-data">No records found</div>
+</ng-template>
+```
+
+```ts
+import { AfterViewInit, ViewChild } from "@angular/core";
+
+export class UsersComponent implements AfterViewInit {
+  @ViewChild("noDataTemplate") noDataTemplate!: any;
+
+  tableOptions: any = {};
+
+  ngAfterViewInit(): void {
+    this.tableOptions.noDataTemplate = this.noDataTemplate;
+  }
+}
+```
+
+## Common Usage Tips
+
+- Use `rowId` for stable row selection and row drag behavior.
+- Use dot notation in `fieldName` for nested object values.
+- Use `filterType: 'set'` for columns with repeated predefined values.
+- Use `dynamicGroupingFiltering` when grouping/filtering should be handled by an API.
+- Use `showSkeleton` while data is loading.
+- Use `active: false` to hide a column initially.
+- Use `headerLocked: true` for columns that must always remain visible.
+
+## Build And Test
+
+```bash
+ng build cats-data-grid
+ng test cats-data-grid
+```
 
-## Additional Resources
+## License
 
-For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+MIT

package/assets/images/add-more-right-blue.svg

@@ -1,3 +1,3 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6 12L10 8L6 4" stroke="#2680EA" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 12L10 8L6 4" stroke="#2680EA" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/assets/images/autosize-all.svg

@@ -1,3 +1,3 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14 6.66675H8.66667M14 4.00008H8.66667M14 9.33341H8.66667M14 12.0001H8.66667M4 13.3334L4 2.66675M4 13.3334L2 11.3334M4 13.3334L6 11.3334M4 2.66675L2 4.66675M4 2.66675L6 4.66675" stroke="#040D17" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 6.66675H8.66667M14 4.00008H8.66667M14 9.33341H8.66667M14 12.0001H8.66667M4 13.3334L4 2.66675M4 13.3334L2 11.3334M4 13.3334L6 11.3334M4 2.66675L2 4.66675M4 2.66675L6 4.66675" stroke="#040D17" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/assets/images/autosize-this.svg

@@ -1,3 +1,3 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 12L8 4M8 12L6 10.6667M8 12L10 10.6667M8 4L6 5.33333M8 4L10 5.33333M14 2H2M14 14H2" stroke="#040D17" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 12L8 4M8 12L6 10.6667M8 12L10 10.6667M8 4L6 5.33333M8 4L10 5.33333M14 2H2M14 14H2" stroke="#040D17" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/assets/images/check-white.svg

@@ -1,3 +1,3 @@
-<svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.625 0.625L2.5 4.75L0.625 2.875" stroke="#EAF3FD" stroke-width="1.24995" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.625 0.625L2.5 4.75L0.625 2.875" stroke="#EAF3FD" stroke-width="1.24995" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/assets/images/eye-custom-header.svg

@@ -1,4 +1,4 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.666016 8.00008C0.666016 8.00008 3.33268 2.66675 7.99935 2.66675C12.666 2.66675 15.3327 8.00008 15.3327 8.00008C15.3327 8.00008 12.666 13.3334 7.99935 13.3334C3.33268 13.3334 0.666016 8.00008 0.666016 8.00008Z" stroke="#040D17" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z" stroke="#040D17" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.666016 8.00008C0.666016 8.00008 3.33268 2.66675 7.99935 2.66675C12.666 2.66675 15.3327 8.00008 15.3327 8.00008C15.3327 8.00008 12.666 13.3334 7.99935 13.3334C3.33268 13.3334 0.666016 8.00008 0.666016 8.00008Z" stroke="#040D17" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z" stroke="#040D17" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/assets/images/eye-off-custom-header.svg

@@ -1,3 +1,3 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.16196 3.39488C7.4329 3.35482 7.7124 3.33333 8.00028 3.33333C11.4036 3.33333 13.6369 6.33656 14.3871 7.52455C14.4779 7.66833 14.5233 7.74023 14.5488 7.85112C14.5678 7.93439 14.5678 8.06578 14.5487 8.14905C14.5233 8.25993 14.4776 8.3323 14.3861 8.47705C14.1862 8.79343 13.8814 9.23807 13.4777 9.7203M4.48288 4.47669C3.0415 5.45447 2.06297 6.81292 1.61407 7.52352C1.52286 7.66791 1.47725 7.74011 1.45183 7.85099C1.43273 7.93426 1.43272 8.06563 1.45181 8.14891C1.47722 8.25979 1.52262 8.33168 1.61342 8.47545C2.36369 9.66344 4.59694 12.6667 8.00028 12.6667C9.37255 12.6667 10.5546 12.1784 11.5259 11.5177M2.00028 2L14.0003 14M6.58606 6.58579C6.22413 6.94772 6.00028 7.44772 6.00028 8C6.00028 9.10457 6.89571 10 8.00028 10C8.55256 10 9.05256 9.77614 9.41449 9.41421" stroke="#434A51" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.16196 3.39488C7.4329 3.35482 7.7124 3.33333 8.00028 3.33333C11.4036 3.33333 13.6369 6.33656 14.3871 7.52455C14.4779 7.66833 14.5233 7.74023 14.5488 7.85112C14.5678 7.93439 14.5678 8.06578 14.5487 8.14905C14.5233 8.25993 14.4776 8.3323 14.3861 8.47705C14.1862 8.79343 13.8814 9.23807 13.4777 9.7203M4.48288 4.47669C3.0415 5.45447 2.06297 6.81292 1.61407 7.52352C1.52286 7.66791 1.47725 7.74011 1.45183 7.85099C1.43273 7.93426 1.43272 8.06563 1.45181 8.14891C1.47722 8.25979 1.52262 8.33168 1.61342 8.47545C2.36369 9.66344 4.59694 12.6667 8.00028 12.6667C9.37255 12.6667 10.5546 12.1784 11.5259 11.5177M2.00028 2L14.0003 14M6.58606 6.58579C6.22413 6.94772 6.00028 7.44772 6.00028 8C6.00028 9.10457 6.89571 10 8.00028 10C8.55256 10 9.05256 9.77614 9.41449 9.41421" stroke="#434A51" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/assets/images/gripper.svg

@@ -1,8 +1,8 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.99984 5.16671C8.99984 4.79852 8.70136 4.50004 8.33317 4.50004C7.96498 4.50004 7.6665 4.79852 7.6665 5.16671C7.6665 5.5349 7.96498 5.83337 8.33317 5.83337C8.70136 5.83337 8.99984 5.5349 8.99984 5.16671Z" fill="#434A51" stroke="#434A51" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M4.33333 5.16671C4.33333 4.79852 4.03486 4.50004 3.66667 4.50004C3.29848 4.50004 3 4.79852 3 5.16671C3 5.5349 3.29848 5.83337 3.66667 5.83337C4.03486 5.83337 4.33333 5.5349 4.33333 5.16671Z" fill="#434A51" stroke="#434A51" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M13.6666 5.16671C13.6666 4.79852 13.3681 4.50004 12.9999 4.50004C12.6317 4.50004 12.3333 4.79852 12.3333 5.16671C12.3333 5.5349 12.6317 5.83337 12.9999 5.83337C13.3681 5.83337 13.6666 5.5349 13.6666 5.16671Z" fill="#434A51" stroke="#434A51" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M8.99984 10.8333C8.99984 10.4651 8.70136 10.1667 8.33317 10.1667C7.96498 10.1667 7.6665 10.4651 7.6665 10.8333C7.6665 11.2015 7.96498 11.5 8.33317 11.5C8.70136 11.5 8.99984 11.2015 8.99984 10.8333Z" fill="#434A51" stroke="#434A51" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M4.33333 10.8333C4.33333 10.4651 4.03486 10.1667 3.66667 10.1667C3.29848 10.1667 3 10.4651 3 10.8333C3 11.2015 3.29848 11.5 3.66667 11.5C4.03486 11.5 4.33333 11.2015 4.33333 10.8333Z" fill="#434A51" stroke="#434A51" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M13.6666 10.8333C13.6666 10.4651 13.3681 10.1667 12.9999 10.1667C12.6317 10.1667 12.3333 10.4651 12.3333 10.8333C12.3333 11.2015 12.6317 11.5 12.9999 11.5C13.3681 11.5 13.6666 11.2015 13.6666 10.8333Z" fill="#434A51" stroke="#434A51" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.99984 5.16671C8.99984 4.79852 8.70136 4.50004 8.33317 4.50004C7.96498 4.50004 7.6665 4.79852 7.6665 5.16671C7.6665 5.5349 7.96498 5.83337 8.33317 5.83337C8.70136 5.83337 8.99984 5.5349 8.99984 5.16671Z" fill="#434A51" stroke="#434A51" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.33333 5.16671C4.33333 4.79852 4.03486 4.50004 3.66667 4.50004C3.29848 4.50004 3 4.79852 3 5.16671C3 5.5349 3.29848 5.83337 3.66667 5.83337C4.03486 5.83337 4.33333 5.5349 4.33333 5.16671Z" fill="#434A51" stroke="#434A51" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.6666 5.16671C13.6666 4.79852 13.3681 4.50004 12.9999 4.50004C12.6317 4.50004 12.3333 4.79852 12.3333 5.16671C12.3333 5.5349 12.6317 5.83337 12.9999 5.83337C13.3681 5.83337 13.6666 5.5349 13.6666 5.16671Z" fill="#434A51" stroke="#434A51" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.99984 10.8333C8.99984 10.4651 8.70136 10.1667 8.33317 10.1667C7.96498 10.1667 7.6665 10.4651 7.6665 10.8333C7.6665 11.2015 7.96498 11.5 8.33317 11.5C8.70136 11.5 8.99984 11.2015 8.99984 10.8333Z" fill="#434A51" stroke="#434A51" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.33333 10.8333C4.33333 10.4651 4.03486 10.1667 3.66667 10.1667C3.29848 10.1667 3 10.4651 3 10.8333C3 11.2015 3.29848 11.5 3.66667 11.5C4.03486 11.5 4.33333 11.2015 4.33333 10.8333Z" fill="#434A51" stroke="#434A51" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.6666 10.8333C13.6666 10.4651 13.3681 10.1667 12.9999 10.1667C12.6317 10.1667 12.3333 10.4651 12.3333 10.8333C12.3333 11.2015 12.6317 11.5 12.9999 11.5C13.3681 11.5 13.6666 11.2015 13.6666 10.8333Z" fill="#434A51" stroke="#434A51" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/assets/images/minus-blue.svg

@@ -1,3 +1,3 @@
-<svg width="7" height="1" viewBox="0 0 7 1" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.5 0.5H6.5" stroke="#2680EA" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg width="7" height="1" viewBox="0 0 7 1" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.5 0.5H6.5" stroke="#2680EA" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>