default prop types are not properly passed in angular component

[themistoklis-bogiatzoglou]

I am interested in helping provide a fix!

Yes

Which generators are impacted?

• All
• Angular
• HTML
• Preact
• Qwik
• React
• React-Native
• Solid
• Stencil
• Svelte
• Vue
• Web components

Reproduction case

https://mitosis.builder.io/playground/

Expected Behaviour

it should be:

const defaultProps: IconProps = { size: "s" };

icon.lite.tsx

useMetadata({
  importCSS: "./icon.css",
  isAttachedToShadowDom: true,
  angular: { selector: "ui-icon" },
});

useDefaultProps<IconProps>({
  size: "s",
});

export default function Icon(props: IconProps) {
  return (
    <span
      class={cls("mt-icon", "icon-" + props.name, {
        "mt-icon--size-s": props.size === "s",
        "mt-icon--size-m": props.size === "m",
        "mt-icon--size-l": props.size === "l",
      })}
    ></span>
  );
}

Actual Behaviour

Additional Information

In angular output there is an issue in default props types that are not bind correctly that results to types issue on props

mitosis.config.cjs

const injectCssPlugin = require("./plugins/inject-css.cjs");
const copyAssetsPlugin = require("./plugins/copy-assets.cjs");

const getTargetPath = ({ target }) => {
  return `../packages/${target}`;
};

const getTargetAssetsPath = ({ target }) => {
  return getTargetPath({ target }) + "/assets";
};

/**
 * @type {import('@builder.io/mitosis').MitosisConfig}
 */
module.exports = {
  files: "src/**",
  exclude: ["src/assets"],
  targets: ["react", "angular", "vue"],
  dest: "../packages",
  getTargetPath,
  commonOptions: {
    typescript: true,
    plugins: [injectCssPlugin("src/components")],
  },
  options: {
    react: {
      stylesType: "style-tag",
      plugins: [
        copyAssetsPlugin({
          source: "./src/assets",
          destination: getTargetAssetsPath({ target: "react" }),
        }),
      ],
    },
    angular: {
      standalone: true,
      preserveImports: true,
      plugins: [
        copyAssetsPlugin({
          source: "./src/assets",
          destination: getTargetAssetsPath({ target: "angular" }),
        }),
      ],
    },
    vue: {
      api: "composition",
      plugins: [
        copyAssetsPlugin({
          source: "./src/assets",
          destination: getTargetAssetsPath({ target: "vue" }),
        }),
      ],
    },
  },
};