diff --git a/.eslintrc.json b/.eslintrc.json index 06e113c9..c39c8b3d 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -4,6 +4,11 @@ "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": { @@ -13,19 +18,13 @@ "endOfLine": "auto" } ], - - // ESLint "no-extra-semi": "off", "comma-dangle": "off", "no-empty-function": "off", - - // TypeScript "@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 specific rules "@nx/enforce-module-boundaries": "error" } } diff --git a/.github/actions/setup/action.yml b/.github/actions/setup/action.yml deleted file mode 100644 index c783dac3..00000000 --- a/.github/actions/setup/action.yml +++ /dev/null @@ -1,89 +0,0 @@ -######################################################################################## -# "pnpm install" composite action for pnpm 7/8+ # -#--------------------------------------------------------------------------------------# -# Requirement: @setup/node should be run before # -# # -# Usage in workflows steps: # -# # -# - name: 📥 Monorepo install # -# uses: ./.github/actions/pnpm-install # -# with: # -# enable-corepack: false # (default) # -# cwd: ${{ github.workspace }}/apps/my-app # (default = '.') # -# # -# Reference: # -# - latest: https://gist.github.com/belgattitude/838b2eba30c324f1f0033a797bab2e31 # -# # -# Versions: # -# - 1.1.0 - 15-07-2023 - Add project custom directory support. # -######################################################################################## - -name: 'PNPM install' -description: 'Run pnpm install with cache enabled' - -inputs: - enable-corepack: - description: 'Enable corepack' - required: false - default: 'false' - cwd: - description: "Changes node's process.cwd() if the project is not located on the root. Default to process.cwd()" - required: false - default: '.' - -runs: - using: 'composite' - - steps: - - name: ⚙️ Enable Corepack - if: ${{ inputs.enable-corepack == 'true' }} - shell: bash - working-directory: ${{ inputs.cwd }} - run: | - corepack enable - echo "corepack enabled" - - - uses: pnpm/action-setup@v4 - if: ${{ inputs.enable-corepack == 'false' }} - with: - run_install: false - # If you're not setting the packageManager field in package.json, add the version here - version: latest-9 - - - name: Expose pnpm config(s) through "$GITHUB_OUTPUT" - id: pnpm-config - shell: bash - run: | - echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT - - - name: Cache rotation keys - id: cache-rotation - shell: bash - run: | - echo "YEAR_MONTH=$(/bin/date -u "+%Y%m")" >> $GITHUB_OUTPUT - - - uses: actions/cache@v4 - name: Setup pnpm cache - with: - path: ${{ steps.pnpm-config.outputs.STORE_PATH }} - key: ${{ runner.os }}-pnpm-store-cache-${{ steps.cache-rotation.outputs.YEAR_MONTH }}-${{ hashFiles('**/pnpm-lock.yaml') }} - restore-keys: | - ${{ runner.os }}-pnpm-store-cache-${{ steps.cache-rotation.outputs.YEAR_MONTH }}- - - # Prevent store to grow over time (not needed with yarn) - # Note: not perfect as it prune too much in monorepos so the idea - # is to use cache-rotation as above. In the future this might work better. - #- name: Prune pnpm store - # shell: bash - # run: pnpm prune store - - - name: Install dependencies - shell: bash - working-directory: ${{ inputs.cwd }} - run: pnpm install --frozen-lockfile --prefer-offline - env: - # Other environment variables - HUSKY: '0' # By default do not run HUSKY install - - - name: Derive appropriate SHAs for base and head for `nx affected` commands - uses: nrwl/nx-set-shas@v2 diff --git a/.github/workflows/cache_cleanup.yml b/.github/workflows/cache_cleanup.yml deleted file mode 100644 index aea5b35e..00000000 --- a/.github/workflows/cache_cleanup.yml +++ /dev/null @@ -1,36 +0,0 @@ -# https://docs.github.com/en/actions/using-workflows/caching-dependencies-to-speed-up-workflows#force-deleting-cache-entries -name: Cleanup caches for closed branches - -on: - pull_request: - types: - - closed - workflow_dispatch: - -jobs: - cleanup: - runs-on: ubuntu-latest - steps: - - name: Check out code - uses: actions/checkout@v4 - - - name: Cleanup - run: | - gh extension install actions/gh-actions-cache - - REPO=${{ github.repository }} - BRANCH="refs/pull/${{ github.event.pull_request.number }}/merge" - - echo "Fetching list of cache key" - cacheKeysForPR=$(gh actions-cache list -R $REPO -B $BRANCH | cut -f 1 | grep pnpm) - - ## Setting this to not fail the workflow while deleting cache keys. - set +e - echo "Deleting caches..." - for cacheKey in $cacheKeysForPR - do - gh actions-cache delete $cacheKey -R $REPO -B $BRANCH --confirm - done - echo "Done" - env: - GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index c575b8bd..1b2642cd 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -8,6 +8,10 @@ concurrency: ${{ github.ref }} jobs: lint: + strategy: + matrix: + node-version: [20] + name: Lint the code 🕵 runs-on: ubuntu-latest steps: @@ -16,38 +20,29 @@ jobs: with: fetch-depth: 0 - - name: Setup NodeJS 💿 - uses: actions/setup-node@v4 + - name: Install pnpm + uses: pnpm/action-setup@v4 with: - node-version: 20 - - - name: Monorepo install - uses: ./.github/actions/setup + version: 10 - - name: Lint the code 🕵 - run: pnpm all:lint - - test: - name: Run unit tests 🔬 - runs-on: ubuntu-latest - steps: - - name: Check out the code 🗄 - uses: actions/checkout@v4 - with: - fetch-depth: 0 - - - name: Setup NodeJS 💿 + - name: Use Node.js ${{ matrix.node-version }} uses: actions/setup-node@v4 with: - node-version: 20 + node-version: ${{ matrix.node-version }} + cache: 'pnpm' - - name: Monorepo install - uses: ./.github/actions/setup + - name: Install dependencies + shell: bash + run: pnpm install --frozen-lockfile --prefer-offline - - name: Run unit tests 🔬 - run: pnpm all:test -- --ci --verbose + - name: Lint the code 🕵 + run: pnpm all:lint build: + strategy: + matrix: + node-version: [20] + name: Build code 🛠 runs-on: ubuntu-latest steps: @@ -56,13 +51,20 @@ jobs: with: fetch-depth: 0 - - name: Setup NodeJS 💿 + - 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: 20 + node-version: ${{ matrix.node-version }} + cache: 'pnpm' - - name: Monorepo install - uses: ./.github/actions/setup + - name: Install dependencies + shell: bash + run: pnpm install --frozen-lockfile --prefer-offline - name: Build code 🛠 run: pnpm all:build diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index c4774095..68498697 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -3,6 +3,10 @@ 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 @@ -11,7 +15,11 @@ on: jobs: release: - if: (github.event_name == 'workflow_dispatch' && github.ref == 'refs/heads/release') || (github.event_name == 'workflow_dispatch' && github.event.inputs.dryRun == 'true' && github.ref == 'refs/heads/main') + 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: @@ -19,6 +27,7 @@ jobs: actions: write issues: write pull-requests: write + id-token: write steps: - name: Check out the code 🗄 uses: actions/checkout@v4 @@ -26,16 +35,23 @@ jobs: fetch-depth: 0 persist-credentials: false - - name: Setup NodeJS 💿 + - 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: 20 + node-version: ${{ matrix.node-version }} + cache: 'pnpm' - - name: Monorepo install - uses: ./.github/actions/setup + - name: Install dependencies + shell: bash + run: pnpm install --frozen-lockfile --prefer-offline - name: Release new version 🛠 - run: pnpm lib:release -- --ci --verbose --skip-nx-cache --dryRun=${{ github.event.inputs.dryRun }} + run: pnpm exec nx release ${{ github.event.inputs.version || '' }} --verbose --dryRun=${{ github.event.inputs.dryRun }} env: - GH_TOKEN: ${{ secrets.SEMANTIC_RELEASE_TOKEN }} - NPM_TOKEN: ${{ secrets.NPM_TOKEN }} + NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} + NPM_CONFIG_PROVENANCE: true diff --git a/.gitignore b/.gitignore index efbf81dc..f7f9be17 100644 --- a/.gitignore +++ b/.gitignore @@ -41,4 +41,6 @@ Thumbs.db .angular .vercel -.nx \ No newline at end of file +.nx +.cursor/rules/nx-rules.mdc +.github/instructions/nx.instructions.md diff --git a/.lintstagedrc b/.lintstagedrc index 921ab6ba..3e0ad011 100644 --- a/.lintstagedrc +++ b/.lintstagedrc @@ -1,5 +1,4 @@ { "*.ts": ["nx affected:lint --fix --files"], - "*": ["npx nx format:write --files"], - "*.css": ["npx stylelint --fix"] + "*": ["npx nx format:write --files"] } diff --git a/.nxreleaserc.json b/.nxreleaserc.json deleted file mode 100644 index 6bd81dd7..00000000 --- a/.nxreleaserc.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "repositoryUrl": "https://github.com/themesberg/flowbite-angular", - "tagFormat": "${PROJECT_NAME}@v${version}", - "branches": ["release"] -} diff --git a/.prettierrc b/.prettierrc index 259a5484..e97d4d6c 100644 --- a/.prettierrc +++ b/.prettierrc @@ -7,7 +7,11 @@ "bracketSpacing": true, "proseWrap": "always", "singleAttributePerLine": true, - "plugins": ["prettier-plugin-packagejson", "@ianvs/prettier-plugin-sort-imports"], + "plugins": [ + "prettier-plugin-packagejson", + "@ianvs/prettier-plugin-sort-imports", + "prettier-plugin-tailwindcss" + ], "importOrder": [ "^~/(.*)$", "^[.]", @@ -18,5 +22,6 @@ "", "" ], - "importOrderParserPlugins": ["typescript", "decorators-legacy"] + "importOrderParserPlugins": ["typescript", "decorators-legacy"], + "tailwindFunctions": ["twMerge", "createTheme"] } diff --git a/.vscode/extensions.json b/.vscode/extensions.json index cbe2e910..7a5fc997 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -3,7 +3,6 @@ "angular.ng-template", "nrwl.angular-console", "esbenp.prettier-vscode", - "firsttris.vscode-jest-runner", "dbaeumer.vscode-eslint" ] } diff --git a/.vscode/settings.json b/.vscode/settings.json index b420dae7..e4ea8aee 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -5,13 +5,10 @@ "editor.defaultFormatter": "esbenp.prettier-vscode", "files.eol": "\r\n", "editor.formatOnSave": true, + "tailwindCSS.experimental.configFile": "libs/flowbite-angular/styles/flowbite-angular.css", "tailwindCSS.classAttributes": ["class", "className", "ngClass", "customStyle"], - "tailwindCSS.experimental.classRegex": [ - ["twMerge\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"], - ["createTheme\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"] - ], + "tailwindCSS.classFunctions": ["twMerge", "createTheme"], "typescript.tsdk": "node_modules/typescript/lib", - "[markdown]": { "editor.unicodeHighlight.ambiguousCharacters": false, "editor.unicodeHighlight.invisibleCharacters": false, @@ -22,5 +19,6 @@ "strings": "off", "other": "off" } - } + }, + "eslint.validate": ["json"] } diff --git a/CHANGELOG.md b/CHANGELOG.md deleted file mode 120000 index 5d3c7b56..00000000 --- a/CHANGELOG.md +++ /dev/null @@ -1 +0,0 @@ -libs/flowbite-angular/CHANGELOG.md \ No newline at end of file diff --git a/api/index.mjs b/api/index.mjs deleted file mode 100644 index aa0a6aa9..00000000 --- a/api/index.mjs +++ /dev/null @@ -1,3 +0,0 @@ -import { app } from '../dist/docs-static/server/server.mjs'; - -export default app(); diff --git a/apps/docs-e2e/.eslintrc.json b/apps/docs-e2e/.eslintrc.json deleted file mode 100644 index 22994786..00000000 --- a/apps/docs-e2e/.eslintrc.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "extends": ["plugin:cypress/recommended", "../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "parserOptions": { - "project": "./apps/docs-e2e/tsconfig(.*)?.json" - }, - "overrides": [ - { - "files": ["*.ts", "*.js", "*.jsx"], - "rules": {} - }, - { - "files": ["src/plugins/index.js"], - "rules": { - "@typescript-eslint/no-var-requires": "off", - "no-undef": "off" - } - } - ] -} diff --git a/apps/docs-e2e/cypress.json b/apps/docs-e2e/cypress.json deleted file mode 100644 index fe7d8add..00000000 --- a/apps/docs-e2e/cypress.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "fileServerFolder": ".", - "fixturesFolder": "./src/fixtures", - "integrationFolder": "./src/integration", - "modifyObstructiveCode": false, - "supportFile": "./src/support/index.ts", - "pluginsFile": false, - "video": true, - "videosFolder": "../../dist/cypress/apps/docs-e2e/videos", - "screenshotsFolder": "../../dist/cypress/apps/docs-e2e/screenshots", - "chromeWebSecurity": false -} diff --git a/apps/docs-e2e/project.json b/apps/docs-e2e/project.json deleted file mode 100644 index 45a973b2..00000000 --- a/apps/docs-e2e/project.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "name": "docs-e2e", - "$schema": "../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "apps/docs-e2e/src", - "projectType": "application", - "tags": [], - "implicitDependencies": ["docs"], - "targets": { - "e2e": { - "executor": "@nx/cypress:cypress", - "options": { - "cypressConfig": "apps/docs-e2e/cypress.json", - "devServerTarget": "docs:serve:development" - }, - "configurations": { - "production": { - "devServerTarget": "docs:serve:production" - } - } - }, - "lint": { - "executor": "@nx/eslint:lint" - } - } -} diff --git a/apps/docs-e2e/src/fixtures/example.json b/apps/docs-e2e/src/fixtures/example.json deleted file mode 100644 index 294cbed6..00000000 --- a/apps/docs-e2e/src/fixtures/example.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "name": "Using fixtures to represent data", - "email": "hello@cypress.io" -} diff --git a/apps/docs-e2e/src/integration/app.spec.ts b/apps/docs-e2e/src/integration/app.spec.ts deleted file mode 100644 index e72d5786..00000000 --- a/apps/docs-e2e/src/integration/app.spec.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { getGreeting } from '../support/app.po'; - -describe('docs', () => { - beforeEach(() => cy.visit('/')); - - it('should display welcome message', () => { - // Custom command example, see `../support/commands.ts` file - cy.login('my-email@something.com', 'myPassword'); - - // Function helper example, see `../support/app.po.ts` file - getGreeting().contains('Tailwind CSS Components'); - }); -}); diff --git a/apps/docs-e2e/src/support/app.po.ts b/apps/docs-e2e/src/support/app.po.ts deleted file mode 100644 index fce603a5..00000000 --- a/apps/docs-e2e/src/support/app.po.ts +++ /dev/null @@ -1 +0,0 @@ -export const getGreeting = () => cy.get('h2'); diff --git a/apps/docs-e2e/src/support/commands.ts b/apps/docs-e2e/src/support/commands.ts deleted file mode 100644 index b90f2537..00000000 --- a/apps/docs-e2e/src/support/commands.ts +++ /dev/null @@ -1,33 +0,0 @@ -/* eslint-disable @typescript-eslint/no-namespace */ -// *********************************************** -// This example commands.js shows you how to -// create various custom commands and overwrite -// existing commands. -// -// For more comprehensive examples of custom -// commands please read more here: -// https://on.cypress.io/custom-commands -// *********************************************** - -declare namespace Cypress { - // eslint-disable-next-line @typescript-eslint/no-unused-vars - interface Chainable { - login(email: string, password: string): void; - } -} -// -// -- This is a parent command -- -Cypress.Commands.add('login', (email, password) => { - console.log('Custom command example: Login', email, password); -}); -// -// -- This is a child command -- -// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... }) -// -// -// -- This is a dual command -- -// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... }) -// -// -// -- This will overwrite an existing command -- -// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) diff --git a/apps/docs-e2e/src/support/index.ts b/apps/docs-e2e/src/support/index.ts deleted file mode 100644 index 3d469a6b..00000000 --- a/apps/docs-e2e/src/support/index.ts +++ /dev/null @@ -1,17 +0,0 @@ -// *********************************************************** -// This example support/index.js is processed and -// loaded automatically before your test files. -// -// This is a great place to put global configuration and -// behavior that modifies Cypress. -// -// You can change the location of this file or turn off -// automatically serving support files with the -// 'supportFile' configuration option. -// -// You can read more here: -// https://on.cypress.io/configuration -// *********************************************************** - -// Import commands.js using ES2015 syntax: -import './commands'; diff --git a/apps/docs-e2e/tsconfig.json b/apps/docs-e2e/tsconfig.json deleted file mode 100644 index eed47792..00000000 --- a/apps/docs-e2e/tsconfig.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "extends": "../../tsconfig.base.json", - "compilerOptions": { - "sourceMap": false, - "outDir": "../../dist/out-tsc", - "allowJs": true, - "types": ["cypress", "node"], - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true - }, - "include": ["src/**/*.ts", "src/**/*.js"], - "angularCompilerOptions": { - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } -} diff --git a/apps/docs/docs/components/accordion/_always-open.component.html b/apps/docs/docs/components/accordion/_always-open.component.html index 36b09024..3eb6de5c 100644 --- a/apps/docs/docs/components/accordion/_always-open.component.html +++ b/apps/docs/docs/components/accordion/_always-open.component.html @@ -1,76 +1,84 @@ - - - What is Flowbite ? - +
+
+
What is Flowbite?
+
-

+

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

-

+

Check out this guide to learn how to - Get started + href="/docs/getting-started/introduction/" + class="text-blue-600 hover:underline dark:text-blue-500"> + get started and start developing websites even faster with components on top of Tailwind CSS.

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

+

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

-

+

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

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

+

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

-

+

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

-

- Learn more about these technologies : -

-
- - - +
+
+
diff --git a/apps/docs/docs/components/accordion/_always-open.component.ts b/apps/docs/docs/components/accordion/_always-open.component.ts index cb90ff71..4b02246f 100644 --- a/apps/docs/docs/components/accordion/_always-open.component.ts +++ b/apps/docs/docs/components/accordion/_always-open.component.ts @@ -1,20 +1,17 @@ import { - AccordionComponent, - AccordionContentComponent, - AccordionPanelComponent, - AccordionTitleComponent, + Accordion, + AccordionContent, + AccordionItem, + AccordionTitle, } from 'flowbite-angular/accordion'; import { Component } from '@angular/core'; @Component({ - selector: 'flowbite-demo-accordion-always-open', - imports: [ - AccordionComponent, - AccordionTitleComponent, - AccordionContentComponent, - AccordionPanelComponent, - ], + imports: [Accordion, AccordionItem, AccordionTitle, AccordionContent], templateUrl: './_always-open.component.html', + host: { + class: 'flex flex-wrap flex-col gap-3 p-6', + }, }) export class FlowbiteAlwaysOpenComponent {} diff --git a/apps/docs/docs/components/accordion/_arrow-style.component.html b/apps/docs/docs/components/accordion/_arrow-style.component.html deleted file mode 100644 index 7eb8abfb..00000000 --- a/apps/docs/docs/components/accordion/_arrow-style.component.html +++ /dev/null @@ -1,85 +0,0 @@ - - - What is Flowbite ? - -
-

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

-

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

-
- - - - - Is there a Figma file available ? - - -
-

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

-

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

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

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

-

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

-

- Learn more about these technologies : -

- -
- - - - - - - - diff --git a/apps/docs/docs/components/accordion/_arrow-style.component.ts b/apps/docs/docs/components/accordion/_arrow-style.component.ts deleted file mode 100644 index 46747b88..00000000 --- a/apps/docs/docs/components/accordion/_arrow-style.component.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { - AccordionComponent, - AccordionContentComponent, - AccordionPanelComponent, - AccordionTitleComponent, -} from 'flowbite-angular/accordion'; -import { IconComponent } from 'flowbite-angular/icon'; - -import { Component } from '@angular/core'; - -@Component({ - selector: 'flowbite-demo-accordion-arrow-style', - imports: [ - AccordionComponent, - AccordionTitleComponent, - AccordionContentComponent, - AccordionPanelComponent, - IconComponent, - ], - templateUrl: './_arrow-style.component.html', -}) -export class FlowbiteArrowStyleComponent {} diff --git a/apps/docs/docs/components/accordion/_color-option.component.html b/apps/docs/docs/components/accordion/_color-option.component.html deleted file mode 100644 index 1b4c3a01..00000000 --- a/apps/docs/docs/components/accordion/_color-option.component.html +++ /dev/null @@ -1,76 +0,0 @@ - - - What is Flowbite ? - -
-

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

-

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

-
- - - - Is there a Figma file available ? - -
-

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

-

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

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

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

-

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

-

- Learn more about these technologies : -

- -
- - - diff --git a/apps/docs/docs/components/accordion/_color-option.component.ts b/apps/docs/docs/components/accordion/_color-option.component.ts deleted file mode 100644 index 48da4262..00000000 --- a/apps/docs/docs/components/accordion/_color-option.component.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { - AccordionComponent, - AccordionContentComponent, - AccordionPanelComponent, - AccordionTitleComponent, -} from 'flowbite-angular/accordion'; - -import { Component } from '@angular/core'; - -@Component({ - selector: 'flowbite-demo-accordion-color-option', - imports: [ - AccordionComponent, - AccordionTitleComponent, - AccordionContentComponent, - AccordionPanelComponent, - ], - templateUrl: './_color-option.component.html', -}) -export class FlowbiteColorOptionComponent {} diff --git a/apps/docs/docs/components/accordion/_color.component.html b/apps/docs/docs/components/accordion/_color.component.html new file mode 100644 index 00000000..fca92e67 --- /dev/null +++ b/apps/docs/docs/components/accordion/_color.component.html @@ -0,0 +1,84 @@ +
+
+
What is Flowbite?
+
+
+

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

+

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

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

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

+

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

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

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

+

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

+

Learn more about these technologies:

+ +
+
+
+
diff --git a/apps/docs/docs/components/accordion/_color.component.ts b/apps/docs/docs/components/accordion/_color.component.ts new file mode 100644 index 00000000..2d02d920 --- /dev/null +++ b/apps/docs/docs/components/accordion/_color.component.ts @@ -0,0 +1,17 @@ +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 {} diff --git a/apps/docs/docs/components/accordion/_default.component.html b/apps/docs/docs/components/accordion/_default.component.html index 163ca081..3ef0132a 100644 --- a/apps/docs/docs/components/accordion/_default.component.html +++ b/apps/docs/docs/components/accordion/_default.component.html @@ -1,76 +1,82 @@ - - - What is Flowbite ? - +
+
+
What is Flowbite?
+
-

+

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

-

+

Check out this guide to learn how to - Get started + href="/docs/getting-started/introduction/" + class="text-blue-600 hover:underline dark:text-blue-500"> + get started and start developing websites even faster with components on top of Tailwind CSS.

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

+

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

-

+

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

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

+

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

-

+

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

-

- Learn more about these technologies : -

