Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
lga
crater-ui
Commits
d0f4e857
Commit
d0f4e857
authored
Nov 25, 2022
by
Benjam
Browse files
fix suite review
parent
6da307da
Changes
18
Hide whitespace changes
Inline
Side-by-side
apps/crater/cypress.config.js
View file @
d0f4e857
const
{
defineConfig
}
=
require
(
"
cypress
"
);
const
{
defineConfig
}
=
require
(
'
cypress
'
);
module
.
exports
=
defineConfig
({
experimentalStudio
:
true
,
includeShadowDom
:
true
,
experimentalStudio
:
true
,
includeShadowDom
:
true
,
e2e
:
{
// We've imported your old cypress plugins here.
// You may want to clean this up later by importing these.
setupNodeEvents
(
on
,
config
)
{
return
require
(
"
./cypress/plugins/index.js
"
)(
on
,
config
);
e2e
:
{
// We've imported your old cypress plugins here.
// You may want to clean this up later by importing these.
setupNodeEvents
(
on
,
config
)
{
return
require
(
'
./cypress/plugins/index.js
'
)(
on
,
config
);
},
baseUrl
:
'
http://localhost:8088/
'
},
baseUrl
:
"
http://localhost:8088/
"
,
},
component
:
{
devServer
:
{
framework
:
"
react
"
,
bundler
:
"
vite
"
,
}
,
}
,
component
:
{
devServer
:
{
framework
:
'
react
'
,
bundler
:
'
vite
'
}
}
});
apps/crater/cypress/e2e/verifier_affichage_erreur_technique.cy.js
View file @
d0f4e857
context
(
'
Test de vérification affichage du bandeau erreur technique
'
,
()
=>
{
it
(
"
Afficher le bandeau erreur technique sur la page
d'accueil
"
,
()
=>
{
it
(
"
Afficher le bandeau erreur technique sur la page
carte
"
,
()
=>
{
// init
cy
.
intercept
(
'
GET
'
,
'
**/api/
territoires
**
'
,
{
cy
.
intercept
(
'
GET
'
,
'
**/api/**
'
,
{
statusCode
:
500
,
body
:
{}
});
cy
.
viewport
(
1500
,
1000
);
cy
.
visit
(
'
accueil
'
);
cy
.
visit
(
'
carte
'
);
cy
.
get
(
`[data-cy=champ-recherche-territoire]`
).
find
(
'
input
'
).
should
(
'
be.visible
'
).
type
(
'
pari
'
,
{
force
:
true
});
//
cy.get(`[data-cy=champ-recherche-territoire]`).find('input').should('be.visible').type('pari', { force: true });
cy
.
get
(
'
[data-cy=message-erreur]
'
).
should
(
'
be.visible
'
);
});
...
...
apps/crater/cypress/support/component-index.html
View file @
d0f4e857
<!DOCTYPE html>
<html>
<head>
<meta
charset=
"utf-8"
>
<meta
http-equiv=
"X-UA-Compatible"
content=
"IE=edge"
>
<meta
name=
"viewport"
content=
"width=device-width,initial-scale=1.0"
>
<title>
Components App
</title>
</head>
<body>
<div
data-cy-root
></div>
</body>
</html>
\ No newline at end of file
<head>
<meta
charset=
"utf-8"
/>
<meta
http-equiv=
"X-UA-Compatible"
content=
"IE=edge"
/>
<meta
name=
"viewport"
content=
"width=device-width,initial-scale=1.0"
/>
<title>
Components App
</title>
</head>
<body>
<div
data-cy-root
></div>
</body>
</html>
apps/crater/cypress/support/component.js
View file @
d0f4e857
...
...
@@ -14,14 +14,14 @@
// ***********************************************************
// Import commands.js using ES2015 syntax:
import
'
./commands
'
import
'
./commands
'
;
// Alternatively you can use CommonJS syntax:
// require('./commands')
import
{
mount
}
from
'
cypress/react
'
import
{
mount
}
from
'
cypress/react
'
;
Cypress
.
Commands
.
add
(
'
mount
'
,
mount
)
Cypress
.
Commands
.
add
(
'
mount
'
,
mount
)
;
// Example use:
// cy.mount(<MyComponent />)
\ No newline at end of file
// cy.mount(<MyComponent />)
apps/crater/src/CraterApp.ts
View file @
d0f4e857
...
...
@@ -11,7 +11,6 @@ import { customElement, query, state } from 'lit/decorators.js';
import
{
ifDefined
}
from
'
lit/directives/if-defined.js
'
;
import
page
,
{
Context
}
from
'
page
'
;
import
{
BarreNavigationEchelleTerritoriale
}
from
'
./composants/structure/BarreNavigationEchelleTerritoriale
'
;
import
{
Entete
}
from
'
./composants/structure/Entete
'
;
import
{
importDynamique
}
from
'
./composants/structure/importDynamiqueDirective
'
;
import
{
MessageErreurGlissant
}
from
'
./composants/structure/MessageErreurGlissant
'
;
...
...
@@ -107,7 +106,7 @@ export class CraterApp extends LitElement {
render
()
{
return
html
`
<c-message-erreur-glissant></c-message-erreur-glissant>
<c-message-erreur-glissant
class="masquer-dans-pdf"
></c-message-erreur-glissant>
${
this
.
renderPageCourante
()}
`
;
}
...
...
apps/crater/src/composants/diagnostic/chapitres/ChapitreSynthese.ts
View file @
d0f4e857
...
...
@@ -6,7 +6,7 @@ import '../../base/TimeLine.js';
import
{
getVariableCss
}
from
'
@lga/commun/build/composants/composants-base
'
;
import
baseRawCss
from
'
@lga/commun/build/composants/composants-base.css
'
;
import
{
formaterNombreEnEntierString
}
from
'
@lga/commun/build/outils/base
'
;
import
{
html
,
LitElement
,
unsafeCSS
}
from
'
lit
'
;
import
{
css
,
html
,
LitElement
,
unsafeCSS
}
from
'
lit
'
;
import
{
customElement
,
property
,
query
}
from
'
lit/decorators.js
'
;
import
{
IndicateurSynthese
,
NOTE_VALEUR_WARNING
,
Rapport
}
from
'
../../../domaines/diagnostics
'
;
...
...
@@ -23,7 +23,135 @@ import { MessageCle } from '../sections/MessageCle';
@
customElement
(
'
c-chapitre-synthese
'
)
export
class
ChapitreSynthese
extends
LitElement
{
static
styles
=
[
unsafeCSS
(
baseRawCss
),
unsafeCSS
(
diagnosticRawCss
)];
static
styles
=
[
unsafeCSS
(
baseRawCss
),
unsafeCSS
(
diagnosticRawCss
),
css
`
section {
padding-left: max((100vw - var(--largeur-maximum-contenu)) / 2, 1rem);
padding-right: max((100vw - var(--largeur-maximum-contenu)) / 2, 1rem);
}
section h1 {
font-size: var(--normal);
font-weight: normal;
border-bottom: none;
margin-bottom: 0;
text-transform: uppercase;
color: var(--c-synthese-texte-titre1);
}
section h2 {
text-transform: uppercase;
margin: 0;
margin-bottom: 1rem;
font-size: var(--title1);
font-weight: bolder;
color: var(--c-synthese-texte-titre2);
}
section h3 {
color: var(--c-texte-base);
}
section h4 {
color: var(--c-texte-base);
margin: 0 0 0.1rem;
}
/*Grille */
.grid-synthese {
display: grid;
grid-template-columns: 4fr 4fr;
grid-template-rows: 1fr 5fr;
grid-template-areas:
'infos-generales messages-cles'
'chart-radar messages-cles';
gap: 1rem;
align-items: stretch;
justify-items: stretch;
align-content: space-around;
}
.grid-synthese-item {
background-color: var(--c-synthese-arriereplan-boites);
box-shadow: 0 2px 6px 0 var(--ombre);
padding: 0.5rem;
}
/*Infos générales */
.infos-generales {
grid-area: infos-generales;
margin: 10px 5px;
display: flex;
flex-wrap: wrap;
text-decoration: none;
min-height: 90px;
}
.info-generale {
display: flex;
flex-grow: 1;
flex-basis: 33%;
align-items: center;
}
.info {
text-align: left;
flex-grow: 1;
padding: 0.3rem;
}
.indicateur-synthese {
font-family: var(--chiffre-font-family);
font-size: var(--title2);
}
.indicateur-synthese-source {
color: var(--c-texte-source);
font-size: var(--smaller3);
}
/* Message cle */
.messages-cles {
grid-area: messages-cles;
display: grid;
align-items: center;
font-size: var(--smaller1);
padding-top: 0.1rem;
padding-bottom: 0.1rem;
}
@media screen and (max-width: 1024px) {
.grid-synthese {
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-template-areas: 'infos-generales' 'chart-radar' 'messages-cles';
}
}
@media print {
.grid-synthese {
display: grid;
grid-template-columns: 1fr;
grid-template-areas: 'infos-generales' 'messages-cles';
gap: 0;
}
.grid-synthese-item {
box-shadow: 0 0 0 0;
padding: 0;
}
.chart-radar {
display: none;
}
}
`
];
@
property
()
rapport
?:
Rapport
;
...
...
@@ -51,7 +179,7 @@ export class ChapitreSynthese extends LitElement {
render
()
{
return
html
`
<section
id="section-synthese"
>
<section>
<div style="display: flex; justify-content: space-between">
<h2 class="soulignage">
${
this
.
rapport
?.
getTerritoireActif
()?.
nom
||
''
}
</h2>
<c-menu-exporter></c-menu-exporter>
...
...
apps/crater/src/composants/diagnostic/chapitres/MenuNavigationSections.ts
View file @
d0f4e857
...
...
@@ -148,16 +148,18 @@ export class MenuNavigationSections extends LitElement {
</h1>
</div>
<ul>
${
this
.
sections
?
this
.
sections
!
.
map
(
(
s
)
=>
html
`<li class="
${
this
.
idSectionActive
===
s
.
id
?
'
item-actif
'
:
'
item-non-actif
'
}
">→ <a href="
${
s
.
id
===
'
synthese
'
?
`/diagnostic
${
document
.
location
.
search
}
`
:
`/diagnostic/maillons/
${
s
.
id
}${
document
.
location
.
search
}
`
}
">
${
s
.
nom
}
</a></li>`
)
:
``
}
${
this
.
sections
?
this
.
sections
!
.
map
(
(
s
)
=>
html
`<li class="
${
this
.
idSectionActive
===
s
.
id
?
'
item-actif
'
:
'
item-non-actif
'
}
">→ <a href="
${
s
.
id
===
'
synthese
'
?
`/diagnostic
${
document
.
location
.
search
}
`
:
`/diagnostic/maillons/
${
s
.
id
}${
document
.
location
.
search
}
`
}
">
${
s
.
nom
}
</a></li>`
)
:
``
}
</ul>
<a id="bouton-remonter-haut" @click="
${()
=>
window
.
scrollTo
(
0
,
0
)}
" title="Retour haut de page" role="button">
...
...
apps/crater/src/composants/diagnostic/sections/TitreIndicateur.ts
View file @
d0f4e857
...
...
@@ -78,7 +78,6 @@ export class TitreIndicateur extends LitElement {
@
state
()
private
visible
=
false
;
maj
(
titre
:
string
,
description
:
string
,
idChapitreMethodologie
?:
string
,
lienCarte
?:
string
)
{
this
.
titre
=
titre
;
this
.
description
=
description
;
...
...
@@ -96,7 +95,12 @@ export class TitreIndicateur extends LitElement {
formeBouton="
${
FORME_BOUTON
.
rond
}
"
></c-bouton>
${
this
.
lienCarte
?
html
`<c-bouton @click="
${()
=>
this
.
naviguer
(
this
.
lienCarte
!
)}
" libelle="" libelleTooltip="Voir la carte" formeBouton="
${
FORME_BOUTON
.
rond
}
">
?
html
`<c-bouton
@click="
${()
=>
this
.
naviguer
(
this
.
lienCarte
!
)}
"
libelle=""
libelleTooltip="Voir la carte"
formeBouton="
${
FORME_BOUTON
.
rond
}
"
>
${
unsafeSVG
(
ICONES_SVG
.
carte
)}
</c-bouton>`
:
''
}
...
...
@@ -105,7 +109,7 @@ export class TitreIndicateur extends LitElement {
?
html
` <div class="details">
<div>
${
unsafeHTML
(
this
.
description
)}
</div>
${
this
.
idChapitreMethodologie
?
html
`<a href="/methodologie#
${
this
.
idChapitreMethodologie
}
" target=
'
_blank
'
>→ voir la méthodologie</a>`
?
html
`<a href="/methodologie#
${
this
.
idChapitreMethodologie
}
" target=
"
_blank
"
>→ voir la méthodologie</a>`
:
``
}
</div>`
:
``
;
...
...
apps/crater/src/composants/structure/BarreNavigationEchelleTerritoriale.ts
View file @
d0f4e857
...
...
@@ -26,8 +26,9 @@ export class BarreNavigationEchelleTerritoriale extends LitElement {
background-color: var(--gris2);
align-items: center;
overflow-x: auto;
position:
relative
;
position:
fixed
;
width: 100%;
z-index: 100;
}
#bouton-retour {
display: flex;
...
...
apps/crater/src/composants/structure/MenuGlissant.ts
View file @
d0f4e857
...
...
@@ -146,14 +146,16 @@ export class MenuGlissant extends LitElement {
<li><a href="
${
`/diagnostic
${
document
.
location
.
search
}
`
}
">Synthèse</a></li>
<li><a href="
${
`/diagnostic/territoire/
${
document
.
location
.
search
}
`
}
">Présentation du territoire</a></li>
${
this
.
maillons
?
this
.
maillons
!
.
map
((
m
)
=>
html
`<li><a href="
${
`/diagnostic/maillons/
${
m
.
id
}${
document
.
location
.
search
}
`
}
">
${
m
.
nom
}
</a></li>`
)
?
this
.
maillons
!
.
map
(
(
m
)
=>
html
`<li><a href="
${
`/diagnostic/maillons/
${
m
.
id
}${
document
.
location
.
search
}
`
}
">
${
m
.
nom
}
</a></li>`
)
:
``
}
</ul>`
:
``
;
const
sousMenuGeneral
=
html
`
<h4>Menu</h4>
<ul>
<li><a href="/
accueil">Accueil
</a></li>
<li><a href="/
diagnostic">Diagnostic
</a></li>
<li><a href="/carte">Carte</a></li>
<li><a href="/projet">Le projet CRATer</a></li>
<li><a href="/methodologie">Méthodologie</a></li>
...
...
@@ -203,5 +205,4 @@ export class MenuGlissant extends LitElement {
private
fermer
()
{
this
.
dispatchEvent
(
new
EvenementFermer
());
}
}
apps/crater/src/composants/structure/MessageErreurGlissant.ts
View file @
d0f4e857
...
...
@@ -44,7 +44,7 @@ export class MessageErreurGlissant extends LitElement {
return
html
`
<section class="
${
this
.
classVisibilite
}
" data-cy="message-erreur">
<p id="message-erreur">⚠ Un problème technique est survenu.<br> Merci d'essayer à nouveau dans quelques
seconde
s.</p>
instant
s.</p>
</section>
`
;
}
...
...
apps/crater/src/domaines/diagnostics/Rapport.test.ts
View file @
d0f4e857
...
...
@@ -79,7 +79,7 @@ describe('Tests de la classe Rapport', () => {
// when
const
rapport_etat1
=
Rapport
.
creerVide
();
// then
expect
(
rapport_etat1
.
getEtat
()).
toEqual
(
EtatRapport
.
CHARGEMENT_EN_COURS
);
expect
(
rapport_etat1
.
getEtat
()).
toEqual
(
EtatRapport
.
AUCUN_TERRITOIRE
);
// when
const
rapport_etat2
=
rapport_etat1
.
setHierarchieTerritoires
(
hierarchieCommune
).
ajouterDiagnostic
(
diagnosticCommune
);
// then
...
...
apps/crater/src/domaines/diagnostics/Rapport.ts
View file @
d0f4e857
...
...
@@ -21,6 +21,7 @@ export class Rapport {
public
static
creerVide
():
Rapport
{
return
new
Rapport
(
EtatRapport
.
AUCUN_TERRITOIRE
,
null
,
undefined
,
undefined
,
new
Map
<
string
,
Diagnostic
>
());
}
private
clone
():
Rapport
{
return
new
Rapport
(
this
.
etat
,
this
.
erreur
,
this
.
hierarchieTerritoires
,
this
.
idTerritoireActif
,
this
.
diagnostics
);
}
...
...
@@ -33,6 +34,10 @@ export class Rapport {
return
this
.
erreur
;
}
mettreEnChargement
()
{
this
.
etat
=
EtatRapport
.
CHARGEMENT_EN_COURS
;
}
mettreEnErreur
(
erreur
:
Error
):
Rapport
{
const
rapport
=
Rapport
.
creerVide
();
rapport
.
etat
=
EtatRapport
.
ERREUR
;
...
...
@@ -46,6 +51,7 @@ export class Rapport {
setHierarchieTerritoires
(
hierarchieTerritoires
:
HierarchieTerritoires
):
Rapport
{
const
rapport
=
Rapport
.
creerVide
();
rapport
.
mettreEnChargement
();
rapport
.
hierarchieTerritoires
=
hierarchieTerritoires
;
rapport
.
idTerritoireActif
=
hierarchieTerritoires
.
territoirePrincipal
.
id
;
return
rapport
;
...
...
apps/crater/src/pages/accueil/accueil.css
View file @
d0f4e857
...
...
@@ -25,25 +25,6 @@
color
:
var
(
--c-texte-titre3
);
}
#section__accueil__diagnostic
aside
{
padding-top
:
0.3rem
;
text-align
:
center
;
max-width
:
30rem
;
color
:
var
(
--c-texte-titre3
);
}
#section__accueil__diagnostic
aside
img
{
width
:
32px
;
vertical-align
:
bottom
;
}
#section__accueil__diagnostic
aside
a
{
color
:
var
(
--c-texte-titre3
);
}
#section__accueil__diagnostic
aside
a
:hover
{
color
:
var
(
--gris3
);
}
/*--------------------------------------
// Page d'accueil - section carte
--------------------------------------*/
...
...
apps/crater/src/pages/diagnostic/
PageDiagnostic
Accueil.ts
→
apps/crater/src/pages/diagnostic/
CoeurPage
Accueil.ts
View file @
d0f4e857
...
...
@@ -6,39 +6,55 @@ import { EvenementNaviguer, EvenementSelectionnerTerritoire, IDS_EVENEMENTS } fr
import
baseRawCss
from
'
@lga/commun/build/composants/composants-base.css
'
;
import
{
css
,
html
,
LitElement
,
unsafeCSS
}
from
'
lit
'
;
import
{
customElement
,
property
}
from
'
lit/decorators.js
'
;
import
{
unsafeHTML
}
from
'
lit/directives/unsafe-html.js
'
;
import
{
genererLienPageDiagnostic
}
from
'
../commun/pages-utils
'
;
import
diagnosticRawCss
from
'
./diagnostic.css
'
;
@
customElement
(
'
c-page-diagnostic-accueil
'
)
export
class
PageDiagnosticAccueil
extends
LitElement
{
@
customElement
(
'
c-
coeur-
page-diagnostic-accueil
'
)
export
class
Coeur
PageDiagnosticAccueil
extends
LitElement
{
static
styles
=
[
unsafeCSS
(
baseRawCss
),
unsafeCSS
(
diagnosticRawCss
),
css
`
main {
height: var(--hauteur-totale-hors-entete);
padding-top: 5rem;
background-color: var(--c-background);
padding-top: 5rem;
margin-top: var(--hauteur-entete);
min-height: calc(100vh - var(--hauteur-entete));
}
h1 {
font-size: var(--title0);
text-align: center;
}
.bandeau {
padding: 0.5rem;
margin: 5rem auto 5rem auto;
max-width: 800px;
border: solid 1 px red;
}
.message {
padding: 0.5rem;
border-radius: 10px;
}
#message-erreur {
text-align: center;
padding: 0.2rem;
margin: auto;
margin-bottom: 5rem;
background-color: var(--c-warning-c);
border-radius: 10px;
max-width: 800px;
}
#message-erreur h1 {
#message-explicatif {
background-color: var(--bleu);
color: var(--blanc);
text-align: left;
}
#titre-message-erreur {
font-size: var(--title2);
font-weight: bold;
padding: 0.2rem;
text-align: center;
}
#recherche {
...
...
@@ -56,24 +72,31 @@ export class PageDiagnosticAccueil extends LitElement {
render
()
{
return
html
`
<main class="zone-scroll-principal">
${
unsafeHTML
(
!
this
.
afficherErreur
?
`<h1 class="text-center padding-2">Découvrez le diagnostic alimentaire de votre territoire !</h1>`
:
`<div id="message-erreur">
<h1 class="text-center padding-2">Territoire inconnu...</h1>
<p>
Il peut s'agir d'une erreur de saisie dans le nom ou le code du territoire dans l'URL, ou bien d'une indisponibilité
temporaire du serveur.
<br>Merci de vérifier votre saisie et d'essayer à nouveau dans quelques secondes ou de refaire une recherche.
<br/>Si le problème persiste, vous pouvez nous envoyer un message via le
<a href="https://resiliencealimentaire.org/formulaire-crater/" target="_blank">formulaire de contact</a>.
</p>
</div>`
)}
<h1>Découvrez le diagnostic alimentaire de votre territoire !</h1>
<div id="recherche">
<c-champ-recherche-territoire data-cy="champ-recherche-territoire"></c-champ-recherche-territoire>
</div>
${
this
.
afficherErreur
?
html
` <div class="bandeau">
<div class="message" id="message-erreur">
<div id="titre-message-erreur">Territoire inconnu...</div>
<p>
Merci de vérifier votre saisie et d'essayer à nouveau dans quelques secondes ou de refaire une recherche.
<br />Si le problème persiste, vous pouvez nous envoyer un message via le
<a href="https://resiliencealimentaire.org/formulaire-crater/" target="_blank">formulaire de contact</a>.
</p>
</div>
</div>`
:
html
` <div class="bandeau">
<div class="message" id="message-explicatif">
<p>
Un diagnostic ciblé de résilience et de durabilité du système alimentaire à l’échelon local.
<br /><br />
Disponible pour les communes, EPCI, bassins de vie, parcs naturels et nationaux, SCoT, PAT, départements, régions,
pays, parcs nationaux, PETR ou pays
</p>
</div>
</div>`
}
</main>
`
;
}
...
...
apps/crater/src/pages/diagnostic/PageDiagnostic.ts
View file @
d0f4e857
...
...
@@ -10,22 +10,17 @@ import '../../composants/diagnostic/chapitres/ChapitreTransformationDistribution
import
'
../../composants/diagnostic/chapitres/ChapitreConsommation.js
'
;
import
'
../../composants/diagnostic/chapitres/MenuNavigationSections.js
'
;
import
'
../commun/PageSablier.js
'
;
import
'
./
PageDiagnostic
Accueil.js
'
;
import
'
./
CoeurPage
Accueil.js
'
;
import
'
../../composants/structure/PiedPage.js
'
;
import
{
EvenementErreur
,
EvenementSelectionner
,
EvenementSelectionnerTerritoire
,
IDS_EVENEMENTS
}
from
'
@lga/commun/build/composants/composants-base
'
;
import
{
EvenementSelectionner
,
EvenementSelectionnerTerritoire
,
IDS_EVENEMENTS
}
from
'
@lga/commun/build/composants/composants-base
'
;
import
baseRawCss
from
'
@lga/commun/build/composants/composants-base.css
'
;
import
{
getApiBaseUrl
}
from
'
@lga/commun/build/env/config-baseurl
'
;
import
{
html
,
LitElement
,
unsafeCSS
}
from
'
lit
'
;
import
{
css
,
html
,
LitElement
,
unsafeCSS
}
from
'
lit
'
;
import
{
customElement
,
property
,
query
}
from
'
lit/decorators.js
'
;
import
{
choose
}
from
'
lit/directives/choose.js
'
;
import
{
when
}
from
'
lit/directives/when.js
'
;
import
{
unsafeHTML
}
from
'
lit/directives/unsafe-html.js
'
;
import
{
when
}
from
'
lit/directives/when.js
'
;
import
{
MenuNavigationSections
,
Section
}
from
'
../../composants/diagnostic/chapitres/MenuNavigationSections
'
;
import
{
BarreNavigationEchelleTerritoriale
}
from
'
../../composants/structure/BarreNavigationEchelleTerritoriale
'
;
...
...
@@ -41,7 +36,24 @@ import diagnosticRawCss from './diagnostic.css';
@
customElement
(
'
c-page-diagnostic
'
)
export
class
PageDiagnostic
extends
LitElement
{
static
styles
=
[
unsafeCSS
(
baseRawCss
),
unsafeCSS
(
diagnosticRawCss
)];
static
styles
=
[
unsafeCSS
(
baseRawCss
),