### Initialize Firebase Project

Source: https://github.com/dereekb/dbx-components/blob/develop/NOTES.md

Initializes a Firebase project in the current directory. This command sets up the necessary configuration files for Firebase services. It's recommended to skip installing node_modules during initialization.

```bash
firebase init
```

--------------------------------

### Install Firebase CLI

Source: https://github.com/dereekb/dbx-components/blob/develop/NOTES.md

Installs the latest version of the Firebase CLI globally using npm. This command is essential for interacting with Firebase services, including initialization and deployment.

```bash
npm install -g firebase-tools@latest
```

--------------------------------

### Migrate to Nx 19

Source: https://github.com/dereekb/dbx-components/blob/develop/setup/upgrades/v11-to-v12/v11-to-v12-upgrade-info.md

Starts the migration process to Nx version 19. Similar to the Nx 18 migration, this sets up migration.json and modifies package.json, necessitating a review of dependency versions.

```bash
nx migrate 19
```

--------------------------------

### Update Nx Global Installation

Source: https://github.com/dereekb/dbx-components/blob/develop/setup/upgrades/v11-to-v12/v11-to-v12-upgrade-info.md

This command updates the globally installed Nx CLI to a specific version (v20.8.0 in this example). It's a common step after major Nx releases to ensure you are using the latest tooling.

```bash
npm install -g nx@v20.8.0
```

--------------------------------

### Configure Mailgun Sandbox Settings in .env.local

Source: https://github.com/dereekb/dbx-components/blob/develop/setup/getting-started-checklist.md

Configures Mailgun sandbox API key, sandbox domain, and enables the use of the Mailgun sandbox. This is typically used for testing purposes before deploying to production.

```env
MAILGUN_SANDBOX_API_KEY=<api key>
MAILGUN_SANDBOX_DOMAIN=<sandbox domain>
USE_MAILGUN_SANDBOX=true
```

--------------------------------

### Configure Mailgun Sender and API Keys in .env

Source: https://github.com/dereekb/dbx-components/blob/develop/setup/getting-started-checklist.md

Sets up Mailgun sender name, email, domain, and API key in the .env file. These are essential for Mailgun to send emails. The placeholder values are used to ensure proper configuration during production builds.

```env
MAILGUN_SENDER_NAME=<sender name when sending emails>
MAILGUN_SENDER_EMAIL=<email address to send from>
MAILGUN_DOMAIN=placeholder
MAILGUN_API_KEY=placeholder
```

--------------------------------

### Run Nx Migrations

Source: https://github.com/dereekb/dbx-components/blob/develop/setup/upgrades/v9-to-v10-upgrade-info.md

Executes the pending migrations defined in the migration.json file. It's advisable to commit changes to Git after this step before proceeding.

```nx
npx nx migrate --run-migrations
```

--------------------------------

### Provide Dbx Firebase Configuration

Source: https://github.com/dereekb/dbx-components/blob/develop/setup/upgrades/v11-to-v12/v11-to-v12-upgrade-info.md

Introduces `provideDbxFirebase()` as a convenient way to configure and provide all necessary dbx-firebase services. This function consolidates the setup that previously required including multiple individual configuration modules.

```typescript
import { provideDbxFirebase } from "@dbx/dbx-firebase";

// Usage example:
// bootstrapApplication(AppComponent, {
//   providers: [
//     provideDbxFirebase({
//       firebaseConfig: environment.firebase,
//       // other dbx-firebase specific configurations
//     })
//   ]
// });
```

--------------------------------

### Provide Dbx Firebase App

Source: https://github.com/dereekb/dbx-components/blob/develop/setup/upgrades/v11-to-v12/v11-to-v12-upgrade-info.md

Introduces `provideDbxFirebaseApp()` as a replacement for the deprecated `DbxFirebaseDefaultFirebaseProvidersModule`. This new function simplifies Firebase app setup by providing all necessary default providers.

```typescript
import { provideDbxFirebaseApp } from "@dbx/dbx-firebase";

// Usage example:
// bootstrapApplication(AppComponent, {
//   providers: [
//     provideDbxFirebaseApp(environment.firebase)
//   ]
// });
```

--------------------------------

### Bridge Pattern Example (toSignal)

Source: https://github.com/dereekb/dbx-components/blob/develop/setup/upgrades/v11-to-v12/update-component-with-signals.md

An example illustrating the bridge pattern using `toSignal` for an observable stream that has been shared with `shareReplay(1)`.

```typescript
readonly contextStream$ = source$.pipe(shareReplay(1));
```

--------------------------------

### Configure CircleCI SSH Key Addition

