@julianoczkowski/create-trimble-app 2.0.0

package/templates/angular/src/app/demos/menu/menu-demo.component.ts

@@ -0,0 +1,72 @@
+import { Component, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DemoPageComponent } from '../shared/demo-page.component';
+import { DemoExampleComponent } from '../shared/demo-example.component';
+import { ModusMenuComponent } from '../../components/modus-menu.component';
+import { ModusMenuItemComponent } from '../../components/modus-menu-item.component';
+
+/**
+ * Demo page showcasing the Modus Menu component.
+ *
+ * Demonstrates menu features including:
+ * - Vertical menu
+ * - Horizontal menu
+ * - Selected menu items
+ */
+@Component({
+  selector: 'app-menu-demo-page',
+  standalone: true,
+  imports: [
+    CommonModule,
+    DemoPageComponent,
+    DemoExampleComponent,
+    ModusMenuComponent,
+    ModusMenuItemComponent,
+  ],
+  template: `
+    <demo-page
+      title="Modus Menu"
+      description="Menus provide navigation and action lists. Use menus to organize related actions or navigation items in a consistent, accessible way."
+    >
+      <demo-example
+        title="Vertical Menu"
+        description="Default vertical menu orientation for navigation lists."
+      >
+        <modus-menu [bordered]="true">
+          <modus-menu-item label="Dashboard" value="dashboard" [selected]="true" />
+          <modus-menu-item label="Projects" value="projects" />
+          <modus-menu-item label="Reports" value="reports" />
+          <modus-menu-item label="Settings" value="settings" />
+        </modus-menu>
+      </demo-example>
+
+      <demo-example
+        title="Horizontal Menu"
+        description="Horizontal menu orientation for top navigation."
+      >
+        <modus-menu orientation="horizontal">
+          <modus-menu-item label="Home" value="home" />
+          <modus-menu-item label="Products" value="products" />
+          <modus-menu-item label="About" value="about" />
+          <modus-menu-item label="Contact" value="contact" />
+        </modus-menu>
+      </demo-example>
+
+      <demo-example
+        title="Selected Menu Items"
+        description="Menu with selected items to indicate current state."
+      >
+        <modus-menu [bordered]="true">
+          <modus-menu-item label="All Projects" value="all" [selected]="selectedMenu() === 'all'" />
+          <modus-menu-item label="Active" value="active" [selected]="selectedMenu() === 'active'" />
+          <modus-menu-item label="Archived" value="archived" [selected]="selectedMenu() === 'archived'" />
+          <modus-menu-item label="Deleted" value="deleted" [selected]="selectedMenu() === 'deleted'" />
+        </modus-menu>
+      </demo-example>
+
+    </demo-page>
+  `,
+})
+export class MenuDemoPageComponent {
+  readonly selectedMenu = signal<string>('all');
+}

package/templates/angular/src/app/demos/modal/modal-demo.component.ts

