npm - q2-tecton-elements - Versions diffs - 1.66.2 → 1.67.0 - Mend

q2-tecton-elements 1.66.2 → 1.67.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 (681) hide show

package/dist/esm/q2-message.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-message.entry.js","sources":["src/components/q2-message/q2-message.scss?tag=q2-message&encapsulation=shadow","src/components/q2-message/q2-message.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.message {\n border-left-width: #{var-list(var-prefixer(message-bar-width), 4px)};\n border-left-style: solid;\n --comp-line-height: #{var-list(var-prefixer(message-line-height), --app-line-height, 1.428571429em)};\n display: grid;\n gap: var(--tct-message-gap, 8px);\n align-items: flex-start;\n background: var-list(\n --tct-message-background,\n var-prefixer(message-bg),\n --tct-gray-14,\n --t-gray-14,\n --tct-gray-l3,\n --app-gray-l3,\n #f2f2f2\n );\n color: #{var-list(var-prefixer(message-font-color), inherit)};\n box-shadow: #{var-list(var-prefixer(message-box-shadow), --app-shadow-1, inherit)};\n border-radius: #{var-list(var-prefixer(message-border-radius), --app-border-radius-1, inherit)};\n\n &:focus {\n box-shadow: var(--const-global-focus);\n }\n}\n\n.message-icon {\n --comp-top-offset: calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);\n --tct-icon-size: var(--comp-icon-size);\n top: var(--comp-top-offset);\n margin-bottom: calc(var(--comp-top-offset) * -1);\n}\n\n.message-content {\n flex: 1;\n line-height: var(--comp-line-height);\n font-size: var(--tct-message-font-size, inherit);\n}\n\n::slotted(ul) {\n --comp-list-default-padding: 0 0 0 #{var-list(--app-scale-3x, 15px)};\n padding: var-list(--tct-message-list-padding, --comp-list-default-padding);\n}\n\n:host(:not([appearance])),\n:host([appearance='standard']) {\n --comp-default-margin: #{var-list(--app-scale-3x, 5px)} 0;\n margin: var-list(--tct-message-margin, --comp-default-margin);\n\n .message {\n --comp-icon-size: #{var-list(var-prefixer(message-icon-size), 24px)};\n --comp-padding: #{var-list(var-prefixer(message-padding), --app-scale-3x, 15px)};\n grid-template-columns: var(--comp-icon-size) 1fr;\n padding: var(--comp-padding);\n padding-bottom: calc(var(--comp-padding) - #{var-list(--tct-scale-1, --app-scale-1x, 5px)});\n }\n\n ::slotted(ul) {\n --comp-list-default-margin: #{var-list(--app-scale-3x, 15px) 0};\n margin: var-list(--tct-message-list-margin, --comp-list-default-margin);\n }\n}\n\n:host([appearance='minimal']) {\n margin: 0;\n\n .message {\n padding: var-list(var-prefixer(message-minimal-padding), --app-scale-2x, 10px);\n grid-template-columns: 1fr;\n }\n\n ::slotted(ul) {\n margin: var-list(--tct-scale-1, --app-scale-1x, 5px) 0;\n }\n}\n\n:host(:not([type])),\n:host([type='info']) {\n --comp-info-color: #0079c1;\n .message {\n border-left-color: var-list(--tct-stoplight-info, --const-stoplight-info, --comp-info-color);\n }\n\n .message-icon,\n .message-icon {\n --tct-icon-stroke-primary: #{var-list(--tct-stoplight-info, --const-stoplight-info, --comp-info-color)};\n --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-info, --const-stoplight-info, --comp-info-color)};\n }\n}\n\n:host([type='success']) {\n --comp-success-color: #0e8a00;\n .message {\n border-left-color: var-list(--tct-stoplight-success, --const-stoplight-success, --comp-success-color);\n }\n\n .message-icon {\n --tct-icon-stroke-primary: #{var-list(--tct-stoplight-success, --const-stoplight-success, --comp-success-color)};\n --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-success, --const-stoplight-success, --comp-success-color)};\n }\n}\n\n:host([type='warning']) {\n --comp-warning-color: #c35500;\n .message {\n border-left-color: var-list(--tct-stoplight-warning, --const-stoplight-warning, --comp-warning-color);\n }\n\n .message-icon {\n --tct-icon-stroke-primary: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, --comp-warning-color)};\n --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, --comp-warning-color)};\n }\n}\n\n:host([type='error']),\n:host([type='danger']) {\n --comp-error-color: #d20a0a;\n .message {\n border-left-color: var-list(--tct-stoplight-error, --const-stoplight-alert, --comp-error-color);\n }\n\n .message-icon,\n .message-icon {\n --tct-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, --comp-error-color)};\n --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, --comp-error-color)};\n }\n}\n","import { Component, Prop, h, Method, State, Element, Listen } from '@stencil/core';\nimport { isEventFromElement, isFirefox as checkIfFirefox, loc, nextPaint, overrideFocus } from 'src/utils';\n\n/*\n @name Message\n * @category Feedback\n * @summary Use for contextual non-blocking notifications like success, error, or info alerts.\n /\n@Component({ tag: 'q2-message', shadow: true, styleUrl: 'q2-message.scss' })\nexport class Q2Message {\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n presentToggle: boolean;\n\n // #endregion\n // #region Public Property API\n\n /* The visual style of the message. The minimal style is for use cases where you have less space to display information. /\n @Prop({ reflect: true })\n appearance: 'minimal' \| 'standard' = 'standard';\n\n /* Determines whether or not assistive technology immediately presents the content to the user, via the `aria-live` attribute. /\n @Prop({ reflect: true })\n description: boolean = false;\n\n /* The type of message to display on the screen. /\n @Prop({ reflect: true })\n type: 'info' \| 'error' \| 'danger' \| 'warning' \| 'success' = 'info';\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentDidLoad(): void {\n overrideFocus(this.hostElement);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.hostElement.shadowRoot.querySelector<HTMLElement>('.message').focus();\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n Prompts assistive technology to announce the message.\n */\n @Method()\n async present() {\n const { isFirefox } = this;\n this.presentToggle = !this.presentToggle;\n if (!isFirefox) return;\n nextPaint(() => {\n this.presentToggle = false;\n });\n }\n\n // #endregion\n // #region Local Methods\n\n get isFirefox() {\n return checkIfFirefox();\n }\n\n messageIcon(type: string) {\n const iconMap = {\n success: 'success-filled',\n warning: 'warning-filled',\n danger: 'error-filled',\n error: 'error-filled',\n info: 'info-filled',\n };\n\n const iconType: string = iconMap[type] \|\| iconMap.info;\n\n return (\n <q2-icon\n type={iconType}\n class=\"message-icon\"\n />\n );\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { isFirefox } = this;\n const addAriaHiddenForAriaLive = isFirefox && this.presentToggle;\n const addDivForAriaLive = !isFirefox && this.presentToggle;\n const { description } = this;\n const messageLabel: string = loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);\n\n return (\n <div\n tabindex=\"-1\"\n class=\"message\"\n role={description ? undefined : 'alert'}\n aria-live={description ? undefined : 'assertive'}\n aria-atomic={description ? undefined : 'true'}\n aria-relevant={description && addAriaHiddenForAriaLive ? undefined : 'all'}\n test-id=\"messageContainer\"\n >\n {this.appearance === 'standard' ? this.messageIcon(this.type) : ''}\n {addDivForAriaLive && <div class=\"sr\"></div>}\n <div class=\"sr message-label\">{messageLabel}</div>\n <div\n class=\"message-content\"\n aria-hidden={addAriaHiddenForAriaLive ? 'true' : undefined}\n >\n <slot />\n </div>\n </div>\n );\n }\n\n // #endregion\n}\n"],"names":["checkIfFirefox"],"mappings":"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"}
1	+ {"version":3,"file":"q2-message.entry.js","sources":["src/components/q2-message/q2-message.scss?tag=q2-message&encapsulation=shadow","src/components/q2-message/q2-message.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.message {\n --comp-line-height: #{var-list(var-prefixer(message-line-height), --app-line-height, 1.428571429em)};\n border-width: var(--tct-message-border-width, 0);\n border-style: var(--tct-message-border-style, solid);\n border-color: var(--tct-message-border-color, transparent);\n position: relative;\n display: grid;\n gap: var(--tct-message-gap, 8px);\n align-items: flex-start;\n background: var-list(\n --tct-message-background,\n var-prefixer(message-bg),\n --tct-gray-14,\n --t-gray-14,\n --tct-gray-l3,\n --app-gray-l3,\n #f2f2f2\n );\n color: #{var-list(var-prefixer(message-font-color), inherit)};\n box-shadow: #{var-list(var-prefixer(message-box-shadow), --app-shadow-1, inherit)};\n border-radius: #{var-list(var-prefixer(message-border-radius), --app-border-radius-1, inherit)};\n\n &:focus {\n box-shadow: var(--const-global-focus);\n }\n}\n\n.bar {\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n height: 100%;\n background: var(--comp-bar-color);\n width: var-list(var-prefixer(message-bar-width), 4px);\n border-radius: var(--tct-message-bar-border-radius, var(--app-border-radius-1) 0 0 var(--app-border-radius-1));\n}\n\n.message-icon {\n --comp-top-offset: calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);\n --tct-icon-size: var(--comp-icon-size);\n top: var(--comp-top-offset);\n margin-bottom: calc(var(--comp-top-offset) * -1);\n}\n\n.message-content {\n flex: 1;\n line-height: var(--comp-line-height);\n font-size: var(--tct-message-font-size, inherit);\n}\n\n::slotted(ul) {\n --comp-list-default-padding: 0 0 0 #{var-list(--app-scale-3x, 15px)};\n padding: var-list(--tct-message-list-padding, --comp-list-default-padding);\n}\n\n:host(:not([appearance])),\n:host([appearance='standard']) {\n --comp-default-margin: #{var-list(--app-scale-3x, 5px)} 0;\n margin: var-list(--tct-message-margin, --comp-default-margin);\n\n .message {\n --comp-icon-size: #{var-list(var-prefixer(message-icon-size), 24px)};\n --comp-padding: #{var-list(var-prefixer(message-padding), --app-scale-3x, 15px)};\n grid-template-columns: var(--comp-icon-size) 1fr;\n padding: var(--comp-padding);\n padding-bottom: calc(var(--comp-padding) - #{var-list(--tct-scale-1, --app-scale-1x, 5px)});\n }\n\n ::slotted(ul) {\n --comp-list-default-margin: #{var-list(--app-scale-3x, 15px) 0};\n margin: var-list(--tct-message-list-margin, --comp-list-default-margin);\n }\n}\n\n:host([appearance='minimal']) {\n margin: 0;\n\n .message {\n padding: var-list(var-prefixer(message-minimal-padding), --app-scale-2x, 10px);\n grid-template-columns: 1fr;\n }\n\n ::slotted(ul) {\n margin: var-list(--tct-scale-1, --app-scale-1x, 5px) 0;\n }\n}\n\n:host(:not([type])),\n:host([type='info']) {\n --comp-info-color: #0079c1;\n --comp-bar-color: #{var-list(--tct-message-info-bar-color, --const-stoplight-info, --comp-info-color)};\n\n .message-icon,\n .message-icon {\n --tct-icon-stroke-primary: #{var-list(--tct-stoplight-info, --const-stoplight-info, --comp-info-color)};\n --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-info, --const-stoplight-info, --comp-info-color)};\n }\n}\n\n:host([type='success']) {\n --comp-success-color: #0e8a00;\n --comp-bar-color: #{var-list(--tct-message-success-bar-color, --const-stoplight-success, --comp-success-color)};\n\n .message-icon {\n --tct-icon-stroke-primary: #{var-list(--tct-stoplight-success, --const-stoplight-success, --comp-success-color)};\n --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-success, --const-stoplight-success, --comp-success-color)};\n }\n}\n\n:host([type='warning']) {\n --comp-warning-color: #c35500;\n --comp-bar-color: #{var-list(--tct-message-warning-bar-color, --const-stoplight-warning, --comp-warning-color)};\n\n .message-icon {\n --tct-icon-stroke-primary: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, --comp-warning-color)};\n --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, --comp-warning-color)};\n }\n}\n\n:host([type='error']),\n:host([type='danger']) {\n --comp-error-color: #d20a0a;\n --comp-bar-color: #{var-list(--tct-message-error-bar-color, --const-stoplight-alert, --comp-error-color)};\n\n .message-icon,\n .message-icon {\n --tct-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, --comp-error-color)};\n --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, --comp-error-color)};\n }\n}\n","import { Component, Prop, h, Method, State, Element, Listen } from '@stencil/core';\nimport { isEventFromElement, isFirefox as checkIfFirefox, loc, nextPaint, overrideFocus } from 'src/utils';\n\n/*\n @name Message\n * @category Feedback\n * @summary Use for contextual non-blocking notifications like success, error, or info alerts.\n /\n@Component({ tag: 'q2-message', shadow: true, styleUrl: 'q2-message.scss' })\nexport class Q2Message {\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n presentToggle: boolean;\n\n // #endregion\n // #region Public Property API\n\n /* The visual style of the message. The minimal style is for use cases where you have less space to display information. /\n @Prop({ reflect: true })\n appearance: 'minimal' \| 'standard' = 'standard';\n\n /* Determines whether or not assistive technology immediately presents the content to the user, via the `aria-live` attribute. /\n @Prop({ reflect: true })\n description: boolean = false;\n\n /* The type of message to display on the screen. /\n @Prop({ reflect: true })\n type: 'info' \| 'error' \| 'danger' \| 'warning' \| 'success' = 'info';\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentDidLoad(): void {\n overrideFocus(this.hostElement);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.hostElement.shadowRoot.querySelector<HTMLElement>('.message').focus();\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n Prompts assistive technology to announce the message.\n */\n @Method()\n async present() {\n const { isFirefox } = this;\n this.presentToggle = !this.presentToggle;\n if (!isFirefox) return;\n nextPaint(() => {\n this.presentToggle = false;\n });\n }\n\n // #endregion\n // #region Local Methods\n\n get isFirefox() {\n return checkIfFirefox();\n }\n\n messageIcon(type: string) {\n const iconMap = {\n success: 'success-filled',\n warning: 'warning-filled',\n danger: 'error-filled',\n error: 'error-filled',\n info: 'info-filled',\n };\n\n const iconType: string = iconMap[type] \|\| iconMap.info;\n\n return (\n <q2-icon\n type={iconType}\n class=\"message-icon\"\n />\n );\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { isFirefox } = this;\n const addAriaHiddenForAriaLive = isFirefox && this.presentToggle;\n const addDivForAriaLive = !isFirefox && this.presentToggle;\n const { description } = this;\n const messageLabel: string = loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);\n\n return (\n <div\n tabindex=\"-1\"\n class=\"message\"\n role={description ? undefined : 'alert'}\n aria-live={description ? undefined : 'assertive'}\n aria-atomic={description ? undefined : 'true'}\n aria-relevant={description && addAriaHiddenForAriaLive ? undefined : 'all'}\n test-id=\"messageContainer\"\n >\n <div\n class=\"bar\"\n test-id=\"bar\"\n ></div>\n {this.appearance === 'standard' ? this.messageIcon(this.type) : ''}\n {addDivForAriaLive && <div class=\"sr\"></div>}\n <div class=\"sr message-label\">{messageLabel}</div>\n <div\n class=\"message-content\"\n aria-hidden={addAriaHiddenForAriaLive ? 'true' : undefined}\n >\n <slot />\n </div>\n </div>\n );\n }\n\n // #endregion\n}\n"],"names":["checkIfFirefox"],"mappings":"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"}

package/dist/esm/q2-meter.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-CGkHOjh1.js';
-import { l as loc } from './index-B4WYBDS9.js';
+import { l as loc } from './index-C4PILj1_.js';
 const q2MeterCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{width:100%}.meter-container{--comp-meter-bar-height:var(--tct-meter-bar-height, 10px);--comp-meter-bar-border-radius:var(--tct-meter-bar-border-radius, calc(var(--comp-meter-bar-height) / 2));--comp-meter-dot-height:var(--tct-meter-dot-size, var(--tct-meter-bar-height, 10px));--comp-meter-dot-border-style:var(--tct-meter-dot-border-style, solid);--comp-meter-dot-border-width:var(--tct-meter-dot-border-width, calc(0.2 * var(--comp-meter-bar-height)));--comp-meter-dot-border-color:var(--tct-meter-dot-border-color, #FFFFFF);--comp-meter-dot-border-radius:var(--tct-meter-dot-border-radius, 50%);--comp-meter-dot-background-color:var(--tct-meter-dot-background-color, var(--t-primary, #6A4A9E));--comp-meter-tick-height:var(--tct-meter-ticket-height, calc(0.4 * var(--comp-meter-bar-height)));--comp-meter-bar-shadow:var(--tct-meter-bar-shadow);--comp-meter-bar-border:var(--tct-meter-bar-border)}:host([animated]:not([animated=false])) .meter-container{--comp-meter-bar-transition:var(--tct-meter-bar-transition, width 0.2s ease-in-out);--comp-meter-dot-transition:var(--tct-meter-dot-transition, left 0.2s ease-in-out)}:host([dotted]:not([dotted=false])) .meter-container{--comp-meter-dot-visibility:visible}:host([segments]:not([segments=\"\"]):not([segments=\"0\"]):not([segments=\"1\"])) .meter-container{--comp-meter-tick-visibility:visible}.meter-container .label{font-size:var(--tct-meter-label-font-size, 14px);font-weight:var(--tct-meter-label-font-weight, 600);color:var(--tct-meter-label-color, var(--t-text, #4D4D4D));margin:var(--tct-meter-label-margin, 5px 0)}.meter-container .description{font-size:var(--tct-meter-description-font-size, 14px);font-weight:var(--tct-meter-description-font-weight, 400);color:var(--tct-meter-description-color, #000000);line-height:var(--tct-meter-description-line-height, 21px);margin:var(--tct-meter-description-margin, 5px 0)}.meter-container .bar-container{position:relative}.meter-container .bar-container .bars{position:relative;top:0;left:0;width:100%;height:var(--comp-meter-bar-height);background-color:var(--tct-meter-bar-background-color, var(--t-primary-completed2, #E0DEEF));margin:var(--tct-meter-bar-margin, 5px 0);border:var(--comp-meter-bar-border);border-radius:var(--comp-meter-bar-border-radius);box-shadow:var(--comp-meter-bar-shadow)}.meter-container .bar-container .bars .completed-bar,.meter-container .bar-container .bars .suggested-bar,.meter-container .bar-container .bars .tick-bar{height:100%;position:absolute;top:0;left:0;border-radius:var(--comp-meter-bar-border-radius);transition:var(--comp-meter-bar-transition, none)}.meter-container .bar-container .bars .completed-bar{background-color:var(--tct-meter-completed-bar-background-color, var(--t-primary, #6A4A9E));min-width:calc(var(--comp-meter-bar-height));width:0%;z-index:2}.meter-container .bar-container .bars .suggested-bar{background-color:var(--tct-meter-suggested-bar-background-color, var(--t-primary-l5, #B4A0D3));min-width:calc(var(--comp-meter-bar-height));width:0%;z-index:1}.meter-container .bar-container .bars .tick-bar{visibility:var(--comp-meter-tick-visibility, hidden);width:100%;z-index:3;display:flex;justify-content:space-evenly;align-items:center}.meter-container .bar-container .bars .tick-bar .tick{width:100%;border-right-width:var(--tct-meter-tick-width, 1px);border-right-color:var(--tct-meter-tick-color, var(--t-primary-l5, #B4A0D3));border-right-style:solid;height:var(--comp-meter-tick-height)}.meter-container .bar-container .bars .tick-bar .tick.tick-right{border-right-color:var(--tct-meter-tick-right-color, var(--t-a11y-gray-color-AA, #949494))}.meter-container .bar-container .bars .tick-bar .tick:last-child{border-color:transparent}.meter-container .bar-container .dot-container{position:absolute;line-height:0;left:0;top:calc(50% - var(--comp-meter-dot-height) / 2 - var(--comp-meter-dot-border-width));transform:translateX(-50%);transition:var(--comp-meter-dot-transition, none);z-index:4}.meter-container .bar-container .dot-container .dot{visibility:var(--comp-meter-dot-visibility, hidden);width:calc(var(--comp-meter-dot-height) + 2 * var(--comp-meter-dot-border-width));height:calc(var(--comp-meter-dot-height) + 2 * var(--comp-meter-dot-border-width));background-color:var(--comp-meter-dot-background-color);border-style:var(--comp-meter-dot-border-style);border-width:var(--comp-meter-dot-border-width);border-color:var(--comp-meter-dot-border-color);border-radius:var(--comp-meter-dot-border-radius);box-shadow:var(--tct-meter-dot-box-shadow, var(--app-shadow-1))}.meter-container .bar-container .dot-container.suggested .dot{visibility:hidden}.meter-container .legends{display:flex;flex-direction:row;justify-content:space-between;color:var(--tct-meter-legend-label-color, var(--t-textA, #767676));font-weight:var(--tct-meter-legend-font-weight, 400);margin:var(--tct-meter-legend-margin, 5px 0)}.meter-container .legends .left{display:flex;flex-direction:row}.meter-container .legends .left .completed,.meter-container .legends .left .suggested{display:flex;flex-direction:row;align-items:center}.meter-container .legends .left .completed .dot,.meter-container .legends .left .suggested .dot{margin-right:var(--tct-meter-dot-gap, 5px);border-radius:var(--tct-meter-legend-dot-radius, var(--app-border-radius-3, 5px));width:var(--tct-meter-legend-bar-width, 7px);height:var(--tct-meter-legend-bar-height, 7px)}.meter-container .legends .left .completed .legend-label,.meter-container .legends .left .suggested .legend-label{font-size:inherit}.meter-container .legends .left .completed{margin-right:var(--tct-meter-legend-gap, 20px)}.meter-container .legends .left .completed .dot{background-color:var(--tct-meter-completed-bar-background-color, var(--t-primary, #6A4A9E))}.meter-container .legends .left .suggested .dot{background-color:var(--tct-meter-suggested-bar-background-color, var(--t-primary-l5, #B4A0D3))}.meter-container .legends .right .max{font-size:inherit;text-align:right}";
@@ -113,7 +113,7 @@ const Q2Meter = class {
     }
     render() {
         const [completed, suggested] = this.convertToPercentage(this.completedValue, this.suggestedValue, this.maxValue);
-        return (h("div", { key: '6b6e05dc4c575f71b92c767365f03f7955361c32', class: "meter-container", "aria-label": this.ariaLabel, role: "group" }, this.label && (h("div", { key: 'efb35a7a613ab5e627e159746e509006ad309ea0', class: "label", "aria-label": loc(this.label) }, loc(this.label))), this.description && (h("div", { key: '8d8d57b85258385d4afd029e3347b94411bdcd6f', class: "description", "aria-label": loc(this.description) }, loc(this.description))), this.renderBar(completed, suggested), h("div", { key: '4013ef3fcdd86fbc05ea2c04243cd3f1c85806c0', class: "legends" }, h("div", { key: '8f6582f60aede052fb0f1d103b09011104944abc', class: "left" }, this.completedValue || this.completedLabel ? (h("div", { class: "completed" }, h("div", { class: "dot" }), h("div", { class: "legend-label" }, this.completedValue, " ", loc(this.completedLabel)))) : (''), this.suggestedValue || this.suggestedLabel ? (h("div", { class: "suggested" }, h("div", { class: "dot" }), h("div", { class: "legend-label" }, this.suggestedValue, " ", loc(this.suggestedLabel)))) : ('')), h("div", { key: '588c1613a4b50d8971f9563e7dbe2e224625e820', class: "right" }, h("div", { key: '73d4eb43a171fa67a212e68d4eb57f6152be8f7e', class: "max" }, this.maxValue, " ", loc(this.maxLabel))))));
+        return (h("div", { key: '1fcdcdac6a15aa52ac302ec40bc5809ab39fdbe6', class: "meter-container", "aria-label": this.ariaLabel, role: "group" }, this.label && (h("div", { key: 'a4cf43a802e84c0ceaf44c697511c206d0611906', class: "label", "aria-label": loc(this.label) }, loc(this.label))), this.description && (h("div", { key: '8b8bdbcc35dbc2de60063cbf871a4a34bbe7548b', class: "description", "aria-label": loc(this.description) }, loc(this.description))), this.renderBar(completed, suggested), h("div", { key: '624342cfe8f534af2396fe6190e24bfcaecdb0c2', class: "legends" }, h("div", { key: '835efacea1cc4d03092cecbbd6914d54b498fa5f', class: "left" }, this.completedValue || this.completedLabel ? (h("div", { class: "completed" }, h("div", { class: "dot" }), h("div", { class: "legend-label" }, this.completedValue, " ", loc(this.completedLabel)))) : (''), this.suggestedValue || this.suggestedLabel ? (h("div", { class: "suggested" }, h("div", { class: "dot" }), h("div", { class: "legend-label" }, this.suggestedValue, " ", loc(this.suggestedLabel)))) : ('')), h("div", { key: '428535e8b751a3316bfb5b5ad19756d3fc09fcd0', class: "right" }, h("div", { key: 'f175ee347bcd84716c5e1971d657c4fbf7dcbbc1', class: "max" }, this.maxValue, " ", loc(this.maxLabel))))));
     }
     get hostElement() { return getElement(this); }
 };

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

@@ -1,8 +1,8 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-CGkHOjh1.js';
-import { e as debounce, w as waitForNextPaint, h as hasSlotContent } from './index-B4WYBDS9.js';
-import { s as sanitizeHTMLString } from './sanitize-html-string-BPwFpYg-.js';
+import { e as debounce, w as waitForNextPaint, h as hasSlotContent } from './index-C4PILj1_.js';
+import { s as sanitizeHTMLString } from './sanitize-html-string-B35VmRc9.js';
-const q2ModalCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@keyframes showBackdrop{from{opacity:0}}@keyframes hideBackdrop{to{opacity:0}}dialog{--comp-border-radius-default:var(--app-scale-3x, 15px);--comp-border-radius:var(--tct-modal-border-radius, var(--comp-border-radius-default));--comp-desktop-border-radius:var(--tct-modal-border-radius, var(--app-scale-3x, 15px));--comp-close-button-size:var(--tct-modal-close-button-size, var(--t-a11y-min-size, 44px));--comp-header-height:var(--tct-modal-header-height, var(--t-a11y-min-size, 44px));--comp-dialog-background:var(--tct-modal-background, var(--t-base, #ffffff));--comp-dialog-color:var(--tct-modal-color, var(--t-text, #4d4d4d));--comp-dialog-padding:var(--tct-modal-padding, var(--app-scale-3x, 15px));--comp-content-gradient-height:var(--tct-modal-content-gradient-height, var(--app-scale-2x, 10px));--comp-dialog-gap:var(--tct-modal-gap, var(--app-scale-2x, 10px));--comp-dialog-max-width:var(--tct-modal-max-width, 600px);--comp-dialog-max-height:var(--tct-modal-max-height, 100vh);--comp-dialog-min-height:var(--tct-modal-min-height, 40vh);--comp-dialog-box-shadow:var(--tct-modal-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)));position:fixed;top:100%;bottom:unset;color:var(--comp-dialog-color);background:var(--comp-dialog-background);transition:transform var(--tct-modal-tween, var(--app-tween-2, 0.4s ease)), opacity var(--tct-modal-tween, var(--app-tween-2, 0.4s ease));width:100%;max-width:var(--comp-dialog-max-width);border:0;border-radius:var(--comp-border-radius);box-shadow:var(--comp-dialog-box-shadow);padding:0;height:auto;overflow:hidden}dialog::backdrop{opacity:0;background:var(--tct-modal-backdrop-background, var(--t-top-a2, rgba(13, 13, 13, 0.6)))}dialog[open]{border-radius:var(--comp-desktop-border-radius);top:0px;bottom:0px;height:fit-content;transform:translateY(10%);opacity:1}dialog[open].is-opening,dialog[open].is-open{opacity:1;transform:translateY(0)}dialog[open].is-opening::backdrop,dialog[open].is-open::backdrop{opacity:1;animation:showBackdrop var(--tct-modal-tween, var(--app-tween-2, 0.4s ease))}dialog[open].is-closing{transform:translateY(10%)}dialog[open].is-closing::backdrop{animation:hideBackdrop var(--tct-modal-tween, var(--app-tween-2, 0.4s ease))}.content{overflow-y:auto;--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.content::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.content::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.content::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.content .icon{height:var(--tct-modal-icon-size, var(--app-scale-9x, 45px));margin:var(--tct-modal-icon-margin, var(--app-scale-2x, 10px));display:flex;justify-content:center}.content .icon q2-icon{width:var(--tct-modal-icon-size, var(--app-scale-9x, 45px))}.content .image{display:flex;justify-content:center}.content .image img{width:100%;border-radius:var(--tct-modal-image-border-radius, var(--app-border-radius-2, 8px))}.content .message{font-size:1rem}.content.more-gradient{-webkit-mask-image:linear-gradient(to bottom, red 85%, transparent 100%);mask-image:linear-gradient(to bottom, red 85%, transparent 100%)}.interior{display:grid;min-height:var(--comp-dialog-min-height);grid-template-rows:auto 1fr auto;gap:var(--comp-dialog-gap);max-height:calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));padding:var(--comp-dialog-padding)}.interior.is-list header,.interior.is-list footer{position:relative}.interior.is-list header:before,.interior.is-list footer:before{content:\"\";display:block;position:absolute;left:0;height:var(--comp-content-gradient-height);width:100%;z-index:1}header{display:flex;justify-content:space-between}header .title{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;text-align:left;font-weight:var(--tct-modal-title-font-weight, 400);margin:0;padding-top:0.5rem}header .btn-close{grid-area:close;width:var(--comp-close-button-size);height:var(--comp-close-button-size)}";
+const q2ModalCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@keyframes showBackdrop{from{opacity:0}}@keyframes hideBackdrop{to{opacity:0}}dialog{--comp-border-radius-default:var(--app-scale-3x, 15px);--comp-border-radius:var(--tct-modal-border-radius, var(--comp-border-radius-default));--comp-desktop-border-radius:var(--tct-modal-border-radius, var(--app-scale-3x, 15px));--comp-close-button-size:var(--tct-modal-close-button-size, var(--t-a11y-min-size, 44px));--comp-header-height:var(--tct-modal-header-height, var(--t-a11y-min-size, 44px));--comp-dialog-background:var(--tct-modal-background, var(--t-base, #ffffff));--comp-dialog-color:var(--tct-modal-color, var(--t-text, #4d4d4d));--comp-dialog-padding:var(--tct-modal-padding, var(--app-scale-3x, 15px));--comp-content-gradient-height:var(--tct-modal-content-gradient-height, var(--app-scale-2x, 10px));--comp-dialog-gap:var(--tct-modal-gap, var(--app-scale-2x, 10px));--comp-dialog-max-width:var(--tct-modal-max-width, 600px);--comp-dialog-max-height:var(--tct-modal-max-height, 100vh);--comp-dialog-min-height:var(--tct-modal-min-height, 40vh);--comp-dialog-box-shadow:var(--tct-modal-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)));position:fixed;top:100%;bottom:unset;color:var(--comp-dialog-color);background:var(--comp-dialog-background);transition:transform var(--tct-modal-tween, var(--app-tween-2, 0.4s ease)), opacity var(--tct-modal-tween, var(--app-tween-2, 0.4s ease));width:100%;max-width:var(--comp-dialog-max-width);border:0;border-radius:var(--comp-border-radius);box-shadow:var(--comp-dialog-box-shadow);padding:0;height:auto;overflow:hidden}dialog::backdrop{opacity:0;background:var(--tct-modal-backdrop-background, var(--t-top-a2, rgba(13, 13, 13, 0.6)))}dialog[open]{border-radius:var(--comp-desktop-border-radius);top:0px;bottom:0px;height:fit-content;transform:translateY(10%);opacity:1}dialog[open].is-opening,dialog[open].is-open{opacity:1;transform:translateY(0)}dialog[open].is-opening::backdrop,dialog[open].is-open::backdrop{opacity:1;animation:showBackdrop var(--tct-modal-tween, var(--app-tween-2, 0.4s ease))}dialog[open].is-closing{transform:translateY(10%)}dialog[open].is-closing::backdrop{animation:hideBackdrop var(--tct-modal-tween, var(--app-tween-2, 0.4s ease))}.content{overflow-y:auto;--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.content::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.content::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.content::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.content .icon{height:var(--tct-modal-icon-size, var(--app-scale-9x, 45px));margin:var(--tct-modal-icon-margin, var(--app-scale-2x, 10px));display:flex;justify-content:center}.content .icon q2-icon{width:var(--tct-modal-icon-size, var(--app-scale-9x, 45px))}.content .image{display:flex;justify-content:center}.content .image img{width:100%;border-radius:var(--tct-modal-image-border-radius, var(--app-border-radius-2, 8px))}.content .description{font-size:var(--tct-modal-description-font-size, 14px)}.content.more-gradient{-webkit-mask-image:linear-gradient(to bottom, red 85%, transparent 100%);mask-image:linear-gradient(to bottom, red 85%, transparent 100%)}.interior{display:grid;min-height:var(--comp-dialog-min-height);grid-template-rows:auto 1fr auto;gap:var(--comp-dialog-gap);max-height:calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));padding:var(--comp-dialog-padding)}.interior.is-list header,.interior.is-list footer{position:relative}.interior.is-list header:before,.interior.is-list footer:before{content:\"\";display:block;position:absolute;left:0;height:var(--comp-content-gradient-height);width:100%;z-index:1}header{display:flex;justify-content:space-between;align-items:center}header .title{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;text-align:left;font-weight:var(--tct-modal-title-font-weight, 400);margin:0}header .btn-close{grid-area:close;width:var(--comp-close-button-size);height:var(--comp-close-button-size)}";
 const Q2Modal = class {
     constructor(hostRef) {
@@ -27,19 +27,6 @@ const Q2Modal = class {
         this.closable = true;
         // #endregion
         // #region Local Methods
-        // to be removed
-        this.iconStyle = () => {
-            const styleObject = {};
-            if (this.iconStrokePrimary)
-                styleObject['--tct-icon-stroke-primary'] = this.iconStrokePrimary;
-            if (this.iconStrokeSecondary)
-                styleObject['--tct-icon-stroke-secondary'] = this.iconStrokeSecondary;
-            if (this.iconFillColor)
-                styleObject['--tct-icon-fill'] = this.iconFillColor;
-            if (this.iconStrokeWidth)
-                styleObject['--tct-icon-stroke-width'] = this.iconStrokeWidth;
-            return styleObject;
-        };
         this.initializeModal = () => {
             // limits 4 buttons in action slot
             this.hostElement.querySelectorAll('[slot="action"]').forEach((el, i) => {
@@ -132,10 +119,6 @@ const Q2Modal = class {
             this.description = (option === null || option === void 0 ? void 0 : option.description) || this.description;
             this.imageSrc = (option === null || option === void 0 ? void 0 : option.imageSrc) || this.imageSrc;
             this.icon = (option === null || option === void 0 ? void 0 : option.icon) || this.icon;
-            this.iconStrokePrimary = (option === null || option === void 0 ? void 0 : option.iconStrokePrimary) || this.iconStrokePrimary;
-            this.iconStrokeSecondary = (option === null || option === void 0 ? void 0 : option.imageSrc) || this.imageSrc;
-            this.iconFillColor = (option === null || option === void 0 ? void 0 : option.iconFillColor) || this.iconFillColor;
-            this.iconStrokeWidth = (option === null || option === void 0 ? void 0 : option.iconStrokeWidth) || this.iconStrokeWidth;
             this.description = (option === null || option === void 0 ? void 0 : option.description) || this.description;
         }
         this.dialogElement.showModal();
@@ -154,7 +137,7 @@ const Q2Modal = class {
     render() {
         const interiorClasses = `interior`;
         const renderStatus = `${this.renderStatus || ''}`;
-        return (h("dialog", { key: 'a74bc5ae1614b0dd8eaa8ce70f73560788e9a662', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: 'bb709e1b379144393b67a9718fcdb61d7c344d00', class: interiorClasses }, this.title && (h("header", { key: '7d6eaa8ea125c352bc65a40cbfcc03879f8f181b' }, this.title && h("h2", { key: '13c8e1a45253ab74c2e23485d6898ab213fc8d39', class: "title" }, this.title), !!this.closable && (h("q2-btn", { key: '3fc9bb4214af2a43f74b42625a69501c8dcc3e03', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.modal.close", "hide-label": true }, h("q2-icon", { key: 'b72871beef595c1ed77cc2a7f84d72599b976efa', type: "close" }))))), h("div", { key: '4b0e60c0f90eec52882575675bc8c2d84e5d1480', class: "content", ref: el => (this.contentElement = el) }, this.icon && (h("div", { key: 'f53452867c3f53c20750dec0b094e0cbc9e78f2c', class: "icon" }, h("q2-icon", { key: '5246ccd47a15fed2ec243a3c882dda3b2793c715', type: this.icon, style: this.iconStyle() }))), this.imageSrc && (h("div", { key: 'c030bc4c0dcdf79f2a9688af54540ebc63df6fa8', class: "image" }, h("img", { key: '54269ee03ab7373699b4a0bad69fbbb75b1587e6', src: this.imageSrc }))), hasSlotContent(this.hostElement, 'content') && h("slot", { key: 'eeffc528102cbf7d7dfd7b79eba16985ee870fe4', name: "content" }), this.description && h("p", { key: '01e020a52753b22e2b78239ac78b7dc6767c7e8a', class: "description" }, this.description), this.customMarkup && (h("p", { key: '4cf054ce65628789760fd782bb38c3d72d80e8e0', class: "customMarkup", innerHTML: sanitizeHTMLString(this.customMarkup) }))), h("footer", { key: 'be4e4c941edd52e44dcd1485506f9930724572f8' }, h("q2-action-group", { key: '9570a97936e654789b58d680573b54b6735e6290', "full-width": true }, h("slot", { key: 'e727e732a3ebf3edf9d16389fb3d2da640b36bff', name: "action" }))))));
+        return (h("dialog", { key: '2a1e01cc98af3b7dc4ec4492f3dbe2b61ff060ff', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: '6e0c488f59516d53c2e34c80c4fed32f2963e76e', class: interiorClasses }, this.title && (h("header", { key: 'd97209894acdc0c907516395ec4ccb2dea5c93d3' }, this.title && h("h2", { key: '56cd50bf63c72417bb7d640eb64421fa65ed4006', class: "title" }, this.title), !!this.closable && (h("q2-btn", { key: 'e9832d75490902ccac63009208dc805183fc6fed', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.modal.close", "hide-label": true }, h("q2-icon", { key: '999e4cbad19c10f2938a00e105dc9655dadb4fa1', type: "close" }))))), h("div", { key: 'df57e3809860f06f08ccca9578612d5d204c4cde', class: "content", ref: el => (this.contentElement = el) }, this.icon && (h("div", { key: '56ea4df19dab180f4e8847e4b64e2a8784be2ee4', class: "icon" }, h("q2-icon", { key: '50cc9eb841424d1433a5afcac8416a604bc583d7', type: this.icon }))), this.imageSrc && (h("div", { key: '743af68df051cc939799d60ba061cdc0b5680212', class: "image" }, h("img", { key: 'ad69ea057cb66b80338a9d06601c39f1ae5aa3ac', src: this.imageSrc }))), hasSlotContent(this.hostElement, 'content') && h("slot", { key: 'ac45807fa0700265591bc194cf0b24cbc233d23b', name: "content" }), this.description && h("p", { key: 'adb8757efc3a2877ccf0eb4affd759158caa38d6', class: "description" }, this.description), this.customMarkup && (h("p", { key: '95f97089b1cf6c411f8e915808f6bf89fe396e0b', class: "customMarkup", innerHTML: sanitizeHTMLString(this.customMarkup) }))), h("footer", { key: 'd41618d7da89c69d604cf762831a26b1a56901b4' }, h("q2-action-group", { key: '6a4d8f77c8c5e2b86b439d76d05b2280786da704', "full-width": true }, h("slot", { key: '87e723189a4c60e2ad0cabe567e6603a368e7c58', name: "action" }))))));
     }
     get hostElement() { return getElement(this); }
 };

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

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

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-CGkHOjh1.js';
-import { l as loc, o as overrideFocus } from './index-B4WYBDS9.js';
+import { l as loc, o as overrideFocus } from './index-C4PILj1_.js';
 const q2MonthPickerCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.month-container{--comp-month-primary-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)));--comp-month-primary-font-color:var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--tct-white, var(--app-white, #ffffff))));--comp-month-primary-background:var(--tct-btn-secondary-background, var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc)));--comp-month-secondary-font-color:var(--tct-btn-secondary-font-color, var(--t-btn-secondary-font-color, var(--t-button-default-font-color, #2e2e2e)))}.month-container .navigation{display:flex;justify-content:space-between;flex-direction:row}.month-container .navigation .year-btn{padding:0 1rem;display:flex;align-items:center}.month-container .navigation .year-btn .year{margin-right:0.2rem}.month-container .navigation .year-btn .year-icon{--t-icon-stroke-width:2px;width:16px;height:16px;transition:all 0.3s ease-in-out}.month-container .navigation .year-btn .year-icon.on{transform:rotate(-180deg)}.month-container .navigation .month-controller{display:flex;align-items:center}.month-container .month-list{display:grid;grid-template-columns:auto auto auto}.month-container .month-list .month{display:flex;justify-content:center;align-items:center;padding:0.5rem 0}.month-container .month-list .month .month-button{border-radius:50%;aspect-ratio:1;width:50px;display:flex;justify-content:center;align-items:center}.month-container .month-list .month .month-button:hover{background:var(--comp-month-primary-background);color:var(--comp-month-secondary-font-color);cursor:pointer}.month-container .month-list .month .month-button:active,.month-container .month-list .month .month-button.active{background:var(--comp-month-primary-background);color:var(--comp-month-primary-font-color)}.month-container .today-label{padding:0.5rem 0;color:var(--tct-calendar-day-selected-outline-color, var(--t-calendar-day-selected-outline-color, var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))))}";
@@ -140,10 +140,10 @@ const Q2MonthPicker = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '6c9a7ca40d2a597f21e289b540f07900f2588cac', class: "month-container", onKeyDown: this.onMonthKeydown }, h("div", { key: 'bf2a873e6a183df04920eb603ef507eff82c89bd', class: "navigation" }, h("q2-btn", { key: '4eff95a05e80cfe5c0593d638fd82ca2a7954765', class: "year-btn", onClick: () => this.viewChange.emit({
+        return (h("div", { key: 'a79408285992125baf4ab6771f6501d79a6245df', class: "month-container", onKeyDown: this.onMonthKeydown }, h("div", { key: '857185b3278ee9b9f346686e587a39250130e532', class: "navigation" }, h("q2-btn", { key: 'f698f8ea247ba18ecd40d22c74c4247fa300cf3d', class: "year-btn", onClick: () => this.viewChange.emit({
                 view: 'year',
                 selectedYear: this.year,
-            }) }, h("span", { key: '69f3247510f67d368e1f15ce054cbfdb3d56901c', class: "year" }, this.year), h("q2-icon", { key: '281bdf4e671b05ea28aea658ae05ab11d3c4667d', class: "year-icon off", type: "chevron-down" })), h("div", { key: '9528cc408878d4f4839bed485fe5a46cb005f139', class: "month-controller" }, h("div", { key: '8d7330c4e3951a001203c5f08af7495b320da5c9', class: "cal-year-prev-next" }, h("q2-btn", { key: 'e725c2476177186c83ecdf31ca8ebfabb3c132c7', label: loc('tecton.element.calendar.previousYear'), "hide-label": true, class: "cal-nav-btn prev-year", "test-id": "previousYearButton", onClick: () => this.selectYear(this.year - 1) }, h("q2-icon", { key: '4a6b9d629c98cbdc248cfd66694cf610f2ca4423', type: "arrow-left" })), h("q2-btn", { key: '797eb8389dbffd0e1e2588d68799be8dc425ef85', label: loc('tecton.element.calendar.nextYear'), "hide-label": true, class: "cal-nav-btn next-year", "test-id": "nextYearButton", onClick: () => this.selectYear(this.year + 1) }, h("q2-icon", { key: 'c75dfb662cf8cf336b059650d24e8f22397dd9d5', type: "arrow-right" }))))), h("div", { key: '18b5c98c2bc3d4c9f353b79b99fbc76c91942724', class: "month-list", onClick: this.onMonthSelection }, this.months.map((month, index) => (h("div", { class: "month" }, h("span", { role: "button", class: "month-button", "data-index": index, "aria-label": month.label, tabindex: index === this.focusedIndex ? 0 : -1 }, month.abbr))))), this.today && (h("div", { key: '96451bd771873ee8643221db902dcf70bfa8df1c', class: "today-label" }, loc('tecton.element.calendar.today'), ": ", this.today))));
+            }) }, h("span", { key: 'fc467f87579a2a1c90c72e22aa49715ed4130d22', class: "year" }, this.year), h("q2-icon", { key: '545d4a90b2c57ef0109475746f963a879c4d69d8', class: "year-icon off", type: "chevron-down" })), h("div", { key: '1b1c130e07944ab988e981f41b3351237a638f7e', class: "month-controller" }, h("div", { key: '5967309b329f2f0697a26a69d91dfb50b0a6d526', class: "cal-year-prev-next" }, h("q2-btn", { key: '23295dbba205dd04a809511501b49b74bd845f16', label: loc('tecton.element.calendar.previousYear'), "hide-label": true, class: "cal-nav-btn prev-year", "test-id": "previousYearButton", onClick: () => this.selectYear(this.year - 1) }, h("q2-icon", { key: '845a1a049fe80fd08470cbaf1b530bcf41734c39', type: "arrow-left" })), h("q2-btn", { key: '2074d486e8a0d00cee2ac874230ff2411444f669', label: loc('tecton.element.calendar.nextYear'), "hide-label": true, class: "cal-nav-btn next-year", "test-id": "nextYearButton", onClick: () => this.selectYear(this.year + 1) }, h("q2-icon", { key: '97699d8fa0378afa468bbb71e8bce6ccb9e78423', type: "arrow-right" }))))), h("div", { key: 'f373f6a783137aca3691fdfdc70bea04d487b63e', class: "month-list", onClick: this.onMonthSelection }, this.months.map((month, index) => (h("div", { class: "month" }, h("span", { role: "button", class: "month-button", "data-index": index, "aria-label": month.label, tabindex: index === this.focusedIndex ? 0 : -1 }, month.abbr))))), this.today && (h("div", { key: 'b85641400c0c17171278735aa8e8b81f2497ac27', class: "today-label" }, loc('tecton.element.calendar.today'), ": ", this.today))));
     }
     get hostElement() { return getElement(this); }
 };

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

@@ -90,7 +90,7 @@ const Q2MutationObserver = class {
     // #endregion
     // #region Render Methods
     render() {
-        return h("slot", { key: '882a16f7f965dd3c85869936ecdab64217efa25b', onSlotchange: this.handleSlotChange });
+        return h("slot", { key: 'b383eb3c2f5d2983f3658f776bd52736b4b6f9a5', onSlotchange: this.handleSlotChange });
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, g as getElement } from './index-CGkHOjh1.js';
 import { b as hasValidAncestor } from './component-DVxzK3WH.js';
-import { c as createGuid, l as loc } from './index-B4WYBDS9.js';
+import { c as createGuid, l as loc } from './index-C4PILj1_.js';
 const q2OptgroupCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}.q2-optgroup-header{--comp-header-padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--tct-optgroup-header-background, var(--tct-optgroup-header-bg, var(--t-optgroup-header-bg, var(--t-base, #FFFFFF))));color:var(--tct-optgroup-header-color, inherit);font-size:var(--tct-optgroup-header-font-size, 14px);font-weight:var(--tct-optgroup-header-font-weight, 600);letter-spacing:var(--tct-optgroup-header-letter-spacing, inherit);position:var(--tct-optgroup-header-position, sticky);padding:var(--tct-optgroup-header-padding, var(--t-optgroup-header-padding, var(--comp-header-padding)));text-transform:var(--tct-optgroup-header-text-transform, var(--t-optgroup-header-text-transform, none));top:calc(var(--comp-popover-top-container-height, 0px) + var(--tct-optgroup-top, var(--t-optgroup-top, 0px)));z-index:5}";
@@ -54,7 +54,7 @@ const Q2Optgroup = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '7ac63412ab9d8377d9d3c7a21220ceabc81ff2a1', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: '090eb5417eb5a1d90328a54e30ef58b5f6bc89ca', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: '30c5b85521eb8b9415f7e98e6c7cbc9ec0eece6d', class: "q2-optgroup-options" }, h("slot", { key: '46b22bd31621cb7380479adb650aed10db2151ad' }))));
+        return (h("div", { key: '03ea146fc88b43ccd10050cffb20c95bcc64c565', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: '4738ff37a955e7d742a634ce7f043bdfc9f9720d', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: '5f387ec9d47194ee11415a3c91f01ea5b2107822', class: "q2-optgroup-options" }, h("slot", { key: '765abe9037d131fa65f5c4ace78de0282c2e17a1' }))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/q2-option.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CGkHOjh1.js';
-import { p as getAllText, l as loc } from './index-B4WYBDS9.js';
+import { p as getAllText, l as loc } from './index-C4PILj1_.js';
 import { b as hasValidAncestor } from './component-DVxzK3WH.js';
 const q2OptionCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host(:not([separator]):not([separator=false])){--comp-padding:0 var(--app-scale-2x, 10px);--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));padding:var(--tct-option-padding, var(--t-option-padding, var(--comp-padding)));min-height:44px;align-items:center;cursor:pointer;align-items:center}:host(:focus),:host(:not([separator]):not([separator=false]):hover),:host([active]){position:relative;z-index:1}:host([multiline]){--comp-padding:var(--app-scale-2, 10px) var(--app-scale-2, 10px);--comp-selected-icon-size:var(--tct-option-selected-multiline-icon-size, var(--t-option-selected-multiline-icon-size, var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, 26px))))}:host([_hide-selected-block]:not([_hide-selected-block=false])){grid-template-columns:1fr;grid-template-areas:\"content\"}:host(:not([_hide-selected-block])){grid-template-areas:\"icon content\";grid-template-columns:var(--comp-selected-icon-size) 1fr;gap:var(--tct-scale-1, var(--app-scale-1x, 5px))}:host([aria-disabled]){cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4));pointer-events:none}:host([aria-hidden]){display:none}:host(:not([hidden]):not([aria-hidden])){display:grid}:host([separator]:not([separator=false])){display:block}:host(:not([aria-disabled]):not([separator]):not([separator=false]):hover),:host([active]),:host(:focus){background:var(--tct-option-active-background, var(--tct-option-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));color:var(--tct-option-active-color, inherit)}:host(:focus-visible){box-shadow:var(--tct-option-focus-box-shadow, var(--const-inset-double-focus-ring, inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC)))) !important}q2-icon{grid-area:icon;--tct-icon-size:var(--comp-selected-icon-size)}::slotted(q2-item){padding:var(--app-scale-1x, 5px) 0}.content{display:block;grid-area:content;font-size:var(--tct-option-content-font-size, inherit)}:host(:not([multiline])) .content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.separator{--comp-default-separator-margin:0 var(--tct-scale-1, var(--app-scale-3x, 15px));margin:var(--tct-dropdown-separator-margin, var(--t-dropdown-separator-margin, var(--comp-default-separator-margin)));border-bottom:1px solid var(--tct-dropdown-item-separator-color, var(--t-gray-11, #cccccc))}";

package/dist/esm/q2-pagination.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-CGkHOjh1.js';
-import { n as nextPaint, o as overrideFocus, i as isEventFromElement, l as loc } from './index-B4WYBDS9.js';
+import { n as nextPaint, o as overrideFocus, i as isEventFromElement, l as loc } from './index-C4PILj1_.js';
 import { m as mirrorEmit } from './mirror-emit-DUjY_ucm.js';
 const q2PaginationCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:flex;width:100%}:host([alignment=right]){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));color:var(--tct-pagination-color, inherit);font-size:var(--tct-pagination-font-size, inherit);font-weight:var(--tct-pagination-font-weight, inherit)}.container.stacked{flex-direction:column;column-gap:0;row-gap:var(--tct-pagination-row-gap, var(--app-scale-2x, 10px));height:auto;align-items:stretch}.container.stacked .description{text-align:center}.container.stacked .controls{justify-content:center}.container.stacked .per-page{display:flex;justify-content:center}.container.stacked q2-select{--tct-select-margin:0;width:var(--tct-pagination-perpage-width, 60%)}.controls{display:flex}.btn-group{display:flex;gap:var(--tct-pagination-btn-gap, var(--t-pagination-btn-gap, 0))}.description,.input-display{white-space:nowrap}.input-display{display:grid;grid-template-columns:auto var(--tct-pagination-input-width, 50px) auto;align-items:center;gap:var(--tct-pagination-controls-gap, var(--t-pagination-controls-gap, var(--app-scale-1x, 5px)))}.input-display[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));--tct-btn-icon-hover-background:var(--tct-pagination-btn-hover-background, var(--app-gray-l3, #f2f2f2));--tct-icon-stroke-primary:var(--tct-pagination-btn-icon-stroke-primary, var(--app-gray, #747474));--tct-icon-stroke-secondary:var(--tct-pagination-btn-icon-stroke-secondary, var(--app-gray, #747474))}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))}";
@@ -41,13 +41,15 @@ const Q2Pagination = class {
             if (!this.hostElement.onchange) {
                 this.page = page;
             }
-            mirrorEmit(this, ['change', 'tctChange'], { page });
+            mirrorEmit(this, ['change', 'tctChange'], { page, perPage: this.perPageWithDefault });
         };
         this.handlePerPageChange = (event) => {
             var _a;
             if (this.disabled)
                 return;
-            this.perPage = (((_a = event.detail) === null || _a === void 0 ? void 0 : _a.value) || this.perPage) * 1;
+            const perPage = (((_a = event.detail) === null || _a === void 0 ? void 0 : _a.value) || this.perPage) * 1;
+            this.perPage = perPage;
+            mirrorEmit(this, ['change', 'tctChange'], { page: this.pageWithDefault, perPage });
         };
     }
     // #endregion
@@ -275,7 +277,10 @@ const Q2Pagination = class {
         if (this.perPage === undefined || isNaN(this.perPage))
             this.perPage = increments[0];
         this.perPageIncrements = `[${increments.join(',')}]`;
-        return (h("q2-select", { ref: el => (this.perPageSelect = el), onTctChange: this.handlePerPageChange, value: this.perPageIncrementsArray.includes(this.perPage) ? `${this.perPage}` : undefined, disabled: this.disabled }, increments.map(perPage => (h("q2-option", { value: `${perPage}`, display: `${loc('tecton.element.pagination.view')} ${perPage}` }, `${loc('tecton.element.pagination.view')} ${perPage}`)))));
+        return (h("q2-select", { ref: el => (this.perPageSelect = el), onChange: e => e.stopImmediatePropagation(), onTctChange: event => {
+                event.stopPropagation();
+                this.handlePerPageChange(event);
+            }, value: this.perPageIncrementsArray.includes(this.perPage) ? `${this.perPage}` : undefined, disabled: this.disabled }, increments.map(perPage => (h("q2-option", { value: `${perPage}`, display: `${loc('tecton.element.pagination.view')} ${perPage}` }, `${loc('tecton.element.pagination.view')} ${perPage}`)))));
     }
     render() {
         var _a;
@@ -300,7 +305,7 @@ const Q2Pagination = class {
                 total,
             });
         }
-        return (h("nav", { key: 'f4e39c1ce3dc25c39562e845cf5ff7ba1d609b56', class: this.containerClasses.join(' '), ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: 'aa881258550b4067150811d7cd30a0031dd64e6a', class: "description", "test-id": "description" }, pagesOnly
+        return (h("nav", { key: 'f99b44d19603ae3981ef849748ef6163fc45919b', class: this.containerClasses.join(' '), ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: 'd1643de16462d1f16fc252eeed2e568e246648a1', class: "description", "test-id": "description" }, pagesOnly
             ? loc('tecton.element.pagination.pages', {
                 current: page,
                 total: totalPages,
@@ -309,10 +314,10 @@ const Q2Pagination = class {
                 range: currentRange,
                 recordType: recordType.toLowerCase(),
                 total: total.toLocaleString(),
-            })), h("div", { key: '52bd34c12ea01bd9a83e69cc35508e17fe40ce45', class: "controls" }, h("div", { key: 'e57c54c60820b4df9a6badb8e55c4632fe7d0d04', class: "btn-group" }, h("q2-btn", { key: 'e77ad67216aa245359649019a3d258175b2d27a0', ref: el => (this.firstPageBtn = el), label: loc('tecton.element.pagination.goToFirstPage'), disabled: disabled || onFirstPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { key: 'c6f055bca0eca35e3c47c4c92512f6bb1ca3fbdd', type: "chevron-double-left" })), h("q2-btn", { key: 'd248cba128baece5cee143bb27855cefad77d5c2', ref: el => (this.prevPageBtn = el), label: prevButtonLabel, disabled: disabled || onFirstPage, onTctClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: '6069dc7e9f1ce2555607c3016df4a531af75f0c5', type: "chevron-left" }))), h("div", { key: '3df46a7091a37782cfab31fd71c74618cb2cb312', class: "input-display", hidden: isFullViewHidden }, h("span", { key: 'd35ade02558182338e28e07e5844c82e05097f87', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: '0c39a6f581d8c13919cfd24c26579d8847512d97', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: '362f1e33bed25340f8e3885ad88b525121173cfa', ref: el => (this.inputField = el), type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${loc('tecton.element.pagination.page')} (${loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onTctChange: event => {
+            })), h("div", { key: '6ffec6ee2128172163a381f76d9e06fe82c7316b', class: "controls" }, h("div", { key: 'decc2ca51ad2365a07ffd112c1d1726e174b5d0c', class: "btn-group" }, h("q2-btn", { key: '7b85578c7595c4285c995c5e5359f6c441bdda51', ref: el => (this.firstPageBtn = el), label: loc('tecton.element.pagination.goToFirstPage'), disabled: disabled || onFirstPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { key: '550559c6d68876121fb3aaa87414e4adb11f4429', type: "chevron-double-left" })), h("q2-btn", { key: '6bf47805cabef90404a66317fc4bff10921818bd', ref: el => (this.prevPageBtn = el), label: prevButtonLabel, disabled: disabled || onFirstPage, onTctClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: 'cd7e55771f9de549a7729236df927274745825b9', type: "chevron-left" }))), h("div", { key: '730078a28d7d555bfed57381b972e54c8059a556', class: "input-display", hidden: isFullViewHidden }, h("span", { key: '35b93b8034569d72bf0670d73f7ce1ec0fef826e', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: 'd28c27c41044573a0fb1adf2b8a89ef582c5aa98', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: '28bf16274c57944a7a7132dd29a2e606d9f6c108', ref: el => (this.inputField = el), type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${loc('tecton.element.pagination.page')} (${loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => event.stopImmediatePropagation(), onTctChange: event => {
                 event.stopPropagation();
                 this.handlePageChange(event.detail.value);
-            }, "test-id": "pageInput", current: "page", disabled: disabled })), h("span", { key: '311db5a963079c39e94add265fe99674b3003f60', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: '474293c51d17f20e9919135a868e81947d51bf25', class: "btn-group" }, h("q2-btn", { key: 'c6b4fbc3b37c1b5cf408681b016b6fd5fcc206ac', ref: el => (this.nextPageBtn = el), label: nextButtonLabel, disabled: disabled || onLastPage, onTctClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: '5b14a31c4ebf2af1b5fb4d5b06c15f24ffe0d5db', type: "chevron-right" })), h("q2-btn", { key: 'cc65d89ff1193c506106e3375b5b495c28f590df', ref: el => (this.lastPageBtn = el), label: "tecton.element.pagination.goToLastPage", disabled: disabled || onLastPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { key: '48a061a715ca19b8bac38866c6c24d1eaf6d7e93', type: "chevron-double-right" })))), h("div", { key: '5e7767e6f8c05ff0be869499e0d4753fd7edc91c', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, showPerPageSelect && this.renderPerPage())));
+            }, "test-id": "pageInput", current: "page", disabled: disabled })), h("span", { key: '5fc845812367d39bf91826657da31f39436fc670', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: '73183db09f66cad393b33571260579720f2e8c12', class: "btn-group" }, h("q2-btn", { key: 'c3daf5fd49273bede94ce2a9994309d282f1bdbf', ref: el => (this.nextPageBtn = el), label: nextButtonLabel, disabled: disabled || onLastPage, onTctClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: '427474ab8f77a0e314a687bb00d199858234f30d', type: "chevron-right" })), h("q2-btn", { key: '607732d95674f7620423817e7394ec4e88ac6e9b', ref: el => (this.lastPageBtn = el), label: "tecton.element.pagination.goToLastPage", disabled: disabled || onLastPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { key: 'ff871b93e2f4932eddde86761f126fb6937b43fb', type: "chevron-double-right" })))), h("div", { key: '506a9fd9aa1790d1a2efb7b8a744a8fc1d76a409', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, showPerPageSelect && this.renderPerPage())));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {