igniteui-cli 15.2.2 → 15.3.1-beta.1

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' },
+];

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

@@ -0,0 +1,251 @@
+import { Router } from '@vaadin/router';
+import { css, html, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcIconComponent,
+  IgcNavDrawerComponent,
+  IgcNavDrawerItemComponent,
+  registerIcon,
+} from 'igniteui-webcomponents';
+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 drawerPosition: 'relative' | 'start' = 'relative';
+
+  @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;
+    }
+
+    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) => {
+      if (!route.name) return false;
+      if (route.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="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);
+    // 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);
+
+    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;
+  };
+
+  private handleAuthChange = () => {
+    this.isLoggedIn = Boolean(UserStore.getUser());
+    this.currentPath = window.location.pathname;
+  };
+}

package/templates/webcomponents/igc-ts/projects/side-nav-auth/files/src/app/authentication/login-bar/login-bar.ts

@@ -0,0 +1,124 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { Router } from '@vaadin/router';
+import { defineComponents, IgcAvatarComponent, IgcButtonComponent, IgcDropdownComponent, IgcDropdownItemComponent } from 'igniteui-webcomponents';
+import { UserStore } from '../services/userStore.js';
+import { ExternalAuth } from '../services/externalAuth.js';
+import type { User } from '../models/user.js';
+import '../login-dialog/login-dialog.js';
+
+defineComponents(IgcAvatarComponent, IgcButtonComponent, IgcDropdownComponent, IgcDropdownItemComponent);
+
+@customElement('auth-login-bar')
+export class LoginBarElement extends LitElement {
+  @state() private currentUser: User | null = UserStore.getUser();
+
+  static styles = css`
+    :host {
+      display: contents;
+    }
+
+    .login-btn::part(base) {
+      color: #0075d2;
+      background: #fff;
+      border-color: rgba(0, 117, 210, 0.35);
+      font-weight: 600;
+      white-space: nowrap;
+    }
+
+    .login-btn::part(base):hover {
+      background: #e8f3fc;
+    }
+
+    .profile-avatar {
+      cursor: pointer;
+      color: #0075d2;
+      --ig-avatar-background: #fff;
+      --ig-avatar-color: #0075d2;
+      --ig-avatar-initials-font-size: 0.875rem;
+    }
+
+    igc-dropdown-item:hover,
+    igc-dropdown-item[active]:hover {
+      background: #e8f3fc;
+      color: #0075d2;
+    }
+
+    igc-dropdown-item[active] {
+      background: #e8f3fc;
+      color: #0075d2;
+    }
+
+    igc-dropdown-item[selected],
+    igc-dropdown-item[selected]:hover,
+    igc-dropdown-item[selected][active] {
+      background: #e8f3fc;
+      color: #0075d2;
+    }
+
+    .profile-avatar:focus-visible {
+      outline: 2px solid #fff;
+      outline-offset: 2px;
+    }
+  `;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('auth-change', this.handleAuthChange as EventListener);
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('auth-change', this.handleAuthChange as EventListener);
+    super.disconnectedCallback();
+  }
+
+  private handleAuthChange = () => {
+    this.currentUser = UserStore.getUser();
+  };
+
+  private handleMenuSelect(e: CustomEvent) {
+    // igcChange detail is the selected IgcDropdownItemComponent element
+    const value = (e.detail as any)?.value;
+    if (value === 'profile') {
+      Router.go('/auth/profile');
+    } else if (value === 'logout') {
+      ExternalAuth.logout();
+      UserStore.clearUser();
+      this.currentUser = null;
+      Router.go('/');
+    }
+  }
+
+  render() {
+    if (!this.currentUser) {
+      return html`
+        <igc-button variant="outlined" class="login-btn" @click=${() => (this.shadowRoot?.querySelector('auth-login-dialog') as any)?.open()}>Log In</igc-button>
+        <auth-login-dialog @auth-change=${this.handleAuthChange}></auth-login-dialog>
+      `;
+    }
+
+    const initials = UserStore.getInitials(this.currentUser);
+
+    return html`
+      <igc-dropdown placement="bottom-end" @igcChange=${this.handleMenuSelect}>
+        <igc-avatar
+          slot="target"
+          class="profile-avatar"
+          shape="circle"
+          size="small"
+          src=${this.currentUser.picture ?? ''}
+          tabindex="0"
+          aria-label="Open profile menu"
+        >${initials}</igc-avatar>
+        <igc-dropdown-item value="profile">Profile</igc-dropdown-item>
+        <igc-dropdown-item value="logout">Log Out</igc-dropdown-item>
+      </igc-dropdown>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'auth-login-bar': LoginBarElement;
+  }
+}