ngx-wapp-components 3.2.26 → 3.2.27-alpha.1
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
|
|
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: [
|
|
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
|
|
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"] }]
|
|
12024
12024
|
}], ctorParameters: () => [{ type: i1$a.DeviceDetectorService }], propDecorators: { thumbnail: [{
|
|
12025
12025
|
type: ViewChild,
|
|
12026
12026
|
args: ['thumbnail', { static: true }]
|