text: define(["exports", "../../lit/index.js", "../simple-tooltip/simple-tooltip.js", "../simple-icon/lib/simple-icon-lite.js", "../simple-icon/lib/simple-icons.js", "../simple-colors/simple-colors.js"], function (_exports, _index, _simpleTooltip, _simpleIconLite, _simpleIcons, _simpleColors) {
    "use strict";
  
    Object.defineProperty(_exports, "__esModule", {
      value: true
    });
    _exports.LrnButton = void 0;
  
    var _templateObject_1c980410942811ecb1937969798b231a, _templateObject2_1c980410942811ecb1937969798b231a, _templateObject3_1c980410942811ecb1937969798b231a, _templateObject4_1c980410942811ecb1937969798b231a;
  
    function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { babelHelpers.defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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; } }
  
    /**
     * `lrn-button`
     * `Simple button wrapper with a few options`
     * @demo demo/index.html
     * @element lrn-button
     */
    var LrnButton = /*#__PURE__*/function (_SimpleColors) {
      babelHelpers.inherits(LrnButton, _SimpleColors);
  
      var _super = _createSuper(LrnButton);
  
      function LrnButton() {
        var _this;
  
        babelHelpers.classCallCheck(this, LrnButton);
        _this = _super.call(this);
        _this.href = "#";
        _this.label = "";
        _this.target = "";
        _this.disabled = false;
        _this.focusState = false;
        _this.dark = false;
        _this.color = "grey";
        setTimeout(function () {
          _this.addEventListener("mousedown", _this.tapEventOn);
  
          _this.addEventListener("mouseover", _this.tapEventOn);
  
          _this.addEventListener("mouseout", _this.tapEventOff);
  
          _this.addEventListener("focusin", _this.tapEventOn);
  
          _this.addEventListener("focusout", _this.tapEventOff);
        }, 0);
        return _this;
      }
  
      babelHelpers.createClass(LrnButton, [{
        key: "render",
        value: // render function
        function render() {
          return (0, _index.html)(_templateObject_1c980410942811ecb1937969798b231a || (_templateObject_1c980410942811ecb1937969798b231a = babelHelpers.taggedTemplateLiteral([" <a\n        tabindex=\"-1\"\n        id=\"lrnsys-button-link\"\n        href=\"", "\"\n        data-prefetch-hover=\"", "\"\n        target=\"", "\"\n      >\n        <button\n          id=\"button\"\n          raised=\"", "\"\n          class=\"", "\"\n          ?disabled=\"", "\"\n        >\n          <div class=\"inner ", "\">\n            ", "\n            ", "\n            <slot></slot>\n          </div>\n        </button>\n      </a>\n      <simple-tooltip for=\"lrnsys-button-link\" animation-delay=\"0\"\n        >", "</simple-tooltip\n      >"])), this.showHref, this.prefetch, this.target, this.raised, this.class, this.disabled, this.innerClass, this.icon ? (0, _index.html)(_templateObject2_1c980410942811ecb1937969798b231a || (_templateObject2_1c980410942811ecb1937969798b231a = babelHelpers.taggedTemplateLiteral(["\n                  <simple-icon-lite\n                    icon=\"", "\"\n                    id=\"icon\"\n                  ></simple-icon-lite>\n                "])), this.icon) : "", this.label ? (0, _index.html)(_templateObject3_1c980410942811ecb1937969798b231a || (_templateObject3_1c980410942811ecb1937969798b231a = babelHelpers.taggedTemplateLiteral([" <span class=\"label\"> ", " </span>"])), this.label) : "", this.alt);
        } // properties available to the custom element for data binding
  
      }, {
        key: "updated",
        value: function updated(changedProperties) {
          var _this2 = this;
  
          if (babelHelpers.get(babelHelpers.getPrototypeOf(LrnButton.prototype), "updated", this)) babelHelpers.get(babelHelpers.getPrototypeOf(LrnButton.prototype), "updated", this).call(this, changedProperties);
          changedProperties.forEach(function (oldValue, propName) {
            if (propName === "color") _this2.accentColor = _this2.color;
            console.log(propName, _this2.color, _this2.accentColor);
          });
        }
      }, {
        key: "firstUpdated",
        value: function firstUpdated() {
          this.shadowRoot.querySelector("#button").addEventListener("focused-changed", this.focusToggle);
  
          if (!this.disabled) {
            this.showHref = this.href;
          }
        }
        /**
         * Class processing on un-tap / hover
         */
  
      }, {
        key: "tapEventOn",
        value: function tapEventOn(e) {
          var _this3 = this;
  
          if (babelHelpers.typeof(this.hoverClass) !== (typeof undefined === "undefined" ? "undefined" : babelHelpers.typeof(undefined)) && !this.disabled) {
            // break class into array
            var classes = this.hoverClass.split(" "); // run through each and add or remove classes
  
            classes.forEach(function (item, index) {
              if (item != "") {
                _this3.shadowRoot.querySelector("#button").classList.add(item);
  
                if (item.indexOf("-") != -1) {
                  _this3.shadowRoot.querySelector("#icon").classList.add(item);
                }
              }
            });
          }
        }
        /**
         * Undo class processing on un-tap / hover
         */
  
      }, {
        key: "tapEventOff",
        value: function tapEventOff(e) {
          var _this4 = this;
  
          if (babelHelpers.typeof(this.hoverClass) !== (typeof undefined === "undefined" ? "undefined" : babelHelpers.typeof(undefined)) && !this.disabled) {
            // break class into array
            var classes = this.hoverClass.split(" "); // run through each and add or remove classes
  
            classes.forEach(function (item, index) {
              if (item != "") {
                _this4.shadowRoot.querySelector("#button").classList.remove(item);
  
                if (item.indexOf("-") != -1) {
                  _this4.shadowRoot.querySelector("#icon").classList.remove(item);
                }
              }
            });
          }
        }
        /**
         * Handle toggle for mouse class and manage classList array for button.
         */
  
      }, {
        key: "focusToggle",
        value: function focusToggle(e) {
          var _this5 = this;
  
          this.dispatchEvent(new CustomEvent("focus-changed", {
            bubbles: true,
            composed: true,
            detail: {
              focus: this.focusState
            }
          })); // see if it has hover classes
  
          if (babelHelpers.typeof(this.hoverClass) !== (typeof undefined === "undefined" ? "undefined" : babelHelpers.typeof(undefined)) && !this.disabled) {
            // break class into array
            var classes = this.hoverClass.split(" "); // run through each and add or remove classes
  
            classes.forEach(function (item, index) {
              if (item != "") {
                if (_this5.focusState) {
                  _this5.shadowRoot.querySelector("#button").classList.add(item);
  
                  if (item.indexOf("-") != -1) {
                    _this5.shadowRoot.querySelector("#icon").classList.add(item);
                  }
                } else {
                  _this5.shadowRoot.querySelector("#button").classList.remove(item);
  
                  if (item.indexOf("-") != -1) {
                    _this5.shadowRoot.querySelector("#icon").classList.remove(item);
                  }
                }
              }
            });
          }
  
          this.focusState = !this.focusState;
        }
      }], [{
        key: "styles",
        get: //styles function
        function get() {
          return [].concat(babelHelpers.toConsumableArray(babelHelpers.get(babelHelpers.getPrototypeOf(LrnButton), "styles", this)), [(0, _index.css)(_templateObject4_1c980410942811ecb1937969798b231a || (_templateObject4_1c980410942811ecb1937969798b231a = babelHelpers.taggedTemplateLiteral(["\n        :host {\n          display: block;\n          --lrnsys-button-height: 48px;\n        }\n\n        :host(.center) {\n          text-align: center;\n        }\n\n        a {\n          text-decoration: none;\n          display: block;\n          color: #000000;\n        }\n\n        button {\n          transition: 0.3s;\n          margin: 0;\n          max-width: 50%;\n          height: inherit;\n          -webkit-justify-content: flex-start;\n          justify-content: flex-start;\n          align-items: center;\n          border-radius: var(--lrn-button-border-radius, unset);\n          background-color: var(\n            --lrn-button-background-color,\n            var(--simple-colors-default-theme-accent-2, white)\n          );\n          border: var(--lrn-button-border-width, 0px) solid\n            var(\n              --lrn-button-border-color,\n              var(--simple-colors-default-theme-accent-2, #ddd)\n            );\n          color: var(\n            --lrn-button-color,\n            var(--simple-colors-default-theme-grey-12, black)\n          );\n        }\n\n        :host([accent-color=\"grey\"]) button,\n        :host([text-color]) button,\n        :host([dark][accent-color=\"grey\"]) button,\n        :host([dark][text-color]) button {\n          background-color: var(\n            --lrn-button-background-color,\n            var(--simple-colors-default-theme-grey-1, white)\n          );\n          border-color: var(\n            --lrn-button-border-color,\n            var(--simple-colors-default-theme-grey-3, #ddd)\n          );\n          color: var(\n            --lrn-button-color,\n            var(--simple-colors-default-theme-grey-12, black)\n          );\n        }\n\n        :host([text-color]) button,\n        :host([text-color][dark]) button {\n          color: var(\n            --lrn-button-color,\n            var(--simple-colors-default-theme-accent-9, black)\n          );\n        }\n\n        button:focus,\n        button:hover {\n          background-color: var(\n            --lrn-button-focus-background-color,\n            var(\n              --lrn-button-background-color,\n              var(--simple-colors-default-theme-accent-3, white)\n            )\n          );\n          border-color: var(\n            --lrn-button-focus-border-color,\n            var(\n              --lrn-button-border-color,\n              var(--simple-colors-default-theme-accent-3, #ddd)\n            )\n          );\n        }\n\n        :host([accent-color=\"grey\"]) button:focus,\n        :host([text-color]) button:focus,\n        :host([dark][accent-color=\"grey\"]) button:focus,\n        :host([dark][text-color]) button:focus,\n        :host([accent-color=\"grey\"]) button:hover,\n        :host([text-color]) button:hover,\n        :host([dark][accent-color=\"grey\"]) button:hover,\n        :host([dark][text-color]) button:hover {\n          background-color: var(\n            --lrn-button-focus-background-color,\n            var(\n              --lrn-button-background-color,\n              var(--simple-colors-default-theme-grey-2, white)\n            )\n          );\n          border-color: var(\n            --lrn-button-focus-border-color,\n            var(\n              --lrn-button-border-color,\n              var(--simple-colors-default-theme-grey-3, #ddd)\n            )\n          );\n        }\n\n        button simple-icon-lite {\n          --simple-icon-height: var(--lrnsys-button-height);\n          margin: 0 12px;\n        }\n\n        button div.inner {\n          height: var(--lrnsys-button-height);\n          line-height: var(--lrnsys-button-height);\n          padding: 0 12px;\n        }\n\n        button span.label {\n          height: var(--lrnsys-button-height);\n          line-height: var(--lrnsys-button-height);\n        }\n\n        .no-margin {\n          margin: 0 !important;\n        }\n\n        .no-right-padding {\n          padding-right: 0 !important;\n        }\n\n        .no-left-padding {\n          padding-left: 0 !important;\n        }\n\n        .center {\n          text-align: center;\n          margin: 0 auto;\n        }\n      "])))]);
        }
      }, {
        key: "properties",
        get: function get() {
          return _objectSpread(_objectSpread({}, babelHelpers.get(babelHelpers.getPrototypeOf(LrnButton), "properties", this)), {}, {
            /**
             * Standard href pass down
             */
            href: {
              type: String
            },
  
            /**
             * What to display for the resource
             */
            showHref: {
              type: String,
              attribute: "show-href"
            },
  
            /**
             * If the button should be visually lifted off the UI.
             */
            raised: {
              type: Boolean
            },
  
            /**
             * Label to place in the text area
             */
            label: {
              type: String
            },
            target: {
              type: String
            },
  
            /**
             * simple-icon to use (with iconset if needed)
             */
            icon: {
              type: String
            },
  
            /**
             * Classes to add / subtract based on the item being hovered.
             */
            hoverClass: {
              type: String,
              attribute: "hover-class"
            },
  
            /**
             * Icon class in the event you want it to look different from the text.
             */
            iconClass: {
              type: String,
              attribute: "icon-class"
            },
  
            /**
             * Inner container classes.
             */
            innerClass: {
              type: String,
              attribute: "inner-class"
            },
            dark: {
              type: Boolean,
              reflect: true
            },
  
            /**
             * materializeCSS color class
             */
            accentColor: {
              type: String,
              attribute: "accent-color",
              reflect: true
            },
  
            /**
             * materializeCSS color class
             */
            color: {
              type: String
            },
  
            /**
             * materializeCSS color class for text
             */
            textColor: {
              type: Boolean,
              attribute: "text-color",
              reflect: true
            },
  
            /**
             * Allow for prefetch data on hover
             */
            prefetch: {
              type: String
            },
  
            /**
             * Alt via tooltip.
             */
            alt: {
              type: String
            },
  
            /**
             * Disabled state.
             */
            disabled: {
              type: Boolean
            },
  
            /**
             * Tracks if focus state is applied
             */
            focusState: {
              type: Boolean,
              attribute: "focus-state"
            }
          });
        }
        /**
         * Store the tag name to make it easier to obtain directly.
         * @notice function name must be here for tooling to operate correctly
         */
  
      }, {
        key: "tag",
        get: function get() {
          return "lrn-button";
        }
      }]);
      return LrnButton;
    }(_simpleColors.SimpleColors);
  
    _exports.LrnButton = LrnButton;
    window.customElements.define(LrnButton.tag, LrnButton);
  });