text: define(["exports", "require", "../../lit-element/lit-element.js", "../simple-colors/simple-colors.js", "../schema-behaviors/schema-behaviors.js"], function (_exports, _require, _litElement, _simpleColors, _schemaBehaviors) {
    "use strict";
  
    Object.defineProperty(_exports, "__esModule", {
      value: true
    });
    _exports.SelfCheck = void 0;
    _require = babelHelpers.interopRequireWildcard(_require);
  
    function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
  
    function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { babelHelpers.defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
  
    function _templateObject3_35a49b70d1d911ea92952ff2097cf814() {
      var data = babelHelpers.taggedTemplateLiteral(["\n        :host {\n          display: block;\n          margin: 15px 0;\n        }\n        :host([hidden]),\n        *[hidden] {\n          display: none !important;\n        }\n\n        paper-card {\n          width: 100%;\n          color: var(\n            --self-check-question-text,\n            var(--simple-colors-default-theme-grey-12, #000)\n          );\n          background-color: var(\n            --self-check-question-color,\n            var(--simple-colors-default-theme-grey-1, #fff)\n          );\n          overflow: hidden;\n        }\n\n        paper-icon-button#checkbtn {\n          width: 50px;\n          height: 50px;\n          position: relative;\n          left: 16px;\n          bottom: -10px;\n        }\n\n        .check_button {\n          display: flex;\n          justify-content: flex-end;\n        }\n\n        paper-icon-button#closeBtn {\n          width: 50px;\n          height: 50px;\n          position: relative;\n          left: 16px;\n          bottom: -16px;\n        }\n\n        .close_button {\n          display: flex;\n          justify-content: flex-end;\n        }\n\n        iron-icon#questionmark {\n          width: 35px;\n          height: 35px;\n          padding: 5px;\n          color: var(\n            --self-check-heading-text,\n            var(--simple-colors-default-theme-grey-1, #fff)\n          );\n        }\n\n        .heading {\n          text-transform: uppercase;\n          font-size: 22px;\n          margin: 10px;\n          color: var(\n            --self-check-heading-text,\n            var(--simple-colors-default-theme-grey-1, #fff)\n          );\n        }\n\n        #header_wrap {\n          color: var(\n            --self-check-heading-text,\n            var(--simple-colors-default-theme-grey-1, #fff)\n          );\n          background-color: var(\n            --self-check-heading-color,\n            var(--simple-colors-default-theme-accent-8, #444)\n          );\n          display: inline-flex;\n          width: 100%;\n          margin: -20px 0 0;\n        }\n\n        #question_wrap {\n          color: var(\n            --self-check-question-text,\n            var(--simple-colors-default-theme-grey-12, #000)\n          );\n          background-color: var(\n            --self-check-question-color,\n            var(--simple-colors-default-theme-grey-1, #fff)\n          );\n          position: relative;\n        }\n\n        .question {\n          font-size: 16px;\n          padding: 15px 15px;\n        }\n\n        :host([correct]) .question {\n          display: none;\n        }\n\n        #answer_wrap {\n          visibility: hidden;\n          opacity: 0;\n          color: var(\n            --self-check-answer-text,\n            var(--simple-colors-default-theme-grey-1, #fff)\n          );\n          background-color: var(\n            --self-check-answer-color,\n            var(--simple-colors-default-theme-light-green-8, #00762e)\n          );\n          border-top: 2px solid\n            var(\n              --self-check-answer-text,\n              var(--simple-colors-default-theme-grey-1, #fff)\n            );\n          width: 100%;\n          top: 0;\n          transition: all 0.2s ease;\n          left: calc(100%);\n          position: absolute;\n        }\n\n        :host([correct]) #answer_wrap {\n          visibility: visible;\n          opacity: 1;\n          position: relative;\n          left: 0;\n        }\n\n        .answer {\n          font-size: 16px;\n          padding: 15px;\n          line-height: 19.2px;\n        }\n\n        #quote_start {\n          display: inline-flex;\n          transform: rotateY(180deg);\n        }\n\n        #quote_end {\n          display: inline-flex;\n        }\n\n        .triangle {\n          width: 0;\n          height: 0;\n          border-left: 20px solid transparent;\n          border-right: 20px solid transparent;\n          border-bottom: 20px solid\n            var(\n              --self-check-heading-color,\n              var(--simple-colors-default-theme-accent-8, #444)\n            );\n          position: relative;\n          top: -20px;\n          left: -1px;\n        }\n\n        .more_info {\n          display: inline;\n        }\n\n        .more_info a {\n          color: var(\n            --self-check-answer-text,\n            var(--simple-colors-default-theme-grey-1, #fff)\n          );\n        }\n\n        .more_info a:hover {\n          text-decoration: none;\n        }\n      "]);
  
      _templateObject3_35a49b70d1d911ea92952ff2097cf814 = function _templateObject3_35a49b70d1d911ea92952ff2097cf814() {
        return data;
      };
  
      return data;
    }
  
    function _templateObject2_35a49b70d1d911ea92952ff2097cf814() {
      var data = babelHelpers.taggedTemplateLiteral(["\n                    <div class=\"more_info\">\n                      <user-action track=\"click\" every\n                        ><a href=\"", "\" target=\"_blank\"\n                          >More info...</a\n                        ></user-action\n                      >\n                    </div>\n                  "]);
  
      _templateObject2_35a49b70d1d911ea92952ff2097cf814 = function _templateObject2_35a49b70d1d911ea92952ff2097cf814() {
        return data;
      };
  
      return data;
    }
  
    function _templateObject_35a49b70d1d911ea92952ff2097cf814() {
      var data = babelHelpers.taggedTemplateLiteral(["\n      <paper-card\n        image=\"", "\"\n        alt=\"", "\"\n        aria-describedby=\"", "\"\n      >\n        <div class=\"triangle\"></div>\n        <div id=\"header_wrap\">\n          <iron-icon id=\"questionmark\" icon=\"icons:help\"></iron-icon>\n          <div class=\"heading\">", "</div>\n        </div>\n        <div id=\"question_wrap\">\n          <div class=\"question\" aria-hidden=\"", "\">\n            <slot name=\"question\"></slot>\n            <div class=\"check_button\">\n              <paper-icon-button\n                controls=\"answer_wrap\"\n                aria-label=\"Reveal Answer\"\n                id=\"checkBtn\"\n                icon=\"icons:check-circle\"\n                noink\n                @click=\"", "\"\n              ></paper-icon-button>\n              <simple-tooltip aria-hidden=\"true\" for=\"checkBtn\" position=\"left\">\n                Reveal Answer\n              </simple-tooltip>\n            </div>\n          </div>\n          <div\n            id=\"answer_wrap\"\n            aria-hidden=\"", "\"\n            aria-live=\"polite\"\n          >\n            <div class=\"answer\">\n              <user-action track=\"visibility\">\n                <slot></slot>\n              </user-action>\n              ", "\n              <div class=\"close_button\">\n                <paper-icon-button\n                  aria-label=\"Close\"\n                  id=\"closeBtn\"\n                  icon=\"icons:close\"\n                  @click=\"", "\"\n                  noink\n                >\n                </paper-icon-button>\n                <simple-tooltip\n                  aria-hidden=\"true\"\n                  for=\"closeBtn\"\n                  position=\"left\"\n                >\n                  Close\n                </simple-tooltip>\n              </div>\n            </div>\n          </div>\n        </div>\n      </paper-card>\n    "]);
  
      _templateObject_35a49b70d1d911ea92952ff2097cf814 = function _templateObject_35a49b70d1d911ea92952ff2097cf814() {
        return data;
      };
  
      return data;
    }
  
    /**
     * `self-check`
     * 
    ### Styling
    
    `<self-check>` provides the following custom properties
    for styling:
    
    Custom property | Description | Default
    ----------------|-------------|----------
    `--a11y-collapse-margin` | margin around a11y-collapse | 15px 0
    `--self-check-question-color` | question background color | var(--simple-colors-default-theme-grey-1, #fff)
    `--self-check-question-text` | question text color  | var(--simple-colors-default-theme-grey-12, #000)
    `--self-check-heading-color` | heading background color | var(--simple-colors-default-theme-accent-8, #444)
    `--self-check-heading-text` | heading text color | var(--simple-colors-default-theme-grey-1, #fff)
    `--self-check-answer-color` | answer background color | var(--simple-colors-default-theme-light-green-8, #00762e)
    `--self-check-answer-text` | answer text color | var(--simple-colors-default-theme-grey-1, #fff)
     * 
    
     * @extends LitElement
     * @extends SimpleColors
     * @extends SchemaBehaviors
     * @demo ./demo/index.html
     * @element self-check
     * 
     */
    var SelfCheck =
    /*#__PURE__*/
    function (_SchemaBehaviors) {
      babelHelpers.inherits(SelfCheck, _SchemaBehaviors);
  
      function SelfCheck() {
        var _this;
  
        babelHelpers.classCallCheck(this, SelfCheck);
        _this = babelHelpers.possibleConstructorReturn(this, babelHelpers.getPrototypeOf(SelfCheck).call(this));
        _this.correct = false;
        _this.alt = "";
        _this.image = "";
        _this.question = "";
        _this.title = "Self-Check";
        new Promise(function (res, rej) {
          return _require.default(["../user-action/user-action.js"], res, rej);
        });
        new Promise(function (res, rej) {
          return _require.default(["../../@polymer/paper-card/paper-card.js"], res, rej);
        });
        new Promise(function (res, rej) {
          return _require.default(["../../@polymer/paper-icon-button/paper-icon-button.js"], res, rej);
        });
        new Promise(function (res, rej) {
          return _require.default(["../../@polymer/iron-icons/editor-icons.js"], res, rej);
        });
        new Promise(function (res, rej) {
          return _require.default(["../../@polymer/iron-icons/iron-icons.js"], res, rej);
        });
        new Promise(function (res, rej) {
          return _require.default(["../simple-tooltip/simple-tooltip.js"], res, rej);
        });
        return _this;
      }
  
      babelHelpers.createClass(SelfCheck, [{
        key: "render",
        value: function render() {
          return (0, _litElement.html)(_templateObject_35a49b70d1d911ea92952ff2097cf814(), this.image, this.alt, this.describedBy || "", this.title, this.correct, this.openAnswer, this.correct ? "false" : "true", this.link ? (0, _litElement.html)(_templateObject2_35a49b70d1d911ea92952ff2097cf814(), this.link) : "", this.openAnswer);
        }
      }, {
        key: "openAnswer",
  
        /**
         * Property for toggling "checkbtn".
         */
        value: function openAnswer(e) {
          this.correct = !this.correct;
        }
      }], [{
        key: "styles",
        get: function get() {
          return [].concat(babelHelpers.toConsumableArray(babelHelpers.get(babelHelpers.getPrototypeOf(SelfCheck), "styles", this)), [(0, _litElement.css)(_templateObject3_35a49b70d1d911ea92952ff2097cf814())]);
        }
      }, {
        key: "tag",
        get: function get() {
          return "self-check";
        }
      }, {
        key: "properties",
        get: function get() {
          return _objectSpread({}, babelHelpers.get(babelHelpers.getPrototypeOf(SelfCheck), "properties", this), {
            /**
             * Title.
             */
            title: {
              type: String
            },
  
            /**
             * Question.
             */
            question: {
              type: String
            },
  
            /**
             * Image.
             */
            image: {
              type: String,
              reflect: true
            },
  
            /**
             * Alt text for image.
             */
            alt: {
              type: String,
              reflect: true
            },
  
            /**
             * Aria-describedby data passed down to appropriate tag
             */
            describedBy: {
              type: String,
              attribute: "described-by"
            },
  
            /**
             * Link for more information.
             */
            link: {
              type: String,
              reflect: true
            },
  
            /**
             * Property for toggling "checkbtn".
             */
            correct: {
              type: Boolean,
              reflect: true
            }
          });
        }
      }, {
        key: "haxProperties",
        get: function get() {
          return {
            canScale: true,
            canPosition: true,
            canEditSource: false,
            gizmo: {
              title: "Self-Check",
              description: "The user will be able to complete a self-check.",
              icon: "icons:check-circle",
              color: "orange",
              groups: ["Image", "Assessment"],
              handles: [{
                type: "image",
                source: "image",
                title: "question",
                description: "answer",
                ariaDescribedby: "describedBy"
              }],
              meta: {
                author: "ELMS:LN"
              }
            },
            settings: {
              quick: [{
                property: "title",
                title: "Title",
                description: "The title of the element",
                inputMethod: "textfield",
                icon: "editor:title"
              }, {
                property: "image",
                title: "Image",
                description: "The image of the element",
                inputMethod: "textfield",
                icon: "editor:insert-photo"
              }, {
                property: "link",
                title: "More link",
                description: "Link to additional information",
                inputMethod: "textfield",
                validationType: "url",
                icon: "icons:link"
              }],
              configure: [{
                property: "title",
                title: "Title",
                description: "The title of the element",
                inputMethod: "textfield"
              }, {
                property: "accentColor",
                title: "Accent Color",
                description: "The accent color of the self-check",
                inputMethod: "colorpicker",
                icon: "editor:format-color-fill"
              }, {
                property: "dark",
                title: "Dark Theme",
                description: "Enable Dark Theme",
                inputMethod: "boolean",
                icon: "icons:invert-colors"
              }, {
                property: "image",
                title: "Image",
                description: "The image of the element",
                inputMethod: "haxupload",
                validationType: "url"
              }, {
                property: "link",
                title: "More link",
                description: "Link to additional information",
                inputMethod: "haxupload",
                validationType: "url"
              }, {
                property: "alt",
                title: "Alt Text",
                description: "Add alt text to the image",
                inputMethod: "alt"
              }, {
                slot: "question",
                title: "Question to ask",
                description: "This is where you enter a question for the self-check.",
                inputMethod: "code-editor",
                required: true
              }, {
                slot: "",
                title: "Answer",
                description: "This is where you enter a question for the self-check.",
                inputMethod: "code-editor",
                required: true
              }],
              advanced: [{
                property: "describedBy",
                title: "aria-describedby",
                description: "Space-separated list of IDs for elements that describe the image.",
                inputMethod: "textfield"
              }]
            },
            saveOptions: {
              unsetAttributes: ["colors"]
            }
          };
        }
      }]);
      return SelfCheck;
    }((0, _schemaBehaviors.SchemaBehaviors)(_simpleColors.SimpleColors));
  
    _exports.SelfCheck = SelfCheck;
    window.customElements.define(SelfCheck.tag, SelfCheck);
  });