From afe0e88d5e12f6a9757eb7f40eea44a576ab8e92 Mon Sep 17 00:00:00 2001 From: Sam Richardson Date: Thu, 30 Jan 2025 14:07:50 -0500 Subject: [PATCH] chore: update to support Forge 3.5.0 (#72) --- generate-proxies.json | 4 +- package-lock.json | 69 +++++-- package.json | 2 +- projects/forge-angular/package.json | 2 +- .../src/lib/button/button.component.ts | 5 - .../fab/floating-action-button.component.ts | 5 - .../forge-angular/src/lib/forge.module.ts | 10 +- .../lib/icon-button/icon-button.component.ts | 5 - .../forge-angular/src/lib/key-item/index.ts | 2 + .../src/lib/key-item/key-item.component.ts | 35 ++++ .../src/lib/key-item/key-item.module.ts | 17 ++ projects/forge-angular/src/lib/key/index.ts | 2 + .../src/lib/key/key.component.ts | 24 +++ .../forge-angular/src/lib/key/key.module.ts | 18 ++ .../src/lib/meter-group/index.ts | 2 + .../lib/meter-group/meter-group.component.ts | 101 ++++++++++ .../src/lib/meter-group/meter-group.module.ts | 18 ++ projects/forge-angular/src/lib/meter/index.ts | 2 + .../src/lib/meter/meter.component.ts | 186 ++++++++++++++++++ .../src/lib/meter/meter.module.ts | 17 ++ .../src/lib/slider/slider.component.ts | 10 - .../src/lib/tab-bar/tab-bar.component.ts | 2 +- .../src/lib/tab/tab.component.ts | 5 + projects/forge-angular/src/public-api.ts | 4 + 24 files changed, 503 insertions(+), 44 deletions(-) create mode 100644 projects/forge-angular/src/lib/key-item/index.ts create mode 100644 projects/forge-angular/src/lib/key-item/key-item.component.ts create mode 100644 projects/forge-angular/src/lib/key-item/key-item.module.ts create mode 100644 projects/forge-angular/src/lib/key/index.ts create mode 100644 projects/forge-angular/src/lib/key/key.component.ts create mode 100644 projects/forge-angular/src/lib/key/key.module.ts create mode 100644 projects/forge-angular/src/lib/meter-group/index.ts create mode 100644 projects/forge-angular/src/lib/meter-group/meter-group.component.ts create mode 100644 projects/forge-angular/src/lib/meter-group/meter-group.module.ts create mode 100644 projects/forge-angular/src/lib/meter/index.ts create mode 100644 projects/forge-angular/src/lib/meter/meter.component.ts create mode 100644 projects/forge-angular/src/lib/meter/meter.module.ts diff --git a/generate-proxies.json b/generate-proxies.json index c347c3b..ef4468a 100644 --- a/generate-proxies.json +++ b/generate-proxies.json @@ -13,7 +13,9 @@ "forge-chip-set": ["forge-chip"], "forge-expansion-panel": ["forge-open-icon"], "forge-icon-button": ["forge-icon"], + "forge-key": ["forge-key-item"], "forge-list": ["forge-list-item"], + "forge-meter-group": ["forge-meter"], "forge-radio-group": ["forge-radio"], "forge-select": ["forge-option"], "forge-split-view": ["forge-split-view-panel"], @@ -21,4 +23,4 @@ "forge-tab-bar": ["forge-tab"], "forge-view-switcher": ["forge-view"] } -} \ No newline at end of file +} diff --git a/package-lock.json b/package-lock.json index 41e5785..62c9a13 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,7 +17,7 @@ "@angular/platform-browser": "^18.2.12", "@angular/platform-browser-dynamic": "^18.2.12", "@angular/router": "^18.2.12", - "@tylertech/forge": "^3.3.5", + "@tylertech/forge": "^3.5.0", "@tylertech/tyler-icons": "^1.18.1", "rxjs": "^7.8.1", "tslib": "^2.8.1", @@ -4343,6 +4343,19 @@ "@inquirer/prompts": ">= 3 < 6" } }, + "node_modules/@lit-labs/ssr-dom-shim": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.3.0.tgz", + "integrity": "sha512-nQIWonJ6eFAvUUrSlwyHDm/aE8PBDu5kRpL0vHMg6K8fK3Diq1xdPjTnsJSwxABhaZ+5eBi1btQB5ShUTKo4nQ==" + }, + "node_modules/@lit/reactive-element": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.0.4.tgz", + "integrity": "sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ==", + "dependencies": { + "@lit-labs/ssr-dom-shim": "^1.2.0" + } + }, "node_modules/@lmdb/lmdb-darwin-arm64": { "version": "3.0.13", "resolved": "https://registry.npmjs.org/@lmdb/lmdb-darwin-arm64/-/lmdb-darwin-arm64-3.0.13.tgz", @@ -5601,23 +5614,22 @@ } }, "node_modules/@tylertech/forge": { - "version": "3.3.5", - "resolved": "https://registry.npmjs.org/@tylertech/forge/-/forge-3.3.5.tgz", - "integrity": "sha512-xKHk8FILQWRzeSQVfzWlF1V6TJ4m8/ATJdSjbu8IMNCehTz4wmygd4spC3ii1eMGB4WEsuOjYFuc/5xxK/2I7A==", - "license": "Apache-2.0", + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/@tylertech/forge/-/forge-3.5.0.tgz", + "integrity": "sha512-44dJe3mR7SXzTd1f+3fbeuNHISXPiyp0SArnsQWUocIpX5XWQHrW7GL45I2lsPQo4ahC0vKdfZth6NNISf/+ag==", "dependencies": { - "@floating-ui/dom": "^1.6.10", - "@tylertech/forge-core": "^3.0.1", + "@floating-ui/dom": "^1.6.12", + "@tylertech/forge-core": "^3.1.0", "@tylertech/tyler-icons": "^1.12.0", "imask": "^6.6.1", - "tslib": "^2.7.0" + "lit": "^3.2.1", + "tslib": "^2.8.1" } }, "node_modules/@tylertech/forge-core": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@tylertech/forge-core/-/forge-core-3.0.1.tgz", - "integrity": "sha512-rlbN/l1LvwklEJD8mOVCVCjr/5HJqwMV4HO5PyJB/83lFx1o2kfOVrbNTFZM9P2Cddi8MTPuRG5lYkRUM0l9SQ==", - "license": "Apache-2.0", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@tylertech/forge-core/-/forge-core-3.1.0.tgz", + "integrity": "sha512-Jl/N4ClOUq2LgdyUODxGKe/hLFbs0DO865hp4nwt4BVteYQdIeVAC4+fEj/k2RQl2M5x3IID78hJZEtc9mgsEA==", "dependencies": { "tslib": "^2.6.3" } @@ -6089,6 +6101,11 @@ "@types/node": "*" } }, + "node_modules/@types/trusted-types": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz", + "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==" + }, "node_modules/@types/wrap-ansi": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/@types/wrap-ansi/-/wrap-ansi-3.0.0.tgz", @@ -13313,6 +13330,34 @@ "url": "https://github.com/chalk/wrap-ansi?sponsor=1" } }, + "node_modules/lit": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/lit/-/lit-3.2.1.tgz", + "integrity": "sha512-1BBa1E/z0O9ye5fZprPtdqnc0BFzxIxTTOO/tQFmyC/hj1O3jL4TfmLBw0WEwjAokdLwpclkvGgDJwTIh0/22w==", + "dependencies": { + "@lit/reactive-element": "^2.0.4", + "lit-element": "^4.1.0", + "lit-html": "^3.2.0" + } + }, + "node_modules/lit-element": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.1.1.tgz", + "integrity": "sha512-HO9Tkkh34QkTeUmEdNYhMT8hzLid7YlMlATSi1q4q17HE5d9mrrEHJ/o8O2D0cMi182zK1F3v7x0PWFjrhXFew==", + "dependencies": { + "@lit-labs/ssr-dom-shim": "^1.2.0", + "@lit/reactive-element": "^2.0.4", + "lit-html": "^3.2.0" + } + }, + "node_modules/lit-html": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.2.1.tgz", + "integrity": "sha512-qI/3lziaPMSKsrwlxH/xMgikhQ0EGOX2ICU73Bi/YHFvz2j/yMCIrw4+puF2IpQ4+upd3EWbvnHM9+PnJn48YA==", + "dependencies": { + "@types/trusted-types": "^2.0.2" + } + }, "node_modules/lmdb": { "version": "3.0.13", "resolved": "https://registry.npmjs.org/lmdb/-/lmdb-3.0.13.tgz", diff --git a/package.json b/package.json index 7e86b6c..c09b294 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,7 @@ "@angular/platform-browser": "^18.2.12", "@angular/platform-browser-dynamic": "^18.2.12", "@angular/router": "^18.2.12", - "@tylertech/forge": "^3.3.5", + "@tylertech/forge": "^3.5.0", "@tylertech/tyler-icons": "^1.18.1", "rxjs": "^7.8.1", "tslib": "^2.8.1", diff --git a/projects/forge-angular/package.json b/projects/forge-angular/package.json index 91b0209..d7ed63d 100644 --- a/projects/forge-angular/package.json +++ b/projects/forge-angular/package.json @@ -8,7 +8,7 @@ "peerDependencies": { "@angular/common": ">=18.0.0 < 20.0.0", "@angular/core": ">=18.0.0 < 20.0.0", - "@tylertech/forge": "^3.1.0" + "@tylertech/forge": "^3.5.0" }, "dependencies": { "tslib": "^2.6.3" diff --git a/projects/forge-angular/src/lib/button/button.component.ts b/projects/forge-angular/src/lib/button/button.component.ts index 04471f9..f5bb981 100644 --- a/projects/forge-angular/src/lib/button/button.component.ts +++ b/projects/forge-angular/src/lib/button/button.component.ts @@ -123,11 +123,6 @@ export class ButtonComponent { return this.nativeElement.dense; } - /** The form reference of the button if within a `
` element. */ - public get form(): ButtonComponentCustomElement['form'] { - return this.nativeElement.form; - } - /** Clicks the button. */ public click(...args: Parameters): ReturnType { return this.zone.runOutsideAngular(() => this.nativeElement.click(...args)); diff --git a/projects/forge-angular/src/lib/fab/floating-action-button.component.ts b/projects/forge-angular/src/lib/fab/floating-action-button.component.ts index 6dbeb40..42e8903 100644 --- a/projects/forge-angular/src/lib/fab/floating-action-button.component.ts +++ b/projects/forge-angular/src/lib/fab/floating-action-button.component.ts @@ -46,11 +46,6 @@ export class FloatingActionButtonComponent { return this.nativeElement.elevation; } - - public get form(): FloatingActionButtonComponentCustomElement['form'] { - return this.nativeElement.form; - } - /** The name of the button. */ @Input() public set name(value: FloatingActionButtonComponentCustomElement['name']) { diff --git a/projects/forge-angular/src/lib/forge.module.ts b/projects/forge-angular/src/lib/forge.module.ts index ae374e7..49b68e9 100644 --- a/projects/forge-angular/src/lib/forge.module.ts +++ b/projects/forge-angular/src/lib/forge.module.ts @@ -15,14 +15,14 @@ import { ForgeBannerModule } from './banner'; import { ForgeBottomSheetModule } from './bottom-sheet'; import { ForgeButtonModule } from './button'; import { ForgeButtonAreaModule } from './button-area'; -import { ForgeButtonToggleGroupModule } from './button-toggle-group'; import { ForgeButtonToggleModule } from './button-toggle'; +import { ForgeButtonToggleGroupModule } from './button-toggle-group'; import { ForgeCalendarModule } from './calendar'; import { ForgeCardModule } from './card'; import { ForgeCheckboxModule } from './checkbox'; +import { ForgeChipModule } from './chip'; import { ForgeChipFieldModule } from './chip-field'; import { ForgeChipSetModule } from './chip-set'; -import { ForgeChipModule } from './chip'; import { ForgeCircularProgressModule } from './circular-progress'; import { ForgeColorPickerModule } from './color-picker'; import { ForgeDatePickerModule } from './date-picker'; @@ -40,6 +40,7 @@ import { ForgeFocusIndicatorModule } from './focus-indicator'; import { ForgeIconModule } from './icon'; import { ForgeIconButtonModule } from './icon-button'; import { ForgeInlineMessageModule } from './inline-message'; +import { ForgeKeyModule } from './key/key.module'; import { ForgeKeyboardShortcutModule } from './keyboard-shortcut'; import { ForgeLabelModule } from './label'; import { ForgeLabelValueModule } from './label-value'; @@ -47,6 +48,7 @@ import { ForgeLinearProgressModule } from './linear-progress'; import { ForgeListModule } from './list'; import { ForgeListItemModule } from './list-item'; import { ForgeMenuModule } from './menu'; +import { ForgeMeterGroupModule } from './meter-group/meter-group.module'; import { ForgeMiniDrawerModule } from './mini-drawer'; import { ForgeModalDrawerModule } from './modal-drawer'; import { ForgeOpenIconModule } from './open-icon'; @@ -60,8 +62,8 @@ import { ForgeProfileCardModule } from './profile-card'; import { ForgeRadioModule } from './radio'; import { ForgeRadioGroupModule } from './radio-group'; import { ForgeScaffoldModule } from './scaffold'; -import { ForgeSelectDropdownModule } from './select-dropdown'; import { ForgeSelectModule } from './select'; +import { ForgeSelectDropdownModule } from './select-dropdown'; import { ForgeSkeletonModule } from './skeleton'; import { ForgeSkipLinkModule } from './skip-link/skip-link.module'; import { ForgeSliderModule } from './slider'; @@ -126,6 +128,7 @@ import { ForgeViewSwitcherModule } from './view-switcher'; ForgeIconModule, ForgeIconButtonModule, ForgeInlineMessageModule, + ForgeKeyModule, ForgeKeyboardShortcutModule, ForgeLabelModule, ForgeLabelValueModule, @@ -133,6 +136,7 @@ import { ForgeViewSwitcherModule } from './view-switcher'; ForgeListModule, ForgeListItemModule, ForgeMenuModule, + ForgeMeterGroupModule, ForgeMiniDrawerModule, ForgeModalDrawerModule, ForgeOpenIconModule, diff --git a/projects/forge-angular/src/lib/icon-button/icon-button.component.ts b/projects/forge-angular/src/lib/icon-button/icon-button.component.ts index cae4519..b967d69 100644 --- a/projects/forge-angular/src/lib/icon-button/icon-button.component.ts +++ b/projects/forge-angular/src/lib/icon-button/icon-button.component.ts @@ -145,11 +145,6 @@ export class IconButtonComponent { return this.nativeElement.value; } - /** The form reference of the button if within a `` element. */ - public get form(): IconButtonComponentCustomElement['form'] { - return this.nativeElement.form; - } - /** Clicks the button. */ public click(...args: Parameters): ReturnType { return this.zone.runOutsideAngular(() => this.nativeElement.click(...args)); diff --git a/projects/forge-angular/src/lib/key-item/index.ts b/projects/forge-angular/src/lib/key-item/index.ts new file mode 100644 index 0000000..21afcfe --- /dev/null +++ b/projects/forge-angular/src/lib/key-item/index.ts @@ -0,0 +1,2 @@ +export * from './key-item.component'; +export * from './key-item.module'; \ No newline at end of file diff --git a/projects/forge-angular/src/lib/key-item/key-item.component.ts b/projects/forge-angular/src/lib/key-item/key-item.component.ts new file mode 100644 index 0000000..d295d8e --- /dev/null +++ b/projects/forge-angular/src/lib/key-item/key-item.component.ts @@ -0,0 +1,35 @@ +// 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 } from '@angular/core'; +import { KeyItemComponent as KeyItemComponentCustomElement, defineKeyItemComponent } from '@tylertech/forge'; + +/** */ +@Component({ + selector: 'forge-key-item', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '' +}) +export class KeyItemComponent { + + /** The forge-key-item element. */ + public readonly nativeElement = this.elementRef.nativeElement; + + /** Whether the label and value dislay on one line. */ + @Input({ transform: booleanAttribute }) + public set inline(value: KeyItemComponentCustomElement['inline']) { + this.zone.runOutsideAngular(() => { + this.nativeElement.inline = value; + }); + } + public get inline(): KeyItemComponentCustomElement['inline'] { + return this.nativeElement.inline; + } + + constructor( + changeDetectorRef: ChangeDetectorRef, + protected elementRef: ElementRef, + protected zone: NgZone + ) { + defineKeyItemComponent(); + changeDetectorRef.detach(); + } +} diff --git a/projects/forge-angular/src/lib/key-item/key-item.module.ts b/projects/forge-angular/src/lib/key-item/key-item.module.ts new file mode 100644 index 0000000..3a2875b --- /dev/null +++ b/projects/forge-angular/src/lib/key-item/key-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 { defineKeyItemComponent } from '@tylertech/forge'; + +import { KeyItemComponent } from './key-item.component'; + +@NgModule({ + imports: [CommonModule], + declarations: [KeyItemComponent], + exports: [KeyItemComponent] +}) +export class ForgeKeyItemModule { + constructor() { + defineKeyItemComponent(); + } +} \ No newline at end of file diff --git a/projects/forge-angular/src/lib/key/index.ts b/projects/forge-angular/src/lib/key/index.ts new file mode 100644 index 0000000..00837b5 --- /dev/null +++ b/projects/forge-angular/src/lib/key/index.ts @@ -0,0 +1,2 @@ +export * from './key.component'; +export * from './key.module'; diff --git a/projects/forge-angular/src/lib/key/key.component.ts b/projects/forge-angular/src/lib/key/key.component.ts new file mode 100644 index 0000000..83047bf --- /dev/null +++ b/projects/forge-angular/src/lib/key/key.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 } from '@angular/core'; +import { KeyComponent as KeyComponentCustomElement, defineKeyComponent } from '@tylertech/forge'; + +/** */ +@Component({ + selector: 'forge-key', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '' +}) +export class KeyComponent { + + /** The forge-key element. */ + public readonly nativeElement = this.elementRef.nativeElement; + + constructor( + changeDetectorRef: ChangeDetectorRef, + protected elementRef: ElementRef, + protected zone: NgZone + ) { + defineKeyComponent(); + changeDetectorRef.detach(); + } +} diff --git a/projects/forge-angular/src/lib/key/key.module.ts b/projects/forge-angular/src/lib/key/key.module.ts new file mode 100644 index 0000000..489d64f --- /dev/null +++ b/projects/forge-angular/src/lib/key/key.module.ts @@ -0,0 +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 { defineKeyComponent } from '@tylertech/forge'; + +import { ForgeKeyItemModule } from '../key-item/key-item.module'; +import { KeyComponent } from './key.component'; + +@NgModule({ + imports: [CommonModule, ForgeKeyItemModule], + declarations: [KeyComponent], + exports: [KeyComponent, ForgeKeyItemModule] +}) +export class ForgeKeyModule { + constructor() { + defineKeyComponent(); + } +} \ No newline at end of file diff --git a/projects/forge-angular/src/lib/meter-group/index.ts b/projects/forge-angular/src/lib/meter-group/index.ts new file mode 100644 index 0000000..aa075d6 --- /dev/null +++ b/projects/forge-angular/src/lib/meter-group/index.ts @@ -0,0 +1,2 @@ +export * from './meter-group.component'; +export * from './meter-group.module'; \ No newline at end of file diff --git a/projects/forge-angular/src/lib/meter-group/meter-group.component.ts b/projects/forge-angular/src/lib/meter-group/meter-group.component.ts new file mode 100644 index 0000000..5b74a19 --- /dev/null +++ b/projects/forge-angular/src/lib/meter-group/meter-group.component.ts @@ -0,0 +1,101 @@ +// 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 } from '@angular/core'; +import { MeterGroupComponent as MeterGroupComponentCustomElement, defineMeterGroupComponent } from '@tylertech/forge'; + +/** */ +@Component({ + selector: 'forge-meter-group', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '' +}) +export class MeterGroupComponent { + + /** The forge-meter-group element. */ + public readonly nativeElement = this.elementRef.nativeElement; + + /** The minimum value of each meter in the group. */ + @Input({ transform: numberAttribute }) + public set min(value: MeterGroupComponentCustomElement['min']) { + this.zone.runOutsideAngular(() => { + this.nativeElement.min = value; + }); + } + public get min(): MeterGroupComponentCustomElement['min'] { + return this.nativeElement.min; + } + + /** The maximum value of each meter in the group. */ + @Input({ transform: numberAttribute }) + public set max(value: MeterGroupComponentCustomElement['max']) { + this.zone.runOutsideAngular(() => { + this.nativeElement.max = value; + }); + } + public get max(): MeterGroupComponentCustomElement['max'] { + return this.nativeElement.max; + } + + /** Whether to display tickmarks. */ + @Input({ transform: booleanAttribute }) + public set tickmarks(value: MeterGroupComponentCustomElement['tickmarks']) { + this.zone.runOutsideAngular(() => { + this.nativeElement.tickmarks = value; + }); + } + public get tickmarks(): MeterGroupComponentCustomElement['tickmarks'] { + return this.nativeElement.tickmarks; + } + + /** Whether the meter is oriented horizontally or vertically. */ + @Input() + public set direction(value: MeterGroupComponentCustomElement['direction']) { + this.zone.runOutsideAngular(() => { + this.nativeElement.direction = value; + }); + } + public get direction(): MeterGroupComponentCustomElement['direction'] { + return this.nativeElement.direction; + } + + /** The density of the meter group. */ + @Input() + public set density(value: MeterGroupComponentCustomElement['density']) { + this.zone.runOutsideAngular(() => { + this.nativeElement.density = value; + }); + } + public get density(): MeterGroupComponentCustomElement['density'] { + return this.nativeElement.density; + } + + /** The shape of the meter group. */ + @Input() + public set shape(value: MeterGroupComponentCustomElement['shape']) { + this.zone.runOutsideAngular(() => { + this.nativeElement.shape = value; + }); + } + public get shape(): MeterGroupComponentCustomElement['shape'] { + return this.nativeElement.shape; + } + + /** The shape of each meter in the group. */ + @Input() + public set innerShape(value: MeterGroupComponentCustomElement['innerShape']) { + this.zone.runOutsideAngular(() => { + this.nativeElement.innerShape = value; + }); + } + public get innerShape(): MeterGroupComponentCustomElement['innerShape'] { + return this.nativeElement.innerShape; + } + + constructor( + changeDetectorRef: ChangeDetectorRef, + protected elementRef: ElementRef, + protected zone: NgZone + ) { + defineMeterGroupComponent(); + changeDetectorRef.detach(); + } +} diff --git a/projects/forge-angular/src/lib/meter-group/meter-group.module.ts b/projects/forge-angular/src/lib/meter-group/meter-group.module.ts new file mode 100644 index 0000000..b111bb5 --- /dev/null +++ b/projects/forge-angular/src/lib/meter-group/meter-group.module.ts @@ -0,0 +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 { defineMeterGroupComponent } from '@tylertech/forge'; + +import { ForgeMeterModule } from '../meter/meter.module'; +import { MeterGroupComponent } from './meter-group.component'; + +@NgModule({ + imports: [CommonModule, ForgeMeterModule], + declarations: [MeterGroupComponent], + exports: [MeterGroupComponent, ForgeMeterModule] +}) +export class ForgeMeterGroupModule { + constructor() { + defineMeterGroupComponent(); + } +} \ No newline at end of file diff --git a/projects/forge-angular/src/lib/meter/index.ts b/projects/forge-angular/src/lib/meter/index.ts new file mode 100644 index 0000000..218db79 --- /dev/null +++ b/projects/forge-angular/src/lib/meter/index.ts @@ -0,0 +1,2 @@ +export * from './meter.component'; +export * from './meter.module'; diff --git a/projects/forge-angular/src/lib/meter/meter.component.ts b/projects/forge-angular/src/lib/meter/meter.component.ts new file mode 100644 index 0000000..ea752fd --- /dev/null +++ b/projects/forge-angular/src/lib/meter/meter.component.ts @@ -0,0 +1,186 @@ +// 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 } from '@angular/core'; +import { MeterComponent as MeterComponentCustomElement, defineMeterComponent } from '@tylertech/forge'; + +/** */ +@Component({ + selector: 'forge-meter', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '' +}) +export class MeterComponent { + + /** The forge-meter element. */ + public readonly nativeElement = this.elementRef.nativeElement; + + /** The current value of the meter. */ + @Input({ transform: numberAttribute }) + public set value(value: MeterComponentCustomElement['value']) { + this.zone.runOutsideAngular(() => { + this.nativeElement.value = value; + }); + } + public get value(): MeterComponentCustomElement['value'] { + return this.nativeElement.value; + } + + /** The minimum value of the meter. */ + @Input({ transform: numberAttribute }) + public set min(value: MeterComponentCustomElement['min']) { + this.zone.runOutsideAngular(() => { + this.nativeElement.min = value; + }); + } + public get min(): MeterComponentCustomElement['min'] { + return this.nativeElement.min; + } + + /** The maximum value of the meter. */ + @Input({ transform: numberAttribute }) + public set max(value: MeterComponentCustomElement['max']) { + this.zone.runOutsideAngular(() => { + this.nativeElement.max = value; + }); + } + public get max(): MeterComponentCustomElement['max'] { + return this.nativeElement.max; + } + + /** The low value threshold. */ + @Input() + public set low(value: MeterComponentCustomElement['low']) { + this.zone.runOutsideAngular(() => { + this.nativeElement.low = value; + }); + } + public get low(): MeterComponentCustomElement['low'] { + return this.nativeElement.low; + } + + /** The high value threshold. */ + @Input() + public set high(value: MeterComponentCustomElement['high']) { + this.zone.runOutsideAngular(() => { + this.nativeElement.high = value; + }); + } + public get high(): MeterComponentCustomElement['high'] { + return this.nativeElement.high; + } + + /** Indicates the region of the optimum value. */ + @Input() + public set optimum(value: MeterComponentCustomElement['optimum']) { + this.zone.runOutsideAngular(() => { + this.nativeElement.optimum = value; + }); + } + public get optimum(): MeterComponentCustomElement['optimum'] { + return this.nativeElement.optimum; + } + + /** Whether to display tickmarks. */ + @Input({ transform: booleanAttribute }) + public set tickmarks(value: MeterComponentCustomElement['tickmarks']) { + this.zone.runOutsideAngular(() => { + this.nativeElement.tickmarks = value; + }); + } + public get tickmarks(): MeterComponentCustomElement['tickmarks'] { + return this.nativeElement.tickmarks; + } + + /** + * Whether the current value is displayed as a percentage or raw value. When set to `'manual'` + * the value text is not shown automatically but can still be set manually via the value slot. + */ + @Input() + public set valueMode(value: MeterComponentCustomElement['valueMode']) { + this.zone.runOutsideAngular(() => { + this.nativeElement.valueMode = value; + }); + } + public get valueMode(): MeterComponentCustomElement['valueMode'] { + return this.nativeElement.valueMode; + } + + /** Whether the meter is oriented horizontally or vertically. */ + @Input() + public set direction(value: MeterComponentCustomElement['direction']) { + this.zone.runOutsideAngular(() => { + this.nativeElement.direction = value; + }); + } + public get direction(): MeterComponentCustomElement['direction'] { + return this.nativeElement.direction; + } + + /** The shape of the meter. */ + @Input() + public set shape(value: MeterComponentCustomElement['shape']) { + this.zone.runOutsideAngular(() => { + this.nativeElement.shape = value; + }); + } + public get shape(): MeterComponentCustomElement['shape'] { + return this.nativeElement.shape; + } + + /** The shape of the bar. */ + @Input() + public set innerShape(value: MeterComponentCustomElement['innerShape']) { + this.zone.runOutsideAngular(() => { + this.nativeElement.innerShape = value; + }); + } + public get innerShape(): MeterComponentCustomElement['innerShape'] { + return this.nativeElement.innerShape; + } + + /** The density of the meter. */ + @Input() + public set density(value: MeterComponentCustomElement['density']) { + this.zone.runOutsideAngular(() => { + this.nativeElement.density = value; + }); + } + public get density(): MeterComponentCustomElement['density'] { + return this.nativeElement.density; + } + + /** The theme of the meter. */ + @Input() + public set theme(value: MeterComponentCustomElement['theme']) { + this.zone.runOutsideAngular(() => { + this.nativeElement.theme = value; + }); + } + public get theme(): MeterComponentCustomElement['theme'] { + return this.nativeElement.theme; + } + + /** Whether the theme is muted. */ + @Input({ transform: booleanAttribute }) + public set muted(value: MeterComponentCustomElement['muted']) { + this.zone.runOutsideAngular(() => { + this.nativeElement.muted = value; + }); + } + public get muted(): MeterComponentCustomElement['muted'] { + return this.nativeElement.muted; + } + + /** Gets the percentage of the meter that's filled. */ + public get percentage(): MeterComponentCustomElement['percentage'] { + return this.nativeElement.percentage; + } + + constructor( + changeDetectorRef: ChangeDetectorRef, + protected elementRef: ElementRef, + protected zone: NgZone + ) { + defineMeterComponent(); + changeDetectorRef.detach(); + } +} diff --git a/projects/forge-angular/src/lib/meter/meter.module.ts b/projects/forge-angular/src/lib/meter/meter.module.ts new file mode 100644 index 0000000..c32669a --- /dev/null +++ b/projects/forge-angular/src/lib/meter/meter.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 { defineMeterComponent } from '@tylertech/forge'; + +import { MeterComponent } from './meter.component'; + +@NgModule({ + imports: [CommonModule], + declarations: [MeterComponent], + exports: [MeterComponent] +}) +export class ForgeMeterModule { + constructor() { + defineMeterComponent(); + } +} \ No newline at end of file diff --git a/projects/forge-angular/src/lib/slider/slider.component.ts b/projects/forge-angular/src/lib/slider/slider.component.ts index db36319..55312ea 100644 --- a/projects/forge-angular/src/lib/slider/slider.component.ts +++ b/projects/forge-angular/src/lib/slider/slider.component.ts @@ -13,16 +13,6 @@ export class SliderComponent { /** The forge-slider element. */ public readonly nativeElement = this.elementRef.nativeElement; - - public get form(): SliderComponentCustomElement['form'] { - return this.nativeElement.form; - } - - - public get labels(): SliderComponentCustomElement['labels'] { - return this.nativeElement.labels; - } - /** The form control name. */ @Input() public set name(value: SliderComponentCustomElement['name']) { 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 fa78e0f..e07a5e2 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 @@ -68,7 +68,7 @@ export class TabBarComponent { return this.nativeElement.stacked; } - /** Controls whether the tabs are styled as secondary tab navigation. */ + /** Deprecated. Controls whether the tabs are styled as secondary tab navigation. */ @Input({ transform: booleanAttribute }) public set secondary(value: TabBarComponentCustomElement['secondary']) { this.zone.runOutsideAngular(() => { diff --git a/projects/forge-angular/src/lib/tab/tab.component.ts b/projects/forge-angular/src/lib/tab/tab.component.ts index db7014d..646a0a7 100644 --- a/projects/forge-angular/src/lib/tab/tab.component.ts +++ b/projects/forge-angular/src/lib/tab/tab.component.ts @@ -79,6 +79,11 @@ export class TabComponent { return this.nativeElement.inverted; } + + public focus(...args: Parameters): ReturnType { + return this.zone.runOutsideAngular(() => this.nativeElement.focus(...args)); + } + constructor( changeDetectorRef: ChangeDetectorRef, protected elementRef: ElementRef, diff --git a/projects/forge-angular/src/public-api.ts b/projects/forge-angular/src/public-api.ts index 673d44f..2365639 100644 --- a/projects/forge-angular/src/public-api.ts +++ b/projects/forge-angular/src/public-api.ts @@ -42,13 +42,17 @@ export * from './lib/focus-indicator'; export * from './lib/icon'; export * from './lib/icon-button'; export * from './lib/inline-message'; +export * from './lib/key'; export * from './lib/keyboard-shortcut'; +export * from './lib/key-item'; export * from './lib/label'; export * from './lib/label-value'; export * from './lib/linear-progress'; export * from './lib/list'; export * from './lib/list-item'; export * from './lib/menu'; +export * from './lib/meter'; +export * from './lib/meter-group'; export * from './lib/mini-drawer'; export * from './lib/modal-drawer'; export * from './lib/open-icon';