ng-fancy-gui/ng-fancy-gui.metadata.json

This package contains components, for creating userinterfaces in a Angular app.

{"__symbolic":"module","version":4,"metadata":{"ImageCropperConfig":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"number"}]}]}]}},"KeywordPickerConfig":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"KeywordType"},{"__symbolic":"reference","name":"boolean"},{"__symbolic":"reference","name":"AutCompleteSource"},{"__symbolic":"error","message":"Expression form not supported","line":12,"character":31,"module":"./lib/ConfigurationModels/keyword-picker-config"},{"__symbolic":"reference","name":"string"}]}]}},"AutoCompleteSourceType":{"IdValueArray":0,"StringArray":1,"Object":2},"AutCompleteSource":{"Input":0,"ApiEndpoint":1},"KeywordType":{"String":0,"KeyValue":1},"FileService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"getBase64":[{"__symbolic":"method"}],"dataURLtoFile":[{"__symbolic":"method"}],"getBinary":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"NgFancyGUIModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":15,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"InputBetweenComponent"},{"__symbolic":"reference","name":"ImageCropperComponent"},{"__symbolic":"reference","name":"InputImageComponent"},{"__symbolic":"reference","name":"InputRangeComponent"},{"__symbolic":"reference","name":"KeywordPickerComponent"},{"__symbolic":"reference","name":"RotationSliderComponent"},{"__symbolic":"reference","name":"SliderInfiniteComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":26,"character":4},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClientModule","line":27,"character":4}],"exports":[{"__symbolic":"reference","name":"InputBetweenComponent"},{"__symbolic":"reference","name":"ImageCropperComponent"},{"__symbolic":"reference","name":"InputImageComponent"},{"__symbolic":"reference","name":"InputRangeComponent"},{"__symbolic":"reference","name":"KeywordPickerComponent"},{"__symbolic":"reference","name":"RotationSliderComponent"},{"__symbolic":"reference","name":"SliderInfiniteComponent"}]}]}],"members":{}},"InputBetweenComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"fg-input-between","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":9,"character":15},"useExisting":{"__symbolic":"reference","name":"InputBetweenComponent"},"multi":true}],"template":"<div class=\"inputWrap noselect\"\n     (touchmove)=\"processTouchEvent($event)\"\n     (mousemove)=\"processMouseEvent($event)\"\n     (mouseleave)=\"tearMin.classList.remove('active');tearMax.classList.remove('active');handleMouseLeave($event)\"\n     (mouseup)=\"tearMax.classList.remove('active');maxTearMouseDown=false;tearMin.classList.remove('active');minTearMouseDown=false;\"\n     (touchend)=\"tearMin.classList.remove('active');tearMax.classList.remove('active');handleTouchEnd($event)\"\n>\n  <div class=\"fakeInputRange\">\n    <div #tearMin class=\"tear\" [style.transform]=\"tearMinStyle\"\n    [class.up]=\"minValue> 0 && maxValue===max\"\n         (mousedown)=\"tearMinDown()\"\n         (touchstart)=\"tearMinDown()\"\n    >\n      <span>{{minValue}}</span>\n    </div>\n\n    <div #tearMax class=\"tear\" [style.transform]=\"tearMaxStyle\"\n         (mousedown)=\"tearMaxDown()\"\n         (touchstart)=\"tearMaxDown()\"\n    >\n      <span>{{maxValue}}</span>\n    </div>\n\n    <div class=\"sliderLine\">\n      <div class=\"sliderBackground\"></div>\n      <div [style.width]=\"sliderLineWidthStyle\" [style.left]=\"sliderLineLeftStyle\" class=\"sliderActive\"></div>\n    </div>\n  </div>\n</div>\n\n\n\n","styles":[":host{display:block;position:relative}:host *{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.up{z-index:10}span{display:block;font-size:22px}.inputWrap{padding-top:32px}.inputWrap .fakeInputRange{position:relative}.inputWrap .fakeInputRange .tear{position:absolute;transition:width .5s,height .5s;width:30px;height:30px;border-radius:0 50% 50%;border:3px solid;transform:rotate(-135deg)}.inputWrap .fakeInputRange .tear span{color:#fff;transition:left .5s,top .5s,font-size .5s;font-size:9px;position:absolute;left:11px;top:11px;transform:translate(-50%,-50%) rotate(-225deg)}.inputWrap .fakeInputRange .tear.active{z-index:7;width:50px;height:50px}.inputWrap .fakeInputRange .tear.active span{font-size:19px;left:20px;top:20px}.sliderLine{margin-top:20px;position:relative}.sliderLine .sliderBackground{width:100%;height:2px;background-color:gray}.sliderLine .sliderActive{position:absolute;height:2px;top:0;left:0}input{opacity:0;top:0;left:0;z-index:1;position:absolute;margin-top:7px;height:100%;font-size:21px;border:1px solid}input.invalid{border:1px solid}"]}]}],"members":{"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"max":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"min":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"tearMax":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":21,"character":3},"arguments":["tearMax"]}]}],"tearMin":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":22,"character":3},"arguments":["tearMin"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":39,"character":28},{"__symbolic":"reference","module":"@angular/platform-browser","name":"DomSanitizer","line":39,"character":58}]}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"resize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":83,"character":3},"arguments":["window:resize"]}]}],"handleMouseLeave":[{"__symbolic":"method"}],"handleTouchEnd":[{"__symbolic":"method"}],"calcStyle":[{"__symbolic":"method"}],"calcSliderLineStyle":[{"__symbolic":"method"}],"disableScroll":[{"__symbolic":"method"}],"enableScroll":[{"__symbolic":"method"}],"tearMinDown":[{"__symbolic":"method"}],"tearMaxDown":[{"__symbolic":"method"}],"processMouseEventTearMin":[{"__symbolic":"method"}],"processMouseEventTearMax":[{"__symbolic":"method"}],"processMouseEvent":[{"__symbolic":"method"}],"processTouchEventTearMin":[{"__symbolic":"method"}],"processTouchEventTearMax":[{"__symbolic":"method"}],"processTouchEvent":[{"__symbolic":"method"}],"calcMinValue":[{"__symbolic":"method"}],"calcMaxValue":[{"__symbolic":"method"}]}},"ImageCropperComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"fg-image-cropper","template":"<ng-container  [class.hidden]=\"imageCroper && imageCroper.cropImage.loaded\">\n  <div [class.hidden]=\"!toSmall\" class=\"tosmallOverlay\">\n    <div>\n      <div>\n       <h2>Screen is to small</h2>\n      </div>\n      <div (click)=\"cancleE()\">\n        cancle\n      </div>\n    </div>\n  </div>\n  <div class=\"topSection\">\n    <div class=\"inner\">\n      <h2>Crop Your Image</h2>\n      <button (click)=\"rotate90Deg()\" class=\"right\" type=\"button\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n          <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n          <path\n            d=\"M7.11 8.53L5.7 7.11C4.8 8.27 4.24 9.61 4.07 11h2.02c.14-.87.49-1.72 1.02-2.47zM6.09 13H4.07c.17 1.39.72 2.73 1.62 3.89l1.41-1.42c-.52-.75-.87-1.59-1.01-2.47zm1.01 5.32c1.16.9 2.51 1.44 3.9 1.61V17.9c-.87-.15-1.71-.49-2.46-1.03L7.1 18.32zM13 4.07V1L8.45 5.55 13 10V6.09c2.84.48 5 2.94 5 5.91s-2.16 5.43-5 5.91v2.02c3.95-.49 7-3.85 7-7.93s-3.05-7.44-7-7.93z\" />\n        </svg>\n      </button>\n\n      <button type=\"button\" (click)=\"toggleRaster()\" class=\"left\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"300\" height=\"300\" viewBox=\"0 0 300 300\">\n          <g id=\"Gruppe_48\" data-name=\"Gruppe 48\" transform=\"translate(-467.5 -968.5)\">\n            <g id=\"Gruppe_47\" data-name=\"Gruppe 47\" transform=\"translate(3 443)\">\n              <line id=\"Linie_3\" data-name=\"Linie 3\" y2=\"300\" transform=\"translate(559.5 525.5)\" fill=\"none\"\n                stroke=\"#000\" stroke-width=\"20\" />\n              <line id=\"Linie_4\" data-name=\"Linie 4\" y2=\"300\" transform=\"translate(669.5 525.5)\" fill=\"none\"\n                stroke=\"#000\" stroke-width=\"20\" />\n            </g>\n            <g id=\"Gruppe_46\" data-name=\"Gruppe 46\" transform=\"translate(135 416)\">\n              <line id=\"Linie_5\" data-name=\"Linie 5\" x2=\"300\" transform=\"translate(332.5 647.5)\" fill=\"none\"\n                stroke=\"#000\" stroke-width=\"20\" />\n              <line id=\"Linie_6\" data-name=\"Linie 6\" x2=\"300\" transform=\"translate(332.5 757.5)\" fill=\"none\"\n                stroke=\"#000\" stroke-width=\"20\" />\n            </g>\n          </g>\n        </svg>\n      </button>\n    </div>\n  </div>\n  <div class=\"canvasWrap\">\n    <canvas #cropperCanvas></canvas>\n    <canvas #offscreenCanvas style=\"display: none\"></canvas>\n  </div>\n  <div class=\"container\">\n    <fg-slider-infinite (change)=\"zoom($event)\"></fg-slider-infinite>\n    <div class=\"buttonWrapp\">\n      <button (click)=\"continueE()\" class=\"btn\" type=\"button\">Continue</button>\n      <button (click)=\"cancleE()\" class=\"btn\" type=\"button\">Cancle</button>\n    </div>\n  </div>\n</ng-container>","styles":[".buttonWrapp{display:flex;justify-content:space-between}:host{overflow:hidden;display:block}:host *{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.hidden{display:none!important}.tosmallOverlay{text-align:center;width:100%;height:100%;background-color:rgba(0,0,0,.767);color:#fff;display:flex;justify-content:center;align-items:center}canvas{border:1px solid #000}fg-slider-infinite{margin-top:10px;display:block}button{touch-action:none;margin-top:10px}.btn{color:#fff;flex-basis:48%;font-size:20px;border:none;height:50px;padding:9px auto}.canvasWrap{text-align:center;max-width:1000px;margin:0 auto}.topSection{border-bottom:1px solid gray;position:relative;text-align:center}.topSection .inner{margin:0 auto;width:100%;max-width:500px;height:100%;position:relative}.topSection .inner h2{display:inline-block;padding-top:10px;padding-bottom:10px}.topSection .inner button{background-color:transparent;border:none;outline:0;margin-top:0;height:100%;width:52px;position:absolute}.topSection .inner button.left{left:0}.topSection .inner button.right{right:0}.topSection .inner button svg{margin-top:5px;width:30px;height:auto}.topSection .inner button:hover{opacity:.75}.container{max-width:1000px;padding:0 20px;margin:0 auto}"]}]}],"members":{"cropperCanvas":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":12,"character":3},"arguments":["cropperCanvas"]}]}],"offscreenCanvas":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":13,"character":3},"arguments":["offscreenCanvas"]}]}],"imageSrc":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"continue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":18,"character":3}}]}],"cancle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":19,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":27,"character":28}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"zoom":[{"__symbolic":"method"}],"startLoop":[{"__symbolic":"method"}],"resize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":82,"character":3},"arguments":["window:resize"]}]}],"ngOnDestroy":[{"__symbolic":"method"}],"pinch":[{"__symbolic":"method"}],"pinchEnd":[{"__symbolic":"method"}],"toggleRaster":[{"__symbolic":"method"}],"rotate90Deg":[{"__symbolic":"method"}],"cancleE":[{"__symbolic":"method"}],"continueE":[{"__symbolic":"method"}]}},"InputImageComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"fg-input-image","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":16,"character":15},"useExisting":{"__symbolic":"reference","name":"InputImageComponent"},"multi":true}],"template":"\n\n<div [class.invalid]=\"invalid\" [style.height]=\"previewHeightStyle\" *ngIf=\"value===null&&pending===false\"\n     class=\"imageInputWrapper noselect\" (click)=\"imageInput.click()\">\n  <div class=\"placeholderWrapper\">\n    <div class=\"icon\">\n      <svg class=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"27.949\" height=\"27.949\" viewBox=\"0 0 27.949 27.949\">\n        <path id=\"ic_add_24px\" d=\"M32.949,20.971H20.971V32.949H16.978V20.971H5V16.978H16.978V5h3.993V16.978H32.949Z\"\n              transform=\"translate(-5 -5)\"/>\n      </svg>\n    </div>\n    <div class=\"text\">Add image</div>\n  </div>\n</div>\n\n<div  [style.height]=\"previewHeightStyle\"\n     [style.background-image]=\"'url('+previewImageUrl+')'\" *ngIf=\"value!==null&&pending===false\"\n     class=\"imageInputWrapper withImage noselect\" (click)=\"imageInput.click()\">\n  <div class=\"placeholderWrapper\">\n    <div class=\"icon\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n        <path\n          d=\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z\"/>\n        <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\n      </svg>\n    </div>\n    <div class=\"text\">Change image</div>\n  </div>\n</div>\n\n<div  [style.height]=\"previewHeightStyle\" *ngIf=\"pending===true\"\n     class=\"imageInputWrapper withImage noselect\" (click)=\"imageInput.click()\">\n  <div class=\"placeholderWrapper\">\n    <div class=\"icon\">\n      <div class=\"spinner\">\n        <div class=\"rect1\"></div>\n        <div class=\"rect2\"></div>\n        <div class=\"rect3\"></div>\n        <div class=\"rect4\"></div>\n        <div class=\"rect5\"></div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<input class=\"hidden\"  (change)=\"openCropImageDialog($event);\" type=\"file\" accept=\"image/jpeg\"\n       #imageInput>\n\n<fg-image-cropper *ngIf=\"crop\"\n                  [config]=\"cropperConfig\"\n                  (cancle)=\"hideImageCroper();markAsTouched(value)\"\n                  (continue)=\"showImage($event);\"\n                  [imageSrc]=\"cropImageSrc\">\n</fg-image-cropper>\n\n","styles":[":host{display:block}span{color:#000;display:block;font-size:22px}.hidden{display:none}.imageInputWrapper{position:relative;width:100%;height:100px;border:1px solid gray;cursor:pointer;margin-top:7px;background-size:cover}.imageInputWrapper:hover{opacity:.75}.imageInputWrapper.invalid{border:1px solid red}.imageInputWrapper.withImage .placeholderWrapper .icon{fill:#fff}.imageInputWrapper.withImage .placeholderWrapper .text{color:#fff}.imageInputWrapper .placeholderWrapper{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.imageInputWrapper .placeholderWrapper .icon{fill:#000}.imageInputWrapper .placeholderWrapper .text.dark{color:#000}fg-image-cropper{top:0;left:0;background-color:#fff;width:100%;height:100%;position:fixed;z-index:1}"]}]}],"members":{"invalid":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"imageInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":28,"character":3},"arguments":["imageInput"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":50,"character":27},{"__symbolic":"reference","name":"FileService"},{"__symbolic":"reference","module":"@angular/platform-browser","name":"DomSanitizer","line":50,"character":91}]}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"change":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"resize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":87,"character":3},"arguments":["window:resize"]}]}],"openCropImageDialog":[{"__symbolic":"method"}],"showImage":[{"__symbolic":"method"}],"hideImageCroper":[{"__symbolic":"method"}]}},"InputRangeComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"fg-input-range","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":10,"character":15},"useExisting":{"__symbolic":"reference","name":"InputRangeComponent"},"multi":true}],"template":"\n\n<div class=\"inputWrap noselect\"\n     (mousedown)=\"tear.classList.add('active');processMouseEvent($event);mouseDown=true\"\n     (mouseup)=\"tear.classList.remove('active');mouseDown=false\"\n     (touchstart)=\"tear.classList.add('active');processTouchEvent($event)\"\n     (touchend)=\"tear.classList.remove('active')\"\n     (touchmove)=\"processTouchEvent($event)\"\n     (mousemove)=\"processMouseEvent($event, true)\"\n     (mouseleave)=\"handleMouseLeave($event);mouseDown=false;tear.classList.remove('active');\"\n>\n  <div class=\"fakeInputRange\">\n    <div #tear class=\"tear\" [style.transform]=\"trustedStyle\">\n      <span>{{value}}</span>\n    </div>\n\n    <div class=\"sliderLine\">\n      <div class=\"sliderBackground\"></div>\n      <div [style.width]=\"sliderLineWidthStyle\" class=\"sliderActive\"></div>\n    </div>\n  </div>\n</div>\n\n\n","styles":[":host{display:block;position:relative}:host *{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}span{display:block;font-size:22px}.inputWrap{padding-top:32px}.inputWrap .fakeInputRange{position:relative}.inputWrap .fakeInputRange .tear{position:absolute;transition:width .5s,height .5s;width:30px;height:30px;border-radius:0 50% 50%;border:3px solid;transform:rotate(-135deg)}.inputWrap .fakeInputRange .tear span{color:#fff;transition:left .5s,top .5s,font-size .5s;font-size:9px;position:absolute;left:11px;top:11px;transform:translate(-50%,-50%) rotate(-225deg)}.inputWrap .fakeInputRange .tear.active{width:50px;height:50px}.inputWrap .fakeInputRange .tear.active span{font-size:19px;left:20px;top:20px}.sliderLine{margin-top:20px;position:relative}.sliderLine .sliderBackground{width:100%;height:2px;background-color:gray}.sliderLine .sliderActive{position:absolute;height:2px;top:0;left:0}input{opacity:0;top:0;left:0;z-index:1;position:absolute;margin-top:7px;height:100%;font-size:21px;border:1px solid}input.invalid{border:1px solid}"]}]}],"members":{"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"max":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"min":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":34,"character":28},{"__symbolic":"reference","module":"@angular/platform-browser","name":"DomSanitizer","line":34,"character":58}]}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"handleMouseLeave":[{"__symbolic":"method"}],"change":[{"__symbolic":"method"}],"changeValue":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"resize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":102,"character":3},"arguments":["window:resize"]}]}],"calcStyle":[{"__symbolic":"method"}],"disableScroll":[{"__symbolic":"method"}],"enableScroll":[{"__symbolic":"method"}],"processMouseEvent":[{"__symbolic":"method"}],"processTouchEvent":[{"__symbolic":"method"}],"calcValue":[{"__symbolic":"method"}]}},"keywordsRequired":{"__symbolic":"function"},"KeywordPickerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":24,"character":1},"arguments":[{"selector":"fg-keyword-picker","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":30,"character":15},"useExisting":{"__symbolic":"reference","name":"KeywordPickerComponent"},"multi":true}],"template":"\n\n<div [class.invalid]=\"invalid\" class=\"areaListBox\" (click)=\"keywordInput.focus()\" #keywordWrap>\n  <div class=\"areaWrapWrap noselect\" *ngFor=\"let p of keyWords;let i = index\">\n    <div class=\"areaWrap noselect\">\n      <span class=\"areaLabel\">\n        <ng-container *ngIf=\"renderKeywordPlain\">\n          {{p}}\n        </ng-container>\n        <ng-container *ngIf=\"!renderKeywordPlain\">\n          {{p.value}}\n        </ng-container>\n      </span>\n      <span class=\"deleteArea\" (click)=\"deletePlace(i)\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n          <path\n            d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" />\n          <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n        </svg>\n      </span>\n    </div>\n  </div>\n  <input (keydown.enter)=\"$event.preventDefault()\" [value]=\"''\" placeholder=\"{{dinamicPlaceholder}}\" (focusout)=\"keywordWrap.classList.remove('focus')\"\n    (focus)=\"keywordWrap.classList.add('focus');showAutoCompleteBox=true;autoCompleteResult = this.getAutoCompleteResult(keywordInput.value);\"\n     (keydown)=\"trim(keywordInput)\" (blur)=\"showAutoCompleteBox=false;\"\n    (keyup)=\"handleKeyUp($event, keywordInput)\" #keywordInput type=\"text\">\n</div>\n<div (mouseenter)=\"handleMouseEnter()\" (mouseleave)=\"mouseOverAutoCompleteBox=false;\" (touchstart)=\"touchStarted=true\"\n  (scroll)=\"scroll()\" (touchend)=\"touchStarted=false\"\n  [class.hidden]=\"!showAutoCompleteBox&&!mouseOverAutoCompleteBox&&!touchStarted\" class=\"autocompleteWrap\"\n  *ngIf=\"config.autocompleteMode\">\n  <div (mouseup)=\"addToList(aci);\" (touchend)=\"addToList(aci);scrolling=false\" *ngFor=\"let aci of autoCompleteResult\">\n    <ng-container *ngIf=\"renderKeywordPlain\">\n      {{aci}}\n    </ng-container>\n    <ng-container *ngIf=\"!renderKeywordPlain\">\n      {{aci.value}}\n    </ng-container>\n  </div>\n</div>","styles":[":host{float:none;text-align:left;display:block;position:relative}:host *{box-sizing:border-box}:host .hidden{display:none}:host span{display:block;font-size:22px}:host .areaListBox{margin-top:7px;width:100%;border:1px solid;min-height:50px;padding:1px 7px 1px 0;cursor:text}:host input{height:48px;font-size:21px;border:none;outline:0;max-width:100%;padding-left:7px}:host .areaWrapWrap{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;float:left;padding-top:6px}:host .areaWrapWrap .areaWrap{cursor:default;position:relative;float:left;border-radius:5px;padding:5px 40px 5px 15px;margin-left:5px}:host .areaWrapWrap .areaWrap span{position:relative;display:block;word-break:break-all}:host .areaWrapWrap .areaWrap span.deleteArea{padding:0;position:absolute;right:5px;top:7px}:host .areaWrapWrap .areaWrap span.deleteArea svg:hover{opacity:.75;cursor:pointer}:host .autocompleteWrap{position:absolute;z-index:1;width:100%;max-height:180px;overflow-y:auto;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .autocompleteWrap>div{padding:10px 0 10px 5px}:host .autocompleteWrap::-webkit-scrollbar{width:10px}:host .autocompleteWrap::-webkit-scrollbar-thumb{border-radius:5px}:host .autocompleteWrap::-webkit-scrollbar-thumb:hover{opacity:.75}"]}]}],"members":{"input":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":39,"character":3},"arguments":["keywordInput"]}]}],"invalid":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":3}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"source":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":68,"character":28}]}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"setSourceAutocompleteSource":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"handleKeyUp":[{"__symbolic":"method"}],"handleMouseEnter":[{"__symbolic":"method"}],"addToList":[{"__symbolic":"method"}],"trim":[{"__symbolic":"method"}],"scroll":[{"__symbolic":"method"}],"deletePlace":[{"__symbolic":"method"}],"getAutoCompleteResult":[{"__symbolic":"method"}]}},"RotationSliderComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"fg-slider","template":"<div class=\"valueOuterWrapper\">\n  <div [class.visible]=\"value!==0\" class=\"valueWrapper\">\n   \n  <img *ngIf=\"iconPath\" src=\"{{iconPath}}\" />\n    <!--<div class=\"valueWrapper visible\">-->\n    <span class=\"value\">{{renderingValue}}{{additive}}</span>\n    <button (click)=\"resetValue()\" class=\"resetButton\" type=\"button\">x</button>\n  </div>\n</div>\n<div class=\"rotationSliderCanvasWrap\">\n  <canvas #canvas></canvas>\n</div>\n","styles":[":host{display:block;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;padding-top:35px}.valueOuterWrapper{position:absolute;top:0;left:50%;transform:translate(-50%,0)}.valueOuterWrapper .valueWrapper{border-radius:7px;padding:5px 15px 5px 18px;position:relative;width:25px;height:25px;margin:0 auto;transition:width .5s,background-color .5s}.valueOuterWrapper .valueWrapper img{width:25px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.valueOuterWrapper .valueWrapper .value{margin-top:5px;text-align:center;display:none;font-size:13px;font-weight:700}.valueOuterWrapper .valueWrapper .resetButton{position:absolute;display:none;color:#fff;background-color:#000;width:15px;height:15px;border-radius:20px;border:none;outline:0;right:8px;font-size:9px;top:50%;transform:translate(0,-50%)}.valueOuterWrapper .valueWrapper.visible{background-color:#aaa9a9;width:100px}.valueOuterWrapper .valueWrapper.visible img{position:absolute;left:17px;width:20px;display:block}.valueOuterWrapper .valueWrapper.visible .resetButton,.valueOuterWrapper .valueWrapper.visible .value{display:block}"]}]}],"members":{"iconPath":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"additive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"max":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"min":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":16,"character":3}}]}],"canvasVc":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":20,"character":3},"arguments":["canvas"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"clear":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"initRenderingLoop":[{"__symbolic":"method"}],"initMouseEvents":[{"__symbolic":"method"}],"resize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":123,"character":3},"arguments":["window:resize"]}]}],"render":[{"__symbolic":"method"}],"addHorizontalLines":[{"__symbolic":"method"}],"resetValue":[{"__symbolic":"method"}]}},"SliderInfiniteComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"fg-slider-infinite","template":"<div class=\"rotationSliderCanvasWrap\">\n  <canvas #canvas></canvas>\n</div>\n","styles":[":host{display:block;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative}.valueOuterWrapper{position:absolute;top:0;left:50%;transform:translate(-50%,0)}.valueOuterWrapper .valueWrapper{border-radius:7px;padding:5px 15px 5px 18px;position:relative;width:25px;height:25px;margin:0 auto;transition:width .5s,background-color .5s}.valueOuterWrapper .valueWrapper svg{width:25px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.valueOuterWrapper .valueWrapper .value{margin-top:5px;text-align:center;display:none;font-size:13px;font-weight:700}.valueOuterWrapper .valueWrapper .resetButton{position:absolute;display:none;color:#fff;background-color:#000;width:15px;height:15px;border-radius:20px;border:none;outline:0;right:8px;font-size:9px;top:50%;transform:translate(0,-50%)}.valueOuterWrapper .valueWrapper.visible{background-color:#aaa9a9;width:100px}.valueOuterWrapper .valueWrapper.visible svg{position:absolute;left:17px;width:20px;display:block}.valueOuterWrapper .valueWrapper.visible .resetButton,.valueOuterWrapper .valueWrapper.visible .value{display:block}"]}]}],"members":{"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":12,"character":3}}]}],"canvasVc":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":14,"character":3},"arguments":["canvas"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"clear":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"initRenderingLoop":[{"__symbolic":"method"}],"initMouseEvents":[{"__symbolic":"method"}],"addMissingLines":[{"__symbolic":"method"}],"resize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":136,"character":3},"arguments":["window:resize"]}]}],"render":[{"__symbolic":"method"}],"addHorizontalLines":[{"__symbolic":"method"}],"resetValue":[{"__symbolic":"method"}]}}},"origins":{"ImageCropperConfig":"./lib/ConfigurationModels/image-cropper-config","KeywordPickerConfig":"./lib/ConfigurationModels/keyword-picker-config","AutoCompleteSourceType":"./lib/enums/auto-complete-source-type.enum","AutCompleteSource":"./lib/enums/auto-complete-source.enum","KeywordType":"./lib/enums/keyword-type.enum","FileService":"./lib/file.service","NgFancyGUIModule":"./lib/ng-fancy-gui.module","InputBetweenComponent":"./lib/input-between/input-between/input-between.component","ImageCropperComponent":"./lib/image-cropper/image-cropper/image-cropper.component","InputImageComponent":"./lib/input-image/input-image/input-image.component","InputRangeComponent":"./lib/input-range/input-range/input-range.component","keywordsRequired":"./lib/keyword-picker/keyword-picker/keyword-picker.component","KeywordPickerComponent":"./lib/keyword-picker/keyword-picker/keyword-picker.component","RotationSliderComponent":"./lib/rotation-slider/rotation-slider.component","SliderInfiniteComponent":"./lib/slider-infinite/slider-infinite.component"},"importAs":"ng-fancy-gui"}