CdsModule

[mcosta74]

Hi,

looking to the code in the Demo app I see the usage of CdsModule.

Unfortunately I can't find any documentation about.

What is the right workflow to write an Angular app using Clarity Core ??

[gnomeontherun]

This will be released after the holidays but basically it is used to inform the Angular compiler about the web components so you won't have to use the CUSTOM_ELEMENTS_SCHEMA (and lose intellisense in your editors). Documentation will be ready by v5 for how to use it, but its not yet released.

[mcosta74]

Is there something in the doc if I build locally from branch "next"? Massimo Costa Il lun 21 dic 2020, 20:38 Jeremy Wilken <notifications@github.com> ha scritto:

…

This will be released after the holidays but basically it is used to inform the Angular compiler about the web components so you won't have to use the CUSTOM_ELEMENTS_SCHEMA (and lose intellisense in your editors). Documentation will be ready by v5 for how to use it, but its not yet released. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#5404 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA4I7OPN4ZNMVZOQ5XS2MATSV6P2XANCNFSM4VDJE3LQ> .

[mathisscott]

@mcosta74

Yeah. If you have the next branch, you can run yarn run build:libs. This should build all the libraries. You will be able to find the package for the Angular wrappers in dist/angular.

The code for the Angular wrappers live in packages/angular/projects/cds-angular.

[mcosta74]

@mathisscott thanks,

So if I understood correctly the workflow should be:

• import the CdsModule (ew don't need anymore to use custom schema)
• use the tags (do we still need to register them in the component they are used?)

Correct ?

[gnomeontherun]

That is correct, it will take care of the setup for you, so you'll just use the Core components like Angular components.

[boeckMt]

I also have a few question about how to use the new @cds/core elements with angular.

I'm currently trying to create a Stackblitz app from your demo core-angular-cli. My use case is an application that, whenever possible, should use elements from @cds/core as well as components from @clr/angular that are not included in the core e.g. like the datagrid or vertical nav

• how I understood, the imports to register the elements are not needed anymore, this is done by CdsModule?

  That is correct, it will take care of the setup for you, so you'll just use the Core components like Angular components. @gnomeontherun

  At least I don't see any difference.

• how to use cds-icon in stackblitz? There is a error Unexpected token 'export' when using ClarityIcons.addIcons(cloudIcon);
  I don't came across this in a normal angular-cli app, so maybe it has something to do with stackblitz module resolution.

• will @cds/core provide a App Layout, or should we import @clr/ui for this?
  When using @clr/ui do we then also need to install @webcomponents/custom-elements and @clr/icons?

[gnomeontherun]

1. About imports, you are correct, we didn't remove the imports from the demo app but we should.
2. Stackblitz has been funky for us lately, do you have a copy to review? It does work, but I'm not sure what the error here is without a reproduction.
3. We are working on the navigation components, which will eventually provide similar app layout functionality for responsive nav. Using the Layout Tokens, you can create various types of app layouts already. See https://clarity.design/storybook/core/?path=/story/layout-patterns--page for some sample patterns. You could use @clr/ui for anything you want, but I suggest trying to use Core when possible. You only need to worry about the polyfills if you are targeting older browsers like IE11, but modern browsers should no longer require it. That said, you'll have to review your policy.

[boeckMt]

@gnomeontherun thanks for the answer!

• About 2.
  Sure here is the link for the Stackblitz app https://stackblitz.com/edit/clarity-v5-core-dark-theme?file=src%2Fapp%2Fapp.component.ts
  I made a few tests and it looks like the import of @cds/core/icon is causing the problem. Other imports like @cds/core/tag are working.

// import { cloudIcon, coreCollectionIcons, ClarityIcons } from "@cds/core/icon";
// import CDSICON from "@cds/core/icon";
import * as CDSICON from "@cds/core/icon";
import * as CDSTEST from "@cds/core/tag";

...
  constructor(private formBuilder: FormBuilder) {
    console.log(CDSTEST);
    //  uncomment the following line to get the error!!!
    // console.log(CDSICON);
     
    //  uncomment the following line to get the error!!!
    // ClarityIcons.addIcons(cloudIcon);
    // coreCollectionIcons.forEach(i => ClarityIcons.addIcons(i));

...

• About 3.

  We are working on the navigation components, which will eventually provide similar app layout functionality for responsive nav.

  This sounds great!!

  And the layout and patterns are also a good place to start (It would also be nice to get the css code when clicking on show code).
  I only came across a few sections of the storybook... Maybe it would be good to show a more prominent link to the storybook in the documentation or will it replace the documentation at https://clarity.design/ later on?

[mathisscott]

And the layout and patterns are also a good place to start (It would also be nice to get the css code when clicking on show code).

For the layout and patterns, there is no CSS. The only CSS code applicable to those demos are background colors to show the different areas.

You only need to have the core global.min.css file loaded and then use the cds-layout attribute as in the examples.

[gnomeontherun]

We are working on getting the Storybook content all into the main website, soon.

You don't do import * as CDSICON from "cds/core/icon"; but rather like the first line you have commented out. Stackblitz has been unhappy with something recently and debugging has been hard, but if you download and run this project locally you can see it working. https://stackblitz.com/edit/angular-ivy-eugqcu?file=src%2Fapp%2Fapp.component.ts

[boeckMt]

@gnomeontherun I created two new Stackblitz apps to only test the "@cds/core/icon" package.

1. https://stackblitz.com/edit/angular-ivy-cds-icon-test?file=src/app/app.component.ts
2. https://stackblitz.com/edit/angular-ivy-cds-icon-test-all-import?file=src/app/app.component.ts

I recognize the problem only, exists if imports are to the main package index e.g.

• import { userIcon } from "@cds/core/icon";
• import { ClarityIcons } from "@cds/core/icon";

but it all works fine importing like below

• import { userIcon } from "@cds/core/icon/shapes/user";
• import { ClarityIcons } from "@cds/core/icon/icon.service";

see 1.

so it looks like something with the main exports are not working correct. I also found the following Issue stackblitz/core#171

---

In the second Stackblitz app I tried to use all imports separately, but couldn't see any error then. Maybe you can use this for further tests.

Should I create an Issue for this os is the discussion enough?