q2-tecton-elements 1.22.2 → 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-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
       }
     };
   }