teradata / covalent

Teradata UI Platform built on Angular Material

Covalent Design System

Covalent is Teradata's design system used to create Teradata branded experiences. This space is intended to be used to support developers creating coded experiences for Teradata products. Currently we are only supporting angular and a library of web components.

Vision: To build an atomic, reusable component platform for Teradata to consume, while collaborating in an open source model.

Setup

• Ensure you have Node 18.12.0+
• Install Node packages npm ci
• Run local build npm run start

---

• Getting Started
• Contributing Guidelines
• Developer Guide
• Upgrading
• Releasing
• Changelog
• StackBlitz Template
• Plunker Template

---

Angular Support

Certain covalent version are meant for certain angular versions, and here is the matrix:

Covalent	Angular
2.X	8.X
3.X	9.X / 10.X / 11.x
4.X	12.X / 13.X
5.X	14.X
6.X	15.X
7.X	16.X
8.X	17.X

Browser Support

Covalent is built on a CSS Flexbox layout and all layouts and components heavily rely up that support, so the current browsers are supported in order or recommendation:

Current version - 1 for the following:

	Chrome	Firefox	Safari	Edge	Mobile Chrome	Mobile Safari
Supported	✓	✓	✓	✓	~	~

~ Indicates limited testing & lower priority

Running Chromatic

npx chromatic --project-token=${CHROMATIC_PROJECT_TOKEN}

covalent's Issues

Design Pattern: FAB Usage

• when to use in bottom right
• when to use overlaying toolbar
• how to change for mobile

[Feature Request] Horizontal Steppers

Feature Request For Horizontal Steppers

Spec Sheet - https://material.google.com/components/steppers.html#steppers-types-of-steppers

What is the expected behavior?

Instead of leveraging the behavior of Material Lists, leveraging or extending the behavior of Material Tabs will provide a Horizontal Stepper which displays progress stacked on top of current step content in a column fashion rather than a row. Switching between steps would have some sort of 'swiping' animation and would emit the same events currently emitted by the vertical stepper.

What is the motivation / use case for changing the behavior?

Horizontal Steppers provide a much better user experience for wizards because they keep content above the fold and display progress before content. They also have better reaction to Wide Screen sizes.

What would you like to see in addition to expected behavior?

Development would be greatly simplified if a path towards switching between horizontal and vertical on the fly could be made for when the desktop layout turns to mobile.

need a form view for stepper

need a form view for dynamic stepper !

