@sebgroup/green-angular 1.0.0-beta.43 → 1.0.0-beta.46

package/fesm2015/sebgroup-green-angular.mjs

@@ -1,61 +1,232 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input, NgModule, Directive, EventEmitter, Injector, Inject, Output, ViewChild, ContentChild, HostBinding } from '@angular/core';
-import * as i1 from '@angular/common';
+import { EventEmitter, Component, Input, Output, ContentChildren, NgModule, ChangeDetectionStrategy, HostBinding, Directive, Injector, Inject, ViewChild, ContentChild } from '@angular/core';
+import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i2 from '@angular/router';
-import { RouterModule } from '@angular/router';
+import { randomId, dropdownValues, createDropdown, months, years, createDatepicker } from '@sebgroup/extract';
 import { NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { dropdownValues, createDropdown, randomId, months, years, createDatepicker } from '@sebgroup/extract';
 import { startOfDay, endOfDay } from 'date-fns';
 import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
+import * as i1 from '@angular/cdk/a11y';
+import { A11yModule } from '@angular/cdk/a11y';
+import * as i2$1 from '@angular/router';
+import { RouterModule } from '@angular/router';
 
-class NggSegmentedControlComponent {
+class NggAccordionListItemComponent {
+    constructor() {
+        this.id = randomId();
+        this.listItemHeader = '';
+        this.listItemSubHeader = '';
+        this.expandedChange = new EventEmitter();
+        this.contentHeight = "0px";
+        this.isExpanded = false;
+    }
+    shrink() {
+        this.isExpanded = false;
+        this.contentHeight = "0px";
+    }
+    expand() {
+        this.isExpanded = true;
+        this.contentHeight = "auto";
+    }
+    toggleExpanded() {
+        this.isExpanded = !this.isExpanded;
+        if (this.isExpanded) {
+            this.contentHeight = "auto";
+        }
+        else {
+            this.contentHeight = "0px";
+        }
+        this.expandedChange.emit(this);
+    }
 }
-NggSegmentedControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggSegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NggSegmentedControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: NggSegmentedControlComponent, selector: "ngg-segmented-control", inputs: { $controls: "$controls" }, ngImport: i0, template: `
-    <div class="group">
-      <a
-        *ngFor="let control of $controls | async"
-        [routerLink]="control.url"
-        routerLinkActive="active"
-        class="button"
-        >{{ control.text }}</a
-      >
-    </div>
-  `, isInline: true, directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], pipes: { "async": i1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggSegmentedControlComponent, decorators: [{
+NggAccordionListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggAccordionListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NggAccordionListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: NggAccordionListItemComponent, selector: "div[ngg-accordion-list-item]", inputs: { id: "id", listItemHeader: "listItemHeader", listItemSubHeader: "listItemSubHeader" }, outputs: { expandedChange: "expandedChange" }, ngImport: i0, template: "<ng-container data-testid=\"accordion-list-item-root\">\n    <div role=\"heading\" aria-level=\"2\" [attr.id]=\"id\">\n        <button data-testid=\"accordion-list-item-expander-button\" [attr.id]=\"id + '_header'\" (click)=\"toggleExpanded()\"\n            tabindex=\"0\" [attr.aria-expanded]=\"this.isExpanded\" [attr.aria-controls]=\"id + '_section'\">\n            <span data-testid=\"accordion-list-item-header\">{{listItemHeader}}</span>\n            <span data-testid=\"accordion-list-item-subheader\">{{listItemSubHeader}}</span>\n            <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                    d=\"M18.8095 9.22817L18.1907 8.60942C18.0438 8.46255 17.8063 8.46255 17.6595 8.60942L12.0001 14.2563L6.34072 8.60942C6.19385 8.46255 5.95635 8.46255 5.80947 8.60942L5.19072 9.22817C5.04385 9.37505 5.04385 9.61255 5.19072 9.75942L11.7345 16.3032C11.8813 16.45 12.1188 16.45 12.2657 16.3032L18.8095 9.75942C18.9563 9.61255 18.9563 9.37505 18.8095 9.22817Z\"\n                    fill=\"#333333\" />\n            </svg>\n        </button>\n        <div role=\"region\" [hidden]=\"!this.isExpanded\"\n            [ngStyle]=\"{height: this.contentHeight}\" [id]=\"id + '_section'\" [attr.aria-labelledby]=\"id + '_header'\"\n            data-testid=\"accordion-list-item-content\">\n            <div>\n                <ng-content></ng-content>\n            </div>\n        </div>\n    </div>\n</ng-container>", directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggAccordionListItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'div[ngg-accordion-list-item]', template: "<ng-container data-testid=\"accordion-list-item-root\">\n    <div role=\"heading\" aria-level=\"2\" [attr.id]=\"id\">\n        <button data-testid=\"accordion-list-item-expander-button\" [attr.id]=\"id + '_header'\" (click)=\"toggleExpanded()\"\n            tabindex=\"0\" [attr.aria-expanded]=\"this.isExpanded\" [attr.aria-controls]=\"id + '_section'\">\n            <span data-testid=\"accordion-list-item-header\">{{listItemHeader}}</span>\n            <span data-testid=\"accordion-list-item-subheader\">{{listItemSubHeader}}</span>\n            <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                    d=\"M18.8095 9.22817L18.1907 8.60942C18.0438 8.46255 17.8063 8.46255 17.6595 8.60942L12.0001 14.2563L6.34072 8.60942C6.19385 8.46255 5.95635 8.46255 5.80947 8.60942L5.19072 9.22817C5.04385 9.37505 5.04385 9.61255 5.19072 9.75942L11.7345 16.3032C11.8813 16.45 12.1188 16.45 12.2657 16.3032L18.8095 9.75942C18.9563 9.61255 18.9563 9.37505 18.8095 9.22817Z\"\n                    fill=\"#333333\" />\n            </svg>\n        </button>\n        <div role=\"region\" [hidden]=\"!this.isExpanded\"\n            [ngStyle]=\"{height: this.contentHeight}\" [id]=\"id + '_section'\" [attr.aria-labelledby]=\"id + '_header'\"\n            data-testid=\"accordion-list-item-content\">\n            <div>\n                <ng-content></ng-content>\n            </div>\n        </div>\n    </div>\n</ng-container>" }]
+        }], propDecorators: { id: [{
+                type: Input
+            }], listItemHeader: [{
+                type: Input
+            }], listItemSubHeader: [{
+                type: Input
+            }], expandedChange: [{
+                type: Output
+            }] } });
+
+class NggAccordionComponent {
+    constructor() {
+        this.closeOthers = false;
+    }
+    get expandAll() {
+        return this._expandAll;
+    }
+    set expandAll(value) {
+        var _a, _b;
+        if (value === this._expandAll)
+            return;
+        if (this._expandAll) {
+            (_a = this.expandAllSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        }
+        this._expandAll = value;
+        this.expandAllSubscription = (_b = this._expandAll) === null || _b === void 0 ? void 0 : _b.subscribe(() => {
+            if (this.closeOthers === false) {
+                const itemArray = this.items ? Array.from(this.items) : undefined;
+                if (itemArray) {
+                    for (const i of itemArray) {
+                        i.expand();
+                    }
+                }
+            }
+        });
+    }
+    ngAfterContentChecked() {
+        if (this.closeOthers) {
+            const itemArray = this.items ? Array.from(this.items) : undefined;
+            if (itemArray) {
+                for (const i of itemArray) {
+                    i.expandedChange.subscribe((child) => this.onChildExpanded(child));
+                }
+            }
+        }
+    }
+    ngOnDestroy() {
+        var _a;
+        if (this.closeOthers) {
+            const itemArray = this.items ? Array.from(this.items) : undefined;
+            if (itemArray) {
+                for (const i of itemArray) {
+                    i.expandedChange.unsubscribe();
+                }
+            }
+        }
+        (_a = this.expandAllSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+    }
+    onChildExpanded(childIdentity) {
+        if (this.closeOthers && childIdentity.isExpanded && this.items) {
+            this.items.forEach((item) => {
+                if (item !== childIdentity)
+                    item.shrink();
+            });
+        }
+    }
+}
+NggAccordionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NggAccordionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: NggAccordionComponent, selector: "ngg-accordion", inputs: { closeOthers: "closeOthers", expandAll: "expandAll" }, queries: [{ propertyName: "items", predicate: NggAccordionListItemComponent }], ngImport: i0, template: "<div class=\"accordion\" data-testid=\"accordion-root\">\n    <ng-content></ng-content>\n</div>\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggAccordionComponent, decorators: [{
             type: Component,
+            args: [{ selector: "ngg-accordion", template: "<div class=\"accordion\" data-testid=\"accordion-root\">\n    <ng-content></ng-content>\n</div>\n" }]
+        }], propDecorators: { items: [{
+                type: ContentChildren,
+                args: [NggAccordionListItemComponent]
+            }], closeOthers: [{
+                type: Input
+            }], expandAll: [{
+                type: Input
+            }] } });
+
+class NggAccordionModule {
+}
+NggAccordionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NggAccordionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggAccordionModule, declarations: [NggAccordionListItemComponent, NggAccordionComponent], imports: [CommonModule], exports: [NggAccordionListItemComponent, NggAccordionComponent] });
+NggAccordionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggAccordionModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggAccordionModule, decorators: [{
+            type: NgModule,
             args: [{
-                    selector: 'ngg-segmented-control',
+                    imports: [CommonModule],
+                    exports: [NggAccordionListItemComponent, NggAccordionComponent],
+                    declarations: [NggAccordionListItemComponent, NggAccordionComponent]
+                }]
+        }] });
+
+class NggBadgeComponent {
+    //eslint-disable-next-line
+    constructor() {
+        /** The color of the component */
+        this.badgeType = '';
+        /** Callback when component is dismissed */
+        this.handleClose = new EventEmitter();
+    }
+    /** Flag whether the component can be dismissed */
+    set isCloseable(value) {
+        this._isCloseable = value;
+    }
+    get isCloseable() {
+        return this._isCloseable === '' || !!this._isCloseable;
+    }
+    get class() {
+        return ['badge', this.badgeType].join(' ');
+    }
+    ngOnInit() {
+        if (!!this.customColor || !!this.customBackgroundColor) {
+            this.badgeType = '';
+        }
+    }
+    close(e) {
+        this.handleClose.emit(e);
+    }
+}
+NggBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NggBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: NggBadgeComponent, selector: "[ngg-badge]", inputs: { badgeType: "badgeType", isCloseable: "isCloseable", closeText: "closeText", customColor: "customColor", customBackgroundColor: "customBackgroundColor" }, outputs: { handleClose: "handleClose" }, host: { properties: { "style.color": "this.customColor", "style.background-color": "this.customBackgroundColor", "class": "this.class" } }, ngImport: i0, template: `
+    <strong>
+      <ng-content></ng-content>
+    </strong>
+    <button *ngIf="isCloseable" class="close" (click)="close($event)">
+      {{ closeText }}
+      <i></i>
+    </button>
+  `, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggBadgeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // we need to disable this warning since we don't want the badge component to create a new element
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '[ngg-badge]',
                     template: `
-    <div class="group">
-      <a
-        *ngFor="let control of $controls | async"
-        [routerLink]="control.url"
-        routerLinkActive="active"
-        class="button"
-        >{{ control.text }}</a
-      >
-    </div>
+    <strong>
+      <ng-content></ng-content>
+    </strong>
+    <button *ngIf="isCloseable" class="close" (click)="close($event)">
+      {{ closeText }}
+      <i></i>
+    </button>
   `,
