import type { OnInit } from '@angular/core';
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { ButtonColor } from '@freelancer/ui/button';
import { InputType } from '@freelancer/ui/input';
import { ProgressOrientation, ProgressSize } from '@freelancer/ui/progress-bar';
import { required } from '@freelancer/ui/validators';
import type { Observable } from 'rxjs';
import { of } from 'rxjs';
import { map } from 'rxjs/operators';
@Component({
selector: 'fl-progress-steps-vertical-orientation-story',
template: `
<fl-card class="Card">
<fl-progress-steps
[currentStep]="control.value"
[orientation]="ProgressOrientation.VERTICAL"
[flMarginBottom]="'xsmall'"
>
<fl-progress-step-item
stepTitle="Post a contest"
></fl-progress-step-item>
<fl-progress-step-item stepTitle="Award an entry">
<fl-progress-step-content>
<ng-container *ngIf="showContent$ | flAsync; else loading">
Rate the entries you receive and leave comments for improvement on
your favorites. When you find an entry you love, award it to own
it legally.
</ng-container>
</fl-progress-step-content>
</fl-progress-step-item>
<fl-progress-step-item stepTitle="Handover">
<fl-progress-step-content>
Complete the Contest Handover to own Jane D.'s entry legally.
</fl-progress-step-content>
</fl-progress-step-item>
<fl-progress-step-item stepTitle="Provide feedback">
<fl-progress-step-content>
Share your work experience with Jane D. by providing feedback.
</fl-progress-step-content>
</fl-progress-step-item>
</fl-progress-steps>
<div>
<fl-text>Current Step:</fl-text>
<fl-input
placeholder="Change current step"
[control]="control"
[type]="InputType.NUMBER"
></fl-input>
</div>
</fl-card>
<ng-template #loading>
<fl-loading-text
[padded]="false"
[rows]="2"
></fl-loading-text>
</ng-template>
`,
styleUrls: ['./vertical-orientation.story.scss'],
})
export class ProgressStepsVerticalOrientationStoryComponent implements OnInit {
ButtonColor = ButtonColor;
InputType = InputType;
ProgressSize = ProgressSize;
ProgressOrientation = ProgressOrientation;
control = new FormControl(2, {
nonNullable: true,
validators: required('This is required'),
});
showContent$: Observable<boolean>;
ngOnInit(): void {
// Delays content display to demonstrate dynamic or partial data
this.showContent$ = of(false).pipe(
// FIXME: T267853 - find a way to re-enable that as it breaks the screenshot tests
// delay(2000),
map(() => true),
);
}
}
@use "settings/settings" as *;
.Card {
max-width: 300px;
}