Clarity: Combobox component (new)

[reddolan]

Description

• a Select component that allows for typing as well as scrolling through options
• similar to autocomplete or combobox

Use cases under consideration

• type into field and filter down to options matching query
• click something to show the options available
• scroll through list and select an option
• multi-select
• option grouping (or categories)
• accessible navigation, option selection and option deletion
• system status for slow responding option list
• highlight value matches in options

Documentation

Basic

Default view

• will look like a standard Select
• caret will be grey and have an circle around it to distinguish it from a standard Select
• the input field will show the standard input focus style (blue underline) while being interacted with

Active view

• clicking the caret will show the Options dropdown
• with the dropdown showing, the arrow keys can navigate up or down through options
• hitting Enter will select the option and display it in the input field
• show up to 10 options at a time
• if more than 10 options exist, user will be able to scroll down through them
• hover or highlight while scrolling will be the hover grey (#EEE)

Selections

• selected option will be the row selection blue (#D9E4EA)

Typing

• tabbing into the field will show the cursor in the input field
• options are displayed after 1 character has been typed
• query values are highlighted bold within each matching option
• pressing the down arrow key shows the dropdown
• user can tab to the caret and activate the dropdown
• tabbing out, clicking outside of, or hitting Escape will close the dropdown

Searching message

• if the options come back quickly (< 100ms), show the Options dropdown
• if the options load slowly (> 100ms), show the Searching dropdown
• Searching message will use the Select's label value

Multiselect

• includes all Basic interactions
• user can select more than one option by clicking on it or hitting Enter
• holding Shift and selecting two separate options will select all options in between them
• hitting Enter or clicking outside of the dropdown will make the option visible in the input field as a Label
• the Label will have an “X” in it for easy removal
• selecting the Label and deleting it will remove it from the selected options

• Labels will fill the space available in the inut field and over flow will wrap vertically

Option Groups

• options can be displayed on groups with a title

Custom Option Format

• option can be formatted in a custom way
• can be used to include additional useful data such as images or other data

References

• Select 2
• ComboBox, Kendo UI
• MultiSelect, Kendo UI
• Autocomplete Combobox, jQuery
• Drop-down Lists & Combo Boxes, Microsoft
• Combo Box, Microsoft
• Combobox, dfmcfee
• Autocomplete, Angular JS
• Redesigning the Country Selector, Smashing Magazine

[reddolan]

Original request - #90

[jaffoneh]

Closing as duplicate for now.

[youdz]

Regarding accessibility, please make sure to follow these:
https://www.w3.org/TR/wai-aria/#combobox
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role

[mattmutt]

Are configurations such as characters typed until query fired and maximum number of elements to be shown in a dropdown generally exposed or are they going to be constant? Sometimes the rule should be flexible: only after typing N characters should the options be calculated ( because 1 character is not useful against very large datasets)

Will this widget take a configuration object, or will be manually assigning attributes in markup on the component tag?

In the case the select widget in contained within a restricted container that clips, will there be an option to define what node the popup portion of the select list actually binds too? On this subject will the select list be intelligent to cope with common edge cases where visual placement of the select list below the trigger input box would result in truncation? The layout engine should appropriately cause the positioning of the select list to render above the trigger point.

[jaffoneh]

Are configurations such as characters typed until query fired and maximum number of elements to be shown in a dropdown generally exposed or are they going to be constant? Sometimes the rule should be flexible: only after typing N characters should the options be calculated ( because 1 character is not useful against very large datasets)

@reddolan can provide details but from our discussions, it should be configurable (for exactly the use case you mentioned).

Will this widget take a configuration object, or will be manually assigning attributes in markup on the component tag?

We haven't discussed the technical spec for it deeply but that's a good question. cc @youdz

In the case the select widget in contained within a restricted container that clips, will there be an option to define what node the popup portion of the select list actually binds too?

Could you provide more info here? I am not sure I fully understand the use case.

On this subject will the select list be intelligent to cope with common edge cases where visual placement of the select list below the trigger input box would result in truncation? The layout engine should appropriately cause the positioning of the select list to render above the trigger point.

In this one as well, @reddolan would be able to provide more details (and @youdz on the technical side once the spec is ready on that side) but that's a good question and my assumption is that it would either cope with common edge cases or provide alternative experiences there.

[youdz]

Will this widget take a configuration object, or will be manually assigning attributes in markup on the component tag?

As a general rule, Clarity components try to stay away from large configuration objects. So probably attributes in markup. There shouldn't be that many, though, I don't foresee a crazy amount of option that won't be solved by projecting custom content.

In the case the select widget in contained within a restricted container that clips, will there be an option to define what node the popup portion of the select list actually binds too? On this subject will the select list be intelligent to cope with common edge cases where visual placement of the select list below the trigger input box would result in truncation? The layout engine should appropriately cause the positioning of the select list to render above the trigger point.

On this one, @adityarb88 had the issues with dropdowns and tooltips a bunch of times already. I don't believe we have a good universal solution at the moment, we were still investigating last time I checked.

[vkpavan26]

We have the following usecases with Select box:
1.In few configurations inventory might not be synced with the latest information, user should be able to type in the Select box in such cases.
2.In another usecase all the eligible IPs to form a cluster are not available in that use user should be allowed to type in the IP.

In short we need a capability for the user to type in the Select box and would not require an autoComplete in such cases.

[ajinkyac]

We would also like to know if following things are possible:
1.) Fixed width to the select box
2.) In case of fixed widths, the options/selected text could be truncated with ellipsis in case of overflow.

