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

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

@@ -0,0 +1,16 @@
+<df-accordion itemHeadingLevel="3">
+  <df-accordion-item [visible]="true">
+    <ng-template dfAccordionItemTitle>First item</ng-template>
+    <ng-template dfAccordionItemBody>Content of the first accordion item.</ng-template>
+  </df-accordion-item>
+
+  <df-accordion-item>
+    <ng-template dfAccordionItemTitle>Second item</ng-template>
+    <ng-template dfAccordionItemBody>Content of the second accordion item.</ng-template>
+  </df-accordion-item>
+
+  <df-accordion-item [disabled]="true">
+    <ng-template dfAccordionItemTitle>Disabled item</ng-template>
+    <ng-template dfAccordionItemBody>This item is disabled.</ng-template>
+  </df-accordion-item>
+</df-accordion>

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

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import {
+  DfAccordion,
+  DfAccordionItem,
+  DfAccordionItemBody,
+  DfAccordionItemTitle
+} from '@design-factory/angular/accordion';
+
+@Component({
+  selector: 'df-demo-accordion-basic',
+  templateUrl: './accordion-basic.html',
+  imports: [DfAccordion, DfAccordionItem, DfAccordionItemBody, DfAccordionItemTitle]
+})
+export class DfDemoAccordionBasic {}

package/.ai/docs/demos/accordion/close-others/accordion-close-others.html

@@ -0,0 +1,16 @@
+<df-accordion itemHeadingLevel="3" closeOthers>
+  <df-accordion-item [visible]="true">
+    <ng-template dfAccordionItemTitle>First item</ng-template>
+    <ng-template dfAccordionItemBody>Content of the first accordion item.</ng-template>
+  </df-accordion-item>
+
+  <df-accordion-item>
+    <ng-template dfAccordionItemTitle>Second item</ng-template>
+    <ng-template dfAccordionItemBody>Content of the second accordion item.</ng-template>
+  </df-accordion-item>
+
+  <df-accordion-item>
+    <ng-template dfAccordionItemTitle>Third item</ng-template>
+    <ng-template dfAccordionItemBody>Content of the third accordion item.</ng-template>
+  </df-accordion-item>
+</df-accordion>

package/.ai/docs/demos/accordion/close-others/accordion-close-others.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import {
+  DfAccordion,
+  DfAccordionItem,
+  DfAccordionItemBody,
+  DfAccordionItemTitle
+} from '@design-factory/angular/accordion';
+
+@Component({
+  selector: 'df-demo-accordion-close-others',
+  templateUrl: './accordion-close-others.html',
+  imports: [DfAccordion, DfAccordionItem, DfAccordionItemBody, DfAccordionItemTitle]
+})
+export class DfDemoAccordionCloseOthers {}

package/.ai/docs/demos/accordion/interactive/accordion-interactive.html

