ember-safe-button 3.2.0 → 4.0.0

package/src/components/safe-button/index.gjs

@@ -0,0 +1,239 @@
+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 { task } from 'ember-concurrency';
+
+import embeddedAnimations from './animations/index.js';
+import Safety from '../safety/index.gjs';
+import Trigger from '../trigger/index.gjs';
+import { SAFETY_STATUS } from '../../states.js';
+
+const DEFAULT_TIMEOUT = 3000;
+const DEFAULT_ANIMATION = 'slide';
+console.log('DEBUG: ember-safe-button loaded');
+
+/**
+  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',
+          },
+        },
+      },
+    }
+  ```
+ */
+export default class SafeButtonComponent extends Component {
+  constructor() {
+    super(...arguments);
+
+    assert(
+      '@onConfirm attribute must be set',
+      typeof this.args.onConfirm === 'function',
+    );
+  }
+
+  @tracked safetyStatus = SAFETY_STATUS.LOCKED;
+
+  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';
+  }
+
+  @action
+  onUnlocking() {
+    this.safetyStatus = SAFETY_STATUS.UNLOCKING;
+  }
+
+  @action
+  onUnlocked() {
+    this.safetyStatus = SAFETY_STATUS.UNLOCKED;
+    this.triggerSafety.perform();
+  }
+
+  @action
+  onLocked() {
+    this.safetyStatus = SAFETY_STATUS.LOCKED;
+  }
+
+  triggerSafety = task(async () => {
+    await timeout(this.timeout);
+    this.safetyStatus = SAFETY_STATUS.LOCKING;
+  });
+
+  triggerInstance = <template>
+    <Trigger
+      @onClick={{@onConfirm}}
+      @safetyStatus={{this.safetyStatus}}
+      @displayedMessage={{this.displayedMessage}}
+      @webAnimations={{this.webAnimations.trigger}}
+    />
+  </template>;
+
+  safetyInstance = <template>
+    <Safety
+      @onClick={{this.onUnlocking}}
+      @safetyStatus={{this.safetyStatus}}
+      @displayedMessage={{this.displayedMessage}}
+      @webAnimations={{this.webAnimations.safety}}
+    />
+  </template>;
+
+  <template>
+    <div class="ember-safe-button" ...attributes>
+      {{#if (has-block)}}
+        {{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
+            )
+          )
+        }}
+      {{else}}
+        <Trigger
+          @onClick={{@onConfirm}}
+          @safetyStatus={{this.safetyStatus}}
+          @displayedMessage={{this.displayedMessage}}
+          @webAnimations={{this.webAnimations.trigger}}
+        />
+        <Safety
+          @onClick={{this.onUnlocking}}
+          @safetyStatus={{this.safetyStatus}}
+          @displayedMessage={{this.displayedMessage}}
+          @webAnimations={{this.webAnimations.safety}}
+        />
+      {{/if}}
+    </div>
+  </template>
+}

package/src/components/safety/index.gjs

@@ -0,0 +1,67 @@
+import Component from '@glimmer/component';
+
+import { on } from '@ember/modifier';
+import animateMe from '../../modifiers/animate-me.js';
+import { SAFETY_STATUS } from '../../states.js';
+
+export const BASIC_CLASS = 'ember-safe-button-safety';
+export 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
+ */
+export default class SafetyComponent extends Component {
+  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];
+  }
+
+  <template>
+    <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
+      }}
+    >
+      {{#if (has-block)}}
+        {{yield}}
+      {{else}}
+        {{@displayedMessage}}
+      {{/if}}
+    </button>
+  </template>
+}

package/src/components/trigger/index.gjs

@@ -0,0 +1,57 @@
+import Component from '@glimmer/component';
+import { on } from '@ember/modifier';
+import animateMe from '../../modifiers/animate-me.js';
+
+import { SAFETY_STATUS } from '../../states.js';
+
+export 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
+ */
+export default class TriggerComponent extends Component {
+  BASIC_CLASS = BASIC_CLASS;
+
+  get isDisabled() {
+    return this.args.safetyStatus !== SAFETY_STATUS.UNLOCKED;
+  }
+
+  get focusMe() {
+    return !this.isDisabled;
+  }
+
+  <template>
+    <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
+      }}
+    >
+      {{#if (has-block)}}
+        {{yield}}
+      {{else}}
+        {{@displayedMessage}}
+      {{/if}}
+    </button>
+  </template>
+}

package/src/index.js

@@ -0,0 +1,3 @@
+export { default as Trigger } from './components/trigger/index.gjs';
+export { default as Safety } from './components/safety/index.gjs';
+export { default as SafeButton } from './components/safe-button/index.gjs';

package/src/modifiers/animate-me.js

@@ -0,0 +1,22 @@
+import { modifier } from 'ember-modifier';
+
+import { SAFETY_STATUS } from '../states.js';
+
+export default 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 },
+);

