a-l-y-l-e / alyle-ui Goto Github PK

Minimal Design, a set of components for Angular 16+

License: MIT License

TypeScript 36.76% JavaScript 0.21% HTML 62.90% Shell 0.14%

angular material-design angular-components material-ui material theme-support typescript angular7 ui css-in-ts ui-components

alyle-ui's Introduction

Alyle UI

Minimal Design, a set of components for Angular.

Docs

Install Alyle UI

Installation

Components

Feature	State	Responsive	Docs
avatar	✔️	✔️	Docs
badge	✔️	✔️	Docs
button	✔️	✔️	Docs
card	✔️	✔️	Docs
carousel	✔️	✔️	Docs
checkbox	✔️	✔️	Docs
dialog	✔️	✔️	Docs
divider	✔️	✔️	Docs
drawer	✔️	✔️	Docs
expansion	✔️	✔️	Docs
field	✔️	✔️	Docs
grid	✔️	✔️	Docs
icon	✔️	✔️	Docs
img cropper	✔️	✔️	Docs
list	✔️	✔️	Docs
media	✔️	✔️	Docs
menu	✔️	✔️	Docs
radio	✔️	✔️	Docs
select	✔️	✔️	Docs
snack bar	✔️	✔️	Docs
skeleton screen	✔️	✔️	Docs
slider	✔️	✔️	Docs
tabs	✔️	✔️	Docs
toolbar	✔️	✔️	Docs
tooltip	✔️	✔️	Docs
typography	✔️	✔️	Docs

Questions?

If you have any questions, ideas or you want to discuss with Alyle UI community, join the chat at Discord

Did you find an bug?

Please create a report to help us improve, you can do in Github or Discord.

alyle-ui's People

Contributors

Stargazers

Watchers

Forkers

alyleui enlcxx xquick blmsl felipealbuquerq gitter-badger r31m4g1n3d jb068c kal93 lintonblack haovc chaabenmohamed misael-developer supitchayapat salvadorcoronel uzbekdev1 erwinant j2ol mukeshscj vasimhayat brunexx alexiuszlo yv53 anndyd kepelrs floxcristian tumbad angelfraga hikencity tadjb ejmvar souhail-chougrani guzmanoj eduardoquelhas regoelvis kanta-mir caliag idevellopers noside45 raygozajc powarox afatafa

alyle-ui's Issues

Ly-select not working

🪲 Bug report

Describe the bug

I'm trying to use the ly-select but it is giving me an error.
I just copied the example from docs but when clickng to select an option it gives an error.

Exception or Error

Error: No component factory found for LyOverlayBackdrop. Did you add it to @NgModule.entryComponents?

Screenshots

Which versions of Angular, Alyle UI, OS, TypeScript, browsers are affected?

Alyle UI Version:
2.7.6

Angular Version:

7.2.0

Angular CLI: 7.3.9
Node: 10.15.3
OS: linux x64
Angular: 7.2.15
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.9
@angular-devkit/build-angular     0.13.9
@angular-devkit/build-optimizer   0.13.9
@angular-devkit/build-webpack     0.13.9
@angular-devkit/core              7.3.9
@angular-devkit/schematics        7.3.9
@angular/cli                      7.3.9
@ngtools/webpack                  7.3.9
@schematics/angular               7.3.9
@schematics/update                0.13.9
rxjs                              6.3.3
typescript                        3.2.4
webpack                           4.29.0

I can only grab the left side of the image

🪲 Bug report

Describe the bug

I can only grab the left side of the image.

Minimal Reproduction

https://alyle.io/components/image-cropper

Exception or Error

none.

Screenshots

Which versions of Angular, Alyle UI, OS, TypeScript, browsers are affected?

Alyle UI Version:
v3.2.7

Angular Version:



Angular CLI: 9.1.1
Node: 10.15.0
OS: linux x64

Angular: 9.1.1
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.901.1
@angular-devkit/build-angular      0.901.7
@angular-devkit/build-optimizer    0.901.7
@angular-devkit/build-webpack      0.901.7
@angular-devkit/core               9.1.1
@angular-devkit/schematics         9.1.1
@angular/cdk                       9.2.1
@angular/flex-layout               9.0.0-beta.29
@angular/material                  9.2.1
@angular/material-moment-adapter   9.2.1
@ngtools/webpack                   9.1.7
@schematics/angular                9.1.1
@schematics/update                 0.901.1
rxjs                               6.5.4
typescript                         3.8.3
webpack                            4.42.0

