Merge branch 'main' into cherry-pick_c862bcde12ef41fb92c63ba071e5d191…

…c6c31502_1726599378437

.eslintrc-overrides.json

@@ -3,7 +3,6 @@
     {
       "files": ["*.ts"],
       "rules": {
-        "@typescript-eslint/ban-types": "warn",
         "@typescript-eslint/no-empty-function": "warn",
         "@typescript-eslint/no-explicit-any": "warn",
         "@typescript-eslint/no-non-null-assertion": "warn",

.eslintrc.json

@@ -30,18 +30,12 @@
     {
       "files": ["*.ts", "*.tsx"],
       "extends": ["plugin:@nx/typescript", "prettier"],
-      "rules": {
-        "@typescript-eslint/no-extra-semi": "error",
-        "no-extra-semi": "off"
-      }
+      "rules": {}
     },
     {
       "files": ["*.js", "*.jsx"],
       "extends": ["plugin:@nx/javascript", "prettier"],
-      "rules": {
-        "@typescript-eslint/no-extra-semi": "error",
-        "no-extra-semi": "off"
-      }
+      "rules": {}
     },
     {
       "files": ["*.stories.@(ts|tsx|js|jsx|mjs|cjs)"],

.github/actions/e2e-affected/action.yml

@@ -88,7 +88,7 @@ runs:
             '--withTarget=e2e',
             '--affected',
             '--json'
-          ]).then(({stdout}) => JSON.parse(stdout));
+          ]).then(({stdout}) => JSON.parse(stdout)).catch(() => []);
           const projectAffected = affectedProjects.includes('${{ inputs.project }}');
           if (projectAffected) {
             core.info(`E2E tests affected`);

apps/code-examples/project.json

@@ -119,5 +119,6 @@
       }
     }
   },
+  "implicitDependencies": ["eslint-config"],
   "tags": []
 }

apps/code-examples/src/app/app.component.html

@@ -1,11 +1,11 @@
-@if (router.url !== '/') {
-  <div
-    id="controls"
-    [ngStyle]="{
-      'height.px': height
-    }"
-  >
-    <div>
+<div
+  id="controls"
+  [ngStyle]="{
+    'height.px': height
+  }"
+>
+  <div>
+    @if (!isHome()) {
       <button
         class="sky-btn sky-btn-primary"
         id="home-btn"
@@ -14,8 +14,16 @@
       >
         Go home
       </button>
-    </div>
+    }
   </div>
-}
+  <sky-theme-selector />
+</div>
 
-<router-outlet />
+<div
+  id="content"
+  [ngStyle]="{
+    height: 'calc(100vh - ' + height + 'px)'
+  }"
+>
+  <router-outlet />
+</div>

apps/code-examples/src/app/app.component.scss

@@ -3,6 +3,10 @@
   margin: 5px;
 }
 
+#content {
+  overflow-y: auto;
+}
+
 #controls {
   position: sticky;
   top: 0;

apps/code-examples/src/app/app.component.ts

@@ -35,4 +35,8 @@ export class AppComponent {
 
     themeSvc.init(document.body, renderer, themeSettings);
   }
+
+  public isHome(): boolean {
+    return this.router.url === '/';
+  }
 }

apps/code-examples/src/app/app.module.ts

@@ -5,10 +5,16 @@ import { SkyThemeService } from '@skyux/theme';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { SkyThemeSelectorComponent } from './shared/theme-selector/theme-selector.component';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [AppRoutingModule, BrowserAnimationsModule, BrowserModule],
+  imports: [
+    AppRoutingModule,
+    BrowserAnimationsModule,
+    BrowserModule,
+    SkyThemeSelectorComponent,
+  ],
   providers: [SkyThemeService],
   bootstrap: [AppComponent],
 })

apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/focus/data.ts