@@ -0,0 +1,84 @@
+<df-accordion itemHeadingLevel="3" arrowPosition="start">
+  <df-accordion-item-interactive [visible]="true">
+    <ng-template dfAccordionItemTitle>First item</ng-template>
+    <ng-template dfAccordionItemInteractiveSection>
+      @if (interactiveType() === 'button') {
+        <button dfButton appearance="outline">Button label</button>
+      } @else {
+        <div class="form-check form-switch">
+          <label class="form-check-label df-form-switch-name">
+            <div class="df-form-switch-container">
+              <input [(ngModel)]="toggle1" class="form-check-input" name="toggle1" type="checkbox" />
+              <span class="form-check-label">{{ toggle1() ? 'On' : 'Off' }}</span>
+            </div>
+          </label>
+        </div>
+      }
+    </ng-template>
+    <ng-template dfAccordionItemBody>Content of the first accordion item.</ng-template>
+  </df-accordion-item-interactive>
+
+  <df-accordion-item-interactive>
+    <ng-template dfAccordionItemTitle>Second item</ng-template>
+    <ng-template dfAccordionItemInteractiveSection>
+      @if (interactiveType() === 'button') {
+        <button dfButton appearance="outline">Button label</button>
+      } @else {
+        <div class="form-check form-switch">
+          <label class="form-check-label df-form-switch-name">
+            <div class="df-form-switch-container">
+              <input [(ngModel)]="toggle2" class="form-check-input" name="toggle2" type="checkbox" />
+              <span class="form-check-label">{{ toggle2() ? 'On' : 'Off' }}</span>
+            </div>
+          </label>
+        </div>
+      }
+    </ng-template>
+    <ng-template dfAccordionItemBody>Content of the second accordion item.</ng-template>
+  </df-accordion-item-interactive>
+
+  <df-accordion-item-interactive [disabled]="true">
+    <ng-template dfAccordionItemTitle>Disabled item</ng-template>
+    <ng-template dfAccordionItemInteractiveSection>
+      @if (interactiveType() === 'button') {
+        <button dfButton appearance="outline" disabled>Button label</button>
+      } @else {
+        <div class="form-check form-switch">
+          <label class="form-check-label df-form-switch-name df-form-switch-name-disabled">
+            <div class="df-form-switch-container">
+              <input [(ngModel)]="toggle3" class="form-check-input" name="toggle3" type="checkbox" disabled />
+              <span class="form-check-label">{{ toggle3() ? 'On' : 'Off' }}</span>
+            </div>
+          </label>
+        </div>
+      }
+    </ng-template>
+    <ng-template dfAccordionItemBody>Content of the third accordion item.</ng-template>
+  </df-accordion-item-interactive>
+</df-accordion>
+
+<hr class="my-6" />
+
+<div class="d-inline-grid gap-4" style="grid-template-columns: auto auto">
+  <label class="form-label fw-semibold mb-0 align-self-center" for="interactive-button">Interactive element</label>
+  <div class="btn-group btn-group-sm" ngDefaultControl role="radiogroup">
+    <input
+      [(ngModel)]="interactiveType"
+      class="btn-check"
+      id="interactive-button"
+      name="interactiveType"
+      type="radio"
+      value="button"
+    />
+    <label class="btn btn-outline-primary" for="interactive-button">Button</label>
+    <input
+      [(ngModel)]="interactiveType"
+      class="btn-check"
+      id="interactive-toggle"
+      name="interactiveType"
+      type="radio"
+      value="toggle"
+    />
+    <label class="btn btn-outline-primary" for="interactive-toggle">Toggle</label>
+  </div>
+</div>

package/.ai/docs/demos/accordion/interactive/accordion-interactive.ts

