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.