@empathyco/x-components 3.0.0-alpha.55 → 3.0.0-alpha.56

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.0-alpha.56](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.55...@empathyco/x-components@3.0.0-alpha.56) (2022-02-15)
+
+### Bug Fixes
+
+- **decorators:** pending `debounced` execution is cancelled when the component is destroyed
+  ([27da789](https://github.com/empathyco/x/commit/27da789412804f3f768d07e8ffd846ea2df8553e)),
+  closes [EX-5215](https://searchbroker.atlassian.net/browse/EX-5215)
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 ## [3.0.0-alpha.55](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.54...@empathyco/x-components@3.0.0-alpha.55) (2022-02-10)
 
 **Note:** Version bump only for package @empathyco/x-components

package/design-system/full-theme.css

@@ -303,6 +303,16 @@
   --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
   --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
 }
+.x-button--tertiary.x-button,
+.x-button--tertiary .x-button {
+  --x-color-background-button-default: var(--x-color-background-button-tertiary);
+  --x-color-border-button-default: var(--x-color-border-button-tertiary);
+  --x-color-text-button-default: var(--x-color-text-button-tertiary);
+  --x-size-border-width-top-button-default: var(--x-size-border-width-top-button-tertiary);
+  --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-tertiary);
+  --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-tertiary);
+  --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-tertiary);
+}
 :root {
   --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
   --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
@@ -724,19 +734,6 @@
 :root {
   --x-size-width-dropdown-xl: 282px;
 }
-.x-facet--card.x-facet,
-.x-facet--card .x-facet {
-  --x-size-border-radius-facet-default: var(--x-size-border-radius-facet-card);
-  --x-size-border-radius-top-left-facet-default: var(--x-size-border-radius-facet-card);
-  --x-size-border-radius-top-right-facet-default: var(--x-size-border-radius-facet-card);
-  --x-size-border-radius-bottom-right-facet-default: var(--x-size-border-radius-facet-card);
-  --x-size-border-radius-bottom-left-facet-default: var(--x-size-border-radius-facet-card);
-  --x-size-padding-facet-header-default: var(--x-size-padding-facet-header-card);
-  --x-size-padding-top-facet-header-default: var(--x-size-padding-top-facet-header-card);
-  --x-size-padding-right-facet-header-default: var(--x-size-padding-right-facet-header-card);
-  --x-size-padding-bottom-facet-header-default: var(--x-size-padding-bottom-facet-header-card);
-  --x-size-padding-left-facet-header-default: var(--x-size-padding-left-facet-header-card);
-}
 :root {
   --x-size-border-radius-facet-card: var(--x-size-border-radius-base-s);
   --x-size-border-radius-top-left-facet-card: var(--x-size-border-radius-facet-card);
@@ -7506,13 +7503,16 @@
   text-transform: none;
 }
 
-.x-button--tertiary.x-button,
-.x-button--tertiary .x-button {
-  --x-color-background-button-default: var(--x-color-background-button-tertiary);
-  --x-color-border-button-default: var(--x-color-border-button-tertiary);
-  --x-color-text-button-default: var(--x-color-text-button-tertiary);
-  --x-size-border-width-top-button-default: var(--x-size-border-width-top-button-tertiary);
-  --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-tertiary);
-  --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-tertiary);
-  --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-tertiary);
+.x-facet--card.x-facet,
+.x-facet--card .x-facet {
+  --x-size-border-radius-facet-default: var(--x-size-border-radius-facet-card);
+  --x-size-border-radius-top-left-facet-default: var(--x-size-border-radius-facet-card);
+  --x-size-border-radius-top-right-facet-default: var(--x-size-border-radius-facet-card);
+  --x-size-border-radius-bottom-right-facet-default: var(--x-size-border-radius-facet-card);
+  --x-size-border-radius-bottom-left-facet-default: var(--x-size-border-radius-facet-card);
+  --x-size-padding-facet-header-default: var(--x-size-padding-facet-header-card);
+  --x-size-padding-top-facet-header-default: var(--x-size-padding-top-facet-header-card);
+  --x-size-padding-right-facet-header-default: var(--x-size-padding-right-facet-header-card);
+  --x-size-padding-bottom-facet-header-default: var(--x-size-padding-bottom-facet-header-card);
+  --x-size-padding-left-facet-header-default: var(--x-size-padding-left-facet-header-card);
 }

