@theseam/ui-common 0.4.4 → 0.4.5

package/fesm2015/theseam-ui-common-widget.mjs

@@ -1,14 +1,14 @@
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i0 from '@angular/core';
-import { InjectionToken, Directive, Optional, Inject, Input, Component, ChangeDetectionStrategy, NgModule, ViewEncapsulation, HostBinding, ContentChild, EventEmitter, Output, isDevMode, Injectable } from '@angular/core';
-import { Subject, BehaviorSubject, throwError, of } from 'rxjs';
-import { auditTime, takeUntil, take, switchMap, filter, map } from 'rxjs/operators';
-import { getClosestWidgetCdkDrag } from '@theseam/ui-common/utils';
+import { InjectionToken, Directive, Optional, Inject, Input, Component, ChangeDetectionStrategy, NgModule, ViewEncapsulation, HostBinding, ContentChild, EventEmitter, Output, Injectable, isDevMode } from '@angular/core';
+import { Subject, BehaviorSubject, of, tap as tap$1, takeUntil as takeUntil$1, throwError } from 'rxjs';
+import { auditTime, takeUntil, take, switchMap, filter, map, tap } from 'rxjs/operators';
+import { getClosestWidgetCdkDrag, hasProperty } from '@theseam/ui-common/utils';
 import * as i1 from '@angular/cdk/drag-drop';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i5 from '@theseam/ui-common/buttons';
+import * as i6 from '@theseam/ui-common/buttons';
 import { TheSeamButtonsModule } from '@theseam/ui-common/buttons';
 import { mixinTheme, mixinActive, mixinDisabled, InputBoolean, mixinTabIndex } from '@theseam/ui-common/core';
 import * as i1$1 from '@angular/cdk/a11y';
@@ -20,12 +20,13 @@ import { TheSeamTableModule } from '@theseam/ui-common/table';
 import { TheSeamTableCellTypesModule } from '@theseam/ui-common/table-cell-types';
 import { trigger, transition, style, animate, state } from '@angular/animations';
 import { faCog, faAngleDown } from '@fortawesome/free-solid-svg-icons';
-import * as i2$1 from '@fortawesome/angular-fontawesome';
+import * as i1$3 from '@theseam/ui-common/services';
+import * as i3$1 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import * as i4 from '@theseam/ui-common/loading';
+import * as i5 from '@theseam/ui-common/loading';
 import { TheSeamLoadingModule } from '@theseam/ui-common/loading';
 import { ComponentPortal } from '@angular/cdk/portal';
-import * as i1$3 from '@theseam/ui-common/dynamic-component-loader';
+import * as i1$4 from '@theseam/ui-common/dynamic-component-loader';
 import { CdkTableModule } from '@angular/cdk/table';
 import { RouterModule } from '@angular/router';
 
@@ -946,6 +947,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 }]
         }] });
 
