diff --git a/apps/docs/docs/components/accordion/_arrow-style.component.html b/apps/docs/docs/components/accordion/_arrow-style.component.html new file mode 100644 index 00000000..7eb8abfb --- /dev/null +++ b/apps/docs/docs/components/accordion/_arrow-style.component.html @@ -0,0 +1,85 @@ + + + What is Flowbite ? + +
+

+ Flowbite is an open-source library of interactive components built on top of Tailwind CSS + including buttons, dropdowns, modals, navbars, and more. +

+

+ Check out this guide to learn how to + + Get started + + and start developing websites even faster with components on top of Tailwind CSS. +

+
+ + + + + Is there a Figma file available ? + + +
+

+ Flowbite is first conceptualized and designed using the Figma software so everything you + see in the library has a design equivalent in our Figma file. +

+

+ Check out the + Figma design system + based on the utility classes from Tailwind CSS and components from Flowbite. +

+
+ + + + + What are the differences between Flowbite and Tailwind UI ? + + +
+

+ The main difference is that the core components from Flowbite are open source under the + MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite + relies on smaller and standalone components, whereas Tailwind UI offers sections of pages. +

+

+ However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as + there is no technical reason stopping you from using the best of two worlds. +

+

+ Learn more about these technologies : +

+ +
+ + + + + + + + diff --git a/apps/docs/docs/components/accordion/_arrow-style.component.ts b/apps/docs/docs/components/accordion/_arrow-style.component.ts new file mode 100644 index 00000000..0b7ddf9b --- /dev/null +++ b/apps/docs/docs/components/accordion/_arrow-style.component.ts @@ -0,0 +1,23 @@ +import { + AccordionComponent, + AccordionContentComponent, + AccordionPanelComponent, + AccordionTitleComponent, +} from 'flowbite-angular/accordion'; +import { IconComponent } from 'flowbite-angular/icon'; + +import { Component } from '@angular/core'; + +@Component({ + selector: 'flowbite-demo-accordion-arrow-style', + standalone: true, + imports: [ + AccordionComponent, + AccordionTitleComponent, + AccordionContentComponent, + AccordionPanelComponent, + IconComponent, + ], + templateUrl: './_arrow-style.component.html', +}) +export class FlowbiteArrowStyleComponent {} diff --git a/apps/docs/docs/components/accordion/index.md b/apps/docs/docs/components/accordion/index.md index 6dede5e3..afb9361e 100644 --- a/apps/docs/docs/components/accordion/index.md +++ b/apps/docs/docs/components/accordion/index.md @@ -49,3 +49,15 @@ keyword: AccordionPage ```angular-ts file="./_flush.component.ts"#L1-L6 group="flush" name="typescript" ``` + +## Arrow style + +{{ NgDocActions.demo('flowbiteArrowStyleComponent', {container: false}) }} + +```angular-html file="./_arrow-style.component.html" group="arrow-style" name="html" + +``` + +```angular-ts file="./_arrow-style.component.ts"#L1-L7 group="arrow-style" name="typescript" + +``` diff --git a/apps/docs/docs/components/accordion/ng-doc.page.ts b/apps/docs/docs/components/accordion/ng-doc.page.ts index 60af4d26..199aa127 100644 --- a/apps/docs/docs/components/accordion/ng-doc.page.ts +++ b/apps/docs/docs/components/accordion/ng-doc.page.ts @@ -1,5 +1,6 @@ import ComponentCategory from '../ng-doc.category'; import { FlowbiteAlwaysOpenComponent } from './_always-open.component'; +import { FlowbiteArrowStyleComponent } from './_arrow-style.component'; import { FlowbiteColorOptionComponent } from './_color-option.component'; import { FlowbiteDefaultComponent } from './_default.component'; import { FlowbiteFlushComponent } from './_flush.component'; @@ -21,6 +22,7 @@ const Accordion: NgDocPage = { flowbiteAlwaysOpenComponent: FlowbiteAlwaysOpenComponent, flowbiteColorOptionComponent: FlowbiteColorOptionComponent, flowbiteFlushComponent: FlowbiteFlushComponent, + flowbiteArrowStyleComponent: FlowbiteArrowStyleComponent, }, }; diff --git a/libs/flowbite-angular/accordion/accordion-title.component.ts b/libs/flowbite-angular/accordion/accordion-title.component.ts index 9938b7b7..8809a49c 100644 --- a/libs/flowbite-angular/accordion/accordion-title.component.ts +++ b/libs/flowbite-angular/accordion/accordion-title.component.ts @@ -8,7 +8,8 @@ import type { DeepPartial } from 'flowbite-angular'; import { IconComponent, IconRegistry } from 'flowbite-angular/icon'; import { CHEVRON_DOWN_SVG_ICON } from 'flowbite-angular/utils'; -import type { OnInit } from '@angular/core'; +import { NgTemplateOutlet } from '@angular/common'; +import type { OnInit, TemplateRef } from '@angular/core'; import { ChangeDetectionStrategy, Component, @@ -20,11 +21,19 @@ import { } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; +export const FLOWBITE_ACCORDION_TITLE_ICON_DEFAULT_VALUE = new InjectionToken< + TemplateRef | undefined +>('FLOWBITE_ACCORDION_TITLE_ICON_DEFAULT_VALUE'); + export const FLOWBITE_ACCORDION_TITLE_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken< DeepPartial >('FLOWBITE_ACCORDION_TITLE_CUSTOM_STYLE_DEFAULT_VALUE'); export const accordionTitleDefaultValueProvider = makeEnvironmentProviders([ + { + provide: FLOWBITE_ACCORDION_TITLE_ICON_DEFAULT_VALUE, + useValue: undefined, + }, { provide: FLOWBITE_ACCORDION_TITLE_CUSTOM_STYLE_DEFAULT_VALUE, useValue: {}, @@ -36,16 +45,20 @@ export const accordionTitleDefaultValueProvider = makeEnvironmentProviders([ */ @Component({ standalone: true, - imports: [IconComponent], + imports: [IconComponent, NgTemplateOutlet], selector: 'flowbite-accordion-title', template: `

- + @if (icon()) { + + } @else { + + } `, host: { '(click)': 'onClick()', @@ -78,6 +91,12 @@ export class AccordionTitleComponent extends BaseComponent * @default `AccordionPanelComponents`'s color */ public color = model(this.accordionPanelComponent.color()); + /** + * Set the accordion title icon + * + * @default undefined + */ + public icon = model(inject(FLOWBITE_ACCORDION_TITLE_ICON_DEFAULT_VALUE)); /** * Set the custom style for this accordion title */