q2-tecton-elements 1.10.6 → 1.10.9

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

@@ -1,5 +1,5 @@
-import { Component, Prop, Element, State, Watch, h, Fragment } from '@stencil/core';
-import { handleAriaLabel, loc, setPopProperties } from 'src/utils';
+import { Component, Prop, Element, State, Watch, h, Fragment, Listen } from '@stencil/core';
+import { handleAriaLabel, isEventFromElement, loc, overrideFocus, setPopProperties } from 'src/utils';
 export class Q2Dropdown {
   constructor() {
     this.type = 'icon';
@@ -205,12 +205,18 @@ export class Q2Dropdown {
   resolvedTypeHandler() {
     this.orchestrateResolvedMenuItems();
   }
+  delegateFocus(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    this.controlElement.shadowRoot.querySelector('button').focus();
+  }
   ///// Lifecycle Hooks ////////
   componentWillLoad() {
     handleAriaLabel(this);
   }
   componentDidLoad() {
     this.orchestrateResolvedMenuItems();
+    overrideFocus(this.hostElement);
   }
   componentDidRender() {
     setTimeout(() => {
@@ -482,4 +488,11 @@ export class Q2Dropdown {
       "propName": "resolvedType",
       "methodName": "resolvedTypeHandler"
     }]; }
+  static get listeners() { return [{
+      "name": "focus",
+      "method": "delegateFocus",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
 }

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

@@ -1,67 +1,67 @@
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 *:active {
-    outline: none;
+  outline: none;
 }
 
 *:focus {
-    outline: none;
-    box-shadow: var(--const-global-focus);
+  outline: none;
+  box-shadow: var(--const-global-focus);
 }
 
 :host {
-    box-shadow: none !important;
+  box-shadow: none !important;
 }
 
 ::-moz-focus-inner {
-    border: none;
+  border: none;
 }
 
 input,
 textarea,
 button {
-    font-family: inherit;
-    font-size: inherit;
+  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;
+  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;
+  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;
+  display: none;
 }
 
 :host([hidden]) {
-    display: none;
+  display: none;
 }
 
 .invisible {
-    visibility: hidden;
+  visibility: hidden;
 }
 
 .q2-element-dropdown {
@@ -79,10 +79,10 @@ button {
   opacity: 0;
   visibility: hidden;
   transition: opacity var(--app-tween-1);
-  border-radius: var(--tct-dropdown-element-br, 0);
-  --comp-scrollbar-size: var(--tct-scrollbar-size, var(--app-scale-1x, 5px));
-  --comp-scrollbar-border-radius: var(--tct-scrollbar-border-radius, var(--app-border-radius-1, 3px));
-  --comp-scrollbar-color: var(--tct-scrollbar-color, var(--t-a11y-gray-color, #747474));
+  border-radius: var(--tct-dropdown-border-radius, --t-dropdown-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;
 }
@@ -111,7 +111,6 @@ button {
   overflow: auto;
   opacity: 1;
   visibility: visible;
-  margin-bottom: var(--app-scale-2);
 }
 
 :host([alignment=right]) .q2-element-dropdown {
@@ -138,9 +137,23 @@ button {
 }
 
 .q2-element-dropdown {
-  width: var(--tct-user-dropdown-width, 175px);
+  width: var(--tct-dropdown-width, var(--t-dropdown-width, 175px));
 }
 
 .q2-element-dropdown.dropup {
-  bottom: 40px;
+  bottom: var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px));
+}
+
+q2-btn[color=primary] ~ .q2-element-dropdown.dropup,
+q2-btn[intent=workflow-primary] ~ .q2-element-dropdown.dropup {
+  bottom: calc( var-list(var-prefixer(btn-icon-height), 44px) + var-list(var-prefixer(btn-primary-border-width), 0) );
+}
+
+q2-btn[color=secondary] ~ .q2-element-dropdown.dropup,
+q2-btn[intent=workflow-secondary] ~ .q2-element-dropdown.dropup {
+  bottom: calc( var-list(var-prefixer(btn-icon-height), 44px) + var-list(var-prefixer(btn-secondary-border-width), 0) );
+}
+
+q2-btn[intent=neutral] ~ .q2-element-dropdown.dropup {
+  bottom: calc( var-list(var-prefixer(btn-icon-height), 44px) + var-list(var-prefixer(btn-neutral-border-width), 0) );
 }

package/dist/collection/components/q2-dropdown-item/index.js

@@ -92,7 +92,7 @@ export class Q2DropdownItem {
   static get is() { return "q2-dropdown-item"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["styles.css"]
+    "$": ["styles.scss"]
   }; }
   static get styleUrls() { return {
     "$": ["styles.css"]

package/dist/collection/components/q2-dropdown-item/styles.css

@@ -1,116 +1,102 @@
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 *:active {
-    outline: none;
+  outline: none;
 }
 
 *:focus {
-    outline: none;
-    box-shadow: var(--const-global-focus);
+  outline: none;
+  box-shadow: var(--const-global-focus);
 }
 
 :host {
-    box-shadow: none !important;
+  box-shadow: none !important;
 }
 
 ::-moz-focus-inner {
-    border: none;
+  border: none;
 }
 
 input,
 textarea,
 button {
-    font-family: inherit;
-    font-size: inherit;
+  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;
+  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;
+  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;
+  display: none;
 }
 
 :host([hidden]) {
-    display: none;
+  display: none;
 }
 
 .invisible {
-    visibility: hidden;
+  visibility: hidden;
 }
 
-
 .dropdown-separator {
-    margin: 0 var(--tct-scale-1, var(--app-scale-1, 5px));
-    border-bottom: 1px solid
-        var(
-            --tct-dropdown-item-separator-color,
-            var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))
-        );
+  margin: 0 var(--tct-scale-1, var(--app-scale-1, 5px));
+  border-bottom: 1px solid var(--tct-dropdown-item-separator-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))));
 }
 
 .dropdown-item-wrapper {
-    display: flex;
+  display: flex;
 }
 
 .dropdown-item {
-    min-height: 44px;
-    flex: 1 1 100%;
-    padding: var(--tct-dropdown-item-padding, 2px);
+  min-height: 44px;
+  flex: 1 1 100%;
+  padding: var(--tct-dropdown-item-padding, 2px);
 }
 
 .dropdown-item-content {
-    padding: 12px var(--tct-scale-3, var(--app-scale-3, 15px));
-    text-align: left;
-    background-color: var(
-        --tct-dropdown-item-bg,
-        var(--tct-white, var(--t-base, var(--app-white, #ffffff)))
-    );
-    color: var(--tct-dropdown-item-font-color, inherit);
-    transition: background-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease));
-    overflow: hidden;
-    text-overflow: ellipsis;
-    flex: 1;
+  padding: 12px var(--tct-scale-3, var(--app-scale-3, 15px));
+  text-align: left;
+  background-color: var(--tct-dropdown-item-bg, var(--tct-white, var(--t-base, var(--app-white, #ffffff))));
+  color: var(--tct-dropdown-item-font-color, inherit);
+  transition: background-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
 }
 
 :host(:not([disabled])) .dropdown-item-content:hover,
 :host(:not([disabled])) .dropdown-item:focus-within .dropdown-item-content {
-    background-color: var(
-        --tct-dropdown-item-selected-bg,
-        var(
-            --tct-gray-14,
-            var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, var(--t-base, #f2f2f2))))
-        )
-    );
-    color: var(--tct-dropdown-item-selected-font-color, inherit);
+  background-color: var(--tct-dropdown-item-selected-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, var(--t-base, #f2f2f2))))));
+  color: var(--tct-dropdown-item-selected-font-color, inherit);
 }
 
 .remove-dropdown-item {
-    flex: 0 0 44px;
-    margin: 2px;
-}
+  flex: 0 0 44px;
+  margin: 2px;
+}

package/dist/collection/components/q2-editable-field/index.js

@@ -1,5 +1,5 @@
 import { Component, Prop, h, Listen, Element, Event, Watch } from '@stencil/core';
-import { handleAriaLabel, loc } from 'src/utils';
+import { handleAriaLabel, isEventFromElement, loc, overrideFocus } from 'src/utils';
 export class Q2EditableField {
   constructor() {
     this.value = '';
@@ -42,11 +42,11 @@ export class Q2EditableField {
       });
     };
     this.editClick = (event) => {
-      event.stopPropagation();
+      event === null || event === void 0 ? void 0 : event.stopPropagation();
       this.change.emit({ editing: true, name: 'edit' });
     };
     this.cancelClick = (event) => {
-      event && event.stopPropagation();
+      event === null || event === void 0 ? void 0 : event.stopPropagation();
       this.change.emit({ editing: false, name: 'cancel' });
     };
   }
@@ -61,6 +61,9 @@ export class Q2EditableField {
     this.scheduledAfterRender.forEach(fn => fn());
     this.scheduledAfterRender = [];
   }
+  componentDidLoad() {
+    overrideFocus(this.hostElement);
+  }
   //////// OBSERVERS //////////
   ariaLabelObserver() {
     handleAriaLabel(this);
@@ -89,13 +92,25 @@ export class Q2EditableField {
     return `q2-editable-field-wrapper ${this.editing ? 'editing' : ''}`;
   }
   ///////// HOST ELEMENT EVENTS //////
-  onHostElementChange(e) {
-    if (event.target === this.hostElement && !this.hostElement.onchange) {
-      if (e.detail.name === 'save') {
-        this.value = e.detail.value;
-      }
-      this.editing = e.detail.editing;
+  onHostElementChange(event) {
+    if (!isEventFromElement(event, this.hostElement) || this.hostElement.onchange)
+      return;
+    switch (event.detail.name) {
+      case 'save':
+        this.value = event.detail.value;
+        break;
+      case 'cancel':
+        this.q2InputElement.value = this.value;
+        break;
     }
+    this.editing = event.detail.editing;
+  }
+  delegateFocus(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    this.hostElement.shadowRoot
+      .querySelector(this.editing ? 'q2-input' : 'q2-btn.begin-edit')
+      .focus();
   }
   render() {
     return (h("div", null,
@@ -104,7 +119,7 @@ export class Q2EditableField {
   }
   generateEditStateDOM() {
     return (h("div", { class: this.wrapperClass, hidden: !this.editing },
-      h("q2-input", { label: this.locLabel, hideLabel: this.hideLabel, value: this.value, hints: (Array.isArray(this.hints) && this.hints.map(str => loc(str))) || undefined, errors: (Array.isArray(this.errors) && this.errors.map(str => loc(str))) ||
+      h("q2-input", { ref: el => (this.q2InputElement = el), label: this.locLabel, hideLabel: this.hideLabel, value: this.value, hints: (Array.isArray(this.hints) && this.hints.map(str => loc(str))) || undefined, errors: (Array.isArray(this.errors) && this.errors.map(str => loc(str))) ||
           undefined, type: this.type, formatModifier: this.formatModifier, maxlength: this.maxlength, "test-id": "editableInput", onInput: this.inputInput, onChange: this.inputChange, onKeyDown: this.inputKeyDown, onClick: this.inputClick }),
       h("q2-btn", { class: "cancel-edit", label: `${loc('tecton.element.editableField.cancel')} ${this.locLabel}`, "hide-label": true, "test-id": "cancelButton", onClick: this.cancelClick },
         h("q2-icon", { type: "close" })),
@@ -125,13 +140,13 @@ export class Q2EditableField {
       this.generateEditBtn()));
   }
   generateEditBtn() {
-    return (h("q2-btn", { class: "begin-edit", label: `${loc('tecton.element.editableField.edit')} ${this.locLabel}`, "hide-label": true, "test-id": "editButton", onClick: this.editClick },
+    return (h("q2-btn", { ref: el => (this.q2EditBtnElement = el), class: "begin-edit", label: `${loc('tecton.element.editableField.edit')} ${this.locLabel}`, "hide-label": true, "test-id": "editButton", onClick: this.editClick },
       h("q2-icon", { type: "edit" })));
   }
   static get is() { return "q2-editable-field"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["styles.css"]
+    "$": ["styles.scss"]
   }; }
   static get styleUrls() { return {
     "$": ["styles.css"]
@@ -386,5 +401,11 @@ export class Q2EditableField {
       "target": undefined,
       "capture": false,
       "passive": false
+    }, {
+      "name": "focus",
+      "method": "delegateFocus",
+      "target": undefined,
+      "capture": false,
+      "passive": false
     }]; }
 }

package/dist/collection/components/q2-editable-field/styles.css

@@ -1,119 +1,118 @@
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 *:active {
-    outline: none;
+  outline: none;
 }
 
 *:focus {
-    outline: none;
-    box-shadow: var(--const-global-focus);
+  outline: none;
+  box-shadow: var(--const-global-focus);
 }
 
 :host {
-    box-shadow: none !important;
+  box-shadow: none !important;
 }
 
 ::-moz-focus-inner {
-    border: none;
+  border: none;
 }
 
 input,
 textarea,
 button {
-    font-family: inherit;
-    font-size: inherit;
+  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;
+  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;
+  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;
+  display: none;
 }
 
 :host([hidden]) {
-    display: none;
+  display: none;
 }
 
 .invisible {
-    visibility: hidden;
+  visibility: hidden;
 }
 
-
 :host {
-    display: inline-block;
-    max-width: 100%;
+  display: inline-block;
+  max-width: 100%;
 }
 
 .q2-editable-field-wrapper:not([hidden]) {
-    display: flex;
+  display: flex;
 }
 
 .q2-editable-field-wrapper.editing {
-    align-items: flex-end;
+  align-items: flex-end;
 }
 
 q2-input,
 .text-wrapper {
-    margin: 0 var(--tct-scale-2, var(--app-scale-2, 10px)) 0 0;
+  margin: 0 var(--tct-scale-2, var(--app-scale-2, 10px)) 0 0;
 }
 
 q2-input {
-    flex: 1 0 auto;
-    min-width: 170px;
+  flex: 1 0 auto;
+  min-width: 170px;
 }
 
 .text-wrapper {
-    flex: 0 auto;
-    align-self: center;
-    display: inline-block;
+  flex: 0 auto;
+  align-self: center;
+  display: inline-block;
 }
 
 :host([truncated]) .text-wrapper {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 q2-btn {
-    flex: 0 0 44px;
+  flex: 0 0 44px;
 }
 
 dl {
-    margin: var(--tct-scale-0, var(--app-scale-0, 0));
+  margin: var(--tct-scale-0, var(--app-scale-0, 0));
 }
 
 dt {
-    font-weight: 600;
+  font-weight: 600;
 }
 
 dd {
-    margin-left: var(--tct-scale-0, var(--app-scale-0, 0));
-    display: flex;
-    align-items: center;
-}
+  margin-left: var(--tct-scale-0, var(--app-scale-0, 0));
+  display: flex;
+  align-items: center;
+}