docs(demo): complete component public slot documentation

projects/demo/src/app/pages/accordion/accordion-demo.service.ts

@@ -4,6 +4,7 @@ import { inject, Injectable } from '@angular/core';
 import { DemoApiControlConfig } from '@demo-types/demo-api-control.type';
 import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type';
 import { DemoMethodConfig } from '@demo-types/demo-method.type';
+import { DemoSlotConfig } from '@demo-types/demo-slot.type';
 import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array';
 import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config';
 import { getDemoApiTitle } from '@demo-utils/get-demo-api-title';
@@ -15,6 +16,8 @@ import { Subject } from 'rxjs';
 
 const ACCORDION_DOCS_PATH = 'accordion/accordion.component.docs.json';
 const ACCORDION_ITEM_DOCS_PATH = 'accordion/accordion-item/accordion-item.component.docs.json';
+const ACCORDION_SLOTS_DOCS_PATH = 'accordion/accordion.component.slots.docs.json';
+const ACCORDION_ITEM_SLOTS_DOCS_PATH = 'accordion/accordion-item/accordion-item.component.slots.docs.json';
 
 const defaultConfig = IDS_ACCORDION_DEFAULT_CONFIG_FACTORY();
 
@@ -169,5 +172,40 @@ export class AccordionDemoService {
       },
     ];
   }
-}
 
+  public readonly slotControlConfig: DemoSlotConfig = [
+    {
+      name: 'content',
+      description: this._widgetDocs.getDescription(
+        ACCORDION_SLOTS_DOCS_PATH,
+        'content',
+        'Default content of the accordion, i.e. the projected accordion items.',
+      ),
+    },
+  ];
+
+  public readonly itemSlotControlConfig: DemoSlotConfig = [
+    {
+      name: 'content',
+      description: this._widgetDocs.getDescription(
+        ACCORDION_ITEM_SLOTS_DOCS_PATH,
+        'content',
+        'Default content of the accordion item, rendered in the expandable content area.',
+      ),
+    },
+  ];
+
+  public getSlotConfig(): DemoSlotConfig[] {
+    return [
+      this.slotControlConfig,
+      this.itemSlotControlConfig,
+    ];
+  }
+
+  public getSlotTitles(): string[] {
+    return [
+      'Accordion',
+      'Accordion item',
+    ];
+  }
+}

projects/demo/src/app/pages/autocomplete/autocomplete-demo.service.ts

@@ -4,6 +4,7 @@ import { inject, Injectable, signal } from '@angular/core';
 import { toObservable } from '@angular/core/rxjs-interop';
 import { DemoApiControlConfig } from '@demo-types/demo-api-control.type';
 import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type';
+import { DemoSlotConfig } from '@demo-types/demo-slot.type';
 import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array';
 import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config';
 import { getDemoApiTitle } from '@demo-utils/get-demo-api-title';
@@ -17,6 +18,8 @@ const AUTOCOMPLETE_DOCS_PATH = 'forms/components/autocomplete/autocomplete.compo
 const AUTOCOMPLETE_CHIP_LIST_DOCS_PATH = 'forms/components/autocomplete/autocomplete-chip-list.component.docs.json';
 const AUTOCOMPLETE_HINT_DOCS_PATH = 'forms/components/autocomplete/autocomplete-hint.component.docs.json';
 const AUTOCOMPLETE_TRIGGER_DOCS_PATH = 'forms/components/autocomplete/autocomplete-trigger.directive.docs.json';
+const AUTOCOMPLETE_SLOTS_DOCS_PATH = 'forms/components/autocomplete/autocomplete.component.slots.docs.json';
+const AUTOCOMPLETE_HINT_SLOTS_DOCS_PATH = 'forms/components/autocomplete/autocomplete-hint.component.slots.docs.json';
 
 const USER_INPUT_DEBOUNCE_TIME = 300;
 const SIMULATED_LOADING_TIME = 300;
@@ -445,6 +448,42 @@ export class AutocompleteDemoService {
     ];
   }
 
