@ziadshalaby/ngx-zs-component 2.0.5 → 2.0.7
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.
|
@@ -617,13 +617,38 @@ class Card {
|
|
|
617
617
|
// ==========================================================================
|
|
618
618
|
// Computed Classes
|
|
619
619
|
// ==========================================================================
|
|
620
|
-
visibleClasses = computed(() => {
|
|
621
|
-
const visible = this.isVisible();
|
|
622
|
-
return visible ? 'animate-visible' : '';
|
|
623
|
-
}, ...(ngDevMode ? [{ debugName: "visibleClasses" }] : []));
|
|
624
620
|
animationClasses = computed(() => {
|
|
625
621
|
const animation = this.animation();
|
|
626
|
-
|
|
622
|
+
const visible = this.isVisible();
|
|
623
|
+
const animateMap = {
|
|
624
|
+
'top': 'zs:-translate-y-8',
|
|
625
|
+
'bottom': 'zs:translate-y-8',
|
|
626
|
+
'left': 'zs:-translate-x-8',
|
|
627
|
+
'right': 'zs:translate-x-8',
|
|
628
|
+
'top-left': 'zs:-translate-y-8 zs:-translate-x-8',
|
|
629
|
+
'top-right': 'zs:-translate-y-8 zs:translate-x-8',
|
|
630
|
+
'bottom-left': 'zs:translate-y-8 zs:-translate-x-8',
|
|
631
|
+
'bottom-right': 'zs:translate-y-8 zs:translate-x-8',
|
|
632
|
+
'none': ''
|
|
633
|
+
};
|
|
634
|
+
if (visible) {
|
|
635
|
+
return `zs:opacity-100
|
|
636
|
+
zs:transform-gpu
|
|
637
|
+
zs:will-change-transform
|
|
638
|
+
zs:translate-x-0
|
|
639
|
+
zs:translate-y-0
|
|
640
|
+
zs:transition zs:duration-500`;
|
|
641
|
+
}
|
|
642
|
+
// Hidden state
|
|
643
|
+
if (animation === 'none') {
|
|
644
|
+
return 'zs:opacity-100';
|
|
645
|
+
}
|
|
646
|
+
return [
|
|
647
|
+
'zs:opacity-0',
|
|
648
|
+
animateMap[animation],
|
|
649
|
+
'zs:transform-gpu',
|
|
650
|
+
'zs:will-change-transform'
|
|
651
|
+
].filter(Boolean).join(' ');
|
|
627
652
|
}, ...(ngDevMode ? [{ debugName: "animationClasses" }] : []));
|
|
628
653
|
classList = computed(() => {
|
|
629
654
|
const style = this.cardStyle();
|
|
@@ -671,11 +696,11 @@ class Card {
|
|
|
671
696
|
.join(' ');
|
|
672
697
|
}, ...(ngDevMode ? [{ debugName: "classList" }] : []));
|
|
673
698
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Card, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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()
|
|
699
|
+
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()]\"\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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
675
700
|
}
|
|
676
701
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Card, decorators: [{
|
|
677
702
|
type: Component,
|
|
678
|
-
args: [{ selector: 'ZS-card', standalone: true, imports: [CommonModule], template: "<div #cardRef \n[ngClass]=\"[classList(), animationClasses()
|
|
703
|
+
args: [{ selector: 'ZS-card', standalone: true, imports: [CommonModule], template: "<div #cardRef \n[ngClass]=\"[classList(), animationClasses()]\"\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}\n"] }]
|
|
679
704
|
}], 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 }] }] } });
|
|
680
705
|
|
|
681
706
|
// ==============================================
|