q2-tecton-elements 1.51.1 → 1.51.3

package/dist/q2-tecton-elements/p-15ac45d6.js

@@ -1,2 +0,0 @@
-import{h as e}from"./p-a5f18e27.js";const n=(e,n=300)=>{let i;return function(...o){clearTimeout(i);i=setTimeout((()=>{e(...o)}),n)}};function i(){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|Mobile|IEMobile|Windows Phone|Opera Mini/i.test(navigator.userAgent)}function o(e,n){const i=e.type;const o=["focusin","focus"];const t=o.includes(i);const r=t?e.target:e.relatedTarget;const a=e=>{if(e===n)return true;if(e.parentElement){return a(e.parentElement)}return false};if(!(r instanceof HTMLElement))return true;return!a(r)}function t(e,n){return e.relatedTarget!==n&&!n.contains(e.relatedTarget)}function r(e,n){var i;return((i=e.composedPath)===null||i===void 0?void 0:i.call(e)[0])===n}function a(e){e.focus=()=>e===null||e===void 0?void 0:e.dispatchEvent(new FocusEvent("focus",{bubbles:false}))}function s(){const e=navigator.userAgent.toLowerCase();return e.includes("firefox")}function l(){return"ontouchstart"in window||navigator.maxTouchPoints>0}function u(e,n){if(e===undefined)return e;if(!n)return e!=="Symbol()"?e:undefined;return n.includes(e)||e===""?e:undefined}let d=1e3;function c(){return d++}function f(e){requestAnimationFrame((()=>{requestAnimationFrame(e)}))}function m(e){return e.offsetWidth>0||e.offsetHeight>0||e.getClientRects().length>0}function p(){return new Promise((e=>f(e)))}function b(e,n){var i,o,t;if(!e)return"";if(((i=window.Tecton)===null||i===void 0?void 0:i.noStrings)===true){return e}return(t=(o=window===null||window===void 0?void 0:window.TectonElements)===null||o===void 0?void 0:o.loc(e,n))!==null&&t!==void 0?t:e}function v(n){const{label:i,hideLabel:o,optional:t,readonly:r}=n;const a=["input-label"];let s="";let l=o;if(!l){const e=n.hostElement.querySelectorAll('[slot="label"]');const o=e.length>0;const t=!!i;l=t||o?false:true}if(l)a.push("sr");if(t){s=e("span",{class:"optional-tag"},b("tecton.element.input.optional"))}if(r){s=e("span",{class:"optional-tag"},b("tecton.element.input.readonly"));a.push("readonly-field")}return e("label",{htmlFor:n.inputId,class:a.join(" ")},e("slot",{name:"label"},i?b(i):undefined,s))}function h(e,n){return e.querySelector(`[slot="${n}"]`)!==null}function w(e){const{ariaLabel:n}=e;if(!n)return;const i=Symbol().toString();if(n===i){e.ariaLabel=undefined;return}if("hideLabel"in e)e.hideLabel=true;e.label=b(n);e.ariaLabel=undefined}function g(e,n,i,o){if(typeof e[n]==="undefined")return;if(e[n]){y(e,n,"prop")}e[i]=e[n];if(o){delete e[n]}}function y(e,n,i){if(window.location.hostname==="localhost"||window.location.host==="stack.q2developer.com"){if(e[n]==="undefined")return;const o=e.constructor.name.toLowerCase().slice(2);switch(i){case"prop":if(n==="size"&&o==="btn"){console.warn(`The property of size in q2-btn should not be typeof number, or typeof string containing a number. This functionality will be deprecated in an upcoming release. Instead, please use the value 'undefined', or typeof string with any of the following values: "small" / "medium" / "large" `)}else{console.warn(`The property ${n} in q2-${o} has been marked for deprecation and will be removed in an upcoming major release.`)}break;case"function":console.warn(`The function ${n} in ${o} has been marked for deprecation and will be removed in an upcoming major release.`);break;case"method":console.warn(`The method ${n} in ${o} has been marked for deprecation and will be removed in an upcoming major release.`);break;case"event":console.warn(`The event ${n} in ${o} has been marked for deprecation and will be removed in an upcoming major release.`);break;default:console.error(`handleDeprecationWarning --\x3e No type found for desired deprecation: ${n} in q2-${o}: deprecatedItemType = ${n}`)}}}function $(n){const i=n.hasError?"danger":"info";return e("div",{class:"messages-container"},e("q2-message",{appearance:"minimal",description:true,type:i,"test-id":"message"},e("ul",{id:n.inputDescribedBy},n.messages.map((n=>e("li",{"test-id":"messageListItem"},b(n)))))))}function k(e){const n=e.hostElement.shadowRoot.querySelector(".messages-container");const i=n.querySelector("q2-message");f((()=>{const o=e.showMessages&&e.hasFocus?i.getBoundingClientRect().height:0;if(n.style.getPropertyValue("height")===`${o}px`)return;if(o===0){i.classList.add("invisible");n.style.removeProperty("height")}else{i.classList.remove("invisible");n.style.setProperty("height",`${o}px`)}}))}const T=()=>{var e,n;return(n=(e=window.TectonElements)===null||e===void 0?void 0:e.resizeIframe)===null||n===void 0?void 0:n.call(e)};const q=e=>{if(!e.intent&&["primary","secondary"].includes(e.color)){e.intent=`workflow-${e.color}`;e.color=undefined}};export{w as a,q as b,c,i as d,h as e,v as f,u as g,y as h,r as i,g as j,l as k,b as l,T as m,f as n,a as o,n as p,t as q,$ as r,k as s,o as t,s as u,m as v,p as w};
-//# sourceMappingURL=p-15ac45d6.js.map