Support for Circular image cropping

🚀 Feature request

There should be an option for us to provide the css for the cropper box. We have height, width already. can we have border-radius too?

feat(tabs): add option for dynamic height

Bug, feature request, or proposal:

feat: dynamic height based on the contents of the tab

What is the expected behavior?

What is the current behavior?

What are the steps to reproduce?

Provide a reproduction in StackBlitz

StackBlitz starter: https://stackblitz.com/edit/angular-alyle-ui-starter

Which versions of Angular, AlyleUI, OS, TypeScript, browsers are affected?

Version of @alyle/ui@:

$ node_modules/.bin/ng --version
Angular CLI: ...
Node: ...
OS: ...
Angular: ...
...
...
...

Select dropdown bug, adding icon in select box option

🪲 Bug report

Describe the bug

in select dropdown with icon option, after selecting value from dropdown, icon name also display in select box.

<h4 lyTyp="title">native html select</h4>
<ly-field>
  <ly-label>Label</ly-label>
  <select lyNativeControl multiple>
    <option value="1"><ly-icon>change_history</ly-icon> item 1</option>
    <option value="2"><ly-icon>change_history</ly-icon> item 2</option>
    <option value="3"><ly-icon>change_history</ly-icon> item 3</option>
  </select>
</ly-field>

expected output:

only dropdown values should display in select box.

Image moving out of range when cropper frame aspect ratio not a square

Screenshots

Alyle UI Version:
v1.9.8

Angular Version:
7.1.3

Add DataTable component with support for pagination, sorting, filtering and inline crud

🚀 Feature request

Description

Alyle is awesome and support a large number of use cases. However a datatable component will make it shine for enterprise usage. Most enterprise application require datatable for most use-cases.

Describe the solution you'd like

The table component should support following features

Pagination
Sorting
Filtering
Inline CRUD where user is able to edit a row inline

Describe alternatives you've considered

Many other design systems e.g. Angular Material have such components

min scale not updated after rotating image

Screenshots

The bug about ly-Icon i've reported before

🪲 Bug report

Hi,
as i mentioned before ly-Icon destroys everything in target page , i could enable debug in the running page and realized that it needs to import HttpClientModule in the module contained module.
[email protected]

Describe the bug

A clear and concise description of what the bug is.

Minimal Reproduction

Steps to reproduce the behavior:

Exception or Error

Screenshots

Which versions of Angular, Alyle UI, OS, TypeScript, browsers are affected?

Alyle UI Version:
vx.x.x

Angular Version:

delete default global styles

🚀 Feature request

Description

Hi, thx you for your awesome project, but I have a small issue with the default global styles.

Describe the solution you'd like

I don't need this global styles in my project

Can you pls tell me, how I can delete or configure these?

Best regards.

help : Ly-Icon cuse destroy everything

🪲 Bug report

Describe the bug

when i add ly-icon to code all other components collapse and i just see a small button
i copy the various sample codes from your site but it does not work.other components is working.
Angular show this behavior when there is an undeclared import in app.module so i think the problem is a module i have to install or import!

Minimal Reproduction

Steps to reproduce the behavior:

Exception or Error

Screenshots

before using an Icon :

after using an Icon :

Which versions of Angular, Alyle UI, OS, TypeScript, browsers are affected?

Alyle UI Version:
new version
Angular Version:




Angular CLI: 8.1.2
Node: 11.14.0
OS: win32 x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.801.2
@angular-devkit/core         8.1.2
@angular-devkit/schematics   8.1.2
@schematics/angular          8.1.2
@schematics/update           0.801.2
rxjs                         6.4.0

fix(cropping): fit to screen does not work in small images

Enlcxx/angular2-resizing-cropping-image#16

Suggestion: Contribution guidelines

🚀 Feature request

Is this project open for contributions (especially for new features)? If so, I'd suggest you provide us with the contributions guidelines.

Thank you!

How to delete Default global styles.

🪲 Bug report

Describe the bug

How we can delete global styles or move them to component level, cause these are conflicting with other component's, where i doesn't used any control from alyui.

