@huntsman-cancer-institute/input 15.2.0 → 15.4.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/esm2020/date/date-date-range.component.mjs +1 -1
- package/esm2020/date/date-date.component.mjs +48 -95
- package/esm2020/date/date-validator.mjs +12 -4
- package/esm2020/dropdown/dropdown-select.component.mjs +3 -3
- package/esm2020/select/custom-combobox.component.mjs +5 -5
- package/fesm2015/huntsman-cancer-institute-input.mjs +66 -105
- package/fesm2015/huntsman-cancer-institute-input.mjs.map +1 -1
- package/fesm2020/huntsman-cancer-institute-input.mjs +66 -105
- package/fesm2020/huntsman-cancer-institute-input.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -492,7 +492,7 @@ DropdownSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
|
|
|
492
492
|
(keyup)="onKeyUp($event)"
|
|
493
493
|
(keydown)="onKeyDown($event)"
|
|
494
494
|
(keypress)="onKeyPress($event)"
|
|
495
|
-
(click)="showResults()" *ngIf="!disabled" />
|
|
495
|
+
(click)="showResults()" *ngIf="!disabled" attr.aria-label="{{getPlaceholder()}}"/>
|
|
496
496
|
</li>
|
|
497
497
|
</ul>
|
|
498
498
|
<span class="icon-drop-menu" *ngIf="inputState===0" (click)="showResults()">
|
|
@@ -547,7 +547,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
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()">
|
|
@@ -1103,13 +1103,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1103
1103
|
|
|
1104
1104
|
class DateValidator {
|
|
1105
1105
|
static dateFormatValidator(ac) {
|
|
1106
|
-
|
|
1106
|
+
let dateArr = ac.value.split("/");
|
|
1107
|
+
if (dateArr.length != 3 || dateArr[0].length > 3 || dateArr[0].length < 1 || dateArr[1].length > 3 ||
|
|
1108
|
+
dateArr[1].length < 1 || dateArr[2].length !== 4) {
|
|
1107
1109
|
return { "dateFormatValidator": true };
|
|
1108
1110
|
}
|
|
1109
1111
|
return null;
|
|
1110
1112
|
}
|
|
1111
1113
|
static dateRangeValidator(ac) {
|
|
1112
|
-
if (ac && ac.value && DateValidator.minValue && DateValidator.maxValue && moment(ac.value, "M/D/YYYY", true).isValid()) {
|
|
1114
|
+
if (ac && ac.value && DateValidator.minValue && DateValidator.maxValue && (moment(ac.value, "M/D/YYYY", true).isValid() || moment(ac.value, "MM/DD/YYYY", true).isValid())) {
|
|
1113
1115
|
let dateValue = moment(ac.value);
|
|
1114
1116
|
let minDate = moment(DateValidator.convertNgbStructToDate(DateValidator.minValue));
|
|
1115
1117
|
let maxDate = moment(DateValidator.convertNgbStructToDate(DateValidator.maxValue));
|
|
@@ -1119,11 +1121,17 @@ class DateValidator {
|
|
|
1119
1121
|
}
|
|
1120
1122
|
return null;
|
|
1121
1123
|
}
|
|
1124
|
+
static dateInvalidValidator(ac) {
|
|
1125
|
+
if (ac && ac.value && !moment(ac.value, "M/D/YYYY", true).isValid() && !moment(ac.value, "MM/DD/YYYY", true).isValid()) {
|
|
1126
|
+
return { "dateInvalidValidator": true };
|
|
1127
|
+
}
|
|
1128
|
+
return null;
|
|
1129
|
+
}
|
|
1122
1130
|
static convertNgbStructToDate(struct) {
|
|
1123
1131
|
return { year: struct.year, month: struct.month - 1, day: struct.day };
|
|
1124
1132
|
}
|
|
1125
1133
|
static inRange(ac) {
|
|
1126
|
-
if (ac && ac.value && DateValidator.minValue && DateValidator.maxValue && moment(ac.value, "M/D/YYYY", true).isValid()) {
|
|
1134
|
+
if (ac && ac.value && DateValidator.minValue && DateValidator.maxValue && (moment(ac.value, "M/D/YYYY", true).isValid() || moment(ac.value, "MM/DD/YYYY", true).isValid())) {
|
|
1127
1135
|
let dateValue = moment(ac.value);
|
|
1128
1136
|
let minDate = moment(DateValidator.convertNgbStructToDate(DateValidator.minValue));
|
|
1129
1137
|
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;
|
|
@@ -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,9 +1403,21 @@ 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
|
}
|
|
1408
1419
|
DateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateComponent, deps: [{ token: i0.ElementRef }, { token: i2.UntypedFormBuilder }, { token: i1.DatePipe }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1409
|
-
DateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: `
|
|
1420
|
+
DateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: `
|
|
1410
1421
|
<div class="form-group">
|
|
1411
1422
|
<div class="input-group d-flex">
|
|
1412
1423
|
<form [formGroup]="dateForm" class="flex-grow-1">
|
|
@@ -1415,7 +1426,7 @@ DateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
|
|
|
1415
1426
|
<input type="text" (keyup)="onKeyUpInput($event)"
|
|
1416
1427
|
(ngModelChange)="onChange($event)" class="form-control"
|
|
1417
1428
|
formControlName="dateInput" placeholder="{{label}}"
|
|
1418
|
-
aria-label="date" aria-describedby="basic-addon2" />
|
|
1429
|
+
aria-label="date" aria-describedby="basic-addon2" attr.aria-label="hci-ng-date-{{label}}"/>
|
|
1419
1430
|
<span class="input-group-text" id="basic-addon2" (click)="clear()">
|
|
1420
1431
|
<i class="fas fa-times"></i>
|
|
1421
1432
|
</span>
|
|
@@ -1427,43 +1438,17 @@ DateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
|
|
|
1427
1438
|
class="invalid-date">Enter date as M/D/YYYY or MM/DD/YYYY</div>
|
|
1428
1439
|
<div *ngIf="validate && dateForm.get('dateInput').hasError('dateRangeValidator')"
|
|
1429
1440
|
class="invalid-date">Invalid Date Range</div>
|
|
1441
|
+
<div *ngIf="validate && dateForm.get('dateInput').hasError('dateInvalidValidator')"
|
|
1442
|
+
class="invalid-date">Not a real date</div>
|
|
1430
1443
|
</div>
|
|
1431
1444
|
</form>
|
|
1432
|
-
<!--
|
|
1433
|
-
We will replace the nbg date picker with material date picker
|
|
1434
|
-
-->
|
|
1435
|
-
<!-- <form [formGroup]="dateForm" class="flex-grow-1">-->
|
|
1436
|
-
<!-- <div class="date-wrapper">-->
|
|
1437
|
-
<!-- <div class="input-group-append">-->
|
|
1438
|
-
<!-- <mat-form-field appearance="outline" [style.padding-top.em]="0.5"-->
|
|
1439
|
-
<!-- [style.padding-bottom.em]="0.5">-->
|
|
1440
|
-
<!-- <input matInput (keypress)="onKeyPressInput($event)"-->
|
|
1441
|
-
<!-- [min]="minDate" [max]="maxDate" [matDatepicker]="datePicker"-->
|
|
1442
|
-
<!-- formControlName="dateInput" placeholder="{{label}}" aria-label="date"-->
|
|
1443
|
-
<!-- aria-describedby="basic-addon2">-->
|
|
1444
|
-
<!-- <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>-->
|
|
1445
|
-
<!-- <mat-datepicker #datePicker></mat-datepicker>-->
|
|
1446
|
-
<!-- <mat-error *ngIf="validate && dateForm.get('dateInput').hasError('dateFormatValidator')"-->
|
|
1447
|
-
<!-- class="invalid-date">-->
|
|
1448
|
-
<!-- Enter date as M/D/YYYY or MM/DD/YYYY-->
|
|
1449
|
-
<!-- </mat-error>-->
|
|
1450
|
-
<!-- <mat-error *ngIf="validate && dateForm.get('dateInput').hasError('dateRangeValidator')"-->
|
|
1451
|
-
<!-- class="invalid-date">-->
|
|
1452
|
-
<!-- Invalid Date Range-->
|
|
1453
|
-
<!-- </mat-error>-->
|
|
1454
|
-
<!-- </mat-form-field>-->
|
|
1455
|
-
<!-- </div>-->
|
|
1456
|
-
<!-- </div>-->
|
|
1457
|
-
<!-- </form>-->
|
|
1458
1445
|
</div>
|
|
1459
1446
|
</div>
|
|
1460
1447
|
<div *ngIf="state === 1" class="inline-editing">
|
|
1461
1448
|
<ngb-datepicker [ngModel]="modifiedData" #dp [startDate]="startDate" [minDate]="minDate"
|
|
1462
1449
|
[maxDate]="maxDate" (keydown)="onKeyDown($event)"
|
|
1463
|
-
(ngModelChange)="onChange($event)" (
|
|
1450
|
+
(ngModelChange)="onChange($event)" (dateSelect)="save()"></ngb-datepicker>
|
|
1464
1451
|
<div class="inline-hover-save-options">
|
|
1465
|
-
<!-- <a class="btn ii-so-btn save" (click)="save()"><i class="fas fa-check"></i></a>-->
|
|
1466
|
-
<!-- <a class="btn ii-so-btn cancel" (click)="cancel()"><i class="fas fa-times"></i></a>-->
|
|
1467
1452
|
</div>
|
|
1468
1453
|
</div>
|
|
1469
1454
|
|
|
@@ -1479,7 +1464,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
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: "15.2.10", ngImpo
|
|
|
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: "15.2.10", ngImpo
|
|
|
1551
1510
|
type: Input
|
|
1552
1511
|
}], inputDataChange: [{
|
|
1553
1512
|
type: Output
|
|
1513
|
+
}], dateValid: [{
|
|
1514
|
+
type: Output
|
|
1554
1515
|
}] } });
|
|
1555
1516
|
|
|
1556
1517
|
/**
|
|
@@ -1632,7 +1593,7 @@ DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
|
|
|
1632
1593
|
[maxDate]="maxEndDate">
|
|
1633
1594
|
</hci-date>
|
|
1634
1595
|
</div>
|
|
1635
|
-
`, isInline: true, dependencies: [{ kind: "component", type: DateComponent, selector: "hci-date", inputs: ["dateFormat", "minDate", "maxDate", "label", "inputData", "modifiedData"], outputs: ["inputDataChange"] }] });
|
|
1596
|
+
`, isInline: true, dependencies: [{ kind: "component", type: DateComponent, selector: "hci-date", inputs: ["dateFormat", "minDate", "maxDate", "label", "inputData", "modifiedData"], outputs: ["inputDataChange", "dateValid"] }] });
|
|
1636
1597
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangeComponent, decorators: [{
|
|
1637
1598
|
type: Component,
|
|
1638
1599
|
args: [{
|
|
@@ -2963,7 +2924,7 @@ CustomComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
|
|
|
2963
2924
|
[tabindex]="tabindex"
|
|
2964
2925
|
(keydown)="onKey($event)"
|
|
2965
2926
|
(focus)="onFocus()"
|
|
2966
|
-
(focusout)="onFocusOut()"
|
|
2927
|
+
(focusout)="onFocusOut()" attr.aria-label="hci-ng-custom-combobox-{{label}}"
|
|
2967
2928
|
>
|
|
2968
2929
|
<div matSuffix
|
|
2969
2930
|
class="hci-combobox-arrow-wrapper"
|
|
@@ -3013,7 +2974,7 @@ CustomComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
|
|
|
3013
2974
|
</mat-error>
|
|
3014
2975
|
<ng-content></ng-content>
|
|
3015
2976
|
</mat-form-field>
|
|
3016
|
-
`, 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
|
|
2977
|
+
`, 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 });
|
|
3017
2978
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomComboBoxComponent, decorators: [{
|
|
3018
2979
|
type: Component,
|
|
3019
2980
|
args: [{ selector: "hci-combobox", template: `
|
|
@@ -3040,7 +3001,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
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: "15.2.10", ngImpo
|
|
|
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: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.Injector }]; }, propDecorators: { maxOptionsToShow: [{
|
|
3101
3062
|
type: Input
|
|
3102
3063
|
}], customViewportClass: [{
|