@brightspace-ui/labs 1.5.0 → 1.6.0

package/package.json

@@ -11,6 +11,7 @@
     "./components/opt-in-flyout.js": "./src/components/opt-in-flyout/opt-in-flyout.js",
     "./components/opt-out-flyout.js": "./src/components/opt-in-flyout/opt-out-flyout.js",
     "./components/opt-out-reason.js": "./src/components/opt-in-flyout/opt-out-reason.js",
+    "./components/pager-numeric.js": "./src/components/pagination/pager-numeric.js",
     "./controllers/computed-value.js": "./src/controllers/computed-values/computed-value.js",
     "./controllers/computed-values.js": "./src/controllers/computed-values/computed-values.js",
     "./controllers/language-listener.js": "./src/controllers/language-listener/language-listener.js"
@@ -29,10 +30,10 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@brightspace-ui/stylelint-config": "^0.8",
-    "@brightspace-ui/testing": "^1.0",
+    "@brightspace-ui/testing": "^1",
     "@web/dev-server": "^0.3",
     "eslint": "^8",
-    "eslint-config-brightspace": "^0.25",
+    "eslint-config-brightspace": "^1",
     "messageformat-validator": "^2",
     "stylelint": "^15"
   },
@@ -47,5 +48,5 @@
     "@brightspace-ui/core": "^2",
     "lit": "^2"
   },
-  "version": "1.5.0"
+  "version": "1.6.0"
 }

package/src/components/pagination/README.md

@@ -0,0 +1,29 @@
+# d2l-labs-pager-numeric
+
+A component to indicate the existence of and provide navigation for multiple pages of content.
+
+## Usage
+
+```html
+<script type="module">
+    import '@brightspace-ui/labs/components/pager-numeric.js';
+</script>
+<d2l-labs-pager-numeric></d2l-labs-pager-numeric>
+```
+
+## Properties
+
+| Property | Type | Description |
+|--|--|--|
+| `page-number` | Number, default: 1 | The current page number
+| `max-page-number` | Number, default: 1 | The highest page number the user can navigate to
+| `show-page-size-selector` | Boolean, default: `false` | Determines whether or not to show the `Results Per Page` select component.
+| `page-sizes` | Array, default:`[10,20,30,40]` | The options available in the `Results Per Page` select component.
+| `page-size` | Number | The starting `page-sizes` value to display in the `Results Per Page` select component. If no value is given, it will default to whatever the first value in the `page-sizes` array.
+
+## Events
+
+* `d2l-labs-pager-numeric-page-change`: dispatched when either the navigation buttons are pressed, or the page number is modified. Event `detail` includes:
+  * `page`: the new page number value
+* `d2l-labs-pager-numeric-page-size-change`: dispatched when the item count selector's value is changed. Event `detail` includes:
+  * `itemCount`: the value the item count selector was just set to

package/src/components/pagination/pager-numeric.js

