igniteui-cli 15.2.2-alpha.3 → 15.3.0

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

@@ -0,0 +1,57 @@
+import { LitElement, html } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { Router } from '@vaadin/router';
+import { ExternalAuth } from '../authentication/services/externalAuth.js';
+import { Authentication } from '../authentication/services/authentication.js';
+import { UserStore } from '../authentication/services/userStore.js';
+import type { User } from '../authentication/models/user.js';
+
+/**
+ * Handles the Facebook login redirect.
+ * Facebook uses a popup (JS SDK) instead of PKCE, so this page reads the profile
+ * that was stored in sessionStorage during the FB.login() callback.
+ */
+@customElement('app-redirect-facebook')
+export class RedirectFacebookElement extends LitElement {
+  @state() private error = '';
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._handleRedirect();
+  }
+
+  private async _handleRedirect() {
+    try {
+      const externalUser = await ExternalAuth.handleRedirect('facebook');
+      const result = await Authentication.loginWith(externalUser);
+      if (result.user) {
+        UserStore.setUser(result.user as User);
+        this.dispatchEvent(new CustomEvent('auth-change', { bubbles: true, composed: true }));
+        Router.go('/auth/profile');
+      } else {
+        this.error = result.error ?? 'Facebook sign-in failed.';
+      }
+    } catch (e: any) {
+      console.error('Facebook sign-in failed:', e);
+      this.error = 'Facebook sign-in failed. Please try again.';
+    }
+  }
+
+  render() {
+    if (this.error) {
+      return html`
+        <div style="padding:2rem;color:#d32f2f">
+          <p>${this.error}</p>
+          <button @click=${() => Router.go('/')}>Back to Home</button>
+        </div>
+      `;
+    }
+    return html`<p style="padding:2rem">Signing in with Facebook…</p>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'app-redirect-facebook': RedirectFacebookElement;
+  }
+}

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

@@ -0,0 +1,53 @@
+import { LitElement, html } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { Router } from '@vaadin/router';
+import { ExternalAuth } from '../authentication/services/externalAuth.js';
+import { Authentication } from '../authentication/services/authentication.js';
+import { UserStore } from '../authentication/services/userStore.js';
+import type { User } from '../authentication/models/user.js';
+
+/** Handles the OAuth redirect from Google. Exchanges the authorization code for a user profile. */
+@customElement('app-redirect-google')
+export class RedirectGoogleElement extends LitElement {
+  @state() private error = '';
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._handleRedirect();
+  }
+
+  private async _handleRedirect() {
+    try {
+      const externalUser = await ExternalAuth.handleRedirect('google');
+      const result = await Authentication.loginWith(externalUser);
+      if (result.user) {
+        UserStore.setUser(result.user as User);
+        this.dispatchEvent(new CustomEvent('auth-change', { bubbles: true, composed: true }));
+        Router.go('/auth/profile');
+      } else {
+        this.error = result.error ?? 'Google sign-in failed.';
+      }
+    } catch (e: any) {
+      console.error('Google sign-in failed:', e);
+      this.error = 'Google sign-in failed. Please try again.';
+    }
+  }
+
+  render() {
+    if (this.error) {
+      return html`
+        <div style="padding:2rem;color:#d32f2f">
+          <p>${this.error}</p>
+          <button @click=${() => Router.go('/')}>Back to Home</button>
+        </div>
+      `;
+    }
+    return html`<p style="padding:2rem">Signing in with Google…</p>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'app-redirect-google': RedirectGoogleElement;
+  }
+}

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