Source: https://github.com/dereekb/dbx-components/blob/develop/setup/getting-started-checklist.md

A configuration snippet for `.circleci/config.yml` to add SSH keys. This section specifies the fingerprints of the SSH keys that CircleCI should use for secure connections, typically to repositories.

```yaml
  - add_ssh_keys:
      fingerprints:
        - 'SET_THIS_VALUE_TO_BE_VALID'
```

--------------------------------

### Create NestJS Library with Nx

Source: https://github.com/dereekb/dbx-components/blob/develop/NOTES.md

Generates a buildable and publishable NestJS library using the Nx CLI. This includes creating the necessary files and configurations for a NestJS library, with options for specifying import paths and directories.

```bash
nx g @nx/nest:lib --name=mailgun --buildable --publishable --importPath @dereekb/nestjs/mailgun --directory=packages/nestjs/mailgun
```

--------------------------------

### Run Temporary Generator (Initial)

Source: https://github.com/dereekb/dbx-components/blob/develop/setup/upgrades/v11-to-v12/v11-to-v12-upgrade-info.md

Executes the generated Nx plugin generator. This is the first step in a workaround process that involves applying temporary changes to the project. Answer 'false' when prompted.

```nx
nx generate tools/my-plugin/src/generators/my-generator
```

```nx
npx nx generate my-generator
```

--------------------------------

### Configure jest.config.ts for Sub-library (TypeScript)

Source: https://github.com/dereekb/dbx-components/blob/develop/NOTES.md

This TypeScript configuration simplifies the Jest setup for a new sub-library by leveraging the parent project's Jest configuration (`jest.preset.ts`). It sets the display name, preset, and coverage directory, assuming a specific project structure within the monorepo.

```typescript
/* eslint-disable */
(global as any).appTestType = 'angular';
(global as any).testFolderRootPath = '<rootDir>/../../..';

module.exports = {
  displayName: 'dbx-form-mapbox',
  preset: '../../../jest.preset.ts',
  coverageDirectory: '../../../coverage/packages/dbx-form/mapbox',
};

```

--------------------------------

### Deploy Nx Project to Firebase Hosting

Source: https://github.com/dereekb/dbx-components/blob/develop/NOTES.md

Executes the custom deploy target defined in `project.json` to build the specified Nx project (e.g., 'demo') and then deploy its output to Firebase Hosting. This command streamlines the deployment workflow.

```bash
nx deploy demo
```

--------------------------------

### Migrate to Nx 15

Source: https://github.com/dereekb/dbx-components/blob/develop/setup/upgrades/v9-to-v10-upgrade-info.md

Initiates the migration process to Nx version 15. This command sets up the migration.json file and modifies package.json. It's recommended to manually verify dependency versions after execution.

```nx
nx migrate 15.9
```

--------------------------------

### Migrate to Nx 16

Source: https://github.com/dereekb/dbx-components/blob/develop/setup/upgrades/v9-to-v10-upgrade-info.md

After clearing or deleting migration.json, this command initiates the migration to Nx version 16. It sets up a new migration.json file for the target version.

```nx
nx migrate 16.10
```

--------------------------------

### Migrate to Nx 20

Source: https://github.com/dereekb/dbx-components/blob/develop/setup/upgrades/v11-to-v12/v11-to-v12-upgrade-info.md

This outlines the initial steps for migrating to Nx version 20. It involves running the `nx migrate` command and then manually verifying dependency versions in `package.json`, especially for Angular compatibility.

```bash
nx migrate 20
```

--------------------------------

### Include All Angular Material Densities and Typographies

Source: https://github.com/dereekb/dbx-components/blob/develop/setup/upgrades/v9-to-v10-upgrade-info.md

Includes all component densities set to 0 and typographies for various Angular Material and dbx components. This is an alternative approach for projects using multiple themes.

```scss
// define all densities here since each theme uses the same density
@include mat.all-component-densities(0);

// define the topographies here since the themes use the same and we don't want to re-declare the config
@include mat.all-component-typographies($app-typography-config);
@include dbx.all-component-typographies($app-typography-config);
@include dbx-form.all-component-typographies($app-typography-config);
@include dbx-firebase.all-component-typographies($app-typography-config);
```

--------------------------------

### Set Google Application Credentials in CircleCI

Source: https://github.com/dereekb/dbx-components/blob/develop/setup/getting-started-checklist.md

Configures the `GOOGLE_APPLICATION_CREDENTIALS` environment variable within a CircleCI job. This variable points to the decoded Firebase Admin SDK JSON file, enabling authentication for Google Cloud services.

```yaml
environment:
  GOOGLE_APPLICATION_CREDENTIALS: firebase-secrets.json
```

