Showing preview only (1,417K chars total). Download the full file or copy to clipboard to get everything.
Repository: themesberg/flowbite-angular
Branch: main
Commit: 9ee23130fdac
Files: 623
Total size: 1.2 MB
Directory structure:
gitextract_kk6wkjj8/
├── .coderabbit.yaml
├── .eslintignore
├── .eslintrc.json
├── .github/
│ ├── CODE_OF_CONDUCT
│ ├── CONTRIBUTING
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug_report.yaml
│ │ └── feature_request.yaml
│ ├── PULL_REQUEST_TEMPLATE/
│ │ ├── default_request_template.md
│ │ └── release_request_template.md
│ ├── pull_request_template.md
│ └── workflows/
│ ├── ci.yml
│ └── release.yml
├── .gitignore
├── .husky/
│ ├── commit-msg
│ └── pre-commit
├── .lintstagedrc
├── .prettierignore
├── .prettierrc
├── .stylelintrc.json
├── .vscode/
│ ├── extensions.json
│ └── settings.json
├── LICENSE
├── README.md
├── apps/
│ ├── .gitkeep
│ ├── docs/
│ │ ├── .eslintrc.json
│ │ ├── docs/
│ │ │ ├── components/
│ │ │ │ ├── accordion/
│ │ │ │ │ ├── _always-open.component.html
│ │ │ │ │ ├── _always-open.component.ts
│ │ │ │ │ ├── _color.component.html
│ │ │ │ │ ├── _color.component.ts
│ │ │ │ │ ├── _default.component.html
│ │ │ │ │ ├── _default.component.ts
│ │ │ │ │ ├── _flush.component.html
│ │ │ │ │ ├── _flush.component.ts
│ │ │ │ │ ├── _icon.component.html
│ │ │ │ │ ├── _icon.component.ts
│ │ │ │ │ ├── index.md
│ │ │ │ │ └── ng-doc.page.ts
│ │ │ │ ├── alert/
│ │ │ │ │ ├── _border-accent.component.html
│ │ │ │ │ ├── _border-accent.component.ts
│ │ │ │ │ ├── _border.component.html
│ │ │ │ │ ├── _border.component.ts
│ │ │ │ │ ├── _default.component.html
│ │ │ │ │ ├── _default.component.ts
│ │ │ │ │ ├── _dismissable.component.html
│ │ │ │ │ ├── _dismissable.component.ts
│ │ │ │ │ ├── _icon.component.html
│ │ │ │ │ ├── _icon.component.ts
│ │ │ │ │ ├── index.md
│ │ │ │ │ └── ng-doc.page.ts
│ │ │ │ ├── badge/
│ │ │ │ │ ├── _border.component.html
│ │ │ │ │ ├── _border.component.ts
│ │ │ │ │ ├── _default.component.html
│ │ │ │ │ ├── _default.component.ts
│ │ │ │ │ ├── _dismiss.component.html
│ │ │ │ │ ├── _dismiss.component.ts
│ │ │ │ │ ├── _icon.component.html
│ │ │ │ │ ├── _icon.component.ts
│ │ │ │ │ ├── _link.component.html
│ │ │ │ │ ├── _link.component.ts
│ │ │ │ │ ├── index.md
│ │ │ │ │ └── ng-doc.page.ts
│ │ │ │ ├── breadcrumb/
│ │ │ │ │ ├── _default.component.html
│ │ │ │ │ ├── _default.component.ts
│ │ │ │ │ ├── index.md
│ │ │ │ │ └── ng-doc.page.ts
│ │ │ │ ├── button/
│ │ │ │ │ ├── _default.component.html
│ │ │ │ │ ├── _default.component.ts
│ │ │ │ │ ├── _disabled.component.html
│ │ │ │ │ ├── _disabled.component.ts
│ │ │ │ │ ├── _group.component.html
│ │ │ │ │ ├── _group.component.ts
│ │ │ │ │ ├── _icon.component.html
│ │ │ │ │ ├── _icon.component.ts
│ │ │ │ │ ├── _outline.component.html
│ │ │ │ │ ├── _outline.component.ts
│ │ │ │ │ ├── _pill.component.html
│ │ │ │ │ ├── _pill.component.ts
│ │ │ │ │ ├── _size.component.html
│ │ │ │ │ ├── _size.component.ts
│ │ │ │ │ ├── index.md
│ │ │ │ │ └── ng-doc.page.ts
│ │ │ │ ├── card/
│ │ │ │ │ ├── _default.component.html
│ │ │ │ │ ├── _default.component.ts
│ │ │ │ │ ├── index.md
│ │ │ │ │ └── ng-doc.page.ts
│ │ │ │ ├── clipboard/
│ │ │ │ │ ├── _default.component.html
│ │ │ │ │ ├── _default.component.ts
│ │ │ │ │ ├── index.md
│ │ │ │ │ └── ng-doc.page.ts
│ │ │ │ ├── dropdown/
│ │ │ │ │ ├── _default.component.html
│ │ │ │ │ ├── _default.component.ts
│ │ │ │ │ ├── index.md
│ │ │ │ │ └── ng-doc.page.ts
│ │ │ │ ├── icon/
│ │ │ │ │ ├── _default.component.html
│ │ │ │ │ ├── _default.component.ts
│ │ │ │ │ ├── index.md
│ │ │ │ │ └── ng-doc.page.ts
│ │ │ │ ├── indicator/
│ │ │ │ │ ├── _default.component.html
│ │ │ │ │ ├── _default.component.ts
│ │ │ │ │ ├── index.md
│ │ │ │ │ └── ng-doc.page.ts
│ │ │ │ ├── input/
│ │ │ │ │ ├── _default.component.html
│ │ │ │ │ ├── _default.component.ts
│ │ │ │ │ ├── index.md
│ │ │ │ │ └── ng-doc.page.ts
│ │ │ │ ├── modal/
│ │ │ │ │ ├── _default.component.html
│ │ │ │ │ ├── _default.component.ts
│ │ │ │ │ ├── _open-programatically.component.html
│ │ │ │ │ ├── _open-programatically.component.ts
│ │ │ │ │ ├── _position.component.html
│ │ │ │ │ ├── _position.component.ts
│ │ │ │ │ ├── index.md
│ │ │ │ │ └── ng-doc.page.ts
│ │ │ │ ├── navbar/
│ │ │ │ │ ├── _default.component.html
│ │ │ │ │ ├── _default.component.ts
│ │ │ │ │ ├── index.md
│ │ │ │ │ └── ng-doc.page.ts
│ │ │ │ ├── ng-doc.category.ts
│ │ │ │ ├── pagination/
│ │ │ │ │ ├── _default.component.html
│ │ │ │ │ ├── _default.component.ts
│ │ │ │ │ ├── index.md
│ │ │ │ │ └── ng-doc.page.ts
│ │ │ │ ├── sidebar/
│ │ │ │ │ ├── _default.component.html
│ │ │ │ │ ├── _default.component.ts
│ │ │ │ │ ├── index.md
│ │ │ │ │ └── ng-doc.page.ts
│ │ │ │ ├── tab/
│ │ │ │ │ ├── _default.component.html
│ │ │ │ │ ├── _default.component.ts
│ │ │ │ │ ├── index.md
│ │ │ │ │ └── ng-doc.page.ts
│ │ │ │ ├── table/
│ │ │ │ │ ├── _default.component.html
│ │ │ │ │ ├── _default.component.ts
│ │ │ │ │ ├── index.md
│ │ │ │ │ └── ng-doc.page.ts
│ │ │ │ └── tooltip/
│ │ │ │ ├── _default.component.html
│ │ │ │ ├── _default.component.ts
│ │ │ │ ├── index.md
│ │ │ │ └── ng-doc.page.ts
│ │ │ ├── customize/
│ │ │ │ ├── dark-mode/
│ │ │ │ │ ├── index.md
│ │ │ │ │ └── ng-doc.page.ts
│ │ │ │ ├── ng-doc.category.ts
│ │ │ │ ├── override-base-style/
│ │ │ │ │ ├── index.md
│ │ │ │ │ └── ng-doc.page.ts
│ │ │ │ ├── theming/
│ │ │ │ │ ├── index.md
│ │ │ │ │ └── ng-doc.page.ts
│ │ │ │ └── use-custom-style/
│ │ │ │ ├── index.md
│ │ │ │ └── ng-doc.page.ts
│ │ │ ├── doc-theme.model.ts
│ │ │ ├── getting-started/
│ │ │ │ ├── introduction/
│ │ │ │ │ ├── index.md
│ │ │ │ │ └── ng-doc.page.ts
│ │ │ │ ├── license/
│ │ │ │ │ ├── index.md
│ │ │ │ │ └── ng-doc.page.ts
│ │ │ │ ├── ng-doc.category.ts
│ │ │ │ ├── ng-primitives/
│ │ │ │ │ ├── index.md
│ │ │ │ │ └── ng-doc.page.ts
│ │ │ │ └── quickstart/
│ │ │ │ ├── index.md
│ │ │ │ └── ng-doc.page.ts
│ │ │ ├── ng-doc.api.ts
│ │ │ └── shared/
│ │ │ └── theme-macro.md
│ │ ├── ng-doc.config.ts
│ │ ├── postcss.config.json
│ │ ├── project.json
│ │ ├── public/
│ │ │ ├── .gitkeep
│ │ │ └── css/
│ │ │ ├── ng-doc/
│ │ │ │ └── base.css
│ │ │ ├── styles.css
│ │ │ └── tw/
│ │ │ └── fonts.css
│ │ ├── server.ts
│ │ ├── src/
│ │ │ ├── app/
│ │ │ │ ├── app.component.html
│ │ │ │ ├── app.component.ts
│ │ │ │ ├── app.config.server.ts
│ │ │ │ ├── app.config.ts
│ │ │ │ ├── app.routes.ts
│ │ │ │ ├── pages/
│ │ │ │ │ ├── docs/
│ │ │ │ │ │ ├── docs.component.css
│ │ │ │ │ │ ├── docs.component.html
│ │ │ │ │ │ ├── docs.component.ts
│ │ │ │ │ │ └── docs.routes.ts
│ │ │ │ │ └── landing/
│ │ │ │ │ ├── landing.component.html
│ │ │ │ │ ├── landing.component.ts
│ │ │ │ │ └── landing.routes.ts
│ │ │ │ └── shared/
│ │ │ │ ├── components/
│ │ │ │ │ └── flowbite-doc-demo-displayer/
│ │ │ │ │ └── flowbite-doc-demo-displayer.component.ts
│ │ │ │ ├── header-template.html
│ │ │ │ └── processors/
│ │ │ │ └── doc-demo-displayer-processor/
│ │ │ │ └── doc-demo-displayer-processor.ts
│ │ │ ├── environments/
│ │ │ │ ├── environment.prod.ts
│ │ │ │ └── environment.ts
│ │ │ ├── index.html
│ │ │ ├── main.server.ts
│ │ │ └── main.ts
│ │ ├── tsconfig.app.json
│ │ ├── tsconfig.editor.json
│ │ └── tsconfig.json
│ └── storybook/
│ ├── .eslintrc.json
│ ├── .storybook/
│ │ ├── helper.ts
│ │ ├── main.ts
│ │ ├── preview-body.html
│ │ ├── preview.ts
│ │ └── tsconfig.json
│ ├── postcss.config.json
│ ├── project.json
│ ├── src/
│ │ ├── accordion.component.stories.ts
│ │ ├── alert.stories.ts
│ │ ├── badge.stories.ts
│ │ ├── breadcrumb.stories.ts
│ │ ├── button.component.stories.ts
│ │ ├── card.component.stories.ts
│ │ ├── clipboard.component.stories.ts
│ │ ├── dropdown.stories.ts
│ │ ├── form/
│ │ │ └── form-field.component.stories.ts
│ │ ├── icon.component.stories.ts
│ │ ├── indicator.stories.ts
│ │ ├── modal.component.stories.ts
│ │ ├── navbar.component.stories.ts
│ │ ├── pagination.component.stories.ts
│ │ ├── sidebar.component.stories.ts
│ │ ├── tab.component.stories.ts
│ │ ├── table.component.stories.ts
│ │ └── tooltip.component.stories.ts
│ ├── styles.css
│ ├── tsconfig.editor.json
│ └── tsconfig.json
├── commitlint.config.cjs
├── libs/
│ ├── .gitkeep
│ ├── flowbite-angular/
│ │ ├── .eslintrc.json
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── accordion/
│ │ │ ├── ng-package.json
│ │ │ └── src/
│ │ │ ├── accordion/
│ │ │ │ ├── accordion-state.ts
│ │ │ │ ├── accordion.directive.ts
│ │ │ │ └── theme.ts
│ │ │ ├── accordion-content/
│ │ │ │ ├── accordion-content-state.ts
│ │ │ │ ├── accordion-content.directive.ts
│ │ │ │ └── theme.ts
│ │ │ ├── accordion-item/
│ │ │ │ ├── accordion-item-state.ts
│ │ │ │ ├── accordion-item.directive.ts
│ │ │ │ └── theme.ts
│ │ │ ├── accordion-title/
│ │ │ │ ├── accordion-title-state.ts
│ │ │ │ ├── accordion-title.directive.ts
│ │ │ │ └── theme.ts
│ │ │ ├── config/
│ │ │ │ ├── accordion-config.ts
│ │ │ │ ├── accordion-content-config.ts
│ │ │ │ ├── accordion-item-config.ts
│ │ │ │ └── accordion-title-config.ts
│ │ │ └── index.ts
│ │ ├── alert/
│ │ │ ├── ng-package.json
│ │ │ └── src/
│ │ │ ├── alert/
│ │ │ │ ├── alert-state.ts
│ │ │ │ ├── alert.directive.ts
│ │ │ │ └── theme.ts
│ │ │ ├── alert-button/
│ │ │ │ ├── alert-button-state.ts
│ │ │ │ ├── alert-button.directive.ts
│ │ │ │ └── theme.ts
│ │ │ ├── alert-content/
│ │ │ │ ├── alert-content-state.ts
│ │ │ │ ├── alert-content.directive.ts
│ │ │ │ └── theme.ts
│ │ │ ├── config/
│ │ │ │ ├── alert-button-config.ts
│ │ │ │ ├── alert-config.ts
│ │ │ │ └── alert-content-config.ts
│ │ │ └── index.ts
│ │ ├── badge/
│ │ │ ├── ng-package.json
│ │ │ └── src/
│ │ │ ├── badge/
│ │ │ │ ├── badge-state.ts
│ │ │ │ ├── badge.directive.ts
│ │ │ │ └── theme.ts
│ │ │ ├── badge-button/
│ │ │ │ ├── badge-button-state.ts
│ │ │ │ ├── badge-button.directive.ts
│ │ │ │ └── theme.ts
│ │ │ ├── badge-link/
│ │ │ │ ├── badge-link-state.ts
│ │ │ │ ├── badge-link.directive.ts
│ │ │ │ └── theme.ts
│ │ │ ├── config/
│ │ │ │ ├── badge-button-config.ts
│ │ │ │ ├── badge-config.ts
│ │ │ │ └── badge-link-config.ts
│ │ │ └── index.ts
│ │ ├── breadcrumb/
│ │ │ ├── ng-package.json
│ │ │ └── src/
│ │ │ ├── breadcrumb/
│ │ │ │ ├── breadcrumb-state.ts
│ │ │ │ ├── breadcrumb.directive.ts
│ │ │ │ └── theme.ts
│ │ │ ├── breadcrumb-content/
│ │ │ │ ├── breadcrumb-content-state.ts
│ │ │ │ ├── breadcrumb-content.directive.ts
│ │ │ │ └── theme.ts
│ │ │ ├── breadcrumb-item/
│ │ │ │ ├── breadcrumb-item-state.ts
│ │ │ │ ├── breadcrumb-item.directive.ts
│ │ │ │ └── theme.ts
│ │ │ ├── config/
│ │ │ │ ├── breadcrumb-config.ts
│ │ │ │ ├── breadcrumb-content-config.ts
│ │ │ │ └── breadcrumb-item-config.ts
│ │ │ └── index.ts
│ │ ├── button/
│ │ │ ├── ng-package.json
│ │ │ └── src/
│ │ │ ├── base-button/
│ │ │ │ ├── base-button-state.ts
│ │ │ │ ├── base-button.directive.ts
│ │ │ │ └── theme.ts
│ │ │ ├── button/
│ │ │ │ ├── button-state.ts
│ │ │ │ ├── button.directive.ts
│ │ │ │ └── theme.ts
│ │ │ ├── config/
│ │ │ │ ├── base-button-config.ts
│ │ │ │ └── button-config.ts
│ │ │ └── index.ts
│ │ ├── button-group/
│ │ │ ├── README.md
│ │ │ ├── ng-package.json
│ │ │ └── src/
│ │ │ ├── button-group/
│ │ │ │ ├── button-group-state.ts
│ │ │ │ ├── button-group.directive.ts
│ │ │ │ └── theme.ts
│ │ │ ├── config/
│ │ │ │ └── button-group-config.ts
│ │ │ └── index.ts
│ │ ├── card/
│ │ │ ├── README.md
│ │ │ ├── ng-package.json
│ │ │ └── src/
│ │ │ ├── card/
│ │ │ │ ├── card-state.ts
│ │ │ │ ├── card.directive.ts
│ │ │ │ └── theme.ts
│ │ │ ├── card-content/
│ │ │ │ ├── card-content-state.ts
│ │ │ │ ├── card-content.directive.ts
│ │ │ │ └── theme.ts
│ │ │ ├── card-header/
│ │ │ │ ├── card-header-state.ts
│ │ │ │ ├── card-header.directive.ts
│ │ │ │ └── theme.ts
│ │ │ ├── config/
│ │ │ │ ├── card-config.ts
│ │ │ │ ├── card-content-config.ts
│ │ │ │ └── card-header-config.ts
│ │ │ └── index.ts
│ │ ├── clipboard/
│ │ │ ├── README.md
│ │ │ ├── ng-package.json
│ │ │ └── src/
│ │ │ ├── clipboard/
│ │ │ │ ├── clipboard-state.ts
│ │ │ │ ├── clipboard.component.ts
│ │ │ │ └── theme.ts
│ │ │ ├── config/
│ │ │ │ └── clipboard-config.ts
│ │ │ └── index.ts
│ │ ├── core/
│ │ │ └── src/
│ │ │ ├── core/
│ │ │ │ ├── flowbite.boolean.ts
│ │ │ │ ├── flowbite.colors.ts
│ │ │ │ ├── flowbite.deep-partial.ts
│ │ │ │ ├── flowbite.positions.ts
│ │ │ │ ├── flowbite.sizes.ts
│ │ │ │ └── flowbite.themes.ts
│ │ │ ├── index.ts
│ │ │ └── utils/
│ │ │ ├── clone-deep.ts
│ │ │ ├── color-to-theme.ts
│ │ │ ├── create-theme.ts
│ │ │ ├── is-object.ts
│ │ │ └── merge-theme.ts
│ │ ├── dropdown/
│ │ │ ├── ng-package.json
│ │ │ └── src/
│ │ │ ├── config/
│ │ │ │ ├── dropdown-config.ts
│ │ │ │ ├── dropdown-content-config.ts
│ │ │ │ └── dropdown-item-config.ts
│ │ │ ├── dropdown/
│ │ │ │ ├── dropdown-state.ts
│ │ │ │ ├── dropdown.directive.ts
│ │ │ │ └── theme.ts
│ │ │ ├── dropdown-content/
│ │ │ │ ├── dropdown-content-state.ts
│ │ │ │ ├── dropdown-content.directive.ts
│ │ │ │ └── theme.ts
│ │ │ ├── dropdown-item/
│ │ │ │ ├── dropdown-item-state.ts
│ │ │ │ ├── dropdown-item.directive.ts
│ │ │ │ └── theme.ts
│ │ │ └── index.ts
│ │ ├── form/
│ │ │ ├── README.md
│ │ │ ├── ng-package.json
│ │ │ └── src/
│ │ │ ├── config/
│ │ │ │ ├── form-control-config.ts
│ │ │ │ ├── form-field-config.ts
│ │ │ │ ├── helper-config.ts
│ │ │ │ └── label-config.ts
│ │ │ ├── form-control/
│ │ │ │ ├── form-control-state.ts
│ │ │ │ ├── form-control.directive.ts
│ │ │ │ └── theme.ts
│ │ │ ├── form-field/
│ │ │ │ ├── form-field-state.ts
│ │ │ │ ├── form-field.directive.ts
│ │ │ │ └── theme.ts
│ │ │ ├── helper/
│ │ │ │ ├── helper-state.ts
│ │ │ │ ├── helper.directive.ts
│ │ │ │ └── theme.ts
│ │ │ ├── index.ts
│ │ │ └── label/
│ │ │ ├── label-state.ts
│ │ │ ├── label.directive.ts
│ │ │ └── theme.ts
│ │ ├── icon/
│ │ │ ├── README.md
│ │ │ ├── brand/
│ │ │ │ ├── README.md
│ │ │ │ ├── ng-package.json
│ │ │ │ └── src/
│ │ │ │ └── index.ts
│ │ │ ├── ng-package.json
│ │ │ ├── outline/
│ │ │ │ ├── README.md
│ │ │ │ ├── arrows/
│ │ │ │ │ ├── ng-package.json
│ │ │ │ │ └── src/
│ │ │ │ │ └── index.ts
│ │ │ │ ├── e-commerce/
│ │ │ │ │ ├── ng-package.json
│ │ │ │ │ └── src/
│ │ │ │ │ └── index.ts
│ │ │ │ ├── emoji/
│ │ │ │ │ ├── ng-package.json
│ │ │ │ │ └── src/
│ │ │ │ │ └── index.ts
│ │ │ │ ├── files-folders/
│ │ │ │ │ ├── ng-package.json
│ │ │ │ │ └── src/
│ │ │ │ │ └── index.ts
│ │ │ │ ├── general/
│ │ │ │ │ ├── ng-package.json
│ │ │ │ │ └── src/
│ │ │ │ │ └── index.ts
│ │ │ │ ├── media/
│ │ │ │ │ ├── ng-package.json
│ │ │ │ │ └── src/
│ │ │ │ │ └── index.ts
│ │ │ │ ├── ng-package.json
│ │ │ │ ├── src/
│ │ │ │ │ └── index.ts
│ │ │ │ ├── text/
│ │ │ │ │ ├── ng-package.json
│ │ │ │ │ └── src/
│ │ │ │ │ └── index.ts
│ │ │ │ ├── user/
│ │ │ │ │ ├── ng-package.json
│ │ │ │ │ └── src/
│ │ │ │ │ └── index.ts
│ │ │ │ └── weather/
│ │ │ │ ├── ng-package.json
│ │ │ │ └── src/
│ │ │ │ └── index.ts
│ │ │ ├── solid/
│ │ │ │ ├── README.md
│ │ │ │ ├── arrows/
│ │ │ │ │ ├── ng-package.json
│ │ │ │ │ └── src/
│ │ │ │ │ └── index.ts
│ │ │ │ ├── brands/
│ │ │ │ │ ├── ng-package.json
│ │ │ │ │ └── src/
│ │ │ │ │ └── index.ts
│ │ │ │ ├── e-commerce/
│ │ │ │ │ ├── ng-package.json
│ │ │ │ │ └── src/
│ │ │ │ │ └── index.ts
│ │ │ │ ├── emoji/
│ │ │ │ │ ├── ng-package.json
│ │ │ │ │ └── src/
│ │ │ │ │ └── index.ts
│ │ │ │ ├── files-folder/
│ │ │ │ │ ├── ng-package.json
│ │ │ │ │ └── src/
│ │ │ │ │ └── index.ts
│ │ │ │ ├── general/
│ │ │ │ │ ├── ng-package.json
│ │ │ │ │ └── src/
│ │ │ │ │ └── index.ts
│ │ │ │ ├── media/
│ │ │ │ │ ├── ng-package.json
│ │ │ │ │ └── src/
│ │ │ │ │ └── index.ts
│ │ │ │ ├── ng-package.json
│ │ │ │ ├── src/
│ │ │ │ │ └── index.ts
│ │ │ │ ├── text/
│ │ │ │ │ ├── ng-package.json
│ │ │ │ │ └── src/
│ │ │ │ │ └── index.ts
│ │ │ │ ├── user/
│ │ │ │ │ ├── ng-package.json
│ │ │ │ │ └── src/
│ │ │ │ │ └── index.ts
│ │ │ │ └── weather/
│ │ │ │ ├── ng-package.json
│ │ │ │ └── src/
│ │ │ │ └── index.ts
│ │ │ └── src/
│ │ │ ├── config/
│ │ │ │ └── icon-config.ts
│ │ │ ├── icon/
│ │ │ │ ├── icon-state.ts
│ │ │ │ ├── icon.component.ts
│ │ │ │ └── theme.ts
│ │ │ └── index.ts
│ │ ├── indicator/
│ │ │ ├── README.md
│ │ │ ├── ng-package.json
│ │ │ └── src/
│ │ │ ├── config/
│ │ │ │ └── indicator-config.ts
│ │ │ ├── index.ts
│ │ │ └── indicator/
│ │ │ ├── indicator-state.ts
│ │ │ ├── indicator.directive.ts
│ │ │ └── theme.ts
│ │ ├── modal/
│ │ │ ├── README.md
│ │ │ ├── ng-package.json
│ │ │ └── src/
│ │ │ ├── config/
│ │ │ │ ├── modal-config.ts
│ │ │ │ ├── modal-content-config.ts
│ │ │ │ ├── modal-footer-config.ts
│ │ │ │ ├── modal-header-config.ts
│ │ │ │ └── modal-overlay-config.ts
│ │ │ ├── index.ts
│ │ │ ├── modal/
│ │ │ │ ├── modal-state.ts
│ │ │ │ ├── modal.directive.ts
│ │ │ │ └── theme.ts
│ │ │ ├── modal-content/
│ │ │ │ ├── modal-content-state.ts
│ │ │ │ ├── modal-content.directive.ts
│ │ │ │ └── theme.ts
│ │ │ ├── modal-footer/
│ │ │ │ ├── modal-footer-state.ts
│ │ │ │ ├── modal-footer.directive.ts
│ │ │ │ └── theme.ts
│ │ │ ├── modal-header/
│ │ │ │ ├── modal-header-state.ts
│ │ │ │ ├── modal-header.directive.ts
│ │ │ │ └── theme.ts
│ │ │ └── modal-overlay/
│ │ │ ├── modal-overlay-state.ts
│ │ │ ├── modal-overlay.directive.ts
│ │ │ └── theme.ts
│ │ ├── navbar/
│ │ │ ├── README.md
│ │ │ ├── ng-package.json
│ │ │ └── src/
│ │ │ ├── config/
│ │ │ │ ├── navbar-brand-config.ts
│ │ │ │ ├── navbar-config.ts
│ │ │ │ ├── navbar-content-config.ts
│ │ │ │ ├── navbar-icon-item-config.ts
│ │ │ │ ├── navbar-item-config.ts
│ │ │ │ └── navbar-toggle-config.ts
│ │ │ ├── index.ts
│ │ │ ├── navbar/
│ │ │ │ ├── navbar-state.ts
│ │ │ │ ├── navbar.component.ts
│ │ │ │ └── theme.ts
│ │ │ ├── navbar-brand/
│ │ │ │ ├── navbar-brand-state.ts
│ │ │ │ ├── navbar-brand.directive.ts
│ │ │ │ └── theme.ts
│ │ │ ├── navbar-content/
│ │ │ │ ├── navbar-content-state.ts
│ │ │ │ ├── navbar-content.component.ts
│ │ │ │ └── theme.ts
│ │ │ ├── navbar-icon-item/
│ │ │ │ ├── navbar-icon-item-state.ts
│ │ │ │ ├── navbar-icon-item.directive.ts
│ │ │ │ └── theme.ts
│ │ │ ├── navbar-item/
│ │ │ │ ├── navbar-item-state.ts
│ │ │ │ ├── navbar-item.directive.ts
│ │ │ │ └── theme.ts
│ │ │ └── navbar-toggle/
│ │ │ ├── navbar-toggle-state.ts
│ │ │ ├── navbar-toggle.directive.ts
│ │ │ └── theme.ts
│ │ ├── ng-package.json
│ │ ├── package.json
│ │ ├── pagination/
│ │ │ ├── README.md
│ │ │ ├── ng-package.json
│ │ │ └── src/
│ │ │ ├── config/
│ │ │ │ ├── pagination-button-config.ts
│ │ │ │ ├── pagination-config.ts
│ │ │ │ ├── pagination-first-config.ts
│ │ │ │ ├── pagination-last-config.ts
│ │ │ │ ├── pagination-next-config.ts
│ │ │ │ └── pagination-previous-config.ts
│ │ │ ├── index.ts
│ │ │ ├── pagination/
│ │ │ │ ├── pagination-state.ts
│ │ │ │ ├── pagination.component.ts
│ │ │ │ └── theme.ts
│ │ │ ├── pagination-button/
│ │ │ │ ├── pagination-button-state.ts
│ │ │ │ ├── pagination-button.component.ts
│ │ │ │ └── theme.ts
│ │ │ ├── pagination-first/
│ │ │ │ ├── pagination-first-state.ts
│ │ │ │ ├── pagination-first.component.ts
│ │ │ │ └── theme.ts
│ │ │ ├── pagination-last/
│ │ │ │ ├── pagination-last-state.ts
│ │ │ │ ├── pagination-last.component.ts
│ │ │ │ └── theme.ts
│ │ │ ├── pagination-next/
│ │ │ │ ├── pagination-next-state.ts
│ │ │ │ ├── pagination-next.component.ts
│ │ │ │ └── theme.ts
│ │ │ └── pagination-previous/
│ │ │ ├── pagination-previous-state.ts
│ │ │ ├── pagination-previous.component.ts
│ │ │ └── theme.ts
│ │ ├── project.json
│ │ ├── sidebar/
│ │ │ ├── README.md
│ │ │ ├── ng-package.json
│ │ │ └── src/
│ │ │ ├── config/
│ │ │ │ ├── sidebar-config.ts
│ │ │ │ ├── sidebar-content-config.ts
│ │ │ │ ├── sidebar-item-config.ts
│ │ │ │ └── sidebar-toggle-config.ts
│ │ │ ├── index.ts
│ │ │ ├── sidebar/
│ │ │ │ ├── sidebar-state.ts
│ │ │ │ ├── sidebar.directive.ts
│ │ │ │ └── theme.ts
│ │ │ ├── sidebar-content/
│ │ │ │ ├── sidebar-content-state.ts
│ │ │ │ ├── sidebar-content.component.ts
│ │ │ │ └── theme.ts
│ │ │ ├── sidebar-item/
│ │ │ │ ├── sidebar-item-state.ts
│ │ │ │ ├── sidebar-item.directive.ts
│ │ │ │ └── theme.ts
│ │ │ └── sidebar-toggle/
│ │ │ ├── sidebar-toggle-state.ts
│ │ │ ├── sidebar-toggle.directive.ts
│ │ │ └── theme.ts
│ │ ├── styles/
│ │ │ ├── flowbite-angular.css
│ │ │ └── part/
│ │ │ └── animation.css
│ │ ├── tab/
│ │ │ ├── README.md
│ │ │ ├── ng-package.json
│ │ │ └── src/
│ │ │ ├── config/
│ │ │ │ ├── tab-button-config.ts
│ │ │ │ ├── tab-config.ts
│ │ │ │ ├── tab-content-config.ts
│ │ │ │ └── tab-list-config.ts
│ │ │ ├── index.ts
│ │ │ ├── tab/
│ │ │ │ ├── tab-state.ts
│ │ │ │ ├── tab.directive.ts
│ │ │ │ └── theme.ts
│ │ │ ├── tab-button/
│ │ │ │ ├── tab-button-state.ts
│ │ │ │ ├── tab-button.directive.ts
│ │ │ │ └── theme.ts
│ │ │ ├── tab-content/
│ │ │ │ ├── tab-content-state.ts
│ │ │ │ ├── tab-content.directive.ts
│ │ │ │ └── theme.ts
│ │ │ └── tab-list/
│ │ │ ├── tab-list-state.ts
│ │ │ ├── tab-list.directive.ts
│ │ │ └── theme.ts
│ │ ├── table/
│ │ │ ├── README.md
│ │ │ ├── ng-package.json
│ │ │ └── src/
│ │ │ ├── config/
│ │ │ │ ├── table-body-config.ts
│ │ │ │ ├── table-config.ts
│ │ │ │ ├── table-foot-config.ts
│ │ │ │ └── table-head-config.ts
│ │ │ ├── index.ts
│ │ │ ├── table/
│ │ │ │ ├── table-state.ts
│ │ │ │ ├── table.component.ts
│ │ │ │ └── theme.ts
│ │ │ ├── table-body/
│ │ │ │ ├── table-body-state.ts
│ │ │ │ ├── table-body.directive.ts
│ │ │ │ └── theme.ts
│ │ │ ├── table-foot/
│ │ │ │ ├── table-foot-state.ts
│ │ │ │ ├── table-foot.directive.ts
│ │ │ │ └── theme.ts
│ │ │ └── table-head/
│ │ │ ├── table-head-state.ts
│ │ │ ├── table-head.directive.ts
│ │ │ └── theme.ts
│ │ ├── theme-toggle/
│ │ │ ├── README.md
│ │ │ ├── ng-package.json
│ │ │ └── src/
│ │ │ ├── config/
│ │ │ │ ├── theme-config.ts
│ │ │ │ └── theme-toggle-config.ts
│ │ │ ├── index.ts
│ │ │ ├── theme/
│ │ │ │ ├── theme-state.ts
│ │ │ │ └── theme.directive.ts
│ │ │ └── theme-toggle/
│ │ │ ├── theme-toggle-state.ts
│ │ │ ├── theme-toggle.component.ts
│ │ │ └── theme.ts
│ │ ├── tooltip/
│ │ │ ├── README.md
│ │ │ ├── ng-package.json
│ │ │ └── src/
│ │ │ ├── config/
│ │ │ │ └── tooltip-config.ts
│ │ │ ├── index.ts
│ │ │ └── tooltip/
│ │ │ ├── theme.ts
│ │ │ ├── tooltip-state.ts
│ │ │ └── tooltip.directive.ts
│ │ ├── tsconfig.json
│ │ ├── tsconfig.lib.json
│ │ └── tsconfig.lib.prod.json
│ └── tools/
│ ├── .eslintrc.json
│ ├── README.md
│ ├── generators.json
│ ├── package.json
│ ├── project.json
│ ├── src/
│ │ ├── generators/
│ │ │ ├── component/
│ │ │ │ ├── files/
│ │ │ │ │ ├── component/
│ │ │ │ │ │ └── __directoryName__/
│ │ │ │ │ │ └── src/
│ │ │ │ │ │ ├── __fileName__/
│ │ │ │ │ │ │ ├── __fileName__-state.ts.template
│ │ │ │ │ │ │ ├── __fileName__.component.ts.template
│ │ │ │ │ │ │ └── theme.ts.template
│ │ │ │ │ │ └── config/
│ │ │ │ │ │ └── __fileName__-config.ts.template
│ │ │ │ │ └── directive/
│ │ │ │ │ └── __directoryName__/
│ │ │ │ │ └── src/
│ │ │ │ │ ├── __fileName__/
│ │ │ │ │ │ ├── __fileName__-state.ts.template
│ │ │ │ │ │ ├── __fileName__.directive.ts.template
│ │ │ │ │ │ └── theme.ts.template
│ │ │ │ │ └── config/
│ │ │ │ │ └── __fileName__-config.ts.template
│ │ │ │ ├── generator.ts
│ │ │ │ ├── schema.d.ts
│ │ │ │ └── schema.json
│ │ │ ├── documentation/
│ │ │ │ ├── files/
│ │ │ │ │ └── __fileName__/
│ │ │ │ │ ├── _default.component.html.template
│ │ │ │ │ ├── _default.component.ts.template
│ │ │ │ │ ├── index.md.template
│ │ │ │ │ └── ng-doc.page.ts.template
│ │ │ │ ├── generator.ts
│ │ │ │ ├── schema.d.ts
│ │ │ │ └── schema.json
│ │ │ └── storybook/
│ │ │ ├── files/
│ │ │ │ └── __fileName__.component.stories.ts.template
│ │ │ ├── generator.ts
│ │ │ ├── schema.d.ts
│ │ │ └── schema.json
│ │ ├── index.ts
│ │ └── utils/
│ │ └── index.ts
│ ├── tsconfig.json
│ └── tsconfig.lib.json
├── nx.json
├── package.json
├── pnpm-workspace.yaml
└── tsconfig.base.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .coderabbit.yaml
================================================
language: en-US
tone_instructions: ''
early_access: false
enable_free_tier: true
reviews:
profile: chill
request_changes_workflow: false
high_level_summary: true
high_level_summary_placeholder: '@coderabbitai summary'
auto_title_placeholder: '@coderabbitai'
poem: true
review_status: true
collapse_walkthrough: false
path_filters: []
path_instructions: []
abort_on_close: true
auto_review:
enabled: true
auto_incremental_review: true
ignore_title_keywords: []
labels: []
drafts: true
base_branches: []
tools:
shellcheck:
enabled: true
ruff:
enabled: true
markdownlint:
enabled: true
github-checks:
enabled: true
timeout_ms: 90000
languagetool:
enabled: true
disabled_rules:
- EN_UNPAIRED_BRACKETS
- EN_UNPAIRED_QUOTES
disabled_categories:
- TYPOS
- TYPOGRAPHY
- CASING
enabled_only: false
level: default
biome:
enabled: true
hadolint:
enabled: false
swiftlint:
enabled: false
phpstan:
enabled: false
level: default
golangci-lint:
enabled: false
yamllint:
enabled: true
gitleaks:
enabled: true
checkov:
enabled: true
chat:
auto_reply: true
knowledge_base:
learnings:
scope: auto
issues:
scope: auto
jira:
project_keys: []
linear:
team_keys: []
================================================
FILE: .eslintignore
================================================
node_modules
dist
================================================
FILE: .eslintrc.json
================================================
{
"root": true,
"ignorePatterns": ["!**/*"],
"plugins": ["@nx", "@typescript-eslint", "prettier"],
"extends": ["plugin:@nx/angular", "plugin:@typescript-eslint/recommended", "prettier"],
"overrides": [
{
"files": "*.json",
"parser": "jsonc-eslint-parser",
"rules": {}
},
{
"files": ["*.ts"],
"rules": {
"prettier/prettier": [
"error",
{
"endOfLine": "auto"
}
],
"no-extra-semi": "off",
"comma-dangle": "off",
"no-empty-function": "off",
"@typescript-eslint/no-extra-semi": "error",
"@typescript-eslint/no-empty-function": "warn",
"@typescript-eslint/no-explicit-any": "warn",
"@typescript-eslint/consistent-type-imports": "error",
"@nx/enforce-module-boundaries": "error"
}
}
]
}
================================================
FILE: .github/CODE_OF_CONDUCT
================================================
# Contributor Covenant Code of Conduct
## Our Pledge
In the interest of fostering an open and welcoming environment, we as
contributors and maintainers pledge to making participation in our project and
our community a harassment-free experience for everyone, regardless of age, body
size, disability, ethnicity, gender identity and expression, level of experience,
education, socio-economic status, nationality, personal appearance, race,
religion, or sexual identity and orientation.
## Our Standards
Examples of behavior that contributes to creating a positive environment
include:
* Using welcoming and inclusive language
* Being respectful of differing viewpoints and experiences
* Gracefully accepting constructive criticism
* Focusing on what is best for the community
* Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
* The use of sexualized language or imagery and unwelcome sexual attention or
advances
* Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or electronic
address, without explicit permission
* Other conduct which could reasonably be considered inappropriate in a
professional setting
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable
behavior and are expected to take appropriate and fair corrective action in
response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or
reject comments, commits, code, wiki edits, issues, and other contributions
that are not aligned to this Code of Conduct, or to ban temporarily or
permanently any contributor for other behaviors that they deem inappropriate,
threatening, offensive, or harmful.
## Scope
This Code of Conduct applies both within project spaces and in public spaces
when an individual is representing the project or its community. Examples of
representing a project or community include using an official project e-mail
address, posting via an official social media account, or acting as an appointed
representative at an online or offline event. Representation of a project may be
further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported by contacting the project team at {{ email }}. All
complaints will be reviewed and investigated and will result in a response that
is deemed necessary and appropriate to the circumstances. The project team is
obligated to maintain confidentiality with regard to the reporter of an incident.
Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good
faith may face temporary or permanent repercussions as determined by other
members of the project's leadership.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
[homepage]: https://www.contributor-covenant.org
================================================
FILE: .github/CONTRIBUTING
================================================
# Contributing guide
## What do I need to know to help?
If you are looking to help to with a code contribution our project uses Typescript, Angular and TailwindCSS. If you don't feel ready to make a code contribution yet, no problem!
If you are interested in making a code contribution and would like to learn more about the technologies that we use, check out the list below.
- [Angular Tutorial for Beginners: Learn Angular & TypeScript](https://www.youtube.com/watch?v=k5E2AVpwsko)
- [TypeScript Course](https://www.youtube.com/watch?v=BwuLxPH8IDs)
- [TailwindCSS](https://tailwindcss.com/)
## How do I make a contribution?
Never made an open source contribution before? Wondering how contributions work in the in our project? Here's a quick rundown!
1. [Find an issue](https://github.com/themesberg/flowbite-angular/issues) that you are interested in addressing or a feature that you would like to add.
2. Fork the repository associated with the issue to your local GitHub organization. This means that you will have a copy of the repository under `your-GitHub-username/repository-name`.
3. Clone the repository to your local machine using `git clone https://github.com/github-username/repository-name.git`.
4. Create a new branch for your fix using `git checkout -b branch-name-here`.
5. Make the appropriate changes for the issue you are trying to address or the feature that you want to add.
6. Use `git add insert-paths-of-changed-files-here` to add the file contents of the changed files to the "snapshot" git uses to manage the state of the project, also known as the index.
7. Use `git commit -m "Insert a short message of the changes made here"` to store the contents of the index with a descriptive message. Use [conventional commits](https://www.conventionalcommits.org/) to create a nice message.
8. Push the changes to the remote repository using `git push origin branch-name-here`.
9. Submit a pull request to the upstream repository.
10. Title the pull request with a short description of the changes made and the issue or bug number associated with your change. For example, you can title an issue like so `"Added more log outputting to resolve #4352"`.
11. In the description of the pull request, explain the changes that you made, any issues you think exist with the pull request you made, and any questions you have for the maintainer. It's OK if your pull request is not perfect (no pull request is), the reviewer will be able to help you fix any problems and improve it!
12. Wait for the pull request to be reviewed by a maintainer.
13. Make changes to the pull request if the reviewing maintainer recommends them.
14. Celebrate your success after your pull request is merged! 🎉 🎉
## Where can I go for help?
If you need help, you can ask questions please, [join us at our Discord Community](https://discord.gg/S6J9pUmj2t).
## What does the Code of Conduct mean for me?
Our Code of Conduct means that you are responsible for treating everyone on the project with respect and courtesy regardless of their identity. If you are the victim of any inappropriate behavior or comments as described in our Code of Conduct, we are here for you and will do the best to ensure that the abuser is reprimanded appropriately, per our code.
## Code of conduct
For more information [check this file](CODE_OF_CONDUCT).
================================================
FILE: .github/ISSUE_TEMPLATE/bug_report.yaml
================================================
name: '🐞 Bug Report'
description: Report a bug
title: '[Bug] {SCOPE} - '
labels: 'Type: bug'
assignees: MGREMY
body:
- type: dropdown
id: is-regression
attributes:
label: Is this a regression?
options:
- 'Yes'
- 'No'
- "I don't know"
validations:
required: true
- type: textarea
id: description
attributes:
label: Description
placeholder: |
A clear and concise description of what the bug is.
What is the current behavior?
What is the expected behavior?
Please provide a link to a minimal reproduction of the problem with instructions.
validations:
required: true
- type: textarea
id: exception-or-error
attributes:
label: Please provide the exception or error you saw
render: true
- type: dropdown
id: os
attributes:
label: OS
options:
- Unix (Linux, macOS, etc.)
- Windows
- iOS, Android, etc.
- Something else
validations:
required: true
- type: dropdown
id: browser
attributes:
label: Browser
options:
- Chrome
- Firefox
- Safari
- Edge
- IE
- Other
- type: input
id: node-version
attributes:
label: Node version
validations:
required: true
- type: input
id: flowbite-angular-version
attributes:
label: Flowbite-angular version
validations:
required: true
- type: textarea
id: other
attributes:
label: Anything else?
placeholder: |
Please provide any additional information that may be helpful in understanding the issue.
If you have a screenshot, attach it here.
================================================
FILE: .github/ISSUE_TEMPLATE/feature_request.yaml
================================================
name: '🚀 Feature Request'
description: Suggest a feature
title: '[Feature] {SCOPE} - '
labels: 'Type: enhancement'
assignees: MGREMY
body:
- type: textarea
id: description
attributes:
label: Description
placeholder: |
A clear and concise description of what the problem is.
Ex. I'm always frustrated when [...]
validations:
required: true
- type: textarea
id: proposed-solution
attributes:
label: Proposed solution
placeholder: |
A clear and concise description of what you want to happen.
What is the expected behavior?
What is the current behavior?
What is the motivation / use case for changing the behavior?
validations:
required: true
- type: textarea
id: alternatives-considered
attributes:
label: Alternatives considered
placeholder: |
A clear and concise description of any alternative solutions or features you've considered.
================================================
FILE: .github/PULL_REQUEST_TEMPLATE/default_request_template.md
================================================
## PR Checklist
Please check if your PR fulfills the following requirements:
<!--- [ ] Tests for the changes have been added (for bug fixes/features)-->
- [ ] Docs have been added/updated (for bug fixes/features)
## PR Type
What kind of change does this PR introduce?
<!-- Please check the one that applies to this PR using "x". -->
- [ ] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no API changes)
- [ ] Build related changes
- [ ] CI-related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:
## Issue Number
<!-- Bugs and features must be linked to an issue. -->
Issue Number: N/A
## Does this PR introduce a breaking change?
<!-- If this PR contains a breaking change, please describe the impact and migration path for existing applications below. -->
- [ ] Yes
- [ ] No
## Other information
@coderabbitai summary
================================================
FILE: .github/PULL_REQUEST_TEMPLATE/release_request_template.md
================================================
## PR Type
What kind of change does this PR introduce?
<!-- Please check the one that applies to this PR using "x". -->
- [x] Release
<!--
Please set this as a title and change the version number
If you don't know the version number, run on the main branch the release GitHub workflow with dryRun enabled
chore: prepare x.y.z
-->
================================================
FILE: .github/pull_request_template.md
================================================
Please go to the `Preview` tab and select the appropriate sub-template:
* [Default](?expand=1&template=default_request_template.md)
* [Release](?expand=1&template=release_request_template.md)
================================================
FILE: .github/workflows/ci.yml
================================================
name: CI Checks
on:
workflow_dispatch:
pull_request:
concurrency: ${{ github.ref }}
jobs:
lint:
strategy:
matrix:
node-version: [20]
name: Lint the code 🕵
runs-on: ubuntu-latest
steps:
- name: Check out the code 🗄
uses: actions/checkout@v4
with:
fetch-depth: 0
- name: Install pnpm
uses: pnpm/action-setup@v4
with:
version: 10
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}
cache: 'pnpm'
- name: Install dependencies
shell: bash
run: pnpm install --frozen-lockfile --prefer-offline
- name: Lint the code 🕵
run: pnpm all:lint
build:
strategy:
matrix:
node-version: [20]
name: Build code 🛠
runs-on: ubuntu-latest
steps:
- name: Check out the code 🗄
uses: actions/checkout@v4
with:
fetch-depth: 0
- name: Install pnpm
uses: pnpm/action-setup@v4
with:
version: 10
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}
cache: 'pnpm'
- name: Install dependencies
shell: bash
run: pnpm install --frozen-lockfile --prefer-offline
- name: Build code 🛠
run: pnpm all:build
================================================
FILE: .github/workflows/release.yml
================================================
name: Release
on:
workflow_dispatch:
inputs:
version:
description: 'Specify the version'
required: false
type: string
dryRun:
description: 'Start the release with dryRun parameter'
required: true
type: boolean
default: true
jobs:
release:
strategy:
matrix:
node-version: [20]
if: (github.event_name == 'workflow_dispatch' && github.ref == 'refs/heads/release') || (github.event_name == 'workflow_dispatch' && github.event.inputs.dryRun == 'true')
name: Release new version 🛠
runs-on: ubuntu-latest
permissions:
contents: write
actions: write
issues: write
pull-requests: write
id-token: write
steps:
- name: Check out the code 🗄
uses: actions/checkout@v4
with:
fetch-depth: 0
persist-credentials: false
- name: Install pnpm
uses: pnpm/action-setup@v4
with:
version: 10
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}
cache: 'pnpm'
- name: Install dependencies
shell: bash
run: pnpm install --frozen-lockfile --prefer-offline
- name: Create new version 🛠
run: |
git config user.name "github-actions[bot]"
git config user.email "github-actions[bot]@users.noreply.github.com"
git remote set-url origin https://x-access-token:${{ secrets.GITHUB_TOKEN }}@github.com/${{ github.repository }}
pnpm exec nx release ${{ github.event.inputs.version || '' }} --skip-publish --verbose --dryRun=${{ github.event.inputs.dryRun }}
env:
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- name: Sync main with release 📤
if: ${{ github.event.inputs.dryRun == 'false' }}
run: |
git config user.name "github-actions[bot]"
git config user.email "github-actions[bot]@users.noreply.github.com"
git fetch origin
git switch main
git pull origin main
git merge origin/release --ff-only -m "chore: merge release into main" --no-verify
git push origin main
- name: Build code 🛠
run: pnpm lib:build
- name: Publish new version 🛠
run: |
echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > ~/.npmrc
pnpm exec nx release publish --verbose --dryRun=${{ github.event.inputs.dryRun }}
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
NPM_CONFIG_PROVENANCE: true
================================================
FILE: .gitignore
================================================
# See http://help.github.com/ignore-files/ for more about ignoring files.
# compiled output
/dist
/tmp
/out-tsc
# dependencies
node_modules
#package-lock.json
# IDEs and editors
/.idea
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace
# IDE - VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
# misc
/.sass-cache
/connect.lock
/coverage
/libpeerconnection.log
npm-debug.log
testem.log
/typings
# System Files
.DS_Store
Thumbs.db
.angular
.vercel
.nx
.cursor/rules/nx-rules.mdc
.github/instructions/nx.instructions.md
================================================
FILE: .husky/commit-msg
================================================
npx --no -- commitlint --edit
================================================
FILE: .husky/pre-commit
================================================
pnpm dlx lint-staged --concurrent false --relative
================================================
FILE: .lintstagedrc
================================================
{
"*.ts": ["nx affected:lint --fix --files"],
"*": ["npx nx format:write --files"]
}
================================================
FILE: .prettierignore
================================================
# Add files here to ignore them from prettier formatting
/dist
/node_modules
/coverage
.angular
.github
/.nx/cache
/.nx/workspace-data
pnpm-lock.yaml
================================================
FILE: .prettierrc
================================================
{
"endOfLine": "crlf",
"singleQuote": true,
"printWidth": 100,
"trailingComma": "es5",
"bracketSameLine": true,
"bracketSpacing": true,
"proseWrap": "always",
"singleAttributePerLine": true,
"plugins": [
"prettier-plugin-packagejson",
"@ianvs/prettier-plugin-sort-imports",
"prettier-plugin-tailwindcss"
],
"importOrder": [
"^~/(.*)$",
"^[.]",
"",
"(flowbite-angular|shiki)",
"",
"<THIRD_PARTY_MODULES>",
"",
"<BUILTIN_MODULES>"
],
"importOrderParserPlugins": ["typescript", "decorators-legacy"],
"tailwindFunctions": ["twMerge", "createTheme"]
}
================================================
FILE: .stylelintrc.json
================================================
{
"extends": "stylelint-config-standard",
"rules": {
"no-empty-source": null,
"at-rule-no-unknown": null
}
}
================================================
FILE: .vscode/extensions.json
================================================
{
"recommendations": [
"angular.ng-template",
"nrwl.angular-console",
"esbenp.prettier-vscode",
"dbaeumer.vscode-eslint"
]
}
================================================
FILE: .vscode/settings.json
================================================
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"files.eol": "\r\n",
"editor.formatOnSave": true,
"tailwindCSS.experimental.configFile": "apps/docs/public/css/styles.css",
"tailwindCSS.classAttributes": ["class", "className", "ngClass", "customStyle"],
"tailwindCSS.classFunctions": ["twMerge", "createTheme"],
"typescript.tsdk": "node_modules/typescript/lib",
"[markdown]": {
"editor.unicodeHighlight.ambiguousCharacters": false,
"editor.unicodeHighlight.invisibleCharacters": false,
"diffEditor.ignoreTrimWhitespace": false,
"editor.wordWrap": "on",
"editor.quickSuggestions": {
"comments": "off",
"strings": "off",
"other": "off"
}
},
"eslint.validate": ["json"]
}
================================================
FILE: LICENSE
================================================
libs/flowbite-angular/LICENSE
================================================
FILE: README.md
================================================
libs/flowbite-angular/README.md
================================================
FILE: apps/.gitkeep
================================================
================================================
FILE: apps/docs/.eslintrc.json
================================================
{
"extends": ["../../.eslintrc.json"],
"ignorePatterns": ["!**/*"],
"overrides": [
{
"files": ["*.ts"],
"extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
"rules": {
"@angular-eslint/directive-selector": [
"error",
{
"type": "attribute",
"prefix": "flowbite",
"style": "camelCase"
}
],
"@angular-eslint/component-selector": [
"error",
{
"type": "element",
"prefix": "flowbite",
"style": "kebab-case"
}
]
}
},
{
"files": ["*.html"],
"extends": ["plugin:@nx/angular-template"],
"rules": {}
}
]
}
================================================
FILE: apps/docs/docs/components/accordion/_always-open.component.html
================================================
<div
flowbiteAccordion
type="multiple">
<div
flowbiteAccordionItem
value="accordion-item-1">
<h5 flowbiteAccordionTitle>What is Flowbite?</h5>
<div flowbiteAccordionContent>
<div class="p-5">
<p class="mb-2 text-gray-500 dark:text-gray-400">
Flowbite is an open-source library of interactive components built on top of Tailwind CSS
including buttons, dropdowns, modals, navbars, and more.
</p>
<p class="text-gray-500 dark:text-gray-400">
Check out this guide to learn how to
<a
href="/docs/getting-started/introduction/"
class="text-blue-600 hover:underline dark:text-blue-500">
get started
</a>
and start developing websites even faster with components on top of Tailwind CSS.
</p>
</div>
</div>
</div>
<div
flowbiteAccordionItem
value="accordion-item-2">
<h5 flowbiteAccordionTitle>Is there a Figma file available?</h5>
<div flowbiteAccordionContent>
<div class="p-5">
<p class="mb-2 text-gray-500 dark:text-gray-400">
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.
</p>
<p class="text-gray-500 dark:text-gray-400">
Check out the
<a
href="https://flowbite.com/figma/"
class="text-blue-600 hover:underline dark:text-blue-500">
Figma design system
</a>
based on the utility classes from Tailwind CSS and components from Flowbite.
</p>
</div>
</div>
</div>
<div
flowbiteAccordionItem
value="accordion-item-3">
<h5 flowbiteAccordionTitle>What are the differences between Flowbite and Tailwind UI?</h5>
<div flowbiteAccordionContent>
<div class="p-5">
<p class="mb-2 text-gray-500 dark:text-gray-400">
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.
</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">
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.
</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">Learn more about these technologies:</p>
<ul class="list-disc ps-5 text-gray-500 dark:text-gray-400">
<li>
<a
href="https://flowbite.com/pro/"
class="text-blue-600 hover:underline dark:text-blue-500">
Flowbite Pro
</a>
</li>
<li>
<a
href="https://tailwindui.com/"
rel="nofollow"
class="text-blue-600 hover:underline dark:text-blue-500">
Tailwind UI
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
================================================
FILE: apps/docs/docs/components/accordion/_always-open.component.ts
================================================
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTitle,
} from 'flowbite-angular/accordion';
import { Component } from '@angular/core';
@Component({
imports: [Accordion, AccordionItem, AccordionTitle, AccordionContent],
templateUrl: './_always-open.component.html',
host: {
class: 'flex flex-wrap flex-col gap-3 p-6',
},
})
export class FlowbiteAlwaysOpenComponent {}
================================================
FILE: apps/docs/docs/components/accordion/_color.component.html
================================================
<div
flowbiteAccordion
color="info">
<div
flowbiteAccordionItem
value="accordion-item-1">
<h5 flowbiteAccordionTitle>What is Flowbite?</h5>
<div flowbiteAccordionContent>
<div class="p-5">
<p class="mb-2 text-gray-500 dark:text-gray-400">
Flowbite is an open-source library of interactive components built on top of Tailwind CSS
including buttons, dropdowns, modals, navbars, and more.
</p>
<p class="text-gray-500 dark:text-gray-400">
Check out this guide to learn how to
<a
href="/docs/getting-started/introduction/"
class="text-blue-600 hover:underline dark:text-blue-500">
get started
</a>
and start developing websites even faster with components on top of Tailwind CSS.
</p>
</div>
</div>
</div>
<div
flowbiteAccordionItem
value="accordion-item-2">
<h5 flowbiteAccordionTitle>Is there a Figma file available?</h5>
<div flowbiteAccordionContent>
<div class="p-5">
<p class="mb-2 text-gray-500 dark:text-gray-400">
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.
</p>
<p class="text-gray-500 dark:text-gray-400">
Check out the
<a
href="https://flowbite.com/figma/"
class="text-blue-600 hover:underline dark:text-blue-500">
Figma design system
</a>
based on the utility classes from Tailwind CSS and components from Flowbite.
</p>
</div>
</div>
</div>
<div
flowbiteAccordionItem
value="accordion-item-3">
<h5 flowbiteAccordionTitle>What are the differences between Flowbite and Tailwind UI?</h5>
<div flowbiteAccordionContent>
<div class="p-5">
<p class="mb-2 text-gray-500 dark:text-gray-400">
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.
</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">
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.
</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">Learn more about these technologies:</p>
<ul class="list-disc ps-5 text-gray-500 dark:text-gray-400">
<li>
<a
href="https://flowbite.com/pro/"
class="text-blue-600 hover:underline dark:text-blue-500">
Flowbite Pro
</a>
</li>
<li>
<a
href="https://tailwindui.com/"
rel="nofollow"
class="text-blue-600 hover:underline dark:text-blue-500">
Tailwind UI
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
================================================
FILE: apps/docs/docs/components/accordion/_color.component.ts
================================================
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTitle,
} from 'flowbite-angular/accordion';
import { Component } from '@angular/core';
@Component({
imports: [Accordion, AccordionItem, AccordionTitle, AccordionContent],
templateUrl: './_color.component.html',
host: {
class: 'flex flex-wrap flex-col gap-3 p-6',
},
})
export class FlowbiteColorComponent {}
================================================
FILE: apps/docs/docs/components/accordion/_default.component.html
================================================
<div flowbiteAccordion>
<div
flowbiteAccordionItem
value="accordion-item-1">
<h5 flowbiteAccordionTitle>What is Flowbite?</h5>
<div flowbiteAccordionContent>
<div class="p-5">
<p class="mb-2 text-gray-500 dark:text-gray-400">
Flowbite is an open-source library of interactive components built on top of Tailwind CSS
including buttons, dropdowns, modals, navbars, and more.
</p>
<p class="text-gray-500 dark:text-gray-400">
Check out this guide to learn how to
<a
href="/docs/getting-started/introduction/"
class="text-blue-600 hover:underline dark:text-blue-500">
get started
</a>
and start developing websites even faster with components on top of Tailwind CSS.
</p>
</div>
</div>
</div>
<div
flowbiteAccordionItem
value="accordion-item-2">
<h5 flowbiteAccordionTitle>Is there a Figma file available?</h5>
<div flowbiteAccordionContent>
<div class="p-5">
<p class="mb-2 text-gray-500 dark:text-gray-400">
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.
</p>
<p class="text-gray-500 dark:text-gray-400">
Check out the
<a
href="https://flowbite.com/figma/"
class="text-blue-600 hover:underline dark:text-blue-500">
Figma design system
</a>
based on the utility classes from Tailwind CSS and components from Flowbite.
</p>
</div>
</div>
</div>
<div
flowbiteAccordionItem
value="accordion-item-3">
<h5 flowbiteAccordionTitle>What are the differences between Flowbite and Tailwind UI?</h5>
<div flowbiteAccordionContent>
<div class="p-5">
<p class="mb-2 text-gray-500 dark:text-gray-400">
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.
</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">
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.
</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">Learn more about these technologies:</p>
<ul class="list-disc ps-5 text-gray-500 dark:text-gray-400">
<li>
<a
href="https://flowbite.com/pro/"
class="text-blue-600 hover:underline dark:text-blue-500">
Flowbite Pro
</a>
</li>
<li>
<a
href="https://tailwindui.com/"
rel="nofollow"
class="text-blue-600 hover:underline dark:text-blue-500">
Tailwind UI
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
================================================
FILE: apps/docs/docs/components/accordion/_default.component.ts
================================================
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTitle,
} from 'flowbite-angular/accordion';
import { Component } from '@angular/core';
@Component({
imports: [Accordion, AccordionItem, AccordionTitle, AccordionContent],
templateUrl: './_default.component.html',
host: {
class: 'flex flex-wrap flex-col gap-3 p-6',
},
})
export class FlowbiteDefaultComponent {}
================================================
FILE: apps/docs/docs/components/accordion/_flush.component.html
================================================
<div
flowbiteAccordion
flush>
<div
flowbiteAccordionItem
value="accordion-item-1">
<h5 flowbiteAccordionTitle>What is Flowbite?</h5>
<div flowbiteAccordionContent>
<div class="p-5">
<p class="mb-2 text-gray-500 dark:text-gray-400">
Flowbite is an open-source library of interactive components built on top of Tailwind CSS
including buttons, dropdowns, modals, navbars, and more.
</p>
<p class="text-gray-500 dark:text-gray-400">
Check out this guide to learn how to
<a
href="/docs/getting-started/introduction/"
class="text-blue-600 hover:underline dark:text-blue-500">
get started
</a>
and start developing websites even faster with components on top of Tailwind CSS.
</p>
</div>
</div>
</div>
<div
flowbiteAccordionItem
value="accordion-item-2">
<h5 flowbiteAccordionTitle>Is there a Figma file available?</h5>
<div flowbiteAccordionContent>
<div class="p-5">
<p class="mb-2 text-gray-500 dark:text-gray-400">
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.
</p>
<p class="text-gray-500 dark:text-gray-400">
Check out the
<a
href="https://flowbite.com/figma/"
class="text-blue-600 hover:underline dark:text-blue-500">
Figma design system
</a>
based on the utility classes from Tailwind CSS and components from Flowbite.
</p>
</div>
</div>
</div>
<div
flowbiteAccordionItem
value="accordion-item-3">
<h5 flowbiteAccordionTitle>What are the differences between Flowbite and Tailwind UI?</h5>
<div flowbiteAccordionContent>
<div class="p-5">
<p class="mb-2 text-gray-500 dark:text-gray-400">
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.
</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">
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.
</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">Learn more about these technologies:</p>
<ul class="list-disc ps-5 text-gray-500 dark:text-gray-400">
<li>
<a
href="https://flowbite.com/pro/"
class="text-blue-600 hover:underline dark:text-blue-500">
Flowbite Pro
</a>
</li>
<li>
<a
href="https://tailwindui.com/"
rel="nofollow"
class="text-blue-600 hover:underline dark:text-blue-500">
Tailwind UI
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
================================================
FILE: apps/docs/docs/components/accordion/_flush.component.ts
================================================
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTitle,
} from 'flowbite-angular/accordion';
import { Component } from '@angular/core';
@Component({
imports: [Accordion, AccordionItem, AccordionTitle, AccordionContent],
templateUrl: './_flush.component.html',
host: {
class: 'flex flex-wrap flex-col gap-3 p-6',
},
})
export class FlowbiteFlushComponent {}
================================================
FILE: apps/docs/docs/components/accordion/_icon.component.html
================================================
<div flowbiteAccordion>
<div
flowbiteAccordionItem
value="accordion-item-1"
#accordionItem1="flowbiteAccordionItem">
<h5
flowbiteAccordionTitle
class="data-open:*:[flowbite-icon]:rotate-180">
What is Flowbite?
<flowbite-icon
name="chevronDown"
class="size-4 transition-transform duration-150 ease-in-out" />
</h5>
<div flowbiteAccordionContent>
<div class="p-5">
<p class="mb-2 text-gray-500 dark:text-gray-400">
Flowbite is an open-source library of interactive components built on top of Tailwind CSS
including buttons, dropdowns, modals, navbars, and more.
</p>
<p class="text-gray-500 dark:text-gray-400">
Check out this guide to learn how to
<a
href="/docs/getting-started/introduction/"
class="text-blue-600 hover:underline dark:text-blue-500">
get started
</a>
and start developing websites even faster with components on top of Tailwind CSS.
</p>
</div>
</div>
</div>
<div
flowbiteAccordionItem
value="accordion-item-2"
#accordionItem2="flowbiteAccordionItem">
<h5
flowbiteAccordionTitle
class="data-open:*:[flowbite-icon]:rotate-180">
Is there a Figma file available?
<flowbite-icon
name="chevronDown"
class="size-4 transition-transform duration-150 ease-in-out" />
</h5>
<div flowbiteAccordionContent>
<div class="p-5">
<p class="mb-2 text-gray-500 dark:text-gray-400">
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.
</p>
<p class="text-gray-500 dark:text-gray-400">
Check out the
<a
href="https://flowbite.com/figma/"
class="text-blue-600 hover:underline dark:text-blue-500">
Figma design system
</a>
based on the utility classes from Tailwind CSS and components from Flowbite.
</p>
</div>
</div>
</div>
<div
flowbiteAccordionItem
value="accordion-item-3"
#accordionItem3="flowbiteAccordionItem">
<h5
flowbiteAccordionTitle
class="data-open:*:[flowbite-icon]:rotate-180">
What are the differences between Flowbite and Tailwind UI?
<flowbite-icon
name="chevronDown"
class="size-4 transition-transform duration-150 ease-in-out" />
</h5>
<div flowbiteAccordionContent>
<div class="p-5">
<p class="mb-2 text-gray-500 dark:text-gray-400">
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.
</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">
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.
</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">Learn more about these technologies:</p>
<ul class="list-disc ps-5 text-gray-500 dark:text-gray-400">
<li>
<a
href="https://flowbite.com/pro/"
class="text-blue-600 hover:underline dark:text-blue-500">
Flowbite Pro
</a>
</li>
<li>
<a
href="https://tailwindui.com/"
rel="nofollow"
class="text-blue-600 hover:underline dark:text-blue-500">
Tailwind UI
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
================================================
FILE: apps/docs/docs/components/accordion/_icon.component.ts
================================================
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTitle,
} from 'flowbite-angular/accordion';
import { Icon } from 'flowbite-angular/icon';
import { chevronDown } from 'flowbite-angular/icon/outline/arrows';
import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
@Component({
imports: [Accordion, AccordionItem, AccordionTitle, AccordionContent, Icon],
providers: [provideIcons({ chevronDown })],
templateUrl: './_icon.component.html',
host: {
class: 'flex flex-wrap flex-col gap-3 p-6',
},
})
export class FlowbiteIconComponent {}
================================================
FILE: apps/docs/docs/components/accordion/index.md
================================================
---
keyword: AccordionPage
---
## Default accordion
{{ NgDocActions.demo('flowbiteDefaultComponent', {container: false}) }}
```angular-html file="./_default.component.html" group="default" name="html"
```
```angular-ts file="./_default.component.ts" group="default" name="typescript"
```
## Always open
{{ NgDocActions.demo('flowbiteAlwaysOpenComponent', {container: false}) }}
```angular-html file="./_always-open.component.html" group="always-open" name="html"
```
```angular-ts file="./_always-open.component.ts" group="always-open" name="typescript"
```
## Color option
{{ NgDocActions.demo('flowbiteColorComponent', {container: false}) }}
```angular-html file="./_color.component.html" group="color" name="html"
```
```angular-ts file="./_color.component.ts" group="color" name="typescript"
```
## Flush accordion
{{ NgDocActions.demo('flowbiteFlushComponent', {container: false}) }}
```angular-html file="./_flush.component.html" group="flush" name="html"
```
```angular-ts file="./_flush.component.ts" group="flush" name="typescript"
```
## Accordion with Icon
{{ NgDocActions.demo('flowbiteIconComponent', {container: false}) }}
```angular-html file="./_icon.component.html" group="icon" name="html"
```
```angular-ts file="./_icon.component.ts" group="icon" name="typescript"
```
{% import "../../shared/theme-macro.md" as themeMacro %}
{{ themeMacro.display(NgDocPage.data.themes) }}
================================================
FILE: apps/docs/docs/components/accordion/ng-doc.page.ts
================================================
import type { DocThemes } from '../../doc-theme.model';
import { toIndentedJson } from '../../doc-theme.model';
import ComponentCategory from '../ng-doc.category';
import { FlowbiteAlwaysOpenComponent } from './_always-open.component';
import { FlowbiteColorComponent } from './_color.component';
import { FlowbiteDefaultComponent } from './_default.component';
import { FlowbiteFlushComponent } from './_flush.component';
import { FlowbiteIconComponent } from './_icon.component';
import {
flowbiteAccordionContentTheme,
flowbiteAccordionItemTheme,
flowbiteAccordionTheme,
flowbiteAccordionTitleTheme,
} from 'flowbite-angular/accordion';
import type { NgDocPage } from '@ng-doc/core';
/**
* Use the accordion component to show hidden information based on the collapse and expand state of the child elements
*/
const Accordion: NgDocPage = {
title: 'Accordion',
mdFile: './index.md',
category: ComponentCategory,
demos: {
flowbiteDefaultComponent: FlowbiteDefaultComponent,
flowbiteAlwaysOpenComponent: FlowbiteAlwaysOpenComponent,
flowbiteColorComponent: FlowbiteColorComponent,
flowbiteFlushComponent: FlowbiteFlushComponent,
flowbiteIconComponent: FlowbiteIconComponent,
},
data: {
themes: [
{ title: 'Accordion theme', content: toIndentedJson(flowbiteAccordionTheme) },
{ title: 'Accordion item content', content: toIndentedJson(flowbiteAccordionItemTheme) },
{ title: 'Accordion title theme', content: toIndentedJson(flowbiteAccordionTitleTheme) },
{ title: 'Accordion content', content: toIndentedJson(flowbiteAccordionContentTheme) },
] satisfies DocThemes,
},
};
export default Accordion;
================================================
FILE: apps/docs/docs/components/alert/_border-accent.component.html
================================================
<div
flowbiteAlert
border
accent>
<div flowbiteAlertContent>
<span>
<span class="font-medium">default alert!</span> Change a few things up and try submitting
again.
</span>
</div>
</div>
<div
flowbiteAlert
border
accent
color="info">
<div flowbiteAlertContent>
<span>
<span class="font-medium">info alert!</span> Change a few things up and try submitting again.
</span>
</div>
</div>
<div
flowbiteAlert
border
accent
color="failure">
<div flowbiteAlertContent>
<span>
<span class="font-medium">failure alert!</span> Change a few things up and try submitting
again.
</span>
</div>
</div>
<div
flowbiteAlert
border
accent
color="warning">
<div flowbiteAlertContent>
<span>
<span class="font-medium">warning alert!</span> Change a few things up and try submitting
again.
</span>
</div>
</div>
<div
flowbiteAlert
border
accent
color="success">
<div flowbiteAlertContent>
<span>
<span class="font-medium">success alert!</span> Change a few things up and try submitting
again.
</span>
</div>
</div>
<div
flowbiteAlert
border
accent
color="primary">
<div flowbiteAlertContent>
<span>
<span class="font-medium">primary alert!</span> Change a few things up and try submitting
again.
</span>
</div>
</div>
================================================
FILE: apps/docs/docs/components/alert/_border-accent.component.ts
================================================
import { Alert, AlertContent } from 'flowbite-angular/alert';
import { Component } from '@angular/core';
@Component({
imports: [Alert, AlertContent],
templateUrl: './_border-accent.component.html',
host: {
class: 'flex flex-wrap flex-col gap-3 p-6',
},
})
export class FlowbiteBorderAccentComponent {}
================================================
FILE: apps/docs/docs/components/alert/_border.component.html
================================================
<div
flowbiteAlert
border>
<div flowbiteAlertContent>
<span>
<span class="font-medium">default alert!</span> Change a few things up and try submitting
again.
</span>
</div>
</div>
<div
flowbiteAlert
border
color="info">
<div flowbiteAlertContent>
<span>
<span class="font-medium">info alert!</span> Change a few things up and try submitting again.
</span>
</div>
</div>
<div
flowbiteAlert
border
color="failure">
<div flowbiteAlertContent>
<span>
<span class="font-medium">failure alert!</span> Change a few things up and try submitting
again.
</span>
</div>
</div>
<div
flowbiteAlert
border
color="warning">
<div flowbiteAlertContent>
<span>
<span class="font-medium">warning alert!</span> Change a few things up and try submitting
again.
</span>
</div>
</div>
<div
flowbiteAlert
border
color="success">
<div flowbiteAlertContent>
<span>
<span class="font-medium">success alert!</span> Change a few things up and try submitting
again.
</span>
</div>
</div>
<div
flowbiteAlert
border
color="primary">
<div flowbiteAlertContent>
<span>
<span class="font-medium">primary alert!</span> Change a few things up and try submitting
again.
</span>
</div>
</div>
================================================
FILE: apps/docs/docs/components/alert/_border.component.ts
================================================
import { Alert, AlertContent } from 'flowbite-angular/alert';
import { Component } from '@angular/core';
@Component({
imports: [Alert, AlertContent],
templateUrl: './_border.component.html',
host: {
class: 'flex flex-wrap flex-col gap-3 p-6',
},
})
export class FlowbiteBorderComponent {}
================================================
FILE: apps/docs/docs/components/alert/_default.component.html
================================================
<div flowbiteAlert>
<div flowbiteAlertContent>
<span>
<span class="font-medium">default alert!</span> Change a few things up and try submitting
again.
</span>
</div>
</div>
<div
flowbiteAlert
color="info">
<div flowbiteAlertContent>
<span>
<span class="font-medium">info alert!</span> Change a few things up and try submitting again.
</span>
</div>
</div>
<div
flowbiteAlert
color="failure">
<div flowbiteAlertContent>
<span>
<span class="font-medium">failure alert!</span> Change a few things up and try submitting
again.
</span>
</div>
</div>
<div
flowbiteAlert
color="warning">
<div flowbiteAlertContent>
<span>
<span class="font-medium">warning alert!</span> Change a few things up and try submitting
again.
</span>
</div>
</div>
<div
flowbiteAlert
color="success">
<div flowbiteAlertContent>
<span>
<span class="font-medium">success alert!</span> Change a few things up and try submitting
again.
</span>
</div>
</div>
<div
flowbiteAlert
color="primary">
<div flowbiteAlertContent>
<span>
<span class="font-medium">primary alert!</span> Change a few things up and try submitting
again.
</span>
</div>
</div>
================================================
FILE: apps/docs/docs/components/alert/_default.component.ts
================================================
import { Alert, AlertContent } from 'flowbite-angular/alert';
import { Component } from '@angular/core';
@Component({
imports: [Alert, AlertContent],
templateUrl: './_default.component.html',
host: {
class: 'flex flex-wrap flex-col gap-3 p-6',
},
})
export class FlowbiteDefaultComponent {}
================================================
FILE: apps/docs/docs/components/alert/_dismissable.component.html
================================================
<div flowbiteAlert>
<div flowbiteAlertContent>
<span class="inline-flex items-center gap-2">
<flowbite-icon
name="infoCircle"
class="size-5 stroke-2" />
<span>
<span class="font-medium">default alert!</span> Change a few things up and try submitting
again.
</span>
</span>
<button
flowbiteAlertButton
(click)="onDismiss()">
<flowbite-icon
name="close"
class="size-5 stroke-2" />
</button>
</div>
</div>
<div
flowbiteAlert
color="info">
<div flowbiteAlertContent>
<span class="inline-flex items-center gap-2">
<flowbite-icon
name="infoCircle"
class="size-5 stroke-2" />
<span>
<span class="font-medium">info alert!</span> Change a few things up and try submitting
again.
</span>
</span>
<button
flowbiteAlertButton
(click)="onDismiss()">
<flowbite-icon
name="close"
class="size-5 stroke-2" />
</button>
</div>
</div>
<div
flowbiteAlert
color="failure">
<div flowbiteAlertContent>
<span class="inline-flex items-center gap-2">
<flowbite-icon
name="infoCircle"
class="size-5 stroke-2" />
<span>
<span class="font-medium">failure alert!</span> Change a few things up and try submitting
again.
</span>
</span>
<button
flowbiteAlertButton
(click)="onDismiss()">
<flowbite-icon
name="close"
class="size-5 stroke-2" />
</button>
</div>
</div>
<div
flowbiteAlert
color="warning">
<div flowbiteAlertContent>
<span class="inline-flex items-center gap-2">
<flowbite-icon
name="infoCircle"
class="size-5 stroke-2" />
<span>
<span class="font-medium">warning alert!</span> Change a few things up and try submitting
again.
</span>
</span>
<button
flowbiteAlertButton
(click)="onDismiss()">
<flowbite-icon
name="close"
class="size-5 stroke-2" />
</button>
</div>
</div>
<div
flowbiteAlert
color="success">
<div flowbiteAlertContent>
<span class="inline-flex items-center gap-2">
<flowbite-icon
name="infoCircle"
class="size-5 stroke-2" />
<span>
<span class="font-medium">success alert!</span> Change a few things up and try submitting
again.
</span>
</span>
<button
flowbiteAlertButton
(click)="onDismiss()">
<flowbite-icon
name="close"
class="size-5 stroke-2" />
</button>
</div>
</div>
<div
flowbiteAlert
color="primary">
<div flowbiteAlertContent>
<span class="inline-flex items-center gap-2">
<flowbite-icon
name="infoCircle"
class="size-5 stroke-2" />
<span>
<span class="font-medium">primary alert!</span> Change a few things up and try submitting
again.
</span>
</span>
<button
flowbiteAlertButton
(click)="onDismiss()">
<flowbite-icon
name="close"
class="size-5 stroke-2" />
</button>
</div>
</div>
================================================
FILE: apps/docs/docs/components/alert/_dismissable.component.ts
================================================
import { Alert, AlertButton, AlertContent } from 'flowbite-angular/alert';
import { Icon } from 'flowbite-angular/icon';
import { close, infoCircle } from 'flowbite-angular/icon/outline/general';
import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
@Component({
imports: [Alert, Icon, AlertButton, AlertContent],
providers: [provideIcons({ close, infoCircle })],
templateUrl: './_dismissable.component.html',
host: {
class: 'flex flex-wrap flex-col gap-3 p-6',
},
})
export class FlowbiteDismissableComponent {
onDismiss(): void {
alert('Alert has been dismissed');
}
}
================================================
FILE: apps/docs/docs/components/alert/_icon.component.html
================================================
<div flowbiteAlert>
<div flowbiteAlertContent>
<span class="inline-flex items-center gap-2">
<flowbite-icon
name="infoCircle"
class="size-5 stroke-2" />
<span class="font-medium">default alert!</span> Change a few things up and try submitting
again.
</span>
</div>
</div>
<div
flowbiteAlert
color="info">
<div flowbiteAlertContent>
<span class="inline-flex items-center gap-2">
<flowbite-icon
name="infoCircle"
class="size-5 stroke-2" />
<span class="font-medium">info alert!</span> Change a few things up and try submitting again.
</span>
</div>
</div>
<div
flowbiteAlert
color="failure">
<div flowbiteAlertContent>
<span class="inline-flex items-center gap-2">
<flowbite-icon
name="infoCircle"
class="size-5 stroke-2" />
<span class="font-medium">failure alert!</span> Change a few things up and try submitting
again.
</span>
</div>
</div>
<div
flowbiteAlert
color="warning">
<div flowbiteAlertContent>
<span class="inline-flex items-center gap-2">
<flowbite-icon
name="infoCircle"
class="size-5 stroke-2" />
<span class="font-medium">warning alert!</span> Change a few things up and try submitting
again.
</span>
</div>
</div>
<div
flowbiteAlert
color="success">
<div flowbiteAlertContent>
<span class="inline-flex items-center gap-2">
<flowbite-icon
name="infoCircle"
class="size-5 stroke-2" />
<span class="font-medium">success alert!</span> Change a few things up and try submitting
again.
</span>
</div>
</div>
<div
flowbiteAlert
color="failure">
<div flowbiteAlertContent>
<span class="inline-flex items-center gap-2">
<flowbite-icon
name="infoCircle"
class="size-5 stroke-2" />
<span class="font-medium">primary alert!</span> Change a few things up and try submitting
again.
</span>
</div>
</div>
================================================
FILE: apps/docs/docs/components/alert/_icon.component.ts
================================================
import { Alert, AlertContent } from 'flowbite-angular/alert';
import { Icon } from 'flowbite-angular/icon';
import { infoCircle } from 'flowbite-angular/icon/outline/general';
import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
@Component({
imports: [Alert, Icon, AlertContent],
providers: [provideIcons({ infoCircle })],
templateUrl: './_icon.component.html',
host: {
class: 'flex flex-wrap flex-col gap-3 p-6',
},
})
export class FlowbiteIconComponent {}
================================================
FILE: apps/docs/docs/components/alert/index.md
================================================
---
keyword: AlertPage
---
## Default alert
{{ NgDocActions.demo('flowbiteDefaultComponent', {container: false}) }}
```angular-html file="./_default.component.html" group="default" name="html"
```
```angular-ts file="./_default.component.ts" group="default" name="typescript"
```
## Alert with icon
{{ NgDocActions.demo('flowbiteIconComponent', {container: false}) }}
```angular-html file="./_icon.component.html" group="icon" name="html"
```
```angular-ts file="./_icon.component.ts" group="icon" name="typescript"
```
## Bordered alert
{{ NgDocActions.demo('flowbiteBorderComponent', {container: false}) }}
```angular-html file="./_border.component.html" group="border" name="html"
```
```angular-ts file="./_border.component.ts" group="border" name="typescript"
```
## Dismissable alert
{{ NgDocActions.demo('flowbiteDismissableComponent', {container: false}) }}
```angular-html file="./_dismissable.component.html" group="dismissable" name="html"
```
```angular-ts file="./_dismissable.component.ts" group="dismissable" name="typescript"
```
## Border accent
{{ NgDocActions.demo('flowbiteBorderAccentComponent', {container: false}) }}
```angular-html file="./_border-accent.component.html" group="borderAccent" name="html"
```
```angular-ts file="./_border-accent.component.ts" group="borderAccent" name="typescript"
```
{% import "../../shared/theme-macro.md" as themeMacro %}
{{ themeMacro.display(NgDocPage.data.themes) }}
================================================
FILE: apps/docs/docs/components/alert/ng-doc.page.ts
================================================
import type { DocThemes } from '../../doc-theme.model';
import { toIndentedJson } from '../../doc-theme.model';
import ComponentCategory from '../ng-doc.category';
import { FlowbiteBorderAccentComponent } from './_border-accent.component';
import { FlowbiteBorderComponent } from './_border.component';
import { FlowbiteDefaultComponent } from './_default.component';
import { FlowbiteDismissableComponent } from './_dismissable.component';
import { FlowbiteIconComponent } from './_icon.component';
import {
flowbiteAlertButtonTheme,
flowbiteAlertContentTheme,
flowbiteAlertTheme,
} from 'flowbite-angular/alert';
import type { NgDocPage } from '@ng-doc/core';
/**
*
*/
const Alert: NgDocPage = {
title: 'Alert',
mdFile: './index.md',
category: ComponentCategory,
demos: {
flowbiteDefaultComponent: FlowbiteDefaultComponent,
flowbiteIconComponent: FlowbiteIconComponent,
flowbiteBorderComponent: FlowbiteBorderComponent,
flowbiteBorderAccentComponent: FlowbiteBorderAccentComponent,
flowbiteDismissableComponent: FlowbiteDismissableComponent,
},
data: {
themes: [
{ title: 'Alert theme', content: toIndentedJson(flowbiteAlertTheme) },
{ title: 'Alert content theme', content: toIndentedJson(flowbiteAlertContentTheme) },
{ title: 'Alert button theme', content: toIndentedJson(flowbiteAlertButtonTheme) },
] satisfies DocThemes,
},
};
export default Alert;
================================================
FILE: apps/docs/docs/components/badge/_border.component.html
================================================
<span
flowbiteBadge
border>
<span>default</span>
</span>
<span
flowbiteBadge
border
color="info">
<span>info</span>
</span>
<span
flowbiteBadge
border
color="failure">
<span>failure</span>
</span>
<span
flowbiteBadge
border
color="warning">
<span>warning</span>
</span>
<span
flowbiteBadge
border
color="success">
<span>success</span>
</span>
<span
flowbiteBadge
border
color="primary">
<span>primary</span>
</span>
================================================
FILE: apps/docs/docs/components/badge/_border.component.ts
================================================
import { Badge } from 'flowbite-angular/badge';
import { Component } from '@angular/core';
@Component({
imports: [Badge],
templateUrl: './_border.component.html',
host: {
class: 'flex flex-wrap flex-row gap-3 p-6',
},
})
export class FlowbiteBorderComponent {}
================================================
FILE: apps/docs/docs/components/badge/_default.component.html
================================================
<span flowbiteBadge>
<span>default</span>
</span>
<span
flowbiteBadge
color="info">
<span>info</span>
</span>
<span
flowbiteBadge
color="failure">
<span>failure</span>
</span>
<span
flowbiteBadge
color="warning">
<span>warning</span>
</span>
<span
flowbiteBadge
color="success">
<span>success</span>
</span>
<span
flowbiteBadge
color="primary">
<span>primary</span>
</span>
================================================
FILE: apps/docs/docs/components/badge/_default.component.ts
================================================
import { Badge } from 'flowbite-angular/badge';
import { Component } from '@angular/core';
@Component({
imports: [Badge],
templateUrl: './_default.component.html',
host: {
class: 'flex flex-wrap flex-row gap-3 p-6',
},
})
export class FlowbiteDefaultComponent {}
================================================
FILE: apps/docs/docs/components/badge/_dismiss.component.html
================================================
<span flowbiteBadge>
<flowbite-icon
name="infoCircle"
class="size-4 stroke-2" />
<span class="ml-2">default</span>
<button flowbiteBadgeButton>
<flowbite-icon
name="close"
class="size-4 stroke-2"
(click)="onDismiss()" />
</button>
</span>
<span
flowbiteBadge
color="info">
<flowbite-icon
name="infoCircle"
class="size-4 stroke-2" />
<span class="ml-2">info</span>
<button flowbiteBadgeButton>
<flowbite-icon
name="close"
class="size-4 stroke-2"
(click)="onDismiss()" />
</button>
</span>
<span
flowbiteBadge
color="failure">
<flowbite-icon
name="infoCircle"
class="size-4 stroke-2" />
<span class="ml-2">failure</span>
<button flowbiteBadgeButton>
<flowbite-icon
name="close"
class="size-4 stroke-2"
(click)="onDismiss()" />
</button>
</span>
<span
flowbiteBadge
color="warning">
<flowbite-icon
name="infoCircle"
class="size-4 stroke-2" />
<span class="ml-2">warning</span>
<button flowbiteBadgeButton>
<flowbite-icon
name="close"
class="size-4 stroke-2"
(click)="onDismiss()" />
</button>
</span>
<span
flowbiteBadge
color="success">
<flowbite-icon
name="infoCircle"
class="size-4 stroke-2" />
<span class="ml-2">success</span>
<button flowbiteBadgeButton>
<flowbite-icon
name="close"
class="size-4 stroke-2"
(click)="onDismiss()" />
</button>
</span>
<span
flowbiteBadge
color="primary">
<flowbite-icon
name="infoCircle"
class="size-4 stroke-2" />
<span class="ml-2">primary</span>
<button flowbiteBadgeButton>
<flowbite-icon
name="close"
class="size-4 stroke-2"
(click)="onDismiss()" />
</button>
</span>
================================================
FILE: apps/docs/docs/components/badge/_dismiss.component.ts
================================================
import { Badge, BadgeButton } from 'flowbite-angular/badge';
import { Icon } from 'flowbite-angular/icon';
import { close, infoCircle } from 'flowbite-angular/icon/outline/general';
import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
@Component({
imports: [Badge, Icon, BadgeButton],
providers: [provideIcons({ infoCircle, close })],
templateUrl: './_dismiss.component.html',
host: {
class: 'flex flex-wrap flex-row gap-3 p-6',
},
})
export class FlowbiteDismissComponent {
onDismiss(): void {
alert('Badge has been dismissed');
}
}
================================================
FILE: apps/docs/docs/components/badge/_icon.component.html
================================================
<span flowbiteBadge>
<flowbite-icon
name="check"
class="size-4 stroke-2" />
<span class="ml-2">default</span>
</span>
<span
flowbiteBadge
color="info">
<flowbite-icon
name="check"
class="size-4 stroke-2" />
<span class="ml-2">info</span>
</span>
<span
flowbiteBadge
color="failure">
<flowbite-icon
name="check"
class="size-4 stroke-2" />
<span class="ml-2">failure</span>
</span>
<span
flowbiteBadge
color="success">
<flowbite-icon
name="check"
class="size-4 stroke-2" />
<span class="ml-2">success</span>
</span>
<span
flowbiteBadge
color="warning">
<flowbite-icon
name="check"
class="size-4 stroke-2" />
<span class="ml-2">warning</span>
</span>
<span
flowbiteBadge
color="primary">
<flowbite-icon
name="check"
class="size-4 stroke-2" />
<span class="ml-2">primary</span>
</span>
================================================
FILE: apps/docs/docs/components/badge/_icon.component.ts
================================================
import { Badge } from 'flowbite-angular/badge';
import { Icon } from 'flowbite-angular/icon';
import { check } from 'flowbite-angular/icon/outline/general';
import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
@Component({
imports: [Badge, Icon],
providers: [provideIcons({ check })],
templateUrl: './_icon.component.html',
host: {
class: 'flex flex-wrap flex-row gap-3 p-6',
},
})
export class FlowbiteIconComponent {}
================================================
FILE: apps/docs/docs/components/badge/_link.component.html
================================================
<a
href="#"
flowbiteBadgeLink>
<span>default</span>
</a>
<a
href="#"
flowbiteBadgeLink
color="info">
<span>info</span>
</a>
<a
href="#"
flowbiteBadgeLink
color="failure">
<span>failure</span>
</a>
<a
href="#"
flowbiteBadgeLink
color="success">
<span>success</span>
</a>
<a
href="#"
flowbiteBadgeLink
color="warning">
<span>warning</span>
</a>
<a
href="#"
flowbiteBadgeLink
color="primary">
<span>primary</span>
</a>
================================================
FILE: apps/docs/docs/components/badge/_link.component.ts
================================================
import { BadgeLink } from 'flowbite-angular/badge';
import { Component } from '@angular/core';
@Component({
imports: [BadgeLink],
templateUrl: './_link.component.html',
host: {
class: 'flex flex-wrap flex-row gap-3 p-6',
},
})
export class FlowbiteLinkComponent {}
================================================
FILE: apps/docs/docs/components/badge/index.md
================================================
---
keyword: BadgePage
---
## Default badge
{{ NgDocActions.demo('flowbiteDefaultComponent', {container: false}) }}
```angular-html file="./_default.component.html" group="default" name="html"
```
```angular-ts file="./_default.component.ts" group="default" name="typescript"
```
## Bordered badge
{{ NgDocActions.demo('flowbiteBorderComponent', {container: false}) }}
```angular-html file="./_border.component.html" group="border" name="html"
```
```angular-ts file="./_border.component.ts" group="border" name="typescript"
```
## Badge as link
{{ NgDocActions.demo('flowbiteLinkComponent', {container: false}) }}
```angular-html file="./_link.component.html" group="link" name="html"
```
```angular-ts file="./_link.component.ts" group="link" name="typescript"
```
## Badge with icon
{{ NgDocActions.demo('flowbiteIconComponent', {container: false}) }}
```angular-html file="./_icon.component.html" group="icon" name="html"
```
```angular-ts file="./_icon.component.ts" group="icon" name="typescript"
```
## Dismissable badge
{{ NgDocActions.demo('flowbiteDismissComponent', {container: false}) }}
```angular-html file="./_dismiss.component.html" group="dismiss" name="html"
```
```angular-ts file="./_dismiss.component.ts" group="dismiss" name="typescript"
```
{% import "../../shared/theme-macro.md" as themeMacro %}
{{ themeMacro.display(NgDocPage.data.themes) }}
================================================
FILE: apps/docs/docs/components/badge/ng-doc.page.ts
================================================
import type { DocThemes } from '../../doc-theme.model';
import { toIndentedJson } from '../../doc-theme.model';
import ComponentCategory from '../ng-doc.category';
import { FlowbiteBorderComponent } from './_border.component';
import { FlowbiteDefaultComponent } from './_default.component';
import { FlowbiteDismissComponent } from './_dismiss.component';
import { FlowbiteIconComponent } from './_icon.component';
import { FlowbiteLinkComponent } from './_link.component';
import {
flowbiteBadgeButtonTheme,
flowbiteBadgeLinkTheme,
flowbiteBadgeTheme,
} from 'flowbite-angular/badge';
import type { NgDocPage } from '@ng-doc/core';
/**
*
*/
const Badge: NgDocPage = {
title: 'Badge',
mdFile: './index.md',
category: ComponentCategory,
demos: {
flowbiteDefaultComponent: FlowbiteDefaultComponent,
flowbiteBorderComponent: FlowbiteBorderComponent,
flowbiteLinkComponent: FlowbiteLinkComponent,
flowbiteIconComponent: FlowbiteIconComponent,
flowbiteDismissComponent: FlowbiteDismissComponent,
},
data: {
themes: [
{ title: 'Badge', content: toIndentedJson(flowbiteBadgeTheme) },
{ title: 'Badge link', content: toIndentedJson(flowbiteBadgeLinkTheme) },
{ title: 'Badge button', content: toIndentedJson(flowbiteBadgeButtonTheme) },
] satisfies DocThemes,
},
};
export default Badge;
================================================
FILE: apps/docs/docs/components/breadcrumb/_default.component.html
================================================
<nav flowbiteBreadcrumb>
<ol flowbiteBreadcrumbContent>
<li flowbiteBreadcrumbItem>
<flowbite-icon
name="home"
class="size-4 stroke-2" />
<span class="ml-2">Home</span>
</li>
<li flowbiteBreadcrumbItem>
<flowbite-icon
name="chevron-right"
class="size-4 stroke-2" />
<span class="ml-2">Projects</span>
</li>
<li flowbiteBreadcrumbItem>
<flowbite-icon
name="chevron-right"
class="size-4 stroke-2" />
<span class="ml-2">Flowbite</span>
</li>
</ol>
</nav>
================================================
FILE: apps/docs/docs/components/breadcrumb/_default.component.ts
================================================
import { Breadcrumb, BreadcrumbContent, BreadcrumbItem } from 'flowbite-angular/breadcrumb';
import { Icon } from 'flowbite-angular/icon';
import { chevronRight } from 'flowbite-angular/icon/outline/arrows';
import { home } from 'flowbite-angular/icon/outline/general';
import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
@Component({
imports: [Breadcrumb, BreadcrumbItem, BreadcrumbContent, Icon],
providers: [provideIcons({ home, chevronRight })],
templateUrl: './_default.component.html',
host: {
class: 'flex flex-wrap flex-col gap-3 p-6',
},
})
export class FlowbiteDefaultComponent {}
================================================
FILE: apps/docs/docs/components/breadcrumb/index.md
================================================
---
keyword: BreadcrumbPage
---
## Default breadcrumb
{{ NgDocActions.demo('flowbiteDefaultComponent', {container: false}) }}
```angular-html file="./_default.component.html" group="default" name="html"
```
```angular-ts file="./_default.component.ts" group="default" name="typescript"
```
{% import "../../shared/theme-macro.md" as themeMacro %}
{{ themeMacro.display(NgDocPage.data.themes) }}
================================================
FILE: apps/docs/docs/components/breadcrumb/ng-doc.page.ts
================================================
import type { DocThemes } from '../../doc-theme.model';
import { toIndentedJson } from '../../doc-theme.model';
import ComponentCategory from '../ng-doc.category';
import { FlowbiteDefaultComponent } from './_default.component';
import {
flowbiteBreadcrumbContentTheme,
flowbiteBreadcrumbItemTheme,
flowbiteBreadcrumbTheme,
} from 'flowbite-angular/breadcrumb';
import type { NgDocPage } from '@ng-doc/core';
/**
*
*/
const Breadcrumb: NgDocPage = {
title: 'Breadcrumb',
mdFile: './index.md',
category: ComponentCategory,
demos: {
flowbiteDefaultComponent: FlowbiteDefaultComponent,
},
data: {
themes: [
{ title: 'Breadcrumb', content: toIndentedJson(flowbiteBreadcrumbTheme) },
{ title: 'Breadcrumb content', content: toIndentedJson(flowbiteBreadcrumbContentTheme) },
{ title: 'Breadcrumb item', content: toIndentedJson(flowbiteBreadcrumbItemTheme) },
] satisfies DocThemes,
},
};
export default Breadcrumb;
================================================
FILE: apps/docs/docs/components/button/_default.component.html
================================================
<button flowbiteButton>default</button>
<button
flowbiteButton
color="info">
info
</button>
<button
flowbiteButton
color="failure">
failure
</button>
<button
flowbiteButton
color="success">
success
</button>
<button
flowbiteButton
color="warning">
warning
</button>
<button
flowbiteButton
color="primary">
primary
</button>
================================================
FILE: apps/docs/docs/components/button/_default.component.ts
================================================
import { Button } from 'flowbite-angular/button';
import { Component } from '@angular/core';
@Component({
imports: [Button],
templateUrl: './_default.component.html',
host: {
class: 'flex flex-wrap flex-row gap-3 p-6',
},
})
export class FlowbiteDefaultComponent {}
================================================
FILE: apps/docs/docs/components/button/_disabled.component.html
================================================
<button
flowbiteButton
disabled>
default
</button>
<button
flowbiteButton
disabled
color="info">
info
</button>
<button
flowbiteButton
disabled
color="failure">
failure
</button>
<button
flowbiteButton
disabled
color="success">
success
</button>
<button
flowbiteButton
disabled
color="warning">
warning
</button>
<button
flowbiteButton
disabled
color="primary">
primary
</button>
================================================
FILE: apps/docs/docs/components/button/_disabled.component.ts
================================================
import { Button } from 'flowbite-angular/button';
import { Component } from '@angular/core';
@Component({
imports: [Button],
templateUrl: './_disabled.component.html',
host: {
class: 'flex flex-wrap flex-row gap-3 p-6',
},
})
export class FlowbiteDisabledComponent {}
================================================
FILE: apps/docs/docs/components/button/_group.component.html
================================================
<div flowbiteButtonGroup>
<button flowbiteButton>Button 1</button>
<button flowbiteButton>Button 2</button>
<button flowbiteButton>Button 3</button>
</div>
================================================
FILE: apps/docs/docs/components/button/_group.component.ts
================================================
import { Button } from 'flowbite-angular/button';
import { ButtonGroup } from 'flowbite-angular/button-group';
import { Component } from '@angular/core';
@Component({
imports: [Button, ButtonGroup],
templateUrl: './_group.component.html',
host: {
class: 'flex flex-wrap flex-row gap-3 p-6',
},
})
export class FlowbiteGroupComponent {}
================================================
FILE: apps/docs/docs/components/button/_icon.component.html
================================================
<button flowbiteButton>
default button with icon
<flowbite-icon
name="brain"
class="ml-2 size-4 stroke-2" />
</button>
<button
flowbiteButton
color="info">
info button with icon
<flowbite-icon
name="brain"
class="ml-2 size-4 stroke-2" />
</button>
<button
flowbiteButton
color="failure">
failure button with icon
<flowbite-icon
name="brain"
class="ml-2 size-4 stroke-2" />
</button>
<button
flowbiteButton
color="success">
success button with icon
<flowbite-icon
name="brain"
class="ml-2 size-4 stroke-2" />
</button>
<button
flowbiteButton
color="warning">
warning button with icon
<flowbite-icon
name="brain"
class="ml-2 size-4 stroke-2" />
</button>
<button
flowbiteButton
color="primary">
primary button with icon
<flowbite-icon
name="brain"
class="ml-2 size-4 stroke-2" />
</button>
================================================
FILE: apps/docs/docs/components/button/_icon.component.ts
================================================
import { Button } from 'flowbite-angular/button';
import { Icon } from 'flowbite-angular/icon';
import { brain } from 'flowbite-angular/icon/outline/general';
import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
@Component({
imports: [Button, Icon],
providers: [provideIcons({ brain })],
templateUrl: './_icon.component.html',
host: {
class: 'flex flex-wrap flex-row gap-3 p-6',
},
})
export class FlowbiteIconComponent {}
================================================
FILE: apps/docs/docs/components/button/_outline.component.html
================================================
<button
flowbiteButton
outline>
default
</button>
<button
flowbiteButton
outline
color="info">
info
</button>
<button
flowbiteButton
outline
color="failure">
failure
</button>
<button
flowbiteButton
outline
color="success">
success
</button>
<button
flowbiteButton
outline
color="warning">
warning
</button>
<button
flowbiteButton
outline
color="primary">
primary
</button>
================================================
FILE: apps/docs/docs/components/button/_outline.component.ts
================================================
import { Button } from 'flowbite-angular/button';
import { Component } from '@angular/core';
@Component({
imports: [Button],
templateUrl: './_outline.component.html',
host: {
class: 'flex flex-wrap flex-row gap-3 p-6',
},
})
export class FlowbiteOutlineComponent {}
================================================
FILE: apps/docs/docs/components/button/_pill.component.html
================================================
<button
flowbiteButton
pill>
default
</button>
<button
flowbiteButton
pill
color="info">
info
</button>
<button
flowbiteButton
pill
color="failure">
failure
</button>
<button
flowbiteButton
pill
color="success">
success
</button>
<button
flowbiteButton
pill
color="warning">
warning
</button>
<button
flowbiteButton
pill
color="primary">
primary
</button>
================================================
FILE: apps/docs/docs/components/button/_pill.component.ts
================================================
import { Button } from 'flowbite-angular/button';
import { Component } from '@angular/core';
@Component({
imports: [Button],
templateUrl: './_pill.component.html',
host: {
class: 'flex flex-wrap flex-row gap-3 p-6',
},
})
export class FlowbitePillComponent {}
================================================
FILE: apps/docs/docs/components/button/_size.component.html
================================================
<button
flowbiteButton
size="xs">
extra small
</button>
<button
flowbiteButton
size="sm">
small
</button>
<button
flowbiteButton
size="md">
medium
</button>
<button
flowbiteButton
size="lg">
large
</button>
<button
flowbiteButton
size="xl">
extra large
</button>
================================================
FILE: apps/docs/docs/components/button/_size.component.ts
================================================
import { Button } from 'flowbite-angular/button';
import { Component } from '@angular/core';
@Component({
imports: [Button],
templateUrl: './_size.component.html',
host: {
class: 'flex flex-wrap flex-row gap-3 p-6',
},
})
export class FlowbiteSizeComponent {}
================================================
FILE: apps/docs/docs/components/button/index.md
================================================
---
keyword: ButtonPage
---
## Default button
{{ NgDocActions.demo('flowbiteDefaultComponent', {container: false}) }}
```angular-html file="./_default.component.html" group="default" name="html"
```
```angular-ts file="./_default.component.ts" group="default" name="typescript"
```
## Button pill
{{ NgDocActions.demo('flowbitePillComponent', {container: false}) }}
```angular-html file="./_pill.component.html" group="pill" name="html"
```
```angular-ts file="./_pill.component.ts" group="pill" name="typescript"
```
## Outline button
{{ NgDocActions.demo('flowbiteOutlineComponent', {container: false}) }}
```angular-html file="./_outline.component.html" group="outline" name="html"
```
```angular-ts file="./_outline.component.ts" group="outline" name="typescript"
```
## Button sizes
{{ NgDocActions.demo('flowbiteSizeComponent', {container: false}) }}
```angular-html file="./_size.component.html" group="size" name="html"
```
```angular-ts file="./_size.component.ts" group="size" name="typescript"
```
## Button with icon
{{ NgDocActions.demo('flowbiteIconComponent', {container: false}) }}
```angular-html file="./_icon.component.html" group="icon" name="html"
```
```angular-ts file="./_icon.component.ts" group="icon" name="typescript"
```
## Disabled button
{{ NgDocActions.demo('flowbiteDisabledComponent', {container: false}) }}
```angular-html file="./_disabled.component.html" group="disabled" name="html"
```
```angular-ts file="./_disabled.component.ts" group="disabled" name="typescript"
```
## Button group
{{ NgDocActions.demo('flowbiteGroupComponent', {container: false}) }}
```angular-html file="./_group.component.html" group="group" name="html"
```
```angular-ts file="./_group.component.ts" group="group" name="typescript"
```
{% import "../../shared/theme-macro.md" as themeMacro %}
{{ themeMacro.display(NgDocPage.data.themes) }}
================================================
FILE: apps/docs/docs/components/button/ng-doc.page.ts
================================================
import type { DocThemes } from '../../doc-theme.model';
import { toIndentedJson } from '../../doc-theme.model';
import ComponentCategory from '../ng-doc.category';
import { FlowbiteDefaultComponent } from './_default.component';
import { FlowbiteDisabledComponent } from './_disabled.component';
import { FlowbiteGroupComponent } from './_group.component';
import { FlowbiteIconComponent } from './_icon.component';
import { FlowbiteOutlineComponent } from './_outline.component';
import { FlowbitePillComponent } from './_pill.component';
import { FlowbiteSizeComponent } from './_size.component';
import { flowbiteButtonTheme } from 'flowbite-angular/button';
import type { NgDocPage } from '@ng-doc/core';
/**
*
*/
const Button: NgDocPage = {
title: 'Button',
mdFile: './index.md',
category: ComponentCategory,
demos: {
flowbiteDefaultComponent: FlowbiteDefaultComponent,
flowbitePillComponent: FlowbitePillComponent,
flowbiteOutlineComponent: FlowbiteOutlineComponent,
flowbiteSizeComponent: FlowbiteSizeComponent,
flowbiteIconComponent: FlowbiteIconComponent,
flowbiteDisabledComponent: FlowbiteDisabledComponent,
flowbiteGroupComponent: FlowbiteGroupComponent,
},
data: {
themes: [{ title: 'Button', content: toIndentedJson(flowbiteButtonTheme) }] satisfies DocThemes,
},
};
export default Button;
================================================
FILE: apps/docs/docs/components/card/_default.component.html
================================================
<div flowbiteCard>
<div flowbiteCardContent>
<h5 flowbiteCardHeader>Noteworthy technology acquisitions 2021</h5>
<p>
Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse
chronological order.
</p>
</div>
</div>
================================================
FILE: apps/docs/docs/components/card/_default.component.ts
================================================
import { Card, CardContent, CardHeader } from 'flowbite-angular/card';
import { Component } from '@angular/core';
@Component({
imports: [Card, CardHeader, CardContent],
templateUrl: './_default.component.html',
host: {
class: 'flex flex-wrap flex-row gap-3 p-6',
},
})
export class FlowbiteDefaultComponent {}
================================================
FILE: apps/docs/docs/components/card/index.md
================================================
---
keyword: CardPage
---
## Default card
{{ NgDocActions.demo('flowbiteDefaultComponent', {container: false}) }}
```angular-html file="./_default.component.html" group="default" name="html"
```
```angular-ts file="./_default.component.ts" group="default" name="typescript"
```
{% import "../../shared/theme-macro.md" as themeMacro %}
{{ themeMacro.display(NgDocPage.data.themes) }}
================================================
FILE: apps/docs/docs/components/card/ng-doc.page.ts
================================================
import type { DocThemes } from '../../doc-theme.model';
import { toIndentedJson } from '../../doc-theme.model';
import ComponentCategory from '../ng-doc.category';
import { FlowbiteDefaultComponent } from './_default.component';
import {
flowbiteCardContentTheme,
flowbiteCardHeaderTheme,
flowbiteCardTheme,
} from 'flowbite-angular/card';
import type { NgDocPage } from '@ng-doc/core';
/**
*
*/
const Card: NgDocPage = {
title: 'Card',
mdFile: './index.md',
category: ComponentCategory,
demos: {
flowbiteDefaultComponent: FlowbiteDefaultComponent,
},
data: {
themes: [
{ title: 'Card content', content: toIndentedJson(flowbiteCardContentTheme) },
{ title: 'Card header', content: toIndentedJson(flowbiteCardHeaderTheme) },
{ title: 'Card', content: toIndentedJson(flowbiteCardTheme) },
] satisfies DocThemes,
},
};
export default Card;
================================================
FILE: apps/docs/docs/components/clipboard/_default.component.html
================================================
<div
flowbiteClipboard
id="clipboard"
value="npm install flowbite-angular"></div>
================================================
FILE: apps/docs/docs/components/clipboard/_default.component.ts
================================================
import { Clipboard } from 'flowbite-angular/clipboard';
import { Component } from '@angular/core';
@Component({
imports: [Clipboard],
templateUrl: './_default.component.html',
host: {
class: 'flex flex-wrap flex-row gap-3 p-6',
},
})
export class FlowbiteDefaultComponent {}
================================================
FILE: apps/docs/docs/components/clipboard/index.md
================================================
---
keyword: ClipboardPage
---
## Default clipboard
{{ NgDocActions.demo('flowbiteDefaultComponent', {container: false}) }}
```angular-html file="./_default.component.html" group="default" name="html"
```
```angular-ts file="./_default.component.ts" group="default" name="typescript"
```
{% import "../../shared/theme-macro.md" as themeMacro %}
{{ themeMacro.display(NgDocPage.data.themes) }}
================================================
FILE: apps/docs/docs/components/clipboard/ng-doc.page.ts
================================================
import type { DocThemes } from '../../doc-theme.model';
import { toIndentedJson } from '../../doc-theme.model';
import ComponentCategory from '../ng-doc.category';
import { FlowbiteDefaultComponent } from './_default.component';
import { flowbiteClipboardTheme } from 'flowbite-angular/clipboard';
import type { NgDocPage } from '@ng-doc/core';
/**
*
*/
const Clipboard: NgDocPage = {
title: 'Clipboard',
mdFile: './index.md',
category: ComponentCategory,
demos: {
flowbiteDefaultComponent: FlowbiteDefaultComponent,
},
data: {
themes: [
{ title: 'Clipboard', content: toIndentedJson(flowbiteClipboardTheme) },
] satisfies DocThemes,
},
};
export default Clipboard;
================================================
FILE: apps/docs/docs/components/dropdown/_default.component.html
================================================
<button
flowbiteButton
[ngpMenuTrigger]="dropdownMenu"
class="data-open:*:[flowbite-icon]:rotate-180">
Dropdown button
<flowbite-icon
name="chevronDown"
class="ml-2 size-4 stroke-2 transition-transform duration-150 ease-in-out" />
</button>
<ng-template #dropdownMenu>
<div flowbiteDropdown>
<ul flowbiteDropdownContent>
<li flowbiteDropdownItem>Dashboard</li>
<li flowbiteDropdownItem>Settings</li>
<li flowbiteDropdownItem>Earnings</li>
<li flowbiteDropdownItem>Sign out</li>
</ul>
</div>
</ng-template>
================================================
FILE: apps/docs/docs/components/dropdown/_default.component.ts
================================================
import { Button } from 'flowbite-angular/button';
import { Dropdown, DropdownContent, DropdownItem } from 'flowbite-angular/dropdown';
import { Icon } from 'flowbite-angular/icon';
import { chevronDown } from 'flowbite-angular/icon/outline/arrows';
import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { NgpMenuTrigger } from 'ng-primitives/menu';
@Component({
imports: [Button, Dropdown, DropdownContent, DropdownItem, NgpMenuTrigger, Icon],
providers: [provideIcons({ chevronDown })],
templateUrl: './_default.component.html',
host: {
class: 'flex flex-wrap flex-row gap-3 p-6',
},
})
export class FlowbiteDefaultComponent {}
================================================
FILE: apps/docs/docs/components/dropdown/index.md
================================================
---
keyword: DropdownPage
---
## Default dropdown
{{ NgDocActions.demo('flowbiteDefaultComponent', {container: false}) }}
```angular-html file="./_default.component.html" group="default" name="html"
```
```angular-ts file="./_default.component.ts" group="default" name="typescript"
```
{% import "../../shared/theme-macro.md" as themeMacro %}
{{ themeMacro.display(NgDocPage.data.themes) }}
================================================
FILE: apps/docs/docs/components/dropdown/ng-doc.page.ts
================================================
import type { DocThemes } from '../../doc-theme.model';
import { toIndentedJson } from '../../doc-theme.model';
import ComponentCategory from '../ng-doc.category';
import { FlowbiteDefaultComponent } from './_default.component';
import {
flowbiteDropdownContentTheme,
flowbiteDropdownItemTheme,
flowbiteDropdownTheme,
} from 'flowbite-angular/dropdown';
import type { NgDocPage } from '@ng-doc/core';
/**
*
*/
const Dropdown: NgDocPage = {
title: 'Dropdown',
mdFile: './index.md',
category: ComponentCategory,
demos: {
flowbiteDefaultComponent: FlowbiteDefaultComponent,
},
data: {
themes: [
{ title: 'Dropdown content', content: toIndentedJson(flowbiteDropdownContentTheme) },
{ title: 'Dropdown item', content: toIndentedJson(flowbiteDropdownItemTheme) },
{ title: 'Dropdown', content: toIndentedJson(flowbiteDropdownTheme) },
] satisfies DocThemes,
},
};
export default Dropdown;
================================================
FILE: apps/docs/docs/components/icon/_default.component.html
================================================
<flowbite-icon
name="close"
class="block size-5 stroke-2" />
================================================
FILE: apps/docs/docs/components/icon/_default.component.ts
================================================
import { Icon } from 'flowbite-angular/icon';
import { close } from 'flowbite-angular/icon/outline/general';
import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
@Component({
imports: [Icon],
providers: [provideIcons({ close })],
templateUrl: './_default.component.html',
host: {
class: 'flex flex-wrap flex-row gap-3 p-6',
},
})
export class FlowbiteDefaultComponent {}
================================================
FILE: apps/docs/docs/components/icon/index.md
================================================
---
keyword: IconPage
---
## Default icon
{{ NgDocActions.demo('flowbiteDefaultComponent', {container: false}) }}
```angular-html file="./_default.component.html" group="default" name="html"
```
```angular-ts file="./_default.component.ts" group="default" name="typescript"
```
{% import "../../shared/theme-macro.md" as themeMacro %}
{{ themeMacro.display(NgDocPage.data.themes) }}
================================================
FILE: apps/docs/docs/components/icon/ng-doc.page.ts
================================================
import type { DocThemes } from '../../doc-theme.model';
import { toIndentedJson } from '../../doc-theme.model';
import ComponentCategory from '../ng-doc.category';
import { FlowbiteDefaultComponent } from './_default.component';
import { flowbiteIconTheme } from 'flowbite-angular/icon';
import type { NgDocPage } from '@ng-doc/core';
/**
*
*/
const Icon: NgDocPage = {
title: 'Icon',
mdFile: './index.md',
category: ComponentCategory,
demos: {
flowbiteDefaultComponent: FlowbiteDefaultComponent,
},
data: {
themes: [{ title: 'Icon', content: toIndentedJson(flowbiteIconTheme) }] satisfies DocThemes,
},
};
export default Icon;
================================================
FILE: apps/docs/docs/components/indicator/_default.component.html
================================================
<span flowbiteIndicator></span>
<span
flowbiteIndicator
color="info"></span>
<span
flowbiteIndicator
color="failure"></span>
<span
flowbiteIndicator
color="success"></span>
<span
flowbiteIndicator
color="warning"></span>
<span
flowbiteIndicator
color="primary"></span>
================================================
FILE: apps/docs/docs/components/indicator/_default.component.ts
================================================
import { Indicator } from 'flowbite-angular/indicator';
import { Component } from '@angular/core';
@Component({
imports: [Indicator],
templateUrl: './_default.component.html',
host: {
class: 'flex flex-wrap flex-row gap-3 p-6',
},
})
export class FlowbiteDefaultComponent {}
================================================
FILE: apps/docs/docs/components/indicator/index.md
================================================
---
keyword: IndicatorPage
---
## Default indicator
{{ NgDocActions.demo('flowbiteDefaultComponent', {container: false}) }}
```angular-html file="./_default.component.html" group="default" name="html"
```
```angular-ts file="./_default.component.ts" group="default" name="typescript"
```
{% import "../../shared/theme-macro.md" as themeMacro %}
{{ themeMacro.display(NgDocPage.data.themes) }}
================================================
FILE: apps/docs/docs/components/indicator/ng-doc.page.ts
================================================
import type { DocThemes } from '../../doc-theme.model';
import { toIndentedJson } from '../../doc-theme.model';
import ComponentCategory from '../ng-doc.category';
import { FlowbiteDefaultComponent } from './_default.component';
import { flowbiteIndicatorTheme } from 'flowbite-angular/indicator';
import type { NgDocPage } from '@ng-doc/core';
/**
*
*/
const Indicator: NgDocPage = {
title: 'Indicator',
mdFile: './index.md',
category: ComponentCategory,
demos: {
flowbiteDefaultComponent: FlowbiteDefaultComponent,
},
data: {
themes: [
{ title: 'Indicator', content: toIndentedJson(flowbiteIndicatorTheme) },
] satisfies DocThemes,
},
};
export default Indicator;
================================================
FILE: apps/docs/docs/components/input/_default.component.html
================================================
<form class="mx-auto max-w-sm">
<div flowbiteFormField>
<label
flowbiteLabel
for="email">
Email address
</label>
<input
flowbiteFormControl
id="email"
name="email"
placeholder="email@flowbite-angular.com" />
<p flowbiteHelper>
We’ll never share your details. Read our
<a
href="#"
class="font-medium text-blue-600 hover:underline dark:text-blue-500">
Privacy Policy
</a>
.
</p>
</div>
<div flowbiteFormField>
<label
flowbiteLabel
for="password">
Password
</label>
<input
flowbiteFormControl
id="password"
name="password"
placeholder="•••••••••" />
</div>
<button
flowbiteButton
color="info"
type="submit"
class="w-full">
Submit
</button>
</form>
================================================
FILE: apps/docs/docs/components/input/_default.component.ts
================================================
import { Button } from 'flowbite-angular/button';
import { FormControl, FormField, Helper, Label } from 'flowbite-angular/form';
import { Component } from '@angular/core';
@Component({
imports: [FormControl, FormField, Label, Helper, Button],
templateUrl: './_default.component.html',
host: {
class: 'flex flex-wrap flex-row gap-3 p-6',
},
})
export class FlowbiteDefaultComponent {}
================================================
FILE: apps/docs/docs/components/input/index.md
================================================
---
keyword: InputFieldPage
---
## Default Input field
{{ NgDocActions.demo('flowbiteDefaultComponent', {container: false}) }}
```angular-html file="./_default.component.html" group="default" name="html"
```
```angular-ts file="./_default.component.ts" group="default" name="typescript"
```
{% import "../../shared/theme-macro.md" as themeMacro %}
{{ themeMacro.display(NgDocPage.data.themes) }}
================================================
FILE: apps/docs/docs/components/input/ng-doc.page.ts
================================================
import type { DocThemes } from '../../doc-theme.model';
import { toIndentedJson } from '../../doc-theme.model';
import ComponentCategory from '../ng-doc.category';
import { FlowbiteDefaultComponent } from './_default.component';
import {
flowbiteFormControlTheme,
flowbiteFormFieldTheme,
flowbiteHelperTheme,
flowbiteLabelTheme,
} from 'flowbite-angular/form';
import type { NgDocPage } from '@ng-doc/core';
/**
*
*/
const Input: NgDocPage = {
title: 'Input field',
mdFile: './index.md',
category: ComponentCategory,
demos: {
flowbiteDefaultComponent: FlowbiteDefaultComponent,
},
data: {
themes: [
{ title: 'Form control', content: toIndentedJson(flowbiteFormControlTheme) },
{ title: 'Form field', content: toIndentedJson(flowbiteFormFieldTheme) },
{ title: 'Helper', content: toIndentedJson(flowbiteHelperTheme) },
{ title: 'Label', content: toIndentedJson(flowbiteLabelTheme) },
] satisfies DocThemes,
},
};
export default Input;
================================================
FILE: apps/docs/docs/components/modal/_default.component.html
================================================
<button
flowbiteButton
[ngpDialogTrigger]="dialog">
Modal
</button>
<ng-template
#dialog
let-close="close">
<div flowbiteModalOverlay>
<div flowbiteModal>
<h3 flowbiteModalHeader>Terms of Service</h3>
<div flowbiteModalContent>
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
With less than a month to go before the European Union enacts new consumer privacy laws
for its citizens, companies around the world are updating their terms of service
agreements to comply.
</p>
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May
25 and is meant to ensure a common set of data rights in the European Union. It requires
organizations to notify users as soon as possible of high-risk data breaches that could
personally affect them.
</p>
</div>
<div flowbiteModalFooter>
<button
flowbiteButton
(click)="close()"
color="info">
I accept
</button>
<button
flowbiteButton
(click)="close()"
color="default"
outline>
Decline
</button>
</div>
</div>
</div>
</ng-template>
================================================
FILE: apps/docs/docs/components/modal/_default.component.ts
================================================
import { Button } from 'flowbite-angular/button';
import {
Modal,
ModalContent,
ModalFooter,
ModalHeader,
ModalOverlay,
} from 'flowbite-angular/modal';
import { Component } from '@angular/core';
import { NgpDialogTrigger } from 'ng-primitives/dialog';
@Component({
imports: [Button, NgpDialogTrigger, Modal, ModalContent, ModalFooter, ModalHeader, ModalOverlay],
templateUrl: './_default.component.html',
host: {
class: 'flex flex-wrap flex-row gap-3 p-6',
},
})
export class FlowbiteDefaultComponent {}
================================================
FILE: apps/docs/docs/components/modal/_open-programatically.component.html
================================================
<button
flowbiteButton
(click)="onClick()">
Trigger modal
</button>
<ng-template
#dialog
let-close="close">
<div flowbiteModalOverlay>
<div flowbiteModal>
<h3 flowbiteModalHeader>Terms of Service</h3>
<div flowbiteModalContent>
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
With less than a month to go before the European Union enacts new consumer privacy laws
for its citizens, companies around the world are updating their terms of service
agreements to comply.
</p>
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May
25 and is meant to ensure a common set of data rights in the European Union. It requires
organizations to notify users as soon as possible of high-risk data breaches that could
personally affect them.
</p>
</div>
<div flowbiteModalFooter>
<button
flowbiteButton
(click)="close()"
color="info">
I accept
</button>
<button
flowbiteButton
(click)="close()"
color="default"
outline>
Decline
</button>
</div>
</div>
</div>
</ng-template>
================================================
FILE: apps/docs/docs/components/modal/_open-programatically.component.ts
================================================
import { Button } from 'flowbite-angular/button';
import {
Modal,
ModalContent,
ModalFooter,
ModalHeader,
ModalOverlay,
} from 'flowbite-angular/modal';
import { Component, inject, TemplateRef, viewChild } from '@angular/core';
import { NgpDialogManager } from 'ng-primitives/dialog';
@Component({
imports: [Button, Modal, ModalContent, ModalFooter, ModalHeader, ModalOverlay],
templateUrl: './_open-programatically.component.html',
host: {
class: 'flex flex-wrap flex-row gap-3 p-6',
},
})
export class FlowbiteOpenprogramaticallyComponent {
public readonly ngpDialogManager = inject(NgpDialogManager);
public readonly modal = viewChild('dialog', { read: TemplateRef<unknown> });
onClick(): void {
const modal = this.modal();
if (modal !== undefined) {
this.ngpDialogManager.open(modal);
}
}
}
================================================
FILE: apps/docs/docs/components/modal/_position.component.html
================================================
<button
flowbiteButton
[ngpDialogTrigger]="dialog">
Modal
</button>
<ng-template
#dialog
let-close="close">
<div
flowbiteModalOverlay
position="top-left">
<div flowbiteModal>
<h3 flowbiteModalHeader>Terms of Service</h3>
<div flowbiteModalContent>
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
With less than a month to go before the European Union enacts new consumer privacy laws
for its citizens, companies around the world are updating their terms of service
agreements to comply.
</p>
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May
25 and is meant to ensure a common set of data rights in the European Union. It requires
organizations to notify users as soon as possible of high-risk data breaches that could
personally affect them.
</p>
</div>
<div flowbiteModalFooter>
<button
flowbiteButton
(click)="close()"
color="info">
I accept
</button>
<button
flowbiteButton
(click)="close()"
color="default"
outline>
Decline
</button>
</div>
</div>
</div>
</ng-template>
================================================
FILE: apps/docs/docs/components/modal/_position.component.ts
================================================
import { Button } from 'flowbite-angular/button';
import {
Modal,
ModalContent,
ModalFooter,
ModalHeader,
ModalOverlay,
} from 'flowbite-angular/modal';
import { Component } from '@angular/core';
import { NgpDialogTrigger } from 'ng-primitives/dialog';
@Component({
imports: [Button, NgpDialogTrigger, Modal, ModalContent, ModalFooter, ModalHeader, ModalOverlay],
templateUrl: './_position.component.html',
host: {
class: 'flex flex-wrap flex-row gap-3 p-6',
},
})
export class FlowbitePositionComponent {}
================================================
FILE: apps/docs/docs/components/modal/index.md
================================================
---
keyword: ModalPage
---
## Default Modal
{{ NgDocActions.demo('flowbiteDefaultComponent', {container: false}) }}
```angular-html file="./_default.component.html" group="default" name="html"
```
```angular-ts file="./_default.component.ts" group="default" name="typescript"
```
## Open programatically
{{ NgDocActions.demo('flowbiteOpenprogramaticallyComponent', {container: false}) }}
```angular-html file="./_open-programatically.component.html" group="openProgramatically" name="html"
```
```angular-ts file="./_open-programatically.component.ts" group="openProgramatically" name="typescript"
```
## Positioned modal
{{ NgDocActions.demo('flowbitePositionComponent', {container: false}) }}
```angular-html file="./_position.component.html" group="position" name="html"
```
```angular-ts file="./_position.component.ts" group="position" name="typescript"
```
{% import "../../shared/theme-macro.md" as themeMacro %}
{{ themeMacro.display(NgDocPage.data.themes) }}
================================================
FILE: apps/docs/docs/components/modal/ng-doc.page.ts
================================================
import type { DocThemes } from '../../doc-theme.model';
import { toIndentedJson } from '../../doc-theme.model';
import ComponentCategory from '../ng-doc.category';
import { FlowbiteDefaultComponent } from './_default.component';
import { FlowbiteOpenprogramaticallyComponent } from './_open-programatically.component';
import { FlowbitePositionComponent } from './_position.component';
import {
flowbiteModalContentTheme,
flowbiteModalFooterTheme,
flowbiteModalHeaderTheme,
flowbiteModalOverlayTheme,
flowbiteModalTheme,
} from 'flowbite-angular/modal';
import type { NgDocPage } from '@ng-doc/core';
/**
*
*/
const Modal: NgDocPage = {
title: 'Modal',
mdFile: './index.md',
category: ComponentCategory,
demos: {
flowbiteDefaultComponent: FlowbiteDefaultComponent,
flowbiteOpenprogramaticallyComponent: FlowbiteOpenprogramaticallyComponent,
flowbitePositionComponent: FlowbitePositionComponent,
},
data: {
themes: [
{ title: 'Modal content', content: toIndentedJson(flowbiteModalContentTheme) },
{ title: 'Modal footer', content: toIndentedJson(flowbiteModalFooterTheme) },
{ title: 'Modal header', content: toIndentedJson(flowbiteModalHeaderTheme) },
{ title: 'Modal overlay', content: toIndentedJson(flowbiteModalOverlayTheme) },
{ title: 'Modal', content: toIndentedJson(flowbiteModalTheme) },
] satisfies DocThemes,
},
};
export default Modal;
================================================
FILE: apps/docs/docs/components/navbar/_default.component.html
================================================
<nav flowbiteNavbar>
<a
flowbiteNavbarBrand
href="#">
<span class="sr-only">Open navbar</span>
<img
src="https://flowbite.com/docs/images/logo.svg"
class="h-8"
alt="Flowbite Logo" />
<span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">
Flowbite
</span>
</a>
<button flowbiteNavbarToggle>
<flowbite-icon
name="bars"
class="size-5 stroke-2" />
</button>
<div flowbiteNavbarContent>
<li>
<a
flowbiteNavbarItem
href="#">
Home
</a>
</li>
<li>
<a
flowbiteNavbarItem
href="#">
About
</a>
</li>
<li>
<a
flowbiteNavbarItem
href="#">
Services
</a>
</li>
<li>
<a
flowbiteNavbarItem
href="#">
Pricing
</a>
</li>
<li>
<a
flowbiteNavbarItem
href="#">
Contact
</a>
</li>
</div>
</nav>
<div class="p-4">
<div class="rounded-lg border-2 border-dashed border-gray-200 p-4 dark:border-gray-700">
@for (i of [0, 1]; track $index) {
<div class="mb-4 grid grid-cols-3 gap-4">
<div class="flex h-24 items-center justify-center rounded-sm bg-gray-50 dark:bg-gray-800">
<p class="text-2xl text-gray-400 dark:text-gray-500">
<svg
class="h-3.5 w-3.5"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 18 18">
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 1v16M1 9h16"></path>
</svg>
</p>
</div>
<div class="flex h-24 items-center justify-center rounded-sm bg-gray-50 dark:bg-gray-800">
<p class="text-2xl text-gray-400 dark:text-gray-500">
<svg
class="h-3.5 w-3.5"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 18 18">
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 1v16M1 9h16"></path>
</svg>
</p>
</div>
<div class="flex h-24 items-center justify-center rounded-sm bg-gray-50 dark:bg-gray-800">
<p class="text-2xl text-gray-400 dark:text-gray-500">
<svg
class="h-3.5 w-3.5"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 18 18">
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 1v16M1 9h16"></path>
</svg>
</p>
</div>
</div>
<div
class="mb-4 flex h-48 items-center justify-center rounded-sm bg-gray-50 dark:bg-gray-800">
<p class="text-2xl text-gray-400 dark:text-gray-500">
<svg
class="h-3.5 w-3.5"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 18 18">
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 1v16M1 9h16"></path>
</svg>
</p>
</div>
}
</div>
</div>
================================================
FILE: apps/docs/docs/components/navbar/_default.component.ts
================================================
import { Icon } from 'flowbite-angular/icon';
import { bars } from 'flowbite-angular/icon/outline/general';
import {
Navbar,
NavbarBrand,
NavbarContent,
NavbarItem,
NavbarToggle,
} from 'flowbite-angular/navbar';
import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
@Component({
imports: [Navbar, NavbarBrand, NavbarContent, NavbarItem, NavbarToggle, Icon],
providers: [provideIcons({ bars })],
templateUrl: './_default.component.html',
host: {
class: 'flex flex-col gap-3 h-72 overflow-scroll',
},
})
export class FlowbiteDefaultComponent {}
================================================
FILE: apps/docs/docs/components/navbar/index.md
================================================
---
keyword: NavbarPage
---
## Default Navbar
{{ NgDocActions.demo('flowbiteDefaultComponent', {container: false}) }}
```angular-html file="./_default.component.html" group="default" name="html"
```
```angular-ts file="./_default.component.ts" group="default" name="typescript"
```
{% import "../../shared/theme-macro.md" as themeMacro %}
{{ themeMacro.display(NgDocPage.data.themes) }}
================================================
FILE: apps/docs/docs/components/navbar/ng-doc.page.ts
================================================
import type { DocThemes } from '../../doc-theme.model';
import { toIndentedJson } from '../../doc-theme.model';
import ComponentCategory from '../ng-doc.category';
import { FlowbiteDefaultComponent } from './_default.component';
import {
flowbiteNavbarBrandTheme,
flowbiteNavbarContentTheme,
flowbiteNavbarIconItemTheme,
flowbiteNavbarItemTheme,
flowbiteNavbarTheme,
flowbiteNavbarToggleTheme,
} from 'flowbite-angular/navbar';
import type { NgDocPage } from '@ng-doc/core';
/**
*
*/
const Navbar: NgDocPage = {
title: 'Navbar',
mdFile: './index.md',
category: ComponentCategory,
demos: {
flowbiteDefaultComponent: FlowbiteDefaultComponent,
},
data: {
themes: [
{ title: 'Navbar brand', content: toIndentedJson(flowbiteNavbarBrandTheme) },
{ title: 'Navbar content', content: toIndentedJson(flowbiteNavbarContentTheme) },
{ title: 'Navbar icon item', content: toIndentedJson(flowbiteNavbarIconItemTheme) },
{ title: 'Navbar item', content: toIndentedJson(flowbiteNavbarItemTheme) },
{ title: 'Navbar', content: toIndentedJson(flowbiteNavbarTheme) },
{ title: 'Navbar toggle', content: toIndentedJson(flowbiteNavbarToggleTheme) },
] satisfies DocThemes,
},
};
export default Navbar;
================================================
FILE: apps/docs/docs/components/ng-doc.category.ts
================================================
import type { NgDocCategory } from '@ng-doc/core';
const ComponentCategory: NgDocCategory = {
title: 'Components',
order: 3,
expandable: true,
};
export default ComponentCategory;
================================================
FILE: apps/docs/docs/components/pagination/_default.component.html
================================================
<nav
flowbitePagination
[(page)]="page"
pageCount="25"></nav>
================================================
FILE: apps/docs/docs/components/pagination/_default.component.ts
================================================
import { Pagination } from 'flowbite-angular/pagination';
import { Component, signal } from '@angular/core';
@Component({
imports: [Pagination],
templateUrl: './_default.component.html',
host: {
class: 'flex flex-wrap flex-row gap-3 p-6',
},
})
export class FlowbiteDefaultComponent {
readonly page = signal<number>(1);
}
================================================
FILE: apps/docs/docs/components/pagination/index.md
================================================
---
keyword: PaginationPage
---
## Default Pagination
{{ NgDocActions.demo('flowbiteDefaultComponent', {container: false}) }}
```angular-html file="./_default.component.html" group="default" name="html"
```
```angular-ts file="./_default.component.ts" group="default" name="typescript"
```
{% import "../../shared/theme-macro.md" as themeMacro %}
{{ themeMacro.display(NgDocPage.data.themes) }}
================================================
FILE: apps/docs/docs/components/pagination/ng-doc.page.ts
================================================
import type { DocThemes } from '../../doc-theme.model';
import { toIndentedJson } from '../../doc-theme.model';
import ComponentCategory from '../ng-doc.category';
import { FlowbiteDefaultComponent } from './_default.component';
import {
flowbitePaginationButtonTheme,
flowbitePaginationFirstTheme,
flowbitePaginationLastTheme,
flowbitePaginationNextTheme,
flowbitePaginationPreviousTheme,
flowbitePaginationTheme,
} from 'flowbite-angular/pagination';
import type { NgDocPage } from '@ng-doc/core';
/**
*
*/
const Pagination: NgDocPage = {
title: 'Pagination',
mdFile: './index.md',
category: ComponentCategory,
demos: {
flowbiteDefaultComponent: FlowbiteDefaultComponent,
},
data: {
themes: [
{ title: 'Pagination button', content: toIndentedJson(flowbitePaginationButtonTheme) },
{ title: 'Pagination first', content: toIndentedJson(flowbitePaginationFirstTheme) },
{ title: 'Pagination last', content: toIndentedJson(flowbitePaginationLastTheme) },
{ title: 'Pagination next', content: toIndentedJson(flowbitePaginationNextTheme) },
{ title: 'Pagination previous', content: toIndentedJson(flowbitePaginationPreviousTheme) },
{ title: 'Pagination', content: toIndentedJson(flowbitePaginationTheme) },
] satisfies DocThemes,
},
};
export default Pagination;
================================================
FILE: apps/docs/docs/components/sidebar/_default.component.html
================================================
<aside
flowbiteSidebar
class="relative! z-[0]! h-full!">
<div flowbiteSidebarContent>
<li>
<a flowbiteSidebarItem>
<flowbite-icon name="chartPie" />
Dashboard
</a>
</li>
<li>
<a flowbiteSidebarItem>
<flowbite-icon name="drawSquare" />
Kanban
</a>
</li>
<li>
<a flowbiteSidebarItem>
<flowbite-icon name="inbox" />
Inbox
</a>
</li>
<li>
<a flowbiteSidebarItem>
<flowbite-icon name="users" />
Users
</a>
</li>
<li>
<a flowbiteSidebarItem>
<flowbite-icon name="cart" />
Products
</a>
</li>
<li>
<a flowbiteSidebarItem>Sign In</a>
</li>
<li>
<a flowbiteSidebarItem>Sign Up</a>
</li>
</div>
</aside>
<div class="h-full w-full overflow-scroll">
<button flowbiteSidebarToggle>
<flowbite-icon
name="barsFromLeft"
class="size-10 stroke-2" />
</button>
<div class="p-4">
<div class="rounded-lg border-2 border-dashed border-gray-200 p-4 dark:border-gray-700">
@for (i of [0, 1]; track $index) {
<div class="mb-4 grid grid-cols-3 gap-4">
<div class="flex h-24 items-center justify-center rounded-sm bg-gray-50 dark:bg-gray-800">
<p class="text-2xl text-gray-400 dark:text-gray-500">
<svg
class="h-3.5 w-3.5"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 18 18">
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 1v16M1 9h16"></path>
</svg>
</p>
</div>
<div class="flex h-24 items-center justify-center rounded-sm bg-gray-50 dark:bg-gray-800">
<p class="text-2xl text-gray-400 dark:text-gray-500">
<svg
class="h-3.5 w-3.5"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 18 18">
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 1v16M1 9h16"></path>
</svg>
</p>
</div>
<div class="flex h-24 items-center justify-center rounded-sm bg-gray-50 dark:bg-gray-800">
<p class="text-2xl text-gray-400 dark:text-gray-500">
<svg
class="h-3.5 w-3.5"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 18 18">
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 1v16M1 9h16"></path>
</svg>
</p>
</div>
</div>
<div
class="mb-4 flex h-48 items-center justify-center rounded-sm bg-gray-50 dark:bg-gray-800">
<p class="text-2xl text-gray-400 dark:text-gray-500">
<svg
class="h-3.5 w-3.5"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 18 18">
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 1v16M1 9h16"></path>
</svg>
</p>
</div>
}
</div>
</div>
</div>
================================================
FILE: apps/docs/docs/components/sidebar/_default.component.ts
================================================
import { Icon } from 'flowbite-angular/icon';
import { barsFromLeft } from 'flowbite-angular/icon/outline/general';
import { cart } from 'flowbite-angular/icon/solid/e-commerce';
import { chartPie, drawSquare, inbox } from 'flowbite-angular/icon/solid/general';
import { users } from 'flowbite-angular/icon/solid/user';
import {
provideFlowbiteSidebarState,
Sidebar,
SidebarContent,
SidebarItem,
SidebarToggle,
} from 'flowbite-angular/sidebar';
import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
@Component({
imports: [Sidebar, SidebarContent, SidebarItem, SidebarToggle, Icon],
templateUrl: './_default.component.html',
providers: [
provideIcons({ chartPie, inbox, users, cart, drawSquare, barsFromLeft }),
provideFlowbiteSidebarState(),
],
host: {
class: 'flex flex-row h-72',
},
})
export class FlowbiteDefaultComponent {}
================================================
FILE: apps/docs/docs/components/sidebar/index.md
================================================
---
keyword: SidebarPage
---
## Default Sidebar
{{ NgDocActions.demo('flowbiteDefaultComponent', {container: false}) }}
```angular-html file="./_default.component.html" group="default" name="html"
```
```angular-ts file="./_default.component.ts" group="default" name="typescript"
```
{% import "../../shared/theme-macro.md" as themeMacro %}
{{ themeMacro.display(NgDocPage.data.themes) }}
================================================
FILE: apps/docs/docs/components/sidebar/ng-doc.page.ts
================================================
import type { DocThemes } from '../../doc-theme.model';
import { toIndentedJson } from '../../doc-theme.model';
import ComponentCategory from '../ng-doc.category';
import { FlowbiteDefaultComponent } from './_default.component';
import {
flowbiteSidebarContentTheme,
flowbiteSidebarItemTheme,
flowbiteSidebarTheme,
flowbiteSidebarToggleTheme,
} from 'flowbite-angular/sidebar';
import type { NgDocPage } from '@ng-doc/core';
/**
*
*/
const Sidebar: NgDocPage = {
title: 'Sidebar',
mdFile: './index.md',
category: ComponentCategory,
demos: {
flowbiteDefaultComponent: FlowbiteDefaultComponent,
},
data: {
themes: [
{ title: 'Sidebar content', content: toIndentedJson(flowbiteSidebarContentTheme) },
{ title: 'Sidebar item', content: toIndentedJson(flowbiteSidebarItemTheme) },
{ title: 'Sidebar', content: toIndentedJson(flowbiteSidebarTheme) },
{ title: 'Sidebar toggle', content: toIndentedJson(flowbiteSidebarToggleTheme) },
] satisfies DocThemes,
},
};
export default Sidebar;
================================================
FILE: apps/docs/docs/components/tab/_default.component.html
================================================
<div flowbiteTab>
<ul flowbiteTabList>
<li
flowbiteTabButton
value="profile">
Profile
</li>
<li
flowbiteTabButton
value="dashboard">
Dashboard
</li>
<li
flowbiteTabButton
value="settings">
Settings
</li>
<li
flowbiteTabButton
value="contacts">
Contacts
</li>
<li
flowbiteTabButton
value="disabled"
disabled>
Disabled
</li>
</ul>
<div
flowbiteTabContent
value="profile">
<p>
Nulla cursus urna id felis egestas, ac rhoncus felis egestas. Curabitur placerat at quam vitae
volutpat. Nunc at nunc nec ex dapibus sollicitudin nec eget risus. Curabitur id sagittis nisi,
sit amet mollis quam. In hac habitasse platea dictumst. Praesent in augue vitae elit egestas
euismod. Aliquam in tempus enim, et elementum lacus. Nullam commodo nulla sollicitudin euismod
malesuada. Donec sed massa dui. Sed felis ipsum, malesuada eu urna scelerisque, accumsan
pharetra odio. Nullam arcu augue, consequat vel faucibus at, dictum non erat. Morbi metus
nisl, scelerisque non accumsan quis, fringilla vitae ipsum. Vestibulum fermentum lorem sit
amet augue ultrices, eu pretium ex imperdiet.
</p>
</div>
<div
flowbiteTabContent
value="dashboard">
<p>
Curabitur nibh nisl, tincidunt id purus sed, consectetur vehicula sapien. Cras at malesuada
felis, eget imperdiet enim. Maecenas commodo vestibulum turpis non ultrices. Donec ut aliquam
ex, id molestie dui. Nullam porttitor ligula vel malesuada ullamcorper. Vivamus aliquam
consectetur urna, tempus vehicula est consectetur vitae. Integer vitae commodo quam, eget
cursus velit. Nam eget leo diam.
</p>
</div>
<div
flowbiteTabContent
value="settings">
<p>
Vivamus sed lacinia mauris. Integer vehicula lorem nec interdum rutrum. Curabitur auctor
mollis faucibus. Nulla sit amet semper tortor. Vestibulum at tempus nulla, nec interdum orci.
Integer sodales quam sit amet cursus interdum. Fusce consequat ultrices magna a iaculis.
</p>
</div>
<div
flowbiteTabContent
value="contacts">
Sed eget pellentesque tellus. Praesent rutrum placerat lacus vitae elementum. Nulla ac orci ac
enim dignissim finibus. Duis venenatis rhoncus eros. Etiam euismod tortor in vehicula lacinia.
Morbi tempor mollis lacus, nec fringilla mauris vestibulum nec. Donec sapien lacus, semper a
commodo eu, ullamcorper et turpis.
</div>
<div
flowbiteTabContent
value="disabled">
Disabled content.
</div>
</div>
================================================
FILE: apps/docs/docs/components/tab/_default.component.ts
================================================
import { Tab, TabButton, TabContent, TabList } from 'flowbite-angular/tab';
import { Component } from '@angular/core';
@Component({
imports: [Tab, TabButton, TabContent, TabList],
templateUrl: './_default.component.html',
host: {
class: 'flex flex-wrap flex-row gap-3 p-6',
},
})
export class FlowbiteDefaultComponent {}
================================================
FILE: apps/docs/docs/components/tab/index.md
================================================
---
keyword: TabPage
---
## Default Tab
{{ NgDocActions.demo('flowbiteDefaultComponent', {container: false}) }}
```angular-html file="./_default.component.html" group="default" name="html"
```
```angular-ts file="./_default.component.ts" group="default" name="typescript"
```
{% import "../../shared/theme-macro.md" as themeMacro %}
{{ themeMacro.display(NgDocPage.data.themes) }}
================================================
FILE: apps/docs/docs/components/tab/ng-doc.page.ts
================================================
import type { DocThemes } from '../../doc-theme.model';
import { toIndentedJson } from '../../doc-theme.model';
import ComponentCategory from '../ng-doc.category';
import { FlowbiteDefaultComponent } from './_default.component';
import {
flowbiteTabButtonTheme,
flowbiteTabContentTheme,
flowbiteTabListTheme,
flowbiteTabTheme,
} from 'flowbite-angular/tab';
import type { NgDocPage } from '@ng-doc/core';
/**
*
*/
const Tab: NgDocPage = {
title: 'Tab',
mdFile: './index.md',
category: ComponentCategory,
demos: {
flowbiteDefaultComponent: FlowbiteDefaultComponent,
},
data: {
themes: [
{ title: 'Tab button', content: toIndentedJson(flowbiteTabButtonTheme) },
{ title: 'Tab content', content: toIndentedJson(flowbiteTabContentTheme) },
{ title: 'Tab list', content: toIndentedJson(flowbiteTabListTheme) },
{ title: 'Tab', content: toIndentedJson(flowbiteTabTheme) },
] satisfies DocThemes,
},
};
export default Tab;
================================================
FILE: apps/docs/docs/components/table/_default.component.html
================================================
<table
flowbiteTable
[tableHead]="tableHeader"
[tableBody]="tableBody"
[tableFoot]="tableFooter"
[data]="data">
<ng-template #tableHeader>
<tr flowbiteTableHead>
<th
scope="col"
class="rounded-s-lg px-6 py-3">
Product name
</th>
<th
scope="col"
class="px-6 py-3">
Qty
</th>
<th
scope="col"
class="rounded-e-lg px-6 py-3">
Price
</th>
</tr>
</ng-template>
<ng-template
#tableBody
let-data>
<tr flowbiteTableBody>
<td
scope="row"
class="px-6 py-4">
{{ data.name }}
</td>
<td class="px-6 py-4">
{{ data.qty }}
</td>
<td class="px-6 py-4">
{{ data.price }}
</td>
</tr>
</ng-template>
<ng-template #tableFooter>
<tr flowbiteTableFoot>
<td
scope="row"
class="px-6 py-4">
Total
</td>
<td class="px-6 py-4">10</td>
<td class="px-6 py-4">30</td>
</tr>
</ng-template>
</table>
================================================
FILE: apps/docs/docs/components/table/_default.component.ts
================================================
import { Table, TableBody, TableFoot, TableHead } from 'flowbite-angular/table';
import { Component } from '@angular/core';
@Component({
imports: [Table, TableBody, TableFoot, TableHead],
templateUrl: './_default.component.html',
host: {
class: 'flex flex-wrap flex-row gap-3 p-6',
},
})
export class FlowbiteDefaultComponent {
readonly data = Array.from({ length: 5 }, (_, i) => i++).map((x) => ({
name: `Product ${x}`,
qty: x,
price: x * x,
}));
}
================================================
FILE: apps/docs/docs/components/table/index.md
================================================
---
keyword: TablePage
---
## Default Table
{{ NgDocActions.demo('flowbiteDefaultComponent', {container: false}) }}
```angular-html file="./_default.component.html" group="default" name="html"
```
```angular-ts file="./_default.component.ts" group="default" name="typescript"
```
{% import "../../shared/theme-macro.md" as themeMacro %}
{{ themeMacro.display(NgDocPage.data.themes) }}
================================================
FILE: apps/docs/docs/components/table/ng-doc.page.ts
================================================
import type { DocThemes } from '../../doc-theme.model';
import { toIndentedJson } from '../../doc-theme.model';
import ComponentCategory from '../ng-doc.category';
import { FlowbiteDefaultComponent } from './_default.component';
import {
flowbiteTableBodyTheme,
flowbiteTableFootTheme,
flowbiteTableHeadTheme,
flowbiteTableTheme,
} from 'flowbite-angular/table';
import type { NgDocPage } from '@ng-doc/core';
/**
*
*/
const Table: NgDocPage = {
title: 'Table',
mdFile: './index.md',
category: ComponentCategory,
demos: {
flowbiteDefaultComponent: FlowbiteDefaultComponent,
},
data: {
themes: [
{ title: 'Table', content: toIndentedJson(flowbiteTableTheme) },
{ title: 'Table Head', content: toIndentedJson(flowbiteTableHeadTheme) },
{ title: 'Table Body', content: toIndentedJson(flowbiteTableBodyTheme) },
{ title: 'Table Foot', content: toIndentedJson(flowbiteTableFootTheme) },
] satisfies DocThemes,
},
};
export default Table;
================================================
FILE: apps/docs/docs/components/tooltip/_default.component.html
================================================
<div #container>
<button
flowbiteButton
[ngpTooltipTrigger]="tooltip"
[ngpTooltipTriggerContainer]="container">
tooltip
</button>
<ng-template #tooltip>
<div flowbiteTooltip>Tooltip content</div>
</ng-template>
</div>
================================================
FILE: apps/docs/docs/components/tooltip/_default.component.ts
================================================
import { Button } from 'flowbite-angular/button';
import { Tooltip } from 'flowbite-angular/tooltip';
import { Component, ElementRef, inject } from '@angular/core';
import { NgpTooltipTrigger } from 'ng-primitives/tooltip';
@Component({
imports: [Button, NgpTooltipTrigger, Tooltip],
templateUrl: './_default.component.html',
host: {
class: 'flex flex-wrap flex-row gap-3 p-6',
},
})
export class FlowbiteDefaultComponent {
readonly elementRef = inject(ElementRef);
}
================================================
FILE: apps/docs/docs/components/tooltip/index.md
================================================
---
keyword: TooltipPage
---
## Default Tooltip
{{ NgDocActions.demo('flowbiteDefaultComponent', {container: false}) }}
```angular-html file="./_default.component.html" group="default" name="html"
```
```angular-ts file="./_default.component.ts" group="default" name="typescript"
```
{% import "../../shared/theme-macro.md" as themeMacro %}
{{ themeMacro.display(NgDocPage.data.themes) }}
================================================
FILE: apps/docs/docs/components/tooltip/ng-doc.page.ts
================================================
import type { DocThemes } from '../../doc-theme.model';
import { toIndentedJson } from '../../doc-theme.model';
import ComponentCategory from '../ng-doc.category';
import { FlowbiteDefaultComponent } from './_default.component';
import { flowbiteTooltipTheme } from 'flowbite-angular/tooltip';
import type { NgDocPage } from '@ng-doc/core';
/**
*
*/
const Tooltip: NgDocPage = {
title: 'Tooltip',
mdFile: './index.md',
category: ComponentCategory,
demos: {
flowbiteDefaultComponent: FlowbiteDefaultComponent,
},
data: {
themes: [
{ title: 'Tooltip', content: toIndentedJson(flowbiteTooltipTheme) },
] satisfies DocThemes,
},
};
export default Tooltip;
================================================
FILE: apps/docs/docs/customize/dark-mode/index.md
================================================
---
keyword: DarkModePage
---
## Enable dark mode
All you need to do is add `Theme` as a `hostDirectives` in your `app.component.ts`.
```angular-ts
...
import { Theme } from 'flowbite-angular/theme-toggle';
...
@Component({
...
hostDirectives: [Theme],
})
export class AppComponent {
...
}
```
The Tailwind configuration depends on the `type` of `Theme`. In `Theme`, you can change its
behavior.
Here is an example configuration to make it rely on data attributes:
```angular-ts
provideFlowbiteThemeConfig({
type: { type: 'attr', name: 'data-theme' },
}),
```
```css
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
```
## Get or set theme manually
To access or update the application theme manually, inject `Theme` into your component and call one
of its helper functions.
================================================
FILE: apps/docs/docs/customize/dark-mode/ng-doc.page.ts
================================================
import CustomizeCategory from '../ng-doc.category';
import type { NgDocPage } from '@ng-doc/core';
/**
* Add dark theme to your application.
*/
const darkMode: NgDocPage = {
title: 'Dark mode',
mdFile: './index.md',
category: CustomizeCategory,
order: 6,
};
export default darkMode;
================================================
FILE: apps/docs/docs/customize/ng-doc.category.ts
================================================
import type { NgDocCategory } from '@ng-doc/core';
const CustomizeCategory: NgDocCategory = {
title: 'Customize',
order: 2,
expandable: true,
};
export default CustomizeCategory;
================================================
FILE: apps/docs/docs/customize/override-base-style/index.md
================================================
---
keyword: OverrideBaseStylePage
---
## Override base style
Each component provide its own configuration method. Configuration methods are named as follow :
<span class="text-xs md:text-base">
<ul class="list-none list-inside">
<li>
provideFlowbite<span class="text-primary-500">Component</span>Config
</li>
</ul>
</span>
You can use them to override the default behavior of components and the applied styles.
```typescript
import { provideFlowbiteBaseButtonConfig } from 'flowbite-angular/button';
import { type ApplicationConfig } from '@angular/core';
export const appConfig: ApplicationConfig = {
providers: [
provideFlowbiteBaseButtonConfig({
color: 'primary',
outline: true,
pill: false,
size: 'lg',
}),
],
};
```
================================================
FILE: apps/docs/docs/customize/override-base-style/ng-doc.page.ts
================================================
import CustomizeCategory from '../ng-doc.category';
import type { NgDocPage } from '@ng-doc/core';
/**
* Customize Flowbite Angular components by overriding their default styles.
*/
const OverrideBaseStyle: NgDocPage = {
title: 'Override base style',
mdFile: './index.md',
category: CustomizeCategory,
order: 2,
};
export default OverrideBaseStyle;
================================================
FILE: apps/docs/docs/customize/theming/index.md
================================================
---
keyword: ThemingPage
---
You can use the theme directive from tailwind to define any style related classes, such as the color
palette, fonts, breakpoints, and more.
Here is the `primary` color theme used for this documentation :
```css
@theme {
/* Primary */
--color-primary-50: #fff0f1;
--color-primary-100: #ffe1e4;
--color-primary-200: #ffc8cf;
--color-primary-300: #ff9ba8;
--color-primary-400: #ff637b;
--color-primary-500: #ff2c51;
--color-primary-600: #f6083b;
--color-primary-700: #c3002f;
--color-primary-800: #ae0331;
--color-primary-900: #940732;
--color-primary-950: #5b041e;
}
```
## Theme structure
Some of the more widely used <span class="docs highlight">theme</span> keys are
<span class="docs highlight">screens</span>, <span class="docs highlight">colors</span>, and
<span class="docs highlight">spacing</span> as one of the core utility classes.
You can read all of the `TailwindConfigurableKeys`.
### Colors
Use the <span class="docs highlight">colors</span> key to update the color palette.
```css
@theme {
/* Primary */
--color-primary-50: #fff0f1;
--color-primary-100: #ffe1e4;
--color-primary-200: #ffc8cf;
--color-primary-300: #ff9ba8;
--color-primary-400: #ff637b;
--color-primary-500: #ff2c51;
--color-primary-600: #f6083b;
--color-primary-700: #c3002f;
--color-primary-800: #ae0331;
--color-primary-900: #940732;
--color-primary-950: #5b041e;
}
```
### Fonts
You can change de default font used by tailwind.
```css
@font-face {
font-family: roboto;
src: url('../../fonts/roboto.ttf') format('truetype');
}
@theme {
--default-font-family: 'roboto';
}
```
## Customizing the theme
By default, the configuration file will set the base utility classes from TailwindCSS. However, you
can customize them by using the extends object.
### Overriding
Alternatively, you can also completely override some settings.
For example, the following code will override <span class="docs highlight">blue color palette</span>
by your own.
```css
@theme {
/* Blue */
--color-blue-50: #ebf5ff;
--color-blue-100: #e1effe;
--color-blue-200: #c3ddfd;
--color-blue-300: #a4cafe;
--color-blue-400: #76a9fa;
--color-blue-500: #3f83f8;
--color-blue-600: #1c64f2;
--color-blue-700: #1a56db;
--color-blue-800: #1e429f;
--color-blue-900: #233876;
}
```
Please read the official `TailwindThemingDocumentation` if you want a full overview of the theming
options.
================================================
FILE: apps/docs/docs/customize/theming/ng-doc.page.ts
================================================
import CustomizeCategory from '../ng-doc.category';
import type { NgDocPage } from '@ng-doc/core';
/**
* Use the theming options from the TailwindCSS configuration file to override the default utility classes from Flowbite Angular and change colors, fonts, and the default class values.
*/
const Theming: NgDocPage = {
title: 'Theming',
mdFile: './index.md',
category: CustomizeCategory,
order: 1,
};
export default Theming;
================================================
FILE: apps/docs/docs/customize/use-custom-style/index.md
================================================
---
keyword: UseCustomStylePage
---
## Passing customTheme values
For each component call, you can pass a <span class="text-primary-500">customTheme</span> value.
```angular-html
<div flowbiteAlert [customTheme]="{ root: { base: 'bg-black' } }">
Hello World!
</div>
```
You can then pass TailwindCSS classes, following the component's base theme. If one or more keys are
not filled in the customTheme, the component falls back to its base styles.
================================================
FILE: apps/docs/docs/customize/use-custom-style/ng-doc.page.ts
================================================
import CustomizeCategory from '../ng-doc.category';
import type { NgDocPage } from '@ng-doc/core';
/**
* Customize flowbite-angular's component style by providing a custom style per component.
*/
const UseCustomStyle: NgDocPage = {
title: 'Use custom style',
mdFile: './index.md',
category: CustomizeCategory,
order: 4,
};
export default UseCustomStyle;
================================================
FILE: apps/docs/docs/doc-theme.model.ts
================================================
export type DocTheme = { title: string; content: string; description?: string | undefined };
export type DocThemes = DocTheme[];
export const toIndentedJson = (
value: unknown,
replacer?: (this: unknown, key: string, value: unknown) => unknown,
space: number = 2
): string => JSON.stringify(value, replacer, space);
================================================
FILE: apps/docs/docs/getting-started/introduction/index.md
================================================
---
keyword: IntroductionPage
---
## Introduction
Flowbite Angular is an open-source library of UI components based on the utility-first Tailwind CSS
framework featuring dark mode support, a Figma design system, templates, and more.
It includes all of the commonly used components that a website requires, such as buttons, dropdowns,
navigator bars, modals, but also some more advanced interactives elements such as date pickers
All of the elements are build using the utility classes from Tailwind CSS and vanilla Angular.
<iframe
class="aspect-video w-full rounded-2xl"
src="https://www.youtube.com/embed/KaLxCiilHns?si=VHnkdv1DtrPsMmWQ"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen></iframe>
## Installing from scratch
### Prerequistes
If you want to get started with flowbite-angular :
```bash
ng new my-angular-project
npm install flowbite-angular
```
## Typescript
Flowbite Angular support type declaration for the interactive IO components including object
interfaces and parameter types. Check out the following examples to learn how you can use types with
Flowbite Angular.
You can view more examples by browsing the **components from Flowbite Angular**.
================================================
FILE: apps/docs/docs/getting-started/introduction/ng-doc.page.ts
================================================
import GettingStartedCategory from '../ng-doc.category';
import type { NgDocPage } from '@ng-doc/core';
/**
* Get started with the most popular open-source library of interactive UI components built with the utility classes from Tailwind CSS
*/
const Introduction: NgDocPage = {
title: 'Introduction',
mdFile: './index.md',
category: GettingStartedCategory,
order: 1,
};
export default Introduction;
================================================
FILE: apps/docs/docs/getting-started/license/index.md
================================================
---
keyword: LicensePage
---
## Copyright
The Flowbite Angular name and logos are trademarks of Bergside Inc.
## Release code
The released code is licensed under the `MITLicense`.
Copyright (c) Themesberg (Bergside Inc.)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
associated documentation files (the “Software”), to deal in the Software without restriction,
including without limitation the rights to use, copy, modify, merge, publish, distribute,
sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial
portions of the Software.
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT
NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES
OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
## Documentation
The docs code is licensed under the `CreativeCommons`.
Attribution: the documentation code was initially forked from `Bootstrap` created by the
`BootstrapAuthors` and `Twitter`. and changes have been made since then to adapt to the Tailwind CSS
and Flowbite ecosystem and technologies.
================================================
FILE: apps/docs/docs/getting-started/license/ng-doc.page.ts
================================================
import GettingStartedCategory from '../ng-doc.category';
import type { NgDocPage } from '@ng-doc/core';
/**
* Learn more about the licensing terms for Flowbite-angular and Tailwind CSS
*/
const License: NgDocPage = {
title: 'License',
mdFile: './index.md',
category: GettingStartedCategory,
order: 3,
};
export default License;
================================================
FILE: apps/docs/docs/getting-started/ng-doc.category.ts
================================================
import type { NgDocCategory } from '@ng-doc/core';
const GettingStartedCategory: NgDocCategory = {
title: 'Getting started',
order: 1,
expandable: true,
};
export default GettingStartedCategory;
================================================
FILE: apps/docs/docs/getting-started/ng-primitives/index.md
================================================
---
keyword: NgPrimitivesPage
---
## What's angular primitives
Angular Primitives is a low-level headless UI component library with a focus on accessibility,
customization, and developer experience. Whether you're building a robust design system from scratch
or looking to enhance your existing one, our primitives are here to support you every step of the
way.
## Special thanks
We're using `NgPrimitivesDocumentation` to provide accessibility and behavior base so
flowbite-angular can be on design part. We want to address a special thanks to the maintainer of
ng-primitives which has provided a packages called
<span class="text-primary-500">@ng-primitives/state</span> providing a clean way to have state
management inside components.
================================================
FILE: apps/docs/docs/getting-started/ng-primitives/ng-doc.page.ts
================================================
import GettingStartedCategory from '../ng-doc.category';
import type { NgDocPage } from '@ng-doc/core';
/**
* Special thanks to ng-primitives
*/
const NgPrimitives: NgDocPage = {
title: 'Ng Primitives',
mdFile: 'index.md',
category: GettingStartedCategory,
order: 4,
};
export default NgPrimitives;
================================================
FILE: apps/docs/docs/getting-started/quickstart/index.md
================================================
---
keyword: QuickstartPage
---
## Introduction
Flowbite Angular can easily be integrated into your project using NPM. It functions as a common
Angular library.
## Require via NPM
Make sure that TailwindCSS is installed.
```bash
npm install tailwindcss @tailwindcss/postcss postcss
```
Install Flowbite as a dependency using NPM by running this command:
```bash
npm install flowbite-angular ng-primitives @ng-icons/core
```
## TailwindCSS configuration
Make sure to use the flowbite-angular configuration preset in your styles.css
> **Note** If your `node_modules` folder is located above the parent directory (e.g., in a monorepo
> setup), you may need to adjust the path with additional `../` to correctly reference it, such as
> `@source "../../../node_modules/flowbite-angular";`.
```css
@import 'tailwindcss';
@source "../node_modules/flowbite-angular";
```
> **Note** If you want a working `primary` color definition, see `*ThemingPage` page
## PostCSS configuration
Create a `postcss.config.json` file in the root of your project and add the `@tailwindcss/postcss`
plugin to your PostCSS configuration.
```json
{
"plugins": {
"@tailwindcss/postcss": {}
}
}
```
================================================
FILE: apps/docs/docs/getting-started/quickstart/ng-doc.page.ts
================================================
import GettingStartedCategory from '../ng-doc.category';
import type { NgDocPage } from '@ng-doc/core';
/**
* Get started with flowbite-angular by including it into your project using NPM
*/
const Quickstart: NgDocPage = {
title: 'Quickstart',
mdFile: 'index.md',
category: GettingStartedCategory,
order: 2,
};
export default Quickstart;
================================================
FILE: apps/docs/docs/ng-doc.api.ts
================================================
import type { NgDocApi } from '@ng-doc/core';
const api: NgDocApi = {
title: 'API Reference',
order: 999,
scopes: [
{
name: 'core',
route: 'core',
include: 'libs/flowbite-angular/core/src/index.ts',
},
{
name: 'components',
route: 'components',
include: [
'libs/flowbite-angular/accordion/src/index.ts',
'libs/flowbite-angular/alert/src/index.ts',
'libs/flowbite-angular/badge/src/index.ts',
'libs/flowbite-angular/breadcrumb/src/index.ts',
'libs/flowbite-angular/button/src/index.ts',
'libs/flowbite-angular/button-group/src/index.ts',
'libs/flowbite-angular/card/src/index.ts',
'libs/flowbite-angular/clipboard/src/index.ts',
'libs/flowbite-angular/dropdown/src/index.ts',
'libs/flowbite-angular/form/src/index.ts',
'libs/flowbite-angular/icon/src/index.ts',
'libs/flowbite-angular/indicator/src/index.ts',
'libs/flowbite-angular/modal/src/index.ts',
'libs/flowbite-angular/navbar/src/index.ts',
'libs/flowbite-angular/pagination/src/index.ts',
'libs/flowbite-angular/sidebar/src/index.ts',
'libs/flowbite-angular/tab/src/index.ts',
'libs/flowbite-angular/theme-toggle/src/index.ts',
'libs/flowbite-angular/table/src/index.ts',
'libs/flowbite-angular/tooltip/src/index.ts',
],
},
],
};
export default api;
================================================
FILE: apps/docs/docs/shared/theme-macro.md
================================================
{% macro display(themes) %}
<div class="border-t border-gray-300 dark:border-gray-600 my-4"></div>
# Themes
{% for theme in themes %}
## {{ theme.title }}
{% if theme.description %}
<!-- prettier-ignore -->
> **Note**
> {{ theme.description }}
{% endif %}
<!-- prettier-ignore -->
```typescript
{{ theme.content }}
```
{% endfor %} {% endmacro %}
================================================
FILE: apps/docs/ng-doc.config.ts
================================================
import type { NgDocConfiguration } from '@ng-doc/builder';
import { ngKeywordsLoader, rxjsKeywordsLoader } from '@ng-doc/keywords-loaders';
const config: NgDocConfiguration = {
cache: false,
routePrefix: 'docs',
docsPath: 'apps/docs/docs',
outDir: 'tmp/apps/docs',
tsConfig: 'apps/docs/tsconfig.app.json',
guide: {
anchorHeadings: ['h1', 'h2', 'h3', 'h4'],
headerTemplate: 'apps/docs/src/app/shared/header-template.html',
},
repoConfig: {
url: 'https://github.com/themesberg/flowbite-angular',
mainBranch: 'main',
releaseBranch: 'release',
},
shiki: {
themes: {
light: 'material-theme-lighter',
dark: 'material-theme',
},
},
keywords: {
keywords: {
MITLicense: {
title: 'MIT License',
url: 'https://github.com/themesberg/flowbite-angular/blob/main/README.md',
},
CreativeCommons: {
title: 'CC BY 3.0',
url: 'https://creativecommons.org/licenses/by/3.0',
},
Bootstrap: {
title: 'Bootstrap',
url: 'https://github.com/twbs/bootstrap',
},
BootstrapAuthors: {
title: 'Bootstrap authors',
url: 'https://github.com/twbs/bootstrap/graphs/contributors',
},
Twitter: {
title: 'Twitter Inc',
url: 'https://twitter.com',
},
TailwindConfigurableKeys: {
title: 'configurable keys on Tailwind CSS',
url: 'https://tailwindcss.com/docs/theme#configuration-reference',
},
TailwindThemingDocumentation: {
title: 'Tailwind CSS Theming documentation',
url: 'https://tailwindcss.com/docs/theme',
},
NgPrimitivesDocumentation: {
title: 'ng-primitives',
url: 'https://angularprimitives.com',
},
},
loaders: [ngKeywordsLoader(), rxjsKeywordsLoader()],
},
};
export default config;
================================================
FILE: apps/docs/postcss.config.json
================================================
{
"plugins": {
"@tailwindcss/postcss": {}
}
}
================================================
FILE: apps/docs/project.json
================================================
{
"name": "docs",
"$schema": "../../node_modules/nx/schemas/project-schema.json",
"projectType": "application",
"sourceRoot": "apps/docs/src",
"prefix": "flowbite",
"tags": [],
"implicitDependencies": ["flowbite-angular"],
"targets": {
"build": {
"executor": "@ng-doc/builder:application",
"outputs": ["{options.outputPath.base}"],
"options": {
"outputPath": {
"base": "dist/docs-static"
},
"index": "apps/docs/src/index.html",
"polyfills": ["zone.js"],
"tsConfig": "apps/docs/tsconfig.app.json",
"inlineStyleLanguage": "css",
"assets": [
{
"glob": "**/*",
"input": "node_modules/@ng-doc/app/assets",
"output": "assets/ng-doc/app"
},
{
"glob": "**/*",
"input": "node_modules/@ng-doc/ui-kit/assets",
"output": "assets/ng-doc/ui-kit"
},
{
"glob": "**/*",
"input": "tmp/apps/docs/ng-doc/docs/assets",
"output": "assets/ng-doc"
},
{
"glob": "**/*",
"input": "apps/docs/public"
}
],
"styles": ["node_modules/@ng-doc/app/styles/global.css", "apps/docs/public/css/styles.css"],
"scripts": [],
"browser": "apps/docs/src/main.ts",
"server": "apps/docs/src/main.server.ts",
"prerender": true,
"allowedCommonJsDependencies": ["@ng-doc/core"]
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb"
}
],
"fileReplacements": [
{
"replace": "apps/docs/src/environments/environment.ts",
"with": "apps/docs/src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"development": {
"optimization": false,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"executor": "@ng-doc/builder:dev-server",
"configurations": {
"production": {
"buildTarget": "docs:build:production"
},
"development": {
"buildTarget": "docs:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"executor": "@angular-devkit/build-angular:extract-i18n",
"options": {
"buildTarget": "docs:build"
}
},
"lint": {
"executor": "@nx/eslint:lint"
}
}
}
================================================
FILE: apps/docs/public/.gitkeep
================================================
================================================
FILE: apps/docs/public/css/ng-doc/base.css
================================================
:root {
--ng-doc-font-system: 'roboto';
--ng-doc-primary: #ff2c51;
--ng-doc-base-0: #ffffff;
--ng-doc-base-1: var(--color-primary-50);
--ng-doc-base-2: var(--color-primary-100);
--ng-doc-base-3: #fdd6da;
--ng-doc-base-4: var(--color-primary-200);
--ng-doc-base-5: #fcaab6;
--ng-doc-base-6: var(--color-primary-300);
--ng-doc-base-7: #fb8192;
--ng-doc-base-8: var(--color-primary-400);
--ng-doc-base-9: #f9506a;
--ng-doc-base-10: var(--color-primary-500);
--ng-doc-background: var(--color-white);
--ng-doc-sidebar-background: var(--color-white);
--ng-doc-heading-color: #000000;
--ng-doc-text: #000000;
--ng-doc-border-color: var(--color-gray-200);
--ng-doc-tab-group-tabs-background: #f9fafb;
--ng-doc-code-background: #f9fafb;
--ng-doc-text-selection: rgba(255, 44, 81, 0.15);
}
:root[data-theme='dark'] {
--ng-doc-base-0: #0e0a0c;
--ng-doc-base-1: var(--color-primary-950);
--ng-doc-base-2: #66061e;
--ng-doc-base-3: var(--color-primary-900);
--ng-doc-base-4: #9e0c34;
--ng-doc-base-5: var(--color-primary-800);
--ng-doc-base-6: #b90f3b;
--ng-doc-base-7: var(--color-primary-700);
--ng-doc-base-8: #d91f3b;
--ng-doc-base-9: var(--color-primary-600);
--ng-doc-base-10: var(--color-primary-500);
--ng-doc-background: var(--color-gray-900);
--ng-doc-sidebar-background: var(--color-gray-900);
--ng-doc-heading-color: #ffffff;
--ng-doc-text: #ffffff;
--ng-doc-border-color: var(--color-gray-700);
--ng-doc-tab-group-tabs-background: #1e1e1e;
--ng-doc-code-background: #1e1e1e;
--ng-doc-text-selection: rgba(255, 44, 81, 0.25);
}
:root[data-theme='dark'] .shiki,
:root[data-theme='dark'] .shiki span {
color: var(--shiki-dark) !important;
}
ng-doc-tabs {
border-radius: 0px !important;
margin-top: 0px !important;
}
ng-doc-tab-group {
border-radius: 0px !important;
}
================================================
FILE: apps/docs/public/css/styles.css
================================================
@import 'tailwindcss';
@source "../../../../libs/flowbite-angular";
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
@import './tw/fonts.css';
@theme {
/* Colors */
/* Primary */
--color-primary-50: #fff0f1;
--color-primary-100: #ffe1e4;
--color-primary-200: #ffc8cf;
--color-primary-300: #ff9ba8;
--color-primary-400: #ff637b;
--color-primary-500: #ff2c51;
--color-primary-600: #f6083b;
--color-primary-700: #c3002f;
--color-primary-800: #ae0331;
--color-primary-900: #940732;
--color-primary-950: #5b041e;
}
@import './ng-doc/base.css';
================================================
FILE: apps/docs/public/css/tw/fonts.css
================================================
@font-face {
font-family: roboto;
src: url('../../fonts/roboto.ttf') format('truetype');
}
@theme {
--default-font-family: 'roboto';
}
================================================
FILE: apps/docs/server.ts
================================================
import bootstrap from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';
import { CommonEngine } from '@angular/ssr/node';
import express from 'express';
import { dirname, join, resolve } from 'node:path';
import { fileURLToPath } from 'node:url';
// The Express app is exported so that it can be used by serverless Functions.
export function app(): express.Express {
const server = express();
const serverDistFolder = dirname(fileURLToPath(import.meta.url));
const browserDistFolder = resolve(serverDistFolder, '../browser');
const indexHtml = join(serverDistFolder, 'index.server.html');
const commonEngine = new CommonEngine();
server.set('view engine', 'html');
server.set('views', browserDistFolder);
// Example Express Rest API endpoints
// server.get('/api/**', (req, res) => { });
// Serve static files from /browser
server.get(
'**',
express.static(browserDistFolder, {
maxAge: '1y',
index: 'index.html',
})
);
// All regular routes use the Angular engine
server.get('**', (req, res, next) => {
const { protocol, originalUrl, baseUrl, headers } = req;
commonEngine
.render({
bootstrap,
documentFilePath: indexHtml,
url: `${protocol}://${headers.host}${originalUrl}`,
publicPath: browserDistFolder,
providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
})
.then((html) => res.send(html))
.catch((err) => next(err));
});
return server;
}
function run(): void {
const port = process.env['PORT'] || 4000;
// Start up the Node server
const server = app();
server.listen(port, () => {
console.log(`Node Express server listening on http://localhost:${port}`);
});
}
run();
================================================
FILE: apps/docs/src/app/app.component.html
================================================
<ng-doc-root
[sidebar]="!isLandingPage"
[noWidthLimit]="isLandingPage"
[footerContent]="footerContent">
<nav
flowbiteNavbar
ngDocCustomNavbar
fixed
color="primary">
<div class="flex flex-1 flex-row items-center gap-2">
@if (!isLandingPage) {
<button
flowbiteNavbarIconItem
class="inline-flex! lg:hidden!"
(click)="sidebarService.toggle()">
<span class="sr-only">Sidebar toggle</span>
<flowbite-icon
name="bars"
class="size-5 stroke-2" />
</button>
}
<a
flowbiteNavbarBrand
[routerLink]="['/']">
<img
src="favicon.svg"
class="h-8"
alt="Flowbite Logo" />
<span
class="hidden self-center text-2xl font-semibold whitespace-nowrap xl:block dark:text-white">
Flowbite Angular
</span>
</a>
<ng-doc-search class="hidden pl-2 lg:block" />
</div>
<div flowbiteNavbarContent>
<a
flowbiteNavbarItem
[routerLink]="['/docs']">
Docs
</a>
<a
flowbiteNavbarItem
[routerLink]="['/docs', 'getting-started', 'quickstart']">
Quickstart
</a>
<a
flowbiteNavbarItem
href="https://flowbite.com/figma"
target="_blank"
rel="noopener">
Figma
</a>
<a
flowbiteNavbarItem
href="https://flowbite.com"
target="_blank"
rel="noopener">
Flowbite
</a>
</div>
<div class="flex flex-row items-center justify-start">
<a
flowbiteNavbarIconItem
href="https://storybook.flowbite-angular.com"
target="_blank"
rel="noopener">
<flowbite-icon
name="storybook"
class="size-5 stroke-2" />
</a>
<a
flowbiteNavbarIconItem
href="https://github.com/themesberg/flowbite-angular"
target="_blank"
rel="noopener">
<flowbite-icon
name="github"
class="size-5 stroke-2" />
</a>
<a
flowbiteNavbarIconItem
href="https://discord.gg/4eeurUVvTy"
target="_blank"
rel="noopener">
<flowbite-icon
name="discord"
class="size-5 stroke-2" />
</a>
<a
flowbiteNavbarIconItem
href="https://www.youtube.com/channel/UC_Ms4V2kYDsh7F_CSsHyQ6A"
target="_blank"
rel="noopener">
<flowbite-icon
name="youtube"
class="size-5 stroke-2" />
</a>
<button
type="button"
flowbiteThemeToggle
color="primary">
<span class="sr-only">Theme toggle</span>
</button>
<button
type="button"
flowbiteNavbarToggle>
<span class="sr-only">Navbar toggle</span>
<flowbite-icon
name="bars"
class="size-5 stroke-2" />
</button>
<div class="px-1"></div>
<span
flowbiteBadge
size="sm"
color="primary">
{{ flowbiteAngularVersion() }}
</span>
</div>
</nav>
<ng-doc-sidebar class="mt-2" />
<div class="mt-2">
<router-outlet />
</div>
<ng-template #footerContent>
<section class="flex flex-col items-center">
<div class="flex flex-col items-center gap-6 px-4 py-6 md:gap-8 md:py-8">
<div class="flex flex-row items-center justify-between border-t-gray-200 pt-6 md:pt-8">
<div
class="mx-auto flex flex-col items-start justify-center gap-4 md:flex-row md:items-center md:gap-5">
<div class="flex flex-row items-center gap-3">
<img
src="favicon.svg"
class="h-8 w-8"
alt="Flowbite Logo" />
<span class="text-2xl font-semibold text-gray-900 dark:text-white"> Flowbite </span>
</div>
<p class="text-sm font-normal text-gray-500 dark:text-gray-400">
© 2019-{{ currentYear() }} Flowbite™ is a registered trademark. All Rights Reserved.
</p>
</div>
</div>
</div>
</section>
</ng-template>
</ng-doc-root>
================================================
FILE: apps/docs/src/app/app.component.ts
================================================
// Import with relative path since it's not in node_modules and we need to import package.json in order to get version
// eslint-disable-next-line @nx/enforce-module-boundaries
import flowbiteAngularPackageJson from '../../../../libs/flowbite-angular/package.json';
import { Badge } from 'flowbite-angular/badge';
import { Icon } from 'flowbite-angular/icon';
import { bars } from 'flowbite-angular/icon/outline/general';
import { discord, github, storybook, youtube } from 'flowbite-angular/icon/solid/brands';
import {
Navbar,
NavbarBrand,
NavbarContent,
NavbarIconItem,
NavbarItem,
NavbarToggle,
} from 'flowbite-angular/navbar';
import { Theme, ThemeToggle } from 'flowbite-angular/theme-toggle';
import { Location } from '@angular/common';
import { Component, computed, inject } from '@angular/core';
import { RouterLink, RouterOutlet } from '@angular/router';
import {
NgDocRootComponent,
NgDocSearchComponent,
NgDocSidebarComponent,
NgDocSidebarService,
} from '@ng-doc/app';
import { provideIcons } from '@ng-icons/core';
@Component({
providers: [provideIcons({ github, discord, youtube, bars, storybook })],
imports: [
RouterOutlet,
NgDocRootComponent,
NgDocSidebarComponent,
NgDocSearchComponent,
Navbar,
NavbarBrand,
NavbarContent,
NavbarIconItem,
NavbarItem,
NavbarToggle,
Badge,
ThemeToggle,
RouterLink,
Icon,
],
hostDirectives: [
{
directive: Theme,
},
],
selector: 'flowbite-root',
templateUrl: './app.component.html',
host: {
'[attr.data-ng-doc-is-landing]': 'isLandingPage',
},
})
export class AppComponent {
protected readonly sidebarService = inject(NgDocSidebarService);
protected readonly location = inject(Location);
get isLandingPage(): boolean {
return this.location.path() === '';
}
public readonly currentYear = computed(() => new Date().getFullYear());
public readonly flowbiteAngularVersion = computed(() => flowbiteAngularPackageJson.version);
}
================================================
FILE: apps/docs/src/app/app.config.server.ts
================================================
import { appConfig } from './app.config';
import type { ApplicationConfig } from '@angular/core';
import { mergeApplicationConfig } from '@angular/core';
import { provideServerRendering } from '@angular/ssr';
const serverConfig: ApplicationConfig = {
providers: [provideServerRendering()],
};
export const config = mergeApplicationConfig(appConfig, serverConfig);
================================================
FILE: apps/docs/src/app/app.config.ts
================================================
import { appRoutes } from './app.routes';
import { docDemoDisplayerProcessor } from './shared/processors/doc-demo-displayer-processor/doc-demo-displayer-processor';
import { provideFlowbiteThemeConfig } from 'flowbite-angular/theme-toggle';
import { provideHttpClient, withFetch, withInterceptorsFromDi } from '@angular/common/http';
import { provideZoneChangeDetection, type ApplicationConfig } from '@angular/core';
import { provideClientHydration } from '@angular/platform-browser';
import { provideRouter, withInMemoryScrolling } from '@angular/router';
import {
NG_DOC_DEFAULT_PAGE_PROCESSORS,
NG_DOC_DEFAULT_PAGE_SKELETON,
NgDocDefaultSearchEngine,
provideMainPageProcessor,
provideNgDocApp,
providePageProcessor,
providePageSkeleton,
provideSearchEngine,
} from '@ng-doc/app';
import { provideNgDocContext } from '@ng-doc/generated';
export const appConfig: ApplicationConfig = {
providers: [
// #region NgDoc
provideNgDocContext(),
provideNgDocApp({
shiki: {
themes: [
import('shiki/themes/material-theme.mjs'),
import('shiki/themes/material-theme-lighter.mjs'),
],
theme: {
light: 'material-theme-lighter',
dark: 'material-theme',
},
},
}),
provideSearchEngine(NgDocDefaultSearchEngine, { tolerance: 2 }),
providePageSkeleton(NG_DOC_DEFAULT_PAGE_SKELETON),
provideMainPageProcessor(NG_DOC_DEFAULT_PAGE_PROCESSORS),
providePageProcessor(docDemoDisplayerProcessor),
// #endregion
provideZoneChangeDetection(),
provideClientHydration(),
provideRouter(
appRoutes,
withInMemoryScrolling({ scrollPositionRestoration: 'enabled', anchorScrolling: 'enabled' })
),
provideHttpClient(withInterceptorsFromDi(), withFetch()),
provideFlowbiteThemeConfig({
type: { type: 'attr', name: 'data-theme' },
}),
],
};
================================================
FILE: apps/docs/src/app/app.routes.ts
================================================
import type { Routes } from '@angular/router';
export const appRoutes: Routes = [
{
path: '',
loadChildren: () => import('./pages/landing/landing.routes'),
},
{
path: 'docs',
loadChildren: () => import('./pages/docs/docs.routes'),
},
{
path: '**',
redirectTo: '',
pathMatch: 'full',
},
];
================================================
FILE: apps/docs/src/app/pages/docs/docs.component.css
================================================
================================================
FILE: apps/docs/src/app/pages/docs/docs.component.html
================================================
<router-outlet />
================================================
FILE: apps/docs/src/app/pages/docs/docs.component.ts
================================================
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
@Component({
selector: 'flowbite-docs',
imports: [RouterOutlet],
templateUrl: './docs.component.html',
styleUrl: './docs.component.css',
})
export class DocsComponent {}
================================================
FILE: apps/docs/src/app/pages/docs/docs.routes.ts
================================================
import { DocsComponent } from './docs.component';
import type { Routes } from '@angular/router';
import { NG_DOC_ROUTING } from '@ng-doc/generated';
export default [
{
path: '',
redirectTo: 'getting-started/introduction',
pathMatch: 'full',
},
{
path: 'getting-started',
redirectTo: 'getting-started/introduction',
pathMatch: 'full',
},
{
path: '',
component: DocsComponent,
children: NG_DOC_ROUTING,
},
] as Routes;
================================================
FILE: apps/docs/src/app/pages/landing/landing.component.html
================================================
<section class="flex flex-col items-center gap-2 px-4 md:px-4 xl:pt-16 xl:pb-24">
<div class="mx-auto flex max-w-screen-xl flex-col items-center gap-8 xl:gap-20">
<div class="flex flex-row items-start gap-4 xl:gap-16">
<div class="flex flex-col items-start xl:gap-10">
<div class="flex flex-col items-start gap-4 xl:gap-6">
<h1 class="text-4xl font-extrabold text-gray-900 xl:text-6xl dark:text-white">
Speed up your web development with
<span class="text-primary-700"> Flowbite Angular</span>
</h1>
<p class="text-lg leading-7 font-normal text-gray-500 xl:text-xl dark:text-gray-400">
Flowbite Angular is an official Flowbite component library for Angular. All
interactivities are handled by Angular.
</p>
</div>
<div class="flex w-full flex-row items-center gap-4 md:gap-6">
<div
flowbiteClipboard
id="npmInstall"
value="npm install flowbite-angular"></div>
<button
flowbiteButton
color="primary"
size="lg"
[routerLink]="['/docs', 'getting-started', 'quickstart']">
<span>Get started</span>
<flowbite-icon
name="arrowRight"
class="ml-2 size-5 stroke-2" />
</button>
</div>
</div>
<div class="hidden size-full xl:block">
<img
id="hero.content.content.right-content.light"
class="flex h-full w-full flex-col content-center rounded-lg dark:hidden"
src="images/angular-hero-mockup-light.png"
alt="angular hero mockup" />
<img
id="hero.content.content.right-content.dark"
class="hidden h-full w-full flex-col content-center rounded-lg dark:md:flex"
src="images/angular-hero-mockup-dark.png"
alt="angular hero mockup" />
</div>
</div>
</div>
</section>
<section class="flex flex-col items-center gap-2 border-gray-100 py-6 dark:border-gray-800">
<div class="mx-auto flex max-w-screen-xl flex-col items-center justify-center gap-4 px-4">
<p class="text-base leading-tight font-normal text-gray-400">Featured in:</p>
<div class="flex flex-col items-center gap-8 text-gray-500 md:flex-row">
<flowbite-icon
class="h-9 w-auto"
name="reddit" />
<flowbite-icon
class="h-9 w-auto"
name="dev" />
<flowbite-icon
class="h-9 w-auto"
name="productHunt" />
<flowbite-icon
class="h-9 w-auto"
name="combinator" />
<flowbite-icon
class="h-9 w-auto"
name="youtube" />
</div>
</div>
</section>
<section
class="flex flex-col items-center gap-12 border-gray-100 bg-gray-50 px-4 py-16 dark:border-gray-700 dark:bg-gray-800">
<div class="mx-auto flex max-w-screen-xl flex-col items-center gap-6 xl:flex-row xl:gap-16">
<div class="hidden size-full xl:block">
<img
class="block h-[530px] w-full rounded-lg shadow-md dark:hidden"
src="images/code-example-light.png"
alt="code example light" />
<img
class="hidden h-[530px] w-full rounded-lg shadow-md dark:block"
src="images/code-example-dark.png"
alt="code example dark" />
</div>
<div class="flex flex-col items-start gap-6 pt-1 xl:gap-8">
<div class="flex flex-col items-start gap-6 md:gap-4">
<h2 class="text-3xl leading-10 font-extrabold text-gray-900 xl:text-4xl dark:text-white">
UI components in Angular
</h2>
<p class="text-lg leading-7 font-normal text-gray-500 dark:text-gray-400">
<span class="dark:text-gray-400-underline text-lg leading-7 font-normal text-gray-500">
Flowbite budget
</span>
is a mobile app that helps users easily track their expenses and create a budget.
</p>
<p class="text-lg leading-7 font-normal text-gray-500 dark:text-gray-400">
With a user-friendly interface, the app allows users to quickly input their income and
expenses, and then automatically categorizes them for easy tracking.
</p>
</div>
<div class="flex w-full flex-col items-start border-t border-t-gray-200">
<div class="flex flex-col items-start gap-4 pt-8">
<div class="flex flex-row items-center gap-2">
<flowbite-icon
class="bg-primary-100 text-primary-700 block h-4 w-4 rounded-[50px] dark:bg-gray-700"
name="check" />
<div class="flex flex-col items-start gap-1">
<p class="text-base leading-6 font-medium text-gray-900 dark:text-white">
Dynamic reports and dashboards
</p>
</div>
</div>
<div class="flex flex-row items-center gap-2">
<flowbite-icon
class="bg-primary-100 text-primary-700 block h-4 w-4 rounded-[50px] dark:bg-gray-700"
name="check" />
<div class="flex flex-col items-start gap-1">
<p class="text-base leading-6 font-medium text-gray-900 dark:text-white">
Templates for everyone
</p>
</div>
</div>
<div class="flex flex-row items-center gap-2">
<flowbite-icon
class="bg-primary-100 text-primary-700 block h-4 w-4 rounded-[50px] dark:bg-gray-700"
name="check" />
<div class="flex flex-col items-start gap-1">
<p class="text-base leading-6 font-medium text-gray-900 dark:text-white">
Development workflow
</p>
</div>
</div>
<div class="flex flex-row items-center gap-2">
<flowbite-icon
class="bg-primary-100 text-primary-700 block h-4 w-4 rounded-[50px] dark:bg-gray-700"
name="check" />
<div class="flex flex-col items-start gap-1">
<p class="text-base leading-6 font-medium text-gray-900 dark:text-white">
Limitless business automation
</p>
</div>
</div>
<div class="flex flex-row items-center gap-2">
<flowbite-icon
class="bg-primary-100 text-primary-700 block h-4 w-4 rounded-[50px] dark:bg-gray-700"
name="check" />
<div class="flex flex-col items-start gap-1">
<p class="text-base leading-6 font-medium text-gray-900 dark:text-white">
Knowledge management
</p>
</div>
</div>
</div>
</div>
<div class="flex flex-row items-start gap-4">
<button
flowbiteButton
[routerLink]="['/docs', 'getting-started', 'quickstart']"
color="primary"
size="lg">
<span>Start building</span>
<flowbite-icon
name="arrowRight"
class="ml-2 size-5 stroke-2" />
</button>
<button
flowbiteButton
[routerLink]="['/docs', 'getting-started', 'quickstart']"
color="default"
size="lg">
<span>Get a demo</span>
<flowbite-icon
name="arrowRight"
class="ml-2 size-5 stroke-2" />
</button>
</div>
</div>
</div>
<div class="mx-auto flex max-w-screen-xl flex-col items-center gap-6 xl:flex-row xl:gap-16">
<div class="flex flex-col items-start gap-6 xl:gap-8">
<div class="flex flex-row items-start justify-center gap-8">
<div class="flex flex-col items-center gap-2">
<button
flowbiteButton
color="primary"
size="lg"
(click)="setTheme('light')">
<flowbite-icon
name="sun"
class="size-5 stroke-2" />
</button>
<span class="text-base leading-6 font-medium text-gray-900 dark:text-white">Light</span>
</div>
<div class="flex flex-col items-center gap-2">
<button
flowbiteButton
color="default"
size="lg"
(click)="setTheme('dark')">
<flowbite-icon
name="moon"
class="size-5 stroke-2" />
</button>
<span class="text-base leading-6 font-medium text-gray-900 dark:text-white">Dark</span>
</div>
</div>
<div class="flex flex-col items-start gap-4">
<h2 class="text-3xl leading-10 font-extrabold text-gray-900 xl:text-4xl dark:text-white">
Dark mode integration
</h2>
<p class="text-lg leading-7 font-normal text-gray-500 dark:text-gray-400">
Dark mode is a popular feature that is being offered by many applications, operating
systems, and websites in recent years.
<br /><br />
It changes the color scheme of the user interface from a light background with dark text
to a dark background with light text, providing a new and sleek look that many users find
appealing.
</p>
</div>
<div class="flex w-full flex-col items-start border-t border-t-gray-200">
<div class="flex flex-col items-start gap-4 border-t-gray-200 pt-8">
<div class="flex flex-row items-center gap-2">
<flowbite-icon
class="bg-primary-100 text-primary-700 block h-4 w-4 rounded-[50px] dark:bg-gray-700"
name="eye" />
<div class="flex flex-col items-start gap-1">
<p class="text-base leading-6 font-medium text-gray-900 dark:text-white">
Reduce eye strain
</p>
</div>
</div>
<div class="flex flex-row items-center gap-2">
<flowbite-icon
class="bg-primary-100 text-primary-700 block h-4 w-4 rounded-[50px] dark:bg-gray-700"
name="eye" />
<div class="flex flex-col items-start gap-1">
<p class="text-base leading-6 font-medium text-gray-900 dark:text-white">
Better visibility in low light conditions
</p>
</div>
</div>
<div class="flex flex-row items-center gap-2">
<flowbite-icon
class="bg-primary-100 text-primary-700 block h-4 w-4 rounded-[50px] dark:bg-gray-700"
name="eye" />
<div class="flex flex-col items-start gap-1">
<p class="text-base leading-6 font-medium text-gray-900 dark:text-white">
Accessibility
</p>
</div>
</div>
</div>
</div>
<div class="flex flex-row items-center gap-1">
<a
[routerLink]="['/docs', 'customize', 'dark-mode']"
class="text-primary-600 text-base leading-6 font-medium">
Learn how to integrate dark mode
</a>
<flowbite-icon
name="chevronRight"
class="size-3 stroke-2" />
</div>
</div>
<div class="hidden size-full xl:block">
<img
class="block h-[540px] w-full rounded-lg shadow-md dark:hidden"
src="images/angular-light-mode-thumbnail.png"
alt="thumbnail light" />
<img
class="hidden h-[540px] w-full rounded-lg shadow-md dark:block"
src="images/angular-dark-mode-thumbnail.png"
alt="thumbnail dark" />
</div>
</div>
<div class="mx-auto flex max-w-screen-xl flex-col items-center gap-6 xl:flex-row xl:gap-16">
<div class="hidden size-full xl:block">
<img
class="block h-[540px] w-full rounded-lg shadow-md dark:hidden"
src="images/works-with-tailwind-light.png"
alt="work with tailwind light" />
<img
class="hidden h-[540px] w-full rounded-lg shadow-md dark:block"
src="images/works-with-tailwind-dark.png"
alt="work with tailwind dark" />
</div>
<div class="flex flex-col items-start gap-6 xl:gap-8">
<div class="flex flex-col items-start gap-4">
<h2 class="text-3xl leading-10 font-extrabold text-gray-900 xl:text-4xl dark:text-white">
Work with Tailwind CSS
</h2>
<p class="text-lg leading-7 font-normal text-gray-500 dark:text-gray-400">
<span class="dark:text-gray-400-underline text-lg leading-7 font-normal text-gray-500">
Flowbite budget
</span>
is a mobile app that helps users easily track their expenses and create a budget.
</p>
<p class="text-lg leading-7 font-normal text-gray-500 dark:text-gray-400">
With a user-friendly interface, the app allows users to quickly input their income and
expenses, and then automatically categorizes them for easy tracking.
</p>
</div>
<div class="flex w-full flex-col items-start border-t border-t-gray-200">
<div class="flex flex-col items-start gap-4 pt-8">
<div class="flex flex-row items-center gap-2">
<flowbite-icon
class="bg-primary-100 text-primary-700 block h-4 w-4 rounded-[50px] dark:bg-gray-700"
name="check" />
<div class="flex flex-col items-start gap-1">
<p class="text-base leading-6 font-medium text-gray-900 dark:text-white">
Dynamic reports and dashboards
</p>
</div>
</div>
<div class="flex flex-row items-center gap-2">
<flowbite-icon
class="bg-primary-100 text-primary-700 block h-4 w-4 rounded-[50px] dark:bg-gray-700"
name="check" />
<div class="flex flex-col items-start gap-1">
<p class="text-base leading-6 font-medium text-gray-900 dark:text-white">
Templates for everyone
</p>
</div>
</div>
<div class="flex flex-row items-center gap-2">
<flowbite-icon
class="bg-primary-100 text-primary-700 block h-4 w-4 rounded-[50px] dark:bg-gray-700"
name="check" />
<div class="flex flex-col items-start gap-1">
<p class="text-base leading-6 font-medium text-gray-900 dark:text-white">
Development workflow
</p>
</div>
</div>
<div class="flex flex-row items-center gap-2">
<flowbite-icon
class="bg-primary-100 text-primary-700 block h-4 w-4 rounded-[50px] dark:bg-gray-700"
name="check" />
<div class="flex flex-col items-start gap-1">
<p class="text-base leading-6 font-medium text-gray-900 dark:text-white">
Limitless business automation
</p>
</div>
</div>
<div class="flex flex-row items-center gap-2">
<flowbite-icon
class="bg-primary-100 text-primary-700 block h-4 w-4 rounded-[50px] dark:bg-gray-700"
name="check" />
<div class="flex flex-col items-start gap-1">
<p class="text-base leading-6 font-medium text-gray-900 dark:text-white">
Knowledge management
</p>
</div>
</div>
</div>
</div>
<div class="flex flex-row items-start gap-4">
<button
flowbiteButton
[routerLink]="['/docs', 'getting-started', 'quickstart']"
color="primary"
size="lg">
<span>Start building</span>
<flowbite-icon
name="arrowRight"
class="ml-2 size-5 stroke-2" />
</button>
<button
flowbiteButton
[routerLink]="['/docs', 'getting-started', 'quickstart']"
color="default"
size="lg">
<span>Get a demo</span>
<flowbite-icon
name="arrowRight"
class="ml-2 size-5 stroke-2" />
</button>
</div>
</div>
</div>
</section>
================================================
FILE: apps/docs/src/app/pages/landing/landing.component.ts
================================================
import { Button } from 'flowbite-angular/button';
import { Clipboard } from 'flowbite-angular/clipboard';
import { Icon } from 'flowbite-angular/icon';
import { combinator, dev, productHunt, reddit, youtube } from 'flowbite-angular/icon/brand';
import { arrowRight, chevronRight } from 'flowbite-angular/icon/outline/arrows';
import { check, eye } from 'flowbite-angular/icon/outline/general';
import { moon, sun } from 'flowbite-angular/icon/outline/weather';
import { Component, inject } from '@angular/core';
import { RouterLink } from '@angular/router';
import { NgDocThemeService } from '@ng-doc/app/services/theme';
import { provideIcons } from '@ng-icons/core';
@Component({
selector: 'flowbite-landing',
providers: [
provideIcons({
arrowRight,
reddit,
dev,
productHunt,
combinator,
youtube,
sun,
moon,
check,
eye,
chevronRight,
}),
],
imports: [Button, Icon, Clipboard, RouterLink],
templateUrl: './landing.component.html',
})
export class LandingComponent {
protected readonly themeService = inject(NgDocThemeService);
public setTheme(id: 'light' | 'dark'): void {
this.themeService.set(id);
}
}
================================================
FILE: apps/docs/src/app/pages/landing/landing.routes.ts
================================================
import { LandingComponent } from './landing.component';
import type { Routes } from '@angular/router';
export default [
{
path: '',
component: LandingComponent,
},
] as Routes;
================================================
FILE: apps/docs/src/app/shared/components/flowbite-doc-demo-displayer/flowbite-doc-demo-displayer.component.ts
================================================
import { Button } from 'flowbite-angular/button';
import { Icon } from 'flowbite-angular/icon';
import { desktopPc, mobilePhone, tablet } from 'flowbite-angular/icon/outline/general';
import { moon, sun } from 'flowbite-angular/icon/outline/weather';
import { github } from 'flowbite-angular/icon/solid/brands';
import { Component, signal } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
@Component({
selector: 'flowbite-doc-demo',
imports: [Button, Icon],
providers: [provideIcons({ github, desktopPc, tablet, mobilePhone, sun, moon })],
template: `
<div class="flex grow flex-col rounded-t-xl border border-gray-200 dark:border-gray-700">
<div
class="flex flex-row items-center justify-between rounded-t-xl border-b border-b-gray-200 bg-gray-50 p-6 dark:border-b-gray-700 dark:bg-gray-800 dark:text-gray-400">
<span>
<button
flowbiteButton
color="default"
size="sm">
<flowbite-icon
flowbiteIconButton
name="github"
class="size-5 stroke-2" />
</button>
</span>
<span class="hidden gap-2 lg:flex lg:flex-row">
<button
flowbiteButton
disabled
color="default"
size="sm">
<flowbite-icon
flowbiteIconButton
name="desktopPc"
class="size-5 stroke-2" />
</button>
<button
flowbiteButton
disabled
color="default"
size="sm">
<flowbite-icon
flowbiteIconButton
gitextract_kk6wkjj8/ ├── .coderabbit.yaml ├── .eslintignore ├── .eslintrc.json ├── .github/ │ ├── CODE_OF_CONDUCT │ ├── CONTRIBUTING │ ├── ISSUE_TEMPLATE/ │ │ ├── bug_report.yaml │ │ └── feature_request.yaml │ ├── PULL_REQUEST_TEMPLATE/ │ │ ├── default_request_template.md │ │ └── release_request_template.md │ ├── pull_request_template.md │ └── workflows/ │ ├── ci.yml │ └── release.yml ├── .gitignore ├── .husky/ │ ├── commit-msg │ └── pre-commit ├── .lintstagedrc ├── .prettierignore ├── .prettierrc ├── .stylelintrc.json ├── .vscode/ │ ├── extensions.json │ └── settings.json ├── LICENSE ├── README.md ├── apps/ │ ├── .gitkeep │ ├── docs/ │ │ ├── .eslintrc.json │ │ ├── docs/ │ │ │ ├── components/ │ │ │ │ ├── accordion/ │ │ │ │ │ ├── _always-open.component.html │ │ │ │ │ ├── _always-open.component.ts │ │ │ │ │ ├── _color.component.html │ │ │ │ │ ├── _color.component.ts │ │ │ │ │ ├── _default.component.html │ │ │ │ │ ├── _default.component.ts │ │ │ │ │ ├── _flush.component.html │ │ │ │ │ ├── _flush.component.ts │ │ │ │ │ ├── _icon.component.html │ │ │ │ │ ├── _icon.component.ts │ │ │ │ │ ├── index.md │ │ │ │ │ └── ng-doc.page.ts │ │ │ │ ├── alert/ │ │ │ │ │ ├── _border-accent.component.html │ │ │ │ │ ├── _border-accent.component.ts │ │ │ │ │ ├── _border.component.html │ │ │ │ │ ├── _border.component.ts │ │ │ │ │ ├── _default.component.html │ │ │ │ │ ├── _default.component.ts │ │ │ │ │ ├── _dismissable.component.html │ │ │ │ │ ├── _dismissable.component.ts │ │ │ │ │ ├── _icon.component.html │ │ │ │ │ ├── _icon.component.ts │ │ │ │ │ ├── index.md │ │ │ │ │ └── ng-doc.page.ts │ │ │ │ ├── badge/ │ │ │ │ │ ├── _border.component.html │ │ │ │ │ ├── _border.component.ts │ │ │ │ │ ├── _default.component.html │ │ │ │ │ ├── _default.component.ts │ │ │ │ │ ├── _dismiss.component.html │ │ │ │ │ ├── _dismiss.component.ts │ │ │ │ │ ├── _icon.component.html │ │ │ │ │ ├── _icon.component.ts │ │ │ │ │ ├── _link.component.html │ │ │ │ │ ├── _link.component.ts │ │ │ │ │ ├── index.md │ │ │ │ │ └── ng-doc.page.ts │ │ │ │ ├── breadcrumb/ │ │ │ │ │ ├── _default.component.html │ │ │ │ │ ├── _default.component.ts │ │ │ │ │ ├── index.md │ │ │ │ │ └── ng-doc.page.ts │ │ │ │ ├── button/ │ │ │ │ │ ├── _default.component.html │ │ │ │ │ ├── _default.component.ts │ │ │ │ │ ├── _disabled.component.html │ │ │ │ │ ├── _disabled.component.ts │ │ │ │ │ ├── _group.component.html │ │ │ │ │ ├── _group.component.ts │ │ │ │ │ ├── _icon.component.html │ │ │ │ │ ├── _icon.component.ts │ │ │ │ │ ├── _outline.component.html │ │ │ │ │ ├── _outline.component.ts │ │ │ │ │ ├── _pill.component.html │ │ │ │ │ ├── _pill.component.ts │ │ │ │ │ ├── _size.component.html │ │ │ │ │ ├── _size.component.ts │ │ │ │ │ ├── index.md │ │ │ │ │ └── ng-doc.page.ts │ │ │ │ ├── card/ │ │ │ │ │ ├── _default.component.html │ │ │ │ │ ├── _default.component.ts │ │ │ │ │ ├── index.md │ │ │ │ │ └── ng-doc.page.ts │ │ │ │ ├── clipboard/ │ │ │ │ │ ├── _default.component.html │ │ │ │ │ ├── _default.component.ts │ │ │ │ │ ├── index.md │ │ │ │ │ └── ng-doc.page.ts │ │ │ │ ├── dropdown/ │ │ │ │ │ ├── _default.component.html │ │ │ │ │ ├── _default.component.ts │ │ │ │ │ ├── index.md │ │ │ │ │ └── ng-doc.page.ts │ │ │ │ ├── icon/ │ │ │ │ │ ├── _default.component.html │ │ │ │ │ ├── _default.component.ts │ │ │ │ │ ├── index.md │ │ │ │ │ └── ng-doc.page.ts │ │ │ │ ├── indicator/ │ │ │ │ │ ├── _default.component.html │ │ │ │ │ ├── _default.component.ts │ │ │ │ │ ├── index.md │ │ │ │ │ └── ng-doc.page.ts │ │ │ │ ├── input/ │ │ │ │ │ ├── _default.component.html │ │ │ │ │ ├── _default.component.ts │ │ │ │ │ ├── index.md │ │ │ │ │ └── ng-doc.page.ts │ │ │ │ ├── modal/ │ │ │ │ │ ├── _default.component.html │ │ │ │ │ ├── _default.component.ts │ │ │ │ │ ├── _open-programatically.component.html │ │ │ │ │ ├── _open-programatically.component.ts │ │ │ │ │ ├── _position.component.html │ │ │ │ │ ├── _position.component.ts │ │ │ │ │ ├── index.md │ │ │ │ │ └── ng-doc.page.ts │ │ │ │ ├── navbar/ │ │ │ │ │ ├── _default.component.html │ │ │ │ │ ├── _default.component.ts │ │ │ │ │ ├── index.md │ │ │ │ │ └── ng-doc.page.ts │ │ │ │ ├── ng-doc.category.ts │ │ │ │ ├── pagination/ │ │ │ │ │ ├── _default.component.html │ │ │ │ │ ├── _default.component.ts │ │ │ │ │ ├── index.md │ │ │ │ │ └── ng-doc.page.ts │ │ │ │ ├── sidebar/ │ │ │ │ │ ├── _default.component.html │ │ │ │ │ ├── _default.component.ts │ │ │ │ │ ├── index.md │ │ │ │ │ └── ng-doc.page.ts │ │ │ │ ├── tab/ │ │ │ │ │ ├── _default.component.html │ │ │ │ │ ├── _default.component.ts │ │ │ │ │ ├── index.md │ │ │ │ │ └── ng-doc.page.ts │ │ │ │ ├── table/ │ │ │ │ │ ├── _default.component.html │ │ │ │ │ ├── _default.component.ts │ │ │ │ │ ├── index.md │ │ │ │ │ └── ng-doc.page.ts │ │ │ │ └── tooltip/ │ │ │ │ ├── _default.component.html │ │ │ │ ├── _default.component.ts │ │ │ │ ├── index.md │ │ │ │ └── ng-doc.page.ts │ │ │ ├── customize/ │ │ │ │ ├── dark-mode/ │ │ │ │ │ ├── index.md │ │ │ │ │ └── ng-doc.page.ts │ │ │ │ ├── ng-doc.category.ts │ │ │ │ ├── override-base-style/ │ │ │ │ │ ├── index.md │ │ │ │ │ └── ng-doc.page.ts │ │ │ │ ├── theming/ │ │ │ │ │ ├── index.md │ │ │ │ │ └── ng-doc.page.ts │ │ │ │ └── use-custom-style/ │ │ │ │ ├── index.md │ │ │ │ └── ng-doc.page.ts │ │ │ ├── doc-theme.model.ts │ │ │ ├── getting-started/ │ │ │ │ ├── introduction/ │ │ │ │ │ ├── index.md │ │ │ │ │ └── ng-doc.page.ts │ │ │ │ ├── license/ │ │ │ │ │ ├── index.md │ │ │ │ │ └── ng-doc.page.ts │ │ │ │ ├── ng-doc.category.ts │ │ │ │ ├── ng-primitives/ │ │ │ │ │ ├── index.md │ │ │ │ │ └── ng-doc.page.ts │ │ │ │ └── quickstart/ │ │ │ │ ├── index.md │ │ │ │ └── ng-doc.page.ts │ │ │ ├── ng-doc.api.ts │ │ │ └── shared/ │ │ │ └── theme-macro.md │ │ ├── ng-doc.config.ts │ │ ├── postcss.config.json │ │ ├── project.json │ │ ├── public/ │ │ │ ├── .gitkeep │ │ │ └── css/ │ │ │ ├── ng-doc/ │ │ │ │ └── base.css │ │ │ ├── styles.css │ │ │ └── tw/ │ │ │ └── fonts.css │ │ ├── server.ts │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.config.server.ts │ │ │ │ ├── app.config.ts │ │ │ │ ├── app.routes.ts │ │ │ │ ├── pages/ │ │ │ │ │ ├── docs/ │ │ │ │ │ │ ├── docs.component.css │ │ │ │ │ │ ├── docs.component.html │ │ │ │ │ │ ├── docs.component.ts │ │ │ │ │ │ └── docs.routes.ts │ │ │ │ │ └── landing/ │ │ │ │ │ ├── landing.component.html │ │ │ │ │ ├── landing.component.ts │ │ │ │ │ └── landing.routes.ts │ │ │ │ └── shared/ │ │ │ │ ├── components/ │ │ │ │ │ └── flowbite-doc-demo-displayer/ │ │ │ │ │ └── flowbite-doc-demo-displayer.component.ts │ │ │ │ ├── header-template.html │ │ │ │ └── processors/ │ │ │ │ └── doc-demo-displayer-processor/ │ │ │ │ └── doc-demo-displayer-processor.ts │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.server.ts │ │ │ └── main.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.editor.json │ │ └── tsconfig.json │ └── storybook/ │ ├── .eslintrc.json │ ├── .storybook/ │ │ ├── helper.ts │ │ ├── main.ts │ │ ├── preview-body.html │ │ ├── preview.ts │ │ └── tsconfig.json │ ├── postcss.config.json │ ├── project.json │ ├── src/ │ │ ├── accordion.component.stories.ts │ │ ├── alert.stories.ts │ │ ├── badge.stories.ts │ │ ├── breadcrumb.stories.ts │ │ ├── button.component.stories.ts │ │ ├── card.component.stories.ts │ │ ├── clipboard.component.stories.ts │ │ ├── dropdown.stories.ts │ │ ├── form/ │ │ │ └── form-field.component.stories.ts │ │ ├── icon.component.stories.ts │ │ ├── indicator.stories.ts │ │ ├── modal.component.stories.ts │ │ ├── navbar.component.stories.ts │ │ ├── pagination.component.stories.ts │ │ ├── sidebar.component.stories.ts │ │ ├── tab.component.stories.ts │ │ ├── table.component.stories.ts │ │ └── tooltip.component.stories.ts │ ├── styles.css │ ├── tsconfig.editor.json │ └── tsconfig.json ├── commitlint.config.cjs ├── libs/ │ ├── .gitkeep │ ├── flowbite-angular/ │ │ ├── .eslintrc.json │ │ ├── LICENSE │ │ ├── README.md │ │ ├── accordion/ │ │ │ ├── ng-package.json │ │ │ └── src/ │ │ │ ├── accordion/ │ │ │ │ ├── accordion-state.ts │ │ │ │ ├── accordion.directive.ts │ │ │ │ └── theme.ts │ │ │ ├── accordion-content/ │ │ │ │ ├── accordion-content-state.ts │ │ │ │ ├── accordion-content.directive.ts │ │ │ │ └── theme.ts │ │ │ ├── accordion-item/ │ │ │ │ ├── accordion-item-state.ts │ │ │ │ ├── accordion-item.directive.ts │ │ │ │ └── theme.ts │ │ │ ├── accordion-title/ │ │ │ │ ├── accordion-title-state.ts │ │ │ │ ├── accordion-title.directive.ts │ │ │ │ └── theme.ts │ │ │ ├── config/ │ │ │ │ ├── accordion-config.ts │ │ │ │ ├── accordion-content-config.ts │ │ │ │ ├── accordion-item-config.ts │ │ │ │ └── accordion-title-config.ts │ │ │ └── index.ts │ │ ├── alert/ │ │ │ ├── ng-package.json │ │ │ └── src/ │ │ │ ├── alert/ │ │ │ │ ├── alert-state.ts │ │ │ │ ├── alert.directive.ts │ │ │ │ └── theme.ts │ │ │ ├── alert-button/ │ │ │ │ ├── alert-button-state.ts │ │ │ │ ├── alert-button.directive.ts │ │ │ │ └── theme.ts │ │ │ ├── alert-content/ │ │ │ │ ├── alert-content-state.ts │ │ │ │ ├── alert-content.directive.ts │ │ │ │ └── theme.ts │ │ │ ├── config/ │ │ │ │ ├── alert-button-config.ts │ │ │ │ ├── alert-config.ts │ │ │ │ └── alert-content-config.ts │ │ │ └── index.ts │ │ ├── badge/ │ │ │ ├── ng-package.json │ │ │ └── src/ │ │ │ ├── badge/ │ │ │ │ ├── badge-state.ts │ │ │ │ ├── badge.directive.ts │ │ │ │ └── theme.ts │ │ │ ├── badge-button/ │ │ │ │ ├── badge-button-state.ts │ │ │ │ ├── badge-button.directive.ts │ │ │ │ └── theme.ts │ │ │ ├── badge-link/ │ │ │ │ ├── badge-link-state.ts │ │ │ │ ├── badge-link.directive.ts │ │ │ │ └── theme.ts │ │ │ ├── config/ │ │ │ │ ├── badge-button-config.ts │ │ │ │ ├── badge-config.ts │ │ │ │ └── badge-link-config.ts │ │ │ └── index.ts │ │ ├── breadcrumb/ │ │ │ ├── ng-package.json │ │ │ └── src/ │ │ │ ├── breadcrumb/ │ │ │ │ ├── breadcrumb-state.ts │ │ │ │ ├── breadcrumb.directive.ts │ │ │ │ └── theme.ts │ │ │ ├── breadcrumb-content/ │ │ │ │ ├── breadcrumb-content-state.ts │ │ │ │ ├── breadcrumb-content.directive.ts │ │ │ │ └── theme.ts │ │ │ ├── breadcrumb-item/ │ │ │ │ ├── breadcrumb-item-state.ts │ │ │ │ ├── breadcrumb-item.directive.ts │ │ │ │ └── theme.ts │ │ │ ├── config/ │ │ │ │ ├── breadcrumb-config.ts │ │ │ │ ├── breadcrumb-content-config.ts │ │ │ │ └── breadcrumb-item-config.ts │ │ │ └── index.ts │ │ ├── button/ │ │ │ ├── ng-package.json │ │ │ └── src/ │ │ │ ├── base-button/ │ │ │ │ ├── base-button-state.ts │ │ │ │ ├── base-button.directive.ts │ │ │ │ └── theme.ts │ │ │ ├── button/ │ │ │ │ ├── button-state.ts │ │ │ │ ├── button.directive.ts │ │ │ │ └── theme.ts │ │ │ ├── config/ │ │ │ │ ├── base-button-config.ts │ │ │ │ └── button-config.ts │ │ │ └── index.ts │ │ ├── button-group/ │ │ │ ├── README.md │ │ │ ├── ng-package.json │ │ │ └── src/ │ │ │ ├── button-group/ │ │ │ │ ├── button-group-state.ts │ │ │ │ ├── button-group.directive.ts │ │ │ │ └── theme.ts │ │ │ ├── config/ │ │ │ │ └── button-group-config.ts │ │ │ └── index.ts │ │ ├── card/ │ │ │ ├── README.md │ │ │ ├── ng-package.json │ │ │ └── src/ │ │ │ ├── card/ │ │ │ │ ├── card-state.ts │ │ │ │ ├── card.directive.ts │ │ │ │ └── theme.ts │ │ │ ├── card-content/ │ │ │ │ ├── card-content-state.ts │ │ │ │ ├── card-content.directive.ts │ │ │ │ └── theme.ts │ │ │ ├── card-header/ │ │ │ │ ├── card-header-state.ts │ │ │ │ ├── card-header.directive.ts │ │ │ │ └── theme.ts │ │ │ ├── config/ │ │ │ │ ├── card-config.ts │ │ │ │ ├── card-content-config.ts │ │ │ │ └── card-header-config.ts │ │ │ └── index.ts │ │ ├── clipboard/ │ │ │ ├── README.md │ │ │ ├── ng-package.json │ │ │ └── src/ │ │ │ ├── clipboard/ │ │ │ │ ├── clipboard-state.ts │ │ │ │ ├── clipboard.component.ts │ │ │ │ └── theme.ts │ │ │ ├── config/ │ │ │ │ └── clipboard-config.ts │ │ │ └── index.ts │ │ ├── core/ │ │ │ └── src/ │ │ │ ├── core/ │ │ │ │ ├── flowbite.boolean.ts │ │ │ │ ├── flowbite.colors.ts │ │ │ │ ├── flowbite.deep-partial.ts │ │ │ │ ├── flowbite.positions.ts │ │ │ │ ├── flowbite.sizes.ts │ │ │ │ └── flowbite.themes.ts │ │ │ ├── index.ts │ │ │ └── utils/ │ │ │ ├── clone-deep.ts │ │ │ ├── color-to-theme.ts │ │ │ ├── create-theme.ts │ │ │ ├── is-object.ts │ │ │ └── merge-theme.ts │ │ ├── dropdown/ │ │ │ ├── ng-package.json │ │ │ └── src/ │ │ │ ├── config/ │ │ │ │ ├── dropdown-config.ts │ │ │ │ ├── dropdown-content-config.ts │ │ │ │ └── dropdown-item-config.ts │ │ │ ├── dropdown/ │ │ │ │ ├── dropdown-state.ts │ │ │ │ ├── dropdown.directive.ts │ │ │ │ └── theme.ts │ │ │ ├── dropdown-content/ │ │ │ │ ├── dropdown-content-state.ts │ │ │ │ ├── dropdown-content.directive.ts │ │ │ │ └── theme.ts │ │ │ ├── dropdown-item/ │ │ │ │ ├── dropdown-item-state.ts │ │ │ │ ├── dropdown-item.directive.ts │ │ │ │ └── theme.ts │ │ │ └── index.ts │ │ ├── form/ │ │ │ ├── README.md │ │ │ ├── ng-package.json │ │ │ └── src/ │ │ │ ├── config/ │ │ │ │ ├── form-control-config.ts │ │ │ │ ├── form-field-config.ts │ │ │ │ ├── helper-config.ts │ │ │ │ └── label-config.ts │ │ │ ├── form-control/ │ │ │ │ ├── form-control-state.ts │ │ │ │ ├── form-control.directive.ts │ │ │ │ └── theme.ts │ │ │ ├── form-field/ │ │ │ │ ├── form-field-state.ts │ │ │ │ ├── form-field.directive.ts │ │ │ │ └── theme.ts │ │ │ ├── helper/ │ │ │ │ ├── helper-state.ts │ │ │ │ ├── helper.directive.ts │ │ │ │ └── theme.ts │ │ │ ├── index.ts │ │ │ └── label/ │ │ │ ├── label-state.ts │ │ │ ├── label.directive.ts │ │ │ └── theme.ts │ │ ├── icon/ │ │ │ ├── README.md │ │ │ ├── brand/ │ │ │ │ ├── README.md │ │ │ │ ├── ng-package.json │ │ │ │ └── src/ │ │ │ │ └── index.ts │ │ │ ├── ng-package.json │ │ │ ├── outline/ │ │ │ │ ├── README.md │ │ │ │ ├── arrows/ │ │ │ │ │ ├── ng-package.json │ │ │ │ │ └── src/ │ │ │ │ │ └── index.ts │ │ │ │ ├── e-commerce/ │ │ │ │ │ ├── ng-package.json │ │ │ │ │ └── src/ │ │ │ │ │ └── index.ts │ │ │ │ ├── emoji/ │ │ │ │ │ ├── ng-package.json │ │ │ │ │ └── src/ │ │ │ │ │ └── index.ts │ │ │ │ ├── files-folders/ │ │ │ │ │ ├── ng-package.json │ │ │ │ │ └── src/ │ │ │ │ │ └── index.ts │ │ │ │ ├── general/ │ │ │ │ │ ├── ng-package.json │ │ │ │ │ └── src/ │ │ │ │ │ └── index.ts │ │ │ │ ├── media/ │ │ │ │ │ ├── ng-package.json │ │ │ │ │ └── src/ │ │ │ │ │ └── index.ts │ │ │ │ ├── ng-package.json │ │ │ │ ├── src/ │ │ │ │ │ └── index.ts │ │ │ │ ├── text/ │ │ │ │ │ ├── ng-package.json │ │ │ │ │ └── src/ │ │ │ │ │ └── index.ts │ │ │ │ ├── user/ │ │ │ │ │ ├── ng-package.json │ │ │ │ │ └── src/ │ │ │ │ │ └── index.ts │ │ │ │ └── weather/ │ │ │ │ ├── ng-package.json │ │ │ │ └── src/ │ │ │ │ └── index.ts │ │ │ ├── solid/ │ │ │ │ ├── README.md │ │ │ │ ├── arrows/ │ │ │ │ │ ├── ng-package.json │ │ │ │ │ └── src/ │ │ │ │ │ └── index.ts │ │ │ │ ├── brands/ │ │ │ │ │ ├── ng-package.json │ │ │ │ │ └── src/ │ │ │ │ │ └── index.ts │ │ │ │ ├── e-commerce/ │ │ │ │ │ ├── ng-package.json │ │ │ │ │ └── src/ │ │ │ │ │ └── index.ts │ │ │ │ ├── emoji/ │ │ │ │ │ ├── ng-package.json │ │ │ │ │ └── src/ │ │ │ │ │ └── index.ts │ │ │ │ ├── files-folder/ │ │ │ │ │ ├── ng-package.json │ │ │ │ │ └── src/ │ │ │ │ │ └── index.ts │ │ │ │ ├── general/ │ │ │ │ │ ├── ng-package.json │ │ │ │ │ └── src/ │ │ │ │ │ └── index.ts │ │ │ │ ├── media/ │ │ │ │ │ ├── ng-package.json │ │ │ │ │ └── src/ │ │ │ │ │ └── index.ts │ │ │ │ ├── ng-package.json │ │ │ │ ├── src/ │ │ │ │ │ └── index.ts │ │ │ │ ├── text/ │ │ │ │ │ ├── ng-package.json │ │ │ │ │ └── src/ │ │ │ │ │ └── index.ts │ │ │ │ ├── user/ │ │ │ │ │ ├── ng-package.json │ │ │ │ │ └── src/ │ │ │ │ │ └── index.ts │ │ │ │ └── weather/ │ │ │ │ ├── ng-package.json │ │ │ │ └── src/ │ │ │ │ └── index.ts │ │ │ └── src/ │ │ │ ├── config/ │ │ │ │ └── icon-config.ts │ │ │ ├── icon/ │ │ │ │ ├── icon-state.ts │ │ │ │ ├── icon.component.ts │ │ │ │ └── theme.ts │ │ │ └── index.ts │ │ ├── indicator/ │ │ │ ├── README.md │ │ │ ├── ng-package.json │ │ │ └── src/ │ │ │ ├── config/ │ │ │ │ └── indicator-config.ts │ │ │ ├── index.ts │ │ │ └── indicator/ │ │ │ ├── indicator-state.ts │ │ │ ├── indicator.directive.ts │ │ │ └── theme.ts │ │ ├── modal/ │ │ │ ├── README.md │ │ │ ├── ng-package.json │ │ │ └── src/ │ │ │ ├── config/ │ │ │ │ ├── modal-config.ts │ │ │ │ ├── modal-content-config.ts │ │ │ │ ├── modal-footer-config.ts │ │ │ │ ├── modal-header-config.ts │ │ │ │ └── modal-overlay-config.ts │ │ │ ├── index.ts │ │ │ ├── modal/ │ │ │ │ ├── modal-state.ts │ │ │ │ ├── modal.directive.ts │ │ │ │ └── theme.ts │ │ │ ├── modal-content/ │ │ │ │ ├── modal-content-state.ts │ │ │ │ ├── modal-content.directive.ts │ │ │ │ └── theme.ts │ │ │ ├── modal-footer/ │ │ │ │ ├── modal-footer-state.ts │ │ │ │ ├── modal-footer.directive.ts │ │ │ │ └── theme.ts │ │ │ ├── modal-header/ │ │ │ │ ├── modal-header-state.ts │ │ │ │ ├── modal-header.directive.ts │ │ │ │ └── theme.ts │ │ │ └── modal-overlay/ │ │ │ ├── modal-overlay-state.ts │ │ │ ├── modal-overlay.directive.ts │ │ │ └── theme.ts │ │ ├── navbar/ │ │ │ ├── README.md │ │ │ ├── ng-package.json │ │ │ └── src/ │ │ │ ├── config/ │ │ │ │ ├── navbar-brand-config.ts │ │ │ │ ├── navbar-config.ts │ │ │ │ ├── navbar-content-config.ts │ │ │ │ ├── navbar-icon-item-config.ts │ │ │ │ ├── navbar-item-config.ts │ │ │ │ └── navbar-toggle-config.ts │ │ │ ├── index.ts │ │ │ ├── navbar/ │ │ │ │ ├── navbar-state.ts │ │ │ │ ├── navbar.component.ts │ │ │ │ └── theme.ts │ │ │ ├── navbar-brand/ │ │ │ │ ├── navbar-brand-state.ts │ │ │ │ ├── navbar-brand.directive.ts │ │ │ │ └── theme.ts │ │ │ ├── navbar-content/ │ │ │ │ ├── navbar-content-state.ts │ │ │ │ ├── navbar-content.component.ts │ │ │ │ └── theme.ts │ │ │ ├── navbar-icon-item/ │ │ │ │ ├── navbar-icon-item-state.ts │ │ │ │ ├── navbar-icon-item.directive.ts │ │ │ │ └── theme.ts │ │ │ ├── navbar-item/ │ │ │ │ ├── navbar-item-state.ts │ │ │ │ ├── navbar-item.directive.ts │ │ │ │ └── theme.ts │ │ │ └── navbar-toggle/ │ │ │ ├── navbar-toggle-state.ts │ │ │ ├── navbar-toggle.directive.ts │ │ │ └── theme.ts │ │ ├── ng-package.json │ │ ├── package.json │ │ ├── pagination/ │ │ │ ├── README.md │ │ │ ├── ng-package.json │ │ │ └── src/ │ │ │ ├── config/ │ │ │ │ ├── pagination-button-config.ts │ │ │ │ ├── pagination-config.ts │ │ │ │ ├── pagination-first-config.ts │ │ │ │ ├── pagination-last-config.ts │ │ │ │ ├── pagination-next-config.ts │ │ │ │ └── pagination-previous-config.ts │ │ │ ├── index.ts │ │ │ ├── pagination/ │ │ │ │ ├── pagination-state.ts │ │ │ │ ├── pagination.component.ts │ │ │ │ └── theme.ts │ │ │ ├── pagination-button/ │ │ │ │ ├── pagination-button-state.ts │ │ │ │ ├── pagination-button.component.ts │ │ │ │ └── theme.ts │ │ │ ├── pagination-first/ │ │ │ │ ├── pagination-first-state.ts │ │ │ │ ├── pagination-first.component.ts │ │ │ │ └── theme.ts │ │ │ ├── pagination-last/ │ │ │ │ ├── pagination-last-state.ts │ │ │ │ ├── pagination-last.component.ts │ │ │ │ └── theme.ts │ │ │ ├── pagination-next/ │ │ │ │ ├── pagination-next-state.ts │ │ │ │ ├── pagination-next.component.ts │ │ │ │ └── theme.ts │ │ │ └── pagination-previous/ │ │ │ ├── pagination-previous-state.ts │ │ │ ├── pagination-previous.component.ts │ │ │ └── theme.ts │ │ ├── project.json │ │ ├── sidebar/ │ │ │ ├── README.md │ │ │ ├── ng-package.json │ │ │ └── src/ │ │ │ ├── config/ │ │ │ │ ├── sidebar-config.ts │ │ │ │ ├── sidebar-content-config.ts │ │ │ │ ├── sidebar-item-config.ts │ │ │ │ └── sidebar-toggle-config.ts │ │ │ ├── index.ts │ │ │ ├── sidebar/ │ │ │ │ ├── sidebar-state.ts │ │ │ │ ├── sidebar.directive.ts │ │ │ │ └── theme.ts │ │ │ ├── sidebar-content/ │ │ │ │ ├── sidebar-content-state.ts │ │ │ │ ├── sidebar-content.component.ts │ │ │ │ └── theme.ts │ │ │ ├── sidebar-item/ │ │ │ │ ├── sidebar-item-state.ts │ │ │ │ ├── sidebar-item.directive.ts │ │ │ │ └── theme.ts │ │ │ └── sidebar-toggle/ │ │ │ ├── sidebar-toggle-state.ts │ │ │ ├── sidebar-toggle.directive.ts │ │ │ └── theme.ts │ │ ├── styles/ │ │ │ ├── flowbite-angular.css │ │ │ └── part/ │ │ │ └── animation.css │ │ ├── tab/ │ │ │ ├── README.md │ │ │ ├── ng-package.json │ │ │ └── src/ │ │ │ ├── config/ │ │ │ │ ├── tab-button-config.ts │ │ │ │ ├── tab-config.ts │ │ │ │ ├── tab-content-config.ts │ │ │ │ └── tab-list-config.ts │ │ │ ├── index.ts │ │ │ ├── tab/ │ │ │ │ ├── tab-state.ts │ │ │ │ ├── tab.directive.ts │ │ │ │ └── theme.ts │ │ │ ├── tab-button/ │ │ │ │ ├── tab-button-state.ts │ │ │ │ ├── tab-button.directive.ts │ │ │ │ └── theme.ts │ │ │ ├── tab-content/ │ │ │ │ ├── tab-content-state.ts │ │ │ │ ├── tab-content.directive.ts │ │ │ │ └── theme.ts │ │ │ └── tab-list/ │ │ │ ├── tab-list-state.ts │ │ │ ├── tab-list.directive.ts │ │ │ └── theme.ts │ │ ├── table/ │ │ │ ├── README.md │ │ │ ├── ng-package.json │ │ │ └── src/ │ │ │ ├── config/ │ │ │ │ ├── table-body-config.ts │ │ │ │ ├── table-config.ts │ │ │ │ ├── table-foot-config.ts │ │ │ │ └── table-head-config.ts │ │ │ ├── index.ts │ │ │ ├── table/ │ │ │ │ ├── table-state.ts │ │ │ │ ├── table.component.ts │ │ │ │ └── theme.ts │ │ │ ├── table-body/ │ │ │ │ ├── table-body-state.ts │ │ │ │ ├── table-body.directive.ts │ │ │ │ └── theme.ts │ │ │ ├── table-foot/ │ │ │ │ ├── table-foot-state.ts │ │ │ │ ├── table-foot.directive.ts │ │ │ │ └── theme.ts │ │ │ └── table-head/ │ │ │ ├── table-head-state.ts │ │ │ ├── table-head.directive.ts │ │ │ └── theme.ts │ │ ├── theme-toggle/ │ │ │ ├── README.md │ │ │ ├── ng-package.json │ │ │ └── src/ │ │ │ ├── config/ │ │ │ │ ├── theme-config.ts │ │ │ │ └── theme-toggle-config.ts │ │ │ ├── index.ts │ │ │ ├── theme/ │ │ │ │ ├── theme-state.ts │ │ │ │ └── theme.directive.ts │ │ │ └── theme-toggle/ │ │ │ ├── theme-toggle-state.ts │ │ │ ├── theme-toggle.component.ts │ │ │ └── theme.ts │ │ ├── tooltip/ │ │ │ ├── README.md │ │ │ ├── ng-package.json │ │ │ └── src/ │ │ │ ├── config/ │ │ │ │ └── tooltip-config.ts │ │ │ ├── index.ts │ │ │ └── tooltip/ │ │ │ ├── theme.ts │ │ │ ├── tooltip-state.ts │ │ │ └── tooltip.directive.ts │ │ ├── tsconfig.json │ │ ├── tsconfig.lib.json │ │ └── tsconfig.lib.prod.json │ └── tools/ │ ├── .eslintrc.json │ ├── README.md │ ├── generators.json │ ├── package.json │ ├── project.json │ ├── src/ │ │ ├── generators/ │ │ │ ├── component/ │ │ │ │ ├── files/ │ │ │ │ │ ├── component/ │ │ │ │ │ │ └── __directoryName__/ │ │ │ │ │ │ └── src/ │ │ │ │ │ │ ├── __fileName__/ │ │ │ │ │ │ │ ├── __fileName__-state.ts.template │ │ │ │ │ │ │ ├── __fileName__.component.ts.template │ │ │ │ │ │ │ └── theme.ts.template │ │ │ │ │ │ └── config/ │ │ │ │ │ │ └── __fileName__-config.ts.template │ │ │ │ │ └── directive/ │ │ │ │ │ └── __directoryName__/ │ │ │ │ │ └── src/ │ │ │ │ │ ├── __fileName__/ │ │ │ │ │ │ ├── __fileName__-state.ts.template │ │ │ │ │ │ ├── __fileName__.directive.ts.template │ │ │ │ │ │ └── theme.ts.template │ │ │ │ │ └── config/ │ │ │ │ │ └── __fileName__-config.ts.template │ │ │ │ ├── generator.ts │ │ │ │ ├── schema.d.ts │ │ │ │ └── schema.json │ │ │ ├── documentation/ │ │ │ │ ├── files/ │ │ │ │ │ └── __fileName__/ │ │ │ │ │ ├── _default.component.html.template │ │ │ │ │ ├── _default.component.ts.template │ │ │ │ │ ├── index.md.template │ │ │ │ │ └── ng-doc.page.ts.template │ │ │ │ ├── generator.ts │ │ │ │ ├── schema.d.ts │ │ │ │ └── schema.json │ │ │ └── storybook/ │ │ │ ├── files/ │ │ │ │ └── __fileName__.component.stories.ts.template │ │ │ ├── generator.ts │ │ │ ├── schema.d.ts │ │ │ └── schema.json │ │ ├── index.ts │ │ └── utils/ │ │ └── index.ts │ ├── tsconfig.json │ └── tsconfig.lib.json ├── nx.json ├── package.json ├── pnpm-workspace.yaml └── tsconfig.base.json
SYMBOL INDEX (408 symbols across 265 files)
FILE: apps/docs/docs/components/accordion/_always-open.component.ts
class FlowbiteAlwaysOpenComponent (line 17) | class FlowbiteAlwaysOpenComponent {}
FILE: apps/docs/docs/components/accordion/_color.component.ts
class FlowbiteColorComponent (line 17) | class FlowbiteColorComponent {}
FILE: apps/docs/docs/components/accordion/_default.component.ts
class FlowbiteDefaultComponent (line 17) | class FlowbiteDefaultComponent {}
FILE: apps/docs/docs/components/accordion/_flush.component.ts
class FlowbiteFlushComponent (line 17) | class FlowbiteFlushComponent {}
FILE: apps/docs/docs/components/accordion/_icon.component.ts
class FlowbiteIconComponent (line 21) | class FlowbiteIconComponent {}
FILE: apps/docs/docs/components/alert/_border-accent.component.ts
class FlowbiteBorderAccentComponent (line 12) | class FlowbiteBorderAccentComponent {}
FILE: apps/docs/docs/components/alert/_border.component.ts
class FlowbiteBorderComponent (line 12) | class FlowbiteBorderComponent {}
FILE: apps/docs/docs/components/alert/_default.component.ts
class FlowbiteDefaultComponent (line 12) | class FlowbiteDefaultComponent {}
FILE: apps/docs/docs/components/alert/_dismissable.component.ts
class FlowbiteDismissableComponent (line 16) | class FlowbiteDismissableComponent {
method onDismiss (line 17) | onDismiss(): void {
FILE: apps/docs/docs/components/alert/_icon.component.ts
class FlowbiteIconComponent (line 16) | class FlowbiteIconComponent {}
FILE: apps/docs/docs/components/badge/_border.component.ts
class FlowbiteBorderComponent (line 12) | class FlowbiteBorderComponent {}
FILE: apps/docs/docs/components/badge/_default.component.ts
class FlowbiteDefaultComponent (line 12) | class FlowbiteDefaultComponent {}
FILE: apps/docs/docs/components/badge/_dismiss.component.ts
class FlowbiteDismissComponent (line 16) | class FlowbiteDismissComponent {
method onDismiss (line 17) | onDismiss(): void {
FILE: apps/docs/docs/components/badge/_icon.component.ts
class FlowbiteIconComponent (line 16) | class FlowbiteIconComponent {}
FILE: apps/docs/docs/components/badge/_link.component.ts
class FlowbiteLinkComponent (line 12) | class FlowbiteLinkComponent {}
FILE: apps/docs/docs/components/breadcrumb/_default.component.ts
class FlowbiteDefaultComponent (line 17) | class FlowbiteDefaultComponent {}
FILE: apps/docs/docs/components/button/_default.component.ts
class FlowbiteDefaultComponent (line 12) | class FlowbiteDefaultComponent {}
FILE: apps/docs/docs/components/button/_disabled.component.ts
class FlowbiteDisabledComponent (line 12) | class FlowbiteDisabledComponent {}
FILE: apps/docs/docs/components/button/_group.component.ts
class FlowbiteGroupComponent (line 13) | class FlowbiteGroupComponent {}
FILE: apps/docs/docs/components/button/_icon.component.ts
class FlowbiteIconComponent (line 16) | class FlowbiteIconComponent {}
FILE: apps/docs/docs/components/button/_outline.component.ts
class FlowbiteOutlineComponent (line 12) | class FlowbiteOutlineComponent {}
FILE: apps/docs/docs/components/button/_pill.component.ts
class FlowbitePillComponent (line 12) | class FlowbitePillComponent {}
FILE: apps/docs/docs/components/button/_size.component.ts
class FlowbiteSizeComponent (line 12) | class FlowbiteSizeComponent {}
FILE: apps/docs/docs/components/card/_default.component.ts
class FlowbiteDefaultComponent (line 12) | class FlowbiteDefaultComponent {}
FILE: apps/docs/docs/components/clipboard/_default.component.ts
class FlowbiteDefaultComponent (line 12) | class FlowbiteDefaultComponent {}
FILE: apps/docs/docs/components/dropdown/_default.component.ts
class FlowbiteDefaultComponent (line 18) | class FlowbiteDefaultComponent {}
FILE: apps/docs/docs/components/icon/_default.component.ts
class FlowbiteDefaultComponent (line 15) | class FlowbiteDefaultComponent {}
FILE: apps/docs/docs/components/indicator/_default.component.ts
class FlowbiteDefaultComponent (line 12) | class FlowbiteDefaultComponent {}
FILE: apps/docs/docs/components/input/_default.component.ts
class FlowbiteDefaultComponent (line 13) | class FlowbiteDefaultComponent {}
FILE: apps/docs/docs/components/modal/_default.component.ts
class FlowbiteDefaultComponent (line 20) | class FlowbiteDefaultComponent {}
FILE: apps/docs/docs/components/modal/_open-programatically.component.ts
class FlowbiteOpenprogramaticallyComponent (line 20) | class FlowbiteOpenprogramaticallyComponent {
method onClick (line 24) | onClick(): void {
FILE: apps/docs/docs/components/modal/_position.component.ts
class FlowbitePositionComponent (line 20) | class FlowbitePositionComponent {}
FILE: apps/docs/docs/components/navbar/_default.component.ts
class FlowbiteDefaultComponent (line 22) | class FlowbiteDefaultComponent {}
FILE: apps/docs/docs/components/pagination/_default.component.ts
class FlowbiteDefaultComponent (line 12) | class FlowbiteDefaultComponent {
FILE: apps/docs/docs/components/sidebar/_default.component.ts
class FlowbiteDefaultComponent (line 28) | class FlowbiteDefaultComponent {}
FILE: apps/docs/docs/components/tab/_default.component.ts
class FlowbiteDefaultComponent (line 12) | class FlowbiteDefaultComponent {}
FILE: apps/docs/docs/components/table/_default.component.ts
class FlowbiteDefaultComponent (line 12) | class FlowbiteDefaultComponent {
FILE: apps/docs/docs/components/tooltip/_default.component.ts
class FlowbiteDefaultComponent (line 14) | class FlowbiteDefaultComponent {
FILE: apps/docs/docs/doc-theme.model.ts
type DocTheme (line 1) | type DocTheme = { title: string; content: string; description?: string |...
type DocThemes (line 2) | type DocThemes = DocTheme[];
FILE: apps/docs/server.ts
function app (line 11) | function app(): express.Express {
function run (line 52) | function run(): void {
FILE: apps/docs/src/app/app.component.ts
class AppComponent (line 59) | class AppComponent {
method isLandingPage (line 63) | get isLandingPage(): boolean {
FILE: apps/docs/src/app/pages/docs/docs.component.ts
class DocsComponent (line 10) | class DocsComponent {}
FILE: apps/docs/src/app/pages/landing/landing.component.ts
class LandingComponent (line 34) | class LandingComponent {
method setTheme (line 37) | public setTheme(id: 'light' | 'dark'): void {
FILE: apps/docs/src/app/shared/components/flowbite-doc-demo-displayer/flowbite-doc-demo-displayer.component.ts
class FlowbiteDocDemoComponent (line 97) | class FlowbiteDocDemoComponent {
FILE: apps/storybook/.storybook/helper.ts
function hiddenOutputActions (line 17) | function hiddenOutputActions(...outputs: string[]) {
FILE: apps/storybook/.storybook/main.ts
function getAbsolutePath (line 45) | function getAbsolutePath(value: string): any {
FILE: apps/storybook/src/accordion.component.stories.ts
type StoryType (line 16) | type StoryType = Accordion & {
FILE: apps/storybook/src/alert.stories.ts
type StoryType (line 15) | type StoryType = Alert;
FILE: apps/storybook/src/badge.stories.ts
type StoryType (line 10) | type StoryType = Badge;
FILE: apps/storybook/src/breadcrumb.stories.ts
type StoryType (line 19) | type StoryType = Breadcrumb;
FILE: apps/storybook/src/button.component.stories.ts
type StoryType (line 15) | type StoryType = Button & {
FILE: apps/storybook/src/card.component.stories.ts
type StoryType (line 13) | type StoryType = Card;
FILE: apps/storybook/src/clipboard.component.stories.ts
type StoryType (line 6) | type StoryType = Clipboard;
FILE: apps/storybook/src/dropdown.stories.ts
type StoryType (line 16) | type StoryType = Dropdown;
FILE: apps/storybook/src/form/form-field.component.stories.ts
type StoryType (line 13) | type StoryType = FormField & {
FILE: apps/storybook/src/icon.component.stories.ts
type StoryType (line 8) | type StoryType = Icon;
FILE: apps/storybook/src/indicator.stories.ts
type StoryType (line 10) | type StoryType = Indicator;
FILE: apps/storybook/src/modal.component.stories.ts
type StoryType (line 16) | type StoryType = Modal;
FILE: apps/storybook/src/navbar.component.stories.ts
type StoryType (line 16) | type StoryType = Navbar;
FILE: apps/storybook/src/pagination.component.stories.ts
type StoryType (line 8) | type StoryType = Pagination & {
FILE: apps/storybook/src/sidebar.component.stories.ts
type StoryType (line 19) | type StoryType = Sidebar;
FILE: apps/storybook/src/tab.component.stories.ts
type StoryType (line 12) | type StoryType = Tab;
FILE: apps/storybook/src/table.component.stories.ts
type StoryType (line 12) | type StoryType = Table;
FILE: apps/storybook/src/tooltip.component.stories.ts
type StoryType (line 8) | type StoryType = Tooltip;
FILE: libs/flowbite-angular/accordion/src/accordion-content/accordion-content.directive.ts
class AccordionContent (line 30) | class AccordionContent {
FILE: libs/flowbite-angular/accordion/src/accordion-content/theme.ts
type FlowbiteAccordionContentTheme (line 6) | interface FlowbiteAccordionContentTheme {
type FlowbiteAccordionContentHostTheme (line 10) | interface FlowbiteAccordionContentHostTheme {
FILE: libs/flowbite-angular/accordion/src/accordion-item/accordion-item.directive.ts
class AccordionItem (line 33) | class AccordionItem {
FILE: libs/flowbite-angular/accordion/src/accordion-item/theme.ts
type FlowbiteAccordionItemTheme (line 3) | interface FlowbiteAccordionItemTheme {
type FlowbiteAccordionItemHostTheme (line 7) | interface FlowbiteAccordionItemHostTheme {
FILE: libs/flowbite-angular/accordion/src/accordion-title/accordion-title.directive.ts
class AccordionTitle (line 42) | class AccordionTitle {
FILE: libs/flowbite-angular/accordion/src/accordion-title/theme.ts
type FlowbiteAccordionTitleTheme (line 6) | interface FlowbiteAccordionTitleTheme {
type FlowbiteAccordionTitleHostTheme (line 10) | interface FlowbiteAccordionTitleHostTheme {
FILE: libs/flowbite-angular/accordion/src/accordion/accordion.directive.ts
class Accordion (line 29) | class Accordion {
FILE: libs/flowbite-angular/accordion/src/accordion/theme.ts
type FlowbiteAccordionColors (line 4) | interface FlowbiteAccordionColors
type FlowbiteAccordionTheme (line 9) | interface FlowbiteAccordionTheme {
type FlowbiteAccordionHostTheme (line 13) | interface FlowbiteAccordionHostTheme {
FILE: libs/flowbite-angular/accordion/src/config/accordion-config.ts
type FlowbiteAccordionConfig (line 9) | interface FlowbiteAccordionConfig {
FILE: libs/flowbite-angular/accordion/src/config/accordion-content-config.ts
type FlowbiteAccordionContentConfig (line 11) | interface FlowbiteAccordionContentConfig {
FILE: libs/flowbite-angular/accordion/src/config/accordion-item-config.ts
type FlowbiteAccordionItemConfig (line 11) | interface FlowbiteAccordionItemConfig {
FILE: libs/flowbite-angular/accordion/src/config/accordion-title-config.ts
type FlowbiteAccordionTitleConfig (line 11) | interface FlowbiteAccordionTitleConfig {
FILE: libs/flowbite-angular/alert/src/alert-button/alert-button.directive.ts
class AlertButton (line 34) | class AlertButton {
FILE: libs/flowbite-angular/alert/src/alert-button/theme.ts
type FlowbiteAlertButtonTheme (line 5) | interface FlowbiteAlertButtonTheme {
type FlowbiteAlertButtonHostTheme (line 9) | interface FlowbiteAlertButtonHostTheme {
FILE: libs/flowbite-angular/alert/src/alert-content/alert-content.directive.ts
class AlertContent (line 20) | class AlertContent {
FILE: libs/flowbite-angular/alert/src/alert-content/theme.ts
type FlowbiteAlertContentTheme (line 5) | interface FlowbiteAlertContentTheme {
type FlowbiteAlertContentHostTheme (line 9) | interface FlowbiteAlertContentHostTheme {
FILE: libs/flowbite-angular/alert/src/alert/alert.directive.ts
class Alert (line 21) | class Alert {
FILE: libs/flowbite-angular/alert/src/alert/theme.ts
type FlowbiteAlertColors (line 4) | interface FlowbiteAlertColors
type FlowbiteAlertTheme (line 9) | interface FlowbiteAlertTheme {
type FlowbiteAlertHostTheme (line 13) | interface FlowbiteAlertHostTheme {
FILE: libs/flowbite-angular/alert/src/config/alert-button-config.ts
type FlowbiteAlertButtonConfig (line 8) | interface FlowbiteAlertButtonConfig {
FILE: libs/flowbite-angular/alert/src/config/alert-config.ts
type FlowbiteAlertConfig (line 12) | interface FlowbiteAlertConfig {
FILE: libs/flowbite-angular/alert/src/config/alert-content-config.ts
type FlowbiteAlertContentConfig (line 8) | interface FlowbiteAlertContentConfig {
FILE: libs/flowbite-angular/badge/src/badge-button/badge-button.directive.ts
class BadgeButton (line 34) | class BadgeButton {
FILE: libs/flowbite-angular/badge/src/badge-button/theme.ts
type FlowbiteBadgeButtonTheme (line 5) | interface FlowbiteBadgeButtonTheme {
type FlowbiteBadgeButtonHostTheme (line 9) | interface FlowbiteBadgeButtonHostTheme {
FILE: libs/flowbite-angular/badge/src/badge-link/badge-link.directive.ts
class BadgeLink (line 40) | class BadgeLink {
FILE: libs/flowbite-angular/badge/src/badge-link/theme.ts
type FlowbiteBadgeLinkTheme (line 5) | interface FlowbiteBadgeLinkTheme {
type FlowbiteBadgeLinkHostTheme (line 9) | interface FlowbiteBadgeLinkHostTheme {
FILE: libs/flowbite-angular/badge/src/badge/badge.directive.ts
class Badge (line 21) | class Badge {
FILE: libs/flowbite-angular/badge/src/badge/theme.ts
type FlowbiteBadgeColors (line 9) | interface FlowbiteBadgeColors
type FlowbiteBadgeSizes (line 14) | interface FlowbiteBadgeSizes extends Pick<FlowbiteSizes, 'xs' | 'sm'> {
type FlowbiteBadgeTheme (line 18) | interface FlowbiteBadgeTheme {
type FlowbiteBadgeHostTheme (line 22) | interface FlowbiteBadgeHostTheme {
FILE: libs/flowbite-angular/badge/src/config/badge-button-config.ts
type FlowbiteBadgeButtonConfig (line 8) | interface FlowbiteBadgeButtonConfig {
FILE: libs/flowbite-angular/badge/src/config/badge-config.ts
type FlowbiteBadgeConfig (line 13) | interface FlowbiteBadgeConfig {
FILE: libs/flowbite-angular/badge/src/config/badge-link-config.ts
type FlowbiteBadgeLinkConfig (line 8) | interface FlowbiteBadgeLinkConfig {
FILE: libs/flowbite-angular/breadcrumb/src/breadcrumb-content/breadcrumb-content.directive.ts
class BreadcrumbContent (line 22) | class BreadcrumbContent {
FILE: libs/flowbite-angular/breadcrumb/src/breadcrumb-content/theme.ts
type FlowbiteBreadcrumbContentTheme (line 3) | interface FlowbiteBreadcrumbContentTheme {
type FlowbiteBreadcrumbContentHostTheme (line 7) | interface FlowbiteBreadcrumbContentHostTheme {
FILE: libs/flowbite-angular/breadcrumb/src/breadcrumb-item/breadcrumb-item.directive.ts
class BreadcrumbItem (line 38) | class BreadcrumbItem {
FILE: libs/flowbite-angular/breadcrumb/src/breadcrumb-item/theme.ts
type FlowbiteBreadcrumbItemTheme (line 5) | interface FlowbiteBreadcrumbItemTheme {
type FlowbiteBreadcrumbItemHostTheme (line 9) | interface FlowbiteBreadcrumbItemHostTheme {
FILE: libs/flowbite-angular/breadcrumb/src/breadcrumb/breadcrumb.directive.ts
class Breadcrumb (line 21) | class Breadcrumb {
FILE: libs/flowbite-angular/breadcrumb/src/breadcrumb/theme.ts
type FlowbiteBreadcrumbColors (line 4) | interface FlowbiteBreadcrumbColors
type FlowbiteBreadcrumbTheme (line 9) | interface FlowbiteBreadcrumbTheme {
type FlowbiteBreadcrumbHostTheme (line 13) | interface FlowbiteBreadcrumbHostTheme {
FILE: libs/flowbite-angular/breadcrumb/src/config/breadcrumb-config.ts
type FlowbiteBreadcrumbConfig (line 12) | interface FlowbiteBreadcrumbConfig {
FILE: libs/flowbite-angular/breadcrumb/src/config/breadcrumb-content-config.ts
type FlowbiteBreadcrumbContentConfig (line 11) | interface FlowbiteBreadcrumbContentConfig {
FILE: libs/flowbite-angular/breadcrumb/src/config/breadcrumb-item-config.ts
type FlowbiteBreadcrumbItemConfig (line 9) | interface FlowbiteBreadcrumbItemConfig {
FILE: libs/flowbite-angular/button-group/src/button-group/button-group.directive.ts
class ButtonGroup (line 19) | class ButtonGroup {
FILE: libs/flowbite-angular/button-group/src/button-group/theme.ts
type FlowbiteButtonGroupTheme (line 3) | interface FlowbiteButtonGroupTheme {
type FlowbiteButtonGroupHostTheme (line 7) | interface FlowbiteButtonGroupHostTheme {
FILE: libs/flowbite-angular/button-group/src/config/button-group-config.ts
type FlowbiteButtonGroupConfig (line 8) | interface FlowbiteButtonGroupConfig {
FILE: libs/flowbite-angular/button/src/base-button/base-button.directive.ts
class BaseButton (line 11) | class BaseButton {
FILE: libs/flowbite-angular/button/src/base-button/theme.ts
type FlowbiteBaseButtonSizes (line 3) | interface FlowbiteBaseButtonSizes
type FlowbiteBaseButtonColors (line 8) | interface FlowbiteBaseButtonColors
FILE: libs/flowbite-angular/button/src/button/button.directive.ts
class Button (line 40) | class Button {
FILE: libs/flowbite-angular/button/src/button/theme.ts
type FlowbiteButtonTheme (line 6) | interface FlowbiteButtonTheme {
type FlowbiteButtonHostTheme (line 10) | interface FlowbiteButtonHostTheme {
FILE: libs/flowbite-angular/button/src/config/base-button-config.ts
type FlowbiteBaseButtonConfig (line 6) | interface FlowbiteBaseButtonConfig {
FILE: libs/flowbite-angular/button/src/config/button-config.ts
type FlowbiteButtonConfig (line 8) | interface FlowbiteButtonConfig {
FILE: libs/flowbite-angular/card/src/card-content/card-content.directive.ts
class CardContent (line 21) | class CardContent {
FILE: libs/flowbite-angular/card/src/card-content/theme.ts
type FlowbiteCardContentTheme (line 5) | interface FlowbiteCardContentTheme {
type FlowbiteCardContentHostTheme (line 9) | interface FlowbiteCardContentHostTheme {
FILE: libs/flowbite-angular/card/src/card-header/card-header.directive.ts
class CardHeader (line 20) | class CardHeader {
FILE: libs/flowbite-angular/card/src/card-header/theme.ts
type FlowbiteCardHeaderTheme (line 5) | interface FlowbiteCardHeaderTheme {
type FlowbiteCardHeaderHostTheme (line 9) | interface FlowbiteCardHeaderHostTheme {
FILE: libs/flowbite-angular/card/src/card/card.directive.ts
class Card (line 19) | class Card {
FILE: libs/flowbite-angular/card/src/card/theme.ts
type FlowbiteCardOrientation (line 4) | interface FlowbiteCardOrientation {
type FLowbiteCardColors (line 9) | interface FLowbiteCardColors
type FlowbiteCardSizes (line 14) | interface FlowbiteCardSizes extends Pick<FlowbiteSizes, 'xs' | 'sm' | 'm...
type FlowbiteCardTheme (line 18) | interface FlowbiteCardTheme {
type FlowbiteCardHostTheme (line 22) | interface FlowbiteCardHostTheme {
FILE: libs/flowbite-angular/card/src/config/card-config.ts
type FlowbiteCardConfig (line 9) | interface FlowbiteCardConfig {
FILE: libs/flowbite-angular/card/src/config/card-content-config.ts
type FlowbiteCardContentConfig (line 8) | interface FlowbiteCardContentConfig {
FILE: libs/flowbite-angular/card/src/config/card-header-config.ts
type FlowbiteCardHeaderConfig (line 8) | interface FlowbiteCardHeaderConfig {
FILE: libs/flowbite-angular/clipboard/src/clipboard/clipboard.component.ts
class Clipboard (line 69) | class Clipboard {
method onClick (line 98) | onClick(): void {
method copyToClipboard (line 105) | copyToClipboard(): void {
FILE: libs/flowbite-angular/clipboard/src/clipboard/theme.ts
type FlowbiteClipboardTheme (line 3) | interface FlowbiteClipboardTheme {
type FlowbiteClipboardHostTheme (line 7) | interface FlowbiteClipboardHostTheme {
FILE: libs/flowbite-angular/clipboard/src/config/clipboard-config.ts
type FlowbiteClipboardConfig (line 8) | interface FlowbiteClipboardConfig {
FILE: libs/flowbite-angular/core/src/core/flowbite.boolean.ts
type FlowbiteBoolean (line 1) | interface FlowbiteBoolean {
FILE: libs/flowbite-angular/core/src/core/flowbite.colors.ts
type ColorToTheme (line 1) | interface ColorToTheme {
type FlowbiteStateColors (line 6) | interface FlowbiteStateColors {
type FlowbiteColors (line 14) | interface FlowbiteColors extends FlowbiteStateColors {
type FlowbiteGradientColors (line 32) | interface FlowbiteGradientColors extends Omit<FlowbiteStateColors, 'warn...
type FlowbiteGradientDuoToneColors (line 41) | interface FlowbiteGradientDuoToneColors {
FILE: libs/flowbite-angular/core/src/core/flowbite.deep-partial.ts
type DeepPartial (line 4) | type DeepPartial<T> = T extends object
FILE: libs/flowbite-angular/core/src/core/flowbite.positions.ts
type FlowbitePositions (line 1) | interface FlowbitePositions {
FILE: libs/flowbite-angular/core/src/core/flowbite.sizes.ts
type FlowbiteSizes (line 1) | interface FlowbiteSizes {
FILE: libs/flowbite-angular/core/src/core/flowbite.themes.ts
type FlowbiteThemes (line 4) | type FlowbiteThemes = 'dark' | 'light';
FILE: libs/flowbite-angular/core/src/utils/clone-deep.ts
function cloneDeep (line 9) | function cloneDeep<T>(source: T): T {
FILE: libs/flowbite-angular/core/src/utils/color-to-theme.ts
function colorToTheme (line 3) | function colorToTheme<TSet extends Partial<FlowbiteColors>>(
FILE: libs/flowbite-angular/core/src/utils/create-theme.ts
function createTheme (line 7) | function createTheme<T>(input: T) {
FILE: libs/flowbite-angular/core/src/utils/is-object.ts
function isObject (line 7) | function isObject(item: unknown): item is Record<string, unknown> {
FILE: libs/flowbite-angular/core/src/utils/merge-theme.ts
function mergeDeep (line 11) | function mergeDeep<T extends object, S extends object>(target: T, source...
FILE: libs/flowbite-angular/dropdown/src/config/dropdown-config.ts
type FlowbiteDropdownConfig (line 9) | interface FlowbiteDropdownConfig {
FILE: libs/flowbite-angular/dropdown/src/config/dropdown-content-config.ts
type FlowbiteDropdownContentConfig (line 11) | interface FlowbiteDropdownContentConfig {
FILE: libs/flowbite-angular/dropdown/src/config/dropdown-item-config.ts
type FlowbiteDropdownItemConfig (line 9) | interface FlowbiteDropdownItemConfig {
FILE: libs/flowbite-angular/dropdown/src/dropdown-content/dropdown-content.directive.ts
class DropdownContent (line 23) | class DropdownContent {
FILE: libs/flowbite-angular/dropdown/src/dropdown-content/theme.ts
type FlowbiteDropdownContentTheme (line 5) | interface FlowbiteDropdownContentTheme {
type FlowbiteDropdownContentHostTheme (line 9) | interface FlowbiteDropdownContentHostTheme {
FILE: libs/flowbite-angular/dropdown/src/dropdown-item/dropdown-item.directive.ts
class DropdownItem (line 37) | class DropdownItem {
FILE: libs/flowbite-angular/dropdown/src/dropdown-item/theme.ts
type FlowbiteDropdownItemTheme (line 5) | interface FlowbiteDropdownItemTheme {
type FlowbiteDropdownItemHostTheme (line 9) | interface FlowbiteDropdownItemHostTheme {
FILE: libs/flowbite-angular/dropdown/src/dropdown/dropdown.directive.ts
class Dropdown (line 28) | class Dropdown {
FILE: libs/flowbite-angular/dropdown/src/dropdown/theme.ts
type FLowbiteDropdownColors (line 4) | interface FLowbiteDropdownColors
type FlowbiteDropdownTheme (line 9) | interface FlowbiteDropdownTheme {
type FlowbiteDropdownHostTheme (line 13) | interface FlowbiteDropdownHostTheme {
FILE: libs/flowbite-angular/form/src/config/form-control-config.ts
type FlowbiteFormControlConfig (line 8) | interface FlowbiteFormControlConfig {
FILE: libs/flowbite-angular/form/src/config/form-field-config.ts
type FlowbiteFormFieldConfig (line 13) | interface FlowbiteFormFieldConfig {
FILE: libs/flowbite-angular/form/src/config/helper-config.ts
type FlowbiteHelperConfig (line 8) | interface FlowbiteHelperConfig {
FILE: libs/flowbite-angular/form/src/config/label-config.ts
type FlowbiteLabelConfig (line 8) | interface FlowbiteLabelConfig {
FILE: libs/flowbite-angular/form/src/form-control/form-control.directive.ts
class FormControl (line 27) | class FormControl {
FILE: libs/flowbite-angular/form/src/form-control/theme.ts
type FlowbiteFormControlTheme (line 9) | interface FlowbiteFormControlTheme {
type FlowbiteFormControlHostTheme (line 13) | interface FlowbiteFormControlHostTheme {
FILE: libs/flowbite-angular/form/src/form-field/form-field.directive.ts
class FormField (line 26) | class FormField {
FILE: libs/flowbite-angular/form/src/form-field/theme.ts
type FlowbiteFormFieldColors (line 4) | interface FlowbiteFormFieldColors
type FlowbiteFormFieldSizes (line 9) | interface FlowbiteFormFieldSizes extends Pick<FlowbiteSizes, 'sm' | 'md'...
type FlowbiteFormFieldModes (line 13) | interface FlowbiteFormFieldModes {
type FlowbiteFormFieldTheme (line 19) | interface FlowbiteFormFieldTheme {
type FlowbiteFormFieldHostTheme (line 23) | interface FlowbiteFormFieldHostTheme {
FILE: libs/flowbite-angular/form/src/helper/helper.directive.ts
class Helper (line 28) | class Helper {
FILE: libs/flowbite-angular/form/src/helper/theme.ts
type FlowbiteHelperTheme (line 5) | interface FlowbiteHelperTheme {
type FlowbiteHelperHostTheme (line 9) | interface FlowbiteHelperHostTheme {
FILE: libs/flowbite-angular/form/src/label/label.directive.ts
class Label (line 28) | class Label {
FILE: libs/flowbite-angular/form/src/label/theme.ts
type FlowbiteLabelTheme (line 5) | interface FlowbiteLabelTheme {
type FlowbiteLabelHostTheme (line 9) | interface FlowbiteLabelHostTheme {
FILE: libs/flowbite-angular/icon/src/config/icon-config.ts
type FlowbiteIconConfig (line 9) | interface FlowbiteIconConfig {
FILE: libs/flowbite-angular/icon/src/icon/icon-state.ts
type NgIconPreProcessor (line 17) | type NgIconPreProcessor = (icon: string) => string;
type NgIconPostProcessor (line 18) | type NgIconPostProcessor = (element: HTMLElement | SVGElement) => void;
function injectNgIconPreProcessor (line 28) | function injectNgIconPreProcessor(): NgIconPreProcessor {
function injectNgIconPostProcessor (line 32) | function injectNgIconPostProcessor(): NgIconPostProcessor {
FILE: libs/flowbite-angular/icon/src/icon/icon.component.ts
class Icon (line 70) | class Icon implements OnDestroy {
method constructor (line 137) | constructor() {
method ngOnDestroy (line 151) | ngOnDestroy(): void {
method updateIcon (line 155) | private async updateIcon(): Promise<void> {
method setSvg (line 202) | private setSvg(svg: string): void {
method replaceIds (line 250) | private replaceIds(svg: string): string {
method requestIconFromLoader (line 287) | private requestIconFromLoader(name: string): Promise<string> {
FILE: libs/flowbite-angular/icon/src/icon/theme.ts
type FlowbiteIconColors (line 4) | interface FlowbiteIconColors extends FlowbiteColors {
type FlowbiteIconTheme (line 8) | interface FlowbiteIconTheme {
type FlowbiteIconHostTheme (line 12) | interface FlowbiteIconHostTheme {
FILE: libs/flowbite-angular/indicator/src/config/indicator-config.ts
type FlowbiteIndicatorConfig (line 13) | interface FlowbiteIndicatorConfig {
FILE: libs/flowbite-angular/indicator/src/indicator/indicator.directive.ts
class Indicator (line 19) | class Indicator {
FILE: libs/flowbite-angular/indicator/src/indicator/theme.ts
type FlowbiteIndicatorColors (line 10) | interface FlowbiteIndicatorColors
type FlowbiteIndicatorSizes (line 15) | interface FlowbiteIndicatorSizes
type FlowbiteIndicatorPositions (line 20) | interface FlowbiteIndicatorPositions extends FlowbitePositions {
type FlowbiteIndicatorTheme (line 24) | interface FlowbiteIndicatorTheme {
type FlowbiteIndicatorHostTheme (line 28) | interface FlowbiteIndicatorHostTheme {
FILE: libs/flowbite-angular/modal/src/config/modal-config.ts
type FlowbiteModalConfig (line 8) | interface FlowbiteModalConfig {
FILE: libs/flowbite-angular/modal/src/config/modal-content-config.ts
type FlowbiteModalContentConfig (line 8) | interface FlowbiteModalContentConfig {
FILE: libs/flowbite-angular/modal/src/config/modal-footer-config.ts
type FlowbiteModalFooterConfig (line 8) | interface FlowbiteModalFooterConfig {
FILE: libs/flowbite-angular/modal/src/config/modal-header-config.ts
type FlowbiteModalHeaderConfig (line 8) | interface FlowbiteModalHeaderConfig {
FILE: libs/flowbite-angular/modal/src/config/modal-overlay-config.ts
type FlowbiteModalOverlayConfig (line 9) | interface FlowbiteModalOverlayConfig {
FILE: libs/flowbite-angular/modal/src/modal-content/modal-content.directive.ts
class ModalContent (line 27) | class ModalContent {
FILE: libs/flowbite-angular/modal/src/modal-content/theme.ts
type FlowbiteModalContentTheme (line 3) | interface FlowbiteModalContentTheme {
type FlowbiteModalContentHostTheme (line 7) | interface FlowbiteModalContentHostTheme {
FILE: libs/flowbite-angular/modal/src/modal-footer/modal-footer.directive.ts
class ModalFooter (line 20) | class ModalFooter {
FILE: libs/flowbite-angular/modal/src/modal-footer/theme.ts
type FlowbiteModalFooterTheme (line 3) | interface FlowbiteModalFooterTheme {
type FlowbiteModalFooterHostTheme (line 7) | interface FlowbiteModalFooterHostTheme {
FILE: libs/flowbite-angular/modal/src/modal-header/modal-header.directive.ts
class ModalHeader (line 32) | class ModalHeader {
FILE: libs/flowbite-angular/modal/src/modal-header/theme.ts
type FlowbiteModalHeaderTheme (line 3) | interface FlowbiteModalHeaderTheme {
type FlowbiteModalHeaderHostTheme (line 7) | interface FlowbiteModalHeaderHostTheme {
FILE: libs/flowbite-angular/modal/src/modal-overlay/modal-overlay.directive.ts
class ModalOverlay (line 27) | class ModalOverlay {
FILE: libs/flowbite-angular/modal/src/modal-overlay/theme.ts
type FlowbiteModalOverlayPositions (line 4) | interface FlowbiteModalOverlayPositions
type FlowbiteModalOverlayTheme (line 20) | interface FlowbiteModalOverlayTheme {
type FlowbiteModalOverlayHostTheme (line 24) | interface FlowbiteModalOverlayHostTheme {
FILE: libs/flowbite-angular/modal/src/modal/modal.directive.ts
class Modal (line 28) | class Modal {
FILE: libs/flowbite-angular/modal/src/modal/theme.ts
type FlowbiteModalSizes (line 4) | interface FlowbiteModalSizes extends Pick<FlowbiteSizes, 'sm' | 'md' | '...
type FlowbiteModalTheme (line 8) | interface FlowbiteModalTheme {
type FlowbiteModalHostTheme (line 12) | interface FlowbiteModalHostTheme {
FILE: libs/flowbite-angular/navbar/src/config/navbar-brand-config.ts
type FlowbiteNavbarBrandConfig (line 8) | interface FlowbiteNavbarBrandConfig {
FILE: libs/flowbite-angular/navbar/src/config/navbar-config.ts
type FlowbiteNavbarConfig (line 9) | interface FlowbiteNavbarConfig {
FILE: libs/flowbite-angular/navbar/src/config/navbar-content-config.ts
type FlowbiteNavbarContentConfig (line 11) | interface FlowbiteNavbarContentConfig {
FILE: libs/flowbite-angular/navbar/src/config/navbar-icon-item-config.ts
type FlowbiteNavbarIconItemConfig (line 11) | interface FlowbiteNavbarIconItemConfig {
FILE: libs/flowbite-angular/navbar/src/config/navbar-item-config.ts
type FlowbiteNavbarItemConfig (line 8) | interface FlowbiteNavbarItemConfig {
FILE: libs/flowbite-angular/navbar/src/config/navbar-toggle-config.ts
type FlowbiteNavbarToggleConfig (line 8) | interface FlowbiteNavbarToggleConfig {
FILE: libs/flowbite-angular/navbar/src/navbar-brand/navbar-brand.directive.ts
class NavbarBrand (line 23) | class NavbarBrand {
FILE: libs/flowbite-angular/navbar/src/navbar-brand/theme.ts
type FlowbiteNavbarBrandTheme (line 3) | interface FlowbiteNavbarBrandTheme {
type FlowbiteNavbarBrandHostTheme (line 7) | interface FlowbiteNavbarBrandHostTheme {
FILE: libs/flowbite-angular/navbar/src/navbar-content/navbar-content.component.ts
class NavbarContent (line 38) | class NavbarContent {
FILE: libs/flowbite-angular/navbar/src/navbar-content/theme.ts
type FlowbiteNavbarContentTheme (line 6) | interface FlowbiteNavbarContentTheme {
type FlowbiteNavbarContentHostTheme (line 11) | interface FlowbiteNavbarContentHostTheme {
type FlowbiteNavbarContentContainerTheme (line 18) | interface FlowbiteNavbarContentContainerTheme {
FILE: libs/flowbite-angular/navbar/src/navbar-icon-item/navbar-icon-item.directive.ts
class NavbarIconItem (line 44) | class NavbarIconItem {
FILE: libs/flowbite-angular/navbar/src/navbar-icon-item/theme.ts
type FlowbiteNavbarIconItemTheme (line 6) | interface FlowbiteNavbarIconItemTheme {
type FlowbiteNavbarIconItemHostTheme (line 10) | interface FlowbiteNavbarIconItemHostTheme {
FILE: libs/flowbite-angular/navbar/src/navbar-item/navbar-item.directive.ts
class NavbarItem (line 44) | class NavbarItem {
method onClick (line 74) | onClick(): void {
method toggleNavbar (line 81) | toggleNavbar(): void {
FILE: libs/flowbite-angular/navbar/src/navbar-item/theme.ts
type FlowbiteNavbarItemTheme (line 5) | interface FlowbiteNavbarItemTheme {
type FlowbiteNavbarItemHostTheme (line 9) | interface FlowbiteNavbarItemHostTheme {
FILE: libs/flowbite-angular/navbar/src/navbar-toggle/navbar-toggle.directive.ts
class NavbarToggle (line 33) | class NavbarToggle {
method onClick (line 63) | onClick(): void {
method toggleNavbar (line 70) | toggleNavbar(): void {
FILE: libs/flowbite-angular/navbar/src/navbar-toggle/theme.ts
type FlowbiteNavbarToggleTheme (line 5) | interface FlowbiteNavbarToggleTheme {
type FlowbiteNavbarToggleHostTheme (line 9) | interface FlowbiteNavbarToggleHostTheme {
FILE: libs/flowbite-angular/navbar/src/navbar/navbar.component.ts
class Navbar (line 36) | class Navbar {
method toggle (line 82) | toggle(newState?: boolean): void {
FILE: libs/flowbite-angular/navbar/src/navbar/theme.ts
type FlowbiteNavbarColors (line 4) | interface FlowbiteNavbarColors
type FlowbiteNavbarTheme (line 9) | interface FlowbiteNavbarTheme {
type FlowbiteNavbarHostTheme (line 14) | interface FlowbiteNavbarHostTheme {
type FlowbiteNavbarContainerTheme (line 21) | interface FlowbiteNavbarContainerTheme {
FILE: libs/flowbite-angular/pagination/src/config/pagination-button-config.ts
type FlowbitePaginationButtonConfig (line 15) | interface FlowbitePaginationButtonConfig {
FILE: libs/flowbite-angular/pagination/src/config/pagination-config.ts
type FlowbitePaginationConfig (line 9) | interface FlowbitePaginationConfig {
FILE: libs/flowbite-angular/pagination/src/config/pagination-first-config.ts
type FlowbitePaginationFirstConfig (line 15) | interface FlowbitePaginationFirstConfig {
FILE: libs/flowbite-angular/pagination/src/config/pagination-last-config.ts
type FlowbitePaginationLastConfig (line 15) | interface FlowbitePaginationLastConfig {
FILE: libs/flowbite-angular/pagination/src/config/pagination-next-config.ts
type FlowbitePaginationNextConfig (line 15) | interface FlowbitePaginationNextConfig {
FILE: libs/flowbite-angular/pagination/src/config/pagination-previous-config.ts
type FlowbitePaginationPreviousConfig (line 15) | interface FlowbitePaginationPreviousConfig {
FILE: libs/flowbite-angular/pagination/src/pagination-button/pagination-button.component.ts
class PaginationButton (line 53) | class PaginationButton {
FILE: libs/flowbite-angular/pagination/src/pagination-button/theme.ts
type FlowbitePaginationButtonSizes (line 6) | interface FlowbitePaginationButtonSizes extends FlowbitePaginationSizes {
type FlowbitePaginationButtonColors (line 10) | interface FlowbitePaginationButtonColors extends FlowbitePaginationColors {
type FlowbitePaginationButtonTheme (line 14) | interface FlowbitePaginationButtonTheme {
type FlowbitePaginationButtonHostTheme (line 18) | interface FlowbitePaginationButtonHostTheme {
FILE: libs/flowbite-angular/pagination/src/pagination-first/pagination-first.component.ts
class PaginationFirst (line 60) | class PaginationFirst {
FILE: libs/flowbite-angular/pagination/src/pagination-first/theme.ts
type FlowbitePaginationFirstSizes (line 6) | interface FlowbitePaginationFirstSizes extends FlowbitePaginationSizes {
type FlowbitePaginationFirstColors (line 10) | interface FlowbitePaginationFirstColors extends FlowbitePaginationColors {
type FlowbitePaginationFirstTheme (line 14) | interface FlowbitePaginationFirstTheme {
type FlowbitePaginationFirstHostTheme (line 18) | interface FlowbitePaginationFirstHostTheme {
FILE: libs/flowbite-angular/pagination/src/pagination-last/pagination-last.component.ts
class PaginationLast (line 60) | class PaginationLast {
FILE: libs/flowbite-angular/pagination/src/pagination-last/theme.ts
type FlowbitePaginationLastSizes (line 6) | interface FlowbitePaginationLastSizes extends FlowbitePaginationSizes {
type FlowbitePaginationLastColors (line 10) | interface FlowbitePaginationLastColors extends FlowbitePaginationColors {
type FlowbitePaginationLastTheme (line 14) | interface FlowbitePaginationLastTheme {
type FlowbitePaginationLastHostTheme (line 18) | interface FlowbitePaginationLastHostTheme {
FILE: libs/flowbite-angular/pagination/src/pagination-next/pagination-next.component.ts
class PaginationNext (line 60) | class PaginationNext {
FILE: libs/flowbite-angular/pagination/src/pagination-next/theme.ts
type FlowbitePaginationNextSizes (line 6) | interface FlowbitePaginationNextSizes extends FlowbitePaginationSizes {
type FlowbitePaginationNextColors (line 10) | interface FlowbitePaginationNextColors extends FlowbitePaginationColors {
type FlowbitePaginationNextTheme (line 14) | interface FlowbitePaginationNextTheme {
type FlowbitePaginationNextHostTheme (line 18) | interface FlowbitePaginationNextHostTheme {
FILE: libs/flowbite-angular/pagination/src/pagination-previous/pagination-previous.component.ts
class PaginationPrevious (line 60) | class PaginationPrevious {
FILE: libs/flowbite-angular/pagination/src/pagination-previous/theme.ts
type FlowbitePaginationPreviousSizes (line 6) | interface FlowbitePaginationPreviousSizes extends FlowbitePaginationSizes {
type FlowbitePaginationPreviousColors (line 10) | interface FlowbitePaginationPreviousColors extends FlowbitePaginationCol...
type FlowbitePaginationPreviousTheme (line 14) | interface FlowbitePaginationPreviousTheme {
type FlowbitePaginationPreviousHostTheme (line 18) | interface FlowbitePaginationPreviousHostTheme {
FILE: libs/flowbite-angular/pagination/src/pagination/pagination.component.ts
class Pagination (line 108) | class Pagination {
FILE: libs/flowbite-angular/pagination/src/pagination/theme.ts
type FlowbitePaginationSizes (line 5) | interface FlowbitePaginationSizes
type FlowbitePaginationColors (line 10) | interface FlowbitePaginationColors extends FlowbiteBaseButtonColors {
type FlowbitePaginationTheme (line 14) | interface FlowbitePaginationTheme {
type FlowbitePaginationHostTheme (line 19) | interface FlowbitePaginationHostTheme {
type FlowbitePaginationContainerTheme (line 24) | interface FlowbitePaginationContainerTheme {
FILE: libs/flowbite-angular/sidebar/src/config/sidebar-config.ts
type FlowbiteSidebarConfig (line 9) | interface FlowbiteSidebarConfig {
FILE: libs/flowbite-angular/sidebar/src/config/sidebar-content-config.ts
type FlowbiteSidebarContentConfig (line 11) | interface FlowbiteSidebarContentConfig {
FILE: libs/flowbite-angular/sidebar/src/config/sidebar-item-config.ts
type FlowbiteSidebarItemConfig (line 8) | interface FlowbiteSidebarItemConfig {
FILE: libs/flowbite-angular/sidebar/src/config/sidebar-toggle-config.ts
type FlowbiteSidebarToggleConfig (line 11) | interface FlowbiteSidebarToggleConfig {
FILE: libs/flowbite-angular/sidebar/src/sidebar-content/sidebar-content.component.ts
class SidebarContent (line 41) | class SidebarContent {
method onClick (line 76) | onClick($event: MouseEvent): void {
FILE: libs/flowbite-angular/sidebar/src/sidebar-content/theme.ts
type FlowbiteSidebarContentTheme (line 6) | interface FlowbiteSidebarContentTheme {
type FlowbiteSidebarContentHostTheme (line 11) | interface FlowbiteSidebarContentHostTheme {
type FlowbiteSidebarContentContainerTheme (line 18) | interface FlowbiteSidebarContentContainerTheme {
FILE: libs/flowbite-angular/sidebar/src/sidebar-item/sidebar-item.directive.ts
class SidebarItem (line 44) | class SidebarItem {
method onClick (line 77) | onClick(): void {
method toggleSidebar (line 84) | toggleSidebar(): void {
FILE: libs/flowbite-angular/sidebar/src/sidebar-item/theme.ts
type FlowbiteSidebarItemTheme (line 5) | interface FlowbiteSidebarItemTheme {
type FlowbiteSidebarItemHostTheme (line 9) | interface FlowbiteSidebarItemHostTheme {
FILE: libs/flowbite-angular/sidebar/src/sidebar-toggle/sidebar-toggle.directive.ts
class SidebarToggle (line 36) | class SidebarToggle {
method onClick (line 69) | onClick(): void {
method toggleSidebar (line 76) | toggleSidebar(): void {
FILE: libs/flowbite-angular/sidebar/src/sidebar-toggle/theme.ts
type FlowbiteSidebarToggleTheme (line 5) | interface FlowbiteSidebarToggleTheme {
type FlowbiteSidebarToggleHostTheme (line 9) | interface FlowbiteSidebarToggleHostTheme {
FILE: libs/flowbite-angular/sidebar/src/sidebar/sidebar.directive.ts
class Sidebar (line 24) | class Sidebar {
method onClick (line 62) | onClick(): void {
method toggle (line 69) | toggle(newState?: boolean): void {
FILE: libs/flowbite-angular/sidebar/src/sidebar/theme.ts
type FlowbiteSidebarColors (line 4) | interface FlowbiteSidebarColors
type FlowbiteSidebarTheme (line 9) | interface FlowbiteSidebarTheme {
type FlowbiteSidebarHostTheme (line 13) | interface FlowbiteSidebarHostTheme {
FILE: libs/flowbite-angular/tab/src/config/tab-button-config.ts
type FlowbiteTabButtonConfig (line 8) | interface FlowbiteTabButtonConfig {
FILE: libs/flowbite-angular/tab/src/config/tab-config.ts
type FlowbiteTabConfig (line 9) | interface FlowbiteTabConfig {
FILE: libs/flowbite-angular/tab/src/config/tab-content-config.ts
type FlowbiteTabContentConfig (line 8) | interface FlowbiteTabContentConfig {
FILE: libs/flowbite-angular/tab/src/config/tab-list-config.ts
type FlowbiteTabListConfig (line 8) | interface FlowbiteTabListConfig {
FILE: libs/flowbite-angular/tab/src/tab-button/tab-button.directive.ts
class TabButton (line 39) | class TabButton {
FILE: libs/flowbite-angular/tab/src/tab-button/theme.ts
type FlowbiteTabButtonTheme (line 5) | interface FlowbiteTabButtonTheme {
type FlowbiteTabButtonHostTheme (line 9) | interface FlowbiteTabButtonHostTheme {
FILE: libs/flowbite-angular/tab/src/tab-content/tab-content.directive.ts
class TabContent (line 27) | class TabContent {
FILE: libs/flowbite-angular/tab/src/tab-content/theme.ts
type FlowbiteTabContentTheme (line 5) | interface FlowbiteTabContentTheme {
type FlowbiteTabContentHostTheme (line 9) | interface FlowbiteTabContentHostTheme {
FILE: libs/flowbite-angular/tab/src/tab-list/tab-list.directive.ts
class TabList (line 27) | class TabList {
FILE: libs/flowbite-angular/tab/src/tab-list/theme.ts
type FlowbiteTabListTheme (line 5) | interface FlowbiteTabListTheme {
type FlowbiteTabListHostTheme (line 9) | interface FlowbiteTabListHostTheme {
FILE: libs/flowbite-angular/tab/src/tab/tab.directive.ts
class Tab (line 26) | class Tab {
FILE: libs/flowbite-angular/tab/src/tab/theme.ts
type FlowbiteTabSizes (line 4) | interface FlowbiteTabSizes extends Pick<FlowbiteSizes, 'sm' | 'md' | 'lg...
type FlowbiteTabColors (line 9) | interface FlowbiteTabColors
type FlowbiteTabTheme (line 14) | interface FlowbiteTabTheme {
type FlowbiteTabHostTheme (line 18) | interface FlowbiteTabHostTheme {
FILE: libs/flowbite-angular/table/src/config/table-body-config.ts
type FlowbiteTableBodyConfig (line 8) | interface FlowbiteTableBodyConfig {
FILE: libs/flowbite-angular/table/src/config/table-config.ts
type FlowbiteTableConfig (line 9) | interface FlowbiteTableConfig {
FILE: libs/flowbite-angular/table/src/config/table-foot-config.ts
type FlowbiteTableFootConfig (line 8) | interface FlowbiteTableFootConfig {
FILE: libs/flowbite-angular/table/src/config/table-head-config.ts
type FlowbiteTableHeadConfig (line 8) | interface FlowbiteTableHeadConfig {
FILE: libs/flowbite-angular/table/src/table-body/table-body.directive.ts
class TableBody (line 23) | class TableBody {
FILE: libs/flowbite-angular/table/src/table-body/theme.ts
type FlowbiteTableBodyTheme (line 5) | interface FlowbiteTableBodyTheme {
type FlowbiteTableBodyHostTheme (line 9) | interface FlowbiteTableBodyHostTheme {
FILE: libs/flowbite-angular/table/src/table-foot/table-foot.directive.ts
class TableFoot (line 20) | class TableFoot {
FILE: libs/flowbite-angular/table/src/table-foot/theme.ts
type FlowbiteTableFootTheme (line 5) | interface FlowbiteTableFootTheme {
type FlowbiteTableFootHostTheme (line 9) | interface FlowbiteTableFootHostTheme {
FILE: libs/flowbite-angular/table/src/table-head/table-head.directive.ts
class TableHead (line 20) | class TableHead {
FILE: libs/flowbite-angular/table/src/table-head/theme.ts
type FlowbiteTableHeadTheme (line 5) | interface FlowbiteTableHeadTheme {
type FlowbiteTableHeadHostTheme (line 9) | interface FlowbiteTableHeadHostTheme {
FILE: libs/flowbite-angular/table/src/table/table.component.ts
class Table (line 45) | class Table {
FILE: libs/flowbite-angular/table/src/table/theme.ts
type FlowbiteTableColors (line 4) | interface FlowbiteTableColors
type FlowbiteTableTheme (line 9) | interface FlowbiteTableTheme {
type FlowbiteTableHostTheme (line 13) | interface FlowbiteTableHostTheme {
FILE: libs/flowbite-angular/theme-toggle/src/config/theme-config.ts
type FlowbiteThemeConfig (line 6) | interface FlowbiteThemeConfig {
FILE: libs/flowbite-angular/theme-toggle/src/config/theme-toggle-config.ts
type FlowbiteThemeToggleConfig (line 8) | interface FlowbiteThemeToggleConfig {
FILE: libs/flowbite-angular/theme-toggle/src/theme-toggle/theme-toggle.component.ts
class ThemeToggle (line 64) | class ThemeToggle {
method onClick (line 98) | onClick(): void {
FILE: libs/flowbite-angular/theme-toggle/src/theme-toggle/theme.ts
type FlowbiteThemeToggleTheme (line 5) | interface FlowbiteThemeToggleTheme {
type FlowbiteThemeToggleHostTheme (line 9) | interface FlowbiteThemeToggleHostTheme {
FILE: libs/flowbite-angular/theme-toggle/src/theme/theme.directive.ts
class Theme (line 18) | class Theme {
method constructor (line 25) | constructor() {
method getLocalStorageTheme (line 31) | getLocalStorageTheme(): FlowbiteThemes | undefined {
method toggleTheme (line 44) | toggleTheme(theme?: FlowbiteThemes): void {
method setTheme (line 52) | setTheme(theme: FlowbiteThemes): void {
FILE: libs/flowbite-angular/tooltip/src/config/tooltip-config.ts
type FlowbiteTooltipConfig (line 9) | interface FlowbiteTooltipConfig {
FILE: libs/flowbite-angular/tooltip/src/tooltip/theme.ts
type FlowbiteTooltipColors (line 4) | interface FlowbiteTooltipColors
type FlowbiteTooltipTheme (line 9) | interface FlowbiteTooltipTheme {
type FlowbiteTooltipHostTheme (line 13) | interface FlowbiteTooltipHostTheme {
FILE: libs/flowbite-angular/tooltip/src/tooltip/tooltip.directive.ts
class Tooltip (line 20) | class Tooltip {
FILE: libs/tools/src/generators/component/generator.ts
function componentGenerator (line 9) | async function componentGenerator(tree: Tree, options: ComponentGenerato...
FILE: libs/tools/src/generators/component/schema.d.ts
type GenType (line 1) | type GenType = 'component' | 'directive';
type ComponentGeneratorSchema (line 3) | interface ComponentGeneratorSchema {
FILE: libs/tools/src/generators/documentation/generator.ts
function componentGenerator (line 6) | async function componentGenerator(tree: Tree, options: DocumentationGene...
FILE: libs/tools/src/generators/documentation/schema.d.ts
type DocumentationGeneratorSchema (line 1) | interface DocumentationGeneratorSchema {
FILE: libs/tools/src/generators/storybook/generator.ts
function storybookGenerator (line 6) | async function storybookGenerator(tree: Tree, options: StorybookGenerato...
FILE: libs/tools/src/generators/storybook/schema.d.ts
type StorybookGeneratorSchema (line 1) | interface StorybookGeneratorSchema {
FILE: libs/tools/src/utils/index.ts
function getComponentPath (line 4) | function getComponentPath(tree: Tree, component: string): string {
function getComponentSourceRoot (line 9) | function getComponentSourceRoot(tree: Tree, component: string): string {
function getComponentIndex (line 13) | function getComponentIndex(tree: Tree, component: string): string {
function addExportToIndex (line 17) | function addExportToIndex(tree: Tree, component: string, exportStatement...
Condensed preview — 623 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (1,365K chars).
[
{
"path": ".coderabbit.yaml",
"chars": 1425,
"preview": "language: en-US\ntone_instructions: ''\nearly_access: false\nenable_free_tier: true\nreviews:\n profile: chill\n request_cha"
},
{
"path": ".eslintignore",
"chars": 17,
"preview": "node_modules\ndist"
},
{
"path": ".eslintrc.json",
"chars": 866,
"preview": "{\n \"root\": true,\n \"ignorePatterns\": [\"!**/*\"],\n \"plugins\": [\"@nx\", \"@typescript-eslint\", \"prettier\"],\n \"extends\": [\""
},
{
"path": ".github/CODE_OF_CONDUCT",
"chars": 3219,
"preview": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, w"
},
{
"path": ".github/CONTRIBUTING",
"chars": 3338,
"preview": "# Contributing guide\n\n## What do I need to know to help?\n\nIf you are looking to help to with a code contribution our pro"
},
{
"path": ".github/ISSUE_TEMPLATE/bug_report.yaml",
"chars": 1742,
"preview": "name: '🐞 Bug Report'\ndescription: Report a bug\ntitle: '[Bug] {SCOPE} - '\nlabels: 'Type: bug'\nassignees: MGREMY\n\nbody:\n "
},
{
"path": ".github/ISSUE_TEMPLATE/feature_request.yaml",
"chars": 980,
"preview": "name: '🚀 Feature Request'\ndescription: Suggest a feature\ntitle: '[Feature] {SCOPE} - '\nlabels: 'Type: enhancement'\nassig"
},
{
"path": ".github/PULL_REQUEST_TEMPLATE/default_request_template.md",
"chars": 931,
"preview": "## PR Checklist\n\nPlease check if your PR fulfills the following requirements:\n\n<!--- [ ] Tests for the changes have been"
},
{
"path": ".github/PULL_REQUEST_TEMPLATE/release_request_template.md",
"chars": 341,
"preview": "## PR Type\n\nWhat kind of change does this PR introduce?\n\n<!-- Please check the one that applies to this PR using \"x\". --"
},
{
"path": ".github/pull_request_template.md",
"chars": 192,
"preview": "Please go to the `Preview` tab and select the appropriate sub-template:\n\n* [Default](?expand=1&template=default_request_"
},
{
"path": ".github/workflows/ci.yml",
"chars": 1480,
"preview": "name: CI Checks\n\non:\n workflow_dispatch:\n pull_request:\n\nconcurrency: ${{ github.ref }}\n\njobs:\n lint:\n strategy:\n "
},
{
"path": ".github/workflows/release.yml",
"chars": 2665,
"preview": "name: Release\n\non:\n workflow_dispatch:\n inputs:\n version:\n description: 'Specify the version'\n re"
},
{
"path": ".gitignore",
"chars": 596,
"preview": "# See http://help.github.com/ignore-files/ for more about ignoring files.\n\n# compiled output\n/dist\n/tmp\n/out-tsc\n\n# depe"
},
{
"path": ".husky/commit-msg",
"chars": 30,
"preview": "npx --no -- commitlint --edit\n"
},
{
"path": ".husky/pre-commit",
"chars": 50,
"preview": "pnpm dlx lint-staged --concurrent false --relative"
},
{
"path": ".lintstagedrc",
"chars": 93,
"preview": "{\r\n \"*.ts\": [\"nx affected:lint --fix --files\"],\r\n \"*\": [\"npx nx format:write --files\"]\r\n}\r\n"
},
{
"path": ".prettierignore",
"chars": 153,
"preview": "# Add files here to ignore them from prettier formatting\n\n/dist\n/node_modules\n/coverage\n\n.angular\n.github\n\n/.nx/cache\n/."
},
{
"path": ".prettierrc",
"chars": 619,
"preview": "{\n \"endOfLine\": \"crlf\",\n \"singleQuote\": true,\n \"printWidth\": 100,\n \"trailingComma\": \"es5\",\n \"bracketSameLine\": true"
},
{
"path": ".stylelintrc.json",
"chars": 123,
"preview": "{\n \"extends\": \"stylelint-config-standard\",\n \"rules\": {\n \"no-empty-source\": null,\n \"at-rule-no-unknown\": null\n }"
},
{
"path": ".vscode/extensions.json",
"chars": 145,
"preview": "{\n \"recommendations\": [\n \"angular.ng-template\",\n \"nrwl.angular-console\",\n \"esbenp.prettier-vscode\",\n \"dbaeu"
},
{
"path": ".vscode/settings.json",
"chars": 813,
"preview": "{\n \"editor.codeActionsOnSave\": {\n \"source.fixAll.eslint\": \"explicit\"\n },\n \"editor.defaultFormatter\": \"esbenp.prett"
},
{
"path": "LICENSE",
"chars": 29,
"preview": "libs/flowbite-angular/LICENSE"
},
{
"path": "README.md",
"chars": 31,
"preview": "libs/flowbite-angular/README.md"
},
{
"path": "apps/.gitkeep",
"chars": 0,
"preview": ""
},
{
"path": "apps/docs/.eslintrc.json",
"chars": 768,
"preview": "{\n \"extends\": [\"../../.eslintrc.json\"],\n \"ignorePatterns\": [\"!**/*\"],\n \"overrides\": [\n {\n \"files\": [\"*.ts\"],\n"
},
{
"path": "apps/docs/docs/components/accordion/_always-open.component.html",
"chars": 3201,
"preview": "<div\n flowbiteAccordion\n type=\"multiple\">\n <div\n flowbiteAccordionItem\n value=\"accordion-item-1\">\n <h5 flowb"
},
{
"path": "apps/docs/docs/components/accordion/_always-open.component.ts",
"chars": 403,
"preview": "import {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTitle,\n} from 'flowbite-angular/accordion';\n\nimpor"
},
{
"path": "apps/docs/docs/components/accordion/_color.component.html",
"chars": 3198,
"preview": "<div\n flowbiteAccordion\n color=\"info\">\n <div\n flowbiteAccordionItem\n value=\"accordion-item-1\">\n <h5 flowbite"
},
{
"path": "apps/docs/docs/components/accordion/_color.component.ts",
"chars": 392,
"preview": "import {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTitle,\n} from 'flowbite-angular/accordion';\n\nimpor"
},
{
"path": "apps/docs/docs/components/accordion/_default.component.html",
"chars": 3181,
"preview": "<div flowbiteAccordion>\n <div\n flowbiteAccordionItem\n value=\"accordion-item-1\">\n <h5 flowbiteAccordionTitle>Wh"
},
{
"path": "apps/docs/docs/components/accordion/_default.component.ts",
"chars": 396,
"preview": "import {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTitle,\n} from 'flowbite-angular/accordion';\n\nimpor"
},
{
"path": "apps/docs/docs/components/accordion/_flush.component.html",
"chars": 3191,
"preview": "<div\n flowbiteAccordion\n flush>\n <div\n flowbiteAccordionItem\n value=\"accordion-item-1\">\n <h5 flowbiteAccordi"
},
{
"path": "apps/docs/docs/components/accordion/_flush.component.ts",
"chars": 392,
"preview": "import {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTitle,\n} from 'flowbite-angular/accordion';\n\nimpor"
},
{
"path": "apps/docs/docs/components/accordion/_icon.component.html",
"chars": 3886,
"preview": "<div flowbiteAccordion>\n <div\n flowbiteAccordionItem\n value=\"accordion-item-1\"\n #accordionItem1=\"flowbiteAccor"
},
{
"path": "apps/docs/docs/components/accordion/_icon.component.ts",
"chars": 603,
"preview": "import {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTitle,\n} from 'flowbite-angular/accordion';\nimport"
},
{
"path": "apps/docs/docs/components/accordion/index.md",
"chars": 1425,
"preview": "---\nkeyword: AccordionPage\n---\n\n## Default accordion\n\n{{ NgDocActions.demo('flowbiteDefaultComponent', {container: false"
},
{
"path": "apps/docs/docs/components/accordion/ng-doc.page.ts",
"chars": 1678,
"preview": "import type { DocThemes } from '../../doc-theme.model';\nimport { toIndentedJson } from '../../doc-theme.model';\nimport C"
},
{
"path": "apps/docs/docs/components/alert/_border-accent.component.html",
"chars": 1380,
"preview": "<div\n flowbiteAlert\n border\n accent>\n <div flowbiteAlertContent>\n <span>\n <span class=\"font-medium\">default "
},
{
"path": "apps/docs/docs/components/alert/_border-accent.component.ts",
"chars": 316,
"preview": "import { Alert, AlertContent } from 'flowbite-angular/alert';\n\nimport { Component } from '@angular/core';\n\n@Component({\n"
},
{
"path": "apps/docs/docs/components/alert/_border.component.html",
"chars": 1326,
"preview": "<div\n flowbiteAlert\n border>\n <div flowbiteAlertContent>\n <span>\n <span class=\"font-medium\">default alert!</s"
},
{
"path": "apps/docs/docs/components/alert/_border.component.ts",
"chars": 303,
"preview": "import { Alert, AlertContent } from 'flowbite-angular/alert';\n\nimport { Component } from '@angular/core';\n\n@Component({\n"
},
{
"path": "apps/docs/docs/components/alert/_default.component.html",
"chars": 1270,
"preview": "<div flowbiteAlert>\n <div flowbiteAlertContent>\n <span>\n <span class=\"font-medium\">default alert!</span> Change"
},
{
"path": "apps/docs/docs/components/alert/_default.component.ts",
"chars": 305,
"preview": "import { Alert, AlertContent } from 'flowbite-angular/alert';\n\nimport { Component } from '@angular/core';\n\n@Component({\n"
},
{
"path": "apps/docs/docs/components/alert/_dismissable.component.html",
"chars": 3136,
"preview": "<div flowbiteAlert>\n <div flowbiteAlertContent>\n <span class=\"inline-flex items-center gap-2\">\n <flowbite-icon\n"
},
{
"path": "apps/docs/docs/components/alert/_dismissable.component.ts",
"chars": 631,
"preview": "import { Alert, AlertButton, AlertContent } from 'flowbite-angular/alert';\nimport { Icon } from 'flowbite-angular/icon';"
},
{
"path": "apps/docs/docs/components/alert/_icon.component.html",
"chars": 1996,
"preview": "<div flowbiteAlert>\n <div flowbiteAlertContent>\n <span class=\"inline-flex items-center gap-2\">\n <flowbite-icon\n"
},
{
"path": "apps/docs/docs/components/alert/_icon.component.ts",
"chars": 511,
"preview": "import { Alert, AlertContent } from 'flowbite-angular/alert';\nimport { Icon } from 'flowbite-angular/icon';\nimport { inf"
},
{
"path": "apps/docs/docs/components/alert/index.md",
"chars": 1462,
"preview": "---\nkeyword: AlertPage\n---\n\n## Default alert\n\n{{ NgDocActions.demo('flowbiteDefaultComponent', {container: false}) }}\n\n`"
},
{
"path": "apps/docs/docs/components/alert/ng-doc.page.ts",
"chars": 1429,
"preview": "import type { DocThemes } from '../../doc-theme.model';\nimport { toIndentedJson } from '../../doc-theme.model';\nimport C"
},
{
"path": "apps/docs/docs/components/badge/_border.component.html",
"chars": 462,
"preview": "<span\n flowbiteBadge\n border>\n <span>default</span>\n</span>\n<span\n flowbiteBadge\n border\n color=\"info\">\n <span>in"
},
{
"path": "apps/docs/docs/components/badge/_border.component.ts",
"chars": 275,
"preview": "import { Badge } from 'flowbite-angular/badge';\n\nimport { Component } from '@angular/core';\n\n@Component({\n imports: [Ba"
},
{
"path": "apps/docs/docs/components/badge/_default.component.html",
"chars": 406,
"preview": "<span flowbiteBadge>\n <span>default</span>\n</span>\n<span\n flowbiteBadge\n color=\"info\">\n <span>info</span>\n</span>\n<s"
},
{
"path": "apps/docs/docs/components/badge/_default.component.ts",
"chars": 277,
"preview": "import { Badge } from 'flowbite-angular/badge';\n\nimport { Component } from '@angular/core';\n\n@Component({\n imports: [Ba"
},
{
"path": "apps/docs/docs/components/badge/_dismiss.component.html",
"chars": 1756,
"preview": "<span flowbiteBadge>\n <flowbite-icon\n name=\"infoCircle\"\n class=\"size-4 stroke-2\" />\n <span class=\"ml-2\">default<"
},
{
"path": "apps/docs/docs/components/badge/_dismiss.component.ts",
"chars": 595,
"preview": "import { Badge, BadgeButton } from 'flowbite-angular/badge';\nimport { Icon } from 'flowbite-angular/icon';\nimport { clos"
},
{
"path": "apps/docs/docs/components/badge/_icon.component.html",
"chars": 874,
"preview": "<span flowbiteBadge>\n <flowbite-icon\n name=\"check\"\n class=\"size-4 stroke-2\" />\n <span class=\"ml-2\">default</span"
},
{
"path": "apps/docs/docs/components/badge/_icon.component.ts",
"chars": 473,
"preview": "import { Badge } from 'flowbite-angular/badge';\nimport { Icon } from 'flowbite-angular/icon';\nimport { check } from 'flo"
},
{
"path": "apps/docs/docs/components/badge/_link.component.html",
"chars": 462,
"preview": "<a\n href=\"#\"\n flowbiteBadgeLink>\n <span>default</span>\n</a>\n<a\n href=\"#\"\n flowbiteBadgeLink\n color=\"info\">\n <span"
},
{
"path": "apps/docs/docs/components/badge/_link.component.ts",
"chars": 279,
"preview": "import { BadgeLink } from 'flowbite-angular/badge';\n\nimport { Component } from '@angular/core';\n\n@Component({\n imports:"
},
{
"path": "apps/docs/docs/components/badge/index.md",
"chars": 1400,
"preview": "---\nkeyword: BadgePage\n---\n\n## Default badge\n\n{{ NgDocActions.demo('flowbiteDefaultComponent', {container: false}) }}\n\n`"
},
{
"path": "apps/docs/docs/components/badge/ng-doc.page.ts",
"chars": 1353,
"preview": "import type { DocThemes } from '../../doc-theme.model';\nimport { toIndentedJson } from '../../doc-theme.model';\nimport C"
},
{
"path": "apps/docs/docs/components/breadcrumb/_default.component.html",
"chars": 564,
"preview": "<nav flowbiteBreadcrumb>\n <ol flowbiteBreadcrumbContent>\n <li flowbiteBreadcrumbItem>\n <flowbite-icon\n n"
},
{
"path": "apps/docs/docs/components/breadcrumb/_default.component.ts",
"chars": 645,
"preview": "import { Breadcrumb, BreadcrumbContent, BreadcrumbItem } from 'flowbite-angular/breadcrumb';\nimport { Icon } from 'flowb"
},
{
"path": "apps/docs/docs/components/breadcrumb/index.md",
"chars": 402,
"preview": "---\nkeyword: BreadcrumbPage\n---\n\n## Default breadcrumb\n\n{{ NgDocActions.demo('flowbiteDefaultComponent', {container: fal"
},
{
"path": "apps/docs/docs/components/breadcrumb/ng-doc.page.ts",
"chars": 965,
"preview": "import type { DocThemes } from '../../doc-theme.model';\nimport { toIndentedJson } from '../../doc-theme.model';\nimport C"
},
{
"path": "apps/docs/docs/components/button/_default.component.html",
"chars": 354,
"preview": "<button flowbiteButton>default</button>\n<button\n flowbiteButton\n color=\"info\">\n info\n</button>\n<button\n flowbiteButt"
},
{
"path": "apps/docs/docs/components/button/_default.component.ts",
"chars": 280,
"preview": "import { Button } from 'flowbite-angular/button';\n\nimport { Component } from '@angular/core';\n\n@Component({\n imports: ["
},
{
"path": "apps/docs/docs/components/button/_disabled.component.html",
"chars": 426,
"preview": "<button\n flowbiteButton\n disabled>\n default\n</button>\n<button\n flowbiteButton\n disabled\n color=\"info\">\n info\n</bu"
},
{
"path": "apps/docs/docs/components/button/_disabled.component.ts",
"chars": 282,
"preview": "import { Button } from 'flowbite-angular/button';\n\nimport { Component } from '@angular/core';\n\n@Component({\n imports: ["
},
{
"path": "apps/docs/docs/components/button/_group.component.html",
"chars": 162,
"preview": "<div flowbiteButtonGroup>\n <button flowbiteButton>Button 1</button>\n <button flowbiteButton>Button 2</button>\n <butto"
},
{
"path": "apps/docs/docs/components/button/_group.component.ts",
"chars": 350,
"preview": "import { Button } from 'flowbite-angular/button';\nimport { ButtonGroup } from 'flowbite-angular/button-group';\n\nimport {"
},
{
"path": "apps/docs/docs/components/button/_icon.component.html",
"chars": 880,
"preview": "<button flowbiteButton>\n default button with icon\n <flowbite-icon\n name=\"brain\"\n class=\"ml-2 size-4 stroke-2\" />"
},
{
"path": "apps/docs/docs/components/button/_icon.component.ts",
"chars": 476,
"preview": "import { Button } from 'flowbite-angular/button';\nimport { Icon } from 'flowbite-angular/icon';\nimport { brain } from 'f"
},
{
"path": "apps/docs/docs/components/button/_outline.component.html",
"chars": 420,
"preview": "<button\n flowbiteButton\n outline>\n default\n</button>\n<button\n flowbiteButton\n outline\n color=\"info\">\n info\n</butt"
},
{
"path": "apps/docs/docs/components/button/_outline.component.ts",
"chars": 280,
"preview": "import { Button } from 'flowbite-angular/button';\n\nimport { Component } from '@angular/core';\n\n@Component({\n imports: ["
},
{
"path": "apps/docs/docs/components/button/_pill.component.html",
"chars": 402,
"preview": "<button\n flowbiteButton\n pill>\n default\n</button>\n<button\n flowbiteButton\n pill\n color=\"info\">\n info\n</button>\n<b"
},
{
"path": "apps/docs/docs/components/button/_pill.component.ts",
"chars": 274,
"preview": "import { Button } from 'flowbite-angular/button';\n\nimport { Component } from '@angular/core';\n\n@Component({\n imports: ["
},
{
"path": "apps/docs/docs/components/button/_size.component.html",
"chars": 293,
"preview": "<button\n flowbiteButton\n size=\"xs\">\n extra small\n</button>\n<button\n flowbiteButton\n size=\"sm\">\n small\n</button>\n<b"
},
{
"path": "apps/docs/docs/components/button/_size.component.ts",
"chars": 274,
"preview": "import { Button } from 'flowbite-angular/button';\n\nimport { Component } from '@angular/core';\n\n@Component({\n imports: ["
},
{
"path": "apps/docs/docs/components/button/index.md",
"chars": 1900,
"preview": "---\nkeyword: ButtonPage\n---\n\n## Default button\n\n{{ NgDocActions.demo('flowbiteDefaultComponent', {container: false}) }}\n"
},
{
"path": "apps/docs/docs/components/button/ng-doc.page.ts",
"chars": 1356,
"preview": "import type { DocThemes } from '../../doc-theme.model';\nimport { toIndentedJson } from '../../doc-theme.model';\nimport C"
},
{
"path": "apps/docs/docs/components/card/_default.component.html",
"chars": 268,
"preview": "<div flowbiteCard>\n <div flowbiteCardContent>\n <h5 flowbiteCardHeader>Noteworthy technology acquisitions 2021</h5>\n "
},
{
"path": "apps/docs/docs/components/card/_default.component.ts",
"chars": 324,
"preview": "import { Card, CardContent, CardHeader } from 'flowbite-angular/card';\n\nimport { Component } from '@angular/core';\n\n@Com"
},
{
"path": "apps/docs/docs/components/card/index.md",
"chars": 390,
"preview": "---\nkeyword: CardPage\n---\n\n## Default card\n\n{{ NgDocActions.demo('flowbiteDefaultComponent', {container: false}) }}\n\n```"
},
{
"path": "apps/docs/docs/components/card/ng-doc.page.ts",
"chars": 893,
"preview": "import type { DocThemes } from '../../doc-theme.model';\nimport { toIndentedJson } from '../../doc-theme.model';\nimport C"
},
{
"path": "apps/docs/docs/components/clipboard/_default.component.html",
"chars": 88,
"preview": "<div\n flowbiteClipboard\n id=\"clipboard\"\n value=\"npm install flowbite-angular\"></div>\n"
},
{
"path": "apps/docs/docs/components/clipboard/_default.component.ts",
"chars": 289,
"preview": "import { Clipboard } from 'flowbite-angular/clipboard';\n\nimport { Component } from '@angular/core';\n\n@Component({\n impo"
},
{
"path": "apps/docs/docs/components/clipboard/index.md",
"chars": 400,
"preview": "---\nkeyword: ClipboardPage\n---\n\n## Default clipboard\n\n{{ NgDocActions.demo('flowbiteDefaultComponent', {container: false"
},
{
"path": "apps/docs/docs/components/clipboard/ng-doc.page.ts",
"chars": 704,
"preview": "import type { DocThemes } from '../../doc-theme.model';\nimport { toIndentedJson } from '../../doc-theme.model';\nimport C"
},
{
"path": "apps/docs/docs/components/dropdown/_default.component.html",
"chars": 561,
"preview": "<button\n flowbiteButton\n [ngpMenuTrigger]=\"dropdownMenu\"\n class=\"data-open:*:[flowbite-icon]:rotate-180\">\n Dropdown "
},
{
"path": "apps/docs/docs/components/dropdown/_default.component.ts",
"chars": 688,
"preview": "import { Button } from 'flowbite-angular/button';\nimport { Dropdown, DropdownContent, DropdownItem } from 'flowbite-angu"
},
{
"path": "apps/docs/docs/components/dropdown/index.md",
"chars": 398,
"preview": "---\nkeyword: DropdownPage\n---\n\n## Default dropdown\n\n{{ NgDocActions.demo('flowbiteDefaultComponent', {container: false})"
},
{
"path": "apps/docs/docs/components/dropdown/ng-doc.page.ts",
"chars": 939,
"preview": "import type { DocThemes } from '../../doc-theme.model';\nimport { toIndentedJson } from '../../doc-theme.model';\nimport C"
},
{
"path": "apps/docs/docs/components/icon/_default.component.html",
"chars": 65,
"preview": "<flowbite-icon\n name=\"close\"\n class=\"block size-5 stroke-2\" />\n"
},
{
"path": "apps/docs/docs/components/icon/_default.component.ts",
"chars": 424,
"preview": "import { Icon } from 'flowbite-angular/icon';\nimport { close } from 'flowbite-angular/icon/outline/general';\n\nimport { C"
},
{
"path": "apps/docs/docs/components/icon/index.md",
"chars": 390,
"preview": "---\nkeyword: IconPage\n---\n\n## Default icon\n\n{{ NgDocActions.demo('flowbiteDefaultComponent', {container: false}) }}\n\n```"
},
{
"path": "apps/docs/docs/components/icon/ng-doc.page.ts",
"chars": 656,
"preview": "import type { DocThemes } from '../../doc-theme.model';\nimport { toIndentedJson } from '../../doc-theme.model';\nimport C"
},
{
"path": "apps/docs/docs/components/indicator/_default.component.html",
"chars": 289,
"preview": "<span flowbiteIndicator></span>\n<span\n flowbiteIndicator\n color=\"info\"></span>\n<span\n flowbiteIndicator\n color=\"fail"
},
{
"path": "apps/docs/docs/components/indicator/_default.component.ts",
"chars": 289,
"preview": "import { Indicator } from 'flowbite-angular/indicator';\n\nimport { Component } from '@angular/core';\n\n@Component({\n impo"
},
{
"path": "apps/docs/docs/components/indicator/index.md",
"chars": 400,
"preview": "---\nkeyword: IndicatorPage\n---\n\n## Default indicator\n\n{{ NgDocActions.demo('flowbiteDefaultComponent', {container: false"
},
{
"path": "apps/docs/docs/components/indicator/ng-doc.page.ts",
"chars": 704,
"preview": "import type { DocThemes } from '../../doc-theme.model';\nimport { toIndentedJson } from '../../doc-theme.model';\nimport C"
},
{
"path": "apps/docs/docs/components/input/_default.component.html",
"chars": 841,
"preview": "<form class=\"mx-auto max-w-sm\">\n <div flowbiteFormField>\n <label\n flowbiteLabel\n for=\"email\">\n Email "
},
{
"path": "apps/docs/docs/components/input/_default.component.ts",
"chars": 398,
"preview": "import { Button } from 'flowbite-angular/button';\nimport { FormControl, FormField, Helper, Label } from 'flowbite-angula"
},
{
"path": "apps/docs/docs/components/input/index.md",
"chars": 403,
"preview": "---\nkeyword: InputFieldPage\n---\n\n## Default Input field\n\n{{ NgDocActions.demo('flowbiteDefaultComponent', {container: fa"
},
{
"path": "apps/docs/docs/components/input/ng-doc.page.ts",
"chars": 998,
"preview": "import type { DocThemes } from '../../doc-theme.model';\nimport { toIndentedJson } from '../../doc-theme.model';\nimport C"
},
{
"path": "apps/docs/docs/components/modal/_default.component.html",
"chars": 1367,
"preview": "<button\n flowbiteButton\n [ngpDialogTrigger]=\"dialog\">\n Modal\n</button>\n\n<ng-template\n #dialog\n let-close=\"close\">\n "
},
{
"path": "apps/docs/docs/components/modal/_default.component.ts",
"chars": 529,
"preview": "import { Button } from 'flowbite-angular/button';\nimport {\n Modal,\n ModalContent,\n ModalFooter,\n ModalHeader,\n Moda"
},
{
"path": "apps/docs/docs/components/modal/_open-programatically.component.html",
"chars": 1367,
"preview": "<button\n flowbiteButton\n (click)=\"onClick()\">\n Trigger modal\n</button>\n\n<ng-template\n #dialog\n let-close=\"close\">\n "
},
{
"path": "apps/docs/docs/components/modal/_open-programatically.component.ts",
"chars": 847,
"preview": "import { Button } from 'flowbite-angular/button';\nimport {\n Modal,\n ModalContent,\n ModalFooter,\n ModalHeader,\n Moda"
},
{
"path": "apps/docs/docs/components/modal/_position.component.html",
"chars": 1395,
"preview": "<button\n flowbiteButton\n [ngpDialogTrigger]=\"dialog\">\n Modal\n</button>\n\n<ng-template\n #dialog\n let-close=\"close\">\n "
},
{
"path": "apps/docs/docs/components/modal/_position.component.ts",
"chars": 531,
"preview": "import { Button } from 'flowbite-angular/button';\nimport {\n Modal,\n ModalContent,\n ModalFooter,\n ModalHeader,\n Moda"
},
{
"path": "apps/docs/docs/components/modal/index.md",
"chars": 987,
"preview": "---\nkeyword: ModalPage\n---\n\n## Default Modal\n\n{{ NgDocActions.demo('flowbiteDefaultComponent', {container: false}) }}\n\n`"
},
{
"path": "apps/docs/docs/components/modal/ng-doc.page.ts",
"chars": 1428,
"preview": "import type { DocThemes } from '../../doc-theme.model';\nimport { toIndentedJson } from '../../doc-theme.model';\nimport C"
},
{
"path": "apps/docs/docs/components/navbar/_default.component.html",
"chars": 3684,
"preview": "<nav flowbiteNavbar>\n <a\n flowbiteNavbarBrand\n href=\"#\">\n <span class=\"sr-only\">Open navbar</span>\n <img\n "
},
{
"path": "apps/docs/docs/components/navbar/_default.component.ts",
"chars": 606,
"preview": "import { Icon } from 'flowbite-angular/icon';\nimport { bars } from 'flowbite-angular/icon/outline/general';\nimport {\n N"
},
{
"path": "apps/docs/docs/components/navbar/index.md",
"chars": 394,
"preview": "---\nkeyword: NavbarPage\n---\n\n## Default Navbar\n\n{{ NgDocActions.demo('flowbiteDefaultComponent', {container: false}) }}\n"
},
{
"path": "apps/docs/docs/components/navbar/ng-doc.page.ts",
"chars": 1262,
"preview": "import type { DocThemes } from '../../doc-theme.model';\nimport { toIndentedJson } from '../../doc-theme.model';\nimport C"
},
{
"path": "apps/docs/docs/components/ng-doc.category.ts",
"chars": 188,
"preview": "import type { NgDocCategory } from '@ng-doc/core';\n\nconst ComponentCategory: NgDocCategory = {\n title: 'Components',\n "
},
{
"path": "apps/docs/docs/components/pagination/_default.component.html",
"chars": 68,
"preview": "<nav\n flowbitePagination\n [(page)]=\"page\"\n pageCount=\"25\"></nav>\n"
},
{
"path": "apps/docs/docs/components/pagination/_default.component.ts",
"chars": 338,
"preview": "import { Pagination } from 'flowbite-angular/pagination';\n\nimport { Component, signal } from '@angular/core';\n\n@Componen"
},
{
"path": "apps/docs/docs/components/pagination/index.md",
"chars": 402,
"preview": "---\nkeyword: PaginationPage\n---\n\n## Default Pagination\n\n{{ NgDocActions.demo('flowbiteDefaultComponent', {container: fal"
},
{
"path": "apps/docs/docs/components/pagination/ng-doc.page.ts",
"chars": 1340,
"preview": "import type { DocThemes } from '../../doc-theme.model';\nimport { toIndentedJson } from '../../doc-theme.model';\nimport C"
},
{
"path": "apps/docs/docs/components/sidebar/_default.component.html",
"chars": 3826,
"preview": "<aside\n flowbiteSidebar\n class=\"relative! z-[0]! h-full!\">\n <div flowbiteSidebarContent>\n <li>\n <a flowbiteSi"
},
{
"path": "apps/docs/docs/components/sidebar/_default.component.ts",
"chars": 902,
"preview": "import { Icon } from 'flowbite-angular/icon';\nimport { barsFromLeft } from 'flowbite-angular/icon/outline/general';\nimpo"
},
{
"path": "apps/docs/docs/components/sidebar/index.md",
"chars": 396,
"preview": "---\nkeyword: SidebarPage\n---\n\n## Default Sidebar\n\n{{ NgDocActions.demo('flowbiteDefaultComponent', {container: false}) }"
},
{
"path": "apps/docs/docs/components/sidebar/ng-doc.page.ts",
"chars": 1044,
"preview": "import type { DocThemes } from '../../doc-theme.model';\nimport { toIndentedJson } from '../../doc-theme.model';\nimport C"
},
{
"path": "apps/docs/docs/components/tab/_default.component.html",
"chars": 2648,
"preview": "<div flowbiteTab>\n <ul flowbiteTabList>\n <li\n flowbiteTabButton\n value=\"profile\">\n Profile\n </li>\n"
},
{
"path": "apps/docs/docs/components/tab/_default.component.ts",
"chars": 335,
"preview": "import { Tab, TabButton, TabContent, TabList } from 'flowbite-angular/tab';\n\nimport { Component } from '@angular/core';\n"
},
{
"path": "apps/docs/docs/components/tab/index.md",
"chars": 388,
"preview": "---\nkeyword: TabPage\n---\n\n## Default Tab\n\n{{ NgDocActions.demo('flowbiteDefaultComponent', {container: false}) }}\n\n```an"
},
{
"path": "apps/docs/docs/components/tab/ng-doc.page.ts",
"chars": 980,
"preview": "import type { DocThemes } from '../../doc-theme.model';\nimport { toIndentedJson } from '../../doc-theme.model';\nimport C"
},
{
"path": "apps/docs/docs/components/table/_default.component.html",
"chars": 1053,
"preview": "<table\n flowbiteTable\n [tableHead]=\"tableHeader\"\n [tableBody]=\"tableBody\"\n [tableFoot]=\"tableFooter\"\n [data]=\"data\""
},
{
"path": "apps/docs/docs/components/table/_default.component.ts",
"chars": 480,
"preview": "import { Table, TableBody, TableFoot, TableHead } from 'flowbite-angular/table';\n\nimport { Component } from '@angular/co"
},
{
"path": "apps/docs/docs/components/table/index.md",
"chars": 392,
"preview": "---\nkeyword: TablePage\n---\n\n## Default Table\n\n{{ NgDocActions.demo('flowbiteDefaultComponent', {container: false}) }}\n\n`"
},
{
"path": "apps/docs/docs/components/table/ng-doc.page.ts",
"chars": 997,
"preview": "import type { DocThemes } from '../../doc-theme.model';\nimport { toIndentedJson } from '../../doc-theme.model';\nimport C"
},
{
"path": "apps/docs/docs/components/tooltip/_default.component.html",
"chars": 247,
"preview": "<div #container>\n <button\n flowbiteButton\n [ngpTooltipTrigger]=\"tooltip\"\n [ngpTooltipTriggerContainer]=\"contai"
},
{
"path": "apps/docs/docs/components/tooltip/_default.component.ts",
"chars": 484,
"preview": "import { Button } from 'flowbite-angular/button';\nimport { Tooltip } from 'flowbite-angular/tooltip';\n\nimport { Componen"
},
{
"path": "apps/docs/docs/components/tooltip/index.md",
"chars": 396,
"preview": "---\nkeyword: TooltipPage\n---\n\n## Default Tooltip\n\n{{ NgDocActions.demo('flowbiteDefaultComponent', {container: false}) }"
},
{
"path": "apps/docs/docs/components/tooltip/ng-doc.page.ts",
"chars": 690,
"preview": "import type { DocThemes } from '../../doc-theme.model';\nimport { toIndentedJson } from '../../doc-theme.model';\nimport C"
},
{
"path": "apps/docs/docs/customize/dark-mode/index.md",
"chars": 816,
"preview": "---\nkeyword: DarkModePage\n---\n\n## Enable dark mode\n\nAll you need to do is add `Theme` as a `hostDirectives` in your `app"
},
{
"path": "apps/docs/docs/customize/dark-mode/ng-doc.page.ts",
"chars": 296,
"preview": "import CustomizeCategory from '../ng-doc.category';\n\nimport type { NgDocPage } from '@ng-doc/core';\n\n/**\n * Add dark the"
},
{
"path": "apps/docs/docs/customize/ng-doc.category.ts",
"chars": 187,
"preview": "import type { NgDocCategory } from '@ng-doc/core';\n\nconst CustomizeCategory: NgDocCategory = {\n title: 'Customize',\n o"
},
{
"path": "apps/docs/docs/customize/override-base-style/index.md",
"chars": 817,
"preview": "---\r\nkeyword: OverrideBaseStylePage\r\n---\r\n\r\n## Override base style\r\n\r\nEach component provide its own configuration metho"
},
{
"path": "apps/docs/docs/customize/override-base-style/ng-doc.page.ts",
"chars": 362,
"preview": "import CustomizeCategory from '../ng-doc.category';\n\nimport type { NgDocPage } from '@ng-doc/core';\n\n/**\n * Customize Fl"
},
{
"path": "apps/docs/docs/customize/theming/index.md",
"chars": 2458,
"preview": "---\nkeyword: ThemingPage\n---\n\nYou can use the theme directive from tailwind to define any style related classes, such as"
},
{
"path": "apps/docs/docs/customize/theming/ng-doc.page.ts",
"chars": 438,
"preview": "import CustomizeCategory from '../ng-doc.category';\n\nimport type { NgDocPage } from '@ng-doc/core';\n\n/**\n * Use the them"
},
{
"path": "apps/docs/docs/customize/use-custom-style/index.md",
"chars": 455,
"preview": "---\nkeyword: UseCustomStylePage\n---\n\n## Passing customTheme values\n\nFor each component call, you can pass a <span class="
},
{
"path": "apps/docs/docs/customize/use-custom-style/ng-doc.page.ts",
"chars": 367,
"preview": "import CustomizeCategory from '../ng-doc.category';\n\nimport type { NgDocPage } from '@ng-doc/core';\n\n/**\n * Customize fl"
},
{
"path": "apps/docs/docs/doc-theme.model.ts",
"chars": 323,
"preview": "export type DocTheme = { title: string; content: string; description?: string | undefined };\nexport type DocThemes = Doc"
},
{
"path": "apps/docs/docs/getting-started/introduction/index.md",
"chars": 1377,
"preview": "---\nkeyword: IntroductionPage\n---\n\n## Introduction\n\nFlowbite Angular is an open-source library of UI components based on"
},
{
"path": "apps/docs/docs/getting-started/introduction/ng-doc.page.ts",
"chars": 413,
"preview": "import GettingStartedCategory from '../ng-doc.category';\n\nimport type { NgDocPage } from '@ng-doc/core';\n\n/**\n * Get sta"
},
{
"path": "apps/docs/docs/getting-started/license/index.md",
"chars": 1556,
"preview": "---\nkeyword: LicensePage\n---\n\n## Copyright\n\nThe Flowbite Angular name and logos are trademarks of Bergside Inc.\n\n## Rele"
},
{
"path": "apps/docs/docs/getting-started/license/ng-doc.page.ts",
"chars": 341,
"preview": "import GettingStartedCategory from '../ng-doc.category';\n\nimport type { NgDocPage } from '@ng-doc/core';\n\n/**\n * Learn m"
},
{
"path": "apps/docs/docs/getting-started/ng-doc.category.ts",
"chars": 203,
"preview": "import type { NgDocCategory } from '@ng-doc/core';\n\nconst GettingStartedCategory: NgDocCategory = {\n title: 'Getting st"
},
{
"path": "apps/docs/docs/getting-started/ng-primitives/index.md",
"chars": 743,
"preview": "---\nkeyword: NgPrimitivesPage\n---\n\n## What's angular primitives\n\nAngular Primitives is a low-level headless UI component"
},
{
"path": "apps/docs/docs/getting-started/ng-primitives/ng-doc.page.ts",
"chars": 312,
"preview": "import GettingStartedCategory from '../ng-doc.category';\n\nimport type { NgDocPage } from '@ng-doc/core';\n\n/**\n * Special"
},
{
"path": "apps/docs/docs/getting-started/quickstart/index.md",
"chars": 1192,
"preview": "---\nkeyword: QuickstartPage\n---\n\n## Introduction\n\nFlowbite Angular can easily be integrated into your project using NPM."
},
{
"path": "apps/docs/docs/getting-started/quickstart/ng-doc.page.ts",
"chars": 351,
"preview": "import GettingStartedCategory from '../ng-doc.category';\n\nimport type { NgDocPage } from '@ng-doc/core';\n\n/**\n * Get sta"
},
{
"path": "apps/docs/docs/ng-doc.api.ts",
"chars": 1436,
"preview": "import type { NgDocApi } from '@ng-doc/core';\n\nconst api: NgDocApi = {\n title: 'API Reference',\n order: 999,\n scopes:"
},
{
"path": "apps/docs/docs/shared/theme-macro.md",
"chars": 356,
"preview": "{% macro display(themes) %}\n\n<div class=\"border-t border-gray-300 dark:border-gray-600 my-4\"></div>\n\n# Themes\n\n{% for th"
},
{
"path": "apps/docs/ng-doc.config.ts",
"chars": 1860,
"preview": "import type { NgDocConfiguration } from '@ng-doc/builder';\nimport { ngKeywordsLoader, rxjsKeywordsLoader } from '@ng-doc"
},
{
"path": "apps/docs/postcss.config.json",
"chars": 54,
"preview": "{\n \"plugins\": {\n \"@tailwindcss/postcss\": {}\n }\n}\n"
},
{
"path": "apps/docs/project.json",
"chars": 2825,
"preview": "{\n \"name\": \"docs\",\n \"$schema\": \"../../node_modules/nx/schemas/project-schema.json\",\n \"projectType\": \"application\",\n "
},
{
"path": "apps/docs/public/.gitkeep",
"chars": 0,
"preview": ""
},
{
"path": "apps/docs/public/css/ng-doc/base.css",
"chars": 1861,
"preview": ":root {\n --ng-doc-font-system: 'roboto';\n\n --ng-doc-primary: #ff2c51;\n\n --ng-doc-base-0: #ffffff;\n --ng-doc-base-1: "
},
{
"path": "apps/docs/public/css/styles.css",
"chars": 593,
"preview": "@import 'tailwindcss';\n\n@source \"../../../../libs/flowbite-angular\";\n\n@custom-variant dark (&:where([data-theme=dark], ["
},
{
"path": "apps/docs/public/css/tw/fonts.css",
"chars": 142,
"preview": "@font-face {\n font-family: roboto;\n src: url('../../fonts/roboto.ttf') format('truetype');\n}\n\n@theme {\n --default-fon"
},
{
"path": "apps/docs/server.ts",
"chars": 1754,
"preview": "import bootstrap from './src/main.server';\n\nimport { APP_BASE_HREF } from '@angular/common';\nimport { CommonEngine } fro"
},
{
"path": "apps/docs/src/app/app.component.html",
"chars": 4193,
"preview": "<ng-doc-root\n [sidebar]=\"!isLandingPage\"\n [noWidthLimit]=\"isLandingPage\"\n [footerContent]=\"footerContent\">\n <nav\n "
},
{
"path": "apps/docs/src/app/app.component.ts",
"chars": 2008,
"preview": "// Import with relative path since it's not in node_modules and we need to import package.json in order to get version\n/"
},
{
"path": "apps/docs/src/app/app.config.server.ts",
"chars": 369,
"preview": "import { appConfig } from './app.config';\n\nimport type { ApplicationConfig } from '@angular/core';\nimport { mergeApplica"
},
{
"path": "apps/docs/src/app/app.config.ts",
"chars": 1894,
"preview": "import { appRoutes } from './app.routes';\nimport { docDemoDisplayerProcessor } from './shared/processors/doc-demo-displa"
},
{
"path": "apps/docs/src/app/app.routes.ts",
"chars": 330,
"preview": "import type { Routes } from '@angular/router';\n\nexport const appRoutes: Routes = [\n {\n path: '',\n loadChildren: ("
},
{
"path": "apps/docs/src/app/pages/docs/docs.component.css",
"chars": 0,
"preview": ""
},
{
"path": "apps/docs/src/app/pages/docs/docs.component.html",
"chars": 18,
"preview": "<router-outlet />\n"
},
{
"path": "apps/docs/src/app/pages/docs/docs.component.ts",
"chars": 270,
"preview": "import { Component } from '@angular/core';\nimport { RouterOutlet } from '@angular/router';\n\n@Component({\n selector: 'fl"
},
{
"path": "apps/docs/src/app/pages/docs/docs.routes.ts",
"chars": 467,
"preview": "import { DocsComponent } from './docs.component';\n\nimport type { Routes } from '@angular/router';\nimport { NG_DOC_ROUTIN"
},
{
"path": "apps/docs/src/app/pages/landing/landing.component.html",
"chars": 15966,
"preview": "<section class=\"flex flex-col items-center gap-2 px-4 md:px-4 xl:pt-16 xl:pb-24\">\n <div class=\"mx-auto flex max-w-scree"
},
{
"path": "apps/docs/src/app/pages/landing/landing.component.ts",
"chars": 1202,
"preview": "import { Button } from 'flowbite-angular/button';\nimport { Clipboard } from 'flowbite-angular/clipboard';\nimport { Icon "
},
{
"path": "apps/docs/src/app/pages/landing/landing.routes.ts",
"chars": 191,
"preview": "import { LandingComponent } from './landing.component';\n\nimport type { Routes } from '@angular/router';\n\nexport default "
},
{
"path": "apps/docs/src/app/shared/components/flowbite-doc-demo-displayer/flowbite-doc-demo-displayer.component.ts",
"chars": 2956,
"preview": "import { Button } from 'flowbite-angular/button';\nimport { Icon } from 'flowbite-angular/icon';\nimport { desktopPc, mobi"
},
{
"path": "apps/docs/src/app/shared/header-template.html",
"chars": 123,
"preview": "<h1>{{ NgDocPage.title }}</h1>\n\n{{ Metadata.description }}\n\n<hr class=\"my-8 h-px border-0 bg-gray-200 dark:bg-gray-700\" "
},
{
"path": "apps/docs/src/app/shared/processors/doc-demo-displayer-processor/doc-demo-displayer-processor.ts",
"chars": 1079,
"preview": "import { FlowbiteDocDemoComponent } from '../../components/flowbite-doc-demo-displayer/flowbite-doc-demo-displayer.compo"
},
{
"path": "apps/docs/src/environments/environment.prod.ts",
"chars": 52,
"preview": "export const environment = {\n production: true,\n};\n"
},
{
"path": "apps/docs/src/environments/environment.ts",
"chars": 659,
"preview": "// This file can be replaced during build by using the `fileReplacements` array.\n// `ng build` replaces `environment.ts`"
},
{
"path": "apps/docs/src/index.html",
"chars": 399,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\" />\n <title>Flowbite Angular</title>\n <base hre"
},
{
"path": "apps/docs/src/main.server.ts",
"chars": 368,
"preview": "import { AppComponent } from './app/app.component';\nimport { config } from './app/app.config.server';\n\nimport type { Boo"
},
{
"path": "apps/docs/src/main.ts",
"chars": 401,
"preview": "import { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\nimport { environment }"
},
{
"path": "apps/docs/tsconfig.app.json",
"chars": 377,
"preview": "{\n \"extends\": \"./tsconfig.json\",\n \"compilerOptions\": {\n \"allowSyntheticDefaultImports\": true,\n \"outDir\": \"../../"
},
{
"path": "apps/docs/tsconfig.editor.json",
"chars": 111,
"preview": "{\n \"extends\": \"./tsconfig.json\",\n \"include\": [\"**/*.ts\"],\n \"compilerOptions\": {\n \"types\": [\"node\"]\n }\n}\n"
},
{
"path": "apps/docs/tsconfig.json",
"chars": 730,
"preview": "{\n \"extends\": \"../../tsconfig.base.json\",\n \"files\": [],\n \"include\": [],\n \"references\": [\n {\n \"path\": \"./tsco"
},
{
"path": "apps/storybook/.eslintrc.json",
"chars": 822,
"preview": "{\n \"extends\": [\"../../.eslintrc.json\", \"plugin:storybook/recommended\"],\n \"ignorePatterns\": [\"!**/*\", \"storybook-static"
},
{
"path": "apps/storybook/.storybook/helper.ts",
"chars": 818,
"preview": "import { UPDATE_STORY_ARGS } from 'storybook/internal/core-events';\nimport type { StoryId } from 'storybook/internal/csf"
},
{
"path": "apps/storybook/.storybook/main.ts",
"chars": 1371,
"preview": "// This file has been automatically migrated to valid ESM format by Storybook.\nimport type { StorybookConfig } from '@st"
},
{
"path": "apps/storybook/.storybook/preview-body.html",
"chars": 72,
"preview": "<body class=\"bg-white text-black dark:bg-black dark:text-white\"></body>\n"
},
{
"path": "apps/storybook/.storybook/preview.ts",
"chars": 386,
"preview": "import { withThemeByDataAttribute } from '@storybook/addon-themes';\nimport type { Decorator, Preview } from '@storybook/"
},
{
"path": "apps/storybook/.storybook/tsconfig.json",
"chars": 357,
"preview": "{\n \"extends\": \"../tsconfig.json\",\n \"compilerOptions\": {\n \"emitDecoratorMetadata\": true\n },\n \"exclude\": [\"../**/*."
},
{
"path": "apps/storybook/postcss.config.json",
"chars": 54,
"preview": "{\n \"plugins\": {\n \"@tailwindcss/postcss\": {}\n }\n}\n"
},
{
"path": "apps/storybook/project.json",
"chars": 1509,
"preview": "{\n \"name\": \"storybook\",\n \"$schema\": \"../../node_modules/nx/schemas/project-schema.json\",\n \"projectType\": \"application"
},
{
"path": "apps/storybook/src/accordion.component.stories.ts",
"chars": 9576,
"preview": "import {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTitle,\n defaultFlowbiteAccordionConfig,\n} from 'f"
},
{
"path": "apps/storybook/src/alert.stories.ts",
"chars": 5469,
"preview": "import {\n Alert,\n AlertButton,\n AlertContent,\n defaultFlowbiteAlertConfig,\n} from 'flowbite-angular/alert';\nimport {"
}
]
// ... and 423 more files (download for full content)
About this extraction
This page contains the full source code of the themesberg/flowbite-angular GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 623 files (1.2 MB), approximately 537.5k tokens, and a symbol index with 408 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.