{ "file": "addon/components/fountainhead-alert.js", "content": "
import Component from 'ember-component';\nimport computed from 'ember-computed';\nimport hbs from 'htmlbars-inline-precompile';\n\n/**\n * Fountainhead Alert Component copied from Radical\n * @class FountainheadAlert\n * @constructor\n * @extends Ember.Component\n */\nexport default Component.extend({\n\n  // Passed Properties\n  // ---------------------------------------------------------------------------\n  /**\n   * Specify brand, component handles assigning correct css class\n   * @property brand\n   * @default ''\n   * @type {string}\n   * @public\n   */\n  brand: '',\n  /**\n   * Whether this alert can be dismissed via the close button in the upper right\n   * corner. Defaults to true. Adds an interactive close button to the alert.\n   *\n   * **Usage:**\n   * Override by passing `false` into this param in your handlebars template:\n   *\n   * ```handlebars\n   * {{#fountainhead-alert canDismiss=false}}\n   *   {{! Standard template content goes here }}\n   * {{/fountainhead-alert}}\n   * ```\n   *\n   * @property canDismiss\n   * @type {boolean}\n   * @default true\n   * @public\n   */\n  canDismiss: true,\n  /**\n   * Contains optional action that is executed when the alert is dismissed.\n   * This action will be executed before the alert is destroyed.\n   * @property onDismiss\n   * @type {function}\n   * @default () => {}\n   * @public\n   */\n  onDismiss: () => {},\n\n  // Properties\n  // ---------------------------------------------------------------------------\n  /**\n   * Computed css class bound to component. Handled by component to allow for\n   * flexibility in future updates to branding class names\n   * @property brandClass\n   * @type {string}\n   * @param 'brand'\n   * @private\n   */\n  brandClass: computed('brand', function() {\n    return this.get('brand') ? `alert-${this.get('brand')}` : null;\n  }),\n\n  // Ember Properties\n  // ---------------------------------------------------------------------------\n  /**\n   * @property attributeBindings\n   * @type {Array}\n   * @default ['role']\n   */\n  attributeBindings: ['role'],\n  /**\n   * @property classNames\n   * @type {Array}\n   * @default ['fh-alert']\n   */\n  classNames: ['fh-alert'],\n  /**\n   * @property classNameBindings\n   * @type {Array}\n   * @default ['brandClass', 'canDismiss:alert-dismissible']\n   */\n  classNameBindings: [\n    'brandClass',\n    'canDismiss:alert-dismissible'\n  ],\n  /**\n   * A++ accessibility. Tells a screen this component is an alert.\n   * @property role\n   * @type {string}\n   * @default 'alert'\n   */\n  role: 'alert',\n\n  // Methods\n  // ---------------------------------------------------------------------------\n  /**\n   * Allows for quick and easy dismissal of the alert. The alert is faded from\n   * view, then totally removed from the DOM and the component instance is\n   * destroyed.\n   * @method _selfDestruct\n   * @return {undefined}\n   */\n  _selfDestruct() {\n    // Fade the element out\n    this.$().animate({ opacity: 0 }, 300, () => {\n      // When the animation is complete, destroy the component\n      if (!this.get('isDestroyed')) {\n        this.$().remove();\n      }\n    });\n  },\n\n  // Actions\n  // ---------------------------------------------------------------------------\n  /**\n   * Actions hash\n   * @property actions\n   * @type {Object}\n   */\n  actions: {\n    /**\n     * A proxy action for the selfDestruct method\n     * @method dismiss\n     * @return {undefined}\n     */\n    dismiss() {\n      // check if a dismiss action was passed into the component\n      this.onDismiss();\n      // Internal method to handle all the destruction\n      this._selfDestruct();\n    }\n  },\n\n  // Layout\n  // ---------------------------------------------------------------------------\n  layout: hbs`\n    {{yield}}\n\n    {{#if canDismiss}}\n      {{#fountainhead-button\n        class=\"close\"\n        click=(action \"dismiss\")\n        link=true\n        aria-label=\"close\"}}\n        {{fountainhead-svg svgId=\"x\"}}\n      {{/fountainhead-button}}\n    {{/if}}\n  `\n});\n
" }