--------------------------------

### Set Ready Value for Action

Source: https://github.com/dereekb/dbx-components/blob/develop/apps/demo/src/app/modules/doc/modules/action/container/context.component.html

This demonstrates setting a 'ready value' for an action. If 'ReadyValue' is called before the 'triggered' state is reached, it will be ignored. The value 'abc' is used as an example.

```text
Ready Value ('abc')
```

--------------------------------

### Update Module Imports from .forRoot() to Provider Functions

Source: https://github.com/dereekb/dbx-components/blob/develop/setup/upgrades/v11-to-v12/v11-to-v12-upgrade-info.md

Demonstrates the transition from deprecated .forRoot() methods to new provider functions for module configuration in dbx-components. This change simplifies module setup and aligns with modern Angular practices.

```typescript
// Deprecated:
// DbxAnalyticsSegmentModule.forRoot()
// New:
provideDbxAnalyticsSegmentApiService()
```

```typescript
// Deprecated:
// DbxWebAngularRouterModule.forRoot()
// New:
provideDbxRouterWebAngularRouterProviderConfig()
```

```typescript
// Deprecated:
// DbxWebUiRouterModule.forRoot()
// New:
provideDbxRouterWebUiRouterProviderConfig()
```

```typescript
// Deprecated:
// DbxFirebaseDevelopmentModule.forRoot()
// New:
provideDbxFirebaseDevelopment()
// Also added to:
provideDbxFirebase()
```

```typescript
// Deprecated:
// DbxFirebaseNotificationModule.forRoot()
// New:
provideDbxFirebaseNotifications()
// Also added to:
provideDbxFirebase()
```

```typescript
// Deprecated:
// DbxMapboxModule.forRoot()
// New:
provideDbxMapbox()
```

```typescript
// Deprecated:
// DbxStorageModule.forRoot()
// New:
provideDbxStorage()
```

```typescript
// Deprecated:
// DbxModelInfoModule.forRoot()
// New:
provideDbxModelService()
```

```typescript
// Deprecated:
// DbxAppAuthStateModule
// New:
provideDbxAppAuthState()
```

```typescript
// Deprecated:
// DbxAppAuthRouterModule
// New:
provideDbxAppAuthRouterModule()
```

```typescript
// Deprecated:
// DbxAppAuthRouterStateModule
// New:
provideDbxAppAuthRouterStateModule()
```

```typescript
// Deprecated:
// DbxAppContextStateModule
// New:
provideDbxAppContextState()
```

--------------------------------

### Control Action Flow

Source: https://github.com/dereekb/dbx-components/blob/develop/apps/demo/src/app/modules/doc/modules/action/container/context.component.html

These examples illustrate controlling the flow of an action, including resetting it or beginning the working state. These actions are fundamental to managing the action's lifecycle and execution.

```text
Reset Action Begin Working
```

--------------------------------

### Add .nx to .gitignore

Source: https://github.com/dereekb/dbx-components/blob/develop/setup/upgrades/v9-to-v10-upgrade-info.md

Ensures that the .nx folder is ignored by Git. This prevents Nx-specific build artifacts or cache files from being committed to the repository.

```gitignore
.nx/
```

--------------------------------

### Button with Icon

Source: https://github.com/dereekb/dbx-components/blob/develop/apps/demo/src/app/modules/doc/modules/interaction/container/button.component.html

Illustrates how to include an icon within a button for enhanced visual cues. The 'arrow_drop_down' icon is used as an example.

```html
<dbx-button><dbx-icon icon="arrow_drop_down"></dbx-icon> With Icon</dbx-button>
```

--------------------------------

### Add Nx Deploy Targets for Firebase Hosting

Source: https://github.com/dereekb/dbx-components/blob/develop/NOTES.md

Adds custom deploy targets to the `project.json` file for an Nx project. These targets automate the process of building the application and deploying its output to Firebase Hosting using `firebase deploy --only hosting`.

```json
"deploy-dist-to-hosting": {
  "builder": "nx:run-commands",
  "options": {
    "command": "firebase deploy --only hosting"
  }
}
```

```json
"deploy": {
  "builder": "nx:run-commands",
  "options": {
    "commands": [
      {
        "command": "npx nx build demo"
      },
      {
        "command": "npx nx deploy-dist-to-hosting demo"
      }
    ],
    "parallel": false
  }
}
```

--------------------------------

### Generate SSH Key for CircleCI

Source: https://github.com/dereekb/dbx-components/blob/develop/setup/getting-started-checklist.md

Generates a new SSH key pair for use with CircleCI. It's recommended to create a key without a passphrase for CI compatibility and name it with a 'ci' prefix. The public key is added to GitHub, and the private key is uploaded to CircleCI.

