Angular module has no exported member 'ButtonFillMode'

Question

I am getting error saying '"@progress/kendo-angular-buttons"' has no exported member 'ButtonFillMode'. while using kendo Editor toolbar module. I have install all the dependencies for EditorModule libraries. Even I am getting the same error. the link which I am referring to use editor toolbar in angular is https://www.telerik.com/kendo-angular-ui/components/editor/tools/

Belows are the error which I am getting while building my Angular project.

I am using Angular 12 with Kendo UI. Also I'm trying use kendo Editor Toolbar libraries.

please let me know if you have faced this kinds of error and if you have resolved it. Thank you in advance.

Answer 1

I don't think that the options are explicitly defined in Kendo's library. If you look at the underlying JavaScript (specifically kendo-angular-buttons/dist/cdn/main.js), the getStylingClasses method does the following:

t.getStylingClasses = function(e, n, i, o) {
  switch (n) {
    case "size":
      return {
        toRemove: "k-" + e + "-" + t.SIZES[i], toAdd: o ? "k-" + e + "-" + t.SIZES[o] : null
      };
    case "rounded":
      return {
        toRemove: "k-rounded-" + a[i], toAdd: o ? "k-rounded-" + a[o] : null
      };
    case "fillMode":
    case "shape":
      return {
        toRemove: "k-" + e + "-" + i, toAdd: o ? "k-" + e + "-" + o : null
      }
  }
}

Theoretically you can set the fillMode to a bad value (like foo), all it does is add the following classes:

.k-button-foo-base, .k-button-foo

I think your best option would be to simply define the values as an exportable enum:

export enum ButtonFillMode {
  Solid = 'solid',
  Flat = 'flat',
  Outline = 'outline',
  Clear = 'clear',
  Link = 'link',
}