+  public readonly slotControlConfig: DemoSlotConfig = [
+    {
+      name: 'content',
+      description: this._widgetDocs.getDescription(
+        AUTOCOMPLETE_SLOTS_DOCS_PATH,
+        'content',
+        'Projected option content rendered in the autocomplete panel.',
+      ),
+    },
+  ];
+
+  public readonly hintSlotControlConfig: DemoSlotConfig = [
+    {
+      name: 'content',
+      description: this._widgetDocs.getDescription(
+        AUTOCOMPLETE_HINT_SLOTS_DOCS_PATH,
+        'content',
+        'Default content of the autocomplete hint message.',
+      ),
+    },
+  ];
+
+  public getSlotConfig(): DemoSlotConfig[] {
+    return [
+      this.slotControlConfig,
+      this.hintSlotControlConfig,
+    ];
+  }
+
+  public getSlotTitles(): string[] {
+    return [
+      'Autocomplete',
+      'Autocomplete hint',
+    ];
+  }
+
   private _fixedOptionsListFilterFn(options: InputOption[], value: string | null | undefined): InputOption[] {
     const filterValue = value?.toLowerCase() ?? '';
     return (options ?? [])

projects/demo/src/app/pages/badge/badge-demo.service.ts

@@ -3,13 +3,15 @@ import { WidgetDocsService } from '../../services/widget-docs.service';
 import { inject, Injectable } from '@angular/core';
 import { DemoApiControlConfig } from '@demo-types/demo-api-control.type';
 import { DemoControlConfig } from '@demo-types/demo-control.type';
+import { DemoSlotConfig } from '@demo-types/demo-slot.type';
 import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config';
 import { getDemoApiTitle } from '@demo-utils/get-demo-api-title';
 import { IDS_BADGE_DEFAULT_CONFIG_FACTORY, IdsBadgeAppearance, IdsBadgeAppearanceType, IdsBadgeVariant, IdsBadgeVariantType } from '@i-cell/ids-angular/badge';
 import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core';
 import { TranslateService } from '@ngx-translate/core';
 
 const BADGE_DOCS_PATH = 'badge/badge.component.docs.json';
+const BADGE_SLOTS_DOCS_PATH = 'badge/badge.component.slots.docs.json';
 
 type BadgeInputControls = {
   appearance: IdsBadgeAppearanceType;
@@ -93,4 +95,24 @@ export class BadgeDemoService {
       },
     ];
   }
+
+  public readonly slotControlConfig: DemoSlotConfig = [
+    {
+      name: 'iconLeading',
+      selector: 'ids-icon[icon-leading]',
+      description: this._widgetDocs.getDescription(
+        BADGE_SLOTS_DOCS_PATH,
+        'iconLeading',
+        'Icon projected before the badge label. Use an ids-icon element with the icon-leading attribute.',
+      ),
+    },
+  ];
+
+  public getSlotConfig(): DemoSlotConfig[] {
+    return [this.slotControlConfig];
+  }
+
+  public getSlotTitles(): string[] {
+    return ['Badge'];
+  }
 }

projects/demo/src/app/pages/button/button-demo.service.ts

@@ -21,6 +21,7 @@ import { TranslateService } from '@ngx-translate/core';
 const BUTTON_DOCS_PATH = 'button/button.component.docs.json';
 const BUTTON_GROUP_DOCS_PATH = 'button/button-group.component.docs.json';
 const BUTTON_SLOTS_DOCS_PATH = 'button/button.component.slots.docs.json';
+const BUTTON_GROUP_SLOTS_DOCS_PATH = 'button/button-group.component.slots.docs.json';
 
 const defaultConfig = IDS_BUTTON_DEFAULT_CONFIG_FACTORY();
 const defaultGroupConfig = IDS_BUTTON_GROUP_DEFAULT_CONFIG_FACTORY();
@@ -176,11 +177,29 @@ export class ButtonDemoService {
     },
   ];
 
