@festo-ui/angular 5.0.0-dev.80 → 5.0.0-dev.86

package/fesm2020/festo-ui-angular.mjs

@@ -4982,45 +4982,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
                 type: Output
             }] } });
 
-class FngValueAccessorBaseDirective {
-    constructor() {
-        this.disabled = false;
-        this.changed = new Array();
-        this.touched = new Array();
-    }
-    get value() {
-        return this.innerValue;
-    }
-    set value(value) {
-        if (value && this.innerValue !== value) {
-            this.innerValue = value;
-            this.changed.forEach(f => f(value));
-        }
-    }
-    touch() {
-        this.touched.forEach(f => f());
-    }
-    writeValue(value) {
-        this.innerValue = value;
-    }
-    registerOnChange(fn) {
-        this.changed.push(fn);
-    }
-    registerOnTouched(fn) {
-        this.touched.push(fn);
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-}
-FngValueAccessorBaseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: FngValueAccessorBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-FngValueAccessorBaseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.1", type: FngValueAccessorBaseDirective, inputs: { disabled: "disabled" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: FngValueAccessorBaseDirective, decorators: [{
-            type: Directive
-        }], propDecorators: { disabled: [{
-                type: Input
-            }] } });
-
 class FngSegmentControlComponent {
     constructor() {
         this.viewMode = 'text';
@@ -5046,16 +5007,21 @@ class FngSegmentControlComponent {
     ngAfterViewInit() {
         this.view = this.tpl?.createEmbeddedView(null);
     }
-    onChange(event) {
+    onInputChange(event) {
+        event.stopPropagation();
+        this.checked = true;
         const target = event.target;
         this.change.emit(target.value);
     }
+    onInputClick(event) {
+        event.stopPropagation();
+    }
 }
 FngSegmentControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: FngSegmentControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FngSegmentControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: FngSegmentControlComponent, isStandalone: true, selector: "fng-segment-control", inputs: { name: "name", value: "value", label: "label", icon: "icon", iconOnly: "iconOnly", checked: "checked", disabled: "disabled" }, outputs: { change: "change" }, viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #tpl>\n  <input\n    (change)=\"onChange($event)\"\n    class=\"fwe-segment-input\"\n    type=\"radio\"\n    [id]=\"id\"\n    [name]=\"name\"\n    [value]=\"value\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n  />\n  <label class=\"fwe-segment-label\" [for]=\"id\">\n    <ng-container [ngSwitch]=\"viewMode\">\n      <ng-container *ngSwitchCase=\"'icon'\">\n        <span class=\"fwe-sr-only\">{{ label }}</span>\n        <i aria-hidden=\"true\" class=\"fwe-icon\" [ngClass]=\"icon\"></i>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'text'\">\n        {{ label }}\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'icon-text'\"> <i aria-hidden=\"true\" class=\"fwe-icon\" [ngClass]=\"icon\"></i>{{ label }} </ng-container>\n    </ng-container>\n  </label>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+FngSegmentControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: FngSegmentControlComponent, isStandalone: true, selector: "fng-segment-control", inputs: { name: "name", value: "value", label: "label", icon: "icon", iconOnly: "iconOnly", checked: "checked", disabled: "disabled" }, outputs: { change: "change" }, viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #tpl>\n  <input\n    (change)=\"onInputChange($event)\"\n    (click)=\"onInputClick($event)\"\n    class=\"fwe-segment-input\"\n    type=\"radio\"\n    [id]=\"id\"\n    [name]=\"name\"\n    [value]=\"value\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n  />\n  <label class=\"fwe-segment-label\" [for]=\"id\">\n    <ng-container [ngSwitch]=\"viewMode\">\n      <ng-container *ngSwitchCase=\"'icon'\">\n        <span class=\"fwe-sr-only\">{{ label }}</span>\n        <i aria-hidden=\"true\" class=\"fwe-icon\" [ngClass]=\"icon\"></i>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'text'\">\n        {{ label }}\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'icon-text'\"> <i aria-hidden=\"true\" class=\"fwe-icon\" [ngClass]=\"icon\"></i>{{ label }} </ng-container>\n    </ng-container>\n  </label>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: FngSegmentControlComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule], selector: 'fng-segment-control', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-template #tpl>\n  <input\n    (change)=\"onChange($event)\"\n    class=\"fwe-segment-input\"\n    type=\"radio\"\n    [id]=\"id\"\n    [name]=\"name\"\n    [value]=\"value\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n  />\n  <label class=\"fwe-segment-label\" [for]=\"id\">\n    <ng-container [ngSwitch]=\"viewMode\">\n      <ng-container *ngSwitchCase=\"'icon'\">\n        <span class=\"fwe-sr-only\">{{ label }}</span>\n        <i aria-hidden=\"true\" class=\"fwe-icon\" [ngClass]=\"icon\"></i>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'text'\">\n        {{ label }}\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'icon-text'\"> <i aria-hidden=\"true\" class=\"fwe-icon\" [ngClass]=\"icon\"></i>{{ label }} </ng-container>\n    </ng-container>\n  </label>\n</ng-template>\n" }]
+            args: [{ standalone: true, imports: [CommonModule], selector: 'fng-segment-control', encapsulation: ViewEncapsulation.None, template: "<ng-template #tpl>\n  <input\n    (change)=\"onInputChange($event)\"\n    (click)=\"onInputClick($event)\"\n    class=\"fwe-segment-input\"\n    type=\"radio\"\n    [id]=\"id\"\n    [name]=\"name\"\n    [value]=\"value\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n  />\n  <label class=\"fwe-segment-label\" [for]=\"id\">\n    <ng-container [ngSwitch]=\"viewMode\">\n      <ng-container *ngSwitchCase=\"'icon'\">\n        <span class=\"fwe-sr-only\">{{ label }}</span>\n        <i aria-hidden=\"true\" class=\"fwe-icon\" [ngClass]=\"icon\"></i>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'text'\">\n        {{ label }}\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'icon-text'\"> <i aria-hidden=\"true\" class=\"fwe-icon\" [ngClass]=\"icon\"></i>{{ label }} </ng-container>\n    </ng-container>\n  </label>\n</ng-template>\n" }]
         }], propDecorators: { name: [{
                 type: Input
             }], value: [{
@@ -5077,7 +5043,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
                 args: ['tpl']
             }] } });
 
