@kms-ngx-ui/presentational 20.1.6 → 20.1.8
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/fesm2022/kms-ngx-ui-presentational.mjs +5 -4
- package/fesm2022/kms-ngx-ui-presentational.mjs.map +1 -1
- package/index.d.ts +1 -0
- package/package.json +1 -1
- package/src/lib/ui/atoms/dropdown-from-data/dropdown-from-data.component.scss +36 -24
- package/src/lib/ui/molecules/flyout/flyout.component.scss +5 -28
- package/src/styles/styles.scss +2 -0
|
@@ -1437,6 +1437,7 @@ class DropdownFromDataComponent extends FormControlParentComponent {
|
|
|
1437
1437
|
constructor(renderer) {
|
|
1438
1438
|
super(renderer);
|
|
1439
1439
|
this.renderer = renderer;
|
|
1440
|
+
this.Color = Color;
|
|
1440
1441
|
// structured data as a enum set. Can be used in combination with 'optionsPlainArray' to set diferent values by index
|
|
1441
1442
|
this.optionsEnum = input(...(ngDevMode ? [undefined, { debugName: "optionsEnum" }] : []));
|
|
1442
1443
|
// structured data as a simple array of elements
|
|
@@ -1573,7 +1574,7 @@ class DropdownFromDataComponent extends FormControlParentComponent {
|
|
|
1573
1574
|
useExisting: forwardRef(() => DropdownFromDataComponent),
|
|
1574
1575
|
multi: true,
|
|
1575
1576
|
},
|
|
1576
|
-
], 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 [multiple]=\"multiple()\"\n [required]=\"required()\"\n formControlName=\"dropdownData\"\n >\n @if (searchable()) {\n
|
|
1577
|
+
], 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 [multiple]=\"multiple()\"\n [required]=\"required()\"\n formControlName=\"dropdownData\"\n >\n @if (searchable()) {\n <mat-option>\n <ngx-mat-select-search\n [formControl]=\"searchControl\"\n [placeholderLabel]=\"'Search...'\"\n [noEntriesFoundLabel]=\"'No matches found'\"\n >\n </ngx-mat-select-search>\n </mat-option>\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 filteredKeys; track key; let i = $index) {\n <mat-option [value]=\"filteredValues[i]\" [disabled]=\"disableOptions()\">\n {{ setDisplayKey(key) || '\u2014' }}\n </mat-option>\n }\n </mat-select>\n @if (prefix()) {\n <span matTextPrefix>{{ prefix() }} </span>\n } @else if (prefixIcon()) {\n <kms-icon matPrefix [icon]=\"prefixIcon()\" aria-hidden=\"true\"></kms-icon>\n } @if (suffix()) {\n <span matTextSuffix> {{ suffix() }}</span>\n } @else if (suffixIcon()) {\n <kms-icon matSuffix [icon]=\"suffixIcon()\" aria-hidden=\"true\"></kms-icon>\n } @else {\n <kms-icon\n icon=\"chevron-down\"\n [size]=\"12\"\n [color]=\"Color.SECONDARY\"\n class=\"dropdown-from-data__arrow\"\n aria-hidden=\"true\"\n matSuffix\n ></kms-icon>\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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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"] }, { kind: "component", type: i5.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }] }); }
|
|
1577
1578
|
}
|
|
1578
1579
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DropdownFromDataComponent, decorators: [{
|
|
1579
1580
|
type: Component,
|
|
@@ -1583,7 +1584,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
1583
1584
|
useExisting: forwardRef(() => DropdownFromDataComponent),
|
|
1584
1585
|
multi: true,
|
|
1585
1586
|
},
|
|
1586
|
-
], 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 [multiple]=\"multiple()\"\n [required]=\"required()\"\n formControlName=\"dropdownData\"\n >\n @if (searchable()) {\n
|
|
1587
|
+
], 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 [multiple]=\"multiple()\"\n [required]=\"required()\"\n formControlName=\"dropdownData\"\n >\n @if (searchable()) {\n <mat-option>\n <ngx-mat-select-search\n [formControl]=\"searchControl\"\n [placeholderLabel]=\"'Search...'\"\n [noEntriesFoundLabel]=\"'No matches found'\"\n >\n </ngx-mat-select-search>\n </mat-option>\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 filteredKeys; track key; let i = $index) {\n <mat-option [value]=\"filteredValues[i]\" [disabled]=\"disableOptions()\">\n {{ setDisplayKey(key) || '\u2014' }}\n </mat-option>\n }\n </mat-select>\n @if (prefix()) {\n <span matTextPrefix>{{ prefix() }} </span>\n } @else if (prefixIcon()) {\n <kms-icon matPrefix [icon]=\"prefixIcon()\" aria-hidden=\"true\"></kms-icon>\n } @if (suffix()) {\n <span matTextSuffix> {{ suffix() }}</span>\n } @else if (suffixIcon()) {\n <kms-icon matSuffix [icon]=\"suffixIcon()\" aria-hidden=\"true\"></kms-icon>\n } @else {\n <kms-icon\n icon=\"chevron-down\"\n [size]=\"12\"\n [color]=\"Color.SECONDARY\"\n class=\"dropdown-from-data__arrow\"\n aria-hidden=\"true\"\n matSuffix\n ></kms-icon>\n } @if (errorMessage()) {\n <mat-error>{{ errorMessage() }}</mat-error>\n }\n </mat-form-field>\n</form>\n" }]
|
|
1587
1588
|
}], 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 }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], suffixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixIcon", required: false }] }] } });
|
|
1588
1589
|
|
|
1589
1590
|
class LoaderComponent {
|
|
@@ -2541,7 +2542,7 @@ class FlyoutComponent {
|
|
|
2541
2542
|
this.targetHeight = `${contentHeight}px`;
|
|
2542
2543
|
}
|
|
2543
2544
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FlyoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2544
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FlyoutComponent, isStandalone: false, selector: "kms-flyout", inputs: { icon: "icon", headerCssClass: "headerCssClass", bodyCssClass: "bodyCssClass", headerTitle: "headerTitle", headerText: "headerText", hasButtonForMore: "hasButtonForMore", moreText: "moreText", lessText: "lessText" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "flyoutHeader", first: true, predicate: ["flyoutHeader"], descendants: true }], ngImport: i0, template: "<div class=\"flyout\"
|
|
2545
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FlyoutComponent, isStandalone: false, selector: "kms-flyout", inputs: { icon: "icon", headerCssClass: "headerCssClass", bodyCssClass: "bodyCssClass", headerTitle: "headerTitle", headerText: "headerText", hasButtonForMore: "hasButtonForMore", moreText: "moreText", lessText: "lessText" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "flyoutHeader", first: true, predicate: ["flyoutHeader"], descendants: true }], ngImport: i0, template: "<div class=\"flyout\">\n <div\n (click)=\"toggleDropdownHeader()\"\n [ngClass]=\"headerCssClass\"\n >\n <span [innerHtml]=\"headerTitle | kmsSafeHtml\"></span>\n <span [innerHtml]=\"headerText | kmsSafeHtml\"></span>\n\n <ng-content select=\"[header]\"></ng-content>\n\n @if (hasButtonForMore) {\n <button\n type=\"button\"\n (click)=\"toggleDropdown()\"\n class=\"flyout__more-toggle\"\n [attr.aria-expanded]=\"isDropdownOpened\"\n >\n @if (!isDropdownOpened) {\n <span>\n {{ moreText }}\n <kms-icon [icon]=\"'chevron-down'\" [size]=\"16\"> </kms-icon>\n </span>\n }\n @if (isDropdownOpened) {\n <span>\n {{ lessText }}\n <kms-icon [icon]=\"'chevron-top'\" [size]=\"16\"> </kms-icon>\n </span>\n }\n </button>\n }\n </div>\n <div\n [ngClass]=\"bodyCssClass\"\n tabindex=\"0\"\n [@dropdownAnimation]=\"{\n value: isDropdownOpened,\n params: { targetHeight: targetHeight, animationTime: '500' }\n }\"\n getMaxHeight=\"inner\"\n (sumOfHeight)=\"setDropdownListHeight($event)\"\n #flyoutHeader\n >\n @if (isDropdownOpened || !hasButtonForMore) {\n <div class=\"flyout__content\" #content>\n <ng-content></ng-content>\n </div>\n }\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: GetMaxHeightDirective, selector: "[getMaxHeight]", inputs: ["getMaxHeight"], outputs: ["maxHeightChanged", "sumOfHeight"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }, { kind: "pipe", type: SafeHtmlPipe, name: "kmsSafeHtml" }], animations: [
|
|
2545
2546
|
trigger('dropdownAnimation', [
|
|
2546
2547
|
state('true', style({
|
|
2547
2548
|
height: '{{targetHeight}}',
|
|
@@ -2589,7 +2590,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
2589
2590
|
},
|
|
2590
2591
|
}),
|
|
2591
2592
|
]),
|
|
2592
|
-
], template: "<div class=\"flyout\"
|
|
2593
|
+
], template: "<div class=\"flyout\">\n <div\n (click)=\"toggleDropdownHeader()\"\n [ngClass]=\"headerCssClass\"\n >\n <span [innerHtml]=\"headerTitle | kmsSafeHtml\"></span>\n <span [innerHtml]=\"headerText | kmsSafeHtml\"></span>\n\n <ng-content select=\"[header]\"></ng-content>\n\n @if (hasButtonForMore) {\n <button\n type=\"button\"\n (click)=\"toggleDropdown()\"\n class=\"flyout__more-toggle\"\n [attr.aria-expanded]=\"isDropdownOpened\"\n >\n @if (!isDropdownOpened) {\n <span>\n {{ moreText }}\n <kms-icon [icon]=\"'chevron-down'\" [size]=\"16\"> </kms-icon>\n </span>\n }\n @if (isDropdownOpened) {\n <span>\n {{ lessText }}\n <kms-icon [icon]=\"'chevron-top'\" [size]=\"16\"> </kms-icon>\n </span>\n }\n </button>\n }\n </div>\n <div\n [ngClass]=\"bodyCssClass\"\n tabindex=\"0\"\n [@dropdownAnimation]=\"{\n value: isDropdownOpened,\n params: { targetHeight: targetHeight, animationTime: '500' }\n }\"\n getMaxHeight=\"inner\"\n (sumOfHeight)=\"setDropdownListHeight($event)\"\n #flyoutHeader\n >\n @if (isDropdownOpened || !hasButtonForMore) {\n <div class=\"flyout__content\" #content>\n <ng-content></ng-content>\n </div>\n }\n </div>\n</div>\n" }]
|
|
2593
2594
|
}], propDecorators: { icon: [{
|
|
2594
2595
|
type: Input
|
|
2595
2596
|
}], headerCssClass: [{
|