npm - ngx-wapp-components - Versions diffs - 3.0.9 → 3.0.10-alpha.2 - Mend

ngx-wapp-components 3.0.9 → 3.0.10-alpha.2

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.

Files changed (4) hide show

package/assets/wappIcons/earnAndBurn.svg +10 -10
package/fesm2022/ngx-wapp-components.mjs +7 -7
package/fesm2022/ngx-wapp-components.mjs.map +1 -1
package/package.json +2 -2

package/assets/wappIcons/earnAndBurn.svg CHANGED Viewed

@@ -1,10 +1,10 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_3043_1722)">
-<path d="M12.5964 2.20787C12.8892 1.91538 13.3641 1.91543 13.6569 2.20787C16.7808 5.33199 16.7808 10.3972 13.6569 13.5213C13.6078 13.5704 13.5514 13.6079 13.4938 13.6405L14.3854 14.5331C14.6892 14.8368 14.4937 15.3561 14.0651 15.3846L11.1794 15.578C10.8778 15.5978 10.627 15.3464 10.6472 15.0448L10.8395 12.159C10.8686 11.7312 11.3884 11.536 11.6921 11.8387L12.4763 12.6239C12.5088 12.5663 12.5474 12.5099 12.5964 12.4608C15.1344 9.92245 15.1345 5.80675 12.5964 3.26842C12.3039 2.97561 12.3039 2.50067 12.5964 2.20787ZM4.7536 0.285019C5.05517 0.265091 5.30568 0.515691 5.28583 0.817245L5.09344 3.70299C5.06475 4.13148 4.54463 4.32695 4.24091 4.0233L3.43524 3.21764C3.42118 3.2344 3.40608 3.2507 3.39032 3.26646C0.85203 5.80475 0.852267 9.92041 3.39032 12.4588C3.68303 12.7517 3.68299 13.2265 3.39032 13.5194C3.09747 13.8122 2.62268 13.8122 2.32977 13.5194C-0.794067 10.3952 -0.794303 5.32999 2.32977 2.20592C2.34555 2.19015 2.36183 2.17506 2.3786 2.161L1.54755 1.32896C1.24472 1.02521 1.43975 0.506216 1.86786 0.477402L4.7536 0.285019ZM7.99286 3.99986C8.40703 3.99986 8.74279 4.33571 8.74286 4.74986V7.24986H11.2429C11.657 7.24986 11.9928 7.58571 11.9929 7.99986C11.9929 8.41408 11.6571 8.74986 11.2429 8.74986H8.74286V11.2499C8.74286 11.6641 8.40707 11.9999 7.99286 11.9999C7.57895 11.9995 7.24286 11.6639 7.24286 11.2499V8.74986H4.74286C4.32895 8.7495 3.99286 8.41385 3.99286 7.99986C3.99293 7.58593 4.329 7.25022 4.74286 7.24986H7.24286V4.74986C7.24293 4.33593 7.579 4.00022 7.99286 3.99986Z" fill="#1F2224"/>
-</g>
-<defs>
-<clipPath id="clip0_3043_1722">
-<rect width="16" height="16" fill="white"/>
-</clipPath>
-</defs>
-</svg>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3043_1722)">
+<path d="M12.5964 2.20787C12.8892 1.91538 13.3641 1.91543 13.6569 2.20787C16.7808 5.33199 16.7808 10.3972 13.6569 13.5213C13.6078 13.5704 13.5514 13.6079 13.4938 13.6405L14.3854 14.5331C14.6892 14.8368 14.4937 15.3561 14.0651 15.3846L11.1794 15.578C10.8778 15.5978 10.627 15.3464 10.6472 15.0448L10.8395 12.159C10.8686 11.7312 11.3884 11.536 11.6921 11.8387L12.4763 12.6239C12.5088 12.5663 12.5474 12.5099 12.5964 12.4608C15.1344 9.92245 15.1345 5.80675 12.5964 3.26842C12.3039 2.97561 12.3039 2.50067 12.5964 2.20787ZM4.7536 0.285019C5.05517 0.265091 5.30568 0.515691 5.28583 0.817245L5.09344 3.70299C5.06475 4.13148 4.54463 4.32695 4.24091 4.0233L3.43524 3.21764C3.42118 3.2344 3.40608 3.2507 3.39032 3.26646C0.85203 5.80475 0.852267 9.92041 3.39032 12.4588C3.68303 12.7517 3.68299 13.2265 3.39032 13.5194C3.09747 13.8122 2.62268 13.8122 2.32977 13.5194C-0.794067 10.3952 -0.794303 5.32999 2.32977 2.20592C2.34555 2.19015 2.36183 2.17506 2.3786 2.161L1.54755 1.32896C1.24472 1.02521 1.43975 0.506216 1.86786 0.477402L4.7536 0.285019ZM7.99286 3.99986C8.40703 3.99986 8.74279 4.33571 8.74286 4.74986V7.24986H11.2429C11.657 7.24986 11.9928 7.58571 11.9929 7.99986C11.9929 8.41408 11.6571 8.74986 11.2429 8.74986H8.74286V11.2499C8.74286 11.6641 8.40707 11.9999 7.99286 11.9999C7.57895 11.9995 7.24286 11.6639 7.24286 11.2499V8.74986H4.74286C4.32895 8.7495 3.99286 8.41385 3.99286 7.99986C3.99293 7.58593 4.329 7.25022 4.74286 7.24986H7.24286V4.74986C7.24293 4.33593 7.579 4.00022 7.99286 3.99986Z" fill="#1F2224"/>
+</g>
+<defs>
+<clipPath id="clip0_3043_1722">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/fesm2022/ngx-wapp-components.mjs CHANGED Viewed

@@ -11197,7 +11197,7 @@ class CarouselComponent {
         this.onSetImageEvent.emit(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CarouselComponent, deps: [{ token: i1$a.DeviceDetectorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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\">\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:fit-content;height:378px}@media(min-width:600px)and (max-width:959px){.carousel-image-container img{width:100%}.carousel-container{width:unset}}@media(max-width:599px){.carousel-image-container img{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: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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\">\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:fit-content;height:378px}@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: [
             trigger('animImageSlider', animationCarouselFade),
             trigger('animationThumbnail', animationThumbnail),
         ] }); }
