q2-tecton-elements 1.10.8 → 1.11.0

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

@@ -66,9 +66,9 @@ button {
 
 :host {
   display: block;
-  margin-top: var(--tct-input-margin-top, var(--app-scale-6x, 30px));
-  margin-bottom: var(--tct-input-margin-bottom, var(--app-scale-6x, 30px));
-  font-size: var(--tct-input-font-size, var(--app-font-size, inherit));
+  margin-top: var(--tct-input-margin-top, var(--t-input-margin-top, var(--app-scale-6x, 30px)));
+  margin-bottom: var(--tct-input-margin-bottom, var(--t-input-margin-bottom, var(--app-scale-6x, 30px)));
+  font-size: var(--tct-input-font-size, var(--t-input-font-size, var(--app-font-size, inherit)));
 }
 
 :host([hidden]) {
@@ -80,51 +80,40 @@ button {
   position: relative;
 }
 
+.field-container {
+  --comp-input-tween: var(--tct-input-tween, var(--t-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))));
+}
+
 label {
   display: block;
-  padding-left: var(--tct-input-label-padding-left, 0);
-  padding-right: var(--tct-input-label-padding-right, 0);
-  margin-top: var(--tct-input-label-margin-top, 0);
-  margin-bottom: var(--tct-input-label-margin-bottom, var(--tct-scale-1, var(--app-scale-1, 5px)));
-  color: var(--tct-input-label-font-color, inherit);
-  font-size: var(--tct-input-label-font-size, inherit);
-  font-weight: var(--tct-input-label-font-weight, 600);
-  text-transform: var(--tct-input-label-text-transform, none);
-  letter-spacing: var(--tct-input-label-letter-spacing, normal);
-  transition: color var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)));
+  padding-left: var(--tct-input-label-padding-left, var(--t-input-label-padding-left, 0));
+  padding-right: var(--tct-input-label-padding-right, var(--t-input-label-padding-right, 0));
+  margin-top: var(--tct-input-label-margin-top, var(--t-input-label-margin-top, 0));
+  margin-bottom: var(--tct-input-label-margin-bottom, var(--t-input-label-margin-bottom, var(--tct-scale-1, var(--app-scale-1, 5px))));
+  color: var(--tct-input-label-font-color, var(--t-input-label-font-color, inherit));
+  font-size: var(--tct-input-label-font-size, var(--t-input-label-font-size, inherit));
+  font-weight: var(--tct-input-label-font-weight, var(--t-input-label-font-weight, 600));
+  text-transform: var(--tct-input-label-text-transform, var(--t-input-label-text-transform, none));
+  letter-spacing: var(--tct-input-label-letter-spacing, var(--t-input-label-letter-spacing, normal));
+  transition: color var(--comp-input-tween);
 }
 
 .optional-tag {
-  margin-left: var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1, 5px)));
-  color: var(--tct-input-label-optional-font-color, var(--tct-a11y-color, var(--t-a11y-gray-color, #767676)));
-  font-size: var(--tct-input-label-optional-font-size, 12px);
-  font-weight: var(--tct-input-label-optional-font-weight, 400);
+  margin-left: var(--tct-input-label-optional-margin-left, var(--t-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1, 5px))));
+  color: var(--tct-input-label-optional-font-color, var(--t-input-label-optional-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77)))));
+  font-size: var(--tct-input-label-optional-font-size, var(--t-input-label-optional-font-size, 12px));
+  font-weight: var(--tct-input-label-optional-font-weight, var(--t-input-label-optional-font-weight, 400));
 }
 
 .input-container {
   background-color: var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, #f2f2f2))));
   display: flex;
   align-items: center;
-  --comp-input-horizontal-gap: var(
-      --tct-input-horizontal-gap,
-      var(--t-input-horizontal-gap, 8px)
-  );
-  --comp-input-border-top-left-radius: var(
-      --tct-input-border-top-left-radius,
-      var(--tct-border-radius-1, var(--app-border-radius-1, 3px))
-  );
-  --comp-input-border-top-right-radius: var(
-      --tct-input-border-top-right-radius,
-      var(--tct-border-radius-1, var(--app-border-radius-1, 3px))
-  );
-  --comp-input-border-bottom-right-radius: var(
-      --tct-input-border-bottom-right-radius,
-      var(--tct-border-radius-1, var(--app-border-radius-1, 3px))
-  );
-  --comp-input-border-bottom-left-radius: var(
-      --tct-input-border-bottom-left-radius,
-      var(--tct-border-radius-1, var(--app-border-radius-1, 3px))
-  );
+  --comp-input-horizontal-gap: var(--tct-input-horizontal-gap, var(--t-input-horizontal-gap, 8px));
+  --comp-input-border-top-left-radius: var(--tct-input-border-top-left-radius, var(--t-input-border-top-left-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));
+  --comp-input-border-top-right-radius: var(--tct-input-border-top-right-radius, var(--t-input-border-top-right-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));
+  --comp-input-border-bottom-right-radius: var(--tct-input-border-bottom-right-radius, var(--t-input-border-bottom-right-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));
+  --comp-input-border-bottom-left-radius: var(--tct-input-border-bottom-left-radius, var(--t-input-border-bottom-left-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));
   --comp-input-border-radius: var(--comp-input-border-top-left-radius)
       var(--comp-input-border-top-right-radius) var(--comp-input-border-bottom-right-radius)
       var(--comp-input-border-bottom-left-radius);
@@ -139,13 +128,17 @@ label {
       3 * var(--tct-input-prefix-font-size, 14px) + var(--tct-scale-1, 5px)
   );
   --comp-input-icon-clearance: 34px;
-  --comp-input-min-height: 44px;
+  --comp-input-min-height: var(--tct-input-min-height, 44px);
   border-width: var(--comp-input-border-width);
   border-style: solid;
-  border-color: var(--tct-input-border-color, var(--t-input-border, var(--tct-gray-11, var(--t-gray-11, #cccccc))));
+  border-color: var(--tct-input-border-color, var(--t-input-border-color, var(--tct-gray-11, var(--t-gray-11, #cccccc))));
   border-radius: var(--comp-input-border-radius);
-  box-shadow: var(--tct-input-box-shadow, none);
-  transition: border-width var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))), border-color var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))), box-shadow var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)));
+  box-shadow: var(--tct-input-box-shadow, var(--t-input-box-shadow, none));
+  transition: border-width var(--comp-input-tween), border-color var(--comp-input-tween), box-shadow var(--comp-input-tween);
+}
+:host([disabled]) .input-container {
+  cursor: not-allowed;
+  opacity: var(--tct-input-disabled-opacity, var(--t-input-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));
 }
 
 .input-field {
@@ -155,109 +148,91 @@ label {
   appearance: none;
   box-sizing: border-box;
   min-height: var(--comp-input-min-height);
-  height: var(--tct-input-height, 44px);
+  height: var(--tct-input-height, var(--t-input-height, 44px));
   width: 100%;
-  padding: 0 var(--tct-input-horizontal-padding, var(--tct-scale-2, var(--app-scale-2, 10px)));
+  padding: 0 var(--tct-input-horizontal-padding, var(--t-input-horizontal-padding, var(--tct-scale-2, var(--app-scale-2, 10px))));
   background-color: transparent;
   color: var(--tct-input-font-color, var(--t-input-font-color, var(--t-text, inherit)));
-}
-
-input {
   display: inline-block;
+  text-align: var(--tct-input-align, "start");
+  /* To remove up/down arrow in number field for webkit based browser */
+  /* For Firefox */
 }
-
 .input-field:focus {
   outline: none;
   box-shadow: none;
 }
-
-/* To remove up/down arrow in number field for webkit based browser */
-.input-field::-webkit-outer-spin-button,
-.input-field::-webkit-inner-spin-button {
+.input-field::-webkit-outer-spin-button, .input-field::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
-
-/* For Firefox */
 .input-field[type=number] {
   -moz-appearance: textfield;
 }
-
-.input-container:focus-within {
-  border-width: var(--comp-input-focus-border-width, 1px);
-  border-color: var(--tct-input-focus-border-color, var(--t-input-focus, var(--tct-gray-9, var(--t-gray-9, #999999))));
-  box-shadow: var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff)), var(--tct-input-focus-box-shadow, 0 0 transparent);
+.input-field::-ms-clear {
+  display: none;
 }
-
-input::-ms-clear {
+.input-field[type=search]::-webkit-search-decoration, .input-field[type=search]::-webkit-search-cancel-button, .input-field[type=search]::-webkit-search-results-button, .input-field[type=search]::-webkit-search-results-decoration {
   display: none;
 }
+.input-field[disabled] {
+  cursor: not-allowed;
+}
+.right-aligned .input-field {
+  text-align: right;
+}
 
-input[type=search]::-webkit-search-decoration,
-input[type=search]::-webkit-search-cancel-button,
-input[type=search]::-webkit-search-results-button,
-input[type=search]::-webkit-search-results-decoration {
-  display: none;
+.input-container:focus-within {
+  border-width: var(--comp-input-focus-border-width, 1px);
+  border-color: var(--tct-input-focus-border-color, var(--t-input-focus-border-color, var(--tct-gray-9, var(--t-gray-9, #999999))));
+  box-shadow: var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff)), var(--tct-input-focus-box-shadow, var(--t-input-focus-box-shadow, 0 0 transparent));
 }
 
-input::placeholder,
+.input-field::placeholder,
 .placeholder-text {
-  color: var(--tct-input-placeholder-font-color, var(--t-input-placeholder-font-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666))))));
+  color: var(--tct-input-placeholder-font-color, var(--t-input-placeholder-font-color, var(--t-textA, var(--app-gray-d1, rgba(77, 77, 77, 0.77)))));
 }
 
 .pseudo-input {
   display: inline-flex;
   align-items: center;
 }
-
 .pseudo-input span {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.input-icons-container-left:empty {
-  display: none;
-}
-
-.input-icons-container-left {
+.input-icons-container-left,
+.input-icons-container-right {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: var(--comp-input-horizontal-gap);
-  padding-left: var(--comp-input-horizontal-gap);
 }
-
+.input-icons-container-left:empty,
 .input-icons-container-right:empty {
   display: none;
 }
 
+.input-icons-container-left {
+  padding-left: var(--comp-input-horizontal-gap);
+}
+
 .input-icons-container-right {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: var(--comp-input-horizontal-gap);
   padding-right: var(--comp-input-horizontal-gap);
 }
-
 .input-icons-container-right .btn-visibility-toggle {
   color: var(--tct-primary, var(--t-primary, #006eb2));
   font-size: 12px;
 }
 
 q2-icon {
-  margin-top: calc(var(--tct-input-border-top-width, 1px) / 2);
-  margin-bottom: calc(var(--tct-input-border-bottom-width, 1px) / 2);
+  margin-top: calc(var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) / 2);
+  margin-bottom: calc(var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) / 2);
   pointer-events: none;
-  color: var(--tct-input-icon-stroke-primary, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))));
-  --tct-icon-stroke-primary: var(
-      --tct-input-icon-stroke-primary,
-      var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))
-  );
-  --t-icon-stroke-primary: var(
-      --tct-input-icon-stroke-primary,
-      var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))
-  );
+  color: var(--tct-input-icon-stroke-primary, var(--t-input-icon-stroke-primary, var(--t-textA, var(--app-gray, rgba(77, 77, 77, 0.77)))));
+  --tct-icon-stroke-primary: var(--tct-input-icon-stroke-primary, var(--t-input-icon-stroke-primary, var(--t-textA, var(--app-gray, rgba(77, 77, 77, 0.77)))));
 }
 
 .icon-left-muted {
@@ -272,30 +247,29 @@ q2-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-height: calc( var(--comp-input-min-height) - var(--tct-input-focus-border-top-width, 1px) - var(--tct-input-focus-border-bottom-width, 1px) );
-  height: calc( var(--tct-input-height, 44px) - var(--tct-input-focus-border-top-width, 1px) - var(--tct-input-focus-border-bottom-width, 1px) );
-  font-size: var(--tct-input-prefix-font-size, inherit);
-  color: var(--tct-input-prefix-font-color, inherit);
-  background-color: var(--tct-input-prefix-bg, var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, #f2f2f2)))));
-  transition: color var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))), background-color var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)));
+  min-height: calc( var(--comp-input-min-height) - var(--tct-input-focus-border-top-width, var(--t-input-focus-border-top-width, 1px)) - var(--tct-input-focus-border-bottom-width, var(--t-input-focus-border-bottom-width, 1px)) );
+  height: calc( var(--tct-input-height, var(--t-input-height, 44px)) - var(--tct-input-focus-border-top-width, var(--t-input-focus-border-top-width, 1px)) - var(--tct-input-focus-border-bottom-width, var(--t-input-focus-border-bottom-width, 1px)) );
+  font-size: var(--tct-input-prefix-font-size, var(--t-input-prefix-font-size, inherit));
+  color: var(--tct-input-prefix-font-color, var(--t-input-prefix-font-color, inherit));
+  background-color: var(--tct-input-prefix-bg, var(--t-input-prefix-bg, var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, #f2f2f2))))));
+  transition: color var(--comp-input-tween), background-color var(--comp-input-tween);
 }
 
 .input-prefix {
-  border-top-left-radius: calc( var(--comp-input-border-top-left-radius) - var(--tct-input-border-top-width, 1px) - var(--tct-input-border-left-width, 1px) );
-  border-bottom-left-radius: calc( var(--comp-input-border-bottom-left-radius) - var(--tct-input-border-bottom-width, 1px) - var(--tct-input-border-left-width, 1px) );
+  border-top-left-radius: calc( var(--comp-input-border-top-left-radius) - var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) - var(--tct-input-border-left-width, var(--t-input-border-left-width, 1px)) );
+  border-bottom-left-radius: calc( var(--comp-input-border-bottom-left-radius) - var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) - var(--tct-input-border-left-width, var(--t-input-border-left-width, 1px)) );
   pointer-events: none;
   /* used to allow iOS voiceover to display keyboard in input TCT-1194 */
 }
 
 .input-suffix {
-  border-top-right-radius: calc( var(--comp-input-border-top-right-radius) - var(--tct-input-border-top-width, 1px) - var(--tct-input-border-right-width, 1px) );
-  border-bottom-right-radius: calc( var(--comp-input-border-bottom-right-radius) - var(--tct-input-border-bottom-width, 1px) - var(--tct-input-border-right-width, 1px) );
+  border-top-right-radius: calc( var(--comp-input-border-top-right-radius) - var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) - var(--tct-input-border-right-width, var(--t-input-border-right-width, 1px)) );
+  border-bottom-right-radius: calc( var(--comp-input-border-bottom-right-radius) - var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) - var(--tct-input-border-right-width, var(--t-input-border-right-width, 1px)) );
 }
 
 .icon-error {
   color: var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));
   --tct-icon-stroke-primary: var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));
