kwikui
Version:
KwikID's UI Component Library in Angular
37 lines • 6.99 kB
JavaScript
import { Component, Input } from "@angular/core";
import * as i0 from "@angular/core";
import * as i1 from "@taiga-ui/core";
import * as i2 from "@angular/common";
export class KwikUIMessagesComponent {
constructor() {
this.id = "";
this.messages = [];
}
ngOnInit() { }
ngOnChanges(changes) {
if (changes.hasOwnProperty("messages") && !changes.messages.firstChange) {
this.messages = changes.messages.currentValue;
}
}
ngOnDestroy() {
// ensure when component is destroyed the subscription is also and not left open.
}
handleOnClickMessage(e) {
this.messages.splice(e, 1);
}
}
/** @nocollapse */ KwikUIMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikUIMessagesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ KwikUIMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikUIMessagesComponent, selector: "kwikui-messages", inputs: { id: "id", messages: "messages" }, usesOnChanges: true, ngImport: i0, template: "<div *ngFor=\"let message of messages; let i = index\">\n <div\n class=\"message\"\n id=\"i\"\n [class.info]=\"message.type === 'info'\"\n [class.warning]=\"message.type === 'warning'\"\n [class.success]=\"message.type === 'success'\"\n [class.error]=\"message.type === 'error'\"\n (click)=\"handleOnClickMessage(i)\"\n >\n <tui-svg\n src=\"tuiIconInfo\"\n class=\"icon\"\n *ngIf=\"message.type === 'info'\"\n ></tui-svg>\n <tui-svg\n src=\"tuiIconAlertTriangle\"\n class=\"icon\"\n *ngIf=\"message.type === 'warning'\"\n ></tui-svg>\n <tui-svg\n src=\"tuiIconCheckCircle\"\n class=\"icon\"\n *ngIf=\"message.type === 'success'\"\n ></tui-svg>\n <tui-svg\n src=\"tuiIconXCircle\"\n class=\"icon\"\n *ngIf=\"message.type === 'error'\"\n ></tui-svg>\n {{ message.message }}\n </div>\n</div>\n", styles: [".message{display:flex;flex-direction:row;align-items:flex-start;line-height:24px;grid-gap:.25rem;gap:.25rem}.info{color:var(--tui-info-fill)}.warning{color:var(--tui-warning-fill)}.success{color:var(--tui-success-fill)}.error{color:var(--tui-error-fill)}\n"], components: [{ type: i1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikUIMessagesComponent, decorators: [{
type: Component,
args: [{
selector: "kwikui-messages",
templateUrl: "./messages.component.html",
styleUrls: ["./messages.component.scss"]
}]
}], ctorParameters: function () { return []; }, propDecorators: { id: [{
type: Input
}], messages: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWVzc2FnZXMuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva3dpa3VpL3NyYy9saWIvY29tcG9uZW50cy9jdXN0b20vbWVzc2FnZXMvbWVzc2FnZXMuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva3dpa3VpL3NyYy9saWIvY29tcG9uZW50cy9jdXN0b20vbWVzc2FnZXMvbWVzc2FnZXMuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxLQUFLLEVBSU4sTUFBTSxlQUFlLENBQUM7Ozs7QUFZdkIsTUFBTSxPQUFPLHVCQUF1QjtJQUtsQztRQUpTLE9BQUUsR0FBRyxFQUFFLENBQUM7UUFFUixhQUFRLEdBQWUsRUFBRSxDQUFDO0lBRXBCLENBQUM7SUFFaEIsUUFBUSxLQUFVLENBQUM7SUFFbkIsV0FBVyxDQUFDLE9BQXNCO1FBQ2hDLElBQUksT0FBTyxDQUFDLGNBQWMsQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxRQUFRLENBQUMsV0FBVyxFQUFFO1lBQ3ZFLElBQUksQ0FBQyxRQUFRLEdBQUcsT0FBTyxDQUFDLFFBQVEsQ0FBQyxZQUFZLENBQUM7U0FDL0M7SUFDSCxDQUFDO0lBRUQsV0FBVztRQUNULGlGQUFpRjtJQUNuRixDQUFDO0lBRUQsb0JBQW9CLENBQUMsQ0FBTTtRQUN6QixJQUFJLENBQUMsUUFBUSxDQUFDLE1BQU0sQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUM7SUFDN0IsQ0FBQzs7d0lBckJVLHVCQUF1Qjs0SEFBdkIsdUJBQXVCLHdIQ2xCcEMsdTRCQWlDQTs0RkRmYSx1QkFBdUI7a0JBTG5DLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGlCQUFpQjtvQkFDM0IsV0FBVyxFQUFFLDJCQUEyQjtvQkFDeEMsU0FBUyxFQUFFLENBQUMsMkJBQTJCLENBQUM7aUJBQ3pDOzBFQUVVLEVBQUU7c0JBQVYsS0FBSztnQkFFRyxRQUFRO3NCQUFoQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBJbnB1dCxcbiAgT25DaGFuZ2VzLFxuICBPbkluaXQsXG4gIFNpbXBsZUNoYW5nZXNcbn0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcblxuaW50ZXJmYWNlIElNZXNzYWdlIHtcbiAgdHlwZTogXCJpbmZvXCIgfCBcIndhcm5pbmdcIiB8IFwic3VjY2Vzc1wiIHwgXCJlcnJvclwiO1xuICBtZXNzYWdlOiBzdHJpbmc7XG59XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogXCJrd2lrdWktbWVzc2FnZXNcIixcbiAgdGVtcGxhdGVVcmw6IFwiLi9tZXNzYWdlcy5jb21wb25lbnQuaHRtbFwiLFxuICBzdHlsZVVybHM6IFtcIi4vbWVzc2FnZXMuY29tcG9uZW50LnNjc3NcIl1cbn0pXG5leHBvcnQgY2xhc3MgS3dpa1VJTWVzc2FnZXNDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uQ2hhbmdlcyB7XG4gIEBJbnB1dCgpIGlkID0gXCJcIjtcblxuICBASW5wdXQoKSBtZXNzYWdlczogSU1lc3NhZ2VbXSA9IFtdO1xuXG4gIGNvbnN0cnVjdG9yKCkge31cblxuICBuZ09uSW5pdCgpOiB2b2lkIHt9XG5cbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcykge1xuICAgIGlmIChjaGFuZ2VzLmhhc093blByb3BlcnR5KFwibWVzc2FnZXNcIikgJiYgIWNoYW5nZXMubWVzc2FnZXMuZmlyc3RDaGFuZ2UpIHtcbiAgICAgIHRoaXMubWVzc2FnZXMgPSBjaGFuZ2VzLm1lc3NhZ2VzLmN1cnJlbnRWYWx1ZTtcbiAgICB9XG4gIH1cblxuICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICAvLyBlbnN1cmUgd2hlbiBjb21wb25lbnQgaXMgZGVzdHJveWVkIHRoZSBzdWJzY3JpcHRpb24gaXMgYWxzbyBhbmQgbm90IGxlZnQgb3Blbi5cbiAgfVxuXG4gIGhhbmRsZU9uQ2xpY2tNZXNzYWdlKGU6IGFueSkge1xuICAgIHRoaXMubWVzc2FnZXMuc3BsaWNlKGUsIDEpO1xuICB9XG59XG4iLCI8ZGl2ICpuZ0Zvcj1cImxldCBtZXNzYWdlIG9mIG1lc3NhZ2VzOyBsZXQgaSA9IGluZGV4XCI+XG4gIDxkaXZcbiAgICBjbGFzcz1cIm1lc3NhZ2VcIlxuICAgIGlkPVwiaVwiXG4gICAgW2NsYXNzLmluZm9dPVwibWVzc2FnZS50eXBlID09PSAnaW5mbydcIlxuICAgIFtjbGFzcy53YXJuaW5nXT1cIm1lc3NhZ2UudHlwZSA9PT0gJ3dhcm5pbmcnXCJcbiAgICBbY2xhc3Muc3VjY2Vzc109XCJtZXNzYWdlLnR5cGUgPT09ICdzdWNjZXNzJ1wiXG4gICAgW2NsYXNzLmVycm9yXT1cIm1lc3NhZ2UudHlwZSA9PT0gJ2Vycm9yJ1wiXG4gICAgKGNsaWNrKT1cImhhbmRsZU9uQ2xpY2tNZXNzYWdlKGkpXCJcbiAgPlxuICAgIDx0dWktc3ZnXG4gICAgICBzcmM9XCJ0dWlJY29uSW5mb1wiXG4gICAgICBjbGFzcz1cImljb25cIlxuICAgICAgKm5nSWY9XCJtZXNzYWdlLnR5cGUgPT09ICdpbmZvJ1wiXG4gICAgPjwvdHVpLXN2Zz5cbiAgICA8dHVpLXN2Z1xuICAgICAgc3JjPVwidHVpSWNvbkFsZXJ0VHJpYW5nbGVcIlxuICAgICAgY2xhc3M9XCJpY29uXCJcbiAgICAgICpuZ0lmPVwibWVzc2FnZS50eXBlID09PSAnd2FybmluZydcIlxuICAgID48L3R1aS1zdmc+XG4gICAgPHR1aS1zdmdcbiAgICAgIHNyYz1cInR1aUljb25DaGVja0NpcmNsZVwiXG4gICAgICBjbGFzcz1cImljb25cIlxuICAgICAgKm5nSWY9XCJtZXNzYWdlLnR5cGUgPT09ICdzdWNjZXNzJ1wiXG4gICAgPjwvdHVpLXN2Zz5cbiAgICA8dHVpLXN2Z1xuICAgICAgc3JjPVwidHVpSWNvblhDaXJjbGVcIlxuICAgICAgY2xhc3M9XCJpY29uXCJcbiAgICAgICpuZ0lmPVwibWVzc2FnZS50eXBlID09PSAnZXJyb3InXCJcbiAgICA+PC90dWktc3ZnPlxuICAgIHt7IG1lc3NhZ2UubWVzc2FnZSB9fVxuICA8L2Rpdj5cbjwvZGl2PlxuIl19