q2-tecton-elements 1.17.1 → 1.19.0

package/dist/collection/components/q2-option-list/styles.css

@@ -8,7 +8,7 @@
 
 *:focus {
   outline: none;
-  box-shadow: var(--const-global-focus, 0 0 0 2px #33b4ff);
+  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C);
 }
 
 :host {
@@ -69,61 +69,13 @@ button {
   position: relative;
   width: 100%;
   display: block;
+  line-height: var(--tct-option-list-line-height, var(--t-option-list-line-height, var(--app-line-height, 1.428571429em)));
 }
 
 .content {
-  margin-top: var(--tct-option-list-margin, var(--t-option-list-margin, var(--app-scale-1x, 5px)));
-  position: absolute;
-  height: 0;
-  opacity: 0;
-  visibility: hidden;
-  background-color: var(--app-white, #ffffff);
-  color: var(--t-text, #4d4d4d);
-  z-index: 100;
-  width: max-content;
-  min-width: var(--tct-option-list-min-width, var(--t-option-list-min-width, 135px));
-  box-shadow: var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3));
-  overflow: hidden;
   text-align: start;
-  transition: opacity var(--app-tween-1, 0.2s ease);
-  border-radius: var(--tct-option-list-border-radius, var(--t-option-list-border-radius, 0));
-  --comp-scrollbar-size: var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));
-  --comp-scrollbar-border-radius: var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));
-  --comp-scrollbar-color: var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));
-  scrollbar-width: thin;
-  scrollbar-color: var(--comp-scrollbar-color) transparent;
-}
-.content::-webkit-scrollbar {
-  width: var(--comp-scrollbar-size);
-  height: var(--comp-scrollbar-size);
-  margin: 5px;
-}
-.content::-webkit-scrollbar-thumb {
-  background: var(--comp-scrollbar-color);
-  border-radius: var(--comp-scrollbar-border-radius);
-}
-.content::-webkit-scrollbar-track {
-  background: transparent;
-  border-radius: var(--comp-scrollbar-border-radius);
-}
-:host(:not([align=right])) .content {
-  left: 0;
-}
-:host([align=right]) .content {
-  right: 0;
-}
-:host([open]) .content {
-  display: block;
-  height: auto;
-  overflow: auto;
-  opacity: 1;
-  visibility: visible;
 }
 :host([is-sizeable]) .content {
   display: block;
   height: auto;
-}
-:host([alignment=right]) .content {
-  left: unset;
-  right: 0;
 }

package/dist/collection/components/q2-pagination/index.js