-                    styles: [],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { $controls: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { badgeType: [{
                 type: Input
+            }], isCloseable: [{
+                type: Input
+            }], closeText: [{
+                type: Input
+            }], customColor: [{
+                type: HostBinding,
+                args: ['style.color']
+            }, {
+                type: Input
+            }], customBackgroundColor: [{
+                type: HostBinding,
+                args: ['style.background-color']
+            }, {
+                type: Input
+            }], class: [{
+                type: HostBinding,
+                args: ['class']
+            }], handleClose: [{
+                type: Output
             }] } });
 
-class NggSegmentedControlModule {
+class NggBadgeModule {
 }
-NggSegmentedControlModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggSegmentedControlModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NggSegmentedControlModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggSegmentedControlModule, declarations: [NggSegmentedControlComponent], imports: [RouterModule, CommonModule], exports: [NggSegmentedControlComponent] });
-NggSegmentedControlModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggSegmentedControlModule, imports: [[RouterModule, CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggSegmentedControlModule, decorators: [{
+NggBadgeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NggBadgeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggBadgeModule, declarations: [NggBadgeComponent], imports: [CommonModule], exports: [NggBadgeComponent] });
+NggBadgeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggBadgeModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggBadgeModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [NggSegmentedControlComponent],
-                    imports: [RouterModule, CommonModule],
-                    exports: [NggSegmentedControlComponent],
+                    declarations: [NggBadgeComponent],
+                    imports: [CommonModule],
+                    exports: [NggBadgeComponent],
                 }]
         }] });
 
