Merge remote-tracking branch 'origin/development' into development

# Conflicts:
#	package-lock.json
#	package.json
#	projects/tubular-ng-widgets/package.json

Author: kshetline

projects/ng-widgets-showcase/src/main.ts

@@ -1,9 +1,13 @@
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
+import { initTimezoneLarge } from '@tubular/time';
+
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
 
+initTimezoneLarge();
+
 if (environment.production) {
   enableProdMode();
 }

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

@@ -58,16 +58,16 @@
           [style.bottom]="item.spinner || item.divider ? '0' : baselineShift">&nbsp;</div>
       <span *ngIf="swipeable(item, 1)"
           class="tbw-dse-draggable-extra"
-          [style.top]="'calc(' + (-digitHeight + smoothedDeltaY) + 'px + ' + (item.deltaY || 0) + 'em)'"
+          [ngStyle]="getStyleForItem(item, -digitHeight)"
       >{{(item.alt_swipeAbove || item.swipeAbove) ?? '\u00A0'}}</span>
       <span *ngIf="swipeable(item, -1)"
           class="tbw-dse-draggable-extra"
-          [style.top]="'calc(' + (digitHeight + smoothedDeltaY) + 'px + ' + (item.deltaY || 0) + 'em)'"
+          [ngStyle]="getStyleForItem(item, digitHeight)"
       >{{(item.alt_swipeBelow || item.swipeBelow) ?? '\u00A0'}}</span>
       <span *ngIf="!item.spinner && !item.divider; else dividerOrSpinner"
           class="tbw-dse-draggable dse-item-{{item.index}}"
           [class.tbw-dse-sized]="!!item.sizer"
-          [style.top]="'calc(' + (swipeable(item, 0) ? smoothedDeltaY : 0) + 'px + ' + (item.deltaY || 0) + 'em)'"
+          [ngStyle]="getStyleForItem(item, 0)"
       >{{filterDisplayChars(item.alt_value || item.value)}}</span>
       <span *ngIf="item.sizer"
           class="tbw-dse-sizer"

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

@@ -25,6 +25,7 @@ export interface SequenceItemInfo {
   hidden?: boolean;
   index?: number;
   indicator?: boolean;
+  maxChars?: number;
   monospaced?: boolean;
   name?: string;
   opacity?: number | string;
@@ -713,6 +714,33 @@ export abstract class DigitSequenceEditorDirective<T> implements
       return null;
   }
 
+  getStyleForItem(item: SequenceItemInfo, heightOffset: number): any {
+    const itemStyle: any = {
+      top: 'calc(' + (this.swipeable(item, 0) ? (this.smoothedDeltaY + heightOffset) : 0) +
+        'px + ' + (item.deltaY || 0) + 'em)'
+    };
+
+    if (item.maxChars) {
+      let value: string;
+
+      if (heightOffset < 0)
+        value = item.alt_swipeAbove || item.swipeAbove;
+      else if (heightOffset > 0)
+        value = item.alt_swipeBelow || item.swipeBelow;
+      else
+        value = this.filterDisplayChars(item.alt_value || item.value).toString();
+
+      const ratio = item.maxChars / value.toString().length;
+
+      if (ratio < 1) {
+        itemStyle.transform = `scale(${floor(ratio * 100) / 100}, 1)`;
+        itemStyle.width = '1px';
+      }
+    }
+
+    return itemStyle;
+  }
+
   getStaticBackgroundColor(): string {
     if (this._disabled)
       return DISABLED_BACKGROUND;

projects/tubular-ng-widgets/src/lib/time-editor/time-editor.component.ts

@@ -868,7 +868,7 @@ export class TimeEditorComponent extends DigitSequenceEditorDirective<number> im
           break;
         case 'off':
           this.offsetIndex = i;
-          this.items.push({ value: '+00:00', format: 'Z', indicator: true, monospaced: true });
+          this.items.push({ value: '+00:00', format: 'Z', indicator: true, monospaced: true, sizer: '+00:00', maxChars: 6 });
           break;
         case 'dst':
           this.dstIndex = i;