@kms-ngx-ui/presentational 0.0.17 → 0.0.19

package/README.md

@@ -1,24 +1,28 @@
-# KmsUiPresentational
-
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.14.
-
-## Code scaffolding
-
-Run `ng generate component component-name --project kms-ngx-ui-presentational` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project kms-ngx-ui-presentational`.
-> Note: Don't forget to add `--project kms-ngx-ui-presentational` or else it will be added to the default project in your `angular.json` file. 
-
-## Build
-
-Run `ng build kms-ngx-ui-presentational` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-## Publishing
-
-After building your library with `ng build kms-ngx-ui-presentational`, go to the dist folder `cd dist/kms-ngx-ui-presentational` and run `npm publish`.
-
-## Running unit tests
-
-Run `ng test kms-ngx-ui-presentational` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+# KmsUiPresentational
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.14.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project kms-ngx-ui-presentational` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project kms-ngx-ui-presentational`.
+> Note: Don't forget to add `--project kms-ngx-ui-presentational` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build kms-ngx-ui-presentational` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build kms-ngx-ui-presentational`, go to the dist folder `cd dist/kms-ngx-ui-presentational` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test kms-ngx-ui-presentational` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running Storybook
+
+Run `npm run storybook` to start Storybook.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

package/bundles/kms-ngx-ui-presentational.umd.js

@@ -473,7 +473,7 @@
     CheckboxComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'kms-checkbox',
-                    template: "<!-- <label class=\"wrapper ui-copy-text\"\n       [ngClass]=\"{'disabled' : disabled}\">{{label}}\n    <input type=\"checkbox\" \n           [checked]=\"checked\"\n           [value]=\"value\"\n           [name]=\"name\"\n           [disabled]=\"disabled\"\n           (change)=\"selectAction($event)\">\n\n</label> -->\n<mat-checkbox class=\"example-margin\" [disabled]=\"disabled\" [name]=\"name\" [(ngModel)]=\"checked\"></mat-checkbox>\n<span *ngIf=\"infoText && infoText.length > 0\" \n      class=\"\"\n      [ngClass]=\"{'disabled' : disabled}\">{{infoText}}\n</span>",
+                    template: "<!-- <label class=\"wrapper ui-copy-text\"\r\n       [ngClass]=\"{'disabled' : disabled}\">{{label}}\r\n    <input type=\"checkbox\" \r\n           [checked]=\"checked\"\r\n           [value]=\"value\"\r\n           [name]=\"name\"\r\n           [disabled]=\"disabled\"\r\n           (change)=\"selectAction($event)\">\r\n\r\n</label> -->\r\n<mat-checkbox class=\"example-margin\" [disabled]=\"disabled\" [name]=\"name\" [(ngModel)]=\"checked\"></mat-checkbox>\r\n<span *ngIf=\"infoText && infoText.length > 0\" \r\n      class=\"\"\r\n      [ngClass]=\"{'disabled' : disabled}\">{{infoText}}\r\n</span>",
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
@@ -664,12 +664,12 @@
             this.form = this.formBuilder.group({
                 color: '',
             });
+            _super.prototype.ngOnInit.call(this);
             this.formInitialized = true;
             this.form.valueChanges.subscribe(function (value) {
                 _this.internalValue = value.color;
                 _this.onChange(value.color);
             });
-            _super.prototype.ngOnInit.call(this);
         };
         ColorInputComponent.prototype.validate = function (_) {
             // TODO fix to validate complete form
@@ -686,12 +686,18 @@
             }
             return false;
         };
+        ColorInputComponent.prototype.updateSelectedColor = function (value) {
+            var color = value.target.value;
+            this.value = color;
+            this.internalValue = color;
+            this.change(color);
+        };
         return ColorInputComponent;
     }(FormControlParentComponent));
     ColorInputComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'kms-color-input',