@@ -0,0 +1,278 @@
+import { Component, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DemoPageComponent } from '../shared/demo-page.component';
+import { DemoExampleComponent } from '../shared/demo-example.component';
+import { ModusModalComponent } from '../../components/modus-modal.component';
+import { ModusButtonComponent } from '../../components/modus-button.component';
+
+/**
+ * Demo page showcasing the Modus Modal component.
+ *
+ * Demonstrates modal features including:
+ * - Centered dialog
+ * - Position variants (top, bottom)
+ * - Fullscreen modal
+ * - Static backdrop
+ * - Custom styling
+ */
+@Component({
+  selector: 'app-modal-demo-page',
+  standalone: true,
+  imports: [
+    CommonModule,
+    DemoPageComponent,
+    DemoExampleComponent,
+    ModusModalComponent,
+    ModusButtonComponent,
+  ],
+  template: `
+    <demo-page
+      title="Modus Modal"
+      description="Modals focus attention on a short, interruptive task. Keep content concise and provide a clear primary action."
+    >
+      <demo-example
+        title="Centered Dialog"
+        description="Default centered modal for quick confirmations or lightweight forms."
+      >
+        <div class="space-y-4">
+          <modus-button
+            color="primary"
+            (buttonClick)="openModal('modal-centered')"
+            >Open Centered Modal</modus-button
+          >
+          <modus-modal
+            modalId="modal-centered"
+            [showClose]="true"
+            [backdrop]="'default'"
+            [position]="'center'"
+          >
+            <div slot="header" class="text-xl font-semibold text-foreground">
+              Archive project
+            </div>
+            <div slot="content" class="text-sm text-foreground-80">
+              Archived projects are hidden from your active workspace. You can restore them later
+              from the settings panel.
+            </div>
+            <div slot="footer" class="flex gap-2">
+              <modus-button
+                variant="borderless"
+                (buttonClick)="closeModal('modal-centered')"
+                >Cancel</modus-button
+              >
+              <modus-button
+                color="danger"
+                (buttonClick)="closeModal('modal-centered')"
+                >Archive</modus-button
+              >
+            </div>
+          </modus-modal>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Position Variants"
+        description="Different vertical positions for various use cases."
+      >
+        <div class="flex gap-4 flex-wrap">
+          <modus-button
+            color="primary"
+            (buttonClick)="openModal('modal-top')"
+            >Top Position</modus-button
+          >
+          <modus-button
+            color="primary"
+            (buttonClick)="openModal('modal-bottom')"
+            >Bottom Position</modus-button
+          >
+        </div>
+
+        <modus-modal
+          modalId="modal-top"
+          [showClose]="true"
+          [backdrop]="'default'"
+          [position]="'top'"
+        >
+          <div slot="header" class="text-xl font-semibold text-foreground">Top Modal</div>
+          <div slot="content" class="text-sm text-foreground-80">
+            This modal appears at the top of the screen. Useful for notifications or quick actions.
+          </div>
+          <div slot="footer" class="flex gap-2">
+            <modus-button
+              variant="borderless"
+              (buttonClick)="closeModal('modal-top')"
+              >Cancel</modus-button
+            >
+            <modus-button
+              (buttonClick)="closeModal('modal-top')"
+              >Confirm</modus-button
+            >
+          </div>
+        </modus-modal>
+
+        <modus-modal
+          modalId="modal-bottom"
+          [showClose]="true"
+          [backdrop]="'default'"
+          [position]="'bottom'"
+        >
+          <div slot="header" class="text-xl font-semibold text-foreground">Bottom Modal</div>
+          <div slot="content" class="text-sm text-foreground-80">
+            This modal appears at the bottom of the screen. Great for mobile interfaces.
+          </div>
+          <div slot="footer" class="flex gap-2">
+            <modus-button
+              variant="borderless"
+              (buttonClick)="closeModal('modal-bottom')"
+              >Cancel</modus-button
+            >
+            <modus-button
+              (buttonClick)="closeModal('modal-bottom')"
+              >Confirm</modus-button
+            >
+          </div>
+        </modus-modal>
+      </demo-example>
+
+      <demo-example
+        title="Fullscreen Modal"
+        description="Full-screen modals for complex workflows or detailed content."
+      >
+        <div class="space-y-4">
+          <modus-button
+            color="primary"
+            (buttonClick)="openModal('modal-fullscreen')"
+            >Open Fullscreen Modal</modus-button
+          >
+          <modus-modal
+            modalId="modal-fullscreen"
+            [showClose]="true"
+            [backdrop]="'default'"
+            [fullscreen]="true"
+            [showFullscreenToggle]="true"
+          >
+            <div slot="header" class="text-xl font-semibold text-foreground">
+              Fullscreen Modal
+            </div>
+            <div slot="content" class="space-y-4">
+              <div class="text-sm text-foreground-80">
+                This is a fullscreen modal that covers the entire viewport. Perfect for complex
+                forms or detailed content.
+              </div>
+              <div class="text-sm text-foreground-80">
+                You can toggle between fullscreen and normal size using the button in the header.
+              </div>
+            </div>
+            <div slot="footer" class="flex gap-2">
+              <modus-button
+                variant="borderless"
+                (buttonClick)="closeModal('modal-fullscreen')"
+                >Cancel</modus-button
+              >
+              <modus-button
+                (buttonClick)="closeModal('modal-fullscreen')"
+                >Save Changes</modus-button
+              >
+            </div>
+          </modus-modal>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Static Backdrop"
+        description="Modal that doesn't close when clicking outside - user must use explicit actions."
+      >
+        <div class="space-y-4">
+          <modus-button
+            color="primary"
+            (buttonClick)="openModal('modal-static')"
+            >Open Static Modal</modus-button
+          >
+          <modus-modal
+            modalId="modal-static"
+            [showClose]="true"
+            [backdrop]="'static'"
+          >
+            <div slot="header" class="text-xl font-semibold text-foreground">
+              Important Action
+            </div>
+            <div slot="content" class="text-sm text-foreground-80">
+              This modal has a static backdrop. Clicking outside won't close it - you must use the
+              buttons or press Escape.
+            </div>
+            <div slot="footer" class="flex gap-2">
+              <modus-button
+                variant="borderless"
+                (buttonClick)="closeModal('modal-static')"
+                >Cancel</modus-button
+              >
+              <modus-button
+                color="danger"
+                (buttonClick)="closeModal('modal-static')"
+                >Delete Forever</modus-button
+              >
+            </div>
+          </modus-modal>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Custom Styling"
+        description="Modal with custom dimensions and styling."
+      >
+        <div class="space-y-4">
+          <modus-button
+            color="primary"
+            (buttonClick)="openModal('modal-custom')"
+            >Open Custom Modal</modus-button
+          >
+          <modus-modal
+            modalId="modal-custom"
+            [showClose]="true"
+            [backdrop]="'default'"
+            [className]="'expanded-modal'"
+          >
+            <div slot="header" class="text-xl font-semibold text-foreground">
+              Custom Size Modal
+            </div>
+            <div slot="content" class="text-sm text-foreground-80">
+              This modal has custom dimensions applied via CSS classes. The modal is wider and
+              taller than the default.
+            </div>
+            <div slot="footer" class="flex gap-2">
+              <modus-button
+                variant="borderless"
+                (buttonClick)="closeModal('modal-custom')"
+                >Cancel</modus-button
+              >
+              <modus-button
+                (buttonClick)="closeModal('modal-custom')"
+                >Save</modus-button
+              >
+            </div>
+          </modus-modal>
+        </div>
+      </demo-example>
+    </demo-page>
+  `,
+})
+export class ModalDemoPageComponent {
+  /**
+   * Opens a modal by finding the dialog element using the modal ID.
+   */
+  openModal(modalId: string): void {
+    const dialog = document.getElementById(modalId) as HTMLDialogElement | null;
+    if (dialog && typeof dialog.showModal === 'function') {
+      dialog.showModal();
+    }
+  }
+
+  /**
+   * Closes a modal by finding the dialog element using the modal ID.
+   */
+  closeModal(modalId: string): void {
+    const dialog = document.getElementById(modalId) as HTMLDialogElement | null;
+    if (dialog && typeof dialog.close === 'function') {
+      dialog.close();
+    }
+  }
+}

