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.
- package/dist/cjs/{index-f5807a6a.js → index-773c3eec.js} +13 -11
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/q2-btn_2.cjs.entry.js +2 -2
- package/dist/cjs/q2-calendar.cjs.entry.js +12 -2
- package/dist/cjs/q2-card.cjs.entry.js +1 -1
- package/dist/cjs/q2-carousel-pane.cjs.entry.js +1 -1
- package/dist/cjs/q2-carousel.cjs.entry.js +1 -1
- package/dist/cjs/q2-checkbox-group.cjs.entry.js +1 -1
- package/dist/cjs/q2-checkbox.cjs.entry.js +4 -3
- package/dist/cjs/q2-dropdown-item.cjs.entry.js +1 -1
- package/dist/cjs/q2-dropdown.cjs.entry.js +1 -1
- package/dist/cjs/q2-editable-field.cjs.entry.js +1 -1
- package/dist/cjs/q2-icon.cjs.entry.js +1 -1
- package/dist/cjs/q2-input.cjs.entry.js +4 -4
- package/dist/cjs/q2-loc.cjs.entry.js +1 -1
- package/dist/cjs/q2-message.cjs.entry.js +1 -1
- package/dist/cjs/q2-optgroup.cjs.entry.js +1 -1
- package/dist/cjs/q2-option-list.cjs.entry.js +357 -0
- package/dist/cjs/q2-option.cjs.entry.js +2 -10
- package/dist/cjs/q2-pagination.cjs.entry.js +1 -1
- package/dist/cjs/q2-pill.cjs.entry.js +137 -0
- package/dist/cjs/q2-radio-group.cjs.entry.js +1 -1
- package/dist/cjs/q2-radio.cjs.entry.js +1 -1
- package/dist/cjs/q2-section.cjs.entry.js +1 -1
- package/dist/cjs/q2-select.cjs.entry.js +15 -6
- package/dist/cjs/q2-stepper-pane.cjs.entry.js +1 -1
- package/dist/cjs/q2-stepper.cjs.entry.js +2 -2
- package/dist/cjs/q2-tab-container.cjs.entry.js +5 -1
- package/dist/cjs/q2-tag.cjs.entry.js +94 -0
- package/dist/cjs/q2-tecton-elements.cjs.js +1 -1
- package/dist/cjs/q2-textarea.cjs.entry.js +1 -1
- package/dist/collection/collection-manifest.json +3 -0
- package/dist/collection/components/q2-btn/styles.css +1 -1
- package/dist/collection/components/q2-calendar/helpers.js +6 -0
- package/dist/collection/components/q2-calendar/index.js +6 -2
- package/dist/collection/components/q2-checkbox/index.js +3 -2
- package/dist/collection/components/q2-input/index.js +4 -3
- package/dist/collection/components/q2-input/styles.css +9 -2
- package/dist/collection/components/q2-option/index.js +19 -25
- package/dist/collection/components/q2-option/styles.css +5 -0
- package/dist/collection/components/q2-option-list/index.js +646 -0
- package/dist/collection/components/q2-option-list/styles.css +128 -0
- package/dist/collection/components/q2-pill/index.js +324 -0
- package/dist/collection/components/q2-pill/styles.css +227 -0
- package/dist/collection/components/q2-select/index.js +14 -5
- package/dist/collection/components/q2-stepper/styles.css +1 -1
- package/dist/collection/components/q2-tab-container/index.js +4 -0
- package/dist/collection/components/q2-tag/index.js +200 -0
- package/dist/collection/components/q2-tag/styles.css +141 -0
- package/dist/collection/utils/index.js +13 -11
- package/dist/esm/{index-0e13a57f.js → index-fa32f694.js} +13 -11
- package/dist/esm/loader.js +1 -1
- package/dist/esm/q2-btn_2.entry.js +2 -2
- package/dist/esm/q2-calendar.entry.js +12 -2
- package/dist/esm/q2-card.entry.js +1 -1
- package/dist/esm/q2-carousel-pane.entry.js +1 -1
- package/dist/esm/q2-carousel.entry.js +1 -1
- package/dist/esm/q2-checkbox-group.entry.js +1 -1
- package/dist/esm/q2-checkbox.entry.js +4 -3
- package/dist/esm/q2-dropdown-item.entry.js +1 -1
- package/dist/esm/q2-dropdown.entry.js +1 -1
- package/dist/esm/q2-editable-field.entry.js +1 -1
- package/dist/esm/q2-icon.entry.js +1 -1
- package/dist/esm/q2-input.entry.js +4 -4
- package/dist/esm/q2-loc.entry.js +1 -1
- package/dist/esm/q2-message.entry.js +1 -1
- package/dist/esm/q2-optgroup.entry.js +1 -1
- package/dist/esm/q2-option-list.entry.js +353 -0
- package/dist/esm/q2-option.entry.js +3 -11
- package/dist/esm/q2-pagination.entry.js +1 -1
- package/dist/esm/q2-pill.entry.js +133 -0
- package/dist/esm/q2-radio-group.entry.js +1 -1
- package/dist/esm/q2-radio.entry.js +1 -1
- package/dist/esm/q2-section.entry.js +1 -1
- package/dist/esm/q2-select.entry.js +15 -6
- package/dist/esm/q2-stepper-pane.entry.js +1 -1
- package/dist/esm/q2-stepper.entry.js +2 -2
- package/dist/esm/q2-tab-container.entry.js +5 -1
- package/dist/esm/q2-tag.entry.js +90 -0
- package/dist/esm/q2-tecton-elements.js +1 -1
- package/dist/esm/q2-textarea.entry.js +1 -1
- package/dist/q2-tecton-elements/{p-ca847db7.entry.js → p-08668234.entry.js} +1 -1
- package/dist/q2-tecton-elements/{p-2be33492.entry.js → p-0a7cff38.entry.js} +1 -1
- package/dist/q2-tecton-elements/p-167a19fd.entry.js +1 -0
- package/dist/q2-tecton-elements/{p-a72e7a12.entry.js → p-2afdc922.entry.js} +1 -1
- package/dist/q2-tecton-elements/{p-fe61c1aa.entry.js → p-30bf5f44.entry.js} +1 -1
- package/dist/q2-tecton-elements/{p-f85bf7fb.entry.js → p-34415315.entry.js} +1 -1
- package/dist/q2-tecton-elements/{p-3479847c.entry.js → p-54300d2f.entry.js} +1 -1
- package/dist/q2-tecton-elements/p-54f0d64e.entry.js +1 -0
- package/dist/q2-tecton-elements/p-5b906cf1.entry.js +1 -0
- package/dist/q2-tecton-elements/p-5effd81a.entry.js +1 -0
- package/dist/q2-tecton-elements/{p-27ec0a16.entry.js → p-7ce98c1a.entry.js} +1 -1
- package/dist/q2-tecton-elements/{p-346b65d5.entry.js → p-91dba21f.entry.js} +1 -1
- package/dist/q2-tecton-elements/{p-2372f988.entry.js → p-9a3c37ab.entry.js} +1 -1
- package/dist/q2-tecton-elements/{p-c83dba0a.entry.js → p-a0248299.entry.js} +1 -1
- package/dist/q2-tecton-elements/{p-f435dc7e.entry.js → p-aca8302b.entry.js} +1 -1
- package/dist/q2-tecton-elements/{p-bfd77f9b.entry.js → p-b9c2c1d3.entry.js} +1 -1
- package/dist/q2-tecton-elements/{p-f85da2a8.js → p-c3d68d5c.js} +1 -1
- package/dist/q2-tecton-elements/{p-841ec108.entry.js → p-c460e5ed.entry.js} +1 -1
- package/dist/q2-tecton-elements/{p-88bc2f49.entry.js → p-c5199147.entry.js} +1 -1
- package/dist/q2-tecton-elements/{p-492dfb55.entry.js → p-c5e6f7fa.entry.js} +1 -1
- package/dist/q2-tecton-elements/{p-9ccbc3d8.entry.js → p-d3058002.entry.js} +1 -1
- package/dist/q2-tecton-elements/{p-fc318ae2.entry.js → p-d65aaed2.entry.js} +1 -1
- package/dist/q2-tecton-elements/{p-701b381a.entry.js → p-d9bc6494.entry.js} +1 -1
- package/dist/q2-tecton-elements/p-df86f160.entry.js +1 -0
- package/dist/q2-tecton-elements/{p-f73df612.entry.js → p-e38080d2.entry.js} +1 -1
- package/dist/q2-tecton-elements/p-e9d69ba8.entry.js +1 -0
- package/dist/q2-tecton-elements/{p-d199fca8.entry.js → p-f98dc161.entry.js} +1 -1
- package/dist/q2-tecton-elements/{p-6a83a97c.entry.js → p-fa9e3825.entry.js} +1 -1
- package/dist/q2-tecton-elements/{p-b5b12e46.entry.js → p-fe6407a4.entry.js} +1 -1
- package/dist/q2-tecton-elements/q2-tecton-elements.esm.js +1 -1
- package/dist/test/elements/q2-tag-test.js +151 -0
- package/dist/test/helpers.js +7 -0
- package/dist/types/components/q2-calendar/helpers.d.ts +1 -0
- package/dist/types/components/q2-checkbox/index.d.ts +1 -1
- package/dist/types/components/q2-option/index.d.ts +2 -3
- package/dist/types/components/q2-option-list/index.d.ts +62 -0
- package/dist/types/components/q2-pill/index.d.ts +39 -0
- package/dist/types/components/q2-tag/index.d.ts +28 -0
- package/dist/types/components.d.ts +95 -1
- 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
- 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
- package/package.json +2 -2
- package/dist/q2-tecton-elements/p-564154f3.entry.js +0 -1
- package/dist/q2-tecton-elements/p-6702eb4d.entry.js +0 -1
- 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-
|
|
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-
|
|
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
|
+
});
|
package/dist/test/helpers.js
CHANGED
|
@@ -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
|
-
|
|
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
|
|
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
|
+
}
|