@sebgroup/green-angular 5.3.4 → 5.4.1

package/lib/shared/core-renderer/core-renderer.d.ts

@@ -1,4 +1,5 @@
-import { Renderer2, RendererFactory2, RendererStyleFlags2, RendererType2 } from '@angular/core';
+import { ɵAnimationEngine as AnimationEngine, ɵAnimationRendererFactory as AnimationRendererFactory } from '@angular/animations/browser';
+import { NgZone, Renderer2, RendererFactory2, RendererStyleFlags2, RendererType2 } from '@angular/core';
 import { ɵDomRendererFactory2 as DomRendererFactory2 } from '@angular/platform-browser';
 import * as i0 from "@angular/core";
 export declare class NggCoreRenderer implements Renderer2 {
@@ -35,3 +36,46 @@ export declare class NggCoreRendererFactory implements RendererFactory2 {
     static ɵfac: i0.ɵɵFactoryDeclaration<NggCoreRendererFactory, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<NggCoreRendererFactory>;
 }
+/**
+ * Returns a AnimationRendererFactory configured to use the NggCoreRendererFactory as a delegate.
+ */
+export declare function animationsCoreRendererFactory(delegate: DomRendererFactory2, engine: AnimationEngine, zone: NgZone): AnimationRendererFactory;
+/**
+ * Provide the NggCoreRendererFactory to use <gds-*> elements without any extra directives.
+ * The NggCoreRenderer will handle element name scoping automatically.
+ *
+ * Example:
+ * ```ts
+ * @NgModule({
+ *  providers: [provideCoreRenderer()],
+ *  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+ * })
+ * export class AppModule {}
+ * ```
+ */
+export declare const provideCoreRenderer: () => {
+    provide: typeof RendererFactory2;
+    useClass: typeof NggCoreRendererFactory;
+};
+/**
+ * Provide the NggCoreRendererFactory to use <gds-*> elements without any extra directives.
+ * The NggCoreRenderer will handle element name scoping automatically.
+ *
+ * This factory also provides the Angular animations renderer.
+ *
+ *
+ * Example:
+ * ```ts
+ * @NgModule({
+ *  imports: [BrowserAnimationsModule],
+ *  providers: [provideCoreRendererWithAnimations()],
+ *  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+ * })
+ * export class AppModule {}
+ * ```
+ */
+export declare const provideCoreRendererWithAnimations: () => {
+    provide: typeof RendererFactory2;
+    useFactory: typeof animationsCoreRendererFactory;
+    deps: (typeof DomRendererFactory2 | typeof AnimationEngine | typeof NgZone)[];
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sebgroup/green-angular",
-  "version": "5.3.4",
+  "version": "5.4.1",
   "peerDependencies": {
     "@angular/cdk": ">=17.3.10",
     "@angular/common": ">=17.3.12",
@@ -17,8 +17,8 @@
     "scroll-into-view-if-needed": "^2.2.31"
   },
   "dependencies": {
-    "@sebgroup/green-core": "^1.68.1",
-    "@sebgroup/chlorophyll": "^3.6.15",
+    "@sebgroup/green-core": "^1.68.5",
+    "@sebgroup/chlorophyll": "^3.6.16",
     "@sebgroup/extract": "^3.0.2",
     "tslib": "^2.3.1"
   },
@@ -147,18 +147,18 @@
       "esm": "./esm2022/src/lib/sortable-list/sebgroup-green-angular-src-lib-sortable-list.mjs",
       "default": "./fesm2022/sebgroup-green-angular-src-lib-sortable-list.mjs"
     },
-    "./src/v-angular/alert": {
-      "types": "./src/v-angular/alert/index.d.ts",
-      "esm2022": "./esm2022/src/v-angular/alert/sebgroup-green-angular-src-v-angular-alert.mjs",
-      "esm": "./esm2022/src/v-angular/alert/sebgroup-green-angular-src-v-angular-alert.mjs",
-      "default": "./fesm2022/sebgroup-green-angular-src-v-angular-alert.mjs"
-    },
     "./src/v-angular/account-number": {
       "types": "./src/v-angular/account-number/index.d.ts",
       "esm2022": "./esm2022/src/v-angular/account-number/sebgroup-green-angular-src-v-angular-account-number.mjs",
       "esm": "./esm2022/src/v-angular/account-number/sebgroup-green-angular-src-v-angular-account-number.mjs",
       "default": "./fesm2022/sebgroup-green-angular-src-v-angular-account-number.mjs"
     },
+    "./src/v-angular/alert": {
+      "types": "./src/v-angular/alert/index.d.ts",
+      "esm2022": "./esm2022/src/v-angular/alert/sebgroup-green-angular-src-v-angular-alert.mjs",
+      "esm": "./esm2022/src/v-angular/alert/sebgroup-green-angular-src-v-angular-alert.mjs",
+      "default": "./fesm2022/sebgroup-green-angular-src-v-angular-alert.mjs"
+    },
     "./src/v-angular/base-control-value-accessor": {
       "types": "./src/v-angular/base-control-value-accessor/index.d.ts",
       "esm2022": "./esm2022/src/v-angular/base-control-value-accessor/sebgroup-green-angular-src-v-angular-base-control-value-accessor.mjs",

package/src/lib/shared/core-renderer/core-renderer.d.ts

@@ -1,4 +1,5 @@
-import { Renderer2, RendererFactory2, RendererStyleFlags2, RendererType2 } from '@angular/core';
+import { ɵAnimationEngine as AnimationEngine, ɵAnimationRendererFactory as AnimationRendererFactory } from '@angular/animations/browser';
+import { NgZone, Renderer2, RendererFactory2, RendererStyleFlags2, RendererType2 } from '@angular/core';
 import { ɵDomRendererFactory2 as DomRendererFactory2 } from '@angular/platform-browser';
 import * as i0 from "@angular/core";
 export declare class NggCoreRenderer implements Renderer2 {
@@ -35,3 +36,46 @@ export declare class NggCoreRendererFactory implements RendererFactory2 {
     static ɵfac: i0.ɵɵFactoryDeclaration<NggCoreRendererFactory, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<NggCoreRendererFactory>;
 }
+/**
+ * Returns a AnimationRendererFactory configured to use the NggCoreRendererFactory as a delegate.
+ */
+export declare function animationsCoreRendererFactory(delegate: DomRendererFactory2, engine: AnimationEngine, zone: NgZone): AnimationRendererFactory;
+/**
+ * Provide the NggCoreRendererFactory to use <gds-*> elements without any extra directives.
+ * The NggCoreRenderer will handle element name scoping automatically.
+ *
+ * Example:
+ * ```ts
+ * @NgModule({
+ *  providers: [provideCoreRenderer()],
+ *  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+ * })
+ * export class AppModule {}
+ * ```
+ */
+export declare const provideCoreRenderer: () => {
+    provide: typeof RendererFactory2;
+    useClass: typeof NggCoreRendererFactory;
+};
+/**
+ * Provide the NggCoreRendererFactory to use <gds-*> elements without any extra directives.
+ * The NggCoreRenderer will handle element name scoping automatically.
+ *
+ * This factory also provides the Angular animations renderer.
+ *
+ *
+ * Example:
+ * ```ts
+ * @NgModule({
+ *  imports: [BrowserAnimationsModule],
+ *  providers: [provideCoreRendererWithAnimations()],
+ *  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+ * })
+ * export class AppModule {}
+ * ```
+ */
+export declare const provideCoreRendererWithAnimations: () => {
+    provide: typeof RendererFactory2;
+    useFactory: typeof animationsCoreRendererFactory;
+    deps: (typeof DomRendererFactory2 | typeof AnimationEngine | typeof NgZone)[];
+};

package/src/v-angular/dropdown/dropdown-list/dropdown-list.component.d.ts

@@ -37,6 +37,10 @@ export declare class NggvDropdownListComponent implements OnInit, OnChanges {
     selectedValue?: Option<string, any>;
     /** Subscribe if dropdown expanded to listen to click outside to close dropdown. */
     protected onClickSubscription: Subscription | undefined;
+    /** Subscribe to to keyboard events only when list is open. */
+    private onKeyDownSubscription;
+    private onKeyUpSubscription;
+    private _flattenedOptions;
     constructor(translocoScope: TranslocoScope);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
@@ -86,6 +90,10 @@ export declare class NggvDropdownListComponent implements OnInit, OnChanges {
      * @param event fired containing which key was released.
      */
     onKeyUp(event: KeyboardEvent): void;
+    /** @internal */
+    subscribeToKeyUpEvents(): void;
+    /** @internal */
+    subscribeToKeyDownEvents(): void;
     /**
      * Scrolls focused result into view with a specified offset.
      * @param key the result index which to scroll to.

package/src/v-angular/modal/dialog/dialog.component.d.ts

@@ -1,12 +1,16 @@
-import { ElementRef, EventEmitter, OnInit, Renderer2 } from '@angular/core';
+import { ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
+import { ElementRef, EventEmitter, OnDestroy, OnInit, Renderer2 } from '@angular/core';
 import { DialogButtons } from '../modal.types';
 import * as i0 from "@angular/core";
 export interface DialogEvent<T = any> {
     original: Event | undefined;
     payload: T | undefined;
 }
-export declare class NggvDialogComponent implements OnInit {
+export declare class NggvDialogComponent implements OnInit, OnDestroy {
     private renderer;
+    private ref;
+    private configurableFocusTrapFactory;
+    private configurableFocusTrap;
     dialogRef: ElementRef | undefined;
     /** Special property used for selecting DOM elements during automated UI testing. */
     thook: string | null | undefined;
@@ -50,7 +54,7 @@ export declare class NggvDialogComponent implements OnInit {
     protected _previous: HTMLElement | undefined;
     protected _firstFocusable: HTMLElement | undefined;
     protected _lastFocusable: HTMLElement | undefined;
-    constructor(renderer: Renderer2);
+    constructor(renderer: Renderer2, ref: ElementRef<HTMLElement>, configurableFocusTrapFactory: ConfigurableFocusTrapFactory);
     ngOnInit(): void;
     onAction(event: Event, action: string): void;
     open(opener?: HTMLElement): boolean;
@@ -59,6 +63,9 @@ export declare class NggvDialogComponent implements OnInit {
     focusTrap(event: KeyboardEvent): void;
     private hideOverflow;
     private resetOverflow;
+    private enableFocusTrap;
+    private disableFocusTrap;
+    ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NggvDialogComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<NggvDialogComponent, "nggv-dialog", ["dialog"], { "thook": { "alias": "thook"; "required": false; }; "shown": { "alias": "shown"; "required": false; }; "initiallyShown": { "alias": "initiallyShown"; "required": false; }; "heading": { "alias": "heading"; "required": false; }; "title": { "alias": "title"; "required": false; }; "content": { "alias": "content"; "required": false; }; "autoClose": { "alias": "autoClose"; "required": false; }; "payload": { "alias": "payload"; "required": false; }; "dialogTitleId": { "alias": "dialogTitleId"; "required": false; }; "dialogBodyId": { "alias": "dialogBodyId"; "required": false; }; "closeModalOnEscape": { "alias": "closeModalOnEscape"; "required": false; }; "closeButtonAriaLabel": { "alias": "closeButtonAriaLabel"; "required": false; }; "buttons": { "alias": "buttons"; "required": false; }; }, { "nggvCloseEvent": "nggvCloseEvent"; "nggvPositiveEvent": "nggvPositiveEvent"; "nggvNeutralEvent": "nggvNeutralEvent"; "nggvNegativeEvent": "nggvNegativeEvent"; }, never, ["*"], false, never>;
 }

package/v-angular/core/core.globals.d.ts

@@ -0,0 +1,13 @@
+export {};
+declare global {
+    interface Window {
+        /** Counter for unique identifiers */
+        nggv: {
+            ids: {
+                [namespace: string]: number;
+                default: number;
+            };
+            nextId: (namespace?: string) => string;
+        };
+    }
+}

package/v-angular/core/core.utils.d.ts

@@ -0,0 +1,23 @@
+import * as i0 from "@angular/core";
+export interface Option<K, V> {
+    key: K;
+    label: V;
+    disabled?: boolean;
+}
+export interface OptionGroup<T extends Option<any, any>> {
+    label: string;
+    options: T[];
+    disabled?: boolean;
+}
+export type OptionBase<T extends Option<any, any>> = T | OptionGroup<T>;
+export declare class DropdownUtils<K = string | null, V = string, T extends Option<K, V> = Option<K, V>> {
+    flattenOptions(options: OptionBase<T>[] | undefined, mustHaveLabel: boolean): T[];
+    /**
+     * Returns true if argument is an {@link OptionGroup}.
+     * @param option the object to check.
+     */
+    isGroup(option: OptionBase<T>): option is OptionGroup<T>;
+    deepEqual(original: any, change: any): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownUtils<any, any, any>, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DropdownUtils<any, any, any>>;
+}

package/v-angular/core/index.d.ts

@@ -0,0 +1,2 @@
+export * from './core.globals';
+export * from './core.utils';

package/v-angular/dropdown/dropdown-list/dropdown-list.component.d.ts

@@ -37,6 +37,10 @@ export declare class NggvDropdownListComponent implements OnInit, OnChanges {
     selectedValue?: Option<string, any>;
     /** Subscribe if dropdown expanded to listen to click outside to close dropdown. */
     protected onClickSubscription: Subscription | undefined;
+    /** Subscribe to to keyboard events only when list is open. */
+    private onKeyDownSubscription;
+    private onKeyUpSubscription;
+    private _flattenedOptions;
     constructor(translocoScope: TranslocoScope);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
@@ -86,6 +90,10 @@ export declare class NggvDropdownListComponent implements OnInit, OnChanges {
      * @param event fired containing which key was released.
      */
     onKeyUp(event: KeyboardEvent): void;
+    /** @internal */
+    subscribeToKeyUpEvents(): void;
+    /** @internal */
+    subscribeToKeyDownEvents(): void;
     /**
      * Scrolls focused result into view with a specified offset.
      * @param key the result index which to scroll to.

package/v-angular/index.d.ts

@@ -4,6 +4,7 @@ export * from './base-control-value-accessor';
 export * from './breadcrumbs';
 export * from './button';
 export * from './card';
+export * from './core';
 export * from './character-countdown';
 export * from './checkbox';
 export * from './datepicker';

package/v-angular/modal/dialog/dialog.component.d.ts

@@ -1,12 +1,16 @@
-import { ElementRef, EventEmitter, OnInit, Renderer2 } from '@angular/core';
+import { ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
+import { ElementRef, EventEmitter, OnDestroy, OnInit, Renderer2 } from '@angular/core';
 import { DialogButtons } from '../modal.types';
 import * as i0 from "@angular/core";
 export interface DialogEvent<T = any> {
     original: Event | undefined;
     payload: T | undefined;
 }
-export declare class NggvDialogComponent implements OnInit {
+export declare class NggvDialogComponent implements OnInit, OnDestroy {
     private renderer;
+    private ref;
+    private configurableFocusTrapFactory;
+    private configurableFocusTrap;
     dialogRef: ElementRef | undefined;
     /** Special property used for selecting DOM elements during automated UI testing. */
     thook: string | null | undefined;
@@ -50,7 +54,7 @@ export declare class NggvDialogComponent implements OnInit {
     protected _previous: HTMLElement | undefined;
     protected _firstFocusable: HTMLElement | undefined;
     protected _lastFocusable: HTMLElement | undefined;
-    constructor(renderer: Renderer2);
+    constructor(renderer: Renderer2, ref: ElementRef<HTMLElement>, configurableFocusTrapFactory: ConfigurableFocusTrapFactory);
     ngOnInit(): void;
     onAction(event: Event, action: string): void;
     open(opener?: HTMLElement): boolean;
@@ -59,6 +63,9 @@ export declare class NggvDialogComponent implements OnInit {
     focusTrap(event: KeyboardEvent): void;
     private hideOverflow;
     private resetOverflow;
+    private enableFocusTrap;
+    private disableFocusTrap;
+    ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NggvDialogComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<NggvDialogComponent, "nggv-dialog", ["dialog"], { "thook": { "alias": "thook"; "required": false; }; "shown": { "alias": "shown"; "required": false; }; "initiallyShown": { "alias": "initiallyShown"; "required": false; }; "heading": { "alias": "heading"; "required": false; }; "title": { "alias": "title"; "required": false; }; "content": { "alias": "content"; "required": false; }; "autoClose": { "alias": "autoClose"; "required": false; }; "payload": { "alias": "payload"; "required": false; }; "dialogTitleId": { "alias": "dialogTitleId"; "required": false; }; "dialogBodyId": { "alias": "dialogBodyId"; "required": false; }; "closeModalOnEscape": { "alias": "closeModalOnEscape"; "required": false; }; "closeButtonAriaLabel": { "alias": "closeButtonAriaLabel"; "required": false; }; "buttons": { "alias": "buttons"; "required": false; }; }, { "nggvCloseEvent": "nggvCloseEvent"; "nggvPositiveEvent": "nggvPositiveEvent"; "nggvNeutralEvent": "nggvNeutralEvent"; "nggvNegativeEvent": "nggvNegativeEvent"; }, never, ["*"], false, never>;
 }