@progress/kendo-angular-navigation
Version:
Kendo UI Navigation for Angular
219 lines (218 loc) • 8.23 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 { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, Renderer2, SimpleChanges, QueryList } from '@angular/core';
import { ActionSheetHeaderTemplateDirective, ActionSheetItemClickEvent, ActionSheetItemTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetTemplateDirective, ActionSheetAnimation } from './models';
import { ActionSheetItem } from './models/actionsheet-item.interface';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { AnimationBuilder } from '@angular/animations';
import { ActionSheetAction } from './models/actionsheet-action';
import { ActionSheetActionsLayout } from './models/actionsheet-action-layout';
import { ActionSheetViewComponent } from './actionsheet-view.component';
import * as i0 from "@angular/core";
/**
* Represents the [Kendo UI ActionSheet component for Angular](slug:overview_actionsheet).
* Use this component to display a set of choices related to a user-initiated task in a modal sheet that slides up from the bottom of the screen.
*
* @example
* ```html
* <kendo-actionsheet [items]="actionItems" [expanded]="true">
* </kendo-actionsheet>
* ```
*/
export declare class ActionSheetComponent implements AfterViewInit, OnDestroy, OnChanges {
element: ElementRef;
private ngZone;
private renderer;
private localizationService;
private builder;
private cdr;
/**
* @hidden
*/
currentView: number;
/**
* @hidden
*/
get hostClass(): boolean;
/**
* @hidden
*/
direction: string;
/**
* Specifies the action buttons displayed in the ActionSheet footer.
*/
actions: ActionSheetAction[];
/**
* Configures the layout of the action buttons in the footer. By default, actions are arranged horizontally and stretched to fill the container.
*/
actionsLayout: ActionSheetActionsLayout;
/**
* Determines whether the ActionSheet closes when the overlay is clicked.
*
* @default false
*/
overlayClickClose: boolean;
/**
* Sets the title text displayed in the ActionSheet header.
*/
title: string;
/**
* Sets the subtitle text displayed below the title in the header.
*/
subtitle: string;
/**
* Provides the collection of items rendered in the ActionSheet content area.
*/
items: Array<ActionSheetItem>;
/**
* Applies CSS classes to the inner ActionSheet element. Accepts any value supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
*/
cssClass: any;
/**
* Applies inline styles to the inner ActionSheet element. Accepts any value supported by [`ngStyle`](link:site.data.urls.angular['ngstyleapi']).
*/
cssStyle: any;
/**
* Configures the opening and closing animations for the ActionSheet ([see example](slug:animations_actionsheet)).
*
* @default true
*/
animation: boolean | ActionSheetAnimation;
/**
* Controls whether the ActionSheet is expanded or collapsed.
*
* @default false
*/
expanded: boolean;
/**
* Sets the `aria-labelledby` attribute of the ActionSheet wrapper element.
* Use this option when the built-in header element is replaced through the [`ActionSheetHeaderTemplate`](slug:api_navigation_actionsheetheadertemplatedirective)
* or [`ActionSheetContentTemplate`](slug:api_navigation_actionsheetcontenttemplatedirective).
*/
titleId: string;
/**
* @hidden
*
* Determines if the ActionSheet should focus the first focusable element when opened.
*/
initialFocus: boolean;
/**
* Fires when the `expanded` property of the component is updated.
* You can use this event to provide two-way binding for the `expanded` property.
*/
expandedChange: EventEmitter<boolean>;
/**
* Fires when any of the ActionSheet action buttons is clicked.
*/
action: EventEmitter<ActionSheetAction>;
/**
* Fires when the ActionSheet is expanded and its animation is complete.
*/
expand: EventEmitter<any>;
/**
* Fires when the ActionSheet is collapsed and its animation is complete.
*/
collapse: EventEmitter<any>;
/**
* Fires when an ActionSheet item is clicked.
*/
itemClick: EventEmitter<ActionSheetItemClickEvent>;
/**
* Fires when the modal overlay is clicked.
*/
overlayClick: EventEmitter<any>;
/**
* @hidden
*/
childContainer: ElementRef;
/**
* @hidden
*/
actionSheetViews: QueryList<ActionSheetViewComponent>;
/**
* @hidden
*/
actionSheetTemplate: ActionSheetTemplateDirective;
/**
* @hidden
*/
headerTemplate: ActionSheetHeaderTemplateDirective;
/**
* @hidden
*/
contentTemplate: ActionSheetContentTemplateDirective;
/**
* @hidden
*/
itemTemplate: ActionSheetItemTemplateDirective;
/**
* @hidden
*/
footerTemplate: ActionSheetFooterTemplateDirective;
private dynamicRTLSubscription;
private rtl;
private domSubs;
private player;
private animationEnd;
constructor(element: ElementRef, ngZone: NgZone, renderer: Renderer2, localizationService: LocalizationService, builder: AnimationBuilder, cdr: ChangeDetectorRef);
ngAfterViewInit(): void;
ngOnChanges(changes: SimpleChanges): void;
ngOnDestroy(): void;
/**
* @hidden
* Navigates to the next view.
*/
nextView(): void;
/**
* @hidden
* Navigates to the previous view.
*/
prevView(): void;
/**
* Toggles the visibility of the ActionSheet.
*
* @param expanded? - Boolean. Specifies if the ActionSheet will be expanded or collapsed.
*/
toggle(expanded?: boolean): void;
/**
* @hidden
*/
get orientationClass(): string;
/**
* @hidden
*/
get alignmentClass(): string | null;
/**
* @hidden
*/
get topGroupItems(): Array<ActionSheetItem>;
/**
* @hidden
*/
get bottomGroupItems(): Array<ActionSheetItem>;
/**
* @hidden
*/
onItemClick(ev: ActionSheetItemClickEvent): void;
/**
* @hidden
*/
onOverlayClick(): void;
/**
* @hidden
*/
get shouldRenderSeparator(): boolean;
private initDomEvents;
private setCssVariables;
private onKeyDown;
private handleInitialFocus;
private keepFocusWithinComponent;
private triggerItemClick;
private setExpanded;
private onAnimationEnd;
private playAnimation;
static ɵfac: i0.ɵɵFactoryDeclaration<ActionSheetComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ActionSheetComponent, "kendo-actionsheet", ["kendoActionSheet"], { "actions": { "alias": "actions"; "required": false; }; "actionsLayout": { "alias": "actionsLayout"; "required": false; }; "overlayClickClose": { "alias": "overlayClickClose"; "required": false; }; "title": { "alias": "title"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "items": { "alias": "items"; "required": false; }; "cssClass": { "alias": "cssClass"; "required": false; }; "cssStyle": { "alias": "cssStyle"; "required": false; }; "animation": { "alias": "animation"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; "titleId": { "alias": "titleId"; "required": false; }; "initialFocus": { "alias": "initialFocus"; "required": false; }; }, { "expandedChange": "expandedChange"; "action": "action"; "expand": "expand"; "collapse": "collapse"; "itemClick": "itemClick"; "overlayClick": "overlayClick"; }, ["actionSheetTemplate", "headerTemplate", "contentTemplate", "itemTemplate", "footerTemplate", "actionSheetViews"], ["kendo-actionsheet-view"], true, never>;
}