npm - @theseam/ui-common - Versions diffs - 0.2.17 → 0.3.2 - Mend

@theseam/ui-common 0.2.17 → 0.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (140) hide show

package/fesm2015/theseam-ui-common-framework.js CHANGED Viewed

@@ -22,8 +22,8 @@ import { trigger, transition, group, query, animateChild, state, style, animate,
 import { NavigationEnd, Router, RouterModule, NavigationStart, ActivatedRoute } from '@angular/router';
 import { A11yModule } from '@angular/cdk/a11y';
 import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
-import { faUserCircle } from '@fortawesome/free-regular-svg-icons';
 import { MenuComponent, TheSeamMenuModule } from '@theseam/ui-common/menu';
+import { faUserCircle } from '@fortawesome/free-regular-svg-icons';
 import { JsonSchemaFormService, isArray, buildTitleMap, hasOwn, Framework, JsonSchemaFormModule, WidgetLibraryModule, FrameworkLibraryService, WidgetLibraryService } from '@ajsf/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { NgSelectModule } from '@ng-select/ng-select';
@@ -223,11 +223,11 @@ class TheSeamBaseLayoutComponent {
 TheSeamBaseLayoutComponent.decorators = [
     { type: 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: ChangeDetectionStrategy.OnPush,
                 encapsulation: 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 = () => [
@@ -1610,7 +1610,6 @@ class TopBarMenuButtonComponent extends _TopBarMenuButtonMixinBase {
     constructor() {
         super(...arguments);
         this.faAngleDown = faAngleDown;
-        this.profileIcon = faUserCircle;
         this.compact = false;
     }
     get _hasCompactClass() { return this.compact; }
@@ -1625,6 +1624,7 @@ TopBarMenuButtonComponent.decorators = [
                 // 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: ViewEncapsulation.None,
                 exportAs: 'seamButton',
                 // tslint:disable-next-line:use-input-property-decorator
                 inputs: ['disabled'],
@@ -1636,12 +1636,13 @@ TopBarMenuButtonComponent.decorators = [
                     '[attr.disabled]': 'disabled || null',
                 },
                 changeDetection: 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: Input }],
     compact: [{ type: Input }],
+    profileIcon: [{ type: Input }],
     _hasCompactClass: [{ type: HostBinding, args: ['class.top-bar-menu-button--compact',] }],
     _hasPadding0Class: [{ type: HostBinding, args: ['class.p-0',] }],
     _hasRoundedClass: [{ type: HostBinding, args: ['class.rounded',] }],
@@ -1659,8 +1660,9 @@ TopBarTitleComponent.decorators = [
     { type: 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: ViewEncapsulation.None,
                 changeDetection: 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 = () => [];
@@ -1735,6 +1737,8 @@ class TheSeamTopBarComponent {
         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 = faUserCircle;
         this.isMobile$ = this._layout.isMobile$;
     }
     /** @ignore */
@@ -1754,13 +1758,11 @@ class TheSeamTopBarComponent {
 TheSeamTopBarComponent.decorators = [
     { type: 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: ViewEncapsulation.None,
                 exportAs: 'seamTopBar',
-                host: {
-                    'class': 'bg-white'
-                },
                 changeDetection: 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 = () => [
@@ -1777,7 +1779,8 @@ TheSeamTopBarComponent.propDecorators = {
     logoRoute: [{ type: Input }],
     hasTitle: [{ type: Input }],
     titleText: [{ type: Input }],
-    subTitleText: [{ type: Input }]
+    subTitleText: [{ type: Input }],
+    profileIcon: [{ type: Input }]
 };
 __decorate([
     InputBoolean()