Make focus styling more consistent. Fix weird border problems caused by SCSS compilation problems.

Author: kshetline

package.json

@@ -6,6 +6,7 @@
     "prepublishOnly": "npm run build",
     "start": "ng serve",
     "build": "ng build && sass ./projects/tubular-ng-widgets/src/styles.scss ./dist/tubular-ng-widgets/assets/styles.css",
+    "build:demo": "ng build ng-widgets-showcase",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
     "lint": "eslint 'projects/**/src/**/*.ts'",

projects/tubular-ng-widgets/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tubular/ng-widgets",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "peerDependencies": {
     "@angular/common": "^12.1.3",
     "@angular/core": "^12.1.3",

projects/tubular-ng-widgets/src/lib/digit-sequence-editor/digit-sequence-editor.directive.scss

@@ -26,6 +26,7 @@
   overflow: hidden;
   position: relative;
   touch-action: manipulation;
+  user-select: none;
   white-space: pre;
 }
 

projects/tubular-ng-widgets/src/styles.scss

@@ -47,8 +47,12 @@
   align-items: center;
   background-color: #F4F4F4;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23a6a6a6' fill-opacity='1' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
-  border: #A6A6A6 solid max(1px, 0.0836em);
-  border-radius: max(4px, 0.2em) max(4px, 0.2em) 0 0;  cursor: grab;
+  // border: solid max(1px, 0.0836em) #A6A6A6; // For some reason, SCSS compilation or minimization is losing parts of shorthand borders.
+  border-color: #A6A6A6;
+  border-style: solid;
+  border-width: max(1px, 0.0836em);
+  border-radius: max(4px, 0.2em) max(4px, 0.2em) 0 0;
+  cursor: grab;
   display: flex;
   height: 0.9em;
   justify-content: flex-end;
@@ -61,7 +65,7 @@
 
 .tbw-dse-closer {
   background-color: white;
-  border: #A6A6A6 solid 1px;
+  border: solid 1px #A6A6A6;
   cursor: pointer;
   display: inline-block;
   height: 0.6em;
@@ -79,7 +83,10 @@
 
 .tbw-dse-footer {
   background-color: #F4F4F4;
-  border: #A6A6A6 solid max(1px, 0.0836em);
+  // border: solid max(1px, 0.0836em) #A6A6A6; // For some reason, SCSS compilation or minimization is losing parts of shorthand borders.
+  border-color: #A6A6A6;
+  border-style: solid;
+  border-width: max(1px, 0.0836em);
   border-radius: 0 0 max(4px, 0.2em) max(4px, 0.2em);
   display: flex;
   font-size: max(14px, 0.6em);
@@ -92,7 +99,10 @@
 
   .tbw-dse-button {
     align-items: center;
-    border: #A6A6A6 solid max(1px, 0.0418em);
+    // border: solid max(1px,0.0418em) #A6A6A6; // For some reason, SCSS compilation or minimization is losing parts of shorthand borders.
+    border-color: #A6A6A6;
+    border-style: solid;
+    border-width: max(1px, 0.0418em);
     border-radius: max(2px, 0.1em);
     box-sizing: border-box;
     cursor: pointer;
@@ -150,7 +160,10 @@
 
 .tbw-dse-wrapper {
   align-items: baseline;
-  border: #A6A6A6 solid max(1px, 0.0836em);
+  // border: solid max(1px, 0.0836em) #A6A6A6; // For some reason, SCSS compilation or minimization is losing parts of shorthand borders.
+  border-color: #A6A6A6;
+  border-style: solid;
+  border-width: max(1px, 0.0836em);
   border-radius: max(4px, 0.2em);
   caret-color: transparent;
   cursor: default;
@@ -298,7 +311,10 @@
 
   .tbw-dse-header {
     background-color: #333;
-    border: #A6A6A6 solid max(1px, 0.0836em);
+    // border: solid max(1px, 0.0836em) #A6A6A6; // For some reason, SCSS compilation or minimization is losing parts of shorthand borders.
+    border-color: #A6A6A6;
+    border-style: solid;
+    border-width: max(1px, 0.0836em);
   }
 
   .tbw-dse-closer {