+  public readonly groupSlotControlConfig: DemoSlotConfig = [
+    {
+      name: 'content',
+      selector: 'button[idsButton], button[idsIconButton]',
+      description: this._widgetDocs.getDescription(
+        BUTTON_GROUP_SLOTS_DOCS_PATH,
+        'content',
+        'Buttons projected into the group (idsButton and idsIconButton elements).',
+      ),
+    },
+  ];
+
   public getSlotConfig(): DemoSlotConfig[] {
-    return [this.slotControlConfig];
+    return [
+      this.slotControlConfig,
+      this.groupSlotControlConfig,
+    ];
   }
 
   public getSlotTitles(): string[] {
-    return ['Button'];
+    return [
+      'Button',
+      'Button group',
+    ];
   }
 }

projects/demo/src/app/pages/card/card-demo.service.ts

@@ -3,6 +3,7 @@ import { WidgetDocsService } from '../../services/widget-docs.service';
 import { inject, Injectable } from '@angular/core';
 import { DemoApiControlConfig } from '@demo-types/demo-api-control.type';
 import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type';
+import { DemoSlotConfig } from '@demo-types/demo-slot.type';
 import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array';
 import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config';
 import { getDemoApiTitle } from '@demo-utils/get-demo-api-title';
@@ -21,6 +22,8 @@ const CARD_BODY_DOCS_PATH = 'card/card-body.directive.docs.json';
 const CARD_HEADER_DOCS_PATH = 'card/card-header.component.docs.json';
 const CARD_DOCS_PATH = 'card/card.component.docs.json';
 const CARD_MEDIA_DOCS_PATH = 'card/card-media.directive.docs.json';
+const CARD_HEADER_SLOTS_DOCS_PATH = 'card/card-header.component.slots.docs.json';
+const CARD_SLOTS_DOCS_PATH = 'card/card.component.slots.docs.json';
 
 const defaultConfig = IDS_CARD_DEFAULT_CONFIG_FACTORY();
 
@@ -194,4 +197,58 @@ export class CardDemoService {
       },
     ];
   }
+
+  public readonly slotControlConfig: DemoSlotConfig = [
+    {
+      name: 'content',
+      description: this._widgetDocs.getDescription(
+        CARD_SLOTS_DOCS_PATH,
+        'content',
+        'Default content of the card.',
+      ),
+    },
+    {
+      name: 'footer',
+      selector: 'ids-card-footer,footer[idsCardFooter]',
+      description: this._widgetDocs.getDescription(
+        CARD_SLOTS_DOCS_PATH,
+        'footer',
+        'Content projected into the card footer area.',
+      ),
+    },
+  ];
+
+  public readonly headerSlotControlConfig: DemoSlotConfig = [
+    {
+      name: 'headline',
+      selector: 'ids-card-title, [idsCardTitle], ids-card-subtitle, [idsCardSubtitle]',
+      description: this._widgetDocs.getDescription(
+        CARD_HEADER_SLOTS_DOCS_PATH,
+        'headline',
+        'Projected title and subtitle content rendered in the card header headline area.',
+      ),
+    },
+    {
+      name: 'content',
+      description: this._widgetDocs.getDescription(
+        CARD_HEADER_SLOTS_DOCS_PATH,
+        'content',
+        'Additional content projected into the card header.',
+      ),
+    },
+  ];
+
+  public getSlotConfig(): DemoSlotConfig[] {
+    return [
+      this.slotControlConfig,
+      this.headerSlotControlConfig,
+    ];
+  }
+
+  public getSlotTitles(): string[] {
+    return [
+      'Card',
+      'Card header',
+    ];
+  }
 }

projects/demo/src/app/pages/chip/chip-demo.service.ts

@@ -23,6 +23,7 @@ import { TranslateService } from '@ngx-translate/core';
 const CHIP_DOCS_PATH = 'chip/chip.component.docs.json';
 const CHIP_GROUP_DOCS_PATH = 'chip/chip-group.component.docs.json';
 const CHIP_SLOTS_DOCS_PATH = 'chip/chip.component.slots.docs.json';
