q2-tecton-elements 1.9.4 → 1.9.8

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 (21) hide show
  1. package/dist/cjs/q2-btn_2.cjs.entry.js +4 -3
  2. package/dist/cjs/q2-calendar.cjs.entry.js +14 -5
  3. package/dist/cjs/q2-input.cjs.entry.js +10 -2
  4. package/dist/collection/components/q2-btn/index.js +4 -3
  5. package/dist/collection/components/q2-calendar/index.js +21 -8
  6. package/dist/collection/components/q2-input/formatting/phone.js +8 -0
  7. package/dist/collection/components/q2-input/index.js +1 -1
  8. package/dist/collection/components/q2-input/styles.css +20 -125
  9. package/dist/esm/q2-btn_2.entry.js +4 -3
  10. package/dist/esm/q2-calendar.entry.js +14 -5
  11. package/dist/esm/q2-input.entry.js +10 -2
  12. package/dist/q2-tecton-elements/{p-f6d2fa2f.entry.js → p-54cbd826.entry.js} +1 -1
  13. package/dist/q2-tecton-elements/{p-6cf21e5e.entry.js → p-93799868.entry.js} +1 -1
  14. package/dist/q2-tecton-elements/p-9f328dbd.entry.js +1 -0
  15. package/dist/q2-tecton-elements/q2-tecton-elements.esm.js +1 -1
  16. package/dist/types/components/q2-calendar/helpers.d.ts +3 -0
  17. package/dist/types/components/q2-calendar/index.d.ts +5 -2
  18. package/dist/types/components/q2-input/formatting/phone.d.ts +8 -0
  19. package/dist/types/components.d.ts +2 -2
  20. package/package.json +2 -2
  21. package/dist/q2-tecton-elements/p-044827e2.entry.js +0 -1
package/dist/cjs/q2-btn_2.cjs.entry.js CHANGED
@@ -36,7 +36,7 @@ const Q2Btn = class {
36
36
  }
