@kms-ngx-ui/presentational 14.1.2 → 14.1.4

package/fesm2015/kms-ngx-ui-presentational.mjs

@@ -518,8 +518,8 @@ class SizeDirective {
         this.size = '';
     }
     ngOnInit() {
-        this.elementRef.nativeElement.style.width(this.size + 'px');
-        this.elementRef.nativeElement.style.height(this.size + 'px');
+        this.elementRef.nativeElement.style.width = this.size + 'px';
+        this.elementRef.nativeElement.style.height = this.size + 'px';
     }
 }
 SizeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SizeDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
@@ -1641,34 +1641,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 class KMSAccordionItemComponent {
     constructor(sanitizer) {
         this.sanitizer = sanitizer;
-        this.itemTitle = '';
         this.showAsCard = false;
         this.isSmall = false;
         this.expanded = false;
         this.panelOpenState = false;
     }
-    ngOnInit() {
-        this.itemTitleTrustHtml = this.sanitizer.bypassSecurityTrustHtml(this.itemTitle);
+    set itemTitle(val) {
+        this.itemTitleTrustHtml = this.sanitizer.bypassSecurityTrustHtml(val);
     }
+    ngOnInit() { }
 }
 KMSAccordionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KMSAccordionItemComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-KMSAccordionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: KMSAccordionItemComponent, selector: "kms-accordion-item", inputs: { itemTitle: "itemTitle", showAsCard: "showAsCard", isSmall: "isSmall", expanded: "expanded" }, ngImport: i0, template: "<mat-expansion-panel\n    class=\"accordion-item\"\n    [ngClass]=\"{showAsCard: showAsCard, showFlat: !showAsCard, isSmall: isSmall}\"\n    (opened)=\"panelOpenState = true\"\n    (closed)=\"panelOpenState = false\"\n    [expanded] = \"expanded\"\n    hideToggle=\"true\">\n    <mat-expansion-panel-header class=\"accordion-item-header\">\n        <mat-panel-title class=\"mat-subheading-2 accordion-item-title\">\n            <div [innerHtml]=\"itemTitleTrustHtml\"></div>\n            <ng-content select=\"[itemTitleElement]\"></ng-content>\n        </mat-panel-title>\n        <div class=\"accordion-item-header-icon-wrapper\">\n            <kms-icon *ngIf=\"!panelOpenState\" icon=\"ic_plus\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-desktop\"></kms-icon>\n            <kms-icon *ngIf=\"panelOpenState\" icon=\"ic_minus\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-desktop\"></kms-icon>\n\n            <kms-icon *ngIf=\"!panelOpenState\" icon=\"chevron-down\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-mobile\"></kms-icon>\n            <kms-icon *ngIf=\"panelOpenState\" icon=\"chevron-top\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-mobile\"></kms-icon>\n        </div>\n    </mat-expansion-panel-header>\n    <ng-content></ng-content>\n</mat-expansion-panel>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i3$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "size", "dontUseSprite"] }] });
+KMSAccordionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: KMSAccordionItemComponent, selector: "kms-accordion-item", inputs: { showAsCard: "showAsCard", isSmall: "isSmall", expanded: "expanded", itemTitle: "itemTitle" }, ngImport: i0, template: "<mat-expansion-panel\n    class=\"accordion-item\"\n    [ngClass]=\"{showAsCard: showAsCard, showFlat: !showAsCard, isSmall: isSmall}\"\n    (opened)=\"panelOpenState = true\"\n    (closed)=\"panelOpenState = false\"\n    [expanded] = \"expanded\"\n    hideToggle=\"true\">\n    <mat-expansion-panel-header class=\"accordion-item-header\">\n        <mat-panel-title class=\"mat-subheading-2 accordion-item-title\">\n            <div [innerHtml]=\"itemTitleTrustHtml\"></div>\n            <ng-content select=\"[itemTitleElement]\"></ng-content>\n        </mat-panel-title>\n        <div class=\"accordion-item-header-icon-wrapper\">\n            <kms-icon *ngIf=\"!panelOpenState\" icon=\"ic_plus\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-desktop\"></kms-icon>\n            <kms-icon *ngIf=\"panelOpenState\" icon=\"ic_minus\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-desktop\"></kms-icon>\n\n            <kms-icon *ngIf=\"!panelOpenState\" icon=\"chevron-down\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-mobile\"></kms-icon>\n            <kms-icon *ngIf=\"panelOpenState\" icon=\"chevron-top\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-mobile\"></kms-icon>\n        </div>\n    </mat-expansion-panel-header>\n    <ng-content></ng-content>\n</mat-expansion-panel>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i3$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "size", "dontUseSprite"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KMSAccordionItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kms-accordion-item', template: "<mat-expansion-panel\n    class=\"accordion-item\"\n    [ngClass]=\"{showAsCard: showAsCard, showFlat: !showAsCard, isSmall: isSmall}\"\n    (opened)=\"panelOpenState = true\"\n    (closed)=\"panelOpenState = false\"\n    [expanded] = \"expanded\"\n    hideToggle=\"true\">\n    <mat-expansion-panel-header class=\"accordion-item-header\">\n        <mat-panel-title class=\"mat-subheading-2 accordion-item-title\">\n            <div [innerHtml]=\"itemTitleTrustHtml\"></div>\n            <ng-content select=\"[itemTitleElement]\"></ng-content>\n        </mat-panel-title>\n        <div class=\"accordion-item-header-icon-wrapper\">\n            <kms-icon *ngIf=\"!panelOpenState\" icon=\"ic_plus\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-desktop\"></kms-icon>\n            <kms-icon *ngIf=\"panelOpenState\" icon=\"ic_minus\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-desktop\"></kms-icon>\n\n            <kms-icon *ngIf=\"!panelOpenState\" icon=\"chevron-down\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-mobile\"></kms-icon>\n            <kms-icon *ngIf=\"panelOpenState\" icon=\"chevron-top\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-mobile\"></kms-icon>\n        </div>\n    </mat-expansion-panel-header>\n    <ng-content></ng-content>\n</mat-expansion-panel>\n" }]
-        }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; }, propDecorators: { itemTitle: [{
-                type: Input
-            }], showAsCard: [{
+        }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; }, propDecorators: { showAsCard: [{
                 type: Input
             }], isSmall: [{
                 type: Input
             }], expanded: [{
                 type: Input
+            }], itemTitle: [{
+                type: Input
             }] } });
 
 /**
  * @copyright KMS GmbH
  */