```bash
ssh-keygen -t rsa -b 4096 -C "ci@dereekb.com"
```

```bash
cat dbxcomponentsci
cat dbxcomponentsci.pub
```

--------------------------------

### Create NestJS Application with Nx

Source: https://github.com/dereekb/dbx-components/blob/develop/NOTES.md

Generates a NestJS application project within the Nx workspace using the Nx CLI. This command sets up a new NestJS project, ready for further development and integration with Firebase Functions.

```bash
nx generate @nx/nest:application demo-api
```

--------------------------------

### Run Nx Migration to Version 17

Source: https://github.com/dereekb/dbx-components/blob/develop/setup/upgrades/v11-to-v12/v11-to-v12-upgrade-info.md

Initiates the Nx migration process to version 17. This command sets up the migration.json file and modifies package.json. It's recommended to manually verify dependency versions after running this command.

```nx
nx migrate 17
```

--------------------------------

### Create NodeJS Library with Nx

Source: https://github.com/dereekb/dbx-components/blob/develop/NOTES.md

Generates a buildable and publishable NodeJS library using the Nx CLI. The `--importPath` flag specifies the module path for imports, and `--directory` can be used to place it within a specific sub-directory.

```bash
nx g @nx/node:library firebase --buildable --publishable --importPath @dereekb/firebase
```

```bash
nx generate @nx/node:library --name=fetch --buildable --publishable --importPath @dereekb/util/fetch --directory=packages/util
```

--------------------------------

### Create Angular Library with Nx

Source: https://github.com/dereekb/dbx-components/blob/develop/NOTES.md

Generates a buildable and publishable Angular library using the Nx CLI. Similar to NodeJS libraries, it supports `--importPath` and `--directory` for organizing and importing the library.

```bash
nx generate @nx/angular:library --name=dbx-firebase --buildable --publishable --importPath @dereekb/dbx-firebase --directory=packages/dbx-firebase
```

```bash
nx g @nx/angular:lib --name=calendar --buildable --publishable --importPath @dereekb/dbx-web/calendar --directory=packages/dbx-web/calendar
```

--------------------------------

### Generate Nx Plugin

Source: https://github.com/dereekb/dbx-components/blob/develop/setup/upgrades/v11-to-v12/v11-to-v12-upgrade-info.md

Creates a temporary Nx plugin to assist with migration steps. The plugin name 'my-plugin' is a placeholder and can be used as-is. This is part of a workaround for specific migration issues.

```nx
nx g @nx/plugin:plugin tools/my-plugin
```

--------------------------------

### Update Dockerfile for Node 18

Source: https://github.com/dereekb/dbx-components/blob/develop/setup/upgrades/v9-to-v10-upgrade-info.md

Modifies the Dockerfile to use a Node.js 18 base image and updates the Java Runtime Environment. The FROM line is changed to 'node:18.19-bookworm', and 'openjdk-11-jre-headless' is replaced with 'default-jre'.

```dockerfile
FROM node:18.19-bookworm
# ...
RUN apt-get update && apt-get install -y --no-install-recommends default-jre && rm -rf /var/lib/apt/lists/*
```

--------------------------------

### Update Dockerfile for NodeJS 22.14

Source: https://github.com/dereekb/dbx-components/blob/develop/setup/upgrades/v11-to-v12/v11-to-v12-upgrade-info.md

Updates the Dockerfile to use NodeJS version 22.14. This ensures compatibility with the project's NodeJS requirements.

```dockerfile
FROM node:22.14-bookworm
```

--------------------------------

### Configure Angular Material Light Theme

Source: https://github.com/dereekb/dbx-components/blob/develop/setup/upgrades/v9-to-v10-upgrade-info.md

Updates the Angular Material light theme definition to use a density of 0 and the custom typography configuration. This is part of the Angular Material 16 migration.

```scss
$app-mat-theme: mat.define-light-theme((
  // ...
  density: 0,
  typography: $app-typography-config
));
```

--------------------------------

### Migrate to Nx 18

Source: https://github.com/dereekb/dbx-components/blob/develop/setup/upgrades/v11-to-v12/v11-to-v12-upgrade-info.md

Initiates the migration process to Nx version 18 using the nx migrate command. This command sets up the migration.json file and modifies package.json, requiring manual verification of dependency versions.

```bash
nx migrate 18
```

--------------------------------

### Display Action Loading State

Source: https://github.com/dereekb/dbx-components/blob/develop/apps/demo/src/app/modules/doc/modules/action/container/context.component.html

