@huntsman-cancer-institute/input 17.3.4 → 17.5.0
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/date/date-date.component.d.ts +3 -1
- package/date/date-validator.d.ts +3 -0
- package/esm2022/date/date-date-range.component.mjs +1 -1
- package/esm2022/date/date-date.component.mjs +49 -96
- package/esm2022/date/date-validator.mjs +12 -4
- package/esm2022/dropdown/dropdown-select.component.mjs +3 -3
- package/esm2022/select/custom-combobox.component.mjs +5 -5
- package/fesm2022/huntsman-cancer-institute-input.mjs +67 -106
- package/fesm2022/huntsman-cancer-institute-input.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -491,7 +491,7 @@ class DropdownSelectComponent {
|
|
|
491
491
|
(keyup)="onKeyUp($event)"
|
|
492
492
|
(keydown)="onKeyDown($event)"
|
|
493
493
|
(keypress)="onKeyPress($event)"
|
|
494
|
-
(click)="showResults()" *ngIf="!disabled" />
|
|
494
|
+
(click)="showResults()" *ngIf="!disabled" attr.aria-label="{{getPlaceholder()}}"/>
|
|
495
495
|
</li>
|
|
496
496
|
</ul>
|
|
497
497
|
<span class="icon-drop-menu" *ngIf="inputState===0" (click)="showResults()">
|
|
@@ -547,7 +547,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
|
|
|
547
547
|
(keyup)="onKeyUp($event)"
|
|
548
548
|
(keydown)="onKeyDown($event)"
|
|
549
549
|
(keypress)="onKeyPress($event)"
|
|
550
|
-
(click)="showResults()" *ngIf="!disabled" />
|
|
550
|
+
(click)="showResults()" *ngIf="!disabled" attr.aria-label="{{getPlaceholder()}}"/>
|
|
551
551
|
</li>
|
|
552
552
|
</ul>
|
|
553
553
|
<span class="icon-drop-menu" *ngIf="inputState===0" (click)="showResults()">
|
|
@@ -1105,13 +1105,15 @@ class DateValidator {
|
|
|
1105
1105
|
static { this.minValue = undefined; }
|
|
1106
1106
|
static { this.maxValue = undefined; }
|
|
1107
1107
|
static dateFormatValidator(ac) {
|
|
1108
|
-
|
|
1108
|
+
let dateArr = ac.value.split("/");
|
|
1109
|
+
if (dateArr.length != 3 || dateArr[0].length > 3 || dateArr[0].length < 1 || dateArr[1].length > 3 ||
|
|
1110
|
+
dateArr[1].length < 1 || dateArr[2].length !== 4) {
|
|
1109
1111
|
return { "dateFormatValidator": true };
|
|
1110
1112
|
}
|
|
1111
1113
|
return null;
|
|
1112
1114
|
}
|
|
1113
1115
|
static dateRangeValidator(ac) {
|
|
1114
|
-
if (ac && ac.value && DateValidator.minValue && DateValidator.maxValue && moment(ac.value, "M/D/YYYY", true).isValid()) {
|
|
1116
|
+
if (ac && ac.value && DateValidator.minValue && DateValidator.maxValue && (moment(ac.value, "M/D/YYYY", true).isValid() || moment(ac.value, "MM/DD/YYYY", true).isValid())) {
|
|
1115
1117
|
let dateValue = moment(ac.value);
|
|
1116
1118
|
let minDate = moment(DateValidator.convertNgbStructToDate(DateValidator.minValue));
|
|
1117
1119
|
let maxDate = moment(DateValidator.convertNgbStructToDate(DateValidator.maxValue));
|
|
@@ -1121,11 +1123,17 @@ class DateValidator {
|
|
|
1121
1123
|
}
|
|
1122
1124
|
return null;
|
|
1123
1125
|
}
|
|
1126
|
+
static dateInvalidValidator(ac) {
|
|
1127
|
+
if (ac && ac.value && !moment(ac.value, "M/D/YYYY", true).isValid() && !moment(ac.value, "MM/DD/YYYY", true).isValid()) {
|
|
1128
|
+
return { "dateInvalidValidator": true };
|
|
1129
|
+
}
|
|
1130
|
+
return null;
|
|
1131
|
+
}
|
|
1124
1132
|
static convertNgbStructToDate(struct) {
|
|
1125
1133
|
return { year: struct.year, month: struct.month - 1, day: struct.day };
|
|
1126
1134
|
}
|
|
1127
1135
|
static inRange(ac) {
|
|
1128
|
-
if (ac && ac.value && DateValidator.minValue && DateValidator.maxValue && moment(ac.value, "M/D/YYYY", true).isValid()) {
|
|
1136
|
+
if (ac && ac.value && DateValidator.minValue && DateValidator.maxValue && (moment(ac.value, "M/D/YYYY", true).isValid() || moment(ac.value, "MM/DD/YYYY", true).isValid())) {
|
|
1129
1137
|
let dateValue = moment(ac.value);
|
|
1130
1138
|
let minDate = moment(DateValidator.convertNgbStructToDate(DateValidator.minValue));
|
|
1131
1139
|
let maxDate = moment(DateValidator.convertNgbStructToDate(DateValidator.maxValue));
|
|
@@ -1266,6 +1274,7 @@ class DateComponent extends DateBase {
|
|
|
1266
1274
|
// Binded data from the parent component.
|
|
1267
1275
|
this.dateFormat = "shortDate";
|
|
1268
1276
|
this.inputDataChange = new EventEmitter();
|
|
1277
|
+
this.dateValid = new EventEmitter();
|
|
1269
1278
|
// only validate if user is typing
|
|
1270
1279
|
this.validate = false;
|
|
1271
1280
|
this.focused = false;
|
|
@@ -1275,7 +1284,7 @@ class DateComponent extends DateBase {
|
|
|
1275
1284
|
*/
|
|
1276
1285
|
ngOnInit() {
|
|
1277
1286
|
this.dateForm = this.formBuilder.group({
|
|
1278
|
-
dateInput: new UntypedFormControl("", [DateValidator.dateFormatValidator, DateValidator.dateRangeValidator])
|
|
1287
|
+
dateInput: new UntypedFormControl("", [DateValidator.dateFormatValidator, DateValidator.dateRangeValidator, DateValidator.dateInvalidValidator])
|
|
1279
1288
|
});
|
|
1280
1289
|
this.onChanges();
|
|
1281
1290
|
this.updateInternalDataFromModel();
|
|
@@ -1349,45 +1358,35 @@ class DateComponent extends DateBase {
|
|
|
1349
1358
|
this.state = 0;
|
|
1350
1359
|
this.dateForm.controls["dateInput"].setValue("");
|
|
1351
1360
|
this.inputDataChange.emit(this.inputData);
|
|
1361
|
+
this.dateValid.emit(true);
|
|
1352
1362
|
}
|
|
1353
1363
|
onKeyUpInput(event) {
|
|
1354
1364
|
// Check for when the input is deleted before being saved
|
|
1355
|
-
if (event.key === "Delete" || event.key === "Backspace") {
|
|
1356
|
-
|
|
1357
|
-
this.clear();
|
|
1358
|
-
}
|
|
1359
|
-
}
|
|
1360
|
-
// update range so that the date range validator can run accurately
|
|
1361
|
-
DateValidator.minValue = this.minDate;
|
|
1362
|
-
DateValidator.maxValue = this.maxDate;
|
|
1363
|
-
// Get the updated dateForm value
|
|
1364
|
-
let eventTarget = event.target;
|
|
1365
|
-
let inputValue = eventTarget.value;
|
|
1366
|
-
this.dateForm.controls["dateInput"].patchValue(inputValue);
|
|
1367
|
-
// if we have a good date and is within the range update the picker
|
|
1368
|
-
if (DateValidator.inRange(this.dateForm.controls["dateInput"])) {
|
|
1369
|
-
this.validate = false;
|
|
1370
|
-
this.inputData = this.datePipe.transform(this.dateForm.controls["dateInput"].value, this.dateFormat);
|
|
1371
|
-
this.updateInternalDataFromModel();
|
|
1372
|
-
this.dateForm.controls["dateInput"].setValue(this.inputData);
|
|
1373
|
-
this.inputDataChange.emit(this.inputData);
|
|
1365
|
+
if ((event.key === "Delete" || event.key === "Backspace") && this.dateForm.controls["dateInput"].value.length === 0) {
|
|
1366
|
+
this.clear();
|
|
1374
1367
|
}
|
|
1375
1368
|
else {
|
|
1376
|
-
|
|
1377
|
-
|
|
1378
|
-
|
|
1379
|
-
|
|
1380
|
-
|
|
1381
|
-
|
|
1382
|
-
|
|
1383
|
-
|
|
1384
|
-
|
|
1385
|
-
|
|
1386
|
-
|
|
1387
|
-
|
|
1388
|
-
|
|
1389
|
-
|
|
1390
|
-
|
|
1369
|
+
// update range so that the date range validator can run accurately
|
|
1370
|
+
DateValidator.minValue = this.minDate;
|
|
1371
|
+
DateValidator.maxValue = this.maxDate;
|
|
1372
|
+
// Get the updated dateForm value
|
|
1373
|
+
let eventTarget = event.target;
|
|
1374
|
+
let inputValue = eventTarget.value;
|
|
1375
|
+
this.dateForm.controls["dateInput"].patchValue(inputValue);
|
|
1376
|
+
// if we have a good date and is within the range update the picker
|
|
1377
|
+
if (DateValidator.inRange(this.dateForm.controls["dateInput"])) {
|
|
1378
|
+
this.validate = false;
|
|
1379
|
+
this.getDateValid();
|
|
1380
|
+
this.inputData = this.datePipe.transform(this.dateForm.controls["dateInput"].value, this.dateFormat);
|
|
1381
|
+
this.updateInternalDataFromModel();
|
|
1382
|
+
this.dateForm.controls["dateInput"].setValue(this.inputData);
|
|
1383
|
+
this.inputDataChange.emit(this.inputData);
|
|
1384
|
+
}
|
|
1385
|
+
else {
|
|
1386
|
+
this.validate = true;
|
|
1387
|
+
this.getDateValid();
|
|
1388
|
+
}
|
|
1389
|
+
}
|
|
1391
1390
|
}
|
|
1392
1391
|
/**
|
|
1393
1392
|
* NgbDateStruct stores day, month and year. Convert this to ISO8601.
|
|
@@ -1404,8 +1403,20 @@ class DateComponent extends DateBase {
|
|
|
1404
1403
|
}
|
|
1405
1404
|
return date.year + "-" + ((date.month < 10) ? "0" : "") + date.month + "-" + ((date.day < 10) ? "0" : "") + date.day + "T12:00-06:00";
|
|
1406
1405
|
}
|
|
1406
|
+
getDateValid() {
|
|
1407
|
+
if (this.dateForm.get("dateInput").hasError("dateFormatValidator")
|
|
1408
|
+
|| this.dateForm.get("dateInput").hasError("dateRangeValidator")
|
|
1409
|
+
|| this.dateForm.get("dateInput").hasError("dateInvalidValidator")) {
|
|
1410
|
+
this.dateValid.emit(false);
|
|
1411
|
+
return false;
|
|
1412
|
+
}
|
|
1413
|
+
else {
|
|
1414
|
+
this.dateValid.emit(true);
|
|
1415
|
+
return true;
|
|
1416
|
+
}
|
|
1417
|
+
}
|
|
1407
1418
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DateComponent, deps: [{ token: i0.ElementRef }, { token: i2.UntypedFormBuilder }, { token: i1.DatePipe }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1408
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: DateComponent, selector: "hci-date", inputs: { dateFormat: "dateFormat", minDate: "minDate", maxDate: "maxDate", label: "label", inputData: "inputData", modifiedData: "modifiedData" }, outputs: { inputDataChange: "inputDataChange" }, host: { listeners: { "document:click": "handleOutsideEvent($event)" } }, providers: [DatePipe, DateValidator], viewQueries: [{ propertyName: "dp", first: true, predicate: ["dp"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
|
|
1419
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: DateComponent, selector: "hci-date", inputs: { dateFormat: "dateFormat", minDate: "minDate", maxDate: "maxDate", label: "label", inputData: "inputData", modifiedData: "modifiedData" }, outputs: { inputDataChange: "inputDataChange", dateValid: "dateValid" }, host: { listeners: { "document:click": "handleOutsideEvent($event)" } }, providers: [DatePipe, DateValidator], viewQueries: [{ propertyName: "dp", first: true, predicate: ["dp"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
|
|
1409
1420
|
<div class="form-group">
|
|
1410
1421
|
<div class="input-group d-flex">
|
|
1411
1422
|
<form [formGroup]="dateForm" class="flex-grow-1">
|
|
@@ -1414,7 +1425,7 @@ class DateComponent extends DateBase {
|
|
|
1414
1425
|
<input type="text" (keyup)="onKeyUpInput($event)"
|
|
1415
1426
|
(ngModelChange)="onChange($event)" class="form-control"
|
|
1416
1427
|
formControlName="dateInput" placeholder="{{label}}"
|
|
1417
|
-
aria-label="date" aria-describedby="basic-addon2" />
|
|
1428
|
+
aria-label="date" aria-describedby="basic-addon2" attr.aria-label="hci-ng-date-{{label}}"/>
|
|
1418
1429
|
<span class="input-group-text" id="basic-addon2" (click)="clear()">
|
|
1419
1430
|
<i class="fas fa-times"></i>
|
|
1420
1431
|
</span>
|
|
@@ -1426,43 +1437,17 @@ class DateComponent extends DateBase {
|
|
|
1426
1437
|
class="invalid-date">Enter date as M/D/YYYY or MM/DD/YYYY</div>
|
|
1427
1438
|
<div *ngIf="validate && dateForm.get('dateInput').hasError('dateRangeValidator')"
|
|
1428
1439
|
class="invalid-date">Invalid Date Range</div>
|
|
1440
|
+
<div *ngIf="validate && dateForm.get('dateInput').hasError('dateInvalidValidator')"
|
|
1441
|
+
class="invalid-date">Not a real date</div>
|
|
1429
1442
|
</div>
|
|
1430
1443
|
</form>
|
|
1431
|
-
<!--
|
|
1432
|
-
We will replace the nbg date picker with material date picker
|
|
1433
|
-
-->
|
|
1434
|
-
<!-- <form [formGroup]="dateForm" class="flex-grow-1">-->
|
|
1435
|
-
<!-- <div class="date-wrapper">-->
|
|
1436
|
-
<!-- <div class="input-group-append">-->
|
|
1437
|
-
<!-- <mat-form-field appearance="outline" [style.padding-top.em]="0.5"-->
|
|
1438
|
-
<!-- [style.padding-bottom.em]="0.5">-->
|
|
1439
|
-
<!-- <input matInput (keypress)="onKeyPressInput($event)"-->
|
|
1440
|
-
<!-- [min]="minDate" [max]="maxDate" [matDatepicker]="datePicker"-->
|
|
1441
|
-
<!-- formControlName="dateInput" placeholder="{{label}}" aria-label="date"-->
|
|
1442
|
-
<!-- aria-describedby="basic-addon2">-->
|
|
1443
|
-
<!-- <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>-->
|
|
1444
|
-
<!-- <mat-datepicker #datePicker></mat-datepicker>-->
|
|
1445
|
-
<!-- <mat-error *ngIf="validate && dateForm.get('dateInput').hasError('dateFormatValidator')"-->
|
|
1446
|
-
<!-- class="invalid-date">-->
|
|
1447
|
-
<!-- Enter date as M/D/YYYY or MM/DD/YYYY-->
|
|
1448
|
-
<!-- </mat-error>-->
|
|
1449
|
-
<!-- <mat-error *ngIf="validate && dateForm.get('dateInput').hasError('dateRangeValidator')"-->
|
|
1450
|
-
<!-- class="invalid-date">-->
|
|
1451
|
-
<!-- Invalid Date Range-->
|
|
1452
|
-
<!-- </mat-error>-->
|
|
1453
|
-
<!-- </mat-form-field>-->
|
|
1454
|
-
<!-- </div>-->
|
|
1455
|
-
<!-- </div>-->
|
|
1456
|
-
<!-- </form>-->
|
|
1457
1444
|
</div>
|
|
1458
1445
|
</div>
|
|
1459
1446
|
<div *ngIf="state === 1" class="inline-editing">
|
|
1460
1447
|
<ngb-datepicker [ngModel]="modifiedData" #dp [startDate]="startDate" [minDate]="minDate"
|
|
1461
1448
|
[maxDate]="maxDate" (keydown)="onKeyDown($event)"
|
|
1462
|
-
(ngModelChange)="onChange($event)" (
|
|
1449
|
+
(ngModelChange)="onChange($event)" (dateSelect)="save()"></ngb-datepicker>
|
|
1463
1450
|
<div class="inline-hover-save-options">
|
|
1464
|
-
<!-- <a class="btn ii-so-btn save" (click)="save()"><i class="fas fa-check"></i></a>-->
|
|
1465
|
-
<!-- <a class="btn ii-so-btn cancel" (click)="cancel()"><i class="fas fa-times"></i></a>-->
|
|
1466
1451
|
</div>
|
|
1467
1452
|
</div>
|
|
1468
1453
|
|
|
@@ -1479,7 +1464,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
|
|
|
1479
1464
|
<input type="text" (keyup)="onKeyUpInput($event)"
|
|
1480
1465
|
(ngModelChange)="onChange($event)" class="form-control"
|
|
1481
1466
|
formControlName="dateInput" placeholder="{{label}}"
|
|
1482
|
-
aria-label="date" aria-describedby="basic-addon2" />
|
|
1467
|
+
aria-label="date" aria-describedby="basic-addon2" attr.aria-label="hci-ng-date-{{label}}"/>
|
|
1483
1468
|
<span class="input-group-text" id="basic-addon2" (click)="clear()">
|
|
1484
1469
|
<i class="fas fa-times"></i>
|
|
1485
1470
|
</span>
|
|
@@ -1491,43 +1476,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
|
|
|
1491
1476
|
class="invalid-date">Enter date as M/D/YYYY or MM/DD/YYYY</div>
|
|
1492
1477
|
<div *ngIf="validate && dateForm.get('dateInput').hasError('dateRangeValidator')"
|
|
1493
1478
|
class="invalid-date">Invalid Date Range</div>
|
|
1479
|
+
<div *ngIf="validate && dateForm.get('dateInput').hasError('dateInvalidValidator')"
|
|
1480
|
+
class="invalid-date">Not a real date</div>
|
|
1494
1481
|
</div>
|
|
1495
1482
|
</form>
|
|
1496
|
-
<!--
|
|
1497
|
-
We will replace the nbg date picker with material date picker
|
|
1498
|
-
-->
|
|
1499
|
-
<!-- <form [formGroup]="dateForm" class="flex-grow-1">-->
|
|
1500
|
-
<!-- <div class="date-wrapper">-->
|
|
1501
|
-
<!-- <div class="input-group-append">-->
|
|
1502
|
-
<!-- <mat-form-field appearance="outline" [style.padding-top.em]="0.5"-->
|
|
1503
|
-
<!-- [style.padding-bottom.em]="0.5">-->
|
|
1504
|
-
<!-- <input matInput (keypress)="onKeyPressInput($event)"-->
|
|
1505
|
-
<!-- [min]="minDate" [max]="maxDate" [matDatepicker]="datePicker"-->
|
|
1506
|
-
<!-- formControlName="dateInput" placeholder="{{label}}" aria-label="date"-->
|
|
1507
|
-
<!-- aria-describedby="basic-addon2">-->
|
|
1508
|
-
<!-- <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>-->
|
|
1509
|
-
<!-- <mat-datepicker #datePicker></mat-datepicker>-->
|
|
1510
|
-
<!-- <mat-error *ngIf="validate && dateForm.get('dateInput').hasError('dateFormatValidator')"-->
|
|
1511
|
-
<!-- class="invalid-date">-->
|
|
1512
|
-
<!-- Enter date as M/D/YYYY or MM/DD/YYYY-->
|
|
1513
|
-
<!-- </mat-error>-->
|
|
1514
|
-
<!-- <mat-error *ngIf="validate && dateForm.get('dateInput').hasError('dateRangeValidator')"-->
|
|
1515
|
-
<!-- class="invalid-date">-->
|
|
1516
|
-
<!-- Invalid Date Range-->
|
|
1517
|
-
<!-- </mat-error>-->
|
|
1518
|
-
<!-- </mat-form-field>-->
|
|
1519
|
-
<!-- </div>-->
|
|
1520
|
-
<!-- </div>-->
|
|
1521
|
-
<!-- </form>-->
|
|
1522
1483
|
</div>
|
|
1523
1484
|
</div>
|
|
1524
1485
|
<div *ngIf="state === 1" class="inline-editing">
|
|
1525
1486
|
<ngb-datepicker [ngModel]="modifiedData" #dp [startDate]="startDate" [minDate]="minDate"
|
|
1526
1487
|
[maxDate]="maxDate" (keydown)="onKeyDown($event)"
|
|
1527
|
-
(ngModelChange)="onChange($event)" (
|
|
1488
|
+
(ngModelChange)="onChange($event)" (dateSelect)="save()"></ngb-datepicker>
|
|
1528
1489
|
<div class="inline-hover-save-options">
|
|
1529
|
-
<!-- <a class="btn ii-so-btn save" (click)="save()"><i class="fas fa-check"></i></a>-->
|
|
1530
|
-
<!-- <a class="btn ii-so-btn cancel" (click)="cancel()"><i class="fas fa-times"></i></a>-->
|
|
1531
1490
|
</div>
|
|
1532
1491
|
</div>
|
|
1533
1492
|
|
|
@@ -1551,6 +1510,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
|
|
|
1551
1510
|
type: Input
|
|
1552
1511
|
}], inputDataChange: [{
|
|
1553
1512
|
type: Output
|
|
1513
|
+
}], dateValid: [{
|
|
1514
|
+
type: Output
|
|
1554
1515
|
}] } });
|
|
1555
1516
|
|
|
1556
1517
|
/**
|
|
@@ -1631,7 +1592,7 @@ class DateRangeComponent {
|
|
|
1631
1592
|
[maxDate]="maxEndDate">
|
|
1632
1593
|
</hci-date>
|
|
1633
1594
|
</div>
|
|
1634
|
-
`, isInline: true, dependencies: [{ kind: "component", type: DateComponent, selector: "hci-date", inputs: ["dateFormat", "minDate", "maxDate", "label", "inputData", "modifiedData"], outputs: ["inputDataChange"] }] }); }
|
|
1595
|
+
`, isInline: true, dependencies: [{ kind: "component", type: DateComponent, selector: "hci-date", inputs: ["dateFormat", "minDate", "maxDate", "label", "inputData", "modifiedData"], outputs: ["inputDataChange", "dateValid"] }] }); }
|
|
1635
1596
|
}
|
|
1636
1597
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: DateRangeComponent, decorators: [{
|
|
1637
1598
|
type: Component,
|
|
@@ -2962,7 +2923,7 @@ class CustomComboBoxComponent {
|
|
|
2962
2923
|
[tabindex]="tabindex"
|
|
2963
2924
|
(keydown)="onKey($event)"
|
|
2964
2925
|
(focus)="onFocus()"
|
|
2965
|
-
(focusout)="onFocusOut()"
|
|
2926
|
+
(focusout)="onFocusOut()" attr.aria-label="hci-ng-custom-combobox-{{label}}"
|
|
2966
2927
|
>
|
|
2967
2928
|
<div matSuffix
|
|
2968
2929
|
class="hci-combobox-arrow-wrapper"
|
|
@@ -3012,7 +2973,7 @@ class CustomComboBoxComponent {
|
|
|
3012
2973
|
</mat-error>
|
|
3013
2974
|
<ng-content></ng-content>
|
|
3014
2975
|
</mat-form-field>
|
|
3015
|
-
`, isInline: true, styles: [".hci-combobox-container{display:inline-block}.hci-combobox-arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid;margin:0 4px;color
|
|
2976
|
+
`, isInline: true, styles: [".hci-combobox-container{display:inline-block}.hci-combobox-arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid;margin:0 4px;color:var(--black-darkest)}.hci-combobox-arrow-wrapper{display:table-cell;vertical-align:middle}.hci-combobox-viewport mat-option{display:flex;align-items:center;padding:0 .2rem}.hci-combobox-viewport mat-option .mat-option-text{white-space:nowrap}.hci-combobox-viewport .hci-combobox-selected{background-color:#ddd}.hci-combobox-viewport .mat-active{background-color:#f3f3f3}.hci-combobox-viewport{overflow-anchor:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.MatLegacyError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3$1.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLegacyLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatLegacySuffix, selector: "[matSuffix]" }, { kind: "component", type: i6$1.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i5.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i5.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i5.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i6$2.MatLegacyAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i6$2.MatLegacyAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i7.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "directive", type: i8.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i9.MatLegacyProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
3016
2977
|
}
|
|
3017
2978
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CustomComboBoxComponent, decorators: [{
|
|
3018
2979
|
type: Component,
|
|
@@ -3040,7 +3001,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
|
|
|
3040
3001
|
[tabindex]="tabindex"
|
|
3041
3002
|
(keydown)="onKey($event)"
|
|
3042
3003
|
(focus)="onFocus()"
|
|
3043
|
-
(focusout)="onFocusOut()"
|
|
3004
|
+
(focusout)="onFocusOut()" attr.aria-label="hci-ng-custom-combobox-{{label}}"
|
|
3044
3005
|
>
|
|
3045
3006
|
<div matSuffix
|
|
3046
3007
|
class="hci-combobox-arrow-wrapper"
|
|
@@ -3096,7 +3057,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
|
|
|
3096
3057
|
multi: true,
|
|
3097
3058
|
}], host: {
|
|
3098
3059
|
class: "hci-combobox-container"
|
|
3099
|
-
}, encapsulation: ViewEncapsulation.None, styles: [".hci-combobox-container{display:inline-block}.hci-combobox-arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid;margin:0 4px;color
|
|
3060
|
+
}, encapsulation: ViewEncapsulation.None, styles: [".hci-combobox-container{display:inline-block}.hci-combobox-arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid;margin:0 4px;color:var(--black-darkest)}.hci-combobox-arrow-wrapper{display:table-cell;vertical-align:middle}.hci-combobox-viewport mat-option{display:flex;align-items:center;padding:0 .2rem}.hci-combobox-viewport mat-option .mat-option-text{white-space:nowrap}.hci-combobox-viewport .hci-combobox-selected{background-color:#ddd}.hci-combobox-viewport .mat-active{background-color:#f3f3f3}.hci-combobox-viewport{overflow-anchor:none}\n"] }]
|
|
3100
3061
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Injector }], propDecorators: { maxOptionsToShow: [{
|
|
3101
3062
|
type: Input
|
|
3102
3063
|
}], customViewportClass: [{
|