Merge branch 'gedinakova/pdf-custom-font-live-editing' of https://github.com/IgniteUI/igniteui-angular-samples into gedinakova/pdf-custom-font-live-editing

Author: gedinakova

package-lock.json

@@ -73,11 +73,11 @@
     "file-saver": "^2.0.2",
     "fuse.js": "^7.1.0",
     "hammerjs": "^2.0.8",
-    "igniteui-angular": "^21.1.0-rc.1",
+    "igniteui-angular": "^21.1.0-rc.2",
     "igniteui-angular-charts": "^20.2.0",
     "igniteui-angular-core": "^20.2.0",
     "igniteui-angular-extras": "^21.0.0",
-    "igniteui-angular-i18n": "^21.1.0-rc.1",
+    "igniteui-angular-i18n": "^21.1.0-rc.2",
     "igniteui-dockmanager": "^1.17.0",
     "igniteui-grid-lite": "^0.5.0",
     "igniteui-i18n-resources": "^1.0.2",
@@ -113,8 +113,8 @@
       "@angular/compiler": "^21.0.0"
     },
     "igniteui-angular-extras": {
-      "igniteui-angular": "^21.1.0-rc.1",
-      "@infragistics/igniteui-angular": "^21.1.0-rc.1",
+      "igniteui-angular": "^21.1.0-rc.2",
+      "@infragistics/igniteui-angular": "^21.1.0-rc.2",
       "@angular/core": "^21.0.0",
       "@angular/common": "^21.0.0",
       "@angular/animations": "^21.0.0"

package.json

@@ -1,17 +1,68 @@
 <div class="grid-lite-wrapper">
-  <section class="panel">
-    <igc-button variant="outlined">Column properties</igc-button>
-    <igc-switch 
-      label-position="before"
-      [checked]="hasFormatters"
-      (igcChange)="toggleFormatters($event.detail.checked)">
-      Value formatters:
-    </igc-switch>
-  </section>
-  
-  <igc-grid-lite 
-    #gridLite
-    [columns]="columns" 
-    [data]="data">
-  </igc-grid-lite>
-</div>
+    <section class="panel">
+      <button igxButton="outlined" [igxToggleAction]="dropdown" [igxDropDownItemNavigation]="dropdown">
+        Column Properties
+      </button>
+      <igx-drop-down #dropdown [isOverlay]="true" [autoClose]="false" [closed]="false">
+        @for (column of columns; track column) {
+            <igx-drop-down-item>
+            <div class="config">
+                <span class="config-key">{{ column.header }}</span>
+                <igx-checkbox
+                #hiddenChk
+                [checked]="column.hidden"
+                (click)="$event.stopPropagation()"
+                (change)="toggleColumnProperty(column, 'hidden', hiddenChk.checked)">
+                Hidden
+                </igx-checkbox>
+                <igx-checkbox
+                #resizableChk
+                [checked]="column.resizable"
+                (click)="$event.stopPropagation()"
+                (change)="toggleColumnProperty(column, 'resizable', resizableChk.checked)">
+                Resizable
+                </igx-checkbox>
+                <igx-checkbox
+                #filterChk
+                [checked]="column.filterable"
+                (click)="$event.stopPropagation()"
+                (change)="toggleColumnProperty(column, 'filterable', filterChk.checked)">
+                Filter
+                </igx-checkbox>
+                <igx-checkbox
+                #sortableChk
+                [checked]="column.sortable"
+                (click)="$event.stopPropagation()"
+                (change)="toggleColumnProperty(column, 'sortable', sortableChk.checked)">
+                Sort
+                </igx-checkbox>
+            </div>
+            </igx-drop-down-item>
+        }
+      </igx-drop-down>
+
+      <igx-switch
+        labelPosition="before"
+        [checked]="hasFormatters"
+        (igxChange)="toggleFormatters($event)">
+        Value formatters:
+      </igx-switch>
+    </section>
+
+    <igc-grid-lite [data]="data">
+        @for (col of columns; track col) {
+            <igc-grid-lite-column
+                [field]="col.field"
+                [header]="col.header"
+                [dataType]="col.dataType"
+                [hidden]="col.hidden"
+                [resizable]="col.resizable"
+                [sortable]="col.sortable"
+                [filterable]="col.filterable"
+                [cellTemplate]="col.field === 'price' || col.field === 'total'
+                ? (hasFormatters ? formatCurrency : undefined)
+                : (col.field === 'rating' ? ratingTemplate : undefined)">
+            </igc-grid-lite-column>
+        }
+    </igc-grid-lite>
+  </div>

src/app/grid-lite/grid-lite-column-config-dynamic/grid-lite-column-config-dynamic.component.html

@@ -1,21 +1,34 @@
-:host {
-  contain: content;
-  --ig-size: 2;
+.panel {
+    margin: 1rem 0;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    align-items: center;
 }
 
-.grid-lite-wrapper {
-  width: 100%;
-  height: calc(100% - 50px);
+.config {
+    display: grid;
+    grid-template-columns: 180px repeat(4, max-content);
+    column-gap: 1rem;
+    align-items: center;
+    width: 100%;
 }
 
-.panel {
-  margin: 1rem 0;
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: space-between;
-  align-items: center;
+.config-key {
+    font-weight: bold;
+    white-space: nowrap;
+}
+
+.config igx-checkbox {
+    white-space: nowrap;
+}
+
+.grid-lite-wrapper {
+    width: 100%;
+    height: 100%;
 }
 
 igc-grid-lite {
-  min-height: 65vh;
+    min-height: 65vh;
+    --ig-size: 2;
 }