sdga-ui 1.0.8 → 1.0.9

package/demo-angular/src/app/views/buttons/buttons.component.html

@@ -1,360 +0,0 @@
-<div class="container py-5">
-  <h1 class="display-4 mb-4">{{ 'buttons.title' | translate }}</h1>
-  <p class="lead mb-5">{{ 'buttons.subtitle' | translate }}</p>
-
-  <section class="demo-section">
-    <h2>{{ 'buttons.section_solid' | translate }}</h2>
-    <div class="component-showcase">
-      <button type="button" class="btn btn-primary">Primary</button>
-      <button type="button" class="btn btn-neutral">Neutral</button>
-      <button type="button" class="btn btn-secondary">Secondary</button>
-      <button type="button" class="btn btn-subtle">Subtle</button>
-      <button type="button" class="btn btn-transparent">Transparent</button>
-    </div>
-    <app-code-example [htmlCode]="solidButtonsCode"></app-code-example>
-    
-    <h3 class="mt-5">Destructive Variants</h3>
-    <div class="component-showcase">
-      <button type="button" class="btn btn-destructive-primary">Destructive Primary</button>
-      <button type="button" class="btn btn-destructive-secondary">Destructive Secondary</button>
-      <button type="button" class="btn btn-destructive-subtle">Destructive Subtle</button>
-      <button type="button" class="btn btn-destructive-transparent">Destructive Transparent</button>
-    </div>
-    <app-code-example [htmlCode]="destructiveButtonsCode"></app-code-example>
-    
-    <h3 class="mt-5">On Primary Context</h3>
-    <div class="on-primary p-4 rounded-2">
-    <div class="component-showcase mb-3">
-      <button type="button" class="btn btn-primary">Primary</button>
-      <button type="button" class="btn btn-neutral">Neutral</button>
-      <button type="button" class="btn btn-secondary">Secondary</button>
-      <button type="button" class="btn btn-outline-secondary">Outline Secondary</button>
-      <button type="button" class="btn btn-subtle">Subtle</button>
-      <button type="button" class="btn btn-transparent">Transparent</button>
-      <button type="button" class="btn btn-destructive-primary">Destructive Primary</button>
-      <button type="button" class="btn btn-destructive-secondary">Destructive Secondary</button>
-      <button type="button" class="btn btn-destructive-outline-secondary">Destructive Outline</button>
-      <button type="button" class="btn btn-destructive-subtle">Destructive Subtle</button>
-      <button type="button" class="btn btn-destructive-transparent">Destructive Transparent</button>
-    </div>
-    </div>
-    <app-code-example [htmlCode]="onPrimaryButtonsCode" [onColor]="'primary'"></app-code-example>
-    
-    <h3 class="mt-5">{{ 'buttons.section_outline' | translate }}</h3>
-    <div class="component-showcase">
-      <button type="button" class="btn btn-outline-secondary">{{ 'buttons.secondary' | translate }}</button>
-      <button type="button" class="btn btn-destructive-outline-secondary">{{ 'buttons.danger' | translate }}</button>
-    </div>
-    <app-code-example [htmlCode]="outlineButtonsCode"></app-code-example>
-    
-    <h3 class="mt-5">{{ 'buttons.section_sizes' | translate }}</h3>
-    <div class="component-showcase">
-      <button type="button" class="btn btn-primary btn-lg">{{ 'buttons.large' | translate }}</button>
-      <button type="button" class="btn btn-primary">{{ 'buttons.default' | translate }}</button>
-      <button type="button" class="btn btn-primary btn-sm">{{ 'buttons.small' | translate }}</button>
-      <button type="button" class="btn btn-primary btn-xs">{{ 'buttons.extra_small' | translate }}</button>
-    </div>
-    <app-code-example [htmlCode]="buttonSizesCode"></app-code-example>
-    
-    <h3 class="mt-5">{{ 'buttons.section_states' | translate }}</h3>
-    <div class="component-showcase mb-3">
-      <button type="button" class="btn btn-primary">{{ 'buttons.normal' | translate }}</button>
-      <button type="button" class="btn btn-primary active">{{ 'buttons.active' | translate }}</button>
-      <button type="button" class="btn btn-primary" disabled>{{ 'buttons.disabled' | translate }}</button>
-    </div>
-    <div class="component-showcase mb-3">
-      <button type="button" class="btn btn-neutral">{{ 'buttons.normal' | translate }}</button>
-      <button type="button" class="btn btn-neutral active">{{ 'buttons.active' | translate }}</button>
-      <button type="button" class="btn btn-neutral" disabled>{{ 'buttons.disabled' | translate }}</button>
-    </div>
-    <div class="component-showcase mb-3">
-      <button type="button" class="btn btn-secondary">{{ 'buttons.normal' | translate }}</button>
-      <button type="button" class="btn btn-secondary active">{{ 'buttons.active' | translate }}</button>
-      <button type="button" class="btn btn-secondary" disabled>{{ 'buttons.disabled' | translate }}</button>
-    </div>
-    <div class="component-showcase mb-3">
-      <button type="button" class="btn btn-subtle">{{ 'buttons.normal' | translate }}</button>
-      <button type="button" class="btn btn-subtle active">{{ 'buttons.active' | translate }}</button>
-      <button type="button" class="btn btn-subtle" disabled>{{ 'buttons.disabled' | translate }}</button>
-    </div>
-    <div class="component-showcase mb-3">
-      <button type="button" class="btn btn-transparent">{{ 'buttons.normal' | translate }}</button>
-      <button type="button" class="btn btn-transparent active">{{ 'buttons.active' | translate }}</button>
-      <button type="button" class="btn btn-transparent" disabled>{{ 'buttons.disabled' | translate }}</button>
-    </div>
-    <div class="component-showcase mb-3">
-      <button type="button" class="btn btn-destructive-primary">{{ 'buttons.normal' | translate }}</button>
-      <button type="button" class="btn btn-destructive-primary active">{{ 'buttons.active' | translate }}</button>
-      <button type="button" class="btn btn-destructive-primary" disabled>{{ 'buttons.disabled' | translate }}</button>
-    </div>
-    <div class="component-showcase mb-3">
-      <button type="button" class="btn btn-destructive-secondary">{{ 'buttons.normal' | translate }}</button>
-      <button type="button" class="btn btn-destructive-secondary active">{{ 'buttons.active' | translate }}</button>
-      <button type="button" class="btn btn-destructive-secondary" disabled>{{ 'buttons.disabled' | translate }}</button>
-    </div>
-    <div class="component-showcase mb-3">
-      <button type="button" class="btn btn-destructive-subtle">{{ 'buttons.normal' | translate }}</button>
-      <button type="button" class="btn btn-destructive-subtle active">{{ 'buttons.active' | translate }}</button>
-      <button type="button" class="btn btn-destructive-subtle" disabled>{{ 'buttons.disabled' | translate }}</button>
-    </div>
-    <div class="component-showcase">
-      <button type="button" class="btn btn-destructive-transparent">{{ 'buttons.normal' | translate }}</button>
-      <button type="button" class="btn btn-destructive-transparent active">{{ 'buttons.active' | translate }}</button>
-      <button type="button" class="btn btn-destructive-transparent" disabled>{{ 'buttons.disabled' | translate }}</button>
-    </div>
-    <app-code-example [htmlCode]="buttonStatesCode"></app-code-example>
-    
-    <h3 class="mt-5">{{ 'buttons.section_icons' | translate }}</h3>
-    <div class="component-showcase mb-3">
-      <button type="button" class="btn btn-primary btn-icon">
-        <i class="bi bi-download"></i>{{ 'buttons.download' | translate }}
-      </button>
-      <button type="button" class="btn btn-neutral btn-icon">
-        <i class="bi bi-upload"></i>{{ 'buttons.upload' | translate }}
-      </button>
-      <button type="button" class="btn btn-secondary btn-icon">
-        <i class="bi bi-pencil"></i>{{ 'buttons.edit' | translate }}
-      </button>
-      <button type="button" class="btn btn-subtle btn-icon">
-        <i class="bi bi-eye"></i>View
-      </button>
-      <button type="button" class="btn btn-transparent btn-icon">
-        <i class="bi bi-link"></i>Link
-      </button>
-      <button type="button" class="btn btn-destructive-primary btn-icon">
-        <i class="bi bi-trash"></i>{{ 'buttons.delete' | translate }}
-      </button>
-      <button type="button" class="btn btn-destructive-secondary btn-icon">
-        <i class="bi bi-x-circle"></i>Cancel
-      </button>
-    </div>
-    <app-code-example [htmlCode]="buttonIconLeftCode"></app-code-example>
-    <div class="component-showcase mb-3">
-      <button type="button" class="btn btn-primary btn-icon">
-        {{ 'buttons.save' | translate }}<i class="bi bi-check"></i>
-      </button>
-      <button type="button" class="btn btn-neutral btn-icon">
-        {{ 'buttons.search' | translate }}<i class="bi bi-search"></i>
-      </button>
-      <button type="button" class="btn btn-secondary btn-icon">
-        {{ 'buttons.settings' | translate }}<i class="bi bi-gear"></i>
-      </button>
-    </div>
-    <app-code-example [htmlCode]="buttonIconRightCode"></app-code-example>
-    <div class="component-showcase mb-3">
-      <button type="button" class="btn btn-primary btn-icon btn-sm">
-        <i class="bi bi-plus-circle"></i>{{ 'buttons.add' | translate }}
-      </button>
-      <button type="button" class="btn btn-outline-secondary btn-icon">
-        <i class="bi bi-arrow-right"></i>{{ 'buttons.next' | translate }}
-      </button>
-      <button type="button" class="btn btn-outline-secondary btn-icon">
-        <i class="bi bi-arrow-left"></i>{{ 'buttons.previous' | translate }}
-      </button>
-    </div>
-    
-    <h3 class="mt-5">{{ 'buttons.section_icon_only' | translate }}</h3>
-    <div class="component-showcase mb-3">
-      <button type="button" class="btn btn-primary btn-icon" aria-label="{{ 'buttons.download' | translate }}">
-        <i class="bi bi-download"></i>
-      </button>
-      <button type="button" class="btn btn-neutral btn-icon" aria-label="{{ 'buttons.upload' | translate }}">
-        <i class="bi bi-upload"></i>
-      </button>
-      <button type="button" class="btn btn-secondary btn-icon" aria-label="{{ 'buttons.edit' | translate }}">
-        <i class="bi bi-pencil"></i>
-      </button>
-      <button type="button" class="btn btn-destructive-primary btn-icon" aria-label="{{ 'buttons.delete' | translate }}">
-        <i class="bi bi-trash"></i>
-      </button>
-    </div>
-    <div class="component-showcase mb-3">
-      <button type="button" class="btn btn-outline-secondary btn-icon" aria-label="{{ 'buttons.search' | translate }}">
-        <i class="bi bi-search"></i>
-      </button>
-      <button type="button" class="btn btn-outline-secondary btn-icon" aria-label="{{ 'buttons.settings' | translate }}">
-        <i class="bi bi-gear"></i>
-      </button>
-      <button type="button" class="btn btn-outline-secondary btn-icon" aria-label="{{ 'buttons.add' | translate }}">
-        <i class="bi bi-plus-circle"></i>
-      </button>
-    </div>
-    <div class="component-showcase">
-      <button type="button" class="btn btn-primary btn-icon" aria-label="{{ 'buttons.search' | translate }}">
-        <i class="bi bi-search"></i>
-      </button>
-      <button type="button" class="btn btn-neutral btn-icon btn-sm" aria-label="{{ 'buttons.settings' | translate }}">
-        <i class="bi bi-gear"></i>
-      </button>
-      <button type="button" class="btn btn-secondary btn-icon btn-xs" aria-label="{{ 'buttons.add' | translate }}">
-        <i class="bi bi-plus-circle"></i>
-      </button>
-    </div>
-    <app-code-example [htmlCode]="buttonIconOnlyCode"></app-code-example>
-    
-    <h3 class="mt-5">{{ 'buttons.section_dropdown' | translate }}</h3>
-    <div class="component-showcase mb-3">
-      <div class="dropdown">
-        <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-          {{ 'buttons.dropdown_primary' | translate }}
-        </button>
-        <ul class="dropdown-menu">
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_action' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_another' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_something' | translate }}</button></li>
-        </ul>
-      </div>
-      
-      <div class="dropdown">
-        <button class="btn btn-neutral dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-          {{ 'buttons.dropdown_neutral' | translate }}
-        </button>
-        <ul class="dropdown-menu">
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_action' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_another' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_something' | translate }}</button></li>
-        </ul>
-      </div>
-      
-      <div class="dropdown">
-        <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-          {{ 'buttons.dropdown_secondary' | translate }}
-        </button>
-        <ul class="dropdown-menu">
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_action' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_another' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_something' | translate }}</button></li>
-        </ul>
-      </div>
-      
-      <div class="dropdown">
-        <button class="btn btn-subtle dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-          Subtle
-        </button>
-        <ul class="dropdown-menu">
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_action' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_another' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_something' | translate }}</button></li>
-        </ul>
-      </div>
-      
-      <div class="dropdown">
-        <button class="btn btn-transparent dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-          Transparent
-        </button>
-        <ul class="dropdown-menu">
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_action' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_another' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_something' | translate }}</button></li>
-        </ul>
-      </div>
-      
-      <div class="dropdown">
-        <button class="btn btn-destructive-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-          {{ 'buttons.dropdown_danger' | translate }}
-        </button>
-        <ul class="dropdown-menu">
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_action' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_another' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_something' | translate }}</button></li>
-        </ul>
-      </div>
-    </div>
-    <app-code-example [htmlCode]="dropdownButtonCode"></app-code-example>
-    
-    <div class="component-showcase mb-3">
-      <div class="dropdown">
-        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-          {{ 'buttons.dropdown_outline' | translate }}
-        </button>
-        <ul class="dropdown-menu">
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_action' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_another' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_something' | translate }}</button></li>
-        </ul>
-      </div>
-      
-      <div class="dropdown">
-        <button class="btn btn-destructive-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-          {{ 'buttons.dropdown_outline' | translate }}
-        </button>
-        <ul class="dropdown-menu">
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_action' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_another' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_something' | translate }}</button></li>
-        </ul>
-      </div>
-    </div>
-    
-    <div class="component-showcase">
-      <div class="dropdown">
-        <button class="btn btn-primary dropdown-toggle btn-lg" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-          {{ 'buttons.large' | translate }}
-        </button>
-        <ul class="dropdown-menu">
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_action' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_another' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_something' | translate }}</button></li>
-        </ul>
-      </div>
-      
-      <div class="dropdown">
-        <button class="btn btn-neutral dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-          {{ 'buttons.default' | translate }}
-        </button>
-        <ul class="dropdown-menu">
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_action' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_another' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_something' | translate }}</button></li>
-        </ul>
-      </div>
-      
-      <div class="dropdown">
-        <button class="btn btn-secondary dropdown-toggle btn-sm" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-          {{ 'buttons.small' | translate }}
-        </button>
-        <ul class="dropdown-menu">
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_action' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_another' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_something' | translate }}</button></li>
-        </ul>
-      </div>
-    </div>
-    <app-code-example [htmlCode]="dropdownSizesCode"></app-code-example>
-    <div class="component-showcase">
-      <div class="dropdown">
-        <button class="btn btn-primary dropdown-toggle btn-lg" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-          <i class="bi bi-gear"></i>
-        </button>
-        <ul class="dropdown-menu">
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_action' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_another' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_something' | translate }}</button></li>
-        </ul>
-      </div>
-      
-      <div class="dropdown">
-        <button class="btn btn-neutral dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-          <i class="bi bi-gear"></i>
-        </button>
-        <ul class="dropdown-menu">
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_action' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_another' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_something' | translate }}</button></li>
-        </ul>
-      </div>
-      
-      <div class="dropdown">
-        <button class="btn btn-secondary dropdown-toggle btn-sm" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-          <i class="bi bi-gear"></i>
-        </button>
-        <ul class="dropdown-menu">
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_action' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_another' | translate }}</button></li>
-          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_something' | translate }}</button></li>
-        </ul>
-      </div>
-    </div>
-    <app-code-example [htmlCode]="iconDropdownCode"></app-code-example>
-  </section>
-</div>

