xynga-ui-package

Containers

Synopisis

Ui-package is a package of all the Xynga UI elements for use individually and for display in the UI toolkit app.

Xynga Containers

• CardComponent - a container formatted like a note card on which content can be displayed.
• CollapsibleBoxComponent - a toggleable container that animates to expand and close.
• InformationPanelComponent - an expandable container designed to display help links which will scroll to stay in view as long as containing element remains in view.
• ModalPanelComponent - a sliding container that appears from the right side of the browser window.
• TooltipComponent - a pop-up container that is triggered by clicking on a designated button.

Xynga Form Elements

• DropdownMenu - A drop-down menu that requires a string array as a list of menu options abd a method for setting the selected string on optionChanged.
• RadioButton - A menu modeled after radio buttons in a car - whichever menu option was last clicked is the currently selected option.
• YearSelector - a drop-down menu designed specifically for each option to be a different year.

Xynga General

• IconComponent - used to display any of the 50+ SVG icons packaged with the library
• NotificationsComponent - an extension of the angular2-notifications library that is used to display notifications with many different customization options
• CodeHighlightDirective - allows printed HTML and TypeScript code to be highlighted using various colors, so that keywords, strings, and variables are easily distinguished from each other
• ActionAlertComponent - displays a user selected SVG icon (using the Icon Component) overlaid with a red triangle containing an exclamation point, and a user defined message

Xynga Graph

• graph-donut - a donut graph which reflects the percentage that is passed into it.

Xynga Navigation

• MenuDirective - a directive that is meant to be placed inside an HTML element that allows the inner contents of that element to become a pop-up menu with various customization options.
• TabListComponent - A simple list of tabs, each containing a clickable route link.

Xynga Table

• TableComponent - a table component that offers customization options to make it paginated and scrollable.

Motivation

Ui-package contains 6 of the Xynga libraries. Each of these libraries are made up of components, services, and directives that were originally developed for Vertex's Country-By-Country Reporting application. They were repackaged under the Xynga name and published on npm so that they could be made available to anyone that wishes to use them in their Angular 4 application.

Installation

To install Xynga-Ui-Package, run the command npm install xynga-ui-package from an Angular project directory to which you wish to install the package of libraries. It will then be available in the project's node_modules directory. All Xynga-Ui-Package's third party dependencies will be automatically downloaded and placed in the project's node_modules directory as well. Then, simply import:

• ContainersModule (from 'xynga-containers')
• FormElementsModule (from 'xynga-form-elements ')
• GeneralModule (from 'xynga-general ')
• GraphModule (from 'xynga-graph ')
• NavigationModule (from 'xynga-navigation ')
• TablesModule (from 'xynga-table') to the appropriate module in the project.

Additionally, it is important that "types" : ["node"] and "typeRoots" : ["../node_modules/@types"] are added to the "compilerOptions" array in the project's tsconfig.app.json file, or else the project might not compile properly. If you are using the angular-cli then this should be handled for you.

Additional Information

Detailed descriptions on how to use each individual library and its components, along with examples and APIs, can be found at [XYNGA-WEBSITE].

Contact

If you have a question about how a particular component or directive works, or would like to report a bug, please email [e-mail].

Xynga website: [XYNGA-WEBSITE]

github: https://www.github.com/vertexinc/ui-package

npm: https://www.npmjs.com/package/xynga-ui-package

License

The MIT License (MIT)

Copyright (c) 2017 Jesse Aronson, Sam Black, Jiggs Gatmaitan, Nancy Gerwig, John Hart, Tim Klein, Andrew LaRoche, Peter Vink

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.