From 7a81ceab37d965154fc87b6ee36bc77255f30a4f Mon Sep 17 00:00:00 2001 From: MGREMY Date: Mon, 20 Jan 2025 17:30:01 +0100 Subject: [PATCH 001/159] feat: make flowbite-button usable as directive --- apps/docs/docs/components/button/component.md | 141 ++++++++++++++++++ .../{ => component}/_default.component.html | 0 .../{ => component}/_default.component.ts | 0 .../{ => component}/_disabled.component.html | 0 .../{ => component}/_disabled.component.ts | 0 .../_gradient-duotone.component.html | 0 .../_gradient-duotone.component.ts | 0 .../_gradient-monochrome.component.html | 0 .../_gradient-monochrome.component.ts | 0 .../_gradient-outline.component.html | 0 .../_gradient-outline.component.ts | 0 .../{ => component}/_icon-only.component.html | 0 .../{ => component}/_icon-only.component.ts | 0 .../{ => component}/_icon.component.html | 0 .../button/{ => component}/_icon.component.ts | 0 .../{ => component}/_label.component.html | 0 .../{ => component}/_label.component.ts | 0 .../{ => component}/_outline.component.html | 0 .../{ => component}/_outline.component.ts | 0 .../{ => component}/_pill.component.html | 0 .../button/{ => component}/_pill.component.ts | 0 .../{ => component}/_size.component.html | 0 .../button/{ => component}/_size.component.ts | 0 .../button/directive/_default.component.html | 31 ++++ .../button/directive/_default.component.ts | 13 ++ .../button/directive/_disabled.component.html | 11 ++ .../button/directive/_disabled.component.ts | 13 ++ .../_gradient-duotone.component.html | 35 +++++ .../directive/_gradient-duotone.component.ts | 13 ++ .../_gradient-monochrome.component.html | 40 +++++ .../_gradient-monochrome.component.ts | 13 ++ .../_gradient-outline.component.html | 42 ++++++ .../directive/_gradient-outline.component.ts | 13 ++ .../directive/_icon-only.component.html | 27 ++++ .../button/directive/_icon-only.component.ts | 14 ++ .../button/directive/_icon.component.html | 12 ++ .../button/directive/_icon.component.ts | 14 ++ .../button/directive/_label.component.html | 8 + .../button/directive/_label.component.ts | 14 ++ .../button/directive/_outline.component.html | 35 +++++ .../button/directive/_outline.component.ts | 13 ++ .../button/directive/_pill.component.html | 36 +++++ .../button/directive/_pill.component.ts | 13 ++ .../button/directive/_size.component.html | 25 ++++ .../button/directive/_size.component.ts | 13 ++ apps/docs/docs/components/button/index.md | 69 ++++----- .../docs/components/button/ng-doc.page.ts | 68 ++++++--- .../docs/shared/component-deprecated-usage.md | 13 ++ .../button/button.component.ts | 8 +- 49 files changed, 688 insertions(+), 59 deletions(-) create mode 100644 apps/docs/docs/components/button/component.md rename apps/docs/docs/components/button/{ => component}/_default.component.html (100%) rename apps/docs/docs/components/button/{ => component}/_default.component.ts (100%) rename apps/docs/docs/components/button/{ => component}/_disabled.component.html (100%) rename apps/docs/docs/components/button/{ => component}/_disabled.component.ts (100%) rename apps/docs/docs/components/button/{ => component}/_gradient-duotone.component.html (100%) rename apps/docs/docs/components/button/{ => component}/_gradient-duotone.component.ts (100%) rename apps/docs/docs/components/button/{ => component}/_gradient-monochrome.component.html (100%) rename apps/docs/docs/components/button/{ => component}/_gradient-monochrome.component.ts (100%) rename apps/docs/docs/components/button/{ => component}/_gradient-outline.component.html (100%) rename apps/docs/docs/components/button/{ => component}/_gradient-outline.component.ts (100%) rename apps/docs/docs/components/button/{ => component}/_icon-only.component.html (100%) rename apps/docs/docs/components/button/{ => component}/_icon-only.component.ts (100%) rename apps/docs/docs/components/button/{ => component}/_icon.component.html (100%) rename apps/docs/docs/components/button/{ => component}/_icon.component.ts (100%) rename apps/docs/docs/components/button/{ => component}/_label.component.html (100%) rename apps/docs/docs/components/button/{ => component}/_label.component.ts (100%) rename apps/docs/docs/components/button/{ => component}/_outline.component.html (100%) rename apps/docs/docs/components/button/{ => component}/_outline.component.ts (100%) rename apps/docs/docs/components/button/{ => component}/_pill.component.html (100%) rename apps/docs/docs/components/button/{ => component}/_pill.component.ts (100%) rename apps/docs/docs/components/button/{ => component}/_size.component.html (100%) rename apps/docs/docs/components/button/{ => component}/_size.component.ts (100%) create mode 100644 apps/docs/docs/components/button/directive/_default.component.html create mode 100644 apps/docs/docs/components/button/directive/_default.component.ts create mode 100644 apps/docs/docs/components/button/directive/_disabled.component.html create mode 100644 apps/docs/docs/components/button/directive/_disabled.component.ts create mode 100644 apps/docs/docs/components/button/directive/_gradient-duotone.component.html create mode 100644 apps/docs/docs/components/button/directive/_gradient-duotone.component.ts create mode 100644 apps/docs/docs/components/button/directive/_gradient-monochrome.component.html create mode 100644 apps/docs/docs/components/button/directive/_gradient-monochrome.component.ts create mode 100644 apps/docs/docs/components/button/directive/_gradient-outline.component.html create mode 100644 apps/docs/docs/components/button/directive/_gradient-outline.component.ts create mode 100644 apps/docs/docs/components/button/directive/_icon-only.component.html create mode 100644 apps/docs/docs/components/button/directive/_icon-only.component.ts create mode 100644 apps/docs/docs/components/button/directive/_icon.component.html create mode 100644 apps/docs/docs/components/button/directive/_icon.component.ts create mode 100644 apps/docs/docs/components/button/directive/_label.component.html create mode 100644 apps/docs/docs/components/button/directive/_label.component.ts create mode 100644 apps/docs/docs/components/button/directive/_outline.component.html create mode 100644 apps/docs/docs/components/button/directive/_outline.component.ts create mode 100644 apps/docs/docs/components/button/directive/_pill.component.html create mode 100644 apps/docs/docs/components/button/directive/_pill.component.ts create mode 100644 apps/docs/docs/components/button/directive/_size.component.html create mode 100644 apps/docs/docs/components/button/directive/_size.component.ts create mode 100644 apps/docs/docs/shared/component-deprecated-usage.md diff --git a/apps/docs/docs/components/button/component.md b/apps/docs/docs/components/button/component.md new file mode 100644 index 00000000..58ca75bf --- /dev/null +++ b/apps/docs/docs/components/button/component.md @@ -0,0 +1,141 @@ +--- +title: Component +route: component +keyword: ButtonComponentPage +--- + +{% import "../../shared/component-deprecated-usage.md" as cdu %} + +{{ cdu.deprecated() }} + +## Default button + +{{ 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-L1 group="default" name="typescript" + +``` + +## Button pills + +{{ NgDocActions.demo('c_pill', {container: false}) }} + +```angular-html file="./component/_pill.component.html" group="pill" name="html" + +``` + +```angular-ts file="./component/_pill.component.ts"#L1-L1 group="pill" name="typescript" + +``` + +## Gradient monochrome + +{{ NgDocActions.demo('c_gradient_monochrome', {container: false}) }} + +```angular-html file="./component/_gradient-monochrome.component.html" group="gradient-monochrome" name="html" + +``` + +```angular-ts file="./component/_gradient-monochrome.component.ts"#L1-L1 group="gradient-monochrome" name="typescript" + +``` + +## Gradient duo-tone + +{{ NgDocActions.demo('c_gradient_duotone', {container: false}) }} + +```angular-html file="./component/_gradient-duotone.component.html" group="gradient-duotone" name="html" + +``` + +```angular-ts file="./component/_gradient-duotone.component.ts"#L1-L1 group="gradient-duotone" name="typescript" + +``` + +## Gradient outline + +{{ NgDocActions.demo('c_gradient_outline', {container: false}) }} + +```angular-html file="./component/_gradient-outline.component.html" group="gradient-outline" name="html" + +``` + +```angular-ts file="./component/_gradient-outline.component.ts"#L1-L1 group="gradient-outline" name="typescript" + +``` + +## Outline buttons + +{{ NgDocActions.demo('c_outline', {container: false}) }} + +```angular-html file="./component/_outline.component.html" group="outline" name="html" + +``` + +```angular-ts file="./component/_outline.component.ts"#L1-L1 group="outline" name="typescript" + +``` + +## Button sizes + +{{ NgDocActions.demo('c_size', {container: false}) }} + +```angular-html file="./component/_size.component.html" group="size" name="html" + +``` + +```angular-ts file="./component/_size.component.ts"#L1-L1 group="size" name="typescript" + +``` + +## Button with icon + +{{ NgDocActions.demo('c_icon', {container: false}) }} + +```angular-html file="./component/_icon.component.html" group="icon" name="html" + +``` + +```angular-ts file="./component/_icon.component.ts"#L1-L2 group="icon" name="typescript" + +``` + +## Button with label + +{{ NgDocActions.demo('c_label', {container: false}) }} + +```angular-html file="./component/_label.component.html" group="label" name="html" + +``` + +```angular-ts file="./component/_label.component.ts"#L1-L2 group="label" name="typescript" + +``` + +## Icon buttons + +{{ NgDocActions.demo('c_icon_only', {container: false}) }} + +```angular-html file="./component/_icon-only.component.html" group="icon-only" name="html" + +``` + +```angular-ts file="./component/_icon-only.component.ts"#L1-L2 group="icon-only" name="typescript" + +``` + +## Disabled + +{{ NgDocActions.demo('c_disabled', {container: false}) }} + +```angular-html file="./component/_disabled.component.html" group="disabled" name="html" + +``` + +```angular-ts file="./component/_disabled.component.ts"#L1-L1 group="disabled" name="typescript" + +``` diff --git a/apps/docs/docs/components/button/_default.component.html b/apps/docs/docs/components/button/component/_default.component.html similarity index 100% rename from apps/docs/docs/components/button/_default.component.html rename to apps/docs/docs/components/button/component/_default.component.html diff --git a/apps/docs/docs/components/button/_default.component.ts b/apps/docs/docs/components/button/component/_default.component.ts similarity index 100% rename from apps/docs/docs/components/button/_default.component.ts rename to apps/docs/docs/components/button/component/_default.component.ts diff --git a/apps/docs/docs/components/button/_disabled.component.html b/apps/docs/docs/components/button/component/_disabled.component.html similarity index 100% rename from apps/docs/docs/components/button/_disabled.component.html rename to apps/docs/docs/components/button/component/_disabled.component.html diff --git a/apps/docs/docs/components/button/_disabled.component.ts b/apps/docs/docs/components/button/component/_disabled.component.ts similarity index 100% rename from apps/docs/docs/components/button/_disabled.component.ts rename to apps/docs/docs/components/button/component/_disabled.component.ts diff --git a/apps/docs/docs/components/button/_gradient-duotone.component.html b/apps/docs/docs/components/button/component/_gradient-duotone.component.html similarity index 100% rename from apps/docs/docs/components/button/_gradient-duotone.component.html rename to apps/docs/docs/components/button/component/_gradient-duotone.component.html diff --git a/apps/docs/docs/components/button/_gradient-duotone.component.ts b/apps/docs/docs/components/button/component/_gradient-duotone.component.ts similarity index 100% rename from apps/docs/docs/components/button/_gradient-duotone.component.ts rename to apps/docs/docs/components/button/component/_gradient-duotone.component.ts diff --git a/apps/docs/docs/components/button/_gradient-monochrome.component.html b/apps/docs/docs/components/button/component/_gradient-monochrome.component.html similarity index 100% rename from apps/docs/docs/components/button/_gradient-monochrome.component.html rename to apps/docs/docs/components/button/component/_gradient-monochrome.component.html diff --git a/apps/docs/docs/components/button/_gradient-monochrome.component.ts b/apps/docs/docs/components/button/component/_gradient-monochrome.component.ts similarity index 100% rename from apps/docs/docs/components/button/_gradient-monochrome.component.ts rename to apps/docs/docs/components/button/component/_gradient-monochrome.component.ts diff --git a/apps/docs/docs/components/button/_gradient-outline.component.html b/apps/docs/docs/components/button/component/_gradient-outline.component.html similarity index 100% rename from apps/docs/docs/components/button/_gradient-outline.component.html rename to apps/docs/docs/components/button/component/_gradient-outline.component.html diff --git a/apps/docs/docs/components/button/_gradient-outline.component.ts b/apps/docs/docs/components/button/component/_gradient-outline.component.ts similarity index 100% rename from apps/docs/docs/components/button/_gradient-outline.component.ts rename to apps/docs/docs/components/button/component/_gradient-outline.component.ts diff --git a/apps/docs/docs/components/button/_icon-only.component.html b/apps/docs/docs/components/button/component/_icon-only.component.html similarity index 100% rename from apps/docs/docs/components/button/_icon-only.component.html rename to apps/docs/docs/components/button/component/_icon-only.component.html diff --git a/apps/docs/docs/components/button/_icon-only.component.ts b/apps/docs/docs/components/button/component/_icon-only.component.ts similarity index 100% rename from apps/docs/docs/components/button/_icon-only.component.ts rename to apps/docs/docs/components/button/component/_icon-only.component.ts diff --git a/apps/docs/docs/components/button/_icon.component.html b/apps/docs/docs/components/button/component/_icon.component.html similarity index 100% rename from apps/docs/docs/components/button/_icon.component.html rename to apps/docs/docs/components/button/component/_icon.component.html diff --git a/apps/docs/docs/components/button/_icon.component.ts b/apps/docs/docs/components/button/component/_icon.component.ts similarity index 100% rename from apps/docs/docs/components/button/_icon.component.ts rename to apps/docs/docs/components/button/component/_icon.component.ts diff --git a/apps/docs/docs/components/button/_label.component.html b/apps/docs/docs/components/button/component/_label.component.html similarity index 100% rename from apps/docs/docs/components/button/_label.component.html rename to apps/docs/docs/components/button/component/_label.component.html diff --git a/apps/docs/docs/components/button/_label.component.ts b/apps/docs/docs/components/button/component/_label.component.ts similarity index 100% rename from apps/docs/docs/components/button/_label.component.ts rename to apps/docs/docs/components/button/component/_label.component.ts diff --git a/apps/docs/docs/components/button/_outline.component.html b/apps/docs/docs/components/button/component/_outline.component.html similarity index 100% rename from apps/docs/docs/components/button/_outline.component.html rename to apps/docs/docs/components/button/component/_outline.component.html diff --git a/apps/docs/docs/components/button/_outline.component.ts b/apps/docs/docs/components/button/component/_outline.component.ts similarity index 100% rename from apps/docs/docs/components/button/_outline.component.ts rename to apps/docs/docs/components/button/component/_outline.component.ts diff --git a/apps/docs/docs/components/button/_pill.component.html b/apps/docs/docs/components/button/component/_pill.component.html similarity index 100% rename from apps/docs/docs/components/button/_pill.component.html rename to apps/docs/docs/components/button/component/_pill.component.html diff --git a/apps/docs/docs/components/button/_pill.component.ts b/apps/docs/docs/components/button/component/_pill.component.ts similarity index 100% rename from apps/docs/docs/components/button/_pill.component.ts rename to apps/docs/docs/components/button/component/_pill.component.ts diff --git a/apps/docs/docs/components/button/_size.component.html b/apps/docs/docs/components/button/component/_size.component.html similarity index 100% rename from apps/docs/docs/components/button/_size.component.html rename to apps/docs/docs/components/button/component/_size.component.html diff --git a/apps/docs/docs/components/button/_size.component.ts b/apps/docs/docs/components/button/component/_size.component.ts similarity index 100% rename from apps/docs/docs/components/button/_size.component.ts rename to apps/docs/docs/components/button/component/_size.component.ts diff --git a/apps/docs/docs/components/button/directive/_default.component.html b/apps/docs/docs/components/button/directive/_default.component.html new file mode 100644 index 00000000..3fbe2988 --- /dev/null +++ b/apps/docs/docs/components/button/directive/_default.component.html @@ -0,0 +1,31 @@ + + + + + + + diff --git a/apps/docs/docs/components/button/directive/_default.component.ts b/apps/docs/docs/components/button/directive/_default.component.ts new file mode 100644 index 00000000..f491f5c5 --- /dev/null +++ b/apps/docs/docs/components/button/directive/_default.component.ts @@ -0,0 +1,13 @@ +import { ButtonComponent } from 'flowbite-angular/button'; + +import { Component } from '@angular/core'; + +@Component({ + selector: 'flowbite-demo-button-default', + imports: [ButtonComponent], + templateUrl: './_default.component.html', + host: { + class: 'flex flex wrap flex-row gap-3', + }, +}) +export class FlowbiteDefaultComponent {} diff --git a/apps/docs/docs/components/button/directive/_disabled.component.html b/apps/docs/docs/components/button/directive/_disabled.component.html new file mode 100644 index 00000000..a156b9bc --- /dev/null +++ b/apps/docs/docs/components/button/directive/_disabled.component.html @@ -0,0 +1,11 @@ + + diff --git a/apps/docs/docs/components/button/directive/_disabled.component.ts b/apps/docs/docs/components/button/directive/_disabled.component.ts new file mode 100644 index 00000000..38670523 --- /dev/null +++ b/apps/docs/docs/components/button/directive/_disabled.component.ts @@ -0,0 +1,13 @@ +import { ButtonComponent } from 'flowbite-angular/button'; + +import { Component } from '@angular/core'; + +@Component({ + selector: 'flowbite-demo-button-disabled', + imports: [ButtonComponent], + templateUrl: './_disabled.component.html', + host: { + class: 'flex flex wrap flex-row gap-3', + }, +}) +export class FlowbiteDisabledComponent {} diff --git a/apps/docs/docs/components/button/directive/_gradient-duotone.component.html b/apps/docs/docs/components/button/directive/_gradient-duotone.component.html new file mode 100644 index 00000000..3acdd993 --- /dev/null +++ b/apps/docs/docs/components/button/directive/_gradient-duotone.component.html @@ -0,0 +1,35 @@ + + + + + + + diff --git a/apps/docs/docs/components/button/directive/_gradient-duotone.component.ts b/apps/docs/docs/components/button/directive/_gradient-duotone.component.ts new file mode 100644 index 00000000..e52c45a4 --- /dev/null +++ b/apps/docs/docs/components/button/directive/_gradient-duotone.component.ts @@ -0,0 +1,13 @@ +import { ButtonComponent } from 'flowbite-angular/button'; + +import { Component } from '@angular/core'; + +@Component({ + selector: 'flowbite-demo-button-gradient-duotone', + imports: [ButtonComponent], + templateUrl: './_gradient-duotone.component.html', + host: { + class: 'flex flex wrap flex-row gap-3', + }, +}) +export class FlowbiteGradientDuotoneComponent {} diff --git a/apps/docs/docs/components/button/directive/_gradient-monochrome.component.html b/apps/docs/docs/components/button/directive/_gradient-monochrome.component.html new file mode 100644 index 00000000..839067ba --- /dev/null +++ b/apps/docs/docs/components/button/directive/_gradient-monochrome.component.html @@ -0,0 +1,40 @@ + + + + + + + + diff --git a/apps/docs/docs/components/button/directive/_gradient-monochrome.component.ts b/apps/docs/docs/components/button/directive/_gradient-monochrome.component.ts new file mode 100644 index 00000000..6f39e809 --- /dev/null +++ b/apps/docs/docs/components/button/directive/_gradient-monochrome.component.ts @@ -0,0 +1,13 @@ +import { ButtonComponent } from 'flowbite-angular/button'; + +import { Component } from '@angular/core'; + +@Component({ + selector: 'flowbite-demo-button-gradient-monochrome', + imports: [ButtonComponent], + templateUrl: './_gradient-monochrome.component.html', + host: { + class: 'flex flex wrap flex-row gap-3', + }, +}) +export class FlowbiteGradientMonochromeComponent {} diff --git a/apps/docs/docs/components/button/directive/_gradient-outline.component.html b/apps/docs/docs/components/button/directive/_gradient-outline.component.html new file mode 100644 index 00000000..3af2ab80 --- /dev/null +++ b/apps/docs/docs/components/button/directive/_gradient-outline.component.html @@ -0,0 +1,42 @@ + + + + + + + diff --git a/apps/docs/docs/components/button/directive/_gradient-outline.component.ts b/apps/docs/docs/components/button/directive/_gradient-outline.component.ts new file mode 100644 index 00000000..60026424 --- /dev/null +++ b/apps/docs/docs/components/button/directive/_gradient-outline.component.ts @@ -0,0 +1,13 @@ +import { ButtonComponent } from 'flowbite-angular/button'; + +import { Component } from '@angular/core'; + +@Component({ + selector: 'flowbite-demo-button-gradient-outline', + imports: [ButtonComponent], + templateUrl: './_gradient-outline.component.html', + host: { + class: 'flex flex wrap flex-row gap-3', + }, +}) +export class FlowbiteGradientOutlineComponent {} diff --git a/apps/docs/docs/components/button/directive/_icon-only.component.html b/apps/docs/docs/components/button/directive/_icon-only.component.html new file mode 100644 index 00000000..1e9b6614 --- /dev/null +++ b/apps/docs/docs/components/button/directive/_icon-only.component.html @@ -0,0 +1,27 @@ + + + + diff --git a/apps/docs/docs/components/button/directive/_icon-only.component.ts b/apps/docs/docs/components/button/directive/_icon-only.component.ts new file mode 100644 index 00000000..4fcec401 --- /dev/null +++ b/apps/docs/docs/components/button/directive/_icon-only.component.ts @@ -0,0 +1,14 @@ +import { ButtonComponent } from 'flowbite-angular/button'; +import { IconComponent } from 'flowbite-angular/icon'; + +import { Component } from '@angular/core'; + +@Component({ + selector: 'flowbite-demo-button-icon-only', + imports: [ButtonComponent, IconComponent], + templateUrl: './_icon-only.component.html', + host: { + class: 'flex flex wrap flex-row gap-3', + }, +}) +export class FlowbiteIconOnlyComponent {} diff --git a/apps/docs/docs/components/button/directive/_icon.component.html b/apps/docs/docs/components/button/directive/_icon.component.html new file mode 100644 index 00000000..a28018d9 --- /dev/null +++ b/apps/docs/docs/components/button/directive/_icon.component.html @@ -0,0 +1,12 @@ + + diff --git a/apps/docs/docs/components/button/directive/_icon.component.ts b/apps/docs/docs/components/button/directive/_icon.component.ts new file mode 100644 index 00000000..ae48468c --- /dev/null +++ b/apps/docs/docs/components/button/directive/_icon.component.ts @@ -0,0 +1,14 @@ +import { ButtonComponent } from 'flowbite-angular/button'; +import { IconComponent } from 'flowbite-angular/icon'; + +import { Component } from '@angular/core'; + +@Component({ + selector: 'flowbite-demo-button-icon', + imports: [ButtonComponent, IconComponent], + templateUrl: './_icon.component.html', + host: { + class: 'flex flex wrap flex-row gap-3', + }, +}) +export class FlowbiteIconComponent {} diff --git a/apps/docs/docs/components/button/directive/_label.component.html b/apps/docs/docs/components/button/directive/_label.component.html new file mode 100644 index 00000000..8d1ceb2f --- /dev/null +++ b/apps/docs/docs/components/button/directive/_label.component.html @@ -0,0 +1,8 @@ + diff --git a/apps/docs/docs/components/button/directive/_label.component.ts b/apps/docs/docs/components/button/directive/_label.component.ts new file mode 100644 index 00000000..be01e82e --- /dev/null +++ b/apps/docs/docs/components/button/directive/_label.component.ts @@ -0,0 +1,14 @@ +import { BadgeComponent } from 'flowbite-angular/badge'; +import { ButtonComponent } from 'flowbite-angular/button'; + +import { Component } from '@angular/core'; + +@Component({ + selector: 'flowbite-demo-button-label', + imports: [ButtonComponent, BadgeComponent], + templateUrl: './_label.component.html', + host: { + class: 'flex flex wrap flex-row gap-3', + }, +}) +export class FlowbiteLabelComponent {} diff --git a/apps/docs/docs/components/button/directive/_outline.component.html b/apps/docs/docs/components/button/directive/_outline.component.html new file mode 100644 index 00000000..052220eb --- /dev/null +++ b/apps/docs/docs/components/button/directive/_outline.component.html @@ -0,0 +1,35 @@ + + + + + + diff --git a/apps/docs/docs/components/button/directive/_outline.component.ts b/apps/docs/docs/components/button/directive/_outline.component.ts new file mode 100644 index 00000000..385892b5 --- /dev/null +++ b/apps/docs/docs/components/button/directive/_outline.component.ts @@ -0,0 +1,13 @@ +import { ButtonComponent } from 'flowbite-angular/button'; + +import { Component } from '@angular/core'; + +@Component({ + selector: 'flowbite-demo-button-outline', + imports: [ButtonComponent], + templateUrl: './_outline.component.html', + host: { + class: 'flex flex wrap flex-row gap-3', + }, +}) +export class FlowbiteOutlineComponent {} diff --git a/apps/docs/docs/components/button/directive/_pill.component.html b/apps/docs/docs/components/button/directive/_pill.component.html new file mode 100644 index 00000000..2db106dc --- /dev/null +++ b/apps/docs/docs/components/button/directive/_pill.component.html @@ -0,0 +1,36 @@ + + + + + + diff --git a/apps/docs/docs/components/button/directive/_pill.component.ts b/apps/docs/docs/components/button/directive/_pill.component.ts new file mode 100644 index 00000000..481b0c8b --- /dev/null +++ b/apps/docs/docs/components/button/directive/_pill.component.ts @@ -0,0 +1,13 @@ +import { ButtonComponent } from 'flowbite-angular/button'; + +import { Component } from '@angular/core'; + +@Component({ + selector: 'flowbite-demo-button-pill', + imports: [ButtonComponent], + templateUrl: './_pill.component.html', + host: { + class: 'flex flex wrap flex-row gap-3', + }, +}) +export class FlowbitePillComponent {} diff --git a/apps/docs/docs/components/button/directive/_size.component.html b/apps/docs/docs/components/button/directive/_size.component.html new file mode 100644 index 00000000..b674d58f --- /dev/null +++ b/apps/docs/docs/components/button/directive/_size.component.html @@ -0,0 +1,25 @@ + + + + + diff --git a/apps/docs/docs/components/button/directive/_size.component.ts b/apps/docs/docs/components/button/directive/_size.component.ts new file mode 100644 index 00000000..3294a50b --- /dev/null +++ b/apps/docs/docs/components/button/directive/_size.component.ts @@ -0,0 +1,13 @@ +import { ButtonComponent } from 'flowbite-angular/button'; + +import { Component } from '@angular/core'; + +@Component({ + selector: 'flowbite-demo-button-size', + imports: [ButtonComponent], + templateUrl: './_size.component.html', + host: { + class: 'flex flex wrap flex-row gap-3 items-center', + }, +}) +export class FlowbiteSizeComponent {} diff --git a/apps/docs/docs/components/button/index.md b/apps/docs/docs/components/button/index.md index 6418c871..7d6acaa0 100644 --- a/apps/docs/docs/components/button/index.md +++ b/apps/docs/docs/components/button/index.md @@ -1,135 +1,136 @@ --- -keyword: ButtonPage +title: Directive +keyword: ButtonDirectivePage --- ## Default button -{{ 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-L1 group="default" name="typescript" +```angular-ts file="./directive//_default.component.ts"#L1-L1 group="default" name="typescript" ``` ## Button pills -{{ NgDocActions.demo('flowbitePillComponent', {container: false}) }} +{{ NgDocActions.demo('d_pill', {container: false}) }} -```angular-html file="./_pill.component.html" group="pill" name="html" +```angular-html file="./directive//_pill.component.html" group="pill" name="html" ``` -```angular-ts file="./_pill.component.ts"#L1-L1 group="pill" name="typescript" +```angular-ts file="./directive//_pill.component.ts"#L1-L1 group="pill" name="typescript" ``` ## Gradient monochrome -{{ NgDocActions.demo('flowbiteGradientMonochromeComponent', {container: false}) }} +{{ NgDocActions.demo('d_gradient_monochrome', {container: false}) }} -```angular-html file="./_gradient-monochrome.component.html" group="gradient-monochrome" name="html" +```angular-html file="./directive//_gradient-monochrome.component.html" group="gradient-monochrome" name="html" ``` -```angular-ts file="./_gradient-monochrome.component.ts"#L1-L1 group="gradient-monochrome" name="typescript" +```angular-ts file="./directive//_gradient-monochrome.component.ts"#L1-L1 group="gradient-monochrome" name="typescript" ``` ## Gradient duo-tone -{{ NgDocActions.demo('flowbiteGradientDuotoneComponent', {container: false}) }} +{{ NgDocActions.demo('d_gradient_duotone', {container: false}) }} -```angular-html file="./_gradient-duotone.component.html" group="gradient-duotone" name="html" +```angular-html file="./directive//_gradient-duotone.component.html" group="gradient-duotone" name="html" ``` -```angular-ts file="./_gradient-duotone.component.ts"#L1-L1 group="gradient-duotone" name="typescript" +```angular-ts file="./directive//_gradient-duotone.component.ts"#L1-L1 group="gradient-duotone" name="typescript" ``` ## Gradient outline -{{ NgDocActions.demo('flowbiteGradientOutlineComponent', {container: false}) }} +{{ NgDocActions.demo('d_gradient_outline', {container: false}) }} -```angular-html file="./_gradient-outline.component.html" group="gradient-outline" name="html" +```angular-html file="./directive//_gradient-outline.component.html" group="gradient-outline" name="html" ``` -```angular-ts file="./_gradient-outline.component.ts"#L1-L1 group="gradient-outline" name="typescript" +```angular-ts file="./directive//_gradient-outline.component.ts"#L1-L1 group="gradient-outline" name="typescript" ``` ## Outline buttons -{{ NgDocActions.demo('flowbiteOutlineComponent', {container: false}) }} +{{ NgDocActions.demo('d_outline', {container: false}) }} -```angular-html file="./_outline.component.html" group="outline" name="html" +```angular-html file="./directive//_outline.component.html" group="outline" name="html" ``` -```angular-ts file="./_outline.component.ts"#L1-L1 group="outline" name="typescript" +```angular-ts file="./directive//_outline.component.ts"#L1-L1 group="outline" name="typescript" ``` ## Button sizes -{{ NgDocActions.demo('flowbiteSizeComponent', {container: false}) }} +{{ NgDocActions.demo('d_size', {container: false}) }} -```angular-html file="./_size.component.html" group="size" name="html" +```angular-html file="./directive//_size.component.html" group="size" name="html" ``` -```angular-ts file="./_size.component.ts"#L1-L1 group="size" name="typescript" +```angular-ts file="./directive//_size.component.ts"#L1-L1 group="size" name="typescript" ``` ## Button with icon -{{ NgDocActions.demo('flowbiteIconComponent', {container: false}) }} +{{ NgDocActions.demo('d_icon', {container: false}) }} -```angular-html file="./_icon.component.html" group="icon" name="html" +```angular-html file="./directive//_icon.component.html" group="icon" name="html" ``` -```angular-ts file="./_icon.component.ts"#L1-L2 group="icon" name="typescript" +```angular-ts file="./directive//_icon.component.ts"#L1-L2 group="icon" name="typescript" ``` ## Button with label -{{ NgDocActions.demo('flowbiteLabelComponent', {container: false}) }} +{{ NgDocActions.demo('d_label', {container: false}) }} -```angular-html file="./_label.component.html" group="label" name="html" +```angular-html file="./directive//_label.component.html" group="label" name="html" ``` -```angular-ts file="./_label.component.ts"#L1-L2 group="label" name="typescript" +```angular-ts file="./directive//_label.component.ts"#L1-L2 group="label" name="typescript" ``` ## Icon buttons -{{ NgDocActions.demo('flowbiteIconOnlyComponent', {container: false}) }} +{{ NgDocActions.demo('d_icon_only', {container: false}) }} -```angular-html file="./_icon-only.component.html" group="icon-only" name="html" +```angular-html file="./directive//_icon-only.component.html" group="icon-only" name="html" ``` -```angular-ts file="./_icon-only.component.ts"#L1-L2 group="icon-only" name="typescript" +```angular-ts file="./directive//_icon-only.component.ts"#L1-L2 group="icon-only" name="typescript" ``` ## Disabled -{{ NgDocActions.demo('flowbiteDisabledComponent', {container: false}) }} +{{ NgDocActions.demo('d_disabled', {container: false}) }} -```angular-html file="./_disabled.component.html" group="disabled" name="html" +```angular-html file="./directive//_disabled.component.html" group="disabled" name="html" ``` -```angular-ts file="./_disabled.component.ts"#L1-L1 group="disabled" name="typescript" +```angular-ts file="./directive//_disabled.component.ts"#L1-L1 group="disabled" name="typescript" ``` diff --git a/apps/docs/docs/components/button/ng-doc.page.ts b/apps/docs/docs/components/button/ng-doc.page.ts index af05cabc..45e37a23 100644 --- a/apps/docs/docs/components/button/ng-doc.page.ts +++ b/apps/docs/docs/components/button/ng-doc.page.ts @@ -1,15 +1,26 @@ import ComponentCategory from '../ng-doc.category'; -import { FlowbiteDefaultComponent } from './_default.component'; -import { FlowbiteDisabledComponent } from './_disabled.component'; -import { FlowbiteGradientDuotoneComponent } from './_gradient-duotone.component'; -import { FlowbiteGradientMonochromeComponent } from './_gradient-monochrome.component'; -import { FlowbiteGradientOutlineComponent } from './_gradient-outline.component'; -import { FlowbiteIconOnlyComponent } from './_icon-only.component'; -import { FlowbiteIconComponent } from './_icon.component'; -import { FlowbiteLabelComponent } from './_label.component'; -import { FlowbiteOutlineComponent } from './_outline.component'; -import { FlowbitePillComponent } from './_pill.component'; -import { FlowbiteSizeComponent } from './_size.component'; +import { FlowbiteDefaultComponent as c_default } from './component/_default.component'; +import { FlowbiteDisabledComponent as c_disabled } from './component/_disabled.component'; +import { FlowbiteGradientDuotoneComponent as c_gradient_duotone } from './component/_gradient-duotone.component'; +import { FlowbiteGradientMonochromeComponent as c_gradient_monochrome } from './component/_gradient-monochrome.component'; +import { FlowbiteGradientOutlineComponent as c_gradient_outline } from './component/_gradient-outline.component'; +import { FlowbiteIconOnlyComponent as c_icon_only } from './component/_icon-only.component'; +import { FlowbiteIconComponent as c_icon } from './component/_icon.component'; +import { FlowbiteLabelComponent as c_label } from './component/_label.component'; +import { FlowbiteOutlineComponent as c_outline } from './component/_outline.component'; +import { FlowbitePillComponent as c_pill } from './component/_pill.component'; +import { FlowbiteSizeComponent as c_size } from './component/_size.component'; +import { FlowbiteDefaultComponent as d_default } from './directive/_default.component'; +import { FlowbiteDisabledComponent as d_disabled } from './directive/_disabled.component'; +import { FlowbiteGradientDuotoneComponent as d_gradient_duotone } from './directive/_gradient-duotone.component'; +import { FlowbiteGradientMonochromeComponent as d_gradient_monochrome } from './directive/_gradient-monochrome.component'; +import { FlowbiteGradientOutlineComponent as d_gradient_outline } from './directive/_gradient-outline.component'; +import { FlowbiteIconOnlyComponent as d_icon_only } from './directive/_icon-only.component'; +import { FlowbiteIconComponent as d_icon } from './directive/_icon.component'; +import { FlowbiteLabelComponent as d_label } from './directive/_label.component'; +import { FlowbiteOutlineComponent as d_outline } from './directive/_outline.component'; +import { FlowbitePillComponent as d_pill } from './directive/_pill.component'; +import { FlowbiteSizeComponent as d_size } from './directive/_size.component'; import type { NgDocPage } from '@ng-doc/core'; @@ -20,21 +31,32 @@ import type { NgDocPage } from '@ng-doc/core'; */ const button: NgDocPage = { title: 'Button', - mdFile: './index.md', + mdFile: ['./index.md', './component.md'], category: ComponentCategory, order: 5, demos: { - flowbiteDefaultComponent: FlowbiteDefaultComponent, - flowbiteDisabledComponent: FlowbiteDisabledComponent, - flowbiteGradientDuotoneComponent: FlowbiteGradientDuotoneComponent, - flowbiteGradientMonochromeComponent: FlowbiteGradientMonochromeComponent, - flowbiteGradientOutlineComponent: FlowbiteGradientOutlineComponent, - flowbiteIconOnlyComponent: FlowbiteIconOnlyComponent, - flowbiteIconComponent: FlowbiteIconComponent, - flowbiteLabelComponent: FlowbiteLabelComponent, - flowbiteOutlineComponent: FlowbiteOutlineComponent, - flowbitePillComponent: FlowbitePillComponent, - flowbiteSizeComponent: FlowbiteSizeComponent, + c_default: c_default, + c_disabled: c_disabled, + c_gradient_duotone: c_gradient_duotone, + c_gradient_monochrome: c_gradient_monochrome, + c_gradient_outline: c_gradient_outline, + c_icon_only: c_icon_only, + c_icon: c_icon, + c_label: c_label, + c_outline: c_outline, + c_pill: c_pill, + c_size: c_size, + d_default: d_default, + d_disabled: d_disabled, + d_gradient_duotone: d_gradient_duotone, + d_gradient_monochrome: d_gradient_monochrome, + d_gradient_outline: d_gradient_outline, + d_icon_only: d_icon_only, + d_icon: d_icon, + d_label: d_label, + d_outline: d_outline, + d_pill: d_pill, + d_size: d_size, }, }; diff --git a/apps/docs/docs/shared/component-deprecated-usage.md b/apps/docs/docs/shared/component-deprecated-usage.md new file mode 100644 index 00000000..f1d1e88a --- /dev/null +++ b/apps/docs/docs/shared/component-deprecated-usage.md @@ -0,0 +1,13 @@ +{% macro deprecated() %} + +> +> +> d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /> +> +> +> _Component_ style over _directive_ usage is now deprecated. Please go to the **Directive** tab. +> +> + +{% endmacro %} diff --git a/libs/flowbite-angular/button/button.component.ts b/libs/flowbite-angular/button/button.component.ts index 300e9a35..6f440884 100644 --- a/libs/flowbite-angular/button/button.component.ts +++ b/libs/flowbite-angular/button/button.component.ts @@ -96,7 +96,11 @@ export const buttonDefaultValueProvider = makeEnvironmentProviders([ @Component({ standalone: true, imports: [NgTemplateOutlet], - selector: 'flowbite-button', + selector: ` + flowbite-button, + button[flowbite-button], + a[flowbite-button] + `, template: ` @if (gradientDuoTone() && fill() === 'outline') { @@ -111,7 +115,7 @@ export const buttonDefaultValueProvider = makeEnvironmentProviders([ `, host: { - '[attr.type]': 'button', + type: 'button', }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, From 142ba0ce8dd534f275b57e705d20781d7f7eb60a Mon Sep 17 00:00:00 2001 From: MGREMY Date: Tue, 21 Jan 2025 15:16:40 +0100 Subject: [PATCH 002/159] docs: fix flex-wrap class --- .../docs/docs/components/alert/_additional-content.component.ts | 2 +- apps/docs/docs/components/alert/_border-accent.component.ts | 2 +- apps/docs/docs/components/alert/_border.component.ts | 2 +- apps/docs/docs/components/alert/_default.component.ts | 2 +- apps/docs/docs/components/alert/_dismissable.component.ts | 2 +- apps/docs/docs/components/alert/_icon.component.ts | 2 +- .../docs/docs/components/button/component/_default.component.ts | 2 +- .../docs/components/button/component/_disabled.component.ts | 2 +- .../components/button/component/_gradient-duotone.component.ts | 2 +- .../button/component/_gradient-monochrome.component.ts | 2 +- .../components/button/component/_gradient-outline.component.ts | 2 +- .../docs/components/button/component/_icon-only.component.ts | 2 +- apps/docs/docs/components/button/component/_icon.component.ts | 2 +- apps/docs/docs/components/button/component/_label.component.ts | 2 +- .../docs/docs/components/button/component/_outline.component.ts | 2 +- apps/docs/docs/components/button/component/_pill.component.ts | 2 +- apps/docs/docs/components/button/component/_size.component.ts | 2 +- .../docs/docs/components/button/directive/_default.component.ts | 2 +- .../docs/components/button/directive/_disabled.component.ts | 2 +- .../components/button/directive/_gradient-duotone.component.ts | 2 +- .../button/directive/_gradient-monochrome.component.ts | 2 +- .../components/button/directive/_gradient-outline.component.ts | 2 +- .../docs/components/button/directive/_icon-only.component.ts | 2 +- apps/docs/docs/components/button/directive/_icon.component.ts | 2 +- apps/docs/docs/components/button/directive/_label.component.ts | 2 +- .../docs/docs/components/button/directive/_outline.component.ts | 2 +- apps/docs/docs/components/button/directive/_pill.component.ts | 2 +- apps/docs/docs/components/button/directive/_size.component.ts | 2 +- apps/docs/docs/components/dropdown/_default.component.ts | 2 +- apps/docs/docs/components/dropdown/_divider.component.ts | 2 +- apps/docs/docs/components/dropdown/_header.component.ts | 2 +- apps/docs/docs/components/dropdown/_placed.component.ts | 2 +- apps/docs/docs/components/indicator/_default.component.ts | 2 +- apps/docs/docs/components/indicator/_legend.component.ts | 2 +- apps/docs/docs/components/modal/_default.component.ts | 2 +- apps/docs/docs/components/modal/_dismissable.component.ts | 2 +- apps/docs/docs/components/modal/_form.component.ts | 2 +- apps/docs/docs/components/modal/_positioned.component.ts | 2 +- apps/docs/docs/components/modal/_size.component.ts | 2 +- 39 files changed, 39 insertions(+), 39 deletions(-) diff --git a/apps/docs/docs/components/alert/_additional-content.component.ts b/apps/docs/docs/components/alert/_additional-content.component.ts index 90118c65..12b756c4 100644 --- a/apps/docs/docs/components/alert/_additional-content.component.ts +++ b/apps/docs/docs/components/alert/_additional-content.component.ts @@ -9,7 +9,7 @@ import { Component } from '@angular/core'; imports: [AlertComponent, IconComponent, ButtonComponent], templateUrl: './_additional-content.component.html', host: { - class: 'flex flex wrap flex-col gap-3', + class: 'flex flex-wrap flex-col gap-3', }, }) export class FlowbiteAdditionalContentComponent {} diff --git a/apps/docs/docs/components/alert/_border-accent.component.ts b/apps/docs/docs/components/alert/_border-accent.component.ts index 76701360..ff68bc59 100644 --- a/apps/docs/docs/components/alert/_border-accent.component.ts +++ b/apps/docs/docs/components/alert/_border-accent.component.ts @@ -7,7 +7,7 @@ import { Component } from '@angular/core'; imports: [AlertComponent], templateUrl: './_border-accent.component.html', host: { - class: 'flex flex wrap flex-col gap-3', + class: 'flex flex-wrap flex-col gap-3', }, }) export class FlowbiteBorderAccentComponent {} diff --git a/apps/docs/docs/components/alert/_border.component.ts b/apps/docs/docs/components/alert/_border.component.ts index 6a5c2423..4cd58158 100644 --- a/apps/docs/docs/components/alert/_border.component.ts +++ b/apps/docs/docs/components/alert/_border.component.ts @@ -7,7 +7,7 @@ import { Component } from '@angular/core'; imports: [AlertComponent], templateUrl: './_border.component.html', host: { - class: 'flex flex wrap flex-col gap-3', + class: 'flex flex-wrap flex-col gap-3', }, }) export class FlowbiteBorderComponent {} diff --git a/apps/docs/docs/components/alert/_default.component.ts b/apps/docs/docs/components/alert/_default.component.ts index 532d1507..fec6e637 100644 --- a/apps/docs/docs/components/alert/_default.component.ts +++ b/apps/docs/docs/components/alert/_default.component.ts @@ -7,7 +7,7 @@ import { Component } from '@angular/core'; imports: [AlertComponent], templateUrl: './_default.component.html', host: { - class: 'flex flex wrap flex-col gap-3', + class: 'flex flex-wrap flex-col gap-3', }, }) export class FlowbiteDefaultComponent {} diff --git a/apps/docs/docs/components/alert/_dismissable.component.ts b/apps/docs/docs/components/alert/_dismissable.component.ts index 691003b6..7323610e 100644 --- a/apps/docs/docs/components/alert/_dismissable.component.ts +++ b/apps/docs/docs/components/alert/_dismissable.component.ts @@ -7,7 +7,7 @@ import { Component } from '@angular/core'; imports: [AlertComponent], templateUrl: './_dismissable.component.html', host: { - class: 'flex flex wrap flex-col gap-3', + class: 'flex flex-wrap flex-col gap-3', }, }) export class FlowbiteDismissableComponent { diff --git a/apps/docs/docs/components/alert/_icon.component.ts b/apps/docs/docs/components/alert/_icon.component.ts index c1684208..38223165 100644 --- a/apps/docs/docs/components/alert/_icon.component.ts +++ b/apps/docs/docs/components/alert/_icon.component.ts @@ -8,7 +8,7 @@ import { Component } from '@angular/core'; imports: [AlertComponent, IconComponent], templateUrl: './_icon.component.html', host: { - class: 'flex flex wrap flex-col gap-3', + class: 'flex flex-wrap flex-col gap-3', }, }) export class FlowbiteIconComponent {} diff --git a/apps/docs/docs/components/button/component/_default.component.ts b/apps/docs/docs/components/button/component/_default.component.ts index f491f5c5..02c9e256 100644 --- a/apps/docs/docs/components/button/component/_default.component.ts +++ b/apps/docs/docs/components/button/component/_default.component.ts @@ -7,7 +7,7 @@ import { Component } from '@angular/core'; imports: [ButtonComponent], templateUrl: './_default.component.html', host: { - class: 'flex flex wrap flex-row gap-3', + class: 'flex flex-wrap flex-row gap-3', }, }) export class FlowbiteDefaultComponent {} diff --git a/apps/docs/docs/components/button/component/_disabled.component.ts b/apps/docs/docs/components/button/component/_disabled.component.ts index 38670523..31aa8811 100644 --- a/apps/docs/docs/components/button/component/_disabled.component.ts +++ b/apps/docs/docs/components/button/component/_disabled.component.ts @@ -7,7 +7,7 @@ import { Component } from '@angular/core'; imports: [ButtonComponent], templateUrl: './_disabled.component.html', host: { - class: 'flex flex wrap flex-row gap-3', + class: 'flex flex-wrap flex-row gap-3', }, }) export class FlowbiteDisabledComponent {} diff --git a/apps/docs/docs/components/button/component/_gradient-duotone.component.ts b/apps/docs/docs/components/button/component/_gradient-duotone.component.ts index e52c45a4..03fdd718 100644 --- a/apps/docs/docs/components/button/component/_gradient-duotone.component.ts +++ b/apps/docs/docs/components/button/component/_gradient-duotone.component.ts @@ -7,7 +7,7 @@ import { Component } from '@angular/core'; imports: [ButtonComponent], templateUrl: './_gradient-duotone.component.html', host: { - class: 'flex flex wrap flex-row gap-3', + class: 'flex flex-wrap flex-row gap-3', }, }) export class FlowbiteGradientDuotoneComponent {} diff --git a/apps/docs/docs/components/button/component/_gradient-monochrome.component.ts b/apps/docs/docs/components/button/component/_gradient-monochrome.component.ts index 6f39e809..c68c4153 100644 --- a/apps/docs/docs/components/button/component/_gradient-monochrome.component.ts +++ b/apps/docs/docs/components/button/component/_gradient-monochrome.component.ts @@ -7,7 +7,7 @@ import { Component } from '@angular/core'; imports: [ButtonComponent], templateUrl: './_gradient-monochrome.component.html', host: { - class: 'flex flex wrap flex-row gap-3', + class: 'flex flex-wrap flex-row gap-3', }, }) export class FlowbiteGradientMonochromeComponent {} diff --git a/apps/docs/docs/components/button/component/_gradient-outline.component.ts b/apps/docs/docs/components/button/component/_gradient-outline.component.ts index 60026424..5df5f47d 100644 --- a/apps/docs/docs/components/button/component/_gradient-outline.component.ts +++ b/apps/docs/docs/components/button/component/_gradient-outline.component.ts @@ -7,7 +7,7 @@ import { Component } from '@angular/core'; imports: [ButtonComponent], templateUrl: './_gradient-outline.component.html', host: { - class: 'flex flex wrap flex-row gap-3', + class: 'flex flex-wrap flex-row gap-3', }, }) export class FlowbiteGradientOutlineComponent {} diff --git a/apps/docs/docs/components/button/component/_icon-only.component.ts b/apps/docs/docs/components/button/component/_icon-only.component.ts index 4fcec401..e389690b 100644 --- a/apps/docs/docs/components/button/component/_icon-only.component.ts +++ b/apps/docs/docs/components/button/component/_icon-only.component.ts @@ -8,7 +8,7 @@ import { Component } from '@angular/core'; imports: [ButtonComponent, IconComponent], templateUrl: './_icon-only.component.html', host: { - class: 'flex flex wrap flex-row gap-3', + class: 'flex flex-wrap flex-row gap-3', }, }) export class FlowbiteIconOnlyComponent {} diff --git a/apps/docs/docs/components/button/component/_icon.component.ts b/apps/docs/docs/components/button/component/_icon.component.ts index ae48468c..4fdea354 100644 --- a/apps/docs/docs/components/button/component/_icon.component.ts +++ b/apps/docs/docs/components/button/component/_icon.component.ts @@ -8,7 +8,7 @@ import { Component } from '@angular/core'; imports: [ButtonComponent, IconComponent], templateUrl: './_icon.component.html', host: { - class: 'flex flex wrap flex-row gap-3', + class: 'flex flex-wrap flex-row gap-3', }, }) export class FlowbiteIconComponent {} diff --git a/apps/docs/docs/components/button/component/_label.component.ts b/apps/docs/docs/components/button/component/_label.component.ts index be01e82e..9aacd1ab 100644 --- a/apps/docs/docs/components/button/component/_label.component.ts +++ b/apps/docs/docs/components/button/component/_label.component.ts @@ -8,7 +8,7 @@ import { Component } from '@angular/core'; imports: [ButtonComponent, BadgeComponent], templateUrl: './_label.component.html', host: { - class: 'flex flex wrap flex-row gap-3', + class: 'flex flex-wrap flex-row gap-3', }, }) export class FlowbiteLabelComponent {} diff --git a/apps/docs/docs/components/button/component/_outline.component.ts b/apps/docs/docs/components/button/component/_outline.component.ts index 385892b5..88a2f4b9 100644 --- a/apps/docs/docs/components/button/component/_outline.component.ts +++ b/apps/docs/docs/components/button/component/_outline.component.ts @@ -7,7 +7,7 @@ import { Component } from '@angular/core'; imports: [ButtonComponent], templateUrl: './_outline.component.html', host: { - class: 'flex flex wrap flex-row gap-3', + class: 'flex flex-wrap flex-row gap-3', }, }) export class FlowbiteOutlineComponent {} diff --git a/apps/docs/docs/components/button/component/_pill.component.ts b/apps/docs/docs/components/button/component/_pill.component.ts index 481b0c8b..4b826ee9 100644 --- a/apps/docs/docs/components/button/component/_pill.component.ts +++ b/apps/docs/docs/components/button/component/_pill.component.ts @@ -7,7 +7,7 @@ import { Component } from '@angular/core'; imports: [ButtonComponent], templateUrl: './_pill.component.html', host: { - class: 'flex flex wrap flex-row gap-3', + class: 'flex flex-wrap flex-row gap-3', }, }) export class FlowbitePillComponent {} diff --git a/apps/docs/docs/components/button/component/_size.component.ts b/apps/docs/docs/components/button/component/_size.component.ts index 3294a50b..b585e84c 100644 --- a/apps/docs/docs/components/button/component/_size.component.ts +++ b/apps/docs/docs/components/button/component/_size.component.ts @@ -7,7 +7,7 @@ import { Component } from '@angular/core'; imports: [ButtonComponent], templateUrl: './_size.component.html', host: { - class: 'flex flex wrap flex-row gap-3 items-center', + class: 'flex flex-wrap flex-row gap-3 items-center', }, }) export class FlowbiteSizeComponent {} diff --git a/apps/docs/docs/components/button/directive/_default.component.ts b/apps/docs/docs/components/button/directive/_default.component.ts index f491f5c5..02c9e256 100644 --- a/apps/docs/docs/components/button/directive/_default.component.ts +++ b/apps/docs/docs/components/button/directive/_default.component.ts @@ -7,7 +7,7 @@ import { Component } from '@angular/core'; imports: [ButtonComponent], templateUrl: './_default.component.html', host: { - class: 'flex flex wrap flex-row gap-3', + class: 'flex flex-wrap flex-row gap-3', }, }) export class FlowbiteDefaultComponent {} diff --git a/apps/docs/docs/components/button/directive/_disabled.component.ts b/apps/docs/docs/components/button/directive/_disabled.component.ts index 38670523..31aa8811 100644 --- a/apps/docs/docs/components/button/directive/_disabled.component.ts +++ b/apps/docs/docs/components/button/directive/_disabled.component.ts @@ -7,7 +7,7 @@ import { Component } from '@angular/core'; imports: [ButtonComponent], templateUrl: './_disabled.component.html', host: { - class: 'flex flex wrap flex-row gap-3', + class: 'flex flex-wrap flex-row gap-3', }, }) export class FlowbiteDisabledComponent {} diff --git a/apps/docs/docs/components/button/directive/_gradient-duotone.component.ts b/apps/docs/docs/components/button/directive/_gradient-duotone.component.ts index e52c45a4..03fdd718 100644 --- a/apps/docs/docs/components/button/directive/_gradient-duotone.component.ts +++ b/apps/docs/docs/components/button/directive/_gradient-duotone.component.ts @@ -7,7 +7,7 @@ import { Component } from '@angular/core'; imports: [ButtonComponent], templateUrl: './_gradient-duotone.component.html', host: { - class: 'flex flex wrap flex-row gap-3', + class: 'flex flex-wrap flex-row gap-3', }, }) export class FlowbiteGradientDuotoneComponent {} diff --git a/apps/docs/docs/components/button/directive/_gradient-monochrome.component.ts b/apps/docs/docs/components/button/directive/_gradient-monochrome.component.ts index 6f39e809..c68c4153 100644 --- a/apps/docs/docs/components/button/directive/_gradient-monochrome.component.ts +++ b/apps/docs/docs/components/button/directive/_gradient-monochrome.component.ts @@ -7,7 +7,7 @@ import { Component } from '@angular/core'; imports: [ButtonComponent], templateUrl: './_gradient-monochrome.component.html', host: { - class: 'flex flex wrap flex-row gap-3', + class: 'flex flex-wrap flex-row gap-3', }, }) export class FlowbiteGradientMonochromeComponent {} diff --git a/apps/docs/docs/components/button/directive/_gradient-outline.component.ts b/apps/docs/docs/components/button/directive/_gradient-outline.component.ts index 60026424..5df5f47d 100644 --- a/apps/docs/docs/components/button/directive/_gradient-outline.component.ts +++ b/apps/docs/docs/components/button/directive/_gradient-outline.component.ts @@ -7,7 +7,7 @@ import { Component } from '@angular/core'; imports: [ButtonComponent], templateUrl: './_gradient-outline.component.html', host: { - class: 'flex flex wrap flex-row gap-3', + class: 'flex flex-wrap flex-row gap-3', }, }) export class FlowbiteGradientOutlineComponent {} diff --git a/apps/docs/docs/components/button/directive/_icon-only.component.ts b/apps/docs/docs/components/button/directive/_icon-only.component.ts index 4fcec401..e389690b 100644 --- a/apps/docs/docs/components/button/directive/_icon-only.component.ts +++ b/apps/docs/docs/components/button/directive/_icon-only.component.ts @@ -8,7 +8,7 @@ import { Component } from '@angular/core'; imports: [ButtonComponent, IconComponent], templateUrl: './_icon-only.component.html', host: { - class: 'flex flex wrap flex-row gap-3', + class: 'flex flex-wrap flex-row gap-3', }, }) export class FlowbiteIconOnlyComponent {} diff --git a/apps/docs/docs/components/button/directive/_icon.component.ts b/apps/docs/docs/components/button/directive/_icon.component.ts index ae48468c..4fdea354 100644 --- a/apps/docs/docs/components/button/directive/_icon.component.ts +++ b/apps/docs/docs/components/button/directive/_icon.component.ts @@ -8,7 +8,7 @@ import { Component } from '@angular/core'; imports: [ButtonComponent, IconComponent], templateUrl: './_icon.component.html', host: { - class: 'flex flex wrap flex-row gap-3', + class: 'flex flex-wrap flex-row gap-3', }, }) export class FlowbiteIconComponent {} diff --git a/apps/docs/docs/components/button/directive/_label.component.ts b/apps/docs/docs/components/button/directive/_label.component.ts index be01e82e..9aacd1ab 100644 --- a/apps/docs/docs/components/button/directive/_label.component.ts +++ b/apps/docs/docs/components/button/directive/_label.component.ts @@ -8,7 +8,7 @@ import { Component } from '@angular/core'; imports: [ButtonComponent, BadgeComponent], templateUrl: './_label.component.html', host: { - class: 'flex flex wrap flex-row gap-3', + class: 'flex flex-wrap flex-row gap-3', }, }) export class FlowbiteLabelComponent {} diff --git a/apps/docs/docs/components/button/directive/_outline.component.ts b/apps/docs/docs/components/button/directive/_outline.component.ts index 385892b5..88a2f4b9 100644 --- a/apps/docs/docs/components/button/directive/_outline.component.ts +++ b/apps/docs/docs/components/button/directive/_outline.component.ts @@ -7,7 +7,7 @@ import { Component } from '@angular/core'; imports: [ButtonComponent], templateUrl: './_outline.component.html', host: { - class: 'flex flex wrap flex-row gap-3', + class: 'flex flex-wrap flex-row gap-3', }, }) export class FlowbiteOutlineComponent {} diff --git a/apps/docs/docs/components/button/directive/_pill.component.ts b/apps/docs/docs/components/button/directive/_pill.component.ts index 481b0c8b..4b826ee9 100644 --- a/apps/docs/docs/components/button/directive/_pill.component.ts +++ b/apps/docs/docs/components/button/directive/_pill.component.ts @@ -7,7 +7,7 @@ import { Component } from '@angular/core'; imports: [ButtonComponent], templateUrl: './_pill.component.html', host: { - class: 'flex flex wrap flex-row gap-3', + class: 'flex flex-wrap flex-row gap-3', }, }) export class FlowbitePillComponent {} diff --git a/apps/docs/docs/components/button/directive/_size.component.ts b/apps/docs/docs/components/button/directive/_size.component.ts index 3294a50b..b585e84c 100644 --- a/apps/docs/docs/components/button/directive/_size.component.ts +++ b/apps/docs/docs/components/button/directive/_size.component.ts @@ -7,7 +7,7 @@ import { Component } from '@angular/core'; imports: [ButtonComponent], templateUrl: './_size.component.html', host: { - class: 'flex flex wrap flex-row gap-3 items-center', + class: 'flex flex-wrap flex-row gap-3 items-center', }, }) export class FlowbiteSizeComponent {} diff --git a/apps/docs/docs/components/dropdown/_default.component.ts b/apps/docs/docs/components/dropdown/_default.component.ts index 0fc16ad9..e9db58de 100644 --- a/apps/docs/docs/components/dropdown/_default.component.ts +++ b/apps/docs/docs/components/dropdown/_default.component.ts @@ -7,7 +7,7 @@ import { Component } from '@angular/core'; imports: [DropdownComponent, DropdownItemComponent], templateUrl: './_default.component.html', host: { - class: 'flex flex wrap flex-row gap-3', + class: 'flex flex-wrap flex-row gap-3', }, }) export class FlowbiteDefaultComponent {} diff --git a/apps/docs/docs/components/dropdown/_divider.component.ts b/apps/docs/docs/components/dropdown/_divider.component.ts index 04b8c37e..1b69d695 100644 --- a/apps/docs/docs/components/dropdown/_divider.component.ts +++ b/apps/docs/docs/components/dropdown/_divider.component.ts @@ -11,7 +11,7 @@ import { Component } from '@angular/core'; imports: [DropdownComponent, DropdownItemComponent, DropdownDividerComponent], templateUrl: '_divider.component.html', host: { - class: 'flex flex wrap flex-row gap-3', + class: 'flex flex-wrap flex-row gap-3', }, }) export class FlowbiteDividerComponent {} diff --git a/apps/docs/docs/components/dropdown/_header.component.ts b/apps/docs/docs/components/dropdown/_header.component.ts index e49eb442..d6ba9e46 100644 --- a/apps/docs/docs/components/dropdown/_header.component.ts +++ b/apps/docs/docs/components/dropdown/_header.component.ts @@ -17,7 +17,7 @@ import { Component } from '@angular/core'; ], templateUrl: '_header.component.html', host: { - class: 'flex flex wrap flex-row gap-3', + class: 'flex flex-wrap flex-row gap-3', }, }) export class FlowbiteHeaderComponent {} diff --git a/apps/docs/docs/components/dropdown/_placed.component.ts b/apps/docs/docs/components/dropdown/_placed.component.ts index 2b25ca7c..5425467f 100644 --- a/apps/docs/docs/components/dropdown/_placed.component.ts +++ b/apps/docs/docs/components/dropdown/_placed.component.ts @@ -7,7 +7,7 @@ import { Component } from '@angular/core'; imports: [DropdownComponent, DropdownItemComponent], templateUrl: './_placed.component.html', host: { - class: 'flex flex wrap flex-row gap-3 justify-around', + class: 'flex flex-wrap flex-row gap-3 justify-around', }, }) export class FlowbitePlacedComponent {} diff --git a/apps/docs/docs/components/indicator/_default.component.ts b/apps/docs/docs/components/indicator/_default.component.ts index e669edbd..9b716105 100644 --- a/apps/docs/docs/components/indicator/_default.component.ts +++ b/apps/docs/docs/components/indicator/_default.component.ts @@ -7,7 +7,7 @@ import { Component } from '@angular/core'; imports: [IndicatorComponent], templateUrl: './_default.component.html', host: { - class: 'flex flex wrap flex-row gap-3 justify-around', + class: 'flex flex-wrap flex-row gap-3 justify-around', }, }) export class FlowbiteDefaultComponent {} diff --git a/apps/docs/docs/components/indicator/_legend.component.ts b/apps/docs/docs/components/indicator/_legend.component.ts index 3b785d22..5bc7669b 100644 --- a/apps/docs/docs/components/indicator/_legend.component.ts +++ b/apps/docs/docs/components/indicator/_legend.component.ts @@ -7,7 +7,7 @@ import { Component } from '@angular/core'; imports: [IndicatorComponent], templateUrl: './_legend.component.html', host: { - class: 'flex flex wrap flex-row gap-3', + class: 'flex flex-wrap flex-row gap-3', }, }) export class FlowbiteLegendComponent {} diff --git a/apps/docs/docs/components/modal/_default.component.ts b/apps/docs/docs/components/modal/_default.component.ts index f795f02c..4492a335 100644 --- a/apps/docs/docs/components/modal/_default.component.ts +++ b/apps/docs/docs/components/modal/_default.component.ts @@ -19,7 +19,7 @@ import { Component } from '@angular/core'; ], templateUrl: './_default.component.html', host: { - class: 'flex flex wrap flex-row gap-3', + class: 'flex flex-wrap flex-row gap-3', }, }) export class FlowbiteDefaultComponent {} diff --git a/apps/docs/docs/components/modal/_dismissable.component.ts b/apps/docs/docs/components/modal/_dismissable.component.ts index 0990b559..c7dfa15f 100644 --- a/apps/docs/docs/components/modal/_dismissable.component.ts +++ b/apps/docs/docs/components/modal/_dismissable.component.ts @@ -19,7 +19,7 @@ import { Component } from '@angular/core'; ], templateUrl: '_dismissable.component.html', host: { - class: 'flex flex wrap flex-row gap-3', + class: 'flex flex-wrap flex-row gap-3', }, }) export class FlowbiteDismissableComponent {} diff --git a/apps/docs/docs/components/modal/_form.component.ts b/apps/docs/docs/components/modal/_form.component.ts index 3d62f729..788181b8 100644 --- a/apps/docs/docs/components/modal/_form.component.ts +++ b/apps/docs/docs/components/modal/_form.component.ts @@ -8,7 +8,7 @@ import { Component } from '@angular/core'; imports: [ModalComponent, ModalBodyComponent, ModalHeaderComponent, ButtonComponent], templateUrl: './_form.component.html', host: { - class: 'flex flex wrap flex-row gap-3', + class: 'flex flex-wrap flex-row gap-3', }, }) export class FlowbiteFormComponent {} diff --git a/apps/docs/docs/components/modal/_positioned.component.ts b/apps/docs/docs/components/modal/_positioned.component.ts index 39d2b904..d94ecfaf 100644 --- a/apps/docs/docs/components/modal/_positioned.component.ts +++ b/apps/docs/docs/components/modal/_positioned.component.ts @@ -19,7 +19,7 @@ import { Component } from '@angular/core'; ], templateUrl: './_positioned.component.html', host: { - class: 'flex flex wrap flex-row gap-3', + class: 'flex flex-wrap flex-row gap-3', }, }) export class FlowbitePositionedComponent {} diff --git a/apps/docs/docs/components/modal/_size.component.ts b/apps/docs/docs/components/modal/_size.component.ts index b59c559f..5a822c05 100644 --- a/apps/docs/docs/components/modal/_size.component.ts +++ b/apps/docs/docs/components/modal/_size.component.ts @@ -19,7 +19,7 @@ import { Component } from '@angular/core'; ], templateUrl: './_size.component.html', host: { - class: 'flex flex wrap flex-row gap-3 justify-around', + class: 'flex flex-wrap flex-row gap-3 justify-around', }, }) export class FlowbiteSizeComponent {} From c6ebc43917bedb3467b6aa9f0aa8283764017dd8 Mon Sep 17 00:00:00 2001 From: MGREMY Date: Wed, 22 Jan 2025 09:42:17 +0100 Subject: [PATCH 003/159] docs: fix deprecated in button page --- apps/docs/docs/components/button/component.md | 2 +- apps/docs/docs/components/button/index.md | 46 +++++++++---------- .../docs/shared/component-deprecated-usage.md | 6 +-- 3 files changed, 25 insertions(+), 29 deletions(-) diff --git a/apps/docs/docs/components/button/component.md b/apps/docs/docs/components/button/component.md index 58ca75bf..9821ba23 100644 --- a/apps/docs/docs/components/button/component.md +++ b/apps/docs/docs/components/button/component.md @@ -1,5 +1,5 @@ --- -title: Component +title: Button Component route: component keyword: ButtonComponentPage --- diff --git a/apps/docs/docs/components/button/index.md b/apps/docs/docs/components/button/index.md index 7d6acaa0..2cf65127 100644 --- a/apps/docs/docs/components/button/index.md +++ b/apps/docs/docs/components/button/index.md @@ -1,5 +1,5 @@ --- -title: Directive +title: Button Directive keyword: ButtonDirectivePage --- @@ -7,11 +7,11 @@ keyword: ButtonDirectivePage {{ NgDocActions.demo('d_default', {container: false}) }} -```angular-html file="./directive//_default.component.html" group="default" name="html" +```angular-html file="./directive/_default.component.html" group="default" name="html" ``` -```angular-ts file="./directive//_default.component.ts"#L1-L1 group="default" name="typescript" +```angular-ts file="./directive/_default.component.ts"#L1-L1 group="default" name="typescript" ``` @@ -19,11 +19,11 @@ keyword: ButtonDirectivePage {{ NgDocActions.demo('d_pill', {container: false}) }} -```angular-html file="./directive//_pill.component.html" group="pill" name="html" +```angular-html file="./directive/_pill.component.html" group="pill" name="html" ``` -```angular-ts file="./directive//_pill.component.ts"#L1-L1 group="pill" name="typescript" +```angular-ts file="./directive/_pill.component.ts"#L1-L1 group="pill" name="typescript" ``` @@ -31,11 +31,11 @@ keyword: ButtonDirectivePage {{ NgDocActions.demo('d_gradient_monochrome', {container: false}) }} -```angular-html file="./directive//_gradient-monochrome.component.html" group="gradient-monochrome" name="html" +```angular-html file="./directive/_gradient-monochrome.component.html" group="gradient-monochrome" name="html" ``` -```angular-ts file="./directive//_gradient-monochrome.component.ts"#L1-L1 group="gradient-monochrome" name="typescript" +```angular-ts file="./directive/_gradient-monochrome.component.ts"#L1-L1 group="gradient-monochrome" name="typescript" ``` @@ -43,11 +43,11 @@ keyword: ButtonDirectivePage {{ NgDocActions.demo('d_gradient_duotone', {container: false}) }} -```angular-html file="./directive//_gradient-duotone.component.html" group="gradient-duotone" name="html" +```angular-html file="./directive/_gradient-duotone.component.html" group="gradient-duotone" name="html" ``` -```angular-ts file="./directive//_gradient-duotone.component.ts"#L1-L1 group="gradient-duotone" name="typescript" +```angular-ts file="./directive/_gradient-duotone.component.ts"#L1-L1 group="gradient-duotone" name="typescript" ``` @@ -55,11 +55,11 @@ keyword: ButtonDirectivePage {{ NgDocActions.demo('d_gradient_outline', {container: false}) }} -```angular-html file="./directive//_gradient-outline.component.html" group="gradient-outline" name="html" +```angular-html file="./directive/_gradient-outline.component.html" group="gradient-outline" name="html" ``` -```angular-ts file="./directive//_gradient-outline.component.ts"#L1-L1 group="gradient-outline" name="typescript" +```angular-ts file="./directive/_gradient-outline.component.ts"#L1-L1 group="gradient-outline" name="typescript" ``` @@ -67,11 +67,11 @@ keyword: ButtonDirectivePage {{ NgDocActions.demo('d_outline', {container: false}) }} -```angular-html file="./directive//_outline.component.html" group="outline" name="html" +```angular-html file="./directive/_outline.component.html" group="outline" name="html" ``` -```angular-ts file="./directive//_outline.component.ts"#L1-L1 group="outline" name="typescript" +```angular-ts file="./directive/_outline.component.ts"#L1-L1 group="outline" name="typescript" ``` @@ -79,11 +79,11 @@ keyword: ButtonDirectivePage {{ NgDocActions.demo('d_size', {container: false}) }} -```angular-html file="./directive//_size.component.html" group="size" name="html" +```angular-html file="./directive/_size.component.html" group="size" name="html" ``` -```angular-ts file="./directive//_size.component.ts"#L1-L1 group="size" name="typescript" +```angular-ts file="./directive/_size.component.ts"#L1-L1 group="size" name="typescript" ``` @@ -91,11 +91,11 @@ keyword: ButtonDirectivePage {{ NgDocActions.demo('d_icon', {container: false}) }} -```angular-html file="./directive//_icon.component.html" group="icon" name="html" +```angular-html file="./directive/_icon.component.html" group="icon" name="html" ``` -```angular-ts file="./directive//_icon.component.ts"#L1-L2 group="icon" name="typescript" +```angular-ts file="./directive/_icon.component.ts"#L1-L2 group="icon" name="typescript" ``` @@ -103,11 +103,11 @@ keyword: ButtonDirectivePage {{ NgDocActions.demo('d_label', {container: false}) }} -```angular-html file="./directive//_label.component.html" group="label" name="html" +```angular-html file="./directive/_label.component.html" group="label" name="html" ``` -```angular-ts file="./directive//_label.component.ts"#L1-L2 group="label" name="typescript" +```angular-ts file="./directive/_label.component.ts"#L1-L2 group="label" name="typescript" ``` @@ -115,11 +115,11 @@ keyword: ButtonDirectivePage {{ NgDocActions.demo('d_icon_only', {container: false}) }} -```angular-html file="./directive//_icon-only.component.html" group="icon-only" name="html" +```angular-html file="./directive/_icon-only.component.html" group="icon-only" name="html" ``` -```angular-ts file="./directive//_icon-only.component.ts"#L1-L2 group="icon-only" name="typescript" +```angular-ts file="./directive/_icon-only.component.ts"#L1-L2 group="icon-only" name="typescript" ``` @@ -127,10 +127,10 @@ keyword: ButtonDirectivePage {{ NgDocActions.demo('d_disabled', {container: false}) }} -```angular-html file="./directive//_disabled.component.html" group="disabled" name="html" +```angular-html file="./directive/_disabled.component.html" group="disabled" name="html" ``` -```angular-ts file="./directive//_disabled.component.ts"#L1-L1 group="disabled" name="typescript" +```angular-ts file="./directive/_disabled.component.ts"#L1-L1 group="disabled" name="typescript" ``` diff --git a/apps/docs/docs/shared/component-deprecated-usage.md b/apps/docs/docs/shared/component-deprecated-usage.md index f1d1e88a..ae76d7e8 100644 --- a/apps/docs/docs/shared/component-deprecated-usage.md +++ b/apps/docs/docs/shared/component-deprecated-usage.md @@ -1,10 +1,6 @@ {% macro deprecated() %} -> -> -> d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /> -> +> **Warning** > > _Component_ style over _directive_ usage is now deprecated. Please go to the **Directive** tab. > From 98f1b7c47afa0550a0bbd7dbff3e17e497af5270 Mon Sep 17 00:00:00 2001 From: MGREMY Date: Wed, 22 Jan 2025 15:37:09 +0100 Subject: [PATCH 004/159] 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, From 37201d7b8d2ca1c5f42c2abb4cc1fc7906b1e576 Mon Sep 17 00:00:00 2001 From: MGREMY Date: Thu, 23 Jan 2025 15:01:34 +0100 Subject: [PATCH 005/159] docs: add sidebar directive --- .../docs/docs/components/sidebar/component.md | 29 +++++++++++++++++++ .../{ => component}/_default.component.html | 0 .../{ => component}/_default.component.ts | 0 .../_multi-level.component.html | 0 .../{ => component}/_multi-level.component.ts | 0 .../sidebar/directive/_default.component.html | 10 +++++++ .../sidebar/directive/_default.component.ts | 20 +++++++++++++ .../directive/_multi-level.component.html | 15 ++++++++++ .../directive/_multi-level.component.ts | 22 ++++++++++++++ apps/docs/docs/components/sidebar/index.md | 13 +++++---- .../docs/components/sidebar/ng-doc.page.ts | 12 +++++--- 11 files changed, 111 insertions(+), 10 deletions(-) create mode 100644 apps/docs/docs/components/sidebar/component.md rename apps/docs/docs/components/sidebar/{ => component}/_default.component.html (100%) rename apps/docs/docs/components/sidebar/{ => component}/_default.component.ts (100%) rename apps/docs/docs/components/sidebar/{ => component}/_multi-level.component.html (100%) rename apps/docs/docs/components/sidebar/{ => component}/_multi-level.component.ts (100%) create mode 100644 apps/docs/docs/components/sidebar/directive/_default.component.html create mode 100644 apps/docs/docs/components/sidebar/directive/_default.component.ts create mode 100644 apps/docs/docs/components/sidebar/directive/_multi-level.component.html create mode 100644 apps/docs/docs/components/sidebar/directive/_multi-level.component.ts diff --git a/apps/docs/docs/components/sidebar/component.md b/apps/docs/docs/components/sidebar/component.md new file mode 100644 index 00000000..867743dc --- /dev/null +++ b/apps/docs/docs/components/sidebar/component.md @@ -0,0 +1,29 @@ +--- +title: Sidebar Component +route: component +keyword: SidebarPage +--- + +## Default sidebar + +{{ 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-L6 group="default" name="typescript" + +``` + +# Multi-level menu + +{{ NgDocActions.demo('c_multilevel', {container: false}) }} + +```angular-html file="./component/_multi-level.component.html" group="multi-level" name="html" + +``` + +```angular-ts file="./component/_multi-level.component.ts"#L1-L7 group="multi-level" name="typescript" + +``` diff --git a/apps/docs/docs/components/sidebar/_default.component.html b/apps/docs/docs/components/sidebar/component/_default.component.html similarity index 100% rename from apps/docs/docs/components/sidebar/_default.component.html rename to apps/docs/docs/components/sidebar/component/_default.component.html diff --git a/apps/docs/docs/components/sidebar/_default.component.ts b/apps/docs/docs/components/sidebar/component/_default.component.ts similarity index 100% rename from apps/docs/docs/components/sidebar/_default.component.ts rename to apps/docs/docs/components/sidebar/component/_default.component.ts diff --git a/apps/docs/docs/components/sidebar/_multi-level.component.html b/apps/docs/docs/components/sidebar/component/_multi-level.component.html similarity index 100% rename from apps/docs/docs/components/sidebar/_multi-level.component.html rename to apps/docs/docs/components/sidebar/component/_multi-level.component.html diff --git a/apps/docs/docs/components/sidebar/_multi-level.component.ts b/apps/docs/docs/components/sidebar/component/_multi-level.component.ts similarity index 100% rename from apps/docs/docs/components/sidebar/_multi-level.component.ts rename to apps/docs/docs/components/sidebar/component/_multi-level.component.ts diff --git a/apps/docs/docs/components/sidebar/directive/_default.component.html b/apps/docs/docs/components/sidebar/directive/_default.component.html new file mode 100644 index 00000000..a51dcebc --- /dev/null +++ b/apps/docs/docs/components/sidebar/directive/_default.component.html @@ -0,0 +1,10 @@ + + + Dashboard + Kanban + Inbox + Users + Products + + Hello world ! + diff --git a/apps/docs/docs/components/sidebar/directive/_default.component.ts b/apps/docs/docs/components/sidebar/directive/_default.component.ts new file mode 100644 index 00000000..7440f684 --- /dev/null +++ b/apps/docs/docs/components/sidebar/directive/_default.component.ts @@ -0,0 +1,20 @@ +import { + SidebarComponent, + SidebarItemComponent, + SidebarMenuComponent, + SidebarPageContentComponent, +} from 'flowbite-angular/sidebar'; + +import { Component } from '@angular/core'; + +@Component({ + selector: 'flowbite-demo-sidebar-default', + imports: [ + SidebarComponent, + SidebarMenuComponent, + SidebarItemComponent, + SidebarPageContentComponent, + ], + templateUrl: './_default.component.html', +}) +export class FlowbiteDefaultComponent {} diff --git a/apps/docs/docs/components/sidebar/directive/_multi-level.component.html b/apps/docs/docs/components/sidebar/directive/_multi-level.component.html new file mode 100644 index 00000000..b988d35c --- /dev/null +++ b/apps/docs/docs/components/sidebar/directive/_multi-level.component.html @@ -0,0 +1,15 @@ + + + Dashboard + + Products + Billing + Invoice + + Kanban + Inbox + Users + Products + + Hello world ! + diff --git a/apps/docs/docs/components/sidebar/directive/_multi-level.component.ts b/apps/docs/docs/components/sidebar/directive/_multi-level.component.ts new file mode 100644 index 00000000..47f21ee9 --- /dev/null +++ b/apps/docs/docs/components/sidebar/directive/_multi-level.component.ts @@ -0,0 +1,22 @@ +import { + SidebarComponent, + SidebarItemComponent, + SidebarItemGroupComponent, + SidebarMenuComponent, + SidebarPageContentComponent, +} from 'flowbite-angular/sidebar'; + +import { Component } from '@angular/core'; + +@Component({ + selector: 'flowbite-demo-sidebar-multi-level', + imports: [ + SidebarComponent, + SidebarMenuComponent, + SidebarItemComponent, + SidebarItemGroupComponent, + SidebarPageContentComponent, + ], + templateUrl: './_multi-level.component.html', +}) +export class FlowbiteMultiLevelComponent {} diff --git a/apps/docs/docs/components/sidebar/index.md b/apps/docs/docs/components/sidebar/index.md index 98caf228..1a6d4391 100644 --- a/apps/docs/docs/components/sidebar/index.md +++ b/apps/docs/docs/components/sidebar/index.md @@ -1,27 +1,28 @@ --- +title: Sidebar Directive keyword: SidebarPage --- ## Default sidebar -{{ 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-L6 group="default" name="typescript" +```angular-ts file="./directive/_default.component.ts"#L1-L6 group="default" name="typescript" ``` # Multi-level menu -{{ NgDocActions.demo('flowbiteMultiLevelComponent', {container: false}) }} +{{ NgDocActions.demo('d_multilevel', {container: false}) }} -```angular-html file="./_multi-level.component.html" group="multi-level" name="html" +```angular-html file="./directive/_multi-level.component.html" group="multi-level" name="html" ``` -```angular-ts file="./_multi-level.component.ts"#L1-L7 group="multi-level" name="typescript" +```angular-ts file="./directive/_multi-level.component.ts"#L1-L7 group="multi-level" name="typescript" ``` diff --git a/apps/docs/docs/components/sidebar/ng-doc.page.ts b/apps/docs/docs/components/sidebar/ng-doc.page.ts index a0c27a0c..30f7bebf 100644 --- a/apps/docs/docs/components/sidebar/ng-doc.page.ts +++ b/apps/docs/docs/components/sidebar/ng-doc.page.ts @@ -1,6 +1,8 @@ import ComponentCategory from '../ng-doc.category'; -import { FlowbiteDefaultComponent } from './_default.component'; -import { FlowbiteMultiLevelComponent } from './_multi-level.component'; +import { FlowbiteDefaultComponent as c_default } from './component/_default.component'; +import { FlowbiteMultiLevelComponent as c_multilevel } from './component/_multi-level.component'; +import { FlowbiteDefaultComponent as d_default } from './directive/_default.component'; +import { FlowbiteMultiLevelComponent as d_multilevel } from './directive/_multi-level.component'; import type { NgDocPage } from '@ng-doc/core'; @@ -15,8 +17,10 @@ const sidebar: NgDocPage = { category: ComponentCategory, order: 9, demos: { - flowbiteDefaultComponent: FlowbiteDefaultComponent, - flowbiteMultiLevelComponent: FlowbiteMultiLevelComponent, + c_default: c_default, + c_multilevel: c_multilevel, + d_default: d_default, + d_multilevel: d_multilevel, }, }; From 1b526ac4c0b69d4fdf7625c80df569276d3e6b20 Mon Sep 17 00:00:00 2001 From: MGREMY Date: Thu, 23 Jan 2025 16:49:38 +0100 Subject: [PATCH 006/159] feat(sidebar): make flowbite-sidebar-* usable as directive --- .../docs/docs/components/sidebar/component.md | 8 +- .../sidebar/component/_default.component.html | 15 ++-- .../sidebar/component/_default.component.ts | 17 ++-- .../component/_multi-level.component.html | 23 +++-- .../component/_multi-level.component.ts | 13 +-- .../sidebar/directive/_default.component.html | 21 ++--- .../sidebar/directive/_default.component.ts | 17 ++-- .../directive/_multi-level.component.html | 35 ++++---- .../directive/_multi-level.component.ts | 13 +-- apps/docs/docs/components/sidebar/index.md | 4 +- .../docs/components/sidebar/ng-doc.page.ts | 2 +- .../core/flowbite.theme.init.ts | 26 ------ libs/flowbite-angular/sidebar/index.ts | 32 ------- .../sidebar/sidebar-item-group.component.ts | 31 ++++--- .../sidebar-item-group.theme.service.ts | 3 +- .../sidebar/sidebar-item-group.theme.ts | 21 ++++- .../sidebar/sidebar-item.component.ts | 18 ++-- .../sidebar/sidebar-menu.component.ts | 89 ------------------- .../sidebar/sidebar-menu.theme.service.ts | 45 ---------- .../sidebar/sidebar-menu.theme.ts | 57 ------------ .../sidebar/sidebar-page-content.component.ts | 68 -------------- .../sidebar-page-content.theme.service.ts | 44 --------- .../sidebar/sidebar-page-content.theme.ts | 42 --------- .../sidebar/sidebar-toggle.component.ts | 5 +- .../sidebar/sidebar.component.ts | 35 +++++--- .../sidebar/sidebar.theme.service.ts | 10 ++- .../flowbite-angular/sidebar/sidebar.theme.ts | 41 ++++++++- 27 files changed, 198 insertions(+), 537 deletions(-) delete mode 100644 libs/flowbite-angular/sidebar/sidebar-menu.component.ts delete mode 100644 libs/flowbite-angular/sidebar/sidebar-menu.theme.service.ts delete mode 100644 libs/flowbite-angular/sidebar/sidebar-menu.theme.ts delete mode 100644 libs/flowbite-angular/sidebar/sidebar-page-content.component.ts delete mode 100644 libs/flowbite-angular/sidebar/sidebar-page-content.theme.service.ts delete mode 100644 libs/flowbite-angular/sidebar/sidebar-page-content.theme.ts diff --git a/apps/docs/docs/components/sidebar/component.md b/apps/docs/docs/components/sidebar/component.md index 867743dc..910b1287 100644 --- a/apps/docs/docs/components/sidebar/component.md +++ b/apps/docs/docs/components/sidebar/component.md @@ -4,6 +4,10 @@ route: component keyword: SidebarPage --- +{% import "../../shared/component-deprecated-usage.md" as cdu %} + +{{ cdu.deprecated() }} + ## Default sidebar {{ NgDocActions.demo('c_default', {container: false}) }} @@ -12,11 +16,11 @@ keyword: SidebarPage ``` -```angular-ts file="./component/_default.component.ts"#L1-L6 group="default" name="typescript" +```angular-ts file="./component/_default.component.ts"#L1-L3 group="default" name="typescript" ``` -# Multi-level menu +## Multi-level menu {{ NgDocActions.demo('c_multilevel', {container: false}) }} diff --git a/apps/docs/docs/components/sidebar/component/_default.component.html b/apps/docs/docs/components/sidebar/component/_default.component.html index a51dcebc..76d0d2cd 100644 --- a/apps/docs/docs/components/sidebar/component/_default.component.html +++ b/apps/docs/docs/components/sidebar/component/_default.component.html @@ -1,10 +1,9 @@ - - Dashboard - Kanban - Inbox - Users - Products - - Hello world ! + Dashboard + Kanban + Inbox + Users + Products + +
Hello world !
diff --git a/apps/docs/docs/components/sidebar/component/_default.component.ts b/apps/docs/docs/components/sidebar/component/_default.component.ts index 7440f684..930b015a 100644 --- a/apps/docs/docs/components/sidebar/component/_default.component.ts +++ b/apps/docs/docs/components/sidebar/component/_default.component.ts @@ -1,20 +1,13 @@ -import { - SidebarComponent, - SidebarItemComponent, - SidebarMenuComponent, - SidebarPageContentComponent, -} from 'flowbite-angular/sidebar'; +import { SidebarComponent, SidebarItemComponent } from 'flowbite-angular/sidebar'; import { Component } from '@angular/core'; @Component({ selector: 'flowbite-demo-sidebar-default', - imports: [ - SidebarComponent, - SidebarMenuComponent, - SidebarItemComponent, - SidebarPageContentComponent, - ], + imports: [SidebarComponent, SidebarItemComponent], templateUrl: './_default.component.html', + host: { + class: 'flex flex-row', + }, }) export class FlowbiteDefaultComponent {} diff --git a/apps/docs/docs/components/sidebar/component/_multi-level.component.html b/apps/docs/docs/components/sidebar/component/_multi-level.component.html index b988d35c..48db530c 100644 --- a/apps/docs/docs/components/sidebar/component/_multi-level.component.html +++ b/apps/docs/docs/components/sidebar/component/_multi-level.component.html @@ -1,15 +1,14 @@ - - Dashboard - - Products - Billing - Invoice - - Kanban - Inbox - Users + Dashboard + Products - - Hello world ! + Billing + Invoice + + Kanban + Inbox + Users + Products + +
Hello world !
diff --git a/apps/docs/docs/components/sidebar/component/_multi-level.component.ts b/apps/docs/docs/components/sidebar/component/_multi-level.component.ts index 47f21ee9..5c590049 100644 --- a/apps/docs/docs/components/sidebar/component/_multi-level.component.ts +++ b/apps/docs/docs/components/sidebar/component/_multi-level.component.ts @@ -2,21 +2,16 @@ import { SidebarComponent, SidebarItemComponent, SidebarItemGroupComponent, - SidebarMenuComponent, - SidebarPageContentComponent, } from 'flowbite-angular/sidebar'; import { Component } from '@angular/core'; @Component({ selector: 'flowbite-demo-sidebar-multi-level', - imports: [ - SidebarComponent, - SidebarMenuComponent, - SidebarItemComponent, - SidebarItemGroupComponent, - SidebarPageContentComponent, - ], + imports: [SidebarComponent, SidebarItemComponent, SidebarItemGroupComponent], templateUrl: './_multi-level.component.html', + host: { + class: 'flex flex-row', + }, }) export class FlowbiteMultiLevelComponent {} diff --git a/apps/docs/docs/components/sidebar/directive/_default.component.html b/apps/docs/docs/components/sidebar/directive/_default.component.html index a51dcebc..33247bf8 100644 --- a/apps/docs/docs/components/sidebar/directive/_default.component.html +++ b/apps/docs/docs/components/sidebar/directive/_default.component.html @@ -1,10 +1,11 @@ - - - Dashboard - Kanban - Inbox - Users - Products - - Hello world ! - + + +
Hello world !
diff --git a/apps/docs/docs/components/sidebar/directive/_default.component.ts b/apps/docs/docs/components/sidebar/directive/_default.component.ts index 7440f684..930b015a 100644 --- a/apps/docs/docs/components/sidebar/directive/_default.component.ts +++ b/apps/docs/docs/components/sidebar/directive/_default.component.ts @@ -1,20 +1,13 @@ -import { - SidebarComponent, - SidebarItemComponent, - SidebarMenuComponent, - SidebarPageContentComponent, -} from 'flowbite-angular/sidebar'; +import { SidebarComponent, SidebarItemComponent } from 'flowbite-angular/sidebar'; import { Component } from '@angular/core'; @Component({ selector: 'flowbite-demo-sidebar-default', - imports: [ - SidebarComponent, - SidebarMenuComponent, - SidebarItemComponent, - SidebarPageContentComponent, - ], + imports: [SidebarComponent, SidebarItemComponent], templateUrl: './_default.component.html', + host: { + class: 'flex flex-row', + }, }) export class FlowbiteDefaultComponent {} diff --git a/apps/docs/docs/components/sidebar/directive/_multi-level.component.html b/apps/docs/docs/components/sidebar/directive/_multi-level.component.html index b988d35c..1231be40 100644 --- a/apps/docs/docs/components/sidebar/directive/_multi-level.component.html +++ b/apps/docs/docs/components/sidebar/directive/_multi-level.component.html @@ -1,15 +1,20 @@ - - - Dashboard - - Products - Billing - Invoice - - Kanban - Inbox - Users - Products - - Hello world ! - + + +
Hello world !
diff --git a/apps/docs/docs/components/sidebar/directive/_multi-level.component.ts b/apps/docs/docs/components/sidebar/directive/_multi-level.component.ts index 47f21ee9..5c590049 100644 --- a/apps/docs/docs/components/sidebar/directive/_multi-level.component.ts +++ b/apps/docs/docs/components/sidebar/directive/_multi-level.component.ts @@ -2,21 +2,16 @@ import { SidebarComponent, SidebarItemComponent, SidebarItemGroupComponent, - SidebarMenuComponent, - SidebarPageContentComponent, } from 'flowbite-angular/sidebar'; import { Component } from '@angular/core'; @Component({ selector: 'flowbite-demo-sidebar-multi-level', - imports: [ - SidebarComponent, - SidebarMenuComponent, - SidebarItemComponent, - SidebarItemGroupComponent, - SidebarPageContentComponent, - ], + imports: [SidebarComponent, SidebarItemComponent, SidebarItemGroupComponent], templateUrl: './_multi-level.component.html', + host: { + class: 'flex flex-row', + }, }) export class FlowbiteMultiLevelComponent {} diff --git a/apps/docs/docs/components/sidebar/index.md b/apps/docs/docs/components/sidebar/index.md index 1a6d4391..1886a30c 100644 --- a/apps/docs/docs/components/sidebar/index.md +++ b/apps/docs/docs/components/sidebar/index.md @@ -11,11 +11,11 @@ keyword: SidebarPage ``` -```angular-ts file="./directive/_default.component.ts"#L1-L6 group="default" name="typescript" +```angular-ts file="./directive/_default.component.ts"#L1-L3 group="default" name="typescript" ``` -# Multi-level menu +## Multi-level menu {{ NgDocActions.demo('d_multilevel', {container: false}) }} diff --git a/apps/docs/docs/components/sidebar/ng-doc.page.ts b/apps/docs/docs/components/sidebar/ng-doc.page.ts index 30f7bebf..ffdd109e 100644 --- a/apps/docs/docs/components/sidebar/ng-doc.page.ts +++ b/apps/docs/docs/components/sidebar/ng-doc.page.ts @@ -13,7 +13,7 @@ import type { NgDocPage } from '@ng-doc/core'; */ const sidebar: NgDocPage = { title: 'Sidebar', - mdFile: './index.md', + mdFile: ['./index.md', './component.md'], category: ComponentCategory, order: 9, demos: { diff --git a/libs/flowbite-angular/core/flowbite.theme.init.ts b/libs/flowbite-angular/core/flowbite.theme.init.ts index f68c5585..18ea6a29 100644 --- a/libs/flowbite-angular/core/flowbite.theme.init.ts +++ b/libs/flowbite-angular/core/flowbite.theme.init.ts @@ -133,8 +133,6 @@ import { import { FLOWBITE_SIDEBAR_ITEM_GROUP_THEME_TOKEN, FLOWBITE_SIDEBAR_ITEM_THEME_TOKEN, - FLOWBITE_SIDEBAR_MENU_THEME_TOKEN, - FLOWBITE_SIDEBAR_PAGE_CONTENT_THEME_TOKEN, FLOWBITE_SIDEBAR_THEME_TOKEN, FLOWBITE_SIDEBAR_TOGGLE_THEME_TOKEN, sidebarDefaultValueProvider, @@ -144,12 +142,6 @@ import { SidebarItemGroupThemeService, sidebarItemTheme, SidebarItemThemeService, - sidebarMenuDefaultValueProvider, - sidebarMenuTheme, - SidebarMenuThemeService, - sidebarPageContentDefaultValueProvider, - sidebarPageContentTheme, - SidebarPageContentThemeService, sidebarTheme, SidebarThemeService, sidebarToggleDefaultValueProvider, @@ -285,14 +277,6 @@ export function initFlowbite(): EnvironmentProviders { provide: SidebarItemThemeService, useClass: SidebarItemThemeService, }, - { - provide: SidebarMenuThemeService, - useClass: SidebarMenuThemeService, - }, - { - provide: SidebarPageContentThemeService, - useClass: SidebarPageContentThemeService, - }, { provide: SidebarToggleThemeService, useClass: SidebarToggleThemeService, @@ -417,14 +401,6 @@ export function initFlowbite(): EnvironmentProviders { provide: FLOWBITE_SIDEBAR_ITEM_THEME_TOKEN, useValue: sidebarItemTheme, }, - { - provide: FLOWBITE_SIDEBAR_MENU_THEME_TOKEN, - useValue: sidebarMenuTheme, - }, - { - provide: FLOWBITE_SIDEBAR_PAGE_CONTENT_THEME_TOKEN, - useValue: sidebarPageContentTheme, - }, { provide: FLOWBITE_SIDEBAR_TOGGLE_THEME_TOKEN, useValue: sidebarToggleTheme, @@ -465,8 +441,6 @@ export function initFlowbite(): EnvironmentProviders { scrollTopDefaultValueProvider, sidebarDefaultValueProvider, sidebarToggleDefaultValueProvider, - sidebarPageContentDefaultValueProvider, - sidebarMenuDefaultValueProvider, sidebarItemDefaultValueProvider, sidebarItemGroupDefaultValueProvider, ]); diff --git a/libs/flowbite-angular/sidebar/index.ts b/libs/flowbite-angular/sidebar/index.ts index 0f89f9b3..849addc5 100644 --- a/libs/flowbite-angular/sidebar/index.ts +++ b/libs/flowbite-angular/sidebar/index.ts @@ -69,35 +69,3 @@ export { FLOWBITE_SIDEBAR_TOGGLE_THEME_TOKEN, SidebarToggleThemeService, } from './sidebar-toggle.theme.service'; - -export { - SidebarPageContentComponent, - FLOWBITE_SIDEBAR_PAGE_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE, - sidebarPageContentDefaultValueProvider, -} from './sidebar-page-content.component'; -export type { - SidebarPageContentClass, - SidebarPageContentProperties, - SidebarPageContentTheme, -} from './sidebar-page-content.theme'; -export { sidebarPageContentTheme } from './sidebar-page-content.theme'; -export { - FLOWBITE_SIDEBAR_PAGE_CONTENT_THEME_TOKEN, - SidebarPageContentThemeService, -} from './sidebar-page-content.theme.service'; - -export { - SidebarMenuComponent, - FLOWBITE_SIDEBAR_MENU_CUSTOM_STYLE_DEFAULT_VALUE, - sidebarMenuDefaultValueProvider, -} from './sidebar-menu.component'; -export type { - SidebarMenuClass, - SidebarMenuProperties, - SidebarMenuTheme, -} from './sidebar-menu.theme'; -export { sidebarMenuTheme } from './sidebar-menu.theme'; -export { - FLOWBITE_SIDEBAR_MENU_THEME_TOKEN, - SidebarMenuThemeService, -} from './sidebar-menu.theme.service'; diff --git a/libs/flowbite-angular/sidebar/sidebar-item-group.component.ts b/libs/flowbite-angular/sidebar/sidebar-item-group.component.ts index 0b2f44c6..56e7b832 100644 --- a/libs/flowbite-angular/sidebar/sidebar-item-group.component.ts +++ b/libs/flowbite-angular/sidebar/sidebar-item-group.component.ts @@ -1,11 +1,11 @@ import type { SidebarItemGroupClass, SidebarItemGroupTheme } from './sidebar-item-group.theme'; import { SidebarItemGroupThemeService } from './sidebar-item-group.theme.service'; import { SidebarItemComponent } from './sidebar-item.component'; -import { SidebarMenuComponent } from './sidebar-menu.component'; +import { SidebarComponent } from './sidebar.component'; import type { SidebarColors } from './sidebar.theme'; import type { DeepPartial } from 'flowbite-angular'; -import { BaseComponent } from 'flowbite-angular'; +import { BaseComponent, booleanToFlowbiteBoolean } from 'flowbite-angular'; import { IconComponent, IconRegistry } from 'flowbite-angular/icon'; import { CHEVRON_DOWN_SVG_ICON } from 'flowbite-angular/utils'; @@ -39,20 +39,24 @@ export const sidebarItemGroupDefaultValueProvider = makeEnvironmentProviders([ @Component({ standalone: true, imports: [IconComponent], - selector: 'flowbite-sidebar-item-group', + selector: ` + flowbite-sidebar-item-group, + li[flowbite-sidebar-item-group] + `, template: ` - -

