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

package/.ai/docs/demos/sidenav/sidenav-basic-no-icon/routes.ts

@@ -0,0 +1,95 @@
+import { Component } from '@angular/core';
+import type { Routes } from '@angular/router';
+
+@Component({
+  template: `Home Page`
+})
+export class Home {}
+
+@Component({
+  template: `Sub Link 1 Page`
+})
+export class SubLink1 {}
+
+@Component({
+  template: `Sub Sub Link 1 Page`
+})
+export class SubSubLink1 {}
+
+@Component({
+  template: `Sub Link 2 Page`
+})
+export class SubLink2 {}
+
+@Component({
+  template: `Sub Sub Link 2 Page`
+})
+export class SubSubLink2 {}
+
+@Component({
+  template: `Link 1 Page`
+})
+export class Link1 {}
+
+@Component({
+  template: `Link 2 Page`
+})
+export class Link2 {}
+
+@Component({
+  template: `Link 3 Page`
+})
+export class Link3 {}
+
+@Component({
+  template: `Link 4 Page`
+})
+export class Link4 {}
+
+@Component({
+  template: `Link 5 Page`
+})
+export class Link5 {}
+
+@Component({
+  template: `Link 6 Page`
+})
+export class Link6 {}
+
+@Component({
+  template: `Link 7 Page`
+})
+export class Link7 {}
+
+@Component({
+  template: `Link 8 Page`
+})
+export class Link8 {}
+
+@Component({
+  template: `Link 9 Page`
+})
+export class Link9 {}
+
+@Component({
+  template: `Link 10 Page`
+})
+export class Link10 {}
+
+export const childRoutes: Routes = [
+  { path: '', component: Home },
+  { path: 'item-1/sub-link-1', component: SubLink1 },
+  { path: 'item-1/sub-item-1/sub-sub-link-1', component: SubSubLink1 },
+  { path: 'item-2/sub-link-2', component: SubLink2 },
+  { path: 'item-2/sub-item-2/sub-sub-link-2', component: SubSubLink2 },
+  { path: 'link-1', component: Link1 },
+  { path: 'link-2', component: Link2 },
+  { path: 'link-3', component: Link3 },
+  { path: 'link-4', component: Link4 },
+  { path: 'link-5', component: Link5 },
+  { path: 'link-6', component: Link6 },
+  { path: 'link-7', component: Link7 },
+  { path: 'link-8', component: Link8 },
+  { path: 'link-9', component: Link9 },
+  { path: 'link-10', component: Link10 }
+];

package/.ai/docs/demos/sidenav/sidenav-basic-no-icon/sidenav-basic-no-icon.html

@@ -0,0 +1,42 @@
+<!-- such a div is used to content the whole app including sidenav and topnav -->
+<div class="df-app-container d-flex flex-column w-100 vh-100">
+  <df-topnav
+    mainNavStyle="mirror"
+    showToggle
+    [navExpanded]="!sidenav.isMinimized()"
+    (navExpandedChange)="sidenav.toggleMinimize(!$event)"
+  >
+    <df-topnav-brand product="Design Factory" />
+  </df-topnav>
+
+  <div class="d-flex flex-grow-1 w-100" style="min-height: 0">
+    <df-sidenav #sidenav>
+      <df-sidenav-item label="Item 1">
+        <df-sidenav-link label="Home" linkPath="." [routerLinkActiveOptions]="{ exact: true }" />
+        <df-sidenav-item label="Sub item 1">
+          <df-sidenav-link label="Sub Sub Link 1" linkPath="./item-1/sub-item-1/sub-sub-link-1" />
+        </df-sidenav-item>
+      </df-sidenav-item>
+      <df-sidenav-item label="Item 2">
+        <df-sidenav-link label="Sub Link 2" linkPath="./item-2/sub-link-2" />
+        <df-sidenav-item label="Sub item 2">
+          <df-sidenav-link label="Sub Sub Link 2" linkPath="./item-2/sub-item-2/sub-sub-link-2" />
+        </df-sidenav-item>
+      </df-sidenav-item>
+      <df-sidenav-link label="Link 1" linkPath="./link-1" />
+      <df-sidenav-link label="Link 2" linkPath="./link-2" />
+      <df-sidenav-link label="Link 3" linkPath="./link-3" />
+      <df-sidenav-link label="Link 4" linkPath="./link-4" />
+      <df-sidenav-link label="Link 5" linkPath="./link-5" />
+      <df-sidenav-link label="Link 6" linkPath="./link-6" />
+      <df-sidenav-link label="Link 7" linkPath="./link-7" />
+      <df-sidenav-link label="Link 8" linkPath="./link-8" />
+      <df-sidenav-link label="Link 9" linkPath="./link-9" />
+      <df-sidenav-link label="Link 10" linkPath="./link-10" />
+    </df-sidenav>
+    <main class="main-content p-7">
+      <h1>Main content</h1>
+      <router-outlet />
+    </main>
+  </div>
+</div>

package/.ai/docs/demos/sidenav/sidenav-basic-no-icon/sidenav-basic-no-icon.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { DfSidenavComponent, DfSidenavItemComponent, DfSidenavLinkComponent } from '@design-factory/angular/sidenav';
+import { DfTopNav, DfTopNavBrand } from '@design-factory/angular/topnav';
+export { childRoutes } from './routes';
+
+@Component({
+  selector: 'df-demo-sidenav-basic-no-icon',
+  templateUrl: './sidenav-basic-no-icon.html',
+  imports: [DfSidenavComponent, DfSidenavItemComponent, DfSidenavLinkComponent, DfTopNav, DfTopNavBrand, RouterOutlet]
+})
+export class DfDemoSidenavBasicNoIcon {}

package/.ai/docs/demos/sidenav/sidenav-basic-with-icon/routes.ts

@@ -0,0 +1,41 @@
+import { Component } from '@angular/core';
+import type { Routes } from '@angular/router';
+
+@Component({
+  template: `Home Page`
+})
+export class Home {}
+
+@Component({
+  template: `Sub Link 1 Page`
+})
+export class SubLink1 {}
+
+@Component({
+  template: `Sub Sub Link 1 Page`
+})
+export class SubSubLink1 {}
+
+@Component({
+  template: `Sub Link 2 Page`
+})
+export class SubLink2 {}
+
+@Component({
+  template: `Sub Sub Link 2 Page`
+})
+export class SubSubLink2 {}
+
+@Component({
+  template: `Link 1 Page`
+})
+export class Link1 {}
+
+export const childRoutes: Routes = [
+  { path: '', component: Home },
+  { path: 'item-1/sub-link-1', component: SubLink1 },
+  { path: 'item-1/sub-item-1/sub-sub-link-1', component: SubSubLink1 },
+  { path: 'item-2/sub-link-2', component: SubLink2 },
+  { path: 'item-2/sub-item-2/sub-sub-link-2', component: SubSubLink2 },
+  { path: 'link-1', component: Link1 }
+];

package/.ai/docs/demos/sidenav/sidenav-basic-with-icon/sidenav-basic-with-icon.html

