firstpart/Problem3 - Added header to every page

7b308acd · Martin Wighus Holtmon · ffdd6f6b · 7b308acd · 7b308acd · 7b308acd
Commit 7b308acd authored 3 years ago by Martin Wighus Holtmon
--- a/projectFirstPart/compiled/gettingStarted.bundle.js
+++ b/projectFirstPart/compiled/gettingStarted.bundle.js
@@ -16,7 +16,18 @@
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 "use strict";
-eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\n__webpack_require__(/*! ./Example.css */ \"./components/example/Example.css\");\n\nvar _prismjs = __webpack_require__(/*! prismjs */ \"./node_modules/prismjs/prism.js\");\n\nvar _prismjs2 = _interopRequireDefault(_prismjs);\n\n__webpack_require__(/*! prismjs/components/prism-jsx.js */ \"./node_modules/prismjs/components/prism-jsx.js\");\n\n__webpack_require__(/*! ../../node_modules/prismjs/themes/prism.css */ \"./node_modules/prismjs/themes/prism.css\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\n/*\n  Since this component shows code we include the https://prismjs.com/\n  formatter. We invoke it by labelling code blocks with class=\"language-jsx\"\n*/\n\n\n/* eslint-disable  react/jsx-one-expression-per-line */\n/* eslint-disable  react/destructuring-assignment */\n/* eslint no-plusplus: [\"error\", { \"allowForLoopAfterthoughts\": true }] */\n\n// React Components are subclass of React.Componment.\nvar Example = function (_React$Component) {\n  _inherits(Example, _React$Component);\n\n  function Example(props) {\n    _classCallCheck(this, Example);\n\n    // Must run the constructor of React.Component first\n\n    // Components have a special property named \"state\" that holds state.\n    // We can initialize it here.\n    // We read the example model data into the state variable 'name'\n    var _this = _possibleConstructorReturn(this, (Example.__proto__ || Object.getPrototypeOf(Example)).call(this, props));\n\n    _this.state = {\n      name: window.cs142models.exampleModel().name,\n      counter: 0,\n      inputValue: '',\n      buttonWasClicked: ''\n    };\n\n    // React events are called directly from DOM event handlers\n    // so we cannot directly call the methods of this class. We\n    // generate new functions that handle the event by just calling\n    // the method that handles the event.\n    _this.handleChangeBound = function (event) {\n      return _this.handleChange(event);\n    };\n    // Note: A commmon idiom in React code is to use JavaScript bind() to\n    // smash the method to accomplish this passthrough to the method:\n    //      this.handleChange = this.handleChange.bind(this);\n    return _this;\n  }\n\n  // React components have several \"lifecycle functions\"\n  // https://reactjs.org/docs/react-component.html\n  // that are used to inform the Component of interesting events.\n\n  // componentDidMount - Called when Component is activiated\n\n\n  _createClass(Example, [{\n    key: 'componentDidMount',\n    value: function componentDidMount() {\n      var _this2 = this;\n\n      // To demonstate state updating we define a function\n      // that increments the counter state and instruct the\n      // DOM to call it every 2 seconds.\n      /* eslint-disable react/no-access-state-in-setstate */\n      var counterIncrFunc = function counterIncrFunc() {\n        return _this2.setState({\n          counter: _this2.state.counter + 1\n        });\n      };\n      this.timerID = setInterval(counterIncrFunc, 2 * 1000);\n\n      // Trigger the code coloring\n      _prismjs2.default.highlightAll();\n    }\n\n    // componentWillUnmount - Called when Component is deactivated.\n\n  }, {\n    key: 'componentWillUnmount',\n    value: function componentWillUnmount() {\n      // We need to tell the DOM to stop calling us otherwise React\n      // will complain when we call setState on an unmounted component.\n      clearInterval(this.timerID);\n    }\n\n    // Method called when the input box is typed into.\n\n  }, {\n    key: 'handleChange',\n    value: function handleChange(event) {\n      this.setState({ inputValue: event.target.value });\n    }\n\n    // Method called when the button is pushed\n    /* eslint-disable-next-line no-unused-vars */\n\n  }, {\n    key: 'handleButtonClick',\n    value: function handleButtonClick(buttonName, event) {\n      this.setState({ buttonWasClicked: buttonName });\n    }\n\n    /* eslint-disable-next-line class-methods-use-this */\n\n  }, {\n    key: 'outOfBandJSX',\n    value: function outOfBandJSX(option) {\n      var optionJSX = void 0;\n      var listItems = [];\n      if (option) {\n        optionJSX = _react2.default.createElement(\n          'div',\n          null,\n          'Option was True'\n        );\n      } else {\n        optionJSX = _react2.default.createElement(\n          'div',\n          null,\n          'Option was False'\n        );\n      }\n      for (var i = 0; i < 3; i++) {\n        listItems[i] = _react2.default.createElement(\n          'li',\n          { key: i },\n          ' List Item ',\n          i,\n          ' '\n        );\n      }\n      var retVal = _react2.default.createElement(\n        'div',\n        null,\n        optionJSX,\n        _react2.default.createElement(\n          'ul',\n          null,\n          listItems\n        )\n      );\n\n      return retVal;\n    }\n  }, {\n    key: 'render',\n    value: function render() {\n      var _this3 = this;\n\n      return _react2.default.createElement(\n        'div',\n        { className: 'container Example' },\n        _react2.default.createElement(\n          'h1',\n          null,\n          'CS142 Project#4 React.js Example'\n        ),\n        _react2.default.createElement(\n          'div',\n          { className: 'motto-update' },\n          _react2.default.createElement(\n            'span',\n            { id: 'motto-name' },\n            window.cs142models.exampleMotto().name\n          ),\n          ' ',\n          _react2.default.createElement('br', null),\n          _react2.default.createElement(\n            'span',\n            { id: 'motto-value' },\n            window.cs142models.exampleMotto().motto\n          ),\n          ' ',\n          _react2.default.createElement('br', null),\n          _react2.default.createElement('br', null),\n          _react2.default.createElement(\n            'label',\n            { htmlFor: 'fname' },\n            'Name: '\n          ),\n          _react2.default.createElement('input', { type: 'text', placeholder: window.cs142models.exampleMotto().name, id: 'fname', onChange: function onChange(e) {\n              return document.getElementById(\"motto-name\").innerHTML = e.target.value;\n            } }),\n          _react2.default.createElement('br', null),\n          _react2.default.createElement(\n            'label',\n            { htmlFor: 'fmotto' },\n            'Motto: '\n          ),\n          _react2.default.createElement('input', { type: 'text', placeholder: window.cs142models.exampleMotto().motto, id: 'fmotto', onChange: function onChange(e) {\n              return document.getElementById(\"motto-value\").innerHTML = e.target.value;\n            } })\n        ),\n        _react2.default.createElement(\n          'p',\n          null,\n          'This view is an example of a \\xA0',\n          _react2.default.createElement(\n            'a',\n            { href: 'https://reactjs.org/docs/react-component.html', target: '_blank', rel: 'noopener noreferrer' },\n            'React.js Component'\n          ),\n          '\\xA0 named ',\n          _react2.default.createElement(\n            'span',\n            { className: 'cs142-code-name' },\n            'Example'\n          ),\n          '. It is located in the file ',\n          _react2.default.createElement(\n            'code',\n            null,\n            'components/example/Example.jsx'\n          ),\n          '. It looks like a JavaScript class named Example that has a method named named ',\n          _react2.default.createElement(\n            'span',\n            { className: 'cs142-code-name' },\n            'render'\n          ),\n          ', which appears to written in something that looks like HTML.'\n        ),\n        _react2.default.createElement(\n          'p',\n          null,\n          'It is actually written in a language named \\xA0',\n          _react2.default.createElement(\n            'a',\n            { href: 'https://reactjs.org/docs/introducing-jsx.html', target: '_blank', rel: 'noopener noreferrer' },\n            'JSX'\n          ),\n          '\\xA0 that is run as a preprocessor to the HTML-like language to JavaScript. The generated JavaScipt is limited to calls to the React.js \\xA0',\n          _react2.default.createElement(\n            'a',\n            { href: 'https://reactjs.org/docs/react-api.html#createelement', target: '_blank', rel: 'noopener noreferrer' },\n            'createElement'\n          ),\n          '\\xA0 function which allow us to write something that looks like HTML to describe what the component renders.'\n        ),\n        _react2.default.createElement(\n          'p',\n          null,\n          'Although JSX looks like HTML, it is not HTML. Some of the differences are necessary due to embeddding in JavaScript. For example, rather than ',\n          _react2.default.createElement(\n            'code',\n            null,\n            'class='\n          ),\n          ' we use ',\n          _react2.default.createElement(\n            'code',\n            null,\n            'className='\n          ),\n          ' (class is a JavsScript keyword). Although it is possible to interleave JavaScript and JSX code, care is needed since contents of JSX tags are processed into arguments to a function limiting what can be done as will be seen below.'\n        ),\n        _react2.default.createElement(\n          'h3',\n          null,\n          'Template substitution'\n        ),\n        _react2.default.createElement(\n          'p',\n          null,\n          'JSX treats text inside of parentheses (e.g. ',\n          _react2.default.createElement(\n            'code',\n            null,\n            '{JavaScriptExpression}'\n          ),\n          ') as templates where the JavaScript expression is evaluated in the context of the current function and whose value replaces the template in the string. The expression can evaluate to a JavaScript string or value from a JSX expression. This feature allows componment\\'s specification to use templated HTML.'\n        ),\n        _react2.default.createElement(\n          'p',\n          null,\n          'The Example class constructor sets the object\\'s property ',\n          _react2.default.createElement(\n            'code',\n            null,\n            'state.name'\n          ),\n          ' (see the assignment to ',\n          _react2.default.createElement(\n            'code',\n            null,\n            'this.state.name'\n          ),\n          ' in ',\n          _react2.default.createElement(\n            'code',\n            null,\n            'Example.jsx'\n          ),\n          ') from the model in the DOM which has a value of \\u201C ',\n          this.state.name,\n          '\\u201D so:'\n        ),\n        _react2.default.createElement(\n          'pre',\n          { className: 'cs142-example-code' },\n          _react2.default.createElement(\n            'code',\n            { className: 'language-jsx' },\n            '<p>My name is \"{this.state.name}\".</p>'\n          )\n        ),\n        _react2.default.createElement(\n          'p',\n          null,\n          'should render as:'\n        ),\n        _react2.default.createElement(\n          'p',\n          { className: 'cs142-example-output' },\n          'My name is \\u201C ',\n          this.state.name,\n          ' \\u201D.'\n        ),\n        _react2.default.createElement(\n          'h3',\n          null,\n          'One-way binding from JavaScript to HTML'\n        ),\n        _react2.default.createElement(\n          'p',\n          null,\n          'React automatically propagates any changes to JavaScript state to the JSX templates. For example the following code ',\n          _react2.default.createElement(\n            'code',\n            null,\n            '(',\n            '{this.state.counter}',\n            ')'\n          ),\n          ' displays the state.counter property of the Example component. The component sets a timer that increments the counter every 2 seconds. The value of the counter can be seen changing here: ',\n          this.state.counter,\n          '.'\n        ),\n        _react2.default.createElement(\n          'h3',\n          null,\n          'Control flow'\n        ),\n        _react2.default.createElement(\n          'p',\n          null,\n          'Most templating engines include support for doing conditional rendering and iteration. JSX is embedded in and is transpiled to JavaScript so we can use JavaScript language constructs for managing control flow.'\n        ),\n        _react2.default.createElement(\n          'p',\n          null,\n          'One way of doing control using JavaScript is to assign JSX fragements to JavaScript variables and use normal JavaScript control flow operators. For example, the following function selects among the posssible output lines based on an argument to the function and uses a for loop to populate an array. These JavaScript variables can then be referred to in JSX returned by the function.'\n        ),\n        _react2.default.createElement(\n          'pre',\n          { className: 'cs142-example-code' },\n          _react2.default.createElement(\n            'code',\n            { className: 'language-jsx' },\n            'function outOfBandJSX(option) {\\n  var optionJSX;\\n  if (option) {\\n    optionJSX = <div>Option was True</div>;\\n  } else {\\n    optionJSX  = <div>Option was False</div>;\\n  }\\n  var listItems = [];\\n  for (var i = 0; i < 3; i++) {\\n    listItems[i] = <li key={i}>List Item {i}</li>;\\n  }\\n  var retVal =\\n    <div>\\n      {optionJSX}\\n      <ul>\\n        {listItems}\\n      </ul>\\n    </div>;\\n\\n  return retVal;\\n}'\n          )\n        ),\n        _react2.default.createElement(\n          'p',\n          null,\n          'Calling this function from a template (i.e. ',\n          _react2.default.createElement(\n            'code',\n            null,\n            '{this.outOfBandJSX(true)}'\n          ),\n          ') would be expand to:'\n        ),\n        _react2.default.createElement(\n          'div',\n          { className: 'cs142-example-output' },\n          this.outOfBandJSX(true)\n        ),\n        _react2.default.createElement(\n          'p',\n          null,\n          'Another way of accomplishing this is embedding the operations inside of curly braces. Although arbitrary JavaScript can appear inside braces, it must return a string or JSX expression to work. JavaScript control flow operations such as if, for, and while do not return values so templates like ',\n          _react2.default.createElement(\n            'code',\n            null,\n            '{if (bool) ... else ...}'\n          ),\n          ' do not work.'\n        ),\n        _react2.default.createElement(\n          'p',\n          null,\n          'The following code generates the above output using the JavaScript ',\n          '\"?:\"',\n          ' operator and functional-style programming support to always return a value in the template:'\n        ),\n        _react2.default.createElement(\n          'pre',\n          { className: 'cs142-example-code' },\n          _react2.default.createElement(\n            'code',\n            { className: 'language-jsx' },\n            '<div>\\n  option ? <div>Option was True</div> : <div>Option was False</div> }\\n  <ul>\\n    {[0,1,2].map((i) =>  <li key={i}>List Item {i}</li>)}\\n  </ul>\\n</div>'\n          )\n        ),\n        _react2.default.createElement(\n          'p',\n          null,\n          'Short-circuit boolean operations such as ',\n          '\"&&\"',\n          ' can also be used to control what is rendered. For example the following code will make a sentence appear between to two paragraph when some characters are typed into the input box below.'\n        ),\n        _react2.default.createElement(\n          'pre',\n          { className: 'cs142-example-code' },\n          _react2.default.createElement(\n            'code',\n            { className: 'language-jsx' },\n            '<div>\\n  <p>A paragraph will appear between this paragraph</p>\\n  {\\n    this.state.inputValue && (\\n      <p>This text will appear when this.state.inputValue is truthy.\\n        this.state.inputValue === {this.state.inputValue}\\n      </p>\\n    )\\n  }\\n  <p>... and this one when some characters are typed into the input box below.</p>\\n</div>\\n'\n          )\n        ),\n        _react2.default.createElement(\n          'p',\n          null,\n          'Generates the output:'\n        ),\n        _react2.default.createElement(\n          'div',\n          { className: 'cs142-example-output' },\n          _react2.default.createElement(\n            'p',\n            null,\n            'A paragraph will appear between this paragraph'\n          ),\n          this.state.inputValue && _react2.default.createElement(\n            'p',\n            null,\n            'This text will appear when this.state.inputValue is truthy. this.state.inputValue === ',\n            this.state.inputValue\n          ),\n          _react2.default.createElement(\n            'p',\n            null,\n            '... and this one when some characters are typed into the below box.'\n          )\n        ),\n        _react2.default.createElement(\n          'h3',\n          null,\n          'Input using DOM-like handlers'\n        ),\n        _react2.default.createElement(\n          'p',\n          null,\n          'Input in React is done using DOM-like event handlers. For example, JSX statements like:'\n        ),\n        _react2.default.createElement(\n          'pre',\n          { className: 'cs142-example-code' },\n          _react2.default.createElement(\n            'code',\n            { className: 'language-jsx' },\n            '<label htmlFor=\"inId\">Input Field: </label>\\n<input type=\"text\" value={this.state.inputValue} onChange={this.handleChangeBound} />'\n          )\n        ),\n        _react2.default.createElement(\n          'p',\n          null,\n          'will display the text from the inputValue property of the Component\\'s state in the input box (it starts out blank) and calls the function this.handleChangedBound every time the input field is changed. Typically this kind of input will be associated with a ',\n          _react2.default.createElement(\n            'a',\n            { href: 'https://reactjs.org/docs/handling-events.html' },\n            'Button'\n          ),\n          ' or inside a ',\n          _react2.default.createElement(\n            'a',\n            { href: 'https://reactjs.org/docs/forms.html' },\n            'Form'\n          ),\n          ' to allow the user to signal when they are finished changing the input field. Note the differences from HTML in ',\n          _react2.default.createElement(\n            'code',\n            null,\n            'onchange='\n          ),\n          ' become ',\n          _react2.default.createElement(\n            'code',\n            null,\n            'onChange='\n          ),\n          ' and',\n          _react2.default.createElement(\n            'code',\n            null,\n            'for='\n          ),\n          ' becoming ',\n          _react2.default.createElement(\n            'code',\n            null,\n            'htmlFor='\n          ),\n          '.'\n        ),\n        _react2.default.createElement(\n          'div',\n          { className: 'cs142-example-output' },\n          _react2.default.createElement(\n            'label',\n            { htmlFor: 'inId' },\n            'Input Field:'\n          ),\n          _react2.default.createElement('input', { id: 'inId', type: 'text', value: this.state.inputValue, onChange: this.handleChangeBound })\n        ),\n        _react2.default.createElement(\n          'p',\n          null,\n          'The handleChangeBound function updates this.state.inputValue with the value of the DOM element so its value can be access like ',\n          _react2.default.createElement(\n            'code',\n            null,\n            '{this.state.inputValue}'\n          ),\n          ' which returns \\xA0\\u201C ',\n          this.state.inputValue,\n          '  \\u201D. Note we can not directly call ',\n          _react2.default.createElement(\n            'code',\n            null,\n            'this.handleChange'\n          ),\n          ' since it is a method function of an object that is not available to the DOM. To handle this we create a new function ',\n          _react2.default.createElement(\n            'code',\n            null,\n            'this.handleChangeBound'\n          ),\n          ' that can call the method and use it here.'\n        ),\n        _react2.default.createElement(\n          'p',\n          null,\n          'If we want to pass arguments to event handling functions we can use inlined arrow function definitions like so:'\n        ),\n        _react2.default.createElement(\n          'pre',\n          { className: 'cs142-example-code' },\n          _react2.default.createElement(\n            'code',\n            { className: 'language-jsx' },\n            '<div className=\"cs142-example-output\">\\n  <p>Test button clicks.\\n    {\\n      this.state.buttonWasClicked &&\\n      <span>Last button clicked was: {this.state.buttonWasClicked}</span>\\n    }\\n  </p>\\n  <button\\n    type=\"button\"\\n    onClick={e => this.handleButtonClick(\"one\", e)}\\n  >\\n    Call handleButtonClick function with one\\n  </button>\\n  <button\\n    type=\"button\"\\n    onClick={e => this.handleButtonClick(\"two\", e)}\\n  >\\n    Call handleButtonClick function with two\\n  </button>\\n</div>'\n          )\n        ),\n        _react2.default.createElement(\n          'p',\n          null,\n          'When the button is pushed it will call the arrow function, which will then call the method ',\n          _react2.default.createElement(\n            'code',\n            null,\n            'handleButtonClick'\n          ),\n          ' with the specified argument.'\n        ),\n        _react2.default.createElement(\n          'div',\n          { className: 'cs142-example-output' },\n          _react2.default.createElement(\n            'p',\n            null,\n            'Test button clicks. ',\n            this.state.buttonWasClicked && _react2.default.createElement(\n              'span',\n              null,\n              'Last button clicked was: ',\n              this.state.buttonWasClicked\n            )\n          ),\n          _react2.default.createElement(\n            'button',\n            { type: 'button', onClick: function onClick(e) {\n                return _this3.handleButtonClick('one', e);\n              } },\n            'Call handleButtonClick function with one'\n          ),\n          _react2.default.createElement(\n            'button',\n            { type: 'button', onClick: function onClick(e) {\n                return _this3.handleButtonClick('two', e);\n              } },\n            'Call handleButtonClick function with two'\n          )\n        )\n      );\n    }\n  }]);\n\n  return Example;\n}(_react2.default.Component);\n\nexports.default = Example;//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9jb21wb25lbnRzL2V4YW1wbGUvRXhhbXBsZS5qc3guanMiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly9wcm9qZWN0NC8uL2NvbXBvbmVudHMvZXhhbXBsZS9FeGFtcGxlLmpzeD82NGY3Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgJy4vRXhhbXBsZS5jc3MnO1xuXG4vKlxuICBTaW5jZSB0aGlzIGNvbXBvbmVudCBzaG93cyBjb2RlIHdlIGluY2x1ZGUgdGhlIGh0dHBzOi8vcHJpc21qcy5jb20vXG4gIGZvcm1hdHRlci4gV2UgaW52b2tlIGl0IGJ5IGxhYmVsbGluZyBjb2RlIGJsb2NrcyB3aXRoIGNsYXNzPVwibGFuZ3VhZ2UtanN4XCJcbiovXG5pbXBvcnQgUHJpc20gZnJvbSAncHJpc21qcyc7XG5pbXBvcnQgJ3ByaXNtanMvY29tcG9uZW50cy9wcmlzbS1qc3guanMnO1xuaW1wb3J0ICcuLi8uLi9ub2RlX21vZHVsZXMvcHJpc21qcy90aGVtZXMvcHJpc20uY3NzJztcblxuLyogZXNsaW50LWRpc2FibGUgIHJlYWN0L2pzeC1vbmUtZXhwcmVzc2lvbi1wZXItbGluZSAqL1xuLyogZXNsaW50LWRpc2FibGUgIHJlYWN0L2Rlc3RydWN0dXJpbmctYXNzaWdubWVudCAqL1xuLyogZXNsaW50IG5vLXBsdXNwbHVzOiBbXCJlcnJvclwiLCB7IFwiYWxsb3dGb3JMb29wQWZ0ZXJ0aG91Z2h0c1wiOiB0cnVlIH1dICovXG5cbi8vIFJlYWN0IENvbXBvbmVudHMgYXJlIHN1YmNsYXNzIG9mIFJlYWN0LkNvbXBvbm1lbnQuXG5jbGFzcyBFeGFtcGxlIGV4dGVuZHMgUmVhY3QuQ29tcG9uZW50IHtcbiAgY29uc3RydWN0b3IocHJvcHMpIHtcbiAgICBzdXBlcihwcm9wcyk7IC8vIE11c3QgcnVuIHRoZSBjb25zdHJ1Y3RvciBvZiBSZWFjdC5Db21wb25lbnQgZmlyc3RcblxuICAgIC8vIENvbXBvbmVudHMgaGF2ZSBhIHNwZWNpYWwgcHJvcGVydHkgbmFtZWQgXCJzdGF0ZVwiIHRoYXQgaG9sZHMgc3RhdGUuXG4gICAgLy8gV2UgY2FuIGluaXRpYWxpemUgaXQgaGVyZS5cbiAgICAvLyBXZSByZWFkIHRoZSBleGFtcGxlIG1vZGVsIGRhdGEgaW50byB0aGUgc3RhdGUgdmFyaWFibGUgJ25hbWUnXG4gICAgdGhpcy5zdGF0ZSA9IHtcbiAgICAgIG5hbWU6IHdpbmRvdy5jczE0Mm1vZGVscy5leGFtcGxlTW9kZWwoKS5uYW1lLFxuICAgICAgY291bnRlcjogMCxcbiAgICAgIGlucHV0VmFsdWU6ICcnLFxuICAgICAgYnV0dG9uV2FzQ2xpY2tlZDogJycsXG4gICAgfTtcblxuICAgIC8vIFJlYWN0IGV2ZW50cyBhcmUgY2FsbGVkIGRpcmVjdGx5IGZyb20gRE9NIGV2ZW50IGhhbmRsZXJzXG4gICAgLy8gc28gd2UgY2Fubm90IGRpcmVjdGx5IGNhbGwgdGhlIG1ldGhvZHMgb2YgdGhpcyBjbGFzcy4gV2VcbiAgICAvLyBnZW5lcmF0ZSBuZXcgZnVuY3Rpb25zIHRoYXQgaGFuZGxlIHRoZSBldmVudCBieSBqdXN0IGNhbGxpbmdcbiAgICAvLyB0aGUgbWV0aG9kIHRoYXQgaGFuZGxlcyB0aGUgZXZlbnQuXG4gICAgdGhpcy5oYW5kbGVDaGFuZ2VCb3VuZCA9IGV2ZW50ID0+IHRoaXMuaGFuZGxlQ2hhbmdlKGV2ZW50KTtcbiAgICAvLyBOb3RlOiBBIGNvbW1tb24gaWRpb20gaW4gUmVhY3QgY29kZSBpcyB0byB1c2UgSmF2YVNjcmlwdCBiaW5kKCkgdG9cbiAgICAvLyBzbWFzaCB0aGUgbWV0aG9kIHRvIGFjY29tcGxpc2ggdGhpcyBwYXNzdGhyb3VnaCB0byB0aGUgbWV0aG9kOlxuICAgIC8vICAgICAgdGhpcy5oYW5kbGVDaGFuZ2UgPSB0aGlzLmhhbmRsZUNoYW5nZS5iaW5kKHRoaXMpO1xuICB9XG5cbiAgLy8gUmVhY3QgY29tcG9uZW50cyBoYXZlIHNldmVyYWwgXCJsaWZlY3ljbGUgZnVuY3Rpb25zXCJcbiAgLy8gaHR0cHM6Ly9yZWFjdGpzLm9yZy9kb2NzL3JlYWN0LWNvbXBvbmVudC5odG1sXG4gIC8vIHRoYXQgYXJlIHVzZWQgdG8gaW5mb3JtIHRoZSBDb21wb25lbnQgb2YgaW50ZXJlc3RpbmcgZXZlbnRzLlxuXG4gIC8vIGNvbXBvbmVudERpZE1vdW50IC0gQ2FsbGVkIHdoZW4gQ29tcG9uZW50IGlzIGFjdGl2aWF0ZWRcbiAgY29tcG9uZW50RGlkTW91bnQoKSB7XG4gICAgLy8gVG8gZGVtb25zdGF0ZSBzdGF0ZSB1cGRhdGluZyB3ZSBkZWZpbmUgYSBmdW5jdGlvblxuICAgIC8vIHRoYXQgaW5jcmVtZW50cyB0aGUgY291bnRlciBzdGF0ZSBhbmQgaW5zdHJ1Y3QgdGhlXG4gICAgLy8gRE9NIHRvIGNhbGwgaXQgZXZlcnkgMiBzZWNvbmRzLlxuICAgIC8qIGVzbGludC1kaXNhYmxlIHJlYWN0L25vLWFjY2Vzcy1zdGF0ZS1pbi1zZXRzdGF0ZSAqL1xuICAgIGNvbnN0IGNvdW50ZXJJbmNyRnVuYyA9ICgpID0+IHRoaXMuc2V0U3RhdGUoe1xuICAgICAgY291bnRlcjogdGhpcy5zdGF0ZS5jb3VudGVyICsgMSxcbiAgICB9KTtcbiAgICB0aGlzLnRpbWVySUQgPSBzZXRJbnRlcnZhbChjb3VudGVySW5jckZ1bmMsIDIgKiAxMDAwKTtcblxuICAgIC8vIFRyaWdnZXIgdGhlIGNvZGUgY29sb3JpbmdcbiAgICBQcmlzbS5oaWdobGlnaHRBbGwoKTtcbiAgfVxuXG4gIC8vIGNvbXBvbmVudFdpbGxVbm1vdW50IC0gQ2FsbGVkIHdoZW4gQ29tcG9uZW50IGlzIGRlYWN0aXZhdGVkLlxuICBjb21wb25lbnRXaWxsVW5tb3VudCgpIHtcbiAgICAvLyBXZSBuZWVkIHRvIHRlbGwgdGhlIERPTSB0byBzdG9wIGNhbGxpbmcgdXMgb3RoZXJ3aXNlIFJlYWN0XG4gICAgLy8gd2lsbCBjb21wbGFpbiB3aGVuIHdlIGNhbGwgc2V0U3RhdGUgb24gYW4gdW5tb3VudGVkIGNvbXBvbmVudC5cbiAgICBjbGVhckludGVydmFsKHRoaXMudGltZXJJRCk7XG4gIH1cblxuICAvLyBNZXRob2QgY2FsbGVkIHdoZW4gdGhlIGlucHV0IGJveCBpcyB0eXBlZCBpbnRvLlxuICBoYW5kbGVDaGFuZ2UoZXZlbnQpIHtcbiAgICB0aGlzLnNldFN0YXRlKHsgaW5wdXRWYWx1ZTogZXZlbnQudGFyZ2V0LnZhbHVlIH0pO1xuICB9XG5cbiAgLy8gTWV0aG9kIGNhbGxlZCB3aGVuIHRoZSBidXR0b24gaXMgcHVzaGVkXG4gIC8qIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBuby11bnVzZWQtdmFycyAqL1xuICBoYW5kbGVCdXR0b25DbGljayhidXR0b25OYW1lLCBldmVudCkge1xuICAgIHRoaXMuc2V0U3RhdGUoeyBidXR0b25XYXNDbGlja2VkOiBidXR0b25OYW1lIH0pO1xuICB9XG5cbiAgLyogZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIGNsYXNzLW1ldGhvZHMtdXNlLXRoaXMgKi9cbiAgb3V0T2ZCYW5kSlNYKG9wdGlvbikge1xuICAgIGxldCBvcHRpb25KU1g7XG4gICAgY29uc3QgbGlzdEl0ZW1zID0gW107XG4gICAgaWYgKG9wdGlvbikge1xuICAgICAgb3B0aW9uSlNYID0gPGRpdj5PcHRpb24gd2FzIFRydWU8L2Rpdj47XG4gICAgfSBlbHNlIHtcbiAgICAgIG9wdGlvbkpTWCA9IDxkaXY+T3B0aW9uIHdhcyBGYWxzZTwvZGl2PjtcbiAgICB9XG4gICAgZm9yIChsZXQgaSA9IDA7IGkgPCAzOyBpKyspIHtcbiAgICAgIGxpc3RJdGVtc1tpXSA9IDxsaSBrZXk9e2l9PiBMaXN0IEl0ZW0ge2l9IDwvbGk+O1xuICAgIH1cbiAgICBjb25zdCByZXRWYWwgPSAoXG4gICAgICA8ZGl2PlxuICAgICAgICB7b3B0aW9uSlNYfVxuICAgICAgICA8dWw+e2xpc3RJdGVtc308L3VsPlxuICAgICAgPC9kaXY+XG4gICAgKTtcblxuICAgIHJldHVybiByZXRWYWw7XG4gIH1cblxuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxkaXYgY2xhc3NOYW1lPVwiY29udGFpbmVyIEV4YW1wbGVcIj5cbiAgICAgICAgPGgxPkNTMTQyIFByb2plY3QjNCBSZWFjdC5qcyBFeGFtcGxlPC9oMT5cblxuICAgICAgICA8ZGl2IGNsYXNzTmFtZT1cIm1vdHRvLXVwZGF0ZVwiPlxuICAgICAgICAgIDxzcGFuIGlkPVwibW90dG8tbmFtZVwiPnt3aW5kb3cuY3MxNDJtb2RlbHMuZXhhbXBsZU1vdHRvKCkubmFtZX08L3NwYW4+IDxiciAvPlxuICAgICAgICAgIDxzcGFuIGlkPVwibW90dG8tdmFsdWVcIj57d2luZG93LmNzMTQybW9kZWxzLmV4YW1wbGVNb3R0bygpLm1vdHRvfTwvc3Bhbj4gPGJyIC8+XG4gICAgICAgICAgPGJyIC8+XG4gICAgICAgICAgPGxhYmVsIGh0bWxGb3I9XCJmbmFtZVwiPk5hbWU6IDwvbGFiZWw+XG4gICAgICAgICAgPGlucHV0IHR5cGU9XCJ0ZXh0XCIgcGxhY2Vob2xkZXI9e3dpbmRvdy5jczE0Mm1vZGVscy5leGFtcGxlTW90dG8oKS5uYW1lfSBpZD1cImZuYW1lXCIgb25DaGFuZ2U9e2UgPT4gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoXCJtb3R0by1uYW1lXCIpLmlubmVySFRNTCA9IGUudGFyZ2V0LnZhbHVlfSAvPlxuICAgICAgICAgIDxiciAvPlxuICAgICAgICAgIDxsYWJlbCBodG1sRm9yPVwiZm1vdHRvXCI+TW90dG86IDwvbGFiZWw+XG4gICAgICAgICAgPGlucHV0IHR5cGU9XCJ0ZXh0XCIgcGxhY2Vob2xkZXI9e3dpbmRvdy5jczE0Mm1vZGVscy5leGFtcGxlTW90dG8oKS5tb3R0b30gaWQ9XCJmbW90dG9cIiBvbkNoYW5nZT17ZSA9PiBkb2N1bWVudC5nZXRFbGVtZW50QnlJZChcIm1vdHRvLXZhbHVlXCIpLmlubmVySFRNTCA9IGUudGFyZ2V0LnZhbHVlfSAvPlxuICAgICAgICA8L2Rpdj5cblxuICAgICAgICA8cD5cbiAgICAgICAgICBUaGlzIHZpZXcgaXMgYW4gZXhhbXBsZSBvZiBhXG4gICAgICAgICAgJm5ic3A7XG4gICAgICAgICAgPGEgaHJlZj1cImh0dHBzOi8vcmVhY3Rqcy5vcmcvZG9jcy9yZWFjdC1jb21wb25lbnQuaHRtbFwiIHRhcmdldD1cIl9ibGFua1wiIHJlbD1cIm5vb3BlbmVyIG5vcmVmZXJyZXJcIj5cbiAgICAgICAgICAgIFJlYWN0LmpzIENvbXBvbmVudFxuICAgICAgICAgIDwvYT5cbiAgICAgICAgICAmbmJzcDtcbiAgICAgICAgICBuYW1lZCA8c3BhbiBjbGFzc05hbWU9XCJjczE0Mi1jb2RlLW5hbWVcIj5FeGFtcGxlPC9zcGFuPi5cbiAgICAgICAgICBJdCBpcyBsb2NhdGVkIGluIHRoZVxuICAgICAgICAgIGZpbGUgPGNvZGU+Y29tcG9uZW50cy9leGFtcGxlL0V4YW1wbGUuanN4PC9jb2RlPi5cbiAgICAgICAgICBJdCBsb29rcyBsaWtlIGEgSmF2YVNjcmlwdCBjbGFzcyBuYW1lZCBFeGFtcGxlIHRoYXQgaGFzIGEgbWV0aG9kIG5hbWVkXG4gICAgICAgICAgbmFtZWQgPHNwYW4gY2xhc3NOYW1lPVwiY3MxNDItY29kZS1uYW1lXCI+cmVuZGVyPC9zcGFuPiwgd2hpY2hcbiAgICAgICAgICBhcHBlYXJzIHRvIHdyaXR0ZW4gaW4gc29tZXRoaW5nIHRoYXQgbG9va3MgbGlrZSBIVE1MLlxuICAgICAgICA8L3A+XG4gICAgICAgIDxwPlxuICAgICAgICAgIEl0IGlzIGFjdHVhbGx5IHdyaXR0ZW4gaW4gYSBsYW5ndWFnZSBuYW1lZCAmbmJzcDtcbiAgICAgICAgICA8YSBocmVmPVwiaHR0cHM6Ly9yZWFjdGpzLm9yZy9kb2NzL2ludHJvZHVjaW5nLWpzeC5odG1sXCIgdGFyZ2V0PVwiX2JsYW5rXCIgcmVsPVwibm9vcGVuZXIgbm9yZWZlcnJlclwiPlxuICAgICAgICAgICAgSlNYXG4gICAgICAgICAgPC9hPlxuICAgICAgICAgICZuYnNwOyB0aGF0IGlzIHJ1biBhcyBhIHByZXByb2Nlc3NvciB0byB0aGUgSFRNTC1saWtlXG4gICAgICAgICAgbGFuZ3VhZ2UgdG8gSmF2YVNjcmlwdC4gVGhlIGdlbmVyYXRlZCBKYXZhU2NpcHQgaXMgbGltaXRlZCB0byBjYWxsc1xuICAgICAgICAgIHRvIHRoZSBSZWFjdC5qcyAmbmJzcDtcbiAgICAgICAgICA8YSBocmVmPVwiaHR0cHM6Ly9yZWFjdGpzLm9yZy9kb2NzL3JlYWN0LWFwaS5odG1sI2NyZWF0ZWVsZW1lbnRcIiB0YXJnZXQ9XCJfYmxhbmtcIiByZWw9XCJub29wZW5lciBub3JlZmVycmVyXCI+XG4gICAgICAgICAgICBjcmVhdGVFbGVtZW50XG4gICAgICAgICAgPC9hPlxuICAgICAgICAgICZuYnNwOyBmdW5jdGlvbiB3aGljaCBhbGxvdyB1cyB0byB3cml0ZSBzb21ldGhpbmcgdGhhdCBsb29rc1xuICAgICAgICAgIGxpa2UgSFRNTCB0byBkZXNjcmliZSB3aGF0IHRoZSBjb21wb25lbnQgcmVuZGVycy5cbiAgICAgICAgPC9wPlxuICAgICAgICA8cD5cbiAgICAgICAgICBBbHRob3VnaCBKU1ggbG9va3MgbGlrZSBIVE1MLCBpdCBpcyBub3QgSFRNTC4gU29tZSBvZiB0aGUgZGlmZmVyZW5jZXNcbiAgICAgICAgICBhcmUgbmVjZXNzYXJ5IGR1ZSB0byBlbWJlZGRkaW5nXG4gICAgICAgICAgaW4gSmF2YVNjcmlwdC4gRm9yIGV4YW1wbGUsIHJhdGhlciB0aGFuIDxjb2RlPmNsYXNzPTwvY29kZT4gd2VcbiAgICAgICAgICB1c2UgPGNvZGU+Y2xhc3NOYW1lPTwvY29kZT4gKGNsYXNzIGlzIGEgSmF2c1NjcmlwdCBrZXl3b3JkKS5cbiAgICAgICAgICBBbHRob3VnaCBpdCBpcyBwb3NzaWJsZSB0byBpbnRlcmxlYXZlIEphdmFTY3JpcHQgYW5kIEpTWCBjb2RlLCBjYXJlIGlzXG4gICAgICAgICAgbmVlZGVkIHNpbmNlIGNvbnRlbnRzIG9mIEpTWCB0YWdzIGFyZSBwcm9jZXNzZWQgaW50byBhcmd1bWVudHMgdG8gYVxuICAgICAgICAgIGZ1bmN0aW9uIGxpbWl0aW5nIHdoYXQgY2FuIGJlIGRvbmUgYXMgd2lsbCBiZSBzZWVuIGJlbG93LlxuICAgICAgICA8L3A+XG5cbiAgICAgICAgPGgzPlRlbXBsYXRlIHN1YnN0aXR1dGlvbjwvaDM+XG5cbiAgICAgICAgPHA+XG4gICAgICAgICAgSlNYIHRyZWF0cyB0ZXh0IGluc2lkZSBvZiBwYXJlbnRoZXNlcyAoZS5nLiA8Y29kZT57J3tKYXZhU2NyaXB0RXhwcmVzc2lvbn0nfTwvY29kZT4pIGFzXG4gICAgICAgICAgdGVtcGxhdGVzIHdoZXJlIHRoZSBKYXZhU2NyaXB0IGV4cHJlc3Npb24gaXMgZXZhbHVhdGVkIGluIHRoZSBjb250ZXh0IG9mIHRoZSBjdXJyZW50XG4gICAgICAgICAgZnVuY3Rpb24gYW5kIHdob3NlIHZhbHVlIHJlcGxhY2VzIHRoZSB0ZW1wbGF0ZSBpbiB0aGUgc3RyaW5nLiBUaGUgZXhwcmVzc2lvblxuICAgICAgICAgIGNhbiBldmFsdWF0ZSB0byBhIEphdmFTY3JpcHQgc3RyaW5nIG9yIHZhbHVlIGZyb20gYSBKU1ggZXhwcmVzc2lvbi4gVGhpcyBmZWF0dXJlIGFsbG93c1xuICAgICAgICAgIGNvbXBvbm1lbnQmYXBvcztzIHNwZWNpZmljYXRpb24gdG8gdXNlIHRlbXBsYXRlZCBIVE1MLlxuICAgICAgICA8L3A+XG5cbiAgICAgICAgPHA+XG4gICAgICAgICAgVGhlIEV4YW1wbGUgY2xhc3MgY29uc3RydWN0b3Igc2V0cyB0aGUgb2JqZWN0JmFwb3M7c1xuICAgICAgICAgIHByb3BlcnR5IDxjb2RlPnN0YXRlLm5hbWU8L2NvZGU+IChzZWUgdGhlIGFzc2lnbm1lbnRcbiAgICAgICAgICB0byA8Y29kZT50aGlzLnN0YXRlLm5hbWU8L2NvZGU+IGluIDxjb2RlPkV4YW1wbGUuanN4PC9jb2RlPilcbiAgICAgICAgICBmcm9tIHRoZSBtb2RlbCBpbiB0aGUgRE9NIHdoaWNoIGhhcyBhIHZhbHVlIG9mICZsZHF1bzsge3RoaXMuc3RhdGUubmFtZX1cbiAgICAgICAgICAmcmRxdW87IHNvOlxuICAgICAgICA8L3A+XG4gICAgICAgIDxwcmUgY2xhc3NOYW1lPVwiY3MxNDItZXhhbXBsZS1jb2RlXCI+XG4gICAgICAgICAgPGNvZGUgY2xhc3NOYW1lPVwibGFuZ3VhZ2UtanN4XCI+XG4gICAgICAgICAgICB7XG5gPHA+TXkgbmFtZSBpcyBcInt0aGlzLnN0YXRlLm5hbWV9XCIuPC9wPmBcbiAgICAgICAgICAgIH1cbiAgICAgICAgICA8L2NvZGU+XG4gICAgICAgIDwvcHJlPlxuICAgICAgICA8cD5cbiAgICAgICAgICBzaG91bGQgcmVuZGVyIGFzOlxuICAgICAgICA8L3A+XG4gICAgICAgIDxwIGNsYXNzTmFtZT1cImNzMTQyLWV4YW1wbGUtb3V0cHV0XCI+XG4gICAgICAgICAgTXkgbmFtZSBpcyAmbGRxdW87IHt0aGlzLnN0YXRlLm5hbWV9ICZyZHF1bzsuXG4gICAgICAgIDwvcD5cblxuICAgICAgICA8aDM+XG4gICAgICAgICAgT25lLXdheSBiaW5kaW5nIGZyb20gSmF2YVNjcmlwdCB0byBIVE1MXG4gICAgICAgIDwvaDM+XG5cbiAgICAgICAgPHA+XG4gICAgICAgICAgUmVhY3QgYXV0b21hdGljYWxseSBwcm9wYWdhdGVzIGFueSBjaGFuZ2VzIHRvIEphdmFTY3JpcHQgc3RhdGUgdG8gdGhlXG4gICAgICAgICAgSlNYIHRlbXBsYXRlcy4gRm9yIGV4YW1wbGVcbiAgICAgICAgICB0aGUgZm9sbG93aW5nIGNvZGUgPGNvZGU+KHsne3RoaXMuc3RhdGUuY291bnRlcn0nfSk8L2NvZGU+IGRpc3BsYXlzXG4gICAgICAgICAgdGhlIHN0YXRlLmNvdW50ZXIgcHJvcGVydHkgb2YgdGhlIEV4YW1wbGUgY29tcG9uZW50LlxuICAgICAgICAgIFRoZSBjb21wb25lbnQgc2V0cyBhIHRpbWVyXG4gICAgICAgICAgdGhhdCBpbmNyZW1lbnRzIHRoZSBjb3VudGVyIGV2ZXJ5IDIgc2Vjb25kcy4gVGhlIHZhbHVlIG9mIHRoZVxuICAgICAgICAgIGNvdW50ZXIgY2FuIGJlIHNlZW4gY2hhbmdpbmcgaGVyZToge3RoaXMuc3RhdGUuY291bnRlcn0uXG4gICAgICAgIDwvcD5cblxuICAgICAgICA8aDM+Q29udHJvbCBmbG93PC9oMz5cbiAgICAgICAgPHA+XG4gICAgICAgICAgTW9zdCB0ZW1wbGF0aW5nIGVuZ2luZXMgaW5jbHVkZSBzdXBwb3J0IGZvciBkb2luZyBjb25kaXRpb25hbFxuICAgICAgICAgIHJlbmRlcmluZyBhbmQgaXRlcmF0aW9uLiBKU1ggaXMgZW1iZWRkZWQgaW4gYW5kIGlzIHRyYW5zcGlsZWQgdG9cbiAgICAgICAgICBKYXZhU2NyaXB0IHNvIHdlIGNhbiB1c2UgSmF2YVNjcmlwdCBsYW5ndWFnZSBjb25zdHJ1Y3RzIGZvciBtYW5hZ2luZyBjb250cm9sIGZsb3cuXG4gICAgICAgIDwvcD5cbiAgICAgICAgPHA+XG4gICAgICAgICAgT25lIHdheSBvZiBkb2luZyBjb250cm9sIHVzaW5nIEphdmFTY3JpcHQgaXMgdG8gYXNzaWduIEpTWCBmcmFnZW1lbnRzXG4gICAgICAgICAgdG8gSmF2YVNjcmlwdCB2YXJpYWJsZXMgYW5kIHVzZSBub3JtYWwgSmF2YVNjcmlwdCBjb250cm9sIGZsb3dcbiAgICAgICAgICBvcGVyYXRvcnMuIEZvciBleGFtcGxlLCB0aGUgZm9sbG93aW5nIGZ1bmN0aW9uIHNlbGVjdHMgYW1vbmcgdGhlXG4gICAgICAgICAgcG9zc3NpYmxlIG91dHB1dCBsaW5lcyBiYXNlZCBvbiBhbiBhcmd1bWVudCB0byB0aGUgZnVuY3Rpb24gYW5kXG4gICAgICAgICAgdXNlcyBhIGZvciBsb29wIHRvIHBvcHVsYXRlIGFuIGFycmF5LiBUaGVzZSBKYXZhU2NyaXB0IHZhcmlhYmxlc1xuICAgICAgICAgIGNhbiB0aGVuIGJlIHJlZmVycmVkIHRvIGluIEpTWCByZXR1cm5lZCBieSB0aGUgZnVuY3Rpb24uXG4gICAgICAgIDwvcD5cbiAgICAgICAgPHByZSBjbGFzc05hbWU9XCJjczE0Mi1leGFtcGxlLWNvZGVcIj5cbiAgICAgICAgICA8Y29kZSBjbGFzc05hbWU9XCJsYW5ndWFnZS1qc3hcIj5cbiAgICAgICAgICAgIHtcbmBmdW5jdGlvbiBvdXRPZkJhbmRKU1gob3B0aW9uKSB7XG4gIHZhciBvcHRpb25KU1g7XG4gIGlmIChvcHRpb24pIHtcbiAgICBvcHRpb25KU1ggPSA8ZGl2Pk9wdGlvbiB3YXMgVHJ1ZTwvZGl2PjtcbiAgfSBlbHNlIHtcbiAgICBvcHRpb25KU1ggID0gPGRpdj5PcHRpb24gd2FzIEZhbHNlPC9kaXY+O1xuICB9XG4gIHZhciBsaXN0SXRlbXMgPSBbXTtcbiAgZm9yICh2YXIgaSA9IDA7IGkgPCAzOyBpKyspIHtcbiAgICBsaXN0SXRlbXNbaV0gPSA8bGkga2V5PXtpfT5MaXN0IEl0ZW0ge2l9PC9saT47XG4gIH1cbiAgdmFyIHJldFZhbCA9XG4gICAgPGRpdj5cbiAgICAgIHtvcHRpb25KU1h9XG4gICAgICA8dWw+XG4gICAgICAgIHtsaXN0SXRlbXN9XG4gICAgICA8L3VsPlxuICAgIDwvZGl2PjtcblxuICByZXR1cm4gcmV0VmFsO1xufWBcbiAgICAgICAgICAgIH1cbiAgICAgICAgICA8L2NvZGU+XG4gICAgICAgIDwvcHJlPlxuICAgICAgICA8cD5cbiAgICAgICAgICAgIENhbGxpbmcgdGhpcyBmdW5jdGlvbiBmcm9tIGEgdGVtcGxhdGVcbiAgICAgICAgICAgIChpLmUuIDxjb2RlPnsne3RoaXMub3V0T2ZCYW5kSlNYKHRydWUpfSd9PC9jb2RlPilcbiAgICAgICAgICAgIHdvdWxkIGJlIGV4cGFuZCB0bzpcbiAgICAgICAgPC9wPlxuICAgICAgICA8ZGl2IGNsYXNzTmFtZT1cImNzMTQyLWV4YW1wbGUtb3V0cHV0XCI+e3RoaXMub3V0T2ZCYW5kSlNYKHRydWUpfTwvZGl2PlxuICAgICAgICA8cD5cbiAgICAgICAgICAgIEFub3RoZXIgd2F5IG9mIGFjY29tcGxpc2hpbmcgdGhpcyBpcyBlbWJlZGRpbmcgdGhlIG9wZXJhdGlvbnMgaW5zaWRlXG4gICAgICAgICAgICBvZiBjdXJseSBicmFjZXMuIEFsdGhvdWdoIGFyYml0cmFyeSBKYXZhU2NyaXB0IGNhbiBhcHBlYXIgaW5zaWRlXG4gICAgICAgICAgICBicmFjZXMsIGl0IG11c3QgcmV0dXJuIGEgc3RyaW5nIG9yIEpTWCBleHByZXNzaW9uIHRvIHdvcmsuXG4gICAgICAgICAgICBKYXZhU2NyaXB0IGNvbnRyb2wgZmxvdyBvcGVyYXRpb25zIHN1Y2ggYXMgaWYsIGZvciwgYW5kIHdoaWxlIGRvXG4gICAgICAgICAgICBub3QgcmV0dXJuIHZhbHVlcyBzbyB0ZW1wbGF0ZXNcbiAgICAgICAgICAgIGxpa2UgPGNvZGU+eyd7aWYgKGJvb2wpIC4uLiBlbHNlIC4uLn0nfTwvY29kZT4gZG8gbm90IHdvcmsuXG4gICAgICAgIDwvcD5cbiAgICAgICAgPHA+XG4gICAgICAgICAgICBUaGUgZm9sbG93aW5nIGNvZGUgZ2VuZXJhdGVzIHRoZSBhYm92ZSBvdXRwdXQgdXNpbmcgdGhlXG4gICAgICAgICAgICBKYXZhU2NyaXB0IHsnXCI/OlwiJ30gb3BlcmF0b3IgYW5kIGZ1bmN0aW9uYWwtc3R5bGUgcHJvZ3JhbW1pbmdcbiAgICAgICAgICAgIHN1cHBvcnQgdG8gYWx3YXlzIHJldHVybiBhIHZhbHVlIGluIHRoZSB0ZW1wbGF0ZTpcbiAgICAgICAgPC9wPlxuICAgICAgICA8cHJlIGNsYXNzTmFtZT1cImNzMTQyLWV4YW1wbGUtY29kZVwiPlxuICAgICAgICAgIDxjb2RlIGNsYXNzTmFtZT1cImxhbmd1YWdlLWpzeFwiPlxuICAgICAgICAgICAge1xuYDxkaXY+XG4gIG9wdGlvbiA/IDxkaXY+T3B0aW9uIHdhcyBUcnVlPC9kaXY+IDogPGRpdj5PcHRpb24gd2FzIEZhbHNlPC9kaXY+IH1cbiAgPHVsPlxuICAgIHtbMCwxLDJdLm1hcCgoaSkgPT4gIDxsaSBrZXk9e2l9Pkxpc3QgSXRlbSB7aX08L2xpPil9XG4gIDwvdWw+XG48L2Rpdj5gXG4gICAgICAgICAgICB9XG4gICAgICAgICAgPC9jb2RlPlxuICAgICAgICA8L3ByZT5cbiAgICAgICAgPHA+XG4gICAgICAgICAgU2hvcnQtY2lyY3VpdCBib29sZWFuIG9wZXJhdGlvbnMgc3VjaCBhcyB7J1wiJiZcIid9IGNhblxuICAgICAgICAgIGFsc28gYmUgdXNlZCB0byBjb250cm9sIHdoYXQgaXMgcmVuZGVyZWQuIEZvciBleGFtcGxlIHRoZSBmb2xsb3dpbmdcbiAgICAgICAgICBjb2RlIHdpbGwgbWFrZSBhIHNlbnRlbmNlIGFwcGVhciBiZXR3ZWVuIHRvIHR3byBwYXJhZ3JhcGggd2hlbiBzb21lXG4gICAgICAgICAgY2hhcmFjdGVycyBhcmUgdHlwZWQgaW50byB0aGUgaW5wdXQgYm94IGJlbG93LlxuICAgICAgICA8L3A+XG4gICAgICAgIDxwcmUgY2xhc3NOYW1lPVwiY3MxNDItZXhhbXBsZS1jb2RlXCI+XG4gICAgICAgICAgPGNvZGUgY2xhc3NOYW1lPVwibGFuZ3VhZ2UtanN4XCI+XG4gICAgICAgICAgICB7XG5gPGRpdj5cbiAgPHA+QSBwYXJhZ3JhcGggd2lsbCBhcHBlYXIgYmV0d2VlbiB0aGlzIHBhcmFncmFwaDwvcD5cbiAge1xuICAgIHRoaXMuc3RhdGUuaW5wdXRWYWx1ZSAmJiAoXG4gICAgICA8cD5UaGlzIHRleHQgd2lsbCBhcHBlYXIgd2hlbiB0aGlzLnN0YXRlLmlucHV0VmFsdWUgaXMgdHJ1dGh5LlxuICAgICAgICB0aGlzLnN0YXRlLmlucHV0VmFsdWUgPT09IHt0aGlzLnN0YXRlLmlucHV0VmFsdWV9XG4gICAgICA8L3A+XG4gICAgKVxuICB9XG4gIDxwPi4uLiBhbmQgdGhpcyBvbmUgd2hlbiBzb21lIGNoYXJhY3RlcnMgYXJlIHR5cGVkIGludG8gdGhlIGlucHV0IGJveCBiZWxvdy48L3A+XG48L2Rpdj5cbmBcbiAgICAgICAgICAgIH1cbiAgICAgICAgICA8L2NvZGU+XG4gICAgICAgIDwvcHJlPlxuICAgICAgICA8cD5cbiAgICAgICAgICBHZW5lcmF0ZXMgdGhlIG91dHB1dDpcbiAgICAgICAgPC9wPlxuICAgICAgICA8ZGl2IGNsYXNzTmFtZT1cImNzMTQyLWV4YW1wbGUtb3V0cHV0XCI+XG4gICAgICAgICAgPHA+XG4gICAgICAgICAgICBBIHBhcmFncmFwaCB3aWxsIGFwcGVhciBiZXR3ZWVuIHRoaXMgcGFyYWdyYXBoXG4gICAgICAgICAgPC9wPlxuICAgICAgICAgIHtcbiAgICAgICAgICAgIHRoaXMuc3RhdGUuaW5wdXRWYWx1ZVxuICAgICAgICAgICAgJiYgKFxuICAgICAgICAgICAgICA8cD5cbiAgICAgICAgICAgICAgICBUaGlzIHRleHQgd2lsbCBhcHBlYXIgd2hlbiB0aGlzLnN0YXRlLmlucHV0VmFsdWUgaXMgdHJ1dGh5LlxuICAgICAgICAgICAgICAgIHRoaXMuc3RhdGUuaW5wdXRWYWx1ZSA9PT0ge3RoaXMuc3RhdGUuaW5wdXRWYWx1ZX1cbiAgICAgICAgICAgICAgPC9wPlxuICAgICAgICAgICAgKVxuICAgICAgICAgIH1cbiAgICAgICAgICA8cD5cbiAgICAgICAgICAgIC4uLiBhbmQgdGhpcyBvbmUgd2hlbiBzb21lIGNoYXJhY3RlcnMgYXJlIHR5cGVkIGludG8gdGhlIGJlbG93IGJveC5cbiAgICAgICAgICA8L3A+XG4gICAgICAgIDwvZGl2PlxuXG4gICAgICAgIDxoMz5JbnB1dCB1c2luZyBET00tbGlrZSBoYW5kbGVyczwvaDM+XG4gICAgICAgIDxwPlxuICAgICAgICAgIElucHV0IGluIFJlYWN0IGlzIGRvbmUgdXNpbmcgRE9NLWxpa2UgZXZlbnQgaGFuZGxlcnMuIEZvciBleGFtcGxlLCBKU1ggc3RhdGVtZW50cyBsaWtlOlxuICAgICAgICA8L3A+XG4gICAgICAgIDxwcmUgY2xhc3NOYW1lPVwiY3MxNDItZXhhbXBsZS1jb2RlXCI+XG4gICAgICAgICAgPGNvZGUgY2xhc3NOYW1lPVwibGFuZ3VhZ2UtanN4XCI+XG4gICAgICAgICAgICB7XG5gPGxhYmVsIGh0bWxGb3I9XCJpbklkXCI+SW5wdXQgRmllbGQ6IDwvbGFiZWw+XG48aW5wdXQgdHlwZT1cInRleHRcIiB2YWx1ZT17dGhpcy5zdGF0ZS5pbnB1dFZhbHVlfSBvbkNoYW5nZT17dGhpcy5oYW5kbGVDaGFuZ2VCb3VuZH0gLz5gXG4gICAgICAgICAgICB9XG4gICAgICAgICAgPC9jb2RlPlxuICAgICAgICA8L3ByZT5cbiAgICAgICAgPHA+XG4gICAgICAgICAgd2lsbCBkaXNwbGF5IHRoZSB0ZXh0IGZyb20gdGhlIGlucHV0VmFsdWUgcHJvcGVydHkgb2YgdGhlXG4gICAgICAgICAgQ29tcG9uZW50JmFwb3M7cyBzdGF0ZSBpbiB0aGUgaW5wdXQgYm94IChpdCBzdGFydHNcbiAgICAgICAgICBvdXQgYmxhbmspIGFuZCBjYWxscyB0aGUgZnVuY3Rpb24gdGhpcy5oYW5kbGVDaGFuZ2VkQm91bmQgZXZlcnkgdGltZSB0aGVcbiAgICAgICAgICBpbnB1dCBmaWVsZCBpcyBjaGFuZ2VkLlxuICAgICAgICAgIFR5cGljYWxseSB0aGlzIGtpbmQgb2YgaW5wdXQgd2lsbFxuICAgICAgICAgIGJlIGFzc29jaWF0ZWQgd2l0aFxuICAgICAgICAgIGEgPGEgaHJlZj1cImh0dHBzOi8vcmVhY3Rqcy5vcmcvZG9jcy9oYW5kbGluZy1ldmVudHMuaHRtbFwiPkJ1dHRvbjwvYT4gb3JcbiAgICAgICAgICBpbnNpZGUgYSA8YSBocmVmPVwiaHR0cHM6Ly9yZWFjdGpzLm9yZy9kb2NzL2Zvcm1zLmh0bWxcIj5Gb3JtPC9hPiB0byBhbGxvd1xuICAgICAgICAgIHRoZSB1c2VyIHRvIHNpZ25hbCB3aGVuIHRoZXkgYXJlIGZpbmlzaGVkIGNoYW5naW5nIHRoZSBpbnB1dCBmaWVsZC5cbiAgICAgICAgICBOb3RlIHRoZSBkaWZmZXJlbmNlcyBmcm9tIEhUTUxcbiAgICAgICAgICBpbiA8Y29kZT5vbmNoYW5nZT08L2NvZGU+IGJlY29tZSA8Y29kZT5vbkNoYW5nZT08L2NvZGU+IGFuZFxuICAgICAgICAgIDxjb2RlPmZvcj08L2NvZGU+IGJlY29taW5nIDxjb2RlPmh0bWxGb3I9PC9jb2RlPi5cbiAgICAgICAgPC9wPlxuXG4gICAgICAgIHtcbiAgICAgICAgLyogZXNsaW50LWRpc2FibGUganN4LWExMXkvbGFiZWwtaGFzLWFzc29jaWF0ZWQtY29udHJvbCAqL1xuICAgICAgICAvKiBlc2xpbnQtZGlzYWJsZSBqc3gtYTExeS9sYWJlbC1oYXMtZm9yICovXG4gICAgICAgIH1cbiAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJjczE0Mi1leGFtcGxlLW91dHB1dFwiPlxuICAgICAgICAgIDxsYWJlbCBodG1sRm9yPVwiaW5JZFwiPklucHV0IEZpZWxkOlxuICAgICAgICAgIDwvbGFiZWw+XG4gICAgICAgICAgPGlucHV0IGlkPVwiaW5JZFwiIHR5cGU9XCJ0ZXh0XCIgdmFsdWU9e3RoaXMuc3RhdGUuaW5wdXRWYWx1ZX0gb25DaGFuZ2U9e3RoaXMuaGFuZGxlQ2hhbmdlQm91bmR9IC8+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8cD5cbiAgICAgICAgICBUaGUgaGFuZGxlQ2hhbmdlQm91bmQgZnVuY3Rpb24gdXBkYXRlcyB0aGlzLnN0YXRlLmlucHV0VmFsdWUgd2l0aCB0aGVcbiAgICAgICAgICB2YWx1ZSBvZiB0aGUgRE9NIGVsZW1lbnQgc28gaXRzIHZhbHVlXG4gICAgICAgICAgY2FuIGJlIGFjY2VzcyBsaWtlIDxjb2RlPnsne3RoaXMuc3RhdGUuaW5wdXRWYWx1ZX0nfTwvY29kZT4gd2hpY2hcbiAgICAgICAgICByZXR1cm5zICZuYnNwOyZsZHF1bzsge3RoaXMuc3RhdGUuaW5wdXRWYWx1ZX0gICZyZHF1bzsuIE5vdGUgd2UgY2FuIG5vdCBkaXJlY3RseVxuICAgICAgICAgIGNhbGwgPGNvZGU+dGhpcy5oYW5kbGVDaGFuZ2U8L2NvZGU+IHNpbmNlIGl0IGlzIGEgbWV0aG9kIGZ1bmN0aW9uIG9mIGFuIG9iamVjdFxuICAgICAgICAgIHRoYXQgaXMgbm90IGF2YWlsYWJsZSB0byB0aGUgRE9NLiBUbyBoYW5kbGUgdGhpcyB3ZSBjcmVhdGUgYSBuZXdcbiAgICAgICAgICBmdW5jdGlvbiA8Y29kZT50aGlzLmhhbmRsZUNoYW5nZUJvdW5kPC9jb2RlPiB0aGF0IGNhbiBjYWxsIHRoZSBtZXRob2QgYW5kIHVzZSBpdCBoZXJlLlxuICAgICAgICA8L3A+XG4gICAgICAgIDxwPlxuICAgICAgICAgIElmIHdlIHdhbnQgdG8gcGFzcyBhcmd1bWVudHMgdG8gZXZlbnQgaGFuZGxpbmcgZnVuY3Rpb25zIHdlIGNhbiB1c2UgaW5saW5lZFxuICAgICAgICAgIGFycm93IGZ1bmN0aW9uIGRlZmluaXRpb25zIGxpa2Ugc286XG4gICAgICAgIDwvcD5cbiAgICAgICAgPHByZSBjbGFzc05hbWU9XCJjczE0Mi1leGFtcGxlLWNvZGVcIj5cbiAgICAgICAgICA8Y29kZSBjbGFzc05hbWU9XCJsYW5ndWFnZS1qc3hcIj5cbiAgICAgICAgICAgIHtcbmA8ZGl2IGNsYXNzTmFtZT1cImNzMTQyLWV4YW1wbGUtb3V0cHV0XCI+XG4gIDxwPlRlc3QgYnV0dG9uIGNsaWNrcy5cbiAgICB7XG4gICAgICB0aGlzLnN0YXRlLmJ1dHRvbldhc0NsaWNrZWQgJiZcbiAgICAgIDxzcGFuPkxhc3QgYnV0dG9uIGNsaWNrZWQgd2FzOiB7dGhpcy5zdGF0ZS5idXR0b25XYXNDbGlja2VkfTwvc3Bhbj5cbiAgICB9XG4gIDwvcD5cbiAgPGJ1dHRvblxuICAgIHR5cGU9XCJidXR0b25cIlxuICAgIG9uQ2xpY2s9e2UgPT4gdGhpcy5oYW5kbGVCdXR0b25DbGljayhcIm9uZVwiLCBlKX1cbiAgPlxuICAgIENhbGwgaGFuZGxlQnV0dG9uQ2xpY2sgZnVuY3Rpb24gd2l0aCBvbmVcbiAgPC9idXR0b24+XG4gIDxidXR0b25cbiAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICBvbkNsaWNrPXtlID0+IHRoaXMuaGFuZGxlQnV0dG9uQ2xpY2soXCJ0d29cIiwgZSl9XG4gID5cbiAgICBDYWxsIGhhbmRsZUJ1dHRvbkNsaWNrIGZ1bmN0aW9uIHdpdGggdHdvXG4gIDwvYnV0dG9uPlxuPC9kaXY+YFxuICAgICAgICAgICAgfVxuICAgICAgICAgIDwvY29kZT5cbiAgICAgICAgPC9wcmU+XG4gICAgICAgIDxwPlxuICAgICAgICAgIFdoZW4gdGhlIGJ1dHRvbiBpcyBwdXNoZWQgaXQgd2lsbCBjYWxsIHRoZSBhcnJvdyBmdW5jdGlvbiwgd2hpY2ggd2lsbCB0aGVuIGNhbGwgdGhlXG4gICAgICAgICAgbWV0aG9kIDxjb2RlPmhhbmRsZUJ1dHRvbkNsaWNrPC9jb2RlPiB3aXRoIHRoZSBzcGVjaWZpZWQgYXJndW1lbnQuXG4gICAgICAgIDwvcD5cbiAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJjczE0Mi1leGFtcGxlLW91dHB1dFwiPlxuICAgICAgICAgIDxwPlxuICAgICAgICAgICAgVGVzdCBidXR0b24gY2xpY2tzLiB7XG4gICAgICAgICAgICAgIHRoaXMuc3RhdGUuYnV0dG9uV2FzQ2xpY2tlZFxuICAgICAgICAgICAgICAmJiA8c3Bhbj5MYXN0IGJ1dHRvbiBjbGlja2VkIHdhczoge3RoaXMuc3RhdGUuYnV0dG9uV2FzQ2xpY2tlZH08L3NwYW4+XG4gICAgICAgICAgICB9XG4gICAgICAgICAgPC9wPlxuICAgICAgICAgIDxidXR0b24gdHlwZT1cImJ1dHRvblwiIG9uQ2xpY2s9e2UgPT4gdGhpcy5oYW5kbGVCdXR0b25DbGljaygnb25lJywgZSl9PlxuICAgICAgICAgICAgQ2FsbCBoYW5kbGVCdXR0b25DbGljayBmdW5jdGlvbiB3aXRoIG9uZVxuICAgICAgICAgIDwvYnV0dG9uPlxuICAgICAgICAgIDxidXR0b24gdHlwZT1cImJ1dHRvblwiIG9uQ2xpY2s9e2UgPT4gdGhpcy5oYW5kbGVCdXR0b25DbGljaygndHdvJywgZSl9PlxuICAgICAgICAgICAgQ2FsbCBoYW5kbGVCdXR0b25DbGljayBmdW5jdGlvbiB3aXRoIHR3b1xuICAgICAgICAgIDwvYnV0dG9uPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgICk7XG4gIH1cbn1cblxuZXhwb3J0IGRlZmF1bHQgRXhhbXBsZTtcbiJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7QUFBQTtBQUNBOzs7QUFBQTtBQUNBO0FBS0E7QUFDQTs7O0FBQUE7QUFDQTtBQUFBO0FBQ0E7Ozs7Ozs7OztBQVBBOzs7Ozs7QUFRQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7OztBQUNBO0FBQUE7QUFDQTtBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFMQTtBQUNBO0FBS0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUpBO0FBQ0E7QUFNQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQUE7QUFBQTtBQUNBO0FBQ0E7QUFDQTtBQXBCQTtBQXFCQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7OztBQURBO0FBQUE7QUFDQTtBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFBQTtBQUNBO0FBREE7QUFBQTtBQUdBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7OztBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7OztBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOzs7QUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7OztBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUNBO0FBQ0E7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUFBO0FBQ0E7QUFDQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBRkE7QUFDQTtBQUtBO0FBQ0E7OztBQUVBO0FBQUE7QUFDQTtBQUFBO0FBQ0E7QUFBQTtBQUNBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFFQTtBQUFBO0FBQUE7QUFDQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBREE7QUFDQTtBQUNBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFGQTtBQUVBO0FBQ0E7QUFDQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQ0E7QUFBQTtBQUFBO0FBQ0E7QUFDQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQ0E7QUFBQTtBQUFBO0FBUkE7QUFXQTtBQUFBO0FBQUE7QUFBQTtBQUdBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFIQTtBQU9BO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFQQTtBQVNBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFUQTtBQVdBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFYQTtBQUFBO0FBY0E7QUFBQTtBQUFBO0FBQUE7QUFFQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBRkE7QUFRQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBUkE7QUFBQTtBQWNBO0FBQUE7QUFBQTtBQUFBO0FBR0E7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUhBO0FBSUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUpBO0FBQUE7QUFVQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBRUE7QUFBQTtBQUFBO0FBQUE7QUFDQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBREE7QUFBQTtBQVFBO0FBQUE7QUFBQTtBQUFBO0FBRUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUZBO0FBR0E7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUhBO0FBR0E7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUhBO0FBSUE7QUFKQTtBQUFBO0FBT0E7QUFBQTtBQUFBO0FBQ0E7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQURBO0FBT0E7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUdBO0FBQUE7QUFBQTtBQUFBO0FBQ0E7QUFEQTtBQUFBO0FBSUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUlBO0FBQUE7QUFBQTtBQUFBO0FBR0E7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFIQTtBQU9BO0FBUEE7QUFBQTtBQVVBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFDQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBS0E7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQVFBO0FBQUE7QUFBQTtBQUNBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFEQTtBQTJCQTtBQUFBO0FBQUE7QUFBQTtBQUVBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFGQTtBQUFBO0FBS0E7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUNBO0FBQUE7QUFBQTtBQUFBO0FBTUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQU5BO0FBQUE7QUFRQTtBQUFBO0FBQUE7QUFBQTtBQUVBO0FBRkE7QUFBQTtBQUtBO0FBQUE7QUFBQTtBQUNBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFEQTtBQVlBO0FBQUE7QUFBQTtBQUFBO0FBQ0E7QUFEQTtBQUFBO0FBTUE7QUFBQTtBQUFBO0FBQ0E7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQURBO0FBa0JBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFHQTtBQUFBO0FBQUE7QUFDQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBSUE7QUFFQTtBQUFBO0FBQUE7QUFFQTtBQUZBO0FBTUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQWJBO0FBa0JBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFDQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBR0E7QUFBQTtBQUFBO0FBQ0E7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQURBO0FBUUE7QUFBQTtBQUFBO0FBQUE7QUFPQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBUEE7QUFRQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBUkE7QUFXQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBWEE7QUFXQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBWEE7QUFZQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBWkE7QUFZQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBWkE7QUFBQTtBQW1CQTtBQUFBO0FBQUE7QUFDQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBRUE7QUFIQTtBQUtBO0FBQUE7QUFBQTtBQUFBO0FBR0E7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUhBO0FBSUE7QUFKQTtBQUtBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFMQTtBQU9BO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFQQTtBQUFBO0FBU0E7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUlBO0FBQUE7QUFBQTtBQUNBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFEQTtBQTBCQTtBQUFBO0FBQUE7QUFBQTtBQUVBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFGQTtBQUFBO0FBSUE7QUFBQTtBQUFBO0FBQ0E7QUFBQTtBQUFBO0FBQUE7QUFFQTtBQUNBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFIQTtBQU1BO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBR0E7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFWQTtBQXJTQTtBQXFUQTs7OztBQTFZQTtBQUNBO0FBNFlBIiwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///./components/example/Example.jsx\n");
+eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n    value: true\n}));\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\n__webpack_require__(/*! ./Example.css */ \"./components/example/Example.css\");\n\nvar _prismjs = __webpack_require__(/*! prismjs */ \"./node_modules/prismjs/prism.js\");\n\nvar _prismjs2 = _interopRequireDefault(_prismjs);\n\n__webpack_require__(/*! prismjs/components/prism-jsx.js */ \"./node_modules/prismjs/components/prism-jsx.js\");\n\n__webpack_require__(/*! ../../node_modules/prismjs/themes/prism.css */ \"./node_modules/prismjs/themes/prism.css\");\n\nvar _Header = __webpack_require__(/*! ../header/Header */ \"./components/header/Header.jsx\");\n\nvar _Header2 = _interopRequireDefault(_Header);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\n/*\n  Since this component shows code we include the https://prismjs.com/\n  formatter. We invoke it by labelling code blocks with class=\"language-jsx\"\n*/\n\n\n/* eslint-disable  react/jsx-one-expression-per-line */\n/* eslint-disable  react/destructuring-assignment */\n/* eslint no-plusplus: [\"error\", { \"allowForLoopAfterthoughts\": true }] */\n\n// React Components are subclass of React.Componment.\nvar Example = function (_React$Component) {\n    _inherits(Example, _React$Component);\n\n    function Example(props) {\n        _classCallCheck(this, Example);\n\n        // Must run the constructor of React.Component first\n\n        // Components have a special property named \"state\" that holds state.\n        // We can initialize it here.\n        // We read the example model data into the state variable 'name'\n        var _this = _possibleConstructorReturn(this, (Example.__proto__ || Object.getPrototypeOf(Example)).call(this, props));\n\n        _this.state = {\n            name: window.cs142models.exampleModel().name,\n            counter: 0,\n            inputValue: '',\n            buttonWasClicked: ''\n        };\n\n        // React events are called directly from DOM event handlers\n        // so we cannot directly call the methods of this class. We\n        // generate new functions that handle the event by just calling\n        // the method that handles the event.\n        _this.handleChangeBound = function (event) {\n            return _this.handleChange(event);\n        };\n        // Note: A commmon idiom in React code is to use JavaScript bind() to\n        // smash the method to accomplish this passthrough to the method:\n        //      this.handleChange = this.handleChange.bind(this);\n        return _this;\n    }\n\n    // React components have several \"lifecycle functions\"\n    // https://reactjs.org/docs/react-component.html\n    // that are used to inform the Component of interesting events.\n\n    // componentDidMount - Called when Component is activiated\n\n\n    _createClass(Example, [{\n        key: 'componentDidMount',\n        value: function componentDidMount() {\n            var _this2 = this;\n\n            // To demonstate state updating we define a function\n            // that increments the counter state and instruct the\n            // DOM to call it every 2 seconds.\n            /* eslint-disable react/no-access-state-in-setstate */\n            var counterIncrFunc = function counterIncrFunc() {\n                return _this2.setState({\n                    counter: _this2.state.counter + 1\n                });\n            };\n            this.timerID = setInterval(counterIncrFunc, 2 * 1000);\n\n            // Trigger the code coloring\n            _prismjs2.default.highlightAll();\n        }\n\n        // componentWillUnmount - Called when Component is deactivated.\n\n    }, {\n        key: 'componentWillUnmount',\n        value: function componentWillUnmount() {\n            // We need to tell the DOM to stop calling us otherwise React\n            // will complain when we call setState on an unmounted component.\n            clearInterval(this.timerID);\n        }\n\n        // Method called when the input box is typed into.\n\n    }, {\n        key: 'handleChange',\n        value: function handleChange(event) {\n            this.setState({ inputValue: event.target.value });\n        }\n\n        // Method called when the button is pushed\n        /* eslint-disable-next-line no-unused-vars */\n\n    }, {\n        key: 'handleButtonClick',\n        value: function handleButtonClick(buttonName, event) {\n            this.setState({ buttonWasClicked: buttonName });\n        }\n\n        /* eslint-disable-next-line class-methods-use-this */\n\n    }, {\n        key: 'outOfBandJSX',\n        value: function outOfBandJSX(option) {\n            var optionJSX = void 0;\n            var listItems = [];\n            if (option) {\n                optionJSX = _react2.default.createElement(\n                    'div',\n                    null,\n                    'Option was True'\n                );\n            } else {\n                optionJSX = _react2.default.createElement(\n                    'div',\n                    null,\n                    'Option was False'\n                );\n            }\n            for (var i = 0; i < 3; i++) {\n                listItems[i] = _react2.default.createElement(\n                    'li',\n                    { key: i },\n                    ' List Item ',\n                    i,\n                    ' '\n                );\n            }\n            var retVal = _react2.default.createElement(\n                'div',\n                null,\n                optionJSX,\n                _react2.default.createElement(\n                    'ul',\n                    null,\n                    listItems\n                )\n            );\n\n            return retVal;\n        }\n    }, {\n        key: 'render',\n        value: function render() {\n            var _this3 = this;\n\n            return _react2.default.createElement(\n                'div',\n                { className: 'container Example' },\n                _react2.default.createElement(_Header2.default, null),\n                _react2.default.createElement(\n                    'h1',\n                    null,\n                    'CS142 Project#4 React.js Example'\n                ),\n                _react2.default.createElement(\n                    'div',\n                    { className: 'motto-update' },\n                    _react2.default.createElement(\n                        'span',\n                        { id: 'motto-name' },\n                        window.cs142models.exampleMotto().name\n                    ),\n                    ' ',\n                    _react2.default.createElement('br', null),\n                    _react2.default.createElement(\n                        'span',\n                        { id: 'motto-value' },\n                        window.cs142models.exampleMotto().motto\n                    ),\n                    ' ',\n                    _react2.default.createElement('br', null),\n                    _react2.default.createElement('br', null),\n                    _react2.default.createElement(\n                        'label',\n                        { htmlFor: 'fname' },\n                        'Name: '\n                    ),\n                    _react2.default.createElement('input', { type: 'text', placeholder: window.cs142models.exampleMotto().name, id: 'fname',\n                        onChange: function onChange(e) {\n                            return document.getElementById(\"motto-name\").innerHTML = e.target.value;\n                        } }),\n                    _react2.default.createElement('br', null),\n                    _react2.default.createElement(\n                        'label',\n                        { htmlFor: 'fmotto' },\n                        'Motto: '\n                    ),\n                    _react2.default.createElement('input', { type: 'text', placeholder: window.cs142models.exampleMotto().motto, id: 'fmotto',\n                        onChange: function onChange(e) {\n                            return document.getElementById(\"motto-value\").innerHTML = e.target.value;\n                        } })\n                ),\n                _react2.default.createElement(\n                    'p',\n                    null,\n                    'This view is an example of a \\xA0',\n                    _react2.default.createElement(\n                        'a',\n                        { href: 'https://reactjs.org/docs/react-component.html', target: '_blank', rel: 'noopener noreferrer' },\n                        'React.js Component'\n                    ),\n                    '\\xA0 named ',\n                    _react2.default.createElement(\n                        'span',\n                        { className: 'cs142-code-name' },\n                        'Example'\n                    ),\n                    '. It is located in the file ',\n                    _react2.default.createElement(\n                        'code',\n                        null,\n                        'components/example/Example.jsx'\n                    ),\n                    '. It looks like a JavaScript class named Example that has a method named named ',\n                    _react2.default.createElement(\n                        'span',\n                        { className: 'cs142-code-name' },\n                        'render'\n                    ),\n                    ', which appears to written in something that looks like HTML.'\n                ),\n                _react2.default.createElement(\n                    'p',\n                    null,\n                    'It is actually written in a language named \\xA0',\n                    _react2.default.createElement(\n                        'a',\n                        { href: 'https://reactjs.org/docs/introducing-jsx.html', target: '_blank', rel: 'noopener noreferrer' },\n                        'JSX'\n                    ),\n                    '\\xA0 that is run as a preprocessor to the HTML-like language to JavaScript. The generated JavaScipt is limited to calls to the React.js \\xA0',\n                    _react2.default.createElement(\n                        'a',\n                        { href: 'https://reactjs.org/docs/react-api.html#createelement', target: '_blank',\n                            rel: 'noopener noreferrer' },\n                        'createElement'\n                    ),\n                    '\\xA0 function which allow us to write something that looks like HTML to describe what the component renders.'\n                ),\n                _react2.default.createElement(\n                    'p',\n                    null,\n                    'Although JSX looks like HTML, it is not HTML. Some of the differences are necessary due to embeddding in JavaScript. For example, rather than ',\n                    _react2.default.createElement(\n                        'code',\n                        null,\n                        'class='\n                    ),\n                    ' we use ',\n                    _react2.default.createElement(\n                        'code',\n                        null,\n                        'className='\n                    ),\n                    ' (class is a JavsScript keyword). Although it is possible to interleave JavaScript and JSX code, care is needed since contents of JSX tags are processed into arguments to a function limiting what can be done as will be seen below.'\n                ),\n                _react2.default.createElement(\n                    'h3',\n                    null,\n                    'Template substitution'\n                ),\n                _react2.default.createElement(\n                    'p',\n                    null,\n                    'JSX treats text inside of parentheses (e.g. ',\n                    _react2.default.createElement(\n                        'code',\n                        null,\n                        '{JavaScriptExpression}'\n                    ),\n                    ') as templates where the JavaScript expression is evaluated in the context of the current function and whose value replaces the template in the string. The expression can evaluate to a JavaScript string or value from a JSX expression. This feature allows componment\\'s specification to use templated HTML.'\n                ),\n                _react2.default.createElement(\n                    'p',\n                    null,\n                    'The Example class constructor sets the object\\'s property ',\n                    _react2.default.createElement(\n                        'code',\n                        null,\n                        'state.name'\n                    ),\n                    ' (see the assignment to ',\n                    _react2.default.createElement(\n                        'code',\n                        null,\n                        'this.state.name'\n                    ),\n                    ' in ',\n                    _react2.default.createElement(\n                        'code',\n                        null,\n                        'Example.jsx'\n                    ),\n                    ') from the model in the DOM which has a value of \\u201C ',\n                    this.state.name,\n                    '\\u201D so:'\n                ),\n                _react2.default.createElement(\n                    'pre',\n                    { className: 'cs142-example-code' },\n                    _react2.default.createElement(\n                        'code',\n                        { className: 'language-jsx' },\n                        '<p>My name is \"{this.state.name}\".</p>'\n                    )\n                ),\n                _react2.default.createElement(\n                    'p',\n                    null,\n                    'should render as:'\n                ),\n                _react2.default.createElement(\n                    'p',\n                    { className: 'cs142-example-output' },\n                    'My name is \\u201C ',\n                    this.state.name,\n                    ' \\u201D.'\n                ),\n                _react2.default.createElement(\n                    'h3',\n                    null,\n                    'One-way binding from JavaScript to HTML'\n                ),\n                _react2.default.createElement(\n                    'p',\n                    null,\n                    'React automatically propagates any changes to JavaScript state to the JSX templates. For example the following code ',\n                    _react2.default.createElement(\n                        'code',\n                        null,\n                        '(',\n                        '{this.state.counter}',\n                        ')'\n                    ),\n                    ' displays the state.counter property of the Example component. The component sets a timer that increments the counter every 2 seconds. The value of the counter can be seen changing here: ',\n                    this.state.counter,\n                    '.'\n                ),\n                _react2.default.createElement(\n                    'h3',\n                    null,\n                    'Control flow'\n                ),\n                _react2.default.createElement(\n                    'p',\n                    null,\n                    'Most templating engines include support for doing conditional rendering and iteration. JSX is embedded in and is transpiled to JavaScript so we can use JavaScript language constructs for managing control flow.'\n                ),\n                _react2.default.createElement(\n                    'p',\n                    null,\n                    'One way of doing control using JavaScript is to assign JSX fragements to JavaScript variables and use normal JavaScript control flow operators. For example, the following function selects among the posssible output lines based on an argument to the function and uses a for loop to populate an array. These JavaScript variables can then be referred to in JSX returned by the function.'\n                ),\n                _react2.default.createElement(\n                    'pre',\n                    { className: 'cs142-example-code' },\n                    _react2.default.createElement(\n                        'code',\n                        { className: 'language-jsx' },\n                        'function outOfBandJSX(option) {\\n  var optionJSX;\\n  if (option) {\\n    optionJSX = <div>Option was True</div>;\\n  } else {\\n    optionJSX  = <div>Option was False</div>;\\n  }\\n  var listItems = [];\\n  for (var i = 0; i < 3; i++) {\\n    listItems[i] = <li key={i}>List Item {i}</li>;\\n  }\\n  var retVal =\\n    <div>\\n      {optionJSX}\\n      <ul>\\n        {listItems}\\n      </ul>\\n    </div>;\\n\\n  return retVal;\\n}'\n                    )\n                ),\n                _react2.default.createElement(\n                    'p',\n                    null,\n                    'Calling this function from a template (i.e. ',\n                    _react2.default.createElement(\n                        'code',\n                        null,\n                        '{this.outOfBandJSX(true)}'\n                    ),\n                    ') would be expand to:'\n                ),\n                _react2.default.createElement(\n                    'div',\n                    { className: 'cs142-example-output' },\n                    this.outOfBandJSX(true)\n                ),\n                _react2.default.createElement(\n                    'p',\n                    null,\n                    'Another way of accomplishing this is embedding the operations inside of curly braces. Although arbitrary JavaScript can appear inside braces, it must return a string or JSX expression to work. JavaScript control flow operations such as if, for, and while do not return values so templates like ',\n                    _react2.default.createElement(\n                        'code',\n                        null,\n                        '{if (bool) ... else ...}'\n                    ),\n                    ' do not work.'\n                ),\n                _react2.default.createElement(\n                    'p',\n                    null,\n                    'The following code generates the above output using the JavaScript ',\n                    '\"?:\"',\n                    ' operator and functional-style programming support to always return a value in the template:'\n                ),\n                _react2.default.createElement(\n                    'pre',\n                    { className: 'cs142-example-code' },\n                    _react2.default.createElement(\n                        'code',\n                        { className: 'language-jsx' },\n                        '<div>\\n  option ? <div>Option was True</div> : <div>Option was False</div> }\\n  <ul>\\n    {[0,1,2].map((i) =>  <li key={i}>List Item {i}</li>)}\\n  </ul>\\n</div>'\n                    )\n                ),\n                _react2.default.createElement(\n                    'p',\n                    null,\n                    'Short-circuit boolean operations such as ',\n                    '\"&&\"',\n                    ' can also be used to control what is rendered. For example the following code will make a sentence appear between to two paragraph when some characters are typed into the input box below.'\n                ),\n                _react2.default.createElement(\n                    'pre',\n                    { className: 'cs142-example-code' },\n                    _react2.default.createElement(\n                        'code',\n                        { className: 'language-jsx' },\n                        '<div>\\n  <p>A paragraph will appear between this paragraph</p>\\n  {\\n    this.state.inputValue && (\\n      <p>This text will appear when this.state.inputValue is truthy.\\n        this.state.inputValue === {this.state.inputValue}\\n      </p>\\n    )\\n  }\\n  <p>... and this one when some characters are typed into the input box below.</p>\\n</div>\\n'\n                    )\n                ),\n                _react2.default.createElement(\n                    'p',\n                    null,\n                    'Generates the output:'\n                ),\n                _react2.default.createElement(\n                    'div',\n                    { className: 'cs142-example-output' },\n                    _react2.default.createElement(\n                        'p',\n                        null,\n                        'A paragraph will appear between this paragraph'\n                    ),\n                    this.state.inputValue && _react2.default.createElement(\n                        'p',\n                        null,\n                        'This text will appear when this.state.inputValue is truthy. this.state.inputValue === ',\n                        this.state.inputValue\n                    ),\n                    _react2.default.createElement(\n                        'p',\n                        null,\n                        '... and this one when some characters are typed into the below box.'\n                    )\n                ),\n                _react2.default.createElement(\n                    'h3',\n                    null,\n                    'Input using DOM-like handlers'\n                ),\n                _react2.default.createElement(\n                    'p',\n                    null,\n                    'Input in React is done using DOM-like event handlers. For example, JSX statements like:'\n                ),\n                _react2.default.createElement(\n                    'pre',\n                    { className: 'cs142-example-code' },\n                    _react2.default.createElement(\n                        'code',\n                        { className: 'language-jsx' },\n                        '<label htmlFor=\"inId\">Input Field: </label>\\n<input type=\"text\" value={this.state.inputValue} onChange={this.handleChangeBound} />'\n                    )\n                ),\n                _react2.default.createElement(\n                    'p',\n                    null,\n                    'will display the text from the inputValue property of the Component\\'s state in the input box (it starts out blank) and calls the function this.handleChangedBound every time the input field is changed. Typically this kind of input will be associated with a ',\n                    _react2.default.createElement(\n                        'a',\n                        { href: 'https://reactjs.org/docs/handling-events.html' },\n                        'Button'\n                    ),\n                    ' or inside a ',\n                    _react2.default.createElement(\n                        'a',\n                        { href: 'https://reactjs.org/docs/forms.html' },\n                        'Form'\n                    ),\n                    ' to allow the user to signal when they are finished changing the input field. Note the differences from HTML in ',\n                    _react2.default.createElement(\n                        'code',\n                        null,\n                        'onchange='\n                    ),\n                    ' become ',\n                    _react2.default.createElement(\n                        'code',\n                        null,\n                        'onChange='\n                    ),\n                    ' and',\n                    _react2.default.createElement(\n                        'code',\n                        null,\n                        'for='\n                    ),\n                    ' becoming ',\n                    _react2.default.createElement(\n                        'code',\n                        null,\n                        'htmlFor='\n                    ),\n                    '.'\n                ),\n                _react2.default.createElement(\n                    'div',\n                    { className: 'cs142-example-output' },\n                    _react2.default.createElement(\n                        'label',\n                        { htmlFor: 'inId' },\n                        'Input Field:'\n                    ),\n                    _react2.default.createElement('input', { id: 'inId', type: 'text', value: this.state.inputValue, onChange: this.handleChangeBound })\n                ),\n                _react2.default.createElement(\n                    'p',\n                    null,\n                    'The handleChangeBound function updates this.state.inputValue with the value of the DOM element so its value can be access like ',\n                    _react2.default.createElement(\n                        'code',\n                        null,\n                        '{this.state.inputValue}'\n                    ),\n                    ' which returns \\xA0\\u201C ',\n                    this.state.inputValue,\n                    '  \\u201D. Note we can not directly call ',\n                    _react2.default.createElement(\n                        'code',\n                        null,\n                        'this.handleChange'\n                    ),\n                    ' since it is a method function of an object that is not available to the DOM. To handle this we create a new function ',\n                    _react2.default.createElement(\n                        'code',\n                        null,\n                        'this.handleChangeBound'\n                    ),\n                    ' that can call the method and use it here.'\n                ),\n                _react2.default.createElement(\n                    'p',\n                    null,\n                    'If we want to pass arguments to event handling functions we can use inlined arrow function definitions like so:'\n                ),\n                _react2.default.createElement(\n                    'pre',\n                    { className: 'cs142-example-code' },\n                    _react2.default.createElement(\n                        'code',\n                        { className: 'language-jsx' },\n                        '<div className=\"cs142-example-output\">\\n  <p>Test button clicks.\\n    {\\n      this.state.buttonWasClicked &&\\n      <span>Last button clicked was: {this.state.buttonWasClicked}</span>\\n    }\\n  </p>\\n  <button\\n    type=\"button\"\\n    onClick={e => this.handleButtonClick(\"one\", e)}\\n  >\\n    Call handleButtonClick function with one\\n  </button>\\n  <button\\n    type=\"button\"\\n    onClick={e => this.handleButtonClick(\"two\", e)}\\n  >\\n    Call handleButtonClick function with two\\n  </button>\\n</div>'\n                    )\n                ),\n                _react2.default.createElement(\n                    'p',\n                    null,\n                    'When the button is pushed it will call the arrow function, which will then call the method ',\n                    _react2.default.createElement(\n                        'code',\n                        null,\n                        'handleButtonClick'\n                    ),\n                    ' with the specified argument.'\n                ),\n                _react2.default.createElement(\n                    'div',\n                    { className: 'cs142-example-output' },\n                    _react2.default.createElement(\n                        'p',\n                        null,\n                        'Test button clicks. ',\n                        this.state.buttonWasClicked && _react2.default.createElement(\n                            'span',\n                            null,\n                            'Last button clicked was: ',\n                            this.state.buttonWasClicked\n                        )\n                    ),\n                    _react2.default.createElement(\n                        'button',\n                        { type: 'button', onClick: function onClick(e) {\n                                return _this3.handleButtonClick('one', e);\n                            } },\n                        'Call handleButtonClick function with one'\n                    ),\n                    _react2.default.createElement(\n                        'button',\n                        { type: 'button', onClick: function onClick(e) {\n                                return _this3.handleButtonClick('two', e);\n                            } },\n                        'Call handleButtonClick function with two'\n                    )\n                )\n            );\n        }\n    }]);\n\n    return Example;\n}(_react2.default.Component);\n\nexports.default = Example;//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9jb21wb25lbnRzL2V4YW1wbGUvRXhhbXBsZS5qc3guanMiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly9wcm9qZWN0NC8uL2NvbXBvbmVudHMvZXhhbXBsZS9FeGFtcGxlLmpzeD82NGY3Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgJy4vRXhhbXBsZS5jc3MnO1xuXG4vKlxuICBTaW5jZSB0aGlzIGNvbXBvbmVudCBzaG93cyBjb2RlIHdlIGluY2x1ZGUgdGhlIGh0dHBzOi8vcHJpc21qcy5jb20vXG4gIGZvcm1hdHRlci4gV2UgaW52b2tlIGl0IGJ5IGxhYmVsbGluZyBjb2RlIGJsb2NrcyB3aXRoIGNsYXNzPVwibGFuZ3VhZ2UtanN4XCJcbiovXG5pbXBvcnQgUHJpc20gZnJvbSAncHJpc21qcyc7XG5pbXBvcnQgJ3ByaXNtanMvY29tcG9uZW50cy9wcmlzbS1qc3guanMnO1xuaW1wb3J0ICcuLi8uLi9ub2RlX21vZHVsZXMvcHJpc21qcy90aGVtZXMvcHJpc20uY3NzJztcbmltcG9ydCBIZWFkZXIgZnJvbSBcIi4uL2hlYWRlci9IZWFkZXJcIjtcblxuLyogZXNsaW50LWRpc2FibGUgIHJlYWN0L2pzeC1vbmUtZXhwcmVzc2lvbi1wZXItbGluZSAqL1xuLyogZXNsaW50LWRpc2FibGUgIHJlYWN0L2Rlc3RydWN0dXJpbmctYXNzaWdubWVudCAqL1xuLyogZXNsaW50IG5vLXBsdXNwbHVzOiBbXCJlcnJvclwiLCB7IFwiYWxsb3dGb3JMb29wQWZ0ZXJ0aG91Z2h0c1wiOiB0cnVlIH1dICovXG5cbi8vIFJlYWN0IENvbXBvbmVudHMgYXJlIHN1YmNsYXNzIG9mIFJlYWN0LkNvbXBvbm1lbnQuXG5jbGFzcyBFeGFtcGxlIGV4dGVuZHMgUmVhY3QuQ29tcG9uZW50IHtcbiAgICBjb25zdHJ1Y3Rvcihwcm9wcykge1xuICAgICAgICBzdXBlcihwcm9wcyk7IC8vIE11c3QgcnVuIHRoZSBjb25zdHJ1Y3RvciBvZiBSZWFjdC5Db21wb25lbnQgZmlyc3RcblxuICAgICAgICAvLyBDb21wb25lbnRzIGhhdmUgYSBzcGVjaWFsIHByb3BlcnR5IG5hbWVkIFwic3RhdGVcIiB0aGF0IGhvbGRzIHN0YXRlLlxuICAgICAgICAvLyBXZSBjYW4gaW5pdGlhbGl6ZSBpdCBoZXJlLlxuICAgICAgICAvLyBXZSByZWFkIHRoZSBleGFtcGxlIG1vZGVsIGRhdGEgaW50byB0aGUgc3RhdGUgdmFyaWFibGUgJ25hbWUnXG4gICAgICAgIHRoaXMuc3RhdGUgPSB7XG4gICAgICAgICAgICBuYW1lOiB3aW5kb3cuY3MxNDJtb2RlbHMuZXhhbXBsZU1vZGVsKCkubmFtZSxcbiAgICAgICAgICAgIGNvdW50ZXI6IDAsXG4gICAgICAgICAgICBpbnB1dFZhbHVlOiAnJyxcbiAgICAgICAgICAgIGJ1dHRvbldhc0NsaWNrZWQ6ICcnLFxuICAgICAgICB9O1xuXG4gICAgICAgIC8vIFJlYWN0IGV2ZW50cyBhcmUgY2FsbGVkIGRpcmVjdGx5IGZyb20gRE9NIGV2ZW50IGhhbmRsZXJzXG4gICAgICAgIC8vIHNvIHdlIGNhbm5vdCBkaXJlY3RseSBjYWxsIHRoZSBtZXRob2RzIG9mIHRoaXMgY2xhc3MuIFdlXG4gICAgICAgIC8vIGdlbmVyYXRlIG5ldyBmdW5jdGlvbnMgdGhhdCBoYW5kbGUgdGhlIGV2ZW50IGJ5IGp1c3QgY2FsbGluZ1xuICAgICAgICAvLyB0aGUgbWV0aG9kIHRoYXQgaGFuZGxlcyB0aGUgZXZlbnQuXG4gICAgICAgIHRoaXMuaGFuZGxlQ2hhbmdlQm91bmQgPSBldmVudCA9PiB0aGlzLmhhbmRsZUNoYW5nZShldmVudCk7XG4gICAgICAgIC8vIE5vdGU6IEEgY29tbW1vbiBpZGlvbSBpbiBSZWFjdCBjb2RlIGlzIHRvIHVzZSBKYXZhU2NyaXB0IGJpbmQoKSB0b1xuICAgICAgICAvLyBzbWFzaCB0aGUgbWV0aG9kIHRvIGFjY29tcGxpc2ggdGhpcyBwYXNzdGhyb3VnaCB0byB0aGUgbWV0aG9kOlxuICAgICAgICAvLyAgICAgIHRoaXMuaGFuZGxlQ2hhbmdlID0gdGhpcy5oYW5kbGVDaGFuZ2UuYmluZCh0aGlzKTtcbiAgICB9XG5cbiAgICAvLyBSZWFjdCBjb21wb25lbnRzIGhhdmUgc2V2ZXJhbCBcImxpZmVjeWNsZSBmdW5jdGlvbnNcIlxuICAgIC8vIGh0dHBzOi8vcmVhY3Rqcy5vcmcvZG9jcy9yZWFjdC1jb21wb25lbnQuaHRtbFxuICAgIC8vIHRoYXQgYXJlIHVzZWQgdG8gaW5mb3JtIHRoZSBDb21wb25lbnQgb2YgaW50ZXJlc3RpbmcgZXZlbnRzLlxuXG4gICAgLy8gY29tcG9uZW50RGlkTW91bnQgLSBDYWxsZWQgd2hlbiBDb21wb25lbnQgaXMgYWN0aXZpYXRlZFxuICAgIGNvbXBvbmVudERpZE1vdW50KCkge1xuICAgICAgICAvLyBUbyBkZW1vbnN0YXRlIHN0YXRlIHVwZGF0aW5nIHdlIGRlZmluZSBhIGZ1bmN0aW9uXG4gICAgICAgIC8vIHRoYXQgaW5jcmVtZW50cyB0aGUgY291bnRlciBzdGF0ZSBhbmQgaW5zdHJ1Y3QgdGhlXG4gICAgICAgIC8vIERPTSB0byBjYWxsIGl0IGV2ZXJ5IDIgc2Vjb25kcy5cbiAgICAgICAgLyogZXNsaW50LWRpc2FibGUgcmVhY3Qvbm8tYWNjZXNzLXN0YXRlLWluLXNldHN0YXRlICovXG4gICAgICAgIGNvbnN0IGNvdW50ZXJJbmNyRnVuYyA9ICgpID0+IHRoaXMuc2V0U3RhdGUoe1xuICAgICAgICAgICAgY291bnRlcjogdGhpcy5zdGF0ZS5jb3VudGVyICsgMSxcbiAgICAgICAgfSk7XG4gICAgICAgIHRoaXMudGltZXJJRCA9IHNldEludGVydmFsKGNvdW50ZXJJbmNyRnVuYywgMiAqIDEwMDApO1xuXG4gICAgICAgIC8vIFRyaWdnZXIgdGhlIGNvZGUgY29sb3JpbmdcbiAgICAgICAgUHJpc20uaGlnaGxpZ2h0QWxsKCk7XG4gICAgfVxuXG4gICAgLy8gY29tcG9uZW50V2lsbFVubW91bnQgLSBDYWxsZWQgd2hlbiBDb21wb25lbnQgaXMgZGVhY3RpdmF0ZWQuXG4gICAgY29tcG9uZW50V2lsbFVubW91bnQoKSB7XG4gICAgICAgIC8vIFdlIG5lZWQgdG8gdGVsbCB0aGUgRE9NIHRvIHN0b3AgY2FsbGluZyB1cyBvdGhlcndpc2UgUmVhY3RcbiAgICAgICAgLy8gd2lsbCBjb21wbGFpbiB3aGVuIHdlIGNhbGwgc2V0U3RhdGUgb24gYW4gdW5tb3VudGVkIGNvbXBvbmVudC5cbiAgICAgICAgY2xlYXJJbnRlcnZhbCh0aGlzLnRpbWVySUQpO1xuICAgIH1cblxuICAgIC8vIE1ldGhvZCBjYWxsZWQgd2hlbiB0aGUgaW5wdXQgYm94IGlzIHR5cGVkIGludG8uXG4gICAgaGFuZGxlQ2hhbmdlKGV2ZW50KSB7XG4gICAgICAgIHRoaXMuc2V0U3RhdGUoe2lucHV0VmFsdWU6IGV2ZW50LnRhcmdldC52YWx1ZX0pO1xuICAgIH1cblxuICAgIC8vIE1ldGhvZCBjYWxsZWQgd2hlbiB0aGUgYnV0dG9uIGlzIHB1c2hlZFxuICAgIC8qIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBuby11bnVzZWQtdmFycyAqL1xuICAgIGhhbmRsZUJ1dHRvbkNsaWNrKGJ1dHRvbk5hbWUsIGV2ZW50KSB7XG4gICAgICAgIHRoaXMuc2V0U3RhdGUoe2J1dHRvbldhc0NsaWNrZWQ6IGJ1dHRvbk5hbWV9KTtcbiAgICB9XG5cbiAgICAvKiBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgY2xhc3MtbWV0aG9kcy11c2UtdGhpcyAqL1xuICAgIG91dE9mQmFuZEpTWChvcHRpb24pIHtcbiAgICAgICAgbGV0IG9wdGlvbkpTWDtcbiAgICAgICAgY29uc3QgbGlzdEl0ZW1zID0gW107XG4gICAgICAgIGlmIChvcHRpb24pIHtcbiAgICAgICAgICAgIG9wdGlvbkpTWCA9IDxkaXY+T3B0aW9uIHdhcyBUcnVlPC9kaXY+O1xuICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgb3B0aW9uSlNYID0gPGRpdj5PcHRpb24gd2FzIEZhbHNlPC9kaXY+O1xuICAgICAgICB9XG4gICAgICAgIGZvciAobGV0IGkgPSAwOyBpIDwgMzsgaSsrKSB7XG4gICAgICAgICAgICBsaXN0SXRlbXNbaV0gPSA8bGkga2V5PXtpfT4gTGlzdCBJdGVtIHtpfSA8L2xpPjtcbiAgICAgICAgfVxuICAgICAgICBjb25zdCByZXRWYWwgPSAoXG4gICAgICAgICAgICA8ZGl2PlxuICAgICAgICAgICAgICAgIHtvcHRpb25KU1h9XG4gICAgICAgICAgICAgICAgPHVsPntsaXN0SXRlbXN9PC91bD5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICApO1xuXG4gICAgICAgIHJldHVybiByZXRWYWw7XG4gICAgfVxuXG4gICAgcmVuZGVyKCkge1xuICAgICAgICByZXR1cm4gKFxuICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJjb250YWluZXIgRXhhbXBsZVwiPlxuICAgICAgICAgICAgICAgIDxIZWFkZXIgLz5cbiAgICAgICAgICAgICAgICA8aDE+Q1MxNDIgUHJvamVjdCM0IFJlYWN0LmpzIEV4YW1wbGU8L2gxPlxuXG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJtb3R0by11cGRhdGVcIj5cbiAgICAgICAgICAgICAgICAgICAgPHNwYW4gaWQ9XCJtb3R0by1uYW1lXCI+e3dpbmRvdy5jczE0Mm1vZGVscy5leGFtcGxlTW90dG8oKS5uYW1lfTwvc3Bhbj4gPGJyLz5cbiAgICAgICAgICAgICAgICAgICAgPHNwYW4gaWQ9XCJtb3R0by12YWx1ZVwiPnt3aW5kb3cuY3MxNDJtb2RlbHMuZXhhbXBsZU1vdHRvKCkubW90dG99PC9zcGFuPiA8YnIvPlxuICAgICAgICAgICAgICAgICAgICA8YnIvPlxuICAgICAgICAgICAgICAgICAgICA8bGFiZWwgaHRtbEZvcj1cImZuYW1lXCI+TmFtZTogPC9sYWJlbD5cbiAgICAgICAgICAgICAgICAgICAgPGlucHV0IHR5cGU9XCJ0ZXh0XCIgcGxhY2Vob2xkZXI9e3dpbmRvdy5jczE0Mm1vZGVscy5leGFtcGxlTW90dG8oKS5uYW1lfSBpZD1cImZuYW1lXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgIG9uQ2hhbmdlPXtlID0+IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKFwibW90dG8tbmFtZVwiKS5pbm5lckhUTUwgPSBlLnRhcmdldC52YWx1ZX0vPlxuICAgICAgICAgICAgICAgICAgICA8YnIvPlxuICAgICAgICAgICAgICAgICAgICA8bGFiZWwgaHRtbEZvcj1cImZtb3R0b1wiPk1vdHRvOiA8L2xhYmVsPlxuICAgICAgICAgICAgICAgICAgICA8aW5wdXQgdHlwZT1cInRleHRcIiBwbGFjZWhvbGRlcj17d2luZG93LmNzMTQybW9kZWxzLmV4YW1wbGVNb3R0bygpLm1vdHRvfSBpZD1cImZtb3R0b1wiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICBvbkNoYW5nZT17ZSA9PiBkb2N1bWVudC5nZXRFbGVtZW50QnlJZChcIm1vdHRvLXZhbHVlXCIpLmlubmVySFRNTCA9IGUudGFyZ2V0LnZhbHVlfS8+XG4gICAgICAgICAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgICAgICAgICA8cD5cbiAgICAgICAgICAgICAgICAgICAgVGhpcyB2aWV3IGlzIGFuIGV4YW1wbGUgb2YgYVxuICAgICAgICAgICAgICAgICAgICAmbmJzcDtcbiAgICAgICAgICAgICAgICAgICAgPGEgaHJlZj1cImh0dHBzOi8vcmVhY3Rqcy5vcmcvZG9jcy9yZWFjdC1jb21wb25lbnQuaHRtbFwiIHRhcmdldD1cIl9ibGFua1wiIHJlbD1cIm5vb3BlbmVyIG5vcmVmZXJyZXJcIj5cbiAgICAgICAgICAgICAgICAgICAgICAgIFJlYWN0LmpzIENvbXBvbmVudFxuICAgICAgICAgICAgICAgICAgICA8L2E+XG4gICAgICAgICAgICAgICAgICAgICZuYnNwO1xuICAgICAgICAgICAgICAgICAgICBuYW1lZCA8c3BhbiBjbGFzc05hbWU9XCJjczE0Mi1jb2RlLW5hbWVcIj5FeGFtcGxlPC9zcGFuPi5cbiAgICAgICAgICAgICAgICAgICAgSXQgaXMgbG9jYXRlZCBpbiB0aGVcbiAgICAgICAgICAgICAgICAgICAgZmlsZSA8Y29kZT5jb21wb25lbnRzL2V4YW1wbGUvRXhhbXBsZS5qc3g8L2NvZGU+LlxuICAgICAgICAgICAgICAgICAgICBJdCBsb29rcyBsaWtlIGEgSmF2YVNjcmlwdCBjbGFzcyBuYW1lZCBFeGFtcGxlIHRoYXQgaGFzIGEgbWV0aG9kIG5hbWVkXG4gICAgICAgICAgICAgICAgICAgIG5hbWVkIDxzcGFuIGNsYXNzTmFtZT1cImNzMTQyLWNvZGUtbmFtZVwiPnJlbmRlcjwvc3Bhbj4sIHdoaWNoXG4gICAgICAgICAgICAgICAgICAgIGFwcGVhcnMgdG8gd3JpdHRlbiBpbiBzb21ldGhpbmcgdGhhdCBsb29rcyBsaWtlIEhUTUwuXG4gICAgICAgICAgICAgICAgPC9wPlxuICAgICAgICAgICAgICAgIDxwPlxuICAgICAgICAgICAgICAgICAgICBJdCBpcyBhY3R1YWxseSB3cml0dGVuIGluIGEgbGFuZ3VhZ2UgbmFtZWQgJm5ic3A7XG4gICAgICAgICAgICAgICAgICAgIDxhIGhyZWY9XCJodHRwczovL3JlYWN0anMub3JnL2RvY3MvaW50cm9kdWNpbmctanN4Lmh0bWxcIiB0YXJnZXQ9XCJfYmxhbmtcIiByZWw9XCJub29wZW5lciBub3JlZmVycmVyXCI+XG4gICAgICAgICAgICAgICAgICAgICAgICBKU1hcbiAgICAgICAgICAgICAgICAgICAgPC9hPlxuICAgICAgICAgICAgICAgICAgICAmbmJzcDsgdGhhdCBpcyBydW4gYXMgYSBwcmVwcm9jZXNzb3IgdG8gdGhlIEhUTUwtbGlrZVxuICAgICAgICAgICAgICAgICAgICBsYW5ndWFnZSB0byBKYXZhU2NyaXB0LiBUaGUgZ2VuZXJhdGVkIEphdmFTY2lwdCBpcyBsaW1pdGVkIHRvIGNhbGxzXG4gICAgICAgICAgICAgICAgICAgIHRvIHRoZSBSZWFjdC5qcyAmbmJzcDtcbiAgICAgICAgICAgICAgICAgICAgPGEgaHJlZj1cImh0dHBzOi8vcmVhY3Rqcy5vcmcvZG9jcy9yZWFjdC1hcGkuaHRtbCNjcmVhdGVlbGVtZW50XCIgdGFyZ2V0PVwiX2JsYW5rXCJcbiAgICAgICAgICAgICAgICAgICAgICAgcmVsPVwibm9vcGVuZXIgbm9yZWZlcnJlclwiPlxuICAgICAgICAgICAgICAgICAgICAgICAgY3JlYXRlRWxlbWVudFxuICAgICAgICAgICAgICAgICAgICA8L2E+XG4gICAgICAgICAgICAgICAgICAgICZuYnNwOyBmdW5jdGlvbiB3aGljaCBhbGxvdyB1cyB0byB3cml0ZSBzb21ldGhpbmcgdGhhdCBsb29rc1xuICAgICAgICAgICAgICAgICAgICBsaWtlIEhUTUwgdG8gZGVzY3JpYmUgd2hhdCB0aGUgY29tcG9uZW50IHJlbmRlcnMuXG4gICAgICAgICAgICAgICAgPC9wPlxuICAgICAgICAgICAgICAgIDxwPlxuICAgICAgICAgICAgICAgICAgICBBbHRob3VnaCBKU1ggbG9va3MgbGlrZSBIVE1MLCBpdCBpcyBub3QgSFRNTC4gU29tZSBvZiB0aGUgZGlmZmVyZW5jZXNcbiAgICAgICAgICAgICAgICAgICAgYXJlIG5lY2Vzc2FyeSBkdWUgdG8gZW1iZWRkZGluZ1xuICAgICAgICAgICAgICAgICAgICBpbiBKYXZhU2NyaXB0LiBGb3IgZXhhbXBsZSwgcmF0aGVyIHRoYW4gPGNvZGU+Y2xhc3M9PC9jb2RlPiB3ZVxuICAgICAgICAgICAgICAgICAgICB1c2UgPGNvZGU+Y2xhc3NOYW1lPTwvY29kZT4gKGNsYXNzIGlzIGEgSmF2c1NjcmlwdCBrZXl3b3JkKS5cbiAgICAgICAgICAgICAgICAgICAgQWx0aG91Z2ggaXQgaXMgcG9zc2libGUgdG8gaW50ZXJsZWF2ZSBKYXZhU2NyaXB0IGFuZCBKU1ggY29kZSwgY2FyZSBpc1xuICAgICAgICAgICAgICAgICAgICBuZWVkZWQgc2luY2UgY29udGVudHMgb2YgSlNYIHRhZ3MgYXJlIHByb2Nlc3NlZCBpbnRvIGFyZ3VtZW50cyB0byBhXG4gICAgICAgICAgICAgICAgICAgIGZ1bmN0aW9uIGxpbWl0aW5nIHdoYXQgY2FuIGJlIGRvbmUgYXMgd2lsbCBiZSBzZWVuIGJlbG93LlxuICAgICAgICAgICAgICAgIDwvcD5cblxuICAgICAgICAgICAgICAgIDxoMz5UZW1wbGF0ZSBzdWJzdGl0dXRpb248L2gzPlxuXG4gICAgICAgICAgICAgICAgPHA+XG4gICAgICAgICAgICAgICAgICAgIEpTWCB0cmVhdHMgdGV4dCBpbnNpZGUgb2YgcGFyZW50aGVzZXMgKGUuZy4gPGNvZGU+eyd7SmF2YVNjcmlwdEV4cHJlc3Npb259J308L2NvZGU+KSBhc1xuICAgICAgICAgICAgICAgICAgICB0ZW1wbGF0ZXMgd2hlcmUgdGhlIEphdmFTY3JpcHQgZXhwcmVzc2lvbiBpcyBldmFsdWF0ZWQgaW4gdGhlIGNvbnRleHQgb2YgdGhlIGN1cnJlbnRcbiAgICAgICAgICAgICAgICAgICAgZnVuY3Rpb24gYW5kIHdob3NlIHZhbHVlIHJlcGxhY2VzIHRoZSB0ZW1wbGF0ZSBpbiB0aGUgc3RyaW5nLiBUaGUgZXhwcmVzc2lvblxuICAgICAgICAgICAgICAgICAgICBjYW4gZXZhbHVhdGUgdG8gYSBKYXZhU2NyaXB0IHN0cmluZyBvciB2YWx1ZSBmcm9tIGEgSlNYIGV4cHJlc3Npb24uIFRoaXMgZmVhdHVyZSBhbGxvd3NcbiAgICAgICAgICAgICAgICAgICAgY29tcG9ubWVudCZhcG9zO3Mgc3BlY2lmaWNhdGlvbiB0byB1c2UgdGVtcGxhdGVkIEhUTUwuXG4gICAgICAgICAgICAgICAgPC9wPlxuXG4gICAgICAgICAgICAgICAgPHA+XG4gICAgICAgICAgICAgICAgICAgIFRoZSBFeGFtcGxlIGNsYXNzIGNvbnN0cnVjdG9yIHNldHMgdGhlIG9iamVjdCZhcG9zO3NcbiAgICAgICAgICAgICAgICAgICAgcHJvcGVydHkgPGNvZGU+c3RhdGUubmFtZTwvY29kZT4gKHNlZSB0aGUgYXNzaWdubWVudFxuICAgICAgICAgICAgICAgICAgICB0byA8Y29kZT50aGlzLnN0YXRlLm5hbWU8L2NvZGU+IGluIDxjb2RlPkV4YW1wbGUuanN4PC9jb2RlPilcbiAgICAgICAgICAgICAgICAgICAgZnJvbSB0aGUgbW9kZWwgaW4gdGhlIERPTSB3aGljaCBoYXMgYSB2YWx1ZSBvZiAmbGRxdW87IHt0aGlzLnN0YXRlLm5hbWV9XG4gICAgICAgICAgICAgICAgICAgICZyZHF1bzsgc286XG4gICAgICAgICAgICAgICAgPC9wPlxuICAgICAgICAgICAgICAgIDxwcmUgY2xhc3NOYW1lPVwiY3MxNDItZXhhbXBsZS1jb2RlXCI+XG4gICAgICAgICAgPGNvZGUgY2xhc3NOYW1lPVwibGFuZ3VhZ2UtanN4XCI+XG4gICAgICAgICAgICB7XG4gICAgICAgICAgICAgICAgYDxwPk15IG5hbWUgaXMgXCJ7dGhpcy5zdGF0ZS5uYW1lfVwiLjwvcD5gXG4gICAgICAgICAgICB9XG4gICAgICAgICAgPC9jb2RlPlxuICAgICAgICA8L3ByZT5cbiAgICAgICAgICAgICAgICA8cD5cbiAgICAgICAgICAgICAgICAgICAgc2hvdWxkIHJlbmRlciBhczpcbiAgICAgICAgICAgICAgICA8L3A+XG4gICAgICAgICAgICAgICAgPHAgY2xhc3NOYW1lPVwiY3MxNDItZXhhbXBsZS1vdXRwdXRcIj5cbiAgICAgICAgICAgICAgICAgICAgTXkgbmFtZSBpcyAmbGRxdW87IHt0aGlzLnN0YXRlLm5hbWV9ICZyZHF1bzsuXG4gICAgICAgICAgICAgICAgPC9wPlxuXG4gICAgICAgICAgICAgICAgPGgzPlxuICAgICAgICAgICAgICAgICAgICBPbmUtd2F5IGJpbmRpbmcgZnJvbSBKYXZhU2NyaXB0IHRvIEhUTUxcbiAgICAgICAgICAgICAgICA8L2gzPlxuXG4gICAgICAgICAgICAgICAgPHA+XG4gICAgICAgICAgICAgICAgICAgIFJlYWN0IGF1dG9tYXRpY2FsbHkgcHJvcGFnYXRlcyBhbnkgY2hhbmdlcyB0byBKYXZhU2NyaXB0IHN0YXRlIHRvIHRoZVxuICAgICAgICAgICAgICAgICAgICBKU1ggdGVtcGxhdGVzLiBGb3IgZXhhbXBsZVxuICAgICAgICAgICAgICAgICAgICB0aGUgZm9sbG93aW5nIGNvZGUgPGNvZGU+KHsne3RoaXMuc3RhdGUuY291bnRlcn0nfSk8L2NvZGU+IGRpc3BsYXlzXG4gICAgICAgICAgICAgICAgICAgIHRoZSBzdGF0ZS5jb3VudGVyIHByb3BlcnR5IG9mIHRoZSBFeGFtcGxlIGNvbXBvbmVudC5cbiAgICAgICAgICAgICAgICAgICAgVGhlIGNvbXBvbmVudCBzZXRzIGEgdGltZXJcbiAgICAgICAgICAgICAgICAgICAgdGhhdCBpbmNyZW1lbnRzIHRoZSBjb3VudGVyIGV2ZXJ5IDIgc2Vjb25kcy4gVGhlIHZhbHVlIG9mIHRoZVxuICAgICAgICAgICAgICAgICAgICBjb3VudGVyIGNhbiBiZSBzZWVuIGNoYW5naW5nIGhlcmU6IHt0aGlzLnN0YXRlLmNvdW50ZXJ9LlxuICAgICAgICAgICAgICAgIDwvcD5cblxuICAgICAgICAgICAgICAgIDxoMz5Db250cm9sIGZsb3c8L2gzPlxuICAgICAgICAgICAgICAgIDxwPlxuICAgICAgICAgICAgICAgICAgICBNb3N0IHRlbXBsYXRpbmcgZW5naW5lcyBpbmNsdWRlIHN1cHBvcnQgZm9yIGRvaW5nIGNvbmRpdGlvbmFsXG4gICAgICAgICAgICAgICAgICAgIHJlbmRlcmluZyBhbmQgaXRlcmF0aW9uLiBKU1ggaXMgZW1iZWRkZWQgaW4gYW5kIGlzIHRyYW5zcGlsZWQgdG9cbiAgICAgICAgICAgICAgICAgICAgSmF2YVNjcmlwdCBzbyB3ZSBjYW4gdXNlIEphdmFTY3JpcHQgbGFuZ3VhZ2UgY29uc3RydWN0cyBmb3IgbWFuYWdpbmcgY29udHJvbCBmbG93LlxuICAgICAgICAgICAgICAgIDwvcD5cbiAgICAgICAgICAgICAgICA8cD5cbiAgICAgICAgICAgICAgICAgICAgT25lIHdheSBvZiBkb2luZyBjb250cm9sIHVzaW5nIEphdmFTY3JpcHQgaXMgdG8gYXNzaWduIEpTWCBmcmFnZW1lbnRzXG4gICAgICAgICAgICAgICAgICAgIHRvIEphdmFTY3JpcHQgdmFyaWFibGVzIGFuZCB1c2Ugbm9ybWFsIEphdmFTY3JpcHQgY29udHJvbCBmbG93XG4gICAgICAgICAgICAgICAgICAgIG9wZXJhdG9ycy4gRm9yIGV4YW1wbGUsIHRoZSBmb2xsb3dpbmcgZnVuY3Rpb24gc2VsZWN0cyBhbW9uZyB0aGVcbiAgICAgICAgICAgICAgICAgICAgcG9zc3NpYmxlIG91dHB1dCBsaW5lcyBiYXNlZCBvbiBhbiBhcmd1bWVudCB0byB0aGUgZnVuY3Rpb24gYW5kXG4gICAgICAgICAgICAgICAgICAgIHVzZXMgYSBmb3IgbG9vcCB0byBwb3B1bGF0ZSBhbiBhcnJheS4gVGhlc2UgSmF2YVNjcmlwdCB2YXJpYWJsZXNcbiAgICAgICAgICAgICAgICAgICAgY2FuIHRoZW4gYmUgcmVmZXJyZWQgdG8gaW4gSlNYIHJldHVybmVkIGJ5IHRoZSBmdW5jdGlvbi5cbiAgICAgICAgICAgICAgICA8L3A+XG4gICAgICAgICAgICAgICAgPHByZSBjbGFzc05hbWU9XCJjczE0Mi1leGFtcGxlLWNvZGVcIj5cbiAgICAgICAgICA8Y29kZSBjbGFzc05hbWU9XCJsYW5ndWFnZS1qc3hcIj5cbiAgICAgICAgICAgIHtcbiAgICAgICAgICAgICAgICBgZnVuY3Rpb24gb3V0T2ZCYW5kSlNYKG9wdGlvbikge1xuICB2YXIgb3B0aW9uSlNYO1xuICBpZiAob3B0aW9uKSB7XG4gICAgb3B0aW9uSlNYID0gPGRpdj5PcHRpb24gd2FzIFRydWU8L2Rpdj47XG4gIH0gZWxzZSB7XG4gICAgb3B0aW9uSlNYICA9IDxkaXY+T3B0aW9uIHdhcyBGYWxzZTwvZGl2PjtcbiAgfVxuICB2YXIgbGlzdEl0ZW1zID0gW107XG4gIGZvciAodmFyIGkgPSAwOyBpIDwgMzsgaSsrKSB7XG4gICAgbGlzdEl0ZW1zW2ldID0gPGxpIGtleT17aX0+TGlzdCBJdGVtIHtpfTwvbGk+O1xuICB9XG4gIHZhciByZXRWYWwgPVxuICAgIDxkaXY+XG4gICAgICB7b3B0aW9uSlNYfVxuICAgICAgPHVsPlxuICAgICAgICB7bGlzdEl0ZW1zfVxuICAgICAgPC91bD5cbiAgICA8L2Rpdj47XG5cbiAgcmV0dXJuIHJldFZhbDtcbn1gXG4gICAgICAgICAgICB9XG4gICAgICAgICAgPC9jb2RlPlxuICAgICAgICA8L3ByZT5cbiAgICAgICAgICAgICAgICA8cD5cbiAgICAgICAgICAgICAgICAgICAgQ2FsbGluZyB0aGlzIGZ1bmN0aW9uIGZyb20gYSB0ZW1wbGF0ZVxuICAgICAgICAgICAgICAgICAgICAoaS5lLiA8Y29kZT57J3t0aGlzLm91dE9mQmFuZEpTWCh0cnVlKX0nfTwvY29kZT4pXG4gICAgICAgICAgICAgICAgICAgIHdvdWxkIGJlIGV4cGFuZCB0bzpcbiAgICAgICAgICAgICAgICA8L3A+XG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJjczE0Mi1leGFtcGxlLW91dHB1dFwiPnt0aGlzLm91dE9mQmFuZEpTWCh0cnVlKX08L2Rpdj5cbiAgICAgICAgICAgICAgICA8cD5cbiAgICAgICAgICAgICAgICAgICAgQW5vdGhlciB3YXkgb2YgYWNjb21wbGlzaGluZyB0aGlzIGlzIGVtYmVkZGluZyB0aGUgb3BlcmF0aW9ucyBpbnNpZGVcbiAgICAgICAgICAgICAgICAgICAgb2YgY3VybHkgYnJhY2VzLiBBbHRob3VnaCBhcmJpdHJhcnkgSmF2YVNjcmlwdCBjYW4gYXBwZWFyIGluc2lkZVxuICAgICAgICAgICAgICAgICAgICBicmFjZXMsIGl0IG11c3QgcmV0dXJuIGEgc3RyaW5nIG9yIEpTWCBleHByZXNzaW9uIHRvIHdvcmsuXG4gICAgICAgICAgICAgICAgICAgIEphdmFTY3JpcHQgY29udHJvbCBmbG93IG9wZXJhdGlvbnMgc3VjaCBhcyBpZiwgZm9yLCBhbmQgd2hpbGUgZG9cbiAgICAgICAgICAgICAgICAgICAgbm90IHJldHVybiB2YWx1ZXMgc28gdGVtcGxhdGVzXG4gICAgICAgICAgICAgICAgICAgIGxpa2UgPGNvZGU+eyd7aWYgKGJvb2wpIC4uLiBlbHNlIC4uLn0nfTwvY29kZT4gZG8gbm90IHdvcmsuXG4gICAgICAgICAgICAgICAgPC9wPlxuICAgICAgICAgICAgICAgIDxwPlxuICAgICAgICAgICAgICAgICAgICBUaGUgZm9sbG93aW5nIGNvZGUgZ2VuZXJhdGVzIHRoZSBhYm92ZSBvdXRwdXQgdXNpbmcgdGhlXG4gICAgICAgICAgICAgICAgICAgIEphdmFTY3JpcHQgeydcIj86XCInfSBvcGVyYXRvciBhbmQgZnVuY3Rpb25hbC1zdHlsZSBwcm9ncmFtbWluZ1xuICAgICAgICAgICAgICAgICAgICBzdXBwb3J0IHRvIGFsd2F5cyByZXR1cm4gYSB2YWx1ZSBpbiB0aGUgdGVtcGxhdGU6XG4gICAgICAgICAgICAgICAgPC9wPlxuICAgICAgICAgICAgICAgIDxwcmUgY2xhc3NOYW1lPVwiY3MxNDItZXhhbXBsZS1jb2RlXCI+XG4gICAgICAgICAgPGNvZGUgY2xhc3NOYW1lPVwibGFuZ3VhZ2UtanN4XCI+XG4gICAgICAgICAgICB7XG4gICAgICAgICAgICAgICAgYDxkaXY+XG4gIG9wdGlvbiA/IDxkaXY+T3B0aW9uIHdhcyBUcnVlPC9kaXY+IDogPGRpdj5PcHRpb24gd2FzIEZhbHNlPC9kaXY+IH1cbiAgPHVsPlxuICAgIHtbMCwxLDJdLm1hcCgoaSkgPT4gIDxsaSBrZXk9e2l9Pkxpc3QgSXRlbSB7aX08L2xpPil9XG4gIDwvdWw+XG48L2Rpdj5gXG4gICAgICAgICAgICB9XG4gICAgICAgICAgPC9jb2RlPlxuICAgICAgICA8L3ByZT5cbiAgICAgICAgICAgICAgICA8cD5cbiAgICAgICAgICAgICAgICAgICAgU2hvcnQtY2lyY3VpdCBib29sZWFuIG9wZXJhdGlvbnMgc3VjaCBhcyB7J1wiJiZcIid9IGNhblxuICAgICAgICAgICAgICAgICAgICBhbHNvIGJlIHVzZWQgdG8gY29udHJvbCB3aGF0IGlzIHJlbmRlcmVkLiBGb3IgZXhhbXBsZSB0aGUgZm9sbG93aW5nXG4gICAgICAgICAgICAgICAgICAgIGNvZGUgd2lsbCBtYWtlIGEgc2VudGVuY2UgYXBwZWFyIGJldHdlZW4gdG8gdHdvIHBhcmFncmFwaCB3aGVuIHNvbWVcbiAgICAgICAgICAgICAgICAgICAgY2hhcmFjdGVycyBhcmUgdHlwZWQgaW50byB0aGUgaW5wdXQgYm94IGJlbG93LlxuICAgICAgICAgICAgICAgIDwvcD5cbiAgICAgICAgICAgICAgICA8cHJlIGNsYXNzTmFtZT1cImNzMTQyLWV4YW1wbGUtY29kZVwiPlxuICAgICAgICAgIDxjb2RlIGNsYXNzTmFtZT1cImxhbmd1YWdlLWpzeFwiPlxuICAgICAgICAgICAge1xuICAgICAgICAgICAgICAgIGA8ZGl2PlxuICA8cD5BIHBhcmFncmFwaCB3aWxsIGFwcGVhciBiZXR3ZWVuIHRoaXMgcGFyYWdyYXBoPC9wPlxuICB7XG4gICAgdGhpcy5zdGF0ZS5pbnB1dFZhbHVlICYmIChcbiAgICAgIDxwPlRoaXMgdGV4dCB3aWxsIGFwcGVhciB3aGVuIHRoaXMuc3RhdGUuaW5wdXRWYWx1ZSBpcyB0cnV0aHkuXG4gICAgICAgIHRoaXMuc3RhdGUuaW5wdXRWYWx1ZSA9PT0ge3RoaXMuc3RhdGUuaW5wdXRWYWx1ZX1cbiAgICAgIDwvcD5cbiAgICApXG4gIH1cbiAgPHA+Li4uIGFuZCB0aGlzIG9uZSB3aGVuIHNvbWUgY2hhcmFjdGVycyBhcmUgdHlwZWQgaW50byB0aGUgaW5wdXQgYm94IGJlbG93LjwvcD5cbjwvZGl2PlxuYFxuICAgICAgICAgICAgfVxuICAgICAgICAgIDwvY29kZT5cbiAgICAgICAgPC9wcmU+XG4gICAgICAgICAgICAgICAgPHA+XG4gICAgICAgICAgICAgICAgICAgIEdlbmVyYXRlcyB0aGUgb3V0cHV0OlxuICAgICAgICAgICAgICAgIDwvcD5cbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT1cImNzMTQyLWV4YW1wbGUtb3V0cHV0XCI+XG4gICAgICAgICAgICAgICAgICAgIDxwPlxuICAgICAgICAgICAgICAgICAgICAgICAgQSBwYXJhZ3JhcGggd2lsbCBhcHBlYXIgYmV0d2VlbiB0aGlzIHBhcmFncmFwaFxuICAgICAgICAgICAgICAgICAgICA8L3A+XG4gICAgICAgICAgICAgICAgICAgIHtcbiAgICAgICAgICAgICAgICAgICAgICAgIHRoaXMuc3RhdGUuaW5wdXRWYWx1ZVxuICAgICAgICAgICAgICAgICAgICAgICAgJiYgKFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxwPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBUaGlzIHRleHQgd2lsbCBhcHBlYXIgd2hlbiB0aGlzLnN0YXRlLmlucHV0VmFsdWUgaXMgdHJ1dGh5LlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB0aGlzLnN0YXRlLmlucHV0VmFsdWUgPT09IHt0aGlzLnN0YXRlLmlucHV0VmFsdWV9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9wPlxuICAgICAgICAgICAgICAgICAgICAgICAgKVxuICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgICAgIDxwPlxuICAgICAgICAgICAgICAgICAgICAgICAgLi4uIGFuZCB0aGlzIG9uZSB3aGVuIHNvbWUgY2hhcmFjdGVycyBhcmUgdHlwZWQgaW50byB0aGUgYmVsb3cgYm94LlxuICAgICAgICAgICAgICAgICAgICA8L3A+XG4gICAgICAgICAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgICAgICAgICA8aDM+SW5wdXQgdXNpbmcgRE9NLWxpa2UgaGFuZGxlcnM8L2gzPlxuICAgICAgICAgICAgICAgIDxwPlxuICAgICAgICAgICAgICAgICAgICBJbnB1dCBpbiBSZWFjdCBpcyBkb25lIHVzaW5nIERPTS1saWtlIGV2ZW50IGhhbmRsZXJzLiBGb3IgZXhhbXBsZSwgSlNYIHN0YXRlbWVudHMgbGlrZTpcbiAgICAgICAgICAgICAgICA8L3A+XG4gICAgICAgICAgICAgICAgPHByZSBjbGFzc05hbWU9XCJjczE0Mi1leGFtcGxlLWNvZGVcIj5cbiAgICAgICAgICA8Y29kZSBjbGFzc05hbWU9XCJsYW5ndWFnZS1qc3hcIj5cbiAgICAgICAgICAgIHtcbiAgICAgICAgICAgICAgICBgPGxhYmVsIGh0bWxGb3I9XCJpbklkXCI+SW5wdXQgRmllbGQ6IDwvbGFiZWw+XG48aW5wdXQgdHlwZT1cInRleHRcIiB2YWx1ZT17dGhpcy5zdGF0ZS5pbnB1dFZhbHVlfSBvbkNoYW5nZT17dGhpcy5oYW5kbGVDaGFuZ2VCb3VuZH0gLz5gXG4gICAgICAgICAgICB9XG4gICAgICAgICAgPC9jb2RlPlxuICAgICAgICA8L3ByZT5cbiAgICAgICAgICAgICAgICA8cD5cbiAgICAgICAgICAgICAgICAgICAgd2lsbCBkaXNwbGF5IHRoZSB0ZXh0IGZyb20gdGhlIGlucHV0VmFsdWUgcHJvcGVydHkgb2YgdGhlXG4gICAgICAgICAgICAgICAgICAgIENvbXBvbmVudCZhcG9zO3Mgc3RhdGUgaW4gdGhlIGlucHV0IGJveCAoaXQgc3RhcnRzXG4gICAgICAgICAgICAgICAgICAgIG91dCBibGFuaykgYW5kIGNhbGxzIHRoZSBmdW5jdGlvbiB0aGlzLmhhbmRsZUNoYW5nZWRCb3VuZCBldmVyeSB0aW1lIHRoZVxuICAgICAgICAgICAgICAgICAgICBpbnB1dCBmaWVsZCBpcyBjaGFuZ2VkLlxuICAgICAgICAgICAgICAgICAgICBUeXBpY2FsbHkgdGhpcyBraW5kIG9mIGlucHV0IHdpbGxcbiAgICAgICAgICAgICAgICAgICAgYmUgYXNzb2NpYXRlZCB3aXRoXG4gICAgICAgICAgICAgICAgICAgIGEgPGEgaHJlZj1cImh0dHBzOi8vcmVhY3Rqcy5vcmcvZG9jcy9oYW5kbGluZy1ldmVudHMuaHRtbFwiPkJ1dHRvbjwvYT4gb3JcbiAgICAgICAgICAgICAgICAgICAgaW5zaWRlIGEgPGEgaHJlZj1cImh0dHBzOi8vcmVhY3Rqcy5vcmcvZG9jcy9mb3Jtcy5odG1sXCI+Rm9ybTwvYT4gdG8gYWxsb3dcbiAgICAgICAgICAgICAgICAgICAgdGhlIHVzZXIgdG8gc2lnbmFsIHdoZW4gdGhleSBhcmUgZmluaXNoZWQgY2hhbmdpbmcgdGhlIGlucHV0IGZpZWxkLlxuICAgICAgICAgICAgICAgICAgICBOb3RlIHRoZSBkaWZmZXJlbmNlcyBmcm9tIEhUTUxcbiAgICAgICAgICAgICAgICAgICAgaW4gPGNvZGU+b25jaGFuZ2U9PC9jb2RlPiBiZWNvbWUgPGNvZGU+b25DaGFuZ2U9PC9jb2RlPiBhbmRcbiAgICAgICAgICAgICAgICAgICAgPGNvZGU+Zm9yPTwvY29kZT4gYmVjb21pbmcgPGNvZGU+aHRtbEZvcj08L2NvZGU+LlxuICAgICAgICAgICAgICAgIDwvcD5cblxuICAgICAgICAgICAgICAgIHtcbiAgICAgICAgICAgICAgICAgICAgLyogZXNsaW50LWRpc2FibGUganN4LWExMXkvbGFiZWwtaGFzLWFzc29jaWF0ZWQtY29udHJvbCAqL1xuICAgICAgICAgICAgICAgICAgICAvKiBlc2xpbnQtZGlzYWJsZSBqc3gtYTExeS9sYWJlbC1oYXMtZm9yICovXG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPVwiY3MxNDItZXhhbXBsZS1vdXRwdXRcIj5cbiAgICAgICAgICAgICAgICAgICAgPGxhYmVsIGh0bWxGb3I9XCJpbklkXCI+SW5wdXQgRmllbGQ6XG4gICAgICAgICAgICAgICAgICAgIDwvbGFiZWw+XG4gICAgICAgICAgICAgICAgICAgIDxpbnB1dCBpZD1cImluSWRcIiB0eXBlPVwidGV4dFwiIHZhbHVlPXt0aGlzLnN0YXRlLmlucHV0VmFsdWV9IG9uQ2hhbmdlPXt0aGlzLmhhbmRsZUNoYW5nZUJvdW5kfS8+XG4gICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgICAgPHA+XG4gICAgICAgICAgICAgICAgICAgIFRoZSBoYW5kbGVDaGFuZ2VCb3VuZCBmdW5jdGlvbiB1cGRhdGVzIHRoaXMuc3RhdGUuaW5wdXRWYWx1ZSB3aXRoIHRoZVxuICAgICAgICAgICAgICAgICAgICB2YWx1ZSBvZiB0aGUgRE9NIGVsZW1lbnQgc28gaXRzIHZhbHVlXG4gICAgICAgICAgICAgICAgICAgIGNhbiBiZSBhY2Nlc3MgbGlrZSA8Y29kZT57J3t0aGlzLnN0YXRlLmlucHV0VmFsdWV9J308L2NvZGU+IHdoaWNoXG4gICAgICAgICAgICAgICAgICAgIHJldHVybnMgJm5ic3A7JmxkcXVvOyB7dGhpcy5zdGF0ZS5pbnB1dFZhbHVlfSAgJnJkcXVvOy4gTm90ZSB3ZSBjYW4gbm90IGRpcmVjdGx5XG4gICAgICAgICAgICAgICAgICAgIGNhbGwgPGNvZGU+dGhpcy5oYW5kbGVDaGFuZ2U8L2NvZGU+IHNpbmNlIGl0IGlzIGEgbWV0aG9kIGZ1bmN0aW9uIG9mIGFuIG9iamVjdFxuICAgICAgICAgICAgICAgICAgICB0aGF0IGlzIG5vdCBhdmFpbGFibGUgdG8gdGhlIERPTS4gVG8gaGFuZGxlIHRoaXMgd2UgY3JlYXRlIGEgbmV3XG4gICAgICAgICAgICAgICAgICAgIGZ1bmN0aW9uIDxjb2RlPnRoaXMuaGFuZGxlQ2hhbmdlQm91bmQ8L2NvZGU+IHRoYXQgY2FuIGNhbGwgdGhlIG1ldGhvZCBhbmQgdXNlIGl0IGhlcmUuXG4gICAgICAgICAgICAgICAgPC9wPlxuICAgICAgICAgICAgICAgIDxwPlxuICAgICAgICAgICAgICAgICAgICBJZiB3ZSB3YW50IHRvIHBhc3MgYXJndW1lbnRzIHRvIGV2ZW50IGhhbmRsaW5nIGZ1bmN0aW9ucyB3ZSBjYW4gdXNlIGlubGluZWRcbiAgICAgICAgICAgICAgICAgICAgYXJyb3cgZnVuY3Rpb24gZGVmaW5pdGlvbnMgbGlrZSBzbzpcbiAgICAgICAgICAgICAgICA8L3A+XG4gICAgICAgICAgICAgICAgPHByZSBjbGFzc05hbWU9XCJjczE0Mi1leGFtcGxlLWNvZGVcIj5cbiAgICAgICAgICA8Y29kZSBjbGFzc05hbWU9XCJsYW5ndWFnZS1qc3hcIj5cbiAgICAgICAgICAgIHtcbiAgICAgICAgICAgICAgICBgPGRpdiBjbGFzc05hbWU9XCJjczE0Mi1leGFtcGxlLW91dHB1dFwiPlxuICA8cD5UZXN0IGJ1dHRvbiBjbGlja3MuXG4gICAge1xuICAgICAgdGhpcy5zdGF0ZS5idXR0b25XYXNDbGlja2VkICYmXG4gICAgICA8c3Bhbj5MYXN0IGJ1dHRvbiBjbGlja2VkIHdhczoge3RoaXMuc3RhdGUuYnV0dG9uV2FzQ2xpY2tlZH08L3NwYW4+XG4gICAgfVxuICA8L3A+XG4gIDxidXR0b25cbiAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICBvbkNsaWNrPXtlID0+IHRoaXMuaGFuZGxlQnV0dG9uQ2xpY2soXCJvbmVcIiwgZSl9XG4gID5cbiAgICBDYWxsIGhhbmRsZUJ1dHRvbkNsaWNrIGZ1bmN0aW9uIHdpdGggb25lXG4gIDwvYnV0dG9uPlxuICA8YnV0dG9uXG4gICAgdHlwZT1cImJ1dHRvblwiXG4gICAgb25DbGljaz17ZSA9PiB0aGlzLmhhbmRsZUJ1dHRvbkNsaWNrKFwidHdvXCIsIGUpfVxuICA+XG4gICAgQ2FsbCBoYW5kbGVCdXR0b25DbGljayBmdW5jdGlvbiB3aXRoIHR3b1xuICA8L2J1dHRvbj5cbjwvZGl2PmBcbiAgICAgICAgICAgIH1cbiAgICAgICAgICA8L2NvZGU+XG4gICAgICAgIDwvcHJlPlxuICAgICAgICAgICAgICAgIDxwPlxuICAgICAgICAgICAgICAgICAgICBXaGVuIHRoZSBidXR0b24gaXMgcHVzaGVkIGl0IHdpbGwgY2FsbCB0aGUgYXJyb3cgZnVuY3Rpb24sIHdoaWNoIHdpbGwgdGhlbiBjYWxsIHRoZVxuICAgICAgICAgICAgICAgICAgICBtZXRob2QgPGNvZGU+aGFuZGxlQnV0dG9uQ2xpY2s8L2NvZGU+IHdpdGggdGhlIHNwZWNpZmllZCBhcmd1bWVudC5cbiAgICAgICAgICAgICAgICA8L3A+XG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJjczE0Mi1leGFtcGxlLW91dHB1dFwiPlxuICAgICAgICAgICAgICAgICAgICA8cD5cbiAgICAgICAgICAgICAgICAgICAgICAgIFRlc3QgYnV0dG9uIGNsaWNrcy4ge1xuICAgICAgICAgICAgICAgICAgICAgICAgdGhpcy5zdGF0ZS5idXR0b25XYXNDbGlja2VkXG4gICAgICAgICAgICAgICAgICAgICAgICAmJiA8c3Bhbj5MYXN0IGJ1dHRvbiBjbGlja2VkIHdhczoge3RoaXMuc3RhdGUuYnV0dG9uV2FzQ2xpY2tlZH08L3NwYW4+XG4gICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICAgICAgPC9wPlxuICAgICAgICAgICAgICAgICAgICA8YnV0dG9uIHR5cGU9XCJidXR0b25cIiBvbkNsaWNrPXtlID0+IHRoaXMuaGFuZGxlQnV0dG9uQ2xpY2soJ29uZScsIGUpfT5cbiAgICAgICAgICAgICAgICAgICAgICAgIENhbGwgaGFuZGxlQnV0dG9uQ2xpY2sgZnVuY3Rpb24gd2l0aCBvbmVcbiAgICAgICAgICAgICAgICAgICAgPC9idXR0b24+XG4gICAgICAgICAgICAgICAgICAgIDxidXR0b24gdHlwZT1cImJ1dHRvblwiIG9uQ2xpY2s9e2UgPT4gdGhpcy5oYW5kbGVCdXR0b25DbGljaygndHdvJywgZSl9PlxuICAgICAgICAgICAgICAgICAgICAgICAgQ2FsbCBoYW5kbGVCdXR0b25DbGljayBmdW5jdGlvbiB3aXRoIHR3b1xuICAgICAgICAgICAgICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICApO1xuICAgIH1cbn1cblxuZXhwb3J0IGRlZmF1bHQgRXhhbXBsZTtcbiJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7QUFBQTtBQUNBOzs7QUFBQTtBQUNBO0FBS0E7QUFDQTs7O0FBQUE7QUFDQTtBQUFBO0FBQ0E7QUFBQTtBQUNBOzs7Ozs7Ozs7OztBQVJBOzs7Ozs7QUFTQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7OztBQUNBO0FBQUE7QUFDQTtBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFMQTtBQUNBO0FBS0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUpBO0FBQ0E7QUFNQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQUE7QUFBQTtBQUNBO0FBQ0E7QUFDQTtBQXBCQTtBQXFCQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7OztBQURBO0FBQUE7QUFDQTtBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFBQTtBQUNBO0FBREE7QUFBQTtBQUdBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7OztBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7OztBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOzs7QUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7OztBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUNBO0FBQ0E7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUFBO0FBQ0E7QUFDQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBRkE7QUFDQTtBQUtBO0FBQ0E7OztBQUVBO0FBQUE7QUFDQTtBQUFBO0FBQ0E7QUFBQTtBQUNBO0FBQ0E7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUVBO0FBQUE7QUFBQTtBQUNBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFEQTtBQUNBO0FBQ0E7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUZBO0FBRUE7QUFDQTtBQUNBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFDQTtBQUNBO0FBQUE7QUFBQTtBQUNBO0FBQ0E7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUNBO0FBQ0E7QUFBQTtBQUFBO0FBVkE7QUFhQTtBQUFBO0FBQUE7QUFBQTtBQUdBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFIQTtBQU9BO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFQQTtBQVNBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFUQTtBQVdBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFYQTtBQUFBO0FBY0E7QUFBQTtBQUFBO0FBQUE7QUFFQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBRkE7QUFRQTtBQUFBO0FBQUE7QUFDQTtBQURBO0FBQUE7QUFSQTtBQUFBO0FBZUE7QUFBQTtBQUFBO0FBQUE7QUFHQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBSEE7QUFJQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBSkE7QUFBQTtBQVVBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFFQTtBQUFBO0FBQUE7QUFBQTtBQUNBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFEQTtBQUFBO0FBUUE7QUFBQTtBQUFBO0FBQUE7QUFFQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBRkE7QUFHQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBSEE7QUFHQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBSEE7QUFJQTtBQUpBO0FBQUE7QUFPQTtBQUFBO0FBQUE7QUFDQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBREE7QUFPQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBR0E7QUFBQTtBQUFBO0FBQUE7QUFDQTtBQURBO0FBQUE7QUFJQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBSUE7QUFBQTtBQUFBO0FBQUE7QUFHQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUhBO0FBT0E7QUFQQTtBQUFBO0FBVUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUNBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFLQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBUUE7QUFBQTtBQUFBO0FBQ0E7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQURBO0FBMkJBO0FBQUE7QUFBQTtBQUFBO0FBRUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUZBO0FBQUE7QUFLQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQ0E7QUFBQTtBQUFBO0FBQUE7QUFNQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBTkE7QUFBQTtBQVFBO0FBQUE7QUFBQTtBQUFBO0FBRUE7QUFGQTtBQUFBO0FBS0E7QUFBQTtBQUFBO0FBQ0E7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQURBO0FBWUE7QUFBQTtBQUFBO0FBQUE7QUFDQTtBQURBO0FBQUE7QUFNQTtBQUFBO0FBQUE7QUFDQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBREE7QUFrQkE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUdBO0FBQUE7QUFBQTtBQUNBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFJQTtBQUVBO0FBQUE7QUFBQTtBQUVBO0FBRkE7QUFNQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBYkE7QUFrQkE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUNBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFHQTtBQUFBO0FBQUE7QUFDQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBREE7QUFRQTtBQUFBO0FBQUE7QUFBQTtBQU9BO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFQQTtBQVFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFSQTtBQVdBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFYQTtBQVdBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFYQTtBQVlBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFaQTtBQVlBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFaQTtBQUFBO0FBbUJBO0FBQUE7QUFBQTtBQUNBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFFQTtBQUhBO0FBS0E7QUFBQTtBQUFBO0FBQUE7QUFHQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBSEE7QUFJQTtBQUpBO0FBS0E7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUxBO0FBT0E7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQVBBO0FBQUE7QUFTQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBSUE7QUFBQTtBQUFBO0FBQ0E7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQURBO0FBMEJBO0FBQUE7QUFBQTtBQUFBO0FBRUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUZBO0FBQUE7QUFJQTtBQUFBO0FBQUE7QUFDQTtBQUFBO0FBQUE7QUFBQTtBQUVBO0FBQ0E7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUhBO0FBTUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFHQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQVZBO0FBelNBO0FBeVRBOzs7O0FBOVlBO0FBQ0E7QUFnWkEiLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///./components/example/Example.jsx\n");
+/***/ }),
+/***/ "./components/header/Header.jsx":
+/*!**************************************!*\
+  !*** ./components/header/Header.jsx ***!
+  \**************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+"use strict";
+eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n    value: true\n}));\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\n__webpack_require__(/*! ./Header.css */ \"./components/header/Header.css\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Header = function (_React$Component) {\n    _inherits(Header, _React$Component);\n\n    function Header() {\n        _classCallCheck(this, Header);\n\n        return _possibleConstructorReturn(this, (Header.__proto__ || Object.getPrototypeOf(Header)).apply(this, arguments));\n    }\n\n    _createClass(Header, [{\n        key: 'render',\n        value: function render() {\n            return _react2.default.createElement(\n                'div',\n                { id: 'header' },\n                'header'\n            );\n        }\n    }]);\n\n    return Header;\n}(_react2.default.Component);\n\nexports.default = Header;//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9jb21wb25lbnRzL2hlYWRlci9IZWFkZXIuanN4LmpzIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vcHJvamVjdDQvLi9jb21wb25lbnRzL2hlYWRlci9IZWFkZXIuanN4PzAxMjkiXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcclxuaW1wb3J0ICcuL0hlYWRlci5jc3MnO1xyXG5cclxuY2xhc3MgSGVhZGVyIGV4dGVuZHMgUmVhY3QuQ29tcG9uZW50IHtcclxuICAgIHJlbmRlcigpIHtcclxuICAgICAgICByZXR1cm4gKFxyXG4gICAgICAgICAgICA8ZGl2IGlkPVwiaGVhZGVyXCI+aGVhZGVyPC9kaXY+XHJcbiAgICAgICAgKTtcclxuICAgIH1cclxufVxyXG5cclxuZXhwb3J0IGRlZmF1bHQgSGVhZGVyOyJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7QUFBQTtBQUNBOzs7QUFBQTtBQUNBOzs7Ozs7Ozs7QUFDQTs7Ozs7Ozs7Ozs7QUFDQTtBQUNBO0FBQ0E7QUFBQTtBQUFBO0FBQUE7QUFFQTs7OztBQUxBO0FBQ0E7QUFPQSIsInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///./components/header/Header.jsx\n");
 /***/ }),
