q2-tecton-elements 1.23.0-alpha.0 → 1.23.0

package/dist/collection/components/q2-chart-bar/index.js

@@ -28,14 +28,14 @@ export class Q2ChartBar {
   componentDidLoad() {
     const chart = echarts.init(this.chartContainer);
     this.chart = chart;
-    this.resizeObserver = new ResizeObserver(() => this.resizeChart());
-    this.resizeObserver.observe(this.hostElement);
+    this.resizeEventListener = () => this.resizeChart();
+    window.addEventListener('resize', this.resizeEventListener);
     this.cacheComputedStyles();
     this.updateChart(chart);
     overrideFocus(this.hostElement);
   }
-  willDestroyElement() {
-    this.resizeObserver = null;
+  disconnectedCallback() {
+    window.removeEventListener('resize', this.resizeEventListener);
   }
   cacheComputedStyles() {
     this.chartContainerStyles = getComputedStyle(this.chartContainer);

package/dist/collection/components/q2-chart-bar/styles.css

@@ -66,17 +66,14 @@ button {
 }
 
 :host {
-  position: relative;
-  width: 100%;
+  width: var(--tct-bar-chart-width, 100%);
+  height: var(--tct-bar-chart-height, 100%);
   display: block;
 }
 
 .container {
-  aspect-ratio: 1/1;
   width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  height: 100%;
 }
 
 .chart-container {

package/dist/collection/components/q2-chart-donut/index.js

@@ -87,7 +87,7 @@ export class Q2ChartDonut {
     this.chart = chart;
     overrideFocus(this.hostElement);
   }
-  willDestroyElement() {
+  disconnectedCallback() {
     this.resizeObserver = null;
   }
   /// Getters ///

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

@@ -198,6 +198,7 @@ label {
   height: 30px;
   width: var(--comp-checkbox-toggle-width);
   position: relative;
+  text-align: initial;
 }
 
 .toggle-track,

package/dist/collection/components/q2-loading/skeleton/q2-loading-element/styles.css

@@ -12,6 +12,10 @@ q2-loading-element {
   background-color: var(--tct-loading-skeleton-element-bg, var(--tct-gray-l3, var(--t-gray-14, #f2f2f2)));
 }
 
+.skeleton-shape.rectangle {
+  min-height: var(--tct-loading-skeleton-rectangle-min-height, 20px);
+}
+
 .skeleton-shape.circle {
   border-radius: 50%;
   padding-top: 100%;

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

@@ -179,6 +179,10 @@ button {
   background-color: var(--tct-loading-skeleton-element-bg, var(--tct-gray-l3, var(--t-gray-14, #f2f2f2)));
 }
 
+.skeleton-shape.rectangle {
+  min-height: var(--tct-loading-skeleton-rectangle-min-height, 20px);
+}
+
 .skeleton-shape.circle {
   border-radius: 50%;
   padding-top: 100%;

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

@@ -36,7 +36,7 @@ export class Q2Popover {
   }
   /// Helpers ///
   determinePopDirection() {
-    var _a;
+    var _a, _b, _c, _d, _e;
     const { containerElement, contentElement, direction, controlElement } = this;
     if (containerElement)
       containerElement.style.maxHeight = null;
@@ -48,7 +48,9 @@ export class Q2Popover {
       top: 0,
       height: 0,
     };
-    const bottomOffset = window.innerHeight - topOffset - height;
+    const scrollY = ((_c = (_b = window.Tecton) === null || _b === void 0 ? void 0 : _b.platformDimensions) === null || _c === void 0 ? void 0 : _c.scrollY) || 0;
+    const innerHeight = ((_e = (_d = window.Tecton) === null || _d === void 0 ? void 0 : _d.platformDimensions) === null || _e === void 0 ? void 0 : _e.innerHeight) || window.innerHeight;
+    const bottomOffset = scrollY + innerHeight - topOffset - height;
     const canShowFullSizeBelow = bottomOffset > contentHeight;
     const canShowFullSizeAbove = contentHeight <= topOffset;
     // Prefer full size above or below

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

@@ -282,6 +282,7 @@ export class Q2Select {
     this.searchable = false;
     this.multilineOptions = false;
     this.optional = false;
+    this.placeholder = undefined;
     this.dropdownOpen = false;
     this.onlyShowingSelected = false;
     this.activeOptionId = undefined;
@@ -708,7 +709,7 @@ export class Q2Select {
         this.errors.length > 0 &&
         this.errors.map(error => loc(error))) ||
         (this.invalid && ['tecton.element.select.invalid']) ||
-        [], disabled: this.disabled, optional: this.optional, readonly: this.readonly, hideLabel: this.hideLabel, ariaExpanded: `${!!this.dropdownOpen}`, ariaOwns: "dropdown", ariaHaspopup: "listbox", role: this.searchable ? 'combobox' : null, pseudo: showAsPseudo, "test-id": "toggleDropdown", "hide-messages": true, iconRight: "chevron-down", onClick: this.inputClickHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeydownHandler, onFocus: this.inputFocusHandler, onBlur: this.inputBlurHandler, onChange: this.inputChangeHandler, badgeValue: this.badgeValue, badgeTheme: this.isComponentFocused ? 'primary' : undefined }, this.renderCustomDisplay()), h("div", { class: "custom-display-content", hidden: !this.hasCustomDisplay || !!this.searchText, onClick: this.onCustomDisplayClick }, h("slot", { name: "q2-select-display" })), this.optionsDropdown()));
+        [], disabled: this.disabled, optional: this.optional, readonly: this.readonly, placeholder: this.placeholder || undefined, hideLabel: this.hideLabel, ariaExpanded: `${!!this.dropdownOpen}`, ariaOwns: "dropdown", ariaHaspopup: "listbox", role: this.searchable ? 'combobox' : null, pseudo: showAsPseudo, "test-id": "toggleDropdown", "hide-messages": true, iconRight: "chevron-down", onClick: this.inputClickHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeydownHandler, onFocus: this.inputFocusHandler, onBlur: this.inputBlurHandler, onChange: this.inputChangeHandler, badgeValue: this.badgeValue, badgeTheme: this.isComponentFocused ? 'primary' : undefined }, this.renderCustomDisplay()), h("div", { class: "custom-display-content", hidden: !this.hasCustomDisplay || !!this.searchText, onClick: this.onCustomDisplayClick }, h("slot", { name: "q2-select-display" })), this.optionsDropdown()));
   }
   optionsDropdown() {
     const dropDirection = this.privatePopDirection === 'up' ? 'dropup' : '';
@@ -992,6 +993,23 @@ export class Q2Select {
         "attribute": "optional",
         "reflect": true,
         "defaultValue": "false"
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placeholder",
+        "reflect": true
       }
     };
   }

package/dist/collection/utils/index.js

@@ -51,7 +51,7 @@ export function loc(key, subs) {
   var _a, _b, _c;
   if (!key)
     return '';
-  if (((_a = window.Tecton) === null || _a === void 0 ? void 0 : _a.noString) === true) {
+  if (((_a = window.Tecton) === null || _a === void 0 ? void 0 : _a.noStrings) === true) {
     return key;
   }
   return (_c = (_b = window === null || window === void 0 ? void 0 : window.TectonElements) === null || _b === void 0 ? void 0 : _b.loc(key, subs)) !== null && _c !== void 0 ? _c : key;
@@ -100,6 +100,7 @@ export function setMessageHeight(target) {
   });
 }
 export function setPopProperties(target) {
+  var _a, _b, _c, _d;
   const { dropdownContainer, popDirection } = target;
   if (dropdownContainer) {
     dropdownContainer.style.maxHeight = null;
@@ -114,7 +115,9 @@ export function setPopProperties(target) {
   const dropdownHeight = dropdownContainer.getBoundingClientRect().height;
   dropdownContainer.classList.remove('sizable');
   const { top: topOffset, height } = controlElement.getBoundingClientRect();
-  const bottomOffset = window.innerHeight - topOffset - height;
+  const scrollY = ((_b = (_a = window.Tecton) === null || _a === void 0 ? void 0 : _a.platformDimensions) === null || _b === void 0 ? void 0 : _b.scrollY) || 0;
+  const innerHeight = ((_d = (_c = window.Tecton) === null || _c === void 0 ? void 0 : _c.platformDimensions) === null || _d === void 0 ? void 0 : _d.innerHeight) || window.innerHeight;
+  const bottomOffset = scrollY + innerHeight - topOffset - height;
   const canShowFullSizeBelow = bottomOffset > dropdownHeight;
   const canShowFullSizeAbove = dropdownHeight <= topOffset;
   // Prefer full size above or below