-                    template: "\n<form [formGroup]=\"form\" *ngIf=\"formInitialized\">\n    <div>\n        <mat-form-field class=\"colorInput\">\n            <kms-tooltip-icon [tooltipText]=\"tooltipText\" *ngIf=\"tooltipText\"></kms-tooltip-icon>\n            <mat-label>{{ label }}</mat-label>\n            <input type=\"text\" [value]=\"value\" matInput formControlName=\"color\" [placeholder]=\"placeholder\" [ngClass]=\"{'my-inValid': !matchesHex(value)}\" />\n            <input type=\"color\" [value]=\"value && matchesHex(value) ? value : '#ffffff'\" formControlName=\"color\" [ngClass]=\"{'my-inValid': !matchesHex(value)}\" />\n        </mat-form-field>\n    </div>\n</form>",
+                    template: "\r\n<form [formGroup]=\"form\" *ngIf=\"formInitialized\">\r\n    <div>\r\n        <mat-form-field class=\"colorInput\">\r\n            <kms-tooltip-icon [tooltipText]=\"tooltipText\" *ngIf=\"tooltipText\"></kms-tooltip-icon>\r\n            <mat-label>{{ label }}</mat-label>\r\n            <input type=\"text\" [(ngModel)]=\"value\" matInput formControlName=\"color\" [placeholder]=\"placeholder\" [ngClass]=\"{'my-inValid': !matchesHex(value)}\" />\r\n            <input type=\"color\" [value]=\"value && matchesHex(value) ? value : '#ffffff'\" (change)=\"updateSelectedColor($event)\" [ngClass]=\"{'my-inValid': !matchesHex(value)}\" />\r\n        </mat-form-field>\r\n    </div>\r\n</form>",
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
@@ -761,7 +767,7 @@
     RadioButtonComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'kms-radiobutton',
-                    template: "<label class=\"wrapper ui-small-text\"\n       [ngClass]=\"{'disabled' : disabled}\">\n    <input type=\"radio\"\n           [name]=\"name\"\n           [value]=\"value\"\n           [checked]=\"checked\"\n           [disabled]=\"disabled\"\n           [id]=\"id\"\n           (change)=\"selectAction($event)\">{{label}}\n\n    <kms-icon\n            class=\"checkmark\" \n            aria-hidden=\"true\"\n            *ngIf=\"checked\"\n            [ngClass]=\"{\n                'disabled' : disabled\n            }\"\n            [iconClass]=\"{\n                'disabled' : disabled, \n                'color-primary': true,\n                'size-16': true\n            }\"\n            [icon]=\"'ic_radiobutton_active'\"\n        >\n    </kms-icon>\n    <kms-icon\n            class=\"checkmark\" \n            aria-hidden=\"true\"\n            *ngIf=\"!checked\"\n            [ngClass]=\"{\n                'disabled' : disabled\n            }\"\n            [iconClass]=\"{\n                'disabled' : disabled, \n                'color-primary': true,\n                'size-16': true\n            }\"\n            [icon]=\"'ic_radiobutton_inactive'\"\n        >\n    </kms-icon>\n    <ng-content></ng-content>\n</label>\n",
+                    template: "<label class=\"wrapper ui-small-text\"\r\n       [ngClass]=\"{'disabled' : disabled}\">\r\n    <input type=\"radio\"\r\n           [name]=\"name\"\r\n           [value]=\"value\"\r\n           [checked]=\"checked\"\r\n           [disabled]=\"disabled\"\r\n           [id]=\"id\"\r\n           (change)=\"selectAction($event)\">{{label}}\r\n\r\n    <kms-icon\r\n            class=\"checkmark\" \r\n            aria-hidden=\"true\"\r\n            *ngIf=\"checked\"\r\n            [ngClass]=\"{\r\n                'disabled' : disabled\r\n            }\"\r\n            [iconClass]=\"{\r\n                'disabled' : disabled, \r\n                'color-primary': true,\r\n                'size-16': true\r\n            }\"\r\n            [icon]=\"'ic_radiobutton_active'\"\r\n        >\r\n    </kms-icon>\r\n    <kms-icon\r\n            class=\"checkmark\" \r\n            aria-hidden=\"true\"\r\n            *ngIf=\"!checked\"\r\n            [ngClass]=\"{\r\n                'disabled' : disabled\r\n            }\"\r\n            [iconClass]=\"{\r\n                'disabled' : disabled, \r\n                'color-primary': true,\r\n                'size-16': true\r\n            }\"\r\n            [icon]=\"'ic_radiobutton_inactive'\"\r\n        >\r\n    </kms-icon>\r\n    <ng-content></ng-content>\r\n</label>\r\n",
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
@@ -848,7 +854,7 @@
     TimeInputComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'kms-time-input',
