ng-devui
Version:
DevUI components based on Angular
116 lines (110 loc) • 13.9 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, TemplateRef, Input, Directive, HostBinding, NgModule } from '@angular/core';
import { Subject, fromEvent } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
class IconGroupComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IconGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: IconGroupComponent, selector: "d-icon-group", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host ::ng-deep d-icon .devui-icon-container:not(.devui-icon-can-interactive){padding:8px;margin-left:-8px}:host ::ng-deep>*:not(:first-child){margin-left:8px}:host{display:inline-flex;align-items:center}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IconGroupComponent, decorators: [{
type: Component,
args: [{ selector: 'd-icon-group', template: "<ng-content></ng-content>\n", styles: [":host ::ng-deep d-icon .devui-icon-container:not(.devui-icon-can-interactive){padding:8px;margin-left:-8px}:host ::ng-deep>*:not(:first-child){margin-left:8px}:host{display:inline-flex;align-items:center}\n"] }]
}] });
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
}] } });
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']
}] } });
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']
}] } });
class IconModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: IconModule, declarations: [IconComponent, IconGroupComponent, IconLinkDirective, IconHoverDirective], imports: [CommonModule], exports: [IconComponent, IconGroupComponent, IconLinkDirective, IconHoverDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IconModule, imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IconModule, decorators: [{
type: NgModule,
args: [{
declarations: [IconComponent, IconGroupComponent, IconLinkDirective, IconHoverDirective],
imports: [
CommonModule
],
exports: [IconComponent, IconGroupComponent, IconLinkDirective, IconHoverDirective]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { IconComponent, IconGroupComponent, IconHoverDirective, IconLinkDirective, IconModule };
//# sourceMappingURL=ng-devui-icon.mjs.map