carbon-components-angular
Version:
Next generation components
270 lines (265 loc) • 9.98 kB
JavaScript
import * as i0 from '@angular/core';
import { TemplateRef, Component, Input, HostBinding, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from 'carbon-components-angular/icon';
import { IconModule } from 'carbon-components-angular/icon';
/**
* Get started with importing the module:
*
* ```typescript
* import { ProgressBarModule } from 'carbon-components-angular';
* ```
*
* [See demo](../../?path=/story/components-progress-bar--basic)
*/
class ProgressBar {
constructor() {
this.id = `progress-bar-${ProgressBar.progressBarCounter++}`;
this.helperId = `progress-bar-helper-${ProgressBar.progressBarCounter}`;
/**
* Maximum value
*/
this.max = 100;
/**
* Alignment variant of the progress bar, default is `default`
*/
this.type = "default";
/**
* Current status of the progress bar, default is `active`
*/
this.status = "active";
/**
* Size of the progress bar, default is `big`
*/
this.size = "big";
this.defaultClass = true;
this._value = undefined;
}
/**
* Current value
*/
set value(num) {
this._value = num;
// Validate number
if (num > this.max) {
this._value = this.max;
}
if (num < 0) {
this._value = 0;
}
// Set values based on current state
if (this.isError) {
this._value = 0;
}
else if (this.isFinished) {
this._value = this.max;
}
}
get value() {
return this._value;
}
get percentage() {
return `scaleX(${this.value / this.max})`;
}
// Size
get bigBar() {
return this.size === "big";
}
get smallBar() {
return this.size === "small";
}
// Type
get defaultType() {
return this.type === "default";
}
get indentedType() {
return this.type === "indented";
}
get inlineType() {
return this.type === "inline";
}
// Status
get isFinished() {
return this.status === "finished";
}
get isError() {
return this.status === "error";
}
get indeterminate() {
return this.value === undefined && !this.isFinished && !this.isError;
}
isTemplate(value) {
return value instanceof TemplateRef;
}
}
ProgressBar.progressBarCounter = 0;
ProgressBar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ProgressBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
ProgressBar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ProgressBar, selector: "cds-progress-bar, ibm-progress-bar", inputs: { value: "value", id: "id", label: "label", helperText: "helperText", max: "max", type: "type", status: "status", size: "size" }, host: { properties: { "class.cds--progress-bar--big": "this.bigBar", "class.cds--progress-bar--small": "this.smallBar", "class.cds--progress-bar--default": "this.defaultType", "class.cds--progress-bar--indented": "this.indentedType", "class.cds--progress-bar--inline": "this.inlineType", "class.cds--progress-bar--finished": "this.isFinished", "class.cds--progress-bar--error": "this.isError", "class.cds--progress-bar--indeterminate": "this.indeterminate", "class.cds--progress-bar": "this.defaultClass" } }, ngImport: i0, template: `
<div
*ngIf="label"
class="cds--progress-bar__label"
[id]="id">
<span class="cds--progress-bar__label-text">
<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>
<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
</span>
<svg
*ngIf="isFinished"
fill="currentColor"
cdsIcon="checkmark--filled"
class="cds--progress-bar__status-icon">
</svg>
<svg
*ngIf="isError"
fill="currentColor"
cdsIcon="error--filled"
class="cds--progress-bar__status-icon">
</svg>
</div>
<div
class="cds--progress-bar__track"
role="progressbar"
[attr.aria-invalid]="isError"
[attr.labelledby]="id"
[attr.describedby]="helperText ? helperId: null"
[attr.aria-valuemin]="!indeterminate ? 0 : null"
[attr.aria-valuemax]="!indeterminate ? max : null"
[attr.aria-valuenow]="!indeterminate ? value : null">
<div
class="cds--progress-bar__bar"
[ngStyle]="{
'transform': !isFinished && !isError ? percentage : null
}">
</div>
</div>
<div
[id]="helperId"
*ngIf="helperText"
class="cds--progress-bar__helper-text">
<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
</div>
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ProgressBar, decorators: [{
type: Component,
args: [{
selector: "cds-progress-bar, ibm-progress-bar",
template: `
<div
*ngIf="label"
class="cds--progress-bar__label"
[id]="id">
<span class="cds--progress-bar__label-text">
<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>
<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
</span>
<svg
*ngIf="isFinished"
fill="currentColor"
cdsIcon="checkmark--filled"
class="cds--progress-bar__status-icon">
</svg>
<svg
*ngIf="isError"
fill="currentColor"
cdsIcon="error--filled"
class="cds--progress-bar__status-icon">
</svg>
</div>
<div
class="cds--progress-bar__track"
role="progressbar"
[attr.aria-invalid]="isError"
[attr.labelledby]="id"
[attr.describedby]="helperText ? helperId: null"
[attr.aria-valuemin]="!indeterminate ? 0 : null"
[attr.aria-valuemax]="!indeterminate ? max : null"
[attr.aria-valuenow]="!indeterminate ? value : null">
<div
class="cds--progress-bar__bar"
[ngStyle]="{
'transform': !isFinished && !isError ? percentage : null
}">
</div>
</div>
<div
[id]="helperId"
*ngIf="helperText"
class="cds--progress-bar__helper-text">
<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
</div>
`
}]
}], propDecorators: { value: [{
type: Input
}], bigBar: [{
type: HostBinding,
args: ["class.cds--progress-bar--big"]
}], smallBar: [{
type: HostBinding,
args: ["class.cds--progress-bar--small"]
}], defaultType: [{
type: HostBinding,
args: ["class.cds--progress-bar--default"]
}], indentedType: [{
type: HostBinding,
args: ["class.cds--progress-bar--indented"]
}], inlineType: [{
type: HostBinding,
args: ["class.cds--progress-bar--inline"]
}], isFinished: [{
type: HostBinding,
args: ["class.cds--progress-bar--finished"]
}], isError: [{
type: HostBinding,
args: ["class.cds--progress-bar--error"]
}], indeterminate: [{
type: HostBinding,
args: ["class.cds--progress-bar--indeterminate"]
}], id: [{
type: Input
}], label: [{
type: Input
}], helperText: [{
type: Input
}], max: [{
type: Input
}], type: [{
type: Input
}], status: [{
type: Input
}], size: [{
type: Input
}], defaultClass: [{
type: HostBinding,
args: ["class.cds--progress-bar"]
}] } });
class ProgressBarModule {
}
ProgressBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
ProgressBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: ProgressBarModule, declarations: [ProgressBar], imports: [CommonModule,
IconModule], exports: [ProgressBar] });
ProgressBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ProgressBarModule, imports: [CommonModule,
IconModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ProgressBarModule, decorators: [{
type: NgModule,
args: [{
declarations: [
ProgressBar
],
exports: [
ProgressBar
],
imports: [
CommonModule,
IconModule
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { ProgressBar, ProgressBarModule };
//# sourceMappingURL=carbon-components-angular-progress-bar.mjs.map