@@ -0,0 +1,34 @@
+<!-- such a div is used to content the whole app including sidenav and topnav -->
+<div class="df-app-container d-flex flex-column w-100 vh-100">
+  <df-topnav
+    mainNavStyle="mirror"
+    showToggle
+    [navExpanded]="!sidenav.isMinimized()"
+    (navExpandedChange)="sidenav.toggleMinimize(!$event)"
+  >
+    <df-topnav-brand product="Design Factory" />
+  </df-topnav>
+
+  <div class="d-flex flex-grow-1 w-100" style="min-height: 0">
+    <df-sidenav #sidenav class="df-sidenav-light-sky">
+      <df-sidenav-item label="Item 1" icon="fa-home">
+        <df-sidenav-link label="Home" linkPath="." [routerLinkActiveOptions]="{ exact: true }" />
+        <df-sidenav-link label="Sub Link 1" linkPath="./item-1/sub-link-1" />
+        <df-sidenav-item label="Sub item 1">
+          <df-sidenav-link label="Sub Sub Link 1" linkPath="./item-1/sub-item-1/sub-sub-link-1" />
+        </df-sidenav-item>
+      </df-sidenav-item>
+      <df-sidenav-item label="Item 2" icon="fa-cheese-swiss">
+        <df-sidenav-link label="Sub Link 2" linkPath="./item-2/sub-link-2" />
+        <df-sidenav-item label="Sub item 2">
+          <df-sidenav-link label="Sub Sub Link 2" linkPath="./item-2/sub-item-2/sub-sub-link-2" />
+        </df-sidenav-item>
+      </df-sidenav-item>
+      <df-sidenav-link label="Link 1" linkPath="./link-1" icon="fa-star" />
+    </df-sidenav>
+    <main class="main-content p-7">
+      <h1>Main content</h1>
+      <router-outlet />
+    </main>
+  </div>
+</div>

package/.ai/docs/demos/sidenav/sidenav-basic-with-icon/sidenav-basic-with-icon.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { DfSidenavComponent, DfSidenavItemComponent, DfSidenavLinkComponent } from '@design-factory/angular/sidenav';
+import { DfTopNav, DfTopNavBrand } from '@design-factory/angular/topnav';
+export { childRoutes } from './routes';
+
+@Component({
+  selector: 'df-demo-sidenav-basic-with-icon',
+  templateUrl: './sidenav-basic-with-icon.html',
+  imports: [DfSidenavComponent, DfSidenavItemComponent, DfSidenavLinkComponent, DfTopNav, DfTopNavBrand, RouterOutlet]
+})
+export class DfDemoSidenavBasicWithIcon {}

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

@@ -0,0 +1 @@
+<button dfButton appearance="outline" dfTooltip="Short, helpful hint">Button</button>

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

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

package/.ai/docs/demos/tooltip/placements/tooltip-placements.html

