npm - q2-tecton-elements - Versions diffs - 1.45.0 → 1.45.2 - Mend

q2-tecton-elements 1.45.0 → 1.45.2

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 (157) hide show

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

	@@ -1 +1 @@
1	- {"file":"q2-icon2.js","mappings":"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","names":[],"sources":["src/components/q2-icon/q2-icon.scss?tag=q2-icon&encapsulation=shadow","src/components/q2-icon/q2-icon.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n height: var(--tct-icon-size, 24px);\n width: var(--tct-icon-size, 24px);\n position: relative;\n fill: none;\n}\n\n:host([inline]) {\n height: 1em;\n width: 1em;\n}\n\nsvg {\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n stroke-width: var-list(--tct-icon-stroke-width, --t-icon-stroke-width, 1.5);\n stroke-linecap: var-list(--tct-icon-cap, --t-icon-cap, round);\n stroke-linejoin: var-list(--tct-icon-cap, --t-icon-cap, round);\n transition: var(--tct-icon-transition, none);\n}\n\n.stroke-primary {\n stroke: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.stroke-secondary {\n stroke: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.fill-primary {\n fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.fill-secondary {\n fill: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.filled {\n fill: var-list(--tct-icon-fill, --comp-icon-fill, --t-icon-fill, none);\n transition: var(--tct-icon-fill-transition, none);\n}\n\n.uniform {\n fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, currentcolor);\n transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n:host([type='info']),\n:host([type='info-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-icon-fill: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n}\n\n:host([type='success']),\n:host([type='success-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-icon-fill: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n}\n\n:host([type='warning']),\n:host([type='warning-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-icon-fill: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #c35500)};\n}\n\n:host([type='error']),\n:host([type='error-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-icon-fill: #{var-list(--tct-stoplight-alert, --const-stoplight-alert, #d20a0a)};\n}\n","import { Component, ComponentInterface, Prop, h, Element, Watch, getAssetPath, State, Fragment } from '@stencil/core';\nimport { createGuid } from 'src/utils';\nimport iconMap from './assets/icon-map.json';\n\n@Component({ tag: 'q2-icon', shadow: true, styleUrl: 'q2-icon.scss', assetsDirs: ['assets'] })\nexport class Q2Icon implements ComponentInterface {\n /** Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text. /\n @Prop({ reflect: true }) inline: boolean;\n\n /* The text that is presented by screen-readers when they encounter the icon. /\n @Prop({ reflect: true }) label: string;\n\n /* The name of the icon to be displayed. /\n @Prop({ reflect: true }) type: string;\n\n @Element() hostElement: HTMLElement;\n\n @State() iconClone: SVGSymbolElement;\n\n spriteGroup: SVGElement;\n\n componentWillLoad() {\n this.handleIcon();\n }\n\n componentDidRender(): void {\n if (!this.iconClone) return;\n this.spriteGroup?.firstElementChild?.remove();\n this.spriteGroup?.appendChild(this.iconClone);\n }\n\n @Watch('type')\n handleIcon() {\n if (this.isCustom) {\n this.setCustomSVGAttrs();\n } else if (this.type) {\n this.fetchSprite();\n } else {\n this.iconClone = null;\n this.spriteGroup?.firstElementChild?.remove();\n }\n }\n\n get isCustom() {\n return this.type === 'custom';\n }\n\n get spriteFileName() {\n if (this.isCustom) return;\n return iconMap[this.type];\n }\n\n get spriteId() {\n const { spriteFileName } = this;\n if (!spriteFileName) return;\n return `tecton-sprite-${spriteFileName}`;\n }\n\n get spriteElement() {\n const { spriteId } = this;\n if (!spriteId) return;\n return document.querySelector<HTMLElement>(`#${spriteId}`);\n }\n\n get spriteEventName() {\n const { spriteFileName } = this;\n if (!spriteFileName) return;\n return `tct-loaded-${spriteFileName}`;\n }\n\n get iconCloneViewBox() {\n return this.iconClone?.getAttribute('viewBox') ?? '0 0 24 24';\n }\n\n /\n Checks for the sprite container element in the global DOM\n * If it does not exist, it creates and appends it to the body\n */\n getOrCreateSpriteContainer() {\n const spriteContainerId = 'tecton-sprites';\n let spriteContainer: HTMLDivElement = document.querySelector(`#${spriteContainerId}`);\n\n if (spriteContainer) return spriteContainer;\n spriteContainer = document.createElement('div');\n spriteContainer.id = spriteContainerId;\n spriteContainer.style.display = 'none';\n document.body.appendChild(spriteContainer);\n return spriteContainer;\n }\n\n checkForSprite() {\n const { spriteId, spriteEventName } = this;\n const spriteContainer = this.getOrCreateSpriteContainer();\n let spriteElement: HTMLElement = document.querySelector(`#${spriteId}`);\n\n // If the sprite element exists and has the `data-loaded` attribute, we know we have everything we need\n if (spriteElement?.hasAttribute('data-loaded') ?? false) {\n this.cloneSpriteNode();\n return true;\n }\n\n // If the sprite element exists but does not have the `data-loaded` attribute, we know it's being loaded\n // We'll listen for the event that will be dispatched when the sprite is loaded\n spriteContainer.addEventListener(\n spriteEventName,\n () => {\n this.cloneSpriteNode();\n },\n { once: true }\n );\n\n // If the sprite element exists, we know it's being loaded and will be handled by the event listener\n if (spriteElement) return true;\n\n // If sprite element does not exist, create a placeholder\n // This will let other icons know the sprite is being loaded\n spriteElement = document.createElement('div');\n spriteElement.id = spriteId;\n spriteContainer.appendChild(spriteElement);\n return false;\n }\n\n async fetchSprite() {\n const { spriteFileName, spriteId, spriteEventName } = this;\n\n const spriteExists = this.checkForSprite();\n if (spriteExists) return;\n\n if (!spriteFileName) return;\n const spritePath = getAssetPath(`assets/${spriteFileName}.symbol.svg`);\n const response = await fetch(spritePath);\n const data = await response.text();\n const wrappingDiv = document.createElement('div');\n wrappingDiv.innerHTML = data;\n const svg = wrappingDiv.querySelector('svg');\n\n svg.id = spriteId;\n svg.setAttribute('data-loaded', '');\n\n let { spriteElement } = this;\n if (spriteElement?.tagName === 'SVG') return;\n\n if (typeof spriteElement.replaceWith === 'function') {\n spriteElement.replaceWith(svg);\n } else {\n spriteElement.parentNode.replaceChild(svg, spriteElement);\n }\n\n spriteElement = document.querySelector(`#${spriteId}`);\n spriteElement.dispatchEvent(new CustomEvent(spriteEventName, { bubbles: true }));\n }\n\n cloneSpriteNode() {\n const spriteContainer = this.getOrCreateSpriteContainer();\n const spriteNode = spriteContainer.querySelector<HTMLElement>(`#tct-${this.type}`);\n this.iconClone = spriteNode ? (spriteNode.cloneNode(true) as SVGSymbolElement) : undefined;\n }\n\n setCustomSVGAttrs() {\n const innerSVG = this.hostElement.querySelector('svg');\n\n if (!innerSVG) return;\n\n innerSVG.setAttribute('role', 'img');\n innerSVG.setAttribute('xmlns', 'http://www.w3.org/2000/svg');\n\n const { label } = this;\n if (label) {\n const title = document.createElement('title');\n const labelId = `label-${createGuid()}`;\n title.id = labelId;\n title.textContent = label;\n innerSVG.appendChild(title);\n innerSVG.setAttribute('aria-labelledby', labelId);\n } else {\n innerSVG.setAttribute('aria-hidden', 'true');\n }\n }\n\n render() {\n const { label, type } = this;\n return this.isCustom ? (\n <slot />\n ) : (\n <svg\n aria-hidden={label ? undefined : 'true'}\n role=\"img\"\n aria-labelledby={label ? 'label' : undefined}\n viewBox={this.iconCloneViewBox}\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n {label && <title id=\"label\">{label}</title>}\n <Fragment>\n {!!type && <use href={`#tct-${type}`} />}\n <g ref={el => (this.spriteGroup = el)}></g>\n </Fragment>\n </svg>\n );\n }\n}\n"],"version":3}
1	+ {"file":"q2-icon2.js","mappings":"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","names":[],"sources":["src/components/q2-icon/q2-icon.scss?tag=q2-icon&encapsulation=shadow","src/components/q2-icon/q2-icon.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n height: var(--tct-icon-size, 24px);\n width: var(--tct-icon-size, 24px);\n position: relative;\n fill: none;\n}\n\n:host([inline]) {\n height: 1em;\n width: 1em;\n}\n\nsvg {\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n stroke-width: var-list(--tct-icon-stroke-width, --t-icon-stroke-width, 1.5);\n stroke-linecap: var-list(--tct-icon-cap, --t-icon-cap, round);\n stroke-linejoin: var-list(--tct-icon-cap, --t-icon-cap, round);\n transition: var(--tct-icon-transition, none);\n}\n\n.stroke-primary {\n stroke: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.stroke-secondary {\n stroke: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.fill-primary {\n fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.fill-secondary {\n fill: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.filled {\n fill: var-list(--tct-icon-fill, --comp-icon-fill, --t-icon-fill, none);\n transition: var(--tct-icon-fill-transition, none);\n}\n\n.uniform {\n fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, currentcolor);\n transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n:host([type='info']),\n:host([type='info-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n}\n\n:host([type='success']),\n:host([type='success-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n}\n\n:host([type='warning']),\n:host([type='warning-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #c35500)};\n}\n\n:host([type='error']),\n:host([type='error-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-alert, --const-stoplight-alert, #d20a0a)};\n}\n","import { Component, ComponentInterface, Prop, h, Element, Watch, getAssetPath, State, Fragment } from '@stencil/core';\nimport { createGuid } from 'src/utils';\nimport iconMap from './assets/icon-map.json';\n\n@Component({ tag: 'q2-icon', shadow: true, styleUrl: 'q2-icon.scss', assetsDirs: ['assets'] })\nexport class Q2Icon implements ComponentInterface {\n /** Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text. /\n @Prop({ reflect: true }) inline: boolean;\n\n /* The text that is presented by screen-readers when they encounter the icon. /\n @Prop({ reflect: true }) label: string;\n\n /* The name of the icon to be displayed. /\n @Prop({ reflect: true }) type: string;\n\n @Element() hostElement: HTMLElement;\n\n @State() iconClone: SVGSymbolElement;\n\n spriteGroup: SVGElement;\n\n componentWillLoad() {\n this.handleIcon();\n }\n\n componentDidRender(): void {\n if (!this.iconClone) return;\n this.spriteGroup?.firstElementChild?.remove();\n this.spriteGroup?.appendChild(this.iconClone);\n }\n\n @Watch('type')\n handleIcon() {\n if (this.isCustom) {\n this.setCustomSVGAttrs();\n } else if (this.type) {\n this.fetchSprite();\n } else {\n this.iconClone = null;\n this.spriteGroup?.firstElementChild?.remove();\n }\n }\n\n get isCustom() {\n return this.type === 'custom';\n }\n\n get spriteFileName() {\n if (this.isCustom) return;\n return iconMap[this.type];\n }\n\n get spriteId() {\n const { spriteFileName } = this;\n if (!spriteFileName) return;\n return `tecton-sprite-${spriteFileName}`;\n }\n\n get spriteElement() {\n const { spriteId } = this;\n if (!spriteId) return;\n return document.querySelector<HTMLElement>(`#${spriteId}`);\n }\n\n get spriteEventName() {\n const { spriteFileName } = this;\n if (!spriteFileName) return;\n return `tct-loaded-${spriteFileName}`;\n }\n\n get iconCloneViewBox() {\n return this.iconClone?.getAttribute('viewBox') ?? '0 0 24 24';\n }\n\n /\n Checks for the sprite container element in the global DOM\n * If it does not exist, it creates and appends it to the body\n */\n getOrCreateSpriteContainer() {\n const spriteContainerId = 'tecton-sprites';\n let spriteContainer: HTMLDivElement = document.querySelector(`#${spriteContainerId}`);\n\n if (spriteContainer) return spriteContainer;\n spriteContainer = document.createElement('div');\n spriteContainer.id = spriteContainerId;\n spriteContainer.style.display = 'none';\n document.body.appendChild(spriteContainer);\n return spriteContainer;\n }\n\n checkForSprite() {\n const { spriteId, spriteEventName } = this;\n const spriteContainer = this.getOrCreateSpriteContainer();\n let spriteElement: HTMLElement = document.querySelector(`#${spriteId}`);\n\n // If the sprite element exists and has the `data-loaded` attribute, we know we have everything we need\n if (spriteElement?.hasAttribute('data-loaded') ?? false) {\n this.cloneSpriteNode();\n return true;\n }\n\n // If the sprite element exists but does not have the `data-loaded` attribute, we know it's being loaded\n // We'll listen for the event that will be dispatched when the sprite is loaded\n spriteContainer.addEventListener(\n spriteEventName,\n () => {\n this.cloneSpriteNode();\n },\n { once: true }\n );\n\n // If the sprite element exists, we know it's being loaded and will be handled by the event listener\n if (spriteElement) return true;\n\n // If sprite element does not exist, create a placeholder\n // This will let other icons know the sprite is being loaded\n spriteElement = document.createElement('div');\n spriteElement.id = spriteId;\n spriteContainer.appendChild(spriteElement);\n return false;\n }\n\n async fetchSprite() {\n const { spriteFileName, spriteId, spriteEventName } = this;\n\n const spriteExists = this.checkForSprite();\n if (spriteExists) return;\n\n if (!spriteFileName) return;\n const spritePath = getAssetPath(`assets/${spriteFileName}.symbol.svg`);\n const response = await fetch(spritePath);\n const data = await response.text();\n const wrappingDiv = document.createElement('div');\n wrappingDiv.innerHTML = data;\n const svg = wrappingDiv.querySelector('svg');\n\n svg.id = spriteId;\n svg.setAttribute('data-loaded', '');\n\n let { spriteElement } = this;\n if (spriteElement?.tagName === 'SVG') return;\n\n if (typeof spriteElement.replaceWith === 'function') {\n spriteElement.replaceWith(svg);\n } else {\n spriteElement.parentNode.replaceChild(svg, spriteElement);\n }\n\n spriteElement = document.querySelector(`#${spriteId}`);\n spriteElement.dispatchEvent(new CustomEvent(spriteEventName, { bubbles: true }));\n }\n\n cloneSpriteNode() {\n const spriteContainer = this.getOrCreateSpriteContainer();\n const spriteNode = spriteContainer.querySelector<HTMLElement>(`#tct-${this.type}`);\n this.iconClone = spriteNode ? (spriteNode.cloneNode(true) as SVGSymbolElement) : undefined;\n }\n\n setCustomSVGAttrs() {\n const innerSVG = this.hostElement.querySelector('svg');\n\n if (!innerSVG) return;\n\n innerSVG.setAttribute('role', 'img');\n innerSVG.setAttribute('xmlns', 'http://www.w3.org/2000/svg');\n\n const { label } = this;\n if (label) {\n const title = document.createElement('title');\n const labelId = `label-${createGuid()}`;\n title.id = labelId;\n title.textContent = label;\n innerSVG.appendChild(title);\n innerSVG.setAttribute('aria-labelledby', labelId);\n } else {\n innerSVG.setAttribute('aria-hidden', 'true');\n }\n }\n\n render() {\n const { label, type } = this;\n return this.isCustom ? (\n <slot />\n ) : (\n <svg\n aria-hidden={label ? undefined : 'true'}\n role=\"img\"\n aria-labelledby={label ? 'label' : undefined}\n viewBox={this.iconCloneViewBox}\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n {label && <title id=\"label\">{label}</title>}\n <Fragment>\n {!!type && <use href={`#tct-${type}`} />}\n <g ref={el => (this.spriteGroup = el)}></g>\n </Fragment>\n </svg>\n );\n }\n}\n"],"version":3}

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

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 import { t as isFirefox, o as overrideFocus, n as nextPaint, i as isEventFromElement, l as loc } from './index2.js';
 import { d as defineCustomElement$1 } from './q2-icon2.js';
