@theseam/ui-common 0.2.16 → 0.3.1

package/bundles/theseam-ui-common-framework.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/cdk/portal'), require('rxjs'), require('@fortawesome/free-solid-svg-icons'), require('@theseam/ui-common/layout'), require('@angular/common'), require('@theseam/ui-common/buttons'), require('@theseam/ui-common/icon'), require('@theseam/ui-common/scrollbar'), require('rxjs/operators'), require('@angular/cdk/coercion'), require('@angular/cdk/drag-drop'), require('@theseam/ui-common/core'), require('@theseam/ui-common/widget'), require('@theseam/ui-common/dynamic-component-loader'), require('@theseam/ui-common/utils'), require('@theseam/ui-common/shared'), require('@angular/animations'), require('@angular/router'), require('@angular/cdk/a11y'), require('@ng-bootstrap/ng-bootstrap'), require('@fortawesome/free-regular-svg-icons'), require('@theseam/ui-common/menu'), require('@ajsf/core'), require('@angular/forms'), require('@ng-select/ng-select'), require('@theseam/ui-common/checkbox'), require('@theseam/ui-common/form-field')) :
-    typeof define === 'function' && define.amd ? define('@theseam/ui-common/framework', ['exports', '@angular/core', '@angular/cdk/portal', 'rxjs', '@fortawesome/free-solid-svg-icons', '@theseam/ui-common/layout', '@angular/common', '@theseam/ui-common/buttons', '@theseam/ui-common/icon', '@theseam/ui-common/scrollbar', 'rxjs/operators', '@angular/cdk/coercion', '@angular/cdk/drag-drop', '@theseam/ui-common/core', '@theseam/ui-common/widget', '@theseam/ui-common/dynamic-component-loader', '@theseam/ui-common/utils', '@theseam/ui-common/shared', '@angular/animations', '@angular/router', '@angular/cdk/a11y', '@ng-bootstrap/ng-bootstrap', '@fortawesome/free-regular-svg-icons', '@theseam/ui-common/menu', '@ajsf/core', '@angular/forms', '@ng-select/ng-select', '@theseam/ui-common/checkbox', '@theseam/ui-common/form-field'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.theseam = global.theseam || {}, global.theseam["ui-common"] = global.theseam["ui-common"] || {}, global.theseam["ui-common"].framework = {}), global.ng.core, global.ng.cdk.portal, global.rxjs, global.freeSolidSvgIcons, global.theseam["ui-common"].layout, global.ng.common, global.theseam["ui-common"].buttons, global.theseam["ui-common"].icon, global.theseam["ui-common"].scrollbar, global.rxjs.operators, global.ng.cdk.coercion, global.ng.cdk.dragDrop, global.theseam["ui-common"].core, global.theseam["ui-common"].widget, global.theseam["ui-common"]["dynamic-component-loader"], global.theseam["ui-common"].utils, global.theseam["ui-common"].shared, global.ng.animations, global.ng.router, global.ng.cdk.a11y, global.ngBootstrap, global.freeRegularSvgIcons, global.theseam["ui-common"].menu, global.core$1, global.ng.forms, global.ngSelect, global.theseam["ui-common"].checkbox, global.theseam["ui-common"]["form-field"]));
-})(this, (function (exports, i0, portal, rxjs, freeSolidSvgIcons, layout, common, buttons, icon, scrollbar, operators, coercion, dragDrop, core, widget, i1, utils, shared, animations, router, a11y, ngBootstrap, freeRegularSvgIcons, menu, core$1, forms, ngSelect, checkbox, formField) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/cdk/portal'), require('rxjs'), require('@fortawesome/free-solid-svg-icons'), require('@theseam/ui-common/layout'), require('@angular/common'), require('@theseam/ui-common/buttons'), require('@theseam/ui-common/icon'), require('@theseam/ui-common/scrollbar'), require('rxjs/operators'), require('@angular/cdk/coercion'), require('@angular/cdk/drag-drop'), require('@theseam/ui-common/core'), require('@theseam/ui-common/widget'), require('@theseam/ui-common/dynamic-component-loader'), require('@theseam/ui-common/utils'), require('@theseam/ui-common/shared'), require('@angular/animations'), require('@angular/router'), require('@angular/cdk/a11y'), require('@ng-bootstrap/ng-bootstrap'), require('@theseam/ui-common/menu'), require('@fortawesome/free-regular-svg-icons'), require('@ajsf/core'), require('@angular/forms'), require('@ng-select/ng-select'), require('@theseam/ui-common/checkbox'), require('@theseam/ui-common/form-field')) :
+    typeof define === 'function' && define.amd ? define('@theseam/ui-common/framework', ['exports', '@angular/core', '@angular/cdk/portal', 'rxjs', '@fortawesome/free-solid-svg-icons', '@theseam/ui-common/layout', '@angular/common', '@theseam/ui-common/buttons', '@theseam/ui-common/icon', '@theseam/ui-common/scrollbar', 'rxjs/operators', '@angular/cdk/coercion', '@angular/cdk/drag-drop', '@theseam/ui-common/core', '@theseam/ui-common/widget', '@theseam/ui-common/dynamic-component-loader', '@theseam/ui-common/utils', '@theseam/ui-common/shared', '@angular/animations', '@angular/router', '@angular/cdk/a11y', '@ng-bootstrap/ng-bootstrap', '@theseam/ui-common/menu', '@fortawesome/free-regular-svg-icons', '@ajsf/core', '@angular/forms', '@ng-select/ng-select', '@theseam/ui-common/checkbox', '@theseam/ui-common/form-field'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.theseam = global.theseam || {}, global.theseam["ui-common"] = global.theseam["ui-common"] || {}, global.theseam["ui-common"].framework = {}), global.ng.core, global.ng.cdk.portal, global.rxjs, global.freeSolidSvgIcons, global.theseam["ui-common"].layout, global.ng.common, global.theseam["ui-common"].buttons, global.theseam["ui-common"].icon, global.theseam["ui-common"].scrollbar, global.rxjs.operators, global.ng.cdk.coercion, global.ng.cdk.dragDrop, global.theseam["ui-common"].core, global.theseam["ui-common"].widget, global.theseam["ui-common"]["dynamic-component-loader"], global.theseam["ui-common"].utils, global.theseam["ui-common"].shared, global.ng.animations, global.ng.router, global.ng.cdk.a11y, global.ngBootstrap, global.theseam["ui-common"].menu, global.freeRegularSvgIcons, global.core$1, global.ng.forms, global.ngSelect, global.theseam["ui-common"].checkbox, global.theseam["ui-common"]["form-field"]));
+})(this, (function (exports, i0, portal, rxjs, freeSolidSvgIcons, layout, common, buttons, icon, scrollbar, operators, coercion, dragDrop, core, widget, i1, utils, shared, animations, router, a11y, ngBootstrap, menu, freeRegularSvgIcons, core$1, forms, ngSelect, checkbox, formField) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -241,11 +241,11 @@
     TheSeamBaseLayoutComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'seam-base-layout',
-                    template: "<div class=\"base-layout-side-bar-nav-content-mobile\" *ngIf=\"isMobile$ | async\">\n  <ng-template [cdkPortalOutlet]=\"_sideBarPortal\"></ng-template>\n</div>\n\n<div class=\"base-layout-top-bar-container border-bottom bordered\">\n  <ng-template [cdkPortalOutlet]=\"_topBarPortal\"></ng-template>\n</div>\n<div class=\"base-layout-main-container\">\n  <div *ngIf=\"hasSideBar$ | async\"\n    class=\"base-layout-side-bar-container border-right bordered\">\n    <div class=\"base-layout-side-bar-nav-content\" *ngIf=\"!(isMobile$ | async)\">\n      <ng-template [cdkPortalOutlet]=\"_sideBarPortal\"></ng-template>\n    </div>\n  </div>\n  <div class=\"base-layout-content-container\">\n    <div class=\"base-layout-content-container-header\">\n      <!-- <ng-template [cdkPortalOutlet]=\"_contentHeaderPortal\"></ng-template> -->\n\n      <div class=\"d-flex d-flex-row\">\n        <div class=\"flex-grow-1\">\n          <ng-template [cdkPortalOutlet]=\"_contentHeaderPortal\"></ng-template>\n        </div>\n        <div class=\"d-flex\">\n          <ng-container *ngFor=\"let action of registeredActions$ | async; first as isFirst\">\n            <div>\n              <ng-container [ngTemplateOutlet]=\"$any(action)?.template\"></ng-container>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n\n\n    </div>\n    <div class=\"base-layout-content-container-inner\" seamOverlayScrollbar>\n      <ng-template [cdkPortalOutlet]=\"_contentPortal\"></ng-template>\n    </div>\n    <div class=\"base-layout-content-container-footer\">\n      <ng-template [cdkPortalOutlet]=\"_contentFooterPortal\"></ng-template>\n    </div>\n  </div>\n</div>\n",
+                    template: "<div class=\"base-layout-side-bar-nav-content-mobile\" *ngIf=\"isMobile$ | async\">\n  <ng-template [cdkPortalOutlet]=\"_sideBarPortal\"></ng-template>\n</div>\n\n<div class=\"base-layout-top-bar-container\">\n  <ng-template [cdkPortalOutlet]=\"_topBarPortal\"></ng-template>\n</div>\n<div class=\"base-layout-main-container\">\n  <div *ngIf=\"hasSideBar$ | async\"\n    class=\"base-layout-side-bar-container\">\n    <div class=\"base-layout-side-bar-nav-content\" *ngIf=\"!(isMobile$ | async)\">\n      <ng-template [cdkPortalOutlet]=\"_sideBarPortal\"></ng-template>\n    </div>\n  </div>\n  <div class=\"base-layout-content-container\">\n    <div class=\"base-layout-content-container-header\">\n      <!-- <ng-template [cdkPortalOutlet]=\"_contentHeaderPortal\"></ng-template> -->\n\n      <div class=\"d-flex d-flex-row\">\n        <div class=\"flex-grow-1\">\n          <ng-template [cdkPortalOutlet]=\"_contentHeaderPortal\"></ng-template>\n        </div>\n        <div class=\"d-flex\">\n          <ng-container *ngFor=\"let action of registeredActions$ | async; first as isFirst\">\n            <div>\n              <ng-container [ngTemplateOutlet]=\"$any(action)?.template\"></ng-container>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n\n\n    </div>\n    <div class=\"base-layout-content-container-inner\" seamOverlayScrollbar>\n      <ng-template [cdkPortalOutlet]=\"_contentPortal\"></ng-template>\n    </div>\n    <div class=\"base-layout-content-container-footer\">\n      <ng-template [cdkPortalOutlet]=\"_contentFooterPortal\"></ng-template>\n    </div>\n  </div>\n</div>\n",
                     providers: [THE_SEAM_BASE_LAYOUT],
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None,
-                    styles: ["seam-base-layout{display:flex;flex-direction:column;height:100%;width:100%}seam-base-layout .base-layout-side-bar-nav-content-mobile{position:absolute;top:0;bottom:0;left:0;float:left;z-index:9999}seam-base-layout .base-layout-side-bar-container{flex:0 0 auto;display:flex;flex-direction:column}seam-base-layout .base-layout-side-bar-container .base-layout-side-bar-nav-content{flex:1 1 0}seam-base-layout .base-layout-main-container{flex:1 1 100%;display:flex;flex-direction:row;transform:translateZ(0)}seam-base-layout .base-layout-top-bar-container{flex:0 0 auto}seam-base-layout .base-layout-content-container{flex:1 1 auto;display:flex;flex-direction:column}seam-base-layout .base-layout-content-container .base-layout-content-container-header{flex:0 0 auto}seam-base-layout .base-layout-content-container .base-layout-content-container-inner{flex:1 1 auto}seam-base-layout .base-layout-content-container .base-layout-content-container-footer{flex:0 0 auto}seam-base-layout .base-layout-content-container-header{margin:.25rem}seam-base-layout .btn-baselayout-action{margin:0 0 0 .25rem;color:#212529;background-color:#e9ecef;border-color:#e9ecef;padding:.5rem 1rem;font-size:1rem;line-height:1.5;border-radius:.25rem;border:none;color:#6c757d}seam-base-layout .btn-baselayout-action:hover{color:#212529;background-color:#d3d9df;border-color:#cbd3da}seam-base-layout .btn-baselayout-action:focus,seam-base-layout .btn-baselayout-action.focus{color:#212529;background-color:#d3d9df;border-color:#cbd3da;box-shadow:0 0 0 .2rem #cbced180}seam-base-layout .btn-baselayout-action.disabled,seam-base-layout .btn-baselayout-action:disabled{color:#212529;background-color:#e9ecef;border-color:#e9ecef}seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled):active,seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled).active,.show>seam-base-layout .btn-baselayout-action.dropdown-toggle{color:#212529;background-color:#d3d9df;border-color:#c4ccd4}seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled):active:focus,seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled).active:focus,.show>seam-base-layout .btn-baselayout-action.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #cbced180}seam-base-layout .btn-baselayout-action:hover{color:#6c757d}seam-base-layout .btn-baselayout-action:focus,seam-base-layout .btn-baselayout-action.focus{color:#6c757d}\n"]
+                    styles: ["seam-base-layout{display:flex;flex-direction:column;height:100%;width:100%}seam-base-layout .base-layout-side-bar-nav-content-mobile{position:absolute;top:0;bottom:0;left:0;float:left;z-index:9999}seam-base-layout .base-layout-side-bar-container{flex:0 0 auto;display:flex;flex-direction:column;border-top:none;border-right:1px solid #dee2e6;border-bottom:none;border-left:none}seam-base-layout .base-layout-side-bar-container .base-layout-side-bar-nav-content{flex:1 1 0}seam-base-layout .base-layout-main-container{flex:1 1 100%;display:flex;flex-direction:row;transform:translateZ(0)}seam-base-layout .base-layout-top-bar-container{flex:0 0 auto;border-top:none;border-right:none;border-bottom:1px solid #dee2e6;border-left:none}seam-base-layout .base-layout-content-container{flex:1 1 auto;display:flex;flex-direction:column}seam-base-layout .base-layout-content-container .base-layout-content-container-header{flex:0 0 auto}seam-base-layout .base-layout-content-container .base-layout-content-container-inner{flex:1 1 auto}seam-base-layout .base-layout-content-container .base-layout-content-container-footer{flex:0 0 auto}seam-base-layout .base-layout-content-container-header{margin:.25rem;padding:0;background:none;border-radius:0;overflow:hidden}seam-base-layout .btn-baselayout-action{margin:0 0 0 .25rem;color:#212529;background-color:#e9ecef;border-color:#e9ecef;padding:.5rem 1rem;font-size:1rem;line-height:1.5;border-radius:.25rem;border:none;color:#6c757d}seam-base-layout .btn-baselayout-action:hover{color:#212529;background-color:#d3d9df;border-color:#cbd3da}seam-base-layout .btn-baselayout-action:focus,seam-base-layout .btn-baselayout-action.focus{color:#212529;background-color:#d3d9df;border-color:#cbd3da;box-shadow:0 0 0 .2rem #cbced180}seam-base-layout .btn-baselayout-action.disabled,seam-base-layout .btn-baselayout-action:disabled{color:#212529;background-color:#e9ecef;border-color:#e9ecef}seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled):active,seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled).active,.show>seam-base-layout .btn-baselayout-action.dropdown-toggle{color:#212529;background-color:#d3d9df;border-color:#c4ccd4}seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled):active:focus,seam-base-layout .btn-baselayout-action:not(:disabled):not(.disabled).active:focus,.show>seam-base-layout .btn-baselayout-action.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #cbced180}seam-base-layout .btn-baselayout-action:hover{color:#6c757d}seam-base-layout .btn-baselayout-action:focus,seam-base-layout .btn-baselayout-action.focus{color:#6c757d}\n"]
                 },] }
     ];
     TheSeamBaseLayoutComponent.ctorParameters = function () { return [
@@ -2169,7 +2169,6 @@
         function TopBarMenuButtonComponent() {
             var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             _this.faAngleDown = freeSolidSvgIcons.faAngleDown;
-            _this.profileIcon = freeRegularSvgIcons.faUserCircle;
             _this.compact = false;
             return _this;
         }
@@ -2202,6 +2201,7 @@
                     // tslint:disable-next-line:component-selector
                     selector: 'button[seamTopBarMenuButton]',
                     template: "<div class=\"d-flex flex-row\" *ngIf=\"!compact; else compactTpl\">\n  <div class=\"text-left flex-grow-1 text-truncate\">\n    <ng-template [ngTemplateOutlet]=\"$any(detailTpl)\"></ng-template>\n  </div>\n  <!-- Arrow Button -->\n  <div class=\"pl-2 d-flex flex-column\">\n    <div class=\"flex-grow-1\"></div>\n    <seam-icon class=\"d-block\" [icon]=\"faAngleDown\"></seam-icon>\n    <div class=\"flex-grow-1\"></div>\n  </div>\n</div>\n<ng-template #compactTpl>\n  <seam-icon [icon]=\"profileIcon\" iconType=\"borderless-styled-square\"></seam-icon>\n</ng-template>\n",
+                    encapsulation: i0.ViewEncapsulation.None,
                     exportAs: 'seamButton',
                     // tslint:disable-next-line:use-input-property-decorator
                     inputs: ['disabled'],
@@ -2213,12 +2213,13 @@
                         '[attr.disabled]': 'disabled || null',
                     },
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{min-width:200px;border-radius:0;border-top:0!important;border-bottom:0!important;border-right:0!important}:host.top-bar-menu-button--compact{min-width:40px;border-left:0!important}\n"]
+                    styles: ["button[seamTopBarMenuButton]{min-width:200px;border-radius:0;border-top:0!important;border-bottom:0!important;border-right:0!important}button[seamTopBarMenuButton].top-bar-menu-button--compact{min-width:40px;border-left:0!important}\n"]
                 },] }
     ];
     TopBarMenuButtonComponent.propDecorators = {
         detailTpl: [{ type: i0.Input }],
         compact: [{ type: i0.Input }],
+        profileIcon: [{ type: i0.Input }],
         _hasCompactClass: [{ type: i0.HostBinding, args: ['class.top-bar-menu-button--compact',] }],
         _hasPadding0Class: [{ type: i0.HostBinding, args: ['class.p-0',] }],
         _hasRoundedClass: [{ type: i0.HostBinding, args: ['class.rounded',] }],
@@ -2238,8 +2239,9 @@
         { type: i0.Component, args: [{
                     selector: 'seam-top-bar-title',
                     template: "<h2 class=\"mb-0\" [ngStyle]=\"{ 'font-size.px': 32 }\" [ngStyle.lt-md]=\"{ 'font-size.px': 26 }\" [ngStyle.lt-sm]=\"{ 'font-size.px': 20, 'line-height': 1 }\">\n  {{ titleText }}\n  <br fxHide.gt-sm>\n  <small *ngIf=\"subTitleText\" class=\"text-muted\">{{ subTitleText }}</small>\n</h2>\n",
+                    encapsulation: i0.ViewEncapsulation.None,
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{flex:1 1 auto;display:flex;flex-direction:row;align-items:center}\n"]
+                    styles: ["seam-top-bar-title{flex:1 1 auto;display:flex;flex-direction:row;align-items:center}\n"]
                 },] }
     ];
     TopBarTitleComponent.ctorParameters = function () { return []; };
