@julianoczkowski/create-trimble-app 2.0.0

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

@@ -0,0 +1,193 @@
+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 { ModusDateComponent } from '../../components/modus-date.component';
+
+/**
+ * Demo page showcasing the Modus Date component.
+ *
+ * Demonstrates date input features including:
+ * - Basic date input
+ * - Different sizes (sm, md, lg)
+ * - Date formats
+ * - Min and max date constraints
+ * - Feedback messages
+ * - Disabled and read-only states
+ * - Required field
+ */
+@Component({
+  selector: 'app-date-demo-page',
+  standalone: true,
+  imports: [CommonModule, DemoPageComponent, DemoExampleComponent, ModusDateComponent],
+  template: `
+    <demo-page
+      title="Modus Date"
+      description="Date inputs allow users to select dates from a calendar picker or enter dates manually. Use date inputs for birth dates, appointment scheduling, date ranges, and any scenario requiring date selection."
+    >
+      <demo-example
+        title="Basic Date Input"
+        description="Simple date input with label for date selection."
+      >
+        <div class="flex flex-col gap-4">
+          <modus-date label="Select Date" [value]="selectedDate()" (inputChange)="handleDateChange($event)" />
+          @if (selectedDate()) {
+            <div class="mt-4 p-4 rounded-lg bg-muted text-muted-foreground">
+              <div class="font-semibold mb-2">Selected Date:</div>
+              <div class="text-sm">{{ selectedDate() }}</div>
+            </div>
+          }
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Date Sizes"
+        description="Different sizes for various contexts and visual hierarchy."
+      >
+        <div class="flex flex-col gap-4">
+          <modus-date label="Small Date Input" size="sm" />
+          <modus-date label="Medium Date Input (Default)" size="md" />
+          <modus-date label="Large Date Input" size="lg" />
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Date Formats"
+        description="Different date format options for various locales and preferences."
+      >
+        <div class="flex flex-col gap-4">
+          <modus-date label="YYYY-MM-DD Format" format="yyyy-mm-dd" />
+          <modus-date label="DD-MM-YYYY Format" format="dd-mm-yyyy" />
+          <modus-date label="YYYY/MM/DD Format" format="yyyy/mm/dd" />
+          <modus-date label="DD/MM/YYYY Format" format="dd/mm/yyyy" />
+          <modus-date label="MMM DD, YYYY Format" format="MMM DD, YYYY" />
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Date Constraints"
+        description="Set minimum and maximum dates to restrict date selection."
+      >
+        <div class="flex flex-col gap-4">
+          <modus-date
+            label="Start Date (Min: Today)"
+            [min]="minDate()"
+            [value]="startDate()"
+            (inputChange)="handleStartDateChange($event)"
+          />
+          <modus-date
+            label="End Date (Max: 1 Year from Start)"
+            [min]="startDate()"
+            [max]="maxDate()"
+            [value]="endDate()"
+            (inputChange)="handleEndDateChange($event)"
+          />
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Feedback Messages"
+        description="Display validation feedback with different severity levels."
+      >
+        <div class="flex flex-col gap-4">
+          <modus-date
+            label="Date with Success Feedback"
+            [feedback]="{
+              level: 'success',
+              message: 'Date is valid'
+            }"
+          />
+          <modus-date
+            label="Date with Warning Feedback"
+            [feedback]="{
+              level: 'warning',
+              message: 'Please verify the date'
+            }"
+          />
+          <modus-date
+            label="Date with Error Feedback"
+            [feedback]="{
+              level: 'error',
+              message: 'Invalid date format'
+            }"
+          />
+          <modus-date
+            label="Date with Info Feedback"
+            [feedback]="{
+              level: 'info',
+              message: 'Select a date within the next 30 days'
+            }"
+          />
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Disabled and Read-Only States"
+        description="Date inputs in disabled and read-only states."
+      >
+        <div class="flex flex-col gap-4">
+          <modus-date label="Disabled Date Input" [disabled]="true" value="2024-01-15" />
+          <modus-date label="Read-Only Date Input" [readOnly]="true" value="2024-06-20" />
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Required Field"
+        description="Mark date inputs as required for form validation."
+      >
+        <div class="flex flex-col gap-4">
+          <modus-date label="Birth Date (Required)" [required]="true" />
+          <modus-date label="Appointment Date (Required)" [required]="true" />
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Bordered and Borderless"
+        description="Date inputs with and without borders."
+      >
+        <div class="flex flex-col gap-4">
+          <modus-date label="Bordered Date Input (Default)" [bordered]="true" />
+          <modus-date label="Borderless Date Input" [bordered]="false" />
+        </div>
+      </demo-example>
+    </demo-page>
+  `,
+})
+export class DateDemoPageComponent {
+  readonly selectedDate = signal<string>('');
+  readonly startDate = signal<string>('');
+  readonly endDate = signal<string>('');
+
+  readonly minDate = signal<string>(this.getTodayDate());
+  readonly maxDate = signal<string>(this.getOneYearFromNowDate());
+
+  private getTodayDate(): string {
+    const today = new Date();
+    return today.toISOString().split('T')[0];
+  }
+
+  private getOneYearFromNowDate(): string {
+    const oneYearFromNow = new Date();
+    oneYearFromNow.setFullYear(oneYearFromNow.getFullYear() + 1);
+    return oneYearFromNow.toISOString().split('T')[0];
+  }
+
+  handleDateChange(event: InputEvent): void {
+    const target = event.target as HTMLInputElement;
+    this.selectedDate.set(target.value);
+    console.log('Date changed:', target.value);
+  }
+
+  handleStartDateChange(event: InputEvent): void {
+    const target = event.target as HTMLInputElement;
+    this.startDate.set(target.value);
+    console.log('Start date changed:', target.value);
+  }
+
+  handleEndDateChange(event: InputEvent): void {
+    const target = event.target as HTMLInputElement;
+    this.endDate.set(target.value);
+    console.log('End date changed:', target.value);
+  }
+}
+

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

