@progress/kendo-angular-buttons
Version:
Buttons Package for Angular
211 lines (210 loc) • 7.18 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 { EventEmitter, ElementRef, Renderer2, AfterViewInit, OnInit, NgZone, OnChanges, SimpleChanges } from '@angular/core';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { ChipRemoveEvent } from './chip-remove-event-args.interface';
import { ChipContentClickEvent } from './chip-content-click-event-args.interface';
import { ChipFillMode, ChipRounded, ChipSize, ChipThemeColor } from '../common/models';
import { SVGIcon } from '@progress/kendo-svg-icons';
import { ChipAvatarSettings } from './models/avatar-settings.interface';
import * as i0 from "@angular/core";
/**
* Displays a Chip that represents an input, attribute, or action.
*
* @example
* ```html
* <kendo-chip label="Chip Label"></kendo-chip>
* ```
*/
export declare class ChipComponent implements OnInit, AfterViewInit, OnChanges {
element: ElementRef;
private renderer;
private ngZone;
private localizationService;
/**
* Sets the label text of the Chip.
*/
label: string;
/**
* Defines the name for an existing icon in a Kendo UI theme.
* The icon is rendered inside the Chip by a `span.k-icon` element.
*/
icon: string;
/**
* Defines an [`SVGIcon`](slug:api_icons_svgicon) to render inside the Chip using
* a [`KendoSVGIcon`](slug:api_icons_svgiconcomponent) component.
*/
svgIcon: SVGIcon;
/**
* Defines a CSS class, or multiple classes separated by spaces,
* applied to a `span` element. Use the `iconClass` to add custom icons.
*/
iconClass: string;
/**
* Use these settings to render an avatar within the Chip.
*/
avatarSettings: ChipAvatarSettings;
/**
* Specifies the selected state of the Chip.
* @default false
*/
selected: boolean;
/**
* Specifies if the Chip is removable.
* If set to `true`, the Chip renders a remove icon.
* @default false
*/
removable: boolean;
/**
* Specifies a custom remove font icon class to render when the Chip is removable.
* [see example]({% slug icons %})
*/
removeIcon: string;
/**
* Specifies a custom remove SVG icon to render when the Chip is removable.
*/
removeSvgIcon: SVGIcon;
/**
* @hidden
*
* Determines whether the Chip has a menu.
*/
hasMenu: boolean;
/**
* @hidden
*
* Specifies a custom menu font icon class to render when the Chip has a menu.
*/
menuIcon: string;
/**
* @hidden
*
* Specifies a custom menu SVG icon to render when the Chip has a menu.
*/
menuSvgIcon: SVGIcon;
/**
* If set to `true`, the Chip is disabled.
* @default false
*/
disabled: boolean;
/**
* Sets the padding of the Chip.
* See [Chip Appearance]({% slug appearance_chip %}#size).
*
* @default 'medium'
*/
set size(size: ChipSize);
get size(): ChipSize;
/**
* Sets the border radius of the Chip.
* See [Chip Appearance](slug:appearance_chip#roundness).
*
* @default 'medium'
*/
set rounded(rounded: ChipRounded);
get rounded(): ChipRounded;
/**
* Sets the background and border styles of the Chip.
* See [Chip Appearance](slug:appearance_chip#fill-mode).
*
* @default 'solid'
*/
set fillMode(fillMode: ChipFillMode);
get fillMode(): ChipFillMode;
/**
* Sets a predefined theme color for the Chip.
* The theme color applies as a background and border color and adjusts the text color.
* See [Chip Appearance](slug:appearance_chip#theme-colors).
*
* @default 'base'
*/
set themeColor(themeColor: ChipThemeColor);
get themeColor(): ChipThemeColor;
/**
* Fires when the user clicks the remove icon of the Chip.
*/
remove: EventEmitter<ChipRemoveEvent>;
/**
* @hidden
*
* Fires when the user clicks the menu icon of the Chip.
*/
menuToggle: EventEmitter<ChipRemoveEvent>;
/**
* Fires when the user clicks the content of the Chip.
*/
contentClick: EventEmitter<ChipContentClickEvent>;
tabIndex: number;
hostClass: boolean;
get hasIconClass(): boolean;
get disabledClass(): boolean;
get selectedClass(): boolean;
get focusedClass(): boolean;
/**
* @hidden
*/
direction: string;
/**
* @hidden
*/
defaultRemoveIcon: SVGIcon;
/**
* @hidden
*/
defaultMenuIcon: SVGIcon;
/**
* @hidden
*/
sizeIsSet: boolean;
private _size;
private _rounded;
private _fillMode;
private _themeColor;
private focused;
private subs;
constructor(element: ElementRef, renderer: Renderer2, ngZone: NgZone, localizationService: LocalizationService);
ngOnInit(): void;
ngOnDestroy(): void;
ngOnChanges(changes: SimpleChanges): void;
ngAfterViewInit(): void;
/**
* @hidden
*/
get kendoIconClass(): string;
/**
* @hidden
*/
get customIconClass(): string;
/**
* @hidden
*/
get removeIconClass(): string;
/**
* Focuses the Chip component.
*/
focus(): void;
/**
* Blurs the Chip component.
*/
blur(): void;
/**
* @hidden
*/
onRemoveClick(e: any): void;
/**
* @hidden
*/
onMenuClick(e: any): void;
private attachElementEventHandlers;
/**
* @hidden
*/
private verifyIconSettings;
private handleClasses;
private handleThemeColor;
private keyDownHandler;
static ɵfac: i0.ɵɵFactoryDeclaration<ChipComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ChipComponent, "kendo-chip", never, { "label": { "alias": "label"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "svgIcon": { "alias": "svgIcon"; "required": false; }; "iconClass": { "alias": "iconClass"; "required": false; }; "avatarSettings": { "alias": "avatarSettings"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "removeIcon": { "alias": "removeIcon"; "required": false; }; "removeSvgIcon": { "alias": "removeSvgIcon"; "required": false; }; "hasMenu": { "alias": "hasMenu"; "required": false; }; "menuIcon": { "alias": "menuIcon"; "required": false; }; "menuSvgIcon": { "alias": "menuSvgIcon"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; "themeColor": { "alias": "themeColor"; "required": false; }; }, { "remove": "remove"; "menuToggle": "menuToggle"; "contentClick": "contentClick"; }, never, ["*"], true, never>;
}