ngx-wapp-components 2.1.27-alpha.1 → 2.1.27
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.
- package/esm2020/lib/material/shared/components/w-stamp-booklet/w-stamp-booklet.mjs +2 -2
- package/fesm2015/ngx-wapp-components.mjs +2 -2
- package/fesm2015/ngx-wapp-components.mjs.map +1 -1
- package/fesm2020/ngx-wapp-components.mjs +2 -2
- package/fesm2020/ngx-wapp-components.mjs.map +1 -1
- package/package.json +2 -2
|
@@ -44,10 +44,10 @@ export class WStampBooklet {
|
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
46
|
WStampBooklet.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WStampBooklet, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
47
|
-
WStampBooklet.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WStampBooklet, 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: i2.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"] }] });
|
|
47
|
+
WStampBooklet.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WStampBooklet, 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}@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: i2.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"] }] });
|
|
48
48
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WStampBooklet, decorators: [{
|
|
49
49
|
type: Component,
|
|
50
|
-
args: [{ selector: 'w-stamp-booklet', 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"] }]
|
|
50
|
+
args: [{ selector: 'w-stamp-booklet', 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}@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"] }]
|
|
51
51
|
}], propDecorators: { config: [{
|
|
52
52
|
type: Input
|
|
53
53
|
}] } });
|
|
@@ -10399,10 +10399,10 @@ class WStampBooklet {
|
|
|
10399
10399
|
}
|
|
10400
10400
|
}
|
|
10401
10401
|
WStampBooklet.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WStampBooklet, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10402
|
-
WStampBooklet.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WStampBooklet, 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"] }] });
|
|
10402
|
+
WStampBooklet.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WStampBooklet, 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}@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"] }] });
|
|
10403
10403
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WStampBooklet, decorators: [{
|
|
10404
10404
|
type: Component,
|
|
10405
|
-
args: [{ selector: 'w-stamp-booklet', 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"] }]
|
|
10405
|
+
args: [{ selector: 'w-stamp-booklet', 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}@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"] }]
|
|
10406
10406
|
}], propDecorators: { config: [{
|
|
10407
10407
|
type: Input
|
|
10408
10408
|
}] } });
|