npm - q2-tecton-elements - Versions diffs - 1.37.1 → 1.38.1 - Mend

q2-tecton-elements 1.37.1 → 1.38.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (501) hide show

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

@@ -8,7 +8,7 @@
 *:focus {
   outline: none;
-  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C);
+  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc);
 }
 :host {
@@ -84,6 +84,7 @@ button {
   --comp-checkbox-outer-fill-color: var(--tct-checkbox-outer-fill-color, var(--t-checkbox-outer-fill-color, var(--tct-white, var(--app-white, #ffffff))));
   --comp-checkbox-checked-color: var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, var(--t-a11y-active-gray-color-AA, #404040))));
   --comp-control-width: var(--comp-checkbox-size);
+  --comp-checkbox-error-color: var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));
   display: grid;
   grid-template-areas: "svg label" "svg description";
   align-items: center;
@@ -121,15 +122,39 @@ button {
 :host([checked]) .label-text {
   font-weight: var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600));
 }
+:host(:hover) .label-text {
+  font-weight: var(--tct-checkbox-hover-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 400)));
+}
+:host(:focus-within) .label-text {
+  font-weight: var(--tct-checkbox-focused-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 400)));
+}
+:host([description]:hover) .label-text {
+  font-weight: var(--tct-checkbox-hover-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600)));
+}
+:host([checked]:hover) .label-text {
+  font-weight: var(--tct-checkbox-checked-hover-label-font-weight, var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600)));
+}
+:host([description]:focus-within) .label-text {
+  font-weight: var(--tct-checkbox-focused-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600)));
+}
+:host([checked]:focus-within) .label-text {
+  font-weight: var(--tct-checkbox-checked-focused-label-font-weight, var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600)));
+}
 .description-text {
   grid-area: description;
   font-weight: var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400));
 }
+:host(:hover) .description-text {
+  font-weight: var(--tct-checkbox-hover-description-font-weight, var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400)));
+}
 label {
   color: var(--tct-checkbox-label-color);
   cursor: pointer;
+  hyphens: var(--tct-checkbox-label-hyphens, auto);
+  word-break: var(--tct-checkbox-label-word-break, break-word);
+  word-wrap: var(--tct-checkbox-label-word-wrap, break-word);
 }
 :host([disabled]:not([disabled=false])),
@@ -142,49 +167,80 @@ label {
 }
 .checkbox-icon {
-  --t-icon-stroke-primary: var(--comp-checkbox-outer-stroke-color);
   width: var(--comp-checkbox-size);
   height: var(--comp-checkbox-size);
   border-radius: var(--tct-checkbox-outer-border-radius, var(--t-checkbox-outer-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));
   stroke: var(--comp-checkbox-outer-stroke-color);
-  color: var(--comp-checkbox-outer-stroke-color);
-  stroke-width: var(--tct-checkbox-outer-stroke-width, var(--t-checkbox-outer-stroke-width, 2));
   fill: var(--comp-checkbox-outer-fill-color);
+  stroke-width: var(--tct-checkbox-outer-stroke-width, var(--t-checkbox-outer-stroke-width, 2));
   flex-shrink: 0;
 }
-:host([checked]) .checkbox-icon {
-  fill: var(--tct-checkbox-checked-outer-fill-color, var(--t-checkbox-checked-outer-fill-color, var(--comp-checkbox-outer-fill-color)));
+:host([checked]:not([type=favorite])) .checkbox-icon {
   stroke: var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color)));
+  fill: var(--tct-checkbox-checked-outer-fill-color, var(--t-checkbox-checked-outer-fill-color, var(--comp-checkbox-outer-fill-color)));
+}
+:host([has-error]:not([type=favorite])) .checkbox-icon {
+  stroke: var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color));
+  fill: var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color));
+  box-shadow: var(--tct-checkbox-error-box-shadow);
 }
-:host(:focus-within) .checkbox-icon {
-  box-shadow: var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff);
+:host(:hover:not([type=favorite])) .checkbox-icon {
+  stroke: var(--tct-checkbox-hover-outer-stroke-color, var(--comp-checkbox-outer-stroke-color));
+  fill: var(--tct-checkbox-hover-outer-fill-color, var(--comp-checkbox-outer-fill-color));
+  box-shadow: var(--tct-checkbox-hover-box-shadow);
+}
+:host(:hover[has-error]:not([type=favorite])) .checkbox-icon {
+  stroke: var(--tct-checkbox-error-hover-outer-stroke-color, var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color)));
+  fill: var(--tct-checkbox-error-hover-outer-fill-color, var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color)));
+  box-shadow: var(--tct-checkbox-error-hover-box-shadow, var(--tct-checkbox-error-box-shadow, var(--tct-checkbox-hover-box-shadow)));
+}
+:host(:focus-within:not([type=favorite])) .checkbox-icon {
+  --comp-checkbox-focused-box-shadow: var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff);
   stroke: var(--tct-checkbox-focused-outer-stroke-color, var(--t-checkbox-focused-outer-stroke-color, var(--comp-checkbox-checked-color)));
+  fill: var(--tct-checkbox-focused-outer-fill-color, var(--comp-checkbox-outer-fill-color));
+  box-shadow: var(--comp-checkbox-focused-box-shadow);
+}
+:host(:focus-within[has-error]:not([type=favorite])) .checkbox-icon {
+  stroke: var(--tct-checkbox-error-focused-outer-stroke-color, var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color)));
+  fill: var(--tct-checkbox-error-focused-outer-fill-color, var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color)));
+  box-shadow: var(--tct-checkbox-error-focused-box-shadow, var(--tct-checkbox-error-box-shadow, var(--comp-checkbox-focused-box-shadow)));
 }
 :host([type=favorite]) .checkbox-icon {
   --tct-icon-stroke-width: var(--tct-checkbox-favorite-stroke-width, var(--t-checkbox-favorite-stroke-width, 1));
   --tct-icon-stroke-primary: var(--comp-checkbox-favorite-stroke-color);
   transition: fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween);
 }
-:host([type=favorite]:focus-within) .checkbox-icon, :host([type=favorite]:hover) .checkbox-icon {
-  --tct-icon-stroke-primary: var(--comp-checkbox-favorite-fill-color);
+:host(:hover[type=favorite]) .checkbox-icon {
+  --tct-icon-stroke-primary: var(--tct-checkbox-favorite-hover-stroke-color, var(--comp-checkbox-favorite-fill-color));
+  --tct-icon-stroke-width: var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2));
+}
+:host([type=favorite]:focus-within) .checkbox-icon {
+  --tct-icon-stroke-primary: var(--tct-checkbox-favorite-focused-stroke-color, var(--comp-checkbox-favorite-fill-color));
   --tct-icon-stroke-width: var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2));
 }
 :host([checked][type=favorite]) .checkbox-icon {
-  --tct-icon-stroke-primary: var(--comp-checkbox-favorite-fill-color);
-  fill: var(--comp-checkbox-favorite-fill-color);
+  --tct-icon-stroke-primary: var(--tct-checkbox-favorite-checked-stroke-color, var(--tct-checkbox-favorite-stroke-color, var(--comp-checkbox-favorite-fill-color)));
+  fill: var(--tct-checkbox-favorite-checked-fill-color, var(--comp-checkbox-favorite-fill-color));
   transition: fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween);
 }
