q2-tecton-elements 1.11.4 → 1.12.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 (126) hide show
  1. package/dist/cjs/{index-f5807a6a.js → index-773c3eec.js} +13 -11
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/q2-btn_2.cjs.entry.js +2 -2
  4. package/dist/cjs/q2-calendar.cjs.entry.js +12 -2
  5. package/dist/cjs/q2-card.cjs.entry.js +1 -1
  6. package/dist/cjs/q2-carousel-pane.cjs.entry.js +1 -1
  7. package/dist/cjs/q2-carousel.cjs.entry.js +1 -1
  8. package/dist/cjs/q2-checkbox-group.cjs.entry.js +1 -1
  9. package/dist/cjs/q2-checkbox.cjs.entry.js +4 -3
  10. package/dist/cjs/q2-dropdown-item.cjs.entry.js +1 -1
  11. package/dist/cjs/q2-dropdown.cjs.entry.js +1 -1
  12. package/dist/cjs/q2-editable-field.cjs.entry.js +1 -1
  13. package/dist/cjs/q2-icon.cjs.entry.js +1 -1
  14. package/dist/cjs/q2-input.cjs.entry.js +4 -4
  15. package/dist/cjs/q2-loc.cjs.entry.js +1 -1
  16. package/dist/cjs/q2-message.cjs.entry.js +1 -1
  17. package/dist/cjs/q2-optgroup.cjs.entry.js +1 -1
  18. package/dist/cjs/q2-option-list.cjs.entry.js +357 -0
  19. package/dist/cjs/q2-option.cjs.entry.js +2 -10
  20. package/dist/cjs/q2-pagination.cjs.entry.js +1 -1
  21. package/dist/cjs/q2-pill.cjs.entry.js +137 -0
  22. package/dist/cjs/q2-radio-group.cjs.entry.js +1 -1
  23. package/dist/cjs/q2-radio.cjs.entry.js +1 -1
  24. package/dist/cjs/q2-section.cjs.entry.js +1 -1
  25. package/dist/cjs/q2-select.cjs.entry.js +15 -6
  26. package/dist/cjs/q2-stepper-pane.cjs.entry.js +1 -1
  27. package/dist/cjs/q2-stepper.cjs.entry.js +2 -2
  28. package/dist/cjs/q2-tab-container.cjs.entry.js +5 -1
  29. package/dist/cjs/q2-tag.cjs.entry.js +94 -0
  30. package/dist/cjs/q2-tecton-elements.cjs.js +1 -1
  31. package/dist/cjs/q2-textarea.cjs.entry.js +1 -1
  32. package/dist/collection/collection-manifest.json +3 -0
  33. package/dist/collection/components/q2-btn/styles.css +1 -1
  34. package/dist/collection/components/q2-calendar/helpers.js +6 -0
  35. package/dist/collection/components/q2-calendar/index.js +6 -2
  36. package/dist/collection/components/q2-checkbox/index.js +3 -2
  37. package/dist/collection/components/q2-input/index.js +4 -3
  38. package/dist/collection/components/q2-input/styles.css +9 -2
  39. package/dist/collection/components/q2-option/index.js +19 -25
  40. package/dist/collection/components/q2-option/styles.css +5 -0
  41. package/dist/collection/components/q2-option-list/index.js +646 -0
  42. package/dist/collection/components/q2-option-list/styles.css +128 -0
  43. package/dist/collection/components/q2-pill/index.js +324 -0
  44. package/dist/collection/components/q2-pill/styles.css +227 -0
  45. package/dist/collection/components/q2-select/index.js +14 -5
  46. package/dist/collection/components/q2-stepper/styles.css +1 -1
  47. package/dist/collection/components/q2-tab-container/index.js +4 -0
  48. package/dist/collection/components/q2-tag/index.js +200 -0
  49. package/dist/collection/components/q2-tag/styles.css +141 -0
  50. package/dist/collection/utils/index.js +13 -11
  51. package/dist/esm/{index-0e13a57f.js → index-fa32f694.js} +13 -11
  52. package/dist/esm/loader.js +1 -1
  53. package/dist/esm/q2-btn_2.entry.js +2 -2
  54. package/dist/esm/q2-calendar.entry.js +12 -2
  55. package/dist/esm/q2-card.entry.js +1 -1
  56. package/dist/esm/q2-carousel-pane.entry.js +1 -1
  57. package/dist/esm/q2-carousel.entry.js +1 -1
  58. package/dist/esm/q2-checkbox-group.entry.js +1 -1
  59. package/dist/esm/q2-checkbox.entry.js +4 -3
  60. package/dist/esm/q2-dropdown-item.entry.js +1 -1
  61. package/dist/esm/q2-dropdown.entry.js +1 -1
  62. package/dist/esm/q2-editable-field.entry.js +1 -1
  63. package/dist/esm/q2-icon.entry.js +1 -1
  64. package/dist/esm/q2-input.entry.js +4 -4
  65. package/dist/esm/q2-loc.entry.js +1 -1
  66. package/dist/esm/q2-message.entry.js +1 -1
  67. package/dist/esm/q2-optgroup.entry.js +1 -1
  68. package/dist/esm/q2-option-list.entry.js +353 -0
  69. package/dist/esm/q2-option.entry.js +3 -11
  70. package/dist/esm/q2-pagination.entry.js +1 -1
  71. package/dist/esm/q2-pill.entry.js +133 -0
  72. package/dist/esm/q2-radio-group.entry.js +1 -1
  73. package/dist/esm/q2-radio.entry.js +1 -1
  74. package/dist/esm/q2-section.entry.js +1 -1
  75. package/dist/esm/q2-select.entry.js +15 -6
  76. package/dist/esm/q2-stepper-pane.entry.js +1 -1
  77. package/dist/esm/q2-stepper.entry.js +2 -2
  78. package/dist/esm/q2-tab-container.entry.js +5 -1
  79. package/dist/esm/q2-tag.entry.js +90 -0
  80. package/dist/esm/q2-tecton-elements.js +1 -1
  81. package/dist/esm/q2-textarea.entry.js +1 -1
  82. package/dist/q2-tecton-elements/{p-ca847db7.entry.js → p-08668234.entry.js} +1 -1
  83. package/dist/q2-tecton-elements/{p-2be33492.entry.js → p-0a7cff38.entry.js} +1 -1
  84. package/dist/q2-tecton-elements/p-167a19fd.entry.js +1 -0
  85. package/dist/q2-tecton-elements/{p-a72e7a12.entry.js → p-2afdc922.entry.js} +1 -1
  86. package/dist/q2-tecton-elements/{p-fe61c1aa.entry.js → p-30bf5f44.entry.js} +1 -1
  87. package/dist/q2-tecton-elements/{p-f85bf7fb.entry.js → p-34415315.entry.js} +1 -1
  88. package/dist/q2-tecton-elements/{p-3479847c.entry.js → p-54300d2f.entry.js} +1 -1
  89. package/dist/q2-tecton-elements/p-54f0d64e.entry.js +1 -0
  90. package/dist/q2-tecton-elements/p-5b906cf1.entry.js +1 -0
  91. package/dist/q2-tecton-elements/p-5effd81a.entry.js +1 -0
  92. package/dist/q2-tecton-elements/{p-27ec0a16.entry.js → p-7ce98c1a.entry.js} +1 -1
  93. package/dist/q2-tecton-elements/{p-346b65d5.entry.js → p-91dba21f.entry.js} +1 -1
  94. package/dist/q2-tecton-elements/{p-2372f988.entry.js → p-9a3c37ab.entry.js} +1 -1
  95. package/dist/q2-tecton-elements/{p-c83dba0a.entry.js → p-a0248299.entry.js} +1 -1
  96. package/dist/q2-tecton-elements/{p-f435dc7e.entry.js → p-aca8302b.entry.js} +1 -1
  97. package/dist/q2-tecton-elements/{p-bfd77f9b.entry.js → p-b9c2c1d3.entry.js} +1 -1
  98. package/dist/q2-tecton-elements/{p-f85da2a8.js → p-c3d68d5c.js} +1 -1
  99. package/dist/q2-tecton-elements/{p-841ec108.entry.js → p-c460e5ed.entry.js} +1 -1
  100. package/dist/q2-tecton-elements/{p-88bc2f49.entry.js → p-c5199147.entry.js} +1 -1
  101. package/dist/q2-tecton-elements/{p-492dfb55.entry.js → p-c5e6f7fa.entry.js} +1 -1
  102. package/dist/q2-tecton-elements/{p-9ccbc3d8.entry.js → p-d3058002.entry.js} +1 -1
  103. package/dist/q2-tecton-elements/{p-fc318ae2.entry.js → p-d65aaed2.entry.js} +1 -1
  104. package/dist/q2-tecton-elements/{p-701b381a.entry.js → p-d9bc6494.entry.js} +1 -1
  105. package/dist/q2-tecton-elements/p-df86f160.entry.js +1 -0
  106. package/dist/q2-tecton-elements/{p-f73df612.entry.js → p-e38080d2.entry.js} +1 -1
  107. package/dist/q2-tecton-elements/p-e9d69ba8.entry.js +1 -0
  108. package/dist/q2-tecton-elements/{p-d199fca8.entry.js → p-f98dc161.entry.js} +1 -1
  109. package/dist/q2-tecton-elements/{p-6a83a97c.entry.js → p-fa9e3825.entry.js} +1 -1
  110. package/dist/q2-tecton-elements/{p-b5b12e46.entry.js → p-fe6407a4.entry.js} +1 -1
  111. package/dist/q2-tecton-elements/q2-tecton-elements.esm.js +1 -1
  112. package/dist/test/elements/q2-tag-test.js +151 -0
  113. package/dist/test/helpers.js +7 -0
  114. package/dist/types/components/q2-calendar/helpers.d.ts +1 -0
  115. package/dist/types/components/q2-checkbox/index.d.ts +1 -1
  116. package/dist/types/components/q2-option/index.d.ts +2 -3
  117. package/dist/types/components/q2-option-list/index.d.ts +62 -0
  118. package/dist/types/components/q2-pill/index.d.ts +39 -0
  119. package/dist/types/components/q2-tag/index.d.ts +28 -0
  120. package/dist/types/components.d.ts +95 -1
  121. package/dist/types/workspace/workspace/tecton-production_release_1.12.x/packages/q2-tecton-elements/.stencil/test/elements/q2-tag-test.d.ts +1 -0
  122. package/dist/types/workspace/workspace/{tecton-production_release_1.11.x → tecton-production_release_1.12.x}/packages/q2-tecton-elements/.stencil/test/helpers.d.ts +1 -0
  123. package/package.json +2 -2
  124. package/dist/q2-tecton-elements/p-564154f3.entry.js +0 -1
  125. package/dist/q2-tecton-elements/p-6702eb4d.entry.js +0 -1
  126. package/dist/q2-tecton-elements/p-dffbcec3.entry.js +0 -1
