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

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

<div class="progress rounded-s-lg">
  <div class="progress-bar"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-primary" [ngStyle]="{ 'width': '25%'}"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-secondary" [ngStyle]="{ 'width': '50%'}"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-success" [ngStyle]="{ 'width': '75%'}"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-info" [ngStyle]="{ 'width': '100%'}"></div>
</div>

<div class="alert alert-primary" role="alert">This is a info alert—check it out!</div>
<div class="alert alert-secondary" role="alert">This is a light alert—check it out!</div>
<div class="alert alert-success" role="alert">This is a success alert—check it out!</div>
<div class="alert alert-info" role="alert">This is a danger alert—check it out!</div>
<div class="alert alert-warning" role="alert">This is a secondary alert—check it out!</div>
<div class="alert alert-danger" role="alert">This is a warning alert—check it out!</div>
<div class="alert alert-light" role="alert">This is a dark alert—check it out!</div>
<div class="alert alert-dark" role="alert">This is a dark alert—check it out!</div>

<div class="relative group inline-block" (clickOutside)="handlePopover()">
    <button class="btn btn-primary example-popover mb-0 me-0 text-white" (click)="showPopover()">Hurry Up!</button>

    <div [class.show]="popoverVisible" class="popover absolute left-1/2 top-full -translate-x-1/2 mt-2 w-max bg-white text-sm rounded opacity-100 visible transition-opacity duration-300 shadow-lg">
        <div class="popover-arrow"></div>
        <div class="popover-header">Popover Title</div>
        <div class="popover-body">And here's some amazing content.</div>
    </div>
</div>

<div class="relative group inline-block">
    <button 
        class="example-popover btn btn-success mb-0 me-0 text-white" 
        type="button">Hover Popover
    </button>

    <div class="popover show absolute left-1/2 top-full mt-2 w-max -translate-x-1/2 bg-white text-sm rounded opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-opacity duration-300 shadow-lg">
        <div class="popover-arrow"></div>
        <div class="popover-header">Hover Popover</div>
        <div class="popover-body">Several utility instruction sets have been featured in the Bootstrap 4 to promote very easy learning for beginners in the business of web building.</div>
    </div>
</div>

import { Component } from '@angular/core';

import { CardComponent } from "../../../../../shared/components/ui/card/card.component";
import { OutsideDirective } from '../../../../../shared/directives/outside.directive';

@Component({
  selector: 'app-popover',
  imports: [OutsideDirective, CardComponent],
  templateUrl: './popover.component.html',
  styleUrl: './popover.component.scss'
})

export class PopoverComponent {

  public popoverVisible: boolean = false;

  showPopover() {
    this.popoverVisible =! this.popoverVisible;
  }

  handlePopover() {
    this.popoverVisible = false;
  }
  
}

<div class="alert alert-primary" role="alert">This is a info alert—check it out!</div>
<div class="alert alert-secondary" role="alert">This is a light alert—check it out!</div>
<div class="alert alert-success" role="alert">This is a success alert—check it out!</div>
<div class="alert alert-info" role="alert">This is a danger alert—check it out!</div>
<div class="alert alert-warning" role="alert">This is a secondary alert—check it out!</div>
<div class="alert alert-danger" role="alert">This is a warning alert—check it out!</div>
<div class="alert alert-light" role="alert">This is a dark alert—check it out!</div>
<div class="alert alert-dark" role="alert">This is a dark alert—check it out!</div>

<div class="btn-group" (clickOutside)="clickOutside()">
    <button class="btn btn-primary dropdown-toggle border text-white" type="button" (click)="toggleDropdown()">Dropdown Title</button>
    <ul class="dropdown-menu dropdown-block" [class.show]="dropdownOpen">
      <li>
          <a class="dropdown-item" href="javascript:void(0)">Action</a>
      </li>
        <li>
          <a class="dropdown-item" href="javascript:void(0)">Another Action</a>
      </li>
      <li>
          <a class="dropdown-item" href="javascript:void(0)">Something Else Here</a>
      </li>
    </ul>
</div>

import { Component } from '@angular/core';

import { OutsideDirective } from '../../../../../shared/directives/outside.directive';

@Component({
  selector: 'app-dropdown',
  imports: [OutsideDirective],
  templateUrl: './dropdown.component.html',
  styleUrl: './dropdown.component.scss'
})

export class DropdownComponent {

  public dropdownOpen: boolean = false;

  toggleDropdown(index: number) {
    this.dropdownOpen =! this.dropdownOpen;
  }

  clickOutside() {
    this.dropdownOpen = false;
  }
  
}