+const CHIP_GROUP_SLOTS_DOCS_PATH = 'chip/chip-group.component.slots.docs.json';
 
 const defaultConfig = IDS_CHIP_DEFAULT_CONFIG_FACTORY();
 const defaultGroupConfig = IDS_CHIP_GROUP_DEFAULT_CONFIG_FACTORY();
@@ -276,11 +277,29 @@ export class ChipDemoService {
     },
   ];
 
+  public readonly groupSlotControlConfig: DemoSlotConfig = [
+    {
+      name: 'content',
+      selector: 'ids-chip, button[idsChip]',
+      description: this._widgetDocs.getDescription(
+        CHIP_GROUP_SLOTS_DOCS_PATH,
+        'content',
+        'Chips projected into the chip group.',
+      ),
+    },
+  ];
+
   public getSlotConfig(): DemoSlotConfig[] {
-    return [this.slotControlConfig];
+    return [
+      this.slotControlConfig,
+      this.groupSlotControlConfig,
+    ];
   }
 
   public getSlotTitles(): string[] {
-    return ['Chip'];
+    return [
+      'Chip',
+      'Chip group',
+    ];
   }
 }

projects/demo/src/app/pages/dialog/dialog-demo.service.ts

@@ -152,6 +152,15 @@ export class DialogDemoService {
         'Content projected into the footer of the dialog (marked with the idsDialogActions attribute), typically action buttons.',
       ),
     },
+    {
+      name: 'idsDialogHeader',
+      selector: 'ng-template[idsDialogHeader], [*idsDialogHeader]',
+      description: this._widgetDocs.getDescription(
+        DIALOG_SLOTS_DOCS_PATH,
+        'idsDialogHeader',
+        'Custom header template rendered instead of the default dialog header.',
+      ),
+    },
   ];
 
   public getSlotConfig(): DemoSlotConfig[] {

projects/demo/src/app/pages/fieldset/fieldset-demo.service.ts

@@ -11,6 +11,7 @@ import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core';
 import { IdsFormFieldVariant, IdsFormFieldVariantType, IDS_FIELDSET_DEFAULT_CONFIG_FACTORY } from '@i-cell/ids-angular/forms';
 import { TranslateService } from '@ngx-translate/core';
 
+const FIELDSET_ROW_SLOTS_DOCS_PATH = 'forms/components/fieldset/fieldset-row/fieldset-row.component.slots.docs.json';
 const FIELDSET_DOCS_PATH = 'forms/components/fieldset/fieldset.component.docs.json';
 const FIELDSET_SLOTS_DOCS_PATH = 'forms/components/fieldset/fieldset.component.slots.docs.json';
 
@@ -86,7 +87,7 @@ export class FieldsetDemoService {
   public readonly slotControlConfig: DemoSlotConfig = [
     {
       name: 'idsFieldsetMessage',
-      selector: '[idsFieldsetMessage]',
+      selector: 'ids-hint-message[idsFieldsetMessage]',
       description: this._widgetDocs.getDescription(
         FIELDSET_SLOTS_DOCS_PATH,
         'idsFieldsetMessage',
@@ -104,11 +105,28 @@ export class FieldsetDemoService {
     },
   ];
 
+  public readonly rowSlotControlConfig: DemoSlotConfig = [
+    {
+      name: 'content',
+      description: this._widgetDocs.getDescription(
+        FIELDSET_ROW_SLOTS_DOCS_PATH,
+        'content',
+        'Default content of the fieldset row, typically form fields.',
+      ),
+    },
+  ];
+
   public getSlotConfig(): DemoSlotConfig[] {
-    return [this.slotControlConfig];
+    return [
+      this.slotControlConfig,
+      this.rowSlotControlConfig,
+    ];
   }
 
   public getSlotTitles(): string[] {
-    return ['Fieldset'];
+    return [
+      'Fieldset',
+      'Fieldset row',
+    ];
   }
 }