This shows how to display the loading state of an action, which represents its current working progress. It includes examples of displaying the loading state value and type, and using the 'dbx-loading' component with context.

```text
Loading State: {{ action.sourceInstance.loadingState$ | async | json }}

Loading State Type: {{ action.sourceInstance.loadingStateType$ | async }}

dbx-loading with dbxActionLoadingContext

Not loading view.
```

--------------------------------

### Configure Firebase Hosting

Source: https://github.com/dereekb/dbx-components/blob/develop/NOTES.md

Updates the `firebase.json` file to configure Firebase Hosting. Specifically, it changes the `public` directory to point to the Angular application's build output (`dist/apps/demo`), ensuring that the correct files are deployed.

```json
{
  "hosting": {
    "public": "dist/apps/demo",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}
```

--------------------------------

### Update main.ts for Angular Application Configuration

Source: https://github.com/dereekb/dbx-components/blob/develop/setup/upgrades/v11-to-v12/v11-to-v12-upgrade-info.md

Illustrates the updated structure of main.ts in Angular applications, moving from root module configurations to a new app.config.ts file utilizing providers. This change centralizes application configuration.

```typescript
import { bootstrapApplication } from '@angular/platform-browser';
import { UIView } from './path/to/ui-view'; // Assuming UIView is imported
import { appConfig } from './app.config'; // Assuming appConfig is imported

bootstrapApplication(UIView, appConfig)
  .catch((err) => console.error(err));

```

--------------------------------

### Encode Firebase Admin SDK JSON

Source: https://github.com/dereekb/dbx-components/blob/develop/setup/getting-started-checklist.md

Encodes the Firebase Admin SDK JSON file into a base64 string using the `base64` command in the terminal. This encoded string is intended to be stored as a CircleCI environment variable (`FIREBASE_SECRETS_BASE64`).

```bash
cat firebase-adminsdk.json | base64
```

--------------------------------

### Iterating Over Preset Anchors in C#

Source: https://github.com/dereekb/dbx-components/blob/develop/packages/dbx-web/src/lib/interaction/filter/filter.partial.menu.component.html

This snippet demonstrates iterating over a collection of preset anchors, identified by a signal. For each anchor, its title is displayed. This uses C# syntax within a templating engine and requires a track expression for efficient list updates.

```csharp
@for (anchor of presetAnchorsSignal(); track anchor.title) { {{ anchor.title }} }
```

--------------------------------

### Decode Firebase Admin SDK JSON in CircleCI

Source: https://github.com/dereekb/dbx-components/blob/develop/setup/getting-started-checklist.md

This CircleCI run step decodes the base64 encoded Firebase Admin SDK JSON file. The decoded file is saved to `~/code/firebase-secrets.json`, which can then be used by subsequent steps for Firebase authentication.

```yaml
- run:
    name: decode firebase secrets
    command: echo ${{ FIREBASE_SECRETS_BASE64 }} | base64 -d > ~/code/firebase-secrets.json
```

--------------------------------

### Conditional Rendering with Signals in C#

Source: https://github.com/dereekb/dbx-components/blob/develop/packages/dbx-web/src/lib/extension/help/help.view.list.entry.component.html

Demonstrates conditional rendering in C# using signals. It checks if an icon signal has a value and renders it if present. It also renders a title signal unconditionally.

```csharp
@if (iconSignal(); as icon) { {{ icon }} } {{ titleSignal() }} @if (headerInjectionConfigSignal(); as headerInjectionConfig) { }
```

--------------------------------

### Update package.json engines for NodeJS 22

Source: https://github.com/dereekb/dbx-components/blob/develop/setup/upgrades/v11-to-v12/v11-to-v12-upgrade-info.md

Modifies the package.json to specify NodeJS version 22 as a requirement and updates the `@types/node` dependency to version 22.13.0.

```json
"engines": {
  "node": "22"
},
"@types/node": "22.13.0"
```

--------------------------------

### Define Angular Material Typography Configuration

Source: https://github.com/dereekb/dbx-components/blob/develop/setup/upgrades/v9-to-v10-upgrade-info.md

Defines a custom typography configuration for Angular Material. This snippet should be placed at the top of the _app.scss file after @use statements.

```scss
$app-typography-config: mat.define-typography-config(
  $font-family: 'Fira Sans'
);
```

--------------------------------

### Hint Text Display

Source: https://github.com/dereekb/dbx-components/blob/develop/packages/dbx-form/calendar/src/lib/calendar.schedule.selection.range.component.html

This snippet displays hint text, likely for user guidance, by calling the 'hint()' function. It's a straightforward way to provide contextual information.

```html
{{ hint() }}
```

--------------------------------

### Progress Button Implementation

