chore(demos): let input-group-showcase inherit size from global setting

Author: simeonoff

src/app/input-group-showcase/input-group-showcase.sample.html

@@ -13,9 +13,7 @@ <h1 class="showcase__title">Angular</h1>
         <!-- Angular Input Group -->
         <igx-input-group
             #field
-            [type]="getInputGroupType()"
-            [style.--ig-size]="getSize()">
-
+            [type]="getInputGroupType()">
             @if (getLabel()) {
                 <label igxLabel>{{ getLabel() }}</label>
             }
@@ -46,8 +44,7 @@ <h1 class="showcase__title">Angular</h1>
         <!-- Angular Textarea Group -->
         <igx-input-group
             #fieldTextarea
-            [type]="getInputGroupType()"
-            [style.--ig-size]="getSize()">
+            [type]="getInputGroupType()">
             @if (getLabel()) {
                 <label igxLabel>{{ getLabel() }}</label>
             }
@@ -77,8 +74,7 @@ <h1 class="showcase__title">Angular</h1>
             #selectReactive
             formControlName="angularSelect"
             [placeholder]="getPlaceholder()"
-            [type]="getInputGroupType()"
-            [style.--ig-size]="getSize()">
+            [type]="getInputGroupType()">
             @if (getLabel()) {
                 <label igxLabel>{{ getLabel() }}</label>
             }
@@ -105,9 +101,7 @@ <h1 class="showcase__title">Angular</h1>
             #comboReactive
             formControlName="angularCombo"
             [placeholder]="getPlaceholder()"
-            [type]="getInputGroupType()"
-            [style.--ig-size]="getSize()">
-
+            [type]="getInputGroupType()">
             @if (getLabel()) {
                 <label igxLabel>{{ getLabel() }}</label>
             }
@@ -132,9 +126,7 @@ <h1 class="showcase__title">Angular</h1>
         <!-- Angular File Input -->
         <igx-input-group
             #fieldFile
-            [type]="getInputGroupType()"
-            [style.--ig-size]="getSize()">
-
+            [type]="getInputGroupType()">
             @if (getLabel()) {
                 <label igxLabel for="file-in">{{ getLabel() }}</label>
             }
@@ -196,7 +188,6 @@ <h1 class="showcase__title">Web components</h1>
     <div class="showcase__fields">
         <!-- Web Component Input -->
         <igc-input
-                [style.--ig-size]="getSize()"
                 [label]="getLabel()"
                 [required]="isRequired()"
                 [attr.placeholder]="getPlaceholder()"
@@ -219,7 +210,6 @@ <h1 class="showcase__title">Web components</h1>
         </igc-input>
 
         <igc-textarea
-                [style.--ig-size]="getSize()"
                 [label]="getLabel()"
                 [required]="isRequired()"
                 [disabled]="isDisabled()"
@@ -246,9 +236,7 @@ <h1 class="showcase__title">Web components</h1>
             [attr.placeholder]="getPlaceholder()"
             [label]="getLabel()"
             [disabled]="isDisabled()"
-            [outlined]="isOutlined()"
-            [style.--ig-size]="getSize()">
-
+            [outlined]="isOutlined()">
             @if (hidePrefix()) {
                 <igc-icon slot="prefix" name="face"></igc-icon>
             }
@@ -267,16 +255,14 @@ <h1 class="showcase__title">Web components</h1>
                 [label]="getLabel()"
                 [attr.placeholder]="getPlaceholder()"
                 [outlined]="isOutlined()"
-                [disabled]="isDisabled()"
-                [style.--ig-size]="getSize()">
+                [disabled]="isDisabled()">
             @if (getHint()) {
                 <span slot="helper-text">{{getHint()}}</span>
             }
         </igc-combo>
 
 
         <igc-file-input
-            [style.--ig-size]="getSize()"
             [label]="getLabel()"
             [required]="isRequired()"
             [disabled]="isDisabled()"

src/app/input-group-showcase/input-group-showcase.sample.ts

@@ -234,7 +234,6 @@ export class InputGroupShowcaseSampleComponent {
     }
 
     public getValue = computed(() => this.properties()?.value || '');
-    public getSize = computed(() => `var(--ig-size-${this.properties()?.size || 'medium'})`);
     public getPlaceholder = computed(() => this.properties()?.placeholder || null);
     public getLabel = computed(() => this.properties()?.label || '');