@design-factory/angular 21.1.0 → 22.0.0-next.0

package/.ai/docs/demos/alert/dismissal/alert-dismissal.ts

@@ -0,0 +1,27 @@
+import { Component, signal } from '@angular/core';
+import { DfAlert, type DfAlertType } from '@design-factory/angular/alert';
+import { DfButton } from '@design-factory/angular/button';
+
+const ALERTS: { type: DfAlertType; message: string }[] = [
+  { type: 'success', message: 'Profile saved successfully.' },
+  { type: 'info', message: 'A new fare is available for this itinerary.' },
+  { type: 'warning', message: 'Some traveler details still need review.' },
+  { type: 'danger', message: 'Ticketing failed. Please try again.' }
+];
+
+@Component({
+  selector: 'df-demo-alert-dismissal',
+  templateUrl: './alert-dismissal.html',
+  imports: [DfAlert, DfButton]
+})
+export class DfDemoAlertDismissal {
+  readonly alerts = signal([...ALERTS]);
+
+  close(type: DfAlertType) {
+    this.alerts.update((alerts) => alerts.filter((alert) => alert.type !== type));
+  }
+
+  reset() {
+    this.alerts.set([...ALERTS]);
+  }
+}

package/.ai/docs/demos/alert/expandable/alert-expandable.html

@@ -0,0 +1,9 @@
+<df-alert class="mb-5" expandable [(expanded)]="expanded">
+  <df-alert-title>Warning! Check the booking details before you continue.</df-alert-title>
+  <df-alert-details>
+    The traveler profile was updated after the itinerary was created. Review passenger data, SSRs and contact
+    information before issuing the ticket.
+  </df-alert-details>
+</df-alert>
+
+<pre>Expanded: {{ expanded }}</pre>

package/.ai/docs/demos/alert/expandable/alert-expandable.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { DfAlert, DfAlertDetails, DfAlertTitle } from '@design-factory/angular/alert';
+
+@Component({
+  selector: 'df-demo-alert-expandable',
+  templateUrl: './alert-expandable.html',
+  imports: [DfAlert, DfAlertTitle, DfAlertDetails]
+})
+export class DfDemoAlertExpandable {
+  expanded = false;
+}

package/.ai/docs/demos/button/basic/button-basic.html

@@ -0,0 +1,4 @@
+<div class="d-flex flex-wrap gap-3">
+  <button dfButton>Continue</button>
+  <button dfButton appearance="outline">Cancel</button>
+</div>

package/.ai/docs/demos/button/basic/button-basic.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { DfButton } from '@design-factory/angular/button';
+
+@Component({
+  selector: 'df-demo-button-basic',
+  templateUrl: './button-basic.html',
+  imports: [DfButton]
+})
+export class DfDemoButtonBasic {}

package/.ai/docs/demos/button/disabled/button-disabled.html

@@ -0,0 +1,18 @@
+<div class="d-grid gap-4">
+  <div class="d-flex flex-wrap gap-3">
+    <button dfButton [disabled]="disabled()">Save changes</button>
+    <a dfButton routerLink="/settings" appearance="outline" [disabled]="disabled()">Open settings</a>
+  </div>
+
+  <div class="form-check form-switch">
+    <label class="form-check-label">
+      <input
+        class="form-check-input me-3"
+        type="checkbox"
+        [checked]="disabled()"
+        (change)="disabled.set($any($event.target).checked)"
+      />
+      Disabled
+    </label>
+  </div>
+</div>

package/.ai/docs/demos/button/disabled/button-disabled.ts

@@ -0,0 +1,12 @@
+import { Component, signal } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { DfButton } from '@design-factory/angular/button';
+
+@Component({
+  selector: 'df-demo-button-disabled',
+  templateUrl: './button-disabled.html',
+  imports: [DfButton, RouterLink]
+})
+export class DfDemoButtonDisabled {
+  readonly disabled = signal(true);
+}

package/.ai/docs/demos/button/icons/button-icons.html