[reddolan]

@vkpavan26 are you talking about when a user types in a value that doesn't exist in the available options?

[reddolan]

@ajinkyac thank you for sharing these use cases

1. this should be doable with CSS
2. It's a valid use case and one we need to look into how we will handle it: option values exceeding the dropdown area width

[c0desolut1ons]

Does anybody know release date for issue #248?
We need to move on with the development and if this problem will be solved in the near future we would like to use Clarity.
Our technology stack:

• Meteor
• Angular 2
• UI: Clarity / Covalent / Semantic ... depends on your answer :-)
  Thx.

[jaffoneh]

@c0desolut1ons do you have some more information on the application you're planning to build? We don't currently have a timeline for select 2.0 considering the other priorities we're looking at but I'd love to discuss the application you're building and how we can collaborate on delivering this if possible.

[c0desolut1ons]

@jaffoneh Practically we are planning to develop two applications:

1. Customer Service App (Meteor, now Angular 4 :-), Clarity UI)
2. Termin3 Appointment Scheduling web app for clients (we already have the Android app
   and now we go a step further) - https://goo.gl/GHnCQd
   Thx Jaff.

[youdz]

An external contributor is going to start working on a partial version of this component. I don’t want to call it an "MVP", because everyone considers different features to be absolutely necessary. Anyway, he’ll work on select with typing capabilities.

We would like this component to be usable as a simple select in the default case. It will look like this:

<clr-select [(ngModel)]="selected">
    <input type="text" clrSelectInput />

    <clr-option [clrValue]="first">{{first.name}}</clr-option>
    <clr-option [clrValue]="second">{{second.name}}</clr-option>
</clr-select>

The model will be the actual first or second objects, not just their names.

_We could potentially make the <input> optional, but let's have it explicitly for now._

In the example above, the options will be in the DOM at all times, just like a native select. But we recommend using the *clrIfOpen directive to only instantiate options when needed:

<clr-select [(ngModel)]="selected">
    <input type="text" clrSelectInput />

    <ng-container *clrIfOpen>
        <clr-option [clrValue]="first">{{first.name}}</clr-option>
        <clr-option [clrValue]="second">{{second.name}}</clr-option>
    </ng-container>
</clr-select>

Obviously, you will be able to generate options dynamically:

<clr-option *ngFor="let option of options" [clrValue]="option">{{option.name}}</clr-option>

Having the options simply declared in the HTML allows you to display anything you want for them, instead of just a string:

<clr-option *ngFor="let movie of movies" [clrValue]="movie">
    <img class="poster" [src]="movie.poster" />
    <span class="title">{{movie.title}}</span> - <span class="year">{{movie.year}}</span>
</clr-option>

Finally, you might not want to display the same DOM in the dropdown of the select and inside the input. Especially if your dropdown contains images or long descriptions. In this case, you'll be able to display a different label for the option when it is rendered in the input itself:

