@kms-ngx-ui/presentational 20.0.2 → 20.0.4

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

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-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';
+import { Component, Pipe, NgModule, EventEmitter, Output, Input, Directive, HostListener, PLATFORM_ID, DOCUMENT, Inject, Injectable, input, VERSION, forwardRef, inject, Injector, ViewChild, effect, HostBinding, output, computed, model, signal, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, CurrencyPipe, isPlatformBrowser } from '@angular/common';
 import * as i2 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, UntypedFormGroup, UntypedFormControl, NG_VALIDATORS, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, NgControl, UntypedFormGroup, UntypedFormControl, NG_VALIDATORS, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1$2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i1$6 from '@angular/material/radio';
@@ -1329,12 +1329,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             }] } });
 
 class FormControlParentComponent extends FormParentComponent {
+    get ngControl() {
+        if (this._ngControl === undefined) {
+            this._ngControl = this.injector.get(NgControl, null);
+        }
+        return this._ngControl;
+    }
     constructor(renderer) {
         super();
         this.renderer = renderer;
         this.defaultDataOverride = ''; // when we have NO form around, get default via input to set it manually
         this.onSelectItemEmitter = new EventEmitter();
         this.internalValue = '';
+        this.injector = inject(Injector);
+        this._ngControl = undefined;
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onChange = () => { };
         // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -1345,6 +1353,11 @@ class FormControlParentComponent extends FormParentComponent {
     ngOnInit() {
         super.ngOnInit();
     }
+    ngDoCheck() {
+        if (this.ngControl?.control?.touched) {
+            this.form?.markAllAsTouched();
+        }
+    }
     change(value) {
         this.onChange(value);
         this.onTouched();
@@ -1983,20 +1996,21 @@ class TooltipIconComponent {
         this.delay = input(1000, ...(ngDevMode ? [{ debugName: "delay" }] : []));
         this.iconSize = input(IconSizePx.XS, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
         this.tooltipAlwaysVisible = input(false, ...(ngDevMode ? [{ debugName: "tooltipAlwaysVisible" }] : []));
+        this.icon = input('ic_info', ...(ngDevMode ? [{ debugName: "icon" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TooltipIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: TooltipIconComponent, isStandalone: false, selector: "kms-tooltip-icon", inputs: { tooltipText: { classPropertyName: "tooltipText", publicName: "tooltipText", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, tooltipAlwaysVisible: { classPropertyName: "tooltipAlwaysVisible", publicName: "tooltipAlwaysVisible", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true }, { propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true }], ngImport: i0, template: "<div #tooltipContent>\n  @if (tooltipText()) {\n    {{ tooltipText() }}\n  } @else {\n    <ng-content></ng-content>\n  }\n</div>\n\n<kms-icon\n  icon=\"ic_info\"\n  [size]=\"iconSize()\"\n  [kmsTooltip]=\"tooltipContent\"\n  [placement]=\"placement()\"\n  [delay]=\"delay()\"\n  [alwaysVisible]=\"tooltipAlwaysVisible()\"\n></kms-icon>\n", styles: [""], dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[kmsTooltip]", inputs: ["kmsTooltip", "placement", "delay", "alwaysVisible"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: TooltipIconComponent, isStandalone: false, selector: "kms-tooltip-icon", inputs: { tooltipText: { classPropertyName: "tooltipText", publicName: "tooltipText", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, tooltipAlwaysVisible: { classPropertyName: "tooltipAlwaysVisible", publicName: "tooltipAlwaysVisible", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true }, { propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true }], ngImport: i0, template: "<div #tooltipContent>\n  @if (tooltipText()) {\n  {{ tooltipText() }}\n  } @else {\n  <ng-content></ng-content>\n  }\n</div>\n\n<kms-icon\n  [icon]=\"icon()\"\n  [size]=\"iconSize()\"\n  [kmsTooltip]=\"tooltipContent\"\n  [placement]=\"placement()\"\n  [delay]=\"delay()\"\n  [alwaysVisible]=\"tooltipAlwaysVisible()\"\n></kms-icon>\n", styles: [""], dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[kmsTooltip]", inputs: ["kmsTooltip", "placement", "delay", "alwaysVisible"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TooltipIconComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'kms-tooltip-icon', template: "<div #tooltipContent>\n  @if (tooltipText()) {\n    {{ tooltipText() }}\n  } @else {\n    <ng-content></ng-content>\n  }\n</div>\n\n<kms-icon\n  icon=\"ic_info\"\n  [size]=\"iconSize()\"\n  [kmsTooltip]=\"tooltipContent\"\n  [placement]=\"placement()\"\n  [delay]=\"delay()\"\n  [alwaysVisible]=\"tooltipAlwaysVisible()\"\n></kms-icon>\n" }]
+            args: [{ standalone: false, selector: 'kms-tooltip-icon', template: "<div #tooltipContent>\n  @if (tooltipText()) {\n  {{ tooltipText() }}\n  } @else {\n  <ng-content></ng-content>\n  }\n</div>\n\n<kms-icon\n  [icon]=\"icon()\"\n  [size]=\"iconSize()\"\n  [kmsTooltip]=\"tooltipContent\"\n  [placement]=\"placement()\"\n  [delay]=\"delay()\"\n  [alwaysVisible]=\"tooltipAlwaysVisible()\"\n></kms-icon>\n" }]
         }], propDecorators: { button: [{
                 type: ViewChild,
                 args: ['button']
             }], tooltip: [{
                 type: ViewChild,
                 args: ['tooltip']
-            }], tooltipText: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipText", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], tooltipAlwaysVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipAlwaysVisible", required: false }] }] } });
+            }], tooltipText: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipText", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], tooltipAlwaysVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipAlwaysVisible", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
 
 class ColorInputComponent extends FormControlParentComponent {
     constructor(renderer) {
@@ -2045,7 +2059,7 @@ class ColorInputComponent extends FormControlParentComponent {
                 useExisting: forwardRef(() => ColorInputComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "\n@if (formInitialized) {\n  <form [formGroup]=\"form\">\n    <div>\n      <mat-form-field class=\"colorInput\">\n        @if (tooltipText) {\n          <kms-tooltip-icon [tooltipText]=\"tooltipText\"></kms-tooltip-icon>\n        }\n        <mat-label>{{ label }}</mat-label>\n        <input type=\"text\" [(ngModel)]=\"value\" matInput formControlName=\"color\" [placeholder]=\"placeholder\" [ngClass]=\"{'my-inValid': !matchesHex(value)}\" />\n        <input type=\"color\" [value]=\"value && matchesHex(value) ? value : '#ffffff'\" (change)=\"updateSelectedColor($event)\" [ngClass]=\"{'my-inValid': !matchesHex(value)}\" />\n      </mat-form-field>\n    </div>\n  </form>\n}", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[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: 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: i2$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: TooltipIconComponent, selector: "kms-tooltip-icon", inputs: ["tooltipText", "placement", "delay", "iconSize", "tooltipAlwaysVisible"] }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "\n@if (formInitialized) {\n  <form [formGroup]=\"form\">\n    <div>\n      <mat-form-field class=\"colorInput\">\n        @if (tooltipText) {\n          <kms-tooltip-icon [tooltipText]=\"tooltipText\"></kms-tooltip-icon>\n        }\n        <mat-label>{{ label }}</mat-label>\n        <input type=\"text\" [(ngModel)]=\"value\" matInput formControlName=\"color\" [placeholder]=\"placeholder\" [ngClass]=\"{'my-inValid': !matchesHex(value)}\" />\n        <input type=\"color\" [value]=\"value && matchesHex(value) ? value : '#ffffff'\" (change)=\"updateSelectedColor($event)\" [ngClass]=\"{'my-inValid': !matchesHex(value)}\" />\n      </mat-form-field>\n    </div>\n  </form>\n}", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[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: 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: i2$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: TooltipIconComponent, selector: "kms-tooltip-icon", inputs: ["tooltipText", "placement", "delay", "iconSize", "tooltipAlwaysVisible", "icon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ColorInputComponent, decorators: [{
             type: Component,
@@ -2866,7 +2880,7 @@ class RadioGroupComponent {
                 useExisting: forwardRef(() => RadioGroupComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "@if (options && options.length > 0) {\n<mat-radio-group\n  class=\"radiogroup\"\n  [value]=\"value\"\n  (change)=\"handleChange($event.value)\"\n  [disabled]=\"disabled\"\n  [ngStyle]=\"{ 'flex-direction': direction }\"\n>\n  @if (infoText) {\n  <kms-tooltip-icon\n    [class.margin-left]=\"direction == 'column'\"\n    [tooltipText]=\"infoText\"\n  ></kms-tooltip-icon>\n  } @for (option of options; track $index) {\n  <div class=\"radiobutton-container\">\n    <kms-radiobutton\n      [label]=\"option.Text\"\n      [value]=\"option.Value\"\n      [checked]=\"value === option.Value\"\n      [disabled]=\"disabled || option.Disabled\"\n      [size]=\"size\"\n      [color]=\"color\"\n    ></kms-radiobutton>\n    @if (option.InfoText) {\n    <kms-tooltip-icon [tooltipText]=\"option.InfoText\"></kms-tooltip-icon>\n    }\n  </div>\n  }\n</mat-radio-group>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$6.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: RadioButtonComponent, selector: "kms-radiobutton", inputs: ["label", "checked", "disabled", "value", "size", "color"], outputs: ["onChange"] }, { kind: "component", type: TooltipIconComponent, selector: "kms-tooltip-icon", inputs: ["tooltipText", "placement", "delay", "iconSize", "tooltipAlwaysVisible"] }] }); }
+        ], ngImport: i0, template: "@if (options && options.length > 0) {\n<mat-radio-group\n  class=\"radiogroup\"\n  [value]=\"value\"\n  (change)=\"handleChange($event.value)\"\n  [disabled]=\"disabled\"\n  [ngStyle]=\"{ 'flex-direction': direction }\"\n>\n  @if (infoText) {\n  <kms-tooltip-icon\n    [class.margin-left]=\"direction == 'column'\"\n    [tooltipText]=\"infoText\"\n  ></kms-tooltip-icon>\n  } @for (option of options; track $index) {\n  <div class=\"radiobutton-container\">\n    <kms-radiobutton\n      [label]=\"option.Text\"\n      [value]=\"option.Value\"\n      [checked]=\"value === option.Value\"\n      [disabled]=\"disabled || option.Disabled\"\n      [size]=\"size\"\n      [color]=\"color\"\n    ></kms-radiobutton>\n    @if (option.InfoText) {\n    <kms-tooltip-icon [tooltipText]=\"option.InfoText\"></kms-tooltip-icon>\n    }\n  </div>\n  }\n</mat-radio-group>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$6.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: RadioButtonComponent, selector: "kms-radiobutton", inputs: ["label", "checked", "disabled", "value", "size", "color"], outputs: ["onChange"] }, { kind: "component", type: TooltipIconComponent, selector: "kms-tooltip-icon", inputs: ["tooltipText", "placement", "delay", "iconSize", "tooltipAlwaysVisible", "icon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: RadioGroupComponent, decorators: [{
             type: Component,