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.

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 } }

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.