ngx-wapp-components 3.2.16-alpha.3 → 3.2.16-alpha.5
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.
|
@@ -12026,11 +12026,11 @@ class WStampBookletComponent {
|
|
|
12026
12026
|
}
|
|
12027
12027
|
}
|
|
12028
12028
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: WStampBookletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12029
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", 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.
|
|
12029
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", 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 {{ 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"] }] }); }
|
|
12030
12030
|
}
|
|
12031
12031
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: WStampBookletComponent, decorators: [{
|
|
12032
12032
|
type: Component,
|
|
12033
|
-
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.
|
|
12033
|
+
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 {{ 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"] }]
|
|
12034
12034
|
}], propDecorators: { config: [{
|
|
12035
12035
|
type: Input
|
|
12036
12036
|
}] } });
|