@@ -30,6 +41,16 @@ eval("exports = module.exports = __webpack_require__(/*! ../../node_modules/css-
 /***/ }),
+/***/ "./node_modules/css-loader/index.js!./components/header/Header.css":
+/*!*************************************************************************!*\
+  !*** ./node_modules/css-loader/index.js!./components/header/Header.css ***!
+  \*************************************************************************/
+/***/ ((module, exports, __webpack_require__) => {
+eval("exports = module.exports = __webpack_require__(/*! ../../node_modules/css-loader/lib/css-base.js */ \"./node_modules/css-loader/lib/css-base.js\")(false);\n// imports\n\n\n// module\nexports.push([module.id, \"\", \"\"]);\n\n// exports\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9ub2RlX21vZHVsZXMvY3NzLWxvYWRlci9pbmRleC5qcyEuL2NvbXBvbmVudHMvaGVhZGVyL0hlYWRlci5jc3MuanMiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly9wcm9qZWN0NC8uL2NvbXBvbmVudHMvaGVhZGVyL0hlYWRlci5jc3M/ZGY4YSJdLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnRzID0gbW9kdWxlLmV4cG9ydHMgPSByZXF1aXJlKFwiLi4vLi4vbm9kZV9tb2R1bGVzL2Nzcy1sb2FkZXIvbGliL2Nzcy1iYXNlLmpzXCIpKGZhbHNlKTtcbi8vIGltcG9ydHNcblxuXG4vLyBtb2R1bGVcbmV4cG9ydHMucHVzaChbbW9kdWxlLmlkLCBcIlwiLCBcIlwiXSk7XG5cbi8vIGV4cG9ydHNcbiJdLCJtYXBwaW5ncyI6IkFBQUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTsiLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///./node_modules/css-loader/index.js!./components/header/Header.css\n");
+/***/ }),
 /***/ "./node_modules/css-loader/index.js!./node_modules/prismjs/themes/prism.css":
 /*!**********************************************************************************!*\
  !*** ./node_modules/css-loader/index.js!./node_modules/prismjs/themes/prism.css ***!
@@ -211,6 +232,16 @@ eval("\nvar content = __webpack_require__(/*! !!../../node_modules/css-loader/in
 /***/ }),