-:host([checked][type=favorite]:focus-within) .checkbox-icon, :host([checked][type=favorite]:hover) .checkbox-icon {
-  --tct-icon-stroke-primary: var(--comp-checkbox-favorite-stroke-color);
-  --tct-icon-fill-primary: var(--comp-checkbox-favorite-fill-color);
+:host([checked][type=favorite]:hover) .checkbox-icon {
+  --tct-icon-stroke-primary: var(--tct-checkbox-favorite-checked-hover-stroke-color, var(--tct-checkbox-favorite-hover-stroke-color, var(--comp-checkbox-favorite-stroke-color)));
+  --tct-icon-fill-primary: var(--tct-checkbox-favorite-checked-fill-color, var(--comp-checkbox-favorite-fill-color));
   --tct-icon-stroke-width: var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2));
 }
-:host([has-error]) .checkbox-icon {
-  stroke: var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));
+:host([checked][type=favorite]:focus-within) .checkbox-icon {
+  --tct-icon-stroke-primary: var(--tct-checkbox-favorite-checked-focused-stroke-color, var(--tct-checkbox-favorite-focused-stroke-color, var(--comp-checkbox-favorite-stroke-color)));
+  --tct-icon-stroke-width: var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2));
+}
+:host([has-error][type=favorite]) .checkbox-icon {
+  --tct-icon-stroke-primary: var(--tct-checkbox-favorite-error-stroke-color, var(--comp-checkbox-error-color));
+}
+:host([has-error][type=favorite][checked]) .checkbox-icon {
+  --tct-icon-stroke-primary: var(--tct-checkbox-favorite-error-stroke-color, var(--comp-checkbox-error-color));
 }
 .checkbox-fill {
-  stroke: var(--comp-checkbox-checked-color);
+  stroke: var(--tct-checkbox-checkmark-stroke-color, var(--comp-checkbox-checked-color));
 }
 .checked-fill {
@@ -227,6 +283,10 @@ label {
   fill: var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)));
   opacity: 0.5;
 }
+:host([has-error]) .toggle-track {
+  fill: var(--tct-checkbox-toggle-error-color, var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000)));
+  opacity: 0.5;
+}
 .toggle-indicator {
   transition: left var(--comp-checkbox-tween);
@@ -245,14 +305,18 @@ label {
 :host([checked]) .toggle-circle {
   fill: var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)));
 }
-:host(:focus-within) .toggle-circle {
+:host(:focus-within) .toggle-circle, :host(:hover) .toggle-circle {
   stroke: var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)));
   stroke-width: 10px;
   stroke-opacity: 0.5;
 }
-:host(:not([checked]):focus-within) .toggle-circle {
+:host(:not([checked]):focus-within) .toggle-circle, :host(:not([checked]):hover) .toggle-circle {
   stroke: var(--tct-checkbox-toggle-circle-color, var(--t-checkbox-toggle-circle-color, var(--t-a11y-gray-color-AA, #949494)));
 }
+:host([has-error]) .toggle-circle, :host([has-error]:focus-within) .toggle-circle, :host([has-error]:hover) .toggle-circle {
+  fill: var(--tct-checkbox-toggle-error-color, var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000)));
+  stroke: var(--tct-checkbox-toggle-error-color, var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000)));
+}
 :host([checked]) .off,
 :host(:not([checked])) .on {

package/dist/collection/components/q2-checkbox-group/index.js CHANGED Viewed

@@ -67,6 +67,11 @@ export class Q2CheckboxGroup {
     });
   }
   /// Methods ///
