npm - q2-tecton-elements - Versions diffs - 1.67.2 → 1.68.0 - Mend

q2-tecton-elements 1.67.2 → 1.68.0

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

Files changed (807) hide show

package/dist/cjs/q2-grid.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-grid.entry.cjs.js","mappings":"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","names":["h","Fragment"],"sources":["src/components/q2-grid/q2-grid.scss?tag=q2-grid&encapsulation=shadow","src/components/q2-grid/q2-grid.tsx"],"sourcesContent":["@import '../../styles/functions.scss';\n@import '../../styles/variables.scss';\n\n.q2-grid {\n // computed:\n --comp-grid-gap-none: #{var-list(--tct-grid-gap-none, --app-scale-0x, 0px)};\n --comp-grid-gap-compact: #{var-list(--tct-grid-gap-compact, --app-scale-1x, 5px)};\n --comp-grid-gap-normal: #{var-list(--tct-grid-gap-normal, --app-scale-3x, 15px)};\n --comp-grid-gap-comfortable: #{var-list(--tct-grid-gap-comfortable, --app-scale-5x, 25px)};\n // base:\n --grid-template-columns: '';\n --grid-template-rows: '';\n --grid-gap: '';\n --justify-items: '';\n --align-items: '';\n // xs:\n --xs-grid-template-columns: '';\n --xs-grid-template-rows: '';\n --xs-grid-gap: '';\n --xs-justify-items: '';\n --xs-align-items: '';\n // sm:\n --sm-grid-template-columns: '';\n --sm-grid-template-rows: '';\n --sm-grid-gap: '';\n --sm-justify-items: '';\n --sm-align-items: '';\n // md:\n --md-grid-template-columns: '';\n --md-grid-template-rows: '';\n --md-grid-gap: '';\n --md-justify-items: '';\n --md-align-items: '';\n // lg:\n --lg-grid-template-columns: '';\n --lg-grid-template-rows: '';\n --lg-grid-gap: '';\n --lg-justify-items: '';\n --lg-align-items: '';\n // xl:\n --xl-grid-template-columns: '';\n --xl-grid-template-rows: '';\n --xl-grid-gap: '';\n --xl-justify-items: '';\n --xl-align-items: '';\n // q2-grid styles w/o prop configs:\n display: grid;\n width: 100%;\n height: 100%;\n grid-auto-rows: auto;\n grid-auto-columns: 1fr;\n grid-auto-flow: row;\n justify-content: center;\n align-content: center;\n}\n// base:\n@include generate-q2-grid-styles(\n var(--grid-template-columns),\n var(--grid-template-rows),\n var(--grid-gap),\n var(--justify-items),\n var(--align-items)\n);\n// xs, sm, md, lg, xl:\n@each $breakpoint in $breakpoint-list {\n @include breakpoint($breakpoint) {\n @include generate-q2-grid-styles(\n var(--#{$breakpoint}-grid-template-columns),\n var(--#{$breakpoint}-grid-template-rows),\n var(--#{$breakpoint}-grid-gap),\n var(--#{$breakpoint}-justify-items),\n var(--#{$breakpoint}-align-items)\n );\n }\n}\n","import { Component, h, Fragment, Prop } from '@stencil/core';\n\nexport type TQ2GridColumnsOptions = number;\nexport type TQ2GridRowsOptions = 'auto' \| number;\nexport type TQ2GridGapOptions = 'none' \| 'compact' \| 'normal' \| 'comfortable';\nexport type TQ2GridJustifyOptions = 'stretch' \| 'start' \| 'center' \| 'end';\nexport type TQ2GridAlignOptions = 'stretch' \| 'start' \| 'center' \| 'end';\n\n/*\n @name Grid\n * @category Display\n * @summary Use for responsive grid layouts with flexible rows and columns.\n /\n@Component({ tag: 'q2-grid', shadow: true, styleUrl: 'q2-grid.scss' })\nexport class Q2Grid {\n // #region Public Property API\n\n /\n Sets the vertical alignment behavior of q2-grid-area components within a grid track at\n * the baseline viewport size.\n /\n @Prop({ reflect: true })\n align: TQ2GridAlignOptions = 'stretch';\n\n /* Sets the amount of columns to render within the grid at the baseline viewport size./\n @Prop({ reflect: true })\n columns: TQ2GridColumnsOptions = 12;\n\n /\n Sets the gap size between rows and columns within the grid at the baseline viewport size.\n * Gap values utilize CSS variables to allow for easy theming and customization.\n * Visit the Style section to learn more.\n /\n @Prop({ reflect: true })\n gap: TQ2GridGapOptions = 'normal';\n\n /\n Sets the horizontal alignment behavior of q2-grid-area components within a grid track\n * at the baseline viewport size.\n /\n @Prop({ reflect: true })\n justify: TQ2GridJustifyOptions = 'stretch';\n\n /\n Sets the vertical alignment behavior of q2-grid-area components within a grid track at the\n * 'LG' viewport size.\n /\n @Prop({ reflect: true })\n lgAlign: TQ2GridAlignOptions;\n\n /* Sets the amount of columns to render within the grid at the 'LG' viewport size./\n @Prop({ reflect: true })\n lgColumns: TQ2GridColumnsOptions;\n\n /\n Sets the gap size between rows and columns within the grid at the 'LG' viewport size.\n * Gap values utilize CSS variables to allow for easy theming and customization.\n * Visit the Style section to learn more.\n /\n @Prop({ reflect: true })\n lgGap: TQ2GridGapOptions;\n\n /\n Sets the horizontal alignment behavior of q2-grid-area components within a grid track at\n * the 'LG' viewport size.\n /\n @Prop({ reflect: true })\n lgJustify: TQ2GridJustifyOptions;\n\n /\n Sets the amount of rows to render within the grid at the 'LG' viewport size.\n * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n * components placed within the grid and the number of columns allowed per row.\n /\n @Prop({ reflect: true })\n lgRows: TQ2GridRowsOptions;\n\n /\n Sets the vertical alignment behavior of q2-grid-area components within a grid track at\n * the 'MD' viewport size.\n /\n @Prop({ reflect: true })\n mdAlign: TQ2GridAlignOptions;\n\n /* Sets the amount of columns to render within the grid at the 'MD' viewport size./\n @Prop({ reflect: true })\n mdColumns: TQ2GridColumnsOptions;\n\n /\n Sets the gap size between rows and columns within the grid at the 'MD' viewport size.\n * Gap values utilize CSS variables to allow for easy theming and customization.\n * Visit the Style section to learn more.\n /\n @Prop({ reflect: true })\n mdGap: TQ2GridGapOptions;\n\n /\n Sets the horizontal alignment behavior of q2-grid-area components within a grid track at\n * the 'MD' viewport size.\n /\n @Prop({ reflect: true })\n mdJustify: TQ2GridJustifyOptions;\n\n /\n Sets the amount of rows to render within the grid at the 'MD' viewport size.\n * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n * components placed within the grid and the number of columns allowed per row.\n /\n @Prop({ reflect: true })\n mdRows: TQ2GridRowsOptions;\n\n /\n Sets the amount of rows to render within the grid at the baseline viewport size.\n * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n * components placed within the grid and the number of columns allowed per row.\n /\n @Prop({ reflect: true })\n rows: TQ2GridRowsOptions = 'auto';\n\n /\n Sets the vertical alignment behavior of q2-grid-area components within a grid track at\n * the 'SM' viewport size.\n /\n @Prop({ reflect: true })\n smAlign: TQ2GridAlignOptions;\n\n /* Sets the amount of columns to render within the grid at the 'SM' viewport size./\n @Prop({ reflect: true })\n smColumns: TQ2GridColumnsOptions;\n\n /\n Sets the gap size between rows and columns within the grid at the 'SM' viewport size.\n * Gap values utilize CSS variables to allow for easy theming and customization.\n * Visit the Style section to learn more.\n /\n @Prop({ reflect: true })\n smGap: TQ2GridGapOptions;\n\n /\n Sets the horizontal alignment behavior of q2-grid-area components within a grid track at\n * the 'SM' viewport size.\n /\n @Prop({ reflect: true })\n smJustify: TQ2GridJustifyOptions;\n\n /\n Sets the amount of rows to render within the grid at the 'SM' viewport size.\n * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n * components placed within the grid and the number of columns allowed per row.\n /\n @Prop({ reflect: true })\n smRows: TQ2GridRowsOptions;\n\n /\n Sets the vertical alignment behavior of q2-grid-area components within a grid track at the\n * 'XL' viewport size.\n /\n @Prop({ reflect: true })\n xlAlign: TQ2GridAlignOptions;\n\n /* Sets the amount of columns to render within the grid at the 'XL' viewport size./\n @Prop({ reflect: true })\n xlColumns: TQ2GridColumnsOptions;\n\n /\n Sets the gap size between rows and columns within the grid at the 'XL' viewport size.\n * Gap values utilize CSS variables to allow for easy theming and customization.\n * Visit the Style section to learn more.\n /\n @Prop({ reflect: true })\n xlGap: TQ2GridGapOptions;\n\n /\n Sets the horizontal alignment behavior of q2-grid-area components within a grid track at\n * the 'XL' viewport size.\n /\n @Prop({ reflect: true })\n xlJustify: TQ2GridJustifyOptions;\n\n /\n Sets the amount of rows to render within the grid at the 'XL' viewport size.\n * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n * components placed within the grid and the number of columns allowed per row.\n /\n @Prop({ reflect: true })\n xlRows: TQ2GridRowsOptions;\n\n /\n Sets the vertical alignment behavior of q2-grid-area components within a grid track at\n * the 'XS' viewport size.\n /\n @Prop({ reflect: true })\n xsAlign: TQ2GridAlignOptions;\n\n /* Sets the amount of columns to render within the grid at the 'XS' viewport size./\n @Prop({ reflect: true })\n xsColumns: TQ2GridColumnsOptions;\n\n /\n Sets the gap size between rows and columns within the grid at the 'XS' viewport size.\n * Gap values utilize CSS variables to allow for easy theming and customization.\n * Visit the Style section to learn more.\n /\n @Prop({ reflect: true })\n xsGap: TQ2GridGapOptions;\n\n /\n Sets the horizontal alignment behavior of q2-grid-area components within a grid track\n * at the 'XS' viewport size.\n /\n @Prop({ reflect: true })\n xsJustify: TQ2GridJustifyOptions;\n\n /\n Sets the amount of rows to render within the grid at the 'XS' viewport size.\n * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n * components placed within the grid and the number of columns allowed per row.\n */\n @Prop({ reflect: true })\n xsRows: TQ2GridRowsOptions;\n\n // #endregion\n // #region Local Methods\n\n get computedLgRows() {\n return this.lgRows \|\| this.computedMdRows;\n }\n\n get computedMdRows() {\n return this.mdRows \|\| this.computedSmRows;\n }\n\n get computedSmRows() {\n return this.smRows \|\| this.computedXsRows;\n }\n\n get computedXlRows() {\n return this.xlRows \|\| this.computedLgRows;\n }\n\n get computedXsRows() {\n return this.xsRows \|\| this.rows;\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const q2GridStyles: { [key: string]: string } = {\n // base:\n '--grid-template-columns': `repeat(${this.columns}, 1fr)`,\n '--grid-template-rows': this.rows === 'auto' ? this.rows : `repeat(${this.rows}, 1fr)`,\n '--grid-gap': `var(--comp-grid-gap-${this.gap})`,\n '--justify-items': this.justify,\n '--align-items': this.align,\n // xs:\n '--xs-grid-template-columns': `repeat(${this.xsColumns \|\| this.columns}, 1fr)`,\n '--xs-grid-template-rows':\n this.computedXsRows === 'auto' ? this.computedXsRows : `repeat(${this.computedXsRows}, 1fr)`,\n '--xs-grid-gap': `var(--comp-grid-gap-${this.xsGap \|\| this.gap})`,\n '--xs-justify-items': this.xsJustify \|\| this.justify,\n '--xs-align-items': this.xsAlign \|\| this.align,\n // sm:\n '--sm-grid-template-columns': `repeat(${this.smColumns \|\| this.xsColumns \|\| this.columns}, 1fr)`,\n '--sm-grid-template-rows':\n this.computedSmRows === 'auto' ? this.computedSmRows : `repeat(${this.computedSmRows}, 1fr)`,\n '--sm-grid-gap': `var(--comp-grid-gap-${this.smGap \|\| this.xsGap \|\| this.gap})`,\n '--sm-justify-items': this.smJustify \|\| this.xsJustify \|\| this.justify,\n '--sm-align-items': this.smAlign \|\| this.xsAlign \|\| this.align,\n // md:\n '--md-grid-template-columns': `repeat(${this.mdColumns \|\| this.smColumns \|\| this.xsColumns \|\| this.columns}, 1fr)`,\n '--md-grid-template-rows':\n this.computedMdRows === 'auto' ? this.computedMdRows : `repeat(${this.computedMdRows}, 1fr)`,\n '--md-grid-gap': `var(--comp-grid-gap-${this.mdGap \|\| this.smGap \|\| this.xsGap \|\| this.gap})`,\n '--md-justify-items': this.mdJustify \|\| this.smJustify \|\| this.xsJustify \|\| this.justify,\n '--md-align-items': this.mdAlign \|\| this.smAlign \|\| this.xsAlign \|\| this.align,\n // lg:\n '--lg-grid-template-columns': `repeat(${this.lgColumns \|\| this.mdColumns \|\| this.smColumns \|\| this.xsColumns \|\| this.columns}, 1fr)`,\n '--lg-grid-template-rows':\n this.computedLgRows === 'auto' ? this.computedLgRows : `repeat(${this.computedLgRows}, 1fr)`,\n '--lg-grid-gap': `var(--comp-grid-gap-${this.lgGap \|\| this.mdGap \|\| this.smGap \|\| this.xsGap \|\| this.gap})`,\n '--lg-justify-items': this.lgJustify \|\| this.mdJustify \|\| this.smJustify \|\| this.xsJustify \|\| this.justify,\n '--lg-align-items': this.lgAlign \|\| this.mdAlign \|\| this.smAlign \|\| this.xsAlign \|\| this.align,\n // xl:\n '--xl-grid-template-columns': `repeat(${this.xlColumns \|\| this.lgColumns \|\| this.mdColumns \|\| this.smColumns \|\| this.xsColumns \|\| this.columns}, 1fr)`,\n '--xl-grid-template-rows':\n this.computedXlRows === 'auto' ? this.computedXlRows : `repeat(${this.computedXlRows}, 1fr)`,\n '--xl-grid-gap': `var(--comp-grid-gap-${this.xlGap \|\| this.lgGap \|\| this.mdGap \|\| this.smGap \|\| this.xsGap \|\| this.gap})`,\n '--xl-justify-items':\n this.xlJustify \|\| this.lgJustify \|\| this.mdJustify \|\| this.smJustify \|\| this.xsJustify \|\| this.justify,\n '--xl-align-items':\n this.xlAlign \|\| this.lgAlign \|\| this.mdAlign \|\| this.smAlign \|\| this.xsAlign \|\| this.align,\n };\n return (\n <Fragment>\n <div\n style={q2GridStyles}\n class=\"q2-grid\"\n >\n <slot />\n </div>\n </Fragment>\n );\n }\n\n // #endregion\n}\n"],"version":3}
1	+ {"file":"q2-grid.entry.cjs.js","mappings":"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","names":["h","Fragment"],"sources":["src/components/q2-grid/q2-grid.scss?tag=q2-grid&encapsulation=shadow","src/components/q2-grid/q2-grid.tsx"],"sourcesContent":["@import '../../styles/functions.scss';\n@import '../../styles/variables.scss';\n@import './variables';\n\n.q2-grid {\n // computed:\n --comp-grid-gap-none: #{var-list(--tct-grid-gap-none, --app-scale-0x, 0px)};\n --comp-grid-gap-compact: #{var-list(--tct-grid-gap-compact, --app-scale-1x, 5px)};\n --comp-grid-gap-normal: #{var-list(--tct-grid-gap-normal, --app-scale-3x, 15px)};\n --comp-grid-gap-comfortable: #{var-list(--tct-grid-gap-comfortable, --app-scale-5x, 25px)};\n // Reset form spacing variables to prevent double-spacing when q2-grid is used\n // inside q2-form. The grid's gap property handles all spacing between children,\n // so form field margins should be removed to avoid conflicting spacing.\n // This same reset is present on the q2-form. These resets cover the scenario\n // where the q2-grid is used with form elements, but q2-form is not used.\n --tct-input-margin: 0;\n --tct-select-margin: 0;\n --tct-calendar-margin: 0;\n --tct-file-picker-margin: 0;\n --tct-textarea-margin: 0;\n --tct-checkbox-group-margin: 0;\n --tct-radio-group-margin: 0;\n // base:\n --grid-template-columns: '';\n --grid-template-rows: '';\n --grid-gap: '';\n --justify-items: '';\n --align-items: '';\n // xs:\n --xs-grid-template-columns: '';\n --xs-grid-template-rows: '';\n --xs-grid-gap: '';\n --xs-justify-items: '';\n --xs-align-items: '';\n // sm:\n --sm-grid-template-columns: '';\n --sm-grid-template-rows: '';\n --sm-grid-gap: '';\n --sm-justify-items: '';\n --sm-align-items: '';\n // md:\n --md-grid-template-columns: '';\n --md-grid-template-rows: '';\n --md-grid-gap: '';\n --md-justify-items: '';\n --md-align-items: '';\n // lg:\n --lg-grid-template-columns: '';\n --lg-grid-template-rows: '';\n --lg-grid-gap: '';\n --lg-justify-items: '';\n --lg-align-items: '';\n // xl:\n --xl-grid-template-columns: '';\n --xl-grid-template-rows: '';\n --xl-grid-gap: '';\n --xl-justify-items: '';\n --xl-align-items: '';\n // q2-grid styles w/o prop configs:\n display: grid;\n width: 100%;\n height: 100%;\n grid-auto-rows: auto;\n grid-auto-columns: 1fr;\n grid-auto-flow: row;\n justify-content: center;\n align-content: center;\n}\n// base:\n@include generate-q2-grid-styles(\n var(--grid-template-columns),\n var(--grid-template-rows),\n var(--grid-gap),\n var(--justify-items),\n var(--align-items)\n);\n// xs, sm, md, lg, xl:\n@each $breakpoint in $breakpoint-list {\n @include breakpoint($breakpoint) {\n @include generate-q2-grid-styles(\n var(--#{$breakpoint}-grid-template-columns),\n var(--#{$breakpoint}-grid-template-rows),\n var(--#{$breakpoint}-grid-gap),\n var(--#{$breakpoint}-justify-items),\n var(--#{$breakpoint}-align-items)\n );\n }\n}\n","import { Component, Element, h, Fragment, Prop } from '@stencil/core';\n\nexport type TQ2GridColumnsOptions = number;\nexport type TQ2GridRowsOptions = 'auto' \| number;\nexport type TQ2GridGapOptions = 'none' \| 'compact' \| 'normal' \| 'comfortable';\nexport type TQ2GridJustifyOptions = 'stretch' \| 'start' \| 'center' \| 'end';\nexport type TQ2GridAlignOptions = 'stretch' \| 'start' \| 'center' \| 'end';\n\n/*\n @name Grid\n * @category Display\n * @summary Use for responsive grid layouts with flexible rows and columns.\n /\n@Component({ tag: 'q2-grid', shadow: true, styleUrl: 'q2-grid.scss' })\nexport class Q2Grid {\n // #region Own Properties\n\n /\n Tracks whether the `gap` attribute was explicitly set on this element at mount.\n * When false (and the grid is inside a q2-form), the grid's gap defers to the\n * form's --comp-spacing so form+grid matches form-only spacing without the\n * consumer having to mirror tokens.\n /\n private hasExplicitGap = false;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n element: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /\n Sets the vertical alignment behavior of q2-grid-area components within a grid track at\n * the baseline viewport size.\n /\n @Prop({ reflect: true })\n align: TQ2GridAlignOptions = 'stretch';\n\n /* Sets the amount of columns to render within the grid at the baseline viewport size./\n @Prop({ reflect: true })\n columns: TQ2GridColumnsOptions = 12;\n\n /\n Sets the gap size between rows and columns within the grid at the baseline viewport size.\n * Gap values utilize CSS variables to allow for easy theming and customization.\n * Visit the Style section to learn more.\n /\n @Prop({ reflect: true })\n gap: TQ2GridGapOptions = 'normal';\n\n /\n Sets the horizontal alignment behavior of q2-grid-area components within a grid track\n * at the baseline viewport size.\n /\n @Prop({ reflect: true })\n justify: TQ2GridJustifyOptions = 'stretch';\n\n /\n Sets the vertical alignment behavior of q2-grid-area components within a grid track at the\n * 'LG' viewport size.\n /\n @Prop({ reflect: true })\n lgAlign: TQ2GridAlignOptions;\n\n /* Sets the amount of columns to render within the grid at the 'LG' viewport size./\n @Prop({ reflect: true })\n lgColumns: TQ2GridColumnsOptions;\n\n /\n Sets the gap size between rows and columns within the grid at the 'LG' viewport size.\n * Gap values utilize CSS variables to allow for easy theming and customization.\n * Visit the Style section to learn more.\n /\n @Prop({ reflect: true })\n lgGap: TQ2GridGapOptions;\n\n /\n Sets the horizontal alignment behavior of q2-grid-area components within a grid track at\n * the 'LG' viewport size.\n /\n @Prop({ reflect: true })\n lgJustify: TQ2GridJustifyOptions;\n\n /\n Sets the amount of rows to render within the grid at the 'LG' viewport size.\n * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n * components placed within the grid and the number of columns allowed per row.\n /\n @Prop({ reflect: true })\n lgRows: TQ2GridRowsOptions;\n\n /\n Sets the vertical alignment behavior of q2-grid-area components within a grid track at\n * the 'MD' viewport size.\n /\n @Prop({ reflect: true })\n mdAlign: TQ2GridAlignOptions;\n\n /* Sets the amount of columns to render within the grid at the 'MD' viewport size./\n @Prop({ reflect: true })\n mdColumns: TQ2GridColumnsOptions;\n\n /\n Sets the gap size between rows and columns within the grid at the 'MD' viewport size.\n * Gap values utilize CSS variables to allow for easy theming and customization.\n * Visit the Style section to learn more.\n /\n @Prop({ reflect: true })\n mdGap: TQ2GridGapOptions;\n\n /\n Sets the horizontal alignment behavior of q2-grid-area components within a grid track at\n * the 'MD' viewport size.\n /\n @Prop({ reflect: true })\n mdJustify: TQ2GridJustifyOptions;\n\n /\n Sets the amount of rows to render within the grid at the 'MD' viewport size.\n * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n * components placed within the grid and the number of columns allowed per row.\n /\n @Prop({ reflect: true })\n mdRows: TQ2GridRowsOptions;\n\n /\n Sets the amount of rows to render within the grid at the baseline viewport size.\n * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n * components placed within the grid and the number of columns allowed per row.\n /\n @Prop({ reflect: true })\n rows: TQ2GridRowsOptions = 'auto';\n\n /\n Sets the vertical alignment behavior of q2-grid-area components within a grid track at\n * the 'SM' viewport size.\n /\n @Prop({ reflect: true })\n smAlign: TQ2GridAlignOptions;\n\n /* Sets the amount of columns to render within the grid at the 'SM' viewport size./\n @Prop({ reflect: true })\n smColumns: TQ2GridColumnsOptions;\n\n /\n Sets the gap size between rows and columns within the grid at the 'SM' viewport size.\n * Gap values utilize CSS variables to allow for easy theming and customization.\n * Visit the Style section to learn more.\n /\n @Prop({ reflect: true })\n smGap: TQ2GridGapOptions;\n\n /\n Sets the horizontal alignment behavior of q2-grid-area components within a grid track at\n * the 'SM' viewport size.\n /\n @Prop({ reflect: true })\n smJustify: TQ2GridJustifyOptions;\n\n /\n Sets the amount of rows to render within the grid at the 'SM' viewport size.\n * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n * components placed within the grid and the number of columns allowed per row.\n /\n @Prop({ reflect: true })\n smRows: TQ2GridRowsOptions;\n\n /\n Sets the vertical alignment behavior of q2-grid-area components within a grid track at the\n * 'XL' viewport size.\n /\n @Prop({ reflect: true })\n xlAlign: TQ2GridAlignOptions;\n\n /* Sets the amount of columns to render within the grid at the 'XL' viewport size./\n @Prop({ reflect: true })\n xlColumns: TQ2GridColumnsOptions;\n\n /\n Sets the gap size between rows and columns within the grid at the 'XL' viewport size.\n * Gap values utilize CSS variables to allow for easy theming and customization.\n * Visit the Style section to learn more.\n /\n @Prop({ reflect: true })\n xlGap: TQ2GridGapOptions;\n\n /\n Sets the horizontal alignment behavior of q2-grid-area components within a grid track at\n * the 'XL' viewport size.\n /\n @Prop({ reflect: true })\n xlJustify: TQ2GridJustifyOptions;\n\n /\n Sets the amount of rows to render within the grid at the 'XL' viewport size.\n * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n * components placed within the grid and the number of columns allowed per row.\n /\n @Prop({ reflect: true })\n xlRows: TQ2GridRowsOptions;\n\n /\n Sets the vertical alignment behavior of q2-grid-area components within a grid track at\n * the 'XS' viewport size.\n /\n @Prop({ reflect: true })\n xsAlign: TQ2GridAlignOptions;\n\n /* Sets the amount of columns to render within the grid at the 'XS' viewport size./\n @Prop({ reflect: true })\n xsColumns: TQ2GridColumnsOptions;\n\n /\n Sets the gap size between rows and columns within the grid at the 'XS' viewport size.\n * Gap values utilize CSS variables to allow for easy theming and customization.\n * Visit the Style section to learn more.\n /\n @Prop({ reflect: true })\n xsGap: TQ2GridGapOptions;\n\n /\n Sets the horizontal alignment behavior of q2-grid-area components within a grid track\n * at the 'XS' viewport size.\n /\n @Prop({ reflect: true })\n xsJustify: TQ2GridJustifyOptions;\n\n /\n Sets the amount of rows to render within the grid at the 'XS' viewport size.\n * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n * components placed within the grid and the number of columns allowed per row.\n */\n @Prop({ reflect: true })\n xsRows: TQ2GridRowsOptions;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n this.hasExplicitGap = this.element.hasAttribute('gap');\n }\n\n // #endregion\n // #region Local Methods\n\n get computedLgRows() {\n return this.lgRows \|\| this.computedMdRows;\n }\n\n get computedMdRows() {\n return this.mdRows \|\| this.computedSmRows;\n }\n\n get computedSmRows() {\n return this.smRows \|\| this.computedXsRows;\n }\n\n get computedXlRows() {\n return this.xlRows \|\| this.computedLgRows;\n }\n\n get computedXsRows() {\n return this.xsRows \|\| this.rows;\n }\n\n private gapValue(...keys: TQ2GridGapOptions[]) {\n const resolved = keys.find(k => !!k);\n if (resolved === this.gap && !this.hasExplicitGap) {\n // No explicit gap at this breakpoint — inherit q2-form's spacing if present,\n // otherwise fall back to the normal gap token.\n return `var(--comp-spacing, var(--comp-grid-gap-${this.gap}))`;\n }\n return `var(--comp-grid-gap-${resolved})`;\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const q2GridStyles: { [key: string]: string } = {\n // base:\n '--grid-template-columns': `repeat(${this.columns}, 1fr)`,\n '--grid-template-rows': this.rows === 'auto' ? this.rows : `repeat(${this.rows}, 1fr)`,\n '--grid-gap': this.gapValue(this.gap),\n '--justify-items': this.justify,\n '--align-items': this.align,\n // xs:\n '--xs-grid-template-columns': `repeat(${this.xsColumns \|\| this.columns}, 1fr)`,\n '--xs-grid-template-rows':\n this.computedXsRows === 'auto' ? this.computedXsRows : `repeat(${this.computedXsRows}, 1fr)`,\n '--xs-grid-gap': this.gapValue(this.xsGap, this.gap),\n '--xs-justify-items': this.xsJustify \|\| this.justify,\n '--xs-align-items': this.xsAlign \|\| this.align,\n // sm:\n '--sm-grid-template-columns': `repeat(${this.smColumns \|\| this.xsColumns \|\| this.columns}, 1fr)`,\n '--sm-grid-template-rows':\n this.computedSmRows === 'auto' ? this.computedSmRows : `repeat(${this.computedSmRows}, 1fr)`,\n '--sm-grid-gap': this.gapValue(this.smGap, this.xsGap, this.gap),\n '--sm-justify-items': this.smJustify \|\| this.xsJustify \|\| this.justify,\n '--sm-align-items': this.smAlign \|\| this.xsAlign \|\| this.align,\n // md:\n '--md-grid-template-columns': `repeat(${this.mdColumns \|\| this.smColumns \|\| this.xsColumns \|\| this.columns}, 1fr)`,\n '--md-grid-template-rows':\n this.computedMdRows === 'auto' ? this.computedMdRows : `repeat(${this.computedMdRows}, 1fr)`,\n '--md-grid-gap': this.gapValue(this.mdGap, this.smGap, this.xsGap, this.gap),\n '--md-justify-items': this.mdJustify \|\| this.smJustify \|\| this.xsJustify \|\| this.justify,\n '--md-align-items': this.mdAlign \|\| this.smAlign \|\| this.xsAlign \|\| this.align,\n // lg:\n '--lg-grid-template-columns': `repeat(${this.lgColumns \|\| this.mdColumns \|\| this.smColumns \|\| this.xsColumns \|\| this.columns}, 1fr)`,\n '--lg-grid-template-rows':\n this.computedLgRows === 'auto' ? this.computedLgRows : `repeat(${this.computedLgRows}, 1fr)`,\n '--lg-grid-gap': this.gapValue(this.lgGap, this.mdGap, this.smGap, this.xsGap, this.gap),\n '--lg-justify-items': this.lgJustify \|\| this.mdJustify \|\| this.smJustify \|\| this.xsJustify \|\| this.justify,\n '--lg-align-items': this.lgAlign \|\| this.mdAlign \|\| this.smAlign \|\| this.xsAlign \|\| this.align,\n // xl:\n '--xl-grid-template-columns': `repeat(${this.xlColumns \|\| this.lgColumns \|\| this.mdColumns \|\| this.smColumns \|\| this.xsColumns \|\| this.columns}, 1fr)`,\n '--xl-grid-template-rows':\n this.computedXlRows === 'auto' ? this.computedXlRows : `repeat(${this.computedXlRows}, 1fr)`,\n '--xl-grid-gap': this.gapValue(this.xlGap, this.lgGap, this.mdGap, this.smGap, this.xsGap, this.gap),\n '--xl-justify-items':\n this.xlJustify \|\| this.lgJustify \|\| this.mdJustify \|\| this.smJustify \|\| this.xsJustify \|\| this.justify,\n '--xl-align-items':\n this.xlAlign \|\| this.lgAlign \|\| this.mdAlign \|\| this.smAlign \|\| this.xsAlign \|\| this.align,\n };\n return (\n <Fragment>\n <div\n style={q2GridStyles}\n class=\"q2-grid\"\n >\n <slot />\n </div>\n </Fragment>\n );\n }\n\n // #endregion\n}\n"],"version":3}

package/dist/cjs/q2-grid.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-grid.entry.cjs.js","sources":["src/components/q2-grid/q2-grid.scss?tag=q2-grid&encapsulation=shadow","src/components/q2-grid/q2-grid.tsx"],"sourcesContent":["@import '../../styles/functions.scss';\n@import '../../styles/variables.scss';\n\n.q2-grid {\n // computed:\n --comp-grid-gap-none: #{var-list(--tct-grid-gap-none, --app-scale-0x, 0px)};\n --comp-grid-gap-compact: #{var-list(--tct-grid-gap-compact, --app-scale-1x, 5px)};\n --comp-grid-gap-normal: #{var-list(--tct-grid-gap-normal, --app-scale-3x, 15px)};\n --comp-grid-gap-comfortable: #{var-list(--tct-grid-gap-comfortable, --app-scale-5x, 25px)};\n // base:\n --grid-template-columns: '';\n --grid-template-rows: '';\n --grid-gap: '';\n --justify-items: '';\n --align-items: '';\n // xs:\n --xs-grid-template-columns: '';\n --xs-grid-template-rows: '';\n --xs-grid-gap: '';\n --xs-justify-items: '';\n --xs-align-items: '';\n // sm:\n --sm-grid-template-columns: '';\n --sm-grid-template-rows: '';\n --sm-grid-gap: '';\n --sm-justify-items: '';\n --sm-align-items: '';\n // md:\n --md-grid-template-columns: '';\n --md-grid-template-rows: '';\n --md-grid-gap: '';\n --md-justify-items: '';\n --md-align-items: '';\n // lg:\n --lg-grid-template-columns: '';\n --lg-grid-template-rows: '';\n --lg-grid-gap: '';\n --lg-justify-items: '';\n --lg-align-items: '';\n // xl:\n --xl-grid-template-columns: '';\n --xl-grid-template-rows: '';\n --xl-grid-gap: '';\n --xl-justify-items: '';\n --xl-align-items: '';\n // q2-grid styles w/o prop configs:\n display: grid;\n width: 100%;\n height: 100%;\n grid-auto-rows: auto;\n grid-auto-columns: 1fr;\n grid-auto-flow: row;\n justify-content: center;\n align-content: center;\n}\n// base:\n@include generate-q2-grid-styles(\n var(--grid-template-columns),\n var(--grid-template-rows),\n var(--grid-gap),\n var(--justify-items),\n var(--align-items)\n);\n// xs, sm, md, lg, xl:\n@each $breakpoint in $breakpoint-list {\n @include breakpoint($breakpoint) {\n @include generate-q2-grid-styles(\n var(--#{$breakpoint}-grid-template-columns),\n var(--#{$breakpoint}-grid-template-rows),\n var(--#{$breakpoint}-grid-gap),\n var(--#{$breakpoint}-justify-items),\n var(--#{$breakpoint}-align-items)\n );\n }\n}\n","import { Component, h, Fragment, Prop } from '@stencil/core';\n\nexport type TQ2GridColumnsOptions = number;\nexport type TQ2GridRowsOptions = 'auto' \| number;\nexport type TQ2GridGapOptions = 'none' \| 'compact' \| 'normal' \| 'comfortable';\nexport type TQ2GridJustifyOptions = 'stretch' \| 'start' \| 'center' \| 'end';\nexport type TQ2GridAlignOptions = 'stretch' \| 'start' \| 'center' \| 'end';\n\n/*\n @name Grid\n * @category Display\n * @summary Use for responsive grid layouts with flexible rows and columns.\n /\n@Component({ tag: 'q2-grid', shadow: true, styleUrl: 'q2-grid.scss' })\nexport class Q2Grid {\n // #region Public Property API\n\n /\n Sets the vertical alignment behavior of q2-grid-area components within a grid track at\n * the baseline viewport size.\n /\n @Prop({ reflect: true })\n align: TQ2GridAlignOptions = 'stretch';\n\n /* Sets the amount of columns to render within the grid at the baseline viewport size./\n @Prop({ reflect: true })\n columns: TQ2GridColumnsOptions = 12;\n\n /\n Sets the gap size between rows and columns within the grid at the baseline viewport size.\n * Gap values utilize CSS variables to allow for easy theming and customization.\n * Visit the Style section to learn more.\n /\n @Prop({ reflect: true })\n gap: TQ2GridGapOptions = 'normal';\n\n /\n Sets the horizontal alignment behavior of q2-grid-area components within a grid track\n * at the baseline viewport size.\n /\n @Prop({ reflect: true })\n justify: TQ2GridJustifyOptions = 'stretch';\n\n /\n Sets the vertical alignment behavior of q2-grid-area components within a grid track at the\n * 'LG' viewport size.\n /\n @Prop({ reflect: true })\n lgAlign: TQ2GridAlignOptions;\n\n /* Sets the amount of columns to render within the grid at the 'LG' viewport size./\n @Prop({ reflect: true })\n lgColumns: TQ2GridColumnsOptions;\n\n /\n Sets the gap size between rows and columns within the grid at the 'LG' viewport size.\n * Gap values utilize CSS variables to allow for easy theming and customization.\n * Visit the Style section to learn more.\n /\n @Prop({ reflect: true })\n lgGap: TQ2GridGapOptions;\n\n /\n Sets the horizontal alignment behavior of q2-grid-area components within a grid track at\n * the 'LG' viewport size.\n /\n @Prop({ reflect: true })\n lgJustify: TQ2GridJustifyOptions;\n\n /\n Sets the amount of rows to render within the grid at the 'LG' viewport size.\n * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n * components placed within the grid and the number of columns allowed per row.\n /\n @Prop({ reflect: true })\n lgRows: TQ2GridRowsOptions;\n\n /\n Sets the vertical alignment behavior of q2-grid-area components within a grid track at\n * the 'MD' viewport size.\n /\n @Prop({ reflect: true })\n mdAlign: TQ2GridAlignOptions;\n\n /* Sets the amount of columns to render within the grid at the 'MD' viewport size./\n @Prop({ reflect: true })\n mdColumns: TQ2GridColumnsOptions;\n\n /\n Sets the gap size between rows and columns within the grid at the 'MD' viewport size.\n * Gap values utilize CSS variables to allow for easy theming and customization.\n * Visit the Style section to learn more.\n /\n @Prop({ reflect: true })\n mdGap: TQ2GridGapOptions;\n\n /\n Sets the horizontal alignment behavior of q2-grid-area components within a grid track at\n * the 'MD' viewport size.\n /\n @Prop({ reflect: true })\n mdJustify: TQ2GridJustifyOptions;\n\n /\n Sets the amount of rows to render within the grid at the 'MD' viewport size.\n * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n * components placed within the grid and the number of columns allowed per row.\n /\n @Prop({ reflect: true })\n mdRows: TQ2GridRowsOptions;\n\n /\n Sets the amount of rows to render within the grid at the baseline viewport size.\n * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n * components placed within the grid and the number of columns allowed per row.\n /\n @Prop({ reflect: true })\n rows: TQ2GridRowsOptions = 'auto';\n\n /\n Sets the vertical alignment behavior of q2-grid-area components within a grid track at\n * the 'SM' viewport size.\n /\n @Prop({ reflect: true })\n smAlign: TQ2GridAlignOptions;\n\n /* Sets the amount of columns to render within the grid at the 'SM' viewport size./\n @Prop({ reflect: true })\n smColumns: TQ2GridColumnsOptions;\n\n /\n Sets the gap size between rows and columns within the grid at the 'SM' viewport size.\n * Gap values utilize CSS variables to allow for easy theming and customization.\n * Visit the Style section to learn more.\n /\n @Prop({ reflect: true })\n smGap: TQ2GridGapOptions;\n\n /\n Sets the horizontal alignment behavior of q2-grid-area components within a grid track at\n * the 'SM' viewport size.\n /\n @Prop({ reflect: true })\n smJustify: TQ2GridJustifyOptions;\n\n /\n Sets the amount of rows to render within the grid at the 'SM' viewport size.\n * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n * components placed within the grid and the number of columns allowed per row.\n /\n @Prop({ reflect: true })\n smRows: TQ2GridRowsOptions;\n\n /\n Sets the vertical alignment behavior of q2-grid-area components within a grid track at the\n * 'XL' viewport size.\n /\n @Prop({ reflect: true })\n xlAlign: TQ2GridAlignOptions;\n\n /* Sets the amount of columns to render within the grid at the 'XL' viewport size./\n @Prop({ reflect: true })\n xlColumns: TQ2GridColumnsOptions;\n\n /\n Sets the gap size between rows and columns within the grid at the 'XL' viewport size.\n * Gap values utilize CSS variables to allow for easy theming and customization.\n * Visit the Style section to learn more.\n /\n @Prop({ reflect: true })\n xlGap: TQ2GridGapOptions;\n\n /\n Sets the horizontal alignment behavior of q2-grid-area components within a grid track at\n * the 'XL' viewport size.\n /\n @Prop({ reflect: true })\n xlJustify: TQ2GridJustifyOptions;\n\n /\n Sets the amount of rows to render within the grid at the 'XL' viewport size.\n * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n * components placed within the grid and the number of columns allowed per row.\n /\n @Prop({ reflect: true })\n xlRows: TQ2GridRowsOptions;\n\n /\n Sets the vertical alignment behavior of q2-grid-area components within a grid track at\n * the 'XS' viewport size.\n /\n @Prop({ reflect: true })\n xsAlign: TQ2GridAlignOptions;\n\n /* Sets the amount of columns to render within the grid at the 'XS' viewport size./\n @Prop({ reflect: true })\n xsColumns: TQ2GridColumnsOptions;\n\n /\n Sets the gap size between rows and columns within the grid at the 'XS' viewport size.\n * Gap values utilize CSS variables to allow for easy theming and customization.\n * Visit the Style section to learn more.\n /\n @Prop({ reflect: true })\n xsGap: TQ2GridGapOptions;\n\n /\n Sets the horizontal alignment behavior of q2-grid-area components within a grid track\n * at the 'XS' viewport size.\n /\n @Prop({ reflect: true })\n xsJustify: TQ2GridJustifyOptions;\n\n /\n Sets the amount of rows to render within the grid at the 'XS' viewport size.\n * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n * components placed within the grid and the number of columns allowed per row.\n */\n @Prop({ reflect: true })\n xsRows: TQ2GridRowsOptions;\n\n // #endregion\n // #region Local Methods\n\n get computedLgRows() {\n return this.lgRows \|\| this.computedMdRows;\n }\n\n get computedMdRows() {\n return this.mdRows \|\| this.computedSmRows;\n }\n\n get computedSmRows() {\n return this.smRows \|\| this.computedXsRows;\n }\n\n get computedXlRows() {\n return this.xlRows \|\| this.computedLgRows;\n }\n\n get computedXsRows() {\n return this.xsRows \|\| this.rows;\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const q2GridStyles: { [key: string]: string } = {\n // base:\n '--grid-template-columns': `repeat(${this.columns}, 1fr)`,\n '--grid-template-rows': this.rows === 'auto' ? this.rows : `repeat(${this.rows}, 1fr)`,\n '--grid-gap': `var(--comp-grid-gap-${this.gap})`,\n '--justify-items': this.justify,\n '--align-items': this.align,\n // xs:\n '--xs-grid-template-columns': `repeat(${this.xsColumns \|\| this.columns}, 1fr)`,\n '--xs-grid-template-rows':\n this.computedXsRows === 'auto' ? this.computedXsRows : `repeat(${this.computedXsRows}, 1fr)`,\n '--xs-grid-gap': `var(--comp-grid-gap-${this.xsGap \|\| this.gap})`,\n '--xs-justify-items': this.xsJustify \|\| this.justify,\n '--xs-align-items': this.xsAlign \|\| this.align,\n // sm:\n '--sm-grid-template-columns': `repeat(${this.smColumns \|\| this.xsColumns \|\| this.columns}, 1fr)`,\n '--sm-grid-template-rows':\n this.computedSmRows === 'auto' ? this.computedSmRows : `repeat(${this.computedSmRows}, 1fr)`,\n '--sm-grid-gap': `var(--comp-grid-gap-${this.smGap \|\| this.xsGap \|\| this.gap})`,\n '--sm-justify-items': this.smJustify \|\| this.xsJustify \|\| this.justify,\n '--sm-align-items': this.smAlign \|\| this.xsAlign \|\| this.align,\n // md:\n '--md-grid-template-columns': `repeat(${this.mdColumns \|\| this.smColumns \|\| this.xsColumns \|\| this.columns}, 1fr)`,\n '--md-grid-template-rows':\n this.computedMdRows === 'auto' ? this.computedMdRows : `repeat(${this.computedMdRows}, 1fr)`,\n '--md-grid-gap': `var(--comp-grid-gap-${this.mdGap \|\| this.smGap \|\| this.xsGap \|\| this.gap})`,\n '--md-justify-items': this.mdJustify \|\| this.smJustify \|\| this.xsJustify \|\| this.justify,\n '--md-align-items': this.mdAlign \|\| this.smAlign \|\| this.xsAlign \|\| this.align,\n // lg:\n '--lg-grid-template-columns': `repeat(${this.lgColumns \|\| this.mdColumns \|\| this.smColumns \|\| this.xsColumns \|\| this.columns}, 1fr)`,\n '--lg-grid-template-rows':\n this.computedLgRows === 'auto' ? this.computedLgRows : `repeat(${this.computedLgRows}, 1fr)`,\n '--lg-grid-gap': `var(--comp-grid-gap-${this.lgGap \|\| this.mdGap \|\| this.smGap \|\| this.xsGap \|\| this.gap})`,\n '--lg-justify-items': this.lgJustify \|\| this.mdJustify \|\| this.smJustify \|\| this.xsJustify \|\| this.justify,\n '--lg-align-items': this.lgAlign \|\| this.mdAlign \|\| this.smAlign \|\| this.xsAlign \|\| this.align,\n // xl:\n '--xl-grid-template-columns': `repeat(${this.xlColumns \|\| this.lgColumns \|\| this.mdColumns \|\| this.smColumns \|\| this.xsColumns \|\| this.columns}, 1fr)`,\n '--xl-grid-template-rows':\n this.computedXlRows === 'auto' ? this.computedXlRows : `repeat(${this.computedXlRows}, 1fr)`,\n '--xl-grid-gap': `var(--comp-grid-gap-${this.xlGap \|\| this.lgGap \|\| this.mdGap \|\| this.smGap \|\| this.xsGap \|\| this.gap})`,\n '--xl-justify-items':\n this.xlJustify \|\| this.lgJustify \|\| this.mdJustify \|\| this.smJustify \|\| this.xsJustify \|\| this.justify,\n '--xl-align-items':\n this.xlAlign \|\| this.lgAlign \|\| this.mdAlign \|\| this.smAlign \|\| this.xsAlign \|\| this.align,\n };\n return (\n <Fragment>\n <div\n style={q2GridStyles}\n class=\"q2-grid\"\n >\n <slot />\n </div>\n </Fragment>\n );\n }\n\n // #endregion\n}\n"],"names":["h","Fragment"],"mappings":"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"}
1	+ {"version":3,"file":"q2-grid.entry.cjs.js","sources":["src/components/q2-grid/q2-grid.scss?tag=q2-grid&encapsulation=shadow","src/components/q2-grid/q2-grid.tsx"],"sourcesContent":["@import '../../styles/functions.scss';\n@import '../../styles/variables.scss';\n@import './variables';\n\n.q2-grid {\n // computed:\n --comp-grid-gap-none: #{var-list(--tct-grid-gap-none, --app-scale-0x, 0px)};\n --comp-grid-gap-compact: #{var-list(--tct-grid-gap-compact, --app-scale-1x, 5px)};\n --comp-grid-gap-normal: #{var-list(--tct-grid-gap-normal, --app-scale-3x, 15px)};\n --comp-grid-gap-comfortable: #{var-list(--tct-grid-gap-comfortable, --app-scale-5x, 25px)};\n // Reset form spacing variables to prevent double-spacing when q2-grid is used\n // inside q2-form. The grid's gap property handles all spacing between children,\n // so form field margins should be removed to avoid conflicting spacing.\n // This same reset is present on the q2-form. These resets cover the scenario\n // where the q2-grid is used with form elements, but q2-form is not used.\n --tct-input-margin: 0;\n --tct-select-margin: 0;\n --tct-calendar-margin: 0;\n --tct-file-picker-margin: 0;\n --tct-textarea-margin: 0;\n --tct-checkbox-group-margin: 0;\n --tct-radio-group-margin: 0;\n // base:\n --grid-template-columns: '';\n --grid-template-rows: '';\n --grid-gap: '';\n --justify-items: '';\n --align-items: '';\n // xs:\n --xs-grid-template-columns: '';\n --xs-grid-template-rows: '';\n --xs-grid-gap: '';\n --xs-justify-items: '';\n --xs-align-items: '';\n // sm:\n --sm-grid-template-columns: '';\n --sm-grid-template-rows: '';\n --sm-grid-gap: '';\n --sm-justify-items: '';\n --sm-align-items: '';\n // md:\n --md-grid-template-columns: '';\n --md-grid-template-rows: '';\n --md-grid-gap: '';\n --md-justify-items: '';\n --md-align-items: '';\n // lg:\n --lg-grid-template-columns: '';\n --lg-grid-template-rows: '';\n --lg-grid-gap: '';\n --lg-justify-items: '';\n --lg-align-items: '';\n // xl:\n --xl-grid-template-columns: '';\n --xl-grid-template-rows: '';\n --xl-grid-gap: '';\n --xl-justify-items: '';\n --xl-align-items: '';\n // q2-grid styles w/o prop configs:\n display: grid;\n width: 100%;\n height: 100%;\n grid-auto-rows: auto;\n grid-auto-columns: 1fr;\n grid-auto-flow: row;\n justify-content: center;\n align-content: center;\n}\n// base:\n@include generate-q2-grid-styles(\n var(--grid-template-columns),\n var(--grid-template-rows),\n var(--grid-gap),\n var(--justify-items),\n var(--align-items)\n);\n// xs, sm, md, lg, xl:\n@each $breakpoint in $breakpoint-list {\n @include breakpoint($breakpoint) {\n @include generate-q2-grid-styles(\n var(--#{$breakpoint}-grid-template-columns),\n var(--#{$breakpoint}-grid-template-rows),\n var(--#{$breakpoint}-grid-gap),\n var(--#{$breakpoint}-justify-items),\n var(--#{$breakpoint}-align-items)\n );\n }\n}\n","import { Component, Element, h, Fragment, Prop } from '@stencil/core';\n\nexport type TQ2GridColumnsOptions = number;\nexport type TQ2GridRowsOptions = 'auto' \| number;\nexport type TQ2GridGapOptions = 'none' \| 'compact' \| 'normal' \| 'comfortable';\nexport type TQ2GridJustifyOptions = 'stretch' \| 'start' \| 'center' \| 'end';\nexport type TQ2GridAlignOptions = 'stretch' \| 'start' \| 'center' \| 'end';\n\n/*\n @name Grid\n * @category Display\n * @summary Use for responsive grid layouts with flexible rows and columns.\n /\n@Component({ tag: 'q2-grid', shadow: true, styleUrl: 'q2-grid.scss' })\nexport class Q2Grid {\n // #region Own Properties\n\n /\n Tracks whether the `gap` attribute was explicitly set on this element at mount.\n * When false (and the grid is inside a q2-form), the grid's gap defers to the\n * form's --comp-spacing so form+grid matches form-only spacing without the\n * consumer having to mirror tokens.\n /\n private hasExplicitGap = false;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n element: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /\n Sets the vertical alignment behavior of q2-grid-area components within a grid track at\n * the baseline viewport size.\n /\n @Prop({ reflect: true })\n align: TQ2GridAlignOptions = 'stretch';\n\n /* Sets the amount of columns to render within the grid at the baseline viewport size./\n @Prop({ reflect: true })\n columns: TQ2GridColumnsOptions = 12;\n\n /\n Sets the gap size between rows and columns within the grid at the baseline viewport size.\n * Gap values utilize CSS variables to allow for easy theming and customization.\n * Visit the Style section to learn more.\n /\n @Prop({ reflect: true })\n gap: TQ2GridGapOptions = 'normal';\n\n /\n Sets the horizontal alignment behavior of q2-grid-area components within a grid track\n * at the baseline viewport size.\n /\n @Prop({ reflect: true })\n justify: TQ2GridJustifyOptions = 'stretch';\n\n /\n Sets the vertical alignment behavior of q2-grid-area components within a grid track at the\n * 'LG' viewport size.\n /\n @Prop({ reflect: true })\n lgAlign: TQ2GridAlignOptions;\n\n /* Sets the amount of columns to render within the grid at the 'LG' viewport size./\n @Prop({ reflect: true })\n lgColumns: TQ2GridColumnsOptions;\n\n /\n Sets the gap size between rows and columns within the grid at the 'LG' viewport size.\n * Gap values utilize CSS variables to allow for easy theming and customization.\n * Visit the Style section to learn more.\n /\n @Prop({ reflect: true })\n lgGap: TQ2GridGapOptions;\n\n /\n Sets the horizontal alignment behavior of q2-grid-area components within a grid track at\n * the 'LG' viewport size.\n /\n @Prop({ reflect: true })\n lgJustify: TQ2GridJustifyOptions;\n\n /\n Sets the amount of rows to render within the grid at the 'LG' viewport size.\n * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n * components placed within the grid and the number of columns allowed per row.\n /\n @Prop({ reflect: true })\n lgRows: TQ2GridRowsOptions;\n\n /\n Sets the vertical alignment behavior of q2-grid-area components within a grid track at\n * the 'MD' viewport size.\n /\n @Prop({ reflect: true })\n mdAlign: TQ2GridAlignOptions;\n\n /* Sets the amount of columns to render within the grid at the 'MD' viewport size./\n @Prop({ reflect: true })\n mdColumns: TQ2GridColumnsOptions;\n\n /\n Sets the gap size between rows and columns within the grid at the 'MD' viewport size.\n * Gap values utilize CSS variables to allow for easy theming and customization.\n * Visit the Style section to learn more.\n /\n @Prop({ reflect: true })\n mdGap: TQ2GridGapOptions;\n\n /\n Sets the horizontal alignment behavior of q2-grid-area components within a grid track at\n * the 'MD' viewport size.\n /\n @Prop({ reflect: true })\n mdJustify: TQ2GridJustifyOptions;\n\n /\n Sets the amount of rows to render within the grid at the 'MD' viewport size.\n * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n * components placed within the grid and the number of columns allowed per row.\n /\n @Prop({ reflect: true })\n mdRows: TQ2GridRowsOptions;\n\n /\n Sets the amount of rows to render within the grid at the baseline viewport size.\n * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n * components placed within the grid and the number of columns allowed per row.\n /\n @Prop({ reflect: true })\n rows: TQ2GridRowsOptions = 'auto';\n\n /\n Sets the vertical alignment behavior of q2-grid-area components within a grid track at\n * the 'SM' viewport size.\n /\n @Prop({ reflect: true })\n smAlign: TQ2GridAlignOptions;\n\n /* Sets the amount of columns to render within the grid at the 'SM' viewport size./\n @Prop({ reflect: true })\n smColumns: TQ2GridColumnsOptions;\n\n /\n Sets the gap size between rows and columns within the grid at the 'SM' viewport size.\n * Gap values utilize CSS variables to allow for easy theming and customization.\n * Visit the Style section to learn more.\n /\n @Prop({ reflect: true })\n smGap: TQ2GridGapOptions;\n\n /\n Sets the horizontal alignment behavior of q2-grid-area components within a grid track at\n * the 'SM' viewport size.\n /\n @Prop({ reflect: true })\n smJustify: TQ2GridJustifyOptions;\n\n /\n Sets the amount of rows to render within the grid at the 'SM' viewport size.\n * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n * components placed within the grid and the number of columns allowed per row.\n /\n @Prop({ reflect: true })\n smRows: TQ2GridRowsOptions;\n\n /\n Sets the vertical alignment behavior of q2-grid-area components within a grid track at the\n * 'XL' viewport size.\n /\n @Prop({ reflect: true })\n xlAlign: TQ2GridAlignOptions;\n\n /* Sets the amount of columns to render within the grid at the 'XL' viewport size./\n @Prop({ reflect: true })\n xlColumns: TQ2GridColumnsOptions;\n\n /\n Sets the gap size between rows and columns within the grid at the 'XL' viewport size.\n * Gap values utilize CSS variables to allow for easy theming and customization.\n * Visit the Style section to learn more.\n /\n @Prop({ reflect: true })\n xlGap: TQ2GridGapOptions;\n\n /\n Sets the horizontal alignment behavior of q2-grid-area components within a grid track at\n * the 'XL' viewport size.\n /\n @Prop({ reflect: true })\n xlJustify: TQ2GridJustifyOptions;\n\n /\n Sets the amount of rows to render within the grid at the 'XL' viewport size.\n * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n * components placed within the grid and the number of columns allowed per row.\n /\n @Prop({ reflect: true })\n xlRows: TQ2GridRowsOptions;\n\n /\n Sets the vertical alignment behavior of q2-grid-area components within a grid track at\n * the 'XS' viewport size.\n /\n @Prop({ reflect: true })\n xsAlign: TQ2GridAlignOptions;\n\n /* Sets the amount of columns to render within the grid at the 'XS' viewport size./\n @Prop({ reflect: true })\n xsColumns: TQ2GridColumnsOptions;\n\n /\n Sets the gap size between rows and columns within the grid at the 'XS' viewport size.\n * Gap values utilize CSS variables to allow for easy theming and customization.\n * Visit the Style section to learn more.\n /\n @Prop({ reflect: true })\n xsGap: TQ2GridGapOptions;\n\n /\n Sets the horizontal alignment behavior of q2-grid-area components within a grid track\n * at the 'XS' viewport size.\n /\n @Prop({ reflect: true })\n xsJustify: TQ2GridJustifyOptions;\n\n /\n Sets the amount of rows to render within the grid at the 'XS' viewport size.\n * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n * components placed within the grid and the number of columns allowed per row.\n */\n @Prop({ reflect: true })\n xsRows: TQ2GridRowsOptions;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n this.hasExplicitGap = this.element.hasAttribute('gap');\n }\n\n // #endregion\n // #region Local Methods\n\n get computedLgRows() {\n return this.lgRows \|\| this.computedMdRows;\n }\n\n get computedMdRows() {\n return this.mdRows \|\| this.computedSmRows;\n }\n\n get computedSmRows() {\n return this.smRows \|\| this.computedXsRows;\n }\n\n get computedXlRows() {\n return this.xlRows \|\| this.computedLgRows;\n }\n\n get computedXsRows() {\n return this.xsRows \|\| this.rows;\n }\n\n private gapValue(...keys: TQ2GridGapOptions[]) {\n const resolved = keys.find(k => !!k);\n if (resolved === this.gap && !this.hasExplicitGap) {\n // No explicit gap at this breakpoint — inherit q2-form's spacing if present,\n // otherwise fall back to the normal gap token.\n return `var(--comp-spacing, var(--comp-grid-gap-${this.gap}))`;\n }\n return `var(--comp-grid-gap-${resolved})`;\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const q2GridStyles: { [key: string]: string } = {\n // base:\n '--grid-template-columns': `repeat(${this.columns}, 1fr)`,\n '--grid-template-rows': this.rows === 'auto' ? this.rows : `repeat(${this.rows}, 1fr)`,\n '--grid-gap': this.gapValue(this.gap),\n '--justify-items': this.justify,\n '--align-items': this.align,\n // xs:\n '--xs-grid-template-columns': `repeat(${this.xsColumns \|\| this.columns}, 1fr)`,\n '--xs-grid-template-rows':\n this.computedXsRows === 'auto' ? this.computedXsRows : `repeat(${this.computedXsRows}, 1fr)`,\n '--xs-grid-gap': this.gapValue(this.xsGap, this.gap),\n '--xs-justify-items': this.xsJustify \|\| this.justify,\n '--xs-align-items': this.xsAlign \|\| this.align,\n // sm:\n '--sm-grid-template-columns': `repeat(${this.smColumns \|\| this.xsColumns \|\| this.columns}, 1fr)`,\n '--sm-grid-template-rows':\n this.computedSmRows === 'auto' ? this.computedSmRows : `repeat(${this.computedSmRows}, 1fr)`,\n '--sm-grid-gap': this.gapValue(this.smGap, this.xsGap, this.gap),\n '--sm-justify-items': this.smJustify \|\| this.xsJustify \|\| this.justify,\n '--sm-align-items': this.smAlign \|\| this.xsAlign \|\| this.align,\n // md:\n '--md-grid-template-columns': `repeat(${this.mdColumns \|\| this.smColumns \|\| this.xsColumns \|\| this.columns}, 1fr)`,\n '--md-grid-template-rows':\n this.computedMdRows === 'auto' ? this.computedMdRows : `repeat(${this.computedMdRows}, 1fr)`,\n '--md-grid-gap': this.gapValue(this.mdGap, this.smGap, this.xsGap, this.gap),\n '--md-justify-items': this.mdJustify \|\| this.smJustify \|\| this.xsJustify \|\| this.justify,\n '--md-align-items': this.mdAlign \|\| this.smAlign \|\| this.xsAlign \|\| this.align,\n // lg:\n '--lg-grid-template-columns': `repeat(${this.lgColumns \|\| this.mdColumns \|\| this.smColumns \|\| this.xsColumns \|\| this.columns}, 1fr)`,\n '--lg-grid-template-rows':\n this.computedLgRows === 'auto' ? this.computedLgRows : `repeat(${this.computedLgRows}, 1fr)`,\n '--lg-grid-gap': this.gapValue(this.lgGap, this.mdGap, this.smGap, this.xsGap, this.gap),\n '--lg-justify-items': this.lgJustify \|\| this.mdJustify \|\| this.smJustify \|\| this.xsJustify \|\| this.justify,\n '--lg-align-items': this.lgAlign \|\| this.mdAlign \|\| this.smAlign \|\| this.xsAlign \|\| this.align,\n // xl:\n '--xl-grid-template-columns': `repeat(${this.xlColumns \|\| this.lgColumns \|\| this.mdColumns \|\| this.smColumns \|\| this.xsColumns \|\| this.columns}, 1fr)`,\n '--xl-grid-template-rows':\n this.computedXlRows === 'auto' ? this.computedXlRows : `repeat(${this.computedXlRows}, 1fr)`,\n '--xl-grid-gap': this.gapValue(this.xlGap, this.lgGap, this.mdGap, this.smGap, this.xsGap, this.gap),\n '--xl-justify-items':\n this.xlJustify \|\| this.lgJustify \|\| this.mdJustify \|\| this.smJustify \|\| this.xsJustify \|\| this.justify,\n '--xl-align-items':\n this.xlAlign \|\| this.lgAlign \|\| this.mdAlign \|\| this.smAlign \|\| this.xsAlign \|\| this.align,\n };\n return (\n <Fragment>\n <div\n style={q2GridStyles}\n class=\"q2-grid\"\n >\n <slot />\n </div>\n </Fragment>\n );\n }\n\n // #endregion\n}\n"],"names":["h","Fragment"],"mappings":"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"}

package/dist/cjs/q2-icon.cjs.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 'use strict';
 var index = require('./index-BYXz4owL.js');
-var index$1 = require('./index-YvKoRT-t.js');
+var index$1 = require('./index-DmGkqdX2.js');
 var sprites = require('./sprites-DZZE7UFT.js');
 const a11y = "standard";

package/dist/cjs/q2-icon.cjs.entry.js.map CHANGED Viewed

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

package/dist/cjs/q2-icon.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-icon.entry.cjs.js","sources":["src/components/q2-icon/q2-icon.scss?tag=q2-icon&encapsulation=shadow","src/components/q2-icon/q2-icon.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n height: var(--tct-icon-size, 24px);\n width: var(--tct-icon-size, 24px);\n position: relative;\n fill: none;\n}\n\n:host([inline]) {\n height: 1em;\n width: 1em;\n}\n\nsvg {\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n stroke-width: var-list(--tct-icon-stroke-width, --t-icon-stroke-width, --tct-icon-group-stroke-width, 2);\n stroke-linecap: var-list(--tct-icon-cap, --t-icon-cap, round);\n stroke-linejoin: var-list(--tct-icon-cap, --t-icon-cap, round);\n transition: var(--tct-icon-transition, none);\n\n &.brand {\n stroke-width: var-list(--tct-icon-group-brand-stroke-width, 1);\n }\n\n &.browsersos {\n stroke-width: var-list(--tct-icon-group-browsersos-stroke-width, 1);\n }\n}\n\n.stroke-primary {\n stroke: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.stroke-secondary {\n stroke: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.fill-primary {\n fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.fill-secondary {\n fill: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.filled {\n fill: var-list(--tct-icon-fill, --comp-icon-fill, --t-icon-fill, none);\n transition: var(--tct-icon-fill-transition, none);\n}\n\n.brand-filled {\n fill: var-list(--tct-brand-icon-fill, --tct-icon-fill, currentColor);\n transition: var(--tct-icon-fill-transition, none);\n}\n\n.uniform {\n fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, currentcolor);\n transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n:host([type='info']),\n:host([type='info-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n}\n\n:host([type='success']),\n:host([type='success-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n}\n\n:host([type='warning']),\n:host([type='warning-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #c35500)};\n}\n\n:host([type='error']),\n:host([type='error-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-alert, --const-stoplight-alert, #d20a0a)};\n}\n","import { Component, ComponentInterface, Prop, h, Element, Watch, getAssetPath, State } from '@stencil/core';\nimport { createGuid } from 'src/utils';\nimport { getOrCreateSpriteContainer } from '@/utils/sprites';\nimport iconMap from './assets/icon-map.json';\n\n/*\n @name Icon\n * @category Display\n * @summary Use for displaying icons that represent actions, states, or concepts.\n /\n@Component({ tag: 'q2-icon', shadow: true, styleUrl: 'q2-icon.scss', assetsDirs: ['assets'] })\nexport class Q2Icon implements ComponentInterface {\n // #region Own Properties\n\n spriteGroup: SVGElement;\n spritePrefix: string = 'tecton-sprite-';\n spriteUse: SVGElement;\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 iconClone: SVGSymbolElement;\n\n // #endregion\n // #region Public Property API\n\n /* Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text. /\n @Prop({ reflect: true })\n inline: boolean;\n\n /* The text that is presented by screen-readers when they encounter the icon. /\n @Prop({ reflect: true })\n label: string;\n\n /* The name of the icon to be displayed. */\n @Prop({ reflect: true })\n type: string;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback(): void {\n this.spriteGroup = null;\n this.spriteUse = null;\n }\n\n componentWillLoad() {\n this.handleIcon();\n }\n\n componentDidRender(): void {\n if (!this.iconClone) return;\n this.spriteGroup?.firstElementChild?.remove();\n const appendedClone = this.spriteGroup?.appendChild(this.iconClone);\n\n // We have to set the `href` attribute after the symbol is appended to the DOM to avoid a bug in Safari\n this.spriteUse?.setAttribute('href', `#${appendedClone.id}`);\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('type')\n handleIcon() {\n if (this.isCustom) {\n this.setCustomSVGAttrs();\n } else if (this.type) {\n this.fetchSprite();\n } else {\n this.iconClone = null;\n this.spriteGroup?.firstElementChild?.remove();\n }\n }\n\n // #endregion\n // #region Local Methods\n\n get iconCloneViewBox() {\n return this.iconClone?.getAttribute('viewBox') ?? '0 0 24 24';\n }\n\n get isCustom() {\n return this.type === 'custom';\n }\n\n get spriteElement() {\n const { spriteId } = this;\n if (!spriteId) return;\n return document.querySelector<HTMLElement>(`#${spriteId}`);\n }\n\n get spriteEventName() {\n const { spriteFileName } = this;\n if (!spriteFileName) return;\n return `tct-loaded-${spriteFileName}`;\n }\n\n get spriteFileName() {\n if (this.isCustom) return;\n return iconMap[this.type];\n }\n\n get spriteId() {\n const { spriteFileName } = this;\n if (!spriteFileName) return;\n return `${this.spritePrefix}${spriteFileName}`;\n }\n\n checkForSprite() {\n const { spriteId, spriteEventName } = this;\n if (!spriteId) {\n const symbolId = `tct-${this.type}`;\n const symbolElement = document.getElementById(symbolId);\n if (symbolElement) {\n this.cloneSpriteNode();\n return true;\n }\n }\n\n const spriteContainer = getOrCreateSpriteContainer();\n let spriteElement: HTMLElement = document.getElementById(spriteId);\n\n // If the sprite element exists and has the `data-loaded` attribute, we know we have everything we need\n if (spriteElement?.hasAttribute('data-loaded') ?? false) {\n this.cloneSpriteNode();\n return true;\n }\n\n // If the sprite element exists but does not have the `data-loaded` attribute, we know it's being loaded\n // We'll listen for the event that will be dispatched when the sprite is loaded\n spriteContainer.addEventListener(\n spriteEventName,\n () => {\n this.cloneSpriteNode();\n },\n { once: true }\n );\n\n // If the sprite element exists, we know it's being loaded and will be handled by the event listener\n if (spriteElement) return true;\n\n // If sprite element does not exist, create a placeholder\n // This will let other icons know the sprite is being loaded\n spriteElement = document.createElement('div');\n spriteElement.id = spriteId;\n spriteContainer.appendChild(spriteElement);\n return false;\n }\n\n cloneSpriteNode() {\n const spriteNode = document.getElementById(`tct-${this.type}`);\n this.iconClone = spriteNode ? (spriteNode.cloneNode(true) as SVGSymbolElement) : undefined;\n }\n\n async fetchSprite() {\n const { spriteFileName, spriteId, spriteEventName } = this;\n\n const spriteExists = this.checkForSprite();\n if (spriteExists) return;\n\n if (!spriteFileName) return;\n const spritePath = getAssetPath(`assets/${spriteFileName}.symbol.svg`);\n const response = await fetch(spritePath);\n const data = await response.text();\n const wrappingDiv = document.createElement('div');\n wrappingDiv.innerHTML = data;\n const svg = wrappingDiv.querySelector('svg');\n\n svg.id = spriteId;\n svg.setAttribute('data-loaded', '');\n\n let { spriteElement } = this;\n if (spriteElement?.tagName === 'SVG') return;\n\n if (typeof spriteElement.replaceWith === 'function') {\n spriteElement.replaceWith(svg);\n } else {\n spriteElement.parentNode.replaceChild(svg, spriteElement);\n }\n\n spriteElement = document.getElementById(spriteId);\n spriteElement.dispatchEvent(new CustomEvent(spriteEventName, { bubbles: true }));\n }\n\n setCustomSVGAttrs() {\n const innerSVG = this.hostElement.querySelector('svg');\n\n if (!innerSVG) return;\n\n innerSVG.setAttribute('role', 'img');\n innerSVG.setAttribute('xmlns', 'http://www.w3.org/2000/svg');\n\n const { label } = this;\n if (label) {\n const title = document.createElement('title');\n const labelId = `label-${createGuid()}`;\n title.id = labelId;\n title.textContent = label;\n innerSVG.appendChild(title);\n innerSVG.setAttribute('aria-labelledby', labelId);\n } else {\n innerSVG.setAttribute('aria-hidden', 'true');\n }\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { label, type } = this;\n return this.isCustom ? (\n <slot />\n ) : (\n <svg\n aria-hidden={!!label ? undefined : 'true'}\n role={!!label ? 'img' : undefined}\n aria-labelledby={!!label ? 'label' : undefined}\n viewBox={this.iconCloneViewBox}\n xmlns=\"http://www.w3.org/2000/svg\"\n class={this.spriteFileName}\n >\n {!!label && <title id=\"label\">{label}</title>}\n {!!type && <use ref={el => (this.spriteUse = el)} />}\n <g ref={el => (this.spriteGroup = el)}></g>\n </svg>\n );\n }\n\n // #endregion\n}\n"],"names":["getOrCreateSpriteContainer","getAssetPath","createGuid","h"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAM,SAAS,GAAG,giGAAgiG;;MCWriG,MAAM,GAAA,MAAA;AADnB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAKI,QAAA,IAAY,CAAA,YAAA,GAAW,gBAAgB;AA6N1C;;;IA5LG,oBAAoB,GAAA;AAChB,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI;AACvB,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI;;IAGzB,iBAAiB,GAAA;QACb,IAAI,CAAC,UAAU,EAAE;;IAGrB,kBAAkB,GAAA;;QACd,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE;QACrB,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAI,CAAC,WAAW,0CAAE,iBAAiB,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,MAAM,EAAE;AAC7C,QAAA,MAAM,aAAa,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,WAAW,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC;;AAGnE,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,YAAY,CAAC,MAAM,EAAE,IAAI,aAAa,CAAC,EAAE,CAAA,CAAE,CAAC;;;;IAOhE,UAAU,GAAA;;AACN,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf,IAAI,CAAC,iBAAiB,EAAE;;AACrB,aAAA,IAAI,IAAI,CAAC,IAAI,EAAE;YAClB,IAAI,CAAC,WAAW,EAAE;;aACf;AACH,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;YACrB,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAI,CAAC,WAAW,0CAAE,iBAAiB,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,MAAM,EAAE;;;;;AAOrD,IAAA,IAAI,gBAAgB,GAAA;;QAChB,OAAO,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAI,CAAC,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,YAAY,CAAC,SAAS,CAAC,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,WAAW;;AAGjE,IAAA,IAAI,QAAQ,GAAA;AACR,QAAA,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ;;AAGjC,IAAA,IAAI,aAAa,GAAA;AACb,QAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI;AACzB,QAAA,IAAI,CAAC,QAAQ;YAAE;QACf,OAAO,QAAQ,CAAC,aAAa,CAAc,IAAI,QAAQ,CAAA,CAAE,CAAC;;AAG9D,IAAA,IAAI,eAAe,GAAA;AACf,QAAA,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI;AAC/B,QAAA,IAAI,CAAC,cAAc;YAAE;QACrB,OAAO,CAAA,WAAA,EAAc,cAAc,CAAA,CAAE;;AAGzC,IAAA,IAAI,cAAc,GAAA;QACd,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;;AAG7B,IAAA,IAAI,QAAQ,GAAA;AACR,QAAA,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI;AAC/B,QAAA,IAAI,CAAC,cAAc;YAAE;AACrB,QAAA,OAAO,GAAG,IAAI,CAAC,YAAY,CAAG,EAAA,cAAc,EAAE;;IAGlD,cAAc,GAAA;;AACV,QAAA,MAAM,EAAE,QAAQ,EAAE,eAAe,EAAE,GAAG,IAAI;QAC1C,IAAI,CAAC,QAAQ,EAAE;AACX,YAAA,MAAM,QAAQ,GAAG,CAAA,IAAA,EAAO,IAAI,CAAC,IAAI,EAAE;YACnC,MAAM,aAAa,GAAG,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC;YACvD,IAAI,aAAa,EAAE;gBACf,IAAI,CAAC,eAAe,EAAE;AACtB,gBAAA,OAAO,IAAI;;;AAInB,QAAA,MAAM,eAAe,GAAGA,kCAA0B,EAAE;QACpD,IAAI,aAAa,GAAgB,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC;;AAGlE,QAAA,IAAI,CAAA,EAAA,GAAA,aAAa,KAAb,IAAA,IAAA,aAAa,uBAAb,aAAa,CAAE,YAAY,CAAC,aAAa,CAAC,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,KAAK,EAAE;YACrD,IAAI,CAAC,eAAe,EAAE;AACtB,YAAA,OAAO,IAAI;;;;AAKf,QAAA,eAAe,CAAC,gBAAgB,CAC5B,eAAe,EACf,MAAK;YACD,IAAI,CAAC,eAAe,EAAE;AAC1B,SAAC,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACjB;;AAGD,QAAA,IAAI,aAAa;AAAE,YAAA,OAAO,IAAI;;;AAI9B,QAAA,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AAC7C,QAAA,aAAa,CAAC,EAAE,GAAG,QAAQ;AAC3B,QAAA,eAAe,CAAC,WAAW,CAAC,aAAa,CAAC;AAC1C,QAAA,OAAO,KAAK;;IAGhB,eAAe,GAAA;AACX,QAAA,MAAM,UAAU,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAO,IAAA,EAAA,IAAI,CAAC,IAAI,CAAE,CAAA,CAAC;AAC9D,QAAA,IAAI,CAAC,SAAS,GAAG,UAAU,GAAI,UAAU,CAAC,SAAS,CAAC,IAAI,CAAsB,GAAG,SAAS;;AAG9F,IAAA,MAAM,WAAW,GAAA;QACb,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,eAAe,EAAE,GAAG,IAAI;AAE1D,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,EAAE;AAC1C,QAAA,IAAI,YAAY;YAAE;AAElB,QAAA,IAAI,CAAC,cAAc;YAAE;QACrB,MAAM,UAAU,GAAGC,kBAAY,CAAC,UAAU,cAAc,CAAA,WAAA,CAAa,CAAC;AACtE,QAAA,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,UAAU,CAAC;AACxC,QAAA,MAAM,IAAI,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE;QAClC,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AACjD,QAAA,WAAW,CAAC,SAAS,GAAG,IAAI;QAC5B,MAAM,GAAG,GAAG,WAAW,CAAC,aAAa,CAAC,KAAK,CAAC;AAE5C,QAAA,GAAG,CAAC,EAAE,GAAG,QAAQ;AACjB,QAAA,GAAG,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC;AAEnC,QAAA,IAAI,EAAE,aAAa,EAAE,GAAG,IAAI;QAC5B,IAAI,CAAA,aAAa,KAAb,IAAA,IAAA,aAAa,uBAAb,aAAa,CAAE,OAAO,MAAK,KAAK;YAAE;AAEtC,QAAA,IAAI,OAAO,aAAa,CAAC,WAAW,KAAK,UAAU,EAAE;AACjD,YAAA,aAAa,CAAC,WAAW,CAAC,GAAG,CAAC;;aAC3B;YACH,aAAa,CAAC,UAAU,CAAC,YAAY,CAAC,GAAG,EAAE,aAAa,CAAC;;AAG7D,QAAA,aAAa,GAAG,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC;AACjD,QAAA,aAAa,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,eAAe,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;;IAGpF,iBAAiB,GAAA;QACb,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,KAAK,CAAC;AAEtD,QAAA,IAAI,CAAC,QAAQ;YAAE;AAEf,QAAA,QAAQ,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC;AACpC,QAAA,QAAQ,CAAC,YAAY,CAAC,OAAO,EAAE,4BAA4B,CAAC;AAE5D,QAAA,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI;QACtB,IAAI,KAAK,EAAE;YACP,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,YAAA,MAAM,OAAO,GAAG,CAAA,MAAA,EAASC,kBAAU,EAAE,EAAE;AACvC,YAAA,KAAK,CAAC,EAAE,GAAG,OAAO;AAClB,YAAA,KAAK,CAAC,WAAW,GAAG,KAAK;AACzB,YAAA,QAAQ,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B,YAAA,QAAQ,CAAC,YAAY,CAAC,iBAAiB,EAAE,OAAO,CAAC;;aAC9C;AACH,YAAA,QAAQ,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC;;;;;IAOpD,MAAM,GAAA;AACF,QAAA,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI;AAC5B,QAAA,OAAO,IAAI,CAAC,QAAQ,IAChBC,OAAA,CAAA,MAAA,EAAA,IAAA,CAAQ,KAERA,OACiB,CAAA,KAAA,EAAA,EAAA,aAAA,EAAA,CAAC,CAAC,KAAK,GAAG,SAAS,GAAG,MAAM,EACzC,IAAI,EAAE,CAAC,CAAC,KAAK,GAAG,KAAK,GAAG,SAAS,EAChB,iBAAA,EAAA,CAAC,CAAC,KAAK,GAAG,OAAO,GAAG,SAAS,EAC9C,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,IAAI,CAAC,cAAc,EAAA,EAEzB,CAAC,CAAC,KAAK,IAAIA,OAAA,CAAA,OAAA,EAAA,EAAO,EAAE,EAAC,OAAO,EAAE,EAAA,KAAK,CAAS,EAC5C,CAAC,CAAC,IAAI,IAAIA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,EAAI,CAAA,EACpDA,OAAA,CAAA,GAAA,EAAA,EAAG,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,EAAM,CAAA,CACzC,CACT;;;;;;;;;;;;"}
1	+ {"version":3,"file":"q2-icon.entry.cjs.js","sources":["src/components/q2-icon/q2-icon.scss?tag=q2-icon&encapsulation=shadow","src/components/q2-icon/q2-icon.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n:host {\n display: inline-block;\n height: var(--tct-icon-size, 24px);\n width: var(--tct-icon-size, 24px);\n position: relative;\n fill: none;\n}\n\n:host([inline]) {\n height: 1em;\n width: 1em;\n}\n\nsvg {\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n stroke-width: var-list(--tct-icon-stroke-width, --t-icon-stroke-width, --tct-icon-group-stroke-width, 2);\n stroke-linecap: var-list(--tct-icon-cap, --t-icon-cap, round);\n stroke-linejoin: var-list(--tct-icon-cap, --t-icon-cap, round);\n transition: var(--tct-icon-transition, none);\n\n &.brand {\n stroke-width: var-list(--tct-icon-group-brand-stroke-width, 1);\n }\n\n &.browsersos {\n stroke-width: var-list(--tct-icon-group-browsersos-stroke-width, 1);\n }\n}\n\n.stroke-primary {\n stroke: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.stroke-secondary {\n stroke: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.fill-primary {\n fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.fill-secondary {\n fill: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.filled {\n fill: var-list(--tct-icon-fill, --comp-icon-fill, --t-icon-fill, none);\n transition: var(--tct-icon-fill-transition, none);\n}\n\n.brand-filled {\n fill: var-list(--tct-brand-icon-fill, --tct-icon-fill, currentColor);\n transition: var(--tct-icon-fill-transition, none);\n}\n\n.uniform {\n fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, currentcolor);\n transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n:host([type='info']),\n:host([type='info-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n}\n\n:host([type='success']),\n:host([type='success-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n}\n\n:host([type='warning']),\n:host([type='warning-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #c35500)};\n}\n\n:host([type='error']),\n:host([type='error-filled']) {\n --tct-icon-stroke-primary: transparent;\n --comp-status-color: #{var-list(--tct-stoplight-alert, --const-stoplight-alert, #d20a0a)};\n}\n","import { Component, ComponentInterface, Prop, h, Element, Watch, getAssetPath, State } from '@stencil/core';\nimport { createGuid } from 'src/utils';\nimport { getOrCreateSpriteContainer } from '@/utils/sprites';\nimport iconMap from './assets/icon-map.json';\n\n/*\n @name Icon\n * @category Display\n * @summary Use for displaying icons that represent actions, states, or concepts.\n /\n@Component({ tag: 'q2-icon', shadow: true, styleUrl: 'q2-icon.scss', assetsDirs: ['assets'] })\nexport class Q2Icon implements ComponentInterface {\n // #region Own Properties\n\n spriteGroup: SVGElement;\n spritePrefix: string = 'tecton-sprite-';\n spriteUse: SVGElement;\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 iconClone: SVGSymbolElement;\n\n // #endregion\n // #region Public Property API\n\n /* Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text. /\n @Prop({ reflect: true })\n inline: boolean;\n\n /* The text that is presented by screen-readers when they encounter the icon. /\n @Prop({ reflect: true })\n label: string;\n\n /* The name of the icon to be displayed. */\n @Prop({ reflect: true })\n type: string;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback(): void {\n this.spriteGroup = null;\n this.spriteUse = null;\n }\n\n componentWillLoad() {\n this.handleIcon();\n }\n\n componentDidRender(): void {\n if (!this.iconClone) return;\n this.spriteGroup?.firstElementChild?.remove();\n const appendedClone = this.spriteGroup?.appendChild(this.iconClone);\n\n // We have to set the `href` attribute after the symbol is appended to the DOM to avoid a bug in Safari\n this.spriteUse?.setAttribute('href', `#${appendedClone.id}`);\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('type')\n handleIcon() {\n if (this.isCustom) {\n this.setCustomSVGAttrs();\n } else if (this.type) {\n this.fetchSprite();\n } else {\n this.iconClone = null;\n this.spriteGroup?.firstElementChild?.remove();\n }\n }\n\n // #endregion\n // #region Local Methods\n\n get iconCloneViewBox() {\n return this.iconClone?.getAttribute('viewBox') ?? '0 0 24 24';\n }\n\n get isCustom() {\n return this.type === 'custom';\n }\n\n get spriteElement() {\n const { spriteId } = this;\n if (!spriteId) return;\n return document.querySelector<HTMLElement>(`#${spriteId}`);\n }\n\n get spriteEventName() {\n const { spriteFileName } = this;\n if (!spriteFileName) return;\n return `tct-loaded-${spriteFileName}`;\n }\n\n get spriteFileName() {\n if (this.isCustom) return;\n return iconMap[this.type];\n }\n\n get spriteId() {\n const { spriteFileName } = this;\n if (!spriteFileName) return;\n return `${this.spritePrefix}${spriteFileName}`;\n }\n\n checkForSprite() {\n const { spriteId, spriteEventName } = this;\n if (!spriteId) {\n const symbolId = `tct-${this.type}`;\n const symbolElement = document.getElementById(symbolId);\n if (symbolElement) {\n this.cloneSpriteNode();\n return true;\n }\n }\n\n const spriteContainer = getOrCreateSpriteContainer();\n let spriteElement: HTMLElement = document.getElementById(spriteId);\n\n // If the sprite element exists and has the `data-loaded` attribute, we know we have everything we need\n if (spriteElement?.hasAttribute('data-loaded') ?? false) {\n this.cloneSpriteNode();\n return true;\n }\n\n // If the sprite element exists but does not have the `data-loaded` attribute, we know it's being loaded\n // We'll listen for the event that will be dispatched when the sprite is loaded\n spriteContainer.addEventListener(\n spriteEventName,\n () => {\n this.cloneSpriteNode();\n },\n { once: true }\n );\n\n // If the sprite element exists, we know it's being loaded and will be handled by the event listener\n if (spriteElement) return true;\n\n // If sprite element does not exist, create a placeholder\n // This will let other icons know the sprite is being loaded\n spriteElement = document.createElement('div');\n spriteElement.id = spriteId;\n spriteContainer.appendChild(spriteElement);\n return false;\n }\n\n cloneSpriteNode() {\n const spriteNode = document.getElementById(`tct-${this.type}`);\n this.iconClone = spriteNode ? (spriteNode.cloneNode(true) as SVGSymbolElement) : undefined;\n }\n\n async fetchSprite() {\n const { spriteFileName, spriteId, spriteEventName } = this;\n\n const spriteExists = this.checkForSprite();\n if (spriteExists) return;\n\n if (!spriteFileName) return;\n const spritePath = getAssetPath(`assets/${spriteFileName}.symbol.svg`);\n const response = await fetch(spritePath);\n const data = await response.text();\n const wrappingDiv = document.createElement('div');\n wrappingDiv.innerHTML = data;\n const svg = wrappingDiv.querySelector('svg');\n\n svg.id = spriteId;\n svg.setAttribute('data-loaded', '');\n\n let { spriteElement } = this;\n if (spriteElement?.tagName === 'SVG') return;\n\n if (typeof spriteElement.replaceWith === 'function') {\n spriteElement.replaceWith(svg);\n } else {\n spriteElement.parentNode.replaceChild(svg, spriteElement);\n }\n\n spriteElement = document.getElementById(spriteId);\n spriteElement.dispatchEvent(new CustomEvent(spriteEventName, { bubbles: true }));\n }\n\n setCustomSVGAttrs() {\n const innerSVG = this.hostElement.querySelector('svg');\n\n if (!innerSVG) return;\n\n innerSVG.setAttribute('role', 'img');\n innerSVG.setAttribute('xmlns', 'http://www.w3.org/2000/svg');\n\n const { label } = this;\n if (label) {\n const title = document.createElement('title');\n const labelId = `label-${createGuid()}`;\n title.id = labelId;\n title.textContent = label;\n innerSVG.appendChild(title);\n innerSVG.setAttribute('aria-labelledby', labelId);\n } else {\n innerSVG.setAttribute('aria-hidden', 'true');\n }\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { label, type } = this;\n return this.isCustom ? (\n <slot />\n ) : (\n <svg\n aria-hidden={!!label ? undefined : 'true'}\n role={!!label ? 'img' : undefined}\n aria-labelledby={!!label ? 'label' : undefined}\n viewBox={this.iconCloneViewBox}\n xmlns=\"http://www.w3.org/2000/svg\"\n class={this.spriteFileName}\n >\n {!!label && <title id=\"label\">{label}</title>}\n {!!type && <use ref={el => (this.spriteUse = el)} />}\n <g ref={el => (this.spriteGroup = el)}></g>\n </svg>\n );\n }\n\n // #endregion\n}\n"],"names":["getOrCreateSpriteContainer","getAssetPath","createGuid","h"],"mappings":"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"}

package/dist/cjs/q2-input.cjs.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 'use strict';
 var index = require('./index-BYXz4owL.js');
-var index$1 = require('./index-YvKoRT-t.js');
+var index$1 = require('./index-DmGkqdX2.js');
 var mirrorEmit = require('./mirror-emit-kjeNv83f.js');
 function formatNumber(val = '', options = {
@@ -2862,7 +2862,7 @@ function formatCLABE(value) {
     return formatValue(value, '##################');
 }
-const q2InputCss = "*{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{--comp-default-input-margin:var(--tct-input-margin-top, var(--t-input-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-input-margin-bottom, var(--t-input-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-input-margin, var(--comp-default-input-margin));font-size:var(--tct-input-font-size, var(--t-input-font-size, var(--app-font-size, inherit)))}:host([hidden]){display:none}.field-container,.input-container{position:relative}.field-container{--comp-input-tween:var(--tct-input-tween, var(--t-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))))}.field-container.is-small .btn-clear{--tct-btn-icon-width:20px;--tct-icon-size:17px}.input-label{--comp-label-padding:var(--tct-input-label-padding, 0 var(--tct-input-label-padding-right, var(--t-input-label-padding-right, 0)) 0 var(--tct-input-label-padding-left, var(--t-input-label-padding-left, 0)));display:block;padding:var(--comp-label-padding);color:var(--tct-input-label-font-color, var(--t-input-label-font-color, inherit));font-size:var(--tct-input-label-font-size, var(--t-input-label-font-size, inherit));font-weight:var(--tct-input-label-font-weight, var(--t-input-label-font-weight, 600));text-transform:var(--tct-input-label-text-transform, var(--t-input-label-text-transform, none));letter-spacing:var(--tct-input-label-letter-spacing, var(--t-input-label-letter-spacing, inherit));transition:color var(--comp-input-tween)}.optional-tag{--comp-label-optional-margin:var(--tct-input-label-optional-margin, 0 0 0 var(--tct-input-label-optional-margin-left, var(--t-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px)))));margin:var(--comp-label-optional-margin);color:var(--tct-input-label-optional-font-color, var(--t-input-label-optional-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-input-label-optional-font-size, var(--t-input-label-optional-font-size, var(--app-font-size-small, 12px)));font-weight:var(--tct-input-label-optional-font-weight, var(--t-input-label-optional-font-weight, 400));line-height:1em}.count-tag{color:var(--tct-input-count-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77))));font-size:var(--tct-input-count-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-input-count-font-weight, 400);text-align:right;width:var(--tct-input-count-width, auto)}.label-wrapper{--comp-label-margin:var(--tct-input-label-margin, var(--tct-input-label-margin-top, var(--t-input-label-margin-top, 0)) 0 var(--tct-input-label-margin-bottom, var(--t-input-label-margin-bottom, var(--tct-scale-1, var(--app-scale-1x, 5px)))));display:flex;gap:var(--tct-input-label-gap, var(--app-scale-2x, 10px));justify-content:space-between;align-items:end;margin:var(--comp-label-margin);line-height:var(--tct-input-label-line-height, var(--t-input-label-line-height, inherit))}.label-wrapper:has(label.sr){margin:0}.input-container{--comp-input-background:var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--t-gray-14, #fcfcfd))));--comp-input-backdrop-filter:var(--tct-input-backdrop-filter, none);--comp-input-horizontal-gap:var(--tct-input-horizontal-gap, var(--t-input-horizontal-gap, 0));--comp-input-border-top-left-radius:var(--tct-input-border-top-left-radius, var(--t-input-border-top-left-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));--comp-input-border-top-right-radius:var(--tct-input-border-top-right-radius, var(--t-input-border-top-right-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));--comp-input-border-bottom-right-radius:var(--tct-input-border-bottom-right-radius, var(--t-input-border-bottom-right-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));--comp-input-border-bottom-left-radius:var(--tct-input-border-bottom-left-radius, var(--t-input-border-bottom-left-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));--comp-calc-input-border-top-left-radius:calc(\n      var(--comp-input-border-top-left-radius) - var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) - var(--tct-input-border-left-width, var(--t-input-border-left-width, 1px))\n  );--comp-calc-input-border-top-right-radius:calc(\n      var(--comp-input-border-top-right-radius) - var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) - var(--tct-input-border-right-width, var(--t-input-border-right-width, 1px))\n  );--comp-calc-input-border-bottom-left-radius:calc(\n      var(--comp-input-border-bottom-left-radius) - var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) - var(--tct-input-border-left-width, var(--t-input-border-left-width, 1px))\n  );--comp-calc-input-border-bottom-right-radius:calc(\n      var(--comp-input-border-bottom-right-radius) - var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) - var(--tct-input-border-right-width, var(--t-input-border-right-width, 1px))\n  );--comp-input-border-radius:var(--comp-input-border-top-left-radius) var(--comp-input-border-top-right-radius)\n      var(--comp-input-border-bottom-right-radius) var(--comp-input-border-bottom-left-radius);--comp-input-border-width:var(--tct-input-border-top-width, 1px) var(--tct-input-border-right-width, 1px)\n      var(--tct-input-border-bottom-width, 1px) var(--tct-input-border-left-width, 1px);--comp-input-border-color:var(--tct-input-border-color, var(--t-input-border-color, var(--t-a11y-gray-color-AA, #404040)));--comp-input-prefix-clearance:calc(3 * var(--tct-input-prefix-font-size, 14px) + var(--tct-scale-1, 5px));--comp-input-icon-clearance:34px;--comp-input-min-height:var(--tct-input-min-height, var(--t-input-min-height, 44px));--comp-input-max-height:var(--tct-input-max-height, var(--t-input-max-height));--comp-input-hover-ring-color:var(--tct-input-hover-ring-color, var(--t-input-hover-ring-color));--comp-input-hover-ring:0 0 0 2px var(--t-base), 0 0 0 4px var(--comp-input-hover-ring-color), var(--tct-input-hover-box-shadow, var(--t-input-hover-box-shadow, 0 0 transparent));background:var(--comp-input-background);backdrop-filter:var(--comp-input-backdrop-filter);display:flex;align-items:center;gap:var(--tct-input-container-gap, var(--app-scale-2x, 10px));padding-inline:var(--tct-input-container-padding-inline);border-width:var(--comp-input-border-width);border-style:solid;border-color:var(--comp-input-border-color);border-radius:var(--comp-input-border-radius);box-shadow:var(--tct-input-box-shadow, var(--t-input-box-shadow, none));transition:background var(--comp-input-tween), backdrop-filter var(--comp-input-tween), border-width var(--comp-input-tween), border-color var(--comp-input-tween), box-shadow var(--comp-input-tween)}:host([disabled]:not([disabled=false])) .input-container{cursor:not-allowed;opacity:var(--tct-input-disabled-opacity, var(--t-input-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));backdrop-filter:var(--tct-input-disabled-backdrop-filter, var(--comp-input-backdrop-filter))}.has-error .input-container{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a));backdrop-filter:var(--tct-input-error-backdrop-filter, var(--comp-input-backdrop-filter));background:var(--tct-input-error-background, var(--comp-input-background));box-shadow:var(--tct-input-error-box-shadow, var(--comp-input-hover-ring))}.input-container:hover{border-color:var(--tct-input-hover-border-color, var(--comp-input-border-color));background:var(--tct-input-hover-background, var(--comp-input-background));backdrop-filter:var(--tct-input-hover-backdrop-filter, var(--comp-input-backdrop-filter));box-shadow:var(--tct-input-hover-box-shadow, var(--comp-input-hover-ring))}.has-error .input-container:hover{border-color:var(--tct-input-error-hover-border-color, var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a)));backdrop-filter:var(--tct-input-error-hover-backdrop-filter, var(--tct-input-error-backdrop-filter, var(--tct-input-hover-backdrop-filter, var(--comp-input-backdrop-filter))));background:var(--tct-input-error-hover-background, var(--tct-input-error-background, var(--comp-input-background)));box-shadow:var(--tct-input-error-hover-box-shadow, var(--tct-input-error-box-shadow, var(--comp-input-hover-ring)))}.has-focus .input-container{border-color:var(--tct-input-focus-border-color, var(--t-input-focus-border-color, var(--comp-input-border-color)));background:var(--tct-input-focus-background, var(--comp-input-background));backdrop-filter:var(--tct-input-focus-backdrop-filter, var(--comp-input-backdrop-filter));box-shadow:var(--tct-input-focus-box-shadow, var(--const-double-focus-ring))}.has-focus.has-error .input-container,.has-focus.has-error .input-container:hover{border-color:var(--tct-input-error-focus-border-color, var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a)));backdrop-filter:var(--tct-input-error-focus-backdrop-filter, var(--tct-input-error-backdrop-filter, var(--tct-input-focus-backdrop-filter, var(--comp-input-backdrop-filter))));background:var(--tct-input-error-focus-background, var(--tct-input-error-background, var(--comp-input-background)));box-shadow:var(--tct-input-error-focus-box-shadow, var(--tct-input-error-box-shadow, var(--const-double-focus-ring)))}.input-container:has(.input-field:is(:-webkit-autofill,:autofill)){background:var(--tct-input-autofill-background, #faffbc);color:var(--tct-input-autofill-font-color, var(--t-text, inherit))}.input-container:has(.input-field:is(:-webkit-autofill,:autofill)) .input-field{box-shadow:0 0 0 1000px var(--tct-input-autofill-background, #faffbc) inset;color:var(--tct-input-autofill-font-color, var(--t-text, inherit));-webkit-text-fill-color:var(--tct-input-autofill-font-color, var(--t-text, inherit))}.input-field{flex:1;border:0;-webkit-appearance:none;appearance:none;box-sizing:border-box;min-height:var(--comp-input-min-height);max-height:var(--comp-input-max-height);overflow-y:hidden;height:var(--tct-input-height, var(--t-input-height, 44px));width:100%;padding:var(--tct-input-padding, 0);background:transparent;color:var(--tct-input-font-color, var(--t-input-font-color, var(--t-text, inherit)));display:inline-block;text-align:var(--tct-input-align, \"start\");font-weight:var(--tct-input-font-weight, var(--t-input-font-weight, 400));letter-spacing:var(--tct-input-letter-spacing, var(--t-input-letter-spacing, inherit));}.input-field:focus{outline:none;box-shadow:none}.input-field::-webkit-outer-spin-button,.input-field::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.input-field[type=number]{-moz-appearance:textfield}.input-field::-ms-reveal,.input-field::-ms-clear{display:none}.input-field[type=search]::-webkit-search-decoration,.input-field[type=search]::-webkit-search-cancel-button,.input-field[type=search]::-webkit-search-results-button,.input-field[type=search]::-webkit-search-results-decoration{display:none}.input-field[disabled]:not([disabled=false]){cursor:not-allowed}.right-aligned .input-field{text-align:right}.input-field:is(input){flex:1}.input-field:is(button){display:inline-flex;align-items:center}.has-custom-display .input-field:is(button){height:auto;padding:0}.input-field:is(button) span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.input-field[readonly]:not([readonly=false]){pointer-events:none}.custom-display-container{max-width:100%}.has-custom-display .custom-display-container{--comp-default-padding:var(--app-scale-2x, 10px) var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);padding:var(--tct-input-padding, var(--t-input-padding, var(--comp-default-padding)));width:100%}.input-field::placeholder,.placeholder-text{color:var(--tct-input-placeholder-font-color, var(--t-input-placeholder-font-color, var(--t-textA, var(--app-gray-d1, rgba(77, 77, 77, 0.77)))))}.pseudo-input-container{min-width:0;flex:1}.input-icons-container-left,.input-icons-container-right{--tct-btn-icon-hover-background:var(--tct-input-btn-hover-background);--tct-btn-hover-background:var(--tct-input-btn-hover-background);display:flex;flex-direction:row;align-items:center;gap:var(--comp-input-horizontal-gap)}.input-icons-container-left q2-btn q2-icon,.input-icons-container-left ::slotted(q2-btn),.input-icons-container-right q2-btn q2-icon,.input-icons-container-right ::slotted(q2-btn){--tct-icon-stroke-primary:var(--tct-input-btn-icon-stroke-primary);--tct-icon-stroke-secondary:var(--tct-input-btn-icon-stroke-secondary)}.input-icons-container-left>div:not(.vertical-separator),.input-icons-container-right>div:not(.vertical-separator){min-width:var(--tct-input-icon-container-icon-min-width, 44px);display:flex;justify-content:center;align-items:center;font-size:var(--tct-input-icon-container-font-size, inherit)}.input-icons-container-left:empty,.input-icons-container-right:empty{display:var(--tct-input-icon-container-empty-display, block)}.input-icons-container-left{padding-left:var(--comp-input-horizontal-gap)}.input-icons-container-left q2-btn:first-child,.input-icons-container-left ::slotted(q2-btn:first-child){--tct-btn-icon-border-radius:var(--comp-calc-input-border-top-left-radius) 0 0\n      var(--comp-calc-input-border-bottom-left-radius)}.input-icons-container-right{padding-right:var(--comp-input-horizontal-gap);--comp-visibility-toggle-padding:0px var(--app-scale-2x, 10px)}.input-icons-container-right q2-btn:last-child,.input-icons-container-right ::slotted(q2-btn:last-child){--tct-btn-icon-border-radius:0 var(--comp-calc-input-border-top-right-radius)\n      var(--comp-calc-input-border-bottom-right-radius) 0}.input-icons-container-right .btn-visibility-toggle{--tct-btn-height:var(--comp-input-min-height);--tct-btn-padding-inline:var(--tct-input-visibility-toggle-padding, var(--app-scale-2x, 10px));--tct-btn-font-weight:var(--tct-input-visibility-toggle-font-weight, 400);color:var(--tct-input-visibility-toggle-font-color, var(--t-primary, #0079c1));font-size:var(--tct-input-visibility-toggle-font-size, var(--app-font-size-small, 12px))}q2-icon{margin-top:calc(var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) / 2);margin-bottom:calc(var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) / 2);pointer-events:none;color:var(--tct-input-icon-stroke-primary, var(--t-input-icon-stroke-primary, var(--t-a11y-gray-color, var(--t-textA, var(--app-gray, #747474)))));--tct-icon-stroke-primary:var(--tct-input-icon-stroke-primary, var(--t-input-icon-stroke-primary, var(--t-a11y-gray-color, var(--t-textA, var(--app-gray, #747474)))));--tct-icon-stroke-secondary:var(--tct-input-icon-stroke-secondary, var(--t-a11y-gray-color, var(--t-textA, var(--app-gray, #747474))))}.icon-left-muted{opacity:0.5}.input-prefix,.input-suffix{min-height:var(--comp-input-min-height);max-height:var(--comp-input-max-height);height:var(--tct-input-height, var(--t-input-height, 44px));font-size:var(--tct-input-prefix-font-size, var(--t-input-prefix-font-size, inherit));font-weight:var(--tct-input-prefix-font-weight, 400);color:var(--tct-input-prefix-font-color, var(--t-input-prefix-font-color, inherit));background:var(--tct-input-prefix-background, var(--tct-input-prefix-bg, var(--t-input-prefix-bg, var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, #f2f2f2))))))));transition:color var(--comp-input-tween), background var(--comp-input-tween)}.input-prefix{border-top-left-radius:var(--comp-calc-input-border-top-left-radius);border-bottom-left-radius:var(--comp-calc-input-border-bottom-left-radius);pointer-events:none;}.input-suffix{border-top-right-radius:var(--comp-calc-input-border-top-right-radius);border-bottom-right-radius:var(--comp-calc-input-border-bottom-right-radius)}.icon-error{color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}.messages-container{height:0px;overflow:hidden;background:var(--tct-message-background, var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));box-shadow:var(--tct-input-message-box-shadow, var(--t-input-message-box-shadow, var(--tct-box-shadow-1, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)))));transition:height var(--tct-input-messages-tween, var(--t-input-messages-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));margin-top:var(--tct-input-messages-margin-top, 2px);z-index:var(--tct-input-messages-z-index, 5);position:absolute;width:100%;color:var(--tct-input-messages-font-color, var(--t-input-messages-font-color, inherit));border-radius:var(--tct-message-border-radius, --app-border-radius-1, inherit)}.has-error label{color:var(--tct-input-error-label-font-color, var(--t-input-error-label-font-color, var(--tct-input-label-font-color, var(--t-input-label-font-color, inherit))))}.has-error:not(.has-focus) .input-prefix,.has-error:not(.has-focus) .input-suffix{color:var(--tct-input-error-prefix-font-color, var(--t-input-error-prefix-font-color, inherit));background:var(--tct-input-error-prefix-background, var(--tct-input-error-prefix-bg, var(--t-input-error-prefix-bg, var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))))))))}.icon-left{width:26px;height:26px}.vertical-separator{height:calc(var(--comp-input-min-height) - 2px);border-right-width:var(--tct-input-prefix-border-width, 1px);border-right-style:solid;border-right-color:var(--tct-input-prefix-border-color, var(--t-input-prefix-border-color, var(--tct-input-border-color, var(--t-input-border-color, var(--t-a11y-gray-color-AA, #404040)))))}";
+const q2InputCss = "*{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{--comp-default-input-margin:var(--tct-input-margin-top, var(--t-input-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-input-margin-bottom, var(--t-input-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-input-margin, var(--comp-default-input-margin));font-size:var(--tct-input-font-size, var(--t-input-font-size, var(--app-font-size, inherit)))}:host([hidden]){display:none}.field-container,.input-container{position:relative}.field-container{--comp-input-tween:var(--tct-input-tween, var(--t-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))))}.field-container.is-small .btn-clear{--tct-btn-icon-width:20px;--tct-icon-size:17px}.input-label{--comp-label-padding:var(--tct-input-label-padding, 0 var(--tct-input-label-padding-right, var(--t-input-label-padding-right, 0)) 0 var(--tct-input-label-padding-left, var(--t-input-label-padding-left, 0)));display:block;padding:var(--comp-label-padding);color:var(--tct-input-label-font-color, var(--t-input-label-font-color, inherit));font-size:var(--tct-input-label-font-size, var(--t-input-label-font-size, inherit));font-weight:var(--tct-input-label-font-weight, var(--t-input-label-font-weight, 600));text-transform:var(--tct-input-label-text-transform, var(--t-input-label-text-transform, none));letter-spacing:var(--tct-input-label-letter-spacing, var(--t-input-label-letter-spacing, inherit));transition:color var(--comp-input-tween)}.optional-tag{--comp-label-optional-margin:var(--tct-input-label-optional-margin, 0 0 0 var(--tct-input-label-optional-margin-left, var(--t-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px)))));margin:var(--comp-label-optional-margin);color:var(--tct-input-label-optional-font-color, var(--t-input-label-optional-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-input-label-optional-font-size, var(--t-input-label-optional-font-size, var(--app-font-size-small, 12px)));font-weight:var(--tct-input-label-optional-font-weight, var(--t-input-label-optional-font-weight, 400));line-height:1em}.count-tag{color:var(--tct-input-count-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77))));font-size:var(--tct-input-count-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-input-count-font-weight, 400);text-align:right;width:var(--tct-input-count-width, auto)}.label-wrapper{--comp-label-margin:var(--tct-input-label-margin, var(--tct-input-label-margin-top, var(--t-input-label-margin-top, 0)) 0 var(--tct-input-label-margin-bottom, var(--t-input-label-margin-bottom, var(--tct-scale-1, var(--app-scale-1x, 5px)))));display:flex;gap:var(--tct-input-label-gap, var(--app-scale-2x, 10px));justify-content:space-between;align-items:end;margin:var(--comp-label-margin);line-height:var(--tct-input-label-line-height, var(--t-input-label-line-height, inherit))}.label-wrapper:has(label.sr){margin:0}.input-container{--comp-input-background:var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--t-gray-14, #fcfcfd))));--comp-input-backdrop-filter:var(--tct-input-backdrop-filter, none);--comp-input-horizontal-gap:var(--tct-input-horizontal-gap, var(--t-input-horizontal-gap, 0));--comp-input-border-top-left-radius:var(--tct-input-border-top-left-radius, var(--t-input-border-top-left-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));--comp-input-border-top-right-radius:var(--tct-input-border-top-right-radius, var(--t-input-border-top-right-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));--comp-input-border-bottom-right-radius:var(--tct-input-border-bottom-right-radius, var(--t-input-border-bottom-right-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));--comp-input-border-bottom-left-radius:var(--tct-input-border-bottom-left-radius, var(--t-input-border-bottom-left-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));--comp-calc-input-border-top-left-radius:calc(\n      var(--comp-input-border-top-left-radius) - var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) - var(--tct-input-border-left-width, var(--t-input-border-left-width, 1px))\n  );--comp-calc-input-border-top-right-radius:calc(\n      var(--comp-input-border-top-right-radius) - var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) - var(--tct-input-border-right-width, var(--t-input-border-right-width, 1px))\n  );--comp-calc-input-border-bottom-left-radius:calc(\n      var(--comp-input-border-bottom-left-radius) - var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) - var(--tct-input-border-left-width, var(--t-input-border-left-width, 1px))\n  );--comp-calc-input-border-bottom-right-radius:calc(\n      var(--comp-input-border-bottom-right-radius) - var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) - var(--tct-input-border-right-width, var(--t-input-border-right-width, 1px))\n  );--comp-input-border-radius:var(--comp-input-border-top-left-radius) var(--comp-input-border-top-right-radius)\n      var(--comp-input-border-bottom-right-radius) var(--comp-input-border-bottom-left-radius);--comp-input-border-width:var(--tct-input-border-top-width, 1px) var(--tct-input-border-right-width, 1px)\n      var(--tct-input-border-bottom-width, 1px) var(--tct-input-border-left-width, 1px);--comp-input-border-color:var(--tct-input-border-color, var(--t-input-border-color, var(--t-a11y-gray-color-AA, #404040)));--comp-input-prefix-clearance:calc(3 * var(--tct-input-prefix-font-size, 14px) + var(--tct-scale-1, 5px));--comp-input-icon-clearance:34px;--comp-input-min-height:var(--tct-input-min-height, var(--t-input-min-height, 44px));--comp-input-max-height:var(--tct-input-max-height, var(--t-input-max-height));--comp-input-hover-ring-color:var(--tct-input-hover-ring-color, var(--t-input-hover-ring-color));--comp-input-hover-ring:0 0 0 2px var(--t-base), 0 0 0 4px var(--comp-input-hover-ring-color), var(--tct-input-hover-box-shadow, var(--t-input-hover-box-shadow, 0 0 transparent));background:var(--comp-input-background);backdrop-filter:var(--comp-input-backdrop-filter);display:flex;align-items:center;gap:var(--tct-input-container-gap, var(--app-scale-2x, 10px));padding-inline:var(--tct-input-container-padding-inline);border-width:var(--comp-input-border-width);border-style:solid;border-color:var(--comp-input-border-color);border-radius:var(--comp-input-border-radius);box-shadow:var(--tct-input-box-shadow, var(--t-input-box-shadow, none));transition:background var(--comp-input-tween), backdrop-filter var(--comp-input-tween), border-width var(--comp-input-tween), border-color var(--comp-input-tween), box-shadow var(--comp-input-tween)}:host([disabled]:not([disabled=false])) .input-container{cursor:not-allowed;opacity:var(--tct-input-disabled-opacity, var(--t-input-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));backdrop-filter:var(--tct-input-disabled-backdrop-filter, var(--comp-input-backdrop-filter))}.has-error .input-container{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a));backdrop-filter:var(--tct-input-error-backdrop-filter, var(--comp-input-backdrop-filter));background:var(--tct-input-error-background, var(--comp-input-background));box-shadow:var(--tct-input-error-box-shadow, var(--comp-input-hover-ring))}.input-container:hover{border-color:var(--tct-input-hover-border-color, var(--comp-input-border-color));background:var(--tct-input-hover-background, var(--comp-input-background));backdrop-filter:var(--tct-input-hover-backdrop-filter, var(--comp-input-backdrop-filter));box-shadow:var(--tct-input-hover-box-shadow, var(--comp-input-hover-ring))}.has-error .input-container:hover{border-color:var(--tct-input-error-hover-border-color, var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a)));backdrop-filter:var(--tct-input-error-hover-backdrop-filter, var(--tct-input-error-backdrop-filter, var(--tct-input-hover-backdrop-filter, var(--comp-input-backdrop-filter))));background:var(--tct-input-error-hover-background, var(--tct-input-error-background, var(--comp-input-background)));box-shadow:var(--tct-input-error-hover-box-shadow, var(--tct-input-error-box-shadow, var(--comp-input-hover-ring)))}.has-focus .input-container{border-color:var(--tct-input-focus-border-color, var(--t-input-focus-border-color, var(--comp-input-border-color)));background:var(--tct-input-focus-background, var(--comp-input-background));backdrop-filter:var(--tct-input-focus-backdrop-filter, var(--comp-input-backdrop-filter));box-shadow:var(--tct-input-focus-box-shadow, var(--const-double-focus-ring))}.has-focus.has-error .input-container,.has-focus.has-error .input-container:hover{border-color:var(--tct-input-error-focus-border-color, var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a)));backdrop-filter:var(--tct-input-error-focus-backdrop-filter, var(--tct-input-error-backdrop-filter, var(--tct-input-focus-backdrop-filter, var(--comp-input-backdrop-filter))));background:var(--tct-input-error-focus-background, var(--tct-input-error-background, var(--comp-input-background)));box-shadow:var(--tct-input-error-focus-box-shadow, var(--tct-input-error-box-shadow, var(--const-double-focus-ring)))}.input-container:has(.input-field:is(:-webkit-autofill,:autofill)){background:var(--tct-input-autofill-background, #faffbc);color:var(--tct-input-autofill-font-color, var(--t-text, inherit))}.input-container:has(.input-field:is(:-webkit-autofill,:autofill)) .input-field{box-shadow:0 0 0 1000px var(--tct-input-autofill-background, #faffbc) inset;color:var(--tct-input-autofill-font-color, var(--t-text, inherit));-webkit-text-fill-color:var(--tct-input-autofill-font-color, var(--t-text, inherit))}.input-field{flex:1;border:0;-webkit-appearance:none;appearance:none;box-sizing:border-box;min-height:var(--comp-input-min-height);max-height:var(--comp-input-max-height);overflow-y:hidden;height:var(--tct-input-height, var(--t-input-height, 44px));width:100%;padding:var(--tct-input-padding, 0);background:transparent;color:var(--tct-input-font-color, var(--t-input-font-color, var(--t-text, inherit)));display:inline-block;text-align:var(--tct-input-align, \"start\");font-weight:var(--tct-input-font-weight, var(--t-input-font-weight, 400));letter-spacing:var(--tct-input-letter-spacing, var(--t-input-letter-spacing, inherit));}.input-field:focus{outline:none;box-shadow:none}.input-field::-webkit-outer-spin-button,.input-field::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.input-field[type=number]{-moz-appearance:textfield}.input-field::-ms-reveal,.input-field::-ms-clear{display:none}.input-field[type=search]::-webkit-search-decoration,.input-field[type=search]::-webkit-search-cancel-button,.input-field[type=search]::-webkit-search-results-button,.input-field[type=search]::-webkit-search-results-decoration{display:none}.input-field[disabled]:not([disabled=false]){cursor:not-allowed}.right-aligned .input-field{text-align:right}.input-field:is(input){flex:1}.input-field:is(input)[readonly]:not([readonly=false]){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.input-field:is(button){display:inline-flex;align-items:center}.has-custom-display .input-field:is(button){height:auto;padding:0}.input-field:is(button) span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.input-field[readonly]:not([readonly=false]){pointer-events:none}.custom-display-container{max-width:100%}.has-custom-display .custom-display-container{--comp-default-padding:var(--app-scale-2x, 10px) var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);padding:var(--tct-input-padding, var(--t-input-padding, var(--comp-default-padding)));width:100%}.input-field::placeholder,.placeholder-text{color:var(--tct-input-placeholder-font-color, var(--t-input-placeholder-font-color, var(--t-textA, var(--app-gray-d1, rgba(77, 77, 77, 0.77)))))}.pseudo-input-container{min-width:0;flex:1}.input-icons-container-left,.input-icons-container-right{--tct-btn-icon-hover-background:var(--tct-input-btn-hover-background);--tct-btn-hover-background:var(--tct-input-btn-hover-background);display:flex;flex-direction:row;align-items:center;gap:var(--comp-input-horizontal-gap)}.input-icons-container-left q2-btn q2-icon,.input-icons-container-left ::slotted(q2-btn),.input-icons-container-right q2-btn q2-icon,.input-icons-container-right ::slotted(q2-btn){--tct-icon-stroke-primary:var(--tct-input-btn-icon-stroke-primary);--tct-icon-stroke-secondary:var(--tct-input-btn-icon-stroke-secondary)}.input-icons-container-left>div:not(.vertical-separator),.input-icons-container-right>div:not(.vertical-separator){min-width:var(--tct-input-icon-container-icon-min-width, 44px);display:flex;justify-content:center;align-items:center;font-size:var(--tct-input-icon-container-font-size, inherit)}.input-icons-container-left:empty,.input-icons-container-right:empty{display:var(--tct-input-icon-container-empty-display, block)}.input-icons-container-left{padding-left:var(--comp-input-horizontal-gap)}.input-icons-container-left q2-btn:first-child,.input-icons-container-left ::slotted(q2-btn:first-child){--tct-btn-icon-border-radius:var(--comp-calc-input-border-top-left-radius) 0 0\n      var(--comp-calc-input-border-bottom-left-radius)}.input-icons-container-right{padding-right:var(--comp-input-horizontal-gap);--comp-visibility-toggle-padding:0px var(--app-scale-2x, 10px)}.input-icons-container-right q2-btn:last-child,.input-icons-container-right ::slotted(q2-btn:last-child){--tct-btn-icon-border-radius:0 var(--comp-calc-input-border-top-right-radius)\n      var(--comp-calc-input-border-bottom-right-radius) 0}.input-icons-container-right .btn-visibility-toggle{--tct-btn-height:var(--comp-input-min-height);--tct-btn-padding-inline:var(--tct-input-visibility-toggle-padding, var(--app-scale-2x, 10px));--tct-btn-font-weight:var(--tct-input-visibility-toggle-font-weight, 400);color:var(--tct-input-visibility-toggle-font-color, var(--t-primary, #0079c1));font-size:var(--tct-input-visibility-toggle-font-size, var(--app-font-size-small, 12px))}q2-icon{margin-top:calc(var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) / 2);margin-bottom:calc(var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) / 2);pointer-events:none;color:var(--tct-input-icon-stroke-primary, var(--t-input-icon-stroke-primary, var(--t-a11y-gray-color, var(--t-textA, var(--app-gray, #747474)))));--tct-icon-stroke-primary:var(--tct-input-icon-stroke-primary, var(--t-input-icon-stroke-primary, var(--t-a11y-gray-color, var(--t-textA, var(--app-gray, #747474)))));--tct-icon-stroke-secondary:var(--tct-input-icon-stroke-secondary, var(--t-a11y-gray-color, var(--t-textA, var(--app-gray, #747474))))}.icon-left-muted{opacity:0.5}.input-prefix,.input-suffix{min-height:var(--comp-input-min-height);max-height:var(--comp-input-max-height);height:var(--tct-input-height, var(--t-input-height, 44px));font-size:var(--tct-input-prefix-font-size, var(--t-input-prefix-font-size, inherit));font-weight:var(--tct-input-prefix-font-weight, 400);color:var(--tct-input-prefix-font-color, var(--t-input-prefix-font-color, inherit));background:var(--tct-input-prefix-background, var(--tct-input-prefix-bg, var(--t-input-prefix-bg, var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, #f2f2f2))))))));transition:color var(--comp-input-tween), background var(--comp-input-tween)}.input-prefix{border-top-left-radius:var(--comp-calc-input-border-top-left-radius);border-bottom-left-radius:var(--comp-calc-input-border-bottom-left-radius);pointer-events:none;}.input-suffix{border-top-right-radius:var(--comp-calc-input-border-top-right-radius);border-bottom-right-radius:var(--comp-calc-input-border-bottom-right-radius)}.icon-error{color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}.messages-container{height:0px;overflow:hidden;background:var(--tct-message-background, var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));box-shadow:var(--tct-input-message-box-shadow, var(--t-input-message-box-shadow, var(--tct-box-shadow-1, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)))));transition:height var(--tct-input-messages-tween, var(--t-input-messages-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));margin-top:var(--tct-input-messages-margin-top, 2px);z-index:var(--tct-input-messages-z-index, 5);position:absolute;width:100%;color:var(--tct-input-messages-font-color, var(--t-input-messages-font-color, inherit));border-radius:var(--tct-message-border-radius, --app-border-radius-1, inherit)}.has-error label{color:var(--tct-input-error-label-font-color, var(--t-input-error-label-font-color, var(--tct-input-label-font-color, var(--t-input-label-font-color, inherit))))}.has-error:not(.has-focus) .input-prefix,.has-error:not(.has-focus) .input-suffix{color:var(--tct-input-error-prefix-font-color, var(--t-input-error-prefix-font-color, inherit));background:var(--tct-input-error-prefix-background, var(--tct-input-error-prefix-bg, var(--t-input-error-prefix-bg, var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))))))))}.icon-left{width:26px;height:26px}.vertical-separator{height:calc(var(--comp-input-min-height) - 2px);border-right-width:var(--tct-input-prefix-border-width, 1px);border-right-style:solid;border-right-color:var(--tct-input-prefix-border-color, var(--t-input-prefix-border-color, var(--tct-input-border-color, var(--t-input-border-color, var(--t-a11y-gray-color-AA, #404040)))))}";
 const inputTypeMap = {
     text: 'text',
@@ -3419,7 +3419,10 @@ const Q2Input = class {
         this.formattedValueObject = this.getFormattedValue(this.stringValue, true);
         if (!this.pseudo) {
             const setValue = () => {
-                this.inputField.value = this.formattedValueObject.formattedValue;
+                const newValue = this.formattedValueObject.formattedValue;
+                if (!this._preventEntry || this.inputField.value !== newValue) {
+                    this.inputField.value = newValue;
+                }
             };
             this.inputField ? setValue() : this.scheduledAfterRender.push(() => setValue());
         }
@@ -3555,7 +3558,7 @@ const Q2Input = class {
     }
     renderInputContainerDOM() {
         const { hasInputLeftSlot, hasInputRightSlot } = this;
-        return (index.h("div", { class: "input-container", tabindex: -1, "test-id": "inputContainer" }, index.h("div", { class: "input-icons-container-left" }, this.formattedValueObject.prefix && (index.h("div", { class: "input-prefix" }, this.formattedValueObject.prefix)), this.computedIconLeft && (index.h("div", null, index.h("q2-icon", { type: this.computedIconLeft, class: this.computedClassForIconLeft }))), hasInputLeftSlot && index.h("slot", { name: "input-left" }), this.showIconSeparator && index.h("div", { class: "vertical-separator" }), this.hasError && this.type === 'currency' && (index.h("div", { "test-id": "divIconError", onClick: this.onRefocusInput }, index.h("q2-icon", { type: "error", class: "icon-error", "test-id": "iconError" })))), this.pseudo ? this.renderPseudoInputDOM() : this.renderStandardInputDOM(), index.h("div", { class: "input-icons-container-right" }, index.h("q2-btn", { class: this.clearClasses.join(' '), label: index$1.loc('tecton.element.input.clear', [this.label]), hideLabel: true, "test-id": "clearButton", onClick: this.onClearInput, onKeyDown: e => e.stopPropagation() }, index.h("q2-icon", { type: "close", class: "icon-clear" })), ['password', 'text', 'ssn', 'tin'].includes(this.type) && this.showVisibilityToggle && (index.h("q2-btn", { class: "btn-visibility-toggle", "test-id": "toggleVisibilityButton", onClick: this.onToggleVisibility, label: index$1.loc(this.visibilityToggleAriaLabel, { label: this.label }), "hide-label": true }, this.visibilityToggleText)), this.formattedValueObject.suffix && (index.h("span", { class: "input-suffix" }, this.formattedValueObject.suffix)), this.badgeValue && (index.h("q2-badge", { size: "large", theme: this.badgeTheme }, this.badgeValue)), this.hasError && this.type !== 'currency' && (index.h("div", { "test-id": "divIconError", onClick: this.onRefocusInput }, index.h("q2-icon", { type: "error", class: "icon-error", "test-id": "iconError" }))), this.iconRight && !this.formattedValueObject.suffix && (index.h("div", null, index.h("q2-icon", { type: this.iconRight, class: "icon-right" }))), hasInputRightSlot && index.h("slot", { name: "input-right" }))));
+        return (index.h("div", { class: "input-container", tabindex: -1, "test-id": "inputContainer" }, index.h("div", { class: "input-icons-container-left" }, this.formattedValueObject.prefix && (index.h("div", { class: "input-prefix" }, this.formattedValueObject.prefix)), this.computedIconLeft && (index.h("div", null, index.h("q2-icon", { type: this.computedIconLeft, class: this.computedClassForIconLeft }))), hasInputLeftSlot && index.h("slot", { name: "input-left" }), this.showIconSeparator && index.h("div", { class: "vertical-separator" }), this.hasError && this.type === 'currency' && (index.h("div", { "test-id": "divIconError", onClick: this.onRefocusInput }, index.h("q2-icon", { type: "error", class: "icon-error", "test-id": "iconError" })))), this.pseudo ? this.renderPseudoInputDOM() : this.renderStandardInputDOM(), index.h("div", { class: "input-icons-container-right" }, index.h("q2-btn", { class: this.clearClasses.join(' '), label: index$1.loc('tecton.element.input.clear', [this.label]), hideLabel: true, "test-id": "clearButton", onMouseDown: e => e.preventDefault(), onClick: this.onClearInput, onKeyDown: e => e.stopPropagation() }, index.h("q2-icon", { type: "close", class: "icon-clear" })), ['password', 'text', 'ssn', 'tin'].includes(this.type) && this.showVisibilityToggle && (index.h("q2-btn", { class: "btn-visibility-toggle", "test-id": "toggleVisibilityButton", onClick: this.onToggleVisibility, label: index$1.loc(this.visibilityToggleAriaLabel, { label: this.label }), "hide-label": true }, this.visibilityToggleText)), this.formattedValueObject.suffix && (index.h("span", { class: "input-suffix" }, this.formattedValueObject.suffix)), this.badgeValue && (index.h("q2-badge", { size: "large", theme: this.badgeTheme }, this.badgeValue)), this.hasError && this.type !== 'currency' && (index.h("div", { "test-id": "divIconError", onClick: this.onRefocusInput }, index.h("q2-icon", { type: "error", class: "icon-error", "test-id": "iconError" }))), this.iconRight && !this.formattedValueObject.suffix && (index.h("div", null, index.h("q2-icon", { type: this.iconRight, class: "icon-right" }))), hasInputRightSlot && index.h("slot", { name: "input-right" }))));
     }
     renderPseudoInputDOM() {
         const showPlaceholder = !this.value && !!this.placeholder;
@@ -3572,7 +3575,7 @@ const Q2Input = class {
     }
     render() {
         const { ariaControls, ariaExpanded } = this.ariaAttributes;
-        return (index.h(index.Host, { key: '5cd0ac01d09732c81c59519cd04a998ff99e4dea', role: this._role, "aria-controls": ariaControls, "aria-expanded": ariaExpanded }, index.h("div", { key: '3907d95e0564a7e5f53148f6bdd02f0d51dcc8b6', class: this.wrapperClasses }, index.h("div", { key: '73857901c65827a40b17a56e8a1ac4d1d9c4faf7', class: "label-wrapper" }, index$1.renderLabel(this), this.renderCountDOM()), this.renderInputContainerDOM(), index$1.renderMessages(this))));
+        return (index.h(index.Host, { key: 'dc8314b8051dd9250b67565e44dfe1c5d4c42899', role: this._role, "aria-controls": ariaControls, "aria-expanded": ariaExpanded }, index.h("div", { key: '2e1f3af0bd2eec990e40b1c01bf651640bd0130d', class: this.wrapperClasses }, index.h("div", { key: '25ffb3668026b44443dab5dfd2b884664fb42d7f', class: "label-wrapper" }, index$1.renderLabel(this), this.renderCountDOM()), this.renderInputContainerDOM(), index$1.renderMessages(this))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {