@julianoczkowski/create-trimble-app 2.0.0

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

@@ -0,0 +1,134 @@
+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 { ModusPaginationComponent } from '../../components/modus-pagination.component';
+import type { IPageChange } from '@trimble-oss/moduswebcomponents';
+
+/**
+ * Demo page showcasing the Modus Pagination component.
+ *
+ * Demonstrates pagination features including:
+ * - Basic pagination
+ * - Different sizes
+ * - Custom button text
+ * - Interactive pagination
+ */
+@Component({
+  selector: 'app-pagination-demo-page',
+  standalone: true,
+  imports: [CommonModule, DemoPageComponent, DemoExampleComponent, ModusPaginationComponent],
+  template: `
+    <demo-page
+      title="Modus Pagination"
+      description="Pagination components enable users to navigate through multiple pages of content. Use pagination for tables, lists, or any paginated content."
+    >
+      <demo-example
+        title="Basic Pagination"
+        description="Simple pagination with page count and current page."
+      >
+        <div class="flex flex-col gap-6">
+          <modus-pagination [count]="8" [page]="1" />
+          <modus-pagination [count]="5" [page]="3" />
+          <modus-pagination [count]="10" [page]="5" />
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Pagination Sizes"
+        description="Pagination in different sizes."
+      >
+        <div class="flex flex-col gap-6">
+          <div class="flex flex-col gap-2">
+            <p class="text-sm text-muted-foreground">Small</p>
+            <modus-pagination [count]="5" [page]="2" size="sm" />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <p class="text-sm text-muted-foreground">Medium (Default)</p>
+            <modus-pagination [count]="5" [page]="2" size="md" />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <p class="text-sm text-muted-foreground">Large</p>
+            <modus-pagination [count]="5" [page]="2" size="lg" />
+          </div>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Custom Button Text"
+        description="Pagination with custom previous and next button text."
+      >
+        <div class="flex flex-col gap-6">
+          <modus-pagination
+            [count]="5"
+            [page]="2"
+            prevButtonText="Previous"
+            nextButtonText="Next"
+          />
+          <modus-pagination
+            [count]="5"
+            [page]="3"
+            prevButtonText="←"
+            nextButtonText="→"
+          />
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Interactive Pagination"
+        description="Pagination with two-way binding and event handling."
+      >
+        <div class="flex flex-col gap-6">
+          <modus-pagination
+            [count]="paginationState().count"
+            [page]="paginationState().page"
+            (pageChange)="handlePageChange($event)"
+          />
+          <div class="p-4 rounded-lg bg-card border-default">
+            <p class="text-sm text-foreground">
+              <strong>Current Page:</strong> {{ paginationState().page }} / {{ paginationState().count }}
+            </p>
+            <p class="text-sm text-muted-foreground mt-2">
+              Click the pagination controls above to navigate between pages.
+            </p>
+          </div>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Real-World Example"
+        description="Pagination integrated with content display."
+      >
+        <div class="flex flex-col gap-6">
+          <div class="p-4 rounded-lg bg-card border-default">
+            <p class="text-sm text-foreground mb-2">
+              Showing page {{ paginationState().page }} of {{ paginationState().count }}
+            </p>
+            <p class="text-sm text-muted-foreground">
+              Items {{ (paginationState().page - 1) * 10 + 1 }}-{{ paginationState().page * 10 }} of
+              {{ paginationState().count * 10 }}
+            </p>
+          </div>
+          <modus-pagination
+            [count]="paginationState().count"
+            [page]="paginationState().page"
+            (pageChange)="handlePageChange($event)"
+          />
+        </div>
+      </demo-example>
+    </demo-page>
+  `,
+})
+export class PaginationDemoPageComponent {
+  readonly paginationState = signal<{ page: number; count: number }>({ page: 2, count: 8 });
+
+  handlePageChange(change: IPageChange): void {
+    this.paginationState.update((state) => ({
+      ...state,
+      page: change.newPage,
+    }));
+  }
+}
+

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