+/***/ "./components/header/Header.css":
+/*!**************************************!*\
+  !*** ./components/header/Header.css ***!
+  \**************************************/
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+eval("\nvar content = __webpack_require__(/*! !!../../node_modules/css-loader/index.js!./Header.css */ \"./node_modules/css-loader/index.js!./components/header/Header.css\");\n\nif(typeof content === 'string') content = [[module.id, content, '']];\n\nvar transform;\nvar insertInto;\n\n\n\nvar options = {\"hmr\":true}\n\noptions.transform = transform\noptions.insertInto = undefined;\n\nvar update = __webpack_require__(/*! !../../node_modules/style-loader/lib/addStyles.js */ \"./node_modules/style-loader/lib/addStyles.js\")(content, options);\n\nif(content.locals) module.exports = content.locals;\n\nif(false) {}//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9jb21wb25lbnRzL2hlYWRlci9IZWFkZXIuY3NzLmpzIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vcHJvamVjdDQvLi9jb21wb25lbnRzL2hlYWRlci9IZWFkZXIuY3NzPzc5Y2YiXSwic291cmNlc0NvbnRlbnQiOlsiXG52YXIgY29udGVudCA9IHJlcXVpcmUoXCIhIS4uLy4uL25vZGVfbW9kdWxlcy9jc3MtbG9hZGVyL2luZGV4LmpzIS4vSGVhZGVyLmNzc1wiKTtcblxuaWYodHlwZW9mIGNvbnRlbnQgPT09ICdzdHJpbmcnKSBjb250ZW50ID0gW1ttb2R1bGUuaWQsIGNvbnRlbnQsICcnXV07XG5cbnZhciB0cmFuc2Zvcm07XG52YXIgaW5zZXJ0SW50bztcblxuXG5cbnZhciBvcHRpb25zID0ge1wiaG1yXCI6dHJ1ZX1cblxub3B0aW9ucy50cmFuc2Zvcm0gPSB0cmFuc2Zvcm1cbm9wdGlvbnMuaW5zZXJ0SW50byA9IHVuZGVmaW5lZDtcblxudmFyIHVwZGF0ZSA9IHJlcXVpcmUoXCIhLi4vLi4vbm9kZV9tb2R1bGVzL3N0eWxlLWxvYWRlci9saWIvYWRkU3R5bGVzLmpzXCIpKGNvbnRlbnQsIG9wdGlvbnMpO1xuXG5pZihjb250ZW50LmxvY2FscykgbW9kdWxlLmV4cG9ydHMgPSBjb250ZW50LmxvY2FscztcblxuaWYobW9kdWxlLmhvdCkge1xuXHRtb2R1bGUuaG90LmFjY2VwdChcIiEhLi4vLi4vbm9kZV9tb2R1bGVzL2Nzcy1sb2FkZXIvaW5kZXguanMhLi9IZWFkZXIuY3NzXCIsIGZ1bmN0aW9uKCkge1xuXHRcdHZhciBuZXdDb250ZW50ID0gcmVxdWlyZShcIiEhLi4vLi4vbm9kZV9tb2R1bGVzL2Nzcy1sb2FkZXIvaW5kZXguanMhLi9IZWFkZXIuY3NzXCIpO1xuXG5cdFx0aWYodHlwZW9mIG5ld0NvbnRlbnQgPT09ICdzdHJpbmcnKSBuZXdDb250ZW50ID0gW1ttb2R1bGUuaWQsIG5ld0NvbnRlbnQsICcnXV07XG5cblx0XHR2YXIgbG9jYWxzID0gKGZ1bmN0aW9uKGEsIGIpIHtcblx0XHRcdHZhciBrZXksIGlkeCA9IDA7XG5cblx0XHRcdGZvcihrZXkgaW4gYSkge1xuXHRcdFx0XHRpZighYiB8fCBhW2tleV0gIT09IGJba2V5XSkgcmV0dXJuIGZhbHNlO1xuXHRcdFx0XHRpZHgrKztcblx0XHRcdH1cblxuXHRcdFx0Zm9yKGtleSBpbiBiKSBpZHgtLTtcblxuXHRcdFx0cmV0dXJuIGlkeCA9PT0gMDtcblx0XHR9KGNvbnRlbnQubG9jYWxzLCBuZXdDb250ZW50LmxvY2FscykpO1xuXG5cdFx0aWYoIWxvY2FscykgdGhyb3cgbmV3IEVycm9yKCdBYm9ydGluZyBDU1MgSE1SIGR1ZSB0byBjaGFuZ2VkIGNzcy1tb2R1bGVzIGxvY2Fscy4nKTtcblxuXHRcdHVwZGF0ZShuZXdDb250ZW50KTtcblx0fSk7XG5cblx0bW9kdWxlLmhvdC5kaXNwb3NlKGZ1bmN0aW9uKCkgeyB1cGRhdGUoKTsgfSk7XG59Il0sIm1hcHBpbmdzIjoiQUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBIiwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///./components/header/Header.css\n");
+/***/ }),
 /***/ "./node_modules/prismjs/themes/prism.css":
 /*!***********************************************!*\
  !*** ./node_modules/prismjs/themes/prism.css ***!
@@ -295,7 +326,7 @@ eval("\n/**\n * When source maps are enabled, `style-loader` uses a link element
 /*!****************************!*\
  !*** ./gettingStarted.jsx ***!
  \****************************/