@@ -0,0 +1,156 @@
+export interface AutocompleteOption {
+  id: string;
+  name: string;
+}
+
+export const DEPARTMENTS = [
+  {
+    id: '1',
+    name: 'Marketing',
+  },
+  {
+    id: '2',
+    name: 'Sales',
+  },
+  {
+    id: '3',
+    name: 'Engineering',
+  },
+  {
+    id: '4',
+    name: 'Customer Support',
+  },
+];
+
+export const JOB_TITLES: Record<string, AutocompleteOption[]> = {
+  Marketing: [
+    {
+      id: '1',
+      name: 'Social Media Coordinator',
+    },
+    {
+      id: '2',
+      name: 'Blog Manager',
+    },
+    {
+      id: '3',
+      name: 'Events Manager',
+    },
+  ],
+  Sales: [
+    {
+      id: '4',
+      name: 'Business Development Representative',
+    },
+    {
+      id: '5',
+      name: 'Account Executive',
+    },
+  ],
+  Engineering: [
+    {
+      id: '6',
+      name: 'Software Engineer',
+    },
+    {
+      id: '7',
+      name: 'Senior Software Engineer',
+    },
+    {
+      id: '8',
+      name: 'Principal Software Engineer',
+    },
+    {
+      id: '9',
+      name: 'UX Designer',
+    },
+    {
+      id: '10',
+      name: 'Product Manager',
+    },
+  ],
+  'Customer Support': [
+    {
+      id: '11',
+      name: 'Customer Support Representative',
+    },
+    {
+      id: '12',
+      name: 'Account Manager',
+    },
+    {
+      id: '13',
+      name: 'Customer Support Specialist',
+    },
+  ],
+};
+
+export interface AgGridDemoRow {
+  selected?: boolean;
+  name: string;
+  age: number;
+  startDate: Date;
+  endDate?: Date;
+  department: AutocompleteOption;
+  jobTitle?: AutocompleteOption;
+}
+
+export const AG_GRID_DEMO_DATA: AgGridDemoRow[] = [
+  {
+    selected: true,
+    name: 'Billy Bob',
+    age: 55,
+    startDate: new Date('12/1/1994'),
+    department: DEPARTMENTS[3],
+    jobTitle: JOB_TITLES['Customer Support'][1],
+  },
+  {
+    selected: false,
+    name: 'Jane Deere',
+    age: 33,
+    startDate: new Date('7/15/2009'),
+    department: DEPARTMENTS[2],
+    jobTitle: JOB_TITLES['Engineering'][2],
+  },
+  {
+    selected: false,
+    name: 'John Doe',
+    age: 38,
+    startDate: new Date('9/1/2017'),
+    endDate: new Date('9/30/2017'),
+    department: DEPARTMENTS[1],
+  },
+  {
+    selected: false,
+    name: 'David Smith',
+    age: 51,
+    startDate: new Date('1/1/2012'),
+    endDate: new Date('6/15/2018'),
+    department: DEPARTMENTS[2],
+    jobTitle: JOB_TITLES['Engineering'][4],
+  },
+  {
+    selected: true,
+    name: 'Emily Johnson',
+    age: 41,
+    startDate: new Date('1/15/2014'),
+    department: DEPARTMENTS[0],
+    jobTitle: JOB_TITLES['Marketing'][2],
+  },
+  {
+    selected: false,
+    name: 'Nicole Davidson',
+    age: 22,
+    startDate: new Date('11/1/2019'),
+    department: DEPARTMENTS[2],
+    jobTitle: JOB_TITLES['Engineering'][0],
+  },
+  {
+    selected: false,
+    name: 'Carl Roberts',
+    age: 23,
+    startDate: new Date('11/1/2019'),
+    department: DEPARTMENTS[2],
+    jobTitle: JOB_TITLES['Engineering'][3],
+  },
+];

apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/focus/demo.component.html

@@ -0,0 +1,23 @@
+<sky-input-box
+  labelText="Start here"
+  helpPopoverContent="Then tab to the grid"
+  stacked
+>
+  <input type="text" />
+</sky-input-box>
+<div class="sky-margin-stacked-md">
+  <sky-ag-grid-wrapper>
+    <ag-grid-angular
+      class="sky-ag-grid-editable"
+      [gridOptions]="gridOptions"
+      [rowData]="gridData"
+    />
+  </sky-ag-grid-wrapper>
+</div>
+<sky-input-box
+  labelText="Or start here"
+  helpPopoverContent="Then tab backwards to the grid"
+  stacked
+>
+  <input type="text" />
+</sky-input-box>