Skip to content

Commit b0ed226

Browse files
didimmovadidimmova
authored
feat(demos): add compared to WC section with samples to compare components (#14813)
1 parent 0df4df2 commit b0ed226

File tree

120 files changed

+7395
-6219
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

120 files changed

+7395
-6219
lines changed

‎package-lock.json‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@
121121
"ig-typedoc-theme": "^6.0.0",
122122
"igniteui-dockmanager": "^1.15.2",
123123
"igniteui-sassdoc-theme": "^1.2.3",
124-
"igniteui-webcomponents": "5.1.2",
124+
"igniteui-webcomponents": "5.2.0",
125125
"jasmine": "^5.4.0",
126126
"jasmine-core": "~5.4.0",
127127
"karma": "^6.4.4",

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
55
import { By } from "@angular/platform-browser";
66
import { UIInteractions } from "../../test-utils/ui-interactions.spec";
77
import { CalendarDay } from "../common/model";
8-
import { DateRangeDescriptor, DateRangeType } from "igniteui-webcomponents";
8+
import { DateRangeDescriptor, DateRangeType } from 'igniteui-webcomponents';
99
import { ScrollDirection } from "../calendar";
1010

1111
const TODAY = new Date(2024, 6, 12);

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { Component } from '@angular/core';
2+
import { IgSizeDirective } from './ig-size.directive';
3+
import { TestBed, ComponentFixture } from '@angular/core/testing';
4+
5+
@Component({
6+
template: `<div [igSize]="size">Test Element</div>`,
7+
imports: [IgSizeDirective],
8+
})
9+
class TestComponent {
10+
public size: 'small' | 'medium' | 'large';
11+
}
12+
13+
describe('IgSizeDirective', () => {
14+
let fixture: ComponentFixture<TestComponent>;
15+
let testComponent: TestComponent;
16+
let divElement: HTMLElement;
17+
18+
beforeEach(() => {
19+
TestBed.configureTestingModule({
20+
imports: [TestComponent],
21+
});
22+
23+
fixture = TestBed.createComponent(TestComponent);
24+
testComponent = fixture.componentInstance;
25+
divElement = fixture.nativeElement.querySelector('div');
26+
fixture.detectChanges();
27+
});
28+
29+
it('should apply the correct --ig-size inline style for each size', () => {
30+
const sizeMap = {
31+
small: 'var(--ig-size-small)',
32+
medium: 'var(--ig-size-medium)',
33+
large: 'var(--ig-size-large)',
34+
};
35+
36+
// Loop through each size and verify the inline style
37+
for (const size in sizeMap) {
38+
testComponent.size = size as 'small' | 'medium' | 'large';
39+
fixture.detectChanges();
40+
41+
// Check if the --ig-size style is applied correctly
42+
expect(divElement.style.getPropertyValue('--ig-size')).toBe(sizeMap[size]);
43+
}
44+
});
45+
});

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Directive, HostBinding, Input } from '@angular/core';
2+
3+
@Directive({
4+
selector: '[igSize]',
5+
})
6+
export class IgSizeDirective {
7+
private _size: string;
8+
9+
@Input()
10+
@HostBinding('style.--ig-size')
11+
public get igSize(): string {
12+
return this._size;
13+
}
14+
15+
public set igSize(value: 'small' | 'medium' | 'large') {
16+
this._size = `var(--ig-size-${value})`;
17+
}
18+
}

‎projects/igniteui-angular/src/public_api.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export * from './lib/directives/mask/mask.directive';
2828
export * from './lib/directives/radio/public_api';
2929
export * from './lib/directives/ripple/ripple.directive';
3030
export * from './lib/directives/scroll-inertia/scroll_inertia.directive';
31+
export * from './lib/directives/size/ig-size.directive';
3132
export * from './lib/directives/text-highlight/text-highlight.directive';
3233
export * from './lib/directives/text-selection/text-selection.directive';
3334
export * from './lib/directives/template-outlet/template_outlet.directive';

‎src/app/accordion/accordion.sample.html‎