@@ -135,19 +306,12 @@ class NggDropdownComponent {
     }
     ngOnChanges(changes) {
         if (this.handler &&
-            (changes.id || changes.text || changes.loop || changes.options)) {
+            (changes.id || changes.texts || changes.loop || changes.options)) {
             this.handler.update(this.props);
         }
     }
     writeValue(value) {
-        var _a, _b, _c, _d;
         this.value = value;
-        if (value === null &&
-            ((_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.isTouched) &&
-            ((_c = (_b = this.control) === null || _b === void 0 ? void 0 : _b.control) === null || _c === void 0 ? void 0 : _c.untouched)) {
-            (_d = this.handler) === null || _d === void 0 ? void 0 : _d.resetTouchedState();
-            this.cd.detectChanges();
-        }
     }
     registerOnChange(fn) {
         this.onChangeFn = fn;
@@ -198,7 +362,7 @@ NggDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             useExisting: NggDropdownComponent,
             multi: true,
         },
-    ], queries: [{ propertyName: "customOption", first: true, predicate: NggDropdownOptionDirective, descendants: true }], viewQueries: [{ propertyName: "togglerRef", first: true, predicate: ["togglerRef"], descendants: true }, { propertyName: "listboxRef", first: true, predicate: ["listboxRef"], descendants: true }, { propertyName: "fieldsetRef", first: true, predicate: ["fieldsetRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div>\n  <span class=\"label\" *ngIf=\"label\" [id]=\"toggler?.attributes?.id + '_label'\">{{\n    label\n  }}</span>\n  <button\n    [attr.aria-labelledby]=\"label ? toggler?.attributes?.id + '_label' : null\"\n    [attr.aria-describedby]=\"\n      formInfo?.textContent && (formInfo?.textContent?.length ?? 0 > 0)\n        ? toggler?.attributes?.id + '_info'\n        : null\n    \"\n    type=\"button\"\n    #togglerRef\n    [id]=\"toggler?.attributes?.id\"\n    [attr.aria-haspopup]=\"toggler?.attributes?.['aria-haspopup']\"\n    [attr.aria-expanded]=\"toggler?.attributes?.['aria-expanded']\"\n    [attr.aria-owns]=\"toggler?.attributes?.['aria-owns']\"\n    [tabindex]=\"toggler?.attributes?.tabIndex\"\n    [style]=\"toggler?.attributes?.style\"\n    [class]=\"toggler?.classes\"\n    (click)=\"handler?.toggle()\"\n    [class.is-valid]=\"valid\"\n    [class.is-invalid]=\"invalid\"\n  >\n    <span>{{ dropdown?.texts?.select }}</span>\n  </button>\n  <span\n    class=\"form-info\"\n    #formInfo\n    [attr.id]=\"toggler?.attributes?.id + '_info'\"\n    ><ng-content select=\"[data-form-info]\"></ng-content\n  ></span>\n  <div\n    #listboxRef\n    [id]=\"listbox?.attributes?.id\"\n    [attr.role]=\"listbox?.attributes?.role\"\n    [attr.aria-activedescendant]=\"\n        listbox?.attributes?.['aria-activedescendant']\n      \"\n    [tabindex]=\"listbox?.attributes?.tabIndex\"\n    [style]=\"listbox?.attributes?.style\"\n    [class]=\"listbox?.classes\"\n  >\n    <button\n      type=\"button\"\n      class=\"close m-4 m-sm-2 d-block d-sm-none\"\n      (click)=\"handler?.close()\"\n    >\n      <span class=\"sr-only\">{{ dropdown?.texts?.close }}</span>\n      <i></i>\n    </button>\n    <ul role=\"listbox\" *ngIf=\"!dropdown?.isMultiSelect\">\n      <ng-container *ngTemplateOutlet=\"searchInput\"></ng-container>\n      <li\n        *ngFor=\"\n          let option of dropdown?.options;\n          let index = index;\n          trackBy: trackByKey\n        \"\n        [id]=\"option.attributes.id\"\n        [attr.role]=\"option.attributes.role\"\n        [attr.aria-selected]=\"option.attributes['aria-selected']\"\n        [style]=\"option.attributes.style\"\n        [class]=\"option.classes\"\n        (click)=\"handler?.select(option)\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            customOption?.templateRef\n              ? customOption!.templateRef\n              : defaultOption;\n            context: { option: option, index: index }\n          \"\n        ></ng-container>\n      </li>\n    </ul>\n    <div *ngIf=\"dropdown?.isMultiSelect\" class=\"sg-fieldset-container\">\n      <ng-container *ngTemplateOutlet=\"searchInput\"></ng-container>\n      <!--TODO: Improve checkboxes in dropdown angular-->\n      <fieldset\n        #fieldsetRef\n        [attr.aria-describedby]=\"fieldset?.attributes?.id\"\n        role=\"listbox\"\n        tabIndex=\"-1\"\n        aria-multiselectable=\"true\"\n      >\n        <legend class=\"sr-only\" [id]=\"fieldset?.attributes?.id\">Options</legend>\n        <div>\n          <label\n            class=\"form-control\"\n            [attr.role]=\"option.attributes.role\"\n            [id]=\"option.attributes.id\"\n            [attr.aria-selected]=\"option.attributes['aria-selected']\"\n            [class]=\"option.classes\"\n            *ngFor=\"\n            let option of dropdown?.options;\n            let index = index;\n            trackBy: trackByKey\n          \"\n          >\n            <input\n              type=\"checkbox\"\n              (change)=\"handler?.select(option, false)\"\n              [checked]=\"option.selected\"\n              tabIndex=\"-1\"\n            />\n            <ng-container\n              *ngTemplateOutlet=\"\n              customOption?.templateRef\n                ? customOption!.templateRef\n                : defaultOption;\n              context: { option: option, index: index }\n            \"\n            ></ng-container>\n            <i></i>\n          </label>\n        </div>\n      </fieldset>\n    </div>\n  </div>\n</div>\n\n<ng-template #defaultOption let-option=\"option\">\n  {{ option[dropdown!.display] }}\n</ng-template>\n\n<ng-template #searchInput>\n  <input\n    *ngIf=\"dropdown?.isSearchable\"\n    [id]=\"toggler?.attributes?.id + '_search-input'\"\n    type=\"search\"\n    (input)=\"search($event)\"\n    placeholder=\"{{ dropdown?.texts?.searchPlaceholder }}\"\n    class=\"rounded-0 rounded-top border-0 border-bottom border-info\"\n  />\n</ng-template>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], queries: [{ propertyName: "customOption", first: true, predicate: NggDropdownOptionDirective, descendants: true }], viewQueries: [{ propertyName: "togglerRef", first: true, predicate: ["togglerRef"], descendants: true }, { propertyName: "listboxRef", first: true, predicate: ["listboxRef"], descendants: true }, { propertyName: "fieldsetRef", first: true, predicate: ["fieldsetRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div>\n  <span class=\"label\" *ngIf=\"label\" [id]=\"toggler?.attributes?.id + '_label'\">{{\n    label\n  }}</span>\n  <button\n    [attr.aria-labelledby]=\"label ? toggler?.attributes?.id + '_label' : null\"\n    [attr.aria-describedby]=\"\n      formInfo?.textContent && (formInfo?.textContent?.length ?? 0 > 0)\n        ? toggler?.attributes?.id + '_info'\n        : null\n    \"\n    type=\"button\"\n    #togglerRef\n    [id]=\"toggler?.attributes?.id\"\n    [attr.aria-haspopup]=\"toggler?.attributes?.['aria-haspopup']\"\n    [attr.aria-expanded]=\"toggler?.attributes?.['aria-expanded']\"\n    [attr.aria-owns]=\"toggler?.attributes?.['aria-owns']\"\n    [tabindex]=\"toggler?.attributes?.tabIndex\"\n    [style]=\"toggler?.attributes?.style\"\n    [class]=\"toggler?.classes\"\n    (click)=\"handler?.toggle()\"\n    [class.is-valid]=\"valid\"\n    [class.is-invalid]=\"invalid\"\n  >\n    <span>{{ dropdown?.texts?.select }}</span>\n  </button>\n  <span\n    class=\"form-info\"\n    #formInfo\n    [attr.id]=\"toggler?.attributes?.id + '_info'\"\n    ><ng-content select=\"[data-form-info]\"></ng-content\n  ></span>\n  <div\n    #listboxRef\n    [id]=\"listbox?.attributes?.id\"\n    [attr.role]=\"listbox?.attributes?.role\"\n    [attr.aria-activedescendant]=\"\n        listbox?.attributes?.['aria-activedescendant']\n      \"\n    [tabindex]=\"listbox?.attributes?.tabIndex\"\n    [style]=\"listbox?.attributes?.style\"\n    [class]=\"listbox?.classes\"\n  >\n    <button\n      type=\"button\"\n      class=\"close m-4 m-sm-2 d-block d-sm-none\"\n      (click)=\"handler?.close()\"\n    >\n      <span class=\"sr-only\">{{ dropdown?.texts?.close }}</span>\n      <i></i>\n    </button>\n    <ul role=\"listbox\" *ngIf=\"!dropdown?.isMultiSelect\">\n      <ng-container *ngTemplateOutlet=\"searchInput\"></ng-container>\n      <li\n        *ngFor=\"\n          let option of dropdown?.options;\n          let index = index;\n          trackBy: trackByKey\n        \"\n        [id]=\"option.attributes.id\"\n        [attr.role]=\"option.attributes.role\"\n        [attr.aria-selected]=\"option.attributes['aria-selected']\"\n        [style]=\"option.attributes.style\"\n        [class]=\"option.classes\"\n        (click)=\"handler?.select(option)\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            customOption?.templateRef\n              ? customOption!.templateRef\n              : defaultOption;\n            context: { option: option, index: index }\n          \"\n        ></ng-container>\n      </li>\n    </ul>\n    <div *ngIf=\"dropdown?.isMultiSelect\" class=\"sg-fieldset-container\">\n      <ng-container *ngTemplateOutlet=\"searchInput\"></ng-container>\n      <!--TODO: Improve checkboxes in dropdown angular-->\n      <fieldset\n        #fieldsetRef\n        [attr.aria-describedby]=\"fieldset?.attributes?.id\"\n        role=\"listbox\"\n        tabIndex=\"-1\"\n        aria-multiselectable=\"true\"\n      >\n        <legend class=\"sr-only\" [id]=\"fieldset?.attributes?.id\">Options</legend>\n        <div>\n          <label\n            class=\"form-control\"\n            [attr.role]=\"option.attributes.role\"\n            [id]=\"option.attributes.id\"\n            [attr.aria-selected]=\"option.attributes['aria-selected']\"\n            [class]=\"option.classes\"\n            *ngFor=\"\n            let option of dropdown?.options;\n            let index = index;\n            trackBy: trackByKey\n          \"\n          >\n            <input\n              type=\"checkbox\"\n              (change)=\"handler?.select(option, false)\"\n              [checked]=\"option.selected\"\n              tabIndex=\"-1\"\n            />\n            <ng-container\n              *ngTemplateOutlet=\"\n              customOption?.templateRef\n                ? customOption!.templateRef\n                : defaultOption;\n              context: { option: option, index: index }\n            \"\n            ></ng-container>\n            <i></i>\n          </label>\n        </div>\n      </fieldset>\n    </div>\n  </div>\n</div>\n\n<ng-template #defaultOption let-option=\"option\">\n  {{ option[dropdown!.display] }}\n</ng-template>\n\n<ng-template #searchInput>\n  <input\n    *ngIf=\"dropdown?.isSearchable\"\n    [id]=\"toggler?.attributes?.id + '_search-input'\"\n    type=\"search\"\n    (input)=\"search($event)\"\n    placeholder=\"{{ dropdown?.texts?.searchPlaceholder }}\"\n    class=\"rounded-0 rounded-top border-0 border-bottom border-info\"\n  />\n</ng-template>\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngg-dropdown', providers: [
@@ -259,20 +423,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
                 args: [NggDropdownOptionDirective]
             }] } });
 