@@ -0,0 +1,235 @@
+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 { ModusPanelComponent } from '../../components/modus-panel.component';
+import { ModusButtonComponent } from '../../components/modus-button.component';
+import { ModusMenuComponent } from '../../components/modus-menu.component';
+import { ModusMenuItemComponent } from '../../components/modus-menu-item.component';
+
+/**
+ * Demo page showcasing the Modus Panel component.
+ */
+@Component({
+  selector: 'app-panel-demo-page',
+  standalone: true,
+  imports: [
+    CommonModule,
+    DemoPageComponent,
+    DemoExampleComponent,
+    ModusPanelComponent,
+    ModusButtonComponent,
+    ModusMenuComponent,
+    ModusMenuItemComponent,
+  ],
+  template: `
+    <demo-page
+      title="Modus Panel"
+      description="Panel is a layout component for organizing content with header, body, and footer sections. Ideal for side navigation, structured forms, and sectioned content areas."
+    >
+      <demo-example title="Basic Panel" description="A panel with header, body, and footer slots.">
+        <modus-panel width="280px" height="400px">
+          <div slot="header" class="p-4 border-bottom-default">
+            <div class="text-lg font-medium text-foreground">Panel Header</div>
+          </div>
+          <div slot="body" class="p-4">
+            <div class="text-sm text-foreground">
+              This is the body content of the panel. You can add any content here.
+            </div>
+            <div class="mt-4 text-sm text-muted-foreground">
+              Panels are great for organizing related content into distinct sections.
+            </div>
+          </div>
+          <div slot="footer" class="p-4 border-top-default flex gap-2">
+            <modus-button variant="outlined" color="secondary" size="sm">Cancel</modus-button>
+            <modus-button variant="filled" color="primary" size="sm">Save</modus-button>
+          </div>
+        </modus-panel>
+      </demo-example>
+
+      <demo-example
+        title="Floating Panel"
+        description="A floating panel with elevated shadow for overlay appearance."
+      >
+        <div class="p-8 bg-muted rounded-lg">
+          <modus-panel width="300px" height="auto" [floating]="true">
+            <div slot="header" class="p-4 border-bottom-default">
+              <div class="text-lg font-medium text-foreground">Quick Actions</div>
+            </div>
+            <div slot="body" class="p-4 flex flex-col gap-2">
+              <modus-button variant="outlined" color="primary" [fullWidth]="true" icon="add" iconPosition="left">
+                New Document
+              </modus-button>
+              <modus-button
+                variant="outlined"
+                color="primary"
+                [fullWidth]="true"
+                icon="upload"
+                iconPosition="left"
+              >
+                Upload File
+              </modus-button>
+              <modus-button
+                variant="outlined"
+                color="primary"
+                [fullWidth]="true"
+                icon="folder_new"
+                iconPosition="left"
+              >
+                Create Folder
+              </modus-button>
+            </div>
+          </modus-panel>
+        </div>
+      </demo-example>
+
+      <demo-example title="Navigation Panel" description="A panel configured as a side navigation.">
+        <modus-panel width="260px" height="450px">
+          <div slot="header" class="p-3 border-bottom-default flex items-center gap-2">
+            <i class="modus-icons text-lg text-foreground" aria-hidden="true">apps</i>
+            <div class="text-sm font-medium text-foreground">Application</div>
+          </div>
+          <div slot="body">
+            <modus-menu size="lg">
+              <modus-menu-item label="Dashboard" value="dashboard" startIcon="dashboard" />
+              <modus-menu-item label="Projects" value="projects" startIcon="folder_open" />
+              <modus-menu-item label="Team" value="team" startIcon="people_group" />
+              <modus-menu-item label="Calendar" value="calendar" startIcon="calendar" />
+              <modus-menu-item label="Documents" value="documents" startIcon="description" />
+              <modus-menu-item label="Reports" value="reports" startIcon="bar_graph" />
+            </modus-menu>
+          </div>
+          <div slot="footer" class="border-top-default">
+            <modus-menu>
+              <modus-menu-item label="Settings" value="settings" startIcon="settings" />
+              <modus-menu-item label="Help" value="help" startIcon="help" />
+            </modus-menu>
+          </div>
+        </modus-panel>
+      </demo-example>
+
+      <demo-example title="Body-Only Panel" description="A panel with only body content.">
+        <modus-panel width="250px" height="auto">
+          <modus-menu size="lg">
+            <modus-menu-item label="Dashboard" value="dashboard" />
+            <modus-menu-item label="Projects" value="projects" />
+            <modus-menu-item label="Team" value="team" />
+            <modus-menu-item label="Calendar" value="calendar" />
+          </modus-menu>
+        </modus-panel>
+      </demo-example>
+
+      <demo-example title="Panel Dimensions" description="Panels can have custom width and height values.">
+        <div class="flex flex-wrap gap-4">
+          <modus-panel width="200px" height="200px">
+            <div slot="header" class="p-3 border-bottom-default text-sm font-medium text-foreground">
+              200x200
+            </div>
+            <div slot="body" class="p-3 text-xs text-muted-foreground">Small square panel</div>
+          </modus-panel>
+          <modus-panel width="300px" height="200px">
+            <div slot="header" class="p-3 border-bottom-default text-sm font-medium text-foreground">
+              300x200
+            </div>
+            <div slot="body" class="p-3 text-xs text-muted-foreground">Wide panel</div>
+          </modus-panel>
+          <modus-panel width="200px" height="300px">
+            <div slot="header" class="p-3 border-bottom-default text-sm font-medium text-foreground">
+              200x300
+            </div>
+            <div slot="body" class="p-3 text-xs text-muted-foreground">Tall panel</div>
+          </modus-panel>
+        </div>
+      </demo-example>
+
+      <demo-example title="Auto Height Panel" description="Panel with automatic height based on content.">
+        <modus-panel width="300px" height="auto">
+          <div slot="header" class="p-4 border-bottom-default">
+            <div class="text-lg font-medium text-foreground">Auto Height</div>
+          </div>
+          <div slot="body" class="p-4">
+            <div class="text-sm text-foreground mb-4">This panel grows to fit its content.</div>
+            <div class="text-sm text-muted-foreground space-y-2">
+              <div>Item 1 - First item in the list</div>
+              <div>Item 2 - Second item in the list</div>
+              <div>Item 3 - Third item in the list</div>
+            </div>
+          </div>
+          <div slot="footer" class="p-4 border-top-default">
+            <modus-button variant="filled" color="primary" [fullWidth]="true">Submit</modus-button>
+          </div>
+        </modus-panel>
+      </demo-example>
+
+      <demo-example title="Custom Content Panel" description="Panel with rich custom content in all slots.">
+        <modus-panel width="320px" height="auto">
+          <div slot="header" class="p-4 bg-primary">
+            <div class="text-lg font-semibold text-primary-foreground">Featured Content</div>
+            <div class="text-sm text-primary-foreground">Latest updates</div>
+          </div>
+          <div slot="body" class="p-4">
+            <div class="aspect-video bg-muted rounded-lg mb-4 flex items-center justify-center">
+              <i class="modus-icons text-4xl text-muted-foreground" aria-hidden="true">image</i>
+            </div>
+            <div class="text-base font-medium text-foreground mb-2">Article Title</div>
+            <div class="text-sm text-muted-foreground mb-4">
+              This is a brief description of the article content that gives readers an idea of what to
+              expect.
+            </div>
+            <div class="flex gap-2">
+              <div class="px-2 py-1 bg-muted rounded text-xs text-muted-foreground">Tag 1</div>
+              <div class="px-2 py-1 bg-muted rounded text-xs text-muted-foreground">Tag 2</div>
+            </div>
+          </div>
+          <div slot="footer" class="p-4 border-top-default flex justify-between items-center">
+            <div class="text-xs text-muted-foreground">5 min read</div>
+            <modus-button variant="borderless" color="primary" size="sm">Read More</modus-button>
+          </div>
+        </modus-panel>
+      </demo-example>
+
+      <demo-example title="Full Width Panel" description="Panel that spans the full width of its container.">
+        <modus-panel width="100%" height="auto">
+          <div slot="header" class="p-4 border-bottom-default flex justify-between items-center">
+            <div class="text-lg font-medium text-foreground">Full Width Panel</div>
+            <modus-button
+              variant="outlined"
+              color="secondary"
+              size="sm"
+              icon="close"
+              iconPosition="only"
+              ariaLabel="Close"
+            />
+          </div>
+          <div slot="body" class="p-4">
+            <div class="text-sm text-foreground">
+              This panel uses 100% width to span its container. Useful for responsive layouts where the
+              panel should adapt to its parent element.
+            </div>
+          </div>
+        </modus-panel>
+      </demo-example>
+
+      <demo-example
+        title="Floating vs Non-Floating"
+        description="Comparison of floating and non-floating panel styles."
+      >
+        <div class="flex flex-wrap gap-6 p-6 bg-muted rounded-lg">
+          <div class="flex flex-col gap-2">
+            <div class="text-sm text-muted-foreground">Non-Floating</div>
+            <modus-panel width="200px" height="150px">
+              <div slot="body" class="p-4 text-sm text-foreground">Standard panel without shadow</div>
+            </modus-panel>
+          </div>
+          <div class="flex flex-col gap-2">
+            <div class="text-sm text-muted-foreground">Floating</div>
+            <modus-panel width="200px" height="150px" [floating]="true">
+              <div slot="body" class="p-4 text-sm text-foreground">Elevated panel with shadow</div>
+            </modus-panel>
+          </div>
+        </div>
+      </demo-example>
+    </demo-page>
+  `,
+})
+export class PanelDemoPageComponent {}

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

