@quandis/qbo4.ui 4.0.1-CI-20241022-235233 → 4.0.1-CI-20241024-193719

package/package.json

@@ -3,7 +3,7 @@
   "author": "Quandis, Inc.",
   "license": "MIT",
   "type": "module",
-  "version": "4.0.1-CI-20241022-235233",
+  "version": "4.0.1-CI-20241024-193719",
   "workspaces": [
     "code"
   ],

package/scss/qboui.scss

@@ -101,6 +101,18 @@
     }
 }
 
+.qbo-paginate.small {
+    @extend .pagination-sm;
+
+    li.pageSize {
+        @extend .input-group-sm;
+
+        input {
+            @extend .form-control-sm;
+        }
+    }
+}
+
 
 /* Sidebar - Start */
 aside.qbo-sidebar {

package/src/qbo/Program.d.ts

@@ -36,6 +36,7 @@ export * from './qbo-selectable.js';
 export * from './qbo-table.js';
 export * from './qbo-user-preferences.js';
 export * from './qbo-validate.js';
+export * from './styles.js';
 export declare function matches(source: any, match: any, wildCard?: string, ignoreCase?: boolean): boolean;
 export declare function elementData(element: HTMLElement): Record<string, string>;
 export declare function elementDate(date: string): string;

package/src/qbo/Program.js

@@ -25,6 +25,7 @@ export * from './qbo-selectable.js';
 export * from './qbo-table.js';
 export * from './qbo-user-preferences.js';
 export * from './qbo-validate.js';
+export * from './styles.js';
 export function matches(source, match, wildCard = "*", ignoreCase = true) {
     match = match.replace(/([.+^${}()|[\]\\])/g, '\\$1');
     match = match.replace(new RegExp('\\' + wildCard, 'g'), ".*");

package/src/qbo/Program.ts

@@ -42,6 +42,7 @@ export * from './qbo-selectable.js';
 export * from './qbo-table.js';
 export * from './qbo-user-preferences.js';
 export * from './qbo-validate.js';
+export * from './styles.js';
 
 export function matches(source, match, wildCard = "*", ignoreCase = true) {
     match = match.replace(/([.+^${}()|[\]\\])/g, '\\$1');

package/src/qbo/RestApiService.js

@@ -1,7 +1,7 @@
 import { services } from "./Services.js";
 import { substitute } from "./qbo-json.js";
 export class RestApiService {
-    constructor(apiEndpoint, headers = { 'Content-Type': 'application/json' }, method = null) {
+    constructor(apiEndpoint, headers = {}, method = null) {
         this.relativePath = '';
         this.apiEndpoint = apiEndpoint;
         this.headers = headers;

package/src/qbo/RestApiService.ts

@@ -9,7 +9,7 @@ export class RestApiService implements IApiService {
     private method: string | null;
     public relativePath: string = '';
 
-    constructor(apiEndpoint: string, headers: HeadersInit = { 'Content-Type': 'application/json' }, method: string | null = null) {
+    constructor(apiEndpoint: string, headers: HeadersInit = { }, method: string | null = null) {
         this.apiEndpoint = apiEndpoint;
         this.headers = headers;
         this.method = method;

package/src/qbo/qbo-paginate.js

@@ -90,13 +90,13 @@ let QboPaginate = class QboPaginate extends LitElement {
       <nav aria-label="Page navigation">
         <ul class="qbo-paginate">
           <li class="${this.currentPage === 1 ? 'disabled' : ''}">
-            <a aria-label="Previous" @click="${(e) => this.goToPage(this.currentPage--)}">
+            <a aria-label="Previous" @click="${(e) => this.goToPage(--this.currentPage)}">
               <span aria-hidden="true">&laquo;</span>
             </a>
           </li>
           ${this.renderPageNumbers()}
           <li class="${this.currentPage === this.maxPage ? 'disabled' : ''}">
-            <a aria-label="Next" @click="${(e) => this.goToPage(this.currentPage++)}">
+            <a aria-label="Next" @click="${(e) => this.goToPage(++this.currentPage)}">
               <span aria-hidden="true">&raquo;</span>
             </a>
           </li>

package/src/qbo/qbo-paginate.ts

@@ -104,13 +104,13 @@ export class QboPaginate extends LitElement {
       <nav aria-label="Page navigation">
         <ul class="qbo-paginate">
           <li class="${this.currentPage === 1 ? 'disabled' : ''}">
-            <a aria-label="Previous" @click="${(e) => this.goToPage(this.currentPage--) }">
+            <a aria-label="Previous" @click="${(e) => this.goToPage(--this.currentPage) }">
               <span aria-hidden="true">&laquo;</span>
             </a>
           </li>
           ${this.renderPageNumbers()}
           <li class="${this.currentPage === this.maxPage ? 'disabled' : ''}">
-            <a aria-label="Next" @click="${(e) => this.goToPage(this.currentPage++)}">
+            <a aria-label="Next" @click="${(e) => this.goToPage(++this.currentPage)}">
               <span aria-hidden="true">&raquo;</span>
             </a>
           </li>

package/src/qbo/qbo-selectable.d.ts

@@ -11,6 +11,7 @@ export declare class QboSelectable extends LitElement {
     type: string | null;
     selected: boolean;
     mode: Mode;
+    toggleCheckbox: boolean;
     private selectedItems;
     target: HTMLElement | ShadowRoot | null;
     private _previousItem;

package/src/qbo/qbo-selectable.js

@@ -25,6 +25,7 @@ let QboSelectable = class QboSelectable extends LitElement {
         this.type = null;
         this.selected = false;
         this.mode = Mode.Single;
+        this.toggleCheckbox = true;
         this.selectedItems = [];
         this.target = null;
         this._previousItem = null;
@@ -100,6 +101,13 @@ let QboSelectable = class QboSelectable extends LitElement {
         }
         item.classList.toggle(this.classSelected, selected);
         item.classList.toggle(this.classUnselected, !selected);
+        if (this.toggleCheckbox) {
+            const checkbox = item instanceof HTMLInputElement && item.type === 'checkbox'
+                ? item
+                : item.querySelector('input[type=checkbox]');
+            if (checkbox)
+                checkbox.checked = selected;
+        }
         const index = this.selectedItems.indexOf(item);
         if (selected && index === -1) {
             this.selectedItems.push(item);
@@ -150,6 +158,10 @@ __decorate([
     property({ type: Mode }),
     __metadata("design:type", Object)
 ], QboSelectable.prototype, "mode", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Boolean)
+], QboSelectable.prototype, "toggleCheckbox", void 0);
 __decorate([
     property({ attribute: false }),
     __metadata("design:type", Object)

package/src/qbo/qbo-selectable.ts

@@ -31,6 +31,9 @@ export class QboSelectable extends LitElement {
     @property({ type: Mode })
     mode = Mode.Single;
 
+    @property()
+    toggleCheckbox: boolean = true;
+
     private selectedItems: HTMLElement[] = [];
 
     @property({ attribute: false })
@@ -121,6 +124,14 @@ export class QboSelectable extends LitElement {
         item.classList.toggle(this.classSelected, selected);
         item.classList.toggle(this.classUnselected, !selected);
 
+        if (this.toggleCheckbox) {
+            const checkbox = item instanceof HTMLInputElement && item.type === 'checkbox'
+                ? item
+                : item.querySelector('input[type=checkbox]') as HTMLInputElement | null;
+            if (checkbox)
+                checkbox.checked = selected;
+        }
+
         const index = this.selectedItems.indexOf(item);
         if (selected && index === -1) {
             this.selectedItems.push(item);