q2-tecton-elements 1.55.4 → 1.56.0

package/dist/collection/components/q2-grid/q2-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"q2-grid.js","sourceRoot":"","sources":["../../../../src/components/q2-grid/q2-grid.tsx"],"names":[],"mappings":"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C;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGJ","sourcesContent":["import { Component, h, Fragment, Prop } from '@stencil/core';\n\nexport type TQ2GridColumnsOptions = number;\nexport type TQ2GridRowsOptions = 'auto' | number;\nexport type TQ2GridGapOptions = 'none' | 'compact' | 'normal' | 'comfortable';\nexport type TQ2GridJustifyOptions = 'stretch' | 'start' | 'center' | 'end';\nexport type TQ2GridAlignOptions = 'stretch' | 'start' | 'center' | 'end';\n\n@Component({ tag: 'q2-grid', shadow: true, styleUrl: 'q2-grid.scss' })\nexport class Q2Grid {\n    // #region Public Property API\n\n    /**\n     * Sets the vertical alignment behavior of q2-grid-area components within a grid track at\n     * the baseline viewport size.\n     */\n    @Prop({ reflect: true })\n    align: TQ2GridAlignOptions = 'stretch';\n\n    /** Sets the amount of columns to render within the grid at the baseline viewport size.*/\n    @Prop({ reflect: true })\n    columns: TQ2GridColumnsOptions = 12;\n\n    /**\n     * Sets the gap size between rows and columns within the grid at the baseline viewport size.\n     * Gap values utilize CSS variables to allow for easy theming and customization.\n     * Visit the Style section to learn more.\n     */\n    @Prop({ reflect: true })\n    gap: TQ2GridGapOptions = 'normal';\n\n    /**\n     * Sets the horizontal alignment behavior of q2-grid-area components within a grid track\n     * at the baseline viewport size.\n     */\n    @Prop({ reflect: true })\n    justify: TQ2GridJustifyOptions = 'stretch';\n\n    /**\n     * Sets the vertical alignment behavior of q2-grid-area components within a grid track at the\n     * 'LG' viewport size.\n     */\n    @Prop({ reflect: true })\n    lgAlign: TQ2GridAlignOptions;\n\n    /** Sets the amount of columns to render within the grid at the 'LG' viewport size.*/\n    @Prop({ reflect: true })\n    lgColumns: TQ2GridColumnsOptions;\n\n    /**\n     * Sets the gap size between rows and columns within the grid at the 'LG' viewport size.\n     * Gap values utilize CSS variables to allow for easy theming and customization.\n     * Visit the Style section to learn more.\n     */\n    @Prop({ reflect: true })\n    lgGap: TQ2GridGapOptions;\n\n    /**\n     * Sets the horizontal alignment behavior of q2-grid-area components within a grid track at\n     * the 'LG' viewport size.\n     */\n    @Prop({ reflect: true })\n    lgJustify: TQ2GridJustifyOptions;\n\n    /**\n     * Sets the amount of rows to render within the grid at the 'LG' viewport size.\n     * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n     * components placed within the grid and the number of columns allowed per row.\n     */\n    @Prop({ reflect: true })\n    lgRows: TQ2GridRowsOptions;\n\n    /**\n     * Sets the vertical alignment behavior of q2-grid-area components within a grid track at\n     * the 'MD' viewport size.\n     */\n    @Prop({ reflect: true })\n    mdAlign: TQ2GridAlignOptions;\n\n    /** Sets the amount of columns to render within the grid at the 'MD' viewport size.*/\n    @Prop({ reflect: true })\n    mdColumns: TQ2GridColumnsOptions;\n\n    /**\n     * Sets the gap size between rows and columns within the grid at the 'MD' viewport size.\n     * Gap values utilize CSS variables to allow for easy theming and customization.\n     * Visit the Style section to learn more.\n     */\n    @Prop({ reflect: true })\n    mdGap: TQ2GridGapOptions;\n\n    /**\n     * Sets the horizontal alignment behavior of q2-grid-area components within a grid track at\n     * the 'MD' viewport size.\n     */\n    @Prop({ reflect: true })\n    mdJustify: TQ2GridJustifyOptions;\n\n    /**\n     * Sets the amount of rows to render within the grid at the 'MD' viewport size.\n     * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n     * components placed within the grid and the number of columns allowed per row.\n     */\n    @Prop({ reflect: true })\n    mdRows: TQ2GridRowsOptions;\n\n    /**\n     * Sets the amount of rows to render within the grid at the baseline viewport size.\n     * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n     * components placed within the grid and the number of columns allowed per row.\n     */\n    @Prop({ reflect: true })\n    rows: TQ2GridRowsOptions = 'auto';\n\n    /**\n     * Sets the vertical alignment behavior of q2-grid-area components within a grid track at\n     * the 'SM' viewport size.\n     */\n    @Prop({ reflect: true })\n    smAlign: TQ2GridAlignOptions;\n\n    /** Sets the amount of columns to render within the grid at the 'SM' viewport size.*/\n    @Prop({ reflect: true })\n    smColumns: TQ2GridColumnsOptions;\n\n    /**\n     * Sets the gap size between rows and columns within the grid at the 'SM' viewport size.\n     * Gap values utilize CSS variables to allow for easy theming and customization.\n     * Visit the Style section to learn more.\n     */\n    @Prop({ reflect: true })\n    smGap: TQ2GridGapOptions;\n\n    /**\n     * Sets the horizontal alignment behavior of q2-grid-area components within a grid track at\n     * the 'SM' viewport size.\n     */\n    @Prop({ reflect: true })\n    smJustify: TQ2GridJustifyOptions;\n\n    /**\n     * Sets the amount of rows to render within the grid at the 'SM' viewport size.\n     * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n     * components placed within the grid and the number of columns allowed per row.\n     */\n    @Prop({ reflect: true })\n    smRows: TQ2GridRowsOptions;\n\n    /**\n     * Sets the vertical alignment behavior of q2-grid-area components within a grid track at the\n     * 'XL' viewport size.\n     */\n    @Prop({ reflect: true })\n    xlAlign: TQ2GridAlignOptions;\n\n    /** Sets the amount of columns to render within the grid at the 'XL' viewport size.*/\n    @Prop({ reflect: true })\n    xlColumns: TQ2GridColumnsOptions;\n\n    /**\n     * Sets the gap size between rows and columns within the grid at the 'XL' viewport size.\n     * Gap values utilize CSS variables to allow for easy theming and customization.\n     * Visit the Style section to learn more.\n     */\n    @Prop({ reflect: true })\n    xlGap: TQ2GridGapOptions;\n\n    /**\n     * Sets the horizontal alignment behavior of q2-grid-area components within a grid track at\n     * the 'XL' viewport size.\n     */\n    @Prop({ reflect: true })\n    xlJustify: TQ2GridJustifyOptions;\n\n    /**\n     * Sets the amount of rows to render within the grid at the 'XL' viewport size.\n     * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n     * components placed within the grid and the number of columns allowed per row.\n     */\n    @Prop({ reflect: true })\n    xlRows: TQ2GridRowsOptions;\n\n    /**\n     * Sets the vertical alignment behavior of q2-grid-area components within a grid track at\n     * the 'XS' viewport size.\n     */\n    @Prop({ reflect: true })\n    xsAlign: TQ2GridAlignOptions;\n\n    /** Sets the amount of columns to render within the grid at the 'XS' viewport size.*/\n    @Prop({ reflect: true })\n    xsColumns: TQ2GridColumnsOptions;\n\n    /**\n     * Sets the gap size between rows and columns within the grid at the 'XS' viewport size.\n     * Gap values utilize CSS variables to allow for easy theming and customization.\n     * Visit the Style section to learn more.\n     */\n    @Prop({ reflect: true })\n    xsGap: TQ2GridGapOptions;\n\n    /**\n     * Sets the horizontal alignment behavior of q2-grid-area components within a grid track\n     * at the 'XS' viewport size.\n     */\n    @Prop({ reflect: true })\n    xsJustify: TQ2GridJustifyOptions;\n\n    /**\n     * Sets the amount of rows to render within the grid at the 'XS' viewport size.\n     * When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\n     * components placed within the grid and the number of columns allowed per row.\n     */\n    @Prop({ reflect: true })\n    xsRows: TQ2GridRowsOptions;\n\n    // #endregion\n    // #region Local Methods\n\n    get computedLgRows() {\n        return this.lgRows || this.computedMdRows;\n    }\n\n    get computedMdRows() {\n        return this.mdRows || this.computedSmRows;\n    }\n\n    get computedSmRows() {\n        return this.smRows || this.computedXsRows;\n    }\n\n    get computedXlRows() {\n        return this.xlRows || this.computedLgRows;\n    }\n\n    get computedXsRows() {\n        return this.xsRows || this.rows;\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const q2GridStyles: { [key: string]: string } = {\n            // base:\n            '--grid-template-columns': `repeat(${this.columns}, 1fr)`,\n            '--grid-template-rows': this.rows === 'auto' ? this.rows : `repeat(${this.rows}, 1fr)`,\n            '--grid-gap': `var(--comp-grid-gap-${this.gap})`,\n            '--justify-items': this.justify,\n            '--align-items': this.align,\n            // xs:\n            '--xs-grid-template-columns': `repeat(${this.xsColumns || this.columns}, 1fr)`,\n            '--xs-grid-template-rows':\n                this.computedXsRows === 'auto' ? this.computedXsRows : `repeat(${this.computedXsRows}, 1fr)`,\n            '--xs-grid-gap': `var(--comp-grid-gap-${this.xsGap || this.gap})`,\n            '--xs-justify-items': this.xsJustify || this.justify,\n            '--xs-align-items': this.xsAlign || this.align,\n            // sm:\n            '--sm-grid-template-columns': `repeat(${this.smColumns || this.xsColumns || this.columns}, 1fr)`,\n            '--sm-grid-template-rows':\n                this.computedSmRows === 'auto' ? this.computedSmRows : `repeat(${this.computedSmRows}, 1fr)`,\n            '--sm-grid-gap': `var(--comp-grid-gap-${this.smGap || this.xsGap || this.gap})`,\n            '--sm-justify-items': this.smJustify || this.xsJustify || this.justify,\n            '--sm-align-items': this.smAlign || this.xsAlign || this.align,\n            // md:\n            '--md-grid-template-columns': `repeat(${this.mdColumns || this.smColumns || this.xsColumns || this.columns}, 1fr)`,\n            '--md-grid-template-rows':\n                this.computedMdRows === 'auto' ? this.computedMdRows : `repeat(${this.computedMdRows}, 1fr)`,\n            '--md-grid-gap': `var(--comp-grid-gap-${this.mdGap || this.smGap || this.xsGap || this.gap})`,\n            '--md-justify-items': this.mdJustify || this.smJustify || this.xsJustify || this.justify,\n            '--md-align-items': this.mdAlign || this.smAlign || this.xsAlign || this.align,\n            // lg:\n            '--lg-grid-template-columns': `repeat(${this.lgColumns || this.mdColumns || this.smColumns || this.xsColumns || this.columns}, 1fr)`,\n            '--lg-grid-template-rows':\n                this.computedLgRows === 'auto' ? this.computedLgRows : `repeat(${this.computedLgRows}, 1fr)`,\n            '--lg-grid-gap': `var(--comp-grid-gap-${this.lgGap || this.mdGap || this.smGap || this.xsGap || this.gap})`,\n            '--lg-justify-items': this.lgJustify || this.mdJustify || this.smJustify || this.xsJustify || this.justify,\n            '--lg-align-items': this.lgAlign || this.mdAlign || this.smAlign || this.xsAlign || this.align,\n            // xl:\n            '--xl-grid-template-columns': `repeat(${this.xlColumns || this.lgColumns || this.mdColumns || this.smColumns || this.xsColumns || this.columns}, 1fr)`,\n            '--xl-grid-template-rows':\n                this.computedXlRows === 'auto' ? this.computedXlRows : `repeat(${this.computedXlRows}, 1fr)`,\n            '--xl-grid-gap': `var(--comp-grid-gap-${this.xlGap || this.lgGap || this.mdGap || this.smGap || this.xsGap || this.gap})`,\n            '--xl-justify-items':\n                this.xlJustify || this.lgJustify || this.mdJustify || this.smJustify || this.xsJustify || this.justify,\n            '--xl-align-items':\n                this.xlAlign || this.lgAlign || this.mdAlign || this.smAlign || this.xsAlign || this.align,\n        };\n        return (\n            <Fragment>\n                <div\n                    style={q2GridStyles}\n                    class=\"q2-grid\"\n                >\n                    <slot />\n                </div>\n            </Fragment>\n        );\n    }\n\n    // #endregion\n}\n"]}