{{ title() }}

+ {{ title() }} - - @if (isOpen()) { + +
    - } +
`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, @@ -71,9 +75,9 @@ export class SidebarItemGroupComponent extends BaseComponent(this.sidebarMenuComponent.color()); + public color = model(this.sidebarComponent.color()); /** * Set the sidebar item group title */ @@ -109,6 +113,7 @@ export class SidebarItemGroupComponent extends BaseComponent; } @@ -18,10 +19,14 @@ export interface SidebarItemGroupTheme { root: { base: string; }; - spanText: { + buttonText: { base: string; color: SidebarColors; }; + list: { + base: string; + isOpen: FlowbiteBoolean; + }; } /** @@ -31,7 +36,7 @@ export const sidebarItemGroupTheme: SidebarItemGroupTheme = createTheme({ root: { base: 'flex flex-col py-2 font-semibold cursor-pointer', }, - spanText: { + buttonText: { base: 'flex flex-row justify-between m-2', color: { primary: 'text-primary-600', @@ -42,11 +47,19 @@ export const sidebarItemGroupTheme: SidebarItemGroupTheme = createTheme({ yellow: 'text-yellow-600', }, }, + list: { + base: 'py-2 space-y-2', + isOpen: { + enabled: '', + disabled: 'collapse', + }, + }, }); /** * Generated class definition for `SidebarItemGroupComponent` */ export interface SidebarItemGroupClass extends FlowbiteClass { - spanClass: string; + buttonClass: string; + listClass: string; } diff --git a/libs/flowbite-angular/sidebar/sidebar-item.component.ts b/libs/flowbite-angular/sidebar/sidebar-item.component.ts index e4733eaf..c008f192 100644 --- a/libs/flowbite-angular/sidebar/sidebar-item.component.ts +++ b/libs/flowbite-angular/sidebar/sidebar-item.component.ts @@ -1,7 +1,7 @@ import { SidebarItemGroupComponent } from './sidebar-item-group.component'; import type { SidebarItemClass, SidebarItemTheme } from './sidebar-item.theme'; import { SidebarItemThemeService } from './sidebar-item.theme.service'; -import { SidebarMenuComponent } from './sidebar-menu.component'; +import { SidebarComponent } from './sidebar.component'; import type { SidebarColors } from './sidebar.theme'; import type { DeepPartial } from 'flowbite-angular'; @@ -54,7 +54,10 @@ export const sidebarItemDefaultValueProvider = makeEnvironmentProviders([ @Component({ standalone: true, imports: [SanitizeHtmlPipe, BadgeComponent], - selector: 'flowbite-sidebar-item', + selector: ` + flowbite-sidebar-item, + li[flowbite-sidebar-item] + `, template: ` @if (icon()) { { */ public readonly sidebarItemGroupComponent = inject(SidebarItemGroupComponent, { optional: true }); /** - * The optional parent `SidebarMenuComponent` + * The parent `SidebarComponent` */ - public readonly sidebarMenuComponent = inject(SidebarMenuComponent, { optional: true }); + public readonly sidebarComponent = inject(SidebarComponent); //#region properties /** @@ -115,7 +118,7 @@ export class SidebarItemComponent extends BaseComponent { * @default `SidebarMenuComponent`'s color */ public color = model( - (this.sidebarItemGroupComponent ?? this.sidebarMenuComponent)!.color() + (this.sidebarItemGroupComponent ?? this.sidebarComponent).color() ); /** * Set the sidebar item label @@ -144,9 +147,6 @@ export class SidebarItemComponent extends BaseComponent { * Toggle sidebar menu visibility */ onClick(): void { - (this.sidebarMenuComponent || this.sidebarItemGroupComponent?.sidebarMenuComponent)?.closeAll(); - ( - this.sidebarMenuComponent || this.sidebarItemGroupComponent?.sidebarMenuComponent - )?.sidebarComponent.toggleVisibility(false); + this.sidebarComponent.closeAll(); } } diff --git a/libs/flowbite-angular/sidebar/sidebar-menu.component.ts b/libs/flowbite-angular/sidebar/sidebar-menu.component.ts deleted file mode 100644 index a661f55c..00000000 --- a/libs/flowbite-angular/sidebar/sidebar-menu.component.ts +++ /dev/null @@ -1,89 +0,0 @@ -import { SidebarItemGroupComponent } from './sidebar-item-group.component'; -import { SidebarItemComponent } from './sidebar-item.component'; -import type { SidebarMenuClass, SidebarMenuTheme } from './sidebar-menu.theme'; -import { SidebarMenuThemeService } from './sidebar-menu.theme.service'; -import { SidebarComponent } from './sidebar.component'; -import type { SidebarColors } from './sidebar.theme'; - -import type { DeepPartial } from 'flowbite-angular'; -import { BaseComponent, booleanToFlowbiteBoolean } from 'flowbite-angular'; - -import { - ChangeDetectionStrategy, - Component, - contentChildren, - inject, - InjectionToken, - makeEnvironmentProviders, - model, - ViewEncapsulation, -} from '@angular/core'; - -export const FLOWBITE_SIDEBAR_MENU_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken< - DeepPartial ->('FLOWBITE_SIDEBAR_MENU_CUSTOM_STYLE_DEFAULT_VALUE'); - -export const sidebarMenuDefaultValueProvider = makeEnvironmentProviders([ - { - provide: FLOWBITE_SIDEBAR_MENU_CUSTOM_STYLE_DEFAULT_VALUE, - useValue: {}, - }, -]); - -/** - * @see https://flowbite.com/docs/components/sidebar/ - */ -@Component({ - standalone: true, - selector: 'flowbite-sidebar-menu', - template: '', - encapsulation: ViewEncapsulation.None, - changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class SidebarMenuComponent extends BaseComponent { - /** - * Service injected used to generate class - */ - public readonly themeService = inject(SidebarMenuThemeService); - /** - * The parent `SidebarComponent` - */ - public readonly sidebarComponent = inject(SidebarComponent); - /** - * List of `SidebarItemGroupComponent` - */ - public readonly sidebarItemGroupChildren = contentChildren(SidebarItemGroupComponent); - /** - * List of `SidebarItemComponent` - */ - public readonly sidebarItemChildren = contentChildren(SidebarItemComponent); - - //#region properties - /** - * Set the sidebar menu color - * - * @default `SidebarComponent`'s color - */ - public color = model(this.sidebarComponent.color()); - /** - * Set the custom style for this sidebar menu - */ - public customStyle = model(inject(FLOWBITE_SIDEBAR_MENU_CUSTOM_STYLE_DEFAULT_VALUE)); - //#endregion - - public override fetchClass(): SidebarMenuClass { - return this.themeService.getClasses({ - isOpen: booleanToFlowbiteBoolean(this.sidebarComponent.isOpen()), - color: this.color(), - displayMode: this.sidebarComponent.displayMode(), - customStyle: this.customStyle(), - }); - } - - /** - * Toggle visibility of ll children to false - */ - public closeAll(): void { - this.sidebarItemGroupChildren().forEach((x) => x.toggleVisibility(false)); - } -} diff --git a/libs/flowbite-angular/sidebar/sidebar-menu.theme.service.ts b/libs/flowbite-angular/sidebar/sidebar-menu.theme.service.ts deleted file mode 100644 index a2163e12..00000000 --- a/libs/flowbite-angular/sidebar/sidebar-menu.theme.service.ts +++ /dev/null @@ -1,45 +0,0 @@ -import type { - SidebarMenuClass, - SidebarMenuProperties, - SidebarMenuTheme, -} from './sidebar-menu.theme'; - -import type { FlowbiteThemeService } from 'flowbite-angular'; -import { mergeTheme } from 'flowbite-angular/utils'; - -import { inject, Injectable, InjectionToken } from '@angular/core'; -import { twMerge } from 'tailwind-merge'; - -/** - * `InjectionToken` used to import `SidebarMenuTheme` value - * - * @example - * ``` - * var theme = inject(FLOWBITE_SIDEBAR_MENU_THEME_TOKEN) - * ``` - */ -export const FLOWBITE_SIDEBAR_MENU_THEME_TOKEN = new InjectionToken( - 'FLOWBITE_SIDEBAR_MENU_THEME_TOKEN' -); - -@Injectable({ - providedIn: 'root', -}) -export class SidebarMenuThemeService implements FlowbiteThemeService { - private readonly baseTheme = inject(FLOWBITE_SIDEBAR_MENU_THEME_TOKEN); - - public getClasses(properties: SidebarMenuProperties): SidebarMenuClass { - const theme: SidebarMenuTheme = mergeTheme(this.baseTheme, properties.customStyle); - - const output: SidebarMenuClass = { - rootClass: twMerge( - theme.root.base, - theme.root.isOpen[properties.isOpen], - properties.isOpen === 'enabled' && theme.root.displayMode[properties.displayMode], - theme.root.color[properties.color] - ), - }; - - return output; - } -} diff --git a/libs/flowbite-angular/sidebar/sidebar-menu.theme.ts b/libs/flowbite-angular/sidebar/sidebar-menu.theme.ts deleted file mode 100644 index 64a0b705..00000000 --- a/libs/flowbite-angular/sidebar/sidebar-menu.theme.ts +++ /dev/null @@ -1,57 +0,0 @@ -import type { SidebarColors, SidebarDisplayMode } from './sidebar.theme'; - -import type { DeepPartial, FlowbiteBoolean, FlowbiteClass } from 'flowbite-angular'; -import { createTheme } from 'flowbite-angular/utils'; - -/** - * Required properties for the class definition of `SidebarMenuComponent` - */ -export interface SidebarMenuProperties { - isOpen: keyof FlowbiteBoolean; - color: keyof SidebarColors; - displayMode: keyof SidebarDisplayMode; - customStyle: DeepPartial; -} - -/** - * Theme definition for `SidebarMenuComponent` - */ -export interface SidebarMenuTheme { - root: { - base: string; - displayMode: SidebarDisplayMode; - isOpen: FlowbiteBoolean; - color: SidebarColors; - }; -} - -/** - * Default theme for `SidebarMenuComponent` - */ -export const sidebarMenuTheme: SidebarMenuTheme = createTheme({ - root: { - base: 'flex-col min-h-full overflow-y-auto shrink-0 pr-1 border-r bg-white dark:bg-gray-800', - displayMode: { - push: '', - over: 'sticky top-0 z-50', - backdrop: 'sticky top-0 z-50', - }, - isOpen: { - enabled: 'flex', - disabled: 'hidden', - }, - color: { - primary: 'border-primary-200 dark:border-primary-700', - dark: 'border-gray-200 dark:border-gray-800', - blue: 'border-blue-200 dark:border-blue-700', - red: 'border-red-200 dark:border-red-700', - green: 'border-green-200 dark:border-green-700', - yellow: 'border-yellow-200 dark:border-yellow-700', - }, - }, -}); - -/** - * Generated class definition for `SidebarMenuComponent` - */ -export type SidebarMenuClass = FlowbiteClass; diff --git a/libs/flowbite-angular/sidebar/sidebar-page-content.component.ts b/libs/flowbite-angular/sidebar/sidebar-page-content.component.ts deleted file mode 100644 index e2d72be5..00000000 --- a/libs/flowbite-angular/sidebar/sidebar-page-content.component.ts +++ /dev/null @@ -1,68 +0,0 @@ -import type { - SidebarPageContentClass, - SidebarPageContentTheme, -} from './sidebar-page-content.theme'; -import { SidebarPageContentThemeService } from './sidebar-page-content.theme.service'; -import { SidebarComponent } from './sidebar.component'; - -import type { DeepPartial } from 'flowbite-angular'; -import { BaseComponent, booleanToFlowbiteBoolean } from 'flowbite-angular'; - -import { - ChangeDetectionStrategy, - Component, - inject, - InjectionToken, - makeEnvironmentProviders, - model, - ViewEncapsulation, -} from '@angular/core'; - -export const FLOWBITE_SIDEBAR_PAGE_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken< - DeepPartial ->('FLOWBITE_SIDEBAR_PAGE_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE'); - -export const sidebarPageContentDefaultValueProvider = makeEnvironmentProviders([ - { - provide: FLOWBITE_SIDEBAR_PAGE_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE, - useValue: {}, - }, -]); - -/** - * @see https://flowbite.com/docs/components/sidebar/ - */ -@Component({ - standalone: true, - selector: 'flowbite-sidebar-page-content', - template: ``, - encapsulation: ViewEncapsulation.None, - changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class SidebarPageContentComponent extends BaseComponent { - /** - * Service injected used to generate class - */ - public readonly themeService = inject(SidebarPageContentThemeService); - /** - * The parent `SidebarComponent` - */ - public readonly sidebarComponent = inject(SidebarComponent); - - //#region properties - /** - * Set the custom style for this sidebar page content - */ - public customStyle = model(inject(FLOWBITE_SIDEBAR_PAGE_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE)); - //endregion - - //region BaseComponent implementation - public override fetchClass(): SidebarPageContentClass { - return this.themeService.getClasses({ - isOpen: booleanToFlowbiteBoolean(this.sidebarComponent.isOpen()), - displayMode: this.sidebarComponent.displayMode(), - customStyle: this.customStyle(), - }); - } - //endregion -} diff --git a/libs/flowbite-angular/sidebar/sidebar-page-content.theme.service.ts b/libs/flowbite-angular/sidebar/sidebar-page-content.theme.service.ts deleted file mode 100644 index 45304f75..00000000 --- a/libs/flowbite-angular/sidebar/sidebar-page-content.theme.service.ts +++ /dev/null @@ -1,44 +0,0 @@ -import type { - SidebarPageContentClass, - SidebarPageContentProperties, - SidebarPageContentTheme, -} from './sidebar-page-content.theme'; - -import type { FlowbiteThemeService } from 'flowbite-angular'; -import { mergeTheme } from 'flowbite-angular/utils'; - -import { inject, Injectable, InjectionToken } from '@angular/core'; -import { twMerge } from 'tailwind-merge'; - -/** - * `InjectionToken` used to import `SidebarPageContentTheme` value - * - * @example - * ``` - * var theme = inject(FLOWBITE_SIDEBAR_PAGE_CONTENT_THEME_TOKEN) - * ``` - */ -export const FLOWBITE_SIDEBAR_PAGE_CONTENT_THEME_TOKEN = - new InjectionToken('FLOWBITE_SIDEBAR_PAGE_CONTENT_THEME_TOKEN'); - -@Injectable({ - providedIn: 'root', -}) -export class SidebarPageContentThemeService - implements FlowbiteThemeService -{ - private readonly baseTheme = inject(FLOWBITE_SIDEBAR_PAGE_CONTENT_THEME_TOKEN); - - public getClasses(properties: SidebarPageContentProperties): SidebarPageContentClass { - const theme: SidebarPageContentTheme = mergeTheme(this.baseTheme, properties.customStyle); - - const output: SidebarPageContentClass = { - rootClass: twMerge( - theme.root.base, - properties.isOpen === 'enabled' && theme.root.displayMode[properties.displayMode] - ), - }; - - return output; - } -} diff --git a/libs/flowbite-angular/sidebar/sidebar-page-content.theme.ts b/libs/flowbite-angular/sidebar/sidebar-page-content.theme.ts deleted file mode 100644 index 0d3bba14..00000000 --- a/libs/flowbite-angular/sidebar/sidebar-page-content.theme.ts +++ /dev/null @@ -1,42 +0,0 @@ -import type { SidebarDisplayMode } from './sidebar.theme'; - -import type { DeepPartial, FlowbiteBoolean, FlowbiteClass } from 'flowbite-angular'; -import { createTheme } from 'flowbite-angular/utils'; - -/** - * Required properties for the class generation of `SidebarPageContentComponent` - */ -export interface SidebarPageContentProperties { - isOpen: keyof FlowbiteBoolean; - displayMode: keyof SidebarDisplayMode; - customStyle: DeepPartial; -} - -/** - * Theme definition for `SidebarPageContentComponent` - */ -export interface SidebarPageContentTheme { - root: { - base: string; - displayMode: SidebarDisplayMode; - }; -} - -/** - * Default theme for `SidebarPageContentComponent` - */ -export const sidebarPageContentTheme: SidebarPageContentTheme = createTheme({ - root: { - base: 'flex flex-1', - displayMode: { - push: '', - over: '', - backdrop: 'sticky left-0 right-0 z-30 bg-gray-500 bg-opacity-50 blur-md', - }, - }, -}); - -/** - * Generated class definition for `SidebarPageContentComponent` - */ -export type SidebarPageContentClass = FlowbiteClass; diff --git a/libs/flowbite-angular/sidebar/sidebar-toggle.component.ts b/libs/flowbite-angular/sidebar/sidebar-toggle.component.ts index a81a986f..52f9a239 100644 --- a/libs/flowbite-angular/sidebar/sidebar-toggle.component.ts +++ b/libs/flowbite-angular/sidebar/sidebar-toggle.component.ts @@ -57,7 +57,10 @@ export const sidebarToggleDefaultValueProvider = makeEnvironmentProviders([ @Component({ standalone: true, imports: [IconComponent], - selector: 'flowbite-sidebar-toggle', + selector: ` + flowbite-sidebar-toggle, + button[flowbite-sidebar-toggle] + `, template: ``, host: { '(click)': 'onClick()', diff --git a/libs/flowbite-angular/sidebar/sidebar.component.ts b/libs/flowbite-angular/sidebar/sidebar.component.ts index f19ee202..69e4a274 100644 --- a/libs/flowbite-angular/sidebar/sidebar.component.ts +++ b/libs/flowbite-angular/sidebar/sidebar.component.ts @@ -1,5 +1,4 @@ -import { SidebarMenuComponent } from './sidebar-menu.component'; -import { SidebarPageContentComponent } from './sidebar-page-content.component'; +import { SidebarItemGroupComponent } from './sidebar-item-group.component'; import type { SidebarClass, SidebarColors, @@ -15,7 +14,7 @@ import type { OnInit } from '@angular/core'; import { ChangeDetectionStrategy, Component, - contentChild, + contentChildren, inject, InjectionToken, makeEnvironmentProviders, @@ -72,8 +71,17 @@ export const sidebarDefaultValueProvider = makeEnvironmentProviders([ */ @Component({ standalone: true, - selector: 'flowbite-sidebar', - template: ``, + selector: ` + flowbite-sidebar, + aside[flowbite-sidebar] + `, + template: ` +
+
    + +
+
+ `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, }) @@ -83,13 +91,9 @@ export class SidebarComponent extends BaseComponent implements OnI */ public readonly themeService = inject(SidebarThemeService); /** - * The child `SidebarMenuComponent` + * List of `SidebarItemGroupComponent` */ - public readonly sidebarMenuChild = contentChild.required(SidebarMenuComponent); - /** - * The child `SidebarPageContentComponent` - */ - public readonly sidebarPageContentChild = contentChild.required(SidebarPageContentComponent); + public readonly sidebarItemGroupChildren = contentChildren(SidebarItemGroupComponent); //#region properties /** @@ -126,6 +130,8 @@ export class SidebarComponent extends BaseComponent implements OnI public override fetchClass(): SidebarClass { return this.themeService.getClasses({ displayMode: this.displayMode(), + isOpen: booleanToFlowbiteBoolean(this.isOpen()), + color: this.color(), isRounded: booleanToFlowbiteBoolean(this.isRounded()), customStyle: this.customStyle(), }); @@ -144,4 +150,11 @@ export class SidebarComponent extends BaseComponent implements OnI this.isOpen.set(isOpen); } + + /** + * Toggle visibility of ll children to false + */ + public closeAll(): void { + this.sidebarItemGroupChildren().forEach((x) => x.toggleVisibility(false)); + } } diff --git a/libs/flowbite-angular/sidebar/sidebar.theme.service.ts b/libs/flowbite-angular/sidebar/sidebar.theme.service.ts index ff0f726b..cace1e39 100644 --- a/libs/flowbite-angular/sidebar/sidebar.theme.service.ts +++ b/libs/flowbite-angular/sidebar/sidebar.theme.service.ts @@ -28,7 +28,15 @@ export class SidebarThemeService implements FlowbiteThemeService; @@ -24,17 +26,52 @@ export interface SidebarTheme { root: { base: string; isRounded: FlowbiteBoolean; + displayMode: SidebarDisplayMode; + isOpen: FlowbiteBoolean; + color: SidebarColors; + }; + container: { + base: string; + }; + list: { + base: string; }; } export const sidebarTheme: SidebarTheme = createTheme({ root: { - base: 'flex flex-row min-h-full', + base: 'top-0 left-0 z-50 w-64 h-screen transition-transform -translate-x-full sm:translate-x-0', isRounded: { enabled: 'rounded', disabled: '', }, + displayMode: { + push: '', + over: 'sticky top-0', + backdrop: 'sticky top-0', + }, + isOpen: { + enabled: '', + disabled: 'hidden', + }, + color: { + primary: 'border-primary-200 dark:border-primary-700', + dark: 'border-gray-200 dark:border-gray-800', + blue: 'border-blue-200 dark:border-blue-700', + red: 'border-red-200 dark:border-red-700', + green: 'border-green-200 dark:border-green-700', + yellow: 'border-yellow-200 dark:border-yellow-700', + }, + }, + container: { + base: 'h-full px-3 py-4 overflow-y-auto', + }, + list: { + base: 'space-y-2 font-medium', }, }); -export type SidebarClass = FlowbiteClass; +export interface SidebarClass extends FlowbiteClass { + containerClass: string; + listClass: string; +} From 76c765d31f6af2d77d3d6e400be54811f61dbed7 Mon Sep 17 00:00:00 2001 From: MGREMY Date: Thu, 23 Jan 2025 16:58:24 +0100 Subject: [PATCH 007/159] docs(sidebar): fix z-40 --- .../docs/components/sidebar/component/_default.component.html | 4 +++- .../components/sidebar/component/_multi-level.component.html | 4 +++- .../docs/components/sidebar/directive/_default.component.html | 1 + .../components/sidebar/directive/_multi-level.component.html | 1 + 4 files changed, 8 insertions(+), 2 deletions(-) diff --git a/apps/docs/docs/components/sidebar/component/_default.component.html b/apps/docs/docs/components/sidebar/component/_default.component.html index 76d0d2cd..36f5730e 100644 --- a/apps/docs/docs/components/sidebar/component/_default.component.html +++ b/apps/docs/docs/components/sidebar/component/_default.component.html @@ -1,4 +1,6 @@ - + Dashboard Kanban Inbox diff --git a/apps/docs/docs/components/sidebar/component/_multi-level.component.html b/apps/docs/docs/components/sidebar/component/_multi-level.component.html index 48db530c..04fe6816 100644 --- a/apps/docs/docs/components/sidebar/component/_multi-level.component.html +++ b/apps/docs/docs/components/sidebar/component/_multi-level.component.html @@ -1,4 +1,6 @@ - + Dashboard Products diff --git a/apps/docs/docs/components/sidebar/directive/_default.component.html b/apps/docs/docs/components/sidebar/directive/_default.component.html index 33247bf8..4e416b2e 100644 --- a/apps/docs/docs/components/sidebar/directive/_default.component.html +++ b/apps/docs/docs/components/sidebar/directive/_default.component.html @@ -1,4 +1,5 @@