@@ -2317,6 +2319,8 @@
             this.logoRoute = '/';
             /** Determines if the title should be displayed. */
             this.hasTitle = false;
+            /** Icon to display on mobile to activate profile dropdown. Defaults to faUserCircle. */
+            this.profileIcon = freeRegularSvgIcons.faUserCircle;
             this.isMobile$ = this._layout.isMobile$;
         }
         /** @ignore */
@@ -2338,13 +2342,11 @@
     TheSeamTopBarComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'seam-top-bar',
-                    template: "<!-- Nav Toggle -->\n<div class=\"d-flex flex-column justify-content-center pr-2\" *ngIf=\"isMobile$ | async\">\n  <button seamBaseLayoutNavToggle seamIconBtn [icon]=\"faBars\" iconType=\"borderless-styled-square\"></button>\n</div>\n\n<!-- Logo -->\n<div class=\"top-bar--logo d-flex flex-column justify-content-center\" *ngIf=\"logoHref; else useLogoRoute\"\n  [class.top-bar--logo-mobile]=\"isMobile$ | async\">\n  <a [href]=\"logoHref\" [target]=\"logoHrefTarget\">\n    <div>\n      <img [src]=\"logo\" [src.lt-md]=\"hasTitle ? logoSm : logo\" alt=\"Logo\">\n    </div>\n  </a>\n</div>\n\n<ng-template #useLogoRoute>\n  <div class=\"top-bar--logo d-flex flex-column justify-content-center\" [routerLink]=\"logoRoute\"\n    [class.top-bar--logo-mobile]=\"isMobile$ | async\">\n    <div>\n      <img [src]=\"logo\" [src.lt-md]=\"hasTitle ? logoSm : logo\" alt=\"Logo\">\n    </div>\n  </div>\n</ng-template>\n\n<!-- Title -->\n<div class=\"d-flex flex-column flex-grow-1\">\n  <seam-top-bar-title *ngIf=\"hasTitle\"\n    [titleText]=\"titleText\"\n    [subTitleText]=\"subTitleText\"\n    [class.ml-2]=\"isMobile$ | async\">\n  </seam-top-bar-title>\n</div>\n\n<!-- Items -->\n<div class=\"top-bar-icon-container mr-2\">\n  <ng-container *ngFor=\"let item of _items$ | async\">\n    <ng-template [ngTemplateOutlet]=\"item.template\"></ng-template>\n  </ng-container>\n</div>\n\n<!-- Menu -->\n<button seamTopBarMenuButton\n  [seamMenuToggle]=\"_topBarMenu?.menu\"\n  [detailTpl]=\"_topBarMenuBtnDetailTpl?.template\"\n  [compact]=\"isMobile$ | async\">\n</button>\n",
+                    template: "<!-- Nav Toggle -->\n<div class=\"d-flex flex-column justify-content-center pr-2\" *ngIf=\"isMobile$ | async\">\n  <button seamBaseLayoutNavToggle seamIconBtn [icon]=\"faBars\" iconType=\"borderless-styled-square\"></button>\n</div>\n\n<!-- Logo -->\n<div class=\"top-bar--logo d-flex flex-column justify-content-center\" *ngIf=\"logoHref; else useLogoRoute\"\n  [class.top-bar--logo-mobile]=\"isMobile$ | async\">\n  <a [href]=\"logoHref\" [target]=\"logoHrefTarget\">\n    <div>\n      <img *ngIf=\"logo\" [src]=\"logo\" [src.lt-md]=\"hasTitle ? logoSm : logo\" alt=\"Logo\">\n    </div>\n  </a>\n</div>\n\n<ng-template #useLogoRoute>\n  <div class=\"top-bar--logo d-flex flex-column justify-content-center\" [routerLink]=\"logoRoute\"\n    [class.top-bar--logo-mobile]=\"isMobile$ | async\">\n    <div>\n      <img *ngIf=\"logo\" [src]=\"logo\" [src.lt-md]=\"hasTitle ? logoSm : logo\" alt=\"Logo\">\n    </div>\n  </div>\n</ng-template>\n\n<!-- Title -->\n<div class=\"d-flex flex-column flex-grow-1\">\n  <seam-top-bar-title *ngIf=\"hasTitle\"\n    [titleText]=\"titleText\"\n    [subTitleText]=\"subTitleText\"\n    [class.ml-2]=\"isMobile$ | async\">\n  </seam-top-bar-title>\n</div>\n\n<!-- Items -->\n<div class=\"top-bar-icon-container mr-2\">\n  <ng-container *ngFor=\"let item of _items$ | async\">\n    <ng-template [ngTemplateOutlet]=\"item.template\"></ng-template>\n  </ng-container>\n</div>\n\n<!-- Menu -->\n<button seamTopBarMenuButton\n  [seamMenuToggle]=\"_topBarMenu?.menu\"\n  [detailTpl]=\"_topBarMenuBtnDetailTpl?.template\"\n  [compact]=\"isMobile$ | async\"\n  [profileIcon]=\"profileIcon\">\n</button>\n",
+                    encapsulation: i0.ViewEncapsulation.None,
                     exportAs: 'seamTopBar',
