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,