-
- - - +
+
+
diff --git a/apps/docs/docs/components/accordion/_default.component.ts b/apps/docs/docs/components/accordion/_default.component.ts index c940645d..248fcaeb 100644 --- a/apps/docs/docs/components/accordion/_default.component.ts +++ b/apps/docs/docs/components/accordion/_default.component.ts @@ -1,20 +1,17 @@ import { - AccordionComponent, - AccordionContentComponent, - AccordionPanelComponent, - AccordionTitleComponent, + Accordion, + AccordionContent, + AccordionItem, + AccordionTitle, } from 'flowbite-angular/accordion'; import { Component } from '@angular/core'; @Component({ - selector: 'flowbite-demo-accordion-default', - imports: [ - AccordionComponent, - AccordionTitleComponent, - AccordionContentComponent, - AccordionPanelComponent, - ], + imports: [Accordion, AccordionItem, AccordionTitle, AccordionContent], templateUrl: './_default.component.html', + host: { + class: 'flex flex-wrap flex-col gap-3 p-6', + }, }) export class FlowbiteDefaultComponent {} diff --git a/apps/docs/docs/components/accordion/_flush.component.html b/apps/docs/docs/components/accordion/_flush.component.html index f443024a..7e4777f7 100644 --- a/apps/docs/docs/components/accordion/_flush.component.html +++ b/apps/docs/docs/components/accordion/_flush.component.html @@ -1,76 +1,84 @@ - - - What is Flowbite ? - +
+
+
What is Flowbite?
+
-

+

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

-

+

Check out this guide to learn how to - Get started + href="/docs/getting-started/introduction/" + class="text-blue-600 hover:underline dark:text-blue-500"> + get started and start developing websites even faster with components on top of Tailwind CSS.

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

+

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

-

+

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

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

+

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

-

+

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

-

- Learn more about these technologies : -

-
- - - +
+
+
diff --git a/apps/docs/docs/components/accordion/_flush.component.ts b/apps/docs/docs/components/accordion/_flush.component.ts index 3d71557f..e66c4b41 100644 --- a/apps/docs/docs/components/accordion/_flush.component.ts +++ b/apps/docs/docs/components/accordion/_flush.component.ts @@ -1,20 +1,17 @@ import { - AccordionComponent, - AccordionContentComponent, - AccordionPanelComponent, - AccordionTitleComponent, + Accordion, + AccordionContent, + AccordionItem, + AccordionTitle, } from 'flowbite-angular/accordion'; import { Component } from '@angular/core'; @Component({ - selector: 'flowbite-demo-accordion-flush', - imports: [ - AccordionComponent, - AccordionTitleComponent, - AccordionContentComponent, - AccordionPanelComponent, - ], + imports: [Accordion, AccordionItem, AccordionTitle, AccordionContent], templateUrl: './_flush.component.html', + host: { + class: 'flex flex-wrap flex-col gap-3 p-6', + }, }) export class FlowbiteFlushComponent {} diff --git a/apps/docs/docs/components/accordion/_icon.component.html b/apps/docs/docs/components/accordion/_icon.component.html new file mode 100644 index 00000000..78fa2151 --- /dev/null +++ b/apps/docs/docs/components/accordion/_icon.component.html @@ -0,0 +1,106 @@ +
+
+
+ What is Flowbite? + +
+
+
+

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

+

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

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

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

+

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

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

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

+

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

+

Learn more about these technologies:

+ +
+
+
+
diff --git a/apps/docs/docs/components/accordion/_icon.component.ts b/apps/docs/docs/components/accordion/_icon.component.ts new file mode 100644 index 00000000..2bb51ca6 --- /dev/null +++ b/apps/docs/docs/components/accordion/_icon.component.ts @@ -0,0 +1,21 @@ +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 {} diff --git a/apps/docs/docs/components/accordion/index.md b/apps/docs/docs/components/accordion/index.md index afb9361e..f9be3bec 100644 --- a/apps/docs/docs/components/accordion/index.md +++ b/apps/docs/docs/components/accordion/index.md @@ -10,7 +10,7 @@ keyword: AccordionPage ``` -```angular-ts file="./_default.component.ts"#L1-L6 group="default" name="typescript" +```angular-ts file="./_default.component.ts" group="default" name="typescript" ``` @@ -22,19 +22,19 @@ keyword: AccordionPage ``` -```angular-ts file="./_always-open.component.ts"#L1-L6 group="always-open" name="typescript" +```angular-ts file="./_always-open.component.ts" group="always-open" name="typescript" ``` ## Color option -{{ NgDocActions.demo('flowbiteColorOptionComponent', {container: false}) }} +{{ NgDocActions.demo('flowbiteColorComponent', {container: false}) }} -```angular-html file="./_color-option.component.html" group="color-option" name="html" +```angular-html file="./_color.component.html" group="color" name="html" ``` -```angular-ts file="./_color-option.component.ts"#L1-L6 group="color-option" name="typescript" +```angular-ts file="./_color.component.ts" group="color" name="typescript" ``` @@ -46,18 +46,18 @@ keyword: AccordionPage ``` -```angular-ts file="./_flush.component.ts"#L1-L6 group="flush" name="typescript" +```angular-ts file="./_flush.component.ts" group="flush" name="typescript" ``` -## Arrow style +## Accordion with Icon -{{ NgDocActions.demo('flowbiteArrowStyleComponent', {container: false}) }} +{{ NgDocActions.demo('flowbiteIconComponent', {container: false}) }} -```angular-html file="./_arrow-style.component.html" group="arrow-style" name="html" +```angular-html file="./_icon.component.html" group="icon" name="html" ``` -```angular-ts file="./_arrow-style.component.ts"#L1-L7 group="arrow-style" name="typescript" +```angular-ts file="./_icon.component.ts" group="icon" name="typescript" ``` diff --git a/apps/docs/docs/components/accordion/ng-doc.page.ts b/apps/docs/docs/components/accordion/ng-doc.page.ts index 199aa127..b3459cb7 100644 --- a/apps/docs/docs/components/accordion/ng-doc.page.ts +++ b/apps/docs/docs/components/accordion/ng-doc.page.ts @@ -1,28 +1,25 @@ import ComponentCategory from '../ng-doc.category'; import { FlowbiteAlwaysOpenComponent } from './_always-open.component'; -import { FlowbiteArrowStyleComponent } from './_arrow-style.component'; -import { FlowbiteColorOptionComponent } from './_color-option.component'; +import { FlowbiteColorComponent } from './_color.component'; import { FlowbiteDefaultComponent } from './_default.component'; import { FlowbiteFlushComponent } from './_flush.component'; +import { FlowbiteIconComponent } from './_icon.component'; 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 - * - * @status:alert BREAKING CHANGES */ const Accordion: NgDocPage = { title: 'Accordion', mdFile: './index.md', category: ComponentCategory, - order: 1, demos: { flowbiteDefaultComponent: FlowbiteDefaultComponent, flowbiteAlwaysOpenComponent: FlowbiteAlwaysOpenComponent, - flowbiteColorOptionComponent: FlowbiteColorOptionComponent, + flowbiteColorComponent: FlowbiteColorComponent, flowbiteFlushComponent: FlowbiteFlushComponent, - flowbiteArrowStyleComponent: FlowbiteArrowStyleComponent, + flowbiteIconComponent: FlowbiteIconComponent, }, }; diff --git a/apps/docs/docs/components/alert/_additional-content.component.html b/apps/docs/docs/components/alert/_additional-content.component.html deleted file mode 100644 index 20bfad17..00000000 --- a/apps/docs/docs/components/alert/_additional-content.component.html +++ /dev/null @@ -1,169 +0,0 @@ - -

This is an primary alert

- - -

This is an dark alert

- - -

This is an blue alert

- - -

This is an red alert

- - -

This is an green alert

- - -

This is an yellow alert

