@progress/kendo-angular-layout
Version:
Kendo UI for Angular Layout Package - a collection of components to create professional application layoyts
194 lines (193 loc) • 7.03 kB
TypeScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { ElementRef, EventEmitter, OnDestroy, SimpleChange } from '@angular/core';
import { DrawerMode, DrawerPosition, DrawerAnimation } from './types';
import { DrawerTemplateDirective, DrawerItemTemplateDirective, DrawerHeaderTemplateDirective, DrawerFooterTemplateDirective } from './template-directives';
import { DrawerService } from './drawer.service';
import { DrawerSelectEvent } from './events/select-event';
import { AnimationBuilder } from '@angular/animations';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { DrawerListSelectEvent } from './events/drawer-list-select.event';
import { DrawerViewItem } from './models/drawer-view-item.interface';
import { DrawerItemExpandedFn } from './models/drawer-item-expand.interface';
import * as i0 from "@angular/core";
/**
* Represents the [Kendo UI Drawer component for Angular]({% slug overview_drawer %}).
* Provides a dismissible or permanently visible panel for navigation in responsive web applications.
*
* @example
* ```typescript
* @Component({
* selector: 'my-app',
* template: `
* <kendo-drawer-container>
* <kendo-drawer #drawer
* [items]="items"
* mode="overlay"
* [(expanded)]="expanded">
* </kendo-drawer>
* <kendo-drawer-content>
* <button class="k-button" (click)="drawer.toggle()">Open the Drawer</button>
* </kendo-drawer-content>
* </kendo-drawer-container>
* `
* })
* class AppComponent {
* public expanded = false;
* public items = [
* { text: 'Inbox', icon: 'inbox' },
* { text: 'Notifications', icon: 'bell' }
* ];
* }
* ```
*/
export declare class DrawerComponent implements OnDestroy {
private element;
private builder;
private localizationService;
private drawerService;
hostClasses: boolean;
get startPositionClass(): boolean;
get endPositionClass(): boolean;
get overlayTransofrmStyles(): string;
get flexStyles(): number;
/**
* Specifies the mode in which the Drawer displays.
*
* @default 'overlay'
*/
mode: DrawerMode;
/**
* Specifies the position of the Drawer
* ([see example]({% slug positioning_drawer %})).
*
* @default 'start'
*/
position: DrawerPosition;
/**
* Enables the mini (compact) view of the Drawer which displays when the component is collapsed
* ([see example]({% slug expandmodespositions_drawer %}#toc-mini-view)).
*
* @default false
*/
mini: boolean;
/**
* Specifies the state of the Drawer.
*
* @default false
*/
expanded: boolean;
/**
* Defines the width of the Drawer when it is expanded.
*
* @default 240
*/
width: number;
/**
* Defines the width of the Drawer when the mini view is enabled and the component is collapsed.
*
* @default 50
*/
miniWidth: number;
/**
* Specifies if the Drawer automatically collapses when an item or the overlay is clicked.
*
* @default true
*/
autoCollapse: boolean;
/**
* Defines the collection of items that render in the Drawer.
*
* @default []
*/
items: any[];
/**
* Defines a callback function which determines if an item should be expanded.
* This is useful for hierarchical data structures where the expansion state of an item depends on its parent or other items.
*/
set isItemExpanded(fn: DrawerItemExpandedFn);
get isItemExpanded(): DrawerItemExpandedFn;
/**
* @hidden
*/
direction: string;
/**
* Specifies the animation settings of the Drawer
* ([see example]({% slug interaction_drawer %}#toc-toggling-between-states)).
*
* @default { type: 'slide', duration: 200 }
*/
animation?: boolean | DrawerAnimation;
/**
* Fires when the Drawer is expanded and its animation is complete.
*/
expand: EventEmitter<any>;
/**
* Fires when the Drawer is collapsed and its animation is complete.
*/
collapse: EventEmitter<any>;
/**
* Fires when an item in the Drawer is selected.
* This event is preventable.
*/
select: EventEmitter<DrawerSelectEvent>;
/**
* Fires when the `expanded` property of the component is updated.
* Used to provide a two-way binding for the `expanded` property.
*/
expandedChange: EventEmitter<boolean>;
/**
* @hidden
*/
drawerTemplate: DrawerTemplateDirective;
/**
* @hidden
*/
footerTemplate: DrawerFooterTemplateDirective;
/**
* @hidden
*/
headerTemplate: DrawerHeaderTemplateDirective;
/**
* @hidden
*/
itemTemplate: DrawerItemTemplateDirective;
/**
* @hidden
*/
showLicenseWatermark: boolean;
viewItems: DrawerViewItem[];
private animationEnd;
private dynamicRTLSubscription;
private rtl;
constructor(element: ElementRef, builder: AnimationBuilder, localizationService: LocalizationService, drawerService: DrawerService);
ngOnChanges(changes: SimpleChange): void;
ngOnDestroy(): void;
/**
* @hidden
*/
get minimized(): boolean;
/**
* @hidden
*/
get drawerWidth(): number;
/**
* Toggles the visibility of the Drawer.
* If the `expanded` parameter is not provided, the Drawer will toggle between expanded and collapsed states.
*
* @param expanded Specifies if the Drawer will be expanded or collapsed.
*/
toggle(expanded?: boolean): void;
/**
* @hidden
*/
onSelect(e: DrawerListSelectEvent): void;
private onAnimationEnd;
private setExpanded;
private animate;
private createPlayer;
static ɵfac: i0.ɵɵFactoryDeclaration<DrawerComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<DrawerComponent, "kendo-drawer", ["kendoDrawer"], { "mode": { "alias": "mode"; "required": false; }; "position": { "alias": "position"; "required": false; }; "mini": { "alias": "mini"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; "width": { "alias": "width"; "required": false; }; "miniWidth": { "alias": "miniWidth"; "required": false; }; "autoCollapse": { "alias": "autoCollapse"; "required": false; }; "items": { "alias": "items"; "required": false; }; "isItemExpanded": { "alias": "isItemExpanded"; "required": false; }; "animation": { "alias": "animation"; "required": false; }; }, { "expand": "expand"; "collapse": "collapse"; "select": "select"; "expandedChange": "expandedChange"; }, ["drawerTemplate", "footerTemplate", "headerTemplate", "itemTemplate"], never, true, never>;
}