q2-tecton-elements 1.28.3 → 1.29.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 (109) hide show
  1. package/dist/cjs/click-elsewhere_2.cjs.entry.js +4 -3
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/q2-action-sheet.cjs.entry.js +10 -5
  4. package/dist/cjs/q2-badge.cjs.entry.js +43 -0
  5. package/dist/cjs/q2-btn_2.cjs.entry.js +1 -1
  6. package/dist/cjs/q2-calendar.cjs.entry.js +5 -0
  7. package/dist/cjs/q2-checkbox.cjs.entry.js +16 -7
  8. package/dist/cjs/q2-data-table.cjs.entry.js +287 -0
  9. package/dist/cjs/{q2-badge_2.cjs.entry.js → q2-input.cjs.entry.js} +1 -38
  10. package/dist/cjs/q2-section.cjs.entry.js +1 -1
  11. package/dist/cjs/q2-tecton-elements.cjs.js +1 -1
  12. package/dist/collection/collection-manifest.json +1 -0
  13. package/dist/collection/components/q2-action-sheet/index.js +26 -4
  14. package/dist/collection/components/q2-action-sheet/styles.css +2 -2
  15. package/dist/collection/components/q2-btn/styles.css +4 -0
  16. package/dist/collection/components/q2-calendar/index.js +5 -0
  17. package/dist/collection/components/q2-checkbox/index.js +15 -6
  18. package/dist/collection/components/q2-checkbox/styles.css +5 -0
  19. package/dist/collection/components/q2-data-table/index.js +539 -0
  20. package/dist/collection/components/q2-data-table/styles.css +192 -0
  21. package/dist/collection/components/q2-input/styles.css +1 -1
  22. package/dist/collection/components/q2-popover/index.js +4 -3
  23. package/dist/collection/components/q2-section/styles.css +17 -1
  24. package/dist/components/index.d.ts +1 -0
  25. package/dist/components/index.js +1 -0
  26. package/dist/components/index10.js +72 -55
  27. package/dist/components/index11.js +56 -44
  28. package/dist/components/index12.js +42 -42
  29. package/dist/components/index13.js +40 -538
  30. package/dist/components/index14.js +518 -136
  31. package/dist/components/index15.js +174 -574
  32. package/dist/components/index16.js +589 -0
  33. package/dist/components/index3.js +1 -1
  34. package/dist/components/index5.js +3 -3
  35. package/dist/components/index6.js +93 -94
  36. package/dist/components/index7.js +112 -2927
  37. package/dist/components/index8.js +2919 -3347
  38. package/dist/components/index9.js +3343 -56
  39. package/dist/components/q2-action-sheet.js +18 -12
  40. package/dist/components/q2-calendar.js +11 -6
  41. package/dist/components/q2-card.js +2 -2
  42. package/dist/components/q2-carousel-pane.js +1 -1
  43. package/dist/components/q2-carousel.js +3 -3
  44. package/dist/components/q2-chart-area.js +1 -1
  45. package/dist/components/q2-chart-bar.js +1 -1
  46. package/dist/components/q2-chart-donut.js +2 -2
  47. package/dist/components/q2-checkbox-group.js +2 -2
  48. package/dist/components/q2-checkbox.js +1 -133
  49. package/dist/components/q2-data-table.d.ts +11 -0
  50. package/dist/components/q2-data-table.js +349 -0
  51. package/dist/components/q2-dropdown-item.js +1 -1
  52. package/dist/components/q2-dropdown.js +5 -5
  53. package/dist/components/q2-editable-field.js +4 -4
  54. package/dist/components/q2-icon.js +1 -1
  55. package/dist/components/q2-input.js +1 -1
  56. package/dist/components/q2-loading.js +1 -1
  57. package/dist/components/q2-loc.js +1 -1
  58. package/dist/components/q2-message.js +1 -1
  59. package/dist/components/q2-month-picker.js +3 -3
  60. package/dist/components/q2-optgroup.js +1 -1
  61. package/dist/components/q2-option-list.js +1 -1
  62. package/dist/components/q2-option.js +1 -1
  63. package/dist/components/q2-pagination.js +4 -4
  64. package/dist/components/q2-pill.js +4 -4
  65. package/dist/components/q2-popover.js +1 -1
  66. package/dist/components/q2-radio-group.js +2 -2
  67. package/dist/components/q2-radio.js +1 -1
  68. package/dist/components/q2-section.js +4 -4
  69. package/dist/components/q2-select.js +6 -6
  70. package/dist/components/q2-stepper-pane.js +1 -1
  71. package/dist/components/q2-stepper-vertical.js +2 -2
  72. package/dist/components/q2-stepper.js +3 -3
  73. package/dist/components/q2-tab-container.js +3 -3
  74. package/dist/components/q2-tag.js +4 -4
  75. package/dist/components/q2-textarea.js +2 -2
  76. package/dist/components/q2-tooltip.js +1 -1
  77. package/dist/docs.json +280 -3
  78. package/dist/esm/click-elsewhere_2.entry.js +4 -3
  79. package/dist/esm/loader.js +1 -1
  80. package/dist/esm/q2-action-sheet.entry.js +10 -5
  81. package/dist/esm/q2-badge.entry.js +39 -0
  82. package/dist/esm/q2-btn_2.entry.js +1 -1
  83. package/dist/esm/q2-calendar.entry.js +5 -0
  84. package/dist/esm/q2-checkbox.entry.js +16 -7
  85. package/dist/esm/q2-data-table.entry.js +283 -0
  86. package/dist/esm/{q2-badge_2.entry.js → q2-input.entry.js} +3 -39
  87. package/dist/esm/q2-section.entry.js +1 -1
  88. package/dist/esm/q2-tecton-elements.js +1 -1
  89. package/dist/q2-tecton-elements/p-00b2c345.entry.js +1 -0
  90. package/dist/q2-tecton-elements/p-0112df78.entry.js +1 -0
  91. package/dist/q2-tecton-elements/p-08286237.entry.js +1 -0
  92. package/dist/q2-tecton-elements/p-18df4e0d.entry.js +1 -0
  93. package/dist/q2-tecton-elements/{p-6975e5e4.entry.js → p-38885cc4.entry.js} +1 -1
  94. package/dist/q2-tecton-elements/p-42d03011.entry.js +1 -0
  95. package/dist/q2-tecton-elements/p-47aefcc2.entry.js +1 -0
  96. package/dist/q2-tecton-elements/p-9a327827.entry.js +1 -0
  97. package/dist/q2-tecton-elements/{p-807e2e44.entry.js → p-ccc497d5.entry.js} +1 -1
  98. package/dist/q2-tecton-elements/q2-tecton-elements.esm.js +1 -1
  99. package/dist/types/components/q2-action-sheet/index.d.ts +1 -0
  100. package/dist/types/components/q2-checkbox/index.d.ts +4 -0
  101. package/dist/types/components/q2-data-table/index.d.ts +94 -0
  102. package/dist/types/components.d.ts +47 -0
  103. package/package.json +3 -3
  104. package/dist/q2-tecton-elements/p-0b7003c4.entry.js +0 -1
  105. package/dist/q2-tecton-elements/p-1b9e07b4.entry.js +0 -1
  106. package/dist/q2-tecton-elements/p-3bf06809.entry.js +0 -1
  107. package/dist/q2-tecton-elements/p-92e746c8.entry.js +0 -1
  108. package/dist/q2-tecton-elements/p-d6824ce5.entry.js +0 -1
  109. /package/dist/types/workspace/workspace/{tecton-production_release_1.28.x → tecton-production_release_1.29.x}/packages/q2-tecton-elements/.stencil/test/helpers.d.ts +0 -0