- - - -
- More blue about this blue alert goes here. This example text is going to run a bit longer so - that you can see how spacing within an alert works with this kind of content. -
-
- - - View more - - - Dismiss - -
- - -
- More blue about this blue alert goes here. This example text is going to run a bit longer so - that you can see how spacing within an alert works with this kind of content. -
-
- - - View more - - - Dismiss - -
- - -
- More blue about this blue alert goes here. This example text is going to run a bit longer so - that you can see how spacing within an alert works with this kind of content. -
-
- - - View more - - - Dismiss - -
- - -
- More blue about this blue alert goes here. This example text is going to run a bit longer so - that you can see how spacing within an alert works with this kind of content. -
-
- - - View more - - - Dismiss - -
- - -
- More blue about this blue alert goes here. This example text is going to run a bit longer so - that you can see how spacing within an alert works with this kind of content. -
-
- - - View more - - - Dismiss - -
- - -
- More blue about this blue alert goes here. This example text is going to run a bit longer so - that you can see how spacing within an alert works with this kind of content. -
-
- - - View more - - - Dismiss - -
- diff --git a/apps/docs/docs/components/alert/_additional-content.component.ts b/apps/docs/docs/components/alert/_additional-content.component.ts deleted file mode 100644 index 90118c65..00000000 --- a/apps/docs/docs/components/alert/_additional-content.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { AlertComponent } from 'flowbite-angular/alert'; -import { ButtonComponent } from 'flowbite-angular/button'; -import { IconComponent } from 'flowbite-angular/icon'; - -import { Component } from '@angular/core'; - -@Component({ - selector: 'flowbite-demo-alert-additional-content', - imports: [AlertComponent, IconComponent, ButtonComponent], - templateUrl: './_additional-content.component.html', - host: { - class: 'flex flex wrap flex-col gap-3', - }, -}) -export class FlowbiteAdditionalContentComponent {} diff --git a/apps/docs/docs/components/alert/_border-accent.component.html b/apps/docs/docs/components/alert/_border-accent.component.html index feee912c..918f2f61 100644 --- a/apps/docs/docs/components/alert/_border-accent.component.html +++ b/apps/docs/docs/components/alert/_border-accent.component.html @@ -1,30 +1,70 @@ - +
+ + default alert! Change a few things up and try submitting + again. + +
+ +
+
+ + info alert! Change a few things up and try submitting again. + +
+
+
+
+ + failure alert! Change a few things up and try submitting + again. + +
+
+
+
+ + warning alert! Change a few things up and try submitting + again. + +
+
+
+
+ + success alert! Change a few things up and try submitting + again. + +
+
+
- Primary alert ! Change a few things up and try submitting again. - - - Dark alert ! Change a few things up and try submitting again. - - - blue alert ! Change a few things up and try submitting again. - - - red alert ! Change a few things up and try submitting again. - - - green alert ! Change a few things up and try submitting again. - - - yellow alert ! Change a few things up and try submitting again. - +
+ + primary alert! Change a few things up and try submitting + again. + +
+
diff --git a/apps/docs/docs/components/alert/_border-accent.component.ts b/apps/docs/docs/components/alert/_border-accent.component.ts index 76701360..fce70f86 100644 --- a/apps/docs/docs/components/alert/_border-accent.component.ts +++ b/apps/docs/docs/components/alert/_border-accent.component.ts @@ -1,13 +1,12 @@ -import { AlertComponent } from 'flowbite-angular/alert'; +import { Alert, AlertContent } from 'flowbite-angular/alert'; import { Component } from '@angular/core'; @Component({ - selector: 'flowbite-demo-alert-border-accent', - imports: [AlertComponent], + imports: [Alert, AlertContent], templateUrl: './_border-accent.component.html', host: { - class: 'flex flex wrap flex-col gap-3', + class: 'flex flex-wrap flex-col gap-3 p-6', }, }) export class FlowbiteBorderAccentComponent {} diff --git a/apps/docs/docs/components/alert/_border.component.html b/apps/docs/docs/components/alert/_border.component.html index d0922124..c3329c9c 100644 --- a/apps/docs/docs/components/alert/_border.component.html +++ b/apps/docs/docs/components/alert/_border.component.html @@ -1,30 +1,64 @@ - +
+ + default alert! Change a few things up and try submitting + again. + +
+ +
+
+ + info alert! Change a few things up and try submitting again. + +
+
+
+
+ + failure alert! Change a few things up and try submitting + again. + +
+
+
+
+ + warning alert! Change a few things up and try submitting + again. + +
+
+
+
+ + success alert! Change a few things up and try submitting + again. + +
+
+
- Primary alert ! Change a few things up and try submitting again. - - - Dark alert ! Change a few things up and try submitting again. - - - blue alert ! Change a few things up and try submitting again. - - - red alert ! Change a few things up and try submitting again. - - - green alert ! Change a few things up and try submitting again. - - - yellow alert ! Change a few things up and try submitting again. - +
+ + primary alert! Change a few things up and try submitting + again. + +
+
diff --git a/apps/docs/docs/components/alert/_border.component.ts b/apps/docs/docs/components/alert/_border.component.ts index 6a5c2423..b09693c5 100644 --- a/apps/docs/docs/components/alert/_border.component.ts +++ b/apps/docs/docs/components/alert/_border.component.ts @@ -1,13 +1,12 @@ -import { AlertComponent } from 'flowbite-angular/alert'; +import { Alert, AlertContent } from 'flowbite-angular/alert'; import { Component } from '@angular/core'; @Component({ - selector: 'flowbite-demo-alert-border', - imports: [AlertComponent], + imports: [Alert, AlertContent], templateUrl: './_border.component.html', host: { - class: 'flex flex wrap flex-col gap-3', + class: 'flex flex-wrap flex-col gap-3 p-6', }, }) export class FlowbiteBorderComponent {} diff --git a/apps/docs/docs/components/alert/_default.component.html b/apps/docs/docs/components/alert/_default.component.html index 406addb5..69f653ca 100644 --- a/apps/docs/docs/components/alert/_default.component.html +++ b/apps/docs/docs/components/alert/_default.component.html @@ -1,18 +1,57 @@ - - primary alert ! Change a few things up and try submitting again. - - - Dark alert ! Change a few things up and try submitting again. - - - blue alert ! Change a few things up and try submitting again. - - - red alert ! Change a few things up and try submitting again. - - - green alert ! Change a few things up and try submitting again. - - - yellow alert ! Change a few things up and try submitting again. - +
+
+ + default alert! Change a few things up and try submitting + again. + +
+
+
+
+ + info alert! Change a few things up and try submitting again. + +
+
+
+
+ + failure alert! Change a few things up and try submitting + again. + +
+
+
+
+ + warning alert! Change a few things up and try submitting + again. + +
+
+
+
+ + success alert! Change a few things up and try submitting + again. + +
+
+
+
+ + primary alert! Change a few things up and try submitting + again. + +
+
diff --git a/apps/docs/docs/components/alert/_default.component.ts b/apps/docs/docs/components/alert/_default.component.ts index 532d1507..a75b3ce1 100644 --- a/apps/docs/docs/components/alert/_default.component.ts +++ b/apps/docs/docs/components/alert/_default.component.ts @@ -1,13 +1,12 @@ -import { AlertComponent } from 'flowbite-angular/alert'; +import { Alert, AlertContent } from 'flowbite-angular/alert'; import { Component } from '@angular/core'; @Component({ - selector: 'flowbite-demo-alert-default', - imports: [AlertComponent], + imports: [Alert, AlertContent], templateUrl: './_default.component.html', host: { - class: 'flex flex wrap flex-col gap-3', + class: 'flex flex-wrap flex-col gap-3 p-6', }, }) export class FlowbiteDefaultComponent {} diff --git a/apps/docs/docs/components/alert/_dismissable.component.html b/apps/docs/docs/components/alert/_dismissable.component.html index 41fce1df..ea65d666 100644 --- a/apps/docs/docs/components/alert/_dismissable.component.html +++ b/apps/docs/docs/components/alert/_dismissable.component.html @@ -1,36 +1,130 @@ - +
+ + + + default alert! Change a few things up and try submitting + again. + + + +
+ +
+
+ + + + info alert! Change a few things up and try submitting + again. + + + +
+
+
+
+ + + + failure alert! Change a few things up and try submitting + again. + + + +
+
+
+
+ + + + warning alert! Change a few things up and try submitting + again. + + + +
+
+
+
+ + + + success alert! Change a few things up and try submitting + again. + + + +
+
+
- Primary alert ! Change a few things up and try submitting again. - - - Dark alert ! Change a few things up and try submitting again. - - - blue alert ! Change a few things up and try submitting again. - - - red alert ! Change a few things up and try submitting again. - - - green alert ! Change a few things up and try submitting again. - - - yellow alert ! Change a few things up and try submitting again. - +
+ + + + primary alert! Change a few things up and try submitting + again. + + + +
+
diff --git a/apps/docs/docs/components/alert/_dismissable.component.ts b/apps/docs/docs/components/alert/_dismissable.component.ts index 691003b6..eeb53a22 100644 --- a/apps/docs/docs/components/alert/_dismissable.component.ts +++ b/apps/docs/docs/components/alert/_dismissable.component.ts @@ -1,15 +1,20 @@ -import { AlertComponent } from 'flowbite-angular/alert'; +import { Alert, AlertButton, AlertContent } from 'flowbite-angular/alert'; +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({ - selector: 'flowbite-demo-alert-dismissable', - imports: [AlertComponent], + imports: [Alert, Icon, AlertButton, AlertContent], + providers: [provideIcons({ close })], templateUrl: './_dismissable.component.html', host: { - class: 'flex flex wrap flex-col gap-3', + class: 'flex flex-wrap flex-col gap-3 p-6', }, }) export class FlowbiteDismissableComponent { - onDismiss = () => alert('Alert have been dismissed'); + onDismiss(): void { + alert('Alert has been dismissed'); + } } diff --git a/apps/docs/docs/components/alert/_icon.component.html b/apps/docs/docs/components/alert/_icon.component.html index 07459dea..03148159 100644 --- a/apps/docs/docs/components/alert/_icon.component.html +++ b/apps/docs/docs/components/alert/_icon.component.html @@ -1,36 +1,75 @@ - - Primary alert ! Change a few things up and try submitting again. - - - Dark alert ! Change a few things up and try submitting again. - - - blue alert ! Change a few things up and try submitting again. - - - red alert ! Change a few things up and try submitting again. - - - green alert ! Change a few things up and try submitting again. - - - yellow alert ! Change a few things up and try submitting again. - - - - - +
+
+ + + default alert! Change a few things up and try submitting + again. + +
+
+
+
+ + + info alert! Change a few things up and try submitting again. + +
+
+
+
+ + + failure alert! Change a few things up and try submitting + again. + +
+
+
+
+ + + warning alert! Change a few things up and try submitting + again. + +
+
+
+
+ + + success alert! Change a few things up and try submitting + again. + +
+
+
+
+ + + primary alert! Change a few things up and try submitting + again. + +
+
diff --git a/apps/docs/docs/components/alert/_icon.component.ts b/apps/docs/docs/components/alert/_icon.component.ts index c1684208..80659933 100644 --- a/apps/docs/docs/components/alert/_icon.component.ts +++ b/apps/docs/docs/components/alert/_icon.component.ts @@ -1,14 +1,16 @@ -import { AlertComponent } from 'flowbite-angular/alert'; -import { IconComponent } from 'flowbite-angular/icon'; +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({ - selector: 'flowbite-demo-alert-icon', - imports: [AlertComponent, IconComponent], + imports: [Alert, Icon, AlertContent], + providers: [provideIcons({ infoCircle })], templateUrl: './_icon.component.html', host: { - class: 'flex flex wrap flex-col gap-3', + class: 'flex flex-wrap flex-col gap-3 p-6', }, }) export class FlowbiteIconComponent {} diff --git a/apps/docs/docs/components/alert/index.md b/apps/docs/docs/components/alert/index.md index 68e6c201..47090b7d 100644 --- a/apps/docs/docs/components/alert/index.md +++ b/apps/docs/docs/components/alert/index.md @@ -10,11 +10,11 @@ keyword: AlertPage ``` -```angular-ts file="./_default.component.ts"#L1-L1 group="default" name="typescript" +```angular-ts file="./_default.component.ts" group="default" name="typescript" ``` -## Alerts with icon +## Alert with icon {{ NgDocActions.demo('flowbiteIconComponent', {container: false}) }} @@ -22,11 +22,11 @@ keyword: AlertPage ``` -```angular-ts file="./_icon.component.ts"#L1-L2 group="icon" name="typescript" +```angular-ts file="./_icon.component.ts" group="icon" name="typescript" ``` -## Bordered alerts +## Bordered alert {{ NgDocActions.demo('flowbiteBorderComponent', {container: false}) }} @@ -34,11 +34,11 @@ keyword: AlertPage ``` -```angular-ts file="./_border.component.ts"#L1-L1 group="border" name="typescript" +```angular-ts file="./_border.component.ts" group="border" name="typescript" ``` -## Dismissable alerts +## Dismissable alert {{ NgDocActions.demo('flowbiteDismissableComponent', {container: false}) }} @@ -46,11 +46,7 @@ keyword: AlertPage ``` -```angular-ts file="./_dismissable.component.ts"#L1-L1 group="dismissable" name="typescript" - -``` - -```angular-ts file="./_dismissable.component.ts"#L15 group="dismissable" name="typescript" +```angular-ts file="./_dismissable.component.ts" group="dismissable" name="typescript" ``` @@ -58,22 +54,10 @@ keyword: AlertPage {{ NgDocActions.demo('flowbiteBorderAccentComponent', {container: false}) }} -```angular-html file="./_border-accent.component.html" group="border-accent" name="html" - -``` - -```angular-ts file="./_border-accent.component.ts"#L1-L1 group="border-accent" name="typescript" - -``` - -## Additional content - -{{ NgDocActions.demo('flowbiteAdditionalContentComponent', {container: false}) }} - -```angular-html file="./_additional-content.component.html" group="additional-content" name="html" +```angular-html file="./_border-accent.component.html" group="borderAccent" name="html" ``` -```angular-ts file="./_additional-content.component.ts"#L1-L3 group="additional-content" name="typescript" +```angular-ts file="./_border-accent.component.ts" group="borderAccent" name="typescript" ``` diff --git a/apps/docs/docs/components/alert/ng-doc.page.ts b/apps/docs/docs/components/alert/ng-doc.page.ts index f1230acc..87bd4fee 100644 --- a/apps/docs/docs/components/alert/ng-doc.page.ts +++ b/apps/docs/docs/components/alert/ng-doc.page.ts @@ -1,5 +1,4 @@ import ComponentCategory from '../ng-doc.category'; -import { FlowbiteAdditionalContentComponent } from './_additional-content.component'; import { FlowbiteBorderAccentComponent } from './_border-accent.component'; import { FlowbiteBorderComponent } from './_border.component'; import { FlowbiteDefaultComponent } from './_default.component'; @@ -9,23 +8,19 @@ import { FlowbiteIconComponent } from './_icon.component'; import type { NgDocPage } from '@ng-doc/core'; /** - * Show contextual information to your users using alert elements based on Tailwind CSS * - * @status:alert BREAKING CHANGES */ -const Accordion: NgDocPage = { +const Alert: NgDocPage = { title: 'Alert', mdFile: './index.md', category: ComponentCategory, - order: 2, demos: { flowbiteDefaultComponent: FlowbiteDefaultComponent, - flowbiteBorderAccentComponent: FlowbiteBorderAccentComponent, + flowbiteIconComponent: FlowbiteIconComponent, flowbiteBorderComponent: FlowbiteBorderComponent, - flowbiteAdditionalContentComponent: FlowbiteAdditionalContentComponent, + flowbiteBorderAccentComponent: FlowbiteBorderAccentComponent, flowbiteDismissableComponent: FlowbiteDismissableComponent, - flowbiteIconComponent: FlowbiteIconComponent, }, }; -export default Accordion; +export default Alert; diff --git a/apps/docs/docs/components/badge/_border.component.html b/apps/docs/docs/components/badge/_border.component.html new file mode 100644 index 00000000..15900111 --- /dev/null +++ b/apps/docs/docs/components/badge/_border.component.html @@ -0,0 +1,35 @@ + + default + + + info + + + failure + + + warning + + + success + + + primary + diff --git a/apps/docs/docs/components/badge/_border.component.ts b/apps/docs/docs/components/badge/_border.component.ts new file mode 100644 index 00000000..0126a1b2 --- /dev/null +++ b/apps/docs/docs/components/badge/_border.component.ts @@ -0,0 +1,12 @@ +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 {} diff --git a/apps/docs/docs/components/badge/_bordered.component.html b/apps/docs/docs/components/badge/_bordered.component.html deleted file mode 100644 index 221f17da..00000000 --- a/apps/docs/docs/components/badge/_bordered.component.html +++ /dev/null @@ -1,41 +0,0 @@ -Default - - Primary - - - Blue - - - Red - - - Green - - - Yellow - - - Indigo - - - Purple - - - Pink - diff --git a/apps/docs/docs/components/badge/_bordered.component.ts b/apps/docs/docs/components/badge/_bordered.component.ts deleted file mode 100644 index da23a785..00000000 --- a/apps/docs/docs/components/badge/_bordered.component.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { BadgeComponent } from 'flowbite-angular/badge'; - -import { Component } from '@angular/core'; - -@Component({ - selector: 'flowbite-demo-badge-bordered', - imports: [BadgeComponent], - templateUrl: './_bordered.component.html', - host: { - class: 'flex flex-wrap flex-row gap-3', - }, -}) -export class FlowbiteBorderedComponent {} diff --git a/apps/docs/docs/components/badge/_default.component.html b/apps/docs/docs/components/badge/_default.component.html index 091d0e55..658cd38f 100644 --- a/apps/docs/docs/components/badge/_default.component.html +++ b/apps/docs/docs/components/badge/_default.component.html @@ -1,9 +1,28 @@ -Default -Primary -Blue -Red -Green -Yellow -Indigo -Purple -Pink + + default + + + info + + + failure + + + warning + + + success + + + primary + diff --git a/apps/docs/docs/components/badge/_default.component.ts b/apps/docs/docs/components/badge/_default.component.ts index f04c964a..55f930b2 100644 --- a/apps/docs/docs/components/badge/_default.component.ts +++ b/apps/docs/docs/components/badge/_default.component.ts @@ -1,13 +1,12 @@ -import { BadgeComponent } from 'flowbite-angular/badge'; +import { Badge } from 'flowbite-angular/badge'; import { Component } from '@angular/core'; @Component({ - selector: 'flowbite-demo-badge-default', - imports: [BadgeComponent], + imports: [Badge], templateUrl: './_default.component.html', host: { - class: 'flex flex-wrap flex-row gap-3', + class: 'flex flex-wrap flex-row gap-3 p-6', }, }) export class FlowbiteDefaultComponent {} diff --git a/apps/docs/docs/components/badge/_dismiss.component.html b/apps/docs/docs/components/badge/_dismiss.component.html new file mode 100644 index 00000000..9f6b3aa7 --- /dev/null +++ b/apps/docs/docs/components/badge/_dismiss.component.html @@ -0,0 +1,70 @@ + + + default + + + + + info + + + + + failure + + + + + warning + + + + + success + + + + + primary + + diff --git a/apps/docs/docs/components/badge/_dismiss.component.ts b/apps/docs/docs/components/badge/_dismiss.component.ts new file mode 100644 index 00000000..bdee70ed --- /dev/null +++ b/apps/docs/docs/components/badge/_dismiss.component.ts @@ -0,0 +1,20 @@ +import { Badge } from 'flowbite-angular/badge'; +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: [Badge, Icon], + providers: [provideIcons({ 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'); + } +} diff --git a/apps/docs/docs/components/badge/_dismissable.component.html b/apps/docs/docs/components/badge/_dismissable.component.html deleted file mode 100644 index 01dc07bb..00000000 --- a/apps/docs/docs/components/badge/_dismissable.component.html +++ /dev/null @@ -1,53 +0,0 @@ - - Default - - - Primary - - - Blue - - - Red - - - Green - - - Yellow - - - Indigo - - - Purple - - - Pink - diff --git a/apps/docs/docs/components/badge/_dismissable.component.ts b/apps/docs/docs/components/badge/_dismissable.component.ts deleted file mode 100644 index 7cf50744..00000000 --- a/apps/docs/docs/components/badge/_dismissable.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { BadgeComponent } from 'flowbite-angular/badge'; - -import { Component } from '@angular/core'; - -@Component({ - selector: 'flowbite-demo-badge-dismissable', - imports: [BadgeComponent], - templateUrl: './_dismissable.component.html', - host: { - class: 'flex flex-wrap flex-row gap-3', - }, -}) -export class FlowbiteDismissableComponent { - onDismiss = () => alert('Badge have been dismissed'); -} diff --git a/apps/docs/docs/components/badge/_icon-only.component.html b/apps/docs/docs/components/badge/_icon-only.component.html deleted file mode 100644 index e9e8ad38..00000000 --- a/apps/docs/docs/components/badge/_icon-only.component.html +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - - - - - - - diff --git a/apps/docs/docs/components/badge/_icon-only.component.ts b/apps/docs/docs/components/badge/_icon-only.component.ts deleted file mode 100644 index 042e7445..00000000 --- a/apps/docs/docs/components/badge/_icon-only.component.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { BadgeComponent } from 'flowbite-angular/badge'; -import { IconComponent } from 'flowbite-angular/icon'; - -import { Component } from '@angular/core'; - -@Component({ - selector: 'flowbite-demo-badge-icon-only', - imports: [BadgeComponent, IconComponent], - templateUrl: './_icon-only.component.html', - host: { - class: 'flex flex-wrap flex-row gap-3', - }, -}) -export class FlowbiteIconOnlyComponent {} diff --git a/apps/docs/docs/components/badge/_icon.component.html b/apps/docs/docs/components/badge/_icon.component.html index ed16ba1b..14b0e920 100644 --- a/apps/docs/docs/components/badge/_icon.component.html +++ b/apps/docs/docs/components/badge/_icon.component.html @@ -1,12 +1,46 @@ - - - 2 minutes ago - - - - 3 days ago - + + + default + + + + info + + + + failure + + + + success + + + + warning + + + + primary + diff --git a/apps/docs/docs/components/badge/_icon.component.ts b/apps/docs/docs/components/badge/_icon.component.ts index f03a9b2e..86d41a56 100644 --- a/apps/docs/docs/components/badge/_icon.component.ts +++ b/apps/docs/docs/components/badge/_icon.component.ts @@ -1,14 +1,16 @@ -import { BadgeComponent } from 'flowbite-angular/badge'; -import { IconComponent } from 'flowbite-angular/icon'; +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({ - selector: 'flowbite-demo-badge-icon', - imports: [BadgeComponent, IconComponent], + imports: [Badge, Icon], + providers: [provideIcons({ check })], templateUrl: './_icon.component.html', host: { - class: 'flex flex-wrap flex-row gap-3', + class: 'flex flex-wrap flex-row gap-3 p-6', }, }) export class FlowbiteIconComponent {} diff --git a/apps/docs/docs/components/badge/_large.component.html b/apps/docs/docs/components/badge/_large.component.html deleted file mode 100644 index e4730928..00000000 --- a/apps/docs/docs/components/badge/_large.component.html +++ /dev/null @@ -1,41 +0,0 @@ -Default - - Primary - - - Blue - - - Red - - - Green - - - Yellow - - - Indigo - - - Purple - - - Pink - diff --git a/apps/docs/docs/components/badge/_large.component.ts b/apps/docs/docs/components/badge/_large.component.ts deleted file mode 100644 index 39d9547f..00000000 --- a/apps/docs/docs/components/badge/_large.component.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { BadgeComponent } from 'flowbite-angular/badge'; - -import { Component } from '@angular/core'; - -@Component({ - selector: 'flowbite-demo-badge-large', - imports: [BadgeComponent], - templateUrl: './_large.component.html', - host: { - class: 'flex flex-wrap flex-row gap-3', - }, -}) -export class FlowbiteLargeComponent {} diff --git a/apps/docs/docs/components/badge/_link.component.html b/apps/docs/docs/components/badge/_link.component.html index 75b5d717..30839d6f 100644 --- a/apps/docs/docs/components/badge/_link.component.html +++ b/apps/docs/docs/components/badge/_link.component.html @@ -1,62 +1,35 @@ - - Default - - + default + + + info + + + failure + + + success + + + warning + + - Primary - - - Blue - - - Red - - - Green - - - Yellow - - - Indigo - - - Purple - - - Pink - + primary + diff --git a/apps/docs/docs/components/badge/_link.component.ts b/apps/docs/docs/components/badge/_link.component.ts index 852c8be1..6f7d8e0e 100644 --- a/apps/docs/docs/components/badge/_link.component.ts +++ b/apps/docs/docs/components/badge/_link.component.ts @@ -1,14 +1,12 @@ -import { BadgeComponent } from 'flowbite-angular/badge'; -import { FlowbiteRouterLinkDirective } from 'flowbite-angular/router-link'; +import { BadgeLink } from 'flowbite-angular/badge'; import { Component } from '@angular/core'; @Component({ - selector: 'flowbite-demo-badge-link', - imports: [BadgeComponent, FlowbiteRouterLinkDirective], + imports: [BadgeLink], templateUrl: './_link.component.html', host: { - class: 'flex flex-wrap flex-row gap-3', + class: 'flex flex-wrap flex-row gap-3 p-6', }, }) export class FlowbiteLinkComponent {} diff --git a/apps/docs/docs/components/badge/index.md b/apps/docs/docs/components/badge/index.md index 4dcecb25..6e832b34 100644 --- a/apps/docs/docs/components/badge/index.md +++ b/apps/docs/docs/components/badge/index.md @@ -10,31 +10,19 @@ keyword: BadgePage ``` -```angular-ts file="./_default.component.ts"#L1-L1 group="default" name="typescript" - -``` - -## Large badge - -{{ NgDocActions.demo('flowbiteLargeComponent', {container: false}) }} - -```angular-html file="./_large.component.html" group="large" name="html" - -``` - -```angular-ts file="./_large.component.ts"#L1-L1 group="large" name="typescript" +```angular-ts file="./_default.component.ts" group="default" name="typescript" ``` ## Bordered badge -{{ NgDocActions.demo('flowbiteBorderedComponent', {container: false}) }} +{{ NgDocActions.demo('flowbiteBorderComponent', {container: false}) }} -```angular-html file="./_bordered.component.html" group="bordered" name="html" +```angular-html file="./_border.component.html" group="border" name="html" ``` -```angular-ts file="./_bordered.component.ts" group="bordered" name="typescript" +```angular-ts file="./_border.component.ts" group="border" name="typescript" ``` @@ -46,7 +34,7 @@ keyword: BadgePage ``` -```angular-ts file="./_link.component.ts"#L1-L2 group="link" name="typescript" +```angular-ts file="./_link.component.ts" group="link" name="typescript" ``` @@ -58,34 +46,18 @@ keyword: BadgePage ``` -```angular-ts file="./_icon.component.ts"#L1-L2 group="icon" name="typescript" - -``` - -## Badge with icon only - -{{ NgDocActions.demo('flowbiteIconOnlyComponent', {container: false}) }} - -```angular-html file="./_icon-only.component.html" group="icon-only" name="html" - -``` - -```angular-ts file="./_icon-only.component.ts"#L1-L2 group="icon-only" name="typescript" +```angular-ts file="./_icon.component.ts" group="icon" name="typescript" ``` ## Dismissable badge -{{ NgDocActions.demo('flowbiteDismissableComponent', {container: false}) }} - -```angular-html file="./_dismissable.component.html" group="dismissable" name="html" - -``` +{{ NgDocActions.demo('flowbiteDismissComponent', {container: false}) }} -```angular-ts file="./_dismissable.component.ts"#L1-L1 group="dismissable" name="typescript" +```angular-html file="./_dismiss.component.html" group="dismiss" name="html" ``` -```angular-ts file="./_dismissable.component.ts"#L14 group="dismissable" name="typescript" +```angular-ts file="./_dismiss.component.ts" group="dismiss" name="typescript" ``` diff --git a/apps/docs/docs/components/badge/ng-doc.page.ts b/apps/docs/docs/components/badge/ng-doc.page.ts index 7b3188e5..a0f5a6a3 100644 --- a/apps/docs/docs/components/badge/ng-doc.page.ts +++ b/apps/docs/docs/components/badge/ng-doc.page.ts @@ -1,33 +1,26 @@ import ComponentCategory from '../ng-doc.category'; -import { FlowbiteBorderedComponent } from './_bordered.component'; +import { FlowbiteBorderComponent } from './_border.component'; import { FlowbiteDefaultComponent } from './_default.component'; -import { FlowbiteDismissableComponent } from './_dismissable.component'; -import { FlowbiteIconOnlyComponent } from './_icon-only.component'; +import { FlowbiteDismissComponent } from './_dismiss.component'; import { FlowbiteIconComponent } from './_icon.component'; -import { FlowbiteLargeComponent } from './_large.component'; import { FlowbiteLinkComponent } from './_link.component'; import type { NgDocPage } from '@ng-doc/core'; /** - * Use Tailwind CSS badges as elements to show counts or labels separately or inside other components * - * @status:alert BREAKING CHANGES */ -const badge: NgDocPage = { +const Badge: NgDocPage = { title: 'Badge', mdFile: './index.md', category: ComponentCategory, - order: 3, demos: { flowbiteDefaultComponent: FlowbiteDefaultComponent, - flowbiteBorderedComponent: FlowbiteBorderedComponent, - flowbiteIconOnlyComponent: FlowbiteIconOnlyComponent, - flowbiteIconComponent: FlowbiteIconComponent, - flowbiteLargeComponent: FlowbiteLargeComponent, + flowbiteBorderComponent: FlowbiteBorderComponent, flowbiteLinkComponent: FlowbiteLinkComponent, - flowbiteDismissableComponent: FlowbiteDismissableComponent, + flowbiteIconComponent: FlowbiteIconComponent, + flowbiteDismissComponent: FlowbiteDismissComponent, }, }; -export default badge; +export default Badge; diff --git a/apps/docs/docs/components/breadcrumb/_default.component.html b/apps/docs/docs/components/breadcrumb/_default.component.html index 22fd03ea..068a70b4 100644 --- a/apps/docs/docs/components/breadcrumb/_default.component.html +++ b/apps/docs/docs/components/breadcrumb/_default.component.html @@ -1,23 +1,22 @@ - - - - Home - - - Projects - - - Flowbite - - + diff --git a/apps/docs/docs/components/breadcrumb/_default.component.ts b/apps/docs/docs/components/breadcrumb/_default.component.ts index 22e12d7a..e5766262 100644 --- a/apps/docs/docs/components/breadcrumb/_default.component.ts +++ b/apps/docs/docs/components/breadcrumb/_default.component.ts @@ -1,17 +1,17 @@ -import { BreadcrumbComponent, BreadcrumbItemComponent } from 'flowbite-angular/breadcrumb'; -import { IconComponent } from 'flowbite-angular/icon'; -import { FlowbiteRouterLinkDirective } from 'flowbite-angular/router-link'; +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({ - selector: 'flowbite-demo-breadcrumb-default', - imports: [ - BreadcrumbComponent, - BreadcrumbItemComponent, - IconComponent, - FlowbiteRouterLinkDirective, - ], + 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 {} diff --git a/apps/docs/docs/components/breadcrumb/index.md b/apps/docs/docs/components/breadcrumb/index.md index f5375812..215dfa6a 100644 --- a/apps/docs/docs/components/breadcrumb/index.md +++ b/apps/docs/docs/components/breadcrumb/index.md @@ -10,6 +10,6 @@ keyword: BreadcrumbPage ``` -```angular-ts file="./_default.component.ts"#L1-L3 group="default" name="typescript" +```angular-ts file="./_default.component.ts" group="default" name="typescript" ``` diff --git a/apps/docs/docs/components/breadcrumb/ng-doc.page.ts b/apps/docs/docs/components/breadcrumb/ng-doc.page.ts index a576bc54..b7456cf4 100644 --- a/apps/docs/docs/components/breadcrumb/ng-doc.page.ts +++ b/apps/docs/docs/components/breadcrumb/ng-doc.page.ts @@ -4,18 +4,15 @@ import { FlowbiteDefaultComponent } from './_default.component'; import type { NgDocPage } from '@ng-doc/core'; /** - * Show the location of the current page in a hierarchical structure using the Tailwind CSS breadcrumb components * - * @status:alert BREAKING CHANGES */ -const breadcrumb: NgDocPage = { +const Breadcrumb: NgDocPage = { title: 'Breadcrumb', mdFile: './index.md', category: ComponentCategory, - order: 4, demos: { flowbiteDefaultComponent: FlowbiteDefaultComponent, }, }; -export default breadcrumb; +export default Breadcrumb; diff --git a/apps/docs/docs/components/button/_default.component.html b/apps/docs/docs/components/button/_default.component.html index 64f5324a..94661648 100644 --- a/apps/docs/docs/components/button/_default.component.html +++ b/apps/docs/docs/components/button/_default.component.html @@ -1,7 +1,26 @@ -Default -Dark -Light -Success -Failure -Warning -Purple + + + + + + diff --git a/apps/docs/docs/components/button/_default.component.ts b/apps/docs/docs/components/button/_default.component.ts index f491f5c5..f227b5b7 100644 --- a/apps/docs/docs/components/button/_default.component.ts +++ b/apps/docs/docs/components/button/_default.component.ts @@ -1,13 +1,12 @@ -import { ButtonComponent } from 'flowbite-angular/button'; +import { Button } from 'flowbite-angular/button'; import { Component } from '@angular/core'; @Component({ - selector: 'flowbite-demo-button-default', - imports: [ButtonComponent], + imports: [Button], templateUrl: './_default.component.html', host: { - class: 'flex flex wrap flex-row gap-3', + class: 'flex flex-wrap flex-row gap-3 p-6', }, }) export class FlowbiteDefaultComponent {} diff --git a/apps/docs/docs/components/button/_disabled.component.html b/apps/docs/docs/components/button/_disabled.component.html index 21a7f299..634a094c 100644 --- a/apps/docs/docs/components/button/_disabled.component.html +++ b/apps/docs/docs/components/button/_disabled.component.html @@ -1,6 +1,35 @@ -Disabled button - - Disabled button - + + + + + + diff --git a/apps/docs/docs/components/button/_disabled.component.ts b/apps/docs/docs/components/button/_disabled.component.ts index 38670523..2463c045 100644 --- a/apps/docs/docs/components/button/_disabled.component.ts +++ b/apps/docs/docs/components/button/_disabled.component.ts @@ -1,13 +1,12 @@ -import { ButtonComponent } from 'flowbite-angular/button'; +import { Button } from 'flowbite-angular/button'; import { Component } from '@angular/core'; @Component({ - selector: 'flowbite-demo-button-disabled', - imports: [ButtonComponent], + imports: [Button], templateUrl: './_disabled.component.html', host: { - class: 'flex flex wrap flex-row gap-3', + class: 'flex flex-wrap flex-row gap-3 p-6', }, }) export class FlowbiteDisabledComponent {} diff --git a/apps/docs/docs/components/button/_gradient-duotone.component.html b/apps/docs/docs/components/button/_gradient-duotone.component.html deleted file mode 100644 index 21af0e52..00000000 --- a/apps/docs/docs/components/button/_gradient-duotone.component.html +++ /dev/null @@ -1,7 +0,0 @@ -Purple to Blue -Cyan to Blue -Green to Blue -Purple to Pink -Pink to Orange -Teal to Lime -Red to Yellow diff --git a/apps/docs/docs/components/button/_gradient-duotone.component.ts b/apps/docs/docs/components/button/_gradient-duotone.component.ts deleted file mode 100644 index e52c45a4..00000000 --- a/apps/docs/docs/components/button/_gradient-duotone.component.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { ButtonComponent } from 'flowbite-angular/button'; - -import { Component } from '@angular/core'; - -@Component({ - selector: 'flowbite-demo-button-gradient-duotone', - imports: [ButtonComponent], - templateUrl: './_gradient-duotone.component.html', - host: { - class: 'flex flex wrap flex-row gap-3', - }, -}) -export class FlowbiteGradientDuotoneComponent {} diff --git a/apps/docs/docs/components/button/_gradient-monochrome.component.html b/apps/docs/docs/components/button/_gradient-monochrome.component.html deleted file mode 100644 index 69a39737..00000000 --- a/apps/docs/docs/components/button/_gradient-monochrome.component.html +++ /dev/null @@ -1,8 +0,0 @@ -Info -Success -Cyan -Teal -Lime -Failure -Pink -Purple diff --git a/apps/docs/docs/components/button/_gradient-monochrome.component.ts b/apps/docs/docs/components/button/_gradient-monochrome.component.ts deleted file mode 100644 index 6f39e809..00000000 --- a/apps/docs/docs/components/button/_gradient-monochrome.component.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { ButtonComponent } from 'flowbite-angular/button'; - -import { Component } from '@angular/core'; - -@Component({ - selector: 'flowbite-demo-button-gradient-monochrome', - imports: [ButtonComponent], - templateUrl: './_gradient-monochrome.component.html', - host: { - class: 'flex flex wrap flex-row gap-3', - }, -}) -export class FlowbiteGradientMonochromeComponent {} diff --git a/apps/docs/docs/components/button/_gradient-outline.component.html b/apps/docs/docs/components/button/_gradient-outline.component.html deleted file mode 100644 index 9ee1f786..00000000 --- a/apps/docs/docs/components/button/_gradient-outline.component.html +++ /dev/null @@ -1,35 +0,0 @@ - - Purple to Blue - - - Cyan to Blue - - - Green to Blue - - - Purple to Pink - - - Pink to Orange - - - Teal to Lime - - - Red to Yellow - diff --git a/apps/docs/docs/components/button/_gradient-outline.component.ts b/apps/docs/docs/components/button/_gradient-outline.component.ts deleted file mode 100644 index 60026424..00000000 --- a/apps/docs/docs/components/button/_gradient-outline.component.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { ButtonComponent } from 'flowbite-angular/button'; - -import { Component } from '@angular/core'; - -@Component({ - selector: 'flowbite-demo-button-gradient-outline', - imports: [ButtonComponent], - templateUrl: './_gradient-outline.component.html', - host: { - class: 'flex flex wrap flex-row gap-3', - }, -}) -export class FlowbiteGradientOutlineComponent {} diff --git a/apps/docs/docs/components/button/_group.component.html b/apps/docs/docs/components/button/_group.component.html new file mode 100644 index 00000000..4a7b5de0 --- /dev/null +++ b/apps/docs/docs/components/button/_group.component.html @@ -0,0 +1,5 @@ +
+ + + +
diff --git a/apps/docs/docs/components/button/_group.component.ts b/apps/docs/docs/components/button/_group.component.ts new file mode 100644 index 00000000..f94b8e3a --- /dev/null +++ b/apps/docs/docs/components/button/_group.component.ts @@ -0,0 +1,13 @@ +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 {} diff --git a/apps/docs/docs/components/button/_icon-only.component.html b/apps/docs/docs/components/button/_icon-only.component.html deleted file mode 100644 index ed9a24f8..00000000 --- a/apps/docs/docs/components/button/_icon-only.component.html +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - - - - - - diff --git a/apps/docs/docs/components/button/_icon-only.component.ts b/apps/docs/docs/components/button/_icon-only.component.ts deleted file mode 100644 index 4fcec401..00000000 --- a/apps/docs/docs/components/button/_icon-only.component.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { ButtonComponent } from 'flowbite-angular/button'; -import { IconComponent } from 'flowbite-angular/icon'; - -import { Component } from '@angular/core'; - -@Component({ - selector: 'flowbite-demo-button-icon-only', - imports: [ButtonComponent, IconComponent], - templateUrl: './_icon-only.component.html', - host: { - class: 'flex flex wrap flex-row gap-3', - }, -}) -export class FlowbiteIconOnlyComponent {} diff --git a/apps/docs/docs/components/button/_icon.component.html b/apps/docs/docs/components/button/_icon.component.html index 2bbc34c7..b16e7248 100644 --- a/apps/docs/docs/components/button/_icon.component.html +++ b/apps/docs/docs/components/button/_icon.component.html @@ -1,12 +1,46 @@ - - - Buy now - - - Choose plan - - + + + + + + diff --git a/apps/docs/docs/components/button/_icon.component.ts b/apps/docs/docs/components/button/_icon.component.ts index ae48468c..87ee8c84 100644 --- a/apps/docs/docs/components/button/_icon.component.ts +++ b/apps/docs/docs/components/button/_icon.component.ts @@ -1,14 +1,16 @@ -import { ButtonComponent } from 'flowbite-angular/button'; -import { IconComponent } from 'flowbite-angular/icon'; +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({ - selector: 'flowbite-demo-button-icon', - imports: [ButtonComponent, IconComponent], + imports: [Button, Icon], + providers: [provideIcons({ brain })], templateUrl: './_icon.component.html', host: { - class: 'flex flex wrap flex-row gap-3', + class: 'flex flex-wrap flex-row gap-3 p-6', }, }) export class FlowbiteIconComponent {} diff --git a/apps/docs/docs/components/button/_label.component.html b/apps/docs/docs/components/button/_label.component.html deleted file mode 100644 index 0d1b5968..00000000 --- a/apps/docs/docs/components/button/_label.component.html +++ /dev/null @@ -1,8 +0,0 @@ - - Messages - - 2 - - diff --git a/apps/docs/docs/components/button/_label.component.ts b/apps/docs/docs/components/button/_label.component.ts deleted file mode 100644 index be01e82e..00000000 --- a/apps/docs/docs/components/button/_label.component.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { BadgeComponent } from 'flowbite-angular/badge'; -import { ButtonComponent } from 'flowbite-angular/button'; - -import { Component } from '@angular/core'; - -@Component({ - selector: 'flowbite-demo-button-label', - imports: [ButtonComponent, BadgeComponent], - templateUrl: './_label.component.html', - host: { - class: 'flex flex wrap flex-row gap-3', - }, -}) -export class FlowbiteLabelComponent {} diff --git a/apps/docs/docs/components/button/_outline.component.html b/apps/docs/docs/components/button/_outline.component.html index cf9248ba..965d1698 100644 --- a/apps/docs/docs/components/button/_outline.component.html +++ b/apps/docs/docs/components/button/_outline.component.html @@ -1,26 +1,35 @@ -Default - - Dark - - - Success - - - Failure - - - Warning - - - Purple - + + + + + + diff --git a/apps/docs/docs/components/button/_outline.component.ts b/apps/docs/docs/components/button/_outline.component.ts index 385892b5..c472ea0a 100644 --- a/apps/docs/docs/components/button/_outline.component.ts +++ b/apps/docs/docs/components/button/_outline.component.ts @@ -1,13 +1,12 @@ -import { ButtonComponent } from 'flowbite-angular/button'; +import { Button } from 'flowbite-angular/button'; import { Component } from '@angular/core'; @Component({ - selector: 'flowbite-demo-button-outline', - imports: [ButtonComponent], + imports: [Button], templateUrl: './_outline.component.html', host: { - class: 'flex flex wrap flex-row gap-3', + class: 'flex flex-wrap flex-row gap-3 p-6', }, }) export class FlowbiteOutlineComponent {} diff --git a/apps/docs/docs/components/button/_pill.component.html b/apps/docs/docs/components/button/_pill.component.html index 6d2a51e9..3420f4d5 100644 --- a/apps/docs/docs/components/button/_pill.component.html +++ b/apps/docs/docs/components/button/_pill.component.html @@ -1,30 +1,35 @@ - - Dark - - - Light - - - Success - - - Failure - - - Warning - - - Purple - + + + + + + diff --git a/apps/docs/docs/components/button/_pill.component.ts b/apps/docs/docs/components/button/_pill.component.ts index 481b0c8b..bcea3dc2 100644 --- a/apps/docs/docs/components/button/_pill.component.ts +++ b/apps/docs/docs/components/button/_pill.component.ts @@ -1,13 +1,12 @@ -import { ButtonComponent } from 'flowbite-angular/button'; +import { Button } from 'flowbite-angular/button'; import { Component } from '@angular/core'; @Component({ - selector: 'flowbite-demo-button-pill', - imports: [ButtonComponent], + imports: [Button], templateUrl: './_pill.component.html', host: { - class: 'flex flex wrap flex-row gap-3', + class: 'flex flex-wrap flex-row gap-3 p-6', }, }) export class FlowbitePillComponent {} diff --git a/apps/docs/docs/components/button/_size.component.html b/apps/docs/docs/components/button/_size.component.html index 9365bf25..0d6aca22 100644 --- a/apps/docs/docs/components/button/_size.component.html +++ b/apps/docs/docs/components/button/_size.component.html @@ -1,5 +1,25 @@ -Extra small -Small -Base -Large -Extra large + + + + + diff --git a/apps/docs/docs/components/button/_size.component.ts b/apps/docs/docs/components/button/_size.component.ts index 3294a50b..2b8f43e8 100644 --- a/apps/docs/docs/components/button/_size.component.ts +++ b/apps/docs/docs/components/button/_size.component.ts @@ -1,13 +1,12 @@ -import { ButtonComponent } from 'flowbite-angular/button'; +import { Button } from 'flowbite-angular/button'; import { Component } from '@angular/core'; @Component({ - selector: 'flowbite-demo-button-size', - imports: [ButtonComponent], + imports: [Button], templateUrl: './_size.component.html', host: { - class: 'flex flex wrap flex-row gap-3 items-center', + class: 'flex flex-wrap flex-row gap-3 p-6', }, }) export class FlowbiteSizeComponent {} diff --git a/apps/docs/docs/components/button/index.md b/apps/docs/docs/components/button/index.md index 6418c871..2c0c1d73 100644 --- a/apps/docs/docs/components/button/index.md +++ b/apps/docs/docs/components/button/index.md @@ -10,11 +10,11 @@ keyword: ButtonPage ``` -```angular-ts file="./_default.component.ts"#L1-L1 group="default" name="typescript" +```angular-ts file="./_default.component.ts" group="default" name="typescript" ``` -## Button pills +## Button pill {{ NgDocActions.demo('flowbitePillComponent', {container: false}) }} @@ -22,47 +22,11 @@ keyword: ButtonPage ``` -```angular-ts file="./_pill.component.ts"#L1-L1 group="pill" name="typescript" +```angular-ts file="./_pill.component.ts" group="pill" name="typescript" ``` -## Gradient monochrome - -{{ NgDocActions.demo('flowbiteGradientMonochromeComponent', {container: false}) }} - -```angular-html file="./_gradient-monochrome.component.html" group="gradient-monochrome" name="html" - -``` - -```angular-ts file="./_gradient-monochrome.component.ts"#L1-L1 group="gradient-monochrome" name="typescript" - -``` - -## Gradient duo-tone - -{{ NgDocActions.demo('flowbiteGradientDuotoneComponent', {container: false}) }} - -```angular-html file="./_gradient-duotone.component.html" group="gradient-duotone" name="html" - -``` - -```angular-ts file="./_gradient-duotone.component.ts"#L1-L1 group="gradient-duotone" name="typescript" - -``` - -## Gradient outline - -{{ NgDocActions.demo('flowbiteGradientOutlineComponent', {container: false}) }} - -```angular-html file="./_gradient-outline.component.html" group="gradient-outline" name="html" - -``` - -```angular-ts file="./_gradient-outline.component.ts"#L1-L1 group="gradient-outline" name="typescript" - -``` - -## Outline buttons +## Outline button {{ NgDocActions.demo('flowbiteOutlineComponent', {container: false}) }} @@ -70,7 +34,7 @@ keyword: ButtonPage ``` -```angular-ts file="./_outline.component.ts"#L1-L1 group="outline" name="typescript" +```angular-ts file="./_outline.component.ts" group="outline" name="typescript" ``` @@ -82,7 +46,7 @@ keyword: ButtonPage ``` -```angular-ts file="./_size.component.ts"#L1-L1 group="size" name="typescript" +```angular-ts file="./_size.component.ts" group="size" name="typescript" ``` @@ -94,42 +58,30 @@ keyword: ButtonPage ``` -```angular-ts file="./_icon.component.ts"#L1-L2 group="icon" name="typescript" - -``` - -## Button with label - -{{ NgDocActions.demo('flowbiteLabelComponent', {container: false}) }} - -```angular-html file="./_label.component.html" group="label" name="html" - -``` - -```angular-ts file="./_label.component.ts"#L1-L2 group="label" name="typescript" +```angular-ts file="./_icon.component.ts" group="icon" name="typescript" ``` -## Icon buttons +## Disabled button -{{ NgDocActions.demo('flowbiteIconOnlyComponent', {container: false}) }} +{{ NgDocActions.demo('flowbiteDisabledComponent', {container: false}) }} -```angular-html file="./_icon-only.component.html" group="icon-only" name="html" +```angular-html file="./_disabled.component.html" group="disabled" name="html" ``` -```angular-ts file="./_icon-only.component.ts"#L1-L2 group="icon-only" name="typescript" +```angular-ts file="./_disabled.component.ts" group="disabled" name="typescript" ``` -## Disabled +## Button group -{{ NgDocActions.demo('flowbiteDisabledComponent', {container: false}) }} +{{ NgDocActions.demo('flowbiteGroupComponent', {container: false}) }} -```angular-html file="./_disabled.component.html" group="disabled" name="html" +```angular-html file="./_group.component.html" group="group" name="html" ``` -```angular-ts file="./_disabled.component.ts"#L1-L1 group="disabled" name="typescript" +```angular-ts file="./_group.component.ts" group="group" name="typescript" ``` diff --git a/apps/docs/docs/components/button/ng-doc.page.ts b/apps/docs/docs/components/button/ng-doc.page.ts index af05cabc..288a4d69 100644 --- a/apps/docs/docs/components/button/ng-doc.page.ts +++ b/apps/docs/docs/components/button/ng-doc.page.ts @@ -1,12 +1,8 @@ import ComponentCategory from '../ng-doc.category'; import { FlowbiteDefaultComponent } from './_default.component'; import { FlowbiteDisabledComponent } from './_disabled.component'; -import { FlowbiteGradientDuotoneComponent } from './_gradient-duotone.component'; -import { FlowbiteGradientMonochromeComponent } from './_gradient-monochrome.component'; -import { FlowbiteGradientOutlineComponent } from './_gradient-outline.component'; -import { FlowbiteIconOnlyComponent } from './_icon-only.component'; +import { FlowbiteGroupComponent } from './_group.component'; import { FlowbiteIconComponent } from './_icon.component'; -import { FlowbiteLabelComponent } from './_label.component'; import { FlowbiteOutlineComponent } from './_outline.component'; import { FlowbitePillComponent } from './_pill.component'; import { FlowbiteSizeComponent } from './_size.component'; @@ -14,28 +10,21 @@ import { FlowbiteSizeComponent } from './_size.component'; import type { NgDocPage } from '@ng-doc/core'; /** - * Use the button component inside forms, as links with support for multiple styles, colors, sizes, gradients, and shadows * - * @status:alert BREAKING CHANGES */ -const button: NgDocPage = { +const Button: NgDocPage = { title: 'Button', mdFile: './index.md', category: ComponentCategory, - order: 5, demos: { flowbiteDefaultComponent: FlowbiteDefaultComponent, - flowbiteDisabledComponent: FlowbiteDisabledComponent, - flowbiteGradientDuotoneComponent: FlowbiteGradientDuotoneComponent, - flowbiteGradientMonochromeComponent: FlowbiteGradientMonochromeComponent, - flowbiteGradientOutlineComponent: FlowbiteGradientOutlineComponent, - flowbiteIconOnlyComponent: FlowbiteIconOnlyComponent, - flowbiteIconComponent: FlowbiteIconComponent, - flowbiteLabelComponent: FlowbiteLabelComponent, - flowbiteOutlineComponent: FlowbiteOutlineComponent, flowbitePillComponent: FlowbitePillComponent, + flowbiteOutlineComponent: FlowbiteOutlineComponent, flowbiteSizeComponent: FlowbiteSizeComponent, + flowbiteIconComponent: FlowbiteIconComponent, + flowbiteDisabledComponent: FlowbiteDisabledComponent, + flowbiteGroupComponent: FlowbiteGroupComponent, }, }; -export default button; +export default Button; diff --git a/apps/docs/docs/components/card/_default.component.html b/apps/docs/docs/components/card/_default.component.html new file mode 100644 index 00000000..5b2b952a --- /dev/null +++ b/apps/docs/docs/components/card/_default.component.html @@ -0,0 +1,9 @@ +
+
+
Noteworthy technology acquisitions 2021
+

+ Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse + chronological order. +

+
+
diff --git a/apps/docs/docs/components/card/_default.component.ts b/apps/docs/docs/components/card/_default.component.ts new file mode 100644 index 00000000..888a8363 --- /dev/null +++ b/apps/docs/docs/components/card/_default.component.ts @@ -0,0 +1,12 @@ +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 {} diff --git a/apps/docs/docs/components/card/index.md b/apps/docs/docs/components/card/index.md new file mode 100644 index 00000000..abf175a7 --- /dev/null +++ b/apps/docs/docs/components/card/index.md @@ -0,0 +1,15 @@ +--- +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" + +``` diff --git a/apps/docs/docs/components/card/ng-doc.page.ts b/apps/docs/docs/components/card/ng-doc.page.ts new file mode 100644 index 00000000..ed236931 --- /dev/null +++ b/apps/docs/docs/components/card/ng-doc.page.ts @@ -0,0 +1,18 @@ +import ComponentCategory from '../ng-doc.category'; +import { FlowbiteDefaultComponent } from './_default.component'; + +import type { NgDocPage } from '@ng-doc/core'; + +/** + * + */ +const Card: NgDocPage = { + title: 'Card', + mdFile: './index.md', + category: ComponentCategory, + demos: { + flowbiteDefaultComponent: FlowbiteDefaultComponent, + }, +}; + +export default Card; diff --git a/apps/docs/docs/components/clipboard/_default.component.html b/apps/docs/docs/components/clipboard/_default.component.html new file mode 100644 index 00000000..76aa34c3 --- /dev/null +++ b/apps/docs/docs/components/clipboard/_default.component.html @@ -0,0 +1,4 @@ +
diff --git a/apps/docs/docs/components/clipboard/_default.component.ts b/apps/docs/docs/components/clipboard/_default.component.ts new file mode 100644 index 00000000..1586d698 --- /dev/null +++ b/apps/docs/docs/components/clipboard/_default.component.ts @@ -0,0 +1,12 @@ +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 {} diff --git a/apps/docs/docs/components/clipboard/index.md b/apps/docs/docs/components/clipboard/index.md new file mode 100644 index 00000000..badfa253 --- /dev/null +++ b/apps/docs/docs/components/clipboard/index.md @@ -0,0 +1,15 @@ +--- +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" + +``` diff --git a/apps/docs/docs/components/clipboard/ng-doc.page.ts b/apps/docs/docs/components/clipboard/ng-doc.page.ts new file mode 100644 index 00000000..1a5004da --- /dev/null +++ b/apps/docs/docs/components/clipboard/ng-doc.page.ts @@ -0,0 +1,18 @@ +import ComponentCategory from '../ng-doc.category'; +import { FlowbiteDefaultComponent } from './_default.component'; + +import type { NgDocPage } from '@ng-doc/core'; + +/** + * + */ +const Clipboard: NgDocPage = { + title: 'Clipboard', + mdFile: './index.md', + category: ComponentCategory, + demos: { + flowbiteDefaultComponent: FlowbiteDefaultComponent, + }, +}; + +export default Clipboard; diff --git a/apps/docs/docs/components/dropdown/_default.component.html b/apps/docs/docs/components/dropdown/_default.component.html index 8a876657..22fa4328 100644 --- a/apps/docs/docs/components/dropdown/_default.component.html +++ b/apps/docs/docs/components/dropdown/_default.component.html @@ -1,5 +1,20 @@ - - Item 1 - Item 2 - Item 3 - + + + +
+
    +
  • Dashboard
    • +
  • Settings
    • +
  • Earnings
    • +
  • Sign out
    • +
