From 98f1b7c47afa0550a0bbd7dbff3e17e497af5270 Mon Sep 17 00:00:00 2001 From: MGREMY Date: Wed, 22 Jan 2025 15:37:09 +0100 Subject: [PATCH] feat: make flowbite-navbar-* usable as directive --- apps/docs/docs/components/navbar/component.md | 66 +++++++++++++++++++ .../{ => component}/_brand.component.html | 0 .../{ => component}/_brand.component.ts | 0 .../{ => component}/_default.component.html | 0 .../{ => component}/_default.component.ts | 0 .../{ => component}/_dropdown.component.html | 0 .../{ => component}/_dropdown.component.ts | 0 .../_responsive.component.html | 0 .../{ => component}/_responsive.component.ts | 0 .../navbar/directive/_brand.component.html | 10 +++ .../navbar/directive/_brand.component.ts | 15 +++++ .../navbar/directive/_default.component.html | 7 ++ .../navbar/directive/_default.component.ts | 14 ++++ .../navbar/directive/_dropdown.component.html | 15 +++++ .../navbar/directive/_dropdown.component.ts | 23 +++++++ .../directive/_responsive.component.html | 15 +++++ .../navbar/directive/_responsive.component.ts | 22 +++++++ apps/docs/docs/components/navbar/index.md | 27 ++++---- .../docs/components/navbar/ng-doc.page.ts | 26 +++++--- .../navbar/navbar-brand.component.ts | 8 ++- .../navbar/navbar-content.component.ts | 9 ++- .../navbar/navbar-icon-button.component.ts | 6 +- .../navbar/navbar-item.component.ts | 5 +- .../navbar/navbar-toggle.component.ts | 5 +- .../navbar/navbar.component.ts | 5 +- 25 files changed, 248 insertions(+), 30 deletions(-) create mode 100644 apps/docs/docs/components/navbar/component.md rename apps/docs/docs/components/navbar/{ => component}/_brand.component.html (100%) rename apps/docs/docs/components/navbar/{ => component}/_brand.component.ts (100%) rename apps/docs/docs/components/navbar/{ => component}/_default.component.html (100%) rename apps/docs/docs/components/navbar/{ => component}/_default.component.ts (100%) rename apps/docs/docs/components/navbar/{ => component}/_dropdown.component.html (100%) rename apps/docs/docs/components/navbar/{ => component}/_dropdown.component.ts (100%) rename apps/docs/docs/components/navbar/{ => component}/_responsive.component.html (100%) rename apps/docs/docs/components/navbar/{ => component}/_responsive.component.ts (100%) create mode 100644 apps/docs/docs/components/navbar/directive/_brand.component.html create mode 100644 apps/docs/docs/components/navbar/directive/_brand.component.ts create mode 100644 apps/docs/docs/components/navbar/directive/_default.component.html create mode 100644 apps/docs/docs/components/navbar/directive/_default.component.ts create mode 100644 apps/docs/docs/components/navbar/directive/_dropdown.component.html create mode 100644 apps/docs/docs/components/navbar/directive/_dropdown.component.ts create mode 100644 apps/docs/docs/components/navbar/directive/_responsive.component.html create mode 100644 apps/docs/docs/components/navbar/directive/_responsive.component.ts diff --git a/apps/docs/docs/components/navbar/component.md b/apps/docs/docs/components/navbar/component.md new file mode 100644 index 00000000..054ebe84 --- /dev/null +++ b/apps/docs/docs/components/navbar/component.md @@ -0,0 +1,66 @@ +--- +title: Navbar Component +route: component +keyword: NavbarPage +--- + +{% import "../../shared/component-deprecated-usage.md" as cdu %} + +{{ cdu.deprecated() }} + +## Default navbar + +{{ NgDocActions.demo('c_default', {container: false}) }} + +```angular-html file="./component/_default.component.html" group="default" name="html" + +``` + +```angular-ts file="./component/_default.component.ts"#L1-L5 group="default" name="typescript" + +``` + +## Navbar with brand + +Use this example to display a brand element inside the navbar by importing the +`NavbarBrandComponent` component. + +{{ NgDocActions.demo('c_brand', {container: false}) }} + +```angular-html file="./component/_brand.component.html" group="brand" name="html" + +``` + +```angular-ts file="./component/_brand.component.ts"#L1-L6 group="brand" name="typescript" + +``` + +## Navbar with dropdown + +Use this example to feature a dropdown menu when clicking on the settings dropdown inside the navbar +by importing the `DropdownComponent` and `DropdownItemComponent` components. + +{{ NgDocActions.demo('c_dropdown', {container: false}) }} + +```angular-html file="./component/_dropdown.component.html" group="dropdown" name="html" + +``` + +```angular-ts file="./component/_dropdown.component.ts"#L1-L7 group="dropdown" name="typescript" + +``` + +## Responsive navbar + +On mobile device the navigation bar will be collapsed and you will be able to use the hamburger menu +to toggle the menu items by adding the `NavbarToggleComponent` component. + +{{ NgDocActions.demo('c_responsive', {container: false}) }} + +```angular-html file="./component/_responsive.component.html" group="responsive" name="html" + +``` + +```angular-ts file="./component/_responsive.component.ts"#L1-L7 group="responsive" name="typescript" + +``` diff --git a/apps/docs/docs/components/navbar/_brand.component.html b/apps/docs/docs/components/navbar/component/_brand.component.html similarity index 100% rename from apps/docs/docs/components/navbar/_brand.component.html rename to apps/docs/docs/components/navbar/component/_brand.component.html diff --git a/apps/docs/docs/components/navbar/_brand.component.ts b/apps/docs/docs/components/navbar/component/_brand.component.ts similarity index 100% rename from apps/docs/docs/components/navbar/_brand.component.ts rename to apps/docs/docs/components/navbar/component/_brand.component.ts diff --git a/apps/docs/docs/components/navbar/_default.component.html b/apps/docs/docs/components/navbar/component/_default.component.html similarity index 100% rename from apps/docs/docs/components/navbar/_default.component.html rename to apps/docs/docs/components/navbar/component/_default.component.html diff --git a/apps/docs/docs/components/navbar/_default.component.ts b/apps/docs/docs/components/navbar/component/_default.component.ts similarity index 100% rename from apps/docs/docs/components/navbar/_default.component.ts rename to apps/docs/docs/components/navbar/component/_default.component.ts diff --git a/apps/docs/docs/components/navbar/_dropdown.component.html b/apps/docs/docs/components/navbar/component/_dropdown.component.html similarity index 100% rename from apps/docs/docs/components/navbar/_dropdown.component.html rename to apps/docs/docs/components/navbar/component/_dropdown.component.html diff --git a/apps/docs/docs/components/navbar/_dropdown.component.ts b/apps/docs/docs/components/navbar/component/_dropdown.component.ts similarity index 100% rename from apps/docs/docs/components/navbar/_dropdown.component.ts rename to apps/docs/docs/components/navbar/component/_dropdown.component.ts diff --git a/apps/docs/docs/components/navbar/_responsive.component.html b/apps/docs/docs/components/navbar/component/_responsive.component.html similarity index 100% rename from apps/docs/docs/components/navbar/_responsive.component.html rename to apps/docs/docs/components/navbar/component/_responsive.component.html diff --git a/apps/docs/docs/components/navbar/_responsive.component.ts b/apps/docs/docs/components/navbar/component/_responsive.component.ts similarity index 100% rename from apps/docs/docs/components/navbar/_responsive.component.ts rename to apps/docs/docs/components/navbar/component/_responsive.component.ts diff --git a/apps/docs/docs/components/navbar/directive/_brand.component.html b/apps/docs/docs/components/navbar/directive/_brand.component.html new file mode 100644 index 00000000..dc8270c7 --- /dev/null +++ b/apps/docs/docs/components/navbar/directive/_brand.component.html @@ -0,0 +1,10 @@ + diff --git a/apps/docs/docs/components/navbar/directive/_brand.component.ts b/apps/docs/docs/components/navbar/directive/_brand.component.ts new file mode 100644 index 00000000..58d80830 --- /dev/null +++ b/apps/docs/docs/components/navbar/directive/_brand.component.ts @@ -0,0 +1,15 @@ +import { + NavbarBrandComponent, + NavbarComponent, + NavbarContentComponent, + NavbarItemComponent, +} from 'flowbite-angular/navbar'; + +import { Component } from '@angular/core'; + +@Component({ + selector: 'flowbite-demo-navbar-brand', + imports: [NavbarComponent, NavbarItemComponent, NavbarContentComponent, NavbarBrandComponent], + templateUrl: './_brand.component.html', +}) +export class FlowbiteBrandComponent {} diff --git a/apps/docs/docs/components/navbar/directive/_default.component.html b/apps/docs/docs/components/navbar/directive/_default.component.html new file mode 100644 index 00000000..1927cd1f --- /dev/null +++ b/apps/docs/docs/components/navbar/directive/_default.component.html @@ -0,0 +1,7 @@ + diff --git a/apps/docs/docs/components/navbar/directive/_default.component.ts b/apps/docs/docs/components/navbar/directive/_default.component.ts new file mode 100644 index 00000000..5ae3b3d9 --- /dev/null +++ b/apps/docs/docs/components/navbar/directive/_default.component.ts @@ -0,0 +1,14 @@ +import { + NavbarComponent, + NavbarContentComponent, + NavbarItemComponent, +} from 'flowbite-angular/navbar'; + +import { Component } from '@angular/core'; + +@Component({ + selector: 'flowbite-demo-navbar-default', + imports: [NavbarComponent, NavbarItemComponent, NavbarContentComponent], + templateUrl: './_default.component.html', +}) +export class FlowbiteDefaultComponent {} diff --git a/apps/docs/docs/components/navbar/directive/_dropdown.component.html b/apps/docs/docs/components/navbar/directive/_dropdown.component.html new file mode 100644 index 00000000..bdd1eb9d --- /dev/null +++ b/apps/docs/docs/components/navbar/directive/_dropdown.component.html @@ -0,0 +1,15 @@ + diff --git a/apps/docs/docs/components/navbar/directive/_dropdown.component.ts b/apps/docs/docs/components/navbar/directive/_dropdown.component.ts new file mode 100644 index 00000000..8cc36b92 --- /dev/null +++ b/apps/docs/docs/components/navbar/directive/_dropdown.component.ts @@ -0,0 +1,23 @@ +import { DropdownComponent, DropdownItemComponent } from 'flowbite-angular/dropdown'; +import { + NavbarBrandComponent, + NavbarComponent, + NavbarContentComponent, + NavbarItemComponent, +} from 'flowbite-angular/navbar'; + +import { Component } from '@angular/core'; + +@Component({ + selector: 'flowbite-demo-navbar-dropdown', + imports: [ + NavbarComponent, + NavbarContentComponent, + NavbarBrandComponent, + NavbarItemComponent, + DropdownComponent, + DropdownItemComponent, + ], + templateUrl: './_dropdown.component.html', +}) +export class FlowbiteDropdownComponent {} diff --git a/apps/docs/docs/components/navbar/directive/_responsive.component.html b/apps/docs/docs/components/navbar/directive/_responsive.component.html new file mode 100644 index 00000000..393d547c --- /dev/null +++ b/apps/docs/docs/components/navbar/directive/_responsive.component.html @@ -0,0 +1,15 @@ + diff --git a/apps/docs/docs/components/navbar/directive/_responsive.component.ts b/apps/docs/docs/components/navbar/directive/_responsive.component.ts new file mode 100644 index 00000000..ccfa68ce --- /dev/null +++ b/apps/docs/docs/components/navbar/directive/_responsive.component.ts @@ -0,0 +1,22 @@ +import { + NavbarBrandComponent, + NavbarComponent, + NavbarContentComponent, + NavbarItemComponent, + NavbarToggleComponent, +} from 'flowbite-angular/navbar'; + +import { Component } from '@angular/core'; + +@Component({ + selector: 'flowbite-demo-navbar-responsive', + imports: [ + NavbarComponent, + NavbarContentComponent, + NavbarItemComponent, + NavbarBrandComponent, + NavbarToggleComponent, + ], + templateUrl: './_responsive.component.html', +}) +export class FlowbiteResponsiveComponent {} diff --git a/apps/docs/docs/components/navbar/index.md b/apps/docs/docs/components/navbar/index.md index 60b09dea..ba7ed5d8 100644 --- a/apps/docs/docs/components/navbar/index.md +++ b/apps/docs/docs/components/navbar/index.md @@ -1,16 +1,17 @@ --- -keyword: NavbarPage +title: Navbar Directive +keyword: NavbarDirectivePage --- ## Default navbar -{{ NgDocActions.demo('flowbiteDefaultComponent', {container: false}) }} +{{ NgDocActions.demo('d_default', {container: false}) }} -```angular-html file="./_default.component.html" group="default" name="html" +```angular-html file="./directive/_default.component.html" group="default" name="html" ``` -```angular-ts file="./_default.component.ts"#L1-L5 group="default" name="typescript" +```angular-ts file="./directive/_default.component.ts"#L1-L5 group="default" name="typescript" ``` @@ -19,13 +20,13 @@ keyword: NavbarPage Use this example to display a brand element inside the navbar by importing the `NavbarBrandComponent` component. -{{ NgDocActions.demo('flowbiteBrandComponent', {container: false}) }} +{{ NgDocActions.demo('d_brand', {container: false}) }} -```angular-html file="./_brand.component.html" group="brand" name="html" +```angular-html file="./directive/_brand.component.html" group="brand" name="html" ``` -```angular-ts file="./_brand.component.ts"#L1-L6 group="brand" name="typescript" +```angular-ts file="./directive/_brand.component.ts"#L1-L6 group="brand" name="typescript" ``` @@ -34,13 +35,13 @@ Use this example to display a brand element inside the navbar by importing the Use this example to feature a dropdown menu when clicking on the settings dropdown inside the navbar by importing the `DropdownComponent` and `DropdownItemComponent` components. -{{ NgDocActions.demo('flowbiteDropdownComponent', {container: false}) }} +{{ NgDocActions.demo('d_dropdown', {container: false}) }} -```angular-html file="./_dropdown.component.html" group="dropdown" name="html" +```angular-html file="./directive/_dropdown.component.html" group="dropdown" name="html" ``` -```angular-ts file="./_dropdown.component.ts"#L1-L7 group="dropdown" name="typescript" +```angular-ts file="./directive/_dropdown.component.ts"#L1-L7 group="dropdown" name="typescript" ``` @@ -49,12 +50,12 @@ by importing the `DropdownComponent` and `DropdownItemComponent` components. On mobile device the navigation bar will be collapsed and you will be able to use the hamburger menu to toggle the menu items by adding the `NavbarToggleComponent` component. -{{ NgDocActions.demo('flowbiteResponsiveComponent', {container: false}) }} +{{ NgDocActions.demo('d_responsive', {container: false}) }} -```angular-html file="./_responsive.component.html" group="responsive" name="html" +```angular-html file="./directive/_responsive.component.html" group="responsive" name="html" ``` -```angular-ts file="./_responsive.component.ts"#L1-L7 group="responsive" name="typescript" +```angular-ts file="./directive/_responsive.component.ts"#L1-L7 group="responsive" name="typescript" ``` diff --git a/apps/docs/docs/components/navbar/ng-doc.page.ts b/apps/docs/docs/components/navbar/ng-doc.page.ts index da2d1fd6..7a29c524 100644 --- a/apps/docs/docs/components/navbar/ng-doc.page.ts +++ b/apps/docs/docs/components/navbar/ng-doc.page.ts @@ -1,8 +1,12 @@ import ComponentCategory from '../ng-doc.category'; -import { FlowbiteBrandComponent } from './_brand.component'; -import { FlowbiteDefaultComponent } from './_default.component'; -import { FlowbiteDropdownComponent } from './_dropdown.component'; -import { FlowbiteResponsiveComponent } from './_responsive.component'; +import { FlowbiteBrandComponent as c_brand } from './component/_brand.component'; +import { FlowbiteDefaultComponent as c_default } from './component/_default.component'; +import { FlowbiteDropdownComponent as c_dropdown } from './component/_dropdown.component'; +import { FlowbiteResponsiveComponent as c_responsive } from './component/_responsive.component'; +import { FlowbiteBrandComponent as d_brand } from './directive/_brand.component'; +import { FlowbiteDefaultComponent as d_default } from './directive/_default.component'; +import { FlowbiteDropdownComponent as d_dropdown } from './directive/_dropdown.component'; +import { FlowbiteResponsiveComponent as d_responsive } from './directive/_responsive.component'; import type { NgDocPage } from '@ng-doc/core'; @@ -13,14 +17,18 @@ import type { NgDocPage } from '@ng-doc/core'; */ const navbar: NgDocPage = { title: 'Navbar', - mdFile: './index.md', + mdFile: ['./index.md', './component.md'], category: ComponentCategory, order: 10, demos: { - flowbiteDefaultComponent: FlowbiteDefaultComponent, - flowbiteBrandComponent: FlowbiteBrandComponent, - flowbiteDropdownComponent: FlowbiteDropdownComponent, - flowbiteResponsiveComponent: FlowbiteResponsiveComponent, + c_brand: c_brand, + c_default: c_default, + c_dropdown: c_dropdown, + c_responsive: c_responsive, + d_brand: d_brand, + d_default: d_default, + d_dropdown: d_dropdown, + d_responsive: d_responsive, }, }; diff --git a/libs/flowbite-angular/navbar/navbar-brand.component.ts b/libs/flowbite-angular/navbar/navbar-brand.component.ts index 6147d031..be9f30a1 100644 --- a/libs/flowbite-angular/navbar/navbar-brand.component.ts +++ b/libs/flowbite-angular/navbar/navbar-brand.component.ts @@ -31,7 +31,13 @@ export const navbarBrandDefaultThemeProvider = makeEnvironmentProviders([ */ @Component({ standalone: true, - selector: 'flowbite-navbar-brand', + selector: ` + flowbite-navbar-brand, + span[flowbite-navbar-brand], + div[flowbite-navbar-brand], + a[flowbite-navbar-brand], + button[flowbite-navbar-brand] + `, template: ``, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/libs/flowbite-angular/navbar/navbar-content.component.ts b/libs/flowbite-angular/navbar/navbar-content.component.ts index 3ab08890..4f9f167b 100644 --- a/libs/flowbite-angular/navbar/navbar-content.component.ts +++ b/libs/flowbite-angular/navbar/navbar-content.component.ts @@ -34,11 +34,14 @@ export const navbarContentDefaultValueProvider = makeEnvironmentProviders([ */ @Component({ standalone: true, - selector: 'flowbite-navbar-content', + selector: ` + flowbite-navbar-content, + div[flowbite-navbar-content] + `, template: ` -
+
    -