-                    template: "<form [formGroup]=\"form\" class=\"timeInput\">\n    <input formControlName=\"h\" [value]=\"h\" maxlength=\"2\" />\n    <span>:</span>\n    <input formControlName=\"m\" [value]=\"m\" maxlength=\"2\" />\n</form>",
+                    template: "<form [formGroup]=\"form\" class=\"timeInput\">\r\n    <input type=\"number\" formControlName=\"h\" [value]=\"h\" maxlength=\"2\" min=\"0\" max=\"23\" />\r\n    <span>:</span>\r\n    <input type=\"number\" formControlName=\"m\" [value]=\"m\" maxlength=\"2\" min=\"0\" max=\"59\"/>\r\n</form>",
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
@@ -919,7 +925,7 @@
     YesNoRadiogroupComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'kms-yesno-radiogroup',
-                    template: "<form [formGroup]=\"form\">\n    <div>{{ header }}</div>\n    <mat-radio-group [formControl]=\"form.controls['yesno']\" [disabled]=\"disabled\" #child>\n        <mat-radio-button [value]=\"true\" [checked]=\"internalValue === true\"> {{ textYes }}</mat-radio-button>\n        <mat-radio-button [value]=\"false\" [checked]=\"internalValue === false\"> {{ textNo }}</mat-radio-button>\n    </mat-radio-group>\n</form>\n",
+                    template: "<form [formGroup]=\"form\">\r\n    <div>{{ header }}</div>\r\n    <mat-radio-group [formControl]=\"form.controls['yesno']\" [disabled]=\"disabled\" #child>\r\n        <mat-radio-button [value]=\"true\" [checked]=\"internalValue === true\"> {{ textYes }}</mat-radio-button>\r\n        <mat-radio-button [value]=\"false\" [checked]=\"internalValue === false\"> {{ textNo }}</mat-radio-button>\r\n    </mat-radio-group>\r\n</form>\r\n",
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
@@ -1157,7 +1163,7 @@
     FileInputComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'kms-file-input',
-                    template: "<form [formGroup]=\"form\" (change)=\"newImageLoading=true\" class=\"fileInput\"> \n\n    <div *ngIf=\"form.value.Filename && previewImage\">\n        <div *ngIf=\"newImageLoading\">\n            {{ 'file-input.loading' | translate }}\n        </div>\n        <div *ngIf=\"!newImageLoading\">\n            <div class=\"\">\n                <div class=\"\">\n                    <img *ngIf=\"form.value.ImageLink && form.value.ImageLink !== '' && !(form.value.ImageAsDataURL && form.value.ImageAsDataURL !== '')\" [src]=\"form.value.ImageAsDataURL\" [src]=\"form.value.ImageLink\" style=\"height: 40px; width: fit-content;\" />\n                    <img *ngIf=\"form.value.ImageAsDataURL && form.value.ImageAsDataURL !== ''\" [src]=\"form.value.ImageAsDataURL\" style=\"height: 40px; width: fit-content;\" />\n                </div>\n                <div class=\"\">{{form.value.Filename}}</div>\n                <div class=\"\">\n                    <div (click)=\"removeFromList()\" *ngIf=\"allowRemove\">\n                        <kms-icon icon=\"trash\" [iconSize]=\"IconSize.TINY\" iconClass=\"color-black\"></kms-icon> \n                        {{ 'file-input.remove' }}\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div *ngIf=\"!previewImage\">\n        <div class=\"\">{{form.value.Filename}}</div>\n    </div>\n\n    <button (click)=\"selectImageOverlay()\" class=\"button-primary-font-color\" mat-stroked-button>\n        <span>{{ label }}</span>\n    </button>\n    <input\n        type=\"file\"\n        [accept]=\"acceptedFileMimetypes\"\n        style=\"display: none\"\n        #fileInput\n        (click)=\"clearInputValue($event)\"\n        (change)=\"selectImage($event)\"\n    />\n\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageIdent']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageLink']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['Filename']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageAsDataURL']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['Text']\" />\n\n</form>",
+                    template: "<form [formGroup]=\"form\" (change)=\"newImageLoading=true\" class=\"fileInput\"> \r\n\r\n    <div *ngIf=\"form.value.Filename && previewImage\">\r\n        <div *ngIf=\"newImageLoading\">\r\n            {{ 'file-input.loading' | translate }}\r\n        </div>\r\n        <div *ngIf=\"!newImageLoading\">\r\n            <div class=\"\">\r\n                <div class=\"\">\r\n                    <img *ngIf=\"form.value.ImageLink && form.value.ImageLink !== '' && !(form.value.ImageAsDataURL && form.value.ImageAsDataURL !== '')\" [src]=\"form.value.ImageAsDataURL\" [src]=\"form.value.ImageLink\" style=\"height: 40px; width: fit-content;\" />\r\n                    <img *ngIf=\"form.value.ImageAsDataURL && form.value.ImageAsDataURL !== ''\" [src]=\"form.value.ImageAsDataURL\" style=\"height: 40px; width: fit-content;\" />\r\n                </div>\r\n                <div class=\"\">{{form.value.Filename}}</div>\r\n                <div class=\"\">\r\n                    <div (click)=\"removeFromList()\" *ngIf=\"allowRemove\">\r\n                        <kms-icon icon=\"trash\" [iconSize]=\"IconSize.TINY\" iconClass=\"color-black\"></kms-icon> \r\n                        {{ 'file-input.remove' }}\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"!previewImage\">\r\n        <div class=\"\">{{form.value.Filename}}</div>\r\n    </div>\r\n\r\n    <button (click)=\"selectImageOverlay()\" class=\"button-primary-font-color\" mat-stroked-button>\r\n        <span>{{ label }}</span>\r\n    </button>\r\n    <input\r\n        type=\"file\"\r\n        [accept]=\"acceptedFileMimetypes\"\r\n        style=\"display: none\"\r\n        #fileInput\r\n        (click)=\"clearInputValue($event)\"\r\n        (change)=\"selectImage($event)\"\r\n    />\r\n\r\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageIdent']\" />\r\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageLink']\" />\r\n    <input type=\"hidden\" [formControl]=\"form.controls['Filename']\" />\r\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageAsDataURL']\" />\r\n    <input type=\"hidden\" [formControl]=\"form.controls['Text']\" />\r\n\r\n</form>",
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
@@ -1203,7 +1209,7 @@
     LoaderComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'kms-loader',