package/dist/q2-tecton-elements/p-15ac45d6.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["debounce","fn","delay","timeout","args","clearTimeout","setTimeout","isMobile","test","navigator","userAgent","isHostLosingFocus","event","hostElement","type","focusInTypes","isFocusIn","includes","elementGainingFocus","target","relatedTarget","isElementNestedInHostElement","element","parentElement","HTMLElement","isRelatedTargetWithinHost","contains","isEventFromElement","_a","composedPath","call","overrideFocus","focus","dispatchEvent","FocusEvent","bubbles","isFirefox","toLowerCase","isTouchDevice","window","maxTouchPoints","getAriaValueFromProp","prop","validValues","undefined","guid","createGuid","nextPaint","requestAnimationFrame","isVisible","offsetWidth","offsetHeight","getClientRects","length","waitForNextPaint","Promise","resolve","loc","key","subs","Tecton","noStrings","_c","_b","TectonElements","renderLabel","label","hideLabel","optional","readonly","labelClasses","helpText","shouldHideLabel","labelSlotElements","querySelectorAll","hasSlotContent","hasLabel","push","h","class","htmlFor","inputId","join","name","slotName","querySelector","handleAriaLabel","ariaLabel","FW_WRAPPERS_EMPTY_PROP","Symbol","toString","handleRenamedProp","oldProp","newProp","removeOldProp","handleDeprecationWarning","deprecatedItemName","deprecatedItemType","location","hostname","host","componentName","constructor","slice","console","warn","error","renderMessages","hasError","appearance","description","id","inputDescribedBy","messages","map","message","setMessageHeight","messageContainer","shadowRoot","q2Message","height","showMessages","hasFocus","getBoundingClientRect","style","getPropertyValue","classList","add","removeProperty","remove","setProperty","resizeIframe","handleColor","intent","color"],"sources":["src/utils/index.tsx"],"sourcesContent":["import { h } from '@stencil/core';\nimport { Q2Btn } from 'src/components/q2-btn/q2-btn';\nimport { Q2Calendar } from 'src/components/q2-calendar/q2-calendar';\nimport { Q2Carousel } from 'src/components/q2-carousel/q2-carousel';\nimport { Q2Checkbox } from 'src/components/q2-checkbox/q2-checkbox';\nimport { Q2CheckboxGroup } from 'src/components/q2-checkbox-group/q2-checkbox-group';\nimport { Q2RadioGroup } from 'src/components/q2-radio-group/q2-radio-group';\nimport { Q2Dropdown } from 'src/components/q2-dropdown/q2-dropdown';\nimport { Q2DropdownItem } from 'src/components/q2-dropdown-item/q2-dropdown-item';\nimport { Q2EditableField } from 'src/components/q2-editable-field/q2-editable-field';\nimport { Q2Input } from 'src/components/q2-input/q2-input';\nimport { Q2Loading } from 'src/components/q2-loading/q2-loading';\nimport { Q2Radio } from 'src/components/q2-radio/q2-radio';\nimport { Q2Select } from 'src/components/q2-select/q2-select';\nimport { FormFieldTypes, IDict } from 'src/util';\n\nexport const debounce = <F extends (...args: Parameters<F>) => ReturnType<F>>(fn: F, delay: number = 300) => {\n    let timeout: ReturnType<typeof setTimeout>;\n    return function (...args: Parameters<F>) {\n        clearTimeout(timeout);\n        timeout = setTimeout(() => {\n            fn(...args);\n        }, delay);\n    };\n};\n\nexport function isMobile(): boolean {\n    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|Mobile|IEMobile|Windows Phone|Opera Mini/i.test(\n        navigator.userAgent\n    );\n}\n\nexport function isHostLosingFocus(event: FocusEvent, hostElement: HTMLElement) {\n    const type = event.type;\n    const focusInTypes = ['focusin', 'focus'];\n    const isFocusIn = focusInTypes.includes(type);\n\n    // on focusin: `target` is element losing focus, `relatedTarget` is element gaining focus\n    // on focusout: `target` is element gaining focus, `relatedTarget` is element losing focus\n    const elementGainingFocus = isFocusIn ? event.target : event.relatedTarget;\n\n    const isElementNestedInHostElement = (element: HTMLElement) => {\n        if (element === hostElement) return true;\n        if (element.parentElement) {\n            return isElementNestedInHostElement(element.parentElement);\n        }\n        return false;\n    };\n\n    if (!(elementGainingFocus instanceof HTMLElement)) return true;\n    return !isElementNestedInHostElement(elementGainingFocus);\n}\n\nexport function isRelatedTargetWithinHost(event: FocusEvent, element: HTMLElement) {\n    return event.relatedTarget !== element && !element.contains(event.relatedTarget as Node);\n}\n\nexport function isEventFromElement(event: Event, element: HTMLElement): boolean {\n    return event.composedPath?.()[0] === element;\n}\n\nexport function overrideFocus(hostElement: HTMLElement) {\n    hostElement.focus = () => hostElement?.dispatchEvent(new FocusEvent('focus', { bubbles: false }));\n}\n\nexport function isFirefox() {\n    const userAgent = navigator.userAgent.toLowerCase();\n    return userAgent.includes('firefox');\n}\n\nexport function isTouchDevice() {\n    return 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n}\n\nexport function isSafari() {\n    const userAgent = navigator.userAgent.toLowerCase();\n    return userAgent.includes('safari') && !userAgent.includes('chrome');\n}\n\n/**\n * Returns the value of a prop if it is defined and included in the `validValues`\n * array. This is used primarily to prevent Vue wrappers from setting aria props\n * to \"Symbol()\" when the prop is not set.\n */\nexport function getAriaValueFromProp(prop: string, validValues?: string[]) {\n    if (prop === undefined) return prop;\n    if (!validValues) return prop !== 'Symbol()' ? prop : undefined;\n    return validValues.includes(prop) || prop === '' ? prop : undefined;\n}\n\nlet guid: number = 1000;\nexport function createGuid(): number {\n    return guid++;\n}\n\nexport function nextPaint(fn: (value?: unknown) => void) {\n    requestAnimationFrame(() => {\n        requestAnimationFrame(fn);\n    });\n}\n\nexport function isVisible(element: HTMLElement) {\n    return element.offsetWidth > 0 || element.offsetHeight > 0 || element.getClientRects().length > 0;\n}\n\nexport function waitForNextPaint() {\n    return new Promise(resolve => nextPaint(resolve));\n}\n\nexport function capitalize(value: string) {\n    return `${value.charAt(0).toUpperCase()}${value.slice(1)}`;\n}\n\nexport function pick(props: string[]): (obj: object) => object {\n    return obj => {\n        return props.reduce((memo, prop) => {\n            return {\n                ...memo,\n                [prop]: obj[prop],\n            };\n        }, {});\n    };\n}\n\nexport function loc(key: string, subs?: IDict<any> | string[]) {\n    if (!key) return '';\n    if (window.Tecton?.noStrings === true) {\n        return key;\n    }\n    return window?.TectonElements?.loc(key, subs) ?? key;\n}\n\nexport function renderLabel(target: FormFieldTypes | Q2RadioGroup | Q2CheckboxGroup) {\n    const { label, hideLabel, optional, readonly } = target;\n    const labelClasses: string[] = ['input-label'];\n    let helpText = '';\n\n    let shouldHideLabel = hideLabel;\n    if (!shouldHideLabel) {\n        const labelSlotElements = target.hostElement.querySelectorAll<HTMLSlotElement>('[slot=\"label\"]');\n        const hasSlotContent = labelSlotElements.length > 0;\n        const hasLabel = !!label;\n\n        shouldHideLabel = hasLabel || hasSlotContent ? false : true;\n    }\n\n    if (shouldHideLabel) labelClasses.push('sr');\n    if (optional) {\n        helpText = <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span>;\n    }\n    if (readonly) {\n        helpText = <span class=\"optional-tag\">{loc('tecton.element.input.readonly')}</span>;\n        labelClasses.push('readonly-field');\n    }\n    return (\n        <label\n            htmlFor={target.inputId}\n            class={labelClasses.join(' ')}\n        >\n            <slot name=\"label\">\n                {label ? loc(label) : undefined}\n                {helpText}\n            </slot>\n        </label>\n    );\n}\n\nexport function hasSlotContent(target: HTMLElement, slotName: string) {\n    return target.querySelector(`[slot=\"${slotName}\"]`) !== null;\n}\n\nexport function handleAriaLabel(\n    target:\n        | Q2Input\n        | Q2Select\n        | Q2Radio\n        | Q2Checkbox\n        | Q2EditableField\n        | Q2Dropdown\n        | Q2DropdownItem\n        | Q2Loading\n        | Q2Carousel\n        | Q2Calendar\n        | Q2Btn\n) {\n    const { ariaLabel } = target;\n    if (!ariaLabel) return;\n\n    // If empty ariaLabel prop is set to primitive symbol by framework wrapper, set ariaLabel to undefined and return\n    const FW_WRAPPERS_EMPTY_PROP = Symbol().toString();\n    if (ariaLabel === FW_WRAPPERS_EMPTY_PROP) {\n        target.ariaLabel = undefined;\n        return;\n    }\n\n    // If ariaLabel is set, set hideLabel to true and set label to ariaLabel\n    if ('hideLabel' in target) target.hideLabel = true;\n    target.label = loc(ariaLabel);\n    target.ariaLabel = undefined;\n}\n\n/**\n * Handles when a prop has been renamed on a component without introducing a breaking change.\n */\nexport function handleRenamedProp(target: object, oldProp: string, newProp: string, removeOldProp?: boolean) {\n    if (typeof target[oldProp] === 'undefined') return;\n\n    // If old prop has value, aka set in component, call handleDeprecationWarning()\n    if (target[oldProp]) {\n        handleDeprecationWarning(target, oldProp, 'prop');\n    }\n\n    target[newProp] = target[oldProp];\n\n    if (removeOldProp) {\n        delete target[oldProp];\n    }\n}\n\nexport function handleDeprecationWarning(\n    target: object,\n    deprecatedItemName: string,\n    deprecatedItemType: 'function' | 'prop' | 'method' | 'event'\n) {\n    if (window.location.hostname === 'localhost' || window.location.host === 'stack.q2developer.com') {\n        if (target[deprecatedItemName] === 'undefined') return;\n\n        const componentName = target.constructor.name.toLowerCase().slice(2);\n\n        switch (deprecatedItemType) {\n            case 'prop':\n                if (deprecatedItemName === 'size' && componentName === 'btn') {\n                    console.warn(\n                        `The property of size in q2-btn should not be typeof number, or typeof string containing a number. This functionality will be deprecated in an upcoming release. Instead, please use the value 'undefined', or typeof string with any of the following values: \"small\" / \"medium\" / \"large\" `\n                    );\n                } else {\n                    console.warn(\n                        `The property ${deprecatedItemName} in q2-${componentName} has been marked for deprecation and will be removed in an upcoming major release.`\n                    );\n                }\n                break;\n\n            case 'function':\n                console.warn(\n                    `The function ${deprecatedItemName} in ${componentName} has been marked for deprecation and will be removed in an upcoming major release.`\n                );\n                break;\n\n            case 'method':\n                console.warn(\n                    `The method ${deprecatedItemName} in ${componentName} has been marked for deprecation and will be removed in an upcoming major release.`\n                );\n                break;\n\n            case 'event':\n                console.warn(\n                    `The event ${deprecatedItemName} in ${componentName} has been marked for deprecation and will be removed in an upcoming major release.`\n                );\n                break;\n\n            default:\n                console.error(\n                    `handleDeprecationWarning --> No type found for desired deprecation: ${deprecatedItemName} in q2-${componentName}: deprecatedItemType = ${deprecatedItemName}`\n                );\n        }\n    }\n}\n\nexport function renderMessages(target: FormFieldTypes) {\n    const type = target.hasError ? 'danger' : 'info';\n\n    return (\n        <div class=\"messages-container\">\n            <q2-message\n                appearance=\"minimal\"\n                description\n                type={type}\n                test-id=\"message\"\n            >\n                <ul id={target.inputDescribedBy}>\n                    {target.messages.map(message => (\n                        <li test-id=\"messageListItem\">{loc(message)}</li>\n                    ))}\n                </ul>\n            </q2-message>\n        </div>\n    );\n}\n\nexport function setMessageHeight(target: FormFieldTypes) {\n    const messageContainer = (target.hostElement.shadowRoot as ShadowRoot).querySelector<HTMLDivElement>(\n        '.messages-container'\n    );\n    const q2Message = messageContainer.querySelector('q2-message');\n    nextPaint(() => {\n        const height = target.showMessages && target.hasFocus ? q2Message.getBoundingClientRect().height : 0;\n\n        if (messageContainer.style.getPropertyValue('height') === `${height}px`) return;\n\n        if (height === 0) {\n            q2Message.classList.add('invisible');\n            messageContainer.style.removeProperty('height');\n        } else {\n            q2Message.classList.remove('invisible');\n            messageContainer.style.setProperty('height', `${height}px`);\n        }\n    });\n}\n\nexport const resizeIframe = () => {\n    return window.TectonElements?.resizeIframe?.();\n};\n\n// Handling color attribute (deprecated)\nexport const handleColor = (target: Q2Btn) => {\n    if (!target.intent && ['primary', 'secondary'].includes(target.color)) {\n        target.intent = `workflow-${target.color}` as HTMLQ2BtnElement['intent'];\n        target.color = undefined;\n    }\n};\n"],"mappings":"0CAgBaA,EAAW,CAAsDC,EAAOC,EAAgB,OACjG,IAAIC,EACJ,OAAO,YAAaC,GAChBC,aAAaF,GACbA,EAAUG,YAAW,KACjBL,KAAMG,EAAK,GACZF,E,CACN,E,SAGWK,IACZ,MAAO,sFAAsFC,KACzFC,UAAUC,UAElB,C,SAEgBC,EAAkBC,EAAmBC,GACjD,MAAMC,EAAOF,EAAME,KACnB,MAAMC,EAAe,CAAC,UAAW,SACjC,MAAMC,EAAYD,EAAaE,SAASH,GAIxC,MAAMI,EAAsBF,EAAYJ,EAAMO,OAASP,EAAMQ,cAE7D,MAAMC,EAAgCC,IAClC,GAAIA,IAAYT,EAAa,OAAO,KACpC,GAAIS,EAAQC,cAAe,CACvB,OAAOF,EAA6BC,EAAQC,c,CAEhD,OAAO,KAAK,EAGhB,KAAML,aAA+BM,aAAc,OAAO,KAC1D,OAAQH,EAA6BH,EACzC,C,SAEgBO,EAA0Bb,EAAmBU,GACzD,OAAOV,EAAMQ,gBAAkBE,IAAYA,EAAQI,SAASd,EAAMQ,cACtE,C,SAEgBO,EAAmBf,EAAcU,G,MAC7C,QAAOM,EAAAhB,EAAMiB,gBAAY,MAAAD,SAAA,SAAAA,EAAAE,KAAAlB,GAAK,MAAOU,CACzC,C,SAEgBS,EAAclB,GAC1BA,EAAYmB,MAAQ,IAAMnB,IAAW,MAAXA,SAAW,SAAXA,EAAaoB,cAAc,IAAIC,WAAW,QAAS,CAAEC,QAAS,QAC5F,C,SAEgBC,IACZ,MAAM1B,EAAYD,UAAUC,UAAU2B,cACtC,OAAO3B,EAAUO,SAAS,UAC9B,C,SAEgBqB,IACZ,MAAO,iBAAkBC,QAAU9B,UAAU+B,eAAiB,CAClE,C,SAYgBC,EAAqBC,EAAcC,GAC/C,GAAID,IAASE,UAAW,OAAOF,EAC/B,IAAKC,EAAa,OAAOD,IAAS,WAAaA,EAAOE,UACtD,OAAOD,EAAY1B,SAASyB,IAASA,IAAS,GAAKA,EAAOE,SAC9D,CAEA,IAAIC,EAAe,I,SACHC,IACZ,OAAOD,GACX,C,SAEgBE,EAAU9C,GACtB+C,uBAAsB,KAClBA,sBAAsB/C,EAAG,GAEjC,C,SAEgBgD,EAAU3B,GACtB,OAAOA,EAAQ4B,YAAc,GAAK5B,EAAQ6B,aAAe,GAAK7B,EAAQ8B,iBAAiBC,OAAS,CACpG,C,SAEgBC,IACZ,OAAO,IAAIC,SAAQC,GAAWT,EAAUS,IAC5C,C,SAiBgBC,EAAIC,EAAaC,G,UAC7B,IAAKD,EAAK,MAAO,GACjB,KAAI9B,EAAAW,OAAOqB,UAAM,MAAAhC,SAAA,SAAAA,EAAEiC,aAAc,KAAM,CACnC,OAAOH,C,CAEX,OAAOI,GAAAC,EAAAxB,SAAM,MAANA,cAAM,SAANA,OAAQyB,kBAAc,MAAAD,SAAA,SAAAA,EAAEN,IAAIC,EAAKC,MAAK,MAAAG,SAAA,EAAAA,EAAIJ,CACrD,C,SAEgBO,EAAY9C,GACxB,MAAM+C,MAAEA,EAAKC,UAAEA,EAASC,SAAEA,EAAQC,SAAEA,GAAalD,EACjD,MAAMmD,EAAyB,CAAC,eAChC,IAAIC,EAAW,GAEf,IAAIC,EAAkBL,EACtB,IAAKK,EAAiB,CAClB,MAAMC,EAAoBtD,EAAON,YAAY6D,iBAAkC,kBAC/E,MAAMC,EAAiBF,EAAkBpB,OAAS,EAClD,MAAMuB,IAAaV,EAEnBM,EAAkBI,GAAYD,EAAiB,MAAQ,I,CAG3D,GAAIH,EAAiBF,EAAaO,KAAK,MACvC,GAAIT,EAAU,CACVG,EAAWO,EAAA,QAAMC,MAAM,gBAAgBtB,EAAI,iC,CAE/C,GAAIY,EAAU,CACVE,EAAWO,EAAA,QAAMC,MAAM,gBAAgBtB,EAAI,kCAC3Ca,EAAaO,KAAK,iB,CAEtB,OACIC,EAAA,SACIE,QAAS7D,EAAO8D,QAChBF,MAAOT,EAAaY,KAAK,MAEzBJ,EAAA,QAAMK,KAAK,SACNjB,EAAQT,EAAIS,GAAStB,UACrB2B,GAIjB,C,SAEgBI,EAAexD,EAAqBiE,GAChD,OAAOjE,EAAOkE,cAAc,UAAUD,SAAkB,IAC5D,C,SAEgBE,EACZnE,GAaA,MAAMoE,UAAEA,GAAcpE,EACtB,IAAKoE,EAAW,OAGhB,MAAMC,EAAyBC,SAASC,WACxC,GAAIH,IAAcC,EAAwB,CACtCrE,EAAOoE,UAAY3C,UACnB,M,CAIJ,GAAI,cAAezB,EAAQA,EAAOgD,UAAY,KAC9ChD,EAAO+C,MAAQT,EAAI8B,GACnBpE,EAAOoE,UAAY3C,SACvB,C,SAKgB+C,EAAkBxE,EAAgByE,EAAiBC,EAAiBC,GAChF,UAAW3E,EAAOyE,KAAa,YAAa,OAG5C,GAAIzE,EAAOyE,GAAU,CACjBG,EAAyB5E,EAAQyE,EAAS,O,CAG9CzE,EAAO0E,GAAW1E,EAAOyE,GAEzB,GAAIE,EAAe,QACR3E,EAAOyE,E,CAEtB,C,SAEgBG,EACZ5E,EACA6E,EACAC,GAEA,GAAI1D,OAAO2D,SAASC,WAAa,aAAe5D,OAAO2D,SAASE,OAAS,wBAAyB,CAC9F,GAAIjF,EAAO6E,KAAwB,YAAa,OAEhD,MAAMK,EAAgBlF,EAAOmF,YAAYnB,KAAK9C,cAAckE,MAAM,GAElE,OAAQN,GACJ,IAAK,OACD,GAAID,IAAuB,QAAUK,IAAkB,MAAO,CAC1DG,QAAQC,KACJ,8R,KAED,CACHD,QAAQC,KACJ,gBAAgBT,WAA4BK,sF,CAGpD,MAEJ,IAAK,WACDG,QAAQC,KACJ,gBAAgBT,QAAyBK,uFAE7C,MAEJ,IAAK,SACDG,QAAQC,KACJ,cAAcT,QAAyBK,uFAE3C,MAEJ,IAAK,QACDG,QAAQC,KACJ,aAAaT,QAAyBK,uFAE1C,MAEJ,QACIG,QAAQE,MACJ,0EAAuEV,WAA4BK,2BAAuCL,K,CAI9J,C,SAEgBW,EAAexF,GAC3B,MAAML,EAAOK,EAAOyF,SAAW,SAAW,OAE1C,OACI9B,EAAA,OAAKC,MAAM,sBACPD,EAAA,cACI+B,WAAW,UACXC,YAAW,KACXhG,KAAMA,EAAI,UACF,WAERgE,EAAA,MAAIiC,GAAI5F,EAAO6F,kBACV7F,EAAO8F,SAASC,KAAIC,GACjBrC,EAAA,gBAAY,mBAAmBrB,EAAI0D,QAM3D,C,SAEgBC,EAAiBjG,GAC7B,MAAMkG,EAAoBlG,EAAON,YAAYyG,WAA0BjC,cACnE,uBAEJ,MAAMkC,EAAYF,EAAiBhC,cAAc,cACjDtC,GAAU,KACN,MAAMyE,EAASrG,EAAOsG,cAAgBtG,EAAOuG,SAAWH,EAAUI,wBAAwBH,OAAS,EAEnG,GAAIH,EAAiBO,MAAMC,iBAAiB,YAAc,GAAGL,MAAY,OAEzE,GAAIA,IAAW,EAAG,CACdD,EAAUO,UAAUC,IAAI,aACxBV,EAAiBO,MAAMI,eAAe,S,KACnC,CACHT,EAAUO,UAAUG,OAAO,aAC3BZ,EAAiBO,MAAMM,YAAY,SAAU,GAAGV,M,IAG5D,C,MAEaW,EAAe,K,QACxB,OAAOpE,GAAAnC,EAAAW,OAAOyB,kBAAc,MAAApC,SAAA,SAAAA,EAAEuG,gBAAY,MAAApE,SAAA,SAAAA,EAAAjC,KAAAF,EAAI,E,MAIrCwG,EAAejH,IACxB,IAAKA,EAAOkH,QAAU,CAAC,UAAW,aAAapH,SAASE,EAAOmH,OAAQ,CACnEnH,EAAOkH,OAAS,YAAYlH,EAAOmH,QACnCnH,EAAOmH,MAAQ1F,S"}

