npm - q2-tecton-elements - Versions diffs - 1.59.1 → 1.60.1 - Mend

q2-tecton-elements 1.59.1 → 1.60.1

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-card.entry.esm.js","sources":["src/components/q2-card/q2-card.scss?tag=q2-card&encapsulation=shadow","src/components/q2-card/q2-card.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: block;\n}\n\n.container {\n position: relative;\n width: 100%;\n text-align: start;\n height: var-list(--tct-card-height, 100%);\n min-height: var-list(--tct-card-min-height, auto);\n display: grid;\n gap: var-list(var-prefixer(card-gap), --app-scale-3x, 15px);\n margin: 0;\n color: var-list(var-prefixer(card-color), --t-text, #4d4d4d);\n backdrop-filter: var(--tct-card-backdrop-filter);\n\n --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 44px)};\n --comp-chevron-size: 0;\n --comp-bar-width: #{var-list(var-prefixer(card-bar-width), --app-scale-2x, 10px)};\n --comp-card-padding: #{var-list(var-prefixer(card-padding), --app-scale-4x, 20px)};\n\n &.is-small {\n --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 26px)};\n }\n &.has-avatar {\n grid-template-columns: var(--comp-avatar-size) 1fr;\n --tct-avatar-width: var(--comp-avatar-size);\n --tct-avatar-height: var(--comp-avatar-size);\n --tct-icon-size: var(--comp-avatar-size);\n }\n\n :host([bar][is-static]) & {\n padding-left: var(--comp-card-padding);\n }\n\n :host(:not([is-static])) & {\n --comp-border-radius: #{var-list(var-prefixer(card-border-radius), --app-border-radius-1, 4px)};\n --comp-border-width: #{var-list(var-prefixer(card-border-width), 0px)};\n border: none;\n background: var-list(var-prefixer(card-background), --t-base, #ffffff);\n padding: var(--comp-card-padding);\n text-decoration: none;\n border-width: var(--comp-border-width);\n border-color: var-list(var-prefixer(card-border-color), transparent);\n border-style: var-list(--tct-card-border-style, solid);\n border-radius: var(--comp-border-radius);\n transition: box-shadow var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n box-shadow: var-list(var-prefixer(card-box-shadow), --app-shadow-2, unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)\"));\n\n &.clickable {\n cursor: pointer;\n @media (hover: hover) {\n --comp-card-hover-box-shadow: #{var-list(\n var-prefixer(card-hover-box-shadow),\n --app-shadow-3,\n unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)\")\n )};\n\n &:hover,\n &:active,\n &:focus-visible {\n color: var-list(var-prefixer(card-color), --t-text, #4d4d4d);\n box-shadow: var(--const-double-focus-ring);\n }\n\n &:hover {\n box-shadow: var(--comp-card-hover-box-shadow);\n }\n\n &:focus:hover {\n box-shadow: var(--const-double-focus-ring), var(--comp-card-hover-box-shadow);\n }\n\n &:active {\n box-shadow: var-list(\n var-prefixer(card-active-box-shadow),\n --app-shadow-1,\n unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)\")\n );\n }\n }\n }\n\n &.is-touch {\n --comp-chevron-size: #{var-list(var-prefixer(card-chevron-size), 26px)};\n grid-template-columns: 1fr var(--comp-chevron-size);\n }\n\n &.has-avatar.is-touch {\n grid-template-columns: var(--comp-avatar-size) 1fr var(--comp-chevron-size);\n }\n }\n}\n\n.content {\n overflow: hidden;\n display: grid;\n gap: var-list(var-prefixer(card-content-gap), --app-scale-1x, 5px);\n align-content: start;\n}\n\nh3,\np {\n margin: 0;\n padding: 0;\n line-height: var-list(var-prefixer(card-font-height), 20px);\n}\n\nh3 {\n font-weight: var-list(var-prefixer(card-font-weight), 600);\n font-size: var-list(var-prefixer(card-font-size), 17px);\n @include line-clamp(var(--tct-card-title-line-count, 1));\n}\n\np {\n @include line-clamp(var(--tct-card-description-line-count, 2));\n}\n\n.bar {\n --comp-bar-border-radius: calc(var(--comp-border-radius) - var(--comp-border-width));\n border-radius: var(--comp-bar-border-radius) 0 0 var(--comp-bar-border-radius);\n position: absolute;\n inset: 0 auto auto 0;\n width: var(--comp-bar-width);\n background: var(--comp-bar-color);\n height: 100%;\n\n &.color-primary {\n --comp-bar-color: #{var-list(--tct-card-bar-color-primary, --t-primary, #5446a4)};\n }\n\n &.color-secondary {\n --comp-bar-color: #{var-list(--tct-card-bar-color-secondary, --t-secondary, #b6b3cc)};\n }\n\n &.color-tertiary {\n --comp-bar-color: #{var-list(--tct-card-bar-color-tertiary, --t-tertiary, #ebe8fc)};\n }\n\n &.color-info {\n --comp-bar-color: #{var-list(--tct-card-bar-color-info, --const-stoplight-info, #0079c1)};\n }\n\n &.color-success {\n --comp-bar-color: #{var-list(--tct-card-bar-color-success, --const-stoplight-success, #0e8a00)};\n }\n\n &.color-warning {\n --comp-bar-color: #{var-list(--tct-card-bar-color-warning, --const-stoplight-warning, #c35500)};\n }\n\n &.color-alert {\n --comp-bar-color: #{var-list(--tct-card-bar-color-alert, --const-stoplight-alert, #c35500)};\n }\n\n &.color-accent-1 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-1, --t-accent-1, #e05252)};\n }\n\n &.color-accent-2 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-2, --t-accent-2, #e09952)};\n }\n\n &.color-accent-3 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-3, --t-accent-3, #e0e052)};\n }\n\n &.color-accent-4 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-4, --t-accent-4, #99e052)};\n }\n\n &.color-accent-5 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-5, --t-accent-5, #52e052)};\n }\n\n &.color-accent-6 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-6, --t-accent-6, #52e099)};\n }\n\n &.color-accent-7 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-7, --t-accent-7, #52e0e0)};\n }\n\n &.color-accent-8 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-8, --t-accent-8, #5299e0)};\n }\n\n &.color-accent-9 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-9, --t-accent-9, #5252e0)};\n }\n\n &.color-accent-10 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-10, --t-accent-10, #9952e0)};\n }\n\n &.color-accent-11 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-11, --t-accent-11, #e052e0)};\n }\n\n &.color-accent-12 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-12, --t-accent-12, #e05299)};\n }\n}\n\n.touch-indicator {\n align-self: center;\n --tct-icon-size: var(--comp-chevron-size);\n}\n","import {\n Component,\n ComponentInterface,\n Prop,\n Event,\n h,\n Fragment,\n Listen,\n Element,\n EventEmitter,\n State,\n} from '@stencil/core';\nimport { isTouchDevice, overrideFocus, isEventFromElement } from 'src/utils';\nconst PREDEFINED_COLORS = [\n 'primary',\n 'secondary',\n 'tertiary',\n 'info',\n 'success',\n 'warning',\n 'alert',\n 'accent-1',\n 'accent-2',\n 'accent-3',\n 'accent-4',\n 'accent-5',\n 'accent-6',\n 'accent-7',\n 'accent-8',\n 'accent-9',\n 'accent-10',\n 'accent-11',\n 'accent-12',\n];\n\n@Component({ tag: 'q2-card', shadow: true, styleUrl: 'q2-card.scss' })\nexport class Q2Card implements ComponentInterface {\n // #region Own Properties\n\n avatarElement: HTMLElement;\n clickableElement: HTMLElement;\n containerElement: HTMLElement;\n resizeObserver: ResizeObserver;\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 isAutoSmall: boolean = false;\n\n @State()\n isAutoTouch: boolean = false;\n\n // #endregion\n // #region Public Property API\n\n /** The [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to be displayed in the avatar location. /\n @Prop({ reflect: true })\n avatarIcon: string;\n\n /* The initials to be placed in the avatar of the card. /\n @Prop({ reflect: true })\n avatarInitials: string;\n\n /* The name to be used for the avatar of the card which will be converted to initials. /\n @Prop({ reflect: true })\n avatarName: string;\n\n /* The source of the image to be displayed in the avatar location. /\n @Prop({ reflect: true })\n avatarSrc: string;\n\n /\n Indicates that a bar should be displayed and which color to use. Predefined colors that may be used as values are:\n \n - primary\n * - secondary\n * - tertiary\n * - info\n * - success\n * - warning\n * - alert\n * - accent-1\n * - accent-2\n * - accent-3\n * - accent-4\n * - accent-5\n * - accent-6\n * - accent-7\n * - accent-8\n * - accent-9\n * - accent-10\n * - accent-11\n * - accent-12\n \n Any other value (e.g. `\"#990000\"`, `\"purple\"`) will be treated as a custom color.\n /\n @Prop({ reflect: true })\n bar: string;\n\n /* The description of the card (truncated after two lines). /\n @Prop({ reflect: true })\n description: string;\n\n /\n Display the card with a view optimized for smaller displays.\n \n @info\n * This will be determined automatically if the attribute is not manually provided.\n /\n @Prop({ reflect: true })\n isSmall: boolean;\n\n /* Display the card with no borders, padding, drop-shadows, or clickable behavior. /\n @Prop({ reflect: true })\n isStatic: boolean;\n\n /\n Display the card with a view optimized for touch displays.\n \n @info\n * This will be determined automatically if the attribute is not manually provided.\n /\n @Prop({ reflect: true })\n isTouch: boolean = isTouchDevice();\n\n /* Target to be applied to the link when a URL is provided. /\n @Prop({ reflect: true })\n target: '_self' \| '_blank' \| '_parent' \| '_top';\n\n /* The title of the card. /\n @Prop({ reflect: true })\n title: string;\n\n /* Alters the interactive behavior of the card while maintaining visual appearance. /\n @Prop({ reflect: true })\n type: 'clickable' \| 'non-clickable' = 'clickable';\n\n /* URL to navigate the user to when the card is clicked. /\n @Prop({ reflect: true })\n url: string;\n\n // #endregion\n // #region Events\n\n /* Emitted when the card is clicked and the `url` property is not provided. */\n @Event()\n click: EventEmitter<undefined>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n this.resizeObserver = null;\n }\n\n componentDidLoad() {\n const { hostElement, clickableElement } = this;\n hostElement.click = () => clickableElement.click();\n overrideFocus(this.hostElement);\n\n this.resizeObserver = new ResizeObserver(() => this.determineAutoSmall());\n this.resizeObserver.observe(this.hostElement);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('focus')\n onHostElementFocus(event) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.clickableElement.focus();\n }\n\n // #endregion\n // #region Local Methods\n\n determineAutoSmall() {\n if (this.isStatic) return;\n if (this.hostElement.hasAttribute('is-small')) return;\n const { containerElement, avatarElement } = this;\n const avatarWidth = avatarElement?.offsetWidth ?? 0;\n const containerWidth = containerElement?.offsetWidth ?? 0;\n const totalWidth = avatarWidth + containerWidth;\n this.isAutoSmall = totalWidth < 350;\n }\n\n determineAutoTouch() {\n if (this.hostElement.hasAttribute('is-touch')) return;\n this.isAutoTouch = isTouchDevice();\n }\n\n generateAvatar() {\n const { avatarName, avatarInitials, avatarSrc, avatarIcon } = this;\n\n if (avatarIcon) {\n return (\n <q2-icon\n type={avatarIcon}\n ref={e => (this.avatarElement = e)}\n test-id=\"avatar\"\n ></q2-icon>\n );\n } else if (avatarName \|\| avatarInitials \|\| avatarSrc) {\n return (\n <q2-avatar\n name={avatarName}\n initials={avatarInitials}\n src={avatarSrc}\n ref={e => (this.avatarElement = e)}\n test-id=\"avatar\"\n ></q2-avatar>\n );\n }\n }\n\n generateContainerClasses() {\n const {\n isSmall,\n isAutoSmall,\n avatarName,\n avatarInitials,\n avatarSrc,\n avatarIcon,\n isTouch,\n isAutoTouch,\n isStatic,\n type,\n } = this;\n const result = ['container', type];\n const showSmall = isSmall \|\| isAutoSmall;\n const showTouch = isTouch \|\| isAutoTouch;\n const hasAvatar = avatarName \|\| avatarInitials \|\| avatarSrc \|\| avatarIcon;\n if (showSmall) result.push('is-small');\n if (showTouch && !isStatic) result.push('is-touch');\n if (hasAvatar) result.push('has-avatar');\n if (isStatic) result.push('is-static');\n\n return result.join(' ');\n }\n\n generateContent() {\n return (\n <Fragment>\n {this.bar && (\n <div\n class={this.getBarClasses()}\n test-id=\"bar\"\n style={this.getBarStyles()}\n ></div>\n )}\n {this.generateAvatar()}\n <div\n class=\"content\"\n test-id=\"contentContainer\"\n ref={e => (this.containerElement = e)}\n >\n {this.title && <h3 test-id=\"title\">{this.title}</h3>}\n {this.description && <p test-id=\"description\">{this.description}</p>}\n <slot />\n </div>\n {this.isTouch && !this.isStatic && (\n <q2-icon\n test-id=\"touchIndicator\"\n type=\"chevron-right\"\n class=\"touch-indicator\"\n ></q2-icon>\n )}\n </Fragment>\n );\n }\n\n getBarClasses() {\n const { bar } = this;\n\n return {\n bar: true,\n [`color-${bar}`]: this.isBarColorPredefined(),\n };\n }\n\n getBarStyles() {\n const { bar } = this;\n\n return this.isBarColorPredefined() ? {} : { '--comp-bar-color': bar };\n }\n\n handleClick = (event: MouseEvent) => {\n if (this.url) return true;\n event.preventDefault();\n event.stopPropagation();\n this.click.emit();\n };\n\n isBarColorPredefined() {\n return PREDEFINED_COLORS.includes(this.bar);\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { url, isStatic, type } = this;\n if (isStatic \|\| type === 'non-clickable')\n return (\n <div\n ref={e => (this.clickableElement = e)}\n class={this.generateContainerClasses()}\n test-id=\"clickableElement\"\n >\n {this.generateContent()}\n </div>\n );\n else if (!!url)\n return (\n <a\n ref={e => (this.clickableElement = e)}\n href={this.url}\n class={this.generateContainerClasses()}\n target={this.target}\n rel=\"noopener noreferrer\"\n test-id=\"clickableElement\"\n onClick={this.handleClick}\n >\n {this.generateContent()}\n </a>\n );\n else\n return (\n <button\n ref={e => (this.clickableElement = e)}\n class={this.generateContainerClasses()}\n test-id=\"clickableElement\"\n type=\"button\"\n onClick={this.handleClick}\n >\n {this.generateContent()}\n </button>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"q2-card.entry.esm.js","sources":["src/components/q2-card/q2-card.scss?tag=q2-card&encapsulation=shadow","src/components/q2-card/q2-card.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: block;\n}\n\n.container {\n position: relative;\n width: 100%;\n text-align: start;\n height: var-list(--tct-card-height, 100%);\n min-height: var-list(--tct-card-min-height, auto);\n display: grid;\n gap: var-list(var-prefixer(card-gap), --app-scale-3x, 15px);\n margin: 0;\n color: var-list(--tct-card-font-color, var-prefixer(card-color), --t-text, #4d4d4d);\n backdrop-filter: var(--tct-card-backdrop-filter);\n\n --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 44px)};\n --comp-chevron-size: 0;\n --comp-bar-width: #{var-list(var-prefixer(card-bar-width), --app-scale-2x, 10px)};\n --comp-card-padding: #{var-list(var-prefixer(card-padding), --app-scale-4x, 20px)};\n\n &.is-small {\n --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 26px)};\n }\n &.has-avatar {\n grid-template-columns: var(--comp-avatar-size) 1fr;\n --tct-avatar-width: var(--comp-avatar-size);\n --tct-avatar-height: var(--comp-avatar-size);\n --tct-icon-size: var(--comp-avatar-size);\n }\n\n :host([bar][is-static]) & {\n padding-left: var(--comp-card-padding);\n }\n\n :host([is-static]:not([is-static='false'])) & {\n background: var-list(--tct-card-static-background, var-prefixer(card-background), --t-base, #ffffff);\n color: var-list(--tct-card-static-font-color, var-prefixer(card-color), --t-text, #4d4d4d);\n }\n\n :host(:not([is-static])) & {\n --comp-border-radius: #{var-list(var-prefixer(card-border-radius), --app-border-radius-1, 4px)};\n --comp-border-width: #{var-list(var-prefixer(card-border-width), 0px)};\n border: none;\n background: var-list(var-prefixer(card-background), --t-base, #ffffff);\n backdrop-filter: var-list(--tct-card-backdrop-filter, none);\n padding: var(--comp-card-padding);\n text-decoration: none;\n border-width: var(--comp-border-width);\n border-color: var-list(var-prefixer(card-border-color), transparent);\n border-style: var-list(--tct-card-border-style, solid);\n border-radius: var(--comp-border-radius);\n transition: box-shadow var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n box-shadow: var-list(\n var-prefixer(card-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 &.clickable {\n cursor: pointer;\n @media (hover: hover) {\n --comp-card-hover-box-shadow: #{var-list(\n var-prefixer(card-hover-box-shadow),\n --app-shadow-3,\n unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)')\n )};\n\n &:focus-visible {\n color: var-list(var-prefixer(card-color), --t-text, #4d4d4d);\n box-shadow: var-list(--tct-card-focus-visible-box-shadow, --const-double-focus-ring);\n }\n\n &:hover {\n box-shadow: var(--comp-card-hover-box-shadow);\n }\n\n &:active {\n box-shadow: var-list(\n var-prefixer(card-active-box-shadow),\n --app-shadow-1,\n unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')\n );\n }\n }\n }\n\n &.is-touch {\n --comp-chevron-size: #{var-list(var-prefixer(card-chevron-size), 26px)};\n grid-template-columns: 1fr var(--comp-chevron-size);\n }\n\n &.has-avatar.is-touch {\n grid-template-columns: var(--comp-avatar-size) 1fr var(--comp-chevron-size);\n }\n }\n}\n\n.content {\n overflow: hidden;\n display: grid;\n gap: var-list(var-prefixer(card-content-gap), --app-scale-1x, 5px);\n align-content: start;\n}\n\nh3,\np {\n margin: 0;\n padding: 0;\n line-height: var-list(var-prefixer(card-font-height), 20px);\n}\n\nh3 {\n font-weight: var-list(var-prefixer(card-font-weight), 600);\n font-size: var-list(var-prefixer(card-font-size), 17px);\n @include line-clamp(var(--tct-card-title-line-count, 1));\n}\n\np {\n @include line-clamp(var(--tct-card-description-line-count, 2));\n}\n\n.bar {\n --comp-bar-border-radius: calc(var(--comp-border-radius) - var(--comp-border-width));\n border-radius: var(--comp-bar-border-radius) 0 0 var(--comp-bar-border-radius);\n position: absolute;\n inset: 0 auto auto 0;\n width: var(--comp-bar-width);\n background: var(--comp-bar-color);\n height: 100%;\n\n &.color-primary {\n --comp-bar-color: #{var-list(--tct-card-bar-color-primary, --t-primary, #5446a4)};\n }\n\n &.color-secondary {\n --comp-bar-color: #{var-list(--tct-card-bar-color-secondary, --t-secondary, #b6b3cc)};\n }\n\n &.color-tertiary {\n --comp-bar-color: #{var-list(--tct-card-bar-color-tertiary, --t-tertiary, #ebe8fc)};\n }\n\n &.color-info {\n --comp-bar-color: #{var-list(--tct-card-bar-color-info, --const-stoplight-info, #0079c1)};\n }\n\n &.color-success {\n --comp-bar-color: #{var-list(--tct-card-bar-color-success, --const-stoplight-success, #0e8a00)};\n }\n\n &.color-warning {\n --comp-bar-color: #{var-list(--tct-card-bar-color-warning, --const-stoplight-warning, #c35500)};\n }\n\n &.color-alert {\n --comp-bar-color: #{var-list(--tct-card-bar-color-alert, --const-stoplight-alert, #c35500)};\n }\n\n &.color-accent-1 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-1, --t-accent-1, #e05252)};\n }\n\n &.color-accent-2 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-2, --t-accent-2, #e09952)};\n }\n\n &.color-accent-3 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-3, --t-accent-3, #e0e052)};\n }\n\n &.color-accent-4 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-4, --t-accent-4, #99e052)};\n }\n\n &.color-accent-5 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-5, --t-accent-5, #52e052)};\n }\n\n &.color-accent-6 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-6, --t-accent-6, #52e099)};\n }\n\n &.color-accent-7 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-7, --t-accent-7, #52e0e0)};\n }\n\n &.color-accent-8 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-8, --t-accent-8, #5299e0)};\n }\n\n &.color-accent-9 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-9, --t-accent-9, #5252e0)};\n }\n\n &.color-accent-10 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-10, --t-accent-10, #9952e0)};\n }\n\n &.color-accent-11 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-11, --t-accent-11, #e052e0)};\n }\n\n &.color-accent-12 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-12, --t-accent-12, #e05299)};\n }\n}\n\n.touch-indicator {\n align-self: center;\n --tct-icon-size: var(--comp-chevron-size);\n}\n","import {\n Component,\n ComponentInterface,\n Prop,\n Event,\n h,\n Fragment,\n Listen,\n Element,\n EventEmitter,\n State,\n} from '@stencil/core';\nimport { isTouchDevice, overrideFocus, isEventFromElement } from 'src/utils';\nconst PREDEFINED_COLORS = [\n 'primary',\n 'secondary',\n 'tertiary',\n 'info',\n 'success',\n 'warning',\n 'alert',\n 'accent-1',\n 'accent-2',\n 'accent-3',\n 'accent-4',\n 'accent-5',\n 'accent-6',\n 'accent-7',\n 'accent-8',\n 'accent-9',\n 'accent-10',\n 'accent-11',\n 'accent-12',\n];\n\n@Component({ tag: 'q2-card', shadow: true, styleUrl: 'q2-card.scss' })\nexport class Q2Card implements ComponentInterface {\n // #region Own Properties\n\n avatarElement: HTMLElement;\n clickableElement: HTMLElement;\n containerElement: HTMLElement;\n resizeObserver: ResizeObserver;\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 isAutoSmall: boolean = false;\n\n @State()\n isAutoTouch: boolean = false;\n\n // #endregion\n // #region Public Property API\n\n /** The [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to be displayed in the avatar location. /\n @Prop({ reflect: true })\n avatarIcon: string;\n\n /* The initials to be placed in the avatar of the card. /\n @Prop({ reflect: true })\n avatarInitials: string;\n\n /* The name to be used for the avatar of the card which will be converted to initials. /\n @Prop({ reflect: true })\n avatarName: string;\n\n /* The source of the image to be displayed in the avatar location. /\n @Prop({ reflect: true })\n avatarSrc: string;\n\n /\n Indicates that a bar should be displayed and which color to use. Predefined colors that may be used as values are:\n \n - primary\n * - secondary\n * - tertiary\n * - info\n * - success\n * - warning\n * - alert\n * - accent-1\n * - accent-2\n * - accent-3\n * - accent-4\n * - accent-5\n * - accent-6\n * - accent-7\n * - accent-8\n * - accent-9\n * - accent-10\n * - accent-11\n * - accent-12\n \n Any other value (e.g. `\"#990000\"`, `\"purple\"`) will be treated as a custom color.\n /\n @Prop({ reflect: true })\n bar: string;\n\n /* The description of the card (truncated after two lines). /\n @Prop({ reflect: true })\n description: string;\n\n /\n Display the card with a view optimized for smaller displays.\n \n @info\n * This will be determined automatically if the attribute is not manually provided.\n /\n @Prop({ reflect: true })\n isSmall: boolean;\n\n /* Display the card with no borders, padding, drop-shadows, or clickable behavior. /\n @Prop({ reflect: true })\n isStatic: boolean;\n\n /\n Display the card with a view optimized for touch displays.\n \n @info\n * This will be determined automatically if the attribute is not manually provided.\n /\n @Prop({ reflect: true })\n isTouch: boolean = isTouchDevice();\n\n /* Target to be applied to the link when a URL is provided. /\n @Prop({ reflect: true })\n target: '_self' \| '_blank' \| '_parent' \| '_top';\n\n /* The title of the card. /\n @Prop({ reflect: true })\n title: string;\n\n /* Alters the interactive behavior of the card while maintaining visual appearance. /\n @Prop({ reflect: true })\n type: 'clickable' \| 'non-clickable' = 'clickable';\n\n /* URL to navigate the user to when the card is clicked. /\n @Prop({ reflect: true })\n url: string;\n\n // #endregion\n // #region Events\n\n /* Emitted when the card is clicked and the `url` property is not provided. */\n @Event()\n click: EventEmitter<undefined>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n this.resizeObserver = null;\n }\n\n componentDidLoad() {\n const { hostElement, clickableElement } = this;\n hostElement.click = () => clickableElement.click();\n overrideFocus(this.hostElement);\n\n this.resizeObserver = new ResizeObserver(() => this.determineAutoSmall());\n this.resizeObserver.observe(this.hostElement);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('focus')\n onHostElementFocus(event) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.clickableElement.focus();\n }\n\n // #endregion\n // #region Local Methods\n\n determineAutoSmall() {\n if (this.isStatic) return;\n if (this.hostElement.hasAttribute('is-small')) return;\n const { containerElement, avatarElement } = this;\n const avatarWidth = avatarElement?.offsetWidth ?? 0;\n const containerWidth = containerElement?.offsetWidth ?? 0;\n const totalWidth = avatarWidth + containerWidth;\n this.isAutoSmall = totalWidth < 350;\n }\n\n determineAutoTouch() {\n if (this.hostElement.hasAttribute('is-touch')) return;\n this.isAutoTouch = isTouchDevice();\n }\n\n generateAvatar() {\n const { avatarName, avatarInitials, avatarSrc, avatarIcon } = this;\n\n if (avatarIcon) {\n return (\n <q2-icon\n type={avatarIcon}\n ref={e => (this.avatarElement = e)}\n test-id=\"avatar\"\n ></q2-icon>\n );\n } else if (avatarName \|\| avatarInitials \|\| avatarSrc) {\n return (\n <q2-avatar\n name={avatarName}\n initials={avatarInitials}\n src={avatarSrc}\n ref={e => (this.avatarElement = e)}\n test-id=\"avatar\"\n ></q2-avatar>\n );\n }\n }\n\n generateContainerClasses() {\n const {\n isSmall,\n isAutoSmall,\n avatarName,\n avatarInitials,\n avatarSrc,\n avatarIcon,\n isTouch,\n isAutoTouch,\n isStatic,\n type,\n } = this;\n const result = ['container', type];\n const showSmall = isSmall \|\| isAutoSmall;\n const showTouch = isTouch \|\| isAutoTouch;\n const hasAvatar = avatarName \|\| avatarInitials \|\| avatarSrc \|\| avatarIcon;\n if (showSmall) result.push('is-small');\n if (showTouch && !isStatic) result.push('is-touch');\n if (hasAvatar) result.push('has-avatar');\n if (isStatic) result.push('is-static');\n\n return result.join(' ');\n }\n\n generateContent() {\n return (\n <Fragment>\n {this.bar && (\n <div\n class={this.getBarClasses()}\n test-id=\"bar\"\n style={this.getBarStyles()}\n ></div>\n )}\n {this.generateAvatar()}\n <div\n class=\"content\"\n test-id=\"contentContainer\"\n ref={e => (this.containerElement = e)}\n >\n {this.title && <h3 test-id=\"title\">{this.title}</h3>}\n {this.description && <p test-id=\"description\">{this.description}</p>}\n <slot />\n </div>\n {this.isTouch && !this.isStatic && (\n <q2-icon\n test-id=\"touchIndicator\"\n type=\"chevron-right\"\n class=\"touch-indicator\"\n ></q2-icon>\n )}\n </Fragment>\n );\n }\n\n getBarClasses() {\n const { bar } = this;\n\n return {\n bar: true,\n [`color-${bar}`]: this.isBarColorPredefined(),\n };\n }\n\n getBarStyles() {\n const { bar } = this;\n\n return this.isBarColorPredefined() ? {} : { '--comp-bar-color': bar };\n }\n\n handleClick = (event: MouseEvent) => {\n if (this.url) return true;\n event.preventDefault();\n event.stopPropagation();\n this.click.emit();\n };\n\n isBarColorPredefined() {\n return PREDEFINED_COLORS.includes(this.bar);\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { url, isStatic, type } = this;\n if (isStatic \|\| type === 'non-clickable')\n return (\n <div\n ref={e => (this.clickableElement = e)}\n class={this.generateContainerClasses()}\n test-id=\"clickableElement\"\n >\n {this.generateContent()}\n </div>\n );\n else if (!!url)\n return (\n <a\n ref={e => (this.clickableElement = e)}\n href={this.url}\n class={this.generateContainerClasses()}\n target={this.target}\n rel=\"noopener noreferrer\"\n test-id=\"clickableElement\"\n onClick={this.handleClick}\n >\n {this.generateContent()}\n </a>\n );\n else\n return (\n <button\n ref={e => (this.clickableElement = e)}\n class={this.generateContainerClasses()}\n test-id=\"clickableElement\"\n type=\"button\"\n onClick={this.handleClick}\n >\n {this.generateContent()}\n </button>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,SAAS,GAAG,k2NAAk2N;;ACap3N,MAAM,iBAAiB,GAAG;IACtB,SAAS;IACT,WAAW;IACX,UAAU;IACV,MAAM;IACN,SAAS;IACT,SAAS;IACT,OAAO;IACP,UAAU;IACV,UAAU;IACV,UAAU;IACV,UAAU;IACV,UAAU;IACV,UAAU;IACV,UAAU;IACV,UAAU;IACV,UAAU;IACV,WAAW;IACX,WAAW;IACX,WAAW;CACd;MAGY,MAAM,GAAA,MAAA;AADnB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;AAmBI,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAG5B,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAkE5B;;;;;AAKG;AAEH,QAAA,IAAO,CAAA,OAAA,GAAY,aAAa,EAAE;;AAYlC,QAAA,IAAI,CAAA,IAAA,GAAkC,WAAW;AAwJjD,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAiB,KAAI;YAChC,IAAI,IAAI,CAAC,GAAG;AAAE,gBAAA,OAAO,IAAI;YACzB,KAAK,CAAC,cAAc,EAAE;YACtB,KAAK,CAAC,eAAe,EAAE;AACvB,YAAA,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE;AACrB,SAAC;AAkDJ;;;IA/LG,oBAAoB,GAAA;;QAChB,CAAA,EAAA,GAAA,IAAI,CAAC,cAAc,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,EAAE;AACjC,QAAA,IAAI,CAAC,cAAc,GAAG,IAAI;;IAG9B,gBAAgB,GAAA;AACZ,QAAA,MAAM,EAAE,WAAW,EAAE,gBAAgB,EAAE,GAAG,IAAI;QAC9C,WAAW,CAAC,KAAK,GAAG,MAAM,gBAAgB,CAAC,KAAK,EAAE;AAClD,QAAA,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC;AAE/B,QAAA,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,MAAM,IAAI,CAAC,kBAAkB,EAAE,CAAC;QACzE,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC;;;;AAOjD,IAAA,kBAAkB,CAAC,KAAK,EAAA;QACpB,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;YAAE;AAClD,QAAA,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE;;;;IAMjC,kBAAkB,GAAA;;QACd,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,IAAI,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,UAAU,CAAC;YAAE;AAC/C,QAAA,MAAM,EAAE,gBAAgB,EAAE,aAAa,EAAE,GAAG,IAAI;AAChD,QAAA,MAAM,WAAW,GAAG,CAAA,EAAA,GAAA,aAAa,KAAb,IAAA,IAAA,aAAa,KAAb,MAAA,GAAA,MAAA,GAAA,aAAa,CAAE,WAAW,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,CAAC;AACnD,QAAA,MAAM,cAAc,GAAG,CAAA,EAAA,GAAA,gBAAgB,KAAhB,IAAA,IAAA,gBAAgB,KAAhB,MAAA,GAAA,MAAA,GAAA,gBAAgB,CAAE,WAAW,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,CAAC;AACzD,QAAA,MAAM,UAAU,GAAG,WAAW,GAAG,cAAc;AAC/C,QAAA,IAAI,CAAC,WAAW,GAAG,UAAU,GAAG,GAAG;;IAGvC,kBAAkB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,UAAU,CAAC;YAAE;AAC/C,QAAA,IAAI,CAAC,WAAW,GAAG,aAAa,EAAE;;IAGtC,cAAc,GAAA;QACV,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,IAAI;QAElE,IAAI,UAAU,EAAE;AACZ,YAAA,QACI,eACI,IAAI,EAAE,UAAU,EAChB,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,EAC1B,SAAA,EAAA,QAAQ,EACT,CAAA;;AAEZ,aAAA,IAAI,UAAU,IAAI,cAAc,IAAI,SAAS,EAAE;AAClD,YAAA,QACI,CAAA,CAAA,WAAA,EAAA,EACI,IAAI,EAAE,UAAU,EAChB,QAAQ,EAAE,cAAc,EACxB,GAAG,EAAE,SAAS,EACd,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,EAAA,SAAA,EAC1B,QAAQ,EAAA,CACP;;;IAKzB,wBAAwB,GAAA;QACpB,MAAM,EACF,OAAO,EACP,WAAW,EACX,UAAU,EACV,cAAc,EACd,SAAS,EACT,UAAU,EACV,OAAO,EACP,WAAW,EACX,QAAQ,EACR,IAAI,GACP,GAAG,IAAI;AACR,QAAA,MAAM,MAAM,GAAG,CAAC,WAAW,EAAE,IAAI,CAAC;AAClC,QAAA,MAAM,SAAS,GAAG,OAAO,IAAI,WAAW;AACxC,QAAA,MAAM,SAAS,GAAG,OAAO,IAAI,WAAW;QACxC,MAAM,SAAS,GAAG,UAAU,IAAI,cAAc,IAAI,SAAS,IAAI,UAAU;AACzE,QAAA,IAAI,SAAS;AAAE,YAAA,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;QACtC,IAAI,SAAS,IAAI,CAAC,QAAQ;AAAE,YAAA,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;AACnD,QAAA,IAAI,SAAS;AAAE,YAAA,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC;AACxC,QAAA,IAAI,QAAQ;AAAE,YAAA,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC;AAEtC,QAAA,OAAO,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;;IAG3B,eAAe,GAAA;AACX,QAAA,QACI,EAAC,QAAQ,EAAA,IAAA,EACJ,IAAI,CAAC,GAAG,KACL,WACI,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EACnB,SAAA,EAAA,KAAK,EACb,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,EAAA,CACvB,CACV,EACA,IAAI,CAAC,cAAc,EAAE,EACtB,CAAA,CAAA,KAAA,EAAA,EACI,KAAK,EAAC,SAAS,aACP,kBAAkB,EAC1B,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,EAAA,EAEpC,IAAI,CAAC,KAAK,IAAI,CAAA,CAAA,IAAA,EAAA,EAAA,SAAA,EAAY,OAAO,EAAE,EAAA,IAAI,CAAC,KAAK,CAAM,EACnD,IAAI,CAAC,WAAW,IAAI,CAAA,CAAA,GAAA,EAAA,EAAA,SAAA,EAAW,aAAa,EAAE,EAAA,IAAI,CAAC,WAAW,CAAK,EACpE,CAAA,CAAA,MAAA,EAAA,IAAA,CAAQ,CACN,EACL,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,KAC3B,CACY,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,gBAAgB,EACxB,IAAI,EAAC,eAAe,EACpB,KAAK,EAAC,iBAAiB,EAChB,CAAA,CACd,CACM;;IAInB,aAAa,GAAA;AACT,QAAA,MAAM,EAAE,GAAG,EAAE,GAAG,IAAI;QAEpB,OAAO;AACH,YAAA,GAAG,EAAE,IAAI;YACT,CAAC,CAAA,MAAA,EAAS,GAAG,CAAE,CAAA,GAAG,IAAI,CAAC,oBAAoB,EAAE;SAChD;;IAGL,YAAY,GAAA;AACR,QAAA,MAAM,EAAE,GAAG,EAAE,GAAG,IAAI;AAEpB,QAAA,OAAO,IAAI,CAAC,oBAAoB,EAAE,GAAG,EAAE,GAAG,EAAE,kBAAkB,EAAE,GAAG,EAAE;;IAUzE,oBAAoB,GAAA;QAChB,OAAO,iBAAiB,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC;;;;IAM/C,MAAM,GAAA;QACF,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,IAAI;AACpC,QAAA,IAAI,QAAQ,IAAI,IAAI,KAAK,eAAe;AACpC,YAAA,QACI,CAAA,CAAA,KAAA,EAAA,EACI,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,EACrC,KAAK,EAAE,IAAI,CAAC,wBAAwB,EAAE,EAC9B,SAAA,EAAA,kBAAkB,EAEzB,EAAA,IAAI,CAAC,eAAe,EAAE,CACrB;aAET,IAAI,CAAC,CAAC,GAAG;AACV,YAAA,QACI,CACI,CAAA,GAAA,EAAA,EAAA,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,EACrC,IAAI,EAAE,IAAI,CAAC,GAAG,EACd,KAAK,EAAE,IAAI,CAAC,wBAAwB,EAAE,EACtC,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAC,qBAAqB,EACjB,SAAA,EAAA,kBAAkB,EAC1B,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EAExB,IAAI,CAAC,eAAe,EAAE,CACvB;;YAGR,QACI,CACI,CAAA,QAAA,EAAA,EAAA,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,EACrC,KAAK,EAAE,IAAI,CAAC,wBAAwB,EAAE,aAC9B,kBAAkB,EAC1B,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,WAAW,IAExB,IAAI,CAAC,eAAe,EAAE,CAClB;;;;;;;;"}

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

@@ -1,14 +1,14 @@
-import { r as t, c as a, h as r, F as c, g as o } from "./index-COzomxjJ.js";
+import { r, c as a, h as t, F as c, g as o } from "./index-CGkHOjh1.js";
-import { i as e, o as i, a as s } from "./index-CkXFIBxL.js";
+import { i as e, o as i, a as s } from "./index-xCuy-dFb.js";
-const n = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}.container{position:relative;width:100%;text-align:start;height:var(--tct-card-height, 100%);min-height:var(--tct-card-min-height, auto);display:grid;gap:var(--tct-card-gap, var(--t-card-gap, var(--app-scale-3x, 15px)));margin:0;color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));backdrop-filter:var(--tct-card-backdrop-filter);--comp-avatar-size:var(--tct-card-avatar-size, var(--t-card-avatar-size, 44px));--comp-chevron-size:0;--comp-bar-width:var(--tct-card-bar-width, var(--t-card-bar-width, var(--app-scale-2x, 10px)));--comp-card-padding:var(--tct-card-padding, var(--t-card-padding, var(--app-scale-4x, 20px)))}.container.is-small{--comp-avatar-size:var(--tct-card-avatar-size, var(--t-card-avatar-size, 26px))}.container.has-avatar{grid-template-columns:var(--comp-avatar-size) 1fr;--tct-avatar-width:var(--comp-avatar-size);--tct-avatar-height:var(--comp-avatar-size);--tct-icon-size:var(--comp-avatar-size)}:host([bar][is-static]) .container{padding-left:var(--comp-card-padding)}:host(:not([is-static])) .container{--comp-border-radius:var(--tct-card-border-radius, var(--t-card-border-radius, var(--app-border-radius-1, 4px)));--comp-border-width:var(--tct-card-border-width, var(--t-card-border-width, 0px));border:none;background:var(--tct-card-background, var(--t-card-background, var(--t-base, #ffffff)));padding:var(--comp-card-padding);text-decoration:none;border-width:var(--comp-border-width);border-color:var(--tct-card-border-color, var(--t-card-border-color, transparent));border-style:var(--tct-card-border-style, solid);border-radius:var(--comp-border-radius);transition:box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));box-shadow:var(--tct-card-box-shadow, var(--t-card-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14))))}:host(:not([is-static])) .container.clickable{cursor:pointer}@media (hover: hover){:host(:not([is-static])) .container.clickable{--comp-card-hover-box-shadow:var(--tct-card-hover-box-shadow, var(--t-card-hover-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14))))}:host(:not([is-static])) .container.clickable:hover,:host(:not([is-static])) .container.clickable:active,:host(:not([is-static])) .container.clickable:focus-visible{color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));box-shadow:var(--const-double-focus-ring)}:host(:not([is-static])) .container.clickable:hover{box-shadow:var(--comp-card-hover-box-shadow)}:host(:not([is-static])) .container.clickable:focus:hover{box-shadow:var(--const-double-focus-ring), var(--comp-card-hover-box-shadow)}:host(:not([is-static])) .container.clickable:active{box-shadow:var(--tct-card-active-box-shadow, var(--t-card-active-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}}:host(:not([is-static])) .container.is-touch{--comp-chevron-size:var(--tct-card-chevron-size, var(--t-card-chevron-size, 26px));grid-template-columns:1fr var(--comp-chevron-size)}:host(:not([is-static])) .container.has-avatar.is-touch{grid-template-columns:var(--comp-avatar-size) 1fr var(--comp-chevron-size)}.content{overflow:hidden;display:grid;gap:var(--tct-card-content-gap, var(--t-card-content-gap, var(--app-scale-1x, 5px)));align-content:start}h3,p{margin:0;padding:0;line-height:var(--tct-card-font-height, var(--t-card-font-height, 20px))}h3{font-weight:var(--tct-card-font-weight, var(--t-card-font-weight, 600));font-size:var(--tct-card-font-size, var(--t-card-font-size, 17px));text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-card-title-line-count, 1);-webkit-box-orient:vertical}p{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-card-description-line-count, 2);-webkit-box-orient:vertical}.bar{--comp-bar-border-radius:calc(var(--comp-border-radius) - var(--comp-border-width));border-radius:var(--comp-bar-border-radius) 0 0 var(--comp-bar-border-radius);position:absolute;inset:0 auto auto 0;width:var(--comp-bar-width);background:var(--comp-bar-color);height:100%}.bar.color-primary{--comp-bar-color:var(--tct-card-bar-color-primary, var(--t-primary, #5446a4))}.bar.color-secondary{--comp-bar-color:var(--tct-card-bar-color-secondary, var(--t-secondary, #b6b3cc))}.bar.color-tertiary{--comp-bar-color:var(--tct-card-bar-color-tertiary, var(--t-tertiary, #ebe8fc))}.bar.color-info{--comp-bar-color:var(--tct-card-bar-color-info, var(--const-stoplight-info, #0079c1))}.bar.color-success{--comp-bar-color:var(--tct-card-bar-color-success, var(--const-stoplight-success, #0e8a00))}.bar.color-warning{--comp-bar-color:var(--tct-card-bar-color-warning, var(--const-stoplight-warning, #c35500))}.bar.color-alert{--comp-bar-color:var(--tct-card-bar-color-alert, var(--const-stoplight-alert, #c35500))}.bar.color-accent-1{--comp-bar-color:var(--tct-card-bar-color-accent-1, var(--t-accent-1, #e05252))}.bar.color-accent-2{--comp-bar-color:var(--tct-card-bar-color-accent-2, var(--t-accent-2, #e09952))}.bar.color-accent-3{--comp-bar-color:var(--tct-card-bar-color-accent-3, var(--t-accent-3, #e0e052))}.bar.color-accent-4{--comp-bar-color:var(--tct-card-bar-color-accent-4, var(--t-accent-4, #99e052))}.bar.color-accent-5{--comp-bar-color:var(--tct-card-bar-color-accent-5, var(--t-accent-5, #52e052))}.bar.color-accent-6{--comp-bar-color:var(--tct-card-bar-color-accent-6, var(--t-accent-6, #52e099))}.bar.color-accent-7{--comp-bar-color:var(--tct-card-bar-color-accent-7, var(--t-accent-7, #52e0e0))}.bar.color-accent-8{--comp-bar-color:var(--tct-card-bar-color-accent-8, var(--t-accent-8, #5299e0))}.bar.color-accent-9{--comp-bar-color:var(--tct-card-bar-color-accent-9, var(--t-accent-9, #5252e0))}.bar.color-accent-10{--comp-bar-color:var(--tct-card-bar-color-accent-10, var(--t-accent-10, #9952e0))}.bar.color-accent-11{--comp-bar-color:var(--tct-card-bar-color-accent-11, var(--t-accent-11, #e052e0))}.bar.color-accent-12{--comp-bar-color:var(--tct-card-bar-color-accent-12, var(--t-accent-12, #e05299))}.touch-indicator{align-self:center;--tct-icon-size:var(--comp-chevron-size)}";
+const n = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}.container{position:relative;width:100%;text-align:start;height:var(--tct-card-height, 100%);min-height:var(--tct-card-min-height, auto);display:grid;gap:var(--tct-card-gap, var(--t-card-gap, var(--app-scale-3x, 15px)));margin:0;color:var(--tct-card-font-color, var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d))));backdrop-filter:var(--tct-card-backdrop-filter);--comp-avatar-size:var(--tct-card-avatar-size, var(--t-card-avatar-size, 44px));--comp-chevron-size:0;--comp-bar-width:var(--tct-card-bar-width, var(--t-card-bar-width, var(--app-scale-2x, 10px)));--comp-card-padding:var(--tct-card-padding, var(--t-card-padding, var(--app-scale-4x, 20px)))}.container.is-small{--comp-avatar-size:var(--tct-card-avatar-size, var(--t-card-avatar-size, 26px))}.container.has-avatar{grid-template-columns:var(--comp-avatar-size) 1fr;--tct-avatar-width:var(--comp-avatar-size);--tct-avatar-height:var(--comp-avatar-size);--tct-icon-size:var(--comp-avatar-size)}:host([bar][is-static]) .container{padding-left:var(--comp-card-padding)}:host([is-static]:not([is-static=false])) .container{background:var(--tct-card-static-background, var(--tct-card-background, var(--t-card-background, var(--t-base, #ffffff))));color:var(--tct-card-static-font-color, var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d))))}:host(:not([is-static])) .container{--comp-border-radius:var(--tct-card-border-radius, var(--t-card-border-radius, var(--app-border-radius-1, 4px)));--comp-border-width:var(--tct-card-border-width, var(--t-card-border-width, 0px));border:none;background:var(--tct-card-background, var(--t-card-background, var(--t-base, #ffffff)));backdrop-filter:var(--tct-card-backdrop-filter, none);padding:var(--comp-card-padding);text-decoration:none;border-width:var(--comp-border-width);border-color:var(--tct-card-border-color, var(--t-card-border-color, transparent));border-style:var(--tct-card-border-style, solid);border-radius:var(--comp-border-radius);transition:box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));box-shadow:var(--tct-card-box-shadow, var(--t-card-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14))))}:host(:not([is-static])) .container.clickable{cursor:pointer}@media (hover: hover){:host(:not([is-static])) .container.clickable{--comp-card-hover-box-shadow:var(--tct-card-hover-box-shadow, var(--t-card-hover-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14))))}:host(:not([is-static])) .container.clickable:focus-visible{color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));box-shadow:var(--tct-card-focus-visible-box-shadow, var(--const-double-focus-ring))}:host(:not([is-static])) .container.clickable:hover{box-shadow:var(--comp-card-hover-box-shadow)}:host(:not([is-static])) .container.clickable:active{box-shadow:var(--tct-card-active-box-shadow, var(--t-card-active-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}}:host(:not([is-static])) .container.is-touch{--comp-chevron-size:var(--tct-card-chevron-size, var(--t-card-chevron-size, 26px));grid-template-columns:1fr var(--comp-chevron-size)}:host(:not([is-static])) .container.has-avatar.is-touch{grid-template-columns:var(--comp-avatar-size) 1fr var(--comp-chevron-size)}.content{overflow:hidden;display:grid;gap:var(--tct-card-content-gap, var(--t-card-content-gap, var(--app-scale-1x, 5px)));align-content:start}h3,p{margin:0;padding:0;line-height:var(--tct-card-font-height, var(--t-card-font-height, 20px))}h3{font-weight:var(--tct-card-font-weight, var(--t-card-font-weight, 600));font-size:var(--tct-card-font-size, var(--t-card-font-size, 17px));text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-card-title-line-count, 1);-webkit-box-orient:vertical}p{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-card-description-line-count, 2);-webkit-box-orient:vertical}.bar{--comp-bar-border-radius:calc(var(--comp-border-radius) - var(--comp-border-width));border-radius:var(--comp-bar-border-radius) 0 0 var(--comp-bar-border-radius);position:absolute;inset:0 auto auto 0;width:var(--comp-bar-width);background:var(--comp-bar-color);height:100%}.bar.color-primary{--comp-bar-color:var(--tct-card-bar-color-primary, var(--t-primary, #5446a4))}.bar.color-secondary{--comp-bar-color:var(--tct-card-bar-color-secondary, var(--t-secondary, #b6b3cc))}.bar.color-tertiary{--comp-bar-color:var(--tct-card-bar-color-tertiary, var(--t-tertiary, #ebe8fc))}.bar.color-info{--comp-bar-color:var(--tct-card-bar-color-info, var(--const-stoplight-info, #0079c1))}.bar.color-success{--comp-bar-color:var(--tct-card-bar-color-success, var(--const-stoplight-success, #0e8a00))}.bar.color-warning{--comp-bar-color:var(--tct-card-bar-color-warning, var(--const-stoplight-warning, #c35500))}.bar.color-alert{--comp-bar-color:var(--tct-card-bar-color-alert, var(--const-stoplight-alert, #c35500))}.bar.color-accent-1{--comp-bar-color:var(--tct-card-bar-color-accent-1, var(--t-accent-1, #e05252))}.bar.color-accent-2{--comp-bar-color:var(--tct-card-bar-color-accent-2, var(--t-accent-2, #e09952))}.bar.color-accent-3{--comp-bar-color:var(--tct-card-bar-color-accent-3, var(--t-accent-3, #e0e052))}.bar.color-accent-4{--comp-bar-color:var(--tct-card-bar-color-accent-4, var(--t-accent-4, #99e052))}.bar.color-accent-5{--comp-bar-color:var(--tct-card-bar-color-accent-5, var(--t-accent-5, #52e052))}.bar.color-accent-6{--comp-bar-color:var(--tct-card-bar-color-accent-6, var(--t-accent-6, #52e099))}.bar.color-accent-7{--comp-bar-color:var(--tct-card-bar-color-accent-7, var(--t-accent-7, #52e0e0))}.bar.color-accent-8{--comp-bar-color:var(--tct-card-bar-color-accent-8, var(--t-accent-8, #5299e0))}.bar.color-accent-9{--comp-bar-color:var(--tct-card-bar-color-accent-9, var(--t-accent-9, #5252e0))}.bar.color-accent-10{--comp-bar-color:var(--tct-card-bar-color-accent-10, var(--t-accent-10, #9952e0))}.bar.color-accent-11{--comp-bar-color:var(--tct-card-bar-color-accent-11, var(--t-accent-11, #e052e0))}.bar.color-accent-12{--comp-bar-color:var(--tct-card-bar-color-accent-12, var(--t-accent-12, #e05299))}.touch-indicator{align-self:center;--tct-icon-size:var(--comp-chevron-size)}";
 const d = [ "primary", "secondary", "tertiary", "info", "success", "warning", "alert", "accent-1", "accent-2", "accent-3", "accent-4", "accent-5", "accent-6", "accent-7", "accent-8", "accent-9", "accent-10", "accent-11", "accent-12" ];
 const l = class {
-  constructor(r) {
-    t(this, r);
+  constructor(t) {
+    r(this, t);
     this.click = a(this, "click", 7);
     // #endregion
     // #region State Properties
@@ -21,42 +21,42 @@ const l = class {
          * This will be determined automatically if the attribute is not manually provided.
          */    this.isTouch = e();
     /** Alters the interactive behavior of the card while maintaining visual appearance. */    this.type = "clickable";
-    this.handleClick = t => {
+    this.handleClick = r => {
       if (this.url) return true;
-      t.preventDefault();
-      t.stopPropagation();
+      r.preventDefault();
+      r.stopPropagation();
       this.click.emit();
     };
   }
   // #endregion
   // #region Component Lifecycle Events
   disconnectedCallback() {
-    var t;
-    (t = this.resizeObserver) === null || t === void 0 ? void 0 : t.disconnect();
+    var r;
+    (r = this.resizeObserver) === null || r === void 0 ? void 0 : r.disconnect();
     this.resizeObserver = null;
   }
   componentDidLoad() {
-    const {hostElement: t, clickableElement: a} = this;
-    t.click = () => a.click();
+    const {hostElement: r, clickableElement: a} = this;
+    r.click = () => a.click();
     i(this.hostElement);
     this.resizeObserver = new ResizeObserver((() => this.determineAutoSmall()));
     this.resizeObserver.observe(this.hostElement);
   }
   // #endregion
   // #region Listeners
-  onHostElementFocus(t) {
-    if (!s(t, this.hostElement)) return;
+  onHostElementFocus(r) {
+    if (!s(r, this.hostElement)) return;
     this.clickableElement.focus();
   }
   // #endregion
   // #region Local Methods
   determineAutoSmall() {
-    var t, a;
+    var r, a;
     if (this.isStatic) return;
     if (this.hostElement.hasAttribute("is-small")) return;
-    const {containerElement: r, avatarElement: c} = this;
-    const o = (t = c === null || c === void 0 ? void 0 : c.offsetWidth) !== null && t !== void 0 ? t : 0;
-    const e = (a = r === null || r === void 0 ? void 0 : r.offsetWidth) !== null && a !== void 0 ? a : 0;
+    const {containerElement: t, avatarElement: c} = this;
+    const o = (r = c === null || c === void 0 ? void 0 : c.offsetWidth) !== null && r !== void 0 ? r : 0;
+    const e = (a = t === null || t === void 0 ? void 0 : t.offsetWidth) !== null && a !== void 0 ? a : 0;
     const i = o + e;
     this.isAutoSmall = i < 350;
   }
@@ -65,29 +65,29 @@ const l = class {
     this.isAutoTouch = e();
   }
   generateAvatar() {
-    const {avatarName: t, avatarInitials: a, avatarSrc: c, avatarIcon: o} = this;
+    const {avatarName: r, avatarInitials: a, avatarSrc: c, avatarIcon: o} = this;
     if (o) {
-      return r("q2-icon", {
+      return t("q2-icon", {
         type: o,
-        ref: t => this.avatarElement = t,
+        ref: r => this.avatarElement = r,
         "test-id": "avatar"
       });
-    } else if (t || a || c) {
-      return r("q2-avatar", {
-        name: t,
+    } else if (r || a || c) {
+      return t("q2-avatar", {
+        name: r,
         initials: a,
         src: c,
-        ref: t => this.avatarElement = t,
+        ref: r => this.avatarElement = r,
         "test-id": "avatar"
       });
     }
   }
   generateContainerClasses() {
-    const {isSmall: t, isAutoSmall: a, avatarName: r, avatarInitials: c, avatarSrc: o, avatarIcon: e, isTouch: i, isAutoTouch: s, isStatic: n, type: d} = this;
+    const {isSmall: r, isAutoSmall: a, avatarName: t, avatarInitials: c, avatarSrc: o, avatarIcon: e, isTouch: i, isAutoTouch: s, isStatic: n, type: d} = this;
     const l = [ "container", d ];
-    const v = t || a;
+    const v = r || a;
     const h = i || s;
-    const b = r || c || o || e;
+    const b = t || c || o || e;
     if (v) l.push("is-small");
     if (h && !n) l.push("is-touch");
     if (b) l.push("has-avatar");
@@ -95,35 +95,35 @@ const l = class {
     return l.join(" ");
   }
   generateContent() {
-    return r(c, null, this.bar && r("div", {
+    return t(c, null, this.bar && t("div", {
       class: this.getBarClasses(),
       "test-id": "bar",
       style: this.getBarStyles()
-    }), this.generateAvatar(), r("div", {
+    }), this.generateAvatar(), t("div", {
       class: "content",
       "test-id": "contentContainer",
-      ref: t => this.containerElement = t
-    }, this.title && r("h3", {
+      ref: r => this.containerElement = r
+    }, this.title && t("h3", {
       "test-id": "title"
-    }, this.title), this.description && r("p", {
+    }, this.title), this.description && t("p", {
       "test-id": "description"
-    }, this.description), r("slot", null)), this.isTouch && !this.isStatic && r("q2-icon", {
+    }, this.description), t("slot", null)), this.isTouch && !this.isStatic && t("q2-icon", {
       "test-id": "touchIndicator",
       type: "chevron-right",
       class: "touch-indicator"
     }));
   }
   getBarClasses() {
-    const {bar: t} = this;
+    const {bar: r} = this;
     return {
       bar: true,
-      [`color-${t}`]: this.isBarColorPredefined()
+      [`color-${r}`]: this.isBarColorPredefined()
     };
   }
   getBarStyles() {
-    const {bar: t} = this;
+    const {bar: r} = this;
     return this.isBarColorPredefined() ? {} : {
-      "--comp-bar-color": t
+      "--comp-bar-color": r
     };
   }
   isBarColorPredefined() {
@@ -132,21 +132,21 @@ const l = class {
   // #endregion
   // #region Render Methods
   render() {
-    const {url: t, isStatic: a, type: c} = this;
-    if (a || c === "non-clickable") return r("div", {
-      ref: t => this.clickableElement = t,
+    const {url: r, isStatic: a, type: c} = this;
+    if (a || c === "non-clickable") return t("div", {
+      ref: r => this.clickableElement = r,
       class: this.generateContainerClasses(),
       "test-id": "clickableElement"
-    }, this.generateContent()); else if (!!t) return r("a", {
-      ref: t => this.clickableElement = t,
+    }, this.generateContent()); else if (!!r) return t("a", {
+      ref: r => this.clickableElement = r,
       href: this.url,
       class: this.generateContainerClasses(),
       target: this.target,
       rel: "noopener noreferrer",
       "test-id": "clickableElement",
       onClick: this.handleClick
-    }, this.generateContent()); else return r("button", {
-      ref: t => this.clickableElement = t,
+    }, this.generateContent()); else return t("button", {
+      ref: r => this.clickableElement = r,
       class: this.generateContainerClasses(),
       "test-id": "clickableElement",
       type: "button",

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

	@@ -1 +1 @@
1	- {"version":3,"names":["q2CardCss","PREDEFINED_COLORS","Q2Card","constructor","hostRef","this","isAutoSmall","isAutoTouch","isTouch","isTouchDevice","type","handleClick","event","url","preventDefault","stopPropagation","click","emit","disconnectedCallback","_a","resizeObserver","disconnect","componentDidLoad","hostElement","clickableElement","overrideFocus","ResizeObserver","determineAutoSmall","observe","onHostElementFocus","isEventFromElement","focus","isStatic","hasAttribute","containerElement","avatarElement","avatarWidth","offsetWidth","containerWidth","_b","totalWidth","determineAutoTouch","generateAvatar","avatarName","avatarInitials","avatarSrc","avatarIcon","h","ref","e","name","initials","src","generateContainerClasses","isSmall","result","showSmall","showTouch","hasAvatar","push","join","generateContent","Fragment","bar","class","getBarClasses","style","getBarStyles","title","description","isBarColorPredefined","includes","render","href","target","rel","onClick"],"sources":["src/components/q2-card/q2-card.scss?tag=q2-card&encapsulation=shadow","src/components/q2-card/q2-card.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: block;\n}\n\n.container {\n position: relative;\n width: 100%;\n text-align: start;\n height: var-list(--tct-card-height, 100%);\n min-height: var-list(--tct-card-min-height, auto);\n display: grid;\n gap: var-list(var-prefixer(card-gap), --app-scale-3x, 15px);\n margin: 0;\n color: var-list(var-prefixer(card-color), --t-text, #4d4d4d);\n backdrop-filter: var(--tct-card-backdrop-filter);\n\n --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 44px)};\n --comp-chevron-size: 0;\n --comp-bar-width: #{var-list(var-prefixer(card-bar-width), --app-scale-2x, 10px)};\n --comp-card-padding: #{var-list(var-prefixer(card-padding), --app-scale-4x, 20px)};\n\n &.is-small {\n --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 26px)};\n }\n &.has-avatar {\n grid-template-columns: var(--comp-avatar-size) 1fr;\n --tct-avatar-width: var(--comp-avatar-size);\n --tct-avatar-height: var(--comp-avatar-size);\n --tct-icon-size: var(--comp-avatar-size);\n }\n\n :host([bar][is-static]) & {\n padding-left: var(--comp-card-padding);\n }\n\n :host(:not([is-static])) & {\n --comp-border-radius: #{var-list(var-prefixer(card-border-radius), --app-border-radius-1, 4px)};\n --comp-border-width: #{var-list(var-prefixer(card-border-width), 0px)};\n border: none;\n background: var-list(var-prefixer(card-background), --t-base, #ffffff);\n padding: var(--comp-card-padding);\n text-decoration: none;\n border-width: var(--comp-border-width);\n border-color: var-list(var-prefixer(card-border-color), transparent);\n border-style: var-list(--tct-card-border-style, solid);\n border-radius: var(--comp-border-radius);\n transition: box-shadow var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n box-shadow: var-list(var-prefixer(card-box-shadow), --app-shadow-2, unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)\"));\n\n &.clickable {\n cursor: pointer;\n @media (hover: hover) {\n --comp-card-hover-box-shadow: #{var-list(\n var-prefixer(card-hover-box-shadow),\n --app-shadow-3,\n unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)\")\n )};\n\n &:hover,\n &:active,\n &:focus-visible {\n color: var-list(var-prefixer(card-color), --t-text, #4d4d4d);\n box-shadow: var(--const-double-focus-ring);\n }\n\n &:hover {\n box-shadow: var(--comp-card-hover-box-shadow);\n }\n\n &:focus:hover {\n box-shadow: var(--const-double-focus-ring), var(--comp-card-hover-box-shadow);\n }\n\n &:active {\n box-shadow: var-list(\n var-prefixer(card-active-box-shadow),\n --app-shadow-1,\n unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)\")\n );\n }\n }\n }\n\n &.is-touch {\n --comp-chevron-size: #{var-list(var-prefixer(card-chevron-size), 26px)};\n grid-template-columns: 1fr var(--comp-chevron-size);\n }\n\n &.has-avatar.is-touch {\n grid-template-columns: var(--comp-avatar-size) 1fr var(--comp-chevron-size);\n }\n }\n}\n\n.content {\n overflow: hidden;\n display: grid;\n gap: var-list(var-prefixer(card-content-gap), --app-scale-1x, 5px);\n align-content: start;\n}\n\nh3,\np {\n margin: 0;\n padding: 0;\n line-height: var-list(var-prefixer(card-font-height), 20px);\n}\n\nh3 {\n font-weight: var-list(var-prefixer(card-font-weight), 600);\n font-size: var-list(var-prefixer(card-font-size), 17px);\n @include line-clamp(var(--tct-card-title-line-count, 1));\n}\n\np {\n @include line-clamp(var(--tct-card-description-line-count, 2));\n}\n\n.bar {\n --comp-bar-border-radius: calc(var(--comp-border-radius) - var(--comp-border-width));\n border-radius: var(--comp-bar-border-radius) 0 0 var(--comp-bar-border-radius);\n position: absolute;\n inset: 0 auto auto 0;\n width: var(--comp-bar-width);\n background: var(--comp-bar-color);\n height: 100%;\n\n &.color-primary {\n --comp-bar-color: #{var-list(--tct-card-bar-color-primary, --t-primary, #5446a4)};\n }\n\n &.color-secondary {\n --comp-bar-color: #{var-list(--tct-card-bar-color-secondary, --t-secondary, #b6b3cc)};\n }\n\n &.color-tertiary {\n --comp-bar-color: #{var-list(--tct-card-bar-color-tertiary, --t-tertiary, #ebe8fc)};\n }\n\n &.color-info {\n --comp-bar-color: #{var-list(--tct-card-bar-color-info, --const-stoplight-info, #0079c1)};\n }\n\n &.color-success {\n --comp-bar-color: #{var-list(--tct-card-bar-color-success, --const-stoplight-success, #0e8a00)};\n }\n\n &.color-warning {\n --comp-bar-color: #{var-list(--tct-card-bar-color-warning, --const-stoplight-warning, #c35500)};\n }\n\n &.color-alert {\n --comp-bar-color: #{var-list(--tct-card-bar-color-alert, --const-stoplight-alert, #c35500)};\n }\n\n &.color-accent-1 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-1, --t-accent-1, #e05252)};\n }\n\n &.color-accent-2 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-2, --t-accent-2, #e09952)};\n }\n\n &.color-accent-3 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-3, --t-accent-3, #e0e052)};\n }\n\n &.color-accent-4 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-4, --t-accent-4, #99e052)};\n }\n\n &.color-accent-5 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-5, --t-accent-5, #52e052)};\n }\n\n &.color-accent-6 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-6, --t-accent-6, #52e099)};\n }\n\n &.color-accent-7 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-7, --t-accent-7, #52e0e0)};\n }\n\n &.color-accent-8 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-8, --t-accent-8, #5299e0)};\n }\n\n &.color-accent-9 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-9, --t-accent-9, #5252e0)};\n }\n\n &.color-accent-10 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-10, --t-accent-10, #9952e0)};\n }\n\n &.color-accent-11 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-11, --t-accent-11, #e052e0)};\n }\n\n &.color-accent-12 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-12, --t-accent-12, #e05299)};\n }\n}\n\n.touch-indicator {\n align-self: center;\n --tct-icon-size: var(--comp-chevron-size);\n}\n","import {\n Component,\n ComponentInterface,\n Prop,\n Event,\n h,\n Fragment,\n Listen,\n Element,\n EventEmitter,\n State,\n} from '@stencil/core';\nimport { isTouchDevice, overrideFocus, isEventFromElement } from 'src/utils';\nconst PREDEFINED_COLORS = [\n 'primary',\n 'secondary',\n 'tertiary',\n 'info',\n 'success',\n 'warning',\n 'alert',\n 'accent-1',\n 'accent-2',\n 'accent-3',\n 'accent-4',\n 'accent-5',\n 'accent-6',\n 'accent-7',\n 'accent-8',\n 'accent-9',\n 'accent-10',\n 'accent-11',\n 'accent-12',\n];\n\n@Component({ tag: 'q2-card', shadow: true, styleUrl: 'q2-card.scss' })\nexport class Q2Card implements ComponentInterface {\n // #region Own Properties\n\n avatarElement: HTMLElement;\n clickableElement: HTMLElement;\n containerElement: HTMLElement;\n resizeObserver: ResizeObserver;\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 isAutoSmall: boolean = false;\n\n @State()\n isAutoTouch: boolean = false;\n\n // #endregion\n // #region Public Property API\n\n /** The [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to be displayed in the avatar location. /\n @Prop({ reflect: true })\n avatarIcon: string;\n\n /* The initials to be placed in the avatar of the card. /\n @Prop({ reflect: true })\n avatarInitials: string;\n\n /* The name to be used for the avatar of the card which will be converted to initials. /\n @Prop({ reflect: true })\n avatarName: string;\n\n /* The source of the image to be displayed in the avatar location. /\n @Prop({ reflect: true })\n avatarSrc: string;\n\n /\n Indicates that a bar should be displayed and which color to use. Predefined colors that may be used as values are:\n \n - primary\n * - secondary\n * - tertiary\n * - info\n * - success\n * - warning\n * - alert\n * - accent-1\n * - accent-2\n * - accent-3\n * - accent-4\n * - accent-5\n * - accent-6\n * - accent-7\n * - accent-8\n * - accent-9\n * - accent-10\n * - accent-11\n * - accent-12\n \n Any other value (e.g. `\"#990000\"`, `\"purple\"`) will be treated as a custom color.\n /\n @Prop({ reflect: true })\n bar: string;\n\n /* The description of the card (truncated after two lines). /\n @Prop({ reflect: true })\n description: string;\n\n /\n Display the card with a view optimized for smaller displays.\n \n @info\n * This will be determined automatically if the attribute is not manually provided.\n /\n @Prop({ reflect: true })\n isSmall: boolean;\n\n /* Display the card with no borders, padding, drop-shadows, or clickable behavior. /\n @Prop({ reflect: true })\n isStatic: boolean;\n\n /\n Display the card with a view optimized for touch displays.\n \n @info\n * This will be determined automatically if the attribute is not manually provided.\n /\n @Prop({ reflect: true })\n isTouch: boolean = isTouchDevice();\n\n /* Target to be applied to the link when a URL is provided. /\n @Prop({ reflect: true })\n target: '_self' \| '_blank' \| '_parent' \| '_top';\n\n /* The title of the card. /\n @Prop({ reflect: true })\n title: string;\n\n /* Alters the interactive behavior of the card while maintaining visual appearance. /\n @Prop({ reflect: true })\n type: 'clickable' \| 'non-clickable' = 'clickable';\n\n /* URL to navigate the user to when the card is clicked. /\n @Prop({ reflect: true })\n url: string;\n\n // #endregion\n // #region Events\n\n /* Emitted when the card is clicked and the `url` property is not provided. */\n @Event()\n click: EventEmitter<undefined>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n this.resizeObserver = null;\n }\n\n componentDidLoad() {\n const { hostElement, clickableElement } = this;\n hostElement.click = () => clickableElement.click();\n overrideFocus(this.hostElement);\n\n this.resizeObserver = new ResizeObserver(() => this.determineAutoSmall());\n this.resizeObserver.observe(this.hostElement);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('focus')\n onHostElementFocus(event) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.clickableElement.focus();\n }\n\n // #endregion\n // #region Local Methods\n\n determineAutoSmall() {\n if (this.isStatic) return;\n if (this.hostElement.hasAttribute('is-small')) return;\n const { containerElement, avatarElement } = this;\n const avatarWidth = avatarElement?.offsetWidth ?? 0;\n const containerWidth = containerElement?.offsetWidth ?? 0;\n const totalWidth = avatarWidth + containerWidth;\n this.isAutoSmall = totalWidth < 350;\n }\n\n determineAutoTouch() {\n if (this.hostElement.hasAttribute('is-touch')) return;\n this.isAutoTouch = isTouchDevice();\n }\n\n generateAvatar() {\n const { avatarName, avatarInitials, avatarSrc, avatarIcon } = this;\n\n if (avatarIcon) {\n return (\n <q2-icon\n type={avatarIcon}\n ref={e => (this.avatarElement = e)}\n test-id=\"avatar\"\n ></q2-icon>\n );\n } else if (avatarName \|\| avatarInitials \|\| avatarSrc) {\n return (\n <q2-avatar\n name={avatarName}\n initials={avatarInitials}\n src={avatarSrc}\n ref={e => (this.avatarElement = e)}\n test-id=\"avatar\"\n ></q2-avatar>\n );\n }\n }\n\n generateContainerClasses() {\n const {\n isSmall,\n isAutoSmall,\n avatarName,\n avatarInitials,\n avatarSrc,\n avatarIcon,\n isTouch,\n isAutoTouch,\n isStatic,\n type,\n } = this;\n const result = ['container', type];\n const showSmall = isSmall \|\| isAutoSmall;\n const showTouch = isTouch \|\| isAutoTouch;\n const hasAvatar = avatarName \|\| avatarInitials \|\| avatarSrc \|\| avatarIcon;\n if (showSmall) result.push('is-small');\n if (showTouch && !isStatic) result.push('is-touch');\n if (hasAvatar) result.push('has-avatar');\n if (isStatic) result.push('is-static');\n\n return result.join(' ');\n }\n\n generateContent() {\n return (\n <Fragment>\n {this.bar && (\n <div\n class={this.getBarClasses()}\n test-id=\"bar\"\n style={this.getBarStyles()}\n ></div>\n )}\n {this.generateAvatar()}\n <div\n class=\"content\"\n test-id=\"contentContainer\"\n ref={e => (this.containerElement = e)}\n >\n {this.title && <h3 test-id=\"title\">{this.title}</h3>}\n {this.description && <p test-id=\"description\">{this.description}</p>}\n <slot />\n </div>\n {this.isTouch && !this.isStatic && (\n <q2-icon\n test-id=\"touchIndicator\"\n type=\"chevron-right\"\n class=\"touch-indicator\"\n ></q2-icon>\n )}\n </Fragment>\n );\n }\n\n getBarClasses() {\n const { bar } = this;\n\n return {\n bar: true,\n [`color-${bar}`]: this.isBarColorPredefined(),\n };\n }\n\n getBarStyles() {\n const { bar } = this;\n\n return this.isBarColorPredefined() ? {} : { '--comp-bar-color': bar };\n }\n\n handleClick = (event: MouseEvent) => {\n if (this.url) return true;\n event.preventDefault();\n event.stopPropagation();\n this.click.emit();\n };\n\n isBarColorPredefined() {\n return PREDEFINED_COLORS.includes(this.bar);\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { url, isStatic, type } = this;\n if (isStatic \|\| type === 'non-clickable')\n return (\n <div\n ref={e => (this.clickableElement = e)}\n class={this.generateContainerClasses()}\n test-id=\"clickableElement\"\n >\n {this.generateContent()}\n </div>\n );\n else if (!!url)\n return (\n <a\n ref={e => (this.clickableElement = e)}\n href={this.url}\n class={this.generateContainerClasses()}\n target={this.target}\n rel=\"noopener noreferrer\"\n test-id=\"clickableElement\"\n onClick={this.handleClick}\n >\n {this.generateContent()}\n </a>\n );\n else\n return (\n <button\n ref={e => (this.clickableElement = e)}\n class={this.generateContainerClasses()}\n test-id=\"clickableElement\"\n type=\"button\"\n onClick={this.handleClick}\n >\n {this.generateContent()}\n </button>\n );\n }\n\n // #endregion\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["q2CardCss","PREDEFINED_COLORS","Q2Card","constructor","hostRef","this","isAutoSmall","isAutoTouch","isTouch","isTouchDevice","type","handleClick","event","url","preventDefault","stopPropagation","click","emit","disconnectedCallback","_a","resizeObserver","disconnect","componentDidLoad","hostElement","clickableElement","overrideFocus","ResizeObserver","determineAutoSmall","observe","onHostElementFocus","isEventFromElement","focus","isStatic","hasAttribute","containerElement","avatarElement","avatarWidth","offsetWidth","containerWidth","_b","totalWidth","determineAutoTouch","generateAvatar","avatarName","avatarInitials","avatarSrc","avatarIcon","h","ref","e","name","initials","src","generateContainerClasses","isSmall","result","showSmall","showTouch","hasAvatar","push","join","generateContent","Fragment","bar","class","getBarClasses","style","getBarStyles","title","description","isBarColorPredefined","includes","render","href","target","rel","onClick"],"sources":["src/components/q2-card/q2-card.scss?tag=q2-card&encapsulation=shadow","src/components/q2-card/q2-card.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: block;\n}\n\n.container {\n position: relative;\n width: 100%;\n text-align: start;\n height: var-list(--tct-card-height, 100%);\n min-height: var-list(--tct-card-min-height, auto);\n display: grid;\n gap: var-list(var-prefixer(card-gap), --app-scale-3x, 15px);\n margin: 0;\n color: var-list(--tct-card-font-color, var-prefixer(card-color), --t-text, #4d4d4d);\n backdrop-filter: var(--tct-card-backdrop-filter);\n\n --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 44px)};\n --comp-chevron-size: 0;\n --comp-bar-width: #{var-list(var-prefixer(card-bar-width), --app-scale-2x, 10px)};\n --comp-card-padding: #{var-list(var-prefixer(card-padding), --app-scale-4x, 20px)};\n\n &.is-small {\n --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 26px)};\n }\n &.has-avatar {\n grid-template-columns: var(--comp-avatar-size) 1fr;\n --tct-avatar-width: var(--comp-avatar-size);\n --tct-avatar-height: var(--comp-avatar-size);\n --tct-icon-size: var(--comp-avatar-size);\n }\n\n :host([bar][is-static]) & {\n padding-left: var(--comp-card-padding);\n }\n\n :host([is-static]:not([is-static='false'])) & {\n background: var-list(--tct-card-static-background, var-prefixer(card-background), --t-base, #ffffff);\n color: var-list(--tct-card-static-font-color, var-prefixer(card-color), --t-text, #4d4d4d);\n }\n\n :host(:not([is-static])) & {\n --comp-border-radius: #{var-list(var-prefixer(card-border-radius), --app-border-radius-1, 4px)};\n --comp-border-width: #{var-list(var-prefixer(card-border-width), 0px)};\n border: none;\n background: var-list(var-prefixer(card-background), --t-base, #ffffff);\n backdrop-filter: var-list(--tct-card-backdrop-filter, none);\n padding: var(--comp-card-padding);\n text-decoration: none;\n border-width: var(--comp-border-width);\n border-color: var-list(var-prefixer(card-border-color), transparent);\n border-style: var-list(--tct-card-border-style, solid);\n border-radius: var(--comp-border-radius);\n transition: box-shadow var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n box-shadow: var-list(\n var-prefixer(card-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 &.clickable {\n cursor: pointer;\n @media (hover: hover) {\n --comp-card-hover-box-shadow: #{var-list(\n var-prefixer(card-hover-box-shadow),\n --app-shadow-3,\n unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)')\n )};\n\n &:focus-visible {\n color: var-list(var-prefixer(card-color), --t-text, #4d4d4d);\n box-shadow: var-list(--tct-card-focus-visible-box-shadow, --const-double-focus-ring);\n }\n\n &:hover {\n box-shadow: var(--comp-card-hover-box-shadow);\n }\n\n &:active {\n box-shadow: var-list(\n var-prefixer(card-active-box-shadow),\n --app-shadow-1,\n unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')\n );\n }\n }\n }\n\n &.is-touch {\n --comp-chevron-size: #{var-list(var-prefixer(card-chevron-size), 26px)};\n grid-template-columns: 1fr var(--comp-chevron-size);\n }\n\n &.has-avatar.is-touch {\n grid-template-columns: var(--comp-avatar-size) 1fr var(--comp-chevron-size);\n }\n }\n}\n\n.content {\n overflow: hidden;\n display: grid;\n gap: var-list(var-prefixer(card-content-gap), --app-scale-1x, 5px);\n align-content: start;\n}\n\nh3,\np {\n margin: 0;\n padding: 0;\n line-height: var-list(var-prefixer(card-font-height), 20px);\n}\n\nh3 {\n font-weight: var-list(var-prefixer(card-font-weight), 600);\n font-size: var-list(var-prefixer(card-font-size), 17px);\n @include line-clamp(var(--tct-card-title-line-count, 1));\n}\n\np {\n @include line-clamp(var(--tct-card-description-line-count, 2));\n}\n\n.bar {\n --comp-bar-border-radius: calc(var(--comp-border-radius) - var(--comp-border-width));\n border-radius: var(--comp-bar-border-radius) 0 0 var(--comp-bar-border-radius);\n position: absolute;\n inset: 0 auto auto 0;\n width: var(--comp-bar-width);\n background: var(--comp-bar-color);\n height: 100%;\n\n &.color-primary {\n --comp-bar-color: #{var-list(--tct-card-bar-color-primary, --t-primary, #5446a4)};\n }\n\n &.color-secondary {\n --comp-bar-color: #{var-list(--tct-card-bar-color-secondary, --t-secondary, #b6b3cc)};\n }\n\n &.color-tertiary {\n --comp-bar-color: #{var-list(--tct-card-bar-color-tertiary, --t-tertiary, #ebe8fc)};\n }\n\n &.color-info {\n --comp-bar-color: #{var-list(--tct-card-bar-color-info, --const-stoplight-info, #0079c1)};\n }\n\n &.color-success {\n --comp-bar-color: #{var-list(--tct-card-bar-color-success, --const-stoplight-success, #0e8a00)};\n }\n\n &.color-warning {\n --comp-bar-color: #{var-list(--tct-card-bar-color-warning, --const-stoplight-warning, #c35500)};\n }\n\n &.color-alert {\n --comp-bar-color: #{var-list(--tct-card-bar-color-alert, --const-stoplight-alert, #c35500)};\n }\n\n &.color-accent-1 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-1, --t-accent-1, #e05252)};\n }\n\n &.color-accent-2 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-2, --t-accent-2, #e09952)};\n }\n\n &.color-accent-3 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-3, --t-accent-3, #e0e052)};\n }\n\n &.color-accent-4 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-4, --t-accent-4, #99e052)};\n }\n\n &.color-accent-5 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-5, --t-accent-5, #52e052)};\n }\n\n &.color-accent-6 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-6, --t-accent-6, #52e099)};\n }\n\n &.color-accent-7 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-7, --t-accent-7, #52e0e0)};\n }\n\n &.color-accent-8 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-8, --t-accent-8, #5299e0)};\n }\n\n &.color-accent-9 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-9, --t-accent-9, #5252e0)};\n }\n\n &.color-accent-10 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-10, --t-accent-10, #9952e0)};\n }\n\n &.color-accent-11 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-11, --t-accent-11, #e052e0)};\n }\n\n &.color-accent-12 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-12, --t-accent-12, #e05299)};\n }\n}\n\n.touch-indicator {\n align-self: center;\n --tct-icon-size: var(--comp-chevron-size);\n}\n","import {\n Component,\n ComponentInterface,\n Prop,\n Event,\n h,\n Fragment,\n Listen,\n Element,\n EventEmitter,\n State,\n} from '@stencil/core';\nimport { isTouchDevice, overrideFocus, isEventFromElement } from 'src/utils';\nconst PREDEFINED_COLORS = [\n 'primary',\n 'secondary',\n 'tertiary',\n 'info',\n 'success',\n 'warning',\n 'alert',\n 'accent-1',\n 'accent-2',\n 'accent-3',\n 'accent-4',\n 'accent-5',\n 'accent-6',\n 'accent-7',\n 'accent-8',\n 'accent-9',\n 'accent-10',\n 'accent-11',\n 'accent-12',\n];\n\n@Component({ tag: 'q2-card', shadow: true, styleUrl: 'q2-card.scss' })\nexport class Q2Card implements ComponentInterface {\n // #region Own Properties\n\n avatarElement: HTMLElement;\n clickableElement: HTMLElement;\n containerElement: HTMLElement;\n resizeObserver: ResizeObserver;\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 isAutoSmall: boolean = false;\n\n @State()\n isAutoTouch: boolean = false;\n\n // #endregion\n // #region Public Property API\n\n /** The [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to be displayed in the avatar location. /\n @Prop({ reflect: true })\n avatarIcon: string;\n\n /* The initials to be placed in the avatar of the card. /\n @Prop({ reflect: true })\n avatarInitials: string;\n\n /* The name to be used for the avatar of the card which will be converted to initials. /\n @Prop({ reflect: true })\n avatarName: string;\n\n /* The source of the image to be displayed in the avatar location. /\n @Prop({ reflect: true })\n avatarSrc: string;\n\n /\n Indicates that a bar should be displayed and which color to use. Predefined colors that may be used as values are:\n \n - primary\n * - secondary\n * - tertiary\n * - info\n * - success\n * - warning\n * - alert\n * - accent-1\n * - accent-2\n * - accent-3\n * - accent-4\n * - accent-5\n * - accent-6\n * - accent-7\n * - accent-8\n * - accent-9\n * - accent-10\n * - accent-11\n * - accent-12\n \n Any other value (e.g. `\"#990000\"`, `\"purple\"`) will be treated as a custom color.\n /\n @Prop({ reflect: true })\n bar: string;\n\n /* The description of the card (truncated after two lines). /\n @Prop({ reflect: true })\n description: string;\n\n /\n Display the card with a view optimized for smaller displays.\n \n @info\n * This will be determined automatically if the attribute is not manually provided.\n /\n @Prop({ reflect: true })\n isSmall: boolean;\n\n /* Display the card with no borders, padding, drop-shadows, or clickable behavior. /\n @Prop({ reflect: true })\n isStatic: boolean;\n\n /\n Display the card with a view optimized for touch displays.\n \n @info\n * This will be determined automatically if the attribute is not manually provided.\n /\n @Prop({ reflect: true })\n isTouch: boolean = isTouchDevice();\n\n /* Target to be applied to the link when a URL is provided. /\n @Prop({ reflect: true })\n target: '_self' \| '_blank' \| '_parent' \| '_top';\n\n /* The title of the card. /\n @Prop({ reflect: true })\n title: string;\n\n /* Alters the interactive behavior of the card while maintaining visual appearance. /\n @Prop({ reflect: true })\n type: 'clickable' \| 'non-clickable' = 'clickable';\n\n /* URL to navigate the user to when the card is clicked. /\n @Prop({ reflect: true })\n url: string;\n\n // #endregion\n // #region Events\n\n /* Emitted when the card is clicked and the `url` property is not provided. */\n @Event()\n click: EventEmitter<undefined>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n this.resizeObserver = null;\n }\n\n componentDidLoad() {\n const { hostElement, clickableElement } = this;\n hostElement.click = () => clickableElement.click();\n overrideFocus(this.hostElement);\n\n this.resizeObserver = new ResizeObserver(() => this.determineAutoSmall());\n this.resizeObserver.observe(this.hostElement);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('focus')\n onHostElementFocus(event) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.clickableElement.focus();\n }\n\n // #endregion\n // #region Local Methods\n\n determineAutoSmall() {\n if (this.isStatic) return;\n if (this.hostElement.hasAttribute('is-small')) return;\n const { containerElement, avatarElement } = this;\n const avatarWidth = avatarElement?.offsetWidth ?? 0;\n const containerWidth = containerElement?.offsetWidth ?? 0;\n const totalWidth = avatarWidth + containerWidth;\n this.isAutoSmall = totalWidth < 350;\n }\n\n determineAutoTouch() {\n if (this.hostElement.hasAttribute('is-touch')) return;\n this.isAutoTouch = isTouchDevice();\n }\n\n generateAvatar() {\n const { avatarName, avatarInitials, avatarSrc, avatarIcon } = this;\n\n if (avatarIcon) {\n return (\n <q2-icon\n type={avatarIcon}\n ref={e => (this.avatarElement = e)}\n test-id=\"avatar\"\n ></q2-icon>\n );\n } else if (avatarName \|\| avatarInitials \|\| avatarSrc) {\n return (\n <q2-avatar\n name={avatarName}\n initials={avatarInitials}\n src={avatarSrc}\n ref={e => (this.avatarElement = e)}\n test-id=\"avatar\"\n ></q2-avatar>\n );\n }\n }\n\n generateContainerClasses() {\n const {\n isSmall,\n isAutoSmall,\n avatarName,\n avatarInitials,\n avatarSrc,\n avatarIcon,\n isTouch,\n isAutoTouch,\n isStatic,\n type,\n } = this;\n const result = ['container', type];\n const showSmall = isSmall \|\| isAutoSmall;\n const showTouch = isTouch \|\| isAutoTouch;\n const hasAvatar = avatarName \|\| avatarInitials \|\| avatarSrc \|\| avatarIcon;\n if (showSmall) result.push('is-small');\n if (showTouch && !isStatic) result.push('is-touch');\n if (hasAvatar) result.push('has-avatar');\n if (isStatic) result.push('is-static');\n\n return result.join(' ');\n }\n\n generateContent() {\n return (\n <Fragment>\n {this.bar && (\n <div\n class={this.getBarClasses()}\n test-id=\"bar\"\n style={this.getBarStyles()}\n ></div>\n )}\n {this.generateAvatar()}\n <div\n class=\"content\"\n test-id=\"contentContainer\"\n ref={e => (this.containerElement = e)}\n >\n {this.title && <h3 test-id=\"title\">{this.title}</h3>}\n {this.description && <p test-id=\"description\">{this.description}</p>}\n <slot />\n </div>\n {this.isTouch && !this.isStatic && (\n <q2-icon\n test-id=\"touchIndicator\"\n type=\"chevron-right\"\n class=\"touch-indicator\"\n ></q2-icon>\n )}\n </Fragment>\n );\n }\n\n getBarClasses() {\n const { bar } = this;\n\n return {\n bar: true,\n [`color-${bar}`]: this.isBarColorPredefined(),\n };\n }\n\n getBarStyles() {\n const { bar } = this;\n\n return this.isBarColorPredefined() ? {} : { '--comp-bar-color': bar };\n }\n\n handleClick = (event: MouseEvent) => {\n if (this.url) return true;\n event.preventDefault();\n event.stopPropagation();\n this.click.emit();\n };\n\n isBarColorPredefined() {\n return PREDEFINED_COLORS.includes(this.bar);\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { url, isStatic, type } = this;\n if (isStatic \|\| type === 'non-clickable')\n return (\n <div\n ref={e => (this.clickableElement = e)}\n class={this.generateContainerClasses()}\n test-id=\"clickableElement\"\n >\n {this.generateContent()}\n </div>\n );\n else if (!!url)\n return (\n <a\n ref={e => (this.clickableElement = e)}\n href={this.url}\n class={this.generateContainerClasses()}\n target={this.target}\n rel=\"noopener noreferrer\"\n test-id=\"clickableElement\"\n onClick={this.handleClick}\n >\n {this.generateContent()}\n </a>\n );\n else\n return (\n <button\n ref={e => (this.clickableElement = e)}\n class={this.generateContainerClasses()}\n test-id=\"clickableElement\"\n type=\"button\"\n onClick={this.handleClick}\n >\n {this.generateContent()}\n </button>\n );\n }\n\n // #endregion\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,6 +1,6 @@
-import { r as e, c as a, h as t, H as r, g as o } from "./index-COzomxjJ.js";
+import { r as e, c as a, h as t, H as r, g as o } from "./index-CGkHOjh1.js";
-import { l as n } from "./index-CkXFIBxL.js";
+import { l as n } from "./index-xCuy-dFb.js";
 const s = "*{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}q2-carousel .swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;transition:all 0.2s}q2-carousel-pane.q2-carousel-pane{--comp-carousel-pane-tween:var(--tct-tween-1, var(--app-tween-1, 0.2s ease));--comp-carousel-shadow:var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14));cursor:grab}q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) *{cursor:pointer}q2-carousel-pane.q2-carousel-pane:focus-visible{box-shadow:none}q2-carousel-pane.q2-carousel-pane:focus-visible .q2-carousel-pane-main-content{outline:none;box-shadow:var(--const-double-focus-ring)}q2-carousel-pane.q2-carousel-pane button{border:0;background:transparent;transition:all 0.2s;opacity:0.3;cursor:pointer}q2-carousel-pane.q2-carousel-pane button:hover{opacity:0.7}q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content{box-shadow:var(--comp-carousel-shadow);transition:var(--comp-carousel-pane-tween);background:var(--tct-carousel-background, var(--tct-carousel-background-color, var(--t-carousel-background-color, var(--tct-white, var(--app-white, #ffffff)))));border:var(--tct-carousel-pane-border-width, var(--t-carousel-pane-border-width, 0px)) solid var(--tct-carousel-pane-border-color, var(--t-carousel-pane-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));border-radius:var(--tct-carousel-pane-border-radius, var(--t-carousel-pane-border-radius, 8px));padding:var(--tct-carousel-pane-padding, var(--t-carousel-pane-padding, 7px));height:var(--tct-carousel-pane-height, var(--t-carousel-pane-height, 10em))}q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content:hover{box-shadow:var(--const-double-focus-ring), var(--comp-carousel-shadow)}q2-carousel-pane.q2-carousel-pane[slot-frameless]:not([slot-frameless=false]) .q2-carousel-pane-main-content{box-shadow:none;border:0;border-radius:0;padding:0}";

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

@@ -1,6 +1,6 @@
-import { r as e, c as t, h as i, F as n, H as s, g as r } from "./index-COzomxjJ.js";
+import { r as e, c as t, h as i, F as n, H as s, g as r } from "./index-CGkHOjh1.js";
-import { c as o, l as a, e as l, o as c, a as f } from "./index-CkXFIBxL.js";
+import { c as o, l as a, e as l, o as c, a as f } from "./index-xCuy-dFb.js";
 /**
  * SSR Window 4.0.2

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

@@ -1,6 +1,6 @@
-import { r as t, c as s, h as e, g as i } from "./index-COzomxjJ.js";
+import { r as t, c as s, h as e, g as i } from "./index-CGkHOjh1.js";
-import { o as a, l as o } from "./index-CkXFIBxL.js";
+import { o as a, l as o } from "./index-xCuy-dFb.js";
 import { L as r, a as h, p as n, u as p, i as l, g as d, b as c, f, c as u, d as b, e as m } from "./charting-Mf86SEvp.js";

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

@@ -1,6 +1,6 @@
-import { r as t, h as s, g as i } from "./index-COzomxjJ.js";
+import { r as t, h as s, g as i } from "./index-CGkHOjh1.js";
-import { o as e, l as a } from "./index-CkXFIBxL.js";
+import { o as e, l as a } from "./index-xCuy-dFb.js";
 import { B as r, h as o, j as h, l as n, k as d, u as p, c as l, d as c, m as f, e as u, i as b, g as m, b as g, f as v } from "./charting-Mf86SEvp.js";

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

@@ -1,6 +1,6 @@
-import { r as t, c as e, h as n, g as a } from "./index-COzomxjJ.js";
+import { r as t, c as e, h as n, g as a } from "./index-CGkHOjh1.js";
-import { o as r, a as i, l as o, j as s } from "./index-CkXFIBxL.js";
+import { o as r, a as i, l as o, j as s } from "./index-xCuy-dFb.js";
 import { u as c, o as d, W as l, j as h, H as u, X as p, Y as v, Z as f, _ as b, $ as g, a0 as m, d as x, c as y, m as w, i as I, g as S } from "./charting-Mf86SEvp.js";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-checkbox-group.entry.esm.js","sources":["src/components/q2-checkbox-group/q2-checkbox-group.scss?tag=q2-checkbox-group&encapsulation=shadow","src/components/q2-checkbox-group/q2-checkbox-group.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n --comp-default-checkbox-group-margin: #{var-list(var-prefixer(checkbox-group-margin-top), --app-scale-5x, 25px) 0\n var-list(var-prefixer(checkbox-group-margin-bottom), --app-scale-5x, 25px)};\n display: block;\n margin: var-list(--tct-checkbox-group-margin, --comp-default-checkbox-group-margin);\n}\n\nfieldset {\n padding: var(--tct-checkbox-group-fieldset-padding, 0);\n margin: 0;\n border: 0;\n position: relative;\n}\n\n.label-row {\n display: grid;\n grid-template-columns: 1fr 24px;\n grid-template-areas: 'label icon';\n column-gap: var(--tct-checkbox-group-label-column-gap, var(--app-scale-2x, 10px));\n\n q2-icon {\n grid-area: icon;\n margin-top: -2px;\n margin-bottom: -2px;\n }\n}\n\n.group-legend {\n font-weight: 600;\n}\n\nlegend.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n border: 0;\n}\n\n.slot-container {\n margin: var(--app-scale-1x, 5px) 0;\n padding: var(--app-scale-1x, 5px);\n border-width: 1px;\n border-color: transparent;\n border-style: solid;\n border-radius: var-list(--tct-checkbox-group-border-radius, --app-border-radius-1, 4px);\n\n :host([has-error]) & {\n border-color: var-list(--tct-checkbox-group-error-border-color, --const-stoplight-alert, #d20a0a);\n }\n :host([has-error='false']) & {\n border-color: transparent;\n }\n}\n\n.optional-tag {\n margin-left: var-list(--tct-checkbox-group-label-optional-margin-left, --app-scale-1x, 5px);\n color: var-list(\n var-prefixer(checkbox-group-label-optional-color),\n var-prefixer(a11y-color),\n var-prefixer(a11y-gray-color),\n var-prefixer(gray-7),\n var-prefixer(gray-d1),\n --app-gray-d1,\n rgba(77, 77, 77, 0.77)\n );\n font-size: var(--tct-checkbox-group-label-optional-font-size, 12px);\n font-weight: var(--tct-checkbox-group-label-optional-font-weight, 400);\n}\n\n.flexed {\n margin: 0;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n}\n.flexed.left {\n justify-content: left;\n}\n","import {\n Component,\n Prop,\n Element,\n h,\n Listen,\n EventEmitter,\n Event,\n ComponentInterface,\n Watch,\n Method,\n Fragment,\n} from '@stencil/core';\nimport { createGuid, renderLabel } from 'src/utils';\n\n/** @slot label - An optional slot to display a custom label. /\n@Component({ tag: 'q2-checkbox-group', shadow: true, styleUrl: 'q2-checkbox-group.scss' })\nexport class Q2CheckboxGroup implements ComponentInterface {\n // #region Own Properties\n\n _id: string = `checkbox-group-${createGuid()}`;\n mutationObserver: MutationObserver;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /* Determines if all checkboxes in the group are put into a `disabled` state. /\n @Prop({ reflect: true })\n disabled: boolean;\n\n /* Determines if the component should display in an errant state. /\n @Prop({ reflect: true })\n hasError: boolean;\n\n /\n Hide's the group's `<label>` element from view.\n * @warning\n * Only use when a visible label is impractical.\n /\n @Prop({ reflect: true, mutable: true })\n hideLabel: boolean;\n\n /\n The label that displays above all the checkboxes.\n * @localizable\n /\n @Prop({ reflect: true })\n label: string;\n\n /* Determines if the component is marked as `optional`. /\n @Prop({ reflect: true })\n optional: boolean;\n\n /* Determines if all the checkboxes are marked as `readonly`. /\n @Prop({ reflect: true })\n readonly: boolean;\n\n /\n Can be used to get and set the checked status of each `<q2-checkbox>` element contained within the group.\n \n Example:\n * @snippet\n * element.value = {\n * 'checkbox-value-1': true,\n * 'checkbox-value-2': false,\n * 'checkbox-value-3': true,\n * };\n \n // Also accepts partial values\n * element.value = {\n * 'checkbox-value-2': false,\n * }\n /\n @Prop({ mutable: true })\n value: object;\n\n // #endregion\n // #region Events\n\n @Event()\n change: EventEmitter;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n this.mutationObserver = null;\n }\n }\n\n componentWillLoad() {\n this.updateReadonly();\n }\n\n componentDidLoad() {\n const observer = new MutationObserver(this.onMutationObserved);\n observer.observe(this.hostElement, { childList: true, subtree: true });\n this.mutationObserver = observer;\n this.onMutationObserved();\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n onHostElementChange(event: CustomEvent) {\n if (event.target === this.hostElement && !this.hostElement.onchange) {\n this.value = event.detail;\n }\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n Emulates clicking the `<q2-checkbox>` option(s) with the provided value.\n \n @testOnly\n */\n @Method()\n setValue(values: string \| string[]) {\n const valuesSet = new Set(Array.isArray(values) ? values : [values]);\n this.checkboxElements.forEach(check => {\n if (valuesSet.has(check.value)) check.click();\n });\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('disabled')\n disabledObserver() {\n this.updateDisabled();\n }\n\n @Watch('readonly')\n readonlyObserver() {\n this.updateReadonly();\n }\n\n @Watch('value')\n valueObserver() {\n this.updateValue();\n }\n\n // #endregion\n // #region Local Methods\n\n get checkboxElements() {\n return Array.from(this.hostElement.querySelectorAll('q2-checkbox')) as HTMLQ2CheckboxElement[];\n }\n\n get inputId() {\n return this._id;\n }\n\n get protectedValue(): object {\n return this.value \|\| {};\n }\n\n inputDom() {\n return (\n <div class=\"slot-container\">\n <slot />\n </div>\n );\n }\n\n onInnerCheckboxChange = (event: CustomEvent) => {\n event.stopImmediatePropagation();\n const groupValue = {};\n setTimeout(() => {\n this.checkboxElements.forEach(check => {\n groupValue[check.value] = !!check.checked;\n });\n this.change.emit(groupValue);\n }, 0);\n };\n\n onMutationObserved = () => {\n this.updateValue();\n this.updateDisabled();\n this.updateReadonly();\n };\n\n updateDisabled() {\n const groupDisabled = this.disabled;\n this.checkboxElements.forEach(checkbox => {\n checkbox.groupDisabled = groupDisabled;\n });\n }\n\n updateReadonly() {\n const slotReadonly = this.readonly;\n this.checkboxElements.forEach(checkbox => {\n checkbox.slotReadonly = slotReadonly;\n });\n }\n\n updateValue() {\n if (this.readonly) return;\n this.checkboxElements.forEach(check => {\n if (this.protectedValue.hasOwnProperty(check.value)) {\n check.checked = this.value[check.value];\n }\n });\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const showLabel = this.label \|\| this.optional \|\| this.readonly;\n const showLabelRow = (showLabel && !this.hideLabel) \|\| this.hasError;\n return (\n <Fragment>\n {showLabelRow && (\n <div class=\"label-row\">\n {showLabel && !this.hideLabel && <div class=\"group-legend\">{renderLabel(this)}</div>}\n {this.hasError && (\n <q2-icon\n type=\"error\"\n test-id=\"iconError\"\n ></q2-icon>\n )}\n </div>\n )}\n <fieldset\n onChange={this.onInnerCheckboxChange}\n aria-invalid={this.hasError ? `${this.hasError}` : undefined}\n >\n {showLabel && <legend class=\"sr-only\">{renderLabel(this)}</legend>}\n {this.inputDom()}\n </fieldset>\n </Fragment>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"q2-checkbox-group.entry.esm.js","sources":["src/components/q2-checkbox-group/q2-checkbox-group.scss?tag=q2-checkbox-group&encapsulation=shadow","src/components/q2-checkbox-group/q2-checkbox-group.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n --comp-default-checkbox-group-margin: #{var-list(var-prefixer(checkbox-group-margin-top), --app-scale-5x, 25px) 0\n var-list(var-prefixer(checkbox-group-margin-bottom), --app-scale-5x, 25px)};\n display: block;\n margin: var-list(--tct-checkbox-group-margin, --comp-default-checkbox-group-margin);\n}\n\nfieldset {\n padding: var(--tct-checkbox-group-fieldset-padding, 0);\n margin: 0;\n border: 0;\n position: relative;\n}\n\n.label-row {\n display: grid;\n grid-template-columns: 1fr 24px;\n grid-template-areas: 'label icon';\n column-gap: var(--tct-checkbox-group-label-column-gap, var(--app-scale-2x, 10px));\n color: var-list(--tct-checkbox-group-label-font-color, inherit);\n font-size: var-list(--tct-checkbox-group-label-font-size, inherit);\n font-weight: var-list(--tct-checkbox-group-label-font-weight, 600);\n text-transform: var-list(--tct-checkbox-group-label-text-transform, none);\n letter-spacing: var-list(--tct-checkbox-group-label-letter-spacing, inherit);\n\n q2-icon {\n grid-area: icon;\n margin-top: -2px;\n margin-bottom: -2px;\n }\n}\n\n.group-legend {\n font-weight: 600;\n}\n\nlegend.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n border: 0;\n}\n\n.slot-container {\n --comp-default-container-margin: var(--app-scale-1x, 5px) 0;\n margin: var-list(--tct-checkbox-group-container-margin, --comp-default-container-margin);\n padding: var-list(--tct-checkbox-group-container-padding, --app-scale-1x, 5px);\n border-width: 1px;\n border-color: transparent;\n border-style: solid;\n border-radius: var-list(--tct-checkbox-group-border-radius, --app-border-radius-1, 4px);\n\n :host([has-error]) & {\n border-color: var-list(--tct-checkbox-group-error-border-color, --const-stoplight-alert, #d20a0a);\n }\n :host([has-error='false']) & {\n border-color: transparent;\n }\n}\n\n.optional-tag {\n margin-left: var-list(--tct-checkbox-group-label-optional-margin-left, --app-scale-1x, 5px);\n color: var-list(\n var-prefixer(checkbox-group-label-optional-color),\n var-prefixer(a11y-color),\n var-prefixer(a11y-gray-color),\n var-prefixer(gray-7),\n var-prefixer(gray-d1),\n --app-gray-d1,\n rgba(77, 77, 77, 0.77)\n );\n font-size: var(--tct-checkbox-group-label-optional-font-size, 12px);\n font-weight: var(--tct-checkbox-group-label-optional-font-weight, 400);\n}\n\n.flexed {\n margin: 0;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n}\n.flexed.left {\n justify-content: left;\n}\n","import {\n Component,\n Prop,\n Element,\n h,\n Listen,\n EventEmitter,\n Event,\n ComponentInterface,\n Watch,\n Method,\n Fragment,\n} from '@stencil/core';\nimport { createGuid, renderLabel } from 'src/utils';\n\n/** @slot label - An optional slot to display a custom label. /\n@Component({ tag: 'q2-checkbox-group', shadow: true, styleUrl: 'q2-checkbox-group.scss' })\nexport class Q2CheckboxGroup implements ComponentInterface {\n // #region Own Properties\n\n _id: string = `checkbox-group-${createGuid()}`;\n mutationObserver: MutationObserver;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /* Determines if all checkboxes in the group are put into a `disabled` state. /\n @Prop({ reflect: true })\n disabled: boolean;\n\n /* Determines if the component should display in an errant state. /\n @Prop({ reflect: true })\n hasError: boolean;\n\n /\n Hide's the group's `<label>` element from view.\n * @warning\n * Only use when a visible label is impractical.\n /\n @Prop({ reflect: true, mutable: true })\n hideLabel: boolean;\n\n /\n The label that displays above all the checkboxes.\n * @localizable\n /\n @Prop({ reflect: true })\n label: string;\n\n /* Determines if the component is marked as `optional`. /\n @Prop({ reflect: true })\n optional: boolean;\n\n /* Determines if all the checkboxes are marked as `readonly`. /\n @Prop({ reflect: true })\n readonly: boolean;\n\n /\n Can be used to get and set the checked status of each `<q2-checkbox>` element contained within the group.\n \n Example:\n * @snippet\n * element.value = {\n * 'checkbox-value-1': true,\n * 'checkbox-value-2': false,\n * 'checkbox-value-3': true,\n * };\n \n // Also accepts partial values\n * element.value = {\n * 'checkbox-value-2': false,\n * }\n /\n @Prop({ mutable: true })\n value: object;\n\n // #endregion\n // #region Events\n\n @Event()\n change: EventEmitter;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n this.mutationObserver = null;\n }\n }\n\n componentWillLoad() {\n this.updateReadonly();\n }\n\n componentDidLoad() {\n const observer = new MutationObserver(this.onMutationObserved);\n observer.observe(this.hostElement, { childList: true, subtree: true });\n this.mutationObserver = observer;\n this.onMutationObserved();\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n onHostElementChange(event: CustomEvent) {\n if (event.target === this.hostElement && !this.hostElement.onchange) {\n this.value = event.detail;\n }\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n Emulates clicking the `<q2-checkbox>` option(s) with the provided value.\n \n @testOnly\n */\n @Method()\n setValue(values: string \| string[]) {\n const valuesSet = new Set(Array.isArray(values) ? values : [values]);\n this.checkboxElements.forEach(check => {\n if (valuesSet.has(check.value)) check.click();\n });\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('disabled')\n disabledObserver() {\n this.updateDisabled();\n }\n\n @Watch('readonly')\n readonlyObserver() {\n this.updateReadonly();\n }\n\n @Watch('value')\n valueObserver() {\n this.updateValue();\n }\n\n // #endregion\n // #region Local Methods\n\n get checkboxElements() {\n return Array.from(this.hostElement.querySelectorAll('q2-checkbox')) as HTMLQ2CheckboxElement[];\n }\n\n get inputId() {\n return this._id;\n }\n\n get protectedValue(): object {\n return this.value \|\| {};\n }\n\n inputDom() {\n return (\n <div class=\"slot-container\">\n <slot />\n </div>\n );\n }\n\n onInnerCheckboxChange = (event: CustomEvent) => {\n event.stopImmediatePropagation();\n const groupValue = {};\n setTimeout(() => {\n this.checkboxElements.forEach(check => {\n groupValue[check.value] = !!check.checked;\n });\n this.change.emit(groupValue);\n }, 0);\n };\n\n onMutationObserved = () => {\n this.updateValue();\n this.updateDisabled();\n this.updateReadonly();\n };\n\n updateDisabled() {\n const groupDisabled = this.disabled;\n this.checkboxElements.forEach(checkbox => {\n checkbox.groupDisabled = groupDisabled;\n });\n }\n\n updateReadonly() {\n const slotReadonly = this.readonly;\n this.checkboxElements.forEach(checkbox => {\n checkbox.slotReadonly = slotReadonly;\n });\n }\n\n updateValue() {\n if (this.readonly) return;\n this.checkboxElements.forEach(check => {\n if (this.protectedValue.hasOwnProperty(check.value)) {\n check.checked = this.value[check.value];\n }\n });\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const showLabel = this.label \|\| this.optional \|\| this.readonly;\n const showLabelRow = (showLabel && !this.hideLabel) \|\| this.hasError;\n return (\n <Fragment>\n {showLabelRow && (\n <div class=\"label-row\">\n {showLabel && !this.hideLabel && <div class=\"group-legend\">{renderLabel(this)}</div>}\n {this.hasError && (\n <q2-icon\n type=\"error\"\n test-id=\"iconError\"\n ></q2-icon>\n )}\n </div>\n )}\n <fieldset\n onChange={this.onInnerCheckboxChange}\n aria-invalid={this.hasError ? `${this.hasError}` : undefined}\n >\n {showLabel && <legend class=\"sr-only\">{renderLabel(this)}</legend>}\n {this.inputDom()}\n </fieldset>\n </Fragment>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":"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"}