-                    template: "<div class=\"loading-spinner-shade\" *ngIf=\"loading\">\n    <mat-spinner class=\"spinnerMargin\" color=\"accent\" diameter=\"44\"></mat-spinner>\n</div>\n",
+                    template: "<div class=\"loading-spinner-shade\" *ngIf=\"loading\">\r\n    <mat-spinner class=\"spinnerMargin\" color=\"accent\" diameter=\"44\"></mat-spinner>\r\n</div>\r\n",
                     styles: [""]
                 },] }
     ];
@@ -1255,7 +1261,7 @@
     FlyoutComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'kms-flyout',
-                    template: "<div class=\"flyout\"\n    [ngClass]=\"{'is-active': isDropdownOpened}\"\n>\n    <div class=\"flyout-header\" (click)=\"toggleDropdownHeader()\" [ngClass]=\"headerCssClass\">\n        <span [innerHtml]=\"headerTitle | kmsSafeHtml\"></span>\n        <span [innerHtml]=\"headerText | kmsSafeHtml\"></span>\n\n        <ng-content select=\"[header]\"></ng-content>\n\n        <div *ngIf=\"hasButtonForMore\" (click)=\"toggleDropdown()\" class=\"flyout-header-more\">\n            <span *ngIf=\"!isDropdownOpened\">\n                {{ moreText }}\n            </span>\n            <span *ngIf=\"isDropdownOpened\">\n                {{ lessText }}\n            </span>\n            <kms-icon [icon]=\"'chevron-down'\"\n                  [iconClass]=\"{'size-16': true, 'is-rotating180': isDropdownOpened}\" >\n            </kms-icon>\n        </div>\n    </div>\n    <div \n        class=\"flyout-body\"\n        [ngClass]=\"bodyCssClass\"\n        tabindex=\"0\"\n        [@dropdownAnimation]=\"{value: isDropdownOpened, params: {targetHeight: targetHeight, animationTime: '500'}}\"\n        getMaxHeight=\"inner\"\n        (sumOfHeight)=\"setDropdownListHeight($event)\"\n        #flyoutHeader>\n        <div class=\"inner\" #content>\n            <ng-content ></ng-content>\n        </div>\n    </div>\n\n</div>\n",
+                    template: "<div class=\"flyout\"\r\n    [ngClass]=\"{'is-active': isDropdownOpened}\"\r\n>\r\n    <div class=\"flyout-header\" (click)=\"toggleDropdownHeader()\" [ngClass]=\"headerCssClass\">\r\n        <span [innerHtml]=\"headerTitle | kmsSafeHtml\"></span>\r\n        <span [innerHtml]=\"headerText | kmsSafeHtml\"></span>\r\n\r\n        <ng-content select=\"[header]\"></ng-content>\r\n\r\n        <div *ngIf=\"hasButtonForMore\" (click)=\"toggleDropdown()\" class=\"flyout-header-more\">\r\n            <span *ngIf=\"!isDropdownOpened\">\r\n                {{ moreText }}\r\n            </span>\r\n            <span *ngIf=\"isDropdownOpened\">\r\n                {{ lessText }}\r\n            </span>\r\n            <kms-icon [icon]=\"'chevron-down'\"\r\n                  [iconClass]=\"{'size-16': true, 'is-rotating180': isDropdownOpened}\" >\r\n            </kms-icon>\r\n        </div>\r\n    </div>\r\n    <div \r\n        class=\"flyout-body\"\r\n        [ngClass]=\"bodyCssClass\"\r\n        tabindex=\"0\"\r\n        [@dropdownAnimation]=\"{value: isDropdownOpened, params: {targetHeight: targetHeight, animationTime: '500'}}\"\r\n        getMaxHeight=\"inner\"\r\n        (sumOfHeight)=\"setDropdownListHeight($event)\"\r\n        #flyoutHeader>\r\n        <div class=\"inner\" #content>\r\n            <ng-content ></ng-content>\r\n        </div>\r\n    </div>\r\n\r\n</div>\r\n",
                     animations: [
                         animations.trigger('dropdownAnimation', [
                             animations.state('true', animations.style({
@@ -1580,7 +1586,7 @@
     IconComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'kms-icon',
-                    template: "<ng-container *ngIf=\"icon !== 'none' && dontUseSprite === false\">\n  <span class=\"icon {{ iconSize }}\" [ngClass]=\"iconClass\" [ngStyle]=\"iconStyle\">\n    <svg>\n      <use\n        [attr.xlink:href]=\"\n          'assets/sprite.svg?Version=' + Version + '#' + iconToShow\n        \"\n      ></use>\n    </svg>\n  </span>\n</ng-container>\n<ng-container *ngIf=\"icon !== 'none' && dontUseSprite === true\">\n  <object\n    [data]=\"\n      sanitizer.bypassSecurityTrustResourceUrl('assets/icons/' + icon + '')\n    \"\n    type=\"image/svg+xml\"\n    class=\"icon {{ iconSize }}\"\n    [ngClass]=\"iconClass\"\n    [ngStyle]=\"iconStyle\"\n  ></object>\n</ng-container>\n",
+                    template: "<ng-container *ngIf=\"icon !== 'none' && dontUseSprite === false\">\r\n  <span class=\"icon {{ iconSize }}\" [ngClass]=\"iconClass\" [ngStyle]=\"iconStyle\">\r\n    <svg>\r\n      <use\r\n        [attr.xlink:href]=\"\r\n          'assets/sprite.svg?Version=' + Version + '#' + iconToShow\r\n        \"\r\n      ></use>\r\n    </svg>\r\n  </span>\r\n</ng-container>\r\n<ng-container *ngIf=\"icon !== 'none' && dontUseSprite === true\">\r\n  <object\r\n    [data]=\"\r\n      sanitizer.bypassSecurityTrustResourceUrl('assets/icons/' + icon + '')\r\n    \"\r\n    type=\"image/svg+xml\"\r\n    class=\"icon {{ iconSize }}\"\r\n    [ngClass]=\"iconClass\"\r\n    [ngStyle]=\"iconStyle\"\r\n  ></object>\r\n</ng-container>\r\n",
                     styles: [""]
                 },] }
     ];
@@ -1622,7 +1628,7 @@
     EnumRadiogroupComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'kms-enum-radiogroup',
-                    template: "<form [formGroup]=\"form\">\n    <div>{{ header }}</div>\n    <mat-radio-group [formControl]=\"form.controls['enumData']\" [disabled]=\"disabled\" #child>\n        <mat-radio-button [value]=\"choice\" [checked]=\"value === choice\" *ngFor=\"let choice of optionValues\">{{ translationPrefix + '.' + choice | translate }}</mat-radio-button>\n    </mat-radio-group>\n</form>",
+                    template: "<form [formGroup]=\"form\">\r\n    <div>{{ header }}</div>\r\n    <mat-radio-group [formControl]=\"form.controls['enumData']\" [disabled]=\"disabled\" #child>\r\n        <mat-radio-button [value]=\"choice\" [checked]=\"value === choice\" *ngFor=\"let choice of optionValues\">{{ translationPrefix + '.' + choice | translate }}</mat-radio-button>\r\n    </mat-radio-group>\r\n</form>",
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
@@ -1664,7 +1670,7 @@
     KMSAccordionItemComponent.decorators = [
         { type: i0.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    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>",
+                    template: "<mat-expansion-panel\r\n    class=\"accordion-item\" \r\n    [ngClass]=\"{showAsCard: showAsCard, showFlat: !showAsCard, isSmall: isSmall}\"\r\n    (opened)=\"panelOpenState = true\" \r\n    (closed)=\"panelOpenState = false\"\r\n    hideToggle=\"true\">\r\n    <mat-expansion-panel-header class=\"accordion-item-header\">\r\n        <mat-panel-title class=\"mat-subheading-2 accordion-item-title\">\r\n            <div [innerHtml]=\"itemTitleTrustHtml\"></div>\r\n            <ng-content select=\"[itemTitleElement]\"></ng-content>                   \r\n        </mat-panel-title>\r\n        <div class=\"accordion-item-header-icon-wrapper\">\r\n            <kms-icon *ngIf=\"!panelOpenState\" icon=\"ic_plus\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-desktop\"></kms-icon>\r\n            <kms-icon *ngIf=\"panelOpenState\" icon=\"ic_minus\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-desktop\"></kms-icon>\r\n\r\n            <kms-icon *ngIf=\"!panelOpenState\" icon=\"chevron-down\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-mobile\"></kms-icon>\r\n            <kms-icon *ngIf=\"panelOpenState\" icon=\"chevron-top\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-mobile\"></kms-icon>\r\n        </div>\r\n    </mat-expansion-panel-header>\r\n    <ng-content></ng-content>\r\n</mat-expansion-panel>",
                     styles: [""]
                 },] }
     ];
