@tacdaed/fragments 1.0.0-beta.7 → 1.0.0-beta.8
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/assets/styles/scss/_fonts.scss +122 -0
- package/fesm2022/tacdaed-fragments.mjs +50 -54
- package/index.d.ts +11 -10
- package/package.json +1 -1
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
/* ==========================================================================
|
|
2
|
+
FONT DEFINITIONS
|
|
3
|
+
Path: assets/resources/fonts/
|
|
4
|
+
========================================================================== */
|
|
5
|
+
|
|
6
|
+
/* =======================
|
|
7
|
+
OPEN SANS
|
|
8
|
+
======================= */
|
|
9
|
+
@font-face {
|
|
10
|
+
font-family: 'Open Sans';
|
|
11
|
+
font-style: normal;
|
|
12
|
+
font-weight: 100 900;
|
|
13
|
+
font-display: swap;
|
|
14
|
+
src: url('/assets/resources/fonts/OpenSans/OpenSans-VariableFont_wdth_wght.ttf') format('truetype');
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@font-face {
|
|
18
|
+
font-family: 'Open Sans';
|
|
19
|
+
font-style: italic;
|
|
20
|
+
font-weight: 100 900;
|
|
21
|
+
font-display: swap;
|
|
22
|
+
src: url('/assets/resources/fonts/OpenSans/OpenSans-Italic-VariableFont_wdth_wght.ttf') format('truetype');
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/* =======================
|
|
26
|
+
ROBOTO
|
|
27
|
+
======================= */
|
|
28
|
+
@font-face {
|
|
29
|
+
font-family: 'Roboto';
|
|
30
|
+
src: url('/assets/resources/fonts/Roboto/Roboto-Thin.ttf') format('truetype');
|
|
31
|
+
font-weight: 100;
|
|
32
|
+
font-style: normal;
|
|
33
|
+
font-display: swap;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
@font-face {
|
|
37
|
+
font-family: 'Roboto';
|
|
38
|
+
src: url('/assets/resources/fonts/Roboto/Roboto-ThinItalic.ttf') format('truetype');
|
|
39
|
+
font-weight: 100;
|
|
40
|
+
font-style: italic;
|
|
41
|
+
font-display: swap;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
@font-face {
|
|
45
|
+
font-family: 'Roboto';
|
|
46
|
+
src: url('/assets/resources/fonts/Roboto/Roboto-Light.ttf') format('truetype');
|
|
47
|
+
font-weight: 300;
|
|
48
|
+
font-style: normal;
|
|
49
|
+
font-display: swap;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
@font-face {
|
|
53
|
+
font-family: 'Roboto';
|
|
54
|
+
src: url('/assets/resources/fonts/Roboto/Roboto-LightItalic.ttf') format('truetype');
|
|
55
|
+
font-weight: 300;
|
|
56
|
+
font-style: italic;
|
|
57
|
+
font-display: swap;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
@font-face {
|
|
61
|
+
font-family: 'Roboto';
|
|
62
|
+
src: url('/assets/resources/fonts/Roboto/Roboto-Regular.ttf') format('truetype');
|
|
63
|
+
font-weight: 400;
|
|
64
|
+
font-style: normal;
|
|
65
|
+
font-display: swap;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
@font-face {
|
|
69
|
+
font-family: 'Roboto';
|
|
70
|
+
src: url('/assets/resources/fonts/Roboto/Roboto-Italic.ttf') format('truetype');
|
|
71
|
+
font-weight: 400;
|
|
72
|
+
font-style: italic;
|
|
73
|
+
font-display: swap;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
@font-face {
|
|
77
|
+
font-family: 'Roboto';
|
|
78
|
+
src: url('/assets/resources/fonts/Roboto/Roboto-Medium.ttf') format('truetype');
|
|
79
|
+
font-weight: 500;
|
|
80
|
+
font-style: normal;
|
|
81
|
+
font-display: swap;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
@font-face {
|
|
85
|
+
font-family: 'Roboto';
|
|
86
|
+
src: url('/assets/resources/fonts/Roboto/Roboto-MediumItalic.ttf') format('truetype');
|
|
87
|
+
font-weight: 500;
|
|
88
|
+
font-style: italic;
|
|
89
|
+
font-display: swap;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
@font-face {
|
|
93
|
+
font-family: 'Roboto';
|
|
94
|
+
src: url('/assets/resources/fonts/Roboto/Roboto-Bold.ttf') format('truetype');
|
|
95
|
+
font-weight: 700;
|
|
96
|
+
font-style: normal;
|
|
97
|
+
font-display: swap;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
@font-face {
|
|
101
|
+
font-family: 'Roboto';
|
|
102
|
+
src: url('/assets/resources/fonts/Roboto/Roboto-BoldItalic.ttf') format('truetype');
|
|
103
|
+
font-weight: 700;
|
|
104
|
+
font-style: italic;
|
|
105
|
+
font-display: swap;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
@font-face {
|
|
109
|
+
font-family: 'Roboto';
|
|
110
|
+
src: url('/assets/resources/fonts/Roboto/Roboto-Black.ttf') format('truetype');
|
|
111
|
+
font-weight: 900;
|
|
112
|
+
font-style: normal;
|
|
113
|
+
font-display: swap;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
@font-face {
|
|
117
|
+
font-family: 'Roboto';
|
|
118
|
+
src: url('/assets/resources/fonts/Roboto/Roboto-BlackItalic.ttf') format('truetype');
|
|
119
|
+
font-weight: 900;
|
|
120
|
+
font-style: italic;
|
|
121
|
+
font-display: swap;
|
|
122
|
+
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i1 from '@angular/common';
|
|
2
|
-
import { NgTemplateOutlet, NgClass, CommonModule,
|
|
2
|
+
import { NgTemplateOutlet, NgClass, CommonModule, formatDate, AsyncPipe } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
4
|
import { EventEmitter, TemplateRef, ViewChildren, ContentChild, Output, Input, Component, HostListener, inject, ChangeDetectorRef, ViewChild, ChangeDetectionStrategy, HostBinding, ElementRef, Renderer2, Directive, Pipe, Injector, LOCALE_ID } from '@angular/core';
|
|
5
5
|
import { RouterLink, RouterLinkActive, Router, ActivatedRoute, NavigationEnd } from '@angular/router';
|
|
@@ -1556,11 +1556,11 @@ class BlobMorphComponent extends MorphBase {
|
|
|
1556
1556
|
this.loadEvent.emit();
|
|
1557
1557
|
}
|
|
1558
1558
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BlobMorphComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1559
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: BlobMorphComponent, isStandalone: true, selector: "
|
|
1559
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: BlobMorphComponent, isStandalone: true, selector: "frg-blob-morph", inputs: { imageUrl: "imageUrl", fillColor: "fillColor", pathStart: "pathStart", pathEnd: "pathEnd", duration: "duration" }, outputs: { loadEvent: "loadEvent" }, viewQueries: [{ propertyName: "morphPathRef", first: true, predicate: ["morphPath"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"blob-container\">\r\n <svg\r\n viewBox=\"0 0 200 200\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"blob-svg\"\r\n [class.hidden]=\"!isLoaded\"\r\n >\r\n <defs>\r\n <clipPath [attr.id]=\"clipId\" transform=\"translate(100 100)\">\r\n <path #morphPath [attr.d]=\"pathStart\" />\r\n </clipPath>\r\n <path [attr.id]=\"'morph-path-end-' + clipId\" [attr.d]=\"pathEnd\" />\r\n </defs>\r\n\r\n @if (imageUrl) {\r\n <image\r\n [attr.href]=\"imageUrl\"\r\n width=\"100%\"\r\n height=\"100%\"\r\n preserveAspectRatio=\"xMidYMid slice\"\r\n [attr.clip-path]=\"'url(#' + clipId + ')'\"\r\n (load)=\"onLoadEvent()\"\r\n />\r\n } @else {\r\n <g [attr.clip-path]=\"'url(#' + clipId + ')'\">\r\n <rect width=\"100%\" height=\"100%\" [attr.fill]=\"fillColor || '#ccc'\" />\r\n </g>\r\n }\r\n </svg>\r\n\r\n @if (!isLoaded) {\r\n <frg-spinner [isOverlayItem]=\"true\"></frg-spinner>\r\n }\r\n</div>\r\n", styles: [":host{display:block}:host .blob-container{position:relative}\n"], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "frg-spinner", inputs: ["size", "isCentered", "isOverlay", "isOverlayItem", "label", "styleType"] }] }); }
|
|
1560
1560
|
}
|
|
1561
1561
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BlobMorphComponent, decorators: [{
|
|
1562
1562
|
type: Component,
|
|
1563
|
-
args: [{ selector: '
|
|
1563
|
+
args: [{ selector: 'frg-blob-morph', imports: [SpinnerComponent], template: "<div class=\"blob-container\">\r\n <svg\r\n viewBox=\"0 0 200 200\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"blob-svg\"\r\n [class.hidden]=\"!isLoaded\"\r\n >\r\n <defs>\r\n <clipPath [attr.id]=\"clipId\" transform=\"translate(100 100)\">\r\n <path #morphPath [attr.d]=\"pathStart\" />\r\n </clipPath>\r\n <path [attr.id]=\"'morph-path-end-' + clipId\" [attr.d]=\"pathEnd\" />\r\n </defs>\r\n\r\n @if (imageUrl) {\r\n <image\r\n [attr.href]=\"imageUrl\"\r\n width=\"100%\"\r\n height=\"100%\"\r\n preserveAspectRatio=\"xMidYMid slice\"\r\n [attr.clip-path]=\"'url(#' + clipId + ')'\"\r\n (load)=\"onLoadEvent()\"\r\n />\r\n } @else {\r\n <g [attr.clip-path]=\"'url(#' + clipId + ')'\">\r\n <rect width=\"100%\" height=\"100%\" [attr.fill]=\"fillColor || '#ccc'\" />\r\n </g>\r\n }\r\n </svg>\r\n\r\n @if (!isLoaded) {\r\n <frg-spinner [isOverlayItem]=\"true\"></frg-spinner>\r\n }\r\n</div>\r\n", styles: [":host{display:block}:host .blob-container{position:relative}\n"] }]
|
|
1564
1564
|
}], propDecorators: { imageUrl: [{
|
|
1565
1565
|
type: Input
|
|
1566
1566
|
}], fillColor: [{
|
|
@@ -1580,8 +1580,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
|
|
|
1580
1580
|
|
|
1581
1581
|
class SparkleFieldComponent {
|
|
1582
1582
|
constructor() {
|
|
1583
|
-
this.width =
|
|
1584
|
-
this.height =
|
|
1583
|
+
this.width = null;
|
|
1584
|
+
this.height = null;
|
|
1585
1585
|
this.count = 12;
|
|
1586
1586
|
this.minSize = 2;
|
|
1587
1587
|
this.maxSize = 6;
|
|
@@ -1591,22 +1591,29 @@ class SparkleFieldComponent {
|
|
|
1591
1591
|
this.loop = true;
|
|
1592
1592
|
this.color = null;
|
|
1593
1593
|
this.sparkles = [];
|
|
1594
|
-
this.
|
|
1595
|
-
this.
|
|
1594
|
+
this.animations = [];
|
|
1595
|
+
this.changesSub = null;
|
|
1596
1596
|
this.fallbackWidth = 260;
|
|
1597
1597
|
this.fallbackHeight = 160;
|
|
1598
1598
|
}
|
|
1599
1599
|
get hostWidth() {
|
|
1600
|
-
return this.
|
|
1600
|
+
return this.width == null ? null : this.formatSize(this.width);
|
|
1601
1601
|
}
|
|
1602
1602
|
get hostHeight() {
|
|
1603
|
-
return this.
|
|
1603
|
+
return this.height === null ? null : this.formatSize(this.height);
|
|
1604
1604
|
}
|
|
1605
1605
|
get hostMinWidth() {
|
|
1606
|
-
return this.needsMinSize(this.width)
|
|
1606
|
+
return this.needsMinSize(this.width)
|
|
1607
|
+
? `${this.fallbackWidth}px`
|
|
1608
|
+
: null;
|
|
1607
1609
|
}
|
|
1608
1610
|
get hostMinHeight() {
|
|
1609
|
-
return this.needsMinSize(this.height)
|
|
1611
|
+
return this.needsMinSize(this.height)
|
|
1612
|
+
? `${this.fallbackHeight}px`
|
|
1613
|
+
: null;
|
|
1614
|
+
}
|
|
1615
|
+
get hostColor() {
|
|
1616
|
+
return this.color;
|
|
1610
1617
|
}
|
|
1611
1618
|
ngOnInit() {
|
|
1612
1619
|
this.buildSparkles();
|
|
@@ -1617,91 +1624,77 @@ class SparkleFieldComponent {
|
|
|
1617
1624
|
changes['maxSize'] ||
|
|
1618
1625
|
changes['drift'] ||
|
|
1619
1626
|
changes['minDuration'] ||
|
|
1620
|
-
changes['maxDuration']
|
|
1621
|
-
changes['loop']) {
|
|
1627
|
+
changes['maxDuration']) {
|
|
1622
1628
|
this.buildSparkles();
|
|
1623
1629
|
this.restartAnimation();
|
|
1624
1630
|
}
|
|
1625
1631
|
}
|
|
1626
1632
|
ngAfterViewInit() {
|
|
1627
|
-
this.
|
|
1633
|
+
this.changesSub = this.sparkleRefs.changes.subscribe(() => this.restartAnimation());
|
|
1628
1634
|
this.restartAnimation();
|
|
1629
1635
|
}
|
|
1630
1636
|
ngOnDestroy() {
|
|
1631
|
-
this.
|
|
1632
|
-
this.
|
|
1637
|
+
this.animations.forEach(a => a.pause());
|
|
1638
|
+
this.changesSub?.unsubscribe();
|
|
1633
1639
|
}
|
|
1634
1640
|
buildSparkles() {
|
|
1635
1641
|
const count = Math.max(0, Math.floor(this.count));
|
|
1636
1642
|
const minSize = Math.min(this.minSize, this.maxSize);
|
|
1637
1643
|
const maxSize = Math.max(this.minSize, this.maxSize);
|
|
1638
|
-
const
|
|
1639
|
-
const
|
|
1644
|
+
const minDur = Math.min(this.minDuration, this.maxDuration);
|
|
1645
|
+
const maxDur = Math.max(this.minDuration, this.maxDuration);
|
|
1640
1646
|
this.sparkles = Array.from({ length: count }, () => ({
|
|
1641
|
-
x: this.
|
|
1642
|
-
y: this.
|
|
1643
|
-
size: this.
|
|
1644
|
-
delay: this.
|
|
1645
|
-
duration: this.
|
|
1646
|
-
driftX: this.
|
|
1647
|
-
driftY: this.
|
|
1647
|
+
x: this.rand(0, 100),
|
|
1648
|
+
y: this.rand(0, 100),
|
|
1649
|
+
size: this.rand(minSize, maxSize),
|
|
1650
|
+
delay: this.rand(0, 900),
|
|
1651
|
+
duration: this.rand(minDur, maxDur),
|
|
1652
|
+
driftX: this.rand(-this.drift, this.drift),
|
|
1653
|
+
driftY: this.rand(-this.drift, this.drift),
|
|
1648
1654
|
}));
|
|
1649
1655
|
}
|
|
1650
1656
|
restartAnimation() {
|
|
1651
|
-
if (!this.sparkleRefs
|
|
1657
|
+
if (!this.sparkleRefs?.length)
|
|
1652
1658
|
return;
|
|
1653
|
-
|
|
1654
|
-
this.
|
|
1655
|
-
this.
|
|
1656
|
-
const targets = this.sparkleRefs.toArray();
|
|
1657
|
-
targets.forEach((ref, i) => {
|
|
1659
|
+
this.animations.forEach(a => a.pause());
|
|
1660
|
+
this.animations = [];
|
|
1661
|
+
this.sparkleRefs.forEach((ref, i) => {
|
|
1658
1662
|
const sparkle = this.sparkles[i];
|
|
1659
|
-
if (!sparkle)
|
|
1663
|
+
if (!sparkle)
|
|
1660
1664
|
return;
|
|
1661
|
-
|
|
1662
|
-
const animation = animate(ref.nativeElement, {
|
|
1665
|
+
const anim = animate(ref.nativeElement, {
|
|
1663
1666
|
translateX: [-sparkle.driftX, sparkle.driftX],
|
|
1664
1667
|
translateY: [-sparkle.driftY, sparkle.driftY],
|
|
1665
1668
|
scale: [0.7, 1.2],
|
|
1666
1669
|
opacity: [0.35, 1],
|
|
1667
|
-
duration: sparkle.duration
|
|
1670
|
+
duration: sparkle.duration,
|
|
1668
1671
|
alternate: true,
|
|
1669
1672
|
loop: this.loop,
|
|
1670
|
-
|
|
1673
|
+
easing: 'easeInOutSine',
|
|
1671
1674
|
});
|
|
1672
1675
|
if (sparkle.delay > 0) {
|
|
1673
|
-
|
|
1676
|
+
anim.seek(sparkle.delay % sparkle.duration);
|
|
1674
1677
|
}
|
|
1675
|
-
this.
|
|
1678
|
+
this.animations.push(anim);
|
|
1676
1679
|
});
|
|
1677
1680
|
}
|
|
1678
|
-
|
|
1679
|
-
if (min === max) {
|
|
1680
|
-
return min;
|
|
1681
|
-
}
|
|
1681
|
+
rand(min, max) {
|
|
1682
1682
|
return min + Math.random() * (max - min);
|
|
1683
1683
|
}
|
|
1684
|
-
get widthStyle() {
|
|
1685
|
-
return this.formatSize(this.width);
|
|
1686
|
-
}
|
|
1687
|
-
get heightStyle() {
|
|
1688
|
-
return this.formatSize(this.height);
|
|
1689
|
-
}
|
|
1690
1684
|
formatSize(value) {
|
|
1691
|
-
if (
|
|
1692
|
-
return
|
|
1693
|
-
}
|
|
1694
|
-
return value;
|
|
1685
|
+
if (value == null)
|
|
1686
|
+
return '';
|
|
1687
|
+
return typeof value === 'number' ? `${value}px` : value;
|
|
1695
1688
|
}
|
|
1696
1689
|
needsMinSize(value) {
|
|
1697
1690
|
return typeof value === 'string' && value.trim().endsWith('%');
|
|
1698
1691
|
}
|
|
1699
1692
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SparkleFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1700
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1693
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: SparkleFieldComponent, isStandalone: true, selector: "frg-sparkle-field", inputs: { width: "width", height: "height", count: "count", minSize: "minSize", maxSize: "maxSize", drift: "drift", minDuration: "minDuration", maxDuration: "maxDuration", loop: "loop", color: "color" }, host: { properties: { "style.width": "this.hostWidth", "style.height": "this.hostHeight", "style.minWidth": "this.hostMinWidth", "style.minHeight": "this.hostMinHeight", "style.color": "this.hostColor" } }, viewQueries: [{ propertyName: "sparkleRefs", predicate: ["sparkle"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"frg-sparkle-layer\">\r\n @for (sparkle of sparkles; track $index) {\r\n <span\r\n #sparkle\r\n class=\"frg-sparkle\"\r\n [style.left.%]=\"sparkle.x\"\r\n [style.top.%]=\"sparkle.y\"\r\n [style.width.px]=\"sparkle.size\"\r\n [style.height.px]=\"sparkle.size\">\r\n </span>\r\n }\r\n</div>\r\n", styles: [":host{display:block;position:relative;overflow:hidden;pointer-events:none}.frg-sparkle-layer{position:absolute;inset:0}.frg-sparkle{position:absolute;border-radius:50%;background:radial-gradient(circle,currentColor 0%,rgba(255,255,255,.85) 35%,rgba(255,255,255,0) 70%);opacity:.6;will-change:transform,opacity;transform:translateZ(0)}\n"] }); }
|
|
1701
1694
|
}
|
|
1702
1695
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SparkleFieldComponent, decorators: [{
|
|
1703
1696
|
type: Component,
|
|
1704
|
-
args: [{ selector: 'frg-sparkle-field',
|
|
1697
|
+
args: [{ selector: 'frg-sparkle-field', standalone: true, template: "<div class=\"frg-sparkle-layer\">\r\n @for (sparkle of sparkles; track $index) {\r\n <span\r\n #sparkle\r\n class=\"frg-sparkle\"\r\n [style.left.%]=\"sparkle.x\"\r\n [style.top.%]=\"sparkle.y\"\r\n [style.width.px]=\"sparkle.size\"\r\n [style.height.px]=\"sparkle.size\">\r\n </span>\r\n }\r\n</div>\r\n", styles: [":host{display:block;position:relative;overflow:hidden;pointer-events:none}.frg-sparkle-layer{position:absolute;inset:0}.frg-sparkle{position:absolute;border-radius:50%;background:radial-gradient(circle,currentColor 0%,rgba(255,255,255,.85) 35%,rgba(255,255,255,0) 70%);opacity:.6;will-change:transform,opacity;transform:translateZ(0)}\n"] }]
|
|
1705
1698
|
}], propDecorators: { width: [{
|
|
1706
1699
|
type: Input
|
|
1707
1700
|
}], height: [{
|
|
@@ -1737,6 +1730,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
|
|
|
1737
1730
|
}], hostMinHeight: [{
|
|
1738
1731
|
type: HostBinding,
|
|
1739
1732
|
args: ['style.minHeight']
|
|
1733
|
+
}], hostColor: [{
|
|
1734
|
+
type: HostBinding,
|
|
1735
|
+
args: ['style.color']
|
|
1740
1736
|
}] } });
|
|
1741
1737
|
|
|
1742
1738
|
class SmallPaginationComponent {
|
package/index.d.ts
CHANGED
|
@@ -792,9 +792,10 @@ declare class BlobMorphComponent extends MorphBase implements AfterViewInit {
|
|
|
792
792
|
protected generateRandomPath(points?: number, radius?: number, variability?: number): string;
|
|
793
793
|
onLoadEvent(): void;
|
|
794
794
|
static ɵfac: i0.ɵɵFactoryDeclaration<BlobMorphComponent, never>;
|
|
795
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<BlobMorphComponent, "
|
|
795
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<BlobMorphComponent, "frg-blob-morph", never, { "imageUrl": { "alias": "imageUrl"; "required": false; }; "fillColor": { "alias": "fillColor"; "required": false; }; "pathStart": { "alias": "pathStart"; "required": false; }; "pathEnd": { "alias": "pathEnd"; "required": false; }; "duration": { "alias": "duration"; "required": false; }; }, { "loadEvent": "loadEvent"; }, never, never, true, never>;
|
|
796
796
|
}
|
|
797
797
|
|
|
798
|
+
type SizeValue = number | string | null;
|
|
798
799
|
interface Sparkle {
|
|
799
800
|
x: number;
|
|
800
801
|
y: number;
|
|
@@ -804,9 +805,10 @@ interface Sparkle {
|
|
|
804
805
|
driftX: number;
|
|
805
806
|
driftY: number;
|
|
806
807
|
}
|
|
808
|
+
|
|
807
809
|
declare class SparkleFieldComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy {
|
|
808
|
-
width:
|
|
809
|
-
height:
|
|
810
|
+
width: SizeValue;
|
|
811
|
+
height: SizeValue;
|
|
810
812
|
count: number;
|
|
811
813
|
minSize: number;
|
|
812
814
|
maxSize: number;
|
|
@@ -817,23 +819,22 @@ declare class SparkleFieldComponent implements OnInit, OnChanges, AfterViewInit,
|
|
|
817
819
|
color: string | null;
|
|
818
820
|
sparkles: Sparkle[];
|
|
819
821
|
sparkleRefs: QueryList<ElementRef<HTMLSpanElement>>;
|
|
820
|
-
private
|
|
821
|
-
private
|
|
822
|
+
private animations;
|
|
823
|
+
private changesSub;
|
|
822
824
|
private readonly fallbackWidth;
|
|
823
825
|
private readonly fallbackHeight;
|
|
824
|
-
get hostWidth(): string;
|
|
825
|
-
get hostHeight(): string;
|
|
826
|
+
get hostWidth(): string | null;
|
|
827
|
+
get hostHeight(): string | null;
|
|
826
828
|
get hostMinWidth(): string | null;
|
|
827
829
|
get hostMinHeight(): string | null;
|
|
830
|
+
get hostColor(): string | null;
|
|
828
831
|
ngOnInit(): void;
|
|
829
832
|
ngOnChanges(changes: SimpleChanges): void;
|
|
830
833
|
ngAfterViewInit(): void;
|
|
831
834
|
ngOnDestroy(): void;
|
|
832
835
|
private buildSparkles;
|
|
833
836
|
private restartAnimation;
|
|
834
|
-
private
|
|
835
|
-
get widthStyle(): string;
|
|
836
|
-
get heightStyle(): string;
|
|
837
|
+
private rand;
|
|
837
838
|
private formatSize;
|
|
838
839
|
private needsMinSize;
|
|
839
840
|
static ɵfac: i0.ɵɵFactoryDeclaration<SparkleFieldComponent, never>;
|