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

package/skill/references/components/p-select/examples/AsyncFilter.ts

@@ -0,0 +1,149 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
+import {
+  type InputSearchInputEventDetail,
+  PorscheDesignSystemModule,
+  PSelect,
+  type SelectChangeEventDetail,
+  type SelectToggleEventDetail,
+} from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+    <p-select
+      name="async-search-select"
+      label="Async Search"
+      [value]="value"
+      (change)="onChange($event)"
+      (toggle)="onToggle($event)"
+    >
+      <p-input-search
+        slot="filter"
+        name="search"
+        [value]="searchValue"
+        [loading]="loading"
+        [clear]="true"
+        [indicator]="true"
+        [compact]="true"
+        [autoComplete]="'off'"
+        (input)="onInput($event)"
+        (blur)="$event.stopPropagation()"
+        (change)="$event.stopPropagation()"
+      ></p-input-search>
+
+      <!-- Initial skeleton loading -->
+      @if (initialLoading && !error) {
+        @for (_ of [1,2,3,4,5,6,7,8,9]; track $index) {
+          <div slot="options-status" class="skeleton h-[40px]"></div>
+        }
+      }
+
+      <!-- Options -->
+      @for (option of options; track option.value) {
+        <p-select-option [value]="option.value">
+          {{ option.label }}
+        </p-select-option>
+      }
+
+      <!-- No filter results -->
+      @if (!initialLoading && options.length === 0 && !error) {
+        <div
+          slot="options-status"
+          class="text-contrast-medium cursor-not-allowed py-static-sm px-[12px]"
+          role="alert"
+        >
+          <span aria-hidden="true">–</span>
+          <span class="sr-only">No results found</span>
+        </div>
+      }
+
+      <!-- Error state -->
+      @if (error) {
+        <div
+          slot="options-status"
+          class="flex gap-static-sm py-static-sm px-[12px]"
+          role="alert"
+        >
+          <p-icon name="information" color="error"></p-icon>
+          <span class="text-error">{{ error }}</span>
+        </div>
+      }
+    </p-select>
+
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule],
+})
+export class ExampleComponent {
+  value?: PSelect['value'];
+  options: { value: string; label: string }[] = [];
+
+  searchValue = '';
+  initialLoading = false;
+  loading = false;
+  error: string | null = null;
+
+  private hasLoadedOnce = false;
+  private currentFetchId = 0;
+  private debounceTimer?: number;
+
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  async fetchOptions(term?: string, isInitial = false) {
+    const fetchId = ++this.currentFetchId;
+    if (isInitial) this.initialLoading = true;
+    else this.loading = true;
+
+    this.cdr.markForCheck();
+
+    try {
+      const url = term
+        ? `https://jsonplaceholder.typicode.com/users?username_like=${term}`
+        : `https://jsonplaceholder.typicode.com/users`;
+
+      const res = await fetch(url);
+      const data: { id: number; name: string; username: string }[] = await res.json();
+
+      // Ignore stale results
+      if (fetchId !== this.currentFetchId) return;
+
+      this.options = data.map((user) => ({
+        value: user.id.toString(),
+        label: `${user.name} (${user.username})`,
+      }));
+
+      this.error = null;
+      this.hasLoadedOnce = true;
+    } catch (err) {
+      console.error('Failed to fetch options', err);
+      this.options = [];
+      this.error = 'Failed to load options';
+    } finally {
+      if (isInitial) this.initialLoading = false;
+      else this.loading = false;
+
+      this.cdr.markForCheck();
+    }
+  }
+
+  onInput(event: CustomEvent<InputSearchInputEventDetail>) {
+    const term = (event.target as HTMLInputElement).value;
+    this.searchValue = term;
+
+    if (this.debounceTimer) clearTimeout(this.debounceTimer);
+    this.debounceTimer = window.setTimeout(() => {
+      this.fetchOptions(term.trim() || undefined);
+    }, 400);
+  }
+
+  onChange(event: CustomEvent<SelectChangeEventDetail>) {
+    this.value = event.detail.value;
+  }
+
+  onToggle(event: CustomEvent<SelectToggleEventDetail>) {
+    if (event.detail.open && !this.hasLoadedOnce) {
+      this.fetchOptions(undefined, true);
+    }
+  }
+}