@@ -2044,7 +2050,7 @@
     MapComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'kms-map',
-                    template: "<div *ngIf=\"geoDataFoundForAddress && widthSet\">\n    <google-map\n            height=\"415px\"\n            [width]=\"width\"\n            [zoom]=\"zoom\"\n            [center]=\"center\"\n            [options]=\"options\"\n    >\n        <map-marker\n            *ngFor=\"let marker of markers\"\n            [position]=\"marker.position\"\n            [label]=\"marker.label\"\n            [title]=\"marker.title\"\n            [options]=\"marker.options\"\n        >\n        </map-marker>\n    </google-map>\n</div>",
+                    template: "<div *ngIf=\"geoDataFoundForAddress && widthSet\">\r\n    <google-map\r\n            height=\"415px\"\r\n            [width]=\"width\"\r\n            [zoom]=\"zoom\"\r\n            [center]=\"center\"\r\n            [options]=\"options\"\r\n    >\r\n        <map-marker\r\n            *ngFor=\"let marker of markers\"\r\n            [position]=\"marker.position\"\r\n            [label]=\"marker.label\"\r\n            [title]=\"marker.title\"\r\n            [options]=\"marker.options\"\r\n        >\r\n        </map-marker>\r\n    </google-map>\r\n</div>",
                     styles: [""]
                 },] }
     ];
