@clr/angular
Version:
Angular components for Clarity
96 lines (94 loc) • 9.9 kB
JavaScript
/*
* Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
import { isPlatformBrowser } from '@angular/common';
import { Component, ContentChild, ElementRef, Inject, Input, PLATFORM_ID } from '@angular/core';
import { ClrTimelineStepState } from './enums/timeline-step-state.enum';
import { ClrTimelineStepTitle } from './timeline-step-title';
import * as i0 from "@angular/core";
import * as i1 from "./providers/timeline-icon-attribute.service";
import * as i2 from "@angular/common";
import * as i3 from "../icon/icon";
import * as i4 from "../progress/spinner/spinner";
export class ClrTimelineStep {
constructor(iconAttributeService, platformId) {
this.iconAttributeService = iconAttributeService;
this.platformId = platformId;
this.state = ClrTimelineStepState.NOT_STARTED;
}
get iconAriaLabel() {
return this.iconAttributeService.getAriaLabel(this.state);
}
get iconShape() {
return this.iconAttributeService.getIconShape(this.state);
}
get iconStatus() {
return this.iconAttributeService.getIconStatus(this.state);
}
get isProcessing() {
return this.state === ClrTimelineStepState.PROCESSING;
}
ngAfterContentInit() {
if (this.stepTitle && isPlatformBrowser(this.platformId)) {
this.stepTitleText = this.stepTitle.nativeElement.innerText;
}
}
}
ClrTimelineStep.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrTimelineStep, deps: [{ token: i1.TimelineIconAttributeService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
ClrTimelineStep.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrTimelineStep, selector: "clr-timeline-step", inputs: { state: ["clrState", "state"] }, host: { properties: { "class.clr-timeline-step": "true" } }, queries: [{ propertyName: "stepTitle", first: true, predicate: ClrTimelineStepTitle, descendants: true, read: ElementRef }], ngImport: i0, template: `
<ng-content select="clr-timeline-step-header"></ng-content>
<span class="clr-sr-only">{{ stepTitleText }}</span>
<ng-container *ngIf="!isProcessing; else processing">
<cds-icon
[attr.status]="iconStatus"
[attr.shape]="iconShape"
[attr.aria-label]="iconAriaLabel"
role="img"
></cds-icon>
</ng-container>
<div class="clr-timeline-step-body">
<ng-content select="clr-timeline-step-title"></ng-content>
<ng-content select="clr-timeline-step-description"></ng-content>
</div>
<ng-template #processing>
<clr-spinner clrMedium [attr.aria-label]="iconAriaLabel"></clr-spinner>
</ng-template>
`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: i4.ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrTimelineStep, decorators: [{
type: Component,
args: [{
selector: 'clr-timeline-step',
template: `
<ng-content select="clr-timeline-step-header"></ng-content>
<span class="clr-sr-only">{{ stepTitleText }}</span>
<ng-container *ngIf="!isProcessing; else processing">
<cds-icon
[attr.status]="iconStatus"
[attr.shape]="iconShape"
[attr.aria-label]="iconAriaLabel"
role="img"
></cds-icon>
</ng-container>
<div class="clr-timeline-step-body">
<ng-content select="clr-timeline-step-title"></ng-content>
<ng-content select="clr-timeline-step-description"></ng-content>
</div>
<ng-template #processing>
<clr-spinner clrMedium [attr.aria-label]="iconAriaLabel"></clr-spinner>
</ng-template>
`,
host: { '[class.clr-timeline-step]': 'true' },
}]
}], ctorParameters: function () { return [{ type: i1.TimelineIconAttributeService }, { type: undefined, decorators: [{
type: Inject,
args: [PLATFORM_ID]
}] }]; }, propDecorators: { state: [{
type: Input,
args: ['clrState']
}], stepTitle: [{
type: ContentChild,
args: [ClrTimelineStepTitle, { read: ElementRef }]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGltZWxpbmUtc3RlcC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXIvc3JjL3RpbWVsaW5lL3RpbWVsaW5lLXN0ZXAudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7Ozs7R0FJRztBQUVILE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQ3BELE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLFVBQVUsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLFdBQVcsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUVoRyxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQztBQUV4RSxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQzs7Ozs7O0FBMEI3RCxNQUFNLE9BQU8sZUFBZTtJQU8xQixZQUNVLG9CQUFrRCxFQUM3QixVQUFlO1FBRHBDLHlCQUFvQixHQUFwQixvQkFBb0IsQ0FBOEI7UUFDN0IsZUFBVSxHQUFWLFVBQVUsQ0FBSztRQVIzQixVQUFLLEdBQXlCLG9CQUFvQixDQUFDLFdBQVcsQ0FBQztJQVMvRSxDQUFDO0lBRUosSUFBSSxhQUFhO1FBQ2YsT0FBTyxJQUFJLENBQUMsb0JBQW9CLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUM1RCxDQUFDO0lBRUQsSUFBSSxTQUFTO1FBQ1gsT0FBTyxJQUFJLENBQUMsb0JBQW9CLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUM1RCxDQUFDO0lBRUQsSUFBSSxVQUFVO1FBQ1osT0FBTyxJQUFJLENBQUMsb0JBQW9CLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUM3RCxDQUFDO0lBRUQsSUFBSSxZQUFZO1FBQ2QsT0FBTyxJQUFJLENBQUMsS0FBSyxLQUFLLG9CQUFvQixDQUFDLFVBQVUsQ0FBQztJQUN4RCxDQUFDO0lBRUQsa0JBQWtCO1FBQ2hCLElBQUksSUFBSSxDQUFDLFNBQVMsSUFBSSxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLEVBQUU7WUFDeEQsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUMsU0FBUyxDQUFDLGFBQWEsQ0FBQyxTQUFTLENBQUM7U0FDN0Q7SUFDSCxDQUFDOzs0R0FoQ1UsZUFBZSw4REFTaEIsV0FBVztnR0FUVixlQUFlLHVNQUdaLG9CQUFvQiwyQkFBVSxVQUFVLDZCQXpCNUM7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FtQlQ7MkZBR1UsZUFBZTtrQkF4QjNCLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLG1CQUFtQjtvQkFDN0IsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBbUJUO29CQUNELElBQUksRUFBRSxFQUFFLDJCQUEyQixFQUFFLE1BQU0sRUFBRTtpQkFDOUM7OzBCQVVJLE1BQU07MkJBQUMsV0FBVzs0Q0FSRixLQUFLO3NCQUF2QixLQUFLO3VCQUFDLFVBQVU7Z0JBRXlDLFNBQVM7c0JBQWxFLFlBQVk7dUJBQUMsb0JBQW9CLEVBQUUsRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIENvcHlyaWdodCAoYykgMjAxNi0yMDIzIFZNd2FyZSwgSW5jLiBBbGwgUmlnaHRzIFJlc2VydmVkLlxuICogVGhpcyBzb2Z0d2FyZSBpcyByZWxlYXNlZCB1bmRlciBNSVQgbGljZW5zZS5cbiAqIFRoZSBmdWxsIGxpY2Vuc2UgaW5mb3JtYXRpb24gY2FuIGJlIGZvdW5kIGluIExJQ0VOU0UgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgcHJvamVjdC5cbiAqL1xuXG5pbXBvcnQgeyBpc1BsYXRmb3JtQnJvd3NlciB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDb21wb25lbnQsIENvbnRlbnRDaGlsZCwgRWxlbWVudFJlZiwgSW5qZWN0LCBJbnB1dCwgUExBVEZPUk1fSUQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgQ2xyVGltZWxpbmVTdGVwU3RhdGUgfSBmcm9tICcuL2VudW1zL3RpbWVsaW5lLXN0ZXAtc3RhdGUuZW51bSc7XG5pbXBvcnQgeyBUaW1lbGluZUljb25BdHRyaWJ1dGVTZXJ2aWNlIH0gZnJvbSAnLi9wcm92aWRlcnMvdGltZWxpbmUtaWNvbi1hdHRyaWJ1dGUuc2VydmljZSc7XG5pbXBvcnQgeyBDbHJUaW1lbGluZVN0ZXBUaXRsZSB9IGZyb20gJy4vdGltZWxpbmUtc3RlcC10aXRsZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2Nsci10aW1lbGluZS1zdGVwJyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8bmctY29udGVudCBzZWxlY3Q9XCJjbHItdGltZWxpbmUtc3RlcC1oZWFkZXJcIj48L25nLWNvbnRlbnQ+XG4gICAgPHNwYW4gY2xhc3M9XCJjbHItc3Itb25seVwiPnt7IHN0ZXBUaXRsZVRleHQgfX08L3NwYW4+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cIiFpc1Byb2Nlc3Npbmc7IGVsc2UgcHJvY2Vzc2luZ1wiPlxuICAgICAgPGNkcy1pY29uXG4gICAgICAgIFthdHRyLnN0YXR1c109XCJpY29uU3RhdHVzXCJcbiAgICAgICAgW2F0dHIuc2hhcGVdPVwiaWNvblNoYXBlXCJcbiAgICAgICAgW2F0dHIuYXJpYS1sYWJlbF09XCJpY29uQXJpYUxhYmVsXCJcbiAgICAgICAgcm9sZT1cImltZ1wiXG4gICAgICA+PC9jZHMtaWNvbj5cbiAgICA8L25nLWNvbnRhaW5lcj5cbiAgICA8ZGl2IGNsYXNzPVwiY2xyLXRpbWVsaW5lLXN0ZXAtYm9keVwiPlxuICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiY2xyLXRpbWVsaW5lLXN0ZXAtdGl0bGVcIj48L25nLWNvbnRlbnQ+XG4gICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJjbHItdGltZWxpbmUtc3RlcC1kZXNjcmlwdGlvblwiPjwvbmctY29udGVudD5cbiAgICA8L2Rpdj5cblxuICAgIDxuZy10ZW1wbGF0ZSAjcHJvY2Vzc2luZz5cbiAgICAgIDxjbHItc3Bpbm5lciBjbHJNZWRpdW0gW2F0dHIuYXJpYS1sYWJlbF09XCJpY29uQXJpYUxhYmVsXCI+PC9jbHItc3Bpbm5lcj5cbiAgICA8L25nLXRlbXBsYXRlPlxuICBgLFxuICBob3N0OiB7ICdbY2xhc3MuY2xyLXRpbWVsaW5lLXN0ZXBdJzogJ3RydWUnIH0sXG59KVxuZXhwb3J0IGNsYXNzIENsclRpbWVsaW5lU3RlcCB7XG4gIEBJbnB1dCgnY2xyU3RhdGUnKSBzdGF0ZTogQ2xyVGltZWxpbmVTdGVwU3RhdGUgPSBDbHJUaW1lbGluZVN0ZXBTdGF0ZS5OT1RfU1RBUlRFRDtcblxuICBAQ29udGVudENoaWxkKENsclRpbWVsaW5lU3RlcFRpdGxlLCB7IHJlYWQ6IEVsZW1lbnRSZWYgfSkgc3RlcFRpdGxlOiBFbGVtZW50UmVmO1xuXG4gIHN0ZXBUaXRsZVRleHQ6IHN0cmluZztcblxuICBjb25zdHJ1Y3RvcihcbiAgICBwcml2YXRlIGljb25BdHRyaWJ1dGVTZXJ2aWNlOiBUaW1lbGluZUljb25BdHRyaWJ1dGVTZXJ2aWNlLFxuICAgIEBJbmplY3QoUExBVEZPUk1fSUQpIHByaXZhdGUgcGxhdGZvcm1JZDogYW55XG4gICkge31cblxuICBnZXQgaWNvbkFyaWFMYWJlbCgpOiBzdHJpbmcge1xuICAgIHJldHVybiB0aGlzLmljb25BdHRyaWJ1dGVTZXJ2aWNlLmdldEFyaWFMYWJlbCh0aGlzLnN0YXRlKTtcbiAgfVxuXG4gIGdldCBpY29uU2hhcGUoKTogc3RyaW5nIHtcbiAgICByZXR1cm4gdGhpcy5pY29uQXR0cmlidXRlU2VydmljZS5nZXRJY29uU2hhcGUodGhpcy5zdGF0ZSk7XG4gIH1cblxuICBnZXQgaWNvblN0YXR1cygpOiBzdHJpbmcge1xuICAgIHJldHVybiB0aGlzLmljb25BdHRyaWJ1dGVTZXJ2aWNlLmdldEljb25TdGF0dXModGhpcy5zdGF0ZSk7XG4gIH1cblxuICBnZXQgaXNQcm9jZXNzaW5nKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiB0aGlzLnN0YXRlID09PSBDbHJUaW1lbGluZVN0ZXBTdGF0ZS5QUk9DRVNTSU5HO1xuICB9XG5cbiAgbmdBZnRlckNvbnRlbnRJbml0KCkge1xuICAgIGlmICh0aGlzLnN0ZXBUaXRsZSAmJiBpc1BsYXRmb3JtQnJvd3Nlcih0aGlzLnBsYXRmb3JtSWQpKSB7XG4gICAgICB0aGlzLnN0ZXBUaXRsZVRleHQgPSB0aGlzLnN0ZXBUaXRsZS5uYXRpdmVFbGVtZW50LmlubmVyVGV4dDtcbiAgICB9XG4gIH1cbn1cbiJdfQ==