@@ -1,14 +1,14 @@
1
1
  import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
2
- import { l as loc, w as waitForNextPaint } from './index15.js';
2
+ import { l as loc, w as waitForNextPaint } from './index16.js';
3
3
  import { d as defineCustomElement$8 } from './index5.js';
4
- import { d as defineCustomElement$7 } from './index7.js';
5
- import { d as defineCustomElement$6 } from './index9.js';
6
- import { d as defineCustomElement$5 } from './index10.js';
7
- import { d as defineCustomElement$4 } from './index11.js';
8
- import { d as defineCustomElement$3 } from './index12.js';
9
- import { d as defineCustomElement$2 } from './index13.js';
4
+ import { d as defineCustomElement$7 } from './index8.js';
5
+ import { d as defineCustomElement$6 } from './index10.js';
6
+ import { d as defineCustomElement$5 } from './index11.js';
7
+ import { d as defineCustomElement$4 } from './index12.js';
8
+ import { d as defineCustomElement$3 } from './index13.js';
9
+ import { d as defineCustomElement$2 } from './index14.js';
10
10
 
11
- const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch: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}@keyframes showBackdrop{from{opacity:0}}@keyframes hideBackdrop{to{opacity:0}}dialog{--comp-border-radius-default:var(--app-scale-3x, 15px) var(--app-scale-3x, 15px) 0 0;--comp-border-radius:var(--tct-action-sheet-border-radius, var(--t-action-sheet-border-radius, var(--comp-border-radius-default)));--comp-desktop-border-radius:var(--tct-action-sheet-border-radius, var(--t-action-sheet-border-radius, var(--app-scale-3x, 15px)));--comp-header-size:var(--tct-action-sheet-close-size, var(--t-action-sheet-close-size, var(--t-a11y-min-size, 44px)));--comp-dialog-background:var(--tct-action-sheet-background, var(--t-action-sheet-background, var(--t-base, #ffffff)));--comp-dialog-color:var(--tct-action-sheet-color, var(--t-action-sheet-color, var(--t-text, #4d4d4d)));--comp-dialog-padding:var(--tct-action-sheet-padding, var(--t-action-sheet-padding, var(--app-scale-3x, 15px)));--comp-content-gradient-height:var(--tct-action-sheet-content-gradient-height, var(--t-action-sheet-content-gradient-height, var(--app-scale-2x, 10px)));--comp-dialog-interior-gap-default:var(--app-scale-2x, 10px);--comp-dialog-max-width:var(--tct-action-sheet-max-width, var(--t-action-sheet-max-width, 400px));--comp-dialog-max-height:var(--tct-action-sheet-max-height, var(--t-action-sheet-max-height, 75vh));--comp-dialog-min-height:var(--tct-action-sheet-min-height, var(--t-action-sheet-min-height, 20vh));--comp-dialog-box-shadow:var(--tct-action-sheet-box-shadow, var(--t-action-sheet-box-shadow, var(--app-shadow-2, 0 3px 6px rgba(0, 0, 0, 0.3))));position:fixed;top:100%;bottom:unset;color:var(--comp-dialog-color);background:var(--comp-dialog-background);transition:transform var(--tct-action-sheet-tween, var(--t-action-sheet-tween, var(--app-tween-2, 0.4s ease))), opacity var(--tct-action-sheet-tween, var(--t-action-sheet-tween, var(--app-tween-2, 0.4s ease)));width:100%;max-width:var(--comp-dialog-max-width);border:0;border-radius:var(--comp-border-radius);box-shadow:var(--comp-dialog-box-shadow);padding:0;height:auto;overflow:hidden;min-height:var(--comp-dialog-min-height);max-height:var(--comp-dialog-max-height)}dialog::backdrop{opacity:0;background:var(--tct-action-sheet-backdrop-background, var(--t-action-sheet-backdrop-background, var(--t-top-a2, rgba(13, 13, 13, 0.6))))}dialog[open].is-opening,dialog[open].is-open{transform:translateY(-100%)}@media screen and (min-width: 1200px){dialog[open].is-opening,dialog[open].is-open{opacity:1;transform:translateY(0)}}dialog[open].is-opening::backdrop,dialog[open].is-open::backdrop{opacity:1;animation:showBackdrop var(--tct-action-sheet-tween, var(--t-action-sheet-tween, var(--app-tween-2, 0.4s ease)))}dialog[open].is-closing{transform:translateY(10%)}dialog[open].is-closing::backdrop{animation:hideBackdrop var(--tct-action-sheet-tween, var(--t-action-sheet-tween, var(--app-tween-2, 0.4s ease)))}@media screen and (min-width: 1200px){dialog{border-radius:var(--comp-desktop-border-radius);top:0px;bottom:0px;height:fit-content;transform:translateY(10%);opacity:0}}.content{overflow-y:auto;--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.content::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.content::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.content::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.interior{display:grid;grid-template-rows:44px 1fr auto;gap:var(--comp-dialog-interior-gap-default);max-height:calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));padding:var(--comp-dialog-padding)}.interior.is-list header,.interior.is-list footer{position:relative}.interior.is-list header:before,.interior.is-list footer:before{content:\"\";display:block;position:absolute;left:0;height:var(--comp-content-gradient-height);width:100%;z-index:1}.interior.is-list header:before{top:calc(100% + var(--comp-dialog-interior-gap-default));background:linear-gradient(to bottom, var(--t-base) 0%, var(--t-base-a0) 100%)}.interior.is-list footer:before{top:calc((var(--comp-dialog-interior-gap-default) + var(--comp-content-gradient-height)) * -1);background:linear-gradient(to top, var(--t-base) 0%, var(--t-base-a0) 100%)}header{display:grid;grid-template-columns:var(--comp-header-size) 1fr var(--comp-header-size);grid-template-areas:\". title close\";gap:var(--app-scale-2x, 10px)}header .title{grid-area:title;text-align:center;line-height:var(--comp-header-size)}header .btn-close{grid-area:close;width:var(--comp-header-size);height:var(--comp-header-size)}footer{display:flex;justify-content:end}";
11
+ const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch: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}@keyframes showBackdrop{from{opacity:0}}@keyframes hideBackdrop{to{opacity:0}}dialog{--comp-border-radius-default:var(--app-scale-3x, 15px) var(--app-scale-3x, 15px) 0 0;--comp-border-radius:var(--tct-action-sheet-border-radius, var(--t-action-sheet-border-radius, var(--comp-border-radius-default)));--comp-desktop-border-radius:var(--tct-action-sheet-border-radius, var(--t-action-sheet-border-radius, var(--app-scale-3x, 15px)));--comp-header-size:var(--tct-action-sheet-close-size, var(--t-action-sheet-close-size, var(--t-a11y-min-size, 44px)));--comp-dialog-background:var(--tct-action-sheet-background, var(--t-action-sheet-background, var(--t-base, #ffffff)));--comp-dialog-color:var(--tct-action-sheet-color, var(--t-action-sheet-color, var(--t-text, #4d4d4d)));--comp-dialog-padding:var(--tct-action-sheet-padding, var(--t-action-sheet-padding, var(--app-scale-3x, 15px)));--comp-content-gradient-height:var(--tct-action-sheet-content-gradient-height, var(--t-action-sheet-content-gradient-height, var(--app-scale-2x, 10px)));--comp-dialog-interior-gap-default:var(--app-scale-2x, 10px);--comp-dialog-max-width:var(--tct-action-sheet-max-width, var(--t-action-sheet-max-width, 400px));--comp-dialog-max-height:var(--tct-action-sheet-max-height, var(--t-action-sheet-max-height, var(--comp-action-sheet-computed-max-height, 75vh)));--comp-dialog-min-height:var(--tct-action-sheet-min-height, var(--t-action-sheet-min-height, var(--comp-action-sheet-computed-min-height, 20vh)));--comp-dialog-box-shadow:var(--tct-action-sheet-box-shadow, var(--t-action-sheet-box-shadow, var(--app-shadow-2, 0 3px 6px rgba(0, 0, 0, 0.3))));position:fixed;top:100%;bottom:unset;color:var(--comp-dialog-color);background:var(--comp-dialog-background);transition:transform var(--tct-action-sheet-tween, var(--t-action-sheet-tween, var(--app-tween-2, 0.4s ease))), opacity var(--tct-action-sheet-tween, var(--t-action-sheet-tween, var(--app-tween-2, 0.4s ease)));width:100%;max-width:var(--comp-dialog-max-width);border:0;border-radius:var(--comp-border-radius);box-shadow:var(--comp-dialog-box-shadow);padding:0;height:auto;overflow:hidden;min-height:var(--comp-dialog-min-height);max-height:var(--comp-dialog-max-height)}dialog::backdrop{opacity:0;background:var(--tct-action-sheet-backdrop-background, var(--t-action-sheet-backdrop-background, var(--t-top-a2, rgba(13, 13, 13, 0.6))))}dialog[open].is-opening,dialog[open].is-open{transform:translateY(-100%)}@media screen and (min-width: 1200px){dialog[open].is-opening,dialog[open].is-open{opacity:1;transform:translateY(0)}}dialog[open].is-opening::backdrop,dialog[open].is-open::backdrop{opacity:1;animation:showBackdrop var(--tct-action-sheet-tween, var(--t-action-sheet-tween, var(--app-tween-2, 0.4s ease)))}dialog[open].is-closing{transform:translateY(10%)}dialog[open].is-closing::backdrop{animation:hideBackdrop var(--tct-action-sheet-tween, var(--t-action-sheet-tween, var(--app-tween-2, 0.4s ease)))}@media screen and (min-width: 1200px){dialog{border-radius:var(--comp-desktop-border-radius);top:0px;bottom:0px;height:fit-content;transform:translateY(10%);opacity:0}}.content{overflow-y:auto;--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.content::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.content::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.content::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.interior{display:grid;grid-template-rows:44px 1fr auto;gap:var(--comp-dialog-interior-gap-default);max-height:calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));padding:var(--comp-dialog-padding)}.interior.is-list header,.interior.is-list footer{position:relative}.interior.is-list header:before,.interior.is-list footer:before{content:\"\";display:block;position:absolute;left:0;height:var(--comp-content-gradient-height);width:100%;z-index:1}.interior.is-list header:before{top:calc(100% + var(--comp-dialog-interior-gap-default));background:linear-gradient(to bottom, var(--t-base) 0%, var(--t-base-a0) 100%)}.interior.is-list footer:before{top:calc((var(--comp-dialog-interior-gap-default) + var(--comp-content-gradient-height)) * -1);background:linear-gradient(to top, var(--t-base) 0%, var(--t-base-a0) 100%)}header{display:grid;grid-template-columns:var(--comp-header-size) 1fr var(--comp-header-size);grid-template-areas:\". title close\";gap:var(--app-scale-2x, 10px)}header .title{grid-area:title;text-align:center;line-height:var(--comp-header-size)}header .btn-close{grid-area:close;width:var(--comp-header-size);height:var(--comp-header-size)}footer{display:flex;justify-content:end}";
12
12
 
13
13
  var __rest = (undefined && undefined.__rest) || function (s, e) {
14
14
  var t = {};
@@ -109,6 +109,7 @@ const Q2ActionSheet$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
109
109
  return (h(Fragment, null, h("div", { class: "content", ref: el => (this.contentElement = el) }, h("q2-option-list", { ref: el => (this.optionListElement = el), multiple: listProps.multiple, noSelect: listProps.noSelect, onChange: this.onListChange, onPopoverState: this.onListPopoverStateChange, selectedOptions: listProps.selectedOptions }, h("slot", null))), h("footer", null, listProps.multiple && (h("q2-btn", { "test-id": "btnDone", intent: "workflow-primary", onClick: this.onListDone }, loc('tecton.element.actionSheet.done'))))));
110
110
  };
111
111
  this.data = undefined;
112
+ this.title = undefined;
112
113
  this.hideClose = undefined;
113
114
  this.isScrollable = false;
114
115
  this.renderStatus = 'is-closing';
@@ -165,14 +166,16 @@ const Q2ActionSheet$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
165
166
  }
166
167
  updateDialogMinMaxHeight() {
167
168
  const windowHeight = window.innerHeight;
168
- this.dialogElement.style.setProperty('--comp-dialog-min-height', `${Math.floor(windowHeight * this.minHeight)}px`);
169
- this.dialogElement.style.setProperty('--comp-dialog-max-height', `${Math.floor(windowHeight * this.maxHeight)}px`);
169
+ this.dialogElement.style.setProperty('--comp-action-sheet-computed-min-height', `${Math.floor(windowHeight * this.minHeight)}px`);
170
+ this.dialogElement.style.setProperty('--comp-action-sheet-computed-max-height', `${Math.floor(windowHeight * this.maxHeight)}px`);
170
171
  }
171
172
  /// Methods ///
172
173
  async hide(data = { value: '', values: [], type: 'confirm' }) {
173
174
  this.close.emit(data);
174
175
  this.renderStatus = 'is-closing';
175
176
  this.dialogElement.addEventListener('transitionend', () => {
177
+ if (this.renderStatus !== 'is-closing')
178
+ return;
176
179
  this.dialogElement.close();
177
180
  this.renderStatus = null;
178
181
  this.data = undefined;
@@ -191,6 +194,8 @@ const Q2ActionSheet$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
191
194
  this.dialogElement.showModal();
192
195
  this.renderStatus = 'is-opening';
193
196
  this.dialogElement.addEventListener('transitionend', () => {
197
+ if (this.renderStatus !== 'is-opening')
198
+ return;
194
199
  this.renderStatus = 'is-open';
195
200
  this.focusContent();
196
201
  }, { once: true });
@@ -198,7 +203,7 @@ const Q2ActionSheet$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
198
203
  render() {
199
204
  var _a;
200
205
  const { data } = this;
201
- const showHeader = (data === null || data === void 0 ? void 0 : data.title) || !this.hideClose;
206
+ const showHeader = (data === null || data === void 0 ? void 0 : data.title) || this.title || !this.hideClose;
202
207
  const renderStatus = this.renderStatus || '';
203
208
  let RenderContent = null;
204
209
  switch (data === null || data === void 0 ? void 0 : data.appearance) {
@@ -214,12 +219,13 @@ const Q2ActionSheet$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
214
219
  }
215
220
  const appearance = (data === null || data === void 0 ? void 0 : data.appearance) || 'slot';
216
221
  const interiorClasses = `interior is-${appearance}`;
217
- return (h("dialog", { ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { class: interiorClasses }, showHeader && (h("header", null, h("div", { class: "title" }, data === null || data === void 0 ? void 0 : data.title), h("q2-btn", { class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.actionSheet.close", "hide-label": true }, h("q2-icon", { type: "close" })))), ((_a = this.data) === null || _a === void 0 ? void 0 : _a.description) && h("p", null, data.description), RenderContent && h(RenderContent, { data: this.data }))));
222
+ return (h("dialog", { ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { class: interiorClasses }, showHeader && (h("header", null, h("div", { class: "title" }, (data === null || data === void 0 ? void 0 : data.title) || this.title), !this.hideClose && (h("q2-btn", { class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.actionSheet.close", "hide-label": true }, h("q2-icon", { type: "close" }))))), ((_a = this.data) === null || _a === void 0 ? void 0 : _a.description) && h("p", null, data.description), RenderContent && h(RenderContent, { data: this.data }))));
218
223
  }
219
224
  get hostElement() { return this; }
220
225
  static get style() { return stylesCss; }
221
226
  }, [1, "q2-action-sheet", {
222
227
  "data": [1040],
228
+ "title": [1],
223
229
  "hideClose": [4, "hide-close"],
224
230
  "isScrollable": [32],
225
231
  "renderStatus": [32],
@@ -1,13 +1,13 @@
1
1
  import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
2
- import { l as loc, h as handleAriaLabel, o as overrideFocus, i as isMobile, a as isEventFromElement, b as handleRenamedProp, w as waitForNextPaint } from './index15.js';
2
+ import { l as loc, h as handleAriaLabel, o as overrideFocus, i as isMobile, a as isEventFromElement, b as handleRenamedProp, w as waitForNextPaint } from './index16.js';
3
3
  import { d as defineCustomElement$9 } from './index2.js';
4
4
  import { d as defineCustomElement$8 } from './index4.js';
5
5
  import { d as defineCustomElement$7 } from './index5.js';
6
- import { d as defineCustomElement$6 } from './index7.js';
7
- import { d as defineCustomElement$5 } from './index8.js';
8
- import { d as defineCustomElement$4 } from './index9.js';
9
- import { d as defineCustomElement$3 } from './index10.js';
10
- import { d as defineCustomElement$2 } from './index14.js';
6
+ import { d as defineCustomElement$6 } from './index8.js';
7
+ import { d as defineCustomElement$5 } from './index9.js';
8
+ import { d as defineCustomElement$4 } from './index10.js';
9
+ import { d as defineCustomElement$3 } from './index11.js';
10
+ import { d as defineCustomElement$2 } from './index15.js';
11
11
 
12
12
  function toInteger(dirtyNumber) {
13
13
  if (dirtyNumber === null || dirtyNumber === true || dirtyNumber === false) {
@@ -3674,6 +3674,11 @@ const Q2Calendar$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
3674
3674
  const formattedDate = formatDateShort(inputDate);
3675
3675
  this.change.emit({ value: formatDateISO(inputDate) });
3676
3676
  this.typedValue = formattedDate;
3677
+ this.setHints({
3678
+ isValid: true,
3679
+ message: `${loc('tecton.element.calendar.hint.selection')}: ${formatDateLong(inputDate)}`,
3680
+ messageType: 'success',
3681
+ });
3677
3682
  }
3678
3683
  inputField() {
3679
3684
  return (h("q2-input", { ref: el => (this.controlElement = el), class: "calendar-input-field", value: this.formattedValue, label: loc(this.label), hideLabel: this.hideLabel, disabled: !!this.disabled, readonly: !!this.readonly, clearable: this.canClear, placeholder: this.computedPlaceholder, optional: !!this.optional, ariaExpanded: `${!!this.open}`, errors: (this.localizedErrors.length > 0 && this.localizedErrors) ||
@@ -1,7 +1,7 @@
1
1
  import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
2
- import { c as isTouchDevice, o as overrideFocus, a as isEventFromElement } from './index15.js';
2
+ import { c as isTouchDevice, o as overrideFocus, a as isEventFromElement } from './index16.js';
3
3
  import { d as defineCustomElement$3 } from './index3.js';
4
- import { d as defineCustomElement$2 } from './index7.js';
4
+ import { d as defineCustomElement$2 } from './index8.js';
5
5
 
6
6
  const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch: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}.container{position:relative;width:100%;text-align:start;height:100%;display:grid;gap:var(--tct-card-gap, var(--t-card-gap, var(--app-scale-3x, 15px)));margin:0;color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));--comp-avatar-size:var(--tct-card-avatar-size, var(--t-card-avatar-size, 44px));--comp-chevron-size:0;--comp-bar-width:var(--tct-card-bar-width, var(--t-card-bar-width, var(--app-scale-2x, 10px)));--comp-card-padding:var(--tct-card-padding, var(--t-card-padding, var(--app-scale-4x, 20px)))}.container.is-small{--comp-avatar-size:var(--tct-card-avatar-size, var(--t-card-avatar-size, 26px))}.container.has-avatar{grid-template-columns:var(--comp-avatar-size) 1fr;--tct-avatar-width:var(--comp-avatar-size);--tct-avatar-height:var(--comp-avatar-size);--tct-icon-size:var(--comp-avatar-size)}:host([bar][is-static]) .container{padding-left:var(--comp-card-padding)}.container:is(button),.container:is(a){--comp-border-radius:var(--tct-card-border-radius, var(--t-card-border-radius, var(--app-border-radius-1, 3px)));--comp-border-width:var(--tct-card-border-width, var(--t-card-border-width, 0px));cursor:pointer;border:none;background:var(--tct-card-background, var(--t-card-background, var(--t-base, #ffffff)));padding:var(--comp-card-padding);text-decoration:none;border-width:var(--comp-border-width);border-color:var(--tct-card-border-color, var(--t-card-border-color, transparent));border-style:solid;border-radius:var(--comp-border-radius);transition:box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));box-shadow:var(--tct-card-box-shadow, var(--t-card-box-shadow, var(--app-shadow-2, 0 3px 6px rgba(0, 0, 0, 0.3))))}@media (hover: hover){.container:is(button),.container:is(a){--comp-card-hover-box-shadow:var(--tct-card-hover-box-shadow, var(--t-card-hover-box-shadow, var(--app-shadow-3, 0 4px 12px rgba(0, 0, 0, 0.3))))}.container:is(button):hover,.container:is(button):active,.container:is(button):focus,.container:is(a):hover,.container:is(a):active,.container:is(a):focus{color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));box-shadow:var(--const-double-focus-ring)}.container:is(button):hover,.container:is(a):hover{box-shadow:var(--comp-card-hover-box-shadow)}.container:is(button):focus:hover,.container:is(a):focus:hover{box-shadow:var(--const-double-focus-ring), var(--comp-card-hover-box-shadow)}.container:is(button):active,.container:is(a):active{box-shadow:var(--tct-card-active-box-shadow, var(--t-card-active-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))))}}.container:is(button).is-touch,.container:is(a).is-touch{--comp-chevron-size:var(--tct-card-chevron-size, var(--t-card-chevron-size, 26px));grid-template-columns:1fr var(--comp-chevron-size)}.container:is(button).has-avatar.is-touch,.container:is(a).has-avatar.is-touch{grid-template-columns:var(--comp-avatar-size) 1fr var(--comp-chevron-size)}.content{overflow:hidden;display:grid;gap:var(--tct-card-content-gap, var(--t-card-content-gap, var(--app-scale-1x, 5px)));align-content:start}h3,p{margin:0;padding:0;line-height:var(--tct-card-font-height, var(--t-card-font-height, 20px))}h3{font-weight:var(--tct-card-font-weight, var(--t-card-font-weight, 600));font-size:var(--tct-card-font-size, var(--t-card-font-size, 17px));text-overflow:ellipsis;overflow:hidden;white-space:nowrap}p{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.bar{--comp-bar-border-radius:calc(var(--comp-border-radius) - var(--comp-border-width));border-radius:var(--comp-bar-border-radius) 0 0 var(--comp-bar-border-radius);position:absolute;inset:0 auto auto 0;width:var(--comp-bar-width);background:var(--comp-bar-color);height:100%}.touch-indicator{align-self:center;--tct-icon-size:var(--comp-chevron-size)}";
7
7
 
@@ -1,5 +1,5 @@
1
1
  import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
2
- import { l as loc } from './index15.js';
2
+ import { l as loc } from './index16.js';
3
3
 
4
4
  const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch: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}q2-carousel .swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;transition:all 0.2s}q2-carousel-pane.q2-carousel-pane{--comp-carousel-pane-tween:var(--tct-tween-1, var(--app-tween-1, 0.2s ease));--comp-carousel-shadow:var(--app-shadow-2, 0px 2px 8px 0px var(--t-top-a1, rgba(0, 0, 0, 0.25)));cursor:grab}q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) *{cursor:pointer}q2-carousel-pane.q2-carousel-pane:focus{box-shadow:none}q2-carousel-pane.q2-carousel-pane:focus .q2-carousel-pane-main-content{outline:none;box-shadow:var(--const-double-focus-ring)}q2-carousel-pane.q2-carousel-pane button{border:0;background:transparent;transition:all 0.2s;opacity:0.3;cursor:pointer}q2-carousel-pane.q2-carousel-pane button:hover{opacity:0.7}q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content{box-shadow:var(--comp-carousel-shadow);transition:var(--comp-carousel-pane-tween);background-color:var(--tct-carousel-background-color, var(--t-carousel-background-color, var(--tct-white, var(--app-white, #ffffff))));border:var(--tct-carousel-pane-border-width, var(--t-carousel-pane-border-width, 0px)) solid var(--tct-carousel-pane-border-color, var(--t-carousel-pane-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));border-radius:var(--tct-carousel-pane-border-radius, var(--t-carousel-pane-border-radius, 8px));padding:var(--tct-carousel-pane-padding, var(--t-carousel-pane-padding, 0.5rem 0.5rem 0.5rem 0.5rem));height:var(--tct-carousel-pane-height, var(--t-carousel-pane-height, 10em))}q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content:hover{box-shadow:var(--const-double-focus-ring), var(--comp-carousel-shadow)}";
5
5
 
@@ -1,8 +1,8 @@
1
1
  import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
2
- import { d as createGuid, l as loc, h as handleAriaLabel, a as isEventFromElement, o as overrideFocus } from './index15.js';
2
+ import { d as createGuid, l as loc, h as handleAriaLabel, a as isEventFromElement, o as overrideFocus } from './index16.js';
3
3
  import { d as defineCustomElement$4 } from './index5.js';
4
- import { d as defineCustomElement$3 } from './index7.js';
5
- import { d as defineCustomElement$2 } from './index9.js';
4
+ import { d as defineCustomElement$3 } from './index8.js';
5
+ import { d as defineCustomElement$2 } from './index10.js';
6
6
 
7
7
  /**
8
8
  * SSR Window 4.0.2
@@ -1,5 +1,5 @@
1
1
  import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
2
- import { o as overrideFocus, l as loc } from './index15.js';
2
+ import { o as overrideFocus, l as loc } from './index16.js';
3
3
  import { g as getDefaultLabel, c as createSeriesData, a as getDefaultInterpolatedLabel, i as isCoordinateSystemType, b as createGridClipPath, d as createPolarClipPath, e as dataSample, f as install$3, h as install$4, j as getCSSProperty, k as isValidColor, l as formatValue } from './charting.js';
4
4
  import { _ as __extends, c as createSymbol, e as enterEmphasis, l as leaveEmphasis, u as updateProps, s as saveOldStyle, i as initProps, g as getLabelStatesModels, n as normalizeSymbolOffset, Z as ZRImage, a as extend, b as setLabelStyle, t as toggleHoverEmphasis, d as getECData, r as removeElement, f as normalizeSymbolSize, G as Group, h as traverseElements, j as isObject, S as SeriesModel, m as map, k as isDimensionStacked, o as isNumber, p as createFloat32Array, q as cubicRootAt, P as Path, v as PathProxy, w as cubicAt, x as convertToColorString, y as defaults, z as setStatesStylesFromModel, A as queryDataIndex, C as ChartView, B as setStatesFlag, D as isFunction, E as ZRText, F as interpolateRawValues, H as labelInner, I as each, L as LinearGradient, J as SPECIAL_STATES, K as lerp, M as createRenderPlanner, N as cubicSubdivide, O as fromPoints, Q as BoundingRect, R as clonePath, T as Polygon, U as Sector, V as Rect, W as Point, X as Transformable, Y as lerp$1, $ as getAnimationConfig, a0 as isArray, a1 as normalizeToArray, a2 as SERIES_UNIVERSAL_TRANSITION_PROP, a3 as makeInner, a4 as DataDiffer, a5 as filter, a6 as createHashMap, a7 as Displayable, a8 as getOldStyle, a9 as use, aa as install$1, ab as install$2, ac as init } from './installCanvasRenderer.js';
5
5
 
@@ -1,5 +1,5 @@
1
1
  import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
2
- import { o as overrideFocus, l as loc } from './index15.js';
2
+ import { o as overrideFocus, l as loc } from './index16.js';
3
3
  import { c as createSeriesData, m as createClipPath, g as getDefaultLabel, i as isCoordinateSystemType, a as getDefaultInterpolatedLabel, e as dataSample, f as install$3, h as install$4, j as getCSSProperty, k as isValidColor, l as formatValue } from './charting.js';
4
4
  import { _ as __extends, I as each, S as SeriesModel, ad as inheritDefaultOption, P as Path, ae as calculateTextPosition, o as isNumber, a0 as isArray, h as traverseElements, i as initProps, u as updateProps, s as saveOldStyle, H as labelInner, af as removeElementWithFadeOut, G as Group, m as map, d as getECData, C as ChartView, V as Rect, a as extend, g as getLabelStatesModels, b as setLabelStyle, ag as setLabelValueAnimation, t as toggleHoverEmphasis, z as setStatesStylesFromModel, ah as throttle, U as Sector, ai as curry, aj as createProgressiveLayout, ak as layout, a9 as use, aa as install$1, ab as install$2, ac as init } from './installCanvasRenderer.js';
5
5
  import { i as installLabelLayout } from './installLabelLayout.js';
@@ -1,7 +1,7 @@
1
1
  import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
2
- import { o as overrideFocus, l as loc, a as isEventFromElement } from './index15.js';
2
+ import { o as overrideFocus, l as loc, a as isEventFromElement } from './index16.js';
3
3
  import { d as defineCustomElement$3 } from './index2.js';
4
- import { d as defineCustomElement$2 } from './index7.js';
4
+ import { d as defineCustomElement$2 } from './index8.js';
5
5
  import { al as normalizeCssArray, V as Rect, _ as __extends, am as ComponentModel, an as toCamelCase, ao as env, ap as normalizeEvent, x as convertToColorString, aq as isString, a0 as isArray, ar as isDom, I as each$1, as as bind, at as indexOf, au as getPaddingFromTooltipModel, av as transformLocalCoord, j as isObject, aw as throwError, E as ZRText, ax as getTooltipRenderMode, ay as createOrUpdate, az as clear, aA as register, d as getECData, aB as findPointFromSeries, aC as findEventDispatcher, aD as createTooltipMarkup, aE as getValueLabel, aF as trim, aG as getAxisRawValue, aH as normalizeTooltipFormatResult, aI as buildTooltipMarkup, aJ as clone, aK as format, aL as formatTpl, D as isFunction, aM as parsePercent, aN as getLayoutRect, aO as unregister, aP as ComponentView, aQ as Model, aR as preParseFinder, aS as queryReferringComponents, aT as TooltipMarkupStyleCreator, a as extend, a9 as use, aU as install$5, aV as noop, aW as merge, aX as isNameSpecified, a6 as createHashMap, m as map, a5 as filter, o as isNumber, y as defaults, aY as parse, aZ as stringify, b as setLabelStyle, a_ as enableHoverEmphasis, a$ as createTextStyle, b0 as setTooltipConfig, b1 as box, b2 as createOrUpdatePatternFromDecal, c as createSymbol, ai as curry$1, G as Group$2, b3 as getLayoutParams, ad as inheritDefaultOption, b4 as mergeLayoutParam, b5 as createIcon, b6 as retrieve2, u as updateProps, b7 as linearMap, W as Point, b8 as shiftLayoutOnY, b9 as parsePercent$1, i as initProps, s as saveOldStyle, z as setStatesStylesFromModel, t as toggleHoverEmphasis, g as getLabelStatesModels, ba as Polyline, bb as retrieve3, U as Sector, af as removeElementWithFadeOut, C as ChartView, bc as prepareSeriesDataSchema, bd as SeriesData, a3 as makeInner, be as makeSeriesEncodeForNameBased, bf as getPercentSeats, bg as defaultEmphasis, S as SeriesModel, bh as createLegacyDataSelectAction, ab as install$6, aa as install$7, ac as init } from './installCanvasRenderer.js';
6
6
  import { l as limitTurnAngle, a as limitSurfaceAngle, s as setLabelLineStyle, g as getLabelLineStatesModels, i as installLabelLayout } from './installLabelLayout.js';
7
7
 
@@ -1,6 +1,6 @@
1
1
  import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
2
- import { d as createGuid, l as loc } from './index15.js';
3
- import { d as defineCustomElement$2 } from './index7.js';
2
+ import { d as createGuid, l as loc } from './index16.js';
3
+ import { d as defineCustomElement$2 } from './index8.js';
4
4
 
5
5
  const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch: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{margin-top:var(--tct-scale-2, var(--app-scale-2x, 10px))}fieldset{padding:var(--tct-input-error-padding, 0);margin:0;border:0}fieldset.has-error{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000));border-width:1px;border-style:solid;border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 2px));position:relative}fieldset.has-error .error-icon-container{top:8px;right:8px;position:absolute;width:40%;text-align:right;background:linear-gradient(to right, var(--tct-checkbox-group-error-gradient-start, var(--t-base-a0, rgba(255, 255, 255, 0))), var(--tct-checkbox-group-error-gradient-end, var(--t-base, white)))}fieldset.has-error legend+div.error-icon-container.no-label{top:28px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.optional-tag{margin-left:var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px)));color:var(--tct-input-label-optional-font-color, var(--tct-a11y-color, var(--t-a11y-gray-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666)))))));font-size:var(--tct-input-label-optional-font-size, 12px);font-weight:var(--tct-input-label-optional-font-weight, 400)}.flexed{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.flexed.left{justify-content:left}";
6
6
 
@@ -1,136 +1,4 @@
1
- import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
2
- import { d as createGuid, h as handleAriaLabel, o as overrideFocus, a as isEventFromElement, l as loc } from './index15.js';
3
- import { d as defineCustomElement$2 } from './index7.js';
4
-
5
- const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch: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;position:relative;padding:var(--tct-checkbox-vertical-padding, var(--t-checkbox-vertical-padding, var(--tct-scale-2, var(--app-scale-2x, 10px)))) 0}.container{--comp-checkbox-size:var(--tct-checkbox-size, var(--t-checkbox-size, 20px));--comp-checkbox-default-column-gap:var(--app-scale-2x, 10px);--comp-checkbox-default-row-gap:0;--comp-checkbox-default-gap:var(--comp-checkbox-default-row-gap) var(--comp-checkbox-default-column-gap);--comp-checkbox-tween:var(--tct-tween-1, var(--app-tween-1, 0.2s ease));--comp-checkbox-toggle-width:var(--tct-checkbox-toggle-width, var(--t-checkbox-toggle-width, 46px));--comp-checkbox-gap:var(--tct-checkbox-gap, var(--t-checkbox-gap, var(--comp-checkbox-default-gap)));--comp-checkbox-outer-stroke-color:var(--tct-checkbox-outer-stroke-color, var(--t-checkbox-outer-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--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);display:grid;grid-template-areas:\"svg label\" \"svg description\";align-items:center;gap:var(--comp-checkbox-gap);grid-template-columns:var(--comp-control-width) calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap))}:host([type=favorite]) .container{--comp-checkbox-favorite-stroke-color:var(--tct-checkbox-favorite-stroke-color, var(--t-checkbox-favorite-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-favorite-fill-color:var(--tct-checkbox-favorite-fill-color, var(--t-checkbox-favorite-fill-color, #db7d24))}:host([type=toggle]) .container{--comp-control-width:var(--comp-checkbox-toggle-width)}:host([alignment=right]) .container,:host([type=toggle]:not([alignment])) .container{grid-template-areas:\"label svg\" \"description svg\";grid-template-columns:calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)) var(--comp-control-width)}.label-control{align-items:center;display:flex}.label-text{grid-area:label}:host([description]) .label-text{font-weight:var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600))}:host([checked]) .label-text{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))}label{color:var(--tct-checkbox-label-color);cursor:pointer}:host([disabled]:not([disabled=false])),:host([group-disabled]){opacity:var(--tct-checkbox-disabled-opacity, var(--t-checkbox-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}:host([disabled]:not([disabled=false])) label,:host([group-disabled]) label{cursor:not-allowed}.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);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)));stroke:var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color)))}:host(:focus-within) .checkbox-icon{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)))}: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);--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);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);--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}.checkbox-fill{stroke:var(--comp-checkbox-checked-color)}.checked-fill{stroke-width:var(--tct-checkbox-check-stroke-width, var(--t-checkbox-check-stroke-width, 2.5));stroke-linecap:round;stroke-linejoin:round}:host([type=toggle]) .checked-fill{stroke:var(--tct-checkbox-toggle-icon-stroke, var(--t-checkbox-toggle-icon-stroke, var(--tct-white, var(--app-white, #ffffff))));transition:opacity var(--comp-checkbox-tween)}:host([type=toggle][checked]) .checked-fill{stroke:var(--tct-checkbox-toggle-checked-icon-stroke, var(--t-checkbox-toggle-checked-icon-stroke, var(--t-checkbox-text, var(--tct-white, var(--app-white, #ffffff)))))}.indeterminate-fill{stroke-width:var(--tct-checkbox-indeterminate-stroke-width, var(--t-checkbox-indeterminate-stroke-width, 3.5))}.toggle-svg{height:30px;width:var(--comp-checkbox-toggle-width);position:relative;text-align:initial}.toggle-track,.toggle-indicator{position:absolute;top:50%;transform:translateY(-50%)}.toggle-track{fill:var(--tct-checkbox-toggle-track-color, var(--t-checkbox-toggle-track-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));height:14px;width:46px}:host([checked]) .toggle-track{fill:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)));opacity:0.5}.toggle-indicator{transition:left var(--comp-checkbox-tween);height:30px;width:30px;left:0;border-radius:50%}:host([checked]) .toggle-indicator{left:21px}.toggle-circle{fill:var(--tct-checkbox-toggle-circle-color, var(--t-checkbox-toggle-circle-color, var(--t-a11y-gray-color-AA, #949494)))}: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{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{stroke:var(--tct-checkbox-toggle-circle-color, var(--t-checkbox-toggle-circle-color, var(--t-a11y-gray-color-AA, #949494)))}:host([checked]) .off,:host(:not([checked])) .on{opacity:0}";
6
-
7
- const Q2Checkbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
8
- constructor() {
9
- super();
10
- this.__registerHost();
11
- this.__attachShadow();
12
- this.change = createEvent(this, "change", 7);
13
- this._id = `checkbox-${createGuid()}`;
14
- ///// Actions ////////
15
- this.onInputClick = (event) => {
16
- const hasCustomHandler = !!this.hostElement.onchange;
17
- const isNotInteractive = this.disabled || this.readonly;
18
- if (isNotInteractive || hasCustomHandler)
19
- event.preventDefault();
20
- if (isNotInteractive)
21
- return;
22
- if (!(event.target instanceof HTMLInputElement))
23
- return;
24
- const { value, checked } = event.target;
25
- this.change.emit({
26
- value,
27
- checked,
28
- });
29
- this.inputElement.focus();
30
- };
31
- this.checked = false;
32
- this.type = undefined;
33
- this.label = undefined;
34
- this.hideLabel = undefined;
35
- this.indeterminate = undefined;
36
- this.disabled = undefined;
37
- this.readonly = undefined;
38
- this.value = undefined;
39
- this.name = undefined;
40
- this.groupDisabled = undefined;
41
- this.alignment = undefined;
42
- this.description = undefined;
43
- this.hasError = undefined;
44
- this.ariaLabel = undefined;
45
- }
46
- ////////// LIFECYCLE HOOKS ////////
47
- componentWillLoad() {
48
- handleAriaLabel(this);
49
- }
50
- componentDidLoad() {
51
- overrideFocus(this.hostElement);
52
- this.hostElement.click = () => this.inputElement.click();
53
- }
54
- //////// Host Element Events ////////
55
- defaultChangeHandler(event) {
56
- if (!this.readonly && event.target === this.hostElement && !this.hostElement.onchange && !!event.detail) {
57
- this.checked = event.detail.checked;
58
- }
59
- }
60
- delegateFocus(event) {
61
- if (!isEventFromElement(event, this.hostElement))
62
- return;
63
- this.hostElement.shadowRoot.querySelector('input').focus();
64
- }
65
- ////////// OBSERVERS //////////
66
- ariaLabelObserver() {
67
- handleAriaLabel(this);
68
- }
69
- /////// View Methods ///////
70
- render() {
71
- const textLabelClasses = ['label-text'];
72
- if (this.hideLabel)
73
- textLabelClasses.push('sr');
74
- return (h("div", { class: "container" }, h("input", { ref: el => (this.inputElement = el), id: this._id, type: "checkbox", checked: this.indeterminate || this.checked || false, disabled: !!this.disabled || !!this.groupDisabled, class: "sr", value: this.value, name: this.name || this._id, "aria-describedby": this.description ? 'description' : undefined, "test-id": "q2CheckboxInnerCheckBox", onClick: this.onInputClick }), h("label", { htmlFor: this._id, class: "label-control", "test-id": "checkboxButton" }, this.generateCheckboxSVG()), h("div", { class: textLabelClasses.join(' ') }, h("label", { "test-id": "checkboxLabel", htmlFor: this._id }, loc(this.label), h("slot", null))), this.description && (h("div", { class: "description-text", "test-id": "checkboxDescription", id: "description" }, loc(this.description)))));
75
- }
76
- generateCheckboxSVG() {
77
- if (this.type === 'favorite') {
78
- return (h("q2-icon", { type: "star", class: "checkbox-icon" }));
79
- }
80
- if (this.type === 'toggle') {
81
- return this.generateToggleSVG();
82
- }
83
- return (h("svg", { "aria-hidden": "true", width: "20", height: "20", viewBox: "0 0 20 20", class: "checkbox-icon", focusable: "false" }, h("rect", { x: "1", y: "1", width: "18", height: "18", rx: "3" }), (this.checked || this.indeterminate) && this.generateCheckBoxSVGFill()));
84
- }
85
- generateCheckBoxSVGFill() {
86
- if (this.indeterminate) {
87
- return (h("line", { class: "checkbox-fill indeterminate-fill", x1: "4", y1: "10", x2: "16", y2: "10" }));
88
- }
89
- return (h("polyline", { class: "checkbox-fill checked-fill", points: "5 11 8.5 14.5 15 6" }));
90
- }
91
- generateToggleSVG() {
92
- return (h("div", { class: "toggle-svg" }, h("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 46 14", class: "toggle-track", "test-id": "toggleTrack" }, h("rect", { width: "36", height: "14", rx: "7", x: "5" })), h("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 30 30", class: "toggle-indicator", "test-id": "toggleIndicator" }, h("circle", { class: "toggle-circle", width: "20", height: "20", cx: "15", cy: "15", r: "10" }), h("line", { class: "off checked-fill", x1: "12", y1: "18", x2: "18", y2: "12" }), h("line", { class: "off checked-fill", x1: "12", y1: "12", x2: "18", y2: "18" }), h("polyline", { class: "on checked-fill", points: "11,16 14,19 18,12 14,19" }))));
93
- }
94
- get hostElement() { return this; }
95
- static get watchers() { return {
96
- "ariaLabel": ["ariaLabelObserver"]
97
- }; }
98
- static get style() { return stylesCss; }
99
- }, [1, "q2-checkbox", {
100
- "checked": [1540],
101
- "type": [513],
102
- "label": [1537],
103
- "hideLabel": [1540, "hide-label"],
104
- "indeterminate": [516],
105
- "disabled": [516],
106
- "readonly": [516],
107
- "value": [513],
108
- "name": [513],
109
- "groupDisabled": [516, "group-disabled"],
110
- "alignment": [513],
111
- "description": [513],
112
- "hasError": [516, "has-error"],
113
- "ariaLabel": [1537, "aria-label"]
114
- }, [[0, "change", "defaultChangeHandler"], [0, "focus", "delegateFocus"]]]);
115
- function defineCustomElement$1() {
116
- if (typeof customElements === "undefined") {
117
- return;
118
- }
119
- const components = ["q2-checkbox", "q2-icon"];
120
- components.forEach(tagName => { switch (tagName) {
121
- case "q2-checkbox":
122
- if (!customElements.get(tagName)) {
123
- customElements.define(tagName, Q2Checkbox$1);
124
- }
125
- break;
126
- case "q2-icon":
127
- if (!customElements.get(tagName)) {
128
- defineCustomElement$2();
129
- }
130
- break;
131
- } });
132
- }
133
- defineCustomElement$1();
1
+ import { Q as Q2Checkbox$1, d as defineCustomElement$1 } from './index6.js';
134
2
 
135
3
  const Q2Checkbox = Q2Checkbox$1;
136
4
  const defineCustomElement = defineCustomElement$1;
@@ -0,0 +1,11 @@
1
+ import type { Components, JSX } from "../types/components";
2
+
3
+ interface Q2DataTable extends Components.Q2DataTable, HTMLElement {}
4
+ export const Q2DataTable: {
5
+ prototype: Q2DataTable;
6
+ new (): Q2DataTable;
7
+ };
8
+ /**
9
+ * Used to define this component and all nested components recursively.
10
+ */
11
+ export const defineCustomElement: () => void;