@@ -0,0 +1,53 @@
+import { LitElement, html } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { Router } from '@vaadin/router';
+import { ExternalAuth } from '../authentication/services/externalAuth.js';
+import { Authentication } from '../authentication/services/authentication.js';
+import { UserStore } from '../authentication/services/userStore.js';
+import type { User } from '../authentication/models/user.js';
+
+/** Handles the OAuth redirect from Microsoft. Exchanges the authorization code for a user profile. */
+@customElement('app-redirect-microsoft')
+export class RedirectMicrosoftElement extends LitElement {
+  @state() private error = '';
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._handleRedirect();
+  }
+
+  private async _handleRedirect() {
+    try {
+      const externalUser = await ExternalAuth.handleRedirect('microsoft');
+      const result = await Authentication.loginWith(externalUser);
+      if (result.user) {
+        UserStore.setUser(result.user as User);
+        this.dispatchEvent(new CustomEvent('auth-change', { bubbles: true, composed: true }));
+        Router.go('/auth/profile');
+      } else {
+        this.error = result.error ?? 'Microsoft sign-in failed.';
+      }
+    } catch (e: any) {
+      console.error('Microsoft sign-in failed:', e);
+      this.error = 'Microsoft sign-in failed. Please try again.';
+    }
+  }
+
+  render() {
+    if (this.error) {
+      return html`
+        <div style="padding:2rem;color:#d32f2f">
+          <p>${this.error}</p>
+          <button @click=${() => Router.go('/')}>Back to Home</button>
+        </div>
+      `;
+    }
+    return html`<p style="padding:2rem">Signing in with Microsoft…</p>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'app-redirect-microsoft': RedirectMicrosoftElement;
+  }
+}

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

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

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

@@ -0,0 +1,46 @@
+"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.SideNavAuthIgcProject = void 0;
+const path = __importStar(require("path"));
+const side_nav_1 = require("../side-nav");
+class SideNavAuthIgcProject extends side_nav_1.SideNavProject {
+    constructor() {
+        super(...arguments);
+        this.id = "side-nav-auth";
+        this.name = "Side navigation + login";
+        this.description = "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, "files")];
+    }
+}
+exports.SideNavAuthIgcProject = SideNavAuthIgcProject;
+exports.default = new SideNavAuthIgcProject();

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

@@ -0,0 +1,13 @@
+import { type Route } from '@vaadin/router';
+import './home/home.js';
+import './not-found/not-found.js';
+
+export interface AppRoute extends Route {
+  icon?: string;
+}
+
+export const routes: AppRoute[] = [
+  { path: '/', component: 'app-home', name: 'Home', icon: 'home' },
+  // The fallback route should always be after other alternatives.
+  { path: '(.*)', component: 'app-not-found' },
+];

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

@@ -0,0 +1,238 @@
+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';
+
+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'],
+] 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;
+
+  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;
+    }
+
+    .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;
+    }
+
+    .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::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;
+    }
+
+    @media (max-width: 1024px) {
+      .app__menu-button {
+        display: none;
+      }
+    }
+  `;
+
+  render() {
+    const visibleRoutes = (routes as AppRoute[]).filter((route) => route.name);
+
+    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>
+        </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);
+  }
+
+  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);
+  }
+
+  private updateDrawerState = () => {
+    this.drawerOpen = Boolean(this.mediaQuery?.matches);
+  };
+
+  private updateCurrentPath = () => {
+    this.currentPath = window.location.pathname;
+  };
+}

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

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

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

@@ -0,0 +1,45 @@
+"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.SideNavMiniProject = void 0;
+const path = __importStar(require("path"));
+const side_nav_1 = require("../side-nav");
+class SideNavMiniProject extends side_nav_1.SideNavProject {
+    constructor() {
+        super(...arguments);
+        this.id = "side-nav-mini";
+        this.name = "Side navigation + collapsible mini nav";
+        this.description = "Side navigation with a collapsible mini (icons-only) variant and responsive breakpoints";
+        this.framework = "webcomponents";
+        this.projectType = "igc-ts";
+        this.dependencies = [];
+        this.hasExtraConfiguration = false;
+    }
+    get templatePaths() {
+        return [...super.templatePaths, path.join(__dirname, "files")];
+    }
+}
+exports.SideNavMiniProject = SideNavMiniProject;
+exports.default = new SideNavMiniProject();