NgxKuvUtils

NgxKuvUtils includes a series of modules that help the development of Angular applications. It's compatible with version 13.x.x of Angular and includes 3 usable modules.

| Module | Description | | ------ | ----------- | | kuv-button | Allows to create buttons with loading functionality. | | kuv-sidebar | Creates a sidebar with icons, expand and collapse. | | kuv-lazy-table | The main module, provides the creation of tables with filters, sorts, etc. |

Installation

npm install ngx-kuv-utils

Usage

Import the main module in your app.module:

import { NgxKuvUtilsModule } from 'ngx-kuv-utils';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    NgxKuvUtilsModule
    ...
  ],
  providers: [
    ...
  ],
  bootstrap: [
    ...
  ]
})
export class AppModule { }

kuv-button

Example

app.component.html

<kuv-button [clicked]="action" [classes]="custom-class">Button</kuv-button>

Inputs

| Input | Type | Default value | Description | | ----- | ---- | ------------- | ----------- | | clicked | Function<Promise> | null | The function to be executed when the button is pressed. It should return a Promise in order to use the loading feature of the button. | | classes | string | "" | The custom classes of the button. | | allowDoubleClick | boolean | false | Enables double click functionality, it makes the single click take 200ms of time to execute. | | doubleClicked | Function<Promise> | null | The function to be executed when the button is double clicked. It should return a Promise in order to use the loading feature of the button. |

kuv-sidebar

Example

app.component.html

<kuv-sidebar [logo]="route-to/logo.png'" [routes]="routes">

app.component.ts

routes = [
    icon: 'home',
    label: 'Home',
    route: 'home'
]

Inputs

| Input | Type | Default value | Description | | ----- | ---- | ------------- | ----------- | | logo | string | '' | Route to the logo to display in the sidebar. | | logo-sm |string | null | Route to the logo to display in the sidebar if it's collapsed. If no logo-sm is defined, then logo is used instead. | | routes | Array<{icon: string, label: string,route: string | null,children: routes | null}> | [] | Defines the routes to include in the sidebar, there can only be one level of nest, via children param. The icon is a reference to FontAwesome v5 (FontAwesome is not included in this library). |

Styles

In order to change the colors of the sidebar, you can modify the next SCSS variables:

| Variable | Description | | -------- | ----------- | | --kuv-bg-options | Defines the main background color of the sidebar. | | --kuv-cl-options | Defines the main text color of the sidebar | | --kuv-bg-children | Defines the background color of the children of an option. If none is indicated, it uses the --kuv-bg-options variable instead. | | --kuv-cl-children | Defines the text color of the children of an option. If none is indicated, it uses the --kuv-cl-options variable instead. | | --kuv-bg-hover | Defines the background color of any element when it's hovered | | --kuv-cl-hover | Defines the text color of any element when it's hovered | | --kuv-bg-active | Defines the background color of any element when it's the active route | | --kuv-cl-active | Defines the text color of any element when it's the active route. | | --kuv-bg-logo | Defines the background color of the square behind the logo. | | --kuv-cl-logo | Defines the text color of the square behind the logo (only affects img alt). | | --kuv-bg-toggle | Defines the background color of the toggle circle. | | --kuv-cl-toggle | Defines the text color of the toggle icon. |

kuv-lazy-table

Examples

Common use

app.component.html

<kuv-lazy-table [elements]="elements" [columnas]="columnas"></kuv-lazy-table>

app.component.ts

elements = [
    {
        id: 1,
        name: 'John Doe'
    }, {
        id: 2,
        name: 'Mary Doe'
    }
]

columnas = [
    {
        label: 'ID',
        attribute: 'id'
    }, {
        label: 'Name',
        attribute: 'name'
    }
]

Filters

app.component.html

<kuv-lazy-table [elements]="elements" [columnas]="columnas" [filtros]="filtros"></kuv-lazy-table>

app.component.ts

filtros = [
    {
        label: 'Name',
        column: 'name',
        type: 'like'
    }, {
        label: 'ID',
        column: 'id',
        type: 'select',
        options: [
            {id: 1, label: 1},
            {id: 2, label: 2},
        ]
    }
]

Actions

app.component.html

<kuv-lazy-table [elements]="elements" [columnas]="columnas" [acciones]="acciones"></kuv-lazy-table>

app.component.ts

acciones = [
    {
        label: 'Name',
        icon: 'eye',
        click: (element, index) => {
            console.log(element, index)
        }
    }
]

Inputs

| Input | Type | Default Value | Description | | ----- | ---- | ------------- | ----------- | | elements | Array<{}> | [] | | | columnas | Array<{}> | [] | | | filtros | Array<{}> | [] | | | acciones | Array<{}> | [] | | | usePagination | boolean | true | | | loadAtStart | boolean | true | | | accionesIzquierda | Array<{}> | [] | | | url | string | '' | | | urlPdf | string | '' | | | urlExcel | string | '' | | | headers | {} | {<br>headers: new HttpHeaders({<br>'Content-Type': 'application/json'<br>})<br>} | | | headersBlob | {} | {<br>headers: new HttpHeaders({<br>'Content-Type': 'application/json'<br>}),<br>responseType: 'blob' as 'json',<br>} | | | dataCards | Array<{}> | [] | | | useDangerNull | boolean | false | | | useIndex | boolean | true | | | page | number | 1 | | | pageSize | number | 20 | | | isRowClickable | boolean | true | | | filtrosAjustables | boolean | false | | | hasShadow | boolean | false | | | isRounded | boolean | false | | | hasHiddenActions | boolean | true | | | isResponsive | boolean | true | | | reloadEmitter | Observable | new Observable() | | | showFilters | boolean | true | |

Outputs

| Output | Description | | ------ | ----------- | | loadStart | | | loadEnd | | | errorLoading | | | rowClicked | | | indexClicked | |