Fixes to samples and some improvements (#843)

skrustev · web-flow · commit 234c41225b89 · 2024-10-21T11:06:05.000+03:00
diff --git a/samples/grids/grid/clipboard-operations/src/index.ts b/samples/grids/grid/clipboard-operations/src/index.ts
@@ -10,6 +10,7 @@ defineAllComponents();
 import "./index.css";
 
 export class Sample {
+    private defaultSeparator: string;
     private grid: IgcGridComponent
     private _bind: () => void;
 
@@ -44,7 +45,10 @@ export class Sample {
 
             var input = document.getElementById("input") as IgcInputComponent;
             input.addEventListener("igcChange", (ev: CustomEvent) => {
-                grid.clipboardOptions.separator = ev.detail;
+                if (!this.defaultSeparator) {
+                    this.defaultSeparator = grid.clipboardOptions.separator;
+                }
+                grid.clipboardOptions.separator = ev.detail || this.defaultSeparator;
             });
         }
         this._bind();
@@ -65,7 +69,6 @@ export class Sample {
         column.formatter = (e: any) => { return "** " + e + " **" };
         column.header = "🎉" + column.field;
     }
-
 }
 
 new Sample();
diff --git a/samples/grids/list/overview/index.html b/samples/grids/list/overview/index.html
@@ -13,8 +13,8 @@
       <div class="container sample center">
         <igc-radio-group id="radio-group" alignment="horizontal" style="margin-bottom: 10px;">
           <igc-radio name="size" value="small" label-position="after">Small</igc-radio>
-          <igc-radio name="size" value="medium" label-position="after">Medium</igc-radio>
-          <igc-radio name="size" value="large" label-position="after" checked>Large</igc-radio>
+          <igc-radio name="size" value="medium" label-position="after" checked >Medium</igc-radio>
+          <igc-radio name="size" value="large" label-position="after">Large</igc-radio>
         </igc-radio-group>
 
         <igc-list id="list">
diff --git a/samples/grids/tree-grid/clipboard-operations/src/index.ts b/samples/grids/tree-grid/clipboard-operations/src/index.ts
@@ -17,6 +17,7 @@ export class Sample {
     private clipboardHeadersEditor: IgcPropertyEditorPropertyDescriptionComponent
     private clipboardFormattersEditor: IgcPropertyEditorPropertyDescriptionComponent
     private treeGrid: IgcTreeGridComponent
+    private defaultSeparator: string;
 
     constructor() {
         var clipboardEnabledEditor = this.clipboardEnabledEditor = document.getElementById('ClipboardEnabledEditor') as IgcPropertyEditorPropertyDescriptionComponent;
@@ -51,7 +52,10 @@ export class Sample {
 
         var input = document.getElementById("input") as IgcInputComponent;
         input.addEventListener("igcChange", (ev: CustomEvent) => {
-            grid.clipboardOptions.separator = ev.detail;
+            if (!this.defaultSeparator) {
+                this.defaultSeparator = grid.clipboardOptions.separator;
+            }
+            grid.clipboardOptions.separator = ev.detail || this.defaultSeparator;
         });
     }
 
diff --git a/samples/layouts/avatar/size/index.html b/samples/layouts/avatar/size/index.html
@@ -15,9 +15,9 @@
 <body>
   <div id="root">
     <div class="container sample center">
-      <igc-avatar initials="AZ">
-        <igc-icon name="home" collection="material"></igc-icon>
-      </igc-avatar>
+      <igc-avatar class="size-large" initials="L"></igc-avatar>
+      <igc-avatar class="size-medium" initials="M"></igc-avatar>
+      <igc-avatar class="size-small" initials="S"></igc-avatar>
     </div>
   </div>
 
diff --git a/samples/layouts/avatar/size/src/AvatarSize.css b/samples/layouts/avatar/size/src/AvatarSize.css
@@ -1,3 +1,16 @@
-igc-avatar {
+.size-small {
+    --ig-size: var(--ig-size-small);
+}
+
+.size-medium {
+    --ig-size: var(--ig-size-medium);
+}
+
+.size-large {
     --ig-size: var(--ig-size-large);
+}
+
+.sample {
+    flex-direction: row;
+    gap: 10px;
 }
