@netwin/angular-datetime-picker 20.0.0-rc.2 → 20.0.1
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.
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { Platform, PlatformModule } from '@angular/cdk/platform';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { InjectionToken, inject, LOCALE_ID, Injectable, NgModule, ElementRef, NgZone, output, Input, ChangeDetectionStrategy, Component, ChangeDetectorRef, ViewChild, viewChild, booleanAttribute, numberAttribute, Directive, input, forwardRef } from '@angular/core';
|
|
4
|
-
import { Subject, Subscription, take as take$1 } from 'rxjs';
|
|
5
|
-
import { take
|
|
3
|
+
import { InjectionToken, inject, LOCALE_ID, Injectable, NgModule, ElementRef, NgZone, output, Input, ChangeDetectionStrategy, Component, ChangeDetectorRef, ViewChild, viewChild, booleanAttribute, numberAttribute, Directive, input, computed, forwardRef } from '@angular/core';
|
|
4
|
+
import { Subject, Subscription, take as take$1, debounceTime, map, filter } from 'rxjs';
|
|
5
|
+
import { take } from 'rxjs/operators';
|
|
6
6
|
import { ENTER, PAGE_DOWN, PAGE_UP, END, HOME, DOWN_ARROW, UP_ARROW, RIGHT_ARROW, LEFT_ARROW, SPACE } from '@angular/cdk/keycodes';
|
|
7
7
|
import { getLocaleFirstDayOfWeek } from '@angular/common';
|
|
8
8
|
import * as i1 from '@angular/cdk/a11y';
|
|
@@ -2416,137 +2416,97 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
|
|
|
2416
2416
|
}] } });
|
|
2417
2417
|
|
|
2418
2418
|
class OwlTimerBoxComponent {
|
|
2419
|
-
showDivider = false;
|
|
2420
|
-
upBtnAriaLabel;
|
|
2421
|
-
upBtnDisabled;
|
|
2422
|
-
downBtnAriaLabel;
|
|
2423
|
-
downBtnDisabled;
|
|
2419
|
+
showDivider = input(false, ...(ngDevMode ? [{ debugName: "showDivider" }] : []));
|
|
2420
|
+
upBtnAriaLabel = input(...(ngDevMode ? [undefined, { debugName: "upBtnAriaLabel" }] : []));
|
|
2421
|
+
upBtnDisabled = input(...(ngDevMode ? [undefined, { debugName: "upBtnDisabled" }] : []));
|
|
2422
|
+
downBtnAriaLabel = input(...(ngDevMode ? [undefined, { debugName: "downBtnAriaLabel" }] : []));
|
|
2423
|
+
downBtnDisabled = input(...(ngDevMode ? [undefined, { debugName: "downBtnDisabled" }] : []));
|
|
2424
2424
|
/**
|
|
2425
2425
|
* Value would be displayed in the box
|
|
2426
2426
|
* If it is null, the box would display [value]
|
|
2427
2427
|
*/
|
|
2428
|
-
boxValue;
|
|
2429
|
-
value;
|
|
2430
|
-
min;
|
|
2431
|
-
max;
|
|
2432
|
-
step = 1;
|
|
2433
|
-
inputLabel;
|
|
2428
|
+
boxValue = input(...(ngDevMode ? [undefined, { debugName: "boxValue" }] : []));
|
|
2429
|
+
value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
|
|
2430
|
+
min = input(...(ngDevMode ? [undefined, { debugName: "min" }] : []));
|
|
2431
|
+
max = input(...(ngDevMode ? [undefined, { debugName: "max" }] : []));
|
|
2432
|
+
step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : []));
|
|
2433
|
+
inputLabel = input(...(ngDevMode ? [undefined, { debugName: "inputLabel" }] : []));
|
|
2434
2434
|
valueChange = output();
|
|
2435
2435
|
inputChange = output();
|
|
2436
|
-
inputStream = new Subject();
|
|
2437
|
-
|
|
2438
|
-
|
|
2439
|
-
get displayValue() {
|
|
2440
|
-
if (this.hasFocus) {
|
|
2441
|
-
// Don't try to reformat the value that user is currently editing
|
|
2442
|
-
return this.valueInput.nativeElement.value;
|
|
2443
|
-
}
|
|
2444
|
-
const value = this.boxValue || this.value;
|
|
2436
|
+
#inputStream = new Subject();
|
|
2437
|
+
displayValue = computed(() => {
|
|
2438
|
+
const value = this.boxValue() || this.value();
|
|
2445
2439
|
if (value === null || isNaN(value)) {
|
|
2446
2440
|
return '';
|
|
2447
2441
|
}
|
|
2448
2442
|
return value < 10 ? `0${value.toString()}` : value.toString();
|
|
2443
|
+
}, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
|
|
2444
|
+
valueInput = viewChild('valueInput', ...(ngDevMode ? [{ debugName: "valueInput" }] : []));
|
|
2445
|
+
#onValueInputMouseWheelBind = this.onValueInputMouseWheel.bind(this);
|
|
2446
|
+
constructor() {
|
|
2447
|
+
this.#inputStream
|
|
2448
|
+
.pipe(takeUntilDestroyed(), debounceTime(750), map((v) => v?.trim()), filter(Boolean), map((v) => coerceNumberProperty(v, 0)))
|
|
2449
|
+
.subscribe((val) => {
|
|
2450
|
+
this.updateValueViaInput(val);
|
|
2451
|
+
});
|
|
2449
2452
|
}
|
|
2450
|
-
valueInput;
|
|
2451
|
-
onValueInputMouseWheelBind = this.onValueInputMouseWheel.bind(this);
|
|
2452
2453
|
ngOnInit() {
|
|
2453
|
-
this.inputStreamSub = this.inputStream.pipe(debounceTime(750)).subscribe((val) => {
|
|
2454
|
-
if (val) {
|
|
2455
|
-
const inputValue = coerceNumberProperty(val, 0);
|
|
2456
|
-
this.updateValueViaInput(inputValue);
|
|
2457
|
-
}
|
|
2458
|
-
});
|
|
2459
2454
|
this.bindValueInputMouseWheel();
|
|
2460
2455
|
}
|
|
2461
2456
|
ngOnDestroy() {
|
|
2462
2457
|
this.unbindValueInputMouseWheel();
|
|
2463
|
-
this.inputStreamSub.unsubscribe();
|
|
2464
2458
|
}
|
|
2465
2459
|
upBtnClicked() {
|
|
2466
|
-
this.
|
|
2460
|
+
if (this.upBtnDisabled())
|
|
2461
|
+
return;
|
|
2462
|
+
this.updateValue(this.value() + this.step());
|
|
2467
2463
|
}
|
|
2468
2464
|
downBtnClicked() {
|
|
2469
|
-
this.
|
|
2465
|
+
if (this.downBtnDisabled())
|
|
2466
|
+
return;
|
|
2467
|
+
this.updateValue(this.value() - this.step());
|
|
2470
2468
|
}
|
|
2471
2469
|
handleInputChange(val) {
|
|
2472
|
-
this
|
|
2473
|
-
}
|
|
2474
|
-
focusIn() {
|
|
2475
|
-
this.hasFocus = true;
|
|
2470
|
+
this.#inputStream.next(val);
|
|
2476
2471
|
}
|
|
2477
2472
|
focusOut(value) {
|
|
2478
|
-
|
|
2479
|
-
|
|
2480
|
-
|
|
2481
|
-
|
|
2482
|
-
}
|
|
2473
|
+
if (!value?.trim())
|
|
2474
|
+
return;
|
|
2475
|
+
const inputValue = coerceNumberProperty(value, 0);
|
|
2476
|
+
this.updateValueViaInput(inputValue);
|
|
2483
2477
|
}
|
|
2484
2478
|
updateValue(value) {
|
|
2485
2479
|
this.valueChange.emit(value);
|
|
2486
2480
|
}
|
|
2487
2481
|
updateValueViaInput(value) {
|
|
2488
|
-
if (value > this.max || value < this.min) {
|
|
2482
|
+
if (value > this.max() || value < this.min()) {
|
|
2489
2483
|
return;
|
|
2490
2484
|
}
|
|
2491
2485
|
this.inputChange.emit(value);
|
|
2492
2486
|
}
|
|
2493
2487
|
onValueInputMouseWheel(event) {
|
|
2488
|
+
event.preventDefault();
|
|
2494
2489
|
const delta = -event.deltaY || -event.detail;
|
|
2495
2490
|
if (delta > 0) {
|
|
2496
|
-
|
|
2497
|
-
this.upBtnClicked();
|
|
2498
|
-
}
|
|
2491
|
+
this.upBtnClicked();
|
|
2499
2492
|
}
|
|
2500
2493
|
else if (delta < 0) {
|
|
2501
|
-
|
|
2502
|
-
this.downBtnClicked();
|
|
2503
|
-
}
|
|
2504
|
-
}
|
|
2505
|
-
if (event.preventDefault) {
|
|
2506
|
-
event.preventDefault();
|
|
2507
|
-
}
|
|
2508
|
-
else {
|
|
2509
|
-
event.returnValue = false;
|
|
2494
|
+
this.downBtnClicked();
|
|
2510
2495
|
}
|
|
2511
2496
|
}
|
|
2512
2497
|
bindValueInputMouseWheel() {
|
|
2513
|
-
this.valueInput.nativeElement.addEventListener('onwheel' in document ? 'wheel' : 'mousewheel', this
|
|
2498
|
+
this.valueInput().nativeElement.addEventListener('onwheel' in document ? 'wheel' : 'mousewheel', this.#onValueInputMouseWheelBind);
|
|
2514
2499
|
}
|
|
2515
2500
|
unbindValueInputMouseWheel() {
|
|
2516
|
-
this.valueInput.nativeElement.removeEventListener('onwheel' in document ? 'wheel' : 'mousewheel', this
|
|
2501
|
+
this.valueInput().nativeElement.removeEventListener('onwheel' in document ? 'wheel' : 'mousewheel', this.#onValueInputMouseWheelBind);
|
|
2517
2502
|
}
|
|
2518
2503
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: OwlTimerBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2519
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: OwlTimerBoxComponent, isStandalone: true, selector: "owl-date-time-timer-box", inputs: { showDivider: "showDivider", upBtnAriaLabel: "upBtnAriaLabel", upBtnDisabled: "upBtnDisabled", downBtnAriaLabel: "downBtnAriaLabel", downBtnDisabled: "downBtnDisabled", boxValue: "boxValue", value: "value", min: "min", max: "max", step: "step", inputLabel: "inputLabel" }, outputs: { valueChange: "valueChange", inputChange: "inputChange" }, host: { classAttribute: "owl-dt-timer-box" }, viewQueries: [{ propertyName: "valueInput", first: true, predicate: ["valueInput"], descendants: true,
|
|
2504
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: OwlTimerBoxComponent, isStandalone: true, selector: "owl-date-time-timer-box", inputs: { showDivider: { classPropertyName: "showDivider", publicName: "showDivider", isSignal: true, isRequired: false, transformFunction: null }, upBtnAriaLabel: { classPropertyName: "upBtnAriaLabel", publicName: "upBtnAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, upBtnDisabled: { classPropertyName: "upBtnDisabled", publicName: "upBtnDisabled", isSignal: true, isRequired: false, transformFunction: null }, downBtnAriaLabel: { classPropertyName: "downBtnAriaLabel", publicName: "downBtnAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, downBtnDisabled: { classPropertyName: "downBtnDisabled", publicName: "downBtnDisabled", isSignal: true, isRequired: false, transformFunction: null }, boxValue: { classPropertyName: "boxValue", publicName: "boxValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, inputLabel: { classPropertyName: "inputLabel", publicName: "inputLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", inputChange: "inputChange" }, host: { classAttribute: "owl-dt-timer-box" }, viewQueries: [{ propertyName: "valueInput", first: true, predicate: ["valueInput"], descendants: true, isSignal: true }], exportAs: ["owlDateTimeTimerBox"], ngImport: i0, template: "@if (showDivider()) {\n <div\n aria-hidden=\"true\"\n class=\"owl-dt-timer-divider\"></div>\n}\n<button\n [attr.aria-label]=\"upBtnAriaLabel()\"\n [disabled]=\"upBtnDisabled()\"\n (click)=\"upBtnClicked()\"\n class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n tabindex=\"-1\"\n type=\"button\">\n <span\n class=\"owl-dt-control-button-content\"\n tabindex=\"-1\">\n <svg\n xml:space=\"preserve\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n height=\"100%\"\n style=\"enable-background: new 0 0 451.847 451.846\"\n version=\"1.1\"\n viewBox=\"0 0 451.847 451.846\"\n width=\"100%\"\n x=\"0px\"\n xmlns=\"http://www.w3.org/2000/svg\"\n y=\"0px\">\n <path\n d=\"M248.292,106.406l194.281,194.29c12.365,12.359,12.365,32.391,0,44.744c-12.354,12.354-32.391,12.354-44.744,0\n L225.923,173.529L54.018,345.44c-12.36,12.354-32.395,12.354-44.748,0c-12.359-12.354-12.359-32.391,0-44.75L203.554,106.4\n c6.18-6.174,14.271-9.259,22.369-9.259C234.018,97.141,242.115,100.232,248.292,106.406z\" />\n </svg>\n </span>\n</button>\n<label class=\"owl-dt-timer-content\">\n <input\n #valueInput\n [value]=\"displayValue()\"\n (focusout)=\"focusOut(valueInput.value)\"\n (input)=\"handleInputChange(valueInput.value)\"\n (keydown.arrowdown)=\"downBtnClicked()\"\n (keydown.arrowup)=\"upBtnClicked()\"\n class=\"owl-dt-timer-input\"\n maxlength=\"2\" />\n <span class=\"owl-hidden-accessible\">{{ inputLabel() }}</span>\n</label>\n<button\n [attr.aria-label]=\"downBtnAriaLabel()\"\n [disabled]=\"downBtnDisabled()\"\n (click)=\"downBtnClicked()\"\n class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n tabindex=\"-1\"\n type=\"button\">\n <span\n class=\"owl-dt-control-button-content\"\n tabindex=\"-1\">\n <svg\n xml:space=\"preserve\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n height=\"100%\"\n style=\"enable-background: new 0 0 451.847 451.846\"\n version=\"1.1\"\n viewBox=\"0 0 451.847 451.846\"\n width=\"100%\"\n x=\"0px\"\n xmlns=\"http://www.w3.org/2000/svg\"\n y=\"0px\">\n <path\n d=\"M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751\n c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0\n c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z\" />\n </svg>\n </span>\n</button>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2520
2505
|
}
|
|
2521
2506
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: OwlTimerBoxComponent, decorators: [{
|
|
2522
2507
|
type: Component,
|
|
2523
|
-
args: [{ exportAs: 'owlDateTimeTimerBox', selector: 'owl-date-time-timer-box', changeDetection: ChangeDetectionStrategy.OnPush, host: { 'class': 'owl-dt-timer-box' }, template: "@if (showDivider) {\n <div\n aria-hidden=\"true\"\n class=\"owl-dt-timer-divider\"></div>\n}\n<button\n [attr.aria-label]=\"upBtnAriaLabel\"\n [disabled]=\"upBtnDisabled\"\n (click)=\"upBtnClicked()\"\n class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n tabindex=\"-1\"\n type=\"button\">\n <span\n class=\"owl-dt-control-button-content\"\n tabindex=\"-1\">\n <svg\n xml:space=\"preserve\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n height=\"100%\"\n style=\"enable-background: new 0 0 451.847 451.846\"\n version=\"1.1\"\n viewBox=\"0 0 451.847 451.846\"\n width=\"100%\"\n x=\"0px\"\n xmlns=\"http://www.w3.org/2000/svg\"\n y=\"0px\">\n <path\n d=\"M248.292,106.406l194.281,194.29c12.365,12.359,12.365,32.391,0,44.744c-12.354,12.354-32.391,12.354-44.744,0\n L225.923,173.529L54.018,345.44c-12.36,12.354-32.395,12.354-44.748,0c-12.359-12.354-12.359-32.391,0-44.75L203.554,106.4\n c6.18-6.174,14.271-9.259,22.369-9.259C234.018,97.141,242.115,100.232,248.292,106.406z\" />\n </svg>\n </span>\n</button>\n<label class=\"owl-dt-timer-content\">\n <input\n #valueInput\n [value]=\"displayValue
|
|
2524
|
-
}],
|
|
2525
|
-
type: Input
|
|
2526
|
-
}], upBtnAriaLabel: [{
|
|
2527
|
-
type: Input
|
|
2528
|
-
}], upBtnDisabled: [{
|
|
2529
|
-
type: Input
|
|
2530
|
-
}], downBtnAriaLabel: [{
|
|
2531
|
-
type: Input
|
|
2532
|
-
}], downBtnDisabled: [{
|
|
2533
|
-
type: Input
|
|
2534
|
-
}], boxValue: [{
|
|
2535
|
-
type: Input
|
|
2536
|
-
}], value: [{
|
|
2537
|
-
type: Input
|
|
2538
|
-
}], min: [{
|
|
2539
|
-
type: Input
|
|
2540
|
-
}], max: [{
|
|
2541
|
-
type: Input
|
|
2542
|
-
}], step: [{
|
|
2543
|
-
type: Input
|
|
2544
|
-
}], inputLabel: [{
|
|
2545
|
-
type: Input
|
|
2546
|
-
}], valueInput: [{
|
|
2547
|
-
type: ViewChild,
|
|
2548
|
-
args: ['valueInput', { static: true }]
|
|
2549
|
-
}] } });
|
|
2508
|
+
args: [{ exportAs: 'owlDateTimeTimerBox', selector: 'owl-date-time-timer-box', changeDetection: ChangeDetectionStrategy.OnPush, host: { 'class': 'owl-dt-timer-box' }, template: "@if (showDivider()) {\n <div\n aria-hidden=\"true\"\n class=\"owl-dt-timer-divider\"></div>\n}\n<button\n [attr.aria-label]=\"upBtnAriaLabel()\"\n [disabled]=\"upBtnDisabled()\"\n (click)=\"upBtnClicked()\"\n class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n tabindex=\"-1\"\n type=\"button\">\n <span\n class=\"owl-dt-control-button-content\"\n tabindex=\"-1\">\n <svg\n xml:space=\"preserve\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n height=\"100%\"\n style=\"enable-background: new 0 0 451.847 451.846\"\n version=\"1.1\"\n viewBox=\"0 0 451.847 451.846\"\n width=\"100%\"\n x=\"0px\"\n xmlns=\"http://www.w3.org/2000/svg\"\n y=\"0px\">\n <path\n d=\"M248.292,106.406l194.281,194.29c12.365,12.359,12.365,32.391,0,44.744c-12.354,12.354-32.391,12.354-44.744,0\n L225.923,173.529L54.018,345.44c-12.36,12.354-32.395,12.354-44.748,0c-12.359-12.354-12.359-32.391,0-44.75L203.554,106.4\n c6.18-6.174,14.271-9.259,22.369-9.259C234.018,97.141,242.115,100.232,248.292,106.406z\" />\n </svg>\n </span>\n</button>\n<label class=\"owl-dt-timer-content\">\n <input\n #valueInput\n [value]=\"displayValue()\"\n (focusout)=\"focusOut(valueInput.value)\"\n (input)=\"handleInputChange(valueInput.value)\"\n (keydown.arrowdown)=\"downBtnClicked()\"\n (keydown.arrowup)=\"upBtnClicked()\"\n class=\"owl-dt-timer-input\"\n maxlength=\"2\" />\n <span class=\"owl-hidden-accessible\">{{ inputLabel() }}</span>\n</label>\n<button\n [attr.aria-label]=\"downBtnAriaLabel()\"\n [disabled]=\"downBtnDisabled()\"\n (click)=\"downBtnClicked()\"\n class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n tabindex=\"-1\"\n type=\"button\">\n <span\n class=\"owl-dt-control-button-content\"\n tabindex=\"-1\">\n <svg\n xml:space=\"preserve\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n height=\"100%\"\n style=\"enable-background: new 0 0 451.847 451.846\"\n version=\"1.1\"\n viewBox=\"0 0 451.847 451.846\"\n width=\"100%\"\n x=\"0px\"\n xmlns=\"http://www.w3.org/2000/svg\"\n y=\"0px\">\n <path\n d=\"M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751\n c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0\n c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z\" />\n </svg>\n </span>\n</button>\n" }]
|
|
2509
|
+
}], ctorParameters: () => [] });
|
|
2550
2510
|
|
|
2551
2511
|
class OwlTimerComponent {
|
|
2552
2512
|
ngZone = inject(NgZone);
|