@@ -0,0 +1,35 @@
+<p>Recommended (don't specify a placement):</p>
+<div class="d-flex flex-wrap justify-content-center gap-3 mb-5">
+  <button dfButton appearance="outline" [dfTooltip]="tooltipContent">default</button>
+</div>
+
+<p><code>'auto'</code>, <code>'vertical'</code> and <code>'horizontal'</code> shortcuts:</p>
+<div class="d-flex flex-wrap justify-content-center gap-3 mb-5">
+  <button dfButton appearance="outline" [dfTooltip]="tooltipContent" dfTooltipPlacement="auto">auto</button>
+  <button dfButton appearance="outline" [dfTooltip]="tooltipContent" dfTooltipPlacement="vertical">vertical</button>
+  <button dfButton appearance="outline" [dfTooltip]="tooltipContent" dfTooltipPlacement="horizontal">horizontal</button>
+</div>
+
+<p>Vertical placements:</p>
+<div class="d-flex flex-wrap justify-content-center gap-3 mb-5">
+  <button dfButton appearance="outline" [dfTooltip]="tooltipContent" dfTooltipPlacement="top">top</button>
+  <button dfButton appearance="outline" [dfTooltip]="tooltipContent" dfTooltipPlacement="top-start">top-start</button>
+  <button dfButton appearance="outline" [dfTooltip]="tooltipContent" dfTooltipPlacement="top-end">top-end</button>
+  <button dfButton appearance="outline" [dfTooltip]="tooltipContent" dfTooltipPlacement="bottom">bottom</button>
+  <button dfButton appearance="outline" [dfTooltip]="tooltipContent" dfTooltipPlacement="bottom-start">
+    bottom-start
+  </button>
+  <button dfButton appearance="outline" [dfTooltip]="tooltipContent" dfTooltipPlacement="bottom-end">bottom-end</button>
+</div>
+
+<p>Horizontal placements:</p>
+<div class="d-flex flex-column align-items-center gap-3">
+  <button dfButton appearance="outline" [dfTooltip]="tooltipContent" dfTooltipPlacement="end">end</button>
+  <button dfButton appearance="outline" [dfTooltip]="tooltipContent" dfTooltipPlacement="end-end">end-end</button>
+  <button dfButton appearance="outline" [dfTooltip]="tooltipContent" dfTooltipPlacement="end-start">end-start</button>
+  <button dfButton appearance="outline" [dfTooltip]="tooltipContent" dfTooltipPlacement="start">start</button>
+  <button dfButton appearance="outline" [dfTooltip]="tooltipContent" dfTooltipPlacement="start-end">start-end</button>
+  <button dfButton appearance="outline" [dfTooltip]="tooltipContent" dfTooltipPlacement="start-start">
+    start-start
+  </button>
+</div>

package/.ai/docs/demos/tooltip/placements/tooltip-placements.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { DfButton } from '@design-factory/angular/button';
+import { DfTooltip } from '@design-factory/angular/tooltip';
+
+@Component({
+  selector: 'df-demo-tooltip-placements',
+  templateUrl: './tooltip-placements.html',
+  imports: [DfButton, DfTooltip]
+})
+export class DfDemoTooltipPlacements {
+  readonly tooltipContent = 'This is a fairly long tooltip message so the placement offset is easy to see.';
+}

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

@@ -0,0 +1,5 @@
+<div class="d-flex flex-column flex-sm-row align-items-start gap-3">
+  <button dfButton appearance="outline" dfTooltip="Small tooltip" dfTooltipSize="sm">Small</button>
+  <button dfButton appearance="outline" dfTooltip="Medium tooltip">Medium</button>
+  <button dfButton appearance="outline" dfTooltip="Large tooltip" dfTooltipSize="lg">Large</button>
+</div>

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

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

package/.ai/docs/demos/topnav/brand/topnav-brand.ts

@@ -0,0 +1,64 @@
+import { Component, signal } from '@angular/core';
+import { disabled, form, FormField } from '@angular/forms/signals';
+import { DfAppContainer, DfTopNav, DfTopNavBrand, DfTopNavBrandLinkContent } from '@design-factory/angular/topnav';
+
+@Component({
+  selector: 'df-demo-topnav-basic',
+  template: `
+    <df-app-container>
+      <df-topnav>
+        <df-topnav-brand
+          product="Design Factory"
+          [module]="showModule() ? 'My Module' : undefined"
+          [amaudeusLogoVector]="showVectorLogo()"
+          href="."
+        >
+          @if (showCustomLink()) {
+            <ng-template dfTopNavBrandLinkContent>
+              <div aria-hidden="true" class="outpayced-logo"></div>
+              <span>Checkout</span>
+            </ng-template>
+          }
+        </df-topnav-brand>
+      </df-topnav>
+      <main class="p-4 p-md-7">
+        <h3>Options</h3>
+        <form class="form-sm">
+          <div class="form-check form-switch">
+            <input class="form-check-input" [formField]="showModuleForm" type="checkbox" id="showModule" />
+            <label for="showModule" class="form-check-label">Show module</label>
+          </div>
+          <div class="form-check form-switch">
+            <input class="form-check-input" [formField]="showCustomLinkForm" type="checkbox" id="showCustom" />
+            <label for="showCustom" class="form-check-label">Show custom look</label>
+          </div>
+          <div class="form-check form-switch">
+            <input class="form-check-input" [formField]="showVectorLogoForm" type="checkbox" id="showVectorLogo" />
+            <label for="showVectorLogo" class="form-check-label">Show vector logo</label>
+          </div>
+        </form>
+      </main>
+    </df-app-container>
+  `,
+  styles: `
+    .outpayced-logo {
+      width: 97px;
+      height: 30px;
+      mask-image: url('/assets/img/components/topnav/demos/brand/outpayced-logo.svg');
+      background-color: currentColor;
+    }
+  `,
+  imports: [DfAppContainer, DfTopNav, DfTopNavBrand, DfTopNavBrandLinkContent, FormField]
+})
+export class DfDemoTopNavBrand {
+  readonly showModule = signal(false);
+  readonly showModuleForm = form(this.showModule);
+
+  readonly showCustomLink = signal(false);
+  readonly showCustomLinkForm = form(this.showCustomLink);
+
+  readonly showVectorLogo = signal(false);
+  readonly showVectorLogoForm = form(this.showVectorLogo, (schemaPath) => {
+    disabled(schemaPath, { when: () => this.showCustomLink() });
+  });
+}

package/.ai/docs/demos/topnav/environment-banner/topnav-environment-banner.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { DfAppContainer, DfEnvBanner, DfTopNav, DfTopNavBrand } from '@design-factory/angular/topnav';
+
+@Component({
+  selector: 'df-demo-topnav-environment-banner',
+  template: `
+    <df-app-container>
+      <df-topnav>
+        <df-topnav-brand product="Design Factory" href="." />
+      </df-topnav>
+      <df-env-banner>Test Environment</df-env-banner>
+      <main class="p-4 p-md-7">
+        <h3>Content</h3>
+        <p>Page content goes here</p>
+      </main>
+    </df-app-container>
+  `,
+  imports: [DfAppContainer, DfTopNav, DfTopNavBrand, DfEnvBanner]
+})
+export class DfDemoTopNavEnvironmentBanner {}

package/.ai/docs/demos/topnav/navigation/routes.ts

@@ -0,0 +1,35 @@
+import { Component } from '@angular/core';
+import type { Routes } from '@angular/router';
+
+@Component({
+  template: `Home Page`
+})
+export class Home {}
+
+@Component({
+  template: `Features Page`
+})
+export class Features {}
+
+@Component({
+  template: `Policy Page`
+})
+export class Policy {}
+
+@Component({
+  template: `Help Page`
+})
+export class Help {}
+
+@Component({
+  template: `Blog Page`
+})
+export class Blog {}
+
+export const childRoutes: Routes = [
+  { path: '', component: Home },
+  { path: 'features', component: Features },
+  { path: 'policy', component: Policy },
+  { path: 'help', component: Help },
+  { path: 'blog', component: Blog }
+];

package/.ai/docs/demos/topnav/navigation/topnav-navigation-flat.ts

@@ -0,0 +1,67 @@
+import { Component, signal } from '@angular/core';
+import { form, FormField } from '@angular/forms/signals';
+import { RouterOutlet } from '@angular/router';
+import {
+  DfAppContainer,
+  DfTopNav,
+  DfTopNavBrand,
+  DfTopNavNavigation,
+  DfTopNavNavigationLink
+} from '@design-factory/angular/topnav';
+export { childRoutes } from './routes';
+
+@Component({
+  selector: 'df-demo-topnav-navigation-flat',
+  template: `
+    <df-app-container>
+      <df-topnav>
+        <df-topnav-brand product="Design Factory" href="." />
+        <df-topnav-navigation>
+          <df-topnav-navigation-link routerLink="." label="Home" [routerLinkActiveOptions]="{ exact: true }" />
+          <df-topnav-navigation-link routerLink="./features" label="Features" />
+          <df-topnav-navigation-link href="https://amadeus.com/en" label="Amadeus.com" />
+          @if (showFlatSuperheader()) {
+            <df-topnav-navigation-link routerLink="./policy" label="Policy" />
+            <df-topnav-navigation-link routerLink="./help" label="Help" />
+            <df-topnav-navigation-link routerLink="./blog" label="Blog" />
+          }
+        </df-topnav-navigation>
+      </df-topnav>
+      <main class="p-4 p-md-7">
+        <div class="row">
+          <div class="col">
+            <h3>Options</h3>
+            <form class="form-sm">
+              <div class="form-check form-switch">
+                <input
+                  class="form-check-input"
+                  [formField]="showFlatSuperheaderForm"
+                  type="checkbox"
+                  id="showFlatSuperheader"
+                />
+                <label for="showFlatSuperheader" class="form-check-label">Show layout with many links</label>
+              </div>
+            </form>
+          </div>
+          <div class="col">
+            <h3>Page content</h3>
+            <router-outlet />
+          </div>
+        </div>
+      </main>
+    </df-app-container>
+  `,
+  imports: [
+    DfAppContainer,
+    DfTopNav,
+    DfTopNavBrand,
+    DfTopNavNavigation,
+    DfTopNavNavigationLink,
+    FormField,
+    RouterOutlet
+  ]
+})
+export class DfDemoTopNavNavigationFlat {
+  readonly showFlatSuperheader = signal(false);
+  readonly showFlatSuperheaderForm = form(this.showFlatSuperheader);
+}

package/.ai/docs/demos/topnav/navigation/topnav-navigation-tree.ts

@@ -0,0 +1,82 @@
+import { Component, signal } from '@angular/core';
+import { form, FormField } from '@angular/forms/signals';
+import { RouterOutlet } from '@angular/router';
+import {
+  DfAppContainer,
+  DfTopNav,
+  DfTopNavBrand,
+  DfTopNavNavigation,
+  DfTopNavNavigationItem,
+  DfTopNavNavigationLink
+} from '@design-factory/angular/topnav';
+export { childRoutes } from './routes';
+
+@Component({
+  selector: 'df-demo-topnav-navigation-tree',
+  template: `
+    <df-app-container>
+      <df-topnav [mode]="showDropdown() ? 'dropdown' : 'sidenav'">
+        <df-topnav-brand product="Design Factory" href="." />
+        <df-topnav-navigation>
+          <df-topnav-navigation-link routerLink="." label="Home" [routerLinkActiveOptions]="{ exact: true }" />
+          <df-topnav-navigation-item routerLink="./features" label="Features">
+            <df-topnav-navigation-link routerLink="./features/first" label="First Feature" />
+            <df-topnav-navigation-link routerLink="./features/second" label="Second Feature" />
+          </df-topnav-navigation-item>
+          <df-topnav-navigation-link routerLink="./pricing" label="Pricing" />
+          @if (showFlatSuperheader()) {
+            <df-topnav-navigation-link routerLink="./policy" label="Policy" />
+            <df-topnav-navigation-link routerLink="./help" label="Help" />
+            <df-topnav-navigation-item routerLink="./blog" label="Blog">
+              <df-topnav-navigation-link routerLink="./blog/2026-02-26" label="End of Chinese New Year" />
+              <df-topnav-navigation-link routerLink="./blog/2026-01-01" label="Restrospective of 2025" />
+            </df-topnav-navigation-item>
+          }
+        </df-topnav-navigation>
+      </df-topnav>
+      <main class="p-4 p-md-7">
+        <div class="row">
+          <div class="col">
+            <h3>Options</h3>
+            <form class="form-sm">
+              <div class="form-check form-switch">
+                <input
+                  class="form-check-input"
+                  [formField]="showFlatSuperheaderForm"
+                  type="checkbox"
+                  id="showFlatSuperheader"
+                />
+                <label for="showFlatSuperheader" class="form-check-label">Show layout with many links</label>
+              </div>
+              <div class="form-check form-switch">
+                <input class="form-check-input" [formField]="showDropdownForm" type="checkbox" id="showDropdown" />
+                <label for="showDropdown" class="form-check-label">Use dropdown mode</label>
+              </div>
+            </form>
+          </div>
+          <div class="col">
+            <h3>Page content</h3>
+            <router-outlet />
+          </div>
+        </div>
+      </main>
+    </df-app-container>
+  `,
+  imports: [
+    DfAppContainer,
+    DfTopNav,
+    DfTopNavBrand,
+    DfTopNavNavigation,
+    DfTopNavNavigationLink,
+    DfTopNavNavigationItem,
+    FormField,
+    RouterOutlet
+  ]
+})
+export class DfDemoTopNavNavigationTree {
+  readonly showFlatSuperheader = signal(false);
+  readonly showFlatSuperheaderForm = form(this.showFlatSuperheader);
+
+  readonly showDropdown = signal(false);
+  readonly showDropdownForm = form(this.showDropdown);
+}