@@ -11207,7 +11207,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             args: [{ selector: 'wapp-carousel', animations: [
                         trigger('animImageSlider', animationCarouselFade),
                         trigger('animationThumbnail', animationThumbnail),
-                    ], 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\">\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:fit-content;height:378px}@media(min-width:600px)and (max-width:959px){.carousel-image-container img{width:100%}.carousel-container{width:unset}}@media(max-width:599px){.carousel-image-container img{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"] }]
+                    ], 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\">\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:fit-content;height:378px}@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"] }]
         }], ctorParameters: () => [{ type: i1$a.DeviceDetectorService }], propDecorators: { thumbnail: [{
                 type: ViewChild,
                 args: ['thumbnail', { static: true }]
@@ -11532,11 +11532,11 @@ class WMaterialServiceCardComponent {
         return obj.base64 !== undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WMaterialServiceCardComponent, deps: [{ token: i1$6.Router }, { token: i2$d.MatIconRegistry }, { token: i3$7.DomSanitizer }, { token: i1$8.DialogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: WMaterialServiceCardComponent, isStandalone: false, selector: "w-material-service-card", inputs: { isDevModeActive: "isDevModeActive", wappingServicesTranslations: "wappingServicesTranslations", wappingService: "wappingService", defaultImage: "defaultImage", croppedImageConfiguration: "croppedImageConfiguration", croppedDialogTranslations: "croppedDialogTranslations", onHoverImageTooltip: "onHoverImageTooltip" }, outputs: { cardClicked: "cardClicked", onDefaultImageEvent: "onDefaultImageEvent" }, providers: [DialogService], usesOnChanges: true, ngImport: i0, template: "@if(wappingServiceReady){\r\n<mat-card class=\"service-card\" (click)=\"isDevModeActive ? setImage() : cardOnClick(wappingService)\" [pTooltip]=\"onHoverImageTooltip\" tooltipPosition=\"top\">\r\n  <div fxLayout=\"column\" fxLayoutAlign=\"center center\">\r\n    @if(wappingService.tile1 && wappingService.tile1 != ''){\r\n      <div class=\"service-card-image-title\"\r\n          fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <!--tile1-->\r\n        <div [ngClass]=\"{'tile-no-html': !hasHtml(wappingService.tile1)}\" class=\"service-card-tile1\"\r\n          [innerHtml]=\"wappingService.tile1\"></div>\r\n      </div>\r\n    }\r\n    <div class=\"service-card-image\">\r\n      <img mat-card-image  \r\n        [ngClass]=\"{'default-image' : isNoImage}\" \r\n        [src]=\"getImage()\">\r\n    </div>\r\n  </div>\r\n  <mat-card-header fxLayout=\"column\">\r\n    <div fxLayout=\"row\">\r\n      <div fxFlex></div>\r\n      <!--status-->\r\n      @if(wappingService.allowSelect && allowSelectSendGiftCard){\r\n        <div class=\"card-header-status-container\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n          @if(wappingService.active){\r\n            <div class=\"card-header-status\">\r\n              <mat-icon class=\"card-header-status-icon\" svgIcon=\"activated\"></mat-icon>\r\n              <span class=\"status\">{{ wappingTranslations.activedService }}</span>\r\n            </div>\r\n          }\r\n          @if(!wappingService.active){\r\n            <div class=\"card-header-status\">\r\n              <mat-icon class=\"card-header-status-icon\" svgIcon=\"deactivated\"></mat-icon>\r\n              <span class=\"status\">{{ wappingTranslations.disabledService }}</span>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n    <!--tile3-->\r\n    @if(wappingService.tile3){\r\n      <div class=\"card-header-description\">\r\n          <div [innerHtml]=\"wappingService.tile3\"></div>\r\n      </div>\r\n    }\r\n  </mat-card-header>\r\n</mat-card>\r\n}\r\n", styles: [":host ::ng-deep .service-card{width:380px}.mat-mdc-card{padding:0;background-color:var(--mdc-elevated-card-container-color, transparent)!important}.service-card{cursor:pointer;transition:none!important;box-shadow:1px 2px 8px #1f1f1f14}.service-card-image-title{position:absolute!important;width:100%!important;min-height:22px!important;top:0!important;z-index:99!important}.service-card-tile1{width:100%;min-height:22px}.service-card-image{font-size:0px;border-top-left-radius:5px;border-top-right-radius:5px;width:100%}.mat-mdc-card-image{width:100%;margin:0;max-height:500px}.mat-mdc-card-image:first-child{margin:0}.mat-mdc-card-content{padding:5px}.mat-mdc-card-header{height:130px!important;padding:16px 15px;background-color:#eee6;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.mat-mdc-card-header .mat-mdc-card-title{margin:0!important}.card-header-benefits{align-items:center;text-transform:uppercase}.card-header-status{display:flex;align-items:center}.card-header-status-icon{margin-right:5px;width:10px}.status{text-transform:uppercase}.card-header-description{margin-top:10px!important;text-align:left;line-height:1.78;overflow-y:auto}.card-header-detail{margin-top:10px;text-align:left;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;-moz-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:pre-line}.tile-no-html{background-color:#000;color:#fff;margin-left:60px;margin-right:60px;border-radius:0 0 4.3118px 4.3118px!important;justify-content:center!important;align-items:center!important;display:flex!important;text-align:center!important;padding:4px!important}.default-image{padding:68px}\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: "component", type: i7$5.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i7$5.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i7$5.MatCardImage, selector: "[mat-card-image], [matCardImage]" }, { kind: "component", type: i2$d.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$4.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i7$4.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i7$4.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i7$4.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: WMaterialServiceCardComponent, isStandalone: false, selector: "w-material-service-card", inputs: { isDevModeActive: "isDevModeActive", wappingServicesTranslations: "wappingServicesTranslations", wappingService: "wappingService", defaultImage: "defaultImage", croppedImageConfiguration: "croppedImageConfiguration", croppedDialogTranslations: "croppedDialogTranslations", onHoverImageTooltip: "onHoverImageTooltip" }, outputs: { cardClicked: "cardClicked", onDefaultImageEvent: "onDefaultImageEvent" }, providers: [DialogService], usesOnChanges: true, ngImport: i0, template: "@if(wappingServiceReady){\r\n<mat-card class=\"service-card\" (click)=\"isDevModeActive ? setImage() : cardOnClick(wappingService)\" [pTooltip]=\"onHoverImageTooltip\" tooltipPosition=\"top\">\r\n  <div class=\"service-card-header\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\r\n    <!-- @if(wappingService.tile1 && wappingService.tile1 != ''){\r\n      <div class=\"service-card-image-title\"\r\n          fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        tile1\r\n        <div [ngClass]=\"{'tile-no-html': !hasHtml(wappingService.tile1)}\" class=\"service-card-tile1\"\r\n          [innerHtml]=\"wappingService.tile1\"></div>\r\n      </div>\r\n    } -->\r\n    @if(!hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != ''){\r\n      <div class=\"service-image-title\">\r\n        <div class=\"tile-no-html\" \r\n            [innerHtml]=\"wappingService.tile1\"></div>\r\n      </div>\r\n    }\r\n    @if(hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != ''){\r\n      <div class=\"service-card-image-title service-card-image-title-html\">\r\n        <div class=\"service-card-tile1\"\r\n          [innerHtml]=\"wappingService.tile1\"></div>\r\n      </div>\r\n    }\r\n    <div class=\"service-card-image\">\r\n      <img mat-card-image  \r\n        [ngClass]=\"{'default-image' : isNoImage}\" \r\n        [src]=\"getImage()\">\r\n    </div>\r\n  </div>\r\n  <mat-card-header fxLayout=\"column\">\r\n    <div fxLayout=\"row\">\r\n      <div fxFlex></div>\r\n      <!--status-->\r\n      @if(wappingService.allowSelect && allowSelectSendGiftCard){\r\n        <div class=\"card-header-status-container\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n          @if(wappingService.active){\r\n            <div class=\"card-header-status\">\r\n              <mat-icon class=\"card-header-status-icon\" svgIcon=\"activated\"></mat-icon>\r\n              <span class=\"status\">{{ wappingTranslations.activedService }}</span>\r\n            </div>\r\n          }\r\n          @if(!wappingService.active){\r\n            <div class=\"card-header-status\">\r\n              <mat-icon class=\"card-header-status-icon\" svgIcon=\"deactivated\"></mat-icon>\r\n              <span class=\"status\">{{ wappingTranslations.disabledService }}</span>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n    <!--tile3-->\r\n    @if(wappingService.tile3){\r\n      <div class=\"card-header-description\">\r\n          <div [innerHtml]=\"wappingService.tile3\"></div>\r\n      </div>\r\n    }\r\n  </mat-card-header>\r\n</mat-card>\r\n}\r\n", styles: [":host ::ng-deep .service-card{width:380px}.mat-mdc-card{padding:0;background-color:var(--mdc-elevated-card-container-color, transparent)!important}.service-card{cursor:pointer;transition:none!important;box-shadow:1px 2px 8px #1f1f1f14}.service-card-header{position:relative}.service-image-title{position:absolute;top:0!important;right:0!important;left:0!important;z-index:2;margin:0 60px!important;min-height:22px!important;border-radius:0 0 4.3118px 4.3118px!important;background-color:#0e0c0c;color:#fff;display:flex;justify-content:center;align-items:center;padding:4px}.service-card-image-title-html{position:absolute!important;width:100%!important;min-height:22px!important}.service-card-image{font-size:0px;border-top-left-radius:5px;border-top-right-radius:5px;width:100%}.mat-mdc-card-image{width:100%;margin:0;max-height:500px}.mat-mdc-card-image:first-child{margin:0}.mat-mdc-card-content{padding:5px}.mat-mdc-card-header{height:130px!important;padding:16px 15px;background-color:#eee6;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.mat-mdc-card-header .mat-mdc-card-title{margin:0!important}.card-header-benefits{align-items:center;text-transform:uppercase}.card-header-status{display:flex;align-items:center}.card-header-status-icon{margin-right:5px;width:10px}.status{text-transform:uppercase}.card-header-description{margin-top:10px!important;text-align:left;line-height:1.78;overflow-y:auto}.card-header-detail{margin-top:10px;text-align:left;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;-moz-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:pre-line}.tile-no-html{justify-content:center!important;align-items:center!important;display:flex!important;text-align:center!important}.default-image{padding:68px}\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: "component", type: i7$5.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i7$5.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i7$5.MatCardImage, selector: "[mat-card-image], [matCardImage]" }, { kind: "component", type: i2$d.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$4.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i7$4.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i7$4.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i7$4.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WMaterialServiceCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'w-material-service-card', standalone: false, providers: [DialogService], template: "@if(wappingServiceReady){\r\n<mat-card class=\"service-card\" (click)=\"isDevModeActive ? setImage() : cardOnClick(wappingService)\" [pTooltip]=\"onHoverImageTooltip\" tooltipPosition=\"top\">\r\n  <div fxLayout=\"column\" fxLayoutAlign=\"center center\">\r\n    @if(wappingService.tile1 && wappingService.tile1 != ''){\r\n      <div class=\"service-card-image-title\"\r\n          fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <!--tile1-->\r\n        <div [ngClass]=\"{'tile-no-html': !hasHtml(wappingService.tile1)}\" class=\"service-card-tile1\"\r\n          [innerHtml]=\"wappingService.tile1\"></div>\r\n      </div>\r\n    }\r\n    <div class=\"service-card-image\">\r\n      <img mat-card-image  \r\n        [ngClass]=\"{'default-image' : isNoImage}\" \r\n        [src]=\"getImage()\">\r\n    </div>\r\n  </div>\r\n  <mat-card-header fxLayout=\"column\">\r\n    <div fxLayout=\"row\">\r\n      <div fxFlex></div>\r\n      <!--status-->\r\n      @if(wappingService.allowSelect && allowSelectSendGiftCard){\r\n        <div class=\"card-header-status-container\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n          @if(wappingService.active){\r\n            <div class=\"card-header-status\">\r\n              <mat-icon class=\"card-header-status-icon\" svgIcon=\"activated\"></mat-icon>\r\n              <span class=\"status\">{{ wappingTranslations.activedService }}</span>\r\n            </div>\r\n          }\r\n          @if(!wappingService.active){\r\n            <div class=\"card-header-status\">\r\n              <mat-icon class=\"card-header-status-icon\" svgIcon=\"deactivated\"></mat-icon>\r\n              <span class=\"status\">{{ wappingTranslations.disabledService }}</span>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n    <!--tile3-->\r\n    @if(wappingService.tile3){\r\n      <div class=\"card-header-description\">\r\n          <div [innerHtml]=\"wappingService.tile3\"></div>\r\n      </div>\r\n    }\r\n  </mat-card-header>\r\n</mat-card>\r\n}\r\n", styles: [":host ::ng-deep .service-card{width:380px}.mat-mdc-card{padding:0;background-color:var(--mdc-elevated-card-container-color, transparent)!important}.service-card{cursor:pointer;transition:none!important;box-shadow:1px 2px 8px #1f1f1f14}.service-card-image-title{position:absolute!important;width:100%!important;min-height:22px!important;top:0!important;z-index:99!important}.service-card-tile1{width:100%;min-height:22px}.service-card-image{font-size:0px;border-top-left-radius:5px;border-top-right-radius:5px;width:100%}.mat-mdc-card-image{width:100%;margin:0;max-height:500px}.mat-mdc-card-image:first-child{margin:0}.mat-mdc-card-content{padding:5px}.mat-mdc-card-header{height:130px!important;padding:16px 15px;background-color:#eee6;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.mat-mdc-card-header .mat-mdc-card-title{margin:0!important}.card-header-benefits{align-items:center;text-transform:uppercase}.card-header-status{display:flex;align-items:center}.card-header-status-icon{margin-right:5px;width:10px}.status{text-transform:uppercase}.card-header-description{margin-top:10px!important;text-align:left;line-height:1.78;overflow-y:auto}.card-header-detail{margin-top:10px;text-align:left;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;-moz-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:pre-line}.tile-no-html{background-color:#000;color:#fff;margin-left:60px;margin-right:60px;border-radius:0 0 4.3118px 4.3118px!important;justify-content:center!important;align-items:center!important;display:flex!important;text-align:center!important;padding:4px!important}.default-image{padding:68px}\n"] }]
+            args: [{ selector: 'w-material-service-card', standalone: false, providers: [DialogService], template: "@if(wappingServiceReady){\r\n<mat-card class=\"service-card\" (click)=\"isDevModeActive ? setImage() : cardOnClick(wappingService)\" [pTooltip]=\"onHoverImageTooltip\" tooltipPosition=\"top\">\r\n  <div class=\"service-card-header\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\r\n    <!-- @if(wappingService.tile1 && wappingService.tile1 != ''){\r\n      <div class=\"service-card-image-title\"\r\n          fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        tile1\r\n        <div [ngClass]=\"{'tile-no-html': !hasHtml(wappingService.tile1)}\" class=\"service-card-tile1\"\r\n          [innerHtml]=\"wappingService.tile1\"></div>\r\n      </div>\r\n    } -->\r\n    @if(!hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != ''){\r\n      <div class=\"service-image-title\">\r\n        <div class=\"tile-no-html\" \r\n            [innerHtml]=\"wappingService.tile1\"></div>\r\n      </div>\r\n    }\r\n    @if(hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != ''){\r\n      <div class=\"service-card-image-title service-card-image-title-html\">\r\n        <div class=\"service-card-tile1\"\r\n          [innerHtml]=\"wappingService.tile1\"></div>\r\n      </div>\r\n    }\r\n    <div class=\"service-card-image\">\r\n      <img mat-card-image  \r\n        [ngClass]=\"{'default-image' : isNoImage}\" \r\n        [src]=\"getImage()\">\r\n    </div>\r\n  </div>\r\n  <mat-card-header fxLayout=\"column\">\r\n    <div fxLayout=\"row\">\r\n      <div fxFlex></div>\r\n      <!--status-->\r\n      @if(wappingService.allowSelect && allowSelectSendGiftCard){\r\n        <div class=\"card-header-status-container\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n          @if(wappingService.active){\r\n            <div class=\"card-header-status\">\r\n              <mat-icon class=\"card-header-status-icon\" svgIcon=\"activated\"></mat-icon>\r\n              <span class=\"status\">{{ wappingTranslations.activedService }}</span>\r\n            </div>\r\n          }\r\n          @if(!wappingService.active){\r\n            <div class=\"card-header-status\">\r\n              <mat-icon class=\"card-header-status-icon\" svgIcon=\"deactivated\"></mat-icon>\r\n              <span class=\"status\">{{ wappingTranslations.disabledService }}</span>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n    <!--tile3-->\r\n    @if(wappingService.tile3){\r\n      <div class=\"card-header-description\">\r\n          <div [innerHtml]=\"wappingService.tile3\"></div>\r\n      </div>\r\n    }\r\n  </mat-card-header>\r\n</mat-card>\r\n}\r\n", styles: [":host ::ng-deep .service-card{width:380px}.mat-mdc-card{padding:0;background-color:var(--mdc-elevated-card-container-color, transparent)!important}.service-card{cursor:pointer;transition:none!important;box-shadow:1px 2px 8px #1f1f1f14}.service-card-header{position:relative}.service-image-title{position:absolute;top:0!important;right:0!important;left:0!important;z-index:2;margin:0 60px!important;min-height:22px!important;border-radius:0 0 4.3118px 4.3118px!important;background-color:#0e0c0c;color:#fff;display:flex;justify-content:center;align-items:center;padding:4px}.service-card-image-title-html{position:absolute!important;width:100%!important;min-height:22px!important}.service-card-image{font-size:0px;border-top-left-radius:5px;border-top-right-radius:5px;width:100%}.mat-mdc-card-image{width:100%;margin:0;max-height:500px}.mat-mdc-card-image:first-child{margin:0}.mat-mdc-card-content{padding:5px}.mat-mdc-card-header{height:130px!important;padding:16px 15px;background-color:#eee6;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.mat-mdc-card-header .mat-mdc-card-title{margin:0!important}.card-header-benefits{align-items:center;text-transform:uppercase}.card-header-status{display:flex;align-items:center}.card-header-status-icon{margin-right:5px;width:10px}.status{text-transform:uppercase}.card-header-description{margin-top:10px!important;text-align:left;line-height:1.78;overflow-y:auto}.card-header-detail{margin-top:10px;text-align:left;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;-moz-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:pre-line}.tile-no-html{justify-content:center!important;align-items:center!important;display:flex!important;text-align:center!important}.default-image{padding:68px}\n"] }]
         }], ctorParameters: () => [{ type: i1$6.Router }, { type: i2$d.MatIconRegistry }, { type: i3$7.DomSanitizer }, { type: i1$8.DialogService }], propDecorators: { isDevModeActive: [{
                 type: Input
             }], wappingServicesTranslations: [{
@@ -11722,7 +11722,7 @@ class WMaterialServiceViewComponent {
         if (changes['defaultImage'] && !changes['defaultImage'].currentValue) {
             if (this.isDevModeActive) {
                 this.isNoImage = true;
-                this.wappingServiceImages = [{ path: './../../../assets/wappIcons/image.svg' }];
+                this.wappingServiceImages = [{ path: './assets/wappIcons/image.svg' }];
             }
         }
     }
@@ -11858,11 +11858,11 @@ class WMaterialServiceViewComponent {
         return obj.base64 !== undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WMaterialServiceViewComponent, deps: [{ token: i2$d.MatIconRegistry }, { token: i3$7.DomSanitizer }, { token: i1$8.DialogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: WMaterialServiceViewComponent, isStandalone: false, selector: "w-material-service-view", inputs: { forceMobile: "forceMobile", wappingServicesTranslations: "wappingServicesTranslations", canParticipateDraw: "canParticipateDraw", wappingService: "wappingService", isDevModeActive: "isDevModeActive", defaultImage: "defaultImage", croppedImageConfiguration: "croppedImageConfiguration", croppedDialogTranslations: "croppedDialogTranslations", isNoImage: "isNoImage", onHoverImageTooltip: "onHoverImageTooltip" }, outputs: { wappingServiceSelected: "wappingServiceSelected", participateDraw: "participateDraw", onDefaultImageEvent: "onDefaultImageEvent" }, usesOnChanges: true, ngImport: i0, template: "@if(wappingService && (!forceMobile)){\r\n  <wapp-main-title [title]=\"wappingService.tile3\" fxHide.xs></wapp-main-title>\r\n}\r\n@if(wappingService){\r\n<div class=\"service-detail-center\" \r\n        [ngClass]=\"{'force-mobile': forceMobile}\"\r\n        [fxLayout]=\"forceMobile ? 'column' : 'row'\"\r\n        [fxLayout.xs]=\"'column'\"\r\n        [fxLayout.sm]=\"'column'\">\r\n    <!--service image-->\r\n    <div [ngClass]=\"{'service-view-no-margin': forceMobile, 'service-view': !forceMobile}\" fxLayout=\"column\">\r\n        <!--tile 1-->\r\n        @if(wappingService.tile1 && wappingService.tile1 != ''){\r\n          <div \r\n              [ngClass]=\"{'service-image-tile' : !hasHtml(wappingService.tile1),\r\n                          'template-service-image-tile' : hasHtml(wappingService.tile1)}\"\r\n              fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n              <div [ngClass]=\"{'tile-view-no-html': !hasHtml(wappingService.tile1)}\" class=\"service-view-tile1\" \r\n                  [innerHtml]=\"wappingService.tile1\"></div>\r\n          </div>\r\n        }\r\n        <!--slideshow-->\r\n        <wapp-carousel [isDevModeActive]=\"isDevModeActive\" [forceMobile]=\"forceMobile\" [images]=\"wappingServiceImages\" [isNoImage]=\"isNoImage\" (onSetImageEvent)=\"setImage()\" [onHoverImageTooltip]=\"onHoverImageTooltip\"></wapp-carousel>\r\n        <!--tile 2-->\r\n        @if(wappingService.tile2){\r\n          <div fxFlex fxLayout=\"row\"\r\n              fxLayoutAlign=\"center center\"\r\n              fxLayoutGap=\"5px\"\r\n              [ngClass]=\"{'service-tile-border-bottom-radius': !wappingService.tile4,\r\n                  'template-service-tile': hasHtml(wappingService.tile2),\r\n                  'service-tile' : !hasHtml(wappingService.tile2)}\"\r\n              [ngStyle]=\"!hasHtml(wappingService.tile2) ? { 'background-color': '#0e0c0c', 'color': '#fff' } : {'background-color': 'transparent !important', 'color': 'transparent !important'}\">\r\n              <div [innerHtml]=\"wappingService.tile2\"></div>\r\n          </div>\r\n        }\r\n        <!--activate toggle-->\r\n        @if(wappingService.allowSelect && allowSelectSendGiftCard && !isDrawService){\r\n          <mat-slide-toggle class=\"service-select-toggle\" color=\"accent\"\r\n                          [disabled]=\"disabledToggle\"\r\n                          [(ngModel)]=\"wappingService.active\"\r\n                          (change)=\"selectWappingService()\">{{ serviceStatus }}</mat-slide-toggle>\r\n        }\r\n        @if(isDrawService){\r\n          <button mat-flat-button \r\n                  class=\"service-select-toggle\"\r\n                  color=\"accent\"\r\n                  [disabled]=\"!canParticipateDraw\"\r\n                  (click)=\"triggerParticipate()\">\r\n              <span>{{ wappingServicesTranslations?.participate }}</span>\r\n          </button>\r\n        }\r\n        \r\n    </div>\r\n    <!--service info-->\r\n    <div class=\"service-info-container\" [ngClass]=\"{'service-info-container-padding': forceMobile}\" fxLayout=\"column\">\r\n        <div class=\"service-tile-detail-container\" fxLayout=\"column\">\r\n        <!--tile 3-->\r\n        @if(!forceMobile){\r\n          <div \r\n              [innerHtml]=\"wappingService.tile3\" fxHide fxShow.xs\r\n              class=\"service-name mat-title\">\r\n          </div>\r\n        }\r\n        @if(forceMobile){\r\n          <div \r\n              [innerHtml]=\"wappingService.tile3\"\r\n              class=\"service-name mat-title\">\r\n          </div>\r\n        }\r\n        <!--tileDetail 1-->\r\n        <div class=\"service-tile-detail\" fxLayout=\"row\">\r\n            <span [innerHtml]=\"wappingService.tileDetail1\"></span>\r\n        </div>\r\n        </div>\r\n        <!--link-->\r\n        @if(wappingService.titleLinkUrl && wappingService.linkUrl){\r\n          <div class=\"service-link-container\">\r\n            <a class=\"service-link\" href=\"{{wappingService.linkUrl}}\" target=\"_blank\">\r\n                <mat-icon class=\"service-link-icon\" svgIcon=\"share_square\"></mat-icon><span>{{wappingService.titleLinkUrl}}</span>\r\n            </a>\r\n          </div>\r\n        }\r\n    </div>\r\n</div>\r\n}\r\n", styles: [".back-button{width:20px!important;height:20px!important;background-color:#a5000000;padding:0;border:none;cursor:pointer}.back-button-over-image{width:37px!important;height:37px!important;background-color:#ffffffb0;position:absolute;top:13px;left:11px;z-index:10;border-radius:50%;border:none;display:flex;justify-content:center;align-items:center;cursor:pointer}::ng-deep .back-button .mat-button-wrapper,::ng-deep .back-button-over-image .mat-button-wrapper{padding:4px 0!important}.back-button .mat-button-wrapper,.back-button-over-image .mat-button-wrapper{line-height:14px!important}.back-button .mat-icon{width:20px;height:20px}.back-button-over-image .mat-icon{width:16px;height:16px}::ng-deep .mat-mdc-slide-toggle .mdc-switch{width:var(--mdc-switch-track-width, 36px)!important}::ng-deep .mat-mdc-slide-toggle-touch-target{position:absolute;top:50%;left:50%;height:var(--mat-slide-toggle-touch-target-size, 48px);width:100%;transform:translate(-50%,-50%);display:var(--mat-slide-toggle-touch-target-display, block)}::ng-deep .mdc-switch__track{border-radius:var(--mdc-switch-track-shape, 7px)!important;height:var(--mdc-switch-track-height, 14px)!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:before{background:var(--mdc-switch-unselected-track-color, #a50000)!important}::ng-deep .mdc-switch__track:before{border-width:0px!important;transition:transform 75ms 0ms cubic-bezier(0,0,.2,1)!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:after{background:var(--mdc-switch-selected-hover-track-color, #10c638)!important}::ng-deep .mdc-switch__track:after{transition:transform 75ms 0ms cubic-bezier(.4,0,.6,1)!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch .mdc-switch__handle-track{width:calc(100% - var(--mdc-switch-handle-width, 20px))!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch .mdc-switch__handle{width:var(--mdc-switch-handle-width, 20px)!important;border-radius:var(--mdc-switch-handle-shape, 10px)!important;height:var(--mdc-switch-handle-height, 20px)!important;transition:none!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch .mdc-switch__handle:before{background:var(--mdc-switch-handle-surface-color, var(--mdc-theme-surface, #fff))!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__shadow{box-shadow:var(--mdc-switch-handle-elevation, 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12))!important}::ng-deep .mdc-elevation-overlay{inset:0!important;position:absolute!important;border-radius:inherit!important;pointer-events:none!important;opacity:var(--mdc-elevation-overlay-opacity, 0)!important;transition:opacity .28s cubic-bezier(.4,0,.2,1)!important;background-color:var(--mdc-elevation-overlay-color, #fff)!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch .mdc-switch__ripple{height:var(--mdc-switch-state-layer-size, 48px)!important;width:var(--mdc-switch-state-layer-size, 48px)!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--unselected:enabled .mdc-switch__icon{fill:var(--mdc-switch-unselected-icon-color, var(--mdc-theme-on-primary, #fff))!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--unselected .mdc-switch__icon{width:var(--mdc-switch-unselected-icon-size, 18px)!important;height:var(--mdc-switch-unselected-icon-size, 18px)!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--unselected:enabled .mdc-switch__handle:after{background:var(--mdc-switch-unselected-handle-color, #fff)!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch--selected .mdc-switch__handle:has(.mdc-switch__icons),::ng-deep .mat-mdc-slide-toggle .mdc-switch--unselected .mdc-switch__handle:has(.mdc-switch__icons){margin:0!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--selected:enabled .mdc-switch__icon{fill:var(--mdc-switch-selected-icon-color, var(--mdc-theme-on-primary, #fff))!important}::ng-deep .mdc-switch--selected:enabled:focus .mdc-switch__handle:after,::ng-deep .mdc-switch--selected:enabled:hover:not(:focus):not(:active) .mdc-switch__handle:after{background:#fff!important}:host ::ng-deep .mdc-form-field>label{font:400 14px/25px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch{margin-right:8px!important}@media(max-width:959px){.service-detail-center{align-items:center}}.service-view{position:relative;margin-right:30px}.service-view-no-margin{position:relative;margin-right:0!important}@media(min-width:600px)and (max-width:959px){.service-view{margin-right:0;width:100%}}@media(max-width:599px){.service-view{margin-right:0;width:100%}}.service-image-tile,.template-service-image-tile{position:absolute!important;width:100%!important;min-height:32px!important;top:0!important;z-index:9!important}.tile-view-no-html{background-color:#000;color:#fff;margin-left:60px;margin-right:60px;border-radius:0 0 4.3118px 4.3118px!important;justify-content:center!important;align-items:center!important;display:flex!important;text-align:center!important;padding:4px!important}.service-view-tile1{width:100%;min-height:32px}.service-tile,.template-service-tile{padding:14px;max-height:48px;display:flex;align-items:center;text-align:center;font:400 15px/17px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}.service-tile-border-bottom-radius{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.service-select-toggle{margin-top:25px;margin-right:auto;margin-left:auto;display:flex;align-items:center;text-align:left;max-width:none!important}.service-select-toggle *{max-width:none!important}.service-info-container{width:100%;height:250px}.service-info-container-padding{padding-right:15px;padding-left:15px}@media(max-width:599px){.service-info-container{padding-right:15px;padding-left:15px}}.service-name{margin-top:0;text-align:justify;white-space:pre-line;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;-moz-box-orient:vertical}@media(min-width:600px)and (max-width:959px){.service-name{margin-top:30px;margin-right:0}}@media(max-width:599px){.service-name{margin-top:30px;margin-right:0}}.service-description{margin-top:0;text-align:left;white-space:pre-line;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:10;-webkit-box-orient:vertical;-moz-box-orient:vertical}@media(min-width:600px)and (max-width:959px){.service-description{margin-top:20px;margin-right:0}}@media(max-width:599px){.service-description{margin-top:15px;margin-right:0}}.service-show-more-container{margin-top:5px;width:fit-content;align-items:center;cursor:pointer;display:flex;text-align:left}.service-show-more-vector{width:5px!important;margin-left:10px}.service-tile-detail-container{margin-top:5px;display:flex;text-align:justify}@media(max-width:599px){.service-tile-detail-container{margin-top:20px}}.service-tile-detail{margin-top:20px;font:400 14px/25px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}@media(max-width:599px){.service-tile-detail{margin-top:20px}}.service-tile-detail-icon{margin-right:10px}.service-link-container{height:100%;justify-content:flex-end;align-items:flex-end;display:flex;text-align:justify}@media(max-width:599px){.service-link-container{margin-top:20px;justify-content:flex-start}}.service-link{display:flex;align-items:center;cursor:pointer;text-decoration:none;color:inherit}.service-link-icon{margin-right:10px}.service-options-container{border-top:1px solid #eee;margin-top:80px}@media(max-width:599px){.service-options-container{margin-top:40px;padding-right:15px;padding-left:15px}}.service-option{height:48px;border-bottom:1px solid #eee;cursor:pointer;display:flex;align-items:center;text-align:left}.service-option-vector{width:10px!important}.actions-container{margin-top:40px}.actions-button{display:flex;align-items:center;text-align:justify}.actions-button-text{margin-left:10px}.sendLabel{margin:10px auto;display:flex;justify-content:center;align-items:center;text-align:center}.sendCard-container{flex-wrap:wrap}.sendCard-container mat-icon{width:24px}@media(min-width:600px){.sendCard-container{display:flex;justify-content:flex-end}.sentCard-container{display:flex;justify-content:end}.send-button{width:auto;display:flex;justify-content:center;align-items:center;margin-left:8px}}@media(max-width:599px){.sendCard-container{display:flex;justify-content:center}.send-button{width:auto;display:flex;justify-content:center;align-items:center;margin-left:0}.sentCard-container{display:flex;justify-content:space-evenly}}\n"], dependencies: [{ kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i6$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i2$d.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$4.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i7$4.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i7$4.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i7$4.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i4.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { 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"] }, { kind: "directive", type: i4.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "component", type: i9$3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MainTitleComponent, selector: "wapp-main-title", inputs: ["title", "extraClassToApply"] }, { kind: "component", type: CarouselComponent, selector: "wapp-carousel", inputs: ["images", "allowThumbnail", "infiniteCarousel", "forceMobile", "height", "isDevModeActive", "isNoImage", "onHoverImageTooltip"], outputs: ["onSetImageEvent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: WMaterialServiceViewComponent, isStandalone: false, selector: "w-material-service-view", inputs: { forceMobile: "forceMobile", wappingServicesTranslations: "wappingServicesTranslations", canParticipateDraw: "canParticipateDraw", wappingService: "wappingService", isDevModeActive: "isDevModeActive", defaultImage: "defaultImage", croppedImageConfiguration: "croppedImageConfiguration", croppedDialogTranslations: "croppedDialogTranslations", isNoImage: "isNoImage", onHoverImageTooltip: "onHoverImageTooltip" }, outputs: { wappingServiceSelected: "wappingServiceSelected", participateDraw: "participateDraw", onDefaultImageEvent: "onDefaultImageEvent" }, usesOnChanges: true, ngImport: i0, template: "@if(wappingService && (!forceMobile)){\r\n  <wapp-main-title [title]=\"wappingService.tile3\" fxHide.xs></wapp-main-title>\r\n}\r\n@if(wappingService){\r\n<div class=\"service-detail-center\" \r\n        [ngClass]=\"{'force-mobile': forceMobile}\"\r\n        [fxLayout]=\"forceMobile ? 'column' : 'row'\"\r\n        [fxLayout.xs]=\"'column'\"\r\n        [fxLayout.sm]=\"'column'\">\r\n    <!--service image-->\r\n    <div [ngClass]=\"{'service-view-no-margin': forceMobile, 'service-view': !forceMobile}\" fxLayout=\"column\">\r\n        <!--tile 1-->\r\n        <!-- @if(wappingService.tile1 && wappingService.tile1 != ''){\r\n          <div \r\n              [ngClass]=\"{'service-image-tile' : !hasHtml(wappingService.tile1),\r\n                          'template-service-image-tile' : hasHtml(wappingService.tile1)}\"\r\n              fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n              <div [ngClass]=\"{'tile-view-no-html': !hasHtml(wappingService.tile1)}\" class=\"service-view-tile1\" \r\n                  [innerHtml]=\"wappingService.tile1\"></div>\r\n          </div>\r\n        } -->\r\n        @if(!hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != ''){\r\n          <div class=\"service-image-title\">\r\n            <div class=\"service-view-tile1-no-html\" [innerHTML]=\"wappingService.tile1\"></div>\r\n          </div>\r\n        }\r\n\r\n        @if(hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != ''){\r\n          <div class=\"template-service-image-tile service-card-image-title\">\r\n            <div class=\"service-view-tile1\" [innerHTML]=\"wappingService.tile1\"></div>\r\n          </div>\r\n        }\r\n        <!--slideshow-->\r\n        <wapp-carousel [isDevModeActive]=\"isDevModeActive\" [forceMobile]=\"forceMobile\" [images]=\"wappingServiceImages\" [isNoImage]=\"isNoImage\" (onSetImageEvent)=\"setImage()\" [onHoverImageTooltip]=\"onHoverImageTooltip\"></wapp-carousel>\r\n        <!--tile 2-->\r\n        @if(wappingService.tile2){\r\n          <div fxFlex fxLayout=\"row\"\r\n              fxLayoutAlign=\"center center\"\r\n              fxLayoutGap=\"5px\"\r\n              [ngClass]=\"{'template-service-tile': hasHtml(wappingService.tile2),\r\n                  'service-tile' : !hasHtml(wappingService.tile2)}\">\r\n              <div class=\"service-view-tile2\" [innerHtml]=\"wappingService.tile2\"></div>\r\n          </div>\r\n        }\r\n        <!--activate toggle-->\r\n        @if(wappingService.allowSelect && allowSelectSendGiftCard && !isDrawService){\r\n          <mat-slide-toggle class=\"service-select-toggle\" color=\"accent\"\r\n                          [disabled]=\"disabledToggle\"\r\n                          [(ngModel)]=\"wappingService.active\"\r\n                          (change)=\"selectWappingService()\">{{ serviceStatus }}</mat-slide-toggle>\r\n        }\r\n        @if(isDrawService){\r\n          <button mat-flat-button \r\n                  class=\"service-select-toggle\"\r\n                  color=\"accent\"\r\n                  [disabled]=\"!canParticipateDraw\"\r\n                  (click)=\"triggerParticipate()\">\r\n              <span>{{ wappingServicesTranslations?.participate }}</span>\r\n          </button>\r\n        }\r\n        \r\n    </div>\r\n    <!--service info-->\r\n    <div class=\"service-info-container\" [ngClass]=\"{'service-info-container-padding': forceMobile}\" fxLayout=\"column\">\r\n        <div class=\"service-tile-detail-container\" fxLayout=\"column\">\r\n        <!--tile 3-->\r\n        @if(!forceMobile){\r\n          <div \r\n              [innerHtml]=\"wappingService.tile3\" fxHide fxShow.xs\r\n              class=\"service-name mat-title\">\r\n          </div>\r\n        }\r\n        @if(forceMobile){\r\n          <div \r\n              [innerHtml]=\"wappingService.tile3\"\r\n              class=\"service-name mat-title\">\r\n          </div>\r\n        }\r\n        <!--tileDetail 1-->\r\n        <div class=\"service-tile-detail\" fxLayout=\"row\">\r\n            <span [innerHtml]=\"wappingService.tileDetail1\"></span>\r\n        </div>\r\n        </div>\r\n        <!--link-->\r\n        @if(wappingService.titleLinkUrl && wappingService.linkUrl){\r\n          <div class=\"service-link-container\">\r\n            <a class=\"service-link\" href=\"{{wappingService.linkUrl}}\" target=\"_blank\">\r\n                <mat-icon class=\"service-link-icon\" svgIcon=\"share_square\"></mat-icon><span>{{wappingService.titleLinkUrl}}</span>\r\n            </a>\r\n          </div>\r\n        }\r\n    </div>\r\n</div>\r\n}\r\n", styles: [".back-button{width:20px!important;height:20px!important;background-color:#a5000000;padding:0;border:none;cursor:pointer}.back-button-over-image{width:37px!important;height:37px!important;background-color:#ffffffb0;position:absolute;top:13px;left:11px;z-index:10;border-radius:50%;border:none;display:flex;justify-content:center;align-items:center;cursor:pointer}::ng-deep .back-button .mat-button-wrapper,::ng-deep .back-button-over-image .mat-button-wrapper{padding:4px 0!important}.back-button .mat-button-wrapper,.back-button-over-image .mat-button-wrapper{line-height:14px!important}.back-button .mat-icon{width:20px;height:20px}.back-button-over-image .mat-icon{width:16px;height:16px}::ng-deep .mat-mdc-slide-toggle .mdc-switch{width:var(--mdc-switch-track-width, 36px)!important}::ng-deep .mat-mdc-slide-toggle-touch-target{position:absolute;top:50%;left:50%;height:var(--mat-slide-toggle-touch-target-size, 48px);width:100%;transform:translate(-50%,-50%);display:var(--mat-slide-toggle-touch-target-display, block)}::ng-deep .mdc-switch__track{border-radius:var(--mdc-switch-track-shape, 7px)!important;height:var(--mdc-switch-track-height, 14px)!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:before{background:var(--mdc-switch-unselected-track-color, #a50000)!important}::ng-deep .mdc-switch__track:before{border-width:0px!important;transition:transform 75ms 0ms cubic-bezier(0,0,.2,1)!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:after{background:var(--mdc-switch-selected-hover-track-color, #10c638)!important}::ng-deep .mdc-switch__track:after{transition:transform 75ms 0ms cubic-bezier(.4,0,.6,1)!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch .mdc-switch__handle-track{width:calc(100% - var(--mdc-switch-handle-width, 20px))!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch .mdc-switch__handle{width:var(--mdc-switch-handle-width, 20px)!important;border-radius:var(--mdc-switch-handle-shape, 10px)!important;height:var(--mdc-switch-handle-height, 20px)!important;transition:none!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch .mdc-switch__handle:before{background:var(--mdc-switch-handle-surface-color, var(--mdc-theme-surface, #fff))!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__shadow{box-shadow:var(--mdc-switch-handle-elevation, 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12))!important}::ng-deep .mdc-elevation-overlay{inset:0!important;position:absolute!important;border-radius:inherit!important;pointer-events:none!important;opacity:var(--mdc-elevation-overlay-opacity, 0)!important;transition:opacity .28s cubic-bezier(.4,0,.2,1)!important;background-color:var(--mdc-elevation-overlay-color, #fff)!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch .mdc-switch__ripple{height:var(--mdc-switch-state-layer-size, 48px)!important;width:var(--mdc-switch-state-layer-size, 48px)!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--unselected:enabled .mdc-switch__icon{fill:var(--mdc-switch-unselected-icon-color, var(--mdc-theme-on-primary, #fff))!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--unselected .mdc-switch__icon{width:var(--mdc-switch-unselected-icon-size, 18px)!important;height:var(--mdc-switch-unselected-icon-size, 18px)!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--unselected:enabled .mdc-switch__handle:after{background:var(--mdc-switch-unselected-handle-color, #fff)!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch--selected .mdc-switch__handle:has(.mdc-switch__icons),::ng-deep .mat-mdc-slide-toggle .mdc-switch--unselected .mdc-switch__handle:has(.mdc-switch__icons){margin:0!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--selected:enabled .mdc-switch__icon{fill:var(--mdc-switch-selected-icon-color, var(--mdc-theme-on-primary, #fff))!important}::ng-deep .mdc-switch--selected:enabled:focus .mdc-switch__handle:after,::ng-deep .mdc-switch--selected:enabled:hover:not(:focus):not(:active) .mdc-switch__handle:after{background:#fff!important}:host ::ng-deep .mdc-form-field>label{font:400 14px/25px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch{margin-right:8px!important}@media(max-width:959px){.service-detail-center{align-items:center}}.service-view{position:relative;margin-right:30px}.service-view-no-margin{position:relative;margin-right:0!important}@media(min-width:600px)and (max-width:959px){.service-view{margin-right:0;width:100%}}@media(max-width:599px){.service-view{margin-right:0;width:100%}}.service-image-tile,.template-service-image-tile{position:absolute!important;width:100%!important;min-height:32px!important;top:0!important;z-index:9!important}.service-image-title{position:absolute;top:0!important;right:0!important;left:0!important;z-index:2;margin:0 60px!important;min-height:22px!important;border-radius:0 0 4.3118px 4.3118px!important;background-color:#0e0c0c;color:#fff;display:flex;justify-content:center;align-items:center;padding:4px}.service-view-tile1-no-html{justify-content:center!important;align-items:center!important;display:flex!important;text-align:center!important}.service-view-tile1{width:100%;min-height:32px}.service-tile{background-color:#0e0c0c;color:#fff;padding:14px;max-height:48px;display:flex;align-items:center;text-align:center;font:400 15px/17px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}.template-service-tile{max-height:48px;display:flex;align-items:center;text-align:center;font:400 15px/17px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}.service-view-tile2{width:100%}.service-tile-border-bottom-radius{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.service-select-toggle{margin-top:25px;margin-right:auto;margin-left:auto;display:flex;align-items:center;text-align:left;max-width:none!important}.service-select-toggle *{max-width:none!important}.service-info-container{width:100%;height:250px}.service-info-container-padding{padding-right:15px;padding-left:15px}@media(max-width:599px){.service-info-container{padding-right:15px;padding-left:15px}}.service-name{margin-top:0;text-align:justify;white-space:pre-line;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;-moz-box-orient:vertical}@media(min-width:600px)and (max-width:959px){.service-name{margin-top:30px;margin-right:0}}@media(max-width:599px){.service-name{margin-top:30px;margin-right:0}}.service-description{margin-top:0;text-align:left;white-space:pre-line;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:10;-webkit-box-orient:vertical;-moz-box-orient:vertical}@media(min-width:600px)and (max-width:959px){.service-description{margin-top:20px;margin-right:0}}@media(max-width:599px){.service-description{margin-top:15px;margin-right:0}}.service-show-more-container{margin-top:5px;width:fit-content;align-items:center;cursor:pointer;display:flex;text-align:left}.service-show-more-vector{width:5px!important;margin-left:10px}.service-tile-detail-container{margin-top:5px;display:flex;text-align:justify}@media(max-width:599px){.service-tile-detail-container{margin-top:20px}}.service-tile-detail{margin-top:20px;font:400 14px/25px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}@media(max-width:599px){.service-tile-detail{margin-top:20px}}.service-tile-detail-icon{margin-right:10px}.service-link-container{height:100%;justify-content:flex-end;align-items:flex-end;display:flex;text-align:justify}@media(max-width:599px){.service-link-container{margin-top:20px;justify-content:flex-start}}.service-link{display:flex;align-items:center;cursor:pointer;text-decoration:none;color:inherit}.service-link-icon{margin-right:10px}.service-options-container{border-top:1px solid #eee;margin-top:80px}@media(max-width:599px){.service-options-container{margin-top:40px;padding-right:15px;padding-left:15px}}.service-option{height:48px;border-bottom:1px solid #eee;cursor:pointer;display:flex;align-items:center;text-align:left}.service-option-vector{width:10px!important}.actions-container{margin-top:40px}.actions-button{display:flex;align-items:center;text-align:justify}.actions-button-text{margin-left:10px}.sendLabel{margin:10px auto;display:flex;justify-content:center;align-items:center;text-align:center}.sendCard-container{flex-wrap:wrap}.sendCard-container mat-icon{width:24px}@media(min-width:600px){.sendCard-container{display:flex;justify-content:flex-end}.sentCard-container{display:flex;justify-content:end}.send-button{width:auto;display:flex;justify-content:center;align-items:center;margin-left:8px}}@media(max-width:599px){.sendCard-container{display:flex;justify-content:center}.send-button{width:auto;display:flex;justify-content:center;align-items:center;margin-left:0}.sentCard-container{display:flex;justify-content:space-evenly}}\n"], dependencies: [{ kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i6$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i2$d.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$4.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i7$4.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i7$4.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i7$4.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i4.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { 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"] }, { kind: "component", type: i9$3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MainTitleComponent, selector: "wapp-main-title", inputs: ["title", "extraClassToApply"] }, { kind: "component", type: CarouselComponent, selector: "wapp-carousel", inputs: ["images", "allowThumbnail", "infiniteCarousel", "forceMobile", "height", "isDevModeActive", "isNoImage", "onHoverImageTooltip"], outputs: ["onSetImageEvent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WMaterialServiceViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'w-material-service-view', standalone: false, template: "@if(wappingService && (!forceMobile)){\r\n  <wapp-main-title [title]=\"wappingService.tile3\" fxHide.xs></wapp-main-title>\r\n}\r\n@if(wappingService){\r\n<div class=\"service-detail-center\" \r\n        [ngClass]=\"{'force-mobile': forceMobile}\"\r\n        [fxLayout]=\"forceMobile ? 'column' : 'row'\"\r\n        [fxLayout.xs]=\"'column'\"\r\n        [fxLayout.sm]=\"'column'\">\r\n    <!--service image-->\r\n    <div [ngClass]=\"{'service-view-no-margin': forceMobile, 'service-view': !forceMobile}\" fxLayout=\"column\">\r\n        <!--tile 1-->\r\n        @if(wappingService.tile1 && wappingService.tile1 != ''){\r\n          <div \r\n              [ngClass]=\"{'service-image-tile' : !hasHtml(wappingService.tile1),\r\n                          'template-service-image-tile' : hasHtml(wappingService.tile1)}\"\r\n              fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n              <div [ngClass]=\"{'tile-view-no-html': !hasHtml(wappingService.tile1)}\" class=\"service-view-tile1\" \r\n                  [innerHtml]=\"wappingService.tile1\"></div>\r\n          </div>\r\n        }\r\n        <!--slideshow-->\r\n        <wapp-carousel [isDevModeActive]=\"isDevModeActive\" [forceMobile]=\"forceMobile\" [images]=\"wappingServiceImages\" [isNoImage]=\"isNoImage\" (onSetImageEvent)=\"setImage()\" [onHoverImageTooltip]=\"onHoverImageTooltip\"></wapp-carousel>\r\n        <!--tile 2-->\r\n        @if(wappingService.tile2){\r\n          <div fxFlex fxLayout=\"row\"\r\n              fxLayoutAlign=\"center center\"\r\n              fxLayoutGap=\"5px\"\r\n              [ngClass]=\"{'service-tile-border-bottom-radius': !wappingService.tile4,\r\n                  'template-service-tile': hasHtml(wappingService.tile2),\r\n                  'service-tile' : !hasHtml(wappingService.tile2)}\"\r\n              [ngStyle]=\"!hasHtml(wappingService.tile2) ? { 'background-color': '#0e0c0c', 'color': '#fff' } : {'background-color': 'transparent !important', 'color': 'transparent !important'}\">\r\n              <div [innerHtml]=\"wappingService.tile2\"></div>\r\n          </div>\r\n        }\r\n        <!--activate toggle-->\r\n        @if(wappingService.allowSelect && allowSelectSendGiftCard && !isDrawService){\r\n          <mat-slide-toggle class=\"service-select-toggle\" color=\"accent\"\r\n                          [disabled]=\"disabledToggle\"\r\n                          [(ngModel)]=\"wappingService.active\"\r\n                          (change)=\"selectWappingService()\">{{ serviceStatus }}</mat-slide-toggle>\r\n        }\r\n        @if(isDrawService){\r\n          <button mat-flat-button \r\n                  class=\"service-select-toggle\"\r\n                  color=\"accent\"\r\n                  [disabled]=\"!canParticipateDraw\"\r\n                  (click)=\"triggerParticipate()\">\r\n              <span>{{ wappingServicesTranslations?.participate }}</span>\r\n          </button>\r\n        }\r\n        \r\n    </div>\r\n    <!--service info-->\r\n    <div class=\"service-info-container\" [ngClass]=\"{'service-info-container-padding': forceMobile}\" fxLayout=\"column\">\r\n        <div class=\"service-tile-detail-container\" fxLayout=\"column\">\r\n        <!--tile 3-->\r\n        @if(!forceMobile){\r\n          <div \r\n              [innerHtml]=\"wappingService.tile3\" fxHide fxShow.xs\r\n              class=\"service-name mat-title\">\r\n          </div>\r\n        }\r\n        @if(forceMobile){\r\n          <div \r\n              [innerHtml]=\"wappingService.tile3\"\r\n              class=\"service-name mat-title\">\r\n          </div>\r\n        }\r\n        <!--tileDetail 1-->\r\n        <div class=\"service-tile-detail\" fxLayout=\"row\">\r\n            <span [innerHtml]=\"wappingService.tileDetail1\"></span>\r\n        </div>\r\n        </div>\r\n        <!--link-->\r\n        @if(wappingService.titleLinkUrl && wappingService.linkUrl){\r\n          <div class=\"service-link-container\">\r\n            <a class=\"service-link\" href=\"{{wappingService.linkUrl}}\" target=\"_blank\">\r\n                <mat-icon class=\"service-link-icon\" svgIcon=\"share_square\"></mat-icon><span>{{wappingService.titleLinkUrl}}</span>\r\n            </a>\r\n          </div>\r\n        }\r\n    </div>\r\n</div>\r\n}\r\n", styles: [".back-button{width:20px!important;height:20px!important;background-color:#a5000000;padding:0;border:none;cursor:pointer}.back-button-over-image{width:37px!important;height:37px!important;background-color:#ffffffb0;position:absolute;top:13px;left:11px;z-index:10;border-radius:50%;border:none;display:flex;justify-content:center;align-items:center;cursor:pointer}::ng-deep .back-button .mat-button-wrapper,::ng-deep .back-button-over-image .mat-button-wrapper{padding:4px 0!important}.back-button .mat-button-wrapper,.back-button-over-image .mat-button-wrapper{line-height:14px!important}.back-button .mat-icon{width:20px;height:20px}.back-button-over-image .mat-icon{width:16px;height:16px}::ng-deep .mat-mdc-slide-toggle .mdc-switch{width:var(--mdc-switch-track-width, 36px)!important}::ng-deep .mat-mdc-slide-toggle-touch-target{position:absolute;top:50%;left:50%;height:var(--mat-slide-toggle-touch-target-size, 48px);width:100%;transform:translate(-50%,-50%);display:var(--mat-slide-toggle-touch-target-display, block)}::ng-deep .mdc-switch__track{border-radius:var(--mdc-switch-track-shape, 7px)!important;height:var(--mdc-switch-track-height, 14px)!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:before{background:var(--mdc-switch-unselected-track-color, #a50000)!important}::ng-deep .mdc-switch__track:before{border-width:0px!important;transition:transform 75ms 0ms cubic-bezier(0,0,.2,1)!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:after{background:var(--mdc-switch-selected-hover-track-color, #10c638)!important}::ng-deep .mdc-switch__track:after{transition:transform 75ms 0ms cubic-bezier(.4,0,.6,1)!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch .mdc-switch__handle-track{width:calc(100% - var(--mdc-switch-handle-width, 20px))!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch .mdc-switch__handle{width:var(--mdc-switch-handle-width, 20px)!important;border-radius:var(--mdc-switch-handle-shape, 10px)!important;height:var(--mdc-switch-handle-height, 20px)!important;transition:none!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch .mdc-switch__handle:before{background:var(--mdc-switch-handle-surface-color, var(--mdc-theme-surface, #fff))!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__shadow{box-shadow:var(--mdc-switch-handle-elevation, 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12))!important}::ng-deep .mdc-elevation-overlay{inset:0!important;position:absolute!important;border-radius:inherit!important;pointer-events:none!important;opacity:var(--mdc-elevation-overlay-opacity, 0)!important;transition:opacity .28s cubic-bezier(.4,0,.2,1)!important;background-color:var(--mdc-elevation-overlay-color, #fff)!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch .mdc-switch__ripple{height:var(--mdc-switch-state-layer-size, 48px)!important;width:var(--mdc-switch-state-layer-size, 48px)!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--unselected:enabled .mdc-switch__icon{fill:var(--mdc-switch-unselected-icon-color, var(--mdc-theme-on-primary, #fff))!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--unselected .mdc-switch__icon{width:var(--mdc-switch-unselected-icon-size, 18px)!important;height:var(--mdc-switch-unselected-icon-size, 18px)!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--unselected:enabled .mdc-switch__handle:after{background:var(--mdc-switch-unselected-handle-color, #fff)!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch--selected .mdc-switch__handle:has(.mdc-switch__icons),::ng-deep .mat-mdc-slide-toggle .mdc-switch--unselected .mdc-switch__handle:has(.mdc-switch__icons){margin:0!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--selected:enabled .mdc-switch__icon{fill:var(--mdc-switch-selected-icon-color, var(--mdc-theme-on-primary, #fff))!important}::ng-deep .mdc-switch--selected:enabled:focus .mdc-switch__handle:after,::ng-deep .mdc-switch--selected:enabled:hover:not(:focus):not(:active) .mdc-switch__handle:after{background:#fff!important}:host ::ng-deep .mdc-form-field>label{font:400 14px/25px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch{margin-right:8px!important}@media(max-width:959px){.service-detail-center{align-items:center}}.service-view{position:relative;margin-right:30px}.service-view-no-margin{position:relative;margin-right:0!important}@media(min-width:600px)and (max-width:959px){.service-view{margin-right:0;width:100%}}@media(max-width:599px){.service-view{margin-right:0;width:100%}}.service-image-tile,.template-service-image-tile{position:absolute!important;width:100%!important;min-height:32px!important;top:0!important;z-index:9!important}.tile-view-no-html{background-color:#000;color:#fff;margin-left:60px;margin-right:60px;border-radius:0 0 4.3118px 4.3118px!important;justify-content:center!important;align-items:center!important;display:flex!important;text-align:center!important;padding:4px!important}.service-view-tile1{width:100%;min-height:32px}.service-tile,.template-service-tile{padding:14px;max-height:48px;display:flex;align-items:center;text-align:center;font:400 15px/17px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}.service-tile-border-bottom-radius{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.service-select-toggle{margin-top:25px;margin-right:auto;margin-left:auto;display:flex;align-items:center;text-align:left;max-width:none!important}.service-select-toggle *{max-width:none!important}.service-info-container{width:100%;height:250px}.service-info-container-padding{padding-right:15px;padding-left:15px}@media(max-width:599px){.service-info-container{padding-right:15px;padding-left:15px}}.service-name{margin-top:0;text-align:justify;white-space:pre-line;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;-moz-box-orient:vertical}@media(min-width:600px)and (max-width:959px){.service-name{margin-top:30px;margin-right:0}}@media(max-width:599px){.service-name{margin-top:30px;margin-right:0}}.service-description{margin-top:0;text-align:left;white-space:pre-line;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:10;-webkit-box-orient:vertical;-moz-box-orient:vertical}@media(min-width:600px)and (max-width:959px){.service-description{margin-top:20px;margin-right:0}}@media(max-width:599px){.service-description{margin-top:15px;margin-right:0}}.service-show-more-container{margin-top:5px;width:fit-content;align-items:center;cursor:pointer;display:flex;text-align:left}.service-show-more-vector{width:5px!important;margin-left:10px}.service-tile-detail-container{margin-top:5px;display:flex;text-align:justify}@media(max-width:599px){.service-tile-detail-container{margin-top:20px}}.service-tile-detail{margin-top:20px;font:400 14px/25px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}@media(max-width:599px){.service-tile-detail{margin-top:20px}}.service-tile-detail-icon{margin-right:10px}.service-link-container{height:100%;justify-content:flex-end;align-items:flex-end;display:flex;text-align:justify}@media(max-width:599px){.service-link-container{margin-top:20px;justify-content:flex-start}}.service-link{display:flex;align-items:center;cursor:pointer;text-decoration:none;color:inherit}.service-link-icon{margin-right:10px}.service-options-container{border-top:1px solid #eee;margin-top:80px}@media(max-width:599px){.service-options-container{margin-top:40px;padding-right:15px;padding-left:15px}}.service-option{height:48px;border-bottom:1px solid #eee;cursor:pointer;display:flex;align-items:center;text-align:left}.service-option-vector{width:10px!important}.actions-container{margin-top:40px}.actions-button{display:flex;align-items:center;text-align:justify}.actions-button-text{margin-left:10px}.sendLabel{margin:10px auto;display:flex;justify-content:center;align-items:center;text-align:center}.sendCard-container{flex-wrap:wrap}.sendCard-container mat-icon{width:24px}@media(min-width:600px){.sendCard-container{display:flex;justify-content:flex-end}.sentCard-container{display:flex;justify-content:end}.send-button{width:auto;display:flex;justify-content:center;align-items:center;margin-left:8px}}@media(max-width:599px){.sendCard-container{display:flex;justify-content:center}.send-button{width:auto;display:flex;justify-content:center;align-items:center;margin-left:0}.sentCard-container{display:flex;justify-content:space-evenly}}\n"] }]
+            args: [{ selector: 'w-material-service-view', standalone: false, template: "@if(wappingService && (!forceMobile)){\r\n  <wapp-main-title [title]=\"wappingService.tile3\" fxHide.xs></wapp-main-title>\r\n}\r\n@if(wappingService){\r\n<div class=\"service-detail-center\" \r\n        [ngClass]=\"{'force-mobile': forceMobile}\"\r\n        [fxLayout]=\"forceMobile ? 'column' : 'row'\"\r\n        [fxLayout.xs]=\"'column'\"\r\n        [fxLayout.sm]=\"'column'\">\r\n    <!--service image-->\r\n    <div [ngClass]=\"{'service-view-no-margin': forceMobile, 'service-view': !forceMobile}\" fxLayout=\"column\">\r\n        <!--tile 1-->\r\n        <!-- @if(wappingService.tile1 && wappingService.tile1 != ''){\r\n          <div \r\n              [ngClass]=\"{'service-image-tile' : !hasHtml(wappingService.tile1),\r\n                          'template-service-image-tile' : hasHtml(wappingService.tile1)}\"\r\n              fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n              <div [ngClass]=\"{'tile-view-no-html': !hasHtml(wappingService.tile1)}\" class=\"service-view-tile1\" \r\n                  [innerHtml]=\"wappingService.tile1\"></div>\r\n          </div>\r\n        } -->\r\n        @if(!hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != ''){\r\n          <div class=\"service-image-title\">\r\n            <div class=\"service-view-tile1-no-html\" [innerHTML]=\"wappingService.tile1\"></div>\r\n          </div>\r\n        }\r\n\r\n        @if(hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != ''){\r\n          <div class=\"template-service-image-tile service-card-image-title\">\r\n            <div class=\"service-view-tile1\" [innerHTML]=\"wappingService.tile1\"></div>\r\n          </div>\r\n        }\r\n        <!--slideshow-->\r\n        <wapp-carousel [isDevModeActive]=\"isDevModeActive\" [forceMobile]=\"forceMobile\" [images]=\"wappingServiceImages\" [isNoImage]=\"isNoImage\" (onSetImageEvent)=\"setImage()\" [onHoverImageTooltip]=\"onHoverImageTooltip\"></wapp-carousel>\r\n        <!--tile 2-->\r\n        @if(wappingService.tile2){\r\n          <div fxFlex fxLayout=\"row\"\r\n              fxLayoutAlign=\"center center\"\r\n              fxLayoutGap=\"5px\"\r\n              [ngClass]=\"{'template-service-tile': hasHtml(wappingService.tile2),\r\n                  'service-tile' : !hasHtml(wappingService.tile2)}\">\r\n              <div class=\"service-view-tile2\" [innerHtml]=\"wappingService.tile2\"></div>\r\n          </div>\r\n        }\r\n        <!--activate toggle-->\r\n        @if(wappingService.allowSelect && allowSelectSendGiftCard && !isDrawService){\r\n          <mat-slide-toggle class=\"service-select-toggle\" color=\"accent\"\r\n                          [disabled]=\"disabledToggle\"\r\n                          [(ngModel)]=\"wappingService.active\"\r\n                          (change)=\"selectWappingService()\">{{ serviceStatus }}</mat-slide-toggle>\r\n        }\r\n        @if(isDrawService){\r\n          <button mat-flat-button \r\n                  class=\"service-select-toggle\"\r\n                  color=\"accent\"\r\n                  [disabled]=\"!canParticipateDraw\"\r\n                  (click)=\"triggerParticipate()\">\r\n              <span>{{ wappingServicesTranslations?.participate }}</span>\r\n          </button>\r\n        }\r\n        \r\n    </div>\r\n    <!--service info-->\r\n    <div class=\"service-info-container\" [ngClass]=\"{'service-info-container-padding': forceMobile}\" fxLayout=\"column\">\r\n        <div class=\"service-tile-detail-container\" fxLayout=\"column\">\r\n        <!--tile 3-->\r\n        @if(!forceMobile){\r\n          <div \r\n              [innerHtml]=\"wappingService.tile3\" fxHide fxShow.xs\r\n              class=\"service-name mat-title\">\r\n          </div>\r\n        }\r\n        @if(forceMobile){\r\n          <div \r\n              [innerHtml]=\"wappingService.tile3\"\r\n              class=\"service-name mat-title\">\r\n          </div>\r\n        }\r\n        <!--tileDetail 1-->\r\n        <div class=\"service-tile-detail\" fxLayout=\"row\">\r\n            <span [innerHtml]=\"wappingService.tileDetail1\"></span>\r\n        </div>\r\n        </div>\r\n        <!--link-->\r\n        @if(wappingService.titleLinkUrl && wappingService.linkUrl){\r\n          <div class=\"service-link-container\">\r\n            <a class=\"service-link\" href=\"{{wappingService.linkUrl}}\" target=\"_blank\">\r\n                <mat-icon class=\"service-link-icon\" svgIcon=\"share_square\"></mat-icon><span>{{wappingService.titleLinkUrl}}</span>\r\n            </a>\r\n          </div>\r\n        }\r\n    </div>\r\n</div>\r\n}\r\n", styles: [".back-button{width:20px!important;height:20px!important;background-color:#a5000000;padding:0;border:none;cursor:pointer}.back-button-over-image{width:37px!important;height:37px!important;background-color:#ffffffb0;position:absolute;top:13px;left:11px;z-index:10;border-radius:50%;border:none;display:flex;justify-content:center;align-items:center;cursor:pointer}::ng-deep .back-button .mat-button-wrapper,::ng-deep .back-button-over-image .mat-button-wrapper{padding:4px 0!important}.back-button .mat-button-wrapper,.back-button-over-image .mat-button-wrapper{line-height:14px!important}.back-button .mat-icon{width:20px;height:20px}.back-button-over-image .mat-icon{width:16px;height:16px}::ng-deep .mat-mdc-slide-toggle .mdc-switch{width:var(--mdc-switch-track-width, 36px)!important}::ng-deep .mat-mdc-slide-toggle-touch-target{position:absolute;top:50%;left:50%;height:var(--mat-slide-toggle-touch-target-size, 48px);width:100%;transform:translate(-50%,-50%);display:var(--mat-slide-toggle-touch-target-display, block)}::ng-deep .mdc-switch__track{border-radius:var(--mdc-switch-track-shape, 7px)!important;height:var(--mdc-switch-track-height, 14px)!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:before{background:var(--mdc-switch-unselected-track-color, #a50000)!important}::ng-deep .mdc-switch__track:before{border-width:0px!important;transition:transform 75ms 0ms cubic-bezier(0,0,.2,1)!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:after{background:var(--mdc-switch-selected-hover-track-color, #10c638)!important}::ng-deep .mdc-switch__track:after{transition:transform 75ms 0ms cubic-bezier(.4,0,.6,1)!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch .mdc-switch__handle-track{width:calc(100% - var(--mdc-switch-handle-width, 20px))!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch .mdc-switch__handle{width:var(--mdc-switch-handle-width, 20px)!important;border-radius:var(--mdc-switch-handle-shape, 10px)!important;height:var(--mdc-switch-handle-height, 20px)!important;transition:none!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch .mdc-switch__handle:before{background:var(--mdc-switch-handle-surface-color, var(--mdc-theme-surface, #fff))!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__shadow{box-shadow:var(--mdc-switch-handle-elevation, 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12))!important}::ng-deep .mdc-elevation-overlay{inset:0!important;position:absolute!important;border-radius:inherit!important;pointer-events:none!important;opacity:var(--mdc-elevation-overlay-opacity, 0)!important;transition:opacity .28s cubic-bezier(.4,0,.2,1)!important;background-color:var(--mdc-elevation-overlay-color, #fff)!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch .mdc-switch__ripple{height:var(--mdc-switch-state-layer-size, 48px)!important;width:var(--mdc-switch-state-layer-size, 48px)!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--unselected:enabled .mdc-switch__icon{fill:var(--mdc-switch-unselected-icon-color, var(--mdc-theme-on-primary, #fff))!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--unselected .mdc-switch__icon{width:var(--mdc-switch-unselected-icon-size, 18px)!important;height:var(--mdc-switch-unselected-icon-size, 18px)!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--unselected:enabled .mdc-switch__handle:after{background:var(--mdc-switch-unselected-handle-color, #fff)!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch--selected .mdc-switch__handle:has(.mdc-switch__icons),::ng-deep .mat-mdc-slide-toggle .mdc-switch--unselected .mdc-switch__handle:has(.mdc-switch__icons){margin:0!important}::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--selected:enabled .mdc-switch__icon{fill:var(--mdc-switch-selected-icon-color, var(--mdc-theme-on-primary, #fff))!important}::ng-deep .mdc-switch--selected:enabled:focus .mdc-switch__handle:after,::ng-deep .mdc-switch--selected:enabled:hover:not(:focus):not(:active) .mdc-switch__handle:after{background:#fff!important}:host ::ng-deep .mdc-form-field>label{font:400 14px/25px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch{margin-right:8px!important}@media(max-width:959px){.service-detail-center{align-items:center}}.service-view{position:relative;margin-right:30px}.service-view-no-margin{position:relative;margin-right:0!important}@media(min-width:600px)and (max-width:959px){.service-view{margin-right:0;width:100%}}@media(max-width:599px){.service-view{margin-right:0;width:100%}}.service-image-tile,.template-service-image-tile{position:absolute!important;width:100%!important;min-height:32px!important;top:0!important;z-index:9!important}.service-image-title{position:absolute;top:0!important;right:0!important;left:0!important;z-index:2;margin:0 60px!important;min-height:22px!important;border-radius:0 0 4.3118px 4.3118px!important;background-color:#0e0c0c;color:#fff;display:flex;justify-content:center;align-items:center;padding:4px}.service-view-tile1-no-html{justify-content:center!important;align-items:center!important;display:flex!important;text-align:center!important}.service-view-tile1{width:100%;min-height:32px}.service-tile{background-color:#0e0c0c;color:#fff;padding:14px;max-height:48px;display:flex;align-items:center;text-align:center;font:400 15px/17px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}.template-service-tile{max-height:48px;display:flex;align-items:center;text-align:center;font:400 15px/17px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}.service-view-tile2{width:100%}.service-tile-border-bottom-radius{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.service-select-toggle{margin-top:25px;margin-right:auto;margin-left:auto;display:flex;align-items:center;text-align:left;max-width:none!important}.service-select-toggle *{max-width:none!important}.service-info-container{width:100%;height:250px}.service-info-container-padding{padding-right:15px;padding-left:15px}@media(max-width:599px){.service-info-container{padding-right:15px;padding-left:15px}}.service-name{margin-top:0;text-align:justify;white-space:pre-line;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;-moz-box-orient:vertical}@media(min-width:600px)and (max-width:959px){.service-name{margin-top:30px;margin-right:0}}@media(max-width:599px){.service-name{margin-top:30px;margin-right:0}}.service-description{margin-top:0;text-align:left;white-space:pre-line;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:10;-webkit-box-orient:vertical;-moz-box-orient:vertical}@media(min-width:600px)and (max-width:959px){.service-description{margin-top:20px;margin-right:0}}@media(max-width:599px){.service-description{margin-top:15px;margin-right:0}}.service-show-more-container{margin-top:5px;width:fit-content;align-items:center;cursor:pointer;display:flex;text-align:left}.service-show-more-vector{width:5px!important;margin-left:10px}.service-tile-detail-container{margin-top:5px;display:flex;text-align:justify}@media(max-width:599px){.service-tile-detail-container{margin-top:20px}}.service-tile-detail{margin-top:20px;font:400 14px/25px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}@media(max-width:599px){.service-tile-detail{margin-top:20px}}.service-tile-detail-icon{margin-right:10px}.service-link-container{height:100%;justify-content:flex-end;align-items:flex-end;display:flex;text-align:justify}@media(max-width:599px){.service-link-container{margin-top:20px;justify-content:flex-start}}.service-link{display:flex;align-items:center;cursor:pointer;text-decoration:none;color:inherit}.service-link-icon{margin-right:10px}.service-options-container{border-top:1px solid #eee;margin-top:80px}@media(max-width:599px){.service-options-container{margin-top:40px;padding-right:15px;padding-left:15px}}.service-option{height:48px;border-bottom:1px solid #eee;cursor:pointer;display:flex;align-items:center;text-align:left}.service-option-vector{width:10px!important}.actions-container{margin-top:40px}.actions-button{display:flex;align-items:center;text-align:justify}.actions-button-text{margin-left:10px}.sendLabel{margin:10px auto;display:flex;justify-content:center;align-items:center;text-align:center}.sendCard-container{flex-wrap:wrap}.sendCard-container mat-icon{width:24px}@media(min-width:600px){.sendCard-container{display:flex;justify-content:flex-end}.sentCard-container{display:flex;justify-content:end}.send-button{width:auto;display:flex;justify-content:center;align-items:center;margin-left:8px}}@media(max-width:599px){.sendCard-container{display:flex;justify-content:center}.send-button{width:auto;display:flex;justify-content:center;align-items:center;margin-left:0}.sentCard-container{display:flex;justify-content:space-evenly}}\n"] }]
         }], ctorParameters: () => [{ type: i2$d.MatIconRegistry }, { type: i3$7.DomSanitizer }, { type: i1$8.DialogService }], propDecorators: { forceMobile: [{
                 type: Input
             }], wappingServicesTranslations: [{