{ "file": "addon/components/fountainhead-state.js", "content": "
import Component from 'ember-component';\nimport hbs from 'htmlbars-inline-precompile';\n\n/**\n * ## Ember-Radical `rad-state` Component\n *\n * Component that can be used for tracking state changes with modals or drawers.\n * Wrap either in one of these and use the yielded state and actions to handle\n * showing/hiding/controlling your component.\n *\n * Useful mainly for demonstration/documentation purposes, but also handy for\n * when you don't have a convenient place to store state (particularly during\n * early development stages). It's also kind of nice for not cluttering up your\n * parent scope with a bunch of extra state and actions you might not want to\n * hang onto. Go nuts!\n *\n * ## Usage\n *\n * Instances of `rad-state` yield an `active` property and a hash of `actions`\n * for manipulating that state: `open`, `close`, and `toggleState`.\n *\n * ```handlebars\n * {{#rad-state as |state stateActions|}}\n *   {{bank-vault\n *     isOpen=state\n *     closeVault=stateActions.close\n *     openVault=stateActions.open}}\n * {{/rad-state}}\n * ```\n *\n * Or for a smipler toggling implementation:\n *\n * ```handlebars\n * {{#rad-state as |switchState switchActions|}}\n *   {{light-switch isOn=switchState toggleSwitch=switchActions.toggleState}}\n * {{/rad-state}}\n * ```\n *\n * The actions in the actions hash have already been yielded via the action\n * helper, so it is not necessary to continue using that helper when passing\n * actions into child components as properties (but you totally still can if\n * you would prefer to.\n *\n * @class FountainheadState\n * @constructor\n * @extends EmberRadical.RadState\n */\nexport default Component.extend({\n\n  // Properties\n  // ---------------------------------------------------------------------------\n  /**\n   * Boolean state tracking property. Use this to handle show/hide status.\n   * {{if state 'state' 'no-state'}}\n   * {{#fountainhead-button click=stateActions.toggleState}}Click{{/fountainhead-button}}\n   * @property active\n   * @type {Boolean}\n   */\n  active: false,\n  /**\n   * Rad State is a purely functional component with no rendered output of its\n   * own, so it doesn't need a root element cluttering up the DOM when it's\n   * being used.\n   * {{if state 'state' 'no-state'}}\n   * {{#fountainhead-button click=stateActions.toggleState}}Click{{/fountainhead-button}}\n   * @property tagName\n   * @type {string}\n   */\n  tagName: '',\n\n  // Actions\n  // ---------------------------------------------------------------------------\n  /**\n   * Actions hash\n   * @property actions\n   * @type {Object}\n   */\n  actions: {\n    /**\n     * Sets the {{c-l 'active'}} property to false.\n     * @method closeModal\n     */\n    close() {\n      this.set('active', false);\n    },\n    /**\n     * Sets the {{c-l 'active'}} property to true.\n     * @method openModal\n     */\n    open() {\n      this.set('active', true);\n    },\n    /**\n     * Sets the {{c-l 'active'}} property to passed state.\n     * @method toggleState\n     * @param {boolean} state State to set active to\n     */\n    toggleState() {\n      this.toggleProperty('active');\n    }\n  },\n\n  // Layout\n  // ---------------------------------------------------------------------------\n  layout: hbs`{{yield active (hash\n    open=(action 'open')\n    close=(action 'close')\n    toggleState=(action 'toggleState')\n  )}}`\n});\n
" }