package/demo-angular/src/app/views/buttons/buttons.component.scss

@@ -1,11 +0,0 @@
-.demo-section {
-  margin-bottom: 4rem;
-}
-
-.component-showcase {
-  display: flex;
-  gap: 1rem;
-  flex-wrap: wrap;
-  align-items: center;
-}
-

package/demo-angular/src/app/views/buttons/buttons.component.ts

@@ -1,225 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { TranslateModule } from '@ngx-translate/core';
-import { CodeExampleComponent } from '../../shared/code-example/code-example.component';
-
-@Component({
-  selector: 'app-buttons',
-  imports: [TranslateModule, CodeExampleComponent],
-  templateUrl: './buttons.component.html',
-  styleUrl: './buttons.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class ButtonsComponent {
-  solidButtonsCode = `<button type="button" class="btn btn-primary">Primary</button>
-<button type="button" class="btn btn-neutral">Neutral</button>
-<button type="button" class="btn btn-secondary">Secondary</button>
-<button type="button" class="btn btn-subtle">Subtle</button>
-<button type="button" class="btn btn-transparent">Transparent</button>`;
-
-  destructiveButtonsCode = `<button type="button" class="btn btn-destructive-primary">Destructive Primary</button>
-<button type="button" class="btn btn-destructive-secondary">Destructive Secondary</button>
-<button type="button" class="btn btn-destructive-subtle">Destructive Subtle</button>
-<button type="button" class="btn btn-destructive-transparent">Destructive Transparent</button>`;
-
-  onPrimaryButtonsCode = `<button type="button" class="btn btn-primary">Primary</button>
-<button type="button" class="btn btn-neutral">Neutral</button>
-<button type="button" class="btn btn-secondary">Secondary</button>
-<button type="button" class="btn btn-outline-secondary">Outline Secondary</button>
-<button type="button" class="btn btn-subtle">Subtle</button>
-<button type="button" class="btn btn-transparent">Transparent</button>
-
-<button type="button" class="btn btn-destructive-primary">Destructive Primary</button>
-<button type="button" class="btn btn-destructive-secondary">Destructive Secondary</button>
-<button type="button" class="btn btn-destructive-outline-secondary">Destructive Outline</button>
-<button type="button" class="btn btn-destructive-subtle">Destructive Subtle</button>
-<button type="button" class="btn btn-destructive-transparent">Destructive Transparent</button>`;
-
-  outlineButtonsCode = `<button type="button" class="btn btn-outline-secondary">Secondary</button>
-<button type="button" class="btn btn-destructive-outline-secondary">Destructive</button>`;
-
-  buttonSizesCode = `<button type="button" class="btn btn-primary btn-lg">Large</button>
-<button type="button" class="btn btn-primary">Default</button>
-<button type="button" class="btn btn-primary btn-sm">Small</button>
-<button type="button" class="btn btn-primary btn-xs">Extra Small</button>`;
-
-  buttonStatesCode = `<button type="button" class="btn btn-primary">Normal</button>
-<button type="button" class="btn btn-primary active">Active</button>
-<button type="button" class="btn btn-primary" disabled>Disabled</button>`;
-
-  buttonIconLeftCode = `<button type="button" class="btn btn-primary btn-icon">
-  <i class="bi bi-download"></i>Download
-</button>
-<button type="button" class="btn btn-neutral btn-icon">
-  <i class="bi bi-upload"></i>Upload
-</button>
-<button type="button" class="btn btn-secondary btn-icon">
-  <i class="bi bi-pencil"></i>Edit
-</button>
-<button type="button" class="btn btn-subtle btn-icon">
-  <i class="bi bi-eye"></i>View
-</button>
-<button type="button" class="btn btn-transparent btn-icon">
-  <i class="bi bi-link"></i>Link
-</button>
-<button type="button" class="btn btn-destructive-primary btn-icon">
-  <i class="bi bi-trash"></i>Delete
-</button>
-<button type="button" class="btn btn-destructive-secondary btn-icon">
-  <i class="bi bi-x-circle"></i>Cancel
-</button>`;
-
-  buttonIconRightCode = `<button type="button" class="btn btn-primary btn-icon">
-  Save<i class="bi bi-check"></i>
-</button>
-<button type="button" class="btn btn-neutral btn-icon">
-  Search<i class="bi bi-search"></i>
-</button>
-<button type="button" class="btn btn-secondary btn-icon">
-  Settings<i class="bi bi-gear"></i>
-</button>`;
-
-  buttonIconOnlyCode = `<button type="button" class="btn btn-primary btn-icon" aria-label="Download">
-  <i class="bi bi-download"></i>
-</button>
-<button type="button" class="btn btn-neutral btn-icon" aria-label="Upload">
-  <i class="bi bi-upload"></i>
-</button>
-<button type="button" class="btn btn-secondary btn-icon" aria-label="Edit">
-  <i class="bi bi-pencil"></i>
-</button>
-<button type="button" class="btn btn-destructive-primary btn-icon" aria-label="Delete">
-  <i class="bi bi-trash"></i>
-</button>`;
-
-  dropdownButtonCode = `<div class="dropdown">
-  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-    Dropdown Primary
-  </button>
-  <ul class="dropdown-menu">
-    <li><button class="dropdown-item" type="button">Action</button></li>
-    <li><button class="dropdown-item" type="button">Another action</button></li>
-    <li><button class="dropdown-item" type="button">Something else here</button></li>
-  </ul>
-</div>
-
-<div class="dropdown">
-  <button class="btn btn-neutral dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-    Dropdown Neutral
-  </button>
-  <ul class="dropdown-menu">
-    <li><button class="dropdown-item" type="button">Action</button></li>
-    <li><button class="dropdown-item" type="button">Another action</button></li>
-    <li><button class="dropdown-item" type="button">Something else here</button></li>
-  </ul>
-</div>
-
-<div class="dropdown">
-  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-    Dropdown Secondary
-  </button>
-  <ul class="dropdown-menu">
-    <li><button class="dropdown-item" type="button">Action</button></li>
-    <li><button class="dropdown-item" type="button">Another action</button></li>
-    <li><button class="dropdown-item" type="button">Something else here</button></li>
-  </ul>
-</div>
-
-<div class="dropdown">
-  <button class="btn btn-subtle dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-    Subtle
-  </button>
-  <ul class="dropdown-menu">
-    <li><button class="dropdown-item" type="button">Action</button></li>
-    <li><button class="dropdown-item" type="button">Another action</button></li>
-    <li><button class="dropdown-item" type="button">Something else here</button></li>
-  </ul>
-</div>
-
-<div class="dropdown">
-  <button class="btn btn-transparent dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-    Transparent
-  </button>
-  <ul class="dropdown-menu">
-    <li><button class="dropdown-item" type="button">Action</button></li>
-    <li><button class="dropdown-item" type="button">Another action</button></li>
-    <li><button class="dropdown-item" type="button">Something else here</button></li>
-  </ul>
-</div>
-
-<div class="dropdown">
-  <button class="btn btn-destructive-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-    Destructive Primary
-  </button>
-  <ul class="dropdown-menu">
-    <li><button class="dropdown-item" type="button">Action</button></li>
-    <li><button class="dropdown-item" type="button">Another action</button></li>
-    <li><button class="dropdown-item" type="button">Something else here</button></li>
-  </ul>
-</div>`;
-
-  dropdownSizesCode = `<div class="dropdown">
-  <button class="btn btn-primary dropdown-toggle btn-lg" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-    Large
-  </button>
-  <ul class="dropdown-menu">
-    <li><button class="dropdown-item" type="button">Action</button></li>
-    <li><button class="dropdown-item" type="button">Another action</button></li>
-    <li><button class="dropdown-item" type="button">Something else here</button></li>
-  </ul>
-</div>
-
-<div class="dropdown">
-  <button class="btn btn-neutral dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-    Default
-  </button>
-  <ul class="dropdown-menu">
-    <li><button class="dropdown-item" type="button">Action</button></li>
-    <li><button class="dropdown-item" type="button">Another action</button></li>
-    <li><button class="dropdown-item" type="button">Something else here</button></li>
-  </ul>
-</div>
-
-<div class="dropdown">
-  <button class="btn btn-secondary dropdown-toggle btn-sm" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-    Small
-  </button>
-  <ul class="dropdown-menu">
-    <li><button class="dropdown-item" type="button">Action</button></li>
-    <li><button class="dropdown-item" type="button">Another action</button></li>
-    <li><button class="dropdown-item" type="button">Something else here</button></li>
-  </ul>
-</div>`;
-
-  iconDropdownCode = `<div class="dropdown">
-  <button class="btn btn-primary dropdown-toggle btn-lg" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-    <i class="bi bi-gear"></i>
-  </button>
-  <ul class="dropdown-menu">
-    <li><button class="dropdown-item" type="button">Action</button></li>
-    <li><button class="dropdown-item" type="button">Another action</button></li>
-    <li><button class="dropdown-item" type="button">Something else here</button></li>
-  </ul>
-</div>
-
-<div class="dropdown">
-  <button class="btn btn-neutral dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-    <i class="bi bi-gear"></i>
-  </button>
-  <ul class="dropdown-menu">
-    <li><button class="dropdown-item" type="button">Action</button></li>
-    <li><button class="dropdown-item" type="button">Another action</button></li>
-    <li><button class="dropdown-item" type="button">Something else here</button></li>
-  </ul>
-</div>
-
-<div class="dropdown">
-  <button class="btn btn-secondary dropdown-toggle btn-sm" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-    <i class="bi bi-gear"></i>
-  </button>
-  <ul class="dropdown-menu">
-    <li><button class="dropdown-item" type="button">Action</button></li>
-    <li><button class="dropdown-item" type="button">Another action</button></li>
-    <li><button class="dropdown-item" type="button">Something else here</button></li>
-  </ul>
-</div>`;
-}