+
+ diff --git a/apps/docs/docs/components/dropdown/_default.component.ts b/apps/docs/docs/components/dropdown/_default.component.ts index 0fc16ad9..e2d4d318 100644 --- a/apps/docs/docs/components/dropdown/_default.component.ts +++ b/apps/docs/docs/components/dropdown/_default.component.ts @@ -1,13 +1,18 @@ -import { DropdownComponent, DropdownItemComponent } from 'flowbite-angular/dropdown'; +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({ - selector: 'flowbite-demo-dropdown-default', - imports: [DropdownComponent, DropdownItemComponent], + imports: [Button, Dropdown, DropdownContent, DropdownItem, NgpMenuTrigger, Icon], + providers: [provideIcons({ chevronDown })], templateUrl: './_default.component.html', host: { - class: 'flex flex wrap flex-row gap-3', + class: 'flex flex-wrap flex-row gap-3 p-6', }, }) export class FlowbiteDefaultComponent {} diff --git a/apps/docs/docs/components/dropdown/_divider.component.html b/apps/docs/docs/components/dropdown/_divider.component.html deleted file mode 100644 index e6ef1f2c..00000000 --- a/apps/docs/docs/components/dropdown/_divider.component.html +++ /dev/null @@ -1,6 +0,0 @@ - - Item 1 - - Item 2 - Item 3 - diff --git a/apps/docs/docs/components/dropdown/_divider.component.ts b/apps/docs/docs/components/dropdown/_divider.component.ts deleted file mode 100644 index 04b8c37e..00000000 --- a/apps/docs/docs/components/dropdown/_divider.component.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { - DropdownComponent, - DropdownDividerComponent, - DropdownItemComponent, -} from 'flowbite-angular/dropdown'; - -import { Component } from '@angular/core'; - -@Component({ - selector: 'flowbite-demo-dropdown-divider', - imports: [DropdownComponent, DropdownItemComponent, DropdownDividerComponent], - templateUrl: '_divider.component.html', - host: { - class: 'flex flex wrap flex-row gap-3', - }, -}) -export class FlowbiteDividerComponent {} diff --git a/apps/docs/docs/components/dropdown/_header.component.html b/apps/docs/docs/components/dropdown/_header.component.html deleted file mode 100644 index e64dfd2e..00000000 --- a/apps/docs/docs/components/dropdown/_header.component.html +++ /dev/null @@ -1,10 +0,0 @@ - - - Bonnie Green - bonnie@flowbite.com - - - Item 1 - Item 2 - Item 3 - diff --git a/apps/docs/docs/components/dropdown/_header.component.ts b/apps/docs/docs/components/dropdown/_header.component.ts deleted file mode 100644 index e49eb442..00000000 --- a/apps/docs/docs/components/dropdown/_header.component.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { - DropdownComponent, - DropdownDividerComponent, - DropdownHeaderComponent, - DropdownItemComponent, -} from 'flowbite-angular/dropdown'; - -import { Component } from '@angular/core'; - -@Component({ - selector: 'flowbite-demo-dropdown-header', - imports: [ - DropdownComponent, - DropdownItemComponent, - DropdownHeaderComponent, - DropdownDividerComponent, - ], - templateUrl: '_header.component.html', - host: { - class: 'flex flex wrap flex-row gap-3', - }, -}) -export class FlowbiteHeaderComponent {} diff --git a/apps/docs/docs/components/dropdown/_placed.component.html b/apps/docs/docs/components/dropdown/_placed.component.html deleted file mode 100644 index 75764ec3..00000000 --- a/apps/docs/docs/components/dropdown/_placed.component.html +++ /dev/null @@ -1,21 +0,0 @@ - - Item 1 - Item 2 - Item 3 - - - Item 1 - Item 2 - Item 3 - - - Item 1 - Item 2 - Item 3 - diff --git a/apps/docs/docs/components/dropdown/_placed.component.ts b/apps/docs/docs/components/dropdown/_placed.component.ts deleted file mode 100644 index 2b25ca7c..00000000 --- a/apps/docs/docs/components/dropdown/_placed.component.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { DropdownComponent, DropdownItemComponent } from 'flowbite-angular/dropdown'; - -import { Component } from '@angular/core'; - -@Component({ - selector: 'flowbite-demo-dropdown-placed', - imports: [DropdownComponent, DropdownItemComponent], - templateUrl: './_placed.component.html', - host: { - class: 'flex flex wrap flex-row gap-3 justify-around', - }, -}) -export class FlowbitePlacedComponent {} diff --git a/apps/docs/docs/components/dropdown/index.md b/apps/docs/docs/components/dropdown/index.md index bfc2fe06..94b12103 100644 --- a/apps/docs/docs/components/dropdown/index.md +++ b/apps/docs/docs/components/dropdown/index.md @@ -10,42 +10,6 @@ keyword: DropdownPage ``` -```angular-ts file="./_default.component.ts"#L1-L1 group="default" name="typescript" - -``` - -## Dropdown with divider - -{{ NgDocActions.demo('flowbiteDividerComponent', {container: false}) }} - -```angular-html file="./_divider.component.html" group="divider" name="html" - -``` - -```angular-ts file="./_divider.component.ts"#L1-L5 group="divider" name="typescript" - -``` - -## Dropdown with header - -{{ NgDocActions.demo('flowbiteHeaderComponent', {container: false}) }} - -```angular-html file="./_header.component.html" group="header" name="html" - -``` - -```angular-ts file="./_header.component.ts"#L1-L5 group="header" name="typescript" - -``` - -## Dropdown placement - -{{ NgDocActions.demo('flowbitePlacedComponent', {container: false}) }} - -```angular-html file="./_placed.component.html" group="placed" name="html" - -``` - -```angular-ts file="./_placed.component.ts"#L1-L1 group="placed" name="typescript" +```angular-ts file="./_default.component.ts" group="default" name="typescript" ``` diff --git a/apps/docs/docs/components/dropdown/ng-doc.page.ts b/apps/docs/docs/components/dropdown/ng-doc.page.ts index 4a3ae2b1..6db14845 100644 --- a/apps/docs/docs/components/dropdown/ng-doc.page.ts +++ b/apps/docs/docs/components/dropdown/ng-doc.page.ts @@ -1,27 +1,18 @@ import ComponentCategory from '../ng-doc.category'; import { FlowbiteDefaultComponent } from './_default.component'; -import { FlowbiteDividerComponent } from './_divider.component'; -import { FlowbiteHeaderComponent } from './_header.component'; -import { FlowbitePlacedComponent } from './_placed.component'; import type { NgDocPage } from '@ng-doc/core'; /** - * Get started with the dropdown component to show a list of menu items when clicking on the trigger element based on multiple layouts, styles, and placements * - * @status:alert BREAKING CHANGES */ -const dropdown: NgDocPage = { +const Dropdown: NgDocPage = { title: 'Dropdown', mdFile: './index.md', category: ComponentCategory, - order: 6, demos: { flowbiteDefaultComponent: FlowbiteDefaultComponent, - flowbiteDividerComponent: FlowbiteDividerComponent, - flowbiteHeaderComponent: FlowbiteHeaderComponent, - flowbitePlacedComponent: FlowbitePlacedComponent, }, }; -export default dropdown; +export default Dropdown; diff --git a/apps/docs/docs/components/icon/_default.component.html b/apps/docs/docs/components/icon/_default.component.html new file mode 100644 index 00000000..4b887089 --- /dev/null +++ b/apps/docs/docs/components/icon/_default.component.html @@ -0,0 +1,3 @@ + diff --git a/apps/docs/docs/components/icon/_default.component.ts b/apps/docs/docs/components/icon/_default.component.ts new file mode 100644 index 00000000..8638371f --- /dev/null +++ b/apps/docs/docs/components/icon/_default.component.ts @@ -0,0 +1,15 @@ +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 {} diff --git a/apps/docs/docs/components/icon/index.md b/apps/docs/docs/components/icon/index.md new file mode 100644 index 00000000..60e733d1 --- /dev/null +++ b/apps/docs/docs/components/icon/index.md @@ -0,0 +1,15 @@ +--- +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" + +``` diff --git a/apps/docs/docs/components/icon/ng-doc.page.ts b/apps/docs/docs/components/icon/ng-doc.page.ts new file mode 100644 index 00000000..16c561e4 --- /dev/null +++ b/apps/docs/docs/components/icon/ng-doc.page.ts @@ -0,0 +1,18 @@ +import ComponentCategory from '../ng-doc.category'; +import { FlowbiteDefaultComponent } from './_default.component'; + +import type { NgDocPage } from '@ng-doc/core'; + +/** + * + */ +const Icon: NgDocPage = { + title: 'Icon', + mdFile: './index.md', + category: ComponentCategory, + demos: { + flowbiteDefaultComponent: FlowbiteDefaultComponent, + }, +}; + +export default Icon; diff --git a/apps/docs/docs/components/indicator/_count.component.html b/apps/docs/docs/components/indicator/_count.component.html deleted file mode 100644 index e383cd39..00000000 --- a/apps/docs/docs/components/indicator/_count.component.html +++ /dev/null @@ -1,13 +0,0 @@ - - - Messages - - 8 - - diff --git a/apps/docs/docs/components/indicator/_count.component.ts b/apps/docs/docs/components/indicator/_count.component.ts deleted file mode 100644 index adcc5cac..00000000 --- a/apps/docs/docs/components/indicator/_count.component.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { ButtonComponent } from 'flowbite-angular/button'; -import { IconComponent } from 'flowbite-angular/icon'; -import { IndicatorComponent } from 'flowbite-angular/indicator'; - -import { Component } from '@angular/core'; - -@Component({ - selector: 'flowbite-demo-indicator-count', - imports: [IndicatorComponent, ButtonComponent, IconComponent], - templateUrl: './_count.component.html', -}) -export class FlowbiteCountComponent {} diff --git a/apps/docs/docs/components/indicator/_default.component.html b/apps/docs/docs/components/indicator/_default.component.html index f0a03d24..5b047882 100644 --- a/apps/docs/docs/components/indicator/_default.component.html +++ b/apps/docs/docs/components/indicator/_default.component.html @@ -1,10 +1,16 @@ - - - - - - - - - - + + + + + + diff --git a/apps/docs/docs/components/indicator/_default.component.ts b/apps/docs/docs/components/indicator/_default.component.ts index e669edbd..7612bafa 100644 --- a/apps/docs/docs/components/indicator/_default.component.ts +++ b/apps/docs/docs/components/indicator/_default.component.ts @@ -1,13 +1,12 @@ -import { IndicatorComponent } from 'flowbite-angular/indicator'; +import { Indicator } from 'flowbite-angular/indicator'; import { Component } from '@angular/core'; @Component({ - selector: 'flowbite-demo-indicator-default', - imports: [IndicatorComponent], + imports: [Indicator], templateUrl: './_default.component.html', host: { - class: 'flex flex wrap flex-row gap-3 justify-around', + class: 'flex flex-wrap flex-row gap-3 p-6', }, }) export class FlowbiteDefaultComponent {} diff --git a/apps/docs/docs/components/indicator/_legend.component.html b/apps/docs/docs/components/indicator/_legend.component.html deleted file mode 100644 index 8c3ac2d8..00000000 --- a/apps/docs/docs/components/indicator/_legend.component.html +++ /dev/null @@ -1,39 +0,0 @@ - - - - Visitors - - - - - Sessions - - - - - Customers - - - - - Revenue - - - - - Revenue - diff --git a/apps/docs/docs/components/indicator/_legend.component.ts b/apps/docs/docs/components/indicator/_legend.component.ts deleted file mode 100644 index 3b785d22..00000000 --- a/apps/docs/docs/components/indicator/_legend.component.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { IndicatorComponent } from 'flowbite-angular/indicator'; - -import { Component } from '@angular/core'; - -@Component({ - selector: 'flowbite-demo-indicator-legend', - imports: [IndicatorComponent], - templateUrl: './_legend.component.html', - host: { - class: 'flex flex wrap flex-row gap-3', - }, -}) -export class FlowbiteLegendComponent {} diff --git a/apps/docs/docs/components/indicator/_positioned.component.html b/apps/docs/docs/components/indicator/_positioned.component.html deleted file mode 100644 index e0fba7d3..00000000 --- a/apps/docs/docs/components/indicator/_positioned.component.html +++ /dev/null @@ -1,39 +0,0 @@ -
- - - - - - - - - -
diff --git a/apps/docs/docs/components/indicator/_positioned.component.ts b/apps/docs/docs/components/indicator/_positioned.component.ts deleted file mode 100644 index 4f99b4d1..00000000 --- a/apps/docs/docs/components/indicator/_positioned.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { IndicatorComponent } from 'flowbite-angular/indicator'; - -import { Component } from '@angular/core'; - -@Component({ - selector: 'flowbite-demo-indicator-positioned', - imports: [IndicatorComponent], - templateUrl: './_positioned.component.html', -}) -export class FlowbitePositionedComponent {} diff --git a/apps/docs/docs/components/indicator/index.md b/apps/docs/docs/components/indicator/index.md index 5d570a4c..e588075f 100644 --- a/apps/docs/docs/components/indicator/index.md +++ b/apps/docs/docs/components/indicator/index.md @@ -10,42 +10,6 @@ keyword: IndicatorPage ``` -```angular-ts file="./_default.component.ts"#L1-L1 group="default" name="typescript" - -``` - -## Legend indicator - -{{ NgDocActions.demo('flowbiteLegendComponent', {container: false}) }} - -```angular-html file="./_legend.component.html" group="legend" name="html" - -``` - -```angular-ts file="./_legend.component.ts"#L1-L1 group="legend" name="typescript" - -``` - -## Indicator count - -{{ NgDocActions.demo('flowbiteCountComponent', {container: false}) }} - -```angular-html file="./_count.component.html" group="count" name="html" - -``` - -```angular-ts file="./_count.component.ts"#L1-L3 group="count" name="typescript" - -``` - -## Indicator position - -{{ NgDocActions.demo('flowbitePositionedComponent', {container: false}) }} - -```angular-html file="./_positioned.component.html" group="positioned" name="html" - -``` - -```angular-ts file="./_positioned.component.ts"#L1-L1 group="positioned" name="typescript" +```angular-ts file="./_default.component.ts" group="default" name="typescript" ``` diff --git a/apps/docs/docs/components/indicator/ng-doc.page.ts b/apps/docs/docs/components/indicator/ng-doc.page.ts index 798f9bad..f661017a 100644 --- a/apps/docs/docs/components/indicator/ng-doc.page.ts +++ b/apps/docs/docs/components/indicator/ng-doc.page.ts @@ -1,27 +1,18 @@ import ComponentCategory from '../ng-doc.category'; -import { FlowbiteCountComponent } from './_count.component'; import { FlowbiteDefaultComponent } from './_default.component'; -import { FlowbiteLegendComponent } from './_legend.component'; -import { FlowbitePositionedComponent } from './_positioned.component'; import type { NgDocPage } from '@ng-doc/core'; /** - * Use the indicator component to show a number count, account status, or as a loading label positioned relative to the parent component coded with Tailwind CSS * - * @status:alert BREAKING CHANGES */ -const indicator: NgDocPage = { +const Indicator: NgDocPage = { title: 'Indicator', mdFile: './index.md', category: ComponentCategory, - order: 7, demos: { flowbiteDefaultComponent: FlowbiteDefaultComponent, - flowbiteCountComponent: FlowbiteCountComponent, - flowbiteLegendComponent: FlowbiteLegendComponent, - flowbitePositionedComponent: FlowbitePositionedComponent, }, }; -export default indicator; +export default Indicator; diff --git a/apps/docs/docs/components/input/_default.component.html b/apps/docs/docs/components/input/_default.component.html new file mode 100644 index 00000000..d1aed61f --- /dev/null +++ b/apps/docs/docs/components/input/_default.component.html @@ -0,0 +1,42 @@ +
+
+ + +

+ We’ll never share your details. Read our + + Privacy Policy + + . +

+
+
+ + +
+ +
diff --git a/apps/docs/docs/components/input/_default.component.ts b/apps/docs/docs/components/input/_default.component.ts new file mode 100644 index 00000000..6ecd1b99 --- /dev/null +++ b/apps/docs/docs/components/input/_default.component.ts @@ -0,0 +1,13 @@ +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 {} diff --git a/apps/docs/docs/components/input/index.md b/apps/docs/docs/components/input/index.md new file mode 100644 index 00000000..c3fcdae3 --- /dev/null +++ b/apps/docs/docs/components/input/index.md @@ -0,0 +1,15 @@ +--- +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" + +``` diff --git a/apps/docs/docs/components/input/ng-doc.page.ts b/apps/docs/docs/components/input/ng-doc.page.ts new file mode 100644 index 00000000..f6fad599 --- /dev/null +++ b/apps/docs/docs/components/input/ng-doc.page.ts @@ -0,0 +1,18 @@ +import ComponentCategory from '../ng-doc.category'; +import { FlowbiteDefaultComponent } from './_default.component'; + +import type { NgDocPage } from '@ng-doc/core'; + +/** + * + */ +const Input: NgDocPage = { + title: 'Input field', + mdFile: './index.md', + category: ComponentCategory, + demos: { + flowbiteDefaultComponent: FlowbiteDefaultComponent, + }, +}; + +export default Input; diff --git a/apps/docs/docs/components/modal/_default.component.html b/apps/docs/docs/components/modal/_default.component.html index 1ed10d49..a07d8447 100644 --- a/apps/docs/docs/components/modal/_default.component.html +++ b/apps/docs/docs/components/modal/_default.component.html @@ -1,25 +1,43 @@ -Default modal - - Terms of Service - -

- 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. -

-

- 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. -

- - - I accept - - I decline - - - + + + +
+
+

Terms of Service

+
+

+ 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. +

+

+ 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. +

+
+
+ + +
+
+
+ diff --git a/apps/docs/docs/components/modal/_default.component.ts b/apps/docs/docs/components/modal/_default.component.ts index f795f02c..151ff9b1 100644 --- a/apps/docs/docs/components/modal/_default.component.ts +++ b/apps/docs/docs/components/modal/_default.component.ts @@ -1,25 +1,20 @@ -import { ButtonComponent } from 'flowbite-angular/button'; +import { Button } from 'flowbite-angular/button'; import { - ModalBodyComponent, - ModalComponent, - ModalFooterComponent, - ModalHeaderComponent, + Modal, + ModalContent, + ModalFooter, + ModalHeader, + ModalOverlay, } from 'flowbite-angular/modal'; import { Component } from '@angular/core'; +import { NgpDialogTrigger } from 'ng-primitives/dialog'; @Component({ - selector: 'flowbite-demo-modal-default', - imports: [ - ModalComponent, - ModalBodyComponent, - ModalHeaderComponent, - ModalFooterComponent, - ButtonComponent, - ], + imports: [Button, NgpDialogTrigger, Modal, ModalContent, ModalFooter, ModalHeader, ModalOverlay], templateUrl: './_default.component.html', host: { - class: 'flex flex wrap flex-row gap-3', + class: 'flex flex-wrap flex-row gap-3 p-6', }, }) export class FlowbiteDefaultComponent {} diff --git a/apps/docs/docs/components/modal/_dismissable.component.html b/apps/docs/docs/components/modal/_dismissable.component.html deleted file mode 100644 index a21b37d9..00000000 --- a/apps/docs/docs/components/modal/_dismissable.component.html +++ /dev/null @@ -1,27 +0,0 @@ -Open modal - - Terms of Service - -

- 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. -

-

- 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. -

- - - I accept - - I decline - - - diff --git a/apps/docs/docs/components/modal/_dismissable.component.ts b/apps/docs/docs/components/modal/_dismissable.component.ts deleted file mode 100644 index 0990b559..00000000 --- a/apps/docs/docs/components/modal/_dismissable.component.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ButtonComponent } from 'flowbite-angular/button'; -import { - ModalBodyComponent, - ModalComponent, - ModalFooterComponent, - ModalHeaderComponent, -} from 'flowbite-angular/modal'; - -import { Component } from '@angular/core'; - -@Component({ - selector: 'flowbite-demo-modal-dismissable', - imports: [ - ModalComponent, - ModalBodyComponent, - ModalHeaderComponent, - ModalFooterComponent, - ButtonComponent, - ], - templateUrl: '_dismissable.component.html', - host: { - class: 'flex flex wrap flex-row gap-3', - }, -}) -export class FlowbiteDismissableComponent {} diff --git a/apps/docs/docs/components/modal/_form.component.html b/apps/docs/docs/components/modal/_form.component.html deleted file mode 100644 index a977db15..00000000 --- a/apps/docs/docs/components/modal/_form.component.html +++ /dev/null @@ -1,68 +0,0 @@ -Open modal - - Sign in to our platform - -
-
- - -
-
- - -
-
-
-
- -
- -
- Lost Password? -
- -
- Not registered? - Create account -
-
- - diff --git a/apps/docs/docs/components/modal/_form.component.ts b/apps/docs/docs/components/modal/_form.component.ts deleted file mode 100644 index 3d62f729..00000000 --- a/apps/docs/docs/components/modal/_form.component.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { ButtonComponent } from 'flowbite-angular/button'; -import { ModalBodyComponent, ModalComponent, ModalHeaderComponent } from 'flowbite-angular/modal'; - -import { Component } from '@angular/core'; - -@Component({ - selector: 'flowbite-demo-modal-form', - imports: [ModalComponent, ModalBodyComponent, ModalHeaderComponent, ButtonComponent], - templateUrl: './_form.component.html', - host: { - class: 'flex flex wrap flex-row gap-3', - }, -}) -export class FlowbiteFormComponent {} diff --git a/apps/docs/docs/components/modal/_positioned.component.html b/apps/docs/docs/components/modal/_positioned.component.html deleted file mode 100644 index efe695ec..00000000 --- a/apps/docs/docs/components/modal/_positioned.component.html +++ /dev/null @@ -1,27 +0,0 @@ -Open modal - - Terms of Service - -

- 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. -

-

- 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 affect them. -

- - - Close - - I decline - - - diff --git a/apps/docs/docs/components/modal/_positioned.component.ts b/apps/docs/docs/components/modal/_positioned.component.ts deleted file mode 100644 index 39d2b904..00000000 --- a/apps/docs/docs/components/modal/_positioned.component.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ButtonComponent } from 'flowbite-angular/button'; -import { - ModalBodyComponent, - ModalComponent, - ModalFooterComponent, - ModalHeaderComponent, -} from 'flowbite-angular/modal'; - -import { Component } from '@angular/core'; - -@Component({ - selector: 'flowbite-demo-modal-positioned', - imports: [ - ModalComponent, - ModalBodyComponent, - ModalHeaderComponent, - ModalFooterComponent, - ButtonComponent, - ], - templateUrl: './_positioned.component.html', - host: { - class: 'flex flex wrap flex-row gap-3', - }, -}) -export class FlowbitePositionedComponent {} diff --git a/apps/docs/docs/components/modal/_size.component.html b/apps/docs/docs/components/modal/_size.component.html deleted file mode 100644 index 3a2fff99..00000000 --- a/apps/docs/docs/components/modal/_size.component.html +++ /dev/null @@ -1,108 +0,0 @@ -Small -Medium -Large -Extra large - - Terms of Service - -

- 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. -

-

- 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. -

- - - I accept - - I decline - - - - - Terms of Service - -

- 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. -

-

- 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. -

- - - I accept - - I decline - - - - - Terms of Service - -

- 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. -

-

- 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. -

- - - I accept - - I decline - - - - - Terms of Service - -

- 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. -

-

- 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. -

