q2-tecton-elements 1.52.2 → 1.54.0

package/dist/q2-tecton-elements/{index-d18e2a20.js → index-504f1a9e.js}

@@ -1,11 +1,11 @@
 import { h as e } from "./index-7a5365e2.js";
 
 const debounce = (e, n = 300) => {
-  let o;
-  return function(...i) {
-    clearTimeout(o);
-    o = setTimeout((() => {
-      e(...i);
+  let i;
+  return function(...o) {
+    clearTimeout(i);
+    i = setTimeout((() => {
+      e(...o);
     }), n);
   };
 };
@@ -14,31 +14,13 @@ function isMobile() {
   return /Android|webOS|iPhone|iPad|iPod|BlackBerry|Mobile|IEMobile|Windows Phone|Opera Mini/i.test(navigator.userAgent);
 }
 
-function isHostLosingFocus(e, n) {
-  const o = e.type;
-  const i = [ "focusin", "focus" ];
-  const t = i.includes(o);
-  // on focusin: `target` is element losing focus, `relatedTarget` is element gaining focus
-  // on focusout: `target` is element gaining focus, `relatedTarget` is element losing focus
-    const a = t ? e.target : e.relatedTarget;
-  const isElementNestedInHostElement = e => {
-    if (e === n) return true;
-    if (e.parentElement) {
-      return isElementNestedInHostElement(e.parentElement);
-    }
-    return false;
-  };
-  if (!(a instanceof HTMLElement)) return true;
-  return !isElementNestedInHostElement(a);
-}
-
 function isRelatedTargetWithinHost(e, n) {
   return e.relatedTarget !== n && !n.contains(e.relatedTarget);
 }
 
 function isEventFromElement(e, n) {
-  var o;
-  return ((o = e.composedPath) === null || o === void 0 ? void 0 : o.call(e)[0]) === n;
+  var i;
+  return ((i = e.composedPath) === null || i === void 0 ? void 0 : i.call(e)[0]) === n;
 }
 
 function overrideFocus(e) {
@@ -87,24 +69,24 @@ function waitForNextPaint() {
 }
 
 function loc(e, n) {
-  var o, i, t;
+  var i, o, t;
   if (!e) return "";
-  if (((o = window.Tecton) === null || o === void 0 ? void 0 : o.noStrings) === true) {
+  if (((i = window.Tecton) === null || i === void 0 ? void 0 : i.noStrings) === true) {
     return e;
   }
-  return (t = (i = window === null || window === void 0 ? void 0 : window.TectonElements) === null || i === void 0 ? void 0 : i.loc(e, n)) !== null && t !== void 0 ? t : 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 renderLabel(n) {
-  const {label: o, hideLabel: i, optional: t, readonly: a} = n;
+  const {label: i, hideLabel: o, optional: t, readonly: a} = n;
   const r = [ "input-label" ];
   let s = "";
-  let l = i;
+  let l = o;
   if (!l) {
     const e = n.hostElement.querySelectorAll('[slot="label"]');
-    const i = e.length > 0;
-    const t = !!o;
-    l = t || i ? false : true;
+    const o = e.length > 0;
+    const t = !!i;
+    l = t || o ? false : true;
   }
   if (l) r.push("sr");
   if (t) {
@@ -123,7 +105,7 @@ function renderLabel(n) {
     class: r.join(" ")
   }, e("slot", {
     name: "label"
-  }, o ? loc(o) : undefined, s));
+  }, i ? loc(i) : undefined, s));
 }
 
 function hasSlotContent(e, n) {
@@ -134,8 +116,8 @@ function handleAriaLabel(e) {
   const {ariaLabel: n} = e;
   if (!n) return;
   // If empty ariaLabel prop is set to primitive symbol by framework wrapper, set ariaLabel to undefined and return
-    const o = Symbol().toString();
-  if (n === o) {
+    const i = Symbol().toString();
+  if (n === i) {
     e.ariaLabel = undefined;
     return;
   }
@@ -147,57 +129,57 @@ function handleAriaLabel(e) {
 
 /**
  * Handles when a prop has been renamed on a component without introducing a breaking change.
- */ function handleRenamedProp(e, n, o, i) {
+ */ function handleRenamedProp(e, n, i, o) {
   if (typeof e[n] === "undefined") return;
   // If old prop has value, aka set in component, call handleDeprecationWarning()
     if (e[n]) {
     handleDeprecationWarning(e, n, "prop");
   }
-  e[o] = e[n];
-  if (i) {
+  e[i] = e[n];
+  if (o) {
     delete e[n];
   }
 }
 
-function handleDeprecationWarning(e, n, o) {
+function handleDeprecationWarning(e, n, i) {
   if (window.location.hostname === "localhost" || window.location.host === "stack.q2developer.com") {
     if (e[n] === "undefined") return;
-    const i = e.constructor.name.toLowerCase().slice(2);
-    switch (o) {
+    const o = e.constructor.name.toLowerCase().slice(2);
+    switch (i) {
      case "prop":
-      if (n === "size" && i === "btn") {
+      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-${i} has been marked for deprecation and will be removed in an upcoming major release.`);
+        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 ${i} has been marked for deprecation and will be removed in an upcoming major release.`);
+      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 ${i} has been marked for deprecation and will be removed in an upcoming major release.`);
+      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 ${i} has been marked for deprecation and will be removed in an upcoming major release.`);
+      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-${i}: deprecatedItemType = ${n}`);
+      console.error(`handleDeprecationWarning --\x3e No type found for desired deprecation: ${n} in q2-${o}: deprecatedItemType = ${n}`);
     }
   }
 }
 
 function renderMessages(n) {
-  const o = n.hasError ? "danger" : "info";
+  const i = n.hasError ? "danger" : "info";
   return e("div", {
     class: "messages-container"
   }, e("q2-message", {
     appearance: "minimal",
     description: true,
-    type: o,
+    type: i,
     "test-id": "message"
   }, e("ul", {
     id: n.inputDescribedBy
@@ -208,16 +190,16 @@ function renderMessages(n) {
 
 function setMessageHeight(e) {
   const n = e.hostElement.shadowRoot.querySelector(".messages-container");
-  const o = n.querySelector("q2-message");
+  const i = n.querySelector("q2-message");
   nextPaint((() => {
-    const i = e.showMessages && e.hasFocus ? o.getBoundingClientRect().height : 0;
-    if (n.style.getPropertyValue("height") === `${i}px`) return;
-    if (i === 0) {
-      o.classList.add("invisible");
+    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 {
-      o.classList.remove("invisible");
-      n.style.setProperty("height", `${i}px`);
+      i.classList.remove("invisible");
+      n.style.setProperty("height", `${o}px`);
     }
   }));
 }
@@ -246,28 +228,28 @@ const handleColor = e => {
  * @return {Promise<string>} All translated text content in DOM order
  */ const getAllText = async (e, n = {}) => {
   if (!e) return "";
-  const o = Object.assign({
+  const i = Object.assign({
     trim: true,
     normalizeWhitespace: false,
     skipComponentReady: false
   }, n);
-  const i = new Set([ "STYLE", "SCRIPT", "NOSCRIPT", "TEMPLATE", "#comment" ]);
+  const o = new Set([ "STYLE", "SCRIPT", "NOSCRIPT", "TEMPLATE", "#comment" ]);
   const t = new WeakSet;
   let a = "";
   async function processNode(e) {
     var n;
-    if (t.has(e) || i.has(e.nodeName)) return;
+    if (t.has(e) || o.has(e.nodeName)) return;
     t.add(e);
     // Handle text nodes
         if (e.nodeType === Node.TEXT_NODE) {
-      const i = o.trim ? e.textContent.trim() : e.textContent;
-      if (i) {
+      const o = i.trim ? e.textContent.trim() : e.textContent;
+      if (o) {
         // Add space between adjacent text nodes if needed
-        if (a && !a.endsWith(" ") && !i.startsWith(" ")) {
+        if (a && !a.endsWith(" ") && !o.startsWith(" ")) {
           a += " ";
         }
         // Translate the text
-                a += o.skipComponentReady ? (n = window.TectonElements) === null || n === void 0 ? void 0 : n.loc(i) : loc(i);
+                a += i.skipComponentReady ? (n = window.TectonElements) === null || n === void 0 ? void 0 : n.loc(o) : loc(o);
       }
       return;
     }
@@ -275,7 +257,7 @@ const handleColor = e => {
         if (e.nodeType === Node.ELEMENT_NODE) {
       // Wait for Stencil component if needed
       const n = e.nodeName.startsWith("Q2-") && typeof e.componentOnReady === "function";
-      if (n && !o.skipComponentReady) {
+      if (n && !i.skipComponentReady) {
         await e.componentOnReady();
       }
       // Process children in light DOM
@@ -310,14 +292,14 @@ const handleColor = e => {
   }
   await processNode(e);
   // Apply final formatting
-    if (o.trim) {
+    if (i.trim) {
     a = a.trim();
   }
-  if (o.normalizeWhitespace) {
+  if (i.normalizeWhitespace) {
     a = a.replace(/\s+/g, " ");
   }
   return a;
 };
 
-export { handleAriaLabel as a, handleColor as b, createGuid as c, isMobile as d, hasSlotContent as e, renderLabel as f, getAriaValueFromProp as g, handleDeprecationWarning as h, isEventFromElement as i, handleRenamedProp as j, isTouchDevice as k, loc as l, resizeIframe as m, nextPaint as n, overrideFocus as o, debounce as p, isRelatedTargetWithinHost as q, renderMessages as r, setMessageHeight as s, isHostLosingFocus as t, isFirefox as u, getAllText as v, waitForNextPaint as w, isVisible as x };
-//# sourceMappingURL=index-d18e2a20.js.map
+export { handleAriaLabel as a, handleColor as b, createGuid as c, isMobile as d, hasSlotContent as e, renderLabel as f, getAriaValueFromProp as g, handleDeprecationWarning as h, isEventFromElement as i, handleRenamedProp as j, isTouchDevice as k, loc as l, resizeIframe as m, nextPaint as n, overrideFocus as o, debounce as p, isRelatedTargetWithinHost as q, renderMessages as r, setMessageHeight as s, isFirefox as t, getAllText as u, isVisible as v, waitForNextPaint as w };
+//# sourceMappingURL=index-504f1a9e.js.map

package/dist/q2-tecton-elements/index-504f1a9e.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["debounce","fn","delay","timeout","args","clearTimeout","setTimeout","isMobile","test","navigator","userAgent","isRelatedTargetWithinHost","event","element","relatedTarget","contains","isEventFromElement","_a","composedPath","call","overrideFocus","hostElement","focus","dispatchEvent","FocusEvent","bubbles","isFirefox","toLowerCase","includes","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","target","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","type","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","getAllText","async","options","opts","Object","assign","trim","normalizeWhitespace","skipComponentReady","nodesToSkip","Set","processedNodes","WeakSet","result","processNode","node","has","nodeName","nodeType","Node","TEXT_NODE","text","textContent","endsWith","startsWith","ELEMENT_NODE","isStencilComponent","componentOnReady","child","childNodes","shadowChild","assignedNodes","assigned","fallback","replace"],"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\n/**\n * Gets all translated text content from an element, including shadow DOM content\n *\n * @param {Element} element - The element to extract text from\n * @param {Object} options - Configuration options\n * @param {boolean} [options.trim=true] - Whether to trim whitespace\n * @param {boolean} [options.normalizeWhitespace=false] - Whether to normalize whitespace\n * @param {boolean} [options.skipComponentReady=false] - Skip waiting for components (for test environments)\n * @return {Promise<string>} All translated text content in DOM order\n */\nexport const getAllText = async (element, options = {}) => {\n    if (!element) return '';\n\n    const opts = {\n        trim: true,\n        normalizeWhitespace: false,\n        skipComponentReady: false,\n        ...options,\n    };\n\n    const nodesToSkip = new Set(['STYLE', 'SCRIPT', 'NOSCRIPT', 'TEMPLATE', '#comment']);\n    const processedNodes = new WeakSet();\n    let result = '';\n\n    async function processNode(node) {\n        if (processedNodes.has(node) || nodesToSkip.has(node.nodeName)) return;\n\n        processedNodes.add(node);\n\n        // Handle text nodes\n        if (node.nodeType === Node.TEXT_NODE) {\n            const text = opts.trim ? node.textContent.trim() : node.textContent;\n\n            if (text) {\n                // Add space between adjacent text nodes if needed\n                if (result && !result.endsWith(' ') && !text.startsWith(' ')) {\n                    result += ' ';\n                }\n\n                // Translate the text\n                result += opts.skipComponentReady ? window.TectonElements?.loc(text) : loc(text);\n            }\n            return;\n        }\n\n        // Handle element nodes\n        if (node.nodeType === Node.ELEMENT_NODE) {\n            // Wait for Stencil component if needed\n            const isStencilComponent = node.nodeName.startsWith('Q2-') && typeof node.componentOnReady === 'function';\n\n            if (isStencilComponent && !opts.skipComponentReady) {\n                await node.componentOnReady();\n            }\n\n            // Process children in light DOM\n            for (const child of node.childNodes) {\n                await processNode(child);\n            }\n\n            // Process shadow DOM if present\n            if (node.shadowRoot) {\n                for (const shadowChild of node.shadowRoot.childNodes) {\n                    await processNode(shadowChild);\n                }\n            }\n\n            // Handle slot elements with assigned nodes\n            if (node.nodeName === 'SLOT' && typeof node.assignedNodes === 'function') {\n                const assignedNodes = node.assignedNodes();\n\n                if (assignedNodes.length > 0) {\n                    for (const assigned of assignedNodes) {\n                        if (!processedNodes.has(assigned)) {\n                            await processNode(assigned);\n                        }\n                    }\n                } else {\n                    // Process slot fallback content\n                    for (const fallback of node.childNodes) {\n                        if (!processedNodes.has(fallback)) {\n                            await processNode(fallback);\n                        }\n                    }\n                }\n            }\n        }\n    }\n\n    await processNode(element);\n\n    // Apply final formatting\n    if (opts.trim) {\n        result = result.trim();\n    }\n\n    if (opts.normalizeWhitespace) {\n        result = result.replace(/\\s+/g, ' ');\n    }\n\n    return result;\n};\n"],"mappings":"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"}

package/dist/q2-tecton-elements/q2-action-group.entry.js

@@ -1,44 +1,64 @@
-import { r as t, h as e } from "./index-7a5365e2.js";
+import { r as t, h as i, g as o } from "./index-7a5365e2.js";
 
-import { n as i } from "./index-d18e2a20.js";
+import { n as e } from "./index-504f1a9e.js";
 
-const o = "*{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(:not([hidden])){display:block;width:100%;--comp-default-btn-group-margin:var(--app-scale-5x, 25px) 0;margin:var(--tct-btn-group-margin, var(--comp-default-btn-group-margin))}.container{width:100%;display:flex;gap:var(--tct-btn-group-gap, var(--app-scale-2x, 10px))}.container.vertical{flex-direction:var(--tct-btn-group-vertical-flex-direction, column)}.container.vertical ::slotted(q2-btn){display:block;width:100%}.container.horizontal{justify-content:var(--tct-btn-group-horizontal-justify-content, flex-start);flex-direction:var(--tct-btn-group-horizontal-flex-direction, row-reverse);align-items:var(--tct-btn-group-horizontal-align-items, center);flex-wrap:var(--tct-btn-group-horizontal-flex-wrap, wrap)}.container.horizontal.full-width{flex-wrap:nowrap}.container.vertical ::slotted(q2-btn),.container.horizontal.full-width ::slotted(q2-btn){display:block;width:100%}";
+const n = '*{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(:not([hidden])){display:block;width:100%;--comp-default-action-group-margin:var(--app-scale-5x, 25px) 0;margin:var(--tct-action-group-margin, var(--comp-default-action-group-margin))}.container{--comp-default-action-group-gap:var(--tct-action-group-gap, var(--app-scale-2x, 10px));--comp-link-gap:var(--tct-action-group-gap, var(--app-scale-4x, 20px));width:100%;display:flex;gap:var(--comp-default-action-group-gap)}.container.vertical{flex-direction:var(--tct-action-group-vertical-flex-direction, column)}.container.vertical ::slotted(q2-btn){display:block;width:100%}.container.horizontal{justify-content:var(--tct-action-group-horizontal-justify-content, flex-start);flex-direction:var(--tct-action-group-horizontal-flex-direction, row-reverse);align-items:var(--tct-action-group-horizontal-align-items, center);flex-wrap:var(--tct-action-group-horizontal-flex-wrap, wrap)}.container.horizontal.full-width{flex-wrap:nowrap}.container.horizontal.has-q2-link{gap:var(--comp-link-gap)}.container.horizontal.has-q2-link ::slotted(q2-link){position:relative}.container.horizontal.has-q2-link ::slotted(q2-link:not(:last-child))::before{content:"";display:inline-block;width:0;height:28px;border-left:1px solid var(--t-gray-12, #d9d9d9);position:absolute;left:calc(var(--comp-link-gap) * -0.5)}.container.vertical ::slotted(q2-btn),.container.horizontal.full-width ::slotted(q2-btn){display:block;width:100%}';
 
-const n = o;
+const a = n;
 
 const r = class {
-  constructor(e) {
-    t(this, e);
-    // #endregion
-    // #region Local Methods
-        this.handleResize = t => {
-      const e = t.detail.entries[0].contentRect.width;
-      const i = this.orientationThreshold > e;
-      this.autoOrientation = i ? "vertical" : "horizontal";
+  constructor(i) {
+    t(this, i);
+    this.checkForQ2Link = () => {
+      const t = this.hostElement.querySelectorAll("q2-link");
+      this.hasQ2Link = t.length > 0;
+    };
+    this.handleResize = t => {
+      const i = t.detail.entries[0].contentRect.width;
+      const o = this.orientationThreshold > i;
+      this.autoOrientation = o ? "vertical" : "horizontal";
+    };
+    this.initMutationObserver = () => {
+      const t = new MutationObserver(this.onMutationObserved);
+      t.observe(this.hostElement, {
+        childList: true,
+        subtree: true
+      });
+      this.mutationObserver = t;
+    };
+    this.onMutationObserved = () => {
+      this.checkForQ2Link();
     };
     this.autoOrientation = "vertical";
-    this.orientationThreshold = 440;
-    this.orientation = "auto";
+    this.hasQ2Link = false;
     this.fullWidth = undefined;
+    this.orientation = "auto";
+    this.orientationThreshold = 440;
   }
   // #endregion
-  // #region Events
-  // #endregion
   // #region Component Lifecycle Events
-  // #endregion
-  // #region Listeners
-  // #endregion
-  // #region Public Methods API
+  disconnectedCallback() {
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+      this.mutationObserver = null;
+    }
+  }
+  componentDidLoad() {
+    this.checkForQ2Link();
+    if ("MutationObserver" in window) this.initMutationObserver();
+  }
   // #endregion
   // #region Watchers
   toggleHiddenForOneFrame() {
     const {container: t} = this;
     t.style.display = "none";
     // Fixes Safari not making the buttons fill the container when going from horizontal and full-width to vertical
-        i((() => i((() => {
+        e((() => e((() => {
       t.style.display = null;
     }))));
   }
+  // #endregion
+  // #region Local Methods
   get computedOrientation() {
     let t = this.orientation;
     if (!t) t = "auto";
@@ -52,23 +72,27 @@ const r = class {
   // #endregion
   // #region Render Methods
   render() {
-    const {shouldDisableResizeObserver: t, computedOrientation: i, fullWidth: o} = this;
-    const n = [ "container" ];
-    if (o && i === "horizontal") n.push("full-width");
-    n.push(i);
-    return e("q2-resize-observer", {
-      key: "bb7ebcc182a63976c198c5073c471b6c3944c0ee",
+    const {shouldDisableResizeObserver: t, computedOrientation: o, fullWidth: e, hasQ2Link: n} = this;
+    const a = [ "container" ];
+    if (e && o === "horizontal") a.push("full-width");
+    if (n) a.push("has-q2-link");
+    a.push(o);
+    return i("q2-resize-observer", {
+      key: "4a0d43a1ad7512a7b9864f20e5728a83449bf655",
       onTctResize: this.handleResize,
       disabled: t
-    }, e("div", {
-      key: "fd586d567fc2d7183cc59e9444554adfde1095eb",
+    }, i("div", {
+      key: "5641b2bd03ecbdf8e6d64a01aeb678fada71d56e",
       ref: t => this.container = t,
-      class: n.join(" "),
+      class: a.join(" "),
       role: "group"
-    }, e("slot", {
-      key: "4c9a0b77af1371b8c4ee7eafdae2e74d6c8964e9"
+    }, i("slot", {
+      key: "22759c9b188a7605945bd351992889e26aa423c1"
     })));
   }
+  get hostElement() {
+    return o(this);
+  }
   static get watchers() {
     return {
       orientation: [ "toggleHiddenForOneFrame" ]
@@ -76,7 +100,7 @@ const r = class {
   }
 };
 
-r.style = n;
+r.style = a;
 
 export { r as q2_action_group };
 //# sourceMappingURL=q2-action-group.entry.js.map

package/dist/q2-tecton-elements/q2-action-group.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["q2ActionGroupCss","Q2ActionGroupStyle0","Q2BtnGroup","this","handleResize","event","width","detail","entries","contentRect","shouldBeVertical","orientationThreshold","autoOrientation","toggleHiddenForOneFrame","container","style","display","nextPaint","computedOrientation","orientation","shouldDisableResizeObserver","render","fullWidth","containerClassNames","push","h","key","onTctResize","disabled","ref","el","class","join","role"],"sources":["src/components/q2-action-group/q2-action-group.scss?tag=q2-action-group&encapsulation=shadow","src/components/q2-action-group/q2-action-group.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host(:not([hidden])) {\n    display: block;\n    width: 100%;\n    --comp-default-btn-group-margin: #{var-list(--app-scale-5x, 25px)} 0;\n    margin: var-list(--tct-btn-group-margin, --comp-default-btn-group-margin);\n}\n\n.container {\n    width: 100%;\n    display: flex;\n    gap: var-list(--tct-btn-group-gap, --app-scale-2x, 10px);\n\n    &.vertical {\n        flex-direction: var-list(--tct-btn-group-vertical-flex-direction, column);\n\n        ::slotted(q2-btn) {\n            display: block;\n            width: 100%;\n        }\n    }\n\n    &.horizontal {\n        justify-content: var-list(--tct-btn-group-horizontal-justify-content, flex-start);\n        flex-direction: var-list(--tct-btn-group-horizontal-flex-direction, row-reverse);\n        align-items: var-list(--tct-btn-group-horizontal-align-items, center);\n        flex-wrap: var-list(--tct-btn-group-horizontal-flex-wrap, wrap);\n\n        &.full-width {\n            flex-wrap: nowrap;\n        }\n    }\n\n    &.vertical,\n    &.horizontal.full-width {\n        ::slotted(q2-btn) {\n            display: block;\n            width: 100%;\n        }\n    }\n}\n","import { Q2ResizeObserverCustomEvent } from '@/components';\nimport { nextPaint } from '@/utils';\nimport { Component, ComponentInterface, h, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n    tag: 'q2-action-group',\n    styleUrl: 'q2-action-group.scss',\n    shadow: true,\n})\nexport class Q2BtnGroup implements ComponentInterface {\n    // #region Own Properties\n\n    container: HTMLDivElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    autoOrientation: 'vertical' | 'horizontal' = 'vertical';\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * The width, in pixels, that determines whether to display the buttons in vertical or horizontal orientation\n     *\n     * @info\n     * The component determines this based on the width of the element itself, not the browser window.\n     */\n    @Prop({ reflect: false })\n    orientationThreshold: number = 440;\n\n    /**\n     * The orientation of the buttons, which will override the auto orientation.\n     *\n     * @info\n     * This will override and disable the auto determination of the orientation.\n     */\n    @Prop({ reflect: true })\n    orientation: 'auto' | 'vertical' | 'horizontal' = 'auto';\n\n    /**\n     * Whether the buttons should take up the full width of the container when in horizontal orientation.\n     *\n     * @warning\n     * This will prevent the buttons from wrapping when the container is too small to fit all buttons.\n     */\n    @Prop({ reflect: true })\n    fullWidth: boolean;\n\n    // #endregion\n    // #region Events\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    // #endregion\n    // #region Listeners\n\n    // #endregion\n    // #region Public Methods API\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('orientation')\n    toggleHiddenForOneFrame() {\n        const { container } = this;\n        container.style.display = 'none';\n        // Fixes Safari not making the buttons fill the container when going from horizontal and full-width to vertical\n        nextPaint(() =>\n            nextPaint(() => {\n                container.style.display = null;\n            })\n        );\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    handleResize = (\n        event: Q2ResizeObserverCustomEvent<{\n            entries: ResizeObserverEntry[];\n        }>\n    ) => {\n        const width = event.detail.entries[0].contentRect.width;\n        const shouldBeVertical = this.orientationThreshold > width;\n        this.autoOrientation = shouldBeVertical ? 'vertical' : 'horizontal';\n    };\n\n    get computedOrientation() {\n        let orientation = this.orientation;\n        if (!orientation) orientation = 'auto';\n        return orientation === 'auto' ? this.autoOrientation : orientation;\n    }\n\n    get shouldDisableResizeObserver() {\n        let orientation = this.orientation;\n        if (!orientation) orientation = 'auto';\n        return orientation !== 'auto';\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { shouldDisableResizeObserver, computedOrientation, fullWidth } = this;\n        const containerClassNames = ['container'];\n        if (fullWidth && computedOrientation === 'horizontal') containerClassNames.push('full-width');\n        containerClassNames.push(computedOrientation);\n\n        return (\n            <q2-resize-observer\n                onTctResize={this.handleResize}\n                disabled={shouldDisableResizeObserver}\n            >\n                <div\n                    ref={el => (this.container = el)}\n                    class={containerClassNames.join(' ')}\n                    role=\"group\"\n                >\n                    <slot />\n                </div>\n            </q2-resize-observer>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":";;;;AAAA,MAAMA,IAAmB;;AACzB,MAAAC,IAAeD;;MCQFE,IAAU;;;;;QA0EnBC,KAAAC,eACIC;MAIA,MAAMC,IAAQD,EAAME,OAAOC,QAAQ,GAAGC,YAAYH;MAClD,MAAMI,IAAmBP,KAAKQ,uBAAuBL;MACrDH,KAAKS,kBAAkBF,IAAmB,aAAa;AAAY;2BArE1B;gCAYd;uBASmB;;;;;;;;;;;;;EA2BlD,uBAAAG;IACI,OAAMC,WAAEA,KAAcX;IACtBW,EAAUC,MAAMC,UAAU;;QAE1BC,GAAU,MACNA,GAAU;MACNH,EAAUC,MAAMC,UAAU;AAAI;;EAkB1C,uBAAIE;IACA,IAAIC,IAAchB,KAAKgB;IACvB,KAAKA,GAAaA,IAAc;IAChC,OAAOA,MAAgB,SAAShB,KAAKS,kBAAkBO;;EAG3D,+BAAIC;IACA,IAAID,IAAchB,KAAKgB;IACvB,KAAKA,GAAaA,IAAc;IAChC,OAAOA,MAAgB;;;;EAM3B,MAAAE;IACI,OAAMD,6BAAEA,GAA2BF,qBAAEA,GAAmBI,WAAEA,KAAcnB;IACxE,MAAMoB,IAAsB,EAAC;IAC7B,IAAID,KAAaJ,MAAwB,cAAcK,EAAoBC,KAAK;IAChFD,EAAoBC,KAAKN;IAEzB,OACIO,EAAA;MAAAC,KAAA;MACIC,aAAaxB,KAAKC;MAClBwB,UAAUR;OAEVK,EAAA;MAAAC,KAAA;MACIG,KAAKC,KAAO3B,KAAKW,YAAYgB;MAC7BC,OAAOR,EAAoBS,KAAK;MAChCC,MAAK;OAELR,EAAA;MAAAC,KAAA"}
+{"version":3,"names":["q2ActionGroupCss","Q2ActionGroupStyle0","Q2ActionGroup","this","checkForQ2Link","links","hostElement","querySelectorAll","hasQ2Link","length","handleResize","event","width","detail","entries","contentRect","shouldBeVertical","orientationThreshold","autoOrientation","initMutationObserver","observer","MutationObserver","onMutationObserved","observe","childList","subtree","mutationObserver","disconnectedCallback","disconnect","componentDidLoad","window","toggleHiddenForOneFrame","container","style","display","nextPaint","computedOrientation","orientation","shouldDisableResizeObserver","render","fullWidth","containerClassNames","push","h","key","onTctResize","disabled","ref","el","class","join","role"],"sources":["src/components/q2-action-group/q2-action-group.scss?tag=q2-action-group&encapsulation=shadow","src/components/q2-action-group/q2-action-group.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host(:not([hidden])) {\n    display: block;\n    width: 100%;\n    --comp-default-action-group-margin: #{var-list(--app-scale-5x, 25px)} 0;\n    margin: var-list(--tct-action-group-margin, --comp-default-action-group-margin);\n}\n\n.container {\n    --comp-default-action-group-gap: #{var-list(--tct-action-group-gap, --app-scale-2x, 10px)};\n    --comp-link-gap: #{var-list(--tct-action-group-gap, --app-scale-4x, 20px)};\n    width: 100%;\n    display: flex;\n    gap: var(--comp-default-action-group-gap);\n\n    &.vertical {\n        flex-direction: var-list(--tct-action-group-vertical-flex-direction, column);\n\n        ::slotted(q2-btn) {\n            display: block;\n            width: 100%;\n        }\n    }\n\n    &.horizontal {\n        justify-content: var-list(--tct-action-group-horizontal-justify-content, flex-start);\n        flex-direction: var-list(--tct-action-group-horizontal-flex-direction, row-reverse);\n        align-items: var-list(--tct-action-group-horizontal-align-items, center);\n        flex-wrap: var-list(--tct-action-group-horizontal-flex-wrap, wrap);\n\n        &.full-width {\n            flex-wrap: nowrap;\n        }\n\n        &.has-q2-link {\n            gap: var(--comp-link-gap);\n            ::slotted(q2-link) {\n                position: relative;\n            }\n            ::slotted(q2-link:not(:last-child))::before {\n                content: '';\n                display: inline-block;\n                width: 0;\n                height: 28px;\n                border-left: 1px solid var(--t-gray-12, #d9d9d9);\n                position: absolute;\n                left: calc(var(--comp-link-gap) * -0.5);\n            }\n        }\n    }\n\n    &.vertical,\n    &.horizontal.full-width {\n        ::slotted(q2-btn) {\n            display: block;\n            width: 100%;\n        }\n    }\n}\n","import { Q2ResizeObserverCustomEvent } from '@/components';\nimport { nextPaint } from '@/utils';\nimport { Component, ComponentInterface, h, Element, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n    tag: 'q2-action-group',\n    styleUrl: 'q2-action-group.scss',\n    shadow: true,\n})\nexport class Q2ActionGroup implements ComponentInterface {\n    // #region Own Properties\n\n    container: HTMLDivElement;\n    mutationObserver: MutationObserver;\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    autoOrientation: 'vertical' | 'horizontal' = 'vertical';\n\n    @State()\n    hasQ2Link: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Whether the buttons should take up the full width of the container when in horizontal orientation.\n     *\n     * @warning\n     * This will prevent the buttons from wrapping when the container is too small to fit all buttons.\n     */\n    @Prop({ reflect: true })\n    fullWidth: boolean;\n\n    /**\n     * The orientation of the buttons, which will override the auto orientation.\n     *\n     * @info\n     * This will override and disable the auto determination of the orientation.\n     */\n    @Prop({ reflect: true })\n    orientation: 'auto' | 'vertical' | 'horizontal' = 'auto';\n\n    /**\n     * The width, in pixels, that determines whether to display the buttons in vertical or horizontal orientation\n     *\n     * @info\n     * The component determines this based on the width of the element itself, not the browser window.\n     */\n    @Prop({ reflect: false })\n    orientationThreshold: number = 440;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback(): void {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n    }\n\n    componentDidLoad() {\n        this.checkForQ2Link();\n        if ('MutationObserver' in window) this.initMutationObserver();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('orientation')\n    toggleHiddenForOneFrame() {\n        const { container } = this;\n        container.style.display = 'none';\n        // Fixes Safari not making the buttons fill the container when going from horizontal and full-width to vertical\n        nextPaint(() =>\n            nextPaint(() => {\n                container.style.display = null;\n            })\n        );\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get computedOrientation(): 'vertical' | 'horizontal' {\n        let orientation = this.orientation;\n        if (!orientation) orientation = 'auto';\n        return orientation === 'auto' ? this.autoOrientation : orientation;\n    }\n\n    get shouldDisableResizeObserver(): boolean {\n        let orientation = this.orientation;\n        if (!orientation) orientation = 'auto';\n        return orientation !== 'auto';\n    }\n\n    checkForQ2Link = () => {\n        const links = this.hostElement.querySelectorAll('q2-link');\n        this.hasQ2Link = links.length > 0;\n    };\n\n    handleResize = (\n        event: Q2ResizeObserverCustomEvent<{\n            entries: ResizeObserverEntry[];\n        }>\n    ) => {\n        const width = event.detail.entries[0].contentRect.width;\n        const shouldBeVertical = this.orientationThreshold > width;\n        this.autoOrientation = shouldBeVertical ? 'vertical' : 'horizontal';\n    };\n\n    initMutationObserver = () => {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, subtree: true });\n        this.mutationObserver = observer;\n    };\n\n    onMutationObserved = () => {\n        this.checkForQ2Link();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { shouldDisableResizeObserver, computedOrientation, fullWidth, hasQ2Link } = this;\n        const containerClassNames = ['container'];\n        if (fullWidth && computedOrientation === 'horizontal') containerClassNames.push('full-width');\n        if (hasQ2Link) containerClassNames.push('has-q2-link');\n        containerClassNames.push(computedOrientation);\n\n        return (\n            <q2-resize-observer\n                onTctResize={this.handleResize}\n                disabled={shouldDisableResizeObserver}\n            >\n                <div\n                    ref={el => (this.container = el)}\n                    class={containerClassNames.join(' ')}\n                    role=\"group\"\n                >\n                    <slot />\n                </div>\n            </q2-resize-observer>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":";;;;AAAA,MAAMA,IAAmB;;AACzB,MAAAC,IAAeD;;MCQFE,IAAa;;;IAgGtBC,KAAAC,iBAAiB;MACb,MAAMC,IAAQF,KAAKG,YAAYC,iBAAiB;MAChDJ,KAAKK,YAAYH,EAAMI,SAAS;AAAC;IAGrCN,KAAAO,eACIC;MAIA,MAAMC,IAAQD,EAAME,OAAOC,QAAQ,GAAGC,YAAYH;MAClD,MAAMI,IAAmBb,KAAKc,uBAAuBL;MACrDT,KAAKe,kBAAkBF,IAAmB,aAAa;AAAY;IAGvEb,KAAAgB,uBAAuB;MACnB,MAAMC,IAAW,IAAIC,iBAAiBlB,KAAKmB;MAC3CF,EAASG,QAAQpB,KAAKG,aAAa;QAAEkB,WAAW;QAAMC,SAAS;;MAC/DtB,KAAKuB,mBAAmBN;AAAQ;IAGpCjB,KAAAmB,qBAAqB;MACjBnB,KAAKC;AAAgB;2BAtGoB;qBAGxB;;uBAqB6B;gCASnB;;;;EAK/B,oBAAAuB;IACI,IAAIxB,KAAKuB,kBAAkB;MACvBvB,KAAKuB,iBAAiBE;MACtBzB,KAAKuB,mBAAmB;;;EAIhC,gBAAAG;IACI1B,KAAKC;IACL,IAAI,sBAAsB0B,QAAQ3B,KAAKgB;;;;EAO3C,uBAAAY;IACI,OAAMC,WAAEA,KAAc7B;IACtB6B,EAAUC,MAAMC,UAAU;;QAE1BC,GAAU,MACNA,GAAU;MACNH,EAAUC,MAAMC,UAAU;AAAI;;;;EAQ1C,uBAAIE;IACA,IAAIC,IAAclC,KAAKkC;IACvB,KAAKA,GAAaA,IAAc;IAChC,OAAOA,MAAgB,SAASlC,KAAKe,kBAAkBmB;;EAG3D,+BAAIC;IACA,IAAID,IAAclC,KAAKkC;IACvB,KAAKA,GAAaA,IAAc;IAChC,OAAOA,MAAgB;;;;EA+B3B,MAAAE;IACI,OAAMD,6BAAEA,GAA2BF,qBAAEA,GAAmBI,WAAEA,GAAShC,WAAEA,KAAcL;IACnF,MAAMsC,IAAsB,EAAC;IAC7B,IAAID,KAAaJ,MAAwB,cAAcK,EAAoBC,KAAK;IAChF,IAAIlC,GAAWiC,EAAoBC,KAAK;IACxCD,EAAoBC,KAAKN;IAEzB,OACIO,EAAA;MAAAC,KAAA;MACIC,aAAa1C,KAAKO;MAClBoC,UAAUR;OAEVK,EAAA;MAAAC,KAAA;MACIG,KAAKC,KAAO7C,KAAK6B,YAAYgB;MAC7BC,OAAOR,EAAoBS,KAAK;MAChCC,MAAK;OAELR,EAAA;MAAAC,KAAA"}

package/dist/q2-tecton-elements/q2-action-sheet.entry.js

@@ -1,6 +1,6 @@
 import { r as e, c as t, h as n, F as o, g as i } from "./index-7a5365e2.js";
 
-import { l as a, w as r } from "./index-d18e2a20.js";
+import { l as a, w as r } from "./index-504f1a9e.js";
 
 var s = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 

package/dist/q2-tecton-elements/q2-avatar.entry.js

@@ -1,6 +1,6 @@
 import { r as a, h as t, g as r } from "./index-7a5365e2.js";
 
-const i = "*{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}.avatar-img,.avatar-img-default{object-fit:cover;height:var(--tct-avatar-img-height, var(--tct-avatar-height, 44px));width:var(--tct-avatar-img-width, var(--tct-avatar-width, 44px));border-radius:var(--tct-avatar-img-border-radius, var(--tct-avatar-img-br, var(--tct-avatar-border-radius, 50%)))}.avatar-img-default{background:var(--tct-avatar-background, var(--tct-avatar-bg, #9e9e9e))}.avatar-initials{height:var(--tct-avatar-height, 44px);width:var(--tct-avatar-width, 44px);background:var(--tct-avatar-background, var(--tct-avatar-bg, var(--t-gray-8, #9e9e9e)));border-radius:var(--tct-avatar-br, 50%)}.size-1{--tct-avatar-font-size:var(--tct-avatar-size-1, 60px)}.size-2{--tct-avatar-font-size:var(--tct-avatar-size-2, 48px)}.size-3{--tct-avatar-font-size:var(--tct-avatar-size-3, 40px)}.size-4{--tct-avatar-font-size:var(--tct-avatar-size-4, 30px)}text{fill:var(--tct-avatar-text-color, var(--tct-avatar-color, #ffffff));font-weight:var(--tct-avatar-font-weight, 200);font-size:var(--tct-avatar-font-size, 40px)}.fallback{height:var(--tct-avatar-fallback-height, var(--tct-avatar-height, 44px));width:var(--tct-avatar-fallback-width, var(--tct-avatar-width, 44px));border-radius:var(--tct-avatar-fallback-border-radius, var(--tct-avatar-fallback-br, var(--tct-avatar-img-border-radius, var(--tct-avatar-img-br, 50%))));background:var(--tct-avatar-fallback-background, var(--tct-avatar-fallback-bg, var(--tct-avatar-background, var(--tct-avatar-bg, var(--t-gray-8, #9e9e9e)))));display:inline-flex;align-items:center;justify-content:center}q2-icon{--t-icon-size:var(--tct-avatar-icon-size, var(--tct-avatar-fallback-icon-size, 65%));--t-icon-stroke-primary:var(--tct-avatar-icon-stroke-primary, var(--tct-avatar-fallback-stroke-primary, currentcolor));--t-icon-stroke-secondary:var(--tct-avatar-icon-stroke-secondary, var(--tct-avatar-fallback-stroke-secondary, currentcolor));--tct-icon-fill:var(--tct-avatar-icon-fill, var(--tct-avatar-fallback-fill));color:var(--tct-avatar-icon-color, var(--tct-avatar-fallback-color, var(--tct-avatar-color, var(--t-base, #ffffff))));width:var(--tct-avatar-icon-size, var(--t-icon-size));height:var(--tct-avatar-icon-size, var(--t-icon-size))}";
+const i = "*{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}.avatar-img,.avatar-img-default{display:var(--tct-avatar-display, inline);object-fit:cover;height:var(--tct-avatar-img-height, var(--tct-avatar-height, 44px));width:var(--tct-avatar-img-width, var(--tct-avatar-width, 44px));border-radius:var(--tct-avatar-img-border-radius, var(--tct-avatar-img-br, var(--tct-avatar-border-radius, 50%)));border:var(--tct-avatar-border, none)}.avatar-img-default{background:var(--tct-avatar-background, var(--tct-avatar-bg, #9e9e9e))}.avatar-initials{display:var(--tct-avatar-display, inline);height:var(--tct-avatar-height, 44px);width:var(--tct-avatar-width, 44px);background:var(--tct-avatar-background, var(--tct-avatar-bg, var(--t-gray-8, #9e9e9e)));border-radius:var(--tct-avatar-br, 50%);border:var(--tct-avatar-border, none)}.size-1{--tct-avatar-font-size:var(--tct-avatar-size-1, 60px)}.size-2{--tct-avatar-font-size:var(--tct-avatar-size-2, 48px)}.size-3{--tct-avatar-font-size:var(--tct-avatar-size-3, 40px)}.size-4{--tct-avatar-font-size:var(--tct-avatar-size-4, 30px)}text{fill:var(--tct-avatar-text-color, var(--tct-avatar-color, #ffffff));font-weight:var(--tct-avatar-font-weight, 200);font-size:var(--tct-avatar-font-size, 40px)}.fallback{height:var(--tct-avatar-fallback-height, var(--tct-avatar-height, 44px));width:var(--tct-avatar-fallback-width, var(--tct-avatar-width, 44px));border-radius:var(--tct-avatar-fallback-border-radius, var(--tct-avatar-fallback-br, var(--tct-avatar-img-border-radius, var(--tct-avatar-img-br, 50%))));border:var(--tct-avatar-border, none);background:var(--tct-avatar-fallback-background, var(--tct-avatar-fallback-bg, var(--tct-avatar-background, var(--tct-avatar-bg, var(--t-gray-8, #9e9e9e)))));display:inline-flex;align-items:center;justify-content:center}q2-icon{--t-icon-size:var(--tct-avatar-icon-size, var(--tct-avatar-fallback-icon-size, 65%));--t-icon-stroke-primary:var(--tct-avatar-icon-stroke-primary, var(--tct-avatar-fallback-stroke-primary, currentcolor));--t-icon-stroke-secondary:var(--tct-avatar-icon-stroke-secondary, var(--tct-avatar-fallback-stroke-secondary, currentcolor));--tct-icon-fill:var(--tct-avatar-icon-fill, var(--tct-avatar-fallback-fill));color:var(--tct-avatar-icon-color, var(--tct-avatar-fallback-color, var(--tct-avatar-color, var(--t-base, #ffffff))));width:var(--tct-avatar-icon-size, var(--t-icon-size));height:var(--tct-avatar-icon-size, var(--t-icon-size))}";
 
 const e = i;
 

package/dist/q2-tecton-elements/q2-avatar.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["q2AvatarCss","Q2AvatarStyle0","Q2Avatar","this","onError","badSrc","onLoad","isLoaded","srcDidUpdate","computedInitials","initials","name","result","substr","parts","split","firstCharacter","lastCharacter","length","undefined","toUpperCase","render","showImg","src","showInitials","showFallback","h","key","class","alt","viewBox","preserveAspectRatio","x","y","type","icon"],"sources":["src/components/q2-avatar/q2-avatar.scss?tag=q2-avatar&encapsulation=shadow","src/components/q2-avatar/q2-avatar.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.avatar-img,\n.avatar-img-default {\n    object-fit: cover;\n    height: var-list(--tct-avatar-img-height, --tct-avatar-height, 44px);\n    width: var-list(--tct-avatar-img-width, --tct-avatar-width, 44px);\n    border-radius: var-list(--tct-avatar-img-border-radius, --tct-avatar-img-br, --tct-avatar-border-radius, 50%);\n}\n\n.avatar-img-default {\n    background: var-list(--tct-avatar-background, --tct-avatar-bg, #9e9e9e);\n}\n\n.avatar-initials {\n    height: var(--tct-avatar-height, 44px);\n    width: var(--tct-avatar-width, 44px);\n    background: var-list(--tct-avatar-background, --tct-avatar-bg, --t-gray-8, #9e9e9e);\n    border-radius: var(--tct-avatar-br, 50%);\n}\n\n.size-1 {\n    --tct-avatar-font-size: var(--tct-avatar-size-1, 60px);\n}\n.size-2 {\n    --tct-avatar-font-size: var(--tct-avatar-size-2, 48px);\n}\n.size-3 {\n    --tct-avatar-font-size: var(--tct-avatar-size-3, 40px);\n}\n.size-4 {\n    --tct-avatar-font-size: var(--tct-avatar-size-4, 30px);\n}\n\ntext {\n    fill: var-list(--tct-avatar-text-color, --tct-avatar-color, #ffffff);\n    font-weight: var(--tct-avatar-font-weight, 200);\n    font-size: var(--tct-avatar-font-size, 40px);\n}\n\n.fallback {\n    height: var-list(--tct-avatar-fallback-height, --tct-avatar-height, 44px);\n    width: var-list(--tct-avatar-fallback-width, --tct-avatar-width, 44px);\n    border-radius: var-list(\n        --tct-avatar-fallback-border-radius,\n        --tct-avatar-fallback-br,\n        --tct-avatar-img-border-radius,\n        --tct-avatar-img-br,\n        50%\n    );\n    background: var-list(\n        --tct-avatar-fallback-background,\n        --tct-avatar-fallback-bg,\n        --tct-avatar-background,\n        --tct-avatar-bg,\n        --t-gray-8,\n        #9e9e9e\n    );\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n}\n\nq2-icon {\n    --t-icon-size: #{var-list(--tct-avatar-icon-size, --tct-avatar-fallback-icon-size, 65%)};\n    --t-icon-stroke-primary: #{var-list(\n            --tct-avatar-icon-stroke-primary,\n            --tct-avatar-fallback-stroke-primary,\n            currentcolor\n        )};\n    --t-icon-stroke-secondary: #{var-list(\n            --tct-avatar-icon-stroke-secondary,\n            --tct-avatar-fallback-stroke-secondary,\n            currentcolor\n        )};\n    --tct-icon-fill: #{var-list(--tct-avatar-icon-fill, --tct-avatar-fallback-fill)};\n    color: var-list(--tct-avatar-icon-color, --tct-avatar-fallback-color, --tct-avatar-color, --t-base, #ffffff);\n    width: var-list(--tct-avatar-icon-size, --t-icon-size);\n    height: var-list(--tct-avatar-icon-size, --t-icon-size);\n}\n","import { Component, ComponentInterface, Prop, Element, h, State, Watch } from '@stencil/core';\n\n@Component({ tag: 'q2-avatar', shadow: true, styleUrl: 'q2-avatar.scss' })\nexport class Q2Avatar implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    el: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    badSrc: boolean = false;\n\n    @State()\n    isLoaded: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** A [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to display as the fallback. */\n    @Prop()\n    icon: string = 'person';\n\n    /** A set of up to four initials to display as capitalized text. Takes priority over `name`. */\n    @Prop({ reflect: true })\n    initials: string;\n\n    /**\n     * The name associated with the avatar.\n     * The initials of the first and last words provided will display as capital letters.\n     *\n     * @info\n     * We recommend always providing a name when you want the avatar to be presented to screen readers.\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /**  Displays the image provided by the user. */\n    @Prop({ reflect: true })\n    src: string;\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('src')\n    srcDidUpdate() {\n        this.badSrc = false;\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get computedInitials() {\n        const { initials, name } = this;\n        if (!initials && !name) return;\n\n        let result = '';\n        if (initials) {\n            result = initials.substr(0, 4);\n        } else if (name) {\n            const parts = name.split(' ');\n            const firstCharacter = parts[0][0];\n            const lastCharacter = parts.length > 1 ? parts[parts.length - 1][0] : undefined;\n            result += firstCharacter;\n            if (lastCharacter) result += lastCharacter;\n        }\n\n        result = result?.toUpperCase();\n\n        return result;\n    }\n\n    onError = () => {\n        this.badSrc = true;\n    };\n\n    onLoad = () => {\n        this.isLoaded = true;\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { computedInitials } = this;\n        const showImg = this.src && !this.badSrc;\n        const isLoaded = this.isLoaded;\n        const showInitials = (this.name || this.initials) && (!this.src || this.badSrc);\n        const showFallback = !this.name && !this.initials && (!this.src || this.badSrc);\n\n        return (\n            <div>\n                {showImg && (\n                    <img\n                        class={isLoaded ? 'avatar-img' : 'avatar-img-default'}\n                        test-id=\"userImage\"\n                        src={this.src}\n                        onError={this.onError}\n                        onLoad={this.onLoad}\n                        alt={this.name || ''}\n                    />\n                )}\n                {showInitials && (\n                    <svg\n                        viewBox=\"0 0 100 100\"\n                        preserveAspectRatio=\"xMidYMid meet\"\n                        test-id=\"userInitials\"\n                        class={`avatar-initials size-${computedInitials.length}`}\n                        aria-label={this.name}\n                        aria-hidden={!this.name && 'true'}\n                    >\n                        <text\n                            x=\"50\"\n                            y=\"50\"\n                            dominant-baseline=\"central\"\n                            text-anchor=\"middle\"\n                            aria-hidden=\"true\"\n                        >\n                            {computedInitials}\n                        </text>\n                    </svg>\n                )}\n                {showFallback && (\n                    <div\n                        test-id=\"fallbackIcon\"\n                        class=\"fallback\"\n                    >\n                        <q2-icon type={this.icon}></q2-icon>\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":";;AAAA,MAAMA,IAAc;;AACpB,MAAAC,IAAeD;;MCEFE,IAAQ;;;IAuEjBC,KAAAC,UAAU;MACND,KAAKE,SAAS;AAAI;IAGtBF,KAAAG,SAAS;MACLH,KAAKI,WAAW;AAAI;kBAlEN;oBAGE;gBAOL;;;;;;;EAwBf,YAAAC;IACIL,KAAKE,SAAS;;;;EAMlB,oBAAII;IACA,OAAMC,UAAEA,GAAQC,MAAEA,KAASR;IAC3B,KAAKO,MAAaC,GAAM;IAExB,IAAIC,IAAS;IACb,IAAIF,GAAU;MACVE,IAASF,EAASG,OAAO,GAAG;WACzB,IAAIF,GAAM;MACb,MAAMG,IAAQH,EAAKI,MAAM;MACzB,MAAMC,IAAiBF,EAAM,GAAG;MAChC,MAAMG,IAAgBH,EAAMI,SAAS,IAAIJ,EAAMA,EAAMI,SAAS,GAAG,KAAKC;MACtEP,KAAUI;MACV,IAAIC,GAAeL,KAAUK;;IAGjCL,IAASA,MAAM,QAANA,WAAM,aAANA,EAAQQ;IAEjB,OAAOR;;;;EAcX,MAAAS;IACI,OAAMZ,kBAAEA,KAAqBN;IAC7B,MAAMmB,IAAUnB,KAAKoB,QAAQpB,KAAKE;IAClC,MAAME,IAAWJ,KAAKI;IACtB,MAAMiB,KAAgBrB,KAAKQ,QAAQR,KAAKO,eAAeP,KAAKoB,OAAOpB,KAAKE;IACxE,MAAMoB,KAAgBtB,KAAKQ,SAASR,KAAKO,cAAcP,KAAKoB,OAAOpB,KAAKE;IAExE,OACIqB,EAAA;MAAAC,KAAA;OACKL,KACGI,EAAA;MAAAC,KAAA;MACIC,OAAOrB,IAAW,eAAe;MAAoB,WAC7C;MACRgB,KAAKpB,KAAKoB;MACVnB,SAASD,KAAKC;MACdE,QAAQH,KAAKG;MACbuB,KAAK1B,KAAKQ,QAAQ;QAGzBa,KACGE,EAAA;MAAAC,KAAA;MACIG,SAAQ;MACRC,qBAAoB;MAAe,WAC3B;MACRH,OAAO,wBAAwBnB,EAAiBS;MAAQ,cAC5Cf,KAAKQ;MAAI,gBACPR,KAAKQ,QAAQ;OAE3Be,EAAA;MAAAC,KAAA;MACIK,GAAE;MACFC,GAAE;MAAI,qBACY;MAAS,eACf;MAAQ,eACR;OAEXxB,KAIZgB,KACGC,EAAA;MAAAC,KAAA;MAAA,WACY;MACRC,OAAM;OAENF,EAAA;MAAAC,KAAA;MAASO,MAAM/B,KAAKgC"}
+{"version":3,"names":["q2AvatarCss","Q2AvatarStyle0","Q2Avatar","this","onError","badSrc","onLoad","isLoaded","srcDidUpdate","computedInitials","initials","name","result","substr","parts","split","firstCharacter","lastCharacter","length","undefined","toUpperCase","render","showImg","src","showInitials","showFallback","h","key","class","alt","viewBox","preserveAspectRatio","x","y","type","icon"],"sources":["src/components/q2-avatar/q2-avatar.scss?tag=q2-avatar&encapsulation=shadow","src/components/q2-avatar/q2-avatar.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.avatar-img,\n.avatar-img-default {\n    display: var(--tct-avatar-display, inline);\n    object-fit: cover;\n    height: var-list(--tct-avatar-img-height, --tct-avatar-height, 44px);\n    width: var-list(--tct-avatar-img-width, --tct-avatar-width, 44px);\n    border-radius: var-list(--tct-avatar-img-border-radius, --tct-avatar-img-br, --tct-avatar-border-radius, 50%);\n    border: var(--tct-avatar-border, none);\n}\n\n.avatar-img-default {\n    background: var-list(--tct-avatar-background, --tct-avatar-bg, #9e9e9e);\n}\n\n.avatar-initials {\n    display: var(--tct-avatar-display, inline);\n    height: var(--tct-avatar-height, 44px);\n    width: var(--tct-avatar-width, 44px);\n    background: var-list(--tct-avatar-background, --tct-avatar-bg, --t-gray-8, #9e9e9e);\n    border-radius: var(--tct-avatar-br, 50%);\n    border: var(--tct-avatar-border, none);\n}\n\n.size-1 {\n    --tct-avatar-font-size: var(--tct-avatar-size-1, 60px);\n}\n.size-2 {\n    --tct-avatar-font-size: var(--tct-avatar-size-2, 48px);\n}\n.size-3 {\n    --tct-avatar-font-size: var(--tct-avatar-size-3, 40px);\n}\n.size-4 {\n    --tct-avatar-font-size: var(--tct-avatar-size-4, 30px);\n}\n\ntext {\n    fill: var-list(--tct-avatar-text-color, --tct-avatar-color, #ffffff);\n    font-weight: var(--tct-avatar-font-weight, 200);\n    font-size: var(--tct-avatar-font-size, 40px);\n}\n\n.fallback {\n    height: var-list(--tct-avatar-fallback-height, --tct-avatar-height, 44px);\n    width: var-list(--tct-avatar-fallback-width, --tct-avatar-width, 44px);\n    border-radius: var-list(\n        --tct-avatar-fallback-border-radius,\n        --tct-avatar-fallback-br,\n        --tct-avatar-img-border-radius,\n        --tct-avatar-img-br,\n        50%\n    );\n    border: var(--tct-avatar-border, none);\n    background: var-list(\n        --tct-avatar-fallback-background,\n        --tct-avatar-fallback-bg,\n        --tct-avatar-background,\n        --tct-avatar-bg,\n        --t-gray-8,\n        #9e9e9e\n    );\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n}\n\nq2-icon {\n    --t-icon-size: #{var-list(--tct-avatar-icon-size, --tct-avatar-fallback-icon-size, 65%)};\n    --t-icon-stroke-primary: #{var-list(\n            --tct-avatar-icon-stroke-primary,\n            --tct-avatar-fallback-stroke-primary,\n            currentcolor\n        )};\n    --t-icon-stroke-secondary: #{var-list(\n            --tct-avatar-icon-stroke-secondary,\n            --tct-avatar-fallback-stroke-secondary,\n            currentcolor\n        )};\n    --tct-icon-fill: #{var-list(--tct-avatar-icon-fill, --tct-avatar-fallback-fill)};\n    color: var-list(--tct-avatar-icon-color, --tct-avatar-fallback-color, --tct-avatar-color, --t-base, #ffffff);\n    width: var-list(--tct-avatar-icon-size, --t-icon-size);\n    height: var-list(--tct-avatar-icon-size, --t-icon-size);\n}\n","import { Component, ComponentInterface, Prop, Element, h, State, Watch } from '@stencil/core';\n\n@Component({ tag: 'q2-avatar', shadow: true, styleUrl: 'q2-avatar.scss' })\nexport class Q2Avatar implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    el: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    badSrc: boolean = false;\n\n    @State()\n    isLoaded: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** A [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to display as the fallback. */\n    @Prop()\n    icon: string = 'person';\n\n    /** A set of up to four initials to display as capitalized text. Takes priority over `name`. */\n    @Prop({ reflect: true })\n    initials: string;\n\n    /**\n     * The name associated with the avatar.\n     * The initials of the first and last words provided will display as capital letters.\n     *\n     * @info\n     * We recommend always providing a name when you want the avatar to be presented to screen readers.\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /**  Displays the image provided by the user. */\n    @Prop({ reflect: true })\n    src: string;\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('src')\n    srcDidUpdate() {\n        this.badSrc = false;\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get computedInitials() {\n        const { initials, name } = this;\n        if (!initials && !name) return;\n\n        let result = '';\n        if (initials) {\n            result = initials.substr(0, 4);\n        } else if (name) {\n            const parts = name.split(' ');\n            const firstCharacter = parts[0][0];\n            const lastCharacter = parts.length > 1 ? parts[parts.length - 1][0] : undefined;\n            result += firstCharacter;\n            if (lastCharacter) result += lastCharacter;\n        }\n\n        result = result?.toUpperCase();\n\n        return result;\n    }\n\n    onError = () => {\n        this.badSrc = true;\n    };\n\n    onLoad = () => {\n        this.isLoaded = true;\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { computedInitials } = this;\n        const showImg = this.src && !this.badSrc;\n        const isLoaded = this.isLoaded;\n        const showInitials = (this.name || this.initials) && (!this.src || this.badSrc);\n        const showFallback = !this.name && !this.initials && (!this.src || this.badSrc);\n\n        return (\n            <div>\n                {showImg && (\n                    <img\n                        class={isLoaded ? 'avatar-img' : 'avatar-img-default'}\n                        test-id=\"userImage\"\n                        src={this.src}\n                        onError={this.onError}\n                        onLoad={this.onLoad}\n                        alt={this.name || ''}\n                    />\n                )}\n                {showInitials && (\n                    <svg\n                        viewBox=\"0 0 100 100\"\n                        preserveAspectRatio=\"xMidYMid meet\"\n                        test-id=\"userInitials\"\n                        class={`avatar-initials size-${computedInitials.length}`}\n                        aria-label={this.name}\n                        aria-hidden={!this.name && 'true'}\n                    >\n                        <text\n                            x=\"50\"\n                            y=\"50\"\n                            dominant-baseline=\"central\"\n                            text-anchor=\"middle\"\n                            aria-hidden=\"true\"\n                        >\n                            {computedInitials}\n                        </text>\n                    </svg>\n                )}\n                {showFallback && (\n                    <div\n                        test-id=\"fallbackIcon\"\n                        class=\"fallback\"\n                    >\n                        <q2-icon type={this.icon}></q2-icon>\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":";;AAAA,MAAMA,IAAc;;AACpB,MAAAC,IAAeD;;MCEFE,IAAQ;;;IAuEjBC,KAAAC,UAAU;MACND,KAAKE,SAAS;AAAI;IAGtBF,KAAAG,SAAS;MACLH,KAAKI,WAAW;AAAI;kBAlEN;oBAGE;gBAOL;;;;;;;EAwBf,YAAAC;IACIL,KAAKE,SAAS;;;;EAMlB,oBAAII;IACA,OAAMC,UAAEA,GAAQC,MAAEA,KAASR;IAC3B,KAAKO,MAAaC,GAAM;IAExB,IAAIC,IAAS;IACb,IAAIF,GAAU;MACVE,IAASF,EAASG,OAAO,GAAG;WACzB,IAAIF,GAAM;MACb,MAAMG,IAAQH,EAAKI,MAAM;MACzB,MAAMC,IAAiBF,EAAM,GAAG;MAChC,MAAMG,IAAgBH,EAAMI,SAAS,IAAIJ,EAAMA,EAAMI,SAAS,GAAG,KAAKC;MACtEP,KAAUI;MACV,IAAIC,GAAeL,KAAUK;;IAGjCL,IAASA,MAAM,QAANA,WAAM,aAANA,EAAQQ;IAEjB,OAAOR;;;;EAcX,MAAAS;IACI,OAAMZ,kBAAEA,KAAqBN;IAC7B,MAAMmB,IAAUnB,KAAKoB,QAAQpB,KAAKE;IAClC,MAAME,IAAWJ,KAAKI;IACtB,MAAMiB,KAAgBrB,KAAKQ,QAAQR,KAAKO,eAAeP,KAAKoB,OAAOpB,KAAKE;IACxE,MAAMoB,KAAgBtB,KAAKQ,SAASR,KAAKO,cAAcP,KAAKoB,OAAOpB,KAAKE;IAExE,OACIqB,EAAA;MAAAC,KAAA;OACKL,KACGI,EAAA;MAAAC,KAAA;MACIC,OAAOrB,IAAW,eAAe;MAAoB,WAC7C;MACRgB,KAAKpB,KAAKoB;MACVnB,SAASD,KAAKC;MACdE,QAAQH,KAAKG;MACbuB,KAAK1B,KAAKQ,QAAQ;QAGzBa,KACGE,EAAA;MAAAC,KAAA;MACIG,SAAQ;MACRC,qBAAoB;MAAe,WAC3B;MACRH,OAAO,wBAAwBnB,EAAiBS;MAAQ,cAC5Cf,KAAKQ;MAAI,gBACPR,KAAKQ,QAAQ;OAE3Be,EAAA;MAAAC,KAAA;MACIK,GAAE;MACFC,GAAE;MAAI,qBACY;MAAS,eACf;MAAQ,eACR;OAEXxB,KAIZgB,KACGC,EAAA;MAAAC,KAAA;MAAA,WACY;MACRC,OAAM;OAENF,EAAA;MAAAC,KAAA;MAASO,MAAM/B,KAAKgC"}