diff --git a/projects/novo-elements/src/elements/tabbed-group-picker/TabbedGroupPicker.ts b/projects/novo-elements/src/elements/tabbed-group-picker/TabbedGroupPicker.ts
index 788cc9c11..f8369e900 100644
--- a/projects/novo-elements/src/elements/tabbed-group-picker/TabbedGroupPicker.ts
+++ b/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();
}
diff --git a/projects/novo-examples/src/components/tabbed-group-picker/index.ts b/projects/novo-examples/src/components/tabbed-group-picker/index.ts
index b021a27fe..ea486cbef 100644
--- a/projects/novo-examples/src/components/tabbed-group-picker/index.ts
+++ b/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';
diff --git a/projects/novo-examples/src/components/tabbed-group-picker/tabbed-group-picker-footer-example/index.ts b/projects/novo-examples/src/components/tabbed-group-picker/tabbed-group-picker-footer-example/index.ts
new file mode 100644
index 000000000..0284c380f
--- /dev/null
+++ b/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';
diff --git a/projects/novo-examples/src/components/tabbed-group-picker/tabbed-group-picker-footer-example/tabbed-group-picker-footer-example.html b/projects/novo-examples/src/components/tabbed-group-picker/tabbed-group-picker-footer-example/tabbed-group-picker-footer-example.html
new file mode 100644
index 000000000..9ca8b3e3f
--- /dev/null
+++ b/projects/novo-examples/src/components/tabbed-group-picker/tabbed-group-picker-footer-example/tabbed-group-picker-footer-example.html
@@ -0,0 +1,15 @@
+
+
+
+
Selected Animal IDs:
+
{{ selectedAnimals.join(', ') }}
+
Selected Animal Category IDs:
+
{{ selectedAnimalCategories.join(', ') }}
+
+
diff --git a/projects/novo-examples/src/components/tabbed-group-picker/tabbed-group-picker-footer-example/tabbed-group-picker-footer-example.ts b/projects/novo-examples/src/components/tabbed-group-picker/tabbed-group-picker-footer-example/tabbed-group-picker-footer-example.ts
new file mode 100644
index 000000000..144e4c5de
--- /dev/null
+++ b/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';
+ }
+}
diff --git a/projects/novo-examples/src/components/tabbed-group-picker/tabbed-group-picker.md b/projects/novo-examples/src/components/tabbed-group-picker/tabbed-group-picker.md
index e1af723d9..eb9960849 100644
--- a/projects/novo-examples/src/components/tabbed-group-picker/tabbed-group-picker.md
+++ b/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.
-
\ No newline at end of file
+
+
+## Footer
+
+
\ No newline at end of file
diff --git a/projects/novo-examples/src/examples.routes.ts b/projects/novo-examples/src/examples.routes.ts
index 4af8d12b6..6cebcb7fe 100644
--- a/projects/novo-examples/src/examples.routes.ts
+++ b/projects/novo-examples/src/examples.routes.ts
@@ -2831,6 +2831,8 @@ export class SwitchPage {
Selection Disabled
When checkboxes are disabled in the activation picker, we can still listen for "activation" events when an item has been clicked.
+Footer
+
`,
host: { class: 'markdown-page' }
})