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

package/.ai/docs/demos/topnav/quick-actions/notifications.ts

@@ -0,0 +1,75 @@
+import { Component, computed, inject, Service, signal, ViewEncapsulation } from '@angular/core';
+import { DfInsertIconDirective } from '@design-factory/design-factory/icon';
+import { NgbToast } from '@ng-bootstrap/ng-bootstrap/toast';
+
+type Notification = {
+  type: string;
+  message: string;
+};
+
+@Service()
+export class DfDemoNotificationsService {
+  private readonly _notifications = signal<Notification[]>([
+    {
+      type: 'warning',
+      message: 'Your session will expire in 5 minutes.'
+    },
+    {
+      type: 'danger',
+      message: 'An error occurred while processing your request.'
+    }
+  ]);
+  readonly notifications = this._notifications.asReadonly();
+  readonly count = computed(() => this._notifications().length);
+
+  close(notification: Notification) {
+    this._notifications.update((notifications) => notifications.filter((n) => n !== notification));
+  }
+}
+
+@Component({
+  selector: 'df-demo-notifications',
+  template: `
+    <div class="d-flex flex-column gap-3 notification-center">
+      @for (notification of notifications(); track notification) {
+        <ngb-toast
+          dfInsertToastIcon
+          [class]="'df-toast-subtle toast-' + notification.type"
+          (hidden)="close(notification)"
+          [autohide]="false"
+          #toast
+        >
+          <span class="me-auto">{{ notification.message }}</span>
+          <button
+            type="button"
+            aria-label="Close this notification"
+            class="btn btn-sm btn-outline-neutral df-btn-tertiary df-btn-icononly fal fa-xmark ms-5"
+            (click)="toast.hide()"
+          ></button>
+        </ngb-toast>
+      }
+      @if (notifications().length === 0) {
+        <div class="text-center text-muted px-5">No notifications</div>
+      }
+    </div>
+  `,
+  imports: [NgbToast, DfInsertIconDirective],
+  styles: `
+    .notification-center {
+      .toast-body {
+        flex-grow: 1;
+        display: flex;
+        align-items: center;
+      }
+    }
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class DfDemoNotifications {
+  private readonly notificationsService = inject(DfDemoNotificationsService);
+  readonly notifications = this.notificationsService.notifications;
+
+  close(notification: Notification) {
+    this.notificationsService.close(notification);
+  }
+}

package/.ai/docs/demos/topnav/quick-actions/topnav-quick-actions.ts

@@ -0,0 +1,108 @@
+import { Component, inject, TemplateRef } from '@angular/core';
+import {
+  DfAppContainer,
+  DfTopNav,
+  DfTopNavBrand,
+  DfTopNavQuickActions,
+  DfTopNavQuickActionButton,
+  DfTopNavQuickActionButtonContent,
+  DfTopNavQuickActionButtonIcon,
+  DfTopNavQuickActionSearch,
+  DfTopNavQuickActionSearchInput,
+  DfTopNavQuickActionThemePicker
+} from '@design-factory/angular/topnav';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap/modal';
+import { DfDemoNotifications, DfDemoNotificationsService } from './notifications';
+import { DfDemoUserAccount } from './user-account';
+
+@Component({
+  selector: 'df-demo-topnav-quick-actions',
+  template: `
+    <df-app-container>
+      <df-topnav>
+        <df-topnav-brand product="Design Factory" href="." />
+        <df-topnav-quick-actions>
+          <df-topnav-quick-action-search>
+            <ng-template>
+              <input dfTopNavQuickActionSearchInput placeholder="Search" aria-label="Search" />
+            </ng-template>
+          </df-topnav-quick-action-search>
+          <df-topnav-quick-action-button label="Support" icon="fa-question-circle" (act)="openSupportModal(content)" />
+          <df-topnav-quick-action-button label="Notifications">
+            <ng-template dfTopNavQuickActionButtonContent>
+              <df-demo-notifications />
+            </ng-template>
+            <ng-template dfTopNavQuickActionButtonIcon>
+              <span class="fal fa-bell position-relative">
+                @if (notificationsCount() > 0) {
+                  <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger rounded-circle">
+                    <span class="visually-hidden">New notifications</span>
+                  </span>
+                }
+              </span>
+            </ng-template>
+          </df-topnav-quick-action-button>
+          <df-topnav-quick-action-button label="Login" icon="fa-user" appearance="primary">
+            <ng-template dfTopNavQuickActionButtonContent>
+              <df-demo-user-account />
+            </ng-template>
+          </df-topnav-quick-action-button>
+          <df-topnav-quick-action-theme-picker
+            [themeOptions]="[
+              { themeMode: 'auto', icon: 'fa-circle-half-stroke' },
+              { themeMode: 'light', icon: 'fa-sun-bright' },
+              { themeMode: 'dark', icon: 'fa-moon-stars' }
+            ]"
+          />
+        </df-topnav-quick-actions>
+      </df-topnav>
+      <main class="p-4 p-md-7">
+        <h3>Content</h3>
+        <p>Page content goes here</p>
+      </main>
+    </df-app-container>
+    <ng-template #content let-c="close" let-d="dismiss">
+      <div class="modal-header">
+        <h2 class="modal-title"><span class="fal fa-question-circle me-3"></span>Support</h2>
+        <button type="button" class="btn-close" aria-label="Close Modal title" (click)="d('Cross click')"></button>
+      </div>
+      <div class="modal-body">
+        <p>Do you have a question regarding Design Factory?</p>
+        <div>Please contact us through one of the below channels:</div>
+        <ul>
+          <li><a href="mailto:DesignFactory@amadeus.com">Email</a></li>
+          <li>
+            <a
+              href="https://teams.microsoft.com/l/channel/19%3a62d392ad248d42cd96e82b19fefded61%40thread.skype/General?groupId=1ff908fc-ef5f-4666-8c63-b564173731d0&tenantId=b3f4f7c2-72ce-4192-aba4-d6c7719b5766"
+              target="_blank"
+              >Teams Channel</a
+            >
+          </li>
+          <li>Check <a href="https://design-factory.amadeus.net/help" target="_blank">Our FAQ</a></li>
+        </ul>
+      </div>
+    </ng-template>
+  `,
+  imports: [
+    DfAppContainer,
+    DfTopNav,
+    DfTopNavBrand,
+    DfTopNavQuickActions,
+    DfTopNavQuickActionButton,
+    DfTopNavQuickActionButtonContent,
+    DfTopNavQuickActionButtonIcon,
+    DfTopNavQuickActionSearch,
+    DfTopNavQuickActionSearchInput,
+    DfTopNavQuickActionThemePicker,
+    DfDemoNotifications,
+    DfDemoUserAccount
+  ]
+})
+export class DfDemoTopNavQuickActions {
+  private readonly modal = inject(NgbModal);
+  readonly notificationsCount = inject(DfDemoNotificationsService).count;
+
+  openSupportModal(content: TemplateRef<unknown>) {
+    this.modal.open(content);
+  }
+}

package/.ai/docs/demos/topnav/quick-actions/user-account.ts

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { DfButton } from '@design-factory/angular/button';
+
+@Component({
+  selector: 'df-demo-user-account',
+  template: `
+    <div class="d-flex align-items-center gap-2">
+      <span class="fal fa-user"></span>
+      <strong>JSMITH</strong>
+    </div>
+    <hr class="my-3" />
+    <button dfButton appearance="text">
+      <span class="fal fa-sign-out"></span>
+      <span>Sign out</span>
+    </button>
+  `,
+  host: {
+    '[style.display]': "'block'",
+    '[style.min-width.px]': '180'
+  },
+  imports: [DfButton]
+})
+export class DfDemoUserAccount {}

package/.ai/index.md

@@ -0,0 +1,26 @@
+# Design Factory -- AI Documentation
+
+This documentation is auto-generated from the Design Factory portal.
+
+## Components
+
+| Component | Description | Docs | Demos |
+|-----------|-------------|------|-------|
+| Accordion | An accordion is an expandable section that contains a header that reveals or hides associated content. It helps structure information in a compact layout by allowing users to focus on one part at a time. | [docs](docs/components/accordion/) | [demos](docs/demos/accordion/) |
+| Alert | The Alert component highlights non-blocking contextual information to users such as confirmations, warnings, errors, and general messages. | [docs](docs/components/alert/) | [demos](docs/demos/alert/) |
+| Button | Buttons communicate the action that will occur when users activate them. | [docs](docs/components/button/) | [demos](docs/demos/button/) |
+| Button group | Used to put together buttons with similar actions | [docs](docs/components/buttongroup/) | [demos](docs/demos/buttongroup/) |
+| Drawer | Enables users to show contextual content via a sliding panel from any screen edge. | [docs](docs/components/drawer/) | [demos](docs/demos/drawer/) |
+| Dropdown | The dropdown displays a list of actions or predefined choices from which users can trigger only one action. | [docs](docs/components/dropdown/) | [demos](docs/demos/dropdown/) |
+| SideNav | The SideNav, short for side navigation, is a vertical menu anchored to the side of a user interface. It is used to provide quick and consistent access to key sections of an application or website. | [docs](docs/components/sidenav/) | [demos](docs/demos/sidenav/) |
+| Tooltip | Appears when users interact with an element, and includes a short informative message to guide them | [docs](docs/components/tooltip/) | [demos](docs/demos/tooltip/) |
+| TopNav | The TopNav (Top Navigation Bar) provides consistent access to product-level navigation and global actions across Amadeus applications. | [docs](docs/components/topnav/) | [demos](docs/demos/topnav/) |
+
+Each component directory includes an `api.md` with selectors, inputs, and outputs (when available).
+
+## Usage rules
+
+- Always use Design Factory CSS classes and Angular components instead of custom implementations.
+- Use design tokens (CSS custom properties) for colors, spacing, and typography -- never hard-code values.
+- Follow the do/don't guidelines in each component doc.
+- Components prefixed with `df-` are Angular components; CSS-only components use Bootstrap-style class names.