UNPKG

@logo-software/accordion

Version:

An accordion allows to toggle the display of sections of content.

105 lines (104 loc) 3.34 kB
/** * @license * Copyright LOGO YAZILIM SANAYİ VE TİCARET A.Ş. All Rights Reserved. * * Save to the extent permitted by law, you may not use, copy, modify, * distribute or create derivative works of this material or any part * of it without the prior written consent of LOGO YAZILIM SANAYİ VE TİCARET A.Ş. Limited. * Any reproduction of this material must contain this notice. */ import { EventEmitter, OnInit, QueryList } from '@angular/core'; import { HttpClient, HttpRequest } from '@angular/common/http'; import { ItemComponent } from './item.component'; /** * Accordions are useful when you want to toggle between hiding and showing large amount of content. * Add the below code to your code stack and give initializer parameters. * * <sub>app.component.ts</sub> * * ```html * <logo-accordion [items]="items" [start]="0" [iconClasses]=""></logo-accordion> * ``` */ export interface AccordionItem { /** * Optional, id of the item if it comes from database, */ id?: any; /** * Class names to be added to menu item */ classes?: string; /** * Class names to be added to menu item icons */ iconClasses?: string; /** * Accordion title information that displays on list */ title?: string; /** * Accordion content information that slides in and out */ description?: string; /** * The variable that defines whether the accordion item is open or not. */ isOpen?: boolean; } /** * Accordions are useful when you want to toggle between hiding and showing large amount of content. */ export declare class AccordionComponent implements OnInit { private http?; /** * Specifies one or more CSS classes to be used by the element. When set, this class will also be used by all child elements that don't have their own class. */ classes: string; /** * Specifies one or more CSS classes to be used by the element's icons. When set, this class will also be used by all child elements icons that don't have their own class. */ iconClasses?: string; /** * Accordion items to show with native template */ items: AccordionItem[]; /** * Option to show shadow on title */ hasShadow: boolean; /** * http request will be get items from server for each title opened */ request?: HttpRequest<any>; /** * Item click event trigger. When clicked on any item this event will be called and pushes the item information to the given method. */ onItemClick: EventEmitter<AccordionItem>; elementId: any; /** * Inline accordion items, if there is */ accordionItems: QueryList<ItemComponent>; /** * Give HttpClient to the component. First import HttpClientModule to main Module of the app. For example. * ```typescript * @NgModule({ imports: [ * BrowserModule, * HttpClientModule, // Add HttpClientModule * ] * }) * export class AppModule { * } * ``` * @param http */ constructor(http?: HttpClient); private _level; get level(): any; set level(level: any); ngOnInit(): void; generateElementId(): string; itemClick(item: AccordionItem, $event?: MouseEvent): void; $onItemClick(item: AccordionItem): void; }