diff --git a/.github/workflows/01-build-stencil-targets.yml b/.github/workflows/01-build-stencil-targets.yml
index bffbcad98b..893def2025 100644
--- a/.github/workflows/01-build-stencil-targets.yml
+++ b/.github/workflows/01-build-stencil-targets.yml
@@ -32,6 +32,7 @@ jobs:
run: |
if echo ${{ matrix.targets }} | grep -c "ngx-elements"
then
+ cat ./packages/db-ui-elements-angular/dist/lib/package.json
echo "framework=angular" >> $GITHUB_OUTPUT
elif echo ${{ matrix.targets }} | grep -c "react-elements"
then
diff --git a/packages/db-ui-elements-angular/projects/lib/src/config.testing.ts b/packages/db-ui-elements-angular/projects/lib/src/config.testing.ts
deleted file mode 100644
index 5138c77192..0000000000
--- a/packages/db-ui-elements-angular/projects/lib/src/config.testing.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-type CompilerOptions = Partial<{
- providers: any[];
- useJit: boolean;
- preserveWhitespaces: boolean;
-}>;
-export type ConfigureFn = (testBed: typeof TestBed) => void;
-
-export const configureTests = (
- configure: ConfigureFn,
- compilerOptions: CompilerOptions = {}
-) => {
- const compilerConfig: CompilerOptions = {
- preserveWhitespaces: false,
- ...compilerOptions
- };
-
- const configuredTestBed = TestBed.configureCompiler(compilerConfig);
-
- configure(configuredTestBed);
-
- return configuredTestBed.compileComponents().then(() => configuredTestBed);
-};
diff --git a/packages/db-ui-elements-angular/projects/lib/src/db-ui-elements-module.ts b/packages/db-ui-elements-angular/projects/lib/src/db-ui-elements-module.ts
deleted file mode 100644
index 841552b7aa..0000000000
--- a/packages/db-ui-elements-angular/projects/lib/src/db-ui-elements-module.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { defineCustomElements } from '@db-ui/elements/loader';
-
-import { BooleanValueAccessor } from './boolean-value-accessor';
-import {
- DbBrand,
- DbBreadcrumb,
- DbButton,
- DbChip,
- DbCheckbox,
- DbDropdown,
- DbAccordion,
- DbFooter,
- DbHeader,
- DbIcon,
- DbImage,
- DbInput,
- DbLink,
- DbLinklist,
- DbLogo,
- DbMeta,
- DbMetanavigation,
- DbOverflowMenu,
- DbPage,
- DbProgress,
- DbRadio,
- DbSelect,
- DbSidenavi,
- DbTabBar,
- DbTable,
- DbTag,
- DbTextarea,
- DbToggle,
- DbPagination,
- DbCards,
- DbCard,
- DbTab,
- DbHeadline,
- DbLanguageSwitcher,
- DbMainnavigation,
- DbNotification,
- DbNotifications
-} from './components';
-import { SelectValueAccessor } from './select-value-accessor';
-import { TextValueAccessor } from './text-value-accessor';
-
-defineCustomElements(window);
-
-const DECLARATIONS = [
- // proxies
- DbBrand,
- DbBreadcrumb,
- DbButton,
- DbCard,
- DbCards,
- DbChip,
- DbCheckbox,
- DbDropdown,
- DbAccordion,
- DbFooter,
- DbHeader,
- DbHeadline,
- DbIcon,
- DbImage,
- DbInput,
- DbLanguageSwitcher,
- DbLink,
- DbLinklist,
- DbLogo,
- DbMainnavigation,
- DbMeta,
- DbMetanavigation,
- DbNotification,
- DbNotifications,
- DbOverflowMenu,
- DbPage,
- DbPagination,
- DbProgress,
- DbRadio,
- DbSelect,
- DbSidenavi,
- DbTab,
- DbTabBar,
- DbTable,
- DbTag,
- DbTextarea,
- DbToggle,
-
- // Value Accessors
- BooleanValueAccessor,
- SelectValueAccessor,
- TextValueAccessor
-];
-
-@NgModule({
- declarations: DECLARATIONS,
- exports: DECLARATIONS,
- imports: [],
- providers: [],
- schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class DBUIElementsModule {}
diff --git a/packages/db-ui-elements-angular/projects/lib/src/index.ts b/packages/db-ui-elements-angular/projects/lib/src/index.ts
index 85ce3d2958..2db7acc714 100644
--- a/packages/db-ui-elements-angular/projects/lib/src/index.ts
+++ b/packages/db-ui-elements-angular/projects/lib/src/index.ts
@@ -10,6 +10,3 @@ export * from './text-value-accessor';
export * from './select-value-accessor';
export * from './value-accessor';
export * from './index';
-
-// PACKAGE MODULE
-export { DBUIElementsModule } from './db-ui-elements-module';
diff --git a/packages/db-ui-elements-angular/projects/lib/src/jestGlobalMocks.ts b/packages/db-ui-elements-angular/projects/lib/src/jestGlobalMocks.ts
deleted file mode 100644
index 487896f634..0000000000
--- a/packages/db-ui-elements-angular/projects/lib/src/jestGlobalMocks.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-Object.defineProperty(window, 'CSS', { value: null });
-Object.defineProperty(document, 'doctype', {
- value: '<!DOCTYPE html>'
-});
-Object.defineProperty(window, 'getComputedStyle', {
- value: () => {
- return {
- display: 'none',
- appearance: ['-webkit-appearance']
- };
- }
-});
-/**
- * ISSUE: https://github.com/angular/material2/issues/7101
- * Workaround for JSDOM missing transform property
- */
-Object.defineProperty(document.body.style, 'transform', {
- value: () => {
- return {
- enumerable: true,
- configurable: true
- };
- }
-});
-
-window.matchMedia =
- window.matchMedia ||
- (function () {
- return {
- matches: false,
- addListener() {},
- removeListener() {}
- };
- } as any);
-
-(window as any).CSSStyleSheet = class {
- constructor() {
- throw Error();
- }
-} as any;
diff --git a/packages/db-ui-elements-angular/projects/lib/src/public_api.ts b/packages/db-ui-elements-angular/projects/lib/src/public_api.ts
deleted file mode 100644
index 8dbcfd7c99..0000000000
--- a/packages/db-ui-elements-angular/projects/lib/src/public_api.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-/*
- * Public API Surface of lib
- */
-
-export * from './boolean-value-accessor';
-export * from './text-value-accessor';
-export * from './select-value-accessor';
-export * from './value-accessor';
-export * from './index';
diff --git a/packages/db-ui-elements-stencil/src/components/db-mainnavigation/db-mainnavigation.tsx b/packages/db-ui-elements-stencil/src/components/db-mainnavigation/db-mainnavigation.tsx
index 6aeb495a8c..ec5630c8cd 100644
--- a/packages/db-ui-elements-stencil/src/components/db-mainnavigation/db-mainnavigation.tsx
+++ b/packages/db-ui-elements-stencil/src/components/db-mainnavigation/db-mainnavigation.tsx
@@ -99,6 +99,33 @@ const addAreaPopupsRecursive = (children: Element[]) => {
styleUrl: 'db-mainnavigation.scss'
})
export class DbMainnavigation {
+ get onlyLinks(): DbMainnavigationItemType[] {
+ return this._onlyLinks;
+ }
+
+ set onlyLinks(value: DbMainnavigationItemType[]) {
+ this._onlyLinks = value;
+ }
+ get hasItemsWrapper(): boolean {
+ return this._hasItemsWrapper;
+ }
+
+ set hasItemsWrapper(value: boolean) {
+ this._hasItemsWrapper = value;
+ }
+ get compData(): DbMainnavigationDataType[] {
+ return this._compData;
+ }
+
+ set compData(value: DbMainnavigationDataType[]) {
+ this._compData = value;
+ }
+ set children(value: Element[]) {
+ this._children = value;
+ }
+ get children(): Element[] {
+ return this._children;
+ }
/**
* The site-name attribute can be set to have the site name for small screens.
*/
@@ -109,24 +136,26 @@ export class DbMainnavigation {
*/
@Prop({ reflect: true }) data?: string;
- private hasItemsWrapper: boolean;
+ private _hasItemsWrapper: boolean;
- private compData: DbMainnavigationDataType[];
+ private _compData: DbMainnavigationDataType[];
- private children: Element[];
- private onlyLinks: DbMainnavigationItemType[];
+ private _children: Element[];
+ private _onlyLinks: DbMainnavigationItemType[];
@Element() host: HTMLDbMainnavigationElement;
componentWillLoad() {
if (this.data) {
- this.compData = parseData(this.data);
- } else {
- this.children = Array.from(this.host.children);
- this.onlyLinks = setupOnlyDbLinkNavigation(this.children);
- if (this.children.find((child) => child.tagName.toLowerCase() === 'li')) {
- this.hasItemsWrapper = true;
- addAreaPopupsRecursive(this.children);
+ this._compData = parseData(this.data);
+ } else if (this.host) {
+ this._children = Array.from(this.host.children);
+ this._onlyLinks = setupOnlyDbLinkNavigation(this._children);
+ if (
+ this._children.find((child) => child.tagName.toLowerCase() === 'li')
+ ) {
+ this._hasItemsWrapper = true;
+ addAreaPopupsRecursive(this._children);
} else {
this.host.innerHTML = '';
}
@@ -144,19 +173,19 @@ export class DbMainnavigation {
>
{this.siteName}
</label>
- {this.compData && <ul innerHTML={getCompDataHtml(this.compData)} />}
- {!this.compData && (
+ {this._compData && <ul innerHTML={getCompDataHtml(this._compData)} />}
+ {!this._compData && (
<ul>
- {this.onlyLinks && getJsxLinks(this.onlyLinks)}
- {!this.hasItemsWrapper &&
- !this.onlyLinks &&
- this.children.map((child, index) => (
+ {this._onlyLinks && getJsxLinks(this._onlyLinks)}
+ {!this._hasItemsWrapper &&
+ !this._onlyLinks &&
+ this._children?.map((child, index) => (
<li
key={`cmp-mainnavigation-item-${index}`}
innerHTML={child.outerHTML}
/>
))}
- {this.hasItemsWrapper && <slot />}
+ {this._hasItemsWrapper && <slot />}
</ul>
)}
</nav>
diff --git a/packages/db-ui-elements-stencil/src/components/db-sidenavi/db-sidenavi.tsx b/packages/db-ui-elements-stencil/src/components/db-sidenavi/db-sidenavi.tsx
index 3a1965e5ef..a6f6fca4d6 100644
--- a/packages/db-ui-elements-stencil/src/components/db-sidenavi/db-sidenavi.tsx
+++ b/packages/db-ui-elements-stencil/src/components/db-sidenavi/db-sidenavi.tsx
@@ -48,7 +48,7 @@ export class DbSidenavi {
this.compData = parseData(this.data);
} else {
addIconVariantToAllDbLinksRecursive(this.host, '32-outline');
- this._children = Array.from(this.host.children);
+ this._children = Array.from(this.host?.children);
if (this.children.find((child) => child.tagName.toLowerCase() === 'li')) {
this.hasItemsWrapper = true;
} else {
@@ -64,7 +64,7 @@ export class DbSidenavi {
{!this.compData && (
<ol>
{!this.hasItemsWrapper &&
- this._children.map((child, index) => (
+ this._children?.map((child, index) => (
<li
key={`sidenavi-item-${index}`}
innerHTML={child.outerHTML}
diff --git a/packages/db-ui-elements-stencil/src/components/db-table/db-table.tsx b/packages/db-ui-elements-stencil/src/components/db-table/db-table.tsx
index f009edd10f..245b8a6040 100644
--- a/packages/db-ui-elements-stencil/src/components/db-table/db-table.tsx
+++ b/packages/db-ui-elements-stencil/src/components/db-table/db-table.tsx
@@ -156,7 +156,7 @@ export class DbTable {
}
private isRowData(tableData) {
- return !!Array.isArray(tableData.rows);
+ return !!Array.isArray(tableData?.rows);
}
render() {
diff --git a/packages/db-ui-elements-stencil/stencil.config.ts b/packages/db-ui-elements-stencil/stencil.config.ts
index e7161374c6..5a7a1f61ce 100644
--- a/packages/db-ui-elements-stencil/stencil.config.ts
+++ b/packages/db-ui-elements-stencil/stencil.config.ts
@@ -77,11 +77,16 @@ export const config: Config = {
taskQueue: 'async',
hashFileNames: isNotWatching(),
outputTargets: [
+ {
+ type: 'dist-custom-elements',
+ customElementsExportBehavior: 'single-export-module'
+ },
angularOutputTarget({
- componentCorePackage: '@db-ui/elements',
+ componentCorePackage: '@db-ui/elements/dist',
directivesProxyFile:
'../db-ui-elements-angular/projects/lib/src/components.ts',
- valueAccessorConfigs: angularValueAccessorBindings
+ valueAccessorConfigs: angularValueAccessorBindings,
+ outputType: 'standalone'
}),
reactOutputTarget({
componentCorePackage: '@db-ui/elements',
diff --git a/showcase/angular-active-showcase/src/app/app.component.ts b/showcase/angular-active-showcase/src/app/app.component.ts
index 60bec4b02a..b6157e20e2 100644
--- a/showcase/angular-active-showcase/src/app/app.component.ts
+++ b/showcase/angular-active-showcase/src/app/app.component.ts
@@ -5,7 +5,8 @@ import { isAreaCurrent, NAVIGATION_ITEMS } from './utils/navigation-item';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
+ styleUrls: ['./app.component.css'],
+ standalone: true
})
export class AppComponent implements OnInit {
title = 'angular-active-showcase';
diff --git a/showcase/angular-active-showcase/src/app/app.module.ts b/showcase/angular-active-showcase/src/app/app.module.ts
index 2eae94ad18..3c1c0a580a 100644
--- a/showcase/angular-active-showcase/src/app/app.module.ts
+++ b/showcase/angular-active-showcase/src/app/app.module.ts
@@ -10,7 +10,7 @@ import { OtherElementsComponent } from './components/other-elements/other-elemen
import { TabBarComponent } from './components/tab-bar/tab-bar.component';
import { TablesComponent } from './components/tables/tables.component';
import { AppRoutingModule } from './app.routing.module';
-import { DBUIElementsModule } from '../../../../packages/db-ui-elements-angular/projects/lib/src';
+import { DbButton } from '../../../../packages/db-ui-elements-angular/projects/lib/src';
@NgModule({
declarations: [
@@ -27,7 +27,7 @@ import { DBUIElementsModule } from '../../../../packages/db-ui-elements-angular/
ReactiveFormsModule,
FormsModule,
AppRoutingModule,
- DBUIElementsModule
+ DbButton
],
providers: [],
bootstrap: [AppComponent]
diff --git a/showcase/angular-lts-showcase/angular.json b/showcase/angular-lts-showcase/angular.json
index 2bbd71b7d7..a792619dd5 100644
--- a/showcase/angular-lts-showcase/angular.json
+++ b/showcase/angular-lts-showcase/angular.json
@@ -3,97 +3,83 @@
"version": 1,
"newProjectRoot": "projects",
"projects": {
- "angular-lts-showcase": {
+ "angular-showcase": {
"projectType": "application",
- "schematics": {},
+ "schematics": {
+ "@schematics/angular:application": {
+ "strict": true
+ }
+ },
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
- "builder": "@angular-devkit/build-angular:browser",
+ "builder": "@angular-devkit/build-angular:application",
"options": {
- "outputPath": "dist/angular-lts-showcase",
+ "deleteOutputPath": false,
+ "outputPath": {
+ "browser": "angular-lts-showcase",
+ "base": ".dist/angular-lts-showcase"
+ },
"index": "src/index.html",
- "main": "src/main.ts",
"polyfills": ["zone.js"],
"tsConfig": "tsconfig.app.json",
- "aot": true,
- "assets": ["src/favicon.ico", "src/assets"],
+ "assets": ["src/assets"],
"styles": ["src/styles.css"],
- "scripts": []
+ "scripts": [],
+ "preserveSymlinks": true,
+ "browser": "src/main.ts",
+ "extractLicenses": false
},
"configurations": {
"production": {
- "fileReplacements": [
- {
- "replace": "src/environments/environment.ts",
- "with": "src/environments/environment.prod.ts"
- }
- ],
- "optimization": true,
- "outputHashing": "all",
- "sourceMap": false,
- "namedChunks": false,
- "extractLicenses": true,
- "vendorChunk": false,
- "buildOptimizer": true,
"budgets": [
{
"type": "initial",
- "maximumWarning": "2mb",
+ "maximumWarning": "500kb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
- "maximumWarning": "6kb",
- "maximumError": "10kb"
+ "maximumWarning": "10kb",
+ "maximumError": "20kb"
}
- ]
+ ],
+ "outputHashing": "all"
+ },
+ "development": {
+ "optimization": false,
+ "extractLicenses": false,
+ "sourceMap": true,
+ "namedChunks": true,
+ "outputHashing": "media"
}
- }
+ },
+ "defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
- "options": {
- "buildTarget": "angular-lts-showcase:build"
- },
"configurations": {
"production": {
- "buildTarget": "angular-lts-showcase:build:production"
+ "buildTarget": "angular-showcase:build:production"
+ },
+ "development": {
+ "buildTarget": "angular-showcase:build:development"
}
- }
+ },
+ "defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
- "buildTarget": "angular-lts-showcase:build"
- }
- },
- "lint": {
- "builder": "@angular-devkit/build-angular:tslint",
- "options": {
- "tsConfig": [
- "tsconfig.app.json",
- "tsconfig.spec.json",
- "e2e/tsconfig.json"
- ],
- "exclude": ["**/node_modules/**"]
- }
- },
- "e2e": {
- "builder": "@angular-devkit/build-angular:protractor",
- "options": {
- "protractorConfig": "e2e/protractor.conf.js",
- "devServerTarget": "angular-lts-showcase:serve"
- },
- "configurations": {
- "production": {
- "devServerTarget": "angular-lts-showcase:serve:production"
- }
+ "buildTarget": "angular-showcase:build"
}
}
}
}
+ },
+ "cli": {
+ "analytics": false
}
}
diff --git a/showcase/angular-lts-showcase/src/app/app.component.html b/showcase/angular-lts-showcase/src/app/app.component.html
index 8fdb1f8972..9767390ccd 100644
--- a/showcase/angular-lts-showcase/src/app/app.component.html
+++ b/showcase/angular-lts-showcase/src/app/app.component.html
@@ -6,12 +6,11 @@
<db-mainnavigation>
<db-link href="/" current="page">
Pages
- <db-link
- *ngFor="let item of navigationItems; index as i"
- [attr.current]="isAria(i)"
- >
- <a [routerLink]="item.link">{{ item.label }}</a>
- </db-link>
+ @for (item of navigationItems; track item; let i = $index) {
+ <db-link [attr.current]="isAria(i)">
+ <a [routerLink]="item.link">{{ item.label }}</a>
+ </db-link>
+ }
</db-link>
</db-mainnavigation>
<div></div>
diff --git a/showcase/angular-lts-showcase/src/app/app.component.ts b/showcase/angular-lts-showcase/src/app/app.component.ts
index d808d94e3a..3c5a6ddb79 100644
--- a/showcase/angular-lts-showcase/src/app/app.component.ts
+++ b/showcase/angular-lts-showcase/src/app/app.component.ts
@@ -1,22 +1,50 @@
import { Component, OnInit } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { isAreaCurrent, NAVIGATION_ITEMS } from './utils/navigation-item';
+import {
+ DbButton,
+ DbCheckbox,
+ DbPage,
+ DbLink,
+ DbHeader,
+ DbMainnavigation,
+ DbFooter,
+ DbBrand
+} from '../../../../packages/db-ui-elements-angular/projects/lib/src';
+import { RouterLink, RouterOutlet } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
+ styleUrls: ['./app.component.css'],
+ standalone: true,
+
+ imports: [
+ ReactiveFormsModule,
+ FormsModule,
+ DbButton,
+ DbCheckbox,
+ DbPage,
+ DbLink,
+ DbHeader,
+ DbMainnavigation,
+ DbFooter,
+ DbBrand,
+ RouterOutlet,
+ RouterLink
+ ]
})
export class AppComponent implements OnInit {
title = 'angular-lts-showcase';
navigationItems = NAVIGATION_ITEMS;
isAria = isAreaCurrent;
- input: string;
- checkbox: boolean;
- radio: string;
- select: string;
- textarea: string;
+ input: string = '';
+ checkbox: boolean | null = false;
+ radio: string = '';
+ select: string | null = '';
+ textarea: string | null = '';
+ toggle: boolean = false;
checkboxControl = new FormControl<boolean>(false, { nonNullable: false });
radioControl = new FormControl<string>('', { nonNullable: true });
diff --git a/showcase/angular-lts-showcase/src/app/app.module.ts b/showcase/angular-lts-showcase/src/app/app.module.ts
deleted file mode 100644
index 2eae94ad18..0000000000
--- a/showcase/angular-lts-showcase/src/app/app.module.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-
-import { AppComponent } from './app.component';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { FormComponent } from './components/form/form.component';
-import { NavigationComponent } from './components/navigation/navigation.component';
-import { OtherComponentsComponent } from './components/other-components/other-components.component';
-import { OtherElementsComponent } from './components/other-elements/other-elements.component';
-import { TabBarComponent } from './components/tab-bar/tab-bar.component';
-import { TablesComponent } from './components/tables/tables.component';
-import { AppRoutingModule } from './app.routing.module';
-import { DBUIElementsModule } from '../../../../packages/db-ui-elements-angular/projects/lib/src';
-
-@NgModule({
- declarations: [
- AppComponent,
- FormComponent,
- NavigationComponent,
- OtherComponentsComponent,
- OtherElementsComponent,
- TabBarComponent,
- TablesComponent
- ],
- imports: [
- BrowserModule,
- ReactiveFormsModule,
- FormsModule,
- AppRoutingModule,
- DBUIElementsModule
- ],
- providers: [],
- bootstrap: [AppComponent]
-})
-export class AppModule {}
diff --git a/showcase/angular-lts-showcase/src/app/app.routing.module.ts b/showcase/angular-lts-showcase/src/app/app.routing.module.ts
index 2d014e0a80..7491e0d99c 100644
--- a/showcase/angular-lts-showcase/src/app/app.routing.module.ts
+++ b/showcase/angular-lts-showcase/src/app/app.routing.module.ts
@@ -1,5 +1,4 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import { Routes } from '@angular/router';
import { TabBarComponent } from './components/tab-bar/tab-bar.component';
import { FormComponent } from './components/form/form.component';
import { OtherElementsComponent } from './components/other-elements/other-elements.component';
@@ -7,17 +6,15 @@ import { OtherComponentsComponent } from './components/other-components/other-co
import { NavigationComponent } from './components/navigation/navigation.component';
import { TablesComponent } from './components/tables/tables.component';
-const routes: Routes = [
- { path: 'form', component: FormComponent },
- { path: 'elements', component: OtherElementsComponent },
- { path: 'components', component: OtherComponentsComponent },
- { path: 'navigation', component: NavigationComponent },
- { path: 'tables', component: TablesComponent },
+export const routes: Routes = [
+ { path: 'form', component: FormComponent, pathMatch: 'full' },
+ { path: 'elements', component: OtherElementsComponent, pathMatch: 'full' },
+ {
+ path: 'components',
+ component: OtherComponentsComponent,
+ pathMatch: 'full'
+ },
+ { path: 'navigation', component: NavigationComponent, pathMatch: 'full' },
+ { path: 'tables', component: TablesComponent, pathMatch: 'full' },
{ path: '', component: TabBarComponent, pathMatch: 'full' }
];
-
-@NgModule({
- imports: [RouterModule.forRoot(routes, { useHash: true })],
- exports: [RouterModule]
-})
-export class AppRoutingModule {}
diff --git a/showcase/angular-lts-showcase/src/app/components/form/form.component.html b/showcase/angular-lts-showcase/src/app/components/form/form.component.html
index b00c3f691f..79d3f849b8 100644
--- a/showcase/angular-lts-showcase/src/app/components/form/form.component.html
+++ b/showcase/angular-lts-showcase/src/app/components/form/form.component.html
@@ -16,14 +16,20 @@
></db-checkbox>
<p>DbRadio:</p>
<ol>
- <li *ngFor="let radioButton of radioButtons; index as i">
- <db-radio
- [label]="radioButton"
- name="radio-name"
- [formControl]="radioControl"
- [value]="radioButton"
- ></db-radio>
- </li>
+ @for (
+ radioButton of radioButtons;
+ track radioButton;
+ let i = $index
+ ) {
+ <li>
+ <db-radio
+ [label]="radioButton"
+ name="radio-name"
+ [formControl]="radioControl"
+ [value]="radioButton"
+ ></db-radio>
+ </li>
+ }
</ol>
<p>DbSelect:</p>
<db-select
diff --git a/showcase/angular-lts-showcase/src/app/components/form/form.component.ts b/showcase/angular-lts-showcase/src/app/components/form/form.component.ts
index e00dee8998..69aa7fc247 100644
--- a/showcase/angular-lts-showcase/src/app/components/form/form.component.ts
+++ b/showcase/angular-lts-showcase/src/app/components/form/form.component.ts
@@ -1,18 +1,42 @@
import { Component, OnInit } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import {
+ DbButton,
+ DbInput,
+ DbCheckbox,
+ DbRadio,
+ DbTextarea,
+ DbSelect,
+ DbToggle,
+ DbSidenavi
+} from '../../../../../../packages/db-ui-elements-angular/projects/lib/src';
+import { NAVIGATION_ITEMS } from '../../utils/navigation-item';
@Component({
selector: 'app-form',
templateUrl: './form.component.html',
- styleUrls: ['./form.component.css']
+ styleUrls: ['./form.component.css'],
+ standalone: true,
+ imports: [
+ DbButton,
+ DbSelect,
+ DbInput,
+ DbRadio,
+ DbCheckbox,
+ DbTextarea,
+ DbToggle,
+ FormsModule,
+ ReactiveFormsModule,
+ DbSidenavi
+ ]
})
export class FormComponent implements OnInit {
- input: string;
- checkbox: boolean;
- radio: string;
- select: string;
- textarea: string;
- toggle: boolean;
+ input: string = '';
+ checkbox: boolean | null = false;
+ radio: string = '';
+ select: string | null = '';
+ textarea: string | null = '';
+ toggle: boolean = false;
checkboxControl = new FormControl<boolean>(false, { nonNullable: false });
radioControl = new FormControl<string>('', { nonNullable: true });
@@ -44,4 +68,6 @@ export class FormComponent implements OnInit {
})
);
}
+
+ protected readonly navigationItems = NAVIGATION_ITEMS;
}
diff --git a/showcase/angular-lts-showcase/src/app/components/navigation/navigation.component.html b/showcase/angular-lts-showcase/src/app/components/navigation/navigation.component.html
index a950683b84..c1d9a6db2e 100644
--- a/showcase/angular-lts-showcase/src/app/components/navigation/navigation.component.html
+++ b/showcase/angular-lts-showcase/src/app/components/navigation/navigation.component.html
@@ -1,12 +1,10 @@
<div>
<p>DbSidenavi:</p>
<db-sidenavi>
- <db-link
- *ngFor="let item of navigationItems; index as i"
- [attr.current]="isAria(i)"
- [attr.icon]="item.icon"
- >
- <a [routerLink]="item.link">{{ item.label }}</a>
- </db-link>
+ @for (item of navigationItems; track item; let i = $index) {
+ <db-link [attr.current]="isAria(i)" [attr.icon]="item.icon">
+ <a [routerLink]="item.link">{{ item.label }}</a>
+ </db-link>
+ }
</db-sidenavi>
</div>
diff --git a/showcase/angular-lts-showcase/src/app/components/navigation/navigation.component.ts b/showcase/angular-lts-showcase/src/app/components/navigation/navigation.component.ts
index 80e7c0e0ea..e14597f6d8 100644
--- a/showcase/angular-lts-showcase/src/app/components/navigation/navigation.component.ts
+++ b/showcase/angular-lts-showcase/src/app/components/navigation/navigation.component.ts
@@ -1,9 +1,16 @@
import { Component } from '@angular/core';
import { isAreaCurrent, NAVIGATION_ITEMS } from '../../utils/navigation-item';
+import {
+ DbLink,
+ DbSidenavi
+} from '../../../../../../packages/db-ui-elements-angular/projects/lib/src';
+import { RouterLink } from '@angular/router';
@Component({
selector: 'app-navigation',
- templateUrl: './navigation.component.html'
+ templateUrl: './navigation.component.html',
+ standalone: true,
+ imports: [DbSidenavi, DbLink, RouterLink]
})
export class NavigationComponent {
navigationItems = NAVIGATION_ITEMS;
diff --git a/showcase/angular-lts-showcase/src/app/components/other-components/other-components.component.html b/showcase/angular-lts-showcase/src/app/components/other-components/other-components.component.html
index d52f25eeaa..c24c030417 100644
--- a/showcase/angular-lts-showcase/src/app/components/other-components/other-components.component.html
+++ b/showcase/angular-lts-showcase/src/app/components/other-components/other-components.component.html
@@ -16,23 +16,25 @@
<db-button variant="primary" (click)="notification = true">
Open Notification!
</db-button>
- <db-notifications *ngIf="notification" variant="hovering">
- <db-notification type="success">
- <db-icon
- icon="account"
- slot="prenotification"
- variant="20-outline"
- ></db-icon>
- success: Lorem ipsum dolor sit amet, consectetur adipisicing elit
- <db-icon
- icon="close"
- slot="postnotification"
- variant="20-outline"
- (keypress)="notification = false"
- (click)="notification = false"
- tabindex="0"
- role="button"
- ></db-icon>
- </db-notification>
- </db-notifications>
+ @if (notification) {
+ <db-notifications variant="hovering">
+ <db-notification type="success">
+ <db-icon
+ icon="account"
+ slot="prenotification"
+ variant="20-outline"
+ ></db-icon>
+ success: Lorem ipsum dolor sit amet, consectetur adipisicing elit
+ <db-icon
+ icon="close"
+ slot="postnotification"
+ variant="20-outline"
+ (keypress)="notification = false"
+ (click)="notification = false"
+ tabindex="0"
+ role="button"
+ ></db-icon>
+ </db-notification>
+ </db-notifications>
+ }
</div>
diff --git a/showcase/angular-lts-showcase/src/app/components/other-components/other-components.component.ts b/showcase/angular-lts-showcase/src/app/components/other-components/other-components.component.ts
index 3420880acb..bf95303b70 100644
--- a/showcase/angular-lts-showcase/src/app/components/other-components/other-components.component.ts
+++ b/showcase/angular-lts-showcase/src/app/components/other-components/other-components.component.ts
@@ -1,10 +1,27 @@
import { Component } from '@angular/core';
+import {
+ DbLinklist,
+ DbButton,
+ DbNotification,
+ DbNotifications,
+ DbLink,
+ DbIcon
+} from '../../../../../../packages/db-ui-elements-angular/projects/lib/src';
@Component({
selector: 'app-other-components',
templateUrl: './other-components.component.html',
- styleUrls: ['other-components.component.css']
+ styleUrls: ['other-components.component.css'],
+ standalone: true,
+ imports: [
+ DbButton,
+ DbNotification,
+ DbNotifications,
+ DbLink,
+ DbLinklist,
+ DbIcon
+ ]
})
export class OtherComponentsComponent {
- notification: boolean;
+ notification: boolean = false;
}
diff --git a/showcase/angular-lts-showcase/src/app/components/other-elements/other-elements.component.ts b/showcase/angular-lts-showcase/src/app/components/other-elements/other-elements.component.ts
index 38aaf59db4..889bd7a002 100644
--- a/showcase/angular-lts-showcase/src/app/components/other-elements/other-elements.component.ts
+++ b/showcase/angular-lts-showcase/src/app/components/other-elements/other-elements.component.ts
@@ -1,7 +1,18 @@
import { Component } from '@angular/core';
+import {
+ DbIcon,
+ DbChip,
+ DbTag,
+ DbProgress,
+ DbImage,
+ DbLogo,
+ DbLink
+} from '../../../../../../packages/db-ui-elements-angular/projects/lib/src';
@Component({
selector: 'app-other-elements',
- templateUrl: './other-elements.component.html'
+ templateUrl: './other-elements.component.html',
+ standalone: true,
+ imports: [DbIcon, DbChip, DbTag, DbProgress, DbImage, DbLogo, DbLink]
})
export class OtherElementsComponent {}
diff --git a/showcase/angular-lts-showcase/src/app/components/tab-bar/tab-bar.component.ts b/showcase/angular-lts-showcase/src/app/components/tab-bar/tab-bar.component.ts
index c195cfe4a1..50bf6d9760 100644
--- a/showcase/angular-lts-showcase/src/app/components/tab-bar/tab-bar.component.ts
+++ b/showcase/angular-lts-showcase/src/app/components/tab-bar/tab-bar.component.ts
@@ -1,7 +1,26 @@
import { Component } from '@angular/core';
+import {
+ DbTab,
+ DbTabBar
+} from '../../../../../../packages/db-ui-elements-angular/projects/lib/src';
+import { FormComponent } from '../form/form.component';
+import { OtherElementsComponent } from '../other-elements/other-elements.component';
+import { OtherComponentsComponent } from '../other-components/other-components.component';
+import { TablesComponent } from '../tables/tables.component';
+import { NavigationComponent } from '../navigation/navigation.component';
@Component({
selector: 'app-tab-bar',
- templateUrl: './tab-bar.component.html'
+ templateUrl: './tab-bar.component.html',
+ standalone: true,
+ imports: [
+ DbTabBar,
+ DbTab,
+ FormComponent,
+ OtherElementsComponent,
+ OtherComponentsComponent,
+ TablesComponent,
+ NavigationComponent
+ ]
})
export class TabBarComponent {}
diff --git a/showcase/angular-lts-showcase/src/app/components/tables/tables.component.ts b/showcase/angular-lts-showcase/src/app/components/tables/tables.component.ts
index 32a941875b..104f973738 100644
--- a/showcase/angular-lts-showcase/src/app/components/tables/tables.component.ts
+++ b/showcase/angular-lts-showcase/src/app/components/tables/tables.component.ts
@@ -1,17 +1,23 @@
import { Component } from '@angular/core';
import { columnExampleData } from './mockData';
+import {
+ DbTable,
+ DbPagination
+} from '../../../../../../packages/db-ui-elements-angular/projects/lib/src';
+import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-tables',
- templateUrl: './tables.component.html'
+ templateUrl: './tables.component.html',
+ standalone: true,
+ imports: [DbTable, DbPagination, FormsModule]
})
export class TablesComponent {
- columnExampleData;
columnExampleDataString = JSON.stringify(columnExampleData);
currentPage = 2;
- logEvent(event) {
+ logEvent(event: any) {
// eslint-disable-next-line no-console
console.log('PagEvent: ', event);
}
diff --git a/showcase/angular-lts-showcase/src/main.ts b/showcase/angular-lts-showcase/src/main.ts
index 28c63f8ac5..1515397c28 100644
--- a/showcase/angular-lts-showcase/src/main.ts
+++ b/showcase/angular-lts-showcase/src/main.ts
@@ -1,14 +1,8 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import { provideRouter, withHashLocation } from '@angular/router';
+import { routes } from './app/app.routing.module';
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
-
-if (environment.production) {
- enableProdMode();
-}
-
-platformBrowserDynamic()
- .bootstrapModule(AppModule)
- // eslint-disable-next-line no-console
- .catch((err) => console.error(err));
+bootstrapApplication(AppComponent, {
+ providers: [provideRouter(routes, withHashLocation())]
+});
diff --git a/showcase/angular-lts-showcase/tsconfig.app.json b/showcase/angular-lts-showcase/tsconfig.app.json
index 3171ab11f6..c3317bcd2d 100644
--- a/showcase/angular-lts-showcase/tsconfig.app.json
+++ b/showcase/angular-lts-showcase/tsconfig.app.json
@@ -1,13 +1,8 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
- "extends": "./tsconfig.base.json",
+ "extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
- "types": [],
- "paths": {
- "@angular/*": ["./node_modules/@angular/*"],
- "@db-ui/*": ["../../packages/db-ui-elements-angular/dist/lib/*"]
- }
+ "types": ["node"]
},
"files": ["src/main.ts"],
"include": ["src/**/*.d.ts"]
diff --git a/showcase/angular-lts-showcase/tsconfig.base.json b/showcase/angular-lts-showcase/tsconfig.base.json
deleted file mode 100644
index f1830d0f87..0000000000
--- a/showcase/angular-lts-showcase/tsconfig.base.json
+++ /dev/null
@@ -1,17 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
- "compileOnSave": false,
- "compilerOptions": {
- "baseUrl": "./",
- "outDir": "./dist/out-tsc",
- "sourceMap": true,
- "declaration": false,
- "downlevelIteration": true,
- "experimentalDecorators": true,
- "moduleResolution": "node",
- "importHelpers": true,
- "target": "es2015",
- "module": "es2020",
- "lib": ["es2018", "dom"]
- }
-}
diff --git a/showcase/angular-lts-showcase/tsconfig.json b/showcase/angular-lts-showcase/tsconfig.json
index 8f1a8f47fe..50918b5827 100644
--- a/showcase/angular-lts-showcase/tsconfig.json
+++ b/showcase/angular-lts-showcase/tsconfig.json
@@ -1,17 +1,30 @@
-/*
- This is a "Solution Style" tsconfig.json file, and is used by editors and TypeScript’s language server to improve development experience.
- It is not intended to be used to perform a compilation.
-
- To learn more about this file see: https://angular.io/config/solution-tsconfig.
-*/
{
- "files": [],
- "references": [
- {
- "path": "./tsconfig.app.json"
- },
- {
- "path": "./tsconfig.spec.json"
- }
- ]
+ "compileOnSave": false,
+ "compilerOptions": {
+ "outDir": "./dist/out-tsc",
+ "forceConsistentCasingInFileNames": true,
+ "strict": true,
+ "noImplicitOverride": true,
+ "noPropertyAccessFromIndexSignature": true,
+ "noImplicitReturns": true,
+ "noFallthroughCasesInSwitch": true,
+ "skipLibCheck": true,
+ "esModuleInterop": true,
+ "sourceMap": true,
+ "declaration": false,
+ "experimentalDecorators": true,
+ "moduleResolution": "node",
+ "importHelpers": true,
+ "resolveJsonModule": true,
+ "target": "ES2022",
+ "module": "ES2022",
+ "useDefineForClassFields": false,
+ "lib": ["ES2022", "dom"]
+ },
+ "angularCompilerOptions": {
+ "enableI18nLegacyMessageIdFormat": false,
+ "strictInjectionParameters": true,
+ "strictInputAccessModifiers": true,
+ "strictTemplates": true
+ }
}
diff --git a/showcase/angular-lts-showcase/tsconfig.spec.json b/showcase/angular-lts-showcase/tsconfig.spec.json
deleted file mode 100644
index cc1c150e2c..0000000000
--- a/showcase/angular-lts-showcase/tsconfig.spec.json
+++ /dev/null
@@ -1,12 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
- "extends": "./tsconfig.base.json",
- "compilerOptions": {
- "outDir": "./out-tsc/spec",
- "module": "commonjs",
- "types": ["jest", "node"],
- "emitDecoratorMetadata": true,
- "allowJs": true
- },
- "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
-}
diff --git a/showcase/angular-lts-showcase/tslint.json b/showcase/angular-lts-showcase/tslint.json
deleted file mode 100644
index f5de97038c..0000000000
--- a/showcase/angular-lts-showcase/tslint.json
+++ /dev/null
@@ -1,104 +0,0 @@
-{
- "extends": "tslint:recommended",
- "rules": {
- "align": {
- "options": ["parameters", "statements"]
- },
- "array-type": false,
- "arrow-return-shorthand": true,
- "curly": true,
- "deprecation": {
- "severity": "warning"
- },
- "component-class-suffix": true,
- "contextual-lifecycle": true,
- "directive-class-suffix": true,
- "directive-selector": [true, "attribute", "app", "camelCase"],
- "component-selector": [true, "element", "app", "kebab-case"],
- "eofline": true,
- "import-blacklist": [true, "rxjs/Rx"],
- "import-spacing": true,
- "indent": {
- "options": ["spaces"]
- },
- "max-classes-per-file": false,
- "max-line-length": [true, 140],
- "member-ordering": [
- true,
- {
- "order": [
- "static-field",
- "instance-field",
- "static-method",
- "instance-method"
- ]
- }
- ],
- "no-console": [true, "debug", "info", "time", "timeEnd", "trace"],
- "no-empty": false,
- "no-inferrable-types": [true, "ignore-params"],
- "no-non-null-assertion": true,
- "no-redundant-jsdoc": true,
- "no-switch-case-fall-through": true,
- "no-var-requires": false,
- "object-literal-key-quotes": [true, "as-needed"],
- "quotemark": [true, "single"],
- "semicolon": {
- "options": ["always"]
- },
- "space-before-function-paren": {
- "options": {
- "anonymous": "never",
- "asyncArrow": "always",
- "constructor": "never",
- "method": "never",
- "named": "never"
- }
- },
- "typedef": [true, "call-signature"],
- "typedef-whitespace": {
- "options": [
- {
- "call-signature": "nospace",
- "index-signature": "nospace",
- "parameter": "nospace",
- "property-declaration": "nospace",
- "variable-declaration": "nospace"
- },
- {
- "call-signature": "onespace",
- "index-signature": "onespace",
- "parameter": "onespace",
- "property-declaration": "onespace",
- "variable-declaration": "onespace"
- }
- ]
- },
- "variable-name": {
- "options": ["ban-keywords", "check-format", "allow-pascal-case"]
- },
- "whitespace": {
- "options": [
- "check-branch",
- "check-decl",
- "check-operator",
- "check-separator",
- "check-type",
- "check-typecast"
- ]
- },
- "no-conflicting-lifecycle": true,
- "no-host-metadata-property": true,
- "no-input-rename": true,
- "no-inputs-metadata-property": true,
- "no-output-native": true,
- "no-output-on-prefix": true,
- "no-output-rename": true,
- "no-outputs-metadata-property": true,
- "template-banana-in-box": true,
- "template-no-negated-async": true,
- "use-lifecycle-interface": true,
- "use-pipe-transform-interface": true
- },
- "rulesDirectory": ["codelyzer"]
-}