@porsche-design-system/components-angular 4.5.0 → 4.6.0-rc.1

package/skills/pds-knowledge-angular/references/components/p-table/examples/Advanced.ts

@@ -0,0 +1,162 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PorscheDesignSystemModule, TableUpdateEventDetail } from '@porsche-design-system/components-angular';
+
+type HeadAdvanced = {
+  id: string;
+  name: string;
+  hideLabel: boolean;
+  active?: boolean;
+  direction?: 'asc' | 'desc';
+};
+
+const headAdvanced: HeadAdvanced[] = [
+  { name: 'Model', id: 'model' } as HeadAdvanced,
+  { name: 'Interest', id: 'interest' } as HeadAdvanced,
+  { name: 'VIN', id: 'vin' } as HeadAdvanced,
+  { name: 'Purchase Intention', id: 'purchaseIntention' } as HeadAdvanced,
+  { name: 'Status', id: 'status' } as HeadAdvanced,
+  { name: 'Comment', id: 'comment' } as HeadAdvanced,
+  { name: 'Lead ID', id: 'leadId' } as HeadAdvanced,
+  { name: 'Select Wrapper', id: 'selectWrapper' } as HeadAdvanced,
+  { name: 'Select', id: 'select' } as HeadAdvanced,
+  { name: 'Multi-Select', id: 'multiSelect' } as HeadAdvanced,
+  { name: 'Action', id: 'action', hideLabel: true } as HeadAdvanced,
+].map((item, i) => ({
+  ...item,
+  ...(i > 0 &&
+    i < 7 &&
+    i !== 5 && {
+      active: i === 1,
+      direction: 'asc',
+    }),
+}));
+
+type DataAdvanced = {
+  imageUrl: string;
+  model: string;
+  date: string;
+  interest: string;
+  vin: string;
+  purchaseIntention: string;
+  status: string;
+  comment: string;
+  leadId: string;
+};
+
+const dataAdvanced: DataAdvanced[] = [
+  {
+    imageUrl: 'assets/718.png',
+    model: '718',
+    date: '23.06.2021',
+    interest: 'New Car',
+    vin: '1FM5K7F84FGB16304',
+    purchaseIntention: '08/2021',
+    status: 'Won',
+    comment: '-',
+    leadId: '0000824402',
+  },
+  {
+    imageUrl: 'assets/panamera.png',
+    model: 'Panamera',
+    date: '19.06.2021',
+    interest: 'New Car',
+    vin: '2GCEC13T141374801',
+    purchaseIntention: '11/2021',
+    status: 'Lost',
+    comment: 'Some multiline text and a column with a min width.',
+    leadId: '0000824409',
+  },
+  {
+    imageUrl: 'assets/911.png',
+    model: '911',
+    date: '19.05.2021',
+    interest: 'Used Car',
+    vin: '5GAKVCKD8EJ335750',
+    purchaseIntention: '09/2021',
+    status: 'Won',
+    comment: '-',
+    leadId: '0000824408',
+  },
+  {
+    imageUrl: 'assets/macan.png',
+    model: 'Macan',
+    date: '10.05.2021',
+    interest: 'Used Car',
+    vin: '1FMPU17L83LC09302',
+    purchaseIntention: '07/2021',
+    status: 'Lost',
+    comment: '-',
+    leadId: '0000824407',
+  },
+  {
+    imageUrl: 'assets/taycan.png',
+    model: 'Taycan',
+    date: '03.05.2021',
+    interest: 'New Car',
+    vin: 'JN1BY1AR3BM375187',
+    purchaseIntention: '05/2021',
+    status: 'Won',
+    comment: '-',
+    leadId: '0000824406',
+  },
+];
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+    <p-table (update)="onUpdate($event)">
+      <p-heading slot="caption" size="large" tag="h3">Some visual caption</p-heading>
+      <p-table-head>
+        <p-table-head-row>
+          @for (item of head; track item) {
+            <p-table-head-cell [sort]="item" [hideLabel]="item.hideLabel">
+              {{ item.name }}
+            </p-table-head-cell>
+          }
+        </p-table-head-row>
+      </p-table-head>
+      <p-table-body>
+        @for (item of data; track item) {
+          <p-table-row>
+            <p-table-cell>
+              <div style="display: flex;">
+                <img src="{{ item.imageUrl }}" width="80" height="45" style="margin-right: .5rem; object-fit: contain; max-width: none;" alt="" />
+                <div>
+                  <p-text weight="semi-bold">{{ item.model }}</p-text>
+                  <p-text size="x-small">{{ item.date }}</p-text>
+                </div>
+              </div>
+            </p-table-cell>
+            <p-table-cell>{{ item.interest }}</p-table-cell>
+            <p-table-cell>
+              <a href="https://porsche.com">{{ item.vin }}</a>
+            </p-table-cell>
+            <p-table-cell>{{ item.purchaseIntention }}</p-table-cell>
+            <p-table-cell>{{ item.status }}</p-table-cell>
+            <p-table-cell [multiline]="true" style="min-width: 10rem;">{{ item.comment }}</p-table-cell>
+            <p-table-cell>{{ item.leadId }}</p-table-cell>
+            <p-table-cell>
+              <p-button-pure icon="edit" style="padding: .5rem">Edit</p-button-pure>
+              <p-button-pure icon="delete" style="padding: .5rem">Delete</p-button-pure>
+            </p-table-cell>
+          </p-table-row>
+        }
+      </p-table-body>
+    </p-table>
+    `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule],
+})
+export class ExampleComponent {
+  public head = headAdvanced;
+  public data = dataAdvanced;
+
+  onUpdate(e: CustomEvent<TableUpdateEventDetail>): void {
+    const { id, direction } = e.detail as TableUpdateEventDetail & { id: keyof DataAdvanced };
+    this.head = this.head.map((item) => ({ ...item, active: false, ...(item.id === id && e.detail) }));
+    this.data = [...this.data].sort((a, b) =>
+      direction === 'asc' ? a[id].localeCompare(b[id]) : b[id].localeCompare(a[id])
+    );
+  }
+}

package/skills/pds-knowledge-angular/references/components/p-table/examples/CaptionProperty.ts

@@ -0,0 +1,40 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+      <p-table caption="Some caption">
+        <p-table-head>
+          <p-table-head-row>
+            <p-table-head-cell>
+              Column 1
+            </p-table-head-cell>
+            <p-table-head-cell>
+              Column 2
+            </p-table-head-cell>
+            <p-table-head-cell>
+              Column 3
+            </p-table-head-cell>
+          </p-table-head-row>
+        </p-table-head>
+        <p-table-body>
+          <p-table-row>
+            <p-table-cell>
+              Cell 1
+            </p-table-cell>
+            <p-table-cell>
+              Cell 2
+            </p-table-cell>
+            <p-table-cell>
+              Cell 3
+            </p-table-cell>
+          </p-table-row>
+        </p-table-body>
+      </p-table>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {}

package/skills/pds-knowledge-angular/references/components/p-table/examples/CaptionSlot.ts

@@ -0,0 +1,43 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+      <p-table>
+        <p-heading slot="caption" size="large" tag="h3">
+          Some slotted caption
+        </p-heading>
+        <p-table-head>
+          <p-table-head-row>
+            <p-table-head-cell>
+              Column 1
+            </p-table-head-cell>
+            <p-table-head-cell>
+              Column 2
+            </p-table-head-cell>
+            <p-table-head-cell>
+              Column 3
+            </p-table-head-cell>
+          </p-table-head-row>
+        </p-table-head>
+        <p-table-body>
+          <p-table-row>
+            <p-table-cell>
+              Cell 1
+            </p-table-cell>
+            <p-table-cell>
+              Cell 2
+            </p-table-cell>
+            <p-table-cell>
+              Cell 3
+            </p-table-cell>
+          </p-table-row>
+        </p-table-body>
+      </p-table>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {}

package/skills/pds-knowledge-angular/references/components/p-table/examples/Default.ts

@@ -0,0 +1,120 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+      <p-table caption="Some caption">
+        <p-table-head>
+          <p-table-head-row>
+            <p-table-head-cell>
+              Model
+            </p-table-head-cell>
+            <p-table-head-cell>
+              Date
+            </p-table-head-cell>
+            <p-table-head-cell>
+              Purchase Intention
+            </p-table-head-cell>
+            <p-table-head-cell>
+              Status
+            </p-table-head-cell>
+            <p-table-head-cell>
+              Lead ID
+            </p-table-head-cell>
+          </p-table-head-row>
+        </p-table-head>
+        <p-table-body>
+          <p-table-row>
+            <p-table-cell>
+              718 Cayman
+            </p-table-cell>
+            <p-table-cell>
+              23.06.2021
+            </p-table-cell>
+            <p-table-cell>
+              New Car
+            </p-table-cell>
+            <p-table-cell>
+              Won
+            </p-table-cell>
+            <p-table-cell>
+              0000824402
+            </p-table-cell>
+          </p-table-row>
+          <p-table-row>
+            <p-table-cell>
+              Panamera 4S
+            </p-table-cell>
+            <p-table-cell>
+              19.06.2021
+            </p-table-cell>
+            <p-table-cell>
+              New Car
+            </p-table-cell>
+            <p-table-cell>
+              Lost
+            </p-table-cell>
+            <p-table-cell>
+              0000824409
+            </p-table-cell>
+          </p-table-row>
+          <p-table-row>
+            <p-table-cell>
+              911 Carrera S
+            </p-table-cell>
+            <p-table-cell>
+              19.05.2021
+            </p-table-cell>
+            <p-table-cell>
+              Used Car
+            </p-table-cell>
+            <p-table-cell>
+              Won
+            </p-table-cell>
+            <p-table-cell>
+              0000824408
+            </p-table-cell>
+          </p-table-row>
+          <p-table-row>
+            <p-table-cell>
+              Macan Turbo
+            </p-table-cell>
+            <p-table-cell>
+              10.05.2021
+            </p-table-cell>
+            <p-table-cell>
+              Used Car
+            </p-table-cell>
+            <p-table-cell>
+              Lost
+            </p-table-cell>
+            <p-table-cell>
+              0000824407
+            </p-table-cell>
+          </p-table-row>
+          <p-table-row>
+            <p-table-cell>
+              Taycan
+            </p-table-cell>
+            <p-table-cell>
+              03.05.2021
+            </p-table-cell>
+            <p-table-cell>
+              New Car
+            </p-table-cell>
+            <p-table-cell>
+              Won
+            </p-table-cell>
+            <p-table-cell>
+              0000824406
+            </p-table-cell>
+          </p-table-row>
+        </p-table-body>
+      </p-table>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {}

package/skills/pds-knowledge-angular/references/components/p-table/examples/HideLabel.ts

@@ -0,0 +1,40 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+      <p-table caption="Some caption">
+        <p-table-head>
+          <p-table-head-row>
+            <p-table-head-cell>
+              Column 1
+            </p-table-head-cell>
+            <p-table-head-cell>
+              Column 2
+            </p-table-head-cell>
+            <p-table-head-cell [hideLabel]="true">
+              Column 3
+            </p-table-head-cell>
+          </p-table-head-row>
+        </p-table-head>
+        <p-table-body>
+          <p-table-row>
+            <p-table-cell>
+              Cell 1
+            </p-table-cell>
+            <p-table-cell>
+              Cell 2
+            </p-table-cell>
+            <p-table-cell>
+              Cell 3
+            </p-table-cell>
+          </p-table-row>
+        </p-table-body>
+      </p-table>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {}

package/skills/pds-knowledge-angular/references/components/p-table/examples/LayoutFixed.ts

@@ -0,0 +1,53 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+      <p-table caption="Some caption" layout="fixed">
+        <p-table-head>
+          <p-table-head-row>
+            <p-table-head-cell class="w-[50%] max-w-[50%]">
+              Column 1 (50%)
+            </p-table-head-cell>
+            <p-table-head-cell class="w-[150px] max-w-[150px]">
+              Column 2 (150px)
+            </p-table-head-cell>
+            <p-table-head-cell>
+              Column 3 (auto)
+            </p-table-head-cell>
+          </p-table-head-row>
+        </p-table-head>
+        <p-table-body>
+          <p-table-row>
+            <p-table-cell class="w-[50%] max-w-[50%]">
+              Cell 1
+            </p-table-cell>
+            <p-table-cell class="w-[150px] max-w-[150px]">
+              Cell 2
+            </p-table-cell>
+            <p-table-cell>
+              Cell 3
+            </p-table-cell>
+          </p-table-row>
+          <p-table-row>
+            <p-table-cell class="w-[50%] max-w-[50%]">
+              Cell 1
+            </p-table-cell>
+            <p-table-cell class="w-[150px] max-w-[150px]">
+              <p-text [ellipsis]="true" title="Cell 2 with more content">
+                Cell 2 with more content
+              </p-text>
+            </p-table-cell>
+            <p-table-cell>
+              Cell 3
+            </p-table-cell>
+          </p-table-row>
+        </p-table-body>
+      </p-table>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {}

package/skills/pds-knowledge-angular/references/components/p-table/examples/Sorting.ts

@@ -0,0 +1,80 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PorscheDesignSystemModule, TableUpdateEventDetail } from '@porsche-design-system/components-angular';
+
+type HeadSorting = {
+  id: string;
+  name: string;
+  active?: boolean;
+  direction?: 'asc' | 'desc';
+};
+
+const headSorting: HeadSorting[] = [
+  { name: 'Column 1', id: 'col1' } as HeadSorting,
+  { name: 'Column 2', id: 'col2' } as HeadSorting,
+  { name: 'Column 3', id: 'col3' } as HeadSorting,
+].map((item, i) => ({
+  ...item,
+  active: i === 1,
+  direction: 'asc',
+}));
+
+type DataSorting = {
+  col1: string;
+  col2: number;
+  col3: string;
+};
+
+const dataSorting: DataSorting[] = [
+  {
+    col1: 'Name Z',
+    col2: 1,
+    col3: '24.06.2021',
+  },
+  {
+    col1: 'Name A',
+    col2: 9,
+    col3: '01.06.2021',
+  },
+];
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+    <p-table caption="Some caption" (update)="onUpdate($event)">
+      <p-table-head>
+        <p-table-head-row>
+          @for (item of head; track item) {
+            <p-table-head-cell [sort]="item">
+              {{ item.name }}
+            </p-table-head-cell>
+          }
+        </p-table-head-row>
+      </p-table-head>
+      <p-table-body>
+        @for (item of data; track item) {
+          <p-table-row>
+            <p-table-cell>{{ item.col1 }}</p-table-cell>
+            <p-table-cell>{{ item.col2 }}</p-table-cell>
+            <p-table-cell>{{ item.col3 }}</p-table-cell>
+          </p-table-row>
+        }
+      </p-table-body>
+    </p-table>
+    `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule],
+})
+export class ExampleComponent {
+  public head = headSorting;
+  public data = dataSorting;
+
+  onUpdate(e: CustomEvent<TableUpdateEventDetail>): void {
+    const { id, direction } = e.detail as TableUpdateEventDetail & { id: keyof DataSorting };
+    this.head = this.head.map((item) => ({ ...item, active: false, ...(item.id === id && e.detail) }));
+    this.data = [...this.data].sort((a, b) => {
+      const result = String(a[id]).localeCompare(String(b[id]), undefined, { numeric: true });
+      return direction === 'asc' ? result : -result;
+    });
+  }
+}