New HoC: SwitchList

[benjamincharity]

This is a higher order component wrapping a menu component.

If an 'apply' is needed, the menu should expose checkboxes. If the update is automatic the menu should expose toggles.

• Use selection model from cdk
  • See https://github.com/angular/components/blob/master/src/cdk/collections/selection-model.ts or SelectionList
  • Possibly expose the selection list for consumer rather than managing selection directly in the array
• Input immediate default true
  • When immediate is true
    • menu items show as toggles
    • should be styled like the DnD menu from sidenav
  • When immediate is false
    • menu items show as checkboxes
    • Checkboxes are on the left even though the toggles are on the right
    • A footer is added with cancel and apply button
      • Buttons text should be set by consumer
      • Buttons are small variant
      • Padding is 8px 16px
    • Menu content should be able to scroll without the footer scrolling - max-height 212px
• Styles
  • Panel: border: 1px solid #E9EBED; radius 4px
  • Use menu shadow (card 2x) box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08), 0px 0px 0px rgba(0, 0, 0, 0.08);
• Emit events
  • selectionChange: emit full list
  • selectionRemoved: the removed item
  • selectionAdded: the added item
  • submitClicked: void
  • cancelClicked: void
• Optional 'select all' link in header - also doesn't scroll out of view. @input allowSelectAll?
• Trigger should be a simple directive that changes no styles so consumer is in full control of trigger styles.
• Allows custom save/cancel text
  • submitButtonText - default Submit
  • cancelButtonText - default Cancel
• Add stories
• Add tests
• Write docs
• Add to primary readme packages table

---

Possible implementations

export interface TsSwitchListItemBase {
  display: string;
  value: string;
  selected: boolean;
}

export interface TsSwitchListItemCheckbox extends TsSwitchListItemBase {
  indeterminate: boolean;
}

export type TsSwitchListItem = TsSwitchListItemBase | TsSwitchListItemCheckbox;

const items: TsSwitchListItemBase[] = [
  {
    display: 'Option a',
    value: 'a',
    selected: false,
  },
  {
    display: 'Option b',
    value: 'b',
    selected: true,
  },
];

<button [tsSwitchListTrigger]="myList">Open list</button>

<ts-switch-list
  [items]="items"
  (selectionChange)="doSomething($event)"
  #myList="tsSwitchList"
></ts-switch-list>

<ts-switch-list
  [items]="items"
  [isAsync]="false"
  submitButtonText="Confirm"
  cancelButtonText="Cancel"
  (selectionChange)="doSomething($event)"
></ts-switch-list>

---

Resources

• https://github.com/angular/components/blob/master/src/cdk/collections/collections.md
• https://www.figma.com/file/Cd1jyGKKBtKFguUXdfdP9z/Ad-Insights?node-id=1452%3A451