ember-safe-button 2.1.1 → 3.0.0

package/dist/components/safety/index.js

@@ -0,0 +1,54 @@
+import { S as SAFETY_STATUS, _ as _defineProperty } from '../../index-65a73164.js';
+import { setComponentTemplate } from '@ember/component';
+import { hbs } from 'ember-cli-htmlbars';
+import Component from '@glimmer/component';
+
+var TEMPLATE = hbs("<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',
+  [SAFETY_STATUS.UNLOCKING]: 'Deactivating safety',
+  [SAFETY_STATUS.UNLOCKED]: 'Safety not active',
+  [SAFETY_STATUS.LOCKING]: 'Activating safety'
+};
+/**
+  Safety is a component that covers the trigger.
+
+  ```hbs
+    <SafeButton
+      @onConfirm={{action safeButtonClicked}} as |button|
+    >
+      <button.safety class="bg-grey-light">
+        This is safety
+      </button.safety>
+    </SafeButton>
+  ```
+
+  @class SafetyComponent
+ */
+
+class SafetyComponent extends Component {
+  constructor(...args) {
+    super(...args);
+
+    _defineProperty(this, "BASIC_CLASS", BASIC_CLASS);
+  }
+
+  get isDisabled() {
+    return this.args.safetyStatus === SAFETY_STATUS.UNLOCKED;
+  }
+
+  get focusMe() {
+    return !this.isDisabled;
+  }
+
+  get ariaLabel() {
+    return ARIA_LABELS[this.args.safetyStatus];
+  }
+
+}
+setComponentTemplate(TEMPLATE, SafetyComponent);
+
+export { ARIA_LABELS, BASIC_CLASS, SafetyComponent as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/safety/index.hbs.js","../../../src/components/safety/index.js"],"sourcesContent":["import { hbs } from 'ember-cli-htmlbars';\nexport default hbs(\"<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>\")","import Component from '@glimmer/component';\n\nimport { SAFETY_STATUS } from '../safe-button/index';\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":["hbs","BASIC_CLASS","ARIA_LABELS","SAFETY_STATUS","LOCKED","UNLOCKING","UNLOCKED","LOCKING","SafetyComponent","Component","isDisabled","args","safetyStatus","focusMe","ariaLabel"],"mappings":";;;;;AACA,eAAeA,GAAG,CAAC,ibAAD,CAAlB;;ACGO,MAAMC,WAAW,GAAG,2BAApB;AACA,MAAMC,WAAW,GAAG;AACzB,EAAA,CAACC,aAAa,CAACC,MAAf,GAAwB,mBADC;AAEzB,EAAA,CAACD,aAAa,CAACE,SAAf,GAA2B,qBAFF;AAGzB,EAAA,CAACF,aAAa,CAACG,QAAf,GAA0B,mBAHD;EAIzB,CAACH,aAAa,CAACI,OAAf,GAAyB,mBAAA;AAJA,EAApB;AAOP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACe,MAAMC,eAAN,SAA8BC,SAA9B,CAAwC;AAAA,EAAA,WAAA,CAAA,GAAA,IAAA,EAAA;AAAA,IAAA,KAAA,CAAA,GAAA,IAAA,CAAA,CAAA;;AAAA,IAAA,eAAA,CAAA,IAAA,EAAA,aAAA,EACvCR,WADuC,CAAA,CAAA;AAAA,GAAA;;AAGvC,EAAA,IAAVS,UAAU,GAAG;AACf,IAAA,OAAO,KAAKC,IAAL,CAAUC,YAAV,KAA2BT,aAAa,CAACG,QAAhD,CAAA;AACD,GAAA;;AAEU,EAAA,IAAPO,OAAO,GAAG;IACZ,OAAO,CAAC,KAAKH,UAAb,CAAA;AACD,GAAA;;AAEY,EAAA,IAATI,SAAS,GAAG;AACd,IAAA,OAAOZ,WAAW,CAAC,IAAA,CAAKS,IAAL,CAAUC,YAAX,CAAlB,CAAA;AACD,GAAA;;AAboD,CAAA;+BAAlCJ;;;;"}

package/dist/components/trigger/index.js

@@ -0,0 +1,44 @@
+import { _ as _defineProperty, S as SAFETY_STATUS } from '../../index-65a73164.js';
+import { setComponentTemplate } from '@ember/component';
+import { hbs } from 'ember-cli-htmlbars';
+import Component from '@glimmer/component';
+
+var TEMPLATE = hbs("<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.
+
+  ```hbs
+    <SafeButton
+      @onConfirm={{action safeButtonClicked}} as |button|
+    >
+      <button.trigger class="bg-red-dark">
+        Trigger
+      </button.trigger>
+    </SafeButton>
+  ```
+
+  @class SafetyComponent
+ */
+
+class TriggerComponent extends Component {
+  constructor(...args) {
+    super(...args);
+
+    _defineProperty(this, "BASIC_CLASS", BASIC_CLASS);
+  }
+
+  get isDisabled() {
+    return this.args.safetyStatus !== SAFETY_STATUS.UNLOCKED;
+  }
+
+  get focusMe() {
+    return !this.isDisabled;
+  }
+
+}
+setComponentTemplate(TEMPLATE, TriggerComponent);
+
+export { BASIC_CLASS, TriggerComponent as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/trigger/index.hbs.js","../../../src/components/trigger/index.js"],"sourcesContent":["import { hbs } from 'ember-cli-htmlbars';\nexport default hbs(\"<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>\")","import Component from '@glimmer/component';\n\nimport { SAFETY_STATUS } from '../safe-button/index';\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":["hbs","BASIC_CLASS","TriggerComponent","Component","isDisabled","args","safetyStatus","SAFETY_STATUS","UNLOCKED","focusMe"],"mappings":";;;;;AACA,eAAeA,GAAG,CAAC,ibAAD,CAAlB;;ACGO,MAAMC,WAAW,GAAG,4BAApB;AAEP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACe,MAAMC,gBAAN,SAA+BC,SAA/B,CAAyC;AAAA,EAAA,WAAA,CAAA,GAAA,IAAA,EAAA;AAAA,IAAA,KAAA,CAAA,GAAA,IAAA,CAAA,CAAA;;AAAA,IAAA,eAAA,CAAA,IAAA,EAAA,aAAA,EACxCF,WADwC,CAAA,CAAA;AAAA,GAAA;;AAGxC,EAAA,IAAVG,UAAU,GAAG;AACf,IAAA,OAAO,KAAKC,IAAL,CAAUC,YAAV,KAA2BC,aAAa,CAACC,QAAhD,CAAA;AACD,GAAA;;AAEU,EAAA,IAAPC,OAAO,GAAG;IACZ,OAAO,CAAC,KAAKL,UAAb,CAAA;AACD,GAAA;;AATqD,CAAA;+BAAnCF;;;;"}

package/dist/index-65a73164.js

@@ -0,0 +1,249 @@
+import { setComponentTemplate } from '@ember/component';
+import { hbs } from 'ember-cli-htmlbars';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { assert } from '@ember/debug';
+import { action } from '@ember/object';
+import { task, timeout } from 'ember-concurrency';
+import embeddedAnimations from './components/safe-button/animations/index.js';
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+function _initializerDefineProperty(target, property, descriptor, context) {
+  if (!descriptor) return;
+  Object.defineProperty(target, property, {
+    enumerable: descriptor.enumerable,
+    configurable: descriptor.configurable,
+    writable: descriptor.writable,
+    value: descriptor.initializer ? descriptor.initializer.call(context) : void 0
+  });
+}
+
+function _applyDecoratedDescriptor(target, property, decorators, descriptor, context) {
+  var desc = {};
+  Object.keys(descriptor).forEach(function (key) {
+    desc[key] = descriptor[key];
+  });
+  desc.enumerable = !!desc.enumerable;
+  desc.configurable = !!desc.configurable;
+
+  if ('value' in desc || desc.initializer) {
+    desc.writable = true;
+  }
+
+  desc = decorators.slice().reverse().reduce(function (desc, decorator) {
+    return decorator(target, property, desc) || desc;
+  }, desc);
+
+  if (context && desc.initializer !== void 0) {
+    desc.value = desc.initializer ? desc.initializer.call(context) : void 0;
+    desc.initializer = undefined;
+  }
+
+  if (desc.initializer === void 0) {
+    Object.defineProperty(target, property, desc);
+    desc = null;
+  }
+
+  return desc;
+}
+
+var TEMPLATE = hbs("<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 _dec, _class, _descriptor, _descriptor2;
+const DEFAULT_TIMEOUT = 3000;
+const DEFAULT_ANIMATION = 'slide';
+const SAFETY_STATUS = {
+  LOCKED: 1,
+  UNLOCKING: 2,
+  UNLOCKED: 3,
+  LOCKING: 4
+};
+/**
+  Main component.
+
+  ```hbs
+    <SafeButton
+      class="border-black"
+      @animation={{this.animation}}
+      @message="Delete me"
+      @timeout={{2000}}
+      @onConfirm={{action safeButtonClicked}} />
+  ```
+
+  ```
+    @class SafeButtonComponent
+    @param {string} [class="ember-safe-button"] CSS class to be applied on the wrapping element.
+    @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
+    @param {number} [timeout=3000] Number of millisenconds after which the safety rolls back over the trigger.
+    @param {string} [message="delete"] Text to be printed on the buttons in case block is not provided.
+    @param {function} onConfirm - Action to trigger whenever user clicks the trigger.
+  ```
+
+  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:
+
+  - `safety.unlocking` and `trigger.unlocking`
+  - `safety.locking` and `trigger.locking`
+
+  ```js
+    {
+      safety: {
+        unlocking: {
+          keyframes: [
+            { transform: 'translateX(0)' },
+            { transform: 'translateX(-100%)' },
+          ],
+          options: {
+            duration: 1000,
+            fill: 'both',
+            easing: 'ease',
+          },
+        },
+        locking: {
+          keyframes: [
+            { transform: 'translateX(-100%)' },
+            { transform: 'translateX(0)' },
+          ],
+          options: {
+            duration: 1000,
+            fill: 'both',
+            easing: 'ease',
+          },
+        },
+      },
+      trigger: {
+        unlocking: {
+          keyframes: [
+            { transform: 'translateX(100%)' },
+            { transform: 'translateX(0)' },
+          ],
+          options: {
+            duration: 1000,
+            fill: 'both',
+            easing: 'ease',
+          },
+        },
+        locking: {
+          keyframes: [
+            { transform: 'translateX(0)' },
+            { transform: 'translateX(100%)' },
+          ],
+          options: {
+            duration: 1000,
+            fill: 'both',
+            easing: 'ease',
+          },
+        },
+      },
+    }
+  ```
+ */
+
+let SafeButtonComponent = (_dec = task(function* () {
+  yield timeout(this.timeout);
+  this.safetyStatus = SAFETY_STATUS.LOCKING;
+}), (_class = class SafeButtonComponent extends Component {
+  constructor() {
+    super(...arguments);
+
+    _initializerDefineProperty(this, "safetyStatus", _descriptor, this);
+
+    _initializerDefineProperty(this, "triggerSafety", _descriptor2, this);
+
+    assert('@onConfirm attribute must be set', typeof this.args.onConfirm === 'function');
+  }
+
+  get activeAnimation() {
+    const animation = this.args.animation || DEFAULT_ANIMATION;
+    return typeof animation === 'string' ? embeddedAnimations[animation] : animation;
+  }
+
+  get webAnimations() {
+    const {
+      activeAnimation,
+      onUnlocked,
+      onLocked
+    } = this;
+    return {
+      safety: {
+        unlocking: ({
+          element
+        }) => {
+          let animation = element.animate(activeAnimation.safety.unlocking.keyframes, activeAnimation.safety.unlocking.options);
+          animation.onfinish = onUnlocked;
+        },
+        locking: ({
+          element
+        }) => {
+          let animation = element.animate(activeAnimation.safety.locking.keyframes, activeAnimation.safety.locking.options);
+          animation.onfinish = onLocked;
+        }
+      },
+      trigger: {
+        unlocking({
+          element
+        }) {
+          element.animate(activeAnimation.trigger.unlocking.keyframes, activeAnimation.trigger.unlocking.options);
+        },
+
+        locking({
+          element
+        }) {
+          element.animate(activeAnimation.trigger.locking.keyframes, activeAnimation.trigger.locking.options);
+        }
+
+      }
+    };
+  }
+
+  get timeout() {
+    return this.args.timeout || DEFAULT_TIMEOUT;
+  }
+
+  get displayedMessage() {
+    return this.args.message || 'delete';
+  }
+
+  onUnlocking() {
+    this.safetyStatus = SAFETY_STATUS.UNLOCKING;
+  }
+
+  onUnlocked() {
+    this.safetyStatus = SAFETY_STATUS.UNLOCKED;
+    this.triggerSafety.perform();
+  }
+
+  onLocked() {
+    this.safetyStatus = SAFETY_STATUS.LOCKED;
+  }
+
+}, (_descriptor = _applyDecoratedDescriptor(_class.prototype, "safetyStatus", [tracked], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: function () {
+    return SAFETY_STATUS.LOCKED;
+  }
+}), _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), _descriptor2 = _applyDecoratedDescriptor(_class.prototype, "triggerSafety", [_dec], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: null
+})), _class));
+setComponentTemplate(TEMPLATE, SafeButtonComponent);
+
+export { SAFETY_STATUS as S, _defineProperty as _, SafeButtonComponent as a };
+//# sourceMappingURL=index-65a73164.js.map

package/dist/index-65a73164.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-65a73164.js","sources":["../src/components/safe-button/index.hbs.js","../src/components/safe-button/index.js"],"sourcesContent":["import { hbs } from 'ember-cli-htmlbars';\nexport default hbs(\"<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>\")","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';\n\nconst DEFAULT_TIMEOUT = 3000;\nconst DEFAULT_ANIMATION = 'slide';\n\nexport const SAFETY_STATUS = {\n  LOCKED: 1,\n  UNLOCKING: 2,\n  UNLOCKED: 3,\n  LOCKING: 4,\n};\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('@onConfirm attribute must be set', typeof this.args.onConfirm === 'function');\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' ? embeddedAnimations[animation] : 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  @task(function* () {\n    yield timeout(this.timeout);\n    this.safetyStatus = SAFETY_STATUS.LOCKING;\n  })\n  triggerSafety;\n}\n"],"names":["hbs","DEFAULT_TIMEOUT","DEFAULT_ANIMATION","SAFETY_STATUS","LOCKED","UNLOCKING","UNLOCKED","LOCKING","SafeButtonComponent","task","timeout","safetyStatus","Component","constructor","arguments","assert","args","onConfirm","activeAnimation","animation","embeddedAnimations","webAnimations","onUnlocked","onLocked","safety","unlocking","element","animate","keyframes","options","onfinish","locking","trigger","displayedMessage","message","onUnlocking","triggerSafety","perform","tracked","action"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,eAAeA,GAAG,CAAC,igCAAD,CAAlB;;;ACSA,MAAMC,eAAe,GAAG,IAAxB,CAAA;AACA,MAAMC,iBAAiB,GAAG,OAA1B,CAAA;AAEO,MAAMC,aAAa,GAAG;AAC3BC,EAAAA,MAAM,EAAE,CADmB;AAE3BC,EAAAA,SAAS,EAAE,CAFgB;AAG3BC,EAAAA,QAAQ,EAAE,CAHiB;AAI3BC,EAAAA,OAAO,EAAE,CAAA;AAJkB,EAAtB;AAOP;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;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;;IACqBC,8BA4ElBC,IAAI,CAAC,aAAa;AACjB,EAAA,MAAMC,OAAO,CAAC,IAAKA,CAAAA,OAAN,CAAb,CAAA;AACA,EAAA,IAAA,CAAKC,YAAL,GAAoBR,aAAa,CAACI,OAAlC,CAAA;AACD,CAHI,IA5EQ,MAAA,GAAA,MAAMC,mBAAN,SAAkCI,SAAlC,CAA4C;AACzDC,EAAAA,WAAW,GAAG;AACZ,IAAA,KAAA,CAAM,GAAGC,SAAT,CAAA,CAAA;;AADY,IAAA,0BAAA,CAAA,IAAA,EAAA,cAAA,EAAA,WAAA,EAAA,IAAA,CAAA,CAAA;;AAAA,IAAA,0BAAA,CAAA,IAAA,EAAA,eAAA,EAAA,YAAA,EAAA,IAAA,CAAA,CAAA;;IAGZC,MAAM,CAAC,kCAAD,EAAqC,OAAO,IAAA,CAAKC,IAAL,CAAUC,SAAjB,KAA+B,UAApE,CAAN,CAAA;AACD,GAAA;;AAIkB,EAAA,IAAfC,eAAe,GAAG;AACpB,IAAA,MAAMC,SAAS,GAAG,IAAA,CAAKH,IAAL,CAAUG,SAAV,IAAuBjB,iBAAzC,CAAA;IAEA,OAAO,OAAOiB,SAAP,KAAqB,QAArB,GAAgCC,kBAAkB,CAACD,SAAD,CAAlD,GAAgEA,SAAvE,CAAA;AACD,GAAA;;AAEgB,EAAA,IAAbE,aAAa,GAAG;IAClB,MAAM;MAAEH,eAAF;MAAmBI,UAAnB;AAA+BC,MAAAA,QAAAA;AAA/B,KAAA,GAA4C,IAAlD,CAAA;IAEA,OAAO;AACLC,MAAAA,MAAM,EAAE;AACNC,QAAAA,SAAS,EAAE,CAAC;AAAEC,UAAAA,OAAAA;AAAF,SAAD,KAAiB;UAC1B,IAAIP,SAAS,GAAGO,OAAO,CAACC,OAAR,CACdT,eAAe,CAACM,MAAhB,CAAuBC,SAAvB,CAAiCG,SADnB,EAEdV,eAAe,CAACM,MAAhB,CAAuBC,SAAvB,CAAiCI,OAFnB,CAAhB,CAAA;UAIAV,SAAS,CAACW,QAAV,GAAqBR,UAArB,CAAA;SANI;AAQNS,QAAAA,OAAO,EAAE,CAAC;AAAEL,UAAAA,OAAAA;AAAF,SAAD,KAAiB;UACxB,IAAIP,SAAS,GAAGO,OAAO,CAACC,OAAR,CACdT,eAAe,CAACM,MAAhB,CAAuBO,OAAvB,CAA+BH,SADjB,EAEdV,eAAe,CAACM,MAAhB,CAAuBO,OAAvB,CAA+BF,OAFjB,CAAhB,CAAA;UAIAV,SAAS,CAACW,QAAV,GAAqBP,QAArB,CAAA;AACD,SAAA;OAfE;AAiBLS,MAAAA,OAAO,EAAE;AACPP,QAAAA,SAAS,CAAC;AAAEC,UAAAA,OAAAA;AAAF,SAAD,EAAc;AACrBA,UAAAA,OAAO,CAACC,OAAR,CACET,eAAe,CAACc,OAAhB,CAAwBP,SAAxB,CAAkCG,SADpC,EAEEV,eAAe,CAACc,OAAhB,CAAwBP,SAAxB,CAAkCI,OAFpC,CAAA,CAAA;SAFK;;AAOPE,QAAAA,OAAO,CAAC;AAAEL,UAAAA,OAAAA;AAAF,SAAD,EAAc;AACnBA,UAAAA,OAAO,CAACC,OAAR,CACET,eAAe,CAACc,OAAhB,CAAwBD,OAAxB,CAAgCH,SADlC,EAEEV,eAAe,CAACc,OAAhB,CAAwBD,OAAxB,CAAgCF,OAFlC,CAAA,CAAA;AAID,SAAA;;AAZM,OAAA;KAjBX,CAAA;AAgCD,GAAA;;AAEU,EAAA,IAAPnB,OAAO,GAAG;AACZ,IAAA,OAAO,IAAKM,CAAAA,IAAL,CAAUN,OAAV,IAAqBT,eAA5B,CAAA;AACD,GAAA;;AAEmB,EAAA,IAAhBgC,gBAAgB,GAAG;AACrB,IAAA,OAAO,IAAKjB,CAAAA,IAAL,CAAUkB,OAAV,IAAqB,QAA5B,CAAA;AACD,GAAA;;AAGDC,EAAAA,WAAW,GAAG;AACZ,IAAA,IAAA,CAAKxB,YAAL,GAAoBR,aAAa,CAACE,SAAlC,CAAA;AACD,GAAA;;AAGDiB,EAAAA,UAAU,GAAG;AACX,IAAA,IAAA,CAAKX,YAAL,GAAoBR,aAAa,CAACG,QAAlC,CAAA;IACA,IAAK8B,CAAAA,aAAL,CAAmBC,OAAnB,EAAA,CAAA;AACD,GAAA;;AAGDd,EAAAA,QAAQ,GAAG;AACT,IAAA,IAAA,CAAKZ,YAAL,GAAoBR,aAAa,CAACC,MAAlC,CAAA;AACD,GAAA;;AA1EwD,+EAOxDkC;;;;;AAAuBnC,IAAAA,OAAAA,aAAa,CAACC;;gEAqDrCmC,yJAKAA,sJAMAA;;;;;;;;;;"}

package/dist/index.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

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

package/dist/modifiers/animate-me.js

@@ -0,0 +1,23 @@
+import { modifier } from 'ember-modifier';
+import { S as SAFETY_STATUS } from '../index-65a73164.js';
+
+var animateMe = modifier((element, _, named) => {
+  if (named.focusMe) {
+    element.focus();
+  }
+
+  if (named.safetyStatus === SAFETY_STATUS.UNLOCKING) {
+    named.webAnimations.unlocking({
+      element
+    });
+  } else if (named.safetyStatus === SAFETY_STATUS.LOCKING) {
+    named.webAnimations.locking({
+      element
+    });
+  }
+}, {
+  eager: false
+});
+
+export { animateMe as default };
+//# sourceMappingURL=animate-me.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"animate-me.js","sources":["../../src/modifiers/animate-me.js"],"sourcesContent":["import { modifier } from 'ember-modifier';\n\nimport { SAFETY_STATUS } from '../components/safe-button/index';\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,OAAD,EAAUC,CAAV,EAAaC,KAAb,KAAuB;EACrB,IAAIA,KAAK,CAACC,OAAV,EAAmB;AACjBH,IAAAA,OAAO,CAACI,KAAR,EAAA,CAAA;AACD,GAAA;;AAED,EAAA,IAAIF,KAAK,CAACG,YAAN,KAAuBC,aAAa,CAACC,SAAzC,EAAoD;AAClDL,IAAAA,KAAK,CAACM,aAAN,CAAoBC,SAApB,CAA8B;AAC5BT,MAAAA,OAAAA;KADF,CAAA,CAAA;GADF,MAIO,IAAIE,KAAK,CAACG,YAAN,KAAuBC,aAAa,CAACI,OAAzC,EAAkD;AACvDR,IAAAA,KAAK,CAACM,aAAN,CAAoBG,OAApB,CAA4B;AAC1BX,MAAAA,OAAAA;KADF,CAAA,CAAA;AAGD,GAAA;AACF,CAfoB,EAgBrB;AAAEY,EAAAA,KAAK,EAAE,KAAA;AAAT,CAhBqB,CAAvB;;;;"}

package/package.json

@@ -1,93 +1,94 @@
 {
   "name": "ember-safe-button",
-  "version": "2.1.1",
+  "version": "3.0.0",
   "description": "For potentially dangerous actions that better needs a confirmation.",
-  "keywords": [
-    "ember-addon"
-  ],
-  "private": false,
   "repository": "https://gitlab.com/michal-bryxi/open-source/ember-safe-button",
   "license": "MIT",
   "author": "",
-  "directories": {
-    "doc": "doc",
-    "test": "tests"
+  "exports": {
+    ".": "./dist/index.js",
+    "./*": "./dist/*",
+    "./addon-main.js": "./addon-main.js"
   },
+  "files": [
+    "dist",
+    "addon-main.cjs",
+    "CHANGELOG.md",
+    "README.md"
+  ],
   "scripts": {
-    "build": "ember build --environment=production",
-    "lint": "npm-run-all --aggregate-output --continue-on-error --parallel 'lint:!(fix)'",
-    "lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*:fix",
-    "lint:hbs": "ember-template-lint .",
-    "lint:hbs:fix": "ember-template-lint . --fix",
+    "start": "concurrently 'npm:watch:*'",
+    "build": "concurrently 'npm:build:*'",
+    "build:js": "rollup -c ./rollup.config.js",
+    "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'",
     "lint:js": "eslint . --cache",
     "lint:js:fix": "eslint . --fix",
-    "start": "ember serve",
-    "test": "npm-run-all lint test:*",
-    "test:ember": "ember test",
-    "format:hbs": "prettier **/*.hbs --write --parser=glimmer",
-    "!test:ember-compatibility": "ember try:each"
+    "test": "echo 'Addon does not have tests, run tests in test-app'",
+    "prepare": "yarn run build",
+    "prepublishOnly": "yarn run build"
   },
   "dependencies": {
-    "@ember/render-modifiers": "1.0.2",
-    "ember-cli-babel": "7.26.6",
-    "ember-cli-htmlbars": "5.7.1",
-    "ember-concurrency": "2.1.0"
+    "@ember/render-modifiers": "2.0.4",
+    "@embroider/addon-shim": "1.8.3",
+    "ember-cli-htmlbars": "^6.1.0",
+    "ember-concurrency": "2.2.1",
+    "ember-modifier": "3.2.7"
   },
   "devDependencies": {
-    "@ember/optional-features": "2.0.0",
-    "@ember/test-helpers": "2.2.8",
-    "@fortawesome/ember-fontawesome": "0.2.3",
-    "@fortawesome/free-solid-svg-icons": "5.15.3",
-    "@glimmer/component": "1.0.4",
-    "@glimmer/tracking": "1.0.4",
-    "autoprefixer": "10.2.6",
+    "@babel/core": "7.18.13",
+    "@babel/plugin-proposal-class-properties": "7.18.6",
+    "@babel/plugin-proposal-decorators": "7.18.10",
+    "@babel/plugin-syntax-decorators": "7.18.6",
+    "@embroider/addon-dev": "1.8.3",
+    "@nullvoxpopuli/eslint-configs": "2.2.50",
+    "@rollup/plugin-babel": "5.3.1",
     "babel-eslint": "10.1.0",
-    "broccoli-asset-rev": "3.0.0",
-    "ember-auto-import": "1.11.3",
-    "ember-cli": "3.26.1",
-    "ember-cli-addon-docs": "3.0.0",
-    "ember-cli-addon-docs-esdoc": "0.4.0",
-    "ember-cli-dependency-checker": "3.2.0",
-    "ember-cli-inject-live-reload": "2.1.0",
-    "ember-cli-postcss": "7.0.2",
-    "ember-cli-sri": "2.1.1",
-    "ember-cli-terser": "4.0.2",
-    "ember-data": "3.27.1",
-    "ember-disable-prototype-extensions": "1.1.3",
-    "ember-export-application-global": "2.0.1",
-    "ember-load-initializers": "2.1.2",
-    "ember-maybe-import-regenerator": "0.1.6",
-    "ember-modifier": "2.1.2",
-    "ember-page-title": "6.2.2",
-    "ember-qunit": "5.1.3",
-    "ember-resolver": "8.0.2",
-    "ember-sinon-qunit": "6.0.0",
-    "ember-source": "3.27.5",
-    "ember-source-channel-url": "3.0.0",
-    "ember-template-lint": "2.18.1",
-    "ember-template-lint-plugin-prettier": "2.0.1",
-    "ember-try": "1.4.0",
-    "eslint": "7.20.0",
-    "eslint-config-prettier": "7.2.0",
-    "eslint-plugin-ember": "10.2.0",
+    "concurrently": "7.3.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",
-    "eslint-plugin-prettier": "3.3.1",
-    "eslint-plugin-unicorn": "28.0.2",
-    "loader.js": "4.7.0",
-    "npm-run-all": "4.1.5",
-    "prettier": "2.2.1",
-    "qunit": "2.14.0",
-    "qunit-dom": "1.6.0",
-    "tailwindcss": "2.1.4"
+    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-simple-import-sort": "7.0.0",
+    "rollup": "2.78.1"
   },
-  "engines": {
-    "node": "10.* || >= 12"
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
   },
   "ember": {
     "edition": "octane"
   },
+  "keywords": [
+    "ember-addon"
+  ],
   "ember-addon": {
-    "configPath": "tests/dummy/config"
+    "version": 2,
+    "type": "addon",
+    "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",
+      "./components/safe-button/animations/lift-bars.js": "./dist/_app_/components/safe-button/animations/lift-bars.js",
+      "./components/safe-button/animations/poing.js": "./dist/_app_/components/safe-button/animations/poing.js",
+      "./components/safe-button/animations/roll.js": "./dist/_app_/components/safe-button/animations/roll.js",
+      "./components/safe-button/animations/slide.js": "./dist/_app_/components/safe-button/animations/slide.js",
+      "./components/safe-button/animations/zoom.js": "./dist/_app_/components/safe-button/animations/zoom.js",
+      "./components/safe-button/index.js": "./dist/_app_/components/safe-button/index.js",
+      "./components/safety/index.js": "./dist/_app_/components/safety/index.js",
+      "./components/trigger/index.js": "./dist/_app_/components/trigger/index.js",
+      "./modifiers/animate-me.js": "./dist/_app_/modifiers/animate-me.js"
+    }
+  },
+  "engines": {
+    "node": "12.* || 14.* || >= 16"
   },
-  "homepage": "https://ember-safe-button.netlify.com/"
+  "volta": {
+    "extends": "../package.json"
+  }
 }

package/.gitlab-ci.yml

@@ -1,27 +0,0 @@
-image: timbru31/node-chrome:14-slim
-
-stages:
-  - build
-  - test
-
-cache:
-  paths:
-    - node_modules/
-
-install_dependencies:
-  except:
-    refs:
-      - master
-  stage: build
-  script:
-    - yarn
-  artifacts:
-    paths:
-      - node_modules/
-
-testing_testing:
-  except:
-    refs:
-      - master
-  stage: test
-  script: yarn test

package/.prettierignore

@@ -1,21 +0,0 @@
-# unconventional js
-/blueprints/*/files/
-/vendor/
-
-# compiled output
-/dist/
-/tmp/
-
-# dependencies
-/bower_components/
-/node_modules/
-
-# misc
-/coverage/
-!.*
-.eslintcache
-
-# ember-try
-/.node_modules.ember-try/
-/bower.json.ember-try
-/package.json.ember-try

package/.prettierrc.js

@@ -1,5 +0,0 @@
-'use strict';
-
-module.exports = {
-  singleQuote: true,
-};