q2-tecton-elements 1.12.0-alpha.0 → 1.12.2

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

@@ -0,0 +1,128 @@
+* {
+  box-sizing: border-box;
+}
+
+*:active {
+  outline: none;
+}
+
+*:focus {
+  outline: none;
+  box-shadow: var(--const-global-focus);
+}
+
+:host {
+  box-shadow: none !important;
+}
+
+::-moz-focus-inner {
+  border: none;
+}
+
+input,
+textarea,
+button {
+  font-family: inherit;
+  font-size: inherit;
+}
+
+:host(.sr),
+:host(.sr) button {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}
+
+.sr,
+.sr button {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}
+
+.hidden {
+  display: none;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.invisible {
+  visibility: hidden;
+}
+
+:host {
+  position: relative;
+  width: 100%;
+  display: block;
+}
+
+.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);
+  color: var(--t-font-color);
+  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);
+  overflow: hidden;
+  text-align: start;
+  transition: opacity var(--app-tween-1);
+  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

@@ -0,0 +1,277 @@
+import { Component, State, Prop, h, Listen, Element, Event } from '@stencil/core';
+import { isEventFromElement, loc, nextPaint, overrideFocus } from 'src/utils';
+export class Q2Pagination {
+  constructor() {
+    this.handlePageChange = (page) => {
+      const { totalPages, inputField } = this;
+      if (page < 1) {
+        page = 1;
+      }
+      else if (page > totalPages) {
+        page = totalPages;
+      }
+      if (inputField.value !== `${page}`)
+        inputField.value = `${page}`;
+      if (!this.hostElement.onchange) {
+        this.page = page;
+      }
+      this.change.emit({ value: page });
+    };
+  }
+  ////////// LIFECYCLE HOOKS ////////
+  componentDidLoad() {
+    if (this.recordsOnly || this.pagesOnly)
+      return;
+    this.containerWidth = this.containerElement.clientWidth;
+    this.resizeObserver = new ResizeObserver(() => this.checkSize());
+    this.resizeObserver.observe(this.hostElement);
+    overrideFocus(this.hostElement);
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
+  onHostElementFocus(event) {
+    var _a;
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    const { isFullViewHidden, containerElement, inputField } = this;
+    if (isFullViewHidden) {
+      (_a = containerElement.querySelector('q2-btn:not([disabled])')) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    else {
+      inputField.focus();
+    }
+  }
+  get isFullViewHidden() {
+    return this.isSmall || this.recordsOnly || this.pagesOnly;
+  }
+  get pageWithDefault() {
+    return this.page || 1;
+  }
+  get perPageWithDefault() {
+    return this.perPage || 10;
+  }
+  get totalWithDefault() {
+    return this.total || 0;
+  }
+  get recordTypeWithDefault() {
+    return this.recordType || loc('tecton.element.pagination.defaultRecordType');
+  }
+  get currentRange() {
+    const { perPageWithDefault: perPage, totalWithDefault: total, pageWithDefault: page } = this;
+    const start = (page - 1) * perPage + 1;
+    const end = Math.min(page * perPage, total);
+    return `${start} - ${end}`;
+  }
+  get totalPages() {
+    const { pagesOnly, totalWithDefault: total, perPageWithDefault: perPage, pages } = this;
+    if (pagesOnly && pages && !isNaN(parseInt(`${pages}`)))
+      return pages;
+    return Math.ceil(total / perPage);
+  }
+  checkSize() {
+    const { hostElement, containerElement } = this;
+    const isOverflowing = this.containerWidth > hostElement.clientWidth;
+    this.isSmall = isOverflowing;
+    if (isOverflowing)
+      return;
+    nextPaint(() => {
+      const containerWidthHasNotChanged = this.containerWidth === containerElement.clientWidth;
+      if (containerWidthHasNotChanged)
+        return;
+      this.containerWidth = containerElement.clientWidth;
+      this.checkSize();
+    });
+  }
+  ////////// OBSERVERS //////////
+  render() {
+    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" })))));
+  }
+  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": ""
+      },
+      "attribute": "pages",
+      "reflect": true
+    },
+    "recordsOnly": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "records-only",
+      "reflect": true
+    },
+    "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
+    }]; }
+}

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

@@ -0,0 +1,120 @@
+* {
+  box-sizing: border-box;
+}
+
+*:active {
+  outline: none;
+}
+
+*:focus {
+  outline: none;
+  box-shadow: var(--const-global-focus);
+}
+
+:host {
+  box-shadow: none !important;
+}
+
+::-moz-focus-inner {
+  border: none;
+}
+
+input,
+textarea,
+button {
+  font-family: inherit;
+  font-size: inherit;
+}
+
+:host(.sr),
+:host(.sr) button {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}
+
+.sr,
+.sr button {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}
+
+.hidden {
+  display: none;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.invisible {
+  visibility: hidden;
+}
+
+:host {
+  text-align: right;
+  display: block;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.container {
+  display: inline-flex;
+  column-gap: var(--tct-pagination-column-gap, var(--t-pagination-column-gap, var(--app-scale-2x, 10px)));
+  align-items: center;
+  height: var(--tct-pagination-height, var(--t-pagination-height, 44px));
+}
+
+.btn-group {
+  display: flex;
+  gap: var(--tct-pagination-btn-gap, var(--t-pagination-btn-gap, 0));
+}
+
+.description,
+.controls {
+  white-space: nowrap;
+}
+
+.controls {
+  display: grid;
+  grid-template-columns: auto 50px auto;
+  align-items: center;
+  gap: var(--tct-pagination-controls-gap, var(--t-pagination-controls-gap, var(--app-scale-1x, 5px)));
+}
+.controls[hidden] {
+  display: none;
+}
+
+.input-wrapper {
+  height: var(--tct-pagination-height, var(--t-pagination-height, 44px));
+  display: flex;
+  align-items: center;
+}
+
+q2-icon {
+  --tct-icon-size: var(--tct-pagination-icon-size, var(--t-pagination-icon-size, 12px));
+  color: var(--tct-pagination-icon-color, var(--t-pagination-icon-color, var(--t-text, #4d4d4d)));
+}
+
+q2-input {
+  --tct-input-margin-top: 0;
+  --tct-input-margin-bottom: 0;
+  --tct-input-height: var(--tct-pagination-input-height, var(--t-pagination-input-height, 30px));
+  --tct-input-min-height: var(--tct-input-height);
+  --tct-input-align: center;
+}