@@ -0,0 +1,30 @@
+import { Component, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import {
+  DfAccordion,
+  DfAccordionItemBody,
+  DfAccordionItemInteractive,
+  DfAccordionItemInteractiveSection,
+  DfAccordionItemTitle
+} from '@design-factory/angular/accordion';
+import { DfButton } from '@design-factory/angular/button';
+
+@Component({
+  selector: 'df-demo-accordion-interactive',
+  templateUrl: './accordion-interactive.html',
+  imports: [
+    DfAccordion,
+    DfAccordionItemInteractive,
+    DfAccordionItemInteractiveSection,
+    DfAccordionItemBody,
+    DfAccordionItemTitle,
+    FormsModule,
+    DfButton
+  ]
+})
+export class DfDemoAccordionInteractive {
+  protected readonly interactiveType = signal<'button' | 'toggle'>('button');
+  protected readonly toggle1 = signal(false);
+  protected readonly toggle2 = signal(false);
+  protected readonly toggle3 = signal(false);
+}

package/.ai/docs/demos/accordion/interactive-addons-subtitle/accordion-interactive-addons-subtitle.html

@@ -0,0 +1,126 @@
+<df-accordion itemHeadingLevel="3" [subtitleType]="subtitleType()" [addon]="addon()" arrowPosition="start">
+  <df-accordion-item-interactive
+    [visible]="true"
+    subtitle="Additional info about first item"
+    number="01"
+    iconClass="fa-light fa-home"
+  >
+    <ng-template dfAccordionItemTitle>First item</ng-template>
+    <ng-template dfAccordionItemInteractiveSection>
+      @if (interactiveType() === 'button') {
+        <button dfButton appearance="outline">Button label</button>
+      } @else {
+        <div class="form-check form-switch">
+          <label class="form-check-label df-form-switch-name">
+            <div class="df-form-switch-container">
+              <input [(ngModel)]="toggle1" class="form-check-input" name="toggle1" type="checkbox" />
+              <span class="form-check-label">{{ toggle1() ? 'On' : 'Off' }}</span>
+            </div>
+          </label>
+        </div>
+      }
+    </ng-template>
+    <ng-template dfAccordionItemBody>Content of the first accordion item.</ng-template>
+  </df-accordion-item-interactive>
+
+  <df-accordion-item-interactive subtitle="Additional info about second item" number="02" iconClass="fa-light fa-user">
+    <ng-template dfAccordionItemTitle>Second item</ng-template>
+    <ng-template dfAccordionItemInteractiveSection>
+      @if (interactiveType() === 'button') {
+        <button dfButton appearance="outline">Button label</button>
+      } @else {
+        <div class="form-check form-switch">
+          <label class="form-check-label df-form-switch-name">
+            <div class="df-form-switch-container">
+              <input [(ngModel)]="toggle2" class="form-check-input" name="toggle2" type="checkbox" />
+              <span class="form-check-label">{{ toggle2() ? 'On' : 'Off' }}</span>
+            </div>
+          </label>
+        </div>
+      }
+    </ng-template>
+    <ng-template dfAccordionItemBody>Content of the second accordion item.</ng-template>
+  </df-accordion-item-interactive>
+
+  <df-accordion-item-interactive
+    [disabled]="true"
+    subtitle="Additional info about third item"
+    number="03"
+    iconClass="fa-light fa-cog"
+  >
+    <ng-template dfAccordionItemTitle>Disabled item</ng-template>
+    <ng-template dfAccordionItemInteractiveSection>
+      @if (interactiveType() === 'button') {
+        <button dfButton appearance="outline" disabled>Button label</button>
+      } @else {
+        <div class="form-check form-switch">
+          <label class="form-check-label df-form-switch-name df-form-switch-name-disabled">
+            <div class="df-form-switch-container">
+              <input [(ngModel)]="toggle3" class="form-check-input" name="toggle3" type="checkbox" disabled />
+              <span class="form-check-label">{{ toggle3() ? 'On' : 'Off' }}</span>
+            </div>
+          </label>
+        </div>
+      }
+    </ng-template>
+    <ng-template dfAccordionItemBody>Content of the third accordion item.</ng-template>
+  </df-accordion-item-interactive>
+</df-accordion>
+
+<hr class="my-6" />
+
+<div class="d-inline-grid gap-4" style="grid-template-columns: auto auto">
+  <label class="form-label fw-semibold mb-0 align-self-center" for="ia-interactive-button">Interactive element</label>
+  <div class="btn-group btn-group-sm" ngDefaultControl role="radiogroup">
+    <input
+      [(ngModel)]="interactiveType"
+      class="btn-check"
+      id="ia-interactive-button"
+      name="ia-interactiveType"
+      type="radio"
+      value="button"
+    />
+    <label class="btn btn-outline-primary" for="ia-interactive-button">Button</label>
+    <input
+      [(ngModel)]="interactiveType"
+      class="btn-check"
+      id="ia-interactive-toggle"
+      name="ia-interactiveType"
+      type="radio"
+      value="toggle"
+    />
+    <label class="btn btn-outline-primary" for="ia-interactive-toggle">Toggle</label>
+  </div>
+
+  <label class="form-label fw-semibold mb-0 align-self-center" for="ia-subtitle-none">Subtitle</label>
+  <div class="btn-group btn-group-sm" ngDefaultControl role="radiogroup">
+    <input
+      [(ngModel)]="subtitleType"
+      class="btn-check"
+      id="ia-subtitle-none"
+      name="ia-subtitle"
+      type="radio"
+      value="none"
+    />
+    <label class="btn btn-outline-primary" for="ia-subtitle-none">None</label>
+    <input
+      [(ngModel)]="subtitleType"
+      class="btn-check"
+      id="ia-subtitle-block"
+      name="ia-subtitle"
+      type="radio"
+      value="block"
+    />
+    <label class="btn btn-outline-primary" for="ia-subtitle-block">Block</label>
+  </div>
+
+  <label class="form-label fw-semibold mb-0 align-self-center" for="ia-addon-none">Addon</label>
+  <div class="btn-group btn-group-sm" ngDefaultControl role="radiogroup">
+    <input [(ngModel)]="addon" class="btn-check" id="ia-addon-none" name="ia-addon" type="radio" value="none" />
+    <label class="btn btn-outline-primary" for="ia-addon-none">None</label>
+    <input [(ngModel)]="addon" class="btn-check" id="ia-addon-number" name="ia-addon" type="radio" value="number" />
+    <label class="btn btn-outline-primary" for="ia-addon-number">Numbers</label>
+    <input [(ngModel)]="addon" class="btn-check" id="ia-addon-icon" name="ia-addon" type="radio" value="icon" />
+    <label class="btn btn-outline-primary" for="ia-addon-icon">Icon</label>
+  </div>
+</div>

package/.ai/docs/demos/accordion/interactive-addons-subtitle/accordion-interactive-addons-subtitle.ts

@@ -0,0 +1,33 @@
+import { Component, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import {
+  DfAccordion,
+  DfAccordionItemBody,
+  DfAccordionItemInteractive,
+  DfAccordionItemInteractiveSection,
+  DfAccordionItemTitle
+} from '@design-factory/angular/accordion';
+import { DfButton } from '@design-factory/angular/button';
+
+@Component({
+  selector: 'df-demo-accordion-interactive-addons-subtitle',
+  templateUrl: './accordion-interactive-addons-subtitle.html',
+  imports: [
+    DfAccordion,
+    DfAccordionItemInteractive,
+    DfAccordionItemInteractiveSection,
+    DfAccordionItemBody,
+    DfAccordionItemTitle,
+    FormsModule,
+    DfButton
+  ]
+})
+export class DfDemoAccordionInteractiveAddonsSubtitle {
+  protected readonly interactiveType = signal<'button' | 'toggle'>('button');
+  protected readonly subtitleType = signal<'block' | 'none'>('none');
+  protected readonly addon = signal<'none' | 'icon' | 'number'>('none');
+
+  protected readonly toggle1 = signal(false);
+  protected readonly toggle2 = signal(false);
+  protected readonly toggle3 = signal(false);
+}

package/.ai/docs/demos/accordion/programmatic-control/accordion-programmatic-control.html

@@ -0,0 +1,36 @@
+<df-accordion #myAccordion itemHeadingLevel="3">
+  <df-accordion-item id="first" [visible]="true">
+    <ng-template dfAccordionItemTitle>First item</ng-template>
+    <ng-template dfAccordionItemBody>Content of the first accordion item.</ng-template>
+  </df-accordion-item>
+
+  <df-accordion-item id="second">
+    <ng-template dfAccordionItemTitle>Second item</ng-template>
+    <ng-template dfAccordionItemBody>Content of the second accordion item.</ng-template>
+  </df-accordion-item>
+
+  <df-accordion-item #thirdItem id="third">
+    <ng-template dfAccordionItemTitle>Third item</ng-template>
+    <ng-template dfAccordionItemBody>Content of the third accordion item.</ng-template>
+  </df-accordion-item>
+</df-accordion>
+
+<hr class="my-6" />
+
+<div class="d-inline-grid gap-4" style="grid-template-columns: auto auto">
+  <span class="fw-semibold mb-0 align-self-center">Accordion API</span>
+  <div class="d-flex gap-2 flex-wrap">
+    <button dfButton appearance="outline" size="sm" (click)="myAccordion.toggle('first')">Toggle first</button>
+    <button dfButton appearance="outline" size="sm" (click)="myAccordion.expand('second')">Expand second</button>
+    <button dfButton appearance="outline" size="sm" (click)="myAccordion.collapse('second')">Collapse second</button>
+    <button dfButton appearance="outline" size="sm" (click)="myAccordion.expandAll()">Expand all</button>
+    <button dfButton appearance="outline" size="sm" (click)="myAccordion.collapseAll()">Collapse all</button>
+  </div>
+
+  <span class="fw-semibold mb-0 align-self-center">Item API</span>
+  <div class="d-flex gap-2 flex-wrap">
+    <button dfButton appearance="outline" size="sm" (click)="thirdItem.toggle()">Toggle third</button>
+    <button dfButton appearance="outline" size="sm" (click)="thirdItem.expand()">Expand third</button>
+    <button dfButton appearance="outline" size="sm" (click)="thirdItem.collapse()">Collapse third</button>
+  </div>
+</div>

package/.ai/docs/demos/accordion/programmatic-control/accordion-programmatic-control.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import {
+  DfAccordion,
+  DfAccordionItem,
+  DfAccordionItemBody,
+  DfAccordionItemTitle
+} from '@design-factory/angular/accordion';
+import { DfButton } from '@design-factory/angular/button';
+
+@Component({
+  selector: 'df-demo-accordion-programmatic-control',
+  templateUrl: './accordion-programmatic-control.html',
+  imports: [DfAccordion, DfAccordionItem, DfAccordionItemBody, DfAccordionItemTitle, DfButton]
+})
+export class DfDemoAccordionProgrammaticControl {}

package/.ai/docs/demos/accordion/selectable/accordion-selectable.html

@@ -0,0 +1,16 @@
+<df-accordion-selectable itemHeadingLevel="3" ariaLabel="Choose a plan">
+  <df-accordion-item-selectable value="basic" [visible]="true">
+    <ng-template dfAccordionItemTitle>Basic plan</ng-template>
+    <ng-template dfAccordionItemBody>Includes essential features for small teams.</ng-template>
+  </df-accordion-item-selectable>
+
+  <df-accordion-item-selectable value="pro">
+    <ng-template dfAccordionItemTitle>Pro plan</ng-template>
+    <ng-template dfAccordionItemBody>Advanced features with priority support.</ng-template>
+  </df-accordion-item-selectable>
+
+  <df-accordion-item-selectable value="enterprise">
+    <ng-template dfAccordionItemTitle>Enterprise plan</ng-template>
+    <ng-template dfAccordionItemBody>Full platform access with dedicated account management.</ng-template>
+  </df-accordion-item-selectable>
+</df-accordion-selectable>

package/.ai/docs/demos/accordion/selectable/accordion-selectable.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import {
+  DfAccordionItemBody,
+  DfAccordionItemTitle,
+  DfAccordionItemSelectable,
+  DfAccordionSelectable
+} from '@design-factory/angular/accordion';
+
+@Component({
+  selector: 'df-demo-accordion-selectable',
+  templateUrl: './accordion-selectable.html',
+  imports: [DfAccordionSelectable, DfAccordionItemSelectable, DfAccordionItemBody, DfAccordionItemTitle]
+})
+export class DfDemoAccordionSelectable {}

package/.ai/docs/demos/accordion/selectable-extended/accordion-selectable-extended.html

@@ -0,0 +1,28 @@
+<form [formGroup]="formGroup">
+  <df-accordion-selectable [itemHeadingLevel]="3" ariaLabel="Payment method">
+    @for (item of items; track item) {
+      <df-accordion-item-selectable [id]="item.id" [value]="item.value" formControlName="option">
+        <ng-template dfAccordionItemTitle>
+          <span style="display: flex; align-items: center">
+            <span>{{ item.name }}</span>
+            @if (item.badgeValue !== undefined) {
+              <span class="badge rounded-pill bg-warning df-badge-sm ms-3">{{ item.badgeValue }}</span>
+            }
+          </span>
+        </ng-template>
+        <ng-template dfAccordionItemSelectableSubsection>
+          @if (item.data || item.subtitle) {
+            <div style="font-weight: normal">
+              <span>{{ item.subtitle }}</span>
+              <br />
+              <span>{{ item.data }}</span>
+            </div>
+          }
+        </ng-template>
+        <ng-template dfAccordionItemBody>
+          <ng-template [ngComponentOutlet]="item.content" />
+        </ng-template>
+      </df-accordion-item-selectable>
+    }
+  </df-accordion-selectable>
+</form>

package/.ai/docs/demos/accordion/selectable-extended/accordion-selectable-extended.ts

@@ -0,0 +1,80 @@
+import { Component, inject, Type } from '@angular/core';
+import {
+  DfAccordionSelectable,
+  DfAccordionItemBody,
+  DfAccordionItemSelectable,
+  DfAccordionItemTitle,
+  DfAccordionItemSelectableSubsection
+} from '@design-factory/angular/accordion';
+import { NonNullableFormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { NgComponentOutlet } from '@angular/common';
+
+@Component({
+  selector: 'df-demo-accordion-mastercard-content',
+  template: `Components for Mastercard payment`
+})
+class MastercardContentComponent {}
+
+@Component({
+  selector: 'df-demo-accordion-visa-content',
+  template: `Components for Visa payment`
+})
+class VisaContentComponent {}
+
+@Component({
+  selector: 'df-demo-accordion-paypal-content',
+  template: `Components for Paypal payment`
+})
+class PaypalContentComponent {}
+
+type PaymentOption = {
+  id: string;
+  name: string;
+  value: string;
+  badgeValue?: string;
+  subtitle?: string;
+  data?: string;
+  content: Type<any>;
+};
+
+@Component({
+  selector: 'df-demo-accordion-selectable-extended',
+  templateUrl: './accordion-selectable-extended.html',
+  imports: [
+    DfAccordionSelectable,
+    DfAccordionItemSelectable,
+    DfAccordionItemBody,
+    DfAccordionItemTitle,
+    DfAccordionItemSelectableSubsection,
+    ReactiveFormsModule,
+    NgComponentOutlet
+  ]
+})
+export class DfDemoAccordionSelectableExtended {
+  readonly items: PaymentOption[] = [
+    {
+      id: 'panel1',
+      name: 'Mastercard',
+      value: 'method1',
+      badgeValue: 'Charging fees',
+      subtitle: 'John Smith 05/28',
+      data: 'XXXX.1234',
+      content: MastercardContentComponent
+    },
+    {
+      id: 'panel2',
+      name: 'Visa',
+      value: 'method2',
+      badgeValue: 'Charging fees',
+      content: VisaContentComponent
+    },
+    {
+      id: 'panel3',
+      name: 'Paypal',
+      value: 'method3',
+      content: PaypalContentComponent
+    }
+  ];
+
+  readonly formGroup = inject(NonNullableFormBuilder).group({ option: '' });
+}

package/.ai/docs/demos/accordion/separator/accordion-separator.html

@@ -0,0 +1,16 @@
+<df-accordion itemHeadingLevel="3" separator>
+  <df-accordion-item [visible]="true">
+    <ng-template dfAccordionItemTitle>First item</ng-template>
+    <ng-template dfAccordionItemBody>Content of the first accordion item.</ng-template>
+  </df-accordion-item>
+
+  <df-accordion-item>
+    <ng-template dfAccordionItemTitle>Second item</ng-template>
+    <ng-template dfAccordionItemBody>Content of the second accordion item.</ng-template>
+  </df-accordion-item>
+
+  <df-accordion-item>
+    <ng-template dfAccordionItemTitle>Third item</ng-template>
+    <ng-template dfAccordionItemBody>Content of the third accordion item.</ng-template>
+  </df-accordion-item>
+</df-accordion>

package/.ai/docs/demos/accordion/separator/accordion-separator.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import {
+  DfAccordion,
+  DfAccordionItem,
+  DfAccordionItemBody,
+  DfAccordionItemTitle
+} from '@design-factory/angular/accordion';
+
+@Component({
+  selector: 'df-demo-accordion-separator',
+  templateUrl: './accordion-separator.html',
+  imports: [DfAccordion, DfAccordionItem, DfAccordionItemBody, DfAccordionItemTitle]
+})
+export class DfDemoAccordionSeparator {}

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

@@ -0,0 +1,15 @@
+<df-app-container>
+  <df-topnav [superheader]="true">
+    <df-topnav-brand product="Design Factory" />
+    <df-topnav-navigation>
+      <df-topnav-navigation-link label="Home" href="javascript:void(0);" />
+    </df-topnav-navigation>
+  </df-topnav>
+  <main>
+    <div>
+      <df-alert appearance="banner" type="success"
+        >Well done! You successfully read this important alert message.</df-alert
+      >
+    </div>
+  </main>
+</df-app-container>

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

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { DfAlert } from '@design-factory/angular/alert';
+import {
+  DfAppContainer,
+  DfTopNav,
+  DfTopNavBrand,
+  DfTopNavNavigation,
+  DfTopNavNavigationLink
+} from '@design-factory/angular/topnav';
+
+@Component({
+  selector: 'df-demo-alert-banner',
+  templateUrl: './alert-banner.html',
+  imports: [DfAlert, DfAppContainer, DfTopNav, DfTopNavBrand, DfTopNavNavigation, DfTopNavNavigationLink]
+})
+export class DfDemoAlertBanner {}

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

@@ -0,0 +1,6 @@
+<df-alert class="mb-5">Default alert with default settings.</df-alert>
+
+<df-alert type="tip" size="lg" [dismissible]="false">
+  <df-alert-title>Large tip alert without dismissal button.</df-alert-title>
+  <df-alert-details>It also has the matching secondary description.</df-alert-details>
+</df-alert>

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

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

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

@@ -0,0 +1,15 @@
+<div class="card">
+  <div class="card-header">
+    <p>Parent card</p>
+  </div>
+  <df-alert appearance="banner" type="info" [dismissible]="false"> Banner alert inside the parent card. </df-alert>
+  <div class="card-body">
+    <div class="card mt-4">
+      <div class="card-header">
+        <p>Nested card</p>
+      </div>
+      <df-alert appearance="banner" type="warning" [dismissible]="false"> Banner alert inside a nested card. </df-alert>
+      <div class="card-body"></div>
+    </div>
+  </div>
+</div>

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

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

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

@@ -0,0 +1,5 @@
+@for (alert of alerts(); track alert.type) {
+  <df-alert class="mb-5" [type]="alert.type" (closed)="close(alert.type)">{{ alert.message }}</df-alert>
+}
+
+<button dfButton appearance="outline" (click)="reset()">Reset</button>