ember-safe-button 3.2.1 → 4.0.0

package/LICENSE.md

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2019
+Copyright (c) 2025
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

package/README.md

@@ -1,17 +1,18 @@
-![ember-safe-button logo](/docs/public/logo.png) 
+![ember-safe-button logo](./public/logo.png)
 
 # ember-safe-button
 
-Provides a button for potentially dangerous actions that better needs a confirmation. First click unlocks the fuse, second then confirms. If no confirmation is provided, then the button returns the safety in place after a timeout.
+Provides a button for potentially dangerous actions that need confirmation. The
+first click unlocks the safety, the second confirms. If no confirmation is
+provided, the safety rolls back after a timeout.
 
+- Demo page: https://ember-safe-button.netlify.app
 
-Compatibility
-------------------------------------------------------------------------------
-
-* Ember.js v3.20 or above
-* Ember CLI v3.20 or above
-* Node.js v12 or above
+## Compatibility
 
+- Ember.js v5.8 or above
+- Embroider or ember-auto-import v2
+- Node.js v20.19+ for local development/builds
 
 ## Installation
 
@@ -19,40 +20,39 @@ Compatibility
 ember install ember-safe-button
 ```
 
-
 ## Usage
 
 Minimal example:
 
 ```hbs
-<SafeButton
-  @message="delete"
-  @onConfirm={{this.safeButtonClicked}}
-/>
+<SafeButton @message="delete" @onConfirm={{this.safeButtonClicked}} />
 ```
 
 Which will produce:
 
-![Example](/docs/public/demo.gif)
+![Example](./public/demo.gif)
 
 ## Documentation
 
-For many more examples and API design see [ember-safe-button documentation website](https://ember-safe-button.netlify.com).
+Run the demo app locally:
 
-## Contributing
+```
+pnpm start
+```
 
-See the [Contributing](CONTRIBUTING.md) guide for details.
+Build the demo app for static hosting:
 
-## Compatibility
+```
+pnpm demo:build
+```
 
-* Ember.js v3.16 or above
-* Ember CLI v2.13 or above
-* Node.js v10 or above
+## Contributing
+
+See the [Contributing](CONTRIBUTING.md) guide for details.
 
 ## Contributors
 
-- [Michal Bryxí](https://twitter.com/MichalBryxi)
-- [Karel Funda](https://twitter.com/fundix2)
+- [Michal Bryxí](https://mastodon.world/deck/@MichalBryxi)
 
 ## License
 
@@ -60,5 +60,6 @@ This project is licensed under the [MIT License](LICENSE.md).
 
 ## Attribution
 
-<div>Icons made by <a href="https://www.flaticon.com/authors/dinosoftlabs" title="DinosoftLabs">DinosoftLabs</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>
-<div>Icons made by <a href="https://www.flaticon.com/authors/surang" title="surang">surang</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>
+Icons made by [DinosoftLabs](https://www.flaticon.com/authors/dinosoftlabs) and
+[surang](https://www.flaticon.com/authors/surang) from
+[Flaticon](https://www.flaticon.com/).

package/addon-main.cjs

@@ -1,6 +1,4 @@
 'use strict';
 
-const path = require('path');
 const { addonV1Shim } = require('@embroider/addon-shim');
-
 module.exports = addonV1Shim(__dirname);

package/dist/components/safe-button/animations/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/safe-button/animations/index.js"],"sourcesContent":["import poing from './poing';\nimport slide from './slide';\nimport roll from './roll';\nimport flip from './flip';\nimport liftBars from './lift-bars';\nimport zoom from './zoom';\n\nexport default {\n  poing,\n  slide,\n  flip,\n  zoom,\n  roll,\n  'lift-bars': liftBars,\n};\n"],"names":["poing","slide","flip","zoom","roll","liftBars"],"mappings":";;;;;;;AAOA,yBAAe;EACbA,KAAK;EACLC,KAAK;EACLC,IAAI;EACJC,IAAI;EACJC,IAAI;AACJ,EAAA,WAAW,EAAEC;AACf,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/safe-button/animations/index.js"],"sourcesContent":["import poing from './poing.js';\nimport slide from './slide.js';\nimport roll from './roll.js';\nimport flip from './flip.js';\nimport liftBars from './lift-bars.js';\nimport zoom from './zoom.js';\n\nexport default {\n  poing,\n  slide,\n  flip,\n  zoom,\n  roll,\n  'lift-bars': liftBars,\n};\n"],"names":["poing","slide","flip","zoom","roll","liftBars"],"mappings":";;;;;;;AAOA,yBAAe;EACbA,KAAK;EACLC,KAAK;EACLC,IAAI;EACJC,IAAI;EACJC,IAAI;AACJ,EAAA,WAAW,EAAEC;AACf,CAAC;;;;"}

package/dist/components/safe-button/index.js

@@ -1,21 +1,22 @@
-import { _ as _applyDecoratedDescriptor, a as _initializerDefineProperty, b as _defineProperty } from '../../_rollupPluginBabelHelpers-hULyhLkN.js';
 import { buildTask } from 'ember-concurrency/async-arrow-runtime';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { assert } from '@ember/debug';
 import { action } from '@ember/object';
+import { hash } from '@ember/helper';
 import { timeout } from 'ember-concurrency';
 import embeddedAnimations from './animations/index.js';
+import SafetyComponent from '../safety/index.js';
+import TriggerComponent from '../trigger/index.js';
 import { SAFETY_STATUS } from '../../states.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
+import templateOnly from '@ember/component/template-only';
+import { g, i, n } from 'decorator-transforms/runtime-esm';
 
-var TEMPLATE = precompileTemplate("<div class=\'ember-safe-button\' ...attributes>\n  {{#if (has-block)}}\n    {{yield\n      (hash\n        trigger=(component\n          \'trigger\'\n          onClick=@onConfirm\n          safetyStatus=this.safetyStatus\n          displayedMessage=this.displayedMessage\n          webAnimations=this.webAnimations.trigger\n        )\n        safety=(component\n          \'safety\'\n          onClick=this.onUnlocking\n          safetyStatus=this.safetyStatus\n          displayedMessage=this.displayedMessage\n          webAnimations=this.webAnimations.safety\n        )\n      )\n    }}\n  {{else}}\n    <Trigger\n      @onClick={{@onConfirm}}\n      @safetyStatus={{this.safetyStatus}}\n      @displayedMessage={{this.displayedMessage}}\n      @webAnimations={{this.webAnimations.trigger}}\n    />\n    <Safety\n      @onClick={{this.onUnlocking}}\n      @safetyStatus={{this.safetyStatus}}\n      @displayedMessage={{this.displayedMessage}}\n      @webAnimations={{this.webAnimations.safety}}\n    />\n  {{/if}}\n</div>");
-
-var _class, _descriptor;
 const DEFAULT_TIMEOUT = 3000;
-const DEFAULT_ANIMATION = "slide";
-
+const DEFAULT_ANIMATION = 'slide';
+console.log('DEBUG: ember-safe-button loaded');
 /**
   Main component.
 
@@ -95,22 +96,20 @@ const DEFAULT_ANIMATION = "slide";
     }
   ```
  */
