search

zonemaster / zonemaster-gui

The Zonemaster GUI - part of the Zonemaster project
Other
14 stars 23 forks source link

Remove randomization of attributes in Angular #400

Closed matsduf closed 1 year ago

matsduf commented 1 year ago

Purpose

By default attributes generated by Angular randomized. If you want to create a customized version of GUI with other CSS files, then that adds extra complexity.

This PR removes the randomization.

Changes

It changes the settings for the components.

How to test this PR

This should not change anything.

hannaeko commented 1 year ago

I cached a few issue, where adjustment where needed in some component style and other css rules that could be affecting more elements than they should.

I suggest with encapsulate rule in a more "manual" way to ensure that style that is not supposed to affect other components don't.

Here is a patch that fixes those issues (apparently I can't attached a diff file to a comment, sorry for the long comment) :

diff --git a/src/app/components/alert/alert.component.css b/src/app/components/alert/alert.component.css
index 7c79ea7..565c13d 100644
--- a/src/app/components/alert/alert.component.css
+++ b/src/app/components/alert/alert.component.css
@@ -7,7 +7,7 @@
   padding-top: 20px;
 }

-:host {
+.container.alert {
   position: sticky;
   top: 0;
   z-index: 1020;
diff --git a/src/app/components/alert/alert.component.html b/src/app/components/alert/alert.component.html
index 4aaa210..af7e372 100644
--- a/src/app/components/alert/alert.component.html
+++ b/src/app/components/alert/alert.component.html
@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container alert">
   <div class="row alert-area" [ngStyle]="{'margin-top': navHeight + 'px'}">
     <div *ngFor="let alert of alerts" class="{{ cssClass(alert) }} alert-dismissible" role="alert">
       {{alert.message}}
diff --git a/src/app/components/domain/domain.component.css b/src/app/components/domain/domain.component.css
index 91372a3..1d2a736 100644
--- a/src/app/components/domain/domain.component.css
+++ b/src/app/components/domain/domain.component.css
@@ -2,6 +2,6 @@ aside.about article {
     display: flex;
 }

-aside {
+aside.about {
     padding: 0;
 }
diff --git a/src/app/components/faq/faq.component.css b/src/app/components/faq/faq.component.css
index 25ec887..b9d4d9d 100644
--- a/src/app/components/faq/faq.component.css
+++ b/src/app/components/faq/faq.component.css
@@ -1,4 +1,4 @@
-:host ::ng-deep a[name^=q] {
+.faq a[name^=q] {
   position: relative;
   top: -90px;
 }
diff --git a/src/app/components/form/form.component.css b/src/app/components/form/form.component.css
index d394775..e970d7e 100644
--- a/src/app/components/form/form.component.css
+++ b/src/app/components/form/form.component.css
@@ -4,16 +4,16 @@
   border-radius:3px
 }

-button.launch {
+.domain button.launch {
   background-color: #FF5A5F;
   height: 64px;
 }
-button.launch:hover {
+.domain button.launch:hover {
   background-color: #ff3c3a;
 }

 /* The switch - the box around the slider */
-.switch-input-container {
+.domain .switch-input-container {
   display: flex;
   align-items: center;
 }
@@ -30,24 +30,24 @@ button.launch:hover {
   margin-bottom: 1rem;
 }

-fieldset fieldset legend {
+.domain fieldset fieldset legend {
   font-size: 1em;
   margin-bottom: 0;
   font-weight: normal;
 }

-form .protocol {
+.domain form .protocol {
   padding-top: 0.375rem;
   display: flex;
   flex-wrap: nowrap;
   white-space: nowrap;
 }

-.switch-input-container label {
+.domain .switch-input-container label {
   margin: 0;
 }

-button.switch-toggle {
+.domain button.switch-toggle {
   border: none;
   width: 2em;
   background-color: #ccc;
@@ -63,16 +63,16 @@ button.switch-toggle {
   cursor: pointer;
 }

-button.switch-toggle.enabled {
+.domain button.switch-toggle.enabled {
   background-position: right center;
   background-color: #2196f3;
 }

-.advanced {
+.domain .advanced {
   text-align: left;
 }

-.is-invalid label {
+.domain .is-invalid label {
   color: #b51222!important;
 }

@@ -92,7 +92,7 @@ button.switch-toggle.enabled {
   --bs-gutter-x: 0.5rem;
 }

-.reset-form {
+.domain .reset-form {
   position: absolute;
   right: 0;
   top: 15%;
@@ -100,23 +100,23 @@ button.switch-toggle.enabled {
   right: 0.5rem;
 }

-.reset-form button:not(:disabled):hover {
+.domain .reset-form button:not(:disabled):hover {
   opacity: 1;
 }

-.reset-form button {
+.domain .reset-form button {
   border: none;
   opacity: 0.5;
 }

-.grey {
+.domain .grey {
   color: grey;
 }

-.domain-input-container {
+.domain .domain-input-container {
   position: relative;
 }
-.progress-value {
+.domain .progress-value {
   display: block;
   color: #000;
   position: absolute;
@@ -124,19 +124,19 @@ button.switch-toggle.enabled {
   font-size: 2rem;
 }

-.progress-result {
+.domain .progress-result {
   width: calc(100% - var(--bs-gutter-x));
   position: absolute;
   z-index: 20;
   top: 0;
 }

-.checkboxForm {
+.domain .checkboxForm {
   width: inherit;
 }

 @media(max-width:767px){
-  fieldset .form-col:not(:first-child) {
+  .domain fieldset .form-col:not(:first-child) {
     margin-top: 0.5rem;
   }
 }
diff --git a/src/app/components/navigation/navigation.component.css b/src/app/components/navigation/navigation.component.css
index 002bf41..950b28b 100644
--- a/src/app/components/navigation/navigation.component.css
+++ b/src/app/components/navigation/navigation.component.css
@@ -1,4 +1,4 @@
-nav {
+.main-navigation nav {
   height: 80px;
   box-shadow: 0px 0px 5px rgba(0,0,0,0.75);
   -webkit-transition: 0.2s linear height;
@@ -7,61 +7,61 @@ nav {
   transition: 0.2s linear height;
 }

-.logo {
+.main-navigation .logo {
   height: 70px;
   image-rendering: -webkit-optimize-contrast;
   transition: 0.2s linear height;
   padding: 0.5rem;
 }

-.navbar-brand div {
+.main-navigation .navbar-brand div {
   height: 100%;
 }
-.lang {
+.main-navigation .lang {
   display: inline-flex;
   align-items: center;
 }
-.lang .icon {
+.main-navigation .lang .icon {
   width: 27px;
   line-height: 27px;
   margin: 0 5px;
   font-size: 20pt;
 }
-#languageSelection{
+#languageSelection {
   width: auto;
 }
-.github {
+.main-navigation .github {
   height: 100%;
 }

 @media(min-width:991px) {
-  .shrink {
+  .main-navigation .shrink {
     height: 60px;
   }

-  .shrink .github {
+  .main-navigation .shrink .github {
     width: 60px;
     height: 60px;
   }
 }

 @media(max-width: 991px) {
-  .logo {
+  .main-navigation .logo {
     height: 55px;
   }

-  nav {
+  .main-navigation nav {
     height: auto;
   }

-  .lang .icon {
+  .main-navigation .lang .icon {
     display: none;
   }
 }

 @media(max-width: 1300px) {
-  .github {
+  .main-navigation .github {
     display: none
   }
 }
diff --git a/src/app/components/navigation/navigation.component.html b/src/app/components/navigation/navigation.component.html
index 21f8589..5cfe3b4 100644
--- a/src/app/components/navigation/navigation.component.html
+++ b/src/app/components/navigation/navigation.component.html
@@ -1,4 +1,4 @@
-<nav class="navbar navbar-light bg-light fixed-top navbar-expand-lg" [ngClass]="{'shrink': isShrunk}" #navView>
+<nav class="main-navigation navbar navbar-light bg-light fixed-top navbar-expand-lg" [ngClass]="{'shrink': isShrunk}" #navView>
   <a href="https://github.com/zonemaster/zonemaster/" class="github-corner d-none d-lg-block d-xl-block" aria-label="View source on Github">
     <svg [ngClass]="{'shrink': isShrunk}" class="github" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

diff --git a/src/app/components/result/result.component.css b/src/app/components/result/result.component.css
index a6cecfd..d7bf356 100644
--- a/src/app/components/result/result.component.css
+++ b/src/app/components/result/result.component.css
@@ -1,10 +1,10 @@
-article header div > i.fa {
+.result article header div > i.fa {
   margin-right: 3rem;
   margin-top: 0.1rem;
   width: 1rem;
 }

-article h4 {
+.result article h4 {
   font-size: 1rem;
   display: inline-block;
   margin: 0;
@@ -23,27 +23,27 @@ article h4 {
   --result-critical-bg: var(--result-error-color);
 }

-article header.info {
+.result article header.info {
   color: var(--result-info-color);
 }

-article header.notice {
+.result article header.notice {
   color: var(--result-notice-color);
 }

-article header.warning {
+.result article header.warning {
   color: var(--result-warning-color);
 }

-article header.error {
+.result article header.error {
   color: var(--result-error-color);
 }

-article header.critical {
+.result article header.critical {
   color: var(--result-critical-color);
 }

-article h4 i {
+.result article h4 i {
   width: 1rem;
   display: inline-block;
   text-align: center;
@@ -51,17 +51,17 @@ article h4 i {
   margin-right: 0.3rem;
 }

-article header  {
+.result article header {
   display: flex;
   align-items: baseline;
 }

-article header div {
+.result article header div {
   display: flex;
   cursor: pointer;
   margin: 0.25rem 0;
 }
-article header .test-case-id {
+.result article header .test-case-id {
   display: inline-block;
   background-color: #d3eeff;
   color: #555454;
@@ -71,7 +71,7 @@ article header .test-case-id {
   white-space: nowrap;
 }

-article ul li .level {
+.result article ul li .level {
   display: inline;
   padding: 0.2em 0.3em;
   border-radius: 0.3em;
@@ -80,67 +80,67 @@ article ul li .level {
   text-transform: uppercase;
 }

-.filters .active.all {
+.result .filters .active.all {
   background-color: #919191;
 }

-.badge.info,
-.filters .active.info,
-article ul li .level.info {
+.result .badge.info,
+.result .filters .active.info,
+.result article ul li .level.info {
   background: var(--result-info-bg);
   color: white;
 }

-.badge.notice,
-.filters .active.notice,
-article ul li .level.notice {
+.result .badge.notice,
+.result .filters .active.notice,
+.result article ul li .level.notice {
   background: var(--result-notice-bg);
   color: white;
 }

-.badge.warning,
-.filters .active.warning,
+.result .badge.warning,
+.result .filters .active.warning,
 article ul li .level.warning {
   background: var(--result-warning-bg);
   color: black;
 }

-.badge.error,
-.filters .active.error,
-article ul li .level.error {
+.result .badge.error,
+.result .filters .active.error,
+.result article ul li .level.error {
   background: var(--result-error-bg);;
   color: white;
 }

-.badge.critical,
-.filters .active.critical,
-article ul li .level.critical {
+.result .badge.critical,
+.result .filters .active.critical,
+.result article ul li .level.critical {
   background: var(--result-critical-bg);;
   color: white;
 }

-article li {
+.result article li {
   list-style: none;
   display: flex;
   margin-bottom: .2em;
 }

-article li p {
+.result article li p {
   word-break: normal;
   overflow-wrap: anywhere;
   margin: 0;
 }

-article ul {
+.result article ul {
   padding-left: 4em;
   margin-bottom: .8em;
 }

-.collapsed {
+.result .collapsed {
   display: none!important;
 }

-article h3 {
+.result article h3 {
   display: flex;
   align-items: center;
   font-size: 1.4rem;
@@ -148,31 +148,31 @@ article h3 {
   margin-bottom: 0;
 }

-article h3 div.badge:first-of-type {
+.result article h3 div.badge:first-of-type {
   margin-left: 1rem;
 }

-article h3 .badge {
+.result article h3 .badge {
   margin-right: 0.5rem;
   font-size: .8rem;
 }

-article h3 .badge i {
+.result article h3 .badge i {
   width: 1em;
 }

-article.expanded h3 {
+.result article.expanded h3 {
   margin-bottom: 0.5rem;
 }

-article h3 i.caret {
+.result article h3 i.caret {
   transform: rotate(0), translate(0, 0);
   transition: 0.1s transform;
   display: inline-block;
   width: 1em;
 }

-article.expanded h3 i.caret {
+.result article.expanded h3 i.caret {
   transform: rotate(90deg) translate(0.3em, 0.15em);
 }

@@ -186,134 +186,137 @@ article.expanded h3 i.caret {
   width: 100%;
 }

-.modal-title {
+.result .modal-title {
   color: #000;
 }

-.vertical-align {
+.result .vertical-align {
   display: flex;
   align-items: center;
 }

-.search {
+.result .search {
   flex: 1;
   min-width: 300px;
 }

-.nav-link {
+.result .nav-link {
   cursor: pointer;
   color: inherit;
 }

-.dropdown-body {
+.result .dropdown-body {
     position: relative;
     padding: 1rem;
     white-space: nowrap;
 }

-button.share + .dropdown-menu .dropdown-body {
+.result button.share + .dropdown-menu .dropdown-body {
     min-width: calc(min(420px, 100vw - 2rem));
     display: flex;
 }

-button.btn-clipboard:hover {
+.result button.btn-clipboard:hover {
     border: 1px solid #cdc7c2;
 }

-button.btn-clipboard > i.fa-check {
+.result button.btn-clipboard > i.fa-check {
     color: #157347;
 }

-button.btn-clipboard > i.fa-remove {
+.result button.btn-clipboard > i.fa-remove {
     color: #bb2d3b;
 }

-.actions-btn {
+.result .actions-btn {
   flex-grow: 1;
   display: flex;
   justify-content: flex-end;
 }

-.filters {
+.result .filters {
   display: flex;
   flex-wrap: wrap;
 }

-.filters > * {
+.result .filters > * {
   margin-top: 1rem;
 }

 /* TODO: check if needed */
-.filters a {
+.result .filters a {
   margin: 0 0.125rem;
   border: 0;
 }

-.export, .share, .settings {
+.result .export, .share, .settings {
   margin-left: 0.25rem;
 }

-.history > i, .export > i, .share > i, .settings > i {
+.result .history > i,
+.result .export > i,
+.result .share > i,
+.result .settings > i {
   margin-right: 0.25rem;
 }

 @media(max-width:767px){
-  .result-header {
+  .result .result-header {
     width: 100%;
   }

-  .result .module-name {
+  .result .result .module-name {
     display: none;
   }

-  .result section .entry div.severity {
+  .result .result section .entry div.severity {
     min-width: 30%;
   }

-  .result section > div {
+  .result .result section > div {
     padding-left: 20px;
   }

-  .actions-btn > div {
+  .result .actions-btn > div {
     width: 100%;
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
   }

-  .actions-btn > div > * {
+  .result .actions-btn > div > * {
     flex-grow: 1;
   }

-  .actions-btn > div > div {
+  .result .actions-btn > div > div {
     display: flex!important;
   }

-  .actions-btn > div > div > button {
+  .result .actions-btn > div > div > button {
     flex-grow: 1;
   }

-  article header {
+  .result article header {
     flex-direction: column;
   }

-  article header .test-case-id {
+  .result article header .test-case-id {
     margin-left: 1.2rem;
     margin-bottom: .75rem;
   }

-  article header div > i.fa {
+  .result article header div > i.fa {
     margin-right: 1.5rem;
   }

-  article ul {
+  .result article ul {
     padding-left: 1.2em;
   }
 }

 @media(max-width:991px) {
-  .filters > ul {
+  .result .filters > ul {
     flex-grow: 1;
     display: flex;
     flex-wrap: wrap;
matsduf commented 1 year ago

If you make a zip file it should work to attach it. -- But I think I remade correctly.

hannaeko commented 1 year ago

Forgot one.

diff --git a/src/app/app.component.css b/src/app/app.component.css
index 18b693b..58e4d84 100644
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -1,4 +1,4 @@
-:host {
+app-root {
     min-height: 100vh;
     display: flex;
     flex-direction: column;
matsduf commented 1 year ago

Adds that patch too.

hannaeko commented 1 year ago

And this is to fix a couple mistakes I have made in the first patch. This should be it (and should resolve the test errors).

diff --git a/src/app/components/alert/alert.component.css b/src/app/components/alert/alert.component.css
index 565c13d..82d9c21 100644
--- a/src/app/components/alert/alert.component.css
+++ b/src/app/components/alert/alert.component.css
@@ -7,7 +7,7 @@
   padding-top: 20px;
 }

-.container.alert {
+app-alert {
   position: sticky;
   top: 0;
   z-index: 1020;
diff --git a/src/app/components/alert/alert.component.html b/src/app/components/alert/alert.component.html
index af7e372..4aaa210 100644
--- a/src/app/components/alert/alert.component.html
+++ b/src/app/components/alert/alert.component.html
@@ -1,4 +1,4 @@
-<div class="container alert">
+<div class="container">
   <div class="row alert-area" [ngStyle]="{'margin-top': navHeight + 'px'}">
     <div *ngFor="let alert of alerts" class="{{ cssClass(alert) }} alert-dismissible" role="alert">
       {{alert.message}}
diff --git a/src/app/components/navigation/navigation.component.css b/src/app/components/navigation/navigation.component.css
index 950b28b..711d3ad 100644
--- a/src/app/components/navigation/navigation.component.css
+++ b/src/app/components/navigation/navigation.component.css
@@ -1,4 +1,4 @@
-.main-navigation nav {
+app-navigation nav {
   height: 80px;
   box-shadow: 0px 0px 5px rgba(0,0,0,0.75);
   -webkit-transition: 0.2s linear height;
@@ -7,21 +7,21 @@
   transition: 0.2s linear height;
 }

-.main-navigation .logo {
+app-navigation .logo {
   height: 70px;
   image-rendering: -webkit-optimize-contrast;
   transition: 0.2s linear height;
   padding: 0.5rem;
 }

-.main-navigation .navbar-brand div {
+app-navigation .navbar-brand div {
   height: 100%;
 }
-.main-navigation .lang {
+app-navigation .lang {
   display: inline-flex;
   align-items: center;
 }
-.main-navigation .lang .icon {
+app-navigation .lang .icon {
   width: 27px;
   line-height: 27px;
   margin: 0 5px;
@@ -30,38 +30,38 @@
 #languageSelection {
   width: auto;
 }
-.main-navigation .github {
+app-navigation .github {
   height: 100%;
 }

 @media(min-width:991px) {
-  .main-navigation .shrink {
+  app-navigation .shrink {
     height: 60px;
   }

-  .main-navigation .shrink .github {
+  app-navigation .shrink .github {
     width: 60px;
     height: 60px;
   }
 }

 @media(max-width: 991px) {
-  .main-navigation .logo {
+  app-navigation .logo {
     height: 55px;
   }

-  .main-navigation nav {
+  app-navigation nav {
     height: auto;
   }

-  .main-navigation .lang .icon {
+  app-navigation .lang .icon {
     display: none;
   }
 }

 @media(max-width: 1300px) {
-  .main-navigation .github {
+  app-navigation .github {
     display: none
   }
 }
diff --git a/src/app/components/navigation/navigation.component.html b/src/app/components/navigation/navigation.component.html
index 5cfe3b4..21f8589 100644
--- a/src/app/components/navigation/navigation.component.html
+++ b/src/app/components/navigation/navigation.component.html
@@ -1,4 +1,4 @@
-<nav class="main-navigation navbar navbar-light bg-light fixed-top navbar-expand-lg" [ngClass]="{'shrink': isShrunk}" #navView>
+<nav class="navbar navbar-light bg-light fixed-top navbar-expand-lg" [ngClass]="{'shrink': isShrunk}" #navView>
   <a href="https://github.com/zonemaster/zonemaster/" class="github-corner d-none d-lg-block d-xl-block" aria-label="View source on Github">
     <svg [ngClass]="{'shrink': isShrunk}" class="github" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
matsduf commented 1 year ago

You have provided three patches. Applying patch 1 and 2 worked. When I tried to apply patch 3 I got a failure.

Should patch 3 replace some other patch? If you could provide the patches in a zip file it might help me. And tell me which commit I should apply the patches on.

hannaeko commented 1 year ago

here is the patch in a zip file, I have regenerated from the last commit of you branch, but it is still the same as before. It does not replace a previous patch, it should be apply on the last commit (I tried and did not have any issue :thinking: )

patch.zip

matsduf commented 1 year ago

here is the patch in a zip file, I have regenerated from the last commit of you branch, but it is still the same as before. It does not replace a previous patch, it should be apply on the last commit (I tried and did not have any issue 🤔 )

Thanks! Now the patch worked. I compared, and for some reason there was a missing end of line when I created it from the comment text.

matsduf commented 1 year ago

Both @blacksponge and I have been involved in this PR. -- Could @marc-vanderwal, @mattias-p, @tgreenx or @pnax review this?

marc-vanderwal commented 1 year ago

I am not very familiar with Angular, but the code looks good to me.

matsduf commented 1 year ago

@blacksponge, I had to resolve a conflict due to new changes. Can you verify that my resolution is correct?

matsduf commented 1 year ago

@blacksponge, can you check this #400?

ghost commented 1 year ago

v2023.1 release testing

When using the browser's developer tools I can see that there is no more extra attributes such as _ngcontent-gsn-c54. Reference that was useful to understand the purpose of the PR: https://angular.io/guide/view-encapsulation