Source: https://github.com/dereekb/dbx-components/blob/develop/apps/demo/src/app/modules/doc/modules/interaction/container/button.component.html

Shows the implementation of a progress button, likely used to indicate an ongoing process. Requires a custom view definition.

```html
<dbx-progress-button></dbx-progress-button>
```

--------------------------------

### Update CircleCI config for NodeJS 22.14

Source: https://github.com/dereekb/dbx-components/blob/develop/setup/upgrades/v11-to-v12/v11-to-v12-upgrade-info.md

Updates the CircleCI configuration file to use NodeJS version 22.14 and specifies the versions for the nx and node orbs.

```yaml
cimg/node:22.14
```

```yaml
nx: nrwl/nx@1.7.0
node: circleci/node@7.1.0
```

--------------------------------

### Basic Loading State Management with RxJS

Source: https://context7.com/dereekb/dbx-components/llms.txt

Demonstrates the fundamental usage of LoadingState for asynchronous operations. It shows how to initiate a loading state, handle successful results, and catch errors using RxJS operators like `map`, `startWith`, and `catchError`. This pattern is essential for managing UI states during data fetching.

```typescript
import {
  LoadingState,
  LoadingStateType,
  PageLoadingState,
  beginLoading,
  successResult,
  errorResult,
  isLoadingStateLoading,
  isLoadingStateFinishedLoading,
  isLoadingStateWithDefinedValue,
  isLoadingStateWithError,
  mergeLoadingStates,
  loadingStateType,
  mapLoadingStateResults
} from '@dereekb/rxjs';
import { Observable, of, catchError, map, startWith } from 'rxjs';

// Basic loading state usage
interface UserListState extends LoadingState<User[]> {}

function fetchUsers(): Observable<UserListState> {
  return userService.getUsers().pipe(
    map(users => successResult(users)),
    startWith(beginLoading<User[]>()),
    catchError(error => of(errorResult<User[]>(error)))
  );
}

// Paginated loading state
interface PaginatedUsersState extends PageLoadingState<User[]> {
  hasNextPage?: boolean;
}

function fetchUsersPage(page: number): Observable<PaginatedUsersState> {
  return userService.getUsersPage(page).pipe(
    map(response => ({
      page,
      value: response.users,
      hasNextPage: response.hasMore,
      loading: false
    })),
    startWith({ page, loading: true }),
    catchError(error => of({ page, error: { message: error.message }, loading: false }))
  );
}

// Check loading state type
const state: LoadingState<User[]> = await fetchUsers().toPromise();
const stateType: LoadingStateType = loadingStateType(state);

switch (stateType) {
  case LoadingStateType.IDLE:
    console.log('Not started');
    break;
  case LoadingStateType.LOADING:
    console.log('Loading...');
    break;
  case LoadingStateType.SUCCESS:
    console.log('Loaded:', state.value);
    break;
  case LoadingStateType.ERROR:
    console.log('Error:', state.error?.message);
    break;
}

// Merge multiple loading states
const usersState: LoadingState<User[]> = successResult([{ id: '1', name: 'John' }]);
const profilesState: LoadingState<Profile[]> = successResult([{ userId: '1', bio: 'Developer' }]);

const merged = mergeLoadingStates(usersState, profilesState, (users, profiles) => ({
  users,
  profiles,
  combined: users.map(u => ({
    ...u,
    profile: profiles.find(p => p.userId === u.id)
  }))
}));

// Transform loading state values
const transformedState = mapLoadingStateResults(usersState, {
  mapValue: (users) => users.map(u => u.name)
});

```

--------------------------------

### Button with Click Event and Working State

Source: https://github.com/dereekb/dbx-components/blob/develop/apps/demo/src/app/modules/doc/modules/interaction/container/button.component.html

Demonstrates a button that triggers an action when clicked and shows a working/loading state. Assumes a 'testClicked' function is available in the scope.

```html
<dbx-button (clicked)="testClicked()" [working]="true">Working Button</dbx-button>
```

--------------------------------

### Update Firebase Functions to Node.js 18

Source: https://github.com/dereekb/dbx-components/blob/develop/setup/upgrades/v9-to-v10-upgrade-info.md

Updates the Firebase configuration to specify Node.js 18 for Cloud Functions. This involves changing the 'engines.node' field in firebase.json to '18'.

```json
{
  // ...
  "functions": {
    // ...
    "engines": {
      "node": "18"
    }
  }
}
```

--------------------------------

### Get Timezone Abbreviation

Source: https://github.com/dereekb/dbx-components/blob/develop/apps/demo/src/app/modules/doc/modules/text/container/pipes.component.html

