text: define(["exports", "../../../../@polymer/polymer/polymer-element.js", "../../../../@polymer/polymer/lib/utils/render-status.js", "../../../haxcms-elements/lib/core/HAXCMSThemeWiring.js", "../../../../@polymer/iron-icons/iron-icons.js", "../../../../@polymer/iron-icons/hardware-icons.js", "../../../../@polymer/paper-icon-button/paper-icon-button.js", "../../../../@polymer/paper-styles/color.js", "../../../paper-search/lib/paper-search-bar.js", "../../../../@polymer/paper-tooltip/paper-tooltip.js", "../../../../@polymer/paper-slider/paper-slider.js", "../../../simple-toast/simple-toast.js", "../../../../@polymer/app-layout/app-layout.js", "../../../../@polymer/app-layout/app-drawer/app-drawer.js", "../../../../@polymer/app-layout/app-header/app-header.js", "../../../../@polymer/app-layout/app-toolbar/app-toolbar.js", "../../../../@polymer/app-layout/app-scroll-effects/app-scroll-effects.js", "../../../materializecss-styles/materializecss-styles.js", "../../../lrndesign-stepper/lrndesign-stepper.js", "../../../lrnsys-progress/lrnsys-progress.js", "../../../elmsln-loading/elmsln-loading.js", "../../../page-scroll-position/page-scroll-position.js", "../../../material-progress/material-progress.js", "../../../map-menu/map-menu.js", "./lrnapp-book-progress-dashboard.js"], function (_exports, _polymerElement, _renderStatus, _HAXCMSThemeWiring, _ironIcons, _hardwareIcons, _paperIconButton, _color, _paperSearchBar, _paperTooltip, _paperSlider, _simpleToast, _appLayout, _appDrawer, _appHeader, _appToolbar, _appScrollEffects, _materializecssStyles, _lrndesignStepper, _lrnsysProgress, _elmslnLoading, _pageScrollPosition, _materialProgress, _mapMenu, _lrnappBookProgressDashboard) {
    "use strict";
  
    Object.defineProperty(_exports, "__esModule", {
      value: true
    });
    _exports.LrnappBook = void 0;
  
    function _templateObject_fe186d50e53211e9a0cfefb808989d41() {
      var data = babelHelpers.taggedTemplateLiteral(["\n      <style include=\"materializecss-styles\">\n        :host {\n          display: block;\n          font-size: 16px;\n          box-sizing: content-box;\n        }\n        #toolbar {\n          color: gray;\n          background-color: white;\n          padding: 0 8px;\n          margin: 0;\n          height: auto;\n          box-sizing: content-box;\n          transition: all 0.4s ease;\n        }\n        paper-button {\n          padding: 0;\n          margin: 0;\n          min-width: 16px;\n        }\n        app-drawer {\n          padding: 0;\n          top: 0;\n          bottom: 0;\n          z-index: 1;\n          position: absolute;\n          box-sizing: content-box;\n          --app-drawer-content-container: {\n            background-color: #fafafa;\n            padding: 0;\n            border-right: 1px solid #c8c8c8;\n            overflow-y: scroll;\n            width: 300px !important;\n            box-shadow: 0 76px 8px 0 rgba(0, 0, 0, 0.4);\n            height: 100vh;\n            top: 0;\n            position: sticky;\n          }\n        }\n        lrndesign-stepper-button {\n          --lrndesign-stepper-btn-active: #f6f7f7;\n        }\n        lrndesign-stepper-button ::slotted(paper-button) {\n          margin: 0;\n          height: 48px;\n        }\n        lrndesign-stepper-button ::slotted(.title-container) {\n          padding: 0;\n          width: 100%;\n          right: unset;\n        }\n        lrndesign-stepper-button ::slotted(.node-title) {\n          font-size: 15px;\n          line-height: 24px;\n        }\n\n        .loading {\n          width: 100%;\n          z-index: 1000;\n          opacity: 0.9;\n          text-align: center;\n          align-content: space-around;\n          justify-content: center;\n          position: absolute;\n          background-color: white;\n          padding: 0;\n          margin: 0;\n          display: flex;\n          margin: 0 auto;\n          visibility: visible;\n          transition: visibility 1s, opacity 1s ease;\n        }\n        .loading elmsln-loading {\n          margin: 0 5em;\n          display: inline-flex;\n        }\n        #bodyloading {\n          height: 100%;\n          display: flex;\n          justify-content: center;\n        }\n        #bodyloading .loading,\n        #bodyloading elmsln-loading {\n          display: block;\n          height: 5em;\n        }\n        .outline-title {\n          margin-left: 0.5em;\n          max-width: 50%;\n        }\n        .content-nav-buttons {\n          top: 60%;\n          position: fixed;\n          opacity: 0.8;\n          padding: 0 0.25em;\n          height: 40%;\n          padding-top: 15%;\n          margin-top: -15%;\n        }\n        .content-nav-buttons:hover {\n          opacity: 1;\n        }\n        .prev {\n          left: 0;\n          order: 1;\n        }\n        .next {\n          right: 0;\n          transition: right 0.2s ease;\n          order: 2;\n        }\n        app-header {\n          width: 100%;\n          left: 0 !important;\n          z-index: 2 !important;\n          position: sticky !important;\n        }\n        app-header-layout {\n          margin: 0;\n          padding: 0;\n          width: 100%;\n        }\n        .content-body {\n          position: relative;\n          padding: 0;\n          margin: -3em 4em 5em 4em;\n          font-size: 1.1em;\n          transition: margin 0.4s ease, width 0.4s ease;\n        }\n\n        .content-nav-buttons paper-icon-button {\n          width: 4em;\n          height: 4em;\n          opacity: 0.4;\n          display: block;\n          visibility: visible;\n          transition: opacity 0.4s linear, visibility 1s linear,\n            height 0.4s ease, width 0.4s ease;\n        }\n        .content-nav-buttons paper-icon-button:hover {\n          opacity: 1;\n        }\n        paper-tooltip {\n          --paper-tooltip-opacity: 0.96;\n        }\n        :host([drawer-opened]) .content-nav-buttons paper-icon-button {\n          width: 2.5em;\n          height: 2.5em;\n        }\n        :host([edit-mode]) .content-nav-buttons {\n          opacity: 0;\n          pointer-events: none;\n          visibility: hidden;\n        }\n        .content-title {\n          font-size: 1.4em;\n          margin: 0;\n          padding: 0.25em 0;\n          background-color: white;\n          top: 70px;\n          position: sticky;\n        }\n        .content-current {\n          min-height: 100vh;\n        }\n        .content-next {\n          background-color: grey;\n          opacity: 0.8;\n        }\n        #header {\n          position: sticky;\n          top: 0;\n          left: 0;\n          width: 100%;\n          color: black;\n          background-color: white;\n          z-index: 2;\n          padding: 0;\n          margin: 0;\n          opacity: 1;\n          box-sizing: content-box;\n          transition: all 0.4s ease;\n        }\n        app-drawer-layout {\n          font-family: sans-serif;\n        }\n        :host {\n          --app-drawer-width: 300px;\n        }\n        :host([full-width]) {\n          --app-drawer-width: 0px;\n        }\n        :host([drawer-opened]) .prev,\n        :host([edit-mode]) .prev {\n          left: 19em;\n        }\n        .progress-container {\n          width: 90%;\n          padding: 0;\n          margin: 0 0 0 1em;\n          overflow: visible;\n        }\n\n        [main-title] {\n          font-weight: lighter;\n          padding: 0.6em 0 0 0;\n          margin: 0;\n          height: 3em;\n          overflow-y: scroll;\n        }\n        [hidden] {\n          visibility: hidden !important;\n          opacity: 0 !important;\n          display: block !important;\n        }\n        paper-search-bar[hidden] {\n          display: none !important;\n        }\n        lrnsys-progress {\n          margin-top: 0.5em;\n          padding: 0.2em 0 0 0;\n          box-sizing: content-box;\n        }\n        lrnsys-progress lrnsys-progress-circle {\n          list-style-type: none;\n          box-sizing: content-box;\n        }\n\n        #bookdrawercontent {\n          overflow: scroll;\n          visibility: visible;\n          display: block;\n          opacity: 1;\n          transition: visibility 1s linear, opacity 1s linear;\n        }\n        @media (max-width: 1200px) {\n          :host .content-body {\n            font-size: 0.94em;\n          }\n        }\n        @media (max-width: 960px) {\n          :host .content-body {\n            font-size: 0.92em;\n          }\n        }\n        @media (max-width: 820px) {\n          :host .content-body {\n            font-size: 0.9em;\n          }\n        }\n        @media (max-width: 700px) {\n          :host .content-body {\n            font-size: 0.9em;\n          }\n        }\n        @media (max-width: 639px) {\n          app-drawer-layout {\n            top: 0;\n          }\n          [main-title] {\n            font-size: 0.8em;\n          }\n          .content-title {\n            font-size: 1.1em;\n          }\n          .outline-title {\n            position: absolute !important;\n            clip: rect(1px 1px 1px 1px); /* IE6, IE7 */\n            clip: rect(1px, 1px, 1px, 1px);\n            overflow: hidden;\n            height: 1px;\n          }\n          :host .content-body {\n            margin: 0 0.5em;\n            font-size: 0.9em;\n            width: 85%;\n          }\n          .content-nav-buttons {\n            position: relative;\n            display: flex;\n            top: unset;\n            padding: 0;\n            opacity: 0.8;\n            height: unset;\n            margin: 0;\n          }\n          .content-nav {\n            width: 100%;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            vertical-align: middle;\n          }\n          .next {\n            right: unset;\n          }\n        }\n        @media (max-width: 500px) {\n          [main-title] {\n            font-size: 0.7em;\n          }\n        }\n\n        :host([edit-mode]) #header {\n          background-color: var(--paper-grey-500);\n        }\n        :host([edit-mode]) #toolbar {\n          opacity: 0.5;\n        }\n        .your-progress-button {\n          padding-right: 1em;\n        }\n        #mapmenu {\n          padding: 1em 0;\n          overflow-x: hidden;\n        }\n        .course-title-drawer {\n          font-size: 1.2em;\n        }\n        /**\n        * Hide the slotted content during edit mode. This must be here to work.\n        */\n        :host([edit-mode]) #slot {\n          display: none;\n        }\n      </style>\n      <page-scroll-position value=\"{{scrollPosition}}\"></page-scroll-position>\n      <div id=\"anchor\"></div>\n      <!-- body where most of the heavy lifting happens -->\n      <app-drawer-layout>\n        <!-- LRNApp book we expect to navigate -->\n        <app-drawer\n          slot=\"drawer\"\n          id=\"bookdrawer\"\n          opened=\"{{drawerOpened}}\"\n          swipe-open=\"\"\n          transition-duration=\"300\"\n        >\n          <div\n            id=\"bookdrawercontent\"\n            style=\"height: 100%; overflow: auto;\"\n            hidden$=\"[[!bookItems]]\"\n          >\n            <paper-search-bar\n              hide-filter-button=\"\"\n              hidden$=\"[[!showSearch]]\"\n            ></paper-search-bar>\n            <map-menu id=\"mapmenu\" manifest=\"[[_routerManifest]]\">\n              <!-- Server response will populate this -->\n            </map-menu>\n          </div>\n        </app-drawer>\n        <app-header-layout>\n          <app-header slot=\"header\" id=\"header\" shadow=\"\" fixed=\"\">\n            <div id=\"outlineloading\" class=\"loading\">\n              <elmsln-loading color=\"grey-text\" size=\"medium\"></elmsln-loading>\n              <elmsln-loading color=\"grey-text\" size=\"medium\"></elmsln-loading>\n              <elmsln-loading color=\"grey-text\" size=\"medium\"></elmsln-loading>\n            </div>\n            <app-toolbar id=\"toolbar\" sticky=\"\" class=\"tall\">\n              <div style=\"pointer-events: auto;\" class=\"menu-btn-wrap\">\n                <paper-icon-button\n                  style=\"pointer-events: auto;\"\n                  title=\"Content outline\"\n                  id=\"menubutton\"\n                  icon=\"menu\"\n                  on-click=\"toggleBook\"\n                ></paper-icon-button>\n              </div>\n              <div spacer=\"\" class=\"outline-title\">[[outlineTitle]]</div>\n              <div spacer=\"\" main-title=\"\" style=\"pointer-events: auto;\">\n                <div class=\"progress-container\">\n                  <lrnsys-progress\n                    sound-finish=\"[[soundFinish]]\"\n                    sound=\"[[sound]]\"\n                    complete-sound=\"[[completeSound]]\"\n                    finished-sound=\"[[finishedSound]]\"\n                    title=\"The steps to complete this lesson\"\n                    id=\"progress\"\n                    active=\"{{activePage}}\"\n                    manifest=\"{{manifest}}\"\n                    progressive-unlock=\"\"\n                    size=\"small\"\n                  ></lrnsys-progress>\n                </div>\n              </div>\n              <!--\n              <div class=\"your-progress-button\">\n                <lrnsys-dialog body-append modal on-click=\"progressdashboardopen\" header=\"Your progress\" alt=\"Your progress\">\n                  <span slot=\"button\"><iron-icon icon=\"av:equalizer\"></iron-icon></span>\n                  <div>\n                    <lrnapp-book-progress-dashboard id=\"progressdashboard\" source-path=\"[[progressDashboardPath]]\" route-data=\"[[data]]\"></lrnapp-book-progress-dashboard>\n                  </div>\n                </lrnsys-dialog>\n              </div>\n            -->\n            </app-toolbar>\n          </app-header>\n          <div class=\"content-body\">\n            <div id=\"current\" class=\"content-current\">\n              <h2 id=\"currenttitle\" class=\"content-title\">[[currentTitle]]</h2>\n              <div id=\"bodyloading\" class=\"loading\">\n                <elmsln-loading color=\"grey-text\" size=\"large\"></elmsln-loading>\n                <h3 class=\"loading-text\">Loading content..</h3>\n              </div>\n              <div id=\"contentcontainer\">\n                <div id=\"slot\"><slot></slot></div>\n              </div>\n            </div>\n          </div>\n          <div class=\"content-nav\">\n            <div class=\"content-nav-buttons next\">\n              <paper-icon-button\n                id=\"next\"\n                title=\"[[nextLabel]]\"\n                on-click=\"_nextBtn\"\n                icon=\"hardware:keyboard-arrow-right\"\n                data-voicecommand=\"next page\"\n                hidden$=\"[[!hasNextPage]]\"\n              ></paper-icon-button>\n              <paper-tooltip\n                for=\"next\"\n                position=\"left\"\n                offset=\"0\"\n                animation-delay=\"100\"\n              >\n                [[nextLabel]]\n              </paper-tooltip>\n            </div>\n            <div class=\"content-nav-buttons prev\">\n              <paper-icon-button\n                id=\"prev\"\n                title=\"[[prevLabel]]\"\n                on-click=\"_prevBtn\"\n                icon=\"hardware:keyboard-arrow-left\"\n                data-voicecommand=\"previous page\"\n                hidden$=\"[[!hasPrevPage]]\"\n              ></paper-icon-button>\n              <paper-tooltip\n                for=\"prev\"\n                position=\"right\"\n                offset=\"0\"\n                animation-delay=\"100\"\n              >\n                [[prevLabel]]\n              </paper-tooltip>\n            </div>\n          </div>\n        </app-header-layout>\n      </app-drawer-layout>\n    "], ["\n      <style include=\"materializecss-styles\">\n        :host {\n          display: block;\n          font-size: 16px;\n          box-sizing: content-box;\n        }\n        #toolbar {\n          color: gray;\n          background-color: white;\n          padding: 0 8px;\n          margin: 0;\n          height: auto;\n          box-sizing: content-box;\n          transition: all 0.4s ease;\n        }\n        paper-button {\n          padding: 0;\n          margin: 0;\n          min-width: 16px;\n        }\n        app-drawer {\n          padding: 0;\n          top: 0;\n          bottom: 0;\n          z-index: 1;\n          position: absolute;\n          box-sizing: content-box;\n          --app-drawer-content-container: {\n            background-color: #fafafa;\n            padding: 0;\n            border-right: 1px solid #c8c8c8;\n            overflow-y: scroll;\n            width: 300px !important;\n            box-shadow: 0 76px 8px 0 rgba(0, 0, 0, 0.4);\n            height: 100vh;\n            top: 0;\n            position: sticky;\n          }\n        }\n        lrndesign-stepper-button {\n          --lrndesign-stepper-btn-active: #f6f7f7;\n        }\n        lrndesign-stepper-button ::slotted(paper-button) {\n          margin: 0;\n          height: 48px;\n        }\n        lrndesign-stepper-button ::slotted(.title-container) {\n          padding: 0;\n          width: 100%;\n          right: unset;\n        }\n        lrndesign-stepper-button ::slotted(.node-title) {\n          font-size: 15px;\n          line-height: 24px;\n        }\n\n        .loading {\n          width: 100%;\n          z-index: 1000;\n          opacity: 0.9;\n          text-align: center;\n          align-content: space-around;\n          justify-content: center;\n          position: absolute;\n          background-color: white;\n          padding: 0;\n          margin: 0;\n          display: flex;\n          margin: 0 auto;\n          visibility: visible;\n          transition: visibility 1s, opacity 1s ease;\n        }\n        .loading elmsln-loading {\n          margin: 0 5em;\n          display: inline-flex;\n        }\n        #bodyloading {\n          height: 100%;\n          display: flex;\n          justify-content: center;\n        }\n        #bodyloading .loading,\n        #bodyloading elmsln-loading {\n          display: block;\n          height: 5em;\n        }\n        .outline-title {\n          margin-left: 0.5em;\n          max-width: 50%;\n        }\n        .content-nav-buttons {\n          top: 60%;\n          position: fixed;\n          opacity: 0.8;\n          padding: 0 0.25em;\n          height: 40%;\n          padding-top: 15%;\n          margin-top: -15%;\n        }\n        .content-nav-buttons:hover {\n          opacity: 1;\n        }\n        .prev {\n          left: 0;\n          order: 1;\n        }\n        .next {\n          right: 0;\n          transition: right 0.2s ease;\n          order: 2;\n        }\n        app-header {\n          width: 100%;\n          left: 0 !important;\n          z-index: 2 !important;\n          position: sticky !important;\n        }\n        app-header-layout {\n          margin: 0;\n          padding: 0;\n          width: 100%;\n        }\n        .content-body {\n          position: relative;\n          padding: 0;\n          margin: -3em 4em 5em 4em;\n          font-size: 1.1em;\n          transition: margin 0.4s ease, width 0.4s ease;\n        }\n\n        .content-nav-buttons paper-icon-button {\n          width: 4em;\n          height: 4em;\n          opacity: 0.4;\n          display: block;\n          visibility: visible;\n          transition: opacity 0.4s linear, visibility 1s linear,\n            height 0.4s ease, width 0.4s ease;\n        }\n        .content-nav-buttons paper-icon-button:hover {\n          opacity: 1;\n        }\n        paper-tooltip {\n          --paper-tooltip-opacity: 0.96;\n        }\n        :host([drawer-opened]) .content-nav-buttons paper-icon-button {\n          width: 2.5em;\n          height: 2.5em;\n        }\n        :host([edit-mode]) .content-nav-buttons {\n          opacity: 0;\n          pointer-events: none;\n          visibility: hidden;\n        }\n        .content-title {\n          font-size: 1.4em;\n          margin: 0;\n          padding: 0.25em 0;\n          background-color: white;\n          top: 70px;\n          position: sticky;\n        }\n        .content-current {\n          min-height: 100vh;\n        }\n        .content-next {\n          background-color: grey;\n          opacity: 0.8;\n        }\n        #header {\n          position: sticky;\n          top: 0;\n          left: 0;\n          width: 100%;\n          color: black;\n          background-color: white;\n          z-index: 2;\n          padding: 0;\n          margin: 0;\n          opacity: 1;\n          box-sizing: content-box;\n          transition: all 0.4s ease;\n        }\n        app-drawer-layout {\n          font-family: sans-serif;\n        }\n        :host {\n          --app-drawer-width: 300px;\n        }\n        :host([full-width]) {\n          --app-drawer-width: 0px;\n        }\n        :host([drawer-opened]) .prev,\n        :host([edit-mode]) .prev {\n          left: 19em;\n        }\n        .progress-container {\n          width: 90%;\n          padding: 0;\n          margin: 0 0 0 1em;\n          overflow: visible;\n        }\n\n        [main-title] {\n          font-weight: lighter;\n          padding: 0.6em 0 0 0;\n          margin: 0;\n          height: 3em;\n          overflow-y: scroll;\n        }\n        [hidden] {\n          visibility: hidden !important;\n          opacity: 0 !important;\n          display: block !important;\n        }\n        paper-search-bar[hidden] {\n          display: none !important;\n        }\n        lrnsys-progress {\n          margin-top: 0.5em;\n          padding: 0.2em 0 0 0;\n          box-sizing: content-box;\n        }\n        lrnsys-progress lrnsys-progress-circle {\n          list-style-type: none;\n          box-sizing: content-box;\n        }\n\n        #bookdrawercontent {\n          overflow: scroll;\n          visibility: visible;\n          display: block;\n          opacity: 1;\n          transition: visibility 1s linear, opacity 1s linear;\n        }\n        @media (max-width: 1200px) {\n          :host .content-body {\n            font-size: 0.94em;\n          }\n        }\n        @media (max-width: 960px) {\n          :host .content-body {\n            font-size: 0.92em;\n          }\n        }\n        @media (max-width: 820px) {\n          :host .content-body {\n            font-size: 0.9em;\n          }\n        }\n        @media (max-width: 700px) {\n          :host .content-body {\n            font-size: 0.9em;\n          }\n        }\n        @media (max-width: 639px) {\n          app-drawer-layout {\n            top: 0;\n          }\n          [main-title] {\n            font-size: 0.8em;\n          }\n          .content-title {\n            font-size: 1.1em;\n          }\n          .outline-title {\n            position: absolute !important;\n            clip: rect(1px 1px 1px 1px); /* IE6, IE7 */\n            clip: rect(1px, 1px, 1px, 1px);\n            overflow: hidden;\n            height: 1px;\n          }\n          :host .content-body {\n            margin: 0 0.5em;\n            font-size: 0.9em;\n            width: 85%;\n          }\n          .content-nav-buttons {\n            position: relative;\n            display: flex;\n            top: unset;\n            padding: 0;\n            opacity: 0.8;\n            height: unset;\n            margin: 0;\n          }\n          .content-nav {\n            width: 100%;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            vertical-align: middle;\n          }\n          .next {\n            right: unset;\n          }\n        }\n        @media (max-width: 500px) {\n          [main-title] {\n            font-size: 0.7em;\n          }\n        }\n\n        :host([edit-mode]) #header {\n          background-color: var(--paper-grey-500);\n        }\n        :host([edit-mode]) #toolbar {\n          opacity: 0.5;\n        }\n        .your-progress-button {\n          padding-right: 1em;\n        }\n        #mapmenu {\n          padding: 1em 0;\n          overflow-x: hidden;\n        }\n        .course-title-drawer {\n          font-size: 1.2em;\n        }\n        /**\n        * Hide the slotted content during edit mode. This must be here to work.\n        */\n        :host([edit-mode]) #slot {\n          display: none;\n        }\n      </style>\n      <page-scroll-position value=\"{{scrollPosition}}\"></page-scroll-position>\n      <div id=\"anchor\"></div>\n      <!-- body where most of the heavy lifting happens -->\n      <app-drawer-layout>\n        <!-- LRNApp book we expect to navigate -->\n        <app-drawer\n          slot=\"drawer\"\n          id=\"bookdrawer\"\n          opened=\"{{drawerOpened}}\"\n          swipe-open=\"\"\n          transition-duration=\"300\"\n        >\n          <div\n            id=\"bookdrawercontent\"\n            style=\"height: 100%; overflow: auto;\"\n            hidden\\$=\"[[!bookItems]]\"\n          >\n            <paper-search-bar\n              hide-filter-button=\"\"\n              hidden\\$=\"[[!showSearch]]\"\n            ></paper-search-bar>\n            <map-menu id=\"mapmenu\" manifest=\"[[_routerManifest]]\">\n              <!-- Server response will populate this -->\n            </map-menu>\n          </div>\n        </app-drawer>\n        <app-header-layout>\n          <app-header slot=\"header\" id=\"header\" shadow=\"\" fixed=\"\">\n            <div id=\"outlineloading\" class=\"loading\">\n              <elmsln-loading color=\"grey-text\" size=\"medium\"></elmsln-loading>\n              <elmsln-loading color=\"grey-text\" size=\"medium\"></elmsln-loading>\n              <elmsln-loading color=\"grey-text\" size=\"medium\"></elmsln-loading>\n            </div>\n            <app-toolbar id=\"toolbar\" sticky=\"\" class=\"tall\">\n              <div style=\"pointer-events: auto;\" class=\"menu-btn-wrap\">\n                <paper-icon-button\n                  style=\"pointer-events: auto;\"\n                  title=\"Content outline\"\n                  id=\"menubutton\"\n                  icon=\"menu\"\n                  on-click=\"toggleBook\"\n                ></paper-icon-button>\n              </div>\n              <div spacer=\"\" class=\"outline-title\">[[outlineTitle]]</div>\n              <div spacer=\"\" main-title=\"\" style=\"pointer-events: auto;\">\n                <div class=\"progress-container\">\n                  <lrnsys-progress\n                    sound-finish=\"[[soundFinish]]\"\n                    sound=\"[[sound]]\"\n                    complete-sound=\"[[completeSound]]\"\n                    finished-sound=\"[[finishedSound]]\"\n                    title=\"The steps to complete this lesson\"\n                    id=\"progress\"\n                    active=\"{{activePage}}\"\n                    manifest=\"{{manifest}}\"\n                    progressive-unlock=\"\"\n                    size=\"small\"\n                  ></lrnsys-progress>\n                </div>\n              </div>\n              <!--\n              <div class=\"your-progress-button\">\n                <lrnsys-dialog body-append modal on-click=\"progressdashboardopen\" header=\"Your progress\" alt=\"Your progress\">\n                  <span slot=\"button\"><iron-icon icon=\"av:equalizer\"></iron-icon></span>\n                  <div>\n                    <lrnapp-book-progress-dashboard id=\"progressdashboard\" source-path=\"[[progressDashboardPath]]\" route-data=\"[[data]]\"></lrnapp-book-progress-dashboard>\n                  </div>\n                </lrnsys-dialog>\n              </div>\n            -->\n            </app-toolbar>\n          </app-header>\n          <div class=\"content-body\">\n            <div id=\"current\" class=\"content-current\">\n              <h2 id=\"currenttitle\" class=\"content-title\">[[currentTitle]]</h2>\n              <div id=\"bodyloading\" class=\"loading\">\n                <elmsln-loading color=\"grey-text\" size=\"large\"></elmsln-loading>\n                <h3 class=\"loading-text\">Loading content..</h3>\n              </div>\n              <div id=\"contentcontainer\">\n                <div id=\"slot\"><slot></slot></div>\n              </div>\n            </div>\n          </div>\n          <div class=\"content-nav\">\n            <div class=\"content-nav-buttons next\">\n              <paper-icon-button\n                id=\"next\"\n                title=\"[[nextLabel]]\"\n                on-click=\"_nextBtn\"\n                icon=\"hardware:keyboard-arrow-right\"\n                data-voicecommand=\"next page\"\n                hidden\\$=\"[[!hasNextPage]]\"\n              ></paper-icon-button>\n              <paper-tooltip\n                for=\"next\"\n                position=\"left\"\n                offset=\"0\"\n                animation-delay=\"100\"\n              >\n                [[nextLabel]]\n              </paper-tooltip>\n            </div>\n            <div class=\"content-nav-buttons prev\">\n              <paper-icon-button\n                id=\"prev\"\n                title=\"[[prevLabel]]\"\n                on-click=\"_prevBtn\"\n                icon=\"hardware:keyboard-arrow-left\"\n                data-voicecommand=\"previous page\"\n                hidden\\$=\"[[!hasPrevPage]]\"\n              ></paper-icon-button>\n              <paper-tooltip\n                for=\"prev\"\n                position=\"right\"\n                offset=\"0\"\n                animation-delay=\"100\"\n              >\n                [[prevLabel]]\n              </paper-tooltip>\n            </div>\n          </div>\n        </app-header-layout>\n      </app-drawer-layout>\n    "]);
  
      _templateObject_fe186d50e53211e9a0cfefb808989d41 = function _templateObject_fe186d50e53211e9a0cfefb808989d41() {
        return data;
      };
  
      return data;
    }
  
    /**
    `lrnapp-book`
    A LRN element
    
    * @demo demo/index.html
    
    @microcopy
      node / circle - A progress circle on the line
      nodes / items - the list of items in the progress bar
      bubble - reserved for when events fire out of an element or value is tracking events
      percentage - amount complete either in the bar or the nodes themselves
      bar - the underlayed bar that's tracking overall progression
      author mode - authoring mode
    */
    var LrnappBook =
    /*#__PURE__*/
    function (_HAXCMSTheme) {
      babelHelpers.inherits(LrnappBook, _HAXCMSTheme);
  
      function LrnappBook() {
        babelHelpers.classCallCheck(this, LrnappBook);
        return babelHelpers.possibleConstructorReturn(this, babelHelpers.getPrototypeOf(LrnappBook).apply(this, arguments));
      }
  
      babelHelpers.createClass(LrnappBook, [{
        key: "ready",
  
        /**
         * Ready event.
         */
        value: function ready() {
          var _this = this;
  
          babelHelpers.get(babelHelpers.getPrototypeOf(LrnappBook.prototype), "ready", this).call(this);
          window.dispatchEvent(new CustomEvent("haxcms-router-manifest-subscribe", {
            detail: {
              callback: "_haxcmsRouterManifestSubscribeHandler",
              scope: this,
              setup: true
            }
          }));
          window.SimpleToast.requestAvailability();
          this.$.bodyloading.hidden = true; // scroll top into view
  
          setTimeout(function () {
            _this._resetScroll();
          }, 500);
        }
        /**
         * attached life cycle
         */
  
      }, {
        key: "connectedCallback",
        value: function connectedCallback() {
          babelHelpers.get(babelHelpers.getPrototypeOf(LrnappBook.prototype), "connectedCallback", this).call(this);
          (0, _renderStatus.afterNextRender)(this, function () {
            this.$.progress.addEventListener("node-percent-milestone", this.testMilestone.bind(this));
            this.$.mapmenu.addEventListener("link-clicked", this._menuItemClicked.bind(this));
          });
        }
        /**
         * detached life cycle
         */
  
      }, {
        key: "disconnectedCallback",
        value: function disconnectedCallback() {
          this.$.progress.removeEventListener("node-percent-milestone", this.testMilestone.bind(this));
          this.$.mapmenu.removeEventListener("link-clicked", this._menuItemClicked.bind(this));
          babelHelpers.get(babelHelpers.getPrototypeOf(LrnappBook.prototype), "disconnectedCallback", this).call(this);
        }
      }, {
        key: "_haxcmsRouterManifestSubscribeHandler",
        value: function _haxcmsRouterManifestSubscribeHandler(e) {
          this._routerManifest = {};
          this._routerManifest = e.detail;
        }
      }, {
        key: "_menuItemClicked",
        value: function _menuItemClicked(e) {
          var i = this.manifest.items.findIndex(function (j) {
            return j.id === e.detail.id;
          });
          this.activePage = i;
        }
        /**
         * When element is told to be full width it'll close things.
         */
  
      }, {
        key: "_fullWidthChanged",
        value: function _fullWidthChanged(newValue, oldValue) {
          this.updateStyles();
        }
        /**
         * Handle click on dashboard to trigger loading data.
         */
  
      }, {
        key: "progressdashboardopen",
        value: function progressdashboardopen(e) {
          this.$.progressdashboard.showProgress = true;
        }
        /**
         * Generate path to point to the right endpoint for updating items.
         */
  
      }, {
        key: "_computePageUpdatePath",
        value: function _computePageUpdatePath(data, sourcePath) {
          return sourcePath.replace("%", data.id);
        }
        /**
         * React when state changes for editMode
         */
  
      }, {
        key: "_editModeChanged",
        value: function _editModeChanged(newValue, oldValue) {
          if (babelHelpers.typeof(newValue) !== (typeof undefined === "undefined" ? "undefined" : babelHelpers.typeof(undefined))) {
            if (newValue === true) {
              this.$.currenttitle.contentEditable = true; // block scroll tracking during edit mode
  
              this.resetScroll = true; // notification to user
  
              var evt = new CustomEvent("simple-toast-show", {
                bubbles: true,
                cancelable: true,
                detail: {
                  text: "Editor mode active",
                  duration: 5000
                }
              });
            } else {
              this.$.currenttitle.contentEditable = false; // allow scrolling to take place now
  
              this.resetScroll = false; // we were in edit mode, now time to save for real
  
              if (oldValue === true) {
                // see if title changed
                if (this.$.currenttitle.innerHTML !== this.currentPageData.title) {
                  this.currentPageData.title = this.$.currenttitle.innerHTML;
                }
  
                var _evt = new CustomEvent("simple-toast-show", {
                  bubbles: true,
                  cancelable: true,
                  detail: {
                    text: "Saved",
                    duration: 0
                  }
                });
  
                this.dispatchEvent(_evt);
              }
            }
          }
        }
        /**
         * A book level button was pressed, we need to invoke a change of
         * content as well as outline.
         */
  
      }, {
        key: "_activeOutlineChanged",
        value: function _activeOutlineChanged(newValue, oldValue) {
          if (babelHelpers.typeof(newValue) !== (typeof undefined === "undefined" ? "undefined" : babelHelpers.typeof(undefined)) && babelHelpers.typeof(oldValue) !== (typeof undefined === "undefined" ? "undefined" : babelHelpers.typeof(undefined))) {
            // trigger loading state
            this.rebuildOutline = true;
          }
        }
        /**
         * Reset scroll position visually and internally data wise.
         */
  
      }, {
        key: "_resetScroll",
        value: function _resetScroll() {
          this.resetScroll = true;
          this.scrollPosition = 0;
          this.$.anchor.scrollIntoView({
            block: "start",
            behavior: "smooth",
            inline: "nearest"
          });
        }
        /**
         * React to active page being changed.
         */
  
      }, {
        key: "_activePageChanged",
        value: function _activePageChanged(newValue, oldValue) {
          var _this2 = this;
  
          if (babelHelpers.typeof(newValue) !== (typeof undefined === "undefined" ? "undefined" : babelHelpers.typeof(undefined))) {
            if (babelHelpers.typeof(this.outlineItems) !== (typeof undefined === "undefined" ? "undefined" : babelHelpers.typeof(undefined)) && this.outlineItems.length > 0) {
              this.dispatchEvent(new CustomEvent("json-outline-schema-active-item-changed", {
                bubbles: true,
                cancelable: true,
                composed: true,
                detail: this.outlineItems[newValue]
              }));
            } // scroll into view the container that's about to be swapped out
  
  
            if (babelHelpers.typeof(oldValue) !== (typeof undefined === "undefined" ? "undefined" : babelHelpers.typeof(undefined))) {} // ensure that scrolling percentage doesn't increase the next item
            // while active is being changed
  
  
            setTimeout(function () {
              _this2.resetScroll = false;
            }, 1000); // manage the previous page button on the UI
  
            if (newValue == 0) {
              this.hasPrevPage = false;
            } else {
              this.hasPrevPage = true;
  
              if (babelHelpers.typeof(this.outlineItems) !== (typeof undefined === "undefined" ? "undefined" : babelHelpers.typeof(undefined))) {
                this.prevLabel = this.outlineItems[newValue - 1].title;
              }
            } // manage next page button on the UI
  
  
            if (babelHelpers.typeof(this.outlineItems) !== (typeof undefined === "undefined" ? "undefined" : babelHelpers.typeof(undefined)) && newValue + 1 == this.outlineItems.length) {
              this.hasNextPage = false;
            } else {
              this.hasNextPage = true;
  
              if (babelHelpers.typeof(this.outlineItems) !== (typeof undefined === "undefined" ? "undefined" : babelHelpers.typeof(undefined))) {
                this.nextLabel = this.outlineItems[newValue + 1].title;
              }
            }
          }
        }
        /**
         * React to items being changed.
         */
  
      }, {
        key: "_outlineItemsChanged",
        value: function _outlineItemsChanged(newValue, oldValue) {
          // these need set immediately
          if (babelHelpers.typeof(newValue) !== (typeof undefined === "undefined" ? "undefined" : babelHelpers.typeof(undefined)) && newValue.length != 0) {
            // manage the previous page button on the UI
            if (this.activePage != 0) {
              this.prevLabel = newValue[this.activePage - 1].title;
            } // manage next page button on the UI
  
  
            if (this.activePage + 1 != newValue.length) {
              this.nextLabel = newValue[this.activePage + 1].title;
            }
          }
        }
        /**
         * Test what milestone has been hit and if we should start to preload
         * items as a result of it!
         */
  
      }, {
        key: "testMilestone",
        value: function testMilestone(e) {
          // we should preload the next page
          if (e.detail.percentage == 75) {
            console.log("@todo preload the next page and present grayed out right of UI.");
          }
        }
        /**
         * Pass down scroll change to the element for progress visualization.
         */
  
      }, {
        key: "_scrollChanged",
        value: function _scrollChanged(newValue, oldValue) {
          // only evaluate scroll if value is greater then previous
          if (babelHelpers.typeof(this.outlineItems) !== (typeof undefined === "undefined" ? "undefined" : babelHelpers.typeof(undefined)) && babelHelpers.typeof(this.outlineItems[this.activePage]) !== (typeof undefined === "undefined" ? "undefined" : babelHelpers.typeof(undefined)) && newValue > this.outlineItems[this.activePage].metadata.value && !this.resetScroll) {
            // once we get 90% of the way through the material consider it finished
            if (newValue >= 75) {
              this.outlineItems[this.activePage].metadata.value = this.outlineItems[this.activePage].metadata.max;
              this.set("outlineItems." + this.activePage + ".metadata.value", this.outlineItems[this.activePage].metadata.max);
            } else {
              this.outlineItems[this.activePage].metadata.value = newValue;
              this.set("outlineItems." + this.activePage + ".metadata.value", newValue);
            }
          }
        }
        /**
         * Pass down the click to the next page if we have one
         */
  
      }, {
        key: "_nextBtn",
        value: function _nextBtn(e) {
          // make sure we are able to move forward more
          if (this.activePage < this.outlineItems.length - 1) {
            this.set("outlineItems." + this.activePage + ".metadata.value", this.outlineItems[this.activePage].metadata.max);
            this.activePage = this.activePage + 1;
          }
        }
        /**
         * Pass down the click to the prev page if we have one
         */
  
      }, {
        key: "_prevBtn",
        value: function _prevBtn(e) {
          if (this.activePage > 0) {
            this.activePage = this.activePage - 1;
          }
        }
        /**
         * Toggle the book drawer
         */
  
      }, {
        key: "toggleBook",
        value: function toggleBook(e) {
          // if we are in edit mode then we ned to close this
          this.$.bookdrawer.toggle();
          this.fullWidth = !this.$.bookdrawer.opened;
        }
        /**
         * Handle the response.
         */
  
      }, {
        key: "_manifestChanged",
        value: function _manifestChanged(newValue, oldValue) {
          if (babelHelpers.typeof(newValue) !== (typeof undefined === "undefined" ? "undefined" : babelHelpers.typeof(undefined))) {
            var items = newValue.items;
            var outlineTitle = newValue.title; // set active to 0 because once we update the outlineItems it will try to
            // pick a title and be out of sync for a moment in time
  
            if (this.activePage !== 0) {
              this.activePage = 0;
            } // set outline items to repaint, aggressively
  
  
            this.set("outlineItems", []);
            this.set("outlineItems", items);
            this.notifyPath("outlineItems.*");
            this.set("bookItems", []);
            this.set("bookItems", items);
            this.notifyPath("bookItems.*"); // set title to match new parent title
  
            this.set("outlineTitle", outlineTitle);
            this.$.outlineloading.hidden = true;
            this.pageParams.load = true;
          }
        }
        /**
         * Handle page object getting updated. This allows
         * for updating parts of the page either from the localcache
         * or from the ajax call.
         */
  
      }, {
        key: "_currentPageDataUpdated",
        value: function _currentPageDataUpdated(newValue, oldValue) {
          if (babelHelpers.typeof(newValue) !== (typeof undefined === "undefined" ? "undefined" : babelHelpers.typeof(undefined)) && babelHelpers.typeof(newValue.content) !== (typeof undefined === "undefined" ? "undefined" : babelHelpers.typeof(undefined))) {
            // set page title; easiest for sure
            this.set("currentTitle", newValue.title); // reset scroll position back to top of this content
  
            this._resetScroll(); // hide the loading area
  
  
            this.$.bodyloading.hidden = true; // manage state associated w/ edit mode if we were in edit mode previously
  
            if (this.editMode && !newValue.page.meta.canUpdate) {
              this.editMode = false;
            }
          }
        }
        /**
         * Simple way to convert from object to array.
         */
  
      }, {
        key: "_toArray",
        value: function _toArray(obj) {
          if (obj == null) {
            return [];
          }
  
          return Object.keys(obj).map(function (key) {
            return obj[key];
          });
        }
      }], [{
        key: "template",
        get: function get() {
          return (0, _polymerElement.html)(_templateObject_fe186d50e53211e9a0cfefb808989d41());
        }
      }, {
        key: "tag",
        get: function get() {
          return "lrnapp-book";
        }
      }, {
        key: "properties",
        get: function get() {
          return {
            /**
             * Path for getting progress dashboard data
             */
            progressDashboardPath: {
              type: String
            },
  
            /**
             * Option to display the search bar.
             */
            showSearch: {
              type: Boolean,
              reflectToAttribute: true,
              value: false
            },
  
            /**
             * Source path to the 'find one' end point
             */
            sourcePath: {
              type: String
            },
  
            /**
             * Edit / authoring mode.
             */
            editMode: {
              type: Boolean,
              reflectToAttribute: true,
              value: false,
              notify: true,
              observer: "_editModeChanged"
            },
  
            /**
             * Binding so we can style based on drawer status
             * @type {Object}
             */
            drawerOpened: {
              type: Boolean,
              value: true,
              reflectToAttribute: true
            },
  
            /**
             * Title for the content
             */
            currentTitle: {
              type: String
            },
  
            /**
             * Title for the top of the bar
             */
            outlineTitle: {
              type: String
            },
  
            /**
             * Title for the top of the bar
             */
            bookTitle: {
              type: String,
              value: "Course outline"
            },
  
            /**
             * If the sound should play on finish.
             */
            soundFinish: {
              type: Boolean,
              value: true
            },
  
            /**
             * If the sound should play on complete.
             */
            sound: {
              type: Boolean,
              value: true
            },
  
            /**
             * Completing a step sound.
             */
            completeSound: {
              type: String,
              value: ""
            },
  
            /**
             * Finished sound file.
             */
            finishedSound: {
              type: String,
              value: ""
            },
  
            /**
             * Distance through the present document so we can visualize
             */
            scrollPosition: {
              type: Number,
              value: 0,
              observer: "_scrollChanged"
            },
  
            /**
             * Track the active page exposed from the progress bar.
             */
            activePage: {
              type: Number,
              value: 0,
              observer: "_activePageChanged"
            },
  
            /**
             * Track the active outline to load data for the progress bar.
             */
            activeOutline: {
              type: Number,
              value: 0,
              observer: "_activeOutlineChanged"
            },
  
            /**
             * List of items in our outline presently.
             */
            outlineItems: {
              type: Array,
              value: [],
              notify: true,
              observer: "_outlineItemsChanged"
            },
  
            /**
             * List of items in our book presently.
             */
            bookItems: {
              type: Array,
              notify: true
            },
  
            /**
             * Item responses.
             */
            itemResponses: {
              type: Array,
              value: []
            },
  
            /**
             * Params for the request for outline/book to load.
             */
            requestParams: {
              type: Object,
              notify: true,
              value: {
                node: null
              }
            },
  
            /**
             * Params for the request for content to load.
             */
            pageParams: {
              type: Object,
              notify: true,
              value: {
                load: false
              }
            },
  
            /**
             * Returned data for processing.
             */
            outlineData: {
              type: Object,
              notify: true
            },
  
            /**
             * Returned data for processing.
             */
            bookData: {
              type: Object,
              notify: true
            },
  
            /**
             * Returned data for processing.
             */
            pageData: {
              type: Object,
              notify: true
            },
  
            /**
             * data pathway that expects the present outline returned.
             */
            outlinePath: {
              type: String
            },
  
            /**
             * data pathway that expects the book chapters returned.
             */
            bookPath: {
              type: String
            },
  
            /**
             * data pathway that expects the book chapters returned.
             */
            pagePath: {
              type: String
            },
  
            /**
             * Simple flag for having the previous button show.
             */
            hasPrevPage: {
              type: Boolean,
              notify: true
            },
  
            /**
             * Previous page title.
             */
            prevLabel: {
              type: String
            },
  
            /**
             * Simple flag for having the next button show.
             */
            hasNextPage: {
              type: Boolean,
              notify: true
            },
  
            /**
             * Next page title.
             */
            nextLabel: {
              type: String
            },
  
            /**
             * Ensure scrolling doesn't influence during a transition.
             */
            resetScroll: {
              type: Boolean,
              value: false
            },
  
            /**
             * Store current page data.
             */
            currentPageData: {
              type: Object,
              value: {},
              observer: "_currentPageDataUpdated"
            },
  
            /**
             * Store current page data.
             */
            manifest: {
              type: Object,
              value: {},
              observer: "_manifestChanged"
            },
  
            /**
             * Rebuild outline flag so we know to call it on page build.
             */
            rebuildOutline: {
              type: Boolean,
              value: false
            },
  
            /**
             * Track if we should go full width or not.
             */
            fullWidth: {
              type: Boolean,
              reflectToAttribute: true,
              value: false,
              observer: "_fullWidthChanged"
            },
  
            /**
             * Private state for _routerManifest
             */
            _routerManifest: {
              type: Object,
              value: {}
            }
          };
        }
      }]);
      return LrnappBook;
    }((0, _HAXCMSThemeWiring.HAXCMSTheme)(_polymerElement.PolymerElement));
  
    _exports.LrnappBook = LrnappBook;
    window.customElements.define(LrnappBook.tag, LrnappBook);
  });