@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()">
|
|
@@ -1107,13 +1107,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1107
1107
|
|
|
1108
1108
|
class DateValidator {
|
|
1109
1109
|
static dateFormatValidator(ac) {
|
|
1110
|
-
|
|
1110
|
+
let dateArr = ac.value.split("/");
|
|
1111
|
+
if (dateArr.length != 3 || dateArr[0].length > 3 || dateArr[0].length < 1 || dateArr[1].length > 3 ||
|
|
1112
|
+
dateArr[1].length < 1 || dateArr[2].length !== 4) {
|
|
1111
1113
|
return { "dateFormatValidator": true };
|
|
1112
1114
|
}
|
|
1113
1115
|
return null;
|
|
1114
1116
|
}
|
|
1115
1117
|
static dateRangeValidator(ac) {
|
|
1116
|
-
if (ac && ac.value && DateValidator.minValue && DateValidator.maxValue && moment(ac.value, "M/D/YYYY", true).isValid()) {
|
|
1118
|
+
if (ac && ac.value && DateValidator.minValue && DateValidator.maxValue && (moment(ac.value, "M/D/YYYY", true).isValid() || moment(ac.value, "MM/DD/YYYY", true).isValid())) {
|
|
1117
1119
|
let dateValue = moment(ac.value);
|
|
1118
1120
|
let minDate = moment(DateValidator.convertNgbStructToDate(DateValidator.minValue));
|
|
1119
1121
|
let maxDate = moment(DateValidator.convertNgbStructToDate(DateValidator.maxValue));
|
|
@@ -1123,11 +1125,17 @@ class DateValidator {
|
|
|
1123
1125
|
}
|
|
1124
1126
|
return null;
|
|
1125
1127
|
}
|
|
1128
|
+
static dateInvalidValidator(ac) {
|
|
1129
|
+
if (ac && ac.value && !moment(ac.value, "M/D/YYYY", true).isValid() && !moment(ac.value, "MM/DD/YYYY", true).isValid()) {
|
|
1130
|
+
return { "dateInvalidValidator": true };
|
|
1131
|
+
}
|
|
1132
|
+
return null;
|
|
1133
|
+
}
|
|
1126
1134
|
static convertNgbStructToDate(struct) {
|
|
1127
1135
|
return { year: struct.year, month: struct.month - 1, day: struct.day };
|
|
1128
1136
|
}
|
|
1129
1137
|
static inRange(ac) {
|
|
1130
|
-
if (ac && ac.value && DateValidator.minValue && DateValidator.maxValue && moment(ac.value, "M/D/YYYY", true).isValid()) {
|
|
1138
|
+
if (ac && ac.value && DateValidator.minValue && DateValidator.maxValue && (moment(ac.value, "M/D/YYYY", true).isValid() || moment(ac.value, "MM/DD/YYYY", true).isValid())) {
|
|
1131
1139
|
let dateValue = moment(ac.value);
|
|
1132
1140
|
let minDate = moment(DateValidator.convertNgbStructToDate(DateValidator.minValue));
|
|
1133
1141
|
let maxDate = moment(DateValidator.convertNgbStructToDate(DateValidator.maxValue));
|
|
@@ -1270,6 +1278,7 @@ class DateComponent extends DateBase {
|
|
|
1270
1278
|
// Binded data from the parent component.
|
|
1271
1279
|
this.dateFormat = "shortDate";
|
|
1272
1280
|
this.inputDataChange = new EventEmitter();
|
|
1281
|
+
this.dateValid = new EventEmitter();
|
|
1273
1282
|
// only validate if user is typing
|
|
1274
1283
|
this.validate = false;
|
|
1275
1284
|
this.focused = false;
|
|
@@ -1353,45 +1362,35 @@ class DateComponent extends DateBase {
|
|
|
1353
1362
|
this.state = 0;
|
|
1354
1363
|
this.dateForm.controls["dateInput"].setValue("");
|
|
1355
1364
|
this.inputDataChange.emit(this.inputData);
|
|
1365
|
+
this.dateValid.emit(true);
|
|
1356
1366
|
}
|
|
1357
1367
|
onKeyUpInput(event) {
|
|
1358
1368
|
// Check for when the input is deleted before being saved
|
|
1359
|
-
if (event.key === "Delete" || event.key === "Backspace") {
|
|
1360
|
-
|
|
1361
|
-
this.clear();
|
|
1362
|
-
}
|
|
1363
|
-
}
|
|
1364
|
-
// update range so that the date range validator can run accurately
|
|
1365
|
-
DateValidator.minValue = this.minDate;
|
|
1366
|
-
DateValidator.maxValue = this.maxDate;
|
|
1367
|
-
// Get the updated dateForm value
|
|
1368
|
-
let eventTarget = event.target;
|
|
1369
|
-
let inputValue = eventTarget.value;
|
|
1370
|
-
this.dateForm.controls["dateInput"].patchValue(inputValue);
|
|
1371
|
-
// if we have a good date and is within the range update the picker
|
|
1372
|
-
if (DateValidator.inRange(this.dateForm.controls["dateInput"])) {
|
|
1373
|
-
this.validate = false;
|
|
1374
|
-
this.inputData = this.datePipe.transform(this.dateForm.controls["dateInput"].value, this.dateFormat);
|
|
1375
|
-
this.updateInternalDataFromModel();
|
|
1376
|
-
this.dateForm.controls["dateInput"].setValue(this.inputData);
|
|
1377
|
-
this.inputDataChange.emit(this.inputData);
|
|
1369
|
+
if ((event.key === "Delete" || event.key === "Backspace") && this.dateForm.controls["dateInput"].value.length === 0) {
|
|
1370
|
+
this.clear();
|
|
1378
1371
|
}
|
|
1379
1372
|
else {
|
|
1380
|
-
|
|
1381
|
-
|
|
1382
|
-
|
|
1383
|
-
|
|
1384
|
-
|
|
1385
|
-
|
|
1386
|
-
|
|
1387
|
-
|
|
1388
|
-
|
|
1389
|
-
|
|
1390
|
-
|
|
1391
|
-
|
|
1392
|
-
|
|
1393
|
-
|
|
1394
|
-
|
|
1373
|
+
// update range so that the date range validator can run accurately
|
|
1374
|
+
DateValidator.minValue = this.minDate;
|
|
1375
|
+
DateValidator.maxValue = this.maxDate;
|
|
1376
|
+
// Get the updated dateForm value
|
|
1377
|
+
let eventTarget = event.target;
|
|
1378
|
+
let inputValue = eventTarget.value;
|
|
1379
|
+
this.dateForm.controls["dateInput"].patchValue(inputValue);
|
|
1380
|
+
// if we have a good date and is within the range update the picker
|
|
1381
|
+
if (DateValidator.inRange(this.dateForm.controls["dateInput"])) {
|
|
1382
|
+
this.validate = false;
|
|
1383
|
+
this.getDateValid();
|
|
1384
|
+
this.inputData = this.datePipe.transform(this.dateForm.controls["dateInput"].value, this.dateFormat);
|
|
1385
|
+
this.updateInternalDataFromModel();
|
|
1386
|
+
this.dateForm.controls["dateInput"].setValue(this.inputData);
|
|
1387
|
+
this.inputDataChange.emit(this.inputData);
|
|
1388
|
+
}
|
|
1389
|
+
else {
|
|
1390
|
+
this.validate = true;
|
|
1391
|
+
this.getDateValid();
|
|
1392
|
+
}
|
|
1393
|
+
}
|
|
1395
1394
|
}
|
|
1396
1395
|
/**
|
|
1397
1396
|
* NgbDateStruct stores day, month and year. Convert this to ISO8601.
|
|
@@ -1408,9 +1407,21 @@ class DateComponent extends DateBase {
|
|
|
1408
1407
|
}
|
|
1409
1408
|
return date.year + "-" + ((date.month < 10) ? "0" : "") + date.month + "-" + ((date.day < 10) ? "0" : "") + date.day + "T12:00-06:00";
|
|
1410
1409
|
}
|
|
1410
|
+
getDateValid() {
|
|
1411
|
+
if (this.dateForm.get("dateInput").hasError("dateFormatValidator")
|
|
1412
|
+
|| this.dateForm.get("dateInput").hasError("dateRangeValidator")
|
|
1413
|
+
|| this.dateForm.get("dateInput").hasError("dateInvalidValidator")) {
|
|
1414
|
+
this.dateValid.emit(false);
|
|
1415
|
+
return false;
|
|
1416
|
+
}
|
|
1417
|
+
else {
|
|
1418
|
+
this.dateValid.emit(true);
|
|
1419
|
+
return true;
|
|
1420
|
+
}
|
|
1421
|
+
}
|
|
1411
1422
|
}
|
|
1412
1423
|
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 });
|
|
1413
|
-
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: `
|
|
1424
|
+
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: `
|
|
1414
1425
|
<div class="form-group">
|
|
1415
1426
|
<div class="input-group d-flex">
|
|
1416
1427
|
<form [formGroup]="dateForm" class="flex-grow-1">
|
|
@@ -1419,7 +1430,7 @@ DateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
|
|
|
1419
1430
|
<input type="text" (keyup)="onKeyUpInput($event)"
|
|
1420
1431
|
(ngModelChange)="onChange($event)" class="form-control"
|
|
1421
1432
|
formControlName="dateInput" placeholder="{{label}}"
|
|
1422
|
-
aria-label="date" aria-describedby="basic-addon2" />
|
|
1433
|
+
aria-label="date" aria-describedby="basic-addon2" attr.aria-label="hci-ng-date-{{label}}"/>
|
|
1423
1434
|
<span class="input-group-text" id="basic-addon2" (click)="clear()">
|
|
1424
1435
|
<i class="fas fa-times"></i>
|
|
1425
1436
|
</span>
|
|
@@ -1431,43 +1442,17 @@ DateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
|
|
|
1431
1442
|
class="invalid-date">Enter date as M/D/YYYY or MM/DD/YYYY</div>
|
|
1432
1443
|
<div *ngIf="validate && dateForm.get('dateInput').hasError('dateRangeValidator')"
|
|
1433
1444
|
class="invalid-date">Invalid Date Range</div>
|
|
1445
|
+
<div *ngIf="validate && dateForm.get('dateInput').hasError('dateInvalidValidator')"
|
|
1446
|
+
class="invalid-date">Not a real date</div>
|
|
1434
1447
|
</div>
|
|
1435
1448
|
</form>
|
|
1436
|
-
<!--
|
|
1437
|
-
We will replace the nbg date picker with material date picker
|
|
1438
|
-
-->
|
|
1439
|
-
<!-- <form [formGroup]="dateForm" class="flex-grow-1">-->
|
|
1440
|
-
<!-- <div class="date-wrapper">-->
|
|
1441
|
-
<!-- <div class="input-group-append">-->
|
|
1442
|
-
<!-- <mat-form-field appearance="outline" [style.padding-top.em]="0.5"-->
|
|
1443
|
-
<!-- [style.padding-bottom.em]="0.5">-->
|
|
1444
|
-
<!-- <input matInput (keypress)="onKeyPressInput($event)"-->
|
|
1445
|
-
<!-- [min]="minDate" [max]="maxDate" [matDatepicker]="datePicker"-->
|
|
1446
|
-
<!-- formControlName="dateInput" placeholder="{{label}}" aria-label="date"-->
|
|
1447
|
-
<!-- aria-describedby="basic-addon2">-->
|
|
1448
|
-
<!-- <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>-->
|
|
1449
|
-
<!-- <mat-datepicker #datePicker></mat-datepicker>-->
|
|
1450
|
-
<!-- <mat-error *ngIf="validate && dateForm.get('dateInput').hasError('dateFormatValidator')"-->
|
|
1451
|
-
<!-- class="invalid-date">-->
|
|
1452
|
-
<!-- Enter date as M/D/YYYY or MM/DD/YYYY-->
|
|
1453
|
-
<!-- </mat-error>-->
|
|
1454
|
-
<!-- <mat-error *ngIf="validate && dateForm.get('dateInput').hasError('dateRangeValidator')"-->
|
|
1455
|
-
<!-- class="invalid-date">-->
|
|
1456
|
-
<!-- Invalid Date Range-->
|
|
1457
|
-
<!-- </mat-error>-->
|
|
1458
|
-
<!-- </mat-form-field>-->
|
|
1459
|
-
<!-- </div>-->
|
|
1460
|
-
<!-- </div>-->
|
|
1461
|
-
<!-- </form>-->
|
|
1462
1449
|
</div>
|
|
1463
1450
|
</div>
|
|
1464
1451
|
<div *ngIf="state === 1" class="inline-editing">
|
|
1465
1452
|
<ngb-datepicker [ngModel]="modifiedData" #dp [startDate]="startDate" [minDate]="minDate"
|
|
1466
1453
|
[maxDate]="maxDate" (keydown)="onKeyDown($event)"
|
|
1467
|
-
(ngModelChange)="onChange($event)" (
|
|
1454
|
+
(ngModelChange)="onChange($event)" (dateSelect)="save()"></ngb-datepicker>
|
|
1468
1455
|
<div class="inline-hover-save-options">
|
|
1469
|
-
<!-- <a class="btn ii-so-btn save" (click)="save()"><i class="fas fa-check"></i></a>-->
|
|
1470
|
-
<!-- <a class="btn ii-so-btn cancel" (click)="cancel()"><i class="fas fa-times"></i></a>-->
|
|
1471
1456
|
</div>
|
|
1472
1457
|
</div>
|
|
1473
1458
|
|
|
@@ -1483,7 +1468,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1483
1468
|
<input type="text" (keyup)="onKeyUpInput($event)"
|
|
1484
1469
|
(ngModelChange)="onChange($event)" class="form-control"
|
|
1485
1470
|
formControlName="dateInput" placeholder="{{label}}"
|
|
1486
|
-
aria-label="date" aria-describedby="basic-addon2" />
|
|
1471
|
+
aria-label="date" aria-describedby="basic-addon2" attr.aria-label="hci-ng-date-{{label}}"/>
|
|
1487
1472
|
<span class="input-group-text" id="basic-addon2" (click)="clear()">
|
|
1488
1473
|
<i class="fas fa-times"></i>
|
|
1489
1474
|
</span>
|
|
@@ -1495,43 +1480,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1495
1480
|
class="invalid-date">Enter date as M/D/YYYY or MM/DD/YYYY</div>
|
|
1496
1481
|
<div *ngIf="validate && dateForm.get('dateInput').hasError('dateRangeValidator')"
|
|
1497
1482
|
class="invalid-date">Invalid Date Range</div>
|
|
1483
|
+
<div *ngIf="validate && dateForm.get('dateInput').hasError('dateInvalidValidator')"
|
|
1484
|
+
class="invalid-date">Not a real date</div>
|
|
1498
1485
|
</div>
|
|
1499
1486
|
</form>
|
|
1500
|
-
<!--
|
|
1501
|
-
We will replace the nbg date picker with material date picker
|
|
1502
|
-
-->
|
|
1503
|
-
<!-- <form [formGroup]="dateForm" class="flex-grow-1">-->
|
|
1504
|
-
<!-- <div class="date-wrapper">-->
|
|
1505
|
-
<!-- <div class="input-group-append">-->
|
|
1506
|
-
<!-- <mat-form-field appearance="outline" [style.padding-top.em]="0.5"-->
|
|
1507
|
-
<!-- [style.padding-bottom.em]="0.5">-->
|
|
1508
|
-
<!-- <input matInput (keypress)="onKeyPressInput($event)"-->
|
|
1509
|
-
<!-- [min]="minDate" [max]="maxDate" [matDatepicker]="datePicker"-->
|
|
1510
|
-
<!-- formControlName="dateInput" placeholder="{{label}}" aria-label="date"-->
|
|
1511
|
-
<!-- aria-describedby="basic-addon2">-->
|
|
1512
|
-
<!-- <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>-->
|
|
1513
|
-
<!-- <mat-datepicker #datePicker></mat-datepicker>-->
|
|
1514
|
-
<!-- <mat-error *ngIf="validate && dateForm.get('dateInput').hasError('dateFormatValidator')"-->
|
|
1515
|
-
<!-- class="invalid-date">-->
|
|
1516
|
-
<!-- Enter date as M/D/YYYY or MM/DD/YYYY-->
|
|
1517
|
-
<!-- </mat-error>-->
|
|
1518
|
-
<!-- <mat-error *ngIf="validate && dateForm.get('dateInput').hasError('dateRangeValidator')"-->
|
|
1519
|
-
<!-- class="invalid-date">-->
|
|
1520
|
-
<!-- Invalid Date Range-->
|
|
1521
|
-
<!-- </mat-error>-->
|
|
1522
|
-
<!-- </mat-form-field>-->
|
|
1523
|
-
<!-- </div>-->
|
|
1524
|
-
<!-- </div>-->
|
|
1525
|
-
<!-- </form>-->
|
|
1526
1487
|
</div>
|
|
1527
1488
|
</div>
|
|
1528
1489
|
<div *ngIf="state === 1" class="inline-editing">
|
|
1529
1490
|
<ngb-datepicker [ngModel]="modifiedData" #dp [startDate]="startDate" [minDate]="minDate"
|
|
1530
1491
|
[maxDate]="maxDate" (keydown)="onKeyDown($event)"
|
|
1531
|
-
(ngModelChange)="onChange($event)" (
|
|
1492
|
+
(ngModelChange)="onChange($event)" (dateSelect)="save()"></ngb-datepicker>
|
|
1532
1493
|
<div class="inline-hover-save-options">
|
|
1533
|
-
<!-- <a class="btn ii-so-btn save" (click)="save()"><i class="fas fa-check"></i></a>-->
|
|
1534
|
-
<!-- <a class="btn ii-so-btn cancel" (click)="cancel()"><i class="fas fa-times"></i></a>-->
|
|
1535
1494
|
</div>
|
|
1536
1495
|
</div>
|
|
1537
1496
|
|
|
@@ -1555,6 +1514,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1555
1514
|
type: Input
|
|
1556
1515
|
}], inputDataChange: [{
|
|
1557
1516
|
type: Output
|
|
1517
|
+
}], dateValid: [{
|
|
1518
|
+
type: Output
|
|
1558
1519
|
}] } });
|
|
1559
1520
|
|
|
1560
1521
|
/**
|
|
@@ -1636,7 +1597,7 @@ DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
|
|
|
1636
1597
|
[maxDate]="maxEndDate">
|
|
1637
1598
|
</hci-date>
|
|
1638
1599
|
</div>
|
|
1639
|
-
`, isInline: true, dependencies: [{ kind: "component", type: DateComponent, selector: "hci-date", inputs: ["dateFormat", "minDate", "maxDate", "label", "inputData", "modifiedData"], outputs: ["inputDataChange"] }] });
|
|
1600
|
+
`, isInline: true, dependencies: [{ kind: "component", type: DateComponent, selector: "hci-date", inputs: ["dateFormat", "minDate", "maxDate", "label", "inputData", "modifiedData"], outputs: ["inputDataChange", "dateValid"] }] });
|
|
1640
1601
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangeComponent, decorators: [{
|
|
1641
1602
|
type: Component,
|
|
1642
1603
|
args: [{
|
|
@@ -2967,7 +2928,7 @@ CustomComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
|
|
|
2967
2928
|
[tabindex]="tabindex"
|
|
2968
2929
|
(keydown)="onKey($event)"
|
|
2969
2930
|
(focus)="onFocus()"
|
|
2970
|
-
(focusout)="onFocusOut()"
|
|
2931
|
+
(focusout)="onFocusOut()" attr.aria-label="hci-ng-custom-combobox-{{label}}"
|
|
2971
2932
|
>
|
|
2972
2933
|
<div matSuffix
|
|
2973
2934
|
class="hci-combobox-arrow-wrapper"
|
|
@@ -3017,7 +2978,7 @@ CustomComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
|
|
|
3017
2978
|
</mat-error>
|
|
3018
2979
|
<ng-content></ng-content>
|
|
3019
2980
|
</mat-form-field>
|
|
3020
|
-
`, 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
|
|
2981
|
+
`, 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 });
|
|
3021
2982
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomComboBoxComponent, decorators: [{
|
|
3022
2983
|
type: Component,
|
|
3023
2984
|
args: [{ selector: "hci-combobox", template: `
|
|
@@ -3044,7 +3005,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
3044
3005
|
[tabindex]="tabindex"
|
|
3045
3006
|
(keydown)="onKey($event)"
|
|
3046
3007
|
(focus)="onFocus()"
|
|
3047
|
-
(focusout)="onFocusOut()"
|
|
3008
|
+
(focusout)="onFocusOut()" attr.aria-label="hci-ng-custom-combobox-{{label}}"
|
|
3048
3009
|
>
|
|
3049
3010
|
<div matSuffix
|
|
3050
3011
|
class="hci-combobox-arrow-wrapper"
|
|
@@ -3100,7 +3061,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
3100
3061
|
multi: true,
|
|
3101
3062
|
}], host: {
|
|
3102
3063
|
class: "hci-combobox-container"
|
|
3103
|
-
}, 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
|
|
3064
|
+
}, 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"] }]
|
|
3104
3065
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.Injector }]; }, propDecorators: { maxOptionsToShow: [{
|
|
3105
3066
|
type: Input
|
|
3106
3067
|
}], customViewportClass: [{
|