@@ -0,0 +1,159 @@
+import '@brightspace-ui/core/components/button/button-icon.js';
+import '@brightspace-ui/core/components/inputs/input-number.js';
+import '@brightspace-ui/core/components/inputs/input-text.js';
+import { css, html, LitElement } from 'lit';
+import { formatNumber } from '@brightspace-ui/intl';
+import { LocalizeLabsElement } from '../localize-labs-element.js';
+import { RtlMixin } from '@brightspace-ui/core/mixins/rtl-mixin.js';
+import { selectStyles } from '@brightspace-ui/core/components/inputs/input-select-styles.js';
+
+class PagerNumeric extends RtlMixin(LocalizeLabsElement(LitElement)) {
+
+	static get properties() {
+		return {
+			maxPageNumber: { type: Number, attribute: 'max-page-number', reflect: true },
+			pageNumber: { type: Number, attribute: 'page-number', reflect: true },
+			pageSize : { type: Number, attribute: 'page-size', reflect: true },
+			pageSizes : { type: Array, attribute: 'page-sizes' },
+			showPageSizeSelector : { type: Boolean, attribute: 'show-page-size-selector', reflect: true }
+		};
+	}
+
+	static get styles() {
+		return [selectStyles, css`
+			:host {
+				align-items: center;
+				display: flex;
+				justify-content: center;
+				white-space: nowrap;
+			}
+
+			.d2l-page-selector-container {
+				margin: 0.75rem;
+			}
+
+			.d2l-page-number-container {
+				direction: ltr;
+				display: inline-block;
+			}
+
+			d2l-input-number {
+				margin-left: 0.25rem;
+				margin-right: 0.25rem;
+				width: 3.8rem;
+			}
+
+			.d2l-page-max-text {
+				margin-right: 0.25rem;
+			}
+
+			@media (max-width: 544px) {
+				:host {
+					flex-direction: column-reverse;
+				}
+			}
+		`];
+	}
+
+	constructor() {
+		super();
+		this.pageNumber = 1;
+		this.maxPageNumber = 1;
+		this.pageSizes = [10, 20, 30, 40];
+	}
+
+	render() {
+		return html`
+			<div class="d2l-page-selector-container">
+				<d2l-button-icon
+					id="d2l-labs-pager-numeric-previous-button"
+					icon="tier1:chevron-left"
+					text="${this.localize('components:pagination:previousPage')}"
+					?disabled="${this.pageNumber <= 1}"
+					@click="${this._onPreviousClicked}">
+				</d2l-button-icon>
+
+				<div class="d2l-page-number-container">
+					<d2l-input-number
+						autocomplete="off"
+						label="${this.localize('components:pagination:currentPage', { pageNumber: this.pageNumber, maxPageNumber: this.maxPageNumber })}"
+						label-hidden
+						max-fraction-digits="0"
+						value="${this.pageNumber}"
+						@change="${this._onPageNumberChanged}">
+					</d2l-input-number>
+					<!-- Note: this uses a division slash rather than a regular slash -->
+					<!-- a11y note: setting aria-hidden to true because info here is covered by input element -->
+					<span class="d2l-page-max-text" aria-hidden="true">∕ ${formatNumber(this.maxPageNumber)}</span>
+				</div>
+
+				<d2l-button-icon
+					id="d2l-labs-pager-numeric-next-button"
+					icon="tier1:chevron-right"
+					text="${this.localize('components:pagination:nextPage')}"
+					?disabled="${this.pageNumber >= this.maxPageNumber}"
+					@click="${this._onNextClicked}">
+				</d2l-button-icon>
+			</div>
+
+			${this.showPageSizeSelector ? html`
+				<select
+					class="d2l-input-select"
+					aria-label="${this.localize('components:pagination:resultsPerPage')}"
+					title="${this.localize('components:pagination:resultsPerPage')}"
+					@change="${this._onPageSizeChanged}">
+					${this.pageSizes.map(item => html`
+						<option ?selected="${this.pageSize === item}" value="${item}">${this.localize('components:pagination:amountPerPage', 'count', formatNumber(item))}</option>
+					`)}
+				</select>
+			` : null }
+		`;
+	}
+
+	_dispatchPageChangeEvent(newPageNumber) {
+		this.dispatchEvent(
+			new CustomEvent('d2l-labs-pager-numeric-page-change', {
+				detail: { page: newPageNumber },
+				bubbles: true,
+				composed: true
+			})
+		);
+	}
+
+	_isLastPage() {
+		return this.pageNumber >= this.maxPageNumber;
+	}
+
+	_isValidNumber(input) {
+		return input >= 1 && input <= this.maxPageNumber && input !== this.pageNumber;
+	}
+
+	_onNextClicked() {
+		this._dispatchPageChangeEvent(this.pageNumber + 1);
+	}
+
+	_onPageNumberChanged(e) {
+		if (!this._isValidNumber(e.target.value)) {
+			e.target.value = this.pageNumber;
+			return;
+		}
+
+		this._dispatchPageChangeEvent(Number(e.target.value));
+	}
+
+	_onPageSizeChanged(e) {
+		this.dispatchEvent(
+			new CustomEvent('d2l-labs-pager-numeric-page-size-change', {
+				detail: { itemCount: Number(e.target.value) },
+				bubbles: true,
+				composed: true
+			})
+		);
+	}
+
+	_onPreviousClicked() {
+		this._dispatchPageChangeEvent(this.pageNumber - 1);
+	}
+}
+
+customElements.define('d2l-labs-pager-numeric', PagerNumeric);

package/src/lang/ar.js