package/dist/q2-tecton-elements/p-56df21b0.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as i,g as s}from"./p-a5f18e27.js";import{l as o,a as l,o as n,q as r,i as a,w as c,t as d}from"./p-15ac45d6.js";import{a as h,s as p}from"./p-b7554a79.js";const u="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white, #ffffff);color:var(--t-text, #4d4d4d);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14));height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1, 0.2s ease);border-radius:var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);--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, 4px)));--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}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host([block]) q2-btn,:host([block]){display:block}:host{--comp-select-margin:var(--tct-select-margin, var(--tct-select-margin-top, var(--t-select-margin-top, var(--app-scale-4, 30px))) 0 var(--tct-select-margin-bottom, var(--t-select-margin-bottom, var(--app-scale-4, 30px))));display:block;margin:var(--comp-select-margin)}.q2-select-container{position:relative;display:block}.q2-select-input{margin:0;--tct-input-min-height:var(--tct-select-input-min-height, var(--t-select-input-min-height));--tct-input-max-height:var(--tct-select-input-max-height, var(--t-select-input-max-height, none))}::slotted([slot=_selected-display]){width:100%;min-height:var(--comp-selected-display-height, 44px)}.custom-display-content{position:absolute;bottom:0;left:calc(var(--tct-scale-2, var(--app-scale-2x, 10px)) + 1px);height:44px;width:calc(100% - 34px - var(--tct-scale-3, var(--app-scale-3x, 15px)));overflow:hidden;cursor:pointer;transition:left var(--tct-tween-2, var(--app-tween-1, 0.2s ease))}.custom-display-content:not([hidden]){display:flex;align-items:center}.is-searchable.is-focused .custom-display-content,.is-searchable .custom-display-content:active{left:calc(var(--tct-scale-3, var(--app-scale-3x, 15px)) + 1px)}.has-error .custom-display-content{width:calc(100% - 68px - var(--tct-scale-3, var(--app-scale-3x, 15px)))}.popover-content{display:flex;flex-direction:column-reverse}.popover-bottom-container{position:sticky;bottom:0;z-index:5}.popover-top-container{position:sticky;top:0;z-index:5}.popover-top-container .multi-select-header{padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--app-white);display:flex;gap:var(--app-scale-2x, 10px);align-items:center}.popover-top-container .multi-select-header fieldset{margin:0;padding:0;border:0;display:flex;gap:var(--app-scale-2x, 10px)}.popover-top-container .multi-select-header legend{padding:0;float:left}.popover-top-container .multi-select-header label{cursor:pointer;padding:var(--tct-select-multi-select-option-padding, var(--t-select-multi-select-option-padding, var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px))));font-size:var(--tct-select-multi-select-option-font-size, var(--t-select-multi-select-option-font-size, var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, inherit))));border-radius:var(--tct-select-multi-select-option-radius, var(--t-select-multi-select-option-radius, var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--app-border-radius-1, 4px)))));background:var(--tct-select-multi-select-option-background, var(--tct-select-multi-select-option-bg, var(--t-select-multi-select-option-bg, var(--tct-badge-background, var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent))))));color:var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit))))}.popover-top-container .multi-select-header label:hover{background:var(--tct-select-multi-select-option-hover-background, var(--tct-select-multi-select-option-hover-background-color, var(--t-select-multi-select-option-hover-background-color, var(--tct-btn-badge-hover-bg, var(--t-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--app-gray-l3, #f2f2f2))))))));color:var(--tct-select-multi-select-option-hover-color, var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-hover-font-color, var(--t-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--app-gray-d2, #404040))))))))}.popover-top-container .multi-select-header input:checked+label,.popover-top-container .multi-select-header input:checked+label:enabled:hover{background:var(--tct-select-multi-select-option-active-background, var(--tct-select-multi-select-option-active-background-color, var(--t-select-multi-select-option-active-background-color, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)))));color:var(--tct-select-multi-select-option-active-color, var(--t-select-multi-select-option-active-color, var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--app-white, #ffffff)))))}.popover-top-container .multi-select-header input:disabled+label{opacity:var(--tct-select-multi-select-option-disabled-opacity, var(--t-select-multi-select-option-disabled-opacity, var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--app-disabled-opacity, 0.4)))));cursor:not-allowed}.popover-top-container .multi-select-header input:focus+label{box-shadow:var(--const-double-focus-ring)}";const v=u;const b=class{constructor(i){t(this,i);this.change=e(this,"change",7);this.input=e(this,"input",7);var s;this.scheduledAfterRender=[];this.clickedElsewhere=t=>{const e=t.target;if(e.localName!=="click-elsewhere")return;t.stopPropagation()};this.inputBlurHandler=()=>{this.inputFocused=false};this.inputChangeHandler=t=>{t.stopPropagation()};this.inputClickHandler=async t=>{t.stopPropagation();if(h(this)){return this.executeActionSheet(t)}this.toggleDropdown();this.focusInput()};this.inputFocusHandler=()=>{this.inputFocused=true};this.inputInputHandler=t=>{t.stopPropagation();const e=t.detail.value;const i=!!this.value;if(i)this.clearValue();if(!this.open)this.openDropdownWithoutActiveElement();this.prioritizeSearch=true;this.searchText=e;this.input.emit({query:e})};this.inputKeydownHandler=t=>{if(this.readonly||this.disabled)return;const{key:e,shiftKey:i}=t;const s=e==="Tab"&&i;const o=this.hasPopoverTop||this.hasPopoverBottom;if(o&&(e==="Tab"||s))return;if(h(this,t)&&!o){return this.executeActionSheet(t)}const l=["ArrowDown","ArrowUp","PageDown","PageUp","Home","End","Escape","Tab"];if(this.searchable&&(e===" "||e==="Enter")&&this.inputField.value==""){t.preventDefault();if(!this.open)this.openDropdownWithoutActiveElement()}if(this.searchable&&!l.includes(e))return;if(this.shouldClearSearchText(t))this.clearSearchText();if(e===" ")t.preventDefault();this.optionList.handleExternalKeydown(t)};this.onCustomDisplayClick=t=>{t.stopPropagation();this.focusInput();this.toggleDropdown()};this.onMutationObserved=()=>{const{hostElement:t,hasPopoverTop:e,hasPopoverBottom:i}=this;const s=t.querySelector(".custom-display-content");const o=t.shadowRoot.querySelector('slot[name="q2-select-display"]');const l=!!o?o.assignedNodes().length>0:s.children.length>0;if(this.hasCustomDisplay!==l){this.hasCustomDisplay=l}const n=t.shadowRoot.querySelector('slot[name="popover-top"]');const r=(n===null||n===void 0?void 0:n.assignedNodes().length)>0;if(e!==r){this.hasPopoverTop=r}const a=t.shadowRoot.querySelector('slot[name="popover-bottom"]');const c=(a===null||a===void 0?void 0:a.assignedNodes().length)>0;if(i!==c){this.hasPopoverBottom=c}this.checkSelectedOptions()};this.onOptionListChange=t=>{t.stopPropagation();const{values:e}=t.detail;if(e.length===0)this.showAllOptions();this.handleSelectionChanges(t.detail)};this.onPopoverState=({detail:{open:t,action:e}})=>{if(!t||this.searchText){if(e!=="select"){this.optionList.setActiveElement(null)}this.inputField.focus()}if(this.open===t)return;this.open=t};this.showAllOptions=()=>{this.showSelected=false};this.showSelectedOptions=()=>{this.showSelected=true};this.visibilityToggleKeyDown=t=>{const e=t.key;const i=e==="Tab"&&t.shiftKey;const s=["ArrowLeft","ArrowRight","ArrowUp","ArrowDown"].includes(e);if(s)t.stopPropagation();if(i){t.stopPropagation();if(this.hasPopoverTop)return;this.optionList.setDefaultActiveElement()}};this.hasCustomDisplay=false;this.hasPopoverBottom=false;this.hasPopoverTop=false;this.inputFocused=false;this.open=false;this.prioritizeSearch=false;this.searchText="";this.showSelected=false;this.statusMessage=undefined;this.structuredSelectedOptions=[];this.ariaLabel=undefined;this.clearable=undefined;this.disabled=false;this.errors=undefined;this.hideLabel=undefined;this.hoist=!!((s=window.Tecton)===null||s===void 0?void 0:s.useActionSheets);this.invalid=undefined;this.label=undefined;this.listLabel=o("tecton.element.select.listLabel");this.minRows=3;this.multilineOptions=false;this.multiple=false;this.optional=false;this.placeholder=undefined;this.popDirection=undefined;this.popoverMaxHeight=undefined;this.popoverMode=null;this.readonly=false;this.searchable=false;this.selectedOptions=[];this.value=undefined}disconnectedCallback(){var t;(t=this.mutationObserver)===null||t===void 0?void 0:t.disconnect();this.mutationObserver=null}componentWillLoad(){l(this);this.buildStructuredSelectedOptions();this.handleMultilineOptionsUpdate(this.multilineOptions,false)}componentDidLoad(){const t=new MutationObserver(this.onMutationObserved);t.observe(this.hostElement,{childList:true,subtree:true});this.mutationObserver=t;this.onMutationObserved();n(this.hostElement);setTimeout((()=>this.checkSelectedDisplay()),0)}componentDidRender(){setTimeout((()=>{this.scheduledAfterRender.forEach((t=>t()));this.scheduledAfterRender=[]}),25)}onHostElementChange(t){if(this.readonly||this.disabled)return;if(t.target!==this.hostElement||this.hostElement.onchange)return;if(this.multiple){this.value=null;this.selectedOptions=t.detail.selectedOptions}else{this.value=t.detail.value;this.selectedOptions=[]}}onClearHandler(){this.clearValue()}handleSelectedDisplay(t){if(this.multiple)return;this.inputField.value=t.detail.display}delegateFocus(t){const e=r(t,this.hostElement);const i=this.prioritizeSearch=e&&this.searchable;if(i){this.clearSelectedDisplay()}else if(a(t,this.hostElement)){this.inputField.shadowRoot.querySelector(".input-field").focus()}}handleFocusout(t){const e=d(t,this.hostElement);if(e)this.closeDropdown();this.prioritizeSearch=!e&&this.searchable}onHostElementInput(t){if(!this.searchable||t.target!==this.hostElement||this.hostElement.oninput)return;const e=this.optionElements;const i=this.searchText.trim().toLocaleLowerCase();let s=0;e.forEach((t=>{var e;if(i===""){t.hidden=false;return}const o=((e=t.firstElementChild)===null||e===void 0?void 0:e.tagName)==="Q2-CARD"?t.firstElementChild.title:null;const{display:l="",innerText:n=""}=t;const r=[l,o,n];const a=r.some((t=>{var e;return(e=t===null||t===void 0?void 0:t.toLocaleLowerCase().includes(i))!==null&&e!==void 0?e:false}));t.hidden=!a;if(a)s++}));const l=i?"tecton.element.select.searchable.results":"tecton.element.select.allOptions";const n=i?s:e.length;this.setStatusMessage(o(l,[n]))}keydownHandler(t){this.inputKeydownHandler(t)}async closePopover(){if(!this.open||this.disabled)return;this._togglePopover()}async openPopover(){if(this.open||this.disabled)return;this._togglePopover()}searchOptions(t){if(!this.searchable)return;const{innerInputField:e}=this;e.focus();e.dispatchEvent(new FocusEvent("focus"));e.value=t;e.dispatchEvent(new InputEvent("input"))}async setValue(t,e={closePopover:true}){const i=new Set(Array.isArray(t)?t:[t]);if(!this.open){await this.openPopover();await c()}i.forEach((t=>{var e;(e=this.optionElements.find((e=>e.value===t)))===null||e===void 0?void 0:e.click()}));if(e.closePopover){await this.closePopover();await c()}}ariaLabelObserver(){l(this)}handleMultilineOptionsUpdate(t,e){if(t===e)return;this.optionElements.forEach((e=>e.multiline=t))}openChanged(t){this.scheduledAfterRender.push((async()=>{await c();const{popoverTopContainer:e,popoverElement:i}=this;const s=t&&(e===null||e===void 0?void 0:e.offsetHeight)||0;if(s){i.style.setProperty("--comp-popover-top-container-height",`${s}px`)}else{i.style.removeProperty("--comp-popover-top-container-height")}}))}buildStructuredSelectedOptions(){const{multiple:t,selectedOptions:e,value:i}=this;if(t){this.structuredSelectedOptions=!!(e===null||e===void 0?void 0:e.length)?e.map((t=>typeof t==="string"?{value:t}:t)):[]}else{this.structuredSelectedOptions=i?[{value:i}]:[]}}valueUpdated(){if(this.multiple)return;this.clearSearchText()}get badgeValue(){var t,e;if(!this.multiple)return null;const i=(e=(t=this.selectedOptions)===null||t===void 0?void 0:t.length)!==null&&e!==void 0?e:0;if(this.open&&this.searchable)return i?`${i}`:null;else return i>1?`+${i-1}`:null}get firstSelectedOptionElement(){const{firstSelectedValue:t}=this;return t?this.optionElements.find((({value:e})=>e===t)):null}get firstSelectedValue(){var t;return this.multiple?(t=this.selectedOptions)===null||t===void 0?void 0:t[0]:this.value}get innerInputContainer(){var t,e;return(e=(t=this.inputField)===null||t===void 0?void 0:t.shadowRoot)===null||e===void 0?void 0:e.querySelector(".input-container")}get innerInputField(){var t,e;return(e=(t=this.inputField)===null||t===void 0?void 0:t.shadowRoot)===null||e===void 0?void 0:e.querySelector(".input-field")}get optionElements(){return Array.from(this.hostElement.querySelectorAll("q2-option"))}get popoverMinHeight(){const{minRows:t}=this;const e=this.hostElement.querySelector("q2-option:not([hidden])");let i=e&&window.getComputedStyle(e).minHeight;if(!i||i==="0px")i="44px";return t*parseInt(i)}get selectedDisplay(){if(this.prioritizeSearch||this.searchText)return this.searchText;if(this.hasCustomDisplay)return"";return this.multiple?this.calculateMultiSelectSelectedDisplay():this.calculateSingleSelectSelectedDisplay()}get selectedDisplaySlot(){return this.hostElement.querySelector('[slot="_selected-display"]')}get wrapperClasses(){const{errors:t}=this;const e=["q2-select-container"];if(Array.isArray(t)&&t.length>0)e.push("has-error");if(this.inputFocused)e.push("is-focused");if(this.searchable)e.push("is-searchable");return e.join(" ")}_togglePopover(){const{innerInputField:t}=this;t===null||t===void 0?void 0:t.click();t===null||t===void 0?void 0:t.focus();t.dispatchEvent(new FocusEvent("focus"))}calculateMultiSelectSelectedDisplay(){var t,e,i;const{firstSelectedOptionElement:s,firstSelectedValue:l,multilineOptions:n}=this;if(!l)return"";if(s===null||s===void 0?void 0:s.display)return o(s.display);if(n&&this.searchable)return this.searchText;if(n)return"";return(i=(e=(t=s===null||s===void 0?void 0:s.textContent)===null||t===void 0?void 0:t.trim())!==null&&e!==void 0?e:s===null||s===void 0?void 0:s.value)!==null&&i!==void 0?i:l}calculateSingleSelectSelectedDisplay(){var t;const{firstSelectedOptionElement:e,multilineOptions:i}=this;if(i){return(e===null||e===void 0?void 0:e.display)&&o(e.display)||this.value||""}else{return(e===null||e===void 0?void 0:e.display)&&o(e.display)||((t=e===null||e===void 0?void 0:e.textContent)===null||t===void 0?void 0:t.trim())||this.value||""}}checkSelectedDisplay(){let t=this.selectedDisplaySlot;const{value:e,multiple:i,selectedOptions:s,multilineOptions:o,firstSelectedOptionElement:l,prioritizeSearch:n}=this;const r=!e&&i&&!(s===null||s===void 0?void 0:s.length);if(n||!o||r)return this.clearSelectedDisplay();if(!l||l.display)return this.clearSelectedDisplay();const a=l.firstElementChild.cloneNode(true);a.querySelectorAll("[hide-on-select]").forEach((t=>t.remove()));if(t){const e=t.clientHeight===0?"auto":`${t.clientHeight}px`;t.style.setProperty("--comp-selected-display-height",e);if(t.firstElementChild.outerHTML!==a.outerHTML){t.replaceChild(a,t.firstElementChild)}}else{t=document.createElement("div");t.slot="_selected-display";t.appendChild(a);this.hostElement.appendChild(t)}return t}checkSelectedDisplayHeight(){const{selectedDisplaySlot:t}=this;if(!t)return;t.style.setProperty("--comp-selected-display-height","44px")}checkSelectedOptions(){const{multiple:t,selectedOptions:e,value:i}=this;this.optionElements.forEach((s=>{if(t){s.selected=e.includes(s.value)}else{s.selected=s.value===i}}))}clearSearchText(){if(!this.searchText)return;this.searchText="";this.input.emit({query:""})}clearSelectedDisplay(){var t;(t=this.selectedDisplaySlot)===null||t===void 0?void 0:t.remove()}clearValue(){const{multiple:t}=this;this.value="";this.selectedOptions=[];this.change.emit({value:t?undefined:"",selectedOptions:t?[]:undefined})}closeDropdown(){this.open=false;this.clearSearchText()}async executeActionSheet(t){const e=await p(this,t);this.handleSelectionChanges(e)}focusInput(){var t;(t=this.inputField)===null||t===void 0?void 0:t.dispatchEvent(new FocusEvent("focus"))}handleSelectionChanges(t){const{value:e="",values:i=[]}=t;const s=i.map((t=>t.value));const{multiple:o}=this;if(!this.hostElement.onchange){this.selectedOptions=s}this.change.emit({value:o?undefined:e,selectedOptions:o?s:undefined})}openDropdownWithoutActiveElement(){if(this.readonly||this.disabled)return;this.optionList.setActiveElement(null);this.open=true}setStatusMessage(t){clearTimeout(this.statusMessageTimer);this.statusMessage="";this.statusMessageTimer=setTimeout((()=>{this.statusMessage=t}),1e3)}shouldClearSearchText(t){return this.searchable&&!!this.searchText&&t.key==="Escape"}toggleDropdown(){if(this.readonly||this.disabled)return;if(this.open&&!this.searchText){this.closeDropdown()}else{this.openDropdownWithoutActiveElement()}}renderCustomDisplay(){const t=this.checkSelectedDisplay();if(!t)return;this.checkSelectedDisplayHeight();return i("slot",{name:"_selected-display",slot:"custom-display"})}renderOptionsDropdown(){return i("q2-popover",{ref:t=>this.popoverElement=t,controlElement:this.innerInputContainer,open:this.open,"max-height":this.popoverMaxHeight,minHeight:this.popoverMinHeight,direction:this.popDirection,mode:this.popoverMode||undefined,block:true},i("div",{class:"popover-content"},i("q2-option-list",{onPopoverState:this.onPopoverState,ref:t=>this.optionList=t,type:"listbox",id:"option-list","show-selected":this.showSelected,label:this.listLabel,multiple:this.multiple,selectedOptions:this.structuredSelectedOptions,onChange:this.onOptionListChange},i("slot",null)),i("div",{class:"popover-top-container",ref:t=>this.popoverTopContainer=t,hidden:!this.multiple&&!this.hasPopoverTop,tabindex:"-1"},i("slot",{name:"popover-top"}),this.multiple&&this.renderVisibilityToggle())),i("div",{class:"popover-bottom-container",hidden:!this.hasPopoverBottom,tabindex:"-1"},i("slot",{name:"popover-bottom"})))}renderVisibilityToggle(){var t,e;const s=(e=(t=this.selectedOptions)===null||t===void 0?void 0:t.length)!==null&&e!==void 0?e:0;const{showSelected:l}=this;return i("div",{class:"multi-select-header"},i("fieldset",null,i("legend",{"aria-label":o("tecton.element.select.multiHeader.showing")},o("tecton.element.select.multiHeader.showing")),i("div",null,i("input",{class:"sr",type:"radio",id:"all",name:"viewDisplay",value:"all",checked:!l,"aria-label":o("tecton.element.select.multiHeader.allAriaLabel"),"test-id":"allOptionsButton",onClick:this.showAllOptions,onKeyDown:this.visibilityToggleKeyDown}),i("label",{htmlFor:"all"},o("tecton.element.select.multiHeader.all"))),i("div",null,i("input",{class:"sr",type:"radio",id:"selected",disabled:s===0,name:"viewDisplay",value:"selected","aria-label":o("tecton.element.select.multiHeader.selectedAriaLabel",[s]),checked:l,"test-id":"selectedOptionsButton",onClick:this.showSelectedOptions,onKeyDown:this.visibilityToggleKeyDown}),i("label",{htmlFor:"selected"},o("tecton.element.select.multiHeader.selected",[s])))))}render(){var t;return i("click-elsewhere",{key:"1b93bb0fd1b8d21fa839387a931fb9d97b4e2906",class:this.wrapperClasses,onChange:this.clickedElsewhere},i("div",{key:"8fbbb1afec8161204bd25b698f58ef913c959344","aria-live":"polite","aria-atomic":"true",role:"status",class:"sr"},this.statusMessage),i("q2-input",{key:"b67fd2569162a1009ff2868b73091859ba7005ba",ref:t=>this.inputField=t,class:"q2-select-input",label:this.label&&o(this.label)||"",value:this.selectedDisplay,clearable:this.clearable&&(!!this.value||!!((t=this.selectedOptions)===null||t===void 0?void 0:t.length))||undefined,errors:Array.isArray(this.errors)&&this.errors.length>0&&this.errors.map((t=>o(t)))||this.invalid&&["tecton.element.select.invalid"]||[],disabled:this.disabled,optional:this.optional,readonly:!!this.readonly,placeholder:this.placeholder||undefined,hideLabel:this.hideLabel,ariaExpanded:`${this.open}`,ariaControls:"option-list",ariaHaspopup:"listbox","test-id":"toggleDropdown","hide-messages":true,iconRight:"chevron-down",onClick:this.inputClickHandler,onInput:this.inputInputHandler,onKeyDown:this.inputKeydownHandler,onFocus:this.inputFocusHandler,onBlur:this.inputBlurHandler,onChange:this.inputChangeHandler,badgeValue:this.badgeValue,badgeTheme:this.inputFocused?"primary":undefined,_role:"combobox",_preventEntry:!this.searchable},this.renderCustomDisplay()),i("div",{key:"a0a3f6cabce2f0d64346a8aa71c89e6a93b2b6e8",class:"custom-display-content",hidden:!this.hasCustomDisplay||!!this.searchText,onClick:this.onCustomDisplayClick},i("slot",{key:"bf07ea5bd0ea6354e1d0631339944c516e975dc3",name:"q2-select-display"})),this.renderOptionsDropdown())}get hostElement(){return s(this)}static get watchers(){return{ariaLabel:["ariaLabelObserver"],multilineOptions:["handleMultilineOptionsUpdate"],open:["openChanged"],value:["buildStructuredSelectedOptions","valueUpdated"],selectedOptions:["buildStructuredSelectedOptions"]}}};b.style=v;export{b as q2_select};
-//# sourceMappingURL=p-56df21b0.entry.js.map