@@ -0,0 +1,196 @@
+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 { ModusDropdownMenuComponent } from '../../components/modus-dropdown-menu.component';
+import { ModusMenuComponent } from '../../components/modus-menu.component';
+import { ModusMenuItemComponent } from '../../components/modus-menu-item.component';
+
+/**
+ * Demo page showcasing the Modus Dropdown Menu component.
+ *
+ * Demonstrates dropdown menu features including:
+ * - Basic dropdown menu
+ * - Custom button styling
+ * - Menu placement options
+ * - Different button colors and variants
+ * - Menu with icons
+ * - Event handling
+ */
+@Component({
+  selector: 'app-dropdown-demo-page',
+  standalone: true,
+  imports: [
+    CommonModule,
+    DemoPageComponent,
+    DemoExampleComponent,
+    ModusDropdownMenuComponent,
+    ModusMenuComponent,
+    ModusMenuItemComponent,
+  ],
+  template: `
+    <demo-page
+      title="Modus Dropdown Menu"
+      description="Dropdown menus provide a compact way to display multiple actions or options in a menu that opens on demand."
+    >
+      <demo-example
+        title="Button Colors"
+        description="Dropdown menus with different button colors."
+      >
+        <div class="flex flex-wrap gap-4">
+          <modus-dropdown-menu buttonAriaLabel="Primary menu" [buttonColor]="'primary'">
+            <span slot="button">Primary</span>
+            <div slot="menu">
+              <modus-menu>
+                <modus-menu-item label="Option 1" value="option1" />
+                <modus-menu-item label="Option 2" value="option2" />
+              </modus-menu>
+            </div>
+          </modus-dropdown-menu>
+
+          <modus-dropdown-menu buttonAriaLabel="Secondary menu" [buttonColor]="'secondary'">
+            <span slot="button">Secondary</span>
+            <div slot="menu">
+              <modus-menu>
+                <modus-menu-item label="Option 1" value="option1" />
+                <modus-menu-item label="Option 2" value="option2" />
+              </modus-menu>
+            </div>
+          </modus-dropdown-menu>
+
+          <modus-dropdown-menu buttonAriaLabel="Tertiary menu" [buttonColor]="'tertiary'">
+            <span slot="button">Tertiary</span>
+            <div slot="menu">
+              <modus-menu>
+                <modus-menu-item label="Option 1" value="option1" />
+                <modus-menu-item label="Option 2" value="option2" />
+              </modus-menu>
+            </div>
+          </modus-dropdown-menu>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Button Variants"
+        description="Dropdown menus with different button visual styles."
+      >
+        <div class="flex flex-wrap gap-4">
+          <modus-dropdown-menu buttonAriaLabel="Filled menu" [buttonVariant]="'filled'">
+            <span slot="button">Filled</span>
+            <div slot="menu">
+              <modus-menu>
+                <modus-menu-item label="Action 1" value="action1" />
+                <modus-menu-item label="Action 2" value="action2" />
+              </modus-menu>
+            </div>
+          </modus-dropdown-menu>
+
+          <modus-dropdown-menu buttonAriaLabel="Outlined menu" [buttonVariant]="'outlined'">
+            <span slot="button">Outlined</span>
+            <div slot="menu">
+              <modus-menu>
+                <modus-menu-item label="Action 1" value="action1" />
+                <modus-menu-item label="Action 2" value="action2" />
+              </modus-menu>
+            </div>
+          </modus-dropdown-menu>
+
+          <modus-dropdown-menu buttonAriaLabel="Borderless menu" [buttonVariant]="'borderless'">
+            <span slot="button">Borderless</span>
+            <div slot="menu">
+              <modus-menu>
+                <modus-menu-item label="Action 1" value="action1" />
+                <modus-menu-item label="Action 2" value="action2" />
+              </modus-menu>
+            </div>
+          </modus-dropdown-menu>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Custom Button Content"
+        description="Dropdown menus with custom button content including icons."
+      >
+        <div class="flex flex-wrap gap-4">
+          <modus-dropdown-menu buttonAriaLabel="Icon menu">
+            <div slot="button" class="flex items-center gap-2">
+              <i class="modus-icons text-lg">settings</i>
+              <span>Settings</span>
+            </div>
+            <div slot="menu">
+              <modus-menu>
+                <modus-menu-item label="Preferences" value="prefs" />
+                <modus-menu-item label="Account" value="account" />
+              </modus-menu>
+            </div>
+          </modus-dropdown-menu>
+
+          <modus-dropdown-menu buttonAriaLabel="User menu">
+            <div slot="button" class="flex items-center gap-2">
+              <i class="modus-icons text-lg">user_account</i>
+              <span>User Menu</span>
+              <i class="modus-icons text-sm">expand_more</i>
+            </div>
+            <div slot="menu">
+              <modus-menu>
+                <modus-menu-item label="Profile" value="profile" />
+                <modus-menu-item label="Settings" value="settings" />
+                <modus-menu-item label="Log out" value="logout" />
+              </modus-menu>
+            </div>
+          </modus-dropdown-menu>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Menu Placement"
+        description="Different menu placement options relative to the button."
+      >
+        <div class="flex flex-wrap gap-4">
+          <modus-dropdown-menu buttonAriaLabel="Bottom start menu" [menuPlacement]="'bottom-start'">
+            <span slot="button">Bottom Start</span>
+            <div slot="menu">
+              <modus-menu>
+                <modus-menu-item label="Item 1" value="item1" />
+                <modus-menu-item label="Item 2" value="item2" />
+              </modus-menu>
+            </div>
+          </modus-dropdown-menu>
+
+          <modus-dropdown-menu buttonAriaLabel="Bottom end menu" [menuPlacement]="'bottom-end'">
+            <span slot="button">Bottom End</span>
+            <div slot="menu">
+              <modus-menu>
+                <modus-menu-item label="Item 1" value="item1" />
+                <modus-menu-item label="Item 2" value="item2" />
+              </modus-menu>
+            </div>
+          </modus-dropdown-menu>
+
+          <modus-dropdown-menu buttonAriaLabel="Top start menu" [menuPlacement]="'top-start'">
+            <span slot="button">Top Start</span>
+            <div slot="menu">
+              <modus-menu>
+                <modus-menu-item label="Item 1" value="item1" />
+                <modus-menu-item label="Item 2" value="item2" />
+              </modus-menu>
+            </div>
+          </modus-dropdown-menu>
+        </div>
+      </demo-example>
+
+      <demo-example title="Disabled State" description="Dropdown menu in disabled state.">
+        <modus-dropdown-menu buttonAriaLabel="Disabled menu" [disabled]="true">
+          <span slot="button">Disabled Menu</span>
+          <div slot="menu">
+            <modus-menu>
+              <modus-menu-item label="Item 1" value="item1" />
+              <modus-menu-item label="Item 2" value="item2" />
+            </modus-menu>
+          </div>
+        </modus-dropdown-menu>
+      </demo-example>
+    </demo-page>
+  `,
+})
+export class DropdownDemoPageComponent {}

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

