@theseam/ui-common 1.0.0-beta.8 → 1.0.0-beta.9

package/fesm2022/theseam-ui-common-menu.mjs

@@ -349,10 +349,10 @@ const menuDropdownPanelOut = animation([
 ]);
 
 class MenuDividerComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MenuDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: MenuDividerComponent, isStandalone: false, selector: "seam-menu-divider", host: { classAttribute: "dropdown-divider d-block" }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MenuDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: MenuDividerComponent, isStandalone: false, selector: "seam-menu-divider", host: { classAttribute: "dropdown-divider d-block" }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MenuDividerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MenuDividerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'seam-menu-divider', template: ``, host: {
                         class: 'dropdown-divider d-block',
@@ -477,10 +477,10 @@ class MenuItemComponent extends _seamMenuItemMixinBase {
     _hasFocus() {
         return (this._document && this._document.activeElement === this._getHostElement());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MenuItemComponent, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }, { token: i1.FocusMonitor }, { token: i0.ChangeDetectorRef }, { token: THESEAM_MENU_PANEL, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: MenuItemComponent, isStandalone: false, selector: "[seamMenuItem]", inputs: { disabled: "disabled", role: "role", icon: "icon", iconClass: "iconClass", sublevelIcon: "sublevelIcon", subLevelIconClass: "subLevelIconClass", badgeText: "badgeText", badgeTheme: "badgeTheme" }, host: { listeners: { "click": "_checkDisabled($event)", "mouseenter": "_handleMouseEnter()" }, properties: { "attr.role": "role", "class.seam-menu-item-highlighted": "_highlighted", "class.seam-menu-item-submenu-trigger": "_triggersSubmenu", "attr.tabindex": "_getTabIndex()", "attr.aria-disabled": "disabled.toString()", "attr.disabled": "disabled || null" }, classAttribute: "seam-menu-item dropdown-item" }, exportAs: ["seamMenuItem"], usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex flex-row\">\n  <seam-icon\n    *ngIf=\"icon\"\n    style=\"width: 30px; height: 20px; flex: 0 0 auto\"\n    class=\"pr-2\"\n    [icon]=\"icon\"\n    [iconClass]=\"iconClass\"\n    iconType=\"image-fill\"\n  >\n  </seam-icon>\n\n  <div class=\"text-truncate\">\n    <ng-content></ng-content>\n  </div>\n\n  <div *ngIf=\"badgeText\" class=\"ml-2\">\n    <span\n      class=\"badge badge-pill{{\n        badgeTheme ? ' badge-' + badgeTheme : ''\n      }} position-relative\"\n      style=\"top: -2px\"\n      >{{ badgeText }}</span\n    >\n  </div>\n\n  <div class=\"d-flex flex-grow-1 justify-content-end\">\n    <seam-icon\n      *ngIf=\"_triggersSubmenu\"\n      style=\"width: 30px; height: 20px; flex: 0 0 auto\"\n      class=\"pl-2\"\n      [icon]=\"sublevelIcon\"\n      [iconClass]=\"subLevelIconClass\"\n      iconType=\"image-fill\"\n    >\n    </seam-icon>\n  </div>\n</div>\n", styles: [":host.cdk-mouse-focused:not(:hover){background:transparent}:host[aria-expanded]{color:#16181b;text-decoration:none;background-color:#e9ecef}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MenuItemComponent, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }, { token: i1.FocusMonitor }, { token: i0.ChangeDetectorRef }, { token: THESEAM_MENU_PANEL, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: MenuItemComponent, isStandalone: false, selector: "[seamMenuItem]", inputs: { disabled: "disabled", role: "role", icon: "icon", iconClass: "iconClass", sublevelIcon: "sublevelIcon", subLevelIconClass: "subLevelIconClass", badgeText: "badgeText", badgeTheme: "badgeTheme" }, host: { listeners: { "click": "_checkDisabled($event)", "mouseenter": "_handleMouseEnter()" }, properties: { "attr.role": "role", "class.seam-menu-item-highlighted": "_highlighted", "class.seam-menu-item-submenu-trigger": "_triggersSubmenu", "attr.tabindex": "_getTabIndex()", "attr.aria-disabled": "disabled.toString()", "attr.disabled": "disabled || null" }, classAttribute: "seam-menu-item dropdown-item" }, exportAs: ["seamMenuItem"], usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex flex-row\">\n  <seam-icon\n    *ngIf=\"icon\"\n    style=\"width: 30px; height: 20px; flex: 0 0 auto\"\n    class=\"pr-2\"\n    [icon]=\"icon\"\n    [iconClass]=\"iconClass\"\n    iconType=\"image-fill\"\n  >\n  </seam-icon>\n\n  <div class=\"text-truncate\">\n    <ng-content></ng-content>\n  </div>\n\n  <div *ngIf=\"badgeText\" class=\"ml-2\">\n    <span\n      class=\"badge badge-pill{{\n        badgeTheme ? ' badge-' + badgeTheme : ''\n      }} position-relative\"\n      style=\"top: -2px\"\n      >{{ badgeText }}</span\n    >\n  </div>\n\n  <div class=\"d-flex flex-grow-1 justify-content-end\">\n    <seam-icon\n      *ngIf=\"_triggersSubmenu\"\n      style=\"width: 30px; height: 20px; flex: 0 0 auto\"\n      class=\"pl-2\"\n      [icon]=\"sublevelIcon\"\n      [iconClass]=\"subLevelIconClass\"\n      iconType=\"image-fill\"\n    >\n    </seam-icon>\n  </div>\n</div>\n", styles: [":host.cdk-mouse-focused:not(:hover){background:transparent}:host[aria-expanded]{color:#16181b;text-decoration:none;background-color:#e9ecef}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MenuItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MenuItemComponent, decorators: [{
             type: Component,
             args: [{ selector: '[seamMenuItem]', exportAs: 'seamMenuItem', inputs: ['disabled'], host: {
                         '[attr.role]': 'role',
@@ -698,15 +698,15 @@ class MenuComponent {
             event.element.scrollTop = 0;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: MenuComponent, isStandalone: false, selector: "seam-menu", inputs: { menuClass: "menuClass", baseWidth: "baseWidth", animationType: "animationType" }, outputs: { closed: "closed" }, providers: [LIB_MENU], viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], exportAs: ["seamMenu"], ngImport: i0, template: "<ng-template>\n  <div\n    class=\"seam-menu-container\"\n    @slideDown\n    (@slideDown.start)=\"_onAnimationStart($event)\"\n    (@slideDown.done)=\"_onAnimationDone($event)\"\n    [class.seam-menu-anim--slide]=\"animationType === 'slide'\"\n    [class.seam-menu-anim--fade]=\"animationType === 'fade'\"\n    [id]=\"panelId\"\n  >\n    <div\n      class=\"dropdown-menu show position-static{{\n        menuClass ? ' ' + menuClass : ''\n      }}\"\n      [style.width]=\"_menuWidth$ | async\"\n      [class.pt-0]=\"hasHeader$ | async\"\n      [class.pb-0]=\"hasFooter$ | async\"\n      (keydown)=\"_handleKeydown($event)\"\n      (click)=\"_dropdownMenuClick($event)\"\n      tabindex=\"-1\"\n      role=\"menu\"\n    >\n      <ng-content></ng-content>\n    </div>\n  </div>\n</ng-template>\n", styles: [".seam-menu-container.seam-menu-anim--slide{overflow:hidden}.seam-menu-container.ng-animating,.dropdown-menu.ng-animating{-webkit-user-select:none;user-select:none;pointer-events:none}\n"], dependencies: [{ kind: "pipe", type: i2.AsyncPipe, name: "async" }], animations: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: MenuComponent, isStandalone: false, selector: "seam-menu", inputs: { menuClass: "menuClass", baseWidth: "baseWidth", animationType: "animationType" }, outputs: { closed: "closed" }, providers: [LIB_MENU], viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], exportAs: ["seamMenu"], ngImport: i0, template: "<ng-template>\n  <div\n    class=\"seam-menu-container\"\n    @slideDown\n    (@slideDown.start)=\"_onAnimationStart($event)\"\n    (@slideDown.done)=\"_onAnimationDone($event)\"\n    [class.seam-menu-anim--slide]=\"animationType === 'slide'\"\n    [class.seam-menu-anim--fade]=\"animationType === 'fade'\"\n    [id]=\"panelId\"\n  >\n    <div\n      class=\"dropdown-menu show position-static{{\n        menuClass ? ' ' + menuClass : ''\n      }}\"\n      [style.width]=\"_menuWidth$ | async\"\n      [class.pt-0]=\"hasHeader$ | async\"\n      [class.pb-0]=\"hasFooter$ | async\"\n      (keydown)=\"_handleKeydown($event)\"\n      (click)=\"_dropdownMenuClick($event)\"\n      tabindex=\"-1\"\n      role=\"menu\"\n    >\n      <ng-content></ng-content>\n    </div>\n  </div>\n</ng-template>\n", styles: [".seam-menu-container.seam-menu-anim--slide{overflow:hidden}.seam-menu-container.ng-animating,.dropdown-menu.ng-animating{-webkit-user-select:none;user-select:none;pointer-events:none}\n"], dependencies: [{ kind: "pipe", type: i2.AsyncPipe, name: "async" }], animations: [
             trigger('slideDown', [
                 transition(':enter', useAnimation(menuDropdownPanelIn)),
                 transition(':leave', useAnimation(menuDropdownPanelOut)),
             ]),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'seam-menu', providers: [LIB_MENU], animations: [
                         trigger('slideDown', [
@@ -1111,13 +1111,13 @@ class MenuToggleDirective {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MenuToggleDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i1$1.Overlay }, { token: i1.FocusMonitor }, { token: THESEAM_MENU_PANEL, optional: true }, { token: MenuItemComponent, optional: true, self: true }, { token: i4.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.6", type: MenuToggleDirective, isStandalone: false, selector: "[seamMenuToggle]", inputs: { menu: ["seamMenuToggle", "menu"], positions: "positions", seamMenuTogglePositionsOffsetY: "seamMenuTogglePositionsOffsetY" }, outputs: { menuToggle: "menuToggle", menuOpened: "menuOpened", menuClosed: "menuClosed" }, host: { attributes: { "aria-haspopup": "true" }, listeners: { "mousedown": "_onMouseDown($event)", "keydown": "_onKeydown($event)", "click": "_onClick($event)", "document:keydown": "_onDocumentKeydown($event)" }, properties: { "attr.aria-expanded": "menuOpen() || null", "attr.aria-controls": "menuOpen() ? menu.panelId : null" }, classAttribute: "seam-menu-toggle" }, exportAs: ["seamMenuToggle"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MenuToggleDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i1$1.Overlay }, { token: i1.FocusMonitor }, { token: THESEAM_MENU_PANEL, optional: true }, { token: MenuItemComponent, optional: true, self: true }, { token: i4.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: MenuToggleDirective, isStandalone: false, selector: "[seamMenuToggle]", inputs: { menu: ["seamMenuToggle", "menu"], positions: "positions", seamMenuTogglePositionsOffsetY: "seamMenuTogglePositionsOffsetY" }, outputs: { menuToggle: "menuToggle", menuOpened: "menuOpened", menuClosed: "menuClosed" }, host: { attributes: { "aria-haspopup": "true" }, listeners: { "mousedown": "_onMouseDown($event)", "keydown": "_onKeydown($event)", "click": "_onClick($event)", "document:keydown": "_onDocumentKeydown($event)" }, properties: { "attr.aria-expanded": "menuOpen() || null", "attr.aria-controls": "menuOpen() ? menu.panelId : null" }, classAttribute: "seam-menu-toggle" }, exportAs: ["seamMenuToggle"], ngImport: i0 });
 }
 __decorate([
     InputNumber(0)
 ], MenuToggleDirective.prototype, "seamMenuTogglePositionsOffsetY", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MenuToggleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MenuToggleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[seamMenuToggle]',
@@ -1208,10 +1208,10 @@ class MenuFooterActionComponent {
     _isAnchor() {
         return this._elementRef.nativeElement.nodeName.toLowerCase() === 'a';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MenuFooterActionComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: MenuFooterActionComponent, isStandalone: false, selector: "button[seamMenuFooterAction],a[seamMenuFooterAction]", inputs: { type: "type" }, host: { properties: { "attr.type": "this._attrType", "class.btn": "this._classBtn", "class.btn-link": "this._classBtnLink", "style.padding.px": "this._stylePadding", "style.border.px": "this._styleBorder", "style.display.px": "this._styleDisplay" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MenuFooterActionComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: MenuFooterActionComponent, isStandalone: false, selector: "button[seamMenuFooterAction],a[seamMenuFooterAction]", inputs: { type: "type" }, host: { properties: { "attr.type": "this._attrType", "class.btn": "this._classBtn", "class.btn-link": "this._classBtnLink", "style.padding.px": "this._stylePadding", "style.border.px": "this._styleBorder", "style.display.px": "this._styleDisplay" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MenuFooterActionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MenuFooterActionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'button[seamMenuFooterAction],a[seamMenuFooterAction]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-content></ng-content>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { _attrType: [{
@@ -1251,10 +1251,10 @@ class MenuFooterComponent {
             this._parentMenu.setFooter(undefined);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MenuFooterComponent, deps: [{ token: THESEAM_MENU_PANEL, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: MenuFooterComponent, isStandalone: false, selector: "seam-menu-footer", host: { classAttribute: "d-flex flex-column text-center bg-light border-top rounded-bottom py-2" }, ngImport: i0, template: "<ng-content\n  select=\"a[seamMenuFooterAction],button[seamMenuFooterAction]\"\n></ng-content>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MenuFooterComponent, deps: [{ token: THESEAM_MENU_PANEL, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: MenuFooterComponent, isStandalone: false, selector: "seam-menu-footer", host: { classAttribute: "d-flex flex-column text-center bg-light border-top rounded-bottom py-2" }, ngImport: i0, template: "<ng-content\n  select=\"a[seamMenuFooterAction],button[seamMenuFooterAction]\"\n></ng-content>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MenuFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MenuFooterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'seam-menu-footer', host: {
                         class: 'd-flex flex-column text-center bg-light border-top rounded-bottom py-2',
@@ -1281,10 +1281,10 @@ class MenuHeaderComponent {
             this._parentMenu.setHeader(undefined);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MenuHeaderComponent, deps: [{ token: THESEAM_MENU_PANEL, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: MenuHeaderComponent, isStandalone: false, selector: "seam-menu-header", host: { classAttribute: "d-flex flex-column bg-light border-bottom rounded-top py-2 mb-2" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MenuHeaderComponent, deps: [{ token: THESEAM_MENU_PANEL, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: MenuHeaderComponent, isStandalone: false, selector: "seam-menu-header", host: { classAttribute: "d-flex flex-column bg-light border-bottom rounded-top py-2 mb-2" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MenuHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MenuHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'seam-menu-header', host: {
                         class: 'd-flex flex-column bg-light border-bottom rounded-top py-2 mb-2',
@@ -1297,8 +1297,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
                 }] }] });
 
 class TheSeamMenuModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: TheSeamMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.6", ngImport: i0, type: TheSeamMenuModule, declarations: [MenuComponent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.7", ngImport: i0, type: TheSeamMenuModule, declarations: [MenuComponent,
             MenuToggleDirective,
             MenuItemComponent,
             MenuDividerComponent,
@@ -1313,10 +1313,10 @@ class TheSeamMenuModule {
             MenuFooterComponent,
             MenuFooterActionComponent,
             MenuHeaderComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: TheSeamMenuModule, imports: [CommonModule, OverlayModule, TheSeamIconModule, TheSeamIconModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamMenuModule, imports: [CommonModule, OverlayModule, TheSeamIconModule, TheSeamIconModule,
             OverlayModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: TheSeamMenuModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [

package/fesm2022/theseam-ui-common-modal.mjs

@@ -287,8 +287,8 @@ class ModalContainerComponent extends BasePortalOutlet {
     getNativeElement() {
         return this._elementRef.nativeElement;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModalContainerComponent, deps: [{ token: i0.ElementRef }, { token: i1.ConfigurableFocusTrapFactory }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT, optional: true }, { token: ModalConfig }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: ModalContainerComponent, isStandalone: false, selector: "seam-modal-container", host: { listeners: { "@dialog.start": "_onAnimationStart($event)", "@dialog.done": "_animationDone.next($event)", "click": "_onClick($event)" }, properties: { "@dialog": "{\n      value: _state,\n      params: {\n        enterAnimationDuration: _config.enterAnimationDuration,\n        exitAnimationDuration: _config.exitAnimationDuration\n      }\n    }", "attr.id": "this._idAttr", "attr.aria-label": "this._ariaLabel", "attr.aria-describedby": "this._ariaDescribedBy", "attr.role": "this._role", "class.seam-modal-container": "this._seamModalContainer", "class.modal-dialog": "this._modalDialog", "class.modal-dialog-centered": "this._modalDialogCentered", "class.modal-sm": "this._modalDialogSm", "class.modal-lg": "this._modalDialogLg", "class.modal-xl": "this._modalDialogXl" } }, viewQueries: [{ propertyName: "_portalHost", first: true, predicate: CdkPortalOutlet /*, { static: true }*/, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"modal-content\" [tabindex]=\"-1\">\n  <ng-template cdkPortalOutlet></ng-template>\n</div>\n", styles: [":host[tabindex=\"-1\"]:focus:not(:focus-visible){outline:0!important}\n"], dependencies: [{ kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ModalContainerComponent, deps: [{ token: i0.ElementRef }, { token: i1.ConfigurableFocusTrapFactory }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT, optional: true }, { token: ModalConfig }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: ModalContainerComponent, isStandalone: false, selector: "seam-modal-container", host: { listeners: { "@dialog.start": "_onAnimationStart($event)", "@dialog.done": "_animationDone.next($event)", "click": "_onClick($event)" }, properties: { "@dialog": "{\n      value: _state,\n      params: {\n        enterAnimationDuration: _config.enterAnimationDuration,\n        exitAnimationDuration: _config.exitAnimationDuration\n      }\n    }", "attr.id": "this._idAttr", "attr.aria-label": "this._ariaLabel", "attr.aria-describedby": "this._ariaDescribedBy", "attr.role": "this._role", "class.seam-modal-container": "this._seamModalContainer", "class.modal-dialog": "this._modalDialog", "class.modal-dialog-centered": "this._modalDialogCentered", "class.modal-sm": "this._modalDialogSm", "class.modal-lg": "this._modalDialogLg", "class.modal-xl": "this._modalDialogXl" } }, viewQueries: [{ propertyName: "_portalHost", first: true, predicate: CdkPortalOutlet /*, { static: true }*/, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"modal-content\" [tabindex]=\"-1\">\n  <ng-template cdkPortalOutlet></ng-template>\n</div>\n", styles: [":host[tabindex=\"-1\"]:focus:not(:focus-visible){outline:0!important}\n"], dependencies: [{ kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [
             trigger('dialog', [
                 state('enter', style({ opacity: 1 })),
                 state('exit, void', style({ opacity: 0 })),
@@ -297,7 +297,7 @@ class ModalContainerComponent extends BasePortalOutlet {
             ]),
         ] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModalContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ModalContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'seam-modal-container', animations: [
                         trigger('dialog', [
@@ -911,10 +911,10 @@ class Modal {
         // eslint-disable-next-line new-cap
         return { ...new dialogConfig(), ...config };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: Modal, deps: [{ token: i1$1.Overlay }, { token: i0.Injector }, { token: MODAL_SCROLL_STRATEGY }, { token: Modal, optional: true, skipSelf: true }, { token: i3$1.Location, optional: true }, { token: i3$2.TheSeamOverlayScrollbarsService }, { token: i4.TheSeamDynamicComponentLoader }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: Modal, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: Modal, deps: [{ token: i1$1.Overlay }, { token: i0.Injector }, { token: MODAL_SCROLL_STRATEGY }, { token: Modal, optional: true, skipSelf: true }, { token: i3$1.Location, optional: true }, { token: i3$2.TheSeamOverlayScrollbarsService }, { token: i4.TheSeamDynamicComponentLoader }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: Modal, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: Modal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: Modal, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1$1.Overlay }, { type: i0.Injector }, { type: undefined, decorators: [{
@@ -980,10 +980,10 @@ class ModalCloseDirective {
             this.modalRef = getClosestModal(this._elementRef, this._modal.openDialogs);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModalCloseDirective, deps: [{ token: i0.ElementRef }, { token: Modal }, { token: ModalRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.6", type: ModalCloseDirective, isStandalone: false, selector: "button[seamModalClose]", inputs: { type: "type", ariaLabel: ["aria-label", "ariaLabel"], seamModalClose: "seamModalClose", seamModalNext: "seamModalNext", seamModalNextConfig: "seamModalNextConfig" }, host: { listeners: { "click": "_onClick()" }, properties: { "attr.type": "this._attrType", "attr.aria-label": "this._attrAriaLabel" } }, exportAs: ["seamModalClose"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ModalCloseDirective, deps: [{ token: i0.ElementRef }, { token: Modal }, { token: ModalRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: ModalCloseDirective, isStandalone: false, selector: "button[seamModalClose]", inputs: { type: "type", ariaLabel: ["aria-label", "ariaLabel"], seamModalClose: "seamModalClose", seamModalNext: "seamModalNext", seamModalNextConfig: "seamModalNextConfig" }, host: { listeners: { "click": "_onClick()" }, properties: { "attr.type": "this._attrType", "attr.aria-label": "this._attrAriaLabel" } }, exportAs: ["seamModalClose"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModalCloseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ModalCloseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[seamModalClose]',
@@ -1019,10 +1019,10 @@ class ModalFooterTplDirective {
     constructor(template) {
         this.template = template;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModalFooterTplDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.6", type: ModalFooterTplDirective, isStandalone: false, selector: "[seamModalFooterTpl]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ModalFooterTplDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: ModalFooterTplDirective, isStandalone: false, selector: "[seamModalFooterTpl]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModalFooterTplDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ModalFooterTplDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[seamModalFooterTpl]',
@@ -1035,10 +1035,10 @@ class ModalHeaderIconTplDirective {
     constructor(template) {
         this.template = template;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModalHeaderIconTplDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.6", type: ModalHeaderIconTplDirective, isStandalone: false, selector: "[seamModalHeaderIconTpl]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ModalHeaderIconTplDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: ModalHeaderIconTplDirective, isStandalone: false, selector: "[seamModalHeaderIconTpl]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModalHeaderIconTplDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ModalHeaderIconTplDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[seamModalHeaderIconTpl]',
@@ -1051,10 +1051,10 @@ class ModalHeaderTitleTplDirective {
     constructor(template) {
         this.template = template;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModalHeaderTitleTplDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.6", type: ModalHeaderTitleTplDirective, isStandalone: false, selector: "[seamModalHeaderTitleTpl]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ModalHeaderTitleTplDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: ModalHeaderTitleTplDirective, isStandalone: false, selector: "[seamModalHeaderTitleTpl]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModalHeaderTitleTplDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ModalHeaderTitleTplDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[seamModalHeaderTitleTpl]',
@@ -1068,10 +1068,10 @@ class ModalTitleDirective {
     constructor(_elementRef) {
         this._elementRef = _elementRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModalTitleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.6", type: ModalTitleDirective, isStandalone: false, selector: "[seamModalTitle]", host: { properties: { "class.modal-title": "this._modalTitleCss" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ModalTitleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: ModalTitleDirective, isStandalone: false, selector: "[seamModalTitle]", host: { properties: { "class.modal-title": "this._modalTitleCss" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModalTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ModalTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[seamModalTitle]',
@@ -1095,10 +1095,10 @@ class ModalDirective {
         const ref = this.modal.openFromTemplate(this.template);
         // ref.backdropClick().subscribe(e => console.log('backdropClick', e))
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModalDirective, deps: [{ token: i0.TemplateRef }, { token: Modal }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.6", type: ModalDirective, isStandalone: false, selector: "[seamModal]", exportAs: ["seamModal"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ModalDirective, deps: [{ token: i0.TemplateRef }, { token: Modal }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: ModalDirective, isStandalone: false, selector: "[seamModal]", exportAs: ["seamModal"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModalDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ModalDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[seamModal]',
@@ -1110,10 +1110,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
 class ModalBodyComponent {
     _modalBodyCss = true;
     _paddingCss = true;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModalBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: ModalBodyComponent, isStandalone: false, selector: "seam-modal-body", host: { properties: { "class.modal-body": "this._modalBodyCss", "class.p-3": "this._paddingCss" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ModalBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: ModalBodyComponent, isStandalone: false, selector: "seam-modal-body", host: { properties: { "class.modal-body": "this._modalBodyCss", "class.p-3": "this._paddingCss" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModalBodyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ModalBodyComponent, decorators: [{
             type: Component,
             args: [{ selector: 'seam-modal-body', standalone: false, template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { _modalBodyCss: [{
@@ -1126,10 +1126,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
 
 class ModalFooterComponent {
     _modalFooterCss = true;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: ModalFooterComponent, isStandalone: false, selector: "seam-modal-footer", host: { properties: { "class.modal-footer": "this._modalFooterCss" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: ModalFooterComponent, isStandalone: false, selector: "seam-modal-footer", host: { properties: { "class.modal-footer": "this._modalFooterCss" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModalFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ModalFooterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'seam-modal-footer', standalone: false, template: "<ng-content></ng-content>\n" }]
         }], propDecorators: { _modalFooterCss: [{
@@ -1142,10 +1142,10 @@ class ModalHeaderComponent {
     hasCloseBtn = true;
     _titleDirective;
     _closeDirective;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: ModalHeaderComponent, isStandalone: false, selector: "seam-modal-header", inputs: { hasCloseBtn: "hasCloseBtn" }, host: { properties: { "class.modal-header": "this._modalHeaderCss" } }, queries: [{ propertyName: "_titleDirective", first: true, predicate: ModalTitleDirective, descendants: true, static: true }, { propertyName: "_closeDirective", first: true, predicate: ModalCloseDirective, descendants: true, static: true }], ngImport: i0, template: "<ng-content></ng-content>\n\n<!-- <button seamModalClose>\n  <span aria-hidden=\"true\">&times;</span>\n</button> -->\n\n<!-- seam-modal-header-close -->\n", styles: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: ModalHeaderComponent, isStandalone: false, selector: "seam-modal-header", inputs: { hasCloseBtn: "hasCloseBtn" }, host: { properties: { "class.modal-header": "this._modalHeaderCss" } }, queries: [{ propertyName: "_titleDirective", first: true, predicate: ModalTitleDirective, descendants: true, static: true }, { propertyName: "_closeDirective", first: true, predicate: ModalCloseDirective, descendants: true, static: true }], ngImport: i0, template: "<ng-content></ng-content>\n\n<!-- <button seamModalClose>\n  <span aria-hidden=\"true\">&times;</span>\n</button> -->\n\n<!-- seam-modal-header-close -->\n", styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModalHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ModalHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'seam-modal-header', standalone: false, template: "<ng-content></ng-content>\n\n<!-- <button seamModalClose>\n  <span aria-hidden=\"true\">&times;</span>\n</button> -->\n\n<!-- seam-modal-header-close -->\n" }]
         }], propDecorators: { _modalHeaderCss: [{
@@ -1287,13 +1287,13 @@ class ModalComponent {
     isRouteModal() {
         return this._route.outlet === 'modal';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModalComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1$1.Overlay }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: ModalComponent, isStandalone: false, selector: "seam-modal", inputs: { closeOnKeyPressed: "closeOnKeyPressed", showCloseBtn: "showCloseBtn", titleText: "titleText", icon: "icon", iconTpl: "iconTpl", titleTpl: "titleTpl", footerTpl: "footerTpl", form: "form" }, outputs: { modalClosed: "modalClosed", overlayDetached: "overlayDetached", formSubmit: "formSubmit" }, providers: [LIB_MODAL], queries: [{ propertyName: "_queryIconTpl", first: true, predicate: ModalHeaderIconTplDirective, descendants: true, static: true }, { propertyName: "_queryTitleTpl", first: true, predicate: ModalHeaderTitleTplDirective, descendants: true, static: true }, { propertyName: "_queryFooterTpl", first: true, predicate: ModalFooterTplDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "_modalTpl", first: true, predicate: ["modalTpl"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #modalTpl>\n  <form\n    *ngIf=\"form\"\n    [formGroup]=\"form\"\n    (ngSubmit)=\"_onSubmit()\"\n    class=\"p-4\"\n    style=\"max-width: 800px\"\n  >\n    <ng-container *ngTemplateOutlet=\"modalContent\"></ng-container>\n  </form>\n\n  <div *ngIf=\"!form\" class=\"p-4\" style=\"max-width: 800px\">\n    <ng-container *ngTemplateOutlet=\"modalContent\"></ng-container>\n  </div>\n\n  <ng-template #modalContent>\n    <div class=\"modal-content\">\n      <div class=\"modal-header py-2\">\n        <h4 class=\"modal-title\">\n          <span class=\"pr-2 modal-header-icon\">\n            <ng-container *ngIf=\"iconTpl; else noIconTpl\">\n              <ng-template\n                [ngTemplateOutlet]=\"iconTpl\"\n                [ngTemplateOutletContext]=\"{ $implicit: icon, icon: icon }\"\n              >\n              </ng-template>\n            </ng-container>\n            <ng-template #noIconTpl>\n              <fa-icon\n                *ngIf=\"_iconObj\"\n                class=\"modal-header-icon--fa\"\n                [icon]=\"_iconObj\"\n                size=\"sm\"\n              ></fa-icon>\n              <img\n                *ngIf=\"_iconUrl\"\n                class=\"modal-header-icon--img\"\n                [src]=\"_iconUrl\"\n                [alt]=\"titleText\"\n              />\n            </ng-template>\n          </span>\n\n          <span class=\"modal-header-title\">\n            <ng-container *ngIf=\"titleTpl; else noTitleTpl\">\n              <ng-template\n                [ngTemplateOutlet]=\"titleTpl\"\n                [ngTemplateOutletContext]=\"{\n                  $implicit: titleText,\n                  title: titleText,\n                }\"\n              >\n              </ng-template>\n            </ng-container>\n            <ng-template #noTitleTpl>{{ titleText }}</ng-template>\n          </span>\n        </h4>\n        <button\n          *ngIf=\"showCloseBtn\"\n          type=\"button\"\n          class=\"close\"\n          (click)=\"close()\"\n          aria-label=\"Close\"\n        >\n          <span aria-hidden=\"true\">&times;</span>\n        </button>\n      </div>\n      <div class=\"modal-body\">\n        <ng-content></ng-content>\n      </div>\n      <div *ngIf=\"_queryFooterTpl\" class=\"modal-footer p-2\">\n        <ng-container\n          *ngComponentOutlet=\"$any(_queryFooterTpl.template)\"\n        ></ng-container>\n      </div>\n    </div>\n  </ng-template>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i3$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ModalComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1$1.Overlay }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: ModalComponent, isStandalone: false, selector: "seam-modal", inputs: { closeOnKeyPressed: "closeOnKeyPressed", showCloseBtn: "showCloseBtn", titleText: "titleText", icon: "icon", iconTpl: "iconTpl", titleTpl: "titleTpl", footerTpl: "footerTpl", form: "form" }, outputs: { modalClosed: "modalClosed", overlayDetached: "overlayDetached", formSubmit: "formSubmit" }, providers: [LIB_MODAL], queries: [{ propertyName: "_queryIconTpl", first: true, predicate: ModalHeaderIconTplDirective, descendants: true, static: true }, { propertyName: "_queryTitleTpl", first: true, predicate: ModalHeaderTitleTplDirective, descendants: true, static: true }, { propertyName: "_queryFooterTpl", first: true, predicate: ModalFooterTplDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "_modalTpl", first: true, predicate: ["modalTpl"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #modalTpl>\n  <form\n    *ngIf=\"form\"\n    [formGroup]=\"form\"\n    (ngSubmit)=\"_onSubmit()\"\n    class=\"p-4\"\n    style=\"max-width: 800px\"\n  >\n    <ng-container *ngTemplateOutlet=\"modalContent\"></ng-container>\n  </form>\n\n  <div *ngIf=\"!form\" class=\"p-4\" style=\"max-width: 800px\">\n    <ng-container *ngTemplateOutlet=\"modalContent\"></ng-container>\n  </div>\n\n  <ng-template #modalContent>\n    <div class=\"modal-content\">\n      <div class=\"modal-header py-2\">\n        <h4 class=\"modal-title\">\n          <span class=\"pr-2 modal-header-icon\">\n            <ng-container *ngIf=\"iconTpl; else noIconTpl\">\n              <ng-template\n                [ngTemplateOutlet]=\"iconTpl\"\n                [ngTemplateOutletContext]=\"{ $implicit: icon, icon: icon }\"\n              >\n              </ng-template>\n            </ng-container>\n            <ng-template #noIconTpl>\n              <fa-icon\n                *ngIf=\"_iconObj\"\n                class=\"modal-header-icon--fa\"\n                [icon]=\"_iconObj\"\n                size=\"sm\"\n              ></fa-icon>\n              <img\n                *ngIf=\"_iconUrl\"\n                class=\"modal-header-icon--img\"\n                [src]=\"_iconUrl\"\n                [alt]=\"titleText\"\n              />\n            </ng-template>\n          </span>\n\n          <span class=\"modal-header-title\">\n            <ng-container *ngIf=\"titleTpl; else noTitleTpl\">\n              <ng-template\n                [ngTemplateOutlet]=\"titleTpl\"\n                [ngTemplateOutletContext]=\"{\n                  $implicit: titleText,\n                  title: titleText,\n                }\"\n              >\n              </ng-template>\n            </ng-container>\n            <ng-template #noTitleTpl>{{ titleText }}</ng-template>\n          </span>\n        </h4>\n        <button\n          *ngIf=\"showCloseBtn\"\n          type=\"button\"\n          class=\"close\"\n          (click)=\"close()\"\n          aria-label=\"Close\"\n        >\n          <span aria-hidden=\"true\">&times;</span>\n        </button>\n      </div>\n      <div class=\"modal-body\">\n        <ng-content></ng-content>\n      </div>\n      <div *ngIf=\"_queryFooterTpl\" class=\"modal-footer p-2\">\n        <ng-container\n          *ngComponentOutlet=\"$any(_queryFooterTpl.template)\"\n        ></ng-container>\n      </div>\n    </div>\n  </ng-template>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i3$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
 }
 __decorate([
     InputBoolean()
 ], ModalComponent.prototype, "showCloseBtn", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'seam-modal', providers: [LIB_MODAL], standalone: false, template: "<ng-template #modalTpl>\n  <form\n    *ngIf=\"form\"\n    [formGroup]=\"form\"\n    (ngSubmit)=\"_onSubmit()\"\n    class=\"p-4\"\n    style=\"max-width: 800px\"\n  >\n    <ng-container *ngTemplateOutlet=\"modalContent\"></ng-container>\n  </form>\n\n  <div *ngIf=\"!form\" class=\"p-4\" style=\"max-width: 800px\">\n    <ng-container *ngTemplateOutlet=\"modalContent\"></ng-container>\n  </div>\n\n  <ng-template #modalContent>\n    <div class=\"modal-content\">\n      <div class=\"modal-header py-2\">\n        <h4 class=\"modal-title\">\n          <span class=\"pr-2 modal-header-icon\">\n            <ng-container *ngIf=\"iconTpl; else noIconTpl\">\n              <ng-template\n                [ngTemplateOutlet]=\"iconTpl\"\n                [ngTemplateOutletContext]=\"{ $implicit: icon, icon: icon }\"\n              >\n              </ng-template>\n            </ng-container>\n            <ng-template #noIconTpl>\n              <fa-icon\n                *ngIf=\"_iconObj\"\n                class=\"modal-header-icon--fa\"\n                [icon]=\"_iconObj\"\n                size=\"sm\"\n              ></fa-icon>\n              <img\n                *ngIf=\"_iconUrl\"\n                class=\"modal-header-icon--img\"\n                [src]=\"_iconUrl\"\n                [alt]=\"titleText\"\n              />\n            </ng-template>\n          </span>\n\n          <span class=\"modal-header-title\">\n            <ng-container *ngIf=\"titleTpl; else noTitleTpl\">\n              <ng-template\n                [ngTemplateOutlet]=\"titleTpl\"\n                [ngTemplateOutletContext]=\"{\n                  $implicit: titleText,\n                  title: titleText,\n                }\"\n              >\n              </ng-template>\n            </ng-container>\n            <ng-template #noTitleTpl>{{ titleText }}</ng-template>\n          </span>\n        </h4>\n        <button\n          *ngIf=\"showCloseBtn\"\n          type=\"button\"\n          class=\"close\"\n          (click)=\"close()\"\n          aria-label=\"Close\"\n        >\n          <span aria-hidden=\"true\">&times;</span>\n        </button>\n      </div>\n      <div class=\"modal-body\">\n        <ng-content></ng-content>\n      </div>\n      <div *ngIf=\"_queryFooterTpl\" class=\"modal-footer p-2\">\n        <ng-container\n          *ngComponentOutlet=\"$any(_queryFooterTpl.template)\"\n        ></ng-container>\n      </div>\n    </div>\n  </ng-template>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i1$1.Overlay }, { type: i1$2.ActivatedRoute }], propDecorators: { closeOnKeyPressed: [{
@@ -1382,17 +1382,17 @@ class RouteModalComponent {
     isRouteModal() {
         return this._route.outlet === 'modal';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: RouteModalComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i1$2.Router }, { token: Modal }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: RouteModalComponent, isStandalone: false, selector: "seam-route-modal", ngImport: i0, template: "<!-- <seam-modal (overlayDetached)=\"_onDetached()\">\n  <router-outlet></router-outlet>\n</seam-modal> -->\n", styles: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: RouteModalComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i1$2.Router }, { token: Modal }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: RouteModalComponent, isStandalone: false, selector: "seam-route-modal", ngImport: i0, template: "<!-- <seam-modal (overlayDetached)=\"_onDetached()\">\n  <router-outlet></router-outlet>\n</seam-modal> -->\n", styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: RouteModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: RouteModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'seam-route-modal', standalone: false, template: "<!-- <seam-modal (overlayDetached)=\"_onDetached()\">\n  <router-outlet></router-outlet>\n</seam-modal> -->\n" }]
         }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i1$2.Router }, { type: Modal }] });
 
 class TheSeamModalModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: TheSeamModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.6", ngImport: i0, type: TheSeamModalModule, declarations: [ModalComponent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.7", ngImport: i0, type: TheSeamModalModule, declarations: [ModalComponent,
             ModalFooterTplDirective,
             ModalHeaderIconTplDirective,
             ModalHeaderTitleTplDirective,
@@ -1423,7 +1423,7 @@ class TheSeamModalModule {
             ModalBodyComponent,
             ModalFooterComponent,
             ModalCloseDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: TheSeamModalModule, providers: [
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamModalModule, providers: [
             THESEAM_MODAL_SCROLL_STRATEGY_PROVIDER,
             { provide: MODAL_CONTAINER, useValue: ModalContainerComponent },
             { provide: MODAL_CONFIG, useValue: ModalConfig },
@@ -1438,7 +1438,7 @@ class TheSeamModalModule {
             // don't have to remember to import it or be faced with an unhelpful error.
             PortalModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: TheSeamModalModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamModalModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [

package/fesm2022/theseam-ui-common-navigation-reload.mjs

@@ -44,10 +44,10 @@ class TheSeamNavigationReloadService {
                 'or updating the reload logic.');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: TheSeamNavigationReloadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: TheSeamNavigationReloadService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamNavigationReloadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamNavigationReloadService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: TheSeamNavigationReloadService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamNavigationReloadService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',

package/fesm2022/theseam-ui-common-popover.mjs

@@ -176,15 +176,15 @@ class PopoverComponent {
                 break;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: PopoverComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: PopoverComponent, isStandalone: false, selector: "seam-popover", inputs: { template: "template", popoverClass: "popoverClass", popover: "popover", popoverContext: "popoverContext", baseWidth: "baseWidth" }, host: { listeners: { "@slideDown.start": "_onAnimationStart($event)", "@slideDown.done": "_animationDone.next($event)", "keydown": "_handleKeydown($event)" }, properties: { "@slideDown": "{\n      value: _state,\n      params: {\n        enterAnimationDuration: enterAnimationDuration,\n        exitAnimationDuration: exitAnimationDuration\n      }\n    }", "style.width": "_popoverWidth", "attr.role": "\"dialog\"", "attr.tabindex": "-1" }, classAttribute: "popover show m-2 position-static" }, ngImport: i0, template: "<div class=\"popover-body\">\n  <ng-container *ngIf=\"template; else noTemplate\">\n    <ng-template\n      [ngTemplateOutlet]=\"template\"\n      [ngTemplateOutletContext]=\"{\n        $implicit: popover,\n        popover: popover,\n        popoverContext: popoverContext,\n      }\"\n    ></ng-template>\n  </ng-container>\n\n  <ng-template #noTemplate>\n    Example\n    <!-- <ng-content></ng-content> -->\n  </ng-template>\n</div>\n", styles: [":host{display:block;max-width:800px;min-width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: PopoverComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: PopoverComponent, isStandalone: false, selector: "seam-popover", inputs: { template: "template", popoverClass: "popoverClass", popover: "popover", popoverContext: "popoverContext", baseWidth: "baseWidth" }, host: { listeners: { "@slideDown.start": "_onAnimationStart($event)", "@slideDown.done": "_animationDone.next($event)", "keydown": "_handleKeydown($event)" }, properties: { "@slideDown": "{\n      value: _state,\n      params: {\n        enterAnimationDuration: enterAnimationDuration,\n        exitAnimationDuration: exitAnimationDuration\n      }\n    }", "style.width": "_popoverWidth", "attr.role": "\"dialog\"", "attr.tabindex": "-1" }, classAttribute: "popover show m-2 position-static" }, ngImport: i0, template: "<div class=\"popover-body\">\n  <ng-container *ngIf=\"template; else noTemplate\">\n    <ng-template\n      [ngTemplateOutlet]=\"template\"\n      [ngTemplateOutletContext]=\"{\n        $implicit: popover,\n        popover: popover,\n        popoverContext: popoverContext,\n      }\"\n    ></ng-template>\n  </ng-container>\n\n  <ng-template #noTemplate>\n    Example\n    <!-- <ng-content></ng-content> -->\n  </ng-template>\n</div>\n", styles: [":host{display:block;max-width:800px;min-width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
             trigger('slideDown', [
                 transition(':enter', useAnimation(popoverExpandIn)),
                 transition(':leave', useAnimation(popoverExpandOut)),
             ]),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: PopoverComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: PopoverComponent, decorators: [{
             type: Component,
             args: [{ selector: 'seam-popover', animations: [
                         trigger('slideDown', [
@@ -458,10 +458,10 @@ class TheSeamPopoverDirective {
         const hover = of();
         return merge(backdrop, hover, detachments);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: TheSeamPopoverDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i1$1.Overlay }, { token: i2.FocusMonitor }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.6", type: TheSeamPopoverDirective, isStandalone: false, selector: "[seamPopover]", inputs: { seamPopover: "seamPopover", seamPopoverContext: "seamPopoverContext", seamPopoverBaseWidth: "seamPopoverBaseWidth", seamPopoverDisabled: "seamPopoverDisabled" }, host: { attributes: { "aria-haspopup": "true" }, listeners: { "mousedown": "_onMouseDown($event)", "click": "_onClick($event)", "document:keydown": "_onDocumentKeydown($event)" }, properties: { "attr.aria-expanded": "popoverOpen() || null" } }, exportAs: ["seamPopover"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamPopoverDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i1$1.Overlay }, { token: i2.FocusMonitor }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: TheSeamPopoverDirective, isStandalone: false, selector: "[seamPopover]", inputs: { seamPopover: "seamPopover", seamPopoverContext: "seamPopoverContext", seamPopoverBaseWidth: "seamPopoverBaseWidth", seamPopoverDisabled: "seamPopoverDisabled" }, host: { attributes: { "aria-haspopup": "true" }, listeners: { "mousedown": "_onMouseDown($event)", "click": "_onClick($event)", "document:keydown": "_onDocumentKeydown($event)" }, properties: { "attr.aria-expanded": "popoverOpen() || null" } }, exportAs: ["seamPopover"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: TheSeamPopoverDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamPopoverDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[seamPopover]',
@@ -492,11 +492,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
             }] } });
 
 class TheSeamPopoverModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: TheSeamPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.6", ngImport: i0, type: TheSeamPopoverModule, declarations: [PopoverComponent, TheSeamPopoverDirective], imports: [CommonModule, OverlayModule, PortalModule], exports: [TheSeamPopoverDirective, OverlayModule, PortalModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: TheSeamPopoverModule, imports: [CommonModule, OverlayModule, PortalModule, OverlayModule, PortalModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.7", ngImport: i0, type: TheSeamPopoverModule, declarations: [PopoverComponent, TheSeamPopoverDirective], imports: [CommonModule, OverlayModule, PortalModule], exports: [TheSeamPopoverDirective, OverlayModule, PortalModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamPopoverModule, imports: [CommonModule, OverlayModule, PortalModule, OverlayModule, PortalModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: TheSeamPopoverModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamPopoverModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [PopoverComponent, TheSeamPopoverDirective],

package/fesm2022/theseam-ui-common-progress.mjs

@@ -38,8 +38,8 @@ class ProgressCircleComponent {
             percent: Math.floor(this.percentage || 0),
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ProgressCircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: ProgressCircleComponent, isStandalone: false, selector: "seam-progress-circle", inputs: { fillBackground: "fillBackground", showText: "showText", hiddenOnEmpty: "hiddenOnEmpty", pending: "pending", percentage: "percentage" }, ngImport: i0, template: "<div\n  class=\"seam-progress-circle\"\n  *ngIf=\"_progressInfo as p\"\n  [class.seam-progress-circle--in-complete]=\"p.percent < 100\"\n  [class.seam-progress-circle--fill-bg]=\"fillBackground\"\n>\n  <div class=\"seam-progress-circle-inner\">\n    <ng-container *ngIf=\"p.percent > 0 || !hiddenOnEmpty\">\n      <svg\n        class=\"seam-progress-circle--icon-spinner\"\n        viewBox=\"0 0 40 40\"\n        [attr.data-percent]=\"p.percent\"\n      >\n        <circle\n          class=\"seam-progress-circle--icon-spinner-path seam-progress-circle--icon-spinner-path-bg\"\n          cx=\"20\"\n          cy=\"20\"\n          r=\"15\"\n          fill=\"none\"\n          stroke-width=\"4\"\n        ></circle>\n        <circle\n          class=\"seam-progress-circle--icon-spinner-path\"\n          cx=\"20\"\n          cy=\"20\"\n          r=\"15\"\n          fill=\"none\"\n          transform=\"rotate(-90, 20, 20)\"\n          stroke-width=\"4\"\n          stroke-miterlimit=\"10\"\n          [attr.stroke-dashoffset]=\"p.dashoffset\"\n          [style.stroke-dasharray]=\"p.circumference\"\n        ></circle>\n        <!-- Checkmark -->\n        <path\n          *ngIf=\"!pending && p.percent === 100\"\n          class=\"seam-progress-circle--icon-spinner-path\"\n          fill=\"none\"\n          stroke-width=\"4\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M 11,22 L 18,28 L 28.5,17\"\n        ></path>\n        <!-- Hourglass -->\n        <!-- `p.percent === 101` is still here for backwards compatability, but planing to be removed. -->\n        <path\n          *ngIf=\"pending || p.percent === 101\"\n          class=\"seam-progress-circle--icon-hourglass\"\n          fill=\"none\"\n          d=\"M27.3,25.8c-0.2-2.5-1.6-4.6-3.6-5.8c2-1.2,3.4-3.3,3.6-5.8c0.7-0.3,1.2-1,1.2-1.8c0-1.1-0.9-2-2-2h-13\n          c-1.1,0-2,0.9-2,2c0,0.8,0.5,1.6,1.2,1.8c0.2,2.5,1.6,4.6,3.6,5.8c-2,1.2-3.4,3.3-3.6,5.8c-0.7,0.3-1.2,1-1.2,1.8c0,1.1,0.9,2,2,2\n          h13c1.1,0,2-0.9,2-2C28.6,26.9,28,26.1,27.3,25.8z M24.3,25.7h-8.5c0.3-2.1,2.1-3.6,4.2-3.6S24,23.6,24.3,25.7z M20,18\n          c-2.1,0-3.9-1.6-4.2-3.6h8.5C24,16.5,22.2,18,20,18z\"\n        ></path>\n      </svg>\n    </ng-container>\n    <div\n      class=\"seam-progress-circle--icon-text\"\n      *ngIf=\"showText && !pending && p.percent > 0 && p.percent < 100\"\n    >\n      <span>{{ p.percent }}</span>\n    </div>\n  </div>\n</div>\n", styles: ["seam-progress-circle{display:block}seam-progress-circle .seam-progress-circle--absolute-fill,seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-spinner,seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-center,seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-text,seam-progress-circle .seam-progress-circle{position:absolute;inset:0}seam-progress-circle .seam-progress-circle{padding:5px}seam-progress-circle .seam-progress-circle .seam-progress-circle-inner{position:relative;height:100%;width:100%}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-check{padding-top:4px;font-size:1.3rem;line-height:1.3rem;color:#55c83c}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-text{text-align:center;align-items:center;display:flex;flex-direction:row;justify-content:center;color:#55c83c;font-size:19px;font-weight:700;transform:translateZ(0)}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-center{transform-origin:center center;text-align:center;align-items:center;display:flex;flex-direction:row;justify-content:center}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-spinner{margin:auto}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-spinner .seam-progress-circle--icon-spinner-path{stroke-linecap:round;stroke:#55c83c;transition:.5s}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-spinner .seam-progress-circle--icon-spinner-path:not(path){stroke-dasharray:0}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-spinner .seam-progress-circle--icon-hourglass{fill:#55c83c;transition:.5s}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-spinner .seam-progress-circle--icon-spinner-path-bg{stroke-linecap:round;stroke:#e0f5db}seam-progress-circle .seam-progress-circle--in-complete .seam-progress-circle--icon-spinner .seam-progress-circle--icon-spinner-path{stroke:#f57a15}seam-progress-circle .seam-progress-circle--in-complete .seam-progress-circle--icon-spinner .seam-progress-circle--icon-spinner-path-bg{stroke:#fde9d9}seam-progress-circle .seam-progress-circle--in-complete .seam-progress-circle--icon-spinner[data-percent=\"0\"] .seam-progress-circle--icon-spinner-path{stroke:#6c757d}seam-progress-circle .seam-progress-circle--in-complete .seam-progress-circle--icon-spinner[data-percent=\"0\"] .seam-progress-circle--icon-spinner-path-bg{stroke:#d8dbdd}seam-progress-circle .seam-progress-circle--fill-bg .seam-progress-circle--icon-spinner-path-bg{fill:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ProgressCircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: ProgressCircleComponent, isStandalone: false, selector: "seam-progress-circle", inputs: { fillBackground: "fillBackground", showText: "showText", hiddenOnEmpty: "hiddenOnEmpty", pending: "pending", percentage: "percentage" }, ngImport: i0, template: "<div\n  class=\"seam-progress-circle\"\n  *ngIf=\"_progressInfo as p\"\n  [class.seam-progress-circle--in-complete]=\"p.percent < 100\"\n  [class.seam-progress-circle--fill-bg]=\"fillBackground\"\n>\n  <div class=\"seam-progress-circle-inner\">\n    <ng-container *ngIf=\"p.percent > 0 || !hiddenOnEmpty\">\n      <svg\n        class=\"seam-progress-circle--icon-spinner\"\n        viewBox=\"0 0 40 40\"\n        [attr.data-percent]=\"p.percent\"\n      >\n        <circle\n          class=\"seam-progress-circle--icon-spinner-path seam-progress-circle--icon-spinner-path-bg\"\n          cx=\"20\"\n          cy=\"20\"\n          r=\"15\"\n          fill=\"none\"\n          stroke-width=\"4\"\n        ></circle>\n        <circle\n          class=\"seam-progress-circle--icon-spinner-path\"\n          cx=\"20\"\n          cy=\"20\"\n          r=\"15\"\n          fill=\"none\"\n          transform=\"rotate(-90, 20, 20)\"\n          stroke-width=\"4\"\n          stroke-miterlimit=\"10\"\n          [attr.stroke-dashoffset]=\"p.dashoffset\"\n          [style.stroke-dasharray]=\"p.circumference\"\n        ></circle>\n        <!-- Checkmark -->\n        <path\n          *ngIf=\"!pending && p.percent === 100\"\n          class=\"seam-progress-circle--icon-spinner-path\"\n          fill=\"none\"\n          stroke-width=\"4\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M 11,22 L 18,28 L 28.5,17\"\n        ></path>\n        <!-- Hourglass -->\n        <!-- `p.percent === 101` is still here for backwards compatability, but planing to be removed. -->\n        <path\n          *ngIf=\"pending || p.percent === 101\"\n          class=\"seam-progress-circle--icon-hourglass\"\n          fill=\"none\"\n          d=\"M27.3,25.8c-0.2-2.5-1.6-4.6-3.6-5.8c2-1.2,3.4-3.3,3.6-5.8c0.7-0.3,1.2-1,1.2-1.8c0-1.1-0.9-2-2-2h-13\n          c-1.1,0-2,0.9-2,2c0,0.8,0.5,1.6,1.2,1.8c0.2,2.5,1.6,4.6,3.6,5.8c-2,1.2-3.4,3.3-3.6,5.8c-0.7,0.3-1.2,1-1.2,1.8c0,1.1,0.9,2,2,2\n          h13c1.1,0,2-0.9,2-2C28.6,26.9,28,26.1,27.3,25.8z M24.3,25.7h-8.5c0.3-2.1,2.1-3.6,4.2-3.6S24,23.6,24.3,25.7z M20,18\n          c-2.1,0-3.9-1.6-4.2-3.6h8.5C24,16.5,22.2,18,20,18z\"\n        ></path>\n      </svg>\n    </ng-container>\n    <div\n      class=\"seam-progress-circle--icon-text\"\n      *ngIf=\"showText && !pending && p.percent > 0 && p.percent < 100\"\n    >\n      <span>{{ p.percent }}</span>\n    </div>\n  </div>\n</div>\n", styles: ["seam-progress-circle{display:block}seam-progress-circle .seam-progress-circle--absolute-fill,seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-spinner,seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-center,seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-text,seam-progress-circle .seam-progress-circle{position:absolute;inset:0}seam-progress-circle .seam-progress-circle{padding:5px}seam-progress-circle .seam-progress-circle .seam-progress-circle-inner{position:relative;height:100%;width:100%}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-check{padding-top:4px;font-size:1.3rem;line-height:1.3rem;color:#55c83c}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-text{text-align:center;align-items:center;display:flex;flex-direction:row;justify-content:center;color:#55c83c;font-size:19px;font-weight:700;transform:translateZ(0)}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-center{transform-origin:center center;text-align:center;align-items:center;display:flex;flex-direction:row;justify-content:center}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-spinner{margin:auto}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-spinner .seam-progress-circle--icon-spinner-path{stroke-linecap:round;stroke:#55c83c;transition:.5s}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-spinner .seam-progress-circle--icon-spinner-path:not(path){stroke-dasharray:0}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-spinner .seam-progress-circle--icon-hourglass{fill:#55c83c;transition:.5s}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-spinner .seam-progress-circle--icon-spinner-path-bg{stroke-linecap:round;stroke:#e0f5db}seam-progress-circle .seam-progress-circle--in-complete .seam-progress-circle--icon-spinner .seam-progress-circle--icon-spinner-path{stroke:#f57a15}seam-progress-circle .seam-progress-circle--in-complete .seam-progress-circle--icon-spinner .seam-progress-circle--icon-spinner-path-bg{stroke:#fde9d9}seam-progress-circle .seam-progress-circle--in-complete .seam-progress-circle--icon-spinner[data-percent=\"0\"] .seam-progress-circle--icon-spinner-path{stroke:#6c757d}seam-progress-circle .seam-progress-circle--in-complete .seam-progress-circle--icon-spinner[data-percent=\"0\"] .seam-progress-circle--icon-spinner-path-bg{stroke:#d8dbdd}seam-progress-circle .seam-progress-circle--fill-bg .seam-progress-circle--icon-spinner-path-bg{fill:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 __decorate([
     InputBoolean()
@@ -56,7 +56,7 @@ __decorate([
 __decorate([
     InputNumber()
 ], ProgressCircleComponent.prototype, "percentage", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ProgressCircleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ProgressCircleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'seam-progress-circle', encapsulation: ViewEncapsulation.None, standalone: false, template: "<div\n  class=\"seam-progress-circle\"\n  *ngIf=\"_progressInfo as p\"\n  [class.seam-progress-circle--in-complete]=\"p.percent < 100\"\n  [class.seam-progress-circle--fill-bg]=\"fillBackground\"\n>\n  <div class=\"seam-progress-circle-inner\">\n    <ng-container *ngIf=\"p.percent > 0 || !hiddenOnEmpty\">\n      <svg\n        class=\"seam-progress-circle--icon-spinner\"\n        viewBox=\"0 0 40 40\"\n        [attr.data-percent]=\"p.percent\"\n      >\n        <circle\n          class=\"seam-progress-circle--icon-spinner-path seam-progress-circle--icon-spinner-path-bg\"\n          cx=\"20\"\n          cy=\"20\"\n          r=\"15\"\n          fill=\"none\"\n          stroke-width=\"4\"\n        ></circle>\n        <circle\n          class=\"seam-progress-circle--icon-spinner-path\"\n          cx=\"20\"\n          cy=\"20\"\n          r=\"15\"\n          fill=\"none\"\n          transform=\"rotate(-90, 20, 20)\"\n          stroke-width=\"4\"\n          stroke-miterlimit=\"10\"\n          [attr.stroke-dashoffset]=\"p.dashoffset\"\n          [style.stroke-dasharray]=\"p.circumference\"\n        ></circle>\n        <!-- Checkmark -->\n        <path\n          *ngIf=\"!pending && p.percent === 100\"\n          class=\"seam-progress-circle--icon-spinner-path\"\n          fill=\"none\"\n          stroke-width=\"4\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M 11,22 L 18,28 L 28.5,17\"\n        ></path>\n        <!-- Hourglass -->\n        <!-- `p.percent === 101` is still here for backwards compatability, but planing to be removed. -->\n        <path\n          *ngIf=\"pending || p.percent === 101\"\n          class=\"seam-progress-circle--icon-hourglass\"\n          fill=\"none\"\n          d=\"M27.3,25.8c-0.2-2.5-1.6-4.6-3.6-5.8c2-1.2,3.4-3.3,3.6-5.8c0.7-0.3,1.2-1,1.2-1.8c0-1.1-0.9-2-2-2h-13\n          c-1.1,0-2,0.9-2,2c0,0.8,0.5,1.6,1.2,1.8c0.2,2.5,1.6,4.6,3.6,5.8c-2,1.2-3.4,3.3-3.6,5.8c-0.7,0.3-1.2,1-1.2,1.8c0,1.1,0.9,2,2,2\n          h13c1.1,0,2-0.9,2-2C28.6,26.9,28,26.1,27.3,25.8z M24.3,25.7h-8.5c0.3-2.1,2.1-3.6,4.2-3.6S24,23.6,24.3,25.7z M20,18\n          c-2.1,0-3.9-1.6-4.2-3.6h8.5C24,16.5,22.2,18,20,18z\"\n        ></path>\n      </svg>\n    </ng-container>\n    <div\n      class=\"seam-progress-circle--icon-text\"\n      *ngIf=\"showText && !pending && p.percent > 0 && p.percent < 100\"\n    >\n      <span>{{ p.percent }}</span>\n    </div>\n  </div>\n</div>\n", styles: ["seam-progress-circle{display:block}seam-progress-circle .seam-progress-circle--absolute-fill,seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-spinner,seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-center,seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-text,seam-progress-circle .seam-progress-circle{position:absolute;inset:0}seam-progress-circle .seam-progress-circle{padding:5px}seam-progress-circle .seam-progress-circle .seam-progress-circle-inner{position:relative;height:100%;width:100%}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-check{padding-top:4px;font-size:1.3rem;line-height:1.3rem;color:#55c83c}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-text{text-align:center;align-items:center;display:flex;flex-direction:row;justify-content:center;color:#55c83c;font-size:19px;font-weight:700;transform:translateZ(0)}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-center{transform-origin:center center;text-align:center;align-items:center;display:flex;flex-direction:row;justify-content:center}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-spinner{margin:auto}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-spinner .seam-progress-circle--icon-spinner-path{stroke-linecap:round;stroke:#55c83c;transition:.5s}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-spinner .seam-progress-circle--icon-spinner-path:not(path){stroke-dasharray:0}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-spinner .seam-progress-circle--icon-hourglass{fill:#55c83c;transition:.5s}seam-progress-circle .seam-progress-circle .seam-progress-circle--icon-spinner .seam-progress-circle--icon-spinner-path-bg{stroke-linecap:round;stroke:#e0f5db}seam-progress-circle .seam-progress-circle--in-complete .seam-progress-circle--icon-spinner .seam-progress-circle--icon-spinner-path{stroke:#f57a15}seam-progress-circle .seam-progress-circle--in-complete .seam-progress-circle--icon-spinner .seam-progress-circle--icon-spinner-path-bg{stroke:#fde9d9}seam-progress-circle .seam-progress-circle--in-complete .seam-progress-circle--icon-spinner[data-percent=\"0\"] .seam-progress-circle--icon-spinner-path{stroke:#6c757d}seam-progress-circle .seam-progress-circle--in-complete .seam-progress-circle--icon-spinner[data-percent=\"0\"] .seam-progress-circle--icon-spinner-path-bg{stroke:#d8dbdd}seam-progress-circle .seam-progress-circle--fill-bg .seam-progress-circle--icon-spinner-path-bg{fill:#fff}\n"] }]
         }], propDecorators: { fillBackground: [{
@@ -72,11 +72,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
             }] } });
 
 class TheSeamProgressModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: TheSeamProgressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.6", ngImport: i0, type: TheSeamProgressModule, declarations: [ProgressCircleComponent], imports: [CommonModule], exports: [ProgressCircleComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: TheSeamProgressModule, imports: [CommonModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamProgressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.7", ngImport: i0, type: TheSeamProgressModule, declarations: [ProgressCircleComponent], imports: [CommonModule], exports: [ProgressCircleComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamProgressModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: TheSeamProgressModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TheSeamProgressModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ProgressCircleComponent],