Feat angular standalone

.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

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';

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>

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}

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() {

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',

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';

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]