+const THESEAM_WIDGET_PREFERENCES_ACCESSOR = new InjectionToken('TheSeamWidgetPreferencesAccessor');
+
+const CURRENT_WIDGET_PREFERENCES_VERSION = 1;
+const EMPTY_WIDGET_PREFERENCES = {
+    version: 1,
+};
+
+// TODO: Rethink this. I originally implemented this to be shared widget's then
+// changed it to be per widget, for the accessor injection.
+// @Injectable({ providedIn: 'root' })
+class WidgetPreferencesService {
+    constructor(_preferencesManager, _prefsAccessor) {
+        this._preferencesManager = _preferencesManager;
+        this._prefsAccessor = _prefsAccessor;
+        this._pendingPatches = {};
+    }
+    isPatchPending(preferenceKey) {
+        return this._pendingPatches[preferenceKey] && this._pendingPatches[preferenceKey].length > 0;
+    }
+    isPending(preferenceKey) {
+        return this._preferencesManager.isPending(preferenceKey);
+    }
+    isLoaded(preferenceKey) {
+        return this._preferencesManager.isLoaded(preferenceKey);
+    }
+    preferences(preferenceKey) {
+        if (!this._prefsAccessor) {
+            return of(JSON.parse(JSON.stringify(EMPTY_WIDGET_PREFERENCES)));
+        }
+        return this._preferencesManager.preferences(preferenceKey, this._prefsAccessor, EMPTY_WIDGET_PREFERENCES).pipe(map(prefs => {
+            if (this._isValidPreferences(prefs)) {
+                return prefs;
+            }
+            throw Error(`Preferences for key '${preferenceKey}' is not a valid widget preferences.`);
+        }));
+    }
+    refresh(preferenceKey) {
+        this._preferencesManager.refresh(preferenceKey);
+    }
+    patchPreferences(preferenceKey, preferences) {
+        if (!this._prefsAccessor) {
+            return;
+        }
+        if (!this._pendingPatches[preferenceKey]) {
+            this._pendingPatches[preferenceKey] = [];
+        }
+        if (this._pendingPatches[preferenceKey].length > 0) {
+            this._pendingPatches[preferenceKey].push(preferences);
+            return;
+        }
+        this._pendingPatches[preferenceKey].push(preferences);
+        this.preferences(preferenceKey).pipe(take(1), map(prefs => {
+            const pendingPatches = this._pendingPatches[preferenceKey];
+            this._pendingPatches[preferenceKey] = [];
+            const newPrefs = pendingPatches.reduce((acc, patch) => {
+                return Object.assign(Object.assign({}, acc), patch);
+            }, prefs); // Typescript isn't recognizing that 'version' is included in the initial value.
+            if (!this._isValidPreferences(newPrefs)) {
+                throw Error(`Attempted to patch preferences for key '${preferenceKey}' with invalid preferences.`);
+            }
+            this._preferencesManager.update(preferenceKey, newPrefs);
+        }), tap(() => this.refresh(preferenceKey))).subscribe();
+    }
+    _isValidPreferences(prefs) {
+        return prefs.version === CURRENT_WIDGET_PREFERENCES_VERSION;
+    }
+}
+WidgetPreferencesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WidgetPreferencesService, deps: [{ token: i1$3.TheSeamPreferencesManagerService }, { token: THESEAM_WIDGET_PREFERENCES_ACCESSOR, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+WidgetPreferencesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WidgetPreferencesService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WidgetPreferencesService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () {
+        return [{ type: i1$3.TheSeamPreferencesManagerService }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [THESEAM_WIDGET_PREFERENCES_ACCESSOR]
+                    }] }];
+    } });
+
+const THESEAM_WIDGETS = new InjectionToken('TheSeamWidgets');
+const THESEAM_WIDGET_DATA = new InjectionToken('TheSeamWidgetData');
+
 const EXPANDED_STATE = 'expanded';
 const COLLAPSED_STATE = 'collapsed';
 const EXPAND_TRANSITION = `${EXPANDED_STATE} <=> ${COLLAPSED_STATE}`;
