carbon-components-angular
Version:
Next generation components
249 lines (244 loc) • 9.56 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
import * as i1 from 'carbon-components-angular/i18n';
import { I18nModule } from 'carbon-components-angular/i18n';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i3 from 'carbon-components-angular/icon';
import { IconModule } from 'carbon-components-angular/icon';
/**
* Get started with importing the module:
*
* ```typescript
* import { ProgressIndictorModule } from 'carbon-components-angular';
* ```
*
* [See demo](../../?path=/story/components-progress-indicator--basic)
*/
class ProgressIndicator {
constructor(i18n) {
this.i18n = i18n;
this.stepSelected = new EventEmitter();
this.translations = this.i18n.get().PROGRESS_INDICATOR;
this.orientation = "horizontal";
this.skeleton = false;
this.spacing = "default";
// Get icon names based for each status
this.statusIcons = {
current: "incomplete",
complete: "checkmark--outline",
invalid: "warning",
incomplete: "circle-dash"
};
}
get current() {
return this._current;
}
set current(current) {
this._current = current;
this.setProgressIndicatorStates();
}
static skeletonSteps(stepCount) {
const steps = [];
for (let i = 0; i < stepCount; i++) {
steps.push({ complete: false });
}
return steps;
}
/**
* Executes click function if `onClick` exists for step
* `Current` step functions will not be executed
* @param index number
*/
onClick(index) {
if (index !== this.current && typeof this.steps[index].onClick === "function") {
this.steps[index].onClick();
}
this.stepSelected.emit({ step: this.steps[index], index });
}
/**
* Gets current state based on weight of the state
* Weight of state goes from error, incomplete, current, and complete
*
* This function is used to determine which icon & translation string to display
* @param index number
* @returns string
*/
getCurrentState(index) {
if (index === this.current) {
return "current";
}
else if (this.steps[index].invalid) {
return "invalid";
}
else if (this.steps[index].complete) {
return "complete";
}
return "incomplete";
}
setProgressIndicatorStates() {
if (this.steps === undefined) {
return;
}
// Set all preceding steps to `complete` & following to `incomplete`
this.steps.forEach((step, index) => {
if (index < this.current) {
step.complete = true;
}
else {
step.complete = false;
}
});
}
}
ProgressIndicator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ProgressIndicator, deps: [{ token: i1.I18n }], target: i0.ɵɵFactoryTarget.Component });
ProgressIndicator.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ProgressIndicator, selector: "cds-progress-indicator, ibm-progress-indicator", inputs: { current: "current", steps: "steps", translations: "translations", orientation: "orientation", skeleton: "skeleton", spacing: "spacing" }, outputs: { stepSelected: "stepSelected" }, ngImport: i0, template: `
<ul
data-progress
data-progress-current
class="cds--progress"
[ngClass]="{
'cds--skeleton': skeleton,
'cds--progress--vertical': (orientation === 'vertical'),
'cds--progress--space-equal': spacing === 'equal' && orientation !== 'vertical'
}">
<li
class="cds--progress-step"
*ngFor="let step of steps; let i = index"
[ngClass]="{
'cds--progress-step--disabled' : step.disabled,
'cds--progress-step--complete' : step.complete,
'cds--progress-step--incomplete' : !step.complete && i !== current,
'cds--progress-step--current': i === current
}">
<button
type="button"
class="cds--progress-step-button"
[ngClass]="{
'cds--progress-step-button--unclickable': !step.onClick || current === i
}"
[disabled]="step.disabled"
[attr.aria-disabled]="step.disabled"
[tabindex]="(current !== i && step.onClick && !step.disabled) ? 0 : -1"
[title]="step.label"
(click)="onClick(i)">
<span class="cds--assistive-text">
{{this.translations[getCurrentState(i)?.toUpperCase()]}}
</span>
<svg
[cdsIcon]="statusIcons[getCurrentState(i)]"
size="16"
[ngClass]="{
'cds--progress__warning': step.invalid && i !== current
}">
<title *ngIf="step.description">{{step.description}}</title>
</svg>
<div class="cds--progress-text">
<p class="cds--progress-label">{{step.label}}</p>
<p *ngIf="step.secondaryLabel" class="cds--progress-optional">{{step.secondaryLabel}}</p>
</div>
<span class="cds--progress-line"></span>
</button>
</li>
</ul>
`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: ProgressIndicator, decorators: [{
type: Component,
args: [{
selector: "cds-progress-indicator, ibm-progress-indicator",
template: `
<ul
data-progress
data-progress-current
class="cds--progress"
[ngClass]="{
'cds--skeleton': skeleton,
'cds--progress--vertical': (orientation === 'vertical'),
'cds--progress--space-equal': spacing === 'equal' && orientation !== 'vertical'
}">
<li
class="cds--progress-step"
*ngFor="let step of steps; let i = index"
[ngClass]="{
'cds--progress-step--disabled' : step.disabled,
'cds--progress-step--complete' : step.complete,
'cds--progress-step--incomplete' : !step.complete && i !== current,
'cds--progress-step--current': i === current
}">
<button
type="button"
class="cds--progress-step-button"
[ngClass]="{
'cds--progress-step-button--unclickable': !step.onClick || current === i
}"
[disabled]="step.disabled"
[attr.aria-disabled]="step.disabled"
[tabindex]="(current !== i && step.onClick && !step.disabled) ? 0 : -1"
[title]="step.label"
(click)="onClick(i)">
<span class="cds--assistive-text">
{{this.translations[getCurrentState(i)?.toUpperCase()]}}
</span>
<svg
[cdsIcon]="statusIcons[getCurrentState(i)]"
size="16"
[ngClass]="{
'cds--progress__warning': step.invalid && i !== current
}">
<title *ngIf="step.description">{{step.description}}</title>
</svg>
<div class="cds--progress-text">
<p class="cds--progress-label">{{step.label}}</p>
<p *ngIf="step.secondaryLabel" class="cds--progress-optional">{{step.secondaryLabel}}</p>
</div>
<span class="cds--progress-line"></span>
</button>
</li>
</ul>
`
}]
}], ctorParameters: function () { return [{ type: i1.I18n }]; }, propDecorators: { current: [{
type: Input
}], steps: [{
type: Input
}], stepSelected: [{
type: Output
}], translations: [{
type: Input
}], orientation: [{
type: Input
}], skeleton: [{
type: Input
}], spacing: [{
type: Input
}] } });
class ProgressIndicatorModule {
}
ProgressIndicatorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ProgressIndicatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
ProgressIndicatorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: ProgressIndicatorModule, declarations: [ProgressIndicator], imports: [CommonModule,
IconModule,
I18nModule], exports: [ProgressIndicator] });
ProgressIndicatorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ProgressIndicatorModule, imports: [CommonModule,
IconModule,
I18nModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ProgressIndicatorModule, decorators: [{
type: NgModule,
args: [{
declarations: [
ProgressIndicator
],
exports: [
ProgressIndicator
],
imports: [
CommonModule,
IconModule,
I18nModule
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { ProgressIndicator, ProgressIndicatorModule };
//# sourceMappingURL=carbon-components-angular-progress-indicator.mjs.map