Redo of focus style handling. Redo of animation state handling.

Author: kshetline

angular.json

@@ -72,8 +72,8 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kb",
-                  "maximumError": "1mb"
+                  "maximumWarning": "1.5mb",
+                  "maximumError": "2mb"
                 },
                 {
                   "type": "anyComponentStyle",

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

@@ -17,9 +17,12 @@
     </span>
   </div>
   <div #wrapper class="tbw-dse-wrapper"
+      [class.tbw-normal-background]="!disabled && !viewOnly"
+      [class.tbw-disabled-background]="disabled"
+      [class.tbw-view-only-background]="viewOnly"
       [class.tbw-dse-no-focus]="disabled"
-      [class.tbw-dse-explicit-focus-outline]="addFocusOutline && hasFocus && !floating"
-      [class.tbw-dse-clear-focus-outline]="addFocusOutline && !hasFocus"
+      [class.tbw-dse-explicit-focus-outline]="hasFocus && !floating"
+      [class.tbw-dse-clear-focus-outline]="!hasFocus"
       [class.tbw-dse-dse-rtl]="rtl"
       [class.tbw-dse-floating]="floating"
       [tabindex]="inputOff || hasHiddenInput ? '-1' : tabindex"
@@ -29,11 +32,11 @@
       (keydown)="onKeyDown($event)" (keyup)="onKeyUp()" (keypress)="onKeyPress($event)"
       (focus)="onFocus(true, $event)" (blur)="onFocus(false, $event)"
       [ngClass]="getStaticBackgroundColor()"
-      [@displayState]="displayState"
       (mouseleave)="onMouseLeave()"
       (mouseup)="onMouseUp($event)"
       (touchmove)="onTouchMove($event)"
       (touchend)="onTouchEnd($event)">
+    <div class="tbw-dse-state-indicator" [@displayState]="displayState">&nbsp;</div>
     <div *ngFor="let item of displayItems"
         class="tbw-dse-digit dse-item-{{item.index}}"
         [ngClass]="(getClassForItem(item) || '') + ' ' + (getColorForItem(item) || '')"

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

@@ -64,7 +64,6 @@ const NO_SELECTION = -1;
 const SPIN_UP      = -2;
 const SPIN_DOWN    = -3;
 
-const addFocusOutline = isEdge() || isIOS();
 const alternateClipboard = navigator.clipboard == null || isAndroid() || isChromeOS() || isIOS() || isSamsung();
 const checkForRepeatedKeyTimestamps = isIOS();
 const disableContentEditable = isEdge();
@@ -147,12 +146,10 @@ class DynamicColor {
 
 export const BACKGROUND_ANIMATIONS = trigger('displayState', [
   state('error',     style({ backgroundColor: new DynamicColor(ERROR_BACKGROUND, '#F67') as unknown as string })),
-  state('normal',    style({ backgroundColor: new DynamicColor(NORMAL_BACKGROUND, 'white') as unknown as string })),
-  state('refresh',   style({ backgroundColor: 'gray' })),
+  state('normal',    style({ backgroundColor: 'transparent' })),
+  state('refresh',   style({ backgroundColor: 'rgba(0, 0, 0, 0.01)' })),
   state('confirm',   style({ backgroundColor: new DynamicColor(CONFIRM_BACKGROUND, '#6C6') as unknown as string })),
   state('warning',   style({ backgroundColor: new DynamicColor(WARNING_BACKGROUND, '#FC6') as unknown as string })),
-  state('view-only', style({ backgroundColor: new DynamicColor(VIEW_ONLY_BACKGROUND, 'black') as unknown as string })),
-  state('disabled',  style({ backgroundColor: new DynamicColor(DISABLED_BACKGROUND, '#CCC') as unknown as string })),
   transition('normal => error',   animate(FLASH_DURATION)),
   transition('error => normal',   animate(FLASH_DURATION)),
   transition('normal => confirm', animate(FLASH_DURATION)),
@@ -181,7 +178,6 @@ export abstract class DigitSequenceEditorDirective<T> implements
     AfterViewInit, ControlValueAccessor, OnInit, OnDestroy, Validator {
   // Template accessibility
 
-  addFocusOutline = addFocusOutline;
   disableContentEditable = disableContentEditable;
   htmlEscape = htmlEscape;
   SPIN_DOWN = SPIN_DOWN;
@@ -490,10 +486,7 @@ export abstract class DigitSequenceEditorDirective<T> implements
     if (isString(newValue))
       newValue = toBoolean(newValue, false, true);
 
-    if (this._floating !== newValue) {
-      this._floating = newValue;
-      this.adjustState();
-    }
+    this._floating = newValue;
   }
 
   get tabindex(): string { return this._tabindex; }
@@ -1192,11 +1185,6 @@ export abstract class DigitSequenceEditorDirective<T> implements
         this.lostFocus();
       }
     }
-
-    if (this.hiddenInput && !this.disabled)
-      this.wrapper.style.outline = getCssValue(this.hiddenInput, 'outline');
-    else if (addFocusOutline)
-      this.wrapper.style.outline = (newFocus && !this.disabled ? 'rgb(59, 153, 252) solid 1px' : 'black none 0px');
   }
 
   protected gainedFocus(): void {}
@@ -1537,11 +1525,8 @@ export abstract class DigitSequenceEditorDirective<T> implements
 
     if (this.darkMode !== lastMode) {
       DynamicColor.update(ERROR_BACKGROUND, this.darkMode);
-      DynamicColor.update(NORMAL_BACKGROUND, this.darkMode);
       DynamicColor.update(CONFIRM_BACKGROUND, this.darkMode);
       DynamicColor.update(WARNING_BACKGROUND, this.darkMode);
-      DynamicColor.update(VIEW_ONLY_BACKGROUND, this.darkMode);
-      DynamicColor.update(DISABLED_BACKGROUND, this.darkMode);
 
       const currentState = this.displayState;
 
@@ -1553,8 +1538,6 @@ export abstract class DigitSequenceEditorDirective<T> implements
   }
 
   protected adjustState(): void {
-    this.displayState = (this._viewOnly ? 'view-only' : (this._disabled ? 'disabled' : 'normal'));
-
     if (this.hiddenInput) {
       const disabled = (this._floating || this._disabled || this._viewOnly);
       this.hiddenInput.setAttribute('tabindex', this.disabled ? '-1' : this.tabindex);

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

@@ -29,8 +29,11 @@
 // DigitSequenceEditor
 
 .tbw-dse-palette {
+  border-radius: max(4px, 0.2em);
   display: inline-flex;
   flex-direction: column;
+  margin: 2px;
+  overflow: visible;
   touch-action: manipulation;
 
   &.tbw-dse-floating {
@@ -49,7 +52,6 @@
   display: flex;
   height: 0.9em;
   justify-content: flex-end;
-  margin: 2px 2px 0 2px;
   overflow: hidden;
   padding-right: 0.25em;
   position: relative;
@@ -83,7 +85,6 @@
   font-size: max(14px, 0.6em);
   height: 1.8em;
   justify-content: center;
-  margin: 0 2px 2px 2px;
   overflow: hidden;
   padding: 0 0.25em;
   position: relative;
@@ -149,28 +150,29 @@
 
 .tbw-dse-wrapper {
   align-items: baseline;
-  background-color: white;
-  border: #A6A6A6 solid max(1px, 0.0836em) !important;
+  border: #A6A6A6 solid max(1px, 0.0836em);
   border-radius: max(4px, 0.2em);
   caret-color: transparent;
   cursor: default;
   direction: ltr;
   display: inline-flex;
-  margin: 2px;
   overflow: hidden;
   padding: max(1px, 0.0836em) 0.2em;
   position: relative;
   touch-action: manipulation;
   user-select: none;
 
+  &.tbw-dse-explicit-focus-outline {
+    box-shadow: 0 0 2px 2px #3B99FC;
+    outline: none;
+  }
+
   &.tbw-dse-floating {
     border-bottom: 0 !important;
     border-radius: 0 !important;
     border-top: 0 !important;
     box-shadow: none !important;
     outline: none !important;
-    margin-bottom: 0;
-    margin-top: 0;
 
     &:focus {
       border-color: #A6A6A6 !important;
@@ -181,19 +183,22 @@
   }
 }
 
-.tbw-dse-focus-indicator {
+.tbw-dse-state-indicator, .tbw-dse-focus-indicator{
   bottom: 0;
-  box-sizing: border-box;
-  border: 2px solid transparent;
   background-color: transparent;
   left: 0;
   pointer-events: none;
   position: absolute;
   right: 0;
   top: 0;
+}
+
+.tbw-dse-focus-indicator {
+  border: 2px solid transparent;
+  box-sizing: border-box;
 
   &.tbw-dse-show-focus {
-    border: 2px solid #007AFF;
+    border-color: #007AFF;
   }
 }
 
@@ -266,11 +271,8 @@
   font-size: 0.8em;
 }
 
-.tbw-dse-explicit-focus-outline {
-  outline: #3B99FC solid 1px;
-}
-
 .tbw-dse-clear-focus-outline {
+  box-shadow: none;
   outline: 0;
 }
 
@@ -290,10 +292,6 @@
 }
 
 .tbw-dark-mode {
-  .tbw-dse-wrapper {
-    background-color: #333;
-  }
-
   .tbw-dse-palette.tbw-dse-floating {
     filter: drop-shadow(4px 4px 2px black);
   }
@@ -311,10 +309,16 @@
     background-color: #444;
   }
 
-  .tbw-dse-wrapper {
+  .tbw-dse-wrapper:not(.tbw-dse-explicit-focus-outline) {
     border-color: #A6A6A6;
   }
 
+  .tbw-dse-wrapper.tbw-dse-explicit-focus-outline {
+    border-color: #7E97B2;
+    box-shadow: 0 0 2px 2px #2F7ACA;
+    outline: none;
+  }
+
   .tbw-dse-divider {
     background-color: #A6A6A6;
   }
@@ -323,10 +327,6 @@
     color: #C00 !important;
   }
 
-  .tbw-dse-explicit-focus-outline {
-    outline-color: #3B99FC;
-  }
-
   .tbw-disabled-arrow-color { color: #060; stroke: #060; }
   .tbw-disabled-background { background-color: #444; fill: #444; }
   .tbw-disabled-text { color: #777; stroke: #777; }