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-section.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-section.entry.esm.js","sources":["src/components/q2-section/q2-section.scss?tag=q2-section&encapsulation=shadow","src/components/q2-section/q2-section.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions.scss';\n\n:host {\n display: block;\n background: var-list(\n --tct-section-background,\n var-prefixer(section-background-color),\n var-prefixer(section-bg),\n --app-white,\n #ffffff\n );\n color: var-list(var-prefixer(section-font-color), --t-text, #4d4d4d);\n border-radius: var-list(var-prefixer(section-border-radius), --app-border-radius-1, 4px);\n margin: var-list(var-prefixer(section-margin), --app-scale-3x, 15px);\n border-width: var-list(--tct-section-border-width, 0);\n border-style: var-list(--tct-section-border-style, solid);\n border-color: var-list(--tct-section-border-color, none);\n\n @media screen and (max-width: 767px) {\n --comp-default-margin: var(--app-scale-3x, 15px) 0;\n margin: var-list(var-prefixer(section-margin), --comp-default-margin);\n }\n\n @media print {\n --comp-default-print-margin: var(--app-scale-3x, 15px) 0;\n margin: var-list(--tct-section-print-margin, --comp-default-print-margin);\n }\n}\n\n.wrapper {\n --comp-tween: #{var-list(var-prefixer(section-tween), --app-tween-1, unquote('0.2s ease'))};\n --comp-default-wrapper-padding: var(--app-scale-1x, 5px) 0;\n display: block;\n padding: var-list(var-prefixer(section-wrapper-padding), --comp-default-wrapper-padding);\n\n &:hover {\n box-shadow: var-list(var-prefixer(section-wrapper-hover-box-shadow), inherit);\n }\n\n :host([collapsible]) & {\n --comp-tween: #{var-list(var-prefixer(section-tween), --app-tween-2, unquote('0.4s ease'))};\n }\n}\n\nheader {\n --comp-default-header-padding: 0 var(--app-scale-3x, 15px);\n padding: var-list(var-prefixer(section-header-padding), --comp-default-header-padding);\n display: flex;\n\n @media print {\n padding: var-list(--tct-section-header-print-padding, 0);\n }\n\n &.has-header {\n min-height: var-list(var-prefixer(section-header-min-height), 44px);\n }\n}\n\n.header-content {\n flex: 1 1 100%;\n min-width: 0;\n align-self: center;\n\n :host([collapsible]) & {\n cursor: pointer;\n }\n}\n\n.title {\n margin: var-list(--tct-section-title-margin, 0);\n font-size: var-list(--tct-section-title-font-size, 20px);\n font-weight: var-list(--tct-section-title-font-weight, 600);\n text-transform: var-list(--tct-section-title-text-transform, none);\n letter-spacing: var-list(--tct-section-title-letter-spacing, inherit);\n}\n\nq2-icon {\n transition: transform var(--comp-tween);\n\n :host(:not([expanded])) &,\n :host([expanded='false']) & {\n transform: rotate(180deg);\n }\n}\n\n.content-wrapper {\n height: auto;\n\n &.is-closed {\n display: none;\n overflow: hidden;\n }\n\n &.is-transitioning {\n overflow: hidden;\n }\n\n :host([collapsible]) & {\n transition: height var(--comp-tween);\n }\n}\n\n.content {\n --comp-default-content-padding: var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);\n padding: var-list(var-prefixer(section-content-padding), --comp-default-content-padding);\n\n @media print {\n padding: var-list(--tct-section-content-print-padding, 0);\n }\n\n &:focus {\n box-shadow: none;\n }\n\n :host([collapsible]) :host(:not([expanded])) & {\n visibility: hidden;\n }\n}\n\nq2-btn {\n --tct-btn-icon-hover-background: #{var-list(--tct-section-btn-hover-background, --app-gray-l3, #f2f2f2)};\n --tct-icon-stroke-primary: #{var-list(--tct-section-btn-icon-stroke-primary, --app-gray, #747474)};\n --tct-icon-stroke-secondary: #{var-list(--tct-section-btn-icon-stroke-secondary, --app-gray, #747474)};\n}\n","import {\n Component,\n ComponentInterface,\n Prop,\n Element,\n Listen,\n State,\n Watch,\n h,\n Event,\n EventEmitter,\n Method,\n} from '@stencil/core';\nimport { isEventFromElement, loc, nextPaint, overrideFocus, resizeIframe } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/*\n @name Section\n * @category Display\n * @summary Use for grouping related content with a header and optional collapse.\n * @slot q2-section-header - An optional slot to display a custom header.\n /\n@Component({ tag: 'q2-section', shadow: true, styleUrl: 'q2-section.scss' })\nexport class Q2Section implements ComponentInterface {\n // #region Own Properties\n\n contentContainer: HTMLDivElement;\n contentId: string = 'content';\n contentSlot: HTMLSlotElement;\n contentSlotMutationObserver: MutationObserver;\n headerSlot: HTMLSlotElement;\n headerSlotMutationObserver: MutationObserver;\n headerSlotWrapper: HTMLDivElement;\n resizerFn: NodeJS.Timeout \| undefined;\n titleId: string = 'title';\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 contentHeight: string;\n\n @State()\n hasYieldedHeader: boolean = false;\n\n @State()\n hideContent: boolean = false;\n\n // #endregion\n // #region Public Property API\n\n /* Determines if the section is collapsible. /\n @Prop({ reflect: true })\n collapsible: boolean;\n\n /* Indicates if the `q2-section` is in an expanded state or not. /\n @Prop({ reflect: true, mutable: true })\n expanded: boolean;\n\n /\n The text to display above the `q2-section`. Renders as an `<h2>` element.\n \n It is also used to provided an `aria-label` for the toggle button when the component is collapsible.\n \n @warning\n * If you are providing a custom header, setting this property is still strongly encouraged for the purposes of\n * accessibility.\n /\n @Prop({ reflect: true })\n label: string;\n\n /* Determines if the collapse chevron icon should show in the `q2-section` header. /\n @Prop({ reflect: true })\n noCollapseIcon: boolean;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the section is expanded or collapsed.\n * @legacyEvent\n * @deprecated Use 'tctChange' instead\n /\n @Event()\n change: EventEmitter<{ expanded: boolean }>;\n\n /\n Emitted when the section is expanded or collapsed.\n * @legacyEvent\n /\n @Event()\n tctChange: EventEmitter<{ expanded: boolean }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.removeHeaderSlotListener();\n this.removeContentSlotListener();\n }\n\n componentWillLoad() {\n this.onHeaderSlotChange();\n const { collapsible, expanded } = this;\n this.contentHeight = collapsible && expanded ? undefined : '0px';\n this.hideContent = !expanded;\n }\n\n componentDidLoad() {\n this.addHeaderSlotListener();\n this.addContentSlotListener();\n overrideFocus(this.hostElement);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n defaultChangeHandler(event: CustomEvent) {\n if (event.target === this.hostElement && !this.hostElement.onchange && !!event.detail) {\n this.expanded = event.detail.expanded;\n }\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.contentContainer.focus();\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n A test method to collapse section.\n \n @testOnly\n /\n @Method()\n async collapse() {\n if (!this.collapsible \|\| !this.expanded) return;\n const btn = this.hostElement.shadowRoot.querySelector('[test-id=\"toggleButton\"]');\n (btn as HTMLQ2BtnElement)?.click();\n }\n\n /\n A test method to expand section.\n \n @testOnly\n */\n @Method()\n async expand() {\n if (!this.collapsible \|\| this.expanded) return;\n const btn = this.hostElement.shadowRoot.querySelector('[test-id=\"toggleButton\"]');\n (btn as HTMLQ2BtnElement)?.click();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('collapsible')\n collapsibleObserver() {\n this.contentHeight = this.currentHeight;\n }\n\n @Watch('expanded')\n async expandedObserver(expanded: boolean) {\n this.clearResizeInterval();\n this.resizerFn = setInterval(resizeIframe, 5);\n\n if (expanded) {\n this.expandSection();\n } else {\n this.collapseSection();\n }\n }\n\n // #endregion\n // #region Local Methods\n\n get contentContainerHeight() {\n return `${this.contentContainer.offsetHeight \|\| 0}px`;\n }\n\n get currentHeight() {\n const { collapsible, expanded } = this;\n if (!collapsible) {\n return null;\n } else if (expanded) {\n return this.contentContainerHeight;\n } else {\n return '0';\n }\n }\n\n addContentSlotListener = () => {\n if (this.contentSlot) {\n this.contentSlot.addEventListener('slotchange', resizeIframe);\n return;\n }\n\n const observer = new MutationObserver(resizeIframe);\n observer.observe(this.contentContainer, { childList: true, subtree: true });\n this.contentSlotMutationObserver = observer;\n };\n\n addHeaderSlotListener = () => {\n if (this.headerSlot) {\n this.headerSlot.addEventListener('slotchange', this.onHeaderSlotChange);\n return;\n }\n\n const observer = new MutationObserver(this.onHeaderSlotChange);\n observer.observe(this.headerSlotWrapper, { childList: true });\n this.headerSlotMutationObserver = observer;\n };\n\n clearResizeInterval = () => {\n this.resizerFn && clearInterval(this.resizerFn);\n };\n\n async collapseSection() {\n this.contentHeight = this.contentContainerHeight;\n await nextPaint(() => {\n this.contentHeight = this.currentHeight;\n });\n }\n\n async expandSection() {\n this.hideContent = false;\n await nextPaint(() => {\n this.contentHeight = this.currentHeight;\n });\n }\n\n onHeaderClick = () => {\n mirrorEmit(this, ['change', 'tctChange'], {\n expanded: !this.expanded,\n });\n };\n\n onHeaderSlotChange = () => {\n const hasSlotContent = !!this.hostElement.querySelector('[slot=\"q2-section-header\"]');\n\n if (this.hasYieldedHeader !== hasSlotContent) {\n this.hasYieldedHeader = !!hasSlotContent;\n }\n };\n\n onTransitionEnd = () => {\n if (this.expanded) {\n this.contentHeight = undefined;\n } else {\n this.hideContent = true;\n }\n\n setTimeout(() => {\n // This gives enough time for all values to get passed over\n // Previously, the interval was never cleared and the fn was called indefinitely then filtered\n // Will revisit in TCT-599\n this.clearResizeInterval();\n }, 1000);\n };\n\n removeContentSlotListener = () => {\n if (this.contentSlot) {\n this.contentSlot.removeEventListener('slotchange', resizeIframe);\n return;\n }\n this.contentSlotMutationObserver?.disconnect();\n };\n\n removeHeaderSlotListener = () => {\n if (this.headerSlot) {\n this.headerSlot.removeEventListener('slotchange', this.onHeaderSlotChange);\n return;\n }\n\n this.headerSlotMutationObserver?.disconnect();\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n const hasHeader = this.label \|\| this.hasYieldedHeader;\n const wrapperClasses = ['content-wrapper'];\n const { collapsible, hideContent, contentHeight } = this;\n if (collapsible) {\n if (hideContent) wrapperClasses.push('is-closed');\n else if (contentHeight) wrapperClasses.push('is-transitioning');\n }\n\n const showDefaultHeader = !this.hasYieldedHeader && !!this.label;\n\n return (\n <section class=\"wrapper\">\n <header class={hasHeader ? 'has-header' : ''}>\n <div\n class=\"header-content\"\n id={this.titleId}\n onClick={this.collapsible && this.onHeaderClick}\n >\n {showDefaultHeader && <h2 class=\"title\">{loc(this.label)}</h2>}\n <div\n ref={el => (this.headerSlotWrapper = el)}\n class=\"header-slot-wrapper\"\n >\n <slot\n ref={(el: HTMLSlotElement) => (this.headerSlot = el)}\n name=\"q2-section-header\"\n />\n </div>\n </div>\n {this.collapsible && !this.noCollapseIcon && (\n <q2-btn\n label={loc(this.label \|\| 'tecton.element.section.defaultToggleLabel')}\n ariaExpanded={`${!!this.expanded}`}\n ariaControls={this.contentId}\n test-id=\"toggleButton\"\n hide-label\n onClick={this.onHeaderClick}\n >\n <q2-icon type=\"chevron-up\" />\n </q2-btn>\n )}\n </header>\n <div\n class={wrapperClasses.join(' ')}\n id={this.contentId}\n aria-labelledby={this.titleId}\n role=\"region\"\n onTransitionEnd={this.onTransitionEnd}\n style={\n this.collapsible && {\n height: this.contentHeight,\n }\n }\n >\n <div\n ref={el => (this.contentContainer = el)}\n class=\"content\"\n tabindex=\"-1\"\n >\n <slot ref={(el: HTMLSlotElement) => (this.contentSlot = el)} />\n </div>\n </div>\n </section>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":";;;;AAAA,MAAM,YAAY,GAAG,+3HAA+3H;;MCuBv4H,SAAS,GAAA,MAAA;AADtB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAKI,QAAA,IAAS,CAAA,SAAA,GAAW,SAAS;AAO7B,QAAA,IAAO,CAAA,OAAA,GAAW,OAAO;AAezB,QAAA,IAAgB,CAAA,gBAAA,GAAY,KAAK;AAGjC,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAqJ5B,QAAA,IAAsB,CAAA,sBAAA,GAAG,MAAK;AAC1B,YAAA,IAAI,IAAI,CAAC,WAAW,EAAE;gBAClB,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,YAAY,EAAE,YAAY,CAAC;gBAC7D;;AAGJ,YAAA,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,YAAY,CAAC;AACnD,YAAA,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC3E,YAAA,IAAI,CAAC,2BAA2B,GAAG,QAAQ;AAC/C,SAAC;AAED,QAAA,IAAqB,CAAA,qBAAA,GAAG,MAAK;AACzB,YAAA,IAAI,IAAI,CAAC,UAAU,EAAE;gBACjB,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,kBAAkB,CAAC;gBACvE;;YAGJ,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,kBAAkB,CAAC;AAC9D,YAAA,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AAC7D,YAAA,IAAI,CAAC,0BAA0B,GAAG,QAAQ;AAC9C,SAAC;AAED,QAAA,IAAmB,CAAA,mBAAA,GAAG,MAAK;YACvB,IAAI,CAAC,SAAS,IAAI,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC;AACnD,SAAC;AAgBD,QAAA,IAAa,CAAA,aAAA,GAAG,MAAK;YACjB,UAAU,CAAC,IAAI,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,EAAE;AACtC,gBAAA,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ;AAC3B,aAAA,CAAC;AACN,SAAC;AAED,QAAA,IAAkB,CAAA,kBAAA,GAAG,MAAK;AACtB,YAAA,MAAM,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,4BAA4B,CAAC;AAErF,YAAA,IAAI,IAAI,CAAC,gBAAgB,KAAK,cAAc,EAAE;AAC1C,gBAAA,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,cAAc;;AAEhD,SAAC;AAED,QAAA,IAAe,CAAA,eAAA,GAAG,MAAK;AACnB,YAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACf,gBAAA,IAAI,CAAC,aAAa,GAAG,SAAS;;iBAC3B;AACH,gBAAA,IAAI,CAAC,WAAW,GAAG,IAAI;;YAG3B,UAAU,CAAC,MAAK;;;;gBAIZ,IAAI,CAAC,mBAAmB,EAAE;aAC7B,EAAE,IAAI,CAAC;AACZ,SAAC;AAED,QAAA,IAAyB,CAAA,yBAAA,GAAG,MAAK;;AAC7B,YAAA,IAAI,IAAI,CAAC,WAAW,EAAE;gBAClB,IAAI,CAAC,WAAW,CAAC,mBAAmB,CAAC,YAAY,EAAE,YAAY,CAAC;gBAChE;;YAEJ,CAAA,EAAA,GAAA,IAAI,CAAC,2BAA2B,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,EAAE;AAClD,SAAC;AAED,QAAA,IAAwB,CAAA,wBAAA,GAAG,MAAK;;AAC5B,YAAA,IAAI,IAAI,CAAC,UAAU,EAAE;gBACjB,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,kBAAkB,CAAC;gBAC1E;;YAGJ,CAAA,EAAA,GAAA,IAAI,CAAC,0BAA0B,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,EAAE;AACjD,SAAC;AAyEJ;;;IAhQG,oBAAoB,GAAA;QAChB,IAAI,CAAC,wBAAwB,EAAE;QAC/B,IAAI,CAAC,yBAAyB,EAAE;;IAGpC,iBAAiB,GAAA;QACb,IAAI,CAAC,kBAAkB,EAAE;AACzB,QAAA,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,IAAI;AACtC,QAAA,IAAI,CAAC,aAAa,GAAG,WAAW,IAAI,QAAQ,GAAG,SAAS,GAAG,KAAK;AAChE,QAAA,IAAI,CAAC,WAAW,GAAG,CAAC,QAAQ;;IAGhC,gBAAgB,GAAA;QACZ,IAAI,CAAC,qBAAqB,EAAE;QAC5B,IAAI,CAAC,sBAAsB,EAAE;AAC7B,QAAA,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC;;;;AAOnC,IAAA,oBAAoB,CAAC,KAAkB,EAAA;QACnC,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,EAAE;YACnF,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,QAAQ;;;AAK7C,IAAA,aAAa,CAAC,KAAiB,EAAA;QAC3B,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;YAAE;AAClD,QAAA,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE;;;;AAMjC;;;;AAIG;AAEH,IAAA,MAAM,QAAQ,GAAA;QACV,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE;AACzC,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,0BAA0B,CAAC;AAChF,QAAA,GAAwB,aAAxB,GAAG,KAAA,MAAA,GAAA,MAAA,GAAH,GAAG,CAAuB,KAAK,EAAE;;AAGtC;;;;AAIG;AAEH,IAAA,MAAM,MAAM,GAAA;AACR,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,QAAQ;YAAE;AACxC,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,0BAA0B,CAAC;AAChF,QAAA,GAAwB,aAAxB,GAAG,KAAA,MAAA,GAAA,MAAA,GAAH,GAAG,CAAuB,KAAK,EAAE;;;;IAOtC,mBAAmB,GAAA;AACf,QAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa;;IAI3C,MAAM,gBAAgB,CAAC,QAAiB,EAAA;QACpC,IAAI,CAAC,mBAAmB,EAAE;QAC1B,IAAI,CAAC,SAAS,GAAG,WAAW,CAAC,YAAY,EAAE,CAAC,CAAC;QAE7C,IAAI,QAAQ,EAAE;YACV,IAAI,CAAC,aAAa,EAAE;;aACjB;YACH,IAAI,CAAC,eAAe,EAAE;;;;;AAO9B,IAAA,IAAI,sBAAsB,GAAA;QACtB,OAAO,CAAA,EAAG,IAAI,CAAC,gBAAgB,CAAC,YAAY,IAAI,CAAC,CAAA,EAAA,CAAI;;AAGzD,IAAA,IAAI,aAAa,GAAA;AACb,QAAA,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,IAAI;QACtC,IAAI,CAAC,WAAW,EAAE;AACd,YAAA,OAAO,IAAI;;aACR,IAAI,QAAQ,EAAE;YACjB,OAAO,IAAI,CAAC,sBAAsB;;aAC/B;AACH,YAAA,OAAO,GAAG;;;AA8BlB,IAAA,MAAM,eAAe,GAAA;AACjB,QAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,sBAAsB;QAChD,MAAM,SAAS,CAAC,MAAK;AACjB,YAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa;AAC3C,SAAC,CAAC;;AAGN,IAAA,MAAM,aAAa,GAAA;AACf,QAAA,IAAI,CAAC,WAAW,GAAG,KAAK;QACxB,MAAM,SAAS,CAAC,MAAK;AACjB,YAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa;AAC3C,SAAC,CAAC;;;;IAoDN,MAAM,GAAA;QACF,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,gBAAgB;AACrD,QAAA,MAAM,cAAc,GAAG,CAAC,iBAAiB,CAAC;QAC1C,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,aAAa,EAAE,GAAG,IAAI;QACxD,IAAI,WAAW,EAAE;AACb,YAAA,IAAI,WAAW;AAAE,gBAAA,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC;AAC5C,iBAAA,IAAI,aAAa;AAAE,gBAAA,cAAc,CAAC,IAAI,CAAC,kBAAkB,CAAC;;AAGnE,QAAA,MAAM,iBAAiB,GAAG,CAAC,IAAI,CAAC,gBAAgB,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK;AAEhE,QAAA,QACI,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,KAAK,EAAC,SAAS,EAAA,EACpB,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,SAAS,GAAG,YAAY,GAAG,EAAE,EAAA,EACxC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,KAAK,EAAC,gBAAgB,EACtB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,OAAO,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,aAAa,EAAA,EAE9C,iBAAiB,IAAI,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAC,OAAO,EAAA,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAM,EAC9D,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,iBAAiB,GAAG,EAAE,CAAC,EACxC,KAAK,EAAC,qBAAqB,EAAA,EAE3B,CACI,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,CAAC,EAAmB,MAAM,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,EACpD,IAAI,EAAC,mBAAmB,EAAA,CAC1B,CACA,CACJ,EACL,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,cAAc,KACrC,+DACI,KAAK,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,2CAA2C,CAAC,EACrE,YAAY,EAAE,CAAA,EAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAE,CAAA,EAClC,YAAY,EAAE,IAAI,CAAC,SAAS,aACpB,cAAc,EAAA,YAAA,EAAA,IAAA,EAEtB,OAAO,EAAE,IAAI,CAAC,aAAa,EAAA,EAE3B,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,YAAY,EAAG,CAAA,CACxB,CACZ,CACI,EACT,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,EAC/B,EAAE,EAAE,IAAI,CAAC,SAAS,qBACD,IAAI,CAAC,OAAO,EAC7B,IAAI,EAAC,QAAQ,EACb,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,KAAK,EACD,IAAI,CAAC,WAAW,IAAI;gBAChB,MAAM,EAAE,IAAI,CAAC,aAAa;AAC7B,aAAA,EAAA,EAGL,CACI,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC,EACvC,KAAK,EAAC,SAAS,EACf,QAAQ,EAAC,IAAI,EAAA,EAEb,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,GAAG,EAAE,CAAC,EAAmB,MAAM,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,EAAA,CAAI,CAC7D,CACJ,CACA;;;;;;;;;;;;"}
1	+ {"version":3,"file":"q2-section.entry.esm.js","sources":["src/components/q2-section/q2-section.scss?tag=q2-section&encapsulation=shadow","src/components/q2-section/q2-section.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions.scss';\n@import './variables';\n\n:host {\n display: block;\n background: var-list(\n --tct-section-background,\n var-prefixer(section-background-color),\n var-prefixer(section-bg),\n --app-white,\n #ffffff\n );\n color: var-list(var-prefixer(section-font-color), --t-text, #4d4d4d);\n border-radius: var-list(var-prefixer(section-border-radius), --app-border-radius-1, 4px);\n margin: var-list(var-prefixer(section-margin), --app-scale-3x, 15px);\n border-width: var-list(--tct-section-border-width, 0);\n border-style: var-list(--tct-section-border-style, solid);\n border-color: var-list(--tct-section-border-color, none);\n\n @media screen and (max-width: 767px) {\n --comp-default-margin: var(--app-scale-3x, 15px) 0;\n margin: var-list(var-prefixer(section-margin), --comp-default-margin);\n }\n\n @media print {\n --comp-default-print-margin: var(--app-scale-3x, 15px) 0;\n margin: var-list(--tct-section-print-margin, --comp-default-print-margin);\n }\n}\n\n.wrapper {\n --comp-tween: #{var-list(var-prefixer(section-tween), --app-tween-1, unquote('0.2s ease'))};\n --comp-default-wrapper-padding: var(--app-scale-1x, 5px) 0;\n display: block;\n padding: var-list(var-prefixer(section-wrapper-padding), --comp-default-wrapper-padding);\n\n &:hover {\n box-shadow: var-list(var-prefixer(section-wrapper-hover-box-shadow), inherit);\n }\n\n :host([collapsible]) & {\n --comp-tween: #{var-list(var-prefixer(section-tween), --app-tween-2, unquote('0.4s ease'))};\n }\n}\n\nheader {\n --comp-default-header-padding: 0 var(--app-scale-3x, 15px);\n padding: var-list(var-prefixer(section-header-padding), --comp-default-header-padding);\n display: flex;\n\n @media print {\n padding: var-list(--tct-section-header-print-padding, 0);\n }\n\n &.has-header {\n min-height: var-list(var-prefixer(section-header-min-height), 44px);\n }\n}\n\n.header-content {\n flex: 1 1 100%;\n min-width: 0;\n align-self: center;\n\n :host([collapsible]) & {\n cursor: pointer;\n }\n}\n\n.title {\n margin: var-list(--tct-section-title-margin, 0);\n font-size: var-list(--tct-section-title-font-size, 20px);\n font-weight: var-list(--tct-section-title-font-weight, 600);\n text-transform: var-list(--tct-section-title-text-transform, none);\n letter-spacing: var-list(--tct-section-title-letter-spacing, inherit);\n}\n\nq2-icon {\n transition: transform var(--comp-tween);\n\n :host(:not([expanded])) &,\n :host([expanded='false']) & {\n transform: rotate(180deg);\n }\n}\n\n.content-wrapper {\n height: auto;\n\n &.is-closed {\n display: none;\n overflow: hidden;\n }\n\n &.is-transitioning {\n overflow: hidden;\n }\n\n :host([collapsible]) & {\n transition: height var(--comp-tween);\n }\n}\n\n.content {\n --comp-default-content-padding: var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);\n padding: var-list(var-prefixer(section-content-padding), --comp-default-content-padding);\n\n @media print {\n padding: var-list(--tct-section-content-print-padding, 0);\n }\n\n &:focus {\n box-shadow: none;\n }\n\n :host([collapsible]) :host(:not([expanded])) & {\n visibility: hidden;\n }\n}\n\nq2-btn {\n --tct-btn-icon-hover-background: #{var-list(--tct-section-btn-hover-background, --app-gray-l3, #f2f2f2)};\n --tct-icon-stroke-primary: #{var-list(--tct-section-btn-icon-stroke-primary, --app-gray, #747474)};\n --tct-icon-stroke-secondary: #{var-list(--tct-section-btn-icon-stroke-secondary, --app-gray, #747474)};\n}\n","import {\n Component,\n ComponentInterface,\n Prop,\n Element,\n Listen,\n State,\n Watch,\n h,\n Event,\n EventEmitter,\n Method,\n} from '@stencil/core';\nimport { isEventFromElement, loc, nextPaint, overrideFocus, resizeIframe } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/*\n @name Section\n * @category Display\n * @summary Use for grouping related content with a header and optional collapse.\n * @slot q2-section-header - An optional slot to display a custom header.\n /\n@Component({ tag: 'q2-section', shadow: true, styleUrl: 'q2-section.scss' })\nexport class Q2Section implements ComponentInterface {\n // #region Own Properties\n\n contentContainer: HTMLDivElement;\n contentId: string = 'content';\n contentSlot: HTMLSlotElement;\n contentSlotMutationObserver: MutationObserver;\n headerSlot: HTMLSlotElement;\n headerSlotMutationObserver: MutationObserver;\n headerSlotWrapper: HTMLDivElement;\n resizerFn: NodeJS.Timeout \| undefined;\n titleId: string = 'title';\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 contentHeight: string;\n\n @State()\n hasYieldedHeader: boolean = false;\n\n @State()\n hideContent: boolean = false;\n\n // #endregion\n // #region Public Property API\n\n /* Determines if the section is collapsible. /\n @Prop({ reflect: true })\n collapsible: boolean;\n\n /* Indicates if the `q2-section` is in an expanded state or not. /\n @Prop({ reflect: true, mutable: true })\n expanded: boolean;\n\n /\n The text to display above the `q2-section`. Renders as an `<h2>` element.\n \n It is also used to provided an `aria-label` for the toggle button when the component is collapsible.\n \n @warning\n * If you are providing a custom header, setting this property is still strongly encouraged for the purposes of\n * accessibility.\n /\n @Prop({ reflect: true })\n label: string;\n\n /* Determines if the collapse chevron icon should show in the `q2-section` header. /\n @Prop({ reflect: true })\n noCollapseIcon: boolean;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the section is expanded or collapsed.\n * @legacyEvent\n * @deprecated Use 'tctChange' instead\n /\n @Event()\n change: EventEmitter<{ expanded: boolean }>;\n\n /\n Emitted when the section is expanded or collapsed.\n * @legacyEvent\n /\n @Event()\n tctChange: EventEmitter<{ expanded: boolean }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.removeHeaderSlotListener();\n this.removeContentSlotListener();\n }\n\n componentWillLoad() {\n this.onHeaderSlotChange();\n const { collapsible, expanded } = this;\n this.contentHeight = collapsible && expanded ? undefined : '0px';\n this.hideContent = !expanded;\n }\n\n componentDidLoad() {\n this.addHeaderSlotListener();\n this.addContentSlotListener();\n overrideFocus(this.hostElement);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n defaultChangeHandler(event: CustomEvent) {\n if (event.target === this.hostElement && !this.hostElement.onchange && !!event.detail) {\n this.expanded = event.detail.expanded;\n }\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.contentContainer.focus();\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n A test method to collapse section.\n \n @testOnly\n /\n @Method()\n async collapse() {\n if (!this.collapsible \|\| !this.expanded) return;\n const btn = this.hostElement.shadowRoot.querySelector('[test-id=\"toggleButton\"]');\n (btn as HTMLQ2BtnElement)?.click();\n }\n\n /\n A test method to expand section.\n \n @testOnly\n */\n @Method()\n async expand() {\n if (!this.collapsible \|\| this.expanded) return;\n const btn = this.hostElement.shadowRoot.querySelector('[test-id=\"toggleButton\"]');\n (btn as HTMLQ2BtnElement)?.click();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('collapsible')\n collapsibleObserver() {\n this.contentHeight = this.currentHeight;\n }\n\n @Watch('expanded')\n async expandedObserver(expanded: boolean) {\n this.clearResizeInterval();\n this.resizerFn = setInterval(resizeIframe, 5);\n\n if (expanded) {\n this.expandSection();\n } else {\n this.collapseSection();\n }\n }\n\n // #endregion\n // #region Local Methods\n\n get contentContainerHeight() {\n return `${this.contentContainer.offsetHeight \|\| 0}px`;\n }\n\n get currentHeight() {\n const { collapsible, expanded } = this;\n if (!collapsible) {\n return null;\n } else if (expanded) {\n return this.contentContainerHeight;\n } else {\n return '0';\n }\n }\n\n addContentSlotListener = () => {\n if (this.contentSlot) {\n this.contentSlot.addEventListener('slotchange', resizeIframe);\n return;\n }\n\n const observer = new MutationObserver(resizeIframe);\n observer.observe(this.contentContainer, { childList: true, subtree: true });\n this.contentSlotMutationObserver = observer;\n };\n\n addHeaderSlotListener = () => {\n if (this.headerSlot) {\n this.headerSlot.addEventListener('slotchange', this.onHeaderSlotChange);\n return;\n }\n\n const observer = new MutationObserver(this.onHeaderSlotChange);\n observer.observe(this.headerSlotWrapper, { childList: true });\n this.headerSlotMutationObserver = observer;\n };\n\n clearResizeInterval = () => {\n this.resizerFn && clearInterval(this.resizerFn);\n };\n\n async collapseSection() {\n this.contentHeight = this.contentContainerHeight;\n await nextPaint(() => {\n this.contentHeight = this.currentHeight;\n });\n }\n\n async expandSection() {\n this.hideContent = false;\n await nextPaint(() => {\n this.contentHeight = this.currentHeight;\n });\n }\n\n onHeaderClick = () => {\n mirrorEmit(this, ['change', 'tctChange'], {\n expanded: !this.expanded,\n });\n };\n\n onHeaderSlotChange = () => {\n const hasSlotContent = !!this.hostElement.querySelector('[slot=\"q2-section-header\"]');\n\n if (this.hasYieldedHeader !== hasSlotContent) {\n this.hasYieldedHeader = !!hasSlotContent;\n }\n };\n\n onTransitionEnd = () => {\n if (this.expanded) {\n this.contentHeight = undefined;\n } else {\n this.hideContent = true;\n }\n\n setTimeout(() => {\n // This gives enough time for all values to get passed over\n // Previously, the interval was never cleared and the fn was called indefinitely then filtered\n // Will revisit in TCT-599\n this.clearResizeInterval();\n }, 1000);\n };\n\n removeContentSlotListener = () => {\n if (this.contentSlot) {\n this.contentSlot.removeEventListener('slotchange', resizeIframe);\n return;\n }\n this.contentSlotMutationObserver?.disconnect();\n };\n\n removeHeaderSlotListener = () => {\n if (this.headerSlot) {\n this.headerSlot.removeEventListener('slotchange', this.onHeaderSlotChange);\n return;\n }\n\n this.headerSlotMutationObserver?.disconnect();\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n const hasHeader = this.label \|\| this.hasYieldedHeader;\n const wrapperClasses = ['content-wrapper'];\n const { collapsible, hideContent, contentHeight } = this;\n if (collapsible) {\n if (hideContent) wrapperClasses.push('is-closed');\n else if (contentHeight) wrapperClasses.push('is-transitioning');\n }\n\n const showDefaultHeader = !this.hasYieldedHeader && !!this.label;\n\n return (\n <section class=\"wrapper\">\n <header class={hasHeader ? 'has-header' : ''}>\n <div\n class=\"header-content\"\n id={this.titleId}\n onClick={this.collapsible && this.onHeaderClick}\n >\n {showDefaultHeader && <h2 class=\"title\">{loc(this.label)}</h2>}\n <div\n ref={el => (this.headerSlotWrapper = el)}\n class=\"header-slot-wrapper\"\n >\n <slot\n ref={(el: HTMLSlotElement) => (this.headerSlot = el)}\n name=\"q2-section-header\"\n />\n </div>\n </div>\n {this.collapsible && !this.noCollapseIcon && (\n <q2-btn\n label={loc(this.label \|\| 'tecton.element.section.defaultToggleLabel')}\n ariaExpanded={`${!!this.expanded}`}\n ariaControls={this.contentId}\n test-id=\"toggleButton\"\n hide-label\n onClick={this.onHeaderClick}\n >\n <q2-icon type=\"chevron-up\" />\n </q2-btn>\n )}\n </header>\n <div\n class={wrapperClasses.join(' ')}\n id={this.contentId}\n aria-labelledby={this.titleId}\n role=\"region\"\n onTransitionEnd={this.onTransitionEnd}\n style={\n this.collapsible && {\n height: this.contentHeight,\n }\n }\n >\n <div\n ref={el => (this.contentContainer = el)}\n class=\"content\"\n tabindex=\"-1\"\n >\n <slot ref={(el: HTMLSlotElement) => (this.contentSlot = el)} />\n </div>\n </div>\n </section>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":"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"}

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

@@ -1,6 +1,6 @@
-import { r as t, c as e, h as i, g as n } from "./index-CGkHOjh1.js";
+import { r as t, c as e, h as i, g as a } from "./index-CGkHOjh1.js";
-import { a, o as s, i as r, n as o, l as c } from "./index-C4PILj1_.js";
+import { a as n, o as s, i as r, n as o, l as c } from "./index-C5gj0T_3.js";
 import { m as d } from "./mirror-emit-DUjY_ucm.js";
@@ -17,10 +17,10 @@ const p = class {
     this.hideContent = false;
     this.addContentSlotListener = () => {
       if (this.contentSlot) {
-        this.contentSlot.addEventListener("slotchange", a);
+        this.contentSlot.addEventListener("slotchange", n);
         return;
       }
-      const t = new MutationObserver(a);
+      const t = new MutationObserver(n);
       t.observe(this.contentContainer, {
         childList: true,
         subtree: true
@@ -68,7 +68,7 @@ const p = class {
     this.removeContentSlotListener = () => {
       var t;
       if (this.contentSlot) {
-        this.contentSlot.removeEventListener("slotchange", a);
+        this.contentSlot.removeEventListener("slotchange", n);
         return;
       }
       (t = this.contentSlotMutationObserver) === null || t === void 0 ? void 0 : t.disconnect();
@@ -138,7 +138,7 @@ const p = class {
   }
   async expandedObserver(t) {
     this.clearResizeInterval();
-    this.resizerFn = setInterval(a, 5);
+    this.resizerFn = setInterval(n, 5);
     if (t) {
       this.expandSection();
     } else {
@@ -177,35 +177,35 @@ const p = class {
   render() {
     const t = this.label || this.hasYieldedHeader;
     const e = [ "content-wrapper" ];
-    const {collapsible: n, hideContent: a, contentHeight: s} = this;
-    if (n) {
-      if (a) e.push("is-closed"); else if (s) e.push("is-transitioning");
+    const {collapsible: a, hideContent: n, contentHeight: s} = this;
+    if (a) {
+      if (n) e.push("is-closed"); else if (s) e.push("is-transitioning");
     }
     const r = !this.hasYieldedHeader && !!this.label;
     return i("section", {
-      key: "ea31fa3fcb95aeba58b116111a8de973acfc9dd8",
+      key: "a8febda26aacf75f431b73fbde550fe48464f795",
       class: "wrapper"
     }, i("header", {
-      key: "599e2c5d97b7e1a8e82d4f67477feaea39bf44a4",
+      key: "cfa6b6b4b5877bbb29a8378b2b6f3f2712473800",
       class: t ? "has-header" : ""
     }, i("div", {
-      key: "ec33d8f308ddc45636df221e103972abb4c743e4",
+      key: "08a21351630af94e43ece1bb43ec02da1065870e",
       class: "header-content",
       id: this.titleId,
       onClick: this.collapsible && this.onHeaderClick
     }, r && i("h2", {
-      key: "c16de7c1c6fb720b4bfa43a8a1768480e7d9df0d",
+      key: "f03e8e974dad67995d0f75e284d9aa2ff4844be9",
       class: "title"
     }, c(this.label)), i("div", {
-      key: "3ff11259f114b4ca6c6dbd2c05fb35d5f270fb97",
+      key: "1bcecedcd8bf29a01c0267c6e4dfb5c80175b79a",
       ref: t => this.headerSlotWrapper = t,
       class: "header-slot-wrapper"
     }, i("slot", {
-      key: "47b372f49b184db9ecb4aa29a60545f6ec3e1f6b",
+      key: "13058e098cb3bd53220ba3f52dc7cb7045802dde",
       ref: t => this.headerSlot = t,
       name: "q2-section-header"
     }))), this.collapsible && !this.noCollapseIcon && i("q2-btn", {
-      key: "7b7f6e91877c354860d16ec95d39c1cd78ccf48b",
+      key: "141e18cc76c195a6a9695138a7c1565df73c7173",
       label: c(this.label || "tecton.element.section.defaultToggleLabel"),
       ariaExpanded: `${!!this.expanded}`,
       ariaControls: this.contentId,
@@ -213,10 +213,10 @@ const p = class {
       "hide-label": true,
       onClick: this.onHeaderClick
     }, i("q2-icon", {
-      key: "39c6913339322a55626fba6b72b2305654821b34",
+      key: "13e830f8f773ce4a6d548679f047755cd1c2b0c4",
       type: "chevron-up"
     }))), i("div", {
-      key: "0212368798fdf64763de5f8507dc5cb1e7ca307f",
+      key: "6b28ad8fe4a7e058c8ea79abcfaf205a92e582fa",
       class: e.join(" "),
       id: this.contentId,
       "aria-labelledby": this.titleId,
@@ -226,17 +226,17 @@ const p = class {
         height: this.contentHeight
       }
     }, i("div", {
-      key: "32e77e59068e9117454cc158998af16c18b7eda5",
+      key: "5b8635606705cb71f74db7765efd8d44a66f88fb",
       ref: t => this.contentContainer = t,
       class: "content",
       tabindex: "-1"
     }, i("slot", {
-      key: "770db19e692eaafb752ec9109de89d52f4375dca",
+      key: "c99160718c0309eac5739ce3039afa742716a819",
       ref: t => this.contentSlot = t
     }))));
   }
   get hostElement() {
-    return n(this);
+    return a(this);
   }
   static get watchers() {
     return {

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

	@@ -1 +1 @@
1	- {"version":3,"names":["q2SectionCss","Q2Section","constructor","hostRef","this","contentId","titleId","hasYieldedHeader","hideContent","addContentSlotListener","contentSlot","addEventListener","resizeIframe","observer","MutationObserver","observe","contentContainer","childList","subtree","contentSlotMutationObserver","addHeaderSlotListener","headerSlot","onHeaderSlotChange","headerSlotWrapper","headerSlotMutationObserver","clearResizeInterval","resizerFn","clearInterval","onHeaderClick","mirrorEmit","expanded","hasSlotContent","hostElement","querySelector","onTransitionEnd","contentHeight","undefined","setTimeout","removeContentSlotListener","removeEventListener","_a","disconnect","removeHeaderSlotListener","disconnectedCallback","componentWillLoad","collapsible","componentDidLoad","overrideFocus","defaultChangeHandler","event","target","onchange","detail","delegateFocus","isEventFromElement","focus","collapse","btn","shadowRoot","click","expand","collapsibleObserver","currentHeight","expandedObserver","setInterval","expandSection","collapseSection","contentContainerHeight","offsetHeight","nextPaint","render","hasHeader","label","wrapperClasses","push","showDefaultHeader","h","key","class","id","onClick","loc","ref","el","name","noCollapseIcon","ariaExpanded","ariaControls","type","join","role","style","height","tabindex"],"sources":["src/components/q2-section/q2-section.scss?tag=q2-section&encapsulation=shadow","src/components/q2-section/q2-section.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions.scss';\n\n:host {\n display: block;\n background: var-list(\n --tct-section-background,\n var-prefixer(section-background-color),\n var-prefixer(section-bg),\n --app-white,\n #ffffff\n );\n color: var-list(var-prefixer(section-font-color), --t-text, #4d4d4d);\n border-radius: var-list(var-prefixer(section-border-radius), --app-border-radius-1, 4px);\n margin: var-list(var-prefixer(section-margin), --app-scale-3x, 15px);\n border-width: var-list(--tct-section-border-width, 0);\n border-style: var-list(--tct-section-border-style, solid);\n border-color: var-list(--tct-section-border-color, none);\n\n @media screen and (max-width: 767px) {\n --comp-default-margin: var(--app-scale-3x, 15px) 0;\n margin: var-list(var-prefixer(section-margin), --comp-default-margin);\n }\n\n @media print {\n --comp-default-print-margin: var(--app-scale-3x, 15px) 0;\n margin: var-list(--tct-section-print-margin, --comp-default-print-margin);\n }\n}\n\n.wrapper {\n --comp-tween: #{var-list(var-prefixer(section-tween), --app-tween-1, unquote('0.2s ease'))};\n --comp-default-wrapper-padding: var(--app-scale-1x, 5px) 0;\n display: block;\n padding: var-list(var-prefixer(section-wrapper-padding), --comp-default-wrapper-padding);\n\n &:hover {\n box-shadow: var-list(var-prefixer(section-wrapper-hover-box-shadow), inherit);\n }\n\n :host([collapsible]) & {\n --comp-tween: #{var-list(var-prefixer(section-tween), --app-tween-2, unquote('0.4s ease'))};\n }\n}\n\nheader {\n --comp-default-header-padding: 0 var(--app-scale-3x, 15px);\n padding: var-list(var-prefixer(section-header-padding), --comp-default-header-padding);\n display: flex;\n\n @media print {\n padding: var-list(--tct-section-header-print-padding, 0);\n }\n\n &.has-header {\n min-height: var-list(var-prefixer(section-header-min-height), 44px);\n }\n}\n\n.header-content {\n flex: 1 1 100%;\n min-width: 0;\n align-self: center;\n\n :host([collapsible]) & {\n cursor: pointer;\n }\n}\n\n.title {\n margin: var-list(--tct-section-title-margin, 0);\n font-size: var-list(--tct-section-title-font-size, 20px);\n font-weight: var-list(--tct-section-title-font-weight, 600);\n text-transform: var-list(--tct-section-title-text-transform, none);\n letter-spacing: var-list(--tct-section-title-letter-spacing, inherit);\n}\n\nq2-icon {\n transition: transform var(--comp-tween);\n\n :host(:not([expanded])) &,\n :host([expanded='false']) & {\n transform: rotate(180deg);\n }\n}\n\n.content-wrapper {\n height: auto;\n\n &.is-closed {\n display: none;\n overflow: hidden;\n }\n\n &.is-transitioning {\n overflow: hidden;\n }\n\n :host([collapsible]) & {\n transition: height var(--comp-tween);\n }\n}\n\n.content {\n --comp-default-content-padding: var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);\n padding: var-list(var-prefixer(section-content-padding), --comp-default-content-padding);\n\n @media print {\n padding: var-list(--tct-section-content-print-padding, 0);\n }\n\n &:focus {\n box-shadow: none;\n }\n\n :host([collapsible]) :host(:not([expanded])) & {\n visibility: hidden;\n }\n}\n\nq2-btn {\n --tct-btn-icon-hover-background: #{var-list(--tct-section-btn-hover-background, --app-gray-l3, #f2f2f2)};\n --tct-icon-stroke-primary: #{var-list(--tct-section-btn-icon-stroke-primary, --app-gray, #747474)};\n --tct-icon-stroke-secondary: #{var-list(--tct-section-btn-icon-stroke-secondary, --app-gray, #747474)};\n}\n","import {\n Component,\n ComponentInterface,\n Prop,\n Element,\n Listen,\n State,\n Watch,\n h,\n Event,\n EventEmitter,\n Method,\n} from '@stencil/core';\nimport { isEventFromElement, loc, nextPaint, overrideFocus, resizeIframe } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/*\n @name Section\n * @category Display\n * @summary Use for grouping related content with a header and optional collapse.\n * @slot q2-section-header - An optional slot to display a custom header.\n /\n@Component({ tag: 'q2-section', shadow: true, styleUrl: 'q2-section.scss' })\nexport class Q2Section implements ComponentInterface {\n // #region Own Properties\n\n contentContainer: HTMLDivElement;\n contentId: string = 'content';\n contentSlot: HTMLSlotElement;\n contentSlotMutationObserver: MutationObserver;\n headerSlot: HTMLSlotElement;\n headerSlotMutationObserver: MutationObserver;\n headerSlotWrapper: HTMLDivElement;\n resizerFn: NodeJS.Timeout \| undefined;\n titleId: string = 'title';\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 contentHeight: string;\n\n @State()\n hasYieldedHeader: boolean = false;\n\n @State()\n hideContent: boolean = false;\n\n // #endregion\n // #region Public Property API\n\n /* Determines if the section is collapsible. /\n @Prop({ reflect: true })\n collapsible: boolean;\n\n /* Indicates if the `q2-section` is in an expanded state or not. /\n @Prop({ reflect: true, mutable: true })\n expanded: boolean;\n\n /\n The text to display above the `q2-section`. Renders as an `<h2>` element.\n \n It is also used to provided an `aria-label` for the toggle button when the component is collapsible.\n \n @warning\n * If you are providing a custom header, setting this property is still strongly encouraged for the purposes of\n * accessibility.\n /\n @Prop({ reflect: true })\n label: string;\n\n /* Determines if the collapse chevron icon should show in the `q2-section` header. /\n @Prop({ reflect: true })\n noCollapseIcon: boolean;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the section is expanded or collapsed.\n * @legacyEvent\n * @deprecated Use 'tctChange' instead\n /\n @Event()\n change: EventEmitter<{ expanded: boolean }>;\n\n /\n Emitted when the section is expanded or collapsed.\n * @legacyEvent\n /\n @Event()\n tctChange: EventEmitter<{ expanded: boolean }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.removeHeaderSlotListener();\n this.removeContentSlotListener();\n }\n\n componentWillLoad() {\n this.onHeaderSlotChange();\n const { collapsible, expanded } = this;\n this.contentHeight = collapsible && expanded ? undefined : '0px';\n this.hideContent = !expanded;\n }\n\n componentDidLoad() {\n this.addHeaderSlotListener();\n this.addContentSlotListener();\n overrideFocus(this.hostElement);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n defaultChangeHandler(event: CustomEvent) {\n if (event.target === this.hostElement && !this.hostElement.onchange && !!event.detail) {\n this.expanded = event.detail.expanded;\n }\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.contentContainer.focus();\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n A test method to collapse section.\n \n @testOnly\n /\n @Method()\n async collapse() {\n if (!this.collapsible \|\| !this.expanded) return;\n const btn = this.hostElement.shadowRoot.querySelector('[test-id=\"toggleButton\"]');\n (btn as HTMLQ2BtnElement)?.click();\n }\n\n /\n A test method to expand section.\n \n @testOnly\n */\n @Method()\n async expand() {\n if (!this.collapsible \|\| this.expanded) return;\n const btn = this.hostElement.shadowRoot.querySelector('[test-id=\"toggleButton\"]');\n (btn as HTMLQ2BtnElement)?.click();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('collapsible')\n collapsibleObserver() {\n this.contentHeight = this.currentHeight;\n }\n\n @Watch('expanded')\n async expandedObserver(expanded: boolean) {\n this.clearResizeInterval();\n this.resizerFn = setInterval(resizeIframe, 5);\n\n if (expanded) {\n this.expandSection();\n } else {\n this.collapseSection();\n }\n }\n\n // #endregion\n // #region Local Methods\n\n get contentContainerHeight() {\n return `${this.contentContainer.offsetHeight \|\| 0}px`;\n }\n\n get currentHeight() {\n const { collapsible, expanded } = this;\n if (!collapsible) {\n return null;\n } else if (expanded) {\n return this.contentContainerHeight;\n } else {\n return '0';\n }\n }\n\n addContentSlotListener = () => {\n if (this.contentSlot) {\n this.contentSlot.addEventListener('slotchange', resizeIframe);\n return;\n }\n\n const observer = new MutationObserver(resizeIframe);\n observer.observe(this.contentContainer, { childList: true, subtree: true });\n this.contentSlotMutationObserver = observer;\n };\n\n addHeaderSlotListener = () => {\n if (this.headerSlot) {\n this.headerSlot.addEventListener('slotchange', this.onHeaderSlotChange);\n return;\n }\n\n const observer = new MutationObserver(this.onHeaderSlotChange);\n observer.observe(this.headerSlotWrapper, { childList: true });\n this.headerSlotMutationObserver = observer;\n };\n\n clearResizeInterval = () => {\n this.resizerFn && clearInterval(this.resizerFn);\n };\n\n async collapseSection() {\n this.contentHeight = this.contentContainerHeight;\n await nextPaint(() => {\n this.contentHeight = this.currentHeight;\n });\n }\n\n async expandSection() {\n this.hideContent = false;\n await nextPaint(() => {\n this.contentHeight = this.currentHeight;\n });\n }\n\n onHeaderClick = () => {\n mirrorEmit(this, ['change', 'tctChange'], {\n expanded: !this.expanded,\n });\n };\n\n onHeaderSlotChange = () => {\n const hasSlotContent = !!this.hostElement.querySelector('[slot=\"q2-section-header\"]');\n\n if (this.hasYieldedHeader !== hasSlotContent) {\n this.hasYieldedHeader = !!hasSlotContent;\n }\n };\n\n onTransitionEnd = () => {\n if (this.expanded) {\n this.contentHeight = undefined;\n } else {\n this.hideContent = true;\n }\n\n setTimeout(() => {\n // This gives enough time for all values to get passed over\n // Previously, the interval was never cleared and the fn was called indefinitely then filtered\n // Will revisit in TCT-599\n this.clearResizeInterval();\n }, 1000);\n };\n\n removeContentSlotListener = () => {\n if (this.contentSlot) {\n this.contentSlot.removeEventListener('slotchange', resizeIframe);\n return;\n }\n this.contentSlotMutationObserver?.disconnect();\n };\n\n removeHeaderSlotListener = () => {\n if (this.headerSlot) {\n this.headerSlot.removeEventListener('slotchange', this.onHeaderSlotChange);\n return;\n }\n\n this.headerSlotMutationObserver?.disconnect();\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n const hasHeader = this.label \|\| this.hasYieldedHeader;\n const wrapperClasses = ['content-wrapper'];\n const { collapsible, hideContent, contentHeight } = this;\n if (collapsible) {\n if (hideContent) wrapperClasses.push('is-closed');\n else if (contentHeight) wrapperClasses.push('is-transitioning');\n }\n\n const showDefaultHeader = !this.hasYieldedHeader && !!this.label;\n\n return (\n <section class=\"wrapper\">\n <header class={hasHeader ? 'has-header' : ''}>\n <div\n class=\"header-content\"\n id={this.titleId}\n onClick={this.collapsible && this.onHeaderClick}\n >\n {showDefaultHeader && <h2 class=\"title\">{loc(this.label)}</h2>}\n <div\n ref={el => (this.headerSlotWrapper = el)}\n class=\"header-slot-wrapper\"\n >\n <slot\n ref={(el: HTMLSlotElement) => (this.headerSlot = el)}\n name=\"q2-section-header\"\n />\n </div>\n </div>\n {this.collapsible && !this.noCollapseIcon && (\n <q2-btn\n label={loc(this.label \|\| 'tecton.element.section.defaultToggleLabel')}\n ariaExpanded={`${!!this.expanded}`}\n ariaControls={this.contentId}\n test-id=\"toggleButton\"\n hide-label\n onClick={this.onHeaderClick}\n >\n <q2-icon type=\"chevron-up\" />\n </q2-btn>\n )}\n </header>\n <div\n class={wrapperClasses.join(' ')}\n id={this.contentId}\n aria-labelledby={this.titleId}\n role=\"region\"\n onTransitionEnd={this.onTransitionEnd}\n style={\n this.collapsible && {\n height: this.contentHeight,\n }\n }\n >\n <div\n ref={el => (this.contentContainer = el)}\n class=\"content\"\n tabindex=\"-1\"\n >\n <slot ref={(el: HTMLSlotElement) => (this.contentSlot = el)} />\n </div>\n </div>\n </section>\n );\n }\n\n // #endregion\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["q2SectionCss","Q2Section","constructor","hostRef","this","contentId","titleId","hasYieldedHeader","hideContent","addContentSlotListener","contentSlot","addEventListener","resizeIframe","observer","MutationObserver","observe","contentContainer","childList","subtree","contentSlotMutationObserver","addHeaderSlotListener","headerSlot","onHeaderSlotChange","headerSlotWrapper","headerSlotMutationObserver","clearResizeInterval","resizerFn","clearInterval","onHeaderClick","mirrorEmit","expanded","hasSlotContent","hostElement","querySelector","onTransitionEnd","contentHeight","undefined","setTimeout","removeContentSlotListener","removeEventListener","_a","disconnect","removeHeaderSlotListener","disconnectedCallback","componentWillLoad","collapsible","componentDidLoad","overrideFocus","defaultChangeHandler","event","target","onchange","detail","delegateFocus","isEventFromElement","focus","collapse","btn","shadowRoot","click","expand","collapsibleObserver","currentHeight","expandedObserver","setInterval","expandSection","collapseSection","contentContainerHeight","offsetHeight","nextPaint","render","hasHeader","label","wrapperClasses","push","showDefaultHeader","h","key","class","id","onClick","loc","ref","el","name","noCollapseIcon","ariaExpanded","ariaControls","type","join","role","style","height","tabindex"],"sources":["src/components/q2-section/q2-section.scss?tag=q2-section&encapsulation=shadow","src/components/q2-section/q2-section.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions.scss';\n@import './variables';\n\n:host {\n display: block;\n background: var-list(\n --tct-section-background,\n var-prefixer(section-background-color),\n var-prefixer(section-bg),\n --app-white,\n #ffffff\n );\n color: var-list(var-prefixer(section-font-color), --t-text, #4d4d4d);\n border-radius: var-list(var-prefixer(section-border-radius), --app-border-radius-1, 4px);\n margin: var-list(var-prefixer(section-margin), --app-scale-3x, 15px);\n border-width: var-list(--tct-section-border-width, 0);\n border-style: var-list(--tct-section-border-style, solid);\n border-color: var-list(--tct-section-border-color, none);\n\n @media screen and (max-width: 767px) {\n --comp-default-margin: var(--app-scale-3x, 15px) 0;\n margin: var-list(var-prefixer(section-margin), --comp-default-margin);\n }\n\n @media print {\n --comp-default-print-margin: var(--app-scale-3x, 15px) 0;\n margin: var-list(--tct-section-print-margin, --comp-default-print-margin);\n }\n}\n\n.wrapper {\n --comp-tween: #{var-list(var-prefixer(section-tween), --app-tween-1, unquote('0.2s ease'))};\n --comp-default-wrapper-padding: var(--app-scale-1x, 5px) 0;\n display: block;\n padding: var-list(var-prefixer(section-wrapper-padding), --comp-default-wrapper-padding);\n\n &:hover {\n box-shadow: var-list(var-prefixer(section-wrapper-hover-box-shadow), inherit);\n }\n\n :host([collapsible]) & {\n --comp-tween: #{var-list(var-prefixer(section-tween), --app-tween-2, unquote('0.4s ease'))};\n }\n}\n\nheader {\n --comp-default-header-padding: 0 var(--app-scale-3x, 15px);\n padding: var-list(var-prefixer(section-header-padding), --comp-default-header-padding);\n display: flex;\n\n @media print {\n padding: var-list(--tct-section-header-print-padding, 0);\n }\n\n &.has-header {\n min-height: var-list(var-prefixer(section-header-min-height), 44px);\n }\n}\n\n.header-content {\n flex: 1 1 100%;\n min-width: 0;\n align-self: center;\n\n :host([collapsible]) & {\n cursor: pointer;\n }\n}\n\n.title {\n margin: var-list(--tct-section-title-margin, 0);\n font-size: var-list(--tct-section-title-font-size, 20px);\n font-weight: var-list(--tct-section-title-font-weight, 600);\n text-transform: var-list(--tct-section-title-text-transform, none);\n letter-spacing: var-list(--tct-section-title-letter-spacing, inherit);\n}\n\nq2-icon {\n transition: transform var(--comp-tween);\n\n :host(:not([expanded])) &,\n :host([expanded='false']) & {\n transform: rotate(180deg);\n }\n}\n\n.content-wrapper {\n height: auto;\n\n &.is-closed {\n display: none;\n overflow: hidden;\n }\n\n &.is-transitioning {\n overflow: hidden;\n }\n\n :host([collapsible]) & {\n transition: height var(--comp-tween);\n }\n}\n\n.content {\n --comp-default-content-padding: var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);\n padding: var-list(var-prefixer(section-content-padding), --comp-default-content-padding);\n\n @media print {\n padding: var-list(--tct-section-content-print-padding, 0);\n }\n\n &:focus {\n box-shadow: none;\n }\n\n :host([collapsible]) :host(:not([expanded])) & {\n visibility: hidden;\n }\n}\n\nq2-btn {\n --tct-btn-icon-hover-background: #{var-list(--tct-section-btn-hover-background, --app-gray-l3, #f2f2f2)};\n --tct-icon-stroke-primary: #{var-list(--tct-section-btn-icon-stroke-primary, --app-gray, #747474)};\n --tct-icon-stroke-secondary: #{var-list(--tct-section-btn-icon-stroke-secondary, --app-gray, #747474)};\n}\n","import {\n Component,\n ComponentInterface,\n Prop,\n Element,\n Listen,\n State,\n Watch,\n h,\n Event,\n EventEmitter,\n Method,\n} from '@stencil/core';\nimport { isEventFromElement, loc, nextPaint, overrideFocus, resizeIframe } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/*\n @name Section\n * @category Display\n * @summary Use for grouping related content with a header and optional collapse.\n * @slot q2-section-header - An optional slot to display a custom header.\n /\n@Component({ tag: 'q2-section', shadow: true, styleUrl: 'q2-section.scss' })\nexport class Q2Section implements ComponentInterface {\n // #region Own Properties\n\n contentContainer: HTMLDivElement;\n contentId: string = 'content';\n contentSlot: HTMLSlotElement;\n contentSlotMutationObserver: MutationObserver;\n headerSlot: HTMLSlotElement;\n headerSlotMutationObserver: MutationObserver;\n headerSlotWrapper: HTMLDivElement;\n resizerFn: NodeJS.Timeout \| undefined;\n titleId: string = 'title';\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 contentHeight: string;\n\n @State()\n hasYieldedHeader: boolean = false;\n\n @State()\n hideContent: boolean = false;\n\n // #endregion\n // #region Public Property API\n\n /* Determines if the section is collapsible. /\n @Prop({ reflect: true })\n collapsible: boolean;\n\n /* Indicates if the `q2-section` is in an expanded state or not. /\n @Prop({ reflect: true, mutable: true })\n expanded: boolean;\n\n /\n The text to display above the `q2-section`. Renders as an `<h2>` element.\n \n It is also used to provided an `aria-label` for the toggle button when the component is collapsible.\n \n @warning\n * If you are providing a custom header, setting this property is still strongly encouraged for the purposes of\n * accessibility.\n /\n @Prop({ reflect: true })\n label: string;\n\n /* Determines if the collapse chevron icon should show in the `q2-section` header. /\n @Prop({ reflect: true })\n noCollapseIcon: boolean;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the section is expanded or collapsed.\n * @legacyEvent\n * @deprecated Use 'tctChange' instead\n /\n @Event()\n change: EventEmitter<{ expanded: boolean }>;\n\n /\n Emitted when the section is expanded or collapsed.\n * @legacyEvent\n /\n @Event()\n tctChange: EventEmitter<{ expanded: boolean }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.removeHeaderSlotListener();\n this.removeContentSlotListener();\n }\n\n componentWillLoad() {\n this.onHeaderSlotChange();\n const { collapsible, expanded } = this;\n this.contentHeight = collapsible && expanded ? undefined : '0px';\n this.hideContent = !expanded;\n }\n\n componentDidLoad() {\n this.addHeaderSlotListener();\n this.addContentSlotListener();\n overrideFocus(this.hostElement);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n defaultChangeHandler(event: CustomEvent) {\n if (event.target === this.hostElement && !this.hostElement.onchange && !!event.detail) {\n this.expanded = event.detail.expanded;\n }\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.contentContainer.focus();\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n A test method to collapse section.\n \n @testOnly\n /\n @Method()\n async collapse() {\n if (!this.collapsible \|\| !this.expanded) return;\n const btn = this.hostElement.shadowRoot.querySelector('[test-id=\"toggleButton\"]');\n (btn as HTMLQ2BtnElement)?.click();\n }\n\n /\n A test method to expand section.\n \n @testOnly\n */\n @Method()\n async expand() {\n if (!this.collapsible \|\| this.expanded) return;\n const btn = this.hostElement.shadowRoot.querySelector('[test-id=\"toggleButton\"]');\n (btn as HTMLQ2BtnElement)?.click();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('collapsible')\n collapsibleObserver() {\n this.contentHeight = this.currentHeight;\n }\n\n @Watch('expanded')\n async expandedObserver(expanded: boolean) {\n this.clearResizeInterval();\n this.resizerFn = setInterval(resizeIframe, 5);\n\n if (expanded) {\n this.expandSection();\n } else {\n this.collapseSection();\n }\n }\n\n // #endregion\n // #region Local Methods\n\n get contentContainerHeight() {\n return `${this.contentContainer.offsetHeight \|\| 0}px`;\n }\n\n get currentHeight() {\n const { collapsible, expanded } = this;\n if (!collapsible) {\n return null;\n } else if (expanded) {\n return this.contentContainerHeight;\n } else {\n return '0';\n }\n }\n\n addContentSlotListener = () => {\n if (this.contentSlot) {\n this.contentSlot.addEventListener('slotchange', resizeIframe);\n return;\n }\n\n const observer = new MutationObserver(resizeIframe);\n observer.observe(this.contentContainer, { childList: true, subtree: true });\n this.contentSlotMutationObserver = observer;\n };\n\n addHeaderSlotListener = () => {\n if (this.headerSlot) {\n this.headerSlot.addEventListener('slotchange', this.onHeaderSlotChange);\n return;\n }\n\n const observer = new MutationObserver(this.onHeaderSlotChange);\n observer.observe(this.headerSlotWrapper, { childList: true });\n this.headerSlotMutationObserver = observer;\n };\n\n clearResizeInterval = () => {\n this.resizerFn && clearInterval(this.resizerFn);\n };\n\n async collapseSection() {\n this.contentHeight = this.contentContainerHeight;\n await nextPaint(() => {\n this.contentHeight = this.currentHeight;\n });\n }\n\n async expandSection() {\n this.hideContent = false;\n await nextPaint(() => {\n this.contentHeight = this.currentHeight;\n });\n }\n\n onHeaderClick = () => {\n mirrorEmit(this, ['change', 'tctChange'], {\n expanded: !this.expanded,\n });\n };\n\n onHeaderSlotChange = () => {\n const hasSlotContent = !!this.hostElement.querySelector('[slot=\"q2-section-header\"]');\n\n if (this.hasYieldedHeader !== hasSlotContent) {\n this.hasYieldedHeader = !!hasSlotContent;\n }\n };\n\n onTransitionEnd = () => {\n if (this.expanded) {\n this.contentHeight = undefined;\n } else {\n this.hideContent = true;\n }\n\n setTimeout(() => {\n // This gives enough time for all values to get passed over\n // Previously, the interval was never cleared and the fn was called indefinitely then filtered\n // Will revisit in TCT-599\n this.clearResizeInterval();\n }, 1000);\n };\n\n removeContentSlotListener = () => {\n if (this.contentSlot) {\n this.contentSlot.removeEventListener('slotchange', resizeIframe);\n return;\n }\n this.contentSlotMutationObserver?.disconnect();\n };\n\n removeHeaderSlotListener = () => {\n if (this.headerSlot) {\n this.headerSlot.removeEventListener('slotchange', this.onHeaderSlotChange);\n return;\n }\n\n this.headerSlotMutationObserver?.disconnect();\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n const hasHeader = this.label \|\| this.hasYieldedHeader;\n const wrapperClasses = ['content-wrapper'];\n const { collapsible, hideContent, contentHeight } = this;\n if (collapsible) {\n if (hideContent) wrapperClasses.push('is-closed');\n else if (contentHeight) wrapperClasses.push('is-transitioning');\n }\n\n const showDefaultHeader = !this.hasYieldedHeader && !!this.label;\n\n return (\n <section class=\"wrapper\">\n <header class={hasHeader ? 'has-header' : ''}>\n <div\n class=\"header-content\"\n id={this.titleId}\n onClick={this.collapsible && this.onHeaderClick}\n >\n {showDefaultHeader && <h2 class=\"title\">{loc(this.label)}</h2>}\n <div\n ref={el => (this.headerSlotWrapper = el)}\n class=\"header-slot-wrapper\"\n >\n <slot\n ref={(el: HTMLSlotElement) => (this.headerSlot = el)}\n name=\"q2-section-header\"\n />\n </div>\n </div>\n {this.collapsible && !this.noCollapseIcon && (\n <q2-btn\n label={loc(this.label \|\| 'tecton.element.section.defaultToggleLabel')}\n ariaExpanded={`${!!this.expanded}`}\n ariaControls={this.contentId}\n test-id=\"toggleButton\"\n hide-label\n onClick={this.onHeaderClick}\n >\n <q2-icon type=\"chevron-up\" />\n </q2-btn>\n )}\n </header>\n <div\n class={wrapperClasses.join(' ')}\n id={this.contentId}\n aria-labelledby={this.titleId}\n role=\"region\"\n onTransitionEnd={this.onTransitionEnd}\n style={\n this.collapsible && {\n height: this.contentHeight,\n }\n }\n >\n <div\n ref={el => (this.contentContainer = el)}\n class=\"content\"\n tabindex=\"-1\"\n >\n <slot ref={(el: HTMLSlotElement) => (this.contentSlot = el)} />\n </div>\n </div>\n </section>\n );\n }\n\n // #endregion\n}\n"],"mappings":"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","ignoreList":[]}