package/templates/angular/src/app/demos/navbar/navbar-demo.component.ts

@@ -0,0 +1,135 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DemoPageComponent } from '../shared/demo-page.component';
+import { DemoExampleComponent } from '../shared/demo-example.component';
+import { ModusNavbarComponent, INavbarUserCard } from '../../components/modus-navbar.component';
+
+/**
+ * Demo page showcasing the Modus Navbar component.
+ *
+ * Demonstrates navbar features including:
+ * - Basic navbar with user card
+ * - Visibility controls
+ * - Condensed mode
+ * - Custom slots (start, center, end)
+ * - Event handling
+ */
+@Component({
+  selector: 'app-navbar-demo-page',
+  standalone: true,
+  imports: [CommonModule, DemoPageComponent, DemoExampleComponent, ModusNavbarComponent],
+  template: `
+    <demo-page
+      title="Modus Navbar"
+      description="The navbar provides a consistent top-level navigation and user controls. Use the navbar for primary navigation, user profile access, search, and application-wide actions."
+    >
+      <demo-example
+        title="Basic Navbar"
+        description="A basic navbar with user card and search functionality."
+      >
+        <div class="flex flex-col gap-4">
+          <modus-navbar
+            [userCard]="navbarUserCard"
+            [visibility]="{ user: true, search: true, searchInput: true }"
+          />
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Navbar with Help Button"
+        description="Navbar with user card and help button for accessing documentation and support."
+      >
+        <div class="flex flex-col gap-4">
+          <modus-navbar
+            [userCard]="navbarUserCard"
+            [visibility]="{ user: true, help: true }"
+            (helpClick)="handleHelpClick($event)"
+          />
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Navbar with All Buttons"
+        description="Navbar showing all available buttons: user, search, help, apps, notifications, and main menu."
+      >
+        <div class="flex flex-col gap-4">
+          <modus-navbar
+            [userCard]="navbarUserCard"
+            [visibility]="{
+              user: true,
+              search: true,
+              searchInput: true,
+              help: true,
+              apps: true,
+              notifications: true,
+              mainMenu: true,
+            }"
+            (helpClick)="handleHelpClick($event)"
+            (appsClick)="handleAppsClick($event)"
+            (notificationsClick)="handleNotificationsClick($event)"
+            (mainMenuOpenChange)="handleMainMenuOpenChange($event)"
+          />
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Condensed Navbar"
+        description="A condensed version of the navbar suitable for tighter spaces."
+      >
+        <div class="flex flex-col gap-4">
+          <modus-navbar
+            [userCard]="navbarUserCard"
+            [visibility]="{ user: true, mainMenu: true, notifications: true, help: true }"
+            [condensed]="true"
+          />
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Navbar with Custom Slots"
+        description="Navbar with custom content in start, center, and end slots."
+      >
+        <div class="flex flex-col gap-4">
+          <modus-navbar
+            [userCard]="navbarUserCard"
+            [visibility]="{ user: true, search: true, searchInput: true, help: true }"
+          >
+            <div slot="start" class="flex items-center gap-2">
+              <span class="text-sm text-foreground">Custom Start Content</span>
+            </div>
+            <div slot="center" class="flex items-center gap-2">
+              <span class="text-sm text-foreground">Custom Center Content</span>
+            </div>
+            <div slot="end" class="flex items-center gap-2">
+              <span class="text-sm text-foreground">Custom End Content</span>
+            </div>
+          </modus-navbar>
+        </div>
+      </demo-example>
+    </demo-page>
+  `,
+})
+export class NavbarDemoPageComponent {
+  readonly navbarUserCard: INavbarUserCard = {
+    name: 'John Doe',
+    email: 'john.doe@example.com',
+    avatarSrc: 'https://i.pravatar.cc/64?img=12',
+    avatarAlt: 'User avatar',
+  };
+
+  handleHelpClick(event: MouseEvent | KeyboardEvent): void {
+    console.log('Help button clicked', event);
+  }
+
+  handleAppsClick(event: MouseEvent | KeyboardEvent): void {
+    console.log('Apps button clicked', event);
+  }
+
+  handleNotificationsClick(event: MouseEvent | KeyboardEvent): void {
+    console.log('Notifications button clicked', event);
+  }
+
+  handleMainMenuOpenChange(event: boolean): void {
+    console.log(`Main menu ${event ? 'opened' : 'closed'}`);
+  }
+}

