<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-secondary">Secondary Button</button>
<button type="button" class="btn btn-success">Success Button</button>
<button type="button" class="btn btn-info">Info Button</button>
<button type="button" class="btn btn-warning">Warning Button</button>
<button type="button" class="btn btn-danger">Danger Button</button>
<button type="button" class="btn btn-light">Light Button</button>

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-warning text-dark">Warning</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-light text-dark">Light</span>
<span class="badge badge-dark tag-pills-sm-mb">Dark</span>

<div class="progress mb-2">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
</div>
<div class="progress mb-2">
  <div class="progress-bar bg-primary" role="progressbar" style="width: 25%"           aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
</div>
<div class="progress mb-2">
  <div class="progress-bar bg-secondary" role="progressbar" style="width: 50%"         aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
</div>
<div class="progress mb-2">
  <div class="progress-bar bg-success" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
</div>
<div class="progress mb-2">
  <div class="progress-bar bg-info" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
</div>

@for (allData of darkThemeAlertData; track allData) {
<app-card [header]="true" [body]="true">
    <h5 header>Link color in dark theme</h5>
    <p header class="f-m-light mt-1">Use the <code>.alert-link</code> utility class to quickly provide matching colored
        links within any alert.</p>
    <div class="row" body>
        <div class="col-xl-6">
            @for (alertData of allData.data1; track alertData) {
            <p class="mb-1">{{alertData.title}}</p>
            <div class="alert alert-{{alertData.alertClass}} dark" role="alert">
                <p>This is a <a class="alert-link {{alertData.textClass}}" href="javascript:void(0)">{{alertData.title |
                        lowercase}}</a> with an example link. Check it out.</p>
            </div>
            }
        </div>
        <div class="col-xl-6">
            @for (alertData of allData.data2; track alertData) {
            <p class="mb-1">{{alertData.title }}</p>
            <div class="alert alert-{{alertData.alertClass}} dark" role="alert">
                <p>This is a <a class="alert-link {{alertData.textClass}}" href="javascript:void(0)">{{alertData.title |
                        lowercase}}
                    </a> with an example link. Check it out.</p>
            </div>
            }
        </div>
    </div>
</app-card>
}

import { Component } from '@angular/core';
import * as Data from '../../../../shared/data/ui-kits/alert';
import { CommonModule } from '@angular/common';
import { FeatherIconsComponent } from '../../../../shared/components/feather-icons/feather-icons.component';
import { CardComponent } from "../../../../shared/components/card/card.component";

@Component({
    selector: 'app-dark-theme',
    templateUrl: './dark-theme.component.html',
    styleUrls: ['./dark-theme.component.scss'],
    imports: [CommonModule, FeatherIconsComponent, CardComponent]
})

export class DarkThemeComponent {

  public darkThemeAlertData = Data.darkThemeAlertData;

}

export interface commonAlert {
    header?: string;
    desc?: string;
    data1: data[];
    data2: data[];
}

export interface data {
    title: string;
    alertClass: string;
    textClass: string;
}

export const darkThemeAlertData: commonAlert[] = [
    {
        data1: [
            {
                title: 'Primary Alert',
                alertClass: 'primary dark',
                textClass: 'text-white',
            },
            {
                title: 'Secondary Alert',
                alertClass: 'secondary dark',
                textClass: 'text-white',
            },
            {
                title: 'Success Alert',
                alertClass: 'success dark',
                textClass: 'text-white',
            },
            {
                title: 'Info Alert',
                alertClass: 'info dark',
                textClass: 'text-white',
            },
        ],
        data2: [
            {
                title: 'Warning Alert',
                alertClass: 'warning dark',
                textClass: 'text-white',
            },
            {
                title: 'Danger Alert',
                alertClass: 'danger dark',
                textClass: 'text-white',
            },
            {
                title: 'Light Alert',
                alertClass: 'light dark',
                textClass: '',
            },
            {
                title: 'Dark Alert',
                alertClass: 'dark dark',
                textClass: 'text-white',
            },
        ]
    }
]

