{"version":3,"sources":["Native/customButton.js","Native/myInfo.js","Native/countryInfo.js","Native/index.js"],"names":["CustomButton","addEventListener","callBack","HTMLButtonElement","e","console","log","getAttribute","customElements","define","extends","MyInfo","shadowElement","attachShadow","mode","HTMLElement","render","value","split","map","charAt","toUpperCase","substr","join","template","capitalize","shadowRoot","innerHTML","CountryInfo","_country","_countryInfo","name","oldValue","newValue","getCountryInfo","fetch","then","resp","json","catch","err","error","area","alpha3Code","altSpellings","borders","callingCodes","capital","nativeName","population","region","subregion","demonym","timezones","topLevelDomain","latlng","translations","flag","currencies","info","Object","keys","elem","sp","trim","tagName","button","document","querySelector","input","customElement","get","setAttribute","toLowerCase"],"mappings":"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","file":"Native.d476a56c.map","sourceRoot":"..","sourcesContent":["class CustomButton extends HTMLButtonElement {\n  constructor() {\n    super()\n    this.addEventListener('click', this.callBack)\n  }\n\n  callBack(e) {\n    console.log(`${this.getAttribute('is')} called`)\n  }\n}\n\ncustomElements.define('custom-button', CustomButton, { extends: 'button' })","class MyInfo extends HTMLElement {\n  constructor() {\n    super()\n    this.shadowElement = this.attachShadow({ mode: 'open' })\n  }\n\n  connectedCallback() {\n    this.render()\n  }\n\n  capitalize() {\n    const value = this.getAttribute('name');\n    return value.split(' ').map(e => e.charAt(0).toUpperCase() + e.substr(1)).join(' ')\n  }\n\n  render() {\n    const template = `\n      <span>${this.capitalize()}</span>\n    `\n    this.shadowRoot.innerHTML = template\n  }\n}\n\ncustomElements.define('my-info', MyInfo)\n","class CountryInfo extends HTMLElement {\n  constructor() {\n    super()\n    this._country = this.getAttribute('country')\n    this._countryInfo = {}\n    this.shadowRoot = this.attachShadow({ mode: 'open' })\n  }\n\n  static get observedAttributes() {\n    return ['country']\n  }\n\n  attributeChangedCallback(name, oldValue, newValue) {\n    console.log('attributeChangedCallback >>', name, oldValue, newValue)\n    switch(name) {\n      case 'country': {\n        this._country = newValue\n        oldValue !== newValue && this.getCountryInfo()\n      }\n    }\n  }\n\n  getCountryInfo() {\n    fetch(`https://restcountries.eu/rest/v2/name/${this._country}?fullText=true`)\n      .then(resp => resp.json())\n      .then(resp => {\n        this._countryInfo = resp[0]\n        this.render()\n      })\n      .catch(err => console.error(err))\n  }\n\n  render() {\n    const {\n      name,\n      area,\n      alpha3Code,\n      altSpellings,\n      borders,\n      callingCodes,\n      capital,\n      nativeName,\n      population,\n      region,\n      subregion,\n      demonym,\n      timezones,\n      topLevelDomain,\n      latlng,\n      translations,\n      flag,\n      currencies\n    } = this._countryInfo\n\n    const info = `\n      <img src=${flag} width='300px' />\n\n      <p><b>Name</b>: ${name}</p>\n      <p><b>Area</b>: ${area}</p>\n      <p><b>Alpha3 Code</b>: ${alpha3Code}</p>\n      <p><b>Alt Spellings: </b></p>\n      <p><b>Capital</b>: ${capital}</p>\n      <p><b>Native Name</b>: ${nativeName}</p>\n      <p><b>Population</b>: ${population}</p>\n      <p><b>Region</b>: ${region}</p>\n      <p><b>SubRegion</b>: ${subregion}</p>\n      <p><b>Demonym</b>: ${demonym}</p>\n      <p><b>Latitude</b>: ${latlng[0]}</p>\n      <p><b>Longitude</b>: ${latlng[1]}</p>\n\n      <p><b>Currencies</b>:</p>\n      <ul>\n        ${Object.keys(currencies[0]).map(elem => \n          `<li>${elem}: ${currencies[0][elem]}</li>`\n        )}\n      </ul>      \n\n      <p><b>Alt Spellings</b>:</p>\n      <ul>\n        ${altSpellings.map(elem => `<li>${elem}</li>`)}\n      </ul>\n\n      <p><b>Borders</b>:</p>\n      <ul>\n        ${borders.map(elem => `<li>${elem}</li>`)}\n      </ul>\n\n      <p><b>Calling Codes</b>:</p>\n      <ul>\n        ${callingCodes.map(sp => `<li>${sp.trim()}</li>`)}\n      </ul>\n\n      <p><b>Timezones</b>:</p>\n      <ul>\n        ${timezones.map(elem => `<li>${elem}</li>`)}\n      </ul>\n\n      <p><b>Top Level Domains</b>:</p>\n      <ul>\n        ${topLevelDomain.map(sp => `<li>${sp.trim()}</li>`)}\n      </ul>\n\n     <p><b>Translations</b>:</p>\n      <ul>\n        ${Object.keys(translations).map(sp => `<li>${sp}: ${translations[sp]}</li>`)}\n      </ul>\n    `\n\n    const template = `\n      <h1>COUNTRY INFO:</h1>\n      ${info}\n    `\n\n    this.shadowRoot.innerHTML = template\n  }\n\n  connectedCallback() {\n    console.log(`${this.tagName} mounted into the DOM`)\n  }\n\n  disconnectedCallback() {\n    console.log(`${this.tagName} unmounted from the DOM`)\n  }\n}\n\n// DEFINE OUR CUSTOM ELEMENT\ncustomElements.define('country-info', CountryInfo)\n\n// CHANGE COUNTRY-INFO'S COUNTRY PROP\nconst button = document.querySelector('button#get-details')\nconst input = document.querySelector('input[type=\"text\"]')\nconst customElement = document.querySelector('country-info')\n\ninput.value = customElement.getAttribute('country')\n\nbutton.addEventListener('click', function() {\n  const value = input.value\n  if (value && customElements.get('country-info')) {\n    customElement.setAttribute('country', value.toLowerCase())\n  }\n})\n","// import './shadowElement'\n// import './template'\nimport './customButton'\nimport './myInfo'\nimport './countryInfo'\n"]}