JS changes for Angular and CSS changes for Umami

pdb-changes.patch

diff --git a/modules/pdb_ng2/components/ng2_example_1/component.ts b/modules/pdb_ng2/components/ng2_example_1/component.ts
index f2f94f2..b379ae2 100644
--- a/modules/pdb_ng2/components/ng2_example_1/component.ts
+++ b/modules/pdb_ng2/components/ng2_example_1/component.ts
@@ -1,8 +1,8 @@
 import {Component} from '@angular/core';
 
 @Component({
-  moduleId: __moduleName,
+  //moduleId: __moduleName,
   selector: 'ng2-example-1',
-  templateUrl: 'template.html',
+  templateUrl: '/modules/contrib/pdb/modules/pdb_ng2/components/ng2_example_1/template.html',
 })
 export class Ng2Example1 {}
diff --git a/modules/pdb_ng2/components/ng2_example_2/component.ts b/modules/pdb_ng2/components/ng2_example_2/component.ts
index 7a7bea4..dc4f341 100644
--- a/modules/pdb_ng2/components/ng2_example_2/component.ts
+++ b/modules/pdb_ng2/components/ng2_example_2/component.ts
@@ -1,9 +1,9 @@
 import {Component} from "@angular/core";
 
 @Component({
-  moduleId: __moduleName,
+  // moduleId: __moduleName,
   selector: "ng2-example-2",
-  templateUrl: 'template.html'
+  templateUrl: '/modules/contrib/pdb/modules/pdb_ng2/components/ng2_example_2/template.html'
 })
 export class Ng2Example2{
   name: string = "John";
diff --git a/modules/pdb_ng2/components/ng2_todo/component.ts b/modules/pdb_ng2/components/ng2_todo/component.ts
index c7d2d39..7190144 100644
--- a/modules/pdb_ng2/components/ng2_todo/component.ts
+++ b/modules/pdb_ng2/components/ng2_todo/component.ts
@@ -2,9 +2,9 @@ import {Component, Inject} from '@angular/core';
 import {TodoStore, Todo} from './services/store';
 
 @Component({
-    moduleId: __moduleName,
+    // moduleId: __moduleName,
     selector: 'ng2-todo',
-    templateUrl: 'template.html',
+    templateUrl: '/modules/contrib/pdb/modules/pdb_ng2/components/ng2_todo/template.html',
     styleUrls: ['style.css'],
     providers: [TodoStore]
 })
diff --git a/modules/pdb_react/components/react_todo/css/index.css b/modules/pdb_react/components/react_todo/css/index.css
index f7e51e7..89e5c66 100644
--- a/modules/pdb_react/components/react_todo/css/index.css
+++ b/modules/pdb_react/components/react_todo/css/index.css
@@ -136,7 +136,7 @@ label[for='toggle-all'] {
 	bottom: 0;
 	margin: auto 0;
 	border: none; /* Mobile Safari */
-	-webkit-appearance: none;
+	/* -webkit-appearance: none; */
 	appearance: none;
 }
 
@@ -168,7 +168,6 @@ label[for='toggle-all'] {
 	top: 0;
 	right: 10px;
 	bottom: 0;
-	width: 40px;
 	height: 40px;
 	margin: auto 0;
 	font-size: 30px;
@@ -197,15 +196,15 @@ label[for='toggle-all'] {
 	margin-bottom: -1px;
 }
 
-.footer {
-	color: #777;
+.block-react-componentreact-todo .footer {
+	color: #fff;
 	padding: 10px 15px;
-	height: 20px;
+	display: inline-block;
 	text-align: center;
 	border-top: 1px solid #e6e6e6;
 }
 
-.footer:before {
+.block-react-componentreact-todo .footer:before {
 	content: '';
 	position: absolute;
 	right: 0;
@@ -223,26 +222,28 @@ label[for='toggle-all'] {
 .todo-count {
 	float: left;
 	text-align: left;
+	display: inline-block;
+	padding: 10px 15px;
 }
 
 .todo-count strong {
 	font-weight: 300;
 }
 
-.filters {
+.block-react-componentreact-todo .filters {
 	margin: 0;
-	padding: 0;
+	padding: 10px 15px;
 	list-style: none;
-	position: absolute;
 	right: 0;
 	left: 0;
+	display: inline-block;
 }
 
-.filters li {
+.block-react-componentreact-todo .filters li {
 	display: inline;
 }
 
-.filters li a {
+.block-react-componentreact-todo .filters li a {
 	color: inherit;
 	margin: 3px;
 	padding: 3px 7px;
@@ -251,11 +252,11 @@ label[for='toggle-all'] {
 	border-radius: 3px;
 }
 
-.filters li a:hover {
+.block-react-componentreact-todo .filters li a:hover {
 	border-color: rgba(175, 47, 47, 0.1);
 }
 
-.filters li a.selected {
+.block-react-componentreact-todo .filters li a.selected {
 	border-color: rgba(175, 47, 47, 0.2);
 }
 
@@ -266,6 +267,8 @@ html .clear-completed:active {
 	line-height: 20px;
 	text-decoration: none;
 	cursor: pointer;
+	display: inline-block;
+	padding: 10px 15px;
 }
 
 .clear-completed:hover {
@@ -317,11 +320,11 @@ html .clear-completed:active {
 }
 
 @media (max-width: 430px) {
-	.footer {
+	.block-react-componentreact-todo .footer {
 		height: 50px;
 	}
 
-	.filters {
+	.block-react-componentreact-todo .filters {
 		bottom: 10px;
 	}
 }

Nice! Why not post this patch to the project's issue queue https://www.drupal.org/project/issues/pdb