igniteui-cli 15.2.2 → 15.3.0

package/templates/webcomponents/igc-ts/projects/side-nav-mini-auth/files/src/app/app.ts

@@ -0,0 +1,258 @@
+import { html, css, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcIconComponent,
+  IgcNavDrawerComponent,
+  IgcNavDrawerItemComponent,
+  registerIcon,
+} from 'igniteui-webcomponents';
+import { Router } from '@vaadin/router';
+import { routes, type AppRoute } from './app-routing.js';
+import { UserStore } from './authentication/services/userStore.js';
+import './authentication/login-bar/login-bar.js';
+
+defineComponents(
+  IgcIconComponent,
+  IgcNavDrawerComponent,
+  IgcNavDrawerItemComponent,
+);
+
+const materialIcons = [
+  ['home', 'action/svg/production/ic_home_24px.svg'],
+  ['menu', 'navigation/svg/production/ic_menu_24px.svg'],
+  ['apps', 'navigation/svg/production/ic_apps_24px.svg'],
+  ['code', 'action/svg/production/ic_code_24px.svg'],
+  ['build', 'action/svg/production/ic_build_24px.svg'],
+  ['palette', 'image/svg/production/ic_palette_24px.svg'],
+  ['account_circle', 'action/svg/production/ic_account_circle_24px.svg'],
+  ['lock', 'action/svg/production/ic_lock_24px.svg'],
+  ['assignment_ind', 'action/svg/production/ic_assignment_ind_24px.svg'],
+] as const;
+
+materialIcons.forEach(([name, path]) =>
+  registerIcon(name, `https://unpkg.com/material-design-icons@3.0.1/${path}`, 'material')
+);
+
+@customElement('app-root')
+export default class App extends LitElement {
+  @state()
+  private drawerOpen = true;
+
+  @state()
+  private currentPath = window.location.pathname;
+
+  @state()
+  private isLoggedIn = Boolean(UserStore.getUser());
+
+  private mediaQuery?: MediaQueryList;
+
+  static styles = css`
+    :host {
+      display: flex;
+      height: 100%;
+    }
+
+    .app {
+      display: flex;
+      flex-flow: column nowrap;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+
+    .app__navbar {
+      display: flex;
+      align-items: center;
+      flex: 0 0 auto;
+      height: 56px;
+      padding: 0 16px;
+      background: #239ef0;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, .24);
+      box-sizing: border-box;
+      position: relative;
+      z-index: 10;
+    }
+
+    .app__menu-button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 40px;
+      height: 40px;
+      padding: 0;
+      color: #000;
+      border: 0;
+      background: transparent;
+      cursor: pointer;
+    }
+
+    .app__menu-button igc-icon {
+      font-size: 24px;
+    }
+
+    .app__title {
+      margin: 0 0 0 16px;
+      color: #000;
+      font-size: 1.25rem;
+      font-weight: 600;
+      line-height: 1;
+    }
+
+    .app__navbar-spacer {
+      flex: 1 1 auto;
+    }
+
+    .app__body {
+      display: flex;
+      flex: 1 1 auto;
+      min-height: 0;
+    }
+
+    .app__drawer {
+      flex: 0 0 auto;
+      height: 100%;
+      --menu-full-width: 280px;
+    }
+
+    .app--mini .app__drawer {
+      --menu-full-width: 68px;
+    }
+
+    igc-nav-drawer.app__drawer::part(base) {
+      transition: width 0.3s ease-out;
+      overflow: hidden;
+    }
+
+    .app--mini igc-nav-drawer-item::part(base) {
+      justify-content: center;
+      width: 40px;
+      min-height: 40px;
+      padding: 0;
+      margin: 4px auto;
+      border-radius: 8px;
+    }
+
+    .app--mini igc-nav-drawer-item::part(content) {
+      display: none;
+    }
+
+    igc-nav-drawer-item[active]::part(base) {
+      background: #e0f2ff;
+      color: #0075d2;
+    }
+
+    igc-nav-drawer-item[active] igc-icon {
+      color: #0075d2;
+    }
+
+    router-outlet {
+      flex: 1 1 auto;
+      display: flex;
+      align-items: stretch;
+      justify-content: center;
+      min-width: 0;
+      overflow: auto;
+    }
+
+    @media (max-width: 1024px) {
+      .app__menu-button {
+        display: none;
+      }
+    }
+  `;
+
+  render() {
+    const visibleRoutes = (routes as AppRoute[]).filter((route) => {
+      if (!route.name) return false;
+      if ((route as any).requiresAuth && !this.isLoggedIn) return false;
+      return true;
+    });
+
+    return html`
+      <div class="app">
+        <header class="app__navbar">
+          <button
+            class="app__menu-button"
+            type="button"
+            aria-label="Toggle navigation"
+            @click=${this.toggleDrawer}
+          >
+            <igc-icon name="menu" collection="material"></igc-icon>
+          </button>
+          <h1 class="app__title">$(name)</h1>
+          <div class="app__navbar-spacer"></div>
+          <auth-login-bar @auth-change=${this.handleAuthChange}></auth-login-bar>
+        </header>
+        <div class=${this.drawerOpen ? 'app__body' : 'app__body app--mini'}>
+          <igc-nav-drawer
+            class="app__drawer"
+            ?open=${true}
+            position="relative"
+          >
+            ${visibleRoutes.map((route) => html`
+              <igc-nav-drawer-item
+                ?active=${this.currentPath === route.path}
+                @click=${() => this.navigate(route.path)}
+              >
+                <igc-icon
+                  slot="icon"
+                  name=${route.icon || 'apps'}
+                  collection="material"
+                ></igc-icon>
+                <span slot="content">${route.name}</span>
+              </igc-nav-drawer-item>
+            `)}
+          </igc-nav-drawer>
+          <router-outlet></router-outlet>
+        </div>
+      </div>
+    `;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.mediaQuery = window.matchMedia('(min-width: 1025px)');
+    this.updateDrawerState();
+    this.mediaQuery.addEventListener('change', this.updateDrawerState);
+    window.addEventListener('popstate', this.updateCurrentPath);
+    // Listen globally so redirect components (Google/Facebook/Microsoft) in the router
+    // outlet can also trigger a shell state update after a successful OAuth redirect.
+    window.addEventListener('auth-change', this.handleAuthChange);
+  }
+
+  disconnectedCallback() {
+    this.mediaQuery?.removeEventListener('change', this.updateDrawerState);
+    window.removeEventListener('popstate', this.updateCurrentPath);
+    window.removeEventListener('auth-change', this.handleAuthChange);
+    super.disconnectedCallback();
+  }
+
+  firstUpdated() {
+    const outlet = this.shadowRoot?.querySelector('router-outlet');
+    const router = new Router(outlet);
+    router.setRoutes(routes);
+  }
+
+  private toggleDrawer = () => {
+    this.drawerOpen = !this.drawerOpen;
+  };
+
+  private navigate(path: string) {
+    this.currentPath = path;
+    Router.go(path);
+  }
+
+  private updateDrawerState = () => {
+    this.drawerOpen = Boolean(this.mediaQuery?.matches);
+  };
+
+  private updateCurrentPath = () => {
+    this.currentPath = window.location.pathname;
+  };
+
+  private handleAuthChange = () => {
+    this.isLoggedIn = Boolean(UserStore.getUser());
+    this.currentPath = window.location.pathname;
+  };
+}