@@ -20,5 +20,10 @@ export default {
 	"components:optInFlyout:tutorialAndHelpMessage": "شاهد *الدروس التعليمية* الخاصة بنا أو اقرأ ~مستندات التعليمات الخاصة بنا~ للبدء!",
 	"components:optInFlyout:tutorialMessage": "شاهد *الدروس التعليمية* الخاصة بنا لمساعدتك على البدء!",
 	"components:optInFlyout:turnOff": "إيقاف التشغيل",
-	"components:optInFlyout:turnOn": "التشغيل"
+	"components:optInFlyout:turnOn": "التشغيل",
+	"components:pagination:amountPerPage" : "{count} لكل صفحة",
+	"components:pagination:currentPage": "رقم الصفحة {pageNumber} من {maxPageNumber}",
+	"components:pagination:nextPage" : "الصفحة التالية",
+	"components:pagination:previousPage" : "الصفحة السابقة",
+	"components:pagination:resultsPerPage" : "النتائج لكل صفحة"
 };

package/src/lang/cy.js

@@ -21,5 +21,10 @@ export default {
 	"components:optInFlyout:turnOff": "Diffoddwch e",
 	"components:optInFlyout:turnOn": "Trowch e ymlaen",
 	"components:optInFlyout:tutorialAndHelpMessage": "Gwyliwch ein *tiwtorialau* neu darllenwch ein ~dogfennaeth cymorth~ i gychwyn arni!",
-	"components:optInFlyout:tutorialMessage": "Gwyliwch ein *tiwtorialau* i’ch helpu i gychwyn arni!"
+	"components:optInFlyout:tutorialMessage": "Gwyliwch ein *tiwtorialau* i’ch helpu i gychwyn arni!",
+	"components:pagination:amountPerPage" : "{count} fesul tudalen",
+	"components:pagination:currentPage": "Rhif tudalen {pageNumber} o {maxPageNumber}",
+	"components:pagination:nextPage" : "Tudalen nesaf",
+	"components:pagination:previousPage" : "Y dudalen flaenorol",
+	"components:pagination:resultsPerPage" : "Canlyniadau fesul tudalen"
 };

package/src/lang/da.js

@@ -21,5 +21,10 @@ export default {
 	"components:optInFlyout:turnOff": "Slå den fra",
 	"components:optInFlyout:turnOn": "Slå den til",
 	"components:optInFlyout:tutorialAndHelpMessage": "Se vores *selvstudier*, eller læs vores ~hjælp-dokumentation~ for at komme i gang!",
-	"components:optInFlyout:tutorialMessage": "Se vores *selvstudier* for at komme i gang!"
+	"components:optInFlyout:tutorialMessage": "Se vores *selvstudier* for at komme i gang!",
+	"components:pagination:amountPerPage" : "{count} pr. side",
+	"components:pagination:currentPage": "Sidenummer {pageNumber} af {maxPageNumber}",
+	"components:pagination:nextPage" : "Næste side",
+	"components:pagination:previousPage" : "Forrige side",
+	"components:pagination:resultsPerPage" : "Resultater pr. side"
 };

package/src/lang/de.js

@@ -21,5 +21,10 @@ export default {
 	"components:optInFlyout:turnOff": "Ausschalten",
 	"components:optInFlyout:turnOn": "Einschalten",
 	"components:optInFlyout:tutorialAndHelpMessage": "Sehen Sie unsere *Tutorials* an, oder lesen Sie unsere ~Hilfe-Dokumentation~, um zu beginnen!",
-	"components:optInFlyout:tutorialMessage": "Unsere *Tutorials* helfen Ihnen beim Start!"
+	"components:optInFlyout:tutorialMessage": "Unsere *Tutorials* helfen Ihnen beim Start!",
+	"components:pagination:amountPerPage" : "{count} pro Seite",
+	"components:pagination:currentPage": "Seitennummer {pageNumber} von {maxPageNumber}",
+	"components:pagination:nextPage" : "Nächste Seite",
+	"components:pagination:previousPage" : "Vorherige Seite",
+	"components:pagination:resultsPerPage" : "Ergebnisse pro Seite"
 };

package/src/lang/en.js

@@ -21,5 +21,10 @@ export default {
 	"components:optInFlyout:turnOff": "Turn it off",
 	"components:optInFlyout:turnOn": "Turn it on",
 	"components:optInFlyout:tutorialAndHelpMessage": "Watch our *tutorials* or read our ~help documentation~ to get started!",
-	"components:optInFlyout:tutorialMessage": "Watch our *tutorials* to help you get started!"
+	"components:optInFlyout:tutorialMessage": "Watch our *tutorials* to help you get started!",
+	"components:pagination:amountPerPage": "{count} per page",
+	"components:pagination:currentPage": "Page number {pageNumber} of {maxPageNumber}",
+	"components:pagination:nextPage": "Next page",
+	"components:pagination:previousPage": "Previous page",
+	"components:pagination:resultsPerPage": "Results per page"
 };

