npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@smartbit4all/expandable-section

v1.1.18

Published

These packages must be updated in case of a new version:

Downloads

18

Readme

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.