@@ -0,0 +1,169 @@
+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 { ModusProgressComponent } from '../../components/modus-progress.component';
+import { ModusButtonComponent } from '../../components/modus-button.component';
+
+/**
+ * Demo page showcasing the Modus Progress component.
+ *
+ * Demonstrates progress features including:
+ * - Basic progress bars
+ * - Different values
+ * - Radial progress
+ * - Indeterminate progress
+ * - With labels
+ */
+@Component({
+  selector: 'app-progress-demo-page',
+  standalone: true,
+  imports: [
+    CommonModule,
+    DemoPageComponent,
+    DemoExampleComponent,
+    ModusProgressComponent,
+    ModusButtonComponent,
+  ],
+  template: `
+    <demo-page
+      title="Modus Progress"
+      description="Progress components indicate the completion status of a task or process. Use progress bars for file uploads, form completion, or any process with measurable progress."
+    >
+      <demo-example
+        title="Basic Progress Bar"
+        description="Simple progress bars with different values."
+      >
+        <div class="flex flex-col gap-6">
+          <div class="flex flex-col gap-2">
+            <p class="text-sm text-muted-foreground">0%</p>
+            <modus-progress [value]="0" />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <p class="text-sm text-muted-foreground">25%</p>
+            <modus-progress [value]="25" />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <p class="text-sm text-muted-foreground">50%</p>
+            <modus-progress [value]="50" />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <p class="text-sm text-muted-foreground">75%</p>
+            <modus-progress [value]="75" />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <p class="text-sm text-muted-foreground">100%</p>
+            <modus-progress [value]="100" />
+          </div>
+        </div>
+      </demo-example>
+
+      <demo-example title="Progress with Labels" description="Progress bars with custom labels.">
+        <div class="flex flex-col gap-6">
+          <modus-progress [value]="45" [label]="'45% complete'" />
+          <modus-progress [value]="72" [label]="'72%'" />
+          <modus-progress [value]="90" [label]="'Almost done'" />
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Radial Progress"
+        description="Radial progress indicators for compact spaces."
+      >
+        <div class="flex flex-wrap gap-6">
+          <div class="flex flex-col gap-2">
+            <p class="text-sm text-muted-foreground">25%</p>
+            <modus-progress variant="radial" [value]="25" [label]="'25%'" />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <p class="text-sm text-muted-foreground">50%</p>
+            <modus-progress variant="radial" [value]="50" [label]="'50%'" />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <p class="text-sm text-muted-foreground">75%</p>
+            <modus-progress variant="radial" [value]="75" [label]="'75%'" />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <p class="text-sm text-muted-foreground">100%</p>
+            <modus-progress variant="radial" [value]="100" [label]="'100%'" />
+          </div>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Indeterminate Progress"
+        description="Progress bars for tasks with unknown duration."
+      >
+        <div class="flex flex-col gap-6">
+          <modus-progress [indeterminate]="true" />
+          <p class="text-sm text-muted-foreground">
+            Use indeterminate progress when the duration of a task is unknown.
+          </p>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Interactive Example"
+        description="Dynamic progress bar that updates over time."
+      >
+        <div class="flex flex-col gap-6">
+          <modus-progress [value]="progressValue()" [label]="progressLabel()" />
+          <div class="flex gap-2">
+            <modus-button color="primary" size="sm" (buttonClick)="startProgress()">
+              Start Progress
+            </modus-button>
+            <modus-button color="secondary" size="sm" (buttonClick)="resetProgress()">
+              Reset
+            </modus-button>
+          </div>
+          <div class="p-4 rounded-lg bg-card border-default">
+            <p class="text-sm text-foreground">
+              <strong>Current Value:</strong> {{ progressValue() }}%
+            </p>
+          </div>
+        </div>
+      </demo-example>
+    </demo-page>
+  `,
+})
+export class ProgressDemoPageComponent {
+  readonly progressValue = signal<number>(0);
+  private progressInterval: ReturnType<typeof setInterval> | null = null;
+
+  readonly progressLabel = signal<string>('0%');
+
+  startProgress(): void {
+    if (this.progressInterval) {
+      clearInterval(this.progressInterval);
+    }
+
+    this.progressValue.set(0);
+    this.progressInterval = setInterval(() => {
+      this.progressValue.update((value) => {
+        const newValue = Math.min(value + 5, 100);
+        this.progressLabel.set(`${newValue}%`);
+        if (newValue >= 100 && this.progressInterval) {
+          clearInterval(this.progressInterval);
+          this.progressInterval = null;
+        }
+        return newValue;
+      });
+    }, 200);
+  }
+
+  resetProgress(): void {
+    if (this.progressInterval) {
+      clearInterval(this.progressInterval);
+      this.progressInterval = null;
+    }
+    this.progressValue.set(0);
+    this.progressLabel.set('0%');
+  }
+}