<app-card [header]="true" [body]="true" [cardBodyClass]="'common-flex popover-wrapper'">
  <h5 header>Basic popover</h5>
  <p header class="f-m-light mt-1">Use the<code> data-bs-toggle='popover'</code>through popover above buttons. </p>
  <button body class="btn btn-primary example-popover mb-0 me-0" type="button" data-bs-toggle="popover" placement="left"
    popoverTitle="Basic Popover"
    ngbPopover="If the package restore doesn't help, you can look at the Output window in the Visual Studio.">Hurry Up!
  </button>
  <button body class="example-popover btn btn-success mb-0 me-0" type="button" triggers="mouseenter:mouseleave"
    data-container="body" data-bs-toggle="popover" placement="bottom" popoverTitle="Hover Popover"
    data-offset="-20px -20px"
    ngbPopover=" Several utility instruction sets have been featured in the Bootstrap 4 to promote very easy learning for beginners in the business of web building.">Hover
    tooltip</button>
  <a body class="btn btn-lg btn-secondary" tabindex="0" role="button" data-bs-toggle="popover" data-bs-trigger="focus"
    placement="right" popoverTitle="Dismissible popover"
    ngbPopover="You are able to even develop and suggest improvements to the Bootstrap 4 before its final version is delivered.">Dismissible
    popover</a>
</app-card>

<button class="example-popover btn btn-primary mb-0 me-0" type="button" placement="top"
ngbTooltip="Surprise!!! Thank you for hovering...">It's magic please hover me... </button>

<div class="dropdown-basic">
<div ngbDropdown class="d-inline-block">
  <button type="button" class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
  <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
  	<button ngbDropdownItem>Action - 1</button>
  	<button ngbDropdownItem>Another Action</button>
  	<button ngbDropdownItem>Something else is here</button>
  </div>
</div>

import { Component } from '@angular/core';
import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';

@Component({
	selector: 'ngbd-dropdown-basic',
	imports: [NgbDropdownModule],
	templateUrl: './dropdown-basic.html',
})
export class NgbdDropdownBasic {}

<ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs">
	<li [ngbNavItem]="1">
		<button ngbNavLink>One</button>
		<ng-template ngbNavContent>
			<p>
				Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth
				master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro
				keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat
				salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
			</p>
		</ng-template>
	</li>
	<li [ngbNavItem]="2">
		<button ngbNavLink>Two</button>
		<ng-template ngbNavContent>
			<p>
				Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko
				farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts
				ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar
				helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson
				8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester
				stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
			</p>
		</ng-template>
	</li>
	<li [ngbNavItem]="3">
		<button ngbNavLink>Three</button>
		<ng-template ngbNavContent>
			<p>
				Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget sodales nibh elit id diam. Nulla facilisi.
				Donec egestas ligula vitae odio interdum aliquet. Duis lectus turpis, luctus eget tincidunt eu, congue et odio.
				Duis pharetra et nisl at faucibus. Quisque luctus pulvinar arcu, et molestie lectus ultrices et. Sed diam urna,
				egestas ut ipsum vel, volutpat volutpat neque. Praesent fringilla tortor arcu. Vivamus faucibus nisl enim, nec
				tristique ipsum euismod facilisis. Morbi ut bibendum est, eu tincidunt odio. Orci varius natoque penatibus et
				magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquet odio ac lorem aliquet ultricies in eget
				neque. Phasellus nec tortor vel tellus pulvinar feugiat.
			</p>
		</ng-template>
	</li>
</ul>

<div [ngbNavOutlet]="nav" class="mt-2"></div>

import { Component } from '@angular/core';
import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';

@Component({
	selector: 'ngbd-nav-basic',
	imports: [NgbNavModule],
	templateUrl: './nav-basic.html',
})
export class NgbdNavBasic {
	active = 1; 
}

<div ngbAccordion [closeOthers]="true">
	@for (item of items; track item) {
		<div ngbAccordionItem [collapsed]="item !== 'First'">
			<h2 ngbAccordionHeader>
				<button ngbAccordionButton>{{ item }}</button>
			</h2>
			<div ngbAccordionCollapse>
				<div ngbAccordionBody>
					<ng-template>
						Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
						officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3
						wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
						Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan
						excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
						you probably haven't heard of them accusamus labore sustainable VHS.
					</ng-template>
				</div>
			</div>
		</div>
	}
</div>

import { Component } from '@angular/core';
import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap';

@Component({
	selector: 'ngbd-accordion-static',
	imports: [NgbAccordionModule],
	templateUrl: './accordion-static.html',
})
export class NgbdAccordionStatic {
	items = ['First', 'Second', 'Third'];
}