Shows the timezone abbreviation for a given timezone, considering the input date for daylight saving time. This pipe is crucial for accurate timezone display.

```html
{{ timezone$ | async | timezoneAbbreviation: (date$ | async) }}
{{ timezone$ | async | timezoneAbbreviation }}
{{ timezone$ | async | timezoneAbbreviation: daylightSavingsDate }}
{{ timezone$ | async | timezoneAbbreviation: nonDaylightSavingsDate }}
```

--------------------------------

### Disable Nx Legacy Cache

Source: https://github.com/dereekb/dbx-components/blob/develop/setup/upgrades/v11-to-v12/v11-to-v12-upgrade-info.md

With Nx 20, a new cache system is introduced. The legacy cache setting can be disabled by removing the `useLegacyCache` property from the `nx.json` file.

```json
{
  "useLegacyCache": false
}
```

--------------------------------

### Calculate Date Range Distance

Source: https://github.com/dereekb/dbx-components/blob/develop/apps/demo/src/app/modules/doc/modules/text/container/pipes.component.html

Formats the distance between the start and end dates within a date range. This pipe provides a concise way to represent the duration of a date range.

```html
{{ dateRange$ | async | dateRangeDistance }}
```

--------------------------------

### Fix TypeScript Import for Firebase Emulator Service

Source: https://github.com/dereekb/dbx-components/blob/develop/setup/upgrades/v11-to-v12/v11-to-v12-upgrade-info.md

Corrects a TypeScript import statement for `DbxFirebaseEmulatorService` to resolve a potential dependency loop issue. The import path is made more specific.

```typescript
import { DbxFirebaseEmulatorService } from '../firebase/firebase.emulator.service';
```

--------------------------------

### Configure TypeScript for NodeJS Types

Source: https://github.com/dereekb/dbx-components/blob/develop/setup/upgrades/v11-to-v12/v11-to-v12-upgrade-info.md

Adjusts the tsconfig.json to include NodeJS types, resolving potential TypeScript errors after a NodeJS update. This ensures that NodeJS-specific types are available during compilation.

```json
"compilerOptions": {
  "types": ["node"]
}
```

--------------------------------

### Update CircleCI Configuration

Source: https://github.com/dereekb/dbx-components/blob/develop/setup/upgrades/v9-to-v10-upgrade-info.md

Updates the CircleCI configuration file to use Node.js 18 and compatible Nx orbs. This involves modifying the 'orbs' and 'image' fields within the .circleci/config.yml file.

```yaml
orbs:
  # ...
  circleci/node:5.1.1
  nrwl/nx@1.6.2
# ...
image: cimg/node:18.19
```

--------------------------------

### Date and Time Input Controls and Presets

Source: https://github.com/dereekb/dbx-components/blob/develop/packages/dbx-form/src/lib/formly/field/value/date/datetime.field.component.html

This section details the UI elements for date and time inputs, including labels, icons for calendar and clear actions, and handling of optional time modes. It also includes rendering of preset time options.

```html
{{ dateLabel }} @if (!hideDatePicker) { calendar_today } @if (showClearButtonSignal()) { clear }
@if (!showTimeInputSignal()) { } @if (timeMode === 'optional') { Remove Time }
@for (preset of presetsSignal(); track preset) { {{ preset.label | getValue }} }

```

--------------------------------

### Configure TypeScript for Unused Locals

Source: https://github.com/dereekb/dbx-components/blob/develop/setup/upgrades/v11-to-v12/v11-to-v12-upgrade-info.md

This update modifies the `tsconfig.base.json` file to disable the `noUnusedLocals` check. This is often done in conjunction with ESLint configurations to manage how unused variables and locals are reported.

```json
{
  "compilerOptions": {
    "noUnusedLocals": false
  }
}
```

--------------------------------

### Update Parent project.json for Child Project Build (JSON)

Source: https://github.com/dereekb/dbx-components/blob/develop/NOTES.md

This JSON snippet is added to the parent project's `project.json` file to configure the build process. It ensures that the child project's build is executed as part of the parent's build command, particularly for non-Angular projects where ng-packagr might not automatically handle child builds.

```json
{
  "description": "build dbx-form-mapbox production",
  "command": "npx nx run dbx-form-mapbox:build-base:production"
}
```

--------------------------------

### Iterating and Rendering Anchor Links with Icons in Template

Source: https://github.com/dereekb/dbx-components/blob/develop/packages/dbx-web/src/lib/interaction/filter/filter.preset.menu.component.html

This snippet iterates over `presetAnchorsSignal` using `@for`. For each anchor, it conditionally renders an icon if `anchor.icon` is present, followed by the anchor's title. This is useful for creating lists of navigation items.