+class WindowDimensions {
+    constructor(data) {
+        Object.assign(this, data);
+    }
+}
 class SimpleBreakpoint {
     constructor(data) {
         Object.assign(this, data);
@@ -1747,13 +1752,13 @@ class ViewportService {
         }
     }
     /**
-     * Get window height
+     * Get document height
      */
     getDocumentHeight() {
         return this.isBrowser ? document.body.clientHeight : 1200;
     }
     /**
-     * Get window width
+     * Get document width
      */
     getDocumentWidth() {
         return this.isBrowser ? document.body.clientWidth : 1200;
@@ -1794,11 +1799,33 @@ class ViewportService {
     }
     /**
      * Returns the current viewport as number
+     * @deprecated use getCurrentViewPortDimensions instead
      * @returns string
      */
     getCurrentViewPortNumber() {
         return this.isBrowser ? document.body.clientWidth : 1200;
     }
+    /**
+     * Returns the current viewport width as number
+     * @returns string
+     */
+    getCurrentViewPortWidth() {
+        return this.isBrowser ? document.body.clientWidth : 1200;
+    }
+    /**
+     * Returns the current viewport as number
+     * @returns string
+     */
+    getCurrentViewPortHeight() {
+        return this.isBrowser ? document.body.clientHeight : 600;
+    }
+    /**
+     * Returns the current viewport dimensions
+     * @returns string
+     */
+    getCurrentViewPortDimensions() {
+        return this.isBrowser ? { Width: document.body.clientWidth, Height: document.body.clientWidth, Orientation: this.getOrientationAsString() } : { Width: 800, Height: 600, Orientation: "landscape" };
+    }
     /**
      * Provides mq´s as string
      */
@@ -1861,7 +1888,7 @@ class ViewportService {
         if (this.isBrowser)
             return window.innerHeight > window.innerWidth;
         else
-            return;
+            return undefined;
     }
     /**
      * If orientation is landscape
@@ -1872,9 +1899,15 @@ class ViewportService {
             return isLandscape;
         }
         else {
-            return;
+            return undefined;
         }
     }
+    /**
+     * Get screen orientation (portrait/landscape)
+     */
+    getOrientationAsString() {
+        return this.isPortrait ? "portrait" : "landscape";
+    }
     /**
      * If mobile breakpoint (below tablet)
      */
@@ -1886,6 +1919,12 @@ class ViewportService {
      * @deprecated
      */
     calculateFullscreenElementsheight(id, defaultheight, extra) {
+        return this.calculateFullscreenElementsHeight(id, defaultheight, extra);
+    }
+    /**
+     * Get height of an element
+     */
+    calculateFullscreenElementsHeight(id, defaultheight, extra) {
         if (!this.isBrowser || this.isMobile()) {
             return defaultheight;
         }
@@ -1901,12 +1940,6 @@ class ViewportService {
             }
         }
     }
-    /**
-     * Get height of an element
-     */
-    calculateFullscreenElementsHeight(id, defaultheight, extra) {
-        return this.calculateFullscreenElementsheight(id, defaultheight, extra);
-    }
     /**
      * If viewport changed
      * @event
@@ -2488,13 +2521,13 @@ class DropdownFromDataComponent extends FormControlParentComponent {
     }
 }
 DropdownFromDataComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DropdownFromDataComponent, deps: [{ token: i1.UntypedFormBuilder }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-DropdownFromDataComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DropdownFromDataComponent, selector: "kms-dropdown-from-data", inputs: { optionsEnum: "optionsEnum", optionsPlainArray: "optionsPlainArray", optionsObjArray: "optionsObjArray", mapKey: "mapKey", mapValue: "mapValue", hasNullOption: "hasNullOption", translation: "translation", placeholder: "placeholder", label: "label", required: "required", useEnumIndexAsValue: "useEnumIndexAsValue", multiple: "multiple" }, providers: [
+DropdownFromDataComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DropdownFromDataComponent, selector: "kms-dropdown-from-data", inputs: { optionsEnum: "optionsEnum", optionsPlainArray: "optionsPlainArray", optionsObjArray: "optionsObjArray", mapKey: "mapKey", mapValue: "mapValue", hasNullOption: "hasNullOption", translation: "translation", placeholder: "placeholder", label: "label", required: "required", useEnumIndexAsValue: "useEnumIndexAsValue", multiple: "multiple", control: "control" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => DropdownFromDataComponent),
             multi: true,
         },
-    ], usesInheritance: true, usesOnChanges: 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      [(value)]=\"value\"\n      (selectionChange)=\"valueChanged($event?.value)\"\n      #child\n      [disabled]=\"disabled\"\n      [multiple]=\"multiple\"\n    >\n      <mat-option *ngFor=\"let key of keys; let i = index\" [value]=\"values[i]\">\n        <span>{{ setDisplayKey(key) }}</span>\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n</form>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: i3$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }] });
+    ], usesInheritance: true, usesOnChanges: 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      [(value)]=\"control?.value ? control.value : value\"\n      (selectionChange)=\"valueChanged($event?.value)\"\n      #child\n      [disabled]=\"disabled\"\n      [multiple]=\"multiple\"\n    >\n      <mat-option *ngFor=\"let key of keys; let i = index\" [value]=\"values[i]\">\n        <span>{{ setDisplayKey(key) }}</span>\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n</form>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: i3$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DropdownFromDataComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kms-dropdown-from-data', providers: [
@@ -2503,7 +2536,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                             useExisting: forwardRef(() => DropdownFromDataComponent),
                             multi: true,
                         },
-                    ], 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      [(value)]=\"value\"\n      (selectionChange)=\"valueChanged($event?.value)\"\n      #child\n      [disabled]=\"disabled\"\n      [multiple]=\"multiple\"\n    >\n      <mat-option *ngFor=\"let key of keys; let i = index\" [value]=\"values[i]\">\n        <span>{{ setDisplayKey(key) }}</span>\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n</form>\n" }]
+                    ], 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      [(value)]=\"control?.value ? control.value : value\"\n      (selectionChange)=\"valueChanged($event?.value)\"\n      #child\n      [disabled]=\"disabled\"\n      [multiple]=\"multiple\"\n    >\n      <mat-option *ngFor=\"let key of keys; let i = index\" [value]=\"values[i]\">\n        <span>{{ setDisplayKey(key) }}</span>\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n</form>\n" }]
         }], ctorParameters: function () { return [{ type: i1.UntypedFormBuilder }, { type: i0.Renderer2 }]; }, propDecorators: { optionsEnum: [{
                 type: Input
             }], optionsPlainArray: [{
@@ -2528,6 +2561,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], multiple: [{
                 type: Input
+            }], control: [{
+                type: Input
             }] } });
 
 /*!
@@ -3159,5 +3194,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActionsParentComponent, BackToTopComponent, Breakpoint, ButtonWithConfirmDialogComponent, CheckboxComponent, ColorInputComponent, CustomPipesModule, DecodeUriPipe, DirectivesModule, DropdownFromDataComponent, EncodeUriPipe, EnumRadiogroupComponent, FileInputComponent, FlyoutComponent, FormParentComponent, GenericDialogComponent, GetMaxHeightDirective, IconComponent, IconSize, ImageSliderComponent, IntegerCurrency, KMSAccordionItemComponent, KmsUiPresentationalComponent, KmsUiPresentationalModule, KmsUiPresentationalService, LoaderComponent, MapComponent, Marker, MarkerLabel, MarkerOptions, MouseWheelDirective, RadioButtonComponent, SafeHtmlPipe, SafeResourceUrlPipe, SafeStylePipe, SafeUrlPipe, SalutationDropdownComponent, SalutationEnum, SalutationRadiogroupComponent, SimpleBreakpoint, SizeDirective, SwipeDirective, TimeInputComponent, ToNumberPipe, TooltipComponent, TooltipDirective, TooltipIconComponent, TrimPipe, TypeofPipe, ViewportService, YesNoRadiogroupComponent };
+export { ActionsParentComponent, BackToTopComponent, Breakpoint, ButtonWithConfirmDialogComponent, CheckboxComponent, ColorInputComponent, CustomPipesModule, DecodeUriPipe, DirectivesModule, DropdownFromDataComponent, EncodeUriPipe, EnumRadiogroupComponent, FileInputComponent, FlyoutComponent, FormParentComponent, GenericDialogComponent, GetMaxHeightDirective, IconComponent, IconSize, ImageSliderComponent, IntegerCurrency, KMSAccordionItemComponent, KmsUiPresentationalComponent, KmsUiPresentationalModule, KmsUiPresentationalService, LoaderComponent, MapComponent, Marker, MarkerLabel, MarkerOptions, MouseWheelDirective, RadioButtonComponent, SafeHtmlPipe, SafeResourceUrlPipe, SafeStylePipe, SafeUrlPipe, SalutationDropdownComponent, SalutationEnum, SalutationRadiogroupComponent, SimpleBreakpoint, SizeDirective, SwipeDirective, TimeInputComponent, ToNumberPipe, TooltipComponent, TooltipDirective, TooltipIconComponent, TrimPipe, TypeofPipe, ViewportService, WindowDimensions, YesNoRadiogroupComponent };
 //# sourceMappingURL=kms-ngx-ui-presentational.mjs.map