(function(tma) { tma.components = tma.components || {}; tma.components['tma-profile-info'] = function (dependencies) { const { translate, rxjs, user, date } = dependencies; const template = document.createElement('template'); template.innerHTML = `

`; return class extends HTMLElement { _subscriptions = []; constructor() { super(); this.attachShadow({mode: 'open'}); this.shadowRoot.replaceChildren(template.content.cloneNode(true)); } connectedCallback() { this._subscriptions.push(user.pipe( rxjs.switchMap(user => fetch('https://restcountries.eu/rest/v2/alpha/' + user.countryCode) .then(response => response.json()) .then(country => ({...user, country: country.name}))), ).subscribe(user => this._updateTemplate(user))); } disconnectedCallback() { if (this._subscriptions.length) { this._subscriptions.forEach(sub => sub.unsubscribe()); } } _updateTemplate(user) { const contentTemplate = document.createElement('template'); contentTemplate.innerHTML = `

${translate('User Id.')}

${user.userId}

${translate('First name')}

${user.firstName}

${translate('Last name')}

${user.lastName}

${translate('Email')}

${user.email}

${translate('Phone')}

${user.phone}

${translate('Birthdate')}

${date(user.birthDate)}

${translate('Country')}

${user.country}

`; const container = this.shadowRoot.getElementById('profile-info-container'); container.replaceChildren(contentTemplate.content.cloneNode(true)); } } }; }(window.TMA = window.TMA || {}));

Plinkgoal