Website examples common.scss mismatch

[kyesil]

Description

We like the Foblex Flow plugin and want it to improve:
In the examples specified on the website, the file name common.scss
but the usage in the code is specified as flow-common. also it is not clear where the ../../flow-common.scss file should be.
Also it is confusing that connection-types should be the same as component selector. For all examples ::ng-deep f-flow { is enough.
Here is the working example :
https://stackblitz.com/edit/stackblitz-starters-euaf2ouu?file=src%2Fpages%2Fflowpage%2Fflowpage.scss,src%2Fpages%2Fflowpage%2Fflowpage.component.ts

In previous issues I mentioned that it should be simpler to have common.scss built in @foblex/flow.
These complications can make a beginner give up. We didn't give up, we thought about how @foblex/flow could be better.
Also, Foblex Flow zoneless work is good
Thank you for your efforts.

Steps to Reproduce

In website select an example
https://flow.foblex.com/examples/connection-types

Expected Result

https://stackblitz.com/edit/stackblitz-starters-euaf2ouu?file=src%2Fpages%2Fflowpage%2Fflowpage.scss,src%2Fpages%2Fflowpage%2Fflowpage.component.ts

Actual Result

Environment Details

Node 22
Angular 19

Screenshots or Videos

No response

Additional Context

No response

[siarheihuzarevich]

Hello,

Thank you for your feedback and detailed observations. Let’s address the key points:

1. File name common.scss vs flow-common.scss:
In the examples on the website, the logical name common is used, but the actual file is flow-common.scss. This is done for display clarity. You have access to the full repository code, where you can see exactly how everything is set up. The name “common” is simply the tab label for demonstration purposes.

2. Using ::ng-deep and selectors:
• If you use ::ng-deep connection-types {}, it works because ::ng-deep allows styles to “pierce” Angular’s ViewEncapsulation and apply globally.
• However, you can also write styles globally without using ::ng-deep or selectors. It entirely depends on your preferences and understanding of how Angular styles work.

3. Complexity for beginners:
Foblex Flow provides powerful and flexible tools for creating diagrams but assumes that users have a basic understanding of Angular and CSS. If styling presents challenges, it might be helpful to explore Angular fundamentals, such as ViewEncapsulation and managing global styles, a bit further.

Thank you again for your suggestions and observations. I’m always happy to see engaged users striving to improve their workflow. The documentation already contains all the necessary examples and explanations, but if you need further clarification, you can always refer to it or explore the repository code.

[kyesil]

• However, you can also write styles globally without using ::ng-deep or selectors. It entirely depends on your preferences and understanding of how Angular styles work.

Beginner developers may not know @use and ::ng-deep keywords. Personally, at first look I thought @use was correct and it didn't give any error. I thought it should be enough to use <f-connection fType=“bezier”/> if I want to change the type of a connection. The need for extra css is unusual.
Most developers simply try it and when it doesn't work, they switch to another library or write in react.
Also, single file components for examples on the website may be more understandable.
Thanks for your effort.

[siarheihuzarevich]

Thanks for the recommendation