feat(demos): add compared to WC section with samples to compare components

package.json

@@ -121,7 +121,7 @@
     "ig-typedoc-theme": "^6.0.0",
     "igniteui-dockmanager": "^1.15.2",
     "igniteui-sassdoc-theme": "^1.2.3",
-    "igniteui-webcomponents": "5.1.2",
+    "igniteui-webcomponents": "5.2.0",
     "jasmine": "^5.4.0",
     "jasmine-core": "~5.4.0",
     "karma": "^6.4.4",

projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.spec.ts

@@ -5,7 +5,7 @@ import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
 import { By } from "@angular/platform-browser";
 import { UIInteractions } from "../../test-utils/ui-interactions.spec";
 import { CalendarDay } from "../common/model";
-import { DateRangeDescriptor, DateRangeType } from "igniteui-webcomponents";
+import { DateRangeDescriptor, DateRangeType } from 'igniteui-webcomponents';
 import { ScrollDirection } from "../calendar";
 
 const TODAY = new Date(2024, 6, 12);

projects/igniteui-angular/src/lib/directives/size/ig-size.directive.spec.ts

@@ -0,0 +1,45 @@
+import { Component } from '@angular/core';
+import { IgSizeDirective } from './ig-size.directive';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+
+@Component({
+  template: `<div [igSize]="size">Test Element</div>`,
+  imports: [IgSizeDirective],
+})
+class TestComponent {
+  public size: 'small' | 'medium' | 'large';
+}
+
+describe('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]);
+    }
+  });
+});

projects/igniteui-angular/src/lib/directives/size/ig-size.directive.ts

@@ -0,0 +1,18 @@
+import { Directive, HostBinding, Input } from '@angular/core';
+
+@Directive({
+    selector: '[igSize]',
+})
+export class IgSizeDirective {
+    private _size: string;
+
+    @Input()
+    @HostBinding('style.--ig-size')
+    public get igSize(): string {
+        return this._size;
+    }
+
+    public set igSize(value: 'small' | 'medium' | 'large') {
+        this._size = `var(--ig-size-${value})`;
+    }
+}

projects/igniteui-angular/src/public_api.ts

@@ -28,6 +28,7 @@ export * from './lib/directives/mask/mask.directive';
 export * from './lib/directives/radio/public_api';
 export * from './lib/directives/ripple/ripple.directive';
 export * from './lib/directives/scroll-inertia/scroll_inertia.directive';
+export * from './lib/directives/size/ig-size.directive';
 export * from './lib/directives/text-highlight/text-highlight.directive';
 export * from './lib/directives/text-selection/text-selection.directive';
 export * from './lib/directives/template-outlet/template_outlet.directive';

src/app/accordion/accordion.sample.html

@@ -1,53 +1,48 @@
-<igx-switch [(ngModel)]="singleBranchExpand">Single Branch Expand</igx-switch>
-<button igxButton (buttonClick)="accordion.expandAll()">Expand All</button>
-<button igxButton (buttonClick)="accordion.collapseAll()">Collapse All</button>
-<button igxButton (buttonClick)="accordion.panels[1].header.disabled = !accordion.panels[1].header.disabled">Disable
-    second</button>
-<igx-accordion #accordion [singleBranchExpand]="singleBranchExpand" (panelExpanding)="panelExpanding($event)"
-    (panelExpanded)="panelExpanded($event)">
-    <igx-expansion-panel class="my-expansion-panel" id="html5" [collapsed]="false">
-        <igx-expansion-panel-header [disabled]="false">
+<h3 class="sample-title">Angular Accordion</h3>
+<igx-accordion #accordion [singleBranchExpand]="properties.singleExpand">
+    <igx-expansion-panel>
+        <igx-expansion-panel-header>
             <igx-expansion-panel-title>HTML5</igx-expansion-panel-title>
         </igx-expansion-panel-header>
         <igx-expansion-panel-body>
             <igx-accordion>
                 <igx-expansion-panel>
