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

q2-tecton-elements 1.45.2 → 1.46.0

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

Files changed (310) hide show

package/dist/q2-tecton-elements/p-12326313.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["q2BtnCss","Q2BtnStyle0","Q2Btn","this","handleButtonSize","Number","size","handleDeprecationWarning","handleSlotChange","handleIcons","icon","Array","from","hostElement","querySelectorAll","reduce","acc","element","remove","hasIcon","hasLoc","querySelector","hasText","textContent","trim","hasIconLeft","firstElementChild","hasIconRight","lastElementChild","hasIconOnly","iconPosition","renderButton","ariaExpanded","ariaHasPopup","ariaSelected","ariaPressed","description","disabled","type","tabindex","buttonAttributes","loading","badge","label","hideLabel","renderLoadingSpinner","isLoadingSpinnerInline","h","Fragment","ref","el","primaryBtn","loc","class","undefined","role","_role","hidden","modifiers","onSlotchange","id","render","primaryBtnWrapper","tabIndex","componentWillLoad","handleAriaLabel","handleColor","componentDidLoad","overrideFocus","disable","ev","stopImmediatePropagation","focus","handleClick","delegateFocus","event","isEventFromElement","ariaLabelObserver","sizeObserver","getAriaValueFromProp","ariaLabel","q2LoadingCss","Q2LoadingStyle0","Q2Loading","halfCircleSpinner","localizedLabel","spinner","skeletonLoader","shape","skeletonShape","loader","loaderMap","default","skeleton","modifiersSet","Set","split","countsArray","counts","map","_b","_a","skeletonShapes","call","shapes","spinnerShape","spinnerMap"],"sources":["src/components/q2-btn/q2-btn.scss?tag=q2-btn&encapsulation=shadow","src/components/q2-btn/q2-btn.tsx","src/components/q2-loading/q2-loading.scss?tag=q2-loading&encapsulation=shadow","src/components/q2-loading/q2-loading.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './q2-btn-mixins';\n\n:host {\n display: inline-block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host([block]) {\n display: block;\n width: 100%;\n}\n\n::slotted(q2-icon) {\n pointer-events: none;\n}\n\n:host {\n --comp-font-weight: 600;\n --comp-border-radius: #{var-list(--tct-btn-border-radius, --app-border-radius-1, 3px)};\n --comp-btn-tween: #{var-list(var-prefixer(btn-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n --comp-btn-fallback-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n --comp-background-alternative: #ebf8ff;\n .btn-height-wrapper {\n height: var(--comp-btn-min-height, 44px);\n cursor: pointer;\n &:active {\n box-shadow: none;\n }\n }\n}\n\nbutton {\n margin: var-list(--tct-scale-0, --app-scale-0x, 0);\n padding: var-list(--tct-scale-0, --app-scale-0x, 0);\n display: inline-block;\n width: 100%;\n hyphens: auto;\n border: var(--tct-btn-border);\n border-radius: var(--tct-btn-border-radius);\n background: transparent;\n box-shadow: none;\n border-radius: 0;\n font-weight: 400;\n color: inherit;\n cursor: pointer;\n transition: var(--comp-btn-tween);\n transition-property: background, color, box-shadow, fill, border-color, border-width;\n outline: 0;\n &:disabled {\n opacity: var-list(var-prefixer(btn-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n cursor: not-allowed;\n }\n\n // Sizes\n :host([color]:not([size])) &,\n :host([intent]:not([size])) & {\n padding: var-list(var-prefixer(btn-padding), --tct-scale-2, --app-scale-2x, 10px);\n }\n :host([size='1']) & {\n padding: var-list(--tct-scale-1, --app-scale-1x, 5px);\n }\n :host([size='2']) & {\n padding: var-list(--tct-scale-2, --app-scale-2x, 10px);\n }\n :host([size='3']) & {\n padding: var-list(--tct-scale-3, --app-scale-3x, 15px);\n }\n :host([size='4x']) & {\n padding: var-list(--tct-scale-4x, --app-scale-4x, 20px);\n }\n :host([size='4']) & {\n padding: var-list(--tct-scale-6x, --app-scale-6x, 30px);\n }\n\n // Colors\n :host([color]) &,\n :host([intent]) & {\n font-size: var-list(var-prefixer(btn-font-size), inherit);\n border-radius: var-list(--tct-btn-border-radius, --comp-border-radius);\n text-transform: var-list(--tct-btn-text-transform, --comp-text-transform);\n letter-spacing: var-list(--tct-btn-letter-spacing, --comp-letter-spacing);\n }\n\n :host([size='small']) & {\n padding: var-list(var-prefixer(btn-padding-size-small), '4px 16px');\n font-size: var-list(var-prefixer(btn-font-size-small), 14px);\n }\n :host([size='medium']) & {\n padding: var-list(var-prefixer(btn-padding-size-medium), '12px 24px');\n font-size: var-list(var-prefixer(btn-font-size-medium), 16px);\n }\n :host([size='large']) & {\n padding: var-list(var-prefixer(btn-padding-size-large), '16px 32px');\n font-size: var-list(var-prefixer(btn-font-size-large), 20px);\n }\n\n :host([color='primary']) &,\n :host([intent='workflow-primary']) & {\n --comp-background: #{var-list(\n --tct-btn-primary-background,\n --tct-btn-primary-bg,\n --t-a11y-active-gray-color-AA,\n #404040\n )};\n --comp-hover-background: #{var-list(--tct-btn-primary-hover-background, --tct-btn-primary-hover-bg)};\n --comp-font-color: #{var-list(--tct-btn-primary-font-color, --app-white, #ffffff)};\n --comp-box-shadow: #{var-list(--tct-btn-primary-box-shadow, --comp-btn-fallback-box-shadow)};\n --comp-focus-box-shadow: #{var-list(--tct-btn-primary-focus-box-shadow, --comp-btn-fallback-box-shadow)};\n // different background for active\n --comp-active-background: var(--tct-btn-primary-active-background, #0063a0);\n @include btn-ring(primary, hover, --comp-background, --comp-font-color, null);\n @include btn-ring(primary, active, transparent, transparent, --comp-box-shadow);\n @include btn-ring(primary, disabled, transparent, transparent, --comp-box-shadow);\n @include btn-ring(primary, focus-visible, --const-focus-color, --comp-font-color, null);\n @include btn-intent(primary);\n @include btn-icon-color(primary, --comp-font-color);\n }\n\n :host([color='secondary']) &,\n :host([intent='workflow-secondary']) & {\n --comp-background: #{var-list(\n --tct-btn-secondary-background,\n --tct-btn-secondary-bg,\n --t-button-default-bg,\n #cccccc\n )};\n --comp-hover-background: #{var-list(\n --tct-btn-secondary-hover-background,\n --tct-btn-secondary-hover-bg,\n --t-a11y-active-gray-color-AA,\n #404040\n )};\n --comp-hover-font-color: var(--app-white, #ffffff);\n --comp-box-shadow: #{var-list(--tct-btn-secondary-box-shadow, --comp-btn-fallback-box-shadow)};\n --comp-focus-box-shadow: #{var-list(--tct-btn-secondary-focus-box-shadow, --comp-btn-fallback-box-shadow)};\n @include btn-ring(secondary, hover, --comp-hover-background, --app-white, null);\n @include btn-ring(secondary, active, transparent, transparent, --comp-box-shadow);\n @include btn-ring(secondary, disabled, transparent, transparent, --comp-box-shadow);\n @include btn-ring(secondary, focus-visible, --const-focus-color, --app-white, null);\n @include btn-intent(secondary);\n @include btn-icon-color(secondary, --comp-font-color);\n }\n\n :host([intent='workflow-destroy']) & {\n --comp-background: #{var-list(--tct-btn-destroy-background, --const-stoplight-alert, #d20a0a)};\n --comp-font-color: #{var-list(--tct-btn-destroy-font-color, --app-white)};\n --comp-box-shadow: #{var-list(--tct-btn-destroy-box-shadow, --comp-btn-fallback-box-shadow)};\n --comp-focus-box-shadow: #{var-list(--tct-btn-destroy-focus-box-shadow, --comp-btn-fallback-box-shadow)};\n @include btn-ring(destroy, hover, --comp-background, --comp-font-color, null);\n @include btn-ring(destroy, active, transparent, transparent, --comp-box-shadow);\n @include btn-ring(destroy, disabled, transparent, transparent, --comp-box-shadow);\n @include btn-ring(destroy, focus-visible, --const-focus-color, --comp-font-color, null);\n @include btn-intent(destroy);\n @include btn-icon-color(destroy, --comp-font-color);\n }\n\n :host([intent='workflow-escape']) & {\n --comp-background: #{var-list(--tct-btn-escape-background, --app-white, #ffffff)};\n --comp-font-color: #{var-list(\n --tct-btn-escape-font-color,\n --tct-btn-primary-background,\n --tct-btn-primary-bg,\n --t-a11y-active-gray-color-AA,\n #404040\n )};\n --comp-box-shadow: #{var-list(--tct-btn-escape-box-shadow, --comp-btn-fallback-box-shadow)};\n --comp-hover-box-shadow: #{var-list(--tct-btn-escape-hover-box-shadow, --comp-btn-fallback-box-shadow)};\n --comp-focus-box-shadow: #{var-list(--tct-btn-escape-focus-box-shadow, --comp-btn-fallback-box-shadow)};\n // different background for hover/active/focus\n --comp-hover-background: #{var-list(--tct-btn-escape-hover-background, --comp-background-alternative)};\n --comp-active-background: #{var-list(--tct-btn-escape-active-background, --comp-background-alternative)};\n --comp-focus-background: #{var-list(--tct-btn-escape-focus-background, --comp-background-alternative)};\n @include btn-ring(escape, hover, --comp-font-color, --comp-background, null);\n @include btn-ring(escape, active, transparent, transparent, --comp-box-shadow);\n @include btn-ring(escape, disabled, transparent, transparent, --comp-box-shadow);\n @include btn-ring(escape, focus-visible, --const-focus-color, --comp-background, null);\n @include btn-intent(escape);\n @include btn-icon-color(escape, --comp-font-color);\n }\n\n :host([intent='neutral']) & {\n --comp-background: #{var-list(--tct-btn-neutral-background, --app-white, #ffffff)};\n --comp-font-color: #{var-list(\n --tct-btn-neutral-font-color,\n --tct-btn-primary-background,\n --tct-btn-primary-bg,\n --t-a11y-active-gray-color-AA,\n #404040\n )};\n --comp-box-shadow: #{var-list(--tct-btn-neutral-box-shadow, --comp-btn-fallback-box-shadow)};\n --comp-focus-box-shadow: #{var-list(--tct-btn-neutral-focus-box-shadow, --comp-btn-fallback-box-shadow)};\n // use outline instead border: because on/off border makes the button shaking on hover/focus/active\n --comp-border-width: 1px;\n --comp-border-style: solid;\n --comp-border-color: var(--comp-font-color);\n @include btn-ring(neutral, hover, --comp-font-color, --app-white, null);\n @include btn-ring(neutral, active, transparent, transparent, --comp-box-shadow);\n @include btn-ring(neutral, disabled, transparent, transparent, --comp-box-shadow);\n @include btn-ring(neutral, focus-visible, --const-focus-color, --comp-background, null);\n @include btn-intent(neutral);\n @include btn-icon-color(neutral, --comp-font-color);\n }\n\n :host([intent='neutral-text']) & {\n --comp-background: #{var-list(\n --tct-btn-neutral-text-background,\n --tct-btn-neutral-text-bg,\n --app-white,\n #ffffff\n )};\n --comp-font-color: #{var-list(\n --tct-btn-neutral-text-font-color,\n --tct-btn-primary-background,\n --tct-btn-primary-bg,\n --t-a11y-active-gray-color-AA,\n #404040\n )};\n --comp-box-shadow: var(--tct-btn-neutral-text-box-shadow);\n --comp-hover-text-decoration: underline;\n // different background for focus\n --comp-focus-background: #{var-list(--tct-btn-neutral-text-focus-background, --comp-background-alternative)};\n @include btn-ring(neutral-text, hover, --comp-font-color, --comp-background, null);\n @include btn-ring(neutral-text, active, transparent, transparent, --comp-box-shadow);\n @include btn-ring(neutral-text, disabled, transparent, transparent, --comp-box-shadow);\n @include btn-ring(neutral-text, focus-visible, --const-focus-color, --app-white, null);\n @include btn-intent(neutral-text);\n @include btn-icon-color(neutral-text, --comp-font-color);\n }\n\n // Icons\n :host(:not([size])) &.icon-only {\n width: var-list(var-prefixer(btn-icon-width), 44px);\n height: var-list(var-prefixer(btn-icon-height), 44px);\n border-radius: var-list(var-prefixer(btn-icon-border-radius), --tct-btn-border-radius, 0);\n }\n\n :host(:not([color]):not([intent])),\n &.icon-only {\n &:hover,\n &:focus {\n background: var-list(\n --tct-btn-icon-hover-background,\n var-prefixer(btn-icon-hover-bg),\n var-prefixer(gray-13),\n --tct-gray-l3,\n --app-gray-l3,\n #f2f2f2\n );\n }\n }\n\n :host(:not([intent])[active]) &.icon-only {\n background-color: var-list(\n --tct-btn-icon-active-background,\n var-prefixer(btn-icon-active-bg),\n var-prefixer(gray-14),\n --tct-gray-l3,\n --app-gray-l3,\n #f2f2f2\n );\n }\n\n :host(:not([intent])) &.icon-only:hover *,\n :host(:not([intent])) &.icon-only:focus *,\n :host(:not([intent])[active]) &.icon-only * {\n color: var-list(var-prefixer(btn-icon-hover-color), var-prefixer(link-hover-color), #080808);\n }\n\n // Plain\n :host(:not([intent])) &:not(.icon-only) {\n height: var-list(--tct-btn-height, auto);\n padding-inline: var-list(--tct-btn-padding-inline, 0);\n font-weight: var-list(--tct-btn-font-weight);\n border-radius: var-list(--tct-btn-border-radius, 0);\n\n &:hover,\n &:focus {\n background: var(--tct-btn-hover-background);\n }\n }\n\n // Badges\n :host([badge]) & {\n padding: var-list(var-prefixer(btn-badge-padding), unquote('2px 5px'));\n font-size: var-list(var-prefixer(btn-badge-font-size), var-prefixer(btn-font-size), inherit);\n border-radius: var-list(\n var-prefixer(btn-badge-border-radius),\n --tct-border-radius-1,\n --app-border-radius-1,\n 3px\n );\n background-color: var-list(--tct-btn-badge-background, var-prefixer(btn-badge-bg), transparent);\n color: var-list(var-prefixer(btn-badge-font-color), inherit);\n\n ::slotted(q2-icon) {\n --tct-icon-size: 1em;\n }\n }\n\n :host([badge]:hover) &:enabled {\n background-color: var-list(\n --tct-btn-badge-hover-background,\n var-prefixer(btn-badge-hover-bg),\n var-prefixer(gray-14),\n --tct-gray-l3,\n --app-gray-l3,\n #f2f2f2\n );\n color: var-list(\n var-prefixer(btn-badge-hover-font-color),\n var-prefixer(gray-5),\n --tct-gray-d2,\n --app-gray-d2,\n #404040\n );\n }\n\n :host(.selected[badge]) &,\n :host([active][badge]) & {\n background-color: var-list(\n --tct-btn-badge-active-background,\n var-prefixer(btn-badge-active-bg),\n --comp-btn-primary-background\n );\n color: var-list(var-prefixer(btn-badge-active-font-color), --comp-btn-primary-font-color);\n }\n}\n\ndiv {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var-list(--app-scale-1x, 5px);\n\n :host([loading]) .icon-right & {\n flex-direction: row-reverse;\n }\n}\n\nq2-loading {\n --tct-loading-primary-color: currentcolor;\n --tct-loading-secondary-color: currentcolor;\n --tct-loading-spinner-size: 24px;\n}\n\n:host([loading]) ::slotted(q2-icon) {\n display: none;\n}\n:host([loading]) button {\n pointer-events: none;\n}\n\n:host([block]) button,\n:host([block]) button.icon-only {\n display: block;\n width: 100%;\n}\n","import { Component, State, Prop, h, ComponentInterface, Watch, Listen, Element, Fragment } from '@stencil/core';\nimport {\n getAriaValueFromProp,\n handleAriaLabel,\n handleColor,\n isEventFromElement,\n loc,\n overrideFocus,\n handleDeprecationWarning,\n} from 'src/utils';\n\n@Component({ tag: 'q2-btn', shadow: true, styleUrl: 'q2-btn.scss' })\nexport class Q2Btn implements ComponentInterface {\n @Prop() ariaExpanded: string;\n @Prop() ariaHasPopup: string;\n @Prop() ariaControls: string;\n @Prop() ariaSelected: string;\n @Prop() ariaPressed: string;\n @Prop() description: string;\n @Prop() tabIndex: number;\n\n /**\n * Displays the component in an active state.\n *\n * @info\n * Only intended for use with the `badge` property.\n * @deprecated\n */\n @Prop({ reflect: true }) active: boolean;\n\n /**\n * Displays the component in a smaller, badge style.\n * @deprecated\n */\n @Prop({ reflect: true }) badge: boolean;\n\n /** The component expands to fill the width of its parent element. */\n @Prop({ reflect: true }) block: boolean;\n\n /** Marks the component as disabled and displays a `not-allowed` cursor on hover. */\n @Prop({ reflect: true }) disabled: boolean;\n\n /**\n * Hides the `label`, and assigns its value to the `aria-label` attribute on the `<button>` element.\n */\n @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n\n /**\n * Indicates the role of the component in the workflow, which will apply appropriate styling to the component.\n */\n @Prop({ reflect: true, mutable: true }) intent:\n | 'workflow-primary'\n | 'workflow-secondary'\n | 'workflow-destroy'\n | 'workflow-escape'\n | 'neutral'\n | 'neutral-text';\n\n /**\n * Defines the text content of the button if it is not provided in the `<slot>` of the element.\n * Also used for the `aria-label` of the `<button>` element when only displaying an icon.\n *\n * @localizable\n */\n @Prop({ reflect: true, mutable: true }) label: string;\n\n /** Displays the button with a loading spinner to indicate something is happening in the background and the user should not click again. */\n @Prop({ reflect: true }) loading: boolean;\n\n /** The default behavior of the button. */\n @Prop({ reflect: true }) type: string = 'button';\n\n /**\n * @private\n * Role attribute for better semantic accessibility support\n */\n @Prop({ reflect: true }) _role: string;\n\n /**\n * Defines the size of q2-btn, it renders as default size if not provided.\n */\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large';\n /** @deprecated */\n @Prop({ reflect: true, mutable: true }) color: string; // deprecated but need it to use utils/handleColor\n /** @deprecated */\n @Prop({ reflect: true }) fab: boolean;\n /** @deprecated */\n @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n @State() iconPosition: 'left' | 'right' | 'only';\n\n @Element() hostElement: HTMLElement;\n\n primaryBtn: HTMLButtonElement;\n primaryBtnWrapper: HTMLElement;\n ////////// LIFECYCLE HOOKS ////////\n\n componentWillLoad() {\n this.handleIcons();\n handleAriaLabel(this);\n handleColor(this);\n }\n\n componentDidLoad(): void {\n this.handleButtonSize();\n overrideFocus(this.hostElement);\n }\n\n @Listen('click', { capture: true })\n disable(ev: Event) {\n if (this.disabled) {\n ev.stopImmediatePropagation();\n }\n this.primaryBtn.focus();\n }\n\n @Listen('click', { capture: true })\n handleClick(ev: Event) {\n if (this.loading) {\n ev.stopImmediatePropagation();\n }\n this.primaryBtn.focus();\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.primaryBtn.focus();\n }\n\n //////// Method //////////\n\n ////////// OBSERVERS //////////\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n @Watch('size')\n sizeObserver() {\n this.handleButtonSize();\n }\n\n handleButtonSize = () => {\n if (Number(this.size) <= 4) {\n handleDeprecationWarning(this, 'size', 'prop');\n }\n };\n\n handleSlotChange = () => {\n this.handleIcons();\n };\n\n handleIcons = () => {\n // Only allow one icon in the button\n const icon = Array.from(this.hostElement.querySelectorAll(':scope > q2-icon')).reduce((acc, element) => {\n if (acc) element.remove();\n else acc = element;\n return acc;\n }, null);\n\n const hasIcon = !!icon;\n const hasLoc = !!this.hostElement.querySelector('q2-loc');\n const hasText = !!this.hostElement.textContent.trim();\n const hasIconLeft = (hasLoc || hasText) && hasIcon && this.hostElement.firstElementChild === icon;\n const hasIconRight = (hasLoc || hasText) && hasIcon && this.hostElement.lastElementChild === icon;\n const hasIconOnly = !hasIconLeft && !hasIconRight && hasIcon;\n\n let iconPosition;\n if (hasIconOnly) iconPosition = 'only';\n else if (hasIconLeft) iconPosition = 'left';\n else if (hasIconRight) iconPosition = 'right';\n this.iconPosition = iconPosition;\n };\n\n renderButton = () => {\n const { ariaExpanded, ariaHasPopup, ariaSelected, ariaPressed, description, disabled, type, tabindex } =\n this.buttonAttributes;\n const { iconPosition, loading, badge, label, hideLabel } = this;\n const renderLoadingSpinner = iconPosition || loading;\n const isLoadingSpinnerInline = !iconPosition || badge;\n return (\n <Fragment>\n <button\n ref={el => (this.primaryBtn = el ?? this.primaryBtn)}\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaHasPopup}\n aria-label={hideLabel && loc(label)}\n aria-selected={ariaSelected}\n aria-pressed={ariaPressed}\n disabled={disabled}\n type={type}\n tabindex={tabindex}\n test-id=\"q2BtnInnerButton\"\n class={iconPosition ? `icon-${iconPosition}` : ''}\n aria-describedby={!!description ? 'hidden-description' : undefined}\n role={this._role || undefined}\n >\n <div>\n {renderLoadingSpinner && (\n <q2-loading\n hidden={!loading}\n modifiers={isLoadingSpinnerInline ? 'inline' : undefined}\n />\n )}\n {!hideLabel && label ? loc(label) : <slot onSlotchange={this.handleSlotChange} />}\n </div>\n </button>\n {!!description && (\n <div\n id=\"hidden-description\"\n aria-hidden=\"true\"\n class=\"sr\"\n >\n {description}\n </div>\n )}\n </Fragment>\n );\n };\n\n render = () => {\n return this.size === 'small' ? (\n // wrap only for small sized\n <div\n class=\"btn-height-wrapper\"\n ref={el => (this.primaryBtnWrapper = el ?? this.primaryBtnWrapper)}\n tabIndex={-1}\n >\n {this.renderButton()}\n </div>\n ) : (\n this.renderButton()\n );\n };\n\n get buttonAttributes() {\n return {\n ariaExpanded: getAriaValueFromProp(this.ariaExpanded, ['true', 'false']),\n ariaHasPopup: getAriaValueFromProp(this.ariaHasPopup, [\n 'true',\n 'false',\n 'menu',\n 'listbox',\n 'tree',\n 'grid',\n 'dialog',\n ]),\n ariaLabel: this.label && this.hideLabel ? loc(this.label) : undefined,\n ariaSelected: getAriaValueFromProp(this.ariaSelected, ['true', 'false']),\n ariaPressed: getAriaValueFromProp(this.ariaPressed, ['true', 'false']),\n description: this.description !== undefined ? this.description : undefined,\n disabled: this.disabled || false,\n type: this.type,\n tabindex: this.tabIndex || undefined,\n };\n }\n}\n","@import '../../styles/host.scss';\n@import '../../styles/utility.scss';\n@import '../../styles/functions';\n\n:host {\n display: block;\n}\n\n:host([inline]),\n:host([modifiers*='inline']) {\n display: inline-block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host(:not([inline]):not([modifiers*='inline'])) {\n font-size: var-list(var-prefixer(loading-spinner-size), --app-scale-12x, 60px);\n}\n\n.q2-loading-animation {\n height: 1em;\n width: 1em;\n}\n\n@import './spinners/half-circle-spinner.scss';\n@import './skeleton/skeleton.scss';\n","import { Component, Prop, h, ComponentInterface, Element, Watch } from '@stencil/core';\nimport { handleAriaLabel, loc } from 'src/utils';\nimport skeletonShapes from './skeleton/shapes';\n\n@Component({ tag: 'q2-loading', shadow: true, styleUrl: 'q2-loading.scss' })\nexport class Q2Loading implements ComponentInterface {\n /**\n * Numeric adjustments are available for specific `type` and `shape` combinations.\n * These may impact the number of items, columns, and/or rows that display.\n *\n * When `shape=\"text\"`, `shape=\"detailed-item\"`, or `shape=\"label-value\"`, the `counts` attribute determines the number of rows to display.\n *\n * When `shape=\"table\"`, the `counts` attribute can be used in two ways:\n *\n * 1. `counts=\"CxR\"` = Provides a skeleton table of `C` columns and `R` rows. The default value is `\"5x5\"\n * 2. `counts=\"N\"` - Provides a skeleton table of `N` columns and 5 rows.\n *\n * When `shape=\"form\"`, the `counts` attribute can be used in two ways:\n *\n * 1. `count=\"CxR\" - Provides a skeleton form of `C` columns and `R` rows of fields. The default value is `\"1x1\"`.\n * 2. `count=\"N\"` - Provides a skeleton form of `N` fields stacked in single columns.\n */\n @Prop({ reflect: true }) counts: string;\n\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 /**\n * The label that is associated with the component. This is not displayed visually but is presented by screen readers.\n * @localizable\n */\n @Prop({ reflect: true, mutable: true }) label: string;\n\n /**\n * Visual adjustments available to specific type and shape combinations, written as a hyphen (`-`) separated string.\n *\n * Supported values depend on the type and shape selected, and are listed in detail in the shape sections above.\n */\n @Prop({ reflect: true }) modifiers: string;\n\n /**\n * The specific visual presentation of a loading element `type`.\n * @snippet\n * // when type=\"spinner\"\n * type ShapeValues = \"half-circle\";\n * // when type=\"skeleton\"\n * type ShapeValues = \"circle | \"rectangle\" | \"text\" | \"table\" | \"field\" | \"form\" | \"detailed-item\" | \"label-value\";\n */\n @Prop({ reflect: true }) shape: string;\n\n /** The type of loading element to display. */\n @Prop({ reflect: true }) type: 'spinner' | 'skeleton';\n\n /** @deprecated */\n @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n @Element() hostElement: HTMLElement;\n\n get loader() {\n const loaderMap = {\n default: this.spinner,\n spinner: this.spinner,\n skeleton: this.skeletonLoader,\n };\n\n return loaderMap[this.type] || loaderMap.default;\n }\n\n get modifiersSet(): Set<string> {\n if (this.type !== 'skeleton' || !this.modifiers) {\n return undefined;\n }\n\n return new Set(this.modifiers.split('-'));\n }\n\n get countsArray(): number[] {\n if (this.type !== 'skeleton' || !this.counts) {\n return undefined;\n }\n\n return this.counts.split('x').map(Number);\n }\n\n get skeletonShape() {\n return skeletonShapes[this.shape]?.(this.countsArray, this.modifiersSet) ?? '';\n }\n\n get spinnerShape() {\n const spinnerMap = {\n default: this.halfCircleSpinner,\n 'half-circle': this.halfCircleSpinner,\n };\n\n return spinnerMap[this.type] || spinnerMap.default;\n }\n\n get localizedLabel() {\n return loc(this.label || 'tecton.element.loading.ariaLabel');\n }\n\n componentWillLoad() {\n handleAriaLabel(this);\n }\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n render() {\n return this.loader();\n }\n\n halfCircleSpinner = () => {\n return (\n <div\n class=\"q2-loading-animation half-circle-spinner\"\n aria-label={this.localizedLabel}\n >\n <div class=\"circle circle-1\"></div>\n <div class=\"circle circle-2\"></div>\n </div>\n );\n };\n\n spinner = () => {\n return this.halfCircleSpinner();\n };\n\n skeletonLoader = () => {\n return (\n <div\n class=\"q2-loading-skeleton\"\n aria-label={this.localizedLabel}\n >\n {this.shape === 'custom' ? <slot /> : this.skeletonShape}\n <div class=\"q2-loading-skeleton-shimmer\"></div>\n </div>\n );\n };\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/p-176ad382.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,c as e,h as i,g as n}from"./p-a5f18e27.js";import{n as a,o,i as s,l as r}from"./p-42302f6f.js";const c="{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:flex;width:100%;justify-content:flex-end}:host([alignment=center]){justify-content:center}:host([alignment=left]){justify-content:flex-start}:host([hidden]){display:none}.container{display:inline-flex;column-gap:var(--tct-pagination-column-gap, var(--t-pagination-column-gap, var(--app-scale-2x, 10px)));align-items:center;height:var(--tct-pagination-height, var(--t-pagination-height, 44px))}.btn-group{display:flex;gap:var(--tct-pagination-btn-gap, var(--t-pagination-btn-gap, 0))}.description,.controls{white-space:nowrap}.controls{display:grid;grid-template-columns:auto 50px auto;align-items:center;gap:var(--tct-pagination-controls-gap, var(--t-pagination-controls-gap, var(--app-scale-1x, 5px)))}.controls[hidden]{display:none}.input-wrapper{height:var(--tct-pagination-height, var(--t-pagination-height, 44px));display:flex;align-items:center}q2-btn{--tct-btn-border-radius:var(--tct-pagination-btn-border-radius, var(--t-pagination-btn-border-radius));--tct-btn-border:var(--tct-pagination-btn-border, var(--t-pagination-btn-border))}q2-icon{--tct-icon-size:var(--tct-pagination-icon-size, var(--t-pagination-icon-size, 12px));color:var(--tct-pagination-icon-color, var(--t-pagination-icon-color, var(--t-text, #4d4d4d)))}q2-input{--tct-input-margin-top:0;--tct-input-margin-bottom:0;--tct-input-height:var(--tct-pagination-input-height, var(--t-pagination-input-height, 30px));--tct-input-min-height:var(--tct-input-height);--tct-input-align:center}q2-select{--tct-select-input-min-height:var(--tct-pagination-select-height, var(--t-pagination-select-height, 30px));--tct-select-input-max-height:var(--tct-pagination-select-height, var(--t-pagination-select-height, 30px));width:var(--tct-pagination-perpage-width, var(--t-pagination-perpage-width, 100%));min-width:var(--tct-pagination-perpage-min-width, var(--t-pagination-perpage-min-width, 110px))}";const d=c;const h=class{constructor(i){t(this,i);this.change=e(this,"change",7);this.handlePageChange=t=>{const{totalPages:e,inputField:i}=this;if(t<1){t=1}else if(t>e){t=e}if(i.value!==`${t}`)i.value=`${t}`;if(!this.hostElement.onchange){this.page=t}this.change.emit({page:t})};this.handlePerPageChange=t=>{this.perPage=t.detail.value1};this.checkSize=()=>{const{hostElement:t,containerElement:e}=this;const i=this.containerWidth>t.clientWidth;this.isSmall=i;if(i)return;a((()=>{const t=this.containerWidth===e.clientWidth;if(t)return;this.containerWidth=e.clientWidth;this.checkSize()}))};this.autoSize=true;this.total=undefined;this.page=undefined;this.pages=undefined;this.pagesOnly=undefined;this.perPage=undefined;this.perPageIncrements=undefined;this.recordsOnly=undefined;this.recordType=undefined;this.alignment=undefined;this.isSmall=undefined}componentWillLoad(){this.manageResizeObserver()}componentDidLoad(){this.containerWidth=this.containerElement.clientWidth;o(this.hostElement)}disconnectedCallback(){this.removeResizeObserver()}manageResizeObserver(){if(this.autoSize&&!this.recordsOnly&&!this.pagesOnly){if(this.resizeObserver)return;this.resizeObserver=new ResizeObserver((()=>this.checkSize()));this.resizeObserver.observe(this.hostElement);window.addEventListener("resize",this.checkSize)}else{this.isSmall=false;this.removeResizeObserver()}}onHostElementFocus(t){var e;if(!s(t,this.hostElement))return;const{isFullViewHidden:i,containerElement:n,inputField:a}=this;if(i){(e=n.querySelector("q2-btn:not([disabled])"))===null\|\|e===void 0?void 0:e.focus()}else{a.focus()}}get isFullViewHidden(){return this.isSmall\|\|this.recordsOnly\|\|this.pagesOnly}get pageWithDefault(){return this.page\|\|1}get perPageWithDefault(){return this.perPage\|\|10}get totalWithDefault(){return this.total\|\|0}get recordTypeWithDefault(){return this.recordType\|\|r("tecton.element.pagination.defaultRecordType")}get currentRange(){const{perPageWithDefault:t,totalWithDefault:e,pageWithDefault:i}=this;const n=(i-1)t+1;const a=Math.min(it,e);return`${n} - ${a}`}get nextRange(){const{perPageWithDefault:t,totalWithDefault:e,pageWithDefault:i}=this;const n=it+1;const a=Math.min((i+1)t,e);return`${n} - ${a}`}get prevRange(){const{perPageWithDefault:t,pageWithDefault:e}=this;const i=Math.max(1,(e-2)t+1);const n=(e-1)t;return`${i} - ${n}`}get totalPages(){const{pagesOnly:t,totalWithDefault:e,perPageWithDefault:i,pages:n}=this;if(t&&n&&!isNaN(parseInt(`${n}`)))return n;return Math.ceil(e/i)}removeResizeObserver(){var t;if(this.resizeObserver){(t=this.resizeObserver)===null\|\|t===void 0?void 0:t.unobserve(this.hostElement);this.resizeObserver=null;window.removeEventListener("resize",this.checkSize)}}renderPerPage(){var t;if(!((t=this.perPageIncrements)===null\|\|t===void 0?void 0:t.length)){return""}this.perPageIncrements=this.perPageIncrements.filter((t=>!isNaN(t))).map((t=>t*1)).sort(((t,e)=>t-e));if(this.perPage===undefined)this.perPage=this.perPageIncrements[0];return i("q2-select",{onChange:this.handlePerPageChange,value:this.perPageIncrements.includes(this.perPage)?`${this.perPage}`:undefined},this.perPageIncrements.map((t=>i("q2-option",{value:`${t}`,display:`${r("tecton.element.pagination.view")} ${t}`},`${r("tecton.element.pagination.view")} ${t}`))))}render(){var t;const{pagesOnly:e,recordsOnly:n,isFullViewHidden:a,recordTypeWithDefault:o,totalPages:s,totalWithDefault:c,pageWithDefault:d,currentRange:h,nextRange:l,prevRange:p}=this;const g=d===1;const f=d===s;let u="";let b="";if(e){b=r("tecton.element.pagination.goToPages",{next:d-1,total:s});u=r("tecton.element.pagination.goToPages",{next:d+1,total:s})}else if(n){b=r("tecton.element.pagination.goToRecords",{range:p,recordType:o.toLowerCase(),total:c});u=r("tecton.element.pagination.goToRecords",{range:l,recordType:o.toLowerCase(),total:c})}return i("nav",{key:"44eb0a538a5d88250254eb8608aef86047f5b9ea",class:"container",ref:t=>this.containerElement=t,"aria-label":r("tecton.element.pagination.title")},i("div",{key:"c765f6c929367f9715deddc7fc01fdb8e8686d52",class:"description","test-id":"description"},e?r("tecton.element.pagination.pages",{current:d,total:s}):r("tecton.element.pagination.description",{range:h,recordType:o.toLowerCase(),total:c.toLocaleString()})),i("div",{key:"ebda41944173b9f810c517715ec28304bfd4f5f5",class:"btn-group"},i("q2-btn",{key:"e48d65cf8936f093fca76aac546988d69a7cd019",label:r("tecton.element.pagination.goToFirstPage"),disabled:g,hidden:a,onClick:()=>this.handlePageChange(1),"test-id":"firstPageBtn","hide-label":true},i("q2-icon",{key:"b7b8fbba4f4f4c30da9aa0de9f558800ffcc8f00",type:"chevron-double-left"})),i("q2-btn",{key:"78ce3fd249bc19b9401a751fc15e6a00cea0ad74",label:b,disabled:g,onClick:()=>this.handlePageChange(d-1),"test-id":"prevPageBtn","hide-label":true},i("q2-icon",{key:"9cfd78793289084d596b545124516a20185ebdd4",type:"chevron-left"}))),i("div",{key:"42c13150618ecaeeab55ec5589bd8f012a099d1f",class:"controls",hidden:a,"test-id":"controls"},i("span",{key:"b78b4dca58e8fdff7272734fbc38b4edf46f2455","aria-hidden":"true"},r("tecton.element.pagination.page")),i("div",{key:"88c66c4fa458fab14476b05edf7d5a45c8d0dfa5",class:"input-wrapper",onClick:()=>this.inputField.dispatchEvent(new FocusEvent("focus"))},i("q2-input",{key:"8abe4074a77e3f67d1e82351a5be78d2d6b85ffe",type:"number",value:`${d}`,min:1,max:this.totalPages,hideLabel:true,optional:true,label:`${r("tecton.element.pagination.page")} (${r("tecton.element.pagination.ofPages",[s.toLocaleString()])})`,onChange:t=>this.handlePageChange(t.detail.value),"test-id":"pageInput",current:"page",ref:t=>this.inputField=t})),i("span",{key:"d715bbbdbc5dc42156fe7249acc8dd3c01b38525","aria-hidden":"true"},r("tecton.element.pagination.ofPages",[s.toLocaleString()]))),i("div",{key:"d6cdbd1023d863b5a8253d0457fb9f6c562a2ad3",class:"btn-group"},i("q2-btn",{key:"1da65b555ece6c2f5d648126d1e875729bb3655c",label:u,disabled:f,onClick:()=>this.handlePageChange(d+1),"test-id":"nextPageBtn","hide-label":true},i("q2-icon",{key:"c6712201038fa284dc742205c9358ff3d4cf6dad",type:"chevron-right"})),i("q2-btn",{key:"5855d4bc16deea2d6f70235b16a84f32209c5297",label:"tecton.element.pagination.goToLastPage",disabled:f,hidden:a,onClick:()=>this.handlePageChange(s),"test-id":"lastPageBtn","hide-label":true},i("q2-icon",{key:"a09d6ddfe281f490666e04604c6c191ac1944926",type:"chevron-double-right"}))),i("div",{key:"221c89e3e6bacc0a634f5b791116eb77201b53f2",class:"per-page",hidden:a\|\|!((t=this.perPageIncrements)===null\|\|t===void 0?void 0:t.length)},this.renderPerPage()))}get hostElement(){return n(this)}static get watchers(){return{recordsOnly:["manageResizeObserver"],pagesOnly:["manageResizeObserver"],autoSize:["manageResizeObserver"]}}};h.style=d;export{h as q2_pagination};
2	+ //# sourceMappingURL=p-176ad382.entry.js.map

package/dist/q2-tecton-elements/p-176ad382.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["q2PaginationCss","Q2PaginationStyle0","Q2Pagination","this","handlePageChange","page","totalPages","inputField","value","hostElement","onchange","change","emit","handlePerPageChange","event","perPage","detail","checkSize","containerElement","isOverflowing","containerWidth","clientWidth","isSmall","nextPaint","containerWidthHasNotChanged","componentWillLoad","manageResizeObserver","componentDidLoad","overrideFocus","disconnectedCallback","removeResizeObserver","autoSize","recordsOnly","pagesOnly","resizeObserver","ResizeObserver","observe","window","addEventListener","onHostElementFocus","isEventFromElement","isFullViewHidden","_a","querySelector","focus","pageWithDefault","perPageWithDefault","totalWithDefault","total","recordTypeWithDefault","recordType","loc","currentRange","start","end","Math","min","nextRange","prevRange","max","pages","isNaN","parseInt","ceil","unobserve","removeEventListener","renderPerPage","perPageIncrements","length","filter","map","sort","a","b","undefined","h","onChange","includes","display","render","onFirstPage","onLastPage","nextButtonLabel","prevButtonLabel","next","range","toLowerCase","key","class","ref","el","current","toLocaleString","label","disabled","hidden","onClick","type","dispatchEvent","FocusEvent","hideLabel","optional"],"sources":["src/components/q2-pagination/q2-pagination.scss?tag=q2-pagination&encapsulation=shadow","src/components/q2-pagination/q2-pagination.tsx"],"sourcesContent":["@import '../../styles/host';\n@import '../../styles/functions';\n\n:host {\n display: flex;\n width: 100%;\n justify-content: flex-end;\n}\n\n:host([alignment=\"center\"]) {\n justify-content: center;\n}\n\n:host([alignment=\"left\"]) {\n justify-content: flex-start;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.container {\n display: inline-flex;\n column-gap: var-list(var-prefixer(pagination-column-gap), --app-scale-2x, 10px);\n align-items: center;\n height: var-list(var-prefixer(pagination-height), 44px);\n}\n\n.btn-group {\n display: flex;\n gap: var-list(var-prefixer(pagination-btn-gap), 0);\n}\n\n.description,\n.controls {\n white-space: nowrap;\n}\n\n.controls {\n display: grid;\n grid-template-columns: auto 50px auto;\n align-items: center;\n gap: var-list(var-prefixer(pagination-controls-gap), --app-scale-1x, 5px);\n\n &[hidden] {\n display: none;\n }\n}\n\n.input-wrapper {\n height: var-list(var-prefixer(pagination-height), 44px);\n display: flex;\n align-items: center;\n}\n\nq2-btn {\n --tct-btn-border-radius: #{var-list(var-prefixer(pagination-btn-border-radius))};\n --tct-btn-border: #{var-list(var-prefixer(pagination-btn-border))};\n}\n\nq2-icon {\n --tct-icon-size: #{var-list(var-prefixer(pagination-icon-size), 12px)};\n color: var-list(var-prefixer(pagination-icon-color), --t-text, #4d4d4d);\n}\n\nq2-input {\n --tct-input-margin-top: 0;\n --tct-input-margin-bottom: 0;\n --tct-input-height: #{var-list(var-prefixer(pagination-input-height), 30px)};\n --tct-input-min-height: var(--tct-input-height);\n --tct-input-align: center;\n}\n\nq2-select {\n --tct-select-input-min-height: #{var-list(var-prefixer(pagination-select-height), 30px)};\n --tct-select-input-max-height: #{var-list(var-prefixer(pagination-select-height), 30px)};\n width: #{var-list(var-prefixer(pagination-perpage-width), 100%)};\n min-width: #{var-list(var-prefixer(pagination-perpage-min-width), 110px)};\n}\n\n","import {\n Component,\n State,\n Prop,\n h,\n ComponentInterface,\n Watch,\n Listen,\n Element,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport { isEventFromElement, loc, nextPaint, overrideFocus } from 'src/utils';\n\n@Component({ tag: 'q2-pagination', shadow: true, styleUrl: 'q2-pagination.scss' })\nexport class Q2Pagination implements ComponentInterface {\n /** Determines whether the component uses the dynamic resizing behavior. */\n @Prop({ reflect: true, mutable: true }) autoSize: boolean = true;\n\n /** The total number of records to paginate. */\n @Prop({ reflect: true }) total: number;\n\n /** The current page that is being displayed. */\n @Prop({ reflect: true, mutable: true }) page: number;\n\n /**\n * The number of pages that can be displayed.\n * @info\n * Only referenced when `pagesOnly` is true.\n */\n @Prop({ reflect: true, mutable: true }) pages: number;\n\n /** Indicates to only display the current and total pages. */\n @Prop({ reflect: true, mutable: true }) pagesOnly: boolean;\n\n /** The total number of records displayed on each page. */\n @Prop() perPage: number;\n\n /** The list of perPage to operate pagination. e.g.) [10, 25, 50] */\n @Prop() perPageIncrements: number[];\n\n /** Indicates to only display the current and total records. */\n @Prop({ reflect: true, mutable: true }) recordsOnly: boolean;\n\n /** Description of the record type to be displayed alongside the record count. */\n @Prop() recordType: string;\n\n /** Indicates the horizontal alignment of children elements */\n @Prop() alignment: string;\n\n @Element() hostElement: HTMLElement;\n\n /**\n * Emitted when the page is changed.\n * @legacyEvent\n */\n @Event() change: EventEmitter<{ page: number }>;\n\n @State() isSmall: boolean;\n\n inputField: HTMLQ2InputElement;\n containerElement: HTMLElement;\n containerWidth: number;\n resizeObserver: ResizeObserver;\n\n ////////// LIFECYCLE HOOKS ////////\n componentWillLoad(): void {\n this.manageResizeObserver();\n }\n\n componentDidLoad(): void {\n this.containerWidth = this.containerElement.clientWidth;\n\n overrideFocus(this.hostElement);\n }\n\n disconnectedCallback() {\n this.removeResizeObserver();\n }\n\n ///////// OBSERVERS /////////\n\n @Watch('recordsOnly')\n @Watch('pagesOnly')\n @Watch('autoSize')\n manageResizeObserver() {\n if (this.autoSize && !this.recordsOnly && !this.pagesOnly) {\n if (this.resizeObserver) return;\n this.resizeObserver = new ResizeObserver(() => this.checkSize());\n this.resizeObserver.observe(this.hostElement);\n window.addEventListener('resize', this.checkSize);\n } else {\n this.isSmall = false;\n this.removeResizeObserver();\n }\n }\n\n ///////// HOST ELEMENT EVENTS /////////\n\n @Listen('focus')\n onHostElementFocus(event) {\n if (!isEventFromElement(event, this.hostElement)) return;\n const { isFullViewHidden, containerElement, inputField } = this;\n if (isFullViewHidden) {\n containerElement.querySelector<HTMLElement>('q2-btn:not([disabled])')?.focus();\n } else {\n inputField.focus();\n }\n }\n\n ///////// GETTERS /////////\n\n get isFullViewHidden() {\n return this.isSmall || this.recordsOnly || this.pagesOnly;\n }\n\n get pageWithDefault() {\n return this.page || 1;\n }\n\n get perPageWithDefault() {\n return this.perPage || 10;\n }\n\n get totalWithDefault() {\n return this.total || 0;\n }\n\n get recordTypeWithDefault() {\n return this.recordType || loc('tecton.element.pagination.defaultRecordType');\n }\n\n get currentRange() {\n const { perPageWithDefault: perPage, totalWithDefault: total, pageWithDefault: page } = this;\n const start = (page - 1) * perPage + 1;\n const end = Math.min(page * perPage, total);\n return `${start} - ${end}`;\n }\n\n get nextRange() {\n const { perPageWithDefault: perPage, totalWithDefault: total, pageWithDefault: page } = this;\n const start = page * perPage + 1;\n const end = Math.min((page + 1) * perPage, total);\n return `${start} - ${end}`;\n }\n\n get prevRange() {\n const { perPageWithDefault: perPage, pageWithDefault: page } = this;\n const start = Math.max(1, (page - 2) * perPage + 1);\n const end = (page - 1) * perPage;\n return `${start} - ${end}`;\n }\n\n get totalPages() {\n const { pagesOnly, totalWithDefault: total, perPageWithDefault: perPage, pages } = this;\n\n if (pagesOnly && pages && !isNaN(parseInt(`${pages}`))) return pages;\n\n return Math.ceil(total / perPage);\n }\n\n ///////// HELPERS /////////\n\n removeResizeObserver() {\n if (this.resizeObserver) {\n this.resizeObserver?.unobserve(this.hostElement);\n this.resizeObserver = null;\n window.removeEventListener('resize', this.checkSize);\n }\n }\n\n handlePageChange = (page: number) => {\n const { totalPages, inputField } = this;\n if (page < 1) {\n page = 1;\n } else if (page > totalPages) {\n page = totalPages;\n }\n\n if (inputField.value !== `${page}`) inputField.value = `${page}`;\n\n if (!this.hostElement.onchange) {\n this.page = page;\n }\n\n this.change.emit({ page });\n };\n\n handlePerPageChange = (event: CustomEvent) => {\n this.perPage = event.detail.value * 1;\n };\n\n checkSize = () => {\n const { hostElement, containerElement } = this;\n const isOverflowing = this.containerWidth > hostElement.clientWidth;\n this.isSmall = isOverflowing;\n if (isOverflowing) return;\n\n nextPaint(() => {\n const containerWidthHasNotChanged = this.containerWidth === containerElement.clientWidth;\n if (containerWidthHasNotChanged) return;\n this.containerWidth = containerElement.clientWidth;\n this.checkSize();\n });\n };\n\n renderPerPage() {\n if (!this.perPageIncrements?.length) {\n return '';\n }\n this.perPageIncrements = this.perPageIncrements\n .filter(perPage => !isNaN(perPage))\n .map(perPage => perPage * 1)\n .sort((a, b) => a - b);\n if (this.perPage === undefined) this.perPage = this.perPageIncrements[0];\n return (\n <q2-select\n onChange={this.handlePerPageChange}\n value={this.perPageIncrements.includes(this.perPage) ? `${this.perPage}` : undefined}\n >\n {this.perPageIncrements.map(perPage => (\n <q2-option\n value={`${perPage}`}\n display={`${loc('tecton.element.pagination.view')} ${perPage}`}\n >{`${loc('tecton.element.pagination.view')} ${perPage}`}</q2-option>\n ))}\n </q2-select>\n );\n }\n\n render() {\n const {\n pagesOnly,\n recordsOnly,\n isFullViewHidden,\n recordTypeWithDefault: recordType,\n totalPages,\n totalWithDefault: total,\n pageWithDefault: page,\n currentRange,\n nextRange,\n prevRange,\n } = this;\n const onFirstPage = page === 1;\n const onLastPage = page === totalPages;\n\n let nextButtonLabel: string = '';\n let prevButtonLabel: string = '';\n if (pagesOnly) {\n prevButtonLabel = loc('tecton.element.pagination.goToPages', { next: page - 1, total: totalPages });\n nextButtonLabel = loc('tecton.element.pagination.goToPages', { next: page + 1, total: totalPages });\n } else if (recordsOnly) {\n prevButtonLabel = loc('tecton.element.pagination.goToRecords', {\n range: prevRange,\n recordType: recordType.toLowerCase(),\n total,\n });\n nextButtonLabel = loc('tecton.element.pagination.goToRecords', {\n range: nextRange,\n recordType: recordType.toLowerCase(),\n total,\n });\n }\n\n return (\n <nav\n class=\"container\"\n ref={el => (this.containerElement = el)}\n aria-label={loc('tecton.element.pagination.title')}\n >\n <div\n class=\"description\"\n test-id=\"description\"\n >\n {pagesOnly\n ? loc('tecton.element.pagination.pages', {\n current: page,\n total: totalPages,\n })\n : loc('tecton.element.pagination.description', {\n range: currentRange,\n recordType: recordType.toLowerCase(),\n total: total.toLocaleString(),\n })}\n </div>\n <div class=\"btn-group\">\n <q2-btn\n label={loc('tecton.element.pagination.goToFirstPage')}\n disabled={onFirstPage}\n hidden={isFullViewHidden}\n onClick={() => this.handlePageChange(1)}\n test-id=\"firstPageBtn\"\n hide-label\n >\n <q2-icon type=\"chevron-double-left\" />\n </q2-btn>\n <q2-btn\n label={prevButtonLabel}\n disabled={onFirstPage}\n onClick={() => this.handlePageChange(page - 1)}\n test-id=\"prevPageBtn\"\n hide-label\n >\n <q2-icon type=\"chevron-left\" />\n </q2-btn>\n </div>\n <div\n class=\"controls\"\n hidden={isFullViewHidden}\n test-id=\"controls\"\n >\n <span aria-hidden=\"true\">{loc('tecton.element.pagination.page')}</span>\n <div\n class=\"input-wrapper\"\n onClick={() => this.inputField.dispatchEvent(new FocusEvent('focus'))}\n >\n <q2-input\n type=\"number\"\n value={`${page}`}\n min={1}\n max={this.totalPages}\n hideLabel\n optional\n label={`${loc('tecton.element.pagination.page')} (${loc(\n 'tecton.element.pagination.ofPages',\n [totalPages.toLocaleString()]\n )})`}\n onChange={event => this.handlePageChange(event.detail.value)}\n test-id=\"pageInput\"\n current=\"page\"\n ref={el => (this.inputField = el)}\n ></q2-input>\n </div>\n <span aria-hidden=\"true\">\n {loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])}\n </span>\n </div>\n <div class=\"btn-group\">\n <q2-btn\n label={nextButtonLabel}\n disabled={onLastPage}\n onClick={() => this.handlePageChange(page + 1)}\n test-id=\"nextPageBtn\"\n hide-label\n >\n <q2-icon type=\"chevron-right\" />\n </q2-btn>\n <q2-btn\n label=\"tecton.element.pagination.goToLastPage\"\n disabled={onLastPage}\n hidden={isFullViewHidden}\n onClick={() => this.handlePageChange(totalPages)}\n test-id=\"lastPageBtn\"\n hide-label\n >\n <q2-icon type=\"chevron-double-right\" />\n </q2-btn>\n </div>\n <div\n class=\"per-page\"\n hidden={isFullViewHidden || !this.perPageIncrements?.length}\n >\n {this.renderPerPage()}\n </div>\n </nav>\n );\n }\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/{p-f4d77672.entry.js → p-195a133c.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as e,c as i,h as n}from"./p-a5f18e27.js";const t="*{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}.tab-pane[aria-hidden=true]{display:none}.tab-pane:focus{outline:none;box-shadow:none}";const s=t;const d=class{constructor(n){e(this,n);this.badge=i(this,"badge",7);this.badgeCount=undefined;this.badgeDescription=undefined;this.badgeStatus=undefined;this.badgeTheme=undefined;this.label=undefined;this.value=undefined;this.name=undefined;this.selected=undefined;this.index=undefined;this.guid=undefined}badgeObserver(){this.badge.emit()}render(){return n("div",{key:"eba2088747312d69fb220397fb7143eaedb252ef",id:`tab-pane-${this.guid}-${this.index}`,class:`tab-pane${this.selected?"":" hidden"}`,role:"tabpanel",tabindex:"-1","aria-hidden":`${!this.selected}`,"aria-labelledby":`tab-${this.guid}-${this.index}`},n("slot",{key:"e9677321c147f9576d398c6fb69a78b434f16065"}))}static get watchers(){return{badgeCount:["badgeObserver"],badgeDescription:["badgeObserver"],badgeTheme:["badgeObserver"],badgeStatus:["badgeObserver"]}}};d.style=s;export{d as q2_tab_pane};
-//# sourceMappingURL=p-f4d77672.entry.js.map
+import{r as e,c as i,h as n}from"./p-a5f18e27.js";const t="*{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}.tab-pane[aria-hidden=true]{display:none}.tab-pane:focus{outline:none;box-shadow:none}";const s=t;const d=class{constructor(n){e(this,n);this.badge=i(this,"badge",7);this.badgeCount=undefined;this.badgeDescription=undefined;this.badgeStatus=undefined;this.badgeTheme=undefined;this.label=undefined;this.value=undefined;this.name=undefined;this.selected=undefined;this.index=undefined;this.guid=undefined}badgeObserver(){this.badge.emit()}render(){return n("div",{key:"508f9819ac6a2a1072c25478636c07243ad4c083",id:`tab-pane-${this.guid}-${this.index}`,class:`tab-pane${this.selected?"":" hidden"}`,role:"tabpanel",tabindex:"-1","aria-hidden":`${!this.selected}`,"aria-labelledby":`tab-${this.guid}-${this.index}`},n("slot",{key:"54975e3a64cd132919e435fe5a08d355b4b740fc"}))}static get watchers(){return{badgeCount:["badgeObserver"],badgeDescription:["badgeObserver"],badgeTheme:["badgeObserver"],badgeStatus:["badgeObserver"]}}};d.style=s;export{d as q2_tab_pane};
+//# sourceMappingURL=p-195a133c.entry.js.map

package/dist/q2-tecton-elements/p-1b37b8c6.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,h as e,g as i}from"./p-a5f18e27.js";import{f as s}from"./p-42302f6f.js";const o="{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}{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([bordered]:not([bordered=false])) ::slotted(q2-item:not(:last-child)),:host([bordered]:not([bordered=false])) .header{border-style:var(--tct-list-item-border-style, solid);border-width:var(--tct-list-item-border-width, 0 0 1px 0);border-color:var(--tct-list-item-border-color, var(--t-gray-12, #d9d9d9))}.header{--comp-default-header-padding:0 var(--app-scale-4x, 20px);display:flex;gap:var(--app-scale-3x, 12px);padding:var(--tct-list-header-padding, var(--comp-default-header-padding));min-height:var(--tct-list-header-min-height, var(--t-list-header-min-height, 44px))}.header-spacebetween{justify-content:space-between}.header-start{justify-content:flex-start}.header-end{justify-content:flex-end}.header .label{width:100%;height:var(--tct-list-label-height, 44px);line-height:var(--tct-list-label-line-height, 44px);font-size:var(--tct-list-label-font-size, var(--app-font-size, 14px));font-weight:var(--tct-list-label-font-weight, 600);color:var(--tct-list-label-font-color, var(--t-text, #4d4d4d))}.main{grid-column:2;grid-row:1}.main-no-action-nor-bullet{grid-column:1}.main-no-bullet{grid-column:1}";const n=o;const r=class{constructor(e){t(this,e);this.scheduledAfterRender=[];this.onMutationObserved=()=>{this.renderTrigger+=1;this.scheduledAfterRender.push((()=>{Array.from(this.hostElement.children).forEach((t=>{if(t.tagName==="Q2-ITEM")t.role="listitem"}))}))};this.label=undefined;this.renderTrigger=0;this.bordered=undefined}componentDidLoad(){if(typeof MutationObserver!=="undefined"){const t=new MutationObserver(this.onMutationObserved);t.observe(this.hostElement,{childList:true,subtree:true,attributes:true});this.mutationObserver=t;this.onMutationObserved()}}componentDidRender(){this.scheduledAfterRender.forEach((t=>t()));this.scheduledAfterRender=[]}disconnectedCallback(){if(this.mutationObserver){this.mutationObserver.disconnect();this.mutationObserver=null}}get hasLabelContent(){return!!this.label}get hasFilterSlot(){return!!this.hostElement.querySelector("q2-pill")\|\|s(this.hostElement,"pill")}get headerClasses(){const t=["header"];if(this.hasLabelContent&&this.hasFilterSlot){t.push("header-spacebetween")}else if(this.hasLabelContent&&!this.hasFilterSlot){t.push("header-start")}else if(!this.hasLabelContent&&this.hasFilterSlot){t.push("header-end")}return t.join(" ")}get listClasses(){const t=["list"];return t.join(" ")}render(){return e("div",{key:"37b0671ca94200f7e753f2b5e02a3dfd00efc6a3",class:this.listClasses,ref:t=>this.listElement=t},(this.hasFilterSlot\|\|this.hasLabelContent)&&e("div",{key:"a00b89d9153d707f5b7a3c0aaea857e5d489caff",class:this.headerClasses},e("div",{key:"6ab05c1b898d8340526e9c45b457eb1920d37431",class:"label"},this.label),this.hasFilterSlot&&e("slot",{key:"cb491e1700fc4312aa65016f897c35501ada01ff",name:"filter"})),e("div",{key:"b5af288fd5a3b233f981f67156bf1fbb59e1326d",role:"list"},e("slot",{key:"3c48768066b42cecfc998506537a9447b5b61ff5"})))}get hostElement(){return i(this)}};r.style=n;export{r as q2_list};
2	+ //# sourceMappingURL=p-1b37b8c6.entry.js.map

package/dist/q2-tecton-elements/p-1b37b8c6.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["q2ListCss","Q2ListStyle0","Q2List","this","scheduledAfterRender","onMutationObserved","renderTrigger","push","Array","from","hostElement","children","forEach","child","tagName","role","componentDidLoad","MutationObserver","observer","observe","childList","subtree","attributes","mutationObserver","componentDidRender","fn","disconnectedCallback","disconnect","hasLabelContent","label","hasFilterSlot","querySelector","hasSlotContent","headerClasses","classes","join","listClasses","render","h","key","class","ref","el","listElement","name"],"sources":["src/components/q2-list/q2-list.scss?tag=q2-list&encapsulation=shadow","src/components/q2-list/q2-list.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n:host([bordered]:not([bordered='false'])) {\n ::slotted(q2-item:not(:last-child)),\n .header {\n border-style: var-list(--tct-list-item-border-style, solid);\n border-width: var-list(--tct-list-item-border-width, unquote('0 0 1px 0'));\n border-color: var-list(--tct-list-item-border-color, --t-gray-12, #d9d9d9);\n }\n}\n\n.header {\n --comp-default-header-padding: 0 var(--app-scale-4x, 20px);\n display: flex;\n gap: var(--app-scale-3x, 12px);\n padding: var-list(--tct-list-header-padding, --comp-default-header-padding);\n min-height: var-list(var-prefixer(list-header-min-height), 44px);\n &-spacebetween {\n justify-content: space-between;\n }\n &-start {\n justify-content: flex-start;\n }\n &-end {\n justify-content: flex-end;\n }\n .label {\n width: 100%;\n height: var(--tct-list-label-height, 44px);\n line-height: var(--tct-list-label-line-height, 44px);\n font-size: var-list(--tct-list-label-font-size, --app-font-size, 14px);\n font-weight: var(--tct-list-label-font-weight, 600);\n color: var-list(--tct-list-label-font-color, --t-text, #4d4d4d);\n }\n}\n\n.main {\n grid-column: 2;\n grid-row: 1;\n\n &-no-action-nor-bullet {\n grid-column: 1;\n }\n\n &-no-bullet {\n grid-column: 1;\n }\n}\n","import { Component, Element, h, State, Prop } from '@stencil/core';\nimport { hasSlotContent } from 'src/utils';\n\n@Component({\n tag: 'q2-list',\n styleUrl: 'q2-list.scss',\n shadow: true,\n})\nexport class Q2List {\n // #region Own Properties\n\n @Element() hostElement: HTMLElement;\n mutationObserver: MutationObserver;\n listElement: HTMLDivElement;\n scheduledAfterRender: (() => void)[] = [];\n\n /** label text on header area */\n @Prop({ reflect: true }) label: string;\n\n // #endregion\n // #region State() Variables\n\n @State() renderTrigger: number = 0;\n\n // #endregion\n // #region Public Property API\n\n /** Adds a border between each items */\n @Prop({ mutable: true, reflect: true }) bordered: boolean;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentDidLoad() {\n if (typeof MutationObserver !== 'undefined') {\n const observer = new MutationObserver(this.onMutationObserved);\n observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true });\n this.mutationObserver = observer;\n this.onMutationObserved();\n }\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n this.mutationObserver = null;\n }\n }\n\n // #endregion\n // #region Local methods\n\n onMutationObserved = () => {\n this.renderTrigger += 1;\n this.scheduledAfterRender.push(() => {\n Array.from(this.hostElement.children).forEach(child => {\n if (child.tagName === 'Q2-ITEM') child.role = 'listitem';\n });\n });\n };\n\n get hasLabelContent() {\n return !!this.label;\n }\n\n get hasFilterSlot() {\n return !!this.hostElement.querySelector('q2-pill') || hasSlotContent(this.hostElement, 'pill');\n }\n\n get headerClasses() {\n const classes = ['header'];\n if (this.hasLabelContent && this.hasFilterSlot) {\n classes.push('header-spacebetween');\n } else if (this.hasLabelContent && !this.hasFilterSlot) {\n classes.push('header-start');\n } else if (!this.hasLabelContent && this.hasFilterSlot) {\n classes.push('header-end');\n }\n return classes.join(' ');\n }\n\n get listClasses() {\n const classes = ['list'];\n return classes.join(' ');\n }\n\n // #endregion\n // #region Render methods\n\n render() {\n return (\n <div\n class={this.listClasses}\n ref={el => (this.listElement = el)}\n >\n {(this.hasFilterSlot || this.hasLabelContent) && (\n <div class={this.headerClasses}>\n <div class=\"label\">{this.label}</div>\n {this.hasFilterSlot && <slot name=\"filter\" />}\n </div>\n )}\n <div role=\"list\">\n <slot />\n </div>\n </div>\n );\n }\n // #endregion\n}\n"],"mappings":"sFAAA,MAAMA,EAAY,04EAClB,MAAAC,EAAeD,E,MCOFE,EAAM,M,yBAMfC,KAAAC,qBAAuC,GA2CvCD,KAAAE,mBAAqB,KACjBF,KAAKG,eAAiB,EACtBH,KAAKC,qBAAqBG,MAAK,KAC3BC,MAAMC,KAAKN,KAAKO,YAAYC,UAAUC,SAAQC,IAC1C,GAAIA,EAAMC,UAAY,UAAWD,EAAME,KAAO,UAAU,GAC1D,GACJ,E,wCAzC2B,E,wBAWjC,gBAAAC,GACI,UAAWC,mBAAqB,YAAa,CACzC,MAAMC,EAAW,IAAID,iBAAiBd,KAAKE,oBAC3Ca,EAASC,QAAQhB,KAAKO,YAAa,CAAEU,UAAW,KAAMC,QAAS,KAAMC,WAAY,OACjFnB,KAAKoB,iBAAmBL,EACxBf,KAAKE,oB,EAIb,kBAAAmB,GACIrB,KAAKC,qBAAqBQ,SAAQa,GAAMA,MACxCtB,KAAKC,qBAAuB,E,CAGhC,oBAAAsB,GACI,GAAIvB,KAAKoB,iBAAkB,CACvBpB,KAAKoB,iBAAiBI,aACtBxB,KAAKoB,iBAAmB,I,EAgBhC,mBAAIK,GACA,QAASzB,KAAK0B,K,CAGlB,iBAAIC,GACA,QAAS3B,KAAKO,YAAYqB,cAAc,YAAcC,EAAe7B,KAAKO,YAAa,O,CAG3F,iBAAIuB,GACA,MAAMC,EAAU,CAAC,UACjB,GAAI/B,KAAKyB,iBAAmBzB,KAAK2B,cAAe,CAC5CI,EAAQ3B,KAAK,sB,MACV,GAAIJ,KAAKyB,kBAAoBzB,KAAK2B,cAAe,CACpDI,EAAQ3B,KAAK,e,MACV,IAAKJ,KAAKyB,iBAAmBzB,KAAK2B,cAAe,CACpDI,EAAQ3B,KAAK,a,CAEjB,OAAO2B,EAAQC,KAAK,I,CAGxB,eAAIC,GACA,MAAMF,EAAU,CAAC,QACjB,OAAOA,EAAQC,KAAK,I,CAMxB,MAAAE,GACI,OACIC,EAAA,OAAAC,IAAA,2CACIC,MAAOrC,KAAKiC,YACZK,IAAKC,GAAOvC,KAAKwC,YAAcD,IAE7BvC,KAAK2B,eAAiB3B,KAAKyB,kBACzBU,EAAA,OAAAC,IAAA,2CAAKC,MAAOrC,KAAK8B,eACbK,EAAA,OAAAC,IAAA,2CAAKC,MAAM,SAASrC,KAAK0B,OACxB1B,KAAK2B,eAAiBQ,EAAA,QAAAC,IAAA,2CAAMK,KAAK,YAG1CN,EAAA,OAAAC,IAAA,2CAAKxB,KAAK,QACNuB,EAAA,QAAAC,IAAA,8C"}

package/dist/q2-tecton-elements/p-1c4aa7e3.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,h as e,F as i,g as n}from"./p-a5f18e27.js";import{w as s,a as o,h as d,i as r,o as h,l as a}from"./p-42302f6f.js";const l="{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:inline-flex}:host([block]){display:block}click-elsewhere{position:relative;display:block}q2-popover{--tct-popover-min-width:var(--tct-dropdown-width, var(--t-dropdown-width))}";const c=l;const u=class{constructor(e){t(this,e);this.dropdownItemSelector="q2-dropdown-item:not([disabled]):not([separator])";this.focusToggle=()=>{this.controlElement.shadowRoot.querySelector("button").focus()};this.openDropdown=()=>{if(this.open)return;this.open=true};this.closeDropdown=()=>{if(!this.open)return;this.open=false};this.onClickElsewhere=t=>{const e=t.target;if(e.localName==="click-elsewhere"){t.stopPropagation();const{popoverElement:e}=this;if(!e)return;e.open=false}};this.onToggleClick=()=>{if(this.open){this.closeDropdown()}else{this.openDropdown()}};this.onToggleKeydown=t=>{if(["ArrowUp","Up"].includes(t.key)){t.preventDefault();this.openDropdown();this.focusLastItem();return}if(["ArrowDown","Down"].includes(t.key)){t.preventDefault();this.openDropdown();this.focusFirstItem();return}if(["Escape","Esc"].includes(t.key)){t.preventDefault();this.focusToggle();this.closeDropdown();return}};this.onDropdownMenuClick=async t=>{if(t.target.localName!=="q2-dropdown-item"){return}const e=t.target;if(!e.disabled&&!e.separator){this.closeDropdown();await s();this.focusToggle()}};this.onDropdownMenuKeydown=t=>{if(["Escape","Esc"].includes(t.key)){this.closeDropdown();this.focusToggle();return}if(t.target.localName!=="q2-dropdown-item"){return}const e=t.target;if(["ArrowUp","Up"].includes(t.key)){t.preventDefault();this.focusAdjacentItem(e,"prev");return}if(["ArrowDown","Down"].includes(t.key)){t.preventDefault();this.focusAdjacentItem(e,"next");return}if(t.key==="Tab"){t.preventDefault()}};this.additionalContext=undefined;this.block=undefined;this.context=undefined;this.contextValue=undefined;this.disabled=undefined;this.hideLabel=undefined;this.icon=undefined;this.label=undefined;this.name=undefined;this.open=undefined;this.popoverDirection=undefined;this.popoverAlignment="left";this.popoverMode=null;this.popoverMinHeight=150;this.resolvedType=undefined;this.type="icon";this.alignment=undefined;this.popDirection=undefined;this.ariaLabel=undefined}resolveMenu(){return this.name&&window.TectonElements&&window.TectonElements.resolveMenu(this.name,this.contextValue,this.resolvedType,this.additionalContext)}orchestrateResolvedMenuItems(){if(!this.name\|\|!this.context){this.removeResolvedElements();return}this.resolveMenuItemElements().then((t=>{this.removeResolvedElements();t.forEach((t=>{this.hostElement.appendChild(t)}))})).catch((t=>{this.removeResolvedElements();throw t}))}removeResolvedElements(){const t=this.hostElement.querySelectorAll("q2-dropdown-item.resolved-menu-item");t.forEach((t=>this.hostElement.removeChild(t)))}resolveMenuItemElements(){return this.resolveMenu().then((t=>t.map((t=>{let e;let i;if(t["tct-ctxid"]){i={};i[t.contextIdParamName]=t["tct-ctxid"]}switch(t.action){case"navigateTo":e=()=>this.navigateTo(t.featureName,t.moduleName,i);break;case"showOverpanel":e=()=>this.showOverpanel(`${t.featureName}.${t.moduleName}`,i);break}const n=document.createElement("q2-dropdown-item");n.setAttribute("value",t.itemLabel);n.classList.add("resolved-menu-item");n.innerHTML=t.itemLabel;n.onclick=e;return n}))))}navigateTo(t,e,i){var n,s;return(s=(n=window.TectonElements)===null\|\|n===void 0?void 0:n.navigateTo)===null\|\|s===void 0?void 0:s.call(n,t,e,i)}showOverpanel(t,e){var i,n;return(n=(i=window.TectonElements)===null\|\|i===void 0?void 0:i.showOverpanel)===null\|\|n===void 0?void 0:n.call(i,t,e,undefined,true)}get hasCustomButton(){return!!this.hostElement.querySelector("[slot=custom-dropdown-button]")}get determineDropdownItemCount(){return this.hostElement.querySelectorAll(this.dropdownItemSelector).length}get toggleButtonProps(){const t=["primary","secondary","neutral"];const e=["icon","fab","custom",...t];const i=e.includes(this.type)?this.type:"";const n=i==="icon";const s=i==="fab";const o=i==="custom";let d;if(t.includes(i)){d=i==="neutral"?i:`workflow-${i}`}const r=this.open;const h=!!this.disabled;const a=this.open;const l=!n&&!s&&!d?"unstyled":"";return{icon:n,fab:s,intent:d,active:r,disabled:h,ariaExpanded:a,className:l,custom:o}}popDirectionHandler(){o(this,"popDirection","popoverDirection")}alignmentHandler(){o(this,"alignment","popoverAlignment")}ariaLabelHandler(){d(this)}nameHandler(){this.orchestrateResolvedMenuItems()}contextHandler(){this.orchestrateResolvedMenuItems()}contextValueHandler(){this.orchestrateResolvedMenuItems()}resolvedTypeHandler(){this.orchestrateResolvedMenuItems()}additionalContextHandler(){this.orchestrateResolvedMenuItems()}delegateFocus(t){if(!r(t,this.hostElement))return;this.focusToggle()}popoverStateHandler({detail:{open:t}}){var e;if(this.open!==t)this.open=t;(e=this.popoverElement)===null\|\|e===void 0?void 0:e.scrollContainerTo({top:0})}componentWillLoad(){this.popDirectionHandler();this.alignmentHandler();this.ariaLabelHandler()}componentDidLoad(){this.orchestrateResolvedMenuItems();h(this.hostElement)}focusFirstItem(){const t=this.hostElement.querySelector(`${this.dropdownItemSelector}:first-child`);t===null\|\|t===void 0?void 0:t.dispatchEvent(new FocusEvent("focus"))}focusLastItem(){const t=this.hostElement.querySelector(`${this.dropdownItemSelector}:last-child`);t===null\|\|t===void 0?void 0:t.dispatchEvent(new FocusEvent("focus"))}focusAdjacentItem(t,e){const i=Array.from(this.hostElement.querySelectorAll(this.dropdownItemSelector));const n=i.indexOf(t);if(n===-1){return}let s=0;if(e==="next"){s=n<i.length-1?n+1:0}else if(e==="prev"){if(n>0){s=n-1}else{s=i.length-1}}const o=i[s];o&&o.dispatchEvent(new Event("focus"))}render(){const t=this.toggleButtonProps;return e("click-elsewhere",{key:"f6f0b6c404fbb9040e08e6ec1a17a9ae7a6e10fd",class:this.open?"dropdown-open":"",onChange:this.onClickElsewhere,"test-id":"dropdownContainer"},e("q2-btn",{key:"f8c88762e98fe78cf144eddde787810dc49cb023",ref:t=>this.controlElement=t,class:t.className,onClick:this.onToggleClick,onKeyDown:this.onToggleKeydown,fab:t.fab,intent:t.intent,active:t.active,disabled:t.disabled,ariaExpanded:`${!!t.ariaExpanded}`,label:this.hideLabel&&this.label?a(this.label):undefined,hideLabel:this.hideLabel,ariaHasPopup:"menu",_role:"menu","test-id":"dropdownButton",block:this.block,description:a("tecton.element.dropdown.itemCount",[this.determineDropdownItemCount])},this.hasCustomButton?e("div",{"test-id":"dropdownCustom",class:t.custom?"":"hidden"},e("slot",{name:"custom-dropdown-button"})):e(i,null,this.icon?e("q2-icon",{type:this.icon}):" ",this.label&&!this.hideLabel&&e("span",{class:"dropdown-button-text"},a(this.label)))),e("q2-popover",{key:"b17bbd6349ff1ef2aec3f0845923da4a61d610c1",ref:t=>this.popoverElement=t,controlElement:this.controlElement,open:this.open,minHeight:this.popoverMinHeight,direction:this.popoverDirection,align:this.popoverAlignment,mode:this.popoverMode\|\|undefined,block:this.block},e("div",{key:"77f1a6ad2523f063ead322b227f74faed3decf87",onClick:this.onDropdownMenuClick,onKeyDown:this.onDropdownMenuKeydown},e("slot",{key:"78e513900d75e8a1f012f1d22aabc7dada672acf"}),this.open&&e("q2-btn",{key:"1f5f2c6a7d7ce88a3340dfe80d5766d3bb21faf9",class:"sr close-dropdown",onFocus:this.closeDropdown}))))}get hostElement(){return n(this)}static get watchers(){return{popDirection:["popDirectionHandler"],alignment:["alignmentHandler"],ariaLabel:["ariaLabelHandler"],name:["nameHandler"],context:["contextHandler"],contextValue:["contextValueHandler"],resolvedType:["resolvedTypeHandler"],additionalContext:["additionalContextHandler"]}}};u.style=c;export{u as q2_dropdown};
2	+ //# sourceMappingURL=p-1c4aa7e3.entry.js.map

package/dist/q2-tecton-elements/p-1c4aa7e3.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["q2DropdownCss","Q2DropdownStyle0","Q2Dropdown","this","dropdownItemSelector","focusToggle","controlElement","shadowRoot","querySelector","focus","openDropdown","open","closeDropdown","onClickElsewhere","event","target","localName","stopPropagation","popoverElement","onToggleClick","onToggleKeydown","includes","key","preventDefault","focusLastItem","focusFirstItem","onDropdownMenuClick","async","item","disabled","separator","waitForNextPaint","onDropdownMenuKeydown","focusAdjacentItem","resolveMenu","name","window","TectonElements","contextValue","resolvedType","additionalContext","orchestrateResolvedMenuItems","context","removeResolvedElements","resolveMenuItemElements","then","data","forEach","element","hostElement","appendChild","catch","err","resolvedElements","querySelectorAll","removeChild","datas","map","menuItemData","onClickFn","queryParams","contextIdParamName","action","navigateTo","featureName","moduleName","showOverpanel","newDropdownItem","document","createElement","setAttribute","itemLabel","classList","add","innerHTML","onclick","_b","_a","call","overpanelPath","params","undefined","hasCustomButton","determineDropdownItemCount","length","toggleButtonProps","allowedIntents","allowedTypes","type","icon","fab","custom","intent","active","ariaExpanded","className","popDirectionHandler","handleRenamedProp","alignmentHandler","ariaLabelHandler","handleAriaLabel","nameHandler","contextHandler","contextValueHandler","resolvedTypeHandler","additionalContextHandler","delegateFocus","isEventFromElement","popoverStateHandler","detail","scrollContainerTo","top","componentWillLoad","componentDidLoad","overrideFocus","firstItem","dispatchEvent","FocusEvent","lastItem","activeItem","direction","dropdownItems","Array","from","activeIndex","indexOf","targetIndex","targetItem","Event","render","btnProps","h","class","onChange","ref","el","onClick","onKeyDown","label","hideLabel","loc","ariaHasPopup","_role","block","description","Fragment","minHeight","popoverMinHeight","popoverDirection","align","popoverAlignment","mode","popoverMode","onFocus"],"sources":["src/components/q2-dropdown/q2-dropdown.scss?tag=q2-dropdown&encapsulation=shadow","src/components/q2-dropdown/q2-dropdown.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-flex;\n}\n\n:host([block]) {\n display: block;\n}\n\nclick-elsewhere {\n position: relative;\n display: block;\n}\n\nq2-popover {\n --tct-popover-min-width: #{var-list(var-prefixer(dropdown-width))};\n}\n","import { Component, ComponentInterface, Prop, Element, Watch, h, Fragment, Listen } from '@stencil/core';\nimport { IDict } from 'src/util';\nimport {\n handleAriaLabel,\n handleRenamedProp,\n isEventFromElement,\n loc,\n overrideFocus,\n waitForNextPaint,\n} from 'src/utils';\n\n@Component({ tag: 'q2-dropdown', shadow: true, styleUrl: 'q2-dropdown.scss' })\nexport class Q2Dropdown implements ComponentInterface {\n @Prop({ reflect: true }) additionalContext: string;\n\n /** If `true`, component expands to fill the width of its parent element. */\n @Prop({ reflect: true }) block: boolean;\n\n /**\n * Tells the outlet what the type of object being passed in as contextValue.\n * This will allow for the hierarchy resolution logic to work to determine if an option should or should not be shown.\n *\n * @info\n * Only applicable when using `<q2-dropdown>` for outlets.\n */\n @Prop({ reflect: true }) context: string;\n\n /**\n * Passes important information to the outlet (e.g., pass an account id that your platform can use to look up what module to show for that account type).\n *\n * @info\n * Only applicable when using `<q2-dropdown>` for outlets.\n */\n @Prop({ reflect: true }) contextValue: string;\n\n /** Indicates the menu cannot be focused or interacted with. */\n @Prop({ reflect: true }) disabled: boolean;\n\n /**\n * Hide's the field's `<label>` element from view.\n * @warning\n * Only use when a visible label is impractical.\n */\n @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n\n /** The icon that will render within the toggle button. You may use any of the `q2-icon` types. */\n @Prop({ reflect: true }) icon: string;\n\n /**\n * The text that appears within the button.\n * @warning\n * This property should not be used if the `type` is `icon`.\n * @localizable\n */\n @Prop({ reflect: true, mutable: true }) label: string;\n\n /**\n * Identifies this menu as an outlet. Used in conjunction with context and, optionally, `contextValue`.\n * @info\n * Only applicable when using `<q2-dropdown>` for outlets.\n */\n @Prop({ reflect: true }) name: string;\n\n /** Determine whether the popover is open or closed. */\n @Prop({ reflect: true, mutable: true }) open: boolean;\n\n /**\n * Force the direction of the popover dropdown when it opens.\n * If no value is passed, the component will auto-detect the direction based on available space.\n */\n @Prop({ mutable: true }) popoverDirection: 'up' | 'down';\n\n /** Aligns the popover dropdown to the left or right side of the input field. */\n @Prop({ mutable: true }) popoverAlignment: 'left' | 'right' = 'left'; // being used in dropdown.scss\n\n /**\n * Determines the display mode of the popover.\n *\n * Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning.\n *\n * @info\n * This is a temporary solution to work around styling issues related to using fixed positioning for the popover\n * when nested inside of elements with transform properties. This will be removed once the popover API is available\n * for use.\n */\n @Prop({ mutable: true }) popoverMode: 'legacy' = null;\n\n /** @deprecated */\n @Prop() popoverMinHeight: number = 150;\n\n /**\n * Use with `context` to tell the outlet where it appears. It will be matched with the appropriately configured module for that context.\n * @info\n * Only applicable when using `<q2-dropdown>` for outlets.\n */\n @Prop({ reflect: true }) resolvedType: string;\n\n /** The type of button used as the menu toggle. */\n @Prop({ reflect: true }) type: 'icon' | 'fab' | 'custom' | 'primary' | 'secondary' | 'neutral' = 'icon';\n\n /** @deprecated */\n @Prop({ reflect: true }) alignment: 'left' | 'right';\n\n /** @deprecated */\n @Prop({ reflect: true }) popDirection: 'up' | 'down';\n\n /** @deprecated */\n @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n @Element() hostElement: HTMLElement;\n privatePopDirection: 'down' | 'up';\n controlElement?: HTMLQ2BtnElement;\n popoverElement?: HTMLQ2PopoverElement;\n dropdownItemSelector: string = 'q2-dropdown-item:not([disabled]):not([separator])';\n\n resolveMenu() {\n return (\n this.name &&\n window.TectonElements &&\n window.TectonElements.resolveMenu(this.name, this.contextValue, this.resolvedType, this.additionalContext)\n );\n }\n\n orchestrateResolvedMenuItems() {\n if (!this.name || !this.context) {\n // this is only for contextual menu outlets\n this.removeResolvedElements();\n return;\n }\n\n this.resolveMenuItemElements()\n .then(data => {\n this.removeResolvedElements();\n data.forEach(element => {\n this.hostElement.appendChild(element);\n });\n })\n .catch(err => {\n this.removeResolvedElements();\n throw err;\n });\n }\n\n removeResolvedElements() {\n const resolvedElements = this.hostElement.querySelectorAll('q2-dropdown-item.resolved-menu-item');\n resolvedElements.forEach(element => this.hostElement.removeChild(element));\n }\n\n resolveMenuItemElements() {\n return this.resolveMenu().then(datas => {\n return datas.map(menuItemData => {\n let onClickFn;\n let queryParams;\n if (menuItemData['tct-ctxid']) {\n queryParams = {};\n queryParams[menuItemData.contextIdParamName] = menuItemData['tct-ctxid'];\n }\n\n switch (menuItemData.action) {\n case 'navigateTo':\n onClickFn = () =>\n this.navigateTo(menuItemData.featureName, menuItemData.moduleName, queryParams);\n break;\n case 'showOverpanel':\n onClickFn = () =>\n this.showOverpanel(`${menuItemData.featureName}.${menuItemData.moduleName}`, queryParams);\n break;\n }\n\n const newDropdownItem = document.createElement('q2-dropdown-item');\n newDropdownItem.setAttribute('value', menuItemData.itemLabel);\n newDropdownItem.classList.add('resolved-menu-item');\n newDropdownItem.innerHTML = menuItemData.itemLabel;\n newDropdownItem.onclick = onClickFn;\n\n return newDropdownItem;\n });\n });\n }\n\n navigateTo(featureName: string, moduleName?: string, queryParams?: IDict<string>) {\n return window.TectonElements?.navigateTo?.(featureName, moduleName, queryParams);\n }\n\n showOverpanel(overpanelPath: string, params: IDict<string>) {\n return window.TectonElements?.showOverpanel?.(overpanelPath, params, undefined, true);\n }\n\n get hasCustomButton() {\n return !!this.hostElement.querySelector('[slot=custom-dropdown-button]');\n }\n\n get determineDropdownItemCount() {\n return this.hostElement.querySelectorAll(this.dropdownItemSelector).length;\n }\n\n get toggleButtonProps() {\n const allowedIntents = ['primary', 'secondary', 'neutral'];\n const allowedTypes = ['icon', 'fab', 'custom', ...allowedIntents];\n const type = allowedTypes.includes(this.type) ? this.type : '';\n const icon = type === 'icon';\n const fab = type === 'fab';\n const custom = type === 'custom';\n let intent;\n if (allowedIntents.includes(type)) {\n intent = type === 'neutral' ? type : `workflow-${type}`;\n }\n const active = this.open;\n const disabled = !!this.disabled;\n const ariaExpanded = this.open;\n const className = !icon && !fab && !intent ? 'unstyled' : '';\n\n return {\n icon,\n fab,\n intent,\n active,\n disabled,\n ariaExpanded,\n className,\n custom,\n };\n }\n\n //////// Observers //////////\n @Watch('popDirection')\n popDirectionHandler() {\n handleRenamedProp(this, 'popDirection', 'popoverDirection');\n }\n\n @Watch('alignment')\n alignmentHandler() {\n handleRenamedProp(this, 'alignment', 'popoverAlignment');\n }\n\n @Watch('ariaLabel')\n ariaLabelHandler() {\n handleAriaLabel(this);\n }\n\n @Watch('name')\n nameHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Watch('context')\n contextHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Watch('contextValue')\n contextValueHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Watch('resolvedType')\n resolvedTypeHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Watch('additionalContext')\n additionalContextHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.focusToggle();\n }\n\n @Listen('popoverStateChanged')\n popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n if (this.open !== open) this.open = open;\n this.popoverElement?.scrollContainerTo({ top: 0 });\n }\n\n ///// Lifecycle Hooks ////////\n componentWillLoad() {\n this.popDirectionHandler();\n this.alignmentHandler();\n this.ariaLabelHandler();\n }\n\n componentDidLoad() {\n this.orchestrateResolvedMenuItems();\n overrideFocus(this.hostElement);\n }\n\n ///// Actions ////////\n focusToggle = () => {\n this.controlElement.shadowRoot.querySelector<HTMLButtonElement>('button').focus();\n };\n\n openDropdown = () => {\n if (this.open) return;\n this.open = true;\n };\n\n closeDropdown = () => {\n if (!this.open) return;\n this.open = false;\n };\n\n onClickElsewhere = (event: CustomEvent) => {\n const target = event.target as HTMLClickElsewhereElement;\n if (target.localName === 'click-elsewhere') {\n event.stopPropagation();\n const { popoverElement } = this;\n if (!popoverElement) return;\n popoverElement.open = false;\n }\n };\n\n onToggleClick = () => {\n if (this.open) {\n this.closeDropdown();\n } else {\n this.openDropdown();\n }\n };\n\n onToggleKeydown = (event: KeyboardEvent) => {\n if (['ArrowUp', 'Up'].includes(event.key)) {\n event.preventDefault();\n this.openDropdown();\n this.focusLastItem();\n return;\n }\n\n if (['ArrowDown', 'Down'].includes(event.key)) {\n event.preventDefault();\n this.openDropdown();\n this.focusFirstItem();\n return;\n }\n\n if (['Escape', 'Esc'].includes(event.key)) {\n event.preventDefault();\n this.focusToggle();\n this.closeDropdown();\n return;\n }\n };\n\n onDropdownMenuClick = async (event: MouseEvent | CustomEvent) => {\n if ((event.target as HTMLElement).localName !== 'q2-dropdown-item') {\n return;\n }\n const item = event.target as HTMLQ2DropdownItemElement;\n if (!item.disabled && !item.separator) {\n this.closeDropdown();\n await waitForNextPaint();\n this.focusToggle();\n }\n };\n\n focusFirstItem() {\n const firstItem = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n `${this.dropdownItemSelector}:first-child`\n );\n\n firstItem?.dispatchEvent(new FocusEvent('focus'));\n }\n\n focusLastItem() {\n const lastItem = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n `${this.dropdownItemSelector}:last-child`\n );\n lastItem?.dispatchEvent(new FocusEvent('focus'));\n }\n\n focusAdjacentItem(activeItem: HTMLQ2DropdownItemElement, direction: 'next' | 'prev') {\n const dropdownItems: HTMLQ2DropdownItemElement[] = Array.from(\n this.hostElement.querySelectorAll(this.dropdownItemSelector)\n );\n\n const activeIndex = dropdownItems.indexOf(activeItem);\n\n if (activeIndex === -1) {\n return;\n }\n\n let targetIndex: number = 0;\n if (direction === 'next') {\n targetIndex = activeIndex < dropdownItems.length - 1 ? activeIndex + 1 : 0;\n } else if (direction === 'prev') {\n if (activeIndex > 0) {\n targetIndex = activeIndex - 1;\n } else {\n targetIndex = dropdownItems.length - 1;\n }\n }\n const targetItem = dropdownItems[targetIndex];\n targetItem && targetItem.dispatchEvent(new Event('focus'));\n }\n\n onDropdownMenuKeydown = (event: KeyboardEvent) => {\n if (['Escape', 'Esc'].includes(event.key)) {\n this.closeDropdown();\n this.focusToggle();\n return;\n }\n\n if ((event.target as HTMLElement).localName !== 'q2-dropdown-item') {\n return;\n }\n\n const item = event.target as HTMLQ2DropdownItemElement;\n if (['ArrowUp', 'Up'].includes(event.key)) {\n event.preventDefault();\n this.focusAdjacentItem(item, 'prev');\n return;\n }\n\n if (['ArrowDown', 'Down'].includes(event.key)) {\n event.preventDefault();\n this.focusAdjacentItem(item, 'next');\n return;\n }\n if (event.key === 'Tab') {\n event.preventDefault();\n }\n };\n\n /// DOM ///\n\n render() {\n const btnProps = this.toggleButtonProps;\n\n return (\n <click-elsewhere\n class={this.open ? 'dropdown-open' : ''}\n onChange={this.onClickElsewhere}\n test-id=\"dropdownContainer\"\n >\n <q2-btn\n ref={el => (this.controlElement = el)}\n class={btnProps.className}\n onClick={this.onToggleClick}\n onKeyDown={this.onToggleKeydown}\n fab={btnProps.fab}\n intent={btnProps.intent}\n active={btnProps.active}\n disabled={btnProps.disabled}\n ariaExpanded={`${!!btnProps.ariaExpanded}`}\n label={this.hideLabel && this.label ? loc(this.label) : undefined}\n hideLabel={this.hideLabel}\n ariaHasPopup=\"menu\"\n _role=\"menu\"\n test-id=\"dropdownButton\"\n block={this.block}\n description={loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount])}\n >\n {this.hasCustomButton ? (\n <div\n test-id=\"dropdownCustom\"\n class={btnProps.custom ? '' : 'hidden'}\n >\n <slot name=\"custom-dropdown-button\" />\n </div>\n ) : (\n <Fragment>\n {this.icon ? <q2-icon type={this.icon} /> : ' '}\n {this.label && !this.hideLabel && (\n <span class=\"dropdown-button-text\">{loc(this.label)}</span>\n )}\n </Fragment>\n )}\n </q2-btn>\n <q2-popover\n ref={el => (this.popoverElement = el)}\n controlElement={this.controlElement}\n open={this.open}\n minHeight={this.popoverMinHeight}\n direction={this.popoverDirection}\n align={this.popoverAlignment}\n mode={this.popoverMode || undefined}\n block={this.block}\n >\n <div\n onClick={this.onDropdownMenuClick}\n onKeyDown={this.onDropdownMenuKeydown}\n >\n <slot />\n {this.open && (\n <q2-btn\n class=\"sr close-dropdown\"\n onFocus={this.closeDropdown}\n />\n )}\n </div>\n </q2-popover>\n </click-elsewhere>\n );\n }\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/p-1e927478.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,c as e,h as r,F as i,g as o}from"./p-a5f18e27.js";import{o as s,i as a,l}from"./p-42302f6f.js";const n='{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 c=n;const p=class{constructor(r){t(this,r);this.change=e(this,"change",7);this.scheduledAfterRender=[];this.onSlotChange=()=>{this.checkForPanes();this.checkScrollState()};this.onScrollBtnClick=t=>{const e=Math.floor(this.listElement.clientWidth/2);this.listElement.scrollBy({left:t==="left"?-e:e,behavior:"smooth"})};this.onStepClick=(t,e)=>{t.stopPropagation();const{currentStep:r,stepCount:i,lastEnabledStep:o}=this;if(e>o\|\|e===r)return;this.change.emit({selectedStep:e,lastEnabledStep:o,currentStep:r,stepCount:i})};this.onStepKeyDown=(t,e)=>{const{lastEnabledStep:r,stepCount:i}=this;const{key:o}=t;let s;switch(o){case"ArrowLeft":t.preventDefault();s=Math.max(e-1,0);break;case"ArrowRight":t.preventDefault();s=Math.min(e+1,i);break;case"Home":t.preventDefault();s=1;break;case"End":t.preventDefault();s=r;break}if(!s)return;this.focusStep(s,true)};this.checkForPanes=()=>{const{allPanes:t}=this;if(!t.length)return;this.stepCount=t.length};this.checkScrollState=()=>{if(!this.listElement)return;const{scrollLeft:t,scrollWidth:e,clientWidth:r}=this.listElement;this.scrollEnabled=e>r;this.showScrollLeft=!!t;this.showScrollRight=e!==t+r};this.currentStep=1;this.stepCount=undefined;this.lastEnabledStep=undefined;this.contentChangeTriggerCount=0;this.scrollEnabled=false;this.showScrollLeft=false;this.showScrollRight=false}componentWillLoad(){if(!this.lastEnabledStep)this.lastEnabledStep=this.currentStep\|\|1;this.resizeObserver=new ResizeObserver((()=>this.checkScrollState()));this.checkForPanes()}componentDidLoad(){this.resizeObserver.observe(this.listElement);this.checkScrollState();s(this.hostElement);setTimeout((()=>this.showStep(this.currentStep\|\|1)),0)}componentDidRender(){this.scheduledAfterRender.forEach((t=>t()));this.scheduledAfterRender=[]}disconnectedCallback(){this.resizeObserver.disconnect()}currentStepChanged(t){this.showStep(t)}defaultChangeHandler(t){const{hostElement:e}=this;if(t.target===e&&!e.getAttribute("onchange")&&!!t.detail){this.currentStep=t.detail.selectedStep}}delegateFocus(t){if(!a(t,this.hostElement))return;this.focusStep(this.currentStep,true,true)}statusChangeHandler(t){const e=Array.from(this.allPanes).findIndex((e=>t.detail.id===e.id));if(e>-1){this.allPanes[e].status=t.detail.status;this.renderStepBtn(e)}}contentChangeHandler(){this.contentChangeTriggerCount+=1}get allPanes(){return this.hostElement.querySelectorAll("q2-stepper-pane")}showStep(t){if(t>this.lastEnabledStep){const{currentStep:e,stepCount:r}=this;this.lastEnabledStep=t;this.change.emit({selectedStep:null,lastEnabledStep:t,currentStep:e,stepCount:r})}this.scheduledAfterRender.push(this.resizeIframe);this.showStepPane(t);this.focusStep(t,this.scrollEnabled)}resizeIframe(){var t,e;return(e=(t=window===null\|\|window===void 0?void 0:window.TectonElements)===null\|\|t===void 0?void 0:t.resizeIframe)===null\|\|e===void 0?void 0:e.call(t)}showStepPane(t){this.allPanes.forEach(((e,r)=>{e.isActive=t===r+1}))}focusStep(t,e,r){var i;const o=this.listElement.children[t-1];const s=document.activeElement===this.hostElement;if(!o)return;if(s\|\|r){(i=o.firstElementChild)===null\|\|i===void 0?void 0:i.focus()}if(e){const t=o.offsetLeft-this.listElement.clientWidth/2;this.listElement.scrollTo({left:t,behavior:"smooth"})}}getPaneSlotOrProperty(t,e){var r;const i=t.querySelector(`[slot="${e}"]`);return(r=i===null\|\|i===void 0?void 0:i.outerHTML)!==null&&r!==void 0?r:l(t[e])}renderStepBtn(t){var e;const{allPanes:o,stepCount:s,currentStep:a,lastEnabledStep:n}=this;const c=(e=o===null\|\|o===void 0?void 0:o[t])!==null&&e!==void 0?e:null;const{id:p,status:b}=c;const d=this.getPaneSlotOrProperty(c,"label");const h=this.getPaneSlotOrProperty(c,"description");const v=t+1;const u=v===a;const f=!!d&&`label-${p}`;const g=!!d&&!!h&&`description-${p}`;const m=!d&&l("tecton.element.stepper.number",[`${v}`,`${s}`]);let w;if(b==="complete")w="success-filled";else if(b==="error")w="warning-filled";const x=["step-btn"];if(b)x.push(`status-${b}`);const k=b==="locked";const y=k\|\|v>n;return r("li",{role:"presentation"},r("button",{class:x.join(" "),type:"button","aria-labelledby":f,"aria-describedBy":g,"aria-label":m,"aria-selected":u,"aria-disabled":y?"true":null,role:"tab",tabIndex:u?0:-1,onKeyDown:t=>this.onStepKeyDown(t,v),onClick:t=>!k&&this.onStepClick(t,v)},r(i,null,w?r("div",{class:"step-icon"},r("q2-icon",{type:w})):r("div",{class:"step-bubble"},v),f&&r("div",{class:"step-label",id:f,innerHTML:d}),f&&g&&r("div",{class:"step-description",id:g,innerHTML:h}))),t?r("div",{class:"step-divider"}):"")}render(){const{stepCount:t,scrollEnabled:e,showScrollLeft:o,showScrollRight:s}=this;const a=["step-container"];if(e)a.push("has-scroll");return r(i,{key:"cedbc06ff7c6c583cda6d4b366d21e22ad03912c"},r("div",{key:"91759ac7189c510ebe5418e2621117a74ea17778",class:a.join(" ")},e&&r(i,{key:"9c3ad809053e772d978d9eba6a1f514ec15ef8a1"},r("div",{key:"1dc29c3875d3bab171fb907370cb34caf5e61e98",class:"gradient-left",hidden:!o}),r("div",{key:"0c76e2871e14888f85c5bd87fbf83e3ad9abb4b7",class:"gradient-right",hidden:!s}),r("q2-btn",{key:"3d743c9af15a584977b4d1ec5509759fd2ab8c4e",class:"btn-left",hideLabel:true,hidden:!this.showScrollLeft,label:l("tecton.element.stepper.scrollLeft"),onClick:()=>this.onScrollBtnClick("left")},r("q2-icon",{key:"64cedc532ad005a8b55c95ea0e840159d1bcb8e5",type:"chevron-left"})),r("q2-btn",{key:"5a19e4d2444ba51acd9b54b8b9f9cdc12e4e743f",class:"btn-right",hideLabel:true,hidden:!this.showScrollRight,label:l("tecton.element.stepper.scrollRight"),onClick:()=>this.onScrollBtnClick("right")},r("q2-icon",{key:"3a19166fad643afc709110b4f50aee5a67c1143e",type:"chevron-right"}))),r("ul",{key:"b444c1c7aecf1ed6618ba0e97764e9d312138fea",onScroll:this.checkScrollState,ref:t=>this.listElement=t,role:"tablist"},t>0&&[...Array(t).keys()].map((t=>this.renderStepBtn(t))))),r("div",{key:"6550689e4aadd2aa99148a056d9685ca81b55bd3",role:"list"},r("slot",{key:"5ef7a5f038fa1abeb9d3154faf0e07cf55efe77c",onSlotchange:()=>this.onSlotChange()})))}get hostElement(){return o(this)}static get watchers(){return{currentStep:["currentStepChanged"]}}};p.style=c;export{p as q2_stepper};
2	+ //# sourceMappingURL=p-1e927478.entry.js.map

package/dist/q2-tecton-elements/p-1e927478.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["q2StepperCss","Q2StepperStyle0","Q2Stepper","this","scheduledAfterRender","onSlotChange","checkForPanes","checkScrollState","onScrollBtnClick","direction","scrollAmount","Math","floor","listElement","clientWidth","scrollBy","left","behavior","onStepClick","event","selectedStep","stopPropagation","currentStep","stepCount","lastEnabledStep","change","emit","onStepKeyDown","stepNumber","key","preventDefault","max","min","focusStep","allPanes","length","scrollLeft","scrollWidth","scrollEnabled","showScrollLeft","showScrollRight","componentWillLoad","resizeObserver","ResizeObserver","componentDidLoad","observe","overrideFocus","hostElement","setTimeout","showStep","componentDidRender","forEach","fn","disconnectedCallback","disconnect","currentStepChanged","defaultChangeHandler","target","getAttribute","detail","delegateFocus","isEventFromElement","statusChangeHandler","index","Array","from","findIndex","el","id","status","renderStepBtn","contentChangeHandler","contentChangeTriggerCount","querySelectorAll","push","resizeIframe","showStepPane","_b","_a","window","TectonElements","call","pane","isActive","scrollIntoView","forceFocus","stepListItem","children","document","activeElement","firstElementChild","focus","offsetLeft","scrollTo","getPaneSlotOrProperty","slotName","slot","querySelector","outerHTML","loc","stepIndex","label","description","isCurrentStep","labelId","descriptionId","btnLabel","statusIcon","stepClasses","isLocked","disabled","h","role","class","join","type","tabIndex","onKeyDown","ev","onClick","Fragment","innerHTML","render","containerClasses","hidden","hideLabel","onScroll","ref","keys","map","onSlotchange"],"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-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 hideLabel={true}\n hidden={!this.showScrollLeft}\n label={loc('tecton.element.stepper.scrollLeft')}\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 hideLabel={true}\n hidden={!this.showScrollRight}\n label={loc('tecton.element.stepper.scrollRight')}\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 role=\"list\">\n <slot onSlotchange={() => this.onSlotChange()} />\n </div>\n </Fragment>\n );\n }\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/p-36398b59.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,c as e,h as i,g as s}from"./p-a5f18e27.js";import{l as o,h as l,o as n,w as r,g as a,i as c,j as d}from"./p-42302f6f.js";import{s as h,a as p}from"./p-780a1d0e.js";const u="{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}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white, #ffffff);color:var(--t-text, #4d4d4d);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3));height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1, 0.2s ease);border-radius:var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);--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}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host([block]) q2-btn,:host([block]){display:block}:host{--comp-select-margin:var(--tct-select-margin, var(--tct-select-margin-top, var(--t-select-margin-top, var(--app-scale-4, 30px))) 0 var(--tct-select-margin-bottom, var(--t-select-margin-bottom, var(--app-scale-4, 30px))));display:block;margin:var(--comp-select-margin)}.q2-select-container{position:relative;display:block}.q2-select-input{margin:0;--tct-input-min-height:var(--tct-select-input-min-height, var(--t-select-input-min-height));--tct-input-max-height:var(--tct-select-input-max-height, var(--t-select-input-max-height, none))}::slotted([slot=_selected-display]){width:100%;min-height:var(--comp-selected-display-height, 44px)}.custom-display-content{position:absolute;bottom:0;left:calc(var(--tct-scale-2, var(--app-scale-2x, 10px)) + 1px);height:44px;width:calc(100% - 34px - var(--tct-scale-3, var(--app-scale-3x, 15px)));overflow:hidden;cursor:pointer;transition:left var(--tct-tween-2, var(--app-tween-1, 0.2s ease))}.custom-display-content:not([hidden]){display:flex;align-items:center}.is-searchable.is-focused .custom-display-content,.is-searchable .custom-display-content:active{left:calc(var(--tct-scale-3, var(--app-scale-3x, 15px)) + 1px)}.has-error .custom-display-content{width:calc(100% - 68px - var(--tct-scale-3, var(--app-scale-3x, 15px)))}.popover-content{display:flex;flex-direction:column-reverse}.popover-bottom-container{position:sticky;bottom:0;z-index:5}.popover-top-container{position:sticky;top:0;z-index:5}.popover-top-container .multi-select-header{padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--app-white);display:flex;gap:var(--app-scale-2x, 10px);align-items:center}.popover-top-container .multi-select-header fieldset{margin:0;padding:0;border:0;display:flex;gap:var(--app-scale-2x, 10px)}.popover-top-container .multi-select-header legend{padding:0;float:left}.popover-top-container .multi-select-header label{cursor:pointer;padding:var(--tct-select-multi-select-option-padding, var(--t-select-multi-select-option-padding, var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px))));font-size:var(--tct-select-multi-select-option-font-size, var(--t-select-multi-select-option-font-size, var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, inherit))));border-radius:var(--tct-select-multi-select-option-radius, var(--t-select-multi-select-option-radius, var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--app-border-radius-1, 3px)))));background:var(--tct-select-multi-select-option-background, var(--tct-select-multi-select-option-bg, var(--t-select-multi-select-option-bg, var(--tct-badge-background, var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent))))));color:var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit))))}.popover-top-container .multi-select-header label:hover{background:var(--tct-select-multi-select-option-hover-background, var(--tct-select-multi-select-option-hover-background-color, var(--t-select-multi-select-option-hover-background-color, var(--tct-btn-badge-hover-bg, var(--t-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--app-gray-l3, #f2f2f2))))))));color:var(--tct-select-multi-select-option-hover-color, var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-hover-font-color, var(--t-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--app-gray-d2, #404040))))))))}.popover-top-container .multi-select-header input:checked+label,.popover-top-container .multi-select-header input:checked+label:enabled:hover{background:var(--tct-select-multi-select-option-active-background, var(--tct-select-multi-select-option-active-background-color, var(--t-select-multi-select-option-active-background-color, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)))));color:var(--tct-select-multi-select-option-active-color, var(--t-select-multi-select-option-active-color, var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--app-white, #ffffff)))))}.popover-top-container .multi-select-header input:disabled+label{opacity:var(--tct-select-multi-select-option-disabled-opacity, var(--t-select-multi-select-option-disabled-opacity, var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--app-disabled-opacity, 0.4)))));cursor:not-allowed}.popover-top-container .multi-select-header input:focus+label{box-shadow:var(--const-double-focus-ring)}";const v=u;const b=class{constructor(i){t(this,i);this.change=e(this,"change",7);this.input=e(this,"input",7);var s;this.scheduledAfterRender=[];this.showSelectedOptions=()=>{this.showSelected=true};this.showAllOptions=()=>{this.showSelected=false};this.onMutationObserved=()=>{const{hostElement:t,hasPopoverTop:e,hasPopoverBottom:i}=this;const s=t.querySelector(".custom-display-content");const o=t.shadowRoot.querySelector('slot[name="q2-select-display"]');const l=!!o?o.assignedNodes().length>0:s.children.length>0;if(this.hasCustomDisplay!==l){this.hasCustomDisplay=l}const n=t.shadowRoot.querySelector('slot[name="popover-top"]');const r=n.assignedNodes().length>0;if(e!==r){this.hasPopoverTop=r}const a=t.shadowRoot.querySelector('slot[name="popover-bottom"]');const c=a.assignedNodes().length>0;if(i!==c){this.hasPopoverBottom=c}this.checkSelectedOptions()};this.onOptionListChange=t=>{t.stopPropagation();const{values:e}=t.detail;if(e.length===0)this.showAllOptions();this.handleSelectionChanges(t.detail)};this.onPopoverState=({detail:{open:t,action:e}})=>{if(!t\|\|this.searchText){if(e!=="select"){this.optionList.setActiveElement(null)}this.inputField.focus()}if(this.open===t)return;this.open=t};this.inputKeydownHandler=t=>{if(this.readonly\|\|this.disabled)return;const e=t.key;const i=this.hasPopoverTop\|\|this.hasPopoverBottom;const s=e==="Tab"&&t.shiftKey;if(i&&(e==="Tab"\|\|e==="Enter"\|\|s))return;if(h(this,t)){return this.executeActionSheet(t)}const o=["ArrowDown","ArrowUp","PageDown","PageUp","Home","End","Escape","Tab"];if(this.searchable&&!o.includes(e))return;if(this.shouldClearSearchText(t))this.clearSearchText();if(e===" ")t.preventDefault();this.optionList.handleExternalKeydown(t)};this.visibilityToggleKeyDown=t=>{const e=t.key;const i=e==="Tab"&&t.shiftKey;const s=["ArrowLeft","ArrowRight","ArrowUp","ArrowDown"].includes(e);if(s)t.stopPropagation();if(i){t.stopPropagation();if(this.hasPopoverTop)return;this.optionList.setDefaultActiveElement()}};this.inputClickHandler=async t=>{t.stopPropagation();if(h(this)){return this.executeActionSheet(t)}this.toggleDropdown();this.focusInput()};this.inputInputHandler=t=>{t.stopPropagation();const e=t.detail.value;const i=!!this.value;if(i)this.clearValue();if(!this.open)this.openDropdownWithoutActiveElement();this.prioritizeSearch=true;this.searchText=e;this.input.emit({query:e})};this.inputFocusHandler=()=>{this.inputFocused=true};this.inputBlurHandler=()=>{this.inputFocused=false};this.inputChangeHandler=t=>{t.stopPropagation()};this.clickedElsewhere=t=>{const e=t.target;if(e.localName!=="click-elsewhere")return;t.stopPropagation()};this.onCustomDisplayClick=t=>{t.stopPropagation();this.focusInput();this.toggleDropdown()};this.disabled=false;this.errors=undefined;this.hideLabel=undefined;this.clearable=undefined;this.hoist=!!((s=window.Tecton)===null\|\|s===void 0?void 0:s.useActionSheets);this.invalid=undefined;this.label=undefined;this.listLabel=o("tecton.element.select.listLabel");this.minRows=3;this.multilineOptions=false;this.multiple=false;this.optional=false;this.placeholder=undefined;this.popDirection=undefined;this.popoverMode=null;this.readonly=false;this.searchable=false;this.selectedOptions=[];this.value=undefined;this.ariaLabel=undefined;this.open=false;this.showSelected=false;this.searchText="";this.hasCustomDisplay=false;this.hasPopoverTop=false;this.hasPopoverBottom=false;this.inputFocused=false;this.statusMessage=undefined;this.prioritizeSearch=false;this.structuredSelectedOptions=[]}componentWillLoad(){l(this);this.buildStructuredSelectedOptions();this.handleMultilineOptionsUpdate(this.multilineOptions,false)}componentDidLoad(){const t=new MutationObserver(this.onMutationObserved);t.observe(this.hostElement,{childList:true,subtree:true});this.mutationObserver=t;this.onMutationObserved();n(this.hostElement);setTimeout((()=>this.checkSelectedDisplay()),0)}componentDidRender(){setTimeout((()=>{this.scheduledAfterRender.forEach((t=>t()));this.scheduledAfterRender=[]}),25)}disconnectedCallback(){var t;(t=this.mutationObserver)===null\|\|t===void 0?void 0:t.disconnect();this.mutationObserver=null}get innerInputField(){var t,e;return(e=(t=this.inputField)===null\|\|t===void 0?void 0:t.shadowRoot)===null\|\|e===void 0?void 0:e.querySelector(".input-field")}get innerInputContainer(){var t,e;return(e=(t=this.inputField)===null\|\|t===void 0?void 0:t.shadowRoot)===null\|\|e===void 0?void 0:e.querySelector(".input-container")}get badgeValue(){var t,e;if(!this.multiple)return null;const i=(e=(t=this.selectedOptions)===null\|\|t===void 0?void 0:t.length)!==null&&e!==void 0?e:0;if(this.open&&this.searchable)return i?`${i}`:null;else return i>1?`+${i-1}`:null}get popoverMinHeight(){const{minRows:t}=this;const e=this.hostElement.querySelector("q2-option:not([hidden])");let i=e&&window.getComputedStyle(e).minHeight;if(!i\|\|i==="0px")i="44px";return tparseInt(i)}get selectedDisplay(){if(this.prioritizeSearch\|\|this.searchText)return this.searchText;if(this.hasCustomDisplay)return"";return this.multiple?this.calculateMultiSelectSelectedDisplay():this.calculateSingleSelectSelectedDisplay()}get selectedDisplaySlot(){return this.hostElement.querySelector('[slot="_selected-display"]')}get firstSelectedValue(){var t;return this.multiple?(t=this.selectedOptions)===null\|\|t===void 0?void 0:t[0]:this.value}get firstSelectedOptionElement(){const{firstSelectedValue:t}=this;return t?this.optionElements.find((({value:e})=>e===t)):null}get optionElements(){return Array.from(this.hostElement.querySelectorAll("q2-option"))}get wrapperClasses(){const{errors:t}=this;const e=["q2-select-container"];if(Array.isArray(t)&&t.length>0)e.push("has-error");if(this.inputFocused)e.push("is-focused");if(this.searchable)e.push("is-searchable");return e.join(" ")}buildStructuredSelectedOptions(){const{multiple:t,selectedOptions:e,value:i}=this;if(t){this.structuredSelectedOptions=!!(e===null\|\|e===void 0?void 0:e.length)?e.map((t=>typeof t==="string"?{value:t}:t)):[]}else{this.structuredSelectedOptions=i?[{value:i}]:[]}}ariaLabelObserver(){l(this)}valueUpdated(){if(this.multiple)return;this.clearSearchText()}handleMultilineOptionsUpdate(t,e){if(t===e)return;this.optionElements.forEach((e=>e.multiline=t))}openChanged(t){this.scheduledAfterRender.push((async()=>{await r();const{popoverTopContainer:e,popoverElement:i}=this;const s=t&&(e===null\|\|e===void 0?void 0:e.offsetHeight)\|\|0;if(s){i.style.setProperty("--comp-popover-top-container-height",`${s}px`)}else{i.style.removeProperty("--comp-popover-top-container-height")}}))}_togglePopover(){const{innerInputField:t}=this;t===null\|\|t===void 0?void 0:t.click();t===null\|\|t===void 0?void 0:t.focus();t.dispatchEvent(new FocusEvent("focus"))}async openPopover(){if(this.open\|\|this.disabled)return;this._togglePopover()}async closePopover(){if(!this.open\|\|this.disabled)return;this._togglePopover()}async setValue(t,e={closePopover:true}){const i=new Set(Array.isArray(t)?t:[t]);if(!this.open){await this.openPopover();await r()}i.forEach((t=>{var e;(e=this.optionElements.find((e=>e.value===t)))===null\|\|e===void 0?void 0:e.click()}));if(e.closePopover){await this.closePopover();await r()}}searchOptions(t){if(!this.searchable)return;const{innerInputField:e}=this;e.focus();e.dispatchEvent(new FocusEvent("focus"));e.value=t;e.dispatchEvent(new InputEvent("input"))}keydownHandler(t){this.inputKeydownHandler(t)}onHostElementChange(t){if(this.readonly\|\|this.disabled)return;if(t.target!==this.hostElement\|\|this.hostElement.onchange)return;if(this.multiple){this.value=null;this.selectedOptions=t.detail.selectedOptions}else{this.value=t.detail.value;this.selectedOptions=[]}}onHostElementInput(t){if(!this.searchable\|\|t.target!==this.hostElement\|\|this.hostElement.oninput)return;const e=this.optionElements;const i=this.searchText.trim().toLocaleLowerCase();let s=0;e.forEach((t=>{var e;if(i===""){t.hidden=false;return}const o=((e=t.firstElementChild)===null\|\|e===void 0?void 0:e.tagName)==="Q2-CARD"?t.firstElementChild.title:null;const{display:l="",innerText:n=""}=t;const r=[l,o,n];const a=r.some((t=>{var e;return(e=t===null\|\|t===void 0?void 0:t.toLocaleLowerCase().includes(i))!==null&&e!==void 0?e:false}));t.hidden=!a;if(a)s++}));const l=i?"tecton.element.select.searchable.results":"tecton.element.select.allOptions";const n=i?s:e.length;this.setStatusMessage(o(l,[n]))}delegateFocus(t){const e=a(t,this.hostElement);const i=this.prioritizeSearch=e&&this.searchable;if(i){this.clearSelectedDisplay()}else if(c(t,this.hostElement)){this.inputField.shadowRoot.querySelector(".input-field").focus()}}handleFocusout(t){const e=d(t,this.hostElement);if(e)this.closeDropdown();this.prioritizeSearch=!e&&this.searchable}handleSelectedDisplay(t){if(this.multiple)return;this.inputField.value=t.detail.display}async executeActionSheet(t){const e=await p(this,t);this.handleSelectionChanges(e)}handleSelectionChanges(t){const{value:e="",values:i=[]}=t;const s=i.map((t=>t.value));const{multiple:o}=this;if(!this.hostElement.onchange){this.selectedOptions=s}this.change.emit({value:o?undefined:e,selectedOptions:o?s:undefined})}clearValue(){const{multiple:t}=this;this.value="";this.selectedOptions=[];this.change.emit({value:t?undefined:"",selectedOptions:t?[]:undefined})}calculateMultiSelectSelectedDisplay(){var t,e,i;const{firstSelectedOptionElement:s,firstSelectedValue:l,multilineOptions:n}=this;if(!l)return"";if(s===null\|\|s===void 0?void 0:s.display)return o(s.display);if(n&&this.searchable)return this.searchText;if(n)return"";return(i=(e=(t=s===null\|\|s===void 0?void 0:s.textContent)===null\|\|t===void 0?void 0:t.trim())!==null&&e!==void 0?e:s===null\|\|s===void 0?void 0:s.value)!==null&&i!==void 0?i:l}calculateSingleSelectSelectedDisplay(){var t;const{firstSelectedOptionElement:e,multilineOptions:i}=this;if(i){return(e===null\|\|e===void 0?void 0:e.display)&&o(e.display)\|\|this.value\|\|""}else{return(e===null\|\|e===void 0?void 0:e.display)&&o(e.display)\|\|((t=e===null\|\|e===void 0?void 0:e.textContent)===null\|\|t===void 0?void 0:t.trim())\|\|this.value\|\|""}}openDropdownWithoutActiveElement(){if(this.readonly\|\|this.disabled)return;this.optionList.setActiveElement(null);this.open=true}closeDropdown(){this.open=false;this.clearSearchText()}clearSearchText(){if(!this.searchText)return;this.searchText="";this.input.emit({query:""})}toggleDropdown(){if(this.readonly\|\|this.disabled)return;if(this.open&&!this.searchText){this.closeDropdown()}else{this.openDropdownWithoutActiveElement()}}focusInput(){var t;(t=this.inputField)===null\|\|t===void 0?void 0:t.dispatchEvent(new FocusEvent("focus"))}setStatusMessage(t){clearTimeout(this.statusMessageTimer);this.statusMessage="";this.statusMessageTimer=setTimeout((()=>{this.statusMessage=t}),1e3)}checkSelectedOptions(){const{multiple:t,selectedOptions:e,value:i}=this;this.optionElements.forEach((s=>{if(t){s.selected=e.includes(s.value)}else{s.selected=s.value===i}}))}clearSelectedDisplay(){var t;(t=this.selectedDisplaySlot)===null\|\|t===void 0?void 0:t.remove()}checkSelectedDisplay(){let t=this.selectedDisplaySlot;const{value:e,multiple:i,selectedOptions:s,multilineOptions:o,firstSelectedOptionElement:l,prioritizeSearch:n}=this;const r=!e&&i&&!(s===null\|\|s===void 0?void 0:s.length);if(n\|\|!o\|\|r)return this.clearSelectedDisplay();if(!l\|\|l.display)return this.clearSelectedDisplay();const a=l.firstElementChild.cloneNode(true);a.querySelectorAll("[hide-on-select]").forEach((t=>t.remove()));if(t){const e=t.clientHeight===0?"auto":`${t.clientHeight}px`;t.style.setProperty("--comp-selected-display-height",e);if(t.firstElementChild.outerHTML!==a.outerHTML){t.replaceChild(a,t.firstElementChild)}}else{t=document.createElement("div");t.slot="_selected-display";t.appendChild(a);this.hostElement.appendChild(t)}return t}checkSelectedDisplayHeight(){const{selectedDisplaySlot:t}=this;if(!t)return;t.style.setProperty("--comp-selected-display-height","44px")}shouldClearSearchText(t){return this.searchable&&!!this.searchText&&t.key==="Escape"}renderCustomDisplay(){const t=this.checkSelectedDisplay();if(!t)return;this.checkSelectedDisplayHeight();return i("slot",{name:"_selected-display",slot:"custom-display"})}render(){var t;const e=!this.searchable;return i("click-elsewhere",{key:"a3fbee9295ca05dbb4856eebf5e6fb53a9f9e2a3",class:this.wrapperClasses,onChange:this.clickedElsewhere},i("div",{key:"a50de81a29cca3188898f6d4b6e16cbbfb6839f4","aria-live":"polite","aria-atomic":"true",role:"status",class:"sr"},this.statusMessage),i("q2-input",{key:"6059e00c0d5b86920a9193b9bf3bd06d0de27d92",ref:t=>this.inputField=t,class:"q2-select-input",label:this.label&&o(this.label)\|\|"",value:this.selectedDisplay,clearable:this.clearable&&(!!this.value\|\|!!((t=this.selectedOptions)===null\|\|t===void 0?void 0:t.length))\|\|undefined,errors:Array.isArray(this.errors)&&this.errors.length>0&&this.errors.map((t=>o(t)))\|\|this.invalid&&["tecton.element.select.invalid"]\|\|[],disabled:this.disabled,optional:this.optional,readonly:this.readonly,placeholder:this.placeholder\|\|undefined,hideLabel:this.hideLabel,ariaExpanded:`${this.open}`,ariaControls:"option-list",ariaHaspopup:"listbox",role:"combobox",pseudo:e,"test-id":"toggleDropdown","hide-messages":true,iconRight:"chevron-down",onClick:this.inputClickHandler,onInput:this.inputInputHandler,onKeyDown:this.inputKeydownHandler,onFocus:this.inputFocusHandler,onBlur:this.inputBlurHandler,onChange:this.inputChangeHandler,badgeValue:this.badgeValue,badgeTheme:this.inputFocused?"primary":undefined,_role:"combobox"},this.renderCustomDisplay()),i("div",{key:"3d0564757940cb634bac20ff556e540ef455f695",class:"custom-display-content",hidden:!this.hasCustomDisplay\|\|!!this.searchText,onClick:this.onCustomDisplayClick},i("slot",{key:"dfdfcb9a0ca41f229d2b50c3b300f47cc565cace",name:"q2-select-display"})),this.optionsDropdown())}optionsDropdown(){return i("q2-popover",{ref:t=>this.popoverElement=t,controlElement:this.innerInputContainer,open:this.open,minHeight:this.popoverMinHeight,direction:this.popDirection,mode:this.popoverMode\|\|undefined,block:true},i("div",{class:"popover-content"},i("q2-option-list",{onPopoverState:this.onPopoverState,ref:t=>this.optionList=t,type:"listbox",id:"option-list","show-selected":this.showSelected,label:this.listLabel,multiple:this.multiple,selectedOptions:this.structuredSelectedOptions,onChange:this.onOptionListChange},i("slot",null)),i("div",{class:"popover-top-container",ref:t=>this.popoverTopContainer=t,hidden:!this.multiple&&!this.hasPopoverTop,tabindex:"-1"},i("slot",{name:"popover-top"}),this.multiple&&this.visibilityToggle())),i("div",{class:"popover-bottom-container",hidden:!this.hasPopoverBottom,tabindex:"-1"},i("slot",{name:"popover-bottom"})))}visibilityToggle(){var t,e;const s=(e=(t=this.selectedOptions)===null\|\|t===void 0?void 0:t.length)!==null&&e!==void 0?e:0;const{showSelected:l}=this;return i("div",{class:"multi-select-header"},i("fieldset",null,i("legend",{"aria-label":o("tecton.element.select.multiHeader.showing")},o("tecton.element.select.multiHeader.showing")),i("div",null,i("input",{class:"sr",type:"radio",id:"all",name:"viewDisplay",value:"all",checked:!l,"aria-label":o("tecton.element.select.multiHeader.allAriaLabel"),"test-id":"allOptionsButton",onClick:this.showAllOptions,onKeyDown:this.visibilityToggleKeyDown}),i("label",{htmlFor:"all"},o("tecton.element.select.multiHeader.all"))),i("div",null,i("input",{class:"sr",type:"radio",id:"selected",disabled:s===0,name:"viewDisplay",value:"selected","aria-label":o("tecton.element.select.multiHeader.selectedAriaLabel",[s]),checked:l,"test-id":"selectedOptionsButton",onClick:this.showSelectedOptions,onKeyDown:this.visibilityToggleKeyDown}),i("label",{htmlFor:"selected"},o("tecton.element.select.multiHeader.selected",[s])))))}get hostElement(){return s(this)}static get watchers(){return{value:["buildStructuredSelectedOptions","valueUpdated"],selectedOptions:["buildStructuredSelectedOptions"],ariaLabel:["ariaLabelObserver"],multilineOptions:["handleMultilineOptionsUpdate"],open:["openChanged"]}}};b.style=v;export{b as q2_select};
2	+ //# sourceMappingURL=p-36398b59.entry.js.map