@@ -0,0 +1,17 @@
+<div class="d-flex flex-wrap gap-3">
+  <button dfButton>Text only</button>
+
+  <button dfButton appearance="outline">
+    <df-icon class="fa-light fa-download" />
+    Download
+  </button>
+
+  <button dfButton appearance="outline">
+    Next
+    <df-icon class="fa-light fa-arrow-right" />
+  </button>
+
+  <button dfIconButton appearance="text" aria-label="Close" class="fa-light fa-xmark"></button>
+  <button dfIconButton appearance="outline" aria-label="Refresh" class="fa-light fa-rotate-right"></button>
+  <button dfIconButton variant="danger" aria-label="Delete" class="fa-light fa-trash"></button>
+</div>

package/.ai/docs/demos/button/icons/button-icons.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { DfButton, DfIconButton } from '@design-factory/angular/button';
+import { DfIcon } from '@design-factory/angular/icon';
+
+@Component({
+  selector: 'df-demo-button-icons',
+  templateUrl: './button-icons.html',
+  imports: [DfButton, DfIconButton, DfIcon]
+})
+export class DfDemoButtonIcons {}

package/.ai/docs/demos/button/surfaces/button-surfaces.html

@@ -0,0 +1,13 @@
+<div class="d-grid gap-4">
+  <div class="d-flex flex-wrap gap-3 p-5 rounded bg-neutral-soft">
+    <button dfButton appearance="outline">Outline</button>
+    <button dfButton appearance="outline" transparent>Transparent outline</button>
+    <button dfButton appearance="text" transparent>Transparent text</button>
+  </div>
+
+  <div class="d-flex flex-wrap gap-3 p-5 rounded bg-alt-body">
+    <button dfButton mirror>Mirror primary</button>
+    <button dfButton appearance="outline" mirror>Mirror outline</button>
+    <button dfButton appearance="text" mirror transparent>Mirror text</button>
+  </div>
+</div>

package/.ai/docs/demos/button/surfaces/button-surfaces.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { DfButton } from '@design-factory/angular/button';
+
+@Component({
+  selector: 'df-demo-button-surfaces',
+  templateUrl: './button-surfaces.html',
+  imports: [DfButton]
+})
+export class DfDemoButtonSurfaces {}

package/.ai/docs/demos/button/variants/button-variants.html

@@ -0,0 +1,49 @@
+<div class="d-grid gap-4">
+  <div class="d-flex flex-wrap gap-3">
+    <button dfButton>Primary solid</button>
+    <button dfButton appearance="outline">Primary outline</button>
+    <button dfButton appearance="text">Primary text</button>
+  </div>
+
+  <div class="d-flex flex-wrap gap-3">
+    <button dfButton variant="danger">Danger solid</button>
+    <button dfButton variant="danger" appearance="outline">Danger outline</button>
+    <button dfButton variant="danger" appearance="text">Danger text</button>
+  </div>
+
+  <div class="d-flex flex-wrap gap-3">
+    <button dfIconButton aria-label="Primary solid" class="fa-light fa-gear"></button>
+    <button dfIconButton appearance="outline" aria-label="Primary outline" class="fa-light fa-gear"></button>
+    <button dfIconButton appearance="text" aria-label="Primary text" class="fa-light fa-gear"></button>
+  </div>
+
+  <div class="d-flex flex-wrap gap-3">
+    <button dfIconButton variant="neutral" aria-label="Neutral solid" class="fa-light fa-gear"></button>
+    <button
+      dfIconButton
+      variant="neutral"
+      appearance="outline"
+      aria-label="Neutral outline"
+      class="fa-light fa-gear"
+    ></button>
+    <button
+      dfIconButton
+      variant="neutral"
+      appearance="text"
+      aria-label="Neutral text"
+      class="fa-light fa-gear"
+    ></button>
+  </div>
+
+  <div class="d-flex flex-wrap gap-3">
+    <button dfIconButton variant="danger" aria-label="Danger solid" class="fa-light fa-trash"></button>
+    <button
+      dfIconButton
+      variant="danger"
+      appearance="outline"
+      aria-label="Danger outline"
+      class="fa-light fa-trash"
+    ></button>
+    <button dfIconButton variant="danger" appearance="text" aria-label="Danger text" class="fa-light fa-trash"></button>
+  </div>
+</div>

