@ziadshalaby/ngx-zs-component 2.0.2 → 2.0.4
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.
|
@@ -552,32 +552,38 @@ const ColorMapping = new Map([
|
|
|
552
552
|
|
|
553
553
|
class VisibilityObserverService {
|
|
554
554
|
observer;
|
|
555
|
+
callbacks = new WeakMap();
|
|
555
556
|
constructor() {
|
|
556
557
|
this.observer = new IntersectionObserver((entries) => {
|
|
557
558
|
for (const entry of entries) {
|
|
558
|
-
const target = entry.target;
|
|
559
559
|
if (entry.isIntersecting) {
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
560
|
+
const callback = this.callbacks.get(entry.target);
|
|
561
|
+
if (callback) {
|
|
562
|
+
callback();
|
|
563
|
+
this.callbacks.delete(entry.target);
|
|
564
|
+
this.observer.unobserve(entry.target);
|
|
565
|
+
}
|
|
564
566
|
}
|
|
565
567
|
}
|
|
566
|
-
}, {
|
|
568
|
+
}, {
|
|
569
|
+
threshold: 0.2,
|
|
570
|
+
rootMargin: '0px 0px 0px 0px'
|
|
571
|
+
});
|
|
567
572
|
}
|
|
568
|
-
observe(el,
|
|
569
|
-
|
|
570
|
-
el.__visibleSignal = visibleSignal;
|
|
573
|
+
observe(el, callback) {
|
|
574
|
+
this.callbacks.set(el, callback);
|
|
571
575
|
this.observer.observe(el);
|
|
572
576
|
}
|
|
577
|
+
unobserve(el) {
|
|
578
|
+
this.callbacks.delete(el);
|
|
579
|
+
this.observer.unobserve(el);
|
|
580
|
+
}
|
|
573
581
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: VisibilityObserverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
574
582
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: VisibilityObserverService, providedIn: 'root' });
|
|
575
583
|
}
|
|
576
584
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: VisibilityObserverService, decorators: [{
|
|
577
585
|
type: Injectable,
|
|
578
|
-
args: [{
|
|
579
|
-
providedIn: 'root',
|
|
580
|
-
}]
|
|
586
|
+
args: [{ providedIn: 'root' }]
|
|
581
587
|
}], ctorParameters: () => [] });
|
|
582
588
|
|
|
583
589
|
// ==============================================================================
|
|
@@ -601,19 +607,28 @@ class Card {
|
|
|
601
607
|
constructor() {
|
|
602
608
|
queueMicrotask(() => {
|
|
603
609
|
const el = this.cardRef()?.nativeElement;
|
|
604
|
-
if (el)
|
|
605
|
-
|
|
610
|
+
if (!el)
|
|
611
|
+
return;
|
|
612
|
+
this.visibility.observe(el, () => {
|
|
613
|
+
this.isVisible.set(true);
|
|
614
|
+
});
|
|
606
615
|
});
|
|
607
616
|
}
|
|
608
617
|
// ==========================================================================
|
|
609
618
|
// Computed Classes
|
|
610
619
|
// ==========================================================================
|
|
620
|
+
visibleClasses = computed(() => {
|
|
621
|
+
const visible = this.isVisible();
|
|
622
|
+
return visible ? 'animate-visible' : '';
|
|
623
|
+
}, ...(ngDevMode ? [{ debugName: "visibleClasses" }] : []));
|
|
624
|
+
animationClasses = computed(() => {
|
|
625
|
+
const animation = this.animation();
|
|
626
|
+
return animation !== 'none' ? `animate-from-${animation}` : '';
|
|
627
|
+
}, ...(ngDevMode ? [{ debugName: "animationClasses" }] : []));
|
|
611
628
|
classList = computed(() => {
|
|
612
629
|
const style = this.cardStyle();
|
|
613
630
|
const variant = this.variant();
|
|
614
631
|
const clickable = this.clickable();
|
|
615
|
-
const animation = this.animation();
|
|
616
|
-
const visible = this.isVisible();
|
|
617
632
|
const bodyClass = this.bodyClass();
|
|
618
633
|
const palette = FormPaletteMap.get(style) ?? {
|
|
619
634
|
border: '',
|
|
@@ -642,11 +657,6 @@ class Card {
|
|
|
642
657
|
? `zs:cursor-pointer zs:hover:scale-[1.02] zs:active:scale-[0.97] zs:focus-visible:ring-2 ${palette.ring}`
|
|
643
658
|
: '';
|
|
644
659
|
// ---------------------
|
|
645
|
-
// Animation Handling
|
|
646
|
-
// ---------------------
|
|
647
|
-
const animationClass = animation !== 'none' ? `animate-from-${animation}` : '';
|
|
648
|
-
const visibleClass = visible ? 'animate-visible' : '';
|
|
649
|
-
// ---------------------
|
|
650
660
|
// Combine Classes
|
|
651
661
|
// ---------------------
|
|
652
662
|
return [
|
|
@@ -656,18 +666,16 @@ class Card {
|
|
|
656
666
|
bodyClass,
|
|
657
667
|
shadowClasses,
|
|
658
668
|
clickEffects,
|
|
659
|
-
animationClass,
|
|
660
|
-
visibleClass
|
|
661
669
|
]
|
|
662
670
|
.filter(Boolean)
|
|
663
671
|
.join(' ');
|
|
664
672
|
}, ...(ngDevMode ? [{ debugName: "classList" }] : []));
|
|
665
673
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Card, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
666
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.9", type: Card, isStandalone: true, selector: "ZS-card", inputs: { cardStyle: { classPropertyName: "cardStyle", publicName: "cardStyle", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, bodyClass: { classPropertyName: "bodyClass", publicName: "bodyClass", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "cardRef", first: true, predicate: ["cardRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #cardRef [
|
|
674
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.9", type: Card, isStandalone: true, selector: "ZS-card", inputs: { cardStyle: { classPropertyName: "cardStyle", publicName: "cardStyle", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, bodyClass: { classPropertyName: "bodyClass", publicName: "bodyClass", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "cardRef", first: true, predicate: ["cardRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #cardRef \n[ngClass]=\"[classList(), animationClasses(), visibleClasses()]\"\nrole=\"group\"\ntabindex=\"0\"\n[attr.aria-label]=\"clickable() ? 'Interactive card' : 'Information card'\"\n[attr.aria-pressed]=\"clickable() ? 'false' : null\"\n>\n <ng-content></ng-content>\n</div>", styles: [":host{display:block}[class*=animate-from-]{opacity:0;transform:translate(0);will-change:opacity,transform}.animate-visible[class*=animate-from-]{animation:fadeInMove .5s ease-out forwards}.animate-from-top{transform:translateY(-30px)}.animate-from-bottom{transform:translateY(30px)}.animate-from-left{transform:translate(-30px)}.animate-from-right{transform:translate(30px)}.animate-from-top-left{transform:translate(-30px,-30px)}.animate-from-top-right{transform:translate(30px,-30px)}.animate-from-bottom-left{transform:translate(-30px,30px)}.animate-from-bottom-right{transform:translate(30px,30px)}@keyframes fadeInMove{to{opacity:1;transform:translate(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
667
675
|
}
|
|
668
676
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Card, decorators: [{
|
|
669
677
|
type: Component,
|
|
670
|
-
args: [{ selector: 'ZS-card', standalone: true, template: "<div #cardRef [
|
|
678
|
+
args: [{ selector: 'ZS-card', standalone: true, imports: [CommonModule], template: "<div #cardRef \n[ngClass]=\"[classList(), animationClasses(), visibleClasses()]\"\nrole=\"group\"\ntabindex=\"0\"\n[attr.aria-label]=\"clickable() ? 'Interactive card' : 'Information card'\"\n[attr.aria-pressed]=\"clickable() ? 'false' : null\"\n>\n <ng-content></ng-content>\n</div>", styles: [":host{display:block}[class*=animate-from-]{opacity:0;transform:translate(0);will-change:opacity,transform}.animate-visible[class*=animate-from-]{animation:fadeInMove .5s ease-out forwards}.animate-from-top{transform:translateY(-30px)}.animate-from-bottom{transform:translateY(30px)}.animate-from-left{transform:translate(-30px)}.animate-from-right{transform:translate(30px)}.animate-from-top-left{transform:translate(-30px,-30px)}.animate-from-top-right{transform:translate(30px,-30px)}.animate-from-bottom-left{transform:translate(-30px,30px)}.animate-from-bottom-right{transform:translate(30px,30px)}@keyframes fadeInMove{to{opacity:1;transform:translate(0)}}\n"] }]
|
|
671
679
|
}], ctorParameters: () => [], propDecorators: { cardStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardStyle", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], bodyClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "bodyClass", required: false }] }], cardRef: [{ type: i0.ViewChild, args: ['cardRef', { isSignal: true }] }] } });
|
|
672
680
|
|
|
673
681
|
// ==============================================
|