-                    <igx-expansion-panel-header [disabled]="false">
-                        <igx-expansion-panel-title>First</igx-expansion-panel-title>
+                    <igx-expansion-panel-header>
+                        <igx-expansion-panel-title
+                            >First</igx-expansion-panel-title
+                        >
                     </igx-expansion-panel-header>
                     <igx-expansion-panel-body>
-                        <div>
-                            Content1
-                        </div>
+                        <div>Content1</div>
                     </igx-expansion-panel-body>
                 </igx-expansion-panel>
                 <igx-expansion-panel>
-                    <igx-expansion-panel-header [disabled]="false">
-                        <igx-expansion-panel-title>Second</igx-expansion-panel-title>
+                    <igx-expansion-panel-header>
+                        <igx-expansion-panel-title
+                            >Second</igx-expansion-panel-title
+                        >
                     </igx-expansion-panel-header>
                     <igx-expansion-panel-body>
-                        <div>
-                            Content2
-                        </div>
+                        <div>Content2</div>
                     </igx-expansion-panel-body>
                 </igx-expansion-panel>
             </igx-accordion>
         </igx-expansion-panel-body>
     </igx-expansion-panel>
-    <igx-expansion-panel class="my-expansion-panel" id="css" [collapsed]="true">
-        <igx-expansion-panel-header [disabled]="false">
+    <igx-expansion-panel>
+        <igx-expansion-panel-header>
             <igx-expansion-panel-title>CSS3</igx-expansion-panel-title>
         </igx-expansion-panel-header>
         <igx-expansion-panel-body>
             <div class="example-content">
                 Cascading Style Sheets (CSS) is a style sheet language used for
-                describing the presentation of a document written in a markup language
-                like HTML
+                describing the presentation of a document written in a markup
+                language like HTML
             </div>
         </igx-expansion-panel-body>
     </igx-expansion-panel>
-    <igx-expansion-panel class="my-expansion-panel" class="my-expansion-panel" id="scss" [collapsed]="false">
-        <igx-expansion-panel-header [disabled]="false">
+    <igx-expansion-panel>
+        <igx-expansion-panel-header>
             <igx-expansion-panel-title>SASS/SCSS</igx-expansion-panel-title>
         </igx-expansion-panel-header>
         <igx-expansion-panel-body>
@@ -58,3 +53,46 @@
         </igx-expansion-panel-body>
     </igx-expansion-panel>
 </igx-accordion>
+
+<h3 class="sample-title">WC Accordion</h3>
+<igc-accordion #accordion [singleExpand]="properties.singleExpand">
+    <igc-expansion-panel
+        class="my-expansion-panel"
+        id="html5"
+        [collapsed]="false"
+    >
+        <span slot="title">HTML5</span>
+        <div>
+            <igc-accordion>
+                <igc-expansion-panel>
+                    <span slot="title">First</span>
+                    <div>Content1</div>
+                </igc-expansion-panel>
+                <igc-expansion-panel>
+                    <span slot="title">Second</span>
+                    <div>Content2</div>
+                </igc-expansion-panel>
+            </igc-accordion>
+        </div>
+    </igc-expansion-panel>
+    <igc-expansion-panel class="my-expansion-panel" id="css" [collapsed]="true">
+        <span slot="title">CSS3</span>
+        <div class="example-content">
+            Cascading Style Sheets (CSS) is a style sheet language used for
+            describing the presentation of a document written in a markup
+            language like HTML
+        </div>
+    </igc-expansion-panel>
+    <igc-expansion-panel
+        class="my-expansion-panel"
+        class="my-expansion-panel"
+        id="scss"
+        [collapsed]="false"
+    >
+        <span slot="title">SASS/SCSS</span>
+        <div class="example-content">
+            Sass is a preprocessor scripting language that is interpreted or
+            compiled into Cascading Style Sheets (CSS).
+        </div>
+    </igc-expansion-panel>
+</igc-accordion>