Screenshots

Which versions of Angular, Alyle UI, OS, TypeScript, browsers are affected?

Alyle UI Version:
3.4.0

Angular Version:
10

Image cropper doesn't save correct rotation when cropped

🪲 Bug report

Describe the bug

When using image cropper, rotating the image -90 degrees more than once saves as just -90 in the rotation when cropped.

Minimal Reproduction

Implement Image Cropper code
Rotate image twice
Crop
View ImgCropperEvent in onCropped event
Shows as -90 / 90 even when rotated multiple times

Which versions of Angular, Alyle UI, OS, TypeScript, browsers are affected?

Alyle UI Version:
10.3.0

Angular Version:
9.1.0

Version 10 of node.js has been released

Version 10 of Node.js (code name Dubnium) has been released! 🎊

To see what happens to your code in Node.js 10, Greenkeeper has created a branch with the following changes:

Added the new Node.js version to your .travis.yml

If you’re interested in upgrading this repo to Node.js 10, you can open a PR with these changes. Please note that this issue is just intended as a friendly reminder and the PR as a possible starting point for getting your code running on Node.js 10.

More information on this issue

Greenkeeper has checked the engines key in any package.json file, the .nvmrc file, and the .travis.yml file, if present.

engines was only updated if it defined a single version, not a range.
.nvmrc was updated to Node.js 10
.travis.yml was only changed if there was a root-level node_js that didn’t already include Node.js 10, such as node or lts/*. In this case, the new version was appended to the list. We didn’t touch job or matrix configurations because these tend to be quite specific and complex, and it’s difficult to infer what the intentions were.

For many simpler .travis.yml configurations, this PR should suffice as-is, but depending on what you’re doing it may require additional work or may not be applicable at all. We’re also aware that you may have good reasons to not update to Node.js 10, which is why this was sent as an issue and not a pull request. Feel free to delete it without comment, I’m a humble robot and won’t feel rejected 🤖

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

image cropping is always png

🪲 Bug report

Describe the bug

the image cropper is always return a png image on crop and not giving me the original image type

Screenshots

Which versions of Angular, Alyle UI, OS, TypeScript, browsers are affected?

Alyle UI Version:
v2.9.6

Angular Version:



Angular CLI: 8.3.19
Node: 10.16.3
OS: linux x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.19
@angular-devkit/build-angular     0.803.19
@angular-devkit/build-optimizer   0.803.19
@angular-devkit/build-webpack     0.803.19
@angular-devkit/core              8.3.19
@angular-devkit/schematics        8.3.19
@angular/cdk                      8.2.3
@angular/cli                      8.3.19
@angular/flex-layout              8.0.0-beta.27
@angular/http                     7.2.15
@angular/material                 8.2.3
@angular/pwa                      0.803.19
@ngtools/webpack                  8.3.19
@schematics/angular               8.3.19
@schematics/update                0.803.19
rxjs                              6.5.3
typescript                        3.4.5
webpack                           4.39.2

feat(date-picker): Basic Date picker

Bug, feature request, or proposal:

Feat Date Picker

Simple Date & Time picker

<ly-dp>
 <input type="text" lyDp name="date">
</ly-dp>

What is the expected behavior?

What is the current behavior?

What are the steps to reproduce?

Provide a reproduction in StackBlitz

StackBlitz starter: https://stackblitz.com/edit/angular-alyle-ui-starter

Which versions of Angular, AlyleUI, OS, TypeScript, browsers are affected?

Version of @alyle/ui@:

$ node_modules/.bin/ng --version
Angular CLI: ...
Node: ...
OS: ...
Angular: ...
...
...
...

Slider and Drag functionality not working for Angular 9

🪲 Bug report

Describe the bug

Slider and Drag not working for Angular 9 , does this support Angular 9?

Which versions of Angular, Alyle UI, OS, TypeScript, browsers are affected?

Alyle UI Version:
3.1.1

Angular Version:



Angular CLI: 9.0.5
Node: 12.14.1
OS: win32 x64

Angular: 9.0.5
... animations, cli, common, compiler, compiler-cli, core
... language-service, localize, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.5
@angular-devkit/build-angular     0.900.5
@angular-devkit/build-optimizer   0.900.5
@angular-devkit/build-webpack     0.900.5
@angular-devkit/core              9.0.5
@angular-devkit/schematics        9.0.5
@angular/forms                    9.0.4
@angular/http                     7.2.16
@ngtools/webpack                  9.0.5
@schematics/angular               9.0.5
@schematics/update                0.900.5
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

feat(grid): responsive

Suggestion: Allow importing Alyle UI in sub-modules

Bug, feature request, or proposal:

feature request

What is the expected behavior?

I've recently discovered Alyle UI and it's a great library with many useful components. However from what I understand from the documentation you are only able to import the LyThemeModule in the root module. This adds a significant weight to the main bundle size in my project, especially because I only actually use the Alyle components inside lazy-loaded modules (i.e the admin sections).

So basically, the main bundle is forced to include Alyle and chroma-js but most of my app doesn't actually use it. It's a bit of a letdown, considering the homepage is a public-facing app where speed and loading times are important. For example, with Angular Material Design I only load the components for the admins section and they don't put any extra weight on the initial bundle:

I hope you can consider this sometime. Great work btw.

Add angular universal support

Hi Guys, I'm facing this issue and I think is related to universal since cannot find the navigator because need to use isPlatformBrowser can you add these feature?

/ng-app/node_modules/@alyle/ui/bundles/alyle-ui.umd.js:169
 Platform.EDGE = Platform.isBrowser && /(edge)/i.test(navigator.userAgent);

ReferenceError: navigator is not defined

feat(flex): Responsive

Fill error in image cropper

If you set in the config of the imagecropper a width that is larger than the div container which holds it, then the resulting cropped image will be filled up with the fill color. So for example if your div container is 1000px but your config width is 3000px, you will get the fill color.
This of course is an undesired effect as both should be independent of one another.

As an example, please visit: https://stackblitz.com/edit/angular-2urf1b-djzjtf?file=app/image-cropper-example-02.component.ts
The container width of that right hand pane is about 480px, and I have set a config width of 2150px. Try selecting a large image from your computer (say 3000px width) and you'll see the red fill color to the right hand side of the resulting cropped image.

I've checked and this issue wasn't occurring in Version 2 Alyle.

how to use angular material instead of LyTheme ?

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

Interface ImgCropperConfig output - more detail in docs

🪲 Bug report

I'm trying to figure out how to get a jpg file instead of base64 as the Output for the image cropper. The output config looks interesting for that but I need more explained how it is used.

Image auto crop is not working

Describe the bug

Image autoCrop: true is not working in the latest version. previously it was working fine.

Minimal Reproduction

Turn on autoCrop property and then move the image it should automatically crop it. but it doesnt;

Cannot find module '@alyle/ui/slider'

🪲 Bug report

Describe the bug

Installed the alyle version to use with Angular 7. When using the image cropper template, which uses the slider, it presents the error in app.module.ts Cannot find module '@alyle/ui/slider'

Minimal Reproduction

Steps to reproduce the behavior:
Have an Angular 7 project.
Install Alyle version 2.7.8.
Use slider module.

Exception or Error


ERROR in src/app/app.module.ts(63,32): error TS2307: Cannot find module '@alyle/ui/slider'.

Which versions of Angular, Alyle UI, OS, TypeScript, browsers are affected?

Alyle UI Version:
v2.7.8

Angular Version:


Angular CLI: 7.3.9

Node: 10.16.0

OS: win32 x64

Angular: 7.2.15

... animations, common, compiler, compiler-cli, core, forms

... http, language-service, platform-browser

... platform-browser-dynamic, router

 

Package Version

-----------------------------------------------------------

@angular-devkit/architect 0.13.9

@angular-devkit/build-angular 0.13.9

@angular-devkit/build-optimizer 0.13.9

@angular-devkit/build-webpack 0.13.9

@angular-devkit/core 7.3.9

@angular-devkit/schematics 7.3.9

@angular/cli 7.3.9

@ngtools/webpack 7.3.9

@schematics/angular 7.3.9

@schematics/update 0.13.9

rxjs 6.5.2

typescript 3.2.4

webpack 4.29.0

Drag of cropped section of image does not work in IE

Bug, feature request, or proposal:

On trying to drag the cropped section of the image does not work in IE

What is the expected behavior?

What is the current behavior?

What are the steps to reproduce?

Provide a reproduction in StackBlitz

StackBlitz starter: https://stackblitz.com/edit/angular-alyle-ui-starter

Which versions of Angular, AlyleUI, OS, TypeScript, browsers are affected?

Version of @alyle/ui@:

$ node_modules/.bin/ng --version
Angular CLI: ...
Node: ...
OS: ...
Angular: ...
...
...
...

Image cropper do not allows you to zoom out beyond the limit of the image

🚀 Feature request

Description

I'm always frustrated when the cropper do not allows you to zoom out beyond the limit of the image when the image you uploaded is not square and fills the background

Example of the issue:

Describe the solution you'd like

Allows you to zoom out beyond the limit of the image when the image you uploaded is not square and fills the background

Describe alternatives you've considered

Use another cropper component.

image cropper not handling svg images properly

🪲 Bug report

Describe the bug

when I upload svg image to the image cropper I get a blur image and I can't resize or do anything to it, and if I crop it I get nothing .

Minimal Reproduction

Steps to reproduce the behavior:

Exception or Error



no exception or error is showing in the console

Screenshots

Which versions of Angular, Alyle UI, OS, TypeScript, browsers are affected?

Alyle UI Version:
v2.9.6

Angular Version:




Angular CLI: 8.3.19
Node: 10.16.3
OS: linux x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.19
@angular-devkit/build-angular     0.803.19
@angular-devkit/build-optimizer   0.803.19
@angular-devkit/build-webpack     0.803.19
@angular-devkit/core              8.3.19
@angular-devkit/schematics        8.3.19
@angular/cdk                      8.2.3
@angular/cli                      8.3.19
@angular/flex-layout              8.0.0-beta.27
@angular/http                     7.2.15
@angular/material                 8.2.3
@angular/pwa                      0.803.19
@ngtools/webpack                  8.3.19
@schematics/angular               8.3.19
@schematics/update                0.803.19
rxjs                              6.5.3
typescript                        3.4.5
webpack                           4.39.2

Feature request: Add date picker

🚀 Feature request

Description

I wonder if you are planning to add a date picker component to the UI, It would be nice to have such component included.
It may look something like this:

Cannot read property 'button' of undefined in karma test

🪲 Bug report

Describe the bug

i have a 'Cannot read property 'button' of undefined' error when testing my angular app, the components that showing this error are from lazy loaded module and i am using ly-button in html

Screenshots

Which versions of Angular, Alyle UI, OS, TypeScript, browsers are affected?

Alyle UI Version:
2.7.8

Angular Version:
7.2.15

Carousel current index in .ts file

Hi,

Thank you for providing such kind UI lib.
Today i have worked with UI lib and found the their is no option to get the current index of carousel when item slide.

Could you please add this.

IPAD carousel Issue

Please see the images from iPad/ iphone i get issues but from all ther device its working perfect.

my component

const styles = {
carousel: {
maxWidth: '100%',
height: '100%',
//margin: '0PX'
},
carouselItem: {
textAlign: 'center'
}
};

classes = this.theme.addStyleSheet(styles);
items: any[] = [
{
title: 'Grow your business with us',
img: 'assets/images/backgrounds/bg1.jpg'
},
{
title: 'Grow your business with us',
img: 'assets/images/backgrounds/bg2.jpg'
},
{
title: 'Grow your business with us',
img: 'assets/images/backgrounds/bg3.jpg'
},
{
title: 'Grow your business with us',
img: 'assets/images/backgrounds/bg4.jpg'
},
{
title: 'Grow your business with us',
img: 'assets/images/backgrounds/bg5.jpg'
},
{
title: 'Grow your business with us',
img: 'assets/images/backgrounds/bg6.jpg'
},
{
title: 'Grow your business with us',
img: 'assets/images/backgrounds/bg7.jpg'
},
];

//////////////////////////////////// html //////

<div id="login-intro" fxFlex fxHide fxShow.gt-xs>

    

    <ly-carousel [withClass]="classes.carousel">
        <ly-carousel-item [withClass]="classes.carouselItem" *ngFor="let item of items" [srcImg]="item.img">
            <div class="logo" >
                <img src="assets/images/logos/dealsmango.svg">
            </div>
            <div class="title" >
                {{item.title}}
            </div> 
        </ly-carousel-item>
    </ly-carousel>
</div>

<div id="login-form-wrapper" fusePerfectScrollbar >

    <div id="login-form">

        <div class="logo" fxHide.gt-xs>
            <img src="assets/images/logos/dealsmango.svg">
        </div>

        <div class="title">Login to your account</div>

        <form name="loginForm" [formGroup]="loginForm" novalidate>

            <mat-form-field appearance="outline">
                <mat-label>Email</mat-label>
                <input matInput placeholder="Email" formControlName="email">
                <mat-error *ngIf="loginForm.get('email').hasError('required')">
                    Email is required
                </mat-error>                   
                <mat-error
                    *ngIf="!loginForm.get('email').hasError('required') &&
                            loginForm.get('email').hasError('email')">
                    Please enter a valid email address
                </mat-error>
            </mat-form-field>
           
            <mat-form-field appearance="outline">
                <mat-label>Password</mat-label>
                <input matInput type="password" formControlName="password">
                <mat-error>
                    Password is required
                </mat-error>
            </mat-form-field>

            <div class="remember-forgot-password" fxLayout="row" fxLayout.xs="column"
                fxLayoutAlign="space-between center">
            </div>
            
            <button mat-raised-button color="accent" (click)="login()" class="submit-button" aria-label="LOGIN"
                    [disabled]="loginForm.invalid">
                LOGIN
            </button>

            <div class="register" fxLayout="column" fxLayoutAlign="center center">
                <span class="text">Don't have an account?</span>
                <a class="link" [routerLink]="'/register'">Create an account</a>
            </div>
        </form>

    </div>

</div>

/////////////////////// scss//////////////////

#login {
    width: 100%;
    overflow: hidden;
   
    background-size: cover;
    height: 100vh;

    #login-intro {
        padding: 0px;
        max-width: 70%;
        @include media-breakpoint('sm') {
            padding: 0px 0px;
        }

        .logo {
            width: 128px;
            margin-bottom: 32px;
        }

        .title {
            font-size: 42px;
            font-weight: 300;
            line-height: 1;
        }

        .description {
            padding-top: 16px;
            font-size: 14px;
            max-width: 600px;
        }
    }

    #login-form-wrapper {
        width: 400px;
        //min-width: 400px;
        //max-width: 400px;
        
        min-width: 30%;
        max-width: 30%;
        overflow: auto;
        -webkit-overflow-scrolling: touch;

        @include mat-elevation(16);

        @include media-breakpoint('sm') {
            width: 30%;
            min-width: 30%;
            max-width: 30%;
        }

        @include media-breakpoint('xs') {
            width: 100%;
            min-width: 100%;
            max-width: 100%;
        }

        #login-form {
            padding: 128px 23px 23px 23px;

            @include media-breakpoint('xs') {
                text-align: center;
                padding: 10px;
            }

            .logo {
                width: 128px;
                margin: 32px auto;
            }

            .title {
                font-size: 21px;
                text-align: center;
            }

            .description {
                padding-top: 8px;
            }

            form {
                width: 100%;
                padding-top: 32px;

                mat-form-field {
                    width: 100%;

                    @include media-breakpoint('xs') {
                        width: 80%;
                    }
                }

                mat-checkbox {
                    margin: 0;
                }

                .remember-forgot-password {
                    font-size: 13px;
                    margin-top: 8px;

                    .remember-me {
                        margin-bottom: 16px
                    }

                    .forgot-password {
                        font-size: 13px;
                        font-weight: 600;
                        margin-bottom: 16px
                    }
                }

                .submit-button {
                    width: 100%;
                    margin: 16px auto;
                    display: block;

                    @include media-breakpoint('xs') {
                        width: 80%;
                    }
                }
            }

            .separator {
                font-size: 15px;
                font-weight: 600;
                margin: 24px auto;
                position: relative;
                overflow: hidden;
                width: 100px;
                text-align: center;

                .text {
                    display: inline-flex;
                    position: relative;
                    padding: 0 8px;
                    z-index: 9999;

                    &:before,
                    &:after {
                        content: '';
                        display: block;
                        width: 30px;
                        position: absolute;
                        top: 10px;
                        border-top: 1px solid;
                    }

                    &:before {
                        right: 100%;
                    }

                    &:after {
                        left: 100%;
                    }
                }
            }

            button {

                &.google,
                &.facebook {
                    width: 70%;
                    text-transform: none;
                    color: #FFFFFF;
                    font-size: 13px;

                    @include media-breakpoint('xs') {
                        width: 60%;
                    }

                    mat-icon {
                        color: #FFFFFF;
                        margin: 0 8px 0 0;
                    }
                }

                &.google {
                    background-color: #D73D32;
                    margin-bottom: 8px;
                }

                &.facebook {
                    background-color: rgb(63, 92, 154);
                }
            }

            .register {
                margin: 32px auto 24px auto;
                width: 250px;
                font-weight: 600;

                .text {
                    margin-right: 8px;
                }

                .link {

                }
            }
        }
    }
}

}

Error: LY_THEME undefined

Bug, feature request, or proposal:

What is the expected behavior?

What is the current behavior?

What are the steps to reproduce?

Provide a reproduction in StackBlitz

StackBlitz starter: https://stackblitz.com/edit/angular-alyle-ui-starter

Which versions of Angular, AlyleUI, OS, TypeScript, browsers are affected?

Version of @alyle/ui@:

$ node_modules/.bin/ng --version
Angular CLI: ...
Node: ...
OS: ...
Angular: ...
...
...
...

The photo cropping tool doesn't work on the iphone 6 onwards. It shows the tool, but then just pulls back a black image. if we use rear camera

Bug, feature request, or proposal:

What is the expected behavior?

What is the current behavior?

What are the steps to reproduce?

Provide a reproduction in StackBlitz

StackBlitz starter: https://stackblitz.com/edit/angular-alyle-ui-starter

Which versions of Angular, AlyleUI, OS, TypeScript, browsers are affected?

Version of @alyle/ui@:

$ node_modules/.bin/ng --version
Angular CLI: ...
Node: ...
OS: ...
Angular: ...
...
...
...

Remove Exif data from image in image cropper tool

I think that when we upload an image, the exif data is preserved. Is there any way in which we could have a setting where we can remove exif data if we wish? I ask because if a user selects a photo taken on their mobile phone, the exif data wants to rotate the photo to a different orientation to which it was originally taken.

ng build --aot error

ERROR in Cannot determine the module for class NgTranscludeDirective

Bug Dialog

🪲 Bug report

Describe the bug

After is open modal with a button and press ENTER the modal is reopened over the current that is opened.

I test in his example page.

https://alyle.io/components/dialog

Open dialog
Press ENTER

Alyle UI Version:
vx.x.x

Angular Version:

Angular 8

Image cropper with coordinates?

🚀 Feature request

Description

Cloudinary's Upload Widget uses a coordinate system to allow users to crop their image without constraints. The user can drag the sides of the cropper box where they want them.

Describe the solution you'd like

A more customizable cropper box. This is not a must-have for me but it would be very nice polish and a nice product if someone has some time. (I don't have the skills to help.)

Describe alternatives you've considered

My alternative is to use Cloudinary's services but I'm moving to AWS serverless anyway and would like to use their setup with Lambda and S3.

Image cropper

Your example image cropper doesn't work... the viewchild object is undefined

Able to create nested menu

🚀 Feature request

Description

Is that possible to add a nested menu?

feat(checkbox): Simple checkbox

feature

Multiple image cropping configurations can't be used in the same page

🪲 Bug report

It is not possible to add image cropping plugin with multiple styles.
Let's say there are multiple image uploading controls and each of them has a different requirement in cropping size.
In such cases, the plugin will always load the first style which is available.
No matter we use multiple components or use the plugin in the same component itself, it will always take the first style available.
By the word 'styles', what I meant was the styles passed in the <ly-img-cropper [withClass]="classes.cropping"

classes applyed to components changes with production build

Bug, feature request, or proposal:

I am not sure if this is a bug or a mistake on my side!

What is the expected behavior?

components have the same classes in --prod build that they have in development enviroment

What is the current behavior?

classes on components are changed in production

Which versions of Angular, AlyleUI, OS, TypeScript, browsers are affected?

Version of @alyle/ui@: ^10.3.0

$ node_modules/.bin/ng --version

Angular CLI: 10.1.6
Node: 12.18.3
OS: win32 x64

Angular: 10.1.5
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1001.6
@angular-devkit/build-angular   0.1001.6
@angular-devkit/core            10.1.6
@angular-devkit/schematics      10.1.6
@angular/cdk                    10.2.4
@angular/cli                    10.1.6
@angular/material               10.2.4
@schematics/angular             10.1.6
@schematics/update              0.1001.6
rxjs                            6.6.3
typescript                      3.9.7

Example

I had this styles for my image cropper

const STYLES = (_theme: ThemeVariables, ref: ThemeRef) => {
  ref.renderStyleSheet(SLIDER_STYLES);
  const slider = ref.selectorsOf(SLIDER_STYLES);
  return {
    cropper        : lyl`{
      max-width: 238px
      height: 238px
    }`,
    sliderContainer: lyl`{
      position: relative
      ${slider.root} {
        margin: auto
        display : block
      }
    }`,
    slider         : lyl`{
      padding: 1em
    }`,
    cropResult     : lyl`{
      border-radius: 50%
    }`
  };
};

With this html

<div ly-dialog-content [lyPx]="0" class="custom-cropper">
  
  <div class="title-cropper">
    Crop Image and Upload
    <!-- <button *ngIf="ready" ly-button color="primary" (click)="dialogRef.close()">X</button> -->
    <button mat-raised-button *ngIf="ready" color="primary" class="container__close-icon close-icon" (click)="dialogRef.close()">
    </button>
  </div>

  <ly-img-cropper [withClass]="classes.cropper"
                  [config]="myConfig"
                  [(scale)]="scale"
                  (ready)="ready = true"
                  (cleaned)="ready = false"
                  (minScale)="minScale = $event"
                  (cropped)="onCropped($event)"
                  (loaded)="onLoaded($event)"
                  (error)="onError($event)"
  >
    <span>Drag and drop image</span>
  </ly-img-cropper>

  <div *ngIf="ready" [className]="classes.sliderContainer">
    <div [class]="classes.slider">
      <ly-slider
        [thumbVisible]="false"
        [min]="minScale"
        [max]="1"
        [(ngModel)]="scale"
        (input)="scale = $event.value"
        step="0.000001"></ly-slider>
    </div>
  </div>

</div>

I added the custom-cropper class so that my coworker can style the component as needed, this worked just fine in development environment, but after we deployed the code to production --prod this custom styles stopped working

my local dev run has these classes : LyImageCropper-root-af cropper-ab but the prod run has these : af ab ?? what am I missing here?

https://stackoverflow.com/questions/64569216/customizing-alyle-ui-component-styles

ERROR TypeError: m.alpha is not a function

🪲 Bug report

Describe the bug

Console error because a function wasn't found.

Minimal Reproduction

Just use the image cropper and try to upload an image, and the error will arise.

Exception or Error


ERROR TypeError: (intermediate value)(intermediate value)(intermediate value).luminance is not a function
ERROR TypeError: m.alpha is not a function

Which versions of Angular, Alyle UI, OS, TypeScript, browsers are affected?

** Browser:**
Chrome 84.0.4147.105

Typescript:
v3.9.7

Alyle UI Version:
v10.0.0

**Angular Version: **
v10.0.11

multi menu toggle

I have two menus, and I want to close the opened one when clicked on the other one (closed one), how can I do that?

Angular 9 add image to cropper don't work until change

🪲 Bug report

Describe the bug

Drag and drop or select an image from some locations don't work. Results are like on image 1 from a screenshot until change detection happens and then onloaded method is triggered and the final result is as it should bean in the first place.

This is an example from the documentation.

Minimal Reproduction

https://stackblitz.com/angular/vbbxkpkndnq?file=app%2Fimage-cropper-example-01.component.html

Exception or Error

Don't have any exceptions.

Screenshots

Alyle UI Version:
v3.2.0

Angular Version:


Angular CLI: 9.0.2
Node: 13.3.0
OS: win32 x64

Angular:
...
Ivy Workspace:

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.900.2
@angular-devkit/core         9.0.2
@angular-devkit/schematics   9.0.2
@schematics/angular          9.0.2
@schematics/update           0.900.2
rxjs