q2-tecton-elements 1.37.1 → 1.38.1

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

@@ -1 +1 @@
-{"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","options","bootstrapLazy","JSON","parse"],"sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v3.4.2 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, plt, win, doc, promiseResolve, H } from '@stencil/core';\n/**\n * Helper method for querying a `meta` tag that contains a nonce value\n * out of a DOM's head.\n *\n * @param doc The DOM containing the `head` to query against\n * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag\n * exists or the tag has no content.\n */\nfunction queryNonceMetaTagContent(doc) {\n    var _a, _b, _c;\n    return (_c = (_b = (_a = doc.head) === null || _a === void 0 ? void 0 : _a.querySelector('meta[name=\"csp-nonce\"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;\n}\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\\s|-/g, '_')}`;\nconst patchBrowser = () => {\n    // NOTE!! This fn cannot use async/await!\n    if (BUILD.isDev && !BUILD.isTesting) {\n        consoleDevInfo('Running in development mode.');\n    }\n    // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n    if (BUILD.cssVarShim) {\n        // shim css vars\n        // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n        plt.$cssShim$ = win.__cssshim;\n    }\n    if (BUILD.cloneNodeFix) {\n        // opted-in to polyfill cloneNode() for slot polyfilled components\n        patchCloneNodeFix(H.prototype);\n    }\n    if (BUILD.profile && !performance.mark) {\n        // not all browsers support performance.mark/measure (Safari 10)\n        // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,\n        // simply stub the implementations out.\n        // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)\n        // @ts-ignore\n        performance.mark = performance.measure = () => {\n            /*noop*/\n        };\n        performance.getEntriesByName = () => [];\n    }\n    // @ts-ignore\n    const scriptElm = \n    // TODO(STENCIL-661): Remove code related to the dynamic import shim\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    BUILD.scriptDataOpts || BUILD.safari10 || BUILD.dynamicImportShim\n        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n            s.getAttribute('data-stencil-namespace') === NAMESPACE)\n        : null;\n    const importMeta = import.meta.url;\n    const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {\n        // Safari < v11 support: This IF is true if it's Safari below v11.\n        // This fn cannot use async/await since Safari didn't support it until v11,\n        // however, Safari 10 did support modules. Safari 10 also didn't support \"nomodule\",\n        // so both the ESM file and nomodule file would get downloaded. Only Safari\n        // has 'onbeforeload' in the script, and \"history.scrollRestoration\" was added\n        // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.\n        // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.\n        return {\n            then() {\n                /* promise noop */\n            },\n        };\n    }\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    if (!BUILD.safari10 && importMeta !== '') {\n        opts.resourcesUrl = new URL('.', importMeta).href;\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    }\n    else if (BUILD.dynamicImportShim || BUILD.safari10) {\n        opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)).href;\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        if (BUILD.dynamicImportShim) {\n            patchDynamicImport(opts.resourcesUrl, scriptElm);\n        }\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        if (BUILD.dynamicImportShim && !win.customElements) {\n            // module support, but no custom elements support (Old Edge)\n            // @ts-ignore\n            return import(/* webpackChunkName: \"polyfills-dom\" */ './dom.js').then(() => opts);\n        }\n    }\n    return promiseResolve(opts);\n};\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst patchDynamicImport = (base, orgScriptElm) => {\n    const importFunctionName = getDynamicImportFunction(NAMESPACE);\n    try {\n        // test if this browser supports dynamic imports\n        // There is a caching issue in V8, that breaks using import() in Function\n        // By generating a random string, we can workaround it\n        // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info\n        win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);\n    }\n    catch (e) {\n        // this shim is specifically for browsers that do support \"esm\" imports\n        // however, they do NOT support \"dynamic\" imports\n        // basically this code is for old Edge, v18 and below\n        const moduleMap = new Map();\n        win[importFunctionName] = (src) => {\n            var _a;\n            const url = new URL(src, base).href;\n            let mod = moduleMap.get(url);\n            if (!mod) {\n                const script = doc.createElement('script');\n                script.type = 'module';\n                script.crossOrigin = orgScriptElm.crossOrigin;\n                script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {\n                    type: 'application/javascript',\n                }));\n                // Apply CSP nonce to the script tag if it exists\n                const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);\n                if (nonce != null) {\n                    script.setAttribute('nonce', nonce);\n                }\n                mod = new Promise((resolve) => {\n                    script.onload = () => {\n                        resolve(win[importFunctionName].m);\n                        script.remove();\n                    };\n                });\n                moduleMap.set(url, mod);\n                doc.head.appendChild(script);\n            }\n            return mod;\n        };\n    }\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n    HTMLElementPrototype.cloneNode = function (deep) {\n        if (this.nodeName === 'TEMPLATE') {\n            return nativeCloneNodeFn.call(this, deep);\n        }\n        const clonedNode = nativeCloneNodeFn.call(this, false);\n        const srcChildNodes = this.childNodes;\n        if (deep) {\n            for (let i = 0; i < srcChildNodes.length; i++) {\n                // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n                if (srcChildNodes[i].nodeType !== 2) {\n                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n                }\n            }\n        }\n        return clonedNode;\n    };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"sFAmBA,MAAMA,EAAe,KAkCjB,MAAMC,cAAyBC,IAC/B,MAAMC,EAAqE,GAiB3E,GAAuBF,IAAe,GAAI,CACtCE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,IAGrD,CAcI,OAAOC,EAAeJ,EAAK,ECrF/BH,IAAeQ,MAAKC,GAEXC,EAAcC,KAAAC,MAAA,oyfAAuCH"}
+{"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","options","bootstrapLazy","JSON","parse"],"sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v3.4.2 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, plt, win, doc, promiseResolve, H } from '@stencil/core';\n/**\n * Helper method for querying a `meta` tag that contains a nonce value\n * out of a DOM's head.\n *\n * @param doc The DOM containing the `head` to query against\n * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag\n * exists or the tag has no content.\n */\nfunction queryNonceMetaTagContent(doc) {\n    var _a, _b, _c;\n    return (_c = (_b = (_a = doc.head) === null || _a === void 0 ? void 0 : _a.querySelector('meta[name=\"csp-nonce\"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;\n}\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\\s|-/g, '_')}`;\nconst patchBrowser = () => {\n    // NOTE!! This fn cannot use async/await!\n    if (BUILD.isDev && !BUILD.isTesting) {\n        consoleDevInfo('Running in development mode.');\n    }\n    // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n    if (BUILD.cssVarShim) {\n        // shim css vars\n        // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n        plt.$cssShim$ = win.__cssshim;\n    }\n    if (BUILD.cloneNodeFix) {\n        // opted-in to polyfill cloneNode() for slot polyfilled components\n        patchCloneNodeFix(H.prototype);\n    }\n    if (BUILD.profile && !performance.mark) {\n        // not all browsers support performance.mark/measure (Safari 10)\n        // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,\n        // simply stub the implementations out.\n        // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)\n        // @ts-ignore\n        performance.mark = performance.measure = () => {\n            /*noop*/\n        };\n        performance.getEntriesByName = () => [];\n    }\n    // @ts-ignore\n    const scriptElm = \n    // TODO(STENCIL-661): Remove code related to the dynamic import shim\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    BUILD.scriptDataOpts || BUILD.safari10 || BUILD.dynamicImportShim\n        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n            s.getAttribute('data-stencil-namespace') === NAMESPACE)\n        : null;\n    const importMeta = import.meta.url;\n    const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {\n        // Safari < v11 support: This IF is true if it's Safari below v11.\n        // This fn cannot use async/await since Safari didn't support it until v11,\n        // however, Safari 10 did support modules. Safari 10 also didn't support \"nomodule\",\n        // so both the ESM file and nomodule file would get downloaded. Only Safari\n        // has 'onbeforeload' in the script, and \"history.scrollRestoration\" was added\n        // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.\n        // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.\n        return {\n            then() {\n                /* promise noop */\n            },\n        };\n    }\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    if (!BUILD.safari10 && importMeta !== '') {\n        opts.resourcesUrl = new URL('.', importMeta).href;\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    }\n    else if (BUILD.dynamicImportShim || BUILD.safari10) {\n        opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)).href;\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        if (BUILD.dynamicImportShim) {\n            patchDynamicImport(opts.resourcesUrl, scriptElm);\n        }\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        if (BUILD.dynamicImportShim && !win.customElements) {\n            // module support, but no custom elements support (Old Edge)\n            // @ts-ignore\n            return import(/* webpackChunkName: \"polyfills-dom\" */ './dom.js').then(() => opts);\n        }\n    }\n    return promiseResolve(opts);\n};\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst patchDynamicImport = (base, orgScriptElm) => {\n    const importFunctionName = getDynamicImportFunction(NAMESPACE);\n    try {\n        // test if this browser supports dynamic imports\n        // There is a caching issue in V8, that breaks using import() in Function\n        // By generating a random string, we can workaround it\n        // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info\n        win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);\n    }\n    catch (e) {\n        // this shim is specifically for browsers that do support \"esm\" imports\n        // however, they do NOT support \"dynamic\" imports\n        // basically this code is for old Edge, v18 and below\n        const moduleMap = new Map();\n        win[importFunctionName] = (src) => {\n            var _a;\n            const url = new URL(src, base).href;\n            let mod = moduleMap.get(url);\n            if (!mod) {\n                const script = doc.createElement('script');\n                script.type = 'module';\n                script.crossOrigin = orgScriptElm.crossOrigin;\n                script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {\n                    type: 'application/javascript',\n                }));\n                // Apply CSP nonce to the script tag if it exists\n                const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);\n                if (nonce != null) {\n                    script.setAttribute('nonce', nonce);\n                }\n                mod = new Promise((resolve) => {\n                    script.onload = () => {\n                        resolve(win[importFunctionName].m);\n                        script.remove();\n                    };\n                });\n                moduleMap.set(url, mod);\n                doc.head.appendChild(script);\n            }\n            return mod;\n        };\n    }\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n    HTMLElementPrototype.cloneNode = function (deep) {\n        if (this.nodeName === 'TEMPLATE') {\n            return nativeCloneNodeFn.call(this, deep);\n        }\n        const clonedNode = nativeCloneNodeFn.call(this, false);\n        const srcChildNodes = this.childNodes;\n        if (deep) {\n            for (let i = 0; i < srcChildNodes.length; i++) {\n                // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n                if (srcChildNodes[i].nodeType !== 2) {\n                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n                }\n            }\n        }\n        return clonedNode;\n    };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"sFAmBA,MAAMA,EAAe,KAkCjB,MAAMC,cAAyBC,IAC/B,MAAMC,EAAqE,GAiB3E,GAAuBF,IAAe,GAAI,CACtCE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,IAGrD,CAcI,OAAOC,EAAeJ,EAAK,ECrF/BH,IAAeQ,MAAKC,GAEXC,EAAcC,KAAAC,MAAA,s4fAAuCH"}

