input-categories

Example

<cr-component id="component" name="input-categories" loading></cr-component>
<script>
  const component = document.getElementById("#component");
  component.init({
    families: [
      {
        id: "200",
        name: "Renta fija",
        groups: [
          {
            id: "test_group",
            name: "Test group",
            categoryIds: ["COMMODITY", "BOND_REAL_ESTATE"],
            state: "default",
            color: "#ff00ff",
          },
        ],
      },
      {
        id: "200",
        name: "Renta variable",
        groups: [
          {
            id: "test_group",
            name: "Test group 2",
            categoryIds: ["COMMODITY", "BOND_REAL_ESTATE"],
            state: "default",
            color: "#00ff00",
          },
        ],
      },
    ],
  });
  component.onCreated(() => {
    console.log("Input Categories is created");
  });
  component.addEventListener("change", () => {
    console.log(component.getNoDefaultCategories());
  });
</script>

Schema

{
 "type": "object",
 "properties": {
  "categories": {
   "type": "array",
   "items": {
    "type": "object",
    "required": [
     "categoryId"
    ],
    "properties": {
     "categoryId": {
      "type": "string"
     },
     "state": {
      "enum": [
       "default",
       "favourite",
       "disabled"
      ],
      "default": "default"
     }
    }
   }
  },
  "families": {
   "type": "array",
   "items": {
    "type": "object",
    "required": [
     "name",
     "groups"
    ],
    "properties": {
     "id": {
      "type": "string"
     },
     "name": {
      "type": "string"
     },
     "groups": {
      "type": "array",
      "minItems": 1,
      "items": {
       "type": "object",
       "required": [
        "name",
        "categoryIds"
       ],
       "properties": {
        "id": {
         "type": "string"
        },
        "name": {
         "type": "string"
        },
        "categoryIds": {
         "type": "array",
         "items": {
          "type": "string"
         }
        },
        "state": {
         "enum": [
          "default",
          "favourite",
          "disabled"
         ],
         "default": "default"
        },
        "color": {
         "type": "string"
        }
       }
      }
     }
    }
   }
  },
  "palette": {
   "type": "array",
   "items": {
    "type": "string"
   }
  }
 },
 "additionalProperties": true,
 "dependentSchemas": {
  "families": {
   "prohibited": [
    "categories",
    "palette"
   ]
  },
  "categories": {
   "prohibited": [
    "families"
   ]
  }
 }
}

Complete Schema

{}

CSS Variables

--color-point-disabled: var(--color-grey-4);
--color-disabled: var(--color-grey-3);
--color-icon-default: var(--color-grey-5);
--color-icon-favourite: var(--color-green-6);
--color-icon-disabled: var(--color-red-6);
--color-icon-hover-favourite: var(--color-green-6);
--color-icon-hover-disabled: var(--color-red-6);
--color-icon-hover-background: var(--color-grey-2);

Locales

{
 "buttons": {
  "promote": "Promote",
  "exclude": "Exclude"
 }
}