@progress/kendo-angular-icons
Version:
Kendo UI Angular component starter template
97 lines (96 loc) • 3.94 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { ElementRef, Input, Renderer2, HostBinding, Directive } from '@angular/core';
import { validatePackage } from '@progress/kendo-licensing';
import { packageMetadata } from '../package-metadata';
import * as i0 from "@angular/core";
const sizeClasses = {
'default': 'k-icon',
'xsmall': 'k-icon-xs',
'small': 'k-icon-sm',
'medium': 'k-icon-md',
'large': 'k-icon-lg',
'xlarge': 'k-icon-xl',
'xxlarge': 'k-icon-xxl',
'xxxlarge': 'k-icon-xxxl'
};
/**
* @hidden
*/
export class IconBaseDirective {
element;
renderer;
get horizontalFlip() {
return this.flip === 'horizontal' || this.flip === 'both';
}
get verticalFlip() {
return this.flip === 'vertical' || this.flip === 'both';
}
/**
* Flips the icon horizontally, vertically, or in both directions.
*/
flip;
/**
* Sets the `IconThemeColor` for the icon. Use this property to apply a theme color.
*/
set themeColor(themeColor) {
const element = this.element.nativeElement;
if (this._themeColor) {
this.renderer.removeClass(element, `!k-color-${this._themeColor}`);
}
this._themeColor = themeColor;
// needed to ensure the theme color will be always applied; e.g. the class .k-button-icon, specific
// for icon buttons applies "color: inherit" which overwrites the theme color
if (themeColor) {
this.renderer.addClass(element, `!k-color-${themeColor}`);
}
}
get themeColor() {
return this._themeColor;
}
/**
* Sets the `IconSize` for the icon. Use this property to change the icon size.
*/
set size(size) {
const currentClass = sizeClasses[this.size];
const newClass = sizeClasses[size];
const element = this.element.nativeElement;
this.renderer.removeClass(element, currentClass);
if (size && size !== 'default') {
this.renderer.addClass(element, newClass);
}
this._size = size;
}
get size() {
return this._size;
}
_themeColor;
_size;
constructor(element, renderer) {
this.element = element;
this.renderer = renderer;
validatePackage(packageMetadata);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconBaseDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: IconBaseDirective, selector: "[kendoIconBase]", inputs: { flip: "flip", themeColor: "themeColor", size: "size" }, host: { properties: { "class.k-flip-h": "this.horizontalFlip", "class.k-flip-v": "this.verticalFlip" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconBaseDirective, decorators: [{
type: Directive,
args: [{
selector: '[kendoIconBase]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { horizontalFlip: [{
type: HostBinding,
args: ['class.k-flip-h']
}], verticalFlip: [{
type: HostBinding,
args: ['class.k-flip-v']
}], flip: [{
type: Input
}], themeColor: [{
type: Input
}], size: [{
type: Input
}] } });