npm - q2-tecton-elements - Versions diffs - 1.67.2 → 1.68.0 - Mend

q2-tecton-elements 1.67.2 → 1.68.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (807) hide show

package/dist/components/q2-item2.js CHANGED Viewed

@@ -107,7 +107,7 @@ const Q2Item = /*@__PURE__*/ proxyCustomElement(class Q2Item extends HTMLElement
     // #region Render Methods
     render() {
         const { clickable } = this;
-        return (h("div", { key: '3bd899fe8e37940635740451ebcf07407103e5e8', "test-id": "itemContainer", class: this.itemClasses, ref: el => (this.itemElement = el), role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined }, this.hasDecoratorSlotContent && (h("div", { key: '57a84cb0e340658499cfc3283f65d425519fcfcb', class: this.decoratorClasses }, h("slot", { key: 'ef0b095c055d0ceed0fe18ecb4d1b2565f3bdb82', name: "decorator" }, h("slot", { key: 'ec695f3ab95be46331cec70b270a1f0434444fff', name: "bullet" })))), h("div", { key: '263e6a9ebe842c2430cb263fe8ea1e523f286a17', class: this.mainClasses }, this.hasHeaderSlotContent && (h("div", { key: '6340f074d8b489e37f21b57b89038f323e5a2533', class: "header" }, h("slot", { key: '2ec1a529cd639a520a4b873d2898b88470a2c16a', name: "header" }))), this.hasBodySlotContent && (h("div", { key: '1d38f6795a8ee607eb93e1ff31ddab54dcd41c79', class: "body" }, h("slot", { key: '73fe582085a453608301236160cd260474d338c5', name: "body" })))), this.hasActionSlotContent && (h("div", { key: '0fd2164d9ab710b54655e325aa328d4e236a7bd7', class: this.actionClasses }, h("slot", { key: 'ce2cb3c08a76f136858a1e8ce2db30b822e17b82', name: "action" }))), this.hasFooterSlotContent && (h("div", { key: '700c9f3faa4dc6f5c0e22d18470614c028c6c8d5', class: this.footerClasses }, h("slot", { key: 'b3fe3d2477936abcf950c8a7565372456023462f', name: "footer" })))));
+        return (h("div", { key: 'e763ab46ae277588dc2a4a31ba800487ea7549b4', "test-id": "itemContainer", class: this.itemClasses, ref: el => (this.itemElement = el), role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined }, this.hasDecoratorSlotContent && (h("div", { key: '9045a315ea3a73f327c572f9cf77ab1dd42e0913', class: this.decoratorClasses }, h("slot", { key: 'feb27cf7b352f0bd23c63cf8e6facf015664f08a', name: "decorator" }, h("slot", { key: '663f0aeaa5c3b61205130bbefbec9c5cb8037d82', name: "bullet" })))), h("div", { key: '34e41231f5c806f7d13c49529bc381dcb1f8675d', class: this.mainClasses }, this.hasHeaderSlotContent && (h("div", { key: 'dd46a0043dea3859cfb1a020615deb2b37b77730', class: "header" }, h("slot", { key: 'bcaeb7021e2b78554af48e16e16b11a0c920d138', name: "header" }))), this.hasBodySlotContent && (h("div", { key: '759e430f2c3a3522435617ff0255595c941b5c3b', class: "body" }, h("slot", { key: 'a63faa7ace5d7a8773f0850bca11a6989312cbfd', name: "body" })))), this.hasActionSlotContent && (h("div", { key: '26c46357c4b6f81ce764c29763738d59e0067251', class: this.actionClasses }, h("slot", { key: 'c7a235da18301f0abfa5579304b20fd834f6421d', name: "action" }))), this.hasFooterSlotContent && (h("div", { key: '6dec258fc8252c57ee15cf75c5029a01183d905c', class: this.footerClasses }, h("slot", { key: '78dba15174d52e2610f5919f7d530f4df059fc75', name: "footer" })))));
     }
     get hostElement() { return this; }
     static get style() { return q2ItemCss; }

package/dist/components/q2-item2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-item2.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,6+KAA6+K;;MC4Bl/K,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAA,WAAA,CAAA;AALnB,IAAA,WAAA,GAAA;;;;;;AAqBI,QAAA,IAAa,CAAA,aAAA,GAAW,CAAC;AAiK5B;;;IArJG,gBAAgB,GAAA;AACZ,QAAA,IAAI,OAAO,gBAAgB,KAAK,WAAW,EAAE;AACzC,YAAA,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,OAAO,IAAI,CAAC,aAAa,IAAI,CAAC,CAAC,CAAC;YACtE,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC;AACxF,YAAA,IAAI,CAAC,gBAAgB,GAAG,QAAQ;;AAEpC,QAAA,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC;;;;AAOnC,IAAA,aAAa,CAAC,KAAiB,EAAA;;AAC3B,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;YAChB,CAAA,EAAA,GAAA,IAAI,CAAC,WAAW,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE;;aACtB;YACH,KAAK,CAAC,cAAc,EAAE;;;;;AAO9B,IAAA,IAAI,aAAa,GAAA;AACb,QAAA,MAAM,OAAO,GAAG,CAAC,QAAQ,CAAC;AAC1B,QAAA,IAAI,CAAC,IAAI,CAAC,uBAAuB,EAAE;AAC/B,YAAA,OAAO,CAAC,IAAI,CAAC,CAAA,gBAAA,CAAkB,CAAC;;AAGpC,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;AAG5B,IAAA,IAAI,gBAAgB,GAAA;AAChB,QAAA,MAAM,OAAO,GAAG,CAAC,QAAQ,EAAE,WAAW,CAAC;AACvC,QAAA,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE;AAC5B,YAAA,OAAO,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAA,mBAAA,CAAqB,CAAC;;AAG3D,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;AAG5B,IAAA,IAAI,aAAa,GAAA;AACb,QAAA,MAAM,OAAO,GAAG,CAAC,QAAQ,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,oBAAoB,IAAI,CAAC,IAAI,CAAC,uBAAuB,EAAE;AAC7D,YAAA,OAAO,CAAC,IAAI,CAAC,CAAA,2BAAA,CAA6B,CAAC;;AACxC,aAAA,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE;AACnC,YAAA,OAAO,CAAC,IAAI,CAAC,CAAA,gBAAA,CAAkB,CAAC;;AAC7B,aAAA,IAAI,CAAC,IAAI,CAAC,uBAAuB,EAAE;AACtC,YAAA,OAAO,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAA,mBAAA,CAAqB,CAAC;;AAG3D,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;AAG5B,IAAA,IAAI,oBAAoB,GAAA;QACpB,OAAO,cAAc,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC;;AAGrD,IAAA,IAAI,kBAAkB,GAAA;QAClB,OAAO,cAAc,CAAC,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC;;AAGnD,IAAA,IAAI,uBAAuB,GAAA;AACvB,QAAA,OAAO,cAAc,CAAC,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC,IAAI,cAAc,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC;;AAGtG,IAAA,IAAI,oBAAoB,GAAA;QACpB,OAAO,cAAc,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC;;AAGrD,IAAA,IAAI,oBAAoB,GAAA;QACpB,OAAO,cAAc,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC;;AAGrD,IAAA,IAAI,WAAW,GAAA;AACX,QAAA,MAAM,OAAO,GAAG,CAAC,MAAM,CAAC;QACxB,IAAI,CAAC,IAAI,CAAC,oBAAoB,IAAI,CAAC,IAAI,CAAC,uBAAuB,EAAE;AAC7D,YAAA,OAAO,CAAC,IAAI,CAAC,CAAA,yBAAA,CAA2B,CAAC;;AACtC,aAAA,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE;AACnC,YAAA,OAAO,CAAC,IAAI,CAAC,CAAA,cAAA,CAAgB,CAAC;;AAC3B,aAAA,IAAI,CAAC,IAAI,CAAC,uBAAuB,EAAE;AACtC,YAAA,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAA,iBAAA,CAAmB,CAAC;;AAEvD,QAAA,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE;AAC5B,YAAA,OAAO,CAAC,IAAI,CAAC,CAAA,cAAA,CAAgB,CAAC;;AAGlC,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;AAG5B,IAAA,IAAI,WAAW,GAAA;AACX,QAAA,MAAM,OAAO,GAAG,CAAC,MAAM,CAAC;QACxB,IAAI,CAAC,IAAI,CAAC,oBAAoB,IAAI,CAAC,IAAI,CAAC,uBAAuB,EAAE;AAC7D,YAAA,OAAO,CAAC,IAAI,CAAC,CAAA,yBAAA,CAA2B,CAAC;;AACtC,aAAA,IAAI,CAAC,IAAI,CAAC,uBAAuB,EAAE;AACtC,YAAA,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAA,iBAAA,CAAmB,CAAC;;AAGvD,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;;;IAM5B,MAAM,GAAA;AACF,QAAA,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI;AAC1B,QAAA,QACI,uEACY,eAAe,EACvB,KAAK,EAAE,IAAI,CAAC,WAAW,EACvB,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,EAClC,IAAI,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,EACtC,QAAQ,EAAE,SAAS,GAAG,CAAC,GAAG,SAAS,EAAA,EAElC,IAAI,CAAC,uBAAuB,KACzB,4DAAK,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAA,EAC7B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,WAAW,EAAA,EAClB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAG,CAAA,CACnB,CACL,CACT,EACD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,IAAI,CAAC,WAAW,EAAA,EACvB,IAAI,CAAC,oBAAoB,KACtB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACf,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAG,CACpB,CACT,EACA,IAAI,CAAC,kBAAkB,KACpB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAA,EACb,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAG,CAAA,CAClB,CACT,CACC,EACL,IAAI,CAAC,oBAAoB,KACtB,4DAAK,KAAK,EAAE,IAAI,CAAC,aAAa,EAAA,EAC1B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAG,CACpB,CACT,EACA,IAAI,CAAC,oBAAoB,KACtB,4DAAK,KAAK,EAAE,IAAI,CAAC,aAAa,EAAA,EAC1B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,CAAG,CACpB,CACT,CACC;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/q2-item/q2-item.scss?tag=q2-item&encapsulation=shadow","src/components/q2-item/q2-item.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n:host {\n display: block;\n\n .item {\n --comp-border-radius: #{var-list(--tct-item-border-radius, --app-border-radius-0, 0)};\n }\n}\n\n:host([clickable]) {\n cursor: pointer;\n --comp-background: #{var-list(\n --tct-btn-primary-background,\n --tct-btn-primary-bg,\n --t-a11y-active-gray-color-AA,\n #404040\n )};\n .item {\n --comp-border-radius: #{var-list(--tct-item-border-radius, --app-border-radius-1, 4px)};\n --comp-btn-tween: #{var-list(var-prefixer(btn-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n --comp-btn-fallback-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n --comp-hover-box-shadow: #{var-list(--tct-btn-primary-box-shadow, --comp-btn-fallback-box-shadow)};\n --comp-active-box-shadow: var(--tct-btn-primary-active-background, #0063a0);\n --comp-font-color: #{var-list(--tct-btn-primary-font-color, --app-white, #ffffff)};\n @include btn-ring(primary, hover, --comp-background, --comp-font-color, null);\n &:hover {\n box-shadow: var(--comp-hover-box-shadow);\n }\n &:active {\n box-shadow: var(--comp-active-box-shadow);\n }\n &:focus-visible {\n box-shadow: var(--const-double-focus-ring);\n }\n }\n}\n\n.action {\n --tct-btn-icon-height: #{var-list(--tct-item-action-icon-height, --app-scale-6x, 30px)};\n --tct-btn-icon-width: #{var-list(--tct-item-action-icon-width, --app-scale-6x, 30px)};\n --tct-icon-size: #{var-list(--tct-item-action-icon-size, --app-scale-6x, 30px)};\n --tct-radio-label-hidden-columns: 18px;\n --tct-radio-label-margin-right: 0;\n --tct-radio-margin: 0;\n\n align-items: var(--tct-item-action-align-items, center);\n display: flex;\n grid-row: 1;\n justify-content: center;\n\n &-no-bullet {\n grid-column: 2;\n }\n}\n\n.body {\n color: var-list(--tct-item-body-color, --t-textA, #747474);\n font-size: var-list(--tct-item-body-font-size, --app-font-size, 14px);\n font-weight: var-list(--tct-item-body-font-weight, 400);\n font-style: var-list(--tct-item-body-font-style, inherit);\n}\n\n.bullet {\n --tct-avatar-fallback-height: #{var-list(--tct-item-avatar-height, --app-scale-7x, 35px)};\n --tct-avatar-fallback-width: #{var-list(--tct-item-avatar-width, --app-scale-7x, 35px)};\n --tct-avatar-height: #{var-list(--tct-item-avatar-height, --app-scale-7x, 35px)};\n --tct-avatar-width: #{var-list(--tct-item-avatar-width, --app-scale-7x, 35px)};\n\n grid-column: 1;\n grid-row-start: 1;\n grid-row-end: 3;\n padding-top: var-list(--tct-item-bullet-padding-top, --app-scale-1x, 5px);\n text-align: center;\n\n &-no-footer {\n grid-row-end: 2;\n }\n}\n\n.footer {\n color: var-list(--tct-item-footer-color, inherit);\n font-size: var(--tct-item-footer-font-size, inherit);\n font-weight: var(--tct-item-footer-font-weight, inherit);\n font-style: var-list(--tct-item-footer-font-style, inherit);\n grid-column-start: 2;\n grid-column-end: 4;\n grid-row: 2;\n\n &-no-action-nor-bullet {\n grid-column-start: 1;\n grid-column-end: 2;\n }\n\n &-no-action {\n grid-column-start: 2;\n grid-column-end: 3;\n }\n\n &-no-bullet {\n grid-column-start: 1;\n grid-column-end: 3;\n }\n}\n\n.header {\n color: var-list(--tct-item-header-color, --t-text, #4d4d4d);\n font-size: var-list(--tct-item-header-font-size, 16px);\n font-style: var-list(--tct-item-header-font-style, inherit);\n font-weight: var-list(--tct-item-header-font-weight, 600);\n line-height: var-list(--tct-item-header-line-height, 1.5);\n}\n\n.item {\n font-style: var-list(--tct-item-font-style, inherit);\n border: var(--tct-item-border);\n border-radius: var(--comp-border-radius);\n transition: var(--comp-btn-tween);\n transition-property: box-shadow;\n column-gap: var-list(--tct-item-horizontal-spacing, --app-scale-3x, 15px);\n display: grid;\n grid-template-columns: minmax(var(--app-scale-7x, 35px), auto) minmax(0, 1fr) minmax(\n var(--app-scale-5x, 25px),\n auto\n );\n grid-template-rows: auto auto;\n padding: var(--tct-item-padding, 0);\n row-gap: var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px));\n\n &-no-action-nor-bullet {\n grid-template-columns: auto;\n }\n\n &-no-action {\n grid-template-columns: minmax(var(--app-scale-7x, 35px), auto) minmax(0, 1fr);\n }\n\n &-no-footer {\n grid-template-rows: auto;\n }\n\n &-no-bullet {\n grid-template-columns: minmax(0, 1fr) minmax(var(--app-scale-5x, 25px), auto);\n }\n}\n\n.main {\n grid-column: 2;\n grid-row: 1;\n\n &-no-action-nor-bullet {\n grid-column: 1;\n }\n\n &-no-bullet {\n grid-column: 1;\n }\n}\n","import { Component, Element, Listen, h, State, Prop } from '@stencil/core';\nimport { hasSlotContent, overrideFocus } from 'src/utils';\n\n/*\n @name Item\n * @category Display\n * @summary Use for laying out structured content with header, body, and footer text, icons, and actions.\n * @slot decorator - An optional slot to display custom content in the decorator area.\n * Supports either [Icon](https://tecton.q2developer.com/design-system/q2-icon/) or [Avatar](https://tecton.q2developer.com/design-system/q2-avatar/).\n * Use this to provide a visual indicator or icon for your item.\n \n @slot header - An optional slot to display custom content in the header area.\n * Use this to provide a title or label for your item.\n \n @slot body - An optional slot to display custom content in the body area.\n * Use this to provide the main content of your item.\n \n @slot action - An optional slot to display custom content in the action area.\n * Supports buttons, checkboxes, dropdowns, or other interactive elements related to the item.\n \n @slot footer - An optional slot to display custom content in the footer area.\n * Use this to provide additional information or actions related to the item.\n /\n@Component({\n tag: 'q2-item',\n styleUrl: 'q2-item.scss',\n shadow: true,\n})\nexport class Q2Item {\n // #region Own Properties\n\n itemElement: 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 renderTrigger: number = 0;\n\n // #endregion\n // #region Public Property API\n\n /* Makes the item clickable. */\n @Prop({ reflect: true })\n clickable: boolean;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentDidLoad() {\n if (typeof MutationObserver !== 'undefined') {\n const observer = new MutationObserver(() => (this.renderTrigger += 1));\n observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true });\n this.mutationObserver = observer;\n }\n overrideFocus(this.hostElement);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (this.clickable) {\n this.itemElement?.focus();\n } else {\n event.preventDefault();\n }\n }\n\n // #endregion\n // #region Local Methods\n\n get actionClasses() {\n const classes = ['action'];\n if (!this.hasDecoratorSlotContent) {\n classes.push(`action-no-bullet`);\n }\n\n return classes.join(' ');\n }\n\n get decoratorClasses() {\n const classes = ['bullet', 'decorator'];\n if (!this.hasFooterSlotContent) {\n classes.push(`bullet-no-footer`, `decorator-no-footer`);\n }\n\n return classes.join(' ');\n }\n\n get footerClasses() {\n const classes = ['footer'];\n if (!this.hasActionSlotContent && !this.hasDecoratorSlotContent) {\n classes.push(`footer-no-action-nor-bullet`);\n } else if (!this.hasActionSlotContent) {\n classes.push(`footer-no-action`);\n } else if (!this.hasDecoratorSlotContent) {\n classes.push(`footer-no-bullet`, `footer-no-decorator`);\n }\n\n return classes.join(' ');\n }\n\n get hasActionSlotContent() {\n return hasSlotContent(this.hostElement, 'action');\n }\n\n get hasBodySlotContent() {\n return hasSlotContent(this.hostElement, 'body');\n }\n\n get hasDecoratorSlotContent() {\n return hasSlotContent(this.hostElement, 'decorator') \|\| hasSlotContent(this.hostElement, 'bullet');\n }\n\n get hasFooterSlotContent() {\n return hasSlotContent(this.hostElement, 'footer');\n }\n\n get hasHeaderSlotContent() {\n return hasSlotContent(this.hostElement, 'header');\n }\n\n get itemClasses() {\n const classes = ['item'];\n if (!this.hasActionSlotContent && !this.hasDecoratorSlotContent) {\n classes.push(`item-no-action-nor-bullet`);\n } else if (!this.hasActionSlotContent) {\n classes.push(`item-no-action`);\n } else if (!this.hasDecoratorSlotContent) {\n classes.push(`item-no-bullet`, `item-no-decorator`);\n }\n if (!this.hasFooterSlotContent) {\n classes.push(`item-no-footer`);\n }\n\n return classes.join(' ');\n }\n\n get mainClasses() {\n const classes = ['main'];\n if (!this.hasActionSlotContent && !this.hasDecoratorSlotContent) {\n classes.push(`main-no-action-nor-bullet`);\n } else if (!this.hasDecoratorSlotContent) {\n classes.push(`main-no-bullet`, `main-no-decorator`);\n }\n\n return classes.join(' ');\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { clickable } = this;\n return (\n <div\n test-id=\"itemContainer\"\n class={this.itemClasses}\n ref={el => (this.itemElement = el)}\n role={clickable ? 'button' : undefined}\n tabIndex={clickable ? 0 : undefined}\n >\n {this.hasDecoratorSlotContent && (\n <div class={this.decoratorClasses}>\n <slot name=\"decorator\">\n <slot name=\"bullet\" />\n </slot>\n </div>\n )}\n <div class={this.mainClasses}>\n {this.hasHeaderSlotContent && (\n <div class=\"header\">\n <slot name=\"header\" />\n </div>\n )}\n {this.hasBodySlotContent && (\n <div class=\"body\">\n <slot name=\"body\" />\n </div>\n )}\n </div>\n {this.hasActionSlotContent && (\n <div class={this.actionClasses}>\n <slot name=\"action\" />\n </div>\n )}\n {this.hasFooterSlotContent && (\n <div class={this.footerClasses}>\n <slot name=\"footer\" />\n </div>\n )}\n </div>\n );\n }\n\n // #endregion\n}\n"],"version":3}
1	+ {"file":"q2-item2.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,6+KAA6+K;;MC4Bl/K,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAA,WAAA,CAAA;AALnB,IAAA,WAAA,GAAA;;;;;;AAqBI,QAAA,IAAa,CAAA,aAAA,GAAW,CAAC;AAiK5B;;;IArJG,gBAAgB,GAAA;AACZ,QAAA,IAAI,OAAO,gBAAgB,KAAK,WAAW,EAAE;AACzC,YAAA,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,OAAO,IAAI,CAAC,aAAa,IAAI,CAAC,CAAC,CAAC;YACtE,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC;AACxF,YAAA,IAAI,CAAC,gBAAgB,GAAG,QAAQ;;AAEpC,QAAA,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC;;;;AAOnC,IAAA,aAAa,CAAC,KAAiB,EAAA;;AAC3B,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;YAChB,CAAA,EAAA,GAAA,IAAI,CAAC,WAAW,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE;;aACtB;YACH,KAAK,CAAC,cAAc,EAAE;;;;;AAO9B,IAAA,IAAI,aAAa,GAAA;AACb,QAAA,MAAM,OAAO,GAAG,CAAC,QAAQ,CAAC;AAC1B,QAAA,IAAI,CAAC,IAAI,CAAC,uBAAuB,EAAE;AAC/B,YAAA,OAAO,CAAC,IAAI,CAAC,CAAA,gBAAA,CAAkB,CAAC;;AAGpC,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;AAG5B,IAAA,IAAI,gBAAgB,GAAA;AAChB,QAAA,MAAM,OAAO,GAAG,CAAC,QAAQ,EAAE,WAAW,CAAC;AACvC,QAAA,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE;AAC5B,YAAA,OAAO,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAA,mBAAA,CAAqB,CAAC;;AAG3D,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;AAG5B,IAAA,IAAI,aAAa,GAAA;AACb,QAAA,MAAM,OAAO,GAAG,CAAC,QAAQ,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,oBAAoB,IAAI,CAAC,IAAI,CAAC,uBAAuB,EAAE;AAC7D,YAAA,OAAO,CAAC,IAAI,CAAC,CAAA,2BAAA,CAA6B,CAAC;;AACxC,aAAA,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE;AACnC,YAAA,OAAO,CAAC,IAAI,CAAC,CAAA,gBAAA,CAAkB,CAAC;;AAC7B,aAAA,IAAI,CAAC,IAAI,CAAC,uBAAuB,EAAE;AACtC,YAAA,OAAO,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAA,mBAAA,CAAqB,CAAC;;AAG3D,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;AAG5B,IAAA,IAAI,oBAAoB,GAAA;QACpB,OAAO,cAAc,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC;;AAGrD,IAAA,IAAI,kBAAkB,GAAA;QAClB,OAAO,cAAc,CAAC,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC;;AAGnD,IAAA,IAAI,uBAAuB,GAAA;AACvB,QAAA,OAAO,cAAc,CAAC,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC,IAAI,cAAc,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC;;AAGtG,IAAA,IAAI,oBAAoB,GAAA;QACpB,OAAO,cAAc,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC;;AAGrD,IAAA,IAAI,oBAAoB,GAAA;QACpB,OAAO,cAAc,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC;;AAGrD,IAAA,IAAI,WAAW,GAAA;AACX,QAAA,MAAM,OAAO,GAAG,CAAC,MAAM,CAAC;QACxB,IAAI,CAAC,IAAI,CAAC,oBAAoB,IAAI,CAAC,IAAI,CAAC,uBAAuB,EAAE;AAC7D,YAAA,OAAO,CAAC,IAAI,CAAC,CAAA,yBAAA,CAA2B,CAAC;;AACtC,aAAA,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE;AACnC,YAAA,OAAO,CAAC,IAAI,CAAC,CAAA,cAAA,CAAgB,CAAC;;AAC3B,aAAA,IAAI,CAAC,IAAI,CAAC,uBAAuB,EAAE;AACtC,YAAA,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAA,iBAAA,CAAmB,CAAC;;AAEvD,QAAA,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE;AAC5B,YAAA,OAAO,CAAC,IAAI,CAAC,CAAA,cAAA,CAAgB,CAAC;;AAGlC,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;AAG5B,IAAA,IAAI,WAAW,GAAA;AACX,QAAA,MAAM,OAAO,GAAG,CAAC,MAAM,CAAC;QACxB,IAAI,CAAC,IAAI,CAAC,oBAAoB,IAAI,CAAC,IAAI,CAAC,uBAAuB,EAAE;AAC7D,YAAA,OAAO,CAAC,IAAI,CAAC,CAAA,yBAAA,CAA2B,CAAC;;AACtC,aAAA,IAAI,CAAC,IAAI,CAAC,uBAAuB,EAAE;AACtC,YAAA,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAA,iBAAA,CAAmB,CAAC;;AAGvD,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;;;IAM5B,MAAM,GAAA;AACF,QAAA,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI;AAC1B,QAAA,QACI,uEACY,eAAe,EACvB,KAAK,EAAE,IAAI,CAAC,WAAW,EACvB,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,EAClC,IAAI,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,EACtC,QAAQ,EAAE,SAAS,GAAG,CAAC,GAAG,SAAS,EAAA,EAElC,IAAI,CAAC,uBAAuB,KACzB,4DAAK,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAA,EAC7B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,WAAW,EAAA,EAClB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAG,CAAA,CACnB,CACL,CACT,EACD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,IAAI,CAAC,WAAW,EAAA,EACvB,IAAI,CAAC,oBAAoB,KACtB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACf,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAG,CACpB,CACT,EACA,IAAI,CAAC,kBAAkB,KACpB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAA,EACb,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAG,CAAA,CAClB,CACT,CACC,EACL,IAAI,CAAC,oBAAoB,KACtB,4DAAK,KAAK,EAAE,IAAI,CAAC,aAAa,EAAA,EAC1B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAG,CACpB,CACT,EACA,IAAI,CAAC,oBAAoB,KACtB,4DAAK,KAAK,EAAE,IAAI,CAAC,aAAa,EAAA,EAC1B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,CAAG,CACpB,CACT,CACC;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/q2-item/q2-item.scss?tag=q2-item&encapsulation=shadow","src/components/q2-item/q2-item.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n@import './variables';\n\n:host {\n display: block;\n\n .item {\n --comp-border-radius: #{var-list(--tct-item-border-radius, --app-border-radius-0, 0)};\n }\n}\n\n:host([clickable]) {\n cursor: pointer;\n --comp-background: #{var-list(\n --tct-btn-primary-background,\n --tct-btn-primary-bg,\n --t-a11y-active-gray-color-AA,\n #404040\n )};\n .item {\n --comp-border-radius: #{var-list(--tct-item-border-radius, --app-border-radius-1, 4px)};\n --comp-btn-tween: #{var-list(var-prefixer(btn-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n --comp-btn-fallback-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n --comp-hover-box-shadow: #{var-list(--tct-btn-primary-box-shadow, --comp-btn-fallback-box-shadow)};\n --comp-active-box-shadow: var(--tct-btn-primary-active-background, #0063a0);\n --comp-font-color: #{var-list(--tct-btn-primary-font-color, --app-white, #ffffff)};\n @include btn-ring(primary, hover, --comp-background, --comp-font-color, null);\n &:hover {\n box-shadow: var(--comp-hover-box-shadow);\n }\n &:active {\n box-shadow: var(--comp-active-box-shadow);\n }\n &:focus-visible {\n box-shadow: var(--const-double-focus-ring);\n }\n }\n}\n\n.action {\n --tct-btn-icon-height: #{var-list(--tct-item-action-icon-height, --app-scale-6x, 30px)};\n --tct-btn-icon-width: #{var-list(--tct-item-action-icon-width, --app-scale-6x, 30px)};\n --tct-icon-size: #{var-list(--tct-item-action-icon-size, --app-scale-6x, 30px)};\n --tct-radio-label-hidden-columns: 18px;\n --tct-radio-label-margin-right: 0;\n --tct-radio-margin: 0;\n\n align-items: var(--tct-item-action-align-items, center);\n display: flex;\n grid-row: 1;\n justify-content: center;\n\n &-no-bullet {\n grid-column: 2;\n }\n}\n\n.body {\n color: var-list(--tct-item-body-color, --t-textA, #747474);\n font-size: var-list(--tct-item-body-font-size, --app-font-size, 14px);\n font-weight: var-list(--tct-item-body-font-weight, 400);\n font-style: var-list(--tct-item-body-font-style, inherit);\n}\n\n.bullet {\n --tct-avatar-fallback-height: #{var-list(--tct-item-avatar-height, --app-scale-7x, 35px)};\n --tct-avatar-fallback-width: #{var-list(--tct-item-avatar-width, --app-scale-7x, 35px)};\n --tct-avatar-height: #{var-list(--tct-item-avatar-height, --app-scale-7x, 35px)};\n --tct-avatar-width: #{var-list(--tct-item-avatar-width, --app-scale-7x, 35px)};\n\n grid-column: 1;\n grid-row-start: 1;\n grid-row-end: 3;\n padding-top: var-list(--tct-item-bullet-padding-top, --app-scale-1x, 5px);\n text-align: center;\n\n &-no-footer {\n grid-row-end: 2;\n }\n}\n\n.footer {\n color: var-list(--tct-item-footer-color, inherit);\n font-size: var(--tct-item-footer-font-size, inherit);\n font-weight: var(--tct-item-footer-font-weight, inherit);\n font-style: var-list(--tct-item-footer-font-style, inherit);\n grid-column-start: 2;\n grid-column-end: 4;\n grid-row: 2;\n\n &-no-action-nor-bullet {\n grid-column-start: 1;\n grid-column-end: 2;\n }\n\n &-no-action {\n grid-column-start: 2;\n grid-column-end: 3;\n }\n\n &-no-bullet {\n grid-column-start: 1;\n grid-column-end: 3;\n }\n}\n\n.header {\n color: var-list(--tct-item-header-color, --t-text, #4d4d4d);\n font-size: var-list(--tct-item-header-font-size, 16px);\n font-style: var-list(--tct-item-header-font-style, inherit);\n font-weight: var-list(--tct-item-header-font-weight, 600);\n line-height: var-list(--tct-item-header-line-height, 1.5);\n}\n\n.item {\n font-style: var-list(--tct-item-font-style, inherit);\n border: var(--tct-item-border);\n border-radius: var(--comp-border-radius);\n transition: var(--comp-btn-tween);\n transition-property: box-shadow;\n column-gap: var-list(--tct-item-horizontal-spacing, --app-scale-3x, 15px);\n display: grid;\n grid-template-columns: minmax(var(--app-scale-7x, 35px), auto) minmax(0, 1fr) minmax(\n var(--app-scale-5x, 25px),\n auto\n );\n grid-template-rows: auto auto;\n padding: var(--tct-item-padding, 0);\n row-gap: var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px));\n\n &-no-action-nor-bullet {\n grid-template-columns: auto;\n }\n\n &-no-action {\n grid-template-columns: minmax(var(--app-scale-7x, 35px), auto) minmax(0, 1fr);\n }\n\n &-no-footer {\n grid-template-rows: auto;\n }\n\n &-no-bullet {\n grid-template-columns: minmax(0, 1fr) minmax(var(--app-scale-5x, 25px), auto);\n }\n}\n\n.main {\n grid-column: 2;\n grid-row: 1;\n\n &-no-action-nor-bullet {\n grid-column: 1;\n }\n\n &-no-bullet {\n grid-column: 1;\n }\n}\n","import { Component, Element, Listen, h, State, Prop } from '@stencil/core';\nimport { hasSlotContent, overrideFocus } from 'src/utils';\n\n/*\n @name Item\n * @category Display\n * @summary Use for laying out structured content with header, body, and footer text, icons, and actions.\n * @slot decorator - An optional slot to display custom content in the decorator area.\n * Supports either [Icon](https://tecton.q2developer.com/design-system/q2-icon/) or [Avatar](https://tecton.q2developer.com/design-system/q2-avatar/).\n * Use this to provide a visual indicator or icon for your item.\n \n @slot header - An optional slot to display custom content in the header area.\n * Use this to provide a title or label for your item.\n \n @slot body - An optional slot to display custom content in the body area.\n * Use this to provide the main content of your item.\n \n @slot action - An optional slot to display custom content in the action area.\n * Supports buttons, checkboxes, dropdowns, or other interactive elements related to the item.\n \n @slot footer - An optional slot to display custom content in the footer area.\n * Use this to provide additional information or actions related to the item.\n /\n@Component({\n tag: 'q2-item',\n styleUrl: 'q2-item.scss',\n shadow: true,\n})\nexport class Q2Item {\n // #region Own Properties\n\n itemElement: 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 renderTrigger: number = 0;\n\n // #endregion\n // #region Public Property API\n\n /* Makes the item clickable. */\n @Prop({ reflect: true })\n clickable: boolean;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentDidLoad() {\n if (typeof MutationObserver !== 'undefined') {\n const observer = new MutationObserver(() => (this.renderTrigger += 1));\n observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true });\n this.mutationObserver = observer;\n }\n overrideFocus(this.hostElement);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (this.clickable) {\n this.itemElement?.focus();\n } else {\n event.preventDefault();\n }\n }\n\n // #endregion\n // #region Local Methods\n\n get actionClasses() {\n const classes = ['action'];\n if (!this.hasDecoratorSlotContent) {\n classes.push(`action-no-bullet`);\n }\n\n return classes.join(' ');\n }\n\n get decoratorClasses() {\n const classes = ['bullet', 'decorator'];\n if (!this.hasFooterSlotContent) {\n classes.push(`bullet-no-footer`, `decorator-no-footer`);\n }\n\n return classes.join(' ');\n }\n\n get footerClasses() {\n const classes = ['footer'];\n if (!this.hasActionSlotContent && !this.hasDecoratorSlotContent) {\n classes.push(`footer-no-action-nor-bullet`);\n } else if (!this.hasActionSlotContent) {\n classes.push(`footer-no-action`);\n } else if (!this.hasDecoratorSlotContent) {\n classes.push(`footer-no-bullet`, `footer-no-decorator`);\n }\n\n return classes.join(' ');\n }\n\n get hasActionSlotContent() {\n return hasSlotContent(this.hostElement, 'action');\n }\n\n get hasBodySlotContent() {\n return hasSlotContent(this.hostElement, 'body');\n }\n\n get hasDecoratorSlotContent() {\n return hasSlotContent(this.hostElement, 'decorator') \|\| hasSlotContent(this.hostElement, 'bullet');\n }\n\n get hasFooterSlotContent() {\n return hasSlotContent(this.hostElement, 'footer');\n }\n\n get hasHeaderSlotContent() {\n return hasSlotContent(this.hostElement, 'header');\n }\n\n get itemClasses() {\n const classes = ['item'];\n if (!this.hasActionSlotContent && !this.hasDecoratorSlotContent) {\n classes.push(`item-no-action-nor-bullet`);\n } else if (!this.hasActionSlotContent) {\n classes.push(`item-no-action`);\n } else if (!this.hasDecoratorSlotContent) {\n classes.push(`item-no-bullet`, `item-no-decorator`);\n }\n if (!this.hasFooterSlotContent) {\n classes.push(`item-no-footer`);\n }\n\n return classes.join(' ');\n }\n\n get mainClasses() {\n const classes = ['main'];\n if (!this.hasActionSlotContent && !this.hasDecoratorSlotContent) {\n classes.push(`main-no-action-nor-bullet`);\n } else if (!this.hasDecoratorSlotContent) {\n classes.push(`main-no-bullet`, `main-no-decorator`);\n }\n\n return classes.join(' ');\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { clickable } = this;\n return (\n <div\n test-id=\"itemContainer\"\n class={this.itemClasses}\n ref={el => (this.itemElement = el)}\n role={clickable ? 'button' : undefined}\n tabIndex={clickable ? 0 : undefined}\n >\n {this.hasDecoratorSlotContent && (\n <div class={this.decoratorClasses}>\n <slot name=\"decorator\">\n <slot name=\"bullet\" />\n </slot>\n </div>\n )}\n <div class={this.mainClasses}>\n {this.hasHeaderSlotContent && (\n <div class=\"header\">\n <slot name=\"header\" />\n </div>\n )}\n {this.hasBodySlotContent && (\n <div class=\"body\">\n <slot name=\"body\" />\n </div>\n )}\n </div>\n {this.hasActionSlotContent && (\n <div class={this.actionClasses}>\n <slot name=\"action\" />\n </div>\n )}\n {this.hasFooterSlotContent && (\n <div class={this.footerClasses}>\n <slot name=\"footer\" />\n </div>\n )}\n </div>\n );\n }\n\n // #endregion\n}\n"],"version":3}

package/dist/components/q2-legend2.js CHANGED Viewed

@@ -18,8 +18,6 @@ const Q2Legend = /*@__PURE__*/ proxyCustomElement(class Q2Legend extends HTMLEle
         // #region State Properties
         this.hoveredItemIndex = -1;
         this.selectedItemIndex = -1;
-        // #endregion
-        // #region Public Property API
         /** An array of objects that contain the data to be displayed. */
         this.data = [];
         /** The format of the value displayed in the legend. */
@@ -63,6 +61,7 @@ const Q2Legend = /*@__PURE__*/ proxyCustomElement(class Q2Legend extends HTMLEle
             return Intl.NumberFormat('en-US', {
                 style: 'currency',
                 currency: 'USD',
+                maximumFractionDigits: this.currencyRound ? 0 : 2,
             }).format(valueAsFloat);
         }
         return Intl.NumberFormat('en-US').format(valueAsFloat);
@@ -118,7 +117,7 @@ const Q2Legend = /*@__PURE__*/ proxyCustomElement(class Q2Legend extends HTMLEle
     // #endregion
     // #region Render Methods
     render() {
-        return (h("click-elsewhere", { key: 'ab6f88f29a37f3b48c7bee9bc1263142d9376b3c', onChange: () => this.onClickElsewhere(this) }, h("ul", { key: 'aa6443ae74f0d89965963195c479aab4f95fa667' }, this.dataWithClasses.map(item => (h("li", { class: "item" }, h("button", { "test-id": "item", "aria-label": `${item.name} ${this.formatValue(item.value)}`, class: item.classes, onClick: event => this.onClick(event, item), onMouseEnter: event => this.onMouseEnter(event, item), onMouseLeave: event => this.onMouseLeave(event, item) }, h("span", { "test-id": "itemColor", class: "item-color-indicator", style: { backgroundColor: item.color }, "aria-hidden": "true" }), h("span", { "test-id": "itemName", class: "item-name" }, item.name), h("span", { id: `item-${item.id}`, "test-id": "itemValue", class: "item-value" }, this.formatValue(item.value)))))))));
+        return (h("click-elsewhere", { key: '32d4b5a9adfdd824fba84233dd1647236a80d2e7', onChange: () => this.onClickElsewhere(this) }, h("ul", { key: '2842a006e6aab9d478bf900e13e0f45c14ec4a67' }, this.dataWithClasses.map(item => (h("li", { class: "item" }, h("button", { "test-id": "item", "aria-label": `${item.name} ${this.formatValue(item.value)}`, class: item.classes, onClick: event => this.onClick(event, item), onMouseEnter: event => this.onMouseEnter(event, item), onMouseLeave: event => this.onMouseLeave(event, item) }, h("span", { "test-id": "itemColor", class: "item-color-indicator", style: { backgroundColor: item.color }, "aria-hidden": "true" }), h("span", { "test-id": "itemName", class: "item-name" }, item.name), h("span", { id: `item-${item.id}`, "test-id": "itemValue", class: "item-value" }, this.formatValue(item.value)))))))));
     }
     static get watchers() { return {
         "hoveredItemId": ["watchHoveredItemId"],
@@ -126,6 +125,7 @@ const Q2Legend = /*@__PURE__*/ proxyCustomElement(class Q2Legend extends HTMLEle
     }; }
     static get style() { return q2LegendCss; }
 }, [1, "q2-legend", {
+        "currencyRound": [4, "currency-round"],
         "data": [16],
         "format": [513],
         "hoveredItemId": [513, "hovered-item-id"],

package/dist/components/q2-legend2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-legend2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/q2-legend/q2-legend.scss?tag=q2-legend&encapsulation=shadow","src/components/q2-legend/q2-legend.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n position: relative;\n width: 100%;\n display: block;\n}\n\nul {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n.item-button {\n align-items: flex-start;\n background-color: transparent;\n border: none;\n column-gap: var-list(--tct-legend-item-gap, --app-scale-2x, 10px);\n display: flex;\n min-height: var-list(--tct-legend-item-min-height, 15px);\n opacity: 1;\n padding: var(--tct-legend-item-padding, unquote('0 0 9px 0'));\n transition: opacity var(--app-tween-1, 0.2s ease);\n width: 100%;\n\n &:focus-visible {\n box-shadow: var-list(--tct-legend-item-focus-visible-box-shadow, --aesthetic-focus-ring-shadow);\n }\n\n &:hover {\n cursor: pointer;\n }\n\n &-faded > * {\n opacity: var-list(--tct-legend-item-opacity-faded, --app-disabled-opacity, 0.4);\n }\n}\n\n.item-color-indicator {\n border-radius: 50%;\n display: inline-block;\n flex-shrink: 0;\n height: var-list(--tct-legend-item-color-indicator-size, --app-scale-3x, 15px);\n width: var-list(--tct-legend-item-color-indicator-size, --app-scale-3x, 15px);\n}\n\n.item-name {\n color: var-list(--tct-legend-item-name-font-color, --t-text, #4d4d4d);\n display: inline-block;\n flex-grow: 1;\n font-size: var-list(--tct-legend-item-name-font-size, --app-font-size, 14px);\n font-weight: var(--tct-legend-item-name-font-weight, 600);\n line-height: var(--tct-legend-item-name-line-height, 1);\n text-align: left;\n}\n\n.item-value {\n color: var-list(--tct-legend-item-value-font-color, --t-text, #4d4d4d);\n display: inline-block;\n margin-left: auto;\n flex-grow: 0;\n font-size: var-list(--tct-legend-item-value-font-size, --app-font-size, 14px);\n font-weight: var(--tct-legend-item-value-font-weight, 400);\n line-height: var(--tct-legend-item-value-line-height, 1);\n text-align: right;\n}\n","import { Component, ComponentInterface, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport type { DonutChartData } from 'q2-tecton-common/lib/types/elements';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/*\n @name Legend\n * @category Data Visualization\n * @summary Use for displaying chart legends with interactive item selection.\n /\n@Component({\n tag: 'q2-legend',\n shadow: true,\n styleUrl: 'q2-legend.scss',\n})\nexport class Q2Legend implements ComponentInterface {\n // #region State Properties\n\n @State()\n hoveredItemIndex: number = -1;\n\n @State()\n selectedItemIndex: number = -1;\n\n // #endregion\n // #region Public Property API\n\n /* An array of objects that contain the data to be displayed. /\n @Prop()\n data: DonutChartData[] = [];\n\n /* The format of the value displayed in the legend. /\n @Prop({ reflect: true })\n format: 'default' \| 'currency' = 'default';\n\n /* The id of the item to set as hovered. /\n @Prop({ reflect: true })\n hoveredItemId: string = null;\n\n /* The id of the item to set as selected. /\n @Prop({ reflect: true })\n selectedItemId: string = null;\n\n // #endregion\n // #region Events\n\n /\n Emitted when a legend item is clicked.\n * @deprecated Use 'tctClick' instead\n /\n @Event()\n click: EventEmitter<DonutChartData>;\n\n /\n Emitted when the mouse enters a legend item.\n * @deprecated Use 'tctMouseenter' instead\n /\n @Event()\n mouseenter: EventEmitter<DonutChartData>;\n\n /\n Emitted when the mouse leaves a legend item.\n * @deprecated Use 'tctMouseleave' instead\n /\n @Event()\n mouseleave: EventEmitter<DonutChartData>;\n\n /\n Emitted when a legend item is clicked.\n /\n @Event()\n tctClick: EventEmitter<DonutChartData>;\n\n /\n Emitted when the mouse enters a legend item.\n /\n @Event()\n tctMouseEnter: EventEmitter<DonutChartData>;\n\n /\n Emitted when the mouse leaves a legend item.\n */\n @Event()\n tctMouseLeave: EventEmitter<DonutChartData>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n this.watchHoveredItemId(this.hoveredItemId);\n this.watchSelectedItemId(this.selectedItemId);\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('hoveredItemId')\n watchHoveredItemId(newItemId: string) {\n const newItemIndex = this.getDataIndexForId(newItemId);\n this.hoveredItemIndex = newItemIndex;\n }\n\n @Watch('selectedItemId')\n watchSelectedItemId(newItemId: string) {\n const newItemIndex = this.getDataIndexForId(newItemId);\n this.selectedItemIndex = newItemIndex;\n }\n\n // #endregion\n // #region Local Methods\n\n get dataWithClasses() {\n return this.data.map((item, index) => ({\n ...item,\n classes: {\n 'item-button': true,\n 'item-button-faded': this.isItemButtonFaded(index),\n 'item-button-selected': this.isItemButtonSelected(index),\n },\n }));\n }\n\n formatValue(value: string \| number) {\n const valueAsFloat = parseFloat(value.toString());\n if (this.format === 'currency') {\n return Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD',\n }).format(valueAsFloat);\n }\n\n return Intl.NumberFormat('en-US').format(valueAsFloat);\n }\n\n getDataIndexForId(id: string) {\n const index = this.data.findIndex(item => item.id === id);\n return index >= 0 ? index : -1;\n }\n\n isItemButtonFaded(index: number) {\n if (this.isItemButtonSelected(index) \|\| index == this.hoveredItemIndex) return false;\n\n if (this.selectedItemIndex >= 0 && this.hoveredItemIndex === -1) return true;\n\n return this.hoveredItemIndex >= 0 && index !== this.hoveredItemIndex;\n }\n\n isItemButtonSelected(index: number) {\n return index === this.selectedItemIndex;\n }\n\n onClick(event: MouseEvent, itemData: DonutChartData) {\n event.stopPropagation();\n const itemIndex = this.getDataIndexForId(itemData.id);\n if (this.selectedItemIndex === itemIndex) {\n this.selectedItemIndex = -1;\n if (event.detail === 0) {\n // Keyboard click\n this.hoveredItemIndex = -1;\n } else {\n // Mouse click\n this.hoveredItemIndex = itemIndex;\n }\n mirrorEmit(this, ['click', 'tctClick'], null);\n return;\n }\n\n this.selectedItemIndex = itemIndex;\n mirrorEmit(this, ['click', 'tctClick'], this.data[itemIndex]);\n }\n\n onClickElsewhere(obj) {\n obj.selectedItemIndex = -1;\n }\n\n onMouseEnter(event: Event, itemData: DonutChartData) {\n event.stopPropagation();\n const itemIndex = this.getDataIndexForId(itemData.id);\n this.hoveredItemIndex = itemIndex;\n mirrorEmit(this, ['mouseenter', 'tctMouseEnter'], this.data[itemIndex]);\n }\n\n onMouseLeave(event: Event, itemData: DonutChartData) {\n event.stopPropagation();\n const itemIndex = this.getDataIndexForId(itemData.id);\n this.hoveredItemIndex = -1;\n mirrorEmit(this, ['mouseleave', 'tctMouseLeave'], this.data[itemIndex]);\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <click-elsewhere onChange={() => this.onClickElsewhere(this)}>\n <ul>\n {this.dataWithClasses.map(item => (\n <li class=\"item\">\n <button\n test-id=\"item\"\n aria-label={`${item.name} ${this.formatValue(item.value)}`}\n class={item.classes}\n onClick={event => this.onClick(event, item)}\n onMouseEnter={event => this.onMouseEnter(event, item)}\n onMouseLeave={event => this.onMouseLeave(event, item)}\n >\n <span\n test-id=\"itemColor\"\n class=\"item-color-indicator\"\n style={{ backgroundColor: item.color }}\n aria-hidden=\"true\"\n />\n <span\n test-id=\"itemName\"\n class=\"item-name\"\n >\n {item.name}\n </span>\n <span\n id={`item-${item.id}`}\n test-id=\"itemValue\"\n class=\"item-value\"\n >\n {this.formatValue(item.value)}\n </span>\n </button>\n </li>\n ))}\n </ul>\n </click-elsewhere>\n );\n }\n\n // #endregion\n}\n"],"version":3}
1	+ {"file":"q2-legend2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/q2-legend/q2-legend.scss?tag=q2-legend&encapsulation=shadow","src/components/q2-legend/q2-legend.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n:host {\n position: relative;\n width: 100%;\n display: block;\n}\n\nul {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n.item-button {\n align-items: flex-start;\n background-color: transparent;\n border: none;\n column-gap: var-list(--tct-legend-item-gap, --app-scale-2x, 10px);\n display: flex;\n min-height: var-list(--tct-legend-item-min-height, 15px);\n opacity: 1;\n padding: var(--tct-legend-item-padding, unquote('0 0 9px 0'));\n transition: opacity var(--app-tween-1, 0.2s ease);\n width: 100%;\n\n &:focus-visible {\n box-shadow: var-list(--tct-legend-item-focus-visible-box-shadow, --aesthetic-focus-ring-shadow);\n }\n\n &:hover {\n cursor: pointer;\n }\n\n &-faded > * {\n opacity: var-list(--tct-legend-item-opacity-faded, --app-disabled-opacity, 0.4);\n }\n}\n\n.item-color-indicator {\n border-radius: 50%;\n display: inline-block;\n flex-shrink: 0;\n height: var-list(--tct-legend-item-color-indicator-size, --app-scale-3x, 15px);\n width: var-list(--tct-legend-item-color-indicator-size, --app-scale-3x, 15px);\n}\n\n.item-name {\n color: var-list(--tct-legend-item-name-font-color, --t-text, #4d4d4d);\n display: inline-block;\n flex-grow: 1;\n font-size: var-list(--tct-legend-item-name-font-size, --app-font-size, 14px);\n font-weight: var(--tct-legend-item-name-font-weight, 600);\n line-height: var(--tct-legend-item-name-line-height, 1);\n text-align: left;\n}\n\n.item-value {\n color: var-list(--tct-legend-item-value-font-color, --t-text, #4d4d4d);\n display: inline-block;\n margin-left: auto;\n flex-grow: 0;\n font-size: var-list(--tct-legend-item-value-font-size, --app-font-size, 14px);\n font-weight: var(--tct-legend-item-value-font-weight, 400);\n line-height: var(--tct-legend-item-value-line-height, 1);\n text-align: right;\n}\n","import { Component, ComponentInterface, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport type { DonutChartData } from 'q2-tecton-common/lib/types/elements';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/*\n @name Legend\n * @category Data Visualization\n * @summary Use for displaying chart legends with interactive item selection.\n /\n@Component({\n tag: 'q2-legend',\n shadow: true,\n styleUrl: 'q2-legend.scss',\n})\nexport class Q2Legend implements ComponentInterface {\n // #region State Properties\n\n @State()\n hoveredItemIndex: number = -1;\n\n @State()\n selectedItemIndex: number = -1;\n\n // #endregion\n // #region Public Property API\n\n /* Controls when numbers displayed as currency, if they are whole numbers, they will not include the .00. /\n @Prop()\n currencyRound: boolean;\n\n /* An array of objects that contain the data to be displayed. /\n @Prop()\n data: DonutChartData[] = [];\n\n /* The format of the value displayed in the legend. /\n @Prop({ reflect: true })\n format: 'default' \| 'currency' = 'default';\n\n /* The id of the item to set as hovered. /\n @Prop({ reflect: true })\n hoveredItemId: string = null;\n\n /* The id of the item to set as selected. /\n @Prop({ reflect: true })\n selectedItemId: string = null;\n\n // #endregion\n // #region Events\n\n /\n Emitted when a legend item is clicked.\n * @deprecated Use 'tctClick' instead\n /\n @Event()\n click: EventEmitter<DonutChartData>;\n\n /\n Emitted when the mouse enters a legend item.\n * @deprecated Use 'tctMouseenter' instead\n /\n @Event()\n mouseenter: EventEmitter<DonutChartData>;\n\n /\n Emitted when the mouse leaves a legend item.\n * @deprecated Use 'tctMouseleave' instead\n /\n @Event()\n mouseleave: EventEmitter<DonutChartData>;\n\n /\n Emitted when a legend item is clicked.\n /\n @Event()\n tctClick: EventEmitter<DonutChartData>;\n\n /\n Emitted when the mouse enters a legend item.\n /\n @Event()\n tctMouseEnter: EventEmitter<DonutChartData>;\n\n /\n Emitted when the mouse leaves a legend item.\n */\n @Event()\n tctMouseLeave: EventEmitter<DonutChartData>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n this.watchHoveredItemId(this.hoveredItemId);\n this.watchSelectedItemId(this.selectedItemId);\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('hoveredItemId')\n watchHoveredItemId(newItemId: string) {\n const newItemIndex = this.getDataIndexForId(newItemId);\n this.hoveredItemIndex = newItemIndex;\n }\n\n @Watch('selectedItemId')\n watchSelectedItemId(newItemId: string) {\n const newItemIndex = this.getDataIndexForId(newItemId);\n this.selectedItemIndex = newItemIndex;\n }\n\n // #endregion\n // #region Local Methods\n\n get dataWithClasses() {\n return this.data.map((item, index) => ({\n ...item,\n classes: {\n 'item-button': true,\n 'item-button-faded': this.isItemButtonFaded(index),\n 'item-button-selected': this.isItemButtonSelected(index),\n },\n }));\n }\n\n formatValue(value: string \| number) {\n const valueAsFloat = parseFloat(value.toString());\n if (this.format === 'currency') {\n return Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD',\n maximumFractionDigits: this.currencyRound ? 0 : 2,\n }).format(valueAsFloat);\n }\n return Intl.NumberFormat('en-US').format(valueAsFloat);\n }\n\n getDataIndexForId(id: string) {\n const index = this.data.findIndex(item => item.id === id);\n return index >= 0 ? index : -1;\n }\n\n isItemButtonFaded(index: number) {\n if (this.isItemButtonSelected(index) \|\| index == this.hoveredItemIndex) return false;\n\n if (this.selectedItemIndex >= 0 && this.hoveredItemIndex === -1) return true;\n\n return this.hoveredItemIndex >= 0 && index !== this.hoveredItemIndex;\n }\n\n isItemButtonSelected(index: number) {\n return index === this.selectedItemIndex;\n }\n\n onClick(event: MouseEvent, itemData: DonutChartData) {\n event.stopPropagation();\n const itemIndex = this.getDataIndexForId(itemData.id);\n if (this.selectedItemIndex === itemIndex) {\n this.selectedItemIndex = -1;\n if (event.detail === 0) {\n // Keyboard click\n this.hoveredItemIndex = -1;\n } else {\n // Mouse click\n this.hoveredItemIndex = itemIndex;\n }\n mirrorEmit(this, ['click', 'tctClick'], null);\n return;\n }\n\n this.selectedItemIndex = itemIndex;\n mirrorEmit(this, ['click', 'tctClick'], this.data[itemIndex]);\n }\n\n onClickElsewhere(obj) {\n obj.selectedItemIndex = -1;\n }\n\n onMouseEnter(event: Event, itemData: DonutChartData) {\n event.stopPropagation();\n const itemIndex = this.getDataIndexForId(itemData.id);\n this.hoveredItemIndex = itemIndex;\n mirrorEmit(this, ['mouseenter', 'tctMouseEnter'], this.data[itemIndex]);\n }\n\n onMouseLeave(event: Event, itemData: DonutChartData) {\n event.stopPropagation();\n const itemIndex = this.getDataIndexForId(itemData.id);\n this.hoveredItemIndex = -1;\n mirrorEmit(this, ['mouseleave', 'tctMouseLeave'], this.data[itemIndex]);\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <click-elsewhere onChange={() => this.onClickElsewhere(this)}>\n <ul>\n {this.dataWithClasses.map(item => (\n <li class=\"item\">\n <button\n test-id=\"item\"\n aria-label={`${item.name} ${this.formatValue(item.value)}`}\n class={item.classes}\n onClick={event => this.onClick(event, item)}\n onMouseEnter={event => this.onMouseEnter(event, item)}\n onMouseLeave={event => this.onMouseLeave(event, item)}\n >\n <span\n test-id=\"itemColor\"\n class=\"item-color-indicator\"\n style={{ backgroundColor: item.color }}\n aria-hidden=\"true\"\n />\n <span\n test-id=\"itemName\"\n class=\"item-name\"\n >\n {item.name}\n </span>\n <span\n id={`item-${item.id}`}\n test-id=\"itemValue\"\n class=\"item-value\"\n >\n {this.formatValue(item.value)}\n </span>\n </button>\n </li>\n ))}\n </ul>\n </click-elsewhere>\n );\n }\n\n // #endregion\n}\n"],"version":3}

package/dist/components/q2-link2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-link2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/q2-link/q2-link.scss?tag=q2-link&encapsulation=shadow","src/components/q2-link/q2-link.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n}\n\n:host {\n &:active {\n box-shadow: none;\n }\n}\n\n:host([ellipsis]:not([ellipsis=\"false\"])) {\n display: block;\n flex: 0 1 auto;\n max-width: var-list(--tct-link-ellipsis-max-width, 45%);\n min-width: 0;\n overflow: hidden;\n}\n\n:host([ellipsis]:not([ellipsis=\"false\"])[full-width]:not([full-width=\"false\"])) {\n flex: 1 1 0px;\n max-width: 100%;\n}\n\n:host([full-width]:not([full-width=\"false\"])) {\n display: inline-flex;\n justify-content: center;\n width: 100%;\n}\n\n.ellipsis {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n}\n\n.label {\n &.ellipsis {\n display: block;\n min-width: 0;\n flex: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n}\n\n.link-container {\n --comp-link-font-bold-stroke-width: 0.5px;\n background: transparent;\n border: none;\n border-radius: var(--tct-link-border-radius, 0);\n font-size: var-list(--tct-link-font-size, inherit);\n font-weight: var-list(--tct-link-font-weight, inherit);\n max-width: 100%;\n overflow: hidden;\n\n &.standalone {\n --comp-icon-stroke: var(--tct-link-icon-stroke-width, 1.5);\n display: block;\n width: 100%;\n max-width: 100%;\n min-width: 0;\n .link {\n color: var-list(--tct-link-color-standalone, --t-primary);\n min-height: var(--tct-link-min-height, 24px);\n display: flex;\n align-items: center;\n border-radius: var(--tct-link-border-radius, 0);\n --tct-icon-size: 16px;\n text-decoration: none;\n width: 100%;\n max-width: 100%;\n min-width: 0;\n overflow: hidden;\n q2-icon {\n margin-left: var(--tct-link-label-icon-gap, 6px);\n color: var(--tct-link-icon-color, inherit);\n flex-shrink: 0;\n }\n }\n &:hover {\n text-decoration: underline;\n -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n --tct-icon-stroke-width: calc(var(--comp-icon-stroke) + 0.5);\n }\n &:active:hover {\n text-decoration: underline;\n -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n --tct-icon-stroke-width: calc(var(--comp-icon-stroke) + 0.5);\n .link {\n color: var-list(--tct-link-color-standalone-active, --t-primary-d2);\n box-shadow: none;\n }\n }\n &.disabled {\n .link {\n cursor: not-allowed;\n color: var-list(--tct-link-color-standalone-disabled-color, --t-primary);\n opacity: var-list(\n --tct-link-color-standalone-disabled-opacity,\n --tct-link-disabled-opacity,\n --app-disabled-opacity,\n 0.4\n );\n text-decoration: none;\n }\n &:hover {\n text-decoration: none;\n }\n }\n &:has(:focus-visible) {\n box-shadow: var(--tct-link-focus-visible-box-shadow, --const-double-focus-ring);\n }\n }\n\n &.inline {\n margin: 0 var(--tct-link-side-margin, 6px);\n text-decoration: underline;\n color: var-list(--tct-link-color-inline, --t-primary);\n &.ellipsis {\n display: block;\n max-width: 100%;\n }\n &:hover {\n -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n }\n &:active:hover {\n -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n color: var-list(--tct-link-color-inline-active, --t-primary-d2);\n box-shadow: none;\n }\n &.disabled {\n cursor: not-allowed;\n opacity: var-list(--tct-link-disabled-opacity, --app-disabled-opacity, 0.4);\n }\n &:focus-visible {\n box-shadow: var(--tct-link-focus-visible-box-shadow, --const-double-focus-ring);\n }\n }\n}\n","import { Component, Prop, h, ComponentInterface, Element, Event, EventEmitter, Method } from '@stencil/core';\n/*\n @name Link\n * @category Display\n * @summary Use for navigation to other pages or sections. Prefer over q2-btn for non-action navigation.\n /\n@Component({ tag: 'q2-link', shadow: true, styleUrl: 'q2-link.scss' })\nexport class Q2Link implements ComponentInterface {\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /\n @private\n * Tooltip text set by a parent q2-tooltip component for accessibility.\n /\n @Prop()\n _tooltip: string;\n\n /* Determines whether the component and `tctClick` event are disabled. /\n @Prop({ reflect: true })\n disabled: boolean = false;\n\n /* If `true`, the label will be truncated with an ellipsis when it's too long. /\n @Prop({ reflect: true })\n ellipsis: boolean = false;\n\n /* If `true`, it takes up 100% width. /\n @Prop({ reflect: true })\n fullWidth: boolean;\n\n /* The link when clicked. /\n @Prop({ reflect: true })\n href: string = 'javascript:void(0)';\n\n /* The [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to display when `variant` is set to \"standalone\". /\n @Prop({ reflect: true })\n iconType: string;\n\n /* The displayed label to represent your link. /\n @Prop({ reflect: true })\n label: string;\n\n /* How much of the referrer to send when following the link. [See MDN for more information on referrerpolicy](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy). /\n @Prop({ reflect: true })\n referrerpolicy: ReferrerPolicy;\n\n /* Where to display the linked URL. [See MDN for more information on target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). /\n @Prop({ reflect: true })\n target: string; // _self \| _blank\n\n /* Applies a `title` attribute to the anchor tag in the shadowRoot of the component. /\n @Prop({ reflect: true })\n tctTitle: string;\n\n /* Determines the visual display style of the link. /\n @Prop({ reflect: true })\n variant: string = 'inline';\n\n // #endregion\n // #region Events\n\n /\n Emitted when the link is clicked.\n * @legacyEvent\n /\n @Event({ cancelable: true })\n tctClick: EventEmitter<{ target: string; referrerpolicy: string; href: string }>;\n\n // #endregion\n // #region Public Methods API\n\n /\n A method for click.\n \n @testOnly\n */\n @Method()\n async clickLink() {\n const anchor = this.hostElement.shadowRoot.querySelector(`[test-id=\"linkAnchor\"]`);\n (anchor as HTMLAnchorElement)?.click();\n }\n\n // #endregion\n // #region Local Methods\n\n get classes(): string {\n const list = ['link-container'];\n if (this.variant) list.push(this.variant);\n if (!!this.disabled) list.push('disabled');\n return list.join(' ');\n }\n\n get composedAriaLabel(): string \| undefined {\n const baseText = this.label \|\| this.hostElement.textContent.trim() \|\| undefined;\n if (!this._tooltip && !baseText) return undefined;\n if (!this._tooltip) return this.variant === 'standalone' ? baseText : undefined;\n if (!baseText) return this._tooltip;\n return `${baseText} - ${this._tooltip}`;\n }\n\n handleClick(event: MouseEvent) {\n event.stopPropagation();\n if (this.disabled) return;\n const customEvent = this.tctClick.emit({\n target: this.target,\n referrerpolicy: this.referrerpolicy,\n href: this.href,\n });\n if (customEvent.defaultPrevented) {\n event.preventDefault();\n }\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const labelClasses = this.ellipsis ? 'label ellipsis' : 'label';\n return this.variant === 'standalone' ? (\n <div class={this.classes}>\n <a\n class=\"link\"\n href={!!this.disabled ? undefined : this.href}\n onClick={e => this.handleClick(e)}\n target={this.target \|\| '_self'}\n rel={this.target === '_blank' ? 'noopener' : undefined}\n referrerPolicy={this.referrerpolicy \|\| undefined}\n title={this.tctTitle \|\| undefined}\n aria-label={this.composedAriaLabel}\n test-id=\"linkAnchor\"\n >\n <span class={labelClasses}>{this.label}</span>\n {this.iconType && <q2-icon type={this.iconType}></q2-icon>}\n </a>\n </div>\n ) : (\n <a\n class={`${this.classes}${this.ellipsis ? ' ellipsis' : ''}`}\n onClick={e => this.handleClick(e)}\n href={!!this.disabled ? undefined : this.href}\n target={this.target \|\| '_self'}\n referrerPolicy={this.referrerpolicy \|\| undefined}\n title={this.tctTitle \|\| undefined}\n aria-label={this.composedAriaLabel}\n test-id=\"linkAnchor\"\n >\n {this.label}\n </a>\n );\n }\n\n // #endregion\n}\n"],"version":3}
1	+ {"file":"q2-link2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/q2-link/q2-link.scss?tag=q2-link&encapsulation=shadow","src/components/q2-link/q2-link.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n:host {\n display: inline-block;\n}\n\n:host {\n &:active {\n box-shadow: none;\n }\n}\n\n:host([ellipsis]:not([ellipsis=\"false\"])) {\n display: block;\n flex: 0 1 auto;\n max-width: var-list(--tct-link-ellipsis-max-width, 45%);\n min-width: 0;\n overflow: hidden;\n}\n\n:host([ellipsis]:not([ellipsis=\"false\"])[full-width]:not([full-width=\"false\"])) {\n flex: 1 1 0px;\n max-width: 100%;\n}\n\n:host([full-width]:not([full-width=\"false\"])) {\n display: inline-flex;\n justify-content: center;\n width: 100%;\n}\n\n.ellipsis {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n}\n\n.label {\n &.ellipsis {\n display: block;\n min-width: 0;\n flex: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n}\n\n.link-container {\n --comp-link-font-bold-stroke-width: 0.5px;\n background: transparent;\n border: none;\n border-radius: var(--tct-link-border-radius, 0);\n font-size: var-list(--tct-link-font-size, inherit);\n font-weight: var-list(--tct-link-font-weight, inherit);\n max-width: 100%;\n overflow: hidden;\n\n &.standalone {\n --comp-icon-stroke: var(--tct-link-icon-stroke-width, 1.5);\n display: block;\n width: 100%;\n max-width: 100%;\n min-width: 0;\n .link {\n color: var-list(--tct-link-color-standalone, --t-primary);\n min-height: var(--tct-link-min-height, 24px);\n display: flex;\n align-items: center;\n border-radius: var(--tct-link-border-radius, 0);\n --tct-icon-size: 16px;\n text-decoration: none;\n width: 100%;\n max-width: 100%;\n min-width: 0;\n overflow: hidden;\n q2-icon {\n margin-left: var(--tct-link-label-icon-gap, 6px);\n color: var(--tct-link-icon-color, inherit);\n flex-shrink: 0;\n }\n }\n &:hover {\n text-decoration: underline;\n -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n --tct-icon-stroke-width: calc(var(--comp-icon-stroke) + 0.5);\n }\n &:active:hover {\n text-decoration: underline;\n -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n --tct-icon-stroke-width: calc(var(--comp-icon-stroke) + 0.5);\n .link {\n color: var-list(--tct-link-color-standalone-active, --t-primary-d2);\n box-shadow: none;\n }\n }\n &.disabled {\n .link {\n cursor: not-allowed;\n color: var-list(--tct-link-color-standalone-disabled-color, --t-primary);\n opacity: var-list(\n --tct-link-color-standalone-disabled-opacity,\n --tct-link-disabled-opacity,\n --app-disabled-opacity,\n 0.4\n );\n text-decoration: none;\n }\n &:hover {\n text-decoration: none;\n }\n }\n &:has(:focus-visible) {\n box-shadow: var(--tct-link-focus-visible-box-shadow, --const-double-focus-ring);\n }\n }\n\n &.inline {\n margin: 0 var(--tct-link-side-margin, 6px);\n text-decoration: underline;\n color: var-list(--tct-link-color-inline, --t-primary);\n &.ellipsis {\n display: block;\n max-width: 100%;\n }\n &:hover {\n -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n }\n &:active:hover {\n -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n color: var-list(--tct-link-color-inline-active, --t-primary-d2);\n box-shadow: none;\n }\n &.disabled {\n cursor: not-allowed;\n opacity: var-list(--tct-link-disabled-opacity, --app-disabled-opacity, 0.4);\n }\n &:focus-visible {\n box-shadow: var(--tct-link-focus-visible-box-shadow, --const-double-focus-ring);\n }\n }\n}\n","import { Component, Prop, h, ComponentInterface, Element, Event, EventEmitter, Method } from '@stencil/core';\n/*\n @name Link\n * @category Display\n * @summary Use for navigation to other pages or sections. Prefer over q2-btn for non-action navigation.\n /\n@Component({ tag: 'q2-link', shadow: true, styleUrl: 'q2-link.scss' })\nexport class Q2Link implements ComponentInterface {\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /\n @private\n * Tooltip text set by a parent q2-tooltip component for accessibility.\n /\n @Prop()\n _tooltip: string;\n\n /* Determines whether the component and `tctClick` event are disabled. /\n @Prop({ reflect: true })\n disabled: boolean = false;\n\n /* If `true`, the label will be truncated with an ellipsis when it's too long. /\n @Prop({ reflect: true })\n ellipsis: boolean = false;\n\n /* If `true`, it takes up 100% width. /\n @Prop({ reflect: true })\n fullWidth: boolean;\n\n /* The link when clicked. /\n @Prop({ reflect: true })\n href: string = 'javascript:void(0)';\n\n /* The [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to display when `variant` is set to \"standalone\". /\n @Prop({ reflect: true })\n iconType: string;\n\n /* The displayed label to represent your link. /\n @Prop({ reflect: true })\n label: string;\n\n /* How much of the referrer to send when following the link. [See MDN for more information on referrerpolicy](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy). /\n @Prop({ reflect: true })\n referrerpolicy: ReferrerPolicy;\n\n /* Where to display the linked URL. [See MDN for more information on target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). /\n @Prop({ reflect: true })\n target: string; // _self \| _blank\n\n /* Applies a `title` attribute to the anchor tag in the shadowRoot of the component. /\n @Prop({ reflect: true })\n tctTitle: string;\n\n /* Determines the visual display style of the link. /\n @Prop({ reflect: true })\n variant: string = 'inline';\n\n // #endregion\n // #region Events\n\n /\n Emitted when the link is clicked.\n * @legacyEvent\n /\n @Event({ cancelable: true })\n tctClick: EventEmitter<{ target: string; referrerpolicy: string; href: string }>;\n\n // #endregion\n // #region Public Methods API\n\n /\n A method for click.\n \n @testOnly\n */\n @Method()\n async clickLink() {\n const anchor = this.hostElement.shadowRoot.querySelector(`[test-id=\"linkAnchor\"]`);\n (anchor as HTMLAnchorElement)?.click();\n }\n\n // #endregion\n // #region Local Methods\n\n get classes(): string {\n const list = ['link-container'];\n if (this.variant) list.push(this.variant);\n if (!!this.disabled) list.push('disabled');\n return list.join(' ');\n }\n\n get composedAriaLabel(): string \| undefined {\n const baseText = this.label \|\| this.hostElement.textContent.trim() \|\| undefined;\n if (!this._tooltip && !baseText) return undefined;\n if (!this._tooltip) return this.variant === 'standalone' ? baseText : undefined;\n if (!baseText) return this._tooltip;\n return `${baseText} - ${this._tooltip}`;\n }\n\n handleClick(event: MouseEvent) {\n event.stopPropagation();\n if (this.disabled) return;\n const customEvent = this.tctClick.emit({\n target: this.target,\n referrerpolicy: this.referrerpolicy,\n href: this.href,\n });\n if (customEvent.defaultPrevented) {\n event.preventDefault();\n }\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const labelClasses = this.ellipsis ? 'label ellipsis' : 'label';\n return this.variant === 'standalone' ? (\n <div class={this.classes}>\n <a\n class=\"link\"\n href={!!this.disabled ? undefined : this.href}\n onClick={e => this.handleClick(e)}\n target={this.target \|\| '_self'}\n rel={this.target === '_blank' ? 'noopener' : undefined}\n referrerPolicy={this.referrerpolicy \|\| undefined}\n title={this.tctTitle \|\| undefined}\n aria-label={this.composedAriaLabel}\n test-id=\"linkAnchor\"\n >\n <span class={labelClasses}>{this.label}</span>\n {this.iconType && <q2-icon type={this.iconType}></q2-icon>}\n </a>\n </div>\n ) : (\n <a\n class={`${this.classes}${this.ellipsis ? ' ellipsis' : ''}`}\n onClick={e => this.handleClick(e)}\n href={!!this.disabled ? undefined : this.href}\n target={this.target \|\| '_self'}\n referrerPolicy={this.referrerpolicy \|\| undefined}\n title={this.tctTitle \|\| undefined}\n aria-label={this.composedAriaLabel}\n test-id=\"linkAnchor\"\n >\n {this.label}\n </a>\n );\n }\n\n // #endregion\n}\n"],"version":3}

package/dist/components/q2-list2.js CHANGED Viewed

@@ -69,7 +69,7 @@ const Q2List = /*@__PURE__*/ proxyCustomElement(class Q2List extends HTMLElement
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '5602927af6da7b334c38f7d2cc207633d6089f7c', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (h("div", { key: '23ae73b5b842f17d45f9f82b06db79e8ea5c1796', class: this.headerClasses }, h("div", { key: '428117b7ffeadbfe4a53d39bf95d16cae1c26148', class: "label" }, this.label), this.hasFilterSlot && h("slot", { key: '3c5c29226478ba20fbe691b4265a2966b43f3fcb', name: "filter" }))), h("div", { key: '358b66a87ce56416c1dd42b8cc8a480996e2bdaf', role: "list" }, h("slot", { key: '8eabad8c7f15fac806588c651abf4ee400994d52' }))));
+        return (h("div", { key: '03d753b9d45921c1660ca81e92612dd742aeb694', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (h("div", { key: '43124c37dde7bf8079171325c1592f84a9b86d7b', class: this.headerClasses }, h("div", { key: '34005b2b72a15103698731b5bd0076c53410dc90', class: "label" }, this.label), this.hasFilterSlot && h("slot", { key: 'a6a1e1a921aec21da718cac10a1e4643578cc53f', name: "filter" }))), h("div", { key: '8031cab7c441c8dde9102af20ed34c106e83e2a2', role: "list" }, h("slot", { key: '4eacfb475f1f8f7d74210afb5c505282afb0ed13' }))));
     }
     get hostElement() { return this; }
     static get style() { return q2ListCss; }

package/dist/components/q2-list2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-list2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/q2-list/q2-list.scss?tag=q2-list&encapsulation=shadow","src/components/q2-list/q2-list.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n:host([bordered]:not([bordered='false'])) {\n ::slotted(q2-item:not(:last-child)),\n .header {\n border-style: var-list(--tct-list-item-border-style, solid);\n border-width: var-list(--tct-list-item-border-width, unquote('0 0 1px 0'));\n border-color: var-list(--tct-list-item-border-color, --t-gray-12, #d9d9d9);\n }\n}\n\n::slotted(q2-item) {\n --comp-item-padding: #{var-list(\n --tct-list-item-padding,\n unquote('#{var-list(--app-scale-2x, 10px) var-list(--app-scale-4x, 20px)}')\n )};\n --tct-item-padding: var(--comp-item-padding);\n}\n\n.header {\n --comp-default-header-padding: 0 var(--app-scale-4x, 20px);\n display: flex;\n gap: var(--app-scale-3x, 12px);\n padding: var-list(--tct-list-header-padding, --comp-default-header-padding);\n min-height: var-list(var-prefixer(list-header-min-height), 44px);\n &-spacebetween {\n justify-content: space-between;\n }\n &-start {\n justify-content: flex-start;\n }\n &-end {\n justify-content: flex-end;\n }\n .label {\n width: 100%;\n height: var(--tct-list-label-height, 44px);\n line-height: var(--tct-list-label-line-height, 44px);\n font-size: var-list(--tct-list-label-font-size, --app-font-size, 14px);\n font-weight: var(--tct-list-label-font-weight, 600);\n color: var-list(--tct-list-label-font-color, --t-text, #4d4d4d);\n }\n}\n\nslot:not([name]) {\n display: flex;\n flex-direction: column;\n gap: var(--tct-list-item-gap, 0)\n}\n","import { Component, Element, h, State, Prop } from '@stencil/core';\nimport { hasSlotContent } from 'src/utils';\n\n/*\n @name List\n * @category Display\n * @summary Use for grouping Item components into a vertical list.\n * @slot filter - An optional slot to display custom content for filtering the list items.\n /\n@Component({\n tag: 'q2-list',\n styleUrl: 'q2-list.scss',\n shadow: true,\n})\nexport class Q2List {\n // #region Own Properties\n\n listElement: HTMLDivElement;\n mutationObserver: MutationObserver;\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 renderTrigger: number = 0;\n\n // #endregion\n // #region Public Property API\n\n /* Adds a border between each items /\n @Prop({ mutable: true, reflect: true })\n bordered: boolean;\n\n /* label text on header area */\n @Prop({ reflect: true })\n label: string;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n this.mutationObserver = null;\n }\n\n componentDidLoad() {\n if (typeof MutationObserver === 'undefined') return;\n const observer = new MutationObserver(this.onMutationObserved);\n observer.observe(this.hostElement, { childList: true, subtree: true });\n this.mutationObserver = observer;\n this.onMutationObserved();\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n // #endregion\n // #region Local Methods\n\n get hasFilterSlot() {\n return !!this.hostElement.querySelector('q2-pill') \|\| hasSlotContent(this.hostElement, 'pill');\n }\n\n get hasLabelContent() {\n return !!this.label;\n }\n\n get headerClasses() {\n const classes = ['header'];\n if (this.hasLabelContent && this.hasFilterSlot) {\n classes.push('header-spacebetween');\n } else if (this.hasLabelContent && !this.hasFilterSlot) {\n classes.push('header-start');\n } else if (!this.hasLabelContent && this.hasFilterSlot) {\n classes.push('header-end');\n }\n return classes.join(' ');\n }\n\n get listClasses() {\n const classes = ['list'];\n return classes.join(' ');\n }\n\n onMutationObserved = () => {\n this.renderTrigger += 1;\n this.scheduledAfterRender.push(() => {\n Array.from(this.hostElement.children).forEach(child => {\n if (child.tagName === 'Q2-ITEM') child.role = 'listitem';\n });\n });\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <div\n class={this.listClasses}\n ref={el => (this.listElement = el)}\n >\n {(this.hasFilterSlot \|\| this.hasLabelContent) && (\n <div class={this.headerClasses}>\n <div class=\"label\">{this.label}</div>\n {this.hasFilterSlot && <slot name=\"filter\" />}\n </div>\n )}\n <div role=\"list\">\n <slot />\n </div>\n </div>\n );\n }\n\n // #endregion\n}\n"],"version":3}
1	+ {"file":"q2-list2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/q2-list/q2-list.scss?tag=q2-list&encapsulation=shadow","src/components/q2-list/q2-list.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n@import './variables';\n\n:host([bordered]:not([bordered='false'])) {\n ::slotted(q2-item:not(:last-child)),\n .header {\n border-style: var-list(--tct-list-item-border-style, solid);\n border-width: var-list(--tct-list-item-border-width, unquote('0 0 1px 0'));\n border-color: var-list(--tct-list-item-border-color, --t-gray-12, #d9d9d9);\n }\n}\n\n::slotted(q2-item) {\n --comp-item-padding: #{var-list(\n --tct-list-item-padding,\n unquote('#{var-list(--app-scale-2x, 10px) var-list(--app-scale-4x, 20px)}')\n )};\n --tct-item-padding: var(--comp-item-padding);\n}\n\n.header {\n --comp-default-header-padding: 0 var(--app-scale-4x, 20px);\n display: flex;\n gap: var(--app-scale-3x, 12px);\n padding: var-list(--tct-list-header-padding, --comp-default-header-padding);\n min-height: var-list(var-prefixer(list-header-min-height), 44px);\n &-spacebetween {\n justify-content: space-between;\n }\n &-start {\n justify-content: flex-start;\n }\n &-end {\n justify-content: flex-end;\n }\n .label {\n width: 100%;\n height: var(--tct-list-label-height, 44px);\n line-height: var(--tct-list-label-line-height, 44px);\n font-size: var-list(--tct-list-label-font-size, --app-font-size, 14px);\n font-weight: var(--tct-list-label-font-weight, 600);\n color: var-list(--tct-list-label-font-color, --t-text, #4d4d4d);\n }\n}\n\nslot:not([name]) {\n display: flex;\n flex-direction: column;\n gap: var(--tct-list-item-gap, 0)\n}\n","import { Component, Element, h, State, Prop } from '@stencil/core';\nimport { hasSlotContent } from 'src/utils';\n\n/*\n @name List\n * @category Display\n * @summary Use for grouping Item components into a vertical list.\n * @slot filter - An optional slot to display custom content for filtering the list items.\n /\n@Component({\n tag: 'q2-list',\n styleUrl: 'q2-list.scss',\n shadow: true,\n})\nexport class Q2List {\n // #region Own Properties\n\n listElement: HTMLDivElement;\n mutationObserver: MutationObserver;\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 renderTrigger: number = 0;\n\n // #endregion\n // #region Public Property API\n\n /* Adds a border between each items /\n @Prop({ mutable: true, reflect: true })\n bordered: boolean;\n\n /* label text on header area */\n @Prop({ reflect: true })\n label: string;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n this.mutationObserver = null;\n }\n\n componentDidLoad() {\n if (typeof MutationObserver === 'undefined') return;\n const observer = new MutationObserver(this.onMutationObserved);\n observer.observe(this.hostElement, { childList: true, subtree: true });\n this.mutationObserver = observer;\n this.onMutationObserved();\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n // #endregion\n // #region Local Methods\n\n get hasFilterSlot() {\n return !!this.hostElement.querySelector('q2-pill') \|\| hasSlotContent(this.hostElement, 'pill');\n }\n\n get hasLabelContent() {\n return !!this.label;\n }\n\n get headerClasses() {\n const classes = ['header'];\n if (this.hasLabelContent && this.hasFilterSlot) {\n classes.push('header-spacebetween');\n } else if (this.hasLabelContent && !this.hasFilterSlot) {\n classes.push('header-start');\n } else if (!this.hasLabelContent && this.hasFilterSlot) {\n classes.push('header-end');\n }\n return classes.join(' ');\n }\n\n get listClasses() {\n const classes = ['list'];\n return classes.join(' ');\n }\n\n onMutationObserved = () => {\n this.renderTrigger += 1;\n this.scheduledAfterRender.push(() => {\n Array.from(this.hostElement.children).forEach(child => {\n if (child.tagName === 'Q2-ITEM') child.role = 'listitem';\n });\n });\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <div\n class={this.listClasses}\n ref={el => (this.listElement = el)}\n >\n {(this.hasFilterSlot \|\| this.hasLabelContent) && (\n <div class={this.headerClasses}>\n <div class=\"label\">{this.label}</div>\n {this.hasFilterSlot && <slot name=\"filter\" />}\n </div>\n )}\n <div role=\"list\">\n <slot />\n </div>\n </div>\n );\n }\n\n // #endregion\n}\n"],"version":3}

package/dist/components/q2-loading2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-loading2.js","mappings":"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","names":["__stencil_proxyCustomElement","skeletonShapes"],"sources":["src/components/q2-loading/q2-loading.scss?tag=q2-loading&encapsulation=shadow","src/components/q2-loading/q2-loading.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/utility.scss';\n@import '../../styles/functions';\n\n:host {\n display: block;\n}\n\n:host([inline]),\n:host([modifiers='inline']) {\n display: inline-block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host(:not([inline]):not([modifiers='inline'])) {\n font-size: var-list(var-prefixer(loading-spinner-size), --app-scale-12x, 60px);\n}\n\n.q2-loading-animation {\n height: 1em;\n width: 1em;\n}\n\n#custom-loader-container {\n min-height: 1em;\n min-width: 1em;\n\n svg {\n display: block;\n }\n}\n\n@import './spinners/half-circle-spinner.scss';\n@import './skeleton/skeleton.scss';\n","import { Component, Prop, h, ComponentInterface, Listen, Element, Watch, State } from '@stencil/core';\nimport { handleAriaLabel, loc } from 'src/utils';\nimport skeletonShapes from './skeleton/shapes';\nimport { getOrCreateSpriteContainer } from '@/utils/sprites';\n\n/*\n @name Loading\n * @category Feedback\n * @summary Use to indicate async operations or content loading in progress.\n /\n@Component({ tag: 'q2-loading', shadow: true, styleUrl: 'q2-loading.scss' })\nexport class Q2Loading implements ComponentInterface {\n // #region Own Properties\n\n ariaLiveTimer;\n customLoaderClass = 'tct-loading-custom-loader';\n dontUpdateScreenReaderLabel = false;\n liveRegionChangeIndicatorToggle = false;\n observer: IntersectionObserver;\n screenReaderElement: HTMLElement;\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 hasCustomLoader: boolean = false;\n\n @State()\n loaderClone: SVGElement;\n\n // #endregion\n // #region Public Property API\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true })\n ariaLabel: string;\n\n /\n Numeric adjustments are available for specific `type` and `shape` combinations.\n * These may impact the number of items, columns, and/or rows that display.\n \n When `shape=\"text\"`, `shape=\"detailed-item\"`, or `shape=\"label-value\"`, the `counts` attribute determines the number of rows to display.\n \n When `shape=\"table\"`, the `counts` attribute can be used in two ways:\n \n 1. `counts=\"CxR\"` = Provides a skeleton table of `C` columns and `R` rows. The default value is `\"5x5\"\n * 2. `counts=\"N\"` - Provides a skeleton table of `N` columns and 5 rows.\n \n When `shape=\"form\"`, the `counts` attribute can be used in two ways:\n \n 1. `counts=\"CxR\" - Provides a skeleton form of `C` columns and `R` rows of fields. The default value is `\"1x1\"`.\n * 2. `counts=\"N\"` - Provides a skeleton form of `N` fields stacked in single columns.\n /\n @Prop({ reflect: true })\n counts: string;\n\n /* Hides the loading element from screen readers. /\n @Prop({ reflect: true })\n hideFromScreenReaders: boolean = false;\n\n /* Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text. /\n @Prop({ reflect: true })\n inline: boolean;\n\n /\n The label that is associated with the component. This is not displayed visually but is presented by screen readers.\n * @localizable\n /\n @Prop({ reflect: true, mutable: true })\n label: string;\n\n /\n Visual adjustments available to specific type and shape combinations, written as a hyphen (`-`) separated string.\n \n Supported values depend on the type and shape selected, and are listed in detail in the shape sections above.\n /\n @Prop({ reflect: true })\n modifiers: string;\n\n /\n The specific visual presentation of a loading element `type`.\n * @snippet\n * // when type=\"spinner\"\n * type ShapeValues = \"half-circle\";\n * // when type=\"skeleton\"\n * type ShapeValues = \"circle \| \"rectangle\" \| \"text\" \| \"table\" \| \"field\" \| \"form\" \| \"detailed-item\" \| \"label-value\";\n /\n @Prop({ reflect: true })\n shape: string;\n\n /* The type of loading element to display. */\n @Prop({ reflect: true })\n type: 'brand' \| 'spinner' \| 'skeleton';\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback(): void {\n this.cleanupLiveRegionDelay();\n }\n\n componentWillLoad() {\n handleAriaLabel(this);\n this.handleType();\n }\n\n componentDidLoad(): void {\n this.setupLiveRegionDelay();\n }\n\n componentDidUpdate(): void {\n this.updateScreenReaderLabel();\n }\n\n componentDidRender(): void {\n if (!this.loaderClone) return;\n if (!this.hasCustomLoader) return;\n const customLoaderContainer = this.hostElement.shadowRoot.querySelector('#custom-loader-container');\n customLoaderContainer.querySelector(`svg.${this.customLoaderClass}`)?.remove();\n customLoaderContainer.appendChild(this.loaderClone);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('tctUpdateLoaders', { target: 'document' })\n onUpdateLoaders() {\n const { customLoaderURL } = this;\n this.hasCustomLoader = !!customLoaderURL;\n this.fetchLoader();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('type')\n handleType() {\n this.fetchLoader();\n }\n\n // #endregion\n // #region Local Methods\n\n get countsArray(): number[] {\n if (this.type !== 'skeleton' \|\| !this.counts) {\n return undefined;\n }\n\n return this.counts.split('x').map(Number);\n }\n\n get customLoaderElement() {\n const { customLoaderURL, customLoaderClass } = this;\n if (!customLoaderURL) return;\n return document.querySelector<HTMLElement>(`.${customLoaderClass}[data-url=\"${customLoaderURL}\"]`);\n }\n\n get customLoaderURL() {\n const hostComputedStyles = window.getComputedStyle(this.hostElement);\n const loadingVariableURL = hostComputedStyles.getPropertyValue(\n `--tct-loading-custom-${this.type \|\| 'spinner'}-url`\n );\n if (!loadingVariableURL) return;\n\n const cssKeywords = new Set(['none', 'unset', 'initial', 'inherit', 'revert']);\n if (cssKeywords.has(loadingVariableURL.trim().toLowerCase())) return;\n\n const url = loadingVariableURL.trim().replace(/^url\$['\"]?\|['\"]?\$$/g, '');\n if (!/^https?:\\/\\//i.test(url)) {\n console.warn(\n `[q2-loading] Invalid customLoaderURL: \"${url}\".` +\n ` Only absolute URLs (http:// or https://) are supported.`\n );\n return;\n }\n return url;\n }\n\n get isSkeletonType() {\n return this.type === 'skeleton';\n }\n\n get loaderEventName() {\n const { type = 'spinner', isSkeletonType } = this;\n if (isSkeletonType) return;\n return `tct-loaded-${type}`;\n }\n\n get localizedLabel() {\n return loc(this.label \|\| this.ariaLabel \|\| 'tecton.element.loading.ariaLabel');\n }\n\n get modifiersSet(): Set<string> {\n if (this.type !== 'skeleton' \|\| !this.modifiers) {\n return undefined;\n }\n\n return new Set(this.modifiers.split('-'));\n }\n\n get skeletonShape() {\n return skeletonShapes[this.shape]?.(this.countsArray, this.modifiersSet) ?? '';\n }\n\n checkForLoader() {\n const { loaderEventName, customLoaderClass } = this;\n const spriteContainer = getOrCreateSpriteContainer();\n let { customLoaderElement } = this;\n\n // If the loading element exists and has the `data-loaded` attribute, we know we have everything we need\n if (customLoaderElement?.hasAttribute('data-loaded')) {\n this.cloneLoaderNode();\n return true;\n }\n\n // If the loading element exists but does not have the `data-loaded` attribute, we know it's being loaded\n // We'll listen for the event that will be dispatched when the element is loaded\n spriteContainer.addEventListener(\n loaderEventName,\n () => {\n this.cloneLoaderNode();\n },\n { once: true }\n );\n\n // If the loading element exists, we know it's being loaded and will be handled by the event listener\n if (customLoaderElement) return true;\n\n // If loading element does not exist, create a placeholder\n // This will let other icons know the element is being loaded and prevent multiple fetches\n customLoaderElement = document.createElement('div');\n customLoaderElement.classList.add(customLoaderClass);\n customLoaderElement.dataset.url = this.customLoaderURL;\n spriteContainer.appendChild(customLoaderElement);\n return false;\n }\n\n cleanupLiveRegionDelay() {\n if (this.hideFromScreenReaders) return;\n\n clearTimeout(this.ariaLiveTimer);\n this.observer?.disconnect();\n this.observer = null;\n }\n\n cloneLoaderNode() {\n const { customLoaderElement } = this;\n this.loaderClone = customLoaderElement ? (customLoaderElement.cloneNode(true) as SVGElement) : undefined;\n }\n\n async fetchLoader() {\n const { isSkeletonType, customLoaderURL } = this;\n this.hasCustomLoader = false;\n if (isSkeletonType) {\n return;\n }\n\n if (!customLoaderURL) return;\n this.hasCustomLoader = true;\n\n let { customLoaderElement } = this;\n const loaderExists = this.checkForLoader();\n\n if (loaderExists) return;\n\n try {\n const response = await fetch(customLoaderURL);\n\n // Check for HTTP errors (including CORS issues that return error status)\n if (!response.ok) {\n throw new Error(\n `HTTP ${response.status}: Failed to fetch SVG. ` +\n `This may be due to incorrect URL, server error, or CORS restrictions.`\n );\n }\n\n const svgText = await response.text();\n const parser = new DOMParser();\n const svgDoc = parser.parseFromString(svgText, 'image/svg+xml');\n const svg = svgDoc.querySelector('svg');\n\n if (!svg) throw new Error('No SVG found in the loaded content');\n\n svg.dataset.loaded = '';\n svg.dataset.url = customLoaderURL;\n svg.classList.add(this.customLoaderClass);\n\n customLoaderElement = this.customLoaderElement;\n if (!customLoaderElement) return;\n if (typeof customLoaderElement.replaceWith === 'function') {\n customLoaderElement.replaceWith(svg);\n } else {\n customLoaderElement.parentNode.replaceChild(svg, customLoaderElement);\n }\n\n svg.dispatchEvent(new CustomEvent(this.loaderEventName, { bubbles: true }));\n } catch (error) {\n // Provide more specific error messaging for common issues\n if (error instanceof TypeError && error.message === 'Failed to fetch') {\n console.error(\n `Failed to load custom loader from ${customLoaderURL}. ` +\n `This is likely due to a CORS (Cross-Origin Resource Sharing) error. ` +\n `Ensure the server hosting the SVG includes proper CORS headers ` +\n `(Access-Control-Allow-Origin) or host the SVG on the same domain.`,\n error\n );\n } else {\n console.error(`Failed to load custom loader SVG from ${customLoaderURL}:`, error);\n }\n }\n }\n\n setupLiveRegionDelay() {\n if (this.hideFromScreenReaders) return;\n\n // The screen reader element starts out empty and is then populated by the\n // label text after a delay to ensure that it is announced by screen\n // readers.\n const options = {\n root: null,\n rootMargin: '0px',\n threshold: [1],\n };\n this.observer = new IntersectionObserver(entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n clearTimeout(this.ariaLiveTimer);\n this.ariaLiveTimer = setTimeout(() => {\n if (this.screenReaderElement) {\n this.screenReaderElement.textContent = `${this.localizedLabel}${this.liveRegionChangeIndicatorToggle ? '.' : ''}`;\n }\n this.liveRegionChangeIndicatorToggle = !this.liveRegionChangeIndicatorToggle;\n this.dontUpdateScreenReaderLabel = false;\n }, 2000);\n } else {\n clearTimeout(this.ariaLiveTimer);\n if (this.screenReaderElement) {\n this.screenReaderElement.textContent = '';\n }\n this.dontUpdateScreenReaderLabel = true;\n }\n });\n }, options);\n this.observer.observe(this.hostElement);\n }\n\n updateScreenReaderLabel() {\n if (this.dontUpdateScreenReaderLabel) return;\n if (!this.screenReaderElement) return;\n this.screenReaderElement.textContent = this.localizedLabel;\n }\n\n // #endregion\n // #region Render Methods\n\n renderCustomLoaderContainer = () => {\n return (\n <div\n id=\"custom-loader-container\"\n aria-hidden={this.hideFromScreenReaders ? 'true' : undefined}\n aria-live={!this.hideFromScreenReaders ? 'polite' : undefined}\n role={!this.hideFromScreenReaders ? 'status' : undefined}\n >\n {!this.hideFromScreenReaders && (\n <div\n class=\"sr\"\n ref={el => (this.screenReaderElement = el)}\n ></div>\n )}\n </div>\n );\n };\n\n renderHalfCircleSpinner = () => {\n return (\n <div\n class=\"q2-loading-animation half-circle-spinner\"\n aria-hidden={this.hideFromScreenReaders ? 'true' : undefined}\n aria-live={!this.hideFromScreenReaders ? 'polite' : undefined}\n role={!this.hideFromScreenReaders ? 'status' : undefined}\n >\n <svg\n class=\"loader\"\n viewBox=\"0 0 50 50\"\n role=\"presentation\"\n >\n <circle\n class=\"head\"\n cx=\"25\"\n cy=\"25\"\n r=\"20\"\n />\n </svg>\n {!this.hideFromScreenReaders && (\n <div\n class=\"sr\"\n ref={el => (this.screenReaderElement = el)}\n ></div>\n )}\n </div>\n );\n };\n\n get renderLoader() {\n const loaderMap = {\n default: this.renderSpinner,\n spinner: this.renderSpinner,\n skeleton: this.renderSkeletonLoader,\n custom: this.renderCustomLoaderContainer,\n };\n const { type, hasCustomLoader } = this;\n const loaderMapKey = hasCustomLoader ? 'custom' : type;\n\n return loaderMap[loaderMapKey] \|\| loaderMap.default;\n }\n\n renderSkeletonLoader = () => {\n return (\n <div\n class=\"q2-loading-skeleton\"\n aria-hidden={this.hideFromScreenReaders ? 'true' : undefined}\n aria-live={!this.hideFromScreenReaders ? 'polite' : undefined}\n role={!this.hideFromScreenReaders ? 'status' : undefined}\n >\n {this.shape === 'custom' ? <slot /> : this.skeletonShape}\n <div class=\"q2-loading-skeleton-shimmer\"></div>\n {!this.hideFromScreenReaders && (\n <div\n class=\"sr\"\n ref={el => (this.screenReaderElement = el)}\n ></div>\n )}\n </div>\n );\n };\n\n renderSpinner = () => {\n return this.renderHalfCircleSpinner();\n };\n\n render() {\n return this.renderLoader();\n }\n\n // #endregion\n}\n"],"version":3}
1	+ {"file":"q2-loading2.js","mappings":"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","names":["__stencil_proxyCustomElement","skeletonShapes"],"sources":["src/components/q2-loading/q2-loading.scss?tag=q2-loading&encapsulation=shadow","src/components/q2-loading/q2-loading.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/utility.scss';\n@import '../../styles/functions';\n@import './variables';\n\n:host {\n display: block;\n}\n\n:host([inline]),\n:host([modifiers='inline']) {\n display: inline-block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host(:not([inline]):not([modifiers='inline'])) {\n font-size: var-list(var-prefixer(loading-spinner-size), --app-scale-12x, 60px);\n}\n\n.q2-loading-animation {\n height: 1em;\n width: 1em;\n}\n\n#custom-loader-container {\n min-height: 1em;\n min-width: 1em;\n\n svg {\n display: block;\n }\n}\n\n@import './spinners/half-circle-spinner.scss';\n@import './skeleton/skeleton.scss';\n","import { Component, Prop, h, ComponentInterface, Listen, Element, Watch, State } from '@stencil/core';\nimport { handleAriaLabel, loc } from 'src/utils';\nimport skeletonShapes from './skeleton/shapes';\nimport { getOrCreateSpriteContainer } from '@/utils/sprites';\n\n/*\n @name Loading\n * @category Feedback\n * @summary Use to indicate async operations or content loading in progress.\n /\n@Component({ tag: 'q2-loading', shadow: true, styleUrl: 'q2-loading.scss' })\nexport class Q2Loading implements ComponentInterface {\n // #region Own Properties\n\n ariaLiveTimer;\n customLoaderClass = 'tct-loading-custom-loader';\n dontUpdateScreenReaderLabel = false;\n liveRegionChangeIndicatorToggle = false;\n observer: IntersectionObserver;\n screenReaderElement: HTMLElement;\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 hasCustomLoader: boolean = false;\n\n @State()\n loaderClone: SVGElement;\n\n // #endregion\n // #region Public Property API\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true })\n ariaLabel: string;\n\n /\n Numeric adjustments are available for specific `type` and `shape` combinations.\n * These may impact the number of items, columns, and/or rows that display.\n \n When `shape=\"text\"`, `shape=\"detailed-item\"`, or `shape=\"label-value\"`, the `counts` attribute determines the number of rows to display.\n \n When `shape=\"table\"`, the `counts` attribute can be used in two ways:\n \n 1. `counts=\"CxR\"` = Provides a skeleton table of `C` columns and `R` rows. The default value is `\"5x5\"\n * 2. `counts=\"N\"` - Provides a skeleton table of `N` columns and 5 rows.\n \n When `shape=\"form\"`, the `counts` attribute can be used in two ways:\n \n 1. `counts=\"CxR\" - Provides a skeleton form of `C` columns and `R` rows of fields. The default value is `\"1x1\"`.\n * 2. `counts=\"N\"` - Provides a skeleton form of `N` fields stacked in single columns.\n /\n @Prop({ reflect: true })\n counts: string;\n\n /* Hides the loading element from screen readers. /\n @Prop({ reflect: true })\n hideFromScreenReaders: boolean = false;\n\n /* Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text. /\n @Prop({ reflect: true })\n inline: boolean;\n\n /\n The label that is associated with the component. This is not displayed visually but is presented by screen readers.\n * @localizable\n /\n @Prop({ reflect: true, mutable: true })\n label: string;\n\n /\n Visual adjustments available to specific type and shape combinations, written as a hyphen (`-`) separated string.\n \n Supported values depend on the type and shape selected, and are listed in detail in the shape sections above.\n /\n @Prop({ reflect: true })\n modifiers: string;\n\n /\n The specific visual presentation of a loading element `type`.\n * @snippet\n * // when type=\"spinner\"\n * type ShapeValues = \"half-circle\";\n * // when type=\"skeleton\"\n * type ShapeValues = \"circle \| \"rectangle\" \| \"text\" \| \"table\" \| \"field\" \| \"form\" \| \"detailed-item\" \| \"label-value\";\n /\n @Prop({ reflect: true })\n shape: string;\n\n /* The type of loading element to display. */\n @Prop({ reflect: true })\n type: 'brand' \| 'spinner' \| 'skeleton';\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback(): void {\n this.cleanupLiveRegionDelay();\n }\n\n componentWillLoad() {\n handleAriaLabel(this);\n this.handleType();\n }\n\n componentDidLoad(): void {\n this.setupLiveRegionDelay();\n }\n\n componentDidUpdate(): void {\n this.updateScreenReaderLabel();\n }\n\n componentDidRender(): void {\n if (!this.loaderClone) return;\n if (!this.hasCustomLoader) return;\n const customLoaderContainer = this.hostElement.shadowRoot.querySelector('#custom-loader-container');\n customLoaderContainer.querySelector(`svg.${this.customLoaderClass}`)?.remove();\n customLoaderContainer.appendChild(this.loaderClone);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('tctUpdateLoaders', { target: 'document' })\n onUpdateLoaders() {\n const { customLoaderURL } = this;\n this.hasCustomLoader = !!customLoaderURL;\n this.fetchLoader();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('type')\n handleType() {\n this.fetchLoader();\n }\n\n // #endregion\n // #region Local Methods\n\n get countsArray(): number[] {\n if (this.type !== 'skeleton' \|\| !this.counts) {\n return undefined;\n }\n\n return this.counts.split('x').map(Number);\n }\n\n get customLoaderElement() {\n const { customLoaderURL, customLoaderClass } = this;\n if (!customLoaderURL) return;\n return document.querySelector<HTMLElement>(`.${customLoaderClass}[data-url=\"${customLoaderURL}\"]`);\n }\n\n get customLoaderURL() {\n const hostComputedStyles = window.getComputedStyle(this.hostElement);\n const loadingVariableURL = hostComputedStyles.getPropertyValue(\n `--tct-loading-custom-${this.type \|\| 'spinner'}-url`\n );\n if (!loadingVariableURL) return;\n\n const cssKeywords = new Set(['none', 'unset', 'initial', 'inherit', 'revert']);\n if (cssKeywords.has(loadingVariableURL.trim().toLowerCase())) return;\n\n const url = loadingVariableURL.trim().replace(/^url\$['\"]?\|['\"]?\$$/g, '');\n if (!/^https?:\\/\\//i.test(url)) {\n console.warn(\n `[q2-loading] Invalid customLoaderURL: \"${url}\".` +\n ` Only absolute URLs (http:// or https://) are supported.`\n );\n return;\n }\n return url;\n }\n\n get isSkeletonType() {\n return this.type === 'skeleton';\n }\n\n get loaderEventName() {\n const { type = 'spinner', isSkeletonType } = this;\n if (isSkeletonType) return;\n return `tct-loaded-${type}`;\n }\n\n get localizedLabel() {\n return loc(this.label \|\| this.ariaLabel \|\| 'tecton.element.loading.ariaLabel');\n }\n\n get modifiersSet(): Set<string> {\n if (this.type !== 'skeleton' \|\| !this.modifiers) {\n return undefined;\n }\n\n return new Set(this.modifiers.split('-'));\n }\n\n get skeletonShape() {\n return skeletonShapes[this.shape]?.(this.countsArray, this.modifiersSet) ?? '';\n }\n\n checkForLoader() {\n const { loaderEventName, customLoaderClass } = this;\n const spriteContainer = getOrCreateSpriteContainer();\n let { customLoaderElement } = this;\n\n // If the loading element exists and has the `data-loaded` attribute, we know we have everything we need\n if (customLoaderElement?.hasAttribute('data-loaded')) {\n this.cloneLoaderNode();\n return true;\n }\n\n // If the loading element exists but does not have the `data-loaded` attribute, we know it's being loaded\n // We'll listen for the event that will be dispatched when the element is loaded\n spriteContainer.addEventListener(\n loaderEventName,\n () => {\n this.cloneLoaderNode();\n },\n { once: true }\n );\n\n // If the loading element exists, we know it's being loaded and will be handled by the event listener\n if (customLoaderElement) return true;\n\n // If loading element does not exist, create a placeholder\n // This will let other icons know the element is being loaded and prevent multiple fetches\n customLoaderElement = document.createElement('div');\n customLoaderElement.classList.add(customLoaderClass);\n customLoaderElement.dataset.url = this.customLoaderURL;\n spriteContainer.appendChild(customLoaderElement);\n return false;\n }\n\n cleanupLiveRegionDelay() {\n if (this.hideFromScreenReaders) return;\n\n clearTimeout(this.ariaLiveTimer);\n this.observer?.disconnect();\n this.observer = null;\n }\n\n cloneLoaderNode() {\n const { customLoaderElement } = this;\n this.loaderClone = customLoaderElement ? (customLoaderElement.cloneNode(true) as SVGElement) : undefined;\n }\n\n async fetchLoader() {\n const { isSkeletonType, customLoaderURL } = this;\n this.hasCustomLoader = false;\n if (isSkeletonType) {\n return;\n }\n\n if (!customLoaderURL) return;\n this.hasCustomLoader = true;\n\n let { customLoaderElement } = this;\n const loaderExists = this.checkForLoader();\n\n if (loaderExists) return;\n\n try {\n const response = await fetch(customLoaderURL);\n\n // Check for HTTP errors (including CORS issues that return error status)\n if (!response.ok) {\n throw new Error(\n `HTTP ${response.status}: Failed to fetch SVG. ` +\n `This may be due to incorrect URL, server error, or CORS restrictions.`\n );\n }\n\n const svgText = await response.text();\n const parser = new DOMParser();\n const svgDoc = parser.parseFromString(svgText, 'image/svg+xml');\n const svg = svgDoc.querySelector('svg');\n\n if (!svg) throw new Error('No SVG found in the loaded content');\n\n svg.dataset.loaded = '';\n svg.dataset.url = customLoaderURL;\n svg.classList.add(this.customLoaderClass);\n\n customLoaderElement = this.customLoaderElement;\n if (!customLoaderElement) return;\n if (typeof customLoaderElement.replaceWith === 'function') {\n customLoaderElement.replaceWith(svg);\n } else {\n customLoaderElement.parentNode.replaceChild(svg, customLoaderElement);\n }\n\n svg.dispatchEvent(new CustomEvent(this.loaderEventName, { bubbles: true }));\n } catch (error) {\n // Provide more specific error messaging for common issues\n if (error instanceof TypeError && error.message === 'Failed to fetch') {\n console.error(\n `Failed to load custom loader from ${customLoaderURL}. ` +\n `This is likely due to a CORS (Cross-Origin Resource Sharing) error. ` +\n `Ensure the server hosting the SVG includes proper CORS headers ` +\n `(Access-Control-Allow-Origin) or host the SVG on the same domain.`,\n error\n );\n } else {\n console.error(`Failed to load custom loader SVG from ${customLoaderURL}:`, error);\n }\n }\n }\n\n setupLiveRegionDelay() {\n if (this.hideFromScreenReaders) return;\n\n // The screen reader element starts out empty and is then populated by the\n // label text after a delay to ensure that it is announced by screen\n // readers.\n const options = {\n root: null,\n rootMargin: '0px',\n threshold: [1],\n };\n this.observer = new IntersectionObserver(entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n clearTimeout(this.ariaLiveTimer);\n this.ariaLiveTimer = setTimeout(() => {\n if (this.screenReaderElement) {\n this.screenReaderElement.textContent = `${this.localizedLabel}${this.liveRegionChangeIndicatorToggle ? '.' : ''}`;\n }\n this.liveRegionChangeIndicatorToggle = !this.liveRegionChangeIndicatorToggle;\n this.dontUpdateScreenReaderLabel = false;\n }, 2000);\n } else {\n clearTimeout(this.ariaLiveTimer);\n if (this.screenReaderElement) {\n this.screenReaderElement.textContent = '';\n }\n this.dontUpdateScreenReaderLabel = true;\n }\n });\n }, options);\n this.observer.observe(this.hostElement);\n }\n\n updateScreenReaderLabel() {\n if (this.dontUpdateScreenReaderLabel) return;\n if (!this.screenReaderElement) return;\n this.screenReaderElement.textContent = this.localizedLabel;\n }\n\n // #endregion\n // #region Render Methods\n\n renderCustomLoaderContainer = () => {\n return (\n <div\n id=\"custom-loader-container\"\n aria-hidden={this.hideFromScreenReaders ? 'true' : undefined}\n aria-live={!this.hideFromScreenReaders ? 'polite' : undefined}\n role={!this.hideFromScreenReaders ? 'status' : undefined}\n >\n {!this.hideFromScreenReaders && (\n <div\n class=\"sr\"\n ref={el => (this.screenReaderElement = el)}\n ></div>\n )}\n </div>\n );\n };\n\n renderHalfCircleSpinner = () => {\n return (\n <div\n class=\"q2-loading-animation half-circle-spinner\"\n aria-hidden={this.hideFromScreenReaders ? 'true' : undefined}\n aria-live={!this.hideFromScreenReaders ? 'polite' : undefined}\n role={!this.hideFromScreenReaders ? 'status' : undefined}\n >\n <svg\n class=\"loader\"\n viewBox=\"0 0 50 50\"\n role=\"presentation\"\n >\n <circle\n class=\"head\"\n cx=\"25\"\n cy=\"25\"\n r=\"20\"\n />\n </svg>\n {!this.hideFromScreenReaders && (\n <div\n class=\"sr\"\n ref={el => (this.screenReaderElement = el)}\n ></div>\n )}\n </div>\n );\n };\n\n get renderLoader() {\n const loaderMap = {\n default: this.renderSpinner,\n spinner: this.renderSpinner,\n skeleton: this.renderSkeletonLoader,\n custom: this.renderCustomLoaderContainer,\n };\n const { type, hasCustomLoader } = this;\n const loaderMapKey = hasCustomLoader ? 'custom' : type;\n\n return loaderMap[loaderMapKey] \|\| loaderMap.default;\n }\n\n renderSkeletonLoader = () => {\n return (\n <div\n class=\"q2-loading-skeleton\"\n aria-hidden={this.hideFromScreenReaders ? 'true' : undefined}\n aria-live={!this.hideFromScreenReaders ? 'polite' : undefined}\n role={!this.hideFromScreenReaders ? 'status' : undefined}\n >\n {this.shape === 'custom' ? <slot /> : this.skeletonShape}\n <div class=\"q2-loading-skeleton-shimmer\"></div>\n {!this.hideFromScreenReaders && (\n <div\n class=\"sr\"\n ref={el => (this.screenReaderElement = el)}\n ></div>\n )}\n </div>\n );\n };\n\n renderSpinner = () => {\n return this.renderHalfCircleSpinner();\n };\n\n render() {\n return this.renderLoader();\n }\n\n // #endregion\n}\n"],"version":3}

package/dist/components/q2-message2.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 import { o as overrideFocus, i as isEventFromElement, n as nextPaint, p as isFirefox, l as loc } from './index2.js';
 import { d as defineCustomElement$1 } from './q2-icon2.js';
-const q2MessageCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{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:block}:host([hidden]){display:none}.message{--comp-line-height:var(--tct-message-line-height, var(--t-message-line-height, var(--app-line-height, 1.428571429em)));border-width:var(--tct-message-border-width, 0);border-style:var(--tct-message-border-style, solid);border-color:var(--tct-message-border-color, transparent);position:relative;display:grid;gap:var(--tct-message-gap, 8px);align-items:flex-start;background:var(--tct-message-background, var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));color:var(--tct-message-font-color, var(--t-message-font-color, inherit));box-shadow:var(--tct-message-box-shadow, var(--t-message-box-shadow, var(--app-shadow-1, inherit)));border-radius:var(--tct-message-border-radius, var(--t-message-border-radius, var(--app-border-radius-1, inherit)))}.message:focus{box-shadow:var(--const-global-focus)}.bar{position:absolute;left:0;top:0;bottom:0;height:100%;background:var(--comp-bar-color);width:var(--tct-message-bar-width, var(--t-message-bar-width, 4px));border-radius:var(--tct-message-bar-border-radius, var(--app-border-radius-1) 0 0 var(--app-border-radius-1))}.message-icon{--comp-top-offset:calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);--tct-icon-size:var(--comp-icon-size);top:var(--comp-top-offset);margin-bottom:calc(var(--comp-top-offset) * -1)}.message-content{flex:1;line-height:var(--comp-line-height);font-size:var(--tct-message-font-size, inherit)}::slotted(ul){--comp-list-default-padding:0 0 0 var(--app-scale-3x, 15px);padding:var(--tct-message-list-padding, var(--comp-list-default-padding))}:host(:not([appearance])),:host([appearance=standard]){--comp-default-margin:var(--app-scale-3x, 5px) 0;margin:var(--tct-message-margin, var(--comp-default-margin))}:host(:not([appearance])) .message,:host([appearance=standard]) .message{--comp-icon-size:var(--tct-message-icon-size, var(--t-message-icon-size, 24px));--comp-padding:var(--tct-message-padding, var(--t-message-padding, var(--app-scale-3x, 15px)));grid-template-columns:var(--comp-icon-size) 1fr;padding:var(--comp-padding);padding-bottom:calc(var(--comp-padding) - var(--tct-scale-1, var(--app-scale-1x, 5px)))}:host(:not([appearance])) ::slotted(ul),:host([appearance=standard]) ::slotted(ul){--comp-list-default-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-message-list-margin, var(--comp-list-default-margin))}:host([appearance=minimal]){margin:0}:host([appearance=minimal]) .message{padding:var(--tct-message-minimal-padding, var(--t-message-minimal-padding, var(--app-scale-2x, 10px)));grid-template-columns:1fr}:host([appearance=minimal]) ::slotted(ul){margin:var(--tct-scale-1, var(--app-scale-1x, 5px)) 0}:host(:not([type])),:host([type=info]){--comp-info-color:#0079c1;--comp-bar-color:var(--tct-message-info-bar-color, var(--const-stoplight-info, var(--comp-info-color)))}:host(:not([type])) .message-icon,:host([type=info]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-info, var(--const-stoplight-info, var(--comp-info-color)));--tct-icon-stroke-secondary:var(--tct-stoplight-info, var(--const-stoplight-info, var(--comp-info-color)))}:host([type=success]){--comp-success-color:#0e8a00;--comp-bar-color:var(--tct-message-success-bar-color, var(--const-stoplight-success, var(--comp-success-color)))}:host([type=success]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-success, var(--const-stoplight-success, var(--comp-success-color)));--tct-icon-stroke-secondary:var(--tct-stoplight-success, var(--const-stoplight-success, var(--comp-success-color)))}:host([type=warning]){--comp-warning-color:#c35500;--comp-bar-color:var(--tct-message-warning-bar-color, var(--const-stoplight-warning, var(--comp-warning-color)))}:host([type=warning]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-warning, var(--const-stoplight-warning, var(--comp-warning-color)));--tct-icon-stroke-secondary:var(--tct-stoplight-warning, var(--const-stoplight-warning, var(--comp-warning-color)))}:host([type=error]),:host([type=danger]){--comp-error-color:#d20a0a;--comp-bar-color:var(--tct-message-error-bar-color, var(--const-stoplight-alert, var(--comp-error-color)))}:host([type=error]) .message-icon,:host([type=danger]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, var(--comp-error-color)));--tct-icon-stroke-secondary:var(--tct-stoplight-error, var(--const-stoplight-alert, var(--comp-error-color)))}";
+const q2MessageCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{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:block}:host([hidden]){display:none}.message{--comp-line-height:var(--tct-message-line-height, var(--t-message-line-height, var(--app-line-height, 1.428571429em)));border-width:var(--tct-message-border-width, 0);border-style:var(--tct-message-border-style, solid);border-color:var(--tct-message-border-color, transparent);position:relative;display:grid;gap:var(--tct-message-gap, 8px);align-items:flex-start;background:var(--comp-message-background, var(--tct-message-background, var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))))));color:var(--tct-message-font-color, var(--t-message-font-color, inherit));box-shadow:var(--tct-message-box-shadow, var(--t-message-box-shadow, var(--app-shadow-1, inherit)));border-radius:var(--tct-message-border-radius, var(--t-message-border-radius, var(--app-border-radius-1, inherit)))}.message:focus{box-shadow:var(--const-global-focus)}.bar{position:absolute;left:0;top:0;bottom:0;height:100%;background:var(--comp-bar-color);width:var(--tct-message-bar-width, var(--t-message-bar-width, 4px));border-radius:var(--tct-message-bar-border-radius, var(--app-border-radius-1) 0 0 var(--app-border-radius-1))}.message-icon{--comp-top-offset:calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);--tct-icon-size:var(--comp-icon-size);top:var(--comp-top-offset);margin-bottom:calc(var(--comp-top-offset) * -1)}.message-content{flex:1;line-height:var(--comp-line-height);font-size:var(--tct-message-font-size, inherit)}::slotted(ul){--comp-list-default-padding:0 0 0 var(--app-scale-3x, 15px);padding:var(--tct-message-list-padding, var(--comp-list-default-padding))}:host(:not([appearance])),:host([appearance=standard]){--comp-default-margin:var(--app-scale-3x, 5px) 0;margin:var(--tct-message-margin, var(--comp-default-margin))}:host(:not([appearance])) .message,:host([appearance=standard]) .message{--comp-icon-size:var(--tct-message-icon-size, var(--t-message-icon-size, 24px));--comp-padding:var(--tct-message-padding, var(--t-message-padding, var(--app-scale-3x, 15px)));grid-template-columns:var(--comp-icon-size) 1fr;padding:var(--comp-padding);padding-bottom:calc(var(--comp-padding) - var(--tct-scale-1, var(--app-scale-1x, 5px)))}:host(:not([appearance])) ::slotted(ul),:host([appearance=standard]) ::slotted(ul){--comp-list-default-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-message-list-margin, var(--comp-list-default-margin))}:host([appearance=minimal]){margin:0}:host([appearance=minimal]) .message{padding:var(--tct-message-minimal-padding, var(--t-message-minimal-padding, var(--app-scale-2x, 10px)));grid-template-columns:1fr}:host([appearance=minimal]) ::slotted(ul){margin:var(--tct-scale-1, var(--app-scale-1x, 5px)) 0}:host(:not([type])),:host([type=info]){--comp-info-color:#0079c1;--comp-bar-color:var(--tct-message-info-bar-color, var(--const-stoplight-info, var(--comp-info-color)));--comp-message-background:var(--tct-message-info-background, #e5f5ff)}:host(:not([type])) .message-icon,:host([type=info]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-info, var(--const-stoplight-info, var(--comp-info-color)));--tct-icon-stroke-secondary:var(--tct-stoplight-info, var(--const-stoplight-info, var(--comp-info-color)))}:host([type=success]){--comp-success-color:#0e8a00;--comp-bar-color:var(--tct-message-success-bar-color, var(--const-stoplight-success, var(--comp-success-color)));--comp-message-background:var(--tct-message-success-background, #e8ffe5)}:host([type=success]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-success, var(--const-stoplight-success, var(--comp-success-color)));--tct-icon-stroke-secondary:var(--tct-stoplight-success, var(--const-stoplight-success, var(--comp-success-color)))}:host([type=warning]){--comp-warning-color:#c35500;--comp-bar-color:var(--tct-message-warning-bar-color, var(--const-stoplight-warning, var(--comp-warning-color)));--comp-message-background:var(--tct-message-warning-background, #ffe2cc)}:host([type=warning]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-warning, var(--const-stoplight-warning, var(--comp-warning-color)));--tct-icon-stroke-secondary:var(--tct-stoplight-warning, var(--const-stoplight-warning, var(--comp-warning-color)))}:host([type=error]),:host([type=danger]){--comp-error-color:#d20a0a;--comp-bar-color:var(--tct-message-error-bar-color, var(--const-stoplight-alert, var(--comp-error-color)));--comp-message-background:var(--tct-message-error-background, #fee7e7)}:host([type=error]) .message-icon,:host([type=danger]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, var(--comp-error-color)));--tct-icon-stroke-secondary:var(--tct-stoplight-error, var(--const-stoplight-alert, var(--comp-error-color)))}";
 const Q2Message = /*@__PURE__*/ proxyCustomElement(class Q2Message extends HTMLElement {
     constructor() {
@@ -68,7 +68,7 @@ const Q2Message = /*@__PURE__*/ proxyCustomElement(class Q2Message extends HTMLE
         const addDivForAriaLive = !isFirefox && this.presentToggle;
         const { description } = this;
         const messageLabel = loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);
-        return (h("div", { key: 'b65f9feaee320f96a3f745eb4231510eab67aba6', tabindex: "-1", class: "message", role: description ? undefined : 'alert', "aria-live": description ? undefined : 'assertive', "aria-atomic": description ? undefined : 'true', "aria-relevant": description && addAriaHiddenForAriaLive ? undefined : 'all', "test-id": "messageContainer" }, h("div", { key: '66b9440bf994341ff365766a1241f56556fffe57', class: "bar", "test-id": "bar" }), this.appearance === 'standard' ? this.messageIcon(this.type) : '', addDivForAriaLive && h("div", { key: '47269ca27bc9c952249f574ab98e45d026125228', class: "sr" }), h("div", { key: '63a91696622f38741d5d403fe81262e2d5458328', class: "sr message-label" }, messageLabel), h("div", { key: '544cecc85e943f0156b63489cc78a42bec02f7c9', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", { key: '36ff0e64df72018818fd8452e847c522ea4c4039' }))));
+        return (h("div", { key: 'e6d294a3ad21e83f33d2e0202e74b66b5d61984f', tabindex: "-1", class: "message", role: description ? undefined : 'alert', "aria-live": description ? undefined : 'assertive', "aria-atomic": description ? undefined : 'true', "aria-relevant": description && addAriaHiddenForAriaLive ? undefined : 'all', "test-id": "messageContainer" }, h("div", { key: 'c8cad3b93d2d501513d951b0850bf920cfdd2dc8', class: "bar", "test-id": "bar" }), this.appearance === 'standard' ? this.messageIcon(this.type) : '', addDivForAriaLive && h("div", { key: '48222cb290731c76a3f68b48c01fcaff5b0fea2a', class: "sr" }), h("div", { key: '2f67a189f90d66ec9478926984cb4e3f97808658', class: "sr message-label" }, messageLabel), h("div", { key: 'f41dd21efa6c822a436328bf4bbf756eec8714fd', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", { key: '5668fbb085bfc8403062710a60238ba71c05e7ab' }))));
     }
     get hostElement() { return this; }
     static get style() { return q2MessageCss; }

package/dist/components/q2-message2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-message2.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,6kKAA6kK;;MCSrlK,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAA,WAAA,CAAA;AADtB,IAAA,WAAA,GAAA;;;;;;;AAkBI,QAAA,IAAU,CAAA,UAAA,GAA2B,UAAU;;AAI/C,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;;AAI5B,QAAA,IAAI,CAAA,IAAA,GAAwD,MAAM;AAkGrE;;;IA7FG,gBAAgB,GAAA;AACZ,QAAA,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC;;;;AAOnC,IAAA,aAAa,CAAC,KAAiB,EAAA;QAC3B,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;YAAE;AAClD,QAAA,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAc,UAAU,CAAC,CAAC,KAAK,EAAE;;;;AAM9E;;AAEG;AAEH,IAAA,MAAM,OAAO,GAAA;AACT,QAAA,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI;AAC1B,QAAA,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa;AACxC,QAAA,IAAI,CAAC,SAAS;YAAE;QAChB,SAAS,CAAC,MAAK;AACX,YAAA,IAAI,CAAC,aAAa,GAAG,KAAK;AAC9B,SAAC,CAAC;;;;AAMN,IAAA,IAAI,SAAS,GAAA;QACT,OAAOC,SAAc,EAAE;;AAG3B,IAAA,WAAW,CAAC,IAAY,EAAA;AACpB,QAAA,MAAM,OAAO,GAAG;AACZ,YAAA,OAAO,EAAE,gBAAgB;AACzB,YAAA,OAAO,EAAE,gBAAgB;AACzB,YAAA,MAAM,EAAE,cAAc;AACtB,YAAA,KAAK,EAAE,cAAc;AACrB,YAAA,IAAI,EAAE,aAAa;SACtB;QAED,MAAM,QAAQ,GAAW,OAAO,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,IAAI;AAEtD,QAAA,QACI,CACI,CAAA,SAAA,EAAA,EAAA,IAAI,EAAE,QAAQ,EACd,KAAK,EAAC,cAAc,EACtB,CAAA;;;;IAOV,MAAM,GAAA;AACF,QAAA,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI;AAC1B,QAAA,MAAM,wBAAwB,GAAG,SAAS,IAAI,IAAI,CAAC,aAAa;QAChE,MAAM,iBAAiB,GAAG,CAAC,SAAS,IAAI,IAAI,CAAC,aAAa;AAC1D,QAAA,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI;QAC5B,MAAM,YAAY,GAAW,GAAG,CAAC,+BAA+B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,MAAM,CAAA,CAAE,CAAC;AAEjG,QAAA,QACI,CACI,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,QAAQ,EAAC,IAAI,EACb,KAAK,EAAC,SAAS,EACf,IAAI,EAAE,WAAW,GAAG,SAAS,GAAG,OAAO,EAC5B,WAAA,EAAA,WAAW,GAAG,SAAS,GAAG,WAAW,EAAA,aAAA,EACnC,WAAW,GAAG,SAAS,GAAG,MAAM,mBAC9B,WAAW,IAAI,wBAAwB,GAAG,SAAS,GAAG,KAAK,EAAA,SAAA,EAClE,kBAAkB,EAAA,EAE1B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,KAAK,EAAC,KAAK,EAAA,SAAA,EACH,KAAK,EACV,CAAA,EACN,IAAI,CAAC,UAAU,KAAK,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,EACjE,iBAAiB,IAAI,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,IAAI,EAAO,CAAA,EAC5C,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,kBAAkB,EAAA,EAAE,YAAY,CAAO,EAClD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,KAAK,EAAC,iBAAiB,EAAA,aAAA,EACV,wBAAwB,GAAG,MAAM,GAAG,SAAS,EAAA,EAE1D,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACN,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","checkIfFirefox"],"sources":["src/components/q2-message/q2-message.scss?tag=q2-message&encapsulation=shadow","src/components/q2-message/q2-message.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.message {\n --comp-line-height: #{var-list(var-prefixer(message-line-height), --app-line-height, 1.428571429em)};\n border-width: var(--tct-message-border-width, 0);\n border-style: var(--tct-message-border-style, solid);\n border-color: var(--tct-message-border-color, transparent);\n position: relative;\n display: grid;\n gap: var(--tct-message-gap, 8px);\n align-items: flex-start;\n background: var-list(\n --tct-message-background,\n var-prefixer(message-bg),\n --tct-gray-14,\n --t-gray-14,\n --tct-gray-l3,\n --app-gray-l3,\n #f2f2f2\n );\n color: #{var-list(var-prefixer(message-font-color), inherit)};\n box-shadow: #{var-list(var-prefixer(message-box-shadow), --app-shadow-1, inherit)};\n border-radius: #{var-list(var-prefixer(message-border-radius), --app-border-radius-1, inherit)};\n\n &:focus {\n box-shadow: var(--const-global-focus);\n }\n}\n\n.bar {\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n height: 100%;\n background: var(--comp-bar-color);\n width: var-list(var-prefixer(message-bar-width), 4px);\n border-radius: var(--tct-message-bar-border-radius, var(--app-border-radius-1) 0 0 var(--app-border-radius-1));\n}\n\n.message-icon {\n --comp-top-offset: calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);\n --tct-icon-size: var(--comp-icon-size);\n top: var(--comp-top-offset);\n margin-bottom: calc(var(--comp-top-offset) * -1);\n}\n\n.message-content {\n flex: 1;\n line-height: var(--comp-line-height);\n font-size: var(--tct-message-font-size, inherit);\n}\n\n::slotted(ul) {\n --comp-list-default-padding: 0 0 0 #{var-list(--app-scale-3x, 15px)};\n padding: var-list(--tct-message-list-padding, --comp-list-default-padding);\n}\n\n:host(:not([appearance])),\n:host([appearance='standard']) {\n --comp-default-margin: #{var-list(--app-scale-3x, 5px)} 0;\n margin: var-list(--tct-message-margin, --comp-default-margin);\n\n .message {\n --comp-icon-size: #{var-list(var-prefixer(message-icon-size), 24px)};\n --comp-padding: #{var-list(var-prefixer(message-padding), --app-scale-3x, 15px)};\n grid-template-columns: var(--comp-icon-size) 1fr;\n padding: var(--comp-padding);\n padding-bottom: calc(var(--comp-padding) - #{var-list(--tct-scale-1, --app-scale-1x, 5px)});\n }\n\n ::slotted(ul) {\n --comp-list-default-margin: #{var-list(--app-scale-3x, 15px) 0};\n margin: var-list(--tct-message-list-margin, --comp-list-default-margin);\n }\n}\n\n:host([appearance='minimal']) {\n margin: 0;\n\n .message {\n padding: var-list(var-prefixer(message-minimal-padding), --app-scale-2x, 10px);\n grid-template-columns: 1fr;\n }\n\n ::slotted(ul) {\n margin: var-list(--tct-scale-1, --app-scale-1x, 5px) 0;\n }\n}\n\n:host(:not([type])),\n:host([type='info']) {\n --comp-info-color: #0079c1;\n --comp-bar-color: #{var-list(--tct-message-info-bar-color, --const-stoplight-info, --comp-info-color)};\n\n .message-icon,\n .message-icon {\n --tct-icon-stroke-primary: #{var-list(--tct-stoplight-info, --const-stoplight-info, --comp-info-color)};\n --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-info, --const-stoplight-info, --comp-info-color)};\n }\n}\n\n:host([type='success']) {\n --comp-success-color: #0e8a00;\n --comp-bar-color: #{var-list(--tct-message-success-bar-color, --const-stoplight-success, --comp-success-color)};\n\n .message-icon {\n --tct-icon-stroke-primary: #{var-list(--tct-stoplight-success, --const-stoplight-success, --comp-success-color)};\n --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-success, --const-stoplight-success, --comp-success-color)};\n }\n}\n\n:host([type='warning']) {\n --comp-warning-color: #c35500;\n --comp-bar-color: #{var-list(--tct-message-warning-bar-color, --const-stoplight-warning, --comp-warning-color)};\n\n .message-icon {\n --tct-icon-stroke-primary: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, --comp-warning-color)};\n --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, --comp-warning-color)};\n }\n}\n\n:host([type='error']),\n:host([type='danger']) {\n --comp-error-color: #d20a0a;\n --comp-bar-color: #{var-list(--tct-message-error-bar-color, --const-stoplight-alert, --comp-error-color)};\n\n .message-icon,\n .message-icon {\n --tct-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, --comp-error-color)};\n --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, --comp-error-color)};\n }\n}\n","import { Component, Prop, h, Method, State, Element, Listen } from '@stencil/core';\nimport { isEventFromElement, isFirefox as checkIfFirefox, loc, nextPaint, overrideFocus } from 'src/utils';\n\n/*\n @name Message\n * @category Feedback\n * @summary Use for contextual non-blocking notifications like success, error, or info alerts.\n /\n@Component({ tag: 'q2-message', shadow: true, styleUrl: 'q2-message.scss' })\nexport class Q2Message {\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n presentToggle: boolean;\n\n // #endregion\n // #region Public Property API\n\n /* The visual style of the message. The minimal style is for use cases where you have less space to display information. /\n @Prop({ reflect: true })\n appearance: 'minimal' \| 'standard' = 'standard';\n\n /* Determines whether or not assistive technology immediately presents the content to the user, via the `aria-live` attribute. /\n @Prop({ reflect: true })\n description: boolean = false;\n\n /* The type of message to display on the screen. /\n @Prop({ reflect: true })\n type: 'info' \| 'error' \| 'danger' \| 'warning' \| 'success' = 'info';\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentDidLoad(): void {\n overrideFocus(this.hostElement);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.hostElement.shadowRoot.querySelector<HTMLElement>('.message').focus();\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n Prompts assistive technology to announce the message.\n */\n @Method()\n async present() {\n const { isFirefox } = this;\n this.presentToggle = !this.presentToggle;\n if (!isFirefox) return;\n nextPaint(() => {\n this.presentToggle = false;\n });\n }\n\n // #endregion\n // #region Local Methods\n\n get isFirefox() {\n return checkIfFirefox();\n }\n\n messageIcon(type: string) {\n const iconMap = {\n success: 'success-filled',\n warning: 'warning-filled',\n danger: 'error-filled',\n error: 'error-filled',\n info: 'info-filled',\n };\n\n const iconType: string = iconMap[type] \|\| iconMap.info;\n\n return (\n <q2-icon\n type={iconType}\n class=\"message-icon\"\n />\n );\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { isFirefox } = this;\n const addAriaHiddenForAriaLive = isFirefox && this.presentToggle;\n const addDivForAriaLive = !isFirefox && this.presentToggle;\n const { description } = this;\n const messageLabel: string = loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);\n\n return (\n <div\n tabindex=\"-1\"\n class=\"message\"\n role={description ? undefined : 'alert'}\n aria-live={description ? undefined : 'assertive'}\n aria-atomic={description ? undefined : 'true'}\n aria-relevant={description && addAriaHiddenForAriaLive ? undefined : 'all'}\n test-id=\"messageContainer\"\n >\n <div\n class=\"bar\"\n test-id=\"bar\"\n ></div>\n {this.appearance === 'standard' ? this.messageIcon(this.type) : ''}\n {addDivForAriaLive && <div class=\"sr\"></div>}\n <div class=\"sr message-label\">{messageLabel}</div>\n <div\n class=\"message-content\"\n aria-hidden={addAriaHiddenForAriaLive ? 'true' : undefined}\n >\n <slot />\n </div>\n </div>\n );\n }\n\n // #endregion\n}\n"],"version":3}
1	+ {"file":"q2-message2.js","mappings":"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","names":["__stencil_proxyCustomElement","checkIfFirefox"],"sources":["src/components/q2-message/q2-message.scss?tag=q2-message&encapsulation=shadow","src/components/q2-message/q2-message.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n:host {\n display: block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.message {\n --comp-line-height: #{var-list(var-prefixer(message-line-height), --app-line-height, 1.428571429em)};\n border-width: var(--tct-message-border-width, 0);\n border-style: var(--tct-message-border-style, solid);\n border-color: var(--tct-message-border-color, transparent);\n position: relative;\n display: grid;\n gap: var(--tct-message-gap, 8px);\n align-items: flex-start;\n background: var-list(\n --comp-message-background,\n --tct-message-background,\n var-prefixer(message-bg),\n --tct-gray-14,\n --t-gray-14,\n --tct-gray-l3,\n --app-gray-l3,\n #f2f2f2\n );\n color: #{var-list(var-prefixer(message-font-color), inherit)};\n box-shadow: #{var-list(var-prefixer(message-box-shadow), --app-shadow-1, inherit)};\n border-radius: #{var-list(var-prefixer(message-border-radius), --app-border-radius-1, inherit)};\n\n &:focus {\n box-shadow: var(--const-global-focus);\n }\n}\n\n.bar {\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n height: 100%;\n background: var(--comp-bar-color);\n width: var-list(var-prefixer(message-bar-width), 4px);\n border-radius: var(--tct-message-bar-border-radius, var(--app-border-radius-1) 0 0 var(--app-border-radius-1));\n}\n\n.message-icon {\n --comp-top-offset: calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);\n --tct-icon-size: var(--comp-icon-size);\n top: var(--comp-top-offset);\n margin-bottom: calc(var(--comp-top-offset) * -1);\n}\n\n.message-content {\n flex: 1;\n line-height: var(--comp-line-height);\n font-size: var(--tct-message-font-size, inherit);\n}\n\n::slotted(ul) {\n --comp-list-default-padding: 0 0 0 #{var-list(--app-scale-3x, 15px)};\n padding: var-list(--tct-message-list-padding, --comp-list-default-padding);\n}\n\n:host(:not([appearance])),\n:host([appearance='standard']) {\n --comp-default-margin: #{var-list(--app-scale-3x, 5px)} 0;\n margin: var-list(--tct-message-margin, --comp-default-margin);\n\n .message {\n --comp-icon-size: #{var-list(var-prefixer(message-icon-size), 24px)};\n --comp-padding: #{var-list(var-prefixer(message-padding), --app-scale-3x, 15px)};\n grid-template-columns: var(--comp-icon-size) 1fr;\n padding: var(--comp-padding);\n padding-bottom: calc(var(--comp-padding) - #{var-list(--tct-scale-1, --app-scale-1x, 5px)});\n }\n\n ::slotted(ul) {\n --comp-list-default-margin: #{var-list(--app-scale-3x, 15px) 0};\n margin: var-list(--tct-message-list-margin, --comp-list-default-margin);\n }\n}\n\n:host([appearance='minimal']) {\n margin: 0;\n\n .message {\n padding: var-list(var-prefixer(message-minimal-padding), --app-scale-2x, 10px);\n grid-template-columns: 1fr;\n }\n\n ::slotted(ul) {\n margin: var-list(--tct-scale-1, --app-scale-1x, 5px) 0;\n }\n}\n\n:host(:not([type])),\n:host([type='info']) {\n --comp-info-color: #0079c1;\n --comp-bar-color: #{var-list(--tct-message-info-bar-color, --const-stoplight-info, --comp-info-color)};\n --comp-message-background: #{var-list(--tct-message-info-background, #e5f5ff)};\n\n .message-icon,\n .message-icon {\n --tct-icon-stroke-primary: #{var-list(--tct-stoplight-info, --const-stoplight-info, --comp-info-color)};\n --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-info, --const-stoplight-info, --comp-info-color)};\n }\n}\n\n:host([type='success']) {\n --comp-success-color: #0e8a00;\n --comp-bar-color: #{var-list(--tct-message-success-bar-color, --const-stoplight-success, --comp-success-color)};\n --comp-message-background: #{var-list(--tct-message-success-background, #e8ffe5)};\n\n .message-icon {\n --tct-icon-stroke-primary: #{var-list(--tct-stoplight-success, --const-stoplight-success, --comp-success-color)};\n --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-success, --const-stoplight-success, --comp-success-color)};\n }\n}\n\n:host([type='warning']) {\n --comp-warning-color: #c35500;\n --comp-bar-color: #{var-list(--tct-message-warning-bar-color, --const-stoplight-warning, --comp-warning-color)};\n --comp-message-background: #{var-list(--tct-message-warning-background, #ffe2cc)};\n\n .message-icon {\n --tct-icon-stroke-primary: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, --comp-warning-color)};\n --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, --comp-warning-color)};\n }\n}\n\n:host([type='error']),\n:host([type='danger']) {\n --comp-error-color: #d20a0a;\n --comp-bar-color: #{var-list(--tct-message-error-bar-color, --const-stoplight-alert, --comp-error-color)};\n --comp-message-background: #{var-list(--tct-message-error-background, #fee7e7)};\n\n .message-icon,\n .message-icon {\n --tct-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, --comp-error-color)};\n --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, --comp-error-color)};\n }\n}\n","import { Component, Prop, h, Method, State, Element, Listen } from '@stencil/core';\nimport { isEventFromElement, isFirefox as checkIfFirefox, loc, nextPaint, overrideFocus } from 'src/utils';\n\n/*\n @name Message\n * @category Feedback\n * @summary Use for contextual non-blocking notifications like success, error, or info alerts.\n /\n@Component({ tag: 'q2-message', shadow: true, styleUrl: 'q2-message.scss' })\nexport class Q2Message {\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n presentToggle: boolean;\n\n // #endregion\n // #region Public Property API\n\n /* The visual style of the message. The minimal style is for use cases where you have less space to display information. /\n @Prop({ reflect: true })\n appearance: 'minimal' \| 'standard' = 'standard';\n\n /* Determines whether or not assistive technology immediately presents the content to the user, via the `aria-live` attribute. /\n @Prop({ reflect: true })\n description: boolean = false;\n\n /* The type of message to display on the screen. /\n @Prop({ reflect: true })\n type: 'info' \| 'error' \| 'danger' \| 'warning' \| 'success' = 'info';\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentDidLoad(): void {\n overrideFocus(this.hostElement);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.hostElement.shadowRoot.querySelector<HTMLElement>('.message').focus();\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n Prompts assistive technology to announce the message.\n */\n @Method()\n async present() {\n const { isFirefox } = this;\n this.presentToggle = !this.presentToggle;\n if (!isFirefox) return;\n nextPaint(() => {\n this.presentToggle = false;\n });\n }\n\n // #endregion\n // #region Local Methods\n\n get isFirefox() {\n return checkIfFirefox();\n }\n\n messageIcon(type: string) {\n const iconMap = {\n success: 'success-filled',\n warning: 'warning-filled',\n danger: 'error-filled',\n error: 'error-filled',\n info: 'info-filled',\n };\n\n const iconType: string = iconMap[type] \|\| iconMap.info;\n\n return (\n <q2-icon\n type={iconType}\n class=\"message-icon\"\n />\n );\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { isFirefox } = this;\n const addAriaHiddenForAriaLive = isFirefox && this.presentToggle;\n const addDivForAriaLive = !isFirefox && this.presentToggle;\n const { description } = this;\n const messageLabel: string = loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);\n\n return (\n <div\n tabindex=\"-1\"\n class=\"message\"\n role={description ? undefined : 'alert'}\n aria-live={description ? undefined : 'assertive'}\n aria-atomic={description ? undefined : 'true'}\n aria-relevant={description && addAriaHiddenForAriaLive ? undefined : 'all'}\n test-id=\"messageContainer\"\n >\n <div\n class=\"bar\"\n test-id=\"bar\"\n ></div>\n {this.appearance === 'standard' ? this.messageIcon(this.type) : ''}\n {addDivForAriaLive && <div class=\"sr\"></div>}\n <div class=\"sr message-label\">{messageLabel}</div>\n <div\n class=\"message-content\"\n aria-hidden={addAriaHiddenForAriaLive ? 'true' : undefined}\n >\n <slot />\n </div>\n </div>\n );\n }\n\n // #endregion\n}\n"],"version":3}