• You will work with a datastructure called ContentGraph. The ContentGraph is the core data structure at radiosphere.
• The ContentGraph can contain multiple elements. Each element can bring some attributes and has a style object.
• The style object defines certain style properties for an element like size, background, padding, margin, corners,...
• The repository contains a sample ContenGraph object that you can find here
• The sample ContentGraph object is fetched via the ContentGraphApi that you can find here
• If the user saves the ContentGraph it is stored in localstorage. The next time the ContentGraphApi retrieves the ContentGraphfrom localstorage instead of fetching the sample json
• The contentGraph is an immutable object. In order to update it you can use produce from Immer.

This is how a sample ContentGraph object can look like

{
  "type": "event",
  "classId": "some-id",
  "owner": "urn:post:some-id",
  "attributes": {
    "main": {
      "elements": [
        {
          "elementId": "1",
          "componentType": "box",
          "displayName": "Box Element 1",
          "style": {
            "corners": [0, 10, 20, 30] // 0: TopLeft, 1: TopRight, 2: BottomRight, 3: BottomLeft
          }
        },
        {
          "elementId": "2",
          "componentType": "box",
          "displayName": "Box Element 2",
          "style": {
            "corners": [10, 10, 10, 10] // 0: TopLeft, 1: TopRight, 2: BottomRight, 3: BottomLeft
          }
        },
        ...
      ]
    }
  }
}

• Your task is to implement a component that lets the user set the border radius (corners) of a content graph element
• The element supports many more styles but for this challenge we focus on the corners setup
• The corners attribute is an array with four values
  • index 0 = Top Left Border Radius
  • index 1 = Top Right Border Radius
  • index 2 = Bottom Right Border Radius
  • index 3 = Bottom Left Border Radius
• The user should also be able to set each corner value individually
• User is also able to style all corners at once using the link button

You can also view the specs as PDF

• Fork this repository
• npm install
• npm start
• localhost:4200
• The starting point is in start-page.component.html
• You can use the unit-input as input field
• You can use icons from the icon library Ant Design Icons

• This repository should give you an impression about our tech stack and coding style
• To give you a first impression of our codebase it resembles the project setup that you would be working on
• This is just a tiny fraction of our actual project (also the rs-uikit is just a partial)
• We would like to see how well you can handle working on an existing project and how you would implement the given challenge
• Also, we would like to see how you deal with already defined design specs
• We would like to see the usage of Angular Signals

• We are using the latest version of Angular. We are currently migrating to Angular Signals
• We use Immer to update immutable objects
• We have a monorepo and use NX for that
• We have our own design library called Rs-Uikit that is build on top of the Ant Design Library. You find a very partial of it here

• Angular Signals
• Immer
• Ant Design Library for Angular Apps
• Ant Design Icons
• NX Getting Started
• Akita State Management

This is how the result could look like