-class NggDropdownModule {
-}
-NggDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NggDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDropdownModule, declarations: [NggDropdownComponent, NggDropdownOptionDirective], imports: [CommonModule], exports: [NggDropdownComponent, NggDropdownOptionDirective] });
-NggDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDropdownModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDropdownModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [NggDropdownComponent, NggDropdownOptionDirective],
-                    imports: [CommonModule],
-                    exports: [NggDropdownComponent, NggDropdownOptionDirective],
-                }]
-        }] });
-
 class NggDatepickerComponent {
     constructor(_cdr) {
         this._cdr = _cdr;
@@ -385,7 +535,7 @@ NggDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             useExisting: NggDatepickerComponent,
             multi: true,
         },
-    ], viewQueries: [{ propertyName: "datepickerDialogElRef", first: true, predicate: ["datepickerDialogElRef"], descendants: true }, { propertyName: "dateInputElRef", first: true, predicate: ["dateInputElRef"], descendants: true }, { propertyName: "datepickerElRef", first: true, predicate: ["datepickerElRef"], descendants: true }, { propertyName: "datepickerTriggerElRef", first: true, predicate: ["datepickerTriggerElRef"], descendants: true }], ngImport: i0, template: "<div class=\"form-group\">\n  <label *ngIf=\"label\" [for]=\"id\">{{ label }}</label>\n  <div\n    class=\"group\"\n    #datepickerElRef\n    [class.is-valid]=\"isValid\"\n    [class.is-invalid]=\"isValid === false\"\n  >\n    <input\n      [attr.id]=\"id\"\n      [attr.aria-describedby]=\"\n        formInfo?.innerText && formInfo.innerText.length > 0\n          ? id + '_info'\n          : null\n      \"\n      type=\"text\"\n      placeholder=\"yyyy-mm-dd\"\n      #dateInputElRef\n      [value]=\"data?.formattedSelectedDate || ''\"\n      (change)=\"onDateChange(dateInputElRef.value)\"\n    />\n    <button\n      #datepickerTriggerElRef\n      (click)=\"dp?.toggle()\"\n      type=\"button\"\n      class=\"primary\"\n    >\n      <i class=\"sg-icon sg-icon-calendar\">Select date</i>\n    </button>\n  </div>\n  <span class=\"form-info\" #formInfo [attr.id]=\"id + '_info'\"\n    ><ng-content select=\"[data-form-info]\"></ng-content\n  ></span>\n</div>\n<!-- TODO: get or set attributes from within datepicker instance (dp) -->\n<div\n  #datepickerDialogElRef\n  class=\"popover popover-datepicker\"\n  [class.active]=\"dp?.state?.isActive\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  aria-label=\"Choose Date\"\n>\n  <button type=\"button\" class=\"close\" (click)=\"dp?.close()\"><i></i>Close</button>\n  <div class=\"sg-date\">\n    <header>\n      <button type=\"button\" class=\"link\" (click)=\"dp?.sub(1, 'months')\">\n        <i class=\"sg-icon sg-icon-previous\">Previous month</i>\n      </button>\n      <ngg-dropdown\n        [options]=\"months\"\n        display=\"key\"\n        text=\"Select\"\n        [value]=\"data?.month\"\n        (valueChange)=\"dp?.setMonth($event)\"\n      ></ngg-dropdown>\n      <ngg-dropdown\n        *ngIf=\"years\"\n        [options]=\"years\"\n        display=\"key\"\n        text=\"Select\"\n        [value]=\"data?.year\"\n        (valueChange)=\"dp?.setYear($event)\"\n      ></ngg-dropdown>\n      <button type=\"button\" class=\"link\" (click)=\"dp?.add(1, 'months')\">\n        <i class=\"sg-icon sg-icon-next\">Next month</i>\n      </button>\n    </header>\n    <main>\n      <table role=\"grid\">\n        <thead>\n          <tr>\n            <th\n              scope=\"col\"\n              *ngFor=\"let header of data?.calendar?.headers\"\n              [abbr]=\"header.abbr\"\n              [class.sg-week-header]=\"header.type === 'week'\"\n              [class.sg-day-header]=\"header.type === 'day'\"\n            >\n              {{ header.displayText }}\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr\n            *ngFor=\"\n              let week of data?.calendar?.calendarGrid;\n              trackBy: trackWeek;\n              let i = index\n            \"\n          >\n            <th\n              *ngIf=\"data?.calendar?.weekNumbers as weekNumbers\"\n              class=\"sg-week-number\"\n            >\n              {{ weekNumbers[i] }}\n            </th>\n            <td\n              *ngFor=\"let day of week\"\n              [attr.data-date]=\"day.formattedDate\"\n              [attr.role]=\"day.selected ? 'gridcell' : null\"\n              [attr.aria-selected]=\"\n                day.selected && !data?.highlightedDate ? true : null\n              \"\n              [class.disabled]=\"day.disabled\"\n              [class.sg-date-today]=\"day.today\"\n              [title]=\"day.today ? 'Today' : ''\"\n              [tabIndex]=\"\n                day.highlighted ||\n                (day.selected && !data?.highlightedDate) ||\n                (day.today && !data?.highlightedDate && !data?.selectedDate)\n                  ? 0\n                  : -1\n              \"\n              (click)=\"day.currentMonth && dp?.select(day.date)\"\n            >\n              {{ day.day }}\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </main>\n  </div>\n</div>\n", components: [{ type: NggDropdownComponent, selector: "ngg-dropdown", inputs: ["id", "texts", "loop", "display", "useValue", "label", "options", "valid", "invalid", "compareWith", "searchFilter", "multiSelect", "searchable", "value"], outputs: ["valueChange", "touched"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], viewQueries: [{ propertyName: "datepickerDialogElRef", first: true, predicate: ["datepickerDialogElRef"], descendants: true }, { propertyName: "dateInputElRef", first: true, predicate: ["dateInputElRef"], descendants: true }, { propertyName: "datepickerElRef", first: true, predicate: ["datepickerElRef"], descendants: true }, { propertyName: "datepickerTriggerElRef", first: true, predicate: ["datepickerTriggerElRef"], descendants: true }], ngImport: i0, template: "<div class=\"form-group\">\n  <label *ngIf=\"label\" [for]=\"id\">{{ label }}</label>\n  <div\n    class=\"group\"\n    #datepickerElRef\n    [class.is-valid]=\"isValid\"\n    [class.is-invalid]=\"isValid === false\"\n  >\n    <input\n      [attr.id]=\"id\"\n      [attr.aria-describedby]=\"\n        formInfo?.innerText && formInfo.innerText.length > 0\n          ? id + '_info'\n          : null\n      \"\n      type=\"text\"\n      placeholder=\"yyyy-mm-dd\"\n      #dateInputElRef\n      [value]=\"data?.formattedSelectedDate || ''\"\n      (change)=\"onDateChange(dateInputElRef.value)\"\n    />\n    <button\n      #datepickerTriggerElRef\n      (click)=\"dp?.toggle()\"\n      type=\"button\"\n      class=\"primary\"\n    >\n      <i class=\"sg-icon sg-icon-calendar\">Select date</i>\n    </button>\n  </div>\n  <span class=\"form-info\" #formInfo [attr.id]=\"id + '_info'\"\n    ><ng-content select=\"[data-form-info]\"></ng-content\n  ></span>\n</div>\n<!-- TODO: get or set attributes from within datepicker instance (dp) -->\n<div\n  #datepickerDialogElRef\n  class=\"popover popover-datepicker\"\n  [class.active]=\"dp?.state?.isActive\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  aria-label=\"Choose Date\"\n>\n  <button type=\"button\" class=\"close\" (click)=\"dp?.close()\"><i></i>Close</button>\n  <div class=\"sg-date\">\n    <header>\n      <button type=\"button\" class=\"link\" (click)=\"dp?.sub(1, 'months')\">\n        <i class=\"sg-icon sg-icon-previous\">Previous month</i>\n      </button>\n      <ngg-dropdown\n        [options]=\"months\"\n        display=\"key\"\n        text=\"Select\"\n        [value]=\"data?.month\"\n        (valueChange)=\"dp?.setMonth($event)\"\n      ></ngg-dropdown>\n      <ngg-dropdown\n        *ngIf=\"years\"\n        [options]=\"years\"\n        display=\"key\"\n        text=\"Select\"\n        [value]=\"data?.year\"\n        (valueChange)=\"dp?.setYear($event)\"\n      ></ngg-dropdown>\n      <button type=\"button\" class=\"link\" (click)=\"dp?.add(1, 'months')\">\n        <i class=\"sg-icon sg-icon-next\">Next month</i>\n      </button>\n    </header>\n    <main>\n      <table role=\"grid\">\n        <thead>\n          <tr>\n            <th\n              scope=\"col\"\n              *ngFor=\"let header of data?.calendar?.headers\"\n              [abbr]=\"header.abbr\"\n              [class.sg-week-header]=\"header.type === 'week'\"\n              [class.sg-day-header]=\"header.type === 'day'\"\n            >\n              {{ header.displayText }}\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr\n            *ngFor=\"\n              let week of data?.calendar?.calendarGrid;\n              trackBy: trackWeek;\n              let i = index\n            \"\n          >\n            <th\n              *ngIf=\"data?.calendar?.weekNumbers as weekNumbers\"\n              class=\"sg-week-number\"\n            >\n              {{ weekNumbers[i] }}\n            </th>\n            <td\n              *ngFor=\"let day of week\"\n              [attr.data-date]=\"day.formattedDate\"\n              [attr.role]=\"day.selected ? 'gridcell' : null\"\n              [attr.aria-selected]=\"\n                day.selected && !data?.highlightedDate ? true : null\n              \"\n              [class.disabled]=\"day.disabled\"\n              [class.sg-date-today]=\"day.today\"\n              [title]=\"day.today ? 'Today' : ''\"\n              [tabIndex]=\"\n                day.highlighted ||\n                (day.selected && !data?.highlightedDate) ||\n                (day.today && !data?.highlightedDate && !data?.selectedDate)\n                  ? 0\n                  : -1\n              \"\n              (click)=\"day.currentMonth && dp?.select(day.date)\"\n            >\n              {{ day.day }}\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </main>\n  </div>\n</div>\n", components: [{ type: NggDropdownComponent, selector: "ngg-dropdown", inputs: ["id", "texts", "loop", "display", "useValue", "label", "options", "valid", "invalid", "compareWith", "searchFilter", "multiSelect", "searchable", "value"], outputs: ["valueChange", "touched"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDatepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngg-datepicker', providers: [
@@ -453,6 +603,20 @@ function dateValidator(dates) {
     };
 }
 
+class NggDropdownModule {
+}
+NggDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NggDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDropdownModule, declarations: [NggDropdownComponent, NggDropdownOptionDirective], imports: [CommonModule], exports: [NggDropdownComponent, NggDropdownOptionDirective] });
+NggDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDropdownModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDropdownModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NggDropdownComponent, NggDropdownOptionDirective],
+                    imports: [CommonModule],
+                    exports: [NggDropdownComponent, NggDropdownOptionDirective],
+                }]
+        }] });
+
 class NggDatepickerModule {
 }
 NggDatepickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -467,27 +631,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
                 }]
         }] });
 