package/templates/angular/src/app/demos/number-input/number-input-demo.component.ts

@@ -0,0 +1,175 @@
+import { Component, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DemoPageComponent } from '../shared/demo-page.component';
+import { DemoExampleComponent } from '../shared/demo-example.component';
+import { ModusNumberInputComponent } from '../../components/modus-number-input.component';
+
+/**
+ * Demo page showcasing the Modus Number Input component.
+ *
+ * Demonstrates number input features including:
+ * - Basic number input
+ * - Sizes
+ * - Min/max/step validation
+ * - Currency symbol
+ * - With labels and feedback
+ */
+@Component({
+  selector: 'app-number-input-demo-page',
+  standalone: true,
+  imports: [
+    CommonModule,
+    DemoPageComponent,
+    DemoExampleComponent,
+    ModusNumberInputComponent,
+  ],
+  template: `
+    <demo-page
+      title="Modus Number Input"
+      description="Number inputs provide a controlled way to enter numeric values. Use number inputs for quantities, amounts, ratings, or any numeric data entry."
+    >
+      <demo-example title="Basic Number Input" description="Simple number input with label.">
+        <div class="flex flex-col gap-6">
+          <div class="flex flex-col gap-2">
+            <modus-number-input
+              inputId="quantity-input"
+              label="Quantity"
+              placeholder="0"
+              [step]="1"
+            />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <modus-number-input
+              inputId="price-input"
+              label="Price"
+              placeholder="0.00"
+              [step]="0.01"
+            />
+          </div>
+        </div>
+      </demo-example>
+
+      <demo-example title="Number Input Sizes" description="Number inputs in different sizes.">
+        <div class="flex flex-col gap-6">
+          <div class="flex flex-col gap-2">
+            <modus-number-input inputId="small-number" label="Small" size="sm" placeholder="0" />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <modus-number-input inputId="medium-number" label="Medium" size="md" placeholder="0" />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <modus-number-input inputId="large-number" label="Large" size="lg" placeholder="0" />
+          </div>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Number Input with Constraints"
+        description="Number inputs with min, max, and step values."
+      >
+        <div class="flex flex-col gap-6">
+          <div class="flex flex-col gap-2">
+            <modus-number-input
+              inputId="age-input"
+              label="Age"
+              placeholder="Enter age"
+              [min]="1"
+              [max]="120"
+              [step]="1"
+            />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <modus-number-input
+              inputId="percentage-input"
+              label="Percentage"
+              placeholder="0"
+              [min]="0"
+              [max]="100"
+              [step]="1"
+            />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <modus-number-input
+              inputId="decimal-input"
+              label="Decimal"
+              placeholder="0.0"
+              [min]="0"
+              [max]="10"
+              [step]="0.1"
+            />
+          </div>
+        </div>
+      </demo-example>
+
+      <demo-example title="Currency Number Input" description="Number input with currency symbol.">
+        <div class="flex flex-col gap-6">
+          <div class="flex flex-col gap-2">
+            <modus-number-input
+              inputId="usd-input"
+              label="USD Amount"
+              placeholder="0.00"
+              currencySymbol="$"
+              [step]="0.01"
+            />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <modus-number-input
+              inputId="eur-input"
+              label="EUR Amount"
+              placeholder="0.00"
+              currencySymbol="€"
+              [step]="0.01"
+            />
+          </div>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Interactive Example"
+        description="Number input with two-way binding and event handling."
+      >
+        <div class="flex flex-col gap-6">
+          <div class="flex flex-col gap-2">
+            <modus-number-input
+              inputId="interactive-number"
+              label="Enter a Number"
+              placeholder="0"
+              [value]="numberValue()"
+              [step]="1"
+              (inputChange)="handleNumberChange($event)"
+            />
+          </div>
+          @if (numberValue() !== null && numberValue() !== '') {
+          <div class="p-4 rounded-lg bg-card border-default">
+            <p class="text-sm text-foreground mb-2">
+              <strong>Current Value:</strong> {{ numberValue() }}
+            </p>
+            <p class="text-sm text-foreground">
+              <strong>Double Value:</strong> {{ getDoubleValue() }}
+            </p>
+          </div>
+          }
+        </div>
+      </demo-example>
+    </demo-page>
+  `,
+})
+export class NumberInputDemoPageComponent {
+  readonly numberValue = signal<string>('');
+
+  handleNumberChange(event: InputEvent): void {
+    const target = event.target as HTMLInputElement;
+    this.numberValue.set(target.value);
+  }
+
+  getDoubleValue(): number {
+    const num = parseFloat(this.numberValue());
+    return isNaN(num) ? 0 : num * 2;
+  }
+}