topic Re: Issue with calcite-components-angular 2.0.0 in Calcite Design System Questions

Issue with calcite-components-angular 2.0.0

ForrestLin — Wed, 06 Dec 2023 15:09:01 GMT

Failed to compile with calcite-components-angular 2.0.0.

No problem to compile with calcite-components-angular 1.11.0.

Re: Issue with calcite-components-angular 2.0.0

KittyHurley — Thu, 07 Dec 2023 18:11:28 GMT

Hi @ForrestLin, wasn't able to reproduce the installation with the calcite-components-examples angular example. If you could create an isolated example to share where we could reproduce, you could file a bug issue for the team to investigate and prioritize for a future release.

Re: Issue with calcite-components-angular 2.0.0

ForrestLin — Thu, 07 Dec 2023 19:01:33 GMT

Is it possible for you to create a Esri case and for me to share screen with you?

Re: Issue with calcite-components-angular 2.0.0

KittyHurley — Thu, 07 Dec 2023 19:18:33 GMT

To file a support case, please visit Esri technical support.

Re: Issue with calcite-components-angular 2.0.0

ForrestLin — Thu, 07 Dec 2023 21:16:40 GMT

I'll go to Esri technical support to file a support case.

Thanks.

Re: Issue with calcite-components-angular 2.0.0

ShaneBuscher1 — Fri, 09 Feb 2024 14:52:25 GMT

I am having the same problem with esri/calcite-components-angular 2.4.0 and Angular 16. By chance did you resolve?

Re: Issue with calcite-components-angular 2.0.0

ForrestLin — Wed, 14 Feb 2024 12:04:10 GMT

No lucky for me.😂

Re: Issue with calcite-components-angular 2.0.0

MarkW — Fri, 16 Feb 2024 21:14:10 GMT

Hello Shane,

I was able to resolve this issue by adding "allowSyntheticDefaultImports": true to the tsconfig.json file for the app, and running 'npm i --save-dev @types/sortablejs'.

Hopefully this works for you.

Re: Issue with calcite-components-angular 2.0.0

ForrestLin — Wed, 21 Feb 2024 18:54:22 GMT

Hello Mark,

I have resolved this issue by adding "allowSyntheticDefaultImports": true to the tsconfig.json, and running 'npm i --save-dev @types/sortablejs'. But I'm not able to show the map.

Could you please provide an example with map?

This example doesn't have map:

https://github.com/Esri/calcite-components-examples/tree/main/angular

Thanks.

Re: Issue with calcite-components-angular 2.0.0

ForrestLin — Mon, 04 Mar 2024 22:54:59 GMT

I have fixed the issue of not showing map. The calcite-shell needs to set to be content-behind.

<calcite-shell content-behind>

<app-esri-map></app-esri-map>

</calcite-shell>

Re: Issue with calcite-components-angular 2.0.0

ShaneBuscher — Tue, 05 Mar 2024 13:54:45 GMT

This didn't work until I deleted node_modules and package-lock.json. Now I'm good to go.

Re: Issue with calcite-components-angular 2.0.0

ForrestLin — Tue, 05 Mar 2024 15:06:32 GMT

I did:

1. Add "allowSyntheticDefaultImports": true to the tsconfig.json, and run 'npm i --save-dev @types/sortablejs'.

<calcite-shell content-behind>

<app-esri-map></app-esri-map>

</calcite-shell>

Re: Issue with calcite-components-angular 2.0.0

MarkW — Tue, 05 Mar 2024 20:30:22 GMT

Sorry for the late response. Glad you were able to get it working!

Re: Issue with calcite-components-angular 2.0.0

ForrestLin — Wed, 06 Mar 2024 12:59:02 GMT

Hello Mark,

Thank you for your help. Is it possible not content-behind?

I'll go to Palm Springs for Esri DevSummit next week and would like to talk to you.

Regards,

Forrest

Re: Issue with calcite-components-angular 2.0.0

MarkW — Thu, 07 Mar 2024 23:39:14 GMT

Hello Forrest,

Unfortunately I will not be attending the Dev Summit, but many of my colleagues and developers for calcite will be there who will be happy to discuss with you.

I found another Community post regarding content-behind and possible workarounds.

https://community.esri.com/t5/calcite-design-system-questions/calcite-shell-needs-content-behind-to-use-display/m-p/1310584#M451

Hopefully this is helpful.

Thanks,

Mark

Re: Issue with calcite-components-angular 2.0.0

ForrestLin — Fri, 08 Mar 2024 14:13:38 GMT

Hello Mark,

Thank you for your help.

We want layout like this:

There are some issues, which I'd like to discuss with your colleagues and developers for calcite there.

1. Sub menu <calcite-menu-item slot="submenu-item"> doesn't work.

2. Action group <calcite-action-group> doesn't work.

3. Scroll bar of table doesn't work.

4. Pagination <calcite-pagination> can't place on the right (end)

5. Shell panel <calcite-shell-panel slot="footer" position="bottom" layout="horizontal" resizable> can't be resized.

6. If I set slot to "panel-bottom": <calcite-shell-panel slot="panel-bottom" position="bottom" layout="horizontal" resizable>, the bottom is above map:

Re: Issue with calcite-components-angular 2.0.0

ForrestLin — Fri, 08 Mar 2024 15:08:24 GMT

It is OK if the display mode is float. But it's not on the bottom.

<calcite-shell-panel slot="panel-bottom" position="bottom" layout="horizontal" display-mode="float" >

Re: Issue with calcite-components-angular 2.0.0

ForrestLin — Tue, 19 Mar 2024 20:03:08 GMT

This issue is resolved by adding:

<calcite-shell-panel slot="panel-top" />