<clr-select>
    <input type="text" clrSelectInput />

    <ng-container *clrOptionSelected="let movie">{{movie.title}}</ng-container>

    <clr-option *ngFor="let movie of movies" [clrValue]="movie">
        <img class="poster" [src]="movie.poster" />
        <span class="title">{{movie.title}}</span> - <span class="year">{{movie.year}}</span>
    </clr-option>
</clr-select>

The point of this API is also to anticipate on the rest of the features presented, so that they can be added without breaking changes. For instance, a future advanced case might look like this:

<clr-select [(ngModel)]="selectedVideos" [clrMultiple]="true">
    <input type="text" clrSelectInput />

    <ng-container *clrOptionSelected="let video">
        {{video.title}}
        <ng-container *ngIf="video.tv">(TV)</ng-container>
    </ng-container>

    <ng-container *clrIfOpen>
        <clr-option-group>
            <clr-option-title>Movies</clr-option-title>
            <clr-option *ngFor="let movie of movies" [clrValue]="movie">
                <img class="poster" [src]="movie.poster" />
                <span class="title">{{movie.title}}</span> - <span class="year">{{movie.year}}</span>
            </clr-option>
        </clr-option-group>
        <clr-option-group>
            <clr-option-title>TV Shows</clr-option-title>
            <clr-option *ngFor="let show of shows" [clrValue]="show">
                <span class="title">{{show.title}}</span> ({{show.nbEpisodes}} episodes)
            </clr-option>
        </clr-option-group>
    </ng-container>
</clr-select>

[marvinosswald]

Hate to annoy everyone, but is here a release date foreseeable ?

[mathisscott]

@marvinosswald
Not annoying at all. Thanks for checking in!

We haven't heard from the aforementioned external contributor, so I'm not sure what's being done on that end.

