how to use angular material instead of LyTheme ?

[saleh313k]

Hi and thanks for your awesome project, We have an Material Angular application which is use Material Theme for UI and we need to use image-cropping component from Alyle-UI .
We need to use it without any dependencies. How can we use this component without it's theme?

this.theme is an instance of LyTheme2 , and it imports STYLES to use css classes:
readonly classes = this.theme.addStyleSheet(STYLES);

and here is the STYLES constant:

const STYLES = (theme: ThemeVariables & LyImageCropperVariables, ref: ThemeRef) => {
  const cropper = ref.selectorsOf(STYLES);
  return {
    $name: LyImageCropper.и,
    $priority: STYLE_PRIORITY,
    root: ( ) => lyl `{
      -webkit-user-select: none
      -moz-user-select: none
      -ms-user-select: none
      user-select: none
      display: flex
      overflow: hidden
      position: relative
      justify-content: center
      align-items: center
      {
        ...${
          (theme.cropper
            && theme.cropper.root
            && (theme.cropper.root instanceof StyleCollection
              ? theme.cropper.root.setTransformer(fn => fn(cropper))
              : theme.cropper.root(cropper))
          )
        }
      }
    }`,
    imgContainer: lyl `{
      cursor: move
      position: absolute
      top: 0
      left: 0
      & > canvas {
        pointer-events: none
      }
    }`,
    area: lyl `{
      pointer-events: none
      box-shadow: 0 0 0 20000px rgba(0, 0, 0, 0.4)
      ...${LY_COMMON_STYLES.fill}
      margin: auto
      &:before, &:after {
        ...${LY_COMMON_STYLES.fill}
        content: ''
      }
      &:before {
        width: 0
        height: 0
        margin: auto
        border-radius: 50%
        background: #fff
        border: solid 2px rgb(255, 255, 255)
      }
      &:after {
        border: solid 2px rgb(255, 255, 255)
      }
    }`,
    defaultContent: lyl `{
      display: flex
      align-items: center
      justify-content: center
      &, & > input {
        ...${LY_COMMON_STYLES.fill}
      }
      & *:not(input) {
        pointer-events: none
      }
      & > input {
        background: transparent
        opacity: 0
        width: 100%
        height: 100%
      }
    }`
  };
};`

Thank you for your support

[Enlcxx]

Hi, this component requires LyTheme2 to render the styles in the DOM (like those styles you just mentioned). What I could do is load an empty theme, since if only the cropper is going to be used.
e.g.

// Use this instead of MinimaLight,
// with this you won't have to load all the themes for the components
export class EmptyTheme {
  name = 'empty-theme';
  direction = Dir.ltr;
}

Stackblitz demo.

This will only work with the nightly version, use yarn add @alyle/ui@nightly.

By the way, there is already support to load the themes with lazy-loading, only with the nightly version.