Merge pull request #1 from kshetline/development

Add locale setting for <tbw-calendar>. Improve calendar CJK date formatting.

package.json

@@ -24,7 +24,7 @@
     "@angular/platform-browser-dynamic": "~12.1.3",
     "@angular/router": "~12.1.3",
     "@tubular/math": "^3.1.0",
-    "@tubular/time": "^3.3.1",
+    "@tubular/time": "^3.5.1",
     "@tubular/util": "^4.3.1",
     "rxjs": "~6.6.0",
     "tslib": "^2.1.0",

projects/ng-widgets-showcase/src/app/app.component.html

@@ -179,11 +179,12 @@
 
   <div class='calendar'>
     <tbw-calendar minYear=-9999
+        [locale]="customLocale"
         [backgroundDecorator]="getBackground"
         [foregroundDecorator]="getForeground"
         showDst
         weekDayFormat="dd"
-        yearMonthFormat="MMM y n"
+        yearMonthFormat="MMM~y~n"
         [(ngModel)]="calendarDate"></tbw-calendar>
   </div>
 </div>

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tubular/ng-widgets",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "peerDependencies": {
     "@angular/common": "^12.1.3",
     "@angular/core": "^12.1.3",

projects/tubular-ng-widgets/src/lib/calendar-panel/calendar-panel.component.ts

@@ -2,7 +2,7 @@ import { Component, EventEmitter, forwardRef, Input, OnDestroy, Output } from '@
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { div_rd, max, min } from '@tubular/math';
 import { CalendarType, DateTime, defaultLocale, getStartOfWeek, GregorianChange, Timezone, YMDDate } from '@tubular/time';
-import { clone, isEqual, isObject, isString, noop, toBoolean, toNumber } from '@tubular/util';
+import { clone, convertDigits, convertDigitsToAscii, isEqual, isObject, isString, noop, toBoolean, toNumber } from '@tubular/util';
 import { Subscription, timer } from 'rxjs';
 import { SafeHtml } from '@angular/platform-browser';
 
@@ -32,21 +32,22 @@ const multiplier = [0, 1, 1, 10, 100, 1000];
   providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CalendarPanelComponent), multi: true }]
 })
 export class CalendarPanelComponent implements ControlValueAccessor, OnDestroy {
-  private ymd: YMDDate = { y: 2021, m: 1, d: 1 };
-  private _gregorianChange: GregorianChange;
-  private _showDst = false;
-  private _minYear = 1;
-  private _maxYear = 9999;
-  private _firstDay = getStartOfWeek(defaultLocale);
   private baseValue = [0, 0, 0];
   private dateTime: DateTime = new DateTime();
-  private onTouchedCallback: () => void = noop;
+  private digitBase = '0';
+  private _firstDay = getStartOfWeek(defaultLocale);
+  private _gregorianChange: GregorianChange;
+  private _maxYear = 9999;
+  private _minYear = 1;
   private onChangeCallback: (_: any) => void = noop;
-  private timerSubscription: Subscription;
+  private onTouchedCallback: () => void = noop;
   private pendingDelta = 0;
   private pendingEvent: MouseEvent = null;
+  private _showDst = false;
+  private timerSubscription: Subscription;
   private _weekDayFormat = 'ddd';
-  private _yearMonthFormat = 'MMM Y';
+  private _yearMonthFormat = 'MMM~Y~';
+  private ymd: YMDDate = { y: 2021, m: 1, d: 1 };
 
   @Input() backgroundDecorator: DayDecorator;
   calendar: CalendarDateInfo[][] = [];
@@ -64,6 +65,9 @@ export class CalendarPanelComponent implements ControlValueAccessor, OnDestroy {
 
   constructor() {
     this.updateDayHeadings();
+    const base: string[] = [];
+    convertDigitsToAscii(this.dateTime.format('D'), base);
+    this.digitBase = base[0];
   }
 
   ngOnDestroy(): void {
@@ -102,6 +106,17 @@ export class CalendarPanelComponent implements ControlValueAccessor, OnDestroy {
     }
   }
 
+  get locale(): string | string[] { return this.dateTime.locale; }
+  @Input() set locale(value: string | string[]) {
+    if (!isEqual(this.dateTime.locale, value)) {
+      this.dateTime.locale = value;
+      const base: string[] = [];
+      convertDigitsToAscii(this.dateTime.format('D'), base);
+      this.digitBase = base[0];
+      this.updateCalendar();
+    }
+  }
+
   get gregorianChangeDate(): GregorianChange { return this._gregorianChange; }
   @Input() set gregorianChangeDate(newChange: GregorianChange) {
     if (!isEqual(this._gregorianChange, newChange)) {
@@ -182,7 +197,7 @@ export class CalendarPanelComponent implements ControlValueAccessor, OnDestroy {
 
     for (let d = 1; d <= 7; ++d)
       this.daysOfWeek.push(new DateTime({ y: 2017, m: 1, d: d + this._firstDay, hrs: 12 },
-        'UTC', 'en-us').format(this._weekDayFormat));
+        'UTC', this.dateTime.locale).format(this._weekDayFormat));
   }
 
   updateCalendar(): void {
@@ -198,7 +213,7 @@ export class CalendarPanelComponent implements ControlValueAccessor, OnDestroy {
       const col = index % 7;
 
       date.dayLength = dayLength;
-      date.text = String(date.d);
+      date.text = convertDigits(String(date.d), this.digitBase);
       date.otherMonth = (date.m !== month);
       date.highlight = (date.m === month && date.d === day);
 
@@ -230,7 +245,8 @@ export class CalendarPanelComponent implements ControlValueAccessor, OnDestroy {
   }
 
   private updateTitle(): void {
-    this.title[0] = new DateTime({ y: this.ymd?.y ?? 2021, m: this.ymd?.m ?? 1 }, 'UTC', 'en-us').format(this._yearMonthFormat);
+    this.title[0] = new DateTime({ y: this.ymd?.y ?? 2021, m: this.ymd?.m ?? 1 }, 'UTC',
+      this.dateTime.locale).format(this._yearMonthFormat);
   }
 
   reset(): void {
@@ -338,7 +354,7 @@ export class CalendarPanelComponent implements ControlValueAccessor, OnDestroy {
     else if (mode === SelectMode.MONTH) {
       const m = row * 4 + col + 1;
 
-      return (this.months[m] = new DateTime({ y: 4000, m, hrs: 12 }).format('MMM'));
+      return (this.months[m] = new DateTime({ y: 4000, m, hrs: 12 }, 'UTC', this.dateTime.locale).format('MMM'));
     }
 
     let index = row * this.cols + col;
@@ -353,7 +369,7 @@ export class CalendarPanelComponent implements ControlValueAccessor, OnDestroy {
     const maxx = (div_rd(this._maxYear - 1, multiplier[mode]) + 1) * multiplier[mode];
 
     if ((minn <= value && value <= maxx))
-      return min(max(value, this._minYear), this._maxYear).toString();
+      return convertDigits(min(max(value, this._minYear), this._maxYear).toString(), this.digitBase);
     else
       return '';
   }

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;