+  /**
+   * Emulates clicking the `<q2-checkbox>` option(s) with the provided value.
+   *
+   * @testOnly
+   */
   setValue(values) {
     const valuesSet = new Set(Array.isArray(values) ? values : [values]);
     this.checkboxElements.forEach(check => {
@@ -236,8 +241,11 @@ export class Q2CheckboxGroup {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "",
-          "tags": []
+          "text": "Emulates clicking the `<q2-checkbox>` option(s) with the provided value.",
+          "tags": [{
+              "name": "testOnly",
+              "text": undefined
+            }]
         }
       }
     };

package/dist/collection/components/q2-checkbox-group/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/q2-checkbox-group/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,IAAI,EACJ,OAAO,EACP,CAAC,EACD,MAAM,EAEN,KAAK,EAEL,KAAK,EACL,MAAM,GACT,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAO5C,MAAM,OAAO,eAAe;;IASxB,QAAG,GAAW,kBAAkB,UAAU,EAAE,EAAE,CAAC;IAW/C,uBAAkB,GAAG,GAAG,EAAE;MACtB,IAAI,CAAC,YAAY,EAAE,CAAC;MACpB,IAAI,CAAC,cAAc,EAAE,CAAC;IAC1B,CAAC,CAAC;IAEF,0BAAqB,GAAG,CAAC,KAAkB,EAAE,EAAE;MAC3C,KAAK,CAAC,wBAAwB,EAAE,CAAC;MACjC,MAAM,UAAU,GAAG,EAAE,CAAC;MACtB,UAAU,CAAC,GAAG,EAAE;QACZ,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;UAClC,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC;QAC9C,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;MACjC,CAAC,EAAE,CAAC,CAAC,CAAC;IACV,CAAC,CAAC;;;oBA/B2C,KAAK;oBACL,KAAK;oBACL,KAAK;oBACL,KAAK;;EAMlD,IAAI,gBAAgB;IAChB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAA4B,CAAC;EACnG,CAAC;EAED,IAAI,cAAc;IACd,OAAO,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;EAC5B,CAAC;EAkBD,4BAA4B;EAE5B,iBAAiB;IACb,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;EACvC,CAAC;EAED,gBAAgB;IACZ,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAC/D,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IACxD,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;IACjC,IAAI,CAAC,kBAAkB,EAAE,CAAC;EAC9B,CAAC;EAED,oBAAoB;IAChB,IAAI,IAAI,CAAC,gBAAgB,EAAE;MACvB,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC;MACnC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;KAChC;EACL,CAAC;EAGD,YAAY;IACR,IAAI,IAAI,CAAC,QAAQ;MAAE,OAAO;IAC1B,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;MAClC,IAAI,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE;QACjD,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;OAC3C;IACL,CAAC,CAAC,CAAC;EACP,CAAC;EAGD,cAAc;IACV,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC;IACpC,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;MACrC,QAAQ,CAAC,aAAa,GAAG,aAAa,CAAC;IAC3C,CAAC,CAAC,CAAC;EACP,CAAC;EAGD,cAAc,CAAC,WAAoB;IAC/B,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;MACrC,QAAQ,CAAC,QAAQ,GAAG,WAAW,CAAC;IACpC,CAAC,CAAC,CAAC;EACP,CAAC;EAED,eAAe;~~EAEf~~,QAAQ,CAAC,MAAyB;IAC9B,MAAM,SAAS,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;IACrE,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;MAClC,IAAI,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC;QAAE,KAAK,CAAC,KAAK,EAAE,CAAC;IAClD,CAAC,CAAC,CAAC;EACP,CAAC;EAOD,mBAAmB,CAAC,KAAkB;IAClC,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE;MACjE,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;KAC7B;EACL,CAAC;EAED,MAAM;IACF,OAAO,CACH;MACK,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAC3B,WAAK,KAAK,EAAC,cAAc;QACpB,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;QAC7B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAM,KAAK,EAAC,cAAc,IAAE,GAAG,CAAC,+BAA+B,CAAC,CAAQ,CAAC,CAAC,CAAC,EAAE,CAC5F,CACT,CAAC,CAAC,CAAC,CACA,EAAE,CACL;MACD,gBACI,KAAK,EAAE,wBAAwB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,EACjE,QAAQ,EAAE,IAAI,CAAC,qBAAqB,kBACtB,GAAG,IAAI,CAAC,QAAQ,EAAE;QAE/B,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAC3B,cAAQ,KAAK,EAAC,SAAS;UAClB,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;UAC7B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CACb,YAAM,KAAK,EAAC,cAAc,IAAE,GAAG,CAAC,+BAA+B,CAAC,CAAQ,CAC3E,CAAC,CAAC,CAAC,CACA,EAAE,CACL,CACI,CACZ,CAAC,CAAC,CAAC,CACA,EAAE,CACL;QACA,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CACb,WAAK,KAAK,EAAE,wBAAwB,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,EAAE;UAC/E,eACI,KAAK,EAAC,oBAAoB,EAC1B,IAAI,EAAC,OAAO,GACL,CACT,CACT,CAAC,CAAC,CAAC,CACA,EAAE,CACL;QACA,IAAI,CAAC,QAAQ,EAAE,CACT,CACT,CACT,CAAC;EACN,CAAC;EAED,QAAQ;IACJ,OAAO,eAAQ,CAAC;EACpB,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACJ","sourcesContent":["import {\n Component,\n Prop,\n Element,\n h,\n Listen,\n EventEmitter,\n Event,\n ComponentInterface,\n Watch,\n Method,\n} from '@stencil/core';\nimport { createGuid, loc } from 'src/utils';\n\n@Component({\n tag: 'q2-checkbox-group',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2CheckboxGroup implements ComponentInterface {\n @Prop({ reflect: true }) label: string;\n @Prop({ mutable: true }) value: object;\n @Prop({ reflect: true }) disabled: boolean = false;\n @Prop({ reflect: true }) readonly: boolean = false;\n @Prop({ reflect: true }) optional: boolean = false;\n @Prop({ reflect: true }) hasError: boolean = false;\n\n @Element() hostElement: HTMLElement;\n _id: string = `checkbox-group-${createGuid()}`;\n mutationObserver: MutationObserver;\n\n get checkboxElements() {\n return Array.from(this.hostElement.querySelectorAll('q2-checkbox')) as HTMLQ2CheckboxElement[];\n }\n\n get protectedValue(): object {\n return this.value \|\| {};\n }\n\n onMutationObserved = () => {\n this.valueUpdated();\n this.updateDisabled();\n };\n\n onInnerCheckboxChange = (event: CustomEvent) => {\n event.stopImmediatePropagation();\n const groupValue = {};\n setTimeout(() => {\n this.checkboxElements.forEach(check => {\n groupValue[check.value] = !!check.checked;\n });\n this.change.emit(groupValue);\n }, 0);\n };\n\n ///// LIFECYCLE HOOK ///////\n\n componentWillLoad() {\n this.updateReadonly(this.readonly);\n }\n\n componentDidLoad() {\n const observer = new MutationObserver(this.onMutationObserved);\n observer.observe(this.hostElement, { childList: true });\n this.mutationObserver = observer;\n this.onMutationObserved();\n }\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n this.mutationObserver = null;\n }\n }\n\n @Watch('value')\n valueUpdated() {\n if (this.readonly) return;\n this.checkboxElements.forEach(check => {\n if (this.protectedValue.hasOwnProperty(check.value)) {\n check.checked = this.value[check.value];\n }\n });\n }\n\n @Watch('disabled')\n updateDisabled() {\n const groupDisabled = this.disabled;\n this.checkboxElements.forEach(checkbox => {\n checkbox.groupDisabled = groupDisabled;\n });\n }\n\n @Watch('readonly')\n updateReadonly(newReadonly: boolean) {\n this.checkboxElements.forEach(checkbox => {\n checkbox.readonly = newReadonly;\n });\n }\n\n /// Methods ///\n @Method()\n setValue(values: string \| string[]) {\n const valuesSet = new Set(Array.isArray(values) ? values : [values]);\n this.checkboxElements.forEach(check => {\n if (valuesSet.has(check.value)) check.click();\n });\n }\n\n ///// HOST ELEMENT EVENTS ///////\n\n @Event() change: EventEmitter;\n\n @Listen('change')\n onHostElementChange(event: CustomEvent) {\n if (event.target === this.hostElement && !this.hostElement.onchange) {\n this.value = event.detail;\n }\n }\n\n render() {\n return (\n <div>\n {this.label \|\| this.optional ? (\n <div class=\"group-legend\">\n {this.label && loc(this.label)}\n {this.optional ? <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span> : ''}\n </div>\n ) : (\n ''\n )}\n <fieldset\n class={`q2-checkbox-fieldset ${this.hasError ? 'has-error' : ''}`}\n onChange={this.onInnerCheckboxChange}\n aria-invalid={`${this.hasError}`}\n >\n {this.label \|\| this.optional ? (\n <legend class=\"sr-only\">\n {this.label && loc(this.label)}\n {this.optional ? (\n <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span>\n ) : (\n ''\n )}\n </legend>\n ) : (\n ''\n )}\n {this.hasError ? (\n <div class={`error-icon-container ${this.label \|\| this.optional ? '' : 'no-label'}`}>\n <q2-icon\n class=\"h(4) w(4) mrg-b(2)\"\n type=\"error\"\n ></q2-icon>\n </div>\n ) : (\n ''\n )}\n {this.inputDom()}\n </fieldset>\n </div>\n );\n }\n\n inputDom() {\n return <slot />;\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/q2-checkbox-group/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Prop,\n Element,\n h,\n Listen,\n EventEmitter,\n Event,\n ComponentInterface,\n Watch,\n Method,\n} from '@stencil/core';\nimport { createGuid, loc } from 'src/utils';\n\n@Component({\n tag: 'q2-checkbox-group',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2CheckboxGroup implements ComponentInterface {\n @Prop({ reflect: true }) label: string;\n @Prop({ mutable: true }) value: object;\n @Prop({ reflect: true }) disabled: boolean = false;\n @Prop({ reflect: true }) readonly: boolean = false;\n @Prop({ reflect: true }) optional: boolean = false;\n @Prop({ reflect: true }) hasError: boolean = false;\n\n @Element() hostElement: HTMLElement;\n _id: string = `checkbox-group-${createGuid()}`;\n mutationObserver: MutationObserver;\n\n get checkboxElements() {\n return Array.from(this.hostElement.querySelectorAll('q2-checkbox')) as HTMLQ2CheckboxElement[];\n }\n\n get protectedValue(): object {\n return this.value \|\| {};\n }\n\n onMutationObserved = () => {\n this.valueUpdated();\n this.updateDisabled();\n };\n\n onInnerCheckboxChange = (event: CustomEvent) => {\n event.stopImmediatePropagation();\n const groupValue = {};\n setTimeout(() => {\n this.checkboxElements.forEach(check => {\n groupValue[check.value] = !!check.checked;\n });\n this.change.emit(groupValue);\n }, 0);\n };\n\n ///// LIFECYCLE HOOK ///////\n\n componentWillLoad() {\n this.updateReadonly(this.readonly);\n }\n\n componentDidLoad() {\n const observer = new MutationObserver(this.onMutationObserved);\n observer.observe(this.hostElement, { childList: true });\n this.mutationObserver = observer;\n this.onMutationObserved();\n }\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n this.mutationObserver = null;\n }\n }\n\n @Watch('value')\n valueUpdated() {\n if (this.readonly) return;\n this.checkboxElements.forEach(check => {\n if (this.protectedValue.hasOwnProperty(check.value)) {\n check.checked = this.value[check.value];\n }\n });\n }\n\n @Watch('disabled')\n updateDisabled() {\n const groupDisabled = this.disabled;\n this.checkboxElements.forEach(checkbox => {\n checkbox.groupDisabled = groupDisabled;\n });\n }\n\n @Watch('readonly')\n updateReadonly(newReadonly: boolean) {\n this.checkboxElements.forEach(checkbox => {\n checkbox.readonly = newReadonly;\n });\n }\n\n /// Methods ///\n /*\n Emulates clicking the `<q2-checkbox>` option(s) with the provided value.\n \n @testOnly\n */\n @Method()\n setValue(values: string \| string[]) {\n const valuesSet = new Set(Array.isArray(values) ? values : [values]);\n this.checkboxElements.forEach(check => {\n if (valuesSet.has(check.value)) check.click();\n });\n }\n\n ///// HOST ELEMENT EVENTS ///////\n\n @Event() change: EventEmitter;\n\n @Listen('change')\n onHostElementChange(event: CustomEvent) {\n if (event.target === this.hostElement && !this.hostElement.onchange) {\n this.value = event.detail;\n }\n }\n\n render() {\n return (\n <div>\n {this.label \|\| this.optional ? (\n <div class=\"group-legend\">\n {this.label && loc(this.label)}\n {this.optional ? <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span> : ''}\n </div>\n ) : (\n ''\n )}\n <fieldset\n class={`q2-checkbox-fieldset ${this.hasError ? 'has-error' : ''}`}\n onChange={this.onInnerCheckboxChange}\n aria-invalid={`${this.hasError}`}\n >\n {this.label \|\| this.optional ? (\n <legend class=\"sr-only\">\n {this.label && loc(this.label)}\n {this.optional ? (\n <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span>\n ) : (\n ''\n )}\n </legend>\n ) : (\n ''\n )}\n {this.hasError ? (\n <div class={`error-icon-container ${this.label \|\| this.optional ? '' : 'no-label'}`}>\n <q2-icon\n class=\"h(4) w(4) mrg-b(2)\"\n type=\"error\"\n ></q2-icon>\n </div>\n ) : (\n ''\n )}\n {this.inputDom()}\n </fieldset>\n </div>\n );\n }\n\n inputDom() {\n return <slot />;\n }\n}\n"]}

package/dist/collection/components/q2-checkbox-group/styles.css CHANGED Viewed

@@ -8,7 +8,7 @@
 *:focus {
   outline: none;
-  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C);
+  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc);
 }
 :host {

package/dist/collection/components/q2-data-table/index.js CHANGED Viewed

@@ -521,7 +521,7 @@ export class Q2DataTable {
           "references": {
             "Q2DataTableHeader": {
               "location": "local",
-              "path": "/workspace/workspace/tecton-production_release_1.37.x/packages/q2-tecton-elements/src/components/q2-data-table/index.tsx"
+              "path": "/workspace/workspace/tecton-production_release_1.38.x/packages/q2-tecton-elements/src/components/q2-data-table/index.tsx"
             }
           }
         },
@@ -541,7 +541,7 @@ export class Q2DataTable {
           "references": {
             "Q2DataTableRow": {
               "location": "local",
-              "path": "/workspace/workspace/tecton-production_release_1.37.x/packages/q2-tecton-elements/src/components/q2-data-table/index.tsx"
+              "path": "/workspace/workspace/tecton-production_release_1.38.x/packages/q2-tecton-elements/src/components/q2-data-table/index.tsx"
             }
           }
         },
@@ -581,7 +581,7 @@ export class Q2DataTable {
           "references": {
             "Q2DataTableSerializedRow": {
               "location": "local",
-              "path": "/workspace/workspace/tecton-production_release_1.37.x/packages/q2-tecton-elements/src/components/q2-data-table/index.tsx"
+              "path": "/workspace/workspace/tecton-production_release_1.38.x/packages/q2-tecton-elements/src/components/q2-data-table/index.tsx"
             }
           }
         }
@@ -601,7 +601,7 @@ export class Q2DataTable {
           "references": {
             "Q2DataTableSerializedRow": {
               "location": "local",
-              "path": "/workspace/workspace/tecton-production_release_1.37.x/packages/q2-tecton-elements/src/components/q2-data-table/index.tsx"
+              "path": "/workspace/workspace/tecton-production_release_1.38.x/packages/q2-tecton-elements/src/components/q2-data-table/index.tsx"
             }
           }
         }
@@ -621,7 +621,7 @@ export class Q2DataTable {
           "references": {
             "Q2DataTableSerializedRow": {
               "location": "local",
-              "path": "/workspace/workspace/tecton-production_release_1.37.x/packages/q2-tecton-elements/src/components/q2-data-table/index.tsx"
+              "path": "/workspace/workspace/tecton-production_release_1.38.x/packages/q2-tecton-elements/src/components/q2-data-table/index.tsx"
             }
           }
         }
@@ -641,7 +641,7 @@ export class Q2DataTable {
           "references": {
             "Q2DataTableHeader": {
               "location": "local",
-              "path": "/workspace/workspace/tecton-production_release_1.37.x/packages/q2-tecton-elements/src/components/q2-data-table/index.tsx"
+              "path": "/workspace/workspace/tecton-production_release_1.38.x/packages/q2-tecton-elements/src/components/q2-data-table/index.tsx"
             }
           }
         }

package/dist/collection/components/q2-data-table/styles.css CHANGED Viewed

@@ -8,7 +8,7 @@
 *:focus {
   outline: none;
-  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C);
+  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc);
 }
 :host {

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

@@ -8,7 +8,7 @@
 *:focus {
   outline: none;
-  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C);
+  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc);
 }
 :host {

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

@@ -8,7 +8,7 @@
 *:focus {
   outline: none;
-  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C);
+  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc);
 }
 :host {

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

@@ -53,7 +53,7 @@ export class Q2EditableField {
     this.cancelClick = (event) => {
       event === null || event === void 0 ? void 0 : event.stopPropagation();
       this.change.emit({ editing: false, name: 'cancel' });
-      this.hostElement.shadowRoot.querySelector('q2-input').value = this.defaultValue;
+      this.inputElement.setValue(this.defaultValue);
     };
     this.value = '';
     this.editing = false;
@@ -128,24 +128,47 @@ export class Q2EditableField {
     this.hostElement.shadowRoot.querySelector(this.editing ? 'q2-input' : 'q2-btn.begin-edit').focus();
   }
   /// Methods ///
+  /**
+   * Emulates clicking the edit button, which will display the `<q2-input>` field.
+   *
+   * @testOnly
+   */
   clickEdit() {
     var _a;
     if (this.editing)
       return;
     (_a = this.editBtnElement) === null || _a === void 0 ? void 0 : _a.click();
   }
+  /**
+   * Emulates clicking the cancel button, which will hide the `<q2-input>` field.
+   *
+   * @testOnly
+   */
   clickCancel() {
     var _a;
     if (!this.editing)
       return;
     (_a = this.cancelBtnElement) === null || _a === void 0 ? void 0 : _a.click();
   }
+  /**
+   * Emulates clicking the save button, saving value in the `<q2-input>` field, and emitting a `change` event.
+   *
+   * @testOnly
+   */
   clickSave() {
     var _a;
     if (!this.editing)
       return;
     (_a = this.saveBtnElement) === null || _a === void 0 ? void 0 : _a.click();
   }
+  /**
+   * Emulates clicking the edit button, and setting the value of the `<q2-input>` field.
+   *
+   * If the `clickSave` argument is `true` (default), the save button will be clicked after the value is set, and a\
+   * `change` event will be emitted.
+   *
+   * @testOnly
+   */
   async setValue(value, options = { clickSave: true }) {
     await this.clickEdit();
     await waitForNextPaint();
@@ -479,8 +502,11 @@ export class Q2EditableField {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "",
-          "tags": []
+          "text": "Emulates clicking the edit button, which will display the `<q2-input>` field.",
+          "tags": [{
+              "name": "testOnly",
+              "text": undefined
+            }]
         }
       },
       "clickCancel": {
@@ -491,8 +517,11 @@ export class Q2EditableField {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "",
-          "tags": []
+          "text": "Emulates clicking the cancel button, which will hide the `<q2-input>` field.",
+          "tags": [{
+              "name": "testOnly",
+              "text": undefined
+            }]
         }
       },
       "clickSave": {
@@ -503,8 +532,11 @@ export class Q2EditableField {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "",
-          "tags": []
+          "text": "Emulates clicking the save button, saving value in the `<q2-input>` field, and emitting a `change` event.",
+          "tags": [{
+              "name": "testOnly",
+              "text": undefined
+            }]
         }
       },
       "setValue": {
@@ -525,8 +557,11 @@ export class Q2EditableField {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "",
-          "tags": []
+          "text": "Emulates clicking the edit button, and setting the value of the `<q2-input>` field.\n\nIf the `clickSave` argument is `true` (default), the save button will be clicked after the value is set, and a\\\n`change` event will be emitted.",
+          "tags": [{
+              "name": "testOnly",
+              "text": undefined
+            }]
         }
       }
     };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/q2-editable-field/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, State, Prop, h, Listen, Element, Event, EventEmitter, Method, Watch } from '@stencil/core';\nimport { IEventDetail, Q2InputCustomEvent } from 'src/components';\nimport { handleAriaLabel, isEventFromElement, loc, overrideFocus, waitForNextPaint } from 'src/utils';\nimport { Q2Input } from '../q2-input';\nimport { IFormatterValueObject } from '../q2-input/types';\n\ninterface IExtendedQ2InputElement extends HTMLQ2InputElement {\n formattedValue: IFormatterValueObject['formattedValue'];\n}\n\n@Component({\n tag: 'q2-editable-field',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2EditableField {\n @Prop({ reflect: true, mutable: true }) value: string = '';\n @Prop({ reflect: true, mutable: true }) editing: boolean = false;\n @Prop({ reflect: true, mutable: true }) label: string = '';\n @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n @Prop({ reflect: true }) type: Q2Input['type'];\n @Prop({ reflect: true }) formatModifier: string;\n @Prop({ reflect: true }) truncated: boolean;\n @Prop({ reflect: true }) maxlength: number;\n @Prop({ reflect: true }) persistentLabel: boolean;\n @Prop({ reflect: true }) disabled: boolean;\n @Prop({ reflect: true }) block: boolean;\n @Prop() hints: string[];\n @Prop() errors: string[];\n\n /** @deprecated */\n @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n scheduledAfterRender: (() => void)[] = [];\n\n @Element() hostElement: HTMLElement;\n inputElement: HTMLQ2InputElement;\n editBtnElement: HTMLQ2BtnElement;\n cancelBtnElement: HTMLQ2BtnElement;\n saveBtnElement: HTMLQ2BtnElement;\n\n @State() formattedValue: string;\n innerValue: string;\n defaultValue: string = this.value;\n\n get locLabel() {\n return (this.label && loc(this.label)) \|\| '';\n }\n\n /////// LIFECYCLE HOOKS ///////\n\n componentWillLoad() {\n handleAriaLabel(this);\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n this.formattedValue = (this.inputElement as IExtendedQ2InputElement).formattedValue;\n }\n\n componentDidLoad() {\n overrideFocus(this.hostElement);\n }\n\n //////// OBSERVERS ////////\n\n @Watch('errors')\n errorsObserver() {\n const { editing, errors = [] } = this;\n const focusedElement = this.hostElement.shadowRoot.activeElement;\n const isInputFocused = focusedElement?.tagName === 'Q2-INPUT' ?? false;\n const hasErrors = errors.length;\n if (isInputFocused \|\| !focusedElement \|\| !editing \|\| !hasErrors) return;\n this.inputElement.focus();\n }\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n @Watch('editing')\n observesEditing(newValue: boolean, oldValue: boolean) {\n if (newValue === oldValue) return;\n this.scheduledAfterRender.push(this.hostElement.focus);\n }\n\n get wrapperClass() {\n return `q2-editable-field-wrapper ${this.editing ? 'editing' : ''}`;\n }\n\n ///////// HOST ELEMENT EVENTS //////\n\n @Listen('change')\n onHostElementChange(event: CustomEvent) {\n if (!isEventFromElement(event, this.hostElement) \|\| this.hostElement.onchange) return;\n switch (event.detail.name) {\n case 'save':\n this.value = event.detail.value;\n break;\n\n case 'cancel':\n this.inputElement.value = this.value;\n break;\n }\n\n this.editing = event.detail.editing;\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.hostElement.shadowRoot.querySelector<HTMLElement>(this.editing ? 'q2-input' : 'q2-btn.begin-edit').focus();\n }\n\n ///////// EVENTS /////////\n\n @Event() input: EventEmitter;\n @Event() change: EventEmitter;\n\n /// Methods ///\n @Method()\n clickEdit() {\n if (this.editing) return;\n this.editBtnElement?.click();\n }\n\n @Method()\n clickCancel() {\n if (!this.editing) return;\n this.cancelBtnElement?.click();\n }\n\n @Method()\n clickSave() {\n if (!this.editing) return;\n this.saveBtnElement?.click();\n }\n\n @Method()\n async setValue(value: string, options: { clickSave?: boolean } = { clickSave: true }) {\n await this.clickEdit();\n await waitForNextPaint();\n\n await this.inputElement.setValue(value);\n\n if (options.clickSave) {\n await this.clickSave();\n await waitForNextPaint();\n }\n }\n\n //////// ACTIONS /////////\n\n inputInput = (event: Q2InputCustomEvent<IEventDetail> & InputEvent) => {\n event.stopPropagation();\n this.input.emit(event.detail);\n this.formattedValue = event.detail.formattedValue;\n this.innerValue = event.detail.value;\n };\n\n inputChange = (e: CustomEvent) => {\n e.stopPropagation();\n };\n\n inputKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Escape' \|\| e.key === 'Esc') {\n e.preventDefault();\n this.cancelClick();\n return;\n }\n\n if (e.key === 'Enter') {\n e.preventDefault();\n this.saveClick();\n return;\n }\n };\n\n inputClick = (event: MouseEvent) => {\n event.stopPropagation();\n };\n\n saveClick = (event?: MouseEvent) => {\n event && event.stopPropagation();\n const valueFromInputProp = this.hostElement.shadowRoot.querySelector('q2-input').value;\n this.defaultValue = valueFromInputProp;\n this.change.emit({\n editing: false,\n name: 'save',\n value: this.innerValue \|\| valueFromInputProp,\n formattedValue: this.formattedValue \|\| valueFromInputProp,\n });\n\n setTimeout(() => {\n const { errors = [] } = this;\n if (!errors.length) return;\n this.hostElement.focus();\n }, 1);\n };\n\n editClick = (event: MouseEvent) => {\n event?.stopPropagation();\n this.change.emit({ editing: true, name: 'edit' });\n };\n\n cancelClick = (event?: MouseEvent) => {\n event?.stopPropagation();\n this.change.emit({ editing: false, name: 'cancel' });\n this.hostElement.shadowRoot.querySelector('q2-input').value = this.defaultValue;\n };\n\n render() {\n return (\n <div>\n {this.generateEditStateDOM()}\n {this.generateReadStateDOM()}\n </div>\n );\n }\n\n generateEditStateDOM() {\n return (\n <div\n class={this.wrapperClass}\n hidden={!this.editing}\n >\n <q2-input\n ref={el => (this.inputElement = el)}\n label={this.locLabel}\n hideLabel={this.hideLabel}\n value={this.value}\n hints={(Array.isArray(this.hints) && this.hints.map(str => loc(str))) \|\| undefined}\n errors={(Array.isArray(this.errors) && this.errors.map(str => loc(str))) \|\| undefined}\n type={this.type}\n disabled={this.disabled}\n formatModifier={this.formatModifier}\n maxlength={this.maxlength}\n test-id=\"editableInput\"\n onInput={this.inputInput}\n onChange={this.inputChange}\n onKeyDown={this.inputKeyDown}\n onClick={this.inputClick}\n />\n <q2-btn\n ref={el => (this.cancelBtnElement = el)}\n class=\"cancel-edit\"\n label={`${loc('tecton.element.editableField.cancel')} ${this.locLabel}`}\n hide-label\n test-id=\"cancelButton\"\n onClick={this.cancelClick}\n >\n <q2-icon type=\"close\" />\n </q2-btn>\n <q2-btn\n ref={el => (this.saveBtnElement = el)}\n class=\"save-edit\"\n label={`${loc('tecton.element.editableField.save')} ${this.locLabel}`}\n hide-label\n test-id=\"saveButton\"\n onClick={this.saveClick}\n >\n <q2-icon type=\"checkmark\" />\n </q2-btn>\n </div>\n );\n }\n\n generateReadStateDOM() {\n if (this.persistentLabel && this.locLabel) {\n return (\n <div\n class={this.wrapperClass}\n hidden={this.editing}\n >\n <dl>\n <dt class=\"read-state-label\">{this.locLabel}</dt>\n <dd>\n <span class=\"text-wrapper\">{this.formattedValue \|\| this.value}</span>\n {this.generateEditBtn()}\n </dd>\n </dl>\n </div>\n );\n }\n return (\n <div\n class={this.wrapperClass}\n hidden={this.editing}\n >\n <div class=\"text-wrapper\">{this.formattedValue \|\| this.value}</div>\n {this.generateEditBtn()}\n </div>\n );\n }\n\n generateEditBtn() {\n return (\n <q2-btn\n ref={el => (this.editBtnElement = el)}\n class=\"begin-edit\"\n label={`${loc('tecton.element.editableField.edit')} ${this.locLabel}`}\n hide-label\n disabled={this.disabled}\n test-id=\"editButton\"\n onClick={this.editClick}\n >\n <q2-icon type=\"edit\" />\n </q2-btn>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/q2-editable-field/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, State, Prop, h, Listen, Element, Event, EventEmitter, Method, Watch } from '@stencil/core';\nimport { IEventDetail, Q2InputCustomEvent } from 'src/components';\nimport { handleAriaLabel, isEventFromElement, loc, overrideFocus, waitForNextPaint } from 'src/utils';\nimport { Q2Input } from '../q2-input';\nimport { IFormatterValueObject } from '../q2-input/types';\n\ninterface IExtendedQ2InputElement extends HTMLQ2InputElement {\n formattedValue: IFormatterValueObject['formattedValue'];\n}\n\n@Component({\n tag: 'q2-editable-field',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2EditableField {\n @Prop({ reflect: true, mutable: true }) value: string = '';\n @Prop({ reflect: true, mutable: true }) editing: boolean = false;\n @Prop({ reflect: true, mutable: true }) label: string = '';\n @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n @Prop({ reflect: true }) type: Q2Input['type'];\n @Prop({ reflect: true }) formatModifier: string;\n @Prop({ reflect: true }) truncated: boolean;\n @Prop({ reflect: true }) maxlength: number;\n @Prop({ reflect: true }) persistentLabel: boolean;\n @Prop({ reflect: true }) disabled: boolean;\n @Prop({ reflect: true }) block: boolean;\n @Prop() hints: string[];\n @Prop() errors: string[];\n\n /** @deprecated /\n @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n scheduledAfterRender: (() => void)[] = [];\n\n @Element() hostElement: HTMLElement;\n inputElement: HTMLQ2InputElement;\n editBtnElement: HTMLQ2BtnElement;\n cancelBtnElement: HTMLQ2BtnElement;\n saveBtnElement: HTMLQ2BtnElement;\n\n @State() formattedValue: string;\n innerValue: string;\n defaultValue: string = this.value;\n\n get locLabel() {\n return (this.label && loc(this.label)) \|\| '';\n }\n\n /////// LIFECYCLE HOOKS ///////\n\n componentWillLoad() {\n handleAriaLabel(this);\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n this.formattedValue = (this.inputElement as IExtendedQ2InputElement).formattedValue;\n }\n\n componentDidLoad() {\n overrideFocus(this.hostElement);\n }\n\n //////// OBSERVERS ////////\n\n @Watch('errors')\n errorsObserver() {\n const { editing, errors = [] } = this;\n const focusedElement = this.hostElement.shadowRoot.activeElement;\n const isInputFocused = focusedElement?.tagName === 'Q2-INPUT' ?? false;\n const hasErrors = errors.length;\n if (isInputFocused \|\| !focusedElement \|\| !editing \|\| !hasErrors) return;\n this.inputElement.focus();\n }\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n @Watch('editing')\n observesEditing(newValue: boolean, oldValue: boolean) {\n if (newValue === oldValue) return;\n this.scheduledAfterRender.push(this.hostElement.focus);\n }\n\n get wrapperClass() {\n return `q2-editable-field-wrapper ${this.editing ? 'editing' : ''}`;\n }\n\n ///////// HOST ELEMENT EVENTS //////\n\n @Listen('change')\n onHostElementChange(event: CustomEvent) {\n if (!isEventFromElement(event, this.hostElement) \|\| this.hostElement.onchange) return;\n switch (event.detail.name) {\n case 'save':\n this.value = event.detail.value;\n break;\n\n case 'cancel':\n this.inputElement.value = this.value;\n break;\n }\n\n this.editing = event.detail.editing;\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.hostElement.shadowRoot.querySelector<HTMLElement>(this.editing ? 'q2-input' : 'q2-btn.begin-edit').focus();\n }\n\n ///////// EVENTS /////////\n\n @Event() input: EventEmitter;\n @Event() change: EventEmitter;\n\n /// Methods ///\n /\n Emulates clicking the edit button, which will display the `<q2-input>` field.\n \n @testOnly\n /\n @Method()\n clickEdit() {\n if (this.editing) return;\n this.editBtnElement?.click();\n }\n\n /\n Emulates clicking the cancel button, which will hide the `<q2-input>` field.\n \n @testOnly\n /\n @Method()\n clickCancel() {\n if (!this.editing) return;\n this.cancelBtnElement?.click();\n }\n\n /\n Emulates clicking the save button, saving value in the `<q2-input>` field, and emitting a `change` event.\n \n @testOnly\n /\n @Method()\n clickSave() {\n if (!this.editing) return;\n this.saveBtnElement?.click();\n }\n\n /\n Emulates clicking the edit button, and setting the value of the `<q2-input>` field.\n \n If the `clickSave` argument is `true` (default), the save button will be clicked after the value is set, and a\\\n * `change` event will be emitted.\n \n @testOnly\n */\n @Method()\n async setValue(value: string, options: { clickSave?: boolean } = { clickSave: true }) {\n await this.clickEdit();\n await waitForNextPaint();\n\n await this.inputElement.setValue(value);\n\n if (options.clickSave) {\n await this.clickSave();\n await waitForNextPaint();\n }\n }\n\n //////// ACTIONS /////////\n\n inputInput = (event: Q2InputCustomEvent<IEventDetail> & InputEvent) => {\n event.stopPropagation();\n this.input.emit(event.detail);\n this.formattedValue = event.detail.formattedValue;\n this.innerValue = event.detail.value;\n };\n\n inputChange = (e: CustomEvent) => {\n e.stopPropagation();\n };\n\n inputKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Escape' \|\| e.key === 'Esc') {\n e.preventDefault();\n this.cancelClick();\n return;\n }\n\n if (e.key === 'Enter') {\n e.preventDefault();\n this.saveClick();\n return;\n }\n };\n\n inputClick = (event: MouseEvent) => {\n event.stopPropagation();\n };\n\n saveClick = (event?: MouseEvent) => {\n event && event.stopPropagation();\n const valueFromInputProp = this.hostElement.shadowRoot.querySelector('q2-input').value;\n this.defaultValue = valueFromInputProp;\n this.change.emit({\n editing: false,\n name: 'save',\n value: this.innerValue \|\| valueFromInputProp,\n formattedValue: this.formattedValue \|\| valueFromInputProp,\n });\n\n setTimeout(() => {\n const { errors = [] } = this;\n if (!errors.length) return;\n this.hostElement.focus();\n }, 1);\n };\n\n editClick = (event: MouseEvent) => {\n event?.stopPropagation();\n this.change.emit({ editing: true, name: 'edit' });\n };\n\n cancelClick = (event?: MouseEvent) => {\n event?.stopPropagation();\n this.change.emit({ editing: false, name: 'cancel' });\n this.inputElement.setValue(this.defaultValue);\n };\n\n render() {\n return (\n <div>\n {this.generateEditStateDOM()}\n {this.generateReadStateDOM()}\n </div>\n );\n }\n\n generateEditStateDOM() {\n return (\n <div\n class={this.wrapperClass}\n hidden={!this.editing}\n >\n <q2-input\n ref={el => (this.inputElement = el)}\n label={this.locLabel}\n hideLabel={this.hideLabel}\n value={this.value}\n hints={(Array.isArray(this.hints) && this.hints.map(str => loc(str))) \|\| undefined}\n errors={(Array.isArray(this.errors) && this.errors.map(str => loc(str))) \|\| undefined}\n type={this.type}\n disabled={this.disabled}\n formatModifier={this.formatModifier}\n maxlength={this.maxlength}\n test-id=\"editableInput\"\n onInput={this.inputInput}\n onChange={this.inputChange}\n onKeyDown={this.inputKeyDown}\n onClick={this.inputClick}\n />\n <q2-btn\n ref={el => (this.cancelBtnElement = el)}\n class=\"cancel-edit\"\n label={`${loc('tecton.element.editableField.cancel')} ${this.locLabel}`}\n hide-label\n test-id=\"cancelButton\"\n onClick={this.cancelClick}\n >\n <q2-icon type=\"close\" />\n </q2-btn>\n <q2-btn\n ref={el => (this.saveBtnElement = el)}\n class=\"save-edit\"\n label={`${loc('tecton.element.editableField.save')} ${this.locLabel}`}\n hide-label\n test-id=\"saveButton\"\n onClick={this.saveClick}\n >\n <q2-icon type=\"checkmark\" />\n </q2-btn>\n </div>\n );\n }\n\n generateReadStateDOM() {\n if (this.persistentLabel && this.locLabel) {\n return (\n <div\n class={this.wrapperClass}\n hidden={this.editing}\n >\n <dl>\n <dt class=\"read-state-label\">{this.locLabel}</dt>\n <dd>\n <span class=\"text-wrapper\">{this.formattedValue \|\| this.value}</span>\n {this.generateEditBtn()}\n </dd>\n </dl>\n </div>\n );\n }\n return (\n <div\n class={this.wrapperClass}\n hidden={this.editing}\n >\n <div class=\"text-wrapper\">{this.formattedValue \|\| this.value}</div>\n {this.generateEditBtn()}\n </div>\n );\n }\n\n generateEditBtn() {\n return (\n <q2-btn\n ref={el => (this.editBtnElement = el)}\n class=\"begin-edit\"\n label={`${loc('tecton.element.editableField.edit')} ${this.locLabel}`}\n hide-label\n disabled={this.disabled}\n test-id=\"editButton\"\n onClick={this.editClick}\n >\n <q2-icon type=\"edit\" />\n </q2-btn>\n );\n }\n}\n"]}

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

@@ -8,7 +8,7 @@
 *:focus {
   outline: none;
-  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C);
+  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc);
 }
 :host {

package/dist/collection/components/q2-icon/styles.css CHANGED Viewed

@@ -8,7 +8,7 @@
 *:focus {
   outline: none;
-  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C);
+  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc);
 }
 :host {

package/dist/collection/components/q2-input/formatting/date.js CHANGED Viewed

@@ -22,7 +22,7 @@ const dateFormats = {
   'D-M-YY': '#?-#?-##',
 };
 export default function formatDate(value, format = 'MM/DD/YYYY') {
-  const mask = dateFormats[format] || dateFormats['MM/DD/YYYY'];
+  const mask = dateFormats[format === null || format === void 0 ? void 0 : format.toUpperCase()] || dateFormats['MM/DD/YYYY'];
   const formattedValueObject = formatValue(value, mask);
   return Object.assign(Object.assign({}, formattedValueObject), { value: formattedValueObject.formattedValue });
 }

package/dist/collection/components/q2-input/formatting/date.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"date.js","sourceRoot":"","sources":["../../../../../src/components/q2-input/formatting/date.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,WAAW,CAAC;AAEpC,MAAM,WAAW,GAAG;EAChB,YAAY,EAAE,YAAY;EAC1B,UAAU,EAAE,YAAY;EACxB,UAAU,EAAE,UAAU;EACtB,QAAQ,EAAE,UAAU;EACpB,OAAO,EAAE,OAAO;EAChB,MAAM,EAAE,OAAO;EACf,YAAY,EAAE,YAAY;EAC1B,UAAU,EAAE,YAAY;EACxB,UAAU,EAAE,UAAU;EACtB,QAAQ,EAAE,UAAU;EACpB,YAAY,EAAE,YAAY;EAC1B,UAAU,EAAE,YAAY;EACxB,UAAU,EAAE,UAAU;EACtB,QAAQ,EAAE,UAAU;EACpB,OAAO,EAAE,OAAO;EAChB,MAAM,EAAE,OAAO;EACf,YAAY,EAAE,YAAY;EAC1B,UAAU,EAAE,YAAY;EACxB,UAAU,EAAE,UAAU;EACtB,QAAQ,EAAE,UAAU;CACvB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAa,EAAE,SAAiB,YAAY;EAC3E,MAAM,IAAI,GAAG,WAAW,CAAC,MAAM,CAAC,IAAI,WAAW,CAAC,YAAY,CAAC,CAAC;~~EAE9D~~,MAAM,oBAAoB,GAAG,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;EAEtD,uCACO,oBAAoB,KACvB,KAAK,EAAE,oBAAoB,CAAC,cAAc,IAC5C;AACN,CAAC","sourcesContent":["import formatValue from './generic';\n\nconst dateFormats = {\n 'MM/DD/YYYY': '##/##/####',\n 'M/D/YYYY': '#?/#?/####',\n 'MM/DD/YY': '##/##/##',\n 'M/D/YY': '#?/#?/##',\n 'MM/YY': '##/##',\n 'M/YY': '#?/##',\n 'DD/MM/YYYY': '##/##/####',\n 'D/M/YYYY': '#?/#?/####',\n 'DD/MM/YY': '##/##/##',\n 'D/M/YY': '#?/#?/##',\n 'MM-DD-YYYY': '##-##-####',\n 'M-D-YYYY': '#?-#?-####',\n 'MM-DD-YY': '##-##-##',\n 'M-D-YY': '#?-#?-##',\n 'MM-YY': '##-##',\n 'M-YY': '#?-##',\n 'DD-MM-YYYY': '##-##-####',\n 'D-M-YYYY': '#?-#?-####',\n 'DD-MM-YY': '##-##-##',\n 'D-M-YY': '#?-#?-##',\n};\n\nexport default function formatDate(value: string, format: string = 'MM/DD/YYYY') {\n const mask = dateFormats[format] \|\| dateFormats['MM/DD/YYYY'];\n\n const formattedValueObject = formatValue(value, mask);\n\n return {\n ...formattedValueObject,\n value: formattedValueObject.formattedValue,\n };\n}\n"]}
1	+ {"version":3,"file":"date.js","sourceRoot":"","sources":["../../../../../src/components/q2-input/formatting/date.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,WAAW,CAAC;AAEpC,MAAM,WAAW,GAAG;EAChB,YAAY,EAAE,YAAY;EAC1B,UAAU,EAAE,YAAY;EACxB,UAAU,EAAE,UAAU;EACtB,QAAQ,EAAE,UAAU;EACpB,OAAO,EAAE,OAAO;EAChB,MAAM,EAAE,OAAO;EACf,YAAY,EAAE,YAAY;EAC1B,UAAU,EAAE,YAAY;EACxB,UAAU,EAAE,UAAU;EACtB,QAAQ,EAAE,UAAU;EACpB,YAAY,EAAE,YAAY;EAC1B,UAAU,EAAE,YAAY;EACxB,UAAU,EAAE,UAAU;EACtB,QAAQ,EAAE,UAAU;EACpB,OAAO,EAAE,OAAO;EAChB,MAAM,EAAE,OAAO;EACf,YAAY,EAAE,YAAY;EAC1B,UAAU,EAAE,YAAY;EACxB,UAAU,EAAE,UAAU;EACtB,QAAQ,EAAE,UAAU;CACvB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAa,EAAE,SAAiB,YAAY;EAC3E,MAAM,IAAI,GAAG,WAAW,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,WAAW,EAAE,CAAC,IAAI,WAAW,CAAC,YAAY,CAAC,CAAC;EAE7E,MAAM,oBAAoB,GAAG,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;EAEtD,uCACO,oBAAoB,KACvB,KAAK,EAAE,oBAAoB,CAAC,cAAc,IAC5C;AACN,CAAC","sourcesContent":["import formatValue from './generic';\n\nconst dateFormats = {\n 'MM/DD/YYYY': '##/##/####',\n 'M/D/YYYY': '#?/#?/####',\n 'MM/DD/YY': '##/##/##',\n 'M/D/YY': '#?/#?/##',\n 'MM/YY': '##/##',\n 'M/YY': '#?/##',\n 'DD/MM/YYYY': '##/##/####',\n 'D/M/YYYY': '#?/#?/####',\n 'DD/MM/YY': '##/##/##',\n 'D/M/YY': '#?/#?/##',\n 'MM-DD-YYYY': '##-##-####',\n 'M-D-YYYY': '#?-#?-####',\n 'MM-DD-YY': '##-##-##',\n 'M-D-YY': '#?-#?-##',\n 'MM-YY': '##-##',\n 'M-YY': '#?-##',\n 'DD-MM-YYYY': '##-##-####',\n 'D-M-YYYY': '#?-#?-####',\n 'DD-MM-YY': '##-##-##',\n 'D-M-YY': '#?-#?-##',\n};\n\nexport default function formatDate(value: string, format: string = 'MM/DD/YYYY') {\n const mask = dateFormats[format?.toUpperCase()] \|\| dateFormats['MM/DD/YYYY'];\n\n const formattedValueObject = formatValue(value, mask);\n\n return {\n ...formattedValueObject,\n value: formattedValueObject.formattedValue,\n };\n}\n"]}