package/.ai/docs/demos/button/variants/button-variants.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { DfButton, DfIconButton } from '@design-factory/angular/button';
+
+@Component({
+  selector: 'df-demo-button-variants',
+  templateUrl: './button-variants.html',
+  imports: [DfButton, DfIconButton]
+})
+export class DfDemoButtonVariants {}

package/.ai/docs/demos/buttongroup/basic/buttongroup-basic.html

@@ -0,0 +1,6 @@
+<df-button-group aria-label="Basic example">
+  <button dfButton appearance="solid">Main Action</button>
+  <button dfButton>Left</button>
+  <button dfButton>Middle</button>
+  <button dfButton>Right</button>
+</df-button-group>

package/.ai/docs/demos/buttongroup/basic/buttongroup-basic.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { DfButton } from '@design-factory/angular/button';
+import { DfButtonGroup } from '@design-factory/angular/buttongroup';
+
+@Component({
+  selector: 'df-demo-buttongroup-basic',
+  templateUrl: './buttongroup-basic.html',
+  imports: [DfButton, DfButtonGroup]
+})
+export class DfDemoButtonGroupBasic {}

package/.ai/docs/demos/buttongroup/disabled/buttongroup-disabled.html

@@ -0,0 +1,6 @@
+<df-button-group aria-label="Disabled example">
+  <button dfButton appearance="solid" disabled>Main Action</button>
+  <button dfButton disabled>Left</button>
+  <button dfButton disabled>Middle</button>
+  <button dfButton disabled>Right</button>
+</df-button-group>

package/.ai/docs/demos/buttongroup/disabled/buttongroup-disabled.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { DfButton } from '@design-factory/angular/button';
+import { DfButtonGroup } from '@design-factory/angular/buttongroup';
+
+@Component({
+  selector: 'df-demo-buttongroup-disabled',
+  templateUrl: './buttongroup-disabled.html',
+  imports: [DfButton, DfButtonGroup]
+})
+export class DfDemoButtonGroupDisabled {}

package/.ai/docs/demos/buttongroup/mirror/buttongroup-mirror.html

@@ -0,0 +1,8 @@
+<div class="p-5 rounded bg-alt-body">
+  <df-button-group mirror aria-label="Mirror example">
+    <button dfButton appearance="solid">Main Action</button>
+    <button dfButton>Left</button>
+    <button dfButton>Middle</button>
+    <button dfButton>Right</button>
+  </df-button-group>
+</div>

package/.ai/docs/demos/buttongroup/mirror/buttongroup-mirror.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { DfButton } from '@design-factory/angular/button';
+import { DfButtonGroup } from '@design-factory/angular/buttongroup';
+
+@Component({
+  selector: 'df-demo-buttongroup-mirror',
+  templateUrl: './buttongroup-mirror.html',
+  imports: [DfButton, DfButtonGroup]
+})
+export class DfDemoButtonGroupMirror {}

package/.ai/docs/demos/buttongroup/orientation/buttongroup-orientation.html

@@ -0,0 +1,19 @@
+<h3>Horizontal</h3>
+
+<df-button-group orientation="horizontal" aria-label="Horizontal example">
+  <button dfButton appearance="solid">Main Action</button>
+  <button dfButton>Top</button>
+  <button dfButton>Middle</button>
+  <button dfButton>Bottom</button>
+</df-button-group>
+
+<hr />
+
+<h3>Vertical</h3>
+
+<df-button-group orientation="vertical" aria-label="Vertical example">
+  <button dfButton appearance="solid">Main Action</button>
+  <button dfButton>Top</button>
+  <button dfButton>Middle</button>
+  <button dfButton>Bottom</button>
+</df-button-group>

package/.ai/docs/demos/buttongroup/orientation/buttongroup-orientation.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { DfButton } from '@design-factory/angular/button';
+import { DfButtonGroup } from '@design-factory/angular/buttongroup';
+
+@Component({
+  selector: 'df-demo-buttongroup-orientation',
+  templateUrl: './buttongroup-orientation.html',
+  imports: [DfButton, DfButtonGroup]
+})
+export class DfDemoButtonGroupOrientation {}

