fix(demos): fix comments and formatting

IgniteUI · Jan 17, 2025 · 30c0f60 · 30c0f60
1 parent 7bebfc7
commit 30c0f60
Show file tree

Hide file tree

Showing 29 changed files with 1,434 additions and 514 deletions.
diff --git a/projects/igniteui-angular/src/lib/directives/size/ig-size.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/size/ig-size.directive.spec.ts
@@ -1,8 +1,45 @@
+import { Component } from '@angular/core';
 import { IgSizeDirective } from './ig-size.directive';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
 
-describe('IgSizeDirective', () => {
-  it('should create an instance', () => {
-    const directive = new IgSizeDirective();
-    expect(directive).toBeTruthy();
+@Component({
+  template: `<div [igSize]="size">Test Element</div>`,
+  imports: [IgSizeDirective],
+})
+class TestComponent {
+  size: 'small' | 'medium' | 'large';
+}
+
+fdescribe('IgSizeDirective', () => {
+  let fixture: ComponentFixture<TestComponent>;
+  let testComponent: TestComponent;
+  let divElement: HTMLElement;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [TestComponent],
+    });
+
+    fixture = TestBed.createComponent(TestComponent);
+    testComponent = fixture.componentInstance;
+    divElement = fixture.nativeElement.querySelector('div');
+    fixture.detectChanges();
+  });
+
+  it('should apply the correct --ig-size inline style for each size', () => {
+    const sizeMap = {
+      small: 'var(--ig-size-small)',
+      medium: 'var(--ig-size-medium)',
+      large: 'var(--ig-size-large)',
+    };
+
+    // Loop through each size and verify the inline style
+    for (const size in sizeMap) {
+      testComponent.size = size as 'small' | 'medium' | 'large';
+      fixture.detectChanges();
+
+      // Check if the --ig-size style is applied correctly
+      expect(divElement.style.getPropertyValue('--ig-size')).toBe(sizeMap[size]);
+    }
   });
 });
diff --git a/projects/igniteui-angular/src/lib/directives/size/ig-size.directive.ts b/projects/igniteui-angular/src/lib/directives/size/ig-size.directive.ts
@@ -3,22 +3,12 @@ import { Directive, HostBinding, Input } from '@angular/core';
 @Directive({
     selector: '[igSize]',
 })
-
 export class IgSizeDirective {
-    private _size: string;
+    @Input('igSize')
+    size: 'small' | 'medium' | 'large' = 'medium';
 
     @HostBinding('style.--ig-size')
     public get styleValue(): string {
-        return this._size;
-    }
-
-    @Input('igSize')
-    public set igSize(value: 'small' | 'medium' | 'large' | string) {
-        if (value === 'small' || value === 'medium' || value === 'large') {
-            this._size = `var(--ig-size-${value})`;
-        } else {
-            console.warn(`Invalid size "${value}" provided. Expected 'small', 'medium', or 'large'.`);
-            this._size = null; // Clear the size if invalid
-        }
+      return `var(--ig-size-${this.size})`;
     }
 }