On our end, this is in the top third of our current priorities but is currently not scheduled (meaning it isn't assigned to anyone on our team yet). Given the current priorities on our plate, I don't know if we would be able to start working on this for at least 3 weeks. Maybe longer if our priorities shift.

But it's in line to get worked on. Near the front at this point in time.

[reddolan]

Additional features from #980
- ability to add new options that aren't part of the option list, done while typing

• ability to have custom select option: could be used to add a new option or some other action/selection
• read-only
• validation design

[reddolan]

Additional feature request

• dividers: to create visual sections, header, or footer

[marvinosswald]

Additional feature request:

• Option Groups should be nestable

It is indeed a visual hierarchy and is meant to be not restricted to one level as it is with the <optgroup> Tag.

Which means we should be able to have more than one level depth in terms of grouping options, it might be limited visually by the selects width.

[reddolan]

@marvinosswald can you give us a little more detail on your request about nestable Option Groups? Are you talking about building a visual hierarchy? Do you have an example that you can point to?

[jmcmichael]

Any update on the status of this component? Could you maybe add it to the Component Status page?

[mathisscott]

@jmcmichael

We had an external contributor working on it who got pretty far with it. But then it appears he stopped working on it or maybe something else came up.

It is currently not one of our top three priorities. But we do plan to work on it in the future.

We're also working on a better way to communicate both our current priorities (and progress on those priorities) as well as our near-future priorities.

[marvinosswald]

@jmcmichael @mathisscott it‘s still in my todo just priorities in my project shifted a little bit which pushed this component a little bit back in our timeline

[jmcmichael]

I was just looking over Clarity's Sketch templates, and noticed the 'Search' component, as well as in the component Status page. Are we discussing the 'Search' component in this issue, or is this about a different component?

[mathisscott]

@jmcmichael
They’re related but different

[tarundhillon]

Wondering if work on this has been planned now ? Thanks

[mathisscott]

@tarundhillon
An external contributor has been working on this item. You can see the pull request here. Please subscribe to that to track status.

[geek-at-heart]

@mathisscott -- the linked PR was just closed. Any updates on whether we'll get this behavior pulled into Clarity?

[mathisscott]

@geek-at-heart
The PR still needed some work and had gotten stale over the 0.10 -> 0.11 shift. Someone on the Clarity team is going to take it over and start working on Search 2.0 when they are freed up. We're still figuring out when that will be. Hopefully not too long.

If you stay subscribed to this issue, you should see activity on it when it starts up.

[shravansofts]

Waiting for this component..

[franckstifler]

Add a auto active first option as in the case of autocomplete of material. Thanks. Waiting for this component to, it's crucial to our business logic.

[lgrigorova]

@ajinkyac
I would suggest as a workaround for the long values in options to use substring to truncate teh value if too long, add ellipsis and use this value in the option. You could add the full value as title of option and thus have tooltip.

Regards,

Ledda

[gerald-gonzales]

Hoping that this component would be available soon.

[reddolan]

@gerald-gonzales this is currently under development

[szechyjs]

Additional feature request...

• Display as a static list instead of a dropdown select box; similar to PrimeNG Listbox.

[gperdomor]

Any ETA of this feature?

[adityarb88]

@gperdomor: We plan to start working on implementing this soon. We are in the process of figuring out what features should the first version of Select 2.0 have. Will post more updates here when I have them!

[armpp]

I'm waiting
How long will it be?

[gperdomor]

@adityarb88 thanks for the response... I need this feature so I'm happy to see your first commit :D. I can't adopt clarity without this :(

[luis-cortina]

It would be great to also have a way to clear the single selection (setting the selected object to null) right from the select, much like ng-select. Like this image...

Thanks for the awesome work.

[shravansofts]

Does this feature will be available in 0.11.x or not?

[mathisscott]

@shravansofts
This new component will not be in 0.11.

[yuezhizizhang]

Any progress on this feature?

[Shijir]

@yuezhizizhang The implementation of this component has been started and ongoing.

[RNACode]

+1

[jayapalapm]

Any idea when will this feature available?

[mathisscott]

Hi @jayapalapm

Right now, we have moved Select 2 back into our prioritization queue. We will be discussing it in our next quarterly planning (probably in the next few weeks) and determine if it is something that we can pick up between August-February or if it something that will need to be pushed out past next February.

Voices from the community (including thumbsup and +1s) do factor into those discussions.

[jmcmichael]

+1

You may want to create a separate comment for voting as thumbs up/down on the above comment is ambiguous - 'down' could mean 'waaah why is this taking two years?!' or 'I don't need this feature'

As an emergency solution, perhaps it would make sense to temporarily lean on another ng select2 component, by skinning it to fit in w/ ClarityUI's theme. Honestly I now need to do this myself as I have put off as long as I can developing a field control for an app I'm working on, and am pulling a Tom Sawyer fence-painting trick to maybe get y'all to do it instead. ;) This is the best select component that I could find w/ a permissive license, so I'm going to start with it: https://github.com/ng-select/ng-select

[luis-cortina]

@jmcmichael If you're doing this in github or somewhere open, please send me the details, I need this asap and I would want to collaborate.

[mvcoding]

This is the only thing missing that prevents me from switching to Clarity, so i hope it won't be delayed to next year.

[mathisscott]

@luis-cortina
Thanks for the offer. @youdz would have more details on where this is at present.

[mathisscott]

@mvcoding
The Select2 component was in progress but is now on hold until we have someone free to pick it back up. That may not be until later this year. So it is possible that this component isn't finished until early next year sometime.

[luis-cortina]

@youdz what branch is this on now?

[youdz]

Right now the partial implementation is on the topic/select2 branch. The branch is quite a bit behind master so you don't want to try to build Clarity from it, but you can browse the select2 code on it.

Because we do not know how long this component is going to be waiting for final implementation, we are planning on merging the partial implementation into master just to keep up with the frequent refactors we go through. Here is the corresponding pull request. This does not mean the select2 component will be ready to use when merged. The implementation is still partial and the component will not work correctly at the moment.

[jwiesmann]

Hi all,

today i was playing around with the https://cuppalabs.github.io/angular2-multiselect-dropdown/#/limitbadges multi select box. You can add your own styles to it and so on.
I am far away from being good at css, but if you cannot wait and want to give it a try...
Here you can find my results from todays testing (a lot of !important, not really the nicest, but it is working quite ok so far and it looks nice in my opinion)

Here you can find a working stackblitz:
https://stackblitz.com/edit/clarity-light-theme-v11-d8su69?
https://clarity-light-theme-v11-d8su69.stackblitz.io/

like i said before, it is far away from perfect, but it could be a good solution if you have no time to wait :)
If anybody has some hints of how to make it even better, please let me know.

And thank you the @Clarity Team for such an outstanding job!

[Ketec]

+1

I have gotten almost everything done on clarity (with custom css and such naturally) - all except a grid context menu and now ran into this.

Unfortunately it seems it won't be around for a while so have to look for a third party option (not worth implementing from scratch time wise). Something like ng-select (less other bloat - just the select).

[speti43]

Hi All,

Is there any prognosis, when will this be available in any release?

[geek-at-heart]

We ended up having to go with ng-select, but are pretty happy with it.
https://github.com/ng-select/ng-select

[speti43]

@geek-at-heart looks good, a clarity skin would be perfect and then I could use it :)

