ng-devui
Version:
DevUI components based on Angular
157 lines (151 loc) • 31.7 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, EventEmitter, Input, Output, ViewChild, ContentChildren, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
class AlertCarouselItemComponent {
constructor(el) {
this.el = el;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AlertCarouselItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AlertCarouselItemComponent, selector: "d-alert-carousel-item", ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{display:flex;align-items:center;width:100%}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AlertCarouselItemComponent, decorators: [{
type: Component,
args: [{ selector: 'd-alert-carousel-item', template: `<ng-content></ng-content>`, preserveWhitespaces: false, styles: [":host{display:flex;align-items:center;width:100%}\n"] }]
}], ctorParameters: () => [{ type: i0.ElementRef }] });
class AlertComponent {
set dismissTime(time) {
setTimeout(() => {
this.close();
}, time);
}
constructor(el, renderer) {
this.el = el;
this.renderer = renderer;
this.type = 'info';
this.closeable = true;
this.showIcon = true;
this.autoplay = false;
this.autoplaySpeed = 3000;
this.transitionSpeed = 500;
this.closeEvent = new EventEmitter();
this.hide = false;
this.currentIndex = 1;
this.SINGLE_LINE_HEIGHT = '24px';
this.next = () => {
if (this.currentIndex < this.carouselNum) {
this.currentIndex++;
}
else {
this.currentIndex = 1;
}
this.translatePosition(this.currentIndex - 1);
this.autoScheduleTransition();
};
this.close = () => {
this.clearScheduledTransition();
this.closeEvent.emit(this);
this.hide = true;
};
}
ngOnChanges(changes) {
const { autoplay, autoplaySpeed, transitionSpeed } = changes;
if ((autoplay || autoplaySpeed) && (!this.autoplay || !this.autoplaySpeed)) {
this.clearScheduledTransition();
}
else {
this.autoScheduleTransition();
}
if (transitionSpeed && this.transitionSpeed) {
this.renderer.setStyle(this.box.nativeElement, 'transition', `top ${this.transitionSpeed}ms ease`);
}
}
ngAfterViewInit() {
this.renderCarouselItem();
this.carouselItems.changes.subscribe(() => this.renderCarouselItem());
}
ngOnDestroy() {
this.clearScheduledTransition();
}
renderCarouselItem() {
this.carouselNum = this.carouselItems.length;
if (this.carouselNum > 1) {
if (!this.autoplayHeight) {
const itemHeights = this.carouselItems.map((item) => {
const rect = item?.el.nativeElement.getBoundingClientRect();
return rect?.height || 0;
});
const maxHeight = Math.max(...itemHeights);
this.autoplayHeight = maxHeight ? `${maxHeight}px` : this.SINGLE_LINE_HEIGHT;
}
this.el.nativeElement.style.setProperty('--devui-alert-carousel-item-height', this.autoplayHeight);
this.renderer.setStyle(this.box.nativeElement, 'transition', `top ${this.transitionSpeed}ms ease`);
this.autoScheduleTransition();
}
}
autoScheduleTransition() {
this.clearScheduledTransition();
if (this.autoplay && this.autoplaySpeed) {
this.scheduledId = setTimeout(() => this.next(), this.autoplaySpeed);
}
}
clearScheduledTransition() {
if (this.scheduledId) {
clearTimeout(this.scheduledId);
this.scheduledId = undefined;
}
}
translatePosition(size) {
this.renderer.setStyle(this.box.nativeElement, 'top', `${-size * 100}%`);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AlertComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AlertComponent, selector: "d-alert", inputs: { type: "type", cssClass: "cssClass", closeable: "closeable", showIcon: "showIcon", autoplay: "autoplay", autoplaySpeed: "autoplaySpeed", transitionSpeed: "transitionSpeed", operationTemplate: "operationTemplate", dismissTime: "dismissTime" }, outputs: { closeEvent: "closeEvent" }, queries: [{ propertyName: "carouselItems", predicate: AlertCarouselItemComponent }], viewQueries: [{ propertyName: "box", first: true, predicate: ["carouselContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"devui-alert devui-alert-{{ type }} {{ cssClass }}\" *ngIf=\"!hide\" [style.alignItems]=\"carouselNum > 1 ? 'center' : 'flex-start'\">\n <span class=\"devui-alert-icon\" *ngIf=\"showIcon !== false && type !== 'simple'\">\n <svg\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n class=\"devui-icon\"\n [ngClass]=\"type === 'danger' ? 'devui-icon-error' : 'devui-icon-' + type\"\n >\n <g *ngIf=\"type === 'success'\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path fill-rule=\"nonzero\" d=\"M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z\"></path>\n <polygon\n stroke-width=\"0.3\"\n fill-rule=\"nonzero\"\n points=\"6.82767602 11.5282799 3 7.24668779 3.89864233 6.37912367 6.82767602 9.04910002 12.2964408 4 13 4.64144383\"\n ></polygon>\n </g>\n <g *ngIf=\"type === 'warning'\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path\n class=\"devui-icon-warning-outer\"\n d=\"M8.96244623,0.57254229 L15.8714442,13.4101975 C16.1549662,13.9370117 15.9538562,14.5918482 15.4222523,14.8728158 C15.2642579,14.9563203 15.0879506,15 14.9088903,15 L1.09089441,15 C0.488410063,15 0,14.5159904 0,13.9189343 C0,13.7414873 0.0440768395,13.5667684 0.128340519,13.4101975 L7.03733844,0.57254229 C7.32086049,0.0457280838 7.98165058,-0.153569987 8.51325441,0.127397589 C8.70423071,0.228333932 8.8605922,0.383286648 8.96244623,0.57254229 Z\"\n ></path>\n <path\n class=\"devui-icon-warning-inner\"\n stroke-width=\"0.3\"\n fill-rule=\"nonzero\"\n d=\"M8.87894737,13 L7.08947368,13 L7.08947368,11.2105263 L8.87894737,11.2105263 L8.87894737,13 Z M8.62102372,9.86842105 L7.32800539,9.86842105 L7,4.5 L8.96842105,4.5 L8.62102372,9.86842105 Z\"\n ></path>\n </g>\n <g *ngIf=\"type === 'info'\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g fill-rule=\"nonzero\">\n <path\n class=\"devui-icon-info-outer\"\n d=\"M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z\"\n ></path>\n <path\n class=\"devui-icon-info-inner\"\n d=\"M9.19008504,7 L8.79402696,13 L7.15622605,13 L6.73158434,7 L9.19008504,7 Z M9,3 L9,5 L7,5 L7,3 L9,3 Z\"\n stroke-width=\"0.2\"\n ></path>\n </g>\n </g>\n <g *ngIf=\"type === 'danger'\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g fill-rule=\"nonzero\">\n <path\n class=\"devui-icon-error-outer\"\n d=\"M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z\"\n ></path>\n <path\n class=\"devui-icon-error-inner\"\n d=\"M9,10.6 L9,12.6 L7,12.6 L7,10.6 L9,10.6 Z M9.1,3.1 L8.65924344,9.1 L7.28422786,9.1 L6.9,3.1 L9.1,3.1 Z\"\n stroke-width=\"0.2\"\n ></path>\n </g>\n </g>\n </svg>\n </span>\n <div class=\"devui-alert-carousel-container\" [style.height]=\"carouselNum > 1 ? autoplayHeight : 'auto'\">\n <div\n #carouselContainer\n class=\"devui-alert-carousel-box\"\n (mouseenter)=\"clearScheduledTransition()\"\n (mouseleave)=\"autoScheduleTransition()\"\n >\n <ng-content></ng-content>\n </div>\n </div>\n <div class=\"devui-alert-operation-container\">\n <ng-container *ngIf=\"carouselNum > 1\">\n <div class=\"devui-alert-carousel-num\">\n <span>{{ currentIndex }}/{{ carouselNum }}</span>\n </div>\n <span class=\"devui-alert-carousel-button\">\n <svg\n (click)=\"next()\"\n width=\"12px\"\n devui-alert-operation-container\n height=\"12px\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path\n d=\"M2.64644661,5.14644661 C2.82001296,4.97288026 3.08943736,4.95359511 3.2843055,5.08859116 L3.35355339,5.14644661 L7.999,9.793 L12.6464466,5.14644661 C12.820013,4.97288026 13.0894374,4.95359511 13.2843055,5.08859116 L13.3535534,5.14644661 C13.5271197,5.32001296 13.5464049,5.58943736 13.4114088,5.7843055 L13.3535534,5.85355339 L8.35355339,10.8535534 C8.17998704,11.0271197 7.91056264,11.0464049 7.7156945,10.9114088 L7.64644661,10.8535534 L2.64644661,5.85355339 C2.45118446,5.65829124 2.45118446,5.34170876 2.64644661,5.14644661 Z\"\n fill-rule=\"nonzero\"\n ></path>\n </g>\n </svg>\n </span>\n </ng-container>\n <ng-template [ngTemplateOutlet]=\"operationTemplate\" [ngTemplateOutletContext]=\"{ close: close }\"> </ng-template>\n <div class=\"devui-close\" (click)=\"close()\" *ngIf=\"closeable\">\n <svg\n width=\"10px\"\n height=\"10px\"\n viewBox=\"0 0 10 10\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g transform=\"translate(-3.000000, -3.000000)\" fill-rule=\"nonzero\">\n <path\n d=\"M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891 12.7352108,3.24751057 C13.0571998,3.5572302 13.0901298,4.03723416 12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416 C13.0645482,11.9370909 13.0605893,12.3571292 12.8158402,12.6640749 L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548 11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858 3.6740594,13.0636532 3.35648225,12.8298003 L3.26478919,12.7524894 C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416 L6.8583349,7.99900183 L3.19126762,4.31965839 C2.93545181,4.06290908 2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057 C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936 L8,6.85411161 L11.6426,3.19816936 Z\"\n ></path>\n </g>\n </g>\n </svg>\n </div>\n </div>\n</div>\n", styles: [".devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}:host{display:block}:host ::ng-deep .devui-alert-carousel-container .devui-alert-carousel-box>d-alert-carousel-item{min-height:var(--devui-alert-carousel-item-height, 24px)}.devui-alert{color:var(--devui-text, #191919);font-size:var(--devui-font-size, 12px);border:1px solid transparent;padding:8px 16px;line-height:24px;border-radius:var(--devui-border-radius, 2px);word-break:normal;word-wrap:break-word;display:flex;flex-wrap:nowrap}.devui-alert.devui-alert-success{background-color:var(--devui-success-bg, #bcf2db);border-color:var(--devui-success-line, #09aa71);color:var(--devui-text, #191919)}.devui-alert.devui-alert-success .devui-close>svg path{fill:var(--devui-success-line, #09aa71)}.devui-alert.devui-alert-info{background-color:var(--devui-info-bg, #cedefd);border-color:var(--devui-info-line, #0a59f7);color:var(--devui-text, #191919)}.devui-alert.devui-alert-info .devui-close>svg path{fill:var(--devui-info-line, #0a59f7)}.devui-alert.devui-alert-warning{background-color:var(--devui-warning-bg, #fde2bd);border-color:var(--devui-warning-line, #f4840c);color:var(--devui-text, #191919)}.devui-alert.devui-alert-warning .devui-close>svg path{fill:var(--devui-warning-line, #f4840c)}.devui-alert.devui-alert-danger{background-color:var(--devui-danger-bg, #fabdc1);border-color:var(--devui-danger-line, #e02128);color:var(--devui-text, #191919)}.devui-alert.devui-alert-danger .devui-close>svg path{fill:var(--devui-danger-line, #e02128)}.devui-alert.devui-alert-simple{border-color:var(--devui-line, #dbdbdb);color:var(--devui-text, #191919)}.devui-alert.devui-alert-simple .devui-close>svg path{fill:var(--devui-text-weak, #333333)}.devui-alert .devui-alert-icon{padding-right:8px}.devui-alert svg.devui-icon{width:16px;height:16px;vertical-align:middle;transform:translateY(-1px)}.devui-alert .devui-icon.devui-icon-success>g path{fill:var(--devui-success-line, #09aa71)}.devui-alert .devui-icon.devui-icon-success>g polygon{fill:var(--devui-light-text, #ffffff);stroke:var(--devui-light-text, #ffffff)}.devui-alert .devui-icon.devui-icon-warning>g path.devui-icon-warning-outer{fill:var(--devui-warning-line, #f4840c)}.devui-alert .devui-icon.devui-icon-warning>g path.devui-icon-warning-inner{fill:var(--devui-light-text, #ffffff);stroke:var(--devui-light-text, #ffffff)}.devui-alert .devui-icon.devui-icon-info>g path.devui-icon-info-outer{fill:var(--devui-info-line, #0a59f7)}.devui-alert .devui-icon.devui-icon-info>g path.devui-icon-info-inner{fill:var(--devui-light-text, #ffffff);stroke:var(--devui-light-text, #ffffff)}.devui-alert .devui-icon.devui-icon-error>g path.devui-icon-error-outer{fill:var(--devui-danger-line, #e02128)}.devui-alert .devui-icon.devui-icon-error>g path.devui-icon-error-inner{fill:var(--devui-light-text, #ffffff);stroke:var(--devui-light-text, #ffffff)}.devui-alert .devui-alert-carousel-container{flex:1;min-height:24px;overflow:hidden}.devui-alert .devui-alert-carousel-container .devui-alert-carousel-box{position:relative;left:0;top:0}.devui-alert .devui-alert-operation-container{flex-grow:0;flex-shrink:1;display:flex;align-items:center;justify-content:flex-end;min-height:24px;width:fit-content}.devui-alert .devui-alert-operation-container:empty{display:none}.devui-alert .devui-alert-operation-container .devui-alert-carousel-num{padding-right:8px}.devui-alert .devui-alert-operation-container .devui-alert-carousel-button{margin-right:8px;display:inline-flex;align-items:center;justify-content:center;width:24px;height:16px;line-height:16px;vertical-align:middle;background-color:transparent;text-align:center;border-radius:var(--devui-border-radius, 2px);cursor:pointer}.devui-alert .devui-alert-operation-container .devui-alert-carousel-button svg path{fill:var(--devui-text, #191919)}.devui-alert .devui-alert-operation-container .devui-alert-carousel-button:hover{background-color:var(--devui-shape-icon-fill-hover, #808080)}.devui-alert .devui-alert-operation-container .devui-alert-carousel-button:hover svg path{fill:var(--devui-light-text, #ffffff)}.devui-alert .devui-close{flex-grow:0;flex-shrink:1;color:var(--devui-text, #191919);opacity:1;line-height:26px;height:24px;padding-left:8px}.devui-alert .devui-close>svg path{fill:var(--devui-light-text, #ffffff)}.devui-alert .devui-close span{color:var(--devui-text, #191919);font-size:var(--devui-font-size, 12px);font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AlertComponent, decorators: [{
type: Component,
args: [{ selector: 'd-alert', preserveWhitespaces: false, template: "<div class=\"devui-alert devui-alert-{{ type }} {{ cssClass }}\" *ngIf=\"!hide\" [style.alignItems]=\"carouselNum > 1 ? 'center' : 'flex-start'\">\n <span class=\"devui-alert-icon\" *ngIf=\"showIcon !== false && type !== 'simple'\">\n <svg\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n class=\"devui-icon\"\n [ngClass]=\"type === 'danger' ? 'devui-icon-error' : 'devui-icon-' + type\"\n >\n <g *ngIf=\"type === 'success'\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path fill-rule=\"nonzero\" d=\"M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z\"></path>\n <polygon\n stroke-width=\"0.3\"\n fill-rule=\"nonzero\"\n points=\"6.82767602 11.5282799 3 7.24668779 3.89864233 6.37912367 6.82767602 9.04910002 12.2964408 4 13 4.64144383\"\n ></polygon>\n </g>\n <g *ngIf=\"type === 'warning'\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path\n class=\"devui-icon-warning-outer\"\n d=\"M8.96244623,0.57254229 L15.8714442,13.4101975 C16.1549662,13.9370117 15.9538562,14.5918482 15.4222523,14.8728158 C15.2642579,14.9563203 15.0879506,15 14.9088903,15 L1.09089441,15 C0.488410063,15 0,14.5159904 0,13.9189343 C0,13.7414873 0.0440768395,13.5667684 0.128340519,13.4101975 L7.03733844,0.57254229 C7.32086049,0.0457280838 7.98165058,-0.153569987 8.51325441,0.127397589 C8.70423071,0.228333932 8.8605922,0.383286648 8.96244623,0.57254229 Z\"\n ></path>\n <path\n class=\"devui-icon-warning-inner\"\n stroke-width=\"0.3\"\n fill-rule=\"nonzero\"\n d=\"M8.87894737,13 L7.08947368,13 L7.08947368,11.2105263 L8.87894737,11.2105263 L8.87894737,13 Z M8.62102372,9.86842105 L7.32800539,9.86842105 L7,4.5 L8.96842105,4.5 L8.62102372,9.86842105 Z\"\n ></path>\n </g>\n <g *ngIf=\"type === 'info'\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g fill-rule=\"nonzero\">\n <path\n class=\"devui-icon-info-outer\"\n d=\"M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z\"\n ></path>\n <path\n class=\"devui-icon-info-inner\"\n d=\"M9.19008504,7 L8.79402696,13 L7.15622605,13 L6.73158434,7 L9.19008504,7 Z M9,3 L9,5 L7,5 L7,3 L9,3 Z\"\n stroke-width=\"0.2\"\n ></path>\n </g>\n </g>\n <g *ngIf=\"type === 'danger'\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g fill-rule=\"nonzero\">\n <path\n class=\"devui-icon-error-outer\"\n d=\"M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z\"\n ></path>\n <path\n class=\"devui-icon-error-inner\"\n d=\"M9,10.6 L9,12.6 L7,12.6 L7,10.6 L9,10.6 Z M9.1,3.1 L8.65924344,9.1 L7.28422786,9.1 L6.9,3.1 L9.1,3.1 Z\"\n stroke-width=\"0.2\"\n ></path>\n </g>\n </g>\n </svg>\n </span>\n <div class=\"devui-alert-carousel-container\" [style.height]=\"carouselNum > 1 ? autoplayHeight : 'auto'\">\n <div\n #carouselContainer\n class=\"devui-alert-carousel-box\"\n (mouseenter)=\"clearScheduledTransition()\"\n (mouseleave)=\"autoScheduleTransition()\"\n >\n <ng-content></ng-content>\n </div>\n </div>\n <div class=\"devui-alert-operation-container\">\n <ng-container *ngIf=\"carouselNum > 1\">\n <div class=\"devui-alert-carousel-num\">\n <span>{{ currentIndex }}/{{ carouselNum }}</span>\n </div>\n <span class=\"devui-alert-carousel-button\">\n <svg\n (click)=\"next()\"\n width=\"12px\"\n devui-alert-operation-container\n height=\"12px\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path\n d=\"M2.64644661,5.14644661 C2.82001296,4.97288026 3.08943736,4.95359511 3.2843055,5.08859116 L3.35355339,5.14644661 L7.999,9.793 L12.6464466,5.14644661 C12.820013,4.97288026 13.0894374,4.95359511 13.2843055,5.08859116 L13.3535534,5.14644661 C13.5271197,5.32001296 13.5464049,5.58943736 13.4114088,5.7843055 L13.3535534,5.85355339 L8.35355339,10.8535534 C8.17998704,11.0271197 7.91056264,11.0464049 7.7156945,10.9114088 L7.64644661,10.8535534 L2.64644661,5.85355339 C2.45118446,5.65829124 2.45118446,5.34170876 2.64644661,5.14644661 Z\"\n fill-rule=\"nonzero\"\n ></path>\n </g>\n </svg>\n </span>\n </ng-container>\n <ng-template [ngTemplateOutlet]=\"operationTemplate\" [ngTemplateOutletContext]=\"{ close: close }\"> </ng-template>\n <div class=\"devui-close\" (click)=\"close()\" *ngIf=\"closeable\">\n <svg\n width=\"10px\"\n height=\"10px\"\n viewBox=\"0 0 10 10\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g transform=\"translate(-3.000000, -3.000000)\" fill-rule=\"nonzero\">\n <path\n d=\"M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891 12.7352108,3.24751057 C13.0571998,3.5572302 13.0901298,4.03723416 12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416 C13.0645482,11.9370909 13.0605893,12.3571292 12.8158402,12.6640749 L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548 11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858 3.6740594,13.0636532 3.35648225,12.8298003 L3.26478919,12.7524894 C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416 L6.8583349,7.99900183 L3.19126762,4.31965839 C2.93545181,4.06290908 2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057 C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936 L8,6.85411161 L11.6426,3.19816936 Z\"\n ></path>\n </g>\n </g>\n </svg>\n </div>\n </div>\n</div>\n", styles: [".devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}:host{display:block}:host ::ng-deep .devui-alert-carousel-container .devui-alert-carousel-box>d-alert-carousel-item{min-height:var(--devui-alert-carousel-item-height, 24px)}.devui-alert{color:var(--devui-text, #191919);font-size:var(--devui-font-size, 12px);border:1px solid transparent;padding:8px 16px;line-height:24px;border-radius:var(--devui-border-radius, 2px);word-break:normal;word-wrap:break-word;display:flex;flex-wrap:nowrap}.devui-alert.devui-alert-success{background-color:var(--devui-success-bg, #bcf2db);border-color:var(--devui-success-line, #09aa71);color:var(--devui-text, #191919)}.devui-alert.devui-alert-success .devui-close>svg path{fill:var(--devui-success-line, #09aa71)}.devui-alert.devui-alert-info{background-color:var(--devui-info-bg, #cedefd);border-color:var(--devui-info-line, #0a59f7);color:var(--devui-text, #191919)}.devui-alert.devui-alert-info .devui-close>svg path{fill:var(--devui-info-line, #0a59f7)}.devui-alert.devui-alert-warning{background-color:var(--devui-warning-bg, #fde2bd);border-color:var(--devui-warning-line, #f4840c);color:var(--devui-text, #191919)}.devui-alert.devui-alert-warning .devui-close>svg path{fill:var(--devui-warning-line, #f4840c)}.devui-alert.devui-alert-danger{background-color:var(--devui-danger-bg, #fabdc1);border-color:var(--devui-danger-line, #e02128);color:var(--devui-text, #191919)}.devui-alert.devui-alert-danger .devui-close>svg path{fill:var(--devui-danger-line, #e02128)}.devui-alert.devui-alert-simple{border-color:var(--devui-line, #dbdbdb);color:var(--devui-text, #191919)}.devui-alert.devui-alert-simple .devui-close>svg path{fill:var(--devui-text-weak, #333333)}.devui-alert .devui-alert-icon{padding-right:8px}.devui-alert svg.devui-icon{width:16px;height:16px;vertical-align:middle;transform:translateY(-1px)}.devui-alert .devui-icon.devui-icon-success>g path{fill:var(--devui-success-line, #09aa71)}.devui-alert .devui-icon.devui-icon-success>g polygon{fill:var(--devui-light-text, #ffffff);stroke:var(--devui-light-text, #ffffff)}.devui-alert .devui-icon.devui-icon-warning>g path.devui-icon-warning-outer{fill:var(--devui-warning-line, #f4840c)}.devui-alert .devui-icon.devui-icon-warning>g path.devui-icon-warning-inner{fill:var(--devui-light-text, #ffffff);stroke:var(--devui-light-text, #ffffff)}.devui-alert .devui-icon.devui-icon-info>g path.devui-icon-info-outer{fill:var(--devui-info-line, #0a59f7)}.devui-alert .devui-icon.devui-icon-info>g path.devui-icon-info-inner{fill:var(--devui-light-text, #ffffff);stroke:var(--devui-light-text, #ffffff)}.devui-alert .devui-icon.devui-icon-error>g path.devui-icon-error-outer{fill:var(--devui-danger-line, #e02128)}.devui-alert .devui-icon.devui-icon-error>g path.devui-icon-error-inner{fill:var(--devui-light-text, #ffffff);stroke:var(--devui-light-text, #ffffff)}.devui-alert .devui-alert-carousel-container{flex:1;min-height:24px;overflow:hidden}.devui-alert .devui-alert-carousel-container .devui-alert-carousel-box{position:relative;left:0;top:0}.devui-alert .devui-alert-operation-container{flex-grow:0;flex-shrink:1;display:flex;align-items:center;justify-content:flex-end;min-height:24px;width:fit-content}.devui-alert .devui-alert-operation-container:empty{display:none}.devui-alert .devui-alert-operation-container .devui-alert-carousel-num{padding-right:8px}.devui-alert .devui-alert-operation-container .devui-alert-carousel-button{margin-right:8px;display:inline-flex;align-items:center;justify-content:center;width:24px;height:16px;line-height:16px;vertical-align:middle;background-color:transparent;text-align:center;border-radius:var(--devui-border-radius, 2px);cursor:pointer}.devui-alert .devui-alert-operation-container .devui-alert-carousel-button svg path{fill:var(--devui-text, #191919)}.devui-alert .devui-alert-operation-container .devui-alert-carousel-button:hover{background-color:var(--devui-shape-icon-fill-hover, #808080)}.devui-alert .devui-alert-operation-container .devui-alert-carousel-button:hover svg path{fill:var(--devui-light-text, #ffffff)}.devui-alert .devui-close{flex-grow:0;flex-shrink:1;color:var(--devui-text, #191919);opacity:1;line-height:26px;height:24px;padding-left:8px}.devui-alert .devui-close>svg path{fill:var(--devui-light-text, #ffffff)}.devui-alert .devui-close span{color:var(--devui-text, #191919);font-size:var(--devui-font-size, 12px);font-weight:700}\n"] }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { type: [{
type: Input
}], cssClass: [{
type: Input
}], closeable: [{
type: Input
}], showIcon: [{
type: Input
}], autoplay: [{
type: Input
}], autoplaySpeed: [{
type: Input
}], transitionSpeed: [{
type: Input
}], operationTemplate: [{
type: Input
}], dismissTime: [{
type: Input
}], closeEvent: [{
type: Output
}], box: [{
type: ViewChild,
args: ['carouselContainer']
}], carouselItems: [{
type: ContentChildren,
args: [AlertCarouselItemComponent]
}] } });
class AlertModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: AlertModule, declarations: [AlertComponent, AlertCarouselItemComponent], imports: [CommonModule], exports: [AlertComponent, AlertCarouselItemComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AlertModule, imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AlertModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule],
exports: [AlertComponent, AlertCarouselItemComponent],
declarations: [AlertComponent, AlertCarouselItemComponent],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { AlertCarouselItemComponent, AlertComponent, AlertModule };
//# sourceMappingURL=ng-devui-alert.mjs.map