@@ -2094,7 +2100,7 @@
     SalutationDropdownComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'kms-salutation-dropdown',
-                    template: "<form [formGroup]=\"form\" class=\"row\">\n    <mat-form-field class=\"col\">\n        <mat-select disableOptionCentering [formControl]=\"form.controls['salut']\" [placeholder]=\"placeholder\" [value]=\"value\" #child>\n            <mat-option [value]=\"SalutationEnum.NOT_SPECIFIED\">{{ 'general.salutation.' + Object.keys(SalutationEnum)[0]?.toLowerCase() | translate }}</mat-option>\n            <mat-option [value]=\"SalutationEnum.MALE\">{{ 'general.salutation.' + Object.keys(SalutationEnum)[1]?.toLowerCase() | translate }}</mat-option>\n            <mat-option [value]=\"SalutationEnum.FEMALE\">{{ 'general.salutation.' + Object.keys(SalutationEnum)[2]?.toLowerCase() | translate }}</mat-option>\n        </mat-select>\n    </mat-form-field>\n</form>",
+                    template: "<form [formGroup]=\"form\" class=\"row\">\r\n    <mat-form-field class=\"col\">\r\n        <mat-select disableOptionCentering [formControl]=\"form.controls['salut']\" [placeholder]=\"placeholder\" [value]=\"value\" #child>\r\n            <mat-option [value]=\"SalutationEnum.NOT_SPECIFIED\">{{ 'general.salutation.' + Object.keys(SalutationEnum)[0]?.toLowerCase() | translate }}</mat-option>\r\n            <mat-option [value]=\"SalutationEnum.MALE\">{{ 'general.salutation.' + Object.keys(SalutationEnum)[1]?.toLowerCase() | translate }}</mat-option>\r\n            <mat-option [value]=\"SalutationEnum.FEMALE\">{{ 'general.salutation.' + Object.keys(SalutationEnum)[2]?.toLowerCase() | translate }}</mat-option>\r\n        </mat-select>\r\n    </mat-form-field>\r\n</form>",
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
@@ -2153,7 +2159,7 @@
     TooltipIconComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'kms-tooltip-icon',