-eval("\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _reactDom = __webpack_require__(/*! react-dom */ \"./node_modules/react-dom/index.js\");\n\nvar _reactDom2 = _interopRequireDefault(_reactDom);\n\n__webpack_require__(/*! ./styles/main.css */ \"./styles/main.css\");\n\nvar _Example = __webpack_require__(/*! ./components/example/Example */ \"./components/example/Example.jsx\");\n\nvar _Example2 = _interopRequireDefault(_Example);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n_reactDom2.default.render(_react2.default.createElement(_Example2.default, null), document.getElementById('reactapp'));//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9nZXR0aW5nU3RhcnRlZC5qc3guanMiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly9wcm9qZWN0NC8uL2dldHRpbmdTdGFydGVkLmpzeD9hOTQ3Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgUmVhY3RET00gZnJvbSAncmVhY3QtZG9tJztcbmltcG9ydCAnLi9zdHlsZXMvbWFpbi5jc3MnO1xuXG5pbXBvcnQgRXhhbXBsZSBmcm9tICcuL2NvbXBvbmVudHMvZXhhbXBsZS9FeGFtcGxlJztcblxuUmVhY3RET00ucmVuZGVyKFxuICA8RXhhbXBsZSAvPixcbiAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3JlYWN0YXBwJyksXG4pO1xuIl0sIm1hcHBpbmdzIjoiOztBQUFBO0FBQ0E7OztBQUFBO0FBQ0E7OztBQUFBO0FBQ0E7QUFDQTtBQUNBOzs7OztBQUNBIiwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///./gettingStarted.jsx\n");
+eval("\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _reactDom = __webpack_require__(/*! react-dom */ \"./node_modules/react-dom/index.js\");\n\nvar _reactDom2 = _interopRequireDefault(_reactDom);\n\n__webpack_require__(/*! ./styles/main.css */ \"./styles/main.css\");\n\nvar _Example = __webpack_require__(/*! ./components/example/Example */ \"./components/example/Example.jsx\");\n\nvar _Example2 = _interopRequireDefault(_Example);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n_reactDom2.default.render(_react2.default.createElement(_Example2.default, null), document.getElementById('reactapp'));//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9nZXR0aW5nU3RhcnRlZC5qc3guanMiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly9wcm9qZWN0NC8uL2dldHRpbmdTdGFydGVkLmpzeD9hOTQ3Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgUmVhY3RET00gZnJvbSAncmVhY3QtZG9tJztcbmltcG9ydCAnLi9zdHlsZXMvbWFpbi5jc3MnO1xuXG5pbXBvcnQgRXhhbXBsZSBmcm9tICcuL2NvbXBvbmVudHMvZXhhbXBsZS9FeGFtcGxlJztcblxuUmVhY3RET00ucmVuZGVyKFxuICAgIDxFeGFtcGxlLz4sXG4gICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3JlYWN0YXBwJyksXG4pO1xuIl0sIm1hcHBpbmdzIjoiOztBQUFBO0FBQ0E7OztBQUFBO0FBQ0E7OztBQUFBO0FBQ0E7QUFDQTtBQUNBOzs7OztBQUNBIiwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///./gettingStarted.jsx\n");
 })();
 /******/ })()
