@sarasanalytics-com/design-system 0.0.107 → 0.0.108
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/esm2022/interfaces/typography-animation-interface.mjs +1 -1
- package/esm2022/lib/typography-animation/typography-animation.component.mjs +31 -6
- package/fesm2022/sarasanalytics-com-design-system.mjs +30 -5
- package/fesm2022/sarasanalytics-com-design-system.mjs.map +1 -1
- package/interfaces/typography-animation-interface.d.ts +1 -0
- package/lib/typography-animation/typography-animation.component.d.ts +4 -2
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export {};
|
|
2
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHlwb2dyYXBoeS1hbmltYXRpb24taW50ZXJmYWNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvY29tcG9uZW50LWxpYnJhcnkvc3JjL2ludGVyZmFjZXMvdHlwb2dyYXBoeS1hbmltYXRpb24taW50ZXJmYWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgaW50ZXJmYWNlIFRleHRBbmltYXRpb25Db25maWcge1xuICAgIHdvcmRzOiBzdHJpbmdbXTtcbiAgICBwcmVmaXg/OiBzdHJpbmc7XG4gICAgYW5pbWF0aW9uRGVsYXk/OiBudW1iZXI7XG4gICAgYW5pbWF0aW9uRHVyYXRpb24/
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHlwb2dyYXBoeS1hbmltYXRpb24taW50ZXJmYWNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvY29tcG9uZW50LWxpYnJhcnkvc3JjL2ludGVyZmFjZXMvdHlwb2dyYXBoeS1hbmltYXRpb24taW50ZXJmYWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgaW50ZXJmYWNlIFRleHRBbmltYXRpb25Db25maWcge1xuICAgIHdvcmRzOiBzdHJpbmdbXTtcbiAgICBwcmVmaXg/OiBzdHJpbmc7XG4gICAgYW5pbWF0aW9uRGVsYXk/OiBudW1iZXI7XG4gICAgYW5pbWF0aW9uRHVyYXRpb24/OiBudW1iZXI7XG4gICAgc2hvd0ZpcnN0V29yZEltbWVkaWF0ZWx5PzogYm9vbGVhbjsgXG4gIH0iXX0=
|
|
@@ -9,25 +9,50 @@ export class TypographyAnimationComponent {
|
|
|
9
9
|
words: [],
|
|
10
10
|
prefix: '',
|
|
11
11
|
animationDelay: 3000,
|
|
12
|
-
animationDuration: 200
|
|
12
|
+
animationDuration: 200,
|
|
13
|
+
showFirstWordImmediately: false
|
|
13
14
|
};
|
|
14
15
|
this.currentWordIndex = signal(0);
|
|
16
|
+
this.animationState = signal('initializing');
|
|
15
17
|
}
|
|
16
18
|
ngOnInit() {
|
|
19
|
+
// Set animation state to running after a brief initialization period
|
|
20
|
+
// This helps ensure the first word appears immediately when requested
|
|
21
|
+
setTimeout(() => {
|
|
22
|
+
this.animationState.set('running');
|
|
23
|
+
}, 50);
|
|
17
24
|
this.startAnimation();
|
|
18
25
|
}
|
|
26
|
+
ngOnChanges(changes) {
|
|
27
|
+
// Check if config has changed and is not the first change
|
|
28
|
+
if (changes['config'] && !changes['config'].firstChange) {
|
|
29
|
+
// Reset the current word index
|
|
30
|
+
this.currentWordIndex.set(0);
|
|
31
|
+
// Clear the existing interval if it exists
|
|
32
|
+
if (this.intervalId) {
|
|
33
|
+
clearInterval(this.intervalId);
|
|
34
|
+
}
|
|
35
|
+
// Restart the animation with the new configuration
|
|
36
|
+
this.startAnimation();
|
|
37
|
+
}
|
|
38
|
+
}
|
|
19
39
|
ngOnDestroy() {
|
|
20
40
|
if (this.intervalId) {
|
|
21
41
|
clearInterval(this.intervalId);
|
|
22
42
|
}
|
|
23
43
|
}
|
|
24
44
|
startAnimation() {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
45
|
+
// Trigger the first animation immediately
|
|
46
|
+
this.currentWordIndex.update(current => (current + 1) % this.config.words.length);
|
|
47
|
+
// Add a small delay before starting the interval to ensure DOM is ready
|
|
48
|
+
setTimeout(() => {
|
|
49
|
+
this.intervalId = setInterval(() => {
|
|
50
|
+
this.currentWordIndex.update(current => (current + 1) % this.config.words.length);
|
|
51
|
+
}, this.config.animationDelay || 3000);
|
|
52
|
+
}, 100);
|
|
28
53
|
}
|
|
29
54
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TypographyAnimationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
30
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TypographyAnimationComponent, isStandalone: true, selector: "sa-typography-animation", inputs: { config: "config" }, ngImport: i0, template: "<div class=\"text-animation\">\n <span class=\"prefix\" *ngIf=\"config.prefix\">{{ config.prefix }}</span>\n <span class=\"words-wrapper\">\n <ng-container *ngFor=\"let word of config.words; let i = index\">\n <span\n class=\"word\"\n [@slideAnimation]=\"currentWordIndex() === i ? 'visible' : 'hidden'\"\n [style.transition-delay]=\"config.animationDelay + 'ms'\"\n >\n {{ word }}\n </span>\n </ng-container>\n </span>\n </div>", styles: [".text-animation{display:flex;align-items:center;gap:.5rem;color:var(--text-highemphasis, #1C1B20);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px;line-height:1.2;min-height:2.4em}.prefix{white-space:nowrap}.words-wrapper{position:relative;display:inline-block;min-width:6.25rem;height:2.4em;vertical-align:top}.word{position:absolute;left:0;top:50%;width:100%;transform-origin:0 0;white-space:nowrap;opacity:0;display:flex;align-items:center;justify-content:center;will-change:transform,opacity}.word.visible{position:absolute;opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
|
|
55
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TypographyAnimationComponent, isStandalone: true, selector: "sa-typography-animation", inputs: { config: "config" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"text-animation\">\n <span class=\"prefix\" *ngIf=\"config.prefix\">{{ config.prefix }}</span>\n <span class=\"words-wrapper\">\n <ng-container *ngFor=\"let word of config.words; let i = index\">\n <span\n class=\"word\"\n [@slideAnimation]=\"currentWordIndex() === i ? 'visible' : 'hidden'\"\n [style.transition-delay]=\"config.animationDelay + 'ms'\"\n >\n {{ word }}\n </span>\n </ng-container>\n </span>\n </div>", styles: [".text-animation{display:flex;align-items:center;gap:.5rem;color:var(--text-highemphasis, #1C1B20);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px;line-height:1.2;min-height:2.4em}.prefix{white-space:nowrap}.words-wrapper{position:relative;display:inline-block;min-width:6.25rem;height:2.4em;vertical-align:top}.word{position:absolute;left:0;top:50%;width:100%;transform-origin:0 0;white-space:nowrap;opacity:0;display:flex;align-items:center;justify-content:center;will-change:transform,opacity}.word.visible{position:absolute;opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
|
|
31
56
|
trigger('slideAnimation', [
|
|
32
57
|
state('hidden', style({
|
|
33
58
|
opacity: 0,
|
|
@@ -69,4 +94,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
69
94
|
}], propDecorators: { config: [{
|
|
70
95
|
type: Input
|
|
71
96
|
}] } });
|
|
72
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
97
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHlwb2dyYXBoeS1hbmltYXRpb24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29tcG9uZW50LWxpYnJhcnkvc3JjL2xpYi90eXBvZ3JhcGh5LWFuaW1hdGlvbi90eXBvZ3JhcGh5LWFuaW1hdGlvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL3R5cG9ncmFwaHktYW5pbWF0aW9uL3R5cG9ncmFwaHktYW5pbWF0aW9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUErQyxNQUFNLEVBQW9CLHVCQUF1QixFQUFzQixNQUFNLGVBQWUsQ0FBQztBQUNySyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFHL0MsT0FBTyxFQUFFLE9BQU8sRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLFVBQVUsRUFBRSxPQUFPLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQzs7O0FBNkJqRixNQUFNLE9BQU8sNEJBQTRCO0lBMUJ6QztRQTJCVyxXQUFNLEdBQXdCO1lBQ3JDLEtBQUssRUFBRSxFQUFFO1lBQ1QsTUFBTSxFQUFFLEVBQUU7WUFDVixjQUFjLEVBQUUsSUFBSTtZQUNwQixpQkFBaUIsRUFBRSxHQUFHO1lBQ3RCLHdCQUF3QixFQUFFLEtBQUs7U0FDaEMsQ0FBQztRQUVGLHFCQUFnQixHQUFHLE1BQU0sQ0FBUyxDQUFDLENBQUMsQ0FBQztRQUNyQyxtQkFBYyxHQUFHLE1BQU0sQ0FBNkIsY0FBYyxDQUFDLENBQUM7S0FrRHJFO0lBL0NDLFFBQVE7UUFDTixxRUFBcUU7UUFDckUsc0VBQXNFO1FBQ3RFLFVBQVUsQ0FBQyxHQUFHLEVBQUU7WUFDZCxJQUFJLENBQUMsY0FBYyxDQUFDLEdBQUcsQ0FBQyxTQUFTLENBQUMsQ0FBQztRQUNy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Z0NBQ1YsU0FBUyxFQUFFLGtCQUFrQjs2QkFDOUIsQ0FBQyxDQUFDOzRCQUNILFVBQVUsQ0FBQyxtQkFBbUIsRUFBRTtnQ0FDOUIsT0FBTyxDQUFDLHlCQUF5QixDQUFDOzZCQUNuQyxFQUFFLEVBQUUsTUFBTSxFQUFFLEVBQUUsUUFBUSxFQUFFLEdBQUcsRUFBRSxFQUFFLENBQUM7NEJBQ2pDLFVBQVUsQ0FBQyxtQkFBbUIsRUFBRTtnQ0FDOUIsT0FBTyxDQUFDLHdCQUF3QixDQUFDOzZCQUNsQyxFQUFFLEVBQUUsTUFBTSxFQUFFLEVBQUUsUUFBUSxFQUFFLEdBQUcsRUFBRSxFQUFFLENBQUM7eUJBQ2xDLENBQUM7cUJBQ0gsbUJBQ2dCLHVCQUF1QixDQUFDLE1BQU07OEJBR3RDLE1BQU07c0JBQWQsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE9uSW5pdCwgT25EZXN0cm95LCBPbkNoYW5nZXMsIFNpbXBsZUNoYW5nZXMsIHNpZ25hbCwgY29tcHV0ZWQsIGVmZmVjdCwgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIERlc3Ryb3lSZWYsIGluamVjdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IGludGVydmFsLCBTdWJqZWN0IH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyB0YWtlVW50aWwgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5pbXBvcnQgeyB0cmlnZ2VyLCBzdGF0ZSwgc3R5bGUsIHRyYW5zaXRpb24sIGFuaW1hdGUgfSBmcm9tICdAYW5ndWxhci9hbmltYXRpb25zJztcbmltcG9ydCB7IFRleHRBbmltYXRpb25Db25maWcgfSBmcm9tICcuLi8uLi9pbnRlcmZhY2VzL3R5cG9ncmFwaHktYW5pbWF0aW9uLWludGVyZmFjZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3NhLXR5cG9ncmFwaHktYW5pbWF0aW9uJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZV0sXG4gIHRlbXBsYXRlVXJsOiAnLi90eXBvZ3JhcGh5LWFuaW1hdGlvbi5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi90eXBvZ3JhcGh5LWFuaW1hdGlvbi5jb21wb25lbnQuY3NzJyxcbiAgYW5pbWF0aW9uczogW1xuICAgIHRyaWdnZXIoJ3NsaWRlQW5pbWF0aW9uJywgW1xuICAgICAgc3RhdGUoJ2hpZGRlbicsIHN0eWxlKHtcbiAgICAgICAgb3BhY2l0eTogMCxcbiAgICAgICAgdHJhbnNmb3JtOiAndHJhbnNsYXRlWSgxcHgpJ1xuICAgICAgfSkpLFxuICAgICAgc3RhdGUoJ3Zpc2libGUnLCBzdHlsZSh7XG4gICAgICAgIG9wYWNpdHk6IDEsXG4gICAgICAgIHRyYW5zZm9ybTogJ3RyYW5zbGF0ZVkoLTUwJSknXG4gICAgICB9KSksXG4gICAgICB0cmFuc2l0aW9uKCdoaWRkZW4gPT4gdmlzaWJsZScsIFtcbiAgICAgICAgYW5pbWF0ZSgne3tkdXJhdGlvbn19bXMgZWFzZS1vdXQnKVxuICAgICAgXSwgeyBwYXJhbXM6IHsgZHVyYXRpb246IDMwMCB9IH0pLFxuICAgICAgdHJhbnNpdGlvbigndmlzaWJsZSA9PiBoaWRkZW4nLCBbXG4gICAgICAgIGFuaW1hdGUoJ3t7ZHVyYXRpb259fW1zIGVhc2UtaW4nKVxuICAgICAgXSwgeyBwYXJhbXM6IHsgZHVyYXRpb246IDMwMCB9IH0pXG4gICAgXSlcbiAgXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2hcbn0pXG5leHBvcnQgY2xhc3MgVHlwb2dyYXBoeUFuaW1hdGlvbkNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95LCBPbkNoYW5nZXMge1xuICBASW5wdXQoKSBjb25maWc6IFRleHRBbmltYXRpb25Db25maWcgPSB7XG4gICAgd29yZHM6IFtdLFxuICAgIHByZWZpeDogJycsXG4gICAgYW5pbWF0aW9uRGVsYXk6IDMwMDAsXG4gICAgYW5pbWF0aW9uRHVyYXRpb246IDIwMCxcbiAgICBzaG93Rmlyc3RXb3JkSW1tZWRpYXRlbHk6IGZhbHNlXG4gIH07XG5cbiAgY3VycmVudFdvcmRJbmRleCA9IHNpZ25hbDxudW1iZXI+KDApO1xuICBhbmltYXRpb25TdGF0ZSA9IHNpZ25hbDwnaW5pdGlhbGl6aW5nJyB8ICdydW5uaW5nJz4oJ2luaXRpYWxpemluZycpO1xuICBwcml2YXRlIGludGVydmFsSWQ6IGFueTtcblxuICBuZ09uSW5pdCgpIHtcbiAgICAvLyBTZXQgYW5pbWF0aW9uIHN0YXRlIHRvIHJ1bm5pbmcgYWZ0ZXIgYSBicmllZiBpbml0aWFsaXphdGlvbiBwZXJpb2RcbiAgICAvLyBUaGlzIGhlbHBzIGVuc3VyZSB0aGUgZmlyc3Qgd29yZCBhcHBlYXJzIGltbWVkaWF0ZWx5IHdoZW4gcmVxdWVzdGVkXG4gICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICB0aGlzLmFuaW1hdGlvblN0YXRlLnNldCgncnVubmluZycpO1xuICAgIH0sIDUwKTtcbiAgICBcbiAgICB0aGlzLnN0YXJ0QW5pbWF0aW9uKCk7XG4gIH1cblxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XG4gICAgLy8gQ2hlY2sgaWYgY29uZmlnIGhhcyBjaGFuZ2VkIGFuZCBpcyBub3QgdGhlIGZpcnN0IGNoYW5nZVxuICAgIGlmIChjaGFuZ2VzWydjb25maWcnXSAmJiAhY2hhbmdlc1snY29uZmlnJ10uZmlyc3RDaGFuZ2UpIHtcbiAgICAgIC8vIFJlc2V0IHRoZSBjdXJyZW50IHdvcmQgaW5kZXhcbiAgICAgIHRoaXMuY3VycmVudFdvcmRJbmRleC5zZXQoMCk7XG4gICAgICBcbiAgICAgIC8vIENsZWFyIHRoZSBleGlzdGluZyBpbnRlcnZhbCBpZiBpdCBleGlzdHNcbiAgICAgIGlmICh0aGlzLmludGVydmFsSWQpIHtcbiAgICAgICAgY2xlYXJJbnRlcnZhbCh0aGlzLmludGVydmFsSWQpO1xuICAgICAgfVxuICAgICAgXG4gICAgICAvLyBSZXN0YXJ0IHRoZSBhbmltYXRpb24gd2l0aCB0aGUgbmV3IGNvbmZpZ3VyYXRpb25cbiAgICAgIHRoaXMuc3RhcnRBbmltYXRpb24oKTtcbiAgICB9XG4gIH1cblxuICBuZ09uRGVzdHJveSgpIHtcbiAgICBpZiAodGhpcy5pbnRlcnZhbElkKSB7XG4gICAgICBjbGVhckludGVydmFsKHRoaXMuaW50ZXJ2YWxJZCk7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSBzdGFydEFuaW1hdGlvbigpIHtcbiAgICAvLyBUcmlnZ2VyIHRoZSBmaXJzdCBhbmltYXRpb24gaW1tZWRpYXRlbHlcbiAgICB0aGlzLmN1cnJlbnRXb3JkSW5kZXgudXBkYXRlKGN1cnJlbnQgPT4gXG4gICAgICAoY3VycmVudCArIDEpICUgdGhpcy5jb25maWcud29yZHMubGVuZ3RoXG4gICAgKTtcblxuICAgIC8vIEFkZCBhIHNtYWxsIGRlbGF5IGJlZm9yZSBzdGFydGluZyB0aGUgaW50ZXJ2YWwgdG8gZW5zdXJlIERPTSBpcyByZWFkeVxuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgdGhpcy5pbnRlcnZhbElkID0gc2V0SW50ZXJ2YWwoKCkgPT4ge1xuICAgICAgICB0aGlzLmN1cnJlbnRXb3JkSW5kZXgudXBkYXRlKGN1cnJlbnQgPT4gXG4gICAgICAgICAgKGN1cnJlbnQgKyAxKSAlIHRoaXMuY29uZmlnLndvcmRzLmxlbmd0aFxuICAgICAgICApO1xuICAgICAgfSwgdGhpcy5jb25maWcuYW5pbWF0aW9uRGVsYXkgfHwgMzAwMCk7XG4gICAgfSwgMTAwKTtcbiAgfVxufSIsIjxkaXYgY2xhc3M9XCJ0ZXh0LWFuaW1hdGlvblwiPlxuICAgIDxzcGFuIGNsYXNzPVwicHJlZml4XCIgKm5nSWY9XCJjb25maWcucHJlZml4XCI+e3sgY29uZmlnLnByZWZpeCB9fTwvc3Bhbj5cbiAgICA8c3BhbiBjbGFzcz1cIndvcmRzLXdyYXBwZXJcIj5cbiAgICAgIDxuZy1jb250YWluZXIgKm5nRm9yPVwibGV0IHdvcmQgb2YgY29uZmlnLndvcmRzOyBsZXQgaSA9IGluZGV4XCI+XG4gICAgICAgIDxzcGFuXG4gICAgICAgICAgY2xhc3M9XCJ3b3JkXCJcbiAgICAgICAgICBbQHNsaWRlQW5pbWF0aW9uXT1cImN1cnJlbnRXb3JkSW5kZXgoKSA9PT0gaSA/ICd2aXNpYmxlJyA6ICdoaWRkZW4nXCJcbiAgICAgICAgICBbc3R5bGUudHJhbnNpdGlvbi1kZWxheV09XCJjb25maWcuYW5pbWF0aW9uRGVsYXkgKyAnbXMnXCJcbiAgICAgICAgPlxuICAgICAgICAgIHt7IHdvcmQgfX1cbiAgICAgICAgPC9zcGFuPlxuICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgPC9zcGFuPlxuICA8L2Rpdj4iXX0=
|
|
@@ -3090,25 +3090,50 @@ class TypographyAnimationComponent {
|
|
|
3090
3090
|
words: [],
|
|
3091
3091
|
prefix: '',
|
|
3092
3092
|
animationDelay: 3000,
|
|
3093
|
-
animationDuration: 200
|
|
3093
|
+
animationDuration: 200,
|
|
3094
|
+
showFirstWordImmediately: false
|
|
3094
3095
|
};
|
|
3095
3096
|
this.currentWordIndex = signal(0);
|
|
3097
|
+
this.animationState = signal('initializing');
|
|
3096
3098
|
}
|
|
3097
3099
|
ngOnInit() {
|
|
3100
|
+
// Set animation state to running after a brief initialization period
|
|
3101
|
+
// This helps ensure the first word appears immediately when requested
|
|
3102
|
+
setTimeout(() => {
|
|
3103
|
+
this.animationState.set('running');
|
|
3104
|
+
}, 50);
|
|
3098
3105
|
this.startAnimation();
|
|
3099
3106
|
}
|
|
3107
|
+
ngOnChanges(changes) {
|
|
3108
|
+
// Check if config has changed and is not the first change
|
|
3109
|
+
if (changes['config'] && !changes['config'].firstChange) {
|
|
3110
|
+
// Reset the current word index
|
|
3111
|
+
this.currentWordIndex.set(0);
|
|
3112
|
+
// Clear the existing interval if it exists
|
|
3113
|
+
if (this.intervalId) {
|
|
3114
|
+
clearInterval(this.intervalId);
|
|
3115
|
+
}
|
|
3116
|
+
// Restart the animation with the new configuration
|
|
3117
|
+
this.startAnimation();
|
|
3118
|
+
}
|
|
3119
|
+
}
|
|
3100
3120
|
ngOnDestroy() {
|
|
3101
3121
|
if (this.intervalId) {
|
|
3102
3122
|
clearInterval(this.intervalId);
|
|
3103
3123
|
}
|
|
3104
3124
|
}
|
|
3105
3125
|
startAnimation() {
|
|
3106
|
-
|
|
3107
|
-
|
|
3108
|
-
|
|
3126
|
+
// Trigger the first animation immediately
|
|
3127
|
+
this.currentWordIndex.update(current => (current + 1) % this.config.words.length);
|
|
3128
|
+
// Add a small delay before starting the interval to ensure DOM is ready
|
|
3129
|
+
setTimeout(() => {
|
|
3130
|
+
this.intervalId = setInterval(() => {
|
|
3131
|
+
this.currentWordIndex.update(current => (current + 1) % this.config.words.length);
|
|
3132
|
+
}, this.config.animationDelay || 3000);
|
|
3133
|
+
}, 100);
|
|
3109
3134
|
}
|
|
3110
3135
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TypographyAnimationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3111
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TypographyAnimationComponent, isStandalone: true, selector: "sa-typography-animation", inputs: { config: "config" }, ngImport: i0, template: "<div class=\"text-animation\">\n <span class=\"prefix\" *ngIf=\"config.prefix\">{{ config.prefix }}</span>\n <span class=\"words-wrapper\">\n <ng-container *ngFor=\"let word of config.words; let i = index\">\n <span\n class=\"word\"\n [@slideAnimation]=\"currentWordIndex() === i ? 'visible' : 'hidden'\"\n [style.transition-delay]=\"config.animationDelay + 'ms'\"\n >\n {{ word }}\n </span>\n </ng-container>\n </span>\n </div>", styles: [".text-animation{display:flex;align-items:center;gap:.5rem;color:var(--text-highemphasis, #1C1B20);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px;line-height:1.2;min-height:2.4em}.prefix{white-space:nowrap}.words-wrapper{position:relative;display:inline-block;min-width:6.25rem;height:2.4em;vertical-align:top}.word{position:absolute;left:0;top:50%;width:100%;transform-origin:0 0;white-space:nowrap;opacity:0;display:flex;align-items:center;justify-content:center;will-change:transform,opacity}.word.visible{position:absolute;opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
|
|
3136
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TypographyAnimationComponent, isStandalone: true, selector: "sa-typography-animation", inputs: { config: "config" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"text-animation\">\n <span class=\"prefix\" *ngIf=\"config.prefix\">{{ config.prefix }}</span>\n <span class=\"words-wrapper\">\n <ng-container *ngFor=\"let word of config.words; let i = index\">\n <span\n class=\"word\"\n [@slideAnimation]=\"currentWordIndex() === i ? 'visible' : 'hidden'\"\n [style.transition-delay]=\"config.animationDelay + 'ms'\"\n >\n {{ word }}\n </span>\n </ng-container>\n </span>\n </div>", styles: [".text-animation{display:flex;align-items:center;gap:.5rem;color:var(--text-highemphasis, #1C1B20);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px;line-height:1.2;min-height:2.4em}.prefix{white-space:nowrap}.words-wrapper{position:relative;display:inline-block;min-width:6.25rem;height:2.4em;vertical-align:top}.word{position:absolute;left:0;top:50%;width:100%;transform-origin:0 0;white-space:nowrap;opacity:0;display:flex;align-items:center;justify-content:center;will-change:transform,opacity}.word.visible{position:absolute;opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
|
|
3112
3137
|
trigger('slideAnimation', [
|
|
3113
3138
|
state('hidden', style({
|
|
3114
3139
|
opacity: 0,
|