text: define(["exports", "meta", "require", "../../lit/index.js", "../simple-colors/simple-colors.js", "../schema-behaviors/schema-behaviors.js", "../lazy-image-helpers/lazy-image-helpers.js", "../i18n-manager/lib/I18NMixin.js", "../simple-icon/simple-icon.js", "../simple-icon/lib/simple-icons.js", "../simple-icon/lib/simple-icon-button.js"], function (_exports, meta, _require, _index, _simpleColors, _schemaBehaviors, _lazyImageHelpers, _I18NMixin2, _simpleIcon, _simpleIcons, _simpleIconButton) {
    "use strict";
  
    Object.defineProperty(_exports, "__esModule", {
      value: true
    });
    _exports.SelfCheck = void 0;
    meta = _interopRequireWildcard(meta);
    _require = _interopRequireWildcard(_require);
  
    var _templateObject_35587f60012611ec9676957c409166bc, _templateObject2_35587f60012611ec9676957c409166bc, _templateObject3_35587f60012611ec9676957c409166bc;
  
    function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
  
    function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || babelHelpers.typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
  
    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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = babelHelpers.getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = babelHelpers.getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return babelHelpers.possibleConstructorReturn(this, result); }; }
  
    function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
  
    /**
     * `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 (_I18NMixin) {
      babelHelpers.inherits(SelfCheck, _I18NMixin);
  
      var _super = _createSuper(SelfCheck);
  
      function SelfCheck() {
        var _this;
  
        babelHelpers.classCallCheck(this, SelfCheck);
        _this = _super.call(this);
        _this.correct = false;
        _this.alt = "";
        _this.image = "";
        _this.question = "";
        _this.title = "Self-Check";
        _this.t = {
          revealAnswer: "Reveal Answer",
          close: "Close",
          moreInformation: "More information"
        };
  
        _this.registerLocalization({
          context: babelHelpers.assertThisInitialized(_this),
          basePath: meta.url,
          locales: ["he", "ja", "es"]
        });
  
        return _this;
      }
  
      babelHelpers.createClass(SelfCheck, [{
        key: "render",
        value: function render() {
          return (0, _index.html)(_templateObject_35587f60012611ec9676957c409166bc || (_templateObject_35587f60012611ec9676957c409166bc = babelHelpers.taggedTemplateLiteral(["\n      <div class=\"card\">\n        <div class=\"image-wrap\">\n          ", "\n          <img\n            src=\"", "\"\n            alt=\"", "\"\n            aria-describedby=\"", "\"\n            loading=\"lazy\"\n          />\n        </div>\n        <div class=\"triangle\"></div>\n        <div id=\"header_wrap\">\n          <simple-icon\n            id=\"questionmark\"\n            icon=\"icons:help\"\n            ?dark=\"", "\"\n            contrast=\"4\"\n          ></simple-icon>\n          <div class=\"heading\" id=\"title\">", "</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              <simple-icon-button\n                controls=\"answer_wrap\"\n                aria-label=\"", "\"\n                id=\"checkBtn\"\n                class=\"check-btn\"\n                icon=\"icons:check-circle\"\n                ?dark=\"", "\"\n                @click=\"", "\"\n              ></simple-icon-button>\n              <simple-tooltip aria-hidden=\"true\" for=\"checkBtn\" position=\"left\">\n                ", "\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                <simple-icon-button\n                  aria-label=\"", "\"\n                  id=\"closeBtn\"\n                  dark\n                  icon=\"icons:close\"\n                  @click=\"", "\"\n                >\n                </simple-icon-button>\n                <simple-tooltip\n                  aria-hidden=\"true\"\n                  for=\"closeBtn\"\n                  position=\"left\"\n                >\n                  ", "\n                </simple-tooltip>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    "])), this.renderSVGLoader(), this.image, this.alt, this.describedBy || "", !this.dark, this.title, this.correct, this.t.revealAnswer, this.dark, this.openAnswer, this.t.revealAnswer, this.correct ? "false" : "true", this.link ? (0, _index.html)(_templateObject2_35587f60012611ec9676957c409166bc || (_templateObject2_35587f60012611ec9676957c409166bc = babelHelpers.taggedTemplateLiteral(["\n                    <div class=\"more_info\">\n                      <user-action track=\"click\" every=\"every\"\n                        ><a href=\"", "\" target=\"_blank\"\n                          >", "...</a\n                        ></user-action\n                      >\n                    </div>\n                  "])), this.link, this.t.moreInformation) : "", this.t.close, this.openAnswer, this.t.close);
        }
        /**
         * LitElement life cycle - property changed
         */
  
      }, {
        key: "updated",
        value: function updated(changedProperties) {
          var _this2 = this;
  
          if (babelHelpers.get(babelHelpers.getPrototypeOf(SelfCheck.prototype), "updated", this)) {
            babelHelpers.get(babelHelpers.getPrototypeOf(SelfCheck.prototype), "updated", this).call(this, changedProperties);
          }
  
          changedProperties.forEach(function (oldValue, propName) {
            if (propName == "elementVisible" && _this2.elementVisible) {
              new Promise(function (res, rej) {
                return _require.default(["../user-action/user-action.js"], res, rej);
              });
              new Promise(function (res, rej) {
                return _require.default(["../simple-tooltip/simple-tooltip.js"], res, rej);
              });
            }
          });
        }
      }, {
        key: "haxHooks",
        value:
        /**
         * Implements haxHooks to tie into life-cycle if hax exists.
         */
        function haxHooks() {
          return {
            activeElementChanged: "haxactiveElementChanged"
          };
        }
        /**
         * double-check that we are set to inactivate click handlers
         * this is for when activated in a duplicate / adding new content state
         */
  
      }, {
        key: "haxactiveElementChanged",
        value: function haxactiveElementChanged(el, val) {
          // flag for HAX to not trigger active on changes
          var container = this.shadowRoot.querySelector("#title");
  
          if (val) {
            container.setAttribute("contenteditable", true);
          } else {
            container.removeAttribute("contenteditable");
            this.title = container.innerText;
          }
  
          return false;
        }
        /**
         * Property for toggling "checkbtn".
         */
  
      }, {
        key: "openAnswer",
        value: function openAnswer(e) {
          this.correct = !this.correct;
        }
        /**
         * haxProperties integration via file reference
         */
  
      }], [{
        key: "styles",
        get: function get() {
          return [].concat(babelHelpers.toConsumableArray(babelHelpers.get(babelHelpers.getPrototypeOf(SelfCheck), "styles", this)), [(0, _index.css)(_templateObject3_35587f60012611ec9676957c409166bc || (_templateObject3_35587f60012611ec9676957c409166bc = babelHelpers.taggedTemplateLiteral(["\n        :host {\n          display: block;\n          margin: 15px 0;\n        }\n        :host([hidden]),\n        *[hidden] {\n          display: none !important;\n        }\n\n        div.card {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);\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        simple-icon-button {\n          --simple-icon-width: 24px;\n          --simple-icon-height: 24px;\n          position: relative;\n          left: 10px;\n          bottom: -10px;\n          padding: 2px;\n        }\n\n        .check_button {\n          display: flex;\n          justify-content: flex-end;\n        }\n        .close_button {\n          display: flex;\n          justify-content: flex-end;\n        }\n\n        simple-icon#questionmark {\n          --simple-icon-width: 35px;\n          --simple-icon-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: flex;\n          align-items: center;\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        .image-wrap {\n          max-height: 400px;\n          overflow: hidden;\n        }\n      "])))]);
        }
      }, {
        key: "tag",
        get: function get() {
          return "self-check";
        }
      }, {
        key: "properties",
        get: function get() {
          return _objectSpread(_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 new URL("./lib/".concat(this.tag, ".haxProperties.json"), meta.url).href;
        }
      }]);
      return SelfCheck;
    }((0, _I18NMixin2.I18NMixin)((0, _lazyImageHelpers.lazyImageLoader)((0, _schemaBehaviors.SchemaBehaviors)(_simpleColors.SimpleColors))));
  
    _exports.SelfCheck = SelfCheck;
    window.customElements.define(SelfCheck.tag, SelfCheck);
  });