package/src/lang/es-es.js

@@ -21,5 +21,10 @@ export default {
 	"components:optInFlyout:turnOff": "Desactivar",
 	"components:optInFlyout:turnOn": "Activar",
 	"components:optInFlyout:tutorialAndHelpMessage": "Consulte nuestros *tutoriales* o lea nuestra ~documentación de ayuda~ para comenzar.",
-	"components:optInFlyout:tutorialMessage": "Consulte nuestros *tutoriales* como ayuda adicional para empezar."
+	"components:optInFlyout:tutorialMessage": "Consulte nuestros *tutoriales* como ayuda adicional para empezar.",
+	"components:pagination:amountPerPage" : "{count} por página",
+	"components:pagination:currentPage": "Página número {pageNumber} de {maxPageNumber}",
+	"components:pagination:nextPage" : "Página siguiente",
+	"components:pagination:previousPage" : "Página anterior",
+	"components:pagination:resultsPerPage" : "Resultados por página"
 };

package/src/lang/es.js

@@ -21,5 +21,10 @@ export default {
 	"components:optInFlyout:turnOff": "Desactivar",
 	"components:optInFlyout:turnOn": "Activar",
 	"components:optInFlyout:tutorialAndHelpMessage": "Vea nuestros *tutoriales* o lea nuestra ~documentación de ayuda~ para comenzar.",
-	"components:optInFlyout:tutorialMessage": "Vea nuestros *tutoriales* para saber cómo comenzar."
+	"components:optInFlyout:tutorialMessage": "Vea nuestros *tutoriales* para saber cómo comenzar.",
+	"components:pagination:amountPerPage" : "{count} por página",
+	"components:pagination:currentPage": "Página número {pageNumber} de {maxPageNumber}",
+	"components:pagination:nextPage" : "Página siguiente",
+	"components:pagination:previousPage" : "Página anterior",
+	"components:pagination:resultsPerPage" : "Resultados por página"
 };

package/src/lang/fr-fr.js

@@ -21,5 +21,10 @@ export default {
 	"components:optInFlyout:turnOff": "Désactiver",
 	"components:optInFlyout:turnOn": "Activer",
 	"components:optInFlyout:tutorialAndHelpMessage": "Regardez nos * tutoriels *ou lisez notre ~ documentation d’aide ~ pour commencer !",
-	"components:optInFlyout:tutorialMessage": "Regardez nos * tutoriels * pour vous aider à démarrer !"
+	"components:optInFlyout:tutorialMessage": "Regardez nos * tutoriels * pour vous aider à démarrer !",
+	"components:pagination:amountPerPage" : "{count} par page",
+	"components:pagination:currentPage": "Page numéro {pageNumber} sur {maxPageNumber}",
+	"components:pagination:nextPage" : "Page suivante",
+	"components:pagination:previousPage" : "Page précédente",
+	"components:pagination:resultsPerPage" : "Résultats par page"
 };

package/src/lang/fr.js

@@ -21,5 +21,10 @@ export default {
 	"components:optInFlyout:turnOff": "Fermer",
 	"components:optInFlyout:turnOn": "Activer",
 	"components:optInFlyout:tutorialAndHelpMessage": "Découvrez nos *tutoriels* ou lisez notre ~documentation d’assistance~ pour pouvoir débuter!",
-	"components:optInFlyout:tutorialMessage": "Découvrez nos *tutoriels* pour vous aider à commencer du bon pied!"
+	"components:optInFlyout:tutorialMessage": "Découvrez nos *tutoriels* pour vous aider à commencer du bon pied!",
+	"components:pagination:amountPerPage" : "{count} par page",
+	"components:pagination:currentPage": "Numéro de page {pageNumber} de {maxPageNumber}",
+	"components:pagination:nextPage" : "Page suivante",
+	"components:pagination:previousPage" : "Page précédente",
+	"components:pagination:resultsPerPage" : "Résultats par page"
 };

package/src/lang/hi.js