-                    template: "<span\n    kmsTooltip\n    [tooltipTitle]=\"tooltipTitle\"\n    [tooltipText]=\"tooltipText\"\n    [tooltipPlacement]=\"placement\"\n    [tooltipDelay]=\"delay\"\n    [tooltipLinkText]=\"tooltipLinkText\"\n    [tooltipLinkUrl]=\"tooltipLinkUrl\"\n>\n    <kms-icon icon=\"ic_info\" [iconSize]=\"IconSize.SMALLER\" [iconClass]=\"'color-primary'\"></kms-icon>\n</span>\n",
+                    template: "<span\r\n    kmsTooltip\r\n    [tooltipTitle]=\"tooltipTitle\"\r\n    [tooltipText]=\"tooltipText\"\r\n    [tooltipPlacement]=\"placement\"\r\n    [tooltipDelay]=\"delay\"\r\n    [tooltipLinkText]=\"tooltipLinkText\"\r\n    [tooltipLinkUrl]=\"tooltipLinkUrl\"\r\n>\r\n    <kms-icon icon=\"ic_info\" [iconSize]=\"IconSize.SMALLER\" [iconClass]=\"'color-primary'\"></kms-icon>\r\n</span>\r\n",
                     styles: [""]
                 },] }
     ];
@@ -2194,7 +2200,7 @@
     SalutationRadiogroupComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'kms-salutation-radiogroup',
-                    template: "<form [formGroup]=\"form\" >\n    <mat-radio-group [formControl]=\"form.controls['salut']\" [disabled]=\"disabled\" #radioGroup>\n        <mat-radio-button color=\"primary\" [value]=\"SalutationEnum.NOT_SPECIFIED\" [checked]=\"value === SalutationEnum.NOT_SPECIFIED\">\n            {{ 'general.salutation.' + Object.keys(SalutationEnum)[0]?.toLowerCase() | translate }}\n        </mat-radio-button>\n        <mat-radio-button color=\"primary\" [value]=\"SalutationEnum.MALE\" [checked]=\"value === SalutationEnum.MALE\">\n            {{ 'general.salutation.' + Object.keys(SalutationEnum)[1]?.toLowerCase() | translate }}\n        </mat-radio-button>\n        <mat-radio-button color=\"primary\" [value]=\"SalutationEnum.FEMALE\" [checked]=\"value === SalutationEnum.FEMALE\">\n            {{ 'general.salutation.' + Object.keys(SalutationEnum)[2]?.toLowerCase() | translate }}\n        </mat-radio-button>\n    </mat-radio-group>\n</form>",
+                    template: "<form [formGroup]=\"form\" >\r\n    <mat-radio-group [formControl]=\"form.controls['salut']\" [disabled]=\"disabled\" #radioGroup>\r\n        <mat-radio-button color=\"primary\" [value]=\"SalutationEnum.NOT_SPECIFIED\" [checked]=\"value === SalutationEnum.NOT_SPECIFIED\">\r\n            {{ 'general.salutation.' + Object.keys(SalutationEnum)[0]?.toLowerCase() | translate }}\r\n        </mat-radio-button>\r\n        <mat-radio-button color=\"primary\" [value]=\"SalutationEnum.MALE\" [checked]=\"value === SalutationEnum.MALE\">\r\n            {{ 'general.salutation.' + Object.keys(SalutationEnum)[1]?.toLowerCase() | translate }}\r\n        </mat-radio-button>\r\n        <mat-radio-button color=\"primary\" [value]=\"SalutationEnum.FEMALE\" [checked]=\"value === SalutationEnum.FEMALE\">\r\n            {{ 'general.salutation.' + Object.keys(SalutationEnum)[2]?.toLowerCase() | translate }}\r\n        </mat-radio-button>\r\n    </mat-radio-group>\r\n</form>",
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
@@ -2244,7 +2250,7 @@
     BackToTopComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'kms-back-to-top',
