@umbraco-ui/uui-pagination 0.0.4 → 0.2.0

package/README.md

@@ -4,6 +4,10 @@
 
 Umbraco style pagination component. By implementing a resizeObserver it changes the number of visible buttons to fit the width of the container it sits in. Check this out in the [Storybook](https://uui.umbraco.com/?path=/story/uui-pagination--aaa-overview). Uses `<uui-button></uui-button>` and `<uui-button-group></uui-button-group>`.
 
+### See it in action
+
+Preview the component on [Storybook](https://uui.umbraco.com/?path=/story/uui-pagination)
+
 ## Installation
 
 ### ES imports

package/lib/index.js

@@ -1,4 +1,5 @@
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
+import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
 import { css, LitElement, html } from 'lit';
 import { queryAll, query, property, state } from 'lit/decorators.js';
 import { UUIEvent } from '@umbraco-ui/uui-base/lib/events';
@@ -41,6 +42,8 @@ let UUIPaginationElement = class extends LitElement {
     if (!this.hasAttribute("role"))
       this.setAttribute("role", "navigation");
     this._visiblePages = this._generateVisiblePages(this.current);
+    demandCustomElement(this, "uui-button");
+    demandCustomElement(this, "uui-button-group");
   }
   disconnectedCallback() {
     this._observer.disconnect();
@@ -109,7 +112,7 @@ let UUIPaginationElement = class extends LitElement {
       look="outline"
       class="nav"
       role="listitem"
-      aria-label="Go to first page"
+      label="Go to first page"
       ?disabled=${this._current === 1}
       @click=${() => this.goToPage(1)}>
       First
@@ -121,7 +124,7 @@ let UUIPaginationElement = class extends LitElement {
       look="outline"
       class="nav"
       role="listitem"
-      aria-label="Go to previous page"
+      label="Go to previous page"
       ?disabled=${this._current === 1}
       @click=${this.goToPreviousPage}>
       Previous
@@ -133,7 +136,7 @@ let UUIPaginationElement = class extends LitElement {
       look="outline"
       role="listitem"
       class="nav"
-      aria-label="Go to next page"
+      label="Go to next page"
       ?disabled=${this._current === this.total}
       @click=${this.goToNextPage}>
       Next
@@ -146,7 +149,7 @@ let UUIPaginationElement = class extends LitElement {
         look="outline"
         role="listitem"
         class="nav"
-        aria-label="Go to last page"
+        label="Go to last page"
         ?disabled=${this.total === this._current}
         @click=${() => this.goToPage(this.total)}>
         Last
@@ -154,7 +157,12 @@ let UUIPaginationElement = class extends LitElement {
     `;
   }
   renderDots() {
-    return html`<uui-button compact look="outline" tabindex="-1" class="dots"
+    return html`<uui-button
+      compact
+      look="outline"
+      tabindex="-1"
+      class="dots"
+      label="More pages"
       >...</uui-button
     > `;
   }
@@ -163,7 +171,7 @@ let UUIPaginationElement = class extends LitElement {
       compact
       look="outline"
       role="listitem"
-      aria-label="Go to page ${page}"
+      label="Go to page ${page}"
       class=${"page" + (page === this._current ? " active" : "")}
       tabindex=${page === this._current ? "-1" : ""}
       @click=${() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-pagination",
-  "version": "0.0.4",
+  "version": "0.2.0",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,9 +30,9 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "0.0.17",
-    "@umbraco-ui/uui-button": "0.1.10",
-    "@umbraco-ui/uui-button-group": "0.0.12"
+    "@umbraco-ui/uui-base": "0.1.1",
+    "@umbraco-ui/uui-button": "0.2.1",
+    "@umbraco-ui/uui-button-group": "0.1.1"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
@@ -43,5 +43,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-pagination",
-  "gitHead": "3b7c6cf892e89054b2980b19d8c2f8bead2752e8"
+  "gitHead": "3832880dc1f6f0db202b68530a11603299efe075"
 }