Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
import {Component, h, Prop} from '@stencil/core';
import {PaginationItemVariants} from '../../../utils/utils';
@Component({
tag: 'hy-pager-item',
styleUrl: 'hy-pager-item.scss',
shadow: true,
})
export class HyPagerItem {
@Prop() variant: PaginationItemVariants = PaginationItemVariants.default;
@Prop() itemLabel?: string;
@Prop() itemUrl?: string;
@Prop() scAriaLabel?: string;
render() {
let classAttributes = ['hy-pager__item'].join(' ');
switch (this.variant) {
case PaginationItemVariants.current: {
classAttributes = ['hy-pager__item', 'hy-pager__item__current'].join(' ');
return (
<li class={classAttributes}>
<a href={this.itemUrl} aria-current="true">
{this.itemLabel}
</a>
</li>
);
}
case PaginationItemVariants.next: {
classAttributes = ['hy-pager__item', 'hy-pager__item__next'].join(' ');
const iconClassAttributes = ['link-icon'].join(' ');
return (
<li class={classAttributes}>
<a href={this.itemUrl} aria-label={this.scAriaLabel}>
{this.itemLabel}
<span class={'hy-icon-wrapper'}>
<div class={iconClassAttributes}>
<hy-icon icon={'hy-icon-arrow-to-right'} size={12} />
</div>
</span>
</a>
</li>
);
}
case PaginationItemVariants.previous: {
classAttributes = ['hy-pager__item', 'hy-pager__item__previous'].join(' ');
const iconClassAttributes = ['link-icon'].join(' ');
return (
<li class={classAttributes}>
<a href={this.itemUrl} aria-label={this.scAriaLabel}>
<span class={'hy-icon-wrapper'}>
<div class={iconClassAttributes}>
<hy-icon icon={'hy-icon-arrow-left'} size={12} />
</div>
</span>
{this.itemLabel}
</a>
</li>
);
}
case PaginationItemVariants.ellipsis: {
classAttributes = ['hy-pager__item', 'hy-pager__item__ellipsis'].join(' ');
return <li class={classAttributes}>...</li>;
}
default: {
classAttributes = ['hy-pager__item'].join(' ');
return (
<li class={classAttributes}>
<a href={this.itemUrl} aria-label={this.scAriaLabel}>
{this.itemLabel}
</a>
</li>
);
}
}
}
}