package/dist/collection/components/q2-grid/test/q2-grid.e2e.js

@@ -0,0 +1,218 @@
+import { setup, getListOfStyleCompilationIssues, evaluateA11y } from "../../../utils/helpers";
+describe('q2-grid', () => {
+    let $e2ePage;
+    let $q2GridParent;
+    let $shadowGrid;
+    let q2GridParentStyles;
+    let shadowGridStyles;
+    const viewportWidths = { base: 479, xs: 480, sm: 768, md: 992, lg: 1200, xl: 1400 };
+    const viewportHeight = 500;
+    const setupPage = async (viewportWidth) => {
+        $e2ePage = await setup();
+        await $e2ePage.setViewport({ width: viewportWidths[viewportWidth], height: viewportHeight });
+        await $e2ePage.setContent(`
+            <div id='parent' style='width: 100%; height: 100%'>
+                <q2-grid
+                    xs-columns='2' xs-rows='2' xs-gap='none' xs-justify='center' xs-align='center'
+                    sm-columns='3' sm-rows='3' sm-gap='compact' sm-justify='stretch' sm-align='stretch'
+                    md-columns='4' md-rows='4' md-gap='normal' md-justify='start' md-align='start'
+                    lg-columns='5' lg-rows='5' lg-gap='comfortable' lg-justify='end' lg-align='end'
+                    xl-columns='6' xl-rows='6' xl-gap='none' xl-justify='center' xl-align='center'
+                >
+                    <q2-grid-area>
+                        <div style='width: 10px; height: 10px'></div>
+                    </q2-grid-area>
+                    <q2-grid-area>
+                        <div style='width: 10px; height: 10px'></div>
+                    </q2-grid-area>
+                </q2-grid>
+            </div>
+        `);
+        await $e2ePage.waitForChanges();
+        $q2GridParent = await $e2ePage.find('#parent');
+        $shadowGrid = await $e2ePage.find('q2-grid >>> .q2-grid');
+        q2GridParentStyles = await $q2GridParent.getComputedStyle();
+        shadowGridStyles = await $shadowGrid.getComputedStyle();
+    };
+    describe('Compiler', () => {
+        it('properly compiles CSS vars and functions', async () => {
+            await setupPage('base');
+            expect(await getListOfStyleCompilationIssues($e2ePage, 'q2-grid')).toHaveLength(0);
+        });
+    });
+    describe('aXe DevTools', () => {
+        it('does not have accessibility violations', async () => {
+            await setupPage('base');
+            const hasViolations = await evaluateA11y($e2ePage);
+            expect(hasViolations).toBe(false);
+        });
+    });
+    describe('Breakpoint Independent Styles', () => {
+        beforeEach(async () => {
+            await setupPage('base');
+        });
+        it('should have the expected display value', async () => {
+            expect(shadowGridStyles['display']).toBe('grid');
+        });
+        it('should have the expected width value', async () => {
+            expect(shadowGridStyles['width']).toBe(q2GridParentStyles['width']);
+        });
+        it('should have the expected height value', async () => {
+            expect(shadowGridStyles['height']).toBe(q2GridParentStyles['height']);
+        });
+        it('should have the expected grid-auto-rows value', async () => {
+            expect(shadowGridStyles['grid-auto-rows']).toBe('auto');
+        });
+        it('should have the expected grid-auto-columns value', async () => {
+            expect(shadowGridStyles['grid-auto-columns']).toBe('1fr');
+        });
+        it('should have the expected grid-auto-flow value', async () => {
+            expect(shadowGridStyles['grid-auto-flow']).toBe('row');
+        });
+        it('should have the expected justify-content value', async () => {
+            expect(shadowGridStyles['justify-content']).toBe('center');
+        });
+        it('should have the expected align-content value', async () => {
+            expect(shadowGridStyles['align-content']).toBe('center');
+        });
+    });
+    describe('Base Computed Styles', () => {
+        beforeEach(async () => {
+            await setupPage('base');
+        });
+        it('should have the expected grid-template-columns value', async () => {
+            expect((shadowGridStyles['grid-template-columns'].match(/px/g) || []).length).toBe(12);
+        });
+        it('should have the expected grid-template-rows value', async () => {
+            expect(shadowGridStyles['grid-template-rows']).toBe('10px');
+        });
+        it('should have the expected column-gap value', async () => {
+            expect(shadowGridStyles['column-gap']).toBe('15px');
+        });
+        it('should have the expected row-gap value', async () => {
+            expect(shadowGridStyles['row-gap']).toBe('15px');
+        });
+        it('should have the expected justify-items value', async () => {
+            expect(shadowGridStyles['justify-items']).toBe('stretch');
+        });
+        it('should have the expected align-items value', async () => {
+            expect(shadowGridStyles['align-items']).toBe('stretch');
+        });
+    });
+    describe('XS Computed Styles', () => {
+        beforeEach(async () => {
+            await setupPage('xs');
+        });
+        it('should have the expected grid-template-columns value', async () => {
+            expect((shadowGridStyles['grid-template-columns'].match(/px/g) || []).length).toBe(2);
+        });
+        it('should have the expected grid-template-rows value', async () => {
+            expect(shadowGridStyles['grid-template-rows']).toBe('10px 10px');
+        });
+        it('should have the expected column-gap value', async () => {
+            expect(shadowGridStyles['column-gap']).toBe('0px');
+        });
+        it('should have the expected row-gap value', async () => {
+            expect(shadowGridStyles['row-gap']).toBe('0px');
+        });
+        it('should have the expected justify-items value', async () => {
+            expect(shadowGridStyles['justify-items']).toBe('center');
+        });
+        it('should have the expected align-items value', async () => {
+            expect(shadowGridStyles['align-items']).toBe('center');
+        });
+    });
+    describe('SM Computed Styles', () => {
+        beforeEach(async () => {
+            await setupPage('sm');
+        });
+        it('should have the expected grid-template-columns value', async () => {
+            expect((shadowGridStyles['grid-template-columns'].match(/px/g) || []).length).toBe(3);
+        });
+        it('should have the expected grid-template-rows value', async () => {
+            expect(shadowGridStyles['grid-template-rows']).toBe('10px 10px 10px');
+        });
+        it('should have the expected column-gap value', async () => {
+            expect(shadowGridStyles['column-gap']).toBe('5px');
+        });
+        it('should have the expected row-gap value', async () => {
+            expect(shadowGridStyles['row-gap']).toBe('5px');
+        });
+        it('should have the expected justify-items value', async () => {
+            expect(shadowGridStyles['justify-items']).toBe('stretch');
+        });
+        it('should have the expected align-items value', async () => {
+            expect(shadowGridStyles['align-items']).toBe('stretch');
+        });
+    });
+    describe('MD Computed Styles', () => {
+        beforeEach(async () => {
+            await setupPage('md');
+        });
+        it('should have the expected grid-template-columns value', async () => {
+            expect((shadowGridStyles['grid-template-columns'].match(/px/g) || []).length).toBe(4);
+        });
+        it('should have the expected grid-template-rows value', async () => {
+            expect(shadowGridStyles['grid-template-rows']).toBe('10px 10px 10px 10px');
+        });
+        it('should have the expected column-gap value', async () => {
+            expect(shadowGridStyles['column-gap']).toBe('15px');
+        });
+        it('should have the expected row-gap value', async () => {
+            expect(shadowGridStyles['row-gap']).toBe('15px');
+        });
+        it('should have the expected justify-items value', async () => {
+            expect(shadowGridStyles['justify-items']).toBe('start');
+        });
+        it('should have the expected align-items value', async () => {
+            expect(shadowGridStyles['align-items']).toBe('start');
+        });
+    });
+    describe('LG Computed Styles', () => {
+        beforeEach(async () => {
+            await setupPage('lg');
+        });
+        it('should have the expected grid-template-columns value', async () => {
+            expect((shadowGridStyles['grid-template-columns'].match(/px/g) || []).length).toBe(5);
+        });
+        it('should have the expected grid-template-rows value', async () => {
+            expect(shadowGridStyles['grid-template-rows']).toBe('10px 10px 10px 10px 10px');
+        });
+        it('should have the expected column-gap value', async () => {
+            expect(shadowGridStyles['column-gap']).toBe('25px');
+        });
+        it('should have the expected row-gap value', async () => {
+            expect(shadowGridStyles['row-gap']).toBe('25px');
+        });
+        it('should have the expected justify-items value', async () => {
+            expect(shadowGridStyles['justify-items']).toBe('end');
+        });
+        it('should have the expected align-items value', async () => {
+            expect(shadowGridStyles['align-items']).toBe('end');
+        });
+    });
+    describe('XL Computed Styles', () => {
+        beforeEach(async () => {
+            await setupPage('xl');
+        });
+        it('should have the expected grid-template-columns value', async () => {
+            expect((shadowGridStyles['grid-template-columns'].match(/px/g) || []).length).toBe(6);
+        });
+        it('should have the expected grid-template-rows value', async () => {
+            expect(shadowGridStyles['grid-template-rows']).toBe('10px 10px 10px 10px 10px 10px');
+        });
+        it('should have the expected column-gap value', async () => {
+            expect(shadowGridStyles['column-gap']).toBe('0px');
+        });
+        it('should have the expected row-gap value', async () => {
+            expect(shadowGridStyles['row-gap']).toBe('0px');
+        });
+        it('should have the expected justify-items value', async () => {
+            expect(shadowGridStyles['justify-items']).toBe('center');
+        });
+        it('should have the expected align-items value', async () => {
+            expect(shadowGridStyles['align-items']).toBe('center');
+        });
+    });
+});
+//# sourceMappingURL=q2-grid.e2e.js.map

