diff --git a/output/angular/README.md b/output/angular/README.md index 3a6c506521d..f912f72a228 100644 --- a/output/angular/README.md +++ b/output/angular/README.md @@ -39,16 +39,18 @@ Import the styles in scss or css. Based on your technology the file names could ## Usage -```ts app.module.ts -//app.module.ts -import { DBButtonModule } from '@db-ui/ngx-components'; - -@NgModule({ - ... - imports: [..., DBButtonModule], -... -}) +```ts app.component.ts +//app.component.ts +import { DBButton } from '@db-ui/ngx-components'; +@Component({ + // ... + imports: [ + // ..., + DBButton + ], + // ... +}) ``` ```html app.component.html diff --git a/packages/components/_templates/mitosis/new/component/angular-overrides.ejs.t b/packages/components/_templates/mitosis/new/component/angular-overrides.ejs.t index 7fa0e8c12d4..5eafcb8485b 100644 --- a/packages/components/_templates/mitosis/new/component/angular-overrides.ejs.t +++ b/packages/components/_templates/mitosis/new/component/angular-overrides.ejs.t @@ -1,4 +1,4 @@ --- to: overrides/angular/src/components/<%= name %>/index.ts --- -export { DB<%= h.changeCase.pascal(name) %>, DB<%= h.changeCase.pascal(name) %>Module } from "./<%= name %>"; +export { DB<%= h.changeCase.pascal(name) %> } from "./<%= name %>"; diff --git a/packages/components/_templates/mitosis/new/showcases/angular-showcase-component.ejs.t b/packages/components/_templates/mitosis/new/showcases/angular-showcase-component.ejs.t index a503c4b6618..a6981c66f9f 100644 --- a/packages/components/_templates/mitosis/new/showcases/angular-showcase-component.ejs.t +++ b/packages/components/_templates/mitosis/new/showcases/angular-showcase-component.ejs.t @@ -3,11 +3,14 @@ to: "<%= showcases ? `../../showcases/angular-showcase/src/app/components/${name --- import { Component } from '@angular/core'; +import { DefaultComponent } from '../default.component'; import defaultComponentVariants from '../../../../../shared/<%= name %>.json'; @Component({ selector: 'app-<%= name %>', - templateUrl: './<%= name %>.component.html' + templateUrl: './<%= name %>.component.html', + imports: [DefaultComponent], + standalone: true }) export class <%= h.changeCase.pascal(name) %>Component { variants = defaultComponentVariants; diff --git a/packages/components/_templates/mitosis/new/showcases/angular-showcase-module-declaration.ejs.t b/packages/components/_templates/mitosis/new/showcases/angular-showcase-module-declaration.ejs.t deleted file mode 100644 index 53257429d98..00000000000 --- a/packages/components/_templates/mitosis/new/showcases/angular-showcase-module-declaration.ejs.t +++ /dev/null @@ -1,6 +0,0 @@ ---- -inject: true -to: "<%= showcases ? `../../showcases/angular-showcase/src/app/app.module.ts` : null %>" -after: declarations ---- -<%= h.changeCase.pascal(name) %>Component, diff --git a/packages/components/_templates/mitosis/new/showcases/angular-showcase-module-import-component.ejs.t b/packages/components/_templates/mitosis/new/showcases/angular-showcase-module-import-component.ejs.t deleted file mode 100644 index 76aca42c4a9..00000000000 --- a/packages/components/_templates/mitosis/new/showcases/angular-showcase-module-import-component.ejs.t +++ /dev/null @@ -1,6 +0,0 @@ ---- -inject: true -to: "<%= showcases ? `../../showcases/angular-showcase/src/app/app.module.ts` : null %>" -before: NgModule ---- -import { <%= h.changeCase.pascal(name) %>Component } from './components/<%= name %>/<%= name %>.component'; diff --git a/packages/components/_templates/mitosis/new/showcases/angular-showcase-module-import-module.ejs.t b/packages/components/_templates/mitosis/new/showcases/angular-showcase-module-import-module.ejs.t deleted file mode 100644 index 447fb48b354..00000000000 --- a/packages/components/_templates/mitosis/new/showcases/angular-showcase-module-import-module.ejs.t +++ /dev/null @@ -1,6 +0,0 @@ ---- -inject: true -to: "<%= showcases ? `../../showcases/angular-showcase/src/app/app.module.ts` : null %>" -after: imports ---- -DB<%= h.changeCase.pascal(name) %>Module, diff --git a/packages/components/_templates/mitosis/new/showcases/angular-showcase-module-import.ejs.t b/packages/components/_templates/mitosis/new/showcases/angular-showcase-module-import.ejs.t deleted file mode 100644 index c5782ab74d1..00000000000 --- a/packages/components/_templates/mitosis/new/showcases/angular-showcase-module-import.ejs.t +++ /dev/null @@ -1,6 +0,0 @@ ---- -inject: true -to: "<%= showcases ? `../../showcases/angular-showcase/src/app/app.module.ts` : null %>" -before: output/angular/src ---- -,DB<%= h.changeCase.pascal(name) %>Module diff --git a/packages/components/mitosis-angular.config.js b/packages/components/mitosis-angular.config.js index 1d908dd93dc..74d3340ce13 100644 --- a/packages/components/mitosis-angular.config.js +++ b/packages/components/mitosis-angular.config.js @@ -4,7 +4,8 @@ module.exports = { dest: '../../output/tmp', options: { angular: { - typescript: true + typescript: true, + standalone: true } } }; diff --git a/packages/components/mitosis.config.js b/packages/components/mitosis.config.js index a96044b3495..460e0949645 100644 --- a/packages/components/mitosis.config.js +++ b/packages/components/mitosis.config.js @@ -7,7 +7,8 @@ module.exports = { typescript: true }, angular: { - typescript: true + typescript: true, + standalone: true }, vue3: { typescript: true diff --git a/packages/components/overrides/angular/src/components/accordion-item/index.ts b/packages/components/overrides/angular/src/components/accordion-item/index.ts index 27ab670b43d..c7554059b95 100644 --- a/packages/components/overrides/angular/src/components/accordion-item/index.ts +++ b/packages/components/overrides/angular/src/components/accordion-item/index.ts @@ -1 +1 @@ -export { DBAccordionItem, DBAccordionItemModule } from './accordion-item'; +export { DBAccordionItem } from './accordion-item'; diff --git a/packages/components/overrides/angular/src/components/accordion/index.ts b/packages/components/overrides/angular/src/components/accordion/index.ts index f1954d19cc0..10c779d7ec6 100644 --- a/packages/components/overrides/angular/src/components/accordion/index.ts +++ b/packages/components/overrides/angular/src/components/accordion/index.ts @@ -1 +1 @@ -export { DBAccordion, DBAccordionModule } from './accordion'; +export { DBAccordion } from './accordion'; diff --git a/packages/components/overrides/angular/src/components/alert/index.ts b/packages/components/overrides/angular/src/components/alert/index.ts index 803d74d46b3..1ae1d4a6ebe 100644 --- a/packages/components/overrides/angular/src/components/alert/index.ts +++ b/packages/components/overrides/angular/src/components/alert/index.ts @@ -1 +1 @@ -export { DBAlert, DBAlertModule } from './alert'; +export { DBAlert } from './alert'; diff --git a/packages/components/overrides/angular/src/components/badge/index.ts b/packages/components/overrides/angular/src/components/badge/index.ts index e775ca2345e..ed4c763397e 100644 --- a/packages/components/overrides/angular/src/components/badge/index.ts +++ b/packages/components/overrides/angular/src/components/badge/index.ts @@ -1 +1 @@ -export { DBBadge, DBBadgeModule } from './badge'; +export { DBBadge } from './badge'; diff --git a/packages/components/overrides/angular/src/components/brand/index.ts b/packages/components/overrides/angular/src/components/brand/index.ts index 3a39c495376..658e2b76ae8 100644 --- a/packages/components/overrides/angular/src/components/brand/index.ts +++ b/packages/components/overrides/angular/src/components/brand/index.ts @@ -1 +1 @@ -export { DBBrand, DBBrandModule } from './brand'; +export { DBBrand } from './brand'; diff --git a/packages/components/overrides/angular/src/components/button/index.ts b/packages/components/overrides/angular/src/components/button/index.ts index dfeb2d797a9..1172034acd5 100644 --- a/packages/components/overrides/angular/src/components/button/index.ts +++ b/packages/components/overrides/angular/src/components/button/index.ts @@ -1 +1 @@ -export { DBButton, DBButtonModule } from './button'; +export { DBButton } from './button'; diff --git a/packages/components/overrides/angular/src/components/card/index.ts b/packages/components/overrides/angular/src/components/card/index.ts index 6fcd90d5919..9ba4f99fd83 100644 --- a/packages/components/overrides/angular/src/components/card/index.ts +++ b/packages/components/overrides/angular/src/components/card/index.ts @@ -1 +1 @@ -export { DBCard, DBCardModule } from './card'; +export { DBCard } from './card'; diff --git a/packages/components/overrides/angular/src/components/checkbox/index.ts b/packages/components/overrides/angular/src/components/checkbox/index.ts index 2b74f10f193..2012009fdd1 100644 --- a/packages/components/overrides/angular/src/components/checkbox/index.ts +++ b/packages/components/overrides/angular/src/components/checkbox/index.ts @@ -1 +1 @@ -export { DBCheckbox, DBCheckboxModule } from './checkbox'; +export { DBCheckbox } from './checkbox'; diff --git a/packages/components/overrides/angular/src/components/code-docs/index.ts b/packages/components/overrides/angular/src/components/code-docs/index.ts index 45816d6d8fe..a91da77f265 100644 --- a/packages/components/overrides/angular/src/components/code-docs/index.ts +++ b/packages/components/overrides/angular/src/components/code-docs/index.ts @@ -1 +1 @@ -export { DBCodeDocs, DBCodeDocsModule } from './code-docs'; +export { DBCodeDocs } from './code-docs'; diff --git a/packages/components/overrides/angular/src/components/divider/index.ts b/packages/components/overrides/angular/src/components/divider/index.ts index 1d3db8f6f70..7601287d1a9 100644 --- a/packages/components/overrides/angular/src/components/divider/index.ts +++ b/packages/components/overrides/angular/src/components/divider/index.ts @@ -1 +1 @@ -export { DBDivider, DBDividerModule } from './divider'; +export { DBDivider } from './divider'; diff --git a/packages/components/overrides/angular/src/components/drawer/index.ts b/packages/components/overrides/angular/src/components/drawer/index.ts index 14860486c26..2928adc42ac 100644 --- a/packages/components/overrides/angular/src/components/drawer/index.ts +++ b/packages/components/overrides/angular/src/components/drawer/index.ts @@ -1 +1 @@ -export { DBDrawer, DBDrawerModule } from './drawer'; +export { DBDrawer } from './drawer'; diff --git a/packages/components/overrides/angular/src/components/header/index.ts b/packages/components/overrides/angular/src/components/header/index.ts index b35fc509855..7971adc96b7 100644 --- a/packages/components/overrides/angular/src/components/header/index.ts +++ b/packages/components/overrides/angular/src/components/header/index.ts @@ -1 +1 @@ -export { DBHeader, DBHeaderModule } from './header'; +export { DBHeader } from './header'; diff --git a/packages/components/overrides/angular/src/components/icon/index.ts b/packages/components/overrides/angular/src/components/icon/index.ts index 9f8de045364..477db3c7403 100644 --- a/packages/components/overrides/angular/src/components/icon/index.ts +++ b/packages/components/overrides/angular/src/components/icon/index.ts @@ -1 +1 @@ -export { DBIcon, DBIconModule } from './icon'; +export { DBIcon } from './icon'; diff --git a/packages/components/overrides/angular/src/components/infotext/index.ts b/packages/components/overrides/angular/src/components/infotext/index.ts index 614cc239160..ab235537250 100644 --- a/packages/components/overrides/angular/src/components/infotext/index.ts +++ b/packages/components/overrides/angular/src/components/infotext/index.ts @@ -1 +1 @@ -export { DBInfotext, DBInfotextModule } from './infotext'; +export { DBInfotext } from './infotext'; diff --git a/packages/components/overrides/angular/src/components/input/index.ts b/packages/components/overrides/angular/src/components/input/index.ts index c20ee7aee0f..e37be88f609 100644 --- a/packages/components/overrides/angular/src/components/input/index.ts +++ b/packages/components/overrides/angular/src/components/input/index.ts @@ -1 +1 @@ -export { DBInput, DBInputModule } from './input'; +export { DBInput } from './input'; diff --git a/packages/components/overrides/angular/src/components/link/index.ts b/packages/components/overrides/angular/src/components/link/index.ts index 57240a548d3..a0a073c4521 100644 --- a/packages/components/overrides/angular/src/components/link/index.ts +++ b/packages/components/overrides/angular/src/components/link/index.ts @@ -1 +1 @@ -export { DBLink, DBLinkModule } from './link'; +export { DBLink } from './link'; diff --git a/packages/components/overrides/angular/src/components/main-navigation/index.ts b/packages/components/overrides/angular/src/components/main-navigation/index.ts index 48bd43cb7e9..f279281ed62 100644 --- a/packages/components/overrides/angular/src/components/main-navigation/index.ts +++ b/packages/components/overrides/angular/src/components/main-navigation/index.ts @@ -1 +1 @@ -export { DBMainNavigation, DBMainNavigationModule } from './main-navigation'; +export { DBMainNavigation } from './main-navigation'; diff --git a/packages/components/overrides/angular/src/components/navigation-item/index.ts b/packages/components/overrides/angular/src/components/navigation-item/index.ts index 1c9e8b1d337..6ca9b8bef59 100644 --- a/packages/components/overrides/angular/src/components/navigation-item/index.ts +++ b/packages/components/overrides/angular/src/components/navigation-item/index.ts @@ -1 +1 @@ -export { DBNavigationItem, DBNavigationItemModule } from './navigation-item'; +export { DBNavigationItem } from './navigation-item'; diff --git a/packages/components/overrides/angular/src/components/page/index.ts b/packages/components/overrides/angular/src/components/page/index.ts index 31fa1c29ec6..33025ab4370 100644 --- a/packages/components/overrides/angular/src/components/page/index.ts +++ b/packages/components/overrides/angular/src/components/page/index.ts @@ -1 +1 @@ -export { DBPage, DBPageModule } from './page'; +export { DBPage } from './page'; diff --git a/packages/components/overrides/angular/src/components/popover/index.ts b/packages/components/overrides/angular/src/components/popover/index.ts index e45eda244eb..e6977c23494 100644 --- a/packages/components/overrides/angular/src/components/popover/index.ts +++ b/packages/components/overrides/angular/src/components/popover/index.ts @@ -1 +1 @@ -export { DBPopover, DBPopoverModule } from './popover'; +export { DBPopover } from './popover'; diff --git a/packages/components/overrides/angular/src/components/radio/index.ts b/packages/components/overrides/angular/src/components/radio/index.ts index 346c279d9af..f0199b14284 100644 --- a/packages/components/overrides/angular/src/components/radio/index.ts +++ b/packages/components/overrides/angular/src/components/radio/index.ts @@ -1 +1 @@ -export { DBRadio, DBRadioModule } from './radio'; +export { DBRadio } from './radio'; diff --git a/packages/components/overrides/angular/src/components/section/index.ts b/packages/components/overrides/angular/src/components/section/index.ts index 49a21da8297..2b4199173c8 100644 --- a/packages/components/overrides/angular/src/components/section/index.ts +++ b/packages/components/overrides/angular/src/components/section/index.ts @@ -1 +1 @@ -export { DBSection, DBSectionModule } from './section'; +export { DBSection } from './section'; diff --git a/packages/components/overrides/angular/src/components/select/index.ts b/packages/components/overrides/angular/src/components/select/index.ts index 8aae7fa037c..0889e09a6e2 100644 --- a/packages/components/overrides/angular/src/components/select/index.ts +++ b/packages/components/overrides/angular/src/components/select/index.ts @@ -1 +1 @@ -export { DBSelect, DBSelectModule } from './select'; +export { DBSelect } from './select'; diff --git a/packages/components/overrides/angular/src/components/sub-navigation/index.ts b/packages/components/overrides/angular/src/components/sub-navigation/index.ts index 1368a7fcd4b..b2e1faa11a3 100644 --- a/packages/components/overrides/angular/src/components/sub-navigation/index.ts +++ b/packages/components/overrides/angular/src/components/sub-navigation/index.ts @@ -1 +1 @@ -export { DBSubNavigation, DBSubNavigationModule } from './sub-navigation'; +export { DBSubNavigation } from './sub-navigation'; diff --git a/packages/components/overrides/angular/src/components/tab-bar/index.ts b/packages/components/overrides/angular/src/components/tab-bar/index.ts index 1d0609372ed..ddfa08f7c1a 100644 --- a/packages/components/overrides/angular/src/components/tab-bar/index.ts +++ b/packages/components/overrides/angular/src/components/tab-bar/index.ts @@ -1 +1 @@ -export { DBTabBar, DBTabBarModule } from './tab-bar'; +export { DBTabBar } from './tab-bar'; diff --git a/packages/components/overrides/angular/src/components/tab/index.ts b/packages/components/overrides/angular/src/components/tab/index.ts index f5766b1cb40..16448f89f64 100644 --- a/packages/components/overrides/angular/src/components/tab/index.ts +++ b/packages/components/overrides/angular/src/components/tab/index.ts @@ -1 +1 @@ -export { DBTab, DBTabModule } from './tab'; +export { DBTab } from './tab'; diff --git a/packages/components/overrides/angular/src/components/tag/index.ts b/packages/components/overrides/angular/src/components/tag/index.ts index 6e731b56495..02dfafb96df 100644 --- a/packages/components/overrides/angular/src/components/tag/index.ts +++ b/packages/components/overrides/angular/src/components/tag/index.ts @@ -1 +1 @@ -export { DBTag, DBTagModule } from './tag'; +export { DBTag } from './tag'; diff --git a/packages/components/overrides/angular/src/components/textarea/index.ts b/packages/components/overrides/angular/src/components/textarea/index.ts index 1eee7df7ccd..9cd588b455f 100644 --- a/packages/components/overrides/angular/src/components/textarea/index.ts +++ b/packages/components/overrides/angular/src/components/textarea/index.ts @@ -1 +1 @@ -export { DBTextarea, DBTextareaModule } from './textarea'; +export { DBTextarea } from './textarea'; diff --git a/packages/components/overrides/angular/src/components/tooltip/index.ts b/packages/components/overrides/angular/src/components/tooltip/index.ts index 1ebaf57c33d..17e6d4aa248 100644 --- a/packages/components/overrides/angular/src/components/tooltip/index.ts +++ b/packages/components/overrides/angular/src/components/tooltip/index.ts @@ -1 +1 @@ -export { DBTooltip, DBTooltipModule } from './tooltip'; +export { DBTooltip } from './tooltip'; diff --git a/packages/components/scripts/post-build/angular.js b/packages/components/scripts/post-build/angular.js index a551e61374d..9736b024cc5 100644 --- a/packages/components/scripts/post-build/angular.js +++ b/packages/components/scripts/post-build/angular.js @@ -13,14 +13,6 @@ const changeFile = (component, input) => { !line.includes(`[key]=`) ) .map((line) => { - if ( - line.includes(`import { DB`) && - line.includes(`../`) && - !line.includes(`Module`) - ) { - return line.replace(` } from "../`, `Module } from "../`); - } - if (line.includes(': ElementRef')) { return line.replace(': ElementRef', ': ElementRef | undefined'); } @@ -59,7 +51,7 @@ const setControlValueAccessorReplacements = ( replacements.push({ from: '} from "@angular/core";', to: - `, Renderer2 } from "@angular/core";\n` + + `Renderer2 } from "@angular/core";\n` + `import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n` }); @@ -148,10 +140,10 @@ const setDirectiveReplacements = ( }); replacements.push({ - from: 'import { NgModule } from "@angular/core";', + from: '@Component({', to: - 'import { NgModule } from "@angular/core";\n' + - `import { ${directive.name}Directive } from './${directive.name}.directive';\n` + `import { ${directive.name}Directive } from './${directive.name}.directive';\n\n` + + '@Component({' }); FS.writeFileSync( @@ -160,7 +152,8 @@ const setDirectiveReplacements = ( "import { Directive } from '@angular/core';" + ` @Directive({ -\tselector: '[db${directive.name}]' +\tselector: '[db${directive.name}]', +\tstandalone: true }) export class ${directive.name}Directive {} ` @@ -168,8 +161,8 @@ export class ${directive.name}Directive {} } replacements.push({ - from: 'import { NgModule } from "@angular/core";', - to: "import { NgModule, ContentChild, TemplateRef } from '@angular/core';" + from: '} from "@angular/core";', + to: 'ContentChild, TemplateRef } from "@angular/core";' }); }; diff --git a/packages/components/scripts/post-build/components.js b/packages/components/scripts/post-build/components.js index 81090bc1006..2ab5248634d 100644 --- a/packages/components/scripts/post-build/components.js +++ b/packages/components/scripts/post-build/components.js @@ -157,12 +157,17 @@ const getComponents = () => [ config: { angular: { directives: [ - { name: 'ActionBar', ngContentName: 'action-bar' }, + { + name: 'ActionBar', + ngContentName: 'action-bar' + }, { name: 'MetaNavigation', ngContentName: 'meta-navigation' }, - { name: 'Navigation' } + { + name: 'Navigation' + } ] } }, diff --git a/packages/components/src/components/accordion-item/docs/Angular.md b/packages/components/src/components/accordion-item/docs/Angular.md index 83e438a90e8..bc2c654a735 100644 --- a/packages/components/src/components/accordion-item/docs/Angular.md +++ b/packages/components/src/components/accordion-item/docs/Angular.md @@ -6,12 +6,12 @@ For general installation and configuration look at the [ngx-components](https:// ```ts app.component.ts // app.component.ts -import { DBAccordionItemModule } from '@db-ui/ngx-components'; +import { DBAccordionItem } from '@db-ui/ngx-components'; @Component({ // ... standalone: true, - imports: [..., DBAccordionItemModule], + imports: [..., DBAccordionItem], // ... }) ``` diff --git a/packages/components/src/components/accordion/docs/Angular.md b/packages/components/src/components/accordion/docs/Angular.md index b156fb82766..80fab4c8a58 100644 --- a/packages/components/src/components/accordion/docs/Angular.md +++ b/packages/components/src/components/accordion/docs/Angular.md @@ -6,12 +6,12 @@ For general installation and configuration look at the [ngx-components](https:// ```ts app.component.ts // app.component.ts -import { DBAccordionModule } from '@db-ui/ngx-components'; +import { DBAccordion } from '@db-ui/ngx-components'; @Component({ // ... standalone: true, - imports: [..., DBAccordionModule], + imports: [..., DBAccordion], // ... }) ``` diff --git a/packages/components/src/components/alert/docs/Angular.md b/packages/components/src/components/alert/docs/Angular.md index cfc29b0a4b3..5873d791e2d 100644 --- a/packages/components/src/components/alert/docs/Angular.md +++ b/packages/components/src/components/alert/docs/Angular.md @@ -6,12 +6,12 @@ For general installation and configuration take a look at the [ngx-components](h ```ts app.component.ts // app.component.ts -import { DBAlertModule } from '@db-ui/ngx-components'; +import { DBAlert } from '@db-ui/ngx-components'; @Component({ // ... standalone: true, - imports: [..., DBAlertModule], + imports: [..., DBAlert], // ... }) ``` diff --git a/packages/components/src/components/badge/docs/Angular.md b/packages/components/src/components/badge/docs/Angular.md index 85c643840d3..8ab5b5950ef 100644 --- a/packages/components/src/components/badge/docs/Angular.md +++ b/packages/components/src/components/badge/docs/Angular.md @@ -6,12 +6,12 @@ For general installation and configuration take a look at the [ngx-components](h ```ts app.component.ts // app.component.ts -import { DBBadgeModule } from '@db-ui/ngx-components'; +import { DBBadge } from '@db-ui/ngx-components'; @Component({ // ... standalone: true, - imports: [..., DBBadgeModule], + imports: [..., DBBadge], // ... }) ``` diff --git a/packages/components/src/components/brand/docs/Angular.md b/packages/components/src/components/brand/docs/Angular.md index 69ea696ec98..dd615476c98 100644 --- a/packages/components/src/components/brand/docs/Angular.md +++ b/packages/components/src/components/brand/docs/Angular.md @@ -6,12 +6,12 @@ For general installation and configuration take a look at the [ngx-components](h ```ts app.component.ts // app.component.ts -import { DBBrandModule } from '@db-ui/ngx-components'; +import { DBBrand } from '@db-ui/ngx-components'; @Component({ // ... standalone: true, - imports: [..., DBBrandModule], + imports: [..., DBBrand], // ... }) ``` diff --git a/packages/components/src/components/button/docs/Angular.md b/packages/components/src/components/button/docs/Angular.md index 71e49ebcc17..1f468da3e4d 100644 --- a/packages/components/src/components/button/docs/Angular.md +++ b/packages/components/src/components/button/docs/Angular.md @@ -6,12 +6,12 @@ For general installation and configuration take a look at the [ngx-components](h ```ts app.component.ts // app.component.ts -import { DBButtonModule } from '@db-ui/ngx-components'; +import { DBButton } from '@db-ui/ngx-components'; @Component({ // ... standalone: true, - imports: [..., DBButtonModule], + imports: [..., DBButton], // ... }) ``` diff --git a/packages/components/src/components/card/docs/Angular.md b/packages/components/src/components/card/docs/Angular.md index f8c7574f5d3..40d6cc51a60 100644 --- a/packages/components/src/components/card/docs/Angular.md +++ b/packages/components/src/components/card/docs/Angular.md @@ -4,14 +4,17 @@ For general installation and configuration take a look at the [ngx-components](h ### Load component -```ts app.module.ts -//app.module.ts -import { DBCardModule } from '@db-ui/ngx-components'; +```ts app.component.ts +//app.component.ts +import { DBCard } from '@db-ui/ngx-components'; -@NgModule({ - ... - imports: [..., DBCardModule], - ... +@Component({ + // ... + imports: [ + // ..., + DBCard + ], + // ... }) ``` diff --git a/packages/components/src/components/checkbox/docs/Angular.md b/packages/components/src/components/checkbox/docs/Angular.md index 0ac54a56ccc..6b04b10edd9 100644 --- a/packages/components/src/components/checkbox/docs/Angular.md +++ b/packages/components/src/components/checkbox/docs/Angular.md @@ -6,12 +6,12 @@ For general installation and configuration take a look at the [ngx-components](h ```ts app.component.ts // app.component.ts -import { DBCheckboxModule } from '@db-ui/ngx-components'; +import { DBCheckbox } from '@db-ui/ngx-components'; @Component({ // ... standalone: true, - imports: [..., DBCheckboxModule], + imports: [..., DBCheckbox], // ... }) ``` @@ -51,11 +51,17 @@ export class AppComponent { Third party controls require a `ControlValueAccessor` to function with angular forms. Adding an `ngDefaultControl` attribute will allow them to use that directive. [Further information](https://stackoverflow.com/a/46465959) -```ts app.module.ts -// app.module.ts -@NgModule({ - … - imports: [ FormsModule, …] +```ts app.component.ts +//app.component.ts +import { FormsModule } from '@angular/forms'; + +@Component({ + // ... + imports: [ + // ..., + FormsModule + ], + // ... }) ``` diff --git a/packages/components/src/components/divider/docs/Angular.md b/packages/components/src/components/divider/docs/Angular.md index 055c67e316d..96b5b3cd35d 100644 --- a/packages/components/src/components/divider/docs/Angular.md +++ b/packages/components/src/components/divider/docs/Angular.md @@ -6,12 +6,12 @@ For general installation and configuration take a look at the [ngx-components](h ```ts app.component.ts // app.component.ts -import { DBDividerModule } from '@db-ui/ngx-components'; +import { DBDivider } from '@db-ui/ngx-components'; @Component({ // ... standalone: true, - imports: [..., DBDividerModule], + imports: [..., DBDivider], // ... }) ``` diff --git a/packages/components/src/components/drawer/docs/Angular.md b/packages/components/src/components/drawer/docs/Angular.md index 82330a3b0ef..2e315d0bc3e 100644 --- a/packages/components/src/components/drawer/docs/Angular.md +++ b/packages/components/src/components/drawer/docs/Angular.md @@ -10,12 +10,12 @@ If you use `width !== full` you are able to overwrite the `max-width` with `--db ```ts app.component.ts // app.component.ts -import { DBDrawerModule } from '@db-ui/ngx-components'; +import { DBDrawer } from '@db-ui/ngx-components'; @Component({ // ... standalone: true, - imports: [..., DBDrawerModule], + imports: [..., DBDrawer], // ... }) ``` diff --git a/packages/components/src/components/header/docs/Angular.md b/packages/components/src/components/header/docs/Angular.md index 745abc94bd1..2369d5beafc 100644 --- a/packages/components/src/components/header/docs/Angular.md +++ b/packages/components/src/components/header/docs/Angular.md @@ -4,22 +4,26 @@ For general installation and configuration take a look at the [ngx-components](h ### Load component -```ts app.module.ts -//app.module.ts -import { DBHeaderModule } from '@db-ui/ngx-components'; +```ts app.component.ts +//app.component.ts +import { + DBHeader, + NavigationDirective, + ActionBarDirective, + MetaNavigationDirective +} from '@db-ui/ngx-components'; -@NgModule({ - ... - declarations: [ - ..., - NavigationDirective, // Optional: If you want to use a Navigation +@Component({ + // ... + imports: [ + // ..., + DBHeader + NavigationDirective, // Optional: If you want to use a Navigation ActionBarDirective, // Optional: If you want to use ActionBar MetaNavigationDirective, // Optional: If you want to use MetaNavigation ], - imports: [..., DBHeaderModule], - ... + // ... }) - ``` ### Use component diff --git a/packages/components/src/components/icon/docs/Angular.md b/packages/components/src/components/icon/docs/Angular.md index 8263f6c4605..807fadfbdef 100644 --- a/packages/components/src/components/icon/docs/Angular.md +++ b/packages/components/src/components/icon/docs/Angular.md @@ -6,12 +6,12 @@ For general installation and configuration take a look at the [ngx-components](h ```ts app.component.ts // app.component.ts -import { DBIconModule } from '@db-ui/ngx-components'; +import { DBIcon } from '@db-ui/ngx-components'; @Component({ // ... standalone: true, - imports: [..., DBIconModule], + imports: [..., DBIcon], // ... }) ``` diff --git a/packages/components/src/components/infotext/docs/Angular.md b/packages/components/src/components/infotext/docs/Angular.md index 45518f746ba..6e6534a7aac 100644 --- a/packages/components/src/components/infotext/docs/Angular.md +++ b/packages/components/src/components/infotext/docs/Angular.md @@ -6,12 +6,12 @@ For general installation and configuration take a look at the [ngx-components](h ```ts app.component.ts // app.component.ts -import { DBInfotextModule } from '@db-ui/ngx-components'; +import { DBInfotext } from '@db-ui/ngx-components'; @Component({ // ... standalone: true, - imports: [..., DBInfotextModule], + imports: [..., DBInfotext], // ... }) ``` diff --git a/packages/components/src/components/input/docs/Angular.md b/packages/components/src/components/input/docs/Angular.md index b3772d366e3..ea0418fc64d 100644 --- a/packages/components/src/components/input/docs/Angular.md +++ b/packages/components/src/components/input/docs/Angular.md @@ -6,17 +6,20 @@ Load SCSS globally within `styles.scss` in your app: @forward "@db-ui/components/build/styles/db-ui-42-webpack"; ``` -Load component within `app.module.ts`: - -```typescript -import { DBInputModule } from '@db-ui/ngx-components'; - -@NgModule({ - ... - imports: [..., DBInputModule], - ... +Load component within `app.component.ts`: + +```ts app.component.ts +//app.component.ts +import { DBInput } from '@db-ui/ngx-components'; + +@Component({ + // ... + imports: [ + // ..., + DBInput + ], + // ... }) - ``` Use component in template: @@ -37,11 +40,17 @@ Our input component implements this interface so you can use it like any other n > Currently we do not support onTouch/touched and native validation via FormControl. If your interested in contributing, you're very welcome ;) -```typescript -// app.module.ts -@NgModule({ - … - imports: [ ReactiveFormsModule, …] +```ts app.component.ts +//app.component.ts +import { ReactiveFormsModule } from '@angular/forms'; + +@Component({ + // ... + imports: [ + // ..., + ReactiveFormsModule + ], + // ... }) ``` @@ -80,11 +89,17 @@ export class FormComponent { Third party controls require a ControlValueAccessor to function with angular forms. Our input component implements this interface so you can use it like any other native element with ngModel: -```typescript -// app.module.ts -@NgModule({ - … - imports: [ FormsModule, …] +```ts app.component.ts +//app.component.ts +import { FormsModule } from '@angular/forms'; + +@Component({ + // ... + imports: [ + // ..., + FormsModule + ], + // ... }) ``` diff --git a/packages/components/src/components/link/docs/Angular.md b/packages/components/src/components/link/docs/Angular.md index 03c8a914e62..f50ca1e924d 100644 --- a/packages/components/src/components/link/docs/Angular.md +++ b/packages/components/src/components/link/docs/Angular.md @@ -6,12 +6,12 @@ For general installation and configuration take a look at the [ngx-components](h ```ts app.component.ts // app.component.ts -import { DBLinkModule } from '@db-ui/ngx-components'; +import { DBLink } from '@db-ui/ngx-components'; @Component({ // ... standalone: true, - imports: [..., DBLinkModule], + imports: [..., DBLink], // ... }) ``` diff --git a/packages/components/src/components/main-navigation/docs/Angular.md b/packages/components/src/components/main-navigation/docs/Angular.md index 50153928321..0837e77cdd6 100644 --- a/packages/components/src/components/main-navigation/docs/Angular.md +++ b/packages/components/src/components/main-navigation/docs/Angular.md @@ -6,12 +6,12 @@ For general installation and configuration look at the [ngx-components](https:// ```ts app.component.ts // app.component.ts -import { DBMainNavigationModule } from '@db-ui/ngx-components'; +import { DBMainNavigation } from '@db-ui/ngx-components'; @Component({ // ... standalone: true, - imports: [..., DBMainNavigationModule], + imports: [..., DBMainNavigation], // ... }) ``` diff --git a/packages/components/src/components/navigation-item/docs/Angular.md b/packages/components/src/components/navigation-item/docs/Angular.md index ba60f775ef0..a300b0a1b33 100644 --- a/packages/components/src/components/navigation-item/docs/Angular.md +++ b/packages/components/src/components/navigation-item/docs/Angular.md @@ -4,15 +4,14 @@ For general installation and configuration take a look at the [ngx-components](h ### Load component -```ts app.module.ts -//app.module.ts -import { DBNavigationItemModule } from '@db-ui/ngx-components'; - -@NgModule({ - ... - declarations: [...,NavigationContentDirective], - imports: [..., DBNavigationItemModule], - ... +```ts app.component.ts +//app.component.ts +import { DBNavigationItem, NavigationContentDirective } from '@db-ui/ngx-components'; + +@Component({ + // ... + imports: [..., DBNavigationItem, NavigationContentDirective], + // ... }) ``` diff --git a/packages/components/src/components/page/docs/Angular.md b/packages/components/src/components/page/docs/Angular.md index 20f39367027..84a6a6f20f8 100644 --- a/packages/components/src/components/page/docs/Angular.md +++ b/packages/components/src/components/page/docs/Angular.md @@ -4,16 +4,18 @@ For general installation and configuration take a look at the [ngx-components](h ### Load component -```ts app.module.ts -//app.module.ts -import { DBPageModule, DBHeaderModule } from '@db-ui/ngx-components'; +```ts app.component.ts +//app.component.ts +import { DBPage, DBHeader } from '@db-ui/ngx-components'; -@NgModule({ - ... - imports: [..., DBPageModule, DBHeaderModule], - ... +@Component({ + // ... + imports: [ + // ..., + DBPage, DBHeader + ], + // ... }) - ``` ### Use component diff --git a/packages/components/src/components/popover/docs/Angular.md b/packages/components/src/components/popover/docs/Angular.md index 016172f2e94..97df4f6dc3b 100644 --- a/packages/components/src/components/popover/docs/Angular.md +++ b/packages/components/src/components/popover/docs/Angular.md @@ -6,12 +6,12 @@ For general installation and configuration take a look at the [ngx-components](h ```ts app.component.ts // app.component.ts -import { DBPopoverModule } from '@db-ui/ngx-components'; +import { DBPopover } from '@db-ui/ngx-components'; @Component({ // ... standalone: true, - imports: [..., DBPopoverModule], + imports: [..., DBPopover], // ... }) ``` diff --git a/packages/components/src/components/radio/docs/Angular.md b/packages/components/src/components/radio/docs/Angular.md index 6e80cebab2c..8425bcdde78 100644 --- a/packages/components/src/components/radio/docs/Angular.md +++ b/packages/components/src/components/radio/docs/Angular.md @@ -6,12 +6,12 @@ For general installation and configuration take a look at the [ngx-components](h ```ts app.component.ts // app.component.ts -import { DBRadioModule } from '@db-ui/ngx-components'; +import { DBRadio } from '@db-ui/ngx-components'; @Component({ // ... standalone: true, - imports: [..., DBRadioModule], + imports: [..., DBRadio], // ... }) ``` @@ -51,11 +51,17 @@ export class AppComponent { Third party controls require a `ControlValueAccessor` to function with angular forms. Adding an `ngDefaultControl` attribute will allow them to use that directive. [Further information](https://stackoverflow.com/a/46465959) -```ts app.module.ts -// app.module.ts -@NgModule({ - … - imports: [ FormsModule, …] +```ts app.component.ts +//app.component.ts +import { FormsModule } from '@angular/forms'; + +@Component({ + // ... + imports: [ + // ..., + FormsModule + ], + // ... }) ``` diff --git a/packages/components/src/components/section/docs/Angular.md b/packages/components/src/components/section/docs/Angular.md index 08b404fde2d..3ca2e38db13 100644 --- a/packages/components/src/components/section/docs/Angular.md +++ b/packages/components/src/components/section/docs/Angular.md @@ -6,12 +6,12 @@ For general installation and configuration take a look at the [ngx-components](h ```ts app.component.ts // app.component.ts -import { DBSectionModule } from '@db-ui/ngx-components'; +import { DBSection } from '@db-ui/ngx-components'; @Component({ // ... standalone: true, - imports: [..., DBSectionModule], + imports: [..., DBSection], // ... }) ``` diff --git a/packages/components/src/components/select/docs/Angular.md b/packages/components/src/components/select/docs/Angular.md index d8c5a14b4d4..2296989b160 100644 --- a/packages/components/src/components/select/docs/Angular.md +++ b/packages/components/src/components/select/docs/Angular.md @@ -6,12 +6,12 @@ For general installation and configuration take a look at the [ngx-components](h ```ts app.component.ts // app.component.ts -import { DBSelectModule } from '@db-ui/ngx-components'; +import { DBSelect } from '@db-ui/ngx-components'; @Component({ // ... standalone: true, - imports: [..., DBSelectModule], + imports: [..., DBSelect], // ... }) ``` diff --git a/packages/components/src/components/tag/docs/Angular.md b/packages/components/src/components/tag/docs/Angular.md index 44ebc1e544a..9def54be794 100644 --- a/packages/components/src/components/tag/docs/Angular.md +++ b/packages/components/src/components/tag/docs/Angular.md @@ -6,12 +6,12 @@ For general installation and configuration take a look at the [ngx-components](h ```ts app.component.ts // app.component.ts -import { DBTagModule } from '@db-ui/ngx-components'; +import { DBTag } from '@db-ui/ngx-components'; @Component({ // ... standalone: true, - imports: [..., DBTagModule], + imports: [..., DBTag], // ... }) ``` diff --git a/packages/components/src/components/textarea/docs/Angular.md b/packages/components/src/components/textarea/docs/Angular.md index a20096ee088..f71070de391 100644 --- a/packages/components/src/components/textarea/docs/Angular.md +++ b/packages/components/src/components/textarea/docs/Angular.md @@ -6,12 +6,12 @@ For general installation and configuration look at the [ngx-components](https:// ```ts app.component.ts // app.component.ts -import { DBTextareaModule } from '@db-ui/ngx-components'; +import { DBTextarea } from '@db-ui/ngx-components'; @Component({ // ... standalone: true, - imports: [..., DBTextareaModule], + imports: [..., DBTextarea], // ... }) ``` diff --git a/packages/components/src/components/tooltip/docs/Angular.md b/packages/components/src/components/tooltip/docs/Angular.md index 9d2a94c3ef9..a2736ccce24 100644 --- a/packages/components/src/components/tooltip/docs/Angular.md +++ b/packages/components/src/components/tooltip/docs/Angular.md @@ -6,12 +6,12 @@ For general installation and configuration take a look at the [ngx-components](h ```ts app.component.ts // app.component.ts -import { DBTooltipModule } from '@db-ui/ngx-components'; +import { DBTooltip } from '@db-ui/ngx-components'; @Component({ // ... standalone: true, - imports: [..., DBTooltipModule], + imports: [..., DBTooltip], // ... }) ``` diff --git a/showcases/angular-showcase/angular.json b/showcases/angular-showcase/angular.json index 55e32cb6550..b90637810f9 100644 --- a/showcases/angular-showcase/angular.json +++ b/showcases/angular-showcase/angular.json @@ -20,7 +20,7 @@ "outputPath": "../../build-showcases/angular-showcase", "index": "src/index.html", "main": "src/main.ts", - "polyfills": "src/polyfills.ts", + "polyfills": ["zone.js"], "tsConfig": "tsconfig.app.json", "assets": ["src/assets"], "styles": ["src/styles.css"], diff --git a/showcases/angular-showcase/src/app/app.component.html b/showcases/angular-showcase/src/app/app.component.html index 7ea77868db8..310d106f6e5 100644 --- a/showcases/angular-showcase/src/app/app.component.html +++ b/showcases/angular-showcase/src/app/app.component.html @@ -1,65 +1,73 @@ -
- -
- - - - Showcase - - - - - - - - - - - - - - - - Search - - - - Profile - - - Notification - - - Help - - - +@if (page) {
- +} +@if (!page) { + + + + Showcase + + + @for (item of navigationItems; track item.label) { + + } + + + + @for (t of tonalities; track t) { + + } + + + @for (c of colors; track c) { + + } + + + + Search + + + + Profile + + + Notification + + + Help + + + +
+ +
+ +} diff --git a/showcases/angular-showcase/src/app/app.component.ts b/showcases/angular-showcase/src/app/app.component.ts index 9de35c53d06..5d2d64116db 100644 --- a/showcases/angular-showcase/src/app/app.component.ts +++ b/showcases/angular-showcase/src/app/app.component.ts @@ -1,5 +1,11 @@ -import { Component, type OnInit } from '@angular/core'; -import { ActivatedRoute, Router } from '@angular/router'; +import { Component, OnInit } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { ActivatedRoute, Router, RouterOutlet } from '@angular/router'; +import { DBSelect } from '../../../../output/angular/src/components/select/select'; +import { DBMainNavigation } from '../../../../output/angular/src/components/main-navigation/main-navigation'; +import { DBBrand } from '../../../../output/angular/src/components/brand/brand'; +import { DBHeader } from '../../../../output/angular/src/components/header/header'; +import { DBPage } from '../../../../output/angular/src/components/page/page'; import { COLOR, COLORS, @@ -8,6 +14,12 @@ import { COLOR_CONST, TONALITY_CONST } from '../../../../packages/components/src/shared/constants'; +import { DBButton } from '../../../../output/angular/src/components/button'; +import { ActionBarDirective } from '../../../../output/angular/src/components/header/ActionBar.directive'; +import { NavigationDirective } from '../../../../output/angular/src/components/header/Navigation.directive'; +import { MetaNavigationDirective } from '../../../../output/angular/src/components/header/MetaNavigation.directive'; +import { NavigationContentDirective } from '../../../../output/angular/src/components/navigation-item/NavigationContent.directive'; +import { NavItemComponent } from './nav-item/nav-item.component'; import { getSortedNavigationItems, NAVIGATION_ITEMS, @@ -16,6 +28,22 @@ import { @Component({ selector: 'app-root', + standalone: true, + imports: [ + FormsModule, + RouterOutlet, + NavItemComponent, + DBPage, + DBHeader, + DBBrand, + DBMainNavigation, + DBSelect, + DBButton, + ActionBarDirective, + NavigationDirective, + MetaNavigationDirective, + NavigationContentDirective + ], templateUrl: './app.component.html' }) export class AppComponent implements OnInit { @@ -28,8 +56,8 @@ export class AppComponent implements OnInit { tonality = TONALITY.REGULAR; color = COLOR.BASE; - page: string; - fullscreen: boolean; + page?: string; + fullscreen = false; constructor( private readonly router: Router, diff --git a/showcases/angular-showcase/src/app/app.module.ts b/showcases/angular-showcase/src/app/app.module.ts deleted file mode 100644 index 3da238ad72f..00000000000 --- a/showcases/angular-showcase/src/app/app.module.ts +++ /dev/null @@ -1,147 +0,0 @@ -import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; -import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { BrowserModule } from '@angular/platform-browser'; -import { - DBButtonModule, - DBCardModule, - DBDividerModule, - DBIconModule, - DBInputModule, - DBPageModule, - DBHeaderModule, - DBBrandModule, - DBLinkModule, - DBCheckboxModule, - DBRadioModule, - DBCodeDocsModule, - DBAlertModule, - DBSectionModule, - DBInfotextModule, - DBSelectModule, - DBDrawerModule, - DBTagModule, - DBNavigationItemModule, - DBAccordionModule, - DBAccordionItemModule, - DBTextareaModule, - DBMainNavigationModule, - DBBadgeModule, - DBPopoverModule, - DBTooltipModule -} from '../../../../output/angular/src'; -import { ActionBarDirective } from '../../../../output/angular/src/components/header/ActionBar.directive'; -import { NavigationDirective } from '../../../../output/angular/src/components/header/Navigation.directive'; -import { MetaNavigationDirective } from '../../../../output/angular/src/components/header/MetaNavigation.directive'; -import { NavigationContentDirective } from '../../../../output/angular/src/components/navigation-item/NavigationContent.directive'; -import { TooltipComponent } from './components/tooltip/tooltip.component'; -import { PopoverComponent } from './components/popover/popover.component'; -import { BadgeComponent } from './components/badge/badge.component'; -import { AppComponent } from './app.component'; -import { AppRoutingModule } from './app.routing.module'; -import { AccordionComponent } from './components/accordion/accordion.component'; -import { AccordionItemComponent } from './components/accordion-item/accordion-item.component'; -import { FormComponent } from './components/form/form.component'; -import { ButtonComponent } from './components/button/button.component'; -import { LinkComponent } from './components/link/link.component'; -import { InputComponent } from './components/input/input.component'; -import { AlertComponent } from './components/alert/alert.component'; -import { RadioComponent } from './components/radio/radio.component'; -import { CheckboxComponent } from './components/checkbox/checkbox.component'; -import { InfotextComponent } from './components/infotext/infotext.component'; -import { SectionComponent } from './components/section/section.component'; -import { CardComponent } from './components/card/card.component'; -import { DividerComponent } from './components/divider/divider.component'; -import { DefaultComponent } from './components/default.component'; -import { TagComponent } from './components/tag/tag.component'; -import { DrawerComponent } from './components/drawer/drawer.component'; -import { SelectComponent } from './components/select/select.component'; -import { NavigationItemComponent } from './components/navigation-item/navigation-item.component'; -import { NavItemComponent } from './nav-item/nav-item.component'; -import { MainNavigationComponent } from './components/main-navigation/main-navigation.component'; -import { TextareaComponent } from './components/textarea/textarea.component'; -import { IconComponent } from './components/icon/icon.component'; - -@NgModule({ - declarations: [ - IconComponent, - TooltipComponent, - - PopoverComponent, - - AccordionItemComponent, - AccordionComponent, - AlertComponent, - MainNavigationComponent, - BadgeComponent, - NavigationItemComponent, - SelectComponent, - TagComponent, - AppComponent, - ButtonComponent, - CardComponent, - CheckboxComponent, - DefaultComponent, - DividerComponent, - DrawerComponent, - FormComponent, - InfotextComponent, - InputComponent, - LinkComponent, - NavigationItemComponent, - RadioComponent, - SectionComponent, - CardComponent, - DividerComponent, - DrawerComponent, - ActionBarDirective, - NavigationDirective, - MetaNavigationDirective, - NavItemComponent, - NavigationContentDirective, - SelectComponent, - TagComponent, - TextareaComponent - ], - imports: [ - DBTooltipModule, - - DBPopoverModule, - - DBAccordionItemModule, - DBAccordionModule, - DBBadgeModule, - DBBadgeModule, - DBMainNavigationModule, - DBNavigationItemModule, - DBTagModule, - DBSelectModule, - AppRoutingModule, - BrowserModule, - DBAlertModule, - DBBrandModule, - DBButtonModule, - DBCardModule, - DBCheckboxModule, - DBCodeDocsModule, - DBDividerModule, - DBDrawerModule, - DBHeaderModule, - DBIconModule, - DBInfotextModule, - DBInputModule, - DBLinkModule, - DBNavigationItemModule, - DBPageModule, - DBRadioModule, - DBSectionModule, - DBSelectModule, - DBTagModule, - DBTextareaModule, - FormsModule, - ReactiveFormsModule - ], - providers: [], - schemas: [NO_ERRORS_SCHEMA], - bootstrap: [AppComponent] -}) -export class AppModule {} diff --git a/showcases/angular-showcase/src/app/app.routing.module.ts b/showcases/angular-showcase/src/app/app.routing.module.ts deleted file mode 100644 index 8d0539a8f47..00000000000 --- a/showcases/angular-showcase/src/app/app.routing.module.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; -import { RouterModule } from '@angular/router'; -import { getRoutes } from './utils/navigation-item'; - -const routes: any = getRoutes(); - -@NgModule({ - imports: [RouterModule.forRoot(routes, { useHash: true })], - exports: [RouterModule], - schemas: [NO_ERRORS_SCHEMA] -}) -export class AppRoutingModule {} diff --git a/showcases/angular-showcase/src/app/components/accordion-item/accordion-item.component.ts b/showcases/angular-showcase/src/app/components/accordion-item/accordion-item.component.ts index 03f2a40e491..a107f5749ac 100644 --- a/showcases/angular-showcase/src/app/components/accordion-item/accordion-item.component.ts +++ b/showcases/angular-showcase/src/app/components/accordion-item/accordion-item.component.ts @@ -1,9 +1,13 @@ import { Component } from '@angular/core'; import defaultComponentVariants from '../../../../../shared/accordion-item.json'; +import { DBAccordionItem } from '../../../../../../output/angular/src/components/accordion-item'; +import { DefaultComponent } from '../default.component'; @Component({ selector: 'app-accordion-item', - templateUrl: './accordion-item.component.html' + templateUrl: './accordion-item.component.html', + imports: [DefaultComponent, DBAccordionItem], + standalone: true }) export class AccordionItemComponent { variants = defaultComponentVariants; diff --git a/showcases/angular-showcase/src/app/components/accordion/accordion.component.ts b/showcases/angular-showcase/src/app/components/accordion/accordion.component.ts index 22477f21d93..84c829017c5 100644 --- a/showcases/angular-showcase/src/app/components/accordion/accordion.component.ts +++ b/showcases/angular-showcase/src/app/components/accordion/accordion.component.ts @@ -1,9 +1,15 @@ import { Component } from '@angular/core'; +import { DBAccordion } from '../../../../../../output/angular/src/components/accordion/accordion'; import defaultComponentVariants from '../../../../../shared/accordion.json'; +import { DefaultComponent } from '../default.component'; +import { DBInfotext } from '../../../../../../output/angular/src/components/infotext'; +import { DBAccordionItem } from '../../../../../../output/angular/src/components/accordion-item'; @Component({ selector: 'app-accordion', - templateUrl: './accordion.component.html' + templateUrl: './accordion.component.html', + imports: [DefaultComponent, DBInfotext, DBAccordion, DBAccordionItem], + standalone: true }) export class AccordionComponent { variants = defaultComponentVariants; diff --git a/showcases/angular-showcase/src/app/components/alert/alert.component.ts b/showcases/angular-showcase/src/app/components/alert/alert.component.ts index 6e6551563c3..ad2844bae7d 100644 --- a/showcases/angular-showcase/src/app/components/alert/alert.component.ts +++ b/showcases/angular-showcase/src/app/components/alert/alert.component.ts @@ -1,9 +1,13 @@ import { Component } from '@angular/core'; +import { DBAlert } from '../../../../../../output/angular/src/components/alert/alert'; import defaultComponentVariants from '../../../../../shared/alert.json'; +import { DefaultComponent } from '../default.component'; @Component({ selector: 'app-alert', - templateUrl: './alert.component.html' + templateUrl: './alert.component.html', + imports: [DefaultComponent, DBAlert], + standalone: true }) export class AlertComponent { variants = defaultComponentVariants; diff --git a/showcases/angular-showcase/src/app/components/badge/badge.component.html b/showcases/angular-showcase/src/app/components/badge/badge.component.html index 5b529d645d6..4ea0dd775da 100644 --- a/showcases/angular-showcase/src/app/components/badge/badge.component.html +++ b/showcases/angular-showcase/src/app/components/badge/badge.component.html @@ -10,30 +10,25 @@ let-exampleIndex="exampleIndex" let-variantIndex="variantIndex" > - + @if (!exampleProps.placement && !exampleProps.example) { {{ exampleProps.noContent ? "" : exampleName }} - - {{ exampleName }} - - + @if (exampleProps.noContent) { + + {{ exampleName }} + + } + } - + @if ( + exampleProps.placement && + exampleProps.placement !== "inline" && + !exampleProps.example + ) { {{ exampleName }} - + } - + @if (exampleProps.placement === "inline") {
{{ exampleName }} @@ -57,9 +52,9 @@
- + } - + @if (exampleProps.example === "icon") { {{ exampleName }} - + } - + @if (exampleProps.example === "number") { 9 12 123 @@ -87,7 +82,7 @@ {{ exampleName }} - + + } diff --git a/showcases/angular-showcase/src/app/components/badge/badge.component.ts b/showcases/angular-showcase/src/app/components/badge/badge.component.ts index 837da281a39..4abc2550518 100644 --- a/showcases/angular-showcase/src/app/components/badge/badge.component.ts +++ b/showcases/angular-showcase/src/app/components/badge/badge.component.ts @@ -1,9 +1,16 @@ import { Component } from '@angular/core'; +import { DBIcon } from '../../../../../../output/angular/src/components/icon/icon'; +import { DBBadge } from '../../../../../../output/angular/src/components/badge/badge'; import defaultComponentVariants from '../../../../../shared/badge.json'; +import { DefaultComponent } from '../default.component'; +import { DBInfotext } from '../../../../../../output/angular/src/components/infotext'; +import { DBButton } from '../../../../../../output/angular/src/components/button'; @Component({ selector: 'app-badge', - templateUrl: './badge.component.html' + templateUrl: './badge.component.html', + imports: [DefaultComponent, DBBadge, DBInfotext, DBButton, DBIcon], + standalone: true }) export class BadgeComponent { variants = defaultComponentVariants; diff --git a/showcases/angular-showcase/src/app/components/button/button.component.ts b/showcases/angular-showcase/src/app/components/button/button.component.ts index 5534d0aaa79..2f0bff3d72b 100644 --- a/showcases/angular-showcase/src/app/components/button/button.component.ts +++ b/showcases/angular-showcase/src/app/components/button/button.component.ts @@ -1,9 +1,13 @@ import { Component } from '@angular/core'; import defaultComponentVariants from '../../../../../shared/button.json'; +import { DefaultComponent } from '../default.component'; +import { DBButton } from '../../../../../../output/angular/src/components/button'; @Component({ selector: 'app-button', - templateUrl: './button.component.html' + templateUrl: './button.component.html', + imports: [DefaultComponent, DBButton], + standalone: true }) export class ButtonComponent { variants = defaultComponentVariants; diff --git a/showcases/angular-showcase/src/app/components/card/card.component.html b/showcases/angular-showcase/src/app/components/card/card.component.html index 6926400818a..9bb76ae1411 100644 --- a/showcases/angular-showcase/src/app/components/card/card.component.html +++ b/showcases/angular-showcase/src/app/components/card/card.component.html @@ -16,9 +16,9 @@ [spacing]="exampleProps.spacing" > {{ exampleName }} - {{ - exampleProps.colorVariant - }} + @if (exampleProps.colorVariant) { + {{ exampleProps.colorVariant }} + } diff --git a/showcases/angular-showcase/src/app/components/card/card.component.ts b/showcases/angular-showcase/src/app/components/card/card.component.ts index e252ca33eea..998331c8741 100644 --- a/showcases/angular-showcase/src/app/components/card/card.component.ts +++ b/showcases/angular-showcase/src/app/components/card/card.component.ts @@ -1,9 +1,13 @@ import { Component } from '@angular/core'; import defaultComponentVariants from '../../../../../shared/card.json'; +import { DefaultComponent } from '../default.component'; +import { DBCard } from '../../../../../../output/angular/src/components/card'; @Component({ selector: 'app-card', - templateUrl: './card.component.html' + templateUrl: './card.component.html', + imports: [DefaultComponent, DBCard], + standalone: true }) export class CardComponent { variants = defaultComponentVariants; diff --git a/showcases/angular-showcase/src/app/components/checkbox/checkbox.component.ts b/showcases/angular-showcase/src/app/components/checkbox/checkbox.component.ts index a774b462b11..f0c906600a1 100644 --- a/showcases/angular-showcase/src/app/components/checkbox/checkbox.component.ts +++ b/showcases/angular-showcase/src/app/components/checkbox/checkbox.component.ts @@ -1,9 +1,13 @@ import { Component } from '@angular/core'; +import { DBCheckbox } from '../../../../../../output/angular/src/components/checkbox/checkbox'; import defaultComponentVariants from '../../../../../shared/checkbox.json'; +import { DefaultComponent } from '../default.component'; @Component({ selector: 'app-checkbox', - templateUrl: './checkbox.component.html' + templateUrl: './checkbox.component.html', + imports: [DefaultComponent, DBCheckbox], + standalone: true }) export class CheckboxComponent { variants = defaultComponentVariants; diff --git a/showcases/angular-showcase/src/app/components/default.component.html b/showcases/angular-showcase/src/app/components/default.component.html index e95142d0b0a..8bae33dd158 100644 --- a/showcases/angular-showcase/src/app/components/default.component.html +++ b/showcases/angular-showcase/src/app/components/default.component.html @@ -1,56 +1,16 @@ - -
-
- - -
-
- - -
-

{{ title }}

-
- - - {{ variant.name }} - - -
-
+@if (variantRef) { + +
+ @for ( + example of variantRef.examples; + track example; + let exampleIndex = $index + ) { +
+ } +
+ +} + +@if (!variantRef) { +
+

{{ title }}

+ @for (variant of variants; track variant; let variantIndex = $index) { +
+ + + {{ variant.name }} + + +
+ @for ( + example of variant.examples; + track example; + let exampleIndex = $index + ) { +
+ + +
+ } +
+
- + }
-
+} diff --git a/showcases/angular-showcase/src/app/components/default.component.ts b/showcases/angular-showcase/src/app/components/default.component.ts index 55fa365e040..53b4b52d286 100644 --- a/showcases/angular-showcase/src/app/components/default.component.ts +++ b/showcases/angular-showcase/src/app/components/default.component.ts @@ -1,5 +1,15 @@ -import { Component, type OnInit, Input, TemplateRef } from '@angular/core'; +import { + Component, + OnInit, + Input, + TemplateRef, + NO_ERRORS_SCHEMA +} from '@angular/core'; +import { NgTemplateOutlet } from '@angular/common'; import { ActivatedRoute } from '@angular/router'; +import { DBLink } from '../../../../../output/angular/src/components/link/link'; +import { DBDivider } from '../../../../../output/angular/src/components/divider/divider'; +import { DBCodeDocs } from '../../../../../output/angular/src/components/code-docs/code-docs'; import type { DefaultComponentProps, DefaultComponentVariants, @@ -14,19 +24,22 @@ import { @Component({ selector: 'app-default-component', - templateUrl: './default.component.html' + templateUrl: './default.component.html', + imports: [DBCodeDocs, DBDivider, DBLink, NgTemplateOutlet], + standalone: true, + schemas: [NO_ERRORS_SCHEMA] }) export class DefaultComponent implements OnInit { @Input() title: DefaultComponentProps['title'] = ''; @Input() variants: DefaultComponentProps['variants'] = []; - @Input() exampleTemplate: TemplateRef; + @Input() exampleTemplate!: TemplateRef; tonality = TONALITY.REGULAR; color = COLOR.NEUTRAL; - page: string; + page?: string; variantRef: DefaultComponentVariants | undefined; - variantRefIndex: number; + variantRefIndex = 0; constructor(private readonly route: ActivatedRoute) {} diff --git a/showcases/angular-showcase/src/app/components/divider/divider.component.ts b/showcases/angular-showcase/src/app/components/divider/divider.component.ts index c810315cb63..016141b0aa2 100644 --- a/showcases/angular-showcase/src/app/components/divider/divider.component.ts +++ b/showcases/angular-showcase/src/app/components/divider/divider.component.ts @@ -1,9 +1,14 @@ import { Component } from '@angular/core'; import defaultComponentVariants from '../../../../../shared/divider.json'; +import { DefaultComponent } from '../default.component'; +import { DBDivider } from '../../../../../../output/angular/src/components/divider/divider'; +import { DBInfotext } from '../../../../../../output/angular/src/components/infotext'; @Component({ selector: 'app-divider', - templateUrl: './divider.component.html' + templateUrl: './divider.component.html', + imports: [DefaultComponent, DBDivider, DBInfotext], + standalone: true }) export class DividerComponent { variants = defaultComponentVariants; diff --git a/showcases/angular-showcase/src/app/components/drawer/drawer.component.ts b/showcases/angular-showcase/src/app/components/drawer/drawer.component.ts index e23de49d590..4e6da4d04cd 100644 --- a/showcases/angular-showcase/src/app/components/drawer/drawer.component.ts +++ b/showcases/angular-showcase/src/app/components/drawer/drawer.component.ts @@ -1,9 +1,14 @@ import { Component } from '@angular/core'; import defaultComponentVariants from '../../../../../shared/drawer.json'; +import { DefaultComponent } from '../default.component'; +import { DBDrawer } from '../../../../../../output/angular/src/components/drawer'; +import { DBButton } from '../../../../../../output/angular/src/components/button'; @Component({ selector: 'app-drawer', - templateUrl: './drawer.component.html' + templateUrl: './drawer.component.html', + imports: [DefaultComponent, DBDrawer, DBButton], + standalone: true }) export class DrawerComponent { variants = defaultComponentVariants; diff --git a/showcases/angular-showcase/src/app/components/form/form.component.html b/showcases/angular-showcase/src/app/components/form/form.component.html index d4dd5e12721..39431ec7655 100644 --- a/showcases/angular-showcase/src/app/components/form/form.component.html +++ b/showcases/angular-showcase/src/app/components/form/form.component.html @@ -96,15 +96,17 @@
Reactive Forms Example:

Radio:

    -
  • - -
    • + @for (radioName of array; track radioName) { +
  • + +
    • + }

Textarea:

@@ -121,15 +123,17 @@
Reactive Forms Example:

Tags:

    -
  • - {{ - getTagName(tag) - }} -
    • + @for (tag of array; track tag; let i = $index) { +
  • + {{ + getTagName(tag) + }} +
    • + }

Checkbox:

Reactive Forms Example: + [value]="select" + label="Label" + (change)="select = $event.target.value" + > + + + -->

Button:

Reset diff --git a/showcases/angular-showcase/src/app/components/form/form.component.ts b/showcases/angular-showcase/src/app/components/form/form.component.ts index 7df2c0b96aa..c74d12c4515 100644 --- a/showcases/angular-showcase/src/app/components/form/form.component.ts +++ b/showcases/angular-showcase/src/app/components/form/form.component.ts @@ -1,9 +1,38 @@ -import { Component } from '@angular/core'; -import { FormControl, FormGroup } from '@angular/forms'; +import { Component, NO_ERRORS_SCHEMA } from '@angular/core'; +import { + FormControl, + FormGroup, + FormsModule, + ReactiveFormsModule +} from '@angular/forms'; +import { DBTag } from '../../../../../../output/angular/src/components/tag/tag'; +import { DBRadio } from '../../../../../../output/angular/src/components/radio/radio'; +import { DBTextarea } from '../../../../../../output/angular/src/components/textarea/textarea'; +import { DBInput } from '../../../../../../output/angular/src/components/input/input'; +import { DefaultComponent } from '../default.component'; +import { DBSelect } from '../../../../../../output/angular/src/components/select/select'; +import { DBCheckbox } from '../../../../../../output/angular/src/components/checkbox/checkbox'; +import { DBDivider } from '../../../../../../output/angular/src/components/divider/divider'; +import { DBButton } from '../../../../../../output/angular/src/components/button'; @Component({ selector: 'app-form', - templateUrl: './form.component.html' + templateUrl: './form.component.html', + imports: [ + FormsModule, + ReactiveFormsModule, + DefaultComponent, + DBInput, + DBTextarea, + DBSelect, + DBRadio, + DBTag, + DBCheckbox, + DBDivider, + DBButton + ], + standalone: true, + schemas: [NO_ERRORS_SCHEMA] }) export class FormComponent { array = ['X', 'Y', 'Z']; diff --git a/showcases/angular-showcase/src/app/components/icon/icon.component.ts b/showcases/angular-showcase/src/app/components/icon/icon.component.ts index d57e581a656..bba4e75cbd9 100644 --- a/showcases/angular-showcase/src/app/components/icon/icon.component.ts +++ b/showcases/angular-showcase/src/app/components/icon/icon.component.ts @@ -1,9 +1,14 @@ import { Component } from '@angular/core'; import defaultComponentVariants from '../../../../../shared/icon.json'; +import { DefaultComponent } from '../default.component'; +import { DBIcon } from '../../../../../../output/angular/src/components/icon/icon'; +import { DBInfotext } from '../../../../../../output/angular/src/components/infotext'; @Component({ selector: 'app-icon', - templateUrl: './icon.component.html' + templateUrl: './icon.component.html', + imports: [DefaultComponent, DBIcon, DBInfotext], + standalone: true }) export class IconComponent { variants = defaultComponentVariants; diff --git a/showcases/angular-showcase/src/app/components/infotext/infotext.component.ts b/showcases/angular-showcase/src/app/components/infotext/infotext.component.ts index 16baa5864b8..0a1d768c274 100644 --- a/showcases/angular-showcase/src/app/components/infotext/infotext.component.ts +++ b/showcases/angular-showcase/src/app/components/infotext/infotext.component.ts @@ -1,9 +1,13 @@ import { Component } from '@angular/core'; import defaultComponentVariants from '../../../../../shared/infotext.json'; +import { DefaultComponent } from '../default.component'; +import { DBInfotext } from '../../../../../../output/angular/src/components/infotext'; @Component({ selector: 'app-infotext', - templateUrl: './infotext.component.html' + templateUrl: './infotext.component.html', + imports: [DefaultComponent, DBInfotext], + standalone: true }) export class InfotextComponent { variants = defaultComponentVariants; diff --git a/showcases/angular-showcase/src/app/components/input/input.component.ts b/showcases/angular-showcase/src/app/components/input/input.component.ts index d59a0003a98..89dbbf848b4 100644 --- a/showcases/angular-showcase/src/app/components/input/input.component.ts +++ b/showcases/angular-showcase/src/app/components/input/input.component.ts @@ -1,9 +1,13 @@ import { Component } from '@angular/core'; import defaultComponentVariants from '../../../../../shared/input.json'; +import { DefaultComponent } from '../default.component'; +import { DBInput } from '../../../../../../output/angular/src/components/input/input'; @Component({ selector: 'app-input', - templateUrl: './input.component.html' + templateUrl: './input.component.html', + imports: [DefaultComponent, DBInput], + standalone: true }) export class InputComponent { variants = defaultComponentVariants; diff --git a/showcases/angular-showcase/src/app/components/link/link.component.ts b/showcases/angular-showcase/src/app/components/link/link.component.ts index 565821fc6e2..30feabdc817 100644 --- a/showcases/angular-showcase/src/app/components/link/link.component.ts +++ b/showcases/angular-showcase/src/app/components/link/link.component.ts @@ -1,9 +1,13 @@ import { Component } from '@angular/core'; import defaultComponentVariants from '../../../../../shared/link.json'; +import { DefaultComponent } from '../default.component'; +import { DBLink } from '../../../../../../output/angular/src/components/link'; @Component({ selector: 'app-link', - templateUrl: './link.component.html' + templateUrl: './link.component.html', + imports: [DefaultComponent, DBLink], + standalone: true }) export class LinkComponent { variants = defaultComponentVariants; diff --git a/showcases/angular-showcase/src/app/components/main-navigation/main-navigation.component.ts b/showcases/angular-showcase/src/app/components/main-navigation/main-navigation.component.ts index 78378a3b711..e11abe2e5ae 100644 --- a/showcases/angular-showcase/src/app/components/main-navigation/main-navigation.component.ts +++ b/showcases/angular-showcase/src/app/components/main-navigation/main-navigation.component.ts @@ -1,9 +1,20 @@ import { Component } from '@angular/core'; import defaultComponentVariants from '../../../../../shared/main-navigation.json'; +import { DefaultComponent } from '../default.component'; +import { DBMainNavigation } from '../../../../../../output/angular/src/components/main-navigation/main-navigation'; +import { DBNavigationItem } from '../../../../../../output/angular/src/components/navigation-item/navigation-item'; +import { NavigationContentDirective } from '../../../../../../output/angular/src/components/navigation-item/NavigationContent.directive'; @Component({ selector: 'app-main-navigation', - templateUrl: './main-navigation.component.html' + templateUrl: './main-navigation.component.html', + imports: [ + DefaultComponent, + DBMainNavigation, + DBNavigationItem, + NavigationContentDirective + ], + standalone: true }) export class MainNavigationComponent { variants = defaultComponentVariants; diff --git a/showcases/angular-showcase/src/app/components/navigation-item/navigation-item.component.html b/showcases/angular-showcase/src/app/components/navigation-item/navigation-item.component.html index 4ef1c7ae17f..259c20a394c 100644 --- a/showcases/angular-showcase/src/app/components/navigation-item/navigation-item.component.html +++ b/showcases/angular-showcase/src/app/components/navigation-item/navigation-item.component.html @@ -19,31 +19,33 @@ (click)="showAlert(exampleName)" > - {{ - exampleName - }} - {{ - exampleName - }} + @if (exampleProps.areaPopup) { + {{ exampleName }} + } + @if (!exampleProps.areaPopup) { + {{ exampleName }} + } - - - - Test1 - - - - - Test2 - - - - - Test3 - - - + @if (exampleProps.areaPopup) { + + + + Test1 + + + + + Test2 + + + + + Test3 + + + + } diff --git a/showcases/angular-showcase/src/app/components/navigation-item/navigation-item.component.ts b/showcases/angular-showcase/src/app/components/navigation-item/navigation-item.component.ts index 2a69d8c08d4..3d812d69e62 100644 --- a/showcases/angular-showcase/src/app/components/navigation-item/navigation-item.component.ts +++ b/showcases/angular-showcase/src/app/components/navigation-item/navigation-item.component.ts @@ -1,9 +1,14 @@ import { Component } from '@angular/core'; import defaultComponentVariants from '../../../../../shared/navigation-item.json'; +import { DefaultComponent } from '../default.component'; +import { DBNavigationItem } from '../../../../../../output/angular/src/components/navigation-item/navigation-item'; +import { NavigationContentDirective } from '../../../../../../output/angular/src/components/navigation-item/NavigationContent.directive'; @Component({ selector: 'app-navigation-item', - templateUrl: './navigation-item.component.html' + templateUrl: './navigation-item.component.html', + imports: [DefaultComponent, DBNavigationItem, NavigationContentDirective], + standalone: true }) export class NavigationItemComponent { variants = defaultComponentVariants; diff --git a/showcases/angular-showcase/src/app/components/popover/popover.component.ts b/showcases/angular-showcase/src/app/components/popover/popover.component.ts index d3e06adf5a5..c8fb319ccc8 100644 --- a/showcases/angular-showcase/src/app/components/popover/popover.component.ts +++ b/showcases/angular-showcase/src/app/components/popover/popover.component.ts @@ -1,9 +1,14 @@ import { Component } from '@angular/core'; import defaultComponentVariants from '../../../../../shared/popover.json'; +import { DefaultComponent } from '../default.component'; +import { DBButton } from '../../../../../../output/angular/src/components/button'; +import { DBPopover } from '../../../../../../output/angular/src/components/popover/popover'; @Component({ selector: 'app-popover', - templateUrl: './popover.component.html' + templateUrl: './popover.component.html', + imports: [DefaultComponent, DBPopover, DBButton], + standalone: true }) export class PopoverComponent { variants = defaultComponentVariants; diff --git a/showcases/angular-showcase/src/app/components/radio/radio.component.ts b/showcases/angular-showcase/src/app/components/radio/radio.component.ts index 0adc74a18f3..183f15128fe 100644 --- a/showcases/angular-showcase/src/app/components/radio/radio.component.ts +++ b/showcases/angular-showcase/src/app/components/radio/radio.component.ts @@ -1,9 +1,13 @@ import { Component } from '@angular/core'; import defaultComponentVariants from '../../../../../shared/radio.json'; +import { DefaultComponent } from '../default.component'; +import { DBRadio } from '../../../../../../output/angular/src/components/radio/radio'; @Component({ selector: 'app-radio', - templateUrl: './radio.component.html' + templateUrl: './radio.component.html', + imports: [DefaultComponent, DBRadio], + standalone: true }) export class RadioComponent { variants = defaultComponentVariants; diff --git a/showcases/angular-showcase/src/app/components/section/section.component.ts b/showcases/angular-showcase/src/app/components/section/section.component.ts index 74a5b56bab3..515c9473ea0 100644 --- a/showcases/angular-showcase/src/app/components/section/section.component.ts +++ b/showcases/angular-showcase/src/app/components/section/section.component.ts @@ -1,9 +1,13 @@ import { Component } from '@angular/core'; import defaultComponentVariants from '../../../../../shared/section.json'; +import { DefaultComponent } from '../default.component'; +import { DBSection } from '../../../../../../output/angular/src/components/section/section'; @Component({ selector: 'app-section', - templateUrl: './section.component.html' + templateUrl: './section.component.html', + imports: [DefaultComponent, DBSection], + standalone: true }) export class SectionComponent { variants = defaultComponentVariants; diff --git a/showcases/angular-showcase/src/app/components/select/select.component.ts b/showcases/angular-showcase/src/app/components/select/select.component.ts index aa494507cf1..647e81218b9 100644 --- a/showcases/angular-showcase/src/app/components/select/select.component.ts +++ b/showcases/angular-showcase/src/app/components/select/select.component.ts @@ -1,9 +1,13 @@ import { Component } from '@angular/core'; import defaultComponentVariants from '../../../../../shared/select.json'; +import { DefaultComponent } from '../default.component'; +import { DBSelect } from '../../../../../../output/angular/src/components/select/select'; @Component({ selector: 'app-select', - templateUrl: './select.component.html' + templateUrl: './select.component.html', + imports: [DefaultComponent, DBSelect], + standalone: true }) export class SelectComponent { variants = defaultComponentVariants; diff --git a/showcases/angular-showcase/src/app/components/tag/tag.component.html b/showcases/angular-showcase/src/app/components/tag/tag.component.html index e184252e0a2..21e2e8bb548 100644 --- a/showcases/angular-showcase/src/app/components/tag/tag.component.html +++ b/showcases/angular-showcase/src/app/components/tag/tag.component.html @@ -19,32 +19,30 @@ [removeButton]="exampleProps.removeButton" (onRemove)="showAlert(exampleName)" > - {{ - exampleName - }} - + @if (exampleProps.component === "button") { + {{ exampleName }} + } + @if (exampleProps.component === "link") { + + {{ exampleName }} + + } + @if (exampleProps.component === "checkbox") { + {{ + exampleName + }} + } + @if (exampleProps.component === "radio") { + {{ + exampleName + }} + } + @if (!exampleProps.component && !exampleProps.overflow) { {{ exampleName }} - - {{ exampleName }} - {{ exampleName }} - {{ exampleName }} - + } + @if (!exampleProps.component && exampleProps.overflow) { {{ exampleName }} - + } diff --git a/showcases/angular-showcase/src/app/components/tag/tag.component.ts b/showcases/angular-showcase/src/app/components/tag/tag.component.ts index f216aa8e418..f4674eaec61 100644 --- a/showcases/angular-showcase/src/app/components/tag/tag.component.ts +++ b/showcases/angular-showcase/src/app/components/tag/tag.component.ts @@ -1,9 +1,17 @@ import { Component } from '@angular/core'; import defaultComponentVariants from '../../../../../shared/tag.json'; +import { DefaultComponent } from '../default.component'; +import { DBTag } from '../../../../../../output/angular/src/components/tag/tag'; +import { DBButton } from '../../../../../../output/angular/src/components/button'; +import { DBCheckbox } from '../../../../../../output/angular/src/components/checkbox/checkbox'; +import { DBRadio } from '../../../../../../output/angular/src/components/radio/radio'; +import { DBLink } from '../../../../../../output/angular/src/components/link'; @Component({ selector: 'app-tag', - templateUrl: './tag.component.html' + templateUrl: './tag.component.html', + imports: [DefaultComponent, DBTag, DBButton, DBCheckbox, DBRadio, DBLink], + standalone: true }) export class TagComponent { variants = defaultComponentVariants; diff --git a/showcases/angular-showcase/src/app/components/textarea/textarea.component.ts b/showcases/angular-showcase/src/app/components/textarea/textarea.component.ts index 19185cabad9..7b664525110 100644 --- a/showcases/angular-showcase/src/app/components/textarea/textarea.component.ts +++ b/showcases/angular-showcase/src/app/components/textarea/textarea.component.ts @@ -1,9 +1,13 @@ import { Component } from '@angular/core'; import defaultComponentVariants from '../../../../../shared/textarea.json'; +import { DefaultComponent } from '../default.component'; +import { DBTextarea } from '../../../../../../output/angular/src/components/textarea/textarea'; @Component({ selector: 'app-textarea', - templateUrl: './textarea.component.html' + templateUrl: './textarea.component.html', + imports: [DefaultComponent, DBTextarea], + standalone: true }) export class TextareaComponent { variants = defaultComponentVariants; diff --git a/showcases/angular-showcase/src/app/components/tooltip/tooltip.component.ts b/showcases/angular-showcase/src/app/components/tooltip/tooltip.component.ts index 320bda6c3f3..4d7ceed85de 100644 --- a/showcases/angular-showcase/src/app/components/tooltip/tooltip.component.ts +++ b/showcases/angular-showcase/src/app/components/tooltip/tooltip.component.ts @@ -1,9 +1,14 @@ import { Component } from '@angular/core'; import defaultComponentVariants from '../../../../../shared/tooltip.json'; +import { DefaultComponent } from '../default.component'; +import { DBButton } from '../../../../../../output/angular/src/components/button'; +import { DBTooltip } from '../../../../../../output/angular/src/components/tooltip/tooltip'; @Component({ selector: 'app-tooltip', - templateUrl: './tooltip.component.html' + templateUrl: './tooltip.component.html', + imports: [DefaultComponent, DBTooltip, DBButton], + standalone: true }) export class TooltipComponent { variants = defaultComponentVariants; diff --git a/showcases/angular-showcase/src/app/nav-item/nav-item.component.html b/showcases/angular-showcase/src/app/nav-item/nav-item.component.html index a34c263c9b6..1e379ec3aaf 100644 --- a/showcases/angular-showcase/src/app/nav-item/nav-item.component.html +++ b/showcases/angular-showcase/src/app/nav-item/nav-item.component.html @@ -1,23 +1,24 @@ - - - - +@if (navItem) { + + @if (navItem.subNavigation) { + + @for (item of navItem.subNavigation; track item.label) { + + } + + } + + @if (navItem.component) { + + {{ navItem.label }} + + } + @if (!navItem.component) { + {{ navItem.label }} + } - - - - {{ navItem.label }} - - {{ - navItem.label - }} - - + +} diff --git a/showcases/angular-showcase/src/app/nav-item/nav-item.component.ts b/showcases/angular-showcase/src/app/nav-item/nav-item.component.ts index 160da1a45b5..028b841dd7e 100644 --- a/showcases/angular-showcase/src/app/nav-item/nav-item.component.ts +++ b/showcases/angular-showcase/src/app/nav-item/nav-item.component.ts @@ -1,13 +1,17 @@ -import { Router } from '@angular/router'; +import { Router, RouterLink } from '@angular/router'; import { Component, Input } from '@angular/core'; import { NavItem } from '../utils/navigation-item'; +import { NavigationContentDirective } from '../../../../../output/angular/src/components/navigation-item/NavigationContent.directive'; +import { DBNavigationItem } from '../../../../../output/angular/src/components/navigation-item/navigation-item'; @Component({ selector: 'app-nav-item', - templateUrl: './nav-item.component.html' + templateUrl: './nav-item.component.html', + imports: [RouterLink, DBNavigationItem, NavigationContentDirective], + standalone: true }) export class NavItemComponent { - @Input('navItem') navItem: NavItem; + @Input({ required: true }) navItem!: NavItem; constructor(private readonly router: Router) {} isActive = () => diff --git a/showcases/angular-showcase/src/main.ts b/showcases/angular-showcase/src/main.ts index cb793dadbd5..441f8c22fcb 100644 --- a/showcases/angular-showcase/src/main.ts +++ b/showcases/angular-showcase/src/main.ts @@ -1,15 +1,15 @@ import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; +import { bootstrapApplication } from '@angular/platform-browser'; +import { provideRouter, withHashLocation } from '@angular/router'; import { environment } from './environments/environment'; +import { AppComponent } from './app/app.component'; +import { getRoutes } from './app/utils/navigation-item'; if (environment.production) { enableProdMode(); } -platformBrowserDynamic() - .bootstrapModule(AppModule) - - .catch((error) => { - console.error(error); - }); +// eslint-disable-next-line @typescript-eslint/no-floating-promises +bootstrapApplication(AppComponent, { + providers: [provideRouter(getRoutes(), withHashLocation())] +}); diff --git a/showcases/angular-showcase/src/polyfills.ts b/showcases/angular-showcase/src/polyfills.ts deleted file mode 100644 index e4555ed11fa..00000000000 --- a/showcases/angular-showcase/src/polyfills.ts +++ /dev/null @@ -1,52 +0,0 @@ -/** - * This file includes polyfills needed by Angular and is loaded before the app. - * You can add your own extra polyfills to this file. - * - * This file is divided into 2 sections: - * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. - * 2. Application imports. Files imported after ZoneJS that should be loaded before your main - * file. - * - * The current setup is for so-called "evergreen" browsers; the last versions of browsers that - * automatically update themselves. This includes recent versions of Safari, Chrome (including - * Opera), Edge on the desktop, and iOS and Chrome on mobile. - * - * Learn more in https://angular.io/guide/browser-support - */ - -/*************************************************************************************************** - * BROWSER POLYFILLS - */ - -/** - * By default, zone.js will patch all possible macroTask and DomEvents - * user can disable parts of macroTask/DomEvents patch by setting following flags - * because those flags need to be set before `zone.js` being loaded, and webpack - * will put import in the top of bundle, so user need to create a separate file - * in this directory (for example: zone-flags.ts), and put the following flags - * into that file, and then add the following code before importing zone.js. - * import './zone-flags'; - * - * The flags allowed in zone-flags.ts are listed here. - * - * The following flags will work for all browsers. - * - * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame - * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick - * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames - * - * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js - * with the following flag, it will bypass `zone.js` patch for IE/Edge - * - * (window as any).__Zone_enable_cross_context_check = true; - * - */ - -/*************************************************************************************************** - * Zone JS is required by default for Angular itself. - */ -import 'zone.js'; // Included with Angular CLI. - -/*************************************************************************************************** - * APPLICATION IMPORTS - */ diff --git a/showcases/angular-showcase/tsconfig.app.json b/showcases/angular-showcase/tsconfig.app.json index 8e60b99eae1..109326f8af8 100644 --- a/showcases/angular-showcase/tsconfig.app.json +++ b/showcases/angular-showcase/tsconfig.app.json @@ -1,10 +1,9 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ { "extends": "./tsconfig.json", "compilerOptions": { "outDir": "./out-tsc/app", "types": [] }, - "files": ["src/main.ts", "src/polyfills.ts"], + "files": ["src/main.ts"], "include": ["src/**/*.d.ts"] } diff --git a/showcases/angular-showcase/tsconfig.json b/showcases/angular-showcase/tsconfig.json index c912e93f5a5..02a41b8cb2b 100644 --- a/showcases/angular-showcase/tsconfig.json +++ b/showcases/angular-showcase/tsconfig.json @@ -1,31 +1,25 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ { "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "forceConsistentCasingInFileNames": true, + "esModuleInterop": true, "strict": true, "noImplicitOverride": true, - "strictPropertyInitialization": false, "noPropertyAccessFromIndexSignature": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, "sourceMap": true, "declaration": false, - "downlevelIteration": true, "experimentalDecorators": true, "moduleResolution": "node", "importHelpers": true, "resolveJsonModule": true, - "esModuleInterop": true, "target": "ES2022", - "module": "es2020", - "lib": ["es2020", "dom"], - "paths": { - "@angular/*": ["../../node_modules/@angular/*"] - }, - "useDefineForClassFields": false + "module": "ES2022", + "useDefineForClassFields": false, + "lib": ["ES2022", "dom"] }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, diff --git a/showcases/playwright.config.ts b/showcases/playwright.config.ts index b3ba2e561ab..fc07ecd0c51 100644 --- a/showcases/playwright.config.ts +++ b/showcases/playwright.config.ts @@ -8,7 +8,7 @@ import { devices, type PlaywrightTestConfig } from '@playwright/test'; const config: PlaywrightTestConfig = { testDir: './e2e', - // Example: __snapshots__/alert/showcase/chromium/functional/neutral-0/DBAlert-should-match-screenshit.png + // Example: __snapshots__/alert/showcase/chromium/functional/neutral-0/DBAlert-should-match-screenshot.png snapshotPathTemplate: '{snapshotDir}/{testFileDir}/showcase/{projectName}/{arg}/{testName}{ext}', snapshotDir: './../__snapshots__',