-  --t-icon-stroke-primary: var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));
 }
 
 .pw-show {
@@ -304,8 +278,8 @@ q2-icon {
 }
 
 .btn-clear {
-  margin-top: calc(var(--tct-input-border-top-width, 1px) / 2);
-  margin-bottom: calc(var(--tct-input-border-bottom-width, 1px) / 2);
+  margin-top: calc(var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) / 2);
+  margin-bottom: calc(var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) / 2);
   height: 22px;
   --tct-btn-icon-width: 17px;
   --tct-btn-icon-height: 22px;
@@ -315,37 +289,24 @@ q2-icon {
 .messages-container {
   height: 0px;
   overflow: hidden;
-  background-color: var(--tct-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))));
-  box-shadow: var(--tct-input-message-box-shadow, var(--tct-box-shadow-1, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))));
-  transition: height var(--tct-input-messages-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease)));
+  background-color: var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));
+  box-shadow: var(--tct-input-message-box-shadow, var(--t-input-message-box-shadow, var(--tct-box-shadow-1, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3)))));
+  transition: height var(--tct-input-messages-tween, var(--t-input-messages-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));
   margin-top: 2px;
   z-index: 1;
   position: absolute;
   width: 100%;
-  color: var(--tct-input-messages-font-color, inherit);
-}
-
-:host([disabled]) .input-container {
-  cursor: not-allowed;
-  opacity: var(--tct-input-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));
-}
-
-.input-field[disabled] {
-  cursor: not-allowed;
-}
-
-.right-aligned .input-field {
-  text-align: right;
+  color: var(--tct-input-messages-font-color, var(--t-input-messages-font-color, inherit));
 }
 
 .has-error label {
-  color: var(--tct-input-error-label-font-color, var(--tct-input-label-font-color, inherit));
+  color: var(--tct-input-error-label-font-color, var(--t-input-error-label-font-color, var(--tct-input-label-font-color, var(--t-input-label-font-color, inherit))));
 }
 
 .has-error:not(.has-focus) .input-prefix,
 .has-error:not(.has-focus) .input-suffix {
-  color: var(--tct-input-error-prefix-font-color, inherit);
-  background-color: var(--tct-input-error-prefix-bg, var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--app-var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));
+  color: var(--tct-input-error-prefix-font-color, var(--t-input-error-prefix-font-color, inherit));
+  background-color: var(--tct-input-error-prefix-bg, var(--t-input-error-prefix-bg, var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))))));
 }
 
 .has-error .input-container:not(:focus-within) {
@@ -359,5 +320,5 @@ q2-icon {
 
 .vertical-separator {
   height: calc(var(--comp-input-min-height) - 2px);
-  border-right: 1px solid var(--tct-input-prefix-border-color, var(--tct-input-border-color, var(--t-input-border, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))))));
+  border-right: 1px solid var(--tct-input-prefix-border-color, var(--t-input-prefix-border-color, var(--tct-input-border-color, var(--t-input-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))))));
 }

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
+    }]; }
+}