package/docs/API-reference/api/x-components.debounce.md

@@ -25,3 +25,7 @@ export declare function Debounce(debounceTimeInMs: number, debounceOptions?: Deb
 
 Decorator that applies debounce.
 
+## Remarks
+
+Pending debounced execution is cancelled when the component is destroyed.
+

package/js/components/decorators/debounce.decorators.js

@@ -4,6 +4,8 @@ import { debounce } from '../../utils/debounce.js';
 /**
  * Adds debounce to the method that the decorator is applied to.
  *
+ * @remarks Pending debounced execution is cancelled when the component is destroyed.
+ *
  * @param debounceTimeInMs - The time of debounce in ms.
  * @param debounceOptions - The options for the debounce strategy.
  *
@@ -18,6 +20,14 @@ function Debounce(debounceTimeInMs, debounceOptions = {}) {
         options.methods[key] = function debouncedWrapper(...args) {
             debouncedMethod(this, args);
         };
+        // eslint-disable-next-line @typescript-eslint/unbound-method
+        const originalBeforeDestroy = options.beforeDestroy;
+        Object.assign(options, {
+            beforeDestroy() {
+                originalBeforeDestroy?.apply(this);
+                debouncedMethod.cancel();
+            }
+        });
     });
 }
 

package/js/components/decorators/debounce.decorators.js.map

@@ -1 +1 @@
-{"version":3,"file":"debounce.decorators.js","sources":["../../../../src/components/decorators/debounce.decorators.ts"],"sourcesContent":["import { createDecorator } from 'vue-class-component';\nimport { debounce } from '../../utils/debounce';\nimport { AnyFunction, DebounceOptions, DecoratorFor } from '../../utils/types';\n\n/**\n * Adds debounce to the method that the decorator is applied to.\n *\n * @param debounceTimeInMs - The time of debounce in ms.\n * @param debounceOptions - The options for the debounce strategy.\n *\n * @returns Decorator that applies debounce.\n *\n * @public\n */\nexport function Debounce(\n  debounceTimeInMs: number,\n  debounceOptions: DebounceOptions = {}\n): DecoratorFor<AnyFunction> {\n  return createDecorator((options, key) => {\n    const originalMethod = options.methods![key];\n    const debouncedMethod = debounce(\n      (context: Vue, args: unknown[]) => originalMethod.call(context, ...args),\n      debounceTimeInMs,\n      debounceOptions\n    );\n\n    options.methods![key] = function debouncedWrapper(...args: unknown[]) {\n      debouncedMethod(this, args);\n    };\n  });\n}\n"],"names":[],"mappings":";;;AAIA;;;;;;;;;;SAUgB,QAAQ,CACtB,gBAAwB,EACxB,kBAAmC,EAAE;IAErC,OAAO,eAAe,CAAC,CAAC,OAAO,EAAE,GAAG;QAClC,MAAM,cAAc,GAAG,OAAO,CAAC,OAAQ,CAAC,GAAG,CAAC,CAAC;QAC7C,MAAM,eAAe,GAAG,QAAQ,CAC9B,CAAC,OAAY,EAAE,IAAe,KAAK,cAAc,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,EACxE,gBAAgB,EAChB,eAAe,CAChB,CAAC;QAEF,OAAO,CAAC,OAAQ,CAAC,GAAG,CAAC,GAAG,SAAS,gBAAgB,CAAC,GAAG,IAAe;YAClE,eAAe,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;SAC7B,CAAC;KACH,CAAC,CAAC;AACL;;;;"}
+{"version":3,"file":"debounce.decorators.js","sources":["../../../../src/components/decorators/debounce.decorators.ts"],"sourcesContent":["import { createDecorator } from 'vue-class-component';\nimport { debounce } from '../../utils/debounce';\nimport { AnyFunction, DebounceOptions, DecoratorFor } from '../../utils/types';\n\n/**\n * Adds debounce to the method that the decorator is applied to.\n *\n * @remarks Pending debounced execution is cancelled when the component is destroyed.\n *\n * @param debounceTimeInMs - The time of debounce in ms.\n * @param debounceOptions - The options for the debounce strategy.\n *\n * @returns Decorator that applies debounce.\n *\n * @public\n */\nexport function Debounce(\n  debounceTimeInMs: number,\n  debounceOptions: DebounceOptions = {}\n): DecoratorFor<AnyFunction> {\n  return createDecorator((options, key) => {\n    const originalMethod = options.methods![key];\n    const debouncedMethod = debounce(\n      (context: Vue, args: unknown[]) => originalMethod.call(context, ...args),\n      debounceTimeInMs,\n      debounceOptions\n    );\n\n    options.methods![key] = function debouncedWrapper(...args: unknown[]) {\n      debouncedMethod(this, args);\n    };\n\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const originalBeforeDestroy = options.beforeDestroy;\n    Object.assign(options, {\n      beforeDestroy(this: Vue) {\n        originalBeforeDestroy?.apply(this);\n        debouncedMethod.cancel();\n      }\n    });\n  });\n}\n"],"names":[],"mappings":";;;AAIA;;;;;;;;;;;;SAYgB,QAAQ,CACtB,gBAAwB,EACxB,kBAAmC,EAAE;IAErC,OAAO,eAAe,CAAC,CAAC,OAAO,EAAE,GAAG;QAClC,MAAM,cAAc,GAAG,OAAO,CAAC,OAAQ,CAAC,GAAG,CAAC,CAAC;QAC7C,MAAM,eAAe,GAAG,QAAQ,CAC9B,CAAC,OAAY,EAAE,IAAe,KAAK,cAAc,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,EACxE,gBAAgB,EAChB,eAAe,CAChB,CAAC;QAEF,OAAO,CAAC,OAAQ,CAAC,GAAG,CAAC,GAAG,SAAS,gBAAgB,CAAC,GAAG,IAAe;YAClE,eAAe,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;SAC7B,CAAC;;QAGF,MAAM,qBAAqB,GAAG,OAAO,CAAC,aAAa,CAAC;QACpD,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE;YACrB,aAAa;gBACX,qBAAqB,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;gBACnC,eAAe,CAAC,MAAM,EAAE,CAAC;aAC1B;SACF,CAAC,CAAC;KACJ,CAAC,CAAC;AACL;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "3.0.0-alpha.55",
+  "version": "3.0.0-alpha.56",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -127,5 +127,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "90b2c6a857456f4e73c258f4bbeb10a368edbafc"
+  "gitHead": "d6f224c70ef9c8c4c7a54acf4e128ca79c002bc7"
 }

package/report/x-components.api.json

@@ -8960,7 +8960,7 @@
         {
           "kind": "Function",
           "canonicalReference": "@empathyco/x-components!Debounce:function(1)",
-          "docComment": "/**\n * Adds debounce to the method that the decorator is applied to.\n *\n * @param debounceTimeInMs - The time of debounce in ms.\n *\n * @param debounceOptions - The options for the debounce strategy.\n *\n * @returns Decorator that applies debounce.\n *\n * @public\n */\n",
+          "docComment": "/**\n * Adds debounce to the method that the decorator is applied to.\n *\n * @remarks\n *\n * Pending debounced execution is cancelled when the component is destroyed.\n *\n * @param debounceTimeInMs - The time of debounce in ms.\n *\n * @param debounceOptions - The options for the debounce strategy.\n *\n * @returns Decorator that applies debounce.\n *\n * @public\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",

package/types/components/decorators/debounce.decorators.d.ts

@@ -2,6 +2,8 @@ import { AnyFunction, DebounceOptions, DecoratorFor } from '../../utils/types';
 /**
  * Adds debounce to the method that the decorator is applied to.
  *
+ * @remarks Pending debounced execution is cancelled when the component is destroyed.
+ *
  * @param debounceTimeInMs - The time of debounce in ms.
  * @param debounceOptions - The options for the debounce strategy.
  *

package/types/components/decorators/debounce.decorators.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"debounce.decorators.d.ts","sourceRoot":"","sources":["../../../../src/components/decorators/debounce.decorators.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE/E;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CACtB,gBAAgB,EAAE,MAAM,EACxB,eAAe,GAAE,eAAoB,GACpC,YAAY,CAAC,WAAW,CAAC,CAa3B"}
+{"version":3,"file":"debounce.decorators.d.ts","sourceRoot":"","sources":["../../../../src/components/decorators/debounce.decorators.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE/E;;;;;;;;;;;GAWG;AACH,wBAAgB,QAAQ,CACtB,gBAAgB,EAAE,MAAM,EACxB,eAAe,GAAE,eAAoB,GACpC,YAAY,CAAC,WAAW,CAAC,CAsB3B"}