ngx-image-editors/lib/ngx-image-editor.component.metadata.json

Angular 5 image editor

[{"__symbolic":"module","version":3,"metadata":{"NgxImageEditorComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-image-editor","template":"\n <div class=\"ngx-image-editor-component\" fxLayout=\"column\" fxLayoutAlign=\"center stretch\">\n    <div mat-dialog-title class=\"photo-editor-header\">\n        <mat-icon>photo</mat-icon>\n        <div class=\"file-name\">{{state.name}}</div>\n        <button [hidden]=\"croppedImage\" mat-icon-button color=\"accent\" matTooltip=\"Crop image\" (click)=\"handleCrop()\">\n            <mat-icon>crop</mat-icon>\n        </button>\n        <button mat-icon-button\n                [hidden]=\"croppedImage\"\n                color=\"accent\"\n                matTooltip=\"Center canvas\"\n                (click)=\"centerCanvas()\">\n            <mat-icon>center_focus_strong</mat-icon>\n        </button>\n        <button mat-icon-button matTooltip=\"Close\" (click)=\"dialogRef.close()\">\n            <mat-icon>clear</mat-icon>\n        </button>\n    </div>\n    <div mat-dialog-content\n         #dialogCropContainer\n         class=\"dialog-crop-container\"\n         fxLayout=\"column\"\n         fxLayoutAlign=\"center center\"\n         fxFlex=\"grow\">\n        <ng-template [ngIf]=\"!croppedImage\">\n            <div\n                [style.visibility]=\"loading ? 'hidden' : 'visible'\"\n                [style.background]=\"canvasFillColor\"\n                class=\"img-container\">\n                <img #previewimg\n                     [src]=\"state.url\">\n            </div>\n        </ng-template>\n        <ng-template [ngIf]=\"croppedImage && !loading\">\n            <div class=\"cropped-image\">\n                <img #croppedImg\n                     [ngStyle]=\"{'transform': 'scale(' + zoomIn + ')'}\"\n                     [src]=\"croppedImage\">\n            </div>\n        </ng-template>\n        <mat-progress-spinner *ngIf=\"loading\" mode=\"indeterminate\"></mat-progress-spinner>\n    </div>\n    <div\n        class=\"dialog-button-actions\"\n        mat-dialog-actions\n        fxLayout=\"column\"\n        align=\"start\"\n        fxFlex=\"nogrow\">\n        <div class=\"image-detail-toolbar\" fxFlex=\"100\">\n            <span fxFlex></span>\n            <div class=\"image-zoom\">\n                <button mat-icon-button color=\"accent\" (click)=\"zoomChange(0.1, 'zoomIn')\">\n                    <mat-icon>zoom_in</mat-icon>\n                </button>\n                <mat-slider [value]=\"sliderValue\" [thumb-label]=\"true\"></mat-slider>\n                <button mat-icon-button color=\"accent\" (click)=\"zoomChange(-0.1, 'zoomOut')\">\n                    <mat-icon>zoom_out</mat-icon>\n                </button>\n            </div>\n        </div>\n        <div class=\"cropped-image-buttons\" [style.visibility]=\"!croppedImage ? 'hidden' : 'visible'\">\n            <button mat-raised-button color=\"accent\" (click)=\"saveImage()\">\n                <mat-icon>done</mat-icon>\n                <span>Save</span>\n            </button>\n            <button mat-raised-button color=\"accent\" (click)=\"undoCrop()\">\n                <mat-icon>undo</mat-icon>\n                <span>Undo</span>\n            </button>\n        </div>\n    </div>\n</div>\n\n","styles":["\n        .ngx-image-editor-component .photo-editor-header {\n            display: flex;\n            justify-content: space-around;\n            align-items: center;\n            width: 100%;\n            padding: 5px 0;\n            background: #666;\n            color: #FFF;\n            z-index: 100;\n            margin: 0;\n        }\n        .ngx-image-editor-component .photo-editor-header > .mat-icon {\n            padding: 0 10px;\n        }\n        .ngx-image-editor-component .photo-editor-header > .file-name {\n            flex: 1 1 100%;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n            overflow: hidden;\n        }\n        .ngx-image-editor-component mat-progress-spinner {\n            position: absolute;\n        }\n        .ngx-image-editor-component .dialog-crop-container {\n            width: 800px;\n            height: 400px;\n            overflow: hidden;\n        }\n        .ngx-image-editor-component .cropper-bg {\n            background-image: none !important;\n        }\n        .ngx-image-editor-component .cropper-bg > .cropper-modal {\n            opacity: 1 !important;\n            background: none;\n        }\n        .ngx-image-editor-component .img-container {\n            width: 800px !important;\n            height: 400px !important;\n        }\n        .ngx-image-editor-component .cropped-image img {\n            width: auto !important;\n            height: auto !important;\n            max-width: 800px !important;\n            max-height: 400px !important;\n        }\n        .ngx-image-editor-component .dialog-button-actions {\n            background: #666;\n            position: relative;\n            padding: 0;\n        }\n        .ngx-image-editor-component .dialog-button-actions:last-child {\n            margin: 0;\n        }\n        .ngx-image-editor-component .dialog-button-actions > DIV mat-button-toggle-group {\n            margin: 20px;\n            background-color: white;\n        }\n        .ngx-image-editor-component .dialog-button-actions .cropped-image-buttons {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n        }\n        .ngx-image-editor-component .dialog-button-actions > .canvas-config {\n            padding: 5px;\n            margin: 0 20px;\n        }\n        .ngx-image-editor-component .dialog-button-actions > .canvas-config .mat-input-wrapper > .mat-input-table > .mat-input-infix {\n            color: white !important;\n        }\n        .ngx-image-editor-component .dialog-button-actions > .canvas-config .mat-input-placeholder.mat-empty:not(.mat-focused) {\n            color: white;\n        }\n        .ngx-image-editor-component .dialog-button-actions > .canvas-config .mat-input-underline {\n            border-color: white;\n        }\n        .ngx-image-editor-component .dialog-button-actions > .canvas-config mat2-colorpicker {\n            width: 200px !important;\n        }\n        .ngx-image-editor-component .dialog-button-actions > .canvas-config mat2-colorpicker .mat2-colorpicker-input {\n            border-bottom: 1px solid white !important;\n        }\n        .ngx-image-editor-component .dialog-button-actions > .canvas-config mat2-colorpicker .color-picker-selector .mat2-colorpicker-input .mat2-colorpicker-value {\n            color: white !important;\n        }\n        .ngx-image-editor-component .dialog-button-actions > .canvas-config mat2-colorpicker .color-picker-selector {\n            padding: 15px 0 !important;\n        }\n        .ngx-image-editor-component .dialog-button-actions > .canvas-config mat2-colorpicker .color-picker-selector .mat2-colorpicker-preview {\n            top: 15px !important;\n        }\n        .ngx-image-editor-component .dialog-button-actions > .canvas-config mat2-colorpicker .input-focused {\n            color: #6ec140 !important;\n            border-bottom-width: 1.2px;\n            border-color: #6ec140 !important;\n        }\n        .ngx-image-editor-component .dialog-button-actions > .canvas-config mat2-colorpicker .input-focused .mat2-colorpicker-placeholder {\n            color: #6ec140 !important;\n        }\n        .ngx-image-editor-component .dialog-button-actions .image-detail-toolbar {\n            background-color: #272727;\n            color: white;\n            height: 40px;\n            line-height: 40px;\n        }\n        .ngx-image-editor-component .dialog-button-actions .image-detail-toolbar > .image-zoom {\n            display: flex;\n            align-items: center;\n            padding: 0 10px;\n        }\n        .ngx-image-editor-component .dialog-button-actions .image-detail-toolbar > .image-zoom .mat-slider-horizontal .mat-slider-wrapper {\n            top: 23px !important;\n        }\n        .ngx-image-editor-component .dialog-button-actions .image-detail-toolbar > .image-zoom .mat-slider-horizontal .mat-slider-wrapper .mat-slider-thumb-container {\n            cursor: grab;\n        }\n        .ngx-image-editor-component .dialog-button-actions .image-detail-toolbar > .image-zoom .mat-slider-horizontal .mat-slider-wrapper .mat-slider-thumb-container > .mat-slider-thumb {\n            background-color: #6ec140 !important;\n        }\n        .ngx-image-editor-component .dialog-button-actions .image-detail-toolbar > .image-dimensions {\n            padding: 0 10px;\n            font-size: 14px;\n            width: 200px;\n            max-width: 200px;\n        }\n\n        .mat-dialog-content {\n            margin: 0;\n            padding: 0;\n        }\n\n        .mat-dialog-container {\n            overflow: hidden !important;\n            padding: 0;\n        }\n\n    "],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"previewImage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["previewimg"]}]}],"croppedImg":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["croppedImg"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"@angular/material","name":"MAT_DIALOG_DATA"}]}]],"parameters":[{"__symbolic":"reference","module":"@angular/material","name":"MatDialogRef","arguments":[{"__symbolic":"reference","name":"any"}]},{"__symbolic":"reference","name":"any"}]}],"ngOnDestroy":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"handleCrop":[{"__symbolic":"method"}],"undoCrop":[{"__symbolic":"method"}],"saveImage":[{"__symbolic":"method"}],"initializeCropper":[{"__symbolic":"method"}],"zoomChange":[{"__symbolic":"method"}],"setImageWidth":[{"__symbolic":"method"}],"setImageHeight":[{"__symbolic":"method"}],"setCropBoxWidth":[{"__symbolic":"method"}],"setCropBoxHeight":[{"__symbolic":"method"}],"centerCanvas":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"NgxImageEditorComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-image-editor","template":"\n <div class=\"ngx-image-editor-component\" fxLayout=\"column\" fxLayoutAlign=\"center stretch\">\n    <div mat-dialog-title class=\"photo-editor-header\">\n        <mat-icon>photo</mat-icon>\n        <div class=\"file-name\">{{state.name}}</div>\n        <button [hidden]=\"croppedImage\" mat-icon-button color=\"accent\" matTooltip=\"Crop image\" (click)=\"handleCrop()\">\n            <mat-icon>crop</mat-icon>\n        </button>\n        <button mat-icon-button\n                [hidden]=\"croppedImage\"\n                color=\"accent\"\n                matTooltip=\"Center canvas\"\n                (click)=\"centerCanvas()\">\n            <mat-icon>center_focus_strong</mat-icon>\n        </button>\n        <button mat-icon-button matTooltip=\"Close\" (click)=\"dialogRef.close()\">\n            <mat-icon>clear</mat-icon>\n        </button>\n    </div>\n    <div mat-dialog-content\n         #dialogCropContainer\n         class=\"dialog-crop-container\"\n         fxLayout=\"column\"\n         fxLayoutAlign=\"center center\"\n         fxFlex=\"grow\">\n        <ng-template [ngIf]=\"!croppedImage\">\n            <div\n                [style.visibility]=\"loading ? 'hidden' : 'visible'\"\n                [style.background]=\"canvasFillColor\"\n                class=\"img-container\">\n                <img #previewimg\n                     [src]=\"state.url\">\n            </div>\n        </ng-template>\n        <ng-template [ngIf]=\"croppedImage && !loading\">\n            <div class=\"cropped-image\">\n                <img #croppedImg\n                     [ngStyle]=\"{'transform': 'scale(' + zoomIn + ')'}\"\n                     [src]=\"croppedImage\">\n            </div>\n        </ng-template>\n        <mat-progress-spinner *ngIf=\"loading\" mode=\"indeterminate\"></mat-progress-spinner>\n    </div>\n    <div\n        class=\"dialog-button-actions\"\n        mat-dialog-actions\n        fxLayout=\"column\"\n        align=\"start\"\n        fxFlex=\"nogrow\">\n        <div class=\"image-detail-toolbar\" fxFlex=\"100\">\n            <span fxFlex></span>\n            <div class=\"image-zoom\">\n                <button mat-icon-button color=\"accent\" (click)=\"zoomChange(0.1, 'zoomIn')\">\n                    <mat-icon>zoom_in</mat-icon>\n                </button>\n                <mat-slider [value]=\"sliderValue\" [thumb-label]=\"true\"></mat-slider>\n                <button mat-icon-button color=\"accent\" (click)=\"zoomChange(-0.1, 'zoomOut')\">\n                    <mat-icon>zoom_out</mat-icon>\n                </button>\n            </div>\n        </div>\n        <div class=\"cropped-image-buttons\" [style.visibility]=\"!croppedImage ? 'hidden' : 'visible'\">\n            <button mat-raised-button color=\"accent\" (click)=\"saveImage()\">\n                <mat-icon>done</mat-icon>\n                <span>Save</span>\n            </button>\n            <button mat-raised-button color=\"accent\" (click)=\"undoCrop()\">\n                <mat-icon>undo</mat-icon>\n                <span>Undo</span>\n            </button>\n        </div>\n    </div>\n</div>\n\n","styles":["\n        .ngx-image-editor-component .photo-editor-header {\n            display: flex;\n            justify-content: space-around;\n            align-items: center;\n            width: 100%;\n            padding: 5px 0;\n            background: #666;\n            color: #FFF;\n            z-index: 100;\n            margin: 0;\n        }\n        .ngx-image-editor-component .photo-editor-header > .mat-icon {\n            padding: 0 10px;\n        }\n        .ngx-image-editor-component .photo-editor-header > .file-name {\n            flex: 1 1 100%;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n            overflow: hidden;\n        }\n        .ngx-image-editor-component mat-progress-spinner {\n            position: absolute;\n        }\n        .ngx-image-editor-component .dialog-crop-container {\n            width: 800px;\n            height: 400px;\n            overflow: hidden;\n        }\n        .ngx-image-editor-component .cropper-bg {\n            background-image: none !important;\n        }\n        .ngx-image-editor-component .cropper-bg > .cropper-modal {\n            opacity: 1 !important;\n            background: none;\n        }\n        .ngx-image-editor-component .img-container {\n            width: 800px !important;\n            height: 400px !important;\n        }\n        .ngx-image-editor-component .cropped-image img {\n            width: auto !important;\n            height: auto !important;\n            max-width: 800px !important;\n            max-height: 400px !important;\n        }\n        .ngx-image-editor-component .dialog-button-actions {\n            background: #666;\n            position: relative;\n            padding: 0;\n        }\n        .ngx-image-editor-component .dialog-button-actions:last-child {\n            margin: 0;\n        }\n        .ngx-image-editor-component .dialog-button-actions > DIV mat-button-toggle-group {\n            margin: 20px;\n            background-color: white;\n        }\n        .ngx-image-editor-component .dialog-button-actions .cropped-image-buttons {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n        }\n        .ngx-image-editor-component .dialog-button-actions > .canvas-config {\n            padding: 5px;\n            margin: 0 20px;\n        }\n        .ngx-image-editor-component .dialog-button-actions > .canvas-config .mat-input-wrapper > .mat-input-table > .mat-input-infix {\n            color: white !important;\n        }\n        .ngx-image-editor-component .dialog-button-actions > .canvas-config .mat-input-placeholder.mat-empty:not(.mat-focused) {\n            color: white;\n        }\n        .ngx-image-editor-component .dialog-button-actions > .canvas-config .mat-input-underline {\n            border-color: white;\n        }\n        .ngx-image-editor-component .dialog-button-actions > .canvas-config mat2-colorpicker {\n            width: 200px !important;\n        }\n        .ngx-image-editor-component .dialog-button-actions > .canvas-config mat2-colorpicker .mat2-colorpicker-input {\n            border-bottom: 1px solid white !important;\n        }\n        .ngx-image-editor-component .dialog-button-actions > .canvas-config mat2-colorpicker .color-picker-selector .mat2-colorpicker-input .mat2-colorpicker-value {\n            color: white !important;\n        }\n        .ngx-image-editor-component .dialog-button-actions > .canvas-config mat2-colorpicker .color-picker-selector {\n            padding: 15px 0 !important;\n        }\n        .ngx-image-editor-component .dialog-button-actions > .canvas-config mat2-colorpicker .color-picker-selector .mat2-colorpicker-preview {\n            top: 15px !important;\n        }\n        .ngx-image-editor-component .dialog-button-actions > .canvas-config mat2-colorpicker .input-focused {\n            color: #6ec140 !important;\n            border-bottom-width: 1.2px;\n            border-color: #6ec140 !important;\n        }\n        .ngx-image-editor-component .dialog-button-actions > .canvas-config mat2-colorpicker .input-focused .mat2-colorpicker-placeholder {\n            color: #6ec140 !important;\n        }\n        .ngx-image-editor-component .dialog-button-actions .image-detail-toolbar {\n            background-color: #272727;\n            color: white;\n            height: 40px;\n            line-height: 40px;\n        }\n        .ngx-image-editor-component .dialog-button-actions .image-detail-toolbar > .image-zoom {\n            display: flex;\n            align-items: center;\n            padding: 0 10px;\n        }\n        .ngx-image-editor-component .dialog-button-actions .image-detail-toolbar > .image-zoom .mat-slider-horizontal .mat-slider-wrapper {\n            top: 23px !important;\n        }\n        .ngx-image-editor-component .dialog-button-actions .image-detail-toolbar > .image-zoom .mat-slider-horizontal .mat-slider-wrapper .mat-slider-thumb-container {\n            cursor: grab;\n        }\n        .ngx-image-editor-component .dialog-button-actions .image-detail-toolbar > .image-zoom .mat-slider-horizontal .mat-slider-wrapper .mat-slider-thumb-container > .mat-slider-thumb {\n            background-color: #6ec140 !important;\n        }\n        .ngx-image-editor-component .dialog-button-actions .image-detail-toolbar > .image-dimensions {\n            padding: 0 10px;\n            font-size: 14px;\n            width: 200px;\n            max-width: 200px;\n        }\n\n        .mat-dialog-content {\n            margin: 0;\n            padding: 0;\n        }\n\n        .mat-dialog-container {\n            overflow: hidden !important;\n            padding: 0;\n        }\n\n    "],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"previewImage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["previewimg"]}]}],"croppedImg":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["croppedImg"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"@angular/material","name":"MAT_DIALOG_DATA"}]}]],"parameters":[{"__symbolic":"reference","module":"@angular/material","name":"MatDialogRef","arguments":[{"__symbolic":"reference","name":"any"}]},{"__symbolic":"reference","name":"any"}]}],"ngOnDestroy":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"handleCrop":[{"__symbolic":"method"}],"undoCrop":[{"__symbolic":"method"}],"saveImage":[{"__symbolic":"method"}],"initializeCropper":[{"__symbolic":"method"}],"zoomChange":[{"__symbolic":"method"}],"setImageWidth":[{"__symbolic":"method"}],"setImageHeight":[{"__symbolic":"method"}],"setCropBoxWidth":[{"__symbolic":"method"}],"setCropBoxHeight":[{"__symbolic":"method"}],"centerCanvas":[{"__symbolic":"method"}]}}}}]