fix: (platform) input group states (#3333)

* fix disabled state * add tooltip for icon * add aria attribute to icon [wip] * minor
SAP · Sep 21, 2020 · a29828c · a29828c
1 parent b91c937
commit a29828c
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 4 deletions.
diff --git a/...nput-group/platform-input-group-examples/platform-input-group-form-example.component.html b/...nput-group/platform-input-group-examples/platform-input-group-form-example.component.html
@@ -9,7 +9,6 @@
                 hint="This is tooltip to help"
                 zone="zLeft"
                 rank="1"
-                hintPlacement="left"
                 [required]="true"
             >
                 <fdp-input-group name="qty" [formControl]="ff.formControl">

diff --git a/...-group/platform-input-group-examples/platform-input-group-standard-example.component.html b/...-group/platform-input-group-examples/platform-input-group-standard-example.component.html
@@ -30,7 +30,7 @@
 <p>Icon as an addon</p>
 <fdp-input-group name="employee" placeholder="Email">
     <fdp-input-group-addon>
-        <i class="sap-icon--email"></i>
+        <i class="sap-icon--email" title="Email" aria-hidden="true"></i>
     </fdp-input-group-addon>
     <fdp-input-group-input type="email"></fdp-input-group-input>
 </fdp-input-group>
diff --git a/libs/platform/src/lib/components/form/input-group/addon.component.ts b/libs/platform/src/lib/components/form/input-group/addon.component.ts
@@ -57,6 +57,15 @@ export class InputGroupAddonComponent implements AfterContentInit {
         return this._contentDensity;
     }
 
+    /** @hidden */
+    set disabled(disabled: boolean) {
+        this._disabled = disabled;
+        this._setButtonControlOptions();
+    }
+    get disabled(): boolean {
+        return this._disabled;
+    }
+
     /** @hidden */
     @ViewChild(TemplateRef)
     contentTemplateRef: TemplateRef<any>;
@@ -74,6 +83,9 @@ export class InputGroupAddonComponent implements AfterContentInit {
     /** @hidden */
     private _contentDensity: ContentDensity;
 
+    /** @hidden */
+    private _disabled = false;
+
     /** @hidden */
     constructor(private _renderer: Renderer2) {}
 
@@ -91,6 +103,8 @@ export class InputGroupAddonComponent implements AfterContentInit {
         }
 
         button.contentDensity = this._contentDensity;
+        button.disabled = this._disabled;
+
         button.markForCheck();
     }
 

diff --git a/libs/platform/src/lib/components/form/input-group/input-group.component.html b/libs/platform/src/lib/components/form/input-group/input-group.component.html
@@ -14,8 +14,9 @@
                    [placeholder]="placeholder"
                    [contentDensity]="contentDensity"
                    [type]="_input.type"
-                   [(ngModel)]="value"
-                   [ngModelOptions]="{ standalone: true }"
+                   [disabled]="disabled"
+                   [value]="value"
+                   (input)="_onChangeInputValue($event.target.value)"
                    (focusChange)="_onFocusChanged($event)"></fdp-input>
     </ng-container>
 

diff --git a/libs/platform/src/lib/components/form/input-group/input-group.component.ts b/libs/platform/src/lib/components/form/input-group/input-group.component.ts
@@ -133,6 +133,20 @@ export class InputGroupComponent extends BaseInput implements OnInit, AfterConte
         this._listenToChildrenQueryListChanges();
     }
 
+    /**
+     * @hidden
+     * override base functionality to catch new disabled state
+     */
+    setDisabledState(disabled: boolean): void {
+        super.setDisabledState(disabled);
+        this._setAddonsOptions();
+    }
+
+    /** @hidden */
+    _onChangeInputValue(value: string): void {
+        this.value = value;
+    }
+
     /** @hidden */
     private _listenToChildrenQueryListChanges(): void {
         this._children.changes.pipe(startWith(this._children)).subscribe(() => {
@@ -189,6 +203,7 @@ export class InputGroupComponent extends BaseInput implements OnInit, AfterConte
         const after = this._afterInputAddons || [];
         [...before, ...after].forEach((addon) => {
             addon.contentDensity = this._contentDensity;
+            addon.disabled = this.disabled;
         });
     }