@clr/angular
Version:
Angular components for Clarity
128 lines • 13.1 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 { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "./providers/wizard-navigation.service";
import * as i2 from "./providers/page-collection.service";
import * as i3 from "../utils";
import * as i4 from "@angular/common";
import * as i5 from "../icon/icon";
export class ClrWizardStepnavItem {
constructor(navService, pageCollection, commonStrings) {
this.navService = navService;
this.pageCollection = pageCollection;
this.commonStrings = commonStrings;
}
get id() {
this.pageGuard();
return this.pageCollection.getStepItemIdForPage(this.page);
}
get stepAriaCurrent() {
return this.isCurrent && 'step';
}
get isDisabled() {
this.pageGuard();
return this.page.disabled || this.navService.wizardStopNavigation || this.navService.wizardDisableStepnav;
}
get isCurrent() {
this.pageGuard();
return this.page.current;
}
get isComplete() {
this.pageGuard();
return this.page.completed;
}
get hasError() {
this.pageGuard();
return this.page.hasError && this.isComplete;
}
get canNavigate() {
this.pageGuard();
return this.pageCollection.previousPageIsCompleted(this.page);
}
click() {
this.pageGuard();
// if we click on our own stepnav or a disabled stepnav, we don't want to do anything
if (this.isDisabled || this.isCurrent) {
return;
}
this.navService.goTo(this.page);
}
pageGuard() {
if (!this.page) {
throw new Error('Wizard stepnav item is not associated with a wizard page.');
}
}
}
ClrWizardStepnavItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrWizardStepnavItem, deps: [{ token: i1.WizardNavigationService }, { token: i2.PageCollectionService }, { token: i3.ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component });
ClrWizardStepnavItem.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrWizardStepnavItem, selector: "[clr-wizard-stepnav-item]", inputs: { page: "page" }, host: { properties: { "id": "id", "attr.aria-current": "stepAriaCurrent", "attr.aria-controls": "page.id", "class.clr-nav-link": "true", "class.nav-item": "true", "class.active": "isCurrent", "class.disabled": "isDisabled", "class.no-click": "!canNavigate", "class.complete": "isComplete", "class.error": "hasError" } }, ngImport: i0, template: `
<button
type="button"
class="btn btn-link clr-wizard-stepnav-link"
(click)="click()"
[attr.disabled]="isDisabled ? '' : null"
>
<span class="clr-wizard-stepnav-link-suffix">
<cds-icon
shape="error-standard"
status="danger"
class="clr-wizard-stepnav-item-error-icon"
*ngIf="hasError"
></cds-icon>
<ng-content *ngIf="!hasError"></ng-content>
</span>
<span class="clr-wizard-stepnav-link-title">
<ng-template [ngTemplateOutlet]="page.navTitle"></ng-template>
</span>
<span *ngIf="hasError" class="clr-sr-only">{{ commonStrings.keys.wizardStepError }}</span>
<span *ngIf="!hasError && isComplete" class="clr-sr-only">{{ commonStrings.keys.wizardStepSuccess }}</span>
</button>
`, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.CdsIconCustomTag, selector: "cds-icon" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrWizardStepnavItem, decorators: [{
type: Component,
args: [{
selector: '[clr-wizard-stepnav-item]',
template: `
<button
type="button"
class="btn btn-link clr-wizard-stepnav-link"
(click)="click()"
[attr.disabled]="isDisabled ? '' : null"
>
<span class="clr-wizard-stepnav-link-suffix">
<cds-icon
shape="error-standard"
status="danger"
class="clr-wizard-stepnav-item-error-icon"
*ngIf="hasError"
></cds-icon>
<ng-content *ngIf="!hasError"></ng-content>
</span>
<span class="clr-wizard-stepnav-link-title">
<ng-template [ngTemplateOutlet]="page.navTitle"></ng-template>
</span>
<span *ngIf="hasError" class="clr-sr-only">{{ commonStrings.keys.wizardStepError }}</span>
<span *ngIf="!hasError && isComplete" class="clr-sr-only">{{ commonStrings.keys.wizardStepSuccess }}</span>
</button>
`,
host: {
'[id]': 'id',
'[attr.aria-current]': 'stepAriaCurrent',
'[attr.aria-controls]': 'page.id',
'[class.clr-nav-link]': 'true',
'[class.nav-item]': 'true',
'[class.active]': 'isCurrent',
'[class.disabled]': 'isDisabled',
'[class.no-click]': '!canNavigate',
'[class.complete]': 'isComplete',
'[class.error]': 'hasError',
},
}]
}], ctorParameters: function () { return [{ type: i1.WizardNavigationService }, { type: i2.PageCollectionService }, { type: i3.ClrCommonStringsService }]; }, propDecorators: { page: [{
type: Input,
args: ['page']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid2l6YXJkLXN0ZXBuYXYtaXRlbS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXIvc3JjL3dpemFyZC93aXphcmQtc3RlcG5hdi1pdGVtLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOzs7O0dBSUc7QUFFSCxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQzs7Ozs7OztBQTZDakQsTUFBTSxPQUFPLG9CQUFvQjtJQUcvQixZQUNTLFVBQW1DLEVBQ25DLGNBQXFDLEVBQ3JDLGFBQXNDO1FBRnRDLGVBQVUsR0FBVixVQUFVLENBQXlCO1FBQ25DLG1CQUFjLEdBQWQsY0FBYyxDQUF1QjtRQUNyQyxrQkFBYSxHQUFiLGFBQWEsQ0FBeUI7SUFDNUMsQ0FBQztJQUVKLElBQUksRUFBRTtRQUNKLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztRQUNqQixPQUFPLElBQUksQ0FBQyxjQUFjLENBQUMsb0JBQW9CLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQzdELENBQUM7SUFFRCxJQUFJLGVBQWU7UUFDakIsT0FBTyxJQUFJLENBQUMsU0FBUyxJQUFJLE1BQU0sQ0FBQztJQUNsQyxDQUFDO0lBRUQsSUFBSSxVQUFVO1FBQ1osSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO1FBQ2pCLE9BQU8sSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLElBQUksSUFBSSxDQUFDLFVBQVUsQ0FBQyxvQkFBb0IsSUFBSSxJQUFJLENBQUMsVUFBVSxDQUFDLG9CQUFvQixDQUFDO0lBQzVHLENBQUM7SUFFRCxJQUFJLFNBQVM7UUFDWCxJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7UUFDakIsT0FBTyxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQztJQUMzQixDQUFDO0lBRUQsSUFBSSxVQUFVO1FBQ1osSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO1FBQ2pCLE9BQU8sSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUM7SUFDN0IsQ0FBQztJQUVELElBQUksUUFBUTtRQUNWLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztRQUNqQixPQUFPLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxJQUFJLElBQUksQ0FBQyxVQUFVLENBQUM7SUFDL0MsQ0FBQztJQUVELElBQUksV0FBVztRQUNiLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztRQUNqQixPQUFPLElBQUksQ0FBQyxjQUFjLENBQUMsdUJBQXVCLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQ2hFLENBQUM7SUFFRCxLQUFLO1FBQ0gsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO1FBRWpCLHFGQUFxRjtRQUNyRixJQUFJLElBQUksQ0FBQyxVQUFVLElBQUksSUFBSSxDQUFDLFNBQVMsRUFBRTtZQUNyQyxPQUFPO1NBQ1I7UUFFRCxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDbEMsQ0FBQztJQUVPLFNBQVM7UUFDZixJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksRUFBRTtZQUNkLE1BQU0sSUFBSSxLQUFLLENBQUMsMkRBQTJELENBQUMsQ0FBQztTQUM5RTtJQUNILENBQUM7O2lIQTFEVSxvQkFBb0I7cUdBQXBCLG9CQUFvQiw0WkFwQ3JCOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBc0JUOzJGQWNVLG9CQUFvQjtrQkF0Q2hDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLDJCQUEyQjtvQkFDckMsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBc0JUO29CQUNELElBQUksRUFBRTt3QkFDSixNQUFNLEVBQUUsSUFBSTt3QkFDWixxQkFBcUIsRUFBRSxpQkFBaUI7d0JBQ3hDLHNCQUFzQixFQUFFLFNBQVM7d0JBQ2pDLHNCQUFzQixFQUFFLE1BQU07d0JBQzlCLGtCQUFrQixFQUFFLE1BQU07d0JBQzFCLGdCQUFnQixFQUFFLFdBQVc7d0JBQzdCLGtCQUFrQixFQUFFLFlBQVk7d0JBQ2hDLGtCQUFrQixFQUFFLGNBQWM7d0JBQ2xDLGtCQUFrQixFQUFFLFlBQVk7d0JBQ2hDLGVBQWUsRUFBRSxVQUFVO3FCQUM1QjtpQkFDRjt3TEFFZ0IsSUFBSTtzQkFBbEIsS0FBSzt1QkFBQyxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIENvcHlyaWdodCAoYykgMjAxNi0yMDIzIFZNd2FyZSwgSW5jLiBBbGwgUmlnaHRzIFJlc2VydmVkLlxuICogVGhpcyBzb2Z0d2FyZSBpcyByZWxlYXNlZCB1bmRlciBNSVQgbGljZW5zZS5cbiAqIFRoZSBmdWxsIGxpY2Vuc2UgaW5mb3JtYXRpb24gY2FuIGJlIGZvdW5kIGluIExJQ0VOU0UgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgcHJvamVjdC5cbiAqL1xuXG5pbXBvcnQgeyBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IENsckNvbW1vblN0cmluZ3NTZXJ2aWNlIH0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHsgUGFnZUNvbGxlY3Rpb25TZXJ2aWNlIH0gZnJvbSAnLi9wcm92aWRlcnMvcGFnZS1jb2xsZWN0aW9uLnNlcnZpY2UnO1xuaW1wb3J0IHsgV2l6YXJkTmF2aWdhdGlvblNlcnZpY2UgfSBmcm9tICcuL3Byb3ZpZGVycy93aXphcmQtbmF2aWdhdGlvbi5zZXJ2aWNlJztcbmltcG9ydCB7IENscldpemFyZFBhZ2UgfSBmcm9tICcuL3dpemFyZC1wYWdlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnW2Nsci13aXphcmQtc3RlcG5hdi1pdGVtXScsXG4gIHRlbXBsYXRlOiBgXG4gICAgPGJ1dHRvblxuICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICBjbGFzcz1cImJ0biBidG4tbGluayBjbHItd2l6YXJkLXN0ZXBuYXYtbGlua1wiXG4gICAgICAoY2xpY2spPVwiY2xpY2soKVwiXG4gICAgICBbYXR0ci5kaXNhYmxlZF09XCJpc0Rpc2FibGVkID8gJycgOiBudWxsXCJcbiAgICA+XG4gICAgICA8c3BhbiBjbGFzcz1cImNsci13aXphcmQtc3RlcG5hdi1saW5rLXN1ZmZpeFwiPlxuICAgICAgICA8Y2RzLWljb25cbiAgICAgICAgICBzaGFwZT1cImVycm9yLXN0YW5kYXJkXCJcbiAgICAgICAgICBzdGF0dXM9XCJkYW5nZXJcIlxuICAgICAgICAgIGNsYXNzPVwiY2xyLXdpemFyZC1zdGVwbmF2LWl0ZW0tZXJyb3ItaWNvblwiXG4gICAgICAgICAgKm5nSWY9XCJoYXNFcnJvclwiXG4gICAgICAgID48L2Nkcy1pY29uPlxuICAgICAgICA8bmctY29udGVudCAqbmdJZj1cIiFoYXNFcnJvclwiPjwvbmctY29udGVudD5cbiAgICAgIDwvc3Bhbj5cbiAgICAgIDxzcGFuIGNsYXNzPVwiY2xyLXdpemFyZC1zdGVwbmF2LWxpbmstdGl0bGVcIj5cbiAgICAgICAgPG5nLXRlbXBsYXRlIFtuZ1RlbXBsYXRlT3V0bGV0XT1cInBhZ2UubmF2VGl0bGVcIj48L25nLXRlbXBsYXRlPlxuICAgICAgPC9zcGFuPlxuICAgICAgPHNwYW4gKm5nSWY9XCJoYXNFcnJvclwiIGNsYXNzPVwiY2xyLXNyLW9ubHlcIj57eyBjb21tb25TdHJpbmdzLmtleXMud2l6YXJkU3RlcEVycm9yIH19PC9zcGFuPlxuICAgICAgPHNwYW4gKm5nSWY9XCIhaGFzRXJyb3IgJiYgaXNDb21wbGV0ZVwiIGNsYXNzPVwiY2xyLXNyLW9ubHlcIj57eyBjb21tb25TdHJpbmdzLmtleXMud2l6YXJkU3RlcFN1Y2Nlc3MgfX08L3NwYW4+XG4gICAgPC9idXR0b24+XG4gIGAsXG4gIGhvc3Q6IHtcbiAgICAnW2lkXSc6ICdpZCcsXG4gICAgJ1thdHRyLmFyaWEtY3VycmVudF0nOiAnc3RlcEFyaWFDdXJyZW50JyxcbiAgICAnW2F0dHIuYXJpYS1jb250cm9sc10nOiAncGFnZS5pZCcsXG4gICAgJ1tjbGFzcy5jbHItbmF2LWxpbmtdJzogJ3RydWUnLFxuICAgICdbY2xhc3MubmF2LWl0ZW1dJzogJ3RydWUnLFxuICAgICdbY2xhc3MuYWN0aXZlXSc6ICdpc0N1cnJlbnQnLFxuICAgICdbY2xhc3MuZGlzYWJsZWRdJzogJ2lzRGlzYWJsZWQnLFxuICAgICdbY2xhc3Mubm8tY2xpY2tdJzogJyFjYW5OYXZpZ2F0ZScsXG4gICAgJ1tjbGFzcy5jb21wbGV0ZV0nOiAnaXNDb21wbGV0ZScsXG4gICAgJ1tjbGFzcy5lcnJvcl0nOiAnaGFzRXJyb3InLFxuICB9LFxufSlcbmV4cG9ydCBjbGFzcyBDbHJXaXphcmRTdGVwbmF2SXRlbSB7XG4gIEBJbnB1dCgncGFnZScpIHBhZ2U6IENscldpemFyZFBhZ2U7XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHVibGljIG5hdlNlcnZpY2U6IFdpemFyZE5hdmlnYXRpb25TZXJ2aWNlLFxuICAgIHB1YmxpYyBwYWdlQ29sbGVjdGlvbjogUGFnZUNvbGxlY3Rpb25TZXJ2aWNlLFxuICAgIHB1YmxpYyBjb21tb25TdHJpbmdzOiBDbHJDb21tb25TdHJpbmdzU2VydmljZVxuICApIHt9XG5cbiAgZ2V0IGlkKCk6IHN0cmluZyB7XG4gICAgdGhpcy5wYWdlR3VhcmQoKTtcbiAgICByZXR1cm4gdGhpcy5wYWdlQ29sbGVjdGlvbi5nZXRTdGVwSXRlbUlkRm9yUGFnZSh0aGlzLnBhZ2UpO1xuICB9XG5cbiAgZ2V0IHN0ZXBBcmlhQ3VycmVudCgpOiBzdHJpbmcge1xuICAgIHJldHVybiB0aGlzLmlzQ3VycmVudCAmJiAnc3RlcCc7XG4gIH1cblxuICBnZXQgaXNEaXNhYmxlZCgpOiBib29sZWFuIHtcbiAgICB0aGlzLnBhZ2VHdWFyZCgpO1xuICAgIHJldHVybiB0aGlzLnBhZ2UuZGlzYWJsZWQgfHwgdGhpcy5uYXZTZXJ2aWNlLndpemFyZFN0b3BOYXZpZ2F0aW9uIHx8IHRoaXMubmF2U2VydmljZS53aXphcmREaXNhYmxlU3RlcG5hdjtcbiAgfVxuXG4gIGdldCBpc0N1cnJlbnQoKTogYm9vbGVhbiB7XG4gICAgdGhpcy5wYWdlR3VhcmQoKTtcbiAgICByZXR1cm4gdGhpcy5wYWdlLmN1cnJlbnQ7XG4gIH1cblxuICBnZXQgaXNDb21wbGV0ZSgpOiBib29sZWFuIHtcbiAgICB0aGlzLnBhZ2VHdWFyZCgpO1xuICAgIHJldHVybiB0aGlzLnBhZ2UuY29tcGxldGVkO1xuICB9XG5cbiAgZ2V0IGhhc0Vycm9yKCk6IGJvb2xlYW4ge1xuICAgIHRoaXMucGFnZUd1YXJkKCk7XG4gICAgcmV0dXJuIHRoaXMucGFnZS5oYXNFcnJvciAmJiB0aGlzLmlzQ29tcGxldGU7XG4gIH1cblxuICBnZXQgY2FuTmF2aWdhdGUoKTogYm9vbGVhbiB7XG4gICAgdGhpcy5wYWdlR3VhcmQoKTtcbiAgICByZXR1cm4gdGhpcy5wYWdlQ29sbGVjdGlvbi5wcmV2aW91c1BhZ2VJc0NvbXBsZXRlZCh0aGlzLnBhZ2UpO1xuICB9XG5cbiAgY2xpY2soKTogdm9pZCB7XG4gICAgdGhpcy5wYWdlR3VhcmQoKTtcblxuICAgIC8vIGlmIHdlIGNsaWNrIG9uIG91ciBvd24gc3RlcG5hdiBvciBhIGRpc2FibGVkIHN0ZXBuYXYsIHdlIGRvbid0IHdhbnQgdG8gZG8gYW55dGhpbmdcbiAgICBpZiAodGhpcy5pc0Rpc2FibGVkIHx8IHRoaXMuaXNDdXJyZW50KSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgdGhpcy5uYXZTZXJ2aWNlLmdvVG8odGhpcy5wYWdlKTtcbiAgfVxuXG4gIHByaXZhdGUgcGFnZUd1YXJkKCk6IHZvaWQge1xuICAgIGlmICghdGhpcy5wYWdlKSB7XG4gICAgICB0aHJvdyBuZXcgRXJyb3IoJ1dpemFyZCBzdGVwbmF2IGl0ZW0gaXMgbm90IGFzc29jaWF0ZWQgd2l0aCBhIHdpemFyZCBwYWdlLicpO1xuICAgIH1cbiAgfVxufVxuIl19