ngx-wapp-components 3.2.27-alpha.1 → 3.2.27-alpha.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -12010,7 +12010,7 @@ class CarouselComponent {
12010
12010
  this.onSetImageEvent.emit(true);
12011
12011
  }
12012
12012
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: CarouselComponent, deps: [{ token: i1$a.DeviceDetectorService }], target: i0.ɵɵFactoryTarget.Component }); }
12013
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: CarouselComponent, isStandalone: false, selector: "wapp-carousel", inputs: { images: "images", allowThumbnail: "allowThumbnail", infiniteCarousel: "infiniteCarousel", forceMobile: "forceMobile", height: "height", isDevModeActive: "isDevModeActive", isNoImage: "isNoImage", onHoverImageTooltip: "onHoverImageTooltip" }, outputs: { onSetImageEvent: "onSetImageEvent" }, viewQueries: [{ propertyName: "thumbnail", first: true, predicate: ["thumbnail"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"carousel-container\"\r\n [style.height.px]=\"height?height:null\"\r\n [style.margin-bottom]=\"height?'.25rem':null\"\r\n (touchstart)=\"posIni = $event.changedTouches[0].pageX\"\r\n (touchend)=\"move($event.changedTouches[0].pageX)\" \r\n [ngClass]=\"{'mobile': forceMobile}\">\r\n @if(forceMobile){\r\n <div class=\"carousel-top-left-icon\">\r\n <svg width=\"30\" height=\"30\" viewBox=\"0 0 30 30\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"30\" height=\"30\" rx=\"15\" fill=\"white\" fill-opacity=\"0.63\"/>\r\n <path d=\"M20.8337 15H9.16699\" stroke=\"#1F2224\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M13.2503 19.0807L9.16699 14.9974L13.2503 10.9141\" stroke=\"#1F2224\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n }\r\n <!--carousel image container-->\r\n @for(img of images; track img; let i = $index; let first = $first){\r\n <div class=\"carousel-image-container\"\r\n [ngClass]=\"height ? 'fixed-height' : null\"\r\n [@animImageSlider]=\"slideControl[i]\" (click)=\"isDevModeActive ? onSetImage() : ''\" [pTooltip]=\"onHoverImageTooltip\" tooltipPosition=\"top\" [tooltipDisabled]=\"!isDevModeActive\">\r\n <!--carousel image-->\r\n <img #slide (load)=\"first && onLoad(slide)\" \r\n [ngClass]=\"{'default-image' : isNoImage, 'edit-image' : isDevModeActive}\"\r\n [src]=\"img.path\"/>\r\n </div>\r\n }\r\n <!--previous button-->\r\n @if(showNavigation){\r\n <button type=\"button\"\r\n class=\"carousel-previous-button\"\r\n (click)=\"change('right')\">\r\n <span class=\"carousel-previous-icon\"></span>\r\n </button>\r\n }\r\n <!--next button-->\r\n @if(showNavigation){\r\n <button type=\"button\"\r\n class=\"carousel-next-button\"\r\n (click)=\"change('left')\">\r\n <span class=\"carousel-next-icon\"></span>\r\n </button>\r\n }\r\n <!--button indicators-->\r\n @if(showIndicators){\r\n <div class=\"carousel-indicator-container\">\r\n <div class=\"carousel-indicator-buttons\">\r\n @for(img of images; track img; let i = $index){\r\n <button \r\n [style.opacity]=\"i == counter ? 1 : 0.5\"\r\n (click)=\"setIndex(i)\"></button>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n<!--thumbnail indicators-->\r\n@if(allowThumbnail){\r\n <div #thumbnail class=\"carousel-thumbnail-container\">\r\n <div class=\"carousel-thumbnails\"\r\n [@animationThumbnail]=\"{\r\n value: thumbnailAnimation,\r\n params: { margin: thumbnailMargin + 'px' }}\">\r\n @for(img of images; track img; let i = $index){\r\n <img \r\n [style.width.px]=\"thumbnailWidth\"\r\n [style.margin-right.px]=\"thumbnailMarginRigth\"\r\n [style.opacity]=\"i == counter ? 1 : 0.5\"\r\n (load)=\"onLoadThumbnail()\"\r\n (click)=\"setIndex(i)\"\r\n [src]=\"img.path\" />\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [".carousel-container{position:relative;display:flex;overflow:hidden;margin-left:auto;margin-right:auto;align-items:center;width:450px;max-width:100%}.carousel-container:not(:has(.carousel-top-left-icon)){width:auto}.carousel-top-left-icon{position:absolute;top:15px;left:15px;cursor:pointer;z-index:10}.carousel-image-container{width:100%;position:relative}.carousel-image-container img{max-width:450px;width:-webkit-fill-available;width:stretch}@media(min-width:600px)and (max-width:959px){.carousel-image-container img{min-width:100%}.carousel-container{width:unset}}@media(max-width:599px){.carousel-image-container img{min-width:100%}.carousel-container{width:unset}}.carousel-image-container img.fixed-height{position:absolute;inset:-100% 0;margin:auto}.carousel-container:after{display:block;clear:both;content:\"\"}.carousel-container div{float:left;margin-right:-100%;font-size:0}.carousel-previous-button:hover,.carousel-next-button:hover,.carousel-previous-button:focus,.carousel-next-button:focus{opacity:.9}.carousel-previous-button,.carousel-next-button{position:absolute;top:0;bottom:0;width:15%;display:flex;align-items:center;justify-content:center;background-color:transparent;border:0;color:#fff;opacity:.5;transition:opacity .15s ease;cursor:pointer}.carousel-next-button{right:0}.carousel-next-icon{background-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>\")}.carousel-previous-icon{background-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-chevron-left' viewBox='0 0 16 16'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>\")}.carousel-next-icon,.carousel-previous-icon{display:inline-block;width:2rem;height:2rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.carousel-indicator-container{width:100%;overflow:hidden}.carousel-indicator-buttons{display:flex;position:absolute;right:0;bottom:0;left:0;z-index:2;justify-content:center;padding:0;margin-right:15%!important;margin-bottom:1rem;margin-left:15%;list-style:none}.carousel-indicator-buttons button{box-sizing:content-box;flex:0 1 auto;width:30px;height:3px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-clip:padding-box;border:0;border-top:10px solid transparent;border-bottom:10px solid transparent}.carousel-indicator-buttons button:hover{opacity:1!important}.carousel-thumbnail-container{width:100%;overflow:hidden}.carousel-thumbnails{display:flex}.carousel-thumbnails img{cursor:pointer}.carousel-thumbnails img:hover{opacity:1!important}.default-image{padding:68px}.edit-image{cursor:pointer}::ng-deep .mobile.carousel-container{width:unset!important}::ng-deep .mobile.carousel-container .carousel-image-container{width:100%!important;position:relative!important}::ng-deep .mobile.carousel-container .carousel-image-container img{width:100%!important;height:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "directive", type: i4.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }], animations: [
12013
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: CarouselComponent, isStandalone: false, selector: "wapp-carousel", inputs: { images: "images", allowThumbnail: "allowThumbnail", infiniteCarousel: "infiniteCarousel", forceMobile: "forceMobile", height: "height", isDevModeActive: "isDevModeActive", isNoImage: "isNoImage", onHoverImageTooltip: "onHoverImageTooltip" }, outputs: { onSetImageEvent: "onSetImageEvent" }, viewQueries: [{ propertyName: "thumbnail", first: true, predicate: ["thumbnail"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"carousel-container\"\r\n [style.height.px]=\"height?height:null\"\r\n [style.margin-bottom]=\"height?'.25rem':null\"\r\n (touchstart)=\"posIni = $event.changedTouches[0].pageX\"\r\n (touchend)=\"move($event.changedTouches[0].pageX)\" \r\n [ngClass]=\"{'mobile': forceMobile}\">\r\n @if(forceMobile){\r\n <div class=\"carousel-top-left-icon\">\r\n <svg width=\"30\" height=\"30\" viewBox=\"0 0 30 30\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"30\" height=\"30\" rx=\"15\" fill=\"white\" fill-opacity=\"0.63\"/>\r\n <path d=\"M20.8337 15H9.16699\" stroke=\"#1F2224\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M13.2503 19.0807L9.16699 14.9974L13.2503 10.9141\" stroke=\"#1F2224\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n }\r\n <!--carousel image container-->\r\n @for(img of images; track img; let i = $index; let first = $first){\r\n <div class=\"carousel-image-container\"\r\n [ngClass]=\"height ? 'fixed-height' : null\"\r\n [@animImageSlider]=\"slideControl[i]\" (click)=\"isDevModeActive ? onSetImage() : ''\" [pTooltip]=\"onHoverImageTooltip\" tooltipPosition=\"top\" [tooltipDisabled]=\"!isDevModeActive\">\r\n <!--carousel image-->\r\n <img #slide (load)=\"first && onLoad(slide)\" \r\n [ngClass]=\"{'default-image' : isNoImage, 'edit-image' : isDevModeActive}\"\r\n [src]=\"img.path\"/>\r\n </div>\r\n }\r\n <!--previous button-->\r\n @if(showNavigation){\r\n <button type=\"button\"\r\n class=\"carousel-previous-button\"\r\n (click)=\"change('right')\">\r\n <span class=\"carousel-previous-icon\"></span>\r\n </button>\r\n }\r\n <!--next button-->\r\n @if(showNavigation){\r\n <button type=\"button\"\r\n class=\"carousel-next-button\"\r\n (click)=\"change('left')\">\r\n <span class=\"carousel-next-icon\"></span>\r\n </button>\r\n }\r\n <!--button indicators-->\r\n @if(showIndicators){\r\n <div class=\"carousel-indicator-container\">\r\n <div class=\"carousel-indicator-buttons\">\r\n @for(img of images; track img; let i = $index){\r\n <button \r\n [style.opacity]=\"i == counter ? 1 : 0.5\"\r\n (click)=\"setIndex(i)\"></button>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n<!--thumbnail indicators-->\r\n@if(allowThumbnail){\r\n <div #thumbnail class=\"carousel-thumbnail-container\">\r\n <div class=\"carousel-thumbnails\"\r\n [@animationThumbnail]=\"{\r\n value: thumbnailAnimation,\r\n params: { margin: thumbnailMargin + 'px' }}\">\r\n @for(img of images; track img; let i = $index){\r\n <img \r\n [style.width.px]=\"thumbnailWidth\"\r\n [style.margin-right.px]=\"thumbnailMarginRigth\"\r\n [style.opacity]=\"i == counter ? 1 : 0.5\"\r\n (load)=\"onLoadThumbnail()\"\r\n (click)=\"setIndex(i)\"\r\n [src]=\"img.path\" />\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [".carousel-container{position:relative;display:flex;overflow:hidden;margin-left:auto;margin-right:auto;align-items:center;width:450px;max-width:100%}.carousel-top-left-icon{position:absolute;top:15px;left:15px;cursor:pointer;z-index:10}.carousel-image-container{width:100%;position:relative}.carousel-image-container img{max-width:450px;width:-webkit-fill-available;width:stretch}@media(min-width:600px)and (max-width:959px){.carousel-image-container img{min-width:100%}.carousel-container{width:unset}}@media(max-width:599px){.carousel-image-container img{min-width:100%}.carousel-container{width:unset}}.carousel-image-container img.fixed-height{position:absolute;inset:-100% 0;margin:auto}.carousel-container:after{display:block;clear:both;content:\"\"}.carousel-container div{float:left;margin-right:-100%;font-size:0}.carousel-previous-button:hover,.carousel-next-button:hover,.carousel-previous-button:focus,.carousel-next-button:focus{opacity:.9}.carousel-previous-button,.carousel-next-button{position:absolute;top:0;bottom:0;width:15%;display:flex;align-items:center;justify-content:center;background-color:transparent;border:0;color:#fff;opacity:.5;transition:opacity .15s ease;cursor:pointer}.carousel-next-button{right:0}.carousel-next-icon{background-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>\")}.carousel-previous-icon{background-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-chevron-left' viewBox='0 0 16 16'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>\")}.carousel-next-icon,.carousel-previous-icon{display:inline-block;width:2rem;height:2rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.carousel-indicator-container{width:100%;overflow:hidden}.carousel-indicator-buttons{display:flex;position:absolute;right:0;bottom:0;left:0;z-index:2;justify-content:center;padding:0;margin-right:15%!important;margin-bottom:1rem;margin-left:15%;list-style:none}.carousel-indicator-buttons button{box-sizing:content-box;flex:0 1 auto;width:30px;height:3px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-clip:padding-box;border:0;border-top:10px solid transparent;border-bottom:10px solid transparent}.carousel-indicator-buttons button:hover{opacity:1!important}.carousel-thumbnail-container{width:100%;overflow:hidden}.carousel-thumbnails{display:flex}.carousel-thumbnails img{cursor:pointer}.carousel-thumbnails img:hover{opacity:1!important}.default-image{padding:68px}.edit-image{cursor:pointer}::ng-deep .mobile.carousel-container{width:unset!important}::ng-deep .mobile.carousel-container .carousel-image-container{width:100%!important;position:relative!important}::ng-deep .mobile.carousel-container .carousel-image-container img{width:100%!important;height:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "directive", type: i4.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }], animations: [
12014
12014
  trigger('animImageSlider', animationCarouselFade),
12015
12015
  trigger('animationThumbnail', animationThumbnail),
12016
12016
  ] }); }
@@ -12020,7 +12020,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
12020
12020
  args: [{ selector: 'wapp-carousel', animations: [
12021
12021
  trigger('animImageSlider', animationCarouselFade),
12022
12022
  trigger('animationThumbnail', animationThumbnail),
12023
- ], standalone: false, template: "<div class=\"carousel-container\"\r\n [style.height.px]=\"height?height:null\"\r\n [style.margin-bottom]=\"height?'.25rem':null\"\r\n (touchstart)=\"posIni = $event.changedTouches[0].pageX\"\r\n (touchend)=\"move($event.changedTouches[0].pageX)\" \r\n [ngClass]=\"{'mobile': forceMobile}\">\r\n @if(forceMobile){\r\n <div class=\"carousel-top-left-icon\">\r\n <svg width=\"30\" height=\"30\" viewBox=\"0 0 30 30\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"30\" height=\"30\" rx=\"15\" fill=\"white\" fill-opacity=\"0.63\"/>\r\n <path d=\"M20.8337 15H9.16699\" stroke=\"#1F2224\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M13.2503 19.0807L9.16699 14.9974L13.2503 10.9141\" stroke=\"#1F2224\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n }\r\n <!--carousel image container-->\r\n @for(img of images; track img; let i = $index; let first = $first){\r\n <div class=\"carousel-image-container\"\r\n [ngClass]=\"height ? 'fixed-height' : null\"\r\n [@animImageSlider]=\"slideControl[i]\" (click)=\"isDevModeActive ? onSetImage() : ''\" [pTooltip]=\"onHoverImageTooltip\" tooltipPosition=\"top\" [tooltipDisabled]=\"!isDevModeActive\">\r\n <!--carousel image-->\r\n <img #slide (load)=\"first && onLoad(slide)\" \r\n [ngClass]=\"{'default-image' : isNoImage, 'edit-image' : isDevModeActive}\"\r\n [src]=\"img.path\"/>\r\n </div>\r\n }\r\n <!--previous button-->\r\n @if(showNavigation){\r\n <button type=\"button\"\r\n class=\"carousel-previous-button\"\r\n (click)=\"change('right')\">\r\n <span class=\"carousel-previous-icon\"></span>\r\n </button>\r\n }\r\n <!--next button-->\r\n @if(showNavigation){\r\n <button type=\"button\"\r\n class=\"carousel-next-button\"\r\n (click)=\"change('left')\">\r\n <span class=\"carousel-next-icon\"></span>\r\n </button>\r\n }\r\n <!--button indicators-->\r\n @if(showIndicators){\r\n <div class=\"carousel-indicator-container\">\r\n <div class=\"carousel-indicator-buttons\">\r\n @for(img of images; track img; let i = $index){\r\n <button \r\n [style.opacity]=\"i == counter ? 1 : 0.5\"\r\n (click)=\"setIndex(i)\"></button>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n<!--thumbnail indicators-->\r\n@if(allowThumbnail){\r\n <div #thumbnail class=\"carousel-thumbnail-container\">\r\n <div class=\"carousel-thumbnails\"\r\n [@animationThumbnail]=\"{\r\n value: thumbnailAnimation,\r\n params: { margin: thumbnailMargin + 'px' }}\">\r\n @for(img of images; track img; let i = $index){\r\n <img \r\n [style.width.px]=\"thumbnailWidth\"\r\n [style.margin-right.px]=\"thumbnailMarginRigth\"\r\n [style.opacity]=\"i == counter ? 1 : 0.5\"\r\n (load)=\"onLoadThumbnail()\"\r\n (click)=\"setIndex(i)\"\r\n [src]=\"img.path\" />\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [".carousel-container{position:relative;display:flex;overflow:hidden;margin-left:auto;margin-right:auto;align-items:center;width:450px;max-width:100%}.carousel-container:not(:has(.carousel-top-left-icon)){width:auto}.carousel-top-left-icon{position:absolute;top:15px;left:15px;cursor:pointer;z-index:10}.carousel-image-container{width:100%;position:relative}.carousel-image-container img{max-width:450px;width:-webkit-fill-available;width:stretch}@media(min-width:600px)and (max-width:959px){.carousel-image-container img{min-width:100%}.carousel-container{width:unset}}@media(max-width:599px){.carousel-image-container img{min-width:100%}.carousel-container{width:unset}}.carousel-image-container img.fixed-height{position:absolute;inset:-100% 0;margin:auto}.carousel-container:after{display:block;clear:both;content:\"\"}.carousel-container div{float:left;margin-right:-100%;font-size:0}.carousel-previous-button:hover,.carousel-next-button:hover,.carousel-previous-button:focus,.carousel-next-button:focus{opacity:.9}.carousel-previous-button,.carousel-next-button{position:absolute;top:0;bottom:0;width:15%;display:flex;align-items:center;justify-content:center;background-color:transparent;border:0;color:#fff;opacity:.5;transition:opacity .15s ease;cursor:pointer}.carousel-next-button{right:0}.carousel-next-icon{background-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>\")}.carousel-previous-icon{background-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-chevron-left' viewBox='0 0 16 16'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>\")}.carousel-next-icon,.carousel-previous-icon{display:inline-block;width:2rem;height:2rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.carousel-indicator-container{width:100%;overflow:hidden}.carousel-indicator-buttons{display:flex;position:absolute;right:0;bottom:0;left:0;z-index:2;justify-content:center;padding:0;margin-right:15%!important;margin-bottom:1rem;margin-left:15%;list-style:none}.carousel-indicator-buttons button{box-sizing:content-box;flex:0 1 auto;width:30px;height:3px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-clip:padding-box;border:0;border-top:10px solid transparent;border-bottom:10px solid transparent}.carousel-indicator-buttons button:hover{opacity:1!important}.carousel-thumbnail-container{width:100%;overflow:hidden}.carousel-thumbnails{display:flex}.carousel-thumbnails img{cursor:pointer}.carousel-thumbnails img:hover{opacity:1!important}.default-image{padding:68px}.edit-image{cursor:pointer}::ng-deep .mobile.carousel-container{width:unset!important}::ng-deep .mobile.carousel-container .carousel-image-container{width:100%!important;position:relative!important}::ng-deep .mobile.carousel-container .carousel-image-container img{width:100%!important;height:auto}\n"] }]
12023
+ ], standalone: false, template: "<div class=\"carousel-container\"\r\n [style.height.px]=\"height?height:null\"\r\n [style.margin-bottom]=\"height?'.25rem':null\"\r\n (touchstart)=\"posIni = $event.changedTouches[0].pageX\"\r\n (touchend)=\"move($event.changedTouches[0].pageX)\" \r\n [ngClass]=\"{'mobile': forceMobile}\">\r\n @if(forceMobile){\r\n <div class=\"carousel-top-left-icon\">\r\n <svg width=\"30\" height=\"30\" viewBox=\"0 0 30 30\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"30\" height=\"30\" rx=\"15\" fill=\"white\" fill-opacity=\"0.63\"/>\r\n <path d=\"M20.8337 15H9.16699\" stroke=\"#1F2224\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M13.2503 19.0807L9.16699 14.9974L13.2503 10.9141\" stroke=\"#1F2224\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n }\r\n <!--carousel image container-->\r\n @for(img of images; track img; let i = $index; let first = $first){\r\n <div class=\"carousel-image-container\"\r\n [ngClass]=\"height ? 'fixed-height' : null\"\r\n [@animImageSlider]=\"slideControl[i]\" (click)=\"isDevModeActive ? onSetImage() : ''\" [pTooltip]=\"onHoverImageTooltip\" tooltipPosition=\"top\" [tooltipDisabled]=\"!isDevModeActive\">\r\n <!--carousel image-->\r\n <img #slide (load)=\"first && onLoad(slide)\" \r\n [ngClass]=\"{'default-image' : isNoImage, 'edit-image' : isDevModeActive}\"\r\n [src]=\"img.path\"/>\r\n </div>\r\n }\r\n <!--previous button-->\r\n @if(showNavigation){\r\n <button type=\"button\"\r\n class=\"carousel-previous-button\"\r\n (click)=\"change('right')\">\r\n <span class=\"carousel-previous-icon\"></span>\r\n </button>\r\n }\r\n <!--next button-->\r\n @if(showNavigation){\r\n <button type=\"button\"\r\n class=\"carousel-next-button\"\r\n (click)=\"change('left')\">\r\n <span class=\"carousel-next-icon\"></span>\r\n </button>\r\n }\r\n <!--button indicators-->\r\n @if(showIndicators){\r\n <div class=\"carousel-indicator-container\">\r\n <div class=\"carousel-indicator-buttons\">\r\n @for(img of images; track img; let i = $index){\r\n <button \r\n [style.opacity]=\"i == counter ? 1 : 0.5\"\r\n (click)=\"setIndex(i)\"></button>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n<!--thumbnail indicators-->\r\n@if(allowThumbnail){\r\n <div #thumbnail class=\"carousel-thumbnail-container\">\r\n <div class=\"carousel-thumbnails\"\r\n [@animationThumbnail]=\"{\r\n value: thumbnailAnimation,\r\n params: { margin: thumbnailMargin + 'px' }}\">\r\n @for(img of images; track img; let i = $index){\r\n <img \r\n [style.width.px]=\"thumbnailWidth\"\r\n [style.margin-right.px]=\"thumbnailMarginRigth\"\r\n [style.opacity]=\"i == counter ? 1 : 0.5\"\r\n (load)=\"onLoadThumbnail()\"\r\n (click)=\"setIndex(i)\"\r\n [src]=\"img.path\" />\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [".carousel-container{position:relative;display:flex;overflow:hidden;margin-left:auto;margin-right:auto;align-items:center;width:450px;max-width:100%}.carousel-top-left-icon{position:absolute;top:15px;left:15px;cursor:pointer;z-index:10}.carousel-image-container{width:100%;position:relative}.carousel-image-container img{max-width:450px;width:-webkit-fill-available;width:stretch}@media(min-width:600px)and (max-width:959px){.carousel-image-container img{min-width:100%}.carousel-container{width:unset}}@media(max-width:599px){.carousel-image-container img{min-width:100%}.carousel-container{width:unset}}.carousel-image-container img.fixed-height{position:absolute;inset:-100% 0;margin:auto}.carousel-container:after{display:block;clear:both;content:\"\"}.carousel-container div{float:left;margin-right:-100%;font-size:0}.carousel-previous-button:hover,.carousel-next-button:hover,.carousel-previous-button:focus,.carousel-next-button:focus{opacity:.9}.carousel-previous-button,.carousel-next-button{position:absolute;top:0;bottom:0;width:15%;display:flex;align-items:center;justify-content:center;background-color:transparent;border:0;color:#fff;opacity:.5;transition:opacity .15s ease;cursor:pointer}.carousel-next-button{right:0}.carousel-next-icon{background-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>\")}.carousel-previous-icon{background-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-chevron-left' viewBox='0 0 16 16'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>\")}.carousel-next-icon,.carousel-previous-icon{display:inline-block;width:2rem;height:2rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.carousel-indicator-container{width:100%;overflow:hidden}.carousel-indicator-buttons{display:flex;position:absolute;right:0;bottom:0;left:0;z-index:2;justify-content:center;padding:0;margin-right:15%!important;margin-bottom:1rem;margin-left:15%;list-style:none}.carousel-indicator-buttons button{box-sizing:content-box;flex:0 1 auto;width:30px;height:3px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-clip:padding-box;border:0;border-top:10px solid transparent;border-bottom:10px solid transparent}.carousel-indicator-buttons button:hover{opacity:1!important}.carousel-thumbnail-container{width:100%;overflow:hidden}.carousel-thumbnails{display:flex}.carousel-thumbnails img{cursor:pointer}.carousel-thumbnails img:hover{opacity:1!important}.default-image{padding:68px}.edit-image{cursor:pointer}::ng-deep .mobile.carousel-container{width:unset!important}::ng-deep .mobile.carousel-container .carousel-image-container{width:100%!important;position:relative!important}::ng-deep .mobile.carousel-container .carousel-image-container img{width:100%!important;height:auto}\n"] }]
12024
12024
  }], ctorParameters: () => [{ type: i1$a.DeviceDetectorService }], propDecorators: { thumbnail: [{
12025
12025
  type: ViewChild,
12026
12026
  args: ['thumbnail', { static: true }]
@@ -12792,24 +12792,36 @@ class WMaterialServiceViewComponent {
12792
12792
  if (this.isDevModeActive == true) {
12793
12793
  if (this.defaultImage) {
12794
12794
  if (this.isWFileImage(this.defaultImage)) {
12795
- return [{ path: this.defaultImage.fileBase64 }];
12795
+ this.wappingServiceImages = [{ path: this.defaultImage.fileBase64 }];
12796
12796
  }
12797
12797
  else {
12798
- return [{ path: this.defaultImage }];
12798
+ this.wappingServiceImages = [{ path: this.defaultImage }];
12799
12799
  }
12800
12800
  }
12801
12801
  else {
12802
12802
  this.isNoImage = true;
12803
- return [{ path: './assets/wappIcons/image.svg' }];
12803
+ this.wappingServiceImages = [{ path: './assets/wappIcons/image.svg' }];
12804
12804
  }
12805
12805
  }
12806
12806
  else {
12807
- if (this.wappingServiceImages.length > 0) {
12808
- return this.wappingServiceImages;
12809
- }
12810
- else {
12811
- this.isNoImage = true;
12812
- return [{ path: './assets/wappIcons/image.svg' }];
12807
+ if (this.wappingService) {
12808
+ if (this.wappingService.wappingServiceImages.length > 0) {
12809
+ this.wappingServiceImages = this.wappingService.wappingServiceImages;
12810
+ }
12811
+ else if (this.wappingService.wappingServiceImages.length == 0 && this.wappingService.imageUrl) {
12812
+ this.wappingServiceImages = [];
12813
+ let wappingServiceImage = {
12814
+ path: this.wappingService.imageUrl,
12815
+ };
12816
+ this.wappingServiceImages.unshift(wappingServiceImage);
12817
+ }
12818
+ else if (this.defaultImage) {
12819
+ this.wappingServiceImages = [{ path: this.defaultImage }];
12820
+ }
12821
+ else {
12822
+ this.isNoImage = true;
12823
+ this.wappingServiceImages = [{ path: './assets/wappIcons/image.svg' }];
12824
+ }
12813
12825
  }
12814
12826
  }
12815
12827
  }