-let SafeButtonComponent = (_class = class SafeButtonComponent extends Component {
+class SafeButtonComponent extends Component {
   constructor() {
     super(...arguments);
-    _initializerDefineProperty(this, "safetyStatus", _descriptor, this);
-    _defineProperty(this, "triggerSafety", buildTask(() => ({
-      context: this,
-      generator: function* () {
-        yield timeout(this.timeout);
-        this.safetyStatus = SAFETY_STATUS.LOCKING;
-      }
-    }), null, "triggerSafety", null));
-    assert("@onConfirm attribute must be set", typeof this.args.onConfirm === "function");
+    assert('@onConfirm attribute must be set', typeof this.args.onConfirm === 'function');
+  }
+  static {
+    g(this.prototype, "safetyStatus", [tracked], function () {
+      return SAFETY_STATUS.LOCKED;
+    });
   }
+  #safetyStatus = (i(this, "safetyStatus"), void 0);
   get activeAnimation() {
     const animation = this.args.animation || DEFAULT_ANIMATION;
-    return typeof animation === "string" ? embeddedAnimations[animation] : animation;
+    return typeof animation === 'string' ? embeddedAnimations[animation] : animation;
   }
   get webAnimations() {
     const {
@@ -151,27 +150,59 @@ let SafeButtonComponent = (_class = class SafeButtonComponent extends Component
     return this.args.timeout || DEFAULT_TIMEOUT;
   }
   get displayedMessage() {
-    return this.args.message || "delete";
+    return this.args.message || 'delete';
   }
   onUnlocking() {
     this.safetyStatus = SAFETY_STATUS.UNLOCKING;
   }
+  static {
+    n(this.prototype, "onUnlocking", [action]);
+  }
   onUnlocked() {
     this.safetyStatus = SAFETY_STATUS.UNLOCKED;
     this.triggerSafety.perform();
   }
+  static {
+    n(this.prototype, "onUnlocked", [action]);
+  }
   onLocked() {
     this.safetyStatus = SAFETY_STATUS.LOCKED;
   }
-}, _descriptor = _applyDecoratedDescriptor(_class.prototype, "safetyStatus", [tracked], {
-  configurable: true,
-  enumerable: true,
-  writable: true,
-  initializer: function () {
-    return SAFETY_STATUS.LOCKED;
+  static {
+    n(this.prototype, "onLocked", [action]);
+  }
+  triggerSafety = buildTask(() => ({
+    context: this,
+    generator: function* () {
+      yield timeout(this.timeout);
+      this.safetyStatus = SAFETY_STATUS.LOCKING;
+    }
+  }), null, "triggerSafety", null);
+  triggerInstance = setComponentTemplate(precompileTemplate("<Trigger @onClick={{@onConfirm}} @safetyStatus={{this.safetyStatus}} @displayedMessage={{this.displayedMessage}} @webAnimations={{this.webAnimations.trigger}} />", {
+    strictMode: true,
+    scope: () => ({
+      Trigger: TriggerComponent,
+      this: this
+    })
+  }), templateOnly());
+  safetyInstance = setComponentTemplate(precompileTemplate("<Safety @onClick={{this.onUnlocking}} @safetyStatus={{this.safetyStatus}} @displayedMessage={{this.displayedMessage}} @webAnimations={{this.webAnimations.safety}} />", {
+    strictMode: true,
+    scope: () => ({
+      Safety: SafetyComponent,
+      this: this
+    })
+  }), templateOnly());
+  static {
+    setComponentTemplate(precompileTemplate("<div class=\"ember-safe-button\" ...attributes>\n  {{#if (has-block)}}\n    {{yield (hash trigger=(component Trigger onClick=@onConfirm safetyStatus=this.safetyStatus displayedMessage=this.displayedMessage webAnimations=this.webAnimations.trigger) safety=(component Safety onClick=this.onUnlocking safetyStatus=this.safetyStatus displayedMessage=this.displayedMessage webAnimations=this.webAnimations.safety))}}\n  {{else}}\n    <Trigger @onClick={{@onConfirm}} @safetyStatus={{this.safetyStatus}} @displayedMessage={{this.displayedMessage}} @webAnimations={{this.webAnimations.trigger}} />\n    <Safety @onClick={{this.onUnlocking}} @safetyStatus={{this.safetyStatus}} @displayedMessage={{this.displayedMessage}} @webAnimations={{this.webAnimations.safety}} />\n  {{/if}}\n</div>", {
+      strictMode: true,
+      scope: () => ({
+        hash,
+        Trigger: TriggerComponent,
+        Safety: SafetyComponent
+      })
+    }), this);
   }
-}), _applyDecoratedDescriptor(_class.prototype, "onUnlocking", [action], Object.getOwnPropertyDescriptor(_class.prototype, "onUnlocking"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "onUnlocked", [action], Object.getOwnPropertyDescriptor(_class.prototype, "onUnlocked"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "onLocked", [action], Object.getOwnPropertyDescriptor(_class.prototype, "onLocked"), _class.prototype), _class);
-setComponentTemplate(TEMPLATE, SafeButtonComponent);
+}
 
 export { SafeButtonComponent as default };
 //# sourceMappingURL=index.js.map

package/dist/components/safe-button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/safe-button/index.js"],"sourcesContent":["import Component from \"@glimmer/component\";\nimport { tracked } from \"@glimmer/tracking\";\nimport { assert } from \"@ember/debug\";\nimport { action } from \"@ember/object\";\n\nimport { timeout } from \"ember-concurrency\";\nimport { task } from \"ember-concurrency\";\n\nimport embeddedAnimations from \"./animations/index\";\nimport { SAFETY_STATUS } from \"../../states\";\n\nconst DEFAULT_TIMEOUT = 3000;\nconst DEFAULT_ANIMATION = \"slide\";\n\n/**\n  Main component.\n\n  ```hbs\n    <SafeButton\n      class=\"border-black\"\n      @animation={{this.animation}}\n      @message=\"Delete me\"\n      @timeout={{2000}}\n      @onConfirm={{action safeButtonClicked}} />\n  ```\n\n  ```\n    @class SafeButtonComponent\n    @param {string} [class=\"ember-safe-button\"] CSS class to be applied on the wrapping element.\n    @param {object} [animation=\"slid\"] Definition of animation; It can either be string and point to one of the pre-defined animations; Or it can be an object describing Web Animation API\n    @param {number} [timeout=3000] Number of millisenconds after which the safety rolls back over the trigger.\n    @param {string} [message=\"delete\"] Text to be printed on the buttons in case block is not provided.\n    @param {function} onConfirm - Action to trigger whenever user clicks the trigger.\n  ```\n\n  When trying to construct your own `@animation` object you can take inspiration from the simple `slide` animation. The thing to keep in mind is that these go directly as parameters to [element.animate()](https://developer.mozilla.org/en-US/docs/Web/API/Element/animate) and that there are in fact four animations of which always two fire at the same time:\n\n  - `safety.unlocking` and `trigger.unlocking`\n  - `safety.locking` and `trigger.locking`\n\n  ```js\n    {\n      safety: {\n        unlocking: {\n          keyframes: [\n            { transform: 'translateX(0)' },\n            { transform: 'translateX(-100%)' },\n          ],\n          options: {\n            duration: 1000,\n            fill: 'both',\n            easing: 'ease',\n          },\n        },\n        locking: {\n          keyframes: [\n            { transform: 'translateX(-100%)' },\n            { transform: 'translateX(0)' },\n          ],\n          options: {\n            duration: 1000,\n            fill: 'both',\n            easing: 'ease',\n          },\n        },\n      },\n      trigger: {\n        unlocking: {\n          keyframes: [\n            { transform: 'translateX(100%)' },\n            { transform: 'translateX(0)' },\n          ],\n          options: {\n            duration: 1000,\n            fill: 'both',\n            easing: 'ease',\n          },\n        },\n        locking: {\n          keyframes: [\n            { transform: 'translateX(0)' },\n            { transform: 'translateX(100%)' },\n          ],\n          options: {\n            duration: 1000,\n            fill: 'both',\n            easing: 'ease',\n          },\n        },\n      },\n    }\n  ```\n */\nexport default class SafeButtonComponent extends Component {\n  constructor() {\n    super(...arguments);\n\n    assert(\n      \"@onConfirm attribute must be set\",\n      typeof this.args.onConfirm === \"function\"\n    );\n  }\n\n  @tracked safetyStatus = SAFETY_STATUS.LOCKED;\n\n  get activeAnimation() {\n    const animation = this.args.animation || DEFAULT_ANIMATION;\n\n    return typeof animation === \"string\"\n      ? embeddedAnimations[animation]\n      : animation;\n  }\n\n  get webAnimations() {\n    const { activeAnimation, onUnlocked, onLocked } = this;\n\n    return {\n      safety: {\n        unlocking: ({ element }) => {\n          let animation = element.animate(\n            activeAnimation.safety.unlocking.keyframes,\n            activeAnimation.safety.unlocking.options\n          );\n          animation.onfinish = onUnlocked;\n        },\n        locking: ({ element }) => {\n          let animation = element.animate(\n            activeAnimation.safety.locking.keyframes,\n            activeAnimation.safety.locking.options\n          );\n          animation.onfinish = onLocked;\n        },\n      },\n      trigger: {\n        unlocking({ element }) {\n          element.animate(\n            activeAnimation.trigger.unlocking.keyframes,\n            activeAnimation.trigger.unlocking.options\n          );\n        },\n        locking({ element }) {\n          element.animate(\n            activeAnimation.trigger.locking.keyframes,\n            activeAnimation.trigger.locking.options\n          );\n        },\n      },\n    };\n  }\n\n  get timeout() {\n    return this.args.timeout || DEFAULT_TIMEOUT;\n  }\n\n  get displayedMessage() {\n    return this.args.message || \"delete\";\n  }\n\n  @action\n  onUnlocking() {\n    this.safetyStatus = SAFETY_STATUS.UNLOCKING;\n  }\n\n  @action\n  onUnlocked() {\n    this.safetyStatus = SAFETY_STATUS.UNLOCKED;\n    this.triggerSafety.perform();\n  }\n\n  @action\n  onLocked() {\n    this.safetyStatus = SAFETY_STATUS.LOCKED;\n  }\n\n  triggerSafety = task(async () => {\n    await timeout(this.timeout);\n    this.safetyStatus = SAFETY_STATUS.LOCKING;\n  });\n}\n"],"names":["DEFAULT_TIMEOUT","DEFAULT_ANIMATION","SafeButtonComponent","_class","Component","constructor","arguments","_initializerDefineProperty","_descriptor","_defineProperty","_buildTask","context","generator","timeout","safetyStatus","SAFETY_STATUS","LOCKING","assert","args","onConfirm","activeAnimation","animation","embeddedAnimations","webAnimations","onUnlocked","onLocked","safety","unlocking","element","animate","keyframes","options","onfinish","locking","trigger","displayedMessage","message","onUnlocking","UNLOCKING","UNLOCKED","triggerSafety","perform","LOCKED","_applyDecoratedDescriptor","prototype","tracked","configurable","enumerable","writable","initializer","action","Object","getOwnPropertyDescriptor","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;;;;;;;;;;AAWA,MAAMA,eAAe,GAAG,IAAI;AAC5B,MAAMC,iBAAiB,GAAG,OAAO;;AAEjC;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AA9EA,IA+EqBC,mBAAmB,IAAAC,MAAA,GAAzB,MAAMD,mBAAmB,SAASE,SAAS,CAAC;AACzDC,EAAAA,WAAWA,GAAG;IACZ,KAAK,CAAC,GAAGC,SAAS,CAAC;AAACC,IAAAA,0BAAA,uBAAAC,WAAA,EAAA,IAAA,CAAA;AAAAC,IAAAA,eAAA,wBAAAC,SAAA,CAAA,OAAA;MAAAC,OAAA,EAAA,IAAA;MAAAC,SAAA,EAAA,aA+EW;AAC/B,QAAA,MAAMC,OAAO,CAAC,IAAI,CAACA,OAAO,CAAC;AAC3B,QAAA,IAAI,CAACC,YAAY,GAAGC,aAAa,CAACC,OAAO;AAC3C,MAAA;AAAC,KAAA,CAAA,EAAA,IAAA,EAAA,eAAA,EAAA,IAAA,CAAA,CAAA;IAhFCC,MAAM,CACJ,kCAAkC,EAClC,OAAO,IAAI,CAACC,IAAI,CAACC,SAAS,KAAK,UACjC,CAAC;AACH,EAAA;EAIA,IAAIC,eAAeA,GAAG;IACpB,MAAMC,SAAS,GAAG,IAAI,CAACH,IAAI,CAACG,SAAS,IAAIpB,iBAAiB;IAE1D,OAAO,OAAOoB,SAAS,KAAK,QAAQ,GAChCC,kBAAkB,CAACD,SAAS,CAAC,GAC7BA,SAAS;AACf,EAAA;EAEA,IAAIE,aAAaA,GAAG;IAClB,MAAM;MAAEH,eAAe;MAAEI,UAAU;AAAEC,MAAAA;AAAS,KAAC,GAAG,IAAI;IAEtD,OAAO;AACLC,MAAAA,MAAM,EAAE;AACNC,QAAAA,SAAS,EAAEA,CAAC;AAAEC,UAAAA;AAAQ,SAAC,KAAK;UAC1B,IAAIP,SAAS,GAAGO,OAAO,CAACC,OAAO,CAC7BT,eAAe,CAACM,MAAM,CAACC,SAAS,CAACG,SAAS,EAC1CV,eAAe,CAACM,MAAM,CAACC,SAAS,CAACI,OACnC,CAAC;UACDV,SAAS,CAACW,QAAQ,GAAGR,UAAU;QACjC,CAAC;AACDS,QAAAA,OAAO,EAAEA,CAAC;AAAEL,UAAAA;AAAQ,SAAC,KAAK;UACxB,IAAIP,SAAS,GAAGO,OAAO,CAACC,OAAO,CAC7BT,eAAe,CAACM,MAAM,CAACO,OAAO,CAACH,SAAS,EACxCV,eAAe,CAACM,MAAM,CAACO,OAAO,CAACF,OACjC,CAAC;UACDV,SAAS,CAACW,QAAQ,GAAGP,QAAQ;AAC/B,QAAA;OACD;AACDS,MAAAA,OAAO,EAAE;AACPP,QAAAA,SAASA,CAAC;AAAEC,UAAAA;AAAQ,SAAC,EAAE;AACrBA,UAAAA,OAAO,CAACC,OAAO,CACbT,eAAe,CAACc,OAAO,CAACP,SAAS,CAACG,SAAS,EAC3CV,eAAe,CAACc,OAAO,CAACP,SAAS,CAACI,OACpC,CAAC;QACH,CAAC;AACDE,QAAAA,OAAOA,CAAC;AAAEL,UAAAA;AAAQ,SAAC,EAAE;AACnBA,UAAAA,OAAO,CAACC,OAAO,CACbT,eAAe,CAACc,OAAO,CAACD,OAAO,CAACH,SAAS,EACzCV,eAAe,CAACc,OAAO,CAACD,OAAO,CAACF,OAClC,CAAC;AACH,QAAA;AACF;KACD;AACH,EAAA;EAEA,IAAIlB,OAAOA,GAAG;AACZ,IAAA,OAAO,IAAI,CAACK,IAAI,CAACL,OAAO,IAAIb,eAAe;AAC7C,EAAA;EAEA,IAAImC,gBAAgBA,GAAG;AACrB,IAAA,OAAO,IAAI,CAACjB,IAAI,CAACkB,OAAO,IAAI,QAAQ;AACtC,EAAA;AAGAC,EAAAA,WAAWA,GAAG;AACZ,IAAA,IAAI,CAACvB,YAAY,GAAGC,aAAa,CAACuB,SAAS;AAC7C,EAAA;AAGAd,EAAAA,UAAUA,GAAG;AACX,IAAA,IAAI,CAACV,YAAY,GAAGC,aAAa,CAACwB,QAAQ;AAC1C,IAAA,IAAI,CAACC,aAAa,CAACC,OAAO,EAAE;AAC9B,EAAA;AAGAhB,EAAAA,QAAQA,GAAG;AACT,IAAA,IAAI,CAACX,YAAY,GAAGC,aAAa,CAAC2B,MAAM;AAC1C,EAAA;AAMF,CAAC,EAAAlC,WAAA,GAAAmC,yBAAA,CAAAxC,MAAA,CAAAyC,SAAA,EAAA,cAAA,EAAA,CA3EEC,OAAO,CAAA,EAAA;EAAAC,YAAA,EAAA,IAAA;EAAAC,UAAA,EAAA,IAAA;EAAAC,QAAA,EAAA,IAAA;AAAAC,EAAAA,WAAA,cAAA;IAAA,OAAgBlC,aAAa,CAAC2B,MAAM;AAAA,EAAA;AAAA,CAAA,CAAA,EAAAC,yBAAA,CAAAxC,MAAA,CAAAyC,SAAA,EAAA,aAAA,EAAA,CAuD3CM,MAAM,CAAA,EAAAC,MAAA,CAAAC,wBAAA,CAAAjD,MAAA,CAAAyC,SAAA,EAAA,aAAA,CAAA,EAAAzC,MAAA,CAAAyC,SAAA,CAAA,EAAAD,yBAAA,CAAAxC,MAAA,CAAAyC,SAAA,EAAA,YAAA,EAAA,CAKNM,MAAM,CAAA,EAAAC,MAAA,CAAAC,wBAAA,CAAAjD,MAAA,CAAAyC,SAAA,EAAA,YAAA,CAAA,EAAAzC,MAAA,CAAAyC,SAAA,CAAA,EAAAD,yBAAA,CAAAxC,MAAA,CAAAyC,SAAA,EAAA,UAAA,EAAA,CAMNM,MAAM,CAAA,EAAAC,MAAA,CAAAC,wBAAA,CAAAjD,MAAA,CAAAyC,SAAA,EAAA,UAAA,CAAA,EAAAzC,MAAA,CAAAyC,SAAA,CAAA,EAAAzC,MAAA;AA5E+BkD,oBAAA,CAAAC,QAAA,EAAnBpD,mBAAmB,CAAA;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/safe-button/index.gjs"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { assert } from '@ember/debug';\nimport { action } from '@ember/object';\nimport { hash } from '@ember/helper';\n\nimport { timeout } from 'ember-concurrency';\nimport { task } from 'ember-concurrency';\n\nimport embeddedAnimations from './animations/index.js';\nimport Safety from '../safety/index.gjs';\nimport Trigger from '../trigger/index.gjs';\nimport { SAFETY_STATUS } from '../../states.js';\n\nconst DEFAULT_TIMEOUT = 3000;\nconst DEFAULT_ANIMATION = 'slide';\nconsole.log('DEBUG: ember-safe-button loaded');\n\n/**\n  Main component.\n\n  ```hbs\n    <SafeButton\n      class=\"border-black\"\n      @animation={{this.animation}}\n      @message=\"Delete me\"\n      @timeout={{2000}}\n      @onConfirm={{action safeButtonClicked}} />\n  ```\n\n  ```\n    @class SafeButtonComponent\n    @param {string} [class=\"ember-safe-button\"] CSS class to be applied on the wrapping element.\n    @param {object} [animation=\"slid\"] Definition of animation; It can either be string and point to one of the pre-defined animations; Or it can be an object describing Web Animation API\n    @param {number} [timeout=3000] Number of millisenconds after which the safety rolls back over the trigger.\n    @param {string} [message=\"delete\"] Text to be printed on the buttons in case block is not provided.\n    @param {function} onConfirm - Action to trigger whenever user clicks the trigger.\n  ```\n\n  When trying to construct your own `@animation` object you can take inspiration from the simple `slide` animation. The thing to keep in mind is that these go directly as parameters to [element.animate()](https://developer.mozilla.org/en-US/docs/Web/API/Element/animate) and that there are in fact four animations of which always two fire at the same time:\n\n  - `safety.unlocking` and `trigger.unlocking`\n  - `safety.locking` and `trigger.locking`\n\n  ```js\n    {\n      safety: {\n        unlocking: {\n          keyframes: [\n            { transform: 'translateX(0)' },\n            { transform: 'translateX(-100%)' },\n          ],\n          options: {\n            duration: 1000,\n            fill: 'both',\n            easing: 'ease',\n          },\n        },\n        locking: {\n          keyframes: [\n            { transform: 'translateX(-100%)' },\n            { transform: 'translateX(0)' },\n          ],\n          options: {\n            duration: 1000,\n            fill: 'both',\n            easing: 'ease',\n          },\n        },\n      },\n      trigger: {\n        unlocking: {\n          keyframes: [\n            { transform: 'translateX(100%)' },\n            { transform: 'translateX(0)' },\n          ],\n          options: {\n            duration: 1000,\n            fill: 'both',\n            easing: 'ease',\n          },\n        },\n        locking: {\n          keyframes: [\n            { transform: 'translateX(0)' },\n            { transform: 'translateX(100%)' },\n          ],\n          options: {\n            duration: 1000,\n            fill: 'both',\n            easing: 'ease',\n          },\n        },\n      },\n    }\n  ```\n */\nexport default class SafeButtonComponent extends Component {\n  constructor() {\n    super(...arguments);\n\n    assert(\n      '@onConfirm attribute must be set',\n      typeof this.args.onConfirm === 'function',\n    );\n  }\n\n  @tracked safetyStatus = SAFETY_STATUS.LOCKED;\n\n  get activeAnimation() {\n    const animation = this.args.animation || DEFAULT_ANIMATION;\n\n    return typeof animation === 'string'\n      ? embeddedAnimations[animation]\n      : animation;\n  }\n\n  get webAnimations() {\n    const { activeAnimation, onUnlocked, onLocked } = this;\n\n    return {\n      safety: {\n        unlocking: ({ element }) => {\n          let animation = element.animate(\n            activeAnimation.safety.unlocking.keyframes,\n            activeAnimation.safety.unlocking.options,\n          );\n          animation.onfinish = onUnlocked;\n        },\n        locking: ({ element }) => {\n          let animation = element.animate(\n            activeAnimation.safety.locking.keyframes,\n            activeAnimation.safety.locking.options,\n          );\n          animation.onfinish = onLocked;\n        },\n      },\n      trigger: {\n        unlocking({ element }) {\n          element.animate(\n            activeAnimation.trigger.unlocking.keyframes,\n            activeAnimation.trigger.unlocking.options,\n          );\n        },\n        locking({ element }) {\n          element.animate(\n            activeAnimation.trigger.locking.keyframes,\n            activeAnimation.trigger.locking.options,\n          );\n        },\n      },\n    };\n  }\n\n  get timeout() {\n    return this.args.timeout || DEFAULT_TIMEOUT;\n  }\n\n  get displayedMessage() {\n    return this.args.message || 'delete';\n  }\n\n  @action\n  onUnlocking() {\n    this.safetyStatus = SAFETY_STATUS.UNLOCKING;\n  }\n\n  @action\n  onUnlocked() {\n    this.safetyStatus = SAFETY_STATUS.UNLOCKED;\n    this.triggerSafety.perform();\n  }\n\n  @action\n  onLocked() {\n    this.safetyStatus = SAFETY_STATUS.LOCKED;\n  }\n\n  triggerSafety = task(async () => {\n    await timeout(this.timeout);\n    this.safetyStatus = SAFETY_STATUS.LOCKING;\n  });\n\n  triggerInstance = <template>\n    <Trigger\n      @onClick={{@onConfirm}}\n      @safetyStatus={{this.safetyStatus}}\n      @displayedMessage={{this.displayedMessage}}\n      @webAnimations={{this.webAnimations.trigger}}\n    />\n  </template>;\n\n  safetyInstance = <template>\n    <Safety\n      @onClick={{this.onUnlocking}}\n      @safetyStatus={{this.safetyStatus}}\n      @displayedMessage={{this.displayedMessage}}\n      @webAnimations={{this.webAnimations.safety}}\n    />\n  </template>;\n\n  <template>\n    <div class=\"ember-safe-button\" ...attributes>\n      {{#if (has-block)}}\n        {{yield\n          (hash\n            trigger=(component\n              Trigger\n              onClick=@onConfirm\n              safetyStatus=this.safetyStatus\n              displayedMessage=this.displayedMessage\n              webAnimations=this.webAnimations.trigger\n            )\n            safety=(component\n              Safety\n              onClick=this.onUnlocking\n              safetyStatus=this.safetyStatus\n              displayedMessage=this.displayedMessage\n              webAnimations=this.webAnimations.safety\n            )\n          )\n        }}\n      {{else}}\n        <Trigger\n          @onClick={{@onConfirm}}\n          @safetyStatus={{this.safetyStatus}}\n          @displayedMessage={{this.displayedMessage}}\n          @webAnimations={{this.webAnimations.trigger}}\n        />\n        <Safety\n          @onClick={{this.onUnlocking}}\n          @safetyStatus={{this.safetyStatus}}\n          @displayedMessage={{this.displayedMessage}}\n          @webAnimations={{this.webAnimations.safety}}\n        />\n      {{/if}}\n    </div>\n  </template>\n}\n"],"names":["DEFAULT_TIMEOUT","DEFAULT_ANIMATION","console","log","SafeButtonComponent","Component","constructor","arguments","assert","args","onConfirm","g","prototype","tracked","SAFETY_STATUS","LOCKED","i","activeAnimation","animation","embeddedAnimations","webAnimations","onUnlocked","onLocked","safety","unlocking","element","animate","keyframes","options","onfinish","locking","trigger","timeout","displayedMessage","message","onUnlocking","safetyStatus","UNLOCKING","n","action","UNLOCKED","triggerSafety","perform","_buildTask","context","generator","LOCKING","triggerInstance","setComponentTemplate","precompileTemplate","strictMode","scope","Trigger","this","templateOnly","safetyInstance","Safety","hash"],"mappings":"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"}

package/dist/components/safety/index.js

@@ -1,11 +1,10 @@
-import { b as _defineProperty } from '../../_rollupPluginBabelHelpers-hULyhLkN.js';
 import Component from '@glimmer/component';
+import { on } from '@ember/modifier';
+import animateMe from '../../modifiers/animate-me.js';
 import { SAFETY_STATUS } from '../../states.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 
-var TEMPLATE = precompileTemplate("<button\n  class={{this.BASIC_CLASS}}\n  disabled={{this.isDisabled}}\n  aria-label={{this.ariaLabel}}\n  type=\'button\'\n  tabindex={{if this.isDisabled \'-1\' \'0\'}}\n  ...attributes\n  {{on \'click\' @onClick}}\n  {{animate-me\n    safetyStatus=@safetyStatus\n    webAnimations=@webAnimations\n    focusMe=this.focusMe\n  }}\n>\n  {{#if (has-block)}}\n    {{yield}}\n  {{else}}\n    {{@displayedMessage}}\n  {{/if}}\n</button>");
-
 const BASIC_CLASS = 'ember-safe-button-safety';
 const ARIA_LABELS = {
   [SAFETY_STATUS.LOCKED]: 'Deactivate safety',
@@ -13,7 +12,6 @@ const ARIA_LABELS = {
   [SAFETY_STATUS.UNLOCKED]: 'Safety not active',
   [SAFETY_STATUS.LOCKING]: 'Activating safety'
 };
-
 /**
   Safety is a component that covers the trigger.
 
@@ -30,10 +28,7 @@ const ARIA_LABELS = {
   @class SafetyComponent
  */
 class SafetyComponent extends Component {
-  constructor(...args) {
-    super(...args);
-    _defineProperty(this, "BASIC_CLASS", BASIC_CLASS);
-  }
+  BASIC_CLASS = BASIC_CLASS;
   get isDisabled() {
     return this.args.safetyStatus === SAFETY_STATUS.UNLOCKED;
   }
@@ -43,8 +38,16 @@ class SafetyComponent extends Component {
   get ariaLabel() {
     return ARIA_LABELS[this.args.safetyStatus];
   }
+  static {
+    setComponentTemplate(precompileTemplate("<button class={{this.BASIC_CLASS}} disabled={{this.isDisabled}} aria-label={{this.ariaLabel}} type=\"button\" tabindex={{if this.isDisabled \"-1\" \"0\"}} ...attributes {{on \"click\" @onClick}} {{animateMe safetyStatus=@safetyStatus webAnimations=@webAnimations focusMe=this.focusMe}}>\n  {{#if (has-block)}}\n    {{yield}}\n  {{else}}\n    {{@displayedMessage}}\n  {{/if}}\n</button>", {
+      strictMode: true,
+      scope: () => ({
+        on,
+        animateMe
+      })
+    }), this);
+  }
 }
-setComponentTemplate(TEMPLATE, SafetyComponent);
 
 export { ARIA_LABELS, BASIC_CLASS, SafetyComponent as default };
 //# sourceMappingURL=index.js.map

package/dist/components/safety/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/safety/index.js"],"sourcesContent":["import Component from '@glimmer/component';\n\nimport { SAFETY_STATUS } from '../../states';\n\nexport const BASIC_CLASS = 'ember-safe-button-safety';\nexport const ARIA_LABELS = {\n  [SAFETY_STATUS.LOCKED]: 'Deactivate safety',\n  [SAFETY_STATUS.UNLOCKING]: 'Deactivating safety',\n  [SAFETY_STATUS.UNLOCKED]: 'Safety not active',\n  [SAFETY_STATUS.LOCKING]: 'Activating safety',\n};\n\n/**\n  Safety is a component that covers the trigger.\n\n  ```hbs\n    <SafeButton\n      @onConfirm={{action safeButtonClicked}} as |button|\n    >\n      <button.safety class=\"bg-grey-light\">\n        This is safety\n      </button.safety>\n    </SafeButton>\n  ```\n\n  @class SafetyComponent\n */\nexport default class SafetyComponent extends Component {\n  BASIC_CLASS = BASIC_CLASS;\n\n  get isDisabled() {\n    return this.args.safetyStatus === SAFETY_STATUS.UNLOCKED;\n  }\n\n  get focusMe() {\n    return !this.isDisabled;\n  }\n\n  get ariaLabel() {\n    return ARIA_LABELS[this.args.safetyStatus];\n  }\n}\n"],"names":["BASIC_CLASS","ARIA_LABELS","SAFETY_STATUS","LOCKED","UNLOCKING","UNLOCKED","LOCKING","SafetyComponent","Component","constructor","args","_defineProperty","isDisabled","safetyStatus","focusMe","ariaLabel","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;;;AAIO,MAAMA,WAAW,GAAG;AACpB,MAAMC,WAAW,GAAG;AACzB,EAAA,CAACC,aAAa,CAACC,MAAM,GAAG,mBAAmB;AAC3C,EAAA,CAACD,aAAa,CAACE,SAAS,GAAG,qBAAqB;AAChD,EAAA,CAACF,aAAa,CAACG,QAAQ,GAAG,mBAAmB;EAC7C,CAACH,aAAa,CAACI,OAAO,GAAG;AAC3B;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACe,MAAMC,eAAe,SAASC,SAAS,CAAC;AAAAC,EAAAA,WAAAA,CAAA,GAAAC,IAAA,EAAA;AAAA,IAAA,KAAA,CAAA,GAAAA,IAAA,CAAA;AAAAC,IAAAA,eAAA,sBACvCX,WAAW,CAAA;AAAA,EAAA;EAEzB,IAAIY,UAAUA,GAAG;IACf,OAAO,IAAI,CAACF,IAAI,CAACG,YAAY,KAAKX,aAAa,CAACG,QAAQ;AAC1D,EAAA;EAEA,IAAIS,OAAOA,GAAG;IACZ,OAAO,CAAC,IAAI,CAACF,UAAU;AACzB,EAAA;EAEA,IAAIG,SAASA,GAAG;AACd,IAAA,OAAOd,WAAW,CAAC,IAAI,CAACS,IAAI,CAACG,YAAY,CAAC;AAC5C,EAAA;AACF;AAACG,oBAAA,CAAAC,QAAA,EAdoBV,eAAe,CAAA;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/safety/index.gjs"],"sourcesContent":["import Component from '@glimmer/component';\n\nimport { on } from '@ember/modifier';\nimport animateMe from '../../modifiers/animate-me.js';\nimport { SAFETY_STATUS } from '../../states.js';\n\nexport const BASIC_CLASS = 'ember-safe-button-safety';\nexport const ARIA_LABELS = {\n  [SAFETY_STATUS.LOCKED]: 'Deactivate safety',\n  [SAFETY_STATUS.UNLOCKING]: 'Deactivating safety',\n  [SAFETY_STATUS.UNLOCKED]: 'Safety not active',\n  [SAFETY_STATUS.LOCKING]: 'Activating safety',\n};\n\n/**\n  Safety is a component that covers the trigger.\n\n  ```hbs\n    <SafeButton\n      @onConfirm={{action safeButtonClicked}} as |button|\n    >\n      <button.safety class=\"bg-grey-light\">\n        This is safety\n      </button.safety>\n    </SafeButton>\n  ```\n\n  @class SafetyComponent\n */\nexport default class SafetyComponent extends Component {\n  BASIC_CLASS = BASIC_CLASS;\n\n  get isDisabled() {\n    return this.args.safetyStatus === SAFETY_STATUS.UNLOCKED;\n  }\n\n  get focusMe() {\n    return !this.isDisabled;\n  }\n\n  get ariaLabel() {\n    return ARIA_LABELS[this.args.safetyStatus];\n  }\n\n  <template>\n    <button\n      class={{this.BASIC_CLASS}}\n      disabled={{this.isDisabled}}\n      aria-label={{this.ariaLabel}}\n      type=\"button\"\n      tabindex={{if this.isDisabled \"-1\" \"0\"}}\n      ...attributes\n      {{on \"click\" @onClick}}\n      {{animateMe\n        safetyStatus=@safetyStatus\n        webAnimations=@webAnimations\n        focusMe=this.focusMe\n      }}\n    >\n      {{#if (has-block)}}\n        {{yield}}\n      {{else}}\n        {{@displayedMessage}}\n      {{/if}}\n    </button>\n  </template>\n}\n"],"names":["BASIC_CLASS","ARIA_LABELS","SAFETY_STATUS","LOCKED","UNLOCKING","UNLOCKED","LOCKING","SafetyComponent","Component","isDisabled","args","safetyStatus","focusMe","ariaLabel","setComponentTemplate","precompileTemplate","strictMode","scope","on","animateMe"],"mappings":";;;;;;;AAMO,MAAMA,cAAc;AACpB,MAAMC,WAAA,GAAc;AACzB,EAAA,CAACC,aAAA,CAAcC,MAAM,GAAG,mBAAA;AACxB,EAAA,CAACD,aAAA,CAAcE,SAAS,GAAG,qBAAA;AAC3B,EAAA,CAACF,aAAA,CAAcG,QAAQ,GAAG,mBAAA;EAC1B,CAACH,aAAA,CAAcI,OAAO,GAAG;AAC3B;AAEA;;;;;;;;;;;;;;;AAee,MAAMC,eAAA,SAAwBC,SAAA,CAAA;AAC3CR,EAAAA,WAAA,GAAcA,WAAA;EAEd,IAAIS,UAAAA,GAAa;IACf,OAAO,IAAI,CAACC,IAAI,CAACC,YAAY,KAAKT,cAAcG,QAAQ;AAC1D,EAAA;EAEA,IAAIO,OAAAA,GAAU;IACZ,OAAO,CAAC,IAAI,CAACH,UAAU;AACzB,EAAA;EAEA,IAAII,SAAAA,GAAY;AACd,IAAA,OAAOZ,WAAW,CAAC,IAAI,CAACS,IAAI,CAACC,YAAY,CAAC;AAC5C,EAAA;AAEA,EAAA;IAAAG,oBAAA,CAAAC,kBAAA,CAAA,mYAAA,EAqBA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,EAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;;;"}

package/dist/components/trigger/index.js

@@ -1,13 +1,11 @@
-import { b as _defineProperty } from '../../_rollupPluginBabelHelpers-hULyhLkN.js';
 import Component from '@glimmer/component';
+import { on } from '@ember/modifier';
+import animateMe from '../../modifiers/animate-me.js';
 import { SAFETY_STATUS } from '../../states.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 
-var TEMPLATE = precompileTemplate("<button\n  class={{this.BASIC_CLASS}}\n  disabled={{this.isDisabled}}\n  aria-label=\'Confirm action\'\n  type=\'button\'\n  tabindex={{if this.isDisabled \'-1\' \'0\'}}\n  ...attributes\n  {{on \'click\' @onClick}}\n  {{animate-me\n    safetyStatus=@safetyStatus\n    webAnimations=@webAnimations\n    focusMe=this.focusMe\n  }}\n>\n  {{#if (has-block)}}\n    {{yield}}\n  {{else}}\n    {{@displayedMessage}}\n  {{/if}}\n</button>");
-
 const BASIC_CLASS = 'ember-safe-button-trigger';
-
 /**
   Trigger is a component that is by default covered by safety and triggers the action passed to <SafeButton> when clicked.
 
@@ -24,18 +22,23 @@ const BASIC_CLASS = 'ember-safe-button-trigger';
   @class SafetyComponent
  */
 class TriggerComponent extends Component {
-  constructor(...args) {
-    super(...args);
-    _defineProperty(this, "BASIC_CLASS", BASIC_CLASS);
-  }
+  BASIC_CLASS = BASIC_CLASS;
   get isDisabled() {
     return this.args.safetyStatus !== SAFETY_STATUS.UNLOCKED;
   }
   get focusMe() {
     return !this.isDisabled;
   }
+  static {
+    setComponentTemplate(precompileTemplate("<button class={{this.BASIC_CLASS}} disabled={{this.isDisabled}} aria-label=\"Confirm action\" type=\"button\" tabindex={{if this.isDisabled \"-1\" \"0\"}} ...attributes {{on \"click\" @onClick}} {{animateMe safetyStatus=@safetyStatus webAnimations=@webAnimations focusMe=this.focusMe}}>\n  {{#if (has-block)}}\n    {{yield}}\n  {{else}}\n    {{@displayedMessage}}\n  {{/if}}\n</button>", {
+      strictMode: true,
+      scope: () => ({
+        on,
+        animateMe
+      })
+    }), this);
+  }
 }
-setComponentTemplate(TEMPLATE, TriggerComponent);
 
 export { BASIC_CLASS, TriggerComponent as default };
 //# sourceMappingURL=index.js.map

package/dist/components/trigger/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/trigger/index.js"],"sourcesContent":["import Component from '@glimmer/component';\n\nimport { SAFETY_STATUS } from '../../states';\n\nexport const BASIC_CLASS = 'ember-safe-button-trigger';\n\n/**\n  Trigger is a component that is by default covered by safety and triggers the action passed to <SafeButton> when clicked.\n\n  ```hbs\n    <SafeButton\n      @onConfirm={{action safeButtonClicked}} as |button|\n    >\n      <button.trigger class=\"bg-red-dark\">\n        Trigger\n      </button.trigger>\n    </SafeButton>\n  ```\n\n  @class SafetyComponent\n */\nexport default class TriggerComponent extends Component {\n  BASIC_CLASS = BASIC_CLASS;\n\n  get isDisabled() {\n    return this.args.safetyStatus !== SAFETY_STATUS.UNLOCKED;\n  }\n\n  get focusMe() {\n    return !this.isDisabled;\n  }\n}\n"],"names":["BASIC_CLASS","TriggerComponent","Component","constructor","args","_defineProperty","isDisabled","safetyStatus","SAFETY_STATUS","UNLOCKED","focusMe","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;;;AAIO,MAAMA,WAAW,GAAG;;AAE3B;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACe,MAAMC,gBAAgB,SAASC,SAAS,CAAC;AAAAC,EAAAA,WAAAA,CAAA,GAAAC,IAAA,EAAA;AAAA,IAAA,KAAA,CAAA,GAAAA,IAAA,CAAA;AAAAC,IAAAA,eAAA,sBACxCL,WAAW,CAAA;AAAA,EAAA;EAEzB,IAAIM,UAAUA,GAAG;IACf,OAAO,IAAI,CAACF,IAAI,CAACG,YAAY,KAAKC,aAAa,CAACC,QAAQ;AAC1D,EAAA;EAEA,IAAIC,OAAOA,GAAG;IACZ,OAAO,CAAC,IAAI,CAACJ,UAAU;AACzB,EAAA;AACF;AAACK,oBAAA,CAAAC,QAAA,EAVoBX,gBAAgB,CAAA;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/trigger/index.gjs"],"sourcesContent":["import Component from '@glimmer/component';\nimport { on } from '@ember/modifier';\nimport animateMe from '../../modifiers/animate-me.js';\n\nimport { SAFETY_STATUS } from '../../states.js';\n\nexport const BASIC_CLASS = 'ember-safe-button-trigger';\n\n/**\n  Trigger is a component that is by default covered by safety and triggers the action passed to <SafeButton> when clicked.\n\n  ```hbs\n    <SafeButton\n      @onConfirm={{action safeButtonClicked}} as |button|\n    >\n      <button.trigger class=\"bg-red-dark\">\n        Trigger\n      </button.trigger>\n    </SafeButton>\n  ```\n\n  @class SafetyComponent\n */\nexport default class TriggerComponent extends Component {\n  BASIC_CLASS = BASIC_CLASS;\n\n  get isDisabled() {\n    return this.args.safetyStatus !== SAFETY_STATUS.UNLOCKED;\n  }\n\n  get focusMe() {\n    return !this.isDisabled;\n  }\n\n  <template>\n    <button\n      class={{this.BASIC_CLASS}}\n      disabled={{this.isDisabled}}\n      aria-label=\"Confirm action\"\n      type=\"button\"\n      tabindex={{if this.isDisabled \"-1\" \"0\"}}\n      ...attributes\n      {{on \"click\" @onClick}}\n      {{animateMe\n        safetyStatus=@safetyStatus\n        webAnimations=@webAnimations\n        focusMe=this.focusMe\n      }}\n    >\n      {{#if (has-block)}}\n        {{yield}}\n      {{else}}\n        {{@displayedMessage}}\n      {{/if}}\n    </button>\n  </template>\n}\n"],"names":["BASIC_CLASS","TriggerComponent","Component","isDisabled","args","safetyStatus","SAFETY_STATUS","UNLOCKED","focusMe","setComponentTemplate","precompileTemplate","strictMode","scope","on","animateMe"],"mappings":";;;;;;;AAMO,MAAMA,cAAc;AAE3B;;;;;;;;;;;;;;;AAee,MAAMC,gBAAA,SAAyBC,SAAA,CAAA;AAC5CF,EAAAA,WAAA,GAAcA,WAAA;EAEd,IAAIG,UAAAA,GAAa;IACf,OAAO,IAAI,CAACC,IAAI,CAACC,YAAY,KAAKC,cAAcC,QAAQ;AAC1D,EAAA;EAEA,IAAIC,OAAAA,GAAU;IACZ,OAAO,CAAC,IAAI,CAACL,UAAU;AACzB,EAAA;AAEA,EAAA;IAAAM,oBAAA,CAAAC,kBAAA,CAAA,mYAAA,EAqBA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,EAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;;;"}

package/dist/index.js

@@ -1,2 +1,4 @@
-
+export { default as Trigger } from './components/trigger/index.js';
+export { default as Safety } from './components/safety/index.js';
+export { default as SafeButton } from './components/safe-button/index.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/modifiers/animate-me.js.map

@@ -1 +1 @@
-{"version":3,"file":"animate-me.js","sources":["../../src/modifiers/animate-me.js"],"sourcesContent":["import { modifier } from 'ember-modifier';\n\nimport { SAFETY_STATUS } from '../states';\n\nexport default modifier(\n  (element, _, named) => {\n    if (named.focusMe) {\n      element.focus();\n    }\n\n    if (named.safetyStatus === SAFETY_STATUS.UNLOCKING) {\n      named.webAnimations.unlocking({\n        element,\n      });\n    } else if (named.safetyStatus === SAFETY_STATUS.LOCKING) {\n      named.webAnimations.locking({\n        element,\n      });\n    }\n  },\n  { eager: false }\n);\n"],"names":["modifier","element","_","named","focusMe","focus","safetyStatus","SAFETY_STATUS","UNLOCKING","webAnimations","unlocking","LOCKING","locking","eager"],"mappings":";;;AAIA,gBAAeA,QAAQ,CACrB,CAACC,OAAO,EAAEC,CAAC,EAAEC,KAAK,KAAK;EACrB,IAAIA,KAAK,CAACC,OAAO,EAAE;IACjBH,OAAO,CAACI,KAAK,EAAE;AACjB,EAAA;AAEA,EAAA,IAAIF,KAAK,CAACG,YAAY,KAAKC,aAAa,CAACC,SAAS,EAAE;AAClDL,IAAAA,KAAK,CAACM,aAAa,CAACC,SAAS,CAAC;AAC5BT,MAAAA;AACF,KAAC,CAAC;EACJ,CAAC,MAAM,IAAIE,KAAK,CAACG,YAAY,KAAKC,aAAa,CAACI,OAAO,EAAE;AACvDR,IAAAA,KAAK,CAACM,aAAa,CAACG,OAAO,CAAC;AAC1BX,MAAAA;AACF,KAAC,CAAC;AACJ,EAAA;AACF,CAAC,EACD;AAAEY,EAAAA,KAAK,EAAE;AAAM,CACjB,CAAC;;;;"}
+{"version":3,"file":"animate-me.js","sources":["../../src/modifiers/animate-me.js"],"sourcesContent":["import { modifier } from 'ember-modifier';\n\nimport { SAFETY_STATUS } from '../states.js';\n\nexport default modifier(\n  (element, _, named) => {\n    if (named.focusMe) {\n      element.focus();\n    }\n\n    if (named.safetyStatus === SAFETY_STATUS.UNLOCKING) {\n      named.webAnimations.unlocking({\n        element,\n      });\n    } else if (named.safetyStatus === SAFETY_STATUS.LOCKING) {\n      named.webAnimations.locking({\n        element,\n      });\n    }\n  },\n  { eager: false },\n);\n"],"names":["modifier","element","_","named","focusMe","focus","safetyStatus","SAFETY_STATUS","UNLOCKING","webAnimations","unlocking","LOCKING","locking","eager"],"mappings":";;;AAIA,gBAAeA,QAAQ,CACrB,CAACC,OAAO,EAAEC,CAAC,EAAEC,KAAK,KAAK;EACrB,IAAIA,KAAK,CAACC,OAAO,EAAE;IACjBH,OAAO,CAACI,KAAK,EAAE;AACjB,EAAA;AAEA,EAAA,IAAIF,KAAK,CAACG,YAAY,KAAKC,aAAa,CAACC,SAAS,EAAE;AAClDL,IAAAA,KAAK,CAACM,aAAa,CAACC,SAAS,CAAC;AAC5BT,MAAAA;AACF,KAAC,CAAC;EACJ,CAAC,MAAM,IAAIE,KAAK,CAACG,YAAY,KAAKC,aAAa,CAACI,OAAO,EAAE;AACvDR,IAAAA,KAAK,CAACM,aAAa,CAACG,OAAO,CAAC;AAC1BX,MAAAA;AACF,KAAC,CAAC;AACJ,EAAA;AACF,CAAC,EACD;AAAEY,EAAAA,KAAK,EAAE;AAAM,CACjB,CAAC;;;;"}

package/package.json

@@ -1,64 +1,90 @@
 {
   "name": "ember-safe-button",
-  "version": "3.2.1",
+  "version": "4.0.0",
   "description": "For potentially dangerous actions that better needs a confirmation.",
+  "keywords": [
+    "ember-addon"
+  ],
   "repository": "https://gitlab.com/michal-bryxi/open-source/ember-safe-button",
   "license": "MIT",
   "author": "",
+  "imports": {
+    "#src/*": "./src/*"
+  },
   "exports": {
-    ".": "./dist/index.js",
-    "./*": "./dist/*",
-    "./addon-main.js": "./addon-main.js"
+    ".": {
+      "default": "./dist/index.js"
+    },
+    "./addon-main.js": "./addon-main.cjs",
+    "./*.css": "./dist/*.css",
+    "./*": {
+      "default": "./dist/*.js"
+    }
   },
   "files": [
-    "dist",
     "addon-main.cjs",
-    "CHANGELOG.md",
-    "README.md"
+    "declarations",
+    "dist",
+    "src"
   ],
   "dependencies": {
-    "@ember/render-modifiers": "2.1.0",
-    "@embroider/addon-shim": "1.10.2",
-    "ember-cli-htmlbars": "^6.2.0",
+    "@ember/render-modifiers": "3.0.0",
+    "@embroider/addon-shim": "^1.10.2",
+    "decorator-transforms": "^2.2.2",
     "ember-concurrency": "5.1.0",
-    "ember-modifier": "4.1.0"
+    "ember-modifier": "4.2.2"
   },
   "devDependencies": {
-    "@babel/core": "7.23.2",
-    "@babel/plugin-proposal-class-properties": "7.18.6",
-    "@babel/plugin-proposal-decorators": "7.23.2",
-    "@babel/plugin-syntax-decorators": "7.22.10",
-    "@embroider/addon-dev": "8.1.2",
-    "@nullvoxpopuli/eslint-configs": "2.3.5",
-    "@rollup/plugin-babel": "6.0.4",
-    "babel-eslint": "10.1.0",
-    "concurrently": "7.6.0",
-    "eslint": "^7.0.0",
-    "eslint-config-prettier": "8.5.0",
-    "eslint-plugin-decorator-position": "4.0.1",
-    "eslint-plugin-ember": "10.6.1",
-    "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-json": "3.1.0",
-    "eslint-plugin-node": "11.1.0",
-    "@ember/string": "3.1.1",
-    "eslint-plugin-prettier": "4.2.1",
-    "webpack": "^5.88.1",
-    "eslint-plugin-simple-import-sort": "7.0.0",
-    "rollup": "4.54.0"
-  },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org"
+    "@babel/core": "^7.25.2",
+    "@babel/eslint-parser": "^7.25.1",
+    "@babel/runtime": "^7.25.6",
+    "@ember/app-tsconfig": "^1.0.3",
+    "@ember/library-tsconfig": "^1.0.0",
+    "@ember/test-helpers": "^5.2.1",
+    "@ember/test-waiters": "^4.1.1",
+    "@embroider/addon-dev": "^8.1.0",
+    "@embroider/compat": "^4.1.0",
+    "@embroider/core": "^4.1.0",
+    "@embroider/macros": "^1.18.0",
+    "@embroider/vite": "^1.1.5",
+    "@eslint/js": "^9.17.0",
+    "@glimmer/component": "^2.0.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@tailwindcss/vite": "^4.0.0",
+    "babel-plugin-ember-template-compilation": "^2.2.5",
+    "concurrently": "^9.0.1",
+    "ember-concurrency": "5.1.0",
+    "ember-modifier": "4.2.2",
+    "ember-page-title": "^9.0.3",
+    "ember-qunit": "^9.0.2",
+    "ember-source": "^6.7.0",
+    "ember-strict-application-resolver": "^0.1.0",
+    "ember-template-lint": "^7.9.0",
+    "eslint": "^9.17.0",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-ember": "^12.3.3",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-n": "^17.15.1",
+    "globals": "^16.1.0",
+    "netlify-cli": "^23.13.0",
+    "node-gyp": "^12.1.0",
+    "prettier": "^3.4.2",
+    "prettier-plugin-ember-template-tag": "^2.0.4",
+    "qunit": "^2.24.1",
+    "qunit-dom": "^3.4.0",
+    "rollup": "^4.22.5",
+    "sinon": "^21.0.1",
+    "tailwindcss": "^4.0.0",
+    "testem": "^3.15.1",
+    "vite": "^7.1.9"
   },
   "ember": {
     "edition": "octane"
   },
-  "keywords": [
-    "ember-addon"
-  ],
   "ember-addon": {
     "version": 2,
     "type": "addon",
-    "main": "./addon-main.cjs",
+    "main": "addon-main.cjs",
     "app-js": {
       "./components/safe-button/animations/flip.js": "./dist/_app_/components/safe-button/animations/flip.js",
       "./components/safe-button/animations/index.js": "./dist/_app_/components/safe-button/animations/index.js",
@@ -73,22 +99,18 @@
       "./modifiers/animate-me.js": "./dist/_app_/modifiers/animate-me.js"
     }
   },
-  "engines": {
-    "node": "12.* || 14.* || >= 16"
-  },
-  "volta": {
-    "extends": "../package.json"
-  },
   "scripts": {
-    "start": "concurrently 'npm:watch:*'",
-    "build": "concurrently 'npm:build:*'",
-    "build:js": "rollup -c ./rollup.config.mjs",
-    "build:docs": "cp ../README.md ./README.md",
-    "watch:js": "rollup -c --watch --no-watch.clearScreen",
-    "lint": "concurrently 'npm:lint:js'",
-    "lint:fix": "concurrently 'npm:lint:js:fix'",
+    "build": "rollup --config",
+    "format": "prettier . --cache --write",
+    "lint": "concurrently \"pnpm:lint:*(!fix)\" --names \"lint:\" --prefixColors auto",
+    "lint:fix": "concurrently \"pnpm:lint:*:fix\" --names \"fix:\" --prefixColors auto && pnpm run format",
+    "lint:format": "prettier . --cache --check",
+    "lint:hbs": "ember-template-lint . --no-error-on-unmatched-pattern",
+    "lint:hbs:fix": "ember-template-lint . --fix --no-error-on-unmatched-pattern",
     "lint:js": "eslint . --cache",
     "lint:js:fix": "eslint . --fix",
-    "test": "echo 'Addon does not have tests, run tests in test-app'"
+    "start": "vite dev",
+    "demo:build": "pnpm build && VITE_BUILD_TARGET=demo vite build --out-dir dist-demo --emptyOutDir",
+    "test": "vite build --mode=development --out-dir dist-tests && testem --file testem.cjs ci --port 0"
   }
 }