-const q2MessageCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}:host([hidden]){display:none}.message{border-left-width:var(--tct-message-bar-width, var(--t-message-bar-width, var(--app-scale-1x, 5px)));border-left-style:solid;--comp-line-height:var(--tct-message-line-height, var(--t-message-line-height, var(--app-line-height, 1.428571429em)));display:grid;gap:var(--tct-scale-1, var(--app-scale-1x, 5px));align-items:flex-start;background:var(--tct-message-background, var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));color:var(--tct-message-font-color, var(--t-message-font-color, inherit));box-shadow:var(--tct-message-box-shadow, var(--t-message-box-shadow, inherit));border-radius:var(--tct-message-border-radius, var(--t-message-border-radius, inherit))}.message:focus{box-shadow:var(--const-global-focus)}.message-icon{--comp-top-offset:calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);--tct-icon-size:var(--comp-icon-size);top:var(--comp-top-offset);margin-bottom:calc(var(--comp-top-offset) * -1)}.message-content{flex:1;line-height:var(--comp-line-height)}::slotted(ul){--comp-list-default-padding:0 0 0 var-list(--app-scale-3x, 15px);padding:var(--tct-message-list-padding, var(--comp-list-default-padding))}:host(:not([appearance])),:host([appearance=standard]){--comp-default-margin:var-list(--app-scale-3x, 5px) 0;margin:var(--tct-message-margin, var(--comp-default-margin))}:host(:not([appearance])) .message,:host([appearance=standard]) .message{--comp-icon-size:var(--tct-message-icon-size, var(--t-message-icon-size, 24px));--comp-padding:var(--tct-message-padding, var(--t-message-padding, var(--app-scale-3x, 15px)));grid-template-columns:var(--comp-icon-size) 1fr;padding:var(--comp-padding);padding-left:calc(var(--comp-padding) - var(--tct-scale-2, var(--app-scale-2x, 10px)));padding-bottom:calc(var(--comp-padding) - var(--tct-scale-1, var(--app-scale-1x, 5px)))}:host(:not([appearance])) ::slotted(ul),:host([appearance=standard]) ::slotted(ul){--comp-list-default-margin:var-list(--app-scale-3x, 15px) 0;margin:var(--tct-message-list-margin, var(--comp-list-default-margin))}:host([appearance=minimal]){margin:0}:host([appearance=minimal]) .message{padding:var(--tct-message-minimal-padding, var(--t-message-minimal-padding, var(--app-scale-2x, 10px)));grid-template-columns:1fr}:host([appearance=minimal]) ::slotted(ul){margin:var(--tct-scale-1, var(--app-scale-1x, 5px)) 0}:host(:not([type])) .message,:host([type=info]) .message{border-left-color:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host(:not([type])) .message-icon,:host([type=info]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));--tct-icon-stroke-secondary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host([type=success]) .message{border-left-color:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=success]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00));--tct-icon-stroke-secondary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=warning]) .message{border-left-color:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500))}:host([type=warning]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500));--tct-icon-stroke-secondary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500))}:host([type=error]) .message,:host([type=danger]) .message{border-left-color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}:host([type=error]) .message-icon,:host([type=danger]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--tct-icon-stroke-secondary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}";
+const q2MessageCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}:host([hidden]){display:none}.message{border-left-width:var(--tct-message-bar-width, var(--t-message-bar-width, var(--app-scale-1x, 5px)));border-left-style:solid;--comp-line-height:var(--tct-message-line-height, var(--t-message-line-height, var(--app-line-height, 1.428571429em)));display:grid;gap:var(--tct-scale-1, var(--app-scale-1x, 5px));align-items:flex-start;background:var(--tct-message-background, var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));color:var(--tct-message-font-color, var(--t-message-font-color, inherit));box-shadow:var(--tct-message-box-shadow, var(--t-message-box-shadow, inherit));border-radius:var(--tct-message-border-radius, var(--t-message-border-radius, inherit))}.message:focus{box-shadow:var(--const-global-focus)}.message-icon{--comp-top-offset:calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);--tct-icon-size:var(--comp-icon-size);top:var(--comp-top-offset);margin-bottom:calc(var(--comp-top-offset) * -1)}.message-content{flex:1;line-height:var(--comp-line-height)}::slotted(ul){--comp-list-default-padding:0 0 0 var(--app-scale-3x, 15px);padding:var(--tct-message-list-padding, var(--comp-list-default-padding))}:host(:not([appearance])),:host([appearance=standard]){--comp-default-margin:var(--app-scale-3x, 5px) 0;margin:var(--tct-message-margin, var(--comp-default-margin))}:host(:not([appearance])) .message,:host([appearance=standard]) .message{--comp-icon-size:var(--tct-message-icon-size, var(--t-message-icon-size, 24px));--comp-padding:var(--tct-message-padding, var(--t-message-padding, var(--app-scale-3x, 15px)));grid-template-columns:var(--comp-icon-size) 1fr;padding:var(--comp-padding);padding-left:calc(var(--comp-padding) - var(--tct-scale-2, var(--app-scale-2x, 10px)));padding-bottom:calc(var(--comp-padding) - var(--tct-scale-1, var(--app-scale-1x, 5px)))}:host(:not([appearance])) ::slotted(ul),:host([appearance=standard]) ::slotted(ul){--comp-list-default-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-message-list-margin, var(--comp-list-default-margin))}:host([appearance=minimal]){margin:0}:host([appearance=minimal]) .message{padding:var(--tct-message-minimal-padding, var(--t-message-minimal-padding, var(--app-scale-2x, 10px)));grid-template-columns:1fr}:host([appearance=minimal]) ::slotted(ul){margin:var(--tct-scale-1, var(--app-scale-1x, 5px)) 0}:host(:not([type])) .message,:host([type=info]) .message{border-left-color:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host(:not([type])) .message-icon,:host([type=info]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));--tct-icon-stroke-secondary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host([type=success]) .message{border-left-color:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=success]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00));--tct-icon-stroke-secondary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=warning]) .message{border-left-color:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500))}:host([type=warning]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500));--tct-icon-stroke-secondary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500))}:host([type=error]) .message,:host([type=danger]) .message{border-left-color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}:host([type=error]) .message-icon,:host([type=danger]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--tct-icon-stroke-secondary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}";
 const Q2MessageStyle0 = q2MessageCss;
 const Q2Message = /*@__PURE__*/ proxyCustomElement(class Q2Message extends HTMLElement {

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

	@@ -1 +1 @@
1	- {"file":"q2-message2.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG~~,8/IAA8/~~I,CAAC;~~AACphJ~~,wBAAe,YAAY;;MCGd,SAAS;;;;;0BAE4C,UAAU;2BAGxB,KAAK;oBAGgC,MAAM;;;IAM3F,IAAI,SAAS;QACT,OAAOA,SAAc,EAAE,CAAC;KAC3B;IAED,gBAAgB;QACZ,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KACnC;;;;IAMD,MAAM,OAAO;QACT,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QAC3B,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;QACzC,IAAI,CAAC,SAAS;YAAE,OAAO;QACvB,SAAS,CAAC;YACN,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;SAC9B,CAAC,CAAC;KACN;IAGD,aAAa,CAAC,KAAiB;QAC3B,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;YAAE,OAAO;QACzD,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAc,UAAU,CAAC,CAAC,KAAK,EAAE,CAAC;KAC9E;IAED,MAAM;QACF,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QAC3B,MAAM,wBAAwB,GAAG,SAAS,IAAI,IAAI,CAAC,aAAa,CAAC;QACjE,MAAM,iBAAiB,GAAG,CAAC,SAAS,IAAI,IAAI,CAAC,aAAa,CAAC;QAC3D,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;QAC7B,MAAM,YAAY,GAAW,GAAG,CAAC,+BAA+B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,MAAM,EAAE,CAAC,CAAC;QAElG,QACI,4DACI,QAAQ,EAAC,IAAI,EACb,KAAK,EAAC,SAAS,EACf,IAAI,EAAE,WAAW,GAAG,SAAS,GAAG,OAAO,eAC5B,WAAW,GAAG,SAAS,GAAG,WAAW,iBACnC,WAAW,GAAG,SAAS,GAAG,MAAM,mBAC9B,WAAW,IAAI,wBAAwB,GAAG,SAAS,GAAG,KAAK,aAClE,kBAAkB,IAEzB,IAAI,CAAC,UAAU,KAAK,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,EACjE,iBAAiB,IAAI,4DAAK,KAAK,EAAC,IAAI,GAAO,EAC5C,4DAAK,KAAK,EAAC,kBAAkB,IAAE,YAAY,CAAO,EAClD,4DACI,KAAK,EAAC,iBAAiB,iBACV,wBAAwB,GAAG,MAAM,GAAG,SAAS,IAE1D,8DAAQ,CACN,CACJ,EACR;KACL;IAED,WAAW,CAAC,IAAY;QACpB,MAAM,OAAO,GAAG;YACZ,OAAO,EAAE,SAAS;YAClB,OAAO,EAAE,SAAS;YAClB,MAAM,EAAE,OAAO;YACf,KAAK,EAAE,OAAO;YACd,IAAI,EAAE,MAAM;SACf,CAAC;QAEF,MAAM,QAAQ,GAAW,OAAO,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC;QAEvD,QACI,eACI,IAAI,EAAE,QAAQ,EACd,KAAK,EAAC,cAAc,GACtB,EACJ;KACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["checkIfFirefox"],"sources":["src/components/q2-message/q2-message.scss?tag=q2-message&encapsulation=shadow","src/components/q2-message/q2-message.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.message {\n border-left-width: #{var-list(var-prefixer(message-bar-width), --app-scale-1x, 5px)};\n border-left-style: solid;\n --comp-line-height: #{var-list(var-prefixer(message-line-height), --app-line-height, 1.428571429em)};\n display: grid;\n gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n align-items: flex-start;\n background: var-list(\n --tct-message-background,\n var-prefixer(message-bg),\n --tct-gray-14,\n --t-gray-14,\n --tct-gray-l3,\n --app-gray-l3,\n #f2f2f2\n );\n color: #{var-list(var-prefixer(message-font-color), inherit)};\n box-shadow: #{var-list(var-prefixer(message-box-shadow), inherit)};\n border-radius: #{var-list(var-prefixer(message-border-radius), inherit)};\n\n &:focus {\n box-shadow: var(--const-global-focus);\n }\n}\n\n.message-icon {\n --comp-top-offset: calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);\n --tct-icon-size: var(--comp-icon-size);\n top: var(--comp-top-offset);\n margin-bottom: calc(var(--comp-top-offset) * -1);\n}\n\n.message-content {\n flex: 1;\n line-height: var(--comp-line-height);\n}\n\n::slotted(ul) {\n --comp-list-default-padding: 0 0 0 var-list(--app-scale-3x, 15px);\n padding: var-list(--tct-message-list-padding, --comp-list-default-padding);\n}\n\n:host(:not([appearance])),\n:host([appearance='standard']) {\n --comp-default-margin: var-list(--app-scale-3x, 5px) 0;\n margin: var-list(--tct-message-margin, --comp-default-margin);\n\n .message {\n --comp-icon-size: #{var-list(var-prefixer(message-icon-size), 24px)};\n --comp-padding: #{var-list(var-prefixer(message-padding), --app-scale-3x, 15px)};\n grid-template-columns: var(--comp-icon-size) 1fr;\n padding: var(--comp-padding);\n padding-left: calc(var(--comp-padding) - #{var-list(--tct-scale-2, --app-scale-2x, 10px)});\n padding-bottom: calc(var(--comp-padding) - #{var-list(--tct-scale-1, --app-scale-1x, 5px)});\n }\n\n ::slotted(ul) {\n --comp-list-default-margin: var-list(--app-scale-3x, 15px) 0;\n margin: var-list(--tct-message-list-margin, --comp-list-default-margin);\n }\n}\n\n:host([appearance='minimal']) {\n margin: 0;\n\n .message {\n padding: var-list(var-prefixer(message-minimal-padding), --app-scale-2x, 10px);\n grid-template-columns: 1fr;\n }\n\n ::slotted(ul) {\n margin: var-list(--tct-scale-1, --app-scale-1x, 5px) 0;\n }\n}\n\n:host(:not([type])),\n:host([type='info']) {\n .message {\n border-left-color: var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1);\n }\n\n .message-icon,\n .message-icon {\n --tct-icon-stroke-primary: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n }\n}\n\n:host([type='success']) {\n .message {\n border-left-color: var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00);\n }\n\n .message-icon {\n --tct-icon-stroke-primary: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n }\n}\n\n:host([type='warning']) {\n .message {\n border-left-color: var-list(--tct-stoplight-warning, --const-stoplight-warning, #c35500);\n }\n\n .message-icon {\n --tct-icon-stroke-primary: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #c35500)};\n --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #c35500)};\n }\n}\n\n:host([type='error']),\n:host([type='danger']) {\n .message {\n border-left-color: var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a);\n }\n\n .message-icon,\n .message-icon {\n --tct-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a)};\n --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a)};\n }\n}\n","import { Component, Prop, h, Method, State, Element, Listen } from '@stencil/core';\nimport { isEventFromElement, isFirefox as checkIfFirefox, loc, nextPaint, overrideFocus } from 'src/utils';\n\n@Component({ tag: 'q2-message', shadow: true, styleUrl: 'q2-message.scss' })\nexport class Q2Message {\n /** The visual style of the message. The minimal style is for use cases where you have less space to display information. /\n @Prop({ reflect: true }) appearance: 'minimal' \| 'standard' = 'standard';\n\n /* Determines whether or not assistive technology immediately presents the content to the user, via the `aria-live` attribute. /\n @Prop({ reflect: true }) description: boolean = false;\n\n /* The type of message to display on the screen. /\n @Prop({ reflect: true }) type: 'info' \| 'error' \| 'danger' \| 'warning' \| 'success' = 'info';\n\n @Element() hostElement: HTMLElement;\n\n @State() presentToggle: boolean;\n\n get isFirefox() {\n return checkIfFirefox();\n }\n\n componentDidLoad(): void {\n overrideFocus(this.hostElement);\n }\n\n /\n Prompts assistive technology to announce the message.\n */\n @Method()\n async present() {\n const { isFirefox } = this;\n this.presentToggle = !this.presentToggle;\n if (!isFirefox) return;\n nextPaint(() => {\n this.presentToggle = false;\n });\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.hostElement.shadowRoot.querySelector<HTMLElement>('.message').focus();\n }\n\n render() {\n const { isFirefox } = this;\n const addAriaHiddenForAriaLive = isFirefox && this.presentToggle;\n const addDivForAriaLive = !isFirefox && this.presentToggle;\n const { description } = this;\n const messageLabel: string = loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);\n\n return (\n <div\n tabindex=\"-1\"\n class=\"message\"\n role={description ? undefined : 'alert'}\n aria-live={description ? undefined : 'assertive'}\n aria-atomic={description ? undefined : 'true'}\n aria-relevant={description && addAriaHiddenForAriaLive ? undefined : 'all'}\n test-id=\"messageContainer\"\n >\n {this.appearance === 'standard' ? this.messageIcon(this.type) : ''}\n {addDivForAriaLive && <div class=\"sr\"></div>}\n <div class=\"sr message-label\">{messageLabel}</div>\n <div\n class=\"message-content\"\n aria-hidden={addAriaHiddenForAriaLive ? 'true' : undefined}\n >\n <slot />\n </div>\n </div>\n );\n }\n\n messageIcon(type: string) {\n const iconMap = {\n success: 'success',\n warning: 'warning',\n danger: 'error',\n error: 'error',\n info: 'info',\n };\n\n const iconType: string = iconMap[type] \|\| iconMap.info;\n\n return (\n <q2-icon\n type={iconType}\n class=\"message-icon\"\n />\n );\n }\n}\n"],"version":3}
1	+ {"file":"q2-message2.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,++IAA++I,CAAC;AACrgJ,wBAAe,YAAY;;MCGd,SAAS;;;;;0BAE4C,UAAU;2BAGxB,KAAK;oBAGgC,MAAM;;;IAM3F,IAAI,SAAS;QACT,OAAOA,SAAc,EAAE,CAAC;KAC3B;IAED,gBAAgB;QACZ,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KACnC;;;;IAMD,MAAM,OAAO;QACT,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QAC3B,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;QACzC,IAAI,CAAC,SAAS;YAAE,OAAO;QACvB,SAAS,CAAC;YACN,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;SAC9B,CAAC,CAAC;KACN;IAGD,aAAa,CAAC,KAAiB;QAC3B,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;YAAE,OAAO;QACzD,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAc,UAAU,CAAC,CAAC,KAAK,EAAE,CAAC;KAC9E;IAED,MAAM;QACF,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QAC3B,MAAM,wBAAwB,GAAG,SAAS,IAAI,IAAI,CAAC,aAAa,CAAC;QACjE,MAAM,iBAAiB,GAAG,CAAC,SAAS,IAAI,IAAI,CAAC,aAAa,CAAC;QAC3D,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;QAC7B,MAAM,YAAY,GAAW,GAAG,CAAC,+BAA+B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,MAAM,EAAE,CAAC,CAAC;QAElG,QACI,4DACI,QAAQ,EAAC,IAAI,EACb,KAAK,EAAC,SAAS,EACf,IAAI,EAAE,WAAW,GAAG,SAAS,GAAG,OAAO,eAC5B,WAAW,GAAG,SAAS,GAAG,WAAW,iBACnC,WAAW,GAAG,SAAS,GAAG,MAAM,mBAC9B,WAAW,IAAI,wBAAwB,GAAG,SAAS,GAAG,KAAK,aAClE,kBAAkB,IAEzB,IAAI,CAAC,UAAU,KAAK,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,EACjE,iBAAiB,IAAI,4DAAK,KAAK,EAAC,IAAI,GAAO,EAC5C,4DAAK,KAAK,EAAC,kBAAkB,IAAE,YAAY,CAAO,EAClD,4DACI,KAAK,EAAC,iBAAiB,iBACV,wBAAwB,GAAG,MAAM,GAAG,SAAS,IAE1D,8DAAQ,CACN,CACJ,EACR;KACL;IAED,WAAW,CAAC,IAAY;QACpB,MAAM,OAAO,GAAG;YACZ,OAAO,EAAE,SAAS;YAClB,OAAO,EAAE,SAAS;YAClB,MAAM,EAAE,OAAO;YACf,KAAK,EAAE,OAAO;YACd,IAAI,EAAE,MAAM;SACf,CAAC;QAEF,MAAM,QAAQ,GAAW,OAAO,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC;QAEvD,QACI,eACI,IAAI,EAAE,QAAQ,EACd,KAAK,EAAC,cAAc,GACtB,EACJ;KACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["checkIfFirefox"],"sources":["src/components/q2-message/q2-message.scss?tag=q2-message&encapsulation=shadow","src/components/q2-message/q2-message.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.message {\n border-left-width: #{var-list(var-prefixer(message-bar-width), --app-scale-1x, 5px)};\n border-left-style: solid;\n --comp-line-height: #{var-list(var-prefixer(message-line-height), --app-line-height, 1.428571429em)};\n display: grid;\n gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n align-items: flex-start;\n background: var-list(\n --tct-message-background,\n var-prefixer(message-bg),\n --tct-gray-14,\n --t-gray-14,\n --tct-gray-l3,\n --app-gray-l3,\n #f2f2f2\n );\n color: #{var-list(var-prefixer(message-font-color), inherit)};\n box-shadow: #{var-list(var-prefixer(message-box-shadow), inherit)};\n border-radius: #{var-list(var-prefixer(message-border-radius), inherit)};\n\n &:focus {\n box-shadow: var(--const-global-focus);\n }\n}\n\n.message-icon {\n --comp-top-offset: calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);\n --tct-icon-size: var(--comp-icon-size);\n top: var(--comp-top-offset);\n margin-bottom: calc(var(--comp-top-offset) * -1);\n}\n\n.message-content {\n flex: 1;\n line-height: var(--comp-line-height);\n}\n\n::slotted(ul) {\n --comp-list-default-padding: 0 0 0 #{var-list(--app-scale-3x, 15px)};\n padding: var-list(--tct-message-list-padding, --comp-list-default-padding);\n}\n\n:host(:not([appearance])),\n:host([appearance='standard']) {\n --comp-default-margin: #{var-list(--app-scale-3x, 5px)} 0;\n margin: var-list(--tct-message-margin, --comp-default-margin);\n\n .message {\n --comp-icon-size: #{var-list(var-prefixer(message-icon-size), 24px)};\n --comp-padding: #{var-list(var-prefixer(message-padding), --app-scale-3x, 15px)};\n grid-template-columns: var(--comp-icon-size) 1fr;\n padding: var(--comp-padding);\n padding-left: calc(var(--comp-padding) - #{var-list(--tct-scale-2, --app-scale-2x, 10px)});\n padding-bottom: calc(var(--comp-padding) - #{var-list(--tct-scale-1, --app-scale-1x, 5px)});\n }\n\n ::slotted(ul) {\n --comp-list-default-margin: #{var-list(--app-scale-3x, 15px) 0};\n margin: var-list(--tct-message-list-margin, --comp-list-default-margin);\n }\n}\n\n:host([appearance='minimal']) {\n margin: 0;\n\n .message {\n padding: var-list(var-prefixer(message-minimal-padding), --app-scale-2x, 10px);\n grid-template-columns: 1fr;\n }\n\n ::slotted(ul) {\n margin: var-list(--tct-scale-1, --app-scale-1x, 5px) 0;\n }\n}\n\n:host(:not([type])),\n:host([type='info']) {\n .message {\n border-left-color: var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1);\n }\n\n .message-icon,\n .message-icon {\n --tct-icon-stroke-primary: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n }\n}\n\n:host([type='success']) {\n .message {\n border-left-color: var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00);\n }\n\n .message-icon {\n --tct-icon-stroke-primary: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n }\n}\n\n:host([type='warning']) {\n .message {\n border-left-color: var-list(--tct-stoplight-warning, --const-stoplight-warning, #c35500);\n }\n\n .message-icon {\n --tct-icon-stroke-primary: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #c35500)};\n --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #c35500)};\n }\n}\n\n:host([type='error']),\n:host([type='danger']) {\n .message {\n border-left-color: var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a);\n }\n\n .message-icon,\n .message-icon {\n --tct-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a)};\n --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a)};\n }\n}\n","import { Component, Prop, h, Method, State, Element, Listen } from '@stencil/core';\nimport { isEventFromElement, isFirefox as checkIfFirefox, loc, nextPaint, overrideFocus } from 'src/utils';\n\n@Component({ tag: 'q2-message', shadow: true, styleUrl: 'q2-message.scss' })\nexport class Q2Message {\n /** The visual style of the message. The minimal style is for use cases where you have less space to display information. /\n @Prop({ reflect: true }) appearance: 'minimal' \| 'standard' = 'standard';\n\n /* Determines whether or not assistive technology immediately presents the content to the user, via the `aria-live` attribute. /\n @Prop({ reflect: true }) description: boolean = false;\n\n /* The type of message to display on the screen. /\n @Prop({ reflect: true }) type: 'info' \| 'error' \| 'danger' \| 'warning' \| 'success' = 'info';\n\n @Element() hostElement: HTMLElement;\n\n @State() presentToggle: boolean;\n\n get isFirefox() {\n return checkIfFirefox();\n }\n\n componentDidLoad(): void {\n overrideFocus(this.hostElement);\n }\n\n /\n Prompts assistive technology to announce the message.\n */\n @Method()\n async present() {\n const { isFirefox } = this;\n this.presentToggle = !this.presentToggle;\n if (!isFirefox) return;\n nextPaint(() => {\n this.presentToggle = false;\n });\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.hostElement.shadowRoot.querySelector<HTMLElement>('.message').focus();\n }\n\n render() {\n const { isFirefox } = this;\n const addAriaHiddenForAriaLive = isFirefox && this.presentToggle;\n const addDivForAriaLive = !isFirefox && this.presentToggle;\n const { description } = this;\n const messageLabel: string = loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);\n\n return (\n <div\n tabindex=\"-1\"\n class=\"message\"\n role={description ? undefined : 'alert'}\n aria-live={description ? undefined : 'assertive'}\n aria-atomic={description ? undefined : 'true'}\n aria-relevant={description && addAriaHiddenForAriaLive ? undefined : 'all'}\n test-id=\"messageContainer\"\n >\n {this.appearance === 'standard' ? this.messageIcon(this.type) : ''}\n {addDivForAriaLive && <div class=\"sr\"></div>}\n <div class=\"sr message-label\">{messageLabel}</div>\n <div\n class=\"message-content\"\n aria-hidden={addAriaHiddenForAriaLive ? 'true' : undefined}\n >\n <slot />\n </div>\n </div>\n );\n }\n\n messageIcon(type: string) {\n const iconMap = {\n success: 'success',\n warning: 'warning',\n danger: 'error',\n error: 'error',\n info: 'info',\n };\n\n const iconType: string = iconMap[type] \|\| iconMap.info;\n\n return (\n <q2-icon\n type={iconType}\n class=\"message-icon\"\n />\n );\n }\n}\n"],"version":3}

package/dist/components/q2-stepper-vertical.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@sten
 import { o as overrideFocus, c as createGuid, i as isEventFromElement, l as loc } from './index2.js';
 import { d as defineCustomElement$2 } from './q2-icon2.js';
-const q2StepperVerticalCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:grid;grid-template-columns:var(--tct-stepper-vertical-list-width, var(--tct-advanced-stepper-list-width, var(--t-advanced-stepper-list-width, 180px))) 1fr;gap:var(--tct-stepper-vertical-layout-gap, var(--tct-advanced-stepper-layout-gap, var(--t-advanced-stepper-layout-gap, 120px)))}.step-label,.step-child-label{color:var(--comp-btn-label-color);font-size:var(--comp-btn-label-font-size);font-weight:var(--comp-label-font-weight, 400);min-height:1.5em}.step-label{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-label-line-count, var(--tct-advanced-stepper-label-line-count, var(--t-advanced-stepper-label-line-count, 2)));-webkit-box-orient:vertical}[aria-selected=true] .step-label{font-weight:var(--tct-stepper-vertical-btn-active-font-weight, var(--tct-advanced-stepper-btn-active-font-weight, var(--t-advanced-stepper-btn-active-font-weight, 600)))}[aria-describedby] .step-label{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-label-line-count, var(--tct-advanced-stepper-label-line-count, var(--t-advanced-stepper-label-line-count, 1)));-webkit-box-orient:vertical}.step-child-label{grid-area:content;color:var(--comp-btn-label-color)}.step-description{color:var(--tct-stepper-vertical-description-color, var(--tct-advanced-stepper-description-color, var(--t-advanced-stepper-description-color, var(--t-textA, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-stepper-vertical-description-font-size, var(--tct-advanced-stepper-description-font-size, var(--t-advanced-stepper-description-font-size, var(--app-font-size-small, 12px))));padding-bottom:0.2em}ul{--comp-top-btn-icon-size:var(--tct-stepper-vertical-btn-icon-size, var(--tct-advanced-stepper-btn-icon-size, var(--t-advanced-stepper-btn-icon-size, 24px)));--comp-btn-icon-size:var(--comp-top-btn-icon-size);--comp-btn-content-gap:var(--tct-stepper-vertical-btn-gap, var(--tct-advanced-stepper-btn-gap, var(--t-advanced-stepper-btn-gap, var(--app-scale-3x, 15px))));--comp-btn-label-font-size:var-list(\n      --tct-stepper-vertical-btn-label-font-size,\n      var-prefixer(advanced-stepper-btn-label-font-size),\n      16px\n  );--comp-btn-label-color:var(--tct-stepper-vertical-label-color, var(--tct-advanced-stepper-label-color, var(--t-advanced-stepper-label-color, var(--t-text, #4d4d4d))));--comp-tween:var(--tct-stepper-vertical-tween, var(--tct-advanced-stepper-tween, var(--t-advanced-stepper-tween, var(--app-tween-1, 0.2s ease))));--comp-bullet-bg:var(--tct-stepper-vertical-bullet-active-background, var(--tct-advanced-stepper-bullet-active-bg, var(--t-advanced-stepper-bullet-active-bg, var(--t-primary, #0079c1))));list-style:none;margin:0;padding:0}ul ul{--comp-btn-icon-size:var(--tct-stepper-vertical-child-btn-icon-size, var(--tct-advanced-stepper-child-btn-icon-size, var(--t-advanced-stepper-child-btn-icon-size, 12px)));--comp-btn-content-gap:var(--tct-stepper-vertical-btn-gap, var(--tct-advanced-stepper-btn-gap, var(--t-advanced-stepper-btn-gap, var(--app-scale-2x, 10px))));--comp-btn-label-font-size:var-list(\n      --tct-stepper-vertical-child-btn-label-font-size,\n      var-prefixer(advanced-stepper-child-btn-label-font-size),\n      --app-font-size-small,\n      12px\n  )}ul ul[aria-hidden=true]{display:none}.step-btn,.step-child-btn{display:grid;grid-template-columns:var(--comp-btn-icon-size) 1fr;gap:var(--comp-btn-content-gap);text-align:var(--tct-stepper-vertical-btn-text-align, var(--tct-advanced-stepper-btn-text-align, var(--t-advanced-stepper-btn-text-align, start)));grid-template-areas:\"icon content\";align-items:center;width:100%;position:relative;background:transparent;border:0;cursor:pointer;padding:0;transition-property:box-shadow;outline:none}.step-btn[aria-disabled],.step-child-btn[aria-disabled]{cursor:default;--comp-label-font-weight:300;--comp-btn-label-color:var(--tct-stepper-vertical-btn-locked-color, var(--tct-advanced-stepper-btn-locked-color, var(--t-advanced-stepper-btn-locked-color, var(--t-textA, rgba(77, 77, 77, 0.77)))))}.step-btn[aria-selected=true],.step-child-btn[aria-selected=true]{--comp-label-font-weight:600}.step-btn{min-height:var(--tct-stepper-vertical-btn-height, var(--tct-advanced-stepper-btn-height, var(--t-advanced-stepper-btn-height, 40px)));font-size:var(--tct-stepper-vertical-btn-font-size, var(--tct-advanced-stepper-btn-font-size, var(--t-advanced-stepper-btn-font-size, 16px)));--comp-active-color:var(--comp-bullet-bg)}.step-btn.status-complete{--comp-active-color:var(--const-stoplight-success, #0e8a00)}.step-btn.status-error{--comp-active-color:var(--const-stoplight-alert, #d20a0a)}.step-btn.status-locked{cursor:not-allowed}.step-child-btn{--comp-active-color:var(--comp-bullet-bg);min-height:var(--tct-stepper-vertical-child-btn-height, var(--tct-advanced-stepper-child-btn-height, var(--t-advanced-stepper-child-btn-height, 30px)));padding-left:var(--tct-stepper-vertical-child-btn-left-padding, var(--tct-advanced-stepper-child-btn-left-padding, var(--t-advanced-stepper-child-btn-left-padding, var(--app-scale-2x, 10px))));font-size:var(--tct-stepper-vertical-child-btn-font-size, var(--tct-advanced-stepper-child-btn-font-size, var(--t-advanced-stepper-child-btn-font-size, 12px)));border-left-width:var(--tct-stepper-vertical-child-btn-left-border-width, var(--tct-advanced-stepper-child-btn-left-border-width, var(--t-advanced-stepper-child-btn-left-border-width, 3px)));border-left-style:var(--tct-stepper-vertical-child-btn-left-border-style, var(--tct-advanced-stepper-child-btn-left-border-style, var(--t-advanced-stepper-child-btn-left-border-style, solid)));border-left-color:transparent}.step-child-btn[aria-selected=true]{--comp-btn-label-color:var(--comp-active-color);border-left-color:var(--comp-active-color)}.step-child-btn.status-error{--comp-btn-label-color:var(--const-stoplight-alert, #d20a0a);--comp-active-color:var(--const-stoplight-alert, #d20a0a)}.step-child-btn.status-locked{cursor:not-allowed}.step-content{grid-area:content}.step-icon,.step-bubble,.step-child-icon{grid-area:icon;width:var(--comp-btn-icon-size);height:var(--comp-btn-icon-size);line-height:0}.step-icon q2-icon,.step-bubble q2-icon,.step-child-icon q2-icon{width:var(--comp-btn-icon-size);height:var(--comp-btn-icon-size);--tct-icon-fill:var(--comp-active-color)}.step-icon,.step-bubble{background:var(--comp-active-color);color:var(--t-base, #ffffff);border-radius:50%}.status-complete .step-icon,.status-error .step-icon,.status-complete .step-bubble,.status-error .step-bubble{background:var(--comp-active-color)}.step-icon q2-icon,.step-bubble q2-icon{--tct-icon-fill:var(--comp-active-color)}.step-icon q2-icon:before,.step-bubble q2-icon:before{content:\"\";display:block;background:var(--t-base, #ffffff);position:absolute;width:80%;height:80%;left:11%;top:11%;border-radius:50%}.status-locked .step-icon,.status-locked .step-bubble{background:var(--t-gray-12, #d9d9d9);color:var(--t-text, #4d4d4d)}[aria-selected=true] .step-icon,[aria-selected=true] .step-bubble{box-shadow:0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color)}.step-bubble{display:flex;justify-content:center;align-items:center;line-height:0}.step-child-icon q2-icon{--tct-icon-stroke-primary:var(--comp-active-color);--tct-icon-stroke-secondary:var(--comp-active-color)}[aria-selected=true] .step-child-icon q2-icon{fill:var(--comp-active-color);--tct-icon-stroke-secondary:var(--t-base, #ffffff)}.spacer{height:0;border-left-width:var(--tct-stepper-vertical-child-border-width, var(--tct-advanced-stepaer-child-border-width, var(--t-advanced-stepaer-child-border-width, 1px)));border-left-style:var(--tct-stepper-vertical-child-border-style, var(--tct-advanced-stepper-child-border-style, var(--t-advanced-stepper-child-border-style, solid)));border-left-color:var(--tct-stepper-vertical-child-border-color, var(--tct-advanced-stepper-child-border-color, var(--t-advanced-stepper-child-border-color, var(--t-gray-12, #d9d9d9))));overflow:hidden;margin-left:calc(var(--comp-top-btn-icon-size) / 2);transition:height var(--comp-tween)}.spacer.has-sibling{height:var(--tct-stepper-vertical-spacer-height, var(--tct-advanced-stepper-spacer-height, var(--t-advanced-stepper-spacer-height, var(--app-scale-6x, 30px))))}.spacer ul{opacity:0;transition:opacity var(--comp-tween)}.spacer.is-opening ul,.spacer.is-open ul{display:block;opacity:1 !important}.spacer.is-open{overflow:visible}";
+const q2StepperVerticalCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:grid;grid-template-columns:var(--tct-stepper-vertical-list-width, var(--tct-advanced-stepper-list-width, var(--t-advanced-stepper-list-width, 180px))) 1fr;gap:var(--tct-stepper-vertical-layout-gap, var(--tct-advanced-stepper-layout-gap, var(--t-advanced-stepper-layout-gap, 120px)))}.step-label,.step-child-label{color:var(--comp-btn-label-color);font-size:var(--comp-btn-label-font-size);font-weight:var(--comp-label-font-weight, 400);min-height:1.5em}.step-label{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-label-line-count, var(--tct-advanced-stepper-label-line-count, var(--t-advanced-stepper-label-line-count, 2)));-webkit-box-orient:vertical}[aria-selected=true] .step-label{font-weight:var(--tct-stepper-vertical-btn-active-font-weight, var(--tct-advanced-stepper-btn-active-font-weight, var(--t-advanced-stepper-btn-active-font-weight, 600)))}[aria-describedby] .step-label{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-label-line-count, var(--tct-advanced-stepper-label-line-count, var(--t-advanced-stepper-label-line-count, 1)));-webkit-box-orient:vertical}.step-child-label{grid-area:content;color:var(--comp-btn-label-color)}.step-description{color:var(--tct-stepper-vertical-description-color, var(--tct-advanced-stepper-description-color, var(--t-advanced-stepper-description-color, var(--t-textA, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-stepper-vertical-description-font-size, var(--tct-advanced-stepper-description-font-size, var(--t-advanced-stepper-description-font-size, var(--app-font-size-small, 12px))));padding-bottom:0.2em}ul{--comp-top-btn-icon-size:var(--tct-stepper-vertical-btn-icon-size, var(--tct-advanced-stepper-btn-icon-size, var(--t-advanced-stepper-btn-icon-size, 24px)));--comp-btn-icon-size:var(--comp-top-btn-icon-size);--comp-btn-content-gap:var(--tct-stepper-vertical-btn-gap, var(--tct-advanced-stepper-btn-gap, var(--t-advanced-stepper-btn-gap, var(--app-scale-3x, 15px))));--comp-btn-label-font-size:var(--tct-stepper-vertical-btn-label-font-size, var(--tct-advanced-stepper-btn-label-font-size, var(--t-advanced-stepper-btn-label-font-size, 16px)));--comp-btn-label-color:var(--tct-stepper-vertical-label-color, var(--tct-advanced-stepper-label-color, var(--t-advanced-stepper-label-color, var(--t-text, #4d4d4d))));--comp-tween:var(--tct-stepper-vertical-tween, var(--tct-advanced-stepper-tween, var(--t-advanced-stepper-tween, var(--app-tween-1, 0.2s ease))));--comp-bullet-bg:var(--tct-stepper-vertical-bullet-active-background, var(--tct-advanced-stepper-bullet-active-bg, var(--t-advanced-stepper-bullet-active-bg, var(--t-primary, #0079c1))));list-style:none;margin:0;padding:0}ul ul{--comp-btn-icon-size:var(--tct-stepper-vertical-child-btn-icon-size, var(--tct-advanced-stepper-child-btn-icon-size, var(--t-advanced-stepper-child-btn-icon-size, 12px)));--comp-btn-content-gap:var(--tct-stepper-vertical-btn-gap, var(--tct-advanced-stepper-btn-gap, var(--t-advanced-stepper-btn-gap, var(--app-scale-2x, 10px))));--comp-btn-label-font-size:var(--tct-stepper-vertical-child-btn-label-font-size, var(--tct-advanced-stepper-child-btn-label-font-size, var(--t-advanced-stepper-child-btn-label-font-size, var(--app-font-size-small, 12px))))}ul ul[aria-hidden=true]{display:none}.step-btn,.step-child-btn{display:grid;grid-template-columns:var(--comp-btn-icon-size) 1fr;gap:var(--comp-btn-content-gap);text-align:var(--tct-stepper-vertical-btn-text-align, var(--tct-advanced-stepper-btn-text-align, var(--t-advanced-stepper-btn-text-align, start)));grid-template-areas:\"icon content\";align-items:center;width:100%;position:relative;background:transparent;border:0;cursor:pointer;padding:0;transition-property:box-shadow;outline:none}.step-btn[aria-disabled],.step-child-btn[aria-disabled]{cursor:default;--comp-label-font-weight:300;--comp-btn-label-color:var(--tct-stepper-vertical-btn-locked-color, var(--tct-advanced-stepper-btn-locked-color, var(--t-advanced-stepper-btn-locked-color, var(--t-textA, rgba(77, 77, 77, 0.77)))))}.step-btn[aria-selected=true],.step-child-btn[aria-selected=true]{--comp-label-font-weight:600}.step-btn{min-height:var(--tct-stepper-vertical-btn-height, var(--tct-advanced-stepper-btn-height, var(--t-advanced-stepper-btn-height, 40px)));font-size:var(--tct-stepper-vertical-btn-font-size, var(--tct-advanced-stepper-btn-font-size, var(--t-advanced-stepper-btn-font-size, 16px)));--comp-active-color:var(--comp-bullet-bg)}.step-btn.status-complete{--comp-active-color:var(--const-stoplight-success, #0e8a00);--tct-stoplight-success:var(--comp-active-color)}.step-btn.status-error{--comp-active-color:var(--const-stoplight-alert, #d20a0a);--tct-stoplight-warning:var(--comp-active-color)}.step-btn.status-locked{cursor:not-allowed}.step-child-btn{--comp-active-color:var(--comp-bullet-bg);min-height:var(--tct-stepper-vertical-child-btn-height, var(--tct-advanced-stepper-child-btn-height, var(--t-advanced-stepper-child-btn-height, 30px)));padding-left:var(--tct-stepper-vertical-child-btn-left-padding, var(--tct-advanced-stepper-child-btn-left-padding, var(--t-advanced-stepper-child-btn-left-padding, var(--app-scale-2x, 10px))));font-size:var(--tct-stepper-vertical-child-btn-font-size, var(--tct-advanced-stepper-child-btn-font-size, var(--t-advanced-stepper-child-btn-font-size, 12px)));border-left-width:var(--tct-stepper-vertical-child-btn-left-border-width, var(--tct-advanced-stepper-child-btn-left-border-width, var(--t-advanced-stepper-child-btn-left-border-width, 3px)));border-left-style:var(--tct-stepper-vertical-child-btn-left-border-style, var(--tct-advanced-stepper-child-btn-left-border-style, var(--t-advanced-stepper-child-btn-left-border-style, solid)));border-left-color:transparent}.step-child-btn[aria-selected=true]{--comp-btn-label-color:var(--comp-active-color);border-left-color:var(--comp-active-color)}.step-child-btn.status-error{--comp-btn-label-color:var(--const-stoplight-alert, #d20a0a);--comp-active-color:var(--const-stoplight-alert, #d20a0a)}.step-child-btn.status-locked{cursor:not-allowed}.step-content{grid-area:content}.step-icon,.step-bubble,.step-child-icon{grid-area:icon;width:var(--comp-btn-icon-size);height:var(--comp-btn-icon-size);line-height:0}.step-icon q2-icon,.step-bubble q2-icon,.step-child-icon q2-icon{width:var(--comp-btn-icon-size);height:var(--comp-btn-icon-size);--tct-stoplight-warning:var(--comp-active-color)}.step-icon,.step-bubble{background:var(--comp-active-color);color:var(--t-base, #ffffff);border-radius:50%}.status-complete .step-icon,.status-error .step-icon,.status-complete .step-bubble,.status-error .step-bubble{background:var(--comp-active-color)}.step-icon q2-icon:before,.step-bubble q2-icon:before{content:\"\";display:block;background:var(--t-base, #ffffff);position:absolute;width:80%;height:80%;left:11%;top:11%;border-radius:50%}.status-locked .step-icon,.status-locked .step-bubble{background:var(--t-gray-12, #d9d9d9);color:var(--t-text, #4d4d4d)}[aria-selected=true] .step-icon,[aria-selected=true] .step-bubble{box-shadow:0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color)}.step-bubble{display:flex;justify-content:center;align-items:center;line-height:0}.step-child-icon q2-icon{--tct-icon-stroke-primary:var(--comp-active-color);--tct-icon-stroke-secondary:var(--comp-active-color)}[aria-selected=true] .step-child-icon q2-icon{fill:var(--comp-active-color);--tct-icon-stroke-secondary:var(--t-base, #ffffff)}.spacer{height:0;border-left-width:var(--tct-stepper-vertical-child-border-width, var(--tct-advanced-stepaer-child-border-width, var(--t-advanced-stepaer-child-border-width, 1px)));border-left-style:var(--tct-stepper-vertical-child-border-style, var(--tct-advanced-stepper-child-border-style, var(--t-advanced-stepper-child-border-style, solid)));border-left-color:var(--tct-stepper-vertical-child-border-color, var(--tct-advanced-stepper-child-border-color, var(--t-advanced-stepper-child-border-color, var(--t-gray-12, #d9d9d9))));overflow:hidden;margin-left:calc(var(--comp-top-btn-icon-size) / 2);transition:height var(--comp-tween)}.spacer.has-sibling{height:var(--tct-stepper-vertical-spacer-height, var(--tct-advanced-stepper-spacer-height, var(--t-advanced-stepper-spacer-height, var(--app-scale-6x, 30px))))}.spacer ul{opacity:0;transition:opacity var(--comp-tween)}.spacer.is-opening ul,.spacer.is-open ul{display:block;opacity:1 !important}.spacer.is-open{overflow:visible}";
 const Q2StepperVerticalStyle0 = q2StepperVerticalCss;
 const Q2StepperVertical$1 = /*@__PURE__*/ proxyCustomElement(class Q2StepperVertical extends HTMLElement {

package/dist/components/q2-stepper-vertical.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-stepper-vertical.js","mappings":"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","names":["Q2StepperVertical"],"sources":["src/components/q2-stepper-vertical/q2-stepper-vertical.scss?tag=q2-stepper-vertical&encapsulation=shadow","src/components/q2-stepper-vertical/q2-stepper-vertical.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: grid;\n grid-template-columns: var-list(--tct-stepper-vertical-list-width, var-prefixer(advanced-stepper-list-width), 180px) 1fr;\n gap: var-list(--tct-stepper-vertical-layout-gap, var-prefixer(advanced-stepper-layout-gap), 120px);\n}\n\n.step-label,\n.step-child-label {\n color: var(--comp-btn-label-color);\n font-size: var(--comp-btn-label-font-size);\n font-weight: var(--comp-label-font-weight, 400);\n min-height: 1.5em;\n}\n\n.step-label {\n @include line-clamp(var-list(--tct-stepper-label-line-count, var-prefixer(advanced-stepper-label-line-count), 2));\n\n [aria-selected='true'] & {\n font-weight: var-list(\n --tct-stepper-vertical-btn-active-font-weight,\n var-prefixer(advanced-stepper-btn-active-font-weight),\n 600\n );\n }\n\n [aria-describedby] & {\n @include line-clamp(\n var-list(--tct-stepper-label-line-count, var-prefixer(advanced-stepper-label-line-count), 1)\n );\n }\n}\n\n.step-child-label {\n grid-area: content;\n color: var(--comp-btn-label-color);\n}\n\n.step-description {\n color: var-list(\n --tct-stepper-vertical-description-color,\n var-prefixer(advanced-stepper-description-color),\n --t-textA,\n rgba(77, 77, 77, 0.77)\n );\n font-size: var-list(\n --tct-stepper-vertical-description-font-size,\n var-prefixer(advanced-stepper-description-font-size),\n --app-font-size-small,\n 12px\n );\n\n // Add padding for descenders\n padding-bottom: 0.2em;\n}\n\nul {\n --comp-top-btn-icon-size: #{var-list(\n --tct-stepper-vertical-btn-icon-size,\n var-prefixer(advanced-stepper-btn-icon-size),\n 24px\n )};\n --comp-btn-icon-size: #{var(--comp-top-btn-icon-size)};\n --comp-btn-content-gap: #{var-list(\n --tct-stepper-vertical-btn-gap,\n var-prefixer(advanced-stepper-btn-gap),\n --app-scale-3x,\n 15px\n )};\n --comp-btn-label-font-size: var-list(\n --tct-stepper-vertical-btn-label-font-size,\n var-prefixer(advanced-stepper-btn-label-font-size),\n 16px\n );\n --comp-btn-label-color: #{var-list(\n --tct-stepper-vertical-label-color,\n var-prefixer(advanced-stepper-label-color),\n --t-text,\n #4d4d4d\n )};\n --comp-tween: #{var-list(\n --tct-stepper-vertical-tween,\n var-prefixer(advanced-stepper-tween),\n --app-tween-1,\n unquote('0.2s ease')\n )};\n --comp-bullet-bg: #{var-list(\n --tct-stepper-vertical-bullet-active-background,\n var-prefixer(advanced-stepper-bullet-active-bg),\n --t-primary,\n #0079c1\n )};\n\n list-style: none;\n margin: 0;\n padding: 0;\n\n ul {\n --comp-btn-icon-size: #{var-list(\n --tct-stepper-vertical-child-btn-icon-size,\n var-prefixer(advanced-stepper-child-btn-icon-size),\n 12px\n )};\n --comp-btn-content-gap: #{var-list(\n --tct-stepper-vertical-btn-gap,\n var-prefixer(advanced-stepper-btn-gap),\n --app-scale-2x,\n 10px\n )};\n --comp-btn-label-font-size: var-list(\n --tct-stepper-vertical-child-btn-label-font-size,\n var-prefixer(advanced-stepper-child-btn-label-font-size),\n --app-font-size-small,\n 12px\n );\n\n &[aria-hidden='true'] {\n display: none;\n }\n }\n}\n\n.step-btn,\n.step-child-btn {\n display: grid;\n grid-template-columns: var(--comp-btn-icon-size) 1fr;\n gap: var(--comp-btn-content-gap);\n text-align: var-list(--tct-stepper-vertical-btn-text-align, var-prefixer(advanced-stepper-btn-text-align), start);\n grid-template-areas: 'icon content';\n align-items: center;\n width: 100%;\n position: relative;\n background: transparent;\n border: 0;\n cursor: pointer;\n padding: 0;\n transition-property: box-shadow;\n outline: none;\n\n &[aria-disabled] {\n cursor: default;\n --comp-label-font-weight: 300;\n --comp-btn-label-color: #{var-list(\n --tct-stepper-vertical-btn-locked-color,\n var-prefixer(advanced-stepper-btn-locked-color),\n --t-textA,\n rgba(77, 77, 77, 0.77)\n )};\n }\n\n &[aria-selected='true'] {\n --comp-label-font-weight: 600;\n }\n}\n\n.step-btn {\n min-height: var-list(--tct-stepper-vertical-btn-height, var-prefixer(advanced-stepper-btn-height), 40px);\n font-size: var-list(--tct-stepper-vertical-btn-font-size, var-prefixer(advanced-stepper-btn-font-size), 16px);\n\n --comp-active-color: var(--comp-bullet-bg);\n &.status-complete {\n --comp-active-color: var(--const-stoplight-success, #0e8a00);\n }\n &.status-error {\n --comp-active-color: var(--const-stoplight-alert, #d20a0a);\n }\n &.status-locked {\n cursor: not-allowed;\n }\n}\n\n.step-child-btn {\n --comp-active-color: var(--comp-bullet-bg);\n\n min-height: var-list(\n --tct-stepper-vertical-child-btn-height,\n var-prefixer(advanced-stepper-child-btn-height),\n 30px\n );\n padding-left: var-list(\n --tct-stepper-vertical-child-btn-left-padding,\n var-prefixer(advanced-stepper-child-btn-left-padding),\n --app-scale-2x,\n 10px\n );\n font-size: var-list(\n --tct-stepper-vertical-child-btn-font-size,\n var-prefixer(advanced-stepper-child-btn-font-size),\n 12px\n );\n border-left-width: var-list(\n --tct-stepper-vertical-child-btn-left-border-width,\n var-prefixer(advanced-stepper-child-btn-left-border-width),\n 3px\n );\n border-left-style: var-list(\n --tct-stepper-vertical-child-btn-left-border-style,\n var-prefixer(advanced-stepper-child-btn-left-border-style),\n solid\n );\n border-left-color: transparent;\n\n &[aria-selected='true'] {\n --comp-btn-label-color: var(--comp-active-color);\n border-left-color: var(--comp-active-color);\n }\n\n &.status-error {\n --comp-btn-label-color: var(--const-stoplight-alert, #d20a0a);\n --comp-active-color: var(--const-stoplight-alert, #d20a0a);\n }\n\n &.status-locked {\n cursor: not-allowed;\n }\n}\n\n.step-content {\n grid-area: content;\n}\n\n.step-icon,\n.step-bubble,\n.step-child-icon {\n grid-area: icon;\n width: var(--comp-btn-icon-size);\n height: var(--comp-btn-icon-size);\n line-height: 0;\n\n q2-icon {\n width: var(--comp-btn-icon-size);\n height: var(--comp-btn-icon-size);\n --tct-icon-fill: var(--comp-active-color);\n }\n}\n\n.step-icon,\n.step-bubble {\n background: var(--comp-active-color);\n color: var(--t-base, #ffffff);\n border-radius: 50%;\n\n .status-complete &,\n .status-error & {\n background: var(--comp-active-color);\n }\n\n q2-icon {\n --tct-icon-fill: var(--comp-active-color);\n &:before {\n content: '';\n display: block;\n background: var(--t-base, #ffffff);\n position: absolute;\n width: 80%;\n height: 80%;\n left: 11%;\n top: 11%;\n border-radius: 50%;\n }\n }\n\n // Text-based statuses\n .status-locked & {\n background: var(--t-gray-12, #d9d9d9);\n color: var(--t-text, #4d4d4d);\n }\n\n [aria-selected='true'] & {\n box-shadow:\n 0 0 0 2px var(--t-base, #ffffff),\n 0 0 0 4px var(--comp-active-color);\n }\n}\n\n.step-bubble {\n display: flex;\n justify-content: center;\n align-items: center;\n line-height: 0;\n}\n\n.step-child-icon {\n q2-icon {\n --tct-icon-stroke-primary: var(--comp-active-color);\n --tct-icon-stroke-secondary: var(--comp-active-color);\n }\n [aria-selected='true'] & {\n q2-icon {\n fill: var(--comp-active-color);\n --tct-icon-stroke-secondary: var(--t-base, #ffffff);\n }\n }\n}\n\n.spacer {\n height: 0;\n border-left-width: var-list(\n --tct-stepper-vertical-child-border-width,\n var-prefixer(advanced-stepaer-child-border-width),\n 1px\n );\n border-left-style: var-list(\n --tct-stepper-vertical-child-border-style,\n var-prefixer(advanced-stepper-child-border-style),\n solid\n );\n border-left-color: var-list(\n --tct-stepper-vertical-child-border-color,\n var-prefixer(advanced-stepper-child-border-color),\n --t-gray-12,\n #d9d9d9\n );\n overflow: hidden;\n margin-left: calc(var(--comp-top-btn-icon-size) / 2);\n transition: height var(--comp-tween);\n\n &.has-sibling {\n height: var-list(\n --tct-stepper-vertical-spacer-height,\n var-prefixer(advanced-stepper-spacer-height),\n --app-scale-6x,\n 30px\n );\n }\n\n ul {\n opacity: 0;\n transition: opacity var(--comp-tween);\n }\n\n &.is-opening,\n &.is-open {\n ul {\n display: block;\n opacity: 1 !important;\n }\n }\n\n &.is-open {\n overflow: visible;\n }\n}\n","import {\n Component,\n Prop,\n h,\n Element,\n ComponentInterface,\n State,\n Watch,\n Listen,\n Event,\n EventEmitter,\n Fragment,\n} from '@stencil/core';\nimport { loc, overrideFocus, isEventFromElement, createGuid } from 'src/utils';\n\ninterface IBaseStructuredPane {\n id: string;\n label: string;\n description: string;\n isActive: boolean;\n status: string;\n}\n\ninterface IStructuredPane extends IBaseStructuredPane {\n children: IBaseStructuredPane[];\n}\n\n@Component({ tag: 'q2-stepper-vertical', shadow: true, styleUrl: 'q2-stepper-vertical.scss' })\nexport class Q2StepperVertical implements ComponentInterface {\n /** The `id` of the currently selected `q2-stepper-pane`. /\n @Prop({ reflect: true, mutable: true }) currentStepId: string;\n\n @Element() hostElement: HTMLElement;\n\n /\n Emitted when the selected step changes.\n * @legacyEvent\n */\n @Event() change: EventEmitter<{\n selectedStep: HTMLQ2StepperPaneElement;\n selectedStepId: string;\n currentStepId: string;\n }>;\n @State() structuredPanes: IStructuredPane[] = [];\n mutationObserver: MutationObserver;\n expandedStepChildrenList: HTMLUListElement;\n scheduledAfterRender: (() => void)[] = [];\n\n /// LifeCycle Hooks ///\n componentWillLoad() {\n this.setDefaultPane();\n this.buildPaneList();\n const observer = new MutationObserver(this.determinePaneChanges);\n const observerOptions = {\n childList: true,\n };\n observer.observe(this.hostElement, observerOptions);\n this.allRootPanes.forEach(pane => {\n const childrenSlot = pane.querySelector('[slot=children]');\n if (childrenSlot) observer.observe(childrenSlot, observerOptions);\n });\n this.mutationObserver = observer;\n }\n\n componentDidLoad() {\n overrideFocus(this.hostElement);\n setTimeout(() => this.showStep(this.currentStepId), 0);\n }\n\n componentWillUpdate() {\n this.expandedStepChildrenList = null;\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n\n this.openCurrentStepChildren();\n }\n\n disconnectedCallback() {\n this.mutationObserver.disconnect();\n this.mutationObserver = null;\n }\n\n /// Getters ///\n get allRootPanes() {\n return Array.from(this.hostElement.querySelectorAll<HTMLQ2StepperPaneElement>(':scope > q2-stepper-pane'));\n }\n\n get allPanes() {\n return Array.from(this.hostElement.querySelectorAll<HTMLQ2StepperPaneElement>('q2-stepper-pane'));\n }\n\n /// Helpers ///\n setDefaultPane() {\n if (this.currentStepId) return;\n const firstEnabledStep = this.hostElement.querySelector('q2-stepper-pane');\n if (!firstEnabledStep) return;\n if (!firstEnabledStep.id) firstEnabledStep.id = `step-${createGuid()}`;\n this.currentStepId = firstEnabledStep.id;\n }\n\n determinePaneChanges = (mutations: MutationRecord[]) => {\n mutations.forEach(mutation => {\n if (mutation.type !== 'childList') return;\n if (!mutation.addedNodes.length && !mutation.removedNodes.length) return;\n if (\n mutation.addedNodes[0]?.nodeType !== Node.ELEMENT_NODE &&\n mutation.removedNodes[0]?.nodeType !== Node.ELEMENT_NODE\n )\n return;\n this.buildPaneList();\n });\n };\n\n getStepId(currentStepId: string, goTo: string) {\n const allEnabledStepBtns = Array.from(\n this.hostElement.shadowRoot.querySelectorAll<HTMLQ2StepperPaneElement>(\n 'ul:not([aria-hidden=\"true\"]) > li > button:not([aria-disabled=\"true\"])'\n )\n );\n const currentStepIndex = allEnabledStepBtns.findIndex(\n btn => btn.getAttribute('aria-controls') === currentStepId\n );\n\n let nextStepIndex;\n switch (goTo) {\n case 'prev':\n nextStepIndex = Math.max(currentStepIndex - 1, 0);\n break;\n\n case 'next':\n nextStepIndex = Math.min(currentStepIndex + 1, allEnabledStepBtns.length - 1);\n break;\n\n case 'first':\n nextStepIndex = 0;\n break;\n\n case 'last':\n nextStepIndex = allEnabledStepBtns.length - 1;\n break;\n }\n\n return allEnabledStepBtns[nextStepIndex].getAttribute('aria-controls');\n }\n\n showStep(stepId: string) {\n this.scheduledAfterRender.push(this.resizeIframe);\n this.showStepPane(stepId);\n this.focusStepBtn(stepId);\n }\n\n extractDetails(pane: HTMLQ2StepperPaneElement) {\n const { label, description, status } = pane;\n if (!pane.id) pane.id = `step-${createGuid()}`;\n return {\n id: pane.id,\n label,\n description,\n status,\n };\n }\n\n buildPaneList = () => {\n const { allRootPanes } = this;\n if (!allRootPanes.length) return;\n\n this.structuredPanes = Array.from(allRootPanes).reduce((accum, pane) => {\n const children = Array.from(pane.querySelector('[slot=children]')?.children ?? [])\n .filter(({ tagName }) => tagName === 'Q2-STEPPER-PANE')\n .map(this.extractDetails);\n\n accum.push({ ...this.extractDetails(pane), children });\n return accum;\n }, []);\n };\n\n resizeIframe() {\n return window?.TectonElements?.resizeIframe?.();\n }\n\n openCurrentStepChildren() {\n const { expandedStepChildrenList } = this;\n const allSpacers = this.hostElement.shadowRoot.querySelectorAll<HTMLDivElement>('.spacer');\n allSpacers.forEach(spacer => {\n if (expandedStepChildrenList && spacer.contains(expandedStepChildrenList)) {\n spacer.style.height = `${expandedStepChildrenList.clientHeight}px`;\n if (spacer.classList.contains('is-open')) return;\n spacer.classList.add('is-opening');\n spacer.addEventListener(\n 'transitionend',\n () => {\n spacer.classList.remove('is-opening');\n spacer.classList.add('is-open');\n this.resizeIframe();\n },\n { once: true }\n );\n } else {\n spacer.removeAttribute('style');\n spacer.classList.remove('is-open', 'is-opening');\n }\n });\n }\n\n showStepPane(stepId: string) {\n this.allPanes.forEach(pane => {\n if (pane.isActive \|\| pane.id === stepId) {\n pane.isActive = stepId === pane.id;\n }\n });\n }\n\n focusStepBtn(stepId: string, forceFocus?: boolean) {\n const stepBtn = this.hostElement.shadowRoot.querySelector<HTMLElement>(`button[aria-controls=\"${stepId}\"]`);\n const isComponentActive = document.activeElement === this.hostElement;\n if (!stepBtn) return;\n if (isComponentActive \|\| forceFocus) {\n stepBtn.focus();\n }\n }\n\n /// Listeners ///\n @Listen('change')\n defaultChangeHandler(event: CustomEvent) {\n const { hostElement } = this;\n if (event.target === hostElement && !hostElement.getAttribute('onchange') && !!event.detail) {\n this.currentStepId = event.detail.selectedStepId;\n }\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.focusStepBtn(this.currentStepId, true);\n }\n\n @Listen('statusChange')\n statusChangeHandler() {\n this.buildPaneList();\n }\n\n /// Watchers ///\n @Watch('currentStepId')\n currentStepChanged(stepId: string) {\n this.showStep(stepId);\n }\n\n /// Event Handlers ///\n onStepClick = (event, stepId: string) => {\n event.stopPropagation();\n const { currentStepId } = this;\n if (stepId === currentStepId) return;\n const selectedStep = this.allPanes.find(pane => pane.id === stepId);\n\n this.change.emit({\n selectedStep,\n selectedStepId: stepId,\n currentStepId,\n });\n };\n\n onStepKeyDown = (event: KeyboardEvent, stepId: string) => {\n const { key } = event;\n\n let selectedStepId;\n switch (key) {\n case 'ArrowUp':\n case 'ArrowLeft':\n event.preventDefault();\n selectedStepId = this.getStepId(stepId, 'prev');\n break;\n\n case 'ArrowDown':\n case 'ArrowRight':\n event.preventDefault();\n selectedStepId = this.getStepId(stepId, 'next');\n break;\n\n case 'Home':\n event.preventDefault();\n selectedStepId = this.getStepId(stepId, 'first');\n break;\n\n case 'End':\n event.preventDefault();\n selectedStepId = this.getStepId(stepId, 'last');\n break;\n }\n\n if (!selectedStepId) return;\n this.focusStepBtn(selectedStepId, true);\n };\n\n /// DOM ///\n renderStepBtn(pane: IStructuredPane, index: number) {\n const { currentStepId, structuredPanes } = this;\n const isLastStep = index === structuredPanes.length - 1;\n const { id, label, description, status } = pane;\n const stepNumber = index + 1;\n const isCurrentStep = id === currentStepId;\n const labelId = label && `label-${id}`;\n const isLocked = status === 'locked';\n const stepLabel = label && loc(label);\n const descriptionId = label && description && `description-${id}`;\n const btnLabel =\n !label && loc('tecton.element.advancedStepper.number', [`${stepNumber}`, `${structuredPanes.length}`]);\n\n let statusIcon;\n if (status === 'complete') statusIcon = 'success-filled';\n else if (status === 'error') statusIcon = 'warning-filled';\n\n const stepClasses = ['step-btn'];\n if (status) stepClasses.push(`status-${status}`);\n\n const childIds = pane.children.map(child => child.id);\n const isExpanded = isCurrentStep \|\| childIds.includes(currentStepId);\n\n return (\n <li role=\"presentation\">\n <button\n class={stepClasses.join(' ')}\n type=\"button\"\n aria-labelledby={labelId}\n aria-describedBy={descriptionId}\n aria-label={btnLabel}\n aria-selected={`${isCurrentStep}`}\n aria-expanded={!!pane.children.length ? `${isExpanded}` : null}\n aria-controls={id}\n aria-disabled={isLocked ? 'true' : null}\n role=\"tab\"\n tabIndex={isCurrentStep ? 0 : -1}\n onKeyDown={ev => !isLocked && this.onStepKeyDown(ev, id)}\n onClick={ev => !isLocked && this.onStepClick(ev, id)}\n >\n {statusIcon ? (\n <div class=\"step-icon\">\n <q2-icon type={statusIcon}></q2-icon>\n </div>\n ) : (\n <div class=\"step-bubble\">{stepNumber}</div>\n )}\n\n {label && (\n <div>\n <div\n class=\"step-label\"\n id={labelId}\n >\n {stepLabel}\n </div>\n {description && (\n <div\n class=\"step-description\"\n id={descriptionId}\n >\n {loc(description)}\n </div>\n )}\n </div>\n )}\n </button>\n {this.renderSpacer(pane, stepLabel, isExpanded, isLastStep)}\n </li>\n );\n }\n\n renderSpacer(pane: IStructuredPane, stepLabel: string, isExpanded: boolean, isLastStep: boolean) {\n const shouldRender = (isLastStep && !!pane.children.length) \|\| !isLastStep;\n const spacerClasses = ['spacer'];\n if (!isLastStep) spacerClasses.push('has-sibling');\n return (\n shouldRender && (\n <div class={spacerClasses.join(' ')}>\n {!!pane.children.length && (\n <ul\n ref={el => isExpanded && (this.expandedStepChildrenList = el)}\n aria-hidden={`${!isExpanded}`}\n >\n {pane.children.map((child, index, children) =>\n this.renderChildStepBtn(child, index, children.length, stepLabel)\n )}\n </ul>\n )}\n </div>\n )\n );\n }\n\n renderChildStepBtn(pane: IBaseStructuredPane, index: number, children: number, parentLabel: string) {\n const { currentStepId } = this;\n const { id, label, status } = pane;\n const stepNumber = index + 1;\n const labelId = label && `label-${id}`;\n const isCurrentStep = id === currentStepId;\n const isLocked = status === 'locked';\n const btnLabel =\n !label && loc('tecton.element.advancedStepper.childNumber', [`${stepNumber}`, `${children}`, parentLabel]);\n\n let statusIcon;\n if (status === 'error') statusIcon = 'warning-filled';\n\n const stepClasses = ['step-child-btn'];\n if (status) stepClasses.push(`status-${status}`);\n\n return (\n <li role=\"presentation\">\n <button\n class={stepClasses.join(' ')}\n type=\"button\"\n aria-labelledby={labelId}\n aria-label={btnLabel}\n aria-selected={`${isCurrentStep}`}\n aria-controls={id}\n aria-disabled={isLocked ? 'true' : null}\n role=\"tab\"\n tabIndex={isCurrentStep ? 0 : -1}\n onKeyDown={ev => !isLocked && this.onStepKeyDown(ev, id)}\n onClick={ev => !isLocked && this.onStepClick(ev, id)}\n >\n {statusIcon && (\n <div class=\"step-child-icon\">\n <q2-icon type={statusIcon}></q2-icon>\n </div>\n )}\n {label && (\n <div\n class=\"step-child-label\"\n id={labelId}\n >\n {loc(label)}\n </div>\n )}\n </button>\n </li>\n );\n }\n\n render() {\n return (\n <Fragment>\n <ul role=\"tablist\">{this.structuredPanes.map((pane, index) => this.renderStepBtn(pane, index))}</ul>\n <div>\n <slot />\n </div>\n </Fragment>\n );\n }\n}\n"],"version":3}
1	+ {"file":"q2-stepper-vertical.js","mappings":"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","names":["Q2StepperVertical"],"sources":["src/components/q2-stepper-vertical/q2-stepper-vertical.scss?tag=q2-stepper-vertical&encapsulation=shadow","src/components/q2-stepper-vertical/q2-stepper-vertical.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: grid;\n grid-template-columns: var-list(--tct-stepper-vertical-list-width, var-prefixer(advanced-stepper-list-width), 180px) 1fr;\n gap: var-list(--tct-stepper-vertical-layout-gap, var-prefixer(advanced-stepper-layout-gap), 120px);\n}\n\n.step-label,\n.step-child-label {\n color: var(--comp-btn-label-color);\n font-size: var(--comp-btn-label-font-size);\n font-weight: var(--comp-label-font-weight, 400);\n min-height: 1.5em;\n}\n\n.step-label {\n @include line-clamp(var-list(--tct-stepper-label-line-count, var-prefixer(advanced-stepper-label-line-count), 2));\n\n [aria-selected='true'] & {\n font-weight: var-list(\n --tct-stepper-vertical-btn-active-font-weight,\n var-prefixer(advanced-stepper-btn-active-font-weight),\n 600\n );\n }\n\n [aria-describedby] & {\n @include line-clamp(\n var-list(--tct-stepper-label-line-count, var-prefixer(advanced-stepper-label-line-count), 1)\n );\n }\n}\n\n.step-child-label {\n grid-area: content;\n color: var(--comp-btn-label-color);\n}\n\n.step-description {\n color: var-list(\n --tct-stepper-vertical-description-color,\n var-prefixer(advanced-stepper-description-color),\n --t-textA,\n rgba(77, 77, 77, 0.77)\n );\n font-size: var-list(\n --tct-stepper-vertical-description-font-size,\n var-prefixer(advanced-stepper-description-font-size),\n --app-font-size-small,\n 12px\n );\n\n // Add padding for descenders\n padding-bottom: 0.2em;\n}\n\nul {\n --comp-top-btn-icon-size: #{var-list(\n --tct-stepper-vertical-btn-icon-size,\n var-prefixer(advanced-stepper-btn-icon-size),\n 24px\n )};\n --comp-btn-icon-size: #{var(--comp-top-btn-icon-size)};\n --comp-btn-content-gap: #{var-list(\n --tct-stepper-vertical-btn-gap,\n var-prefixer(advanced-stepper-btn-gap),\n --app-scale-3x,\n 15px\n )};\n --comp-btn-label-font-size: #{var-list(\n --tct-stepper-vertical-btn-label-font-size,\n var-prefixer(advanced-stepper-btn-label-font-size),\n 16px\n )};\n --comp-btn-label-color: #{var-list(\n --tct-stepper-vertical-label-color,\n var-prefixer(advanced-stepper-label-color),\n --t-text,\n #4d4d4d\n )};\n --comp-tween: #{var-list(\n --tct-stepper-vertical-tween,\n var-prefixer(advanced-stepper-tween),\n --app-tween-1,\n unquote('0.2s ease')\n )};\n --comp-bullet-bg: #{var-list(\n --tct-stepper-vertical-bullet-active-background,\n var-prefixer(advanced-stepper-bullet-active-bg),\n --t-primary,\n #0079c1\n )};\n\n list-style: none;\n margin: 0;\n padding: 0;\n\n ul {\n --comp-btn-icon-size: #{var-list(\n --tct-stepper-vertical-child-btn-icon-size,\n var-prefixer(advanced-stepper-child-btn-icon-size),\n 12px\n )};\n --comp-btn-content-gap: #{var-list(\n --tct-stepper-vertical-btn-gap,\n var-prefixer(advanced-stepper-btn-gap),\n --app-scale-2x,\n 10px\n )};\n --comp-btn-label-font-size: #{var-list(\n --tct-stepper-vertical-child-btn-label-font-size,\n var-prefixer(advanced-stepper-child-btn-label-font-size),\n --app-font-size-small,\n 12px\n )};\n\n &[aria-hidden='true'] {\n display: none;\n }\n }\n}\n\n.step-btn,\n.step-child-btn {\n display: grid;\n grid-template-columns: var(--comp-btn-icon-size) 1fr;\n gap: var(--comp-btn-content-gap);\n text-align: var-list(--tct-stepper-vertical-btn-text-align, var-prefixer(advanced-stepper-btn-text-align), start);\n grid-template-areas: 'icon content';\n align-items: center;\n width: 100%;\n position: relative;\n background: transparent;\n border: 0;\n cursor: pointer;\n padding: 0;\n transition-property: box-shadow;\n outline: none;\n\n &[aria-disabled] {\n cursor: default;\n --comp-label-font-weight: 300;\n --comp-btn-label-color: #{var-list(\n --tct-stepper-vertical-btn-locked-color,\n var-prefixer(advanced-stepper-btn-locked-color),\n --t-textA,\n rgba(77, 77, 77, 0.77)\n )};\n }\n\n &[aria-selected='true'] {\n --comp-label-font-weight: 600;\n }\n}\n\n.step-btn {\n min-height: var-list(--tct-stepper-vertical-btn-height, var-prefixer(advanced-stepper-btn-height), 40px);\n font-size: var-list(--tct-stepper-vertical-btn-font-size, var-prefixer(advanced-stepper-btn-font-size), 16px);\n\n --comp-active-color: var(--comp-bullet-bg);\n &.status-complete {\n --comp-active-color: var(--const-stoplight-success, #0e8a00);\n --tct-stoplight-success: var(--comp-active-color);\n }\n &.status-error {\n --comp-active-color: var(--const-stoplight-alert, #d20a0a);\n --tct-stoplight-warning: var(--comp-active-color);\n }\n &.status-locked {\n cursor: not-allowed;\n }\n}\n\n.step-child-btn {\n --comp-active-color: var(--comp-bullet-bg);\n\n min-height: var-list(\n --tct-stepper-vertical-child-btn-height,\n var-prefixer(advanced-stepper-child-btn-height),\n 30px\n );\n padding-left: var-list(\n --tct-stepper-vertical-child-btn-left-padding,\n var-prefixer(advanced-stepper-child-btn-left-padding),\n --app-scale-2x,\n 10px\n );\n font-size: var-list(\n --tct-stepper-vertical-child-btn-font-size,\n var-prefixer(advanced-stepper-child-btn-font-size),\n 12px\n );\n border-left-width: var-list(\n --tct-stepper-vertical-child-btn-left-border-width,\n var-prefixer(advanced-stepper-child-btn-left-border-width),\n 3px\n );\n border-left-style: var-list(\n --tct-stepper-vertical-child-btn-left-border-style,\n var-prefixer(advanced-stepper-child-btn-left-border-style),\n solid\n );\n border-left-color: transparent;\n\n &[aria-selected='true'] {\n --comp-btn-label-color: var(--comp-active-color);\n border-left-color: var(--comp-active-color);\n }\n\n &.status-error {\n --comp-btn-label-color: var(--const-stoplight-alert, #d20a0a);\n --comp-active-color: var(--const-stoplight-alert, #d20a0a);\n }\n\n &.status-locked {\n cursor: not-allowed;\n }\n}\n\n.step-content {\n grid-area: content;\n}\n\n.step-icon,\n.step-bubble,\n.step-child-icon {\n grid-area: icon;\n width: var(--comp-btn-icon-size);\n height: var(--comp-btn-icon-size);\n line-height: 0;\n\n q2-icon {\n width: var(--comp-btn-icon-size);\n height: var(--comp-btn-icon-size);\n --tct-stoplight-warning: var(--comp-active-color);\n }\n}\n\n.step-icon,\n.step-bubble {\n background: var(--comp-active-color);\n color: var(--t-base, #ffffff);\n border-radius: 50%;\n\n .status-complete &,\n .status-error & {\n background: var(--comp-active-color);\n }\n\n q2-icon {\n &:before {\n content: '';\n display: block;\n background: var(--t-base, #ffffff);\n position: absolute;\n width: 80%;\n height: 80%;\n left: 11%;\n top: 11%;\n border-radius: 50%;\n }\n }\n\n // Text-based statuses\n .status-locked & {\n background: var(--t-gray-12, #d9d9d9);\n color: var(--t-text, #4d4d4d);\n }\n\n [aria-selected='true'] & {\n box-shadow:\n 0 0 0 2px var(--t-base, #ffffff),\n 0 0 0 4px var(--comp-active-color);\n }\n}\n\n.step-bubble {\n display: flex;\n justify-content: center;\n align-items: center;\n line-height: 0;\n}\n\n.step-child-icon {\n q2-icon {\n --tct-icon-stroke-primary: var(--comp-active-color);\n --tct-icon-stroke-secondary: var(--comp-active-color);\n }\n [aria-selected='true'] & {\n q2-icon {\n fill: var(--comp-active-color);\n --tct-icon-stroke-secondary: var(--t-base, #ffffff);\n }\n }\n}\n\n.spacer {\n height: 0;\n border-left-width: var-list(\n --tct-stepper-vertical-child-border-width,\n var-prefixer(advanced-stepaer-child-border-width),\n 1px\n );\n border-left-style: var-list(\n --tct-stepper-vertical-child-border-style,\n var-prefixer(advanced-stepper-child-border-style),\n solid\n );\n border-left-color: var-list(\n --tct-stepper-vertical-child-border-color,\n var-prefixer(advanced-stepper-child-border-color),\n --t-gray-12,\n #d9d9d9\n );\n overflow: hidden;\n margin-left: calc(var(--comp-top-btn-icon-size) / 2);\n transition: height var(--comp-tween);\n\n &.has-sibling {\n height: var-list(\n --tct-stepper-vertical-spacer-height,\n var-prefixer(advanced-stepper-spacer-height),\n --app-scale-6x,\n 30px\n );\n }\n\n ul {\n opacity: 0;\n transition: opacity var(--comp-tween);\n }\n\n &.is-opening,\n &.is-open {\n ul {\n display: block;\n opacity: 1 !important;\n }\n }\n\n &.is-open {\n overflow: visible;\n }\n}\n","import {\n Component,\n Prop,\n h,\n Element,\n ComponentInterface,\n State,\n Watch,\n Listen,\n Event,\n EventEmitter,\n Fragment,\n} from '@stencil/core';\nimport { loc, overrideFocus, isEventFromElement, createGuid } from 'src/utils';\n\ninterface IBaseStructuredPane {\n id: string;\n label: string;\n description: string;\n isActive: boolean;\n status: string;\n}\n\ninterface IStructuredPane extends IBaseStructuredPane {\n children: IBaseStructuredPane[];\n}\n\n@Component({ tag: 'q2-stepper-vertical', shadow: true, styleUrl: 'q2-stepper-vertical.scss' })\nexport class Q2StepperVertical implements ComponentInterface {\n /** The `id` of the currently selected `q2-stepper-pane`. /\n @Prop({ reflect: true, mutable: true }) currentStepId: string;\n\n @Element() hostElement: HTMLElement;\n\n /\n Emitted when the selected step changes.\n * @legacyEvent\n */\n @Event() change: EventEmitter<{\n selectedStep: HTMLQ2StepperPaneElement;\n selectedStepId: string;\n currentStepId: string;\n }>;\n @State() structuredPanes: IStructuredPane[] = [];\n mutationObserver: MutationObserver;\n expandedStepChildrenList: HTMLUListElement;\n scheduledAfterRender: (() => void)[] = [];\n\n /// LifeCycle Hooks ///\n componentWillLoad() {\n this.setDefaultPane();\n this.buildPaneList();\n const observer = new MutationObserver(this.determinePaneChanges);\n const observerOptions = {\n childList: true,\n };\n observer.observe(this.hostElement, observerOptions);\n this.allRootPanes.forEach(pane => {\n const childrenSlot = pane.querySelector('[slot=children]');\n if (childrenSlot) observer.observe(childrenSlot, observerOptions);\n });\n this.mutationObserver = observer;\n }\n\n componentDidLoad() {\n overrideFocus(this.hostElement);\n setTimeout(() => this.showStep(this.currentStepId), 0);\n }\n\n componentWillUpdate() {\n this.expandedStepChildrenList = null;\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n\n this.openCurrentStepChildren();\n }\n\n disconnectedCallback() {\n this.mutationObserver.disconnect();\n this.mutationObserver = null;\n }\n\n /// Getters ///\n get allRootPanes() {\n return Array.from(this.hostElement.querySelectorAll<HTMLQ2StepperPaneElement>(':scope > q2-stepper-pane'));\n }\n\n get allPanes() {\n return Array.from(this.hostElement.querySelectorAll<HTMLQ2StepperPaneElement>('q2-stepper-pane'));\n }\n\n /// Helpers ///\n setDefaultPane() {\n if (this.currentStepId) return;\n const firstEnabledStep = this.hostElement.querySelector('q2-stepper-pane');\n if (!firstEnabledStep) return;\n if (!firstEnabledStep.id) firstEnabledStep.id = `step-${createGuid()}`;\n this.currentStepId = firstEnabledStep.id;\n }\n\n determinePaneChanges = (mutations: MutationRecord[]) => {\n mutations.forEach(mutation => {\n if (mutation.type !== 'childList') return;\n if (!mutation.addedNodes.length && !mutation.removedNodes.length) return;\n if (\n mutation.addedNodes[0]?.nodeType !== Node.ELEMENT_NODE &&\n mutation.removedNodes[0]?.nodeType !== Node.ELEMENT_NODE\n )\n return;\n this.buildPaneList();\n });\n };\n\n getStepId(currentStepId: string, goTo: string) {\n const allEnabledStepBtns = Array.from(\n this.hostElement.shadowRoot.querySelectorAll<HTMLQ2StepperPaneElement>(\n 'ul:not([aria-hidden=\"true\"]) > li > button:not([aria-disabled=\"true\"])'\n )\n );\n const currentStepIndex = allEnabledStepBtns.findIndex(\n btn => btn.getAttribute('aria-controls') === currentStepId\n );\n\n let nextStepIndex;\n switch (goTo) {\n case 'prev':\n nextStepIndex = Math.max(currentStepIndex - 1, 0);\n break;\n\n case 'next':\n nextStepIndex = Math.min(currentStepIndex + 1, allEnabledStepBtns.length - 1);\n break;\n\n case 'first':\n nextStepIndex = 0;\n break;\n\n case 'last':\n nextStepIndex = allEnabledStepBtns.length - 1;\n break;\n }\n\n return allEnabledStepBtns[nextStepIndex].getAttribute('aria-controls');\n }\n\n showStep(stepId: string) {\n this.scheduledAfterRender.push(this.resizeIframe);\n this.showStepPane(stepId);\n this.focusStepBtn(stepId);\n }\n\n extractDetails(pane: HTMLQ2StepperPaneElement) {\n const { label, description, status } = pane;\n if (!pane.id) pane.id = `step-${createGuid()}`;\n return {\n id: pane.id,\n label,\n description,\n status,\n };\n }\n\n buildPaneList = () => {\n const { allRootPanes } = this;\n if (!allRootPanes.length) return;\n\n this.structuredPanes = Array.from(allRootPanes).reduce((accum, pane) => {\n const children = Array.from(pane.querySelector('[slot=children]')?.children ?? [])\n .filter(({ tagName }) => tagName === 'Q2-STEPPER-PANE')\n .map(this.extractDetails);\n\n accum.push({ ...this.extractDetails(pane), children });\n return accum;\n }, []);\n };\n\n resizeIframe() {\n return window?.TectonElements?.resizeIframe?.();\n }\n\n openCurrentStepChildren() {\n const { expandedStepChildrenList } = this;\n const allSpacers = this.hostElement.shadowRoot.querySelectorAll<HTMLDivElement>('.spacer');\n allSpacers.forEach(spacer => {\n if (expandedStepChildrenList && spacer.contains(expandedStepChildrenList)) {\n spacer.style.height = `${expandedStepChildrenList.clientHeight}px`;\n if (spacer.classList.contains('is-open')) return;\n spacer.classList.add('is-opening');\n spacer.addEventListener(\n 'transitionend',\n () => {\n spacer.classList.remove('is-opening');\n spacer.classList.add('is-open');\n this.resizeIframe();\n },\n { once: true }\n );\n } else {\n spacer.removeAttribute('style');\n spacer.classList.remove('is-open', 'is-opening');\n }\n });\n }\n\n showStepPane(stepId: string) {\n this.allPanes.forEach(pane => {\n if (pane.isActive \|\| pane.id === stepId) {\n pane.isActive = stepId === pane.id;\n }\n });\n }\n\n focusStepBtn(stepId: string, forceFocus?: boolean) {\n const stepBtn = this.hostElement.shadowRoot.querySelector<HTMLElement>(`button[aria-controls=\"${stepId}\"]`);\n const isComponentActive = document.activeElement === this.hostElement;\n if (!stepBtn) return;\n if (isComponentActive \|\| forceFocus) {\n stepBtn.focus();\n }\n }\n\n /// Listeners ///\n @Listen('change')\n defaultChangeHandler(event: CustomEvent) {\n const { hostElement } = this;\n if (event.target === hostElement && !hostElement.getAttribute('onchange') && !!event.detail) {\n this.currentStepId = event.detail.selectedStepId;\n }\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.focusStepBtn(this.currentStepId, true);\n }\n\n @Listen('statusChange')\n statusChangeHandler() {\n this.buildPaneList();\n }\n\n /// Watchers ///\n @Watch('currentStepId')\n currentStepChanged(stepId: string) {\n this.showStep(stepId);\n }\n\n /// Event Handlers ///\n onStepClick = (event, stepId: string) => {\n event.stopPropagation();\n const { currentStepId } = this;\n if (stepId === currentStepId) return;\n const selectedStep = this.allPanes.find(pane => pane.id === stepId);\n\n this.change.emit({\n selectedStep,\n selectedStepId: stepId,\n currentStepId,\n });\n };\n\n onStepKeyDown = (event: KeyboardEvent, stepId: string) => {\n const { key } = event;\n\n let selectedStepId;\n switch (key) {\n case 'ArrowUp':\n case 'ArrowLeft':\n event.preventDefault();\n selectedStepId = this.getStepId(stepId, 'prev');\n break;\n\n case 'ArrowDown':\n case 'ArrowRight':\n event.preventDefault();\n selectedStepId = this.getStepId(stepId, 'next');\n break;\n\n case 'Home':\n event.preventDefault();\n selectedStepId = this.getStepId(stepId, 'first');\n break;\n\n case 'End':\n event.preventDefault();\n selectedStepId = this.getStepId(stepId, 'last');\n break;\n }\n\n if (!selectedStepId) return;\n this.focusStepBtn(selectedStepId, true);\n };\n\n /// DOM ///\n renderStepBtn(pane: IStructuredPane, index: number) {\n const { currentStepId, structuredPanes } = this;\n const isLastStep = index === structuredPanes.length - 1;\n const { id, label, description, status } = pane;\n const stepNumber = index + 1;\n const isCurrentStep = id === currentStepId;\n const labelId = label && `label-${id}`;\n const isLocked = status === 'locked';\n const stepLabel = label && loc(label);\n const descriptionId = label && description && `description-${id}`;\n const btnLabel =\n !label && loc('tecton.element.advancedStepper.number', [`${stepNumber}`, `${structuredPanes.length}`]);\n\n let statusIcon;\n if (status === 'complete') statusIcon = 'success-filled';\n else if (status === 'error') statusIcon = 'warning-filled';\n\n const stepClasses = ['step-btn'];\n if (status) stepClasses.push(`status-${status}`);\n\n const childIds = pane.children.map(child => child.id);\n const isExpanded = isCurrentStep \|\| childIds.includes(currentStepId);\n\n return (\n <li role=\"presentation\">\n <button\n class={stepClasses.join(' ')}\n type=\"button\"\n aria-labelledby={labelId}\n aria-describedBy={descriptionId}\n aria-label={btnLabel}\n aria-selected={`${isCurrentStep}`}\n aria-expanded={!!pane.children.length ? `${isExpanded}` : null}\n aria-controls={id}\n aria-disabled={isLocked ? 'true' : null}\n role=\"tab\"\n tabIndex={isCurrentStep ? 0 : -1}\n onKeyDown={ev => !isLocked && this.onStepKeyDown(ev, id)}\n onClick={ev => !isLocked && this.onStepClick(ev, id)}\n >\n {statusIcon ? (\n <div class=\"step-icon\">\n <q2-icon type={statusIcon}></q2-icon>\n </div>\n ) : (\n <div class=\"step-bubble\">{stepNumber}</div>\n )}\n\n {label && (\n <div>\n <div\n class=\"step-label\"\n id={labelId}\n >\n {stepLabel}\n </div>\n {description && (\n <div\n class=\"step-description\"\n id={descriptionId}\n >\n {loc(description)}\n </div>\n )}\n </div>\n )}\n </button>\n {this.renderSpacer(pane, stepLabel, isExpanded, isLastStep)}\n </li>\n );\n }\n\n renderSpacer(pane: IStructuredPane, stepLabel: string, isExpanded: boolean, isLastStep: boolean) {\n const shouldRender = (isLastStep && !!pane.children.length) \|\| !isLastStep;\n const spacerClasses = ['spacer'];\n if (!isLastStep) spacerClasses.push('has-sibling');\n return (\n shouldRender && (\n <div class={spacerClasses.join(' ')}>\n {!!pane.children.length && (\n <ul\n ref={el => isExpanded && (this.expandedStepChildrenList = el)}\n aria-hidden={`${!isExpanded}`}\n >\n {pane.children.map((child, index, children) =>\n this.renderChildStepBtn(child, index, children.length, stepLabel)\n )}\n </ul>\n )}\n </div>\n )\n );\n }\n\n renderChildStepBtn(pane: IBaseStructuredPane, index: number, children: number, parentLabel: string) {\n const { currentStepId } = this;\n const { id, label, status } = pane;\n const stepNumber = index + 1;\n const labelId = label && `label-${id}`;\n const isCurrentStep = id === currentStepId;\n const isLocked = status === 'locked';\n const btnLabel =\n !label && loc('tecton.element.advancedStepper.childNumber', [`${stepNumber}`, `${children}`, parentLabel]);\n\n let statusIcon;\n if (status === 'error') statusIcon = 'warning-filled';\n\n const stepClasses = ['step-child-btn'];\n if (status) stepClasses.push(`status-${status}`);\n\n return (\n <li role=\"presentation\">\n <button\n class={stepClasses.join(' ')}\n type=\"button\"\n aria-labelledby={labelId}\n aria-label={btnLabel}\n aria-selected={`${isCurrentStep}`}\n aria-controls={id}\n aria-disabled={isLocked ? 'true' : null}\n role=\"tab\"\n tabIndex={isCurrentStep ? 0 : -1}\n onKeyDown={ev => !isLocked && this.onStepKeyDown(ev, id)}\n onClick={ev => !isLocked && this.onStepClick(ev, id)}\n >\n {statusIcon && (\n <div class=\"step-child-icon\">\n <q2-icon type={statusIcon}></q2-icon>\n </div>\n )}\n {label && (\n <div\n class=\"step-child-label\"\n id={labelId}\n >\n {loc(label)}\n </div>\n )}\n </button>\n </li>\n );\n }\n\n render() {\n return (\n <Fragment>\n <ul role=\"tablist\">{this.structuredPanes.map((pane, index) => this.renderStepBtn(pane, index))}</ul>\n <div>\n <slot />\n </div>\n </Fragment>\n );\n }\n}\n"],"version":3}

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

@@ -4,7 +4,7 @@ import { d as defineCustomElement$4 } from './q2-btn2.js';
 import { d as defineCustomElement$3 } from './q2-icon2.js';
 import { d as defineCustomElement$2 } from './q2-loading2.js';
-const q2StepperCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block;position:relative}ul{--comp-bullet-background:var(--tct-stepper-bullet-active-background, var(--tct-stepper-bullet-active-bg, var(--t-stepper-bullet-active-bg, var(--t-primary, #0079c1))));--comp-bullet-font-color:var(--tct-stepper-bullet-active-font-color, var(--t-stepper-bullet-active-font-color, var(--t-primary-font-color, #ffffff)));--comp-bullet-size:var(--tct-stepper-btn-icon-size, var(--t-stepper-btn-icon-size, 24px));--comp-bullet-gap:var(--tct-stepper-btn-gap, var(--t-stepper-btn-gap, var(--app-scale-3x, 15px)));--comp-bullet-font-size:var-list(var-prefixer(stepper-btn-label-font-size), 16px);--comp-step-width:var(--tct-stepper-step-width, var(--t-stepper-step-width, var(--t-stepper-step-width, 80px)));--comp-step-gap:var(--tct-stepper-step-gap, var(--t-stepper-step-gap, 5px));--comp-btn-icon-size:var(--tct-stepper-btn-icon-size, var(--t-stepper-btn-icon-size, 24px));--comp-btn-label-font-size:var-list(var-prefixer(stepper-btn-label-font-size), 16px);--comp-tween:var(--tct-stepper-tween, var(--t-stepper-tween, var(--app-tween-1, 0.2s ease)));overflow-x:auto;display:flex;justify-content:center;list-style:none;padding:0;padding:var(--tct-stepper-list-padding, var(--t-stepper-list-padding, 2px));margin:0;gap:var(--comp-step-gap);--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, 3px)));--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}ul::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}ul::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}ul::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.has-scroll ul{justify-content:unset}li{min-height:var(--tct-stepper-min-height, var(--t-stepper-min-height, 50px));flex:0 0 auto;position:relative;width:var(--comp-step-width);text-align:center;max-width:150px;min-width:80px}.step-btn{position:relative;background:transparent;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;height:calc(100% - 4px);width:100%;transition:var(--comp-tween);padding:0;transition-property:box-shadow;outline:none;margin-top:2px;--comp-active-color:var(--comp-bullet-background)}.step-btn.status-complete{--comp-active-color:var(--const-stoplight-success, #0e8a00)}.step-btn.status-error{--comp-active-color:var(--const-stoplight-alert, #d20a0a)}.step-btn[aria-disabled]{cursor:not-allowed}.step-btn[aria-disabled],.step-btn[aria-disabled]+.step-divider{--comp-bullet-font-color:var(--tct-stepper-bullet-inactive-font-color, var(--t-stepper-bullet-inactive-font-color, var(--t-text, #4d4d4d)));--comp-bullet-background:var(--tct-stepper-bullet-inactive-background, var(--tct-stepper-bullet-inactive-bg, var(--t-stepper-bullet-inactive-bg, var(--t-gray-12, #d9d9d9))))}.step-icon,.step-bubble{display:flex;justify-content:center;align-items:center;line-height:0;margin:var(--comp-bullet-gap) auto;color:var(--comp-bullet-font-color);width:var(--comp-btn-icon-size);height:var(--comp-btn-icon-size);min-height:var(--comp-btn-icon-size);font-size:var(--comp-bullet-font-size);transition:var(--comp-tween);transition-property:background, color;border-radius:50%;position:relative}.step-icon q2-icon,.step-bubble q2-icon{--tct-icon-fill:var(--comp-active-color)}.step-icon q2-icon:before,.step-bubble q2-icon:before{content:\"\";display:block;background:var(--comp-bullet-font-color);position:absolute;width:80%;height:80%;left:11%;top:11%;border-radius:50%}.status-complete .step-icon,.status-error .step-icon,.status-complete .step-bubble,.status-error .step-bubble{background:var(--comp-active-color)}[aria-selected] .step-icon,[aria-selected] .step-bubble{box-shadow:0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);font-weight:var(--tct-stepper-bullet-active-font-weight, var(--t-stepper-bullet-active-font-weight, 600))}.step-bubble{background:var(--comp-bullet-background)}.step-divider{width:calc(var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size));top:calc(var(--comp-bullet-size) / 2 + var(--comp-bullet-gap));left:calc(var(--comp-step-width) * -0.5 + var(--comp-step-gap) + var(--comp-bullet-gap));border:0;border-top:1px solid var(--comp-bullet-background);height:0;position:absolute;margin:0;transition:border var(--comp-tween)}.step-container{position:relative}.step-label{color:var(--tct-stepper-label-color, var(--tct-stepper-title-color, var(--t-stepper-title-color, var(--t-text, #4d4d4d))));font-size:var(--tct-stepper-label-font-size, var(--tct-stepper-title-font-size, var(--t-stepper-title-font-size, var(--app-font-size-small, 12px))));line-height:var(--tct-stepper-label-line-height, 1.5em);text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-label-line-count, 2);-webkit-box-orient:vertical}[aria-selected] .step-label{font-weight:var(--tct-stepper-active-font-weight, var(--t-stepper-active-font-weight, 600))}[aria-describedby] .step-label{-webkit-line-clamp:var(--tct-stepper-label-line-count, 1)}.step-description{color:var(--tct-stepper-description-color, var(--t-stepper-description-color, var(--t-textA, rgba(77, 77, 77, 0.77))));font-size:var(--tct-stepper-description-font-size, var(--t-stepper-description-font-size, var(--app-font-size-small, 12px)));text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-description-line-count, 4);-webkit-box-orient:vertical;padding-bottom:0.2em}.step-description .ellipsize{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:var(--comp-step-width);display:block}.gradient-left,.gradient-right{z-index:1;position:absolute;top:0;height:100%;width:18px}.gradient-left{background-image:linear-gradient(to left, var(--t-base-a0, rgba(255, 255, 255, 0)), var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%, var(--t-base, #ffffff) 100%);left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0, rgba(255, 255, 255, 0)), var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%, var(--t-base, #ffffff) 100%);right:0}.btn-left,.btn-right{--tct-icon-size:18px;--tct-btn-icon-hover-background:transparent;--tct-btn-icon-width:22px;--tct-icon-stroke-primary:var(--tct-stepper-scroll-arrow-color, var(--t-stepper-scroll-arrow-color, var(--t-text, #4d4d4d)));position:absolute;top:calc(50% - 22px);z-index:2}.btn-left q2-icon,.btn-right q2-icon{--tct-icon-stroke-width:3}.btn-left{left:0}.btn-right{right:0}";
+const q2StepperCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block;position:relative}ul{--comp-bullet-background:var(--tct-stepper-bullet-active-background, var(--tct-stepper-bullet-active-bg, var(--t-stepper-bullet-active-bg, var(--t-primary, #0079c1))));--comp-bullet-font-color:var(--tct-stepper-bullet-active-font-color, var(--t-stepper-bullet-active-font-color, var(--t-primary-font-color, #ffffff)));--comp-bullet-size:var(--tct-stepper-btn-icon-size, var(--t-stepper-btn-icon-size, 24px));--comp-bullet-gap:var(--tct-stepper-btn-gap, var(--t-stepper-btn-gap, var(--app-scale-3x, 15px)));--comp-bullet-font-size:var(--tct-stepper-btn-label-font-size, var(--t-stepper-btn-label-font-size, 16px));--comp-step-width:var(--tct-stepper-step-width, var(--t-stepper-step-width, var(--t-stepper-step-width, 80px)));--comp-step-gap:var(--tct-stepper-step-gap, var(--t-stepper-step-gap, 5px));--comp-btn-icon-size:var(--tct-stepper-btn-icon-size, var(--t-stepper-btn-icon-size, 24px));--comp-btn-label-font-size:var(--tct-stepper-btn-label-font-size, var(--t-stepper-btn-label-font-size, 16px));--comp-tween:var(--tct-stepper-tween, var(--t-stepper-tween, var(--app-tween-1, 0.2s ease)));overflow-x:auto;display:flex;justify-content:center;list-style:none;padding:0;padding:var(--tct-stepper-list-padding, var(--t-stepper-list-padding, 2px));margin:0;gap:var(--comp-step-gap);--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, 3px)));--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}ul::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}ul::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}ul::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.has-scroll ul{justify-content:unset}li{min-height:var(--tct-stepper-min-height, var(--t-stepper-min-height, 50px));flex:0 0 auto;position:relative;width:var(--comp-step-width);text-align:center;max-width:150px;min-width:80px}.step-btn{position:relative;background:transparent;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;height:calc(100% - 4px);width:100%;transition:var(--comp-tween);padding:0;transition-property:box-shadow;outline:none;margin-top:2px;--comp-active-color:var(--comp-bullet-background)}.step-btn.status-complete{--comp-active-color:var(--const-stoplight-success, #0e8a00);--tct-stoplight-success:var(--comp-active-color)}.step-btn.status-error{--comp-active-color:var(--const-stoplight-alert, #d20a0a);--tct-stoplight-warning:var(--comp-active-color)}.step-btn[aria-disabled]{cursor:not-allowed}.step-btn[aria-disabled],.step-btn[aria-disabled]+.step-divider{--comp-bullet-font-color:var(--tct-stepper-bullet-inactive-font-color, var(--t-stepper-bullet-inactive-font-color, var(--t-text, #4d4d4d)));--comp-bullet-background:var(--tct-stepper-bullet-inactive-background, var(--tct-stepper-bullet-inactive-bg, var(--t-stepper-bullet-inactive-bg, var(--t-gray-12, #d9d9d9))))}.step-icon,.step-bubble{display:flex;justify-content:center;align-items:center;line-height:0;margin:var(--comp-bullet-gap) auto;color:var(--comp-bullet-font-color);width:var(--comp-btn-icon-size);height:var(--comp-btn-icon-size);min-height:var(--comp-btn-icon-size);font-size:var(--comp-bullet-font-size);transition:var(--comp-tween);transition-property:background, color;border-radius:50%;position:relative}.step-icon q2-icon,.step-bubble q2-icon{--tct-icon-fill:var(--comp-active-color)}.step-icon q2-icon:before,.step-bubble q2-icon:before{content:\"\";display:block;background:var(--comp-bullet-font-color);position:absolute;width:80%;height:80%;left:11%;top:11%;border-radius:50%}.status-complete .step-icon,.status-error .step-icon,.status-complete .step-bubble,.status-error .step-bubble{background:var(--comp-active-color)}[aria-selected] .step-icon,[aria-selected] .step-bubble{box-shadow:0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);font-weight:var(--tct-stepper-bullet-active-font-weight, var(--t-stepper-bullet-active-font-weight, 600))}.step-bubble{background:var(--comp-bullet-background)}.step-divider{width:calc(var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size));top:calc(var(--comp-bullet-size) / 2 + var(--comp-bullet-gap));left:calc(var(--comp-step-width) * -0.5 + var(--comp-step-gap) + var(--comp-bullet-gap));border:0;border-top:1px solid var(--comp-bullet-background);height:0;position:absolute;margin:0;transition:border var(--comp-tween)}.step-container{position:relative}.step-label{color:var(--tct-stepper-label-color, var(--tct-stepper-title-color, var(--t-stepper-title-color, var(--t-text, #4d4d4d))));font-size:var(--tct-stepper-label-font-size, var(--tct-stepper-title-font-size, var(--t-stepper-title-font-size, var(--app-font-size-small, 12px))));line-height:var(--tct-stepper-label-line-height, 1.5em);text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-label-line-count, 2);-webkit-box-orient:vertical}[aria-selected] .step-label{font-weight:var(--tct-stepper-active-font-weight, var(--t-stepper-active-font-weight, 600))}[aria-describedby] .step-label{-webkit-line-clamp:var(--tct-stepper-label-line-count, 1)}.step-description{color:var(--tct-stepper-description-color, var(--t-stepper-description-color, var(--t-textA, rgba(77, 77, 77, 0.77))));font-size:var(--tct-stepper-description-font-size, var(--t-stepper-description-font-size, var(--app-font-size-small, 12px)));text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-description-line-count, 4);-webkit-box-orient:vertical;padding-bottom:0.2em}.step-description .ellipsize{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:var(--comp-step-width);display:block}.gradient-left,.gradient-right{z-index:1;position:absolute;top:0;height:100%;width:18px}.gradient-left{background-image:linear-gradient(to left, var(--t-base-a0, rgba(255, 255, 255, 0)), var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%, var(--t-base, #ffffff) 100%);left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0, rgba(255, 255, 255, 0)), var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%, var(--t-base, #ffffff) 100%);right:0}.btn-left,.btn-right{--tct-icon-size:18px;--tct-btn-icon-hover-background:transparent;--tct-btn-icon-width:22px;--tct-icon-stroke-primary:var(--tct-stepper-scroll-arrow-color, var(--t-stepper-scroll-arrow-color, var(--t-text, #4d4d4d)));position:absolute;top:calc(50% - 22px);z-index:2}.btn-left q2-icon,.btn-right q2-icon{--tct-icon-stroke-width:3}.btn-left{left:0}.btn-right{right:0}";
 const Q2StepperStyle0 = q2StepperCss;
 const Q2Stepper$1 = /*@__PURE__*/ proxyCustomElement(class Q2Stepper extends HTMLElement {

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

	@@ -1 +1 @@
1	- {"file":"q2-stepper.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,qzOAAqzO,CAAC;AAC30O,wBAAe,YAAY;;MCcdA,WAAS;;;;;;QA8BlB,yBAAoB,GAAmB,EAAE,CAAC;;QAuE1C,iBAAY,GAAG;YACX,IAAI,CAAC,aAAa,EAAE,CAAC;YACrB,IAAI,CAAC,gBAAgB,EAAE,CAAC;SAC3B,CAAC;QAEF,qBAAgB,GAAG,CAAC,SAA2B;YAC3C,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;YAElE,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC;gBACtB,IAAI,EAAE,SAAS,KAAK,MAAM,GAAG,CAAC,YAAY,GAAG,YAAY;gBACzD,QAAQ,EAAE,QAAQ;aACrB,CAAC,CAAC;SACN,CAAC;QAEF,gBAAW,GAAG,CAAC,KAAK,EAAE,YAAoB;YACtC,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC;YACzD,IAAI,YAAY,GAAG,eAAe,IAAI,YAAY,KAAK,WAAW;gBAAE,OAAO;YAE3E,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;gBACb,YAAY;gBACZ,eAAe;gBACf,WAAW;gBACX,SAAS;aACZ,CAAC,CAAC;SACN,CAAC;QAEF,kBAAa,GAAG,CAAC,KAAoB,EAAE,UAAkB;YACrD,MAAM,EAAE,eAAe,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;YAC5C,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC;YAEtB,IAAI,YAAY,CAAC;YACjB,QAAQ,GAAG;gBACP,KAAK,WAAW;oBACZ,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;oBAC3C,MAAM;gBAEV,KAAK,YAAY;oBACb,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,GAAG,CAAC,EAAE,SAAS,CAAC,CAAC;oBACnD,MAAM;gBAEV,KAAK,MAAM;oBACP,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,YAAY,GAAG,CAAC,CAAC;oBACjB,MAAM;gBAEV,KAAK,KAAK;oBACN,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,YAAY,GAAG,eAAe,CAAC;oBAC/B,MAAM;aACb;YAED,IAAI,CAAC,YAAY;gBAAE,OAAO;YAC1B,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;SACtC,CAAC;QAqBF,kBAAa,GAAG;YACZ,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;YAC1B,IAAI,CAAC,QAAQ,CAAC,MAAM;gBAAE,OAAO;YAE7B,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,MAAM,CAAC;SACpC,CAAC;QAEF,qBAAgB,GAAG;YACf,IAAI,CAAC,IAAI,CAAC,WAAW;gBAAE,OAAO;YAC9B,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC;YAClE,IAAI,CAAC,aAAa,GAAG,WAAW,GAAG,WAAW,CAAC;YAC/C,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,UAAU,CAAC;YACnC,IAAI,CAAC,eAAe,GAAG,WAAW,KAAK,UAAU,GAAG,WAAW,CAAC;SACnE,CAAC;2BA7L4D,CAAC;;;yCAsBlB,CAAC;6BACZ,KAAK;8BACJ,KAAK;+BACJ,KAAK;;;IAOzC,iBAAiB;QACb,IAAI,CAAC,IAAI,CAAC,eAAe;YAAE,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC;QACxE,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;QACxE,IAAI,CAAC,aAAa,EAAE,CAAC;KACxB;IAED,gBAAgB;QACZ,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC9C,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAChC,UAAU,CAAC,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;KAC7D;IAED,kBAAkB;QACd,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC;QAC9C,IAAI,CAAC,oBAAoB,GAAG,EAAE,CAAC;KAClC;IAED,oBAAoB;QAChB,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;KACpC;;IAKD,kBAAkB,CAAC,UAAkB;QACjC,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;KAC7B;;IAKD,oBAAoB,CAAC,KAAkB;QACnC,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;QAC7B,IAAI,KAAK,CAAC,MAAM,KAAK,WAAW,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,EAAE;YACzF,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC;SAChD;KACJ;IAGD,aAAa,CAAC,KAAiB;QAC3B,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;YAAE,OAAO;QACzD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;KAChD;IAGD,mBAAmB,CAAC,KAAkB;QAClC,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,EAAE,IAAI,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;QACnF,IAAI,KAAK,GAAG,CAAC,CAAC,EAAE;YACZ,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC;YAClD,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;SAC7B;KACJ;IAGD,oBAAoB;QAChB,IAAI,CAAC,yBAAyB,IAAI,CAAC,CAAC;KACvC;;IAID,IAAI,QAAQ;QACR,OAAO,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAA2B,iBAAiB,CAAC,CAAC;KACzF;;IAgED,QAAQ,CAAC,UAAkB;QACvB,IAAI,UAAU,GAAG,IAAI,CAAC,eAAe,EAAE;YACnC,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;YACxC,IAAI,CAAC,eAAe,GAAG,UAAU,CAAC;YAClC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;gBACb,YAAY,EAAE,IAAI;gBAClB,eAAe,EAAE,UAAU;gBAC3B,WAAW;gBACX,SAAS;aACZ,CAAC,CAAC;SACN;QAED,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAClD,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;QAC9B,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;KAClD;IAiBD,YAAY;;QACR,OAAO,MAAA,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,cAAc,0CAAE,YAAY,kDAAI,CAAC;KACnD;IAED,YAAY,CAAC,UAAkB;QAC3B,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK;YAC9B,IAAI,CAAC,QAAQ,GAAG,UAAU,KAAK,KAAK,GAAG,CAAC,CAAC;SAC5C,CAAC,CAAC;KACN;IAED,SAAS,CAAC,UAAkB,EAAE,cAAwB,EAAE,UAAoB;;QACxE,MAAM,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,UAAU,GAAG,CAAC,CAAkB,CAAC;QAChF,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,KAAK,IAAI,CAAC,WAAW,CAAC;QAC7D,IAAI,CAAC,YAAY;YAAE,OAAO;QAC1B,IAAI,QAAQ,IAAI,UAAU,EAAE;YACxB,MAAC,YAAY,CAAC,iBAAuC,0CAAE,KAAK,EAAE,CAAC;SAClE;QAED,IAAI,cAAc,EAAE;YAChB,MAAM,IAAI,GAAG,YAAY,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW,GAAG,CAAC,CAAC;YACxE,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC;gBACtB,IAAI;gBACJ,QAAQ,EAAE,QAAQ;aACrB,CAAC,CAAC;SACN;KACJ;;IAGD,qBAAqB,CAAC,IAA8B,EAAE,QAAiC;;QACnF,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,CAAc,UAAU,QAAQ,IAAI,CAAC,CAAC;QACrE,OAAO,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,SAAS,mCAAI,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;KACjD;IAED,aAAa,CAAC,SAAiB;;QAC3B,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC;QACnE,MAAM,IAAI,GAAG,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,SAAS,CAAC,mCAAI,IAAI,CAAC;QAC3C,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;QAC5B,MAAM,KAAK,GAAG,IAAI,CAAC,qBAAqB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACxD,MAAM,WAAW,GAAG,IAAI,CAAC,qBAAqB,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC;QAEpE,MAAM,UAAU,GAAG,SAAS,GAAG,CAAC,CAAC;QACjC,MAAM,aAAa,GAAG,UAAU,KAAK,WAAW,CAAC;QACjD,MAAM,OAAO,GAAG,CAAC,CAAC,KAAK,IAAI,SAAS,EAAE,EAAE,CAAC;QACzC,MAAM,aAAa,GAAG,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,WAAW,IAAI,eAAe,EAAE,EAAE,CAAC;QACtE,MAAM,QAAQ,GAAG,CAAC,KAAK,IAAI,GAAG,CAAC,+BAA+B,EAAE,CAAC,GAAG,UAAU,EAAE,EAAE,GAAG,SAAS,EAAE,CAAC,CAAC,CAAC;QAEnG,IAAI,UAAU,CAAC;QACf,IAAI,MAAM,KAAK,UAAU;YAAE,UAAU,GAAG,gBAAgB,CAAC;aACpD,IAAI,MAAM,KAAK,OAAO;YAAE,UAAU,GAAG,gBAAgB,CAAC;QAE3D,MAAM,WAAW,GAAG,CAAC,UAAU,CAAC,CAAC;QACjC,IAAI,MAAM;YAAE,WAAW,CAAC,IAAI,CAAC,UAAU,MAAM,EAAE,CAAC,CAAC;QACjD,MAAM,QAAQ,GAAG,MAAM,KAAK,QAAQ,CAAC;QACrC,MAAM,QAAQ,GAAG,QAAQ,IAAI,UAAU,GAAG,eAAe,CAAC;QAE1D,QACI,UAAI,IAAI,EAAC,cAAc,IACnB,cACI,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,EAC5B,IAAI,EAAC,QAAQ,qBACI,OAAO,sBACN,aAAa,gBACnB,QAAQ,mBACL,aAAa,mBACb,EAAE,mBACF,QAAQ,GAAG,MAAM,GAAG,IAAI,EACvC,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,aAAa,GAAG,CAAC,GAAG,CAAC,CAAC,EAChC,SAAS,EAAE,EAAE,IAAI,IAAI,CAAC,aAAa,CAAC,EAAE,EAAE,UAAU,CAAC,EACnD,OAAO,EAAE,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,EAAE,UAAU,CAAC,IAE5D,EAAC,QAAQ,QACJ,UAAU,IACP,WAAK,KAAK,EAAC,WAAW,IAClB,eAAS,IAAI,EAAE,UAAU,GAAY,CACnC,KAEN,WAAK,KAAK,EAAC,aAAa,IAAE,UAAU,CAAO,CAC9C,EACA,OAAO,KACJ,WACI,KAAK,EAAC,YAAY,EAClB,EAAE,EAAE,OAAO,EACX,SAAS,EAAE,KAAK,GACb,CACV,EACA,OAAO,IAAI,aAAa,KACrB,WACI,KAAK,EAAC,kBAAkB,EACxB,EAAE,EAAE,aAAa,EACjB,SAAS,EAAE,WAAW,GACnB,CACV,CACM,CACN,EACR,SAAS,GAAG,WAAK,KAAK,EAAC,cAAc,GAAO,GAAG,EAAE,CACjD,EACP;KACL;IAED,MAAM;QACF,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,cAAc,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC;QAC3E,MAAM,gBAAgB,GAAG,CAAC,gBAAgB,CAAC,CAAC;QAC5C,IAAI,aAAa;YAAE,gBAAgB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAEvD,QACI,EAAC,QAAQ,uDACL,4DAAK,KAAK,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,CAAC,IACjC,aAAa,KACV,EAAC,QAAQ,uDACL,4DACI,KAAK,EAAC,eAAe,EACrB,MAAM,EAAE,CAAC,cAAc,GACpB,EACP,4DACI,KAAK,EAAC,gBAAgB,EACtB,MAAM,EAAE,CAAC,eAAe,GACrB,EAEP,+DACI,KAAK,EAAC,UAAU,EAChB,MAAM,EAAE,CAAC,IAAI,CAAC,cAAc,EAC5B,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,IAE5C,gEAAS,IAAI,EAAC,cAAc,GAAW,CAClC,EAET,+DACI,KAAK,EAAC,WAAW,EACjB,MAAM,EAAE,CAAC,IAAI,CAAC,eAAe,EAC7B,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAE7C,gEAAS,IAAI,EAAC,eAAe,GAAW,CACnC,CACF,CACd,EAED,2DACI,QAAQ,EAAE,IAAI,CAAC,gBAAgB,EAC/B,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,EAClC,IAAI,EAAC,SAAS,IAEb,SAAS,GAAG,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,SAAS,IAAI,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,CAC7F,CACH,EACN,8DACI,6DAAM,YAAY,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,GAAI,CAC/C,CACC,EACb;KACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["Q2Stepper"],"sources":["src/components/q2-stepper/q2-stepper.scss?tag=q2-stepper&encapsulation=shadow","src/components/q2-stepper/q2-stepper.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: block;\n position: relative;\n}\n\nul {\n --comp-bullet-background: #{var-list(\n --tct-stepper-bullet-active-background,\n var-prefixer(stepper-bullet-active-bg),\n --t-primary,\n #0079c1\n )};\n --comp-bullet-font-color: #{var-list(\n var-prefixer(stepper-bullet-active-font-color),\n --t-primary-font-color,\n #ffffff\n )};\n --comp-bullet-size: #{var-list(var-prefixer(stepper-btn-icon-size), 24px)};\n --comp-bullet-gap: #{var-list(var-prefixer(stepper-btn-gap), --app-scale-3x, 15px)};\n --comp-bullet-font-size: var-list(var-prefixer(stepper-btn-label-font-size), 16px);\n\n --comp-step-width: #{var-list(var-prefixer(stepper-step-width), --t-stepper-step-width, 80px)};\n --comp-step-gap: #{var-list(var-prefixer(stepper-step-gap), 5px)};\n --comp-btn-icon-size: #{var-list(var-prefixer(stepper-btn-icon-size), 24px)};\n --comp-btn-label-font-size: var-list(var-prefixer(stepper-btn-label-font-size), 16px);\n --comp-tween: #{var-list(var-prefixer(stepper-tween), --app-tween-1, unquote('0.2s ease'))};\n\n overflow-x: auto;\n display: flex;\n justify-content: center;\n list-style: none;\n padding: 0;\n padding: var-list(var-prefixer(stepper-list-padding), 2px);\n margin: 0;\n gap: var(--comp-step-gap);\n @include tiny-scrollbar();\n\n .has-scroll & {\n justify-content: unset;\n }\n}\n\nli {\n min-height: var-list(var-prefixer(stepper-min-height), 50px);\n flex: 0 0 auto;\n position: relative;\n width: var(--comp-step-width);\n text-align: center;\n max-width: 150px;\n min-width: 80px;\n}\n\n.step-btn {\n position: relative;\n background: transparent;\n border: 0;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n align-items: center;\n height: calc(100% - 4px);\n width: 100%;\n transition: var(--comp-tween);\n padding: 0;\n transition-property: box-shadow;\n outline: none;\n margin-top: 2px;\n\n --comp-active-color: var(--comp-bullet-background);\n &.status-complete {\n --comp-active-color: var(--const-stoplight-success, #0e8a00);\n }\n &.status-error {\n --comp-active-color: var(--const-stoplight-alert, #d20a0a);\n }\n\n &[aria-disabled] {\n cursor: not-allowed;\n\n &,\n & + .step-divider {\n --comp-bullet-font-color: #{var-list(var-prefixer(stepper-bullet-inactive-font-color), --t-text, #4d4d4d)};\n --comp-bullet-background: #{var-list(\n --tct-stepper-bullet-inactive-background,\n var-prefixer(stepper-bullet-inactive-bg),\n --t-gray-12,\n #d9d9d9\n )};\n }\n }\n}\n.step-icon,\n.step-bubble {\n display: flex;\n justify-content: center;\n align-items: center;\n line-height: 0;\n margin: var(--comp-bullet-gap) auto;\n color: var(--comp-bullet-font-color);\n width: var(--comp-btn-icon-size);\n height: var(--comp-btn-icon-size);\n min-height: var(--comp-btn-icon-size);\n font-size: var(--comp-bullet-font-size);\n transition: var(--comp-tween);\n transition-property: background, color;\n border-radius: 50%;\n position: relative;\n\n q2-icon {\n --tct-icon-fill: var(--comp-active-color);\n &:before {\n content: '';\n display: block;\n background: var(--comp-bullet-font-color);\n position: absolute;\n width: 80%;\n height: 80%;\n left: 11%;\n top: 11%;\n border-radius: 50%;\n }\n }\n .status-complete &,\n .status-error & {\n background: var(--comp-active-color);\n }\n [aria-selected] & {\n box-shadow: 0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);\n font-weight: var-list(var-prefixer(stepper-bullet-active-font-weight), 600);\n }\n}\n\n.step-bubble {\n background: var(--comp-bullet-background);\n}\n\n.step-divider {\n width: calc(var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size));\n top: calc(calc(var(--comp-bullet-size) / 2) + var(--comp-bullet-gap));\n left: calc(calc(var(--comp-step-width) * -0.5) + var(--comp-step-gap) + var(--comp-bullet-gap));\n border: 0;\n border-top: 1px solid var(--comp-bullet-background);\n height: 0;\n position: absolute;\n margin: 0;\n transition: border var(--comp-tween);\n}\n\n.step-container {\n position: relative;\n}\n\n.step-label {\n color: var-list(--tct-stepper-label-color, var-prefixer(stepper-title-color), --t-text, #4d4d4d);\n font-size: var-list(\n --tct-stepper-label-font-size,\n var-prefixer(stepper-title-font-size),\n --app-font-size-small,\n 12px\n );\n line-height: var-list(--tct-stepper-label-line-height, 1.5em);\n @include line-clamp(var(--tct-stepper-label-line-count, 2));\n\n [aria-selected] & {\n font-weight: var-list(var-prefixer(stepper-active-font-weight), 600);\n }\n\n [aria-describedby] & {\n -webkit-line-clamp: var(--tct-stepper-label-line-count, 1);\n }\n}\n\n.step-description {\n color: var-list(var-prefixer(stepper-description-color), --t-textA, rgba(77, 77, 77, 0.77));\n font-size: var-list(var-prefixer(stepper-description-font-size), --app-font-size-small, 12px);\n @include line-clamp(var(--tct-stepper-description-line-count, 4));\n\n // Add padding for descenders\n padding-bottom: 0.2em;\n\n // For description slot on q2-stepper-pane\n .ellipsize {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: var(--comp-step-width);\n display: block;\n }\n}\n\n.gradient-left,\n.gradient-right {\n z-index: 1;\n position: absolute;\n top: 0;\n height: 100%;\n width: 18px;\n}\n\n.gradient-left {\n background-image: linear-gradient(\n to left,\n var(--t-base-a0, rgba(255, 255, 255, 0)),\n var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%,\n var(--t-base, #ffffff) 100%\n );\n left: 0;\n}\n\n.gradient-right {\n background-image: linear-gradient(\n to right,\n var(--t-base-a0, rgba(255, 255, 255, 0)),\n var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%,\n var(--t-base, #ffffff) 100%\n );\n right: 0;\n}\n\n.btn-left,\n.btn-right {\n --tct-icon-size: 18px;\n --tct-btn-icon-hover-background: transparent;\n --tct-btn-icon-width: 22px;\n --tct-icon-stroke-primary: #{var-list(var-prefixer(stepper-scroll-arrow-color), --t-text, #4d4d4d)};\n\n position: absolute;\n top: calc(50% - 22px);\n z-index: 2;\n q2-icon {\n --tct-icon-stroke-width: 3;\n }\n}\n\n.btn-left {\n left: 0;\n}\n\n.btn-right {\n right: 0;\n}\n","import {\n Component,\n Prop,\n h,\n Element,\n ComponentInterface,\n State,\n Watch,\n Listen,\n Event,\n EventEmitter,\n Fragment,\n} from '@stencil/core';\nimport { loc, overrideFocus, isEventFromElement } from 'src/utils';\n@Component({ tag: 'q2-stepper', shadow: true, styleUrl: 'q2-stepper.scss' })\nexport class Q2Stepper implements ComponentInterface {\n /** The currently selected step. /\n @Prop({ reflect: true, mutable: true }) currentStep: number = 1;\n\n /\n Used to determine the number of steps in the stepper.\n * @private\n /\n @Prop({ mutable: true }) stepCount: number;\n\n /\n The last step the user may navigate to.\n * @info\n * Will be managed automatically if not provided.\n /\n @Prop({ mutable: true }) lastEnabledStep: number;\n\n @Element() hostElement: HTMLElement;\n\n /\n Emitted when the selected step changes.\n * @legacyEvent\n */\n @Event() change: EventEmitter;\n @State() contentChangeTriggerCount: number = 0;\n @State() scrollEnabled: boolean = false;\n @State() showScrollLeft: boolean = false;\n @State() showScrollRight: boolean = false;\n listElement: HTMLUListElement;\n resizeObserver: ResizeObserver;\n scheduledAfterRender: (() => void)[] = [];\n\n ////////// LIFECYCLE HOOKS ////////\n\n componentWillLoad() {\n if (!this.lastEnabledStep) this.lastEnabledStep = this.currentStep \|\| 1;\n this.resizeObserver = new ResizeObserver(() => this.checkScrollState());\n this.checkForPanes();\n }\n\n componentDidLoad() {\n this.resizeObserver.observe(this.listElement);\n this.checkScrollState();\n overrideFocus(this.hostElement);\n setTimeout(() => this.showStep(this.currentStep \|\| 1), 0);\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n disconnectedCallback() {\n this.resizeObserver.disconnect();\n }\n\n ////////// WATCHER METHODS ////////\n\n @Watch('currentStep')\n currentStepChanged(stepNumber: number) {\n this.showStep(stepNumber);\n }\n\n ////////// HOST EVENTS ////////\n\n @Listen('change')\n defaultChangeHandler(event: CustomEvent) {\n const { hostElement } = this;\n if (event.target === hostElement && !hostElement.getAttribute('onchange') && !!event.detail) {\n this.currentStep = event.detail.selectedStep;\n }\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.focusStep(this.currentStep, true, true);\n }\n\n @Listen('statusChange')\n statusChangeHandler(event: CustomEvent) {\n const index = Array.from(this.allPanes).findIndex(el => event.detail.id === el.id);\n if (index > -1) {\n this.allPanes[index].status = event.detail.status;\n this.renderStepBtn(index);\n }\n }\n\n @Listen('contentChange')\n contentChangeHandler() {\n this.contentChangeTriggerCount += 1;\n }\n\n ////////// GETTER METHODS ////////\n\n get allPanes() {\n return this.hostElement.querySelectorAll<HTMLQ2StepperPaneElement>('q2-stepper-pane');\n }\n\n ////////// EVENT HANDLERS ////////\n\n onSlotChange = () => {\n this.checkForPanes();\n this.checkScrollState();\n };\n\n onScrollBtnClick = (direction: 'left' \| 'right') => {\n const scrollAmount = Math.floor(this.listElement.clientWidth / 2);\n\n this.listElement.scrollBy({\n left: direction === 'left' ? -scrollAmount : scrollAmount,\n behavior: 'smooth',\n });\n };\n\n onStepClick = (event, selectedStep: number) => {\n event.stopPropagation();\n const { currentStep, stepCount, lastEnabledStep } = this;\n if (selectedStep > lastEnabledStep \|\| selectedStep === currentStep) return;\n\n this.change.emit({\n selectedStep,\n lastEnabledStep,\n currentStep,\n stepCount,\n });\n };\n\n onStepKeyDown = (event: KeyboardEvent, stepNumber: number) => {\n const { lastEnabledStep, stepCount } = this;\n const { key } = event;\n\n let selectedStep;\n switch (key) {\n case 'ArrowLeft':\n event.preventDefault();\n selectedStep = Math.max(stepNumber - 1, 0);\n break;\n\n case 'ArrowRight':\n event.preventDefault();\n selectedStep = Math.min(stepNumber + 1, stepCount);\n break;\n\n case 'Home':\n event.preventDefault();\n selectedStep = 1;\n break;\n\n case 'End':\n event.preventDefault();\n selectedStep = lastEnabledStep;\n break;\n }\n\n if (!selectedStep) return;\n this.focusStep(selectedStep, true);\n };\n\n ////////// HELPER METHODS ////////\n\n showStep(stepNumber: number) {\n if (stepNumber > this.lastEnabledStep) {\n const { currentStep, stepCount } = this;\n this.lastEnabledStep = stepNumber;\n this.change.emit({\n selectedStep: null,\n lastEnabledStep: stepNumber,\n currentStep,\n stepCount,\n });\n }\n\n this.scheduledAfterRender.push(this.resizeIframe);\n this.showStepPane(stepNumber);\n this.focusStep(stepNumber, this.scrollEnabled);\n }\n\n checkForPanes = () => {\n const { allPanes } = this;\n if (!allPanes.length) return;\n\n this.stepCount = allPanes.length;\n };\n\n checkScrollState = () => {\n if (!this.listElement) return;\n const { scrollLeft, scrollWidth, clientWidth } = this.listElement;\n this.scrollEnabled = scrollWidth > clientWidth;\n this.showScrollLeft = !!scrollLeft;\n this.showScrollRight = scrollWidth !== scrollLeft + clientWidth;\n };\n\n resizeIframe() {\n return window?.TectonElements?.resizeIframe?.();\n }\n\n showStepPane(stepNumber: number) {\n this.allPanes.forEach((pane, index) => {\n pane.isActive = stepNumber === index + 1;\n });\n }\n\n focusStep(stepNumber: number, scrollIntoView?: boolean, forceFocus?: boolean) {\n const stepListItem = this.listElement.children[stepNumber - 1] as HTMLLIElement;\n const isActive = document.activeElement === this.hostElement;\n if (!stepListItem) return;\n if (isActive \|\| forceFocus) {\n (stepListItem.firstElementChild as HTMLButtonElement)?.focus();\n }\n\n if (scrollIntoView) {\n const left = stepListItem.offsetLeft - this.listElement.clientWidth / 2;\n this.listElement.scrollTo({\n left,\n behavior: 'smooth',\n });\n }\n }\n\n ////////// RENDER METHODS ////////\n getPaneSlotOrProperty(pane: HTMLQ2StepperPaneElement, slotName: 'description' \| 'label') {\n const slot = pane.querySelector<HTMLElement>(`[slot=\"${slotName}\"]`);\n return slot?.outerHTML ?? loc(pane[slotName]);\n }\n\n renderStepBtn(stepIndex: number) {\n const { allPanes, stepCount, currentStep, lastEnabledStep } = this;\n const pane = allPanes?.[stepIndex] ?? null;\n const { id, status } = pane;\n const label = this.getPaneSlotOrProperty(pane, 'label');\n const description = this.getPaneSlotOrProperty(pane, 'description');\n\n const stepNumber = stepIndex + 1;\n const isCurrentStep = stepNumber === currentStep;\n const labelId = !!label && `label-${id}`;\n const descriptionId = !!label && !!description && `description-${id}`;\n const btnLabel = !label && loc('tecton.element.stepper.number', [`${stepNumber}`, `${stepCount}`]);\n\n let statusIcon;\n if (status === 'complete') statusIcon = 'success-filled';\n else if (status === 'error') statusIcon = 'warning-filled';\n\n const stepClasses = ['step-btn'];\n if (status) stepClasses.push(`status-${status}`);\n const isLocked = status === 'locked';\n const disabled = isLocked \|\| stepNumber > lastEnabledStep;\n\n return (\n <li role=\"presentation\">\n <button\n class={stepClasses.join(' ')}\n type=\"button\"\n aria-labelledby={labelId}\n aria-describedBy={descriptionId}\n aria-label={btnLabel}\n aria-selected={isCurrentStep}\n aria-controls={id}\n aria-disabled={disabled ? 'true' : null}\n role=\"tab\"\n tabIndex={isCurrentStep ? 0 : -1}\n onKeyDown={ev => this.onStepKeyDown(ev, stepNumber)}\n onClick={ev => !isLocked && this.onStepClick(ev, stepNumber)}\n >\n <Fragment>\n {statusIcon ? (\n <div class=\"step-icon\">\n <q2-icon type={statusIcon}></q2-icon>\n </div>\n ) : (\n <div class=\"step-bubble\">{stepNumber}</div>\n )}\n {labelId && (\n <div\n class=\"step-label\"\n id={labelId}\n innerHTML={label}\n ></div>\n )}\n {labelId && descriptionId && (\n <div\n class=\"step-description\"\n id={descriptionId}\n innerHTML={description}\n ></div>\n )}\n </Fragment>\n </button>\n {stepIndex ? <div class=\"step-divider\"></div> : ''}\n </li>\n );\n }\n\n render() {\n const { stepCount, scrollEnabled, showScrollLeft, showScrollRight } = this;\n const containerClasses = ['step-container'];\n if (scrollEnabled) containerClasses.push('has-scroll');\n\n return (\n <Fragment>\n <div class={containerClasses.join(' ')}>\n {scrollEnabled && (\n <Fragment>\n <div\n class=\"gradient-left\"\n hidden={!showScrollLeft}\n ></div>\n <div\n class=\"gradient-right\"\n hidden={!showScrollRight}\n ></div>\n\n <q2-btn\n class=\"btn-left\"\n hidden={!this.showScrollLeft}\n onClick={() => this.onScrollBtnClick('left')}\n >\n <q2-icon type=\"chevron-left\"></q2-icon>\n </q2-btn>\n\n <q2-btn\n class=\"btn-right\"\n hidden={!this.showScrollRight}\n onClick={() => this.onScrollBtnClick('right')}\n >\n <q2-icon type=\"chevron-right\"></q2-icon>\n </q2-btn>\n </Fragment>\n )}\n\n <ul\n onScroll={this.checkScrollState}\n ref={el => (this.listElement = el)}\n role=\"tablist\"\n >\n {stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex))}\n </ul>\n </div>\n <div>\n <slot onSlotchange={() => this.onSlotChange()} />\n </div>\n </Fragment>\n );\n }\n}\n"],"version":3}
1	+ {"file":"q2-stepper.js","mappings":"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","names":["Q2Stepper"],"sources":["src/components/q2-stepper/q2-stepper.scss?tag=q2-stepper&encapsulation=shadow","src/components/q2-stepper/q2-stepper.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: block;\n position: relative;\n}\n\nul {\n --comp-bullet-background: #{var-list(\n --tct-stepper-bullet-active-background,\n var-prefixer(stepper-bullet-active-bg),\n --t-primary,\n #0079c1\n )};\n --comp-bullet-font-color: #{var-list(\n var-prefixer(stepper-bullet-active-font-color),\n --t-primary-font-color,\n #ffffff\n )};\n --comp-bullet-size: #{var-list(var-prefixer(stepper-btn-icon-size), 24px)};\n --comp-bullet-gap: #{var-list(var-prefixer(stepper-btn-gap), --app-scale-3x, 15px)};\n --comp-bullet-font-size: #{var-list(var-prefixer(stepper-btn-label-font-size), 16px)};\n\n --comp-step-width: #{var-list(var-prefixer(stepper-step-width), --t-stepper-step-width, 80px)};\n --comp-step-gap: #{var-list(var-prefixer(stepper-step-gap), 5px)};\n --comp-btn-icon-size: #{var-list(var-prefixer(stepper-btn-icon-size), 24px)};\n --comp-btn-label-font-size: #{var-list(var-prefixer(stepper-btn-label-font-size), 16px)};\n --comp-tween: #{var-list(var-prefixer(stepper-tween), --app-tween-1, unquote('0.2s ease'))};\n\n overflow-x: auto;\n display: flex;\n justify-content: center;\n list-style: none;\n padding: 0;\n padding: var-list(var-prefixer(stepper-list-padding), 2px);\n margin: 0;\n gap: var(--comp-step-gap);\n @include tiny-scrollbar();\n\n .has-scroll & {\n justify-content: unset;\n }\n}\n\nli {\n min-height: var-list(var-prefixer(stepper-min-height), 50px);\n flex: 0 0 auto;\n position: relative;\n width: var(--comp-step-width);\n text-align: center;\n max-width: 150px;\n min-width: 80px;\n}\n\n.step-btn {\n position: relative;\n background: transparent;\n border: 0;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n align-items: center;\n height: calc(100% - 4px);\n width: 100%;\n transition: var(--comp-tween);\n padding: 0;\n transition-property: box-shadow;\n outline: none;\n margin-top: 2px;\n\n --comp-active-color: var(--comp-bullet-background);\n &.status-complete {\n --comp-active-color: var(--const-stoplight-success, #0e8a00);\n --tct-stoplight-success: var(--comp-active-color);\n }\n &.status-error {\n --comp-active-color: var(--const-stoplight-alert, #d20a0a);\n --tct-stoplight-warning: var(--comp-active-color);\n }\n\n &[aria-disabled] {\n cursor: not-allowed;\n\n &,\n & + .step-divider {\n --comp-bullet-font-color: #{var-list(var-prefixer(stepper-bullet-inactive-font-color), --t-text, #4d4d4d)};\n --comp-bullet-background: #{var-list(\n --tct-stepper-bullet-inactive-background,\n var-prefixer(stepper-bullet-inactive-bg),\n --t-gray-12,\n #d9d9d9\n )};\n }\n }\n}\n.step-icon,\n.step-bubble {\n display: flex;\n justify-content: center;\n align-items: center;\n line-height: 0;\n margin: var(--comp-bullet-gap) auto;\n color: var(--comp-bullet-font-color);\n width: var(--comp-btn-icon-size);\n height: var(--comp-btn-icon-size);\n min-height: var(--comp-btn-icon-size);\n font-size: var(--comp-bullet-font-size);\n transition: var(--comp-tween);\n transition-property: background, color;\n border-radius: 50%;\n position: relative;\n\n q2-icon {\n --tct-icon-fill: var(--comp-active-color);\n &:before {\n content: '';\n display: block;\n background: var(--comp-bullet-font-color);\n position: absolute;\n width: 80%;\n height: 80%;\n left: 11%;\n top: 11%;\n border-radius: 50%;\n }\n }\n .status-complete &,\n .status-error & {\n background: var(--comp-active-color);\n }\n [aria-selected] & {\n box-shadow:\n 0 0 0 2px var(--t-base, #ffffff),\n 0 0 0 4px var(--comp-active-color);\n font-weight: var-list(var-prefixer(stepper-bullet-active-font-weight), 600);\n }\n}\n\n.step-bubble {\n background: var(--comp-bullet-background);\n}\n\n.step-divider {\n width: calc(var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size));\n top: calc(calc(var(--comp-bullet-size) / 2) + var(--comp-bullet-gap));\n left: calc(calc(var(--comp-step-width) * -0.5) + var(--comp-step-gap) + var(--comp-bullet-gap));\n border: 0;\n border-top: 1px solid var(--comp-bullet-background);\n height: 0;\n position: absolute;\n margin: 0;\n transition: border var(--comp-tween);\n}\n\n.step-container {\n position: relative;\n}\n\n.step-label {\n color: var-list(--tct-stepper-label-color, var-prefixer(stepper-title-color), --t-text, #4d4d4d);\n font-size: var-list(\n --tct-stepper-label-font-size,\n var-prefixer(stepper-title-font-size),\n --app-font-size-small,\n 12px\n );\n line-height: var-list(--tct-stepper-label-line-height, 1.5em);\n @include line-clamp(var(--tct-stepper-label-line-count, 2));\n\n [aria-selected] & {\n font-weight: var-list(var-prefixer(stepper-active-font-weight), 600);\n }\n\n [aria-describedby] & {\n -webkit-line-clamp: var(--tct-stepper-label-line-count, 1);\n }\n}\n\n.step-description {\n color: var-list(var-prefixer(stepper-description-color), --t-textA, rgba(77, 77, 77, 0.77));\n font-size: var-list(var-prefixer(stepper-description-font-size), --app-font-size-small, 12px);\n @include line-clamp(var(--tct-stepper-description-line-count, 4));\n\n // Add padding for descenders\n padding-bottom: 0.2em;\n\n // For description slot on q2-stepper-pane\n .ellipsize {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: var(--comp-step-width);\n display: block;\n }\n}\n\n.gradient-left,\n.gradient-right {\n z-index: 1;\n position: absolute;\n top: 0;\n height: 100%;\n width: 18px;\n}\n\n.gradient-left {\n background-image: linear-gradient(\n to left,\n var(--t-base-a0, rgba(255, 255, 255, 0)),\n var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%,\n var(--t-base, #ffffff) 100%\n );\n left: 0;\n}\n\n.gradient-right {\n background-image: linear-gradient(\n to right,\n var(--t-base-a0, rgba(255, 255, 255, 0)),\n var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%,\n var(--t-base, #ffffff) 100%\n );\n right: 0;\n}\n\n.btn-left,\n.btn-right {\n --tct-icon-size: 18px;\n --tct-btn-icon-hover-background: transparent;\n --tct-btn-icon-width: 22px;\n --tct-icon-stroke-primary: #{var-list(var-prefixer(stepper-scroll-arrow-color), --t-text, #4d4d4d)};\n\n position: absolute;\n top: calc(50% - 22px);\n z-index: 2;\n q2-icon {\n --tct-icon-stroke-width: 3;\n }\n}\n\n.btn-left {\n left: 0;\n}\n\n.btn-right {\n right: 0;\n}\n","import {\n Component,\n Prop,\n h,\n Element,\n ComponentInterface,\n State,\n Watch,\n Listen,\n Event,\n EventEmitter,\n Fragment,\n} from '@stencil/core';\nimport { loc, overrideFocus, isEventFromElement } from 'src/utils';\n@Component({ tag: 'q2-stepper', shadow: true, styleUrl: 'q2-stepper.scss' })\nexport class Q2Stepper implements ComponentInterface {\n /** The currently selected step. /\n @Prop({ reflect: true, mutable: true }) currentStep: number = 1;\n\n /\n Used to determine the number of steps in the stepper.\n * @private\n /\n @Prop({ mutable: true }) stepCount: number;\n\n /\n The last step the user may navigate to.\n * @info\n * Will be managed automatically if not provided.\n /\n @Prop({ mutable: true }) lastEnabledStep: number;\n\n @Element() hostElement: HTMLElement;\n\n /\n Emitted when the selected step changes.\n * @legacyEvent\n */\n @Event() change: EventEmitter;\n @State() contentChangeTriggerCount: number = 0;\n @State() scrollEnabled: boolean = false;\n @State() showScrollLeft: boolean = false;\n @State() showScrollRight: boolean = false;\n listElement: HTMLUListElement;\n resizeObserver: ResizeObserver;\n scheduledAfterRender: (() => void)[] = [];\n\n ////////// LIFECYCLE HOOKS ////////\n\n componentWillLoad() {\n if (!this.lastEnabledStep) this.lastEnabledStep = this.currentStep \|\| 1;\n this.resizeObserver = new ResizeObserver(() => this.checkScrollState());\n this.checkForPanes();\n }\n\n componentDidLoad() {\n this.resizeObserver.observe(this.listElement);\n this.checkScrollState();\n overrideFocus(this.hostElement);\n setTimeout(() => this.showStep(this.currentStep \|\| 1), 0);\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n disconnectedCallback() {\n this.resizeObserver.disconnect();\n }\n\n ////////// WATCHER METHODS ////////\n\n @Watch('currentStep')\n currentStepChanged(stepNumber: number) {\n this.showStep(stepNumber);\n }\n\n ////////// HOST EVENTS ////////\n\n @Listen('change')\n defaultChangeHandler(event: CustomEvent) {\n const { hostElement } = this;\n if (event.target === hostElement && !hostElement.getAttribute('onchange') && !!event.detail) {\n this.currentStep = event.detail.selectedStep;\n }\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.focusStep(this.currentStep, true, true);\n }\n\n @Listen('statusChange')\n statusChangeHandler(event: CustomEvent) {\n const index = Array.from(this.allPanes).findIndex(el => event.detail.id === el.id);\n if (index > -1) {\n this.allPanes[index].status = event.detail.status;\n this.renderStepBtn(index);\n }\n }\n\n @Listen('contentChange')\n contentChangeHandler() {\n this.contentChangeTriggerCount += 1;\n }\n\n ////////// GETTER METHODS ////////\n\n get allPanes() {\n return this.hostElement.querySelectorAll<HTMLQ2StepperPaneElement>('q2-stepper-pane');\n }\n\n ////////// EVENT HANDLERS ////////\n\n onSlotChange = () => {\n this.checkForPanes();\n this.checkScrollState();\n };\n\n onScrollBtnClick = (direction: 'left' \| 'right') => {\n const scrollAmount = Math.floor(this.listElement.clientWidth / 2);\n\n this.listElement.scrollBy({\n left: direction === 'left' ? -scrollAmount : scrollAmount,\n behavior: 'smooth',\n });\n };\n\n onStepClick = (event, selectedStep: number) => {\n event.stopPropagation();\n const { currentStep, stepCount, lastEnabledStep } = this;\n if (selectedStep > lastEnabledStep \|\| selectedStep === currentStep) return;\n\n this.change.emit({\n selectedStep,\n lastEnabledStep,\n currentStep,\n stepCount,\n });\n };\n\n onStepKeyDown = (event: KeyboardEvent, stepNumber: number) => {\n const { lastEnabledStep, stepCount } = this;\n const { key } = event;\n\n let selectedStep;\n switch (key) {\n case 'ArrowLeft':\n event.preventDefault();\n selectedStep = Math.max(stepNumber - 1, 0);\n break;\n\n case 'ArrowRight':\n event.preventDefault();\n selectedStep = Math.min(stepNumber + 1, stepCount);\n break;\n\n case 'Home':\n event.preventDefault();\n selectedStep = 1;\n break;\n\n case 'End':\n event.preventDefault();\n selectedStep = lastEnabledStep;\n break;\n }\n\n if (!selectedStep) return;\n this.focusStep(selectedStep, true);\n };\n\n ////////// HELPER METHODS ////////\n\n showStep(stepNumber: number) {\n if (stepNumber > this.lastEnabledStep) {\n const { currentStep, stepCount } = this;\n this.lastEnabledStep = stepNumber;\n this.change.emit({\n selectedStep: null,\n lastEnabledStep: stepNumber,\n currentStep,\n stepCount,\n });\n }\n\n this.scheduledAfterRender.push(this.resizeIframe);\n this.showStepPane(stepNumber);\n this.focusStep(stepNumber, this.scrollEnabled);\n }\n\n checkForPanes = () => {\n const { allPanes } = this;\n if (!allPanes.length) return;\n\n this.stepCount = allPanes.length;\n };\n\n checkScrollState = () => {\n if (!this.listElement) return;\n const { scrollLeft, scrollWidth, clientWidth } = this.listElement;\n this.scrollEnabled = scrollWidth > clientWidth;\n this.showScrollLeft = !!scrollLeft;\n this.showScrollRight = scrollWidth !== scrollLeft + clientWidth;\n };\n\n resizeIframe() {\n return window?.TectonElements?.resizeIframe?.();\n }\n\n showStepPane(stepNumber: number) {\n this.allPanes.forEach((pane, index) => {\n pane.isActive = stepNumber === index + 1;\n });\n }\n\n focusStep(stepNumber: number, scrollIntoView?: boolean, forceFocus?: boolean) {\n const stepListItem = this.listElement.children[stepNumber - 1] as HTMLLIElement;\n const isActive = document.activeElement === this.hostElement;\n if (!stepListItem) return;\n if (isActive \|\| forceFocus) {\n (stepListItem.firstElementChild as HTMLButtonElement)?.focus();\n }\n\n if (scrollIntoView) {\n const left = stepListItem.offsetLeft - this.listElement.clientWidth / 2;\n this.listElement.scrollTo({\n left,\n behavior: 'smooth',\n });\n }\n }\n\n ////////// RENDER METHODS ////////\n getPaneSlotOrProperty(pane: HTMLQ2StepperPaneElement, slotName: 'description' \| 'label') {\n const slot = pane.querySelector<HTMLElement>(`[slot=\"${slotName}\"]`);\n return slot?.outerHTML ?? loc(pane[slotName]);\n }\n\n renderStepBtn(stepIndex: number) {\n const { allPanes, stepCount, currentStep, lastEnabledStep } = this;\n const pane = allPanes?.[stepIndex] ?? null;\n const { id, status } = pane;\n const label = this.getPaneSlotOrProperty(pane, 'label');\n const description = this.getPaneSlotOrProperty(pane, 'description');\n\n const stepNumber = stepIndex + 1;\n const isCurrentStep = stepNumber === currentStep;\n const labelId = !!label && `label-${id}`;\n const descriptionId = !!label && !!description && `description-${id}`;\n const btnLabel = !label && loc('tecton.element.stepper.number', [`${stepNumber}`, `${stepCount}`]);\n\n let statusIcon;\n if (status === 'complete') statusIcon = 'success-filled';\n else if (status === 'error') statusIcon = 'warning-filled';\n\n const stepClasses = ['step-btn'];\n if (status) stepClasses.push(`status-${status}`);\n const isLocked = status === 'locked';\n const disabled = isLocked \|\| stepNumber > lastEnabledStep;\n\n return (\n <li role=\"presentation\">\n <button\n class={stepClasses.join(' ')}\n type=\"button\"\n aria-labelledby={labelId}\n aria-describedBy={descriptionId}\n aria-label={btnLabel}\n aria-selected={isCurrentStep}\n aria-controls={id}\n aria-disabled={disabled ? 'true' : null}\n role=\"tab\"\n tabIndex={isCurrentStep ? 0 : -1}\n onKeyDown={ev => this.onStepKeyDown(ev, stepNumber)}\n onClick={ev => !isLocked && this.onStepClick(ev, stepNumber)}\n >\n <Fragment>\n {statusIcon ? (\n <div class=\"step-icon\">\n <q2-icon type={statusIcon}></q2-icon>\n </div>\n ) : (\n <div class=\"step-bubble\">{stepNumber}</div>\n )}\n {labelId && (\n <div\n class=\"step-label\"\n id={labelId}\n innerHTML={label}\n ></div>\n )}\n {labelId && descriptionId && (\n <div\n class=\"step-description\"\n id={descriptionId}\n innerHTML={description}\n ></div>\n )}\n </Fragment>\n </button>\n {stepIndex ? <div class=\"step-divider\"></div> : ''}\n </li>\n );\n }\n\n render() {\n const { stepCount, scrollEnabled, showScrollLeft, showScrollRight } = this;\n const containerClasses = ['step-container'];\n if (scrollEnabled) containerClasses.push('has-scroll');\n\n return (\n <Fragment>\n <div class={containerClasses.join(' ')}>\n {scrollEnabled && (\n <Fragment>\n <div\n class=\"gradient-left\"\n hidden={!showScrollLeft}\n ></div>\n <div\n class=\"gradient-right\"\n hidden={!showScrollRight}\n ></div>\n\n <q2-btn\n class=\"btn-left\"\n hidden={!this.showScrollLeft}\n onClick={() => this.onScrollBtnClick('left')}\n >\n <q2-icon type=\"chevron-left\"></q2-icon>\n </q2-btn>\n\n <q2-btn\n class=\"btn-right\"\n hidden={!this.showScrollRight}\n onClick={() => this.onScrollBtnClick('right')}\n >\n <q2-icon type=\"chevron-right\"></q2-icon>\n </q2-btn>\n </Fragment>\n )}\n\n <ul\n onScroll={this.checkScrollState}\n ref={el => (this.listElement = el)}\n role=\"tablist\"\n >\n {stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex))}\n </ul>\n </div>\n <div>\n <slot onSlotchange={() => this.onSlotChange()} />\n </div>\n </Fragment>\n );\n }\n}\n"],"version":3}

package/dist/esm/{index-f0dfb099.js → index-e940b40e.js} RENAMED Viewed

@@ -19267,4 +19267,4 @@ Object.keys(_index245).forEach(function (key) {
 export { dateFns as d };
-//# sourceMappingURL=index-f0dfb099.js.map
+//# sourceMappingURL=index-e940b40e.js.map