-                    template: "<div class=\"scrollToTop\"\n    [ngClass]=\"{'show': windowScrolled}\"\n    (click)=\"scrollToTop()\">\n        <div class=\"scrollToTop-inner\">\n            <kms-icon icon=\"floating_button_clear\" iconClass=\"color-white\"></kms-icon>\n        </div>\n</div>"
+                    template: "<div class=\"scrollToTop\"\r\n    [ngClass]=\"{'show': windowScrolled}\"\r\n    (click)=\"scrollToTop()\">\r\n        <div class=\"scrollToTop-inner\">\r\n            <kms-icon icon=\"floating_button_clear\" iconClass=\"color-white\"></kms-icon>\r\n        </div>\r\n</div>"
                 },] }
     ];
     BackToTopComponent.ctorParameters = function () { return [
@@ -2302,7 +2308,7 @@
     GenericDialogComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'kms-generic-dialog',
-                    template: "<div mat-dialog-title class=\"mat-dialog-title\">\n    <h3>{{ data.title }}</h3>\n</div>\n<div mat-dialog-content class=\"mat-dialog-content\">\n    {{ data.message }}\n</div>\n<div mat-dialog-actions class=\"custom-dialog-actions\">\n    <button\n        mat-flat-button\n        class=\"test_secondary_button\"\n         color=\"accent\"\n        (click)=\"onClickAction(ButtonResponseType.secondary)\"\n    >\n        {{ buttons.secondary }}\n    </button>\n    <button\n        mat-flat-button\n        class=\"test_primary_button\"\n        color=\"primary\"\n        (click)=\"onClickAction(ButtonResponseType.primary)\"\n    >\n        {{ buttons.primary }}\n    </button>\n</div>\n",
+                    template: "<div mat-dialog-title class=\"mat-dialog-title\">\r\n    <h3>{{ data.title }}</h3>\r\n</div>\r\n<div mat-dialog-content class=\"mat-dialog-content\">\r\n    {{ data.message }}\r\n</div>\r\n<div mat-dialog-actions class=\"custom-dialog-actions\">\r\n    <button\r\n        mat-flat-button\r\n        class=\"test_secondary_button\"\r\n         color=\"accent\"\r\n        (click)=\"onClickAction(ButtonResponseType.secondary)\"\r\n    >\r\n        {{ buttons.secondary }}\r\n    </button>\r\n    <button\r\n        mat-flat-button\r\n        class=\"test_primary_button\"\r\n        color=\"primary\"\r\n        (click)=\"onClickAction(ButtonResponseType.primary)\"\r\n    >\r\n        {{ buttons.primary }}\r\n    </button>\r\n</div>\r\n",
                     styles: [""]
                 },] }
     ];
@@ -2349,7 +2355,7 @@
     ButtonWithConfirmDialogComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'kms-button-with-confirm-dialog',
-                    template: "<button\n    type=\"button\"\n    (click)=\"start()\"\n    mat-stroked-button\n    [disabled]=\"disabled\"\n>\n    {{ buttonText }}\n</button>\n",
+                    template: "<button\r\n    type=\"button\"\r\n    (click)=\"start()\"\r\n    mat-stroked-button\r\n    [disabled]=\"disabled\"\r\n>\r\n    {{ buttonText }}\r\n</button>\r\n",
                     styles: [""]
                 },] }
     ];
@@ -2482,7 +2488,7 @@
     DropdownFromDataComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'kms-dropdown-from-data',
-                    template: "<form [formGroup]=\"form\">\n    <mat-form-field [attr.required]=\"required\" [floatLabel]=\"placeholder ? 'always' : 'auto'\">\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        >\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\">\r\n    <mat-form-field [attr.required]=\"required\" [floatLabel]=\"placeholder ? 'always' : 'auto'\">\r\n        <mat-label>{{ label }}</mat-label>\r\n        <mat-select\r\n            placeholder=\"{{ placeholder }}\"\r\n            disableOptionCentering\r\n            [(value)]=\"value\"\r\n            (selectionChange)=\"valueChanged($event?.value)\"\r\n            #child\r\n            [disabled]=\"disabled\"\r\n        >\r\n            <mat-option *ngFor=\"let key of keys; let i = index\" [value]=\"values[i]\">\r\n                <span>{{ setDisplayKey(key) }}</span>\r\n            </mat-option>\r\n        </mat-select>\r\n    </mat-form-field>\r\n</form>\r\n",
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,