{"version":3,"sources":["identity.relewise.search.js"],"names":["area","document","querySelector","dataset","areaId","endPoint","RelewiseSearch","HTMLElement","observedAttributes","query","this","getAttribute","val","setAttribute","show","loading","constructor","super","template","clone","cloneNode","content","builder","HTMLBuilder","settings","productTake","sidebarTake","connectedCallback","renderModal","bindInternalEvents","bindExternalEvents","attributeChangedCallback","name","oldValue","newValue","loadingAttributeCallback","value","loader","showAttributeCallback","showModal","hideModal","clearModal","queryAttributeCallback","length","search","querySelectorAll","forEach","b","addEventListener","event","preventDefault","location","href","target","debounce","term","innerHTML","appendChild","beforeResultRender","resultElements","productsElement","countElement","viewAllProductsButtons","classList","add","r","renderResults","results","renderProducts","products","productHits","categories","renderCategories","pages","renderPages","predictions","renderPredictions","resultElement","create","class","product","listItemHtml","appendTo","remove","textContent","replace","noResults","uniqueValues","o1","o2","Value","DisplayName","resultElementList","listElement","style","marginBottom","toNode","category","Id","page","ContentId","prediction","Term","listener","aborter","abort","AbortController","signal","fetch","then","resp","json","catch","body","overflow","setTimeout","focus","isShow","searchIcon","loadingIcon","fnCallback","timeout","let","timer","args","clearTimeout","apply","array","condition","filter","e","i","findIndex","e2","formatCamelCaseToDashed","str","toLowerCase","tagName","attributes","htmlElement","createElement","Object","keys","key","styles","fn","wrapAround","childNode","append","parentNode","prependTo","prepend","customElements","define"],"mappings":"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","file":"identity.relewise.search.js","sourcesContent":["const area = document.querySelector( 'html' ).dataset.area;\r\nconst areaId = document.querySelector( 'html' ).dataset.areaId;\r\nconst endPoint = `${ area }/system/data/relewise-search`;\r\n\r\nclass RelewiseSearch extends HTMLElement {\r\n\r\n  static get observedAttributes() {\r\n    return ['query', 'show', 'loading'];\r\n  }\r\n\r\n  get query() {\r\n    return this.getAttribute( 'query' );\r\n  }\r\n\r\n  set query( val ) {\r\n    this.setAttribute( 'query', val );\r\n  }\r\n\r\n  get show() {\r\n    return this.getAttribute( 'show' );\r\n  }\r\n\r\n  set show( val ) {\r\n    this.setAttribute( 'show', val );\r\n  }\r\n\r\n  get loading() {\r\n    return this.getAttribute( 'loading' );\r\n  }\r\n\r\n  set loading( val ) {\r\n    this.setAttribute( 'loading', val );\r\n  }\r\n\r\n  constructor() {\r\n    super();\r\n    \r\n    const template = this.querySelector( 'template' );\r\n    if(template === null){\r\n      return undefined;\r\n    }\r\n    this.clone = template.cloneNode( true );\r\n    this.template = template.content;\r\n    this.builder = new HTMLBuilder();\r\n    this.settings = {\r\n      productTake: 8,\r\n      sidebarTake: 4,\r\n    };\r\n    this.areaId = areaId;\r\n  }\r\n\r\n  connectedCallback() {\r\n    this.renderModal();\r\n    this.bindInternalEvents();\r\n    this.bindExternalEvents();\r\n  }\r\n  \r\n  attributeChangedCallback( name, oldValue, newValue ) {\r\n    if (oldValue === null || oldValue === newValue) return;\r\n    if(typeof this[`${name}AttributeCallback`] === 'function'){\r\n      this[`${name}AttributeCallback`](newValue);\r\n    }\r\n  }\r\n  loadingAttributeCallback(value){\r\n    this.loader( value === 'true' );\r\n  }\r\n  showAttributeCallback(value){\r\n    if ( value === 'true' ) {\r\n      this.showModal();\r\n    } else {\r\n      this.hideModal();\r\n      this.clearModal();\r\n    }\r\n  }\r\n  queryAttributeCallback(value){\r\n    if ( value.length > 0 ) {\r\n      this.show = true;\r\n      this.search();\r\n    } else {\r\n      this.clearModal();\r\n    }\r\n  }\r\n  bindInternalEvents(){\r\n    const viewAllProductsButtons = this.querySelectorAll(\r\n        '.js-view-all-products-btn' );\r\n\r\n    viewAllProductsButtons.forEach(\r\n        b => b.addEventListener( 'click', ( event ) => {\r\n          event.preventDefault();\r\n          location.href = `${ event.target.href }?term=${ this.query }&areaId=${this.areaId}`;\r\n        } ) );\r\n\r\n    this.querySelector( '.js-identity-relewise-search-input' )\r\n        .addEventListener( 'input', this.debounce( ( event ) => {\r\n          this.query = event.target.value;\r\n        }, 500 ) );\r\n  }\r\n  bindExternalEvents() {\r\n    document.querySelectorAll( '.js-search-trigger' )\r\n        .forEach( b => b.addEventListener( 'click', ( event ) => {\r\n          event.preventDefault();\r\n          this.show = true;\r\n        } ) );\r\n    document.querySelectorAll( '.js-set-search-btn' )\r\n        .forEach( b => b.addEventListener( 'click', ( event ) => {\r\n          event.preventDefault();\r\n          this.query = '';\r\n          this.query = event.target.dataset.term;\r\n        } ) );\r\n  }\r\n\r\n  renderModal() {\r\n    this.innerHTML = '';\r\n    this.appendChild( this.template );\r\n  }\r\n\r\n  beforeResultRender() {\r\n    const resultElements = this.querySelectorAll(\r\n        '.js-identity-relewise-search-results-categories, .js-identity-relewise-search-results-pages, .js-identity-relewise-search-results-predictions' );\r\n    const productsElement = this.querySelector(\r\n        '.js-identity-relewise-search-results-products' );\r\n    const countElement = this.querySelector( '.js-product-count' );\r\n    const viewAllProductsButtons = this.querySelectorAll( '.js-view-all-products-btn' );\r\n\r\n    countElement.classList.add( 'd-none' );\r\n    productsElement.innerHTML = '';\r\n    productsElement.classList.add( 'd-none' );\r\n    resultElements.forEach( r => r.classList.add( 'd-none' ) );\r\n    viewAllProductsButtons.forEach( b => b.classList.add( 'd-none' ) );\r\n\r\n  }\r\n\r\n  renderResults( results ) {\r\n    this.beforeResultRender();\r\n    if ( results !== null ) {\r\n      this.renderProducts( results.products, results.productHits );\r\n\r\n      if ( results.categories.length > 0 ) {\r\n        this.renderCategories( results.categories );\r\n      }\r\n      if ( results.pages.length > 0 ) {\r\n        this.renderPages( results.pages );\r\n      }\r\n      if ( results.predictions.length > 0 ) {\r\n        this.renderPredictions( results.predictions );\r\n      }\r\n    }\r\n  }\r\n\r\n  renderProducts( products, productHits ) {\r\n    const resultElement = this.querySelector(\r\n        '.js-identity-relewise-search-results-products' );\r\n    const viewAllProductsButtons = this.querySelectorAll(\r\n        '.js-view-all-products-btn' );\r\n    const countElement = this.querySelector( '.js-product-count' );\r\n    resultElement.innerHTML = '';\r\n    products.forEach( ( product ) => {\r\n      this.builder.create( 'div', {\r\n        class: 'd-flex col-12 col-sm-6 col-md-6 col-lg-3 col-xl-3',\r\n      } ).content( product.listItemHtml ).appendTo( resultElement );\r\n    } );\r\n    resultElement.classList.remove( 'd-none' );\r\n\r\n    if ( productHits > this.settings.productTake ) {\r\n      viewAllProductsButtons.forEach( b => b.classList.remove( 'd-none' ) );\r\n    } else {\r\n      viewAllProductsButtons.forEach( b => b.classList.add( 'd-none' ) );\r\n    }\r\n    countElement.classList.remove( 'd-none' );\r\n\r\n    if ( productHits > 0 ) {\r\n      countElement.textContent = this.clone.content.querySelector( '.js-product-count' )\r\n          .textContent\r\n          .replace( '{{productPageSize}}', this.settings.productTake > productHits ? productHits : this.settings.productTake )\r\n          .replace( '{{productHits}}', productHits );\r\n    } else{\r\n      countElement.textContent = this.clone.content.querySelector( '.js-product-count' ).dataset.noResults;\r\n    }\r\n\r\n  }\r\n\r\n  renderCategories( categories ) {\r\n    categories = [\r\n      ...this.uniqueValues( categories,\r\n          ( o1, o2 ) => o1.Value.DisplayName === o2.Value.DisplayName )];\r\n    const resultElement = this.querySelector(\r\n        '.js-identity-relewise-search-results-categories' );\r\n    const resultElementList = resultElement.querySelector( 'ul' );\r\n    resultElementList.innerHTML = '';\r\n    categories.forEach( ( category ) => {\r\n      const listElement = this.builder.create( 'li', {\r\n        class: 'm-0 d-block',\r\n      } ).style( { marginBottom: '0.5em' } ).toNode();\r\n      this.builder.create( 'a',\r\n          { href: `Default.aspx?ID=${ category.Value.Id }` } )\r\n          .content( category.Value.DisplayName )\r\n          .appendTo( listElement );\r\n      resultElementList.appendChild( listElement );\r\n    } );\r\n    resultElement.classList.remove( 'd-none' );\r\n\r\n  }\r\n\r\n  renderPages( pages ) {\r\n    pages = [\r\n      ...this.uniqueValues( pages,\r\n          ( o1, o2 ) => o1.DisplayName === o2.DisplayName )];\r\n    const resultElement = this.querySelector(\r\n        '.js-identity-relewise-search-results-pages' );\r\n    const resultElementList = resultElement.querySelector( 'ul' );\r\n    resultElementList.innerHTML = '';\r\n    pages.forEach( ( page ) => {\r\n      const listElement = this.builder.create( 'li', {\r\n        class: 'm-0 d-block',\r\n      } ).style( { marginBottom: '0.5em' } ).toNode();\r\n      this.builder.create( 'a', { href: `Default.aspx?ID=${ page.ContentId }` } )\r\n          .content( page.DisplayName )\r\n          .appendTo( listElement );\r\n      resultElementList.appendChild( listElement );\r\n    } );\r\n    resultElement.classList.remove( 'd-none' );\r\n  }\r\n\r\n  renderPredictions( predictions ) {\r\n    const resultElement = this.querySelector(\r\n        '.js-identity-relewise-search-results-predictions' );\r\n    const resultElementList = resultElement.querySelector( 'ul' );\r\n    resultElementList.innerHTML = '';\r\n    predictions.forEach( ( prediction ) => {\r\n      const listElement = this.builder.create( 'li', {\r\n        class: 'm-0 d-block',\r\n      } ).style( { marginBottom: '0.5em' } ).toNode();\r\n      this.builder.create( 'a', { href: `#` } )\r\n          .content( prediction.Term )\r\n          .listener( 'click', ( event ) => {\r\n            event.preventDefault();\r\n            this.query = prediction.Term;\r\n          } )\r\n          .appendTo( listElement );\r\n      resultElementList.appendChild( listElement );\r\n    } );\r\n    resultElement.classList.remove( 'd-none' );\r\n  }\r\n\r\n  search() {\r\n    this.querySelector( '.js-identity-relewise-search-input' ).value = this.query;\r\n\r\n    if ( this.aborter ) {\r\n      this.aborter.abort( 'New request' );\r\n    }\r\n    this.aborter = new AbortController();\r\n    const signal = this.aborter.signal;\r\n    if ( this.query.length > 1 ) {\r\n      this.loading = true;\r\n      fetch(\r\n          `${ endPoint }?q=${ this.query }&pagesize=${ this.settings.productTake }&areaId=${ areaId }`,\r\n          { signal } ).then( resp => resp.json() ).then( ( json ) => {\r\n        this.aborter = null;\r\n        this.loading = false;\r\n        this.renderResults( json );\r\n      } ).catch( () => {\r\n      } );\r\n    }\r\n  }\r\n\r\n  clearModal() {\r\n    this.renderResults( null );\r\n    this.querySelector( '.js-identity-relewise-search-input' ).value = '';\r\n  }\r\n\r\n  showModal() {\r\n    this.querySelector( '.js-identity-relewise-search-modal' )\r\n        .classList\r\n        .add( 'show', 'd-block' );\r\n    this.querySelector( '.js-relewise-search-backdrop' )\r\n        .classList\r\n        .add( 'show' );\r\n    document.body.style.overflow = 'hidden';\r\n    setTimeout( () => {\r\n      this.querySelector( '.js-identity-relewise-search-input' ).focus();\r\n    }, 0 );\r\n  }\r\n\r\n  hideModal() {\r\n    this.querySelector( '.js-identity-relewise-search-modal' )\r\n        .classList\r\n        .remove( 'show', 'd-block' );\r\n    this.querySelector( '.js-relewise-search-backdrop' )\r\n        .classList\r\n        .remove( 'show' );\r\n    document.body.style.overflow = '';\r\n  }\r\n\r\n  loader( isShow ) {\r\n    const searchIcon = this.querySelector(\r\n        '.js-identity-relewise-search-icon' );\r\n    const loadingIcon = this.querySelector(\r\n        '.js-identity-relewise-loading-icon' );\r\n    if ( isShow ) {\r\n      searchIcon.classList.add( 'd-none' );\r\n      loadingIcon.classList.remove( 'd-none' );\r\n    } else {\r\n      searchIcon.classList.remove( 'd-none' );\r\n      loadingIcon.classList.add( 'd-none' );\r\n    }\r\n  }\r\n\r\n  debounce( fnCallback, timeout = 500 ) {\r\n    let timer;\r\n    return ( ...args ) => {\r\n      clearTimeout( timer );\r\n      timer = setTimeout( () => {\r\n        fnCallback.apply( this, args );\r\n      }, timeout );\r\n    };\r\n  }\r\n\r\n  uniqueValues( array, condition ) {\r\n    return array.filter(\r\n        ( e, i ) => array.findIndex( e2 => condition( e, e2 ) ) === i );\r\n  }\r\n}\r\n\r\nclass HTMLBuilder {\r\n  constructor() {\r\n    this.value = '';\r\n  }\r\n\r\n  formatCamelCaseToDashed( str ) {\r\n    return str.replace( /([a-z])([A-Z])/g, '$1-$2' ).toLowerCase();\r\n  }\r\n\r\n  create( tagName, attributes = {} ) {\r\n    const htmlElement = document.createElement( tagName );\r\n    Object.keys( attributes ).forEach( key => htmlElement.setAttribute(\r\n        this.formatCamelCaseToDashed( key ), attributes[key] ) );\r\n    this.value = htmlElement;\r\n    return this;\r\n  }\r\n\r\n  content( content ) {\r\n    this.value.innerHTML = content;\r\n    return this;\r\n  }\r\n\r\n  style( styles ) {\r\n    Object.keys( styles ).forEach( key => this.value.style[key] = styles[key] );\r\n    return this;\r\n  }\r\n\r\n  listener( event, fn ) {\r\n    this.value.addEventListener( event, fn );\r\n    return this;\r\n  }\r\n\r\n  wrapAround( childNode ) {\r\n    this.value.append( childNode );\r\n    return this;\r\n  }\r\n\r\n  appendTo( parentNode ) {\r\n    parentNode.append( this.value );\r\n  }\r\n\r\n  prependTo( parentNode ) {\r\n    parentNode.prepend( this.value );\r\n  }\r\n\r\n  toNode() {\r\n    return this.value;\r\n  }\r\n}\r\n\r\ncustomElements.define( 'relewise-search', RelewiseSearch );\r\n"]}