adb-shared 5.0.51 → 5.0.53
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.
- package/esm2022/lib/components/adb-buttons/help-button.component.mjs +8 -5
- package/esm2022/lib/components/date-picker/adb-date-picker.component.mjs +2 -5
- package/esm2022/lib/components/date-picker/adb-date-picker.directive.mjs +21 -20
- package/fesm2022/adb-shared.mjs +26 -25
- package/fesm2022/adb-shared.mjs.map +1 -1
- package/lib/components/adb-buttons/help-button.component.d.ts +2 -1
- package/lib/components/date-picker/adb-date-picker.component.d.ts +1 -2
- package/lib/components/date-picker/adb-date-picker.directive.d.ts +6 -5
- package/package.json +1 -1
package/fesm2022/adb-shared.mjs
CHANGED
|
@@ -1076,7 +1076,6 @@ class AdbDatePickerComponent {
|
|
|
1076
1076
|
this.weekDays = AdbDatePickerComponent.WEEK_DAYS;
|
|
1077
1077
|
this.noYearMode = false;
|
|
1078
1078
|
this.selectDate = new EventEmitter();
|
|
1079
|
-
this.hide = new EventEmitter();
|
|
1080
1079
|
}
|
|
1081
1080
|
ngOnInit() {
|
|
1082
1081
|
if (this.settings) {
|
|
@@ -1213,7 +1212,7 @@ class AdbDatePickerComponent {
|
|
|
1213
1212
|
}
|
|
1214
1213
|
}
|
|
1215
1214
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdbDatePickerComponent, deps: [{ token: i0.ElementRef }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1216
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdbDatePickerComponent, selector: "adb-date-picker", inputs: { initialDate: "initialDate", settings: "settings", toLeft: "toLeft", id: "id" }, outputs: { selectDate: "selectDate"
|
|
1215
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdbDatePickerComponent, selector: "adb-date-picker", inputs: { initialDate: "initialDate", settings: "settings", toLeft: "toLeft", id: "id" }, outputs: { selectDate: "selectDate" }, host: { properties: { "id": "this.id" } }, ngImport: i0, template: "<div class=\"position-relative\" [class.to-left]=\"toLeft\">\r\n <nav class=\"bg-white shadow rounded position-absolute\" style=\"width:350px\">\r\n <header class=\"bg-primary p-2 rounded-top d-flex justify-content-between align-items-center gap-1\">\r\n <button tabIndex=\"-1\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onPrev()\" [disabled]=\"noYearMode&¤tMonth===0\"><span class=\"fa fa-chevron-left\"></span></button>\r\n <ng-container *ngIf=\"!years&&!months\">\r\n <button tabIndex=\"-1\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onShowMonth();$event.stopPropagation()\">{{selectedDate|adbLocaleDate:'MMM'}}</button>\r\n <button *ngIf=\"!noYearMode\" tabIndex=\"-1\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onShowYear();$event.stopPropagation()\">{{selectedDate|date:'yyyy'}}</button>\r\n </ng-container>\r\n <button tabIndex=\"-1\" *ngIf=\"years\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"years=null;$event.stopPropagation()\">{{years[0].title}} - {{years[years.length-1].title}}</button>\r\n <button tabIndex=\"-1\" *ngIf=\"months\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onShowYear();$event.stopPropagation()\">{{selectedDate|date:'yyyy'}}</button>\r\n <button tabIndex=\"-1\" class=\"btn btn-primary text-white rounded-pill\" type=\"button\" (click)=\"onNext()\" [disabled]=\"noYearMode&¤tMonth===11\"><span class=\"fa fa-chevron-right\"></span></button>\r\n </header>\r\n <div class=\"p-0 border calendar\">\r\n <ul class=\"list-unstyled row\" *ngIf=\"years\">\r\n <li class=\"col-3 text-center px-2 py-3\" *ngFor=\"let year of years\">\r\n <button type=\"button\" tabIndex=\"-1\" class=\"btn btn-sm btn-outline-secondary rounded-pill\" (click)=\"onSelectYear(year.value);$event.stopPropagation()\" [class.active]=\"year.hasObservation\" [ngClass]=\"{'border border-secondary':year.isThisYear}\">{{year.title}}</button>\r\n </li>\r\n </ul>\r\n <ul class=\"list-unstyled row\" *ngIf=\"months\">\r\n <li class=\"col-4 text-center px-2 py-3\" *ngFor=\"let month of months\">\r\n <button type=\"button\" tabIndex=\"-1\" class=\"btn btn-sm btn-outline-secondary rounded-pill\" (click)=\"onSelectMonth(month.value);$event.stopPropagation()\" [class.active]=\"month.observation\" [ngClass]=\"{'border border-secondary':month.isThisMonth}\">\r\n {{'MONTHS.'+(month.value+1)|translate}}\r\n </button>\r\n </li>\r\n </ul>\r\n <div class=\"days\" *ngIf=\"!years&&!months\">\r\n <div class=\"text-center border-bottom py-2 text-muted\" *ngFor=\"let weekDay of weekDays\">{{'WEEK_DAYS.'+weekDay|translate}}</div>\r\n <ng-container *ngFor=\"let week of weeks\">\r\n <button tabIndex=\"-1\" class=\"btn rounded-circle p-0 m-2\" *ngFor=\"let day of week.days\" (click)=\"onSelectDate(day)\" type=\"button\" \r\n [class.border]=\"day.isToday\" [class.bg-primary]=\"day.isSelected\" [class.text-white]=\"day.isSelected\" [ngClass]=\"{'pe-none text-muted opacity-50':!day.inMonth||!day.isInRange}\">\r\n <small>{{day.value|date:'d'}}</small>\r\n </button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </nav>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: LocaleDatePipe, name: "adbLocaleDate" }] }); }
|
|
1217
1216
|
}
|
|
1218
1217
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdbDatePickerComponent, decorators: [{
|
|
1219
1218
|
type: Component,
|
|
@@ -1231,8 +1230,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1231
1230
|
type: Input
|
|
1232
1231
|
}], selectDate: [{
|
|
1233
1232
|
type: Output
|
|
1234
|
-
}], hide: [{
|
|
1235
|
-
type: Output
|
|
1236
1233
|
}] } });
|
|
1237
1234
|
|
|
1238
1235
|
class AdbDatePickerService {
|
|
@@ -1250,8 +1247,9 @@ class AdbDatePickerDirective {
|
|
|
1250
1247
|
this.elementRef = elementRef;
|
|
1251
1248
|
this.adbDatePickerService = adbDatePickerService;
|
|
1252
1249
|
this.translate = translate;
|
|
1253
|
-
this.autocomplete = 'off';
|
|
1254
1250
|
this.subscriptions = new Subscription();
|
|
1251
|
+
this.autocomplete = 'off';
|
|
1252
|
+
this.adbBlur = new EventEmitter();
|
|
1255
1253
|
this.format = 'yyyy-MM-dd';
|
|
1256
1254
|
this.settings = null;
|
|
1257
1255
|
this.onValidationChange = () => { };
|
|
@@ -1269,18 +1267,15 @@ class AdbDatePickerDirective {
|
|
|
1269
1267
|
const viewRef = this.viewContainerRef.createComponent(AdbDatePickerComponent);
|
|
1270
1268
|
viewRef.instance.settings = this.settings;
|
|
1271
1269
|
viewRef.instance.toLeft = this.toLeft;
|
|
1272
|
-
viewRef.instance.initialDate = this.
|
|
1270
|
+
viewRef.instance.initialDate = this.currentDate;
|
|
1273
1271
|
this.id = this.getId();
|
|
1274
1272
|
viewRef.instance.id = this.id;
|
|
1275
1273
|
viewRef.instance.selectDate.subscribe((date) => {
|
|
1276
1274
|
this.renderer.setProperty(this.elementRef.nativeElement, 'value', formatDate(date, this.format, this.translate.currentLang));
|
|
1277
1275
|
this.onChange(date);
|
|
1278
|
-
this.
|
|
1279
|
-
this.onHide();
|
|
1280
|
-
this.elementRef.nativeElement.blur();
|
|
1281
|
-
});
|
|
1282
|
-
viewRef.instance.hide.subscribe(() => {
|
|
1276
|
+
this.currentDate = date;
|
|
1283
1277
|
this.onHide();
|
|
1278
|
+
this.adbBlur.emit(date);
|
|
1284
1279
|
});
|
|
1285
1280
|
this.adbDatePickerService.viewRef = viewRef;
|
|
1286
1281
|
}
|
|
@@ -1300,11 +1295,11 @@ class AdbDatePickerDirective {
|
|
|
1300
1295
|
onTabDown() {
|
|
1301
1296
|
this.updateValueOnLeave();
|
|
1302
1297
|
this.onHide();
|
|
1298
|
+
this.adbBlur.emit(this.currentDate);
|
|
1303
1299
|
}
|
|
1304
|
-
|
|
1300
|
+
onEscdOWN() {
|
|
1305
1301
|
this.updateValueOnLeave();
|
|
1306
1302
|
this.onHide();
|
|
1307
|
-
this.elementRef.nativeElement.blur();
|
|
1308
1303
|
}
|
|
1309
1304
|
onHide() {
|
|
1310
1305
|
this.adbDatePickerService.viewRef = null;
|
|
@@ -1320,6 +1315,7 @@ class AdbDatePickerDirective {
|
|
|
1320
1315
|
if (!clickedInside) {
|
|
1321
1316
|
this.updateValueOnLeave();
|
|
1322
1317
|
this.onHide();
|
|
1318
|
+
this.adbBlur.emit(this.currentDate);
|
|
1323
1319
|
}
|
|
1324
1320
|
}
|
|
1325
1321
|
}
|
|
@@ -1327,8 +1323,8 @@ class AdbDatePickerDirective {
|
|
|
1327
1323
|
}
|
|
1328
1324
|
updateValueOnLeave() {
|
|
1329
1325
|
if (this.isValid) {
|
|
1330
|
-
if (this.
|
|
1331
|
-
this.renderer.setProperty(this.elementRef.nativeElement, 'value', formatDate(this.
|
|
1326
|
+
if (this.currentDate) {
|
|
1327
|
+
this.renderer.setProperty(this.elementRef.nativeElement, 'value', formatDate(this.currentDate, this.format, this.translate.currentLang));
|
|
1332
1328
|
}
|
|
1333
1329
|
else {
|
|
1334
1330
|
this.renderer.setProperty(this.elementRef.nativeElement, 'value', '');
|
|
@@ -1342,12 +1338,12 @@ class AdbDatePickerDirective {
|
|
|
1342
1338
|
validate(control) {
|
|
1343
1339
|
const value = control.value;
|
|
1344
1340
|
if (!value) {
|
|
1345
|
-
this.
|
|
1341
|
+
this.currentDate = null;
|
|
1346
1342
|
this.isValid = true;
|
|
1347
1343
|
return null;
|
|
1348
1344
|
}
|
|
1349
1345
|
if (value instanceof Date) {
|
|
1350
|
-
this.
|
|
1346
|
+
this.currentDate = value;
|
|
1351
1347
|
this.isValid = true;
|
|
1352
1348
|
return null;
|
|
1353
1349
|
}
|
|
@@ -1366,7 +1362,7 @@ class AdbDatePickerDirective {
|
|
|
1366
1362
|
}
|
|
1367
1363
|
writeValue(value) {
|
|
1368
1364
|
if (!value) {
|
|
1369
|
-
this.
|
|
1365
|
+
this.currentDate = null;
|
|
1370
1366
|
this.renderer.setProperty(this.elementRef.nativeElement, 'value', '');
|
|
1371
1367
|
return;
|
|
1372
1368
|
}
|
|
@@ -1379,8 +1375,8 @@ class AdbDatePickerDirective {
|
|
|
1379
1375
|
value = date;
|
|
1380
1376
|
}
|
|
1381
1377
|
if (value instanceof Date) {
|
|
1382
|
-
this.
|
|
1383
|
-
this.renderer.setProperty(this.elementRef.nativeElement, 'value', formatDate(this.
|
|
1378
|
+
this.currentDate = value;
|
|
1379
|
+
this.renderer.setProperty(this.elementRef.nativeElement, 'value', formatDate(this.currentDate, this.format, this.translate.currentLang));
|
|
1384
1380
|
}
|
|
1385
1381
|
}
|
|
1386
1382
|
registerOnChange(fn) {
|
|
@@ -1400,7 +1396,7 @@ class AdbDatePickerDirective {
|
|
|
1400
1396
|
return '' + Math.floor(Math.random() * Date.now());
|
|
1401
1397
|
}
|
|
1402
1398
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdbDatePickerDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: AdbDatePickerService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1403
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AdbDatePickerDirective, selector: "input[adbDatepicker]", inputs: { format: "format", toLeft: "toLeft", settings: "settings" }, host: { listeners: { "click": "onClick()", "keyup": "onKeyup($event)", "keydown.shift.tab": "onTabDown()", "keydown.tab": "onTabDown()", "keydown.esc": "
|
|
1399
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AdbDatePickerDirective, selector: "input[adbDatepicker]", inputs: { format: "format", toLeft: "toLeft", settings: "settings" }, outputs: { adbBlur: "adbBlur" }, host: { listeners: { "click": "onClick()", "keyup": "onKeyup($event)", "keydown.shift.tab": "onTabDown()", "keydown.tab": "onTabDown()", "keydown.esc": "onEscdOWN()", "document:click": "onCheckOutSideClick($event.target)" }, properties: { "autocomplete": "this.autocomplete" } }, providers: [{
|
|
1404
1400
|
provide: NG_VALUE_ACCESSOR, useExisting: forwardRef((() => AdbDatePickerDirective)),
|
|
1405
1401
|
multi: true
|
|
1406
1402
|
},
|
|
@@ -1427,6 +1423,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1427
1423
|
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: AdbDatePickerService }, { type: i3.TranslateService }]; }, propDecorators: { autocomplete: [{
|
|
1428
1424
|
type: HostBinding,
|
|
1429
1425
|
args: ['autocomplete']
|
|
1426
|
+
}], adbBlur: [{
|
|
1427
|
+
type: Output
|
|
1430
1428
|
}], format: [{
|
|
1431
1429
|
type: Input
|
|
1432
1430
|
}], toLeft: [{
|
|
@@ -1445,7 +1443,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1445
1443
|
}, {
|
|
1446
1444
|
type: HostListener,
|
|
1447
1445
|
args: ['keydown.tab']
|
|
1448
|
-
}],
|
|
1446
|
+
}], onEscdOWN: [{
|
|
1449
1447
|
type: HostListener,
|
|
1450
1448
|
args: ['keydown.esc']
|
|
1451
1449
|
}], onCheckOutSideClick: [{
|
|
@@ -1637,6 +1635,7 @@ class AdbHelpButtonComponent {
|
|
|
1637
1635
|
constructor(elementRef) {
|
|
1638
1636
|
this.elementRef = elementRef;
|
|
1639
1637
|
this.showHelp = false;
|
|
1638
|
+
this.label = '';
|
|
1640
1639
|
}
|
|
1641
1640
|
ngOnInit() {
|
|
1642
1641
|
this.id = +Math.floor(Math.random() * Date.now());
|
|
@@ -1654,12 +1653,14 @@ class AdbHelpButtonComponent {
|
|
|
1654
1653
|
this.showHelp = !this.showHelp;
|
|
1655
1654
|
}
|
|
1656
1655
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdbHelpButtonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1657
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdbHelpButtonComponent, selector: "adb-help-button", ngImport: i0, template: "<div>\r\n <button type=\"button\" id=\"help-button\" tabindex=\"-1\" (adbClickOutside)=\"showHelp=false\"
|
|
1656
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdbHelpButtonComponent, selector: "adb-help-button", inputs: { label: "label" }, ngImport: i0, template: "<div>\r\n <button type=\"button\" id=\"help-button\" tabindex=\"-1\" (adbClickOutside)=\"showHelp=false\"\r\n class=\"w-auto btn btn-invisible p-0 w-auto d-flex gap-1 align-items-baseline\"\r\n [attr.aria-controls]=\"id\" attr.aria-label=\"Help\" [attr.aria-expanded]=\"showHelp\" (click)=\"onClick()\">\r\n <span class=\"fas fa-question-circle text-primary\"></span>\r\n {{label}}\r\n </button>\r\n</div>\r\n<div>\r\n <div *ngIf=\"showHelp\" [id]=\"id\" class=\"position-absolute start-0 w-100 adb-plate-primary text-start shadow \" style=\"z-index:4\">\r\n <div class=\"d-flex align-items-center\">\r\n <div><ng-content></ng-content></div>\r\n <div class=\"ms-auto align-self-start d-flex align-items-start\">\r\n <button type=\"button\" class=\"btn-close p-1\" data-bs-dismiss=\"modal\" aria-label=\"Close\" (click)=\"showHelp=false\"></button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[adbClickOutside]", outputs: ["adbClickOutside"] }] }); }
|
|
1658
1657
|
}
|
|
1659
1658
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdbHelpButtonComponent, decorators: [{
|
|
1660
1659
|
type: Component,
|
|
1661
|
-
args: [{ selector: 'adb-help-button', template: "<div>\r\n <button type=\"button\" id=\"help-button\" tabindex=\"-1\" (adbClickOutside)=\"showHelp=false\"
|
|
1662
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }
|
|
1660
|
+
args: [{ selector: 'adb-help-button', template: "<div>\r\n <button type=\"button\" id=\"help-button\" tabindex=\"-1\" (adbClickOutside)=\"showHelp=false\"\r\n class=\"w-auto btn btn-invisible p-0 w-auto d-flex gap-1 align-items-baseline\"\r\n [attr.aria-controls]=\"id\" attr.aria-label=\"Help\" [attr.aria-expanded]=\"showHelp\" (click)=\"onClick()\">\r\n <span class=\"fas fa-question-circle text-primary\"></span>\r\n {{label}}\r\n </button>\r\n</div>\r\n<div>\r\n <div *ngIf=\"showHelp\" [id]=\"id\" class=\"position-absolute start-0 w-100 adb-plate-primary text-start shadow \" style=\"z-index:4\">\r\n <div class=\"d-flex align-items-center\">\r\n <div><ng-content></ng-content></div>\r\n <div class=\"ms-auto align-self-start d-flex align-items-start\">\r\n <button type=\"button\" class=\"btn-close p-1\" data-bs-dismiss=\"modal\" aria-label=\"Close\" (click)=\"showHelp=false\"></button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>" }]
|
|
1661
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { label: [{
|
|
1662
|
+
type: Input
|
|
1663
|
+
}] } });
|
|
1663
1664
|
|
|
1664
1665
|
class AdbButtonsModule {
|
|
1665
1666
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdbButtonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|