@@ -21,5 +21,10 @@ export default {
 	"components:optInFlyout:turnOff": "इसे बंद करें",
 	"components:optInFlyout:turnOn": "इसे चालू करें",
 	"components:optInFlyout:tutorialAndHelpMessage": "शुरू करने के लिए हमारे *ट्यूटोरियल* देखें या हमारे ~मदद दस्तावेज़~ पढ़ें!",
-	"components:optInFlyout:tutorialMessage": "शुरू करने में आपकी मदद के लिए हमारे *ट्यूटोरियल* देखें!"
+	"components:optInFlyout:tutorialMessage": "शुरू करने में आपकी मदद के लिए हमारे *ट्यूटोरियल* देखें!",
+	"components:pagination:amountPerPage" : "प्रति पेज {count}",
+	"components:pagination:currentPage": "{maxPageNumber} में से पेज नंबर {pageNumber}",
+	"components:pagination:nextPage" : "अगला पेज",
+	"components:pagination:previousPage" : "पिछला पेज",
+	"components:pagination:resultsPerPage" : "प्रति पेज के परिणाम"
 };

package/src/lang/ja.js

@@ -21,5 +21,10 @@ export default {
 	"components:optInFlyout:turnOff": "オフにする",
 	"components:optInFlyout:turnOn": "オンにする",
 	"components:optInFlyout:tutorialAndHelpMessage": "はじめに*チュートリアル*をご覧になるか、～ヘルプドキュメント～をお読みください。",
-	"components:optInFlyout:tutorialMessage": "ぜひ*チュートリアル*をご覧になり、ご利用を開始してください。"
+	"components:optInFlyout:tutorialMessage": "ぜひ*チュートリアル*をご覧になり、ご利用を開始してください。",
+	"components:pagination:amountPerPage" : "ページごとの {count}",
+	"components:pagination:currentPage": "{maxPageNumber} のページ番号 {pageNumber}",
+	"components:pagination:nextPage" : "次のページ",
+	"components:pagination:previousPage" : "前のページ",
+	"components:pagination:resultsPerPage" : "ページごとの結果"
 };

package/src/lang/ko.js

@@ -21,5 +21,10 @@ export default {
 	"components:optInFlyout:turnOff": "비활성화",
 	"components:optInFlyout:turnOn": "활성화",
 	"components:optInFlyout:tutorialAndHelpMessage": "시작하려면 *개별지도*를 시청하거나 ~도움말 설명서~를 읽어보십시오!",
-	"components:optInFlyout:tutorialMessage": "시작하는 데 도움이 되는 *개별지도*를 시청하십시오."
+	"components:optInFlyout:tutorialMessage": "시작하는 데 도움이 되는 *개별지도*를 시청하십시오.",
+	"components:pagination:amountPerPage" : "페이지당 {count}개",
+	"components:pagination:currentPage": "{maxPageNumber}의 페이지 번호 {pageNumber}",
+	"components:pagination:nextPage" : "다음 페이지",
+	"components:pagination:previousPage" : "이전 페이지",
+	"components:pagination:resultsPerPage" : "페이지당 결과 수"
 };

package/src/lang/nl.js

@@ -21,5 +21,10 @@ export default {
 	"components:optInFlyout:turnOff": "Uitschakelen",
 	"components:optInFlyout:turnOn": "Inschakelen",
 	"components:optInFlyout:tutorialAndHelpMessage": "Lees onze *zelfstudies* of onze ~helpdocumentatie~ om aan de slag te gaan.",
-	"components:optInFlyout:tutorialMessage": "Bekijk onze *zelfstudies* om aan de slag te gaan."
+	"components:optInFlyout:tutorialMessage": "Bekijk onze *zelfstudies* om aan de slag te gaan.",
+	"components:pagination:amountPerPage" : "{count} per pagina",
+	"components:pagination:currentPage": "Paginanummer {pageNumber} van {maxPageNumber}",
+	"components:pagination:nextPage" : "Volgende pagina",
+	"components:pagination:previousPage" : "Vorige pagina",
+	"components:pagination:resultsPerPage" : "Resultaten per pagina"
 };

package/src/lang/pt.js

