move heading to parent component

network-settings.js

@@ -1,10 +1,10 @@
 export class NetworkSettings extends HTMLElement {
   textEn = {
-    access: 'Direct network access (Content Security Policy)',
+    csp: 'Content Security Policy',
   }
 
   textEs = {
-    access: 'Acceso directo a la red (Política de Seguridad del Contenido)',
+    csp: 'Política de Seguridad de Contenido',
   }
 
   accessOptions = {
@@ -56,9 +56,6 @@ export class NetworkSettings extends HTMLElement {
     super()
     this.attachShadow({mode: 'open'})
     this.language = navigator.language
-    const netSelectLabel = document.createElement('div')
-    netSelectLabel.classList.add('label')
-    netSelectLabel.innerText = this.text.access
     const netSelectField = document.createElement('div')
     netSelectField.classList.add('field')
     this.netSelect = document.createElement('select')
@@ -77,13 +74,20 @@ export class NetworkSettings extends HTMLElement {
     this.netSelect.append(...netOptions)
     this.netHeading = document.createElement('h3')
     this.netText = document.createElement('p')
+    this.cspLabel = document.createElement(
+      'div'
+    )
+    this.cspLabel.classList.add('csp-label')
+    this.cspLabel.innerText = (
+      this.text.csp + ' (CSP):'
+    )
     this.netCsp = document.createElement('div')
     this.netCsp.classList.add('csp')
     this.shadowRoot.append(
-      netSelectLabel,
       netSelectField,
       this.netHeading,
       this.netText,
+      this.cspLabel,
       this.netCsp,
     )
   }
@@ -96,14 +100,6 @@ export class NetworkSettings extends HTMLElement {
         flex-direction: column;
         align-items: stretch;
       }
-      div.label {
-        display: flex;
-        flex-direction: row;
-        justify-content: flex-start;
-        background: #eee;
-        padding: 3px;
-        margin-bottom: 5px;
-      }
       div.field {
         display: flex;
         flex-direction: row;
@@ -111,6 +107,9 @@ export class NetworkSettings extends HTMLElement {
       h1, h2, h3, p {
         margin: 3px 0;
       }
+      .csp-label {
+        font-weight: bold;
+      }
       .csp {
         font-family: monospace;
       }

page-settings.js

@@ -1,12 +1,26 @@
 export class PageSettings extends HTMLElement {
+  textEn = {
+    netAccess: 'Direct network access (CSP)',
+  }
+
+  textEs = {
+    netAccess: 'Acceso directo a la red (CSP)',
+  }
+
   constructor() {
     super()
     this.attachShadow({mode: 'open'})
     this.language = navigator.language
+    const netSelectHeading = document.createElement('div')
+    netSelectHeading.classList.add('heading')
+    netSelectHeading.innerText = this.text.netAccess
     this.network = document.createElement(
       'm-settings-network-settings'
     )
-    this.shadowRoot.append(this.network)
+    this.shadowRoot.append(
+      netSelectHeading,
+      this.network,
+    )
   }
 
   connectedCallback() {
@@ -19,6 +33,18 @@ export class PageSettings extends HTMLElement {
         align-items: stretch;
         overflow-y: auto;
       }
+      * {
+        padding-left: 10px;
+      }
+      div.heading {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        background: #f2dbd8;
+        padding: 3px;
+        margin-bottom: 5px;
+        font-weight: bold;
+      }
     `
     this.shadowRoot.append(style)
   }
@@ -38,4 +64,21 @@ export class PageSettings extends HTMLElement {
   set cspProfiles(value) {
     this.network.cspProfiles = value
   }
+
+  get language() {
+    return this._language
+  }
+
+  set language(language) {
+    this._language = language
+    this.text = this.langEs ? this.textEs : this.textEn
+  }
+
+  get langEs() {
+    return /^es\b/.test(this.language)
+  }
+
+  get lang() {
+    return this.language.split('-')[0]
+  }
 }