text: define(["exports", "../../../lit-element/lit-element.js", "./lrndesign-gallery-behaviors.js", "./lrndesign-gallery-zoom.js", "./lrndesign-gallery-details.js"], function (_exports, _litElement, _lrndesignGalleryBehaviors, _lrndesignGalleryZoom, _lrndesignGalleryDetails) {
    "use strict";
  
    Object.defineProperty(_exports, "__esModule", {
      value: true
    });
    _exports.LrndesignGalleryMasonry = void 0;
  
    function _templateObject4_3a46fa60d1d911ea92952ff2097cf814() {
      var data = babelHelpers.taggedTemplateLiteral(["\n                    <lrndesign-gallery-zoom\n                      .id=\"", "\"\n                      .details=\"", "\"\n                      .heading=\"", "\"\n                      .src=\"", "\"\n                      .tooltip=\"", "\"\n                      .zoom-alt=\"", "\"\n                      style=\"", "\"\n                    >\n                      <img\n                        .alt=\"", "\"\n                        fade\n                        .src=\"", "\"\n                        @load=\"", "\"\n                      />\n                      <div class=\"zoombg\"></div>\n                      <iron-icon icon=\"zoom-in\" class=\"zoomicon\"></iron-icon>\n                    </lrndesign-gallery-zoom>\n                  "]);
  
      _templateObject4_3a46fa60d1d911ea92952ff2097cf814 = function _templateObject4_3a46fa60d1d911ea92952ff2097cf814() {
        return data;
      };
  
      return data;
    }
  
    function _templateObject3_3a46fa60d1d911ea92952ff2097cf814() {
      var data = babelHelpers.taggedTemplateLiteral(["\n              <div>\n                ", "\n              </div>\n            "]);
  
      _templateObject3_3a46fa60d1d911ea92952ff2097cf814 = function _templateObject3_3a46fa60d1d911ea92952ff2097cf814() {
        return data;
      };
  
      return data;
    }
  
    function _templateObject2_3a46fa60d1d911ea92952ff2097cf814() {
      var data = babelHelpers.taggedTemplateLiteral(["\n      <div id=\"grid\">\n        <p class=\"sr-only\">A list of columns buttons items:</p>\n        <div id=\"galleryscreen\">\n          ", "\n        </div>\n      </div>\n    "]);
  
      _templateObject2_3a46fa60d1d911ea92952ff2097cf814 = function _templateObject2_3a46fa60d1d911ea92952ff2097cf814() {
        return data;
      };
  
      return data;
    }
  
    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 _templateObject_3a46fa60d1d911ea92952ff2097cf814() {
      var data = babelHelpers.taggedTemplateLiteral(["\n        :host {\n          margin: 15px 0;\n          padding: 0;\n          max-width: 100%;\n          display: block;\n        }\n        #galleryscreen > div {\n          display: flex;\n          align-items: stretch;\n          justify-content: center;\n          margin: 20px 0;\n        }\n        lrndesign-gallery-zoom {\n          position: relative;\n          margin: 0 10px;\n          flex: 0 1 var(--lrndesign-gallery-image-width, 200px);\n          max-width: 35%;\n        }\n        lrndesign-gallery-zoom,\n        lrndesign-gallery-zoom:hover,\n        lrndesign-gallery-zoom:focus,\n        lrndesign-gallery-zoom:focus-within {\n          border: 0px solid transparent;\n        }\n        lrndesign-gallery-zoom img {\n          width: 100%;\n          transition: outline 0.25s ease-in-out;\n          outline: 1px solid var(--lrndesign-gallery-color);\n        }\n        lrndesign-gallery-zoom:hover img,\n        lrndesign-gallery-zoom:focus img,\n        lrndesign-gallery-zoom:focus-within img {\n          transition: outline 0.25s ease-in-out;\n          outline: 2px solid var(--lrndesign-gallery-focus-color);\n        }\n        .zoombg,\n        .zoomicon {\n          top: unset;\n          bottom: 5px;\n          left: 5px;\n        }\n      "]);
  
      _templateObject_3a46fa60d1d911ea92952ff2097cf814 = function _templateObject_3a46fa60d1d911ea92952ff2097cf814() {
        return data;
      };
  
      return data;
    }
  
    /**
     * `lrndesign-gallery-masonry`
     * An element that renders a collection of gallery items into a grid or a single media item into a layout.
     *
     * @element lrndesign-gallery-masonry
     * @extends LrndesignGalleryBehaviors
     * @demo ./demo/masonry.html demo
     *
     */
    var LrndesignGalleryMasonry =
    /*#__PURE__*/
    function (_LrndesignGalleryBeha) {
      babelHelpers.inherits(LrndesignGalleryMasonry, _LrndesignGalleryBeha);
      babelHelpers.createClass(LrndesignGalleryMasonry, null, [{
        key: "tag",
  
        /**
         * Store the tag name to make it easier to obtain directly.
         */
        get: function get() {
          return "lrndesign-gallery-masonry";
        }
      }, {
        key: "styles",
        get: function get() {
          return [].concat(babelHelpers.toConsumableArray(babelHelpers.get(babelHelpers.getPrototypeOf(LrndesignGalleryMasonry), "styles", this)), [(0, _litElement.css)(_templateObject_3a46fa60d1d911ea92952ff2097cf814())]);
        } // properties available to the custom element for data binding
  
      }, {
        key: "properties",
        get: function get() {
          return _objectSpread({}, babelHelpers.get(babelHelpers.getPrototypeOf(LrndesignGalleryMasonry), "properties", this), {
            __aspects: {
              type: Object
            },
            __columns: {
              type: Array
            },
            __items: {
              type: Array
            }
          });
        }
        /**
         * life cycle, element is ready
         */
  
      }]);
  
      function LrndesignGalleryMasonry() {
        var _this;
  
        babelHelpers.classCallCheck(this, LrndesignGalleryMasonry);
        _this = babelHelpers.possibleConstructorReturn(this, babelHelpers.getPrototypeOf(LrndesignGalleryMasonry).call(this));
        _this.__aspects = {};
        _this.__items = [];
  
        var target = _this.shadowRoot.querySelector("#carouselitem");
  
        if (_this.selected.scroll && target) {
          _this._scrollIntoView([_this._getParentOffset(target)]);
  
          if (!_this.selected.zoomed) target.focus();
        }
  
        return _this;
      } // render function
  
  
      babelHelpers.createClass(LrndesignGalleryMasonry, [{
        key: "render",
        value: function render() {
          var _this2 = this;
  
          return (0, _litElement.html)(_templateObject2_3a46fa60d1d911ea92952ff2097cf814(), (this.__items || []).map(function (row, i) {
            return (0, _litElement.html)(_templateObject3_3a46fa60d1d911ea92952ff2097cf814(), (row.cols || []).map(function (col, j) {
              return (0, _litElement.html)(_templateObject4_3a46fa60d1d911ea92952ff2097cf814(), col.id, col.details, col.heading, col.large, col.tooltip, col.zoomAlt, _this2._getStyle(col.aspect, row.aspect), col.alt, col.src, function (e) {
                return _this2._handleImgLoad(e);
              });
            }));
          }));
        }
        /**
         * handle updates
         */
  
      }, {
        key: "updated",
        value: function updated(changedProperties) {
          var _this3 = this;
  
          babelHelpers.get(babelHelpers.getPrototypeOf(LrndesignGalleryMasonry.prototype), "updated", this).call(this, changedProperties);
          changedProperties.forEach(function (oldValue, propName) {
            if (propName === "sources") _this3._updateItems();
            if (propName === "responsiveSize") _this3._updateItems();
          });
        }
      }, {
        key: "_getStyle",
        value: function _getStyle(aspect, total) {
          var a = "--lrndesign-gallery-image-aspect:".concat(aspect || 100 / 75, ";"),
              h = "--lrndesign-gallery-image-height:".concat(100 / aspect || 75, "%;"),
              w = "--lrndesign-gallery-image-width:".concat(aspect * 100 / total || 0.75, "%");
          return [a, h, w].join("");
        }
      }, {
        key: "_handleImgLoad",
        value: function _handleImgLoad(e) {
          var target = null;
  
          if (e.path && e.path[0]) {
            target = e.path[0];
          } else if (e.originalTarget) {
            target = e.originalTarget;
          } else {
            target = e.target;
          }
  
          if (target.naturalWidth > 0) {
            this._updateItems();
          }
        }
      }, {
        key: "_updateItems",
        value: function _updateItems() {
          var items = [],
              settings = {
            xs: 2,
            sm: 3,
            md: 4,
            lg: 5,
            xl: 6
          },
              cols = settings[this.responsiveSize || "xs"],
              rows = Math.ceil(this.sources.length / cols);
  
          for (var i = 0; i < rows; i++) {
            var row = {
              aspect: 0,
              cols: []
            };
            console.log("row", i);
  
            for (var j = i * cols; j < Math.min(this.sources.length, (i + 1) * cols); j++) {
              var item = JSON.parse(JSON.stringify(this.sources[j])),
                  img = this.shadowRoot.querySelector("img[src=\"".concat(item.src, "\"]"));
              item.aspect = img && img.naturalWidth > 0 ? img.naturalWidth / img.naturalHeight : 100 / 75;
              row.aspect += item.aspect;
              row.cols.push(item);
            }
  
            items.push(row);
          }
  
          this.__items = items;
          console.log("this.__items", this.__items);
        }
      }]);
      return LrndesignGalleryMasonry;
    }(_lrndesignGalleryBehaviors.LrndesignGalleryBehaviors);
  
    _exports.LrndesignGalleryMasonry = LrndesignGalleryMasonry;
    window.customElements.define(LrndesignGalleryMasonry.tag, LrndesignGalleryMasonry);
  });