q2-tecton-elements 1.65.0 → 1.66.0

package/dist/q2-tecton-elements/q2-grid-area.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-grid-area.entry.esm.js","sources":["src/components/q2-grid-area/q2-grid-area.scss?tag=q2-grid-area&encapsulation=shadow","src/components/q2-grid-area/q2-grid-area.tsx"],"sourcesContent":["@import '../../styles/functions.scss';\n@import '../../styles/variables.scss';\n\n:host {\n    // base:\n    --grid-column-start: '';\n    --grid-column-end: '';\n    --grid-row-start: '';\n    --grid-row-end: '';\n    --justify-self: '';\n    --align-self: '';\n    --z-index: '';\n    // xs:\n    --xs-grid-column-start: '';\n    --xs-grid-column-end: '';\n    --xs-grid-row-start: '';\n    --xs-grid-row-end: '';\n    --xs-justify-self: '';\n    --xs-align-self: '';\n    --xs-z-index: '';\n    // sm:\n    --sm-grid-column-start: '';\n    --sm-grid-column-end: '';\n    --sm-grid-row-start: '';\n    --sm-grid-row-end: '';\n    --sm-justify-self: '';\n    --sm-align-self: '';\n    --sm-z-index: '';\n    // md:\n    --md-grid-column-start: '';\n    --md-grid-column-end: '';\n    --md-grid-row-start: '';\n    --md-grid-row-end: '';\n    --md-justify-self: '';\n    --md-align-self: '';\n    --md-z-index: '';\n    // lg:\n    --lg-grid-column-start: '';\n    --lg-grid-column-end: '';\n    --lg-grid-row-start: '';\n    --lg-grid-row-end: '';\n    --lg-justify-self: '';\n    --lg-align-self: '';\n    --lg-z-index: '';\n    // xl:\n    --xl-grid-column-start: '';\n    --xl-grid-column-end: '';\n    --xl-grid-row-start: '';\n    --xl-grid-row-end: '';\n    --xl-justify-self: '';\n    --xl-align-self: '';\n    --xl-z-index: '';\n}\n// base:\n@include generate-q2-grid-area-styles(\n    var(--grid-column-start),\n    var(--grid-column-end),\n    var(--grid-row-start),\n    var(--grid-row-end),\n    var(--justify-self),\n    var(--align-self),\n    var(--z-index)\n);\n// xs, sm, md, lg, xl:\n@each $breakpoint in $breakpoint-list {\n    @include breakpoint($breakpoint) {\n        @include generate-q2-grid-area-styles(\n            var(--#{$breakpoint}-grid-column-start),\n            var(--#{$breakpoint}-grid-column-end),\n            var(--#{$breakpoint}-grid-row-start),\n            var(--#{$breakpoint}-grid-row-end),\n            var(--#{$breakpoint}-justify-self),\n            var(--#{$breakpoint}-align-self),\n            var(--#{$breakpoint}-z-index)\n        );\n    }\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\nexport type TQ2GridAreaColumnStartOptions = 'auto' | number;\nexport type TQ2GridAreaColumnSpanOptions = number;\nexport type TQ2GridAreaRowStartOptions = 'auto' | number;\nexport type TQ2GridAreaRowSpanOptions = number;\nexport type TQ2GridAreaJustifyOptions = 'auto' | 'stretch' | 'start' | 'center' | 'end';\nexport type TQ2GridAreaAlignOptions = 'auto' | 'stretch' | 'start' | 'center' | 'end';\nexport type TQ2GridAreaZIndexOptions = 'auto' | number;\n\n/**\n * @name Grid Area\n * @category Display\n * @summary Use as a positioned cell within a Grid layout.\n */\n@Component({ tag: 'q2-grid-area', shadow: true, styleUrl: 'q2-grid-area.scss' })\nexport class Q2GridArea {\n    // #region Public Property API\n\n    /**\n     * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    align: TQ2GridAreaAlignOptions = 'auto';\n\n    /** Sets the column span amount of the grid area at the baseline viewport size.*/\n    @Prop({ reflect: true })\n    columnSpan: TQ2GridAreaColumnSpanOptions = 1;\n\n    /** Sets the starting column of the grid area at the baseline viewport size.*/\n    @Prop({ reflect: true })\n    columnStart: TQ2GridAreaColumnStartOptions = 'auto';\n\n    /**\n     * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    justify: TQ2GridAreaJustifyOptions = 'auto';\n\n    /**\n     * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    lgAlign: TQ2GridAreaAlignOptions;\n\n    /** Sets the column span amount of the grid area at the LG viewport size.*/\n    @Prop({ reflect: true })\n    lgColumnSpan: TQ2GridAreaColumnSpanOptions;\n\n    /**\n     * Sets the starting column of the grid area at the LG viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available column.\n     */\n    @Prop({ reflect: true })\n    lgColumnStart: TQ2GridAreaColumnStartOptions;\n\n    /**\n     * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    lgJustify: TQ2GridAreaJustifyOptions;\n\n    /** Sets the row span amount of the grid area at the LG viewport size.*/\n    @Prop({ reflect: true })\n    lgRowSpan: TQ2GridAreaRowSpanOptions;\n\n    /**\n     * Sets the starting row of the grid area at the LG viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available row.\n     */\n    @Prop({ reflect: true })\n    lgRowStart: TQ2GridAreaRowStartOptions;\n\n    /** Sets the z-index of the grid area at the LG viewport size.*/\n    @Prop({ reflect: true })\n    lgZIndex: TQ2GridAreaZIndexOptions;\n\n    /**\n     * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    mdAlign: TQ2GridAreaAlignOptions;\n\n    /** Sets the column span amount of the grid area at the MD viewport size.*/\n    @Prop({ reflect: true })\n    mdColumnSpan: TQ2GridAreaColumnSpanOptions;\n\n    /**\n     * Sets the starting column of the grid area at the MD viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available column.\n     */\n    @Prop({ reflect: true })\n    mdColumnStart: TQ2GridAreaColumnStartOptions;\n\n    /**\n     * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    mdJustify: TQ2GridAreaJustifyOptions;\n\n    /** Sets the row span amount of the grid area at the MD viewport size.*/\n    @Prop({ reflect: true })\n    mdRowSpan: TQ2GridAreaRowSpanOptions;\n\n    /**\n     * Sets the starting row of the grid area at the MD viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available row.\n     */\n    @Prop({ reflect: true })\n    mdRowStart: TQ2GridAreaRowStartOptions;\n\n    /** Sets the z-index of the grid area at the MD viewport size.*/\n    @Prop({ reflect: true })\n    mdZIndex: TQ2GridAreaZIndexOptions;\n\n    /** Sets the row span amount of the grid area at the baseline viewport size.*/\n    @Prop({ reflect: true })\n    rowSpan: TQ2GridAreaRowSpanOptions = 1;\n\n    /**\n     * Sets the starting row of the grid area at the baseline viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available row.\n     */\n    @Prop({ reflect: true })\n    rowStart: TQ2GridAreaRowStartOptions = 'auto';\n\n    /**\n     * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    smAlign: TQ2GridAreaAlignOptions;\n\n    /** Sets the column span amount of the grid area at the SM viewport size.*/\n    @Prop({ reflect: true })\n    smColumnSpan: TQ2GridAreaColumnSpanOptions;\n\n    /**\n     * Sets the starting column of the grid area at the SM viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available column.\n     */\n    @Prop({ reflect: true })\n    smColumnStart: TQ2GridAreaColumnStartOptions;\n\n    /**\n     * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    smJustify: TQ2GridAreaJustifyOptions;\n\n    /** Sets the row span amount of the grid area at the SM viewport size.*/\n    @Prop({ reflect: true })\n    smRowSpan: TQ2GridAreaRowSpanOptions;\n\n    /**\n     * Sets the starting row of the grid area at the SM viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available row.\n     */\n    @Prop({ reflect: true })\n    smRowStart: TQ2GridAreaRowStartOptions;\n\n    /** Sets the z-index of the grid area at the SM viewport size.*/\n    @Prop({ reflect: true })\n    smZIndex: TQ2GridAreaZIndexOptions;\n\n    /**\n     * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    xlAlign: TQ2GridAreaAlignOptions;\n\n    /** Sets the column span amount of the grid area at the XL viewport size.*/\n    @Prop({ reflect: true })\n    xlColumnSpan: TQ2GridAreaColumnSpanOptions;\n\n    /**\n     * Sets the starting column of the grid area at the XL viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available column.\n     */\n    @Prop({ reflect: true })\n    xlColumnStart: TQ2GridAreaColumnStartOptions;\n\n    /**\n     * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    xlJustify: TQ2GridAreaJustifyOptions;\n\n    /** Sets the row span amount of the grid area at the XL viewport size.*/\n    @Prop({ reflect: true })\n    xlRowSpan: TQ2GridAreaRowSpanOptions;\n\n    /**\n     * Sets the starting row of the grid area at the XL viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available row.\n     */\n    @Prop({ reflect: true })\n    xlRowStart: TQ2GridAreaRowStartOptions;\n\n    /** Sets the z-index of the grid area at the XL viewport size.*/\n    @Prop({ reflect: true })\n    xlZIndex: TQ2GridAreaZIndexOptions;\n\n    /**\n     * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    xsAlign: TQ2GridAreaAlignOptions;\n\n    /** Sets the column span amount of the grid area at the XS viewport size.*/\n    @Prop({ reflect: true })\n    xsColumnSpan: TQ2GridAreaColumnSpanOptions;\n\n    /**\n     * Sets the starting column of the grid area at the XS viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available column.\n     */\n    @Prop({ reflect: true })\n    xsColumnStart: TQ2GridAreaColumnStartOptions;\n\n    /**\n     * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    xsJustify: TQ2GridAreaJustifyOptions;\n\n    /** Sets the row span amount of the grid area at the XS viewport size.*/\n    @Prop({ reflect: true })\n    xsRowSpan: TQ2GridAreaRowSpanOptions;\n\n    /**\n     * Sets the starting row of the grid area at the XS viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available row.\n     */\n    @Prop({ reflect: true })\n    xsRowStart: TQ2GridAreaRowStartOptions;\n\n    /** Sets the z-index of the grid area at the XS viewport size.*/\n    @Prop({ reflect: true })\n    xsZIndex: TQ2GridAreaZIndexOptions;\n\n    /** Sets the z-index of the grid area at the baseline viewport size.*/\n    @Prop({ reflect: true })\n    zIndex: TQ2GridAreaZIndexOptions = 'auto';\n\n    // #endregion\n    // #region Local Methods\n\n    get computedLgZIndex() {\n        return this.lgZIndex || this.lgZIndex === 0 ? this.lgZIndex : this.computedMdZIndex;\n    }\n\n    get computedMdZIndex() {\n        return this.mdZIndex || this.mdZIndex === 0 ? this.mdZIndex : this.computedSmZIndex;\n    }\n\n    get computedSmZIndex() {\n        return this.smZIndex || this.smZIndex === 0 ? this.smZIndex : this.computedXsZIndex;\n    }\n\n    get computedXlZIndex() {\n        return this.xlZIndex || this.xlZIndex === 0 ? this.xlZIndex : this.computedLgZIndex;\n    }\n\n    get computedXsZIndex() {\n        return this.xsZIndex || this.xsZIndex === 0 ? this.xsZIndex : this.zIndex;\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const q2GridAreaStyles: { [key: string]: string } = {\n            // base:\n            '--grid-column-start': `${this.columnStart}`,\n            '--grid-column-end': `span ${this.columnSpan}`,\n            '--grid-row-start': `${this.rowStart}`,\n            '--grid-row-end': `span ${this.rowSpan}`,\n            '--justify-self': this.justify,\n            '--align-self': this.align,\n            '--z-index': `${this.zIndex}`,\n            // xs:\n            '--xs-grid-column-start': `${this.xsColumnStart || this.columnStart}`,\n            '--xs-grid-column-end': `span ${this.xsColumnSpan || this.columnSpan}`,\n            '--xs-grid-row-start': `${this.xsRowStart || this.rowStart}`,\n            '--xs-grid-row-end': `span ${this.xsRowSpan || this.rowSpan}`,\n            '--xs-justify-self': this.xsJustify || this.justify,\n            '--xs-align-self': this.xsAlign || this.align,\n            '--xs-z-index': `${this.computedXsZIndex}`,\n            // sm:\n            '--sm-grid-column-start': `${this.smColumnStart || this.xsColumnStart || this.columnStart}`,\n            '--sm-grid-column-end': `span ${this.smColumnSpan || this.xsColumnSpan || this.columnSpan}`,\n            '--sm-grid-row-start': `${this.smRowStart || this.xsRowStart || this.rowStart}`,\n            '--sm-grid-row-end': `span ${this.smRowSpan || this.xsRowSpan || this.rowSpan}`,\n            '--sm-justify-self': this.smJustify || this.xsJustify || this.justify,\n            '--sm-align-self': this.smAlign || this.xsAlign || this.align,\n            '--sm-z-index': `${this.computedSmZIndex}`,\n            // md:\n            '--md-grid-column-start': `${this.mdColumnStart || this.smColumnStart || this.xsColumnStart || this.columnStart}`,\n            '--md-grid-column-end': `span ${this.mdColumnSpan || this.smColumnSpan || this.xsColumnSpan || this.columnSpan}`,\n            '--md-grid-row-start': `${this.mdRowStart || this.smRowStart || this.xsRowStart || this.rowStart}`,\n            '--md-grid-row-end': `span ${this.mdRowSpan || this.smRowSpan || this.xsRowSpan || this.rowSpan}`,\n            '--md-justify-self': this.mdJustify || this.smJustify || this.xsJustify || this.justify,\n            '--md-align-self': this.mdAlign || this.smAlign || this.xsAlign || this.align,\n            '--md-z-index': `${this.computedMdZIndex}`,\n            // lg:\n            '--lg-grid-column-start': `${this.lgColumnStart || this.mdColumnStart || this.smColumnStart || this.xsColumnStart || this.columnStart}`,\n            '--lg-grid-column-end': `span ${this.lgColumnSpan || this.mdColumnSpan || this.smColumnSpan || this.xsColumnSpan || this.columnSpan}`,\n            '--lg-grid-row-start': `${this.lgRowStart || this.mdRowStart || this.smRowStart || this.xsRowStart || this.rowStart}`,\n            '--lg-grid-row-end': `span ${this.lgRowSpan || this.mdRowSpan || this.smRowSpan || this.xsRowSpan || this.rowSpan}`,\n            '--lg-justify-self': this.lgJustify || this.mdJustify || this.smJustify || this.xsJustify || this.justify,\n            '--lg-align-self': this.lgAlign || this.mdAlign || this.smAlign || this.xsAlign || this.align,\n            '--lg-z-index': `${this.computedLgZIndex}`,\n            // xl:\n            '--xl-grid-column-start': `${this.xlColumnStart || this.lgColumnStart || this.mdColumnStart || this.smColumnStart || this.xsColumnStart || this.columnStart}`,\n            '--xl-grid-column-end': `span ${this.xlColumnSpan || this.lgColumnSpan || this.mdColumnSpan || this.smColumnSpan || this.xsColumnSpan || this.columnSpan}`,\n            '--xl-grid-row-start': `${this.xlRowStart || this.lgRowStart || this.mdRowStart || this.smRowStart || this.xsRowStart || this.rowStart}`,\n            '--xl-grid-row-end': `span ${this.xlRowSpan || this.lgRowSpan || this.mdRowSpan || this.smRowSpan || this.xsRowSpan || this.rowSpan}`,\n            '--xl-justify-self':\n                this.xlJustify || this.lgJustify || this.mdJustify || this.smJustify || this.xsJustify || this.justify,\n            '--xl-align-self':\n                this.xlAlign || this.lgAlign || this.mdAlign || this.smAlign || this.xsAlign || this.align,\n            '--xl-z-index': `${this.computedXlZIndex}`,\n        };\n\n        return (\n            <Host style={q2GridAreaStyles}>\n                <slot />\n            </Host>\n        );\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"q2-grid-area.entry.esm.js","sources":["src/components/q2-grid-area/q2-grid-area.scss?tag=q2-grid-area&encapsulation=shadow","src/components/q2-grid-area/q2-grid-area.tsx"],"sourcesContent":["@import '../../styles/functions.scss';\n@import '../../styles/variables.scss';\n\n:host {\n    // base:\n    --grid-column-start: '';\n    --grid-column-end: '';\n    --grid-row-start: '';\n    --grid-row-end: '';\n    --justify-self: '';\n    --align-self: '';\n    --z-index: '';\n    // xs:\n    --xs-grid-column-start: '';\n    --xs-grid-column-end: '';\n    --xs-grid-row-start: '';\n    --xs-grid-row-end: '';\n    --xs-justify-self: '';\n    --xs-align-self: '';\n    --xs-z-index: '';\n    // sm:\n    --sm-grid-column-start: '';\n    --sm-grid-column-end: '';\n    --sm-grid-row-start: '';\n    --sm-grid-row-end: '';\n    --sm-justify-self: '';\n    --sm-align-self: '';\n    --sm-z-index: '';\n    // md:\n    --md-grid-column-start: '';\n    --md-grid-column-end: '';\n    --md-grid-row-start: '';\n    --md-grid-row-end: '';\n    --md-justify-self: '';\n    --md-align-self: '';\n    --md-z-index: '';\n    // lg:\n    --lg-grid-column-start: '';\n    --lg-grid-column-end: '';\n    --lg-grid-row-start: '';\n    --lg-grid-row-end: '';\n    --lg-justify-self: '';\n    --lg-align-self: '';\n    --lg-z-index: '';\n    // xl:\n    --xl-grid-column-start: '';\n    --xl-grid-column-end: '';\n    --xl-grid-row-start: '';\n    --xl-grid-row-end: '';\n    --xl-justify-self: '';\n    --xl-align-self: '';\n    --xl-z-index: '';\n}\n// base:\n@include generate-q2-grid-area-styles(\n    var(--grid-column-start),\n    var(--grid-column-end),\n    var(--grid-row-start),\n    var(--grid-row-end),\n    var(--justify-self),\n    var(--align-self),\n    var(--z-index)\n);\n// xs, sm, md, lg, xl:\n@each $breakpoint in $breakpoint-list {\n    @include breakpoint($breakpoint) {\n        @include generate-q2-grid-area-styles(\n            var(--#{$breakpoint}-grid-column-start),\n            var(--#{$breakpoint}-grid-column-end),\n            var(--#{$breakpoint}-grid-row-start),\n            var(--#{$breakpoint}-grid-row-end),\n            var(--#{$breakpoint}-justify-self),\n            var(--#{$breakpoint}-align-self),\n            var(--#{$breakpoint}-z-index)\n        );\n    }\n}\n","import { Component, h, Prop, Host, Element } from '@stencil/core';\nimport { hasValidParent } from '@/utils/component';\n\nexport type TQ2GridAreaColumnStartOptions = 'auto' | number;\nexport type TQ2GridAreaColumnSpanOptions = number;\nexport type TQ2GridAreaRowStartOptions = 'auto' | number;\nexport type TQ2GridAreaRowSpanOptions = number;\nexport type TQ2GridAreaJustifyOptions = 'auto' | 'stretch' | 'start' | 'center' | 'end';\nexport type TQ2GridAreaAlignOptions = 'auto' | 'stretch' | 'start' | 'center' | 'end';\nexport type TQ2GridAreaZIndexOptions = 'auto' | number;\n\n/**\n * @name Grid Area\n * @category Display\n * @summary Use as a positioned cell within a Grid layout.\n */\n@Component({ tag: 'q2-grid-area', shadow: true, styleUrl: 'q2-grid-area.scss' })\nexport class Q2GridArea {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    align: TQ2GridAreaAlignOptions = 'auto';\n\n    /** Sets the column span amount of the grid area at the baseline viewport size.*/\n    @Prop({ reflect: true })\n    columnSpan: TQ2GridAreaColumnSpanOptions = 1;\n\n    /** Sets the starting column of the grid area at the baseline viewport size.*/\n    @Prop({ reflect: true })\n    columnStart: TQ2GridAreaColumnStartOptions = 'auto';\n\n    /**\n     * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    justify: TQ2GridAreaJustifyOptions = 'auto';\n\n    /**\n     * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    lgAlign: TQ2GridAreaAlignOptions;\n\n    /** Sets the column span amount of the grid area at the LG viewport size.*/\n    @Prop({ reflect: true })\n    lgColumnSpan: TQ2GridAreaColumnSpanOptions;\n\n    /**\n     * Sets the starting column of the grid area at the LG viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available column.\n     */\n    @Prop({ reflect: true })\n    lgColumnStart: TQ2GridAreaColumnStartOptions;\n\n    /**\n     * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    lgJustify: TQ2GridAreaJustifyOptions;\n\n    /** Sets the row span amount of the grid area at the LG viewport size.*/\n    @Prop({ reflect: true })\n    lgRowSpan: TQ2GridAreaRowSpanOptions;\n\n    /**\n     * Sets the starting row of the grid area at the LG viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available row.\n     */\n    @Prop({ reflect: true })\n    lgRowStart: TQ2GridAreaRowStartOptions;\n\n    /** Sets the z-index of the grid area at the LG viewport size.*/\n    @Prop({ reflect: true })\n    lgZIndex: TQ2GridAreaZIndexOptions;\n\n    /**\n     * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    mdAlign: TQ2GridAreaAlignOptions;\n\n    /** Sets the column span amount of the grid area at the MD viewport size.*/\n    @Prop({ reflect: true })\n    mdColumnSpan: TQ2GridAreaColumnSpanOptions;\n\n    /**\n     * Sets the starting column of the grid area at the MD viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available column.\n     */\n    @Prop({ reflect: true })\n    mdColumnStart: TQ2GridAreaColumnStartOptions;\n\n    /**\n     * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    mdJustify: TQ2GridAreaJustifyOptions;\n\n    /** Sets the row span amount of the grid area at the MD viewport size.*/\n    @Prop({ reflect: true })\n    mdRowSpan: TQ2GridAreaRowSpanOptions;\n\n    /**\n     * Sets the starting row of the grid area at the MD viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available row.\n     */\n    @Prop({ reflect: true })\n    mdRowStart: TQ2GridAreaRowStartOptions;\n\n    /** Sets the z-index of the grid area at the MD viewport size.*/\n    @Prop({ reflect: true })\n    mdZIndex: TQ2GridAreaZIndexOptions;\n\n    /** Sets the row span amount of the grid area at the baseline viewport size.*/\n    @Prop({ reflect: true })\n    rowSpan: TQ2GridAreaRowSpanOptions = 1;\n\n    /**\n     * Sets the starting row of the grid area at the baseline viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available row.\n     */\n    @Prop({ reflect: true })\n    rowStart: TQ2GridAreaRowStartOptions = 'auto';\n\n    /**\n     * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    smAlign: TQ2GridAreaAlignOptions;\n\n    /** Sets the column span amount of the grid area at the SM viewport size.*/\n    @Prop({ reflect: true })\n    smColumnSpan: TQ2GridAreaColumnSpanOptions;\n\n    /**\n     * Sets the starting column of the grid area at the SM viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available column.\n     */\n    @Prop({ reflect: true })\n    smColumnStart: TQ2GridAreaColumnStartOptions;\n\n    /**\n     * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    smJustify: TQ2GridAreaJustifyOptions;\n\n    /** Sets the row span amount of the grid area at the SM viewport size.*/\n    @Prop({ reflect: true })\n    smRowSpan: TQ2GridAreaRowSpanOptions;\n\n    /**\n     * Sets the starting row of the grid area at the SM viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available row.\n     */\n    @Prop({ reflect: true })\n    smRowStart: TQ2GridAreaRowStartOptions;\n\n    /** Sets the z-index of the grid area at the SM viewport size.*/\n    @Prop({ reflect: true })\n    smZIndex: TQ2GridAreaZIndexOptions;\n\n    /**\n     * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    xlAlign: TQ2GridAreaAlignOptions;\n\n    /** Sets the column span amount of the grid area at the XL viewport size.*/\n    @Prop({ reflect: true })\n    xlColumnSpan: TQ2GridAreaColumnSpanOptions;\n\n    /**\n     * Sets the starting column of the grid area at the XL viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available column.\n     */\n    @Prop({ reflect: true })\n    xlColumnStart: TQ2GridAreaColumnStartOptions;\n\n    /**\n     * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    xlJustify: TQ2GridAreaJustifyOptions;\n\n    /** Sets the row span amount of the grid area at the XL viewport size.*/\n    @Prop({ reflect: true })\n    xlRowSpan: TQ2GridAreaRowSpanOptions;\n\n    /**\n     * Sets the starting row of the grid area at the XL viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available row.\n     */\n    @Prop({ reflect: true })\n    xlRowStart: TQ2GridAreaRowStartOptions;\n\n    /** Sets the z-index of the grid area at the XL viewport size.*/\n    @Prop({ reflect: true })\n    xlZIndex: TQ2GridAreaZIndexOptions;\n\n    /**\n     * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    xsAlign: TQ2GridAreaAlignOptions;\n\n    /** Sets the column span amount of the grid area at the XS viewport size.*/\n    @Prop({ reflect: true })\n    xsColumnSpan: TQ2GridAreaColumnSpanOptions;\n\n    /**\n     * Sets the starting column of the grid area at the XS viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available column.\n     */\n    @Prop({ reflect: true })\n    xsColumnStart: TQ2GridAreaColumnStartOptions;\n\n    /**\n     * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    xsJustify: TQ2GridAreaJustifyOptions;\n\n    /** Sets the row span amount of the grid area at the XS viewport size.*/\n    @Prop({ reflect: true })\n    xsRowSpan: TQ2GridAreaRowSpanOptions;\n\n    /**\n     * Sets the starting row of the grid area at the XS viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available row.\n     */\n    @Prop({ reflect: true })\n    xsRowStart: TQ2GridAreaRowStartOptions;\n\n    /** Sets the z-index of the grid area at the XS viewport size.*/\n    @Prop({ reflect: true })\n    xsZIndex: TQ2GridAreaZIndexOptions;\n\n    /** Sets the z-index of the grid area at the baseline viewport size.*/\n    @Prop({ reflect: true })\n    zIndex: TQ2GridAreaZIndexOptions = 'auto';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        hasValidParent(this.hostElement, 'q2-grid');\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get computedLgZIndex() {\n        return this.lgZIndex || this.lgZIndex === 0 ? this.lgZIndex : this.computedMdZIndex;\n    }\n\n    get computedMdZIndex() {\n        return this.mdZIndex || this.mdZIndex === 0 ? this.mdZIndex : this.computedSmZIndex;\n    }\n\n    get computedSmZIndex() {\n        return this.smZIndex || this.smZIndex === 0 ? this.smZIndex : this.computedXsZIndex;\n    }\n\n    get computedXlZIndex() {\n        return this.xlZIndex || this.xlZIndex === 0 ? this.xlZIndex : this.computedLgZIndex;\n    }\n\n    get computedXsZIndex() {\n        return this.xsZIndex || this.xsZIndex === 0 ? this.xsZIndex : this.zIndex;\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const q2GridAreaStyles: { [key: string]: string } = {\n            // base:\n            '--grid-column-start': `${this.columnStart}`,\n            '--grid-column-end': `span ${this.columnSpan}`,\n            '--grid-row-start': `${this.rowStart}`,\n            '--grid-row-end': `span ${this.rowSpan}`,\n            '--justify-self': this.justify,\n            '--align-self': this.align,\n            '--z-index': `${this.zIndex}`,\n            // xs:\n            '--xs-grid-column-start': `${this.xsColumnStart || this.columnStart}`,\n            '--xs-grid-column-end': `span ${this.xsColumnSpan || this.columnSpan}`,\n            '--xs-grid-row-start': `${this.xsRowStart || this.rowStart}`,\n            '--xs-grid-row-end': `span ${this.xsRowSpan || this.rowSpan}`,\n            '--xs-justify-self': this.xsJustify || this.justify,\n            '--xs-align-self': this.xsAlign || this.align,\n            '--xs-z-index': `${this.computedXsZIndex}`,\n            // sm:\n            '--sm-grid-column-start': `${this.smColumnStart || this.xsColumnStart || this.columnStart}`,\n            '--sm-grid-column-end': `span ${this.smColumnSpan || this.xsColumnSpan || this.columnSpan}`,\n            '--sm-grid-row-start': `${this.smRowStart || this.xsRowStart || this.rowStart}`,\n            '--sm-grid-row-end': `span ${this.smRowSpan || this.xsRowSpan || this.rowSpan}`,\n            '--sm-justify-self': this.smJustify || this.xsJustify || this.justify,\n            '--sm-align-self': this.smAlign || this.xsAlign || this.align,\n            '--sm-z-index': `${this.computedSmZIndex}`,\n            // md:\n            '--md-grid-column-start': `${this.mdColumnStart || this.smColumnStart || this.xsColumnStart || this.columnStart}`,\n            '--md-grid-column-end': `span ${this.mdColumnSpan || this.smColumnSpan || this.xsColumnSpan || this.columnSpan}`,\n            '--md-grid-row-start': `${this.mdRowStart || this.smRowStart || this.xsRowStart || this.rowStart}`,\n            '--md-grid-row-end': `span ${this.mdRowSpan || this.smRowSpan || this.xsRowSpan || this.rowSpan}`,\n            '--md-justify-self': this.mdJustify || this.smJustify || this.xsJustify || this.justify,\n            '--md-align-self': this.mdAlign || this.smAlign || this.xsAlign || this.align,\n            '--md-z-index': `${this.computedMdZIndex}`,\n            // lg:\n            '--lg-grid-column-start': `${this.lgColumnStart || this.mdColumnStart || this.smColumnStart || this.xsColumnStart || this.columnStart}`,\n            '--lg-grid-column-end': `span ${this.lgColumnSpan || this.mdColumnSpan || this.smColumnSpan || this.xsColumnSpan || this.columnSpan}`,\n            '--lg-grid-row-start': `${this.lgRowStart || this.mdRowStart || this.smRowStart || this.xsRowStart || this.rowStart}`,\n            '--lg-grid-row-end': `span ${this.lgRowSpan || this.mdRowSpan || this.smRowSpan || this.xsRowSpan || this.rowSpan}`,\n            '--lg-justify-self': this.lgJustify || this.mdJustify || this.smJustify || this.xsJustify || this.justify,\n            '--lg-align-self': this.lgAlign || this.mdAlign || this.smAlign || this.xsAlign || this.align,\n            '--lg-z-index': `${this.computedLgZIndex}`,\n            // xl:\n            '--xl-grid-column-start': `${this.xlColumnStart || this.lgColumnStart || this.mdColumnStart || this.smColumnStart || this.xsColumnStart || this.columnStart}`,\n            '--xl-grid-column-end': `span ${this.xlColumnSpan || this.lgColumnSpan || this.mdColumnSpan || this.smColumnSpan || this.xsColumnSpan || this.columnSpan}`,\n            '--xl-grid-row-start': `${this.xlRowStart || this.lgRowStart || this.mdRowStart || this.smRowStart || this.xsRowStart || this.rowStart}`,\n            '--xl-grid-row-end': `span ${this.xlRowSpan || this.lgRowSpan || this.mdRowSpan || this.smRowSpan || this.xsRowSpan || this.rowSpan}`,\n            '--xl-justify-self':\n                this.xlJustify || this.lgJustify || this.mdJustify || this.smJustify || this.xsJustify || this.justify,\n            '--xl-align-self':\n                this.xlAlign || this.lgAlign || this.mdAlign || this.smAlign || this.xsAlign || this.align,\n            '--xl-z-index': `${this.computedXlZIndex}`,\n        };\n\n        return (\n            <Host style={q2GridAreaStyles}>\n                <slot />\n            </Host>\n        );\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":"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"}

package/dist/q2-tecton-elements/q2-grid-area.entry.js

@@ -1,10 +1,13 @@
-import { r as s, h as i, H as t } from "./index-CGkHOjh1.js";
+import { r as s, h as i, H as t, g as r } from "./index-CGkHOjh1.js";
 
-const r = ':host{--grid-column-start:"";--grid-column-end:"";--grid-row-start:"";--grid-row-end:"";--justify-self:"";--align-self:"";--z-index:"";--xs-grid-column-start:"";--xs-grid-column-end:"";--xs-grid-row-start:"";--xs-grid-row-end:"";--xs-justify-self:"";--xs-align-self:"";--xs-z-index:"";--sm-grid-column-start:"";--sm-grid-column-end:"";--sm-grid-row-start:"";--sm-grid-row-end:"";--sm-justify-self:"";--sm-align-self:"";--sm-z-index:"";--md-grid-column-start:"";--md-grid-column-end:"";--md-grid-row-start:"";--md-grid-row-end:"";--md-justify-self:"";--md-align-self:"";--md-z-index:"";--lg-grid-column-start:"";--lg-grid-column-end:"";--lg-grid-row-start:"";--lg-grid-row-end:"";--lg-justify-self:"";--lg-align-self:"";--lg-z-index:"";--xl-grid-column-start:"";--xl-grid-column-end:"";--xl-grid-row-start:"";--xl-grid-row-end:"";--xl-justify-self:"";--xl-align-self:"";--xl-z-index:""}:host{grid-column-start:var(--grid-column-start);grid-column-end:var(--grid-column-end);grid-row-start:var(--grid-row-start);grid-row-end:var(--grid-row-end);justify-self:var(--justify-self);align-self:var(--align-self);z-index:var(--z-index)}@media screen and (min-width: 480px){:host{grid-column-start:var(--xs-grid-column-start);grid-column-end:var(--xs-grid-column-end);grid-row-start:var(--xs-grid-row-start);grid-row-end:var(--xs-grid-row-end);justify-self:var(--xs-justify-self);align-self:var(--xs-align-self);z-index:var(--xs-z-index)}}@media screen and (min-width: 768px){:host{grid-column-start:var(--sm-grid-column-start);grid-column-end:var(--sm-grid-column-end);grid-row-start:var(--sm-grid-row-start);grid-row-end:var(--sm-grid-row-end);justify-self:var(--sm-justify-self);align-self:var(--sm-align-self);z-index:var(--sm-z-index)}}@media screen and (min-width: 992px){:host{grid-column-start:var(--md-grid-column-start);grid-column-end:var(--md-grid-column-end);grid-row-start:var(--md-grid-row-start);grid-row-end:var(--md-grid-row-end);justify-self:var(--md-justify-self);align-self:var(--md-align-self);z-index:var(--md-z-index)}}@media screen and (min-width: 1200px){:host{grid-column-start:var(--lg-grid-column-start);grid-column-end:var(--lg-grid-column-end);grid-row-start:var(--lg-grid-row-start);grid-row-end:var(--lg-grid-row-end);justify-self:var(--lg-justify-self);align-self:var(--lg-align-self);z-index:var(--lg-z-index)}}@media screen and (min-width: 1400px){:host{grid-column-start:var(--xl-grid-column-start);grid-column-end:var(--xl-grid-column-end);grid-row-start:var(--xl-grid-row-start);grid-row-end:var(--xl-grid-row-end);justify-self:var(--xl-justify-self);align-self:var(--xl-align-self);z-index:var(--xl-z-index)}}';
+import { a as d } from "./component-DVxzK3WH.js";
 
-const d = class {
+const n = ':host{--grid-column-start:"";--grid-column-end:"";--grid-row-start:"";--grid-row-end:"";--justify-self:"";--align-self:"";--z-index:"";--xs-grid-column-start:"";--xs-grid-column-end:"";--xs-grid-row-start:"";--xs-grid-row-end:"";--xs-justify-self:"";--xs-align-self:"";--xs-z-index:"";--sm-grid-column-start:"";--sm-grid-column-end:"";--sm-grid-row-start:"";--sm-grid-row-end:"";--sm-justify-self:"";--sm-align-self:"";--sm-z-index:"";--md-grid-column-start:"";--md-grid-column-end:"";--md-grid-row-start:"";--md-grid-row-end:"";--md-justify-self:"";--md-align-self:"";--md-z-index:"";--lg-grid-column-start:"";--lg-grid-column-end:"";--lg-grid-row-start:"";--lg-grid-row-end:"";--lg-justify-self:"";--lg-align-self:"";--lg-z-index:"";--xl-grid-column-start:"";--xl-grid-column-end:"";--xl-grid-row-start:"";--xl-grid-row-end:"";--xl-justify-self:"";--xl-align-self:"";--xl-z-index:""}:host{grid-column-start:var(--grid-column-start);grid-column-end:var(--grid-column-end);grid-row-start:var(--grid-row-start);grid-row-end:var(--grid-row-end);justify-self:var(--justify-self);align-self:var(--align-self);z-index:var(--z-index)}@media screen and (min-width: 480px){:host{grid-column-start:var(--xs-grid-column-start);grid-column-end:var(--xs-grid-column-end);grid-row-start:var(--xs-grid-row-start);grid-row-end:var(--xs-grid-row-end);justify-self:var(--xs-justify-self);align-self:var(--xs-align-self);z-index:var(--xs-z-index)}}@media screen and (min-width: 768px){:host{grid-column-start:var(--sm-grid-column-start);grid-column-end:var(--sm-grid-column-end);grid-row-start:var(--sm-grid-row-start);grid-row-end:var(--sm-grid-row-end);justify-self:var(--sm-justify-self);align-self:var(--sm-align-self);z-index:var(--sm-z-index)}}@media screen and (min-width: 992px){:host{grid-column-start:var(--md-grid-column-start);grid-column-end:var(--md-grid-column-end);grid-row-start:var(--md-grid-row-start);grid-row-end:var(--md-grid-row-end);justify-self:var(--md-justify-self);align-self:var(--md-align-self);z-index:var(--md-z-index)}}@media screen and (min-width: 1200px){:host{grid-column-start:var(--lg-grid-column-start);grid-column-end:var(--lg-grid-column-end);grid-row-start:var(--lg-grid-row-start);grid-row-end:var(--lg-grid-row-end);justify-self:var(--lg-justify-self);align-self:var(--lg-align-self);z-index:var(--lg-z-index)}}@media screen and (min-width: 1400px){:host{grid-column-start:var(--xl-grid-column-start);grid-column-end:var(--xl-grid-column-end);grid-row-start:var(--xl-grid-row-start);grid-row-end:var(--xl-grid-row-end);justify-self:var(--xl-justify-self);align-self:var(--xl-align-self);z-index:var(--xl-z-index)}}';
+
+const h = class {
   constructor(i) {
     s(this, i);
+    // #endregion
     // #region Public Property API
     /**
          * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.
@@ -24,6 +27,11 @@ const d = class {
     /** Sets the z-index of the grid area at the baseline viewport size.*/    this.zIndex = "auto";
   }
   // #endregion
+  // #region Component Lifecycle Events
+  componentWillLoad() {
+    d(this.hostElement, "q2-grid");
+  }
+  // #endregion
   // #region Local Methods
   get computedLgZIndex() {
     return this.lgZIndex || this.lgZIndex === 0 ? this.lgZIndex : this.computedMdZIndex;
@@ -94,16 +102,19 @@ const d = class {
       "--xl-z-index": `${this.computedXlZIndex}`
     };
     return i(t, {
-      key: "0bfd50a48ea3be1dcf61df020a5cc3286667b482",
+      key: "7e2f7933ba52dd99f90350dfb3a2778d1c1a37d0",
       style: s
     }, i("slot", {
-      key: "6a0ffa63252a784acc26ce7d30a8dec0d8218b19"
+      key: "39371e8a0fb1c1bd9c248ba5b8095f9bdd6022e7"
     }));
   }
+  get hostElement() {
+    return r(this);
+  }
 };
 
-d.style = r;
+h.style = n;
 
-export { d as q2_grid_area };
+export { h as q2_grid_area };
 //# sourceMappingURL=q2-grid-area.entry.esm.js.map
 //# sourceMappingURL=q2-grid-area.entry.js.map

package/dist/q2-tecton-elements/q2-grid-area.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["q2GridAreaCss","Q2GridArea","constructor","hostRef","this","align","columnSpan","columnStart","justify","rowSpan","rowStart","zIndex","computedLgZIndex","lgZIndex","computedMdZIndex","mdZIndex","computedSmZIndex","smZIndex","computedXsZIndex","computedXlZIndex","xlZIndex","xsZIndex","render","q2GridAreaStyles","xsColumnStart","xsColumnSpan","xsRowStart","xsRowSpan","xsJustify","xsAlign","smColumnStart","smColumnSpan","smRowStart","smRowSpan","smJustify","smAlign","mdColumnStart","mdColumnSpan","mdRowStart","mdRowSpan","mdJustify","mdAlign","lgColumnStart","lgColumnSpan","lgRowStart","lgRowSpan","lgJustify","lgAlign","xlColumnStart","xlColumnSpan","xlRowStart","xlRowSpan","xlJustify","xlAlign","h","Host","key","style"],"sources":["src/components/q2-grid-area/q2-grid-area.scss?tag=q2-grid-area&encapsulation=shadow","src/components/q2-grid-area/q2-grid-area.tsx"],"sourcesContent":["@import '../../styles/functions.scss';\n@import '../../styles/variables.scss';\n\n:host {\n    // base:\n    --grid-column-start: '';\n    --grid-column-end: '';\n    --grid-row-start: '';\n    --grid-row-end: '';\n    --justify-self: '';\n    --align-self: '';\n    --z-index: '';\n    // xs:\n    --xs-grid-column-start: '';\n    --xs-grid-column-end: '';\n    --xs-grid-row-start: '';\n    --xs-grid-row-end: '';\n    --xs-justify-self: '';\n    --xs-align-self: '';\n    --xs-z-index: '';\n    // sm:\n    --sm-grid-column-start: '';\n    --sm-grid-column-end: '';\n    --sm-grid-row-start: '';\n    --sm-grid-row-end: '';\n    --sm-justify-self: '';\n    --sm-align-self: '';\n    --sm-z-index: '';\n    // md:\n    --md-grid-column-start: '';\n    --md-grid-column-end: '';\n    --md-grid-row-start: '';\n    --md-grid-row-end: '';\n    --md-justify-self: '';\n    --md-align-self: '';\n    --md-z-index: '';\n    // lg:\n    --lg-grid-column-start: '';\n    --lg-grid-column-end: '';\n    --lg-grid-row-start: '';\n    --lg-grid-row-end: '';\n    --lg-justify-self: '';\n    --lg-align-self: '';\n    --lg-z-index: '';\n    // xl:\n    --xl-grid-column-start: '';\n    --xl-grid-column-end: '';\n    --xl-grid-row-start: '';\n    --xl-grid-row-end: '';\n    --xl-justify-self: '';\n    --xl-align-self: '';\n    --xl-z-index: '';\n}\n// base:\n@include generate-q2-grid-area-styles(\n    var(--grid-column-start),\n    var(--grid-column-end),\n    var(--grid-row-start),\n    var(--grid-row-end),\n    var(--justify-self),\n    var(--align-self),\n    var(--z-index)\n);\n// xs, sm, md, lg, xl:\n@each $breakpoint in $breakpoint-list {\n    @include breakpoint($breakpoint) {\n        @include generate-q2-grid-area-styles(\n            var(--#{$breakpoint}-grid-column-start),\n            var(--#{$breakpoint}-grid-column-end),\n            var(--#{$breakpoint}-grid-row-start),\n            var(--#{$breakpoint}-grid-row-end),\n            var(--#{$breakpoint}-justify-self),\n            var(--#{$breakpoint}-align-self),\n            var(--#{$breakpoint}-z-index)\n        );\n    }\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\nexport type TQ2GridAreaColumnStartOptions = 'auto' | number;\nexport type TQ2GridAreaColumnSpanOptions = number;\nexport type TQ2GridAreaRowStartOptions = 'auto' | number;\nexport type TQ2GridAreaRowSpanOptions = number;\nexport type TQ2GridAreaJustifyOptions = 'auto' | 'stretch' | 'start' | 'center' | 'end';\nexport type TQ2GridAreaAlignOptions = 'auto' | 'stretch' | 'start' | 'center' | 'end';\nexport type TQ2GridAreaZIndexOptions = 'auto' | number;\n\n/**\n * @name Grid Area\n * @category Display\n * @summary Use as a positioned cell within a Grid layout.\n */\n@Component({ tag: 'q2-grid-area', shadow: true, styleUrl: 'q2-grid-area.scss' })\nexport class Q2GridArea {\n    // #region Public Property API\n\n    /**\n     * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    align: TQ2GridAreaAlignOptions = 'auto';\n\n    /** Sets the column span amount of the grid area at the baseline viewport size.*/\n    @Prop({ reflect: true })\n    columnSpan: TQ2GridAreaColumnSpanOptions = 1;\n\n    /** Sets the starting column of the grid area at the baseline viewport size.*/\n    @Prop({ reflect: true })\n    columnStart: TQ2GridAreaColumnStartOptions = 'auto';\n\n    /**\n     * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    justify: TQ2GridAreaJustifyOptions = 'auto';\n\n    /**\n     * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    lgAlign: TQ2GridAreaAlignOptions;\n\n    /** Sets the column span amount of the grid area at the LG viewport size.*/\n    @Prop({ reflect: true })\n    lgColumnSpan: TQ2GridAreaColumnSpanOptions;\n\n    /**\n     * Sets the starting column of the grid area at the LG viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available column.\n     */\n    @Prop({ reflect: true })\n    lgColumnStart: TQ2GridAreaColumnStartOptions;\n\n    /**\n     * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    lgJustify: TQ2GridAreaJustifyOptions;\n\n    /** Sets the row span amount of the grid area at the LG viewport size.*/\n    @Prop({ reflect: true })\n    lgRowSpan: TQ2GridAreaRowSpanOptions;\n\n    /**\n     * Sets the starting row of the grid area at the LG viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available row.\n     */\n    @Prop({ reflect: true })\n    lgRowStart: TQ2GridAreaRowStartOptions;\n\n    /** Sets the z-index of the grid area at the LG viewport size.*/\n    @Prop({ reflect: true })\n    lgZIndex: TQ2GridAreaZIndexOptions;\n\n    /**\n     * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    mdAlign: TQ2GridAreaAlignOptions;\n\n    /** Sets the column span amount of the grid area at the MD viewport size.*/\n    @Prop({ reflect: true })\n    mdColumnSpan: TQ2GridAreaColumnSpanOptions;\n\n    /**\n     * Sets the starting column of the grid area at the MD viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available column.\n     */\n    @Prop({ reflect: true })\n    mdColumnStart: TQ2GridAreaColumnStartOptions;\n\n    /**\n     * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    mdJustify: TQ2GridAreaJustifyOptions;\n\n    /** Sets the row span amount of the grid area at the MD viewport size.*/\n    @Prop({ reflect: true })\n    mdRowSpan: TQ2GridAreaRowSpanOptions;\n\n    /**\n     * Sets the starting row of the grid area at the MD viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available row.\n     */\n    @Prop({ reflect: true })\n    mdRowStart: TQ2GridAreaRowStartOptions;\n\n    /** Sets the z-index of the grid area at the MD viewport size.*/\n    @Prop({ reflect: true })\n    mdZIndex: TQ2GridAreaZIndexOptions;\n\n    /** Sets the row span amount of the grid area at the baseline viewport size.*/\n    @Prop({ reflect: true })\n    rowSpan: TQ2GridAreaRowSpanOptions = 1;\n\n    /**\n     * Sets the starting row of the grid area at the baseline viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available row.\n     */\n    @Prop({ reflect: true })\n    rowStart: TQ2GridAreaRowStartOptions = 'auto';\n\n    /**\n     * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    smAlign: TQ2GridAreaAlignOptions;\n\n    /** Sets the column span amount of the grid area at the SM viewport size.*/\n    @Prop({ reflect: true })\n    smColumnSpan: TQ2GridAreaColumnSpanOptions;\n\n    /**\n     * Sets the starting column of the grid area at the SM viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available column.\n     */\n    @Prop({ reflect: true })\n    smColumnStart: TQ2GridAreaColumnStartOptions;\n\n    /**\n     * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    smJustify: TQ2GridAreaJustifyOptions;\n\n    /** Sets the row span amount of the grid area at the SM viewport size.*/\n    @Prop({ reflect: true })\n    smRowSpan: TQ2GridAreaRowSpanOptions;\n\n    /**\n     * Sets the starting row of the grid area at the SM viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available row.\n     */\n    @Prop({ reflect: true })\n    smRowStart: TQ2GridAreaRowStartOptions;\n\n    /** Sets the z-index of the grid area at the SM viewport size.*/\n    @Prop({ reflect: true })\n    smZIndex: TQ2GridAreaZIndexOptions;\n\n    /**\n     * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    xlAlign: TQ2GridAreaAlignOptions;\n\n    /** Sets the column span amount of the grid area at the XL viewport size.*/\n    @Prop({ reflect: true })\n    xlColumnSpan: TQ2GridAreaColumnSpanOptions;\n\n    /**\n     * Sets the starting column of the grid area at the XL viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available column.\n     */\n    @Prop({ reflect: true })\n    xlColumnStart: TQ2GridAreaColumnStartOptions;\n\n    /**\n     * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    xlJustify: TQ2GridAreaJustifyOptions;\n\n    /** Sets the row span amount of the grid area at the XL viewport size.*/\n    @Prop({ reflect: true })\n    xlRowSpan: TQ2GridAreaRowSpanOptions;\n\n    /**\n     * Sets the starting row of the grid area at the XL viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available row.\n     */\n    @Prop({ reflect: true })\n    xlRowStart: TQ2GridAreaRowStartOptions;\n\n    /** Sets the z-index of the grid area at the XL viewport size.*/\n    @Prop({ reflect: true })\n    xlZIndex: TQ2GridAreaZIndexOptions;\n\n    /**\n     * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    xsAlign: TQ2GridAreaAlignOptions;\n\n    /** Sets the column span amount of the grid area at the XS viewport size.*/\n    @Prop({ reflect: true })\n    xsColumnSpan: TQ2GridAreaColumnSpanOptions;\n\n    /**\n     * Sets the starting column of the grid area at the XS viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available column.\n     */\n    @Prop({ reflect: true })\n    xsColumnStart: TQ2GridAreaColumnStartOptions;\n\n    /**\n     * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    xsJustify: TQ2GridAreaJustifyOptions;\n\n    /** Sets the row span amount of the grid area at the XS viewport size.*/\n    @Prop({ reflect: true })\n    xsRowSpan: TQ2GridAreaRowSpanOptions;\n\n    /**\n     * Sets the starting row of the grid area at the XS viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available row.\n     */\n    @Prop({ reflect: true })\n    xsRowStart: TQ2GridAreaRowStartOptions;\n\n    /** Sets the z-index of the grid area at the XS viewport size.*/\n    @Prop({ reflect: true })\n    xsZIndex: TQ2GridAreaZIndexOptions;\n\n    /** Sets the z-index of the grid area at the baseline viewport size.*/\n    @Prop({ reflect: true })\n    zIndex: TQ2GridAreaZIndexOptions = 'auto';\n\n    // #endregion\n    // #region Local Methods\n\n    get computedLgZIndex() {\n        return this.lgZIndex || this.lgZIndex === 0 ? this.lgZIndex : this.computedMdZIndex;\n    }\n\n    get computedMdZIndex() {\n        return this.mdZIndex || this.mdZIndex === 0 ? this.mdZIndex : this.computedSmZIndex;\n    }\n\n    get computedSmZIndex() {\n        return this.smZIndex || this.smZIndex === 0 ? this.smZIndex : this.computedXsZIndex;\n    }\n\n    get computedXlZIndex() {\n        return this.xlZIndex || this.xlZIndex === 0 ? this.xlZIndex : this.computedLgZIndex;\n    }\n\n    get computedXsZIndex() {\n        return this.xsZIndex || this.xsZIndex === 0 ? this.xsZIndex : this.zIndex;\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const q2GridAreaStyles: { [key: string]: string } = {\n            // base:\n            '--grid-column-start': `${this.columnStart}`,\n            '--grid-column-end': `span ${this.columnSpan}`,\n            '--grid-row-start': `${this.rowStart}`,\n            '--grid-row-end': `span ${this.rowSpan}`,\n            '--justify-self': this.justify,\n            '--align-self': this.align,\n            '--z-index': `${this.zIndex}`,\n            // xs:\n            '--xs-grid-column-start': `${this.xsColumnStart || this.columnStart}`,\n            '--xs-grid-column-end': `span ${this.xsColumnSpan || this.columnSpan}`,\n            '--xs-grid-row-start': `${this.xsRowStart || this.rowStart}`,\n            '--xs-grid-row-end': `span ${this.xsRowSpan || this.rowSpan}`,\n            '--xs-justify-self': this.xsJustify || this.justify,\n            '--xs-align-self': this.xsAlign || this.align,\n            '--xs-z-index': `${this.computedXsZIndex}`,\n            // sm:\n            '--sm-grid-column-start': `${this.smColumnStart || this.xsColumnStart || this.columnStart}`,\n            '--sm-grid-column-end': `span ${this.smColumnSpan || this.xsColumnSpan || this.columnSpan}`,\n            '--sm-grid-row-start': `${this.smRowStart || this.xsRowStart || this.rowStart}`,\n            '--sm-grid-row-end': `span ${this.smRowSpan || this.xsRowSpan || this.rowSpan}`,\n            '--sm-justify-self': this.smJustify || this.xsJustify || this.justify,\n            '--sm-align-self': this.smAlign || this.xsAlign || this.align,\n            '--sm-z-index': `${this.computedSmZIndex}`,\n            // md:\n            '--md-grid-column-start': `${this.mdColumnStart || this.smColumnStart || this.xsColumnStart || this.columnStart}`,\n            '--md-grid-column-end': `span ${this.mdColumnSpan || this.smColumnSpan || this.xsColumnSpan || this.columnSpan}`,\n            '--md-grid-row-start': `${this.mdRowStart || this.smRowStart || this.xsRowStart || this.rowStart}`,\n            '--md-grid-row-end': `span ${this.mdRowSpan || this.smRowSpan || this.xsRowSpan || this.rowSpan}`,\n            '--md-justify-self': this.mdJustify || this.smJustify || this.xsJustify || this.justify,\n            '--md-align-self': this.mdAlign || this.smAlign || this.xsAlign || this.align,\n            '--md-z-index': `${this.computedMdZIndex}`,\n            // lg:\n            '--lg-grid-column-start': `${this.lgColumnStart || this.mdColumnStart || this.smColumnStart || this.xsColumnStart || this.columnStart}`,\n            '--lg-grid-column-end': `span ${this.lgColumnSpan || this.mdColumnSpan || this.smColumnSpan || this.xsColumnSpan || this.columnSpan}`,\n            '--lg-grid-row-start': `${this.lgRowStart || this.mdRowStart || this.smRowStart || this.xsRowStart || this.rowStart}`,\n            '--lg-grid-row-end': `span ${this.lgRowSpan || this.mdRowSpan || this.smRowSpan || this.xsRowSpan || this.rowSpan}`,\n            '--lg-justify-self': this.lgJustify || this.mdJustify || this.smJustify || this.xsJustify || this.justify,\n            '--lg-align-self': this.lgAlign || this.mdAlign || this.smAlign || this.xsAlign || this.align,\n            '--lg-z-index': `${this.computedLgZIndex}`,\n            // xl:\n            '--xl-grid-column-start': `${this.xlColumnStart || this.lgColumnStart || this.mdColumnStart || this.smColumnStart || this.xsColumnStart || this.columnStart}`,\n            '--xl-grid-column-end': `span ${this.xlColumnSpan || this.lgColumnSpan || this.mdColumnSpan || this.smColumnSpan || this.xsColumnSpan || this.columnSpan}`,\n            '--xl-grid-row-start': `${this.xlRowStart || this.lgRowStart || this.mdRowStart || this.smRowStart || this.xsRowStart || this.rowStart}`,\n            '--xl-grid-row-end': `span ${this.xlRowSpan || this.lgRowSpan || this.mdRowSpan || this.smRowSpan || this.xsRowSpan || this.rowSpan}`,\n            '--xl-justify-self':\n                this.xlJustify || this.lgJustify || this.mdJustify || this.smJustify || this.xsJustify || this.justify,\n            '--xl-align-self':\n                this.xlAlign || this.lgAlign || this.mdAlign || this.smAlign || this.xsAlign || this.align,\n            '--xl-z-index': `${this.computedXlZIndex}`,\n        };\n\n        return (\n            <Host style={q2GridAreaStyles}>\n                <slot />\n            </Host>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["q2GridAreaCss","Q2GridArea","constructor","hostRef","this","align","columnSpan","columnStart","justify","rowSpan","rowStart","zIndex","componentWillLoad","hasValidParent","hostElement","computedLgZIndex","lgZIndex","computedMdZIndex","mdZIndex","computedSmZIndex","smZIndex","computedXsZIndex","computedXlZIndex","xlZIndex","xsZIndex","render","q2GridAreaStyles","xsColumnStart","xsColumnSpan","xsRowStart","xsRowSpan","xsJustify","xsAlign","smColumnStart","smColumnSpan","smRowStart","smRowSpan","smJustify","smAlign","mdColumnStart","mdColumnSpan","mdRowStart","mdRowSpan","mdJustify","mdAlign","lgColumnStart","lgColumnSpan","lgRowStart","lgRowSpan","lgJustify","lgAlign","xlColumnStart","xlColumnSpan","xlRowStart","xlRowSpan","xlJustify","xlAlign","h","Host","key","style"],"sources":["src/components/q2-grid-area/q2-grid-area.scss?tag=q2-grid-area&encapsulation=shadow","src/components/q2-grid-area/q2-grid-area.tsx"],"sourcesContent":["@import '../../styles/functions.scss';\n@import '../../styles/variables.scss';\n\n:host {\n    // base:\n    --grid-column-start: '';\n    --grid-column-end: '';\n    --grid-row-start: '';\n    --grid-row-end: '';\n    --justify-self: '';\n    --align-self: '';\n    --z-index: '';\n    // xs:\n    --xs-grid-column-start: '';\n    --xs-grid-column-end: '';\n    --xs-grid-row-start: '';\n    --xs-grid-row-end: '';\n    --xs-justify-self: '';\n    --xs-align-self: '';\n    --xs-z-index: '';\n    // sm:\n    --sm-grid-column-start: '';\n    --sm-grid-column-end: '';\n    --sm-grid-row-start: '';\n    --sm-grid-row-end: '';\n    --sm-justify-self: '';\n    --sm-align-self: '';\n    --sm-z-index: '';\n    // md:\n    --md-grid-column-start: '';\n    --md-grid-column-end: '';\n    --md-grid-row-start: '';\n    --md-grid-row-end: '';\n    --md-justify-self: '';\n    --md-align-self: '';\n    --md-z-index: '';\n    // lg:\n    --lg-grid-column-start: '';\n    --lg-grid-column-end: '';\n    --lg-grid-row-start: '';\n    --lg-grid-row-end: '';\n    --lg-justify-self: '';\n    --lg-align-self: '';\n    --lg-z-index: '';\n    // xl:\n    --xl-grid-column-start: '';\n    --xl-grid-column-end: '';\n    --xl-grid-row-start: '';\n    --xl-grid-row-end: '';\n    --xl-justify-self: '';\n    --xl-align-self: '';\n    --xl-z-index: '';\n}\n// base:\n@include generate-q2-grid-area-styles(\n    var(--grid-column-start),\n    var(--grid-column-end),\n    var(--grid-row-start),\n    var(--grid-row-end),\n    var(--justify-self),\n    var(--align-self),\n    var(--z-index)\n);\n// xs, sm, md, lg, xl:\n@each $breakpoint in $breakpoint-list {\n    @include breakpoint($breakpoint) {\n        @include generate-q2-grid-area-styles(\n            var(--#{$breakpoint}-grid-column-start),\n            var(--#{$breakpoint}-grid-column-end),\n            var(--#{$breakpoint}-grid-row-start),\n            var(--#{$breakpoint}-grid-row-end),\n            var(--#{$breakpoint}-justify-self),\n            var(--#{$breakpoint}-align-self),\n            var(--#{$breakpoint}-z-index)\n        );\n    }\n}\n","import { Component, h, Prop, Host, Element } from '@stencil/core';\nimport { hasValidParent } from '@/utils/component';\n\nexport type TQ2GridAreaColumnStartOptions = 'auto' | number;\nexport type TQ2GridAreaColumnSpanOptions = number;\nexport type TQ2GridAreaRowStartOptions = 'auto' | number;\nexport type TQ2GridAreaRowSpanOptions = number;\nexport type TQ2GridAreaJustifyOptions = 'auto' | 'stretch' | 'start' | 'center' | 'end';\nexport type TQ2GridAreaAlignOptions = 'auto' | 'stretch' | 'start' | 'center' | 'end';\nexport type TQ2GridAreaZIndexOptions = 'auto' | number;\n\n/**\n * @name Grid Area\n * @category Display\n * @summary Use as a positioned cell within a Grid layout.\n */\n@Component({ tag: 'q2-grid-area', shadow: true, styleUrl: 'q2-grid-area.scss' })\nexport class Q2GridArea {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    align: TQ2GridAreaAlignOptions = 'auto';\n\n    /** Sets the column span amount of the grid area at the baseline viewport size.*/\n    @Prop({ reflect: true })\n    columnSpan: TQ2GridAreaColumnSpanOptions = 1;\n\n    /** Sets the starting column of the grid area at the baseline viewport size.*/\n    @Prop({ reflect: true })\n    columnStart: TQ2GridAreaColumnStartOptions = 'auto';\n\n    /**\n     * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    justify: TQ2GridAreaJustifyOptions = 'auto';\n\n    /**\n     * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    lgAlign: TQ2GridAreaAlignOptions;\n\n    /** Sets the column span amount of the grid area at the LG viewport size.*/\n    @Prop({ reflect: true })\n    lgColumnSpan: TQ2GridAreaColumnSpanOptions;\n\n    /**\n     * Sets the starting column of the grid area at the LG viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available column.\n     */\n    @Prop({ reflect: true })\n    lgColumnStart: TQ2GridAreaColumnStartOptions;\n\n    /**\n     * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    lgJustify: TQ2GridAreaJustifyOptions;\n\n    /** Sets the row span amount of the grid area at the LG viewport size.*/\n    @Prop({ reflect: true })\n    lgRowSpan: TQ2GridAreaRowSpanOptions;\n\n    /**\n     * Sets the starting row of the grid area at the LG viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available row.\n     */\n    @Prop({ reflect: true })\n    lgRowStart: TQ2GridAreaRowStartOptions;\n\n    /** Sets the z-index of the grid area at the LG viewport size.*/\n    @Prop({ reflect: true })\n    lgZIndex: TQ2GridAreaZIndexOptions;\n\n    /**\n     * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    mdAlign: TQ2GridAreaAlignOptions;\n\n    /** Sets the column span amount of the grid area at the MD viewport size.*/\n    @Prop({ reflect: true })\n    mdColumnSpan: TQ2GridAreaColumnSpanOptions;\n\n    /**\n     * Sets the starting column of the grid area at the MD viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available column.\n     */\n    @Prop({ reflect: true })\n    mdColumnStart: TQ2GridAreaColumnStartOptions;\n\n    /**\n     * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    mdJustify: TQ2GridAreaJustifyOptions;\n\n    /** Sets the row span amount of the grid area at the MD viewport size.*/\n    @Prop({ reflect: true })\n    mdRowSpan: TQ2GridAreaRowSpanOptions;\n\n    /**\n     * Sets the starting row of the grid area at the MD viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available row.\n     */\n    @Prop({ reflect: true })\n    mdRowStart: TQ2GridAreaRowStartOptions;\n\n    /** Sets the z-index of the grid area at the MD viewport size.*/\n    @Prop({ reflect: true })\n    mdZIndex: TQ2GridAreaZIndexOptions;\n\n    /** Sets the row span amount of the grid area at the baseline viewport size.*/\n    @Prop({ reflect: true })\n    rowSpan: TQ2GridAreaRowSpanOptions = 1;\n\n    /**\n     * Sets the starting row of the grid area at the baseline viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available row.\n     */\n    @Prop({ reflect: true })\n    rowStart: TQ2GridAreaRowStartOptions = 'auto';\n\n    /**\n     * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    smAlign: TQ2GridAreaAlignOptions;\n\n    /** Sets the column span amount of the grid area at the SM viewport size.*/\n    @Prop({ reflect: true })\n    smColumnSpan: TQ2GridAreaColumnSpanOptions;\n\n    /**\n     * Sets the starting column of the grid area at the SM viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available column.\n     */\n    @Prop({ reflect: true })\n    smColumnStart: TQ2GridAreaColumnStartOptions;\n\n    /**\n     * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    smJustify: TQ2GridAreaJustifyOptions;\n\n    /** Sets the row span amount of the grid area at the SM viewport size.*/\n    @Prop({ reflect: true })\n    smRowSpan: TQ2GridAreaRowSpanOptions;\n\n    /**\n     * Sets the starting row of the grid area at the SM viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available row.\n     */\n    @Prop({ reflect: true })\n    smRowStart: TQ2GridAreaRowStartOptions;\n\n    /** Sets the z-index of the grid area at the SM viewport size.*/\n    @Prop({ reflect: true })\n    smZIndex: TQ2GridAreaZIndexOptions;\n\n    /**\n     * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    xlAlign: TQ2GridAreaAlignOptions;\n\n    /** Sets the column span amount of the grid area at the XL viewport size.*/\n    @Prop({ reflect: true })\n    xlColumnSpan: TQ2GridAreaColumnSpanOptions;\n\n    /**\n     * Sets the starting column of the grid area at the XL viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available column.\n     */\n    @Prop({ reflect: true })\n    xlColumnStart: TQ2GridAreaColumnStartOptions;\n\n    /**\n     * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    xlJustify: TQ2GridAreaJustifyOptions;\n\n    /** Sets the row span amount of the grid area at the XL viewport size.*/\n    @Prop({ reflect: true })\n    xlRowSpan: TQ2GridAreaRowSpanOptions;\n\n    /**\n     * Sets the starting row of the grid area at the XL viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available row.\n     */\n    @Prop({ reflect: true })\n    xlRowStart: TQ2GridAreaRowStartOptions;\n\n    /** Sets the z-index of the grid area at the XL viewport size.*/\n    @Prop({ reflect: true })\n    xlZIndex: TQ2GridAreaZIndexOptions;\n\n    /**\n     * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    xsAlign: TQ2GridAreaAlignOptions;\n\n    /** Sets the column span amount of the grid area at the XS viewport size.*/\n    @Prop({ reflect: true })\n    xsColumnSpan: TQ2GridAreaColumnSpanOptions;\n\n    /**\n     * Sets the starting column of the grid area at the XS viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available column.\n     */\n    @Prop({ reflect: true })\n    xsColumnStart: TQ2GridAreaColumnStartOptions;\n\n    /**\n     * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.\n     * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.\n     */\n    @Prop({ reflect: true })\n    xsJustify: TQ2GridAreaJustifyOptions;\n\n    /** Sets the row span amount of the grid area at the XS viewport size.*/\n    @Prop({ reflect: true })\n    xsRowSpan: TQ2GridAreaRowSpanOptions;\n\n    /**\n     * Sets the starting row of the grid area at the XS viewport size.\n     * When set to `auto`, the grid area will automatically start at the first available row.\n     */\n    @Prop({ reflect: true })\n    xsRowStart: TQ2GridAreaRowStartOptions;\n\n    /** Sets the z-index of the grid area at the XS viewport size.*/\n    @Prop({ reflect: true })\n    xsZIndex: TQ2GridAreaZIndexOptions;\n\n    /** Sets the z-index of the grid area at the baseline viewport size.*/\n    @Prop({ reflect: true })\n    zIndex: TQ2GridAreaZIndexOptions = 'auto';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        hasValidParent(this.hostElement, 'q2-grid');\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get computedLgZIndex() {\n        return this.lgZIndex || this.lgZIndex === 0 ? this.lgZIndex : this.computedMdZIndex;\n    }\n\n    get computedMdZIndex() {\n        return this.mdZIndex || this.mdZIndex === 0 ? this.mdZIndex : this.computedSmZIndex;\n    }\n\n    get computedSmZIndex() {\n        return this.smZIndex || this.smZIndex === 0 ? this.smZIndex : this.computedXsZIndex;\n    }\n\n    get computedXlZIndex() {\n        return this.xlZIndex || this.xlZIndex === 0 ? this.xlZIndex : this.computedLgZIndex;\n    }\n\n    get computedXsZIndex() {\n        return this.xsZIndex || this.xsZIndex === 0 ? this.xsZIndex : this.zIndex;\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const q2GridAreaStyles: { [key: string]: string } = {\n            // base:\n            '--grid-column-start': `${this.columnStart}`,\n            '--grid-column-end': `span ${this.columnSpan}`,\n            '--grid-row-start': `${this.rowStart}`,\n            '--grid-row-end': `span ${this.rowSpan}`,\n            '--justify-self': this.justify,\n            '--align-self': this.align,\n            '--z-index': `${this.zIndex}`,\n            // xs:\n            '--xs-grid-column-start': `${this.xsColumnStart || this.columnStart}`,\n            '--xs-grid-column-end': `span ${this.xsColumnSpan || this.columnSpan}`,\n            '--xs-grid-row-start': `${this.xsRowStart || this.rowStart}`,\n            '--xs-grid-row-end': `span ${this.xsRowSpan || this.rowSpan}`,\n            '--xs-justify-self': this.xsJustify || this.justify,\n            '--xs-align-self': this.xsAlign || this.align,\n            '--xs-z-index': `${this.computedXsZIndex}`,\n            // sm:\n            '--sm-grid-column-start': `${this.smColumnStart || this.xsColumnStart || this.columnStart}`,\n            '--sm-grid-column-end': `span ${this.smColumnSpan || this.xsColumnSpan || this.columnSpan}`,\n            '--sm-grid-row-start': `${this.smRowStart || this.xsRowStart || this.rowStart}`,\n            '--sm-grid-row-end': `span ${this.smRowSpan || this.xsRowSpan || this.rowSpan}`,\n            '--sm-justify-self': this.smJustify || this.xsJustify || this.justify,\n            '--sm-align-self': this.smAlign || this.xsAlign || this.align,\n            '--sm-z-index': `${this.computedSmZIndex}`,\n            // md:\n            '--md-grid-column-start': `${this.mdColumnStart || this.smColumnStart || this.xsColumnStart || this.columnStart}`,\n            '--md-grid-column-end': `span ${this.mdColumnSpan || this.smColumnSpan || this.xsColumnSpan || this.columnSpan}`,\n            '--md-grid-row-start': `${this.mdRowStart || this.smRowStart || this.xsRowStart || this.rowStart}`,\n            '--md-grid-row-end': `span ${this.mdRowSpan || this.smRowSpan || this.xsRowSpan || this.rowSpan}`,\n            '--md-justify-self': this.mdJustify || this.smJustify || this.xsJustify || this.justify,\n            '--md-align-self': this.mdAlign || this.smAlign || this.xsAlign || this.align,\n            '--md-z-index': `${this.computedMdZIndex}`,\n            // lg:\n            '--lg-grid-column-start': `${this.lgColumnStart || this.mdColumnStart || this.smColumnStart || this.xsColumnStart || this.columnStart}`,\n            '--lg-grid-column-end': `span ${this.lgColumnSpan || this.mdColumnSpan || this.smColumnSpan || this.xsColumnSpan || this.columnSpan}`,\n            '--lg-grid-row-start': `${this.lgRowStart || this.mdRowStart || this.smRowStart || this.xsRowStart || this.rowStart}`,\n            '--lg-grid-row-end': `span ${this.lgRowSpan || this.mdRowSpan || this.smRowSpan || this.xsRowSpan || this.rowSpan}`,\n            '--lg-justify-self': this.lgJustify || this.mdJustify || this.smJustify || this.xsJustify || this.justify,\n            '--lg-align-self': this.lgAlign || this.mdAlign || this.smAlign || this.xsAlign || this.align,\n            '--lg-z-index': `${this.computedLgZIndex}`,\n            // xl:\n            '--xl-grid-column-start': `${this.xlColumnStart || this.lgColumnStart || this.mdColumnStart || this.smColumnStart || this.xsColumnStart || this.columnStart}`,\n            '--xl-grid-column-end': `span ${this.xlColumnSpan || this.lgColumnSpan || this.mdColumnSpan || this.smColumnSpan || this.xsColumnSpan || this.columnSpan}`,\n            '--xl-grid-row-start': `${this.xlRowStart || this.lgRowStart || this.mdRowStart || this.smRowStart || this.xsRowStart || this.rowStart}`,\n            '--xl-grid-row-end': `span ${this.xlRowSpan || this.lgRowSpan || this.mdRowSpan || this.smRowSpan || this.xsRowSpan || this.rowSpan}`,\n            '--xl-justify-self':\n                this.xlJustify || this.lgJustify || this.mdJustify || this.smJustify || this.xsJustify || this.justify,\n            '--xl-align-self':\n                this.xlAlign || this.lgAlign || this.mdAlign || this.smAlign || this.xsAlign || this.align,\n            '--xl-z-index': `${this.computedXlZIndex}`,\n        };\n\n        return (\n            <Host style={q2GridAreaStyles}>\n                <slot />\n            </Host>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/q2-tecton-elements/q2-icon.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-icon.entry.esm.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        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":[],"mappings":"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"}
+{"version":3,"file":"q2-icon.entry.esm.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        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":[],"mappings":"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"}