src/app/accordion/accordion.sample.scss

@@ -0,0 +1,3 @@
+igx-accordion {
+    margin-bottom: 42px;
+}

src/app/accordion/accordion.sample.ts

@@ -1,27 +1,52 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, DestroyRef, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { IGX_ACCORDION_DIRECTIVES, IgxAccordionComponent, IgxButtonDirective, IgxSwitchComponent } from 'igniteui-angular';
-import { slideInLeft, slideOutRight } from 'igniteui-angular/animations';
+import { IGX_ACCORDION_DIRECTIVES } from 'igniteui-angular';
+import {
+    IgcAccordionComponent,
+    IgcExpansionPanelComponent,
+    defineComponents
+} from 'igniteui-webcomponents';
+import {
+    Properties,
+    PropertyChangeService,
+    PropertyPanelConfig
+} from '../properties-panel/property-change.service';
+
+defineComponents(IgcAccordionComponent, IgcExpansionPanelComponent);
 
 @Component({
     selector: 'app-accordion-sample',
     templateUrl: 'accordion.sample.html',
     styleUrls: ['accordion.sample.scss'],
-    imports: [IgxSwitchComponent, FormsModule, IgxButtonDirective, IGX_ACCORDION_DIRECTIVES]
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    imports: [FormsModule, IGX_ACCORDION_DIRECTIVES]
 })
 export class AccordionSampleComponent {
-    @ViewChild('accordion', { static: true }) public accordion: IgxAccordionComponent;
-    public animationSettingsCustom = {
-        closeAnimation: slideOutRight,
-        openAnimation: slideInLeft
-    };
+    public panelConfig: PropertyPanelConfig = {
+        singleExpand: {
+            label: 'Single Branch Expand',
+            control: {
+                type: 'boolean',
+                defaultValue: false
+            }
+        },
+    }
 
-    public singleBranchExpand = false;
+    public properties: Properties;
 
-    public panelExpanding(event) {
-        console.log(event);
-    }
-    public panelExpanded(event) {
-        console.log(event);
+    constructor(
+        private propertyChangeService: PropertyChangeService,
+        private destroyRef: DestroyRef
+    ) {
+        this.propertyChangeService.setPanelConfig(this.panelConfig);
+
+        const { unsubscribe } =
+            this.propertyChangeService.propertyChanges.subscribe(
+                (properties) => {
+                    this.properties = properties;
+                }
+            );
+
+        this.destroyRef.onDestroy(() => unsubscribe);
     }
 }

src/app/app.component.html

@@ -56,9 +56,27 @@
         </ng-template>
     </igx-nav-drawer>
 
+    @let config = (propertyChangeService.panelConfig | async | keyvalue)?.length > 0;
+
+    @if(config) {
+    <igx-nav-drawer
+        #paneldrawer
+        [pin]="true"
+        position="right"
+        [isOpen]="config"
+        id="paneldrawer">
+        <ng-template igxDrawer>
+            <app-properties-panel></app-properties-panel>
+        </ng-template>
+    </igx-nav-drawer>
+    }
+
     <div [style.paddingLeft]="drawerState.miniVariant && !drawerState.pin ? '60px' : null" class="content">
-        <app-page-header [title]="urlString"></app-page-header>
-        <div class="sample-wrapper">
+        <app-page-header
+                [title]="urlString"
+                (toggleDirection)="onDirectionToggle($event)"
+        ></app-page-header>
+        <div #dirTarget class="sample-wrapper" [attr.dir]="dirMode()">
             <router-outlet></router-outlet>
         </div>
     </div>

src/app/app.component.scss

@@ -1,3 +1,7 @@
 .test {
     color: red;
 }
+
+#paneldrawer {
+    --igx-nav-drawer-size: 27rem;
+}