insight-ngx-image-editor/insight-ngx-image-editor.metadata.json

Angular 5 Image Editor

{"__symbolic":"module","version":4,"metadata":{"NgxImageEditorModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":16,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":19,"character":8},{"__symbolic":"reference","module":"@angular/platform-browser/animations","name":"BrowserAnimationsModule","line":20,"character":8},{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":21,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":22,"character":8},{"__symbolic":"reference","module":"@angular/flex-layout","name":"FlexLayoutModule","line":23,"character":8},{"__symbolic":"reference","module":"@angular/material","name":"MatButtonModule","line":24,"character":8},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":25,"character":8},{"__symbolic":"reference","module":"@angular/material","name":"MatDialogModule","line":26,"character":8},{"__symbolic":"reference","module":"@angular/material","name":"MatInputModule","line":27,"character":8},{"__symbolic":"reference","module":"@angular/material","name":"MatMenuModule","line":28,"character":8},{"__symbolic":"reference","module":"@angular/material","name":"MatProgressSpinnerModule","line":29,"character":8},{"__symbolic":"reference","module":"@angular/material","name":"MatTabsModule","line":30,"character":8},{"__symbolic":"reference","module":"@angular/material","name":"MatTooltipModule","line":31,"character":8},{"__symbolic":"reference","module":"@angular/material","name":"MatButtonToggleModule","line":32,"character":8},{"__symbolic":"reference","module":"@angular/material","name":"MatSliderModule","line":33,"character":8},{"__symbolic":"reference","module":"@angular/material","name":"MatAutocompleteModule","line":34,"character":8}],"declarations":[{"__symbolic":"reference","name":"NgxImageEditorComponent"}],"exports":[{"__symbolic":"reference","name":"NgxImageEditorComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"NgxImageEditorModule"}}}}},"NgxImageEditorComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":14,"character":1},"arguments":[{"selector":"ngx-image-editor","template":"\n      <div class=\"ngx-image-editor-component1\" fxLayout=\"column\" fxLayoutAlign=\"center stretch\">\n          <div mat-dialog-title class=\"photo-editor-header\">\n                         <button [hidden]=\"croppedImage\" mat-icon-button color=\"accent\" matTooltip=\"Crop image\"\n                      (click)=\"handleCrop()\">\n                  <mat-icon>crop</mat-icon>\n              </button>\n             </div>\n\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]=\"previewImageURL\">\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\n          <div\n                  class=\"dialog-button-actions\"\n                  mat-dialog-actions\n                  fxLayout=\"column\"\n                  align=\"start\"\n                  fxFlex=\"nogrow\">\n\n              <div class=\"image-detail-toolbar\" fxFlex=\"100\">\n                  <div class=\"image-dimensions\"><b>Width:</b> <span>{{imageWidth}}px</span> <b>Height:</b> <span>{{imageHeight}}px</span></div>\n                  <span fxFlex></span>\n                  <div class=\"image-zoom\">\n                      <button mat-icon-button color=\"accent\" >\n                         <span>{{sliderValue}}%</span>\n                      </button>\n                      <mat-slider vertical [value]=\"sliderValue\" (input)=\"zoomChange($event.value)\" thumbLabel></mat-slider>\n                      <button mat-icon-button color=\"accent\" >\n                         zoom\n                      </button>\n                  </div>\n              </div>\n                          <div fxLayout=\"row\" [style.visibility]=\"croppedImage ? 'hidden' : 'visible'\">\n                  <mat-button-toggle-group\n                          #dragMode=\"matButtonToggleGroup\"\n                          (change)=\"cropper.setDragMode($event.value)\"\n                          value=\"move\">\n                      <mat-button-toggle value=\"move\" matTooltip=\"Move mode\">\n                          <mat-icon>open_with</mat-icon>\n                      </mat-button-toggle>\n                      <mat-button-toggle value=\"crop\" matTooltip=\"Crop mode\">\n                          <mat-icon>crop</mat-icon>\n                      </mat-button-toggle>\n                  </mat-button-toggle-group>\n\n                  <mat-button-toggle-group\n                          #selectRatio=\"matButtonToggleGroup\"\n                          (change)=\"setRatio($event.value)\"\n                          value=\"{{ratios[0].value}}\">\n                      <mat-button-toggle *ngFor=\"let ratio of ratios\" value=\"{{ratio.value}}\" matTooltip=\"Aspect ratio\">\n                          {{ratio.text}}\n                      </mat-button-toggle>\n                  </mat-button-toggle-group>\n\n              </div>\n     </div>\n\n  <div class=\"cropped-image-buttons\" [style.visibility]=\"!croppedImage ? 'hidden' : 'visible'\">\n                                  <button mat-raised-button id=\"cropimage\" color=\"accent\" (click)=\"undoCrop()\">\n                                         <span>Undo</span>\n                  </button>\n    <button mat-raised-button id=\"saveimage\" color=\"accent\" (click)=\"saveImage()\">\n                                        <span>Apply</span>\n                  </button>\n            </div>\n     </div>\n\n  ","styles":["\n\n      .ngx-image-editor-component .photo-editor-header {\n          display: flex;\n          justify-content: space-around;\n          width: 7%;\n          padding: 0;\n          z-index: 100;\n          margin: 0;\n   top: 0;\n  position: relative;\n   }\n\n      .ngx-image-editor-component .photo-editor-header > .mat-icon {\n          padding: 0 10px;\n      }\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\n      .ngx-image-editor-component mat-progress-spinner {\n          position: absolute;\n      }\n\n      .ngx-image-editor-component .dialog-crop-container {\n          width: 800px;\n          height: 400px;\n          overflow: hidden;\n      }\n\n      .ngx-image-editor-component .cropper-bg {\n          background-image: none !important;\n      }\n\n      .ngx-image-editor-component .cropper-bg > .cropper-modal {\n          opacity: 1 !important;\n          background: none;\n      }\n\n      .ngx-image-editor-component .img-container {\n          width: 800px !important;\n          height: 400px !important;\n      }\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\n      .ngx-image-editor-component .dialog-button-actions {\n          position: relative;\n          padding: 0;\n      }\n\n      .ngx-image-editor-component .dialog-button-actions:last-child {\n          margin: 0;\n      }\n\n      .ngx-image-editor-component .dialog-button-actions > DIV mat-button-toggle-group {\n          margin: 20px;\n      }\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\n      .ngx-image-editor-component .dialog-button-actions > .canvas-config {\n          padding: 5px;\n          margin: 0 20px;\n      }\n\n      \n\n      .ngx-image-editor-component .dialog-button-actions > .canvas-config md2-colorpicker {\n          width: 200px !important;\n      }\n      \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      \n      .ngx-image-editor-component .dialog-button-actions .image-detail-toolbar > .image-zoom .mat-slider-vertical .mat-slider-wrapper .mat-slider-thumb-container {\n          cursor: grab;\n      }\n      \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   \n\n\n\n\n\n\n\n\n\n\n  "],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":18,"character":17},"member":"None"}}]}],"members":{"previewImage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":40,"character":3},"arguments":["previewimg"]}]}],"croppedImg":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":43,"character":3},"arguments":["croppedImg"]}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"file":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":51,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"handleStateConfig":[{"__symbolic":"method"}],"convertFileToBase64":[{"__symbolic":"method"}],"addRatios":[{"__symbolic":"method"}],"handleCrop":[{"__symbolic":"method"}],"undoCrop":[{"__symbolic":"method"}],"saveImage":[{"__symbolic":"method"}],"initializeCropper":[{"__symbolic":"method"}],"setRatio":[{"__symbolic":"method"}],"zoomChange":[{"__symbolic":"method"}],"setImageWidth":[{"__symbolic":"method"}],"setImageHeight":[{"__symbolic":"method"}],"setCropBoxWidth":[{"__symbolic":"method"}],"setCropBoxHeight":[{"__symbolic":"method"}],"centerCanvas":[{"__symbolic":"method"}]}},"IEditorOptions":{"__symbolic":"interface"},"RatioType":{"__symbolic":"interface"},"EditorOptions":{"__symbolic":"class","members":{}},"NgxAspectRatio":{"__symbolic":"interface"},"NGX_DEFAULT_RATIOS":[{"value":1.7777777777777777,"text":"16:9"},{"value":1.3333333333333333,"text":"4:3"},{"value":1,"text":"1:1"},{"value":0.6666666666666666,"text":"2:3"},{"value":null,"text":"Default"}]},"origins":{"NgxImageEditorModule":"./insight-ngx-image-editor.module","NgxImageEditorComponent":"./insight-ngx-image-editor.component","IEditorOptions":"./insight-ngx-image-editor.component","RatioType":"./insight-ngx-image-editor.component","EditorOptions":"./insight-ngx-image-editor.component","NgxAspectRatio":"./insight-ngx-image-editor.component","NGX_DEFAULT_RATIOS":"./insight-ngx-image-editor.component"},"importAs":"insight-ngx-image-editor"}