diff --git a/package-lock.json b/package-lock.json index efaa25b..059f0ac 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,7 @@ "@angular/platform-browser": "^20.3.15", "@angular/platform-browser-dynamic": "^20.3.15", "@angular/router": "^20.3.15", - "@tylertech/forge": "^3.14.0", + "@tylertech/forge": "^3.15.2", "@tylertech/tyler-icons": "^2.0.4", "rxjs": "^7.8.2", "tslib": "^2.8.1", @@ -5038,14 +5038,14 @@ } }, "node_modules/@tylertech/forge": { - "version": "3.14.4", - "resolved": "https://registry.npmjs.org/@tylertech/forge/-/forge-3.14.4.tgz", - "integrity": "sha512-GbsT9M4rEf2h1hsy/lR46aQ7KXQzA0C2hABEvnH28DYGmp08FDAl/Gs6QTiS4Obaz34mXgymQ8u6aIQ8Gr2blA==", + "version": "3.15.2", + "resolved": "https://registry.npmjs.org/@tylertech/forge/-/forge-3.15.2.tgz", + "integrity": "sha512-e+NKFNPynmt8pr23Hx4MuwRM0DL2d187euO/K6q3E2zoDZVYwGw32XadcUHyAWjtlXGxBcKlWK5gJb0zM1S4jw==", "license": "Apache-2.0", "dependencies": { "@floating-ui/dom": "^1.7.6", "@lit/context": "^1.1.6", - "@tylertech/forge-core": "3.3.1", + "@tylertech/forge-core": "3.4.0", "@tylertech/tyler-icons": "^2.1.0", "imask": "^7.6.1", "lit": "^3.3.2", @@ -5053,9 +5053,9 @@ } }, "node_modules/@tylertech/forge-core": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/@tylertech/forge-core/-/forge-core-3.3.1.tgz", - "integrity": "sha512-GVS9+WSfLVOH7LH5HR5uYA5Pb5A2ouSEoPc7adw0nUo2/MCLbd2voMUQDVAsj8bZ+2HcV8jSdxzvn6l0qjAaKA==", + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/@tylertech/forge-core/-/forge-core-3.4.0.tgz", + "integrity": "sha512-AvyjsgGcDynBuqx8xZ/8LdTWIQHBdJOFuZ9CtrLhQYWwubzcs64f4mZumzTtCgxcECA2soE0LPY1KyHtwnWo6A==", "license": "Apache-2.0", "dependencies": { "tslib": "^2.8.1" diff --git a/package.json b/package.json index fba03ae..fb5ee05 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,7 @@ "@angular/platform-browser": "^20.3.15", "@angular/platform-browser-dynamic": "^20.3.15", "@angular/router": "^20.3.15", - "@tylertech/forge": "^3.14.0", + "@tylertech/forge": "^3.15.2", "@tylertech/tyler-icons": "^2.0.4", "rxjs": "^7.8.2", "tslib": "^2.8.1", @@ -38,12 +38,12 @@ "@angular/build": "^20.3.13", "@angular/cli": "^20.3.13", "@angular/compiler-cli": "^20.3.15", - "@schematics/angular": "^20.3.13", "@auto-it/conventional-commits": "^11.3.6", "@auto-it/first-time-contributor": "^11.3.6", "@auto-it/npm": "^11.3.6", "@commitlint/cli": "^20.1.0", "@commitlint/config-conventional": "^20.0.0", + "@schematics/angular": "^20.3.13", "@tylertech-eslint/eslint-plugin": "^1.0.16", "@tylertech/forge-schematics": "^2.0.0", "@types/jasmine": "^5.1.13", diff --git a/projects/forge-angular/src/lib/forge.module.ts b/projects/forge-angular/src/lib/forge.module.ts index b6c6a19..45a889e 100644 --- a/projects/forge-angular/src/lib/forge.module.ts +++ b/projects/forge-angular/src/lib/forge.module.ts @@ -87,6 +87,10 @@ import { ForgeTooltipModule } from './tooltip'; import { ForgeViewModule } from './view'; import { ForgeViewSwitcherModule } from './view-switcher'; import { ForgeTreeModule } from './tree'; +import { ForgeTabPanelModule } from './tab-panel/tab-panel.module'; +import { ForgeTimelineModule } from './timeline/timeline.module'; +import { ForgeTimelineBreakModule } from './timeline-break/timeline-break.module'; +import { ForgeTimelineItemModule } from './timeline-item/timeline-item.module'; @NgModule({ exports: [ @@ -168,15 +172,19 @@ import { ForgeTreeModule } from './tree'; ForgeSwitchModule, ForgeTabModule, ForgeTabBarModule, + ForgeTabPanelModule, ForgeTableModule, ForgeTextFieldModule, + ForgeTimelineBreakModule, + ForgeTimelineItemModule, + ForgeTimelineModule, ForgeTimePickerModule, ForgeToastModule, ForgeToolbarModule, ForgeTooltipModule, ForgeTreeModule, ForgeViewModule, - ForgeViewSwitcherModule - ] + ForgeViewSwitcherModule, + ], }) export class ForgeModule {} diff --git a/projects/forge-angular/src/lib/skeleton/skeleton.component.ts b/projects/forge-angular/src/lib/skeleton/skeleton.component.ts index 2abba39..cc932c6 100644 --- a/projects/forge-angular/src/lib/skeleton/skeleton.component.ts +++ b/projects/forge-angular/src/lib/skeleton/skeleton.component.ts @@ -1,5 +1,5 @@ // This code was generated by the angular-custom-elements-schematic. Any changes will be overwritten next time it runs. -import { Component, ElementRef, ChangeDetectionStrategy, ChangeDetectorRef, NgZone, Input, inject } from '@angular/core'; +import { booleanAttribute, Component, ElementRef, ChangeDetectionStrategy, ChangeDetectorRef, NgZone, Input, inject } from '@angular/core'; import { SkeletonComponent as SkeletonComponentCustomElement, defineSkeletonComponent } from '@tylertech/forge'; /** */ @@ -16,6 +16,83 @@ export class SkeletonComponent { /** The forge-skeleton element. */ public readonly nativeElement = this.elementRef.nativeElement; + /** Applies form field styles to the skeleton. */ + @Input({ transform: booleanAttribute }) + public set formField(value: SkeletonComponentCustomElement['formField']) { + this.zone.runOutsideAngular(() => { + this.nativeElement.formField = value; + }); + } + public get formField(): SkeletonComponentCustomElement['formField'] { + return this.nativeElement.formField; + } + + /** Applies button styles to the skeleton. */ + @Input({ transform: booleanAttribute }) + public set button(value: SkeletonComponentCustomElement['button']) { + this.zone.runOutsideAngular(() => { + this.nativeElement.button = value; + }); + } + public get button(): SkeletonComponentCustomElement['button'] { + return this.nativeElement.button; + } + + /** Applies chip styles to the skeleton. */ + @Input({ transform: booleanAttribute }) + public set chip(value: SkeletonComponentCustomElement['chip']) { + this.zone.runOutsideAngular(() => { + this.nativeElement.chip = value; + }); + } + public get chip(): SkeletonComponentCustomElement['chip'] { + return this.nativeElement.chip; + } + + /** Applies list item styles to the skeleton. */ + @Input({ transform: booleanAttribute }) + public set listItem(value: SkeletonComponentCustomElement['listItem']) { + this.zone.runOutsideAngular(() => { + this.nativeElement.listItem = value; + }); + } + public get listItem(): SkeletonComponentCustomElement['listItem'] { + return this.nativeElement.listItem; + } + + /** Applies text styles to the skeleton. */ + @Input({ transform: booleanAttribute }) + public set text(value: SkeletonComponentCustomElement['text']) { + this.zone.runOutsideAngular(() => { + this.nativeElement.text = value; + }); + } + public get text(): SkeletonComponentCustomElement['text'] { + return this.nativeElement.text; + } + + /** Applies avatar styles to the skeleton. */ + @Input({ transform: booleanAttribute }) + public set avatar(value: SkeletonComponentCustomElement['avatar']) { + this.zone.runOutsideAngular(() => { + this.nativeElement.avatar = value; + }); + } + public get avatar(): SkeletonComponentCustomElement['avatar'] { + return this.nativeElement.avatar; + } + + /** Applies stretch styles to the skeleton. */ + @Input({ transform: booleanAttribute }) + public set stretch(value: SkeletonComponentCustomElement['stretch']) { + this.zone.runOutsideAngular(() => { + this.nativeElement.stretch = value; + }); + } + public get stretch(): SkeletonComponentCustomElement['stretch'] { + return this.nativeElement.stretch; + } + constructor() { defineSkeletonComponent(); const changeDetectorRef = inject(ChangeDetectorRef); diff --git a/projects/forge-angular/src/lib/skip-link/skip-link.component.ts b/projects/forge-angular/src/lib/skip-link/skip-link.component.ts index f4d62dd..a3ae103 100644 --- a/projects/forge-angular/src/lib/skip-link/skip-link.component.ts +++ b/projects/forge-angular/src/lib/skip-link/skip-link.component.ts @@ -60,7 +60,7 @@ export class SkipLinkComponent { return this.nativeElement.persistent; } - /** Whether or not the skip link renders within its container. */ + /** Whether or not the skip link is positioned within its container. */ @Input({ transform: booleanAttribute }) public set inline(value: SkipLinkComponentCustomElement['inline']) { this.zone.runOutsideAngular(() => { diff --git a/projects/forge-angular/src/lib/tab-bar/tab-bar.component.ts b/projects/forge-angular/src/lib/tab-bar/tab-bar.component.ts index cc615ea..e975dff 100644 --- a/projects/forge-angular/src/lib/tab-bar/tab-bar.component.ts +++ b/projects/forge-angular/src/lib/tab-bar/tab-bar.component.ts @@ -1,5 +1,5 @@ // This code was generated by the angular-custom-elements-schematic. Any changes will be overwritten next time it runs. -import { booleanAttribute, Component, ElementRef, ChangeDetectionStrategy, ChangeDetectorRef, NgZone, numberAttribute, Input, inject } from '@angular/core'; +import { booleanAttribute, Component, ElementRef, ChangeDetectionStrategy, ChangeDetectorRef, NgZone, Input, inject } from '@angular/core'; import { TabBarComponent as TabBarComponentCustomElement, defineTabBarComponent } from '@tylertech/forge'; /** */ @@ -16,7 +16,12 @@ export class TabBarComponent { /** The forge-tab-bar element. */ public readonly nativeElement = this.elementRef.nativeElement; - /** Sets the disabled state of all child tabs. If true, any new tabs added to the DOM will be disabled by default. This can be used instead of setting individual tab disabled properties, mixing the two methods of disabling is not supported. */ + /** + * Sets the disabled state of all child tabs. If true, any new tabs added to the DOM will be + * disabled by default. This can be used instead of setting individual tab disabled properties, + * mixing the two methods of disabling is not supported. Disabled tabs remain focusable but are + * not interactive. + */ @Input({ transform: booleanAttribute }) public set disabled(value: TabBarComponentCustomElement['disabled']) { this.zone.runOutsideAngular(() => { @@ -28,7 +33,7 @@ export class TabBarComponent { } /** The index of the active tab. */ - @Input({ transform: numberAttribute }) + @Input() public set activeTab(value: TabBarComponentCustomElement['activeTab']) { this.zone.runOutsideAngular(() => { this.nativeElement.activeTab = value; @@ -38,6 +43,17 @@ export class TabBarComponent { return this.nativeElement.activeTab; } + /** The name of the active tab. */ + @Input() + public set activeTabName(value: TabBarComponentCustomElement['activeTabName']) { + this.zone.runOutsideAngular(() => { + this.nativeElement.activeTabName = value; + }); + } + public get activeTabName(): TabBarComponentCustomElement['activeTabName'] { + return this.nativeElement.activeTabName; + } + /** Controls whether the tab bar is vertical or horizontal. */ @Input({ transform: booleanAttribute }) public set vertical(value: TabBarComponentCustomElement['vertical']) { @@ -49,7 +65,10 @@ export class TabBarComponent { return this.nativeElement.vertical; } - /** Controls whether the tabs stretch the full width of their container or cluster together at their minimum width. */ + /** + * Controls whether the tabs stretch the full width of their container or cluster together at + * their minimum width. + */ @Input({ transform: booleanAttribute }) public set clustered(value: TabBarComponentCustomElement['clustered']) { this.zone.runOutsideAngular(() => { @@ -93,6 +112,17 @@ export class TabBarComponent { return this.nativeElement.inverted; } + /** Controls whether the tabs can be closed with the delete key. */ + @Input({ transform: booleanAttribute }) + public set closable(value: TabBarComponentCustomElement['closable']) { + this.zone.runOutsideAngular(() => { + this.nativeElement.closable = value; + }); + } + public get closable(): TabBarComponentCustomElement['closable'] { + return this.nativeElement.closable; + } + /** Controls whether the tabs are automatically activated when receiving focus. */ @Input({ transform: booleanAttribute }) public set autoActivate(value: TabBarComponentCustomElement['autoActivate']) { @@ -115,6 +145,17 @@ export class TabBarComponent { return this.nativeElement.scrollButtons; } + /** The tab bar's theme. */ + @Input() + public set theme(value: TabBarComponentCustomElement['theme']) { + this.zone.runOutsideAngular(() => { + this.nativeElement.theme = value; + }); + } + public get theme(): TabBarComponentCustomElement['theme'] { + return this.nativeElement.theme; + } + constructor() { defineTabBarComponent(); const changeDetectorRef = inject(ChangeDetectorRef); diff --git a/projects/forge-angular/src/lib/tab-bar/tab-bar.module.ts b/projects/forge-angular/src/lib/tab-bar/tab-bar.module.ts index 2f68853..2809881 100644 --- a/projects/forge-angular/src/lib/tab-bar/tab-bar.module.ts +++ b/projects/forge-angular/src/lib/tab-bar/tab-bar.module.ts @@ -1,18 +1,18 @@ // This code was generated by the angular-custom-elements-schematic. Any changes will be overwritten next time it runs. import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; +import { NgModule } from '@angular/core'; import { defineTabBarComponent } from '@tylertech/forge'; import { ForgeTabModule } from '../tab/tab.module'; import { TabBarComponent } from './tab-bar.component'; @NgModule({ - imports: [CommonModule, ForgeTabModule], - declarations: [TabBarComponent], - exports: [TabBarComponent, ForgeTabModule] + imports: [CommonModule, ForgeTabModule], + declarations: [TabBarComponent], + exports: [TabBarComponent, ForgeTabModule], }) export class ForgeTabBarModule { - constructor() { - defineTabBarComponent(); - } -} \ No newline at end of file + constructor() { + defineTabBarComponent(); + } +} diff --git a/projects/forge-angular/src/lib/tab-panel/index.ts b/projects/forge-angular/src/lib/tab-panel/index.ts new file mode 100644 index 0000000..3f7967e --- /dev/null +++ b/projects/forge-angular/src/lib/tab-panel/index.ts @@ -0,0 +1,2 @@ +export * from './tab-panel.component'; +export * from './tab-panel.module'; diff --git a/projects/forge-angular/src/lib/tab-panel/tab-panel.component.ts b/projects/forge-angular/src/lib/tab-panel/tab-panel.component.ts new file mode 100644 index 0000000..ecac667 --- /dev/null +++ b/projects/forge-angular/src/lib/tab-panel/tab-panel.component.ts @@ -0,0 +1,77 @@ +// This code was generated by the angular-custom-elements-schematic. Any changes will be overwritten next time it runs. +import { booleanAttribute, Component, ElementRef, ChangeDetectionStrategy, ChangeDetectorRef, NgZone, Input, inject } from '@angular/core'; +import { TabPanelComponent as TabPanelComponentCustomElement, defineTabPanelComponent } from '@tylertech/forge'; + +/** */ +@Component({ + selector: 'forge-tab-panel', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + standalone: false +}) +export class TabPanelComponent { + protected elementRef = inject>(ElementRef); + protected zone = inject(NgZone); + + /** The forge-tab-panel element. */ + public readonly nativeElement = this.elementRef.nativeElement; + + /** The ID of the tab that controls this tab panel. */ + @Input() + public set for(value: TabPanelComponentCustomElement['for']) { + this.zone.runOutsideAngular(() => { + this.nativeElement.for = value; + }); + } + public get for(): TabPanelComponentCustomElement['for'] { + return this.nativeElement.for; + } + + /** + * A reference to the associated tab element. This is typically set automatically based on the + * `for` property, but can also be set directly for more dynamic use cases. + */ + @Input() + public set forElement(value: TabPanelComponentCustomElement['forElement']) { + this.zone.runOutsideAngular(() => { + this.nativeElement.forElement = value; + }); + } + public get forElement(): TabPanelComponentCustomElement['forElement'] { + return this.nativeElement.forElement; + } + + /** + * Whether the tab panel is open (visible). This is typically controlled by the associated tab, + * but can also be set directly. + */ + @Input({ transform: booleanAttribute }) + public set open(value: TabPanelComponentCustomElement['open']) { + this.zone.runOutsideAngular(() => { + this.nativeElement.open = value; + }); + } + public get open(): TabPanelComponentCustomElement['open'] { + return this.nativeElement.open; + } + + /** + * Controls how focus is managed when the tab panel is opened. When set to 'auto' focus is set to + * the panel. Set to 'off' to disable focus management. + */ + @Input() + public set focusOnOpen(value: TabPanelComponentCustomElement['focusOnOpen']) { + this.zone.runOutsideAngular(() => { + this.nativeElement.focusOnOpen = value; + }); + } + public get focusOnOpen(): TabPanelComponentCustomElement['focusOnOpen'] { + return this.nativeElement.focusOnOpen; + } + + constructor() { + defineTabPanelComponent(); + const changeDetectorRef = inject(ChangeDetectorRef); + changeDetectorRef.detach(); + } +} diff --git a/projects/forge-angular/src/lib/tab-panel/tab-panel.module.ts b/projects/forge-angular/src/lib/tab-panel/tab-panel.module.ts new file mode 100644 index 0000000..8f8aba2 --- /dev/null +++ b/projects/forge-angular/src/lib/tab-panel/tab-panel.module.ts @@ -0,0 +1,17 @@ +// This code was generated by the angular-custom-elements-schematic. Any changes will be overwritten next time it runs. +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { defineTabPanelComponent } from '@tylertech/forge'; + +import { TabPanelComponent } from './tab-panel.component'; + +@NgModule({ + imports: [CommonModule], + declarations: [TabPanelComponent], + exports: [TabPanelComponent] +}) +export class ForgeTabPanelModule { + constructor() { + defineTabPanelComponent(); + } +} \ No newline at end of file diff --git a/projects/forge-angular/src/lib/tab/index.ts b/projects/forge-angular/src/lib/tab/index.ts index a0a9073..4c3c423 100644 --- a/projects/forge-angular/src/lib/tab/index.ts +++ b/projects/forge-angular/src/lib/tab/index.ts @@ -1,2 +1,2 @@ export * from './tab.component'; -export * from './tab.module'; \ No newline at end of file +export * from './tab.module'; diff --git a/projects/forge-angular/src/lib/tab/tab.component.ts b/projects/forge-angular/src/lib/tab/tab.component.ts index cfbc3e2..bfce4cf 100644 --- a/projects/forge-angular/src/lib/tab/tab.component.ts +++ b/projects/forge-angular/src/lib/tab/tab.component.ts @@ -16,7 +16,21 @@ export class TabComponent { /** The forge-tab element. */ public readonly nativeElement = this.elementRef.nativeElement; - /** The disabled state of the tab. Should not be set if using the disabled property on `forge-tab-bar`. */ + /** The name of the tab used for indexing and identication. */ + @Input() + public set name(value: TabComponentCustomElement['name']) { + this.zone.runOutsideAngular(() => { + this.nativeElement.name = value; + }); + } + public get name(): TabComponentCustomElement['name'] { + return this.nativeElement.name; + } + + /** + * The disabled state of the tab. Disabled tabs remain focusable but are not interactive. Should + * not be set if using the disabled property on `forge-tab-bar`. + */ @Input({ transform: booleanAttribute }) public set disabled(value: TabComponentCustomElement['disabled']) { this.zone.runOutsideAngular(() => { @@ -27,8 +41,19 @@ export class TabComponent { return this.nativeElement.disabled; } - /** The selected state of the tab. */ + /** Whether the tab is the current active tab within its parent tab bar. */ @Input({ transform: booleanAttribute }) + public set active(value: TabComponentCustomElement['active']) { + this.zone.runOutsideAngular(() => { + this.nativeElement.active = value; + }); + } + public get active(): TabComponentCustomElement['active'] { + return this.nativeElement.active; + } + + /** The selected state of the tab. */ + @Input() public set selected(value: TabComponentCustomElement['selected']) { this.zone.runOutsideAngular(() => { this.nativeElement.selected = value; @@ -82,9 +107,20 @@ export class TabComponent { return this.nativeElement.inverted; } + /** Controls whether the tab can be closed with the delete key. */ + @Input({ transform: booleanAttribute }) + public set closable(value: TabComponentCustomElement['closable']) { + this.zone.runOutsideAngular(() => { + this.nativeElement.closable = value; + }); + } + public get closable(): TabComponentCustomElement['closable'] { + return this.nativeElement.closable; + } + - public focus(...args: Parameters): ReturnType { - return this.zone.runOutsideAngular(() => this.nativeElement.focus(...args)); + public activate(...args: Parameters): ReturnType { + return this.zone.runOutsideAngular(() => this.nativeElement.activate(...args)); } constructor() { diff --git a/projects/forge-angular/src/lib/timeline-break/index.ts b/projects/forge-angular/src/lib/timeline-break/index.ts new file mode 100644 index 0000000..40c5db7 --- /dev/null +++ b/projects/forge-angular/src/lib/timeline-break/index.ts @@ -0,0 +1,2 @@ +export * from './timeline-break.component'; +export * from './timeline-break.module'; diff --git a/projects/forge-angular/src/lib/timeline-break/timeline-break.component.ts b/projects/forge-angular/src/lib/timeline-break/timeline-break.component.ts new file mode 100644 index 0000000..f74b343 --- /dev/null +++ b/projects/forge-angular/src/lib/timeline-break/timeline-break.component.ts @@ -0,0 +1,24 @@ +// This code was generated by the angular-custom-elements-schematic. Any changes will be overwritten next time it runs. +import { Component, ElementRef, ChangeDetectionStrategy, ChangeDetectorRef, NgZone, Input, inject } from '@angular/core'; +import { TimelineBreakComponent as TimelineBreakComponentCustomElement, defineTimelineBreakComponent } from '@tylertech/forge'; + +/** */ +@Component({ + selector: 'forge-timeline-break', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + standalone: false +}) +export class TimelineBreakComponent { + protected elementRef = inject>(ElementRef); + protected zone = inject(NgZone); + + /** The forge-timeline-break element. */ + public readonly nativeElement = this.elementRef.nativeElement; + + constructor() { + defineTimelineBreakComponent(); + const changeDetectorRef = inject(ChangeDetectorRef); + changeDetectorRef.detach(); + } +} diff --git a/projects/forge-angular/src/lib/timeline-break/timeline-break.module.ts b/projects/forge-angular/src/lib/timeline-break/timeline-break.module.ts new file mode 100644 index 0000000..d0e18ab --- /dev/null +++ b/projects/forge-angular/src/lib/timeline-break/timeline-break.module.ts @@ -0,0 +1,17 @@ +// This code was generated by the angular-custom-elements-schematic. Any changes will be overwritten next time it runs. +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { defineTimelineBreakComponent } from '@tylertech/forge'; + +import { TimelineBreakComponent } from './timeline-break.component'; + +@NgModule({ + imports: [CommonModule], + declarations: [TimelineBreakComponent], + exports: [TimelineBreakComponent] +}) +export class ForgeTimelineBreakModule { + constructor() { + defineTimelineBreakComponent(); + } +} \ No newline at end of file diff --git a/projects/forge-angular/src/lib/timeline-item/index.ts b/projects/forge-angular/src/lib/timeline-item/index.ts new file mode 100644 index 0000000..3f353c9 --- /dev/null +++ b/projects/forge-angular/src/lib/timeline-item/index.ts @@ -0,0 +1,2 @@ +export * from './timeline-item.component'; +export * from './timeline-item.module'; diff --git a/projects/forge-angular/src/lib/timeline-item/timeline-item.component.ts b/projects/forge-angular/src/lib/timeline-item/timeline-item.component.ts new file mode 100644 index 0000000..19c2568 --- /dev/null +++ b/projects/forge-angular/src/lib/timeline-item/timeline-item.component.ts @@ -0,0 +1,46 @@ +// This code was generated by the angular-custom-elements-schematic. Any changes will be overwritten next time it runs. +import { Component, ElementRef, ChangeDetectionStrategy, ChangeDetectorRef, NgZone, Input, inject } from '@angular/core'; +import { TimelineItemComponent as TimelineItemComponentCustomElement, defineTimelineItemComponent } from '@tylertech/forge'; + +/** */ +@Component({ + selector: 'forge-timeline-item', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + standalone: false +}) +export class TimelineItemComponent { + protected elementRef = inject>(ElementRef); + protected zone = inject(NgZone); + + /** The forge-timeline-item element. */ + public readonly nativeElement = this.elementRef.nativeElement; + + /** The theme color of the marker. */ + @Input() + public set theme(value: TimelineItemComponentCustomElement['theme']) { + this.zone.runOutsideAngular(() => { + this.nativeElement.theme = value; + }); + } + public get theme(): TimelineItemComponentCustomElement['theme'] { + return this.nativeElement.theme; + } + + /** Which parts of the sidebar line should appear. */ + @Input() + public set sidebar(value: TimelineItemComponentCustomElement['sidebar']) { + this.zone.runOutsideAngular(() => { + this.nativeElement.sidebar = value; + }); + } + public get sidebar(): TimelineItemComponentCustomElement['sidebar'] { + return this.nativeElement.sidebar; + } + + constructor() { + defineTimelineItemComponent(); + const changeDetectorRef = inject(ChangeDetectorRef); + changeDetectorRef.detach(); + } +} diff --git a/projects/forge-angular/src/lib/timeline-item/timeline-item.module.ts b/projects/forge-angular/src/lib/timeline-item/timeline-item.module.ts new file mode 100644 index 0000000..b46f579 --- /dev/null +++ b/projects/forge-angular/src/lib/timeline-item/timeline-item.module.ts @@ -0,0 +1,17 @@ +// This code was generated by the angular-custom-elements-schematic. Any changes will be overwritten next time it runs. +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { defineTimelineItemComponent } from '@tylertech/forge'; + +import { TimelineItemComponent } from './timeline-item.component'; + +@NgModule({ + imports: [CommonModule], + declarations: [TimelineItemComponent], + exports: [TimelineItemComponent] +}) +export class ForgeTimelineItemModule { + constructor() { + defineTimelineItemComponent(); + } +} \ No newline at end of file diff --git a/projects/forge-angular/src/lib/timeline/index.ts b/projects/forge-angular/src/lib/timeline/index.ts new file mode 100644 index 0000000..3e5953f --- /dev/null +++ b/projects/forge-angular/src/lib/timeline/index.ts @@ -0,0 +1,2 @@ +export * from './timeline.component'; +export * from './timeline.module'; diff --git a/projects/forge-angular/src/lib/timeline/timeline.component.ts b/projects/forge-angular/src/lib/timeline/timeline.component.ts new file mode 100644 index 0000000..01f2d58 --- /dev/null +++ b/projects/forge-angular/src/lib/timeline/timeline.component.ts @@ -0,0 +1,24 @@ +// This code was generated by the angular-custom-elements-schematic. Any changes will be overwritten next time it runs. +import { Component, ElementRef, ChangeDetectionStrategy, ChangeDetectorRef, NgZone, Input, inject } from '@angular/core'; +import { TimelineComponent as TimelineComponentCustomElement, defineTimelineComponent } from '@tylertech/forge'; + +/** */ +@Component({ + selector: 'forge-timeline', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + standalone: false +}) +export class TimelineComponent { + protected elementRef = inject>(ElementRef); + protected zone = inject(NgZone); + + /** The forge-timeline element. */ + public readonly nativeElement = this.elementRef.nativeElement; + + constructor() { + defineTimelineComponent(); + const changeDetectorRef = inject(ChangeDetectorRef); + changeDetectorRef.detach(); + } +} diff --git a/projects/forge-angular/src/lib/timeline/timeline.module.ts b/projects/forge-angular/src/lib/timeline/timeline.module.ts new file mode 100644 index 0000000..ffaeae0 --- /dev/null +++ b/projects/forge-angular/src/lib/timeline/timeline.module.ts @@ -0,0 +1,23 @@ +// This code was generated by the angular-custom-elements-schematic. Any changes will be overwritten next time it runs. +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { defineTimelineComponent } from '@tylertech/forge'; +import { ForgeTimelineBreakModule } from '../timeline-break/timeline-break.module'; +import { ForgeTimelineItemModule } from '../timeline-item/timeline-item.module'; + +import { TimelineComponent } from './timeline.component'; + +@NgModule({ + imports: [CommonModule, ForgeTimelineItemModule, ForgeTimelineBreakModule], + declarations: [TimelineComponent], + exports: [ + TimelineComponent, + ForgeTimelineItemModule, + ForgeTimelineBreakModule, + ], +}) +export class ForgeTimelineModule { + constructor() { + defineTimelineComponent(); + } +} diff --git a/projects/forge-angular/src/lib/timestamp/index.ts b/projects/forge-angular/src/lib/timestamp/index.ts new file mode 100644 index 0000000..7cb40aa --- /dev/null +++ b/projects/forge-angular/src/lib/timestamp/index.ts @@ -0,0 +1,2 @@ +export * from './timestamp.component'; +export * from './timestamp.module'; diff --git a/projects/forge-angular/src/lib/timestamp/timestamp.component.ts b/projects/forge-angular/src/lib/timestamp/timestamp.component.ts new file mode 100644 index 0000000..cc75d78 --- /dev/null +++ b/projects/forge-angular/src/lib/timestamp/timestamp.component.ts @@ -0,0 +1,75 @@ +// This code was generated by the angular-custom-elements-schematic. Any changes will be overwritten next time it runs. +import { Component, ElementRef, ChangeDetectionStrategy, ChangeDetectorRef, NgZone, Input, inject } from '@angular/core'; +import { TimestampComponent as TimestampComponentCustomElement, defineTimestampComponent } from '@tylertech/forge'; + +/** */ +@Component({ + selector: 'forge-timestamp', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + standalone: false +}) +export class TimestampComponent { + protected elementRef = inject>(ElementRef); + protected zone = inject(NgZone); + + /** The forge-timestamp element. */ + public readonly nativeElement = this.elementRef.nativeElement; + + /** + * The date/time value to display. Accepts a Date object, an ISO string, or an HTML `