@@ -987,9 +1071,31 @@ const collapseAnimation = trigger('collapseAnim', [
  * used then the situation should be considered for becoming a widget component.
  */
 class WidgetComponent {
-    constructor() {
+    /**
+     * Icon displayed in the top header.
+     *
+     * If a more advanced icon is needed you can use `seamWidgetIconTpl` template
+     * directive, but a `SeamIcon` input is recommended, because allowing custom
+     * icons that do not follow the tested types can lead to inconsitency quickly
+     * as different developers keep making tweaks.
+     */
+    get icon() { return this._iconUrl || this._iconObj; }
+    set icon(value) {
+        if (typeof value === 'string') {
+            this._iconUrl = value;
+            this._iconObj = undefined;
+        }
+        else {
+            this._iconUrl = undefined;
+            this._iconObj = value;
+        }
+    }
+    constructor(_widgetPreferences, _data) {
+        this._widgetPreferences = _widgetPreferences;
+        this._data = _data;
         this.configIcon = faCog;
         this.collapseIcon = faAngleDown;
+        this._ngUnsubscribe = new Subject();
         /**
          * Toggles the collapsed state of a widget.
          */
@@ -1009,26 +1115,19 @@ class WidgetComponent {
          * header to toggle the collapsed state.
          */
         this.canCollapse = false;
-    }
-    /**
-     * Icon displayed in the top header.
-     *
-     * If a more advanced icon is needed you can use `seamWidgetIconTpl` template
-     * directive, but a `SeamIcon` input is recommended, because allowing custom
-     * icons that do not follow the tested types can lead to inconsitency quickly
-     * as different developers keep making tweaks.
-     */
-    get icon() { return this._iconUrl || this._iconObj; }
-    set icon(value) {
-        if (typeof value === 'string') {
-            this._iconUrl = value;
-            this._iconObj = undefined;
-        }
-        else {
-            this._iconUrl = undefined;
-            this._iconObj = value;
+        if (this._data && this._data.widgetId) {
+            this._preferencesKey = `widget:${this._data.widgetId}`;
+            this._widgetPreferences.preferences(this._preferencesKey).pipe(tap$1(prefs => {
+                if (hasProperty(prefs, 'collapsed')) {
+                    this.collapsed = prefs.collapsed;
+                }
+            }), takeUntil$1(this._ngUnsubscribe)).subscribe();
         }
     }
+    ngOnDestroy() {
+        this._ngUnsubscribe.next();
+        this._ngUnsubscribe.complete();
+    }
     /**
      * Toggles a widget's collapsed state.
      */
@@ -1040,11 +1139,21 @@ class WidgetComponent {
             return;
         }
         this.collapsed = !this.collapsed;
+        // Only update the preference, if collapse method is called, because it is
+        // assumed that the user is collapsing the widget. If the collapsed state is
+        // changed by other means, such using the widget's `collapsed` input, then
+        // the preference should not be updated, because that is assumed to be an
+        // app controlled change that should not be persisted.
+        if (this._preferencesKey) {
+            this._widgetPreferences.patchPreferences(this._preferencesKey, { collapsed: this.collapsed });
+        }
     }
     get collapseState() { return this.collapsed ? COLLAPSED_STATE : EXPANDED_STATE; }
 }
-WidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-WidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: WidgetComponent, selector: "seam-widget", inputs: { collapsed: "collapsed", hasHeader: "hasHeader", titleText: "titleText", icon: "icon", iconClass: "iconClass", loading: "loading", hasConfig: "hasConfig", canCollapse: "canCollapse" }, queries: [{ propertyName: "iconTpl", first: true, predicate: WidgetIconTplDirective, descendants: true, static: true }, { propertyName: "titleTpl", first: true, predicate: WidgetTitleTplDirective, descendants: true, static: true }], ngImport: i0, template: "<div class=\"seam-widget border rounded overflow-hidden\">\n  <div class=\"widget-header\" seamWidgetDragHandle *ngIf=\"hasHeader\">\n    <div class=\"widget-header-content p-2 text-nowrap\">\n      <span class=\"mr-1 widget-header-icon\">\n        <ng-container *ngIf=\"iconTpl; else noIconTpl\">\n          <ng-template\n            [ngTemplateOutlet]=\"iconTpl.template\"\n            [ngTemplateOutletContext]=\"{ $implicit: icon, icon: icon, title: titleText }\">\n          </ng-template>\n        </ng-container>\n        <ng-template #noIconTpl>\n          <fa-icon *ngIf=\"_iconObj\"\n            class=\"widget-header-icon--fa {{ iconClass }}\"\n            [icon]=\"_iconObj\"></fa-icon>\n          <img *ngIf=\"_iconUrl\"\n            class=\"widget-header-icon--img {{ iconClass }}\"\n            [src]=\"_iconUrl\" [alt]=\"titleText\">\n        </ng-template>\n      </span>\n      <span class=\"widget-header-title text-truncate\">\n        <ng-container *ngIf=\"titleTpl; else noTitleTpl\">\n          <ng-template\n            [ngTemplateOutlet]=\"titleTpl.template\"\n            [ngTemplateOutletContext]=\"{ $implicit: titleText, icon: icon, title: titleText }\">\n          </ng-template>\n        </ng-container>\n        <ng-template #noTitleTpl>{{ titleText }}</ng-template>\n      </span>\n    </div>\n    <div class=\"widget-header-btns-container\" *ngIf=\"hasConfig || canCollapse\">\n      <!-- <div *ngIf=\"hasConfig\">\n        <button seamIconBtn [icon]=\"configIcon\"\n          class=\"widget-header-btn-config\"\n          [iconType]=\"null\">\n          <span class=\"sr-only\">Widget configuration menu</span>\n        </button>\n        <button seamButton class=\"widget-header-btn-config p-0\">\n          <seam-icon class=\"d-block\" [icon]=\"configIcon\" iconClass=\"text-secondary\"></seam-icon>\n          <span class=\"sr-only\">Widget configuration menu</span>\n        </button>\n      </div> -->\n\n      <div *ngIf=\"canCollapse\" class=\"px-0\">\n\n        <button seamButton class=\"widget-header-btn-collapse p-0 mr-1 h-100\" (click)=\"collapse()\" [class.widget-header-btn-collapse--active]=\"collapsed\">\n          <seam-icon class=\"d-block\"\n            [icon]=\"collapseIcon\"\n            iconClass=\"text-secondary\">\n          </seam-icon>\n          <span class=\"sr-only\">Widget collapse</span>\n        </button>\n        <!-- iconType=\"borderless-styled-square\" -->\n        <!-- style=\"margin-left: -10px; margin-right: -5px;\" -->\n\n        <!-- <button seamIconBtn class=\"widget-header-btn-collapse\" (click)=\"collapse()\" [class.widget-header-btn-collapse--active]=\"collapsed\"\n          btnTheme=\"secondary\"\n          [icon]=\"collapseIcon\"\n          iconType=\"borderless-styled-square\"\n          size=\"xs\"\n          btnSize=\"sm\"\n          >\n          <seam-icon class=\"d-block\"\n            [icon]=\"collapseIcon\"\n            iconClass=\"text-secondary\"\n            style=\"margin-left: -10px; margin-right: -5px;\"\n            iconType=\"borderless-styled-square\"></seam-icon>\n          <span class=\"sr-only\">Widget collapse</span>\n        </button> -->\n      </div>\n    </div>\n  </div>\n  <div class=\"position-relative overflow-hidden\" [style.height.px]=\"loading ? 150 : undefined\" [@collapseAnim]=\"collapseState\">\n    <ng-container *ngIf=\"!collapsed\">\n      <div class=\"p-2\" *ngIf=\"!loading else loadingTpl\" @keepContentAnim>\n        <ng-content></ng-content>\n      </div>\n      <ng-content select=\"seam-widget-footer\"></ng-content>\n      <ng-template #loadingTpl>\n        <div class=\"position-absolute\" @loadingAnim style=\"top:0;right:0;bottom:0;left:0\">\n          <seam-loading [theme]=\"'primary'\"></seam-loading>\n        </div>\n      </ng-template>\n    </ng-container>\n  </div>\n</div>\n", styles: ["seam-widget{display:block;font-size:15px}seam-widget .seam-widget{background:#FFFFFF;box-shadow:none}seam-widget .widget-header{display:flex;flex-direction:row;border-bottom:1px solid #dee2e6;background:#F4F4F4;font-size:17px}seam-widget .widget-header .widget-header-content{flex:1 1 100%}seam-widget .widget-header .widget-header-btns-container{display:flex;flex-direction:row}seam-widget .widget-header .widget-header-btns-container>div{display:flex;flex-direction:column;justify-content:center;padding:4px}seam-widget .widget-header .widget-header-btns-container .widget-header-btn-config .seam-icon--fa{display:flex;flex-direction:row;justify-content:center;text-align:center;height:25px;width:30px}seam-widget .widget-header .widget-header-btns-container .widget-header-btn-config .seam-icon--fa .svg-inline--fa{max-width:100%;height:100%;width:100%}seam-widget .widget-header .widget-header-btns-container .widget-header-btn-collapse .seam-icon--fa{display:flex;flex-direction:row;justify-content:center;text-align:center;height:25px;width:30px}seam-widget .widget-header .widget-header-btns-container .widget-header-btn-collapse .seam-icon--fa .svg-inline--fa{max-width:100%;height:100%;width:100%}seam-widget .widget-header .widget-header-btns-container .widget-header-btn-collapse .svg-inline--fa{transform:rotate(0);transition:.3s ease-in-out transform}seam-widget .widget-header .widget-header-btns-container .widget-header-btn-collapse.widget-header-btn-collapse--active .svg-inline--fa{transform:rotate(90deg)}seam-widget .widget-header .widget-header-title{font-size:17px}seam-widget .widget-header-icon{display:inline-block;vertical-align:top;max-height:20px;max-width:20px;height:20px;width:20px;color:currentColor}seam-widget .widget-header-icon .widget-header-icon--fa{display:flex;flex-direction:row;justify-content:center;text-align:center;max-height:20px;max-width:20px;height:20px;width:20px}seam-widget .widget-header-icon .widget-header-icon--fa .svg-inline--fa{max-width:100%;height:100%;width:100%}seam-widget .widget-header-icon .widget-header-icon--img{height:100%;max-height:20px;max-width:20px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { kind: "component", type: i3.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }, { kind: "component", type: i4.LoadingComponent, selector: "seam-loading", inputs: ["theme"] }, { kind: "component", type: i5.ButtonComponent, selector: "button[seamButton]", inputs: ["disabled", "theme", "size", "type"], exportAs: ["seamButton"] }, { kind: "directive", type: WidgetDragHandleDirective, selector: "[seamWidgetDragHandle]", inputs: ["cdkDragHandleDisabled"] }], animations: [
+WidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WidgetComponent, deps: [{ token: WidgetPreferencesService }, { token: THESEAM_WIDGET_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+WidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: WidgetComponent, selector: "seam-widget", inputs: { collapsed: "collapsed", hasHeader: "hasHeader", titleText: "titleText", icon: "icon", iconClass: "iconClass", loading: "loading", hasConfig: "hasConfig", canCollapse: "canCollapse" }, providers: [
+        WidgetPreferencesService,
+    ], queries: [{ propertyName: "iconTpl", first: true, predicate: WidgetIconTplDirective, descendants: true, static: true }, { propertyName: "titleTpl", first: true, predicate: WidgetTitleTplDirective, descendants: true, static: true }], ngImport: i0, template: "<div class=\"seam-widget border rounded overflow-hidden\">\n  <div class=\"widget-header\" seamWidgetDragHandle *ngIf=\"hasHeader\">\n    <div class=\"widget-header-content p-2 text-nowrap\">\n      <span class=\"mr-1 widget-header-icon\">\n        <ng-container *ngIf=\"iconTpl; else noIconTpl\">\n          <ng-template\n            [ngTemplateOutlet]=\"iconTpl.template\"\n            [ngTemplateOutletContext]=\"{ $implicit: icon, icon: icon, title: titleText }\">\n          </ng-template>\n        </ng-container>\n        <ng-template #noIconTpl>\n          <fa-icon *ngIf=\"_iconObj\"\n            class=\"widget-header-icon--fa {{ iconClass }}\"\n            [icon]=\"_iconObj\"></fa-icon>\n          <img *ngIf=\"_iconUrl\"\n            class=\"widget-header-icon--img {{ iconClass }}\"\n            [src]=\"_iconUrl\" [alt]=\"titleText\">\n        </ng-template>\n      </span>\n      <span class=\"widget-header-title text-truncate\">\n        <ng-container *ngIf=\"titleTpl; else noTitleTpl\">\n          <ng-template\n            [ngTemplateOutlet]=\"titleTpl.template\"\n            [ngTemplateOutletContext]=\"{ $implicit: titleText, icon: icon, title: titleText }\">\n          </ng-template>\n        </ng-container>\n        <ng-template #noTitleTpl>{{ titleText }}</ng-template>\n      </span>\n    </div>\n    <div class=\"widget-header-btns-container\" *ngIf=\"hasConfig || canCollapse\">\n      <!-- <div *ngIf=\"hasConfig\">\n        <button seamIconBtn [icon]=\"configIcon\"\n          class=\"widget-header-btn-config\"\n          [iconType]=\"null\">\n          <span class=\"sr-only\">Widget configuration menu</span>\n        </button>\n        <button seamButton class=\"widget-header-btn-config p-0\">\n          <seam-icon class=\"d-block\" [icon]=\"configIcon\" iconClass=\"text-secondary\"></seam-icon>\n          <span class=\"sr-only\">Widget configuration menu</span>\n        </button>\n      </div> -->\n\n      <div *ngIf=\"canCollapse\" class=\"px-0\">\n\n        <button seamButton class=\"widget-header-btn-collapse p-0 mr-1 h-100\" (click)=\"collapse()\" [class.widget-header-btn-collapse--active]=\"collapsed\">\n          <seam-icon class=\"d-block\"\n            [icon]=\"collapseIcon\"\n            iconClass=\"text-secondary\">\n          </seam-icon>\n          <span class=\"sr-only\">Widget collapse</span>\n        </button>\n        <!-- iconType=\"borderless-styled-square\" -->\n        <!-- style=\"margin-left: -10px; margin-right: -5px;\" -->\n\n        <!-- <button seamIconBtn class=\"widget-header-btn-collapse\" (click)=\"collapse()\" [class.widget-header-btn-collapse--active]=\"collapsed\"\n          btnTheme=\"secondary\"\n          [icon]=\"collapseIcon\"\n          iconType=\"borderless-styled-square\"\n          size=\"xs\"\n          btnSize=\"sm\"\n          >\n          <seam-icon class=\"d-block\"\n            [icon]=\"collapseIcon\"\n            iconClass=\"text-secondary\"\n            style=\"margin-left: -10px; margin-right: -5px;\"\n            iconType=\"borderless-styled-square\"></seam-icon>\n          <span class=\"sr-only\">Widget collapse</span>\n        </button> -->\n      </div>\n    </div>\n  </div>\n  <div class=\"position-relative overflow-hidden\" [style.height.px]=\"loading ? 150 : undefined\" [@collapseAnim]=\"collapseState\">\n    <ng-container *ngIf=\"!collapsed\">\n      <div class=\"p-2\" *ngIf=\"!loading else loadingTpl\" @keepContentAnim>\n        <ng-content></ng-content>\n      </div>\n      <ng-content select=\"seam-widget-footer\"></ng-content>\n      <ng-template #loadingTpl>\n        <div class=\"position-absolute\" @loadingAnim style=\"top:0;right:0;bottom:0;left:0\">\n          <seam-loading [theme]=\"'primary'\"></seam-loading>\n        </div>\n      </ng-template>\n    </ng-container>\n  </div>\n</div>\n", styles: ["seam-widget{display:block;font-size:15px}seam-widget .seam-widget{background:#FFFFFF;box-shadow:none}seam-widget .widget-header{display:flex;flex-direction:row;border-bottom:1px solid #dee2e6;background:#F4F4F4;font-size:17px}seam-widget .widget-header .widget-header-content{flex:1 1 100%}seam-widget .widget-header .widget-header-btns-container{display:flex;flex-direction:row}seam-widget .widget-header .widget-header-btns-container>div{display:flex;flex-direction:column;justify-content:center;padding:4px}seam-widget .widget-header .widget-header-btns-container .widget-header-btn-config .seam-icon--fa{display:flex;flex-direction:row;justify-content:center;text-align:center;height:25px;width:30px}seam-widget .widget-header .widget-header-btns-container .widget-header-btn-config .seam-icon--fa .svg-inline--fa{max-width:100%;height:100%;width:100%}seam-widget .widget-header .widget-header-btns-container .widget-header-btn-collapse .seam-icon--fa{display:flex;flex-direction:row;justify-content:center;text-align:center;height:25px;width:30px}seam-widget .widget-header .widget-header-btns-container .widget-header-btn-collapse .seam-icon--fa .svg-inline--fa{max-width:100%;height:100%;width:100%}seam-widget .widget-header .widget-header-btns-container .widget-header-btn-collapse .svg-inline--fa{transform:rotate(0);transition:.3s ease-in-out transform}seam-widget .widget-header .widget-header-btns-container .widget-header-btn-collapse.widget-header-btn-collapse--active .svg-inline--fa{transform:rotate(90deg)}seam-widget .widget-header .widget-header-title{font-size:17px}seam-widget .widget-header-icon{display:inline-block;vertical-align:top;max-height:20px;max-width:20px;height:20px;width:20px;color:currentColor}seam-widget .widget-header-icon .widget-header-icon--fa{display:flex;flex-direction:row;justify-content:center;text-align:center;max-height:20px;max-width:20px;height:20px;width:20px}seam-widget .widget-header-icon .widget-header-icon--fa .svg-inline--fa{max-width:100%;height:100%;width:100%}seam-widget .widget-header-icon .widget-header-icon--img{height:100%;max-height:20px;max-width:20px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { kind: "component", type: i3.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }, { kind: "component", type: i5.LoadingComponent, selector: "seam-loading", inputs: ["theme"] }, { kind: "component", type: i6.ButtonComponent, selector: "button[seamButton]", inputs: ["disabled", "theme", "size", "type"], exportAs: ["seamButton"] }, { kind: "directive", type: WidgetDragHandleDirective, selector: "[seamWidgetDragHandle]", inputs: ["cdkDragHandleDisabled"] }], animations: [
         loadingAnimation,
         collapseAnimation,
         keepContentAnimation,
@@ -1066,12 +1175,21 @@ __decorate([
 ], WidgetComponent.prototype, "canCollapse", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'seam-widget', encapsulation: ViewEncapsulation.None, animations: [
+            args: [{ selector: 'seam-widget', providers: [
+                        WidgetPreferencesService,
+                    ], encapsulation: ViewEncapsulation.None, animations: [
                         loadingAnimation,
                         collapseAnimation,
                         keepContentAnimation,
                     ], template: "<div class=\"seam-widget border rounded overflow-hidden\">\n  <div class=\"widget-header\" seamWidgetDragHandle *ngIf=\"hasHeader\">\n    <div class=\"widget-header-content p-2 text-nowrap\">\n      <span class=\"mr-1 widget-header-icon\">\n        <ng-container *ngIf=\"iconTpl; else noIconTpl\">\n          <ng-template\n            [ngTemplateOutlet]=\"iconTpl.template\"\n            [ngTemplateOutletContext]=\"{ $implicit: icon, icon: icon, title: titleText }\">\n          </ng-template>\n        </ng-container>\n        <ng-template #noIconTpl>\n          <fa-icon *ngIf=\"_iconObj\"\n            class=\"widget-header-icon--fa {{ iconClass }}\"\n            [icon]=\"_iconObj\"></fa-icon>\n          <img *ngIf=\"_iconUrl\"\n            class=\"widget-header-icon--img {{ iconClass }}\"\n            [src]=\"_iconUrl\" [alt]=\"titleText\">\n        </ng-template>\n      </span>\n      <span class=\"widget-header-title text-truncate\">\n        <ng-container *ngIf=\"titleTpl; else noTitleTpl\">\n          <ng-template\n            [ngTemplateOutlet]=\"titleTpl.template\"\n            [ngTemplateOutletContext]=\"{ $implicit: titleText, icon: icon, title: titleText }\">\n          </ng-template>\n        </ng-container>\n        <ng-template #noTitleTpl>{{ titleText }}</ng-template>\n      </span>\n    </div>\n    <div class=\"widget-header-btns-container\" *ngIf=\"hasConfig || canCollapse\">\n      <!-- <div *ngIf=\"hasConfig\">\n        <button seamIconBtn [icon]=\"configIcon\"\n          class=\"widget-header-btn-config\"\n          [iconType]=\"null\">\n          <span class=\"sr-only\">Widget configuration menu</span>\n        </button>\n        <button seamButton class=\"widget-header-btn-config p-0\">\n          <seam-icon class=\"d-block\" [icon]=\"configIcon\" iconClass=\"text-secondary\"></seam-icon>\n          <span class=\"sr-only\">Widget configuration menu</span>\n        </button>\n      </div> -->\n\n      <div *ngIf=\"canCollapse\" class=\"px-0\">\n\n        <button seamButton class=\"widget-header-btn-collapse p-0 mr-1 h-100\" (click)=\"collapse()\" [class.widget-header-btn-collapse--active]=\"collapsed\">\n          <seam-icon class=\"d-block\"\n            [icon]=\"collapseIcon\"\n            iconClass=\"text-secondary\">\n          </seam-icon>\n          <span class=\"sr-only\">Widget collapse</span>\n        </button>\n        <!-- iconType=\"borderless-styled-square\" -->\n        <!-- style=\"margin-left: -10px; margin-right: -5px;\" -->\n\n        <!-- <button seamIconBtn class=\"widget-header-btn-collapse\" (click)=\"collapse()\" [class.widget-header-btn-collapse--active]=\"collapsed\"\n          btnTheme=\"secondary\"\n          [icon]=\"collapseIcon\"\n          iconType=\"borderless-styled-square\"\n          size=\"xs\"\n          btnSize=\"sm\"\n          >\n          <seam-icon class=\"d-block\"\n            [icon]=\"collapseIcon\"\n            iconClass=\"text-secondary\"\n            style=\"margin-left: -10px; margin-right: -5px;\"\n            iconType=\"borderless-styled-square\"></seam-icon>\n          <span class=\"sr-only\">Widget collapse</span>\n        </button> -->\n      </div>\n    </div>\n  </div>\n  <div class=\"position-relative overflow-hidden\" [style.height.px]=\"loading ? 150 : undefined\" [@collapseAnim]=\"collapseState\">\n    <ng-container *ngIf=\"!collapsed\">\n      <div class=\"p-2\" *ngIf=\"!loading else loadingTpl\" @keepContentAnim>\n        <ng-content></ng-content>\n      </div>\n      <ng-content select=\"seam-widget-footer\"></ng-content>\n      <ng-template #loadingTpl>\n        <div class=\"position-absolute\" @loadingAnim style=\"top:0;right:0;bottom:0;left:0\">\n          <seam-loading [theme]=\"'primary'\"></seam-loading>\n        </div>\n      </ng-template>\n    </ng-container>\n  </div>\n</div>\n", styles: ["seam-widget{display:block;font-size:15px}seam-widget .seam-widget{background:#FFFFFF;box-shadow:none}seam-widget .widget-header{display:flex;flex-direction:row;border-bottom:1px solid #dee2e6;background:#F4F4F4;font-size:17px}seam-widget .widget-header .widget-header-content{flex:1 1 100%}seam-widget .widget-header .widget-header-btns-container{display:flex;flex-direction:row}seam-widget .widget-header .widget-header-btns-container>div{display:flex;flex-direction:column;justify-content:center;padding:4px}seam-widget .widget-header .widget-header-btns-container .widget-header-btn-config .seam-icon--fa{display:flex;flex-direction:row;justify-content:center;text-align:center;height:25px;width:30px}seam-widget .widget-header .widget-header-btns-container .widget-header-btn-config .seam-icon--fa .svg-inline--fa{max-width:100%;height:100%;width:100%}seam-widget .widget-header .widget-header-btns-container .widget-header-btn-collapse .seam-icon--fa{display:flex;flex-direction:row;justify-content:center;text-align:center;height:25px;width:30px}seam-widget .widget-header .widget-header-btns-container .widget-header-btn-collapse .seam-icon--fa .svg-inline--fa{max-width:100%;height:100%;width:100%}seam-widget .widget-header .widget-header-btns-container .widget-header-btn-collapse .svg-inline--fa{transform:rotate(0);transition:.3s ease-in-out transform}seam-widget .widget-header .widget-header-btns-container .widget-header-btn-collapse.widget-header-btn-collapse--active .svg-inline--fa{transform:rotate(90deg)}seam-widget .widget-header .widget-header-title{font-size:17px}seam-widget .widget-header-icon{display:inline-block;vertical-align:top;max-height:20px;max-width:20px;height:20px;width:20px;color:currentColor}seam-widget .widget-header-icon .widget-header-icon--fa{display:flex;flex-direction:row;justify-content:center;text-align:center;max-height:20px;max-width:20px;height:20px;width:20px}seam-widget .widget-header-icon .widget-header-icon--fa .svg-inline--fa{max-width:100%;height:100%;width:100%}seam-widget .widget-header-icon .widget-header-icon--img{height:100%;max-height:20px;max-width:20px}\n"] }]
-        }], propDecorators: { collapsed: [{
+        }], ctorParameters: function () {
+        return [{ type: WidgetPreferencesService }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [THESEAM_WIDGET_DATA]
+                    }] }];
+    }, propDecorators: { collapsed: [{
                 type: Input
             }], hasHeader: [{
                 type: Input
@@ -1104,8 +1222,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
             args: [{ selector: 'seam-widget-footer', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"widget-footer--left\">\n  <ng-content select=\"seam-widget-footer-text\"></ng-content>\n</div>\n<div class=\"widget-footer--right\">\n  <ng-content select=\"seam-widget-button-group\"></ng-content>\n</div>\n", styles: ["seam-widget-footer{display:flex;flex-direction:row;margin:.25rem}seam-widget-footer .widget-footer--left{flex:1 1 100%}seam-widget-footer .widget-footer--right{flex:0 0 auto}\n"] }]
         }] });
 
-const THESEAM_WIDGETS = new InjectionToken('TheSeamWidgets');
-
 /**
  * Registry is to provide a way to manage widgets in a way that we can load them
  * the same way throughout the app, whether the component itself is registered,
@@ -1143,7 +1259,7 @@ class WidgetRegistryService {
         }
     }
 }
-WidgetRegistryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WidgetRegistryService, deps: [{ token: THESEAM_WIDGETS }, { token: i1$3.TheSeamDynamicComponentLoader }], target: i0.ɵɵFactoryTarget.Injectable });
+WidgetRegistryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WidgetRegistryService, deps: [{ token: THESEAM_WIDGETS }, { token: i1$4.TheSeamDynamicComponentLoader }], target: i0.ɵɵFactoryTarget.Injectable });
 WidgetRegistryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WidgetRegistryService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WidgetRegistryService, decorators: [{
             type: Injectable,
@@ -1154,7 +1270,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
         return [{ type: undefined, decorators: [{
                         type: Inject,
                         args: [THESEAM_WIDGETS]
-                    }] }, { type: i1$3.TheSeamDynamicComponentLoader }];
+                    }] }, { type: i1$4.TheSeamDynamicComponentLoader }];
     } });
 
 const contentModules = [
@@ -1260,5 +1376,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { THESEAM_WIDGETS, THESEAM_WIDGET_ACCESSOR, TheSeamWidgetButtonGroupModule, TheSeamWidgetContentHeaderModule, TheSeamWidgetDescriptionModule, TheSeamWidgetEmptyLabelModule, TheSeamWidgetFooterLinkModule, TheSeamWidgetFooterTextModule, TheSeamWidgetHeaderBadgeModule, TheSeamWidgetListGroupModule, TheSeamWidgetModule, TheSeamWidgetTableModule, TheSeamWidgetTileListModule, TheSeamWidgetTileModule, WidgetButtonGroupComponent, WidgetComponent, WidgetContentHeaderComponent, WidgetDescriptionComponent, WidgetDragHandleDirective, WidgetEmptyLabelComponent, WidgetFooterComponent, WidgetFooterLinkComponent, WidgetFooterTextComponent, WidgetHeaderBadgeComponent, WidgetIconTplDirective, WidgetListGroupComponent, WidgetListGroupItemAnchorComponent, WidgetListGroupItemButtonComponent, WidgetListGroupItemComponent, WidgetListGroupItemIconTplDirective, WidgetRegistryService, WidgetTableComponent, WidgetTileComponent, WidgetTileFooterComponent, WidgetTileFooterItemComponent, WidgetTileGroupComponent, WidgetTileListComponent, WidgetTileSecondaryIconDirective, WidgetTitleTplDirective, extendStyles, toggleNativeDragInteractions };
+export { THESEAM_WIDGETS, THESEAM_WIDGET_ACCESSOR, THESEAM_WIDGET_DATA, TheSeamWidgetButtonGroupModule, TheSeamWidgetContentHeaderModule, TheSeamWidgetDescriptionModule, TheSeamWidgetEmptyLabelModule, TheSeamWidgetFooterLinkModule, TheSeamWidgetFooterTextModule, TheSeamWidgetHeaderBadgeModule, TheSeamWidgetListGroupModule, TheSeamWidgetModule, TheSeamWidgetTableModule, TheSeamWidgetTileListModule, TheSeamWidgetTileModule, WidgetButtonGroupComponent, WidgetComponent, WidgetContentHeaderComponent, WidgetDescriptionComponent, WidgetDragHandleDirective, WidgetEmptyLabelComponent, WidgetFooterComponent, WidgetFooterLinkComponent, WidgetFooterTextComponent, WidgetHeaderBadgeComponent, WidgetIconTplDirective, WidgetListGroupComponent, WidgetListGroupItemAnchorComponent, WidgetListGroupItemButtonComponent, WidgetListGroupItemComponent, WidgetListGroupItemIconTplDirective, WidgetRegistryService, WidgetTableComponent, WidgetTileComponent, WidgetTileFooterComponent, WidgetTileFooterItemComponent, WidgetTileGroupComponent, WidgetTileListComponent, WidgetTileSecondaryIconDirective, WidgetTitleTplDirective, extendStyles, toggleNativeDragInteractions };
 //# sourceMappingURL=theseam-ui-common-widget.mjs.map