igniteui-cli 15.2.2 → 15.3.0

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

@@ -1,58 +1,228 @@
-import { html, css, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { Router } from '@vaadin/router';
+import { css, html, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
 import {
   defineComponents,
+  IgcIconComponent,
   IgcNavDrawerComponent,
-  IgcRippleComponent,
+  IgcNavDrawerItemComponent,
+  registerIcon,
 } from 'igniteui-webcomponents';
-import { Router } from '@vaadin/router';
 import { routes } from './app-routing.js';
 
+type AppRoute = {
+  path: string;
+  name?: string;
+  icon?: string;
+};
+
 defineComponents(
+  IgcIconComponent,
   IgcNavDrawerComponent,
-  IgcRippleComponent,
+  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'],
+] 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 drawerPosition: 'relative' | 'start' = 'relative';
+
+  @state()
+  private currentPath = window.location.pathname;
+
+  private mediaQuery?: MediaQueryList;
+
   static styles = css`
     :host {
       display: flex;
       height: 100%;
     }
 
-    router-outlet {
-      height: 100%;
-      width: 100%;
+    .app {
       display: flex;
-      text-align: center;
       flex-flow: column nowrap;
-      justify-content: stretch;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+
+    .app__navbar {
+      display: flex;
       align-items: center;
-      padding: 1rem;
+      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;
     }
+
+    .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__body {
+      display: flex;
+      flex: 1 1 auto;
+      min-height: 0;
+    }
+
+    .app__drawer {
+      flex: 0 0 auto;
+      height: 100%;
+      --menu-full-width: 280px;
+    }
+
+    igc-nav-drawer-item::part(base) {
+      min-height: 48px;
+      color: #2d2d2d;
+    }
+
+    igc-nav-drawer-item[active]::part(base) {
+      background: #e0f2ff;
+      color: #0075d2;
+    }
+
+    igc-nav-drawer-item[active] igc-icon {
+      color: #0075d2;
+    }
+
+    igc-nav-drawer-item:not([active]) igc-icon {
+      color: #2d2d2d;
+    }
+
+    router-outlet {
+      flex: 1 1 auto;
+      display: flex;
+      align-items: stretch;
+      justify-content: center;
+      min-width: 0;
+      overflow: auto;
+    }
   `;
 
   render() {
+    const visibleRoutes = (routes as AppRoute[]).filter((route) => route.name);
+
     return html`
-      <igc-nav-drawer open position="relative">
-        <igc-nav-drawer-header-item>Ignite UI CLI</igc-nav-drawer-header-item>
-        ${routes.filter(route => route.name).map(({path, name}) => html`
-          <igc-nav-drawer-item>
-            <span slot="content">
-              <a href="${path}">${name}<igc-ripple></igc-ripple></a>
-            </span>
-          </igc-nav-drawer-item>
-        `)}
-      </igc-nav-drawer>
-      <router-outlet></router-outlet>
+      <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>
+        </header>
+        <div class="app__body">
+          <igc-nav-drawer
+            class="app__drawer"
+            ?open=${this.drawerOpen}
+            position=${this.drawerPosition}
+          >
+            ${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 || 'home'}
+                  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);
+  }
+
+  disconnectedCallback() {
+    this.mediaQuery?.removeEventListener('change', this.updateDrawerState);
+    window.removeEventListener('popstate', this.updateCurrentPath);
+
+    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);
+
+    if (!this.mediaQuery?.matches) {
+      this.drawerOpen = false;
+    }
+  }
+
+  private updateDrawerState = () => {
+    const pinned = Boolean(this.mediaQuery?.matches);
+
+    this.drawerOpen = pinned;
+    this.drawerPosition = pinned ? 'relative' : 'start';
+  };
+
+  private updateCurrentPath = () => {
+    this.currentPath = window.location.pathname;
+  };
 }

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

@@ -0,0 +1,175 @@
+import { css, html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcIconComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcIconComponent);
+
+@customElement('app-home')
+export class HomeComponent extends LitElement {
+  static styles = css`
+    :host {
+      display: flex;
+      width: 100%;
+      min-height: 100%;
+    }
+
+    .home {
+      width: 100%;
+      max-width: 920px;
+      margin: auto;
+      padding: 48px 24px;
+      box-sizing: border-box;
+      font-family: "Titillium Web", "Segoe UI", Arial, sans-serif;
+    }
+
+    .home__intro {
+      max-width: 720px;
+      margin: 0 auto 24px;
+      text-align: center;
+    }
+
+    h1 {
+      margin: 0 0 12px;
+      color: #09f;
+      font-size: 3rem;
+      font-weight: 600;
+      line-height: 1.2;
+    }
+
+    .home__description {
+      margin: 0;
+      color: #000;
+      font-size: 1.125rem;
+      line-height: 1.5;
+    }
+
+    .home__image {
+      display: block;
+      width: 500px;
+      height: 350px;
+      margin: 0 auto 28px;
+      max-width: 100%;
+      object-fit: contain;
+    }
+
+    .home__resources {
+      display: grid;
+      grid-template-columns: repeat(2, 300px);
+      justify-content: center;
+      margin: 0 auto;
+      gap: 12px 64px;
+    }
+
+    .home__resource {
+      display: flex;
+      align-items: center;
+      min-height: 64px;
+      padding: 6px 0;
+      color: rgba(0, 0, 0, .74);
+      text-align: left;
+      text-decoration: none;
+    }
+
+    .home__resource:hover strong {
+      text-decoration: underline;
+    }
+
+    .home__resource igc-icon {
+      flex: 0 0 28px;
+      margin-right: 16px;
+      color: #09f;
+      font-size: 28px;
+    }
+
+    .home__resource strong,
+    .home__resource small {
+      display: block;
+    }
+
+    .home__resource strong {
+      margin-bottom: 2px;
+      color: #731963;
+      font-size: 1rem;
+    }
+
+    .home__resource small {
+      color: #000;
+      font-size: 0.875rem;
+      line-height: 1.4;
+    }
+
+    @media (max-width: 768px) {
+      .home {
+        padding: 32px 16px;
+      }
+
+      h1 {
+        font-size: 2.25rem;
+      }
+
+      .home__image {
+        width: 100%;
+        height: 240px;
+      }
+
+      .home__resources {
+        grid-template-columns: minmax(0, 300px);
+        justify-content: center;
+        gap: 4px;
+      }
+    }
+  `;
+
+  render() {
+    return html`
+      <main class="home">
+        <div class="home__intro">
+          <h1>Welcome to Ignite UI for Web Components!</h1>
+          <p class="home__description">
+            A routed application shell with a responsive side navigation drawer and curated Ignite UI resources.
+          </p>
+        </div>
+
+        <img
+          src="./src/assets/astronaut-components.svg"
+          class="home__image"
+          alt="Ignite UI for Web Components"
+        >
+
+        <div class="home__resources" role="navigation" aria-label="Ignite UI resources">
+          <a class="home__resource" href="https://www.infragistics.com/products/ignite-ui-web-components" target="_blank" rel="noopener noreferrer">
+            <igc-icon name="apps" collection="material"></igc-icon>
+            <span>
+              <strong>Component Demos</strong>
+              <small>Browse Web Components demos and examples</small>
+            </span>
+          </a>
+          <a class="home__resource" href="https://github.com/IgniteUI/igniteui-webcomponents" target="_blank" rel="noopener noreferrer">
+            <igc-icon name="code" collection="material"></igc-icon>
+            <span>
+              <strong>Web Components Repository</strong>
+              <small>Explore Ignite UI for Web Components on GitHub</small>
+            </span>
+          </a>
+          <a class="home__resource" href="https://github.com/IgniteUI/igniteui-cli" target="_blank" rel="noopener noreferrer">
+            <igc-icon name="build" collection="material"></igc-icon>
+            <span>
+              <strong>Ignite UI CLI</strong>
+              <small>Review the CLI source and project tooling</small>
+            </span>
+          </a>
+          <a class="home__resource" href="https://www.figma.com/@infragistics" target="_blank" rel="noopener noreferrer">
+            <igc-icon name="palette" collection="material"></igc-icon>
+            <span>
+              <strong>Figma UI Kit</strong>
+              <small>Open Infragistics design resources</small>
+            </span>
+          </a>
+        </div>
+      </main>
+    `;
+  }
+}

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

@@ -30,7 +30,7 @@ class SideNavProject extends _base_with_home_1.BaseWithHomeIgcProject {
     constructor() {
         super(...arguments);
         this.id = "side-nav";
-        this.name = "Default side navigation";
+        this.name = "Side navigation default";
         this.description = "Project structure with side navigation drawer";
         this.framework = "webcomponents";
         this.projectType = "igc-ts";

package/templates/webcomponents/igc-ts/projects/side-nav-auth/files/index.html

@@ -0,0 +1,25 @@
+<!doctype html>
+<html lang="en-GB">
+
+<head>
+  <meta charset="utf-8">
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Ignite UI for Web Components</title>
+  <link rel="icon" type="image/png" href="./src/assets/wc.png">
+  <link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700" rel="stylesheet">
+  <link rel="stylesheet" href="./node_modules/igniteui-webcomponents/themes/light/material.css">
+  <link rel="stylesheet" href="./styles.css">
+  <!-- Facebook JS SDK — required only when facebook is configured in external-auth-config.ts.
+       Remove this script if you are not using Facebook login. -->
+  <script async defer crossorigin="anonymous"
+    src="https://connect.facebook.net/en_US/sdk.js"></script>
+</head>
+
+<body class="ig-scrollbar">
+  <app-root></app-root>
+
+  <script type="module" src="./src/index.ts"></script>
+</body>
+
+</html>

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

@@ -0,0 +1,37 @@
+import { type Route } from '@vaadin/router';
+import { UserStore } from './authentication/services/userStore.js';
+import './home/home.js';
+import './not-found/not-found.js';
+import './profile/profile.js';
+import './redirect/redirect-google.js';
+import './redirect/redirect-microsoft.js';
+import './redirect/redirect-facebook.js';
+
+export interface AppRoute extends Route {
+  icon?: string;
+  requiresAuth?: boolean;
+}
+
+function authGuard(_context: any, commands: any) {
+  if (!UserStore.getUser()) {
+    return commands.redirect('/');
+  }
+  return undefined;
+}
+
+export const routes: AppRoute[] = [
+  { path: '/', component: 'app-home', name: 'Home', icon: 'home' },
+  {
+    path: '/auth/profile',
+    component: 'app-profile',
+    name: 'Profile',
+    icon: 'account_circle',
+    requiresAuth: true,
+    action: authGuard,
+  },
+  { path: '/auth/redirect-google', component: 'app-redirect-google' },
+  { path: '/auth/redirect-microsoft', component: 'app-redirect-microsoft' },
+  { path: '/auth/redirect-facebook', component: 'app-redirect-facebook' },
+  // The fallback route should always be after other alternatives.
+  { path: '(.*)', component: 'app-not-found' },
+];