package/.ai/docs/demos/buttongroup/sizing/buttongroup-sizing.html

@@ -0,0 +1,19 @@
+<div class="d-flex flex-wrap gap-4">
+  <df-button-group size="sm" aria-label="Small example">
+    <button dfButton>Left</button>
+    <button dfButton>Middle</button>
+    <button dfButton>Right</button>
+  </df-button-group>
+
+  <df-button-group aria-label="Medium example">
+    <button dfButton>Left</button>
+    <button dfButton>Middle</button>
+    <button dfButton>Right</button>
+  </df-button-group>
+
+  <df-button-group size="lg" aria-label="Large example">
+    <button dfButton>Left</button>
+    <button dfButton>Middle</button>
+    <button dfButton>Right</button>
+  </df-button-group>
+</div>

package/.ai/docs/demos/buttongroup/sizing/buttongroup-sizing.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { DfButton } from '@design-factory/angular/button';
+import { DfButtonGroup } from '@design-factory/angular/buttongroup';
+
+@Component({
+  selector: 'df-demo-buttongroup-sizing',
+  templateUrl: './buttongroup-sizing.html',
+  imports: [DfButton, DfButtonGroup]
+})
+export class DfDemoButtonGroupSizing {}

package/.ai/docs/demos/drawer/inline/drawer-inline-basic.html

@@ -0,0 +1,46 @@
+<div class="p-7">
+  <div class="d-flex align-items-center">
+    <label for="drawerPosition" class="me-3">Position:</label>
+    <select id="drawerPosition" [formField]="drawerPositionForm" class="w-auto form-select">
+      <option value="inline-start">inline-start</option>
+      <option value="inline-end">inline-end</option>
+      <option value="block-start">block-start</option>
+      <option value="block-end">block-end</option>
+    </select>
+  </div>
+
+  <button dfButton class="mt-3" (click)="toggleDrawer()">Toggle Drawer</button>
+</div>
+
+<div class="d-flex demo-inline-drawer" [class.flex-column]="drawerPosition().includes('block')">
+  <df-drawer
+    #drawer
+    [position]="drawerPosition()"
+    configuration="inline"
+    [(visible)]="drawerVisible"
+    [style.order]="drawerPosition().endsWith('end') ? 2 : 1"
+    [size]="drawerPosition().startsWith('inline') ? 300 : 200"
+  >
+    <ng-template dfDrawerHeader>
+      <h2>Title goes here</h2>
+      <button
+        dfIconButton
+        appearance="text"
+        class="ms-auto fa-xmark"
+        (click)="drawer.close()"
+        aria-label="Close Drawer"
+      ></button>
+    </ng-template>
+    <ng-template dfDrawerFooter>
+      <button dfButton appearance="outline" class="m-3">Secondary</button>
+      <button dfButton class="m-3">Primary</button>
+    </ng-template>
+  </df-drawer>
+
+  <div
+    class="flex-grow-1 p-7"
+    [style.order]="drawerPosition() === 'inline-end' || drawerPosition() === 'block-end' ? 1 : 2"
+  >
+    <h6>Main Page Content</h6>
+  </div>
+</div>

package/.ai/docs/demos/drawer/inline/drawer-inline-basic.ts

@@ -0,0 +1,33 @@
+import { Component, signal } from '@angular/core';
+import { DfButton, DfIconButton } from '@design-factory/angular/button';
+import {
+  DfDrawer,
+  DfDrawerFooterTemplate,
+  DfDrawerHeaderTemplate,
+  DfDrawerPosition
+} from '@design-factory/angular/drawer';
+import { FormField, form } from '@angular/forms/signals';
+
+@Component({
+  selector: 'df-demo-drawer-inline-basic',
+  templateUrl: './drawer-inline-basic.html',
+  imports: [DfDrawer, DfDrawerHeaderTemplate, DfDrawerFooterTemplate, FormField, DfButton, DfIconButton],
+  styles: `
+    .demo-inline-drawer {
+      padding: 1rem;
+    }
+
+    .main-content {
+      background: var(--df-color-primary-main-active-background);
+    }
+  `
+})
+export class DfDemoDrawerInlineBasic {
+  readonly drawerPosition = signal<DfDrawerPosition>('inline-start');
+  readonly drawerPositionForm = form(this.drawerPosition);
+  readonly drawerVisible = signal(false);
+
+  toggleDrawer() {
+    this.drawerVisible.update((v) => !v);
+  }
+}

