@kms-ngx-ui/presentational 20.0.0 → 20.0.2
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,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, Pipe, NgModule, EventEmitter, Output, Input, Directive, HostListener, PLATFORM_ID, DOCUMENT, Inject, Injectable, input, VERSION, forwardRef, ViewChild, HostBinding, output, computed, model, signal, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
|
2
|
+
import { Component, Pipe, NgModule, EventEmitter, Output, Input, Directive, HostListener, PLATFORM_ID, DOCUMENT, Inject, Injectable, input, VERSION, forwardRef, ViewChild, effect, HostBinding, output, computed, model, signal, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule, CurrencyPipe, isPlatformBrowser } from '@angular/common';
|
|
5
5
|
import * as i2 from '@angular/forms';
|
|
@@ -1413,29 +1413,42 @@ class DropdownFromDataComponent extends FormControlParentComponent {
|
|
|
1413
1413
|
constructor(renderer) {
|
|
1414
1414
|
super(renderer);
|
|
1415
1415
|
this.renderer = renderer;
|
|
1416
|
+
// structured data as a enum set. Can be used in combination with 'optionsPlainArray' to set diferent values by index
|
|
1417
|
+
this.optionsEnum = input(...(ngDevMode ? [undefined, { debugName: "optionsEnum" }] : []));
|
|
1418
|
+
// structured data as a simple array of elements
|
|
1419
|
+
this.optionsPlainArray = input(...(ngDevMode ? [undefined, { debugName: "optionsPlainArray" }] : []));
|
|
1420
|
+
// structured data as an array of objects used in combination with the input 'mapKey' and 'mapValue'
|
|
1421
|
+
this.optionsObjArray = input(...(ngDevMode ? [undefined, { debugName: "optionsObjArray" }] : []));
|
|
1422
|
+
// key identifier of the obj. If mapValue doesnt exist, mapKey is also the value
|
|
1423
|
+
this.mapKey = input(...(ngDevMode ? [undefined, { debugName: "mapKey" }] : []));
|
|
1424
|
+
// value identifier of the obj
|
|
1425
|
+
this.mapValue = input(...(ngDevMode ? [undefined, { debugName: "mapValue" }] : []));
|
|
1416
1426
|
// options for the dropdown have a null value at the beginning of the array
|
|
1417
|
-
this.hasNullOption = false;
|
|
1418
|
-
|
|
1419
|
-
this.
|
|
1420
|
-
|
|
1421
|
-
this.
|
|
1427
|
+
this.hasNullOption = input(false, ...(ngDevMode ? [{ debugName: "hasNullOption" }] : []));
|
|
1428
|
+
// preselected keys of the dropdown
|
|
1429
|
+
this.preselectedKeys = input(...(ngDevMode ? [undefined, { debugName: "preselectedKeys" }] : []));
|
|
1430
|
+
// translation object for the label and placeholder
|
|
1431
|
+
this.translation = input(...(ngDevMode ? [undefined, { debugName: "translation" }] : []));
|
|
1432
|
+
this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
1433
|
+
this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
1434
|
+
this.required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
|
|
1435
|
+
this.useEnumIndexAsValue = input(false, ...(ngDevMode ? [{ debugName: "useEnumIndexAsValue" }] : []));
|
|
1422
1436
|
// multiple selection
|
|
1423
|
-
this.multiple = false;
|
|
1424
|
-
this.
|
|
1437
|
+
this.multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
|
|
1438
|
+
this.selectAllText = input(...(ngDevMode ? [undefined, { debugName: "selectAllText" }] : []));
|
|
1439
|
+
this.disableOptions = input(false, ...(ngDevMode ? [{ debugName: "disableOptions" }] : []));
|
|
1440
|
+
this.errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
|
|
1425
1441
|
this.keys = [];
|
|
1426
1442
|
this.values = [];
|
|
1427
|
-
|
|
1428
|
-
|
|
1429
|
-
|
|
1430
|
-
|
|
1431
|
-
|
|
1432
|
-
|
|
1433
|
-
|
|
1434
|
-
|
|
1435
|
-
|
|
1436
|
-
this.keys = this.optionsPlainArray;
|
|
1437
|
-
}
|
|
1438
|
-
this.setKeyValues();
|
|
1443
|
+
// Effect to react to input changes (replaces ngOnChanges)
|
|
1444
|
+
effect(() => {
|
|
1445
|
+
const plainArray = this.optionsPlainArray();
|
|
1446
|
+
if (plainArray) {
|
|
1447
|
+
this.values = plainArray;
|
|
1448
|
+
this.keys = plainArray;
|
|
1449
|
+
}
|
|
1450
|
+
this.setKeyValues();
|
|
1451
|
+
});
|
|
1439
1452
|
}
|
|
1440
1453
|
ngOnInit() {
|
|
1441
1454
|
this.form = new UntypedFormGroup({
|
|
@@ -1446,9 +1459,10 @@ class DropdownFromDataComponent extends FormControlParentComponent {
|
|
|
1446
1459
|
this.internalValue = value.dropdownData;
|
|
1447
1460
|
this.onChange(value.dropdownData);
|
|
1448
1461
|
});
|
|
1449
|
-
|
|
1462
|
+
const preselected = this.preselectedKeys();
|
|
1463
|
+
if (preselected)
|
|
1450
1464
|
this.form.patchValue({
|
|
1451
|
-
dropdownData:
|
|
1465
|
+
dropdownData: preselected,
|
|
1452
1466
|
});
|
|
1453
1467
|
super.ngOnInit();
|
|
1454
1468
|
}
|
|
@@ -1457,20 +1471,27 @@ class DropdownFromDataComponent extends FormControlParentComponent {
|
|
|
1457
1471
|
* @param value
|
|
1458
1472
|
*/
|
|
1459
1473
|
setKeyValues() {
|
|
1460
|
-
|
|
1461
|
-
|
|
1462
|
-
|
|
1463
|
-
|
|
1464
|
-
|
|
1465
|
-
|
|
1466
|
-
|
|
1467
|
-
|
|
1468
|
-
|
|
1469
|
-
|
|
1474
|
+
const optionsObjArrayValue = this.optionsObjArray();
|
|
1475
|
+
const mapKeyValue = this.mapKey();
|
|
1476
|
+
const mapValueValue = this.mapValue();
|
|
1477
|
+
const optionsEnumValue = this.optionsEnum();
|
|
1478
|
+
const optionsPlainArrayValue = this.optionsPlainArray();
|
|
1479
|
+
const useEnumIndexAsValueValue = this.useEnumIndexAsValue();
|
|
1480
|
+
const hasNullOptionValue = this.hasNullOption();
|
|
1481
|
+
if (optionsObjArrayValue && mapKeyValue && mapValueValue) {
|
|
1482
|
+
this.keys = optionsObjArrayValue.map((obj) => obj[`${mapKeyValue}`]);
|
|
1483
|
+
this.values = optionsObjArrayValue.map((obj) => obj[`${mapValueValue}`]);
|
|
1484
|
+
}
|
|
1485
|
+
else if (optionsObjArrayValue && mapKeyValue) {
|
|
1486
|
+
this.keys = optionsObjArrayValue.map((obj) => obj[`${mapKeyValue}`]);
|
|
1487
|
+
this.values = optionsObjArrayValue.map((obj) => obj[`${mapKeyValue}`]);
|
|
1488
|
+
}
|
|
1489
|
+
if (optionsEnumValue) {
|
|
1490
|
+
const enumObj = optionsEnumValue;
|
|
1470
1491
|
// Get enum keys (excluding reverse mappings for numeric enums)
|
|
1471
1492
|
this.keys = Object.keys(enumObj).filter((k) => isNaN(Number(k)));
|
|
1472
|
-
if (
|
|
1473
|
-
this.values =
|
|
1493
|
+
if (optionsPlainArrayValue) {
|
|
1494
|
+
this.values = optionsPlainArrayValue;
|
|
1474
1495
|
}
|
|
1475
1496
|
else {
|
|
1476
1497
|
const values = this.keys.map((k) => enumObj[k]);
|
|
@@ -1481,7 +1502,7 @@ class DropdownFromDataComponent extends FormControlParentComponent {
|
|
|
1481
1502
|
break;
|
|
1482
1503
|
}
|
|
1483
1504
|
}
|
|
1484
|
-
if (keyValueEnum ||
|
|
1505
|
+
if (keyValueEnum || useEnumIndexAsValueValue) {
|
|
1485
1506
|
this.values = values;
|
|
1486
1507
|
}
|
|
1487
1508
|
else {
|
|
@@ -1489,7 +1510,7 @@ class DropdownFromDataComponent extends FormControlParentComponent {
|
|
|
1489
1510
|
}
|
|
1490
1511
|
}
|
|
1491
1512
|
}
|
|
1492
|
-
if (
|
|
1513
|
+
if (hasNullOptionValue === true) {
|
|
1493
1514
|
this.keys.unshift(null);
|
|
1494
1515
|
this.values.unshift(null);
|
|
1495
1516
|
}
|
|
@@ -1499,17 +1520,18 @@ class DropdownFromDataComponent extends FormControlParentComponent {
|
|
|
1499
1520
|
* @param key
|
|
1500
1521
|
*/
|
|
1501
1522
|
setDisplayKey(key) {
|
|
1502
|
-
|
|
1503
|
-
|
|
1504
|
-
|
|
1523
|
+
const translationValue = this.translation();
|
|
1524
|
+
if (translationValue) {
|
|
1525
|
+
if (translationValue.isPrefix) {
|
|
1526
|
+
return translationValue.service?.instant?.(translationValue.path + '.' + key);
|
|
1505
1527
|
}
|
|
1506
|
-
else if (
|
|
1507
|
-
return
|
|
1528
|
+
else if (translationValue.useKeyAsValue) {
|
|
1529
|
+
return translationValue.service?.instant?.(translationValue.path, {
|
|
1508
1530
|
key: key,
|
|
1509
1531
|
});
|
|
1510
1532
|
}
|
|
1511
1533
|
else {
|
|
1512
|
-
return
|
|
1534
|
+
return translationValue.service?.instant?.(translationValue.path);
|
|
1513
1535
|
}
|
|
1514
1536
|
}
|
|
1515
1537
|
return key;
|
|
@@ -1548,13 +1570,13 @@ class DropdownFromDataComponent extends FormControlParentComponent {
|
|
|
1548
1570
|
}
|
|
1549
1571
|
}
|
|
1550
1572
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DropdownFromDataComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1551
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DropdownFromDataComponent, isStandalone: false, selector: "kms-dropdown-from-data", inputs: { optionsEnum: "optionsEnum", optionsPlainArray: "optionsPlainArray", optionsObjArray: "optionsObjArray", mapKey: "mapKey", mapValue: "mapValue", hasNullOption: "hasNullOption", preselectedKeys: "preselectedKeys", translation: "translation", placeholder: "placeholder", label: "label", required: "required", useEnumIndexAsValue: "useEnumIndexAsValue", multiple: "multiple", selectAllText: "selectAllText", disableOptions: "disableOptions" }, providers: [
|
|
1573
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DropdownFromDataComponent, isStandalone: false, selector: "kms-dropdown-from-data", inputs: { optionsEnum: { classPropertyName: "optionsEnum", publicName: "optionsEnum", isSignal: true, isRequired: false, transformFunction: null }, optionsPlainArray: { classPropertyName: "optionsPlainArray", publicName: "optionsPlainArray", isSignal: true, isRequired: false, transformFunction: null }, optionsObjArray: { classPropertyName: "optionsObjArray", publicName: "optionsObjArray", isSignal: true, isRequired: false, transformFunction: null }, mapKey: { classPropertyName: "mapKey", publicName: "mapKey", isSignal: true, isRequired: false, transformFunction: null }, mapValue: { classPropertyName: "mapValue", publicName: "mapValue", isSignal: true, isRequired: false, transformFunction: null }, hasNullOption: { classPropertyName: "hasNullOption", publicName: "hasNullOption", isSignal: true, isRequired: false, transformFunction: null }, preselectedKeys: { classPropertyName: "preselectedKeys", publicName: "preselectedKeys", isSignal: true, isRequired: false, transformFunction: null }, translation: { classPropertyName: "translation", publicName: "translation", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, useEnumIndexAsValue: { classPropertyName: "useEnumIndexAsValue", publicName: "useEnumIndexAsValue", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, selectAllText: { classPropertyName: "selectAllText", publicName: "selectAllText", isSignal: true, isRequired: false, transformFunction: null }, disableOptions: { classPropertyName: "disableOptions", publicName: "disableOptions", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
1552
1574
|
{
|
|
1553
1575
|
provide: NG_VALUE_ACCESSOR,
|
|
1554
1576
|
useExisting: forwardRef(() => DropdownFromDataComponent),
|
|
1555
1577
|
multi: true,
|
|
1556
1578
|
},
|
|
1557
|
-
], usesInheritance: true,
|
|
1579
|
+
], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n <mat-form-field\n [attr.required]=\"required()\"\n [floatLabel]=\"placeholder() ? 'always' : 'auto'\"\n >\n <mat-label>{{ label() }}</mat-label>\n <mat-select\n [placeholder]=\"placeholder()\"\n disableOptionCentering\n (selectionChange)=\"valueChanged($event?.value)\"\n [value]=\"value\"\n #child\n [disabled]=\"disabled\"\n [multiple]=\"multiple()\"\n [required]=\"required()\"\n formControlName=\"dropdownData\"\n >\n @if (selectAllText() && multiple() && !disableOptions()) {\n <mat-checkbox\n color=\"accent\"\n class=\"dropdown-from-data__checkbox\"\n [indeterminate]=\"isCheckboxIndeterminate()\"\n [checked]=\"allElementsChecked()\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"toggleAllSelection($event)\"\n >\n {{ selectAllText() }}\n </mat-checkbox>\n } @for (key of keys; track key; let i = $index) {\n <mat-option [value]=\"values[i]\" [disabled]=\"disableOptions()\">\n {{ setDisplayKey(key) || '\u2014' }}\n </mat-option>\n }\n </mat-select>\n @if (errorMessage()) {\n <mat-error>{{ errorMessage() }}</mat-error>\n }\n </mat-form-field>\n</form>\n", dependencies: [{ kind: "component", type: i1$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }] }); }
|
|
1558
1580
|
}
|
|
1559
1581
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DropdownFromDataComponent, decorators: [{
|
|
1560
1582
|
type: Component,
|
|
@@ -1564,38 +1586,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
1564
1586
|
useExisting: forwardRef(() => DropdownFromDataComponent),
|
|
1565
1587
|
multi: true,
|
|
1566
1588
|
},
|
|
1567
|
-
], standalone: false, template: "<form [formGroup]=\"form\">\n <mat-form-field\n [attr.required]=\"required\"\n [floatLabel]=\"placeholder ? 'always' : 'auto'\"\n
|
|
1568
|
-
}], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { optionsEnum: [{
|
|
1569
|
-
type: Input
|
|
1570
|
-
}], optionsPlainArray: [{
|
|
1571
|
-
type: Input
|
|
1572
|
-
}], optionsObjArray: [{
|
|
1573
|
-
type: Input
|
|
1574
|
-
}], mapKey: [{
|
|
1575
|
-
type: Input
|
|
1576
|
-
}], mapValue: [{
|
|
1577
|
-
type: Input
|
|
1578
|
-
}], hasNullOption: [{
|
|
1579
|
-
type: Input
|
|
1580
|
-
}], preselectedKeys: [{
|
|
1581
|
-
type: Input
|
|
1582
|
-
}], translation: [{
|
|
1583
|
-
type: Input
|
|
1584
|
-
}], placeholder: [{
|
|
1585
|
-
type: Input
|
|
1586
|
-
}], label: [{
|
|
1587
|
-
type: Input
|
|
1588
|
-
}], required: [{
|
|
1589
|
-
type: Input
|
|
1590
|
-
}], useEnumIndexAsValue: [{
|
|
1591
|
-
type: Input
|
|
1592
|
-
}], multiple: [{
|
|
1593
|
-
type: Input
|
|
1594
|
-
}], selectAllText: [{
|
|
1595
|
-
type: Input
|
|
1596
|
-
}], disableOptions: [{
|
|
1597
|
-
type: Input
|
|
1598
|
-
}] } });
|
|
1589
|
+
], standalone: false, template: "<form [formGroup]=\"form\">\n <mat-form-field\n [attr.required]=\"required()\"\n [floatLabel]=\"placeholder() ? 'always' : 'auto'\"\n >\n <mat-label>{{ label() }}</mat-label>\n <mat-select\n [placeholder]=\"placeholder()\"\n disableOptionCentering\n (selectionChange)=\"valueChanged($event?.value)\"\n [value]=\"value\"\n #child\n [disabled]=\"disabled\"\n [multiple]=\"multiple()\"\n [required]=\"required()\"\n formControlName=\"dropdownData\"\n >\n @if (selectAllText() && multiple() && !disableOptions()) {\n <mat-checkbox\n color=\"accent\"\n class=\"dropdown-from-data__checkbox\"\n [indeterminate]=\"isCheckboxIndeterminate()\"\n [checked]=\"allElementsChecked()\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"toggleAllSelection($event)\"\n >\n {{ selectAllText() }}\n </mat-checkbox>\n } @for (key of keys; track key; let i = $index) {\n <mat-option [value]=\"values[i]\" [disabled]=\"disableOptions()\">\n {{ setDisplayKey(key) || '\u2014' }}\n </mat-option>\n }\n </mat-select>\n @if (errorMessage()) {\n <mat-error>{{ errorMessage() }}</mat-error>\n }\n </mat-form-field>\n</form>\n" }]
|
|
1590
|
+
}], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { optionsEnum: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsEnum", required: false }] }], optionsPlainArray: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsPlainArray", required: false }] }], optionsObjArray: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsObjArray", required: false }] }], mapKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "mapKey", required: false }] }], mapValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "mapValue", required: false }] }], hasNullOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasNullOption", required: false }] }], preselectedKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "preselectedKeys", required: false }] }], translation: [{ type: i0.Input, args: [{ isSignal: true, alias: "translation", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], useEnumIndexAsValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "useEnumIndexAsValue", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], selectAllText: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllText", required: false }] }], disableOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableOptions", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }] } });
|
|
1599
1591
|
|
|
1600
1592
|
class LoaderComponent {
|
|
1601
1593
|
constructor() {
|