37
37
  handleIcons() {
38
38
  // Only allow one icon in the button
39
- const icon = Array.from(this.hostElement.querySelectorAll('q2-icon')).reduce((acc, element) => {
39
+ const icon = Array.from(this.hostElement.querySelectorAll(':scope > q2-icon')).reduce((acc, element) => {
40
40
  if (acc)
41
41
  element.remove();
42
42
  else
@@ -44,9 +44,10 @@ const Q2Btn = class {
44
44
  return acc;
45
45
  }, null);
46
46
  const hasIcon = !!icon;
47
+ const hasLoc = !!this.hostElement.querySelector('q2-loc');
47
48
  const hasText = !!this.hostElement.textContent.trim();
48
- const hasIconLeft = hasText && hasIcon && this.hostElement.firstElementChild === icon;
49
- const hasIconRight = hasText && hasIcon && this.hostElement.lastElementChild === icon;
49
+ const hasIconLeft = (hasLoc || hasText) && hasIcon && this.hostElement.firstElementChild === icon;
50
+ const hasIconRight = (hasLoc || hasText) && hasIcon && this.hostElement.lastElementChild === icon;
50
51
  const hasIconOnly = !hasIconLeft && !hasIconRight && hasIcon;
51
52
  let iconPosition;
52
53
  if (hasIconOnly)
package/dist/cjs/q2-calendar.cjs.entry.js CHANGED
@@ -6655,7 +6655,9 @@ const Q2Calendar = class {
6655
6655
  return stringToMoment(this.typedValue);
6656
6656
  }
6657
6657
  else {
6658
- return stringToMoment(this.value);
6658
+ const { value } = this;
6659
+ const isMoment = value && typeof value !== 'string' && 'toDate' in value;
6660
+ return isMoment ? value : stringToMoment(value);
6659
6661
  }
6660
6662
  }
6661
6663
  get dateValidators() {
@@ -6705,13 +6707,20 @@ const Q2Calendar = class {
6705
6707
  index.handleAriaLabel(this);
6706
6708
  }
6707
6709
  valueObserver(newValue) {
6710
+ const isMoment = newValue && typeof newValue !== 'string' && 'toDate' in newValue;
6708
6711
  if (this.isTypeable) {
6709
- this.typedValue = newValue;
6712
+ const newValueAsString = isMoment
6713
+ ? formatDateShort(newValue.toDate())
6714
+ : newValue;
6715
+ this.typedValue = newValueAsString;
6710
6716
  }
6711
6717
  else {
6712
- const momentValue = stringToMoment(newValue);
6713
- this.inputField.value = newValue;
6714
- this.selectedMonthYear = setupMonthYear(momentValue === null || momentValue === void 0 ? void 0 : momentValue.toDate(), this.monthStrings);
6718
+ const momentValue = isMoment
6719
+ ? newValue
6720
+ : stringToMoment(newValue);
6721
+ const newValueAsDate = momentValue === null || momentValue === void 0 ? void 0 : momentValue.toDate();
6722
+ this.inputField.value = formatDateShort(newValueAsDate);
6723
+ this.selectedMonthYear = setupMonthYear(newValueAsDate, this.monthStrings);
6715
6724
  this.dateList = this.buildDateList(this.selectedMonthYear);
6716
6725
  this.validateDate();
6717
6726
  }
package/dist/cjs/q2-input.cjs.entry.js CHANGED
@@ -1735,6 +1735,14 @@ const phoneNumberFormats = {
1735
1735
  prefix: '+592 '
1736
1736
  },
1737
1737
  HK: {
1738
+ mask: '####-####',
1739
+ prefix: '+852 '
1740
+ },
1741
+ HN: {
1742
+ mask: '########',
1743
+ prefix: '+504 '
1744
+ },
1745
+ HT: {
1738
1746
  mask: '####-####',
1739
1747
  prefix: '+509 '
1740
1748
  },
@@ -2859,7 +2867,7 @@ const formatCreditCard = {
2859
2867
  unknownFormatter
2860
2868
  };
2861
2869
 
2862
- const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{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}.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}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}: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))}:host([hidden]){display:none}.field-container,.input-container{position:relative}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(\n --tct-input-label-margin-bottom,\n var(--tct-scale-1, var(--app-scale-1, 5px))\n );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)))}.optional-tag{margin-left:var(\n --tct-input-label-optional-margin-left,\n var(--tct-scale-1, var(--app-scale-1, 5px))\n );color:var(\n --tct-input-label-optional-font-color,\n var(--tct-a11y-color, var(--t-a11y-gray-color, #767676))\n );font-size:var(--tct-input-label-optional-font-size, 12px);font-weight:var(--tct-input-label-optional-font-weight, 400)}.input-container{display:flex;align-items:center;--comp-input-border-top-left-radius:var(\n --tct-input-border-top-left-radius,\n var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n );--comp-input-border-top-right-radius:var(\n --tct-input-border-top-right-radius,\n var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n );--comp-input-border-bottom-right-radius:var(\n --tct-input-border-bottom-right-radius,\n var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n );--comp-input-border-bottom-left-radius:var(\n --tct-input-border-bottom-left-radius,\n var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n );--comp-input-border-radius:var(--comp-input-border-top-left-radius)\n var(--comp-input-border-top-right-radius) var(--comp-input-border-bottom-right-radius)\n var(--comp-input-border-bottom-left-radius);--comp-input-border-width:var(--tct-input-border-top-width, 1px)\n var(--tct-input-border-right-width, 1px) var(--tct-input-border-bottom-width, 1px)\n var(--tct-input-border-left-width, 1px);--comp-input-focus-border-width:var(--tct-input-focus-border-top-width, 1px)\n var(--tct-input-focus-border-right-width, 1px)\n var(--tct-input-focus-border-bottom-width, 1px)\n var(--tct-input-focus-border-left-width, 1px);--comp-input-prefix-clearance:calc(\n 3 * var(--tct-input-prefix-font-size, 14px) + var(--tct-scale-1, 5px)\n );--comp-input-icon-clearance:34px;--comp-input-min-height:44px;border-width:var(--comp-input-border-width);border-style:solid;border-color:var(\n --tct-input-border-color,\n var(--t-input-border, var(--tct-gray-11, var(--t-gray-11, #cccccc)))\n );border-radius:var(--comp-input-border-radius);box-shadow:var(--tct-input-box-shadow, none);transition:border-width\n var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))),\n border-color var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))),\n box-shadow var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)))}.input-field{flex:1;border:0;-webkit-appearance:none;appearance:none;box-sizing:border-box;min-height:var(--comp-input-min-height);height:var(--tct-input-height, 44px);width:100%;padding:0 var(--tct-input-horizontal-padding, var(--tct-scale-2, var(--app-scale-2, 10px)));background-color:var(\n --tct-input-bg,\n var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, #f2f2f2)))\n );color:var(--tct-input-font-color, var(--t-input-font-color, var(--t-text, inherit)))}input{display:inline-block}.input-field:focus{outline:none;box-shadow:none}.input-field::-webkit-outer-spin-button,.input-field::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.input-field[type='number']{-moz-appearance:textfield}.input-container:focus-within{border-width:var(--comp-input-focus-border-width, 1px);border-color:var(\n --tct-input-focus-border-color,\n var(--t-input-focus, var(--tct-gray-9, var(--t-gray-9, #999999)))\n );box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff)),\n var(--tct-input-focus-box-shadow, 0 0 transparent)}input::-ms-clear{display:none}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::placeholder,.placeholder-text{color:var(\n --tct-input-placeholder-font-color,\n var(\n --t-input-placeholder-font-color,\n var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666))))\n )\n )}.pseudo-input{display:inline-flex;align-items:center}.pseudo-input span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.input-icons-container-left{display:flex;flex-direction:row;align-items:center}.input-icons-container-left q2-icon{position:absolute}.input-icons-container-right{display:flex;gap:var(--tct-scale-2, var(--app-scale-2, 10px));flex-direction:row;padding-left:3px;align-items:center;margin-right:var(--tct-scale-2, var(--app-scale-2, 10px))}.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);pointer-events:none;color:var(\n --tct-input-icon-stroke-primary,\n var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999)))\n );--tct-icon-stroke-primary:var(\n --tct-input-icon-stroke-primary,\n var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))\n );--t-icon-stroke-primary:var(\n --tct-input-icon-stroke-primary,\n var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))\n )}.icon-left{left:var(--tct-scale-1, var(--app-scale-1, 5px))}.icon-left-muted{opacity:0.5}.input-prefix,.input-suffix{display:inline-flex;align-items:center;justify-content:center;min-height:calc(\n var(--comp-input-min-height) - var(--tct-input-focus-border-top-width, 1px) -\n var(--tct-input-focus-border-bottom-width, 1px)\n );height:calc(\n var(--tct-input-height, 44px) - var(--tct-input-focus-border-top-width, 1px) -\n var(--tct-input-focus-border-bottom-width, 1px)\n );width:3em;bottom:var(--tct-input-border-bottom-width, 1px);font-size:var(--tct-input-prefix-font-size, inherit);color:var(--tct-input-prefix-font-color, inherit);background-color:var(\n --tct-input-prefix-bg,\n var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, #f2f2f2))))\n );transition:color var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))),\n background-color var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)))}.input-prefix{left:var(--tct-input-border-left-width, 1px);border-right:1px solid\n var(\n --tct-input-prefix-border-color,\n var(\n --tct-input-border-color,\n var(\n --t-input-border,\n var(\n --tct-gray-11,\n var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))\n )\n )\n )\n );border-top-left-radius:calc(\n var(--comp-input-border-top-left-radius) - var(--tct-input-border-top-width, 1px) -\n var(--tct-input-border-left-width, 1px)\n );border-bottom-left-radius:calc(\n var(--comp-input-border-bottom-left-radius) - var(--tct-input-border-bottom-width, 1px) -\n var(--tct-input-border-left-width, 1px)\n );pointer-events:none;}.input-suffix{right:var(--tct-input-border-right-width, 1px);border-left:1px solid\n var(\n --tct-input-prefix-border-color,\n var(\n --tct-input-border-color,\n var(\n --t-input-border,\n var(\n --tct-gray-11,\n var(--t-gray-11, var(--tct-gray-l1, var(--app-grayl1, #cccccc)))\n )\n )\n )\n );border-top-right-radius:calc(\n var(--comp-input-border-top-right-radius) - var(--tct-input-border-top-width, 1px) -\n var(--tct-input-border-right-width, 1px)\n );border-bottom-right-radius:calc(\n var(--comp-input-border-bottom-right-radius) - var(--tct-input-border-bottom-width, 1px) -\n var(--tct-input-border-right-width, 1px)\n )}.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{position:absolute;margin-right:var(--tct-scale-2, var(--app-scale-2, 20px))}.btn-clear{margin-top:calc(var(--tct-input-border-top-width, 1px) / 2);margin-bottom:calc(var(--tct-input-border-bottom-width, 1px) / 2);height:22px;--tct-btn-icon-width:17px;--tct-btn-icon-height:22px;--tct-icon-size:17px}.messages-container{height:0px;overflow:hidden;background-color:var(\n --tct-message-bg,\n var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))\n );box-shadow:var(\n --tct-input-message-box-shadow,\n var(--tct-box-shadow-1, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3)))\n );transition:height\n var(--tct-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(\n --tct-input-disabled-opacity,\n var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))\n )}.input-field[disabled]{cursor:not-allowed}.has-focus .input-prefix{border-top-left-radius:calc(\n var(--comp-input-border-top-left-radius) - var(--tct-input-focus-border-top-width, 1px) -\n var(--tct-input-focus-border-left-width, 1px)\n );border-bottom-left-radius:calc(\n var(--comp-input-border-bottom-left-radius) -\n var(--tct-input-focus-border-bottom-width, 1px) -\n var(--tct-input-focus-border-left-width, 1px)\n )}.has-focus .input-suffix{border-top-left-radius:calc(\n var(--comp-input-border-top-left-radius) - var(--tct-input-focus-border-top-width, 1px) -\n var(--tct-input-focus-border-left-width, 1px)\n );border-bottom-left-radius:calc(\n var(--comp-input-border-bottom-left-radius) -\n var(--tct-input-focus-border-bottom-width, 1px) -\n var(--tct-input-focus-border-left-width, 1px)\n )}.right-aligned .input-field{text-align:right}.right-aligned .icon-error{left:var(--tct-scale-2, var(--app-scale-2, 10px));right:auto}.has-error label{color:var(--tct-input-error-label-font-color, var(--tct-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(\n --tct-input-error-prefix-bg,\n var(\n --tct-input-bg,\n var(\n --t-input-bg,\n var(--tct-gray-14, var(--app-var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))\n )\n )\n )}.has-error .input-container:not(:focus-within){border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000))}.has-error.has-icon-right.left-aligned .btn-clear{right:calc(2 * var(--comp-input-icon-clearance))}.has-error.has-clear.has-icon-right.left-aligned .input-field{padding-right:calc(3 * var(--comp-input-icon-clearance))}.has-error.right-aligned .input-field{padding-left:var(--comp-input-icon-clearance)}.has-error.right-aligned.has-prefix .input-field{padding-left:calc(var(--comp-input-prefix-clearance) + var(--comp-input-icon-clearance))}.has-error.right-aligned.has-icon-left .input-field{padding-left:calc(2 * var(--comp-input-icon-clearance))}.has-error.right-aligned .icon-left{left:var(--comp-input-icon-clearance)}.has-prefix .input-field{padding-left:var(--comp-input-prefix-clearance)}.has-prefix.right-aligned .icon-error{left:var(--comp-input-prefix-clearance);margin-left:var(--tct-scale-1, 5px)}.has-suffix .icon-error,.has-suffix .btn-clear{right:var(--comp-input-prefix-clearance)}.has-suffix.has-error .btn-clear{right:calc(var(--comp-input-prefix-clearance) + var(--comp-input-icon-clearance))}.has-icon-left .input-field{padding-left:var(--comp-input-icon-clearance)}.has-icon-left.has-icon-separator .input-field{padding-left:calc(var(--comp-input-icon-clearance) + 14px)}.has-icon-left.has-icon-separator .icon-left{width:26px;height:26px;left:8px}.has-icon-left.has-icon-separator .input-container .vertical-separator{position:absolute;left:var(--tct-input-border-left-width, 1px);height:calc(var(--comp-input-min-height) - 2px);width:3em;border-right:1px solid\n var(\n --tct-input-prefix-border-color,\n var(\n --tct-input-border-color,\n var(\n --t-input-border,\n var(\n --tct-gray-11,\n var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))\n )\n )\n )\n )}";
2870
+ const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{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}.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}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}: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))}:host([hidden]){display:none}.field-container,.input-container{position:relative}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(\n --tct-input-label-margin-bottom,\n var(--tct-scale-1, var(--app-scale-1, 5px))\n );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)))}.optional-tag{margin-left:var(\n --tct-input-label-optional-margin-left,\n var(--tct-scale-1, var(--app-scale-1, 5px))\n );color:var(\n --tct-input-label-optional-font-color,\n var(--tct-a11y-color, var(--t-a11y-gray-color, #767676))\n );font-size:var(--tct-input-label-optional-font-size, 12px);font-weight:var(--tct-input-label-optional-font-weight, 400)}.input-container{display:flex;align-items:center;--comp-input-horizontal-gap:var(\n --tct-input-horizontal-gap,\n var(--t-input-horizontal-gap, 8px)\n );--comp-input-border-top-left-radius:var(\n --tct-input-border-top-left-radius,\n var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n );--comp-input-border-top-right-radius:var(\n --tct-input-border-top-right-radius,\n var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n );--comp-input-border-bottom-right-radius:var(\n --tct-input-border-bottom-right-radius,\n var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n );--comp-input-border-bottom-left-radius:var(\n --tct-input-border-bottom-left-radius,\n var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n );--comp-input-border-radius:var(--comp-input-border-top-left-radius)\n var(--comp-input-border-top-right-radius) var(--comp-input-border-bottom-right-radius)\n var(--comp-input-border-bottom-left-radius);--comp-input-border-width:var(--tct-input-border-top-width, 1px)\n var(--tct-input-border-right-width, 1px) var(--tct-input-border-bottom-width, 1px)\n var(--tct-input-border-left-width, 1px);--comp-input-focus-border-width:var(--tct-input-focus-border-top-width, 1px)\n var(--tct-input-focus-border-right-width, 1px)\n var(--tct-input-focus-border-bottom-width, 1px)\n var(--tct-input-focus-border-left-width, 1px);--comp-input-prefix-clearance:calc(\n 3 * var(--tct-input-prefix-font-size, 14px) + var(--tct-scale-1, 5px)\n );--comp-input-icon-clearance:34px;--comp-input-min-height:44px;border-width:var(--comp-input-border-width);border-style:solid;border-color:var(\n --tct-input-border-color,\n var(--t-input-border, var(--tct-gray-11, var(--t-gray-11, #cccccc)))\n );border-radius:var(--comp-input-border-radius);box-shadow:var(--tct-input-box-shadow, none);transition:border-width\n var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))),\n border-color var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))),\n box-shadow var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)))}.input-field{flex:1;border:0;-webkit-appearance:none;appearance:none;box-sizing:border-box;min-height:var(--comp-input-min-height);height:var(--tct-input-height, 44px);width:100%;padding:0 var(--tct-input-horizontal-padding, var(--tct-scale-2, var(--app-scale-2, 10px)));background-color:var(\n --tct-input-bg,\n var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, #f2f2f2)))\n );color:var(--tct-input-font-color, var(--t-input-font-color, var(--t-text, inherit)))}input{display:inline-block}.input-field:focus{outline:none;box-shadow:none}.input-field::-webkit-outer-spin-button,.input-field::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.input-field[type='number']{-moz-appearance:textfield}.input-container:focus-within{border-width:var(--comp-input-focus-border-width, 1px);border-color:var(\n --tct-input-focus-border-color,\n var(--t-input-focus, var(--tct-gray-9, var(--t-gray-9, #999999)))\n );box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff)),\n var(--tct-input-focus-box-shadow, 0 0 transparent)}input::-ms-clear{display:none}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::placeholder,.placeholder-text{color:var(\n --tct-input-placeholder-font-color,\n var(\n --t-input-placeholder-font-color,\n var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666))))\n )\n )}.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{display:flex;flex-direction:row;align-items:center;gap:var(--comp-input-horizontal-gap);padding-left:var(--comp-input-horizontal-gap)}.input-icons-container-right:empty{display:none}.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);pointer-events:none;color:var(\n --tct-input-icon-stroke-primary,\n var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999)))\n );--tct-icon-stroke-primary:var(\n --tct-input-icon-stroke-primary,\n var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))\n );--t-icon-stroke-primary:var(\n --tct-input-icon-stroke-primary,\n var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))\n )}.icon-left-muted{opacity:0.5}.input-prefix,.input-suffix{margin-left:calc(var(--comp-input-horizontal-gap) * -1);margin-right:calc(var(--comp-input-horizontal-gap) * -1);width:3em;display:inline-flex;align-items:center;justify-content:center;min-height:calc(\n var(--comp-input-min-height) - var(--tct-input-focus-border-top-width, 1px) -\n var(--tct-input-focus-border-bottom-width, 1px)\n );height:calc(\n var(--tct-input-height, 44px) - var(--tct-input-focus-border-top-width, 1px) -\n var(--tct-input-focus-border-bottom-width, 1px)\n );font-size:var(--tct-input-prefix-font-size, inherit);color:var(--tct-input-prefix-font-color, inherit);background-color:var(\n --tct-input-prefix-bg,\n var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, #f2f2f2))))\n );transition:color var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))),\n background-color var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)))}.input-prefix{border-top-left-radius:calc(\n var(--comp-input-border-top-left-radius) - var(--tct-input-border-top-width, 1px) -\n var(--tct-input-border-left-width, 1px)\n );border-bottom-left-radius:calc(\n var(--comp-input-border-bottom-left-radius) - var(--tct-input-border-bottom-width, 1px) -\n var(--tct-input-border-left-width, 1px)\n );pointer-events:none;}.input-suffix{border-top-right-radius:calc(\n var(--comp-input-border-top-right-radius) - var(--tct-input-border-top-width, 1px) -\n var(--tct-input-border-right-width, 1px)\n );border-bottom-right-radius:calc(\n var(--comp-input-border-bottom-right-radius) - var(--tct-input-border-bottom-width, 1px) -\n var(--tct-input-border-right-width, 1px)\n )}.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{position:absolute;margin-right:var(--tct-scale-2, var(--app-scale-2, 20px))}.btn-clear{margin-top:calc(var(--tct-input-border-top-width, 1px) / 2);margin-bottom:calc(var(--tct-input-border-bottom-width, 1px) / 2);height:22px;--tct-btn-icon-width:17px;--tct-btn-icon-height:22px;--tct-icon-size:17px}.messages-container{height:0px;overflow:hidden;background-color:var(\n --tct-message-bg,\n var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))\n );box-shadow:var(\n --tct-input-message-box-shadow,\n var(--tct-box-shadow-1, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3)))\n );transition:height\n var(--tct-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(\n --tct-input-disabled-opacity,\n var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))\n )}.input-field[disabled]{cursor:not-allowed}.right-aligned .input-field{text-align:right}.has-error label{color:var(--tct-input-error-label-font-color, var(--tct-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(\n --tct-input-error-prefix-bg,\n var(\n --tct-input-bg,\n var(\n --t-input-bg,\n var(--tct-gray-14, var(--app-var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))\n )\n )\n )}.has-error .input-container:not(:focus-within){border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000))}.icon-left{width:26px;height:26px}.vertical-separator{height:calc(var(--comp-input-min-height) - 2px);border-right:1px solid\n var(\n --tct-input-prefix-border-color,\n var(\n --tct-input-border-color,\n var(\n --t-input-border,\n var(\n --tct-gray-11,\n var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))\n )\n )\n )\n )}";
2863
2871
 
2864
2872
  const Q2Input = class {
2865
2873
  constructor(hostRef) {
@@ -3056,7 +3064,7 @@ const Q2Input = class {
3056
3064
  return this.iconLeft;
3057
3065
  }
3058
3066
  get showIconSeperator() {
3059
- return this.type === 'credit-card';
3067
+ return this.type === 'credit-card' || !!this.formattedValueObject.prefix;
3060
3068
  }
3061
3069
  get computedClassForIconLeft() {
3062
3070
  let className = 'icon-left';
package/dist/collection/components/q2-btn/index.js CHANGED
@@ -27,7 +27,7 @@ export class Q2Btn {
27
27
  }
28
28
  handleIcons() {
29
29
  // Only allow one icon in the button
30
- const icon = Array.from(this.hostElement.querySelectorAll('q2-icon')).reduce((acc, element) => {
30
+ const icon = Array.from(this.hostElement.querySelectorAll(':scope > q2-icon')).reduce((acc, element) => {
31
31
  if (acc)
32
32
  element.remove();
33
33
  else
@@ -35,9 +35,10 @@ export class Q2Btn {
35
35
  return acc;
36
36
  }, null);
37
37
  const hasIcon = !!icon;
38
+ const hasLoc = !!this.hostElement.querySelector('q2-loc');
38
39
  const hasText = !!this.hostElement.textContent.trim();
39
- const hasIconLeft = hasText && hasIcon && this.hostElement.firstElementChild === icon;
40
- const hasIconRight = hasText && hasIcon && this.hostElement.lastElementChild === icon;
40
+ const hasIconLeft = (hasLoc || hasText) && hasIcon && this.hostElement.firstElementChild === icon;
41
+ const hasIconRight = (hasLoc || hasText) && hasIcon && this.hostElement.lastElementChild === icon;
41
42
  const hasIconOnly = !hasIconLeft && !hasIconRight && hasIcon;
42
43
  let iconPosition;
43
44
  if (hasIconOnly)
package/dist/collection/components/q2-calendar/index.js CHANGED
@@ -315,7 +315,9 @@ export class Q2Calendar {
315
315
  return stringToMoment(this.typedValue);
316
316
  }
317
317
  else {
318
- return stringToMoment(this.value);
318
+ const { value } = this;
319
+ const isMoment = value && typeof value !== 'string' && 'toDate' in value;
320
+ return isMoment ? value : stringToMoment(value);
319
321
  }
320
322
  }
321
323
  get dateValidators() {
@@ -365,13 +367,20 @@ export class Q2Calendar {
365
367
  handleAriaLabel(this);
366
368
  }
367
369
  valueObserver(newValue) {
370
+ const isMoment = newValue && typeof newValue !== 'string' && 'toDate' in newValue;
368
371
  if (this.isTypeable) {
369
- this.typedValue = newValue;
372
+ const newValueAsString = isMoment
373
+ ? formatDateShort(newValue.toDate())
374
+ : newValue;
375
+ this.typedValue = newValueAsString;
370
376
  }
371
377
  else {
372
- const momentValue = stringToMoment(newValue);
373
- this.inputField.value = newValue;
374
- this.selectedMonthYear = setupMonthYear(momentValue === null || momentValue === void 0 ? void 0 : momentValue.toDate(), this.monthStrings);
378
+ const momentValue = isMoment
379
+ ? newValue
380
+ : stringToMoment(newValue);
381
+ const newValueAsDate = momentValue === null || momentValue === void 0 ? void 0 : momentValue.toDate();
382
+ this.inputField.value = formatDateShort(newValueAsDate);
383
+ this.selectedMonthYear = setupMonthYear(newValueAsDate, this.monthStrings);
375
384
  this.dateList = this.buildDateList(this.selectedMonthYear);
376
385
  this.validateDate();
377
386
  }
@@ -548,9 +557,13 @@ export class Q2Calendar {
548
557
  "type": "string",
549
558
  "mutable": true,
550
559
  "complexType": {
551
- "original": "string",
552
- "resolved": "string",
553
- "references": {}
560
+ "original": "string | { toDate(): Date }",
561
+ "resolved": "string | { toDate(): Date; }",
562
+ "references": {
563
+ "Date": {
564
+ "location": "global"
565
+ }
566
+ }
554
567
  },
555
568
  "required": false,
556
569
  "optional": false,
package/dist/collection/components/q2-input/formatting/phone.js CHANGED
@@ -392,6 +392,14 @@ export const phoneNumberFormats = {
392
392
  prefix: '+592 '
393
393
  },
394
394
  HK: {
395
+ mask: '####-####',
396
+ prefix: '+852 '
397
+ },
398
+ HN: {
399
+ mask: '########',
400
+ prefix: '+504 '
401
+ },
402
+ HT: {
395
403
  mask: '####-####',
396
404
  prefix: '+509 '
397
405
  },
package/dist/collection/components/q2-input/index.js CHANGED
@@ -201,7 +201,7 @@ export class Q2Input {
201
201
  return this.iconLeft;
202
202
  }
203
203
  get showIconSeperator() {
204
- return this.type === 'credit-card';
204
+ return this.type === 'credit-card' || !!this.formattedValueObject.prefix;
205
205
  }
206
206
  get computedClassForIconLeft() {
207
207
  let className = 'icon-left';
package/dist/collection/components/q2-input/styles.css CHANGED
@@ -114,6 +114,10 @@ label {
114
114
  .input-container {
115
115
  display: flex;
116
116
  align-items: center;
117
+ --comp-input-horizontal-gap: var(
118
+ --tct-input-horizontal-gap,
119
+ var(--t-input-horizontal-gap, 8px)
120
+ );
117
121
  --comp-input-border-top-left-radius: var(
118
122
  --tct-input-border-top-left-radius,
119
123
  var(--tct-border-radius-1, var(--app-border-radius-1, 3px))
@@ -239,21 +243,27 @@ input::placeholder,
239
243
  text-overflow: ellipsis;
240
244
  }
241
245
 
246
+ .input-icons-container-left:empty {
247
+ display: none;
248
+ }
242
249
  .input-icons-container-left {
243
250
  display: flex;
244
251
  flex-direction: row;
245
252
  align-items: center;
253
+ gap: var(--comp-input-horizontal-gap);
254
+ padding-left: var(--comp-input-horizontal-gap);
246
255
  }
247
- .input-icons-container-left q2-icon {
248
- position: absolute;
256
+
257
+ .input-icons-container-right:empty {
258
+ display: none;
249
259
  }
260
+
250
261
  .input-icons-container-right {
251
262
  display: flex;
252
- gap: var(--tct-scale-2, var(--app-scale-2, 10px));
253
263
  flex-direction: row;
254
- padding-left: 3px;
255
264
  align-items: center;
256
- margin-right: var(--tct-scale-2, var(--app-scale-2, 10px));
265
+ gap: var(--comp-input-horizontal-gap);
266
+ padding-right: var(--comp-input-horizontal-gap);
257
267
  }
258
268
  .input-icons-container-right .btn-visibility-toggle {
259
269
  color: var(--tct-primary, var(--t-primary, #006eb2));
@@ -278,16 +288,15 @@ q2-icon {
278
288
  );
279
289
  }
280
290
 
281
- .icon-left {
282
- left: var(--tct-scale-1, var(--app-scale-1, 5px));
283
- }
284
-
285
291
  .icon-left-muted {
286
292
  opacity: 0.5;
287
293
  }
288
294
 
289
295
  .input-prefix,
290
296
  .input-suffix {
297
+ margin-left: calc(var(--comp-input-horizontal-gap) * -1);
298
+ margin-right: calc(var(--comp-input-horizontal-gap) * -1);
299
+ width: 3em;
291
300
  display: inline-flex;
292
301
  align-items: center;
293
302
  justify-content: center;
@@ -299,8 +308,6 @@ q2-icon {
299
308
  var(--tct-input-height, 44px) - var(--tct-input-focus-border-top-width, 1px) -
300
309
  var(--tct-input-focus-border-bottom-width, 1px)
301
310
  );
302
- width: 3em;
303
- bottom: var(--tct-input-border-bottom-width, 1px);
304
311
  font-size: var(--tct-input-prefix-font-size, inherit);
305
312
  color: var(--tct-input-prefix-font-color, inherit);
306
313
  background-color: var(
@@ -312,21 +319,6 @@ q2-icon {
312
319
  }
313
320
 
314
321
  .input-prefix {
315
- left: var(--tct-input-border-left-width, 1px);
316
- border-right: 1px solid
317
- var(
318
- --tct-input-prefix-border-color,
319
- var(
320
- --tct-input-border-color,
321
- var(
322
- --t-input-border,
323
- var(
324
- --tct-gray-11,
325
- var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))
326
- )
327
- )
328
- )
329
- );
330
322
  border-top-left-radius: calc(
331
323
  var(--comp-input-border-top-left-radius) - var(--tct-input-border-top-width, 1px) -
332
324
  var(--tct-input-border-left-width, 1px)
@@ -339,21 +331,6 @@ q2-icon {
339
331
  }
340
332
 
341
333
  .input-suffix {
342
- right: var(--tct-input-border-right-width, 1px);
343
- border-left: 1px solid
344
- var(
345
- --tct-input-prefix-border-color,
346
- var(
347
- --tct-input-border-color,
348
- var(
349
- --t-input-border,
350
- var(
351
- --tct-gray-11,
352
- var(--t-gray-11, var(--tct-gray-l1, var(--app-grayl1, #cccccc)))
353
- )
354
- )
355
- )
356
- );
357
334
  border-top-right-radius: calc(
358
335
  var(--comp-input-border-top-right-radius) - var(--tct-input-border-top-width, 1px) -
359
336
  var(--tct-input-border-right-width, 1px)
@@ -416,39 +393,10 @@ q2-icon {
416
393
  cursor: not-allowed;
417
394
  }
418
395
 
419
- .has-focus .input-prefix {
420
- border-top-left-radius: calc(
421
- var(--comp-input-border-top-left-radius) - var(--tct-input-focus-border-top-width, 1px) -
422
- var(--tct-input-focus-border-left-width, 1px)
423
- );
424
- border-bottom-left-radius: calc(
425
- var(--comp-input-border-bottom-left-radius) -
426
- var(--tct-input-focus-border-bottom-width, 1px) -
427
- var(--tct-input-focus-border-left-width, 1px)
428
- );
429
- }
430
-
431
- .has-focus .input-suffix {
432
- border-top-left-radius: calc(
433
- var(--comp-input-border-top-left-radius) - var(--tct-input-focus-border-top-width, 1px) -
434
- var(--tct-input-focus-border-left-width, 1px)
435
- );
436
- border-bottom-left-radius: calc(
437
- var(--comp-input-border-bottom-left-radius) -
438
- var(--tct-input-focus-border-bottom-width, 1px) -
439
- var(--tct-input-focus-border-left-width, 1px)
440
- );
441
- }
442
-
443
396
  .right-aligned .input-field {
444
397
  text-align: right;
445
398
  }
446
399
 
447
- .right-aligned .icon-error {
448
- left: var(--tct-scale-2, var(--app-scale-2, 10px));
449
- right: auto;
450
- }
451
-
452
400
  .has-error label {
453
401
  color: var(--tct-input-error-label-font-color, var(--tct-input-label-font-color, inherit));
454
402
  }
@@ -472,65 +420,12 @@ q2-icon {
472
420
  border-color: var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000));
473
421
  }
474
422
 
475
- .has-error.has-icon-right.left-aligned .btn-clear {
476
- right: calc(2 * var(--comp-input-icon-clearance));
477
- }
478
-
479
- .has-error.has-clear.has-icon-right.left-aligned .input-field {
480
- padding-right: calc(3 * var(--comp-input-icon-clearance));
481
- }
482
-
483
- .has-error.right-aligned .input-field {
484
- padding-left: var(--comp-input-icon-clearance);
485
- }
486
-
487
- .has-error.right-aligned.has-prefix .input-field {
488
- padding-left: calc(var(--comp-input-prefix-clearance) + var(--comp-input-icon-clearance));
489
- }
490
-
491
- .has-error.right-aligned.has-icon-left .input-field {
492
- padding-left: calc(2 * var(--comp-input-icon-clearance));
493
- }
494
-
495
- .has-error.right-aligned .icon-left {
496
- left: var(--comp-input-icon-clearance);
497
- }
498
-
499
- .has-prefix .input-field {
500
- padding-left: var(--comp-input-prefix-clearance);
501
- }
502
-
503
- .has-prefix.right-aligned .icon-error {
504
- left: var(--comp-input-prefix-clearance);
505
- margin-left: var(--tct-scale-1, 5px);
506
- }
507
-
508
- .has-suffix .icon-error,
509
- .has-suffix .btn-clear {
510
- right: var(--comp-input-prefix-clearance);
511
- }
512
-
513
- .has-suffix.has-error .btn-clear {
514
- right: calc(var(--comp-input-prefix-clearance) + var(--comp-input-icon-clearance));
515
- }
516
-
517
- .has-icon-left .input-field {
518
- padding-left: var(--comp-input-icon-clearance);
519
- }
520
-
521
- .has-icon-left.has-icon-separator .input-field {
522
- padding-left: calc(var(--comp-input-icon-clearance) + 14px);
523
- }
524
- .has-icon-left.has-icon-separator .icon-left {
423
+ .icon-left {
525
424
  width: 26px;
526
425
  height: 26px;
527
- left: 8px;
528
426
  }
529
- .has-icon-left.has-icon-separator .input-container .vertical-separator {
530
- position: absolute;
531
- left: var(--tct-input-border-left-width, 1px);
427
+ .vertical-separator {
532
428
  height: calc(var(--comp-input-min-height) - 2px);
533
- width: 3em;
534
429
  border-right: 1px solid
535
430
  var(
536
431
  --tct-input-prefix-border-color,
package/dist/esm/q2-btn_2.entry.js CHANGED
@@ -32,7 +32,7 @@ const Q2Btn = class {
32
32
  }
33
33
  handleIcons() {
34
34
  // Only allow one icon in the button
35
- const icon = Array.from(this.hostElement.querySelectorAll('q2-icon')).reduce((acc, element) => {
35
+ const icon = Array.from(this.hostElement.querySelectorAll(':scope > q2-icon')).reduce((acc, element) => {
36
36
  if (acc)
37
37
  element.remove();
38
38
  else
@@ -40,9 +40,10 @@ const Q2Btn = class {
40
40
  return acc;
41
41
  }, null);
42
42
  const hasIcon = !!icon;
43
+ const hasLoc = !!this.hostElement.querySelector('q2-loc');
43
44
  const hasText = !!this.hostElement.textContent.trim();
44
- const hasIconLeft = hasText && hasIcon && this.hostElement.firstElementChild === icon;
45
- const hasIconRight = hasText && hasIcon && this.hostElement.lastElementChild === icon;
45
+ const hasIconLeft = (hasLoc || hasText) && hasIcon && this.hostElement.firstElementChild === icon;
46
+ const hasIconRight = (hasLoc || hasText) && hasIcon && this.hostElement.lastElementChild === icon;
46
47
  const hasIconOnly = !hasIconLeft && !hasIconRight && hasIcon;
47
48
  let iconPosition;
48
49
  if (hasIconOnly)
package/dist/esm/q2-calendar.entry.js CHANGED
@@ -6651,7 +6651,9 @@ const Q2Calendar = class {
6651
6651
  return stringToMoment(this.typedValue);
6652
6652
  }
6653
6653
  else {
6654
- return stringToMoment(this.value);
6654
+ const { value } = this;
6655
+ const isMoment = value && typeof value !== 'string' && 'toDate' in value;
6656
+ return isMoment ? value : stringToMoment(value);
6655
6657
  }
6656
6658
  }
6657
6659
  get dateValidators() {
@@ -6701,13 +6703,20 @@ const Q2Calendar = class {
6701
6703
  handleAriaLabel(this);
6702
6704
  }
6703
6705
  valueObserver(newValue) {
6706
+ const isMoment = newValue && typeof newValue !== 'string' && 'toDate' in newValue;
6704
6707
  if (this.isTypeable) {
6705
- this.typedValue = newValue;
6708
+ const newValueAsString = isMoment
6709
+ ? formatDateShort(newValue.toDate())
6710
+ : newValue;
6711
+ this.typedValue = newValueAsString;
6706
6712
  }
6707
6713
  else {
6708
- const momentValue = stringToMoment(newValue);
6709
- this.inputField.value = newValue;
6710
- this.selectedMonthYear = setupMonthYear(momentValue === null || momentValue === void 0 ? void 0 : momentValue.toDate(), this.monthStrings);
6714
+ const momentValue = isMoment
6715
+ ? newValue
6716
+ : stringToMoment(newValue);
6717
+ const newValueAsDate = momentValue === null || momentValue === void 0 ? void 0 : momentValue.toDate();
6718
+ this.inputField.value = formatDateShort(newValueAsDate);
6719
+ this.selectedMonthYear = setupMonthYear(newValueAsDate, this.monthStrings);
6711
6720
  this.dateList = this.buildDateList(this.selectedMonthYear);
6712
6721
  this.validateDate();
6713
6722
  }
package/dist/esm/q2-input.entry.js CHANGED
@@ -1731,6 +1731,14 @@ const phoneNumberFormats = {
1731
1731
  prefix: '+592 '
1732
1732
  },
1733
1733
  HK: {
1734
+ mask: '####-####',
1735
+ prefix: '+852 '
1736
+ },
1737
+ HN: {
1738
+ mask: '########',
1739
+ prefix: '+504 '
1740
+ },
1741
+ HT: {
1734
1742
  mask: '####-####',
1735
1743
  prefix: '+509 '
1736
1744
  },
@@ -2855,7 +2863,7 @@ const formatCreditCard = {
2855
2863
  unknownFormatter
2856
2864
  };
2857
2865
 
2858
- const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{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}.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}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}: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))}:host([hidden]){display:none}.field-container,.input-container{position:relative}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(\n --tct-input-label-margin-bottom,\n var(--tct-scale-1, var(--app-scale-1, 5px))\n );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)))}.optional-tag{margin-left:var(\n --tct-input-label-optional-margin-left,\n var(--tct-scale-1, var(--app-scale-1, 5px))\n );color:var(\n --tct-input-label-optional-font-color,\n var(--tct-a11y-color, var(--t-a11y-gray-color, #767676))\n );font-size:var(--tct-input-label-optional-font-size, 12px);font-weight:var(--tct-input-label-optional-font-weight, 400)}.input-container{display:flex;align-items:center;--comp-input-border-top-left-radius:var(\n --tct-input-border-top-left-radius,\n var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n );--comp-input-border-top-right-radius:var(\n --tct-input-border-top-right-radius,\n var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n );--comp-input-border-bottom-right-radius:var(\n --tct-input-border-bottom-right-radius,\n var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n );--comp-input-border-bottom-left-radius:var(\n --tct-input-border-bottom-left-radius,\n var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n );--comp-input-border-radius:var(--comp-input-border-top-left-radius)\n var(--comp-input-border-top-right-radius) var(--comp-input-border-bottom-right-radius)\n var(--comp-input-border-bottom-left-radius);--comp-input-border-width:var(--tct-input-border-top-width, 1px)\n var(--tct-input-border-right-width, 1px) var(--tct-input-border-bottom-width, 1px)\n var(--tct-input-border-left-width, 1px);--comp-input-focus-border-width:var(--tct-input-focus-border-top-width, 1px)\n var(--tct-input-focus-border-right-width, 1px)\n var(--tct-input-focus-border-bottom-width, 1px)\n var(--tct-input-focus-border-left-width, 1px);--comp-input-prefix-clearance:calc(\n 3 * var(--tct-input-prefix-font-size, 14px) + var(--tct-scale-1, 5px)\n );--comp-input-icon-clearance:34px;--comp-input-min-height:44px;border-width:var(--comp-input-border-width);border-style:solid;border-color:var(\n --tct-input-border-color,\n var(--t-input-border, var(--tct-gray-11, var(--t-gray-11, #cccccc)))\n );border-radius:var(--comp-input-border-radius);box-shadow:var(--tct-input-box-shadow, none);transition:border-width\n var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))),\n border-color var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))),\n box-shadow var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)))}.input-field{flex:1;border:0;-webkit-appearance:none;appearance:none;box-sizing:border-box;min-height:var(--comp-input-min-height);height:var(--tct-input-height, 44px);width:100%;padding:0 var(--tct-input-horizontal-padding, var(--tct-scale-2, var(--app-scale-2, 10px)));background-color:var(\n --tct-input-bg,\n var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, #f2f2f2)))\n );color:var(--tct-input-font-color, var(--t-input-font-color, var(--t-text, inherit)))}input{display:inline-block}.input-field:focus{outline:none;box-shadow:none}.input-field::-webkit-outer-spin-button,.input-field::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.input-field[type='number']{-moz-appearance:textfield}.input-container:focus-within{border-width:var(--comp-input-focus-border-width, 1px);border-color:var(\n --tct-input-focus-border-color,\n var(--t-input-focus, var(--tct-gray-9, var(--t-gray-9, #999999)))\n );box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff)),\n var(--tct-input-focus-box-shadow, 0 0 transparent)}input::-ms-clear{display:none}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::placeholder,.placeholder-text{color:var(\n --tct-input-placeholder-font-color,\n var(\n --t-input-placeholder-font-color,\n var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666))))\n )\n )}.pseudo-input{display:inline-flex;align-items:center}.pseudo-input span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.input-icons-container-left{display:flex;flex-direction:row;align-items:center}.input-icons-container-left q2-icon{position:absolute}.input-icons-container-right{display:flex;gap:var(--tct-scale-2, var(--app-scale-2, 10px));flex-direction:row;padding-left:3px;align-items:center;margin-right:var(--tct-scale-2, var(--app-scale-2, 10px))}.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);pointer-events:none;color:var(\n --tct-input-icon-stroke-primary,\n var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999)))\n );--tct-icon-stroke-primary:var(\n --tct-input-icon-stroke-primary,\n var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))\n );--t-icon-stroke-primary:var(\n --tct-input-icon-stroke-primary,\n var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))\n )}.icon-left{left:var(--tct-scale-1, var(--app-scale-1, 5px))}.icon-left-muted{opacity:0.5}.input-prefix,.input-suffix{display:inline-flex;align-items:center;justify-content:center;min-height:calc(\n var(--comp-input-min-height) - var(--tct-input-focus-border-top-width, 1px) -\n var(--tct-input-focus-border-bottom-width, 1px)\n );height:calc(\n var(--tct-input-height, 44px) - var(--tct-input-focus-border-top-width, 1px) -\n var(--tct-input-focus-border-bottom-width, 1px)\n );width:3em;bottom:var(--tct-input-border-bottom-width, 1px);font-size:var(--tct-input-prefix-font-size, inherit);color:var(--tct-input-prefix-font-color, inherit);background-color:var(\n --tct-input-prefix-bg,\n var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, #f2f2f2))))\n );transition:color var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))),\n background-color var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)))}.input-prefix{left:var(--tct-input-border-left-width, 1px);border-right:1px solid\n var(\n --tct-input-prefix-border-color,\n var(\n --tct-input-border-color,\n var(\n --t-input-border,\n var(\n --tct-gray-11,\n var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))\n )\n )\n )\n );border-top-left-radius:calc(\n var(--comp-input-border-top-left-radius) - var(--tct-input-border-top-width, 1px) -\n var(--tct-input-border-left-width, 1px)\n );border-bottom-left-radius:calc(\n var(--comp-input-border-bottom-left-radius) - var(--tct-input-border-bottom-width, 1px) -\n var(--tct-input-border-left-width, 1px)\n );pointer-events:none;}.input-suffix{right:var(--tct-input-border-right-width, 1px);border-left:1px solid\n var(\n --tct-input-prefix-border-color,\n var(\n --tct-input-border-color,\n var(\n --t-input-border,\n var(\n --tct-gray-11,\n var(--t-gray-11, var(--tct-gray-l1, var(--app-grayl1, #cccccc)))\n )\n )\n )\n );border-top-right-radius:calc(\n var(--comp-input-border-top-right-radius) - var(--tct-input-border-top-width, 1px) -\n var(--tct-input-border-right-width, 1px)\n );border-bottom-right-radius:calc(\n var(--comp-input-border-bottom-right-radius) - var(--tct-input-border-bottom-width, 1px) -\n var(--tct-input-border-right-width, 1px)\n )}.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{position:absolute;margin-right:var(--tct-scale-2, var(--app-scale-2, 20px))}.btn-clear{margin-top:calc(var(--tct-input-border-top-width, 1px) / 2);margin-bottom:calc(var(--tct-input-border-bottom-width, 1px) / 2);height:22px;--tct-btn-icon-width:17px;--tct-btn-icon-height:22px;--tct-icon-size:17px}.messages-container{height:0px;overflow:hidden;background-color:var(\n --tct-message-bg,\n var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))\n );box-shadow:var(\n --tct-input-message-box-shadow,\n var(--tct-box-shadow-1, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3)))\n );transition:height\n var(--tct-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(\n --tct-input-disabled-opacity,\n var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))\n )}.input-field[disabled]{cursor:not-allowed}.has-focus .input-prefix{border-top-left-radius:calc(\n var(--comp-input-border-top-left-radius) - var(--tct-input-focus-border-top-width, 1px) -\n var(--tct-input-focus-border-left-width, 1px)\n );border-bottom-left-radius:calc(\n var(--comp-input-border-bottom-left-radius) -\n var(--tct-input-focus-border-bottom-width, 1px) -\n var(--tct-input-focus-border-left-width, 1px)\n )}.has-focus .input-suffix{border-top-left-radius:calc(\n var(--comp-input-border-top-left-radius) - var(--tct-input-focus-border-top-width, 1px) -\n var(--tct-input-focus-border-left-width, 1px)\n );border-bottom-left-radius:calc(\n var(--comp-input-border-bottom-left-radius) -\n var(--tct-input-focus-border-bottom-width, 1px) -\n var(--tct-input-focus-border-left-width, 1px)\n )}.right-aligned .input-field{text-align:right}.right-aligned .icon-error{left:var(--tct-scale-2, var(--app-scale-2, 10px));right:auto}.has-error label{color:var(--tct-input-error-label-font-color, var(--tct-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(\n --tct-input-error-prefix-bg,\n var(\n --tct-input-bg,\n var(\n --t-input-bg,\n var(--tct-gray-14, var(--app-var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))\n )\n )\n )}.has-error .input-container:not(:focus-within){border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000))}.has-error.has-icon-right.left-aligned .btn-clear{right:calc(2 * var(--comp-input-icon-clearance))}.has-error.has-clear.has-icon-right.left-aligned .input-field{padding-right:calc(3 * var(--comp-input-icon-clearance))}.has-error.right-aligned .input-field{padding-left:var(--comp-input-icon-clearance)}.has-error.right-aligned.has-prefix .input-field{padding-left:calc(var(--comp-input-prefix-clearance) + var(--comp-input-icon-clearance))}.has-error.right-aligned.has-icon-left .input-field{padding-left:calc(2 * var(--comp-input-icon-clearance))}.has-error.right-aligned .icon-left{left:var(--comp-input-icon-clearance)}.has-prefix .input-field{padding-left:var(--comp-input-prefix-clearance)}.has-prefix.right-aligned .icon-error{left:var(--comp-input-prefix-clearance);margin-left:var(--tct-scale-1, 5px)}.has-suffix .icon-error,.has-suffix .btn-clear{right:var(--comp-input-prefix-clearance)}.has-suffix.has-error .btn-clear{right:calc(var(--comp-input-prefix-clearance) + var(--comp-input-icon-clearance))}.has-icon-left .input-field{padding-left:var(--comp-input-icon-clearance)}.has-icon-left.has-icon-separator .input-field{padding-left:calc(var(--comp-input-icon-clearance) + 14px)}.has-icon-left.has-icon-separator .icon-left{width:26px;height:26px;left:8px}.has-icon-left.has-icon-separator .input-container .vertical-separator{position:absolute;left:var(--tct-input-border-left-width, 1px);height:calc(var(--comp-input-min-height) - 2px);width:3em;border-right:1px solid\n var(\n --tct-input-prefix-border-color,\n var(\n --tct-input-border-color,\n var(\n --t-input-border,\n var(\n --tct-gray-11,\n var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))\n )\n )\n )\n )}";
2866
+ const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{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}.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}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}: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))}:host([hidden]){display:none}.field-container,.input-container{position:relative}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(\n --tct-input-label-margin-bottom,\n var(--tct-scale-1, var(--app-scale-1, 5px))\n );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)))}.optional-tag{margin-left:var(\n --tct-input-label-optional-margin-left,\n var(--tct-scale-1, var(--app-scale-1, 5px))\n );color:var(\n --tct-input-label-optional-font-color,\n var(--tct-a11y-color, var(--t-a11y-gray-color, #767676))\n );font-size:var(--tct-input-label-optional-font-size, 12px);font-weight:var(--tct-input-label-optional-font-weight, 400)}.input-container{display:flex;align-items:center;--comp-input-horizontal-gap:var(\n --tct-input-horizontal-gap,\n var(--t-input-horizontal-gap, 8px)\n );--comp-input-border-top-left-radius:var(\n --tct-input-border-top-left-radius,\n var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n );--comp-input-border-top-right-radius:var(\n --tct-input-border-top-right-radius,\n var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n );--comp-input-border-bottom-right-radius:var(\n --tct-input-border-bottom-right-radius,\n var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n );--comp-input-border-bottom-left-radius:var(\n --tct-input-border-bottom-left-radius,\n var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n );--comp-input-border-radius:var(--comp-input-border-top-left-radius)\n var(--comp-input-border-top-right-radius) var(--comp-input-border-bottom-right-radius)\n var(--comp-input-border-bottom-left-radius);--comp-input-border-width:var(--tct-input-border-top-width, 1px)\n var(--tct-input-border-right-width, 1px) var(--tct-input-border-bottom-width, 1px)\n var(--tct-input-border-left-width, 1px);--comp-input-focus-border-width:var(--tct-input-focus-border-top-width, 1px)\n var(--tct-input-focus-border-right-width, 1px)\n var(--tct-input-focus-border-bottom-width, 1px)\n var(--tct-input-focus-border-left-width, 1px);--comp-input-prefix-clearance:calc(\n 3 * var(--tct-input-prefix-font-size, 14px) + var(--tct-scale-1, 5px)\n );--comp-input-icon-clearance:34px;--comp-input-min-height:44px;border-width:var(--comp-input-border-width);border-style:solid;border-color:var(\n --tct-input-border-color,\n var(--t-input-border, var(--tct-gray-11, var(--t-gray-11, #cccccc)))\n );border-radius:var(--comp-input-border-radius);box-shadow:var(--tct-input-box-shadow, none);transition:border-width\n var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))),\n border-color var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))),\n box-shadow var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)))}.input-field{flex:1;border:0;-webkit-appearance:none;appearance:none;box-sizing:border-box;min-height:var(--comp-input-min-height);height:var(--tct-input-height, 44px);width:100%;padding:0 var(--tct-input-horizontal-padding, var(--tct-scale-2, var(--app-scale-2, 10px)));background-color:var(\n --tct-input-bg,\n var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, #f2f2f2)))\n );color:var(--tct-input-font-color, var(--t-input-font-color, var(--t-text, inherit)))}input{display:inline-block}.input-field:focus{outline:none;box-shadow:none}.input-field::-webkit-outer-spin-button,.input-field::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.input-field[type='number']{-moz-appearance:textfield}.input-container:focus-within{border-width:var(--comp-input-focus-border-width, 1px);border-color:var(\n --tct-input-focus-border-color,\n var(--t-input-focus, var(--tct-gray-9, var(--t-gray-9, #999999)))\n );box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff)),\n var(--tct-input-focus-box-shadow, 0 0 transparent)}input::-ms-clear{display:none}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::placeholder,.placeholder-text{color:var(\n --tct-input-placeholder-font-color,\n var(\n --t-input-placeholder-font-color,\n var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666))))\n )\n )}.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{display:flex;flex-direction:row;align-items:center;gap:var(--comp-input-horizontal-gap);padding-left:var(--comp-input-horizontal-gap)}.input-icons-container-right:empty{display:none}.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);pointer-events:none;color:var(\n --tct-input-icon-stroke-primary,\n var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999)))\n );--tct-icon-stroke-primary:var(\n --tct-input-icon-stroke-primary,\n var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))\n );--t-icon-stroke-primary:var(\n --tct-input-icon-stroke-primary,\n var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))\n )}.icon-left-muted{opacity:0.5}.input-prefix,.input-suffix{margin-left:calc(var(--comp-input-horizontal-gap) * -1);margin-right:calc(var(--comp-input-horizontal-gap) * -1);width:3em;display:inline-flex;align-items:center;justify-content:center;min-height:calc(\n var(--comp-input-min-height) - var(--tct-input-focus-border-top-width, 1px) -\n var(--tct-input-focus-border-bottom-width, 1px)\n );height:calc(\n var(--tct-input-height, 44px) - var(--tct-input-focus-border-top-width, 1px) -\n var(--tct-input-focus-border-bottom-width, 1px)\n );font-size:var(--tct-input-prefix-font-size, inherit);color:var(--tct-input-prefix-font-color, inherit);background-color:var(\n --tct-input-prefix-bg,\n var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, #f2f2f2))))\n );transition:color var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))),\n background-color var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)))}.input-prefix{border-top-left-radius:calc(\n var(--comp-input-border-top-left-radius) - var(--tct-input-border-top-width, 1px) -\n var(--tct-input-border-left-width, 1px)\n );border-bottom-left-radius:calc(\n var(--comp-input-border-bottom-left-radius) - var(--tct-input-border-bottom-width, 1px) -\n var(--tct-input-border-left-width, 1px)\n );pointer-events:none;}.input-suffix{border-top-right-radius:calc(\n var(--comp-input-border-top-right-radius) - var(--tct-input-border-top-width, 1px) -\n var(--tct-input-border-right-width, 1px)\n );border-bottom-right-radius:calc(\n var(--comp-input-border-bottom-right-radius) - var(--tct-input-border-bottom-width, 1px) -\n var(--tct-input-border-right-width, 1px)\n )}.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{position:absolute;margin-right:var(--tct-scale-2, var(--app-scale-2, 20px))}.btn-clear{margin-top:calc(var(--tct-input-border-top-width, 1px) / 2);margin-bottom:calc(var(--tct-input-border-bottom-width, 1px) / 2);height:22px;--tct-btn-icon-width:17px;--tct-btn-icon-height:22px;--tct-icon-size:17px}.messages-container{height:0px;overflow:hidden;background-color:var(\n --tct-message-bg,\n var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))\n );box-shadow:var(\n --tct-input-message-box-shadow,\n var(--tct-box-shadow-1, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3)))\n );transition:height\n var(--tct-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(\n --tct-input-disabled-opacity,\n var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))\n )}.input-field[disabled]{cursor:not-allowed}.right-aligned .input-field{text-align:right}.has-error label{color:var(--tct-input-error-label-font-color, var(--tct-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(\n --tct-input-error-prefix-bg,\n var(\n --tct-input-bg,\n var(\n --t-input-bg,\n var(--tct-gray-14, var(--app-var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))\n )\n )\n )}.has-error .input-container:not(:focus-within){border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000))}.icon-left{width:26px;height:26px}.vertical-separator{height:calc(var(--comp-input-min-height) - 2px);border-right:1px solid\n var(\n --tct-input-prefix-border-color,\n var(\n --tct-input-border-color,\n var(\n --t-input-border,\n var(\n --tct-gray-11,\n var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))\n )\n )\n )\n )}";
2859
2867
 
2860
2868
  const Q2Input = class {
2861
2869
  constructor(hostRef) {
@@ -3052,7 +3060,7 @@ const Q2Input = class {
3052
3060
  return this.iconLeft;
3053
3061
  }
3054
3062
  get showIconSeperator() {
3055
- return this.type === 'credit-card';
3063
+ return this.type === 'credit-card' || !!this.formattedValueObject.prefix;
3056
3064
  }
3057
3065
  get computedClassForIconLeft() {
3058
3066
  let className = 'icon-left';