diff --git a/src/app/accordion/accordion.sample.ts b/src/app/accordion/accordion.sample.ts
@@ -1,8 +1,16 @@
 import { Component, DestroyRef, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { IGX_ACCORDION_DIRECTIVES } from 'igniteui-angular';
-import { IgcAccordionComponent, IgcExpansionPanelComponent, defineComponents } from 'igniteui-webcomponents';
-import { Properties, PropertyChangeService, PropertyPanelConfig } from '../properties-panel/property-change.service';
+import {
+    IgcAccordionComponent,
+    IgcExpansionPanelComponent,
+    defineComponents
+} from 'igniteui-webcomponents';
+import {
+    Properties,
+    PropertyChangeService,
+    PropertyPanelConfig
+} from '../properties-panel/property-change.service';
 
 defineComponents(IgcAccordionComponent, IgcExpansionPanelComponent);
 
@@ -26,13 +34,19 @@ export class AccordionSampleComponent {
 
     public properties: Properties;
 
-    constructor(private propertyChangeService: PropertyChangeService, private destroyRef: DestroyRef) {
+    constructor(
+        private propertyChangeService: PropertyChangeService,
+        private destroyRef: DestroyRef
+    ) {
         this.propertyChangeService.setPanelConfig(this.panelConfig);
 
-        const { unsubscribe } = this.propertyChangeService.propertyChanges.subscribe(properties => {
-            this.properties = properties;
-        });
+        const { unsubscribe } =
+            this.propertyChangeService.propertyChanges.subscribe(
+                (properties) => {
+                    this.properties = properties;
+                }
+            );
 
-         this.destroyRef.onDestroy(() => unsubscribe);
+        this.destroyRef.onDestroy(() => unsubscribe);
     }
 }
diff --git a/src/app/avatar/avatar.sample.ts b/src/app/avatar/avatar.sample.ts
@@ -1,10 +1,26 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA, DestroyRef } from '@angular/core';
-import { IgxAvatarComponent, IgxIconComponent, IgSizeDirective } from 'igniteui-angular';
+import {
+    IgxAvatarComponent,
+    IgxIconComponent,
+    IgSizeDirective,
+} from 'igniteui-angular';
 import { CommonModule } from '@angular/common';
-import { defineComponents, IgcAvatarComponent, IgcIconComponent, registerIconFromText } from 'igniteui-webcomponents';
-import { Properties, PropertyChangeService, PropertyPanelConfig } from '../properties-panel/property-change.service';
+import {
+    defineComponents,
+    IgcAvatarComponent,
+    IgcIconComponent,
+    registerIconFromText,
+} from 'igniteui-webcomponents';
+import {
+    Properties,
+    PropertyChangeService,
+    PropertyPanelConfig,
+} from '../properties-panel/property-change.service';
 
-registerIconFromText("mood", '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M620-520q25 0 42.5-17.5T680-580q0-25-17.5-42.5T620-640q-25 0-42.5 17.5T560-580q0 25 17.5 42.5T620-520Zm-280 0q25 0 42.5-17.5T400-580q0-25-17.5-42.5T340-640q-25 0-42.5 17.5T280-580q0 25 17.5 42.5T340-520Zm140 260q68 0 123.5-38.5T684-400H276q25 63 80.5 101.5T480-260Zm0 180q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-400Zm0 320q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Z"/></svg>')
+registerIconFromText(
+    'mood',
+    '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M620-520q25 0 42.5-17.5T680-580q0-25-17.5-42.5T620-640q-25 0-42.5 17.5T560-580q0 25 17.5 42.5T620-520Zm-280 0q25 0 42.5-17.5T400-580q0-25-17.5-42.5T340-640q-25 0-42.5 17.5T280-580q0 25 17.5 42.5T340-520Zm140 260q68 0 123.5-38.5T684-400H276q25 63 80.5 101.5T480-260Zm0 180q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-400Zm0 320q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Z"/></svg>'
+);
 defineComponents(IgcAvatarComponent, IgcIconComponent);
 
 @Component({
@@ -13,9 +29,13 @@ defineComponents(IgcAvatarComponent, IgcIconComponent);
     templateUrl: `avatar.sample.html`,
     schemas: [CUSTOM_ELEMENTS_SCHEMA],
     standalone: true,
-    imports: [CommonModule, IgxAvatarComponent, IgxIconComponent, IgSizeDirective]
+    imports: [
+        CommonModule,
+        IgxAvatarComponent,
+        IgxIconComponent,
+        IgSizeDirective,
+    ],
 })
-
 export class AvatarSampleComponent {
     public panelConfig: PropertyPanelConfig = {
         size: {
@@ -36,8 +56,9 @@ export class AvatarSampleComponent {
             label: 'The image source to use',
             control: {
                 type: 'text',
-                defaultValue: 'https://images.unsplash.com/photo-1514041790697-53f1f86214d2?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b7ac79503fbe78855a346c8d814f95ba&auto=format&fit=crop&w=1650&q=80'
-            }
+                defaultValue:
+                    'https://images.unsplash.com/photo-1514041790697-53f1f86214d2?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b7ac79503fbe78855a346c8d814f95ba&auto=format&fit=crop&w=1650&q=80'
+            },
         },
         initials: {
             control: {
@@ -49,13 +70,19 @@ export class AvatarSampleComponent {
 
     public properties: Properties;
 
-    constructor(private propertyChangeService: PropertyChangeService, private destroyRef: DestroyRef) {
+    constructor(
+        private propertyChangeService: PropertyChangeService,
+        private destroyRef: DestroyRef
+    ) {
         this.propertyChangeService.setPanelConfig(this.panelConfig);
 
-        const { unsubscribe } = this.propertyChangeService.propertyChanges.subscribe(properties => {
-            this.properties = properties;
-        });
+        const { unsubscribe } =
+            this.propertyChangeService.propertyChanges.subscribe(
+                (properties) => {
+                    this.properties = properties;
+                }
+            );
 
-         this.destroyRef.onDestroy(() => unsubscribe);
+        this.destroyRef.onDestroy(() => unsubscribe);
     }
 }
diff --git a/src/app/badge/badge.sample.ts b/src/app/badge/badge.sample.ts
@@ -1,15 +1,31 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA, DestroyRef } from '@angular/core';
-import { IgxBadgeComponent, IgxAvatarComponent, IgxIconComponent} from 'igniteui-angular';
-import { defineComponents, IgcBadgeComponent, IgcAvatarComponent, IgcIconComponent, registerIconFromText } from 'igniteui-webcomponents';
-import { Properties, PropertyChangeService, PropertyPanelConfig } from '../properties-panel/property-change.service';
+import {
+    IgxBadgeComponent,
+    IgxAvatarComponent,
+    IgxIconComponent,
+} from 'igniteui-angular';
+import {
+    defineComponents,
+    IgcBadgeComponent,
+    IgcAvatarComponent,
+    IgcIconComponent,
+    registerIconFromText,
+} from 'igniteui-webcomponents';
+import {
+    Properties,
+    PropertyChangeService,
+    PropertyPanelConfig,
+} from '../properties-panel/property-change.service';
 
 defineComponents(IgcBadgeComponent, IgcAvatarComponent, IgcIconComponent);
 
-const face = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#e8eaed"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 11.75c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zm6 0c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-.29.02-.58.05-.86 2.36-1.05 4.23-2.98 5.21-5.37C11.07 8.33 14.05 10 17.42 10c.78 0 1.53-.09 2.25-.26.21.71.33 1.47.33 2.26 0 4.41-3.59 8-8 8z"/></svg>'
-const bluetooth = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#e8eaed"><path d="M0 0h24v24H0z" fill="none"/><path d="M17.71 7.71L12 2h-1v7.59L6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 11 14.41V22h1l5.71-5.71-4.3-4.29 4.3-4.29zM13 5.83l1.88 1.88L13 9.59V5.83zm1.88 10.46L13 18.17v-3.76l1.88 1.88z"/></svg>'
+const face =
+    '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#e8eaed"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 11.75c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zm6 0c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-.29.02-.58.05-.86 2.36-1.05 4.23-2.98 5.21-5.37C11.07 8.33 14.05 10 17.42 10c.78 0 1.53-.09 2.25-.26.21.71.33 1.47.33 2.26 0 4.41-3.59 8-8 8z"/></svg>';
+const bluetooth =
+    '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#e8eaed"><path d="M0 0h24v24H0z" fill="none"/><path d="M17.71 7.71L12 2h-1v7.59L6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 11 14.41V22h1l5.71-5.71-4.3-4.29 4.3-4.29zM13 5.83l1.88 1.88L13 9.59V5.83zm1.88 10.46L13 18.17v-3.76l1.88 1.88z"/></svg>';
 
-registerIconFromText("face", face);
-registerIconFromText("bluetooth", bluetooth);
+registerIconFromText('face', face);
+registerIconFromText('bluetooth', bluetooth);
 
 @Component({
     selector: 'app-badge-sample',
@@ -45,27 +61,34 @@ export class BadgeSampleComponent {
 
     public properties: Properties;
 
-    constructor(private propertyChangeService: PropertyChangeService, private destroyRef: DestroyRef) {
+    constructor(
+        private propertyChangeService: PropertyChangeService,
+        private destroyRef: DestroyRef
+    ) {
         this.propertyChangeService.setPanelConfig(this.panelConfig);
 
-        const { unsubscribe } = this.propertyChangeService.propertyChanges.subscribe(properties => {
-            this.properties = properties;
-        });
+        const { unsubscribe } =
+            this.propertyChangeService.propertyChanges.subscribe(
+                (properties) => {
+                    this.properties = properties;
+                }
+            );
 
-         this.destroyRef.onDestroy(() => unsubscribe);
+        this.destroyRef.onDestroy(() => unsubscribe);
     }
 
-    private variantMap = new Map<string, string>([
-        ['default', 'primary'],
-        ['info', 'info'],
-        ['success', 'success'],
-        ['warning', 'warning'],
-        ['error', 'danger'],
-    ]);
+    private variantMap = new Map<string, string>(
+        Object.entries({
+            default: 'primary',
+            info: 'info',
+            success: 'success',
+            warning: 'warning',
+            error: 'danger',
+        })
+    );
 
     public get wcVariant() {
         const variant = this.propertyChangeService.getProperty('variant');
         return this.variantMap.get(variant) || 'primary';
     }
 }
-