<div class="accordion-item">
  <h2 class="accordion-header">
    <button
      class="accordion-button accordion-light-primary txt-primary"
      type="button"
      [class.collapsed]="!accordionOpen[1]"
      (click)="toggleAccordion(1)"
      [attr.aria-expanded]="accordionOpen[1] ? true : false"
    >
      Accordion Item #1
      <app-feather-icon [icon]="'chevron-down'" [class]="'svg-color'"></app-feather-icon>
    </button>
  </h2>
  <div class="accordion-collapse collapse" [class.show]="accordionOpen[1]">
    <div class="accordion-body">
      This is the <b>first item's</b> accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element...
    </div>
  </div>
</div>

<div class="accordion-item">
  <h2 class="accordion-header">
    <button
      class="accordion-button accordion-light-primary txt-primary"
      type="button"
      [class.collapsed]="!accordionOpen[2]"
      (click)="toggleAccordion(2)"
      [attr.aria-expanded]="accordionOpen[2] ? true : false"
    >
      Accordion Item #2
      <app-feather-icon [icon]="'chevron-down'" [class]="'svg-color'"></app-feather-icon>
    </button>
  </h2>
  <div class="accordion-collapse collapse" [class.show]="accordionOpen[2]">
    <div class="accordion-body">
      This is the <b>second item's</b> accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes...
    </div>
  </div>
</div>

<div class="accordion-item">
  <h2 class="accordion-header">
    <button
      class="accordion-button accordion-light-primary txt-primary"
      type="button"
      [class.collapsed]="!accordionOpen[3]"
      (click)="toggleAccordion(3)"
      [attr.aria-expanded]="accordionOpen[3] ? true : false"
    >
      Accordion Item #3
      <app-feather-icon [icon]="'chevron-down'" [class]="'svg-color'"></app-feather-icon>
    </button>
  </h2>
  <div class="accordion-collapse collapse" [class.show]="accordionOpen[3]">
    <div class="accordion-body">
      <p>This is the <b>third item's</b> accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes...</p>
    </div>
  </div>
</div>

import { Component } from '@angular/core';

import { FeatherIconComponent } from "../../../../../shared/components/ui/feather-icon/feather-icon.component";
import { simpleAccordion } from '../../../../../shared/data/ui-kits/accordion';

@Component({
  selector: 'app-accordion',
  imports: [FeatherIconComponent],
  templateUrl: './accordion.component.html',
  styleUrl: './accordion.component.scss'
})

export class AccordionComponent {

  public accordionOpen: { [key: number]: boolean } = {};

  toggleAccordion(index: number) {
    if (this.accordionOpen[index]) {
      this.accordionOpen[index] = false;
    } else {
      this.accordionOpen[index] = true;
    }
  }
  
}

<ul class="simple-wrapper flex tab-links">
    <li class="txt-primary tab-link" [class.active]="activeTab == 'home'" (click)="handleTab('home')">Home</li>
    <li class="txt-primary tab-link" [class.active]="activeTab == 'profile'" (click)="handleTab('profile')">Profile</li>
    <li class="txt-primary tab-link" [class.active]="activeTab == 'contact'" (click)="handleTab('contact')">Contact</li>
</ul>
<div class="tab-content">
    <div class="tab-pan fade show active">
        @if(activeTab == 'home') {
          <p class="mb-0 mt-3">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
            unknown printer took a galley of type and scrambled it to make a type specimen book. It has
            survived not only five centuries, but also the leap into electronic typesetting, remaining
            essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
            containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
            PageMaker including versions of Lorem Ipsum
          </p>
        } @else if(activeTab == 'profile') {
            <p class="mb-0 mt-3">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
              Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
              unknown printer took a galley of type and scrambled it to make a type specimen book. It has
              survived not only five centuries, but also the leap into electronic typesetting, remaining
              essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
              containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
              PageMaker including versions of Lorem Ipsum
            </p>
        } @else if(activeTab == 'contact') {
            <p class="mb-0 mt-3">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
              Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
              unknown printer took a galley of type and scrambled it to make a type specimen book. It has
              survived not only five centuries, but also the leap into electronic typesetting, remaining
              essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
              containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
              PageMaker including versions of Lorem Ipsum
            </p>
        }
    </div>
</div>

import { Component } from '@angular/core';

@Component({
  selector: 'app-tab',
  imports: [],
  templateUrl: './tab.component.html',
  styleUrl: './tab.component.scss'
})

export class TabComponent {

  public activeTab = 'profile';
  
  handleTab(value: string) {
    this.activeTab = value;
  }
}