sb-element
Version:
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.0.1. It is a component library constructed around the SCSS library [Sb-Theming](https://github.com/SeverinBuchser/SbTheming) and supports [Angular Schematics]
71 lines • 11.2 kB
JavaScript
import { Component, EventEmitter, Input, Output, ViewChild, ViewEncapsulation } from '@angular/core';
import { SbProgressComponent } from "../../indicator";
import { Color, mixinClassName, mixinHide } from "../../core";
import * as i0 from "@angular/core";
import * as i1 from "../../core";
import * as i2 from "../../icon/icon/icon.component";
import * as i3 from "../../indicator/progress/progress.component";
import * as i4 from "@angular/common";
const SbToastCore = mixinHide(mixinClassName(class {
constructor(_elementRef, _themeService) {
this._elementRef = _elementRef;
this._themeService = _themeService;
}
}, 'sb-toast'));
export class SbToastComponent extends SbToastCore {
constructor(elementRef, themeService) {
super(elementRef, themeService);
this.close = new EventEmitter();
this.color = Color.PRIMARY;
this.allowWithinClose = true;
this.timed = 0;
this.transitionElement = elementRef;
}
onShowEnd() {
if (this.timed > 0) {
this.progressBar.transition = `width ${this.timed}ms linear`;
this.progressBar.progress = 100;
this.wait(this.timed).then(() => this.setVisibleState(false));
}
}
onHideEnd() {
if (this.timed > 0) {
this.progressBar.transition = '';
this.progressBar.progress = 0;
}
}
handleClose() {
this.close.emit();
if (this.allowWithinClose) {
this.setVisibleState(false);
}
}
trigger() {
this.visible = !this.visible;
}
}
SbToastComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbToastComponent, deps: [{ token: i0.ElementRef }, { token: i1.SbThemeService }], target: i0.ɵɵFactoryTarget.Component });
SbToastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: SbToastComponent, selector: "sb-toast", inputs: { visible: "visible", color: "color", allowWithinClose: "allowWithinClose", timed: "timed" }, outputs: { show: "show", hide: "hide", close: "close" }, host: { properties: { "class.timed": "timed > 0" } }, viewQueries: [{ propertyName: "progressBar", first: true, predicate: SbProgressComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"className + '__header'\">\n <ng-content select=\"[header]\"></ng-content>\n <sb-icon *ngIf=\"allowWithinClose\" [ngClass]=\"className + '__close'\" (click)=\"handleClose()\"></sb-icon>\n</div>\n<div [ngClass]=\"className + '__body'\">\n <ng-content select=\"[body]\"></ng-content>\n</div>\n<ng-template [ngIf]=\"timed > 0\" [ngIfElse]=\"notTimed\">\n <sb-progress\n [ngClass]=\"className + '__header-hr'\"\n size=\"xs\"\n [color]=\"color\">\n </sb-progress>\n</ng-template>\n<ng-template #notTimed>\n <hr [ngClass]=\"className + '__header-hr'\">\n</ng-template>\n<div [ngClass]=\"className + '__border'\"></div>\n", components: [{ type: i2.SbIconComponent, selector: "sb-icon", inputs: ["size", "color", "icon", "isOutline"] }, { type: i3.SbProgressComponent, selector: "sb-progress", inputs: ["size", "color", "disabled", "progress", "transition", "showPercentage", "animateStripes", "isPill", "isOutline", "isStriped"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbToastComponent, decorators: [{
type: Component,
args: [{ selector: 'sb-toast', encapsulation: ViewEncapsulation.None, host: {
'[class.timed]': 'timed > 0'
}, inputs: [
'visible'
], outputs: [
'show',
'hide'
], template: "<div [ngClass]=\"className + '__header'\">\n <ng-content select=\"[header]\"></ng-content>\n <sb-icon *ngIf=\"allowWithinClose\" [ngClass]=\"className + '__close'\" (click)=\"handleClose()\"></sb-icon>\n</div>\n<div [ngClass]=\"className + '__body'\">\n <ng-content select=\"[body]\"></ng-content>\n</div>\n<ng-template [ngIf]=\"timed > 0\" [ngIfElse]=\"notTimed\">\n <sb-progress\n [ngClass]=\"className + '__header-hr'\"\n size=\"xs\"\n [color]=\"color\">\n </sb-progress>\n</ng-template>\n<ng-template #notTimed>\n <hr [ngClass]=\"className + '__header-hr'\">\n</ng-template>\n<div [ngClass]=\"className + '__border'\"></div>\n" }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.SbThemeService }]; }, propDecorators: { close: [{
type: Output
}], color: [{
type: Input
}], allowWithinClose: [{
type: Input
}], timed: [{
type: Input
}], progressBar: [{
type: ViewChild,
args: [SbProgressComponent]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9hc3QuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vc2ItZWxlbWVudC9zcmMvbGliL25vdGlmaWNhdGlvbi90b2FzdC90b2FzdC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9zYi1lbGVtZW50L3NyYy9saWIvbm90aWZpY2F0aW9uL3RvYXN0L3RvYXN0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQWMsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsU0FBUyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ2pILE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQ3RELE9BQU8sRUFBRSxLQUFLLEVBQUUsY0FBYyxFQUFFLFNBQVMsRUFBK0IsTUFBTSxZQUFZLENBQUM7Ozs7OztBQUUzRixNQUFNLFdBQVcsR0FBRyxTQUFTLENBQzNCLGNBQWMsQ0FDWjtJQUNFLFlBQ1MsV0FBdUIsRUFDdkIsYUFBNkI7UUFEN0IsZ0JBQVcsR0FBWCxXQUFXLENBQVk7UUFDdkIsa0JBQWEsR0FBYixhQUFhLENBQWdCO0lBQUcsQ0FBQztDQUMzQyxFQUFFLFVBQVUsQ0FDZCxDQUNGLENBQUM7QUFpQkYsTUFBTSxPQUFPLGdCQUFpQixTQUFRLFdBQVc7SUFpQi9DLFlBQ0UsVUFBc0IsRUFDdEIsWUFBNEI7UUFFNUIsS0FBSyxDQUFDLFVBQVUsRUFBRSxZQUFZLENBQUMsQ0FBQztRQWxCM0IsVUFBSyxHQUF1QixJQUFJLFlBQVksRUFBUSxDQUFDO1FBR3JELFVBQUssR0FBVyxLQUFLLENBQUMsT0FBTyxDQUFDO1FBRzlCLHFCQUFnQixHQUFZLElBQUksQ0FBQztRQUdqQyxVQUFLLEdBQVcsQ0FBQyxDQUFDO1FBVXZCLElBQUksQ0FBQyxpQkFBaUIsR0FBRyxVQUFVLENBQUM7SUFDdEMsQ0FBQztJQUVTLFNBQVM7UUFDakIsSUFBSSxJQUFJLENBQUMsS0FBSyxHQUFHLENBQUMsRUFBRTtZQUNsQixJQUFJLENBQUMsV0FBVyxDQUFDLFVBQVUsR0FBRyxTQUFTLElBQUksQ0FBQyxLQUFLLFdBQVcsQ0FBQztZQUM3RCxJQUFJLENBQUMsV0FBVyxDQUFDLFFBQVEsR0FBRyxHQUFHLENBQUM7WUFDaEMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsSUFBSSxDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxlQUFlLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQTtTQUM5RDtJQUNILENBQUM7SUFFUyxTQUFTO1FBQ2pCLElBQUksSUFBSSxDQUFDLEtBQUssR0FBRyxDQUFDLEVBQUU7WUFDbEIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxVQUFVLEdBQUcsRUFBRSxDQUFDO1lBQ2pDLElBQUksQ0FBQyxXQUFXLENBQUMsUUFBUSxHQUFHLENBQUMsQ0FBQztTQUMvQjtJQUNILENBQUM7SUFFTSxXQUFXO1FBQ2hCLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDbEIsSUFBSSxJQUFJLENBQUMsZ0JBQWdCLEVBQUU7WUFDekIsSUFBSSxDQUFDLGVBQWUsQ0FBQyxLQUFLLENBQUMsQ0FBQztTQUM3QjtJQUNILENBQUM7SUFFTSxPQUFPO1FBQ1osSUFBSSxDQUFDLE9BQU8sR0FBRyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUM7SUFDL0IsQ0FBQzs7NkdBakRVLGdCQUFnQjtpR0FBaEIsZ0JBQWdCLGtUQWNoQixtQkFBbUIsdUVDM0NoQywrb0JBa0JBOzJGRFdhLGdCQUFnQjtrQkFmNUIsU0FBUzsrQkFDRSxVQUFVLGlCQUVMLGlCQUFpQixDQUFDLElBQUksUUFDL0I7d0JBQ0osZUFBZSxFQUFFLFdBQVc7cUJBQzdCLFVBQ087d0JBQ04sU0FBUztxQkFDVixXQUNRO3dCQUNQLE1BQU07d0JBQ04sTUFBTTtxQkFDUDs4SEFLTSxLQUFLO3NCQURYLE1BQU07Z0JBSUEsS0FBSztzQkFEWCxLQUFLO2dCQUlDLGdCQUFnQjtzQkFEdEIsS0FBSztnQkFJQyxLQUFLO3NCQURYLEtBQUs7Z0JBSUMsV0FBVztzQkFEakIsU0FBUzt1QkFBQyxtQkFBbUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEVsZW1lbnRSZWYsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCwgVmlld0NoaWxkLCBWaWV3RW5jYXBzdWxhdGlvbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgU2JQcm9ncmVzc0NvbXBvbmVudCB9IGZyb20gXCIuLi8uLi9pbmRpY2F0b3JcIjtcbmltcG9ydCB7IENvbG9yLCBtaXhpbkNsYXNzTmFtZSwgbWl4aW5IaWRlLCBTYlRoZW1lU2VydmljZSwgVHJpZ2dlcmFibGUgfSBmcm9tIFwiLi4vLi4vY29yZVwiO1xuXG5jb25zdCBTYlRvYXN0Q29yZSA9IG1peGluSGlkZShcbiAgbWl4aW5DbGFzc05hbWUoXG4gICAgY2xhc3Mge1xuICAgICAgY29uc3RydWN0b3IoXG4gICAgICAgIHB1YmxpYyBfZWxlbWVudFJlZjogRWxlbWVudFJlZixcbiAgICAgICAgcHVibGljIF90aGVtZVNlcnZpY2U6IFNiVGhlbWVTZXJ2aWNlKSB7fVxuICAgIH0sICdzYi10b2FzdCdcbiAgKVxuKTtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc2ItdG9hc3QnLFxuICB0ZW1wbGF0ZVVybDogJy4vdG9hc3QuY29tcG9uZW50Lmh0bWwnLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICBob3N0OiB7XG4gICAgJ1tjbGFzcy50aW1lZF0nOiAndGltZWQgPiAwJ1xuICB9LFxuICBpbnB1dHM6IFtcbiAgICAndmlzaWJsZSdcbiAgXSxcbiAgb3V0cHV0czogW1xuICAgICdzaG93JyxcbiAgICAnaGlkZSdcbiAgXVxufSlcbmV4cG9ydCBjbGFzcyBTYlRvYXN0Q29tcG9uZW50IGV4dGVuZHMgU2JUb2FzdENvcmUgaW1wbGVtZW50cyBUcmlnZ2VyYWJsZSB7XG5cbiAgQE91dHB1dCgpXG4gIHB1YmxpYyBjbG9zZTogRXZlbnRFbWl0dGVyPHZvaWQ+ID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xuXG4gIEBJbnB1dCgpXG4gIHB1YmxpYyBjb2xvcjogc3RyaW5nID0gQ29sb3IuUFJJTUFSWTtcblxuICBASW5wdXQoKVxuICBwdWJsaWMgYWxsb3dXaXRoaW5DbG9zZTogYm9vbGVhbiA9IHRydWU7XG5cbiAgQElucHV0KClcbiAgcHVibGljIHRpbWVkOiBudW1iZXIgPSAwO1xuXG4gIEBWaWV3Q2hpbGQoU2JQcm9ncmVzc0NvbXBvbmVudClcbiAgcHVibGljIHByb2dyZXNzQmFyITogU2JQcm9ncmVzc0NvbXBvbmVudDtcblxuICBjb25zdHJ1Y3RvcihcbiAgICBlbGVtZW50UmVmOiBFbGVtZW50UmVmLFxuICAgIHRoZW1lU2VydmljZTogU2JUaGVtZVNlcnZpY2VcbiAgKSB7XG4gICAgc3VwZXIoZWxlbWVudFJlZiwgdGhlbWVTZXJ2aWNlKTtcbiAgICB0aGlzLnRyYW5zaXRpb25FbGVtZW50ID0gZWxlbWVudFJlZjtcbiAgfVxuXG4gIHByb3RlY3RlZCBvblNob3dFbmQoKTogdm9pZCB7XG4gICAgaWYgKHRoaXMudGltZWQgPiAwKSB7XG4gICAgICB0aGlzLnByb2dyZXNzQmFyLnRyYW5zaXRpb24gPSBgd2lkdGggJHt0aGlzLnRpbWVkfW1zIGxpbmVhcmA7XG4gICAgICB0aGlzLnByb2dyZXNzQmFyLnByb2dyZXNzID0gMTAwO1xuICAgICAgdGhpcy53YWl0KHRoaXMudGltZWQpLnRoZW4oKCkgPT4gdGhpcy5zZXRWaXNpYmxlU3RhdGUoZmFsc2UpKVxuICAgIH1cbiAgfVxuXG4gIHByb3RlY3RlZCBvbkhpZGVFbmQoKTogdm9pZCB7XG4gICAgaWYgKHRoaXMudGltZWQgPiAwKSB7XG4gICAgICB0aGlzLnByb2dyZXNzQmFyLnRyYW5zaXRpb24gPSAnJztcbiAgICAgIHRoaXMucHJvZ3Jlc3NCYXIucHJvZ3Jlc3MgPSAwO1xuICAgIH1cbiAgfVxuXG4gIHB1YmxpYyBoYW5kbGVDbG9zZSgpOiB2b2lkIHtcbiAgICB0aGlzLmNsb3NlLmVtaXQoKTtcbiAgICBpZiAodGhpcy5hbGxvd1dpdGhpbkNsb3NlKSB7XG4gICAgICB0aGlzLnNldFZpc2libGVTdGF0ZShmYWxzZSk7XG4gICAgfVxuICB9XG5cbiAgcHVibGljIHRyaWdnZXIoKTogdm9pZCB7XG4gICAgdGhpcy52aXNpYmxlID0gIXRoaXMudmlzaWJsZTtcbiAgfVxuXG59XG4iLCI8ZGl2IFtuZ0NsYXNzXT1cImNsYXNzTmFtZSArICdfX2hlYWRlcidcIj5cbiAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW2hlYWRlcl1cIj48L25nLWNvbnRlbnQ+XG4gIDxzYi1pY29uICpuZ0lmPVwiYWxsb3dXaXRoaW5DbG9zZVwiIFtuZ0NsYXNzXT1cImNsYXNzTmFtZSArICdfX2Nsb3NlJ1wiIChjbGljayk9XCJoYW5kbGVDbG9zZSgpXCI+JiN4ZTVjZDs8L3NiLWljb24+XG48L2Rpdj5cbjxkaXYgW25nQ2xhc3NdPVwiY2xhc3NOYW1lICsgJ19fYm9keSdcIj5cbiAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW2JvZHldXCI+PC9uZy1jb250ZW50PlxuPC9kaXY+XG48bmctdGVtcGxhdGUgW25nSWZdPVwidGltZWQgPiAwXCIgW25nSWZFbHNlXT1cIm5vdFRpbWVkXCI+XG4gIDxzYi1wcm9ncmVzc1xuICAgIFtuZ0NsYXNzXT1cImNsYXNzTmFtZSArICdfX2hlYWRlci1ocidcIlxuICAgIHNpemU9XCJ4c1wiXG4gICAgW2NvbG9yXT1cImNvbG9yXCI+XG4gIDwvc2ItcHJvZ3Jlc3M+XG48L25nLXRlbXBsYXRlPlxuPG5nLXRlbXBsYXRlICNub3RUaW1lZD5cbiAgPGhyIFtuZ0NsYXNzXT1cImNsYXNzTmFtZSArICdfX2hlYWRlci1ocidcIj5cbjwvbmctdGVtcGxhdGU+XG48ZGl2IFtuZ0NsYXNzXT1cImNsYXNzTmFtZSArICdfX2JvcmRlcidcIj48L2Rpdj5cbiJdfQ==