@ziadshalaby/ngx-zs-component 2.0.1 → 2.0.2
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.
|
@@ -550,10 +550,41 @@ const ColorMapping = new Map([
|
|
|
550
550
|
['rose', { text: 'zs:text-rose-600 zs:dark:text-rose-400', bg: 'zs:bg-rose-600 zs:dark:bg-rose-400', border: 'zs:border-rose-600 zs:dark:border-rose-400' }],
|
|
551
551
|
]);
|
|
552
552
|
|
|
553
|
+
class VisibilityObserverService {
|
|
554
|
+
observer;
|
|
555
|
+
constructor() {
|
|
556
|
+
this.observer = new IntersectionObserver((entries) => {
|
|
557
|
+
for (const entry of entries) {
|
|
558
|
+
const target = entry.target;
|
|
559
|
+
if (entry.isIntersecting) {
|
|
560
|
+
// trigger the signal saved on target
|
|
561
|
+
target.__visibleSignal?.set(true);
|
|
562
|
+
// stop observing this element
|
|
563
|
+
this.observer.unobserve(entry.target);
|
|
564
|
+
}
|
|
565
|
+
}
|
|
566
|
+
}, { threshold: 0.2 });
|
|
567
|
+
}
|
|
568
|
+
observe(el, visibleSignal) {
|
|
569
|
+
// attach signal reference to element
|
|
570
|
+
el.__visibleSignal = visibleSignal;
|
|
571
|
+
this.observer.observe(el);
|
|
572
|
+
}
|
|
573
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: VisibilityObserverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
574
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: VisibilityObserverService, providedIn: 'root' });
|
|
575
|
+
}
|
|
576
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: VisibilityObserverService, decorators: [{
|
|
577
|
+
type: Injectable,
|
|
578
|
+
args: [{
|
|
579
|
+
providedIn: 'root',
|
|
580
|
+
}]
|
|
581
|
+
}], ctorParameters: () => [] });
|
|
582
|
+
|
|
553
583
|
// ==============================================================================
|
|
554
584
|
// Component
|
|
555
585
|
// ==============================================================================
|
|
556
586
|
class Card {
|
|
587
|
+
visibility = inject(VisibilityObserverService);
|
|
557
588
|
// ==========================================================================
|
|
558
589
|
// Inputs
|
|
559
590
|
// ==========================================================================
|
|
@@ -568,18 +599,10 @@ class Card {
|
|
|
568
599
|
cardRef = viewChild('cardRef', ...(ngDevMode ? [{ debugName: "cardRef" }] : []));
|
|
569
600
|
isVisible = signal(false, ...(ngDevMode ? [{ debugName: "isVisible" }] : []));
|
|
570
601
|
constructor() {
|
|
571
|
-
const observer = new IntersectionObserver((entries) => {
|
|
572
|
-
for (const entry of entries) {
|
|
573
|
-
if (entry.isIntersecting) {
|
|
574
|
-
this.isVisible.set(true);
|
|
575
|
-
observer.unobserve(entry.target);
|
|
576
|
-
}
|
|
577
|
-
}
|
|
578
|
-
}, { threshold: 0.2 });
|
|
579
602
|
queueMicrotask(() => {
|
|
580
603
|
const el = this.cardRef()?.nativeElement;
|
|
581
604
|
if (el)
|
|
582
|
-
|
|
605
|
+
this.visibility.observe(el, this.isVisible);
|
|
583
606
|
});
|
|
584
607
|
}
|
|
585
608
|
// ==========================================================================
|
|
@@ -1291,20 +1314,38 @@ class Page404 {
|
|
|
1291
1314
|
title = input('Page Not Found', ...(ngDevMode ? [{ debugName: "title" }] : []));
|
|
1292
1315
|
message = input('Hmm… this page doesn’t seem to exist. Try checking the URL or going back home.', ...(ngDevMode ? [{ debugName: "message" }] : []));
|
|
1293
1316
|
icon = input('fa-ghost', ...(ngDevMode ? [{ debugName: "icon" }] : []));
|
|
1317
|
+
pageStyle = input('normal', ...(ngDevMode ? [{ debugName: "pageStyle" }] : []));
|
|
1294
1318
|
showButton = input(true, ...(ngDevMode ? [{ debugName: "showButton" }] : []));
|
|
1295
1319
|
buttonText = input('Go Home', ...(ngDevMode ? [{ debugName: "buttonText" }] : []));
|
|
1296
1320
|
routerLink = input('/', ...(ngDevMode ? [{ debugName: "routerLink" }] : []));
|
|
1297
1321
|
// ========================================================================
|
|
1298
1322
|
// Outputs
|
|
1299
1323
|
// ========================================================================
|
|
1324
|
+
style = computed(() => {
|
|
1325
|
+
if (this.pageStyle() === 'normal')
|
|
1326
|
+
return {
|
|
1327
|
+
btnBG: 'zs:bg-sky-500 zs:dark:bg-sky-600',
|
|
1328
|
+
btnBgHover: 'zs:hover:bg-sky-600 zs:dark:hover:bg-sky-500',
|
|
1329
|
+
iconText: 'zs:text-sky-600 zs:dark:text-sky-500'
|
|
1330
|
+
};
|
|
1331
|
+
const pallete = FormPaletteMap.get(this.pageStyle() ?? 'violet');
|
|
1332
|
+
return {
|
|
1333
|
+
btnBG: pallete.btnBG,
|
|
1334
|
+
btnBgHover: pallete.btnBGHover,
|
|
1335
|
+
iconText: pallete.checkBoxText
|
|
1336
|
+
};
|
|
1337
|
+
}, ...(ngDevMode ? [{ debugName: "style" }] : []));
|
|
1338
|
+
// ========================================================================
|
|
1339
|
+
// Outputs
|
|
1340
|
+
// ========================================================================
|
|
1300
1341
|
onAction = output();
|
|
1301
1342
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Page404, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1302
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Page404, isStandalone: true, selector: "ZS-page404", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showButton: { classPropertyName: "showButton", publicName: "showButton", isSignal: true, isRequired: false, transformFunction: null }, buttonText: { classPropertyName: "buttonText", publicName: "buttonText", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onAction: "onAction" }, ngImport: i0, template: "<!-- ========================= Page 404 Container ========================= -->\n<div class=\"zs:flex zs:flex-col zs:items-center zs:justify-center zs:min-h-[90vh]\n zs:text-center zs:
|
|
1343
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: Page404, isStandalone: true, selector: "ZS-page404", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, pageStyle: { classPropertyName: "pageStyle", publicName: "pageStyle", isSignal: true, isRequired: false, transformFunction: null }, showButton: { classPropertyName: "showButton", publicName: "showButton", isSignal: true, isRequired: false, transformFunction: null }, buttonText: { classPropertyName: "buttonText", publicName: "buttonText", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onAction: "onAction" }, ngImport: i0, template: "<!-- ========================= Page 404 Container ========================= -->\n<div class=\"zs:flex zs:flex-col zs:items-center zs:justify-center zs:min-h-[90vh]\n zs:text-center zs:transition-colors zs:duration-500 zs:animate-fadeIn\"\n [ngClass]=\"[style().iconText]\"\n >\n\n <!-- ========================= Icon ========================= --> \n <div class=\"zs:text-[136px] zs:mb-8 animate-float zs:opacity-90 zs:leading-none\">\n <i class=\"fa-solid\" [class]=\"icon()\"></i>\n </div>\n\n <!-- ========================= Title ========================= -->\n <h1 class=\"zs:text-6xl zs:font-black zs:tracking-widest zs:mb-2 \n zs:text-rose-600 zs:dark:text-rose-500 zs:select-none\n zs:drop-shadow-[0_0_8px_rgba(239,68,68,0.5)]\">\n 404\n </h1>\n\n\n <!-- ========================= Message ========================= -->\n <h2 class=\"zs:text-2xl zs:text-rose-600/80 zs:dark:text-rose-800/80 zs:font-semibold zs:mb-4\">\n {{ title() }}\n </h2>\n <p class=\"zs:text-base zs:max-w-md zs:text-gray-600 zs:dark:text-gray-400 zs:mb-8\">\n {{ message() }}\n </p>\n\n <!-- ========================= Button ========================= -->\n @if (showButton()) {\n <a\n [routerLink]=\"routerLink()\"\n (click)=\"onAction.emit()\"\n class=\"zs:px-6 zs:py-2 zs:rounded-full\n zs:text-white zs:font-medium zs:shadow-md\n zs:hover:shadow-lg zs:flex zs:items-center \n zs:justify-center zs:transition-all zs:duration-300 zs:ease-out \n zs:gap-1.5\"\n [ngClass]=\"[style().btnBG, style().btnBgHover]\"\n >\n <i class=\"fa-solid fa-house\"></i>\n {{ buttonText() }}\n </a>\n }\n</div>\n", styles: ["@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}.animate-float{animation:float 3s ease-in-out infinite}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
1303
1344
|
}
|
|
1304
1345
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Page404, decorators: [{
|
|
1305
1346
|
type: Component,
|
|
1306
|
-
args: [{ selector: 'ZS-page404', imports: [RouterModule], template: "<!-- ========================= Page 404 Container ========================= -->\n<div class=\"zs:flex zs:flex-col zs:items-center zs:justify-center zs:min-h-[90vh]\n zs:text-center zs:
|
|
1307
|
-
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButton", required: false }] }], buttonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonText", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], onAction: [{ type: i0.Output, args: ["onAction"] }] } });
|
|
1347
|
+
args: [{ selector: 'ZS-page404', imports: [RouterModule, CommonModule], template: "<!-- ========================= Page 404 Container ========================= -->\n<div class=\"zs:flex zs:flex-col zs:items-center zs:justify-center zs:min-h-[90vh]\n zs:text-center zs:transition-colors zs:duration-500 zs:animate-fadeIn\"\n [ngClass]=\"[style().iconText]\"\n >\n\n <!-- ========================= Icon ========================= --> \n <div class=\"zs:text-[136px] zs:mb-8 animate-float zs:opacity-90 zs:leading-none\">\n <i class=\"fa-solid\" [class]=\"icon()\"></i>\n </div>\n\n <!-- ========================= Title ========================= -->\n <h1 class=\"zs:text-6xl zs:font-black zs:tracking-widest zs:mb-2 \n zs:text-rose-600 zs:dark:text-rose-500 zs:select-none\n zs:drop-shadow-[0_0_8px_rgba(239,68,68,0.5)]\">\n 404\n </h1>\n\n\n <!-- ========================= Message ========================= -->\n <h2 class=\"zs:text-2xl zs:text-rose-600/80 zs:dark:text-rose-800/80 zs:font-semibold zs:mb-4\">\n {{ title() }}\n </h2>\n <p class=\"zs:text-base zs:max-w-md zs:text-gray-600 zs:dark:text-gray-400 zs:mb-8\">\n {{ message() }}\n </p>\n\n <!-- ========================= Button ========================= -->\n @if (showButton()) {\n <a\n [routerLink]=\"routerLink()\"\n (click)=\"onAction.emit()\"\n class=\"zs:px-6 zs:py-2 zs:rounded-full\n zs:text-white zs:font-medium zs:shadow-md\n zs:hover:shadow-lg zs:flex zs:items-center \n zs:justify-center zs:transition-all zs:duration-300 zs:ease-out \n zs:gap-1.5\"\n [ngClass]=\"[style().btnBG, style().btnBgHover]\"\n >\n <i class=\"fa-solid fa-house\"></i>\n {{ buttonText() }}\n </a>\n }\n</div>\n", styles: ["@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}.animate-float{animation:float 3s ease-in-out infinite}\n"] }]
|
|
1348
|
+
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], pageStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageStyle", required: false }] }], showButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButton", required: false }] }], buttonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonText", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], onAction: [{ type: i0.Output, args: ["onAction"] }] } });
|
|
1308
1349
|
|
|
1309
1350
|
// ========================================================================
|
|
1310
1351
|
// Imports
|