@progress/kendo-angular-buttons
Version:
Buttons Package for Angular
225 lines (224 loc) • 7.7 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 an action.
*/
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) icon to be rendered inside the Chip using
* a [`KendoSVGIcon`](slug:api_icons_svgiconcomponent) component.
*/
svgIcon: SVGIcon;
/**
* Defines a CSS class — or multiple classes separated by spaces —
* which are applied to a span element.
* Allows the usage of 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 will be removable or not.
* If the property is set to `true`, the Chip renders a remove icon.
* @default false
*/
removable: boolean;
/**
* Specifies a custom remove font icon class that will be rendered when the Chip is removable.
* [see example]({% slug icons %})
*/
removeIcon: string;
/**
* Specifies a custom remove SVG icon that will be rendered 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 that will be rendered when the Chip has menu.
*/
menuIcon: string;
/**
* @hidden
*
* Specifies a custom menu SVG icon that will be rendered when the Chip has menu.
*/
menuSvgIcon: SVGIcon;
/**
* If set to `true`, the Chip will be disabled.
* @default false
*/
disabled: boolean;
/**
* The size property specifies the padding of the Chip
* ([see example]({% slug appearance_chip %}#toc-size)).
*
* The possible values are:
* * `small`
* * `medium` (default)
* * `large`
* * `none`
*/
set size(size: ChipSize);
get size(): ChipSize;
/**
* The rounded property specifies the border radius of the Chip
* ([see example](slug:appearance_chip#toc-roundness)).
*
* The possible values are:
* * `small`
* * `medium` (default)
* * `large`
* * `full`
* * `none`
*/
set rounded(rounded: ChipRounded);
get rounded(): ChipRounded;
/**
* The fillMode property specifies the background and border styles of the Chip
* ([see example](slug:appearance_chip#toc-fill-mode)).
*
* The possible values are:
* * `solid` (default)
* * `outline`
* * `none`
*/
set fillMode(fillMode: ChipFillMode);
get fillMode(): ChipFillMode;
/**
* The Chip allows you to specify predefined theme colors.
* The theme color will be applied as a background and border color while also amending the text color accordingly
* ([see example](slug:appearance_chip#toc-theme-colors)).
*
* The possible values are:
* * `base` (default)
* * `info`
* * `success`
* * `warning`
* * `error`
* * `none`
*/
set themeColor(themeColor: ChipThemeColor);
get themeColor(): ChipThemeColor;
/**
* Fires each time the user clicks the remove icon of the Chip.
*/
remove: EventEmitter<ChipRemoveEvent>;
/**
* @hidden
*
* Fires each time the user clicks the menu icon of the Chip.
*/
menuToggle: EventEmitter<ChipRemoveEvent>;
/**
* Fires each time 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>;
}