Search code examples
angularnode-moduleselsa-workflows

Clean including of Elsa-Workflows-Studio into Angular-Application

I'm trying to include the Elsa-Workflows-Studio by using lower-level individual components like some editor- and viewer-screen into a bigger plugin-architectured Angular-Project. (angular 14/node 18) That's the package I'm using

I followed basically this example-application and instructions:

Now, I'm facing the problem of a clean including of the packages css-files for the whole project.

I tried to follow the example-application. With the copied assets and 2 stylesheet-includes into the apps index.html- file the designer looks and works fine. But the packages styles, especially its pseudo-classes, seem to overwrite a lot of styles in the whole project.

That also happens by including them into the stlyes-section of the apps project.json or the one of the consumed lib. I also tried to include the packages css-files directly into the affected component (or only some styles of it), but that didn't works anyway

Is there another way to include the package styles without affecting the others?

Solution

  • The problem was solved by:

    1. copy the css-files content to the components style content

    2. encapsulate them by using tag like this:

      elsa-studio-root {
    /* all the styles */
}

    3. set encapsulation to ViewEncapsulation.None in the component