ngx-wapp-components 3.2.28-alpha.3 → 3.2.28
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.
|
@@ -11642,6 +11642,7 @@ var WappingServiceType;
|
|
|
11642
11642
|
WappingServiceType[WappingServiceType["Cuponing"] = 5] = "Cuponing";
|
|
11643
11643
|
WappingServiceType[WappingServiceType["Post"] = 6] = "Post";
|
|
11644
11644
|
WappingServiceType[WappingServiceType["Draws"] = 7] = "Draws";
|
|
11645
|
+
WappingServiceType[WappingServiceType["MemberGetMember"] = 8] = "MemberGetMember";
|
|
11645
11646
|
})(WappingServiceType || (WappingServiceType = {}));
|
|
11646
11647
|
var WappingServiceSubtype;
|
|
11647
11648
|
(function (WappingServiceSubtype) {
|
|
@@ -11661,6 +11662,9 @@ var WappingServiceSubtype;
|
|
|
11661
11662
|
WappingServiceSubtype[WappingServiceSubtype["DiscountCoupon"] = 14] = "DiscountCoupon";
|
|
11662
11663
|
WappingServiceSubtype[WappingServiceSubtype["Identity"] = 15] = "Identity";
|
|
11663
11664
|
WappingServiceSubtype[WappingServiceSubtype["PromoFixedPrice"] = 16] = "PromoFixedPrice";
|
|
11665
|
+
WappingServiceSubtype[WappingServiceSubtype["Draws"] = 17] = "Draws";
|
|
11666
|
+
WappingServiceSubtype[WappingServiceSubtype["EarnAndBurn"] = 18] = "EarnAndBurn";
|
|
11667
|
+
WappingServiceSubtype[WappingServiceSubtype["MemberGetMember"] = 20] = "MemberGetMember";
|
|
11664
11668
|
})(WappingServiceSubtype || (WappingServiceSubtype = {}));
|
|
11665
11669
|
var SendingStatus;
|
|
11666
11670
|
(function (SendingStatus) {
|
|
@@ -11737,6 +11741,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
11737
11741
|
args: [MAT_DIALOG_DATA]
|
|
11738
11742
|
}] }] });
|
|
11739
11743
|
|
|
11744
|
+
const ICON_NUMBER = '<svg width="20" height="20" viewBox="0 0 20 20" fill="#C4C4C4" xmlns="http://www.w3.org/2000/svg"><path d="M10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0ZM12.873 5C12.5614 5 12.2927 5.21984 12.2314 5.52539L11.9082 7.14355H9.24023L9.5127 5.78223C9.59353 5.37761 9.28371 5.00007 8.87109 5C8.55944 5 8.29076 5.21985 8.22949 5.52539L7.90625 7.14355H6.38184C5.98722 7.14355 5.66711 7.46381 5.66699 7.8584C5.66699 8.25309 5.98715 8.57324 6.38184 8.57324H7.62012L7.04883 11.4316H5.71484C5.32017 11.4316 5.00002 11.7518 5 12.1465C5 12.5412 5.32016 12.8613 5.71484 12.8613H6.7627L6.49023 14.2227C6.4093 14.6274 6.71912 15.0049 7.13184 15.0049C7.44348 15.0048 7.71226 14.7851 7.77344 14.4795L8.09668 12.8613H10.7646L10.4922 14.2227C10.4112 14.6274 10.7211 15.0049 11.1338 15.0049C11.4455 15.0048 11.7142 14.7851 11.7754 14.4795L12.0986 12.8613H13.623C14.0177 12.8613 14.3379 12.5412 14.3379 12.1465C14.3379 11.7518 14.0177 11.4316 13.623 11.4316H12.3848L12.9561 8.57324H14.29C14.6847 8.57324 15.0049 8.25309 15.0049 7.8584C15.0048 7.46381 14.6847 7.14355 14.29 7.14355H13.2422L13.5146 5.78223C13.5955 5.37757 13.2857 5 12.873 5ZM11.6221 8.57324L11.0508 11.4316H8.38281L8.9541 8.57324H11.6221Z" fill="#C4C4C4"/></svg>';
|
|
11745
|
+
const PARTICIPATE_AGAIN = '<svg width="27" height="20" viewBox="0 0 27 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.2725 11.3643C20.2076 9.43363 23.3446 9.47452 25.2812 11.4111C26.5036 12.6339 26.9684 14.3304 26.6641 15.9004C26.4846 16.8256 26.0377 17.7091 25.3242 18.4229C23.7148 20.0322 21.2682 20.2752 19.3789 19.1973C18.8998 18.9235 18.7336 18.3134 19.0068 17.834C19.2805 17.3545 19.8905 17.1867 20.3701 17.46C21.5128 18.1119 22.9663 17.9515 23.9092 17.0088C24.3307 16.5871 24.5948 16.0684 24.7012 15.5205C24.8829 14.5837 24.6057 13.5653 23.8672 12.8262C22.6912 11.6502 20.8204 11.6489 19.6865 12.7783L20.9512 14.0439C21.254 14.3469 21.0601 14.8658 20.6328 14.8965L16.4473 15.1963C16.1436 15.2181 15.8905 14.9658 15.9121 14.6621L16.2129 10.4766C16.2436 10.0494 16.7625 9.8555 17.0654 10.1582L18.2725 11.3643ZM21.75 0C22.3467 0 22.9189 0.237223 23.3408 0.65918C23.7628 1.08114 24 1.65326 24 2.25V4.5C24 4.69891 23.9209 4.88962 23.7803 5.03027C23.6396 5.17093 23.4489 5.25 23.25 5.25C22.8389 5.25 22.4405 5.36431 22.0938 5.57227C21.7356 5.52624 21.3707 5.5 21 5.5C19.3735 5.5 17.8543 5.95766 16.5625 6.75H16.5V6.79004C14.0985 8.29209 12.5 10.9586 12.5 14C12.5 14.3384 12.5221 14.6719 12.5605 15H2.25C1.65326 15 1.08114 14.7628 0.65918 14.3408C0.237223 13.9189 0 13.3467 0 12.75V10.5C0 10.3011 0.0790745 10.1104 0.219727 9.96973C0.360379 9.82907 0.551088 9.75 0.75 9.75C1.34674 9.75 1.91886 9.51278 2.34082 9.09082C2.76278 8.66886 3 8.09674 3 7.5C3 6.90326 2.76278 6.33114 2.34082 5.90918C1.91886 5.48722 1.34674 5.25 0.75 5.25C0.551088 5.25 0.360379 5.17093 0.219727 5.03027C0.0790743 4.88962 0 4.69891 0 4.5V2.25C0 1.65326 0.237223 1.08114 0.65918 0.65918C1.08114 0.237223 1.65326 0 2.25 0H21.75ZM6 14.25H7.5V12.75H6V14.25ZM6 11.25H7.5V9.75H6V11.25ZM6 8.25H7.5V6.75H6V8.25ZM6 5.25H7.5V3.75H6V5.25ZM16.5 5.25H18V3.75H16.5V5.25ZM6 2.25H7.5V0.75H6V2.25ZM16.5 2.25H18V0.75H16.5V2.25Z" fill="white"/></svg>';
|
|
11746
|
+
const PARTICIPATE = '<svg width="24" height="15" viewBox="0 0 24 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 2.25C0 1.65326 0.237053 1.08097 0.65901 0.65901C1.08097 0.237053 1.65326 0 2.25 0H21.75C22.3467 0 22.919 0.237053 23.341 0.65901C23.7629 1.08097 24 1.65326 24 2.25V4.5C24 4.69891 23.921 4.88968 23.7803 5.03033C23.6397 5.17098 23.4489 5.25 23.25 5.25C22.6533 5.25 22.081 5.48705 21.659 5.90901C21.2371 6.33097 21 6.90326 21 7.5C21 8.09674 21.2371 8.66903 21.659 9.09099C22.081 9.51295 22.6533 9.75 23.25 9.75C23.4489 9.75 23.6397 9.82902 23.7803 9.96967C23.921 10.1103 24 10.3011 24 10.5V12.75C24 13.3467 23.7629 13.919 23.341 14.341C22.919 14.7629 22.3467 15 21.75 15H2.25C1.65326 15 1.08097 14.7629 0.65901 14.341C0.237053 13.919 0 13.3467 0 12.75L0 10.5C0 10.3011 0.0790176 10.1103 0.21967 9.96967C0.360322 9.82902 0.551088 9.75 0.75 9.75C1.34674 9.75 1.91903 9.51295 2.34099 9.09099C2.76295 8.66903 3 8.09674 3 7.5C3 6.90326 2.76295 6.33097 2.34099 5.90901C1.91903 5.48705 1.34674 5.25 0.75 5.25C0.551088 5.25 0.360322 5.17098 0.21967 5.03033C0.0790176 4.88968 0 4.69891 0 4.5V2.25ZM6 0.75V2.25H7.5V0.75H6ZM7.5 5.25V3.75H6V5.25H7.5ZM18 5.25V3.75H16.5V5.25H18ZM16.5 2.25H18V0.75H16.5V2.25ZM7.5 6.75H6V8.25H7.5V6.75ZM18 8.25V6.75H16.5V8.25H18ZM7.5 9.75H6V11.25H7.5V9.75ZM18 11.25V9.75H16.5V11.25H18ZM6 12.75V14.25H7.5V12.75H6ZM16.5 14.25H18V12.75H16.5V14.25Z" fill="white"/></svg>';
|
|
11747
|
+
const CALENDAR = '<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"viewBox="0 0 216.374 216.374" style="enable-background:new 0 0 216.374 216.374;" xml:space="preserve"><g><path d="M207.374,30.135h-25.438V13.432c0-4.971-4.029-9-9-9s-9,4.029-9,9v16.703H52.438V13.432c0-4.971-4.029-9-9-9s-9,4.029-9,9v16.703H9c-4.971,0-9,4.029-9,9v163.808c0,4.971,4.029,9,9,9h198.374c4.971,0,9-4.029,9-9V39.135C216.374,34.164,212.345,30.135,207.374,30.135z M198.374,48.135v19.997H18V48.135H198.374z M18,193.942V86.132h180.374v107.811H18z"/><path d="M140.288,102.718L89.82,153.186l-13.734-13.734c-3.515-3.514-9.213-3.514-12.728,0c-3.515,3.515-3.514,9.214,0,12.729l20.098,20.098c1.757,1.757,4.061,2.636,6.364,2.636s4.606-0.879,6.364-2.636l56.832-56.831c3.515-3.515,3.515-9.214,0-12.729C149.502,99.205,143.803,99.204,140.288,102.718z"/></g></svg>';
|
|
11748
|
+
|
|
11740
11749
|
class MaterialModalService {
|
|
11741
11750
|
constructor(dialog, breakpointObserver, isIframe) {
|
|
11742
11751
|
this.dialog = dialog;
|
|
@@ -12022,7 +12031,7 @@ class CarouselComponent {
|
|
|
12022
12031
|
this.onSetImageEvent.emit(true);
|
|
12023
12032
|
}
|
|
12024
12033
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CarouselComponent, deps: [{ token: i1$a.DeviceDetectorService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12025
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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-
|
|
12034
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: CarouselComponent, isStandalone: false, selector: "wapp-carousel", inputs: { images: "images", allowThumbnail: "allowThumbnail", infiniteCarousel: "infiniteCarousel", forceMobile: "forceMobile", height: "height", isDevModeActive: "isDevModeActive", isNoImage: "isNoImage", onHoverImageTooltip: "onHoverImageTooltip" }, outputs: { onSetImageEvent: "onSetImageEvent" }, viewQueries: [{ propertyName: "thumbnail", first: true, predicate: ["thumbnail"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"carousel-container\"\r\n [style.height.px]=\"height?height:null\"\r\n [style.margin-bottom]=\"height?'.25rem':null\"\r\n (touchstart)=\"posIni = $event.changedTouches[0].pageX\"\r\n (touchend)=\"move($event.changedTouches[0].pageX)\" \r\n [ngClass]=\"{'mobile': forceMobile}\">\r\n @if(forceMobile){\r\n <div class=\"carousel-top-left-icon\">\r\n <svg width=\"30\" height=\"30\" viewBox=\"0 0 30 30\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"30\" height=\"30\" rx=\"15\" fill=\"white\" fill-opacity=\"0.63\"/>\r\n <path d=\"M20.8337 15H9.16699\" stroke=\"#1F2224\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M13.2503 19.0807L9.16699 14.9974L13.2503 10.9141\" stroke=\"#1F2224\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n }\r\n <!--carousel image container-->\r\n @for(img of images; track img; let i = $index; let first = $first){\r\n <div class=\"carousel-image-container\"\r\n [ngClass]=\"height ? 'fixed-height' : null\"\r\n [@animImageSlider]=\"slideControl[i]\" (click)=\"isDevModeActive ? onSetImage() : ''\" [pTooltip]=\"onHoverImageTooltip\" tooltipPosition=\"top\" [tooltipDisabled]=\"!isDevModeActive\">\r\n <!--carousel image-->\r\n <img #slide (load)=\"first && onLoad(slide)\" \r\n [ngClass]=\"{'default-image' : isNoImage, 'edit-image' : isDevModeActive}\"\r\n [src]=\"img.path\"/>\r\n </div>\r\n }\r\n <!--previous button-->\r\n @if(showNavigation){\r\n <button type=\"button\"\r\n class=\"carousel-previous-button\"\r\n (click)=\"change('right')\">\r\n <span class=\"carousel-previous-icon\"></span>\r\n </button>\r\n }\r\n <!--next button-->\r\n @if(showNavigation){\r\n <button type=\"button\"\r\n class=\"carousel-next-button\"\r\n (click)=\"change('left')\">\r\n <span class=\"carousel-next-icon\"></span>\r\n </button>\r\n }\r\n <!--button indicators-->\r\n @if(showIndicators){\r\n <div class=\"carousel-indicator-container\">\r\n <div class=\"carousel-indicator-buttons\">\r\n @for(img of images; track img; let i = $index){\r\n <button \r\n [style.opacity]=\"i == counter ? 1 : 0.5\"\r\n (click)=\"setIndex(i)\"></button>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n<!--thumbnail indicators-->\r\n@if(allowThumbnail){\r\n <div #thumbnail class=\"carousel-thumbnail-container\">\r\n <div class=\"carousel-thumbnails\"\r\n [@animationThumbnail]=\"{\r\n value: thumbnailAnimation,\r\n params: { margin: thumbnailMargin + 'px' }}\">\r\n @for(img of images; track img; let i = $index){\r\n <img \r\n [style.width.px]=\"thumbnailWidth\"\r\n [style.margin-right.px]=\"thumbnailMarginRigth\"\r\n [style.opacity]=\"i == counter ? 1 : 0.5\"\r\n (load)=\"onLoadThumbnail()\"\r\n (click)=\"setIndex(i)\"\r\n [src]=\"img.path\" />\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [".carousel-container{position:relative;display:flex;overflow:hidden;margin-left:auto;margin-right:auto;align-items:center;width:450px;max-width:100%}.carousel-top-left-icon{position:absolute;top:15px;left:15px;cursor:pointer;z-index:10}.carousel-image-container{width:100%;position:relative}.carousel-image-container img{max-width:450px;width:-webkit-fill-available;width:stretch}@media(min-width:600px)and (max-width:959px){.carousel-image-container img{min-width:100%}.carousel-container{width:unset}}@media(max-width:599px){.carousel-image-container img{min-width:100%}.carousel-container{width:unset}}.carousel-image-container img.fixed-height{position:absolute;inset:-100% 0;margin:auto}.carousel-container:after{display:block;clear:both;content:\"\"}.carousel-container div{float:left;margin-right:-100%;font-size:0}.carousel-previous-button:hover,.carousel-next-button:hover,.carousel-previous-button:focus,.carousel-next-button:focus{opacity:.9}.carousel-previous-button,.carousel-next-button{position:absolute;top:0;bottom:0;width:15%;display:flex;align-items:center;justify-content:center;background-color:transparent;border:0;color:#fff;opacity:.5;transition:opacity .15s ease;cursor:pointer}.carousel-next-button{right:0}.carousel-next-icon{background-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>\")}.carousel-previous-icon{background-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-chevron-left' viewBox='0 0 16 16'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>\")}.carousel-next-icon,.carousel-previous-icon{display:inline-block;width:2rem;height:2rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.carousel-indicator-container{width:100%;overflow:hidden}.carousel-indicator-buttons{display:flex;position:absolute;right:0;bottom:0;left:0;z-index:2;justify-content:center;padding:0;margin-right:15%!important;margin-bottom:1rem;margin-left:15%;list-style:none}.carousel-indicator-buttons button{box-sizing:content-box;flex:0 1 auto;width:30px;height:3px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-clip:padding-box;border:0;border-top:10px solid transparent;border-bottom:10px solid transparent}.carousel-indicator-buttons button:hover{opacity:1!important}.carousel-thumbnail-container{width:100%;overflow:hidden}.carousel-thumbnails{display:flex}.carousel-thumbnails img{cursor:pointer}.carousel-thumbnails img:hover{opacity:1!important}.default-image{padding:68px}.edit-image{cursor:pointer}::ng-deep .mobile.carousel-container{width:unset!important}::ng-deep .mobile.carousel-container .carousel-image-container{width:100%!important;position:relative!important}::ng-deep .mobile.carousel-container .carousel-image-container img{width:100%!important;height:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "directive", type: i4.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }], animations: [
|
|
12026
12035
|
trigger('animImageSlider', animationCarouselFade),
|
|
12027
12036
|
trigger('animationThumbnail', animationThumbnail),
|
|
12028
12037
|
] }); }
|
|
@@ -12032,7 +12041,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
12032
12041
|
args: [{ selector: 'wapp-carousel', animations: [
|
|
12033
12042
|
trigger('animImageSlider', animationCarouselFade),
|
|
12034
12043
|
trigger('animationThumbnail', animationThumbnail),
|
|
12035
|
-
], 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-
|
|
12044
|
+
], standalone: false, template: "<div class=\"carousel-container\"\r\n [style.height.px]=\"height?height:null\"\r\n [style.margin-bottom]=\"height?'.25rem':null\"\r\n (touchstart)=\"posIni = $event.changedTouches[0].pageX\"\r\n (touchend)=\"move($event.changedTouches[0].pageX)\" \r\n [ngClass]=\"{'mobile': forceMobile}\">\r\n @if(forceMobile){\r\n <div class=\"carousel-top-left-icon\">\r\n <svg width=\"30\" height=\"30\" viewBox=\"0 0 30 30\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"30\" height=\"30\" rx=\"15\" fill=\"white\" fill-opacity=\"0.63\"/>\r\n <path d=\"M20.8337 15H9.16699\" stroke=\"#1F2224\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M13.2503 19.0807L9.16699 14.9974L13.2503 10.9141\" stroke=\"#1F2224\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n }\r\n <!--carousel image container-->\r\n @for(img of images; track img; let i = $index; let first = $first){\r\n <div class=\"carousel-image-container\"\r\n [ngClass]=\"height ? 'fixed-height' : null\"\r\n [@animImageSlider]=\"slideControl[i]\" (click)=\"isDevModeActive ? onSetImage() : ''\" [pTooltip]=\"onHoverImageTooltip\" tooltipPosition=\"top\" [tooltipDisabled]=\"!isDevModeActive\">\r\n <!--carousel image-->\r\n <img #slide (load)=\"first && onLoad(slide)\" \r\n [ngClass]=\"{'default-image' : isNoImage, 'edit-image' : isDevModeActive}\"\r\n [src]=\"img.path\"/>\r\n </div>\r\n }\r\n <!--previous button-->\r\n @if(showNavigation){\r\n <button type=\"button\"\r\n class=\"carousel-previous-button\"\r\n (click)=\"change('right')\">\r\n <span class=\"carousel-previous-icon\"></span>\r\n </button>\r\n }\r\n <!--next button-->\r\n @if(showNavigation){\r\n <button type=\"button\"\r\n class=\"carousel-next-button\"\r\n (click)=\"change('left')\">\r\n <span class=\"carousel-next-icon\"></span>\r\n </button>\r\n }\r\n <!--button indicators-->\r\n @if(showIndicators){\r\n <div class=\"carousel-indicator-container\">\r\n <div class=\"carousel-indicator-buttons\">\r\n @for(img of images; track img; let i = $index){\r\n <button \r\n [style.opacity]=\"i == counter ? 1 : 0.5\"\r\n (click)=\"setIndex(i)\"></button>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n<!--thumbnail indicators-->\r\n@if(allowThumbnail){\r\n <div #thumbnail class=\"carousel-thumbnail-container\">\r\n <div class=\"carousel-thumbnails\"\r\n [@animationThumbnail]=\"{\r\n value: thumbnailAnimation,\r\n params: { margin: thumbnailMargin + 'px' }}\">\r\n @for(img of images; track img; let i = $index){\r\n <img \r\n [style.width.px]=\"thumbnailWidth\"\r\n [style.margin-right.px]=\"thumbnailMarginRigth\"\r\n [style.opacity]=\"i == counter ? 1 : 0.5\"\r\n (load)=\"onLoadThumbnail()\"\r\n (click)=\"setIndex(i)\"\r\n [src]=\"img.path\" />\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [".carousel-container{position:relative;display:flex;overflow:hidden;margin-left:auto;margin-right:auto;align-items:center;width:450px;max-width:100%}.carousel-top-left-icon{position:absolute;top:15px;left:15px;cursor:pointer;z-index:10}.carousel-image-container{width:100%;position:relative}.carousel-image-container img{max-width:450px;width:-webkit-fill-available;width:stretch}@media(min-width:600px)and (max-width:959px){.carousel-image-container img{min-width:100%}.carousel-container{width:unset}}@media(max-width:599px){.carousel-image-container img{min-width:100%}.carousel-container{width:unset}}.carousel-image-container img.fixed-height{position:absolute;inset:-100% 0;margin:auto}.carousel-container:after{display:block;clear:both;content:\"\"}.carousel-container div{float:left;margin-right:-100%;font-size:0}.carousel-previous-button:hover,.carousel-next-button:hover,.carousel-previous-button:focus,.carousel-next-button:focus{opacity:.9}.carousel-previous-button,.carousel-next-button{position:absolute;top:0;bottom:0;width:15%;display:flex;align-items:center;justify-content:center;background-color:transparent;border:0;color:#fff;opacity:.5;transition:opacity .15s ease;cursor:pointer}.carousel-next-button{right:0}.carousel-next-icon{background-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>\")}.carousel-previous-icon{background-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-chevron-left' viewBox='0 0 16 16'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>\")}.carousel-next-icon,.carousel-previous-icon{display:inline-block;width:2rem;height:2rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.carousel-indicator-container{width:100%;overflow:hidden}.carousel-indicator-buttons{display:flex;position:absolute;right:0;bottom:0;left:0;z-index:2;justify-content:center;padding:0;margin-right:15%!important;margin-bottom:1rem;margin-left:15%;list-style:none}.carousel-indicator-buttons button{box-sizing:content-box;flex:0 1 auto;width:30px;height:3px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-clip:padding-box;border:0;border-top:10px solid transparent;border-bottom:10px solid transparent}.carousel-indicator-buttons button:hover{opacity:1!important}.carousel-thumbnail-container{width:100%;overflow:hidden}.carousel-thumbnails{display:flex}.carousel-thumbnails img{cursor:pointer}.carousel-thumbnails img:hover{opacity:1!important}.default-image{padding:68px}.edit-image{cursor:pointer}::ng-deep .mobile.carousel-container{width:unset!important}::ng-deep .mobile.carousel-container .carousel-image-container{width:100%!important;position:relative!important}::ng-deep .mobile.carousel-container .carousel-image-container img{width:100%!important;height:auto}\n"] }]
|
|
12036
12045
|
}], ctorParameters: () => [{ type: i1$a.DeviceDetectorService }], propDecorators: { thumbnail: [{
|
|
12037
12046
|
type: ViewChild,
|
|
12038
12047
|
args: ['thumbnail', { static: true }]
|
|
@@ -12060,6 +12069,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
12060
12069
|
}] } });
|
|
12061
12070
|
|
|
12062
12071
|
class WappMaterialServiceViewComponent {
|
|
12072
|
+
set lotteryEvent(value) {
|
|
12073
|
+
this._lotteryEvent = value;
|
|
12074
|
+
if (value)
|
|
12075
|
+
this.evaluateDraw();
|
|
12076
|
+
}
|
|
12077
|
+
get lotteryEvent() {
|
|
12078
|
+
return this._lotteryEvent;
|
|
12079
|
+
}
|
|
12063
12080
|
set wappingService(value) {
|
|
12064
12081
|
this._wappingService = value;
|
|
12065
12082
|
if (value) {
|
|
@@ -12078,7 +12095,6 @@ class WappMaterialServiceViewComponent {
|
|
|
12078
12095
|
this.allowSelectSendGiftCard = true;
|
|
12079
12096
|
this.enumSendingStatus = SendingStatus;
|
|
12080
12097
|
this.ecardStatus = CardStatus;
|
|
12081
|
-
this.isDrawService = false;
|
|
12082
12098
|
this.wappingServicesTranslations = {
|
|
12083
12099
|
activedService: 'Activada',
|
|
12084
12100
|
disabledService: 'Desactivada',
|
|
@@ -12088,12 +12104,22 @@ class WappMaterialServiceViewComponent {
|
|
|
12088
12104
|
receivedLabel: "Enviada por {{name}}",
|
|
12089
12105
|
showMore: "Mostrar más",
|
|
12090
12106
|
title: "Descripción",
|
|
12091
|
-
|
|
12107
|
+
buttonService: "Participate"
|
|
12092
12108
|
};
|
|
12093
|
-
this.
|
|
12109
|
+
this.disabledButtonService = false;
|
|
12110
|
+
this.showButtonService = false;
|
|
12111
|
+
this.showToggle = true;
|
|
12094
12112
|
this.wappingServiceSelected = new EventEmitter();
|
|
12095
|
-
this.
|
|
12096
|
-
this.
|
|
12113
|
+
this.triggerButtonService = new EventEmitter();
|
|
12114
|
+
this.firstParticipation = true;
|
|
12115
|
+
this.isDraw = false;
|
|
12116
|
+
this.hasParticipations = false;
|
|
12117
|
+
this.disabledParticipationsModal = false;
|
|
12118
|
+
this.isMemberGetMember = false;
|
|
12119
|
+
this.matIconRegistry.addSvgIconLiteral("calendar", this.domSanitizer.bypassSecurityTrustHtml(CALENDAR));
|
|
12120
|
+
this.matIconRegistry.addSvgIconLiteral("number", this.domSanitizer.bypassSecurityTrustHtml(ICON_NUMBER));
|
|
12121
|
+
this.matIconRegistry.addSvgIconLiteral("participate", this.domSanitizer.bypassSecurityTrustHtml(PARTICIPATE));
|
|
12122
|
+
this.matIconRegistry.addSvgIconLiteral("participate-again", this.domSanitizer.bypassSecurityTrustHtml(PARTICIPATE_AGAIN));
|
|
12097
12123
|
}
|
|
12098
12124
|
ngOnInit() {
|
|
12099
12125
|
}
|
|
@@ -12112,11 +12138,30 @@ class WappMaterialServiceViewComponent {
|
|
|
12112
12138
|
if (this.wappingService.enumTypeStatusECardID == this.ecardStatus.generated)
|
|
12113
12139
|
this.allowSelectSendGiftCard = false;
|
|
12114
12140
|
if (this.wappingService.type == WappingServiceType.Draws) {
|
|
12115
|
-
this.
|
|
12141
|
+
this.isDraw = true;
|
|
12142
|
+
}
|
|
12143
|
+
if (this.wappingService.type == WappingServiceType.MemberGetMember) {
|
|
12144
|
+
this.isMemberGetMember = true;
|
|
12116
12145
|
}
|
|
12117
12146
|
this.getWappingServiceTiles();
|
|
12118
12147
|
this.getWappingServiceImages();
|
|
12119
12148
|
}
|
|
12149
|
+
evaluateDraw() {
|
|
12150
|
+
if (this.lotteryEvent.isScheduledForDraw) {
|
|
12151
|
+
if (this.lotteryEvent.lotteryEventNextDraw.skyWappCardTransactionIds.length > 0) {
|
|
12152
|
+
this.firstParticipation = false;
|
|
12153
|
+
this.hasParticipations = true;
|
|
12154
|
+
}
|
|
12155
|
+
else {
|
|
12156
|
+
this.firstParticipation = true;
|
|
12157
|
+
this.hasParticipations = false;
|
|
12158
|
+
}
|
|
12159
|
+
this.disabledParticipationsModal = false;
|
|
12160
|
+
}
|
|
12161
|
+
else {
|
|
12162
|
+
this.hasParticipations = false;
|
|
12163
|
+
}
|
|
12164
|
+
}
|
|
12120
12165
|
getWappingServiceTiles() {
|
|
12121
12166
|
if (this.wappingService.wappingServiceTiles != null) {
|
|
12122
12167
|
let viewTiles = this.wappingService.wappingServiceTiles.filter(w => w.appViewType == WappingServiceAppViewType.View);
|
|
@@ -12196,33 +12241,42 @@ class WappMaterialServiceViewComponent {
|
|
|
12196
12241
|
};
|
|
12197
12242
|
this.materialModal.open(WappServiceDescriptionComponent, modalSize, dialogConfig);
|
|
12198
12243
|
}
|
|
12199
|
-
|
|
12200
|
-
this.
|
|
12244
|
+
pressButtonService() {
|
|
12245
|
+
this.triggerButtonService.emit();
|
|
12201
12246
|
}
|
|
12202
12247
|
isOverflown() {
|
|
12203
12248
|
var element = document.getElementById("serviceDescription");
|
|
12204
12249
|
return element != null ? element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth : false;
|
|
12205
12250
|
}
|
|
12206
12251
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: WappMaterialServiceViewComponent, deps: [{ token: i2$d.MatIconRegistry }, { token: i3$7.DomSanitizer }, { token: MaterialModalService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12207
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: WappMaterialServiceViewComponent, isStandalone: false, selector: "wapp-material-service-view", inputs: { wappingServicesTranslations: "wappingServicesTranslations", canParticipateDraw: "canParticipateDraw", wappingService: "wappingService" }, outputs: { wappingServiceSelected: "wappingServiceSelected", participateDraw: "participateDraw" }, ngImport: i0, template: "@if (wappingService) {\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 fxLayout=\"row\" fxLayout.xs=\"column\" fxLayout.sm=\"column\">\r\n <!--service image-->\r\n <div class=\"service-view\" fxLayout=\"column\">\r\n <!--tile 1-->\r\n @if (wappingService.tile1) {\r\n <div class=\"service-image-title\"\r\n [style.background-color]=\"wappingService.tile1BackgroundColor\"\r\n [style.color]=\"wappingService.tile1ForegroundColor\"\r\n fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n <div>{{wappingService.tile1}}</div>\r\n @if (wappingService.showTile1Label) {\r\n <div>{{wappingService.tile1Label}}</div>\r\n }\r\n </div>\r\n }\r\n <!--slideshow-->\r\n <wapp-carousel [images]=\"wappingServiceImages\"></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 class=\"service-tile\"\r\n [ngClass]=\"{'service-tile-border-bottom-radius': !wappingService.tile4}\"\r\n [style.background-color]=\"wappingService.tile2BackgroundColor\"\r\n [style.color]=\"wappingService.tile2ForegroundColor\"\r\n >\r\n <div>{{wappingService.tile2}}</div>\r\n @if (wappingService.showTile2Label) {\r\n <div>{{wappingService.tile2Label}}</div>\r\n }\r\n </div>\r\n }\r\n @if (isSendGiftCard && (wappingService?.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.ScheduledToSend) && wappingService?.enumTypeStatusECardID == ecardStatus.sent! ) {\r\n <div class=\"card-header-status-container sendLabel-container\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n <div class=\"sendLabel\" >\r\n {{ wappingServicesTranslations.scheduledLabel }}\r\n </div>\r\n </div>\r\n }\r\n @if (isSendGiftCard && (wappingService?.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.Sent || wappingService?.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.PendingRegistration) && wappingService?.enumTypeStatusECardID == ecardStatus.sent) {\r\n <div class=\"card-header-status-container sendLabel-container\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n <div class=\"sendLabel\" >\r\n {{ wappingServicesTranslations.sendLabel }}\r\n </div>\r\n </div>\r\n }\r\n @if (isSendGiftCard && wappingService?.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.Sent && wappingService?.enumTypeStatusECardID == ecardStatus.activated) {\r\n <div class=\"card-header-status-container sendLabel-container\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n <div class=\"sendLabel\" >\r\n {{ wappingServicesTranslations.receivedLabel }}\r\n </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\r\n @if(isDrawService) {\r\n <button mat-flat-button class=\"service-select-toggle\" color=\"accent\" \r\n [disabled]=\"!canParticipateDraw\"\r\n (click)=\"triggerParticipate()\">\r\n <span>{{ wappingServicesTranslations?.participate }}</span>\r\n </button>\r\n }\r\n </div>\r\n <!--service info-->\r\n @if (wappingService.tile3 || wappingService.tile4) {\r\n <div class=\"service-info-container\" fxLayout=\"column\">\r\n <div class=\"service-description-container\">\r\n <!--tile 3-->\r\n @if (wappingService.tile3) {\r\n <div class=\"service-name mat-title\" fxHide fxShow.xs>\r\n {{wappingService.tile3}}\r\n </div>\r\n }\r\n <!--tile 4-->\r\n @if (wappingService.tile4 && wappingService.enumTypeStatusECardID != ecardStatus.generated) {\r\n <div class=\"service-description\" id=\"serviceDescription\">\r\n {{wappingService.tile4}}\r\n </div>\r\n }\r\n @if (wappingService.enumTypeStatusECardID == ecardStatus.generated) {\r\n <div class=\"service-description\">\r\n {{ wappingServicesTranslations.cardGenerated }}\r\n </div>\r\n }\r\n <!--show more-->\r\n @if (isOverflown()) {\r\n <div class=\"service-show-more-container\" (click)=\"openModalShowMoreDescription();\">\r\n <span>{{wappingServicesTranslations.showMore }}</span><mat-icon class=\"service-show-more-vector\" svgIcon=\"vector_right\"></mat-icon>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"service-tile-detail-container\" fxLayout=\"column\">\r\n <!--tileDetail 1-->\r\n @if (wappingService.tileDetail1) {\r\n <div class=\"service-tile-detail\" fxLayout=\"row\">\r\n <mat-icon class=\"service-tile-detail-icon\" svgIcon=\"calendar\"></mat-icon>\r\n <span>{{wappingService.tileDetail1}}</span>\r\n </div>\r\n }\r\n <!--tileDetail 2-->\r\n @if (wappingService.tileDetail2) {\r\n <div class=\"service-tile-detail\" fxLayout=\"row\">\r\n <mat-icon class=\"service-tile-detail-icon\" svgIcon=\"tickets\"></mat-icon>\r\n <span>{{wappingService.tileDetail2}}</span>\r\n </div>\r\n }\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 }\r\n </div>\r\n}", styles: [":host ::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:before{background:var(--mdc-switch-unselected-track-color, #a50000)!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle:after{background:var(--mdc-switch-selected-handle-color, var(--mdc-theme-primary, #fff))!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:after{background:var(--mdc-switch-selected-hover-track-color, #10c638)!important}:host ::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}: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:70px}@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-title{position:absolute;margin-left:60px;margin-right:60px;height:32px;top:0;left:0;right:0;z-index:99;display:flex;border-radius:0 0 4.3118px 4.3118px;justify-content:center;align-items:center;font:400 15px/17px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.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}.service-info-container{width:100%}@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$1.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$3.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$3.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$3.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$3.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$4.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"] }] }); }
|
|
12252
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: WappMaterialServiceViewComponent, isStandalone: false, selector: "wapp-material-service-view", inputs: { wappingServicesTranslations: "wappingServicesTranslations", disabledButtonService: "disabledButtonService", showButtonService: "showButtonService", showToggle: "showToggle", lotteryEvent: "lotteryEvent", wappingService: "wappingService" }, outputs: { wappingServiceSelected: "wappingServiceSelected", triggerButtonService: "triggerButtonService" }, ngImport: i0, template: "@if(wappingService){\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 fxLayout=\"row\" fxLayout.xs=\"column\" fxLayout.sm=\"column\">\r\n <!--service image-->\r\n <div class=\"service-view\" fxLayout=\"column\">\r\n <!--tile 1-->\r\n @if(wappingService.tile1){\r\n <div class=\"service-image-title\"\r\n [style.background-color]=\"wappingService.tile1BackgroundColor\"\r\n [style.color]=\"wappingService.tile1ForegroundColor\"\r\n fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n <div>{{wappingService.tile1}}</div>\r\n @if(wappingService.showTile1Label){<div>{{wappingService.tile1Label}}</div>}\r\n </div>\r\n }\r\n <!--slideshow-->\r\n <wapp-carousel [images]=\"wappingServiceImages\"></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 class=\"service-tile\"\r\n [ngClass]=\"{'service-tile-border-bottom-radius': !wappingService.tile4}\"\r\n [style.background-color]=\"wappingService.tile2BackgroundColor\"\r\n [style.color]=\"wappingService.tile2ForegroundColor\">\r\n <div>{{wappingService.tile2}}</div>\r\n @if(wappingService.showTile2Label){<div>{{wappingService.tile2Label}}</div>}\r\n </div>\r\n }\r\n \r\n @if(isSendGiftCard && (wappingService?.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.ScheduledToSend) && wappingService?.enumTypeStatusECardID == ecardStatus.sent! ){\r\n <div class=\"card-header-status-container sendLabel-container\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n <div class=\"sendLabel\" >\r\n {{ wappingServicesTranslations.scheduledLabel }}\r\n </div>\r\n </div>\r\n }\r\n @if(isSendGiftCard && (wappingService?.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.Sent || wappingService?.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.PendingRegistration) && wappingService?.enumTypeStatusECardID == ecardStatus.sent){\r\n <div class=\"card-header-status-container sendLabel-container\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n <div class=\"sendLabel\" >\r\n {{ wappingServicesTranslations.sendLabel }}\r\n </div>\r\n </div>\r\n }\r\n @if(isSendGiftCard && wappingService?.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.Sent && wappingService?.enumTypeStatusECardID == ecardStatus.activated){\r\n <div class=\"card-header-status-container sendLabel-container\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n <div class=\"sendLabel\" >\r\n {{ wappingServicesTranslations.receivedLabel }}\r\n </div>\r\n </div>\r\n }\r\n <!--activate toggle-->\r\n @if(wappingService.allowSelect && allowSelectSendGiftCard && !showButtonService && showToggle){\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(showButtonService){\r\n <button mat-flat-button \r\n class=\"service-view-button\"\r\n color=\"accent\"\r\n fxFlex=\"100\" fxHide fxShow.xs\r\n [disabled]=\"disabledButtonService\"\r\n (click)=\"pressButtonService()\">\r\n\r\n <div class=\"service-view-icon\" *ngIf=\"isMemberGetMember\">\r\n <mat-icon class=\"member-get-member-share-button-icon\">share</mat-icon>\r\n </div>\r\n <div class=\"service-view-icon\" *ngIf=\"isDraw\">\r\n <mat-icon class=\"service-view-participation-icon\" *ngIf=\"firstParticipation\" svgIcon=\"participate\"></mat-icon>\r\n <mat-icon class=\"service-view-participation-icon\" *ngIf=\"!firstParticipation\" svgIcon=\"participate-again\"></mat-icon>\r\n </div>\r\n <span class=\"service-view-button-label\">{{ wappingServicesTranslations?.buttonService }}</span>\r\n </button>\r\n }\r\n \r\n </div>\r\n <!--service info-->\r\n @if(wappingService.tile3 || wappingService.tile4){\r\n <div class=\"service-info-container\" fxLayout=\"column\">\r\n <div class=\"service-description-container\">\r\n <!--tile 3-->\r\n @if(wappingService.tile3){\r\n <div class=\"service-name mat-title\" fxHide fxShow.xs>\r\n {{wappingService.tile3}}\r\n </div>\r\n }\r\n <!--tile 4-->\r\n @if(wappingService.tile4 && wappingService.enumTypeStatusECardID != ecardStatus.generated){\r\n <div class=\"service-description\" id=\"serviceDescription\">\r\n {{wappingService.tile4}}\r\n </div>\r\n }\r\n @if(wappingService.enumTypeStatusECardID == ecardStatus.generated){\r\n <div class=\"service-description\">\r\n {{ wappingServicesTranslations.cardGenerated }}\r\n </div>\r\n }\r\n <!--show more-->\r\n @if(isOverflown()){\r\n <div class=\"service-show-more-container\" (click)=\"openModalShowMoreDescription();\">\r\n <span>{{wappingServicesTranslations.showMore }}</span><mat-icon class=\"service-show-more-vector\" svgIcon=\"vector_right\"></mat-icon>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"service-tile-detail-container\" fxLayout=\"column\">\r\n <!--tileDetail 1-->\r\n @if(wappingService.tileDetail1){\r\n <div class=\"service-tile-detail\" fxLayout=\"row\">\r\n <mat-icon class=\"service-tile-detail-icon\" svgIcon=\"calendar\"></mat-icon>\r\n <span>{{wappingService.tileDetail1}}</span>\r\n </div>\r\n }\r\n <!--tileDetail 2-->\r\n @if(wappingService.tileDetail2){\r\n <div class=\"service-tile-detail\" fxLayout=\"row\">\r\n <mat-icon class=\"service-tile-detail-icon\" svgIcon=\"tickets\"></mat-icon>\r\n <span>{{wappingService.tileDetail2}}</span>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"service-view-container-button\" fxHide.xs *ngIf=\"showButtonService\">\r\n <button mat-flat-button\r\n class=\"service-view-button\"\r\n color=\"accent\"\r\n [disabled]=\"disabledButtonService\"\r\n (click)=\"pressButtonService()\">\r\n\r\n <div class=\"service-view-icon\" *ngIf=\"isMemberGetMember\">\r\n <mat-icon class=\"member-get-member-share-button-icon\">share</mat-icon>\r\n </div>\r\n <div class=\"service-view-icon\" *ngIf=\"isDraw\">\r\n <mat-icon class=\"service-view-participation-icon\" *ngIf=\"firstParticipation\" svgIcon=\"participate\"></mat-icon>\r\n <mat-icon class=\"service-view-participation-icon\" *ngIf=\"!firstParticipation\" svgIcon=\"participate-again\"></mat-icon>\r\n </div>\r\n <span class=\"service-view-button-label\">{{ wappingServicesTranslations?.buttonService }}</span>\r\n </button>\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 }\r\n</div>\r\n}", styles: [":host ::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:before{background:var(--mdc-switch-unselected-track-color, #a50000)!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle:after{background:var(--mdc-switch-selected-handle-color, var(--mdc-theme-primary, #fff))!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:after{background:var(--mdc-switch-selected-hover-track-color, #10c638)!important}:host ::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}: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:70px}@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-title{position:absolute;margin-left:60px;margin-right:60px;height:32px;top:0;left:0;right:0;z-index:99;display:flex;border-radius:0 0 4.3118px 4.3118px;justify-content:center;align-items:center;font:400 15px/17px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.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}.service-info-container{width:100%}@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}}.participation-detail-container{margin:16px 0;width:100%}.participation-detail-desktop-bar{border-radius:8px;padding:12px 24px;box-shadow:0 2px 4px #0000000d;gap:8px;display:flex;justify-content:flex-start;align-items:center}.participation-detail-value{margin-right:auto}.participation-detail-date{margin-left:4px}.participation-detail-container-mobile{padding:4px 12px!important}.participation-detail-mobile-card{border-radius:15px;padding:16px;display:flex;flex-direction:column;gap:12px}.participation-date-row{width:100%;text-align:center;padding-bottom:8px}.card-bottom-content{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.numbers-section{display:flex;flex-direction:column;flex:1}.numbers-list-vertical{display:flex;flex-direction:column;margin-top:4px;max-height:120px;overflow-y:auto}.number-item{padding:2px 0}.numbers-title{margin:0;text-transform:none}.card-icon-right{display:flex;justify-content:center;align-items:center;margin-left:10px}.card-icon-right mat-icon{width:50px!important;height:50px!important}\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.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$3.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$3.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$3.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$3.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$4.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"] }] }); }
|
|
12208
12253
|
}
|
|
12209
12254
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: WappMaterialServiceViewComponent, decorators: [{
|
|
12210
12255
|
type: Component,
|
|
12211
|
-
args: [{ selector: 'wapp-material-service-view', standalone: false, template: "@if (wappingService) {\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 fxLayout=\"row\" fxLayout.xs=\"column\" fxLayout.sm=\"column\">\r\n <!--service image-->\r\n <div class=\"service-view\" fxLayout=\"column\">\r\n <!--tile 1-->\r\n @if (wappingService.tile1) {\r\n <div class=\"service-image-title\"\r\n [style.background-color]=\"wappingService.tile1BackgroundColor\"\r\n [style.color]=\"wappingService.tile1ForegroundColor\"\r\n fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n <div>{{wappingService.tile1}}</div>\r\n @if (wappingService.showTile1Label) {\r\n <div>{{wappingService.tile1Label}}</div>\r\n }\r\n </div>\r\n }\r\n <!--slideshow-->\r\n <wapp-carousel [images]=\"wappingServiceImages\"></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 class=\"service-tile\"\r\n [ngClass]=\"{'service-tile-border-bottom-radius': !wappingService.tile4}\"\r\n [style.background-color]=\"wappingService.tile2BackgroundColor\"\r\n [style.color]=\"wappingService.tile2ForegroundColor\"\r\n >\r\n <div>{{wappingService.tile2}}</div>\r\n @if (wappingService.showTile2Label) {\r\n <div>{{wappingService.tile2Label}}</div>\r\n }\r\n </div>\r\n }\r\n @if (isSendGiftCard && (wappingService?.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.ScheduledToSend) && wappingService?.enumTypeStatusECardID == ecardStatus.sent! ) {\r\n <div class=\"card-header-status-container sendLabel-container\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n <div class=\"sendLabel\" >\r\n {{ wappingServicesTranslations.scheduledLabel }}\r\n </div>\r\n </div>\r\n }\r\n @if (isSendGiftCard && (wappingService?.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.Sent || wappingService?.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.PendingRegistration) && wappingService?.enumTypeStatusECardID == ecardStatus.sent) {\r\n <div class=\"card-header-status-container sendLabel-container\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n <div class=\"sendLabel\" >\r\n {{ wappingServicesTranslations.sendLabel }}\r\n </div>\r\n </div>\r\n }\r\n @if (isSendGiftCard && wappingService?.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.Sent && wappingService?.enumTypeStatusECardID == ecardStatus.activated) {\r\n <div class=\"card-header-status-container sendLabel-container\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n <div class=\"sendLabel\" >\r\n {{ wappingServicesTranslations.receivedLabel }}\r\n </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\r\n @if(isDrawService) {\r\n <button mat-flat-button class=\"service-select-toggle\" color=\"accent\" \r\n [disabled]=\"!canParticipateDraw\"\r\n (click)=\"triggerParticipate()\">\r\n <span>{{ wappingServicesTranslations?.participate }}</span>\r\n </button>\r\n }\r\n </div>\r\n <!--service info-->\r\n @if (wappingService.tile3 || wappingService.tile4) {\r\n <div class=\"service-info-container\" fxLayout=\"column\">\r\n <div class=\"service-description-container\">\r\n <!--tile 3-->\r\n @if (wappingService.tile3) {\r\n <div class=\"service-name mat-title\" fxHide fxShow.xs>\r\n {{wappingService.tile3}}\r\n </div>\r\n }\r\n <!--tile 4-->\r\n @if (wappingService.tile4 && wappingService.enumTypeStatusECardID != ecardStatus.generated) {\r\n <div class=\"service-description\" id=\"serviceDescription\">\r\n {{wappingService.tile4}}\r\n </div>\r\n }\r\n @if (wappingService.enumTypeStatusECardID == ecardStatus.generated) {\r\n <div class=\"service-description\">\r\n {{ wappingServicesTranslations.cardGenerated }}\r\n </div>\r\n }\r\n <!--show more-->\r\n @if (isOverflown()) {\r\n <div class=\"service-show-more-container\" (click)=\"openModalShowMoreDescription();\">\r\n <span>{{wappingServicesTranslations.showMore }}</span><mat-icon class=\"service-show-more-vector\" svgIcon=\"vector_right\"></mat-icon>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"service-tile-detail-container\" fxLayout=\"column\">\r\n <!--tileDetail 1-->\r\n @if (wappingService.tileDetail1) {\r\n <div class=\"service-tile-detail\" fxLayout=\"row\">\r\n <mat-icon class=\"service-tile-detail-icon\" svgIcon=\"calendar\"></mat-icon>\r\n <span>{{wappingService.tileDetail1}}</span>\r\n </div>\r\n }\r\n <!--tileDetail 2-->\r\n @if (wappingService.tileDetail2) {\r\n <div class=\"service-tile-detail\" fxLayout=\"row\">\r\n <mat-icon class=\"service-tile-detail-icon\" svgIcon=\"tickets\"></mat-icon>\r\n <span>{{wappingService.tileDetail2}}</span>\r\n </div>\r\n }\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 }\r\n </div>\r\n}", styles: [":host ::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:before{background:var(--mdc-switch-unselected-track-color, #a50000)!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle:after{background:var(--mdc-switch-selected-handle-color, var(--mdc-theme-primary, #fff))!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:after{background:var(--mdc-switch-selected-hover-track-color, #10c638)!important}:host ::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}: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:70px}@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-title{position:absolute;margin-left:60px;margin-right:60px;height:32px;top:0;left:0;right:0;z-index:99;display:flex;border-radius:0 0 4.3118px 4.3118px;justify-content:center;align-items:center;font:400 15px/17px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.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}.service-info-container{width:100%}@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"] }]
|
|
12256
|
+
args: [{ selector: 'wapp-material-service-view', standalone: false, template: "@if(wappingService){\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 fxLayout=\"row\" fxLayout.xs=\"column\" fxLayout.sm=\"column\">\r\n <!--service image-->\r\n <div class=\"service-view\" fxLayout=\"column\">\r\n <!--tile 1-->\r\n @if(wappingService.tile1){\r\n <div class=\"service-image-title\"\r\n [style.background-color]=\"wappingService.tile1BackgroundColor\"\r\n [style.color]=\"wappingService.tile1ForegroundColor\"\r\n fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n <div>{{wappingService.tile1}}</div>\r\n @if(wappingService.showTile1Label){<div>{{wappingService.tile1Label}}</div>}\r\n </div>\r\n }\r\n <!--slideshow-->\r\n <wapp-carousel [images]=\"wappingServiceImages\"></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 class=\"service-tile\"\r\n [ngClass]=\"{'service-tile-border-bottom-radius': !wappingService.tile4}\"\r\n [style.background-color]=\"wappingService.tile2BackgroundColor\"\r\n [style.color]=\"wappingService.tile2ForegroundColor\">\r\n <div>{{wappingService.tile2}}</div>\r\n @if(wappingService.showTile2Label){<div>{{wappingService.tile2Label}}</div>}\r\n </div>\r\n }\r\n \r\n @if(isSendGiftCard && (wappingService?.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.ScheduledToSend) && wappingService?.enumTypeStatusECardID == ecardStatus.sent! ){\r\n <div class=\"card-header-status-container sendLabel-container\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n <div class=\"sendLabel\" >\r\n {{ wappingServicesTranslations.scheduledLabel }}\r\n </div>\r\n </div>\r\n }\r\n @if(isSendGiftCard && (wappingService?.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.Sent || wappingService?.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.PendingRegistration) && wappingService?.enumTypeStatusECardID == ecardStatus.sent){\r\n <div class=\"card-header-status-container sendLabel-container\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n <div class=\"sendLabel\" >\r\n {{ wappingServicesTranslations.sendLabel }}\r\n </div>\r\n </div>\r\n }\r\n @if(isSendGiftCard && wappingService?.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.Sent && wappingService?.enumTypeStatusECardID == ecardStatus.activated){\r\n <div class=\"card-header-status-container sendLabel-container\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n <div class=\"sendLabel\" >\r\n {{ wappingServicesTranslations.receivedLabel }}\r\n </div>\r\n </div>\r\n }\r\n <!--activate toggle-->\r\n @if(wappingService.allowSelect && allowSelectSendGiftCard && !showButtonService && showToggle){\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(showButtonService){\r\n <button mat-flat-button \r\n class=\"service-view-button\"\r\n color=\"accent\"\r\n fxFlex=\"100\" fxHide fxShow.xs\r\n [disabled]=\"disabledButtonService\"\r\n (click)=\"pressButtonService()\">\r\n\r\n <div class=\"service-view-icon\" *ngIf=\"isMemberGetMember\">\r\n <mat-icon class=\"member-get-member-share-button-icon\">share</mat-icon>\r\n </div>\r\n <div class=\"service-view-icon\" *ngIf=\"isDraw\">\r\n <mat-icon class=\"service-view-participation-icon\" *ngIf=\"firstParticipation\" svgIcon=\"participate\"></mat-icon>\r\n <mat-icon class=\"service-view-participation-icon\" *ngIf=\"!firstParticipation\" svgIcon=\"participate-again\"></mat-icon>\r\n </div>\r\n <span class=\"service-view-button-label\">{{ wappingServicesTranslations?.buttonService }}</span>\r\n </button>\r\n }\r\n \r\n </div>\r\n <!--service info-->\r\n @if(wappingService.tile3 || wappingService.tile4){\r\n <div class=\"service-info-container\" fxLayout=\"column\">\r\n <div class=\"service-description-container\">\r\n <!--tile 3-->\r\n @if(wappingService.tile3){\r\n <div class=\"service-name mat-title\" fxHide fxShow.xs>\r\n {{wappingService.tile3}}\r\n </div>\r\n }\r\n <!--tile 4-->\r\n @if(wappingService.tile4 && wappingService.enumTypeStatusECardID != ecardStatus.generated){\r\n <div class=\"service-description\" id=\"serviceDescription\">\r\n {{wappingService.tile4}}\r\n </div>\r\n }\r\n @if(wappingService.enumTypeStatusECardID == ecardStatus.generated){\r\n <div class=\"service-description\">\r\n {{ wappingServicesTranslations.cardGenerated }}\r\n </div>\r\n }\r\n <!--show more-->\r\n @if(isOverflown()){\r\n <div class=\"service-show-more-container\" (click)=\"openModalShowMoreDescription();\">\r\n <span>{{wappingServicesTranslations.showMore }}</span><mat-icon class=\"service-show-more-vector\" svgIcon=\"vector_right\"></mat-icon>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"service-tile-detail-container\" fxLayout=\"column\">\r\n <!--tileDetail 1-->\r\n @if(wappingService.tileDetail1){\r\n <div class=\"service-tile-detail\" fxLayout=\"row\">\r\n <mat-icon class=\"service-tile-detail-icon\" svgIcon=\"calendar\"></mat-icon>\r\n <span>{{wappingService.tileDetail1}}</span>\r\n </div>\r\n }\r\n <!--tileDetail 2-->\r\n @if(wappingService.tileDetail2){\r\n <div class=\"service-tile-detail\" fxLayout=\"row\">\r\n <mat-icon class=\"service-tile-detail-icon\" svgIcon=\"tickets\"></mat-icon>\r\n <span>{{wappingService.tileDetail2}}</span>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"service-view-container-button\" fxHide.xs *ngIf=\"showButtonService\">\r\n <button mat-flat-button\r\n class=\"service-view-button\"\r\n color=\"accent\"\r\n [disabled]=\"disabledButtonService\"\r\n (click)=\"pressButtonService()\">\r\n\r\n <div class=\"service-view-icon\" *ngIf=\"isMemberGetMember\">\r\n <mat-icon class=\"member-get-member-share-button-icon\">share</mat-icon>\r\n </div>\r\n <div class=\"service-view-icon\" *ngIf=\"isDraw\">\r\n <mat-icon class=\"service-view-participation-icon\" *ngIf=\"firstParticipation\" svgIcon=\"participate\"></mat-icon>\r\n <mat-icon class=\"service-view-participation-icon\" *ngIf=\"!firstParticipation\" svgIcon=\"participate-again\"></mat-icon>\r\n </div>\r\n <span class=\"service-view-button-label\">{{ wappingServicesTranslations?.buttonService }}</span>\r\n </button>\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 }\r\n</div>\r\n}", styles: [":host ::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:before{background:var(--mdc-switch-unselected-track-color, #a50000)!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle:after{background:var(--mdc-switch-selected-handle-color, var(--mdc-theme-primary, #fff))!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:after{background:var(--mdc-switch-selected-hover-track-color, #10c638)!important}:host ::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}: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:70px}@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-title{position:absolute;margin-left:60px;margin-right:60px;height:32px;top:0;left:0;right:0;z-index:99;display:flex;border-radius:0 0 4.3118px 4.3118px;justify-content:center;align-items:center;font:400 15px/17px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.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}.service-info-container{width:100%}@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}}.participation-detail-container{margin:16px 0;width:100%}.participation-detail-desktop-bar{border-radius:8px;padding:12px 24px;box-shadow:0 2px 4px #0000000d;gap:8px;display:flex;justify-content:flex-start;align-items:center}.participation-detail-value{margin-right:auto}.participation-detail-date{margin-left:4px}.participation-detail-container-mobile{padding:4px 12px!important}.participation-detail-mobile-card{border-radius:15px;padding:16px;display:flex;flex-direction:column;gap:12px}.participation-date-row{width:100%;text-align:center;padding-bottom:8px}.card-bottom-content{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.numbers-section{display:flex;flex-direction:column;flex:1}.numbers-list-vertical{display:flex;flex-direction:column;margin-top:4px;max-height:120px;overflow-y:auto}.number-item{padding:2px 0}.numbers-title{margin:0;text-transform:none}.card-icon-right{display:flex;justify-content:center;align-items:center;margin-left:10px}.card-icon-right mat-icon{width:50px!important;height:50px!important}\n"] }]
|
|
12212
12257
|
}], ctorParameters: () => [{ type: i2$d.MatIconRegistry }, { type: i3$7.DomSanitizer }, { type: MaterialModalService }], propDecorators: { wappingServicesTranslations: [{
|
|
12213
12258
|
type: Input,
|
|
12214
12259
|
args: ['wappingServicesTranslations']
|
|
12215
|
-
}],
|
|
12260
|
+
}], disabledButtonService: [{
|
|
12261
|
+
type: Input,
|
|
12262
|
+
args: ['disabledButtonService']
|
|
12263
|
+
}], showButtonService: [{
|
|
12216
12264
|
type: Input,
|
|
12217
|
-
args: ['
|
|
12265
|
+
args: ['showButtonService']
|
|
12266
|
+
}], showToggle: [{
|
|
12267
|
+
type: Input,
|
|
12268
|
+
args: ['showToggle']
|
|
12269
|
+
}], lotteryEvent: [{
|
|
12270
|
+
type: Input,
|
|
12271
|
+
args: ['lotteryEvent']
|
|
12218
12272
|
}], wappingService: [{
|
|
12219
12273
|
type: Input
|
|
12220
12274
|
}], wappingServiceSelected: [{
|
|
12221
12275
|
type: Output,
|
|
12222
12276
|
args: ['wappingServiceSelected']
|
|
12223
|
-
}],
|
|
12277
|
+
}], triggerButtonService: [{
|
|
12224
12278
|
type: Output,
|
|
12225
|
-
args: ['
|
|
12279
|
+
args: ['triggerButtonService']
|
|
12226
12280
|
}] } });
|
|
12227
12281
|
|
|
12228
12282
|
class WStampBookletComponent {
|
|
@@ -12266,11 +12320,11 @@ class WStampBookletComponent {
|
|
|
12266
12320
|
}
|
|
12267
12321
|
}
|
|
12268
12322
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: WStampBookletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12269
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: WStampBookletComponent, isStandalone: false, selector: "w-stamp-booklet", inputs: { config: "config" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"config?.enableStampCard\" \r\n class=\"card\" \r\n [ngClass]=\"{'completed': isCompleted}\"\r\n [style.background]=\"config.stampCardbgcolor || defaultColors.bg\">\r\n\r\n <div class=\"title\" [style.color]=\"config.stampCardfgcolor || defaultColors.fg\">\r\n {{ config.stampCardTitle || 'Tu Tarjeta de Puntos' }}\r\n </div>\r\n\r\n <div class=\"progress-container\">\r\n <div class=\"progress-bar\">\r\n <div class=\"progress-fill\" \r\n [style.width.%]=\"percent\"\r\n [style.background]=\"config.stampCardaccentcolor || defaultColors.accent\">\r\n </div>\r\n </div>\r\n <div class=\"progress-counter\" [style.color]=\"config.stampCardaccentcolor || defaultColors.accent\">\r\n {{ config.currentStamps }}/{{ config.totalStamps }}\r\n </div>\r\n </div>\r\n\r\n <div class=\"stamps-wrapper\">\r\n <div class=\"stamps\">\r\n <div *ngFor=\"let stampNum of stampsArray\" \r\n class=\"stamp\"\r\n [ngClass]=\"{'completed': stampNum <= safeStamps}\"\r\n [style.background]=\"stampNum <= safeStamps ? (config.stampCardbgcolorstamp || defaultColors.stampBg) : (config.stampCardaccentcolor || defaultColors.accent)\"\r\n [style.color]=\"config.stampCardfgcolorstamp || defaultColors.stampFg\"\r\n [style.animation-delay]=\"(stampNum * 0.05) + 's'\">\r\n \r\n <span *ngIf=\"stampNum <= safeStamps\">\u2714</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"footer\" \r\n [ngClass]=\"{'completed': isCompleted}\"\r\n [style.background]=\"config.stampCardaccentcolor || defaultColors.accent\"\r\n [style.color]=\"config.stampCardfgcolor || defaultColors.fg\">\r\n {{ footerText }}\r\n </div>\r\n\r\n</div>", styles: ["@charset \"UTF-8\";*{box-sizing:border-box}.card{max-width:100%;width:320px;min-width:280px;border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}.title{font-size:14px;font-weight:700}.progress-container{position:relative}.progress-bar{height:4px;background:#ddd;border-radius:999px;overflow:hidden}.progress-fill{height:100%;width:0%;border-radius:999px;transition:width .8s ease}.progress-counter{position:absolute;right:0;top:-18px;font-size:11px;font-weight:700;background:transparent}.stamps-wrapper{flex:1;display:flex;align-items:center;justify-content:center;margin:10px 0}.stamps{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(42px,1fr));gap:12px;justify-items:center}.stamp{width:clamp(36px,9vw,44px);height:clamp(36px,9vw,44px);border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:18px;font-weight:700;transition:background .3s ease}.footer{margin-top:auto;padding:12px;border-radius:10px;text-align:center;font-size:12px;font-weight:700;color:#fff;display:flex;width:100%!important;justify-content:center}.card.completed{animation:cardBounce .6s ease}.stamp.completed{animation:pop .4s ease both}.footer.completed{animation:pulse 1.2s infinite}.card.completed:before,.card.completed:after{content:\"\\1f389 \\2728 \\1f381\";position:absolute;top:-30px;left:50%;transform:translate(-50%);font-size:16px;opacity:0;animation:confetti 1.6s ease forwards}.card.completed:after{animation-delay:.3s}@keyframes pop{0%{transform:scale(.5);opacity:.2}70%{transform:scale(1.2)}to{transform:scale(1)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes cardBounce{0%{transform:scale(.95)}60%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes confetti{0%{top:-30px;opacity:0}20%{opacity:1}to{top:100px;opacity:0}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] }); }
|
|
12323
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: WStampBookletComponent, isStandalone: false, selector: "w-stamp-booklet", inputs: { config: "config" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"config?.enableStampCard\" \r\n class=\"card\" \r\n [ngClass]=\"{'completed': isCompleted}\"\r\n [style.background]=\"config.stampCardbgcolor || defaultColors.bg\">\r\n\r\n <div class=\"title\" [style.color]=\"config.stampCardfgcolor || defaultColors.fg\">\r\n {{ config.stampCardTitle || 'Tu Tarjeta de Puntos' }}\r\n </div>\r\n\r\n <div class=\"progress-container\">\r\n <div class=\"progress-bar\">\r\n <div class=\"progress-fill\" \r\n [style.width.%]=\"percent\"\r\n [style.background]=\"config.stampCardaccentcolor || defaultColors.accent\">\r\n </div>\r\n </div>\r\n <div class=\"progress-counter\" [style.color]=\"config.stampCardaccentcolor || defaultColors.accent\">\r\n {{ config.currentStamps }}/{{ config.totalStamps }}\r\n </div>\r\n </div>\r\n\r\n <div class=\"stamps-wrapper\">\r\n <div class=\"stamps\">\r\n <div *ngFor=\"let stampNum of stampsArray\" \r\n class=\"stamp\"\r\n [ngClass]=\"{'completed': stampNum <= safeStamps}\"\r\n [style.background]=\"stampNum <= safeStamps ? (config.stampCardbgcolorstamp || defaultColors.stampBg) : (config.stampCardaccentcolor || defaultColors.accent)\"\r\n [style.color]=\"config.stampCardfgcolorstamp || defaultColors.stampFg\"\r\n [style.animation-delay]=\"(stampNum * 0.05) + 's'\">\r\n \r\n <span *ngIf=\"stampNum <= safeStamps\">\u2714</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"footer\" \r\n [ngClass]=\"{'completed': isCompleted}\"\r\n [style.background]=\"config.stampCardaccentcolor || defaultColors.accent\"\r\n [style.color]=\"config.stampCardfgcolor || defaultColors.fg\">\r\n {{ footerText }}\r\n </div>\r\n\r\n</div>", styles: ["@charset \"UTF-8\";*{box-sizing:border-box}.card{max-width:100%;width:320px;min-width:280px;border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}@media(max-width:599px){.card{width:100%}.card .title{justify-content:center;display:flex}}.title{font-size:14px;font-weight:700}.progress-container{position:relative}.progress-bar{height:4px;background:#ddd;border-radius:999px;overflow:hidden}.progress-fill{height:100%;width:0%;border-radius:999px;transition:width .8s ease}.progress-counter{position:absolute;right:0;top:-18px;font-size:11px;font-weight:700;background:transparent}.stamps-wrapper{flex:1;display:flex;align-items:center;justify-content:center;margin:10px 0}.stamps{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(42px,1fr));gap:12px;justify-items:center}.stamp{width:clamp(36px,9vw,44px);height:clamp(36px,9vw,44px);border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:18px;font-weight:700;transition:background .3s ease}.footer{margin-top:auto;padding:12px;border-radius:10px;text-align:center;font-size:12px;font-weight:700;color:#fff;display:flex;width:100%!important;justify-content:center}.card.completed{animation:cardBounce .6s ease}.stamp.completed{animation:pop .4s ease both}.footer.completed{animation:pulse 1.2s infinite}.card.completed:before,.card.completed:after{content:\"\\1f389 \\2728 \\1f381\";position:absolute;top:-30px;left:50%;transform:translate(-50%);font-size:16px;opacity:0;animation:confetti 1.6s ease forwards}.card.completed:after{animation-delay:.3s}@keyframes pop{0%{transform:scale(.5);opacity:.2}70%{transform:scale(1.2)}to{transform:scale(1)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes cardBounce{0%{transform:scale(.95)}60%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes confetti{0%{top:-30px;opacity:0}20%{opacity:1}to{top:100px;opacity:0}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] }); }
|
|
12270
12324
|
}
|
|
12271
12325
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: WStampBookletComponent, decorators: [{
|
|
12272
12326
|
type: Component,
|
|
12273
|
-
args: [{ selector: 'w-stamp-booklet', standalone: false, template: "<div *ngIf=\"config?.enableStampCard\" \r\n class=\"card\" \r\n [ngClass]=\"{'completed': isCompleted}\"\r\n [style.background]=\"config.stampCardbgcolor || defaultColors.bg\">\r\n\r\n <div class=\"title\" [style.color]=\"config.stampCardfgcolor || defaultColors.fg\">\r\n {{ config.stampCardTitle || 'Tu Tarjeta de Puntos' }}\r\n </div>\r\n\r\n <div class=\"progress-container\">\r\n <div class=\"progress-bar\">\r\n <div class=\"progress-fill\" \r\n [style.width.%]=\"percent\"\r\n [style.background]=\"config.stampCardaccentcolor || defaultColors.accent\">\r\n </div>\r\n </div>\r\n <div class=\"progress-counter\" [style.color]=\"config.stampCardaccentcolor || defaultColors.accent\">\r\n {{ config.currentStamps }}/{{ config.totalStamps }}\r\n </div>\r\n </div>\r\n\r\n <div class=\"stamps-wrapper\">\r\n <div class=\"stamps\">\r\n <div *ngFor=\"let stampNum of stampsArray\" \r\n class=\"stamp\"\r\n [ngClass]=\"{'completed': stampNum <= safeStamps}\"\r\n [style.background]=\"stampNum <= safeStamps ? (config.stampCardbgcolorstamp || defaultColors.stampBg) : (config.stampCardaccentcolor || defaultColors.accent)\"\r\n [style.color]=\"config.stampCardfgcolorstamp || defaultColors.stampFg\"\r\n [style.animation-delay]=\"(stampNum * 0.05) + 's'\">\r\n \r\n <span *ngIf=\"stampNum <= safeStamps\">\u2714</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"footer\" \r\n [ngClass]=\"{'completed': isCompleted}\"\r\n [style.background]=\"config.stampCardaccentcolor || defaultColors.accent\"\r\n [style.color]=\"config.stampCardfgcolor || defaultColors.fg\">\r\n {{ footerText }}\r\n </div>\r\n\r\n</div>", styles: ["@charset \"UTF-8\";*{box-sizing:border-box}.card{max-width:100%;width:320px;min-width:280px;border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}.title{font-size:14px;font-weight:700}.progress-container{position:relative}.progress-bar{height:4px;background:#ddd;border-radius:999px;overflow:hidden}.progress-fill{height:100%;width:0%;border-radius:999px;transition:width .8s ease}.progress-counter{position:absolute;right:0;top:-18px;font-size:11px;font-weight:700;background:transparent}.stamps-wrapper{flex:1;display:flex;align-items:center;justify-content:center;margin:10px 0}.stamps{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(42px,1fr));gap:12px;justify-items:center}.stamp{width:clamp(36px,9vw,44px);height:clamp(36px,9vw,44px);border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:18px;font-weight:700;transition:background .3s ease}.footer{margin-top:auto;padding:12px;border-radius:10px;text-align:center;font-size:12px;font-weight:700;color:#fff;display:flex;width:100%!important;justify-content:center}.card.completed{animation:cardBounce .6s ease}.stamp.completed{animation:pop .4s ease both}.footer.completed{animation:pulse 1.2s infinite}.card.completed:before,.card.completed:after{content:\"\\1f389 \\2728 \\1f381\";position:absolute;top:-30px;left:50%;transform:translate(-50%);font-size:16px;opacity:0;animation:confetti 1.6s ease forwards}.card.completed:after{animation-delay:.3s}@keyframes pop{0%{transform:scale(.5);opacity:.2}70%{transform:scale(1.2)}to{transform:scale(1)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes cardBounce{0%{transform:scale(.95)}60%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes confetti{0%{top:-30px;opacity:0}20%{opacity:1}to{top:100px;opacity:0}}\n"] }]
|
|
12327
|
+
args: [{ selector: 'w-stamp-booklet', standalone: false, template: "<div *ngIf=\"config?.enableStampCard\" \r\n class=\"card\" \r\n [ngClass]=\"{'completed': isCompleted}\"\r\n [style.background]=\"config.stampCardbgcolor || defaultColors.bg\">\r\n\r\n <div class=\"title\" [style.color]=\"config.stampCardfgcolor || defaultColors.fg\">\r\n {{ config.stampCardTitle || 'Tu Tarjeta de Puntos' }}\r\n </div>\r\n\r\n <div class=\"progress-container\">\r\n <div class=\"progress-bar\">\r\n <div class=\"progress-fill\" \r\n [style.width.%]=\"percent\"\r\n [style.background]=\"config.stampCardaccentcolor || defaultColors.accent\">\r\n </div>\r\n </div>\r\n <div class=\"progress-counter\" [style.color]=\"config.stampCardaccentcolor || defaultColors.accent\">\r\n {{ config.currentStamps }}/{{ config.totalStamps }}\r\n </div>\r\n </div>\r\n\r\n <div class=\"stamps-wrapper\">\r\n <div class=\"stamps\">\r\n <div *ngFor=\"let stampNum of stampsArray\" \r\n class=\"stamp\"\r\n [ngClass]=\"{'completed': stampNum <= safeStamps}\"\r\n [style.background]=\"stampNum <= safeStamps ? (config.stampCardbgcolorstamp || defaultColors.stampBg) : (config.stampCardaccentcolor || defaultColors.accent)\"\r\n [style.color]=\"config.stampCardfgcolorstamp || defaultColors.stampFg\"\r\n [style.animation-delay]=\"(stampNum * 0.05) + 's'\">\r\n \r\n <span *ngIf=\"stampNum <= safeStamps\">\u2714</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"footer\" \r\n [ngClass]=\"{'completed': isCompleted}\"\r\n [style.background]=\"config.stampCardaccentcolor || defaultColors.accent\"\r\n [style.color]=\"config.stampCardfgcolor || defaultColors.fg\">\r\n {{ footerText }}\r\n </div>\r\n\r\n</div>", styles: ["@charset \"UTF-8\";*{box-sizing:border-box}.card{max-width:100%;width:320px;min-width:280px;border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}@media(max-width:599px){.card{width:100%}.card .title{justify-content:center;display:flex}}.title{font-size:14px;font-weight:700}.progress-container{position:relative}.progress-bar{height:4px;background:#ddd;border-radius:999px;overflow:hidden}.progress-fill{height:100%;width:0%;border-radius:999px;transition:width .8s ease}.progress-counter{position:absolute;right:0;top:-18px;font-size:11px;font-weight:700;background:transparent}.stamps-wrapper{flex:1;display:flex;align-items:center;justify-content:center;margin:10px 0}.stamps{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(42px,1fr));gap:12px;justify-items:center}.stamp{width:clamp(36px,9vw,44px);height:clamp(36px,9vw,44px);border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:18px;font-weight:700;transition:background .3s ease}.footer{margin-top:auto;padding:12px;border-radius:10px;text-align:center;font-size:12px;font-weight:700;color:#fff;display:flex;width:100%!important;justify-content:center}.card.completed{animation:cardBounce .6s ease}.stamp.completed{animation:pop .4s ease both}.footer.completed{animation:pulse 1.2s infinite}.card.completed:before,.card.completed:after{content:\"\\1f389 \\2728 \\1f381\";position:absolute;top:-30px;left:50%;transform:translate(-50%);font-size:16px;opacity:0;animation:confetti 1.6s ease forwards}.card.completed:after{animation-delay:.3s}@keyframes pop{0%{transform:scale(.5);opacity:.2}70%{transform:scale(1.2)}to{transform:scale(1)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes cardBounce{0%{transform:scale(.95)}60%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes confetti{0%{top:-30px;opacity:0}20%{opacity:1}to{top:100px;opacity:0}}\n"] }]
|
|
12274
12328
|
}], propDecorators: { config: [{
|
|
12275
12329
|
type: Input
|
|
12276
12330
|
}] } });
|
|
@@ -12404,8 +12458,18 @@ class WMaterialServiceCardComponent {
|
|
|
12404
12458
|
return this.wappingService.imageUrl;
|
|
12405
12459
|
}
|
|
12406
12460
|
else {
|
|
12407
|
-
this.
|
|
12408
|
-
|
|
12461
|
+
if (this.defaultImage) {
|
|
12462
|
+
return this.defaultImage;
|
|
12463
|
+
}
|
|
12464
|
+
else {
|
|
12465
|
+
if (this.defaultImage) {
|
|
12466
|
+
return this.defaultImage;
|
|
12467
|
+
}
|
|
12468
|
+
else {
|
|
12469
|
+
this.isNoImage = true;
|
|
12470
|
+
return './assets/wappIcons/image.svg';
|
|
12471
|
+
}
|
|
12472
|
+
}
|
|
12409
12473
|
}
|
|
12410
12474
|
}
|
|
12411
12475
|
}
|
|
@@ -12413,11 +12477,11 @@ class WMaterialServiceCardComponent {
|
|
|
12413
12477
|
return obj.base64 !== undefined;
|
|
12414
12478
|
}
|
|
12415
12479
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", 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 }); }
|
|
12416
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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\" class=\"card-header\">\r\n <div class=\"card-header-benefits\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n <div class=\"service-card-tile2\" [innerHTML]=\"wappingService.tile2\"></div>\r\n </div>\r\n <div fxflex=\"\" style=\"flex: 1 1 0%; box-sizing: border-box;\"></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: [":
|
|
12480
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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)\" \r\n [pTooltip]=\"onHoverImageTooltip\" tooltipPosition=\"top\" [tooltipDisabled]=\"!isDevModeActive\">\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\" class=\"card-header\">\r\n <div class=\"card-header-benefits\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n <div class=\"service-card-tile2\" [innerHTML]=\"wappingService.tile2\"></div>\r\n </div>\r\n <div fxflex=\"\" style=\"flex: 1 1 0%; box-sizing: border-box;\"></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: ["@media(max-width:599px){.service-card{width:100%}}@media(min-width:600px){.service-card{width:350px}}.mat-mdc-card{padding:0}.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;top:0!important;z-index:99!important}.service-card-tile1{width:100%;min-height:22px}.service-card-tile2{word-break:break-word}.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$4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i7$4.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i7$4.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$3.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$3.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$3.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: 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"] }] }); }
|
|
12417
12481
|
}
|
|
12418
12482
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: WMaterialServiceCardComponent, decorators: [{
|
|
12419
12483
|
type: Component,
|
|
12420
|
-
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\" class=\"card-header\">\r\n <div class=\"card-header-benefits\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n <div class=\"service-card-tile2\" [innerHTML]=\"wappingService.tile2\"></div>\r\n </div>\r\n <div fxflex=\"\" style=\"flex: 1 1 0%; box-sizing: border-box;\"></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: [":
|
|
12484
|
+
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)\" \r\n [pTooltip]=\"onHoverImageTooltip\" tooltipPosition=\"top\" [tooltipDisabled]=\"!isDevModeActive\">\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\" class=\"card-header\">\r\n <div class=\"card-header-benefits\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n <div class=\"service-card-tile2\" [innerHTML]=\"wappingService.tile2\"></div>\r\n </div>\r\n <div fxflex=\"\" style=\"flex: 1 1 0%; box-sizing: border-box;\"></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: ["@media(max-width:599px){.service-card{width:100%}}@media(min-width:600px){.service-card{width:350px}}.mat-mdc-card{padding:0}.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;top:0!important;z-index:99!important}.service-card-tile1{width:100%;min-height:22px}.service-card-tile2{word-break:break-word}.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"] }]
|
|
12421
12485
|
}], ctorParameters: () => [{ type: i1$6.Router }, { type: i2$d.MatIconRegistry }, { type: i3$7.DomSanitizer }, { type: i1$8.DialogService }], propDecorators: { isDevModeActive: [{
|
|
12422
12486
|
type: Input
|
|
12423
12487
|
}], wappingServicesTranslations: [{
|
|
@@ -12522,11 +12586,11 @@ class WappMaterialServiceCardComponent {
|
|
|
12522
12586
|
this.cardClicked.emit(service);
|
|
12523
12587
|
}
|
|
12524
12588
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: WappMaterialServiceCardComponent, deps: [{ token: i1$6.Router }, { token: i2$d.MatIconRegistry }, { token: i3$7.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12525
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: WappMaterialServiceCardComponent, isStandalone: false, selector: "wapp-material-service-card", inputs: { wappingServicesTranslations: "wappingServicesTranslations", wappingService: "wappingService" }, outputs: { cardClicked: "cardClicked" }, ngImport: i0, template: "@if
|
|
12589
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: WappMaterialServiceCardComponent, isStandalone: false, selector: "wapp-material-service-card", inputs: { wappingServicesTranslations: "wappingServicesTranslations", wappingService: "wappingService" }, outputs: { cardClicked: "cardClicked" }, ngImport: i0, template: "@if(wappingServiceReady){\r\n<mat-card class=\"service-card\" (click)=\"cardOnClick(wappingService)\">\r\n <div fxLayout=\"column\" fxLayoutAlign=\"center center\">\r\n @if(wappingService.tile1){\r\n <div class=\"service-card-image-title\"\r\n [style.background-color]=\"wappingService.tile1BackgroundColor\"\r\n [style.color]=\"wappingService.tile1ForegroundColor\"\r\n fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n <!--tile1-->\r\n <div>{{wappingService.tile1}}</div>\r\n @if(wappingService.showTile1Label){<div>{{wappingService.tile1Label}}</div>}\r\n </div>\r\n }\r\n <div class=\"service-card-image\">\r\n <img mat-card-image [src]=\"wappingService.imageUrl\">\r\n </div>\r\n </div>\r\n <mat-card-header fxLayout=\"column\">\r\n <div fxLayout=\"row\">\r\n <!--tile2-->\r\n <div class=\"card-header-benefits\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n <div>{{wappingService.tile2}}</div>\r\n @if(wappingService.showTile2Label){<div>{{wappingService.tile2Label}}</div>}\r\n </div>\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.allowSelect && wappingService.type != 6){\r\n <div class=\"card-header-status\">\r\n <mat-icon class=\"card-header-status-icon\" svgIcon=\"activated\"></mat-icon>\r\n <div class=\"status\">{{ wappingTranslations.activedService }}</div>\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=\"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 @if(!allowSelectSendGiftCard){\r\n <div class=\"card-header-status-container\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n @if(wappingService.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.ScheduledToSend){\r\n <div class=\"sendLabel\" >\r\n {{ wappingTranslations.scheduledLabel }}\r\n </div>\r\n }\r\n @if(wappingService.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.Sent || wappingService.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.PendingRegistration){\r\n <div class=\"sendLabel\" >\r\n {{ wappingTranslations.sendLabel }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n <!--tile3-->\r\n <div class=\"card-header-description\">\r\n {{wappingService.tile3}}\r\n </div>\r\n <!--tile4-->\r\n @if(wappingService.enumTypeStatusECardID != ecardStatus.generated){\r\n <div class=\"card-header-detail\">\r\n {{wappingService.tile4}}\r\n </div>\r\n }\r\n @if(wappingService.enumTypeStatusECardID == ecardStatus.generated){\r\n <div class=\"card-header-detail\">\r\n {{ wappingTranslations.cardGenerated }}\r\n </div>\r\n }\r\n </mat-card-header>\r\n</mat-card>\r\n}", styles: ["@media(max-width:599px){.service-card{width:100%}}@media(min-width:600px){.service-card{width:350px}}.mat-mdc-card{padding:0}.service-card{cursor:pointer;transition:none!important;box-shadow:1px 2px 8px #1f1f1f14}.service-card-image-title{position:absolute;width:75%;margin-left:40px;margin-right:40px;height:22px;top:0;z-index:99;border-radius:0 0 4.3118px 4.3118px;justify-content:center;align-items:center;display:flex}.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;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;text-align:left;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;-moz-box-orient:vertical;overflow:clip;text-overflow:ellipsis;white-space:pre-line}.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}\n"], dependencies: [{ kind: "component", type: i7$4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i7$4.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i7$4.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$3.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$3.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$3.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$3.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"] }] }); }
|
|
12526
12590
|
}
|
|
12527
12591
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: WappMaterialServiceCardComponent, decorators: [{
|
|
12528
12592
|
type: Component,
|
|
12529
|
-
args: [{ selector: 'wapp-material-service-card', standalone: false, template: "@if
|
|
12593
|
+
args: [{ selector: 'wapp-material-service-card', standalone: false, template: "@if(wappingServiceReady){\r\n<mat-card class=\"service-card\" (click)=\"cardOnClick(wappingService)\">\r\n <div fxLayout=\"column\" fxLayoutAlign=\"center center\">\r\n @if(wappingService.tile1){\r\n <div class=\"service-card-image-title\"\r\n [style.background-color]=\"wappingService.tile1BackgroundColor\"\r\n [style.color]=\"wappingService.tile1ForegroundColor\"\r\n fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n <!--tile1-->\r\n <div>{{wappingService.tile1}}</div>\r\n @if(wappingService.showTile1Label){<div>{{wappingService.tile1Label}}</div>}\r\n </div>\r\n }\r\n <div class=\"service-card-image\">\r\n <img mat-card-image [src]=\"wappingService.imageUrl\">\r\n </div>\r\n </div>\r\n <mat-card-header fxLayout=\"column\">\r\n <div fxLayout=\"row\">\r\n <!--tile2-->\r\n <div class=\"card-header-benefits\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n <div>{{wappingService.tile2}}</div>\r\n @if(wappingService.showTile2Label){<div>{{wappingService.tile2Label}}</div>}\r\n </div>\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.allowSelect && wappingService.type != 6){\r\n <div class=\"card-header-status\">\r\n <mat-icon class=\"card-header-status-icon\" svgIcon=\"activated\"></mat-icon>\r\n <div class=\"status\">{{ wappingTranslations.activedService }}</div>\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=\"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 @if(!allowSelectSendGiftCard){\r\n <div class=\"card-header-status-container\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n @if(wappingService.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.ScheduledToSend){\r\n <div class=\"sendLabel\" >\r\n {{ wappingTranslations.scheduledLabel }}\r\n </div>\r\n }\r\n @if(wappingService.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.Sent || wappingService.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.PendingRegistration){\r\n <div class=\"sendLabel\" >\r\n {{ wappingTranslations.sendLabel }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n <!--tile3-->\r\n <div class=\"card-header-description\">\r\n {{wappingService.tile3}}\r\n </div>\r\n <!--tile4-->\r\n @if(wappingService.enumTypeStatusECardID != ecardStatus.generated){\r\n <div class=\"card-header-detail\">\r\n {{wappingService.tile4}}\r\n </div>\r\n }\r\n @if(wappingService.enumTypeStatusECardID == ecardStatus.generated){\r\n <div class=\"card-header-detail\">\r\n {{ wappingTranslations.cardGenerated }}\r\n </div>\r\n }\r\n </mat-card-header>\r\n</mat-card>\r\n}", styles: ["@media(max-width:599px){.service-card{width:100%}}@media(min-width:600px){.service-card{width:350px}}.mat-mdc-card{padding:0}.service-card{cursor:pointer;transition:none!important;box-shadow:1px 2px 8px #1f1f1f14}.service-card-image-title{position:absolute;width:75%;margin-left:40px;margin-right:40px;height:22px;top:0;z-index:99;border-radius:0 0 4.3118px 4.3118px;justify-content:center;align-items:center;display:flex}.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;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;text-align:left;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;-moz-box-orient:vertical;overflow:clip;text-overflow:ellipsis;white-space:pre-line}.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}\n"] }]
|
|
12530
12594
|
}], ctorParameters: () => [{ type: i1$6.Router }, { type: i2$d.MatIconRegistry }, { type: i3$7.DomSanitizer }], propDecorators: { wappingServicesTranslations: [{
|
|
12531
12595
|
type: Input
|
|
12532
12596
|
}], wappingService: [{
|
|
@@ -12537,6 +12601,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
12537
12601
|
}] } });
|
|
12538
12602
|
|
|
12539
12603
|
class WMaterialServiceViewComponent {
|
|
12604
|
+
set lotteryEvent(value) {
|
|
12605
|
+
this._lotteryEvent = value;
|
|
12606
|
+
if (value)
|
|
12607
|
+
this.evaluateDraw();
|
|
12608
|
+
}
|
|
12609
|
+
get lotteryEvent() {
|
|
12610
|
+
return this._lotteryEvent;
|
|
12611
|
+
}
|
|
12540
12612
|
set wappingService(value) {
|
|
12541
12613
|
this._wappingService = value;
|
|
12542
12614
|
if (value)
|
|
@@ -12555,6 +12627,7 @@ class WMaterialServiceViewComponent {
|
|
|
12555
12627
|
this.enumSendingStatus = SendingStatus;
|
|
12556
12628
|
this.ecardStatus = CardStatus;
|
|
12557
12629
|
this.isDrawService = false;
|
|
12630
|
+
this.isMemberGetMember = false;
|
|
12558
12631
|
this.isStampBookletService = false;
|
|
12559
12632
|
this.forceMobile = false;
|
|
12560
12633
|
this.wappingServicesTranslations = {
|
|
@@ -12565,11 +12638,15 @@ class WMaterialServiceViewComponent {
|
|
|
12565
12638
|
cardGenerated: 'Tu tarjeta estará disponible para el envío en breves instantes',
|
|
12566
12639
|
receivedLabel: "Enviada por {{name}}",
|
|
12567
12640
|
showMore: "Mostrar más",
|
|
12568
|
-
|
|
12641
|
+
buttonService: "Participar",
|
|
12642
|
+
winnerDate: "El ganador se decidirá el",
|
|
12643
|
+
yourNumbers: "Tus números"
|
|
12569
12644
|
};
|
|
12570
|
-
this.
|
|
12645
|
+
this.disabledButtonService = false;
|
|
12646
|
+
this.showButtonService = false;
|
|
12647
|
+
this.showToggle = true;
|
|
12571
12648
|
this.wappingServiceSelected = new EventEmitter();
|
|
12572
|
-
this.
|
|
12649
|
+
this.triggerButtonService = new EventEmitter();
|
|
12573
12650
|
this.isDevModeActive = false;
|
|
12574
12651
|
this.croppedImageConfiguration = {
|
|
12575
12652
|
roundedCropper: false,
|
|
@@ -12582,13 +12659,21 @@ class WMaterialServiceViewComponent {
|
|
|
12582
12659
|
this.onDefaultImageEvent = new EventEmitter();
|
|
12583
12660
|
this.isNoImage = false;
|
|
12584
12661
|
this.onHoverImageTooltip = 'Upload image';
|
|
12585
|
-
this.
|
|
12662
|
+
this.firstParticipation = true;
|
|
12663
|
+
this.hasParticipations = false;
|
|
12664
|
+
this.disabledParticipationsModal = false;
|
|
12665
|
+
this.matIconRegistry.addSvgIconLiteral("calendar", this.domSanitizer.bypassSecurityTrustHtml(CALENDAR));
|
|
12666
|
+
this.matIconRegistry.addSvgIconLiteral("number", this.domSanitizer.bypassSecurityTrustHtml(ICON_NUMBER));
|
|
12667
|
+
this.matIconRegistry.addSvgIconLiteral("participate", this.domSanitizer.bypassSecurityTrustHtml(PARTICIPATE));
|
|
12668
|
+
this.matIconRegistry.addSvgIconLiteral("participate-again", this.domSanitizer.bypassSecurityTrustHtml(PARTICIPATE_AGAIN));
|
|
12586
12669
|
}
|
|
12587
12670
|
ngOnInit() {
|
|
12671
|
+
this.getImage();
|
|
12588
12672
|
}
|
|
12589
12673
|
ngOnChanges(changes) {
|
|
12590
12674
|
if (changes['defaultImage'] && changes['defaultImage'].currentValue) {
|
|
12591
12675
|
this.defaultImage = changes['defaultImage'].currentValue;
|
|
12676
|
+
this.getImage();
|
|
12592
12677
|
this.isNoImage = false;
|
|
12593
12678
|
if (this.isDevModeActive == true) {
|
|
12594
12679
|
if (this.defaultImage) {
|
|
@@ -12611,6 +12696,7 @@ class WMaterialServiceViewComponent {
|
|
|
12611
12696
|
getWappingService(wappService) {
|
|
12612
12697
|
this.isSendGiftCard = false;
|
|
12613
12698
|
this.isDrawService = false;
|
|
12699
|
+
this.isMemberGetMember = false;
|
|
12614
12700
|
this.isStampBookletService = false;
|
|
12615
12701
|
if (wappService.active)
|
|
12616
12702
|
this.serviceStatus = this.wappingServicesTranslations.activedService.toUpperCase();
|
|
@@ -12624,9 +12710,15 @@ class WMaterialServiceViewComponent {
|
|
|
12624
12710
|
}
|
|
12625
12711
|
if (wappService.enumTypeStatusECardID == this.ecardStatus.generated)
|
|
12626
12712
|
this.allowSelectSendGiftCard = false;
|
|
12627
|
-
if (
|
|
12713
|
+
if (this.wappingService.type == WappingServiceType.Draws) {
|
|
12628
12714
|
this.isDrawService = true;
|
|
12629
12715
|
}
|
|
12716
|
+
if (this.wappingService.type == WappingServiceType.MemberGetMember) {
|
|
12717
|
+
this.isMemberGetMember = true;
|
|
12718
|
+
}
|
|
12719
|
+
if (wappService.stampBookletConfig && wappService.stampBookletConfig.enableStampCard) {
|
|
12720
|
+
this.isStampBookletService = true;
|
|
12721
|
+
}
|
|
12630
12722
|
if (wappService.stampBookletConfig && wappService.stampBookletConfig.enableStampCard) {
|
|
12631
12723
|
this.isStampBookletService = true;
|
|
12632
12724
|
}
|
|
@@ -12635,6 +12727,16 @@ class WMaterialServiceViewComponent {
|
|
|
12635
12727
|
this.getWappingServiceImages();
|
|
12636
12728
|
}
|
|
12637
12729
|
}
|
|
12730
|
+
evaluateDraw() {
|
|
12731
|
+
if (this.lotteryEvent.isScheduledForDraw) {
|
|
12732
|
+
if (this.lotteryEvent.lotteryEventNextDraw.skyWappCardTransactionIds.length > 0) {
|
|
12733
|
+
this.firstParticipation = false;
|
|
12734
|
+
}
|
|
12735
|
+
else {
|
|
12736
|
+
this.firstParticipation = true;
|
|
12737
|
+
}
|
|
12738
|
+
}
|
|
12739
|
+
}
|
|
12638
12740
|
getWappingServiceTiles(service) {
|
|
12639
12741
|
if (service.wappingServiceTemplates != null) {
|
|
12640
12742
|
service.wappingServiceTemplates.forEach((wappingServiceTile) => {
|
|
@@ -12666,13 +12768,7 @@ class WMaterialServiceViewComponent {
|
|
|
12666
12768
|
}
|
|
12667
12769
|
}
|
|
12668
12770
|
getWappingServiceImages() {
|
|
12669
|
-
this.
|
|
12670
|
-
if (this.wappingServiceImages.length == 0) {
|
|
12671
|
-
let wappingServiceImage = {
|
|
12672
|
-
path: this.wappingService.imageUrl,
|
|
12673
|
-
};
|
|
12674
|
-
this.wappingServiceImages.unshift(wappingServiceImage);
|
|
12675
|
-
}
|
|
12771
|
+
this.getImage();
|
|
12676
12772
|
}
|
|
12677
12773
|
selectWappingService() {
|
|
12678
12774
|
this.disabledToggle = true;
|
|
@@ -12687,8 +12783,8 @@ class WMaterialServiceViewComponent {
|
|
|
12687
12783
|
hasHtml(value) {
|
|
12688
12784
|
return /<\/?[a-z][\s\S]*>/i.test(value);
|
|
12689
12785
|
}
|
|
12690
|
-
|
|
12691
|
-
this.
|
|
12786
|
+
pressButtonService() {
|
|
12787
|
+
this.triggerButtonService.emit();
|
|
12692
12788
|
}
|
|
12693
12789
|
setImage() {
|
|
12694
12790
|
this.ref = this.dialogService.open(WImageCropperComponent, {
|
|
@@ -12713,24 +12809,36 @@ class WMaterialServiceViewComponent {
|
|
|
12713
12809
|
if (this.isDevModeActive == true) {
|
|
12714
12810
|
if (this.defaultImage) {
|
|
12715
12811
|
if (this.isWFileImage(this.defaultImage)) {
|
|
12716
|
-
|
|
12812
|
+
this.wappingServiceImages = [{ path: this.defaultImage.fileBase64 }];
|
|
12717
12813
|
}
|
|
12718
12814
|
else {
|
|
12719
|
-
|
|
12815
|
+
this.wappingServiceImages = [{ path: this.defaultImage }];
|
|
12720
12816
|
}
|
|
12721
12817
|
}
|
|
12722
12818
|
else {
|
|
12723
12819
|
this.isNoImage = true;
|
|
12724
|
-
|
|
12820
|
+
this.wappingServiceImages = [{ path: './assets/wappIcons/image.svg' }];
|
|
12725
12821
|
}
|
|
12726
12822
|
}
|
|
12727
12823
|
else {
|
|
12728
|
-
if (this.
|
|
12729
|
-
|
|
12730
|
-
|
|
12731
|
-
|
|
12732
|
-
this.
|
|
12733
|
-
|
|
12824
|
+
if (this.wappingService) {
|
|
12825
|
+
if (this.wappingService.wappingServiceImages.length > 0) {
|
|
12826
|
+
this.wappingServiceImages = this.wappingService.wappingServiceImages;
|
|
12827
|
+
}
|
|
12828
|
+
else if (this.wappingService.wappingServiceImages.length == 0 && this.wappingService.imageUrl) {
|
|
12829
|
+
this.wappingServiceImages = [];
|
|
12830
|
+
let wappingServiceImage = {
|
|
12831
|
+
path: this.wappingService.imageUrl,
|
|
12832
|
+
};
|
|
12833
|
+
this.wappingServiceImages.unshift(wappingServiceImage);
|
|
12834
|
+
}
|
|
12835
|
+
else if (this.defaultImage) {
|
|
12836
|
+
this.wappingServiceImages = [{ path: this.defaultImage }];
|
|
12837
|
+
}
|
|
12838
|
+
else {
|
|
12839
|
+
this.isNoImage = true;
|
|
12840
|
+
this.wappingServiceImages = [{ path: './assets/wappIcons/image.svg' }];
|
|
12841
|
+
}
|
|
12734
12842
|
}
|
|
12735
12843
|
}
|
|
12736
12844
|
}
|
|
@@ -12738,27 +12846,36 @@ class WMaterialServiceViewComponent {
|
|
|
12738
12846
|
return obj.base64 !== undefined;
|
|
12739
12847
|
}
|
|
12740
12848
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: WMaterialServiceViewComponent, deps: [{ token: i2$d.MatIconRegistry }, { token: i3$7.DomSanitizer }, { token: i1$8.DialogService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12741
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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(!hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != '' && !isStampBookletService){\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 != '' && !isStampBookletService){\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 *ngIf=\"!isStampBookletService\"\r\n [isDevModeActive]=\"isDevModeActive\" \r\n [forceMobile]=\"forceMobile\" \r\n [images]=\"wappingServiceImages\" \r\n [isNoImage]=\"isNoImage\" \r\n (onSetImageEvent)=\"setImage()\" \r\n [onHoverImageTooltip]=\"onHoverImageTooltip\"></wapp-carousel>\r\n\r\n <!--stamp booklet-->\r\n <w-stamp-booklet *ngIf=\"isStampBookletService\"\r\n [config]=\"wappingService.stampBookletConfig!\"></w-stamp-booklet>\r\n <!--tile 2-->\r\n @if(wappingService.tile2 && wappingService.tile2 != '' && !isStampBookletService){\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-view-tile2 *{box-sizing:border-box!important}.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.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$3.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$3.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$3.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$3.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$4.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"] }, { kind: "component", type: WStampBookletComponent, selector: "w-stamp-booklet", inputs: ["config"] }] }); }
|
|
12849
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: WMaterialServiceViewComponent, isStandalone: false, selector: "w-material-service-view", inputs: { forceMobile: "forceMobile", wappingServicesTranslations: "wappingServicesTranslations", disabledButtonService: "disabledButtonService", showButtonService: "showButtonService", showToggle: "showToggle", lotteryEvent: "lotteryEvent", wappingService: "wappingService", isDevModeActive: "isDevModeActive", defaultImage: "defaultImage", croppedImageConfiguration: "croppedImageConfiguration", croppedDialogTranslations: "croppedDialogTranslations", isNoImage: "isNoImage", onHoverImageTooltip: "onHoverImageTooltip" }, outputs: { wappingServiceSelected: "wappingServiceSelected", triggerButtonService: "triggerButtonService", onDefaultImageEvent: "onDefaultImageEvent" }, providers: [DialogService], 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(!hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != '' && !isStampBookletService){\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 != '' && !isStampBookletService){\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 *ngIf=\"!isStampBookletService\"\r\n [isDevModeActive]=\"isDevModeActive\" \r\n [forceMobile]=\"forceMobile\" \r\n [images]=\"wappingServiceImages\" \r\n [isNoImage]=\"isNoImage\" \r\n (onSetImageEvent)=\"setImage()\" \r\n [onHoverImageTooltip]=\"onHoverImageTooltip\"></wapp-carousel>\r\n\r\n <!--stamp booklet-->\r\n <w-stamp-booklet *ngIf=\"isStampBookletService\"\r\n [config]=\"wappingService.stampBookletConfig!\"></w-stamp-booklet>\r\n <!--tile 2-->\r\n @if(wappingService.tile2 && wappingService.tile2 != '' && !isStampBookletService){\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 && !showButtonService && showToggle){\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(showButtonService){\r\n <button mat-flat-button \r\n class=\"service-view-button\"\r\n color=\"accent\"\r\n fxFlex=\"100\" fxHide fxShow.xs\r\n [disabled]=\"disabledButtonService\"\r\n (click)=\"pressButtonService()\">\r\n @if(isMemberGetMember){\r\n <div class=\"service-view-icon\">\r\n <mat-icon class=\"member-get-member-share-button-icon\">share</mat-icon>\r\n </div>\r\n }\r\n @if(isDrawService){\r\n <div class=\"service-view-icon\">\r\n <mat-icon class=\"service-view-participation-icon\" *ngIf=\"firstParticipation\" svgIcon=\"participate\"></mat-icon>\r\n <mat-icon class=\"service-view-participation-icon\" *ngIf=\"!firstParticipation\" svgIcon=\"participate-again\"></mat-icon>\r\n </div>\r\n }\r\n <span class=\"service-view-button-label\">{{ wappingServicesTranslations?.buttonService }}</span>\r\n </button>\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 @if(showButtonService){\r\n <div class=\"service-view-container-button\" fxHide.xs>\r\n <button mat-flat-button\r\n class=\"service-view-button\"\r\n color=\"accent\"\r\n [disabled]=\"disabledButtonService\"\r\n (click)=\"pressButtonService()\">\r\n @if(isMemberGetMember){\r\n <div class=\"service-view-icon\">\r\n <mat-icon class=\"member-get-member-share-button-icon\">share</mat-icon>\r\n </div>\r\n }\r\n @if(isDrawService){\r\n <div class=\"service-view-icon\">\r\n <mat-icon class=\"service-view-participation-icon\" *ngIf=\"firstParticipation\" svgIcon=\"participate\"></mat-icon>\r\n <mat-icon class=\"service-view-participation-icon\" *ngIf=\"!firstParticipation\" svgIcon=\"participate-again\"></mat-icon>\r\n </div>\r\n }\r\n <span class=\"service-view-button-label\">{{ wappingServicesTranslations?.buttonService }}</span>\r\n </button>\r\n </div>\r\n }\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}", 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}.mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:before{background:var(--mdc-switch-unselected-track-color, #a50000)!important}.mat-mdc-slide-toggle .mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle:after{background:var(--mdc-switch-selected-handle-color, var(--mdc-theme-primary, #fff))!important}.mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:after{background:var(--mdc-switch-selected-hover-track-color, #10c638)!important}.mat-mdc-slide-toggle .mdc-switch.mdc-switch--unselected:enabled .mdc-switch__handle:after{background:var(--mdc-switch-unselected-handle-color, #fff)!important}.mdc-form-field>label{font:400 14px/25px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}.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-tile-border-bottom-radius{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.service-view-tile2{width:100%}::ng-deep .service-view-tile2 *{box-sizing:border-box!important}.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-view-button{padding:10px 20px!important;align-items:center;justify-content:center}.service-view-button.mdc-button{border-radius:6px!important}.service-view-button .mdc-button__label{display:flex!important;align-items:center;justify-content:center;gap:8px}.service-view-button .service-view-icon{display:flex}@media(max-width:599px){.service-view-button{margin:8px 12px!important}}@media(min-width:600px){.service-view-button{padding:10px 34px!important;height:auto!important;line-height:normal!important;min-width:150px}}.service-view-container-button{display:flex;justify-content:flex-start;align-items:start;margin:12px 0}.service-info-container{width:100%}.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}}.participation-detail-container{margin:16px 0;width:100%}.participation-detail-desktop-bar{border-radius:8px;padding:12px 24px;box-shadow:0 2px 4px #0000000d;gap:8px;display:flex;justify-content:flex-start;align-items:center}.participation-detail-value{margin-right:auto}.participation-detail-date{margin-left:4px}.participation-detail-container-mobile{padding:4px 12px!important}.participation-detail-mobile-card{border-radius:15px;padding:16px;display:flex;flex-direction:column;gap:4px}.participation-date-row{width:100%;text-align:center;padding-bottom:8px}.card-bottom-content{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.numbers-section{display:flex;flex-direction:column;flex:1}.numbers-list-vertical{display:flex;flex-direction:column;margin-top:4px;max-height:120px;overflow-y:auto}.number-item{padding:2px 0}.numbers-title{margin:0;text-transform:none}.card-icon-right{display:flex;justify-content:center;align-items:center;margin-left:10px}.card-icon-right mat-icon{width:50px!important;height:50px!important}\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.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$3.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$3.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$3.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$3.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$4.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"] }, { kind: "component", type: WStampBookletComponent, selector: "w-stamp-booklet", inputs: ["config"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
12742
12850
|
}
|
|
12743
12851
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: WMaterialServiceViewComponent, decorators: [{
|
|
12744
12852
|
type: Component,
|
|
12745
|
-
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(!hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != '' && !isStampBookletService){\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 != '' && !isStampBookletService){\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 *ngIf=\"!isStampBookletService\"\r\n [isDevModeActive]=\"isDevModeActive\" \r\n [forceMobile]=\"forceMobile\" \r\n [images]=\"wappingServiceImages\" \r\n [isNoImage]=\"isNoImage\" \r\n (onSetImageEvent)=\"setImage()\" \r\n [onHoverImageTooltip]=\"onHoverImageTooltip\"></wapp-carousel>\r\n\r\n <!--stamp booklet-->\r\n <w-stamp-booklet *ngIf=\"isStampBookletService\"\r\n [config]=\"wappingService.stampBookletConfig!\"></w-stamp-booklet>\r\n <!--tile 2-->\r\n @if(wappingService.tile2 && wappingService.tile2 != '' && !isStampBookletService){\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-view-tile2 *{box-sizing:border-box!important}.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"] }]
|
|
12853
|
+
args: [{ selector: 'w-material-service-view', standalone: false, encapsulation: ViewEncapsulation.None, providers: [DialogService], 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(!hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != '' && !isStampBookletService){\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 != '' && !isStampBookletService){\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 *ngIf=\"!isStampBookletService\"\r\n [isDevModeActive]=\"isDevModeActive\" \r\n [forceMobile]=\"forceMobile\" \r\n [images]=\"wappingServiceImages\" \r\n [isNoImage]=\"isNoImage\" \r\n (onSetImageEvent)=\"setImage()\" \r\n [onHoverImageTooltip]=\"onHoverImageTooltip\"></wapp-carousel>\r\n\r\n <!--stamp booklet-->\r\n <w-stamp-booklet *ngIf=\"isStampBookletService\"\r\n [config]=\"wappingService.stampBookletConfig!\"></w-stamp-booklet>\r\n <!--tile 2-->\r\n @if(wappingService.tile2 && wappingService.tile2 != '' && !isStampBookletService){\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 && !showButtonService && showToggle){\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(showButtonService){\r\n <button mat-flat-button \r\n class=\"service-view-button\"\r\n color=\"accent\"\r\n fxFlex=\"100\" fxHide fxShow.xs\r\n [disabled]=\"disabledButtonService\"\r\n (click)=\"pressButtonService()\">\r\n @if(isMemberGetMember){\r\n <div class=\"service-view-icon\">\r\n <mat-icon class=\"member-get-member-share-button-icon\">share</mat-icon>\r\n </div>\r\n }\r\n @if(isDrawService){\r\n <div class=\"service-view-icon\">\r\n <mat-icon class=\"service-view-participation-icon\" *ngIf=\"firstParticipation\" svgIcon=\"participate\"></mat-icon>\r\n <mat-icon class=\"service-view-participation-icon\" *ngIf=\"!firstParticipation\" svgIcon=\"participate-again\"></mat-icon>\r\n </div>\r\n }\r\n <span class=\"service-view-button-label\">{{ wappingServicesTranslations?.buttonService }}</span>\r\n </button>\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 @if(showButtonService){\r\n <div class=\"service-view-container-button\" fxHide.xs>\r\n <button mat-flat-button\r\n class=\"service-view-button\"\r\n color=\"accent\"\r\n [disabled]=\"disabledButtonService\"\r\n (click)=\"pressButtonService()\">\r\n @if(isMemberGetMember){\r\n <div class=\"service-view-icon\">\r\n <mat-icon class=\"member-get-member-share-button-icon\">share</mat-icon>\r\n </div>\r\n }\r\n @if(isDrawService){\r\n <div class=\"service-view-icon\">\r\n <mat-icon class=\"service-view-participation-icon\" *ngIf=\"firstParticipation\" svgIcon=\"participate\"></mat-icon>\r\n <mat-icon class=\"service-view-participation-icon\" *ngIf=\"!firstParticipation\" svgIcon=\"participate-again\"></mat-icon>\r\n </div>\r\n }\r\n <span class=\"service-view-button-label\">{{ wappingServicesTranslations?.buttonService }}</span>\r\n </button>\r\n </div>\r\n }\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}", 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}.mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:before{background:var(--mdc-switch-unselected-track-color, #a50000)!important}.mat-mdc-slide-toggle .mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle:after{background:var(--mdc-switch-selected-handle-color, var(--mdc-theme-primary, #fff))!important}.mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:after{background:var(--mdc-switch-selected-hover-track-color, #10c638)!important}.mat-mdc-slide-toggle .mdc-switch.mdc-switch--unselected:enabled .mdc-switch__handle:after{background:var(--mdc-switch-unselected-handle-color, #fff)!important}.mdc-form-field>label{font:400 14px/25px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}.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-tile-border-bottom-radius{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.service-view-tile2{width:100%}::ng-deep .service-view-tile2 *{box-sizing:border-box!important}.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-view-button{padding:10px 20px!important;align-items:center;justify-content:center}.service-view-button.mdc-button{border-radius:6px!important}.service-view-button .mdc-button__label{display:flex!important;align-items:center;justify-content:center;gap:8px}.service-view-button .service-view-icon{display:flex}@media(max-width:599px){.service-view-button{margin:8px 12px!important}}@media(min-width:600px){.service-view-button{padding:10px 34px!important;height:auto!important;line-height:normal!important;min-width:150px}}.service-view-container-button{display:flex;justify-content:flex-start;align-items:start;margin:12px 0}.service-info-container{width:100%}.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}}.participation-detail-container{margin:16px 0;width:100%}.participation-detail-desktop-bar{border-radius:8px;padding:12px 24px;box-shadow:0 2px 4px #0000000d;gap:8px;display:flex;justify-content:flex-start;align-items:center}.participation-detail-value{margin-right:auto}.participation-detail-date{margin-left:4px}.participation-detail-container-mobile{padding:4px 12px!important}.participation-detail-mobile-card{border-radius:15px;padding:16px;display:flex;flex-direction:column;gap:4px}.participation-date-row{width:100%;text-align:center;padding-bottom:8px}.card-bottom-content{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.numbers-section{display:flex;flex-direction:column;flex:1}.numbers-list-vertical{display:flex;flex-direction:column;margin-top:4px;max-height:120px;overflow-y:auto}.number-item{padding:2px 0}.numbers-title{margin:0;text-transform:none}.card-icon-right{display:flex;justify-content:center;align-items:center;margin-left:10px}.card-icon-right mat-icon{width:50px!important;height:50px!important}\n"] }]
|
|
12746
12854
|
}], ctorParameters: () => [{ type: i2$d.MatIconRegistry }, { type: i3$7.DomSanitizer }, { type: i1$8.DialogService }], propDecorators: { forceMobile: [{
|
|
12747
12855
|
type: Input
|
|
12748
12856
|
}], wappingServicesTranslations: [{
|
|
12749
12857
|
type: Input,
|
|
12750
12858
|
args: ['wappingServicesTranslations']
|
|
12751
|
-
}],
|
|
12859
|
+
}], disabledButtonService: [{
|
|
12860
|
+
type: Input,
|
|
12861
|
+
args: ['disabledButtonService']
|
|
12862
|
+
}], showButtonService: [{
|
|
12863
|
+
type: Input,
|
|
12864
|
+
args: ['showButtonService']
|
|
12865
|
+
}], showToggle: [{
|
|
12866
|
+
type: Input,
|
|
12867
|
+
args: ['showToggle']
|
|
12868
|
+
}], lotteryEvent: [{
|
|
12752
12869
|
type: Input,
|
|
12753
|
-
args: ['
|
|
12870
|
+
args: ['lotteryEvent']
|
|
12754
12871
|
}], wappingService: [{
|
|
12755
12872
|
type: Input
|
|
12756
12873
|
}], wappingServiceSelected: [{
|
|
12757
12874
|
type: Output,
|
|
12758
12875
|
args: ['wappingServiceSelected']
|
|
12759
|
-
}],
|
|
12876
|
+
}], triggerButtonService: [{
|
|
12760
12877
|
type: Output,
|
|
12761
|
-
args: ['
|
|
12878
|
+
args: ['triggerButtonService']
|
|
12762
12879
|
}], isDevModeActive: [{
|
|
12763
12880
|
type: Input
|
|
12764
12881
|
}], defaultImage: [{
|