[jacobbutton]

Will this have the ability to filter via a custom search function like ng-select does?

[gnomeontherun]

@jacobbutton I believe it should, though the design doesn't really denote that. There will have to be a way to do custom searching to support server driven lists.

[markofranjic]

Hi Team, do you have eta when select 2.0 will be released?

Regards

[jacobbutton]

According to the Work in Progress wiki, April, tentatively. I imagine that's subject to change.

[ygoron]

Really need this component... Any updates?

[mathisscott]

@ygoron
The Combobox (a.k.a. Select 2) is in progress. Up-to-date status is always available here.

[sheribyrne]

Accessible multi-select is tricky. There is some good advice on it at https://www.w3.org/TR/2017/WD-wai-aria-practices-1.1-20170628/examples/listbox/listbox.html

[Mennez]

Currently the combobox is not yet released. We made a custom sass file to make this working. This style sheet allows anyone to use ng-select in a angular+clarity project that uses clarity forms.

https://gist.github.com/Mennez/3f8a1fca40dfd6a3daac86d5cd12ea90

[bendem]

Is there any plan to support this before 2.0? If not, I would love to know what's the status of the 2.0 release. A percentage of some sort maybe? 👼

[gnomeontherun]

It is in active development and will be in a release as soon as it is ready. We have no delivery guarantees, so any questions about when it will land cannot be answered. You'll all know based on release notes when its available.

[yuezhizizhang]

Currently the combobox is not yet released. We made a custom sass file to make this working. This style sheet allows anyone to use ng-select in a angular+clarity project that uses clarity forms.

https://gist.github.com/Mennez/3f8a1fca40dfd6a3daac86d5cd12ea90

$dark-theme-highlight-color is not defined.

[d-m-s]

It is pretty clear to everyone in software development that release dates and feature scope are matter to change and not guaranteed at all!

Fair enough!

But a component that has been designed almost 3 years ago, partly implemented more that a year ago in branch, then multiple times rescheduled and not yet released, currently being overdue since 2 days - simply leaves some questions to the users of the design system you're building!

In general I think you guys are building a really great design system, in a perfect open-source manner!

But please, add some more project management and predictability for the users of your design system!!!

Just one picture to make it even clearer ....

• the release which is overdue by 2 days is 33% completed (67% unfinished!)
• the stuff that should be done some day is 20% complete, the gap is just 13% ...

[Mennez]

Currently the combobox is not yet released. We made a custom sass file to make this working. This style sheet allows anyone to use ng-select in a angular+clarity project that uses clarity forms.
https://gist.github.com/Mennez/3f8a1fca40dfd6a3daac86d5cd12ea90

$dark-theme-highlight-color is not defined.

Fixed. This was a local SASS color variable. Added the variable to the gist.

[TrifonovSergey]

There is any progress in this? 50% or 90% done maybe?
About 5 months component is in active development phase... maybe it's time to release it in parts? or change the developer? This is a common practice of IT project management, I don’t understand why they are not used on clarity project.
Also, I hope the project manager noticed that this is the most anticipated component at this moment.

[mathisscott]

@TrifonovSergey
The combobox has been impacted by two separate efforts.

1. The smart popovers. It made no sense to complete the combobox without smartly positioning its dropdown.
2. A company-wide focus on accessibility improvements across all products (even Clarity). All development for Clarity was put on pause for 2.5 months to focus on fixing critical accessibility issues and backporting them to 1.0. This effort needed to reach conclusion by September.

For what it's worth, our zenhub board is open to the public so you can see exactly what's in flight.

Also, fwiw, there is a test page for the combobox in its current state at http://localhost:4200/combobox/basic if you fork or clone our repo and run npm start in terminal. You can see it there. It's not ready for release and there's still some work we need to do with it. But, if I'm not mistaken, I believe the public-facing API is fairly stable.

The combobox should be back in development soon. Thanks for the interest. We would love nothing more than to get it released.

