@odx/angular 6.0.0 → 6.1.0

package/fesm2022/odx-angular-rxjs.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"odx-angular-rxjs.mjs","sources":["../../../../libs/angular/rxjs/src/lib/delay-until.ts","../../../../libs/angular/rxjs/src/lib/form-query-list.ts","../../../../libs/angular/rxjs/src/lib/from-element-mutation.ts","../../../../libs/angular/rxjs/src/lib/from-element-resize.ts","../../../../libs/angular/rxjs/src/lib/from-events.ts","../../../../libs/angular/rxjs/src/odx-angular-rxjs.ts"],"sourcesContent":["import { map, MonoTypeOperatorFunction, Observable, switchMap, takeUntil, timer } from 'rxjs';\n\nexport function delayUntil<T>(delay: () => number, notifier: Observable<unknown>): MonoTypeOperatorFunction<T> {\n  return (source$: Observable<T>) =>\n    source$.pipe(\n      switchMap((value: T) =>\n        timer(delay()).pipe(\n          map(() => value),\n          takeUntil(notifier)\n        )\n      )\n    );\n}\n","import { QueryList } from '@angular/core';\nimport { Observable, startWith } from 'rxjs';\n\nexport function fromQueryList<T>(queryList: QueryList<T>): Observable<QueryList<T>> {\n  return queryList.changes.pipe(startWith(queryList));\n}\n","import { createMutationObserver } from '@odx/angular/utils';\nimport { Observable } from 'rxjs';\n\nexport function fromElementMutation$(element: Element, options: MutationObserverInit): Observable<MutationRecord> {\n  return new Observable<MutationRecord>((observer) => {\n    const mutationObserver = createMutationObserver(observer, (events) => events.length > 0);\n    observer.add(() => mutationObserver.disconnect());\n    mutationObserver.observe(element, options);\n  });\n}\n","import { createResizeObserver } from '@odx/angular/utils';\nimport { debounceTime, Observable } from 'rxjs';\n\nexport function fromElementResize$(element: Element, debounceDuration = 50): Observable<ResizeObserverEntry[]> {\n  return new Observable<ResizeObserverEntry[]>((observer) => {\n    const resizeObserver = createResizeObserver((events) => {\n      if (events.length > 0) {\n        observer.next(events);\n      }\n    });\n    observer.add(() => resizeObserver.disconnect());\n    resizeObserver.observe(element);\n  }).pipe(debounceTime(debounceDuration));\n}\n","import { fromEvent, merge, Observable } from 'rxjs';\nimport { HasEventTargetAddRemove } from 'rxjs/internal/observable/fromEvent';\n\nexport function fromEvents<T>(target: HasEventTargetAddRemove<T> | HasEventTargetAddRemove<T>[], ...events: string[]): Observable<T> {\n  return merge(...events.map((event) => fromEvent(target, event)));\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAEgB,SAAA,UAAU,CAAI,KAAmB,EAAE,QAA6B,EAAA;AAC9E,IAAA,OAAO,CAAC,OAAsB,KAC5B,OAAO,CAAC,IAAI,CACV,SAAS,CAAC,CAAC,KAAQ,KACjB,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,IAAI,CACjB,GAAG,CAAC,MAAM,KAAK,CAAC,EAChB,SAAS,CAAC,QAAQ,CAAC,CACpB,CACF,CACF,CAAC;AACN;;ACTM,SAAU,aAAa,CAAI,SAAuB,EAAA;IACtD,OAAO,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;AACtD;;ACFgB,SAAA,oBAAoB,CAAC,OAAgB,EAAE,OAA6B,EAAA;AAClF,IAAA,OAAO,IAAI,UAAU,CAAiB,CAAC,QAAQ,KAAI;AACjD,QAAA,MAAM,gBAAgB,GAAG,sBAAsB,CAAC,QAAQ,EAAE,CAAC,MAAM,KAAK,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACzF,QAAQ,CAAC,GAAG,CAAC,MAAM,gBAAgB,CAAC,UAAU,EAAE,CAAC,CAAC;AAClD,QAAA,gBAAgB,CAAC,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;AAC7C,KAAC,CAAC,CAAC;AACL;;SCNgB,kBAAkB,CAAC,OAAgB,EAAE,gBAAgB,GAAG,EAAE,EAAA;AACxE,IAAA,OAAO,IAAI,UAAU,CAAwB,CAAC,QAAQ,KAAI;AACxD,QAAA,MAAM,cAAc,GAAG,oBAAoB,CAAC,CAAC,MAAM,KAAI;AACrD,YAAA,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;AACrB,gBAAA,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;AACvB,aAAA;AACH,SAAC,CAAC,CAAC;QACH,QAAQ,CAAC,GAAG,CAAC,MAAM,cAAc,CAAC,UAAU,EAAE,CAAC,CAAC;AAChD,QAAA,cAAc,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;KACjC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAC,CAAC;AAC1C;;SCVgB,UAAU,CAAI,MAAiE,EAAE,GAAG,MAAgB,EAAA;IAClH,OAAO,KAAK,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,KAAK,SAAS,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;AACnE;;ACLA;;AAEG;;;;"}
+{"version":3,"file":"odx-angular-rxjs.mjs","sources":["../../../../libs/angular/rxjs/src/lib/delay-until.ts","../../../../libs/angular/rxjs/src/lib/from-element-mutation.ts","../../../../libs/angular/rxjs/src/lib/from-element-resize.ts","../../../../libs/angular/rxjs/src/lib/from-events.ts","../../../../libs/angular/rxjs/src/lib/from-query-list.ts","../../../../libs/angular/rxjs/src/odx-angular-rxjs.ts"],"sourcesContent":["import { map, MonoTypeOperatorFunction, Observable, switchMap, takeUntil, timer } from 'rxjs';\n\n/**\n * Delays the emission of each value from the source Observable by a time span determined by the `delay` function.\n * If the `notifier` Observable emits before the delay expires, the delayed emission is cancelled.\n *\n * This operator is useful for postponing the observable emissions until certain conditions are met,\n * represented by the passage of time defined by `delay`. It also allows for a way to preemptively\n * cancel the delay in response to another observable's emission.\n *\n * @template T The type of items emitted by the source Observable.\n * @param {() => number} delay A function that returns the delay (in milliseconds) before the source Observable's values are emitted.\n * @param {Observable<unknown>} notifier An Observable that cancels the delay when it emits.\n * @returns {MonoTypeOperatorFunction<T>} An Observable that emits the source Observable's items with a delay if not cancelled.\n * @example\n * ```ts\n * // Delay each number emission by 1 second, unless the 'cancel' button is clicked.\n * const delayedNumbers$ = of(1, 2, 3).pipe(\n *   delayUntil(() => 1000, fromEvent(cancelButton, 'click'))\n * );\n *\n * delayedNumbers$.subscribe(console.log);\n * ```\n */\nexport function delayUntil<T>(delay: () => number, notifier: Observable<unknown>): MonoTypeOperatorFunction<T> {\n  return (source$: Observable<T>) =>\n    source$.pipe(\n      switchMap((value: T) =>\n        timer(delay()).pipe(\n          map(() => value),\n          takeUntil(notifier),\n        ),\n      ),\n    );\n}\n","import { createMutationObserver } from '@odx/angular/utils';\nimport { Observable } from 'rxjs';\n\n/**\n * Creates an RxJS Observable that emits mutation records for changes in a DOM element's attributes,\n * child list, and subtree. It uses the `MutationObserver` Web API to observe mutations on the specified\n * element according to the options provided.\n *\n * @param {Element} element The DOM element to observe for mutations.\n * @param {MutationObserverInit} options An object that specifies which DOM mutations should be reported.\n * Options include attributes, childList, subtree, attributeOldValue, characterData, characterDataOldValue,\n * and attributeFilter.\n * @returns {Observable<MutationRecord>} An Observable that emits a `MutationRecord` each time a mutation\n * matching the specified options occurs in the observed element.\n * @example\n * ```ts\n * // Observing changes to the child list of an element\n * const element = document.getElementById('my-element');\n * const mutationOptions = { childList: true };\n *\n * fromElementMutation$(element, mutationOptions).subscribe((mutation) => console.log('Mutation detected:', mutation));\n * ```\n * Note: Always remember to unsubscribe from the observable to prevent memory leaks.\n */\nexport function fromElementMutation$(element: Element, options: MutationObserverInit): Observable<MutationRecord> {\n  return new Observable<MutationRecord>((observer) => {\n    const mutationObserver = createMutationObserver(observer, (events) => events.length > 0);\n    observer.add(() => mutationObserver.disconnect());\n    mutationObserver.observe(element, options);\n  });\n}\n","import { createResizeObserver } from '@odx/angular/utils';\nimport { debounceTime, Observable } from 'rxjs';\n\n/**\n * Creates an RxJS Observable that emits an array of `ResizeObserverEntry` objects whenever\n * the target element's size changes. This function provides a reactive way to observe\n * and respond to changes in an element's dimensions, using the `ResizeObserver` Web API.\n *\n * The observable debounces the emitted values to improve performance and reduce the frequency\n * of change detection runs in Angular applications. The debounce time can be adjusted via\n * the `debounceDuration` parameter.\n *\n * @param {Element} element The DOM element to observe for size changes.\n * @param {number} [debounceDuration=50] The time, in milliseconds, to debounce the emitted\n * values. Defaults to 50ms.\n * @returns {Observable<ResizeObserverEntry[]>} An Observable that emits the resize events\n * for the observed element. Each emission is an array of `ResizeObserverEntry` objects, one\n * for each observed element that experienced a resize.\n * @example\n * ```ts\n * // Observing resize events of an element with a 100ms debounce duration\n * const element = document.getElementById('resizable-element');\n * fromElementResize$(element, 100).subscribe((entries) => console.log('Element resized:', entries));\n * ```\n *\n * Always unsubscribe from the observable to clean up resources and prevent memory leaks.\n */\nexport function fromElementResize$(element: Element, debounceDuration = 50): Observable<ResizeObserverEntry[]> {\n  return new Observable<ResizeObserverEntry[]>((observer) => {\n    const resizeObserver = createResizeObserver((events) => {\n      if (events.length > 0) {\n        observer.next(events);\n      }\n    });\n    observer.add(() => resizeObserver.disconnect());\n    resizeObserver.observe(element);\n  }).pipe(debounceTime(debounceDuration));\n}\n","import { fromEvent, merge, Observable } from 'rxjs';\nimport { HasEventTargetAddRemove } from 'rxjs/internal/observable/fromEvent';\n\n/**\n * Creates an Observable that emits events of a specific type from one or multiple event targets.\n * It listens to multiple event types on the given target(s) and emits the events through a single\n * Observable stream, simplifying the handling of related event types.\n *\n * @template T The event object type that the Observable will emit.\n * @param {HasEventTargetAddRemove<T> | HasEventTargetAddRemove<T>[]} target The DOM element(s) or event target(s) to listen on.\n * @param {...string[]} events The names of the events to listen for on the target(s).\n * @returns {Observable<T>} An Observable that emits an event each time one of the specified events occurs on the given target(s).\n *\n * @example\n * ```ts\n * // Listen to both 'click' and 'keyup' events on document\n * fromEvents(document, 'click', 'keyup').subscribe(event => {\n *   console.log('Event occurred:', event);\n * });\n *\n * // Listen to 'mousemove' event on multiple elements\n * const elements = [document.getElementById('first'), document.getElementById('second')];\n * fromEvents(elements, 'mousemove').subscribe(event => {\n *   console.log('Mouse moved over:', event.target);\n * });\n * ```\n */\nexport function fromEvents<T>(target: HasEventTargetAddRemove<T> | HasEventTargetAddRemove<T>[], ...events: string[]): Observable<T> {\n  return merge(...events.map((event) => fromEvent(target, event)));\n}\n","import { QueryList } from '@angular/core';\nimport { Observable, startWith } from 'rxjs';\n\n/**\n * Creates an Observable from an Angular QueryList. The Observable emits the initial state\n * of the QueryList and continues to emit updates every time the QueryList changes.\n * This utility function is useful for integrating Angular's QueryList changes into\n * the RxJS reactive data flow, allowing developers to apply RxJS operators and\n * subscriptions to respond to QueryList updates.\n *\n * @template T The type of elements contained within the QueryList.\n * @param {QueryList<T>} queryList The QueryList instance to observe.\n * @returns {Observable<QueryList<T>>} An Observable that emits the current state of the QueryList\n * and updates whenever the QueryList changes.\n * @example\n * ```ts\n * // Assuming 'items' is a QueryList of component instances or DOM elements\n * fromQueryList(items).subscribe(queryList => {\n *   console.log('QueryList changed:', queryList);\n * });\n * ```\n */\nexport function fromQueryList<T>(queryList: QueryList<T>): Observable<QueryList<T>> {\n  return queryList.changes.pipe(startWith(queryList));\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAEA;;;;;;;;;;;;;;;;;;;;;AAqBG;AACa,SAAA,UAAU,CAAI,KAAmB,EAAE,QAA6B,EAAA;AAC9E,IAAA,OAAO,CAAC,OAAsB,KAC5B,OAAO,CAAC,IAAI,CACV,SAAS,CAAC,CAAC,KAAQ,KACjB,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,IAAI,CACjB,GAAG,CAAC,MAAM,KAAK,CAAC,EAChB,SAAS,CAAC,QAAQ,CAAC,CACpB,CACF,CACF,CAAC;AACN;;AC/BA;;;;;;;;;;;;;;;;;;;;AAoBG;AACa,SAAA,oBAAoB,CAAC,OAAgB,EAAE,OAA6B,EAAA;AAClF,IAAA,OAAO,IAAI,UAAU,CAAiB,CAAC,QAAQ,KAAI;AACjD,QAAA,MAAM,gBAAgB,GAAG,sBAAsB,CAAC,QAAQ,EAAE,CAAC,MAAM,KAAK,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACzF,QAAQ,CAAC,GAAG,CAAC,MAAM,gBAAgB,CAAC,UAAU,EAAE,CAAC,CAAC;AAClD,QAAA,gBAAgB,CAAC,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;AAC7C,KAAC,CAAC,CAAC;AACL;;AC3BA;;;;;;;;;;;;;;;;;;;;;;;AAuBG;SACa,kBAAkB,CAAC,OAAgB,EAAE,gBAAgB,GAAG,EAAE,EAAA;AACxE,IAAA,OAAO,IAAI,UAAU,CAAwB,CAAC,QAAQ,KAAI;AACxD,QAAA,MAAM,cAAc,GAAG,oBAAoB,CAAC,CAAC,MAAM,KAAI;AACrD,YAAA,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;AACrB,gBAAA,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;AACvB,aAAA;AACH,SAAC,CAAC,CAAC;QACH,QAAQ,CAAC,GAAG,CAAC,MAAM,cAAc,CAAC,UAAU,EAAE,CAAC,CAAC;AAChD,QAAA,cAAc,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;KACjC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAC,CAAC;AAC1C;;AClCA;;;;;;;;;;;;;;;;;;;;;;;AAuBG;SACa,UAAU,CAAI,MAAiE,EAAE,GAAG,MAAgB,EAAA;IAClH,OAAO,KAAK,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,KAAK,SAAS,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;AACnE;;AC1BA;;;;;;;;;;;;;;;;;;AAkBG;AACG,SAAU,aAAa,CAAI,SAAuB,EAAA;IACtD,OAAO,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;AACtD;;ACxBA;;AAEG;;;;"}

package/fesm2022/odx-angular-sdk.mjs

@@ -2,10 +2,60 @@ import { InjectionToken, inject } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { CacheStorageClient } from '@odx/angular/utils';
 
+/**
+ * Creates a loader function for fetching application environment data over HTTP and caching it.
+ * Utilizes `CacheStorageClient` for caching the fetched data to optimize performance and reduce network load.
+ *
+ * @template Data The type of the data expected from the HTTP request.
+ * @param {Function} handler - A function that processes the fetched data and returns a promise resolving to the desired environment data format.
+ * @returns {ApplicationEnvironmentLoader<Data, Parameters<CacheStorageClient['request']>>} A loader function that fetches, caches, and processes environment data.
+ * @example
+ * const environmentLoader = createHttpApplicationEnvironmentLoader(async (dto) => {
+ *   return { apiEndpoint: dto.apiEndpoint, featureFlags: dto.featureFlags };
+ * });
+ */
 function createHttpApplicationEnvironmentLoader(handler) {
     const cache = new CacheStorageClient('@odx/angular/sdk::ApplicationEnvironment');
     return (...args) => cache.request(...args).then((dto) => handler(dto));
 }
+/**
+ * The application environment module can be used to load environment data before application startup,
+ * that can be used to load environment variables from an external URL.
+ *
+ * @template Data The type of the environment data.
+ * @template Params The types of the parameters accepted by the loader function.
+ * @param {ApplicationEnvironmentLoader<Data, Params>} loader - A loader function that asynchronously loads the environment data.
+ * @returns An object containing utilities for working with the application environment, including the InjectionToken
+ *          and functions for loading and bootstrapping the application with the environment.
+ * @example
+ * To add an application environment to your Angular application, follow the following steps:
+ * 1. Create the application environment with your loader:
+ * ```ts
+ * import { createApplicationEnvironment, createHttpApplicationEnvironmentLoader } from '@odx/angular/sdk';
+ * import { z } from 'zod';
+ *
+ * export const ApplicationConfigSchema = z.object({
+ *   environment: z.enum(['dev', 'stage', 'prod']),
+ *   appName: z.string().default('App'),
+ * });
+ *
+ * const httpEnvironmentLoader = createHttpApplicationEnvironmentLoader((res) => res.json().then(ApplicationConfigSchema.parse));
+ * export const { injectApplicationEnvironment, bootstrapApplicationWithEnvironment } = createApplicationEnvironment(httpEnvironmentLoader);
+ * ```
+ * This example creates an HTTP environment loader which parses the response as JSON and validate it against a schema
+ *
+ * 2. Provide the application environment:
+ * ```ts
+ * bootstrapApplicationWithEnvironment(['assets/config.json'], AppComponent, { providers: [] });
+ * ```
+ *
+ * 3. Use the application environment via DI
+ * ```ts
+ * class MyService {
+ *   private readonly environment = injectApplicationEnvironment();
+ * }
+ * ```
+ */
 function createApplicationEnvironment(loader) {
     let environment;
     const APPLICATION_ENVIRONMENT = new InjectionToken('@odx/angular/sdk::ApplicationEnvironment', {

package/fesm2022/odx-angular-sdk.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"odx-angular-sdk.mjs","sources":["../../../../libs/angular/sdk/src/lib/application-environment.ts","../../../../libs/angular/sdk/src/odx-angular-sdk.ts"],"sourcesContent":["import { ApplicationRef, inject, InjectionToken } from '@angular/core';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { CacheStorageClient } from '@odx/angular/utils';\n\nexport type ApplicationEnvironmentLoader<EnvironmentData, Params extends unknown[]> = (...args: Params) => Promise<EnvironmentData>;\n\nexport function createHttpApplicationEnvironmentLoader<Data>(\n  handler: (dto: unknown) => Promise<Data>,\n): ApplicationEnvironmentLoader<Data, Parameters<CacheStorageClient['request']>> {\n  const cache = new CacheStorageClient('@odx/angular/sdk::ApplicationEnvironment');\n\n  return (...args: Parameters<CacheStorageClient['request']>) => cache.request<unknown>(...args).then((dto) => handler(dto));\n}\n\nexport function createApplicationEnvironment<Data, Params extends unknown[]>(loader: ApplicationEnvironmentLoader<Data, Params>) {\n  let environment: Data;\n  const APPLICATION_ENVIRONMENT = new InjectionToken<Data>('@odx/angular/sdk::ApplicationEnvironment', {\n    providedIn: 'root',\n    factory: () => environment as Data,\n  });\n\n  function injectApplicationEnvironment(): Data {\n    return inject(APPLICATION_ENVIRONMENT);\n  }\n\n  async function loadApplicationEnvironment(...args: Parameters<typeof loader>): Promise<Data> {\n    environment = await loader(...args);\n    if (!environment) {\n      throw new Error('[@odx/angular/sdk] Failed load application environment');\n    }\n    return environment;\n  }\n\n  async function bootstrapApplicationWithEnvironment(\n    params: Parameters<typeof loader>,\n    ...args: Parameters<typeof bootstrapApplication>\n  ): Promise<ApplicationRef> {\n    await loadApplicationEnvironment(...params);\n\n    return bootstrapApplication(...args);\n  }\n\n  return {\n    APPLICATION_ENVIRONMENT,\n    injectApplicationEnvironment,\n    bootstrapApplicationWithEnvironment,\n    loadApplicationEnvironment,\n  };\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAMM,SAAU,sCAAsC,CACpD,OAAwC,EAAA;AAExC,IAAA,MAAM,KAAK,GAAG,IAAI,kBAAkB,CAAC,0CAA0C,CAAC,CAAC;IAEjF,OAAO,CAAC,GAAG,IAA+C,KAAK,KAAK,CAAC,OAAO,CAAU,GAAG,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;AAC7H,CAAC;AAEK,SAAU,4BAA4B,CAAiC,MAAkD,EAAA;AAC7H,IAAA,IAAI,WAAiB,CAAC;AACtB,IAAA,MAAM,uBAAuB,GAAG,IAAI,cAAc,CAAO,0CAA0C,EAAE;AACnG,QAAA,UAAU,EAAE,MAAM;AAClB,QAAA,OAAO,EAAE,MAAM,WAAmB;AACnC,KAAA,CAAC,CAAC;AAEH,IAAA,SAAS,4BAA4B,GAAA;AACnC,QAAA,OAAO,MAAM,CAAC,uBAAuB,CAAC,CAAC;KACxC;AAED,IAAA,eAAe,0BAA0B,CAAC,GAAG,IAA+B,EAAA;AAC1E,QAAA,WAAW,GAAG,MAAM,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC;QACpC,IAAI,CAAC,WAAW,EAAE;AAChB,YAAA,MAAM,IAAI,KAAK,CAAC,wDAAwD,CAAC,CAAC;AAC3E,SAAA;AACD,QAAA,OAAO,WAAW,CAAC;KACpB;AAED,IAAA,eAAe,mCAAmC,CAChD,MAAiC,EACjC,GAAG,IAA6C,EAAA;AAEhD,QAAA,MAAM,0BAA0B,CAAC,GAAG,MAAM,CAAC,CAAC;AAE5C,QAAA,OAAO,oBAAoB,CAAC,GAAG,IAAI,CAAC,CAAC;KACtC;IAED,OAAO;QACL,uBAAuB;QACvB,4BAA4B;QAC5B,mCAAmC;QACnC,0BAA0B;KAC3B,CAAC;AACJ;;AChDA;;AAEG;;;;"}
+{"version":3,"file":"odx-angular-sdk.mjs","sources":["../../../../libs/angular/sdk/src/lib/application-environment.ts","../../../../libs/angular/sdk/src/odx-angular-sdk.ts"],"sourcesContent":["import { ApplicationRef, inject, InjectionToken } from '@angular/core';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { CacheStorageClient } from '@odx/angular/utils';\n\n/**\n * A function type definition for loading environment data for an application.\n * It's a generic loader function that accepts parameters and returns a Promise of environment data.\n *\n * @template EnvironmentData The type of the environment data to be loaded.\n * @template Params The types of the parameters accepted by the loader function.\n * @param {...Params} args - Parameters passed to the loader function.\n * @returns {Promise<EnvironmentData>} A promise resolving to the loaded environment data.\n */\nexport type ApplicationEnvironmentLoader<EnvironmentData, Params extends unknown[]> = (...args: Params) => Promise<EnvironmentData>;\n\n/**\n * Creates a loader function for fetching application environment data over HTTP and caching it.\n * Utilizes `CacheStorageClient` for caching the fetched data to optimize performance and reduce network load.\n *\n * @template Data The type of the data expected from the HTTP request.\n * @param {Function} handler - A function that processes the fetched data and returns a promise resolving to the desired environment data format.\n * @returns {ApplicationEnvironmentLoader<Data, Parameters<CacheStorageClient['request']>>} A loader function that fetches, caches, and processes environment data.\n * @example\n * const environmentLoader = createHttpApplicationEnvironmentLoader(async (dto) => {\n *   return { apiEndpoint: dto.apiEndpoint, featureFlags: dto.featureFlags };\n * });\n */\nexport function createHttpApplicationEnvironmentLoader<Data>(\n  handler: (dto: unknown) => Promise<Data>,\n): ApplicationEnvironmentLoader<Data, Parameters<CacheStorageClient['request']>> {\n  const cache = new CacheStorageClient('@odx/angular/sdk::ApplicationEnvironment');\n\n  return (...args: Parameters<CacheStorageClient['request']>) => cache.request<unknown>(...args).then((dto) => handler(dto));\n}\n\n/**\n * The application environment module can be used to load environment data before application startup,\n * that can be used to load environment variables from an external URL.\n *\n * @template Data The type of the environment data.\n * @template Params The types of the parameters accepted by the loader function.\n * @param {ApplicationEnvironmentLoader<Data, Params>} loader - A loader function that asynchronously loads the environment data.\n * @returns An object containing utilities for working with the application environment, including the InjectionToken\n *          and functions for loading and bootstrapping the application with the environment.\n * @example\n * To add an application environment to your Angular application, follow the following steps:\n * 1. Create the application environment with your loader:\n * ```ts\n * import { createApplicationEnvironment, createHttpApplicationEnvironmentLoader } from '@odx/angular/sdk';\n * import { z } from 'zod';\n *\n * export const ApplicationConfigSchema = z.object({\n *   environment: z.enum(['dev', 'stage', 'prod']),\n *   appName: z.string().default('App'),\n * });\n *\n * const httpEnvironmentLoader = createHttpApplicationEnvironmentLoader((res) => res.json().then(ApplicationConfigSchema.parse));\n * export const { injectApplicationEnvironment, bootstrapApplicationWithEnvironment } = createApplicationEnvironment(httpEnvironmentLoader);\n * ```\n * This example creates an HTTP environment loader which parses the response as JSON and validate it against a schema\n *\n * 2. Provide the application environment:\n * ```ts\n * bootstrapApplicationWithEnvironment(['assets/config.json'], AppComponent, { providers: [] });\n * ```\n *\n * 3. Use the application environment via DI\n * ```ts\n * class MyService {\n *   private readonly environment = injectApplicationEnvironment();\n * }\n * ```\n */\nexport function createApplicationEnvironment<Data, Params extends unknown[]>(loader: ApplicationEnvironmentLoader<Data, Params>) {\n  let environment: Data;\n  const APPLICATION_ENVIRONMENT = new InjectionToken<Data>('@odx/angular/sdk::ApplicationEnvironment', {\n    providedIn: 'root',\n    factory: () => environment as Data,\n  });\n\n  function injectApplicationEnvironment(): Data {\n    return inject(APPLICATION_ENVIRONMENT);\n  }\n\n  async function loadApplicationEnvironment(...args: Parameters<typeof loader>): Promise<Data> {\n    environment = await loader(...args);\n    if (!environment) {\n      throw new Error('[@odx/angular/sdk] Failed load application environment');\n    }\n    return environment;\n  }\n\n  async function bootstrapApplicationWithEnvironment(\n    params: Parameters<typeof loader>,\n    ...args: Parameters<typeof bootstrapApplication>\n  ): Promise<ApplicationRef> {\n    await loadApplicationEnvironment(...params);\n\n    return bootstrapApplication(...args);\n  }\n\n  return {\n    APPLICATION_ENVIRONMENT,\n    injectApplicationEnvironment,\n    bootstrapApplicationWithEnvironment,\n    loadApplicationEnvironment,\n  };\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAeA;;;;;;;;;;;AAWG;AACG,SAAU,sCAAsC,CACpD,OAAwC,EAAA;AAExC,IAAA,MAAM,KAAK,GAAG,IAAI,kBAAkB,CAAC,0CAA0C,CAAC,CAAC;IAEjF,OAAO,CAAC,GAAG,IAA+C,KAAK,KAAK,CAAC,OAAO,CAAU,GAAG,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;AAC7H,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCG;AACG,SAAU,4BAA4B,CAAiC,MAAkD,EAAA;AAC7H,IAAA,IAAI,WAAiB,CAAC;AACtB,IAAA,MAAM,uBAAuB,GAAG,IAAI,cAAc,CAAO,0CAA0C,EAAE;AACnG,QAAA,UAAU,EAAE,MAAM;AAClB,QAAA,OAAO,EAAE,MAAM,WAAmB;AACnC,KAAA,CAAC,CAAC;AAEH,IAAA,SAAS,4BAA4B,GAAA;AACnC,QAAA,OAAO,MAAM,CAAC,uBAAuB,CAAC,CAAC;KACxC;AAED,IAAA,eAAe,0BAA0B,CAAC,GAAG,IAA+B,EAAA;AAC1E,QAAA,WAAW,GAAG,MAAM,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC;QACpC,IAAI,CAAC,WAAW,EAAE;AAChB,YAAA,MAAM,IAAI,KAAK,CAAC,wDAAwD,CAAC,CAAC;AAC3E,SAAA;AACD,QAAA,OAAO,WAAW,CAAC;KACpB;AAED,IAAA,eAAe,mCAAmC,CAChD,MAAiC,EACjC,GAAG,IAA6C,EAAA;AAEhD,QAAA,MAAM,0BAA0B,CAAC,GAAG,MAAM,CAAC,CAAC;AAE5C,QAAA,OAAO,oBAAoB,CAAC,GAAG,IAAI,CAAC,CAAC;KACtC;IAED,OAAO;QACL,uBAAuB;QACvB,4BAA4B;QAC5B,mCAAmC;QACnC,0BAA0B;KAC3B,CAAC;AACJ;;AC3GA;;AAEG;;;;"}

package/fesm2022/odx-angular-theming.mjs

@@ -5,6 +5,24 @@ import { DOCUMENT } from '@angular/common';
 import { WindowRef } from '@odx/angular';
 import { BehaviorSubject, distinctUntilChanged, shareReplay } from 'rxjs';
 
+/**
+ * Determines whether the user's system preferences indicate a preference for dark themes.
+ * This is achieved by querying the '(prefers-color-scheme: dark)' media feature, which reflects
+ * the user's preference for a light or dark color scheme in their operating system's UI.
+ *
+ * @param {Window} view - The window object, typically `window`, from which to access the matchMedia method.
+ * @returns {boolean} `true` if the user prefers a dark theme, otherwise `false`.
+ *
+ * @example
+ * Example usage in a web application to toggle themes:
+ * ```ts
+ * if (prefersDarkTheme(window)) {
+ *   document.body.classList.add('dark-theme');
+ * } else {
+ *   document.body.classList.remove('dark-theme');
+ * }
+ * ```
+ */
 function prefersDarkTheme(view) {
     return !!view.matchMedia?.('(prefers-color-scheme: dark)')?.matches;
 }
@@ -15,11 +33,57 @@ const Theme = {
 };
 const availableThemes = Object.values(Theme);
 
+/**
+ * Resolves the specified theme by checking if it exists in the predefined list of available themes.
+ * This function ensures that only valid themes are used in the application, providing a safeguard
+ * against invalid theme names and facilitating the dynamic application of themes.
+ *
+ * @param {string | null} [theme] - The name of the theme to resolve. It's optional and can be `null`.
+ * @returns {Theme | null} - Returns the resolved `Theme` object if the theme is found within the list of `availableThemes`;
+ * otherwise, returns `null` to indicate the theme is not recognized or available.
+ *
+ * @example
+ * ```ts
+ * // Assuming 'dark' and 'light' are in the availableThemes array
+ * console.log(resolveTheme('dark')); // Outputs the 'dark' Theme object
+ * console.log(resolveTheme('unknown')); // Outputs null
+ *
+ * // Using resolveTheme to apply a user-selected theme
+ * const userSelectedTheme = getUserSelectedTheme(); // This function gets the user's theme choice
+ * const themeToApply = resolveTheme(userSelectedTheme);
+ * if (themeToApply) {
+ *   applyTheme(themeToApply); // This function applies the resolved theme to the application
+ * } else {
+ *   console.warn('Selected theme is not available.');
+ * }
+ * ```
+ */
 function resolveTheme(theme) {
     return availableThemes.find((t) => t === theme) ?? null;
 }
 
+/**
+ * The key used to store the selected theme in `Storage`.
+ * This constant ensures consistent access to the theme setting across the application.
+ */
 const THEME_STORAGE_NAME = '@odx/angular/theming:SelectedTheme';
+/**
+ * Saves the specified theme to storage. This function abstracts the storage interaction,
+ * providing a fail-safe mechanism to avoid exceptions if the storage is not available.
+ *
+ * @param {Storage | null | undefined} storage - The storage mechanism to use, typically `localStorage` or `sessionStorage`.
+ * @param {Theme} theme - The theme to save. Should be a value that is recognized by the application's theming system.
+ * @throws Will silently catch and ignore any exceptions caused by storage limitations or permissions.
+ *
+ * @example
+ * ```ts
+ * // Example usage with localStorage
+ * saveTheme(localStorage, 'dark');
+ *
+ * // Using sessionStorage instead
+ * saveTheme(sessionStorage, 'light');
+ * ```
+ */
 function saveTheme(storage, theme) {
     try {
         storage?.setItem(THEME_STORAGE_NAME, theme);
@@ -28,6 +92,27 @@ function saveTheme(storage, theme) {
         //
     }
 }
+/**
+ * Reads the theme from storage, attempting to resolve it to a valid application theme.
+ * If the theme cannot be found or is invalid, `null` is returned. This function also provides
+ * error handling for any storage access issues, ensuring the application can gracefully handle
+ * scenarios where storage is not available or accessible.
+ *
+ * @param {Storage | null} [storage] - The storage mechanism to use, typically `localStorage` or `sessionStorage`.
+ * @returns {Theme | null} - The resolved theme if found and valid; otherwise, `null`.
+ * @throws Will silently catch and ignore any exceptions caused by storage access, returning `null`.
+ *
+ * @example
+ * ```ts
+ * // Reading theme from localStorage
+ * const theme = readTheme(localStorage);
+ * if (theme) {
+ *   applyTheme(theme); // Assuming applyTheme is a function to apply the theme
+ * } else {
+ *   console.warn('No saved theme found or theme is invalid.');
+ * }
+ * ```
+ */
 function readTheme(storage) {
     try {
         return resolveTheme(storage?.getItem(THEME_STORAGE_NAME)) ?? null;
@@ -38,24 +123,49 @@ function readTheme(storage) {
 }
 
 const THEME_ATTRIBUTE_NAME = 'odxTheme';
+/**
+ * Manages theming for the application. It allows for dynamic theme selection, automatically saves theme preferences,
+ * and applies the user's preferred theme or the default theme based on configuration settings.
+ *
+ * The service leverages the BehaviorSubject pattern to reactively handle theme changes across the application,
+ * ensuring that subscribers are notified whenever the theme changes. It also interacts with the DOM directly
+ * to apply the current theme and with the provided storage mechanism to persist theme preferences.
+ */
 class ThemingService {
     constructor() {
         this.config = injectThemingConfig();
         this.document = inject(DOCUMENT);
         this.windowRef = inject(WindowRef);
         this.theme$$ = new BehaviorSubject(this.getInitialTheme());
+        /**
+         * An observable stream of the current theme, emitting values whenever the theme changes.
+         * Subscribers to this observable can react to theme changes in real-time.
+         */
         this.theme$ = this.theme$$.pipe(distinctUntilChanged(), shareReplay({ bufferSize: 1, refCount: true }));
         this.theme$.subscribe((theme) => {
             this.document.body.setAttribute(THEME_ATTRIBUTE_NAME, theme);
             saveTheme(this.config.storage, theme);
         });
     }
+    /**
+     * Selects and applies a given theme by updating the BehaviorSubject and persisting the preference.
+     *
+     * @param {Theme} theme - The theme to apply.
+     */
     selectTheme(theme) {
         this.theme$$.next(theme);
     }
+    /**
+     * Retrieves the currently selected theme.
+     *
+     * @returns {Theme} The currently selected theme.
+     */
     getSelectedTheme() {
         return this.theme$$.getValue();
     }
+    /**
+     * Toggles between dark and light themes, depending on the current theme.
+     */
     toggleDarkMode() {
         const currentTheme = this.getSelectedTheme();
         if (currentTheme === Theme.DARK) {
@@ -65,9 +175,15 @@ class ThemingService {
             this.enableDarkMode();
         }
     }
+    /**
+     * Enables the dark mode theme.
+     */
     enableDarkMode() {
         this.selectTheme(Theme.DARK);
     }
+    /**
+     * Enables the light mode theme.
+     */
     enableLightMode() {
         this.selectTheme(Theme.LIGHT);
     }
@@ -86,11 +202,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return []; } });
 
+/**
+ * Utility created by `createConfigTokens` for managing theming configuration tokens and functions.
+ * Provides easy access to theming configuration, default values, and dependency injection utilities.
+ */
 const { ThemingConfig, injectThemingConfig, provideThemingConfig } = createConfigTokens('Theming', '@odx/angular/theme', {
     autoDetect: false,
     defaultTheme: Theme.LIGHT,
     storage: null,
 });
+/**
+ * Provides the theming configuration to the application and initializes the `ThemingService`
+ * based on the provided configuration. This function simplifies the setup of a dynamic theming
+ * system, integrating with Angular's environment initializers to ensure proper initialization.
+ *
+ * @template D - The dependencies required by the theming configuration, if any.
+ * @param {ConfigProvider<Partial<ThemingConfig>, D>} config - The theming configuration or a configuration factory provider.
+ * @returns {EnvironmentProviders} An array of providers for setting up theming in the application.
+ *
+ * @example
+ * ```ts
+ * // Providing a simple theming configuration
+ * provideTheming({
+ *   autoDetect: true,
+ *   defaultTheme: Theme.DARK,
+ *   storage: localStorage,
+ * });
+ *
+ * // Providing a theming configuration with dependencies
+ * provideTheming({
+ *   useFactory: (deps: Dependencies) => ({
+ *     autoDetect: deps.setting,
+ *     defaultTheme: Theme.DARK,
+ *     storage: localStorage,
+ *   }),
+ *   deps: [SomeDependency],
+ * });
+ * ```
+ */
 function provideTheming(config) {
     return makeEnvironmentProviders([
         provideThemingConfig(config),

package/fesm2022/odx-angular-theming.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"odx-angular-theming.mjs","sources":["../../../../libs/angular/theming/src/lib/helpers/prefers-dark-theme.ts","../../../../libs/angular/theming/src/lib/models/theme.ts","../../../../libs/angular/theming/src/lib/helpers/resolve-theme.ts","../../../../libs/angular/theming/src/lib/helpers/theme-storage.ts","../../../../libs/angular/theming/src/lib/theming.service.ts","../../../../libs/angular/theming/src/lib/theming.config.ts","../../../../libs/angular/theming/src/odx-angular-theming.ts"],"sourcesContent":["export function prefersDarkTheme(view: Window): boolean {\n  return !!view.matchMedia?.('(prefers-color-scheme: dark)')?.matches;\n}\n","export type Theme = (typeof Theme)[keyof typeof Theme];\nexport const Theme = {\n  DARK: 'dark',\n  LIGHT: 'light',\n} as const;\n\nexport const availableThemes = Object.values(Theme);\n","import { availableThemes, Theme } from '../models';\n\nexport function resolveTheme(theme?: string | null): Theme | null {\n  return availableThemes.find((t) => t === theme) ?? null;\n}\n","import { Theme } from '../models';\nimport { resolveTheme } from './resolve-theme';\n\nexport const THEME_STORAGE_NAME = '@odx/angular/theming:SelectedTheme';\n\nexport function saveTheme(storage: Storage | null | undefined, theme: Theme): void {\n  try {\n    storage?.setItem(THEME_STORAGE_NAME, theme);\n  } catch {\n    //\n  }\n}\n\nexport function readTheme(storage?: Storage | null): Theme | null {\n  try {\n    return resolveTheme(storage?.getItem(THEME_STORAGE_NAME)) ?? null;\n  } catch {\n    return null;\n  }\n}\n","import { DOCUMENT } from '@angular/common';\nimport { inject, Injectable } from '@angular/core';\nimport { WindowRef } from '@odx/angular';\nimport { BehaviorSubject, distinctUntilChanged, shareReplay } from 'rxjs';\nimport { prefersDarkTheme, readTheme, saveTheme } from './helpers';\nimport { Theme } from './models';\nimport { injectThemingConfig } from './theming.config';\n\nexport const THEME_ATTRIBUTE_NAME = 'odxTheme';\n\n@Injectable({ providedIn: 'root' })\nexport class ThemingService {\n  private readonly config = injectThemingConfig();\n  private readonly document = inject(DOCUMENT);\n  private readonly windowRef = inject(WindowRef);\n  private readonly theme$$ = new BehaviorSubject<Theme>(this.getInitialTheme());\n\n  public readonly theme$ = this.theme$$.pipe(distinctUntilChanged(), shareReplay({ bufferSize: 1, refCount: true }));\n\n  constructor() {\n    this.theme$.subscribe((theme) => {\n      this.document.body.setAttribute(THEME_ATTRIBUTE_NAME, theme);\n      saveTheme(this.config.storage, theme);\n    });\n  }\n\n  public selectTheme(theme: Theme): void {\n    this.theme$$.next(theme);\n  }\n\n  public getSelectedTheme(): Theme {\n    return this.theme$$.getValue();\n  }\n\n  public toggleDarkMode(): void {\n    const currentTheme = this.getSelectedTheme();\n    if (currentTheme === Theme.DARK) {\n      this.enableLightMode();\n    } else {\n      this.enableDarkMode();\n    }\n  }\n\n  public enableDarkMode(): void {\n    this.selectTheme(Theme.DARK);\n  }\n\n  public enableLightMode(): void {\n    this.selectTheme(Theme.LIGHT);\n  }\n\n  private getInitialTheme(): Theme {\n    let selectedTheme = readTheme(this.config.storage);\n\n    if (!selectedTheme && this.config.autoDetect && prefersDarkTheme(this.windowRef.nativeWindow)) {\n      selectedTheme = Theme.DARK;\n    }\n\n    return selectedTheme ?? this.config.defaultTheme;\n  }\n}\n","import { EnvironmentProviders, ENVIRONMENT_INITIALIZER, inject, makeEnvironmentProviders } from '@angular/core';\nimport { ConfigDependencies, ConfigProvider, createConfigTokens } from '@odx/angular/utils';\nimport { Theme } from './models';\nimport { ThemingService } from './theming.service';\n\nexport interface ThemingConfig {\n  autoDetect: boolean;\n  defaultTheme: Theme;\n  storage?: Storage | null;\n}\n\nexport const { ThemingConfig, injectThemingConfig, provideThemingConfig } = createConfigTokens('Theming', '@odx/angular/theme', {\n  autoDetect: false,\n  defaultTheme: Theme.LIGHT,\n  storage: null,\n} as ThemingConfig);\n\nexport function provideTheming<D extends ConfigDependencies = ConfigDependencies<ThemingConfig>>(\n  config: ConfigProvider<Partial<ThemingConfig>, D>\n): EnvironmentProviders {\n  return makeEnvironmentProviders([\n    provideThemingConfig(config),\n    {\n      provide: ENVIRONMENT_INITIALIZER,\n      useFactory: () => () => inject(ThemingService),\n      deps: [ThemingConfig],\n      multi: true,\n    },\n  ]);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"odx-angular-theming.mjs","sources":["../../../../libs/angular/theming/src/lib/helpers/prefers-dark-theme.ts","../../../../libs/angular/theming/src/lib/models/theme.ts","../../../../libs/angular/theming/src/lib/helpers/resolve-theme.ts","../../../../libs/angular/theming/src/lib/helpers/theme-storage.ts","../../../../libs/angular/theming/src/lib/theming.service.ts","../../../../libs/angular/theming/src/lib/theming.config.ts","../../../../libs/angular/theming/src/odx-angular-theming.ts"],"sourcesContent":["/**\n * Determines whether the user's system preferences indicate a preference for dark themes.\n * This is achieved by querying the '(prefers-color-scheme: dark)' media feature, which reflects\n * the user's preference for a light or dark color scheme in their operating system's UI.\n *\n * @param {Window} view - The window object, typically `window`, from which to access the matchMedia method.\n * @returns {boolean} `true` if the user prefers a dark theme, otherwise `false`.\n *\n * @example\n * Example usage in a web application to toggle themes:\n * ```ts\n * if (prefersDarkTheme(window)) {\n *   document.body.classList.add('dark-theme');\n * } else {\n *   document.body.classList.remove('dark-theme');\n * }\n * ```\n */\n\nexport function prefersDarkTheme(view: Window): boolean {\n  return !!view.matchMedia?.('(prefers-color-scheme: dark)')?.matches;\n}\n","export type Theme = (typeof Theme)[keyof typeof Theme];\nexport const Theme = {\n  DARK: 'dark',\n  LIGHT: 'light',\n} as const;\n\nexport const availableThemes = Object.values(Theme);\n","import { availableThemes, Theme } from '../models';\n\n/**\n * Resolves the specified theme by checking if it exists in the predefined list of available themes.\n * This function ensures that only valid themes are used in the application, providing a safeguard\n * against invalid theme names and facilitating the dynamic application of themes.\n *\n * @param {string | null} [theme] - The name of the theme to resolve. It's optional and can be `null`.\n * @returns {Theme | null} - Returns the resolved `Theme` object if the theme is found within the list of `availableThemes`;\n * otherwise, returns `null` to indicate the theme is not recognized or available.\n *\n * @example\n * ```ts\n * // Assuming 'dark' and 'light' are in the availableThemes array\n * console.log(resolveTheme('dark')); // Outputs the 'dark' Theme object\n * console.log(resolveTheme('unknown')); // Outputs null\n *\n * // Using resolveTheme to apply a user-selected theme\n * const userSelectedTheme = getUserSelectedTheme(); // This function gets the user's theme choice\n * const themeToApply = resolveTheme(userSelectedTheme);\n * if (themeToApply) {\n *   applyTheme(themeToApply); // This function applies the resolved theme to the application\n * } else {\n *   console.warn('Selected theme is not available.');\n * }\n * ```\n */\nexport function resolveTheme(theme?: string | null): Theme | null {\n  return availableThemes.find((t) => t === theme) ?? null;\n}\n","import { Theme } from '../models';\nimport { resolveTheme } from './resolve-theme';\n\n/**\n * The key used to store the selected theme in `Storage`.\n * This constant ensures consistent access to the theme setting across the application.\n */\nexport const THEME_STORAGE_NAME = '@odx/angular/theming:SelectedTheme';\n\n/**\n * Saves the specified theme to storage. This function abstracts the storage interaction,\n * providing a fail-safe mechanism to avoid exceptions if the storage is not available.\n *\n * @param {Storage | null | undefined} storage - The storage mechanism to use, typically `localStorage` or `sessionStorage`.\n * @param {Theme} theme - The theme to save. Should be a value that is recognized by the application's theming system.\n * @throws Will silently catch and ignore any exceptions caused by storage limitations or permissions.\n *\n * @example\n * ```ts\n * // Example usage with localStorage\n * saveTheme(localStorage, 'dark');\n *\n * // Using sessionStorage instead\n * saveTheme(sessionStorage, 'light');\n * ```\n */\nexport function saveTheme(storage: Storage | null | undefined, theme: Theme): void {\n  try {\n    storage?.setItem(THEME_STORAGE_NAME, theme);\n  } catch {\n    //\n  }\n}\n\n/**\n * Reads the theme from storage, attempting to resolve it to a valid application theme.\n * If the theme cannot be found or is invalid, `null` is returned. This function also provides\n * error handling for any storage access issues, ensuring the application can gracefully handle\n * scenarios where storage is not available or accessible.\n *\n * @param {Storage | null} [storage] - The storage mechanism to use, typically `localStorage` or `sessionStorage`.\n * @returns {Theme | null} - The resolved theme if found and valid; otherwise, `null`.\n * @throws Will silently catch and ignore any exceptions caused by storage access, returning `null`.\n *\n * @example\n * ```ts\n * // Reading theme from localStorage\n * const theme = readTheme(localStorage);\n * if (theme) {\n *   applyTheme(theme); // Assuming applyTheme is a function to apply the theme\n * } else {\n *   console.warn('No saved theme found or theme is invalid.');\n * }\n * ```\n */\nexport function readTheme(storage?: Storage | null): Theme | null {\n  try {\n    return resolveTheme(storage?.getItem(THEME_STORAGE_NAME)) ?? null;\n  } catch {\n    return null;\n  }\n}\n","import { DOCUMENT } from '@angular/common';\nimport { inject, Injectable } from '@angular/core';\nimport { WindowRef } from '@odx/angular';\nimport { BehaviorSubject, distinctUntilChanged, shareReplay } from 'rxjs';\nimport { prefersDarkTheme, readTheme, saveTheme } from './helpers';\nimport { Theme } from './models';\nimport { injectThemingConfig } from './theming.config';\n\nexport const THEME_ATTRIBUTE_NAME = 'odxTheme';\n\n/**\n * Manages theming for the application. It allows for dynamic theme selection, automatically saves theme preferences,\n * and applies the user's preferred theme or the default theme based on configuration settings.\n *\n * The service leverages the BehaviorSubject pattern to reactively handle theme changes across the application,\n * ensuring that subscribers are notified whenever the theme changes. It also interacts with the DOM directly\n * to apply the current theme and with the provided storage mechanism to persist theme preferences.\n */\n@Injectable({ providedIn: 'root' })\nexport class ThemingService {\n  private readonly config = injectThemingConfig();\n  private readonly document = inject(DOCUMENT);\n  private readonly windowRef = inject(WindowRef);\n  private readonly theme$$ = new BehaviorSubject<Theme>(this.getInitialTheme());\n\n  /**\n   * An observable stream of the current theme, emitting values whenever the theme changes.\n   * Subscribers to this observable can react to theme changes in real-time.\n   */\n  public readonly theme$ = this.theme$$.pipe(distinctUntilChanged(), shareReplay({ bufferSize: 1, refCount: true }));\n\n  constructor() {\n    this.theme$.subscribe((theme) => {\n      this.document.body.setAttribute(THEME_ATTRIBUTE_NAME, theme);\n      saveTheme(this.config.storage, theme);\n    });\n  }\n\n  /**\n   * Selects and applies a given theme by updating the BehaviorSubject and persisting the preference.\n   *\n   * @param {Theme} theme - The theme to apply.\n   */\n  public selectTheme(theme: Theme): void {\n    this.theme$$.next(theme);\n  }\n\n  /**\n   * Retrieves the currently selected theme.\n   *\n   * @returns {Theme} The currently selected theme.\n   */\n  public getSelectedTheme(): Theme {\n    return this.theme$$.getValue();\n  }\n\n  /**\n   * Toggles between dark and light themes, depending on the current theme.\n   */\n  public toggleDarkMode(): void {\n    const currentTheme = this.getSelectedTheme();\n    if (currentTheme === Theme.DARK) {\n      this.enableLightMode();\n    } else {\n      this.enableDarkMode();\n    }\n  }\n\n  /**\n   * Enables the dark mode theme.\n   */\n  public enableDarkMode(): void {\n    this.selectTheme(Theme.DARK);\n  }\n\n  /**\n   * Enables the light mode theme.\n   */\n  public enableLightMode(): void {\n    this.selectTheme(Theme.LIGHT);\n  }\n\n  private getInitialTheme(): Theme {\n    let selectedTheme = readTheme(this.config.storage);\n\n    if (!selectedTheme && this.config.autoDetect && prefersDarkTheme(this.windowRef.nativeWindow)) {\n      selectedTheme = Theme.DARK;\n    }\n\n    return selectedTheme ?? this.config.defaultTheme;\n  }\n}\n","import { ENVIRONMENT_INITIALIZER, EnvironmentProviders, inject, makeEnvironmentProviders } from '@angular/core';\nimport { ConfigDependencies, ConfigProvider, createConfigTokens } from '@odx/angular/utils';\nimport { Theme } from './models';\nimport { ThemingService } from './theming.service';\n\n/**\n * Defines the structure for theming configuration options in the application.\n */\nexport interface ThemingConfig {\n  /**\n   * Determines whether the theme should be auto-detected based on system preferences.\n   */\n  autoDetect: boolean;\n\n  /**\n   * Specifies the default theme to be used if auto-detection is not enabled or fails.\n   */\n  defaultTheme: Theme;\n\n  /**\n   * The storage mechanism (like `localStorage` or `sessionStorage`) to persist theme settings,\n   * or `null` to disable persistence.\n   */\n  storage?: Storage | null;\n}\n\n/**\n * Utility created by `createConfigTokens` for managing theming configuration tokens and functions.\n * Provides easy access to theming configuration, default values, and dependency injection utilities.\n */\nexport const { ThemingConfig, injectThemingConfig, provideThemingConfig } = createConfigTokens('Theming', '@odx/angular/theme', {\n  autoDetect: false,\n  defaultTheme: Theme.LIGHT,\n  storage: null,\n} as ThemingConfig);\n\n/**\n * Provides the theming configuration to the application and initializes the `ThemingService`\n * based on the provided configuration. This function simplifies the setup of a dynamic theming\n * system, integrating with Angular's environment initializers to ensure proper initialization.\n *\n * @template D - The dependencies required by the theming configuration, if any.\n * @param {ConfigProvider<Partial<ThemingConfig>, D>} config - The theming configuration or a configuration factory provider.\n * @returns {EnvironmentProviders} An array of providers for setting up theming in the application.\n *\n * @example\n * ```ts\n * // Providing a simple theming configuration\n * provideTheming({\n *   autoDetect: true,\n *   defaultTheme: Theme.DARK,\n *   storage: localStorage,\n * });\n *\n * // Providing a theming configuration with dependencies\n * provideTheming({\n *   useFactory: (deps: Dependencies) => ({\n *     autoDetect: deps.setting,\n *     defaultTheme: Theme.DARK,\n *     storage: localStorage,\n *   }),\n *   deps: [SomeDependency],\n * });\n * ```\n */\nexport function provideTheming<D extends ConfigDependencies = ConfigDependencies<ThemingConfig>>(\n  config: ConfigProvider<Partial<ThemingConfig>, D>,\n): EnvironmentProviders {\n  return makeEnvironmentProviders([\n    provideThemingConfig(config),\n    {\n      provide: ENVIRONMENT_INITIALIZER,\n      useFactory: () => () => inject(ThemingService),\n      deps: [ThemingConfig],\n      multi: true,\n    },\n  ]);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAAA;;;;;;;;;;;;;;;;;AAiBG;AAEG,SAAU,gBAAgB,CAAC,IAAY,EAAA;IAC3C,OAAO,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,8BAA8B,CAAC,EAAE,OAAO,CAAC;AACtE;;ACpBa,MAAA,KAAK,GAAG;AACnB,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,KAAK,EAAE,OAAO;EACL;AAEE,MAAA,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK;;ACJlD;;;;;;;;;;;;;;;;;;;;;;;;AAwBG;AACG,SAAU,YAAY,CAAC,KAAqB,EAAA;AAChD,IAAA,OAAO,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,KAAK,CAAC,IAAI,IAAI,CAAC;AAC1D;;AC1BA;;;AAGG;AACI,MAAM,kBAAkB,GAAG,qCAAqC;AAEvE;;;;;;;;;;;;;;;;AAgBG;AACa,SAAA,SAAS,CAAC,OAAmC,EAAE,KAAY,EAAA;IACzE,IAAI;AACF,QAAA,OAAO,EAAE,OAAO,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC;AAC7C,KAAA;IAAC,MAAM;;AAEP,KAAA;AACH,CAAC;AAED;;;;;;;;;;;;;;;;;;;;AAoBG;AACG,SAAU,SAAS,CAAC,OAAwB,EAAA;IAChD,IAAI;QACF,OAAO,YAAY,CAAC,OAAO,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC,IAAI,IAAI,CAAC;AACnE,KAAA;IAAC,MAAM;AACN,QAAA,OAAO,IAAI,CAAC;AACb,KAAA;AACH;;ACrDO,MAAM,oBAAoB,GAAG,WAAW;AAE/C;;;;;;;AAOG;MAEU,cAAc,CAAA;AAYzB,IAAA,WAAA,GAAA;QAXiB,IAAM,CAAA,MAAA,GAAG,mBAAmB,EAAE,CAAC;AAC/B,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;AAC5B,QAAA,IAAA,CAAA,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;QAC9B,IAAO,CAAA,OAAA,GAAG,IAAI,eAAe,CAAQ,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC;AAE9E;;;AAGG;QACa,IAAM,CAAA,MAAA,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,oBAAoB,EAAE,EAAE,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAGjH,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,KAAK,KAAI;YAC9B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,oBAAoB,EAAE,KAAK,CAAC,CAAC;YAC7D,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;AACxC,SAAC,CAAC,CAAC;KACJ;AAED;;;;AAIG;AACI,IAAA,WAAW,CAAC,KAAY,EAAA;AAC7B,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC1B;AAED;;;;AAIG;IACI,gBAAgB,GAAA;AACrB,QAAA,OAAO,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC;KAChC;AAED;;AAEG;IACI,cAAc,GAAA;AACnB,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;AAC7C,QAAA,IAAI,YAAY,KAAK,KAAK,CAAC,IAAI,EAAE;YAC/B,IAAI,CAAC,eAAe,EAAE,CAAC;AACxB,SAAA;AAAM,aAAA;YACL,IAAI,CAAC,cAAc,EAAE,CAAC;AACvB,SAAA;KACF;AAED;;AAEG;IACI,cAAc,GAAA;AACnB,QAAA,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;KAC9B;AAED;;AAEG;IACI,eAAe,GAAA;AACpB,QAAA,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;KAC/B;IAEO,eAAe,GAAA;QACrB,IAAI,aAAa,GAAG,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;AAEnD,QAAA,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,MAAM,CAAC,UAAU,IAAI,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,EAAE;AAC7F,YAAA,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC;AAC5B,SAAA;AAED,QAAA,OAAO,aAAa,IAAI,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC;KAClD;+GAvEU,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA,EAAA;AAAd,IAAA,SAAA,IAAA,CAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,cAAc,cADD,MAAM,EAAA,CAAA,CAAA,EAAA;;4FACnB,cAAc,EAAA,UAAA,EAAA,CAAA;kBAD1B,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE,CAAA;;;ACQlC;;;AAGG;AACI,MAAM,EAAE,aAAa,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,GAAG,kBAAkB,CAAC,SAAS,EAAE,oBAAoB,EAAE;AAC9H,IAAA,UAAU,EAAE,KAAK;IACjB,YAAY,EAAE,KAAK,CAAC,KAAK;AACzB,IAAA,OAAO,EAAE,IAAI;AACG,CAAA,EAAE;AAEpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BG;AACG,SAAU,cAAc,CAC5B,MAAiD,EAAA;AAEjD,IAAA,OAAO,wBAAwB,CAAC;QAC9B,oBAAoB,CAAC,MAAM,CAAC;AAC5B,QAAA;AACE,YAAA,OAAO,EAAE,uBAAuB;YAChC,UAAU,EAAE,MAAM,MAAM,MAAM,CAAC,cAAc,CAAC;YAC9C,IAAI,EAAE,CAAC,aAAa,CAAC;AACrB,YAAA,KAAK,EAAE,IAAI;AACZ,SAAA;AACF,KAAA,CAAC,CAAC;AACL;;AC7EA;;AAEG;;;;"}