@@ -21,5 +21,10 @@ export default {
 	"components:optInFlyout:turnOff": "Desligar",
 	"components:optInFlyout:turnOn": "Ativar",
 	"components:optInFlyout:tutorialAndHelpMessage": "Assista aos nossos *tutoriais* ou leia a nossa ~documentação de ajuda~ para começar!",
-	"components:optInFlyout:tutorialMessage": "Assista aos nossos *tutoriais* para ajudar você a começar!"
+	"components:optInFlyout:tutorialMessage": "Assista aos nossos *tutoriais* para ajudar você a começar!",
+	"components:pagination:amountPerPage" : "{count} por página",
+	"components:pagination:currentPage": "Número da página {pageNumber} de {maxPageNumber}",
+	"components:pagination:nextPage" : "Próxima página",
+	"components:pagination:previousPage" : "Página anterior",
+	"components:pagination:resultsPerPage" : "Resultados por página"
 };

package/src/lang/sv.js

@@ -21,5 +21,10 @@ export default {
 	"components:optInFlyout:turnOff": "Stäng av",
 	"components:optInFlyout:turnOn": "Sätt på",
 	"components:optInFlyout:tutorialAndHelpMessage": "Se våra *handledningar* eller läs vår ~hjälpdokumentation~ för att komma igång!",
-	"components:optInFlyout:tutorialMessage": "Se våra *handledningar* som hjälper dig att komma igång!"
+	"components:optInFlyout:tutorialMessage": "Se våra *handledningar* som hjälper dig att komma igång!",
+	"components:pagination:amountPerPage" : "{count} per sida",
+	"components:pagination:currentPage": "Sidnummer {pageNumber} av {maxPageNumber}",
+	"components:pagination:nextPage" : "Nästa sida",
+	"components:pagination:previousPage" : "Föregående sida",
+	"components:pagination:resultsPerPage" : "Resultat per sida"
 };

package/src/lang/tr.js

@@ -21,5 +21,10 @@ export default {
 	"components:optInFlyout:turnOff": "Kapat",
 	"components:optInFlyout:turnOn": "Aç",
 	"components:optInFlyout:tutorialAndHelpMessage": "*Eğitimlerimizi\" izleyerek ya da ~yardım belgemizi~ okuyarak başlayın!",
-	"components:optInFlyout:tutorialMessage": "Başlamanıza yardımcı olacak *eğitimlerimizi* izleyin!"
+	"components:optInFlyout:tutorialMessage": "Başlamanıza yardımcı olacak *eğitimlerimizi* izleyin!",
+	"components:pagination:amountPerPage" : "Sayfa başına {count}",
+	"components:pagination:currentPage": "Sayfa numarası {pageNumber} / {maxPageNumber}",
+	"components:pagination:nextPage" : "Sonraki sayfa",
+	"components:pagination:previousPage" : "Önceki sayfa",
+	"components:pagination:resultsPerPage" : "Sayfa başına sonuç"
 };

package/src/lang/zh-cn.js

@@ -21,5 +21,10 @@ export default {
 	"components:optInFlyout:turnOff": "关闭",
 	"components:optInFlyout:turnOn": "开启",
 	"components:optInFlyout:tutorialAndHelpMessage": "观看我们的*教程*或阅读我们的~帮助文档~，以便快速入门！",
-	"components:optInFlyout:tutorialMessage": "观看我们的*教程*帮助您快速入门！"
+	"components:optInFlyout:tutorialMessage": "观看我们的*教程*帮助您快速入门！",
+	"components:pagination:amountPerPage" : "每页 {count} 个结果",
+	"components:pagination:currentPage": "页码 ｛ pageNumber ｝ ，共 ｛ maxPageNumber ｝ 页",
+	"components:pagination:nextPage" : "下一页",
+	"components:pagination:previousPage" : "上一页",
+	"components:pagination:resultsPerPage" : "每页结果数"
 };

package/src/lang/zh-tw.js

@@ -21,5 +21,10 @@ export default {
 	"components:optInFlyout:turnOff": "關閉",
 	"components:optInFlyout:turnOn": "開啟",
 	"components:optInFlyout:tutorialAndHelpMessage": "觀看我們的 *教學課程* 或閱讀 ~說明文件~ 以開始使用！",
-	"components:optInFlyout:tutorialMessage": "觀看我們的 *教學課程*，協助您開始使用！"
+	"components:optInFlyout:tutorialMessage": "觀看我們的 *教學課程*，協助您開始使用！",
+	"components:pagination:amountPerPage" : "每頁 {count} 個",
+	"components:pagination:currentPage": "頁碼 {pageNumber} / {maxPageNumber}",
+	"components:pagination:nextPage" : "下一頁",
+	"components:pagination:previousPage" : "上一頁",
+	"components:pagination:resultsPerPage" : "每頁結果"
 };