package/.ai/docs/demos/drawer/overlay/drawer-overlay-basic.html

@@ -0,0 +1,30 @@
+<df-drawer #drawer resizable [position]="drawerPosition()">
+  <ng-template dfDrawerHeader>
+    <h2>Title goes here</h2>
+    <button
+      dfIconButton
+      appearance="text"
+      class="ms-auto fa-xmark"
+      (click)="drawer.close()"
+      aria-label="Close Drawer"
+    ></button>
+  </ng-template>
+
+  <ng-template dfDrawerFooter>
+    <button dfButton appearance="outline" class="m-3">Secondary</button>
+    <button dfButton class="m-3">Primary</button>
+  </ng-template>
+</df-drawer>
+<div class="p-7">
+  <div class="d-flex align-items-center">
+    <label for="drawerPosition" class="me-3">Position:</label>
+    <select id="drawerPosition" [formField]="drawerPositionForm" class="w-auto form-select">
+      <option value="inline-start">inline-start</option>
+      <option value="inline-end">inline-end</option>
+      <option value="block-start">block-start</option>
+      <option value="block-end">block-end</option>
+    </select>
+  </div>
+
+  <button dfButton class="mt-3" (click)="drawer.open()">Toggle Drawer</button>
+</div>

package/.ai/docs/demos/drawer/overlay/drawer-overlay-basic.ts

@@ -0,0 +1,25 @@
+import { Component, signal, ViewEncapsulation } from '@angular/core';
+import { DfButton, DfIconButton } from '@design-factory/angular/button';
+import {
+  DfDrawer,
+  DfDrawerFooterTemplate,
+  DfDrawerHeaderTemplate,
+  DfDrawerPosition
+} from '@design-factory/angular/drawer';
+import { FormField, form } from '@angular/forms/signals';
+
+@Component({
+  selector: 'df-demo-drawer-overlay-basic',
+  templateUrl: './drawer-overlay-basic.html',
+  imports: [DfDrawer, DfDrawerHeaderTemplate, DfDrawerFooterTemplate, FormField, DfButton, DfIconButton],
+  encapsulation: ViewEncapsulation.None,
+  styles: `
+    .df-drawer.df-inline-start {
+      --df-drawer-min-size: 250px;
+    }
+  `
+})
+export class DfDemoDrawerOverlayBasic {
+  readonly drawerPosition = signal<DfDrawerPosition>('inline-start');
+  readonly drawerPositionForm = form(this.drawerPosition);
+}

package/.ai/docs/demos/dropdown/basic/dropdown-basic.html

@@ -0,0 +1,8 @@
+<button [dfDropdownToggle]="menu">Actions</button>
+<df-dropdown #menu>
+  <button dfDropdownItem>Refresh</button>
+  <button dfDropdownItem>Duplicate</button>
+  <df-separator />
+  <a dfDropdownItem href="/components/dropdown" active>Dropdown documentation</a>
+  <button dfDropdownItem disabled>Unavailable action</button>
+</df-dropdown>

package/.ai/docs/demos/dropdown/basic/dropdown-basic.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import {
+  DfDropdown,
+  DfDropdownItemButton,
+  DfDropdownItemLink,
+  DfDropdownToggle
+} from '@design-factory/angular/dropdown';
+import { DfSeparator } from '@design-factory/angular/separator';
+
+@Component({
+  selector: 'df-demo-dropdown-basic',
+  templateUrl: './dropdown-basic.html',
+  imports: [DfDropdown, DfDropdownItemButton, DfDropdownItemLink, DfDropdownToggle, DfSeparator]
+})
+export class DfDemoDropdownBasic {}

package/.ai/docs/demos/dropdown/sizes/dropdown-sizes.html