[TrifonovSergey]

@mathisscott thank you very much for the detailed answer! Now the situation with this task and focus of the project is clear for me.
We look forward to the release of this component, which, as I understand, will not be earlier than November.

[webplease]

I follow too, the Clarity autocomplete function is too important.

[EvanSevy]

I'm very interested in this feature as well. I'm strongly considering Clarity for my needs and am hoping this feature will be out within the next 1-3 months.

Are their any updates on a possible release time frame?

[gnomeontherun]

All I can say is it is in progress and we hope the timeline is soon. We've got a Datalist component that should land for v3, so that can also help for many use cases.

[Orichlol]

All I can say is it is in progress and we hope the timeline is soon. We've got a Datalist component that should land for v3, so that can also help for many use cases.

Oh wow, so we're not making v3 either?

3 Year Anniversary of this component!

[webia1]

Understanding question: Autocomplete is not ready yet?

[mathisscott]

@webia1
For a simple autocomplete form field, checkout the datalist component in 3.0

For more complex autocomplete fields, @Jinnie and @hippee-lee can provide an update

[Jinnie]

The combobox is under active development. There had been some accessibility related technical complications, but they are overall resolved now and we're back to the normal planned development process.

[jmls]

oooh, any idea if this will make it into v3 ? I need this _so_ badly ...

[HarperHampton]

ETA on this would be exceedingly helpful. We are preparing a new project and I would prefer to use Clarity over Angular Material. Can make adjustments to code around this if I know it's coming.

[mathisscott]

@HarperHampton and @jmls

There is a WIP branch in review right now. I don't think this will be in 3.0 but I believe we are planning to have it ready for 3.1 – which should land shortly after 3.0.

I think time-wise that puts this on the 4-6 weeks away timeframe. Maybe sooner. Maybe later. Depends...

[Jinnie]

@colinreedmiller We'd need a dark theme design spec for this component, thanks!

[colinreedmiller]

@jinnie - left a note in the Figma file - all dark theme colors specified there. also: changed the dismiss X to 5px - let me know if you have any thoughts, questions.

[d-m-s]

is the development of this component further pursued or will this be replaced by datalist?
https://clarity.design/documentation/datalist

[gnomeontherun]

@d-m-s The datalist is a lightweight HTML element that we could easily support. The combobox is still being built to work for more complex situations, so you'll have both options.

[hippee-lee]

@d-m-s combobox has an open pull request thats currently under review if you want to take a look at it while it gets polished: https://github.com/vmware/clarity/pull/4286

[shankar1318]

@hippee-lee @gnomeontherun when can we expect combobox release? I am waiting for the multi select functionality.

[hippee-lee]

Hi @shankar1318 - please follow the PR https://github.com/vmware/clarity/pull/4286. It is almost through the review process. Once that gets merged and is in master it will go into Clarity v4. We are testing with Angular 10.0.0-rc.0 this week to prepare for Angular v10 coming soon.

[adumesny]

good to see such a control coming out. Is there a plan for a Search widget that would be similar ? could maybe even restyle this one as I've been thinking of a search (type anything) + filter combo like this:

[gnomeontherun]

@adumesny We don't have any design or explorations for something like this, but I believe the combobox can provide you most of what you really need here. I don't really understand the mechanics or use case of this control at this moment.

[adumesny]

@gnomeontherun even if you ignore my custom design (search + filter) a simple search field with type ahead suggestions like this new comboBox (but with highlighting of the matching pattern) would be great. Every product seem to re-create their search...

[sisohs]

Hi @shankar1318 - please follow the PR #4286. It is almost through the review process. Once that gets merged and is in master it will go into Clarity v4. We are testing with Angular 10.0.0-rc.0 this week to prepare for Angular v10 coming soon.

@hippee-lee will this be available in the previous versions of Clarity?

[Jinnie]

The combobox is finally officially in our repo, waiting for the next release.
Please add all related problems, suggestions for improvements, direct contributions with code, design, documentation, etc, in separate issues or pull requests, so they can get focused attention and prioritization.
Thank you!

[mathi123]

@Jinnie Any idea when this will end up in the v4.next package? I have been eagerly waiting for this ;)

[gnomeontherun]

Its available in https://www.npmjs.com/package/@clr/angular/v/4.0.0-rc.0