npm - q2-tecton-elements - Versions diffs - 1.63.1 → 1.64.0 - Mend

q2-tecton-elements 1.63.1 → 1.64.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 (390) hide show

package/dist/q2-tecton-elements/q2-legend.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-legend.entry.esm.js","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 &: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 { IDonutChartData } from 'q2-tecton-common/lib/types/element-types';\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: IDonutChartData[] = [];\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 @Event()\n click: EventEmitter<IDonutChartData>;\n\n @Event()\n mouseenter: EventEmitter<IDonutChartData>;\n\n @Event()\n mouseleave: EventEmitter<IDonutChartData>;\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: IDonutChartData) {\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 this.click.emit(null);\n return;\n }\n\n this.selectedItemIndex = itemIndex;\n this.click.emit(this.data[itemIndex]);\n }\n\n onClickElsewhere(obj) {\n obj.selectedItemIndex = -1;\n }\n\n onMouseEnter(event: Event, itemData: IDonutChartData) {\n event.stopPropagation();\n const itemIndex = this.getDataIndexForId(itemData.id);\n this.hoveredItemIndex = itemIndex;\n this.mouseenter.emit(this.data[itemIndex]);\n }\n\n onMouseLeave(event: Event, itemData: IDonutChartData) {\n event.stopPropagation();\n const itemIndex = this.getDataIndexForId(itemData.id);\n this.hoveredItemIndex = -1;\n this.mouseleave.emit(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"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"q2-legend.entry.esm.js","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 &: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';\n\nimport type { IDonutChartData } from 'q2-tecton-common/lib/types/element-types';\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: IDonutChartData[] = [];\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 @Event()\n click: EventEmitter<IDonutChartData>;\n\n @Event()\n mouseenter: EventEmitter<IDonutChartData>;\n\n @Event()\n mouseleave: EventEmitter<IDonutChartData>;\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: IDonutChartData) {\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 this.click.emit(null);\n return;\n }\n\n this.selectedItemIndex = itemIndex;\n this.click.emit(this.data[itemIndex]);\n }\n\n onClickElsewhere(obj) {\n obj.selectedItemIndex = -1;\n }\n\n onMouseEnter(event: Event, itemData: IDonutChartData) {\n event.stopPropagation();\n const itemIndex = this.getDataIndexForId(itemData.id);\n this.hoveredItemIndex = itemIndex;\n this.mouseenter.emit(this.data[itemIndex]);\n }\n\n onMouseLeave(event: Event, itemData: IDonutChartData) {\n event.stopPropagation();\n const itemIndex = this.getDataIndexForId(itemData.id);\n this.hoveredItemIndex = -1;\n this.mouseleave.emit(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"],"names":[],"mappings":"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"}

package/dist/q2-tecton-elements/q2-legend.entry.js CHANGED Viewed

@@ -104,10 +104,10 @@ const s = class {
   // #region Render Methods
   render() {
     return i("click-elsewhere", {
-      key: "6cbca1e406e026c0379c4c78c84b2419d390fa02",
+      key: "59a0a6625476d81f9530e0a81fe25fe2b8790d11",
       onChange: () => this.onClickElsewhere(this)
     }, i("ul", {
-      key: "3e60fc46d73443c251fa80d861c14afc74c58898"
+      key: "26022bfd3cc47fd49715b7acc47041b56fbf0058"
     }, this.dataWithClasses.map((t => i("li", {
       class: "item"
     }, i("button", {

package/dist/q2-tecton-elements/q2-legend.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["q2LegendCss","Q2Legend","constructor","hostRef","this","hoveredItemIndex","selectedItemIndex","data","format","hoveredItemId","selectedItemId","componentWillLoad","watchHoveredItemId","watchSelectedItemId","newItemId","newItemIndex","getDataIndexForId","dataWithClasses","map","item","index","Object","assign","classes","isItemButtonFaded","isItemButtonSelected","formatValue","value","valueAsFloat","parseFloat","toString","Intl","NumberFormat","style","currency","id","findIndex","onClick","event","itemData","stopPropagation","itemIndex","detail","click","emit","onClickElsewhere","obj","onMouseEnter","mouseenter","onMouseLeave","mouseleave","render","h","key","onChange","class","name","backgroundColor","color"],"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 &: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 { IDonutChartData } from 'q2-tecton-common/lib/types/element-types';\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: IDonutChartData[] = [];\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 @Event()\n click: EventEmitter<IDonutChartData>;\n\n @Event()\n mouseenter: EventEmitter<IDonutChartData>;\n\n @Event()\n mouseleave: EventEmitter<IDonutChartData>;\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: IDonutChartData) {\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 this.click.emit(null);\n return;\n }\n\n this.selectedItemIndex = itemIndex;\n this.click.emit(this.data[itemIndex]);\n }\n\n onClickElsewhere(obj) {\n obj.selectedItemIndex = -1;\n }\n\n onMouseEnter(event: Event, itemData: IDonutChartData) {\n event.stopPropagation();\n const itemIndex = this.getDataIndexForId(itemData.id);\n this.hoveredItemIndex = itemIndex;\n this.mouseenter.emit(this.data[itemIndex]);\n }\n\n onMouseLeave(event: Event, itemData: IDonutChartData) {\n event.stopPropagation();\n const itemIndex = this.getDataIndexForId(itemData.id);\n this.hoveredItemIndex = -1;\n this.mouseleave.emit(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"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["q2LegendCss","Q2Legend","constructor","hostRef","this","hoveredItemIndex","selectedItemIndex","data","format","hoveredItemId","selectedItemId","componentWillLoad","watchHoveredItemId","watchSelectedItemId","newItemId","newItemIndex","getDataIndexForId","dataWithClasses","map","item","index","Object","assign","classes","isItemButtonFaded","isItemButtonSelected","formatValue","value","valueAsFloat","parseFloat","toString","Intl","NumberFormat","style","currency","id","findIndex","onClick","event","itemData","stopPropagation","itemIndex","detail","click","emit","onClickElsewhere","obj","onMouseEnter","mouseenter","onMouseLeave","mouseleave","render","h","key","onChange","class","name","backgroundColor","color"],"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 &: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';\n\nimport type { IDonutChartData } from 'q2-tecton-common/lib/types/element-types';\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: IDonutChartData[] = [];\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 @Event()\n click: EventEmitter<IDonutChartData>;\n\n @Event()\n mouseenter: EventEmitter<IDonutChartData>;\n\n @Event()\n mouseleave: EventEmitter<IDonutChartData>;\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: IDonutChartData) {\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 this.click.emit(null);\n return;\n }\n\n this.selectedItemIndex = itemIndex;\n this.click.emit(this.data[itemIndex]);\n }\n\n onClickElsewhere(obj) {\n obj.selectedItemIndex = -1;\n }\n\n onMouseEnter(event: Event, itemData: IDonutChartData) {\n event.stopPropagation();\n const itemIndex = this.getDataIndexForId(itemData.id);\n this.hoveredItemIndex = itemIndex;\n this.mouseenter.emit(this.data[itemIndex]);\n }\n\n onMouseLeave(event: Event, itemData: IDonutChartData) {\n event.stopPropagation();\n const itemIndex = this.getDataIndexForId(itemData.id);\n this.hoveredItemIndex = -1;\n this.mouseleave.emit(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"],"mappings":"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","ignoreList":[]}

package/dist/q2-tecton-elements/q2-link.q2-list.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-link.q2-list.entry.esm.js","sources":["src/components/q2-link/q2-link.scss?tag=q2-link&encapsulation=shadow","src/components/q2-link/q2-link.tsx","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\n:host {\n display: inline-block;\n}\n\n:host {\n &:active {\n box-shadow: none;\n }\n}\n\n.link-container {\n --comp-link-font-bold-stroke-width: 0.5px;\n background: transparent;\n border: none;\n font-size: var-list(--tct-link-font-size, inherit);\n font-weight: var-list(--tct-link-font-weight, inherit);\n\n &.standalone {\n --comp-icon-stroke: var(--tct-link-icon-stroke-width, 1.5);\n .link {\n border-radius: var(--tct-link-border-radius, 0);\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 --tct-icon-size: 16px;\n text-decoration: none;\n q2-icon {\n margin-left: var(--tct-link-label-icon-gap, 6px);\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 }\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 &: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(--const-double-focus-ring);\n }\n }\n}\n","import { Component, Prop, h, ComponentInterface, Element, Event, EventEmitter, Method } from '@stencil/core';\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 /** Determines whether the component and `tctClick` event are disabled. /\n @Prop({ reflect: true })\n disabled: boolean = false;\n\n /* The link when clicked. /\n @Prop({ reflect: true })\n href: string = '#';\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 = 'chevron-right';\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()\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 handleClick(event: MouseEvent) {\n event.stopPropagation();\n if (this.disabled) return;\n this.tctClick.emit({\n target: this.target,\n referrerpolicy: this.referrerpolicy,\n href: this.href,\n });\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n return this.variant === 'standalone' ? (\n <div\n class={this.classes}\n aria-label={this.label}\n >\n <a\n class=\"link\"\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 test-id=\"linkAnchor\"\n >\n <span class=\"label\">{this.label}</span>\n <q2-icon type={this.iconType}></q2-icon>\n </a>\n </div>\n ) : (\n <a\n class={this.classes}\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 test-id=\"linkAnchor\"\n >\n {this.label}\n </a>\n );\n }\n\n // #endregion\n}\n","@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/* @slot filter - An optional slot to display custom content for filtering the list items. /\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"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"q2-link.q2-list.entry.esm.js","sources":["src/components/q2-link/q2-link.scss?tag=q2-link&encapsulation=shadow","src/components/q2-link/q2-link.tsx","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\n:host {\n display: inline-block;\n}\n\n:host {\n &:active {\n box-shadow: none;\n }\n}\n\n.link-container {\n --comp-link-font-bold-stroke-width: 0.5px;\n background: transparent;\n border: none;\n font-size: var-list(--tct-link-font-size, inherit);\n font-weight: var-list(--tct-link-font-weight, inherit);\n\n &.standalone {\n --comp-icon-stroke: var(--tct-link-icon-stroke-width, 1.5);\n .link {\n border-radius: var(--tct-link-border-radius, 0);\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 --tct-icon-size: 16px;\n text-decoration: none;\n q2-icon {\n margin-left: var(--tct-link-label-icon-gap, 6px);\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 }\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 &: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(--const-double-focus-ring);\n }\n }\n}\n","import { Component, Prop, h, ComponentInterface, Element, Event, EventEmitter, Method } from '@stencil/core';\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 /** Determines whether the component and `tctClick` event are disabled. /\n @Prop({ reflect: true })\n disabled: boolean = false;\n\n /* The link when clicked. /\n @Prop({ reflect: true })\n href: string = '#';\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 = 'chevron-right';\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()\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 handleClick(event: MouseEvent) {\n event.stopPropagation();\n if (this.disabled) return;\n this.tctClick.emit({\n target: this.target,\n referrerpolicy: this.referrerpolicy,\n href: this.href,\n });\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n return this.variant === 'standalone' ? (\n <div\n class={this.classes}\n aria-label={this.label}\n >\n <a\n class=\"link\"\n onClick={e => this.handleClick(e)}\n href={!!this.disabled ? undefined : this.href}\n target={this.target \|\| '_self'}\n rel={this.target === '_blank' ? 'noopener' : undefined}\n referrerPolicy={this.referrerpolicy \|\| undefined}\n title={this.tctTitle \|\| undefined}\n test-id=\"linkAnchor\"\n >\n <span class=\"label\">{this.label}</span>\n <q2-icon type={this.iconType}></q2-icon>\n </a>\n </div>\n ) : (\n <a\n class={this.classes}\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 test-id=\"linkAnchor\"\n >\n {this.label}\n </a>\n );\n }\n\n // #endregion\n}\n","@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/* @slot filter - An optional slot to display custom content for filtering the list items. /\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"],"names":[],"mappings":"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"}

package/dist/q2-tecton-elements/q2-link_2.entry.js CHANGED Viewed

@@ -54,6 +54,7 @@ const s = class {
       onClick: t => this.handleClick(t),
       href: !!this.disabled ? undefined : this.href,
       target: this.target || "_self",
+      rel: this.target === "_blank" ? "noopener" : undefined,
       referrerPolicy: this.referrerpolicy || undefined,
       title: this.tctTitle || undefined,
       "test-id": "linkAnchor"

package/dist/q2-tecton-elements/q2-link_2.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["q2LinkCss","Q2Link","constructor","hostRef","this","disabled","href","iconType","variant","clickLink","anchor","hostElement","shadowRoot","querySelector","click","classes","list","push","join","handleClick","event","stopPropagation","tctClick","emit","target","referrerpolicy","render","h","class","label","onClick","e","undefined","referrerPolicy","title","tctTitle","type","q2ListCss","Q2List","scheduledAfterRender","renderTrigger","onMutationObserved","Array","from","children","forEach","child","tagName","role","disconnectedCallback","_a","mutationObserver","disconnect","componentDidLoad","MutationObserver","observer","observe","childList","subtree","componentDidRender","fn","hasFilterSlot","hasSlotContent","hasLabelContent","headerClasses","listClasses","key","ref","el","listElement","name"],"sources":["src/components/q2-link/q2-link.scss?tag=q2-link&encapsulation=shadow","src/components/q2-link/q2-link.tsx","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\n:host {\n display: inline-block;\n}\n\n:host {\n &:active {\n box-shadow: none;\n }\n}\n\n.link-container {\n --comp-link-font-bold-stroke-width: 0.5px;\n background: transparent;\n border: none;\n font-size: var-list(--tct-link-font-size, inherit);\n font-weight: var-list(--tct-link-font-weight, inherit);\n\n &.standalone {\n --comp-icon-stroke: var(--tct-link-icon-stroke-width, 1.5);\n .link {\n border-radius: var(--tct-link-border-radius, 0);\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 --tct-icon-size: 16px;\n text-decoration: none;\n q2-icon {\n margin-left: var(--tct-link-label-icon-gap, 6px);\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 }\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 &: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(--const-double-focus-ring);\n }\n }\n}\n","import { Component, Prop, h, ComponentInterface, Element, Event, EventEmitter, Method } from '@stencil/core';\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 /** Determines whether the component and `tctClick` event are disabled. /\n @Prop({ reflect: true })\n disabled: boolean = false;\n\n /* The link when clicked. /\n @Prop({ reflect: true })\n href: string = '#';\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 = 'chevron-right';\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()\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 handleClick(event: MouseEvent) {\n event.stopPropagation();\n if (this.disabled) return;\n this.tctClick.emit({\n target: this.target,\n referrerpolicy: this.referrerpolicy,\n href: this.href,\n });\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n return this.variant === 'standalone' ? (\n <div\n class={this.classes}\n aria-label={this.label}\n >\n <a\n class=\"link\"\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 test-id=\"linkAnchor\"\n >\n <span class=\"label\">{this.label}</span>\n <q2-icon type={this.iconType}></q2-icon>\n </a>\n </div>\n ) : (\n <a\n class={this.classes}\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 test-id=\"linkAnchor\"\n >\n {this.label}\n </a>\n );\n }\n\n // #endregion\n}\n","@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/* @slot filter - An optional slot to display custom content for filtering the list items. /\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"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["q2LinkCss","Q2Link","constructor","hostRef","this","disabled","href","iconType","variant","clickLink","anchor","hostElement","shadowRoot","querySelector","click","classes","list","push","join","handleClick","event","stopPropagation","tctClick","emit","target","referrerpolicy","render","h","class","label","onClick","e","undefined","rel","referrerPolicy","title","tctTitle","type","q2ListCss","Q2List","scheduledAfterRender","renderTrigger","onMutationObserved","Array","from","children","forEach","child","tagName","role","disconnectedCallback","_a","mutationObserver","disconnect","componentDidLoad","MutationObserver","observer","observe","childList","subtree","componentDidRender","fn","hasFilterSlot","hasSlotContent","hasLabelContent","headerClasses","listClasses","key","ref","el","listElement","name"],"sources":["src/components/q2-link/q2-link.scss?tag=q2-link&encapsulation=shadow","src/components/q2-link/q2-link.tsx","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\n:host {\n display: inline-block;\n}\n\n:host {\n &:active {\n box-shadow: none;\n }\n}\n\n.link-container {\n --comp-link-font-bold-stroke-width: 0.5px;\n background: transparent;\n border: none;\n font-size: var-list(--tct-link-font-size, inherit);\n font-weight: var-list(--tct-link-font-weight, inherit);\n\n &.standalone {\n --comp-icon-stroke: var(--tct-link-icon-stroke-width, 1.5);\n .link {\n border-radius: var(--tct-link-border-radius, 0);\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 --tct-icon-size: 16px;\n text-decoration: none;\n q2-icon {\n margin-left: var(--tct-link-label-icon-gap, 6px);\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 }\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 &: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(--const-double-focus-ring);\n }\n }\n}\n","import { Component, Prop, h, ComponentInterface, Element, Event, EventEmitter, Method } from '@stencil/core';\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 /** Determines whether the component and `tctClick` event are disabled. /\n @Prop({ reflect: true })\n disabled: boolean = false;\n\n /* The link when clicked. /\n @Prop({ reflect: true })\n href: string = '#';\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 = 'chevron-right';\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()\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 handleClick(event: MouseEvent) {\n event.stopPropagation();\n if (this.disabled) return;\n this.tctClick.emit({\n target: this.target,\n referrerpolicy: this.referrerpolicy,\n href: this.href,\n });\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n return this.variant === 'standalone' ? (\n <div\n class={this.classes}\n aria-label={this.label}\n >\n <a\n class=\"link\"\n onClick={e => this.handleClick(e)}\n href={!!this.disabled ? undefined : this.href}\n target={this.target \|\| '_self'}\n rel={this.target === '_blank' ? 'noopener' : undefined}\n referrerPolicy={this.referrerpolicy \|\| undefined}\n title={this.tctTitle \|\| undefined}\n test-id=\"linkAnchor\"\n >\n <span class=\"label\">{this.label}</span>\n <q2-icon type={this.iconType}></q2-icon>\n </a>\n </div>\n ) : (\n <a\n class={this.classes}\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 test-id=\"linkAnchor\"\n >\n {this.label}\n </a>\n );\n }\n\n // #endregion\n}\n","@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/* @slot filter - An optional slot to display custom content for filtering the list items. /\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"],"mappings":"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","ignoreList":[]}

package/dist/q2-tecton-elements/q2-modal.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-modal.entry.esm.js","sources":["src/components/q2-modal/q2-modal.scss?tag=q2-modal&encapsulation=shadow","src/components/q2-modal/q2-modal.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n@keyframes showBackdrop {\n from {\n opacity: 0;\n }\n}\n\n@keyframes hideBackdrop {\n to {\n opacity: 0;\n }\n}\n\n// CSS variables don't inherit into the ::backdrop pseudo-element\n$animation-tween: #{var-list(--tct-modal-tween, --app-tween-2, unquote('0.4s ease'))};\n\ndialog {\n --comp-border-radius-default: var(--app-scale-3x, 15px);\n --comp-border-radius: #{var-list(--tct-modal-border-radius, --comp-border-radius-default)};\n --comp-desktop-border-radius: #{var-list(--tct-modal-border-radius, --app-scale-3x, 15px)};\n --comp-close-button-size: #{var-list(--tct-modal-close-button-size, --t-a11y-min-size, 44px)};\n --comp-header-height: #{var-list(--tct-modal-header-height, --t-a11y-min-size, 44px)};\n --comp-dialog-background: #{var-list(--tct-modal-background, --t-base, #ffffff)};\n --comp-dialog-color: #{var-list(--tct-modal-color, --t-text, #4d4d4d)};\n --comp-dialog-padding: #{var-list(--tct-modal-padding, --app-scale-3x, 15px)};\n --comp-content-gradient-height: #{var-list(--tct-modal-content-gradient-height, --app-scale-2x, 10px)};\n --comp-dialog-gap: #{var-list(--tct-modal-gap, --app-scale-2x, 10px)};\n --comp-dialog-max-width: #{var-list(--tct-modal-max-width, 600px)};\n --comp-dialog-max-height: #{var-list(--tct-modal-max-height, 100vh)}; // should not use vh in the extension\n --comp-dialog-min-height: #{var-list(--tct-modal-min-height, 40vh)};\n --comp-dialog-box-shadow: #{var-list(\n --tct-modal-box-shadow,\n --app-shadow-2,\n unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)\")\n )};\n\n position: fixed;\n top: 100%;\n bottom: unset;\n color: var(--comp-dialog-color);\n background: var(--comp-dialog-background);\n transition: transform $animation-tween, opacity $animation-tween;\n width: 100%;\n max-width: var(--comp-dialog-max-width);\n border: 0;\n border-radius: var(--comp-border-radius);\n box-shadow: var(--comp-dialog-box-shadow);\n padding: 0;\n height: auto;\n overflow: hidden;\n &::backdrop {\n opacity: 0;\n background: var-list(--tct-modal-backdrop-background, --t-top-a2, rgba(13, 13, 13, 0.6));\n }\n\n &[open] {\n border-radius: var(--comp-desktop-border-radius);\n top: 0px;\n bottom: 0px;\n height: fit-content;\n transform: translateY(10%);\n opacity: 1;\n\n &.is-opening,\n &.is-open {\n opacity: 1;\n transform: translateY(0);\n &::backdrop {\n opacity: 1;\n animation: showBackdrop $animation-tween;\n }\n }\n\n &.is-closing {\n transform: translateY(10%);\n\n &::backdrop {\n animation: hideBackdrop $animation-tween;\n }\n }\n }\n}\n\n.content {\n overflow-y: auto;\n @include tiny-scrollbar();\n\n .icon {\n height: var-list(--tct-modal-icon-size --app-scale-9x, 45px);\n margin: var-list(--tct-modal-icon-margin, --app-scale-2x, 10px);\n display: flex;\n justify-content: center;\n q2-icon {\n width: var-list(--tct-modal-icon-size --app-scale-9x, 45px);\n }\n }\n .image {\n display: flex;\n justify-content: center;\n img {\n width: 100%;\n border-radius: var-list(--tct-modal-image-border-radius, --app-border-radius-2, 8px);\n }\n }\n .message {\n font-size: 1rem;\n }\n &.more-gradient {\n -webkit-mask-image: linear-gradient(to bottom, red 85%, transparent 100%);\n mask-image: linear-gradient(to bottom, red 85%, transparent 100%);\n }\n}\n\n.interior {\n display: grid;\n min-height: var(--comp-dialog-min-height);\n grid-template-rows: auto 1fr auto;\n gap: var(--comp-dialog-gap);\n max-height: calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));\n padding: var(--comp-dialog-padding);\n\n &.is-list {\n header,\n footer {\n position: relative;\n\n &:before {\n content: '';\n display: block;\n position: absolute;\n left: 0;\n height: var(--comp-content-gradient-height);\n width: 100%;\n z-index: 1;\n }\n }\n }\n}\n\nheader {\n display: flex;\n justify-content: space-between;\n .title {\n @include line-clamp(3);\n text-align: left;\n font-weight: var-list(--tct-modal-title-font-weight, 400);\n margin: 0;\n padding-top: 0.5rem;\n }\n\n .btn-close {\n grid-area: close;\n width: var(--comp-close-button-size);\n height: var(--comp-close-button-size);\n }\n}\n","import { Component, ComponentInterface, Prop, Method, h, State, Event, EventEmitter, Element } from '@stencil/core';\nimport { ModalOption, ModalResponse } from 'q2-tecton-common/lib/utility/modal';\nimport { debounce, hasSlotContent, waitForNextPaint } from 'src/utils';\nimport sanitizeHTMLString from '@/utils/sanitize-html-string';\n\n/*\n @slot content - A slot to display custom content in the modal body above the description.\n * @slot action - A slot to display up to four elements compatible with [Action Group](https://tecton.q2developer.com/design-system/q2-action-group) in the modal's footer.\n /\n@Component({ tag: 'q2-modal', shadow: true, styleUrl: 'q2-modal.scss' })\nexport class Q2Modal implements ComponentInterface {\n // #region Own Properties\n\n // to prevent background scroll when modal scrolls\n bodyOverflow: string = '';\n contentElement: HTMLDivElement;\n debouncedScroll: () => void;\n dialogElement: HTMLDialogElement;\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 maxActionButtons: number = 4;\n\n @State()\n renderStatus: 'is-open' \| 'is-closing' \| 'is-opening' = 'is-closing';\n\n // #endregion\n // #region Public Property API\n\n /\n Controls visibility of the close button in the top right corner.\n /\n @Prop({ reflect: true })\n closable: boolean = true;\n\n /\n Allows HTML markup as modal content, but it will be sanitized for security purposes.\n /\n @Prop()\n customMarkup: string;\n\n /\n A plain text description of the modal. Use this to provide context or information to the user.\n /\n @Prop()\n description: string;\n\n /\n The icon to display at the top of the modal. [See Icon documentation](https://tecton.q2developer.com/design-system/q2-icon).\n /\n @Prop()\n icon: string;\n\n /\n The icon fill color, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon).\n /\n @Prop()\n iconFillColor: string;\n\n /\n The icon primary stroke color, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon).\n /\n @Prop()\n iconStrokePrimary: string;\n\n /\n The icon secondary stroke color, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon).\n /\n @Prop()\n iconStrokeSecondary: string;\n\n /\n The icon secondary stroke width, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon).\n /\n @Prop()\n iconStrokeWidth: string;\n\n /\n An image URL to be displayed beneath the title. It renders with 100% width.\n /\n @Prop({ reflect: true })\n imageSrc: string;\n\n /\n A plain text title of the modal displayed at the top.\n /\n @Prop({ mutable: true, reflect: true })\n title: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when one of action buttons is clicked.\n /\n @Event()\n tctClick: EventEmitter;\n\n /\n Emitted when the modal is closed.\n /\n @Event()\n tctClose: EventEmitter;\n\n /\n Emitted when the modal is opened.\n /\n @Event()\n tctOpen: EventEmitter;\n\n /\n Emitted when the modal has finished rendering.\n * @private\n */\n @Event({ bubbles: false })\n tctReady: EventEmitter;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.dialogElement.removeEventListener('cancel', this.onCancel);\n this.contentElement?.removeEventListener('scroll', this.debouncedScroll);\n }\n\n componentDidLoad() {\n this.dialogElement.addEventListener('cancel', this.onCancel);\n this.tctReady.emit();\n this.bodyOverflow = document.body.style.overflow;\n this.debouncedScroll = debounce(this.onContentScroll, 100);\n this.contentElement.addEventListener('scroll', this.debouncedScroll);\n }\n\n componentDidRender(): void {\n this.scheduledAfterRender?.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n // #endregion\n // #region Public Methods API\n\n @Method()\n async closeModal(data?: ModalResponse) {\n this.tctClose.emit(data);\n this.renderStatus = 'is-closing';\n document.body.style.overflow = this.bodyOverflow;\n this.dialogElement.addEventListener(\n 'transitionend',\n () => {\n if (this.renderStatus !== 'is-closing') return;\n this.dialogElement.close();\n this.renderStatus = null;\n },\n { once: true }\n );\n }\n\n @Method()\n async openModal(option?: ModalOption) {\n if (this.dialogElement?.open) return;\n this.tctOpen.emit(option);\n await waitForNextPaint();\n // overwrite the properties if option provided\n if (option) {\n this.title = option?.title \|\| this.title;\n this.description = option?.description \|\| this.description;\n this.imageSrc = option?.imageSrc \|\| this.imageSrc;\n this.icon = option?.icon \|\| this.icon;\n this.iconStrokePrimary = option?.iconStrokePrimary \|\| this.iconStrokePrimary;\n this.iconStrokeSecondary = option?.imageSrc \|\| this.imageSrc;\n this.iconFillColor = option?.iconFillColor \|\| this.iconFillColor;\n this.iconStrokeWidth = option?.iconStrokeWidth \|\| this.iconStrokeWidth;\n this.description = option?.description \|\| this.description;\n }\n this.dialogElement.showModal();\n this.dialogElement.open = true;\n document.body.style.overflow = 'hidden';\n this.initializeModal();\n this.renderStatus = 'is-opening';\n this.dialogElement.addEventListener(\n 'transitionend',\n () => {\n if (this.renderStatus !== 'is-opening') return;\n this.renderStatus = 'is-open';\n },\n { once: true }\n );\n }\n\n // #endregion\n // #region Local Methods\n\n // to be removed\n\n iconStyle = () => {\n const styleObject = {};\n if (this.iconStrokePrimary) styleObject['--tct-icon-stroke-primary'] = this.iconStrokePrimary;\n if (this.iconStrokeSecondary) styleObject['--tct-icon-stroke-secondary'] = this.iconStrokeSecondary;\n if (this.iconFillColor) styleObject['--tct-icon-fill'] = this.iconFillColor;\n if (this.iconStrokeWidth) styleObject['--tct-icon-stroke-width'] = this.iconStrokeWidth;\n return styleObject;\n };\n\n initializeModal = () => {\n // limits 4 buttons in action slot\n this.hostElement.querySelectorAll<HTMLElement>('[slot=\"action\"]').forEach((el, i) => {\n if (i >= this.maxActionButtons) {\n console.warn(\n `q2-modal allows up to ${this.maxActionButtons} action buttons, [${el.getAttribute('label') \|\| el.textContent}] button is now hidden.`\n );\n el.hidden = true;\n }\n });\n this.contentElement.scrollTo({ top: 0 });\n this.debouncedScroll();\n };\n\n onCancel = (event: Event) => {\n event.preventDefault();\n this.closeModal();\n };\n\n onClick = (event: MouseEvent) => {\n event.stopPropagation();\n const eventTarget = event.target as HTMLElement;\n if (!(eventTarget instanceof HTMLElement)) return;\n const slot = eventTarget.getAttribute('slot');\n if (slot === 'action') {\n this.tctClick.emit({ value: eventTarget.dataset.value });\n this.onCancel(event);\n } else {\n const isInContent = !!eventTarget.closest('.interior , q2-modal');\n if (isInContent) return;\n this.onCancel(event);\n }\n };\n\n onContentScroll = () => {\n const scrollHeight = this.contentElement.scrollHeight;\n const scrollTop = Math.ceil(this.contentElement.scrollTop);\n const contentHeight = Math.ceil(this.contentElement.getBoundingClientRect()?.height \|\| 0);\n // to show bottom gradient when more contents available\n if (scrollHeight > contentHeight) {\n scrollHeight <= contentHeight + scrollTop\n ? this.contentElement.classList.remove('more-gradient')\n : this.contentElement.classList.add('more-gradient');\n } else {\n this.contentElement.classList.remove('more-gradient');\n }\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n const interiorClasses = `interior`;\n const renderStatus = `${this.renderStatus \|\| ''}`;\n return (\n <dialog\n ref={el => (this.dialogElement = el)}\n class={renderStatus}\n onClick={this.onClick}\n >\n <div class={interiorClasses}>\n {this.title && (\n <header>\n {this.title && <h2 class=\"title\">{this.title}</h2>}\n {!!this.closable && (\n <q2-btn\n class=\"btn-close\"\n test-id=\"btnClose\"\n onClick={this.onCancel}\n label=\"tecton.element.modal.close\"\n hide-label\n >\n <q2-icon type=\"close\" />\n </q2-btn>\n )}\n </header>\n )}\n <div\n class=\"content\"\n ref={el => (this.contentElement = el)}\n >\n {this.icon && (\n <div class=\"icon\">\n <q2-icon\n type={this.icon}\n style={this.iconStyle()}\n ></q2-icon>\n </div>\n )}\n {this.imageSrc && (\n <div class=\"image\">\n <img src={this.imageSrc}></img>\n </div>\n )}\n {hasSlotContent(this.hostElement, 'content') && <slot name=\"content\"></slot>}\n {this.description && <p class=\"description\">{this.description}</p>}\n {this.customMarkup && (\n <p\n class=\"customMarkup\"\n innerHTML={sanitizeHTMLString(this.customMarkup)}\n ></p>\n )}\n </div>\n <footer>\n <q2-action-group full-width>\n <slot name=\"action\"></slot>\n </q2-action-group>\n </footer>\n </div>\n </dialog>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"q2-modal.entry.esm.js","sources":["src/components/q2-modal/q2-modal.scss?tag=q2-modal&encapsulation=shadow","src/components/q2-modal/q2-modal.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n@keyframes showBackdrop {\n from {\n opacity: 0;\n }\n}\n\n@keyframes hideBackdrop {\n to {\n opacity: 0;\n }\n}\n\n// CSS variables don't inherit into the ::backdrop pseudo-element\n$animation-tween: #{var-list(--tct-modal-tween, --app-tween-2, unquote('0.4s ease'))};\n\ndialog {\n --comp-border-radius-default: var(--app-scale-3x, 15px);\n --comp-border-radius: #{var-list(--tct-modal-border-radius, --comp-border-radius-default)};\n --comp-desktop-border-radius: #{var-list(--tct-modal-border-radius, --app-scale-3x, 15px)};\n --comp-close-button-size: #{var-list(--tct-modal-close-button-size, --t-a11y-min-size, 44px)};\n --comp-header-height: #{var-list(--tct-modal-header-height, --t-a11y-min-size, 44px)};\n --comp-dialog-background: #{var-list(--tct-modal-background, --t-base, #ffffff)};\n --comp-dialog-color: #{var-list(--tct-modal-color, --t-text, #4d4d4d)};\n --comp-dialog-padding: #{var-list(--tct-modal-padding, --app-scale-3x, 15px)};\n --comp-content-gradient-height: #{var-list(--tct-modal-content-gradient-height, --app-scale-2x, 10px)};\n --comp-dialog-gap: #{var-list(--tct-modal-gap, --app-scale-2x, 10px)};\n --comp-dialog-max-width: #{var-list(--tct-modal-max-width, 600px)};\n --comp-dialog-max-height: #{var-list(--tct-modal-max-height, 100vh)}; // should not use vh in the extension\n --comp-dialog-min-height: #{var-list(--tct-modal-min-height, 40vh)};\n --comp-dialog-box-shadow: #{var-list(\n --tct-modal-box-shadow,\n --app-shadow-2,\n unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)\")\n )};\n\n position: fixed;\n top: 100%;\n bottom: unset;\n color: var(--comp-dialog-color);\n background: var(--comp-dialog-background);\n transition: transform $animation-tween, opacity $animation-tween;\n width: 100%;\n max-width: var(--comp-dialog-max-width);\n border: 0;\n border-radius: var(--comp-border-radius);\n box-shadow: var(--comp-dialog-box-shadow);\n padding: 0;\n height: auto;\n overflow: hidden;\n &::backdrop {\n opacity: 0;\n background: var-list(--tct-modal-backdrop-background, --t-top-a2, rgba(13, 13, 13, 0.6));\n }\n\n &[open] {\n border-radius: var(--comp-desktop-border-radius);\n top: 0px;\n bottom: 0px;\n height: fit-content;\n transform: translateY(10%);\n opacity: 1;\n\n &.is-opening,\n &.is-open {\n opacity: 1;\n transform: translateY(0);\n &::backdrop {\n opacity: 1;\n animation: showBackdrop $animation-tween;\n }\n }\n\n &.is-closing {\n transform: translateY(10%);\n\n &::backdrop {\n animation: hideBackdrop $animation-tween;\n }\n }\n }\n}\n\n.content {\n overflow-y: auto;\n @include tiny-scrollbar();\n\n .icon {\n height: var-list(--tct-modal-icon-size --app-scale-9x, 45px);\n margin: var-list(--tct-modal-icon-margin, --app-scale-2x, 10px);\n display: flex;\n justify-content: center;\n q2-icon {\n width: var-list(--tct-modal-icon-size --app-scale-9x, 45px);\n }\n }\n .image {\n display: flex;\n justify-content: center;\n img {\n width: 100%;\n border-radius: var-list(--tct-modal-image-border-radius, --app-border-radius-2, 8px);\n }\n }\n .message {\n font-size: 1rem;\n }\n &.more-gradient {\n -webkit-mask-image: linear-gradient(to bottom, red 85%, transparent 100%);\n mask-image: linear-gradient(to bottom, red 85%, transparent 100%);\n }\n}\n\n.interior {\n display: grid;\n min-height: var(--comp-dialog-min-height);\n grid-template-rows: auto 1fr auto;\n gap: var(--comp-dialog-gap);\n max-height: calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));\n padding: var(--comp-dialog-padding);\n\n &.is-list {\n header,\n footer {\n position: relative;\n\n &:before {\n content: '';\n display: block;\n position: absolute;\n left: 0;\n height: var(--comp-content-gradient-height);\n width: 100%;\n z-index: 1;\n }\n }\n }\n}\n\nheader {\n display: flex;\n justify-content: space-between;\n .title {\n @include line-clamp(3);\n text-align: left;\n font-weight: var-list(--tct-modal-title-font-weight, 400);\n margin: 0;\n padding-top: 0.5rem;\n }\n\n .btn-close {\n grid-area: close;\n width: var(--comp-close-button-size);\n height: var(--comp-close-button-size);\n }\n}\n","import { Component, ComponentInterface, Prop, Method, h, State, Event, EventEmitter, Element } from '@stencil/core';\nimport { debounce, hasSlotContent, waitForNextPaint } from 'src/utils';\nimport sanitizeHTMLString from '@/utils/sanitize-html-string';\n\nimport type { ModalOption, ModalResponse } from 'q2-tecton-common/lib/types/modal';\n\n/*\n @slot content - A slot to display custom content in the modal body above the description.\n * @slot action - A slot to display up to four elements compatible with [Action Group](https://tecton.q2developer.com/design-system/q2-action-group) in the modal's footer.\n /\n@Component({ tag: 'q2-modal', shadow: true, styleUrl: 'q2-modal.scss' })\nexport class Q2Modal implements ComponentInterface {\n // #region Own Properties\n\n // to prevent background scroll when modal scrolls\n bodyOverflow: string = '';\n contentElement: HTMLDivElement;\n debouncedScroll: () => void;\n dialogElement: HTMLDialogElement;\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 maxActionButtons: number = 4;\n\n @State()\n renderStatus: 'is-open' \| 'is-closing' \| 'is-opening' = 'is-closing';\n\n // #endregion\n // #region Public Property API\n\n /\n Controls visibility of the close button in the top right corner.\n /\n @Prop({ reflect: true })\n closable: boolean = true;\n\n /\n Allows HTML markup as modal content, but it will be sanitized for security purposes.\n /\n @Prop()\n customMarkup: string;\n\n /\n A plain text description of the modal. Use this to provide context or information to the user.\n /\n @Prop()\n description: string;\n\n /\n The icon to display at the top of the modal. [See Icon documentation](https://tecton.q2developer.com/design-system/q2-icon).\n /\n @Prop()\n icon: string;\n\n /\n The icon fill color, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon).\n /\n @Prop()\n iconFillColor: string;\n\n /\n The icon primary stroke color, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon).\n /\n @Prop()\n iconStrokePrimary: string;\n\n /\n The icon secondary stroke color, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon).\n /\n @Prop()\n iconStrokeSecondary: string;\n\n /\n The icon secondary stroke width, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon).\n /\n @Prop()\n iconStrokeWidth: string;\n\n /\n An image URL to be displayed beneath the title. It renders with 100% width.\n /\n @Prop({ reflect: true })\n imageSrc: string;\n\n /\n A plain text title of the modal displayed at the top.\n /\n @Prop({ mutable: true, reflect: true })\n title: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when one of action buttons is clicked.\n /\n @Event()\n tctClick: EventEmitter;\n\n /\n Emitted when the modal is closed.\n /\n @Event()\n tctClose: EventEmitter;\n\n /\n Emitted when the modal is opened.\n /\n @Event()\n tctOpen: EventEmitter;\n\n /\n Emitted when the modal has finished rendering.\n * @private\n */\n @Event({ bubbles: false })\n tctReady: EventEmitter;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.dialogElement.removeEventListener('cancel', this.onCancel);\n this.contentElement?.removeEventListener('scroll', this.debouncedScroll);\n }\n\n componentDidLoad() {\n this.dialogElement.addEventListener('cancel', this.onCancel);\n this.tctReady.emit();\n this.bodyOverflow = document.body.style.overflow;\n this.debouncedScroll = debounce(this.onContentScroll, 100);\n this.contentElement.addEventListener('scroll', this.debouncedScroll);\n }\n\n componentDidRender(): void {\n this.scheduledAfterRender?.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n // #endregion\n // #region Public Methods API\n\n @Method()\n async closeModal(data?: ModalResponse) {\n this.tctClose.emit(data);\n this.renderStatus = 'is-closing';\n document.body.style.overflow = this.bodyOverflow;\n this.dialogElement.addEventListener(\n 'transitionend',\n () => {\n if (this.renderStatus !== 'is-closing') return;\n this.dialogElement.close();\n this.renderStatus = null;\n },\n { once: true }\n );\n }\n\n @Method()\n async openModal(option?: ModalOption) {\n if (this.dialogElement?.open) return;\n this.tctOpen.emit(option);\n await waitForNextPaint();\n // overwrite the properties if option provided\n if (option) {\n this.title = option?.title \|\| this.title;\n this.description = option?.description \|\| this.description;\n this.imageSrc = option?.imageSrc \|\| this.imageSrc;\n this.icon = option?.icon \|\| this.icon;\n this.iconStrokePrimary = option?.iconStrokePrimary \|\| this.iconStrokePrimary;\n this.iconStrokeSecondary = option?.imageSrc \|\| this.imageSrc;\n this.iconFillColor = option?.iconFillColor \|\| this.iconFillColor;\n this.iconStrokeWidth = option?.iconStrokeWidth \|\| this.iconStrokeWidth;\n this.description = option?.description \|\| this.description;\n }\n this.dialogElement.showModal();\n this.dialogElement.open = true;\n document.body.style.overflow = 'hidden';\n this.initializeModal();\n this.renderStatus = 'is-opening';\n this.dialogElement.addEventListener(\n 'transitionend',\n () => {\n if (this.renderStatus !== 'is-opening') return;\n this.renderStatus = 'is-open';\n },\n { once: true }\n );\n }\n\n // #endregion\n // #region Local Methods\n\n // to be removed\n\n iconStyle = () => {\n const styleObject = {};\n if (this.iconStrokePrimary) styleObject['--tct-icon-stroke-primary'] = this.iconStrokePrimary;\n if (this.iconStrokeSecondary) styleObject['--tct-icon-stroke-secondary'] = this.iconStrokeSecondary;\n if (this.iconFillColor) styleObject['--tct-icon-fill'] = this.iconFillColor;\n if (this.iconStrokeWidth) styleObject['--tct-icon-stroke-width'] = this.iconStrokeWidth;\n return styleObject;\n };\n\n initializeModal = () => {\n // limits 4 buttons in action slot\n this.hostElement.querySelectorAll<HTMLElement>('[slot=\"action\"]').forEach((el, i) => {\n if (i >= this.maxActionButtons) {\n console.warn(\n `q2-modal allows up to ${this.maxActionButtons} action buttons, [${el.getAttribute('label') \|\| el.textContent}] button is now hidden.`\n );\n el.hidden = true;\n }\n });\n this.contentElement.scrollTo({ top: 0 });\n this.debouncedScroll();\n };\n\n onCancel = (event: Event) => {\n event.preventDefault();\n this.closeModal();\n };\n\n onClick = (event: MouseEvent) => {\n event.stopPropagation();\n const eventTarget = event.target as HTMLElement;\n if (!(eventTarget instanceof HTMLElement)) return;\n const slot = eventTarget.getAttribute('slot');\n if (slot === 'action') {\n this.tctClick.emit({ value: eventTarget.dataset.value });\n this.onCancel(event);\n } else {\n const isInContent = !!eventTarget.closest('.interior , q2-modal');\n if (isInContent) return;\n this.onCancel(event);\n }\n };\n\n onContentScroll = () => {\n const scrollHeight = this.contentElement.scrollHeight;\n const scrollTop = Math.ceil(this.contentElement.scrollTop);\n const contentHeight = Math.ceil(this.contentElement.getBoundingClientRect()?.height \|\| 0);\n // to show bottom gradient when more contents available\n if (scrollHeight > contentHeight) {\n scrollHeight <= contentHeight + scrollTop\n ? this.contentElement.classList.remove('more-gradient')\n : this.contentElement.classList.add('more-gradient');\n } else {\n this.contentElement.classList.remove('more-gradient');\n }\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n const interiorClasses = `interior`;\n const renderStatus = `${this.renderStatus \|\| ''}`;\n return (\n <dialog\n ref={el => (this.dialogElement = el)}\n class={renderStatus}\n onClick={this.onClick}\n >\n <div class={interiorClasses}>\n {this.title && (\n <header>\n {this.title && <h2 class=\"title\">{this.title}</h2>}\n {!!this.closable && (\n <q2-btn\n class=\"btn-close\"\n test-id=\"btnClose\"\n onClick={this.onCancel}\n label=\"tecton.element.modal.close\"\n hide-label\n >\n <q2-icon type=\"close\" />\n </q2-btn>\n )}\n </header>\n )}\n <div\n class=\"content\"\n ref={el => (this.contentElement = el)}\n >\n {this.icon && (\n <div class=\"icon\">\n <q2-icon\n type={this.icon}\n style={this.iconStyle()}\n ></q2-icon>\n </div>\n )}\n {this.imageSrc && (\n <div class=\"image\">\n <img src={this.imageSrc}></img>\n </div>\n )}\n {hasSlotContent(this.hostElement, 'content') && <slot name=\"content\"></slot>}\n {this.description && <p class=\"description\">{this.description}</p>}\n {this.customMarkup && (\n <p\n class=\"customMarkup\"\n innerHTML={sanitizeHTMLString(this.customMarkup)}\n ></p>\n )}\n </div>\n <footer>\n <q2-action-group full-width>\n <slot name=\"action\"></slot>\n </q2-action-group>\n </footer>\n </div>\n </dialog>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":"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"}

package/dist/q2-tecton-elements/q2-modal.entry.js CHANGED Viewed

@@ -2,11 +2,11 @@ import { r as t, c as i, h as o, g as a } from "./index-CGkHOjh1.js";
 import { e, w as r, h as s } from "./index-YJ5sXwiE.js";
-import { s as c } from "./sanitize-html-string-DOVERJq5.js";
+import { s as d } from "./sanitize-html-string-DOVERJq5.js";
-const d = '*{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}@keyframes showBackdrop{from{opacity:0}}@keyframes hideBackdrop{to{opacity:0}}dialog{--comp-border-radius-default:var(--app-scale-3x, 15px);--comp-border-radius:var(--tct-modal-border-radius, var(--comp-border-radius-default));--comp-desktop-border-radius:var(--tct-modal-border-radius, var(--app-scale-3x, 15px));--comp-close-button-size:var(--tct-modal-close-button-size, var(--t-a11y-min-size, 44px));--comp-header-height:var(--tct-modal-header-height, var(--t-a11y-min-size, 44px));--comp-dialog-background:var(--tct-modal-background, var(--t-base, #ffffff));--comp-dialog-color:var(--tct-modal-color, var(--t-text, #4d4d4d));--comp-dialog-padding:var(--tct-modal-padding, var(--app-scale-3x, 15px));--comp-content-gradient-height:var(--tct-modal-content-gradient-height, var(--app-scale-2x, 10px));--comp-dialog-gap:var(--tct-modal-gap, var(--app-scale-2x, 10px));--comp-dialog-max-width:var(--tct-modal-max-width, 600px);--comp-dialog-max-height:var(--tct-modal-max-height, 100vh);--comp-dialog-min-height:var(--tct-modal-min-height, 40vh);--comp-dialog-box-shadow:var(--tct-modal-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)));position:fixed;top:100%;bottom:unset;color:var(--comp-dialog-color);background:var(--comp-dialog-background);transition:transform var(--tct-modal-tween, var(--app-tween-2, 0.4s ease)), opacity var(--tct-modal-tween, var(--app-tween-2, 0.4s ease));width:100%;max-width:var(--comp-dialog-max-width);border:0;border-radius:var(--comp-border-radius);box-shadow:var(--comp-dialog-box-shadow);padding:0;height:auto;overflow:hidden}dialog::backdrop{opacity:0;background:var(--tct-modal-backdrop-background, var(--t-top-a2, rgba(13, 13, 13, 0.6)))}dialog[open]{border-radius:var(--comp-desktop-border-radius);top:0px;bottom:0px;height:fit-content;transform:translateY(10%);opacity:1}dialog[open].is-opening,dialog[open].is-open{opacity:1;transform:translateY(0)}dialog[open].is-opening::backdrop,dialog[open].is-open::backdrop{opacity:1;animation:showBackdrop var(--tct-modal-tween, var(--app-tween-2, 0.4s ease))}dialog[open].is-closing{transform:translateY(10%)}dialog[open].is-closing::backdrop{animation:hideBackdrop var(--tct-modal-tween, var(--app-tween-2, 0.4s ease))}.content{overflow-y:auto;--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.content::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.content::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.content::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.content .icon{height:var(--tct-modal-icon-size, var(--app-scale-9x, 45px));margin:var(--tct-modal-icon-margin, var(--app-scale-2x, 10px));display:flex;justify-content:center}.content .icon q2-icon{width:var(--tct-modal-icon-size, var(--app-scale-9x, 45px))}.content .image{display:flex;justify-content:center}.content .image img{width:100%;border-radius:var(--tct-modal-image-border-radius, var(--app-border-radius-2, 8px))}.content .message{font-size:1rem}.content.more-gradient{-webkit-mask-image:linear-gradient(to bottom, red 85%, transparent 100%);mask-image:linear-gradient(to bottom, red 85%, transparent 100%)}.interior{display:grid;min-height:var(--comp-dialog-min-height);grid-template-rows:auto 1fr auto;gap:var(--comp-dialog-gap);max-height:calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));padding:var(--comp-dialog-padding)}.interior.is-list header,.interior.is-list footer{position:relative}.interior.is-list header:before,.interior.is-list footer:before{content:"";display:block;position:absolute;left:0;height:var(--comp-content-gradient-height);width:100%;z-index:1}header{display:flex;justify-content:space-between}header .title{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;text-align:left;font-weight:var(--tct-modal-title-font-weight, 400);margin:0;padding-top:0.5rem}header .btn-close{grid-area:close;width:var(--comp-close-button-size);height:var(--comp-close-button-size)}';
+const n = '*{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}@keyframes showBackdrop{from{opacity:0}}@keyframes hideBackdrop{to{opacity:0}}dialog{--comp-border-radius-default:var(--app-scale-3x, 15px);--comp-border-radius:var(--tct-modal-border-radius, var(--comp-border-radius-default));--comp-desktop-border-radius:var(--tct-modal-border-radius, var(--app-scale-3x, 15px));--comp-close-button-size:var(--tct-modal-close-button-size, var(--t-a11y-min-size, 44px));--comp-header-height:var(--tct-modal-header-height, var(--t-a11y-min-size, 44px));--comp-dialog-background:var(--tct-modal-background, var(--t-base, #ffffff));--comp-dialog-color:var(--tct-modal-color, var(--t-text, #4d4d4d));--comp-dialog-padding:var(--tct-modal-padding, var(--app-scale-3x, 15px));--comp-content-gradient-height:var(--tct-modal-content-gradient-height, var(--app-scale-2x, 10px));--comp-dialog-gap:var(--tct-modal-gap, var(--app-scale-2x, 10px));--comp-dialog-max-width:var(--tct-modal-max-width, 600px);--comp-dialog-max-height:var(--tct-modal-max-height, 100vh);--comp-dialog-min-height:var(--tct-modal-min-height, 40vh);--comp-dialog-box-shadow:var(--tct-modal-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)));position:fixed;top:100%;bottom:unset;color:var(--comp-dialog-color);background:var(--comp-dialog-background);transition:transform var(--tct-modal-tween, var(--app-tween-2, 0.4s ease)), opacity var(--tct-modal-tween, var(--app-tween-2, 0.4s ease));width:100%;max-width:var(--comp-dialog-max-width);border:0;border-radius:var(--comp-border-radius);box-shadow:var(--comp-dialog-box-shadow);padding:0;height:auto;overflow:hidden}dialog::backdrop{opacity:0;background:var(--tct-modal-backdrop-background, var(--t-top-a2, rgba(13, 13, 13, 0.6)))}dialog[open]{border-radius:var(--comp-desktop-border-radius);top:0px;bottom:0px;height:fit-content;transform:translateY(10%);opacity:1}dialog[open].is-opening,dialog[open].is-open{opacity:1;transform:translateY(0)}dialog[open].is-opening::backdrop,dialog[open].is-open::backdrop{opacity:1;animation:showBackdrop var(--tct-modal-tween, var(--app-tween-2, 0.4s ease))}dialog[open].is-closing{transform:translateY(10%)}dialog[open].is-closing::backdrop{animation:hideBackdrop var(--tct-modal-tween, var(--app-tween-2, 0.4s ease))}.content{overflow-y:auto;--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.content::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.content::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.content::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.content .icon{height:var(--tct-modal-icon-size, var(--app-scale-9x, 45px));margin:var(--tct-modal-icon-margin, var(--app-scale-2x, 10px));display:flex;justify-content:center}.content .icon q2-icon{width:var(--tct-modal-icon-size, var(--app-scale-9x, 45px))}.content .image{display:flex;justify-content:center}.content .image img{width:100%;border-radius:var(--tct-modal-image-border-radius, var(--app-border-radius-2, 8px))}.content .message{font-size:1rem}.content.more-gradient{-webkit-mask-image:linear-gradient(to bottom, red 85%, transparent 100%);mask-image:linear-gradient(to bottom, red 85%, transparent 100%)}.interior{display:grid;min-height:var(--comp-dialog-min-height);grid-template-rows:auto 1fr auto;gap:var(--comp-dialog-gap);max-height:calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));padding:var(--comp-dialog-padding)}.interior.is-list header,.interior.is-list footer{position:relative}.interior.is-list header:before,.interior.is-list footer:before{content:"";display:block;position:absolute;left:0;height:var(--comp-content-gradient-height);width:100%;z-index:1}header{display:flex;justify-content:space-between}header .title{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;text-align:left;font-weight:var(--tct-modal-title-font-weight, 400);margin:0;padding-top:0.5rem}header .btn-close{grid-area:close;width:var(--comp-close-button-size);height:var(--comp-close-button-size)}';
-const n = class {
+const c = class {
   constructor(o) {
     t(this, o);
     this.tctClick = i(this, "tctClick", 7);
@@ -151,62 +151,62 @@ const n = class {
     const t = `interior`;
     const i = `${this.renderStatus || ""}`;
     return o("dialog", {
-      key: "09e909ca6de730e2d34ec1796fcdb2bdaf077166",
+      key: "7db31ae90932b6b1df6e7a6b0c992e171cd86160",
       ref: t => this.dialogElement = t,
       class: i,
       onClick: this.onClick
     }, o("div", {
-      key: "1410c1e9c86101eb164a6eaca3332fe2fc915bd2",
+      key: "e67bec3d468bab0e51c7f84c252b307ef25f92f7",
       class: t
     }, this.title && o("header", {
-      key: "be170cc01cfaa65937479d0f062fab907eefd585"
+      key: "ca40e88820e2f31d0f1d393de9e6d840ab4e662e"
     }, this.title && o("h2", {
-      key: "c3a4ebdf0568fac516703ef48d3e09a3aba48a52",
+      key: "b5869575b4612f2ddb7f4150f810d72e09f7faaa",
       class: "title"
     }, this.title), !!this.closable && o("q2-btn", {
-      key: "0e08fcfe0404d581e023ee51052bd0bc95c65a46",
+      key: "fd5a52a8b1e33e99c0fc3b394a2490f0bbd43786",
       class: "btn-close",
       "test-id": "btnClose",
       onClick: this.onCancel,
       label: "tecton.element.modal.close",
       "hide-label": true
     }, o("q2-icon", {
-      key: "6506b58253688e24bd53cd7d9f96022652ace643",
+      key: "8c856e1123f325812fb13870a42f061f86d0678e",
       type: "close"
     }))), o("div", {
-      key: "e6509c517e7587bf4d5ce17900d6c3d1bf236544",
+      key: "9425f4ec9ec0e27fc5d5ad6f24a64b49bb13b0d5",
       class: "content",
       ref: t => this.contentElement = t
     }, this.icon && o("div", {
-      key: "1bd63c250c3198063ce71c7ccc39b527bae734d6",
+      key: "818a5c5966193c48d37a747fae405b742a80de2d",
       class: "icon"
     }, o("q2-icon", {
-      key: "1c51ba9f9e7ec43080345e27e5a14d2ce0e259d9",
+      key: "2193e8050d9928c52c9ebe48b8277b8911ed7930",
       type: this.icon,
       style: this.iconStyle()
     })), this.imageSrc && o("div", {
-      key: "f2f424901875185ae40a1775a63179357f31882c",
+      key: "7632e57e2781e537899a0222583cb47670a3808a",
       class: "image"
     }, o("img", {
-      key: "9231e2ea874adc43095662f6c6664905737f3c9d",
+      key: "efd8e6944690d5c01fe2abf060d3e9752a03d46e",
       src: this.imageSrc
     })), s(this.hostElement, "content") && o("slot", {
-      key: "4b3163332aca9aa4c9804405174e16c3854ddd61",
+      key: "7f1f8d207eec860c3a2ea913dab5ce95fa202488",
       name: "content"
     }), this.description && o("p", {
-      key: "997cf420e09ffd589dde31e5c47c499cbc3b110c",
+      key: "4361a7b1228e9f6a26a9a4bfeca83372424302d6",
       class: "description"
     }, this.description), this.customMarkup && o("p", {
-      key: "bf9fac18c98e3a4f2ad27e7d04feb4b54e2fa958",
+      key: "3160ecf8fc9b4234cc784c9fd4d11d2fc26618fd",
       class: "customMarkup",
-      innerHTML: c(this.customMarkup)
+      innerHTML: d(this.customMarkup)
     })), o("footer", {
-      key: "48a2885c34727d6eda0636e27ee746ba90d1087d"
+      key: "ed648d32e27dca6276525e6f2f15322cf03ebac5"
     }, o("q2-action-group", {
-      key: "a48b5075f4372219f1179fae43272df8ed0aa96a",
+      key: "09dac29abbaec3823163c6726196373c9e04251f",
       "full-width": true
     }, o("slot", {
-      key: "ccfa5cbef0a4078dd3c0beb13bf78e8b1fcd74e3",
+      key: "183ab048e99c4e63f428edfc85bdf348308ecfff",
       name: "action"
     })))));
   }
@@ -215,8 +215,8 @@ const n = class {
   }
 };
-n.style = d;
+c.style = n;
-export { n as q2_modal };
+export { c as q2_modal };
 //# sourceMappingURL=q2-modal.entry.esm.js.map
 //# sourceMappingURL=q2-modal.entry.js.map