@@ -0,0 +1,9 @@
+<div class="d-flex flex-column flex-sm-row align-items-start gap-3">
+  @for (demo of sizes; track demo.size) {
+    <button [dfDropdownToggle]="menu" [size]="demo.size">{{ demo.label }}</button>
+    <df-dropdown #menu [size]="demo.size">
+      <button dfDropdownItem>First item</button>
+      <button dfDropdownItem>Second item</button>
+    </df-dropdown>
+  }
+</div>

package/.ai/docs/demos/dropdown/sizes/dropdown-sizes.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { DfDropdown, DfDropdownItemButton, DfDropdownToggle } from '@design-factory/angular/dropdown';
+import type { DfDropdownSize } from '@design-factory/angular/dropdown';
+
+interface DropdownSizeDemo {
+  label: string;
+  size: DfDropdownSize;
+}
+
+@Component({
+  selector: 'df-demo-dropdown-sizes',
+  templateUrl: './dropdown-sizes.html',
+  imports: [DfDropdown, DfDropdownItemButton, DfDropdownToggle]
+})
+export class DfDemoDropdownSizes {
+  readonly sizes: DropdownSizeDemo[] = [
+    { label: 'Small', size: 'sm' },
+    { label: 'Default', size: 'md' },
+    { label: 'Large', size: 'lg' }
+  ];
+}

package/.ai/docs/demos/dropdown/split/dropdown-split.html

@@ -0,0 +1,9 @@
+<df-button-group aria-label="Split button">
+  <button dfButton>Save</button>
+  <button [dfDropdownToggle]="menu" aria-label="More save options"></button>
+</df-button-group>
+<df-dropdown #menu>
+  <button dfDropdownItem>Save and close</button>
+  <button dfDropdownItem>Save as draft</button>
+  <button dfDropdownItem>Save as template</button>
+</df-dropdown>

package/.ai/docs/demos/dropdown/split/dropdown-split.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { DfButton } from '@design-factory/angular/button';
+import { DfButtonGroup } from '@design-factory/angular/buttongroup';
+import { DfDropdown, DfDropdownItemButton, DfDropdownToggle } from '@design-factory/angular/dropdown';
+
+@Component({
+  selector: 'df-demo-dropdown-split',
+  templateUrl: './dropdown-split.html',
+  imports: [DfButton, DfButtonGroup, DfDropdown, DfDropdownItemButton, DfDropdownToggle]
+})
+export class DfDemoDropdownSplit {}

package/.ai/docs/demos/dropdown/toggle/dropdown-toggle.html

@@ -0,0 +1,22 @@
+<div class="d-flex flex-column flex-sm-row align-items-start gap-3">
+  <button [dfDropdownToggle]="solidMenu" appearance="solid">Solid</button>
+  <df-dropdown #solidMenu>
+    <button dfDropdownItem>Primary action</button>
+    <button dfDropdownItem>Secondary action</button>
+  </df-dropdown>
+
+  <button [dfDropdownToggle]="outlineMenu" appearance="outline">Outline</button>
+  <df-dropdown #outlineMenu>
+    <button dfDropdownItem>Primary action</button>
+    <button dfDropdownItem>Secondary action</button>
+  </df-dropdown>
+
+  <button [dfDropdownToggle]="iconMenu" appearance="outline">
+    <df-icon class="icon-df-bluetooth" />
+    With icon
+  </button>
+  <df-dropdown #iconMenu>
+    <button dfDropdownItem>Primary action</button>
+    <button dfDropdownItem>Secondary action</button>
+  </df-dropdown>
+</div>

package/.ai/docs/demos/dropdown/toggle/dropdown-toggle.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { DfDropdown, DfDropdownItemButton, DfDropdownToggle } from '@design-factory/angular/dropdown';
+import { DfIcon } from '@design-factory/angular/icon';
+
+@Component({
+  selector: 'df-demo-dropdown-toggle',
+  templateUrl: './dropdown-toggle.html',
+  imports: [DfDropdown, DfDropdownItemButton, DfDropdownToggle, DfIcon]
+})
+export class DfDemoDropdownToggle {}