106 lines
5.6 KiB
JavaScript
106 lines
5.6 KiB
JavaScript
import {
|
|
CommonModule,
|
|
NzIconDirective,
|
|
NzIconModule,
|
|
Router
|
|
} from "./chunk-2TRRHRR7.js";
|
|
import {
|
|
Component,
|
|
computed,
|
|
inject,
|
|
setClassMetadata,
|
|
ɵsetClassDebugInfo,
|
|
ɵɵadvance,
|
|
ɵɵclassProp,
|
|
ɵɵdefineComponent,
|
|
ɵɵelement,
|
|
ɵɵelementEnd,
|
|
ɵɵelementStart,
|
|
ɵɵgetCurrentView,
|
|
ɵɵlistener,
|
|
ɵɵnextContext,
|
|
ɵɵproperty,
|
|
ɵɵrepeater,
|
|
ɵɵrepeaterCreate,
|
|
ɵɵresetView,
|
|
ɵɵrestoreView,
|
|
ɵɵtext,
|
|
ɵɵtextInterpolate
|
|
} from "./chunk-WI7WFVZR.js";
|
|
|
|
// src/app/components/bottom-nav/bottom-nav.ts
|
|
var _forTrack0 = ($index, $item) => $item.id;
|
|
function BottomNav_For_3_Template(rf, ctx) {
|
|
if (rf & 1) {
|
|
const _r1 = \u0275\u0275getCurrentView();
|
|
\u0275\u0275elementStart(0, "button", 3);
|
|
\u0275\u0275listener("click", function BottomNav_For_3_Template_button_click_0_listener() {
|
|
const tab_r2 = \u0275\u0275restoreView(_r1).$implicit;
|
|
const ctx_r2 = \u0275\u0275nextContext();
|
|
return \u0275\u0275resetView(ctx_r2.navigate(tab_r2.id));
|
|
});
|
|
\u0275\u0275element(1, "span", 4);
|
|
\u0275\u0275elementStart(2, "span", 5);
|
|
\u0275\u0275text(3);
|
|
\u0275\u0275elementEnd()();
|
|
}
|
|
if (rf & 2) {
|
|
const tab_r2 = ctx.$implicit;
|
|
const ctx_r2 = \u0275\u0275nextContext();
|
|
\u0275\u0275classProp("active", ctx_r2.currentTab() === tab_r2.id);
|
|
\u0275\u0275advance();
|
|
\u0275\u0275property("nzType", tab_r2.icon);
|
|
\u0275\u0275advance(2);
|
|
\u0275\u0275textInterpolate(tab_r2.label);
|
|
}
|
|
}
|
|
var BottomNav = class _BottomNav {
|
|
router = inject(Router);
|
|
currentTab = computed(() => {
|
|
const url = this.router.url;
|
|
if (url.startsWith("/catalog"))
|
|
return "catalog";
|
|
if (url.startsWith("/my-courses"))
|
|
return "my-courses";
|
|
if (url.startsWith("/create"))
|
|
return "create";
|
|
return "";
|
|
}, ...ngDevMode ? [{ debugName: "currentTab" }] : []);
|
|
navigate(tab) {
|
|
this.router.navigate([`/${tab}`]);
|
|
}
|
|
tabs = [
|
|
{ id: "catalog", label: "CATALOGUE", icon: "appstore" },
|
|
{ id: "my-courses", label: "APPRENDRE", icon: "read" },
|
|
{ id: "create", label: "CR\xC9ER", icon: "plus" }
|
|
];
|
|
static \u0275fac = function BottomNav_Factory(__ngFactoryType__) {
|
|
return new (__ngFactoryType__ || _BottomNav)();
|
|
};
|
|
static \u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({ type: _BottomNav, selectors: [["app-bottom-nav"]], decls: 4, vars: 0, consts: [[1, "bottom-nav"], [1, "bottom-nav-inner"], [1, "nav-tab", 3, "active"], [1, "nav-tab", 3, "click"], ["nz-icon", "", "nzTheme", "outline", 1, "nav-icon", 3, "nzType"], [1, "nav-label"]], template: function BottomNav_Template(rf, ctx) {
|
|
if (rf & 1) {
|
|
\u0275\u0275elementStart(0, "nav", 0)(1, "div", 1);
|
|
\u0275\u0275repeaterCreate(2, BottomNav_For_3_Template, 4, 4, "button", 2, _forTrack0);
|
|
\u0275\u0275elementEnd()();
|
|
}
|
|
if (rf & 2) {
|
|
\u0275\u0275advance(2);
|
|
\u0275\u0275repeater(ctx.tabs);
|
|
}
|
|
}, dependencies: [NzIconModule, NzIconDirective, CommonModule], styles: ["\n\n.bottom-nav[_ngcontent-%COMP%] {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 100;\n background-color: var(--card);\n border-top: 1px solid var(--border);\n padding-bottom: env(safe-area-inset-bottom, 0);\n}\n.bottom-nav-inner[_ngcontent-%COMP%] {\n display: flex;\n max-width: 480px;\n margin: 0 auto;\n}\n.nav-tab[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 4px;\n padding: 10px 0 12px;\n background: none;\n border: none;\n cursor: pointer;\n color: var(--text-muted);\n transition: color 0.2s;\n}\n.nav-tab.active[_ngcontent-%COMP%] {\n color: var(--primary);\n}\n.nav-icon[_ngcontent-%COMP%] {\n font-size: 20px;\n}\n.nav-label[_ngcontent-%COMP%] {\n font-size: 10px;\n font-weight: 600;\n letter-spacing: 0.05em;\n}\n/*# sourceMappingURL=bottom-nav.css.map */"] });
|
|
};
|
|
(() => {
|
|
(typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(BottomNav, [{
|
|
type: Component,
|
|
args: [{ selector: "app-bottom-nav", imports: [NzIconModule, CommonModule], template: '<nav class="bottom-nav">\n <div class="bottom-nav-inner">\n @for (tab of tabs; track tab.id) {\n <button\n class="nav-tab"\n [class.active]="currentTab() === tab.id"\n (click)="navigate(tab.id)"\n >\n <span nz-icon [nzType]="tab.icon" nzTheme="outline" class="nav-icon"></span>\n <span class="nav-label">{{ tab.label }}</span>\n </button>\n }\n </div>\n</nav>\n', styles: ["/* src/app/components/bottom-nav/bottom-nav.css */\n.bottom-nav {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 100;\n background-color: var(--card);\n border-top: 1px solid var(--border);\n padding-bottom: env(safe-area-inset-bottom, 0);\n}\n.bottom-nav-inner {\n display: flex;\n max-width: 480px;\n margin: 0 auto;\n}\n.nav-tab {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 4px;\n padding: 10px 0 12px;\n background: none;\n border: none;\n cursor: pointer;\n color: var(--text-muted);\n transition: color 0.2s;\n}\n.nav-tab.active {\n color: var(--primary);\n}\n.nav-icon {\n font-size: 20px;\n}\n.nav-label {\n font-size: 10px;\n font-weight: 600;\n letter-spacing: 0.05em;\n}\n/*# sourceMappingURL=bottom-nav.css.map */\n"] }]
|
|
}], null, null);
|
|
})();
|
|
(() => {
|
|
(typeof ngDevMode === "undefined" || ngDevMode) && \u0275setClassDebugInfo(BottomNav, { className: "BottomNav", filePath: "src/app/components/bottom-nav/bottom-nav.ts", lineNumber: 12 });
|
|
})();
|
|
|
|
export {
|
|
BottomNav
|
|
};
|
|
//# sourceMappingURL=chunk-JDU3HACN.js.map
|