package/templates/webcomponents/igc-ts/projects/side-nav-mini-auth/index.d.ts

@@ -0,0 +1,15 @@
+import { ProjectTemplate } from "@igniteui/cli-core";
+import { SideNavMiniProject } from "../side-nav-mini";
+export declare class SideNavMiniAuthIgcProject extends SideNavMiniProject implements ProjectTemplate {
+    id: string;
+    name: string;
+    description: string;
+    dependencies: string[];
+    framework: string;
+    projectType: string;
+    hasExtraConfiguration: boolean;
+    isHidden: boolean;
+    get templatePaths(): string[];
+}
+declare const _default: SideNavMiniAuthIgcProject;
+export default _default;

package/templates/webcomponents/igc-ts/projects/side-nav-mini-auth/index.js

@@ -0,0 +1,50 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SideNavMiniAuthIgcProject = void 0;
+const path = __importStar(require("path"));
+const side_nav_mini_1 = require("../side-nav-mini");
+class SideNavMiniAuthIgcProject extends side_nav_mini_1.SideNavMiniProject {
+    constructor() {
+        super(...arguments);
+        this.id = "side-nav-mini-auth";
+        this.name = "Side navigation (mini) + login";
+        this.description = "Collapsible mini side navigation extended with user authentication module";
+        this.dependencies = [];
+        this.framework = "webcomponents";
+        this.projectType = "igc-ts";
+        this.hasExtraConfiguration = false;
+        this.isHidden = true;
+    }
+    get templatePaths() {
+        return [
+            ...super.templatePaths,
+            path.join(__dirname, "../side-nav-auth/files"),
+            path.join(__dirname, "files")
+        ];
+    }
+}
+exports.SideNavMiniAuthIgcProject = SideNavMiniAuthIgcProject;
+exports.default = new SideNavMiniAuthIgcProject();