package/dist/q2-tecton-elements/p-56df21b0.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["q2SelectCss","Q2SelectStyle0","Q2Select","this","scheduledAfterRender","clickedElsewhere","event","target","localName","stopPropagation","inputBlurHandler","inputFocused","inputChangeHandler","inputClickHandler","async","shouldShowActionSheet","executeActionSheet","toggleDropdown","focusInput","inputFocusHandler","inputInputHandler","eventValue","detail","value","shouldClearValue","clearValue","open","openDropdownWithoutActiveElement","prioritizeSearch","searchText","input","emit","query","inputKeydownHandler","readonly","disabled","key","shiftKey","isShiftTab","hasSlot","hasPopoverTop","hasPopoverBottom","keysForOptionListToHandle","searchable","inputField","preventDefault","includes","shouldClearSearchText","clearSearchText","optionList","handleExternalKeydown","onCustomDisplayClick","onMutationObserved","hostElement","slotContainer","querySelector","displaySlot","shadowRoot","hasCustomDisplay","assignedNodes","length","children","popTopSlot","topSlotHasNode","popBottomSlot","bottomSlotHasNode","checkSelectedOptions","onOptionListChange","values","showAllOptions","handleSelectionChanges","onPopoverState","action","setActiveElement","focus","showSelected","showSelectedOptions","visibilityToggleKeyDown","isRadioControlKey","setDefaultActiveElement","_a","window","Tecton","useActionSheets","loc","disconnectedCallback","mutationObserver","disconnect","componentWillLoad","handleAriaLabel","buildStructuredSelectedOptions","handleMultilineOptionsUpdate","multilineOptions","componentDidLoad","observer","MutationObserver","observe","childList","subtree","overrideFocus","setTimeout","checkSelectedDisplay","componentDidRender","forEach","fn","onHostElementChange","onchange","multiple","selectedOptions","onClearHandler","handleSelectedDisplay","display","delegateFocus","fromHost","isRelatedTargetWithinHost","clearSelectedDisplay","isEventFromElement","handleFocusout","isLeavingHost","isHostLosingFocus","closeDropdown","onHostElementInput","oninput","options","optionElements","trim","toLocaleLowerCase","matchedCount","option","hidden","title","firstElementChild","tagName","innerText","searchParams","matched","some","text","statusMessageLocString","count","setStatusMessage","keydownHandler","closePopover","_togglePopover","openPopover","searchOptions","innerInputField","dispatchEvent","FocusEvent","InputEvent","setValue","valuesSet","Set","Array","isArray","waitForNextPaint","find","click","ariaLabelObserver","newValue","oldValue","element","multiline","openChanged","isOpen","push","popoverTopContainer","popoverElement","height","offsetHeight","style","setProperty","removeProperty","structuredSelectedOptions","map","valueUpdated","badgeValue","optionsLength","_b","firstSelectedOptionElement","firstSelectedValue","innerInputContainer","from","querySelectorAll","popoverMinHeight","minRows","firstOption","minHeight","getComputedStyle","parseInt","selectedDisplay","calculateMultiSelectSelectedDisplay","calculateSingleSelectSelectedDisplay","selectedDisplaySlot","wrapperClasses","errors","classes","join","_c","textContent","namedSlot","hasNoValue","selectionClone","cloneNode","remove","clientHeight","outerHTML","replaceChild","document","createElement","slot","appendChild","checkSelectedDisplayHeight","selected","change","undefined","result","showActionSheetList","changeDetails","selectedOptionValues","message","clearTimeout","statusMessageTimer","statusMessage","renderCustomDisplay","hasSelectedDisplay","h","name","renderOptionsDropdown","ref","el","controlElement","popoverMaxHeight","direction","popDirection","mode","popoverMode","block","class","type","id","label","listLabel","onChange","tabindex","renderVisibilityToggle","selectedOptionsCount","checked","onClick","onKeyDown","htmlFor","render","role","clearable","error","invalid","optional","placeholder","hideLabel","ariaExpanded","ariaControls","ariaHaspopup","iconRight","onInput","onFocus","onBlur","badgeTheme","_role","_preventEntry"],"sources":["src/components/q2-select/q2-select.scss?tag=q2-select&encapsulation=shadow","src/components/q2-select/q2-select.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../../styles/dropdowns';\n\n:host {\n    --comp-select-margin: #{var-list(\n            --tct-select-margin,\n            unquote(\n                '#{var-list(var-prefixer(select-margin-top), --app-scale-4, 30px)} 0 #{var-list(var-prefixer(select-margin-bottom), --app-scale-4, 30px)}'\n            )\n        )};\n    display: block;\n    margin: var(--comp-select-margin);\n}\n\n.q2-select-container {\n    position: relative;\n    display: block;\n}\n\n.q2-select-input {\n    margin: 0;\n\n    --tct-input-min-height: #{var-list(var-prefixer(select-input-min-height))};\n    --tct-input-max-height: #{var-list(var-prefixer(select-input-max-height), none)};\n}\n\n::slotted([slot='_selected-display']) {\n    width: 100%;\n    min-height: var(--comp-selected-display-height, 44px);\n}\n\n.custom-display-content {\n    position: absolute;\n    bottom: 0;\n    left: calc(var-list(--tct-scale-2, --app-scale-2x, 10px) + 1px);\n    height: 44px;\n    width: calc(100% - 34px - var-list(--tct-scale-3, --app-scale-3x, 15px));\n    overflow: hidden;\n    cursor: pointer;\n    transition: left var-list(--tct-tween-2, --app-tween-1, unquote('0.2s ease'));\n}\n\n.custom-display-content:not([hidden]) {\n    display: flex;\n    align-items: center;\n}\n\n.is-searchable.is-focused .custom-display-content,\n.is-searchable .custom-display-content:active {\n    left: calc(var-list(--tct-scale-3, --app-scale-3x, 15px) + 1px);\n}\n\n.has-error .custom-display-content {\n    width: calc(100% - 68px - var-list(--tct-scale-3, --app-scale-3x, 15px));\n}\n\n.popover-content {\n    display: flex;\n    flex-direction: column-reverse;\n}\n\n.popover-bottom-container {\n    position: sticky;\n    bottom: 0;\n    z-index: 5;\n}\n\n.popover-top-container {\n    position: sticky;\n    top: 0;\n    z-index: 5;\n    .multi-select-header {\n        padding: var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-2, var(--app-scale-2x, 10px));\n        background: var(--app-white);\n        display: flex;\n        gap: var-list(--app-scale-2x, 10px);\n        align-items: center;\n\n        fieldset {\n            margin: 0;\n            padding: 0;\n            border: 0;\n            display: flex;\n            gap: var-list(--app-scale-2x, 10px);\n        }\n\n        legend {\n            padding: 0;\n            float: left;\n        }\n\n        label {\n            cursor: pointer;\n            padding: var-list(\n                var-prefixer(select-multi-select-option-padding),\n                var-prefixer(btn-badge-padding),\n                unquote('2px 5px')\n            );\n            font-size: var-list(\n                var-prefixer(select-multi-select-option-font-size),\n                var-prefixer(btn-badge-font-size),\n                inherit\n            );\n            border-radius: var-list(\n                var-prefixer(select-multi-select-option-radius),\n                var-prefixer(btn-badge-border-radius),\n                --app-border-radius-1,\n                4px\n            );\n            background: var-list(\n                --tct-select-multi-select-option-background,\n                var-prefixer(select-multi-select-option-bg),\n                --tct-badge-background,\n                var-prefixer(btn-badge-bg),\n                transparent\n            );\n            color: var-list(\n                var-prefixer(select-multi-select-option-color),\n                var-prefixer(btn-badge-font-color),\n                inherit\n            );\n\n            &:hover {\n                background: var-list(\n                    --tct-select-multi-select-option-hover-background,\n                    var-prefixer(select-multi-select-option-hover-background-color),\n                    var-prefixer(btn-badge-hover-bg),\n                    var-prefixer(gray-14),\n                    --app-gray-l3,\n                    #f2f2f2\n                );\n                color: var-list(\n                    --tct-select-multi-select-option-hover-color,\n                    var-prefixer(select-multi-select-option-color),\n                    var-prefixer(btn-badge-hover-font-color),\n                    var-prefixer(gray-5),\n                    --app-gray-d2,\n                    #404040\n                );\n            }\n        }\n\n        input {\n            &:checked + label {\n                &,\n                &:enabled:hover {\n                    background: var-list(\n                        --tct-select-multi-select-option-active-background,\n                        var-prefixer(select-multi-select-option-active-background-color),\n                        var-prefixer(btn-primary-bg),\n                        #2e2e2e\n                    );\n                    color: var-list(\n                        var-prefixer(select-multi-select-option-active-color),\n                        var-prefixer(btn-primary-font-color),\n                        --app-white,\n                        #ffffff\n                    );\n                }\n            }\n\n            &:disabled + label {\n                opacity: var-list(\n                    var-prefixer(select-multi-select-option-disabled-opacity),\n                    var-prefixer(btn-disabled-opacity),\n                    --app-disabled-opacity,\n                    0.4\n                );\n                cursor: not-allowed;\n            }\n\n            &:focus + label {\n                box-shadow: var(--const-double-focus-ring);\n            }\n        }\n    }\n}\n","import {\n    Component,\n    Prop,\n    Element,\n    h,\n    Listen,\n    State,\n    EventEmitter,\n    Event,\n    ComponentInterface,\n    Watch,\n    Method,\n} from '@stencil/core';\nimport { IEventDetail, Q2InputCustomEvent, Q2OptionListCustomEvent } from 'src/components';\nimport {\n    handleAriaLabel,\n    isEventFromElement,\n    isHostLosingFocus,\n    isRelatedTargetWithinHost,\n    loc,\n    overrideFocus,\n    waitForNextPaint,\n} from '../../utils';\nimport { IOptionValue } from '../q2-option-list/q2-option-list';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\n\n@Component({ tag: 'q2-select', shadow: true, styleUrl: 'q2-select.scss' })\nexport class Q2Select implements ComponentInterface {\n    // #region Own Properties\n\n    inputField?: HTMLQ2InputElement;\n    mutationObserver: MutationObserver;\n    optionList: HTMLQ2OptionListElement;\n    popoverElement?: HTMLQ2PopoverElement;\n    popoverTopContainer?: HTMLDivElement;\n    scheduledAfterRender: (() => void)[] = [];\n    statusMessageTimer: NodeJS.Timeout;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    hasCustomDisplay: boolean = false;\n\n    @State()\n    hasPopoverBottom: boolean = false;\n\n    @State()\n    hasPopoverTop: boolean = false;\n\n    @State()\n    inputFocused: boolean = false;\n\n    @State()\n    open: boolean = false;\n\n    @State()\n    prioritizeSearch: boolean = false;\n\n    @State()\n    searchText: string = '';\n\n    @State()\n    showSelected: boolean = false;\n\n    @State()\n    statusMessage: string;\n\n    @State()\n    structuredSelectedOptions: IOptionValue[] = [];\n\n    // #endregion\n    // #region Public Property API\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** Renders an icon button when the field is non-empty. Pressing the button clears all input from the field. */\n    @Prop({ reflect: true })\n    clearable: boolean;\n\n    /** Disables all interaction with the field and leverages the disabled visual style of `q2-input`. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /**\n     * The presence of `errors` will mark the field as invalid, putting it into an error state.\n     * @localizable\n     */\n    @Prop()\n    errors: string[];\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * Instructs the component to use the action sheet workflow for displaying its options.\n     *\n     * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n     * @warning\n     * If your `q2-select` renders inside of an iframe, and you are using multiline/robust content options,\n     * any custom CSS you apply to your options will not get passed up to the platform which displays the action sheet.\n     * For this reason, we strongly suggest using the [q2-card](https://tecton.q2developer.com/design-system/q2-card/) component since its styling is managed by Tecton.\n     */\n    @Prop()\n    hoist: boolean = !!window.Tecton?.useActionSheets;\n\n    /** Determines whether to show an error state. Its primary use-case is for an unfilled field. */\n    @Prop({ reflect: true })\n    invalid: boolean;\n\n    /**\n     * The text that will be used as the label for the field.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /**\n     * Determines the label that is applied to the option list for accessibility purposes.\n     * @localizable\n     */\n    @Prop()\n    listLabel: string = loc('tecton.element.select.listLabel');\n\n    /** The minimum number of rows the component will try to display below or above the component when opened. */\n    @Prop()\n    minRows: number = 3;\n\n    /** Enables text wrapping for `q2-option` elements. When `false`, the text truncates and does not wrap. */\n    @Prop({ reflect: true })\n    multilineOptions: boolean = false;\n\n    /** Enables multi-select functionality. */\n    @Prop({ reflect: true })\n    multiple: boolean = false;\n\n    /** Appends \"(optional)\" to the field label, and sets `aria-required` on the nested input tag to `false`. */\n    @Prop({ reflect: true })\n    optional: boolean = false;\n\n    /**\n     * Text that appears within the field when it is blurred and empty.\n     * Placeholder text disappears when the user selects an option.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    placeholder: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true })\n    popDirection: 'up' | 'down';\n\n    /**\n     * Force the maximum height of the popover. This value will be interpreted as pixels.\n     * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n     */\n    @Prop()\n    popoverMaxHeight: number;\n\n    /**\n     * Determines the display mode of the popover.\n     *\n     * Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning.\n     *\n     * @info\n     * This is a temporary solution to work around styling issues related to using fixed positioning for the popover\n     * when nested inside of elements with transform properties. This will be removed once the popover API is available\n     * for use.\n     */\n    @Prop({ mutable: true })\n    popoverMode: 'legacy' = null;\n\n    /**\n     * Appends \"(read only)\" to the field label, and field becomes unusable, but remains focusable.\n     * Takes priority over `optional` if both are `true`.\n     */\n    @Prop({ reflect: true })\n    readonly: boolean = false;\n\n    /** Enables search functionality. */\n    @Prop({ reflect: true })\n    searchable: boolean = false;\n\n    /**\n     * Each item in this array should correspond to the value of a `q2-option` element.\n     * This property is only relevant for `multiple` (i.e., multi-select) implementations.\n     */\n    @Prop({ mutable: true })\n    selectedOptions: string[] = [];\n\n    /**\n     * The current value for the select. This should correspond to the value of a nested q2-option element.\n     * This property is only relevant for single-select implementations.\n     */\n    @Prop({ mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when an option is selected or deselected.\n     *\n     * When the multi-select is enabled, the `value` property will be `undefined` and the `selectedOptions` property\n     * will contain the selected option values.\n     *\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ value: string; selectedOptions: string[] }>;\n\n    /**\n     * Emitted when the input value changes.\n     *\n     * Requires the `searchable` prop to be set to `true`.\n     */\n    @Event()\n    input: EventEmitter<{ query: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n        this.buildStructuredSelectedOptions();\n        this.handleMultilineOptionsUpdate(this.multilineOptions, false);\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, subtree: true });\n        this.mutationObserver = observer;\n        this.onMutationObserved();\n        overrideFocus(this.hostElement);\n        setTimeout(() => this.checkSelectedDisplay(), 0);\n    }\n\n    componentDidRender() {\n        setTimeout(() => {\n            this.scheduledAfterRender.forEach(fn => fn());\n            this.scheduledAfterRender = [];\n        }, 25);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent<{ value: string; selectedOptions: string[] }>) {\n        if (this.readonly || this.disabled) return;\n        if (event.target !== this.hostElement || this.hostElement.onchange) return;\n        if (this.multiple) {\n            this.value = null;\n            this.selectedOptions = event.detail.selectedOptions;\n        } else {\n            this.value = event.detail.value;\n            this.selectedOptions = [];\n        }\n    }\n\n    @Listen('clear')\n    onClearHandler() {\n        this.clearValue();\n    }\n\n    @Listen('displayChanged')\n    handleSelectedDisplay(event: CustomEvent) {\n        if (this.multiple) return;\n        this.inputField.value = event.detail.display;\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        const fromHost = isRelatedTargetWithinHost(event, this.hostElement);\n        const prioritizeSearch = (this.prioritizeSearch = fromHost && this.searchable);\n        if (prioritizeSearch) {\n            this.clearSelectedDisplay();\n        } else if (isEventFromElement(event, this.hostElement)) {\n            this.inputField.shadowRoot.querySelector<HTMLElement>('.input-field').focus();\n        }\n    }\n\n    @Listen('focusout')\n    handleFocusout(event: FocusEvent) {\n        const isLeavingHost = isHostLosingFocus(event, this.hostElement);\n        if (isLeavingHost) this.closeDropdown();\n        this.prioritizeSearch = !isLeavingHost && this.searchable;\n    }\n\n    @Listen('input')\n    onHostElementInput(event: CustomEvent) {\n        if (!this.searchable || event.target !== this.hostElement || this.hostElement.oninput) return;\n        const options = this.optionElements;\n        const query = this.searchText.trim().toLocaleLowerCase();\n        let matchedCount = 0;\n        options.forEach(option => {\n            if (query === '') {\n                option.hidden = false;\n                return;\n            }\n\n            const title =\n                option.firstElementChild?.tagName === 'Q2-CARD'\n                    ? (option.firstElementChild as HTMLQ2CardElement).title\n                    : null;\n            const { display = '', innerText = '' } = option;\n            const searchParams = [display, title, innerText];\n            const matched = searchParams.some(text => text?.toLocaleLowerCase().includes(query) ?? false);\n\n            option.hidden = !matched;\n            if (matched) matchedCount++;\n        });\n\n        const statusMessageLocString = query\n            ? 'tecton.element.select.searchable.results'\n            : 'tecton.element.select.allOptions';\n        const count = query ? matchedCount : options.length;\n        this.setStatusMessage(loc(statusMessageLocString, [count]));\n    }\n\n    @Listen('keydown')\n    keydownHandler(event: KeyboardEvent) {\n        this.inputKeydownHandler(event);\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the `<input>` to hide the popover if it is visible.\n     *\n     * @testOnly\n     */\n    @Method()\n    async closePopover() {\n        if (!this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the `<input>` to display the popover if it is hidden.\n     *\n     * @testOnly\n     */\n    @Method()\n    async openPopover() {\n        if (this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates focusing the `<input>`, entering the provided value, and emitting an `input` event.\n     *\n     * @warning\n     * Only applicable when the input is searchable.\n     *\n     * @testOnly\n     */\n    @Method()\n    searchOptions(query: string) {\n        if (!this.searchable) return;\n\n        const { innerInputField } = this;\n        innerInputField.focus();\n        innerInputField.dispatchEvent(new FocusEvent('focus'));\n        innerInputField.value = query;\n        innerInputField.dispatchEvent(new InputEvent('input'));\n    }\n\n    /**\n     * Emulates clicking the `<input>` to display the popover and selecting the option(s) with the specified value(s).\n     *\n     * If the multi-select is enabled and the `closePopover` argument is `true` (default), the popover will be closed\n     * after the option(s) are selected.\n     *\n     * @testOnly\n     */\n    @Method()\n    async setValue(values: string | string[], options: { closePopover?: boolean } = { closePopover: true }) {\n        const valuesSet = new Set(Array.isArray(values) ? values : [values]);\n        if (!this.open) {\n            await this.openPopover();\n            await waitForNextPaint();\n        }\n\n        valuesSet.forEach(value => {\n            this.optionElements.find(option => option.value === value)?.click();\n        });\n\n        if (options.closePopover) {\n            await this.closePopover();\n            await waitForNextPaint();\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('multilineOptions')\n    handleMultilineOptionsUpdate(newValue, oldValue) {\n        if (newValue === oldValue) return;\n        this.optionElements.forEach(element => (element.multiline = newValue));\n    }\n\n    @Watch('open')\n    openChanged(isOpen: boolean) {\n        this.scheduledAfterRender.push(async () => {\n            await waitForNextPaint();\n            const { popoverTopContainer, popoverElement } = this;\n            const height = (isOpen && popoverTopContainer?.offsetHeight) || 0;\n            if (height) {\n                popoverElement.style.setProperty('--comp-popover-top-container-height', `${height}px`);\n            } else {\n                popoverElement.style.removeProperty('--comp-popover-top-container-height');\n            }\n        });\n    }\n\n    @Watch('value')\n    @Watch('selectedOptions')\n    buildStructuredSelectedOptions() {\n        const { multiple, selectedOptions, value } = this;\n        if (multiple) {\n            this.structuredSelectedOptions = !!selectedOptions?.length\n                ? selectedOptions.map(option => (typeof option === 'string' ? { value: option } : option))\n                : [];\n        } else {\n            this.structuredSelectedOptions = value ? [{ value }] : [];\n        }\n    }\n\n    @Watch('value')\n    valueUpdated() {\n        if (this.multiple) return;\n        this.clearSearchText();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get badgeValue(): string {\n        if (!this.multiple) return null;\n        const optionsLength = this.selectedOptions?.length ?? 0;\n        if (this.open && this.searchable) return optionsLength ? `${optionsLength}` : null;\n        else return optionsLength > 1 ? `+${optionsLength - 1}` : null;\n    }\n\n    get firstSelectedOptionElement() {\n        const { firstSelectedValue } = this;\n        return firstSelectedValue ? this.optionElements.find(({ value }) => value === firstSelectedValue) : null;\n    }\n\n    get firstSelectedValue() {\n        return this.multiple ? this.selectedOptions?.[0] : this.value;\n    }\n\n    get innerInputContainer(): HTMLElement {\n        return this.inputField?.shadowRoot?.querySelector('.input-container');\n    }\n\n    get innerInputField(): HTMLInputElement | HTMLButtonElement {\n        return this.inputField?.shadowRoot?.querySelector('.input-field');\n    }\n\n    get optionElements() {\n        return Array.from(this.hostElement.querySelectorAll<HTMLQ2OptionElement>('q2-option'));\n    }\n\n    get popoverMinHeight() {\n        const { minRows } = this;\n        const firstOption = this.hostElement.querySelector<HTMLQ2OptionElement>('q2-option:not([hidden])');\n        let minHeight = firstOption && window.getComputedStyle(firstOption).minHeight;\n\n        // Safari doesn't return a min-height for non-visible items\n        if (!minHeight || minHeight === '0px') minHeight = '44px';\n\n        return minRows * parseInt(minHeight);\n    }\n\n    get selectedDisplay() {\n        if (this.prioritizeSearch || this.searchText) return this.searchText;\n        if (this.hasCustomDisplay) return '';\n        return this.multiple ? this.calculateMultiSelectSelectedDisplay() : this.calculateSingleSelectSelectedDisplay();\n    }\n\n    get selectedDisplaySlot() {\n        return this.hostElement.querySelector<HTMLElement>('[slot=\"_selected-display\"]');\n    }\n\n    get wrapperClasses() {\n        const { errors } = this;\n        const classes = ['q2-select-container'];\n        if (Array.isArray(errors) && errors.length > 0) classes.push('has-error');\n        if (this.inputFocused) classes.push('is-focused');\n        if (this.searchable) classes.push('is-searchable');\n        return classes.join(' ');\n    }\n\n    _togglePopover() {\n        const { innerInputField } = this;\n        innerInputField?.click();\n        innerInputField?.focus();\n        innerInputField.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    calculateMultiSelectSelectedDisplay() {\n        const { firstSelectedOptionElement, firstSelectedValue, multilineOptions } = this;\n        if (!firstSelectedValue) return '';\n        if (firstSelectedOptionElement?.display) return loc(firstSelectedOptionElement.display);\n        if (multilineOptions && this.searchable) return this.searchText;\n        if (multilineOptions) return '';\n        return (\n            firstSelectedOptionElement?.textContent?.trim() ?? firstSelectedOptionElement?.value ?? firstSelectedValue\n        );\n    }\n\n    calculateSingleSelectSelectedDisplay() {\n        const { firstSelectedOptionElement, multilineOptions } = this;\n        if (multilineOptions) {\n            return (firstSelectedOptionElement?.display && loc(firstSelectedOptionElement.display)) || this.value || '';\n        } else {\n            return (\n                (firstSelectedOptionElement?.display && loc(firstSelectedOptionElement.display)) ||\n                firstSelectedOptionElement?.textContent?.trim() ||\n                this.value ||\n                ''\n            );\n        }\n    }\n\n    checkSelectedDisplay() {\n        let namedSlot = this.selectedDisplaySlot;\n        const { value, multiple, selectedOptions, multilineOptions, firstSelectedOptionElement, prioritizeSearch } =\n            this;\n        const hasNoValue = !value && multiple && !selectedOptions?.length;\n        if (prioritizeSearch || !multilineOptions || hasNoValue) return this.clearSelectedDisplay();\n\n        if (!firstSelectedOptionElement || firstSelectedOptionElement.display) return this.clearSelectedDisplay();\n\n        // Clone selected option and remove elements with hide-on-select attribute\n        const selectionClone = firstSelectedOptionElement.firstElementChild.cloneNode(true) as HTMLElement;\n        selectionClone.querySelectorAll('[hide-on-select]').forEach(element => element.remove());\n\n        if (namedSlot) {\n            const height = namedSlot.clientHeight === 0 ? 'auto' : `${namedSlot.clientHeight}px`;\n            namedSlot.style.setProperty('--comp-selected-display-height', height);\n            if (namedSlot.firstElementChild.outerHTML !== selectionClone.outerHTML) {\n                namedSlot.replaceChild(selectionClone, namedSlot.firstElementChild);\n            }\n        } else {\n            namedSlot = document.createElement('div');\n            namedSlot.slot = '_selected-display';\n            namedSlot.appendChild(selectionClone);\n            this.hostElement.appendChild(namedSlot);\n        }\n        return namedSlot;\n    }\n\n    checkSelectedDisplayHeight() {\n        const { selectedDisplaySlot } = this;\n        if (!selectedDisplaySlot) return;\n        selectedDisplaySlot.style.setProperty('--comp-selected-display-height', '44px');\n    }\n\n    checkSelectedOptions() {\n        const { multiple, selectedOptions, value } = this;\n        this.optionElements.forEach(option => {\n            if (multiple) {\n                option.selected = selectedOptions.includes(option.value);\n            } else {\n                option.selected = option.value === value;\n            }\n        });\n    }\n\n    clearSearchText() {\n        if (!this.searchText) return;\n        this.searchText = '';\n        this.input.emit({ query: '' });\n    }\n\n    clearSelectedDisplay() {\n        this.selectedDisplaySlot?.remove();\n    }\n\n    clearValue() {\n        const { multiple } = this;\n        this.value = '';\n        this.selectedOptions = [];\n        this.change.emit({ value: multiple ? undefined : '', selectedOptions: multiple ? [] : undefined });\n    }\n\n    clickedElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName !== 'click-elsewhere') return;\n        event.stopPropagation();\n    };\n\n    closeDropdown() {\n        this.open = false;\n        this.clearSearchText();\n    }\n\n    async executeActionSheet(event: MouseEvent | KeyboardEvent) {\n        const result = await showActionSheetList(this, event);\n        this.handleSelectionChanges(result);\n    }\n\n    focusInput() {\n        this.inputField?.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    handleSelectionChanges(changeDetails: { value?: string; values?: IOptionValue[] }) {\n        const { value = '', values = [] } = changeDetails;\n        const selectedOptionValues = values.map(value => value.value);\n        const { multiple } = this;\n        if (!this.hostElement.onchange) {\n            this.selectedOptions = selectedOptionValues;\n        }\n\n        this.change.emit({\n            value: multiple ? undefined : value,\n            selectedOptions: multiple ? selectedOptionValues : undefined,\n        });\n    }\n\n    inputBlurHandler = () => {\n        this.inputFocused = false;\n    };\n\n    inputChangeHandler = (event: Event) => {\n        event.stopPropagation();\n    };\n\n    inputClickHandler = async (event: MouseEvent) => {\n        event.stopPropagation();\n        if (shouldShowActionSheet(this)) {\n            return this.executeActionSheet(event);\n        }\n        this.toggleDropdown();\n        this.focusInput();\n    };\n\n    inputFocusHandler = () => {\n        this.inputFocused = true;\n    };\n\n    inputInputHandler = (event: Q2InputCustomEvent<IEventDetail> & InputEvent) => {\n        event.stopPropagation();\n        const eventValue = event.detail.value;\n        const shouldClearValue = !!this.value;\n\n        if (shouldClearValue) this.clearValue();\n        if (!this.open) this.openDropdownWithoutActiveElement();\n\n        this.prioritizeSearch = true;\n        this.searchText = eventValue;\n        this.input.emit({ query: eventValue });\n    };\n\n    inputKeydownHandler = (event: KeyboardEvent) => {\n        if (this.readonly || this.disabled) return;\n        const { key, shiftKey } = event;\n        const isShiftTab = key === 'Tab' && shiftKey;\n        const hasSlot = this.hasPopoverTop || this.hasPopoverBottom;\n        if (hasSlot && (key === 'Tab' || isShiftTab)) return;\n\n        // slots are incompatible with action sheet\n        if (shouldShowActionSheet(this, event) && !hasSlot) {\n            return this.executeActionSheet(event);\n        }\n\n        const keysForOptionListToHandle = [\n            'ArrowDown',\n            'ArrowUp',\n            'PageDown',\n            'PageUp',\n            'Home',\n            'End',\n            'Escape',\n            'Tab',\n        ];\n\n        if (this.searchable && (key === ' ' || key === 'Enter') && this.inputField.value == '') {\n            event.preventDefault();\n            if (!this.open) this.openDropdownWithoutActiveElement();\n        }\n\n        if (this.searchable && !keysForOptionListToHandle.includes(key)) return;\n        if (this.shouldClearSearchText(event)) this.clearSearchText();\n\n        // Prevent click event from firing when spacebar is pressed\n        if (key === ' ') event.preventDefault();\n\n        this.optionList.handleExternalKeydown(event);\n    };\n\n    onCustomDisplayClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.focusInput();\n        this.toggleDropdown();\n    };\n\n    onMutationObserved = () => {\n        const { hostElement, hasPopoverTop, hasPopoverBottom } = this;\n        const slotContainer = hostElement.querySelector('.custom-display-content');\n        const displaySlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"q2-select-display\"]');\n        const hasCustomDisplay = !!displaySlot\n            ? displaySlot.assignedNodes().length > 0\n            : slotContainer.children.length > 0;\n\n        if (this.hasCustomDisplay !== hasCustomDisplay) {\n            this.hasCustomDisplay = hasCustomDisplay;\n        }\n\n        const popTopSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-top\"]');\n        const topSlotHasNode = popTopSlot?.assignedNodes().length > 0;\n        if (hasPopoverTop !== topSlotHasNode) {\n            this.hasPopoverTop = topSlotHasNode;\n        }\n\n        const popBottomSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-bottom\"]');\n        const bottomSlotHasNode = popBottomSlot?.assignedNodes().length > 0;\n        if (hasPopoverBottom !== bottomSlotHasNode) {\n            this.hasPopoverBottom = bottomSlotHasNode;\n        }\n\n        this.checkSelectedOptions();\n    };\n\n    onOptionListChange = (event: Q2OptionListCustomEvent<{ value: string; values: IOptionValue[] }>) => {\n        event.stopPropagation();\n        const { values } = event.detail;\n\n        if (values.length === 0) this.showAllOptions();\n        this.handleSelectionChanges(event.detail);\n    };\n\n    onPopoverState = ({\n        detail: { open, action },\n    }: CustomEvent<{ open: boolean; action: 'close' | 'select' | 'open' }>) => {\n        if (!open || this.searchText) {\n            if (action !== 'select') {\n                this.optionList.setActiveElement(null);\n            }\n            this.inputField.focus();\n        }\n\n        if (this.open === open) return;\n        this.open = open;\n    };\n\n    openDropdownWithoutActiveElement() {\n        if (this.readonly || this.disabled) return;\n        this.optionList.setActiveElement(null);\n        this.open = true;\n    }\n\n    setStatusMessage(message) {\n        clearTimeout(this.statusMessageTimer);\n        this.statusMessage = '';\n        this.statusMessageTimer = setTimeout(() => {\n            this.statusMessage = message;\n        }, 1000);\n    }\n\n    shouldClearSearchText(event: KeyboardEvent) {\n        return this.searchable && !!this.searchText && event.key === 'Escape';\n    }\n\n    showAllOptions = () => {\n        this.showSelected = false;\n    };\n\n    showSelectedOptions = () => {\n        this.showSelected = true;\n    };\n\n    toggleDropdown() {\n        if (this.readonly || this.disabled) return;\n\n        if (this.open && !this.searchText) {\n            this.closeDropdown();\n        } else {\n            this.openDropdownWithoutActiveElement();\n        }\n    }\n\n    visibilityToggleKeyDown = (event: KeyboardEvent) => {\n        const key = event.key;\n        const isShiftTab = key === 'Tab' && event.shiftKey;\n        const isRadioControlKey = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(key);\n        if (isRadioControlKey) event.stopPropagation();\n        if (isShiftTab) {\n            event.stopPropagation();\n            // allows shift+tab keys to select the top slot when present\n            if (this.hasPopoverTop) return;\n\n            this.optionList.setDefaultActiveElement();\n        }\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderCustomDisplay() {\n        const hasSelectedDisplay = this.checkSelectedDisplay();\n        if (!hasSelectedDisplay) return;\n        this.checkSelectedDisplayHeight();\n\n        return (\n            <slot\n                name=\"_selected-display\"\n                slot=\"custom-display\"\n            />\n        );\n    }\n\n    renderOptionsDropdown() {\n        return (\n            <q2-popover\n                ref={el => (this.popoverElement = el)}\n                controlElement={this.innerInputContainer}\n                open={this.open}\n                max-height={this.popoverMaxHeight}\n                minHeight={this.popoverMinHeight}\n                direction={this.popDirection}\n                mode={this.popoverMode || undefined}\n                block\n            >\n                <div class=\"popover-content\">\n                    <q2-option-list\n                        onPopoverState={this.onPopoverState}\n                        ref={el => (this.optionList = el)}\n                        type=\"listbox\"\n                        id=\"option-list\"\n                        show-selected={this.showSelected}\n                        label={this.listLabel}\n                        multiple={this.multiple}\n                        selectedOptions={this.structuredSelectedOptions}\n                        onChange={this.onOptionListChange}\n                    >\n                        <slot />\n                    </q2-option-list>\n                    <div\n                        class=\"popover-top-container\"\n                        ref={el => (this.popoverTopContainer = el)}\n                        hidden={!this.multiple && !this.hasPopoverTop}\n                        tabindex=\"-1\"\n                    >\n                        <slot name=\"popover-top\"></slot>\n                        {this.multiple && this.renderVisibilityToggle()}\n                    </div>\n                </div>\n                <div\n                    class=\"popover-bottom-container\"\n                    hidden={!this.hasPopoverBottom}\n                    tabindex=\"-1\"\n                >\n                    <slot name=\"popover-bottom\" />\n                </div>\n            </q2-popover>\n        );\n    }\n\n    renderVisibilityToggle() {\n        const selectedOptionsCount = this.selectedOptions?.length ?? 0;\n        const { showSelected } = this;\n        return (\n            <div class=\"multi-select-header\">\n                <fieldset>\n                    <legend aria-label={loc('tecton.element.select.multiHeader.showing')}>\n                        {loc('tecton.element.select.multiHeader.showing')}\n                    </legend>\n                    <div>\n                        <input\n                            class=\"sr\"\n                            type=\"radio\"\n                            id=\"all\"\n                            name=\"viewDisplay\"\n                            value=\"all\"\n                            checked={!showSelected}\n                            aria-label={loc('tecton.element.select.multiHeader.allAriaLabel')}\n                            test-id=\"allOptionsButton\"\n                            onClick={this.showAllOptions}\n                            onKeyDown={this.visibilityToggleKeyDown}\n                        />\n                        <label htmlFor=\"all\">{loc('tecton.element.select.multiHeader.all')}</label>\n                    </div>\n\n                    <div>\n                        <input\n                            class=\"sr\"\n                            type=\"radio\"\n                            id=\"selected\"\n                            disabled={selectedOptionsCount === 0}\n                            name=\"viewDisplay\"\n                            value=\"selected\"\n                            aria-label={loc('tecton.element.select.multiHeader.selectedAriaLabel', [\n                                selectedOptionsCount,\n                            ])}\n                            checked={showSelected}\n                            test-id=\"selectedOptionsButton\"\n                            onClick={this.showSelectedOptions}\n                            onKeyDown={this.visibilityToggleKeyDown}\n                        />\n                        <label htmlFor=\"selected\">\n                            {loc('tecton.element.select.multiHeader.selected', [selectedOptionsCount])}\n                        </label>\n                    </div>\n                </fieldset>\n            </div>\n        );\n    }\n\n    render() {\n        return (\n            <click-elsewhere\n                class={this.wrapperClasses}\n                onChange={this.clickedElsewhere}\n            >\n                <div\n                    aria-live=\"polite\"\n                    aria-atomic=\"true\"\n                    role=\"status\"\n                    class=\"sr\"\n                >\n                    {this.statusMessage}\n                </div>\n                <q2-input\n                    ref={el => (this.inputField = el)}\n                    class=\"q2-select-input\"\n                    label={(this.label && loc(this.label)) || ''}\n                    value={this.selectedDisplay}\n                    clearable={(this.clearable && (!!this.value || !!this.selectedOptions?.length)) || undefined}\n                    errors={\n                        (Array.isArray(this.errors) &&\n                            this.errors.length > 0 &&\n                            this.errors.map(error => loc(error))) ||\n                        (this.invalid && ['tecton.element.select.invalid']) ||\n                        []\n                    }\n                    disabled={this.disabled}\n                    optional={this.optional}\n                    readonly={!!this.readonly}\n                    placeholder={this.placeholder || undefined}\n                    hideLabel={this.hideLabel}\n                    ariaExpanded={`${this.open}`}\n                    ariaControls=\"option-list\"\n                    ariaHaspopup=\"listbox\"\n                    test-id=\"toggleDropdown\"\n                    hide-messages\n                    iconRight=\"chevron-down\"\n                    onClick={this.inputClickHandler}\n                    onInput={this.inputInputHandler}\n                    onKeyDown={this.inputKeydownHandler}\n                    onFocus={this.inputFocusHandler}\n                    onBlur={this.inputBlurHandler}\n                    onChange={this.inputChangeHandler}\n                    badgeValue={this.badgeValue}\n                    badgeTheme={this.inputFocused ? 'primary' : undefined}\n                    _role=\"combobox\"\n                    _preventEntry={!this.searchable}\n                >\n                    {this.renderCustomDisplay()}\n                </q2-input>\n                <div\n                    class=\"custom-display-content\"\n                    hidden={!this.hasCustomDisplay || !!this.searchText}\n                    onClick={this.onCustomDisplayClick}\n                >\n                    <slot name=\"q2-select-display\" />\n                </div>\n                {this.renderOptionsDropdown()}\n            </click-elsewhere>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/p-896c7008.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as e,g as s}from"./p-a5f18e27.js";import{a as n,o as a,i as h,w as r,l as d}from"./p-15ac45d6.js";const l="*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block;max-width:100%}.q2-editable-field-wrapper:not([hidden]){display:flex}.q2-editable-field-wrapper.editing{align-items:flex-end}:host([block]){display:block;width:100%}:host([block]) .q2-editable-field-wrapper:not([hidden]){display:grid;grid-template-columns:1fr auto auto}q2-input,.text-wrapper{margin:0 var(--tct-scale-2, var(--app-scale-2x, 10px)) 0 0}q2-input{flex:1 1 auto;min-width:170px}.text-wrapper{flex:0 auto;align-self:center;display:inline-block}:host([truncated]) .text-wrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}q2-btn{flex:0 0 44px}dl{margin:var(--tct-scale-0, var(--app-scale-0x, 0))}dt{font-weight:600}dd{margin-left:var(--tct-scale-0, var(--app-scale-0x, 0));display:flex;align-items:center}";const o=l;const c=class{constructor(e){t(this,e);this.change=i(this,"change",7);this.input=i(this,"input",7);this.scheduledAfterRender=[];this.cancelClick=t=>{t===null||t===void 0?void 0:t.stopPropagation();this.change.emit({editing:false,name:"cancel"});this.inputElement.setValue(this.defaultValue)};this.editClick=t=>{t===null||t===void 0?void 0:t.stopPropagation();this.change.emit({editing:true,name:"edit"})};this.inputChange=t=>{t.stopPropagation()};this.inputClick=t=>{t.stopPropagation()};this.inputInput=t=>{t.stopPropagation();this.input.emit(t.detail);this.formattedValue=t.detail.formattedValue;this.innerValue=t.detail.value};this.inputKeyDown=t=>{if(t.key==="Escape"||t.key==="Esc"){t.preventDefault();this.cancelClick();return}if(t.key==="Enter"){t.preventDefault();this.saveClick();return}};this.saveClick=t=>{t&&t.stopPropagation();const i=this.hostElement.shadowRoot.querySelector("q2-input").value;this.defaultValue=i;this.change.emit({editing:false,name:"save",value:this.innerValue||i,formattedValue:this.formattedValue||i})};this.formattedValue=undefined;this.ariaLabel=undefined;this.block=undefined;this.disabled=undefined;this.editing=false;this.errors=undefined;this.formatModifier=undefined;this.hideLabel=undefined;this.hints=undefined;this.label="";this.maxlength=undefined;this.persistentLabel=undefined;this.truncated=undefined;this.type=undefined;this.value=""}componentWillLoad(){n(this);this.defaultValue=this.value}componentDidLoad(){a(this.hostElement)}componentDidRender(){this.scheduledAfterRender.forEach((t=>t()));this.scheduledAfterRender=[];this.formattedValue=this.inputElement.formattedValue}onHostElementChange(t){if(!h(t,this.hostElement)||this.hostElement.onchange)return;queueMicrotask((()=>{switch(t.detail.name){case"save":if(this.hasErrors){this.inputElement.focus();break}this.value=t.detail.value;this.editing=t.detail.editing;break;case"cancel":this.inputElement.value=this.value;this.editing=t.detail.editing;break;case"edit":this.editing=t.detail.editing;break}}))}delegateFocus(t){if(!h(t,this.hostElement))return;this.hostElement.shadowRoot.querySelector(this.editing?"q2-input":"q2-btn.begin-edit").focus()}clickCancel(){var t;if(!this.editing)return;(t=this.cancelBtnElement)===null||t===void 0?void 0:t.click()}clickEdit(){var t;if(this.editing)return;(t=this.editBtnElement)===null||t===void 0?void 0:t.click()}clickSave(){var t;if(!this.editing)return;(t=this.saveBtnElement)===null||t===void 0?void 0:t.click()}async setValue(t,i={clickSave:true}){await this.clickEdit();await r();await this.inputElement.setValue(t);if(i.clickSave){await this.clickSave();await r()}}ariaLabelObserver(){n(this)}observesEditing(t,i){if(t===i)return;this.scheduledAfterRender.push(this.hostElement.focus)}errorsObserver(){const{editing:t,hasErrors:i}=this;const e=this.hostElement.shadowRoot.activeElement;const s=(e===null||e===void 0?void 0:e.tagName)==="Q2-INPUT";if(s||!e||!t||!i)return;this.inputElement.focus()}get hasErrors(){return Array.isArray(this.errors)&&!!this.errors.length}get hasHints(){return Array.isArray(this.hints)&&!!this.hints.length}get locLabel(){return this.label&&d(this.label)||""}get wrapperClass(){return`q2-editable-field-wrapper ${this.editing?"editing":""}`}generateEditBtn(){return e("q2-btn",{ref:t=>this.editBtnElement=t,class:"begin-edit",label:`${d("tecton.element.editableField.edit")} ${this.locLabel}`,"hide-label":true,disabled:this.disabled,"test-id":"editButton",onClick:this.editClick},e("q2-icon",{type:"edit"}))}generateEditStateDOM(){return e("div",{class:this.wrapperClass,hidden:!this.editing},e("q2-input",{ref:t=>this.inputElement=t,label:this.locLabel,hideLabel:this.hideLabel,value:this.value,hints:this.hasHints?this.hints:undefined,errors:this.hasErrors?this.errors:undefined,type:this.type,disabled:this.disabled,formatModifier:this.formatModifier,maxlength:this.maxlength,"test-id":"editableInput",onInput:this.inputInput,onChange:this.inputChange,onKeyDown:this.inputKeyDown,onClick:this.inputClick}),e("q2-btn",{ref:t=>this.cancelBtnElement=t,class:"cancel-edit",label:`${d("tecton.element.editableField.cancel")} ${this.locLabel}`,"hide-label":true,"test-id":"cancelButton",onClick:this.cancelClick},e("q2-icon",{type:"close"})),e("q2-btn",{ref:t=>this.saveBtnElement=t,class:"save-edit",label:`${d("tecton.element.editableField.save")} ${this.locLabel}`,"hide-label":true,"test-id":"saveButton",onClick:this.saveClick},e("q2-icon",{type:"checkmark"})))}generateReadStateDOM(){if(this.persistentLabel&&this.locLabel){return e("div",{class:this.wrapperClass,hidden:this.editing},e("dl",null,e("dt",{class:"read-state-label"},this.locLabel),e("dd",null,e("span",{class:"text-wrapper"},this.formattedValue||this.value),this.generateEditBtn())))}return e("div",{class:this.wrapperClass,hidden:this.editing},e("div",{class:"text-wrapper"},this.formattedValue||this.value),this.generateEditBtn())}render(){return e("div",{key:"5d8bb7b03afcc5c8efe1d9dab03e09e34bcd3148"},this.generateEditStateDOM(),this.generateReadStateDOM())}get hostElement(){return s(this)}static get watchers(){return{ariaLabel:["ariaLabelObserver"],editing:["observesEditing"],errors:["errorsObserver"]}}};c.style=o;export{c as q2_editable_field};
-//# sourceMappingURL=p-896c7008.entry.js.map