-class NggModule {
-}
-NggModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NggModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModule, imports: [CommonModule], exports: [NggSegmentedControlModule, NggDropdownModule, NggDatepickerModule] });
-NggModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModule, imports: [[CommonModule], NggSegmentedControlModule, NggDropdownModule, NggDatepickerModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [],
-                    imports: [CommonModule],
-                    exports: [NggSegmentedControlModule, NggDropdownModule, NggDatepickerModule],
-                }]
-        }] });
-
 class NggModalComponent {
-    constructor(ref) {
+    constructor(ref, configurableFocusTrapFactory) {
         this.ref = ref;
+        this.configurableFocusTrapFactory = configurableFocusTrapFactory;
         this.isOpenChange = new EventEmitter();
         this.closed = new EventEmitter();
         this.confirm = new EventEmitter();
         this.dismiss = new EventEmitter();
+        this.configurableFocusTrap = this.configurableFocusTrapFactory.create(this.ref.nativeElement);
+    }
+    get trapFocus() {
+        return this._trapFocus;
+    }
+    set trapFocus(value) {
+        this._trapFocus = value;
+        if (value) {
+            if (this._isOpen) {
+                this.enableFocusTrap();
+            }
+        }
+        else {
+            this.disableFocusTrap();
+        }
     }
     get isOpen() {
         return this._isOpen;
@@ -495,13 +661,23 @@ class NggModalComponent {
     set isOpen(value) {
         this._isOpen = value;
         if (value) {
+            if (this.trapFocus) {
+                this.enableFocusTrap();
+            }
             disableBodyScroll(this.ref.nativeElement);
         }
         else {
+            this.disableFocusTrap();
             enableBodyScroll(this.ref.nativeElement);
         }
     }
     get open() { return this.isOpen; }
+    ngOnInit() {
+        if (this._isOpen && this.trapFocus)
+            this.enableFocusTrap();
+        else
+            this.disableFocusTrap();
+    }
     handleCloseClick(event) {
         this.closeModal(event);
     }
@@ -525,16 +701,29 @@ class NggModalComponent {
             this.isOpenChange.emit(this.isOpen);
         }
     }
+    enableFocusTrap() {
+        if (this.configurableFocusTrap) {
+            this.configurableFocusTrap.enabled = true;
+            this.configurableFocusTrap.focusInitialElementWhenReady();
+        }
+    }
+    disableFocusTrap() {
+        if (this.configurableFocusTrap) {
+            this.configurableFocusTrap.enabled = false;
+        }
+    }
     ngOnDestroy() {
+        var _a;
+        (_a = this.configurableFocusTrap) === null || _a === void 0 ? void 0 : _a.destroy();
         enableBodyScroll(this.ref.nativeElement);
     }
 }
-NggModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModalComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-NggModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: NggModalComponent, selector: "ngg-modal", inputs: { modalType: "modalType", header: "header", confirmLabel: "confirmLabel", dismissLabel: "dismissLabel", size: "size", isOpen: "isOpen" }, outputs: { isOpenChange: "isOpenChange", closed: "closed", confirm: "confirm", dismiss: "dismiss" }, host: { properties: { "class.open": "this.open" } }, viewQueries: [{ propertyName: "backdropRef", first: true, predicate: ["backdrop"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"isOpen\" [ngSwitch]=\"modalType\">\n    <aside data-testid=\"modal\" *ngSwitchCase=\"'slideout'\" role=\"dialog\" aria-modal=\"true\" [class.small]=\"size === 'sm'\" [class.medium]=\"size === 'md'\" [class.large]=\"size === 'lg'\">\n        <header ngg-modal-header data-testid=\"modal-header\" [header]=\"header\" (closed)=\"this.handleCloseClick($event)\"></header>\n        <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n            <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container> \n        </div>\n        <footer ngg-modal-footer data-testid=\"modal-footer\" *ngIf=\"dismissLabel || confirmLabel\" [dismissLabel]=\"dismissLabel\" [confirmLabel]=\"confirmLabel\" (dismiss)=\"this.handleDismiss($event)\" (confirm)=\"this.handleConfirm($event)\"></footer>\n    </aside>\n    <main data-testid=\"modal\" *ngSwitchCase=\"'takeover'\" role=\"dialog\" aria-modal=\"true\">\n        <header ngg-modal-header data-testid=\"modal-header\" [header]=\"header\" (closed)=\"this.handleCloseClick($event)\"></header>\n        <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n            <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container> \n        </div>\n        <footer ngg-modal-footer data-testid=\"modal-footer\" *ngIf=\"dismissLabel || confirmLabel\" [dismissLabel]=\"dismissLabel\" [confirmLabel]=\"confirmLabel\" (dismiss)=\"this.handleDismiss($event)\" (confirm)=\"this.handleConfirm($event)\"></footer>\n    </main>\n    <section data-testid=\"modal\" *ngSwitchDefault role=\"dialog\" aria-modal=\"true\" [class.small]=\"size === 'sm'\" [class.medium]=\"size === 'md'\" [class.large]=\"size === 'lg'\">\n        <header ngg-modal-header data-testid=\"modal-header\" [header]=\"header\" (closed)=\"this.handleCloseClick($event)\"></header>\n        <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n            <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container> \n        </div>\n        <footer ngg-modal-footer data-testid=\"modal-footer\" *ngIf=\"dismissLabel || confirmLabel\" [dismissLabel]=\"dismissLabel\" [confirmLabel]=\"confirmLabel\" (dismiss)=\"this.handleDismiss($event)\" (confirm)=\"this.handleConfirm($event)\"></footer>\n    </section>\n    <ng-template #contentTpl>\n            <ng-content></ng-content>\n    </ng-template>\n    <div #backdrop data-testid=\"modal-backdrop\" class=\"backdrop\" (click)=\"this.handleBackdropClick($event)\" [attr.aria-hidden]=\"true\"></div>\n</ng-container>", styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal-backdrop)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"], components: [{ type: i0.forwardRef(function () { return NggModalHeaderComponent; }), selector: "[ngg-modal-header]", inputs: ["header"], outputs: ["closed"] }, { type: i0.forwardRef(function () { return NggModalBodyComponent; }), selector: "[ngg-modal-body]" }, { type: i0.forwardRef(function () { return NggModalFooterComponent; }), selector: "[ngg-modal-footer]", inputs: ["dismissLabel", "confirmLabel"], outputs: ["dismiss", "confirm"] }], directives: [{ type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return i1.NgSwitch; }), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i0.forwardRef(function () { return i1.NgSwitchCase; }), selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i0.forwardRef(function () { return i1.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i0.forwardRef(function () { return i1.NgSwitchDefault; }), selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NggModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModalComponent, deps: [{ token: i0.ElementRef }, { token: i1.ConfigurableFocusTrapFactory }], target: i0.ɵɵFactoryTarget.Component });
+NggModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: NggModalComponent, selector: "ngg-modal", inputs: { modalType: "modalType", header: "header", confirmLabel: "confirmLabel", dismissLabel: "dismissLabel", size: "size", trapFocus: "trapFocus", isOpen: "isOpen" }, outputs: { isOpenChange: "isOpenChange", closed: "closed", confirm: "confirm", dismiss: "dismiss" }, host: { properties: { "class.open": "this.open" } }, viewQueries: [{ propertyName: "backdropRef", first: true, predicate: ["backdrop"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"isOpen\" [ngSwitch]=\"modalType\">\n    <aside data-testid=\"modal\" *ngSwitchCase=\"'slideout'\" role=\"dialog\" aria-modal=\"true\" [class.small]=\"size === 'sm'\" [class.medium]=\"size === 'md'\" [class.large]=\"size === 'lg'\">\n        <header ngg-modal-header data-testid=\"modal-header\" [header]=\"header\" (closed)=\"this.handleCloseClick($event)\"></header>\n        <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n            <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container> \n        </div>\n        <footer ngg-modal-footer data-testid=\"modal-footer\" *ngIf=\"dismissLabel || confirmLabel\" [dismissLabel]=\"dismissLabel\" [confirmLabel]=\"confirmLabel\" (dismiss)=\"this.handleDismiss($event)\" (confirm)=\"this.handleConfirm($event)\"></footer>\n    </aside>\n    <main data-testid=\"modal\" *ngSwitchCase=\"'takeover'\" role=\"dialog\" aria-modal=\"true\">\n        <header ngg-modal-header data-testid=\"modal-header\" [header]=\"header\" (closed)=\"this.handleCloseClick($event)\"></header>\n        <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n            <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container> \n        </div>\n        <footer ngg-modal-footer data-testid=\"modal-footer\" *ngIf=\"dismissLabel || confirmLabel\" [dismissLabel]=\"dismissLabel\" [confirmLabel]=\"confirmLabel\" (dismiss)=\"this.handleDismiss($event)\" (confirm)=\"this.handleConfirm($event)\"></footer>\n    </main>\n    <section data-testid=\"modal\" *ngSwitchDefault role=\"dialog\" aria-modal=\"true\" [class.small]=\"size === 'sm'\" [class.medium]=\"size === 'md'\" [class.large]=\"size === 'lg'\">\n        <header ngg-modal-header data-testid=\"modal-header\" [header]=\"header\" (closed)=\"this.handleCloseClick($event)\"></header>\n        <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n            <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container> \n        </div>\n        <footer ngg-modal-footer data-testid=\"modal-footer\" *ngIf=\"dismissLabel || confirmLabel\" [dismissLabel]=\"dismissLabel\" [confirmLabel]=\"confirmLabel\" (dismiss)=\"this.handleDismiss($event)\" (confirm)=\"this.handleConfirm($event)\"></footer>\n    </section>\n    <ng-template #contentTpl>\n            <ng-content></ng-content>\n    </ng-template>\n    <div #backdrop data-testid=\"modal-backdrop\" class=\"backdrop\" (click)=\"this.handleBackdropClick($event)\" [attr.aria-hidden]=\"true\"></div>\n</ng-container>", styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal-backdrop)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"], components: [{ type: i0.forwardRef(function () { return NggModalHeaderComponent; }), selector: "[ngg-modal-header]", inputs: ["header"], outputs: ["closed"] }, { type: i0.forwardRef(function () { return NggModalBodyComponent; }), selector: "[ngg-modal-body]" }, { type: i0.forwardRef(function () { return NggModalFooterComponent; }), selector: "[ngg-modal-footer]", inputs: ["dismissLabel", "confirmLabel"], outputs: ["dismiss", "confirm"] }], directives: [{ type: i0.forwardRef(function () { return i2.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return i2.NgSwitch; }), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i0.forwardRef(function () { return i2.NgSwitchCase; }), selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i0.forwardRef(function () { return i2.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i0.forwardRef(function () { return i2.NgSwitchDefault; }), selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngg-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"isOpen\" [ngSwitch]=\"modalType\">\n    <aside data-testid=\"modal\" *ngSwitchCase=\"'slideout'\" role=\"dialog\" aria-modal=\"true\" [class.small]=\"size === 'sm'\" [class.medium]=\"size === 'md'\" [class.large]=\"size === 'lg'\">\n        <header ngg-modal-header data-testid=\"modal-header\" [header]=\"header\" (closed)=\"this.handleCloseClick($event)\"></header>\n        <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n            <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container> \n        </div>\n        <footer ngg-modal-footer data-testid=\"modal-footer\" *ngIf=\"dismissLabel || confirmLabel\" [dismissLabel]=\"dismissLabel\" [confirmLabel]=\"confirmLabel\" (dismiss)=\"this.handleDismiss($event)\" (confirm)=\"this.handleConfirm($event)\"></footer>\n    </aside>\n    <main data-testid=\"modal\" *ngSwitchCase=\"'takeover'\" role=\"dialog\" aria-modal=\"true\">\n        <header ngg-modal-header data-testid=\"modal-header\" [header]=\"header\" (closed)=\"this.handleCloseClick($event)\"></header>\n        <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n            <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container> \n        </div>\n        <footer ngg-modal-footer data-testid=\"modal-footer\" *ngIf=\"dismissLabel || confirmLabel\" [dismissLabel]=\"dismissLabel\" [confirmLabel]=\"confirmLabel\" (dismiss)=\"this.handleDismiss($event)\" (confirm)=\"this.handleConfirm($event)\"></footer>\n    </main>\n    <section data-testid=\"modal\" *ngSwitchDefault role=\"dialog\" aria-modal=\"true\" [class.small]=\"size === 'sm'\" [class.medium]=\"size === 'md'\" [class.large]=\"size === 'lg'\">\n        <header ngg-modal-header data-testid=\"modal-header\" [header]=\"header\" (closed)=\"this.handleCloseClick($event)\"></header>\n        <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n            <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container> \n        </div>\n        <footer ngg-modal-footer data-testid=\"modal-footer\" *ngIf=\"dismissLabel || confirmLabel\" [dismissLabel]=\"dismissLabel\" [confirmLabel]=\"confirmLabel\" (dismiss)=\"this.handleDismiss($event)\" (confirm)=\"this.handleConfirm($event)\"></footer>\n    </section>\n    <ng-template #contentTpl>\n            <ng-content></ng-content>\n    </ng-template>\n    <div #backdrop data-testid=\"modal-backdrop\" class=\"backdrop\" (click)=\"this.handleBackdropClick($event)\" [attr.aria-hidden]=\"true\"></div>\n</ng-container>", styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal-backdrop)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { modalType: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.ConfigurableFocusTrapFactory }]; }, propDecorators: { modalType: [{
                 type: Input
             }], header: [{
                 type: Input
@@ -544,6 +733,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
                 type: Input
             }], size: [{
                 type: Input
+            }], trapFocus: [{
+                type: Input
             }], isOpen: [{
                 type: Input
             }], isOpenChange: [{
@@ -574,6 +765,7 @@ NggModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
     <h3 data-testid="modal-header-text">{{header}}</h3>
     <button data-testid="modal-close-button" class="close" (click)="this.handleClose($event)">
         <span className="sr-only">Close</span>
+        <i></i>
     </button>
     `, isInline: true, styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal-backdrop)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModalHeaderComponent, decorators: [{
@@ -582,6 +774,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
     <h3 data-testid="modal-header-text">{{header}}</h3>
     <button data-testid="modal-close-button" class="close" (click)="this.handleClose($event)">
         <span className="sr-only">Close</span>
+        <i></i>
     </button>
     `, styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal-backdrop)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"] }]
         }], propDecorators: { header: [{
@@ -613,7 +806,7 @@ NggModalFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0",
 NggModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: NggModalFooterComponent, selector: "[ngg-modal-footer]", inputs: { dismissLabel: "dismissLabel", confirmLabel: "confirmLabel" }, outputs: { dismiss: "dismiss", confirm: "confirm" }, ngImport: i0, template: `
     <button data-testid="modal-dismiss-button" *ngIf="dismissLabel" class="secondary" (click)="this.handleDismiss($event)">{{dismissLabel}}</button>
     <button data-testid="modal-confirm-button" *ngIf="confirmLabel" class="primary" (click)="this.handleConfirm($event)">{{confirmLabel}}</button>
-    `, isInline: true, styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal-backdrop)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal-backdrop)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModalFooterComponent, decorators: [{
             type: Component,
             args: [{ selector: '[ngg-modal-footer]', template: `
@@ -645,105 +838,197 @@ NggModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version:
 NggModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModalModule, declarations: [NggModalComponent,
         NggModalHeaderComponent,
         NggModalBodyComponent,
-        NggModalFooterComponent], imports: [CommonModule], exports: [NggModalComponent] });
-NggModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModalModule, imports: [[CommonModule]] });
+        NggModalFooterComponent], imports: [A11yModule, CommonModule], exports: [NggModalComponent] });
+NggModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModalModule, imports: [[A11yModule, CommonModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModalModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule],
+                    imports: [A11yModule, CommonModule],
                     exports: EXPORTS,
                     declarations: DECLARATIONS,
                 }]
         }] });
 
-class NggBadgeComponent {
-    //eslint-disable-next-line
+class NggProgressCircleComponent {
     constructor() {
-        /** The color of the component */
-        this.badgeType = '';
-        /** Callback when component is dismissed */
-        this.handleClose = new EventEmitter();
-    }
-    /** Flag whether the component can be dismissed */
-    set isCloseable(value) {
-        this._isCloseable = value;
-    }
-    get isCloseable() {
-        return this._isCloseable === '' || !!this._isCloseable;
+        this._startValue = '0deg';
+        this._endValue = '0deg';
+        /** id of the progress circle */
+        this.id = `progress-circle-${randomId()}`;
+        /** theme of the progress circle */
+        this.theme = 'warning';
     }
-    get class() {
-        return ['badge', this.badgeType].join(' ');
+    /** progress circle value in percentage */
+    set value(percent) {
+        const degrees = this.calculateDegrees(percent);
+        this._endValue = `${degrees}deg`;
     }
-    ngOnInit() {
-        if (!!this.customColor || !!this.customBackgroundColor) {
-            this.badgeType = '';
+    calculateDegrees(percent) {
+        if (percent > 100) {
+            return 180;
         }
-    }
-    close(e) {
-        this.handleClose.emit(e);
+        if (percent < 0) {
+            return 0;
+        }
+        /** formula: ((n% * 360deg) / 100% ) / 2 */
+        return percent * 1.8;
     }
 }
-NggBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NggBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: NggBadgeComponent, selector: "[ngg-badge]", inputs: { badgeType: "badgeType", isCloseable: "isCloseable", closeText: "closeText", customColor: "customColor", customBackgroundColor: "customBackgroundColor" }, outputs: { handleClose: "handleClose" }, host: { properties: { "style.color": "this.customColor", "style.background-color": "this.customBackgroundColor", "class": "this.class" } }, ngImport: i0, template: `
-    <strong>
-      <ng-content></ng-content>
-    </strong>
-    <button *ngIf="isCloseable" class="close" (click)="close($event)">
-      {{ closeText }}
-      <i></i>
-    </button>
-  `, isInline: true, directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggBadgeComponent, decorators: [{
+NggProgressCircleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggProgressCircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NggProgressCircleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: NggProgressCircleComponent, selector: "ngg-progress-circle", inputs: { id: "id", theme: "theme", value: "value" }, host: { properties: { "style.--start-value": "this._startValue", "style.--end-value": "this._endValue" } }, ngImport: i0, template: "<div\n  class=\"outer-circle\"\n  role=\"progressbar\"\n  [attr.aria-valuenow]=\"value\"\n  [attr.aria-valuemin]=\"0\"\n  [attr.aria-valuemax]=\"100\"\n  [attr.aria-label]=\"id\"\n>\n  <div class=\"ring full-ring\">\n    <div class=\"ring-progress\" [ngClass]=\"theme\"></div>\n  </div>\n  <div class=\"ring\">\n    <div class=\"ring-progress\" [ngClass]=\"theme\"></div>\n  </div>\n  <div class=\"inner-circle\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggProgressCircleComponent, decorators: [{
             type: Component,
+            args: [{ selector: 'ngg-progress-circle', template: "<div\n  class=\"outer-circle\"\n  role=\"progressbar\"\n  [attr.aria-valuenow]=\"value\"\n  [attr.aria-valuemin]=\"0\"\n  [attr.aria-valuemax]=\"100\"\n  [attr.aria-label]=\"id\"\n>\n  <div class=\"ring full-ring\">\n    <div class=\"ring-progress\" [ngClass]=\"theme\"></div>\n  </div>\n  <div class=\"ring\">\n    <div class=\"ring-progress\" [ngClass]=\"theme\"></div>\n  </div>\n  <div class=\"inner-circle\">\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
+        }], propDecorators: { _startValue: [{
+                type: HostBinding,
+                args: ['style.--start-value']
+            }], _endValue: [{
+                type: HostBinding,
+                args: ['style.--end-value']
+            }], id: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }] } });
+
+class NggProgressCircleModule {
+}
+NggProgressCircleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggProgressCircleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NggProgressCircleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggProgressCircleModule, declarations: [NggProgressCircleComponent], imports: [CommonModule], exports: [NggProgressCircleComponent] });
+NggProgressCircleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggProgressCircleModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggProgressCircleModule, decorators: [{
+            type: NgModule,
             args: [{
-                    // we need to disable this warning since we don't want the badge component to create a new element
-                    // eslint-disable-next-line @angular-eslint/component-selector
-                    selector: '[ngg-badge]',
+                    declarations: [NggProgressCircleComponent],
+                    imports: [CommonModule],
+                    exports: [NggProgressCircleComponent],
+                }]
+        }] });
+
+class NggSegmentedControlComponent {
+}
+NggSegmentedControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggSegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NggSegmentedControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: NggSegmentedControlComponent, selector: "ngg-segmented-control", inputs: { $controls: "$controls" }, ngImport: i0, template: `
+    <div class="group">
+      <a
+        *ngFor="let control of $controls | async"
+        [routerLink]="control.url"
+        routerLinkActive="active"
+        class="button"
+        >{{ control.text }}</a
+      >
+    </div>
+  `, isInline: true, directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i2$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggSegmentedControlComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngg-segmented-control',
                     template: `
-    <strong>
-      <ng-content></ng-content>
-    </strong>
-    <button *ngIf="isCloseable" class="close" (click)="close($event)">
-      {{ closeText }}
-      <i></i>
-    </button>
+    <div class="group">
+      <a
+        *ngFor="let control of $controls | async"
+        [routerLink]="control.url"
+        routerLinkActive="active"
+        class="button"
+        >{{ control.text }}</a
+      >
+    </div>
   `,
+                    styles: [],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { badgeType: [{
-                type: Input
-            }], isCloseable: [{
-                type: Input
-            }], closeText: [{
+        }], propDecorators: { $controls: [{
                 type: Input
-            }], customColor: [{
-                type: HostBinding,
-                args: ['style.color']
-            }, {
+            }] } });
+
+class NggSegmentedControlModule {
+}
+NggSegmentedControlModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggSegmentedControlModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NggSegmentedControlModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggSegmentedControlModule, declarations: [NggSegmentedControlComponent], imports: [RouterModule, CommonModule], exports: [NggSegmentedControlComponent] });
+NggSegmentedControlModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggSegmentedControlModule, imports: [[RouterModule, CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggSegmentedControlModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NggSegmentedControlComponent],
+                    imports: [RouterModule, CommonModule],
+                    exports: [NggSegmentedControlComponent],
+                }]
+        }] });
+
+class NggButtonComponent {
+    get classes() {
+        return [this.variant, this.size ? this.size : false].filter(Boolean).join(" ");
+    }
+}
+NggButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NggButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: NggButtonComponent, selector: "[ngg-button]", inputs: { variant: "variant", size: "size" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '[ngg-button]',
+                    template: `<ng-content></ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], propDecorators: { variant: [{
                 type: Input
-            }], customBackgroundColor: [{
-                type: HostBinding,
-                args: ['style.background-color']
-            }, {
+            }], size: [{
                 type: Input
-            }], class: [{
+            }], classes: [{
                 type: HostBinding,
                 args: ['class']
-            }], handleClose: [{
-                type: Output
             }] } });
 
-class NggBadgeModule {
+class NggButtonModule {
 }
-NggBadgeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NggBadgeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggBadgeModule, declarations: [NggBadgeComponent], imports: [CommonModule], exports: [NggBadgeComponent] });
-NggBadgeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggBadgeModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggBadgeModule, decorators: [{
+NggButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NggButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggButtonModule, declarations: [NggButtonComponent], imports: [CommonModule], exports: [NggButtonComponent] });
+NggButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggButtonModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggButtonModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [NggBadgeComponent],
+                    declarations: [NggButtonComponent],
                     imports: [CommonModule],
-                    exports: [NggBadgeComponent],
+                    exports: [NggButtonComponent],
+                }]
+        }] });
+
+class NggModule {
+}
+NggModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NggModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModule, imports: [CommonModule], exports: [NggAccordionModule,
+        NggBadgeModule,
+        NggButtonModule,
+        NggDatepickerModule,
+        NggDropdownModule,
+        NggModalModule,
+        NggProgressCircleModule,
+        NggSegmentedControlModule] });
+NggModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModule, imports: [[CommonModule], NggAccordionModule,
+        NggBadgeModule,
+        NggButtonModule,
+        NggDatepickerModule,
+        NggDropdownModule,
+        NggModalModule,
+        NggProgressCircleModule,
+        NggSegmentedControlModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: NggModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [CommonModule],
+                    exports: [
+                        NggAccordionModule,
+                        NggBadgeModule,
+                        NggButtonModule,
+                        NggDatepickerModule,
+                        NggDropdownModule,
+                        NggModalModule,
+                        NggProgressCircleModule,
+                        NggSegmentedControlModule,
+                    ],
                 }]
         }] });
 
@@ -751,5 +1036,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NggBadgeComponent, NggBadgeModule, NggDatepickerComponent, NggDatepickerModule, NggDropdownComponent, NggDropdownModule, NggDropdownOptionDirective, NggModalBodyComponent, NggModalComponent, NggModalFooterComponent, NggModalHeaderComponent, NggModalModule, NggModule, NggSegmentedControlComponent, NggSegmentedControlModule, dateValidator };
+export { NggAccordionComponent, NggAccordionListItemComponent, NggAccordionModule, NggBadgeComponent, NggBadgeModule, NggButtonComponent, NggButtonModule, NggDatepickerComponent, NggDatepickerModule, NggDropdownComponent, NggDropdownModule, NggDropdownOptionDirective, NggModalBodyComponent, NggModalComponent, NggModalFooterComponent, NggModalHeaderComponent, NggModalModule, NggModule, NggProgressCircleComponent, NggProgressCircleModule, NggSegmentedControlComponent, NggSegmentedControlModule, dateValidator };
 //# sourceMappingURL=sebgroup-green-angular.mjs.map