npm - wijmo - Versions diffs - 5.20261.45-nightly.d20251218.t163151 → 5.20261.45-nightly.d20260105.t014601 - Mend

wijmo 5.20261.45-nightly.d20251218.t163151 → 5.20261.45-nightly.d20260105.t014601

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1175) hide show

package/styles/parts/_input.scss CHANGED Viewed

@@ -1,6 +1,6 @@
 /*!
     *
-    * Wijmo Library 5.20261.45-nightly.d20251218.t163151
+    * Wijmo Library 5.20261.45-nightly.d20260105.t014601
     * https://developer.mescius.com/wijmo
     *
     * Copyright(c) MESCIUS inc. All rights reserved.
@@ -14,1026 +14,1028 @@
 // wijmo.input
 .wj-content {
+  &.wj-dropdown,
+  &.wj-inputnumber {
+    vertical-align: middle; // so _labeled_input works in IE
+    display: inline-flex; // WJM-36072: fix combobox NVDA table read issue
+    border-collapse: separate;
-    &.wj-dropdown,
-    &.wj-inputnumber {
-        vertical-align: middle; // so _labeled_input works in IE
-        display: inline-flex; // WJM-36072: fix combobox NVDA table read issue
-        border-collapse: separate;
-        .wj-template {
-            position: relative;
-            flex: 1;
-        }
+    .wj-template {
+      position: relative;
+      flex: 1;
     }
+  }
-    &.wj-inputmask,
-    &.wj-calendar-outer,
-    &.wj-pager {
-        vertical-align: middle; // so _labeled_input works in IE
-        display: inline-table; // so height:100% works properly even without <!DOCTYPE html> tag
-        border-collapse: separate;
-    }
+  &.wj-inputmask,
+  &.wj-calendar-outer,
+  &.wj-pager {
+    vertical-align: middle; // so _labeled_input works in IE
+    display: inline-table; // so height:100% works properly even without <!DOCTYPE html> tag
+    border-collapse: separate;
+  }
 }
 // inputmask: custom edit height in Firefox (TFS 307664, 395028)
 .wj-control.wj-inputmask {
-    display: inline-flex;
+  display: inline-flex;
-    .wj-input {
-        width: 100%; // WJM-20593
-    }
+  .wj-input {
+    width: 100%; // WJM-20593
+  }
-    .wj-input-group {
-        display: flex;
-    }
+  .wj-input-group {
+    display: flex;
+  }
 }
 // drop-down panel
 .wj-dropdown-panel {
-    display: block;
-    background: $wj-bkg;
-    color: $wj-txt;
-    // used in drop-downs and other controls
-    pointer-events: auto; // TFS 390659
-    box-shadow: $wj-box-shadow;
-    .wj-control {
-        background: transparent; // inherit doesn't work in IE11
-        color: inherit;
-    }
+  display: block;
+  background: $wj-bkg;
+  color: $wj-txt;
+  // used in drop-downs and other controls
+  pointer-events: auto; // TFS 390659
+  box-shadow: $wj-box-shadow;
+  .wj-control {
+    background: transparent; // inherit doesn't work in IE11
+    color: inherit;
+  }
-    &.wj-content>.wj-content {
-        border: none;
-    }
+  &.wj-content > .wj-content {
+    border: none;
+  }
 }
 .wj-control {
+  // WJM-34923, chrome has this style as part of its useragent stylesheet
+  input[type="tel"] {
+    direction: ltr;
+  }
-    // WJM-34923, chrome has this style as part of its useragent stylesheet
-    input[type="tel"] {
-        direction: ltr;
-    }
+  .wj-template {
+    position: relative;
+    display: table-cell; // TFS 307664, 457702
+  }
-    .wj-template {
-        position: relative;
-        display: table-cell; // TFS 307664, 457702
-    }
-    .wj-template,
-    .wj-input {
-        height: 100%;
-        //display: table-cell; // to work in Firefox, TFS 395028
-    }
-    .wj-input-group {
-        display: flex;
-        border-collapse: separate;
-        width: 100%;
-        height: 100%;
-        .wj-input-group-btn {
-            display: inline-block;
-            flex-shrink: 0;
-            width: auto;
-            height: auto;
-            min-width: 26px;
-            white-space: nowrap;
-            vertical-align: top;
-            &:last-child:not(:first-child)>.wj-btn {
-                border-left: $wj-btn-grp-bdr;
-            }
-            &:first-child:not(:last-child)>.wj-btn {
-                border-right: $wj-btn-grp-bdr;
-            }
-        }
+  .wj-template,
+  .wj-input {
+    height: 100%;
+    //display: table-cell; // to work in Firefox, TFS 395028
+  }
-        .wj-form-control {
-            display: table-cell;
-            padding: 4px 8px;
-            border: none;
-            width: 100%;
-            height: 100%;
-            color: inherit; // TFS 347871
-            background: transparent; // TFS 443372 (inherit doesn't work in IE11)
-            min-height: 2em; // for compatibility with legacy wijmo.css
-        }
+  .wj-input-group {
+    display: flex;
+    border-collapse: separate;
+    width: 100%;
+    height: 100%;
-        button, input {
-            margin: 0;
-        }
+    .wj-input-group-btn {
+      display: inline-block;
+      flex-shrink: 0;
+      width: auto;
+      height: auto;
+      min-width: 26px;
+      white-space: nowrap;
+      vertical-align: top;
+      &:last-child:not(:first-child) > .wj-btn {
+        border-left: $wj-btn-grp-bdr;
+      }
+      &:first-child:not(:last-child) > .wj-btn {
+        border-right: $wj-btn-grp-bdr;
+      }
     }
-    .wj-btn-group {
-        display: inline-block;
-        border: $wj-btn-grp-bdr;
-        border-radius: $wj-bdr-rad;
-        overflow: hidden;
+    .wj-form-control {
+      display: table-cell;
+      padding: 4px 8px;
+      border: none;
+      width: 100%;
+      height: 100%;
+      color: inherit; // TFS 347871
+      background: transparent; // TFS 443372 (inherit doesn't work in IE11)
+      min-height: 2em; // for compatibility with legacy wijmo.css
+    }
-        >*:not(:first-child) {
-            border-left: $wj-btn-grp-bdr;
-        }
+    button,
+    input {
+      margin: 0;
+    }
+  }
-        >.wj-form-control {
-            padding: $wj-item-pdg;
-            border: none;
+  .wj-btn-group {
+    display: inline-block;
+    border: $wj-btn-grp-bdr;
+    border-radius: $wj-bdr-rad;
+    overflow: hidden;
-            &:not(:first-child) {
-                border-left: $wj-btn-grp-bdr;
-            }
-        }
+    > *:not(:first-child) {
+      border-left: $wj-btn-grp-bdr;
     }
-    .wj-btn-group>.wj-btn,
-    .wj-input-group-btn>.wj-btn {
-        height: 100%;
-        min-height: 2em; //  to avoid blank space in IE9 and some versions of Chrome
-        @include backgradient($wj-btn-bkg, $wj-btn-grd);
+    > .wj-form-control {
+      padding: $wj-item-pdg;
+      border: none;
-        &:focus,
-        &:hover {
-            @include backgradient($wj-btn-hvr, $wj-btn-grd);
-            transition-duration: $wj-tdn-focus;
-        }
+      &:not(:first-child) {
+        border-left: $wj-btn-grp-bdr;
+      }
+    }
+  }
+  .wj-btn-group > .wj-btn,
+  .wj-input-group-btn > .wj-btn {
+    height: 100%;
+    min-height: 2em; //  to avoid blank space in IE9 and some versions of Chrome
+    @include backgradient($wj-btn-bkg, $wj-btn-grd);
-        &.wj-btn-default {
-            color: $wj-txt;
+    &:focus,
+    &:hover {
+      @include backgradient($wj-btn-hvr, $wj-btn-grd);
+      transition-duration: $wj-tdn-focus;
+    }
-            &:enabled {
-                background: transparent; // TFS 376384
-            }
+    &.wj-btn-default {
+      color: $wj-txt;
-            &:focus,
-            &:hover {
-                @include backgradient($wj-btn-hvr, $wj-btn-grd);
-                transition-duration: $wj-tdn-focus;
-            }
-        }
+      &:enabled {
+        background: transparent; // TFS 376384
+      }
+      &:focus,
+      &:hover {
+        @include backgradient($wj-btn-hvr, $wj-btn-grd);
+        transition-duration: $wj-tdn-focus;
+      }
     }
+  }
-    // adjust group borders in RTL controls
-    &.wj-rtl {
-        .wj-input-group-btn {
-            &:last-child:not(:first-child)>.wj-btn {
-                border-right: $wj-btn-grp-bdr;
-                border-left: none;
-            }
+  // adjust group borders in RTL controls
+  &.wj-rtl {
+    .wj-input-group-btn {
+      &:last-child:not(:first-child) > .wj-btn {
+        border-right: $wj-btn-grp-bdr;
+        border-left: none;
+      }
-            &:first-child:not(:last-child)>.wj-btn {
-                border-left: $wj-btn-grp-bdr;
-                border-right: none;
-            }
-        }
+      &:first-child:not(:last-child) > .wj-btn {
+        border-left: $wj-btn-grp-bdr;
+        border-right: none;
+      }
+    }
-        .wj-btn-group {
-            >*:not(:first-child) {
-                border-right: $wj-btn-grp-bdr;
-                border-left: none;
-            }
-            >.wj-form-control {
-                &:not(:first-child) {
-                    border-right: $wj-btn-grp-bdr;
-                    border-left: none;
-                }
-            }
+    .wj-btn-group {
+      > *:not(:first-child) {
+        border-right: $wj-btn-grp-bdr;
+        border-left: none;
+      }
+      > .wj-form-control {
+        &:not(:first-child) {
+          border-right: $wj-btn-grp-bdr;
+          border-left: none;
         }
+      }
     }
+  }
 }
 // input number
 .wj-inputnumber {
-    input.wj-form-control {
-        text-align: right;
-    }
+  input.wj-form-control {
+    text-align: right;
+  }
 }
 @mixin wj-checkbox-base {
-    appearance: none;
-    -webkit-appearance: none;
-    -ms-appearance: none;
-    -moz-appearance: none;
-    position: relative;
-    flex-shrink: 0; //Fix WJM-36661
-    width: 13px;
-    height: 13px;
-    display: inline-block;
-    margin: 4px;
-    border: 1px solid #767676;
-    border-radius: 2px;
-    background: #ffffff;
-    box-sizing: border-box;
-    @media screen and (-ms-high-contrast: active) {
-        border-width: 1px;
-    }
+  appearance: none;
+  -webkit-appearance: none;
+  -ms-appearance: none;
+  -moz-appearance: none;
+  position: relative;
+  flex-shrink: 0; //Fix WJM-36661
+  width: 13px;
+  height: 13px;
+  display: inline-block;
+  margin: 4px;
+  border: 1px solid #767676;
+  border-radius: 2px;
+  background: #ffffff;
+  box-sizing: border-box;
+  @media screen and (-ms-high-contrast: active) {
+    border-width: 1px;
+  }
 }
 @mixin wj-checkbox-checkmark {
-    content: "";
-    position: absolute;
-    left: 50%;
-    top: 55%;
-    width: 5px;
-    height: 9px;
-    border: solid white;
-    border-width: 0 2px 2px 0;
-    transform: translate(-50%, -70%) rotate(40deg);
-    box-sizing: inherit;
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 55%;
+  width: 5px;
+  height: 9px;
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  transform: translate(-50%, -70%) rotate(40deg);
+  box-sizing: inherit;
 }
 @mixin wj-checkbox-indeterminate {
-    content: "";
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    width: 8px;
-    height: 0;
-    border-top: 2px solid white;
-    transform: translate(-50%, -50%);
-    box-sizing: border-box;
-    forced-color-adjust: none;
-  }
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 8px;
+  height: 0;
+  border-top: 2px solid white;
+  transform: translate(-50%, -50%);
+  box-sizing: border-box;
+  forced-color-adjust: none;
+}
 .wj-custom-checkbox {
-    @include wj-checkbox-base;
-    &:checked {
-        background: #0075ff;
-        border-color: #0075ff;
+  @include wj-checkbox-base;
+  &:checked {
+    background: #0075ff;
+    border-color: #0075ff;
-        &::after {
-            @include wj-checkbox-checkmark;
-        }
+    &::after {
+      @include wj-checkbox-checkmark;
     }
-    &[data-indeterminate="true"] {
-        background: #0075ff;
-        border-color: #0075ff;
-        &::after {
-          @include wj-checkbox-indeterminate;
-        }
+  }
+  &[data-indeterminate="true"] {
+    background: #0075ff;
+    border-color: #0075ff;
+    &::after {
+      @include wj-checkbox-indeterminate;
     }
+  }
 }
 // listbox
 .wj-listbox {
-    overflow: auto;
-    cursor: default;
+  overflow: auto;
+  cursor: default;
-    .wj-listbox-item {
-        padding: $wj-item-pdg;
-        &.wj-separator {
-            height: 1px;
-            margin: 3px 0;
-            padding: 0;
-            background: rgba($wj-txt, .1);
-            @media (forced-colors: active) {
-                background: WindowText;
-            }
-        }
-        &.wj-header {
-            opacity: 1;
-            position: sticky;
-            z-index: 1;
-            top: 0;
-        }
+  .wj-listbox-item {
+    padding: $wj-item-pdg;
-        // workaround for Chrome 70 bug (TFS 349534, 396676)
-        // seems like Chrome fixed this bug, so remove workaround (TFS 403024)
-        //&.wj-state-selected {
-        //    transform: scale(1);
-        //}
+    &.wj-separator {
+      height: 1px;
+      margin: 3px 0;
+      padding: 0;
+      background: rgba($wj-txt, 0.1);
+      @media (forced-colors: active) {
+        background: WindowText;
+      }
+    }
-        &:not(.wj-state-selected):not(.wj-state-disabled):not(.wj-separator):hover {
-            background: $wj-item-hvr;
-            transition-duration: $wj-tdn-focus;
-        }
+    &.wj-header {
+      opacity: 1;
+      position: sticky;
+      z-index: 1;
+      top: 0;
+    }
-        >label {
-            display: flex; // inline-flex; this causes problems (in Blazor at least)
-            align-content: flex-start;
-            align-items: baseline; // TFS 403513
-            margin: 0;
-            font-weight: normal;
+    // workaround for Chrome 70 bug (TFS 349534, 396676)
+    // seems like Chrome fixed this bug, so remove workaround (TFS 403024)
+    //&.wj-state-selected {
+    //    transform: scale(1);
+    //}
-            >input[type=checkbox] {
-                margin: 4px;
-            }
-        }
-    }
-    .wj-checklist-base{
-        @include wj-checkbox-base;
-    }
-    [aria-selected="true"] .wj-checklist-base {
-        background: #0075ff;
-        border-color: #0075ff;
+    &:not(.wj-state-selected):not(.wj-state-disabled):not(.wj-separator):hover {
+      background: $wj-item-hvr;
+      transition-duration: $wj-tdn-focus;
     }
-    .wj-checklist-mark{
-        @include wj-checkbox-checkmark;
-        display: none;
-    }
-    .wj-state-checked .wj-checklist-mark {
-        display: block;
+    > label {
+      display: flex; // inline-flex; this causes problems (in Blazor at least)
+      align-content: flex-start;
+      align-items: baseline; // TFS 403513
+      margin: 0;
+      font-weight: normal;
+      > input[type="checkbox"] {
+        margin: 4px;
+      }
     }
-    .wj-checklist-item:focus-within .wj-checklist-base {
-        box-shadow: 0 0 0 2px rgba(0,120,212,0.3);
+  }
+  .wj-checklist-base {
+    @include wj-checkbox-base;
+  }
+  [aria-selected="true"] .wj-checklist-base {
+    background: #0075ff;
+    border-color: #0075ff;
+  }
+  .wj-checklist-mark {
+    @include wj-checkbox-checkmark;
+    display: none;
+  }
+  .wj-state-checked .wj-checklist-mark {
+    display: block;
+  }
+  .wj-checklist-item:focus-within .wj-checklist-base {
+    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.3);
+  }
+  .wj-state-disabled {
+    .wj-checklist-base {
+      background-color: #eee;
+      border-color: #ccc;
     }
-    .wj-state-disabled {
-        .wj-checklist-base {
-            background-color: #eee;
-            border-color: #ccc;
-        }
-        .wj-checklist-mark {
-            border-color: #999;
-        }
+    .wj-checklist-mark {
+      border-color: #999;
     }
+  }
 }
 .wj-state-disabled {
-    .wj-listbox-item {
-        &.wj-state-selected {
-            background-color: #021a28;
-            color: white;
-        }
+  .wj-listbox-item {
+    &.wj-state-selected {
+      background-color: #021a28;
+      color: white;
     }
+  }
 }
 // multi-select listbox
 .wj-multiselectlistbox {
-    .wj-template {
-        display: flex;
-        flex-direction: column;
-        max-height: inherit;
-        min-height: inherit;
-        height: auto;
-    }
+  .wj-template {
+    display: flex;
+    flex-direction: column;
+    max-height: inherit;
+    min-height: inherit;
+    height: auto;
+  }
-    .wj-content {
-        display: block;
-        border: none;
-        border-radius: 0;
-    }
+  .wj-content {
+    display: block;
+    border: none;
+    border-radius: 0;
+  }
-    .wj-form-control {
-        border: none;
-        width: 100%;
-        color: inherit;
-        background: transparent;
-        padding: 5px 8px;
-    }
+  .wj-form-control {
+    border: none;
+    width: 100%;
+    color: inherit;
+    background: transparent;
+    padding: 5px 8px;
+  }
 }
-.wj-dropdown-panel>.wj-multiselectlistbox {
-    display: block;
+.wj-dropdown-panel > .wj-multiselectlistbox {
+  display: block;
 }
 // calendar
 .wj-calendar {
+  max-width: 100vw; // make sure it fits on mobile devices (TFS 390662)
+  overflow: auto; // do not overflow the container/page (WJM-19509)
-    max-width: 100vw; // make sure it fits on mobile devices (TFS 390662)
-    overflow: auto; // do not overflow the container/page (WJM-19509)
+  .wj-header {
+    font-size: 90%;
+  }
-    .wj-header {
-        font-size: 90%;
-    }
+  .wj-day-today {
+    font-weight: bold;
+  }
-    .wj-day-today {
-        font-weight: bold;
-    }
+  .wj-day-othermonth:not(.wj-state-selected):not(.wj-state-multi-selected):not(.wj-state-last-selected) {
+    opacity: 0.65;
+  }
-    .wj-day-othermonth:not(.wj-state-selected):not(.wj-state-multi-selected):not(.wj-state-last-selected) {
-        opacity: 0.65;
-    }
+  .wj-calendar-outer {
+    display: block;
+    padding: 10px;
+    cursor: default;
+  }
-    .wj-calendar-outer {
-        display: block;
-        padding: 10px;
-        cursor: default;
+  .wj-calendar-header {
+    display: flex; // TFS 469691
+    justify-content: space-between;
+    align-items: center;
+    flex-grow: 0;
+    flex-shrink: 0; // important for IE
+    margin-bottom: 7px;
+    min-width: 19em; // TFS 469691
+    .wj-month-select {
+      display: inline-block;
+      margin: 6px;
+      font-weight: bold;
+      cursor: pointer;
+      .wj-glyph-down {
+        opacity: 0.5;
+      }
+      &:focus-visible {
+        outline: 2px solid $wj-sel-bkg;
+        outline-offset: 2px;
+      }
     }
-    .wj-calendar-header {
-        display: flex; // TFS 469691
-        justify-content: space-between;
-        align-items: center;
-        flex-grow: 0;
-        flex-shrink: 0; // important for IE
-        margin-bottom: 7px;
-        min-width: 19em; // TFS 469691
-        .wj-month-select {
-            display: inline-block;
-            margin: 6px;
-            font-weight: bold;
-            cursor: pointer;
-            .wj-glyph-down {
-                opacity: 0.5;
-            }
-            &:focus-visible {
-                outline: 2px solid $wj-sel-bkg;
-                outline-offset: 2px;
-            }
-        }
+    .wj-btn-group {
+      //float: right; // TFS 469691
-        .wj-btn-group {
-            //float: right; // TFS 469691
+      .wj-btn {
+        padding: 2px 8px 0 8px;
+      }
+      span {
+        pointer-events: none; // TFS 472508
+      }
+    }
+  }
-            .wj-btn {
-                padding: 2px 8px 0 8px;
-            }
+  .wj-calendar-month {
+    width: 100%;
+    border-collapse: collapse;
+    font: inherit;
-            span {
-                pointer-events: none; // TFS 472508
-            }
+    td.wj-state-focus:focus {
+      outline: 2px solid rgb(100 100 100);
+      outline-offset: -1px;
+    }
+    td {
+      width: 14.29%;
+      &:not(.wj-state-selected):hover {
+        background-color: $wj-btn-hvr;
+        &.wj-state-multi-selected {
+          color: $wj-txt;
         }
+      }
     }
+  }
+  .wj-calendar-year {
+    width: 100%;
+    border-collapse: collapse;
+    font: inherit;
-    .wj-calendar-month {
-        width: 100%;
-        border-collapse: collapse;
-        font: inherit;
+    td.wj-state-focus:focus {
+      outline: 2px solid rgb(100, 100, 100);
+      outline-offset: -1px;
+    }
+    td {
+      width: 25%;
+      abbr {
+        all: unset;
+      }
+      &:not(.wj-state-selected):hover {
+        background-color: $wj-btn-hvr;
+      }
+    }
-        td.wj-state-focus:focus  {
-            outline: 2px solid rgb(100 100 100);
-            outline-offset: -1px;
-        }
-        td {
-            width: 14.29%;
-            &:not(.wj-state-selected):hover {
-                background-color: $wj-btn-hvr;
-                &.wj-state-multi-selected {
-                    color: $wj-txt;
-                }
-            }
-        }
+    tr:not(.wj-header) td {
+      height: 3em;
     }
-    .wj-calendar-year {
-        width: 100%;
-        border-collapse: collapse;
-        font: inherit;
+    .wj-select-year:focus {
+      outline: 2px solid $wj-sel-bkg;
+    }
+  }
-        td.wj-state-focus:focus {
-            outline: 2px solid rgb(100, 100, 100);
-            outline-offset: -1px;
-        }
-        td {
-            width: 25%;
-            abbr {
-                all: unset;
-            }
-            &:not(.wj-state-selected):hover {
-                background-color: $wj-btn-hvr;
-            }
-        }
+  td,
+  th {
+    text-align: center;
+    padding: $wj-item-pdg;
+    border: none;
-        tr:not(.wj-header) td {
-            height: 3em;
-        }
+    &.wj-state-invalid {
+      opacity: 0.65;
+    }
+  }
-        .wj-select-year:focus {
-            outline: 2px solid $wj-sel-bkg;
+  &.wj-rtl {
+    // RTL calendars
+    .wj-calendar-header {
+      .wj-btn-group {
+        float: left;
+        .wj-btn {
+          .wj-glyph-right,
+          .wj-glyph-left {
+            transform: scale(-1, 1); //wjm-35743
+          }
         }
+      }
     }
+  }
-    td, th {
-        text-align: center;
-        padding: $wj-item-pdg;
-        border: none;
+  &.wj-calendar-multimonth {
+    // Calendars with monthCount > 1
+    display: inline-flex;
+    flex-wrap: wrap;
+    border: $wj-bdr;
+    border-radius: $wj-bdr-rad;
-        &.wj-state-invalid {
-            opacity: 0.65;
-        }
+    .wj-calendar-outer {
+      @extend .wj-outer-flex;
     }
-    &.wj-rtl { // RTL calendars
-        .wj-calendar-header {
-            .wj-btn-group {
-                float: left;
-                .wj-btn {
-                    .wj-glyph-right,
-                    .wj-glyph-left {
-                        transform: scale(-1, 1);//wjm-35743
-                    }
-                }
-            }
-        }
+    .wj-content {
+      border-color: rgba(0, 0, 0, 0.05);
+      border-radius: 0;
     }
-    &.wj-calendar-multimonth { // Calendars with monthCount > 1
-        display: inline-flex;
-        flex-wrap: wrap;
-        border: $wj-bdr;
-        border-radius: $wj-bdr-rad;
+    .wj-calendar {
+      display: flex;
+    }
-        .wj-calendar-outer {
-            @extend .wj-outer-flex;
+    // RTL calendars case WJM-18847
+    .wj-calendar-header {
+      .wj-btn-group {
+        .wj-btn {
+          .wj-glyph-right,
+          .wj-glyph-left {
+            transform: scale(1, -1);
+          }
         }
+      }
+    }
+  }
-        .wj-content {
-            border-color: rgba(0, 0, 0, 0.05);
-            border-radius: 0;
-        }
+  &.wj-btns-outside {
+    // Calendars with showMonthPicker == Outside
+    position: relative;
-        .wj-calendar {
-            display: flex;
-        }
+    .wj-calendar-header {
+      //margin-left: 1em; // make room for the buttons
-        // RTL calendars case WJM-18847
-        .wj-calendar-header {
-            .wj-btn-group {
-                .wj-btn {
-                    .wj-glyph-right,
-                    .wj-glyph-left {
-                        transform: scale(1, -1);
-                    }
-                }
-            }
-        }
+      .wj-btn-group {
+        // remove group borders
+        border: none;
+        button {
+          display: none; // hide today button
+          position: absolute;
+          z-index: 1;
+          top: 0;
+          //height: auto; // align buttons to top of the host
+          min-width: 1em; // make buttons thin and let them extend from top to bottom
+          padding: 0;
+          border: none;
+          opacity: 0.5;
+          &[wj-part="btn-prev"] {
+            left: 0;
+            display: block; // TFS 468116
+          }
+          &[wj-part="btn-next"] {
+            right: 0;
+            display: block; // TFS 468116
+          }
+        }
+      }
     }
+  }
-    &.wj-btns-outside { // Calendars with showMonthPicker == Outside
-        position: relative;
-        .wj-calendar-header {
-            //margin-left: 1em; // make room for the buttons
-            .wj-btn-group { // remove group borders
-                border: none;
-                button {
-                    display: none; // hide today button
-                    position: absolute;
-                    z-index: 1;
-                    top: 0;
-                    //height: auto; // align buttons to top of the host
-                    min-width: 1em; // make buttons thin and let them extend from top to bottom
-                    padding: 0;
-                    border: none;
-                    opacity: 0.5;
-                    &[wj-part=btn-prev] {
-                        left: 0;
-                        display: block; // TFS 468116
-                    }
-                    &[wj-part=btn-next] {
-                        right: 0;
-                        display: block; // TFS 468116
-                    }
-                }
-            }
-        }
+  &.wj-state-disabled {
+    .wj-day-othermonth:not(.wj-state-selected):not(.wj-state-multi-selected):not(.wj-state-last-selected) {
+      opacity: 0.9;
     }
-    &.wj-state-disabled {
-        .wj-day-othermonth:not(.wj-state-selected):not(.wj-state-multi-selected):not(.wj-state-last-selected) {
-            opacity: 0.9;
-        }
+    .wj-state-selected {
+      background-color: #021a28;
+    }
+  }
-        .wj-state-selected {
-            background-color: #021a28;
-        }
+  @media (forced-colors: active) {
+    .wj-state-selected {
+      outline: 2px solid WindowText;
+      outline-offset: -2px;
+    }
+    .wj-state-multi-selected {
+      outline: 2px solid Highlight;
+      outline-offset: -2px;
+    }
+    .wj-calendar-month td.wj-state-focus:focus,
+    .wj-calendar-year tbody td.wj-state-focus:focus {
+      outline: 1px solid WindowText;
+      outline-offset: -1px;
     }
-    @media (forced-colors: active) {
-        .wj-state-selected {
-            outline: 2px solid WindowText;
-            outline-offset: -2px;
-        }
-        .wj-state-multi-selected {
-            outline: 2px solid Highlight;
-            outline-offset: -2px;
-        }
-        .wj-calendar-month td.wj-state-focus:focus,
-        .wj-calendar-year tbody td.wj-state-focus:focus {
-            outline: 1px solid WindowText;
-            outline-offset: -1px;
-        }
-        .wj-calendar-header .wj-month-select:focus {
-            outline: 1px solid WindowText;
-        }
-        .wj-calendar-year .wj-select-year:focus {
-            outline: 1px solid WindowText;
-        }
-        .wj-btn:focus {
-            outline: 1px solid Highlight;
-            outline-offset: -1px;
-            transition-duration: unset !important;
-        }
-        .wj-calendar-month td:hover,
-        .wj-calendar-year td:hover {
-            outline: 1px solid WindowText;
-            outline-offset: -1px;
-        }
-        .wj-calendar-button:focus {
-            outline: 1px solid WindowText;
-            outline-offset: -1px;
-            transition-duration: unset !important;
-        }
+    .wj-calendar-header .wj-month-select:focus {
+      outline: 1px solid WindowText;
+    }
+    .wj-calendar-year .wj-select-year:focus {
+      outline: 1px solid WindowText;
+    }
+    .wj-btn:focus {
+      outline: 1px solid Highlight;
+      outline-offset: -1px;
+      transition-duration: unset !important;
+    }
+    .wj-calendar-month td:hover,
+    .wj-calendar-year td:hover {
+      outline: 1px solid WindowText;
+      outline-offset: -1px;
     }
+    .wj-calendar-button:focus {
+      outline: 1px solid WindowText;
+      outline-offset: -1px;
+      transition-duration: unset !important;
+    }
+  }
 }
 .wj-dropdown-panel .wj-calendar-outer {
-    background: none;
+  background: none;
-    >.wj-content {
-        display: block;
-    }
+  > .wj-content {
+    display: block;
+  }
 }
 .wj-yearpicker {
-    max-height: 12em;
-    min-width: 18em;
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    width: 4em; // grid fall-back
-    align-items: center;
-    justify-items: center;
+  max-height: 12em;
+  min-width: 18em;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  width: 4em; // grid fall-back
+  align-items: center;
+  justify-items: center;
+  text-align: center;
+  .wj-listbox-item {
     text-align: center;
-    .wj-listbox-item {
-        text-align: center;
-        display: inline-block; // grid fall-back
-        width: 4em;
-    }
+    display: inline-block; // grid fall-back
+    width: 4em;
+  }
 }
 .wj-outer-flex {
-    display: flex;
-    flex-direction: column;
-    min-width: 21em;
-    flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  min-width: 21em;
+  flex-shrink: 0;
 }
 // input date
 .wj-inputdate-dropdown {
+  display: flex;
+  background: $wj-bkg;
+  flex-direction: column;
+  .wj-inputdate-dropdown-container {
     display: flex;
-    background: $wj-bkg;
-    flex-direction: column;
+    .wj-calendar-outer {
+      @extend .wj-outer-flex; // TFS 456066
+    }
-    .wj-inputdate-dropdown-container{
-        display: flex;
-        .wj-calendar-outer {
-            @extend .wj-outer-flex; // TFS 456066
-        }
-        >.wj-calendar {
-            flex-grow: 1;
-            border: none;
-        }
-        >.wj-listbox {
-            flex-grow: 1;
-            margin: 10px;
-            min-width: 8em;
-            max-height: 16em;
-            .wj-listbox-item {
-                white-space: nowrap;
-            }
-            .wj-state-selected:focus {
-                outline: 2px solid rgb(100 100 100);
-                outline-offset: -1px;
-            }
-        }
+    > .wj-calendar {
+      flex-grow: 1;
+      border: none;
     }
-    .wj-calendar-confirmation-button-container {
-        margin: 10px;
-        display: flex;
-        justify-content: flex-end;
-        .wj-btn {
-            @include wjButton($wj-btn-bkg, $wj-btn-grd, $wj-btn-txt, $wj-btn-hvr, $wj-tdn-focus, $wj-disabled-opacity);
-            margin-left: 10px;
-        }:focus {
-            outline: none;
-        }
-        // button-styled links
-        a.wj-btn,
-        button.wj-btn:not(.wj-btn-default) {
-            // not for buttons in input controls
-            @include wjButtonStyledLinks($wj-bdr-rad);
-        }
+    > .wj-listbox {
+      flex-grow: 1;
+      margin: 10px;
+      min-width: 8em;
+      max-height: 16em;
+      .wj-listbox-item {
+        white-space: nowrap;
+      }
+      .wj-state-selected:focus {
+        outline: 2px solid rgb(100 100 100);
+        outline-offset: -1px;
+      }
+    }
+  }
+  .wj-calendar-confirmation-button-container {
+    margin: 10px;
+    display: flex;
+    justify-content: flex-end;
+    .wj-btn {
+      @include wjButton($wj-btn-bkg, $wj-btn-grd, $wj-btn-txt, $wj-btn-hvr, $wj-tdn-focus, $wj-disabled-opacity);
+      margin-left: 10px;
+    }
+    :focus {
+      outline: none;
+    }
+    // button-styled links
+    a.wj-btn,
+    button.wj-btn:not(.wj-btn-default) {
+      // not for buttons in input controls
+      @include wjButtonStyledLinks($wj-bdr-rad);
     }
+  }
 }
 // input date time
 .wj-inputdatetime {
-    .wj-input-group-btn > .wj-btn.wj-btn-default.wj-show-dropdown-button {
-        @include backgradient($wj-btn-hvr, $wj-btn-grd);
-        @media (forced-colors: active) {
-            background-color: Highlight;
-        }
+  .wj-input-group-btn > .wj-btn.wj-btn-default.wj-show-dropdown-button {
+    @include backgradient($wj-btn-hvr, $wj-btn-grd);
+    @media (forced-colors: active) {
+      background-color: Highlight;
     }
+  }
 }
 // color picker
 .wj-colorpicker {
-    width: 420px;
-    height: 200px;
-    padding: 4px;
-    .wj-colorbox {
-        position: relative;
-        width: 100%;
-        height: 100%;
-        cursor: pointer;
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-        &:focus-visible {
-            outline: 2px solid #1a73e8;
-        }
-    }
+  width: 420px;
+  height: 200px;
+  padding: 4px;
-    div[role=gridcell]:focus,
-    div[role=columnheader]:focus {
-        outline: 2px solid #050cef;
-        transform: scale(0.92);
-    }
+  .wj-colorbox {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    box-shadow:
+      0 1px 3px rgba(0, 0, 0, 0.12),
+      0 1px 2px rgba(0, 0, 0, 0.24);
-    .wj-colorpicker-cursor {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        width: 7px;
-        height: 7px;
-        transform: translate(-50%, -50%);
-        border: 2px solid #f0f0f0;
-        border-radius: 50px;
-        box-shadow: 0px 0px 4px 2px #0f0f0f;
-        transition: border-color 0.2s, box-shadow 0.2s;
+    &:focus-visible {
+      outline: 2px solid #1a73e8;
     }
+  }
-    .palette-grid {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        height: 80%;
-    }
+  div[role="gridcell"]:focus,
+  div[role="columnheader"]:focus {
+    outline: 2px solid #050cef;
+    transform: scale(0.92);
+  }
-    .palette-row {
-        display: flex;
-        flex-direction: row;
-        width: 100%;
-        height: 13%;
-    }
+  .wj-colorpicker-cursor {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 7px;
+    height: 7px;
+    transform: translate(-50%, -50%);
+    border: 2px solid #f0f0f0;
+    border-radius: 50px;
+    box-shadow: 0px 0px 4px 2px #0f0f0f;
+    transition:
+      border-color 0.2s,
+      box-shadow 0.2s;
+  }
-    .palette-gridcell {
-        cursor: pointer;
-        width: 10%;
-        margin-right: 2px;
-    }
-    .palette-grid > .palette-row:first-child {
-        margin-bottom: 4px;
-    }
+  .palette-grid {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    height: 80%;
+  }
+  .palette-row {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    height: 13%;
+  }
+  .palette-gridcell {
+    cursor: pointer;
+    width: 10%;
+    margin-right: 2px;
+  }
+  .palette-grid > .palette-row:first-child {
+    margin-bottom: 4px;
+  }
 }
 // input color
 .wj-inputcolor {
+  .wj-input-group input.wj-form-control {
+    padding-left: 24px;
+  }
+  .wj-inputcolorbox {
+    position: absolute;
+    left: 6px;
+    top: 6px;
+    bottom: 6px;
+    width: 12px;
+    border: 1px solid black;
+  }
+  &.wj-rtl {
     .wj-input-group input.wj-form-control {
-        padding-left: 24px;
+      padding-left: 4px;
+      padding-right: 24px;
     }
     .wj-inputcolorbox {
-        position: absolute;
-        left: 6px;
-        top: 6px;
-        bottom: 6px;
-        width: 12px;
-        border: 1px solid black;
-    }
-    &.wj-rtl {
-        .wj-input-group input.wj-form-control {
-            padding-left: 4px;
-            padding-right: 24px;
-        }
-        .wj-inputcolorbox {
-            left: auto;
-            right: 6px;
-        }
+      left: auto;
+      right: 6px;
     }
+  }
 }
 // autocomplete
 .wj-listbox.wj-dropdown-panel {
-    .wj-state-match {
-        font-weight: bold;
-    }
+  .wj-state-match {
+    font-weight: bold;
+  }
 }
 // multi-autocomplete
 .wj-multi-autocomplete {
-    width: 100%;
-    padding: 5px;
+  width: 100%;
+  padding: 5px;
-    .wj-input {
-        float: left;
-    }
+  .wj-input {
+    float: left;
+  }
-    .wj-input-group .wj-form-control {
-        margin-top: 5px;
-        height: auto;
-    }
+  .wj-input-group .wj-form-control {
+    margin-top: 5px;
+    height: auto;
+  }
-    .wj-token {
-        @include backgradient($wj-btn-bkg, $wj-btn-grd);
-        color: $wj-btn-txt;
-        border: $wj-bdr;
-        border-radius: $wj-bdr-rad;
-        margin: 5px;
-        vertical-align: middle;
-        float: left;
-        cursor: default;
-        &:focus,
-        &:hover,
-        &.wj-token-active {
-            // REVIEW: use wj-state-active instead?
-            @include backgradient($wj-btn-hvr, $wj-btn-grd);
-            transition-duration: $wj-tdn-focus;
-        }
+  .wj-token {
+    @include backgradient($wj-btn-bkg, $wj-btn-grd);
+    color: $wj-btn-txt;
+    border: $wj-bdr;
+    border-radius: $wj-bdr-rad;
+    margin: 5px;
+    vertical-align: middle;
+    float: left;
+    cursor: default;
-        .wj-token-label {
-            padding: $wj-item-pdg;
-            display: inline-block;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            vertical-align: middle;
-            max-width: 500px;
-        }
+    &:focus,
+    &:hover,
+    &.wj-token-active {
+      // REVIEW: use wj-state-active instead?
+      @include backgradient($wj-btn-hvr, $wj-btn-grd);
+      transition-duration: $wj-tdn-focus;
+    }
-        .wj-token-close {
-            padding: $wj-item-pdg;
-            color: $wj-btn-txt;
-            vertical-align: middle;
-            cursor: pointer;
-            text-decoration: none;
-            &:hover,
-            &:focus {
-                opacity: .5;
-                transition-duration: $wj-tdn-focus;
-            }
-        }
+    .wj-token-label {
+      padding: $wj-item-pdg;
+      display: inline-block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      vertical-align: middle;
+      max-width: 500px;
     }
-    .wj-token-helper {
-        position: absolute;
-        left: -10000px;
-        color: inherit;
-        background: transparent;
+    .wj-token-close {
+      padding: $wj-item-pdg;
+      color: $wj-btn-txt;
+      vertical-align: middle;
+      cursor: pointer;
+      text-decoration: none;
+      &:hover,
+      &:focus {
+        opacity: 0.5;
+        transition-duration: $wj-tdn-focus;
+      }
     }
+  }
+  .wj-token-helper {
+    position: absolute;
+    left: -10000px;
+    color: inherit;
+    background: transparent;
+  }
 }
 // popups/dialogs
 .wj-popup {
-    //@include backgradient($wj-bkg, $wj-bkg-grd);
-    background: $wj-bkg; // no gradient on popup background
-    box-shadow: $wj-box-shadow;
-    //margin: 2px 0; // can't assume PopupPosition.Above/Below...
+  //@include backgradient($wj-bkg, $wj-bkg-grd);
+  background: $wj-bkg; // no gradient on popup background
+  box-shadow: $wj-box-shadow;
+  //margin: 2px 0; // can't assume PopupPosition.Above/Below...
-    .wj-dialog-header {
-        width: 100%;
-        @include backgradient($wj-hdr-bkg, $wj-hdr-grd);
-        color: $wj-hdr-txt;
-        font-weight: bold;
-        font-size: 120%;
-        padding: 1em;
-        //cursor: default; // TFS 439479 (NO: TFS 470569)
-    }
+  .wj-dialog-header {
+    width: 100%;
+    @include backgradient($wj-hdr-bkg, $wj-hdr-grd);
+    color: $wj-hdr-txt;
+    font-weight: bold;
+    font-size: 120%;
+    padding: 1em;
+    //cursor: default; // TFS 439479 (NO: TFS 470569)
+  }
-    .wj-dialog-body {
-        padding: 1em;
-    }
+  .wj-dialog-body {
+    padding: 1em;
+  }
-    .wj-dialog-footer {
-        text-align: right;
-        margin-top: 1em;
-        padding: 1em;
-    }
+  .wj-dialog-footer {
+    text-align: right;
+    margin-top: 1em;
+    padding: 1em;
+  }
 }
 .wj-popup-backdrop {
-    position: fixed;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, .5);
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
 }
 // menu
 .wj-menu .wj-form-control {
-    cursor: pointer;
+  cursor: pointer;
 }
 .wj-menu.wj-state-focused {
-    outline: 2px solid $wj-sel-bkg;
-    outline-offset: -1px;
+  outline: 2px solid $wj-sel-bkg;
+  outline-offset: -1px;
 }
 @media (forced-colors: active) {
-    .wj-menu.wj-state-focused {
-        outline: 2px solid Highlight;
-        outline-offset: -1px;
-    }
+  .wj-menu.wj-state-focused {
+    outline: 2px solid Highlight;
+    outline-offset: -1px;
+  }
 }
 .wj-listbox.wj-menu-items {
+  .wj-listbox-item:not(.wj-state-disabled):not(.wj-separator) {
+    cursor: pointer;
+  }
-    .wj-listbox-item:not(.wj-state-disabled):not(.wj-separator) {
-        cursor: pointer;
-    }
-    .wj-listbox-item.wj-subitems {
-        position: relative;
+  .wj-listbox-item.wj-subitems {
+    position: relative;
-        &:after {
-            content: '';
-            position: absolute;
-            top: 50%;
-            transform: translate(0, -50%);
-            opacity: .75;
-            border-top: .4em solid transparent;
-            border-bottom: .4em solid transparent;
-            border-left: .5em solid;
-        }
+    &:after {
+      content: "";
+      position: absolute;
+      top: 50%;
+      transform: translate(0, -50%);
+      opacity: 0.75;
+      border-top: 0.4em solid transparent;
+      border-bottom: 0.4em solid transparent;
+      border-left: 0.5em solid;
     }
+  }
-    &:not(.wj-rtl) .wj-listbox-item.wj-subitems {
-        padding-right: 1.8em;
+  &:not(.wj-rtl) .wj-listbox-item.wj-subitems {
+    padding-right: 1.8em;
-        &:after {
-            right: .55em;
-        }
+    &:after {
+      right: 0.55em;
     }
+  }
-    &.wj-rtl .wj-listbox-item.wj-subitems {
-        padding-left: 1.8em;
+  &.wj-rtl .wj-listbox-item.wj-subitems {
+    padding-left: 1.8em;
-        &:after {
-            left: .55em;
-            transform: translate(0, -50%) scale(-1, 1)
-        }
+    &:after {
+      left: 0.55em;
+      transform: translate(0, -50%) scale(-1, 1);
     }
+  }
 }
 // pager
 .wj-pager {
-    user-select: auto;
-    -webkit-user-select: auto;
-    .wj-input-group {
-        .wj-input-group-btn>.wj-btn {
-            min-width: 40px;
-            padding: 0em 1em;
+  user-select: auto;
+  -webkit-user-select: auto;
+  .wj-input-group {
+    .wj-input-group-btn > .wj-btn {
+      min-width: 40px;
+      padding: 0em 1em;
+    }
+    span[wj-part="txt-curr"] {
+      display: table-cell;
+      text-align: center;
+      vertical-align: middle;
+      border-left: 1px solid $wj-bdr-clr;
+      border-right: 1px solid $wj-bdr-clr;
+      padding: 0.5em 0.8em 0.4em 0.8em;
+      width: 100%;
+      height: 100%;
+      min-height: 2em;
+    }
+    span[wj-part|="btn"]:focus-within > .wj-btn:focus-visible {
+      transition-property: none;
+      outline: 0.2em solid;
+      outline-offset: -0.2em;
+    }
+    span[wj-part="txt-curr"]:focus-visible {
+      outline: 0.15em solid;
+      outline-offset: -0.15em;
+      background-color: $wj-bkg;
+    }
+    // To let Navigation glyph work in OS contrast themes.
+    @media (forced-colors: active) {
+      span[wj-part|="btn"] button.wj-btn.wj-btn-default[tabindex] {
+        &:active,
+        &:hover {
+          transition-property: none;
+          background-color: Canvas;
         }
-        span[wj-part=txt-curr]{
-            display: table-cell;
-            text-align: center;
-            vertical-align: middle;
-            border-left: 1px solid $wj-bdr-clr;
-            border-right: 1px solid $wj-bdr-clr;
-            padding: 0.5em 0.8em 0.4em 0.8em;
-            width: 100%;
-            height: 100%;
-            min-height: 2em;
-        }
+        border: 1px solid ButtonText;
+        border-right-color: ButtonText;
+        border-left-color: ButtonText;
+      }
-        span[wj-part|=btn]:focus-within > .wj-btn:focus-visible{
-            transition-property: none;
-            outline: 0.2em solid;
-            outline-offset: -0.2em;
-        }
-        span[wj-part=txt-curr]:focus-visible{
-            outline: 0.15em solid;
-            outline-offset: -0.15em;
-            background-color: $wj-bkg;
-        }
-        // To let Navigation glyph work in OS contrast themes.
-        @media (forced-colors: active) {
-            span[wj-part|=btn] button.wj-btn.wj-btn-default[tabindex] {
-                &:active,
-                &:hover {
-                    transition-property: none;
-                    background-color: Canvas;
-                }
-                border: 1px solid ButtonText;
-                border-right-color: ButtonText;
-                border-left-color: ButtonText;
-            }
-            span[wj-part=txt-curr]:focus-visible,
-            span[wj-part|=btn]:focus-within > .wj-btn:focus-visible{
-                outline-color: Highlight;
-            }
-        }
+      span[wj-part="txt-curr"]:focus-visible,
+      span[wj-part|="btn"]:focus-within > .wj-btn:focus-visible {
+        outline-color: Highlight;
+      }
     }
-}
+  }
+}