ng-devui
Version:
DevUI components based on Angular
82 lines • 16.6 kB
JavaScript
import { Component, Directive, ElementRef, HostBinding, Input, NgZone, TemplateRef } from '@angular/core';
import { fromEvent, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class IconComponent {
get template() {
return this.icon instanceof TemplateRef ? this.icon : null;
}
constructor(ngZone, elementRef) {
this.ngZone = ngZone;
this.elementRef = elementRef;
this.operable = false;
this.disabled = false;
this.destroy$ = new Subject();
}
ngOnInit() {
this.ngZone.runOutsideAngular(() => {
fromEvent(this.elementRef.nativeElement, 'click', { capture: true })
.pipe(takeUntil(this.destroy$))
.subscribe(event => {
if (this.disabled) {
event.preventDefault();
event.stopImmediatePropagation();
}
});
});
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IconComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: IconComponent, selector: "d-icon", inputs: { icon: "icon", operable: "operable", disabled: "disabled", rotate: "rotate", color: "color" }, ngImport: i0, template: "<div [class.devui-icon-can-interactive]=\"operable\" class=\"devui-icon-container\" [class.disabled]=\"disabled\">\n <ng-content select=\"[iconPrefix]\"></ng-content>\n <ng-template [ngTemplateOutlet]=\"template || defaultTemplate\"> </ng-template>\n <ng-template #defaultTemplate>\n <i\n class=\"devui-icon {{ icon }}\"\n [class.devui-icon-spin]=\"rotate === 'infinite'\"\n [style.transform]=\"'rotate(' + rotate + 'deg)'\"\n [style.color]=\"color\"\n >\n </i>\n </ng-template>\n <ng-content select=\"[iconSuffix]\"></ng-content>\n</div>\n", styles: [":host{display:inline-flex}.devui-icon{font-size:var(--devui-icon-font-size, 16px);display:inline-block;vertical-align:middle;transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon-can-interactive:not(.disabled){cursor:pointer;transition:color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon-can-interactive:not(.disabled) .devui-icon{cursor:pointer}.devui-icon-can-interactive:hover:not(.disabled){color:var(--devui-icon-hover-color, var(--devui-icon-fill-hover, #191919))}.devui-icon-can-interactive:hover:not(.disabled).devui-icon-container{background-color:var(--devui-icon-hover-bg, var(--devui-list-item-hover-bg, #f2f2f3))}.devui-icon-can-interactive:hover:not(.disabled) .devui-icon{color:var(--devui-icon-hover-color, var(--devui-icon-fill-hover, #191919))}.devui-icon-can-interactive:active:not(.disabled){color:var(--devui-icon-active-color, var(--devui-icon-fill-active, #191919))}.devui-icon-can-interactive:active:not(.disabled).devui-icon-container{background-color:var(--devui-icon-active-bg, var(--devui-list-item-active-bg, #cedefd))}.devui-icon-can-interactive:active:not(.disabled) .devui-icon{color:var(--devui-icon-active-color, var(--devui-icon-fill-active, #191919))}.devui-icon-can-interactive.devui-icon-container{height:var(--devui-icon-height, 32px);padding:0 8px;margin-left:-8px;border-radius:var(--devui-icon-border-radius, var(--devui-border-radius, 2px));transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon-container{display:inline-flex;align-items:center;color:var(--devui-icon-color, var(--devui-icon-fill, #595959))}.disabled{color:var(--devui-icon-disabled-color, var(--devui-disabled-text, #c2c2c2));cursor:not-allowed}.disabled .devui-icon{color:var(--devui-icon-disabled-color, var(--devui-disabled-text, #c2c2c2))}::ng-deep .devui-icon-container [iconPrefix]{vertical-align:middle;margin-right:var(--devui-icon-space, 8px)}::ng-deep .devui-icon-container:not(.disabled) span[iconPrefix]{color:var(--devui-text, #191919)}::ng-deep .devui-icon-container:not(.disabled) span[iconSuffix]{color:var(--devui-text, #191919)}::ng-deep .devui-icon-container [iconSuffix]{vertical-align:middle;margin-left:var(--devui-icon-space, 8px)}::ng-deep .devui-icon-container span,::ng-deep .devui-icon-container svg,::ng-deep .devui-icon-container i{vertical-align:middle}::ng-deep d-icon.devui-icon-hover{cursor:pointer}::ng-deep d-icon.devui-icon-hover:hover .devui-icon-container .devui-icon{color:var(--devui-icon-fill-hover, #191919)}::ng-deep d-icon.devui-icon-link{cursor:pointer}::ng-deep d-icon.devui-icon-link a{color:var(--devui-text, #191919)}::ng-deep d-icon.devui-icon-link:hover .devui-icon-container .devui-icon{color:var(--devui-brand, #0a59f7)}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IconComponent, decorators: [{
type: Component,
args: [{ selector: 'd-icon', template: "<div [class.devui-icon-can-interactive]=\"operable\" class=\"devui-icon-container\" [class.disabled]=\"disabled\">\n <ng-content select=\"[iconPrefix]\"></ng-content>\n <ng-template [ngTemplateOutlet]=\"template || defaultTemplate\"> </ng-template>\n <ng-template #defaultTemplate>\n <i\n class=\"devui-icon {{ icon }}\"\n [class.devui-icon-spin]=\"rotate === 'infinite'\"\n [style.transform]=\"'rotate(' + rotate + 'deg)'\"\n [style.color]=\"color\"\n >\n </i>\n </ng-template>\n <ng-content select=\"[iconSuffix]\"></ng-content>\n</div>\n", styles: [":host{display:inline-flex}.devui-icon{font-size:var(--devui-icon-font-size, 16px);display:inline-block;vertical-align:middle;transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon-can-interactive:not(.disabled){cursor:pointer;transition:color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon-can-interactive:not(.disabled) .devui-icon{cursor:pointer}.devui-icon-can-interactive:hover:not(.disabled){color:var(--devui-icon-hover-color, var(--devui-icon-fill-hover, #191919))}.devui-icon-can-interactive:hover:not(.disabled).devui-icon-container{background-color:var(--devui-icon-hover-bg, var(--devui-list-item-hover-bg, #f2f2f3))}.devui-icon-can-interactive:hover:not(.disabled) .devui-icon{color:var(--devui-icon-hover-color, var(--devui-icon-fill-hover, #191919))}.devui-icon-can-interactive:active:not(.disabled){color:var(--devui-icon-active-color, var(--devui-icon-fill-active, #191919))}.devui-icon-can-interactive:active:not(.disabled).devui-icon-container{background-color:var(--devui-icon-active-bg, var(--devui-list-item-active-bg, #cedefd))}.devui-icon-can-interactive:active:not(.disabled) .devui-icon{color:var(--devui-icon-active-color, var(--devui-icon-fill-active, #191919))}.devui-icon-can-interactive.devui-icon-container{height:var(--devui-icon-height, 32px);padding:0 8px;margin-left:-8px;border-radius:var(--devui-icon-border-radius, var(--devui-border-radius, 2px));transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon-container{display:inline-flex;align-items:center;color:var(--devui-icon-color, var(--devui-icon-fill, #595959))}.disabled{color:var(--devui-icon-disabled-color, var(--devui-disabled-text, #c2c2c2));cursor:not-allowed}.disabled .devui-icon{color:var(--devui-icon-disabled-color, var(--devui-disabled-text, #c2c2c2))}::ng-deep .devui-icon-container [iconPrefix]{vertical-align:middle;margin-right:var(--devui-icon-space, 8px)}::ng-deep .devui-icon-container:not(.disabled) span[iconPrefix]{color:var(--devui-text, #191919)}::ng-deep .devui-icon-container:not(.disabled) span[iconSuffix]{color:var(--devui-text, #191919)}::ng-deep .devui-icon-container [iconSuffix]{vertical-align:middle;margin-left:var(--devui-icon-space, 8px)}::ng-deep .devui-icon-container span,::ng-deep .devui-icon-container svg,::ng-deep .devui-icon-container i{vertical-align:middle}::ng-deep d-icon.devui-icon-hover{cursor:pointer}::ng-deep d-icon.devui-icon-hover:hover .devui-icon-container .devui-icon{color:var(--devui-icon-fill-hover, #191919)}::ng-deep d-icon.devui-icon-link{cursor:pointer}::ng-deep d-icon.devui-icon-link a{color:var(--devui-text, #191919)}::ng-deep d-icon.devui-icon-link:hover .devui-icon-container .devui-icon{color:var(--devui-brand, #0a59f7)}\n"] }]
}], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ElementRef }], propDecorators: { icon: [{
type: Input
}], operable: [{
type: Input
}], disabled: [{
type: Input
}], rotate: [{
type: Input
}], color: [{
type: Input
}] } });
export class IconLinkDirective {
constructor() {
this.default = true;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IconLinkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: IconLinkDirective, selector: "d-icon-link, [dIconLink]", host: { properties: { "class.devui-icon-link": "this.default" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IconLinkDirective, decorators: [{
type: Directive,
args: [{
selector: `d-icon-link, [dIconLink]`,
}]
}], propDecorators: { default: [{
type: HostBinding,
args: ['class.devui-icon-link']
}] } });
export class IconHoverDirective {
constructor() {
this.default = true;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IconHoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: IconHoverDirective, selector: "d-icon-hover, [dIconHover]", host: { properties: { "class.devui-icon-hover": "this.default" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IconHoverDirective, decorators: [{
type: Directive,
args: [{
selector: `d-icon-hover, [dIconHover]`,
}]
}], propDecorators: { default: [{
type: HostBinding,
args: ['class.devui-icon-hover']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWNvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9kZXZ1aS9pY29uL2ljb24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vZGV2dWkvaWNvbi9pY29uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsU0FBUyxFQUFFLFVBQVUsRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBcUIsV0FBVyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzdILE9BQU8sRUFBRSxTQUFTLEVBQUUsT0FBTyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQzFDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7O0FBTTNDLE1BQU0sT0FBTyxhQUFhO0lBUXhCLElBQUksUUFBUTtRQUNWLE9BQU8sSUFBSSxDQUFDLElBQUksWUFBWSxXQUFXLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQztJQUM3RCxDQUFDO0lBRUQsWUFBb0IsTUFBYyxFQUFVLFVBQXNCO1FBQTlDLFdBQU0sR0FBTixNQUFNLENBQVE7UUFBVSxlQUFVLEdBQVYsVUFBVSxDQUFZO1FBVHpELGFBQVEsR0FBRyxLQUFLLENBQUM7UUFDakIsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUdsQixhQUFRLEdBQUcsSUFBSSxPQUFPLEVBQVEsQ0FBQztJQUsrQixDQUFDO0lBQ3ZFLFFBQVE7UUFDTixJQUFJLENBQUMsTUFBTSxDQUFDLGlCQUFpQixDQUFDLEdBQUcsRUFBRTtZQUNqQyxTQUFTLENBQWEsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLEVBQUUsT0FBTyxFQUFFLEVBQUUsT0FBTyxFQUFFLElBQUksRUFBRSxDQUFDO2lCQUM3RSxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQztpQkFDOUIsU0FBUyxDQUFDLEtBQUssQ0FBQyxFQUFFO2dCQUNqQixJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztvQkFDbEIsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO29CQUN2QixLQUFLLENBQUMsd0JBQXdCLEVBQUUsQ0FBQztnQkFDbkMsQ0FBQztZQUNILENBQUMsQ0FBQyxDQUFDO1FBQ1AsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDckIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUMzQixDQUFDOytHQTdCVSxhQUFhO21HQUFiLGFBQWEsc0pDUjFCLGdrQkFjQTs7NEZETmEsYUFBYTtrQkFMekIsU0FBUzsrQkFDRSxRQUFRO29HQU1ULElBQUk7c0JBQVosS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSzs7QUE2QlIsTUFBTSxPQUFPLGlCQUFpQjtJQUg5QjtRQUl3QyxZQUFPLEdBQUcsSUFBSSxDQUFDO0tBQ3REOytHQUZZLGlCQUFpQjttR0FBakIsaUJBQWlCOzs0RkFBakIsaUJBQWlCO2tCQUg3QixTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSwwQkFBMEI7aUJBQ3JDOzhCQUV1QyxPQUFPO3NCQUE1QyxXQUFXO3VCQUFDLHVCQUF1Qjs7QUFPdEMsTUFBTSxPQUFPLGtCQUFrQjtJQUgvQjtRQUl5QyxZQUFPLEdBQUcsSUFBSSxDQUFDO0tBQ3ZEOytHQUZZLGtCQUFrQjttR0FBbEIsa0JBQWtCOzs0RkFBbEIsa0JBQWtCO2tCQUg5QixTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSw0QkFBNEI7aUJBQ3ZDOzhCQUV3QyxPQUFPO3NCQUE3QyxXQUFXO3VCQUFDLHdCQUF3QiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRGlyZWN0aXZlLCBFbGVtZW50UmVmLCBIb3N0QmluZGluZywgSW5wdXQsIE5nWm9uZSwgT25EZXN0cm95LCBPbkluaXQsIFRlbXBsYXRlUmVmIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBmcm9tRXZlbnQsIFN1YmplY3QgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IHRha2VVbnRpbCB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2QtaWNvbicsXG4gIHRlbXBsYXRlVXJsOiAnLi9pY29uLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vaWNvbi5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBJY29uQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xuXG4gIEBJbnB1dCgpIGljb246IHN0cmluZyB8IFRlbXBsYXRlUmVmPGFueT47XG4gIEBJbnB1dCgpIG9wZXJhYmxlID0gZmFsc2U7XG4gIEBJbnB1dCgpIGRpc2FibGVkID0gZmFsc2U7XG4gIEBJbnB1dCgpIHJvdGF0ZTogbnVtYmVyIHwgJ2luZmluaXRlJztcbiAgQElucHV0KCkgY29sb3I6IHN0cmluZztcbiAgcHJpdmF0ZSBkZXN0cm95JCA9IG5ldyBTdWJqZWN0PHZvaWQ+KCk7XG4gIGdldCB0ZW1wbGF0ZSgpIHtcbiAgICByZXR1cm4gdGhpcy5pY29uIGluc3RhbmNlb2YgVGVtcGxhdGVSZWYgPyB0aGlzLmljb24gOiBudWxsO1xuICB9XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSBuZ1pvbmU6IE5nWm9uZSwgcHJpdmF0ZSBlbGVtZW50UmVmOiBFbGVtZW50UmVmKSB7IH1cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgdGhpcy5uZ1pvbmUucnVuT3V0c2lkZUFuZ3VsYXIoKCkgPT4ge1xuICAgICAgZnJvbUV2ZW50PE1vdXNlRXZlbnQ+KHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LCAnY2xpY2snLCB7IGNhcHR1cmU6IHRydWUgfSlcbiAgICAgICAgLnBpcGUodGFrZVVudGlsKHRoaXMuZGVzdHJveSQpKVxuICAgICAgICAuc3Vic2NyaWJlKGV2ZW50ID0+IHtcbiAgICAgICAgICBpZiAodGhpcy5kaXNhYmxlZCkge1xuICAgICAgICAgICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcbiAgICAgICAgICAgIGV2ZW50LnN0b3BJbW1lZGlhdGVQcm9wYWdhdGlvbigpO1xuICAgICAgICAgIH1cbiAgICAgICAgfSk7XG4gICAgfSk7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICB0aGlzLmRlc3Ryb3kkLm5leHQoKTtcbiAgICB0aGlzLmRlc3Ryb3kkLmNvbXBsZXRlKCk7XG4gIH1cbn1cblxuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiBgZC1pY29uLWxpbmssIFtkSWNvbkxpbmtdYCxcbn0pXG5leHBvcnQgY2xhc3MgSWNvbkxpbmtEaXJlY3RpdmUge1xuICBASG9zdEJpbmRpbmcoJ2NsYXNzLmRldnVpLWljb24tbGluaycpIGRlZmF1bHQgPSB0cnVlO1xufVxuXG5cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogYGQtaWNvbi1ob3ZlciwgW2RJY29uSG92ZXJdYCxcbn0pXG5leHBvcnQgY2xhc3MgSWNvbkhvdmVyRGlyZWN0aXZlIHtcbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5kZXZ1aS1pY29uLWhvdmVyJykgZGVmYXVsdCA9IHRydWU7XG59XG4iLCI8ZGl2IFtjbGFzcy5kZXZ1aS1pY29uLWNhbi1pbnRlcmFjdGl2ZV09XCJvcGVyYWJsZVwiIGNsYXNzPVwiZGV2dWktaWNvbi1jb250YWluZXJcIiBbY2xhc3MuZGlzYWJsZWRdPVwiZGlzYWJsZWRcIj5cbiAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW2ljb25QcmVmaXhdXCI+PC9uZy1jb250ZW50PlxuICA8bmctdGVtcGxhdGUgW25nVGVtcGxhdGVPdXRsZXRdPVwidGVtcGxhdGUgfHwgZGVmYXVsdFRlbXBsYXRlXCI+IDwvbmctdGVtcGxhdGU+XG4gIDxuZy10ZW1wbGF0ZSAjZGVmYXVsdFRlbXBsYXRlPlxuICAgIDxpXG4gICAgICBjbGFzcz1cImRldnVpLWljb24ge3sgaWNvbiB9fVwiXG4gICAgICBbY2xhc3MuZGV2dWktaWNvbi1zcGluXT1cInJvdGF0ZSA9PT0gJ2luZmluaXRlJ1wiXG4gICAgICBbc3R5bGUudHJhbnNmb3JtXT1cIidyb3RhdGUoJyArIHJvdGF0ZSArICdkZWcpJ1wiXG4gICAgICBbc3R5bGUuY29sb3JdPVwiY29sb3JcIlxuICAgID5cbiAgICA8L2k+XG4gIDwvbmctdGVtcGxhdGU+XG4gIDxuZy1jb250ZW50IHNlbGVjdD1cIltpY29uU3VmZml4XVwiPjwvbmctY29udGVudD5cbjwvZGl2PlxuIl19