angular-glass
Version:
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.0.3.
61 lines • 6.76 kB
JavaScript
import { Directive, Input } from '@angular/core';
import * as i0 from "@angular/core";
export class AsGlassDirective {
constructor(el) {
this.el = el;
this.blur = 4;
this.opacity = 0.25;
this.borderRadius = 10;
this.showOutline = true;
this.outlineWidth = 1;
this.r = 255;
this.g = 255;
this.b = 255;
}
ngOnInit() {
if (this.opacity < 0) {
this.opacity = 0;
}
if (this.opacity > 1) {
this.opacity = 1;
}
if (this.borderRadius < 0) {
this.borderRadius = 0;
}
this.el.nativeElement.style.backgroundColor = `rgba(${this.r},${this.g},${this.b},${this.opacity})`;
this.el.nativeElement.style.borderRadius = `${this.borderRadius}px`;
this.el.nativeElement.style.boxShadow =
'0 8px 32px 0 rgba( 31, 38, 135, 0.37 )';
this.el.nativeElement.style.backdropFilter = `blur(${this.blur}px)`;
this.el.nativeElement.style['-webkit-backdrop-filter'] = `blur(${this.blur}px)`;
if (this.showOutline) {
this.el.nativeElement.style.border =
`${this.outlineWidth}px solid rgba( 255, 255, 255, 0.18 )`;
}
}
}
AsGlassDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0, type: AsGlassDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
AsGlassDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.3", type: AsGlassDirective, selector: "[asGlass]", inputs: { blur: "blur", opacity: "opacity", borderRadius: "borderRadius", showOutline: "showOutline", outlineWidth: "outlineWidth", r: "r", g: "g", b: "b" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0, type: AsGlassDirective, decorators: [{
type: Directive,
args: [{
selector: '[asGlass]',
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { blur: [{
type: Input
}], opacity: [{
type: Input
}], borderRadius: [{
type: Input
}], showOutline: [{
type: Input
}], outlineWidth: [{
type: Input
}], r: [{
type: Input
}], g: [{
type: Input
}], b: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXMtZ2xhc3MuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvYW5ndWxhci1nbGFzcy9zcmMvbGliL2FzLWdsYXNzLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFjLEtBQUssRUFBVSxNQUFNLGVBQWUsQ0FBQzs7QUFPckUsTUFBTSxPQUFPLGdCQUFnQjtJQVMzQixZQUFvQixFQUFjO1FBQWQsT0FBRSxHQUFGLEVBQUUsQ0FBWTtRQVJ6QixTQUFJLEdBQVMsQ0FBQyxDQUFDO1FBQ2YsWUFBTyxHQUFXLElBQUksQ0FBQztRQUN2QixpQkFBWSxHQUFXLEVBQUUsQ0FBQztRQUMxQixnQkFBVyxHQUFZLElBQUksQ0FBQztRQUM1QixpQkFBWSxHQUFXLENBQUMsQ0FBQztRQUN6QixNQUFDLEdBQVcsR0FBRyxDQUFDO1FBQ2hCLE1BQUMsR0FBVyxHQUFHLENBQUM7UUFDaEIsTUFBQyxHQUFXLEdBQUcsQ0FBQztJQUNZLENBQUM7SUFDdEMsUUFBUTtRQUNOLElBQUksSUFBSSxDQUFDLE9BQU8sR0FBRyxDQUFDLEVBQUU7WUFDcEIsSUFBSSxDQUFDLE9BQU8sR0FBRyxDQUFDLENBQUM7U0FDbEI7UUFDRCxJQUFJLElBQUksQ0FBQyxPQUFPLEdBQUcsQ0FBQyxFQUFFO1lBQ3BCLElBQUksQ0FBQyxPQUFPLEdBQUcsQ0FBQyxDQUFDO1NBQ2xCO1FBQ0QsSUFBSSxJQUFJLENBQUMsWUFBWSxHQUFHLENBQUMsRUFBRTtZQUN6QixJQUFJLENBQUMsWUFBWSxHQUFHLENBQUMsQ0FBQztTQUN2QjtRQUNELElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxlQUFlLEdBQUcsUUFBUSxJQUFJLENBQUMsQ0FBQyxJQUFJLElBQUksQ0FBQyxDQUFDLElBQUksSUFBSSxDQUFDLENBQUMsSUFBSSxJQUFJLENBQUMsT0FBTyxHQUFHLENBQUM7UUFDcEcsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFDLFlBQVksR0FBRyxHQUFHLElBQUksQ0FBQyxZQUFZLElBQUksQ0FBQztRQUNwRSxJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsU0FBUztZQUNuQyx3Q0FBd0MsQ0FBQztRQUMzQyxJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsY0FBYyxHQUFHLFFBQVEsSUFBSSxDQUFDLElBQUksS0FBSyxDQUFDO1FBQ3BFLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FDekIseUJBQXlCLENBQzFCLEdBQUcsUUFBUSxJQUFJLENBQUMsSUFBSSxLQUFLLENBQUM7UUFDM0IsSUFBSSxJQUFJLENBQUMsV0FBVyxFQUFFO1lBQ3BCLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxNQUFNO2dCQUNoQyxHQUFHLElBQUksQ0FBQyxZQUFZLHNDQUFzQyxDQUFDO1NBQzlEO0lBQ0gsQ0FBQzs7NkdBaENVLGdCQUFnQjtpR0FBaEIsZ0JBQWdCOzJGQUFoQixnQkFBZ0I7a0JBSDVCLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLFdBQVc7aUJBQ3RCO2lHQUVVLElBQUk7c0JBQVosS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUNHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ0csQ0FBQztzQkFBVCxLQUFLO2dCQUNHLENBQUM7c0JBQVQsS0FBSztnQkFDRyxDQUFDO3NCQUFULEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBEaXJlY3RpdmUsIEVsZW1lbnRSZWYsIElucHV0LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxudHlwZSBibHVyID0gMCB8MSB8IDIgfCAzIHwgNCB8IDUgfCA2IHwgNyB8IDggfCA5IHwgMTAgfCAxMSB8IDEyIHwgMTMgfCAxNCB8IDE1IHwgMTYgfCAxNyB8IDE4IHwgMTkgfCAyMDtcblxuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW2FzR2xhc3NdJyxcbn0pXG5leHBvcnQgY2xhc3MgQXNHbGFzc0RpcmVjdGl2ZSBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBJbnB1dCgpIGJsdXI6IGJsdXIgPSA0O1xuICBASW5wdXQoKSBvcGFjaXR5OiBudW1iZXIgPSAwLjI1O1xuICBASW5wdXQoKSBib3JkZXJSYWRpdXM6IG51bWJlciA9IDEwO1xuICBASW5wdXQoKSBzaG93T3V0bGluZTogQm9vbGVhbiA9IHRydWU7XG4gIEBJbnB1dCgpIG91dGxpbmVXaWR0aDogbnVtYmVyID0gMTtcbiAgQElucHV0KCkgcjogbnVtYmVyID0gMjU1O1xuICBASW5wdXQoKSBnOiBudW1iZXIgPSAyNTU7XG4gIEBJbnB1dCgpIGI6IG51bWJlciA9IDI1NTtcbiAgY29uc3RydWN0b3IocHJpdmF0ZSBlbDogRWxlbWVudFJlZikge31cbiAgbmdPbkluaXQoKSB7XG4gICAgaWYgKHRoaXMub3BhY2l0eSA8IDApIHtcbiAgICAgIHRoaXMub3BhY2l0eSA9IDA7XG4gICAgfVxuICAgIGlmICh0aGlzLm9wYWNpdHkgPiAxKSB7XG4gICAgICB0aGlzLm9wYWNpdHkgPSAxO1xuICAgIH1cbiAgICBpZiAodGhpcy5ib3JkZXJSYWRpdXMgPCAwKSB7XG4gICAgICB0aGlzLmJvcmRlclJhZGl1cyA9IDA7XG4gICAgfVxuICAgIHRoaXMuZWwubmF0aXZlRWxlbWVudC5zdHlsZS5iYWNrZ3JvdW5kQ29sb3IgPSBgcmdiYSgke3RoaXMucn0sJHt0aGlzLmd9LCR7dGhpcy5ifSwke3RoaXMub3BhY2l0eX0pYDtcbiAgICB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQuc3R5bGUuYm9yZGVyUmFkaXVzID0gYCR7dGhpcy5ib3JkZXJSYWRpdXN9cHhgO1xuICAgIHRoaXMuZWwubmF0aXZlRWxlbWVudC5zdHlsZS5ib3hTaGFkb3cgPVxuICAgICAgJzAgOHB4IDMycHggMCByZ2JhKCAzMSwgMzgsIDEzNSwgMC4zNyApJztcbiAgICB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQuc3R5bGUuYmFja2Ryb3BGaWx0ZXIgPSBgYmx1cigke3RoaXMuYmx1cn1weClgO1xuICAgIHRoaXMuZWwubmF0aXZlRWxlbWVudC5zdHlsZVtcbiAgICAgICctd2Via2l0LWJhY2tkcm9wLWZpbHRlcidcbiAgICBdID0gYGJsdXIoJHt0aGlzLmJsdXJ9cHgpYDtcbiAgICBpZiAodGhpcy5zaG93T3V0bGluZSkge1xuICAgICAgdGhpcy5lbC5uYXRpdmVFbGVtZW50LnN0eWxlLmJvcmRlciA9XG4gICAgICAgIGAke3RoaXMub3V0bGluZVdpZHRofXB4IHNvbGlkIHJnYmEoIDI1NSwgMjU1LCAyNTUsIDAuMTggKWA7XG4gICAgfVxuICB9XG59XG4iXX0=