import { Component } from '@angular/core';
import { HeadingType } from '@freelancer/ui/heading';
import { UiModule } from '@freelancer/ui/ui.module';
import { PullRefreshComponent } from '../pull-refresh.component';
@Component({
selector: 'fl-pull-refresh-scroll-basis-story',
standalone: true,
imports: [PullRefreshComponent, UiModule],
template: `
<fl-heading [headingType]="HeadingType.H1"> Scroll basis </fl-heading>
<fl-text [flMarginBottom]="'small'">
Is used to determine the scrollable element that the pull-refresh
component will be attached to.
</fl-text>
<fl-heading [headingType]="HeadingType.H2"> Window </fl-heading>
<fl-text [flMarginBottom]="'xsmall'">
This is the default scroll basis. Window scroll basis means that the
pull-refresh component will be attached to the global window scrollbar.
</fl-text>
<fl-pull-refresh
class="PullRefresh"
[flMarginBottom]="'small'"
[type]="'drawer'"
[scrollBasis]="'window'"
(refresh)="handleRefresh()"
>
<fl-card
*flRepeat="8"
[flMarginBottom]="'xxsmall'"
>
<fl-text>Content</fl-text>
</fl-card>
</fl-pull-refresh>
<fl-heading [headingType]="HeadingType.H2"> Host </fl-heading>
<fl-text [flMarginBottom]="'xsmall'">
Host scroll basis means that the pull-refresh component will be attached
to the host element. Simply means the pull-refresh component will become
the scrollable container. The max-height of the component should be
externally be set through CSS.
</fl-text>
<fl-pull-refresh
class="PullRefresh"
[type]="'drawer'"
[scrollBasis]="'host'"
(refresh)="handleRefresh()"
>
<fl-card
*flRepeat="8"
[flMarginBottom]="'xxsmall'"
>
<fl-text>Content</fl-text>
</fl-card>
</fl-pull-refresh>
`,
styleUrls: ['./scroll-basis.story.scss'],
})
export class PullRefreshScrollBasisStoryComponent {
HeadingType = HeadingType;
handleRefresh(): void {
window.location.reload();
}
}
@use "settings/settings" as *;
.PullRefresh {
border-top: 1px solid $neutral-light;
max-height: 500px;
padding-top: $spacing-xxsmall;
}