don't show border on readonly/disabled fields

Author: Cynthion

.documentation/backlog.md

@@ -22,7 +22,7 @@ Improvements:
 - rename FormDirective to NgxFormidableFormDirective. (no naming clash with Angular)
 - in tokens, use var(--formidable-...) instead of $formidable...?
 - keyboard-navigation: skip disabled/readonly options
-- don't show field (group) focus border when field is readonly or disabled
+- don't make fields tabbable when readonly/disabled
 
 # Bugs:
 

projects/ngx-formidable/src/lib/components/field-option/field-option.component.scss

@@ -3,7 +3,7 @@
 :host {
   display: block;
 
-  &:not(.disabled):not(.readonly) {
+  &:not(.readonly):not(.disabled) {
     &.selected {
       @include field-option-selected;
     }

projects/ngx-formidable/src/lib/styles/mixins/_forms.scss

@@ -168,8 +168,11 @@
   width: 100%;
   position: relative;
 
+  &[readonly] {
+    pointer-events: auto;
+  }
+
   &[disabled] {
-    cursor: not-allowed;
     pointer-events: none;
     user-select: none;
   }
@@ -182,10 +185,13 @@
     @include disabled-colors;
   }
 
-  &:focus,
-  &.focused,
-  &:focus-visible {
-    @include focused-colors;
+  // use native [readonly] and [disabled] attributes
+  &:not([readonly]):not([disabled]) {
+    &:focus,
+    &.focused,
+    &:focus-visible {
+      @include focused-colors;
+    }
   }
 }
 
@@ -203,10 +209,13 @@
     @include disabled-colors;
   }
 
-  &:focus,
-  &.focused,
-  &:focus-visible {
-    @include focused-group-colors;
+  // use custom .is-readonly and .is-disabled classes
+  &:not(.is-readonly):not(.is-disabled) {
+    &:focus,
+    &.focused,
+    &:focus-visible {
+      @include focused-group-colors;
+    }
   }
 }
 

src/app/example-form/example-form.component.html

@@ -240,6 +240,47 @@ <h4>Log Output</h4>
           </div>
         </formidable-field-decorator>
 
+        <!-- Last Name -->
+        <formidable-field-decorator>
+          <formidable-input-field
+            formidableFieldErrors
+            placeholder="Your last name"
+            name="lastName"
+            [readonly]="false"
+            [disabled]="false"
+            [minLength]="15"
+            [maxLength]="15"
+            [ngModel]="vm.formValue$.lastName"
+            (valueChanged)="onValueChanged('lastName', $event)"
+            (focusChanged)="onFocusChanged('lastName', $event)">
+          </formidable-input-field>
+          <div
+            *ngIf="controlCenter.showLabels"
+            formidableFieldLabel
+            [isFloating]="controlCenter.floatingLabels">
+            Last Name
+          </div>
+          <div
+            *ngIf="controlCenter.showTooltips"
+            formidableFieldTooltip>
+            <example-tooltip
+              placement="right"
+              trigger="hover"
+              [text]="'Fields can be masked, and have prefixes and suffixes.'">
+            </example-tooltip>
+          </div>
+          <div
+            *ngIf="controlCenter.showPrefixes"
+            formidableFieldPrefix>
+            Prefix
+          </div>
+          <div
+            *ngIf="controlCenter.showSuffixes"
+            formidableFieldSuffix>
+            Suffix
+          </div>
+        </formidable-field-decorator>
+
         <!-- Last Name -->
         <!-- <formidable-field-decorator>
           <formidable-textarea-field