package/templates/react/igr-ts/projects/top-nav/files/src/app/app.css

@@ -1,62 +0,0 @@
-.app {
-  text-align: center;
-  display: flex;
-  flex-flow: column;
-  min-height: 100vh;
-}
-
-.content {
-  flex: 1 0 auto;
-  padding: 1em;
-}
-
-/* quick nav menubar */
-nav,
-.app__name {
-  background-color: rgb(0, 153, 255);
-  box-sizing: border-box;
-}
-.app__name {
-  font-weight: 600;
-  font-size: 24px;
-  line-height: 32px;
-  padding-left: 24px;
-  text-align: left;
-  color: #fff;
-  padding-bottom: 8px;
-}
-
-nav ul {
-  list-style: none;
-  display: flex;
-  justify-content: flex-start;
-  flex-wrap: wrap;
-  margin: 0;
-  padding: 0;
-}
-
-nav ul a {
-  color: #fff;
-  line-height: 2;
-  text-decoration: none;
-  margin: 0 5px;
-}
-
-nav ul a.active {
-  color: #fff;
-  font-weight: 600;
-}
-
-nav ul li {
-  margin: 0px 16px;
-  box-sizing: border-box;
-  border-bottom: 1px solid transparent;
-}
-
-nav ul li.active {
-  border-bottom: 2px solid #fff;
-}
-
-nav ul li:not(.active):hover {
-  border-bottom: 1px solid #fff;
-}

package/templates/react/igr-ts/projects/top-nav/files/src/app/app.tsx

@@ -1,18 +0,0 @@
-import { Outlet } from "react-router-dom";
-import { routes } from './app-routes';
-import NavigationHeader from "../components/navigation-header";
-import "./app.css";
-
-export default function App() {
-  const name = "$(name)";
-
-  return (
-    <div className="app">
-      <div className="app__name">{name}</div>
-      <NavigationHeader routes={routes}></NavigationHeader>
-      <div className="content">
-        <Outlet />
-      </div>
-    </div>
-  );
-}

package/templates/react/igr-ts/projects/top-nav/files/src/components/navigation-header/index.tsx

@@ -1,19 +0,0 @@
-import { useMemo } from 'react';
-import { Link, useLocation } from 'react-router-dom';
-
-export default function NavigationHeader({ routes }: any) {
-  const location = useLocation();
-  const activeItem = useMemo(() => {
-    return routes.findIndex((route: { path: string; }) => route.path === location.pathname);
-  }, [routes, location.pathname]);
-
-  return (
-    <nav>
-      <ul>
-        {routes.map(
-          (route: any, i: any) => <li key={i} className={activeItem === i ? 'active' : ''}><Link to={route.path}>{route.text}</Link></li>
-        )}
-      </ul>
-    </nav>
-  )
-}