npm package: @finlexlabs/layout
Description: Library Name: finlex-layout Package Name: @finlexlabs/layout Repo Name: fx-ng-components
Latest version: 0.0.32

# FinlexLayout (@finlexlabs/layout)

Library Name: finlex-layout
Package Name: @finlexlabs/layout
Repo Name: fx-ng-components

--------------------------------
Steps to Build & Publish Library
--------------------------------

## Package Renaming

Go to `./src/finlex-layout/package.json`
Rename package name from `finlex-layout` to `@finlexlabs/layout`


## Build

 `npm run build:layout`

It will build finlex-layout using ng-packagr.
The build artifacts will be stored in the `dist/` directory.


## Publishing

After building your library with `npm run build:layout`, go to the dist folder `cd dist/finlex-layout` and run `npm publish`.


## Breadcrumbs

Please read more about the breadcrumbs module [here](https://bitbucket.org/finlex-development-team/fx-ng-components/src/master/src/finlex-layout/src/lib/components/breadcrumbs/readme.md).

## Description

This package is used to determine the applications layout, navigation, toolbar, sidepanels etc...

Configuration
All configuration options for this package are in layout property of config object of the application:

  layout: {
    style: 'vertical-layout-1',
    width: 'fullwidth',
    navbar: {
      folded: false,
      hidden: false,
      position: 'left',
      variant: 'vertical-style-1'
    },
    toolbar: {
      customBackgroundColor: false,
      hidden: false,
      position: 'below-fixed'
    },
    footer: {
      customBackgroundColor: true,
      hidden: true,
      position: 'below-fixed'
    },
    sidepanel: {
      hidden: true,
      position: 'right'
    },
    appnavigator: {
      hidden: false
    }
  }
<a name="themes"></a>

Navigation items can also be configured here. Currently there are 3 different types of menuItem for navigation sidebar: item, group and collapsable. We are using only item and collapsable for now.

item: one entry for a menu in the sidebar with a url associated with it. collapsable: There can be sub-menu under one menuItem which can be expanded to see subMenuItems.

Example for how to use it:

const navigation = [
  {
    id: 'imported-contracts',
    title: 'Imported Contracts',
    translate: 'NAV.IMPORTED_CONTRACTS.TITLE',
    type: 'item',
    icon: 'playlist_add',
    url: '/import-contracts'
  },
  {
    id: 'contracts',
    title: 'Contracts',
    translate: 'NAV.CONTRACTS.TITLE',
    type: 'collapsable',
    icon: 'card_travel',
    url: 'contracts/current',
    children: [
      {
        id: 'current',
        title: 'Contracts',
        translate: 'NAV.CURRENT_CONTRACTS.TITLE',
        type: 'item',
        icon: 'assignment',
        url: 'contracts/current',
      },
      {
        id: 'expired',
        title: 'Expired Contracts',
        translate: 'NAV.EXPIRED_CONTRACTS.TITLE',
        type: 'item',
        icon: 'error_outline',
        url: 'contracts/expired'
      }
    ]
  }
];
For collapsable items, if parent item has the same url as the child, on clicking the parent, it will route to the child's url. The parent item will not be highlighted as active because of ".collapsible" css class.

The standard practice should always be to put the parent url, same as the first child's url.

2. Themes Pacakage (@finlexlabs/layout/themes)
This component is responsible for color styling of the application.

To use @finlexlabs/layout/themes package you need to import the main style file in styles.scss of you project:

@import "~@finlexlabs/layout/themes";
To control the used theme in application config object set the them name:

appConfig = {
  colorTheme: 'theme-finlex',
  layout: {
    ...
Available options are:

`theme-default, theme-blue-gray-dark, theme-pink-dark, theme-yellow-light, theme-finlex, theme-finlex-dark`


>NOTE: Until we have a better solution for theming, the `overridematerial-form-field.scss` is provided by @finlexlabs/layout package even though its actually only related to @finlexlabs/forms. This should change in the future.
- The reason why its like this is because currently, we are overriding some css (e.g. material-tabs css) that is not part of any component inside `finlexlabs/forms` so it cannot be supplied independantly.