text: define(["exports", "../../lit-element/lit-element.js", "../simple-colors/simple-colors.js"], function (_exports, _litElement, _simpleColors) {
    "use strict";
  
    Object.defineProperty(_exports, "__esModule", {
      value: true
    });
    _exports.RetroCard = void 0;
  
    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_09eca69099b011eb851ed31c596cbbd8() {
      var data = babelHelpers.taggedTemplateLiteral(["\n        :host {\n          display: block;\n          --retro-card-level-2: var(\n            --simple-colors-default-theme-accent-7,\n            #b8a515\n          );\n          --retro-card-level-1: var(\n            --simple-colors-default-theme-accent-6,\n            #e5cd1b\n          );\n          --retro-card-level-3: var(\n            --simple-colors-default-theme-accent-5,\n            #ead749\n          );\n          --retro-card-shadow: var(\n            --simple-colors-default-theme-accent-8,\n            rgba(229, 205, 27, 0.2)\n          );\n          --retro-card-light-color: #f4f1d0;\n          --retro-card-dark-color: #212121;\n        }\n\n        :host([dark]) {\n          --retro-card-dark-color: #f4f1d0;\n          --retro-card-light-color: #212121;\n        }\n\n        :host([hidden]) {\n          display: none;\n        }\n\n        :host([hover-state]) .link:nth-child(1n + 0) {\n          box-shadow: 16px 16px 0px 0px var(--retro-card-shadow);\n          border: 16px solid var(--retro-card-level-2);\n          background-color: var(--retro-card-level-1);\n        }\n\n        :host([hover-state]) .link {\n          color: var(--retro-card-light-color);\n          text-decoration: underline;\n          padding: 1.25rem;\n          border: 16px var(--retro-card-level-1) solid;\n          box-shadow: 16px 16px 0px 0px var(--retro-card-shadow);\n          transition: background-color 0.2s ease-in-out 0s,\n            padding 0.4s ease-in-out 0s, border 0.4s ease-in-out 0s,\n            box-shadow 0.2s ease-in-out 0s;\n        }\n\n        .link:nth-child(1n + 0) {\n          background-color: var(--retro-card-level-3);\n          box-shadow: 8px 8px 0px 0px var(--retro-card-level-1);\n          border: 4px var(--retro-card-level-1) solid;\n        }\n\n        .link {\n          display: block;\n          background-color: var(--retro-card-level-3);\n          border: 4px var(--retro-card-level-1) solid;\n          padding: 2rem;\n          box-shadow: 8px 8px 0px 0px var(--retro-card-level-1);\n          transition: padding 0.4s ease-in-out 0s, border 0.4s ease-in-out 0s,\n            box-shadow 0.2s ease-in-out 0s;\n        }\n\n        .img {\n          -webkit-filter: grayscale(1);\n          filter: grayscale(1);\n          mix-blend-mode: screen;\n          border: 0;\n          max-width: 100%;\n          height: auto;\n          -ms-interpolation-mode: bicubic;\n          display: inline-block;\n          vertical-align: middle;\n          max-height: 200px;\n        }\n\n        .title {\n          display: block;\n          font-size: 1.5rem;\n          padding: 2rem 0 0 0;\n          text-transform: uppercase;\n          font-weight: 700;\n          text-align: center;\n        }\n\n        .description {\n          display: block;\n          font-size: 0.9rem;\n          padding: 0.75rem 1rem 0;\n        }\n\n        .card-tags {\n          line-height: 1.6;\n          text-align: center;\n          margin-bottom: 1rem;\n          text-rendering: optimizeLegibility;\n          font-weight: 300;\n        }\n\n        .project-tag {\n          font-size: 0.7rem;\n          padding: 0.25rem 0.5rem;\n          font-style: italic;\n          font-weight: 600;\n          color: var(--retro-card-light-color);\n          background: var(--retro-card-dark-color);\n          word-wrap: break-word;\n          padding: 0 0.5rem;\n          text-transform: uppercase;\n          margin-bottom: 2rem;\n          margin: 0 0.25rem 2rem 0;\n        }\n\n        hr {\n          border-bottom: 1px solid var(--retro-card-dark-color);\n          max-width: 75rem;\n          height: 0;\n          border-right: 0;\n          border-top: 0;\n          border-left: 0;\n          margin: 1.25rem auto;\n          clear: both;\n        }\n\n        a {\n          text-align: center;\n          color: var(--retro-card-dark-color);\n          text-decoration: none;\n          line-height: inherit;\n          cursor: pointer;\n          font-family: \"Roboto Mono\", Consolas, Monospace;\n        }\n      "]);
  
      _templateObject3_09eca69099b011eb851ed31c596cbbd8 = function _templateObject3_09eca69099b011eb851ed31c596cbbd8() {
        return data;
      };
  
      return data;
    }
  
    function _templateObject2_09eca69099b011eb851ed31c596cbbd8() {
      var data = babelHelpers.taggedTemplateLiteral(["<span class=\"project-tag\">", "</span>"]);
  
      _templateObject2_09eca69099b011eb851ed31c596cbbd8 = function _templateObject2_09eca69099b011eb851ed31c596cbbd8() {
        return data;
      };
  
      return data;
    }
  
    function _templateObject_09eca69099b011eb851ed31c596cbbd8() {
      var data = babelHelpers.taggedTemplateLiteral([" <a\n      tabindex=\"-1\"\n      class=\"link ", "\"\n      href=\"", "\"\n      @click=\"", "\"\n    >\n      <img class=\"img\" loading=\"lazy\" src=\"", "\" alt=\"\" />\n      <span class=\"title\">", "</span>\n      <span class=\"name\">", "</span>\n      <span class=\"description\"><slot></slot></span>\n      <hr />\n      <div class=\"card-tags\">\n        ", "\n      </div>\n    </a>"]);
  
      _templateObject_09eca69099b011eb851ed31c596cbbd8 = function _templateObject_09eca69099b011eb851ed31c596cbbd8() {
        return data;
      };
  
      return data;
    }
  
    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 { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
  
    /**
     * `retro-card`
     * `Simple card in a cool retro design`
     *
     * @microcopy - language worth noting:
     *  -
     *
     * @demo demo/index.html
     * @element retro-card
     */
    var RetroCard = /*#__PURE__*/function (_SimpleColors) {
      babelHelpers.inherits(RetroCard, _SimpleColors);
  
      var _super = _createSuper(RetroCard);
  
      babelHelpers.createClass(RetroCard, [{
        key: "render",
        // render function
        value: function render() {
          return (0, _litElement.html)(_templateObject_09eca69099b011eb851ed31c596cbbd8(), this.color, this.url, this._clickCard, this.__source, this.title, this.subtitle, this.__cardTags.map(function (tag) {
            return (0, _litElement.html)(_templateObject2_09eca69099b011eb851ed31c596cbbd8(), tag.trim());
          }));
        } // haxProperty definition
  
      }], [{
        key: "styles",
        //styles function
        get: function get() {
          return [].concat(babelHelpers.toConsumableArray(babelHelpers.get(babelHelpers.getPrototypeOf(RetroCard), "styles", this)), [(0, _litElement.css)(_templateObject3_09eca69099b011eb851ed31c596cbbd8())]);
        }
      }, {
        key: "haxProperties",
        get: function get() {
          return {
            canScale: false,
            canPosition: false,
            canEditSource: true,
            gizmo: {
              title: "Retro card",
              description: "Simple card in a cool retro design",
              icon: "icons:android",
              color: "purple",
              groups: ["Card"],
              handles: [{
                type: "image",
                source2: "mediaSource",
                source: "hoverSource",
                alt: "subtitle",
                title: "title",
                name: "title"
              }],
              meta: {
                author: "ELMS:LN",
                owner: "The Pennsylvania State University"
              }
            },
            settings: {
              configure: [{
                property: "title",
                title: "Title",
                description: "Main title of card",
                inputMethod: "textfield",
                required: false,
                icon: "icons:android"
              }, {
                property: "url",
                description: "Link to go to when clicking the card",
                inputMethod: "textfield",
                required: false,
                icon: "icons:android",
                validationType: "url"
              }, {
                property: "subtitle",
                title: "Sub-title",
                description: "Sub heading",
                inputMethod: "textfield",
                required: false,
                icon: "icons:android"
              }, {
                property: "tags",
                title: "Tags",
                description: "Comma separated tags",
                inputMethod: "textfield",
                required: false,
                icon: "icons:android"
              }, {
                property: "mediaSource",
                title: "Media source",
                description: "Primary media source",
                inputMethod: "haxupload",
                required: true,
                icon: "icons:link",
                validationType: "url"
              }, {
                property: "hoverSource",
                description: "When user hovers / activates the card",
                title: "Source on hover",
                inputMethod: "haxupload",
                required: false,
                validationType: "url",
                icon: "icons:android"
              }, {
                property: "accentColor",
                description: "An accent to apply evenly to the card",
                title: "Accent Color",
                inputMethod: "colorpicker",
                required: false,
                icon: "icons:android"
              }, {
                property: "dark",
                title: "Dark",
                description: "Sets base color to be dark mode",
                inputMethod: "boolean",
                required: false
              }],
              advanced: []
            },
            saveOptions: {
              unsetAttributes: ["colors"]
            }
          };
        } // properties available to the custom element for data binding
  
      }, {
        key: "properties",
        get: function get() {
          return _objectSpread(_objectSpread({}, babelHelpers.get(babelHelpers.getPrototypeOf(RetroCard), "properties", this)), {}, {
            title: {
              type: String
            },
            subtitle: {
              type: String
            },
            tags: {
              type: String
            },
            mediaSource: {
              type: String,
              attribute: "media-source"
            },
            url: {
              type: String
            },
            hoverSource: {
              type: String,
              attribute: "hover-source"
            },
            hoverState: {
              type: Boolean,
              attribute: "hover-state",
              reflect: true
            },
            __cardTags: {
              type: Array
            },
            __source: {
              type: String
            }
          });
        }
        /**
         * Convention we use
         */
  
      }, {
        key: "tag",
        get: function get() {
          return "retro-card";
        }
        /**
         * HTMLElement
         */
  
      }]);
  
      function RetroCard() {
        var _this;
  
        babelHelpers.classCallCheck(this, RetroCard);
        _this = _super.call(this);
        _this.__cardTags = [];
        _this.hoverState = false;
        setTimeout(function () {
          _this.addEventListener("keypress", _this._keyPress.bind(babelHelpers.assertThisInitialized(_this)));
  
          _this.addEventListener("mouseover", _this._hoverStateOn.bind(babelHelpers.assertThisInitialized(_this)));
  
          _this.addEventListener("mouseout", _this._hoverStateOff.bind(babelHelpers.assertThisInitialized(_this)));
  
          _this.addEventListener("focusin", _this._hoverStateOn.bind(babelHelpers.assertThisInitialized(_this)));
  
          _this.addEventListener("focusout", _this._hoverStateOff.bind(babelHelpers.assertThisInitialized(_this)));
        }, 0);
        return _this;
      }
      /**
       * A11y because we are delegating keyboard function to hit the link when enter pressed
       */
  
  
      babelHelpers.createClass(RetroCard, [{
        key: "_keyPress",
        value: function _keyPress(e) {
          switch (e.key) {
            case "Enter":
              // simulate click to go to whatever link / action it has
              this.shadowRoot.querySelector("a").click();
              break;
          }
        }
      }, {
        key: "_hoverStateOff",
        value: function _hoverStateOff(e) {
          this.hoverState = false;
        }
      }, {
        key: "_hoverStateOn",
        value: function _hoverStateOn(e) {
          this.hoverState = true;
        }
      }, {
        key: "firstUpdated",
        value: function firstUpdated() {
          // makes this focusable and we normalize the hover / focus state
          // between CSS, JS and keyboard actions this way
          this.setAttribute("tabindex", 0); // optional support for hoverSource being the default source
  
          if (!this.hoverSource) {
            this.hoverSource = this.mediaSource;
          }
        }
        /**
         * Implements haxHooks to tie into life-cycle if hax exists.
         */
  
      }, {
        key: "haxHooks",
        value: function haxHooks() {
          return {
            editModeChanged: "haxeditModeChanged",
            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) {
          if (val) {
            this._haxstate = val;
          }
        }
        /**
         * Set a flag to test if we should block link clicking on the entire card
         * otherwise when editing in hax you can't actually edit it bc its all clickable.
         * if editMode goes off this helps ensure we also become clickable again
         */
  
      }, {
        key: "haxeditModeChanged",
        value: function haxeditModeChanged(val) {
          this._haxstate = val;
        }
        /**
         * special support for HAX since the whole card is selectable
         */
  
      }, {
        key: "_clickCard",
        value: function _clickCard(e) {
          if (this._haxstate) {
            // do not do default
            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();
          }
        }
        /**
         * LitElement life cycle - property changed
         */
  
      }, {
        key: "updated",
        value: function updated(changedProperties) {
          var _this2 = this;
  
          if (babelHelpers.get(babelHelpers.getPrototypeOf(RetroCard.prototype), "updated", this)) {
            babelHelpers.get(babelHelpers.getPrototypeOf(RetroCard.prototype), "updated", this).call(this, changedProperties);
          }
  
          changedProperties.forEach(function (oldValue, propName) {
            if (propName == "tags") {
              _this2._tagsChanged(_this2[propName]);
            }
  
            if (propName == "source") {
              _this2.__source = _this2.mediaSource;
            }
  
            if (propName == "hoverState") {
              _this2.__source = _this2[propName] ? _this2.hoverSource : _this2.mediaSource;
            }
          });
        }
        /**
         * Convert string based tags into array
         */
  
      }, {
        key: "_tagsChanged",
        value: function _tagsChanged(tags) {
          var ary = tags.split(",");
          this.__cardTags = babelHelpers.toConsumableArray(ary);
        }
      }]);
      return RetroCard;
    }(_simpleColors.SimpleColors);
  
    _exports.RetroCard = RetroCard;
    customElements.define(RetroCard.tag, RetroCard);
  });