```html
@for (anchor of presetAnchorsSignal(); track $index) { @if (anchor.icon) { {{ anchor.icon }} } {{ anchor.title }} }
```

--------------------------------

### Fix TypeScript Import for Utility Functions

Source: https://github.com/dereekb/dbx-components/blob/develop/setup/upgrades/v11-to-v12/v11-to-v12-upgrade-info.md

Resolves a TypeScript import error by changing the import path for utility functions like `Maybe` and `pushArrayItemsIntoArray` to use the aliased path `@dereekb/util`.

```typescript
import { Maybe, pushArrayItemsIntoArray } from '@dereekb/util';
```

--------------------------------

### Conditional Customization UI

Source: https://github.com/dereekb/dbx-components/blob/develop/packages/dbx-form/calendar/src/lib/calendar.schedule.selection.range.component.html

This snippet appears to be a placeholder for conditional UI elements related to customization, triggered by 'showCustomize()'. It currently contains no visible content when active.

```html
@if (showCustomize()) {

}
```

--------------------------------

### Update Angular Material Typography Configuration

Source: https://github.com/dereekb/dbx-components/blob/develop/setup/upgrades/v11-to-v12/v11-to-v12-upgrade-info.md

Adjusts the Angular Material typography configuration from `mat.define-typography-config` to `mat.m2-define-typography-config` to accommodate Material v3. This change is handled by the Nx migration but is noted for awareness.

```scss
$app-typography-config: mat.m2-define-typography-config
```

--------------------------------

### Enable Cloud Billing API

Source: https://github.com/dereekb/dbx-components/blob/develop/setup/upgrades/v11-to-v12/v11-to-v12-upgrade-info.md

Instructions to enable the Cloud Billing API for a Google Cloud project. This is often required when encountering errors related to billing information access. The process involves navigating to the Google Cloud Console and enabling the specified API.

```text
Error: Request to https://cloudbilling.googleapis.com/v1/projects/dereekb-components/billingInfo had HTTP Error: 403, Cloud Billing API has not been used in project 124286307516 before or it is disabled. Enable it by visiting https://console.developers.google.com/apis/api/cloudbilling.googleapis.com/overview?project=124286307516 then retry. If you enabled this API recently, wait a few minutes for the action to propagate to our systems and retry.
https://console.cloud.google.com/apis/library/cloudbilling.googleapis.com?project=<YOUR_PROJECT_ID>
```

--------------------------------

### Button Wrap Group Utility

Source: https://github.com/dereekb/dbx-components/blob/develop/apps/demo/src/app/modules/doc/modules/interaction/container/button.component.html

Demonstrates the '.dbx-button-wrap-group' class, which allows buttons to wrap to the next line and maintain spacing between them.

```html
<div class="dbx-button-wrap-group">
  <dbx-button>Button 1</dbx-button>
  <dbx-button>Button 2</dbx-button>
  <dbx-button>Button 3</dbx-button>
</div>
```

--------------------------------

### Firebase.json Configuration for Functions Source and Runtime

Source: https://github.com/dereekb/dbx-components/blob/develop/NOTES.md

Updates the `firebase.json` file to specify the source directory for Firebase Functions and the runtime environment. This ensures Firebase deploys the correct build output from the NestJS application.

```json
"functions": {
    "source": "dist/apps/demo-api",
    "runtime": "nodejs16",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
```

--------------------------------

### Button with Color Styling

Source: https://github.com/dereekb/dbx-components/blob/develop/apps/demo/src/app/modules/doc/modules/interaction/container/button.component.html

Explains how to apply custom colors to buttons using predefined dbx color CSS classes like 'dbx-primary' or 'dbx-warn'.

```html
<dbx-button class="dbx-primary">Primary Button</dbx-button>
<dbx-button class="dbx-warn">Warn Button</dbx-button>
```

--------------------------------

### Displaying Button Text Signal in C#

Source: https://github.com/dereekb/dbx-components/blob/develop/packages/dbx-web/src/lib/interaction/filter/filter.partial.menu.component.html

This snippet shows how to display the value of a button text signal. It uses C# syntax within a templating engine. The output is the current value of the buttonTextSignal.

```csharp
{{ buttonTextSignal() }}
```

--------------------------------

### Update Child project.json build-base Configuration (JSON)

Source: https://github.com/dereekb/dbx-components/blob/develop/NOTES.md

This JSON snippet modifies the `build-base` configuration within a child project's `project.json`. Adding `"dependsOn": []` prevents potential build loops by explicitly stating that this build step has no further build dependencies within the same project, assuming it's built after its parent.

```json
  "dependsOn": []

```