Lines changed: 63 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,48 @@
1-
<igx-switch [(ngModel)]="singleBranchExpand">Single Branch Expand</igx-switch>
2-
<button igxButton (buttonClick)="accordion.expandAll()">Expand All</button>
3-
<button igxButton (buttonClick)="accordion.collapseAll()">Collapse All</button>
4-
<button igxButton (buttonClick)="accordion.panels[1].header.disabled = !accordion.panels[1].header.disabled">Disable
5-
second</button>
6-
<igx-accordion #accordion [singleBranchExpand]="singleBranchExpand" (panelExpanding)="panelExpanding($event)"
7-
(panelExpanded)="panelExpanded($event)">
8-
<igx-expansion-panel class="my-expansion-panel" id="html5" [collapsed]="false">
9-
<igx-expansion-panel-header [disabled]="false">
1+
<h3 class="sample-title">Angular Accordion</h3>
2+
<igx-accordion #accordion [singleBranchExpand]="properties.singleExpand">
3+
<igx-expansion-panel>
4+
<igx-expansion-panel-header>
105
<igx-expansion-panel-title>HTML5</igx-expansion-panel-title>
116
</igx-expansion-panel-header>
127
<igx-expansion-panel-body>
138
<igx-accordion>
149
<igx-expansion-panel>
15-
<igx-expansion-panel-header [disabled]="false">
16-
<igx-expansion-panel-title>First</igx-expansion-panel-title>
10+
<igx-expansion-panel-header>
11+
<igx-expansion-panel-title
12+
>First</igx-expansion-panel-title
13+
>
1714
</igx-expansion-panel-header>
1815
<igx-expansion-panel-body>
19-
<div>
20-
Content1
21-
</div>
16+
<div>Content1</div>
2217
</igx-expansion-panel-body>
2318
</igx-expansion-panel>
2419
<igx-expansion-panel>
25-
<igx-expansion-panel-header [disabled]="false">
26-
<igx-expansion-panel-title>Second</igx-expansion-panel-title>
20+
<igx-expansion-panel-header>
21+
<igx-expansion-panel-title
22+
>Second</igx-expansion-panel-title
23+
>
2724
</igx-expansion-panel-header>
2825
<igx-expansion-panel-body>
29-
<div>
30-
Content2
31-
</div>
26+
<div>Content2</div>
3227
</igx-expansion-panel-body>
3328
</igx-expansion-panel>
3429
</igx-accordion>
3530
</igx-expansion-panel-body>
3631
</igx-expansion-panel>
37-
<igx-expansion-panel class="my-expansion-panel" id="css" [collapsed]="true">
38-
<igx-expansion-panel-header [disabled]="false">
32+
<igx-expansion-panel>
33+
<igx-expansion-panel-header>
3934
<igx-expansion-panel-title>CSS3</igx-expansion-panel-title>
4035
</igx-expansion-panel-header>
4136
<igx-expansion-panel-body>
4237
<div class="example-content">
4338
Cascading Style Sheets (CSS) is a style sheet language used for
44-
describing the presentation of a document written in a markup language
45-
like HTML
39+
describing the presentation of a document written in a markup
40+
language like HTML
4641
</div>
4742
</igx-expansion-panel-body>
4843
</igx-expansion-panel>
49-
<igx-expansion-panel class="my-expansion-panel" class="my-expansion-panel" id="scss" [collapsed]="false">
50-
<igx-expansion-panel-header [disabled]="false">
44+
<igx-expansion-panel>
45+
<igx-expansion-panel-header>
5146
<igx-expansion-panel-title>SASS/SCSS</igx-expansion-panel-title>
5247
</igx-expansion-panel-header>
5348
<igx-expansion-panel-body>
@@ -58,3 +53,46 @@
5853
</igx-expansion-panel-body>
5954
</igx-expansion-panel>
6055
</igx-accordion>
56+
57+
<h3 class="sample-title">WC Accordion</h3>
58+
<igc-accordion #accordion [singleExpand]="properties.singleExpand">
59+
<igc-expansion-panel
60+
class="my-expansion-panel"
61+
id="html5"
62+
[collapsed]="false"
63+
>
64+
<span slot="title">HTML5</span>
65+
<div>
66+
<igc-accordion>
67+
<igc-expansion-panel>
68+
<span slot="title">First</span>
69+
<div>Content1</div>
70+
</igc-expansion-panel>
71+
<igc-expansion-panel>
72+
<span slot="title">Second</span>
73+
<div>Content2</div>
74+
</igc-expansion-panel>
75+
</igc-accordion>
76+
</div>
77+
</igc-expansion-panel>
78+
<igc-expansion-panel class="my-expansion-panel" id="css" [collapsed]="true">
79+
<span slot="title">CSS3</span>
80+
<div class="example-content">
81+
Cascading Style Sheets (CSS) is a style sheet language used for
82+
describing the presentation of a document written in a markup
83+
language like HTML
84+
</div>
85+
</igc-expansion-panel>
86+
<igc-expansion-panel
87+
class="my-expansion-panel"
88+
class="my-expansion-panel"
89+
id="scss"
90+
[collapsed]="false"
91+
>
92+
<span slot="title">SASS/SCSS</span>
93+
<div class="example-content">
94+
Sass is a preprocessor scripting language that is interpreted or
95+
compiled into Cascading Style Sheets (CSS).
96+
</div>
97+
</igc-expansion-panel>
98+
</igc-accordion>