package/src/states.js

@@ -0,0 +1,6 @@
+export const SAFETY_STATUS = {
+  LOCKED: 1,
+  UNLOCKING: 2,
+  UNLOCKED: 3,
+  LOCKING: 4,
+};

package/dist/index-BZOIdnQv.js

@@ -1,220 +0,0 @@
-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 { timeout } from 'ember-concurrency';
-import embeddedAnimations from './components/safe-button/animations/index.js';
-import { precompileTemplate } from '@ember/template-compilation';
-import { setComponentTemplate } from '@ember/component';
-
-function _applyDecoratedDescriptor(i, e, r, n, l) {
-  var a = {};
-  return Object.keys(n).forEach(function (i) {
-    a[i] = n[i];
-  }), a.enumerable = !!a.enumerable, a.configurable = !!a.configurable, ("value" in a || a.initializer) && (a.writable = true), a = r.slice().reverse().reduce(function (r, n) {
-    return n(i, e, r) || r;
-  }, a), l && void 0 !== a.initializer && (a.value = a.initializer ? a.initializer.call(l) : void 0, a.initializer = void 0), void 0 === a.initializer ? (Object.defineProperty(i, e, a), null) : a;
-}
-function _defineProperty(e, r, t) {
-  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
-    value: t,
-    enumerable: true,
-    configurable: true,
-    writable: true
-  }) : e[r] = t, e;
-}
-function _initializerDefineProperty(e, i, r, l) {
-  r && Object.defineProperty(e, i, {
-    enumerable: r.enumerable,
-    configurable: r.configurable,
-    writable: r.writable,
-    value: r.initializer ? r.initializer.call(l) : void 0
-  });
-}
-function _toPrimitive(t, r) {
-  if ("object" != typeof t || !t) return t;
-  var e = t[Symbol.toPrimitive];
-  if (void 0 !== e) {
-    var i = e.call(t, r);
-    if ("object" != typeof i) return i;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return ("string" === r ? String : Number)(t);
-}
-function _toPropertyKey(t) {
-  var i = _toPrimitive(t, "string");
-  return "symbol" == typeof i ? i : i + "";
-}
-
-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 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 = (_class = 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");
-  }
-  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), _class);
-setComponentTemplate(TEMPLATE, SafeButtonComponent);
-
-export { SAFETY_STATUS as S, _defineProperty as _, SafeButtonComponent as a };
-//# sourceMappingURL=index-BZOIdnQv.js.map

package/dist/index-BZOIdnQv.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index-BZOIdnQv.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\";\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(\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","SAFETY_STATUS","LOCKED","UNLOCKING","UNLOCKED","LOCKING","SafeButtonComponent","_class","Component","constructor","arguments","_initializerDefineProperty","_descriptor","_defineProperty","_buildTask","context","generator","timeout","safetyStatus","assert","args","onConfirm","activeAnimation","animation","embeddedAnimations","webAnimations","onUnlocked","onLocked","safety","unlocking","element","animate","keyframes","options","onfinish","locking","trigger","displayedMessage","message","onUnlocking","triggerSafety","perform","_applyDecoratedDescriptor","prototype","tracked","configurable","enumerable","writable","initializer","action","Object","getOwnPropertyDescriptor","setComponentTemplate","TEMPLATE"],"mappings":"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"}