@kushki/ng-suka
Version:
<p align="center"> <h1 align="center">Suka Components Angular</h1> <p align="center"> An Angular implementation of the Suka Design System </p> </p>
145 lines • 10.3 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Input, HostBinding, Output, EventEmitter } from '@angular/core';
export class Progress {
constructor() {
this.baseClass = true;
this.linear = false;
this.editable = false;
this.selected = new EventEmitter();
this.stepsChange = new EventEmitter();
}
/**
* @return {?}
*/
get steps() {
return this._steps;
}
/**
* @param {?} value
* @return {?}
*/
set steps(value) {
this._steps = value;
this.stepsChange.emit(this._steps);
}
/**
* @param {?} newIndex
* @return {?}
*/
select(newIndex) {
this._steps.forEach((/**
* @param {?} step
* @param {?} index
* @return {?}
*/
(step, index) => {
if (index === newIndex) {
step.current = true;
}
else if (step.current) {
delete step.current;
}
}));
this.selected.emit(newIndex);
this.steps = this._steps;
}
/**
* @param {?} step
* @return {?}
*/
isComplete(step) {
return step.state === 'complete';
}
/**
* @param {?} step
* @return {?}
*/
isEditable(step) {
return step.state === 'complete' && this.editable;
}
/**
* @param {?} step
* @param {?} index
* @return {?}
*/
isUnclickable(step, index) {
if (step.state === 'complete' && !this.editable) {
return true;
}
if (step.state === 'incomplete' && !this.linear && index !== this.getNextStep()) {
return true;
}
return false;
}
/**
* @return {?}
*/
getNextStep() {
for (const [index, step] of this.steps.entries()) {
if (step.state === 'incomplete') {
return index;
}
}
return -1;
}
}
Progress.decorators = [
{ type: Component, args: [{
selector: 'suka-progress',
template: `
<div class="progress__wrapper">
<ul class="progress-bar">
<li
*ngFor="let step of steps; let i = index"
class="progress-bar__step"
[ngClass]="{
'progress-bar__step--complete': isComplete(step),
'progress-bar__step--editable': isEditable(step),
'progress-bar__step--error': step.state === 'error',
'progress-bar__step--current': step.current,
'progress-bar__step--unclickable': isUnclickable(step, i)
}"
>
<div class="step" role="button" (click)="select(i)">
<div class="step__indicator">
<ng-container *ngIf="step.state !== 'complete' || step.current">{{ i + 1 }}</ng-container>
<suka-icon icon="check" *ngIf="isComplete(step) && !isEditable(step) && !step.current"></suka-icon>
<suka-icon icon="edit-2" *ngIf="isEditable(step) && !step.current"></suka-icon>
</div>
<span class="step__label"> {{ step.label }}</span>
</div>
</li>
</ul>
</div>
`
}] }
];
Progress.propDecorators = {
baseClass: [{ type: HostBinding, args: ['class.progress',] }],
linear: [{ type: Input }],
editable: [{ type: Input }],
selected: [{ type: Output }],
stepsChange: [{ type: Output }],
steps: [{ type: Input }]
};
if (false) {
/**
* @type {?}
* @private
*/
Progress.prototype._steps;
/** @type {?} */
Progress.prototype.baseClass;
/** @type {?} */
Progress.prototype.linear;
/** @type {?} */
Progress.prototype.editable;
/** @type {?} */
Progress.prototype.selected;
/** @type {?} */
Progress.prototype.stepsChange;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZ3Jlc3MuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGt1c2hraS9uZy1zdWthLyIsInNvdXJjZXMiOlsibGliL3Byb2dyZXNzL3Byb2dyZXNzLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsV0FBVyxFQUFFLE1BQU0sRUFBRSxZQUFZLEVBQVUsTUFBTSxlQUFlLENBQUM7QUFpQzVGLE1BQU0sT0FBTyxRQUFRO0lBN0JyQjtRQWdDaUMsY0FBUyxHQUFHLElBQUksQ0FBQztRQUV2QyxXQUFNLEdBQUcsS0FBSyxDQUFDO1FBQ2YsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUVoQixhQUFRLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUU5QixnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7SUFvRDdDLENBQUM7Ozs7SUFuREMsSUFBYSxLQUFLO1FBQ2hCLE9BQU8sSUFBSSxDQUFDLE1BQU0sQ0FBQztJQUNyQixDQUFDOzs7OztJQUNELElBQUksS0FBSyxDQUFDLEtBQUs7UUFDYixJQUFJLENBQUMsTUFBTSxHQUFHLEtBQUssQ0FBQztRQUVwQixJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDckMsQ0FBQzs7Ozs7SUFFRCxNQUFNLENBQUMsUUFBUTtRQUNiLElBQUksQ0FBQyxNQUFNLENBQUMsT0FBTzs7Ozs7UUFBQyxDQUFDLElBQUksRUFBRSxLQUFLLEVBQUUsRUFBRTtZQUNsQyxJQUFJLEtBQUssS0FBSyxRQUFRLEVBQUU7Z0JBQ3RCLElBQUksQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDO2FBQ3JCO2lCQUFNLElBQUcsSUFBSSxDQUFDLE9BQU8sRUFBRTtnQkFDdEIsT0FBTyxJQUFJLENBQUMsT0FBTyxDQUFDO2FBQ3JCO1FBQ0gsQ0FBQyxFQUFDLENBQUM7UUFFSCxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUU3QixJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUM7SUFDM0IsQ0FBQzs7Ozs7SUFFRCxVQUFVLENBQUMsSUFBa0I7UUFDM0IsT0FBTyxJQUFJLENBQUMsS0FBSyxLQUFLLFVBQVUsQ0FBQztJQUNuQyxDQUFDOzs7OztJQUVELFVBQVUsQ0FBQyxJQUFrQjtRQUMzQixPQUFPLElBQUksQ0FBQyxLQUFLLEtBQUssVUFBVSxJQUFJLElBQUksQ0FBQyxRQUFRLENBQUM7SUFDcEQsQ0FBQzs7Ozs7O0lBRUQsYUFBYSxDQUFDLElBQWtCLEVBQUUsS0FBYTtRQUM3QyxJQUFJLElBQUksQ0FBQyxLQUFLLEtBQUssVUFBVSxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsRUFBRTtZQUMvQyxPQUFPLElBQUksQ0FBQztTQUNiO1FBQ0QsSUFBSSxJQUFJLENBQUMsS0FBSyxLQUFLLFlBQVksSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLElBQUksS0FBSyxLQUFLLElBQUksQ0FBQyxXQUFXLEVBQUUsRUFBRTtZQUMvRSxPQUFPLElBQUksQ0FBQztTQUNiO1FBRUQsT0FBTyxLQUFLLENBQUM7SUFDZixDQUFDOzs7O0lBRUQsV0FBVztRQUNULEtBQUssTUFBTSxDQUFDLEtBQUssRUFBRSxJQUFJLENBQUMsSUFBSSxJQUFJLENBQUMsS0FBSyxDQUFDLE9BQU8sRUFBRSxFQUFFO1lBQ2hELElBQUksSUFBSSxDQUFDLEtBQUssS0FBSyxZQUFZLEVBQUU7Z0JBQy9CLE9BQU8sS0FBSyxDQUFDO2FBQ2Q7U0FDRjtRQUVELE9BQU8sQ0FBQyxDQUFDLENBQUM7SUFDWixDQUFDOzs7WUExRkYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxlQUFlO2dCQUN6QixRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0F5QlQ7YUFDRjs7O3dCQUlFLFdBQVcsU0FBQyxnQkFBZ0I7cUJBRTVCLEtBQUs7dUJBQ0wsS0FBSzt1QkFFTCxNQUFNOzBCQUVOLE1BQU07b0JBQ04sS0FBSzs7Ozs7OztJQVZOLDBCQUFvQzs7SUFFcEMsNkJBQWdEOztJQUVoRCwwQkFBd0I7O0lBQ3hCLDRCQUEwQjs7SUFFMUIsNEJBQXdDOztJQUV4QywrQkFBMkMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBIb3N0QmluZGluZywgT3V0cHV0LCBFdmVudEVtaXR0ZXIsIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgUHJvZ3Jlc3NTdGVwIH0gZnJvbSAnLi9wcm9ncmVzcy1zdGVwLmludGVyZmFjZSc7XG5cblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc3VrYS1wcm9ncmVzcycsXG4gIHRlbXBsYXRlOiBgXG4gICAgPGRpdiBjbGFzcz1cInByb2dyZXNzX193cmFwcGVyXCI+XG4gICAgICA8dWwgY2xhc3M9XCJwcm9ncmVzcy1iYXJcIj5cbiAgICAgICAgPGxpXG4gICAgICAgICAgKm5nRm9yPVwibGV0IHN0ZXAgb2Ygc3RlcHM7IGxldCBpID0gaW5kZXhcIlxuICAgICAgICAgIGNsYXNzPVwicHJvZ3Jlc3MtYmFyX19zdGVwXCJcbiAgICAgICAgICBbbmdDbGFzc109XCJ7XG4gICAgICAgICAgICAncHJvZ3Jlc3MtYmFyX19zdGVwLS1jb21wbGV0ZSc6IGlzQ29tcGxldGUoc3RlcCksXG4gICAgICAgICAgICAncHJvZ3Jlc3MtYmFyX19zdGVwLS1lZGl0YWJsZSc6IGlzRWRpdGFibGUoc3RlcCksXG4gICAgICAgICAgICAncHJvZ3Jlc3MtYmFyX19zdGVwLS1lcnJvcic6IHN0ZXAuc3RhdGUgPT09ICdlcnJvcicsXG4gICAgICAgICAgICAncHJvZ3Jlc3MtYmFyX19zdGVwLS1jdXJyZW50Jzogc3RlcC5jdXJyZW50LFxuICAgICAgICAgICAgJ3Byb2dyZXNzLWJhcl9fc3RlcC0tdW5jbGlja2FibGUnOiBpc1VuY2xpY2thYmxlKHN0ZXAsIGkpXG4gICAgICAgICAgfVwiXG4gICAgICAgID5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwic3RlcFwiIHJvbGU9XCJidXR0b25cIiAoY2xpY2spPVwic2VsZWN0KGkpXCI+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwic3RlcF9faW5kaWNhdG9yXCI+XG4gICAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJzdGVwLnN0YXRlICE9PSAnY29tcGxldGUnIHx8IHN0ZXAuY3VycmVudFwiPnt7IGkgKyAxIH19PC9uZy1jb250YWluZXI+XG4gICAgICAgICAgICAgIDxzdWthLWljb24gaWNvbj1cImNoZWNrXCIgKm5nSWY9XCJpc0NvbXBsZXRlKHN0ZXApICYmICFpc0VkaXRhYmxlKHN0ZXApICYmICFzdGVwLmN1cnJlbnRcIj48L3N1a2EtaWNvbj5cbiAgICAgICAgICAgICAgPHN1a2EtaWNvbiBpY29uPVwiZWRpdC0yXCIgKm5nSWY9XCJpc0VkaXRhYmxlKHN0ZXApICYmICFzdGVwLmN1cnJlbnRcIj48L3N1a2EtaWNvbj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJzdGVwX19sYWJlbFwiPiB7eyBzdGVwLmxhYmVsIH19PC9zcGFuPlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L2xpPlxuICAgICAgPC91bD5cbiAgICA8L2Rpdj5cbiAgYFxufSlcbmV4cG9ydCBjbGFzcyBQcm9ncmVzcyB7XG4gIHByaXZhdGUgX3N0ZXBzOiBBcnJheTxQcm9ncmVzc1N0ZXA+O1xuXG4gIEBIb3N0QmluZGluZygnY2xhc3MucHJvZ3Jlc3MnKSBiYXNlQ2xhc3MgPSB0cnVlO1xuXG4gIEBJbnB1dCgpIGxpbmVhciA9IGZhbHNlO1xuICBASW5wdXQoKSBlZGl0YWJsZSA9IGZhbHNlO1xuXG4gIEBPdXRwdXQoKSBzZWxlY3RlZCA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcblxuICBAT3V0cHV0KCkgc3RlcHNDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG4gIEBJbnB1dCgpIGdldCBzdGVwcygpIHtcbiAgICByZXR1cm4gdGhpcy5fc3RlcHM7XG4gIH1cbiAgc2V0IHN0ZXBzKHZhbHVlKSB7XG4gICAgdGhpcy5fc3RlcHMgPSB2YWx1ZTtcblxuICAgIHRoaXMuc3RlcHNDaGFuZ2UuZW1pdCh0aGlzLl9zdGVwcyk7XG4gIH1cblxuICBzZWxlY3QobmV3SW5kZXgpOiB2b2lkIHtcbiAgICB0aGlzLl9zdGVwcy5mb3JFYWNoKChzdGVwLCBpbmRleCkgPT4ge1xuICAgICAgaWYgKGluZGV4ID09PSBuZXdJbmRleCkge1xuICAgICAgICBzdGVwLmN1cnJlbnQgPSB0cnVlO1xuICAgICAgfSBlbHNlIGlmKHN0ZXAuY3VycmVudCkge1xuICAgICAgICBkZWxldGUgc3RlcC5jdXJyZW50O1xuICAgICAgfVxuICAgIH0pO1xuXG4gICAgdGhpcy5zZWxlY3RlZC5lbWl0KG5ld0luZGV4KTtcblxuICAgIHRoaXMuc3RlcHMgPSB0aGlzLl9zdGVwcztcbiAgfVxuXG4gIGlzQ29tcGxldGUoc3RlcDogUHJvZ3Jlc3NTdGVwKSB7XG4gICAgcmV0dXJuIHN0ZXAuc3RhdGUgPT09ICdjb21wbGV0ZSc7XG4gIH1cblxuICBpc0VkaXRhYmxlKHN0ZXA6IFByb2dyZXNzU3RlcCkge1xuICAgIHJldHVybiBzdGVwLnN0YXRlID09PSAnY29tcGxldGUnICYmIHRoaXMuZWRpdGFibGU7XG4gIH1cblxuICBpc1VuY2xpY2thYmxlKHN0ZXA6IFByb2dyZXNzU3RlcCwgaW5kZXg6IG51bWJlcik6IGJvb2xlYW4ge1xuICAgIGlmIChzdGVwLnN0YXRlID09PSAnY29tcGxldGUnICYmICF0aGlzLmVkaXRhYmxlKSB7XG4gICAgICByZXR1cm4gdHJ1ZTtcbiAgICB9XG4gICAgaWYgKHN0ZXAuc3RhdGUgPT09ICdpbmNvbXBsZXRlJyAmJiAhdGhpcy5saW5lYXIgJiYgaW5kZXggIT09IHRoaXMuZ2V0TmV4dFN0ZXAoKSkge1xuICAgICAgcmV0dXJuIHRydWU7XG4gICAgfVxuXG4gICAgcmV0dXJuIGZhbHNlO1xuICB9XG5cbiAgZ2V0TmV4dFN0ZXAoKTogbnVtYmVyIHtcbiAgICBmb3IgKGNvbnN0IFtpbmRleCwgc3RlcF0gb2YgdGhpcy5zdGVwcy5lbnRyaWVzKCkpIHtcbiAgICAgIGlmIChzdGVwLnN0YXRlID09PSAnaW5jb21wbGV0ZScpIHtcbiAgICAgICAgcmV0dXJuIGluZGV4O1xuICAgICAgfVxuICAgIH1cblxuICAgIHJldHVybiAtMTtcbiAgfVxufVxuIl19