package/dist/collection/components/q2-grid/test/q2-grid.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"q2-grid.e2e.js","sourceRoot":"","sources":["../../../../../src/components/q2-grid/test/q2-grid.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { E2EElement, E2EPage } from '@stencil/core/testing';\nimport { setup, getListOfStyleCompilationIssues, evaluateA11y } from '@/utils/helpers';\n\ndescribe('q2-grid', () => {\n    let $e2ePage: E2EPage;\n    let $q2GridParent: E2EElement;\n    let $shadowGrid: E2EElement;\n    let q2GridParentStyles: CSSStyleDeclaration;\n    let shadowGridStyles: CSSStyleDeclaration;\n    const viewportWidths: { [key: string]: number } = { base: 479, xs: 480, sm: 768, md: 992, lg: 1200, xl: 1400 };\n    const viewportHeight: number = 500;\n\n    const setupPage = async (viewportWidth: 'base' | 'xs' | 'sm' | 'md' | 'lg' | 'xl') => {\n        $e2ePage = await setup();\n        await $e2ePage.setViewport({ width: viewportWidths[viewportWidth], height: viewportHeight });\n        await $e2ePage.setContent(`\n            <div id='parent' style='width: 100%; height: 100%'>\n                <q2-grid\n                    xs-columns='2' xs-rows='2' xs-gap='none' xs-justify='center' xs-align='center'\n                    sm-columns='3' sm-rows='3' sm-gap='compact' sm-justify='stretch' sm-align='stretch'\n                    md-columns='4' md-rows='4' md-gap='normal' md-justify='start' md-align='start'\n                    lg-columns='5' lg-rows='5' lg-gap='comfortable' lg-justify='end' lg-align='end'\n                    xl-columns='6' xl-rows='6' xl-gap='none' xl-justify='center' xl-align='center'\n                >\n                    <q2-grid-area>\n                        <div style='width: 10px; height: 10px'></div>\n                    </q2-grid-area>\n                    <q2-grid-area>\n                        <div style='width: 10px; height: 10px'></div>\n                    </q2-grid-area>\n                </q2-grid>\n            </div>\n        `);\n        await $e2ePage.waitForChanges();\n        $q2GridParent = await $e2ePage.find('#parent');\n        $shadowGrid = await $e2ePage.find('q2-grid >>> .q2-grid');\n        q2GridParentStyles = await $q2GridParent.getComputedStyle();\n        shadowGridStyles = await $shadowGrid.getComputedStyle();\n    };\n\n    describe('Compiler', () => {\n        it('properly compiles CSS vars and functions', async () => {\n            await setupPage('base');\n            expect(await getListOfStyleCompilationIssues($e2ePage, 'q2-grid')).toHaveLength(0);\n        });\n    });\n\n    describe('aXe DevTools', () => {\n        it('does not have accessibility violations', async () => {\n            await setupPage('base');\n            const hasViolations = await evaluateA11y($e2ePage);\n            expect(hasViolations).toBe(false);\n        });\n    });\n\n    describe('Breakpoint Independent Styles', () => {\n        beforeEach(async () => {\n            await setupPage('base');\n        });\n        it('should have the expected display value', async () => {\n            expect(shadowGridStyles['display']).toBe('grid');\n        });\n        it('should have the expected width value', async () => {\n            expect(shadowGridStyles['width']).toBe(q2GridParentStyles['width']);\n        });\n        it('should have the expected height value', async () => {\n            expect(shadowGridStyles['height']).toBe(q2GridParentStyles['height']);\n        });\n        it('should have the expected grid-auto-rows value', async () => {\n            expect(shadowGridStyles['grid-auto-rows']).toBe('auto');\n        });\n        it('should have the expected grid-auto-columns value', async () => {\n            expect(shadowGridStyles['grid-auto-columns']).toBe('1fr');\n        });\n        it('should have the expected grid-auto-flow value', async () => {\n            expect(shadowGridStyles['grid-auto-flow']).toBe('row');\n        });\n        it('should have the expected justify-content value', async () => {\n            expect(shadowGridStyles['justify-content']).toBe('center');\n        });\n        it('should have the expected align-content value', async () => {\n            expect(shadowGridStyles['align-content']).toBe('center');\n        });\n    });\n\n    describe('Base Computed Styles', () => {\n        beforeEach(async () => {\n            await setupPage('base');\n        });\n        it('should have the expected grid-template-columns value', async () => {\n            expect((shadowGridStyles['grid-template-columns'].match(/px/g) || []).length).toBe(12);\n        });\n        it('should have the expected grid-template-rows value', async () => {\n            expect(shadowGridStyles['grid-template-rows']).toBe('10px');\n        });\n        it('should have the expected column-gap value', async () => {\n            expect(shadowGridStyles['column-gap']).toBe('15px');\n        });\n        it('should have the expected row-gap value', async () => {\n            expect(shadowGridStyles['row-gap']).toBe('15px');\n        });\n        it('should have the expected justify-items value', async () => {\n            expect(shadowGridStyles['justify-items']).toBe('stretch');\n        });\n        it('should have the expected align-items value', async () => {\n            expect(shadowGridStyles['align-items']).toBe('stretch');\n        });\n    });\n\n    describe('XS Computed Styles', () => {\n        beforeEach(async () => {\n            await setupPage('xs');\n        });\n        it('should have the expected grid-template-columns value', async () => {\n            expect((shadowGridStyles['grid-template-columns'].match(/px/g) || []).length).toBe(2);\n        });\n        it('should have the expected grid-template-rows value', async () => {\n            expect(shadowGridStyles['grid-template-rows']).toBe('10px 10px');\n        });\n        it('should have the expected column-gap value', async () => {\n            expect(shadowGridStyles['column-gap']).toBe('0px');\n        });\n        it('should have the expected row-gap value', async () => {\n            expect(shadowGridStyles['row-gap']).toBe('0px');\n        });\n        it('should have the expected justify-items value', async () => {\n            expect(shadowGridStyles['justify-items']).toBe('center');\n        });\n        it('should have the expected align-items value', async () => {\n            expect(shadowGridStyles['align-items']).toBe('center');\n        });\n    });\n\n    describe('SM Computed Styles', () => {\n        beforeEach(async () => {\n            await setupPage('sm');\n        });\n        it('should have the expected grid-template-columns value', async () => {\n            expect((shadowGridStyles['grid-template-columns'].match(/px/g) || []).length).toBe(3);\n        });\n        it('should have the expected grid-template-rows value', async () => {\n            expect(shadowGridStyles['grid-template-rows']).toBe('10px 10px 10px');\n        });\n        it('should have the expected column-gap value', async () => {\n            expect(shadowGridStyles['column-gap']).toBe('5px');\n        });\n        it('should have the expected row-gap value', async () => {\n            expect(shadowGridStyles['row-gap']).toBe('5px');\n        });\n        it('should have the expected justify-items value', async () => {\n            expect(shadowGridStyles['justify-items']).toBe('stretch');\n        });\n        it('should have the expected align-items value', async () => {\n            expect(shadowGridStyles['align-items']).toBe('stretch');\n        });\n    });\n\n    describe('MD Computed Styles', () => {\n        beforeEach(async () => {\n            await setupPage('md');\n        });\n        it('should have the expected grid-template-columns value', async () => {\n            expect((shadowGridStyles['grid-template-columns'].match(/px/g) || []).length).toBe(4);\n        });\n        it('should have the expected grid-template-rows value', async () => {\n            expect(shadowGridStyles['grid-template-rows']).toBe('10px 10px 10px 10px');\n        });\n        it('should have the expected column-gap value', async () => {\n            expect(shadowGridStyles['column-gap']).toBe('15px');\n        });\n        it('should have the expected row-gap value', async () => {\n            expect(shadowGridStyles['row-gap']).toBe('15px');\n        });\n        it('should have the expected justify-items value', async () => {\n            expect(shadowGridStyles['justify-items']).toBe('start');\n        });\n        it('should have the expected align-items value', async () => {\n            expect(shadowGridStyles['align-items']).toBe('start');\n        });\n    });\n\n    describe('LG Computed Styles', () => {\n        beforeEach(async () => {\n            await setupPage('lg');\n        });\n        it('should have the expected grid-template-columns value', async () => {\n            expect((shadowGridStyles['grid-template-columns'].match(/px/g) || []).length).toBe(5);\n        });\n        it('should have the expected grid-template-rows value', async () => {\n            expect(shadowGridStyles['grid-template-rows']).toBe('10px 10px 10px 10px 10px');\n        });\n        it('should have the expected column-gap value', async () => {\n            expect(shadowGridStyles['column-gap']).toBe('25px');\n        });\n        it('should have the expected row-gap value', async () => {\n            expect(shadowGridStyles['row-gap']).toBe('25px');\n        });\n        it('should have the expected justify-items value', async () => {\n            expect(shadowGridStyles['justify-items']).toBe('end');\n        });\n        it('should have the expected align-items value', async () => {\n            expect(shadowGridStyles['align-items']).toBe('end');\n        });\n    });\n\n    describe('XL Computed Styles', () => {\n        beforeEach(async () => {\n            await setupPage('xl');\n        });\n        it('should have the expected grid-template-columns value', async () => {\n            expect((shadowGridStyles['grid-template-columns'].match(/px/g) || []).length).toBe(6);\n        });\n        it('should have the expected grid-template-rows value', async () => {\n            expect(shadowGridStyles['grid-template-rows']).toBe('10px 10px 10px 10px 10px 10px');\n        });\n        it('should have the expected column-gap value', async () => {\n            expect(shadowGridStyles['column-gap']).toBe('0px');\n        });\n        it('should have the expected row-gap value', async () => {\n            expect(shadowGridStyles['row-gap']).toBe('0px');\n        });\n        it('should have the expected justify-items value', async () => {\n            expect(shadowGridStyles['justify-items']).toBe('center');\n        });\n        it('should have the expected align-items value', async () => {\n            expect(shadowGridStyles['align-items']).toBe('center');\n        });\n    });\n});\n"]}

package/dist/collection/components/q2-grid-area/q2-grid-area.css

@@ -0,0 +1,110 @@
+: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);
+  }
+}