package/dist/test/elements/q2-calendar-test.e2e.js

@@ -167,6 +167,7 @@ describe('q2-calendar', () => {
       html: `<q2-calendar></q2-calendar>`,
     });
     await dispatchEvent(page, ['q2-calendar', '[test-id="inputAndCalendarToggle"]'], 'click');
+    await page.waitForChanges();
     const calendarContainer = await page.find('q2-calendar >>> click-elsewhere');
     expect(calendarContainer.classList.contains('dropdown-open')).toEqual(true);
     let message = await page.find('q2-calendar >>> q2-message');
@@ -245,48 +246,52 @@ describe('q2-calendar', () => {
   });
   describe('Props', () => {
     describe('popoverDirection', () => {
-      it('auto-determines the direction to be "up" when not provided and there is not enough space below', async () => {
-        page = await setup({
-          html: `<q2-calendar style="position:fixed; bottom: 100px"/>`,
+      describe('when provided', () => {
+        it('respects a value of "down" no matter the position in viewport', async () => {
+          page = await setup({
+            html: `<q2-calendar popover-direction="down" style="position:fixed; bottom: 100px"/>`,
+          });
+          popover = await page.find('q2-calendar >>> q2-popover');
+          expect(popover).toEqualAttribute('direction', 'down');
+          await dispatchEvent(page, ['q2-calendar', '[test-id="inputAndCalendarToggle"]'], 'click');
+          expect(popover.shadowRoot.querySelector('.container')).toHaveClass('down');
+          expect(popover.shadowRoot.querySelector('.container')).not.toHaveClass('up');
         });
-        popover = await page.find('q2-calendar >>> q2-popover');
-        expect(popover).not.toHaveAttribute('direction');
-        await dispatchEvent(page, ['q2-calendar', '[test-id="inputAndCalendarToggle"]'], 'click');
-        const popoverContainer = popover.shadowRoot.querySelector('.container');
-        expect(popoverContainer).not.toHaveClass('down');
-        expect(popoverContainer).toHaveClass('up');
-      });
-      it('auto-determines the direction to be "down" when not provided', async () => {
-        page = await setup({
-          html: `<q2-calendar/>`,
+        it('respects a value of "up" no matter the position in viewport', async () => {
+          page = await setup({
+            html: `<q2-calendar popover-direction="up"/>`,
+          });
+          popover = await page.find('q2-calendar >>> q2-popover');
+          expect(popover).toEqualAttribute('direction', 'up');
+          await dispatchEvent(page, ['q2-calendar', '[test-id="inputAndCalendarToggle"]'], 'click');
+          const popoverContainer = popover.shadowRoot.querySelector('.container');
+          expect(popoverContainer).not.toHaveClass('down');
+          expect(popoverContainer).toHaveClass('up');
         });
-        popover = await page.find('q2-calendar >>> q2-popover');
-        expect(popover).not.toHaveAttribute('direction');
-        await dispatchEvent(page, ['q2-calendar', '[test-id="inputAndCalendarToggle"]'], 'click');
-        const popoverContainer = popover.shadowRoot.querySelector('.container');
-        expect(popoverContainer).not.toHaveClass('up');
-        expect(popoverContainer).toHaveClass('down');
       });
-      it('respects a value of "up" no matter the position when defined', async () => {
-        page = await setup({
-          html: `<q2-calendar popover-direction="up"/>`,
+      describe('when not provided', () => {
+        it('auto-determines the direction to be "down" when element is on upper half of page', async () => {
+          page = await setup({
+            html: `<q2-calendar style="position: fixed; top: 10px;" />`,
+          });
+          popover = await page.find('q2-calendar >>> q2-popover');
+          expect(popover).not.toHaveAttribute('direction');
+          await dispatchEvent(page, ['q2-calendar', '[test-id="inputAndCalendarToggle"]'], 'click');
+          const popoverContainer = popover.shadowRoot.querySelector('.container');
+          expect(popoverContainer).not.toHaveClass('up');
+          expect(popoverContainer).toHaveClass('down');
         });
-        popover = await page.find('q2-calendar >>> q2-popover');
-        expect(popover).toEqualAttribute('direction', 'up');
-        await dispatchEvent(page, ['q2-calendar', '[test-id="inputAndCalendarToggle"]'], 'click');
-        const popoverContainer = popover.shadowRoot.querySelector('.container');
-        expect(popoverContainer).not.toHaveClass('down');
-        expect(popoverContainer).toHaveClass('up');
-      });
-      it('respects a value of "down" no matter the position when defined', async () => {
-        page = await setup({
-          html: `<q2-calendar popover-direction="down" style="position:fixed; bottom: 100px"/>`,
+        it('auto-determines the direction to be "up" when element is on lower half of page', async () => {
+          page = await setup({
+            html: `<q2-calendar style="position: fixed; bottom: 10px;" />`,
+          });
+          popover = await page.find('q2-calendar >>> q2-popover');
+          expect(popover).not.toHaveAttribute('direction');
+          await dispatchEvent(page, ['q2-calendar', '[test-id="inputAndCalendarToggle"]'], 'click');
+          const popoverContainer = popover.shadowRoot.querySelector('.container');
+          expect(popoverContainer).not.toHaveClass('down');
+          expect(popoverContainer).toHaveClass('up');
         });
-        popover = await page.find('q2-calendar >>> q2-popover');
-        expect(popover).toEqualAttribute('direction', 'down');
-        await dispatchEvent(page, ['q2-calendar', '[test-id="inputAndCalendarToggle"]'], 'click');
-        expect(popover.shadowRoot.querySelector('.container')).toHaveClass('down');
-        expect(popover.shadowRoot.querySelector('.container')).not.toHaveClass('up');
       });
     });
     describe('popoverAlignment', () => {
@@ -687,9 +692,10 @@ describe('q2-calendar', () => {
           });
         });
         describe('it should assume the year correctly based on today and assume value', () => {
-          it('it should be current year always with no assume provided', async () => {
+          it('should be current year always with no assume provided', async () => {
             const today = new Date();
-            const targetDate = new Date(today.getTime() - 3600 * 1000 * 24 * 3); // 3 days before
+            const targetDate = new Date();
+            targetDate.setDate(today.getDate() - 3); // 3 days before
             const [, mm, dd] = targetDate.toISOString().slice(0, 10).split('-');
             page = await setup({
               html: `
@@ -710,9 +716,10 @@ describe('q2-calendar', () => {
             expect(await innerInput.getProperty('value')).toEqual(`${mm}/${dd}/${today.getFullYear()}`);
             expect(await calendarField.getProperty('value')).toEqual(`${today.getFullYear()}-${mm}-${dd}`);
           });
-          it('it should be next year when typed value is earlier than today with assume=future', async () => {
+          it('should be next year when typed value is earlier than today with assume=future', async () => {
             const today = new Date();
-            const targetDate = new Date(today.getTime() - 3600 * 1000 * 24 * 1); // 1 day before
+            const targetDate = new Date();
+            targetDate.setDate(today.getDate() - 1); // 1 day before
             const [, mm, dd] = targetDate.toISOString().slice(0, 10).split('-');
             page = await setup({
               html: `
@@ -734,10 +741,17 @@ describe('q2-calendar', () => {
             expect(await innerInput.getProperty('value')).toEqual(`${mm}/${dd}/${today.getFullYear() + 1}`);
             expect(await calendarField.getProperty('value')).toEqual(`${today.getFullYear() + 1}-${mm}-${dd}`);
           });
-          it('it should be last year when typed value is later than today with assume=past', async () => {
+          it('should be last year when typed value is later than today with assume=past', async () => {
             const today = new Date();
-            const targetDate = new Date(today.getTime() + 3600 * 1000 * 24 * 3); // 3 days later
-            const [, mm, dd] = targetDate.toISOString().slice(0, 10).split('-');
+            const targetDate = new Date();
+            targetDate.setDate(today.getDate() + 3); // 3 days later
+            const targetOneYearAgo = new Date(targetDate);
+            targetOneYearAgo.setFullYear(targetDate.getFullYear() - 1); // 1 year before
+            const [, TARGET_MM, TARGET_DD] = targetDate.toISOString().slice(0, 10).split('-');
+            const [YEARAGO_YYYY, YEARAGO_MM, YEARAGO_DD] = targetOneYearAgo
+              .toISOString()
+              .slice(0, 10)
+              .split('-');
             page = await setup({
               html: `
                                 <q2-calendar
@@ -751,12 +765,12 @@ describe('q2-calendar', () => {
             const calendarField = await page.find('q2-calendar');
             innerInput = await page.find('q2-calendar >>> [test-id="inputAndCalendarToggle"]');
             await innerInput.click();
-            await innerInput.type(`${mm}${dd}`);
+            await innerInput.type(`${TARGET_MM}${TARGET_DD}`);
             await dispatchEvent(page, ['q2-calendar', '[test-id="inputAndCalendarToggle"]'], 'keyup', {
               key: 'Escape',
             });
-            expect(await innerInput.getProperty('value')).toEqual(`${mm}/${dd}/${today.getFullYear() - 1}`);
-            expect(await calendarField.getProperty('value')).toEqual(`${today.getFullYear() - 1}-${mm}-${dd}`);
+            expect(await innerInput.getProperty('value')).toEqual(`${YEARAGO_MM}/${YEARAGO_DD}/${YEARAGO_YYYY}`);
+            expect(await calendarField.getProperty('value')).toEqual(`${YEARAGO_YYYY}-${YEARAGO_MM}-${YEARAGO_DD}`);
           });
         });
       });
@@ -791,6 +805,17 @@ describe('q2-calendar', () => {
           expect(await innerInput.getProperty('value')).toEqual('02/01');
         });
       });
+      describe('when provided and blur', () => {
+        it('keep the value on blur event', async () => {
+          page = await setup({
+            html: `<q2-calendar value="2024-03-06" display-format="MM-DD-yyyy"></q2-calendar>`,
+          });
+          innerInput = await page.find('q2-calendar >>> [test-id="inputAndCalendarToggle"]');
+          await dispatchEvent(page, ['q2-calendar', 'q2-input', 'button'], 'blur');
+          await page.waitForChanges();
+          expect(await innerInput.getProperty('value')).toEqual('03-06-2024');
+        });
+      });
     });
     describe('when typeable for clear value test', () => {
       let page;
@@ -839,6 +864,43 @@ describe('q2-calendar', () => {
         expect(changeSpy).toHaveReceivedEventTimes(1);
       });
     });
+    describe('when non-typeable, clear button should be visible and working', () => {
+      let page;
+      beforeEach(async () => {
+        page = await setup({
+          html: `<q2-calendar clearable value="2023-10-20"></q2-calendar>`,
+        });
+        calendar = await page.find('q2-calendar');
+        innerInput = await page.find('q2-calendar >>> q2-input');
+        expect(await innerInput.getProperty('value')).toEqual('10/20/2023');
+        await innerInput.focus();
+      });
+      it('should be visible clear button', async () => {
+        const clearButtonTestId = async (page) => {
+          return page.$eval('q2-calendar', el => {
+            var _a;
+            return (_a = el.shadowRoot
+              .querySelector('q2-input')
+              .shadowRoot.querySelector('.btn-clear')) === null || _a === void 0 ? void 0 : _a.getAttribute('test-id');
+          });
+        };
+        expect(await clearButtonTestId(page)).toEqual('clearButton');
+      });
+      it('should fire change event on q2-calendar when clear button clicked', async () => {
+        const changeSpy = await calendar.spyOnEvent('change');
+        expect(changeSpy).toHaveReceivedEventTimes(0);
+        const clickClearButton = async (page) => {
+          return page.$eval('q2-calendar', el => {
+            return el.shadowRoot
+              .querySelector('q2-input')
+              .shadowRoot.querySelector('.btn-clear').click();
+          });
+        };
+        await clickClearButton(page);
+        expect(changeSpy).toHaveReceivedEventTimes(1);
+        expect(await calendar.getProperty('value')).toBeNull();
+      });
+    });
   });
   describe('Methods', () => {
     beforeEach(async () => {