package/skill/references/components/p-select/examples/Default.ts

@@ -0,0 +1,32 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+      <p-select name="options" label="Some Label" description="Some description">
+        <p-select-option value="a">
+          Option A
+        </p-select-option>
+        <p-select-option value="b">
+          Option B
+        </p-select-option>
+        <p-select-option value="c">
+          Option C
+        </p-select-option>
+        <p-select-option value="d">
+          Option D
+        </p-select-option>
+        <p-select-option value="e">
+          Option E
+        </p-select-option>
+        <p-select-option value="f">
+          Option F
+        </p-select-option>
+      </p-select>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {}

package/skill/references/components/p-select/examples/Form.ts

@@ -0,0 +1,38 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+    <form [formGroup]="form" (ngSubmit)="onSubmit()" class="flex flex-col gap-fluid-sm">
+      <p-select name="mySelect" formControlName="mySelect" [label]="'Some Label'">
+        <p-select-option value="a">Option A</p-select-option>
+        <p-select-option value="b">Option B</p-select-option>
+        <p-select-option value="c">Option C</p-select-option>
+        <p-select-option value="d">Option D</p-select-option>
+        <p-select-option value="e">Option E</p-select-option>
+        <p-select-option value="f">Option F</p-select-option>
+      </p-select>
+      <div class="flex gap-fluid-sm">
+        <p-button type="submit">Submit</p-button>
+        <p-button type="reset">Reset</p-button>
+      </div>
+      <p-text>Last submitted data: {{ submittedValue }}</p-text>
+    </form>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule, FormsModule, ReactiveFormsModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {
+  form = new FormGroup({
+    mySelect: new FormControl<string | undefined>({ value: undefined, disabled: false }),
+  });
+
+  submittedValue: any = undefined;
+
+  onSubmit(): void {
+    this.submittedValue = JSON.stringify(this.form.value);
+  }
+}

package/skill/references/components/p-select/examples/Optgroups.ts

@@ -0,0 +1,45 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+      <p-select name="options" label="Some Label" description="Some description">
+        <p-optgroup label="Some optgroup label 1">
+          <p-select-option value="a">
+            Option A
+          </p-select-option>
+          <p-select-option value="b">
+            Option B
+          </p-select-option>
+          <p-select-option value="c">
+            Option C
+          </p-select-option>
+          <p-select-option value="d">
+            Option D
+          </p-select-option>
+          <p-select-option value="e">
+            Option E
+          </p-select-option>
+          <p-select-option value="f">
+            Option F
+          </p-select-option>
+        </p-optgroup>
+        <p-optgroup label="Some optgroup label 2">
+          <p-select-option value="g">
+            Option G
+          </p-select-option>
+          <p-select-option value="h">
+            Option H
+          </p-select-option>
+          <p-select-option value="i">
+            Option I
+          </p-select-option>
+        </p-optgroup>
+      </p-select>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {}

package/skill/references/components/p-select/examples/Required.ts