‎src/app/accordion/accordion.sample.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
igx-accordion {
2+
margin-bottom: 42px;
3+
}

‎src/app/accordion/accordion.sample.ts‎

Lines changed: 40 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,52 @@
1-
import { Component, ViewChild } from '@angular/core';
1+
import { Component, DestroyRef, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
22
import { FormsModule } from '@angular/forms';
3-
import { IGX_ACCORDION_DIRECTIVES, IgxAccordionComponent, IgxButtonDirective, IgxSwitchComponent } from 'igniteui-angular';
4-
import { slideInLeft, slideOutRight } from 'igniteui-angular/animations';
3+
import { IGX_ACCORDION_DIRECTIVES } from 'igniteui-angular';
4+
import {
5+
IgcAccordionComponent,
6+
IgcExpansionPanelComponent,
7+
defineComponents
8+
} from 'igniteui-webcomponents';
9+
import {
10+
Properties,
11+
PropertyChangeService,
12+
PropertyPanelConfig
13+
} from '../properties-panel/property-change.service';
14+
15+
defineComponents(IgcAccordionComponent, IgcExpansionPanelComponent);
516

617
@Component({
718
selector: 'app-accordion-sample',
819
templateUrl: 'accordion.sample.html',
920
styleUrls: ['accordion.sample.scss'],
10-
imports: [IgxSwitchComponent, FormsModule, IgxButtonDirective, IGX_ACCORDION_DIRECTIVES]
21+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
22+
imports: [FormsModule, IGX_ACCORDION_DIRECTIVES]
1123
})
1224
export class AccordionSampleComponent {
13-
@ViewChild('accordion', { static: true }) public accordion: IgxAccordionComponent;
14-
public animationSettingsCustom = {
15-
closeAnimation: slideOutRight,
16-
openAnimation: slideInLeft
17-
};
25+
public panelConfig: PropertyPanelConfig = {
26+
singleExpand: {
27+
label: 'Single Branch Expand',
28+
control: {
29+
type: 'boolean',
30+
defaultValue: false
31+
}
32+
},
33+
}
1834

19-
public singleBranchExpand = false;
35+
public properties: Properties;
2036

21-
public panelExpanding(event) {
22-
console.log(event);
23-
}
24-
public panelExpanded(event) {
25-
console.log(event);
37+
constructor(
38+
private propertyChangeService: PropertyChangeService,
39+
private destroyRef: DestroyRef
40+
) {
41+
this.propertyChangeService.setPanelConfig(this.panelConfig);
42+
43+
const { unsubscribe } =
44+
this.propertyChangeService.propertyChanges.subscribe(
45+
(properties) => {
46+
this.properties = properties;
47+
}
48+
);
49+
50+
this.destroyRef.onDestroy(() => unsubscribe);
2651
}
2752
}

‎src/app/app.component.html‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,9 +56,27 @@
5656
</ng-template>
5757
</igx-nav-drawer>
5858

59+
@let config = (propertyChangeService.panelConfig | async | keyvalue)?.length > 0;
60+
61+
@if(config) {
62+
<igx-nav-drawer
63+
#paneldrawer
64+
[pin]="true"
65+
position="right"
66+
[isOpen]="config"
67+
id="paneldrawer">
68+
<ng-template igxDrawer>
69+
<app-properties-panel></app-properties-panel>
70+
</ng-template>
71+
</igx-nav-drawer>
72+
}
73+
5974
<div [style.paddingLeft]="drawerState.miniVariant && !drawerState.pin ? '60px' : null" class="content">
60-
<app-page-header [title]="urlString"></app-page-header>
61-
<div class="sample-wrapper">
75+
<app-page-header
76+
[title]="urlString"
77+
(toggleDirection)="onDirectionToggle($event)"
78+
></app-page-header>
79+
<div #dirTarget class="sample-wrapper" [attr.dir]="dirMode()">
6280
<router-outlet></router-outlet>
6381
</div>
6482
</div>

0 commit comments

Comments
 (0)