diff --git a/package-lock.json b/package-lock.json index 76f2aa8..6d79ddc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,7 +17,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", @@ -2735,18 +2735,19 @@ } }, "node_modules/@tubular/time": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/@tubular/time/-/time-3.3.1.tgz", - "integrity": "sha512-//FBS93VJeUWpwWToZzioar7TYAhWfVZfSWiQ+2DdVEZhDKRLKzQS3yYC9l3W/TuVUNy/5a5IVv6hPKH3LQfRw==", + "version": "3.5.1", + "resolved": "https://registry.npmjs.org/@tubular/time/-/time-3.5.1.tgz", + "integrity": "sha512-ViE2AzLoStYS6FQ9bn89nyGFEc2VZxPyI9uGnrT/YCa1XOgK8VOiuDHnusNHHjQQE9Azg7Xg2z3RH+EpRH2TQw==", "dependencies": { - "@tubular/math": "^3.0.2", - "@tubular/util": "^4.2.1" + "@tubular/math": "^3.1.0", + "@tubular/util": "^4.3.1" }, "engines": { "node": ">=10.24.1" }, "optionalDependencies": { - "by-request": "^1.2.7" + "by-request": "^1.2.7", + "json-z": "^3.3.2" } }, "node_modules/@tubular/util": { @@ -9837,6 +9838,21 @@ "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=", "dev": true }, + "node_modules/json-z": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/json-z/-/json-z-3.3.2.tgz", + "integrity": "sha512-wMfAqXqQyo+KYExh0KI0wjTa3JskKdpL2O7K854CAOeXNumC5XyFg44pzfBXSh22ynSzyaP2IyHKnjBX+Ysx+g==", + "optional": true, + "dependencies": { + "minimist": "^1.2.5" + }, + "bin": { + "json-z": "lib/cli.js" + }, + "engines": { + "node": ">=6" + } + }, "node_modules/json3": { "version": "3.3.3", "resolved": "https://registry.npmjs.org/json3/-/json3-3.3.3.tgz", @@ -10844,7 +10860,7 @@ "version": "1.2.5", "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==", - "dev": true + "devOptional": true }, "node_modules/minipass": { "version": "3.1.3", @@ -20771,13 +20787,14 @@ "integrity": "sha512-a7loxb8zHLxhq3mMSZbro2JNMxR2Vf8DoRy762RNCUKx3Ifd/pB024MVKsDF/5CVywdS5SvhavVtLtmpMRkmPQ==" }, "@tubular/time": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/@tubular/time/-/time-3.3.1.tgz", - "integrity": "sha512-//FBS93VJeUWpwWToZzioar7TYAhWfVZfSWiQ+2DdVEZhDKRLKzQS3yYC9l3W/TuVUNy/5a5IVv6hPKH3LQfRw==", + "version": "3.5.1", + "resolved": "https://registry.npmjs.org/@tubular/time/-/time-3.5.1.tgz", + "integrity": "sha512-ViE2AzLoStYS6FQ9bn89nyGFEc2VZxPyI9uGnrT/YCa1XOgK8VOiuDHnusNHHjQQE9Azg7Xg2z3RH+EpRH2TQw==", "requires": { - "@tubular/math": "^3.0.2", - "@tubular/util": "^4.2.1", - "by-request": "^1.2.7" + "@tubular/math": "^3.1.0", + "@tubular/util": "^4.3.1", + "by-request": "^1.2.7", + "json-z": "^3.3.2" } }, "@tubular/util": { @@ -26248,6 +26265,15 @@ "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=", "dev": true }, + "json-z": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/json-z/-/json-z-3.3.2.tgz", + "integrity": "sha512-wMfAqXqQyo+KYExh0KI0wjTa3JskKdpL2O7K854CAOeXNumC5XyFg44pzfBXSh22ynSzyaP2IyHKnjBX+Ysx+g==", + "optional": true, + "requires": { + "minimist": "^1.2.5" + } + }, "json3": { "version": "3.3.3", "resolved": "https://registry.npmjs.org/json3/-/json3-3.3.3.tgz", @@ -27031,7 +27057,7 @@ "version": "1.2.5", "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==", - "dev": true + "devOptional": true }, "minipass": { "version": "3.1.3", diff --git a/package.json b/package.json index ff601da..26d320c 100644 --- a/package.json +++ b/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", diff --git a/projects/ng-widgets-showcase/src/app/app.component.html b/projects/ng-widgets-showcase/src/app/app.component.html index f5c0499..052f539 100644 --- a/projects/ng-widgets-showcase/src/app/app.component.html +++ b/projects/ng-widgets-showcase/src/app/app.component.html @@ -179,11 +179,12 @@
diff --git a/projects/ng-widgets-showcase/src/main.ts b/projects/ng-widgets-showcase/src/main.ts index c7b673c..63e271f 100644 --- a/projects/ng-widgets-showcase/src/main.ts +++ b/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(); } diff --git a/projects/tubular-ng-widgets/package.json b/projects/tubular-ng-widgets/package.json index 860ed0a..893d2da 100644 --- a/projects/tubular-ng-widgets/package.json +++ b/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", diff --git a/projects/tubular-ng-widgets/src/lib/calendar-panel/calendar-panel.component.ts b/projects/tubular-ng-widgets/src/lib/calendar-panel/calendar-panel.component.ts index 2621f48..92fe6c8 100644 --- a/projects/tubular-ng-widgets/src/lib/calendar-panel/calendar-panel.component.ts +++ b/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 ''; } diff --git a/projects/tubular-ng-widgets/src/lib/digit-sequence-editor/digit-sequence-editor.directive.html b/projects/tubular-ng-widgets/src/lib/digit-sequence-editor/digit-sequence-editor.directive.html index fa4269c..77604c9 100644 --- a/projects/tubular-ng-widgets/src/lib/digit-sequence-editor/digit-sequence-editor.directive.html +++ b/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">  {{(item.alt_swipeAbove || item.swipeAbove) ?? '\u00A0'}} {{(item.alt_swipeBelow || item.swipeBelow) ?? '\u00A0'}} {{filterDisplayChars(item.alt_value || item.value)}} 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; diff --git a/projects/tubular-ng-widgets/src/lib/time-editor/time-editor.component.ts b/projects/tubular-ng-widgets/src/lib/time-editor/time-editor.component.ts index 2855915..d5189c1 100644 --- a/projects/tubular-ng-widgets/src/lib/time-editor/time-editor.component.ts +++ b/projects/tubular-ng-widgets/src/lib/time-editor/time-editor.component.ts @@ -868,7 +868,7 @@ export class TimeEditorComponent extends DigitSequenceEditorDirective 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;