@@ -0,0 +1,48 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+    <div class="flex flex-col gap-static-sm">
+      <p-checkbox label="Required" name="required" [checked]="isRequired" (change)="onChangeRequired()" />
+      <p-checkbox label="Allow deselection" name="deselection" [checked]="hasDeselection" (change)="onChangeDeselection()" />
+    </div>
+
+    <form (submit)="onSubmit($event)" class="flex flex-col gap-fluid-sm mt-fluid-sm">
+      <p-select name="options" label="Some Label" [required]="isRequired">
+        @if (hasDeselection) {
+          <p-select-option></p-select-option>
+        }
+        <p-select-option value="1">Option 1</p-select-option>
+        <p-select-option value="2">Option 2</p-select-option>
+        <p-select-option value="3">Option 3</p-select-option>
+      </p-select>
+      <p-button type="submit">Submit</p-button>
+    </form>
+
+    <p-text>Last submitted data: {{ lastSubmittedData }}</p-text>
+    `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule],
+})
+export class ExampleComponent {
+  isRequired: boolean = true;
+  hasDeselection: boolean = false;
+  lastSubmittedData: string = 'none';
+
+  onChangeRequired() {
+    this.isRequired = !this.isRequired;
+  }
+
+  onChangeDeselection() {
+    this.hasDeselection = !this.hasDeselection;
+  }
+
+  onSubmit(e: Event): void {
+    e.preventDefault();
+    const formData = new FormData(e.target as HTMLFormElement);
+    this.lastSubmittedData = formData.get('options')?.toString() || 'none';
+  }
+}

package/skill/references/components/p-select/examples/SelectedSlot.ts

@@ -0,0 +1,130 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import {
+  type FlagName,
+  PorscheDesignSystemModule,
+  PSelect,
+  type SelectChangeEventDetail,
+} from '@porsche-design-system/components-angular';
+
+type Option = { label: string; code: FlagName; continent: string };
+
+const optionsData: Option[] = [
+  {
+    label: 'China',
+    code: 'cn',
+    continent: 'Asia',
+  },
+  {
+    label: 'Japan',
+    code: 'jp',
+    continent: 'Asia',
+  },
+  {
+    label: 'South Korea',
+    code: 'kr',
+    continent: 'Asia',
+  },
+  {
+    label: 'Austria',
+    code: 'at',
+    continent: 'Europe',
+  },
+  {
+    label: 'France',
+    code: 'fr',
+    continent: 'Europe',
+  },
+  {
+    label: 'Germany',
+    code: 'de',
+    continent: 'Europe',
+  },
+  {
+    label: 'Great Britain',
+    code: 'gb',
+    continent: 'Europe',
+  },
+  {
+    label: 'Italy',
+    code: 'it',
+    continent: 'Europe',
+  },
+  {
+    label: 'Portugal',
+    code: 'pt',
+    continent: 'Europe',
+  },
+  {
+    label: 'Spain',
+    code: 'es',
+    continent: 'Europe',
+  },
+
+  {
+    label: 'Canada',
+    code: 'ca',
+    continent: 'North America',
+  },
+  {
+    label: 'USA',
+    code: 'us',
+    continent: 'North America',
+  },
+];
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+    <p-select
+      name="selected-slot-select"
+      label="Selected Slot"
+      [value]="value"
+      (change)="onChange($event)"
+    >
+    <span slot="selected" class="h-full flex items-center gap-fluid-sm grow">
+      @if (selectedOption) {
+        <p-flag [name]="selectedOption.code"></p-flag>
+        <p class="prose-text-sm truncate m-0">{{ selectedOption.label }}</p>
+      }
+    </span>
+      @for (entry of optgroups; track entry[0]) {
+        <p-optgroup [label]="entry[0]">
+          @for (option of entry[1]; track option.code) {
+            <p-select-option [value]="option.code">
+              <div class="w-full flex items-center gap-fluid-sm">
+                <p-flag [name]="option.code"></p-flag>
+                <p class="prose-text-sm m-0">{{ option.label }}</p>
+              </div>
+            </p-select-option>
+          }
+        </p-optgroup>
+      }
+    </p-select>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule],
+})
+export class ExampleComponent {
+  value?: PSelect['value'];
+  options: Option[] = optionsData;
+  selectedOption?: Option;
+
+  optgroups: [string, Option[]][] = Object.entries(
+    this.options.reduce(
+      (acc, item) => {
+        const key = item.continent;
+        if (!acc[key]) acc[key] = [];
+        acc[key].push(item);
+        return acc;
+      },
+      {} as Record<string, Option[]>
+    )
+  );
+
+  onChange(event: CustomEvent<SelectChangeEventDetail>) {
+    const value = event.detail.value;
+    this.value = value;
+    this.selectedOption = this.options.find((option) => option.code === value);
+  }
+}

package/skill/references/components/p-select/examples/SetValue.ts

@@ -0,0 +1,71 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import {
+  PInputText,
+  PorscheDesignSystemModule,
+  PSelect,
+  SelectChangeEventDetail,
+} from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+    <div class="flex flex-col gap-fluid-sm">
+      <p-input-text label="Value:" name="input-value" [value]="inputValue" (input)="onChangeInput($event)" placeholder="e.g. 1"></p-input-text>
+      <div class="flex gap-fluid-sm">
+        <p-button type="button" (click)="onSetValue()" [compact]="true">Set Value</p-button>
+        <p-button type="button" (click)="onResetValue()" [compact]="true">Reset value</p-button>
+      </div>
+      <p-select name="options" label="Some Label" [value]="selectedValue" (change)="onChange($event)">
+        @for (idx of optionIndices; track idx) {
+          <p-select-option [value]="(idx + 1).toString()"
+            >Option {{ idx + 1 }}</p-select-option
+            >
+          }
+        </p-select>
+      <div class="flex gap-fluid-sm">
+        <p-button type="button" (click)="onAddOption()" [compact]="true">Add option</p-button>
+        <p-button type="button" (click)="onRemoveOption()" [compact]="true">Remove last option</p-button>
+      </div>
+    </div>
+    `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule],
+})
+export class ExampleComponent {
+  selectedValue: PSelect['value'] = '1';
+  inputValue: PInputText['value'] = '';
+  optionCount: number = 3;
+
+  get optionIndices(): number[] {
+    return [...Array(this.optionCount).keys()];
+  }
+
+  onChangeInput(e: Event) {
+    this.inputValue = (e.target as HTMLInputElement).value;
+  }
+
+  onSetValue() {
+    this.selectedValue = this.inputValue;
+  }
+
+  onResetValue() {
+    this.selectedValue = '1';
+    this.inputValue = '';
+  }
+
+  onChange(e: CustomEvent<SelectChangeEventDetail>) {
+    this.selectedValue = e.detail.value;
+    this.inputValue = String(e.detail.value ?? '');
+  }
+
+  onAddOption() {
+    this.optionCount += 1;
+  }
+
+  onRemoveOption() {
+    if (this.optionCount > 0) {
+      this.optionCount -= 1;
+    }
+  }
+}

