@ux-aspects/ux-aspects
Version:
Open source user interface framework for building modern, responsive, mobile big data applications
82 lines • 10.7 kB
JavaScript
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, inject, Input, Output } from '@angular/core';
import { WizardService } from './wizard.service';
import * as i0 from "@angular/core";
export class WizardStepComponent {
constructor() {
this._wizardService = inject(WizardService);
this._changeDetector = inject(ChangeDetectorRef);
/**
* Defines whether a step is valid. The user will not be able to proceed to the next step if this property has a value of false.
* If the new value is false is will also set the visited value to false.
*/
this._valid = true;
/**
* Defines whether or not this step has previously been visited.
* A visited step can be clicked on and jumped to at any time.
* By default, steps will become 'visited' when the user navigates to a step for the first time.
*/
this.visited = false;
/** Emits when visited changes. */
this.visitedChange = new EventEmitter();
/**
* Defines the currently visible step.
*/
this._active = false;
}
set valid(value) {
this.setValid(value);
}
get valid() {
return this._valid;
}
set active(value) {
const active = coerceBooleanProperty(value);
// store the active state of the step
this._active = active;
// if the value is true then the step should also be marked as visited
if (active && !this.visited) {
this.setVisitedAndEmitChangeEvent(true);
}
// mark for change detection
this._changeDetector.markForCheck();
}
get active() {
return this._active;
}
setVisitedAndEmitChangeEvent(value) {
if (value === this.visited) {
return;
}
this.visited = value;
this.visitedChange.emit(value);
}
setValid(value) {
if (this._valid === value) {
return;
}
this._valid = value;
this._wizardService.validChange$.next({ step: this, valid: value });
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: WizardStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: WizardStepComponent, selector: "ux-wizard-step", inputs: { header: "header", disableNextWhenInvalid: "disableNextWhenInvalid", valid: "valid", validator: "validator", visited: "visited" }, outputs: { visitedChange: "visitedChange" }, host: { attributes: { "role": "tabpanel" } }, ngImport: i0, template: "@if (active) {\n <ng-content></ng-content>\n}", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: WizardStepComponent, decorators: [{
type: Component,
args: [{ selector: 'ux-wizard-step', changeDetection: ChangeDetectionStrategy.OnPush, host: {
'role': 'tabpanel'
}, template: "@if (active) {\n <ng-content></ng-content>\n}" }]
}], propDecorators: { header: [{
type: Input
}], disableNextWhenInvalid: [{
type: Input
}], valid: [{
type: Input
}], validator: [{
type: Input
}], visited: [{
type: Input
}], visitedChange: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid2l6YXJkLXN0ZXAuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvd2l6YXJkL3dpemFyZC1zdGVwLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3dpemFyZC93aXphcmQtc3RlcC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQztBQUM5RCxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsaUJBQWlCLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMzSCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0JBQWtCLENBQUM7O0FBV2pELE1BQU0sT0FBTyxtQkFBbUI7SUFSaEM7UUFTcUIsbUJBQWMsR0FBRyxNQUFNLENBQXFDLGFBQWEsQ0FBQyxDQUFDO1FBRTNFLG9CQUFlLEdBQUcsTUFBTSxDQUFDLGlCQUFpQixDQUFDLENBQUM7UUFXN0Q7OztXQUdHO1FBQ0gsV0FBTSxHQUFZLElBQUksQ0FBQztRQWtCdkI7Ozs7V0FJRztRQUNNLFlBQU8sR0FBWSxLQUFLLENBQUM7UUFFbEMsa0NBQWtDO1FBQ3hCLGtCQUFhLEdBQUcsSUFBSSxZQUFZLEVBQVcsQ0FBQztRQXNCdEQ7O1dBRUc7UUFDSCxZQUFPLEdBQVksS0FBSyxDQUFDO0tBbUI1QjtJQXBFRyxJQUNJLEtBQUssQ0FBQyxLQUFjO1FBQ3BCLElBQUksQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDekIsQ0FBQztJQUVELElBQUksS0FBSztRQUNMLE9BQU8sSUFBSSxDQUFDLE1BQU0sQ0FBQztJQUN2QixDQUFDO0lBbUJELElBQUksTUFBTSxDQUFDLEtBQWM7UUFFckIsTUFBTSxNQUFNLEdBQUcscUJBQXFCLENBQUMsS0FBSyxDQUFDLENBQUM7UUFFNUMscUNBQXFDO1FBQ3JDLElBQUksQ0FBQyxPQUFPLEdBQUcsTUFBTSxDQUFDO1FBRXRCLHNFQUFzRTtRQUN0RSxJQUFJLE1BQU0sSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQztZQUMxQixJQUFJLENBQUMsNEJBQTRCLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDNUMsQ0FBQztRQUVELDRCQUE0QjtRQUM1QixJQUFJLENBQUMsZUFBZSxDQUFDLFlBQVksRUFBRSxDQUFDO0lBQ3hDLENBQUM7SUFFRCxJQUFJLE1BQU07UUFDTixPQUFPLElBQUksQ0FBQyxPQUFPLENBQUM7SUFDeEIsQ0FBQztJQU9ELDRCQUE0QixDQUFDLEtBQWM7UUFDdkMsSUFBSSxLQUFLLEtBQUssSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDO1lBQ3pCLE9BQU87UUFDWCxDQUFDO1FBRUQsSUFBSSxDQUFDLE9BQU8sR0FBRyxLQUFLLENBQUM7UUFDckIsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDbkMsQ0FBQztJQUVTLFFBQVEsQ0FBQyxLQUFjO1FBQzdCLElBQUksSUFBSSxDQUFDLE1BQU0sS0FBSyxLQUFLLEVBQUUsQ0FBQztZQUN4QixPQUFPO1FBQ1gsQ0FBQztRQUVELElBQUksQ0FBQyxNQUFNLEdBQUcsS0FBSyxDQUFDO1FBQ3BCLElBQUksQ0FBQyxjQUFjLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxFQUFFLElBQUksRUFBRSxJQUFJLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBRSxDQUFDLENBQUM7SUFDeEUsQ0FBQzsrR0F2RlEsbUJBQW1CO21HQUFuQixtQkFBbUIsNlJDYmhDLGdEQUVDOzs0RkRXWSxtQkFBbUI7a0JBUi9CLFNBQVM7K0JBQ0ksZ0JBQWdCLG1CQUVULHVCQUF1QixDQUFDLE1BQU0sUUFDekM7d0JBQ0YsTUFBTSxFQUFFLFVBQVU7cUJBQ3JCOzhCQVFRLE1BQU07c0JBQWQsS0FBSztnQkFNRyxzQkFBc0I7c0JBQTlCLEtBQUs7Z0JBU0YsS0FBSztzQkFEUixLQUFLO2dCQWNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBT0csT0FBTztzQkFBZixLQUFLO2dCQUdJLGFBQWE7c0JBQXRCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjb2VyY2VCb29sZWFuUHJvcGVydHkgfSBmcm9tICdAYW5ndWxhci9jZGsvY29lcmNpb24nO1xuaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENoYW5nZURldGVjdG9yUmVmLCBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgaW5qZWN0LCBJbnB1dCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBXaXphcmRTZXJ2aWNlIH0gZnJvbSAnLi93aXphcmQuc2VydmljZSc7XG5cblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICd1eC13aXphcmQtc3RlcCcsXG4gICAgdGVtcGxhdGVVcmw6ICcuL3dpemFyZC1zdGVwLmNvbXBvbmVudC5odG1sJyxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBob3N0OiB7XG4gICAgICAgICdyb2xlJzogJ3RhYnBhbmVsJ1xuICAgIH1cbn0pXG5leHBvcnQgY2xhc3MgV2l6YXJkU3RlcENvbXBvbmVudCB7XG4gICAgcHJpdmF0ZSByZWFkb25seSBfd2l6YXJkU2VydmljZSA9IGluamVjdDxXaXphcmRTZXJ2aWNlPFdpemFyZFN0ZXBDb21wb25lbnQ+PihXaXphcmRTZXJ2aWNlKTtcblxuICAgIHByaXZhdGUgcmVhZG9ubHkgX2NoYW5nZURldGVjdG9yID0gaW5qZWN0KENoYW5nZURldGVjdG9yUmVmKTtcblxuICAgIC8qKiBUaGUgdGV4dCB0byBiZSBkaXNwbGF5ZWQgaW4gdGhlIHdpemFyZCBzdGVwIHRhYi4gKi9cbiAgICBASW5wdXQoKSBoZWFkZXI6IHN0cmluZztcblxuICAgIC8qKlxuICAgICAqIElmIHNldCB0byBgdHJ1ZWAgdGhlICdOZXh0JyBvciAnRmluaXNoJyBidXR0b24gd2lsbCBiZWNvbWUgZGlzYWJsZWQgd2hlbiB0aGUgY3VycmVudCBzdGVwIGlzIGludmFsaWQuXG4gICAgICogVGhpcyB3aWxsIG92ZXJyaWRlIHRoZSB2YWx1ZSBzZXQgb24gdGhlIGB1eC13aXphcmRgLlxuICAgICAqL1xuICAgIEBJbnB1dCgpIGRpc2FibGVOZXh0V2hlbkludmFsaWQ6IGJvb2xlYW4gfCB1bmRlZmluZWQ7XG5cbiAgICAvKipcbiAgICAgKiBEZWZpbmVzIHdoZXRoZXIgYSBzdGVwIGlzIHZhbGlkLiBUaGUgdXNlciB3aWxsIG5vdCBiZSBhYmxlIHRvIHByb2NlZWQgdG8gdGhlIG5leHQgc3RlcCBpZiB0aGlzIHByb3BlcnR5IGhhcyBhIHZhbHVlIG9mIGZhbHNlLlxuICAgICAqIElmIHRoZSBuZXcgdmFsdWUgaXMgZmFsc2UgaXMgd2lsbCBhbHNvIHNldCB0aGUgdmlzaXRlZCB2YWx1ZSB0byBmYWxzZS5cbiAgICAgKi9cbiAgICBfdmFsaWQ6IGJvb2xlYW4gPSB0cnVlO1xuXG4gICAgQElucHV0KClcbiAgICBzZXQgdmFsaWQodmFsdWU6IGJvb2xlYW4pIHtcbiAgICAgICAgdGhpcy5zZXRWYWxpZCh2YWx1ZSk7XG4gICAgfVxuXG4gICAgZ2V0IHZhbGlkKCk6IGJvb2xlYW4ge1xuICAgICAgICByZXR1cm4gdGhpcy5fdmFsaWQ7XG4gICAgfVxuXG4gICAgLyoqXG4gICAgICogQSBjdXN0b20gZnVuY3Rpb24gd2hpY2ggcmV0dXJucyB0aGUgdmFsaWRhdGlvbiBzdGF0dXMgZm9yIHRoZSBzdGVwLiBUaGlzIGZ1bmN0aW9uIHdpbGwgYmUgY2FsbGVkIHdoZW4gJ05leHQnIG9yXG4gICAgICogJ0ZpbmlzaCcgaXMgY2xpY2tlZC4gQSBwcm9taXNlIG1heSBiZSByZXR1cm5lZCBpZiBhc3luY2hyb25vdXMgdmFsaWRhdGlvbiBpcyByZXF1aXJlZC4gSWYgdXNpbmcgdGhpcyBwcm9wZXJ0eSxcbiAgICAgKiBlbnN1cmUgdGhhdCBgZGlzYWJsZU5leHRXaGVuSW52YWxpZGAgaXMgZmFsc2UuXG4gICAgICovXG4gICAgQElucHV0KCkgdmFsaWRhdG9yOiAoKSA9PiBib29sZWFuIHwgUHJvbWlzZTxib29sZWFuPjtcblxuICAgIC8qKlxuICAgICAqIERlZmluZXMgd2hldGhlciBvciBub3QgdGhpcyBzdGVwIGhhcyBwcmV2aW91c2x5IGJlZW4gdmlzaXRlZC5cbiAgICAgKiBBIHZpc2l0ZWQgc3RlcCBjYW4gYmUgY2xpY2tlZCBvbiBhbmQganVtcGVkIHRvIGF0IGFueSB0aW1lLlxuICAgICAqIEJ5IGRlZmF1bHQsIHN0ZXBzIHdpbGwgYmVjb21lICd2aXNpdGVkJyB3aGVuIHRoZSB1c2VyIG5hdmlnYXRlcyB0byBhIHN0ZXAgZm9yIHRoZSBmaXJzdCB0aW1lLlxuICAgICAqL1xuICAgIEBJbnB1dCgpIHZpc2l0ZWQ6IGJvb2xlYW4gPSBmYWxzZTtcblxuICAgIC8qKiBFbWl0cyB3aGVuIHZpc2l0ZWQgY2hhbmdlcy4gKi9cbiAgICBAT3V0cHV0KCkgdmlzaXRlZENoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4oKTtcblxuICAgIHNldCBhY3RpdmUodmFsdWU6IGJvb2xlYW4pIHtcblxuICAgICAgICBjb25zdCBhY3RpdmUgPSBjb2VyY2VCb29sZWFuUHJvcGVydHkodmFsdWUpO1xuXG4gICAgICAgIC8vIHN0b3JlIHRoZSBhY3RpdmUgc3RhdGUgb2YgdGhlIHN0ZXBcbiAgICAgICAgdGhpcy5fYWN0aXZlID0gYWN0aXZlO1xuXG4gICAgICAgIC8vIGlmIHRoZSB2YWx1ZSBpcyB0cnVlIHRoZW4gdGhlIHN0ZXAgc2hvdWxkIGFsc28gYmUgbWFya2VkIGFzIHZpc2l0ZWRcbiAgICAgICAgaWYgKGFjdGl2ZSAmJiAhdGhpcy52aXNpdGVkKSB7XG4gICAgICAgICAgICB0aGlzLnNldFZpc2l0ZWRBbmRFbWl0Q2hhbmdlRXZlbnQodHJ1ZSk7XG4gICAgICAgIH1cblxuICAgICAgICAvLyBtYXJrIGZvciBjaGFuZ2UgZGV0ZWN0aW9uXG4gICAgICAgIHRoaXMuX2NoYW5nZURldGVjdG9yLm1hcmtGb3JDaGVjaygpO1xuICAgIH1cblxuICAgIGdldCBhY3RpdmUoKTogYm9vbGVhbiB7XG4gICAgICAgIHJldHVybiB0aGlzLl9hY3RpdmU7XG4gICAgfVxuXG4gICAgLyoqXG4gICAgICogRGVmaW5lcyB0aGUgY3VycmVudGx5IHZpc2libGUgc3RlcC5cbiAgICAgKi9cbiAgICBfYWN0aXZlOiBib29sZWFuID0gZmFsc2U7XG5cbiAgICBzZXRWaXNpdGVkQW5kRW1pdENoYW5nZUV2ZW50KHZhbHVlOiBib29sZWFuKTogdm9pZCB7XG4gICAgICAgIGlmICh2YWx1ZSA9PT0gdGhpcy52aXNpdGVkKSB7XG4gICAgICAgICAgICByZXR1cm47XG4gICAgICAgIH1cblxuICAgICAgICB0aGlzLnZpc2l0ZWQgPSB2YWx1ZTtcbiAgICAgICAgdGhpcy52aXNpdGVkQ2hhbmdlLmVtaXQodmFsdWUpO1xuICAgIH1cblxuICAgIHByb3RlY3RlZCBzZXRWYWxpZCh2YWx1ZTogYm9vbGVhbik6IHZvaWQge1xuICAgICAgICBpZiAodGhpcy5fdmFsaWQgPT09IHZhbHVlKSB7XG4gICAgICAgICAgICByZXR1cm47XG4gICAgICAgIH1cblxuICAgICAgICB0aGlzLl92YWxpZCA9IHZhbHVlO1xuICAgICAgICB0aGlzLl93aXphcmRTZXJ2aWNlLnZhbGlkQ2hhbmdlJC5uZXh0KHsgc3RlcDogdGhpcywgdmFsaWQ6IHZhbHVlIH0pO1xuICAgIH1cbn1cbiIsIkBpZiAoYWN0aXZlKSB7XG4gIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbn0iXX0=