-                    host: {
-                        'class': 'bg-white'
-                    },
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{flex:1 1 100%;display:flex;flex-direction:row;padding:8px}.top-bar--logo{flex:0 0 auto;overflow:hidden;cursor:pointer}.top-bar--logo img{max-height:60px;max-width:200px}.top-bar--logo.top-bar--logo-mobile{max-height:40px;max-width:150px}.top-bar--logo.top-bar--logo-mobile>div{max-height:100%;max-width:100%}.top-bar--logo.top-bar--logo-mobile>div img{max-height:40px;max-width:100%}.top-bar-icon-container{margin:auto 0}\n"]
+                    styles: ["seam-top-bar{display:flex;flex:1 1 100%;flex-direction:row;background:white;margin:0;padding:8px;border-radius:0;box-shadow:none}.top-bar--logo{flex:0 0 auto;overflow:hidden;cursor:pointer}.top-bar--logo img{height:auto;max-height:60px;width:auto;max-width:200px}.top-bar--logo.top-bar--logo-mobile img{height:auto;max-height:40px;width:auto;max-width:150px}.top-bar-icon-container{margin:auto 0}\n"]
                 },] }
     ];
     TheSeamTopBarComponent.ctorParameters = function () { return [
@@ -2361,7 +2363,8 @@
         logoRoute: [{ type: i0.Input }],
         hasTitle: [{ type: i0.Input }],
         titleText: [{ type: i0.Input }],
-        subTitleText: [{ type: i0.Input }]
+        subTitleText: [{ type: i0.Input }],
+        profileIcon: [{ type: i0.Input }]
     };
     __decorate([
         core.InputBoolean()