Enterprise-ng: Button: Complete Api By Adding EP changes to NG

[tmcconechy]

Is your feature request related to a problem? Please describe.
We added a new button api https://github.com/infor-design/enterprise-ng/issues/467 but its not fully coded into the NG project.

Describe the solution you'd like

• add the types
• show an example of modifying a modal dynamically in the page
• tests?

Describe alternatives you've considered
N/A

Additional context
Added 4.27

[bthharper]

@EdwardCoyle happy to help with this if you can give me a pointer.

[EdwardCoyle]

Hey @bthharper, thank you!

Basically we need to get all the new API endpoints added in infor-design/enterprise#3582 exposed by NG. The original ask here was to be able to add/remove buttons dynamically, as well as individually or totally disable/enable buttons in the set. The most important endpoints are in the ButtonSet:

• [ ] [add()](https://github.com/infor-design/enterprise/blob/d0f7888cc08910c9af6dbc9a30bdce8bc5eb719b/src/components/button/button.set.js#L114)
• [ ] [remove()](https://github.com/infor-design/enterprise/blob/d0f7888cc08910c9af6dbc9a30bdce8bc5eb719b/src/components/button/button.set.js#L150)
• [ ] [disabled setter](https://github.com/infor-design/enterprise/blob/d0f7888cc08910c9af6dbc9a30bdce8bc5eb719b/src/components/button/button.set.js#L39)
• [ ] probably worth also exposing updated/destroy on this, since it's new.

This component now powers the Modal's Buttonset area, and is exposed in EP here. My thinking was in the NG modal, we might be able to expose the ButtonSet API on a Modal instance directly if we already have that component defined in NG, and interact with the API directly for these operations.

I think all the code provided in that PR should make this possible in NG, but if we need anything else please let me know.

[bthharper]

/**
 * Soho Buttonset API
 *
 * This file contains the Typescript mappings for the public
 * interface of the IDS Enterprise jQuery buttonset control.
 *
 * Only the public interface consumable by the Angular
 * Soho Component is included in this file.
 */

interface SohoButtonsetSettings {
  /**
   * The list of buttons definitions - is this a copy from the modal?
   */
  buttons?: SohoModalButton[];

  /**
   * Detect existing button in the markup rather than generating
   * new button markup.
   */
  detectHTMLButtons?: boolean;

  /**
   * Styles to add to any generated button markup.
   */
  style?: string[];
}

interface SohoButtonsetApi {
  /**
   * The buttons apis for this buttonset.
   */
  buttons: SohoButtonStatic[];

  /**
   * Disable all the buttons on the buttonset.
   *
   * @param val whether or not the Buttonset is disabled.
   */
  disable(val: boolean): void;

  /**
   * Adds a new button to the Buttonset.
   *
   * @param settings containing
   * @param [doAddDOM=false] if true, appends the new element to the Buttonset container after creation/update.
   */
  add(settings: SohoModalButton, doAddDOM?: boolean): void;

  /**
   * Removes a button from the buttonset.
   *
   * @param buttonAPI a Button Component instance, a Button HTML Element with an IDS component instance attached, or a string representing its ID
   * @param [doRemoveDOM=false] if true, removes the button's HTML from the page.
   */
  remove(buttonAPI?: SohoButtonStatic | HTMLButtonElement | string, doRemoveDOM?: boolean);

  /**
   * Removes ALL buttons from the buttonset
   * @param [doRemoveDOM=false] if true, removes the button's HTML from the page.
   */
  removeAll(doRemoveDOM?: boolean): void;

  /**
   * Returns a ButtonSet API in a specified place in the buttons array.
   *
   * @param idx index to target
   * @returns the Button API at the given index
   */
  at(ids: number): SohoButtonStatic;

  /**
   * Update the component with new settings.
   *
   * @param settings The settings you would like to modify.
   * @returns This component's API.
   */
  updated(settings: SohoButtonsetSettings): SohoButtonsetApi;

  /**
   * Teardown and remove any added markup and events.
   */
  destroy(): void;
}

[bthharper]

@EdwardCoyle / @tmcconechy see the above for a strawman typings file for the buttonset. I assume this would be accessible from the modal, using the buttonsetAPI property.

I am not sure how to map the disabled setter, will have to google as that's the first of those I've seen.

Also, assuming the buttonAPI is the same as the soho-button, then that will need updating too as it does not expose methods like disabled yet.

Also default parameters are not allowed, so I am going assume (for now) that using "?" will allow the default.

Thoughts?

[bthharper]

/**
 * This interface represents the public API exposed by the
 * button.
 */
interface SohoButtonStatic {
  settings: SohoButtonOptions;
  destroy(): void;
}

This is the current buttonAPI

[bthharper]

So need disable and element. I would need to check the rest of the button.js code to see what else is relevant.

[tmcconechy]

Only thing other i see from https://github.com/infor-design/enterprise/blob/master/src/components/button/button.set.js toData could be useful.

[bthharper]

Sure - wasn't sure which of the apis to expose, obviously some are internal.

[bthharper]

Is there more to add on the button-api?

[bthharper]

const BUTTON_DEFAULTS = {
  style: buttonStyles[0],
  type: buttonTypes[0],
  toggleOnIcon: null,
  toggleOffIcon: null,
  hideMenuArrow: null,
  replaceText: false,
  ripple: true,
  validate: false
};

[bthharper]

Almost complete - just adding a demo - gauntlet!