package/skill/references/components/p-select/examples/Slots.ts

@@ -0,0 +1,51 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+      <p-select name="options" state="error">
+        <span slot="label" id="some-label-id">
+          Some label with a 
+          <a href="https://designsystem.porsche.com" class="underline">
+            link
+          </a>
+           and a "label-after" slot.
+        </span>
+        <p-popover slot="label-after">
+          Some Popover content with a 
+          <a href="https://designsystem.porsche.com" class="underline">
+            link
+          </a>
+          .
+        </p-popover>
+        <span slot="description" id="some-description-id">
+          Some description with a 
+          <a href="https://designsystem.porsche.com" class="underline">
+            link
+          </a>
+          .
+        </span>
+        <span slot="message" id="some-message-id">
+          Some error message with a 
+          <a href="https://designsystem.porsche.com" class="underline">
+            link
+          </a>
+          .
+        </span>
+        <p-select-option value="a">
+          Option A
+        </p-select-option>
+        <p-select-option value="b">
+          Option B
+        </p-select-option>
+        <p-select-option value="c">
+          Option C
+        </p-select-option>
+      </p-select>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {}

package/skill/references/components/p-select/examples/SlottedImages.ts

@@ -0,0 +1,38 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
+
+@Component({
+  selector: 'porsche-design-system-app',
+  template: `
+      <p-select name="options" label="Some Label" description="Some description">
+        <p-select-option value="718">
+          <img src="assets/718.png" />
+          718
+        </p-select-option>
+        <p-select-option value="911">
+          <img src="assets/911.png" />
+          911
+        </p-select-option>
+        <p-select-option value="taycan">
+          <img src="assets/taycan.png" />
+          taycan
+        </p-select-option>
+        <p-select-option value="macan">
+          <img src="assets/macan.png" />
+          macan
+        </p-select-option>
+        <p-select-option value="cayenne">
+          <img src="assets/cayenne.png" />
+          cayenne
+        </p-select-option>
+        <p-select-option value="panamera">
+          <img src="assets/panamera.png" />
+          panamera
+        </p-select-option>
+      </p-select>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [PorscheDesignSystemModule], // <-- PDS module is imported here
+})
+export class ExampleComponent {}