@@ -0,0 +1 @@
1
+ import{r as t,c as o,h as r,F as i,g as a}from"./p-080839ed.js";import{o as e,l as n,i as c}from"./p-c3d68d5c.js";const l=class{constructor(r){t(this,r),this.change=o(this,"change",7),this.selectedOptions=[],this.scheduledAfterRender=[],this.determineHasOptions=()=>{const t=!!this.hostElement.querySelectorAll("q2-option").length;this.hasOptions=t},this.clearSelectedOptions=()=>{this.selectedOptions=[],this.active=!1,this.open=!1,this.primaryBtn.focus(),this.change.emit({value:null,values:[],active:!1})},this.handleClick=t=>{if(t.stopPropagation(),!this.disabled)if(this.hasOptions)this.optionList.toggle();else{const{value:t,label:o}=this,r=this.active=!this.active,i=r?[{value:t,display:o}]:[];this.selectedOptions=i,this.change.emit({value:t,values:i,active:r})}},this.handleKeydown=t=>{this.hasOptions&&!this.disabled&&this.optionList.handleExternalKeydown(t)},this.handleChange=t=>{if(!this.hasOptions)return;const{value:o,values:r}=t.detail,i=!!r.length;this.hostElement.onchange||(this.selectedOptions=r,this.active=i),this.change.emit({value:o,values:r,active:i})},this.handleFocusout=t=>{const o=t.relatedTarget;Array.from(this.hostElement.children).includes(o)||(!o||t.relatedTarget instanceof HTMLElement)&&(o&&o.closest(".btn-height-wrapper")||(this.optionList.open=!1))},this.handleWrapperClick=()=>{this.primaryBtn.focus(),this.primaryBtn.click()}}componentWillLoad(){const t=new MutationObserver(this.determineHasOptions);t.observe(this.hostElement,{childList:!0,attributes:!0}),this.mutationObserver=t}componentDidLoad(){e(this.hostElement)}componentDidRender(){this.scheduledAfterRender.forEach((t=>t())),this.scheduledAfterRender=[]}disconnectedCallback(){this.mutationObserver.disconnect(),this.mutationObserver=null}get buttonContent(){const{label:t,selectedOptions:o,hasOptions:r}=this;return r&&0!==o.length?1===o.length?o[0].display:n("tecton.element.pill.activeCount",{count:o.length}):t}delegateFocus(t){c(t,this.hostElement)&&this.primaryBtn.focus()}optionListStateEvent({detail:{open:t}}){this.open=t,t||this.primaryBtn.focus()}generateIcon(){const{hasOptions:t,active:o}=this,i=t&&o,a=i||!t?"close":"chevron-down";return r(i?"button":"div",{class:"btn-close",onClick:i&&this.clearSelectedOptions,disabled:i&&this.disabled,"aria-label":i&&n("tecton.element.pill.clearSelection"),type:i&&"button"},r("q2-icon",{type:a}))}render(){const{hasOptions:t,active:o,open:a}=this;let e=["btn-wrapper"];return(t||o)&&e.push("has-icon"),t&&e.push("has-options"),r(i,null,r("div",{class:e.join(" ")},r("div",{class:"btn-height-wrapper",onClick:this.handleWrapperClick,tabIndex:-1},r("button",{class:"btn-primary",type:"button","test-id":"btn-control",ref:t=>this.primaryBtn=t,onClick:this.handleClick,onKeyDown:this.handleKeydown,disabled:this.disabled,onFocusout:this.handleFocusout,"aria-selected":!t&&o?"true":"false","aria-roledescription":!t&&"filter","aria-controls":t&&"option-list","aria-haspopup":t&&"true","aria-expanded":t&&a?"true":"false"},this.buttonContent,!t&&o&&r("span",{class:"sr"},"(",n("tecton.element.pill.active"),")"))),this.generateIcon()),this.hasOptions&&r("q2-option-list",{id:"option-list",ref:t=>this.optionList=t,open:this.open,onChange:this.handleChange,multiple:this.multiple,onFocusout:this.handleFocusout,selectedOptions:this.selectedOptions},r("slot",null)))}get hostElement(){return a(this)}};l.style="*{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:inline-block;position:relative}:host(:not(:last-child)){margin-inline-end:var(--tct-pill-margin, var(--t-pill-margin, var(--app-scale-2x, 10px)))}.btn-wrapper{--comp-pill-min-height:var(--tct-pill-min-height, var(--t-pill-min-height, 44px));--comp-pill-btn-border-width:var(--tct-pill-btn-border-width, var(--t-pill-btn-border-width, 2px));--comp-pill-btn-height:var(--tct-pill-btn-height, var(--t-pill-btn-height, 30px));--comp-close-size:0px;--comp-btn-background:var(--tct-pill-btn-background, var(--t-pill-btn-background, var(--t-base, #ffffff)));--compt-hover-btn-background:var(--tct-pill-hover-btn-background, var(--t-pill-hover-btn-background, var(--t-gray-13, #e6e6e6)));--comp-btn-padding:var(--tct-pill-btn-padding-inline, var(--t-pill-btn-padding-inline, var(--app-scale-3x, 15px)));--comp-btn-color:var(--tct-pill-btn-color, var(--t-pill-btn-color, var(--t-gray-3, #262626)));--comp-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-7, #666666)));--comp-active-btn-border-color:var(--tct-pill-active-btn-border-color, var(--t-pill-active-btn-border-color, var(--t-gray-7, #666666)));--comp-hover-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));--comp-hover-active-btn-border-color:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));position:relative}:host(:not(:empty)) .btn-wrapper,.btn-wrapper.has-icon{--comp-close-size:var(--comp-pill-btn-height)}:host([active]) .btn-wrapper{--comp-btn-color:var(--tct-pill-active-btn-color, var(--t-pill-active-btn-color, var(--t-base, #ffffff)))}:host([theme=primary]) .btn-wrapper{--comp-active-btn-background:var(--t-primary-l5, #61c4ff);--comp-btn-color:var(--t-primary-text, #ffffff);--comp-active-btn-border-color:var(--t-primary-l5, #61c4ff);--comp-hover-active-btn-background:var(--t-primary-l3, #21acff);--comp-hover-active-btn-border-color:var(--t-primary-l3, #21acff)}:host([theme=secondary]) .btn-wrapper{--comp-active-btn-background:var(--t-secondary-l5, #61c4ff);--comp-btn-color:var(--t-secondary-text, #000000);--comp-active-btn-border-color:var(--t-secondary-l5, #61c4ff);--comp-hover-active-btn-background:var(--t-secondary-l3, #21acff);--comp-hover-active-btn-border-color:var(--t-secondary-l3, #21acff)}:host([theme=tertiary]) .btn-wrapper{--comp-active-btn-background:var(--t-tertiary-l5, #61c4ff);--comp-btn-color:var(--t-tertiary-text, #000000);--comp-active-btn-border-color:var(--t-tertiary-l5, #61c4ff);--comp-hover-active-btn-background:var(--t-tertiary-l3, #21acff);--comp-hover-active-btn-border-color:var(--t-tertiary-l3, #21acff)}q2-option-list{position:absolute;left:0}.btn-height-wrapper{height:var(--comp-pill-min-height);display:flex;align-items:center;cursor:pointer}.btn-height-wrapper:focus{box-shadow:none}:host([disabled]) .btn-height-wrapper{cursor:not-allowed}.btn-close,.btn-primary{cursor:pointer;height:var(--comp-pill-btn-height);border-style:solid;border-radius:var(--tct-pill-btn-border-radius, var(--t-pill-btn-border-radius, 30px));transition-property:background, color, padding, width, opacity;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}:host([disabled]) .btn-close,:host([disabled]) .btn-primary,:host([disabled]) q2-icon{opacity:var(--tct-pill-disabled-opacity, var(--t-pill-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));cursor:not-allowed}.btn-primary{background:var(--comp-btn-background);border-width:var(--comp-pill-btn-border-width);border-color:var(--tct-pill-btn-border-color, var(--t-pill-btn-border-color, var(--t-gray-9, #999999)));padding-inline:var(--comp-btn-padding);padding-right:calc(var(--comp-btn-padding) + var(--comp-close-size));font-size:var(--tct-pill-btn-font-size, var(--t-pill-btn-font-size, var(--app-font-size, 14px)));color:var(--comp-btn-color);display:block;width:100%;text-align:start}.btn-primary:focus,.btn-primary:hover{background:var(--comp-hover-btn-background)}:host(:not(:empty)) .btn-primary,.has-icon .btn-primary{padding-right:calc( var(--tct-pill-icon-gap, var(--t-pill-icon-gap, var(--app-size-1x, 5px))) + var(--comp-close-size) )}.has-options .btn-primary{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:var(--tct-pill-max-width, var(--t-pill-max-width, 200px))}:host([active]) .btn-primary{background:var(--comp-active-btn-background);border-color:var(--comp-active-btn-border-color)}:host([active]) .btn-primary:focus,:host([active]) .btn-primary:hover{background:var(--comp-hover-active-btn-background);border-color:var(--comp-hover-active-btn-border-color)}.btn-close{background:transparent;border-color:transparent;border-width:var(--comp-pill-btn-border-width);width:var(--comp-close-size);height:var(--comp-close-size);padding:0;border:0;display:inline-flex;justify-content:center;align-items:center;position:absolute;right:0;top:50%;transform:translateY(-50%);opacity:0;stroke:var(--comp-btn-color);--tct-icon-stroke-primary:var(--comp-btn-color)}:host(:not(:empty)) .btn-close,.has-icon .btn-close{opacity:1}q2-icon{width:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));height:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));transition-property:transform;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}div.btn-close{pointer-events:none}:host([open]) div.btn-close q2-icon{transform:rotate(180deg)}:host([active]) button.btn-close:focus,:host([active]) button.btn-close:hover{background:var(--tct-pill-hover-close-btn-background, var(--t-pill-hover-close-btn-background, var(--t-top-a1, rgba(13, 13, 13, 0.35))));border-color:var(--tct-pill-hover-close-btn-border-color, var(--t-pill-hover-close-btn-border-color, var(--t-top-a1, rgba(13, 13, 13, 0.35))))}";export{l as q2_pill}
@@ -1 +1 @@
1
- import{r as t,h as s,g as a}from"./p-080839ed.js";import{f as e,o as r,n as o,i}from"./p-f85da2a8.js";const n=class{constructor(s){t(this,s),this.type="info",this.appearance="standard",this.description=!1}get isFirefox(){return e()}componentDidLoad(){r(this.hostElement)}async present(){const{isFirefox:t}=this;this.presentToggle=!this.presentToggle,t&&o((()=>{this.presentToggle=!1}))}delegateFocus(t){i(t,this.hostElement)&&this.hostElement.shadowRoot.querySelector(".message").focus()}render(){const{isFirefox:t}=this,a=t&&this.presentToggle,e=!t&&this.presentToggle,{description:r}=this;return s("div",{tabindex:"-1",class:"message",role:r?void 0:"alert","aria-live":r?void 0:"assertive","aria-atomic":r?void 0:"true","aria-relevant":r?void 0:"all"},"standard"===this.appearance?function(t){const a={success:"success",warning:"warning",danger:"error",error:"error",info:"info"};return s("q2-icon",{type:a[t]||a.info,class:"message-icon"})}(this.type):"",e&&s("div",{class:"sr"}),s("div",{class:"message-content","aria-hidden":a?"true":void 0},s("slot",null)))}get hostElement(){return a(this)}};n.style="*{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}:host([hidden]){display:none}.message{border-left-width:var(--tct-message-bar-width, var(--t-message-bar-width, var(--app-scale-1, 5px)));border-left-style:solid;display:grid;gap:var(--tct-scale-1, var(--app-scale-1, 5px));align-items:flex-start;background:var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));color:var(--tct-message-font-color, var(--t-message-font-color, inherit));box-shadow:var(--tct-message-box-shadow, var(--t-message-box-shadow, inherit));border-radius:var(--tct-message-border-radius, var(--t-message-border-radius, inherit))}.message:focus{box-shadow:var(--const-global-focus)}.message-icon{width:24px}.message-content{flex:1}::slotted(ul){padding-left:var(--tct-scale-l3, var(--app-scale-3, 15px))}:host(:not([appearance])),:host([appearance=standard]){margin:var(--tct-scale-l3, var(--app-scale-3, 15px)) 0}:host(:not([appearance])) .message,:host([appearance=standard]) .message{grid-template-columns:24px 1fr;--comp-padding:var(--tct-message-padding, var(--t-message-padding, var(--app-scale-3, 15px)));padding:var(--comp-padding);padding-top:calc(var(--comp-padding) - var(--tct-scale-1, var(--app-scale-1, 5px)));padding-left:calc(var(--comp-padding) - var(--tct-scale-2, var(--app-scale-2, 10px)))}:host(:not([appearance])) .message-content,:host([appearance=standard]) .message-content{padding-top:var(--tct-scale-1, var(--app-scale-1, 5px))}:host(:not([appearance])) ::slotted(ul),:host([appearance=standard]) ::slotted(ul){margin:var(--tct-scale-l3, var(--app-scale-3, 15px)) 0}:host([appearance=minimal]){margin:0}:host([appearance=minimal]) .message{padding:var(--tct-message-minimal-padding, var(--t-message-minimal-padding, var(--app-scale-2, 10px)));grid-template-columns:1fr}:host([appearance=minimal]) ::slotted(ul){margin:var(--tct-scale-1, var(--app-scale-1, 5px)) 0}:host(:not([type])) .message,:host([type=info]) .message{border-left-color:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host(:not([type])) .message-icon,:host([type=info]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));--tct-icon-stroke-secondary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host([type=success]) .message{border-left-color:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=success]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00));--tct-icon-stroke-secondary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=warning]) .message{border-left-color:var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400))}:host([type=warning]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400));--tct-icon-stroke-secondary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400))}:host([type=error]) .message,:host([type=danger]) .message{border-left-color:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000))}:host([type=error]) .message-icon,:host([type=danger]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));--tct-icon-stroke-secondary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000))}";export{n as q2_message}
1
+ import{r as t,h as s,g as a}from"./p-080839ed.js";import{f as e,o as r,n as o,i}from"./p-c3d68d5c.js";const n=class{constructor(s){t(this,s),this.type="info",this.appearance="standard",this.description=!1}get isFirefox(){return e()}componentDidLoad(){r(this.hostElement)}async present(){const{isFirefox:t}=this;this.presentToggle=!this.presentToggle,t&&o((()=>{this.presentToggle=!1}))}delegateFocus(t){i(t,this.hostElement)&&this.hostElement.shadowRoot.querySelector(".message").focus()}render(){const{isFirefox:t}=this,a=t&&this.presentToggle,e=!t&&this.presentToggle,{description:r}=this;return s("div",{tabindex:"-1",class:"message",role:r?void 0:"alert","aria-live":r?void 0:"assertive","aria-atomic":r?void 0:"true","aria-relevant":r?void 0:"all"},"standard"===this.appearance?function(t){const a={success:"success",warning:"warning",danger:"error",error:"error",info:"info"};return s("q2-icon",{type:a[t]||a.info,class:"message-icon"})}(this.type):"",e&&s("div",{class:"sr"}),s("div",{class:"message-content","aria-hidden":a?"true":void 0},s("slot",null)))}get hostElement(){return a(this)}};n.style="*{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}:host([hidden]){display:none}.message{border-left-width:var(--tct-message-bar-width, var(--t-message-bar-width, var(--app-scale-1, 5px)));border-left-style:solid;display:grid;gap:var(--tct-scale-1, var(--app-scale-1, 5px));align-items:flex-start;background:var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));color:var(--tct-message-font-color, var(--t-message-font-color, inherit));box-shadow:var(--tct-message-box-shadow, var(--t-message-box-shadow, inherit));border-radius:var(--tct-message-border-radius, var(--t-message-border-radius, inherit))}.message:focus{box-shadow:var(--const-global-focus)}.message-icon{width:24px}.message-content{flex:1}::slotted(ul){padding-left:var(--tct-scale-l3, var(--app-scale-3, 15px))}:host(:not([appearance])),:host([appearance=standard]){margin:var(--tct-scale-l3, var(--app-scale-3, 15px)) 0}:host(:not([appearance])) .message,:host([appearance=standard]) .message{grid-template-columns:24px 1fr;--comp-padding:var(--tct-message-padding, var(--t-message-padding, var(--app-scale-3, 15px)));padding:var(--comp-padding);padding-top:calc(var(--comp-padding) - var(--tct-scale-1, var(--app-scale-1, 5px)));padding-left:calc(var(--comp-padding) - var(--tct-scale-2, var(--app-scale-2, 10px)))}:host(:not([appearance])) .message-content,:host([appearance=standard]) .message-content{padding-top:var(--tct-scale-1, var(--app-scale-1, 5px))}:host(:not([appearance])) ::slotted(ul),:host([appearance=standard]) ::slotted(ul){margin:var(--tct-scale-l3, var(--app-scale-3, 15px)) 0}:host([appearance=minimal]){margin:0}:host([appearance=minimal]) .message{padding:var(--tct-message-minimal-padding, var(--t-message-minimal-padding, var(--app-scale-2, 10px)));grid-template-columns:1fr}:host([appearance=minimal]) ::slotted(ul){margin:var(--tct-scale-1, var(--app-scale-1, 5px)) 0}:host(:not([type])) .message,:host([type=info]) .message{border-left-color:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host(:not([type])) .message-icon,:host([type=info]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));--tct-icon-stroke-secondary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host([type=success]) .message{border-left-color:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=success]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00));--tct-icon-stroke-secondary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=warning]) .message{border-left-color:var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400))}:host([type=warning]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400));--tct-icon-stroke-secondary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400))}:host([type=error]) .message,:host([type=danger]) .message{border-left-color:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000))}:host([type=error]) .message-icon,:host([type=danger]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));--tct-icon-stroke-secondary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000))}";export{n as q2_message}
@@ -1 +1 @@
1
- import{r as e,c as a,h as t,H as r,g as o}from"./p-080839ed.js";import{l as n}from"./p-f85da2a8.js";const i=class{constructor(t){e(this,t),this.clickCarouselPane=a(this,"clickCarouselPane",7),this.generatePaneClass=e=>`q2-carousel-pane swiper-slide q2-carousel-pane-${e}`,this.paneClicked=e=>{this.isActivePane||(e.preventDefault(),this.clickCarouselPane.emit({paneIndex:this.index,pane:this.hostElement}))}}get currentPaneIndex(){return Array.prototype.indexOf.call(this.hostElement.parentElement.children,this.hostElement)}componentDidLoad(){this.determineDisabledContent()}determineDisabledContent(){const{isActivePane:e}=this;this.hostElement.querySelectorAll('q2-btn, a[href], button, [tabindex]:not([tabindex="-1"])').forEach((a=>{a.hasAttribute("tabindex")&&parseInt(a.getAttribute("tabindex"))>=0&&(a.dataset.q2Tabindex=`${a.tabIndex}`),e?a.hasAttribute("data-q2-tabindex")?(a.tabIndex=parseInt(a.getAttribute("data-q2-tabindex")),a.removeAttribute("data-q2-tabindex")):a.tagName.startsWith("Q2-")?a.tabIndex=void 0:a.removeAttribute("tabindex"):a.tabIndex=-1}))}render(){const{label:e}=this;return t(r,{class:this.generatePaneClass(this.currentPaneIndex),tabIndex:this.isActivePane?0:-1,role:"group","aria-roledescription":"slide","aria-hidden":this.isActivePane?void 0:"true","aria-label":e?n(e):n("tecton.element.carousel.itemDescription",[(this.currentPaneIndex+1).toString(),(this.siblingCount||0).toString()]),onClick:this.paneClicked},t("article",{class:"q2-carousel-pane-main-content"},t("slot",null)))}get hostElement(){return o(this)}static get watchers(){return{isActivePane:["determineDisabledContent"]}}};i.style="*{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}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{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(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff))}q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content{box-shadow:0px 2px 8px 0px var(--t-top-a1, rgba(0, 0, 0, 0.25));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, 1px)) 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));min-height:10em}";export{i as q2_carousel_pane}
1
+ import{r as e,c as a,h as t,H as r,g as o}from"./p-080839ed.js";import{l as n}from"./p-c3d68d5c.js";const i=class{constructor(t){e(this,t),this.clickCarouselPane=a(this,"clickCarouselPane",7),this.generatePaneClass=e=>`q2-carousel-pane swiper-slide q2-carousel-pane-${e}`,this.paneClicked=e=>{this.isActivePane||(e.preventDefault(),this.clickCarouselPane.emit({paneIndex:this.index,pane:this.hostElement}))}}get currentPaneIndex(){return Array.prototype.indexOf.call(this.hostElement.parentElement.children,this.hostElement)}componentDidLoad(){this.determineDisabledContent()}determineDisabledContent(){const{isActivePane:e}=this;this.hostElement.querySelectorAll('q2-btn, a[href], button, [tabindex]:not([tabindex="-1"])').forEach((a=>{a.hasAttribute("tabindex")&&parseInt(a.getAttribute("tabindex"))>=0&&(a.dataset.q2Tabindex=`${a.tabIndex}`),e?a.hasAttribute("data-q2-tabindex")?(a.tabIndex=parseInt(a.getAttribute("data-q2-tabindex")),a.removeAttribute("data-q2-tabindex")):a.tagName.startsWith("Q2-")?a.tabIndex=void 0:a.removeAttribute("tabindex"):a.tabIndex=-1}))}render(){const{label:e}=this;return t(r,{class:this.generatePaneClass(this.currentPaneIndex),tabIndex:this.isActivePane?0:-1,role:"group","aria-roledescription":"slide","aria-hidden":this.isActivePane?void 0:"true","aria-label":e?n(e):n("tecton.element.carousel.itemDescription",[(this.currentPaneIndex+1).toString(),(this.siblingCount||0).toString()]),onClick:this.paneClicked},t("article",{class:"q2-carousel-pane-main-content"},t("slot",null)))}get hostElement(){return o(this)}static get watchers(){return{isActivePane:["determineDisabledContent"]}}};i.style="*{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}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{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(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff))}q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content{box-shadow:0px 2px 8px 0px var(--t-top-a1, rgba(0, 0, 0, 0.25));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, 1px)) 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));min-height:10em}";export{i as q2_carousel_pane}
@@ -1 +1 @@
1
- import{r as t,c as e,h as r,F as i,g as o}from"./p-080839ed.js";import{b as s,o as a,i as l,l as p}from"./p-f85da2a8.js";s();const n=class{constructor(r){t(this,r),this.change=e(this,"change",7),this.currentStep=1,this.scrollEnabled=!1,this.showScrollLeft=!1,this.showScrollRight=!1,this.scheduledAfterRender=[],this.onSlotChange=()=>{this.checkForPanes(),this.checkScrollState()},this.onScrollBtnClick=t=>{const e=Math.floor(this.listElement.clientWidth/2);this.listElement.scrollBy({left:"left"===t?-e:e,behavior:"smooth"})},this.onStepClick=(t,e)=>{t.stopPropagation();const{currentStep:r,stepCount:i,lastEnabledStep:o}=this;e>o||e===r||this.change.emit({selectedStep:e,lastEnabledStep:o,currentStep:r,stepCount:i})},this.onStepKeyDown=(t,e)=>{const{lastEnabledStep:r,stepCount:i}=this,{key:o}=t;let s;switch(o){case"ArrowLeft":t.preventDefault(),s=Math.max(e-1,0);break;case"ArrowRight":t.preventDefault(),s=Math.min(e+1,i);break;case"Home":t.preventDefault(),s=1;break;case"End":t.preventDefault(),s=r}s&&this.focusStep(s,!0)},this.checkForPanes=()=>{const{allPanes:t}=this;t.length&&(this.stepCount=t.length)},this.checkScrollState=()=>{if(!this.listElement)return;const{scrollLeft:t,scrollWidth:e,clientWidth:r}=this.listElement;this.scrollEnabled=e>r,this.showScrollLeft=!!t,this.showScrollRight=e!==t+r}}componentWillLoad(){this.lastEnabledStep||(this.lastEnabledStep=this.currentStep||1),this.resizeObserver=new ResizeObserver((()=>this.checkScrollState())),this.checkForPanes()}componentDidLoad(){this.resizeObserver.observe(this.listElement),this.checkScrollState(),a(this.hostElement),setTimeout((()=>this.showStep(this.currentStep||1)),0)}componentDidRender(){this.scheduledAfterRender.forEach((t=>t())),this.scheduledAfterRender=[]}disconnectedCallback(){this.resizeObserver.disconnect()}currentStepChanged(t){this.showStep(t)}defaultChangeHandler(t){const{hostElement:e}=this;t.target===e&&!e.getAttribute("onchange")&&t.detail&&(this.currentStep=t.detail.selectedStep)}delegateFocus(t){l(t,this.hostElement)&&this.focusStep(this.currentStep,!0,!0)}get allPanes(){return this.hostElement.querySelectorAll("q2-stepper-pane")}showStep(t){if(t>this.lastEnabledStep){const{currentStep:e,stepCount:r}=this;this.lastEnabledStep=t,this.change.emit({selectedStep:null,lastEnabledStep:t,currentStep:e,stepCount:r})}this.scheduledAfterRender.push(this.resizeIframe),this.showStepPane(t),this.focusStep(t,this.scrollEnabled)}resizeIframe(){var t;return null===(t=null===window||void 0===window?void 0:window.TectonElements)||void 0===t?void 0:t.resizeIframe()}showStepPane(t){this.allPanes.forEach(((e,r)=>{e.isActive=t===r+1}))}focusStep(t,e,r){var i;const o=this.listElement.children[t-1],s=document.activeElement===this.hostElement;o&&((s||r)&&(null===(i=o.firstElementChild)||void 0===i||i.focus()),e)&&this.listElement.scrollTo({left:o.offsetLeft-this.listElement.clientWidth/2,behavior:"smooth"})}renderStepBtn(t){var e;const{allPanes:o,stepCount:s,currentStep:a,lastEnabledStep:l}=this,{id:n,label:c,description:d}=null!==(e=null==o?void 0:o[t])&&void 0!==e?e:{},b=t+1,h=b===a,v=c&&`label-${n}`,u=c&&d&&`description-${n}`,g=!c&&p("tecton.element.stepper.number",[`${b}`,`${s}`]);return r("li",{role:"presentation"},r("button",{class:"step-btn",type:"button","aria-labelledby":v,"aria-describedBy":u,"aria-label":g,"aria-selected":h,"aria-controls":n,"aria-disabled":b>l?"true":null,role:"tab",tabIndex:h?0:-1,onKeyDown:t=>this.onStepKeyDown(t,b),onClick:t=>this.onStepClick(t,b)},r("div",{class:"step-bubble"},b),c&&r(i,null,r("div",{class:"step-label",id:v},p(c)),d&&r("div",{class:"step-description",id:u},p(d)))),t?r("hr",null):"")}render(){const{stepCount:t,scrollEnabled:e,showScrollLeft:o,showScrollRight:s}=this,a=["step-container"];return e&&a.push("has-scroll"),r(i,null,r("div",{class:a.join(" ")},e&&r(i,null,r("div",{class:"gradient-left",hidden:!o}),r("div",{class:"gradient-right",hidden:!s}),r("q2-btn",{class:"btn-left",hidden:!this.showScrollLeft,onClick:()=>this.onScrollBtnClick("left")},r("q2-icon",{type:"chevron-left"})),r("q2-btn",{class:"btn-right",hidden:!this.showScrollRight,onClick:()=>this.onScrollBtnClick("right")},r("q2-icon",{type:"chevron-right"}))),r("ul",{onScroll:this.checkScrollState,ref:t=>this.listElement=t,role:"tablist"},[...Array(t).keys()].map((t=>this.renderStepBtn(t))))),r("div",null,r("slot",{onSlotchange:()=>this.onSlotChange()})))}get hostElement(){return o(this)}static get watchers(){return{currentStep:["currentStepChanged"]}}};n.style='*{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;position:relative}ul{--comp-bullet-bg:var(--tct-stepper-bullet-active-bg, var(--t-stepper-bullet-active-bg, var(--t-primary, #0079c1)));--comp-bullet-font-color:var(--tct-stepper-bullet-active-font-color, var(--t-stepper-bullet-active-font-color, var(--t-primary-font-color, #ffffff)));--comp-bullet-size:var(--tct-stepper-bullet-size, var(--t-stepper-bullet-size, 18px));--comp-bullet-gap:var(--tct-stepper-bullet-padding, var(--t-stepper-bullet-padding, var(--app-scale-2x, 10px)));--comp-bullet-border-offset:var(--tct-stepper-bullet-border-offset, var(--t-stepper-bullet-border-offset, 4px));--comp-bullet-border:var(--tct-stepper-bullet-border, var(--t-stepper-bullet-border, 2px solid var(--t-primary-l3)));--comp-bullet-font-size:var(--tct-stepper-bullet-font-size, var(--t-stepper-bullet-font-size, var(--app-font-size-small, 12px)));--comp-step-width:var(--tct-stepper-step-width, var(--t-stepper-step-width, var(--t-stepper-step-width, 80px)));--comp-step-gap:var(--tct-stepper-step-gap, var(--t-stepper-step-gap, 5px));--comp-tween:var(--tct-stepper-tween, var(--t-stepper-tween, var(--app-tween-1, 0.2s ease)));overflow-x:auto;display:flex;justify-content:center;list-style:none;padding:0;padding:var(--tct-stepper-list-padding, var(--t-stepper-list-padding, 2px));margin:0;gap:var(--comp-step-gap);--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}ul::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}ul::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}ul::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.has-scroll ul{justify-content:unset}li{min-height:var(--tct-stepper-min-height, var(--t-stepper-min-height, 50px));flex:0 0 auto;position:relative;width:var(--comp-step-width);text-align:center;max-width:150px;min-width:80px}.step-btn{position:relative;background:transparent;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;height:calc(100% - 4px);width:100%;transition:var(--comp-tween);padding:0;transition-property:box-shadow;outline:none}.step-btn[aria-disabled]{cursor:default}.step-btn[aria-disabled],.step-btn[aria-disabled]+hr{--comp-bullet-font-color:var(--tct-stepper-bullet-inactive-font-color, var(--t-stepper-bullet-inactive-font-color, var(--t-text, #4d4d4d)));--comp-bullet-bg:var(--tct-stepper-bullet-inactive-bg, var(--t-stepper-bullet-inactive-bg, var(--t-gray12, #d9d9d9)))}.step-bubble{margin:var(--comp-bullet-gap) auto;background:var(--comp-bullet-bg);color:var(--comp-bullet-font-color);width:var(--comp-bullet-size);height:var(--comp-bullet-size);min-height:var(--comp-bullet-size);font-size:var(--comp-bullet-font-size);transition:var(--comp-tween);transition-property:background, color;border-radius:50%;position:relative}[aria-selected] .step-bubble{font-weight:var(--tct-stepper-bullet-active-font-weight, var(--t-stepper-bullet-active-font-weight, 600))}[aria-selected] .step-bubble:before{content:"";position:absolute;inset:calc(var(--comp-bullet-border-offset) * -1);width:calc(var(--comp-bullet-size) + var(--comp-bullet-border-offset));height:calc(var(--comp-bullet-size) + var(--comp-bullet-border-offset));border-radius:50%;border:var(--comp-bullet-border)}hr{width:calc( var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size) );top:calc(calc(var(--comp-bullet-size) / 2) + var(--comp-bullet-gap));left:calc(calc(var(--comp-step-width) * -0.5) + var(--comp-step-gap) + var(--comp-bullet-gap));border:0;border-top:1px solid var(--comp-bullet-bg);height:0;position:absolute;margin:0;transition:border var(--comp-tween)}.step-container{position:relative}.step-label{color:var(--tct-stepper-title-color, var(--t-stepper-title-color, var(--t-text, #4d4d4d)));font-size:var(--tct-stepper-title-font-size, var(--t-stepper-title-font-size, var(--app-font-size-small, 12px)));height:1.5em;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}[aria-selected] .step-label{font-weight:var(--tct-stepper-active-font-weight, var(--t-stepper-active-font-weight, 600))}[aria-describedby] .step-label{-webkit-line-clamp:1}.step-description{color:var(--tct-stepper-description-color, var(--t-stepper-description-color, var(--t-textA, rgba(77, 77, 77, 0.77))));font-size:var(--tct-stepper-description-font-size, var(--t-stepper-description-font-size, var(--app-font-size-small, 12px)));text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;padding-bottom:0.2em}.gradient-left,.gradient-right{z-index:1;position:absolute;top:0;height:100%;width:18px}.gradient-left{background-image:linear-gradient(to right, var(--t-base), var(--t-base-a0));left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0), var(--t-base));right:0}.btn-left,.btn-right{--tct-icon-size:18px;--tct-btn-icon-hover-bg:transparent;--tct-btn-icon-width:22px;--tct-icon-stroke-primary:var(--tct-stepper-scroll-arrow-color, var(--t-stepper-scroll-arrow-color, var(--t-text, #4d4d4d)));position:absolute;top:calc(50% - 22px);z-index:2}.btn-left{left:0}.btn-right{right:0}';export{n as q2_stepper}
1
+ import{r as t,c as e,h as r,F as i,g as o}from"./p-080839ed.js";import{b as s,o as a,i as l,l as p}from"./p-c3d68d5c.js";s();const n=class{constructor(r){t(this,r),this.change=e(this,"change",7),this.currentStep=1,this.scrollEnabled=!1,this.showScrollLeft=!1,this.showScrollRight=!1,this.scheduledAfterRender=[],this.onSlotChange=()=>{this.checkForPanes(),this.checkScrollState()},this.onScrollBtnClick=t=>{const e=Math.floor(this.listElement.clientWidth/2);this.listElement.scrollBy({left:"left"===t?-e:e,behavior:"smooth"})},this.onStepClick=(t,e)=>{t.stopPropagation();const{currentStep:r,stepCount:i,lastEnabledStep:o}=this;e>o||e===r||this.change.emit({selectedStep:e,lastEnabledStep:o,currentStep:r,stepCount:i})},this.onStepKeyDown=(t,e)=>{const{lastEnabledStep:r,stepCount:i}=this,{key:o}=t;let s;switch(o){case"ArrowLeft":t.preventDefault(),s=Math.max(e-1,0);break;case"ArrowRight":t.preventDefault(),s=Math.min(e+1,i);break;case"Home":t.preventDefault(),s=1;break;case"End":t.preventDefault(),s=r}s&&this.focusStep(s,!0)},this.checkForPanes=()=>{const{allPanes:t}=this;t.length&&(this.stepCount=t.length)},this.checkScrollState=()=>{if(!this.listElement)return;const{scrollLeft:t,scrollWidth:e,clientWidth:r}=this.listElement;this.scrollEnabled=e>r,this.showScrollLeft=!!t,this.showScrollRight=e!==t+r}}componentWillLoad(){this.lastEnabledStep||(this.lastEnabledStep=this.currentStep||1),this.resizeObserver=new ResizeObserver((()=>this.checkScrollState())),this.checkForPanes()}componentDidLoad(){this.resizeObserver.observe(this.listElement),this.checkScrollState(),a(this.hostElement),setTimeout((()=>this.showStep(this.currentStep||1)),0)}componentDidRender(){this.scheduledAfterRender.forEach((t=>t())),this.scheduledAfterRender=[]}disconnectedCallback(){this.resizeObserver.disconnect()}currentStepChanged(t){this.showStep(t)}defaultChangeHandler(t){const{hostElement:e}=this;t.target===e&&!e.getAttribute("onchange")&&t.detail&&(this.currentStep=t.detail.selectedStep)}delegateFocus(t){l(t,this.hostElement)&&this.focusStep(this.currentStep,!0,!0)}get allPanes(){return this.hostElement.querySelectorAll("q2-stepper-pane")}showStep(t){if(t>this.lastEnabledStep){const{currentStep:e,stepCount:r}=this;this.lastEnabledStep=t,this.change.emit({selectedStep:null,lastEnabledStep:t,currentStep:e,stepCount:r})}this.scheduledAfterRender.push(this.resizeIframe),this.showStepPane(t),this.focusStep(t,this.scrollEnabled)}resizeIframe(){var t;return null===(t=null===window||void 0===window?void 0:window.TectonElements)||void 0===t?void 0:t.resizeIframe()}showStepPane(t){this.allPanes.forEach(((e,r)=>{e.isActive=t===r+1}))}focusStep(t,e,r){var i;const o=this.listElement.children[t-1],s=document.activeElement===this.hostElement;o&&((s||r)&&(null===(i=o.firstElementChild)||void 0===i||i.focus()),e)&&this.listElement.scrollTo({left:o.offsetLeft-this.listElement.clientWidth/2,behavior:"smooth"})}renderStepBtn(t){var e;const{allPanes:o,stepCount:s,currentStep:a,lastEnabledStep:l}=this,{id:n,label:c,description:d}=null!==(e=null==o?void 0:o[t])&&void 0!==e?e:{},b=t+1,h=b===a,v=c&&`label-${n}`,u=c&&d&&`description-${n}`,g=!c&&p("tecton.element.stepper.number",[`${b}`,`${s}`]);return r("li",{role:"presentation"},r("button",{class:"step-btn",type:"button","aria-labelledby":v,"aria-describedBy":u,"aria-label":g,"aria-selected":h,"aria-controls":n,"aria-disabled":b>l?"true":null,role:"tab",tabIndex:h?0:-1,onKeyDown:t=>this.onStepKeyDown(t,b),onClick:t=>this.onStepClick(t,b)},r("div",{class:"step-bubble"},b),c&&r(i,null,r("div",{class:"step-label",id:v},p(c)),d&&r("div",{class:"step-description",id:u},p(d)))),t?r("hr",null):"")}render(){const{stepCount:t,scrollEnabled:e,showScrollLeft:o,showScrollRight:s}=this,a=["step-container"];return e&&a.push("has-scroll"),r(i,null,r("div",{class:a.join(" ")},e&&r(i,null,r("div",{class:"gradient-left",hidden:!o}),r("div",{class:"gradient-right",hidden:!s}),r("q2-btn",{class:"btn-left",hidden:!this.showScrollLeft,onClick:()=>this.onScrollBtnClick("left")},r("q2-icon",{type:"chevron-left"})),r("q2-btn",{class:"btn-right",hidden:!this.showScrollRight,onClick:()=>this.onScrollBtnClick("right")},r("q2-icon",{type:"chevron-right"}))),r("ul",{onScroll:this.checkScrollState,ref:t=>this.listElement=t,role:"tablist"},[...Array(t).keys()].map((t=>this.renderStepBtn(t))))),r("div",null,r("slot",{onSlotchange:()=>this.onSlotChange()})))}get hostElement(){return o(this)}static get watchers(){return{currentStep:["currentStepChanged"]}}};n.style='*{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;position:relative}ul{--comp-bullet-bg:var(--tct-stepper-bullet-active-bg, var(--t-stepper-bullet-active-bg, var(--t-primary, #0079c1)));--comp-bullet-font-color:var(--tct-stepper-bullet-active-font-color, var(--t-stepper-bullet-active-font-color, var(--t-primary-font-color, #ffffff)));--comp-bullet-size:var(--tct-stepper-bullet-size, var(--t-stepper-bullet-size, 18px));--comp-bullet-gap:var(--tct-stepper-bullet-padding, var(--t-stepper-bullet-padding, var(--app-scale-2x, 10px)));--comp-bullet-border-offset:var(--tct-stepper-bullet-border-offset, var(--t-stepper-bullet-border-offset, 4px));--comp-bullet-border:var(--tct-stepper-bullet-border, var(--t-stepper-bullet-border, 2px solid var(--t-primary-l3)));--comp-bullet-font-size:var(--tct-stepper-bullet-font-size, var(--t-stepper-bullet-font-size, var(--app-font-size-small, 12px)));--comp-step-width:var(--tct-stepper-step-width, var(--t-stepper-step-width, var(--t-stepper-step-width, 80px)));--comp-step-gap:var(--tct-stepper-step-gap, var(--t-stepper-step-gap, 5px));--comp-tween:var(--tct-stepper-tween, var(--t-stepper-tween, var(--app-tween-1, 0.2s ease)));overflow-x:auto;display:flex;justify-content:center;list-style:none;padding:0;padding:var(--tct-stepper-list-padding, var(--t-stepper-list-padding, 2px));margin:0;gap:var(--comp-step-gap);--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}ul::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}ul::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}ul::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.has-scroll ul{justify-content:unset}li{min-height:var(--tct-stepper-min-height, var(--t-stepper-min-height, 50px));flex:0 0 auto;position:relative;width:var(--comp-step-width);text-align:center;max-width:150px;min-width:80px}.step-btn{position:relative;background:transparent;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;height:calc(100% - 4px);width:100%;transition:var(--comp-tween);padding:0;transition-property:box-shadow;outline:none}.step-btn[aria-disabled]{cursor:default}.step-btn[aria-disabled],.step-btn[aria-disabled]+hr{--comp-bullet-font-color:var(--tct-stepper-bullet-inactive-font-color, var(--t-stepper-bullet-inactive-font-color, var(--t-text, #4d4d4d)));--comp-bullet-bg:var(--tct-stepper-bullet-inactive-bg, var(--t-stepper-bullet-inactive-bg, var(--t-gray-12, #d9d9d9)))}.step-bubble{margin:var(--comp-bullet-gap) auto;background:var(--comp-bullet-bg);color:var(--comp-bullet-font-color);width:var(--comp-bullet-size);height:var(--comp-bullet-size);min-height:var(--comp-bullet-size);font-size:var(--comp-bullet-font-size);transition:var(--comp-tween);transition-property:background, color;border-radius:50%;position:relative}[aria-selected] .step-bubble{font-weight:var(--tct-stepper-bullet-active-font-weight, var(--t-stepper-bullet-active-font-weight, 600))}[aria-selected] .step-bubble:before{content:"";position:absolute;inset:calc(var(--comp-bullet-border-offset) * -1);width:calc(var(--comp-bullet-size) + var(--comp-bullet-border-offset));height:calc(var(--comp-bullet-size) + var(--comp-bullet-border-offset));border-radius:50%;border:var(--comp-bullet-border)}hr{width:calc( var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size) );top:calc(calc(var(--comp-bullet-size) / 2) + var(--comp-bullet-gap));left:calc(calc(var(--comp-step-width) * -0.5) + var(--comp-step-gap) + var(--comp-bullet-gap));border:0;border-top:1px solid var(--comp-bullet-bg);height:0;position:absolute;margin:0;transition:border var(--comp-tween)}.step-container{position:relative}.step-label{color:var(--tct-stepper-title-color, var(--t-stepper-title-color, var(--t-text, #4d4d4d)));font-size:var(--tct-stepper-title-font-size, var(--t-stepper-title-font-size, var(--app-font-size-small, 12px)));height:1.5em;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}[aria-selected] .step-label{font-weight:var(--tct-stepper-active-font-weight, var(--t-stepper-active-font-weight, 600))}[aria-describedby] .step-label{-webkit-line-clamp:1}.step-description{color:var(--tct-stepper-description-color, var(--t-stepper-description-color, var(--t-textA, rgba(77, 77, 77, 0.77))));font-size:var(--tct-stepper-description-font-size, var(--t-stepper-description-font-size, var(--app-font-size-small, 12px)));text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;padding-bottom:0.2em}.gradient-left,.gradient-right{z-index:1;position:absolute;top:0;height:100%;width:18px}.gradient-left{background-image:linear-gradient(to right, var(--t-base), var(--t-base-a0));left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0), var(--t-base));right:0}.btn-left,.btn-right{--tct-icon-size:18px;--tct-btn-icon-hover-bg:transparent;--tct-btn-icon-width:22px;--tct-icon-stroke-primary:var(--tct-stepper-scroll-arrow-color, var(--t-stepper-scroll-arrow-color, var(--t-text, #4d4d4d)));position:absolute;top:calc(50% - 22px);z-index:2}.btn-left{left:0}.btn-right{right:0}';export{n as q2_stepper}
@@ -1 +1 @@
1
- import{p as e,b as a}from"./p-080839ed.js";(()=>{const a=import.meta.url,l={};return""!==a&&(l.resourcesUrl=new URL(".",a).href),e(l)})().then((e=>a([["p-88bc2f49",[[1,"q2-icon",{type:[513],label:[513]}]]],["p-a72e7a12",[[1,"q2-calendar",{value:[1537],label:[513],hideLabel:[516,"hide-label"],ariaLabel:[513,"aria-label"],optional:[516],disabled:[516],readonly:[516],invalid:[1540],typeable:[516],placeholder:[513],buttonLabel:[513,"button-label"],disabledMsg:[513,"disabled-msg"],calendarLabel:[513,"calendar-label"],disclaimer:[513],displayFormat:[513,"display-format"],startDate:[513,"start-date"],endDate:[513,"end-date"],cutoffTime:[513,"cutoff-time"],daysOfWeekChecksum:[514,"days-of-week-checksum"],popDirection:[513,"pop-direction"],assume:[513],errors:[1040],invalidDates:[16],validDates:[16],onsuccess:[16],dropdownOpen:[32],keyboardSelection:[32],typedValue:[32],dateList:[32],hintMessage:[32],hintMessageType:[32]},[[0,"change","defaultChangeHandler"],[0,"error","defaultErrorHandler"],[0,"success","defaultSuccessHandler"],[0,"focus","delegateFocus"]]]]],["p-f85bf7fb",[[1,"q2-dropdown",{type:[513],icon:[513],label:[513],hideLabel:[516,"hide-label"],ariaLabel:[513,"aria-label"],disabled:[516],popDirection:[513,"pop-direction"],name:[513],context:[513],contextValue:[513,"context-value"],resolvedType:[513,"resolved-type"],dropdownOpen:[32]},[[0,"focus","delegateFocus"]]]]],["p-564154f3",[[1,"q2-select",{label:[513],hideLabel:[516,"hide-label"],value:[1025],ariaLabel:[513,"aria-label"],selectedOptions:[1032,"selected-options"],disabled:[516],readonly:[516],invalid:[516],errors:[16],multiple:[516],minRows:[2,"min-rows"],popDirection:[513,"pop-direction"],searchable:[516],multilineOptions:[516,"multiline-options"],optional:[516],dropdownOpen:[32],onlyShowingSelected:[32],activeOptionId:[32],searchText:[32],hasCustomDisplay:[32],inputFocused:[32],statusMessage:[32]},[[0,"change","onHostElementChange"],[0,"input","onHostElementInput"],[0,"focus","delegateFocus"],[0,"click","clickHandler"],[0,"keydown","keydownHandler"]]]]],["p-c83dba0a",[[1,"q2-editable-field",{value:[1537],editing:[1540],label:[1537],hideLabel:[1540,"hide-label"],ariaLabel:[1537,"aria-label"],type:[513],formatModifier:[513,"format-modifier"],truncated:[513],maxlength:[514],persistentLabel:[516,"persistent-label"],hints:[16],errors:[16]},[[0,"change","onHostElementChange"],[0,"focus","delegateFocus"]]]]],["p-346b65d5",[[1,"q2-pagination",{recordType:[1,"record-type"],perPage:[2,"per-page"],total:[514],page:[1538],pages:[1538],recordsOnly:[1540,"records-only"],pagesOnly:[1540,"pages-only"],isSmall:[32]},[[0,"focus","onHostElementFocus"]]]]],["p-bfd77f9b",[[4,"q2-carousel",{autoPlay:[516,"auto-play"],fullWidthPanes:[516,"full-width-panes"],hidePagination:[516,"hide-pagination"],showNavigationArrows:[516,"show-navigation-arrows"],ariaLabel:[513,"aria-label"],label:[513],index:[1538],universalCarouselOptions:[32],fullWidthDisplayOptions:[32],activePaneIndex:[32],applyFocus:[32],applyPaginationFocus:[32],autoPlayInProgress:[32],compactMode:[32],carouselWrapperWidth:[32]},[[0,"change","onHostElementChange"],[0,"clickCarouselPane","carouselPaneClicked"],[0,"focus","delegateFocus"]]]]],["p-701b381a",[[1,"q2-section",{label:[513],collapsible:[516],noCollapseIcon:[516,"no-collapse-icon"],expanded:[1540],contentHeight:[32],hasYieldedHeader:[32]},[[0,"change","defaultChangeHandler"],[0,"focus","delegateFocus"]]]]],["p-b5b12e46",[[1,"q2-stepper",{currentStep:[1538,"current-step"],stepCount:[1026,"step-count"],lastEnabledStep:[1026,"last-enabled-step"],scrollEnabled:[32],showScrollLeft:[32],showScrollRight:[32]},[[0,"change","defaultChangeHandler"],[0,"focus","delegateFocus"]]]]],["p-dffbcec3",[[1,"q2-tab-container",{value:[1537],type:[513],name:[513],color:[513],noPrint:[516,"no-print"],hasLeft:[32],hasRight:[32],scrollEnabled:[32],showScrollLeft:[32],showScrollRight:[32],tabs:[32]},[[0,"change","defaultChangeHandler"],[9,"resize","onResize"],[0,"focus","onFocus"]]]]],["p-27ec0a16",[[1,"q2-card",{title:[513],description:[513],avatarName:[513,"avatar-name"],avatarInitials:[513,"avatar-initials"],avatarIcon:[513,"avatar-icon"],avatarSrc:[513,"avatar-src"],isSmall:[516,"is-small"],isTouch:[516,"is-touch"],url:[513],target:[513],isAutoTouch:[32],isAutoSmall:[32]},[[0,"focus","onHostElementFocus"]]]]],["p-841ec108",[[1,"q2-checkbox",{checked:[1540],type:[513],label:[513],hideLabel:[516,"hide-label"],ariaLabel:[513,"aria-label"],indeterminate:[516],disabled:[516],readonly:[516],value:[513],name:[513],hasError:[516,"has-error"],groupDisabled:[516,"group-disabled"],alignment:[513]},[[0,"change","defaultChangeHandler"],[0,"focus","delegateFocus"]]]]],["p-ca847db7",[[1,"q2-checkbox-group",{label:[513],value:[1040],disabled:[516],readonly:[516],optional:[516],hasError:[516,"has-error"]},[[0,"change","onHostElementChange"]]]]],["p-6702eb4d",[[1,"q2-option",{role:[513],tabindex:[513],display:[513],value:[513],disabled:[516],optionId:[513,"option-id"],disabledGroup:[516,"disabled-group"],selected:[516],hidden:[516],multiline:[516],active:[516],_multiSelectHidden:[516,"_multiselecthidden"]}]]],["p-3479847c",[[1,"q2-radio-group",{label:[513],value:[1025],disabled:[516],name:[513],optional:[516],readonly:[516],tilelayout:[516],tileAlignment:[513,"tile-alignment"],hasError:[516,"has-error"]},[[0,"change","onHostElementChange"],[0,"focus","delegateFocus"],[0,"keydown","keydownHandler"]]]]],["p-9ccbc3d8",[[1,"q2-textarea",{value:[1025],label:[513],hideLabel:[516,"hide-label"],hideMessages:[516,"hide-messages"],optional:[516],placeholder:[513],disabled:[516],readonly:[516],spellcheck:[516],maxlength:[1538],rows:[514],cols:[514],resize:[513],errors:[16],hints:[16],hasFocus:[32],downParams:[32]},[[0,"focus","onHostElementFocus"],[0,"change","onHostElementChange"]]]]],["p-6a83a97c",[[4,"q2-carousel-pane",{index:[2],siblingCount:[2,"sibling-count"],isActivePane:[516,"is-active-pane"],label:[513]}]]],["p-32ad664c",[[0,"q2-loading-element",{shape:[513],width:[513],height:[513],borderRadius:[513,"border-radius"]}]]],["p-2be33492",[[1,"q2-loc",{value:[513],substitutions:[16]}]]],["p-fe61c1aa",[[1,"q2-optgroup",{disabled:[516],label:[513],hidden:[32]}]]],["p-f435dc7e",[[1,"q2-radio",{label:[513],hideLabel:[516,"hide-label"],value:[513],disabled:[516],checked:[516],name:[513],ariaLabel:[513,"aria-label"],groupDisabled:[4,"group-disabled"],groupReadonly:[4,"group-readonly"],groupTileLayout:[4,"group-tile-layout"]},[[0,"click","onHostClick"],[0,"focus","delegateFocus"]]]]],["p-492dfb55",[[1,"q2-stepper-pane",{label:[513],description:[513],isActive:[516,"is-active"]}]]],["p-750bcd33",[[1,"q2-tab-pane",{value:[513],label:[513],name:[513],selected:[516],index:[2],guid:[2]}]]],["p-8ea2c4f7",[[1,"tecton-tab-pane",{value:[513],label:[513],name:[513],selected:[516],index:[2],guid:[2],provided:[516],url:[513],moduleId:[513,"module-id"],minHeight:[513,"min-height"],authPayload:[16],showForm:[4,"show-form"],_showForm:[32]}]]],["p-2372f988",[[1,"q2-dropdown-item",{disabled:[516],removable:[516],separator:[516],label:[513],ariaLabel:[513,"aria-label"],value:[513]},[[0,"focus","onHostElementFocus"]]]]],["p-af202624",[[1,"q2-avatar",{name:[513],initials:[513],src:[513],icon:[1],badSrc:[32]}]]],["p-d199fca8",[[1,"q2-message",{type:[513],appearance:[513],description:[516],presentToggle:[32],present:[64]},[[0,"focus","delegateFocus"]]]]],["p-9024859f",[[0,"click-elsewhere"]]],["p-f73df612",[[1,"q2-btn",{ariaExpanded:[4,"aria-expanded"],ariaHasPopup:[8,"aria-has-popup"],ariaControls:[1,"aria-controls"],ariaSelected:[4,"aria-selected"],label:[513],hideLabel:[516,"hide-label"],ariaLabel:[513,"aria-label"],tabIndex:[2,"tab-index"],intent:[513],disabled:[516],type:[513],loading:[516],badge:[516],active:[516],fab:[516],iconPosition:[32]},[[2,"click","disable"],[0,"focus","delegateFocus"]]],[1,"q2-loading",{type:[513],shape:[513],modifiers:[513],counts:[513],label:[513],ariaLabel:[513,"aria-label"],inline:[516]}]]],["p-fc318ae2",[[1,"q2-input",{value:[1025],label:[513],hideLabel:[516,"hide-label"],type:[513],placeholder:[513],disabled:[516],autocomplete:[513],autocorrect:[513],autocapitalize:[513],hideMessages:[516,"hide-messages"],iconLeft:[513,"icon-left"],iconRight:[513,"icon-right"],readonly:[516],clearable:[516],optional:[516],min:[514],max:[514],formatModifier:[513,"format-modifier"],maxlength:[1538],pseudo:[516],showVisibilityToggle:[516,"show-visibility-toggle"],textHidden:[1540,"text-hidden"],ariaControls:[1,"aria-controls"],role:[1],ariaOwns:[1,"aria-owns"],ariaLabel:[513,"aria-label"],ariaHaspopup:[1,"aria-haspopup"],ariaExpanded:[4,"aria-expanded"],ariaActivedescendant:[8,"aria-activedescendant"],current:[1],errors:[16],hints:[16],formattedValueObject:[32],hasFocus:[32]},[[0,"focus","onHostElementFocus"],[0,"change","onHostElementChange"]]]]]],e)));
1
+ import{p as e,b as a}from"./p-080839ed.js";(()=>{const a=import.meta.url,l={};return""!==a&&(l.resourcesUrl=new URL(".",a).href),e(l)})().then((e=>a(JSON.parse('[["p-c5199147",[[1,"q2-icon",{"type":[513],"label":[513]}]]],["p-2afdc922",[[1,"q2-calendar",{"value":[1537],"label":[513],"hideLabel":[516,"hide-label"],"ariaLabel":[513,"aria-label"],"optional":[516],"disabled":[516],"readonly":[516],"invalid":[1540],"typeable":[516],"placeholder":[513],"buttonLabel":[513,"button-label"],"disabledMsg":[513,"disabled-msg"],"calendarLabel":[513,"calendar-label"],"disclaimer":[513],"displayFormat":[513,"display-format"],"startDate":[513,"start-date"],"endDate":[513,"end-date"],"cutoffTime":[513,"cutoff-time"],"daysOfWeekChecksum":[514,"days-of-week-checksum"],"popDirection":[513,"pop-direction"],"assume":[513],"errors":[1040],"invalidDates":[16],"validDates":[16],"onsuccess":[16],"dropdownOpen":[32],"keyboardSelection":[32],"typedValue":[32],"dateList":[32],"hintMessage":[32],"hintMessageType":[32]},[[0,"change","defaultChangeHandler"],[0,"error","defaultErrorHandler"],[0,"success","defaultSuccessHandler"],[0,"focus","delegateFocus"]]]]],["p-34415315",[[1,"q2-dropdown",{"type":[513],"icon":[513],"label":[513],"hideLabel":[516,"hide-label"],"ariaLabel":[513,"aria-label"],"disabled":[516],"popDirection":[513,"pop-direction"],"name":[513],"context":[513],"contextValue":[513,"context-value"],"resolvedType":[513,"resolved-type"],"dropdownOpen":[32]},[[0,"focus","delegateFocus"]]]]],["p-5effd81a",[[1,"q2-select",{"label":[513],"hideLabel":[516,"hide-label"],"value":[1025],"ariaLabel":[513,"aria-label"],"selectedOptions":[1032,"selected-options"],"disabled":[516],"readonly":[516],"invalid":[516],"errors":[16],"multiple":[516],"minRows":[2,"min-rows"],"popDirection":[513,"pop-direction"],"searchable":[516],"multilineOptions":[516,"multiline-options"],"optional":[516],"dropdownOpen":[32],"onlyShowingSelected":[32],"activeOptionId":[32],"searchText":[32],"hasCustomDisplay":[32],"inputFocused":[32],"statusMessage":[32]},[[0,"change","onHostElementChange"],[0,"input","onHostElementInput"],[0,"focus","delegateFocus"],[0,"click","clickHandler"],[0,"keydown","keydownHandler"]]]]],["p-a0248299",[[1,"q2-editable-field",{"value":[1537],"editing":[1540],"label":[1537],"hideLabel":[1540,"hide-label"],"ariaLabel":[1537,"aria-label"],"type":[513],"formatModifier":[513,"format-modifier"],"truncated":[513],"maxlength":[514],"persistentLabel":[516,"persistent-label"],"hints":[16],"errors":[16]},[[0,"change","onHostElementChange"],[0,"focus","delegateFocus"]]]]],["p-91dba21f",[[1,"q2-pagination",{"recordType":[1,"record-type"],"perPage":[2,"per-page"],"total":[514],"page":[1538],"pages":[1538],"recordsOnly":[1540,"records-only"],"pagesOnly":[1540,"pages-only"],"isSmall":[32]},[[0,"focus","onHostElementFocus"]]]]],["p-b9c2c1d3",[[4,"q2-carousel",{"autoPlay":[516,"auto-play"],"fullWidthPanes":[516,"full-width-panes"],"hidePagination":[516,"hide-pagination"],"showNavigationArrows":[516,"show-navigation-arrows"],"ariaLabel":[513,"aria-label"],"label":[513],"index":[1538],"universalCarouselOptions":[32],"fullWidthDisplayOptions":[32],"activePaneIndex":[32],"applyFocus":[32],"applyPaginationFocus":[32],"autoPlayInProgress":[32],"compactMode":[32],"carouselWrapperWidth":[32]},[[0,"change","onHostElementChange"],[0,"clickCarouselPane","carouselPaneClicked"],[0,"focus","delegateFocus"]]]]],["p-d9bc6494",[[1,"q2-section",{"label":[513],"collapsible":[516],"noCollapseIcon":[516,"no-collapse-icon"],"expanded":[1540],"contentHeight":[32],"hasYieldedHeader":[32]},[[0,"change","defaultChangeHandler"],[0,"focus","delegateFocus"]]]]],["p-fe6407a4",[[1,"q2-stepper",{"currentStep":[1538,"current-step"],"stepCount":[1026,"step-count"],"lastEnabledStep":[1026,"last-enabled-step"],"scrollEnabled":[32],"showScrollLeft":[32],"showScrollRight":[32]},[[0,"change","defaultChangeHandler"],[0,"focus","delegateFocus"]]]]],["p-df86f160",[[1,"q2-tab-container",{"value":[1537],"type":[513],"name":[513],"color":[513],"noPrint":[516,"no-print"],"hasLeft":[32],"hasRight":[32],"scrollEnabled":[32],"showScrollLeft":[32],"showScrollRight":[32],"tabs":[32]},[[0,"change","defaultChangeHandler"],[9,"resize","onResize"],[0,"focus","onFocus"]]]]],["p-7ce98c1a",[[1,"q2-card",{"title":[513],"description":[513],"avatarName":[513,"avatar-name"],"avatarInitials":[513,"avatar-initials"],"avatarIcon":[513,"avatar-icon"],"avatarSrc":[513,"avatar-src"],"isSmall":[516,"is-small"],"isTouch":[516,"is-touch"],"url":[513],"target":[513],"isAutoTouch":[32],"isAutoSmall":[32]},[[0,"focus","onHostElementFocus"]]]]],["p-e9d69ba8",[[1,"q2-pill",{"disabled":[516],"active":[1540],"open":[1540],"multiple":[516],"label":[513],"value":[513],"theme":[513],"selectedOptions":[1040],"hasOptions":[32]},[[0,"focus","delegateFocus"],[0,"optionListState","optionListStateEvent"]]]]],["p-5b906cf1",[[1,"q2-tag",{"open":[1540],"role":[513],"label":[513],"theme":[513],"hasOptions":[32]},[[0,"focus","delegateFocus"],[0,"optionListState","optionListStateEvent"]]]]],["p-c460e5ed",[[1,"q2-checkbox",{"checked":[1540],"type":[513],"label":[513],"hideLabel":[516,"hide-label"],"ariaLabel":[513,"aria-label"],"indeterminate":[516],"disabled":[516],"readonly":[516],"value":[513],"name":[513],"hasError":[516,"has-error"],"groupDisabled":[516,"group-disabled"],"alignment":[513]},[[0,"change","defaultChangeHandler"],[0,"focus","delegateFocus"]]]]],["p-08668234",[[1,"q2-checkbox-group",{"label":[513],"value":[1040],"disabled":[516],"readonly":[516],"optional":[516],"hasError":[516,"has-error"]},[[0,"change","onHostElementChange"]]]]],["p-167a19fd",[[1,"q2-option",{"role":[513],"tabindex":[513],"display":[513],"value":[513],"disabled":[516],"optionId":[513,"option-id"],"disabledGroup":[516,"disabled-group"],"selected":[516],"hidden":[516],"multiline":[516],"active":[516],"noSelect":[516,"_no-select"],"_multiSelectHidden":[516,"_multiselecthidden"]}]]],["p-54300d2f",[[1,"q2-radio-group",{"label":[513],"value":[1025],"disabled":[516],"name":[513],"optional":[516],"readonly":[516],"tilelayout":[516],"tileAlignment":[513,"tile-alignment"],"hasError":[516,"has-error"]},[[0,"change","onHostElementChange"],[0,"focus","delegateFocus"],[0,"keydown","keydownHandler"]]]]],["p-d3058002",[[1,"q2-textarea",{"value":[1025],"label":[513],"hideLabel":[516,"hide-label"],"hideMessages":[516,"hide-messages"],"optional":[516],"placeholder":[513],"disabled":[516],"readonly":[516],"spellcheck":[516],"maxlength":[1538],"rows":[514],"cols":[514],"resize":[513],"errors":[16],"hints":[16],"hasFocus":[32],"downParams":[32]},[[0,"focus","onHostElementFocus"],[0,"change","onHostElementChange"]]]]],["p-fa9e3825",[[4,"q2-carousel-pane",{"index":[2],"siblingCount":[2,"sibling-count"],"isActivePane":[516,"is-active-pane"],"label":[513]}]]],["p-32ad664c",[[0,"q2-loading-element",{"shape":[513],"width":[513],"height":[513],"borderRadius":[513,"border-radius"]}]]],["p-0a7cff38",[[1,"q2-loc",{"value":[513],"substitutions":[16]}]]],["p-30bf5f44",[[1,"q2-optgroup",{"disabled":[516],"label":[513],"hidden":[32]}]]],["p-aca8302b",[[1,"q2-radio",{"label":[513],"hideLabel":[516,"hide-label"],"value":[513],"disabled":[516],"checked":[516],"name":[513],"ariaLabel":[513,"aria-label"],"groupDisabled":[4,"group-disabled"],"groupReadonly":[4,"group-readonly"],"groupTileLayout":[4,"group-tile-layout"]},[[0,"click","onHostClick"],[0,"focus","delegateFocus"]]]]],["p-c5e6f7fa",[[1,"q2-stepper-pane",{"label":[513],"description":[513],"isActive":[516,"is-active"]}]]],["p-750bcd33",[[1,"q2-tab-pane",{"value":[513],"label":[513],"name":[513],"selected":[516],"index":[2],"guid":[2]}]]],["p-8ea2c4f7",[[1,"tecton-tab-pane",{"value":[513],"label":[513],"name":[513],"selected":[516],"index":[2],"guid":[2],"provided":[516],"url":[513],"moduleId":[513,"module-id"],"minHeight":[513,"min-height"],"authPayload":[16],"showForm":[4,"show-form"],"_showForm":[32]}]]],["p-9a3c37ab",[[1,"q2-dropdown-item",{"disabled":[516],"removable":[516],"separator":[516],"label":[513],"ariaLabel":[513,"aria-label"],"value":[513]},[[0,"focus","onHostElementFocus"]]]]],["p-af202624",[[1,"q2-avatar",{"name":[513],"initials":[513],"src":[513],"icon":[1],"badSrc":[32]}]]],["p-f98dc161",[[1,"q2-message",{"type":[513],"appearance":[513],"description":[516],"presentToggle":[32],"present":[64]},[[0,"focus","delegateFocus"]]]]],["p-54f0d64e",[[1,"q2-option-list",{"role":[513],"direction":[513],"open":[1540],"customSearch":[516,"custom-search"],"noSelect":[516,"no-select"],"align":[513],"selectedOptions":[1040],"multiple":[516],"disabled":[516],"type":[1],"hasOptions":[32],"toggle":[64],"setDefaultActiveElement":[64],"setActiveElement":[64],"handleExternalKeydown":[64]},[[0,"focus","delegateFocus"],[0,"click","handleClick"]]]]],["p-9024859f",[[0,"click-elsewhere"]]],["p-e38080d2",[[1,"q2-btn",{"ariaExpanded":[4,"aria-expanded"],"ariaHasPopup":[8,"aria-has-popup"],"ariaControls":[1,"aria-controls"],"ariaSelected":[4,"aria-selected"],"label":[513],"hideLabel":[516,"hide-label"],"ariaLabel":[513,"aria-label"],"tabIndex":[2,"tab-index"],"intent":[513],"disabled":[516],"type":[513],"loading":[516],"badge":[516],"active":[516],"fab":[516],"iconPosition":[32]},[[2,"click","disable"],[0,"focus","delegateFocus"]]],[1,"q2-loading",{"type":[513],"shape":[513],"modifiers":[513],"counts":[513],"label":[513],"ariaLabel":[513,"aria-label"],"inline":[516]}]]],["p-d65aaed2",[[1,"q2-input",{"value":[1025],"label":[513],"hideLabel":[516,"hide-label"],"type":[513],"placeholder":[513],"disabled":[516],"autocomplete":[513],"autocorrect":[513],"autocapitalize":[513],"hideMessages":[516,"hide-messages"],"iconLeft":[513,"icon-left"],"iconRight":[513,"icon-right"],"readonly":[516],"clearable":[516],"optional":[516],"min":[514],"max":[514],"formatModifier":[513,"format-modifier"],"maxlength":[1538],"pseudo":[516],"showVisibilityToggle":[516,"show-visibility-toggle"],"textHidden":[1540,"text-hidden"],"ariaControls":[1,"aria-controls"],"role":[1],"ariaOwns":[1,"aria-owns"],"ariaLabel":[513,"aria-label"],"ariaHaspopup":[1,"aria-haspopup"],"ariaExpanded":[4,"aria-expanded"],"ariaActivedescendant":[8,"aria-activedescendant"],"current":[1],"errors":[16],"hints":[16],"formattedValueObject":[32],"hasFocus":[32]},[[0,"focus","onHostElementFocus"],[0,"change","onHostElementChange"]]]]]]'),e)));
@@ -0,0 +1,151 @@
1
+ import { setup, getFocusedAttribute } from '../helpers';
2
+ describe('q2-tag', () => {
3
+ let page;
4
+ let tag;
5
+ let optionList;
6
+ let controlBtn;
7
+ let allOptions;
8
+ let optionContainer;
9
+ let clickSpy;
10
+ let changeSpy;
11
+ const getFocusedValue = async (page) => {
12
+ return await page.$eval('body', () => document.activeElement.getAttribute('value'));
13
+ };
14
+ it('does not render button or dropdown by default', async () => {
15
+ page = await setup({
16
+ html: `<q2-tag label="My tag"></q2-tag>`
17
+ });
18
+ optionList = await page.find('q2-tag >>> q2-option-list');
19
+ controlBtn = await page.find('q2-tag >>> button');
20
+ expect(controlBtn).toBeNull();
21
+ expect(optionList).toBeNull();
22
+ });
23
+ describe('when options are provided', () => {
24
+ beforeEach(async () => {
25
+ page = await setup({
26
+ html: `
27
+ <q2-tag label="My tag">
28
+ <q2-option value="1">Option 1</q2-option>
29
+ <q2-option value="2">Option 2</q2-option>
30
+ <q2-option value="3">Option 3</q2-option>
31
+ </q2-tag>
32
+ `
33
+ });
34
+ tag = await page.find('q2-tag');
35
+ allOptions = await page.findAll('q2-option');
36
+ optionList = await page.find('q2-tag >>> q2-option-list');
37
+ optionContainer = await page.find('q2-tag >>> q2-option-list >>> .options');
38
+ controlBtn = await page.find('q2-tag >>> button');
39
+ clickSpy = await tag.spyOnEvent('click');
40
+ changeSpy = await tag.spyOnEvent('change');
41
+ });
42
+ it('can select option via keyboard', async () => {
43
+ const tagWrapper = await page.find('q2-tag >>> .tag-wrapper');
44
+ expect(tagWrapper.classList.contains('has-options')).toBe(true);
45
+ expect(optionList).not.toHaveAttribute('open');
46
+ await controlBtn.press('ArrowDown');
47
+ await page.waitForChanges();
48
+ expect(tag).toHaveAttribute('open');
49
+ expect(optionList).toHaveAttribute('open');
50
+ expect(await getFocusedValue(page)).toEqual('1');
51
+ await optionContainer.press('ArrowDown');
52
+ await page.waitForChanges();
53
+ expect(await getFocusedValue(page)).toEqual('2');
54
+ await allOptions[1].press(' ');
55
+ await page.waitForChanges();
56
+ expect(tag).not.toHaveAttribute('open');
57
+ expect(optionList).not.toHaveAttribute('open');
58
+ expect(clickSpy).toHaveReceivedEventDetail({
59
+ value: '2'
60
+ });
61
+ expect(changeSpy).not.toHaveReceivedEvent();
62
+ });
63
+ it('can select option via mouse', async () => {
64
+ const tagWrapper = await page.find('q2-tag >>> .tag-wrapper');
65
+ expect(tagWrapper.classList.contains('has-options')).toBe(true);
66
+ expect(optionList).not.toHaveAttribute('open');
67
+ await controlBtn.click();
68
+ await page.waitForChanges();
69
+ expect(tag).toHaveAttribute('open');
70
+ expect(optionList).toHaveAttribute('open');
71
+ await allOptions[1].click();
72
+ await page.waitForChanges();
73
+ expect(tag).not.toHaveAttribute('open');
74
+ expect(optionList).not.toHaveAttribute('open');
75
+ expect(clickSpy).toHaveReceivedEventDetail({
76
+ value: '2'
77
+ });
78
+ expect(changeSpy).not.toHaveReceivedEvent();
79
+ });
80
+ describe('when keyboard is pressed', () => {
81
+ it('opens list and focuses first option on ArrowDown', async () => {
82
+ await controlBtn.press('ArrowDown');
83
+ await page.waitForChanges();
84
+ expect(tag).toHaveAttribute('open');
85
+ expect(optionList).toHaveAttribute('open');
86
+ expect(await getFocusedAttribute(page, 'value')).toEqual('1');
87
+ });
88
+ it('opens list and focuses first option on ArrowUp', async () => {
89
+ await controlBtn.press('ArrowUp');
90
+ await page.waitForChanges();
91
+ expect(tag).toHaveAttribute('open');
92
+ expect(optionList).toHaveAttribute('open');
93
+ expect(await getFocusedAttribute(page, 'value')).toEqual('1');
94
+ });
95
+ it('opens list and focuses first option on Enter', async () => {
96
+ await controlBtn.press('Enter');
97
+ await page.waitForChanges();
98
+ expect(tag).toHaveAttribute('open');
99
+ expect(optionList).toHaveAttribute('open');
100
+ expect(await getFocusedAttribute(page, 'value')).toEqual('1');
101
+ });
102
+ it('opens list and focuses first option on Space', async () => {
103
+ await controlBtn.press(' ');
104
+ await page.waitForChanges();
105
+ expect(tag).toHaveAttribute('open');
106
+ expect(optionList).toHaveAttribute('open');
107
+ expect(await getFocusedValue(page)).toEqual('1');
108
+ });
109
+ it('opens list and focuses last option on Home', async () => {
110
+ await controlBtn.press('Home');
111
+ await page.waitForChanges();
112
+ expect(tag).toHaveAttribute('open');
113
+ expect(optionList).toHaveAttribute('open');
114
+ expect(await getFocusedAttribute(page, 'value')).toEqual('1');
115
+ });
116
+ it('opens list and focuses last option on End', async () => {
117
+ await controlBtn.press('End');
118
+ await page.waitForChanges();
119
+ expect(tag).toHaveAttribute('open');
120
+ expect(optionList).toHaveAttribute('open');
121
+ expect(await getFocusedAttribute(page, 'value')).toEqual('3');
122
+ });
123
+ });
124
+ });
125
+ describe('focus', () => {
126
+ let page;
127
+ let tag;
128
+ beforeEach(async () => {
129
+ page = await setup({
130
+ html: `
131
+ <q2-tag label="My tag">
132
+ <q2-option value="1">Option 1</q2-option>
133
+ <q2-option value="2">Option 2</q2-option>
134
+ <q2-option value="3">Option 3</q2-option>
135
+ </q2-tag>
136
+ `
137
+ });
138
+ tag = await page.find('q2-tag');
139
+ });
140
+ it('focuses active option and opens the list when focus event is dispatched', async function () {
141
+ await tag.triggerEvent('focus');
142
+ await page.waitForChanges();
143
+ expect(await getFocusedAttribute(page, 'test-id')).toEqual('btn-control');
144
+ });
145
+ it('focuses active option and opens the list when element.focus() is called', async function () {
146
+ await tag.focus();
147
+ await page.waitForChanges();
148
+ expect(await getFocusedAttribute(page, 'test-id')).toEqual('btn-control');
149
+ });
150
+ });
151
+ });
@@ -112,3 +112,10 @@ export const base64Image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAA
112
112
  export async function getActiveElementTestId(page) {
113
113
  return await page.$eval('body', () => { var _a, _b; return (_b = (_a = document.activeElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement.getAttribute('test-id')) !== null && _b !== void 0 ? _b : null; });
114
114
  }
115
+ export async function getFocusedAttribute(page, attribute) {
116
+ return await page.$eval('body', (_, attribute) => {
117
+ var _a, _b, _c;
118
+ const activeElement = (_b = (_a = document.activeElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) !== null && _b !== void 0 ? _b : document.activeElement;
119
+ return (_c = activeElement === null || activeElement === void 0 ? void 0 : activeElement.getAttribute(attribute)) !== null && _c !== void 0 ? _c : null;
120
+ }, attribute);
121
+ }
@@ -14,6 +14,7 @@ export declare function validateInput(input: string, validDays: number[], validD
14
14
  invalidDates: string[], // black list
15
15
  startDate: string, endDate: string, formatString: string, assume: string): InputValidation;
16
16
  export declare function handleMissingZeros(input: any): string;
17
+ export declare function reorderDateString(input: string): string;
17
18
  export declare function firstDayOfWeekInMonth(month: number, year: number): number;
18
19
  export declare function getDays(): string[];
19
20
  export declare function getDaysOfWeek(): string[];
@@ -22,7 +22,7 @@ export declare class Q2Checkbox implements ComponentInterface {
22
22
  delegateFocus(event: FocusEvent): void;
23
23
  ariaLabelObserver(): void;
24
24
  change: EventEmitter;
25
- onInputChange: (event: Event) => void;
25
+ onInputClick: (event: Event) => void;
26
26
  onControlClick: (event: Event) => void;
27
27
  onKeyDown: (event: KeyboardEvent) => void;
28
28
  render(): any;
@@ -1,4 +1,4 @@
1
- import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
1
+ import { ComponentInterface } from '../../stencil-public-runtime';
2
2
  export declare class Q2Option implements ComponentInterface {
3
3
  role: string;
4
4
  tabindex: string;
@@ -11,9 +11,8 @@ export declare class Q2Option implements ComponentInterface {
11
11
  hidden: boolean;
12
12
  multiline: boolean;
13
13
  active: boolean;
14
+ noSelect: boolean;
14
15
  _multiSelectHidden: boolean;
15
16
  hostElement: HTMLElement;
16
- click: EventEmitter;
17
- onClick: (event: MouseEvent) => void;
18
17
  render(): any;
19
18
  }
@@ -0,0 +1,62 @@
1
+ import { Event, ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
2
+ export interface IOptionValue {
3
+ value: string;
4
+ display?: string;
5
+ }
6
+ export declare class Q2OptionList implements ComponentInterface {
7
+ role: 'listbox' | 'menu';
8
+ direction: 'up' | 'down';
9
+ open: boolean;
10
+ customSearch: boolean;
11
+ noSelect: boolean;
12
+ align: 'left' | 'right';
13
+ selectedOptions: IOptionValue[];
14
+ multiple: boolean;
15
+ disabled: boolean;
16
+ type: 'menu' | 'listbox';
17
+ change: EventEmitter<{
18
+ value: string;
19
+ values: IOptionValue[];
20
+ }>;
21
+ optionListState: EventEmitter<{
22
+ open: boolean;
23
+ }>;
24
+ hasOptions: boolean;
25
+ contentElement: HTMLElement;
26
+ activeIndex: number;
27
+ scheduledAfterRender: Array<() => void>;
28
+ searchString: string;
29
+ searchStringTimer: number;
30
+ hostElement: HTMLElement;
31
+ componentWillLoad(): void;
32
+ componentDidLoad(): void;
33
+ componentDidRender(): void;
34
+ get allOptions(): HTMLQ2OptionElement[];
35
+ checkOptions(): void;
36
+ getRootSlot(element: Element): any;
37
+ scrollToActiveOption(): void;
38
+ resizeIframe(): void;
39
+ openDropdownWithActiveElement(activeIndex: number): void;
40
+ getDefaultActiveIndex(): number;
41
+ updateSingleOptionAttrs(): void;
42
+ updateMultipleOptionAttrs(): void;
43
+ setActiveOption(): void;
44
+ setFocusedOption(): void;
45
+ getNextVisibleIndex(direction: any): any;
46
+ selectOption(selectedValue: string): void;
47
+ adjustActiveOptionAndScroll(numToAdd: number): void;
48
+ resetTimer(): void;
49
+ searchAndFocus(key: string): void;
50
+ selectedOptionsUpdated(): void;
51
+ openChanged(newValue: boolean): void;
52
+ delegateFocus(event: FocusEvent): void;
53
+ handleClick(event: MouseEvent): void;
54
+ toggle(): void;
55
+ setDefaultActiveElement(): void;
56
+ setActiveElement(index: number): void;
57
+ handleExternalKeydown(event: KeyboardEvent): void;
58
+ keydownHandler: (event: KeyboardEvent, ignoreSelectionEvents?: boolean) => void;
59
+ focusoutHandler: (event: FocusEvent) => void;
60
+ clickHandler: (event: Event) => void;
61
+ render(): any;
62
+ }
@@ -0,0 +1,39 @@
1
+ import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
2
+ import { IOptionValue } from '../q2-option-list';
3
+ export declare class Q2Pill implements ComponentInterface {
4
+ disabled: boolean;
5
+ active: boolean;
6
+ open: boolean;
7
+ multiple: boolean;
8
+ label: string;
9
+ value: string;
10
+ theme: 'primary' | 'secondary' | 'tertiary';
11
+ selectedOptions: IOptionValue[];
12
+ hasOptions: boolean;
13
+ hostElement: HTMLElement;
14
+ change: EventEmitter<{
15
+ value: string;
16
+ values: IOptionValue[];
17
+ active: boolean;
18
+ }>;
19
+ scheduledAfterRender: Array<() => void>;
20
+ primaryBtn: HTMLButtonElement;
21
+ optionList: HTMLQ2OptionListElement;
22
+ mutationObserver: MutationObserver;
23
+ componentWillLoad(): void;
24
+ componentDidLoad(): void;
25
+ componentDidRender(): void;
26
+ disconnectedCallback(): void;
27
+ get buttonContent(): string;
28
+ determineHasOptions: () => void;
29
+ clearSelectedOptions: () => void;
30
+ delegateFocus(event: FocusEvent): void;
31
+ optionListStateEvent({ detail: { open } }: CustomEvent): void;
32
+ handleClick: (event: MouseEvent) => void;
33
+ handleKeydown: (event: KeyboardEvent) => void;
34
+ handleChange: (event: any) => void;
35
+ handleFocusout: (event: FocusEvent) => void;
36
+ handleWrapperClick: () => void;
37
+ generateIcon(): any;
38
+ render(): any;
39
+ }
@@ -0,0 +1,28 @@
1
+ import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
2
+ export declare class Q2Tag implements ComponentInterface {
3
+ open: boolean;
4
+ role: string;
5
+ label: string;
6
+ theme: 'primary' | 'secondary' | 'tertiary';
7
+ hasOptions: boolean;
8
+ hostElement: HTMLElement;
9
+ click: EventEmitter<{
10
+ value: string;
11
+ }>;
12
+ dropdownBtn: HTMLButtonElement;
13
+ optionList: HTMLQ2OptionListElement;
14
+ mutationObserver: MutationObserver;
15
+ componentWillLoad(): void;
16
+ componentDidLoad(): void;
17
+ disconnectedCallback(): void;
18
+ determineHasOptions: () => void;
19
+ delegateFocus(event: FocusEvent): void;
20
+ optionListStateEvent({ detail: { open } }: CustomEvent): void;
21
+ handleChange: (event: any) => void;
22
+ handleClick: (event: MouseEvent) => void;
23
+ handleKeydown: (event: KeyboardEvent) => void;
24
+ handleButtonFocusout: (event: FocusEvent) => void;
25
+ handleOptionListFocusout: (event: FocusEvent) => void;
26
+ handleWrapperClick: () => void;
27
+ render(): any;
28
+ }