q2-tecton-elements 1.50.1 → 1.51.1

package/dist/collection/components/q2-item/q2-item.js

@@ -100,7 +100,7 @@ export class Q2Item {
     // #region Render Methods
     render() {
         const { clickable } = this;
-        return (h("div", { key: 'a9e39dca79c6270e4f14baaecdbdd4f8b0b4de16', "test-id": "itemContainer", class: this.itemClasses, ref: el => (this.itemElement = el), role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined }, this.hasBulletSlotContent && (h("div", { key: 'fc04a26b529e4ce6d172e4302fc14b90e2a78f1f', class: this.bulletClasses }, h("slot", { key: 'f5bb4c3197d403d0343d39a3aa6a798534f2933b', name: "bullet" }))), h("div", { key: '347902661fedb516d8e4cc47809adc4ce82f3ff1', class: this.mainClasses }, this.hasHeaderSlotContent && (h("div", { key: '47e886c8cacffdea8f5c6f7dc312e3ece45ec3d2', class: "header" }, h("slot", { key: '9808e356fc03fece812883668c9446910e4c8a53', name: "header" }))), this.hasBodySlotContent && (h("div", { key: '2c520f2cd16119ad5e115538591230f757d6a0d0', class: "body" }, h("slot", { key: '8f0095114ade8d453fae5152dd76d74eaf0500c4', name: "body" })))), this.hasActionSlotContent && (h("div", { key: '3ee7d01e07550738d52b2efc4e0df2b476c30c62', class: this.actionClasses }, h("slot", { key: 'f7025303ec2ee733a387e18a97f0a14554a72ce6', name: "action" }))), this.hasFooterSlotContent && (h("div", { key: 'ea36bbfe6e7b22042a21154c6b8091fb6dc5cd0b', class: this.footerClasses }, h("slot", { key: '81d318a12d21fbaa43ac92099719845081966f9e', name: "footer" })))));
+        return (h("div", { key: '2511d34e01575fe19d4a9becdce7a44ccc8736e7', "test-id": "itemContainer", class: this.itemClasses, ref: el => (this.itemElement = el), role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined }, this.hasBulletSlotContent && (h("div", { key: '47595ae0c96465a0524c4b08f7c77997fa5ad012', class: this.bulletClasses }, h("slot", { key: '0e446493744bdc304336f20e5bab89864b430cec', name: "bullet" }))), h("div", { key: '061814832dc71b7bbe239cddb2e474f7ea91558c', class: this.mainClasses }, this.hasHeaderSlotContent && (h("div", { key: '9f27b6fa63241088951935cff169385ef23b55e4', class: "header" }, h("slot", { key: '9c99e37648c9c4c5a8b981aa16ec8a7b42a1887a', name: "header" }))), this.hasBodySlotContent && (h("div", { key: 'e8a788366c10d06fef823b9be88c40fba65d4e71', class: "body" }, h("slot", { key: '617965a59d689b0679e920794ebf9a36848f4eab', name: "body" })))), this.hasActionSlotContent && (h("div", { key: '38c6a30f60c6a8bc8c953ed4b74a3687a0ba03a1', class: this.actionClasses }, h("slot", { key: '76efb6ba1377adcb3fc850d8966ecc49b55896b5', name: "action" }))), this.hasFooterSlotContent && (h("div", { key: '9a9bf0234ebac99487797bc93afa6e73097f1e68', class: this.footerClasses }, h("slot", { key: '91abd31668cff2657ecf57ce8b9d6f63e8d375ae', name: "footer" })))));
     }
     static get is() { return "q2-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,12 +1,5 @@
 import { evaluateA11y, setup } from "../../../utils/helpers";
 describe('q2-item', () => {
-    describe('[A11y] guideline compliance', () => {
-        it('Does not have accessibility violations', async () => {
-            const page = await setup({ html: `<q2-item />` });
-            const hasViolations = await evaluateA11y(page);
-            expect(hasViolations).toBe(false);
-        });
-    });
     describe('Props', () => { });
     describe('Slots', () => {
         describe('action', () => {
@@ -247,5 +240,37 @@ describe('q2-item', () => {
             expect(await innerActiveTestId(page)).toEqual('itemContainer');
         });
     });
+    describe('Accessibility', () => {
+        describe('aXe DevTools', () => {
+            it('does not have accessibility violations', async () => {
+                const page = await setup({ html: `<q2-item />` });
+                const hasViolations = await evaluateA11y(page);
+                expect(hasViolations).toBe(false);
+            });
+            it('does not have accessibility violations when slots are used', async () => {
+                const page = await setup({
+                    html: `
+                        <q2-item>
+                            <q2-avatar icon="home" slot="bullet">
+                            </q2-avatar>
+                            <div slot="header">Header Text</div>
+                            <div slot="body">Body Text</div>
+                            <div slot="footer">Footer Text</div>
+                            <q2-dropdown slot="action" type="icon" label="My dropdown" icon="options">
+                                <q2-dropdown-item value="first">First</q2-dropdown-item>
+                                <q2-dropdown-item value="second">Second</q2-dropdown-item>
+                                <q2-dropdown-item value="third">Third</q2-dropdown-item>
+                            </q2-dropdown>
+                        </q2-item>
+                    `,
+                });
+                const hasViolations = await evaluateA11y(page);
+                expect(hasViolations).toBe(false);
+            });
+        });
+        describe('Accessibility Tree', () => { });
+        describe('Keyboard Controls', () => { });
+        describe('Other', () => { });
+    });
 });
 //# sourceMappingURL=q2-item-test.e2e.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"q2-item-test.e2e.js","sourceRoot":"","sources":["../../../../src/components/q2-item/test/q2-item-test.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { E2EElement, E2EPage } from '@stencil/core/testing';\nimport { evaluateA11y, setup } from '@/utils/helpers';\n\ndescribe('q2-item', () => {\n    describe('[A11y] guideline compliance', () => {\n        it('Does not have accessibility violations', async () => {\n            const page = await setup({ html: `<q2-item />` });\n            const hasViolations = await evaluateA11y(page);\n\n            expect(hasViolations).toBe(false);\n        });\n    });\n    describe('Props', () => {});\n    describe('Slots', () => {\n        describe('action', () => {\n            it('when set content displayed as action', async () => {\n                const page = await setup({\n                    html: `\n                        <q2-item>\n                            <div slot=\"action\">Test Action</div>\n                        </q2-item>\n                    `,\n                });\n                const item = await page.find('q2-item');\n                const action = await page.find('q2-item >>> .action');\n\n                expect(item).toEqualText('Test Action');\n                expect(action).toBeTruthy();\n            });\n            it('when removed conatiner removed', async () => {\n                const page = await setup({\n                    html: `\n                    <q2-item>\n                        <div slot=\"action\">Test Body</div>\n                    </q2-item>\n                    `,\n                });\n                let actionSlot = await page.find('q2-item > [slot=\"action\"]');\n                let actionContainer = await page.find('q2-item >>> .action');\n\n                expect(actionSlot).toBeTruthy();\n                expect(actionContainer).toBeTruthy();\n\n                await page.evaluate(() => {\n                    const actionSlot = document.querySelector('q2-item > [slot=\"action\"]');\n                    if (actionSlot && actionSlot.parentNode) {\n                        actionSlot.parentNode.removeChild(actionSlot);\n                    }\n                });\n                await page.waitForChanges();\n                actionSlot = await page.find('q2-item > [slot=\"action\"]');\n                actionContainer = await page.find('q2-item >>> .action');\n\n                expect(actionSlot).toBeFalsy();\n                expect(actionContainer).toBeFalsy();\n            });\n            it('when not set action not present', async () => {\n                const page = await setup({\n                    html: `\n                        <q2-item />\n                    `,\n                });\n                const action = await page.find('q2-item >>> .action');\n\n                expect(action).toBeFalsy();\n            });\n            it('when not set CSS grid adjusted', async () => {\n                const page = await setup({\n                    html: `\n                        <q2-item>\n                            <div slot=\"body\">Test Body</div>\n                            <div slot=\"bullet\">Test Bullet</div>\n                            <div slot=\"footer\">Test Footer</div>\n                        </q2-item>\n                    `,\n                });\n                const itemContainer = await page.find('q2-item >>> .item');\n                const footer = await page.find('q2-item >>> .footer');\n\n                expect(itemContainer).toHaveClass('item-no-action');\n                expect(footer).toHaveClass('footer-no-action');\n            });\n        });\n        describe('body', () => {\n            it('when set content displayed as body', async () => {\n                const page = await setup({\n                    html: `\n                        <q2-item>\n                            <div slot=\"body\">Test Body</div>\n                        </q2-item>\n                    `,\n                });\n                const item = await page.find('q2-item');\n                const body = await page.find('q2-item >>> .body');\n\n                expect(item).toEqualText('Test Body');\n                expect(body).toBeTruthy();\n            });\n            it('when not set body not present', async () => {\n                const page = await setup({\n                    html: `\n                        <q2-item />\n                    `,\n                });\n                const body = await page.find('q2-item >>> .body');\n\n                expect(body).toBeFalsy();\n            });\n        });\n        describe('bullet', () => {\n            it('when set content displayed as bullet', async () => {\n                const page = await setup({\n                    html: `\n                        <q2-item>\n                            <div slot=\"bullet\">Test Bullet</div>\n                        </q2-item>\n                    `,\n                });\n                const item = await page.find('q2-item');\n                const bullet = await page.find('q2-item >>> .bullet');\n\n                expect(item).toEqualText('Test Bullet');\n                expect(bullet).toBeTruthy();\n            });\n            it('when not set bullet not present', async () => {\n                const page = await setup({\n                    html: `\n                        <q2-item />\n                    `,\n                });\n                const bullet = await page.find('q2-item >>> .bullet');\n\n                expect(bullet).toBeFalsy();\n            });\n            it('when not set CSS grid adjusted', async () => {\n                const page = await setup({\n                    html: `\n                        <q2-item>\n                            <div slot=\"action\">Test Action</div>\n                            <div slot=\"body\">Test Body</div>\n                            <div slot=\"footer\">Test Footer</div>\n                        </q2-item>\n                    `,\n                });\n                const itemContainer = await page.find('q2-item >>> .item');\n                const action = await page.find('q2-item >>> .action');\n                const main = await page.find('q2-item >>> .main');\n                const footer = await page.find('q2-item >>> .footer');\n\n                expect(itemContainer).toHaveClass('item-no-bullet');\n                expect(action).toHaveClass('action-no-bullet');\n                expect(main).toHaveClass('main-no-bullet');\n                expect(footer).toHaveClass('footer-no-bullet');\n            });\n        });\n        describe('footer', () => {\n            it('when set content displayed as footer', async () => {\n                const page = await setup({\n                    html: `\n                        <q2-item>\n                            <div slot=\"footer\">Test Footer</div>\n                        </q2-item>\n                    `,\n                });\n                const item = await page.find('q2-item');\n                const footer = await page.find('q2-item >>> .footer');\n\n                expect(item).toEqualText('Test Footer');\n                expect(footer).toBeTruthy();\n            });\n            it('when not set footer not present', async () => {\n                const page = await setup({\n                    html: `\n                        <q2-item />\n                    `,\n                });\n                const footer = await page.find('q2-item >>> .footer');\n\n                expect(footer).toBeFalsy();\n            });\n            it('when not set CSS grid adjusted', async () => {\n                const page = await setup({\n                    html: `\n                        <q2-item>\n                            <div slot=\"action\">Test Action</div>\n                            <div slot=\"body\">Test Body</div>\n                            <div slot=\"bullet\">Test Bullet</div>\n                        </q2-item>\n                    `,\n                });\n                const itemContainer = await page.find('q2-item >>> .item');\n                const bullet = await page.find('q2-item >>> .bullet');\n\n                expect(itemContainer).toHaveClass('item-no-footer');\n                expect(bullet).toHaveClass('bullet-no-footer');\n            });\n        });\n        describe('header/defalult', () => {\n            it('when set content displayed as header', async () => {\n                const page = await setup({\n                    html: `\n                        <q2-item>\n                            <div slot=\"header\">Test Header</div>\n                        </q2-item>\n                    `,\n                });\n                const item = await page.find('q2-item');\n                const header = await page.find('q2-item >>> .header');\n\n                expect(item).toEqualText('Test Header');\n                expect(header).toBeTruthy();\n            });\n            it('when not set header not present', async () => {\n                const page = await setup({\n                    html: `\n                        <q2-item />\n                    `,\n                });\n                const header = await page.find('q2-item >>> .header');\n\n                expect(header).toBeFalsy();\n            });\n            it('when action and bullet missing CSS grid adjusted', async () => {\n                const page = await setup({\n                    html: `\n                        <q2-item>\n                            <div slot=\"header\">Test Header</div>\n                            <div slot=\"footer\">Test Footer</div>\n                        </q2-item>\n                    `,\n                });\n                const itemContainer = await page.find('q2-item >>> .item');\n                const main = await page.find('q2-item >>> .main');\n                const footer = await page.find('q2-item >>> .footer');\n\n                expect(itemContainer).toHaveClass('item-no-action-nor-bullet');\n                expect(main).toHaveClass('main-no-action-nor-bullet');\n                expect(footer).toHaveClass('footer-no-action-nor-bullet');\n            });\n        });\n    });\n\n    describe('focus', () => {\n        let page: E2EPage;\n        let item: E2EElement;\n        beforeEach(async () => {\n            page = await setup({\n                html: `\n                    <q2-item clickable>\n                        <div slot=\"header\">Header Text</div>\n                    </q2-item>\n                `,\n            });\n            item = await page.find('q2-item');\n\n            expect(await innerActiveTestId(page)).toBeUndefined();\n        });\n\n        const innerActiveTestId = async (page: E2EPage) => {\n            return page.$eval('q2-item', el => el.shadowRoot.activeElement?.getAttribute('test-id'));\n        };\n\n        it('focuses inner button when focus event is dispatched', async function (): Promise<void> {\n            await item.triggerEvent('focus');\n            await page.waitForChanges();\n\n            expect(await innerActiveTestId(page)).toEqual('itemContainer');\n        });\n\n        it('focuses inner button when element.focus() is called', async function (): Promise<void> {\n            await item.focus();\n            await page.waitForChanges();\n\n            expect(await innerActiveTestId(page)).toEqual('itemContainer');\n        });\n    });\n});\n"]}
+{"version":3,"file":"q2-item-test.e2e.js","sourceRoot":"","sources":["../../../../src/components/q2-item/test/q2-item-test.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { E2EElement, E2EPage } from '@stencil/core/testing';\nimport { evaluateA11y, setup } from '@/utils/helpers';\n\ndescribe('q2-item', () => {\n    describe('Props', () => {});\n    describe('Slots', () => {\n        describe('action', () => {\n            it('when set content displayed as action', async () => {\n                const page = await setup({\n                    html: `\n                        <q2-item>\n                            <div slot=\"action\">Test Action</div>\n                        </q2-item>\n                    `,\n                });\n                const item = await page.find('q2-item');\n                const action = await page.find('q2-item >>> .action');\n\n                expect(item).toEqualText('Test Action');\n                expect(action).toBeTruthy();\n            });\n            it('when removed conatiner removed', async () => {\n                const page = await setup({\n                    html: `\n                    <q2-item>\n                        <div slot=\"action\">Test Body</div>\n                    </q2-item>\n                    `,\n                });\n                let actionSlot = await page.find('q2-item > [slot=\"action\"]');\n                let actionContainer = await page.find('q2-item >>> .action');\n\n                expect(actionSlot).toBeTruthy();\n                expect(actionContainer).toBeTruthy();\n\n                await page.evaluate(() => {\n                    const actionSlot = document.querySelector('q2-item > [slot=\"action\"]');\n                    if (actionSlot && actionSlot.parentNode) {\n                        actionSlot.parentNode.removeChild(actionSlot);\n                    }\n                });\n                await page.waitForChanges();\n                actionSlot = await page.find('q2-item > [slot=\"action\"]');\n                actionContainer = await page.find('q2-item >>> .action');\n\n                expect(actionSlot).toBeFalsy();\n                expect(actionContainer).toBeFalsy();\n            });\n            it('when not set action not present', async () => {\n                const page = await setup({\n                    html: `\n                        <q2-item />\n                    `,\n                });\n                const action = await page.find('q2-item >>> .action');\n\n                expect(action).toBeFalsy();\n            });\n            it('when not set CSS grid adjusted', async () => {\n                const page = await setup({\n                    html: `\n                        <q2-item>\n                            <div slot=\"body\">Test Body</div>\n                            <div slot=\"bullet\">Test Bullet</div>\n                            <div slot=\"footer\">Test Footer</div>\n                        </q2-item>\n                    `,\n                });\n                const itemContainer = await page.find('q2-item >>> .item');\n                const footer = await page.find('q2-item >>> .footer');\n\n                expect(itemContainer).toHaveClass('item-no-action');\n                expect(footer).toHaveClass('footer-no-action');\n            });\n        });\n        describe('body', () => {\n            it('when set content displayed as body', async () => {\n                const page = await setup({\n                    html: `\n                        <q2-item>\n                            <div slot=\"body\">Test Body</div>\n                        </q2-item>\n                    `,\n                });\n                const item = await page.find('q2-item');\n                const body = await page.find('q2-item >>> .body');\n\n                expect(item).toEqualText('Test Body');\n                expect(body).toBeTruthy();\n            });\n            it('when not set body not present', async () => {\n                const page = await setup({\n                    html: `\n                        <q2-item />\n                    `,\n                });\n                const body = await page.find('q2-item >>> .body');\n\n                expect(body).toBeFalsy();\n            });\n        });\n        describe('bullet', () => {\n            it('when set content displayed as bullet', async () => {\n                const page = await setup({\n                    html: `\n                        <q2-item>\n                            <div slot=\"bullet\">Test Bullet</div>\n                        </q2-item>\n                    `,\n                });\n                const item = await page.find('q2-item');\n                const bullet = await page.find('q2-item >>> .bullet');\n\n                expect(item).toEqualText('Test Bullet');\n                expect(bullet).toBeTruthy();\n            });\n            it('when not set bullet not present', async () => {\n                const page = await setup({\n                    html: `\n                        <q2-item />\n                    `,\n                });\n                const bullet = await page.find('q2-item >>> .bullet');\n\n                expect(bullet).toBeFalsy();\n            });\n            it('when not set CSS grid adjusted', async () => {\n                const page = await setup({\n                    html: `\n                        <q2-item>\n                            <div slot=\"action\">Test Action</div>\n                            <div slot=\"body\">Test Body</div>\n                            <div slot=\"footer\">Test Footer</div>\n                        </q2-item>\n                    `,\n                });\n                const itemContainer = await page.find('q2-item >>> .item');\n                const action = await page.find('q2-item >>> .action');\n                const main = await page.find('q2-item >>> .main');\n                const footer = await page.find('q2-item >>> .footer');\n\n                expect(itemContainer).toHaveClass('item-no-bullet');\n                expect(action).toHaveClass('action-no-bullet');\n                expect(main).toHaveClass('main-no-bullet');\n                expect(footer).toHaveClass('footer-no-bullet');\n            });\n        });\n        describe('footer', () => {\n            it('when set content displayed as footer', async () => {\n                const page = await setup({\n                    html: `\n                        <q2-item>\n                            <div slot=\"footer\">Test Footer</div>\n                        </q2-item>\n                    `,\n                });\n                const item = await page.find('q2-item');\n                const footer = await page.find('q2-item >>> .footer');\n\n                expect(item).toEqualText('Test Footer');\n                expect(footer).toBeTruthy();\n            });\n            it('when not set footer not present', async () => {\n                const page = await setup({\n                    html: `\n                        <q2-item />\n                    `,\n                });\n                const footer = await page.find('q2-item >>> .footer');\n\n                expect(footer).toBeFalsy();\n            });\n            it('when not set CSS grid adjusted', async () => {\n                const page = await setup({\n                    html: `\n                        <q2-item>\n                            <div slot=\"action\">Test Action</div>\n                            <div slot=\"body\">Test Body</div>\n                            <div slot=\"bullet\">Test Bullet</div>\n                        </q2-item>\n                    `,\n                });\n                const itemContainer = await page.find('q2-item >>> .item');\n                const bullet = await page.find('q2-item >>> .bullet');\n\n                expect(itemContainer).toHaveClass('item-no-footer');\n                expect(bullet).toHaveClass('bullet-no-footer');\n            });\n        });\n        describe('header/defalult', () => {\n            it('when set content displayed as header', async () => {\n                const page = await setup({\n                    html: `\n                        <q2-item>\n                            <div slot=\"header\">Test Header</div>\n                        </q2-item>\n                    `,\n                });\n                const item = await page.find('q2-item');\n                const header = await page.find('q2-item >>> .header');\n\n                expect(item).toEqualText('Test Header');\n                expect(header).toBeTruthy();\n            });\n            it('when not set header not present', async () => {\n                const page = await setup({\n                    html: `\n                        <q2-item />\n                    `,\n                });\n                const header = await page.find('q2-item >>> .header');\n\n                expect(header).toBeFalsy();\n            });\n            it('when action and bullet missing CSS grid adjusted', async () => {\n                const page = await setup({\n                    html: `\n                        <q2-item>\n                            <div slot=\"header\">Test Header</div>\n                            <div slot=\"footer\">Test Footer</div>\n                        </q2-item>\n                    `,\n                });\n                const itemContainer = await page.find('q2-item >>> .item');\n                const main = await page.find('q2-item >>> .main');\n                const footer = await page.find('q2-item >>> .footer');\n\n                expect(itemContainer).toHaveClass('item-no-action-nor-bullet');\n                expect(main).toHaveClass('main-no-action-nor-bullet');\n                expect(footer).toHaveClass('footer-no-action-nor-bullet');\n            });\n        });\n    });\n\n    describe('focus', () => {\n        let page: E2EPage;\n        let item: E2EElement;\n        beforeEach(async () => {\n            page = await setup({\n                html: `\n                    <q2-item clickable>\n                        <div slot=\"header\">Header Text</div>\n                    </q2-item>\n                `,\n            });\n            item = await page.find('q2-item');\n\n            expect(await innerActiveTestId(page)).toBeUndefined();\n        });\n\n        const innerActiveTestId = async (page: E2EPage) => {\n            return page.$eval('q2-item', el => el.shadowRoot.activeElement?.getAttribute('test-id'));\n        };\n\n        it('focuses inner button when focus event is dispatched', async function (): Promise<void> {\n            await item.triggerEvent('focus');\n            await page.waitForChanges();\n\n            expect(await innerActiveTestId(page)).toEqual('itemContainer');\n        });\n\n        it('focuses inner button when element.focus() is called', async function (): Promise<void> {\n            await item.focus();\n            await page.waitForChanges();\n\n            expect(await innerActiveTestId(page)).toEqual('itemContainer');\n        });\n    });\n\n    describe('Accessibility', () => {\n        describe('aXe DevTools', () => {\n            it('does not have accessibility violations', async () => {\n                const page = await setup({ html: `<q2-item />` });\n                const hasViolations = await evaluateA11y(page);\n\n                expect(hasViolations).toBe(false);\n            });\n\n            it('does not have accessibility violations when slots are used', async () => {\n                const page = await setup({\n                    html: `\n                        <q2-item>\n                            <q2-avatar icon=\"home\" slot=\"bullet\">\n                            </q2-avatar>\n                            <div slot=\"header\">Header Text</div>\n                            <div slot=\"body\">Body Text</div>\n                            <div slot=\"footer\">Footer Text</div>\n                            <q2-dropdown slot=\"action\" type=\"icon\" label=\"My dropdown\" icon=\"options\">\n                                <q2-dropdown-item value=\"first\">First</q2-dropdown-item>\n                                <q2-dropdown-item value=\"second\">Second</q2-dropdown-item>\n                                <q2-dropdown-item value=\"third\">Third</q2-dropdown-item>\n                            </q2-dropdown>\n                        </q2-item>\n                    `,\n                });\n                const hasViolations = await evaluateA11y(page);\n\n                expect(hasViolations).toBe(false);\n            });\n        });\n        describe('Accessibility Tree', () => {});\n        describe('Keyboard Controls', () => {});\n        describe('Other', () => {});\n    });\n});\n"]}

package/dist/collection/components/q2-legend/q2-legend.css

@@ -106,7 +106,7 @@ ul {
 }
 
 .item-name {
-  color: var(--tct-legend-item-name-font-color, --t-text, #4d4d4d);
+  color: var(--tct-legend-item-name-font-color, var(--t-text, #4d4d4d));
   display: inline-block;
   flex-grow: 1;
   font-size: var(--tct-legend-item-name-font-size, var(--app-font-size, 14px));

package/dist/collection/components/q2-legend/q2-legend.js

@@ -94,7 +94,7 @@ export class Q2Legend {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("click-elsewhere", { key: '6ef0467e7caa8b09d79a19a661ddc5b9e5bb4fe9', onChange: () => this.onClickElsewhere(this) }, h("ul", { key: '00820cd965766010dd29f00f2cc662e7c581f728' }, this.dataWithClasses.map(item => (h("li", { class: "item" }, h("button", { "test-id": "item", "aria-label": `${item.name} ${this.formatValue(item.value)}`, class: item.classes, onClick: event => this.onClick(event, item), onMouseEnter: event => this.onMouseEnter(event, item), onMouseLeave: event => this.onMouseLeave(event, item) }, h("span", { "test-id": "itemColor", class: "item-color-indicator", style: { backgroundColor: item.color }, "aria-hidden": "true" }), h("span", { "test-id": "itemName", class: "item-name" }, item.name), h("span", { id: `item-${item.id}`, "test-id": "itemValue", class: "item-value" }, this.formatValue(item.value)))))))));
+        return (h("click-elsewhere", { key: '14c2b27428cc8a8e95bf8df62aac0c235bd65606', onChange: () => this.onClickElsewhere(this) }, h("ul", { key: 'b597b625d0abb353d7752a9ca6ccedc9dc4eea6a' }, this.dataWithClasses.map(item => (h("li", { class: "item" }, h("button", { "test-id": "item", "aria-label": `${item.name} ${this.formatValue(item.value)}`, class: item.classes, onClick: event => this.onClick(event, item), onMouseEnter: event => this.onMouseEnter(event, item), onMouseLeave: event => this.onMouseLeave(event, item) }, h("span", { "test-id": "itemColor", class: "item-color-indicator", style: { backgroundColor: item.color }, "aria-hidden": "true" }), h("span", { "test-id": "itemName", class: "item-name" }, item.name), h("span", { id: `item-${item.id}`, "test-id": "itemValue", class: "item-value" }, this.formatValue(item.value)))))))));
     }
     static get is() { return "q2-legend"; }
     static get encapsulation() { return "shadow"; }

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

@@ -5,15 +5,20 @@ describe('q2-legend', () => {
         { color: 'blue', id: 'item2', name: 'Item 2', value: 200 },
         { color: 'green', id: 'item3', name: 'Item 3', value: 300 },
     ];
-    describe('[A11y] guideline compliance', () => {
-        it('Does not have accessibility violations', async () => {
-            const page = await setup({ html: `<q2-legend />` });
-            const legend = (await page.find('q2-legend'));
-            legend.setProperty('data', testData);
-            await page.waitForChanges();
-            const hasViolations = await evaluateA11y(page);
-            expect(hasViolations).toBe(false);
+    describe('Accessibility', () => {
+        describe('aXe DevTools', () => {
+            it('does not have accessibility violations', async () => {
+                const page = await setup({ html: `<q2-legend />` });
+                const legend = (await page.find('q2-legend'));
+                legend.setProperty('data', testData);
+                await page.waitForChanges();
+                const hasViolations = await evaluateA11y(page);
+                expect(hasViolations).toBe(false);
+            });
         });
+        describe('Accessibility Tree', () => { });
+        describe('Keyboard Controls', () => { });
+        describe('Other', () => { });
     });
 });
 //# sourceMappingURL=q2-legend-test.e2e.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"q2-legend-test.e2e.js","sourceRoot":"","sources":["../../../../src/components/q2-legend/test/q2-legend-test.e2e.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAEtD,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACvB,MAAM,QAAQ,GAAG;QACb,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE;QAC7D,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,EAAE;QAC1D,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,EAAE;KAC9D,CAAC;IAEF,QAAQ,CAAC,6BAA6B,EAAE,GAAG,EAAE;QACzC,EAAE,CAAC,wCAAwC,EAAE,KAAK,IAAI,EAAE;YACpD,MAAM,IAAI,GAAG,MAAM,KAAK,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,CAAC;YACpD,MAAM,MAAM,GAAG,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAiC,CAAC;YAC9E,MAAM,CAAC,WAAW,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;YACrC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;YAC5B,MAAM,aAAa,GAAG,MAAM,YAAY,CAAC,IAAI,CAAC,CAAC;YAE/C,MAAM,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACtC,CAAC,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC","sourcesContent":["import { E2EElement } from '@stencil/core/testing';\nimport { evaluateA11y, setup } from '@/utils/helpers';\n\ndescribe('q2-legend', () => {\n    const testData = [\n        { color: 'red', id: 'item1', name: 'Item 1', value: 1000000 },\n        { color: 'blue', id: 'item2', name: 'Item 2', value: 200 },\n        { color: 'green', id: 'item3', name: 'Item 3', value: 300 },\n    ];\n\n    describe('[A11y] guideline compliance', () => {\n        it('Does not have accessibility violations', async () => {\n            const page = await setup({ html: `<q2-legend />` });\n            const legend = (await page.find('q2-legend')) as E2EElement & { data: any[] };\n            legend.setProperty('data', testData);\n            await page.waitForChanges();\n            const hasViolations = await evaluateA11y(page);\n\n            expect(hasViolations).toBe(false);\n        });\n    });\n});\n"]}
+{"version":3,"file":"q2-legend-test.e2e.js","sourceRoot":"","sources":["../../../../src/components/q2-legend/test/q2-legend-test.e2e.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAEtD,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACvB,MAAM,QAAQ,GAAG;QACb,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE;QAC7D,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,EAAE;QAC1D,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,EAAE;KAC9D,CAAC;IAEF,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;QAC3B,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;YAC1B,EAAE,CAAC,wCAAwC,EAAE,KAAK,IAAI,EAAE;gBACpD,MAAM,IAAI,GAAG,MAAM,KAAK,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,CAAC;gBACpD,MAAM,MAAM,GAAG,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAiC,CAAC;gBAC9E,MAAM,CAAC,WAAW,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;gBACrC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;gBAC5B,MAAM,aAAa,GAAG,MAAM,YAAY,CAAC,IAAI,CAAC,CAAC;gBAE/C,MAAM,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACtC,CAAC,CAAC,CAAC;QACP,CAAC,CAAC,CAAC;QACH,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;QACzC,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;QACxC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;IAChC,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC","sourcesContent":["import { E2EElement } from '@stencil/core/testing';\nimport { evaluateA11y, setup } from '@/utils/helpers';\n\ndescribe('q2-legend', () => {\n    const testData = [\n        { color: 'red', id: 'item1', name: 'Item 1', value: 1000000 },\n        { color: 'blue', id: 'item2', name: 'Item 2', value: 200 },\n        { color: 'green', id: 'item3', name: 'Item 3', value: 300 },\n    ];\n\n    describe('Accessibility', () => {\n        describe('aXe DevTools', () => {\n            it('does not have accessibility violations', async () => {\n                const page = await setup({ html: `<q2-legend />` });\n                const legend = (await page.find('q2-legend')) as E2EElement & { data: any[] };\n                legend.setProperty('data', testData);\n                await page.waitForChanges();\n                const hasViolations = await evaluateA11y(page);\n\n                expect(hasViolations).toBe(false);\n            });\n        });\n        describe('Accessibility Tree', () => {});\n        describe('Keyboard Controls', () => {});\n        describe('Other', () => {});\n    });\n});\n"]}

package/dist/collection/components/q2-link/q2-link.css

@@ -0,0 +1,146 @@
+* {
+  box-sizing: border-box;
+}
+
+*:active {
+  outline: none;
+}
+
+*:focus {
+  outline: none;
+  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc);
+}
+
+:host {
+  box-shadow: none !important;
+}
+
+::-moz-focus-inner {
+  border: none;
+}
+
+input,
+textarea,
+button {
+  font-family: inherit;
+  font-size: inherit;
+  font-stretch: inherit;
+}
+
+:host(.sr),
+:host(.sr) button {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}
+
+.sr,
+.sr button {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}
+
+.hidden {
+  display: none;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.invisible {
+  visibility: hidden;
+}
+
+:host {
+  display: inline-block;
+}
+
+:host:active {
+  box-shadow: none;
+}
+
+.link {
+  --comp-link-font-bold-stroke-width: 0.5px;
+  background: transparent;
+  border: none;
+  color: var(--tct-link-color, var(--t-primary, inherit));
+  font-size: var(--tct-link-font-size, inherit);
+  font-weight: var(--tct-link-font-weight, inherit);
+}
+.link a {
+  height: var(--tct-link-height, 24px);
+  display: flex;
+  align-items: center;
+  --tct-icon-size: 16px;
+  text-decoration: none;
+}
+.link a q2-icon {
+  margin-left: var(--tct-link-label-icon-gap, 6px);
+}
+.link.standalone {
+  display: flex;
+  align-items: center;
+  color: var(--tct-link-color-standalone, var(--t-primary));
+  --comp-icon-stroke: var(--tct-link-icon-stroke-width, 1.5);
+}
+.link.standalone:hover {
+  text-decoration: underline;
+  -webkit-text-stroke-width: var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));
+  text-stroke-width: var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));
+  --tct-icon-stroke-width: calc(var(--comp-icon-stroke) + 0.5);
+}
+.link.standalone:active:hover {
+  text-decoration: underline;
+  -webkit-text-stroke-width: var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));
+  text-stroke-width: var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));
+  --tct-icon-stroke-width: calc(var(--comp-icon-stroke) + 0.5);
+}
+.link.standalone:active:hover a {
+  color: var(--tct-link-color-standalone-active, var(--t-primary-d2));
+  box-shadow: none;
+}
+.link.standalone.disabled a {
+  cursor: not-allowed;
+  color: var(--tct-link-color-standalone-disabled, var(--t-primary));
+  opacity: 0.5;
+  text-decoration: none;
+}
+.link.standalone.disabled:hover {
+  text-decoration: none;
+}
+.link.inline {
+  margin: 0 var(--tct-link-side-margin, 6px);
+  text-decoration: underline;
+  color: var(--tct-link-color-inline, var(--t-primary));
+}
+.link.inline:hover {
+  -webkit-text-stroke-width: var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));
+  text-stroke-width: var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));
+}
+.link.inline:active:hover {
+  -webkit-text-stroke-width: var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));
+  text-stroke-width: var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));
+  color: var(--tct-link-color-inline-active, var(--t-primary-d2));
+  box-shadow: none;
+}
+.link.inline.disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.link.inline:focus-visible .link.inline {
+  box-shadow: var(--const-double-focus-ring);
+}

