From 45b47eba41084a172dccb8b5c884a605da4388a5 Mon Sep 17 00:00:00 2001
From: Kerry Shetline <kerry@shetline.com>
Date: Sat, 31 Jul 2021 00:10:59 -0400
Subject: [PATCH] Make focus styling more consistent. Fix weird border problems
 caused by SCSS compilation problems.

---
 package.json                                  |  1 +
 projects/tubular-ng-widgets/package.json      |  2 +-
 .../digit-sequence-editor.directive.scss      |  1 +
 projects/tubular-ng-widgets/src/styles.scss   | 30 ++++++++++++++-----
 4 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 1cdd641..ff601da 100644
--- a/package.json
+++ b/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'",
diff --git a/projects/tubular-ng-widgets/package.json b/projects/tubular-ng-widgets/package.json
index beed2a7..860ed0a 100644
--- a/projects/tubular-ng-widgets/package.json
+++ b/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",
diff --git a/projects/tubular-ng-widgets/src/lib/digit-sequence-editor/digit-sequence-editor.directive.scss b/projects/tubular-ng-widgets/src/lib/digit-sequence-editor/digit-sequence-editor.directive.scss
index c5f7fb5..9dad422 100644
--- a/projects/tubular-ng-widgets/src/lib/digit-sequence-editor/digit-sequence-editor.directive.scss
+++ b/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;
 }
 
diff --git a/projects/tubular-ng-widgets/src/styles.scss b/projects/tubular-ng-widgets/src/styles.scss
index e97a657..7b4b768 100644
--- a/projects/tubular-ng-widgets/src/styles.scss
+++ b/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 {