@@ -0,0 +1,176 @@
+import { Component, ViewChild, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DemoPageComponent } from '../shared/demo-page.component';
+import { DemoExampleComponent } from '../shared/demo-example.component';
+import { ModusFileDropzoneComponent } from '../../components/modus-file-dropzone.component';
+import { ModusButtonComponent } from '../../components/modus-button.component';
+import { ModusProgressComponent } from '../../components/modus-progress.component';
+
+/**
+ * Demo page showcasing the Modus File Dropzone component.
+ */
+@Component({
+  selector: 'app-file-dropzone-demo-page',
+  standalone: true,
+  imports: [
+    CommonModule,
+    DemoPageComponent,
+    DemoExampleComponent,
+    ModusFileDropzoneComponent,
+    ModusButtonComponent,
+    ModusProgressComponent,
+  ],
+  template: `
+    <demo-page
+      title="Modus File Dropzone"
+      description="File dropzone allows users to drag and drop files for upload, with built-in validation for file types, sizes, counts, and filename lengths."
+    >
+      <demo-example title="Basic File Dropzone" description="A simple file dropzone accepting document files.">
+        <modus-file-dropzone
+          acceptFileTypes=".doc, .docx, .pdf"
+          instructions="Drag files here or browse to upload (.doc, .docx, .pdf)"
+          (fileSelect)="handleFileSelect($event)"
+        />
+        @if (selectedFiles().length > 0) {
+          <div class="mt-4 p-4 bg-muted rounded-lg border-default">
+            <div class="text-sm font-medium text-foreground mb-2">Selected Files:</div>
+            <div class="text-sm text-muted-foreground space-y-1">
+              @for (file of selectedFiles(); track file) {
+                <div>{{ file }}</div>
+              }
+            </div>
+          </div>
+        }
+      </demo-example>
+
+      <demo-example title="Multiple File Selection" description="Allow users to select multiple files at once.">
+        <modus-file-dropzone
+          acceptFileTypes="image/*"
+          [multiple]="true"
+          instructions="Select multiple image files (drag or click)"
+        />
+      </demo-example>
+
+      <demo-example
+        title="With Validation Constraints"
+        description="Set limits on file count, total size, and filename length."
+      >
+        <modus-file-dropzone
+          acceptFileTypes=".doc, .docx, .pdf"
+          [multiple]="true"
+          [maxFileCount]="3"
+          [maxFileNameLength]="20"
+          [maxTotalFileSizeBytes]="10485760"
+          invalidFileTypeMessage="Invalid file format. Please upload .doc, .docx, or .pdf files."
+          instructions="Upload files (max 3 files, 10MB total, filename max 20 chars)"
+        />
+      </demo-example>
+
+      <demo-example title="Custom Messages" description="Customize success, error, and drag-over messages.">
+        <modus-file-dropzone
+          acceptFileTypes=".jpg, .jpeg, .png, .gif"
+          [multiple]="true"
+          instructions="Upload your images here"
+          fileDraggedOverInstructions="Release to upload your images"
+          successMessage="Images uploaded successfully!"
+          invalidFileTypeMessage="Only image files (.jpg, .png, .gif) are allowed"
+        />
+      </demo-example>
+
+      <demo-example title="With Progress Indicator" description="Add custom content like progress bars.">
+        <div class="flex flex-col gap-4">
+          <modus-file-dropzone
+            acceptFileTypes=".pdf, .doc, .docx"
+            successMessage="Files ready for upload!"
+            instructions="Drag files here or browse to upload"
+            (fileSelect)="simulateUpload()"
+          >
+            @if (uploadProgress() > 0 && uploadProgress() < 100) {
+              <div slot="dropzone" class="w-64 mt-4">
+                <modus-progress [value]="uploadProgress()" [label]="uploadProgress() + '% Uploaded'" />
+              </div>
+            }
+          </modus-file-dropzone>
+          @if (uploadProgress() === 100) {
+            <div class="text-sm text-success">Upload complete!</div>
+          }
+        </div>
+      </demo-example>
+
+      <demo-example title="Without State Icon" description="Hide the state icons for a minimal appearance.">
+        <modus-file-dropzone
+          acceptFileTypes=".csv, .xlsx"
+          [includeStateIcon]="false"
+          instructions="Drop spreadsheet files here (.csv, .xlsx)"
+        />
+      </demo-example>
+
+      <demo-example title="Disabled State" description="Disable the dropzone when file upload is not available.">
+        <modus-file-dropzone [disabled]="true" instructions="File upload is currently disabled" />
+      </demo-example>
+
+      <demo-example title="Programmatic Reset" description="Reset the dropzone state using a reference.">
+        <div class="flex flex-col gap-4">
+          <modus-file-dropzone
+            #resetDropzone
+            acceptFileTypes=".txt, .md"
+            instructions="Upload text files, then use the reset button"
+          />
+          <modus-button variant="outlined" color="secondary" (buttonClick)="handleReset()">
+            Reset Dropzone
+          </modus-button>
+        </div>
+      </demo-example>
+    </demo-page>
+  `,
+})
+export class FileDropzoneDemoPageComponent {
+  @ViewChild('resetDropzone') private readonly resetDropzone?: ModusFileDropzoneComponent;
+
+  readonly selectedFiles = signal<string[]>([]);
+  readonly uploadProgress = signal<number>(0);
+
+  private uploadIntervalId: number | undefined;
+
+  handleFileSelect(files: FileList): void {
+    const fileNames: string[] = [];
+    for (let i = 0; i < files.length; i += 1) {
+      fileNames.push(`${files[i].name} (${this.formatFileSize(files[i].size)})`);
+    }
+    this.selectedFiles.set(fileNames);
+  }
+
+  async handleReset(): Promise<void> {
+    await this.resetDropzone?.reset();
+    this.selectedFiles.set([]);
+  }
+
+  simulateUpload(): void {
+    this.uploadProgress.set(0);
+    if (this.uploadIntervalId) {
+      window.clearInterval(this.uploadIntervalId);
+    }
+    this.uploadIntervalId = window.setInterval(() => {
+      this.uploadProgress.update((value) => {
+        if (value >= 100) {
+          if (this.uploadIntervalId) {
+            window.clearInterval(this.uploadIntervalId);
+            this.uploadIntervalId = undefined;
+          }
+          return 100;
+        }
+        return value + 10;
+      });
+    }, 300);
+  }
+
+  private formatFileSize(bytes: number): string {
+    if (bytes === 0) {
+      return '0 Bytes';
+    }
+    const kilo = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const index = Math.floor(Math.log(bytes) / Math.log(kilo));
+    return `${parseFloat((bytes / Math.pow(kilo, index)).toFixed(2))} ${sizes[index]}`;
+  }
+}