npm package: @smartbit4all/expandable-section
Description: These packages must be updated in case of a new version:
Latest version: 1.1.18

# Smart Expandable Section

## References

These packages must be updated in case of a new version:

-   There are no references yet

---

## How to use

### Installation

Go to your project, open the terminal and use the following command:

    npm i @smartbit4all/expandable-section

Then import it in the AppModule:

`app.module.ts:`

    import { SmartExpandableSectionModule } from '@smartbit4all/expandable-section';
    ...
    @NgModule({
        declarations: [...]
        imports: [
            ...
            SmartExpandableSectionModule
        ],
        ...
    })

### Usage

`example-container.component.html:`

    <smart-expandable-section
        #myExpandableSection
        [data]="exampleData"
    ></smart-expandable-section>

`example-container.component.ts:`

    export class ExampleContainerComponent {
        @ViewChild("myExpandableSection")
        expandableSection: ExpandableSectionComponent;

        exampleData: ExpandableSection<any>;

        constructor() {
            this.expandableSection.stateChange.subscribe(
                (sectionData: ExpandableSection<any>) => {
                // handle state change
            });
        }

        setExpandableSection(): void {
            this.exampleData = {
    			title: 'Title',
    			customComponent: ExampleComponent,
    			data: { ... },
    			inputName: 'inputName',
                // Menu button
                button: {
                    label: '',
                    icon: 'more_vert',
                    color: 'primary',
                    type: ExpandableSectionButtonType.MENU,
                    menuItemButtons: [
                        {
                            label: 'Add',
                            icon: 'add'
                            iconPosition: ExpandableSectionButtonIconPosition.POST,
                            color: 'primary',
                            type: ExpandableSectionButtonType.MENU_ITEM,
                            onClick: this.doSomething.bind(this),
                            args: ['arg', 'data', 123]
                        }
                    ]
                }
                // Simple button
                button: {
                    label: 'Example add button',
                    icon: 'add',
                    iconPosition: ExpandableSectionButtonIconPosition.POST,
                    color: 'primary',
                    type: ExpandableSectionButtonType.BUTTON,
                    onClick: this.doSomething.bind(this),
                    args: ['arg', 'data', 123]
                }
    		};
        }

        doSomething(args: any[]): void { ... }
    }

`example.component.ts:`

    export class CreateDocumentFormComponent {
        @Input() inputName: T;
    }

---

## Version logs

## @smartbit4all/expandable-section v1.1.5

**Type: Update**

The `ExpandableSection` got a new `stateChanged` property which helps to subscribe to state changes (opened/closed).

    export interface ExpandableSection<T> {
        ...
        stateChanged: Subject<ExpandableSectionStateChange<T>>;
    }

    export interface ExpandableSectionStateChange<T> {
        data: T;
        isExpanded: boolean;
    }

## @smartbit4all/expandable-section v1.1.4

**Type: Update**

`@smartbit4all/icon` support.

## @smartbit4all/expandable-section v1.1.3

**Type: Bugfix**

Menu button bugfixes.

## @smartbit4all/expandable-section v1.1.1

**Type: Update**

The ExpandableSectionButton got an update which helps to create a button menu.

    export enum ExpandableSectionButtonType {
        BUTTON,
        MENU,
        MENU_ITEM
    }

    export enum ExpandableSectionButtonIconPosition {
        PRE = "Pre",
        POST = "Post",
    }

    export interface ExpandableSectionButton {
        label: string;
        icon?: string;
        iconPosition?: ExpandableSectionButtonIconPosition;
        onClick: (args?: any[]) => void;
        type: ExpandableSectionButtonType;
        color: ThemePalette;
        callback?: (...args: any[]) => any;
        args?: any[];
        menuItemButtons?: ExpandableSectionButton[];
    }

## @smartbit4all/expandable-section v1.0.7

**Type: Update**

The SmartExpandableSection got a new property which emits an event on state changes.

## @smartbit4all/expandable-section v1.0.6

**Type: Update**
From now expandable can be opened or closed by isExpanded property in the model.

Changes:

    export interface ExpandableSection<T> {
        title: string;
        headerComponent?: any;
        customComponent?: any;
        button?: ExpandableSectionButton;
        data?: T;
        headerData?: any;
        headerInputName?: string;
        inputName?: string;
        isExpanded?: boolean;    <<=====
    }

## @smartbit4all/expandable-section v1.0.5

**Type: Update**

From now expandable-section header can be parameterized by headerComponent property.

How to use:

Add headerComponent, headerData and headerInputName to the model:

    export interface ExpandableSection<T> {
        title: string;
        headerComponent?: any;     <-----
        customComponent?: any;
        button?: ExpandableSectionButton;
        data?: T;
        headerData?: any;          <-----
        headerInputName?: string;  <-----
        inputName?: string;
    }

## @smartbit4all/expandable-section v1.0.1

**Type: Update**

The package has been published.

## @smartbit4all/expandable-section v0.1.2

**Type: Feature**

In this version the exapandable-section has been extended with an optional button feature.

**Modifications:**

ExpandableSection got a new ExpandableSectionButton property:

        export interface ExpandableSection {
            title: string;
            customComponent?: any;
            button?: ExpandableSectionButton;
            data?: T;
            inputName?: string;
        }

        export interface ExpandableSectionButton {
            label: string;
            icon?: string;
            onClick: (args?: any[]) => void;
        }

Html has been modified in order to render the button element by the given ExpandableSectionButton.

If the ExpandableSectionButton is not provided no button appears on the view. NO modification need in applications has the previous version of ExpendableSection.

## @smartbit4all/expandable-section v0.0.4

**Type: Feature**

The basic smart expandable section with its features.