[https://tagmanager.google.com/?hl=en#/admin/accounts/create(url)

Chart Improvements

refer to incomplete tasks in #1

Dynamic Forms Component

Possibly based off https://github.com/formly-js/ng2-formly

md-slide-toggle-focused md-ink-ripple bg color

Need to update this:

md-slide-toggle {
        &.md-checked {
            .md-slide-toggle-thumb {
                background-color: $md-accent;
            }
            .md-slide-toggle-bar {
                background-color: $md-accent-opacity;
            }
        }
    }

to

md-slide-toggle {
        &.md-checked {
            .md-slide-toggle-thumb {
                background-color: $md-accent;
            }
            .md-slide-toggle-bar {
                background-color: $md-accent-opacity;
            }
        }
        &.md-slide-toggle-focused {
            .md-ink-ripple {
                background-color: $md-accent-opacity;
            }
        }
    }

so the ink-ripple matches the theme we're overriding in app/app.component.scss

[Feature Request] Loading Overlay Component Target

Feature Request

This is a use enhancement for the current Loading Indicator Overlay to extend the API.

What is the expected behavior?

Currently, there are two methods to invoke the creation of a Loading Indicator Component, each which have different outcomes.

The Template Syntax method replaces everything within its scope with a Loading Component where the Loading Service call appends an Overlay the current view obscuring the content though not completely.

I would like to see a way in which the Overlay can be created with the same constraints as the Template Syntax method so that you can target which component the Overlay is obscuring.

The Loading Service requires a ViewContainerRef be passed into it, however it only accepts Root references, meaning that the following cannot be utilized.

@ViewChild(TargetComponent, {read: ViewContainerRef}) TargetComponent: TargetComponentType;

The latter will give you an instance of ViewContainerRef, but it is not a complete instance, and therefore cannot be used with the service.

The only way to target a component for the overlay is to have the service as part of the targeted component. I want to achieve the creation of two Overlay loads, a PageLoader and a ScreenLoader, essentially. The PageLoader will Overlay only the Main Body Content (Not the Sidebar or the Header) which signifies that the user can navigate away from the page, and the action will not be canceled. The ScreenLoader will Overlay the Main Body Content and the Sidebar, to prompt the user that the action cannot be navigated from.

In my situation, I am utilizing a combination of layouts eventually drilling down to a single router-outlet (similar as to how it is presented in the repo) for all page routes, which allows for a simple folder structure. As it stands, the only way for me to achieve my desired outcome would be to break up the main template into a few smaller templates and create the overlays within the service at the level of the individual templates which would get pretty messy.

I would like to suggest either that the Template Syntax is changed so that it does not replace the inner content, but provides the reference for creating an overlay for the inner content, or the Loading Service Construct is modified so that it utilizes a ShadowDOM reference rather than a root ViewContainerRef.

Starter app for webpack-rc7

Hi,

Is there any quick starter app for webpack-rc7 ?

Thanks

Resources Page

Add resources page with:

• Sketch template
• Axure library

Style Guide: Resources page

• Sketch template
• Axure library

Templates and Styles not inlined in NPM packages

Greetings,

I'm trying to use the Covalent components within my app using the NPM packages but I'm having a problem. The component's code is already transpiled to Javascript but the styles and templates were not converted to a inline version inside the Javascript file. As a result, when I use the components, the loader does not find the styles and templates.
The Angular Material 2 NPM packages algo have the transpiled versions, but the templates and styles are inlined.
I'm using webpack to bundle and did not found a work around this problem. Do you have any thoughts about how this can be solved, or could you provide the inlined versions in a future release?

Regards

Cannot build the project on Linux Ubuntu 14.04

This repository's issues are reserved for feature requests and bug reports.

Do you want to request a feature or report a bug?

bug

Feature Request

please first make sure your request falls under the official Material Design spec guidelines https://material.google.com/

Bug Report

please provide steps to reproduce and if possible screenhots or animated Gifs.
you can easily create animated Gif with this free PC/OSX App: http://www.cockos.com/licecap/
I ran the steps provided here https://teradata.github.io/covalent/#/docs
on linux for command with -g I add a sudo prefix
everything worked without issue until I ran npm i
the the error shown on the image happened.

Screenshots or link to CodePen/Plunker/JSfiddle

https://snag.gy/W3bu7G.jpg

What is the expected behavior?

To build without error

What is the motivation / use case for changing the behavior?

Which version of Angular and Material, and which browser and OS does this issue affect?

Did this work in previous versions of Angular / Material?
Please also test with the latest stable and snapshot versions.

Other information

(e.g. detailed explanation, stacktraces, related issues, suggestions how to fix)

Document Utility Styles

• general
• pad
• pull
• push
• size
• text
• utilities

Design Patterns: Immersive Experiences

tl;dr
Don't use modals for creation when you can use a fullscreen form/view, drill down from a list view to a detail view, and then drill down into that detail view if there are child routes & views

Form Validation Styles for radios, checkboxes and toggles

Invalid/Error styles for:

• md-radio-button
• md-checkbox
• md-slide-toggle (if possible)

Feature: Complete Teradata Covalent NPM packages

Greetings,

Very nice work!
As we are using a custom webpack build, we will use the covalent NPM packages.
At this time, there is the core and 3 other custom elements. Do you plan to maintain this NPM packages and add the missing Teradata components?

Regards

Remove bg hover/cursor from disabled expansion panel

bc seems like you can still click it

Upstream Angular2 Components

• Select
• Autocomplete
• Dialog PR
• Tooltip PR
• Toast
• Slider PR
• Ripple PR

bug(tdFileDrop): no way to remove .drop-zone flag

tdFileDrop directive adds .drop-zone class on (dragenter). And I expect .drop-zone class to be removed after user released mouse button and (fileDrop) event emitted. However It doesn't happen and I can't find a way to do it manually.

i18n hooks

Just wanted to add this to start thinking of how we and make internationalization easier/abstracted in Covalent. Obviously optional, but if i18n is configured to be on, it's easy to just drop translated files into a languages directory and have the UI use them

Update td-layouts responsiveness

• nav-list
• manage-list

HttpInterceptorService Subscriber.complete() is not called

Bug Report

When using HttpInterceptorService in place of Http, the complete callback is not being fired for the returned observables.

Screenshots or link to CodePen/Plunker/JSfiddle

Example:

let http: HttpInterceptorService;

public getDataPromise() : Promise<any> {
    let promise = this.http.get('/some/url').toPromise();
    return promise.then((data) => {
       console.log('this function will never be called');
    },
    (error) => { 
      console.log('this will be called if there was an error');
    });
}

The promise will never have its resolve method called because toPromise returns a promise that only resolves once the observable is complete.

What is the expected behavior?

The completecallback should be called. Many methods call subscribeand provide a callback for complete.

Which version of Angular and Material, and which browser and OS does this issue affect?

All browsers/versions.

Other information

In lines 52-62 of http-interceptor.service.ts you can see where the nextand errormethods are called for subscriber, but complete is never hooked up.

Data Table Component

Possibly get inspiration or pull in

https://justindujardin.github.io/ng2-material/#/components/data-table

or

https://github.com/swimlane/angular2-data-table

codehealth(karma): karma in rc6

Feature Request

make unit tests work again using rc6 since the setup and usage is a bit different than previous releases.

Material Motion (angular2 page animations)

use to be called "meaningful transitions"
From the spec:
https://material.google.com/motion/material-motion.html
applying to angular2 using https://angular.io/docs/ts/latest/guide/animations.html

possibly using onActivate and onDeactivate
from http://stackoverflow.com/posts/33554846/revisions

with the goals of these animation options:

• object (using directives?)
• pages (using on router-outlet?)
• grow/shrink (from point of origin)
• from item to view (point of origin w/ hierarchy)
• simple page transitions (crossfade/right->left/left->right/top->bottom/bottom->top)

github.io site routing

This feature request belongs with the github.io covalent site, but afaict the repo for that is private (?).

I tried linking someone to https://teradata.github.io/covalent/style-guide/material-components, as it's a great overview of ng2 MD components (which they don't even have up yet on their official site yet at all). That link fails though -- it seems the routing is still a one-way street for now. I haven't had much experience with the recent ng2 routers yet either, but hope this might get improved at one point. :)

Media Query Directive

A directive that conditionally applies:

• CSS Classes
• Other directives
• Attributes
• Also use within TypeScript on a Component/Pipe/Class/etc

based on media-query-like min/max width/height

---

Something like:
<a md-list-item [routerLink]="[item.route]” mediaQuery(‘max-width:600px, (click)="list.toggle()")>

where the (click)="list.toggle()" only gets applied if max-width:600px

Hoping NgZone & MediaQueryList can help:

@Component({
  selector: 'my-app',
  styles: [`
    .box { width: 300px; height: 300px; }
  `],
  template : `<div class="box" [style.backgroundColor]="color"></div>
  `,
  directives : []
})
export class App {  
  public color: string = 'black';

  constructor(zone: NgZone) {
    const mql: MediaQueryList = window.matchMedia('(min-width: 600px)');

    mql.addListener((mql: MediaQueryList) => { 
      zone.run( () => { // Change the property within the zone, CD will run after
        this.color = mql.matches ? 'blue' : 'yellow';
      });
    });
  }
}

Mock API server

Create a mock API server that can generate realistic data.

MVP

• offline mode
• Populate mock API data with realistic datum (i.e. real names & email addresses)
• Populate chart data with time series data based on query parameters in the mock API call
  • axis labeling
  • y-axis ranges and timeframe selectable
  • API pagination
  • wave output selectable (square, sine, triangle, random, etc)

Update to angular cli with webpack

This repository's issues are reserved for feature requests and bug reports.

Do you want to request a feature or report a bug?

Feature

Feature Request

Please update covalent to the newest version of the angular cli, that switched the build system to webpack.
Also applies to the starter kit.

Plunker template for Covalent

Similar to how material2 and many repos do it, let's create a plunker template similar to:
http://plnkr.co/edit/o077B6uEiiIgkC0S06dd

there's some questions and prereqs around generating and hosting JS and CSS on CDN

create umd js files

Feature Request

Create and package umd.js files to be in par on how angular2/angular2-material releases and publishes the modules.

[Feature Request] Loading Methods for Loading Types

Do you want to request a feature or report a bug?

This is a Feature Request for the addition of loading methods to the loading types already presented.

Feature Request

The specifications for the Material Loading Indicators can be found at the following link.
https://material.google.com/components/progress-activity.html#progress-activity-types-of-indicators

For both types of loaders, two methods exist: Determinate and Indeterminate.

In addition to these main types, Linear has two extended types: Determinate Buffer and Indeterminate Query.

Indeterminate specifies that the animation of the loader is infinite and continues until the loader is resolved, this is the current method of the loaders.

Determinate specifies that the animation of the loader is based on data-bound values. If only a current value is specified, that value is a percentage out of 100. If two values are specified, one should be a current value and one should be a maximum value to calculate a percentage.

All methods specified are currently supported by the Angular 2 Material project.
https://www.npmjs.com/package/@angular2-material/progress-bar
https://www.npmjs.com/package/@angular2-material/progress-circle

What is the expected behavior?

The API for the loading service should be extended to allow for the method of loading for a particular context container to be changed as well as the progress value for the indicator.

This would allow for something similar to the following API.

constructor(private viewContainerRef: ViewContainerRef, private _loadingService: TdLoadingService) {
    if (!_loadingService.getContextContainer('pageLoader')) {
        let options: ILoadingOptions = {
            name: 'pageLoader',
            type: LoadingType.Circular,
            method: LoadingMethod.Determinate
        };
        this._loadingService.createOverlayComponent(options, viewContainerRef);
    }

    // The XHR Upload Allows Progress Polling Which Returns A Number
    this._fileUploadService.progress.subscribe(res => {
        this._loadingService.setValue('pageLoader', res)
    }
}

registerLoading() {
    this._loadingService.register('pageLoader')
}

resolveLoading() {
    this._loadingService.resolve('pageLoader')
}

fileUploadEvent(file: File){
    this._loadingService.setValue('pageLoader', 0)
    this.registerLoading();

    // Begin XHR Upload
            this.resolveLoading(); // On Completion
    // End XHR Upload
}

What is the motivation / use case for changing the behavior?

In many instances applications have enough information to provide an estimation of progress for a particular action. The current state of the loader does not allow us to display that progress.

feature(build): move to a single package

Are you considering publish covalent as a single package as has been done by Angular Material team here angular/components#1286?

Update Quickstart

• use all td layouts
• use better mock data
• add logos & icons
• use stepper in an example form
• use expansions & other td components

Update component docs

This repository's issues are reserved for feature requests and bug reports.

Do you want to request a feature or report a bug?

Feature Request

Update docs with ngModule.

Docs:

• Stepper
• Expansion Panel
• File Upload
• Chips & Autocomplete
• Loading
• Highlight
• JsonFormatter
• Markdown
• MediaQueries
• Http

Document Color Styles

• bg on style-guide/colors
• text colors on typography
• icon fill colors on iconography & product icons

Travis CI Testing

PR testing & badge at the very least

Interceptors

Feature Request

Custom HTTP wrapper to intercept requests/responses.

What is the expected behavior?

Angular2 does not have a way to provide this. So we need to build it from scratch wrapping the ng2 Http service.

What is the motivation / use case for changing the behavior?

Need to be able to use interceptors for HTTP requests. (JWT, error control, redirection, headers, etc etc)

Interceptor onRequest error

Hello everyone,

I just started using this repository and I seem to be having trouble getting a full response back on a GET operation.

As I understand by following the documentation here once you setup a custom interceptor and properly configure it in your NgModule imports, you should be able to simply replace all instances of your normal Http references with the interceptor.

However what I seem to find is under certain requests the interceptor does not seem to match the same output as the default angular Http request. My custom error interceptor at the moment is a direct copy of the example setup - simply passing along the parameters of the required methods (onRequest, onResponse, and onResponseError). Yet it appears that some of the data is not being propagated through the chain causing my page to no longer load as it was simply using the default angular2 Http module.

Interestingly I'm wondering now if this has any correlation, but the requests that seem to work fine are returning simple values (int) but the one that I know for sure fails is returning a custom json object with multiple values.

Let me know if I can clarify anything further - this library looks awesome and I would love to adopt it! Thanks!

Form Validation Styles

• required
• invalid
• valid
• inline error messages (md-hint)
• styles for radios
• style for checkbox

Overlapping text when using back button

This repository's issues are reserved for feature requests and bug reports.

Do you want to request a feature or report a bug?

bug

Bug Report

please provide steps to reproduce and if possible screenhots or animated Gifs.
you can easily create animated Gif with this free PC/OSX App: http://www.cockos.com/licecap/

(using Safari with no extensions)

Was looking at code

Clicked link: https://teradata.github.io/covalent/

Clicked Style Guide

Clicked Product Icons

Clicked Iconography

Clicked back on Browser

Header has overlapping text

Screenshots or link to CodePen/Plunker/JSfiddle

What is the expected behavior?

Text shouldn't overlap

What is the motivation / use case for changing the behavior?

Which version of Angular and Material, and which browser and OS does this issue affect?

Did this work in previous versions of Angular / Material?
Please also test with the latest stable and snapshot versions.

Other information

(e.g. detailed explanation, stacktraces, related issues, suggestions how to fix)

there was mention could be upstream angular + safari back button bug

Need of accordion

http://demo.sodhanalibrary.com/angular/material-ui/accordion/accordion1.html
Do we have a accordion in covalent?

Charts Components

D3.js v4 charts designed for Material Design

Create paging component

Feature Request

Create a paging component so it can be used in lists or data-table (abstract it from data-table).

Screenshots or link to CodePen/Plunker/JSfiddle

What is the expected behavior?

Use <td-paging-bar> to render a paging component.

What is the motivation / use case for changing the behavior?

Being able to add it anywhere where paging is needed.

Update to angular 2.0.0-rc.6 and material 2.0.0-alpha.8-1

This repository's issues are reserved for feature requests and bug reports.

Do you want to request a feature or report a bug?

Feature Request

Update covalent to angular 2.0.0-rc.5 and material 2.0.0-alpha.7 and modify code to use new ngModules.
Also, need to add new material components to docs.

What is the motivation / use case for changing the behavior?

• bootstrap will be deprecated in favor of ngModules.
• Material directives will soon be deprecated in favor of ngModules.
• Need for new material components (menu, tooltip, button-toggle).
• Use new forms API for ngModules.
• Breaking changes on testing setup.

Other information

https://github.com/angular/angular/blob/master/CHANGELOG.md#200-rc5-2016-08-09
https://github.com/angular/material2/releases/tag/2.0.0-alpha.7

Selected item is not added as a chip unless enter is pressed

This repository's issues are reserved for feature requests and bug reports.

Do you want to request a feature or report a bug?

feature

Feature Request

When an item is selected, autocomplete finishes the word but does not really add that entry as a chip unless user hit enter. It would be nice if the user does not have to press enter and just a mouse click would add it as a chip since it is not intuitive for the user to press enter.

What is the expected behavior?

The user does not have to press enter to add an item.

What is the motivation / use case for changing the behavior?

Not a good user experience.

Which version of Angular and Material, and which browser and OS does this issue affect?

Did this work in previous versions of Angular / Material? Not sure.
Please also test with the latest stable and snapshot versions.

covalent version - 0.7
Angular Material - alpha8-2

Other information

(e.g. detailed explanation, stacktraces, related issues, suggestions how to fix)

Ship Uncompiled SCSS

Along w/ the compiled CSS we need to ship the source SCSS for the platform and each component so apps can import them into their local SCSS

Ship all the uncompiled SCSS in:

• core/styles
• core/expansion-panel
• core/layout
• core/loading
• core/steps
• file-upload
• highlight
• markdown

Docs: Home page links show wrong mouse cursor

This repository's issues are reserved for feature requests and bug reports.

Do you want to request a feature or report a bug?

bug

Bug Report

On the docs home page, the four cards which link to pages show a text highlight cursor instead of a pointer. This makes it unclear that these cards can be clicked.

Screenshots or link to CodePen/Plunker/JSfiddle

What is the expected behavior?

Mouse should change to pointer cursor when hovering over cards that are links. It would also be nice if chrome understood it as a link too and showed the url at the bottom (similar to button links).

What is the motivation / use case for changing the behavior?

It is unclear that these are links until they are clicked on

Which version of Angular and Material, and which browser and OS does this issue affect?

Chrome

Did this work in previous versions of Angular / Material?
Please also test with the latest stable and snapshot versions.
N/A

Other information

(e.g. detailed explanation, stacktraces, related issues, suggestions how to fix)

module(http): interceptors in ngModule

Feature Request

Change the way we provide interceptors in http module to be inline with how ngModule works.

e.g.

CovalentHttpModule.forRoot(interceptors);

Design Pattern: dialogs, modals, toasts, errors

Dialog (Modal)

use when there’s a catastrophic error (like api error) that has a message that can be copied/pasted to give to support -OR- when you want a confirmation “Do you really want to delete this system? - Cancel/Delete"
also: when you use that confirmation, use the Verb “Discard” or “Delete” etc
so, a) Confirmation, bc) catastrophic error w/ details
spec: https://material.google.com/components/dialogs.html

or

Toast/Snackbar

if you just have a status update like “Source saved!” or “Updating…” or “User edited”, used a toast
use a toast/snackbar when the message is just an update or message that can pop in and out, that you’ll never need to copy/paste
used toasts in a non-pervasive top-right or bottom-right corner on desktop, or snackbar on top or bottom of mobile
spec: https://material.google.com/components/snackbars-toasts.html

Inline Errors (Forms/Fields)

Show error text only after user interaction with a field. If the user inputs incorrect data, helper text may transform into error text.
Error text should reflect your product’s color palette. It’s recommended that you use a contrasting color for error states, such as a warmer hue like red or orange.
Minimize form text to the essentials. Not every text field needs helper and/or error text.

spec: https://material.google.com/patterns/errors.html