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]
80 lines • 10.6 kB
JavaScript
import { Attribute, Component, Input, Optional, ViewEncapsulation } from '@angular/core';
import { Color, mixinClassName, mixinColor, mixinDisable, mixinSize, Size } from "../../core";
import * as i0 from "@angular/core";
import * as i1 from "../../core";
import * as i2 from "@angular/common";
const SbProgressCore = mixinDisable(mixinSize(mixinColor(mixinClassName(class {
constructor(_elementRef, _themeService) {
this._elementRef = _elementRef;
this._themeService = _themeService;
}
}, 'sb-progress'), Color.PRIMARY), Size.MEDIUM));
export class SbProgressComponent extends SbProgressCore {
constructor(elementRef, themeService, isPill, isOutline, isStriped) {
super(elementRef, themeService);
this.progress = 0;
this.transition = '';
this.showPercentage = false;
this.animateStripes = false;
this.pill = false;
this.outline = false;
this.striped = false;
if (isPill == '')
this.isPill = true;
if (isOutline == '')
this.isOutline = true;
if (isStriped == '')
this.isStriped = true;
}
get progressPercentage() {
return `${this.progress}%`;
}
set isPill(isPill) { this.pill = isPill; }
set isOutline(isOutline) { this.outline = isOutline; }
set isStriped(isStriped) { this.striped = isStriped; }
}
SbProgressComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbProgressComponent, deps: [{ token: i0.ElementRef }, { token: i1.SbThemeService }, { token: 'pill', attribute: true, optional: true }, { token: 'outline', attribute: true, optional: true }, { token: 'striped', attribute: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
SbProgressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: SbProgressComponent, selector: "sb-progress", inputs: { size: "size", color: "color", disabled: "disabled", progress: "progress", transition: "transition", showPercentage: "showPercentage", animateStripes: "animateStripes", isPill: "isPill", isOutline: "isOutline", isStriped: "isStriped" }, host: { properties: { "class.pill": "pill", "class.outline": "outline", "class.striped": "striped && size != \"xs\"", "class.animate-stripes": "animateStripes && striped" } }, usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"className + '__bar'\" [ngStyle]=\"{'width': progressPercentage, 'transition': transition}\">\n <ng-template [ngIf]=\"showPercentage\">{{ progressPercentage }}</ng-template>\n</div>\n", directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbProgressComponent, decorators: [{
type: Component,
args: [{ selector: 'sb-progress', encapsulation: ViewEncapsulation.None, host: {
'[class.pill]': 'pill',
'[class.outline]': 'outline',
'[class.striped]': 'striped && size != "xs"',
'[class.animate-stripes]': 'animateStripes && striped'
}, inputs: [
'size',
'color',
'disabled'
], template: "<div [ngClass]=\"className + '__bar'\" [ngStyle]=\"{'width': progressPercentage, 'transition': transition}\">\n <ng-template [ngIf]=\"showPercentage\">{{ progressPercentage }}</ng-template>\n</div>\n" }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.SbThemeService }, { type: undefined, decorators: [{
type: Optional
}, {
type: Attribute,
args: ['pill']
}] }, { type: undefined, decorators: [{
type: Optional
}, {
type: Attribute,
args: ['outline']
}] }, { type: undefined, decorators: [{
type: Optional
}, {
type: Attribute,
args: ['striped']
}] }]; }, propDecorators: { progress: [{
type: Input
}], transition: [{
type: Input
}], showPercentage: [{
type: Input
}], animateStripes: [{
type: Input
}], isPill: [{
type: Input
}], isOutline: [{
type: Input
}], isStriped: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZ3Jlc3MuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vc2ItZWxlbWVudC9zcmMvbGliL2luZGljYXRvci9wcm9ncmVzcy9wcm9ncmVzcy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9zYi1lbGVtZW50L3NyYy9saWIvaW5kaWNhdG9yL3Byb2dyZXNzL3Byb2dyZXNzLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsU0FBUyxFQUFjLEtBQUssRUFBRSxRQUFRLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDckcsT0FBTyxFQUFFLEtBQUssRUFBRSxjQUFjLEVBQUUsVUFBVSxFQUFFLFlBQVksRUFBRSxTQUFTLEVBQWtCLElBQUksRUFBRSxNQUFNLFlBQVksQ0FBQzs7OztBQUU5RyxNQUFNLGNBQWMsR0FBRyxZQUFZLENBQ2pDLFNBQVMsQ0FDUCxVQUFVLENBQ1IsY0FBYyxDQUNaO0lBQ0UsWUFDUyxXQUF1QixFQUN2QixhQUE2QjtRQUQ3QixnQkFBVyxHQUFYLFdBQVcsQ0FBWTtRQUN2QixrQkFBYSxHQUFiLGFBQWEsQ0FBZ0I7SUFBRyxDQUFDO0NBQzNDLEVBQUUsYUFBYSxDQUNqQixFQUFFLEtBQUssQ0FBQyxPQUFPLENBQ2pCLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FDZixDQUNGLENBQUM7QUFrQkYsTUFBTSxPQUFPLG1CQUFvQixTQUFRLGNBQWM7SUE2QnJELFlBQ0UsVUFBc0IsRUFDdEIsWUFBNEIsRUFDRyxNQUFXLEVBQ1IsU0FBYyxFQUNkLFNBQWM7UUFFaEQsS0FBSyxDQUFDLFVBQVUsRUFBRSxZQUFZLENBQUMsQ0FBQztRQWpDM0IsYUFBUSxHQUFXLENBQUMsQ0FBQztRQUdyQixlQUFVLEdBQVcsRUFBRSxDQUFDO1FBT3hCLG1CQUFjLEdBQVksS0FBSyxDQUFDO1FBR2hDLG1CQUFjLEdBQVksS0FBSyxDQUFDO1FBUy9CLFNBQUksR0FBWSxLQUFLLENBQUM7UUFDdEIsWUFBTyxHQUFZLEtBQUssQ0FBQztRQUN6QixZQUFPLEdBQVksS0FBSyxDQUFDO1FBVS9CLElBQUksTUFBTSxJQUFJLEVBQUU7WUFBRSxJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQztRQUNyQyxJQUFJLFNBQVMsSUFBSSxFQUFFO1lBQUUsSUFBSSxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUM7UUFDM0MsSUFBSSxTQUFTLElBQUksRUFBRTtZQUFFLElBQUksQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDO0lBQzdDLENBQUM7SUFoQ0QsSUFBSSxrQkFBa0I7UUFDcEIsT0FBTyxHQUFHLElBQUksQ0FBQyxRQUFRLEdBQUcsQ0FBQztJQUM3QixDQUFDO0lBUUQsSUFDSSxNQUFNLENBQUMsTUFBZSxJQUFJLElBQUksQ0FBQyxJQUFJLEdBQUcsTUFBTSxDQUFDLENBQUMsQ0FBQztJQUNuRCxJQUNJLFNBQVMsQ0FBQyxTQUFrQixJQUFJLElBQUksQ0FBQyxPQUFPLEdBQUcsU0FBUyxDQUFDLENBQUMsQ0FBQztJQUMvRCxJQUNJLFNBQVMsQ0FBQyxTQUFrQixJQUFJLElBQUksQ0FBQyxPQUFPLEdBQUcsU0FBUyxDQUFDLENBQUMsQ0FBQzs7Z0hBdkJwRCxtQkFBbUIsMEVBZ0NMLE1BQU0sOENBQ04sU0FBUyw4Q0FDVCxTQUFTO29HQWxDdkIsbUJBQW1CLGdmQ2pDaEMsME1BR0E7MkZEOEJhLG1CQUFtQjtrQkFoQi9CLFNBQVM7K0JBQ0UsYUFBYSxpQkFFUixpQkFBaUIsQ0FBQyxJQUFJLFFBQy9CO3dCQUNKLGNBQWMsRUFBRSxNQUFNO3dCQUN0QixpQkFBaUIsRUFBRSxTQUFTO3dCQUM1QixpQkFBaUIsRUFBRSx5QkFBeUI7d0JBQzVDLHlCQUF5QixFQUFFLDJCQUEyQjtxQkFDdkQsVUFDTzt3QkFDTixNQUFNO3dCQUNOLE9BQU87d0JBQ1AsVUFBVTtxQkFDWDs7MEJBa0NFLFFBQVE7OzBCQUFJLFNBQVM7MkJBQUMsTUFBTTs7MEJBQzVCLFFBQVE7OzBCQUFJLFNBQVM7MkJBQUMsU0FBUzs7MEJBQy9CLFFBQVE7OzBCQUFJLFNBQVM7MkJBQUMsU0FBUzs0Q0EvQjNCLFFBQVE7c0JBRGQsS0FBSztnQkFJQyxVQUFVO3NCQURoQixLQUFLO2dCQVFDLGNBQWM7c0JBRHBCLEtBQUs7Z0JBSUMsY0FBYztzQkFEcEIsS0FBSztnQkFJRixNQUFNO3NCQURULEtBQUs7Z0JBR0YsU0FBUztzQkFEWixLQUFLO2dCQUdGLFNBQVM7c0JBRFosS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEF0dHJpYnV0ZSwgQ29tcG9uZW50LCBFbGVtZW50UmVmLCBJbnB1dCwgT3B0aW9uYWwsIFZpZXdFbmNhcHN1bGF0aW9uIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb2xvciwgbWl4aW5DbGFzc05hbWUsIG1peGluQ29sb3IsIG1peGluRGlzYWJsZSwgbWl4aW5TaXplLCBTYlRoZW1lU2VydmljZSwgU2l6ZSB9IGZyb20gXCIuLi8uLi9jb3JlXCI7XG5cbmNvbnN0IFNiUHJvZ3Jlc3NDb3JlID0gbWl4aW5EaXNhYmxlKFxuICBtaXhpblNpemUoXG4gICAgbWl4aW5Db2xvcihcbiAgICAgIG1peGluQ2xhc3NOYW1lKFxuICAgICAgICBjbGFzcyB7XG4gICAgICAgICAgY29uc3RydWN0b3IoXG4gICAgICAgICAgICBwdWJsaWMgX2VsZW1lbnRSZWY6IEVsZW1lbnRSZWYsXG4gICAgICAgICAgICBwdWJsaWMgX3RoZW1lU2VydmljZTogU2JUaGVtZVNlcnZpY2UpIHt9XG4gICAgICAgIH0sICdzYi1wcm9ncmVzcydcbiAgICAgICksIENvbG9yLlBSSU1BUllcbiAgICApLCBTaXplLk1FRElVTVxuICApXG4pO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzYi1wcm9ncmVzcycsXG4gIHRlbXBsYXRlVXJsOiAnLi9wcm9ncmVzcy5jb21wb25lbnQuaHRtbCcsXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gIGhvc3Q6IHtcbiAgICAnW2NsYXNzLnBpbGxdJzogJ3BpbGwnLFxuICAgICdbY2xhc3Mub3V0bGluZV0nOiAnb3V0bGluZScsXG4gICAgJ1tjbGFzcy5zdHJpcGVkXSc6ICdzdHJpcGVkICYmIHNpemUgIT0gXCJ4c1wiJyxcbiAgICAnW2NsYXNzLmFuaW1hdGUtc3RyaXBlc10nOiAnYW5pbWF0ZVN0cmlwZXMgJiYgc3RyaXBlZCdcbiAgfSxcbiAgaW5wdXRzOiBbXG4gICAgJ3NpemUnLFxuICAgICdjb2xvcicsXG4gICAgJ2Rpc2FibGVkJ1xuICBdXG59KVxuZXhwb3J0IGNsYXNzIFNiUHJvZ3Jlc3NDb21wb25lbnQgZXh0ZW5kcyBTYlByb2dyZXNzQ29yZSB7XG5cbiAgQElucHV0KClcbiAgcHVibGljIHByb2dyZXNzOiBudW1iZXIgPSAwO1xuXG4gIEBJbnB1dCgpXG4gIHB1YmxpYyB0cmFuc2l0aW9uOiBzdHJpbmcgPSAnJztcblxuICBnZXQgcHJvZ3Jlc3NQZXJjZW50YWdlKCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIGAke3RoaXMucHJvZ3Jlc3N9JWA7XG4gIH1cblxuICBASW5wdXQoKVxuICBwdWJsaWMgc2hvd1BlcmNlbnRhZ2U6IGJvb2xlYW4gPSBmYWxzZTtcblxuICBASW5wdXQoKVxuICBwdWJsaWMgYW5pbWF0ZVN0cmlwZXM6IGJvb2xlYW4gPSBmYWxzZTtcblxuICBASW5wdXQoKVxuICBzZXQgaXNQaWxsKGlzUGlsbDogYm9vbGVhbikgeyB0aGlzLnBpbGwgPSBpc1BpbGw7IH1cbiAgQElucHV0KClcbiAgc2V0IGlzT3V0bGluZShpc091dGxpbmU6IGJvb2xlYW4pIHsgdGhpcy5vdXRsaW5lID0gaXNPdXRsaW5lOyB9XG4gIEBJbnB1dCgpXG4gIHNldCBpc1N0cmlwZWQoaXNTdHJpcGVkOiBib29sZWFuKSB7IHRoaXMuc3RyaXBlZCA9IGlzU3RyaXBlZDsgfVxuXG4gIHByaXZhdGUgcGlsbDogYm9vbGVhbiA9IGZhbHNlO1xuICBwcml2YXRlIG91dGxpbmU6IGJvb2xlYW4gPSBmYWxzZTtcbiAgcHJpdmF0ZSBzdHJpcGVkOiBib29sZWFuID0gZmFsc2U7XG5cbiAgY29uc3RydWN0b3IoXG4gICAgZWxlbWVudFJlZjogRWxlbWVudFJlZixcbiAgICB0aGVtZVNlcnZpY2U6IFNiVGhlbWVTZXJ2aWNlLFxuICAgIEBPcHRpb25hbCgpIEBBdHRyaWJ1dGUoJ3BpbGwnKSBpc1BpbGw6IGFueSxcbiAgICBAT3B0aW9uYWwoKSBAQXR0cmlidXRlKCdvdXRsaW5lJykgaXNPdXRsaW5lOiBhbnksXG4gICAgQE9wdGlvbmFsKCkgQEF0dHJpYnV0ZSgnc3RyaXBlZCcpIGlzU3RyaXBlZDogYW55LFxuICApIHtcbiAgICBzdXBlcihlbGVtZW50UmVmLCB0aGVtZVNlcnZpY2UpO1xuICAgIGlmIChpc1BpbGwgPT0gJycpIHRoaXMuaXNQaWxsID0gdHJ1ZTtcbiAgICBpZiAoaXNPdXRsaW5lID09ICcnKSB0aGlzLmlzT3V0bGluZSA9IHRydWU7XG4gICAgaWYgKGlzU3RyaXBlZCA9PSAnJykgdGhpcy5pc1N0cmlwZWQgPSB0cnVlO1xuICB9XG5cbn1cbiIsIjxkaXYgW25nQ2xhc3NdPVwiY2xhc3NOYW1lICsgJ19fYmFyJ1wiIFtuZ1N0eWxlXT1cInsnd2lkdGgnOiBwcm9ncmVzc1BlcmNlbnRhZ2UsICd0cmFuc2l0aW9uJzogdHJhbnNpdGlvbn1cIj5cbiAgPG5nLXRlbXBsYXRlIFtuZ0lmXT1cInNob3dQZXJjZW50YWdlXCI+e3sgcHJvZ3Jlc3NQZXJjZW50YWdlIH19PC9uZy10ZW1wbGF0ZT5cbjwvZGl2PlxuIl19