package/dist/q2-tecton-elements/p-896c7008.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["q2EditableFieldCss","Q2EditableFieldStyle0","Q2EditableField","this","scheduledAfterRender","cancelClick","event","stopPropagation","change","emit","editing","name","inputElement","setValue","defaultValue","editClick","inputChange","e","inputClick","inputInput","input","detail","formattedValue","innerValue","value","inputKeyDown","key","preventDefault","saveClick","valueFromInputProp","hostElement","shadowRoot","querySelector","componentWillLoad","handleAriaLabel","componentDidLoad","overrideFocus","componentDidRender","forEach","fn","onHostElementChange","isEventFromElement","onchange","queueMicrotask","hasErrors","focus","delegateFocus","clickCancel","_a","cancelBtnElement","click","clickEdit","editBtnElement","clickSave","saveBtnElement","options","waitForNextPaint","ariaLabelObserver","observesEditing","newValue","oldValue","push","errorsObserver","focusedElement","activeElement","isInputFocused","tagName","Array","isArray","errors","length","hasHints","hints","locLabel","label","loc","wrapperClass","generateEditBtn","h","ref","el","class","disabled","onClick","type","generateEditStateDOM","hidden","hideLabel","undefined","formatModifier","maxlength","onInput","onChange","onKeyDown","generateReadStateDOM","persistentLabel","render"],"sources":["src/components/q2-editable-field/q2-editable-field.scss?tag=q2-editable-field&encapsulation=shadow","src/components/q2-editable-field/q2-editable-field.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n\n:host {\n    display: inline-block;\n    max-width: 100%;\n}\n\n.q2-editable-field-wrapper:not([hidden]) {\n    display: flex;\n}\n\n.q2-editable-field-wrapper.editing {\n    align-items: flex-end;\n}\n\n:host([block]) {\n    display:block;\n    width: 100%;\n    .q2-editable-field-wrapper:not([hidden]) {\n        display: grid;\n        grid-template-columns: 1fr auto auto;\n    }\n}\n\nq2-input,\n.text-wrapper {\n    margin: 0 var(--tct-scale-2, var(--app-scale-2x, 10px)) 0 0;\n}\n\nq2-input {\n    flex: 1 1 auto;\n    min-width: 170px;\n}\n\n.text-wrapper {\n    flex: 0 auto;\n    align-self: center;\n    display: inline-block;\n}\n\n:host([truncated]) .text-wrapper {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\nq2-btn {\n    flex: 0 0 44px;\n}\n\ndl {\n    margin: var(--tct-scale-0, var(--app-scale-0x, 0));\n}\n\ndt {\n    font-weight: 600;\n}\n\ndd {\n    margin-left: var(--tct-scale-0, var(--app-scale-0x, 0));\n    display: flex;\n    align-items: center;\n}\n","import { Component, State, Prop, h, Listen, Element, Event, EventEmitter, Method, Watch } from '@stencil/core';\nimport { IEventDetail, Q2InputCustomEvent } from 'src/components';\nimport { handleAriaLabel, isEventFromElement, loc, overrideFocus, waitForNextPaint } from 'src/utils';\nimport { Q2Input } from '../q2-input/q2-input';\nimport { IFormatterValueObject } from '../q2-input/q2-input-types';\n\ninterface IExtendedQ2InputElement extends HTMLQ2InputElement {\n    formattedValue: IFormatterValueObject['formattedValue'];\n}\n\n@Component({ tag: 'q2-editable-field', shadow: true, styleUrl: 'q2-editable-field.scss' })\nexport class Q2EditableField {\n    // #region Own Properties\n\n    cancelBtnElement: HTMLQ2BtnElement;\n    defaultValue: string;\n    editBtnElement: HTMLQ2BtnElement;\n    innerValue: string;\n    inputElement: HTMLQ2InputElement;\n    saveBtnElement: HTMLQ2BtnElement;\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    formattedValue: string;\n\n    // #endregion\n    // #region Public Property API\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** If `true`, component expands to fill the width of its parent element. */\n    @Prop({ reflect: true })\n    block: boolean;\n\n    /** Disables the edit button and field. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /** Controls the edit state of the element. */\n    @Prop({ reflect: true, mutable: true })\n    editing: boolean = false;\n\n    /**\n     * Determines the `errors` applied to the `q2-input` element.\n     *\n     * See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.\n     */\n    @Prop()\n    errors: string[];\n\n    /**\n     * Determines the `formatModifier` applied to the `q2-input` element.\n     * @info\n     * Only applicable when `type=\"currency\"`.\n     *\n     * See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.\n     */\n    @Prop({ reflect: true })\n    formatModifier: string;\n\n    /** Hide's the field's `<label>` element from view. */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * Determines the `hints` applied to the `q2-input` element.\n     *\n     * See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.\n     */\n    @Prop()\n    hints: string[];\n\n    /**\n     * The visible descriptor for the element.\n     * Serves as the input label while in the edit state and as a decorative label for the read state when `persistentLabel` is `true`.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string = '';\n\n    /**\n     * Determines the `maxLength` applied to the `q2-input`.\n     *\n     * See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.\n     */\n    @Prop({ reflect: true })\n    maxlength: number;\n\n    /** Displays the provided label in the read state. */\n    @Prop({ reflect: true })\n    persistentLabel: boolean;\n\n    /** Shortens long values with ellipses instead of splitting into multiple lines. */\n    @Prop({ reflect: true })\n    truncated: boolean;\n\n    /**\n     * Determines the `type` applied to the `q2-input` element.\n     *\n     * See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for all `type` values.\n     */\n    @Prop({ reflect: true })\n    type: Q2Input['type'];\n\n    /** Serves as the visible text while in the read state, and the default value of the input while in the edit state. */\n    @Prop({ reflect: true, mutable: true })\n    value: string = '';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the 'Edit', 'Cancel', or 'Save' buttons are clicked.\n     *\n     * The event detail will not include a `value` or `formattedValue` if the event name is 'edit' or 'cancel'.\n     *@info\n     * If you are utilizing events to provide input validation, it is recommended you use the `input` event, not the `change` event.\n     */\n    @Event()\n    change: EventEmitter<{\n        editing: boolean;\n        name: 'edit' | 'cancel' | 'save';\n        value?: string;\n        formattedValue?: string;\n    }>;\n\n    /**\n     * Emitted when the user updates the `q2-input` element in the editing state.\n     */\n    @Event()\n    input: EventEmitter<{ formattedValue: string; value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n\n        this.defaultValue = this.value;\n    }\n\n    componentDidLoad() {\n        overrideFocus(this.hostElement);\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n        this.formattedValue = (this.inputElement as IExtendedQ2InputElement).formattedValue;\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (!isEventFromElement(event, this.hostElement) || this.hostElement.onchange) return;\n        queueMicrotask(() => {\n            switch (event.detail.name) {\n                case 'save':\n                    if (this.hasErrors) {\n                        this.inputElement.focus();\n                        break;\n                    }\n                    this.value = event.detail.value;\n                    this.editing = event.detail.editing;\n                    break;\n\n                case 'cancel':\n                    this.inputElement.value = this.value;\n                    this.editing = event.detail.editing;\n                    break;\n\n                case 'edit':\n                    this.editing = event.detail.editing;\n                    break;\n            }\n        });\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.hostElement.shadowRoot.querySelector<HTMLElement>(this.editing ? 'q2-input' : 'q2-btn.begin-edit').focus();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the cancel button, which will hide the `<q2-input>` field.\n     *\n     * @testOnly\n     */\n    @Method()\n    clickCancel() {\n        if (!this.editing) return;\n        this.cancelBtnElement?.click();\n    }\n\n    /**\n     * Emulates clicking the edit button, which will display the `<q2-input>` field.\n     *\n     * @testOnly\n     */\n    @Method()\n    clickEdit() {\n        if (this.editing) return;\n        this.editBtnElement?.click();\n    }\n\n    /**\n     * Emulates clicking the save button, saving value in the `<q2-input>` field, and emitting a `change` event.\n     *\n     * @testOnly\n     */\n    @Method()\n    clickSave() {\n        if (!this.editing) return;\n        this.saveBtnElement?.click();\n    }\n\n    /**\n     * Emulates clicking the edit button, and setting the value of the `<q2-input>` field.\n     *\n     * If the `clickSave` argument is `true` (default), the save button will be clicked after the value is set, and a\\\n     * `change` event will be emitted.\n     *\n     * @testOnly\n     */\n    @Method()\n    async setValue(value: string, options: { clickSave?: boolean } = { clickSave: true }) {\n        await this.clickEdit();\n        await waitForNextPaint();\n\n        await this.inputElement.setValue(value);\n\n        if (options.clickSave) {\n            await this.clickSave();\n            await waitForNextPaint();\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('editing')\n    observesEditing(newValue: boolean, oldValue: boolean) {\n        if (newValue === oldValue) return;\n        this.scheduledAfterRender.push(this.hostElement.focus);\n    }\n\n    @Watch('errors')\n    errorsObserver() {\n        const { editing, hasErrors } = this;\n        const focusedElement = this.hostElement.shadowRoot.activeElement;\n        const isInputFocused = focusedElement?.tagName === 'Q2-INPUT';\n        if (isInputFocused || !focusedElement || !editing || !hasErrors) return;\n        this.inputElement.focus();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get hasErrors(): boolean {\n        return Array.isArray(this.errors) && !!this.errors.length;\n    }\n\n    get hasHints(): boolean {\n        return Array.isArray(this.hints) && !!this.hints.length;\n    }\n\n    get locLabel() {\n        return (this.label && loc(this.label)) || '';\n    }\n\n    get wrapperClass() {\n        return `q2-editable-field-wrapper ${this.editing ? 'editing' : ''}`;\n    }\n\n    cancelClick = (event?: MouseEvent) => {\n        event?.stopPropagation();\n        this.change.emit({ editing: false, name: 'cancel' });\n        this.inputElement.setValue(this.defaultValue);\n    };\n\n    editClick = (event: MouseEvent) => {\n        event?.stopPropagation();\n        this.change.emit({ editing: true, name: 'edit' });\n    };\n\n    generateEditBtn() {\n        return (\n            <q2-btn\n                ref={el => (this.editBtnElement = el)}\n                class=\"begin-edit\"\n                label={`${loc('tecton.element.editableField.edit')} ${this.locLabel}`}\n                hide-label\n                disabled={this.disabled}\n                test-id=\"editButton\"\n                onClick={this.editClick}\n            >\n                <q2-icon type=\"edit\" />\n            </q2-btn>\n        );\n    }\n\n    generateEditStateDOM() {\n        return (\n            <div\n                class={this.wrapperClass}\n                hidden={!this.editing}\n            >\n                <q2-input\n                    ref={el => (this.inputElement = el)}\n                    label={this.locLabel}\n                    hideLabel={this.hideLabel}\n                    value={this.value}\n                    hints={this.hasHints ? this.hints : undefined}\n                    errors={this.hasErrors ? this.errors : undefined}\n                    type={this.type}\n                    disabled={this.disabled}\n                    formatModifier={this.formatModifier}\n                    maxlength={this.maxlength}\n                    test-id=\"editableInput\"\n                    onInput={this.inputInput}\n                    onChange={this.inputChange}\n                    onKeyDown={this.inputKeyDown}\n                    onClick={this.inputClick}\n                />\n                <q2-btn\n                    ref={el => (this.cancelBtnElement = el)}\n                    class=\"cancel-edit\"\n                    label={`${loc('tecton.element.editableField.cancel')} ${this.locLabel}`}\n                    hide-label\n                    test-id=\"cancelButton\"\n                    onClick={this.cancelClick}\n                >\n                    <q2-icon type=\"close\" />\n                </q2-btn>\n                <q2-btn\n                    ref={el => (this.saveBtnElement = el)}\n                    class=\"save-edit\"\n                    label={`${loc('tecton.element.editableField.save')} ${this.locLabel}`}\n                    hide-label\n                    test-id=\"saveButton\"\n                    onClick={this.saveClick}\n                >\n                    <q2-icon type=\"checkmark\" />\n                </q2-btn>\n            </div>\n        );\n    }\n\n    generateReadStateDOM() {\n        if (this.persistentLabel && this.locLabel) {\n            return (\n                <div\n                    class={this.wrapperClass}\n                    hidden={this.editing}\n                >\n                    <dl>\n                        <dt class=\"read-state-label\">{this.locLabel}</dt>\n                        <dd>\n                            <span class=\"text-wrapper\">{this.formattedValue || this.value}</span>\n                            {this.generateEditBtn()}\n                        </dd>\n                    </dl>\n                </div>\n            );\n        }\n        return (\n            <div\n                class={this.wrapperClass}\n                hidden={this.editing}\n            >\n                <div class=\"text-wrapper\">{this.formattedValue || this.value}</div>\n                {this.generateEditBtn()}\n            </div>\n        );\n    }\n\n    inputChange = (e: CustomEvent) => {\n        e.stopPropagation();\n    };\n\n    inputClick = (event: MouseEvent) => {\n        event.stopPropagation();\n    };\n\n    inputInput = (event: Q2InputCustomEvent<IEventDetail> & InputEvent) => {\n        event.stopPropagation();\n        this.input.emit(event.detail);\n        this.formattedValue = event.detail.formattedValue;\n        this.innerValue = event.detail.value;\n    };\n\n    inputKeyDown = (e: KeyboardEvent) => {\n        if (e.key === 'Escape' || e.key === 'Esc') {\n            e.preventDefault();\n            this.cancelClick();\n            return;\n        }\n\n        if (e.key === 'Enter') {\n            e.preventDefault();\n            this.saveClick();\n            return;\n        }\n    };\n\n    saveClick = (event?: MouseEvent) => {\n        event && event.stopPropagation();\n        const valueFromInputProp = this.hostElement.shadowRoot.querySelector('q2-input').value;\n        this.defaultValue = valueFromInputProp;\n        this.change.emit({\n            editing: false,\n            name: 'save',\n            value: this.innerValue || valueFromInputProp,\n            formattedValue: this.formattedValue || valueFromInputProp,\n        });\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div>\n                {this.generateEditStateDOM()}\n                {this.generateReadStateDOM()}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}