fix(TabbedGroupPicker): Emit selected values on cancel

projects/novo-elements/src/elements/tabbed-group-picker/TabbedGroupPicker.ts

@@ -374,6 +374,7 @@ export class NovoTabbedGroupPickerElement implements OnDestroy, OnInit {
 
   cancel() {
     this.revertState();
+    this.emitSelectedValues();
     this.ref.markForCheck();
     this.dropdown.closePanel();
   }

projects/novo-examples/src/components/tabbed-group-picker/index.ts

@@ -1,5 +1,6 @@
 export * from './tabbed-group-picker-no-selection-example';
 export * from './tabbed-group-picker-basic';
 export * from './tabbed-group-picker-big-groups-example';
+export * from './tabbed-group-picker-footer-example';
 export * from './tabbed-group-picker-groups-example';
 export * from './tabbed-group-picker-quick-select-example';

projects/novo-examples/src/components/tabbed-group-picker/tabbed-group-picker-footer-example/index.ts

@@ -0,0 +1 @@
+export * from './tabbed-group-picker-footer-example';

projects/novo-examples/src/components/tabbed-group-picker/tabbed-group-picker-footer-example/tabbed-group-picker-footer-example.html

@@ -0,0 +1,15 @@
+<div class="tabbed-group-picker-example">
+  <novo-tabbed-group-picker
+    [(tabs)]="example_tab"
+    [quickSelectConfig]="example_quickSelectConfig"
+    [buttonConfig]="example_buttonConfig"
+    (selectionChange)="onSelectionChange($event)"
+    [showFooter]="true"
+  ></novo-tabbed-group-picker>
+  <div class="selected-data-wrapper">
+    <h6>Selected Animal IDs:</h6>
+    <div>{{ selectedAnimals.join(', ') }}</div>
+    <h6>Selected Animal Category IDs:</h6>
+    <div>{{ selectedAnimalCategories.join(', ') }}</div>
+  </div>
+</div>

projects/novo-examples/src/components/tabbed-group-picker/tabbed-group-picker-footer-example/tabbed-group-picker-footer-example.ts

@@ -0,0 +1,97 @@
+import { Component } from '@angular/core';
+import { ChildTab, ParentTab, TabbedGroupPickerTab } from 'novo-elements';
+
+/**
+ * @title Tabbed Group Picker - Footer Example
+ */
+@Component({
+  selector: 'tabbed-group-picker-footer-example',
+  templateUrl: 'tabbed-group-picker-footer-example.html',
+  styleUrls: ['../tabbed-group-picker-example.scss'],
+})
+export class TabbedGroupPickerFooterExample {
+  getAnimals = (): { animalId: number; name: string }[] =>
+    ['Dog', 'Cat', 'Mouse', 'Horse', 'Cow', 'Chicken', 'Pig', 'Sheep', 'Goat', 'Goose'].map((name, index) => ({
+      name,
+      animalId: index + 1,
+    }));
+
+  getAnimalCategories = (): { groupId: number; name: string; children?: { animalId: number; name: string }[] }[] => {
+    const animals = this.getAnimals();
+    const birds = ['Chicken', 'Goose'].map((name) => animals.find((animal) => animal.name === name));
+    const livestock = ['Cow', 'Pig', 'Sheep', 'Goat'].map((name) => animals.find((animal) => animal.name === name));
+    return [
+      {
+        name: 'Birds',
+        groupId: 1,
+        children: birds,
+      },
+      {
+        name: 'Livestock',
+        groupId: 2,
+        children: livestock,
+      },
+    ];
+  };
+  example_tab = [
+    {
+      typeName: 'animals',
+      typeLabel: 'Animals',
+      valueField: 'animalId',
+      labelField: 'name',
+      data: this.getAnimals(),
+    },
+    {
+      typeName: 'animalCategories',
+      typeLabel: 'Animal Categories',
+      valueField: 'groupId',
+      labelField: 'name',
+      childTypeName: 'animals',
+      data: this.getAnimalCategories(),
+    },
+  ];
+  public example_quickSelectConfig = {
+    label: 'Quick Select',
+    items: [
+      {
+        childTypeName: 'animals',
+        children: [2],
+        label: 'Pure Evil',
+      },
+      {
+        childTypeName: 'animals',
+        children: [1, 6, 9],
+        label: 'My Pets',
+      },
+      {
+        childTypeName: 'animals',
+        all: true,
+        label: 'All Animals',
+      },
+    ],
+  };
+
+  public buttonLabel: string = 'Nothing Selected';
+  public example_buttonConfig = {
+    theme: 'select',
+    side: 'right',
+    icon: 'collapse',
+    label: this.buttonLabel,
+    selector: 'buttonConfig',
+  };
+
+  selectedAnimals: string[] = [];
+  selectedAnimalCategories: string[] = [];
+
+  onSelectionChange(selectedData: TabbedGroupPickerTab[]) {
+    this.selectedAnimals = (selectedData.find(({ typeName }) => typeName === 'animals') as ChildTab).data.map(({ animalId }) => animalId);
+    this.selectedAnimalCategories = (selectedData.find(({ typeName }) => typeName === 'animalCategories') as ParentTab).data.map(
+      ({ groupId }) => groupId,
+    );
+    this.example_buttonConfig.label = this.buildButtonLabel();
+  }
+
+  buildButtonLabel(): string {
+    return this.selectedAnimals.length ? `Animals (${this.selectedAnimals.length})` : 'Nothing Selected';
+  }
+}

projects/novo-examples/src/components/tabbed-group-picker/tabbed-group-picker.md

@@ -26,4 +26,8 @@ Tabbed Group Picker provides a configurable quick select interface. For each qui
 
 When checkboxes are disabled in the activation picker, we can still listen for "activation" events when an item has been clicked.
 
-<code-example example="tabbed-group-picker-no-selection"></code-example>
+<code-example example="tabbed-group-picker-no-selection"></code-example>
+
+## Footer
+
+<code-example example="tabbed-group-picker-footer"></code-example>

projects/novo-examples/src/examples.routes.ts

@@ -2831,6 +2831,8 @@ export class SwitchPage {
 <h2>Selection Disabled</h2>
 <p>When checkboxes are disabled in the activation picker, we can still listen for &quot;activation&quot; events when an item has been clicked.</p>
 <p><code-example example="tabbed-group-picker-no-selection"></code-example></p>
+<h2>Footer</h2>
+<p><code-example example="tabbed-group-picker-footer"></code-example></p>
 `,
   host: { class: 'markdown-page' }
 })