- - - I accept - - I decline - - - diff --git a/apps/docs/docs/components/modal/_size.component.ts b/apps/docs/docs/components/modal/_size.component.ts deleted file mode 100644 index b59c559f..00000000 --- a/apps/docs/docs/components/modal/_size.component.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ButtonComponent } from 'flowbite-angular/button'; -import { - ModalBodyComponent, - ModalComponent, - ModalFooterComponent, - ModalHeaderComponent, -} from 'flowbite-angular/modal'; - -import { Component } from '@angular/core'; - -@Component({ - selector: 'flowbite-demo-modal-size', - imports: [ - ModalComponent, - ModalBodyComponent, - ModalHeaderComponent, - ModalFooterComponent, - ButtonComponent, - ], - templateUrl: './_size.component.html', - host: { - class: 'flex flex wrap flex-row gap-3 justify-around', - }, -}) -export class FlowbiteSizeComponent {} diff --git a/apps/docs/docs/components/modal/index.md b/apps/docs/docs/components/modal/index.md index 6f03b6b8..114dbbdf 100644 --- a/apps/docs/docs/components/modal/index.md +++ b/apps/docs/docs/components/modal/index.md @@ -2,7 +2,7 @@ keyword: ModalPage --- -## Default modal +## Default Modal {{ NgDocActions.demo('flowbiteDefaultComponent', {container: false}) }} @@ -10,54 +10,6 @@ keyword: ModalPage ``` -```angular-ts file="./_default.component.ts"#L1-L7 group="default" name="typescript" - -``` - -## Modal sizes - -{{ NgDocActions.demo('flowbiteSizeComponent', {container: false}) }} - -```angular-html file="./_size.component.html" group="size" name="html" - -``` - -```angular-ts file="./_size.component.ts"#L1-L7 group="size" name="typescript" - -``` - -## Dismissable modal - -{{ NgDocActions.demo('flowbiteDismissableComponent', {container: false}) }} - -```angular-html file="./_dismissable.component.html" group="dismissable" name="html" - -``` - -```angular-ts file="./_dismissable.component.ts"#L1-L7 group="dismissable" name="typescript" - -``` - -## Modal with form - -{{ NgDocActions.demo('flowbiteFormComponent', {container: false}) }} - -```angular-html file="./_form.component.html" group="form" name="html" - -``` - -```angular-ts file="./_form.component.ts"#L1-L2 group="form" name="typescript" - -``` - -## Positioned modal - -{{ NgDocActions.demo('flowbitePositionedComponent', {container: false}) }} - -```angular-html file="./_positioned.component.html" group="positioned" name="html" - -``` - -```angular-ts file="./_positioned.component.ts"#L1-L7 group="positioned" name="typescript" +```angular-ts file="./_default.component.ts" group="default" name="typescript" ``` diff --git a/apps/docs/docs/components/modal/ng-doc.page.ts b/apps/docs/docs/components/modal/ng-doc.page.ts index 5597d41b..22a7804f 100644 --- a/apps/docs/docs/components/modal/ng-doc.page.ts +++ b/apps/docs/docs/components/modal/ng-doc.page.ts @@ -1,29 +1,18 @@ import ComponentCategory from '../ng-doc.category'; import { FlowbiteDefaultComponent } from './_default.component'; -import { FlowbiteDismissableComponent } from './_dismissable.component'; -import { FlowbiteFormComponent } from './_form.component'; -import { FlowbitePositionedComponent } from './_positioned.component'; -import { FlowbiteSizeComponent } from './_size.component'; import type { NgDocPage } from '@ng-doc/core'; /** - * Use the modal component to show interactive dialogs and notifications to your website users available in multiple sizes, colors, and styles * - * @status:alert BREAKING CHANGES */ -const modal: NgDocPage = { +const Modal: NgDocPage = { title: 'Modal', mdFile: './index.md', category: ComponentCategory, - order: 8, demos: { flowbiteDefaultComponent: FlowbiteDefaultComponent, - flowbiteDismissableComponent: FlowbiteDismissableComponent, - flowbiteFormComponent: FlowbiteFormComponent, - flowbitePositionedComponent: FlowbitePositionedComponent, - flowbiteSizeComponent: FlowbiteSizeComponent, }, }; -export default modal; +export default Modal; diff --git a/apps/docs/docs/components/navbar/_brand.component.html b/apps/docs/docs/components/navbar/_brand.component.html deleted file mode 100644 index b4b53d2e..00000000 --- a/apps/docs/docs/components/navbar/_brand.component.html +++ /dev/null @@ -1,8 +0,0 @@ - - Flowbite - - - Home - Contacts - - diff --git a/apps/docs/docs/components/navbar/_brand.component.ts b/apps/docs/docs/components/navbar/_brand.component.ts deleted file mode 100644 index 58d80830..00000000 --- a/apps/docs/docs/components/navbar/_brand.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { - NavbarBrandComponent, - NavbarComponent, - NavbarContentComponent, - NavbarItemComponent, -} from 'flowbite-angular/navbar'; - -import { Component } from '@angular/core'; - -@Component({ - selector: 'flowbite-demo-navbar-brand', - imports: [NavbarComponent, NavbarItemComponent, NavbarContentComponent, NavbarBrandComponent], - templateUrl: './_brand.component.html', -}) -export class FlowbiteBrandComponent {} diff --git a/apps/docs/docs/components/navbar/_default.component.html b/apps/docs/docs/components/navbar/_default.component.html index 62af031d..3254d4fb 100644 --- a/apps/docs/docs/components/navbar/_default.component.html +++ b/apps/docs/docs/components/navbar/_default.component.html @@ -1,5 +1,134 @@ - - - Hello world! - - + + +
+
+ @for (i of [0, 1]; track $index) { +
+
+

+ +

+
+
+

+ +

+
+
+

+ +

+
+
+
+

+ +

+
+ } +
+
diff --git a/apps/docs/docs/components/navbar/_default.component.ts b/apps/docs/docs/components/navbar/_default.component.ts index 5ae3b3d9..a4e2d4b4 100644 --- a/apps/docs/docs/components/navbar/_default.component.ts +++ b/apps/docs/docs/components/navbar/_default.component.ts @@ -1,14 +1,22 @@ +import { Icon } from 'flowbite-angular/icon'; +import { bars } from 'flowbite-angular/icon/outline/general'; import { - NavbarComponent, - NavbarContentComponent, - NavbarItemComponent, + Navbar, + NavbarBrand, + NavbarContent, + NavbarItem, + NavbarToggle, } from 'flowbite-angular/navbar'; import { Component } from '@angular/core'; +import { provideIcons } from '@ng-icons/core'; @Component({ - selector: 'flowbite-demo-navbar-default', - imports: [NavbarComponent, NavbarItemComponent, NavbarContentComponent], + 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 {} diff --git a/apps/docs/docs/components/navbar/_dropdown.component.html b/apps/docs/docs/components/navbar/_dropdown.component.html deleted file mode 100644 index ace7a1a1..00000000 --- a/apps/docs/docs/components/navbar/_dropdown.component.html +++ /dev/null @@ -1,13 +0,0 @@ - - Flowbite - - - Hello world! - - - Profile - Billing - App settings - - - diff --git a/apps/docs/docs/components/navbar/_dropdown.component.ts b/apps/docs/docs/components/navbar/_dropdown.component.ts deleted file mode 100644 index 8cc36b92..00000000 --- a/apps/docs/docs/components/navbar/_dropdown.component.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { DropdownComponent, DropdownItemComponent } from 'flowbite-angular/dropdown'; -import { - NavbarBrandComponent, - NavbarComponent, - NavbarContentComponent, - NavbarItemComponent, -} from 'flowbite-angular/navbar'; - -import { Component } from '@angular/core'; - -@Component({ - selector: 'flowbite-demo-navbar-dropdown', - imports: [ - NavbarComponent, - NavbarContentComponent, - NavbarBrandComponent, - NavbarItemComponent, - DropdownComponent, - DropdownItemComponent, - ], - templateUrl: './_dropdown.component.html', -}) -export class FlowbiteDropdownComponent {} diff --git a/apps/docs/docs/components/navbar/_responsive.component.html b/apps/docs/docs/components/navbar/_responsive.component.html deleted file mode 100644 index 4e6b931a..00000000 --- a/apps/docs/docs/components/navbar/_responsive.component.html +++ /dev/null @@ -1,11 +0,0 @@ - - Flowbite - - - - - Home - Pricing - Contacts - - diff --git a/apps/docs/docs/components/navbar/_responsive.component.ts b/apps/docs/docs/components/navbar/_responsive.component.ts deleted file mode 100644 index ccfa68ce..00000000 --- a/apps/docs/docs/components/navbar/_responsive.component.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { - NavbarBrandComponent, - NavbarComponent, - NavbarContentComponent, - NavbarItemComponent, - NavbarToggleComponent, -} from 'flowbite-angular/navbar'; - -import { Component } from '@angular/core'; - -@Component({ - selector: 'flowbite-demo-navbar-responsive', - imports: [ - NavbarComponent, - NavbarContentComponent, - NavbarItemComponent, - NavbarBrandComponent, - NavbarToggleComponent, - ], - templateUrl: './_responsive.component.html', -}) -export class FlowbiteResponsiveComponent {} diff --git a/apps/docs/docs/components/navbar/index.md b/apps/docs/docs/components/navbar/index.md index 60b09dea..ab272d74 100644 --- a/apps/docs/docs/components/navbar/index.md +++ b/apps/docs/docs/components/navbar/index.md @@ -2,7 +2,7 @@ keyword: NavbarPage --- -## Default navbar +## Default Navbar {{ NgDocActions.demo('flowbiteDefaultComponent', {container: false}) }} @@ -10,51 +10,6 @@ keyword: NavbarPage ``` -```angular-ts file="./_default.component.ts"#L1-L5 group="default" name="typescript" - -``` - -## Navbar with brand - -Use this example to display a brand element inside the navbar by importing the -`NavbarBrandComponent` component. - -{{ NgDocActions.demo('flowbiteBrandComponent', {container: false}) }} - -```angular-html file="./_brand.component.html" group="brand" name="html" - -``` - -```angular-ts file="./_brand.component.ts"#L1-L6 group="brand" name="typescript" - -``` - -## Navbar with dropdown - -Use this example to feature a dropdown menu when clicking on the settings dropdown inside the navbar -by importing the `DropdownComponent` and `DropdownItemComponent` components. - -{{ NgDocActions.demo('flowbiteDropdownComponent', {container: false}) }} - -```angular-html file="./_dropdown.component.html" group="dropdown" name="html" - -``` - -```angular-ts file="./_dropdown.component.ts"#L1-L7 group="dropdown" name="typescript" - -``` - -## Responsive navbar - -On mobile device the navigation bar will be collapsed and you will be able to use the hamburger menu -to toggle the menu items by adding the `NavbarToggleComponent` component. - -{{ NgDocActions.demo('flowbiteResponsiveComponent', {container: false}) }} - -```angular-html file="./_responsive.component.html" group="responsive" name="html" - -``` - -```angular-ts file="./_responsive.component.ts"#L1-L7 group="responsive" name="typescript" +```angular-ts file="./_default.component.ts" group="default" name="typescript" ``` diff --git a/apps/docs/docs/components/navbar/ng-doc.page.ts b/apps/docs/docs/components/navbar/ng-doc.page.ts index da2d1fd6..1672b4df 100644 --- a/apps/docs/docs/components/navbar/ng-doc.page.ts +++ b/apps/docs/docs/components/navbar/ng-doc.page.ts @@ -1,27 +1,18 @@ import ComponentCategory from '../ng-doc.category'; -import { FlowbiteBrandComponent } from './_brand.component'; import { FlowbiteDefaultComponent } from './_default.component'; -import { FlowbiteDropdownComponent } from './_dropdown.component'; -import { FlowbiteResponsiveComponent } from './_responsive.component'; import type { NgDocPage } from '@ng-doc/core'; /** - * The navbar component can be used to show a list of navigation links positioned on the top side of your page based on multiple layouts, sizes, and dropdowns * - * @status:alert BREAKING CHANGES */ -const navbar: NgDocPage = { +const Navbar: NgDocPage = { title: 'Navbar', mdFile: './index.md', category: ComponentCategory, - order: 10, demos: { flowbiteDefaultComponent: FlowbiteDefaultComponent, - flowbiteBrandComponent: FlowbiteBrandComponent, - flowbiteDropdownComponent: FlowbiteDropdownComponent, - flowbiteResponsiveComponent: FlowbiteResponsiveComponent, }, }; -export default navbar; +export default Navbar; diff --git a/apps/docs/docs/components/pagination/_default.component.html b/apps/docs/docs/components/pagination/_default.component.html new file mode 100644 index 00000000..2d364356 --- /dev/null +++ b/apps/docs/docs/components/pagination/_default.component.html @@ -0,0 +1,4 @@ + diff --git a/apps/docs/docs/components/pagination/_default.component.ts b/apps/docs/docs/components/pagination/_default.component.ts new file mode 100644 index 00000000..10c13aa3 --- /dev/null +++ b/apps/docs/docs/components/pagination/_default.component.ts @@ -0,0 +1,14 @@ +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(1); +} diff --git a/apps/docs/docs/components/pagination/index.md b/apps/docs/docs/components/pagination/index.md new file mode 100644 index 00000000..06fa8c95 --- /dev/null +++ b/apps/docs/docs/components/pagination/index.md @@ -0,0 +1,15 @@ +--- +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" + +``` diff --git a/apps/docs/docs/components/pagination/ng-doc.page.ts b/apps/docs/docs/components/pagination/ng-doc.page.ts new file mode 100644 index 00000000..4b9a8bd4 --- /dev/null +++ b/apps/docs/docs/components/pagination/ng-doc.page.ts @@ -0,0 +1,18 @@ +import ComponentCategory from '../ng-doc.category'; +import { FlowbiteDefaultComponent } from './_default.component'; + +import type { NgDocPage } from '@ng-doc/core'; + +/** + * + */ +const Pagination: NgDocPage = { + title: 'Pagination', + mdFile: './index.md', + category: ComponentCategory, + demos: { + flowbiteDefaultComponent: FlowbiteDefaultComponent, + }, +}; + +export default Pagination; diff --git a/apps/docs/docs/components/sidebar/_default.component.html b/apps/docs/docs/components/sidebar/_default.component.html index a51dcebc..0bfbd763 100644 --- a/apps/docs/docs/components/sidebar/_default.component.html +++ b/apps/docs/docs/components/sidebar/_default.component.html @@ -1,10 +1,127 @@ - - - Dashboard - Kanban - Inbox - Users - Products - - Hello world ! - + +
+ + +
+
+ @for (i of [0, 1]; track $index) { +
+
+

+ +

+
+
+

+ +

+
+
+

+ +

+
+
+
+

+ +

+
+ } +
+
+
diff --git a/apps/docs/docs/components/sidebar/_default.component.ts b/apps/docs/docs/components/sidebar/_default.component.ts index 7440f684..5ccfb7fa 100644 --- a/apps/docs/docs/components/sidebar/_default.component.ts +++ b/apps/docs/docs/components/sidebar/_default.component.ts @@ -1,20 +1,28 @@ +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 { - SidebarComponent, - SidebarItemComponent, - SidebarMenuComponent, - SidebarPageContentComponent, + provideFlowbiteSidebarState, + Sidebar, + SidebarContent, + SidebarItem, + SidebarToggle, } from 'flowbite-angular/sidebar'; import { Component } from '@angular/core'; +import { provideIcons } from '@ng-icons/core'; @Component({ - selector: 'flowbite-demo-sidebar-default', - imports: [ - SidebarComponent, - SidebarMenuComponent, - SidebarItemComponent, - SidebarPageContentComponent, - ], + 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 {} diff --git a/apps/docs/docs/components/sidebar/_multi-level.component.html b/apps/docs/docs/components/sidebar/_multi-level.component.html deleted file mode 100644 index b988d35c..00000000 --- a/apps/docs/docs/components/sidebar/_multi-level.component.html +++ /dev/null @@ -1,15 +0,0 @@ - - - Dashboard - - Products - Billing - Invoice - - Kanban - Inbox - Users - Products - - Hello world ! - diff --git a/apps/docs/docs/components/sidebar/_multi-level.component.ts b/apps/docs/docs/components/sidebar/_multi-level.component.ts deleted file mode 100644 index 47f21ee9..00000000 --- a/apps/docs/docs/components/sidebar/_multi-level.component.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { - SidebarComponent, - SidebarItemComponent, - SidebarItemGroupComponent, - SidebarMenuComponent, - SidebarPageContentComponent, -} from 'flowbite-angular/sidebar'; - -import { Component } from '@angular/core'; - -@Component({ - selector: 'flowbite-demo-sidebar-multi-level', - imports: [ - SidebarComponent, - SidebarMenuComponent, - SidebarItemComponent, - SidebarItemGroupComponent, - SidebarPageContentComponent, - ], - templateUrl: './_multi-level.component.html', -}) -export class FlowbiteMultiLevelComponent {} diff --git a/apps/docs/docs/components/sidebar/index.md b/apps/docs/docs/components/sidebar/index.md index 98caf228..8f8d5995 100644 --- a/apps/docs/docs/components/sidebar/index.md +++ b/apps/docs/docs/components/sidebar/index.md @@ -2,7 +2,7 @@ keyword: SidebarPage --- -## Default sidebar +## Default Sidebar {{ NgDocActions.demo('flowbiteDefaultComponent', {container: false}) }} @@ -10,18 +10,6 @@ keyword: SidebarPage ``` -```angular-ts file="./_default.component.ts"#L1-L6 group="default" name="typescript" - -``` - -# Multi-level menu - -{{ NgDocActions.demo('flowbiteMultiLevelComponent', {container: false}) }} - -```angular-html file="./_multi-level.component.html" group="multi-level" name="html" - -``` - -```angular-ts file="./_multi-level.component.ts"#L1-L7 group="multi-level" name="typescript" +```angular-ts file="./_default.component.ts" group="default" name="typescript" ``` diff --git a/apps/docs/docs/components/sidebar/ng-doc.page.ts b/apps/docs/docs/components/sidebar/ng-doc.page.ts index a0c27a0c..4fc29ef4 100644 --- a/apps/docs/docs/components/sidebar/ng-doc.page.ts +++ b/apps/docs/docs/components/sidebar/ng-doc.page.ts @@ -1,23 +1,18 @@ import ComponentCategory from '../ng-doc.category'; import { FlowbiteDefaultComponent } from './_default.component'; -import { FlowbiteMultiLevelComponent } from './_multi-level.component'; import type { NgDocPage } from '@ng-doc/core'; /** - * Use the sidebar component to show a list of menu items and multi-level menu items to navigate on your website * - * @status:alert BREAKING CHANGES */ -const sidebar: NgDocPage = { +const Sidebar: NgDocPage = { title: 'Sidebar', mdFile: './index.md', category: ComponentCategory, - order: 9, demos: { flowbiteDefaultComponent: FlowbiteDefaultComponent, - flowbiteMultiLevelComponent: FlowbiteMultiLevelComponent, }, }; -export default sidebar; +export default Sidebar; diff --git a/apps/docs/docs/components/tab/_default.component.html b/apps/docs/docs/components/tab/_default.component.html new file mode 100644 index 00000000..0ae63050 --- /dev/null +++ b/apps/docs/docs/components/tab/_default.component.html @@ -0,0 +1,78 @@ +
+
    +
  • + Profile +
    • +
  • + Dashboard +
    • +
  • + Settings +
    • +
  • + Contacts +
    • +
  • + Disabled +
    • +
+ +
+

+ 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. +

+
+
+

+ 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. +

+
+
+

+ 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. +

+
+
+ 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. +
+
+ Disabled content. +
+
diff --git a/apps/docs/docs/components/tab/_default.component.ts b/apps/docs/docs/components/tab/_default.component.ts new file mode 100644 index 00000000..82e8ddae --- /dev/null +++ b/apps/docs/docs/components/tab/_default.component.ts @@ -0,0 +1,12 @@ +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 {} diff --git a/apps/docs/docs/components/tab/index.md b/apps/docs/docs/components/tab/index.md new file mode 100644 index 00000000..05f57589 --- /dev/null +++ b/apps/docs/docs/components/tab/index.md @@ -0,0 +1,15 @@ +--- +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" + +``` diff --git a/apps/docs/docs/components/tab/ng-doc.page.ts b/apps/docs/docs/components/tab/ng-doc.page.ts new file mode 100644 index 00000000..47b823a2 --- /dev/null +++ b/apps/docs/docs/components/tab/ng-doc.page.ts @@ -0,0 +1,18 @@ +import ComponentCategory from '../ng-doc.category'; +import { FlowbiteDefaultComponent } from './_default.component'; + +import type { NgDocPage } from '@ng-doc/core'; + +/** + * + */ +const Tab: NgDocPage = { + title: 'Tab', + mdFile: './index.md', + category: ComponentCategory, + demos: { + flowbiteDefaultComponent: FlowbiteDefaultComponent, + }, +}; + +export default Tab; diff --git a/apps/docs/docs/components/tooltip/_default.component.html b/apps/docs/docs/components/tooltip/_default.component.html new file mode 100644 index 00000000..a5b9ad1b --- /dev/null +++ b/apps/docs/docs/components/tooltip/_default.component.html @@ -0,0 +1,12 @@ +
+ + + +
Tooltip content
+ +
diff --git a/apps/docs/docs/components/tooltip/_default.component.ts b/apps/docs/docs/components/tooltip/_default.component.ts new file mode 100644 index 00000000..3effd8a5 --- /dev/null +++ b/apps/docs/docs/components/tooltip/_default.component.ts @@ -0,0 +1,16 @@ +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); +} diff --git a/apps/docs/docs/components/tooltip/index.md b/apps/docs/docs/components/tooltip/index.md new file mode 100644 index 00000000..e27d8f95 --- /dev/null +++ b/apps/docs/docs/components/tooltip/index.md @@ -0,0 +1,15 @@ +--- +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" + +``` diff --git a/apps/docs/docs/components/tooltip/ng-doc.page.ts b/apps/docs/docs/components/tooltip/ng-doc.page.ts new file mode 100644 index 00000000..3dfe2465 --- /dev/null +++ b/apps/docs/docs/components/tooltip/ng-doc.page.ts @@ -0,0 +1,18 @@ +import ComponentCategory from '../ng-doc.category'; +import { FlowbiteDefaultComponent } from './_default.component'; + +import type { NgDocPage } from '@ng-doc/core'; + +/** + * + */ +const Tooltip: NgDocPage = { + title: 'Tooltip', + mdFile: './index.md', + category: ComponentCategory, + demos: { + flowbiteDefaultComponent: FlowbiteDefaultComponent, + }, +}; + +export default Tooltip; diff --git a/apps/docs/docs/customize/dark-mode/index.md b/apps/docs/docs/customize/dark-mode/index.md index d187b25e..a07cdff0 100644 --- a/apps/docs/docs/customize/dark-mode/index.md +++ b/apps/docs/docs/customize/dark-mode/index.md @@ -4,11 +4,11 @@ keyword: DarkModePage ## Enable dark mode -All you need to do is add `FlowbiteThemeDirective` as a `hostDirectives` in you `app.component.ts`. +All you need to do is add `FlowbiteThemeDirective` as a `hostDirectives` in your `app.component.ts`. ```angular-ts ... -import { FlowbiteThemeDirective } from 'flowbite-angular/theme'; +import { FlowbiteThemeDirective } from 'flowbite-angular/theme-toggle'; ... @Component({ @@ -20,13 +20,18 @@ export class AppComponent { } ``` -If your TailwindCSS configuration is based on the one provided by flowbite-angular, then everything -will be set up. Otherwise, you have to update your TailwindCSS configuration like this : +The configuration needed for tailwind will depend on the type value of FlowbiteThemeDirective. In +the FlowbiteThemeDirective, you are able to change its behavior. Here is an example of configuration +to make it use data-attributes : -```javascript -module.exports = { - darkMode: 'class', -}; +```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 diff --git a/apps/docs/docs/customize/dark-mode/ng-doc.page.ts b/apps/docs/docs/customize/dark-mode/ng-doc.page.ts index 34f59b49..abb49047 100644 --- a/apps/docs/docs/customize/dark-mode/ng-doc.page.ts +++ b/apps/docs/docs/customize/dark-mode/ng-doc.page.ts @@ -4,8 +4,6 @@ import type { NgDocPage } from '@ng-doc/core'; /** * Add dark theme to your application. - * - * @status:info NEW */ const darkMode: NgDocPage = { title: 'Dark mode', diff --git a/apps/docs/docs/customize/inherit-component/index.md b/apps/docs/docs/customize/inherit-component/index.md deleted file mode 100644 index c4e7e72b..00000000 --- a/apps/docs/docs/customize/inherit-component/index.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -keyword: InheritComponent ---- - -## Inheriting components - -If you want to add some functionalities to one or multiple components, then you can make a custom -component like this - -```angular-ts -import { IndicatorComponent } from 'flowbite-angular/indicator'; - -import { Component } from '@angular/core'; - -@Component({ - standalone: true, - selector: 'app-my-custom-indicator', - imports: [], - template: ``, -}) -export class MyCustomIndicatorComponent extends IndicatorComponent {} -``` diff --git a/apps/docs/docs/customize/inherit-component/ng-doc.page.ts b/apps/docs/docs/customize/inherit-component/ng-doc.page.ts deleted file mode 100644 index ddb9e6df..00000000 --- a/apps/docs/docs/customize/inherit-component/ng-doc.page.ts +++ /dev/null @@ -1,17 +0,0 @@ -import CustomizeCategory from '../ng-doc.category'; - -import type { NgDocPage } from '@ng-doc/core'; - -/** - * Customize flowbite-angular's component style by inheriting component. - * - * @status:info NEW - */ -const OverrideBaseStyle: NgDocPage = { - title: 'Inherit component', - mdFile: './index.md', - category: CustomizeCategory, - order: 5, -}; - -export default OverrideBaseStyle; diff --git a/apps/docs/docs/customize/override-base-style/index.md b/apps/docs/docs/customize/override-base-style/index.md index 5c1f8380..66a0ba89 100644 --- a/apps/docs/docs/customize/override-base-style/index.md +++ b/apps/docs/docs/customize/override-base-style/index.md @@ -1,131 +1,34 @@ ---- -keyword: OverrideBaseStylePage ---- - -## Init function - -By default, Flowbite Angular provides a style for each of it's components. In order to use them, you -have to call the init function inside the provider's list of your application. - -```angular-ts -import { initFlowbite } from 'flowbite-angular/core'; - -import { ApplicationConfig } from '@angular/core'; - -export const appConfig: ApplicationConfig = { - providers: [initFlowbite()], -}; -``` - -## Override base style - -Behind the scene, initFlowbite() setup a bunch of -InjectionToken, later used as base style in flowbite-angular component. You can override base style -by setting, after initFlowbite(), some new values for -InjectionToken. Each -InjectionToken are named as follow : - - - -- COMPONENT : FLOWBITE\_COMPONENT_NAME\_THEME_TOKEN -- COMPONENT : FLOWBITE\_COMPONENT_NAME\_THEME_TOKEN - - - -Each InjectionToken are linked to a -default value. default -value values are named as follow : - - - -- COMPONENT : componentNameTheme -- DIRECTIVE : directiveNameDirectiveTheme - - - -In order to combine both base style and component (or directive) parameter, flowbite-angular uses -ThemeServices, one for each component. As default style, they -can be override. Each ThemeServices are named as follow : - - - -- COMPONENT : ComponentNameThemeService -- DIRECTIVE : DirectiveNameDirectiveThemeService - - - -### Examples - -#### Component - -```angular-ts -import { AlertBaseTheme, FLOWBITE_ALERT_THEME_TOKEN } from 'flowbite-angular/alert'; -import { createTheme } from 'flowbite-angular/utils'; -import { initFlowbite } from 'flowbite-angular/core'; - -const customAlertTheme: AlertBaseTheme = createTheme({ - base: 'flex flex-col gap-2 p-4 text-sm rounded-lg', - color: { - info: 'text-blue-800 dark:text-blue-400 bg-blue-50 dark:bg-gray-800 border-blue-300 dark:border-blue-800', - failure: 'text-red-800 dark:text-red-400 bg-red-100 dark:bg-gray-800 border-red-300 dark:border-red-800', - success: 'text-green-800 dark:text-green-400 bg-green-100 dark:bg-gray-800 border-green-300 dark:border-green-800', - warning: - 'text-yellow-800 dark:text-yellow-300 bg-yellow-100 dark:bg-gray-800 border-yellow-300 dark:border-yellow-800', - dark: 'text-gray-800 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 border-gray-300 dark:border-gray-600', - }, - hasBorder: { - enabled: 'border', - disabled: 'border-0', - }, - hasBorderAccent: { - enabled: 'border-t-4', - disabled: '', - }, - closeButton: { - base: '-mx-1.5 -my-1.5 ml-auto inline-flex h-8 w-8 rounded-lg p-1.5 focus:ring-2', - color: { - info: 'text-blue-500 dark:text-blue-600 hover:bg-blue-200 dark:hover:bg-blue-300', - failure: 'text-red-500 dark:text-red-600 hover:bg-red-200 dark:hover:bg-red-300', - success: 'text-green-500 dark:text-green-600 hover:bg-green-200 dark:hover:bg-green-300', - warning: 'text-yellow-500 dark:text-yellow-600 hover:bg-yellow-200 dark:hover:bg-yellow-300', - dark: 'text-gray-500 dark:text-gray-600 hover:bg-gray-200 dark:hover:bg-gray-300', - }, - }, -}); - -export const appConfig: ApplicationConfig = { - providers: [ - ... - initFlowbite(), - { - provide: FLOWBITE_ALERT_THEME_TOKEN, - useValue: customAlertTheme, - }, - ... - ], -}; -``` - -#### Directive - -```angular-ts -import { IconDirectiveBaseTheme, FLOWBITE_DIRECTIVE_ICON_THEME_TOKEN } from 'flowbite-angular/icon'; -import { createTheme } from 'flowbite-angular/utils'; -import { initFlowbite } from 'flowbite-angular/core'; - -const customIconDirectiveTheme: IconDirectiveBaseTheme = createTheme({ - base: 'w-5 h-5 text-gray-500 dark:text-gray-400', -}); - -export const appConfig: ApplicationConfig = { - providers: [ - ... - initFlowbite(), - { - provide: FLOWBITE_DIRECTIVE_ICON_THEME_TOKEN, - useValue: customIconDirectiveTheme, - }, - ... - ], -}; -``` +--- +keyword: OverrideBaseStylePage +--- + +## Override base style + +Each component provide its own configuration method. Configuration methods are named as follow : + + +
    +
  • + provideFlowbiteComponentConfig +
    • +
+ + +You can used them to override the default behavior of components, and the style 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', + }), + ], +}; +``` diff --git a/apps/docs/docs/customize/override-base-style/ng-doc.page.ts b/apps/docs/docs/customize/override-base-style/ng-doc.page.ts index 56718a95..5cba3470 100644 --- a/apps/docs/docs/customize/override-base-style/ng-doc.page.ts +++ b/apps/docs/docs/customize/override-base-style/ng-doc.page.ts @@ -4,8 +4,6 @@ import type { NgDocPage } from '@ng-doc/core'; /** * Customize flowbite-angular's component style by override their default style. - * - * @status:info NEW */ const OverrideBaseStyle: NgDocPage = { title: 'Override base style', diff --git a/apps/docs/docs/customize/override-component-default-value/index.md b/apps/docs/docs/customize/override-component-default-value/index.md deleted file mode 100644 index 0c9ce614..00000000 --- a/apps/docs/docs/customize/override-component-default-value/index.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -keyword: OverrideComponentBaseValue ---- - -Each components provide a set of input to customize their behavior. - -They are named following this pattern : - - - -FLOWBITE\_COMPONENT_NAME\_INPUT_NAME\_DEFAULT_VALUE - - - -In order to modify the default value of an input, you have to add, after `initFlowbite` function, a -new `Provider` with its value : - -```angular-ts -import { FLOWBITE_ALERT_HAS_BORDER_DEFAULT_VALUE } from 'flowbite-angular/alert'; -import { initFlowbite } from 'flowbite-angular/core'; -import { ApplicationConfig } from '@angular/core'; - -export const appConfig: ApplicationConfig = { - providers: [ - ..., - initFlowbite(), - { - provide: FLOWBITE_ALERT_HAS_BORDER_DEFAULT_VALUE, - useValue: true, - }, - ], -}; - -``` diff --git a/apps/docs/docs/customize/override-component-default-value/ng-doc.page.ts b/apps/docs/docs/customize/override-component-default-value/ng-doc.page.ts deleted file mode 100644 index 8121d72a..00000000 --- a/apps/docs/docs/customize/override-component-default-value/ng-doc.page.ts +++ /dev/null @@ -1,17 +0,0 @@ -import CustomizeCategory from '../ng-doc.category'; - -import type { NgDocPage } from '@ng-doc/core'; - -/** - * Customize flowbite-angular's component input default value. - * - * @status:info NEW - */ -const OverrideComponentDefaultValue: NgDocPage = { - title: 'Override component default value', - mdFile: './index.md', - category: CustomizeCategory, - order: 3, -}; - -export default OverrideComponentDefaultValue; diff --git a/apps/docs/docs/customize/theming/index.md b/apps/docs/docs/customize/theming/index.md index 289be459..bbde24e7 100644 --- a/apps/docs/docs/customize/theming/index.md +++ b/apps/docs/docs/customize/theming/index.md @@ -2,38 +2,24 @@ keyword: ThemingPage --- -You can use the theme object from the configuration file to define any style related classes, such -as the color palette, fonts, breakpoints, and more. - -```javascript -module.exports = { - theme: { - colors: { - primary: { - 50: '#FFF0F1', - 100: '#FFE1E4', - 200: '#FFC8CF', - 300: '#FF9BA8', - 400: '#FF637B', - 500: '#FF2C51', - 600: '#F6083B', - 700: '#C3002F', - 800: '#AE0331', - 900: '#940732', - }, - }, - screens: { - sm: '640px', - md: '768px', - lg: '1024px', - xl: '1280px', - '2xl': '1536px', - }, - fontFamily: { - sans: 'Inter', - }, - }, -}; +You can use the theme directive from tailwind to define any style related classes, such as the color +palette, fonts, breakpoints, and more. + +```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 @@ -44,109 +30,40 @@ Some of the more widely used theme keys are You can read all of the `TailwindConfigurableKeys`. -### Breakpoints - -Use the screens key to update the responsive breakpoints. - -```javascript -module.exports = { - theme: { - screens: { - sm: '640px', - md: '768px', - lg: '1024px', - xl: '1280px', - '2xl': '1536px', - }, - }, -}; -``` - ### Colors -Use the colors key to update the responsive breakpoints. - -```javascript -module.exports = { - theme: { - colors: { - primary: { - 50: '#FFF0F1', - 100: '#FFE1E4', - 200: '#FFC8CF', - 300: '#FF9BA8', - 400: '#FF637B', - 500: '#FF2C51', - 600: '#F6083B', - 700: '#C3002F', - 800: '#AE0331', - 900: '#940732', - }, - }, - }, -}; +Use the colors 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 -Use the colors key to update the responsive breakpoints. +You can change de default font used by tailwind. -```javascript -module.exports = { - theme: { - fontFamily: { - sans: 'Inter', - }, - }, -}; -``` +```css +@font-face { + font-family: roboto; + src: url('../../fonts/roboto.ttf') format('truetype'); +} -### Spacing - -Use the spacing key to update the responsive breakpoints. - -```javascript -module.exports = { - theme: { - spacing: { - 0: '0px', - px: '1px', - 0.5: '2px', - 1: '4px', - 1.5: '6px', - 2: '8px', - 2.5: '10px', - 3: '12px', - 3.5: '14px', - 4: '16px', - 5: '20px', - 6: '24px', - 7: '28px', - 8: '32px', - 9: '36px', - 10: '40px', - 11: '44px', - 12: '48px', - 14: '56px', - 16: '64px', - 20: '80px', - 24: '96px', - 28: '112px', - 32: '128px', - 36: '144px', - 40: '160px', - 44: '176px', - 48: '192px', - 52: '208px', - 56: '224px', - 60: '240px', - 64: '256px', - 72: '288px', - 80: '320px', - 96: '384px', - }, - }, -}; +@theme { + --default-font-family: 'roboto'; +} ``` ## Customizing the theme @@ -154,46 +71,27 @@ module.exports = { By default, the configuration file will set the base utility classes from TailwindCSS. However, you can customize them by using the extends object. -### Extending - -Use the extends object if you want to keep the values from the -default settings but you want to extend them with your own. - -For example, you can keep all of the default breakpoints, but you may want to add another larger one -for the screens key. - -```javascript -module.exports = { - theme: { - extend: { - screens: { - '3xl': '1600px', - }, - }, - }, -}; -``` - ### Overriding -Alternatively, you can also completely override certain settings. - -For example, the following code will override all of the opacity -settings with your own. - -```javascript -module.exports = { - theme: { - opacity: { - 0: '0', - 20: '0.2', - 40: '0.4', - 60: '0.6', - 80: '0.8', - 100: '1', - }, - }, -}; +Alternatively, you can also completely override some settings. + +For example, the following code will override blue color palette +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 diff --git a/apps/docs/docs/customize/use-custom-style/index.md b/apps/docs/docs/customize/use-custom-style/index.md index f2ed3cbf..34d19050 100644 --- a/apps/docs/docs/customize/use-custom-style/index.md +++ b/apps/docs/docs/customize/use-custom-style/index.md @@ -7,9 +7,9 @@ keyword: UseCustomStylePage On each component call, you can give a customStyle value. ```angular-html - +
Hello World ! - +
``` You can then pass TailwindCSS classes, following the component's base theme. If one or more keys are diff --git a/apps/docs/docs/customize/use-custom-style/ng-doc.page.ts b/apps/docs/docs/customize/use-custom-style/ng-doc.page.ts index 399e6c8f..d7da07fa 100644 --- a/apps/docs/docs/customize/use-custom-style/ng-doc.page.ts +++ b/apps/docs/docs/customize/use-custom-style/ng-doc.page.ts @@ -4,8 +4,6 @@ import type { NgDocPage } from '@ng-doc/core'; /** * Customize flowbite-angular's component style by providing a custom style per component. - * - * @status:info NEW */ const UseCustomStyle: NgDocPage = { title: 'Use custom style', diff --git a/apps/docs/docs/getting-started/ng-primitives/index.md b/apps/docs/docs/getting-started/ng-primitives/index.md new file mode 100644 index 00000000..2513a435 --- /dev/null +++ b/apps/docs/docs/getting-started/ng-primitives/index.md @@ -0,0 +1,18 @@ +--- +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 +@ng-primitives/state providing a clean way to have state +management inside components. diff --git a/apps/docs/docs/getting-started/ng-primitives/ng-doc.page.ts b/apps/docs/docs/getting-started/ng-primitives/ng-doc.page.ts new file mode 100644 index 00000000..b473017f --- /dev/null +++ b/apps/docs/docs/getting-started/ng-primitives/ng-doc.page.ts @@ -0,0 +1,15 @@ +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; diff --git a/apps/docs/docs/getting-started/quickstart/index.md b/apps/docs/docs/getting-started/quickstart/index.md index 9aba42aa..d2fefbc7 100644 --- a/apps/docs/docs/getting-started/quickstart/index.md +++ b/apps/docs/docs/getting-started/quickstart/index.md @@ -21,45 +21,10 @@ Install Flowbite as a dependency using NPM by running this command: npm install flowbite-angular ``` -## Init function +## TailwindCSS configuration -By default, Flowbite Angular provides a style for each of it's components. In order to use them, you -have to call the init function inside the provider's list of your application. +Make sure to use the flowbite-angular configuration preset in your styles.css -For more informations about styling, check the `*OverrideBaseStylePage`. - -```angular-ts -import { initFlowbite } from 'flowbite-angular/core'; - -import { ApplicationConfig } from '@angular/core'; - -export const appConfig: ApplicationConfig = { - providers: [initFlowbite()], -}; -``` - -## Tailwind configuration - -Make sure to use the TailwindCSS configuration preset in your tailwind.config.js - -```javascript {2,7-8} -const { join } = require('path'); -const flowbiteAngularTailwindConfig = require('flowbite-angular/tailwind.config'); - -/** @type {import('tailwindcss').Config} */ -module.exports = { - presets: [ - // Use flowbite-angular's TailwindCSS configuration - flowbiteAngularTailwindConfig, - ], - content: [ - // Include every *.mjs files of flowbite-angular - join(__dirname, '../../node_modules/flowbite-angular/**/*.{html,ts,mjs}'), - join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html,md}'), - ], - theme: { - extend: {}, - }, - plugins: [], -}; +```css {2,7-8} +@import 'node_modules/flowbite-angular/styles/flowbite-angular.css'; ``` diff --git a/apps/docs/docs/getting-started/quickstart/ng-doc.page.ts b/apps/docs/docs/getting-started/quickstart/ng-doc.page.ts index 600ae44c..9f4c8166 100644 --- a/apps/docs/docs/getting-started/quickstart/ng-doc.page.ts +++ b/apps/docs/docs/getting-started/quickstart/ng-doc.page.ts @@ -4,8 +4,6 @@ import type { NgDocPage } from '@ng-doc/core'; /** * Get started with flowbite-angular by including it into your project using NPM - * - * @status:alert UPDATES */ const Quickstart: NgDocPage = { title: 'Quickstart', diff --git a/apps/docs/docs/getting-started/versioning/index.md b/apps/docs/docs/getting-started/versioning/index.md deleted file mode 100644 index 37c571c0..00000000 --- a/apps/docs/docs/getting-started/versioning/index.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -keyword: VersioningPage ---- - -> **Note** No patch will bring any changes on the angular version. - -| Flowbite-angular version | Angular version | TailwindCSS version | -| ------------------------ | --------------- | ------------------- | -| 1.2.0 | >=18.0.0 | ^3.0.0 | -| 1.1.1 | 18.0.0 | ^3.0.24 | -| 1.0.0 | 18.0.0 | ^3.0.24 | diff --git a/apps/docs/docs/getting-started/versioning/ng-doc.page.ts b/apps/docs/docs/getting-started/versioning/ng-doc.page.ts deleted file mode 100644 index 161c026c..00000000 --- a/apps/docs/docs/getting-started/versioning/ng-doc.page.ts +++ /dev/null @@ -1,18 +0,0 @@ -import GettingStartedCategory from '../ng-doc.category'; - -import type { NgDocPage } from '@ng-doc/core'; - -/** - * Here is a reference table that matches versions of flowbite-angular with its Angular version. It - * also shows the TailwindCSS version used. - * - * @status:alert NEW - */ -const Versioning: NgDocPage = { - title: 'Versioning', - mdFile: 'index.md', - category: GettingStartedCategory, - order: 4, -}; - -export default Versioning; diff --git a/apps/docs/docs/ng-doc.api.ts b/apps/docs/docs/ng-doc.api.ts index 00fd14c8..a5fdd4ff 100644 --- a/apps/docs/docs/ng-doc.api.ts +++ b/apps/docs/docs/ng-doc.api.ts @@ -1,8 +1,5 @@ import type { NgDocApi } from '@ng-doc/core'; -/** - * @status:info NEW - */ const api: NgDocApi = { title: 'API Reference', order: 999, @@ -10,51 +7,34 @@ const api: NgDocApi = { { name: 'core', route: 'core', - include: 'libs/flowbite-angular/core/index.ts', - }, - { - name: 'common', - route: 'common', - include: 'libs/flowbite-angular/common/index.ts', + include: 'libs/flowbite-angular/core/src/index.ts', }, { name: 'components', route: 'components', include: [ - 'libs/flowbite-angular/accordion/index.ts', - 'libs/flowbite-angular/alert/index.ts', - 'libs/flowbite-angular/badge/index.ts', - 'libs/flowbite-angular/breadcrumb/index.ts', - 'libs/flowbite-angular/button/index.ts', - 'libs/flowbite-angular/dark-theme-toggle/index.ts', - 'libs/flowbite-angular/dropdown/index.ts', - 'libs/flowbite-angular/icon/index.ts', - 'libs/flowbite-angular/indicator/index.ts', - 'libs/flowbite-angular/modal/index.ts', - 'libs/flowbite-angular/navbar/index.ts', - 'libs/flowbite-angular/scroll-top/index.ts', - 'libs/flowbite-angular/sidebar/index.ts', - 'libs/flowbite-angular/theme/index.ts', - ], - }, - { - name: 'directives', - route: 'directives', - include: [ - 'libs/flowbite-angular/router-link/index.ts', - 'libs/flowbite-angular/router-link-active/index.ts', + '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/core/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/tooltip/src/index.ts', ], }, - { - name: 'pipes', - route: 'pipes', - include: ['libs/flowbite-angular/sanitize-html/index.ts'], - }, - { - name: 'utils', - route: 'utils', - include: 'libs/flowbite-angular/utils/index.ts', - }, ], }; diff --git a/apps/docs/jest.config.ts b/apps/docs/jest.config.ts deleted file mode 100644 index 618ffad2..00000000 --- a/apps/docs/jest.config.ts +++ /dev/null @@ -1,23 +0,0 @@ -/* eslint-disable */ -export default { - displayName: 'docs', - preset: '../../jest.preset.js', - setupFilesAfterEnv: ['/src/test-setup.ts'], - globals: {}, - coverageDirectory: '../../coverage/apps/docs', - transform: { - '^.+\\.(ts|mjs|js|html)$': [ - 'jest-preset-angular', - { - tsconfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - }, - ], - }, - transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], - snapshotSerializers: [ - 'jest-preset-angular/build/serializers/no-ng-attributes', - 'jest-preset-angular/build/serializers/ng-snapshot', - 'jest-preset-angular/build/serializers/html-comment', - ], -}; diff --git a/apps/docs/ng-doc.config.ts b/apps/docs/ng-doc.config.ts index 8d5a8c6e..d96fafde 100644 --- a/apps/docs/ng-doc.config.ts +++ b/apps/docs/ng-doc.config.ts @@ -52,6 +52,10 @@ const config: NgDocConfiguration = { title: 'Tailwind CSS Theming documentation', url: 'https://tailwindcss.com/docs/theme', }, + NgPrimitivesDocumentation: { + title: 'ng-primitives', + url: 'https://angularprimitives.com', + }, }, loaders: [ngKeywordsLoader(), rxjsKeywordsLoader()], }, diff --git a/apps/docs/postcss.config.json b/apps/docs/postcss.config.json new file mode 100644 index 00000000..e092dc7c --- /dev/null +++ b/apps/docs/postcss.config.json @@ -0,0 +1,5 @@ +{ + "plugins": { + "@tailwindcss/postcss": {} + } +} diff --git a/apps/docs/project.json b/apps/docs/project.json index 49c4990c..e7373417 100644 --- a/apps/docs/project.json +++ b/apps/docs/project.json @@ -34,16 +34,16 @@ "input": "tmp/apps/docs/ng-doc/docs/assets", "output": "assets/ng-doc" }, - "apps/docs/src/assets" + { + "glob": "**/*", + "input": "apps/docs/public" + } ], - "styles": ["node_modules/@ng-doc/app/styles/global.css", "apps/docs/src/styles.css"], + "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, - "ssr": { - "entry": "apps/docs/server.ts" - }, "allowedCommonJsDependencies": ["@ng-doc/core"] }, "configurations": { @@ -87,13 +87,6 @@ }, "defaultConfiguration": "development" }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/apps/docs"], - "options": { - "jestConfig": "apps/docs/jest.config.ts" - } - }, "extract-i18n": { "executor": "@angular-devkit/build-angular:extract-i18n", "options": { diff --git a/apps/docs/src/assets/.gitkeep b/apps/docs/public/.gitkeep similarity index 100% rename from apps/docs/src/assets/.gitkeep rename to apps/docs/public/.gitkeep diff --git a/apps/docs/public/css/ng-doc/base.css b/apps/docs/public/css/ng-doc/base.css new file mode 100644 index 00000000..a43df7ba --- /dev/null +++ b/apps/docs/public/css/ng-doc/base.css @@ -0,0 +1,16 @@ +:root { + --ng-doc-primary: #ff2c51; + --ng-doc-hover-background: #ff9ba8; + --ng-doc-tab-group-tabs-background: #f9fafb; + --ng-doc-code-background: #f9fafb; + --ng-doc-text-selection: rgba(255, 44, 81, 0.15); +} + +ng-doc-tabs { + border-radius: 0px !important; + margin-top: 0px !important; +} + +ng-doc-tab-group { + border-radius: 0px !important; +} diff --git a/apps/docs/public/css/ng-doc/dark.css b/apps/docs/public/css/ng-doc/dark.css new file mode 100644 index 00000000..26a72cc7 --- /dev/null +++ b/apps/docs/public/css/ng-doc/dark.css @@ -0,0 +1,38 @@ +:root[data-theme='dark'] { + --ng-doc-base-rgb: 43 43 43; + --ng-doc-base-0: #111928; + --ng-doc-base-1: #262626; + --ng-doc-base-2: #2d2d2d; + --ng-doc-base-3: #353535; + --ng-doc-base-4: #3e3e3e; + --ng-doc-base-5: #484848; + --ng-doc-base-6: #515151; + --ng-doc-base-7: #5b5b5b; + --ng-doc-base-8: #656565; + --ng-doc-base-9: #707070; + --ng-doc-base-10: #7b7b7b; + --ng-doc-heading-color: #e3e3e3; + --ng-doc-text: #a9a9a9; + --ng-doc-text-muted: var(--ng-doc-base-10); + --ng-doc-text-selection: rgba(255, 44, 81, 0.5); + --ng-doc-shadow-color: rgba(0, 0, 0, 0.4); + --ng-doc-link-color: var(--ng-doc-primary); + --ng-doc-code-background: #1f2937; + --ng-doc-tab-group-tabs-background: #1f2937; + --ng-doc-inline-code-background: #b9b9b9; + --ng-doc-primary: #ff9ba8; + --ng-doc-info: #7095ff; + --ng-doc-mark-background: rgba(48, 165, 255, 0.3); + --ng-doc-search-result-color: #c6c6c6; + --ng-doc-api-tag-background: #ff5959; + --ng-doc-api-tag-color: var(--ng-doc-base-0); + --ng-doc-guide-tag-background: #faab00; + --ng-doc-guide-tag-color: var(--ng-doc-base-0); + --ng-doc-navbar-border: 1px solid var(--ng-doc-base-4); + --ng-doc-hover-background: #c3002f; +} + +:root[data-theme='dark'] .shiki, +:root[data-theme='dark'] .shiki span { + color: var(--shiki-dark) !important; +} diff --git a/apps/docs/public/css/styles.css b/apps/docs/public/css/styles.css new file mode 100644 index 00000000..6e8a17b1 --- /dev/null +++ b/apps/docs/public/css/styles.css @@ -0,0 +1,12 @@ +@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *)); + +@import '../../../../libs/flowbite-angular/styles/flowbite-angular.css'; + +@import './tw/fonts.css'; + +@import './ng-doc/base.css'; +@import './ng-doc/dark.css'; + +:root { + --ng-doc-font-system: 'roboto'; +} diff --git a/apps/docs/public/css/tw/fonts.css b/apps/docs/public/css/tw/fonts.css new file mode 100644 index 00000000..1bb908e5 --- /dev/null +++ b/apps/docs/public/css/tw/fonts.css @@ -0,0 +1,8 @@ +@font-face { + font-family: roboto; + src: url('../../fonts/roboto.ttf') format('truetype'); +} + +@theme { + --default-font-family: 'roboto'; +} diff --git a/apps/docs/public/favicon.svg b/apps/docs/public/favicon.svg new file mode 100644 index 00000000..89881c96 --- /dev/null +++ b/apps/docs/public/favicon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/docs/public/fonts/roboto.ttf b/apps/docs/public/fonts/roboto.ttf new file mode 100644 index 00000000..bba55f61 Binary files /dev/null and b/apps/docs/public/fonts/roboto.ttf differ diff --git a/apps/docs/src/assets/images/angular-dark-mode-thumbnail.png b/apps/docs/public/images/angular-dark-mode-thumbnail.png similarity index 100% rename from apps/docs/src/assets/images/angular-dark-mode-thumbnail.png rename to apps/docs/public/images/angular-dark-mode-thumbnail.png diff --git a/apps/docs/src/assets/images/angular-hero-mockup-dark.png b/apps/docs/public/images/angular-hero-mockup-dark.png similarity index 100% rename from apps/docs/src/assets/images/angular-hero-mockup-dark.png rename to apps/docs/public/images/angular-hero-mockup-dark.png diff --git a/apps/docs/src/assets/images/angular-hero-mockup-light.png b/apps/docs/public/images/angular-hero-mockup-light.png similarity index 100% rename from apps/docs/src/assets/images/angular-hero-mockup-light.png rename to apps/docs/public/images/angular-hero-mockup-light.png diff --git a/apps/docs/src/assets/images/angular-light-mode-thumbnail.png b/apps/docs/public/images/angular-light-mode-thumbnail.png similarity index 100% rename from apps/docs/src/assets/images/angular-light-mode-thumbnail.png rename to apps/docs/public/images/angular-light-mode-thumbnail.png diff --git a/apps/docs/src/assets/images/code-example-dark.png b/apps/docs/public/images/code-example-dark.png similarity index 100% rename from apps/docs/src/assets/images/code-example-dark.png rename to apps/docs/public/images/code-example-dark.png diff --git a/apps/docs/src/assets/images/code-example-light.png b/apps/docs/public/images/code-example-light.png similarity index 100% rename from apps/docs/src/assets/images/code-example-light.png rename to apps/docs/public/images/code-example-light.png diff --git a/apps/docs/src/assets/images/github-card-example/accordion-dark.svg b/apps/docs/public/images/github-card-example/accordion-dark.svg similarity index 100% rename from apps/docs/src/assets/images/github-card-example/accordion-dark.svg rename to apps/docs/public/images/github-card-example/accordion-dark.svg diff --git a/apps/docs/src/assets/images/github-card-example/accordion-light.svg b/apps/docs/public/images/github-card-example/accordion-light.svg similarity index 100% rename from apps/docs/src/assets/images/github-card-example/accordion-light.svg rename to apps/docs/public/images/github-card-example/accordion-light.svg diff --git a/apps/docs/src/assets/images/github-card-example/alerts-dark.svg b/apps/docs/public/images/github-card-example/alerts-dark.svg similarity index 100% rename from apps/docs/src/assets/images/github-card-example/alerts-dark.svg rename to apps/docs/public/images/github-card-example/alerts-dark.svg diff --git a/apps/docs/src/assets/images/github-card-example/alerts-light.svg b/apps/docs/public/images/github-card-example/alerts-light.svg similarity index 100% rename from apps/docs/src/assets/images/github-card-example/alerts-light.svg rename to apps/docs/public/images/github-card-example/alerts-light.svg diff --git a/apps/docs/src/assets/images/github-card-example/avatar-dark.svg b/apps/docs/public/images/github-card-example/avatar-dark.svg similarity index 100% rename from apps/docs/src/assets/images/github-card-example/avatar-dark.svg rename to apps/docs/public/images/github-card-example/avatar-dark.svg diff --git a/apps/docs/src/assets/images/github-card-example/avatar-light.svg b/apps/docs/public/images/github-card-example/avatar-light.svg similarity index 100% rename from apps/docs/src/assets/images/github-card-example/avatar-light.svg rename to apps/docs/public/images/github-card-example/avatar-light.svg diff --git a/apps/docs/src/assets/images/github-card-example/badges-dark.svg b/apps/docs/public/images/github-card-example/badges-dark.svg similarity index 100% rename from apps/docs/src/assets/images/github-card-example/badges-dark.svg rename to apps/docs/public/images/github-card-example/badges-dark.svg diff --git a/apps/docs/src/assets/images/github-card-example/badges-light.svg b/apps/docs/public/images/github-card-example/badges-light.svg similarity index 100% rename from apps/docs/src/assets/images/github-card-example/badges-light.svg rename to apps/docs/public/images/github-card-example/badges-light.svg diff --git a/apps/docs/src/assets/images/github-card-example/breadcrumb-dark.svg b/apps/docs/public/images/github-card-example/breadcrumb-dark.svg similarity index 100% rename from apps/docs/src/assets/images/github-card-example/breadcrumb-dark.svg rename to apps/docs/public/images/github-card-example/breadcrumb-dark.svg diff --git a/apps/docs/src/assets/images/github-card-example/breadcrumb-light.svg b/apps/docs/public/images/github-card-example/breadcrumb-light.svg similarity index 100% rename from apps/docs/src/assets/images/github-card-example/breadcrumb-light.svg rename to apps/docs/public/images/github-card-example/breadcrumb-light.svg diff --git a/apps/docs/src/assets/images/github-card-example/button-group-dark.svg b/apps/docs/public/images/github-card-example/button-group-dark.svg similarity index 100% rename from apps/docs/src/assets/images/github-card-example/button-group-dark.svg rename to apps/docs/public/images/github-card-example/button-group-dark.svg diff --git a/apps/docs/src/assets/images/github-card-example/button-group-light.svg b/apps/docs/public/images/github-card-example/button-group-light.svg similarity index 100% rename from apps/docs/src/assets/images/github-card-example/button-group-light.svg rename to apps/docs/public/images/github-card-example/button-group-light.svg diff --git a/apps/docs/src/assets/images/github-card-example/buttons.svg b/apps/docs/public/images/github-card-example/buttons.svg similarity index 100% rename from apps/docs/src/assets/images/github-card-example/buttons.svg rename to apps/docs/public/images/github-card-example/buttons.svg diff --git a/apps/docs/src/assets/images/github-card-example/card-dark.svg b/apps/docs/public/images/github-card-example/card-dark.svg similarity index 100% rename from apps/docs/src/assets/images/github-card-example/card-dark.svg rename to apps/docs/public/images/github-card-example/card-dark.svg diff --git a/apps/docs/src/assets/images/github-card-example/card-light.svg b/apps/docs/public/images/github-card-example/card-light.svg similarity index 100% rename from apps/docs/src/assets/images/github-card-example/card-light.svg rename to apps/docs/public/images/github-card-example/card-light.svg diff --git a/apps/docs/src/assets/images/github-card-example/carousel-dark.svg b/apps/docs/public/images/github-card-example/carousel-dark.svg similarity index 100% rename from apps/docs/src/assets/images/github-card-example/carousel-dark.svg rename to apps/docs/public/images/github-card-example/carousel-dark.svg diff --git a/apps/docs/src/assets/images/github-card-example/carousel-light.svg b/apps/docs/public/images/github-card-example/carousel-light.svg similarity index 100% rename from apps/docs/src/assets/images/github-card-example/carousel-light.svg rename to apps/docs/public/images/github-card-example/carousel-light.svg diff --git a/apps/docs/src/assets/images/github-card-example/dropdown-dark.svg b/apps/docs/public/images/github-card-example/dropdown-dark.svg similarity index 100% rename from apps/docs/src/assets/images/github-card-example/dropdown-dark.svg rename to apps/docs/public/images/github-card-example/dropdown-dark.svg diff --git a/apps/docs/src/assets/images/github-card-example/dropdown-light.svg b/apps/docs/public/images/github-card-example/dropdown-light.svg similarity index 100% rename from apps/docs/src/assets/images/github-card-example/dropdown-light.svg rename to apps/docs/public/images/github-card-example/dropdown-light.svg diff --git a/apps/docs/src/assets/images/github-card-example/forms-dark.svg b/apps/docs/public/images/github-card-example/forms-dark.svg similarity index 100% rename from apps/docs/src/assets/images/github-card-example/forms-dark.svg rename to apps/docs/public/images/github-card-example/forms-dark.svg diff --git a/apps/docs/src/assets/images/github-card-example/forms-light.svg b/apps/docs/public/images/github-card-example/forms-light.svg similarity index 100% rename from apps/docs/src/assets/images/github-card-example/forms-light.svg rename to apps/docs/public/images/github-card-example/forms-light.svg diff --git a/apps/docs/src/assets/images/github-card-example/indicators-dark.svg b/apps/docs/public/images/github-card-example/indicators-dark.svg similarity index 100% rename from apps/docs/src/assets/images/github-card-example/indicators-dark.svg rename to apps/docs/public/images/github-card-example/indicators-dark.svg diff --git a/apps/docs/src/assets/images/github-card-example/indicators.svg b/apps/docs/public/images/github-card-example/indicators.svg similarity index 100% rename from apps/docs/src/assets/images/github-card-example/indicators.svg rename to apps/docs/public/images/github-card-example/indicators.svg diff --git a/apps/docs/src/assets/images/github-card-example/list-group-dark.svg b/apps/docs/public/images/github-card-example/list-group-dark.svg similarity index 100% rename from apps/docs/src/assets/images/github-card-example/list-group-dark.svg rename to apps/docs/public/images/github-card-example/list-group-dark.svg diff --git a/apps/docs/src/assets/images/github-card-example/list-group-light.svg b/apps/docs/public/images/github-card-example/list-group-light.svg similarity index 100% rename from apps/docs/src/assets/images/github-card-example/list-group-light.svg rename to apps/docs/public/images/github-card-example/list-group-light.svg diff --git a/apps/docs/src/assets/images/github-card-example/modal-dark.svg b/apps/docs/public/images/github-card-example/modal-dark.svg similarity index 100% rename from apps/docs/src/assets/images/github-card-example/modal-dark.svg rename to apps/docs/public/images/github-card-example/modal-dark.svg diff --git a/apps/docs/src/assets/images/github-card-example/modal-light.svg b/apps/docs/public/images/github-card-example/modal-light.svg similarity index 100% rename from apps/docs/src/assets/images/github-card-example/modal-light.svg rename to apps/docs/public/images/github-card-example/modal-light.svg diff --git a/apps/docs/src/assets/images/github-card-example/navbars-dark.svg b/apps/docs/public/images/github-card-example/navbars-dark.svg similarity index 100% rename from apps/docs/src/assets/images/github-card-example/navbars-dark.svg rename to apps/docs/public/images/github-card-example/navbars-dark.svg diff --git a/apps/docs/src/assets/images/github-card-example/navbars-light.svg b/apps/docs/public/images/github-card-example/navbars-light.svg similarity index 100% rename from apps/docs/src/assets/images/github-card-example/navbars-light.svg rename to apps/docs/public/images/github-card-example/navbars-light.svg diff --git a/apps/docs/src/assets/images/github-card-example/pagination-dark.svg b/apps/docs/public/images/github-card-example/pagination-dark.svg similarity index 100% rename from apps/docs/src/assets/images/github-card-example/pagination-dark.svg rename to apps/docs/public/images/github-card-example/pagination-dark.svg diff --git a/apps/docs/src/assets/images/github-card-example/pagination-light.svg b/apps/docs/public/images/github-card-example/pagination-light.svg similarity index 100% rename from apps/docs/src/assets/images/github-card-example/pagination-light.svg rename to apps/docs/public/images/github-card-example/pagination-light.svg diff --git a/apps/docs/src/assets/images/github-card-example/progress-dark.svg b/apps/docs/public/images/github-card-example/progress-dark.svg similarity index 100% rename from apps/docs/src/assets/images/github-card-example/progress-dark.svg rename to apps/docs/public/images/github-card-example/progress-dark.svg diff --git a/apps/docs/src/assets/images/github-card-example/progress-light.svg b/apps/docs/public/images/github-card-example/progress-light.svg similarity index 100% rename from apps/docs/src/assets/images/github-card-example/progress-light.svg rename to apps/docs/public/images/github-card-example/progress-light.svg diff --git a/apps/docs/src/assets/images/github-card-example/rating-dark.svg b/apps/docs/public/images/github-card-example/rating-dark.svg similarity index 100% rename from apps/docs/src/assets/images/github-card-example/rating-dark.svg rename to apps/docs/public/images/github-card-example/rating-dark.svg diff --git a/apps/docs/src/assets/images/github-card-example/rating-light.svg b/apps/docs/public/images/github-card-example/rating-light.svg similarity index 100% rename from apps/docs/src/assets/images/github-card-example/rating-light.svg rename to apps/docs/public/images/github-card-example/rating-light.svg diff --git a/apps/docs/src/assets/images/github-card-example/sidebar-dark.svg b/apps/docs/public/images/github-card-example/sidebar-dark.svg similarity index 100% rename from apps/docs/src/assets/images/github-card-example/sidebar-dark.svg rename to apps/docs/public/images/github-card-example/sidebar-dark.svg diff --git a/apps/docs/src/assets/images/github-card-example/sidebar-light.svg b/apps/docs/public/images/github-card-example/sidebar-light.svg similarity index 100% rename from apps/docs/src/assets/images/github-card-example/sidebar-light.svg rename to apps/docs/public/images/github-card-example/sidebar-light.svg diff --git a/apps/docs/src/assets/images/github-card-example/spinners-dark.svg b/apps/docs/public/images/github-card-example/spinners-dark.svg similarity index 100% rename from apps/docs/src/assets/images/github-card-example/spinners-dark.svg rename to apps/docs/public/images/github-card-example/spinners-dark.svg diff --git a/apps/docs/src/assets/images/github-card-example/spinners-light.svg b/apps/docs/public/images/github-card-example/spinners-light.svg similarity index 100% rename from apps/docs/src/assets/images/github-card-example/spinners-light.svg rename to apps/docs/public/images/github-card-example/spinners-light.svg diff --git a/apps/docs/src/assets/images/github-card-example/tables-dark.svg b/apps/docs/public/images/github-card-example/tables-dark.svg similarity index 100% rename from apps/docs/src/assets/images/github-card-example/tables-dark.svg rename to apps/docs/public/images/github-card-example/tables-dark.svg diff --git a/apps/docs/src/assets/images/github-card-example/tables-light.svg b/apps/docs/public/images/github-card-example/tables-light.svg similarity index 100% rename from apps/docs/src/assets/images/github-card-example/tables-light.svg rename to apps/docs/public/images/github-card-example/tables-light.svg diff --git a/apps/docs/src/assets/images/github-card-example/toast-dark.svg b/apps/docs/public/images/github-card-example/toast-dark.svg similarity index 100% rename from apps/docs/src/assets/images/github-card-example/toast-dark.svg rename to apps/docs/public/images/github-card-example/toast-dark.svg diff --git a/apps/docs/src/assets/images/github-card-example/toast-light.svg b/apps/docs/public/images/github-card-example/toast-light.svg similarity index 100% rename from apps/docs/src/assets/images/github-card-example/toast-light.svg rename to apps/docs/public/images/github-card-example/toast-light.svg diff --git a/apps/docs/src/assets/images/github-card-example/tooltips-dark.svg b/apps/docs/public/images/github-card-example/tooltips-dark.svg similarity index 100% rename from apps/docs/src/assets/images/github-card-example/tooltips-dark.svg rename to apps/docs/public/images/github-card-example/tooltips-dark.svg diff --git a/apps/docs/src/assets/images/github-card-example/tooltips-light.svg b/apps/docs/public/images/github-card-example/tooltips-light.svg similarity index 100% rename from apps/docs/src/assets/images/github-card-example/tooltips-light.svg rename to apps/docs/public/images/github-card-example/tooltips-light.svg diff --git a/apps/docs/src/assets/images/works-with-tailwind-dark.png b/apps/docs/public/images/works-with-tailwind-dark.png similarity index 100% rename from apps/docs/src/assets/images/works-with-tailwind-dark.png rename to apps/docs/public/images/works-with-tailwind-dark.png diff --git a/apps/docs/src/assets/images/works-with-tailwind-light.png b/apps/docs/public/images/works-with-tailwind-light.png similarity index 100% rename from apps/docs/src/assets/images/works-with-tailwind-light.png rename to apps/docs/public/images/works-with-tailwind-light.png diff --git a/apps/docs/src/app/app.component.html b/apps/docs/src/app/app.component.html index f3aa29a3..f41b0202 100644 --- a/apps/docs/src/app/app.component.html +++ b/apps/docs/src/app/app.component.html @@ -2,131 +2,147 @@ [sidebar]="!isLandingPage" [noWidthLimit]="isLandingPage" [footerContent]="footerContent"> - -
+ fixed + color="primary"> +
@if (!isLandingPage) { - + Sidebar toggle - + name="bars" + class="size-5 stroke-2" /> + } - - + Flowbite Logo - -
- - + + +
- - - + + + + + + + + + + + + - + - - {{ flowbiteAngularVersion() }} - + + +
- + + {{ flowbiteAngularVersion() }} +
- +
-
-
-
+
+
+ class="mx-auto flex flex-col items-start justify-center gap-4 md:flex-row md:items-center md:gap-5">
- + Flowbite Logo Flowbite

diff --git a/apps/docs/src/app/app.component.ts b/apps/docs/src/app/app.component.ts index cc138898..c1a617e3 100644 --- a/apps/docs/src/app/app.component.ts +++ b/apps/docs/src/app/app.component.ts @@ -2,49 +2,53 @@ // eslint-disable-next-line @nx/enforce-module-boundaries import flowbiteAngularPackageJson from '../../../../libs/flowbite-angular/package.json'; -import { BadgeComponent } from 'flowbite-angular/badge'; -import { IconComponent } from 'flowbite-angular/icon'; +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 { - NavbarBrandComponent, - NavbarComponent, - NavbarContentComponent, - NavbarIconButtonComponent, - NavbarItemComponent, - NavbarToggleComponent, + Navbar, + NavbarBrand, + NavbarContent, + NavbarIconItem, + NavbarItem, + NavbarToggle, } from 'flowbite-angular/navbar'; -import { FlowbiteRouterLinkDirective } from 'flowbite-angular/router-link'; -import { FlowbiteRouterLinkActiveDirective } from 'flowbite-angular/router-link-active'; -import { ScrollTopComponent } from 'flowbite-angular/scroll-top'; +import { Theme, ThemeToggle } from 'flowbite-angular/theme-toggle'; import { Location } from '@angular/common'; import { Component, computed, inject } from '@angular/core'; -import { RouterOutlet } from '@angular/router'; +import { RouterLink, RouterOutlet } from '@angular/router'; import { NgDocRootComponent, NgDocSearchComponent, NgDocSidebarComponent, NgDocSidebarService, - NgDocThemeToggleComponent, } from '@ng-doc/app'; +import { provideIcons } from '@ng-icons/core'; @Component({ + providers: [provideIcons({ github, discord, youtube, bars, storybook })], imports: [ RouterOutlet, NgDocRootComponent, NgDocSidebarComponent, - NgDocThemeToggleComponent, NgDocSearchComponent, - IconComponent, - NavbarComponent, - NavbarContentComponent, - NavbarItemComponent, - NavbarBrandComponent, - NavbarToggleComponent, - NavbarIconButtonComponent, - FlowbiteRouterLinkDirective, - FlowbiteRouterLinkActiveDirective, - BadgeComponent, - ScrollTopComponent, + Navbar, + NavbarBrand, + NavbarContent, + NavbarIconItem, + NavbarItem, + NavbarToggle, + Badge, + ThemeToggle, + RouterLink, + Icon, + ], + hostDirectives: [ + { + directive: Theme, + }, ], selector: 'flowbite-root', templateUrl: './app.component.html', diff --git a/apps/docs/src/app/app.config.server.ts b/apps/docs/src/app/app.config.server.ts index bc2caf9c..a1805869 100644 --- a/apps/docs/src/app/app.config.server.ts +++ b/apps/docs/src/app/app.config.server.ts @@ -2,7 +2,7 @@ import { appConfig } from './app.config'; import type { ApplicationConfig } from '@angular/core'; import { mergeApplicationConfig } from '@angular/core'; -import { provideServerRendering } from '@angular/platform-server'; +import { provideServerRendering } from '@angular/ssr'; const serverConfig: ApplicationConfig = { providers: [provideServerRendering()], diff --git a/apps/docs/src/app/app.config.ts b/apps/docs/src/app/app.config.ts index 3d388644..279b9b8b 100644 --- a/apps/docs/src/app/app.config.ts +++ b/apps/docs/src/app/app.config.ts @@ -1,13 +1,11 @@ import { appRoutes } from './app.routes'; -import { initIcons } from './icon.init'; import { docDemoDisplayerProcessor } from './shared/processors/doc-demo-displayer-processor/doc-demo-displayer-processor'; -import { initFlowbite } from 'flowbite-angular/core'; -import { IconRegistry } from 'flowbite-angular/icon'; +import { provideFlowbiteThemeConfig } from 'flowbite-angular/theme-toggle'; import { provideHttpClient, withFetch, withInterceptorsFromDi } from '@angular/common/http'; -import { inject, provideAppInitializer, type ApplicationConfig } from '@angular/core'; -import { DomSanitizer, provideClientHydration } from '@angular/platform-browser'; +import { type ApplicationConfig } from '@angular/core'; +import { provideClientHydration } from '@angular/platform-browser'; import { provideAnimations } from '@angular/platform-browser/animations'; import { provideRouter, withInMemoryScrolling } from '@angular/router'; import { @@ -50,10 +48,8 @@ export const appConfig: ApplicationConfig = { withInMemoryScrolling({ scrollPositionRestoration: 'enabled', anchorScrolling: 'enabled' }) ), provideHttpClient(withInterceptorsFromDi(), withFetch()), - initFlowbite(), - provideAppInitializer(() => { - const initializerFn = initIcons(inject(IconRegistry), inject(DomSanitizer)); - return initializerFn(); + provideFlowbiteThemeConfig({ + type: { type: 'attr', name: 'data-theme' }, }), ], }; diff --git a/apps/docs/src/app/icon.init.ts b/apps/docs/src/app/icon.init.ts deleted file mode 100644 index 2994f077..00000000 --- a/apps/docs/src/app/icon.init.ts +++ /dev/null @@ -1,26 +0,0 @@ -import * as iconListJson from '../assets/icons/icon.list.json'; - -import type { IconRegistry } from 'flowbite-angular/icon'; - -import type { DomSanitizer } from '@angular/platform-browser'; - -export function initIcons(iconRegistry: IconRegistry, sanitizer: DomSanitizer) { - return () => { - const iconList = (iconListJson as any).default as [ - { namespace: string; name: string; path: string }, - ]; - - iconList.forEach((iconData) => - iconRegistry.addSvgIconInNamespace( - iconData.namespace, - iconData.name, - sanitizer.bypassSecurityTrustResourceUrl(iconData.path) - ) - ); - - iconRegistry.addSvgIcon( - 'flowbite-angular-logo', - sanitizer.bypassSecurityTrustResourceUrl('/assets/flowbite-angular-logo.svg') - ); - }; -} diff --git a/apps/docs/src/app/pages/landing/landing.component.html b/apps/docs/src/app/pages/landing/landing.component.html index c4faf760..b784fc85 100644 --- a/apps/docs/src/app/pages/landing/landing.component.html +++ b/apps/docs/src/app/pages/landing/landing.component.html @@ -1,155 +1,147 @@ -

-
+
+
-

+

Speed up your web development with Flowbite Angular

-

+

Flowbite Angular is an official Flowbite component library for Angular. All interactivities are handled by Angular.

-
- +
+
-
-
-
-

Featured in:

-
+
+
+

Featured in:

+
+ class="h-9 w-auto" + name="reddit" /> + class="h-9 w-auto" + name="dev" /> + class="h-9 w-auto" + name="productHunt" /> + class="h-9 w-auto" + name="combinator" /> + class="h-9 w-auto" + name="youtube" />
-
-