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

q2-tecton-elements 1.67.2 → 1.68.0

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

Files changed (807) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"names":["q2MeterCss","Q2Meter","constructor","hostRef","this","scheduledAfterRender","animated","dotted","componentWillLoad","_completedValue","completedValue","_suggestedValue","suggestedValue","push","componentDidRender","_a","forEach","fn","ariaLabel","label","loc","completedLabel","suggestedLabel","maxValue","maxLabel","join","adjustTooltipDirection","percentage","tooltipText","eastCutoff","westCutoff","length","convertToPercentage","max","Number","trim","replace","completed","Math","round","suggested","isNaN","min","renderBar","completedDotStyles","suggestedDotStyles","tooltipCompleted","tooltipSuggested","transform","left","h","class","style","width","segments","Array","from","map","_","i","classes","hideTooltip","position","immediate","render","key","role","description"],"sources":["src/components/q2-meter/q2-meter.scss?tag=q2-meter&encapsulation=shadow","src/components/q2-meter/q2-meter.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n width: 100%;\n}\n\n.meter-container {\n --comp-meter-bar-height: #{var-list(--tct-meter-bar-height, 10px)};\n --comp-meter-bar-border-radius: #{var-list(--tct-meter-bar-border-radius, calc(var(--comp-meter-bar-height) / 2))};\n --comp-meter-dot-height: #{var-list(--tct-meter-dot-size, --tct-meter-bar-height, 10px)};\n --comp-meter-dot-border-style: #{var-list(--tct-meter-dot-border-style, solid)};\n --comp-meter-dot-border-width: #{var-list(--tct-meter-dot-border-width, calc(0.2 * var(--comp-meter-bar-height)))};\n --comp-meter-dot-border-color: #{var-list(--tct-meter-dot-border-color, #FFFFFF)};\n --comp-meter-dot-border-radius: #{var-list(--tct-meter-dot-border-radius, 50%)};\n --comp-meter-dot-background-color: #{var-list(--tct-meter-dot-background-color, --t-primary, #6A4A9E)};\n --comp-meter-tick-height: #{var-list(--tct-meter-ticket-height, calc(0.4 * var(--comp-meter-bar-height)))};\n --comp-meter-bar-shadow: #{var-list(--tct-meter-bar-shadow)};\n --comp-meter-bar-border: #{var-list(--tct-meter-bar-border)};\n\n :host([animated]:not([animated='false'])) & {\n --comp-meter-bar-transition: #{var-list(--tct-meter-bar-transition, #{width 0.2s ease-in-out})};\n --comp-meter-dot-transition: #{var-list(--tct-meter-dot-transition, #{left 0.2s ease-in-out})};\n }\n\n :host([dotted]:not([dotted='false'])) & {\n --comp-meter-dot-visibility: visible;\n }\n\n :host([segments]:not([segments='']):not([segments='0']):not([segments='1'])) & {\n --comp-meter-tick-visibility: visible;\n }\n\n .label {\n font-size: var-list(--tct-meter-label-font-size, 14px);\n font-weight: var-list(--tct-meter-label-font-weight, 600);\n color: var-list(--tct-meter-label-color, --t-text, #4D4D4D);\n margin: var-list(--tct-meter-label-margin, #{5px 0});\n }\n .description {\n font-size: var-list(--tct-meter-description-font-size, 14px);\n font-weight: var-list(--tct-meter-description-font-weight, 400);\n color: var-list(--tct-meter-description-color, #000000);\n line-height: var-list(--tct-meter-description-line-height, 21px);\n margin: var-list(--tct-meter-description-margin, #{5px 0});\n }\n .bar-container {\n position: relative;\n .bars {\n position: relative;\n top: 0;\n left: 0;\n width: 100%;\n height: var(--comp-meter-bar-height);\n background-color: var-list(--tct-meter-bar-background-color, --t-primary-completed2, #E0DEEF);\n margin: var-list(--tct-meter-bar-margin, #{5px 0});\n border: var-list(--comp-meter-bar-border);\n border-radius: var(--comp-meter-bar-border-radius);\n box-shadow: var-list(--comp-meter-bar-shadow);\n .completed-bar,\n .suggested-bar,\n .tick-bar {\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n border-radius: var(--comp-meter-bar-border-radius);\n transition: var-list(--comp-meter-bar-transition, none);\n }\n .completed-bar {\n background-color: var-list(--tct-meter-completed-bar-background-color, --t-primary, #6A4A9E);\n min-width: calc(var(--comp-meter-bar-height));\n width: 0%;\n z-index: 2;\n }\n .suggested-bar {\n background-color: var-list(--tct-meter-suggested-bar-background-color, --t-primary-l5, #B4A0D3);\n min-width: calc(var(--comp-meter-bar-height));\n width: 0%;\n z-index: 1;\n }\n .tick-bar {\n visibility: var-list(--comp-meter-tick-visibility, hidden);\n width: 100%;\n z-index: 3;\n display: flex;\n justify-content: space-evenly;\n align-items: center;\n .tick {\n width: 100%;\n border-right-width: var-list(--tct-meter-tick-width, 1px);\n border-right-color: var-list(--tct-meter-tick-color, --t-primary-l5, #B4A0D3);\n border-right-style: solid;\n height: var(--comp-meter-tick-height);\n &.tick-right {\n border-right-color: var-list(--tct-meter-tick-right-color, --t-a11y-gray-color-AA, #949494);\n }\n &:last-child {\n border-color: transparent;\n }\n\n }\n }\n }\n .dot-container {\n position: absolute;\n line-height: 0;\n left: 0;\n top: calc(50% - var(--comp-meter-dot-height) / 2 - var(--comp-meter-dot-border-width));\n transform: translateX(-50%);\n transition: var(--comp-meter-dot-transition, none);\n z-index: 4;\n .dot {\n visibility: var-list(--comp-meter-dot-visibility, hidden);\n width: calc(var(--comp-meter-dot-height) + 2 * var(--comp-meter-dot-border-width));\n height: calc(var(--comp-meter-dot-height) + 2 * var(--comp-meter-dot-border-width));\n background-color: var(--comp-meter-dot-background-color);\n border-style: var(--comp-meter-dot-border-style);\n border-width: var(--comp-meter-dot-border-width);\n border-color: var(--comp-meter-dot-border-color);\n border-radius: var(--comp-meter-dot-border-radius);\n box-shadow: var-list(--tct-meter-dot-box-shadow, --app-shadow-1);\n }\n &.suggested {\n .dot {\n visibility: hidden;\n }\n }\n }\n }\n .legends {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n color: var-list(--tct-meter-legend-label-color, --t-textA, #767676);\n font-weight: var-list(--tct-meter-legend-font-weight, 400);\n margin: var-list(--tct-meter-legend-margin, #{5px 0});\n .left {\n display: flex;\n flex-direction: row;\n .completed,\n .suggested {\n display: flex;\n flex-direction: row;\n align-items: center;\n .dot {\n margin-right: var-list(--tct-meter-dot-gap, 5px);\n border-radius: var-list(--tct-meter-legend-dot-radius, --app-border-radius-3, 5px);\n width: var-list(--tct-meter-legend-bar-width, 7px);\n height: var-list(--tct-meter-legend-bar-height, 7px);\n }\n .legend-label {\n font-size: inherit;\n }\n }\n .completed {\n margin-right: var-list(--tct-meter-legend-gap, 20px);\n .dot {\n background-color: var-list(--tct-meter-completed-bar-background-color, --t-primary, #6A4A9E);\n }\n }\n .suggested {\n .dot {\n background-color: var-list(--tct-meter-suggested-bar-background-color, --t-primary-l5, #B4A0D3);\n }\n }\n }\n .right {\n .max {\n font-size: inherit;\n text-align: right;\n }\n }\n }\n}\n\n","import { loc } from '@/utils';\nimport { Component, Prop, h, ComponentInterface, Element } from '@stencil/core';\n/*\n @name Meter\n * @category Data Visualization\n * @summary Use for showing progress or a value within a known range.\n /\n@Component({ tag: 'q2-meter', shadow: true, styleUrl: 'q2-meter.scss' })\nexport class Q2Meter implements ComponentInterface {\n // #region Own Properties\n\n scheduledAfterRender: (() => void)[] = [];\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /\n Shows loading animation for bars, default is true.\n /\n @Prop({ reflect: true })\n animated: boolean = true;\n\n /\n Defines the label for the completed bar, which appears at the bottom in the legend section.\n * @localizable\n /\n @Prop({ reflect: true })\n completedLabel: string;\n\n /\n Defines the value for the completed bar.\n /\n @Prop({ reflect: true })\n completedValue: string;\n\n /\n Defines the description for the meter, which appears at the top just below the label.\n * @localizable\n /\n @Prop({ reflect: true })\n description: string;\n\n /\n Shows a circle shaped dot indicator on completed bar, default is true.\n /\n @Prop({ reflect: true })\n dotted: boolean = true;\n\n /\n Hide tooltips.\n * @localizable\n /\n @Prop({ reflect: true })\n hideTooltip: boolean;\n\n /\n Defines the label for the meter, which appears at the top.\n * @localizable\n /\n @Prop({ reflect: true })\n label: string;\n\n /\n Defines the label for the base bar, which appears at the bottom in the legend.\n * @localizable\n /\n @Prop({ reflect: true })\n maxLabel: string;\n\n /\n Defines the value for the base bar.\n /\n @Prop({ reflect: true })\n maxValue: string;\n\n /\n Shows thin tick bars based on the number of segments provided.\n /\n @Prop({ reflect: true })\n segments: number;\n\n /\n Defines the label for the suggested bar, which appears at the bottom in the legend.\n * @localizable\n /\n @Prop({ reflect: true })\n suggestedLabel: string;\n\n /\n Defines the value for the suggested bar.\n /\n @Prop({ reflect: true })\n suggestedValue: string;\n\n /\n Defines custom text for the completed bar tooltip.\n * @localizable\n /\n @Prop({ reflect: true })\n tooltipCompleted: string;\n\n /\n Defines custom text for the suggested bar tooltip.\n * @localizable\n /\n @Prop({ reflect: true })\n tooltipSuggested: string;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad(): void {\n if (this.animated) {\n const _completedValue = this.completedValue;\n const _suggestedValue = this.suggestedValue;\n this.completedValue = '0';\n this.suggestedValue = '0';\n this.scheduledAfterRender.push(() => {\n this.completedValue = _completedValue;\n this.suggestedValue = _suggestedValue;\n });\n }\n }\n\n componentDidRender(): void {\n this.scheduledAfterRender?.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n // #endregion\n // #region Local Methods\n\n get ariaLabel() {\n const label = [];\n label.push(`${loc(this.label \|\| '')} meter showing,`);\n label.push(`${this.completedValue \|\| 'zero'} ${loc(this.completedLabel \|\| '')},`);\n label.push(`${this.suggestedValue \|\| ''} ${loc(this.suggestedLabel \|\| '')},`);\n label.push(`out of ${this.maxValue \|\| ''} ${loc(this.maxLabel \|\| '')}`);\n return label.join(' ');\n }\n\n // Adjust tooltip direction if the value less than 5% or greater than 95% to avoid exceeding to the parent\n adjustTooltipDirection(percentage, tooltipText = '') {\n let eastCutoff = 5;\n let westCutoff = 95;\n // longer text should have more margin for cutoff\n if (tooltipText.length > 8) {\n eastCutoff = 15;\n westCutoff = 85;\n }\n if (percentage < eastCutoff) return 'ne';\n else if (percentage > westCutoff) return 'nw';\n else return 'n';\n }\n\n convertToPercentage(completedValue: string, suggestedValue: string, maxValue: string) {\n let max = Number((maxValue \|\| '100').trim().replace(/[$,]/g, ''));\n let completed = Math.round((100 Number((completedValue \|\| '0').trim().replace(/[$,]/g, ''))) / max);\n let suggested = Math.round((100 * Number((suggestedValue \|\| '0').trim().replace(/[$,]/g, ''))) / max);\n max = isNaN(max) ? 100 : max;\n completed = isNaN(completed) ? 0 : completed;\n suggested = isNaN(suggested) ? 0 : suggested;\n return [Math.min(100, completed), Math.min(100, suggested)];\n }\n\n // #endregion\n // #region Render Methods\n\n renderBar(completed: number, suggested: number) {\n suggested = Math.max(completed, suggested);\n const completedDotStyles: { left?: string; transform?: string } = {};\n const suggestedDotStyles: { left?: string; transform?: string } = {};\n const tooltipCompleted = this.tooltipCompleted ? loc(this.tooltipCompleted) : this.completedValue;\n const tooltipSuggested = this.tooltipSuggested ? loc(this.tooltipSuggested) : this.suggestedValue;\n\n if (completed === 0) {\n completedDotStyles.transform = `translateX(0%)`;\n completedDotStyles.left = 'calc(0% - var(--comp-meter-dot-border-width))';\n } else if (completed === 100) {\n completedDotStyles.transform = `translateX(-100%)`;\n completedDotStyles.left = '100%';\n } else if (0 < completed && completed < 100) {\n completedDotStyles.left = `${Math.max(1, Math.min(99, completed))}%`;\n }\n\n if (suggested === 0) {\n suggestedDotStyles.transform = `translateX(0%)`;\n suggestedDotStyles.left = '0%';\n } else if (suggested === 100) {\n suggestedDotStyles.transform = `translateX(-100%)`;\n suggestedDotStyles.left = '100%';\n } else if (0 < suggested && suggested < 100) {\n suggestedDotStyles.left = `${Math.max(1, Math.min(99, suggested))}%`;\n }\n\n return (\n <div class=\"bar-container\">\n <div class=\"bars\">\n <div\n class=\"completed-bar\"\n style={{ width: `${completed}%` }}\n ></div>\n {this.suggestedValue && this.suggestedLabel && (\n <div\n class=\"suggested-bar\"\n style={{ width: `${suggested}%` }}\n ></div>\n )}\n {this.segments && !isNaN(this.segments) && this.segments > 1 ? (\n <div class=\"tick-bar\">\n {Array.from(new Array(this.segments)).map((_, i) => {\n const classes = ['tick'];\n // color changes on ticks for greater than completed value\n if (Math.round((100 * (i + 1)) / this.segments) > completed) classes.push('tick-right');\n return <div class={classes.join(' ')}></div>;\n })}\n </div>\n ) : (\n ''\n )}\n </div>\n <div\n class=\"dot-container completed\"\n style={completedDotStyles}\n >\n {this.hideTooltip ? (\n <div class=\"dot\"></div>\n ) : (\n <q2-tooltip\n label={tooltipCompleted}\n position={this.adjustTooltipDirection(completed, tooltipCompleted)}\n immediate\n >\n <div class=\"dot\"></div>\n </q2-tooltip>\n )}\n </div>\n {suggested > completed ? (\n <div\n class=\"dot-container suggested\"\n style={suggestedDotStyles}\n >\n {this.hideTooltip ? (\n <div class=\"dot\"></div>\n ) : (\n <q2-tooltip\n label={tooltipSuggested}\n position={this.adjustTooltipDirection(suggested, tooltipSuggested)}\n immediate\n >\n <div class=\"dot\"></div>\n </q2-tooltip>\n )}\n </div>\n ) : (\n ''\n )}\n </div>\n );\n }\n\n render() {\n const [completed, suggested] = this.convertToPercentage(\n this.completedValue,\n this.suggestedValue,\n this.maxValue\n );\n return (\n <div\n class=\"meter-container\"\n aria-label={this.ariaLabel}\n role=\"group\"\n >\n {this.label && (\n <div\n class=\"label\"\n aria-label={loc(this.label)}\n >\n {loc(this.label)}\n </div>\n )}\n {this.description && (\n <div\n class=\"description\"\n aria-label={loc(this.description)}\n >\n {loc(this.description)}\n </div>\n )}\n {this.renderBar(completed, suggested)}\n <div class=\"legends\">\n <div class=\"left\">\n {this.completedValue \|\| this.completedLabel ? (\n <div class=\"completed\">\n <div class=\"dot\"></div>\n <div class=\"legend-label\">\n {this.completedValue} {loc(this.completedLabel)}\n </div>\n </div>\n ) : (\n ''\n )}\n {this.suggestedValue \|\| this.suggestedLabel ? (\n <div class=\"suggested\">\n <div class=\"dot\"></div>\n <div class=\"legend-label\">\n {this.suggestedValue} {loc(this.suggestedLabel)}\n </div>\n </div>\n ) : (\n ''\n )}\n </div>\n <div class=\"right\">\n <div class=\"max\">\n {this.maxValue} {loc(this.maxLabel)}\n </div>\n </div>\n </div>\n </div>\n );\n }\n\n // #endregion\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["q2MeterCss","Q2Meter","constructor","hostRef","this","scheduledAfterRender","animated","dotted","componentWillLoad","_completedValue","completedValue","_suggestedValue","suggestedValue","push","componentDidRender","_a","forEach","fn","ariaLabel","label","loc","completedLabel","suggestedLabel","maxValue","maxLabel","join","adjustTooltipDirection","percentage","tooltipText","eastCutoff","westCutoff","length","convertToPercentage","max","Number","trim","replace","completed","Math","round","suggested","isNaN","min","renderBar","completedDotStyles","suggestedDotStyles","tooltipCompleted","tooltipSuggested","transform","left","h","class","style","width","segments","Array","from","map","_","i","classes","hideTooltip","position","immediate","render","key","role","description"],"sources":["src/components/q2-meter/q2-meter.scss?tag=q2-meter&encapsulation=shadow","src/components/q2-meter/q2-meter.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n:host {\n width: 100%;\n}\n\n.meter-container {\n --comp-meter-bar-height: #{var-list(--tct-meter-bar-height, 10px)};\n --comp-meter-bar-border-radius: #{var-list(--tct-meter-bar-border-radius, calc(var(--comp-meter-bar-height) / 2))};\n --comp-meter-dot-height: #{var-list(--tct-meter-dot-size, --tct-meter-bar-height, 10px)};\n --comp-meter-dot-border-style: #{var-list(--tct-meter-dot-border-style, solid)};\n --comp-meter-dot-border-width: #{var-list(--tct-meter-dot-border-width, calc(0.2 * var(--comp-meter-bar-height)))};\n --comp-meter-dot-border-color: #{var-list(--tct-meter-dot-border-color, #FFFFFF)};\n --comp-meter-dot-border-radius: #{var-list(--tct-meter-dot-border-radius, 50%)};\n --comp-meter-dot-background-color: #{var-list(--tct-meter-dot-background-color, --t-primary, #6A4A9E)};\n --comp-meter-tick-height: #{var-list(--tct-meter-ticket-height, calc(0.4 * var(--comp-meter-bar-height)))};\n --comp-meter-bar-shadow: #{var-list(--tct-meter-bar-shadow)};\n --comp-meter-bar-border: #{var-list(--tct-meter-bar-border)};\n\n :host([animated]:not([animated='false'])) & {\n --comp-meter-bar-transition: #{var-list(--tct-meter-bar-transition, #{width 0.2s ease-in-out})};\n --comp-meter-dot-transition: #{var-list(--tct-meter-dot-transition, #{left 0.2s ease-in-out})};\n }\n\n :host([dotted]:not([dotted='false'])) & {\n --comp-meter-dot-visibility: visible;\n }\n\n :host([segments]:not([segments='']):not([segments='0']):not([segments='1'])) & {\n --comp-meter-tick-visibility: visible;\n }\n\n .label {\n font-size: var-list(--tct-meter-label-font-size, 14px);\n font-weight: var-list(--tct-meter-label-font-weight, 600);\n color: var-list(--tct-meter-label-color, --t-text, #4D4D4D);\n margin: var-list(--tct-meter-label-margin, #{5px 0});\n }\n .description {\n font-size: var-list(--tct-meter-description-font-size, 14px);\n font-weight: var-list(--tct-meter-description-font-weight, 400);\n color: var-list(--tct-meter-description-color, #000000);\n line-height: var-list(--tct-meter-description-line-height, 21px);\n margin: var-list(--tct-meter-description-margin, #{5px 0});\n }\n .bar-container {\n position: relative;\n .bars {\n position: relative;\n top: 0;\n left: 0;\n width: 100%;\n height: var(--comp-meter-bar-height);\n background-color: var-list(--tct-meter-bar-background-color, --t-primary-completed2, #E0DEEF);\n margin: var-list(--tct-meter-bar-margin, #{5px 0});\n border: var-list(--comp-meter-bar-border);\n border-radius: var(--comp-meter-bar-border-radius);\n box-shadow: var-list(--comp-meter-bar-shadow);\n .completed-bar,\n .suggested-bar,\n .tick-bar {\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n border-radius: var(--comp-meter-bar-border-radius);\n transition: var-list(--comp-meter-bar-transition, none);\n }\n .completed-bar {\n background-color: var-list(--tct-meter-completed-bar-background-color, --t-primary, #6A4A9E);\n min-width: calc(var(--comp-meter-bar-height));\n width: 0%;\n z-index: 2;\n }\n .suggested-bar {\n background-color: var-list(--tct-meter-suggested-bar-background-color, --t-primary-l5, #B4A0D3);\n min-width: calc(var(--comp-meter-bar-height));\n width: 0%;\n z-index: 1;\n }\n .tick-bar {\n visibility: var-list(--comp-meter-tick-visibility, hidden);\n width: 100%;\n z-index: 3;\n display: flex;\n justify-content: space-evenly;\n align-items: center;\n .tick {\n width: 100%;\n border-right-width: var-list(--tct-meter-tick-width, 1px);\n border-right-color: var-list(--tct-meter-tick-color, --t-primary-l5, #B4A0D3);\n border-right-style: solid;\n height: var(--comp-meter-tick-height);\n &.tick-right {\n border-right-color: var-list(--tct-meter-tick-right-color, --t-a11y-gray-color-AA, #949494);\n }\n &:last-child {\n border-color: transparent;\n }\n\n }\n }\n }\n .dot-container {\n position: absolute;\n line-height: 0;\n left: 0;\n top: calc(50% - var(--comp-meter-dot-height) / 2 - var(--comp-meter-dot-border-width));\n transform: translateX(-50%);\n transition: var(--comp-meter-dot-transition, none);\n z-index: 4;\n .dot {\n visibility: var-list(--comp-meter-dot-visibility, hidden);\n width: calc(var(--comp-meter-dot-height) + 2 * var(--comp-meter-dot-border-width));\n height: calc(var(--comp-meter-dot-height) + 2 * var(--comp-meter-dot-border-width));\n background-color: var(--comp-meter-dot-background-color);\n border-style: var(--comp-meter-dot-border-style);\n border-width: var(--comp-meter-dot-border-width);\n border-color: var(--comp-meter-dot-border-color);\n border-radius: var(--comp-meter-dot-border-radius);\n box-shadow: var-list(--tct-meter-dot-box-shadow, --app-shadow-1);\n }\n &.suggested {\n .dot {\n visibility: hidden;\n }\n }\n }\n }\n .legends {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n color: var-list(--tct-meter-legend-label-color, --t-textA, #767676);\n font-weight: var-list(--tct-meter-legend-font-weight, 400);\n margin: var-list(--tct-meter-legend-margin, #{5px 0});\n .left {\n display: flex;\n flex-direction: row;\n .completed,\n .suggested {\n display: flex;\n flex-direction: row;\n align-items: center;\n .dot {\n margin-right: var-list(--tct-meter-dot-gap, 5px);\n border-radius: var-list(--tct-meter-legend-dot-radius, --app-border-radius-3, 5px);\n width: var-list(--tct-meter-legend-bar-width, 7px);\n height: var-list(--tct-meter-legend-bar-height, 7px);\n }\n .legend-label {\n font-size: inherit;\n }\n }\n .completed {\n margin-right: var-list(--tct-meter-legend-gap, 20px);\n .dot {\n background-color: var-list(--tct-meter-completed-bar-background-color, --t-primary, #6A4A9E);\n }\n }\n .suggested {\n .dot {\n background-color: var-list(--tct-meter-suggested-bar-background-color, --t-primary-l5, #B4A0D3);\n }\n }\n }\n .right {\n .max {\n font-size: inherit;\n text-align: right;\n }\n }\n }\n}\n\n","import { loc } from '@/utils';\nimport { Component, Prop, h, ComponentInterface, Element } from '@stencil/core';\n/*\n @name Meter\n * @category Data Visualization\n * @summary Use for showing progress or a value within a known range.\n /\n@Component({ tag: 'q2-meter', shadow: true, styleUrl: 'q2-meter.scss' })\nexport class Q2Meter implements ComponentInterface {\n // #region Own Properties\n\n scheduledAfterRender: (() => void)[] = [];\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /\n Shows loading animation for bars, default is true.\n /\n @Prop({ reflect: true })\n animated: boolean = true;\n\n /\n Defines the label for the completed bar, which appears at the bottom in the legend section.\n * @localizable\n /\n @Prop({ reflect: true })\n completedLabel: string;\n\n /\n Defines the value for the completed bar.\n /\n @Prop({ reflect: true })\n completedValue: string;\n\n /\n Defines the description for the meter, which appears at the top just below the label.\n * @localizable\n /\n @Prop({ reflect: true })\n description: string;\n\n /\n Shows a circle shaped dot indicator on completed bar, default is true.\n /\n @Prop({ reflect: true })\n dotted: boolean = true;\n\n /\n Hide tooltips.\n * @localizable\n /\n @Prop({ reflect: true })\n hideTooltip: boolean;\n\n /\n Defines the label for the meter, which appears at the top.\n * @localizable\n /\n @Prop({ reflect: true })\n label: string;\n\n /\n Defines the label for the base bar, which appears at the bottom in the legend.\n * @localizable\n /\n @Prop({ reflect: true })\n maxLabel: string;\n\n /\n Defines the value for the base bar.\n /\n @Prop({ reflect: true })\n maxValue: string;\n\n /\n Shows thin tick bars based on the number of segments provided.\n /\n @Prop({ reflect: true })\n segments: number;\n\n /\n Defines the label for the suggested bar, which appears at the bottom in the legend.\n * @localizable\n /\n @Prop({ reflect: true })\n suggestedLabel: string;\n\n /\n Defines the value for the suggested bar.\n /\n @Prop({ reflect: true })\n suggestedValue: string;\n\n /\n Defines custom text for the completed bar tooltip.\n * @localizable\n /\n @Prop({ reflect: true })\n tooltipCompleted: string;\n\n /\n Defines custom text for the suggested bar tooltip.\n * @localizable\n /\n @Prop({ reflect: true })\n tooltipSuggested: string;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad(): void {\n if (this.animated) {\n const _completedValue = this.completedValue;\n const _suggestedValue = this.suggestedValue;\n this.completedValue = '0';\n this.suggestedValue = '0';\n this.scheduledAfterRender.push(() => {\n this.completedValue = _completedValue;\n this.suggestedValue = _suggestedValue;\n });\n }\n }\n\n componentDidRender(): void {\n this.scheduledAfterRender?.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n // #endregion\n // #region Local Methods\n\n get ariaLabel() {\n const label = [];\n label.push(`${loc(this.label \|\| '')} meter showing,`);\n label.push(`${this.completedValue \|\| 'zero'} ${loc(this.completedLabel \|\| '')},`);\n label.push(`${this.suggestedValue \|\| ''} ${loc(this.suggestedLabel \|\| '')},`);\n label.push(`out of ${this.maxValue \|\| ''} ${loc(this.maxLabel \|\| '')}`);\n return label.join(' ');\n }\n\n // Adjust tooltip direction if the value less than 5% or greater than 95% to avoid exceeding to the parent\n adjustTooltipDirection(percentage, tooltipText = '') {\n let eastCutoff = 5;\n let westCutoff = 95;\n // longer text should have more margin for cutoff\n if (tooltipText.length > 8) {\n eastCutoff = 15;\n westCutoff = 85;\n }\n if (percentage < eastCutoff) return 'ne';\n else if (percentage > westCutoff) return 'nw';\n else return 'n';\n }\n\n convertToPercentage(completedValue: string, suggestedValue: string, maxValue: string) {\n let max = Number((maxValue \|\| '100').trim().replace(/[$,]/g, ''));\n let completed = Math.round((100 Number((completedValue \|\| '0').trim().replace(/[$,]/g, ''))) / max);\n let suggested = Math.round((100 * Number((suggestedValue \|\| '0').trim().replace(/[$,]/g, ''))) / max);\n max = isNaN(max) ? 100 : max;\n completed = isNaN(completed) ? 0 : completed;\n suggested = isNaN(suggested) ? 0 : suggested;\n return [Math.min(100, completed), Math.min(100, suggested)];\n }\n\n // #endregion\n // #region Render Methods\n\n renderBar(completed: number, suggested: number) {\n suggested = Math.max(completed, suggested);\n const completedDotStyles: { left?: string; transform?: string } = {};\n const suggestedDotStyles: { left?: string; transform?: string } = {};\n const tooltipCompleted = this.tooltipCompleted ? loc(this.tooltipCompleted) : this.completedValue;\n const tooltipSuggested = this.tooltipSuggested ? loc(this.tooltipSuggested) : this.suggestedValue;\n\n if (completed === 0) {\n completedDotStyles.transform = `translateX(0%)`;\n completedDotStyles.left = 'calc(0% - var(--comp-meter-dot-border-width))';\n } else if (completed === 100) {\n completedDotStyles.transform = `translateX(-100%)`;\n completedDotStyles.left = '100%';\n } else if (0 < completed && completed < 100) {\n completedDotStyles.left = `${Math.max(1, Math.min(99, completed))}%`;\n }\n\n if (suggested === 0) {\n suggestedDotStyles.transform = `translateX(0%)`;\n suggestedDotStyles.left = '0%';\n } else if (suggested === 100) {\n suggestedDotStyles.transform = `translateX(-100%)`;\n suggestedDotStyles.left = '100%';\n } else if (0 < suggested && suggested < 100) {\n suggestedDotStyles.left = `${Math.max(1, Math.min(99, suggested))}%`;\n }\n\n return (\n <div class=\"bar-container\">\n <div class=\"bars\">\n <div\n class=\"completed-bar\"\n style={{ width: `${completed}%` }}\n ></div>\n {this.suggestedValue && this.suggestedLabel && (\n <div\n class=\"suggested-bar\"\n style={{ width: `${suggested}%` }}\n ></div>\n )}\n {this.segments && !isNaN(this.segments) && this.segments > 1 ? (\n <div class=\"tick-bar\">\n {Array.from(new Array(this.segments)).map((_, i) => {\n const classes = ['tick'];\n // color changes on ticks for greater than completed value\n if (Math.round((100 * (i + 1)) / this.segments) > completed) classes.push('tick-right');\n return <div class={classes.join(' ')}></div>;\n })}\n </div>\n ) : (\n ''\n )}\n </div>\n <div\n class=\"dot-container completed\"\n style={completedDotStyles}\n >\n {this.hideTooltip ? (\n <div class=\"dot\"></div>\n ) : (\n <q2-tooltip\n label={tooltipCompleted}\n position={this.adjustTooltipDirection(completed, tooltipCompleted)}\n immediate\n >\n <div class=\"dot\"></div>\n </q2-tooltip>\n )}\n </div>\n {suggested > completed ? (\n <div\n class=\"dot-container suggested\"\n style={suggestedDotStyles}\n >\n {this.hideTooltip ? (\n <div class=\"dot\"></div>\n ) : (\n <q2-tooltip\n label={tooltipSuggested}\n position={this.adjustTooltipDirection(suggested, tooltipSuggested)}\n immediate\n >\n <div class=\"dot\"></div>\n </q2-tooltip>\n )}\n </div>\n ) : (\n ''\n )}\n </div>\n );\n }\n\n render() {\n const [completed, suggested] = this.convertToPercentage(\n this.completedValue,\n this.suggestedValue,\n this.maxValue\n );\n return (\n <div\n class=\"meter-container\"\n aria-label={this.ariaLabel}\n role=\"group\"\n >\n {this.label && (\n <div\n class=\"label\"\n aria-label={loc(this.label)}\n >\n {loc(this.label)}\n </div>\n )}\n {this.description && (\n <div\n class=\"description\"\n aria-label={loc(this.description)}\n >\n {loc(this.description)}\n </div>\n )}\n {this.renderBar(completed, suggested)}\n <div class=\"legends\">\n <div class=\"left\">\n {this.completedValue \|\| this.completedLabel ? (\n <div class=\"completed\">\n <div class=\"dot\"></div>\n <div class=\"legend-label\">\n {this.completedValue} {loc(this.completedLabel)}\n </div>\n </div>\n ) : (\n ''\n )}\n {this.suggestedValue \|\| this.suggestedLabel ? (\n <div class=\"suggested\">\n <div class=\"dot\"></div>\n <div class=\"legend-label\">\n {this.suggestedValue} {loc(this.suggestedLabel)}\n </div>\n </div>\n ) : (\n ''\n )}\n </div>\n <div class=\"right\">\n <div class=\"max\">\n {this.maxValue} {loc(this.maxLabel)}\n </div>\n </div>\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 .description {\n font-size: var-list(--tct-modal-description-font-size, 14px);\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 align-items: center;\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 }\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 @name Modal\n * @category Display\n * @summary Use for focused interactions that require user attention before continuing.\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 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.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 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 type={this.icon}></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@import './variables';\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 .description {\n font-size: var-list(--tct-modal-description-font-size, 14px);\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 align-items: center;\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 }\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 @name Modal\n * @category Display\n * @summary Use for focused interactions that require user attention before continuing.\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 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.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 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 type={this.icon}></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

@@ -1,14 +1,14 @@
-import { r as t, c as o, h as a, g as i } from "./index-CGkHOjh1.js";
+import { r as t, c as o, h as i, g as a } from "./index-CGkHOjh1.js";
-import { e, w as r, h as s } from "./index-C4PILj1_.js";
+import { e, w as r, h as s } from "./index-C5gj0T_3.js";
-import { s as d } from "./sanitize-html-string-B35VmRc9.js";
+import { s as c } from "./sanitize-html-string-DPHNpMWE.js";
-const c = '*{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 .description{font-size:var(--tct-modal-description-font-size, 14px)}.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;align-items:center}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}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 .description{font-size:var(--tct-modal-description-font-size, 14px)}.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;align-items:center}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}header .btn-close{grid-area:close;width:var(--comp-close-button-size);height:var(--comp-close-button-size)}';
-const n = class {
-  constructor(a) {
-    t(this, a);
+const d = class {
+  constructor(i) {
+    t(this, i);
     this.tctClick = o(this, "tctClick", 7);
     this.tctClose = o(this, "tctClose", 7);
     this.tctOpen = o(this, "tctOpen", 7);
@@ -49,26 +49,26 @@ const n = class {
       t.stopPropagation();
       const o = t.target;
       if (!(o instanceof HTMLElement)) return;
-      const a = o.getAttribute("slot");
-      if (a === "action") {
+      const i = o.getAttribute("slot");
+      if (i === "action") {
         this.tctClick.emit({
           value: o.dataset.value
         });
         this.onCancel(t);
       } else {
-        const a = !!o.closest(".interior , q2-modal");
-        if (a) return;
+        const i = !!o.closest(".interior , q2-modal");
+        if (i) return;
         this.onCancel(t);
       }
     };
     this.onContentScroll = () => {
       var t;
       const o = this.contentElement.scrollHeight;
-      const a = Math.ceil(this.contentElement.scrollTop);
-      const i = Math.ceil(((t = this.contentElement.getBoundingClientRect()) === null || t === void 0 ? void 0 : t.height) || 0);
+      const i = Math.ceil(this.contentElement.scrollTop);
+      const a = Math.ceil(((t = this.contentElement.getBoundingClientRect()) === null || t === void 0 ? void 0 : t.height) || 0);
       // to show bottom gradient when more contents available
-            if (o > i) {
-        o <= i + a ? this.contentElement.classList.remove("more-gradient") : this.contentElement.classList.add("more-gradient");
+            if (o > a) {
+        o <= a + i ? this.contentElement.classList.remove("more-gradient") : this.contentElement.classList.add("more-gradient");
       } else {
         this.contentElement.classList.remove("more-gradient");
       }
@@ -137,72 +137,72 @@ const n = class {
   render() {
     const t = `interior`;
     const o = `${this.renderStatus || ""}`;
-    return a("dialog", {
-      key: "e7c16406478e632f39057feb8ab86029c2b6ddd7",
+    return i("dialog", {
+      key: "f07045cb3a3e85c9ebb018aba4693f1b547da800",
       ref: t => this.dialogElement = t,
       class: o,
       onClick: this.onClick
-    }, a("div", {
-      key: "b59510c6a97ac4f8e4820465919e364a924b82e1",
+    }, i("div", {
+      key: "215739e96bf781f3c9d7b1e67250820ccf858b75",
       class: t
-    }, this.title && a("header", {
-      key: "714904259d422f663d13aa27b715a2de9ab3b12b"
-    }, this.title && a("h2", {
-      key: "69e2f5f487b73fc84ff6e0ca1e9710d7c5f80938",
+    }, this.title && i("header", {
+      key: "77ce6f5b51a36f296fd110e3506c44ff94d72c48"
+    }, this.title && i("h2", {
+      key: "fe6c7e59889383c6af5615093e66c3837dd24bc4",
       class: "title"
-    }, this.title), !!this.closable && a("q2-btn", {
-      key: "e9258c375fd6f077f296a496a6a67903a39f3d8c",
+    }, this.title), !!this.closable && i("q2-btn", {
+      key: "8da0a4c5499caffd385bbf78f2010f77f8c35785",
       class: "btn-close",
       "test-id": "btnClose",
       onClick: this.onCancel,
       label: "tecton.element.modal.close",
       "hide-label": true
-    }, a("q2-icon", {
-      key: "4c07c70736c25e12d08d6f066507326bc333ad61",
+    }, i("q2-icon", {
+      key: "3526408cfbc99d56d74e3167624049a86dded3a4",
       type: "close"
-    }))), a("div", {
-      key: "a40c63b069c6f8c03682d8626f9a359cb5f7f7fa",
+    }))), i("div", {
+      key: "ce3c96886c1d28d78040401b3782892c5bda7399",
       class: "content",
       ref: t => this.contentElement = t
-    }, this.icon && a("div", {
-      key: "95bf4a48929080493ed1f375648aa8630931e3be",
+    }, this.icon && i("div", {
+      key: "e4bae20593b8877f9c713f5bf63e59574042735b",
       class: "icon"
-    }, a("q2-icon", {
-      key: "8e7d34940323c625e61eea7509d829d298af82a0",
+    }, i("q2-icon", {
+      key: "466a83589286d503c6a5a36ba1999a73df951c19",
       type: this.icon
-    })), this.imageSrc && a("div", {
-      key: "9f6fbbd59c14cc5ee93601db161dd7c748e3b5a6",
+    })), this.imageSrc && i("div", {
+      key: "56a0e413b40319b7a40e79136575ee8849c339c6",
       class: "image"
-    }, a("img", {
-      key: "d97eb1d2dae996c2bcacddf840b984f1ffe05847",
+    }, i("img", {
+      key: "0d32cee3447aa42273a816c4cd8941d5df62b3b2",
       src: this.imageSrc
-    })), s(this.hostElement, "content") && a("slot", {
-      key: "b7b66ddb181aa333fb88496984a6f35a34077baf",
+    })), s(this.hostElement, "content") && i("slot", {
+      key: "3687527d29977c662dd480e6fb9727f47eb3522a",
       name: "content"
-    }), this.description && a("p", {
-      key: "54dc54b11c8c351b760afc35c714d35277b3e463",
+    }), this.description && i("p", {
+      key: "34b49f5bb615192deec83726391b66680541eb12",
       class: "description"
-    }, this.description), this.customMarkup && a("p", {
-      key: "11e8922a3e277f6bb21c8cbcaf1be19de07d3a54",
+    }, this.description), this.customMarkup && i("p", {
+      key: "a44e20822b497cc95e2ad16430f3e3e27f1c164a",
       class: "customMarkup",
-      innerHTML: d(this.customMarkup)
-    })), a("footer", {
-      key: "f90f8a5569be4c1660c25388a9082e2e40a3e11d"
-    }, a("q2-action-group", {
-      key: "34254d2e03a6093e53324c3d98b0eb2ede3b14f2",
+      innerHTML: c(this.customMarkup)
+    })), i("footer", {
+      key: "ae01296dc46f5502b1cdfa7b1949639df942c124"
+    }, i("q2-action-group", {
+      key: "b89615558a7129659ce1574cc026c2bc4d728e8b",
       "full-width": true
-    }, a("slot", {
-      key: "a34ad5fa37fc258bd2863f2fd191acdac05de9cb",
+    }, i("slot", {
+      key: "f12ed356d57b290222a5dab301c83a85fbdc9c34",
       name: "action"
     })))));
   }
   get hostElement() {
-    return i(this);
+    return a(this);
   }
 };
-n.style = c;
+d.style = n;
-export { n as q2_modal };
+export { d as q2_modal };
 //# sourceMappingURL=q2-modal.entry.esm.js.map
 //# sourceMappingURL=q2-modal.entry.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"names":["q2ModalCss","Q2Modal","constructor","hostRef","this","bodyOverflow","scheduledAfterRender","maxActionButtons","renderStatus","closable","initializeModal","hostElement","querySelectorAll","forEach","el","i","console","warn","getAttribute","textContent","hidden","contentElement","scrollTo","top","debouncedScroll","onCancel","event","preventDefault","closeModal","onClick","stopPropagation","eventTarget","target","HTMLElement","slot","tctClick","emit","value","dataset","isInContent","closest","onContentScroll","scrollHeight","scrollTop","Math","ceil","contentHeight","_a","getBoundingClientRect","height","classList","remove","add","disconnectedCallback","dialogElement","removeEventListener","componentDidLoad","addEventListener","tctReady","document","body","style","overflow","debounce","componentDidRender","fn","data","tctClose","close","once","openModal","option","open","tctOpen","waitForNextPaint","title","description","imageSrc","icon","showModal","render","interiorClasses","h","key","ref","class","label","type","src","hasSlotContent","name","customMarkup","innerHTML","sanitizeHTMLString"],"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 .description {\n font-size: var-list(--tct-modal-description-font-size, 14px);\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 align-items: center;\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 }\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 @name Modal\n * @category Display\n * @summary Use for focused interactions that require user attention before continuing.\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 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.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 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 type={this.icon}></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"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["q2ModalCss","Q2Modal","constructor","hostRef","this","bodyOverflow","scheduledAfterRender","maxActionButtons","renderStatus","closable","initializeModal","hostElement","querySelectorAll","forEach","el","i","console","warn","getAttribute","textContent","hidden","contentElement","scrollTo","top","debouncedScroll","onCancel","event","preventDefault","closeModal","onClick","stopPropagation","eventTarget","target","HTMLElement","slot","tctClick","emit","value","dataset","isInContent","closest","onContentScroll","scrollHeight","scrollTop","Math","ceil","contentHeight","_a","getBoundingClientRect","height","classList","remove","add","disconnectedCallback","dialogElement","removeEventListener","componentDidLoad","addEventListener","tctReady","document","body","style","overflow","debounce","componentDidRender","fn","data","tctClose","close","once","openModal","option","open","tctOpen","waitForNextPaint","title","description","imageSrc","icon","showModal","render","interiorClasses","h","key","ref","class","label","type","src","hasSlotContent","name","customMarkup","innerHTML","sanitizeHTMLString"],"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@import './variables';\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 .description {\n font-size: var-list(--tct-modal-description-font-size, 14px);\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 align-items: center;\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 }\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 @name Modal\n * @category Display\n * @summary Use for focused interactions that require user attention before continuing.\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 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.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 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 type={this.icon}></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"],"mappings":"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","ignoreList":[]}

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

@@ -1,6 +1,6 @@
 import { r as t, c as e, h as n, g as o } from "./index-CGkHOjh1.js";
-import { l as i, o as a } from "./index-C4PILj1_.js";
+import { l as i, o as a } from "./index-C5gj0T_3.js";
 const r = "*{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}.month-container{--comp-month-primary-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)));--comp-month-primary-font-color:var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--tct-white, var(--app-white, #ffffff))));--comp-month-primary-background:var(--tct-btn-secondary-background, var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc)));--comp-month-secondary-font-color:var(--tct-btn-secondary-font-color, var(--t-btn-secondary-font-color, var(--t-button-default-font-color, #2e2e2e)))}.month-container .navigation{display:flex;justify-content:space-between;flex-direction:row}.month-container .navigation .year-btn{padding:0 1rem;display:flex;align-items:center}.month-container .navigation .year-btn .year{margin-right:0.2rem}.month-container .navigation .year-btn .year-icon{--t-icon-stroke-width:2px;width:16px;height:16px;transition:all 0.3s ease-in-out}.month-container .navigation .year-btn .year-icon.on{transform:rotate(-180deg)}.month-container .navigation .month-controller{display:flex;align-items:center}.month-container .month-list{display:grid;grid-template-columns:auto auto auto}.month-container .month-list .month{display:flex;justify-content:center;align-items:center;padding:0.5rem 0}.month-container .month-list .month .month-button{border-radius:50%;aspect-ratio:1;width:50px;display:flex;justify-content:center;align-items:center}.month-container .month-list .month .month-button:hover{background:var(--comp-month-primary-background);color:var(--comp-month-secondary-font-color);cursor:pointer}.month-container .month-list .month .month-button:active,.month-container .month-list .month .month-button.active{background:var(--comp-month-primary-background);color:var(--comp-month-primary-font-color)}.month-container .today-label{padding:0.5rem 0;color:var(--tct-calendar-day-selected-outline-color, var(--t-calendar-day-selected-outline-color, var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))))}";

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

@@ -88,7 +88,7 @@ const r = class {
   // #region Render Methods
   render() {
     return e("slot", {
-      key: "63a71ae4a0e7d69ea2aaec1244ff89c6d47d6a81",
+      key: "e60ef36a762c6af123a91fe6c4def64179663098",
       onSlotchange: this.handleSlotChange
     });
   }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-optgroup.entry.esm.js","sources":["src/components/q2-optgroup/q2-optgroup.scss?tag=q2-optgroup&encapsulation=shadow","src/components/q2-optgroup/q2-optgroup.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: block;\n}\n\n.q2-optgroup-header {\n --comp-header-padding: #{var-list(--tct-scale-1, --app-scale-1x, 5px) var-list(--tct-scale-2, --app-scale-2x, 10px)};\n background: var-list(\n --tct-optgroup-header-background,\n var-prefixer(optgroup-header-bg),\n --t-base,\n #FFFFFF\n );\n color: var-list(--tct-optgroup-header-color, inherit);\n font-size: var(--tct-optgroup-header-font-size, 14px);\n font-weight: var(--tct-optgroup-header-font-weight, 600);\n letter-spacing: var(--tct-optgroup-header-letter-spacing, inherit);\n position: var-list(--tct-optgroup-header-position, sticky);\n padding: var-list(var-prefixer(optgroup-header-padding), --comp-header-padding);\n text-transform: var-list(var-prefixer(optgroup-header-text-transform), none);\n top: calc(var(--comp-popover-top-container-height, 0px) + var-list(var-prefixer(optgroup-top), 0px));\n z-index: 5; // Keeps the optgroup over any hover or focus states\n}\n","import { hasValidAncestor } from '@/utils/component';\nimport { Component, h, ComponentInterface, Prop, Element, Watch, State } from '@stencil/core';\nimport { createGuid, loc } from 'src/utils';\n\n/*\n @name Option Group\n * @category Forms\n * @summary Use for grouping related options under a label in Select or Dropdown.\n /\n@Component({ tag: 'q2-optgroup', shadow: true, styleUrl: 'q2-optgroup.scss' })\nexport class Q2Optgroup implements ComponentInterface {\n // #region Own Properties\n\n guid: number = createGuid();\n mutationObserver: MutationObserver;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n hidden: boolean = false;\n\n // #endregion\n // #region Public Property API\n\n /* Determines whether all nested options are disabled. /\n @Prop({ reflect: true })\n disabled: boolean = false;\n\n /* Serves as the group header text. */\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 componentWillLoad() {\n hasValidAncestor(this.hostElement, 'q2-option-list, q2-select, q2-dropdown, q2-pill');\n const observer = new MutationObserver(this.setHidden);\n observer.observe(this.hostElement, { childList: true, attributes: true, subtree: true });\n this.mutationObserver = observer;\n\n // set initially\n this.setHidden();\n this.disabledWatcher(this.disabled);\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('disabled')\n disabledWatcher(disabled: boolean) {\n this.options.forEach(opt => {\n opt.disabledGroup = !!disabled;\n });\n }\n\n // #endregion\n // #region Local Methods\n\n get headerId() {\n return `q2-optgroup-header-${this.guid}`;\n }\n\n get options() {\n return Array.from(this.hostElement.querySelectorAll('q2-option'));\n }\n\n setHidden = () => {\n this.hidden = this.options.every(opt => opt.hidden \|\| opt._multiSelectHidden);\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <div\n class=\"q2-optgroup-container\"\n hidden={this.hidden}\n aria-labelledby={this.headerId}\n role=\"group\"\n >\n <div\n class=\"q2-optgroup-header\"\n id={this.headerId}\n >\n {(this.label && loc(this.label)) \|\| ''}\n </div>\n <div class=\"q2-optgroup-options\">\n <slot />\n </div>\n </div>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":";;;;AAAA,MAAM,aAAa,GAAG,4hDAA4hD;;MCUriD,UAAU,GAAA,MAAA;AADvB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAII,QAAA,IAAI,CAAA,IAAA,GAAW,UAAU,EAAE;;;AAa3B,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;;;;AAOvB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AA8CzB,QAAA,IAAS,CAAA,SAAA,GAAG,MAAK;YACb,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,IAAI,GAAG,CAAC,MAAM,IAAI,GAAG,CAAC,kBAAkB,CAAC;AACjF,SAAC;AA2BJ;;;IAlEG,oBAAoB,GAAA;;QAChB,CAAA,EAAA,GAAA,IAAI,CAAC,gBAAgB,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,EAAE;AACnC,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI;;IAGhC,iBAAiB,GAAA;AACb,QAAA,gBAAgB,CAAC,IAAI,CAAC,WAAW,EAAE,iDAAiD,CAAC;QACrF,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC;QACrD,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACxF,QAAA,IAAI,CAAC,gBAAgB,GAAG,QAAQ;;QAGhC,IAAI,CAAC,SAAS,EAAE;AAChB,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC;;;;AAOvC,IAAA,eAAe,CAAC,QAAiB,EAAA;AAC7B,QAAA,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,IAAG;AACvB,YAAA,GAAG,CAAC,aAAa,GAAG,CAAC,CAAC,QAAQ;AAClC,SAAC,CAAC;;;;AAMN,IAAA,IAAI,QAAQ,GAAA;AACR,QAAA,OAAO,CAAsB,mBAAA,EAAA,IAAI,CAAC,IAAI,EAAE;;AAG5C,IAAA,IAAI,OAAO,GAAA;AACP,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC;;;;IAUrE,MAAM,GAAA;QACF,QACI,CACI,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAC7B,MAAM,EAAE,IAAI,CAAC,MAAM,qBACF,IAAI,CAAC,QAAQ,EAC9B,IAAI,EAAC,OAAO,EAAA,EAEZ,CACI,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAC1B,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAA,EAEhB,CAAC,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CACpC,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAA,EAC5B,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACN,CACJ;;;;;;;;;;;"}
1	+ {"version":3,"file":"q2-optgroup.entry.esm.js","sources":["src/components/q2-optgroup/q2-optgroup.scss?tag=q2-optgroup&encapsulation=shadow","src/components/q2-optgroup/q2-optgroup.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n:host {\n display: block;\n}\n\n.q2-optgroup-header {\n --comp-header-padding: #{var-list(--tct-scale-1, --app-scale-1x, 5px) var-list(--tct-scale-2, --app-scale-2x, 10px)};\n background: var-list(\n --tct-optgroup-header-background,\n var-prefixer(optgroup-header-bg),\n --t-base,\n #FFFFFF\n );\n color: var-list(--tct-optgroup-header-color, inherit);\n font-size: var(--tct-optgroup-header-font-size, 14px);\n font-weight: var(--tct-optgroup-header-font-weight, 600);\n letter-spacing: var(--tct-optgroup-header-letter-spacing, inherit);\n position: var-list(--tct-optgroup-header-position, sticky);\n padding: var-list(var-prefixer(optgroup-header-padding), --comp-header-padding);\n text-transform: var-list(var-prefixer(optgroup-header-text-transform), none);\n top: calc(var(--comp-popover-top-container-height, 0px) + var-list(var-prefixer(optgroup-top), 0px));\n z-index: 5; // Keeps the optgroup over any hover or focus states\n}\n","import { hasValidAncestor } from '@/utils/component';\nimport { Component, h, ComponentInterface, Prop, Element, Watch, State } from '@stencil/core';\nimport { createGuid, loc } from 'src/utils';\n\n/*\n @name Option Group\n * @category Forms\n * @summary Use for grouping related options under a label in Select or Dropdown.\n /\n@Component({ tag: 'q2-optgroup', shadow: true, styleUrl: 'q2-optgroup.scss' })\nexport class Q2Optgroup implements ComponentInterface {\n // #region Own Properties\n\n guid: number = createGuid();\n mutationObserver: MutationObserver;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n hidden: boolean = false;\n\n // #endregion\n // #region Public Property API\n\n /* Determines whether all nested options are disabled. /\n @Prop({ reflect: true })\n disabled: boolean = false;\n\n /* Serves as the group header text. */\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 componentWillLoad() {\n hasValidAncestor(this.hostElement, 'q2-option-list, q2-select, q2-dropdown, q2-pill');\n const observer = new MutationObserver(this.setHidden);\n observer.observe(this.hostElement, { childList: true, attributes: true, subtree: true });\n this.mutationObserver = observer;\n\n // set initially\n this.setHidden();\n this.disabledWatcher(this.disabled);\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('disabled')\n disabledWatcher(disabled: boolean) {\n this.options.forEach(opt => {\n opt.disabledGroup = !!disabled;\n });\n }\n\n // #endregion\n // #region Local Methods\n\n get headerId() {\n return `q2-optgroup-header-${this.guid}`;\n }\n\n get options() {\n return Array.from(this.hostElement.querySelectorAll('q2-option'));\n }\n\n setHidden = () => {\n this.hidden = this.options.every(opt => opt.hidden \|\| opt._multiSelectHidden);\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <div\n class=\"q2-optgroup-container\"\n hidden={this.hidden}\n aria-labelledby={this.headerId}\n role=\"group\"\n >\n <div\n class=\"q2-optgroup-header\"\n id={this.headerId}\n >\n {(this.label && loc(this.label)) \|\| ''}\n </div>\n <div class=\"q2-optgroup-options\">\n <slot />\n </div>\n </div>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":";;;;AAAA,MAAM,aAAa,GAAG,4hDAA4hD;;MCUriD,UAAU,GAAA,MAAA;AADvB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAII,QAAA,IAAI,CAAA,IAAA,GAAW,UAAU,EAAE;;;AAa3B,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;;;;AAOvB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AA8CzB,QAAA,IAAS,CAAA,SAAA,GAAG,MAAK;YACb,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,IAAI,GAAG,CAAC,MAAM,IAAI,GAAG,CAAC,kBAAkB,CAAC;AACjF,SAAC;AA2BJ;;;IAlEG,oBAAoB,GAAA;;QAChB,CAAA,EAAA,GAAA,IAAI,CAAC,gBAAgB,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,EAAE;AACnC,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI;;IAGhC,iBAAiB,GAAA;AACb,QAAA,gBAAgB,CAAC,IAAI,CAAC,WAAW,EAAE,iDAAiD,CAAC;QACrF,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC;QACrD,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACxF,QAAA,IAAI,CAAC,gBAAgB,GAAG,QAAQ;;QAGhC,IAAI,CAAC,SAAS,EAAE;AAChB,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC;;;;AAOvC,IAAA,eAAe,CAAC,QAAiB,EAAA;AAC7B,QAAA,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,IAAG;AACvB,YAAA,GAAG,CAAC,aAAa,GAAG,CAAC,CAAC,QAAQ;AAClC,SAAC,CAAC;;;;AAMN,IAAA,IAAI,QAAQ,GAAA;AACR,QAAA,OAAO,CAAsB,mBAAA,EAAA,IAAI,CAAC,IAAI,EAAE;;AAG5C,IAAA,IAAI,OAAO,GAAA;AACP,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC;;;;IAUrE,MAAM,GAAA;QACF,QACI,CACI,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAC7B,MAAM,EAAE,IAAI,CAAC,MAAM,qBACF,IAAI,CAAC,QAAQ,EAC9B,IAAI,EAAC,OAAO,EAAA,EAEZ,CACI,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAC1B,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAA,EAEhB,CAAC,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CACpC,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAA,EAC5B,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACN,CACJ;;;;;;;;;;;"}