package/dist/collection/components/q2-link/q2-link.js

@@ -0,0 +1,242 @@
+import { h } from "@stencil/core";
+export class Q2Link {
+    constructor() {
+        this.disabled = false;
+        this.href = '#';
+        this.label = undefined;
+        this.referrerpolicy = undefined;
+        this.target = undefined;
+        this.tctTitle = undefined;
+        this.variant = 'inline';
+    }
+    // #endregion
+    // #region Public Methods API
+    /**
+     * A method for click.
+     *
+     * @testOnly
+     */
+    async clickLink() {
+        const anchor = this.hostElement.shadowRoot.querySelector(`[test-id="linkAnchor"]`);
+        anchor === null || anchor === void 0 ? void 0 : anchor.click();
+    }
+    // #endregion
+    // #region Local Methods
+    get classes() {
+        const list = ['link'];
+        if (this.variant)
+            list.push(this.variant);
+        if (!!this.disabled)
+            list.push('disabled');
+        return list.join(' ');
+    }
+    handleClick(event) {
+        event.stopPropagation();
+        if (this.disabled)
+            return;
+        this.tctClick.emit({
+            target: this.target,
+            referrerpolicy: this.referrerpolicy,
+            href: this.href,
+        });
+    }
+    // #endregion
+    // #region Render Methods
+    render() {
+        return this.variant === 'standalone' ? (h("div", { class: this.classes, "aria-label": this.label }, h("a", { onClick: e => this.handleClick(e), href: !!this.disabled ? undefined : this.href, target: this.target || '_self', referrerPolicy: this.referrerpolicy || undefined, title: this.tctTitle || undefined, "test-id": "linkAnchor" }, h("span", { class: "label" }, this.label), h("q2-icon", { type: "chevron-right" })))) : (h("a", { class: this.classes, onClick: e => this.handleClick(e), href: !!this.disabled ? undefined : this.href, target: this.target || '_self', referrerPolicy: this.referrerpolicy || undefined, title: this.tctTitle || undefined, "test-id": "linkAnchor" }, this.label));
+    }
+    static get is() { return "q2-link"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["q2-link.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["q2-link.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The disabled."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The link when clicked."
+                },
+                "attribute": "href",
+                "reflect": true,
+                "defaultValue": "'#'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label to display."
+                },
+                "attribute": "label",
+                "reflect": true
+            },
+            "referrerpolicy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ReferrerPolicy",
+                    "resolved": "\"\" | \"no-referrer\" | \"no-referrer-when-downgrade\" | \"origin\" | \"origin-when-cross-origin\" | \"same-origin\" | \"strict-origin\" | \"strict-origin-when-cross-origin\" | \"unsafe-url\"",
+                    "references": {
+                        "ReferrerPolicy": {
+                            "location": "global",
+                            "id": "global::ReferrerPolicy"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The [referrerpolicy](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy)"
+                },
+                "attribute": "referrerpolicy",
+                "reflect": true
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The target."
+                },
+                "attribute": "target",
+                "reflect": true
+            },
+            "tctTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The title attribute on a tag in shadowRoot."
+                },
+                "attribute": "tct-title",
+                "reflect": true
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value link to display."
+                },
+                "attribute": "variant",
+                "reflect": true,
+                "defaultValue": "'inline'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tctClick",
+                "name": "tctClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "legacyEvent",
+                            "text": undefined
+                        }],
+                    "text": "Emitted when the link is clicked."
+                },
+                "complexType": {
+                    "original": "{ target: string; referrerpolicy: string; href: string }",
+                    "resolved": "{ target: string; referrerpolicy: string; href: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "clickLink": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLAnchorElement": {
+                            "location": "global",
+                            "id": "global::HTMLAnchorElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "A method for click.",
+                    "tags": [{
+                            "name": "testOnly",
+                            "text": undefined
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+}
+//# sourceMappingURL=q2-link.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"q2-link.js","sourceRoot":"","sources":["../../../src/components/q2-link/q2-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAsB,OAAO,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,eAAe,CAAC;AAE7G,MAAM,OAAO,MAAM;;wBAWK,KAAK;oBAIV,GAAG;;;;;uBAoBA,QAAQ;;IAY1B,aAAa;IACb,6BAA6B;IAE7B;;;;OAIG;IAEH,KAAK,CAAC,SAAS;QACX,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;QAClF,MAA4B,aAA5B,MAAM,uBAAN,MAAM,CAAwB,KAAK,EAAE,CAAC;IAC3C,CAAC;IAED,aAAa;IACb,wBAAwB;IAExB,IAAI,OAAO;QACP,MAAM,IAAI,GAAG,CAAC,MAAM,CAAC,CAAC;QACtB,IAAI,IAAI,CAAC,OAAO;YAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC1C,IAAI,CAAC,CAAC,IAAI,CAAC,QAAQ;YAAE,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC3C,OAAO,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC1B,CAAC;IAED,WAAW,CAAC,KAAiB;QACzB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;YACf,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,cAAc,EAAE,IAAI,CAAC,cAAc;YACnC,IAAI,EAAE,IAAI,CAAC,IAAI;SAClB,CAAC,CAAC;IACP,CAAC;IAED,aAAa;IACb,yBAAyB;IAEzB,MAAM;QACF,OAAO,IAAI,CAAC,OAAO,KAAK,YAAY,CAAC,CAAC,CAAC,CACnC,WACI,KAAK,EAAE,IAAI,CAAC,OAAO,gBACP,IAAI,CAAC,KAAK;YAEtB,SACI,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EACjC,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAC7C,MAAM,EAAE,IAAI,CAAC,MAAM,IAAI,OAAO,EAC9B,cAAc,EAAE,IAAI,CAAC,cAAc,IAAI,SAAS,EAChD,KAAK,EAAE,IAAI,CAAC,QAAQ,IAAI,SAAS,aACzB,YAAY;gBAEpB,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ;gBACvC,eAAS,IAAI,EAAC,eAAe,GAAW,CACxC,CACF,CACT,CAAC,CAAC,CAAC,CACA,SACI,KAAK,EAAE,IAAI,CAAC,OAAO,EACnB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EACjC,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAC7C,MAAM,EAAE,IAAI,CAAC,MAAM,IAAI,OAAO,EAC9B,cAAc,EAAE,IAAI,CAAC,cAAc,IAAI,SAAS,EAChD,KAAK,EAAE,IAAI,CAAC,QAAQ,IAAI,SAAS,aACzB,YAAY,IAEnB,IAAI,CAAC,KAAK,CACX,CACP,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGJ","sourcesContent":["import { Component, Prop, h, ComponentInterface, Element, Event, EventEmitter, Method } from '@stencil/core';\n@Component({ tag: 'q2-link', shadow: true, styleUrl: 'q2-link.scss' })\nexport class Q2Link implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The disabled.  */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /** The link when clicked. */\n    @Prop({ reflect: true })\n    href: string = '#';\n\n    /** The label to display. */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** The [referrerpolicy](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy) */\n    @Prop({ reflect: true })\n    referrerpolicy: ReferrerPolicy;\n\n    /** The target.  */\n    @Prop({ reflect: true })\n    target: string; // _self | _blank\n\n    /** The title attribute on a tag in shadowRoot. */\n    @Prop({ reflect: true })\n    tctTitle: string;\n\n    /** The value link to display. */\n    @Prop({ reflect: true })\n    variant: string = 'inline';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the link is clicked.\n     * @legacyEvent\n     */\n    @Event()\n    tctClick: EventEmitter<{ target: string; referrerpolicy: string; href: string }>;\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * A method for click.\n     *\n     * @testOnly\n     */\n    @Method()\n    async clickLink() {\n        const anchor = this.hostElement.shadowRoot.querySelector(`[test-id=\"linkAnchor\"]`);\n        (anchor as HTMLAnchorElement)?.click();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get classes() {\n        const list = ['link'];\n        if (this.variant) list.push(this.variant);\n        if (!!this.disabled) list.push('disabled');\n        return list.join(' ');\n    }\n\n    handleClick(event: MouseEvent) {\n        event.stopPropagation();\n        if (this.disabled) return;\n        this.tctClick.emit({\n            target: this.target,\n            referrerpolicy: this.referrerpolicy,\n            href: this.href,\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return this.variant === 'standalone' ? (\n            <div\n                class={this.classes}\n                aria-label={this.label}\n            >\n                <a\n                    onClick={e => this.handleClick(e)}\n                    href={!!this.disabled ? undefined : this.href}\n                    target={this.target || '_self'}\n                    referrerPolicy={this.referrerpolicy || undefined}\n                    title={this.tctTitle || undefined}\n                    test-id=\"linkAnchor\"\n                >\n                    <span class=\"label\">{this.label}</span>\n                    <q2-icon type=\"chevron-right\"></q2-icon>\n                </a>\n            </div>\n        ) : (\n            <a\n                class={this.classes}\n                onClick={e => this.handleClick(e)}\n                href={!!this.disabled ? undefined : this.href}\n                target={this.target || '_self'}\n                referrerPolicy={this.referrerpolicy || undefined}\n                title={this.tctTitle || undefined}\n                test-id=\"linkAnchor\"\n            >\n                {this.label}\n            </a>\n        );\n    }\n\n    // #endregion\n}\n"]}