@@ -1,4 +1,4 @@
-import { Component, State, Prop, h, Listen, Element, Event } from '@stencil/core';
+import { h } from '@stencil/core';
 import { isEventFromElement, loc, nextPaint, overrideFocus } from 'src/utils';
 export class Q2Pagination {
   constructor() {
@@ -17,6 +17,14 @@ export class Q2Pagination {
       }
       this.change.emit({ page });
     };
+    this.recordType = undefined;
+    this.perPage = undefined;
+    this.total = undefined;
+    this.page = undefined;
+    this.pages = undefined;
+    this.recordsOnly = undefined;
+    this.pagesOnly = undefined;
+    this.isSmall = undefined;
   }
   ////////// LIFECYCLE HOOKS ////////
   componentDidLoad() {
@@ -89,187 +97,189 @@ export class Q2Pagination {
     const { pagesOnly, isFullViewHidden, recordTypeWithDefault: recordType, totalPages, totalWithDefault: total, pageWithDefault: page, currentRange, } = this;
     const onFirstPage = page === 1;
     const onLastPage = page === totalPages;
-    return (h("nav", { class: "container", ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') },
-      h("div", { class: "description", "test-id": "description" }, pagesOnly
-        ? loc('tecton.element.pagination.pages', {
-          current: page,
-          total: totalPages,
-        })
-        : loc('tecton.element.pagination.description', {
-          range: currentRange,
-          recordType: recordType.toLowerCase(),
-          total: total.toLocaleString(),
-        })),
-      h("div", { class: "btn-group" },
-        h("q2-btn", { label: "tecton.element.pagination.goToFirstPage", disabled: onFirstPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true },
-          h("q2-icon", { type: "chevron-double-left" })),
-        h("q2-btn", { label: loc('tecton.element.pagination.goToPage', [page - 1]), disabled: onFirstPage, onClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true },
-          h("q2-icon", { type: "chevron-left" }))),
-      h("div", { class: "controls", hidden: isFullViewHidden, "test-id": "controls" },
-        h("span", { "aria-hidden": "true" }, loc('tecton.element.pagination.page')),
-        h("div", { class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) },
-          h("q2-input", { type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${loc('tecton.element.pagination.page')} (${loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => this.handlePageChange(event.detail.value), "test-id": "pageInput", current: "page", ref: el => (this.inputField = el) })),
-        h("span", { "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))),
-      h("div", { class: "btn-group" },
-        h("q2-btn", { label: loc('tecton.element.pagination.goToPage', [page + 1]), disabled: onLastPage, onClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true },
-          h("q2-icon", { type: "chevron-right" })),
-        h("q2-btn", { label: "tecton.element.pagination.goToLastPage", disabled: onLastPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true },
-          h("q2-icon", { type: "chevron-double-right" })))));
+    return (h("nav", { class: "container", ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { class: "description", "test-id": "description" }, pagesOnly
+      ? loc('tecton.element.pagination.pages', {
+        current: page,
+        total: totalPages,
+      })
+      : loc('tecton.element.pagination.description', {
+        range: currentRange,
+        recordType: recordType.toLowerCase(),
+        total: total.toLocaleString(),
+      })), h("div", { class: "btn-group" }, h("q2-btn", { label: loc('tecton.element.pagination.goToFirstPage'), disabled: onFirstPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { type: "chevron-double-left" })), h("q2-btn", { label: loc('tecton.element.pagination.goToPages', {
+        next: page - 1,
+        total: totalPages,
+      }), disabled: onFirstPage, onClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { type: "chevron-left" }))), h("div", { class: "controls", hidden: isFullViewHidden, "test-id": "controls" }, h("span", { "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${loc('tecton.element.pagination.page')} (${loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => this.handlePageChange(event.detail.value), "test-id": "pageInput", current: "page", ref: el => (this.inputField = el) })), h("span", { "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { class: "btn-group" }, h("q2-btn", { label: loc('tecton.element.pagination.goToPages', {
+        next: page + 1,
+        total: totalPages,
+      }), disabled: onLastPage, onClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { type: "chevron-right" })), h("q2-btn", { label: "tecton.element.pagination.goToLastPage", disabled: onLastPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { type: "chevron-double-right" })))));
   }
   static get is() { return "q2-pagination"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["styles.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get properties() { return {
-    "recordType": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "record-type",
-      "reflect": false
-    },
-    "perPage": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "per-page",
-      "reflect": false
-    },
-    "total": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "total",
-      "reflect": true
-    },
-    "page": {
-      "type": "number",
-      "mutable": true,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "page",
-      "reflect": true
-    },
-    "pages": {
-      "type": "number",
-      "mutable": true,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "recordType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "record-type",
+        "reflect": false
       },
-      "attribute": "pages",
-      "reflect": true
-    },
-    "recordsOnly": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "perPage": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "per-page",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "total": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "total",
+        "reflect": true
       },
-      "attribute": "records-only",
-      "reflect": true
-    },
-    "pagesOnly": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "page": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "page",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "pages": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "pages",
+        "reflect": true
       },
-      "attribute": "pages-only",
-      "reflect": true
-    }
-  }; }
-  static get states() { return {
-    "isSmall": {}
-  }; }
-  static get events() { return [{
-      "method": "change",
-      "name": "change",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "recordsOnly": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "records-only",
+        "reflect": true
       },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+      "pagesOnly": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "pages-only",
+        "reflect": true
       }
-    }]; }
+    };
+  }
+  static get states() {
+    return {
+      "isSmall": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "change",
+        "name": "change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "hostElement"; }
-  static get listeners() { return [{
-      "name": "focus",
-      "method": "onHostElementFocus",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+  static get listeners() {
+    return [{
+        "name": "focus",
+        "method": "onHostElementFocus",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

package/dist/collection/components/q2-pagination/styles.css

@@ -8,7 +8,7 @@
 
 *:focus {
   outline: none;
-  box-shadow: var(--const-global-focus, 0 0 0 2px #33b4ff);
+  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C);
 }
 
 :host {