{"version":3,"sources":["webpack:///./src/client/default/js/components/thumbnailsComponent.js","webpack:///./src/client/default/js/base/baseComponent.js"],"names":["ThumbnailsComponent","_BaseComponent","element","_this","_classCallCheck","_callSuper","bindEvents","_inherits","_createClass","key","get","_defineProperty","this","CUSTOM_MESSAGES","ZOOM_EVENTS","click","bindZoom","document","querySelector","compOptions","options","_objectSpread","$elCar","dataset","Object","keys","filter","entry","includes","forEach","optionValue","cleanEntry","BaseComponent","cleanOptionKey","JSON","parse","replace","convertType","deepFreeze","thumbnail","templateElement","thumbnailBtn","active","value","thumbnails","_this2","classList","remove","CLASSES","thumb","_this3","EMIT","MODAL_EVENTS","show","selector","SELECTORS","className","showCloseButton","afterOpen","contains","swiperInstance","Swiper","$optionsCar","slideTo","img","index","e","thumbaniImg","match","removeActiveClass","add","THUMBNAIL_EVENTS","url","src","srcset","_this4","$el","querySelectorAll","$on","handleThumbnailEvent","preventDefault","_BaseGiaComponent","_componentElement","setAttribute","_checkMessages","getAttribute","events","cb","arguments","length","undefined","elements","Bean","on","stopPropagation","one","off","fire","container","message","_loading","LOADER_EVENTS","body","error","icon","setTimeout","hide","option","optionReturn","str","concat","charAt","toLocaleLowerCase","slice","BaseGiaComponent"],"mappings":"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","file":"js/component-thumbnailsComponent-js.chunks.js","sourcesContent":["import BaseComponent from '../base/baseComponent';\nimport { match } from '../utilities/resolutionHandler';\nimport Swiper from 'swiper';\nimport deepFreeze from '../utilities/freeze';\n\nexport default class ThumbnailsComponent extends BaseComponent {\n  get Messages() {\n    return {\n      [this.CUSTOM_MESSAGES.ZOOM_EVENTS.click]: this.bindZoom\n    };\n  }\n\n  get $elCar() {\n    return /** @type {HTMLElement} */ (document.querySelector('.pdpCarousel'));\n  }\n\n  get $optionsCar() {\n    const compOptions = {};\n    const options = { ...this.$elCar.dataset };\n    const optionsEntires = Object.keys(options).filter((entry) => entry.includes('option'));\n    optionsEntires.forEach((entry) => {\n      const cleanEntry = BaseComponent.cleanOptionKey(entry);\n      let optionValue;\n      if (options[entry].includes('{') && options[entry].includes('}')) {\n        optionValue = JSON.parse(options[entry].replace(/'/g, '\"'));\n      } else {\n        optionValue = BaseComponent.convertType(options[entry]);\n      }\n      compOptions[cleanEntry] = optionValue;\n    });\n    return deepFreeze(compOptions);\n  }\n\n  get SELECTORS() {\n    return {\n      thumbnail: '.js-thumb-img',\n      templateElement: '#pdp-zoom-carousel',\n      thumbnailBtn: '.js-thumb-btn'\n    };\n  }\n\n  get CLASSES() {\n    return {\n      active: 'is-active'\n    };\n  }\n\n  constructor(element) {\n    super(element);\n    this.bindEvents();\n  }\n\n  removeActiveClass(thumbnails) {\n    thumbnails.forEach((thumbnail) => {\n      thumbnail.classList.remove(this.CLASSES.active);\n    });\n  }\n\n  bindZoom(thumb) {\n    this.EMIT(this.CUSTOM_MESSAGES.MODAL_EVENTS.show, {\n      selector: this.SELECTORS.templateElement,\n      className: 'full-modal zoom-carousel',\n      showCloseButton: true,\n      afterOpen: () => {\n        if (this.$elCar.classList.contains('bind-carousel')) {\n          this.swiperInstance = new Swiper(this.$elCar, this.$optionsCar);\n          this.swiperInstance.slideTo(thumb.img ? thumb.img.dataset.index - 1 : thumb.dataset.index - 1, 22, false);\n        }\n      }\n    });\n  }\n\n  handleThumbnailEvent(thumbnail, thumbnails, e) {\n    let thumbaniImg = thumbnail.querySelector(this.SELECTORS.thumbnail);\n    if (match(null, 'md')) {\n      this.removeActiveClass(thumbnails);\n      thumbnail.classList.add(this.CLASSES.active);\n      this.EMIT(this.CUSTOM_MESSAGES.THUMBNAIL_EVENTS.click, {\n        url: thumbaniImg.src,\n        srcset: thumbaniImg.srcset,\n        index: thumbaniImg.dataset.index\n      });\n    } else {\n      this.bindZoom(thumbaniImg);\n    }\n  }\n\n  bindEvents() {\n    const thumbnails = this.$el.querySelectorAll(this.SELECTORS.thumbnailBtn);\n    thumbnails.forEach((thumbnail) => {\n      this.$on(\n        'click.thumb',\n        (e) => {\n          this.handleThumbnailEvent(thumbnail, thumbnails, e);\n        },\n        thumbnail\n      );\n      this.$on(\n        'keydown.thumb',\n        (e) => {\n          if (e.key === 'Enter') {\n            e.preventDefault();\n            this.handleThumbnailEvent(thumbnail, thumbnails, e);\n          }\n        },\n        thumbnail\n      );\n    });\n  }\n}\n","/* eslint-disable new-cap */\n/* eslint-disable valid-jsdoc */\n/* eslint-disable no-underscore-dangle */\n\nimport Bean from 'bean';\nimport deepFreeze from '../utilities/freeze';\nimport BaseGiaComponent from './baseGiaComponent';\n\nexport default class BaseComponent extends BaseGiaComponent {\n  /**\n   * @returns {HTMLElement}\n   */\n  get $el() {\n    return /** @type {HTMLElement} */ (this._componentElement);\n  }\n\n  get $options() {\n    const compOptions = {};\n    const options = { ...this.$el.dataset };\n    const optionsEntires = Object.keys(options).filter((entry) => entry.includes('option'));\n    optionsEntires.forEach((entry) => {\n      const cleanEntry = BaseComponent.cleanOptionKey(entry);\n      let optionValue;\n      if (options[entry].includes('{') && options[entry].includes('}')) {\n        optionValue = JSON.parse(options[entry].replace(/'/g, '\"'));\n      } else {\n        optionValue = BaseComponent.convertType(options[entry]);\n      }\n      compOptions[cleanEntry] = optionValue;\n    });\n    return deepFreeze(compOptions);\n  }\n\n  get COMPONENT_NAME() {\n    return this.$el.getAttribute('data-component');\n  }\n\n  /**\n   *\n   * constructor\n   *\n   * @param {Element} element\n   */\n  constructor(element) {\n    super(element);\n    this._componentElement = element;\n    this._componentElement.setAttribute('data-component-init', 'true');\n    this._checkMessages();\n  }\n\n  static convertType(option) {\n    let optionReturn;\n    switch (option) {\n      case 'false':\n        optionReturn = false;\n        break;\n      case 'true':\n        optionReturn = true;\n        break;\n      case 'null':\n        optionReturn = null;\n        break;\n      default:\n        optionReturn = option;\n        break;\n    }\n\n    return optionReturn;\n  }\n\n  static cleanOptionKey(key) {\n    const str = key.replace('option', '');\n    return `${str.charAt(0).toLocaleLowerCase()}${str.slice(1)}`;\n  }\n\n  /**\n   *\n   * $on\n   *\n   * @param {String} events\n   * @param {Function} cb\n   * @param {Element} [element = this.$el]\n   * @param {Array|String|Element} [elements = null]\n   */\n  $on(events, cb, element = this.$el, elements = null) {\n    if (!element || !events || !cb) return;\n    if (!elements) {\n      Bean.on(element, events, (e) => {\n        if (e) e.stopPropagation();\n        cb(e);\n      });\n    } else {\n      Bean.on(element, events, elements, (e) => {\n        if (e) e.stopPropagation();\n        cb(e);\n      });\n    }\n  }\n\n  /**\n   *\n   * $one\n   *\n   * @param {String} events\n   * @param {Function} cb\n   * @param {Element} [element = this.$el]\n   */\n  $one(events, cb, element = this.$el) {\n    Bean.one(element, events, cb);\n  }\n\n  /**\n   *\n   * $off\n   *\n   * @param {String} events\n   * @param {Element} [element = this.$el]\n   */\n  $off(events, element = this.$el) {\n    Bean.off(element, events);\n  }\n\n  /**\n   *\n   * $fire\n   *\n   * @param {String} events\n   * @param {Element} [element = this.$el]\n   */\n  $fire(events, element = this.$el) {\n    Bean.fire(element, events);\n  }\n\n  /**\n   *\n   * Activate loader\n   *\n   * @param {HTMLElement} [container]\n   * @param {String} [message]\n   */\n  loading(container, message) {\n    this._loading = true;\n    this.EMIT(this.CUSTOM_MESSAGES.LOADER_EVENTS.show, {\n      container: container || document.body,\n      message: message ?? null\n    });\n  }\n\n  /**\n   *\n   * Deactivate loader\n   *\n   * @param {HTMLElement} [container]\n   * @param {String} [message]\n   * @param {Boolean} [error=false]\n   * @param {String} [icon]\n   */\n  endLoading(container, message, error = false, icon) {\n    this._loading = false;\n    setTimeout(() => {\n      if (!this._loading) {\n        this.EMIT(this.CUSTOM_MESSAGES.LOADER_EVENTS.hide, {\n          container: container || document.body,\n          message,\n          error,\n          icon\n        });\n      }\n    }, 400);\n  }\n}\n"],"sourceRoot":""}