--- a/projectFirstPart/compiled/p2.bundle.js
+++ b/projectFirstPart/compiled/p2.bundle.js
--- a/projectFirstPart/components/example/Example.jsx
+++ b/projectFirstPart/components/example/Example.jsx
@@ -8,6 +8,7 @@ import './Example.css';
 import Prism from 'prismjs';
 import 'prismjs/components/prism-jsx.js';
 import '../../node_modules/prismjs/themes/prism.css';
+import Header from "../header/Header";
 /* eslint-disable  react/jsx-one-expression-per-line */
 /* eslint-disable  react/destructuring-assignment */
@@ -100,6 +101,7 @@ class Example extends React.Component {
    render() {
        return (
            <div className="container Example">
+                <Header />
                <h1>CS142 Project#4 React.js Example</h1>
                <div className="motto-update">
@@ -107,10 +109,12 @@ class Example extends React.Component {
                    <span id="motto-value">{window.cs142models.exampleMotto().motto}</span> <br/>
                    <br/>
                    <label htmlFor="fname">Name: </label>
-          <input type="text" placeholder={window.cs142models.exampleMotto().name} id="fname" onChange={e => document.getElementById("motto-name").innerHTML = e.target.value} />
+                    <input type="text" placeholder={window.cs142models.exampleMotto().name} id="fname"
+                           onChange={e => document.getElementById("motto-name").innerHTML = e.target.value}/>
                    <br/>
                    <label htmlFor="fmotto">Motto: </label>
-          <input type="text" placeholder={window.cs142models.exampleMotto().motto} id="fmotto" onChange={e => document.getElementById("motto-value").innerHTML = e.target.value} />
+                    <input type="text" placeholder={window.cs142models.exampleMotto().motto} id="fmotto"
+                           onChange={e => document.getElementById("motto-value").innerHTML = e.target.value}/>
                </div>
                <p>
@@ -135,7 +139,8 @@ class Example extends React.Component {
                    &nbsp; that is run as a preprocessor to the HTML-like
                    language to JavaScript. The generated JavaScipt is limited to calls
                    to the React.js &nbsp;
-          <a href="https://reactjs.org/docs/react-api.html#createelement" target="_blank" rel="noopener noreferrer">
+                    <a href="https://reactjs.org/docs/react-api.html#createelement" target="_blank"
+                       rel="noopener noreferrer">
                        createElement
                    </a>
                    &nbsp; function which allow us to write something that looks

--- a/projectFirstPart/components/header/Header.jsx
+++ b/projectFirstPart/components/header/Header.jsx
+import React from 'react';
+import './Header.css';
+class Header extends React.Component {
+    render() {
+        return (
+            <div id="header">header</div>
+        );
+    }
+}
+export default Header;
\ No newline at end of file
--- a/projectFirstPart/components/header/header.css
+++ b/projectFirstPart/components/header/header.css
--- a/projectFirstPart/components/states/States.jsx
+++ b/projectFirstPart/components/states/States.jsx
 import React from 'react';
 import './States.css';
+import Header from "../header/Header";
 /**
 * Define States, a React componment of CS142 project #4 problem #2.  The model
@@ -47,6 +48,7 @@ class States extends React.Component {
    render() {
        return (
            <div>
+                <Header />
                <label htmlFor="inName">Name: </label>
                <input type="text" placeholder="country" id="inName" onChange={this.findStates}/>
                <table>

--- a/projectFirstPart/gettingStarted.jsx
+++ b/projectFirstPart/gettingStarted.jsx
--- a/projectFirstPart/p2.jsx
+++ b/projectFirstPart/p2.jsx