-class FngSegmentComponent extends FngValueAccessorBaseDirective {
+class FngSegmentComponent {
+    writeValue(value) {
+        this.innerValue = value;
+        this.updateCheckState();
+    }
+    updateCheckState() {
+        if (this.controls) {
+            this.controls.forEach(component => {
+                component.checked = component.value === this.value;
+            });
+        }
+    }
+    registerOnChange(fn) {
+        this.changed.push(fn);
+    }
+    registerOnTouched(fn) {
+        this.touched.push(fn);
+    }
     set value(value) {
         if (this.innerValue !== value) {
             this.innerValue = value;
@@ -5088,9 +5071,13 @@ class FngSegmentComponent extends FngValueAccessorBaseDirective {
             });
         }
     }
+    get value() {
+        return this.innerValue;
+    }
     constructor(cd) {
-        super();
         this.cd = cd;
+        this.changed = new Array();
+        this.touched = new Array();
         this.complete = new Subject();
         this.defaultConfig = {
             outline: true,
@@ -5102,6 +5089,7 @@ class FngSegmentComponent extends FngValueAccessorBaseDirective {
         this.config = this.defaultConfig;
         this.fngChange = new EventEmitter();
         this.change = new EventEmitter();
+        this.id = (Math.random() * Date.now()).toString().replace('.', '-');
     }
     ngOnChanges(changes) {
         if (changes['config']?.currentValue) {
@@ -5113,6 +5101,7 @@ class FngSegmentComponent extends FngValueAccessorBaseDirective {
             this.controls.forEach(component => {
                 component.change.pipe(takeUntil(this.complete)).subscribe(val => {
                     this.value = val;
+                    this.updateCheckState();
                 });
                 if (component.icon != null && this.config.iconOnly === true) {
                     this.useIcon = true;
@@ -5141,6 +5130,9 @@ class FngSegmentComponent extends FngValueAccessorBaseDirective {
         if (this.controls) {
             this.controls.forEach(component => {
                 if (component.view) {
+                    if (!component.name) {
+                        component.name = this.id;
+                    }
                     this.vc?.insert(component.view);
                 }
             });
@@ -5154,10 +5146,10 @@ FngSegmentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
             useExisting: forwardRef(() => FngSegmentComponent),
             multi: true
         }
-    ], queries: [{ propertyName: "controls", predicate: FngSegmentControlComponent, descendants: true }], viewQueries: [{ propertyName: "vc", first: true, predicate: ["vc"], descendants: true, read: ViewContainerRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<fieldset\n  class=\"fwe-segment\"\n  [ngClass]=\"{\n    'fwe-segment-outline': config.outline,\n    'fwe-segment-icon': useIcon,\n    'fwe-segment-icon-text': useIconAndText\n  }\"\n>\n  <legend class=\"fwe-sr-only fwe-d-inline-block\">{{ legend }}</legend>\n  <div class=\"fwe-segment-group\">\n    <ng-container #vc></ng-container>\n  </div>\n</fieldset>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "controls", predicate: FngSegmentControlComponent, descendants: true }], viewQueries: [{ propertyName: "vc", first: true, predicate: ["vc"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<fieldset\n  class=\"fwe-segment\"\n  [ngClass]=\"{\n    'fwe-segment-outline': config.outline,\n    'fwe-segment-icon': useIcon,\n    'fwe-segment-icon-text': useIconAndText\n  }\"\n>\n  <legend class=\"fwe-sr-only fwe-d-inline-block\">{{ legend }}</legend>\n  <div class=\"fwe-segment-group\">\n    <ng-container #vc></ng-container>\n  </div>\n</fieldset>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: FngSegmentComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule], selector: 'fng-segment', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+            args: [{ standalone: true, imports: [CommonModule], selector: 'fng-segment', encapsulation: ViewEncapsulation.None, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => FngSegmentComponent),
@@ -5895,6 +5887,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
                 args: ['inputElement']
             }] } });
 
+class FngValueAccessorBaseDirective {
+    constructor() {
+        this.disabled = false;
+        this.changed = new Array();
+        this.touched = new Array();
+    }
+    get value() {
+        return this.innerValue;
+    }
+    set value(value) {
+        if (value && this.innerValue !== value) {
+            this.innerValue = value;
+            this.changed.forEach(f => f(value));
+        }
+    }
+    touch() {
+        this.touched.forEach(f => f());
+    }
+    writeValue(value) {
+        this.innerValue = value;
+    }
+    registerOnChange(fn) {
+        this.changed.push(fn);
+    }
+    registerOnTouched(fn) {
+        this.touched.push(fn);
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+}
+FngValueAccessorBaseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: FngValueAccessorBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+FngValueAccessorBaseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.1", type: FngValueAccessorBaseDirective, inputs: { disabled: "disabled" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: FngValueAccessorBaseDirective, decorators: [{
+            type: Directive
+        }], propDecorators: { disabled: [{
+                type: Input
+            }] } });
+
 class FngTextEditorComponent extends FngValueAccessorBaseDirective {
     set value(value) {
         if (this.innerValue !== value) {