+ `, host: { '[@isOpenAnimation]': 'navbarComponent().isOpen()', diff --git a/libs/flowbite-angular/navbar/navbar-icon-button.component.ts b/libs/flowbite-angular/navbar/navbar-icon-button.component.ts index b22298e3..bc097932 100644 --- a/libs/flowbite-angular/navbar/navbar-icon-button.component.ts +++ b/libs/flowbite-angular/navbar/navbar-icon-button.component.ts @@ -33,7 +33,11 @@ export const navbarIconButtonDefaultValueProvider = makeEnvironmentProviders([ */ @Component({ standalone: true, - selector: 'flowbite-navbar-icon-button', + selector: ` + flowbite-navbar-icon-button, + button[flowbite-navbar-icon-button], + a[flowbite-navbar-icon-button] + `, template: ``, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/libs/flowbite-angular/navbar/navbar-item.component.ts b/libs/flowbite-angular/navbar/navbar-item.component.ts index d782e429..3aa1cba1 100644 --- a/libs/flowbite-angular/navbar/navbar-item.component.ts +++ b/libs/flowbite-angular/navbar/navbar-item.component.ts @@ -34,7 +34,10 @@ export const navbarItemDefaultValueProvider = makeEnvironmentProviders([ */ @Component({ standalone: true, - selector: 'flowbite-navbar-item', + selector: ` + flowbite-navbar-item, + li[flowbite-navbar-item] + `, template: ``, host: { '(click)': 'onClick()', diff --git a/libs/flowbite-angular/navbar/navbar-toggle.component.ts b/libs/flowbite-angular/navbar/navbar-toggle.component.ts index 6b2c18d9..e01e695a 100644 --- a/libs/flowbite-angular/navbar/navbar-toggle.component.ts +++ b/libs/flowbite-angular/navbar/navbar-toggle.component.ts @@ -34,7 +34,10 @@ export const navbarToggleDefaultValueProvider = makeEnvironmentProviders([ */ @Component({ standalone: true, - selector: 'flowbite-navbar-toggle', + selector: ` + flowbite-navbar-toggle, + button[flowbite-navbar-toggle] + `, imports: [IconComponent], template: ` `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush,