Skip to content

Commit a93e3ad

Browse files
zvonimirfraszvonimirfras
authored
Merge pull request #419 from youda97/pagination
Update pagination styles to v2
2 parents 9a5c665 + 2a0ffa8 commit a93e3ad

File tree

2 files changed

+125
-93
lines changed

2 files changed

+125
-93
lines changed

‎src/i18n/en.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,8 @@
105105
"BACKWARD": "Backward",
106106
"FORWARD": "Forward",
107107
"TOTAL_ITEMS": "{{start}}-{{end}} of {{total}} items",
108-
"TOTAL_PAGES": "{{current}} of {{last}} pages"
108+
"TOTAL_PAGES": "{{current}} of {{last}} pages",
109+
"OF_LAST_PAGES": "of {{last}} pages"
109110
},
110111
"TABLE": {
111112
"GO_TO_PAGE": "Go to page",

‎src/pagination/pagination.component.ts‎

Lines changed: 123 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ import { ExperimentalService } from "./../experimental.module";
4040
<div
4141
class="bx--pagination"
4242
[ngClass]="{
43-
'bx--skeleton' : skeleton
43+
'bx--skeleton': skeleton
4444
}">
4545
<!-- left skeleton div -->
4646
<div *ngIf="skeleton" class="bx--pagination__left">
@@ -50,54 +50,65 @@ import { ExperimentalService } from "./../experimental.module";
5050
</div>
5151
5252
<div *ngIf="!skeleton" class="bx--pagination__left">
53-
<div class="bx--select bx--select--inline">
54-
<label
55-
[for]="itemsPerPageSelectId"
56-
class="bx--label bx--visually-hidden">
57-
{{itemsPerPageText | async}}
58-
</label>
59-
<select
60-
[id]="itemsPerPageSelectId"
61-
[(ngModel)]="itemsPerPage"
62-
class="bx--select-input"
63-
aria-describedby="false">
64-
<option class="bx--select-option" value="10">{{itemsPerPageText | async}} 10</option>
65-
<option class="bx--select-option" value="20">20</option>
66-
<option class="bx--select-option" value="30">30</option>
67-
<option class="bx--select-option" value="40">40</option>
68-
<option class="bx--select-option" value="50">50</option>
69-
</select>
70-
<!-- old icon -->
71-
<svg
72-
*ngIf="!isExperimental"
73-
class="bx--select__arrow"
74-
fill-rule="evenodd"
75-
height="5"
76-
role="img"
77-
viewBox="0 0 10 5"
78-
width="10"
79-
[attr.aria-label]="optionsListText | async">
80-
<title>{{optionsListText | async}}</title>
81-
<path d="M0 0l5 4.998L10 0z"></path>
82-
</svg>
83-
<!-- new icon -->
84-
<svg
85-
*ngIf="isExperimental"
86-
class="bx--select__arrow"
87-
focusable="false"
88-
preserveAspectRatio="xMidYMid meet"
89-
height="6"
90-
role="img"
91-
viewBox="0 0 10 6"
92-
width="10"
93-
style="will-change: transform;"
94-
[attr.aria-label]="optionsListText | async">
95-
<title>{{optionsListText | async}}</title>
96-
<path d="M5 6L0 1 .7.3 5 4.6 9.3.3l.7.7z"></path>
97-
</svg>
53+
<span *ngIf="!isExperimental" class="bx--pagination__text">
54+
{{itemsPerPageText | async}}
55+
</span>
56+
<label *ngIf="isExperimental" class="bx--pagination__text" [for]="itemsPerPageSelectId">
57+
{{itemsPerPageText | async}}
58+
</label>
59+
<div class="bx--form-item">
60+
<div class="bx--select bx--select--inline"
61+
[ngClass]="{
62+
'bx--select__item-count': isExperimental
63+
}">
64+
<label
65+
[for]="itemsPerPageSelectId"
66+
class="bx--label bx--visually-hidden">
67+
{{itemsPerPageText | async}}
68+
</label>
69+
<select
70+
[id]="itemsPerPageSelectId"
71+
[(ngModel)]="itemsPerPage"
72+
class="bx--select-input"
73+
aria-describedby="false">
74+
<option class="bx--select-option" value="10">10</option>
75+
<option class="bx--select-option" value="20">20</option>
76+
<option class="bx--select-option" value="30">30</option>
77+
<option class="bx--select-option" value="40">40</option>
78+
<option class="bx--select-option" value="50">50</option>
79+
</select>
80+
<!-- old icon -->
81+
<svg
82+
*ngIf="!isExperimental"
83+
class="bx--select__arrow"
84+
fill-rule="evenodd"
85+
height="5"
86+
role="img"
87+
viewBox="0 0 10 5"
88+
width="10"
89+
[attr.aria-label]="optionsListText | async">
90+
<title>{{optionsListText | async}}</title>
91+
<path d="M0 0l5 4.998L10 0z"></path>
92+
</svg>
93+
<!-- new icon -->
94+
<svg
95+
*ngIf="isExperimental"
96+
class="bx--select__arrow"
97+
focusable="false"
98+
preserveAspectRatio="xMidYMid meet"
99+
height="6"
100+
role="img"
101+
viewBox="0 0 10 6"
102+
width="10"
103+
style="will-change: transform;"
104+
[attr.aria-label]="optionsListText | async">
105+
<title>{{optionsListText | async}}</title>
106+
<path d="M5 6L0 1 .7.3 5 4.6 9.3.3l.7.7z"></path>
107+
</svg>
108+
</div>
98109
</div>
99110
<span class="bx--pagination__text">
100-
<span>|&nbsp;</span>
111+
<span *ngIf="!isExperimental">|&nbsp;</span>
101112
{{totalItemsText | i18nReplace:{start: startItemIndex, end: endItemIndex, total: model.totalDataLength } | async}}
102113
</span>
103114
</div>
@@ -107,7 +118,10 @@ import { ExperimentalService } from "./../experimental.module";
107118
<p class="bx--skeleton__text" style="width: 70px"></p>
108119
</div>
109120
110-
<div *ngIf="!skeleton" class="bx--pagination__right" ngClass="{'bx--pagination--inline': isExperimental}">
121+
<div *ngIf="!skeleton" class="bx--pagination__right"
122+
[ngClass]="{
123+
'bx--pagination--inline': !isExperimental
124+
}">
111125
<!-- old span -->
112126
<span
113127
*ngIf="!isExperimental"
@@ -119,6 +133,9 @@ import { ExperimentalService } from "./../experimental.module";
119133
<button
120134
*ngIf="!isExperimental"
121135
class="bx--pagination__button bx--pagination__button--backward"
136+
[ngClass]="{
137+
'bx--pagination__button--no-index': currentPage <= 1
138+
}"
122139
(click)="selectPage.emit(previousPage)"
123140
[disabled]="(currentPage <= 1 ? true : null)">
124141
<svg
@@ -134,54 +151,57 @@ import { ExperimentalService } from "./../experimental.module";
134151
</svg>
135152
</button>
136153
137-
<div *ngIf="isExperimental" class="bx--select bx--select--inline">
138-
<label [for]="currentPageSelectId" class="bx--label bx--visually-hidden">{{itemsPerPageText | async}}</label>
139-
<select [id]="currentPageSelectId" class="bx--select-input" aria-describedby="false" [(ngModel)]="currentPage">
140-
<option class="bx--select-option" value="1">{{totalPagesText | i18nReplace:{current: currentPage, last: lastPage} | async}}</option>
141-
<option *ngFor="let i of range(lastPage + 1, 2)" class="bx--select-option" [value]="i">{{i}}</option>
142-
</select>
143-
<!-- old icon -->
144-
<svg
145-
*ngIf="!isExperimental"
146-
class="bx--select__arrow"
147-
fill-rule="evenodd"
148-
height="5"
149-
role="img"
150-
viewBox="0 0 10 5"
151-
width="10"
152-
[attr.aria-label]="optionsListText | async">
153-
<title>{{optionsListText | async}}</title>
154-
<path d="M0 0l5 4.998L10 0z"></path>
155-
</svg>
156-
<!-- new icon -->
157-
<svg
158-
*ngIf="isExperimental"
159-
class="bx--select__arrow"
160-
focusable="false"
161-
preserveAspectRatio="xMidYMid meet"
162-
height="6"
163-
role="img"
164-
viewBox="0 0 10 6"
165-
width="10"
166-
style="will-change: transform;"
167-
[attr.aria-label]="optionsListText | async">
168-
<title>{{optionsListText | async}}</title>
169-
<path d="M5 6L0 1 .7.3 5 4.6 9.3.3l.7.7z"></path>
170-
</svg>
154+
<div class="bx--form-item">
155+
<div class="bx--select bx--select--inline"
156+
[ngClass]="{
157+
'bx--select__page-number' : isExperimental
158+
}">
159+
<label [for]="currentPageSelectId" class="bx--label bx--visually-hidden">{{itemsPerPageText | async}}</label>
160+
<select [id]="currentPageSelectId" class="bx--select-input" aria-describedby="false" [(ngModel)]="currentPage">
161+
<option *ngFor="let i of range(lastPage + 1, 1)" class="bx--select-option" [value]="i">{{i}}</option>
162+
</select>
163+
<!-- old icon -->
164+
<svg
165+
*ngIf="!isExperimental"
166+
class="bx--select__arrow"
167+
fill-rule="evenodd"
168+
height="5"
169+
role="img"
170+
viewBox="0 0 10 5"
171+
width="10"
172+
[attr.aria-label]="optionsListText | async">
173+
<title>{{optionsListText | async}}</title>
174+
<path d="M0 0l5 4.998L10 0z"></path>
175+
</svg>
176+
<!-- new icon -->
177+
<svg
178+
*ngIf="isExperimental"
179+
class="bx--select__arrow"
180+
focusable="false"
181+
preserveAspectRatio="xMidYMid meet"
182+
height="6"
183+
role="img"
184+
viewBox="0 0 10 6"
185+
width="10"
186+
style="will-change: transform;"
187+
[attr.aria-label]="optionsListText | async">
188+
<title>{{optionsListText | async}}</title>
189+
<path d="M5 6L0 1 .7.3 5 4.6 9.3.3l.7.7z"></path>
190+
</svg>
191+
</div>
171192
</div>
172193
173-
<input
174-
type="number"
175-
class="bx--text-input"
176-
placeholder="0"
177-
value="1"
178-
*ngIf="!isExperimental"
179-
[(ngModel)]="currentPage">
194+
<span *ngIf="isExperimental" class="bx--pagination__text">
195+
{{ofLastPagesText | i18nReplace: {last: lastPage} | async}}
196+
</span>
180197
181198
<!-- old button -->
182199
<button
183200
*ngIf="!isExperimental"
184201
class="bx--pagination__button bx--pagination__button--forward"
202+
[ngClass]="{
203+
'bx--pagination__button--no-index': currentPage >= lastPage
204+
}"
185205
(click)="selectPage.emit(nextPage)"
186206
[disabled]="(currentPage >= lastPage ? true : null)">
187207
<svg
@@ -200,7 +220,10 @@ import { ExperimentalService } from "./../experimental.module";
200220
<!-- new butons -->
201221
<button
202222
*ngIf="isExperimental"
203-
class="bx--pagination__button"
223+
class="bx--pagination__button bx--pagination__button--backward"
224+
[ngClass]="{
225+
'bx--pagination__button--no-index': currentPage <= 1
226+
}"
204227
tabindex="0"
205228
[attr.aria-label]="backwardText | async"
206229
(click)="selectPage.emit(previousPage)"
@@ -220,7 +243,10 @@ import { ExperimentalService } from "./../experimental.module";
220243
221244
<button
222245
*ngIf="isExperimental"
223-
class="bx--pagination__button"
246+
class="bx--pagination__button bx--pagination__button--forward"
247+
[ngClass]="{
248+
'bx--pagination__button--no-index': currentPage >= lastPage
249+
}"
224250
tabindex="0"
225251
[attr.aria-label]="forwardText | async"
226252
(click)="selectPage.emit(nextPage)"
@@ -266,7 +292,8 @@ export class Pagination {
266292
* "BACKWARD": "Backward",
267293
* "FORWARD": "Forward",
268294
* "TOTAL_ITEMS": "{{start}}-{{end}} of {{total}} items",
269-
* "TOTAL_PAGES": "{{current}} of {{last}} pages"
295+
* "TOTAL_PAGES": "{{current}} of {{last}} pages",
296+
* "OF_LAST_PAGES": "of {{last}} pages"
270297
* }
271298
* ```
272299
*/
@@ -290,6 +317,9 @@ export class Pagination {
290317
if (value.TOTAL_PAGES) {
291318
this.totalPagesText = new BehaviorSubject(value.TOTAL_PAGES);
292319
}
320+
if (value.OF_LAST_PAGES) {
321+
this.ofLastPagesText = new BehaviorSubject(value.OF_LAST_PAGES);
322+
}
293323
}
294324

295325
/**
@@ -373,6 +403,7 @@ export class Pagination {
373403
forwardText = this.i18n.get("PAGINATION.FORWARD");
374404
totalItemsText = this.i18n.get("PAGINATION.TOTAL_ITEMS");
375405
totalPagesText = this.i18n.get("PAGINATION.TOTAL_PAGES");
406+
ofLastPagesText = this.i18n.get("PAGINATION.OF_LAST_PAGES");
376407

377408
constructor(protected i18n: I18n, protected experimental: ExperimentalService) {
378409
Pagination.paginationCounter++;

0 commit comments

Comments
 (0)