@knowark/componarkjs 1.12.0 → 1.13.0

package/lib/components/paginator/components/paginator.js

@@ -7,7 +7,7 @@ export class Paginator extends Component {
     this.binding = 'paginator-listen'
     this.collectionSize = (
       context.collectionSize || this.collectionSize || '120')
-    this.pageSize = context.pageSize || this.pageSize || '24'
+    this.pageSize = context.pageSize || this.pageSize || '60'
     this.currentPage = context.currentPage || this.currentPage || '1'
     this.displayedPages = (
       context.displayedPages || this.displayedPages || '12')
@@ -23,14 +23,13 @@ export class Paginator extends Component {
 
   render () {
     this._grabSlots()
-    this.content = /* html */ `
+    this.content = /* html */`
       <div class="ark-paginator__body">
         <div data-start class="ark-paginator__buttons">
         </div>
 
         <div data-middle paginator-listen on-click="_move"
-        class="ark-paginator__pages">
-        </div>
+        class="ark-paginator__pages"></div>
 
         <div data-end class="ark-paginator__buttons">
         </div>
@@ -121,7 +120,7 @@ export class Paginator extends Component {
   }
 
   _grabSlots() {
-    const [pageButton] = [this.slots.general].flat()
+    const [pageButton] = [this.slots.page].flat()
     this.pageButton = this.pageButton ?? pageButton
     const [firstButton] = [this.slots.first].flat()
     this.firstButton = this.firstButton ?? firstButton
@@ -134,8 +133,8 @@ export class Paginator extends Component {
   }
 
   _buildButton (element, handler, content, attributes = []) {
-    const button = element ?? document.createElement('button')
-    button.textContent = button.textContent || content
+    const button = (element ?? document.createElement('button')).cloneNode(true)
+    button.innerHTML = button.innerHTML || content
     if (handler) {
       button.setAttribute('paginator-listen', '')
       button.setAttribute('on-click', handler)

package/lib/components/paginator/components/paginator.test.js

@@ -1,4 +1,4 @@
-import { Paginator } from './paginator.js'
+import './paginator.js'
 
 describe('Paginator', () => {
   let container = null
@@ -129,9 +129,11 @@ describe('Paginator', () => {
   it('can be provided with custom styleable elements', () => {
     container.innerHTML = /* html */ `
       <ark-paginator page-size="12" displayed-pages="5">
-        <button data-first slot="first"></button>
-        <button data-previous slot="previous"></button>
-        <button data-page-general></button>
+        <button data-first slot="first">
+          <span style="pointer-events: none">FIRST</span>
+        </button>
+        <button data-previous slot="previous">BACK</button>
+        <button data-page-general slot="page"></button>
         <button data-next slot="next"></button>
         <button data-last slot="last"></button>
       </ark-paginator>
@@ -139,8 +141,10 @@ describe('Paginator', () => {
 
     const paginator = container.querySelector('ark-paginator')
 
-    expect(paginator.querySelector('[data-first]')).toBeTruthy()
-    expect(paginator.querySelector('[data-previous]')).toBeTruthy()
+    expect(paginator.querySelector('[data-first]').innerHTML.trim()).toEqual(
+      '<span style="pointer-events: none">FIRST</span>')
+    expect(paginator.querySelector('[data-previous]').innerHTML.trim()).toEqual(
+      'BACK')
     expect(paginator.querySelector('[data-page-general]')).toBeTruthy()
     expect(paginator.querySelector('[data-next]')).toBeTruthy()
     expect(paginator.querySelector('[data-last]')).toBeTruthy()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knowark/componarkjs",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "author": "Knowark",
   "description": "Knowark's Web Components Library",
   "license": "ISC",