@umbraco-ui/uui-pagination 1.13.0 → 1.14.0-rc.0

package/custom-elements.json

@@ -17,6 +17,30 @@
           "type": "string",
           "default": "\"\""
         },
+        {
+          "name": "firstLabel",
+          "description": "This property is used to generate the name of the first button",
+          "type": "string",
+          "default": "\"First\""
+        },
+        {
+          "name": "previousLabel",
+          "description": "This property is used to generate the name of the previous button",
+          "type": "string",
+          "default": "\"Previous\""
+        },
+        {
+          "name": "nextLabel",
+          "description": "This property is used to generate the name of the next button",
+          "type": "string",
+          "default": "\"Next\""
+        },
+        {
+          "name": "lastLabel",
+          "description": "This property is used to generate the name of the last button",
+          "type": "string",
+          "default": "\"Last\""
+        },
         {
           "name": "total",
           "description": "Set the amount of pages to navigate.",
@@ -44,6 +68,34 @@
           "type": "string",
           "default": "\"\""
         },
+        {
+          "name": "firstLabel",
+          "attribute": "firstLabel",
+          "description": "This property is used to generate the name of the first button",
+          "type": "string",
+          "default": "\"First\""
+        },
+        {
+          "name": "previousLabel",
+          "attribute": "previousLabel",
+          "description": "This property is used to generate the name of the previous button",
+          "type": "string",
+          "default": "\"Previous\""
+        },
+        {
+          "name": "nextLabel",
+          "attribute": "nextLabel",
+          "description": "This property is used to generate the name of the next button",
+          "type": "string",
+          "default": "\"Next\""
+        },
+        {
+          "name": "lastLabel",
+          "attribute": "lastLabel",
+          "description": "This property is used to generate the name of the last button",
+          "type": "string",
+          "default": "\"Last\""
+        },
         {
           "name": "total",
           "attribute": "total",

package/lib/index.js

@@ -1,6 +1,6 @@
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
-import { LitElement, html, css } from 'lit';
+import { css, LitElement, html } from 'lit';
 import { queryAll, query, property, state } from 'lit/decorators.js';
 import { UUIEvent } from '@umbraco-ui/uui-base/lib/events';
 
@@ -37,6 +37,10 @@ let UUIPaginationElement = class extends LitElement {
     this._observer = new ResizeObserver(this._calculateRange.bind(this));
     this.label = "";
     this.ariaLabel = "";
+    this.firstLabel = "First";
+    this.previousLabel = "Previous";
+    this.nextLabel = "Next";
+    this.lastLabel = "Last";
     this._total = 100;
     this._range = 0;
     this._visiblePages = [];
@@ -144,11 +148,9 @@ let UUIPaginationElement = class extends LitElement {
       look="outline"
       class="nav"
       role="listitem"
-      label="Go to first page"
+      label=${this.firstLabel}
       ?disabled=${this._current === 1}
-      @click=${() => this.goToPage(1)}>
-      First
-    </uui-button>`;
+      @click=${() => this.goToPage(1)}></uui-button>`;
   }
   renderPrevious() {
     return html`<uui-button
@@ -156,11 +158,9 @@ let UUIPaginationElement = class extends LitElement {
       look="outline"
       class="nav"
       role="listitem"
-      label="Go to previous page"
+      label=${this.previousLabel}
       ?disabled=${this._current === 1}
-      @click=${this.goToPreviousPage}>
-      Previous
-    </uui-button>`;
+      @click=${this.goToPreviousPage}></uui-button>`;
   }
   renderNext() {
     return html`<uui-button
@@ -168,11 +168,9 @@ let UUIPaginationElement = class extends LitElement {
       look="outline"
       role="listitem"
       class="nav"
-      label="Go to next page"
+      label=${this.nextLabel}
       ?disabled=${this._current === this.total}
-      @click=${this.goToNextPage}>
-      Next
-    </uui-button>`;
+      @click=${this.goToNextPage}></uui-button>`;
   }
   renderLast() {
     return html`
@@ -181,11 +179,9 @@ let UUIPaginationElement = class extends LitElement {
         look="outline"
         role="listitem"
         class="nav"
-        label="Go to last page"
+        label=${this.lastLabel}
         ?disabled=${this.total === this._current}
-        @click=${() => this.goToPage(this.total)}>
-        Last
-      </uui-button>
+        @click=${() => this.goToPage(this.total)}></uui-button>
     `;
   }
   renderDots() {
@@ -279,6 +275,18 @@ __decorateClass([
 __decorateClass([
   property({ reflect: true, attribute: "aria-label" })
 ], UUIPaginationElement.prototype, "ariaLabel", 2);
+__decorateClass([
+  property()
+], UUIPaginationElement.prototype, "firstLabel", 2);
+__decorateClass([
+  property()
+], UUIPaginationElement.prototype, "previousLabel", 2);
+__decorateClass([
+  property()
+], UUIPaginationElement.prototype, "nextLabel", 2);
+__decorateClass([
+  property()
+], UUIPaginationElement.prototype, "lastLabel", 2);
 __decorateClass([
   property({ type: Number })
 ], UUIPaginationElement.prototype, "total", 1);

package/lib/uui-pagination.element.d.ts

@@ -27,6 +27,30 @@ export declare class UUIPaginationElement extends LitElement {
      * @attr
      */
     ariaLabel: string;
+    /**
+     * This property is used to generate the name of the first button
+     * @type {string}
+     * @attr
+     */
+    firstLabel: string;
+    /**
+     * This property is used to generate the name of the previous button
+     * @type {string}
+     * @attr
+     */
+    previousLabel: string;
+    /**
+     * This property is used to generate the name of the next button
+     * @type {string}
+     * @attr
+     */
+    nextLabel: string;
+    /**
+     * This property is used to generate the name of the last button
+     * @type {string}
+     * @attr
+     */
+    lastLabel: string;
     private _total;
     /**
      * Set the amount of pages to navigate.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-pagination",
-  "version": "1.13.0",
+  "version": "1.14.0-rc.0",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,9 +30,9 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.13.0",
-    "@umbraco-ui/uui-button": "1.13.0",
-    "@umbraco-ui/uui-button-group": "1.13.0"
+    "@umbraco-ui/uui-base": "1.14.0-rc.0",
+    "@umbraco-ui/uui-button": "1.14.0-rc.0",
+    "@umbraco-ui/uui-button-group": "1.14.0-rc.0"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build && rollup -c rollup.config.js",
@@ -43,5 +43,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-pagination",
-  "gitHead": "f57b1fdfea3678b843fbec706cecb3a220f6046f"
+  "gitHead": "3dd62a7dd7fc7a38c6333c113cd942393bb437f0"
 }